@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --ink:#2c1810;--ink-light:#5c3d2e;
  --gold:#c9a84c;--gold-light:#e8d5a3;--gold-dim:rgba(201,168,76,0.6);
  --crimson:#8b1a1a;--crimson-light:#fcebeb;
  --parchment:#f0e8d0;--parchment-dark:#e0d0a8;
  --cream:#f5e8c8;
  --bg:#f9f7f4;--surface:#ffffff;
  --border:#e2ddd5;--border-dark:#c4bfb5;
  --text:#1a1410;--text-muted:#6b5f55;--text-light:#9e9088;
  --success:#0f6e56;--success-bg:#e1f5ee;
  --error:#a32d2d;--error-bg:#fcebeb;
  --shadow:0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:0 4px 16px rgba(0,0,0,0.12);
  --radius:8px;--radius-lg:12px;
  --font-display:'Cinzel',Georgia,serif;
}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:#0a0806;background-image:url('/images/Chronicle_background.png');background-size:cover;background-position:center;background-attachment:fixed;color:var(--text);min-height:100vh;font-size:14px;line-height:1.5;}

.hidden{display:none!important;}
.flex{display:flex;}.items-center{align-items:center;}.justify-between{justify-content:space-between;}
.gap-1{gap:8px;}.gap-2{gap:16px;}.w-full{width:100%;}

/* BUTTONS */
.btn{padding:8px 16px;border-radius:var(--radius);font-size:13px;font-weight:500;cursor:pointer;border:1px solid rgba(201,168,76,0.3);background:rgba(30,20,10,0.7);color:var(--gold-light);white-space:nowrap;transition:all 0.15s;display:inline-flex;align-items:center;gap:6px;}
.btn:hover{background:rgba(201,168,76,0.15);border-color:rgba(201,168,76,0.6);color:var(--gold);}
.btn:active{transform:scale(0.98);}
.btn:disabled{opacity:0.5;cursor:not-allowed;transform:none;}
.btn-primary{background:var(--gold);color:var(--ink);border-color:var(--gold);font-weight:600;}
.btn-primary:hover{background:var(--gold-light);border-color:var(--gold-light);color:var(--ink);}
.btn-danger{background:rgba(139,26,26,0.4);color:#f09595;border-color:rgba(240,149,149,0.4);}
.btn-danger:hover{background:rgba(139,26,26,0.6);color:#ffb0b0;}
.btn-sm{padding:5px 10px;font-size:12px;}
.btn-lg{padding:12px 24px;font-size:14px;}
.btn-ghost{border-color:transparent;background:transparent;}
.btn-ghost:hover{background:rgba(201,168,76,0.1);}

/* FORMS */
.form-group{margin-bottom:16px;}
.form-label{display:block;font-size:11px;font-weight:600;color:rgba(201,168,76,0.6);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:5px;}
.form-input{width:100%;padding:9px 12px;border:1px solid rgba(201,168,76,0.2);border-radius:var(--radius);font-size:13px;background:rgba(20,12,4,0.75);color:var(--parchment);font-family:inherit;transition:border-color 0.15s;}
.form-input:focus{outline:none;border-color:rgba(201,168,76,0.6);}
.form-input::placeholder{color:rgba(201,168,76,0.55);}
.form-textarea{width:100%;padding:9px 12px;border:1px solid rgba(201,168,76,0.2);border-radius:var(--radius);font-size:13px;background:rgba(20,12,4,0.75);color:var(--parchment);font-family:inherit;min-height:120px;resize:vertical;transition:border-color 0.15s;}
.form-textarea:focus{outline:none;border-color:rgba(201,168,76,0.6);}
.form-textarea::placeholder{color:rgba(201,168,76,0.55);}
.form-hint{font-size:11px;color:rgba(201,168,76,0.35);margin-top:4px;}

/* ALERTS */
.alert{padding:10px 14px;border-radius:var(--radius);font-size:13px;margin-bottom:16px;}
.alert-error{background:rgba(139,26,26,0.35);border:1px solid rgba(240,149,149,0.4);color:#f09595;}
.alert-success{background:rgba(15,110,86,0.3);border:1px solid rgba(134,212,186,0.4);color:#86d4ba;}

/* ===== APP HEADER ===== */
.app-header{
  background:var(--ink);
  padding:0 1.5rem;
  display:flex;
  align-items:center;
  gap:12px;
  height:44px;
  position:relative;
  z-index:50;
  border-bottom:1px solid rgba(201,168,76,0.15);
  box-shadow:0 2px 12px rgba(0,0,0,0.4);
}
.app-logo{
  height:44px;
  display:flex;align-items:center;gap:10px;
  flex-shrink:0;
}
.app-logo-text{
  font-family:var(--font-display);
  font-size:18px;
  font-weight:700;
  color:var(--gold);
  letter-spacing:4px;
  white-space:nowrap;
}
.app-logo img{height:32px;width:auto;object-fit:contain;display:block;}
.app-name{
  font-family:var(--font-display);
  font-size:20px;
  font-weight:700;
  color:var(--gold);
  letter-spacing:3px;
  text-shadow:0 0 20px rgba(201,168,76,0.3);
}
.app-header-right{margin-left:auto;display:flex;align-items:center;gap:10px;}
.app-header-right > .btn,.app-header-right > #token-balance-label{height:30px;}

/* USER MENU */
.user-menu-wrap{position:relative;}
.user-menu-btn{display:flex;align-items:center;gap:8px;padding:0 10px;height:30px;border-radius:var(--radius);cursor:pointer;border:1px solid rgba(201,168,76,0.2);background:rgba(255,255,255,0.05);color:rgba(201,168,76,0.8);font-size:13px;transition:all 0.15s;}
.user-menu-btn:hover{background:rgba(255,255,255,0.1);border-color:rgba(201,168,76,0.4);}
.user-avatar{width:22px;height:22px;border-radius:50%;background:var(--gold);color:var(--ink);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:var(--font-display);}
.user-menu-dropdown{position:absolute;top:calc(100% + 8px);right:0;background:var(--ink);border:1px solid rgba(201,168,76,0.2);border-radius:var(--radius-lg);box-shadow:0 8px 24px rgba(0,0,0,0.5);min-width:190px;overflow:hidden;display:none;z-index:100;}
.user-menu-dropdown.open{display:block;}
.user-menu-item{padding:10px 14px;font-size:13px;color:var(--gold-light);cursor:pointer;display:flex;align-items:center;gap:8px;transition:background 0.1s;}
.user-menu-item:hover{background:rgba(201,168,76,0.1);}
.user-menu-item.danger{color:#f09595;}
.user-menu-item.danger:hover{background:rgba(139,26,26,0.3);}
.user-menu-divider{height:1px;background:rgba(201,168,76,0.15);margin:4px 0;}
.user-menu-header{padding:10px 14px;font-size:11px;color:rgba(201,168,76,0.5);border-bottom:1px solid rgba(201,168,76,0.15);}

/* BREADCRUMB */
.breadcrumb{padding:4px 1.5rem;background:rgba(20,15,8,0.75);border-bottom:1px solid rgba(201,168,76,0.15);display:flex;align-items:center;gap:6px;font-size:12px;color:rgba(201,168,76,0.6);flex-wrap:wrap;backdrop-filter:blur(8px);}
.breadcrumb-link{color:var(--gold);cursor:pointer;font-weight:500;}
.breadcrumb-link:hover{text-decoration:underline;}
.breadcrumb-sep{color:rgba(201,168,76,0.3);font-size:11px;}
.breadcrumb-current{color:var(--gold-light);font-weight:500;}

/* LAYOUT */
.app-layout{display:flex;min-height:calc(100vh - 44px - 35px);}
.sidebar{width:220px;background:rgba(20,15,8,0.82);border-right:1px solid rgba(201,168,76,0.15);flex-shrink:0;padding:12px 0;backdrop-filter:blur(8px);}
.sidebar-section{margin-bottom:4px;}
.sidebar-label{font-size:10px;font-weight:700;color:var(--text-light);text-transform:uppercase;letter-spacing:0.1em;padding:0 14px;margin-bottom:3px;margin-top:10px;font-family:var(--font-display);}
.sidebar-item{padding:8px 14px;font-size:13px;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;gap:8px;border-left:2px solid transparent;transition:all 0.12s;}
.sidebar-item:hover{background:var(--bg);color:var(--text);}
.sidebar-item.active{background:var(--crimson-light);color:var(--crimson);border-left-color:var(--crimson);font-weight:500;}
.sidebar-divider{height:1px;background:var(--border);margin:8px 14px;}
.main-content{flex:1;overflow-y:auto;max-width:100%;}

/* ===== CAMPAIGNS VIEW — epic background ===== */
#view-campaigns{
  min-height:calc(100vh - 44px - 35px);
  background:#0a0806;
  background-image:url('/images/Chronicle_background.png');
  background-size:cover;
  background-position:center;
  position:relative;
  padding:2rem 1.5rem;
}
#view-campaigns::before{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.55);
  pointer-events:none;
}
#view-campaigns .page-header,
#view-campaigns .campaigns-grid{
  position:relative;
  z-index:1;
}
#view-campaigns .page-title{
  font-family:var(--font-display);
  color:var(--gold);
  font-size:26px;
  letter-spacing:2px;
  text-shadow:0 2px 8px rgba(0,0,0,0.6);
}
#view-campaigns .page-subtitle{
  color:rgba(201,168,76,0.6);
  font-size:13px;
}

/* PAGE */
.page-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px;gap:12px;}
.page-title{font-size:20px;font-weight:600;color:var(--text);letter-spacing:-0.3px;}
.page-subtitle{font-size:13px;color:var(--text-muted);margin-top:2px;}
.main-content > div:not(#view-campaigns){padding:1.5rem;}

/* Glass dark panels for all views except campaigns */
#view-sessions,#view-characters,#view-novel,
#view-session-detail,#view-settings{
  background:rgba(12,8,4,0.72);
  min-height:calc(100vh - 44px - 35px);
  backdrop-filter:blur(10px);
}
#view-sessions .page-title,#view-characters .page-title,
#view-novel .page-title,#view-session-detail .page-title,
#view-settings .page-title{
  color:var(--gold);font-family:var(--font-display);letter-spacing:1px;
}
#view-sessions .page-subtitle,#view-characters .page-subtitle,
#view-novel .page-subtitle,#view-session-detail .page-subtitle,
#view-settings .page-subtitle{color:rgba(201,168,76,0.5);}

/* Make cards and surfaces slightly translucent */
.session-item{background:rgba(30,22,12,0.85);border-color:rgba(201,168,76,0.15);color:var(--gold-light);}
.session-item:hover{border-color:var(--gold);background:rgba(50,35,15,0.92);box-shadow:0 0 0 1px rgba(201,168,76,0.3);}
.session-name{color:var(--gold-light);}
.session-date{color:rgba(201,168,76,0.45);}
.session-num{background:rgba(201,168,76,0.1);border-color:rgba(201,168,76,0.2);color:var(--gold);}
.char-card{background:rgba(25,18,10,0.85);border-color:rgba(201,168,76,0.15);}
.char-card:hover{border-color:rgba(201,168,76,0.4);}
.char-name{color:var(--gold-light);}
.char-player{color:rgba(201,168,76,0.5);}
.char-desc{color:rgba(201,168,76,0.45);}
.char-badge{background:rgba(201,168,76,0.08);border-color:rgba(201,168,76,0.15);color:rgba(201,168,76,0.6);}
.char-btn{background:rgba(201,168,76,0.08);border-color:rgba(201,168,76,0.2);color:rgba(201,168,76,0.6);}
.char-btn:hover{background:rgba(201,168,76,0.2);color:var(--gold);}
.char-btn-delete:hover{background:rgba(139,26,26,0.4);color:#f09595;border-color:rgba(240,149,149,0.4);}
.add-char-card{background:rgba(20,14,6,0.6);border-color:rgba(201,168,76,0.2);color:rgba(201,168,76,0.4);}
.add-char-card:hover{border-color:rgba(201,168,76,0.5);color:var(--gold);background:rgba(40,28,10,0.7);}
.moment-card{background:rgba(25,18,10,0.85);border-color:rgba(201,168,76,0.15);}
.moment-img{background:rgba(15,10,5,0.6);border-bottom-color:rgba(201,168,76,0.1);}
.moment-title{color:var(--gold-light);}
.moment-desc{color:rgba(201,168,76,0.5);}
.moment-prompt{color:rgba(201,168,76,0.35);border-top-color:rgba(201,168,76,0.1);}
.settings-section{background:rgba(25,18,10,0.85);border-color:rgba(201,168,76,0.15);}
.settings-section-title{color:var(--gold-light);}
.settings-section-desc{color:rgba(201,168,76,0.5);}
.form-label{color:rgba(201,168,76,0.6);}
.form-input{background:rgba(15,10,5,0.7);border-color:rgba(201,168,76,0.2);color:var(--gold-light);}
.form-input:focus{border-color:rgba(201,168,76,0.6);}
.form-input::placeholder{color:rgba(201,168,76,0.55);}
.form-textarea{background:rgba(15,10,5,0.7);border-color:rgba(201,168,76,0.2);color:var(--gold-light);}
.form-textarea:focus{border-color:rgba(201,168,76,0.6);}
.form-textarea::placeholder{color:rgba(201,168,76,0.55);}
.form-hint{color:rgba(201,168,76,0.35);}
.transcript-box{background:rgba(15,10,5,0.7);border-color:rgba(201,168,76,0.2);color:var(--parchment);}
.transcript-box:focus{border-color:rgba(201,168,76,0.5);}
.transcript-box::placeholder{color:rgba(201,168,76,0.55);}

/* Session Notes tab — transcript + notes side by side */
.notes-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media (max-width:860px){.notes-grid{grid-template-columns:1fr;}}

/* Review tab — storyboard outline (intro → panel → bridge → panel → ... → outro) */
.review-actionbar{display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin-bottom:14px;}

/* Narrative blocks — the through-line. Soft, italic, indented. */
.review-nar{padding:10px 14px;margin:6px 0;border-left:3px solid rgba(201,168,76,0.4);
  background:rgba(201,168,76,0.05);border-radius:0 var(--radius) var(--radius) 0;}
.review-nar-open,.review-nar-close{border-left-color:var(--gold);
  background:rgba(201,168,76,0.08);}
.review-nar-label{font-size:10px;font-weight:700;color:var(--gold);
  text-transform:uppercase;letter-spacing:0.1em;margin-bottom:4px;}
.review-nar-text{font-size:13px;color:var(--parchment);font-style:italic;line-height:1.5;}
/* Pass 1 — per-gap narrative steering. The head row carries the label + the
   Direction pill; the pill lights gold when a direction has been set. */
.review-nar-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px;}
.review-nar-head .review-nar-label{margin-bottom:0;}
.review-nar-empty{color:rgba(201,168,76,0.45);font-style:italic;}
.review-dir-btn{padding:3px 8px;font-size:10px;background:rgba(0,0,0,0.5);
  color:rgba(201,168,76,0.85);border:1px solid rgba(201,168,76,0.3);border-radius:6px;
  cursor:pointer;white-space:nowrap;line-height:1.3;transition:background 0.15s,color 0.15s,border-color 0.15s;}
.review-dir-btn:hover{background:rgba(0,0,0,0.8);color:var(--gold);border-color:var(--gold);}
.review-dir-btn.is-on{color:var(--gold);border-color:var(--gold);background:rgba(201,168,76,0.12);}

/* Panel blocks — quick reference points along the narrative. */
.review-panel{border:1px solid rgba(201,168,76,0.18);border-radius:var(--radius);
  padding:10px 14px;margin:6px 0;background:rgba(20,12,4,0.4);}
.review-panel-head{display:flex;align-items:center;gap:10px;margin-bottom:4px;}
.review-panel-num{display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;background:var(--crimson-light);
  color:var(--crimson);font-size:11px;font-weight:700;flex-shrink:0;}
.review-panel-title{font-family:var(--font-display);font-size:14px;color:var(--parchment);}
.review-snippet{font-size:12px;color:var(--text-muted);margin-bottom:4px;}
.review-row{font-size:12px;margin-top:3px;display:flex;flex-wrap:wrap;
  align-items:center;gap:5px;}
.review-label{color:var(--text-light);font-weight:600;text-transform:uppercase;
  letter-spacing:0.05em;font-size:10px;}
.review-chip{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;
  background:rgba(201,168,76,0.12);color:var(--gold);}
.review-chip-asset{background:rgba(122,140,184,0.14);color:#9caedb;}
.review-none{font-size:11px;color:var(--text-light);font-style:italic;}
/* Pass 2 — editable per-panel casting */
.review-chip{position:relative;}
.review-chip-x{margin-left:5px;border:none;background:transparent;color:inherit;
  opacity:0.55;cursor:pointer;font-size:12px;line-height:1;padding:0;}
.review-chip-x:hover{opacity:1;color:var(--crimson);}
.review-add-select{font-size:11px;padding:2px 6px;border-radius:8px;cursor:pointer;
  background:rgba(0,0,0,0.4);color:rgba(201,168,76,0.85);
  border:1px dashed rgba(201,168,76,0.35);}
.review-add-select:hover{border-color:var(--gold);color:var(--gold);}
.review-cast-badge{margin-left:auto;font-size:9px;font-weight:700;text-transform:uppercase;
  letter-spacing:0.08em;padding:2px 7px;border-radius:8px;
  background:rgba(122,140,184,0.14);color:#9caedb;}
.review-cast-badge.is-custom{background:rgba(201,168,76,0.16);color:var(--gold);}
.review-reset-btn{font-size:10px;padding:2px 7px;border-radius:8px;cursor:pointer;
  background:transparent;border:1px solid rgba(201,168,76,0.3);color:rgba(201,168,76,0.75);}
.review-reset-btn:hover{border-color:var(--gold);color:var(--gold);}
.review-change-mark{font-size:11px;color:var(--gold);font-style:italic;
  margin:2px 0 4px;opacity:0.85;}

/* Asset modal — image drop zone */
.asset-drop{border:2px dashed rgba(201,168,76,0.3);border-radius:var(--radius);
  min-height:140px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all 0.15s;background:rgba(20,12,4,0.4);overflow:hidden;}
.asset-drop:hover{border-color:rgba(201,168,76,0.55);}
.asset-drop.drag-over{border-color:var(--gold);background:rgba(201,168,76,0.1);}
.asset-drop-empty{display:flex;flex-direction:column;align-items:center;gap:6px;
  color:rgba(201,168,76,0.45);font-size:13px;}
.asset-drop-preview{max-width:100%;max-height:240px;border-radius:6px;display:block;}

/* Session detail header — name left, date pushed right, one row */
.session-detail-head{display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:6px;}
.session-detail-date{max-width:150px;font-size:10px;padding:0 8px;}
.main-content > div#view-session-detail{padding-top:0.75rem;}
.main-content > div#view-novel{padding-top:0.375rem;}
#view-novel .page-header{margin-bottom:4px;}
#view-novel .sess-tab{padding-top:5px;padding-bottom:5px;}
#view-session-detail .sess-tab{padding-top:5px;padding-bottom:5px;}
#view-session-detail .sess-tabs{margin-bottom:8px;}
.sdh-left{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;}
.sdh-right{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap;}
.session-detail-head .form-input{height:30px;box-sizing:border-box;padding-top:0;padding-bottom:0;width:auto;flex:0 0 auto;}
.session-detail-head .btn{height:30px;box-sizing:border-box;}
.session-detail-head .session-access-chip{height:30px;box-sizing:border-box;display:inline-flex;align-items:center;}

/* Notes toolbar — find/replace (left) + Generate Story (right), one row */
.notes-toolbar{display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-bottom:8px;}
.fr-tools{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;}
.fr-input{height:30px;padding:2px 8px;font-size:12px;
  min-width:90px;max-width:150px;}
.fr-result{font-size:11px;color:var(--gold);white-space:nowrap;}
.btn-xs{padding:4px 10px;font-size:12px;line-height:1.2;white-space:nowrap;}
.sess-tab{color:rgba(201,168,76,0.45);}
.sess-tab:hover{color:var(--gold);}
.sess-tab.active{color:var(--gold);border-bottom-color:var(--gold);}
.sess-tabs{border-bottom-color:rgba(201,168,76,0.15);}
.sidebar-item{color:rgba(201,168,76,0.5);}
.sidebar-item:hover{background:rgba(201,168,76,0.08);color:var(--gold);}
.sidebar-item.active{background:rgba(201,168,76,0.12);color:var(--gold);border-left-color:var(--gold);}
.sidebar-label{color:rgba(201,168,76,0.35);}
.sidebar-divider{background:rgba(201,168,76,0.12);}
.novel-session-block{background:rgba(25,18,10,0.85);border-color:rgba(201,168,76,0.15);}
.novel-session-header{background:rgba(15,10,5,0.6);border-bottom-color:rgba(201,168,76,0.1);}
.novel-session-title{color:var(--gold-light);}
.novel-session-date{color:rgba(201,168,76,0.45);}
.novel-moment-row{border-bottom-color:rgba(201,168,76,0.1);}
.novel-moment-title{color:var(--gold-light);}
.novel-moment-desc{color:rgba(201,168,76,0.5);}
.key-input-field{background:rgba(15,10,5,0.7);border-color:rgba(201,168,76,0.2);color:var(--gold-light);}
.progress-bar{background:rgba(201,168,76,0.1);}
.progress-fill{background:var(--gold);}
.progress-msg{color:rgba(201,168,76,0.6);}
.chip{background:rgba(25,18,10,0.7);border-color:rgba(201,168,76,0.2);color:rgba(201,168,76,0.5);}
.chip:hover{border-color:rgba(201,168,76,0.4);color:var(--gold);}
.chip.sel{background:rgba(201,168,76,0.15);color:var(--gold);border-color:rgba(201,168,76,0.5);}
.storyboard-header{color:rgba(201,168,76,0.5);}
.empty-state h3{color:var(--gold-light);}
.empty-state p{color:rgba(201,168,76,0.45);}
.modal{background:rgba(18,12,6,0.95);border:1px solid rgba(201,168,76,0.2);}
.modal-title{color:var(--gold);}
.modal-close{color:rgba(201,168,76,0.5);}
.modal-footer{border-top-color:rgba(201,168,76,0.15);}
.image-upload-area{background:rgba(15,10,5,0.6);border-color:rgba(201,168,76,0.2);}
.image-upload-area:hover{border-color:rgba(201,168,76,0.5);}


/* CAMPAIGN CARDS */
.campaigns-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;}
.campaign-card{
  background:rgba(20,15,8,0.85);
  border:1px solid rgba(201,168,76,0.25);
  border-radius:var(--radius-lg);
  padding:16px;
  cursor:pointer;
  transition:all 0.2s;
  box-shadow:0 4px 16px rgba(0,0,0,0.4);
  backdrop-filter:blur(4px);
}
.campaign-card:hover{
  border-color:rgba(201,168,76,0.6);
  box-shadow:0 6px 24px rgba(0,0,0,0.5),0 0 0 1px rgba(201,168,76,0.3);
  transform:translateY(-2px);
}
.campaign-card-icon{width:40px;height:40px;margin-bottom:10px;}
.campaign-card-icon img{width:40px;height:40px;object-fit:contain;}
.campaign-card-name{font-size:14px;font-weight:600;color:var(--gold);margin-bottom:4px;font-family:var(--font-display);letter-spacing:0.5px;}
.campaign-card-desc{font-size:12px;color:rgba(201,168,76,0.55);line-height:1.5;margin-bottom:10px;}
.campaign-card-meta{font-size:11px;color:rgba(201,168,76,0.35);}
.add-campaign-card{
  background:rgba(20,15,8,0.6);
  border:1px dashed rgba(201,168,76,0.25);
  border-radius:var(--radius-lg);
  padding:16px;
  cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;min-height:130px;
  color:rgba(201,168,76,0.4);
  font-size:13px;
  transition:all 0.2s;
  backdrop-filter:blur(4px);
}
.add-campaign-card:hover{border-color:rgba(201,168,76,0.5);color:var(--gold);}
.add-campaign-card .plus{font-size:28px;line-height:1;}

/* SESSIONS */
.sessions-list{display:flex;flex-direction:column;gap:10px;}
.session-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:4px 16px;cursor:pointer;transition:all 0.15s;display:flex;align-items:center;justify-content:space-between;}
.session-item:hover{border-color:var(--crimson);box-shadow:var(--shadow);}
.session-item-left{display:flex;align-items:center;gap:12px;}
.session-num{width:32px;height:32px;background:var(--bg);border:1px solid var(--border);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:var(--text-muted);flex-shrink:0;}
.session-name{font-size:13px;font-weight:500;color:var(--text);}
.session-date{font-size:11px;color:var(--text-muted);margin-top:1px;}
.session-badge{font-size:10px;padding:2px 7px;border-radius:99px;background:var(--success-bg);color:var(--success);font-weight:500;}
.session-badge.empty{background:var(--bg);color:var(--text-light);border:1px solid var(--border);}

/* CHARACTERS */
.char-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;}
.char-card{border:1px solid var(--border);border-radius:var(--radius-lg);padding:12px;background:var(--surface);box-shadow:var(--shadow);}
.char-card-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:8px;}
.char-avatar{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;border:2px solid var(--border);}
.char-actions{display:flex;gap:4px;}
.char-btn{padding:3px 8px;font-size:10px;border-radius:4px;cursor:pointer;border:1px solid var(--border);background:var(--bg);color:var(--text-muted);}
.char-btn:hover{background:var(--border);}
.char-btn-delete:hover{background:var(--error-bg);color:var(--error);border-color:#f09595;}
.char-name{font-size:13px;font-weight:600;color:var(--text);margin-bottom:2px;}
.char-player{font-size:11px;color:var(--text-muted);margin-bottom:3px;}
.char-desc{font-size:11px;color:var(--text-muted);line-height:1.5;}
.char-badge{display:inline-block;font-size:10px;padding:2px 6px;border-radius:4px;margin-top:6px;background:var(--bg);color:var(--text-muted);border:1px solid var(--border);}
.add-char-card{border:1px dashed var(--border-dark);border-radius:var(--radius-lg);padding:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;min-height:120px;color:var(--text-muted);font-size:12px;transition:all 0.15s;}
.add-char-card:hover{border-color:var(--crimson);color:var(--crimson);}

/* SESSION TABS */
.sess-tabs{display:flex;border-bottom:1px solid var(--border);margin-bottom:20px;}
.sess-tab{padding:10px 18px;font-size:13px;color:var(--text-muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;transition:color 0.15s;}
.sess-tab:hover{color:var(--crimson);}
.sess-tab.active{color:#7fb0e0;border-bottom-color:#7fb0e0;font-weight:500;}

/* STORYBOARD */
.storyboard-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.moments-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;align-items:start;}
.moment-card{border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface);box-shadow:var(--shadow);}
.moment-img{width:100%;aspect-ratio:4/3;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:12px;border-bottom:1px solid var(--border);}
.moment-img-inner{font-size:11px;color:var(--text-muted);text-align:center;line-height:1.5;}
.moment-body{padding:10px;}
.moment-num{font-size:10px;color:var(--text-muted);margin-bottom:3px;}
.moment-title{font-size:12px;font-weight:600;color:var(--text);margin-bottom:4px;line-height:1.4;}
.moment-desc{font-size:11px;color:var(--text-muted);line-height:1.5;}
.moment-prompt{font-size:10px;color:var(--text-light);line-height:1.4;margin-top:6px;padding-top:6px;border-top:1px solid var(--border);font-style:italic;}
.moment-type{display:inline-block;font-size:10px;padding:2px 6px;border-radius:4px;margin-top:5px;font-weight:500;}
.type-combat{background:#fcebeb;color:#a32d2d;}
.type-drama{background:#eeedfe;color:#3c3489;}
.type-discovery{background:#e1f5ee;color:#0f6e56;}
.type-humor{background:#faeeda;color:#854f0b;}

/* TRANSCRIPT */
.transcript-box{width:100%;min-height:220px;border:1px solid var(--border);border-radius:var(--radius);padding:12px;font-size:13px;line-height:1.7;color:var(--text);background:var(--surface);resize:vertical;font-family:inherit;}
.transcript-box:focus{outline:none;border-color:var(--crimson);}

/* STYLE CHIPS */
.style-row{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0 16px;}
.chip{padding:5px 13px;border-radius:99px;font-size:12px;border:1px solid var(--border);cursor:pointer;color:var(--text-muted);background:var(--surface);transition:all 0.12s;}
.chip:hover{border-color:var(--border-dark);color:var(--text);}
.chip.sel{background:var(--ink);color:var(--gold);border-color:var(--ink);}

/* PROGRESS */
.progress-wrap{margin-top:14px;display:none;}
.progress-bar{height:4px;background:var(--border);border-radius:2px;overflow:hidden;margin-bottom:8px;}
.progress-fill{height:100%;background:var(--crimson);border-radius:2px;width:0%;transition:width 0.3s;}
.progress-msg{font-size:12px;color:var(--text-muted);text-align:center;}

/* MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:100;display:flex;align-items:center;justify-content:center;padding:16px;}
.modal{background:var(--surface);border-radius:var(--radius-lg);padding:24px;width:100%;max-width:500px;box-shadow:var(--shadow-md);max-height:90vh;overflow-y:auto;}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
.modal-title{font-size:16px;font-weight:600;color:var(--text);font-family:var(--font-display);letter-spacing:0.5px;}
.modal-close{background:none;border:none;cursor:pointer;font-size:20px;color:var(--text-muted);padding:0;line-height:1;}
.modal-close:hover{color:var(--text);}
.modal-footer{display:flex;gap:8px;justify-content:flex-end;margin-top:20px;padding-top:16px;border-top:1px solid var(--border);}

/* IMAGE UPLOAD */
.image-upload-area{border:1px dashed var(--border-dark);border-radius:var(--radius);padding:16px;text-align:center;cursor:pointer;background:var(--bg);transition:border-color 0.15s;}
.image-upload-area:hover{border-color:var(--crimson);}
.image-preview{width:80px;height:80px;border-radius:50%;object-fit:cover;display:none;margin:10px auto 0;border:2px solid var(--border);}

/* EMPTY STATES */
.empty-state{text-align:center;padding:3rem 1rem;color:var(--text-muted);}
.empty-state-icon{font-size:48px;margin-bottom:12px;}
.empty-state h3{font-size:16px;font-weight:600;color:var(--text);margin-bottom:6px;font-family:var(--font-display);}
.empty-state p{font-size:13px;margin-bottom:16px;max-width:300px;margin-left:auto;margin-right:auto;}

/* SETTINGS */
.settings-section{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;margin-bottom:16px;}
.settings-section-title{font-size:14px;font-weight:600;color:var(--text);margin-bottom:4px;font-family:var(--font-display);letter-spacing:0.5px;}
.settings-section-desc{font-size:12px;color:var(--text-muted);margin-bottom:16px;}
.key-input-field{width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:var(--radius);font-size:12px;background:var(--surface);color:var(--text);font-family:monospace;}
.key-input-field:focus{outline:none;border-color:var(--crimson);}

/* NOVEL */
.novel-session-block{border:1px solid var(--border);border-radius:var(--radius-lg);margin-bottom:14px;overflow:hidden;background:var(--surface);}
.novel-session-header{padding:12px 16px;background:var(--bg);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.novel-session-title{font-size:13px;font-weight:600;color:var(--text);font-family:var(--font-display);letter-spacing:0.5px;}
.novel-session-date{font-size:11px;color:var(--text-muted);}
.novel-session-moments{padding:12px 16px;}
.novel-moment-row{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);}
.novel-moment-row:last-child{border-bottom:none;}
.novel-moment-num{width:24px;height:24px;border-radius:4px;background:var(--ink);color:var(--gold);font-size:10px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;}
.novel-moment-title{font-size:12px;font-weight:600;color:var(--text);}
.novel-moment-desc{font-size:11px;color:var(--text-muted);margin-top:2px;line-height:1.5;}
.novel-empty{text-align:center;padding:12px;font-size:12px;color:var(--text-light);font-style:italic;}
.novel-cover{padding:2rem 1.5rem;background:var(--ink);text-align:center;color:var(--gold);}
.novel-cover-eyebrow{font-size:10px;opacity:0.5;letter-spacing:0.12em;text-transform:uppercase;margin-bottom:10px;font-family:var(--font-display);}
.novel-cover-title{font-size:22px;font-weight:700;margin-bottom:4px;font-family:var(--font-display);letter-spacing:1px;}
.novel-cover-divider{width:40px;height:1px;background:var(--gold);margin:12px auto;opacity:0.4;}
.novel-cover-sub{font-size:12px;opacity:0.6;}
.novel-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:#222;padding:2px;}
.novel-panel{background:var(--bg);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
.novel-panel.wide{grid-column:1/-1;aspect-ratio:16/7;}
.novel-panel-inner{font-size:11px;color:var(--text-muted);text-align:center;padding:8px;line-height:1.5;}
.novel-caption{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,0.75);color:white;font-size:9px;padding:4px 7px;line-height:1.4;}
.novel-chapter-header{background:var(--ink);color:var(--gold);padding:8px 12px;font-size:11px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;font-family:var(--font-display);}

/* IMAGE GENERATION */
.moment-img-generated{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;}
.moment-img-shimmer{
  width:100%;aspect-ratio:4/3;
  background:linear-gradient(90deg,rgba(201,168,76,0.05) 25%,rgba(201,168,76,0.12) 50%,rgba(201,168,76,0.05) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s infinite;
  display:flex;align-items:center;justify-content:center;
}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.moment-img-shimmer-text{font-size:11px;color:rgba(201,168,76,0.5);text-align:center;}
/* Non-destructive busy overlay — sits ON TOP of the existing panel image
   during regeneration, dimming the original instead of replacing it. The
   user's current image stays in the DOM, so a refusal / failure leaves
   their work intact when the overlay is removed. */
.moment-img-busy-overlay{
  position:absolute;inset:0;
  background:rgba(12,8,4,0.55);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  z-index:2;pointer-events:none;
  border-radius:inherit;
}
.moment-img-busy-spinner{
  width:28px;height:28px;border-radius:50%;
  border:3px solid rgba(201,168,76,0.2);
  border-top-color:#c9a84c;
  animation:momentBusySpin 0.9s linear infinite;
}
.moment-img-busy-label{
  font-size:11px;color:#c9a84c;letter-spacing:1px;text-transform:uppercase;
  font-family:var(--font-display);text-shadow:0 1px 4px rgba(0,0,0,0.6);
}
.moment-img-busy-sublabel{
  font-size:11px;color:rgba(201,168,76,0.8);
  max-width:80%;text-align:center;line-height:1.4;
  text-shadow:0 1px 4px rgba(0,0,0,0.6);
  margin-top:2px;
}
/* Error-overlay variant — uses the same overlay slot as the busy overlay
   but with a warm red tone, an error icon, and a dismiss (X) corner button.
   Used for in-panel error display on single-image regen (so users don't
   miss errors when scrolled deep in a long storyboard). */
.moment-img-error-overlay{
  position:absolute;inset:0;
  background:rgba(40,12,8,0.85);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  z-index:3;
  border-radius:inherit;
  padding:14px;
}
.moment-img-error-icon{
  font-size:22px;color:#f0a090;line-height:1;
}
.moment-img-error-message{
  font-size:12px;color:#f5d8d0;
  max-width:90%;text-align:center;line-height:1.45;
  text-shadow:0 1px 4px rgba(0,0,0,0.6);
}
.moment-img-error-dismiss{
  position:absolute;top:6px;right:8px;
  background:none;border:none;cursor:pointer;
  color:rgba(245,216,208,0.7);font-size:18px;line-height:1;
  padding:2px 6px;border-radius:4px;
}
.moment-img-error-dismiss:hover{color:#f5d8d0;background:rgba(0,0,0,0.3);}
@keyframes momentBusySpin{to{transform:rotate(360deg);}}
.moment-card{position:relative;}
.moment-regen-btn{
  position:absolute;top:6px;right:6px;
  padding:3px 8px;font-size:10px;
  background:rgba(0,0,0,0.6);color:rgba(201,168,76,0.8);
  border:1px solid rgba(201,168,76,0.3);border-radius:6px;
  cursor:pointer;opacity:0;transition:opacity 0.15s;
}
.moment-card:hover .moment-regen-btn{opacity:1;}
.moment-regen-btn:hover{background:rgba(0,0,0,0.8);color:var(--gold);}
.moment-lock-btn{position:absolute;top:8px;left:8px;z-index:3;padding:3px 8px;font-size:10px;background:rgba(0,0,0,0.6);color:rgba(201,168,76,0.8);border:1px solid rgba(201,168,76,0.3);border-radius:6px;cursor:pointer;opacity:0.85;transition:opacity 0.15s;}
.moment-lock-btn:hover{opacity:1;background:rgba(0,0,0,0.8);color:var(--gold);}
.moment-lock-btn.is-locked{color:var(--gold);border-color:var(--gold);opacity:1;}
.moment-lock-btn.is-static{cursor:default;}
.moment-regen-btn[disabled]{cursor:not-allowed;color:rgba(201,168,76,0.3);}

/* DRAG AND DROP */
.image-upload-area{transition:all 0.2s;cursor:pointer;}
.image-upload-area.drag-over{
  border-color:var(--gold) !important;
  background:rgba(201,168,76,0.1) !important;
  transform:scale(1.02);
  box-shadow:0 0 0 3px rgba(201,168,76,0.2);
}
.char-card-drop{
  position:relative;
  transition:all 0.2s;
}
.char-card-drop.drag-over{
  border-color:var(--gold) !important;
  background:rgba(201,168,76,0.12) !important;
  transform:scale(1.02);
  box-shadow:0 0 0 3px rgba(201,168,76,0.25);
}
.char-card-drop.drag-over::after{
  content:'Drop portrait here';
  position:absolute;
  inset:0;
  background:rgba(12,8,4,0.75);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--gold);
  font-size:12px;
  font-weight:600;
  border-radius:var(--radius-lg);
  letter-spacing:0.5px;
}

/* LIGHTBOX */
.lightbox-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,0.92);
  z-index:999;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  cursor:zoom-out;
  animation:lightbox-in 0.2s ease;
}
@keyframes lightbox-in{from{opacity:0}to{opacity:1}}
.lightbox-img{
  max-width:90vw;max-height:88vh;
  object-fit:contain;
  border-radius:var(--radius-lg);
  box-shadow:0 8px 60px rgba(0,0,0,0.8),0 0 0 1px rgba(201,168,76,0.2);
  animation:lightbox-scale 0.2s ease;
}
@keyframes lightbox-scale{from{transform:scale(0.92)}to{transform:scale(1)}}
.lightbox-caption{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  background:rgba(18,12,6,0.9);
  color:var(--gold-light);
  padding:8px 20px;border-radius:99px;
  font-size:13px;
  border:1px solid rgba(201,168,76,0.2);
  white-space:nowrap;
  max-width:80vw;overflow:hidden;text-overflow:ellipsis;
}
.lightbox-close{
  position:fixed;top:20px;right:20px;
  width:36px;height:36px;
  background:rgba(18,12,6,0.9);
  border:1px solid rgba(201,168,76,0.2);
  border-radius:50%;
  color:var(--gold);font-size:18px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
}
.lightbox-close:hover{background:rgba(201,168,76,0.15);}

/* Make images show zoom cursor */
.moment-img-generated{cursor:zoom-in;}
.char-avatar img{cursor:zoom-in;object-position:center top;}

/* CHARACTER IMAGE SLOTS */
.image-slot{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  min-height:80px;transition:all 0.2s;cursor:pointer;
}
.image-slot.drag-over{
  border-color:var(--gold) !important;
  background:rgba(201,168,76,0.12) !important;
  transform:scale(1.02);
}
.slot-preview{
  width:100%;height:100%;object-fit:cover;
  border-radius:6px;max-height:120px;
  cursor:zoom-in;
}
/* Per-type image treatment — each shot type frames differently.
   Portrait: fill, crop from the top so faces are safe.
   Full body: show the WHOLE figure (contain), taller frame, no crop.
   Action: fill, centered — dynamic compositions read fine cropped.
   Other: catch-all reference, show all of it. */
.slot-preview.slot-portrait{
  object-fit:cover;object-position:center top;max-height:220px;
}
.slot-preview.slot-fullbody{
  object-fit:contain;max-height:340px;background:rgba(12,8,4,0.55);
}
.slot-preview.slot-action{
  object-fit:cover;object-position:center;max-height:220px;
}
.slot-preview.slot-other{
  object-fit:contain;max-height:220px;background:rgba(12,8,4,0.55);
}
.image-slot.slot-tall{ min-height:220px; }
.image-slot.slot-xtall{ min-height:340px; }
.slot-placeholder{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;pointer-events:none;
}
.slot-preview.hidden{display:none;}

/* Character card image grid */
.char-img-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:3px;margin-top:8px;border-radius:6px;overflow:hidden;
}
.char-img-thumb{
  aspect-ratio:1;object-fit:cover;
  width:100%;cursor:zoom-in;
  transition:opacity 0.15s;
}
.char-img-thumb:hover{opacity:0.85;}

/* NARRATIVE EDITOR */
.narrative-section {
  margin-bottom: 20px;
  border: 1px solid rgba(201,168,76,0.15);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: rgba(20,12,4,0.6);
}
.narrative-section-header {
  padding: 8px 14px;
  background: rgba(201,168,76,0.08);
  border-bottom: 1px solid rgba(201,168,76,0.12);
  font-family: var(--font-display);
  font-size: 11px;
  color: rgba(201,168,76,0.6);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}
.narrative-section-img {
  width: 48px;
  height: 36px;
  object-fit: cover;
  border-radius: 3px;
  flex-shrink: 0;
}
.narrative-textarea {
  width: 100%;
  padding: 12px 14px;
  background: transparent;
  border: none;
  color: var(--parchment);
  font-family: 'Georgia', serif;
  font-size: 13px;
  line-height: 1.7;
  resize: vertical;
  min-height: 80px;
  font-style: italic;
}
.narrative-textarea:focus {
  outline: none;
  background: rgba(201,168,76,0.03);
}
.narrative-textarea::placeholder {
  color: rgba(201,168,76,0.55);
  font-style: italic;
}

/* NEW STORYBOARD LAYOUT WITH INLINE NARRATIVE */
.storyboard-panel {
  border: 1px solid rgba(201,168,76,0.15);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: rgba(20,12,4,0.7);
  position: relative;
  break-inside: avoid;
}
.storyboard-panel-img {
  position: relative;
  width: 100%;
}
.storyboard-panel-img .moment-img-generated {
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 420px;
  object-fit: contain;
  display: block;
  cursor: zoom-in;
  background: rgba(10,6,3,0.85);
}
.storyboard-panel-img .moment-img-placeholder {
  width: 100%;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(15,10,5,0.5);
  padding: 24px;
}
.storyboard-panel-meta {
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid rgba(201,168,76,0.1);
  flex-wrap: wrap;
}
.moment-prompt-text {
  padding: 8px 14px;
  font-size: 10px;
  color: rgba(201,168,76,0.3);
  font-style: italic;
  line-height: 1.5;
  border-top: 1px solid rgba(201,168,76,0.08);
}

/* NARRATIVE BLOCKS */
.narrative-block {
  margin: 12px 0;
  border: 1px solid rgba(201,168,76,0.12);
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(12,8,4,0.5);
}
.narrative-block-header {
  padding: 6px 12px;
  background: rgba(201,168,76,0.06);
  border-bottom: 1px solid rgba(201,168,76,0.1);
  font-size: 10px;
  color: rgba(201,168,76,0.45);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.narrative-regen-btn {
  padding: 2px 8px;
  font-size: 10px;
  background: rgba(201,168,76,0.08);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 4px;
  color: rgba(201,168,76,0.6);
  cursor: pointer;
  transition: all 0.15s;
}
.narrative-regen-btn:hover {
  background: rgba(201,168,76,0.15);
  color: var(--gold);
}
.narrative-inline-box {
  width: 100%;
  padding: 14px 16px;
  background: transparent;
  border: none;
  color: var(--parchment);
  font-family: 'Georgia', serif;
  font-size: 13px;
  line-height: 1.8;
  resize: vertical;
  min-height: 120px;
  font-style: italic;
  field-sizing: content;
  overflow-y: hidden;
}
.narrative-inline-box:focus {
  outline: none;
  background: rgba(201,168,76,0.03);
}
.narrative-inline-box::placeholder {
  color: rgba(201,168,76,0.55);
  font-style: italic;
}

/* NARRATIVE SAVE BUTTON */
.narrative-save-btn {
  padding: 2px 8px;
  font-size: 10px;
  background: rgba(15,110,86,0.2);
  border: 1px solid rgba(134,212,186,0.3);
  border-radius: 4px;
  color: rgba(134,212,186,0.7);
  cursor: pointer;
  transition: all 0.15s;
}
.narrative-save-btn:hover {
  background: rgba(15,110,86,0.35);
  color: #86d4ba;
}

/* Publish tab - no top padding */
#session-tab-export {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Storyboard panel caption - gold parchment */
.storyboard-panel-meta {
  color: var(--gold-light) !important;
}
.storyboard-panel-meta .moment-num {
  color: rgba(201,168,76,0.6) !important;
}
.storyboard-panel-meta .moment-title {
  color: var(--gold-light) !important;
}
.moment-prompt-text {
  color: rgba(201,168,76,0.35) !important;
}

/* Fix regenerate button visibility on storyboard panels */
.storyboard-panel .moment-regen-btn {
  opacity: 0;
  position: absolute;
  top: 8px;
  right: 8px;
}
.storyboard-panel:hover .moment-regen-btn {
  opacity: 1;
}

/* Narrative blocks span full width in storyboard grid */
.moments-grid .narrative-block {
  grid-column: 1 / -1;
}

/* Storyboard layout - alternating narrative and image panels */
#moments-grid {
  display: block;
}
.panels-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  align-items: start;
}
@media (max-width: 700px) {
  .panels-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .panels-grid { grid-template-columns: 1fr; }
}
/* Narrative panels sit in the grid same as image panels */
.narrative-panel {
  border: 1px solid rgba(201,168,76,0.12);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: rgba(12,8,4,0.5);
  display: flex;
  flex-direction: column;
}
.narrative-panel .narrative-inline-box {
  flex: 1;
  min-height: 160px;
}

/* TIER WATERMARK */
.watermarked {
  position: relative;
}
.watermarked::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22280%22%20height%3D%22170%22%3E%3Ctext%20x%3D%22140%22%20y%3D%2292%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.40%22%20font-family%3D%22Georgia%2Cserif%22%20font-size%3D%2219%22%20font-weight%3D%22700%22%20letter-spacing%3D%223%22%20text-anchor%3D%22middle%22%20transform%3D%22rotate%28-30%20140%2092%29%22%3ECAMPAIGNIA%20TRIAL%3C%2Ftext%3E%3C%2Fsvg%3E");
  background-repeat: repeat;
  background-position: center;
  pointer-events: none;
}

/* ACCOUNT PAGE PLAN CARDS */
.plan-card-current {
  box-shadow: 0 0 0 2px var(--gold);
}

/* Trial expiry banner */
.trial-expired-banner {
  background: rgba(139,26,26,0.4);
  border: 1px solid rgba(240,149,149,0.4);
  color: #f09595;
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size:13px;
  margin-bottom: 16px;
  text-align: center;
}

/* Platinum prompt editing on storyboard panels */
.moment-prompt-wrap { position: relative; }
.moment-prompt-edit-btn {
  margin-top: 6px;
  background: transparent;
  border: 1px solid rgba(201,168,76,0.35);
  color: rgba(201,168,76,0.7);
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--font-display);
}
.moment-prompt-edit-btn:hover {
  background: rgba(201,168,76,0.12);
  color: var(--gold);
}
/* Pass 1 — the Direction "prompt" block under each Storyboard narrative panel
   reuses the image panel's .moment-prompt-* styling; these align the Edit
   button under the text and mute the empty (no-direction) state. */
.narr-dir-wrap .moment-prompt-edit-btn { margin-left: 14px; margin-bottom: 8px; }
.narr-dir-empty { opacity: 0.8; }
.moment-prompt-editor {
  width: 100%;
  min-height: 90px;
  background: rgba(12,8,4,0.6);
  border: 1px solid rgba(201,168,76,0.35);
  border-radius: 6px;
  color: var(--gold-light);
  font-size: 12px;
  line-height: 1.5;
  padding: 8px 10px;
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
}
.moment-prompt-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

/* Canonical character prompt — Edit Character modal */
.char-prompt-text {
  font-size: 13px;
  line-height: 1.6;
  color: var(--parchment);
  background: rgba(20,12,4,0.75);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: var(--radius);
  padding: 10px 12px;
}
.char-prompt-empty {
  font-size: 13px;
  font-style: italic;
  color: rgba(201,168,76,0.4);
  background: rgba(20,12,4,0.4);
  border: 1px dashed rgba(201,168,76,0.2);
  border-radius: var(--radius);
  padding: 10px 12px;
}
.char-prompt-editor {
  width: 100%;
  min-height: 110px;
  padding: 9px 12px;
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.6;
  background: rgba(20,12,4,0.75);
  color: var(--parchment);
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.char-prompt-editor:focus {
  outline: none;
  border-color: rgba(201,168,76,0.6);
}
.char-prompt-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

/* Reference image shown under the Rebuild button in the Edit modal */
.char-ref-image {
  margin-top: 14px;
}
.char-ref-label {
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--text-light);
  margin-bottom: 6px;
}
.char-ref-image img {
  max-width: 320px;
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid rgba(201,168,76,0.18);
  cursor: zoom-in;
  display: block;
}
.char-ref-imgwrap {
  position: relative;
  display: inline-block;
}
.char-ref-archive {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
}
/* Regenerate/Retouch/Archive pills on the character reference image. .panel-pill
   defaults to opacity:0 and is revealed by the storyboard hover rule, which does
   not apply inside the character modal — so reveal them on the wrapper's hover. */
.char-ref-imgwrap:hover .panel-pill { opacity: 1; }
.sc-review-imgwrap:hover .panel-pill { opacity: 1; }
.archives-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.archive-card {
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(201,168,76,0.18);
  border-radius: var(--radius);
  overflow: hidden;
}
.archive-thumb img {
  width: 100%;
  display: block;
  cursor: zoom-in;
}
.archive-meta {
  padding: 10px 12px 12px;
}
.archive-title {
  font-weight: 600;
  color: var(--gold);
  font-size: 13px;
  word-break: break-word;
}
.archive-sub {
  font-size: 11px;
  color: var(--text-light);
  margin-top: 3px;
}
.archive-del {
  margin-top: 10px;
}
.archive-thumb { position: relative; }
.archive-prompt-btn {
  position: absolute; bottom: 8px; right: 8px; opacity: 0;
  padding: 3px 8px; font-size: 11px; background: rgba(0,0,0,0.7);
  color: rgba(201,168,76,0.9); border: 1px solid rgba(201,168,76,0.4);
  border-radius: 6px; cursor: pointer; transition: opacity .15s;
}
.archive-card:hover .archive-prompt-btn { opacity: 1; }
.archive-prompt-btn:hover { background: rgba(0,0,0,0.9); color: var(--gold); }
.archive-row { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; margin-top: 3px; }
.archive-row span { color: var(--gold-dim); }
.archive-row b { color: var(--gold-light); font-weight: 600; text-align: right; word-break: break-word; }
.archives-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.archive-filter { padding: 6px 10px; background: rgba(0,0,0,0.3); color: var(--gold-light); border: 1px solid rgba(201,168,76,0.25); border-radius: 8px; font-size: 12px; }
.archive-filter option { background: #1b1b20; color: var(--gold-light); }
.archive-clear { cursor: pointer; }
.moment-replace-btn{position:absolute;top:6px;right:6px;padding:3px 8px;font-size:10px;background:rgba(0,0,0,0.6);color:rgba(201,168,76,0.8);border:1px solid rgba(201,168,76,0.3);border-radius:6px;cursor:pointer;opacity:0;transition:opacity 0.15s;}
.moment-card:hover .moment-replace-btn{opacity:1;}
.moment-replace-btn:hover{background:rgba(0,0,0,0.8);color:var(--gold);}
.moment-replace-btn[disabled]{cursor:not-allowed;color:rgba(201,168,76,0.3);}
.storyboard-panel .moment-replace-btn{position:absolute;top:38px;right:8px;opacity:0;}
.storyboard-panel:hover .moment-replace-btn{opacity:1;}
body.role-player.can-edit-fork .moment-replace-btn{display:inline-block !important;}
.panel-img-actions{position:absolute;top:8px;left:8px;right:8px;z-index:3;display:flex;flex-wrap:wrap;gap:6px;}
.panel-pill{padding:3px 7px;font-size:10px;background:rgba(0,0,0,0.6);color:rgba(201,168,76,0.85);border:1px solid rgba(201,168,76,0.3);border-radius:6px;cursor:pointer;opacity:0;transition:opacity 0.15s,background 0.15s,color 0.15s;white-space:nowrap;line-height:1.3;}
.storyboard-panel:hover .panel-pill{opacity:1;}
.panel-pill:hover{background:rgba(0,0,0,0.85);color:var(--gold);}
.panel-pill[disabled]{cursor:not-allowed;color:rgba(201,168,76,0.3);}
.panel-pill.is-on{opacity:1;color:var(--gold);border-color:var(--gold);}
.panel-pill.is-static{cursor:default;}
body.role-player.can-edit-fork .panel-pill{display:inline-flex !important;}
.modal.archive-picker{max-width:880px;background:#241810;border:1px solid rgba(201,168,76,0.25);}
.modal.archive-picker .modal-title{color:var(--gold-light);}
.modal.archive-picker .modal-close{color:var(--gold-dim);}
.modal.archive-picker .modal-close:hover{color:var(--gold-light);}
.archive-picker-filters{display:flex;flex-wrap:wrap;gap:8px;}
.archive-picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:14px;max-height:60vh;overflow-y:auto;}
.archive-pick-item{border:1px solid rgba(201,168,76,0.2);border-radius:8px;overflow:hidden;background:rgba(0,0,0,0.25);display:flex;flex-direction:column;}
.archive-pick-item img{width:100%;height:130px;object-fit:cover;display:block;cursor:pointer;}
.archive-pick-cap{padding:6px 8px;font-size:11px;color:var(--gold-dim);line-height:1.35;flex:1;}
.archive-pick-cap b{color:var(--gold-light);font-weight:600;}
.archive-pick-use{margin:0 8px 8px;padding:5px;font-size:11px;cursor:pointer;background:var(--gold);color:#1a1410;border:none;border-radius:6px;font-weight:600;}
.archive-pick-use:hover{filter:brightness(1.08);}
.archive-pick-empty{padding:24px;text-align:center;color:var(--gold-dim);font-size:13px;}
#view-archives .page-header { margin-bottom: 10px; }
#view-archives .page-subtitle { margin-top: 2px; }
.prompt-modal-box { max-width: 640px; width: 90%; max-height: 80vh; overflow: auto; background: #1b1b20; border: 1px solid rgba(201,168,76,0.3); border-radius: 12px; padding: 20px 22px; }
.prompt-modal-title { color: var(--gold); font-weight: 700; font-size: 15px; margin-bottom: 10px; }
.prompt-modal-text { white-space: pre-wrap; color: var(--parchment); font-size: 13px; line-height: 1.5; }

/* NPC checkbox row + badge */
.form-checkbox-row {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  font-size: 13px;
  color: var(--gold-light);
}
.form-checkbox-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--gold);
  cursor: pointer;
  flex-shrink: 0;
}
.char-badge-npc {
  background: rgba(90,70,140,0.35);
  color: #c9bdf0;
  border: 1px solid rgba(160,140,210,0.4);
  margin-left: 5px;
}

/* Session Characters tab */
.sc-card {
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: var(--radius-lg);
  background: rgba(20,12,4,0.5);
  padding: 14px;
  margin-bottom: 12px;
}

/* Stage 3: change-detected badge */
.sc-change-badge {
  margin: 10px 0 4px;
  padding: 8px 12px;
  background: rgba(224,122,106,0.12);
  border: 1px solid rgba(224,122,106,0.4);
  border-radius: var(--radius);
  color: #e8a99c;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.sc-change-badge:hover {
  background: rgba(224,122,106,0.2);
}

/* Accepted-change badge — quieter, greenish, re-opens the review screen */
.sc-change-badge-accepted {
  background: rgba(122,184,116,0.12);
  border-color: rgba(122,184,116,0.4);
  color: #9ccb94;
}
.sc-change-badge-accepted:hover {
  background: rgba(122,184,116,0.2);
}

/* Stage 3: change review screen */
.sc-review-title {
  font-weight: 600;
  color: #e8a99c;
  font-size: 14px;
}
.sc-review-name {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--gold);
  margin: 4px 0;
}
.sc-review-detected {
  font-size: 13px;
  color: var(--text-light);
  margin-bottom: 10px;
}
.sc-review-label {
  display: block;
  font-size: 12px;
  color: var(--text-light);
  margin-bottom: 4px;
}
.sc-review-retouch {
  display: flex;
  gap: 8px;
  margin: 6px 0;
}
.sc-review-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-start;
  margin: 6px 0 8px;
}
.sc-review-row .sc-review-imgwrap {
  flex: 0 0 auto;
  width: 280px;
  max-width: 100%;
  margin: 0;
}
.sc-review-side {
  flex: 1 1 220px;
  min-width: 0;
}
.sc-review-side .sc-review-label {
  margin-top: 0;
}

.sc-review-imgwrap {
  margin-top: 12px;
  position: relative;
}
.sc-review-archive {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
}
.sc-review-img {
  max-width: 280px;
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid rgba(201,168,76,0.18);
  display: block;
}
.sc-review-img-empty {
  padding: 30px;
  text-align: center;
  color: var(--text-light);
  font-size: 13px;
  background: rgba(20,12,4,0.5);
}
.sc-review-msg {
  font-size: 13px;
  color: var(--gold);
  margin: 4px 0;
  min-height: 16px;
}

.sc-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.sc-thumb {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  object-fit: cover;
  object-position: center top;
  border: 1px solid rgba(201,168,76,0.25);
  flex-shrink: 0;
}
.sc-thumb-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  background: rgba(201,168,76,0.08);
  color: rgba(201,168,76,0.4);
}
.sc-card-id { flex: 1; }
.sc-card-name {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--gold-light);
}
.sc-card-cls {
  font-size: 12px;
  color: var(--text-light);
  margin-top: 2px;
}
.sc-card-prompt {
  font-size: 13px;
  line-height: 1.6;
  color: var(--parchment);
  background: rgba(20,12,4,0.75);
  border: 1px solid rgba(201,168,76,0.15);
  border-radius: var(--radius);
  padding: 10px 12px;
}

/* Phase 3 — hide DM-only UI elements when the current user is a player.
   The body.role-player class is toggled by applyRoleVisibility() in
   app.js whenever a campaign view is rendered. Elements marked
   .dm-only (statically in HTML or rendered dynamically in JS) get
   hidden via display:none. !important is used because some inline
   styles or layout containers may set display via JS otherwise. */
body.role-player .dm-only { display: none !important; }
/* Phase 4 Step 3 — when a player is viewing THEIR OWN version, the
   per-panel edit + regenerate controls become available again. Higher
   specificity than the rule above so it wins. */
body.role-player.can-edit-fork .moment-prompt-edit-btn,
body.role-player.can-edit-fork .moment-regen-btn { display: inline-block !important; }
/* Phase 4 Step 3c — a player on their OWN version gets the batch image
   generators too: "Generate Storyboard Images" (Review tab) and
   "Generate all images" (Storyboard tab). Backend infers their fork. */
body.role-player.can-edit-fork #review-generate-btn,
body.role-player.can-edit-fork #generate-all-btn,
body.role-player.can-edit-fork #review-narr-style-btn,
body.role-player.can-edit-fork #sb-narr-style-btn,
body.role-player.can-edit-fork #sb-generate-narr-btn,
body.role-player.can-edit-fork #review-art-style-btn,
body.role-player.can-edit-fork #sb-art-style-btn { display: inline-block !important; }
body.role-player.can-edit-fork #extract-btn { display: inline-block !important; }
/* Viewing a fork you do not own (e.g. DM looking at a player version) is read-only. */
body.viewing-foreign-fork #extract-btn,
body.viewing-foreign-fork #review-generate-btn,
body.viewing-foreign-fork #generate-all-btn,
body.viewing-foreign-fork #review-narr-style-btn,
body.viewing-foreign-fork #sb-narr-style-btn,
body.viewing-foreign-fork #review-art-style-btn,
body.viewing-foreign-fork #sb-art-style-btn,
body.viewing-foreign-fork #sb-generate-narr-btn,
body.viewing-foreign-fork .moment-regen-btn,
body.viewing-foreign-fork .moment-prompt-edit-btn { display: none !important; }
/* Publish/Preview is a READ capability — a player may preview any version
   they can see (canonical, their own, or another player's Ready version). */
body.role-player #stab-export { display: block !important; }

/* ============================================================
   PHASE 3 DEPLOY 2 — Members tab styles
   ============================================================ */

/* A single row in the members list or pending-invites list. Flex layout:
   icon | identity block | meta block | actions menu. */
.member-row, .invite-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(20,12,4,0.75);
  border: 1px solid rgba(201,168,76,0.15);
  border-radius: var(--radius);
  padding: 10px 14px;
  position: relative;
}

.member-row-icon, .invite-row-icon {
  font-size: 24px;
  width: 32px;
  text-align: center;
  flex-shrink: 0;
}

.member-row-body, .invite-row-body {
  flex: 1;
  min-width: 0;
}

.member-row-name {
  font-size: 15px;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.member-row-email, .invite-row-email {
  font-size: 13px;
  color: var(--gold);
  opacity: 0.85;
  margin-top: 3px;
}

.member-row-meta, .invite-row-meta {
  font-size: 12px;
  color: var(--gold);
  opacity: 0.9;
  margin-top: 4px;
}

.member-row-actions, .invite-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Role badges — DM crown, Player */
.role-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  font-family: var(--font-display);
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.role-badge-dm {
  background: rgba(201,168,76,0.18);
  color: var(--gold);
  border: 1px solid rgba(201,168,76,0.35);
}
.role-badge-player {
  background: rgba(80,140,200,0.18);
  color: #94c0e8;
  border: 1px solid rgba(120,170,210,0.35);
}

/* Ellipsis menu (⋯) — opens a small dropdown for destructive actions */
.row-menu {
  position: relative;
  display: inline-block;
}
.row-menu-btn {
  background: transparent;
  border: 1px solid rgba(201,168,76,0.2);
  color: var(--text);
  width: 30px;
  height: 30px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}
.row-menu-btn:hover {
  background: rgba(201,168,76,0.1);
  border-color: rgba(201,168,76,0.4);
}
.row-menu-dropdown {
  position: absolute;
  right: 0;
  top: 34px;
  background: rgba(20,12,4,0.98);
  border: 1px solid rgba(201,168,76,0.3);
  border-radius: 6px;
  padding: 4px 0;
  min-width: 130px;
  z-index: 100;
  box-shadow: 0 6px 18px rgba(0,0,0,0.5);
  display: none;
}
.row-menu-dropdown.open { display: block; }
.row-menu-item {
  display: block;
  padding: 8px 14px;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  width: 100%;
}
.row-menu-item:hover { background: rgba(201,168,76,0.12); }
.row-menu-item-danger { color: #f5b0a8; }
.row-menu-item-danger:hover { background: rgba(180,40,30,0.18); }

/* Pending-invite specific touches */
.invite-row-expired-tag {
  display: inline-block;
  font-size: 11px;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(180,60,40,0.18);
  color: #f5b0a8;
  border: 1px solid rgba(220,120,100,0.35);
  margin-left: 8px;
}

/* Character-tab badges (Phase 3 Deploy 2) */
.char-owner-badge {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(80,140,200,0.18);
  color: #94c0e8;
  border: 1px solid rgba(120,170,210,0.35);
  margin-top: 4px;
}
.char-pending-badge {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(201,168,76,0.15);
  color: var(--gold);
  border: 1px dashed rgba(201,168,76,0.4);
  margin-top: 4px;
}

/* ============================================================
   PHASE 3 DEPLOY 3 — Session access status chip + select
   ============================================================ */

.session-access-status-select {
  display: inline-block;
  padding: 6px 10px;
  font-size: 13px;
  font-family: var(--font-display);
  vertical-align: middle;
  cursor: pointer;
}

.session-access-chip {
  display: inline-block;
  padding: 4px 12px;
  font-size: 12px;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 12px;
  vertical-align: middle;
}
.session-access-chip-draft {
  background: rgba(110,100,85,0.55);
  color: #f5e8c8;
  border: 1px solid rgba(200,190,170,0.45);
}
.session-access-chip-ready {
  background: rgba(80,160,100,0.35);
  color: #d4f0d8;
  border: 1px solid rgba(140,200,160,0.55);
}

/* Lock indicator on Characters tab when campaign is locked (player POV).
   Subtle banner above the character grid. */
.campaign-lock-banner {
  background: rgba(40,30,15,0.85);
  border: 1px solid rgba(201,168,76,0.3);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin: 14px 0;
  color: var(--gold);
  font-size: 13px;
  line-height: 1.5;
}
.campaign-lock-banner-icon {
  display: inline-block;
  margin-right: 8px;
  font-size: 16px;
}

/* ============================================================
   Session list — Draft/Ready as badges + thumbnail + ⋯ menu
   ============================================================ */

/* Reuse .session-badge styling for the access-status pill on the list.
   Ready inherits the default green-success treatment. Draft uses a
   muted gold tint so it harmonizes with Chronicle's palette without
   competing with the Ready or "Has transcript" badges. */
.session-badge.session-badge-draft {
  background: rgba(201,168,76,0.18);
  color: var(--gold);
  border: 1px solid rgba(201,168,76,0.35);
}

/* Thumbnail to the left of the session name. Square, slightly rounded.
   Hidden when no image is available (the JS only renders it when
   first_image_url is set). */
.session-thumb {
  width: 56px;
  height: 56px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(201,168,76,0.2);
  background: rgba(20,12,4,0.6);
}

/* The .session-item-left already uses flex layout for name + date
   (defined earlier in this file). Thumbnail slots into that flex row. */

/* Lock + Archive grouped top-left; Regenerate stays top-right */
.panel-img-tl{position:absolute;top:8px;left:8px;z-index:3;display:flex;gap:6px;align-items:flex-start;}
.panel-img-tl .moment-lock-btn,
.panel-img-tl .moment-archive-btn{position:static;top:auto;left:auto;right:auto;}
.moment-archive-btn{padding:2px 5px;font-size:10px;line-height:1;background:rgba(0,0,0,0.6);color:rgba(201,168,76,0.8);border:1px solid rgba(201,168,76,0.3);border-radius:6px;cursor:pointer;opacity:0.85;transition:opacity 0.15s;}
.moment-archive-btn:hover{opacity:1;background:rgba(0,0,0,0.8);color:var(--gold);}
.moment-archive-btn.is-archived{color:var(--gold);border-color:var(--gold);opacity:1;}
.moment-archive-btn img{display:block;height:20px;width:auto;}

/* Style picker (Narrative Styles; Art Styles join in Step 3) — a card grid
   inside the shared modal. Mirrors .archive-picker-grid so it reflows to a
   single column and scrolls internally on narrow / mobile screens. */
.style-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;max-height:62vh;overflow-y:auto;padding:2px;}
.style-card{background:rgba(20,12,4,0.6);border:1px solid rgba(201,168,76,0.18);border-radius:10px;padding:12px 13px;cursor:pointer;transition:border-color .12s, background .12s;}
.style-card:hover{border-color:rgba(201,168,76,0.5);background:rgba(30,18,6,0.7);}
.style-card.is-selected{border-color:var(--gold);background:rgba(201,168,76,0.12);}
.style-card.is-locked{opacity:.5;cursor:not-allowed;pointer-events:none;}
.style-card.is-locked .style-card-current{color:#fff;background:#6b7280;}
.style-card-name{font-family:var(--font-display);font-size:14px;color:var(--gold-light);font-weight:600;margin-bottom:5px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.style-card-current{font-size:10px;color:var(--gold);background:rgba(201,168,76,0.18);border-radius:4px;padding:1px 6px;font-weight:600;}
.style-card-desc{font-size:12px;color:rgba(230,210,160,0.82);line-height:1.45;margin-bottom:7px;}
.style-card-eg{font-size:11.5px;color:rgba(201,168,76,0.62);font-style:italic;line-height:1.45;border-left:2px solid rgba(201,168,76,0.25);padding-left:8px;}

/* Per-panel style labels: art style on the image caption, narrative style in
   the narrative block header. Both reflect the style ACTUALLY used (moments.style
   stamped at generation; narrative_style_used stamped on the narrative write). */
.moment-artstyle{font-size:10px;color:rgba(201,168,76,0.5);margin-top:5px;}
.narr-block-style{text-transform:none;letter-spacing:0;color:rgba(201,168,76,0.7);font-weight:600;margin-left:6px;}

/* Campaign cover art on the list chip: faded, bordered, filling most of the
   card behind the text. Content is lifted above the cover layer. */
.campaign-card{position:relative;overflow:hidden;}
.campaign-card-cover{position:absolute;inset:8px;border-radius:8px;background-size:cover;background-position:center;opacity:0.43;border:1px solid rgba(201,168,76,0.45);pointer-events:none;z-index:0;}
.campaign-card-icon,.campaign-card-name,.campaign-card-desc,.campaign-card-meta{position:relative;z-index:1;}
/* Inline campaign name/description editing on the Sessions header */
.camp-edit-pencil{background:none;border:none;color:rgba(201,168,76,0.5);cursor:pointer;font-size:0.55em;padding:2px 5px;line-height:1;border-radius:4px;}
.camp-edit-pencil:hover{color:var(--gold);background:rgba(201,168,76,0.12);}
.camp-edit-input{font-family:inherit;font-size:0.85em;background:rgba(12,8,4,0.75);border:1px solid rgba(201,168,76,0.45);border-radius:5px;color:var(--gold);padding:2px 8px;min-width:220px;max-width:100%;}
.camp-edit-textarea{display:block;width:100%;max-width:560px;font-family:var(--font-body,inherit);font-size:12px;line-height:1.5;background:rgba(12,8,4,0.75);border:1px solid rgba(201,168,76,0.45);border-radius:5px;color:rgba(230,210,160,0.92);padding:5px 8px;min-height:46px;margin-top:5px;resize:vertical;}
/* Archive 'Make cover' control (DM-only) */
.archive-cover-toggle{display:inline-flex;align-items:center;gap:4px;font-size:10px;color:rgba(201,168,76,0.72);cursor:pointer;user-select:none;}
.archive-cover-toggle input{margin:0;width:13px;height:13px;accent-color:var(--gold);cursor:pointer;}
.archive-actions{display:flex;align-items:center;gap:8px;margin-top:8px;}
.archive-actions .archive-del{margin-left:auto;}

/* Admin Settings: tabs + Tiers config */
.settings-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(201,168,76,0.2);
}
.settings-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-light);
  font-size: 14px;
  font-weight: 600;
  padding: 8px 16px;
  cursor: pointer;
  font-family: inherit;
}
.settings-tab:hover { color: var(--parchment); }
.settings-tab.active {
  color: var(--gold);
  border-bottom-color: var(--gold);
}
.tier-config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 10px;
}

/* Admin Settings: Stats cards */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}
.stat-card {
  background: rgba(201,168,76,0.06);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 10px;
  padding: 18px 16px;
}
.stat-value {
  font-size: 30px;
  font-weight: 700;
  color: var(--gold);
  line-height: 1.1;
}
.stat-label {
  font-size: 13px;
  color: var(--text-light);
  margin-top: 6px;
}

/* Campaign card settings menu (SM only) + settings toggle */
.campaign-card-menu-btn {
  background: none;
  border: none;
  color: rgba(201,168,76,0.55);
  font-size: 20px;
  line-height: 1;
  padding: 2px 10px;
  min-height: 30px;
  border-radius: 6px;
  cursor: pointer;
}
.campaign-card-menu-btn:hover {
  color: var(--gold);
  background: rgba(201,168,76,0.12);
}
.cs-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
}
.cs-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  flex: 0 0 auto;
}

/* Admin Dashboard: compact read-only stat rows */
.stats-list { max-width: 520px; }
.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(201,168,76,0.12);
  font-size: 14px;
}
.stat-name { color: var(--text-light); }
.stat-num {
  color: var(--gold);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.stats-subhead {
  margin: 20px 0 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold-dim, rgba(201,168,76,0.7));
}

/* Admin Dashboard: Trends charts */
.trend-block { margin-bottom: 26px; max-width: 760px; }
.trend-title { font-size: 14px; font-weight: 700; color: var(--parchment); margin-bottom: 8px; }
.trend-svg { width: 100%; height: auto; display: block; }
.trend-axis { fill: var(--gold-dim, rgba(201,168,76,0.7)); font-size: 10px; }
.trend-empty { color: var(--text-light); font-size: 13px; padding: 16px 0; }
.trend-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }
.trend-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-light); }
.trend-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

.storyboard-panel-meta .moment-meta-list{font-size:11px;color:rgba(201,168,76,0.55) !important;}

/* Order Printed Copy tab -- readable blue-grey placeholders on dark fields */
#novel-tab-order input::placeholder,
#novel-tab-order textarea::placeholder { color:#9fb0c4; opacity:1; }

/* ============================================================
   PANEL TEXT CONTRAST STANDARD
   The app sits on a dark background image. Panels are one of two kinds:
     - LIGHT panels (white surface): DARK text + light inputs.
     - DARK / transparent panels: the gold/light base text above.
   The light redesign migrated panel backgrounds + titles but left
   .form-label / .form-input on their original dark-theme colors, so
   forms on white panels rendered gold-on-white. These rules pin form
   controls inside the known light panels (.settings-section, .modal) to
   dark text. For any NEW panel, add .panel-light or .panel-dark instead
   of restyling per field, so contrast stays consistent automatically.
   ============================================================ */
.settings-section .form-label,
.modal .form-label,
.panel-light .form-label { color: var(--text-muted); }

.settings-section .form-input,
.modal .form-input,
.panel-light .form-input {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
.settings-section .form-input:focus,
.modal .form-input:focus,
.panel-light .form-input:focus { border-color: var(--gold); }
.settings-section .form-input::placeholder,
.modal .form-input::placeholder,
.panel-light .form-input::placeholder { color: var(--text-light); }

/* Explicit dark/transparent panel: keep the gold/light treatment even
   when nested inside a light panel. */
.panel-dark .form-label { color: rgba(201,168,76,0.6); }
.panel-dark .form-input {
  background: rgba(15,10,5,0.7);
  color: var(--gold-light);
  border-color: rgba(201,168,76,0.2);
}
.panel-dark .form-input::placeholder { color: rgba(201,168,76,0.55); }

/* ============================================================
   PANEL TEXT STANDARDIZATION
   The page backdrop is dark (Chronicle image). Two panel styles:
   - WHITE panels (.settings-section, default): opaque white -> DARK text.
   - TRANSPARENT panels (.panel-dark): reveal the dark backdrop -> GOLD/LIGHT
     text. Add .panel-dark to any panel that should go transparent.
   Scoped so they never recolor forms elsewhere (auth, modals, cards).
   ============================================================ */
.settings-section .form-label{color:var(--text-muted);}
.settings-section .form-input{background:#fff;border-color:var(--border);color:var(--text);}
.settings-section .form-input::placeholder{color:var(--text-light);}
.settings-section .form-input:focus{border-color:var(--gold);}
/* Transparent/dark panel variant -- must follow the light rules to win the cascade. */
.panel-dark{background:rgba(20,14,6,0.5);border-color:rgba(201,168,76,0.18);}
.panel-dark .settings-section-title{color:var(--gold-light);}
.panel-dark .settings-section-desc{color:rgba(201,168,76,0.6);}
.panel-dark .form-label{color:rgba(201,168,76,0.78);}
.panel-dark .form-input{background:rgba(15,10,5,0.6);border-color:rgba(201,168,76,0.28);color:var(--gold-light);}
.panel-dark .form-input::placeholder{color:rgba(201,168,76,0.5);}

/* ===== STAGING ENVIRONMENT INDICATOR ===== */
html.staging-env .app-header{
  background:#ff6a00;
  border-bottom:1px solid #7a2e00;
  box-shadow:0 2px 12px rgba(0,0,0,0.35);
}
html.staging-env .app-logo-text{color:#2b1400;}