/* ══════════════════════════════════════════
   SocioDrama Platform — style.css
   Academic design: Navy + Gold
══════════════════════════════════════════ */

/* ── VARIABLES ── */
:root {
  --navy:      #1E3A5F;
  --navy-l:    #2A4E7F;
  --navy-xl:   #3B6EA8;
  --gold:      #C9A84C;
  --gold-l:    #D4B96A;
  --gold-dk:   #A8891F;
  --bg:        #F4F1EB;
  --bg2:       #EDE8DF;
  --surface:   #FFFFFF;
  --surface2:  #F8F6F1;
  --border:    #DDD8CC;
  --text:      #1A1F2E;
  --text-2:    #4A5568;
  --text-3:    #9AA5B4;
  --accent:    #16A34A;
  --star:      #F59E0B;
  --danger:    #DC2626;
  --grad:      linear-gradient(135deg, #1E3A5F, #C9A84C);
  --grad-r:    linear-gradient(135deg, #C9A84C, #1E3A5F);
  --shadow:    0 2px 8px rgba(30,58,95,.08);
  --shadow-md: 0 8px 28px rgba(30,58,95,.13);
  --shadow-lg: 0 24px 56px rgba(30,58,95,.18);
  --r:         0.75rem;
  --r-lg:      1.25rem;
  --r-xl:      1.75rem;
  --tr:        0.25s cubic-bezier(0.4,0,0.2,1);
  --sans:      'Inter', sans-serif;
  --serif:     'Playfair Display', serif;
}
/* light-only — dark mode removed */

/* ── BASE ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; scroll-padding-top:72px }
body { font-family:var(--sans); background:var(--bg); color:var(--text);
       line-height:1.7; overflow-x:hidden; transition:background .3s,color .3s }
a { text-decoration:none; color:inherit }
img { max-width:100%; display:block }
button { font-family:var(--sans); cursor:pointer }

.container { max-width:1300px; margin:0 auto; padding:0 2rem }

/* ── NAVBAR ── */
.navbar { position:fixed; top:0; left:0; right:0; z-index:900;
          background:#fff; border-bottom:2px solid var(--gold);
          box-shadow:0 2px 16px rgba(30,58,95,.10) }
.nav-inner { display:flex; align-items:center; justify-content:space-between;
             gap:1.5rem; height:70px }
.nav-logo { display:flex; align-items:center; gap:.85rem }
.logo-mark { width:42px; height:42px; background:var(--grad); border-radius:10px;
             display:flex; align-items:center; justify-content:center;
             font-size:.88rem; font-weight:800; color:#fff; letter-spacing:-.02em;
             flex-shrink:0; box-shadow:0 3px 12px rgba(30,58,95,.25) }
.logo-text { line-height:1.2 }
.logo-text strong { display:block; font-size:1.05rem; font-weight:800;
                    color:var(--navy); letter-spacing:-.01em }
.logo-text span { display:block; font-size:.6rem; font-weight:500;
                  color:var(--gold); letter-spacing:.1em; text-transform:uppercase }
.nav-links { display:flex; list-style:none; gap:.1rem }
.nav-item { display:flex; align-items:center; gap:.35rem; padding:.5rem 1.05rem;
            border-radius:var(--r); font-size:.875rem; font-weight:500;
            color:var(--text-2); transition:all var(--tr) }
.nav-item:hover { color:var(--navy); background:rgba(30,58,95,.06) }
.nav-item.active { color:var(--navy); background:rgba(30,58,95,.08);
                   font-weight:700; box-shadow:inset 0 -2px 0 var(--gold) }
.nav-actions { display:flex; align-items:center; gap:.65rem }
.btn-add { background:var(--navy); color:#fff; border:none; border-radius:var(--r);
           padding:.48rem 1.2rem; font-size:.83rem; font-weight:600;
           letter-spacing:.02em; box-shadow:0 2px 8px rgba(30,58,95,.25);
           transition:all var(--tr) }
.btn-add:hover { background:var(--navy-l); transform:translateY(-1px);
                 box-shadow:0 4px 16px rgba(30,58,95,.35) }
.hamburger { display:none; flex-direction:column; gap:5px; padding:9px 8px;
             border:1.5px solid var(--border); background:#fff; border-radius:var(--r);
             cursor:pointer }
.hamburger span { display:block; width:20px; height:2px; background:var(--navy);
                  border-radius:2px; transition:all var(--tr) }
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg) }
.hamburger.open span:nth-child(2) { opacity:0 }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg) }

/* ── MOBILE NAV ── */
.mobile-nav { position:fixed; top:70px; left:0; right:0; z-index:850;
              background:var(--surface); border-bottom:1px solid var(--border);
              display:flex; flex-direction:column; transform:translateY(-110%);
              transition:transform var(--tr); box-shadow:var(--shadow-md) }
.mobile-nav.open { transform:translateY(0) }
.mobile-nav a { padding:1rem 1.5rem; border-bottom:1px solid var(--border);
                color:var(--text-2); font-size:.9rem; font-weight:500;
                transition:all var(--tr) }
.mobile-nav a:hover { color:var(--gold); background:rgba(201,168,76,.06) }

/* ── PAGES ── */
.page { display:none; min-height:100vh; padding-top:70px }
.page.active { display:block }

/* ── BUTTONS ── */
.btn-primary { display:inline-flex; align-items:center; gap:.45rem;
               background:var(--grad); color:#fff; border:none; border-radius:var(--r);
               padding:.7rem 1.5rem; font-size:.9rem; font-weight:600;
               box-shadow:0 3px 12px rgba(201,168,76,.3); transition:all var(--tr) }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(201,168,76,.4) }
.btn-ghost { display:inline-flex; align-items:center; gap:.45rem; background:transparent;
             color:var(--text-2); border:1.5px solid var(--border); border-radius:var(--r);
             padding:.68rem 1.4rem; font-size:.9rem; font-weight:500; transition:all var(--tr) }
.btn-ghost:hover { border-color:var(--gold); color:var(--gold) }
.btn-sm { background:rgba(201,168,76,.12); color:var(--gold); border:1px solid rgba(201,168,76,.3);
          border-radius:.5rem; padding:.3rem .75rem; font-size:.78rem; font-weight:600;
          transition:all var(--tr) }
.btn-sm:hover { background:rgba(201,168,76,.2) }

/* ── SECTION HEADS ── */
.section-head { display:flex; align-items:center; justify-content:space-between;
                margin-bottom:2rem }
.sec-title { font-family:var(--serif); font-size:1.7rem; font-weight:700 }
.link-all { font-size:.85rem; color:var(--gold); font-weight:600;
            border-bottom:1px solid transparent; transition:all var(--tr) }
.link-all:hover { border-color:var(--gold) }
.page-header { background:linear-gradient(135deg, var(--navy) 0%, var(--navy-l) 100%);
               padding:3.5rem 0 3rem; color:#fff }
.page-header h1 { font-family:var(--serif); font-size:2.2rem; font-weight:700;
                  color:#fff; margin-bottom:.5rem }
.page-header p { color:rgba(255,255,255,.7); font-size:.97rem }

/* ══════════ DASHBOARD ══════════ */
.dash-hero { position:relative; overflow:hidden; padding:6rem 0 5rem; min-height:520px;
             display:flex; align-items:center }
.dash-hero-bg { position:absolute; inset:0; overflow:hidden;
                background-image:url('https://images.unsplash.com/photo-1524178232363-1fb2b075b655?w=1920&q=80');
                background-size:cover; background-position:center 40% }
.dash-hero-bg::before { content:''; position:absolute; inset:0;
                        background:linear-gradient(135deg,rgba(20,40,75,.93) 0%,rgba(30,58,95,.88) 55%,rgba(15,30,60,.82) 100%) }
.hero-dots { position:absolute; inset:0; z-index:1;
             background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
             background-size:30px 30px }

.dash-hero-inner { position:relative; z-index:1; display:grid;
                   grid-template-columns:1fr auto; gap:4rem; align-items:center }
.dash-badge { display:inline-block; background:rgba(201,168,76,.2); color:var(--gold-l);
              border:1px solid rgba(201,168,76,.35); border-radius:100px;
              padding:.3rem 1rem; font-size:.75rem; font-weight:600; letter-spacing:.06em;
              margin-bottom:1.25rem }
.dash-title { font-family:var(--serif); font-size:clamp(2rem,5vw,3.2rem); font-weight:700;
              color:#fff; line-height:1.2; margin-bottom:1rem }
.dash-title .gold { color:var(--gold) }
.dash-sub { color:rgba(255,255,255,.72); font-size:.97rem; line-height:1.8;
            max-width:560px; margin-bottom:2rem }
.dash-btns { display:flex; gap:1rem; flex-wrap:wrap }
/* buttons sit on the dark hero — force light colours */
.dash-btns .btn-primary { background:#fff; color:var(--navy); box-shadow:0 3px 14px rgba(0,0,0,.25) }
.dash-btns .btn-primary:hover { background:#f0ece2; transform:translateY(-2px); box-shadow:0 6px 22px rgba(0,0,0,.3) }
.dash-btns .btn-ghost { color:#fff; border-color:rgba(255,255,255,.55); background:rgba(255,255,255,.08) }
.dash-btns .btn-ghost:hover { background:rgba(255,255,255,.18); border-color:#fff; color:#fff }

.decor-rings { position:relative; width:220px; height:220px; flex-shrink:0 }
.dring { position:absolute; border-radius:50%; border:2px solid rgba(201,168,76,.25); top:50%; left:50%; transform:translate(-50%,-50%) }
.dring.r1 { width:220px; height:220px; animation:spin 20s linear infinite }
.dring.r2 { width:160px; height:160px; animation:spin 14s linear infinite reverse; border-color:rgba(201,168,76,.4) }
.dring.r3 { width:90px; height:90px; background:rgba(201,168,76,.08); border-color:rgba(201,168,76,.5) }
@keyframes spin { from{transform:translate(-50%,-50%) rotate(0deg)} to{transform:translate(-50%,-50%) rotate(360deg)} }
.decor-icon { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
              font-size:2.8rem; filter:drop-shadow(0 4px 12px rgba(0,0,0,.4)) }

/* STATS BAR */
.dash-stats-bar { background:var(--navy); padding:0 }
.stats-row { display:grid; grid-template-columns:repeat(4,1fr) }
.stat-item { padding:1.5rem 2rem; border-right:1px solid rgba(255,255,255,.08);
             display:flex; align-items:center; gap:1rem }
.stat-item:last-child { border-right:none }
.stat-ico { font-size:1.6rem; flex-shrink:0 }
.stat-num { font-family:var(--serif); font-size:2rem; font-weight:700; color:#fff;
            line-height:1 }
.stat-lbl { font-size:.72rem; color:rgba(255,255,255,.55); text-transform:uppercase;
            letter-spacing:.06em; margin-top:.2rem }
.stat-sub { font-size:.75rem; color:var(--gold) }

/* DASH SECTION */
.dash-section { padding:5rem 0 }
.dash-section + .dash-section { padding-top:0 }

/* FEATURED GRID */
.featured-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem }

/* RESEARCHER SPOTLIGHT */
.dash-researcher-bar { background:var(--surface2); border-top:1px solid var(--border);
                       border-bottom:1px solid var(--border); padding:3rem 0 }
.researcher-spot { display:grid; grid-template-columns:auto 1fr; gap:2.5rem; align-items:center }
.spot-photo { flex-shrink:0 }
.photo-circle { width:110px; height:110px; border-radius:50%; overflow:hidden;
                border:3px solid var(--gold); box-shadow:0 4px 20px rgba(201,168,76,.3) }
.photo-circle img { width:100%; height:100%; object-fit:cover }
.photo-initials { width:110px; height:110px; border-radius:50%;
                  background:var(--grad); display:flex; align-items:center; justify-content:center;
                  font-family:var(--serif); font-size:2.2rem; font-weight:700; color:#fff;
                  box-shadow:0 4px 20px rgba(201,168,76,.3) }
.spot-name { font-family:var(--serif); font-size:1.4rem; font-weight:700; margin-bottom:.25rem }
.spot-role { color:var(--text-3); font-size:.85rem; margin-bottom:.8rem }
.spot-chips { display:flex; gap:.5rem; flex-wrap:wrap }
.spot-chip { background:rgba(201,168,76,.1); border:1px solid rgba(201,168,76,.25);
             color:var(--gold); border-radius:100px; padding:.2rem .7rem;
             font-size:.72rem; font-weight:600 }

/* ACTIVITY FEED */
.activity-list { display:flex; flex-direction:column; gap:.75rem }
.activity-empty { text-align:center; padding:3rem; color:var(--text-3); font-size:.9rem }
.a-item { display:flex; align-items:center; gap:.85rem; padding:.9rem 1.1rem;
           background:var(--surface); border:1px solid var(--border);
           border-radius:var(--r); transition:all var(--tr) }
.a-item:hover { border-color:rgba(201,168,76,.3) }
.a-ico { font-size:1.2rem; flex-shrink:0 }
.a-body { flex:1 }
.a-text { font-size:.86rem; color:var(--text-2) }
.a-text strong { color:var(--text) }
.a-time { font-size:.72rem; color:var(--text-3); margin-top:.1rem }

/* ══════════ SCENARIOS PAGE ══════════ */
.scenarios-layout { display:grid; grid-template-columns:260px 1fr; gap:2.5rem; padding:2.5rem 0 5rem }

/* FILTER SIDEBAR */
.filter-sidebar { align-self:start; position:sticky; top:88px }
.filter-sec { margin-bottom:1.5rem; padding-bottom:1.5rem; border-bottom:1px solid var(--border) }
.filter-sec:last-of-type { border-bottom:none; margin-bottom:.5rem }
.filter-label { font-size:.72rem; font-weight:700; text-transform:uppercase;
                letter-spacing:.07em; color:var(--text-3); margin-bottom:.75rem }
.search-input { width:100%; padding:.65rem .9rem; background:var(--surface);
                border:1px solid var(--border); border-radius:var(--r); color:var(--text);
                font-size:.875rem; font-family:var(--sans); outline:none; transition:all var(--tr) }
.search-input:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,168,76,.12) }
.filter-tags { display:flex; flex-direction:column; gap:.3rem; max-height:200px;
               overflow-y:auto; padding-right:.25rem }
.filter-tags::-webkit-scrollbar { width:3px }
.filter-tags::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px }
.ftag { display:flex; align-items:center; gap:.5rem; padding:.4rem .65rem;
        border-radius:.4rem; font-size:.82rem; color:var(--text-2); cursor:pointer;
        transition:all var(--tr); border:none; background:none; text-align:left; width:100% }
.ftag:hover { color:var(--text); background:rgba(201,168,76,.08) }
.ftag.active { color:var(--gold); background:rgba(201,168,76,.12); font-weight:600 }
.ftag-count { margin-left:auto; font-size:.7rem; color:var(--text-3) }
.filter-chips { display:flex; flex-direction:column; gap:.3rem }
.fchip { padding:.38rem .8rem; border-radius:.4rem; font-size:.82rem;
         border:1px solid var(--border); background:none; color:var(--text-2);
         cursor:pointer; text-align:left; transition:all var(--tr) }
.fchip:hover { border-color:var(--gold); color:var(--gold) }
.fchip.active { background:rgba(201,168,76,.12); border-color:var(--gold);
                color:var(--gold); font-weight:600 }
.fcheck { display:flex; align-items:center; gap:.5rem; font-size:.83rem;
          color:var(--text-2); cursor:pointer; padding:.25rem 0 }
.fcheck input { accent-color:var(--gold); width:15px; height:15px }
.btn-reset { width:100%; padding:.55rem; background:rgba(220,38,38,.08);
             border:1px solid rgba(220,38,38,.2); border-radius:var(--r);
             color:var(--danger); font-size:.8rem; font-weight:600; cursor:pointer;
             transition:all var(--tr) }
.btn-reset:hover { background:rgba(220,38,38,.14) }

/* SCENARIOS MAIN */
.scenarios-toolbar { display:flex; align-items:center; justify-content:space-between;
                     margin-bottom:1.5rem }
.result-count { font-size:.85rem; color:var(--text-3); font-weight:500 }
.sort-sel { padding:.4rem .8rem; background:var(--surface); border:1px solid var(--border);
            border-radius:var(--r); font-size:.83rem; color:var(--text-2);
            font-family:var(--sans); cursor:pointer; outline:none }
.scenarios-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem }
.mobile-filter-btn-wrap { display:none; margin-bottom:1rem }
.mobile-filter-btn { width:100%; padding:.65rem; border:1px solid var(--border);
                     background:var(--surface); border-radius:var(--r);
                     font-size:.85rem; font-weight:600; color:var(--text-2) }

/* ══════════ SCENARIO CARD (NEW ACADEMIC DESIGN) ══════════ */
.s-card { background:var(--surface); border:1px solid var(--border);
          border-radius:var(--r-lg); overflow:hidden; cursor:pointer;
          transition:all var(--tr); display:flex; flex-direction:column;
          box-shadow:var(--shadow) }
.s-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md);
                border-color:rgba(201,168,76,.35) }
.card-top { padding:1.6rem 1.5rem 1.1rem; position:relative; overflow:hidden;
            min-height:115px; background-size:cover !important; background-position:center !important }
/* subtle top-edge shine for depth */
.card-top::after { content:''; position:absolute; inset:0;
                   background:linear-gradient(to bottom,rgba(255,255,255,.06) 0%,transparent 60%);
                   pointer-events:none }
.card-top-badges { position:relative; z-index:1; display:flex; gap:.4rem;
                   margin-bottom:.85rem; flex-wrap:wrap }
.c-num { font-size:.65rem; font-weight:700; color:rgba(255,255,255,.8);
         background:rgba(255,255,255,.18); padding:.18rem .5rem;
         border-radius:100px; letter-spacing:.05em }
.c-tag { font-size:.65rem; font-weight:700; color:rgba(255,255,255,.85);
         background:rgba(0,0,0,.2); padding:.18rem .55rem; border-radius:100px;
         text-transform:uppercase; letter-spacing:.04em }
.c-diff-badge { font-size:.63rem; font-weight:700; color:rgba(255,255,255,.85);
                background:rgba(255,255,255,.15); padding:.18rem .55rem; border-radius:100px }
.card-icon { position:relative; z-index:1; font-size:2.2rem;
             filter:drop-shadow(0 2px 6px rgba(0,0,0,.25)) }
.card-body { padding:1.25rem 1.35rem; flex:1; display:flex; flex-direction:column }
.c-en { font-size:.65rem; color:var(--text-3); text-transform:uppercase;
        letter-spacing:.06em; font-weight:600; margin-bottom:.3rem }
.c-title { font-family:var(--serif); font-size:.98rem; font-weight:700;
           line-height:1.35; margin-bottom:.65rem; color:var(--text) }
.c-intro { font-size:.81rem; color:var(--text-2); line-height:1.65; flex:1;
           display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
           overflow:hidden; margin-bottom:1rem }
.card-stats { display:flex; align-items:center; gap:.75rem;
              margin-bottom:.9rem; flex-wrap:wrap }
.cstat { display:flex; align-items:center; gap:.25rem; font-size:.72rem; color:var(--text-3) }
.cstat.gold { color:var(--star) }
.card-foot { display:flex; align-items:center; justify-content:space-between; gap:.5rem }
.card-actions { display:flex; gap:.4rem }
.c-btn { display:inline-flex; align-items:center; gap:.3rem; padding:.45rem 1rem;
         border-radius:var(--r); font-size:.79rem; font-weight:600; border:none;
         color:#fff; transition:all var(--tr) }
.c-btn:hover { transform:translateY(-1px); filter:brightness(1.1) }
.c-fav { width:32px; height:32px; border:1px solid var(--border); background:var(--surface2);
         border-radius:var(--r); display:flex; align-items:center; justify-content:center;
         font-size:.85rem; transition:all var(--tr); flex-shrink:0 }
.c-fav:hover { border-color:var(--star); color:var(--star) }
.c-fav.active { border-color:var(--star); background:rgba(245,158,11,.1) }
.no-results { grid-column:1/-1; text-align:center; padding:5rem 2rem; color:var(--text-3) }
.no-results span { font-size:3rem; display:block; margin-bottom:1rem }

/* ══════════ RESEARCHER PAGE ══════════ */
.res-hero { background:linear-gradient(135deg,var(--navy) 0%,#2A4E7F 100%);
            padding:4rem 0 3.5rem }
.res-hero-inner { display:grid; grid-template-columns:auto 1fr; gap:3rem; align-items:center }
.res-photo-wrap { flex-shrink:0 }
.res-photo { width:160px; height:160px; border-radius:50%; overflow:hidden;
             border:4px solid var(--gold); box-shadow:0 8px 32px rgba(201,168,76,.4) }
.res-photo img { width:100%; height:100%; object-fit:cover }
.res-initials { width:160px; height:160px; border-radius:50%; background:var(--grad-r);
                display:flex; align-items:center; justify-content:center;
                font-family:var(--serif); font-size:3rem; font-weight:700; color:#fff;
                box-shadow:0 8px 32px rgba(201,168,76,.35) }
.res-name { font-family:var(--serif); font-size:clamp(1.5rem,3vw,2.3rem); font-weight:700;
            color:#fff; margin-bottom:.35rem }
.res-degree { color:var(--gold); font-size:.9rem; font-weight:600; margin-bottom:.25rem }
.res-uni { color:rgba(255,255,255,.65); font-size:.875rem; margin-bottom:1rem }
.res-chips { display:flex; gap:.5rem; flex-wrap:wrap }
.res-chip { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
            color:rgba(255,255,255,.85); border-radius:100px; padding:.22rem .8rem;
            font-size:.75rem; font-weight:500 }

.res-body { padding:4rem 0 }
.res-grid { display:grid; grid-template-columns:1fr 1fr; gap:3rem }
.res-block { margin-bottom:2.5rem }
.res-block-title { font-family:var(--serif); font-size:1.25rem; font-weight:700;
                   color:var(--navy); margin-bottom:1.2rem; padding-bottom:.6rem;
                   border-bottom:2px solid var(--gold); display:inline-block }
.res-block-title { color:var(--navy) }
.res-abstract { color:var(--text-2); line-height:1.85; font-size:.93rem }

.goals-list { list-style:none; display:flex; flex-direction:column; gap:.65rem }
.goal-item { display:flex; align-items:flex-start; gap:.75rem; padding:.75rem 1rem;
             background:var(--surface); border:1px solid var(--border);
             border-radius:var(--r); transition:all var(--tr) }
.goal-item:hover { border-color:rgba(201,168,76,.35) }
.goal-ico { font-size:1.1rem; flex-shrink:0; margin-top:.1rem }
.goal-txt { font-size:.875rem; color:var(--text-2) }

.timeline { display:flex; flex-direction:column; gap:0 }
.tl-item { display:flex; gap:1.25rem; position:relative }
.tl-item::before { content:''; position:absolute; left:calc(3.5rem + 0px); top:2.2rem;
                   bottom:-1rem; width:1px; background:var(--border) }
.tl-item:last-child::before { display:none }
.tl-year { width:3.5rem; font-size:.78rem; font-weight:700; color:var(--gold);
           padding-top:1.1rem; flex-shrink:0; text-align:right }
.tl-dot { width:12px; height:12px; border-radius:50%; background:var(--gold);
          border:2px solid var(--bg); flex-shrink:0; margin-top:1.25rem;
          box-shadow:0 0 0 3px rgba(201,168,76,.25) }
.tl-body { padding:1rem 0 1.5rem; flex:1 }
.tl-label { font-size:.875rem; color:var(--text-2) }

.cite-box { background:var(--surface2); border:1px solid var(--border);
            border-left:3px solid var(--gold); border-radius:var(--r);
            padding:1.25rem 1.5rem; font-size:.83rem; color:var(--text-2);
            line-height:1.75; font-style:italic }
.cite-copy { margin-top:.85rem; background:none; border:1px solid var(--border);
             border-radius:var(--r); padding:.4rem .85rem; font-size:.75rem;
             color:var(--text-3); cursor:pointer; transition:all var(--tr) }
.cite-copy:hover { border-color:var(--gold); color:var(--gold) }

/* ══════════ SCENARIO DETAIL PAGE ══════════ */
.detail-back { position:sticky; top:68px; z-index:50; background:var(--surface);
               border-bottom:1px solid var(--border);
               display:flex; align-items:center; justify-content:space-between;
               padding:.65rem 1.5rem; box-shadow:var(--shadow) }
.back-btn { display:flex; align-items:center; gap:.45rem; font-size:.85rem;
            font-weight:500; color:var(--text-2); background:none; border:none;
            transition:color var(--tr) }
.back-btn:hover { color:var(--gold) }
.detail-actions { display:flex; gap:.5rem }
.action-btn { display:inline-flex; align-items:center; gap:.35rem; padding:.42rem .9rem;
              border-radius:var(--r); font-size:.8rem; font-weight:600; border:1.5px solid var(--border);
              background:var(--surface); color:var(--text-2); cursor:pointer; transition:all var(--tr) }
.action-btn:hover { border-color:var(--gold); color:var(--gold) }
.action-btn.fav-active { border-color:var(--star); color:var(--star);
                          background:rgba(245,158,11,.08) }
.action-btn.print-btn { background:var(--navy); border-color:var(--navy); color:#fff }
.action-btn.print-btn:hover { background:var(--navy-l) }

.detail-hero { padding:3.5rem 0 3rem; position:relative; overflow:hidden }
.detail-hero-bg { position:absolute; inset:0;
                  background-size:cover !important; background-position:center !important }
/* overlay already baked into inline background-image gradient */
.detail-hero-dots { position:absolute; inset:0;
                    background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);
                    background-size:28px 28px; z-index:1 }
.detail-hero-content { position:relative; z-index:2; max-width:1300px; margin:0 auto; padding:0 2rem }
.detail-meta { display:flex; gap:.5rem; margin-bottom:1rem; flex-wrap:wrap }
.detail-badge { font-size:.7rem; font-weight:700; color:rgba(255,255,255,.85);
                background:rgba(255,255,255,.18); padding:.22rem .65rem;
                border-radius:100px; letter-spacing:.04em }
.detail-icon { font-size:3rem; margin-bottom:.75rem; filter:drop-shadow(0 3px 8px rgba(0,0,0,.3)) }
.detail-en { font-size:.78rem; color:rgba(255,255,255,.65); text-transform:uppercase;
             letter-spacing:.07em; font-weight:600; margin-bottom:.4rem }
.detail-title { font-family:var(--serif); font-size:clamp(1.5rem,4vw,2.6rem); font-weight:700;
                color:#fff; line-height:1.2; margin-bottom:1.25rem; max-width:800px }
.detail-quick { display:flex; gap:1.25rem; flex-wrap:wrap }
.dq-item { display:flex; align-items:center; gap:.4rem; font-size:.82rem;
           color:rgba(255,255,255,.8); background:rgba(255,255,255,.1);
           padding:.3rem .75rem; border-radius:100px }

.detail-body { max-width:1300px; margin:0 auto; padding:2.5rem 2rem 4rem }
.detail-tabs { display:flex; gap:0; border-bottom:2px solid var(--border);
               margin-bottom:2rem; overflow-x:auto; scrollbar-width:none }
.detail-tabs::-webkit-scrollbar { display:none }
.dtab { flex-shrink:0; padding:.7rem 1.25rem; font-size:.875rem; font-weight:600;
        color:var(--text-3); border:none; background:none; cursor:pointer;
        border-bottom:2px solid transparent; margin-bottom:-2px; transition:all var(--tr) }
.dtab:hover { color:var(--text) }
.dtab.active { color:var(--gold); border-bottom-color:var(--gold) }
.dtab-panel { display:none }
.dtab-panel.active { display:block; animation:pnlfade .22s ease }
@keyframes pnlfade { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:none} }

.intro-img { border-radius:var(--r-lg); overflow:hidden; margin-bottom:1.35rem;
             position:relative; height:260px; box-shadow:var(--shadow-md) }
.intro-img img { width:100%; height:100%; object-fit:cover; display:block;
                 transition:transform .4s ease }
.intro-img:hover img { transform:scale(1.03) }
.intro-img-caption { position:absolute; bottom:0; left:0; right:0;
                     background:linear-gradient(transparent,rgba(0,0,0,.65));
                     padding:.75rem 1.1rem; font-size:.75rem; font-weight:600;
                     color:rgba(255,255,255,.9); letter-spacing:.04em;
                     text-transform:uppercase }
.intro-box { background:var(--surface); border:1px solid var(--border);
             border-left:3px solid var(--gold); border-radius:var(--r);
             padding:1.5rem; font-size:.92rem; color:var(--text-2); line-height:1.85 }
.sc-text { font-size:.91rem; color:var(--text-2); line-height:1.9; white-space:pre-wrap }
.roles-list { display:flex; flex-direction:column; gap:1.1rem }
.rc { background:var(--surface); border:1px solid var(--border);
      border-radius:var(--r-lg); overflow:hidden; transition:all var(--tr) }
.rc:hover { box-shadow:var(--shadow-md) }
.rc-head { padding:.9rem 1.25rem; display:flex; align-items:center; gap:.7rem;
           border-bottom:1px solid var(--border) }
.rc-num { width:28px; height:28px; border-radius:50%; display:flex; align-items:center;
          justify-content:center; font-size:.72rem; font-weight:700; color:#fff; flex-shrink:0 }
.rc-name { font-size:.95rem; font-weight:700 }
.rc-body { padding:1.1rem 1.25rem; display:flex; flex-direction:column; gap:.85rem }
.rf { display:flex; flex-direction:column; gap:.2rem }
.rf-lbl { font-size:.65rem; text-transform:uppercase; letter-spacing:.07em;
          font-weight:700; color:var(--text-3) }
.rf-val { font-size:.86rem; color:var(--text-2); line-height:1.6 }
.lines-ul { list-style:none; display:flex; flex-direction:column; gap:.4rem }
.lines-ul li { display:flex; align-items:flex-start; gap:.5rem; font-size:.84rem;
               color:var(--text-2); line-height:1.55 }
.ldot { width:5px; height:5px; border-radius:50%; flex-shrink:0; margin-top:.47rem }
.chal { display:flex; gap:.55rem; padding:.85rem 1rem; background:rgba(245,158,11,.07);
        border:1px solid rgba(245,158,11,.2); border-radius:var(--r) }
.chal-ico { flex-shrink:0 }
.chal-txt { font-size:.84rem; color:#B45309; font-weight:500; line-height:1.5 }
.chal-txt { color:#92400E }
.sample-badge { display:inline-flex; align-items:center; gap:.35rem;
                background:rgba(22,163,74,.08); border:1px solid rgba(22,163,74,.2);
                color:var(--accent); border-radius:100px; padding:.22rem .75rem;
                font-size:.7rem; font-weight:700; text-transform:uppercase;
                letter-spacing:.05em; margin-bottom:1.1rem }
.dlg-list { display:flex; flex-direction:column; gap:.9rem }
.dlg-item { display:flex; flex-direction:column; gap:.2rem }
.dlg-spk { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em }
.dlg-line { background:var(--surface2); border:1px solid var(--border);
            border-radius:0 var(--r) var(--r) var(--r); padding:.8rem 1rem;
            font-size:.88rem; color:var(--text-2); line-height:1.6 }

/* RATING */
.rating-section { margin-top:2.5rem; padding:1.75rem; background:var(--surface);
                  border:1px solid var(--border); border-radius:var(--r-lg) }
.rating-title { font-family:var(--serif); font-size:1.1rem; font-weight:700;
                margin-bottom:1rem; display:flex; align-items:center; gap:.5rem }
.avg-display { display:flex; align-items:center; gap:.75rem; margin-bottom:1.1rem }
.avg-num { font-size:2.5rem; font-weight:800; font-family:var(--serif); color:var(--text) }
.avg-stars { font-size:1.4rem; color:var(--star) }
.avg-count { font-size:.82rem; color:var(--text-3) }
.stars-interactive { display:flex; gap:.25rem; margin-bottom:1rem }
.istar { font-size:1.9rem; cursor:pointer; color:var(--border); transition:color .15s }
.istar.hover, .istar.sel { color:var(--star) }
.rate-note { font-size:.78rem; color:var(--text-3); margin-bottom:.85rem }
.rate-note.done { color:var(--accent) }
.btn-rate { background:var(--grad); color:#fff; border:none; border-radius:var(--r);
            padding:.55rem 1.4rem; font-size:.85rem; font-weight:600; transition:all var(--tr) }
.btn-rate:hover { transform:translateY(-1px); box-shadow:0 4px 16px rgba(201,168,76,.35) }
.btn-rate:disabled { opacity:.5; cursor:not-allowed; transform:none }

/* COMMENTS */
.comments-section { margin-top:2rem }
.comments-title { font-family:var(--serif); font-size:1.2rem; font-weight:700;
                  margin-bottom:1.25rem }
.comment-form { background:var(--surface); border:1px solid var(--border);
                border-radius:var(--r-lg); padding:1.35rem; margin-bottom:1.5rem }
.comment-form h4 { font-size:.875rem; font-weight:700; margin-bottom:.9rem }
.cf-row { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-bottom:.75rem }
.cf-input { width:100%; padding:.6rem .85rem; background:var(--bg2); border:1px solid var(--border);
            border-radius:var(--r); color:var(--text); font-family:var(--sans);
            font-size:.85rem; outline:none; transition:all var(--tr) }
.cf-input:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,168,76,.1) }
.cf-textarea { width:100%; padding:.7rem .85rem; background:var(--bg2); border:1px solid var(--border);
               border-radius:var(--r); color:var(--text); font-family:var(--sans);
               font-size:.85rem; resize:vertical; min-height:80px; outline:none; transition:all var(--tr) }
.cf-textarea:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,168,76,.1) }
.cf-stars { display:flex; align-items:center; gap:.5rem; margin-bottom:.85rem }
.cf-star-lbl { font-size:.78rem; color:var(--text-3) }
.cf-istar { font-size:1.3rem; cursor:pointer; color:var(--border); transition:color .15s }
.cf-istar.h, .cf-istar.s { color:var(--star) }
.cf-submit { background:var(--navy); color:#fff; border:none; border-radius:var(--r);
             padding:.55rem 1.25rem; font-size:.83rem; font-weight:600;
             cursor:pointer; transition:all var(--tr) }
.cf-submit:hover { background:var(--navy-l) }
.comments-list { display:flex; flex-direction:column; gap:.9rem }
.comment-item { background:var(--surface); border:1px solid var(--border);
                border-radius:var(--r-lg); padding:1.1rem 1.25rem }
.ci-head { display:flex; align-items:center; gap:.75rem; margin-bottom:.6rem }
.ci-avatar { width:36px; height:36px; border-radius:50%; background:var(--grad);
             display:flex; align-items:center; justify-content:center; font-size:.75rem;
             font-weight:700; color:#fff; flex-shrink:0 }
.ci-name { font-weight:700; font-size:.88rem }
.ci-date { font-size:.72rem; color:var(--text-3); margin-left:auto }
.ci-stars { font-size:.88rem; color:var(--star) }
.ci-text { font-size:.875rem; color:var(--text-2); line-height:1.65 }
.no-comments { text-align:center; padding:2rem; color:var(--text-3); font-size:.875rem }

/* ══════════ ADD SCENARIO MODAL ══════════ */
.overlay { position:fixed; inset:0; z-index:1000; display:flex; align-items:center;
           justify-content:center; padding:2rem; opacity:0; pointer-events:none;
           transition:opacity var(--tr) }
.overlay.open { opacity:1; pointer-events:all }
.modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.65); backdrop-filter:blur(6px) }
.modal { position:relative; z-index:1; background:var(--surface); border:1px solid var(--border);
         border-radius:var(--r-xl); width:100%; max-width:780px; max-height:90vh;
         display:flex; flex-direction:column; box-shadow:var(--shadow-lg);
         transform:scale(.96); transition:transform var(--tr) }
.overlay.open .modal { transform:scale(1) }
.modal-head { display:flex; align-items:center; justify-content:space-between;
              padding:1.25rem 1.5rem; border-bottom:1px solid var(--border) }
.modal-head h3 { font-family:var(--serif); font-size:1.1rem; font-weight:700 }
.modal-body { flex:1; overflow-y:auto; padding:1.5rem; scrollbar-width:thin }
.modal-body::-webkit-scrollbar { width:4px }
.modal-body::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px }
.modal-foot { padding:1.1rem 1.5rem; border-top:1px solid var(--border);
              display:flex; justify-content:flex-end; gap:.75rem }

/* FORM */
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem }
.form-row-4 { grid-template-columns:repeat(4,1fr) }
.form-group { display:flex; flex-direction:column; gap:.35rem }
.form-group.full { grid-column:1/-1; margin-bottom:1rem }
.form-group label { font-size:.75rem; font-weight:700; text-transform:uppercase;
                    letter-spacing:.06em; color:var(--text-3) }
.form-group input, .form-group select, .form-group textarea {
  padding:.6rem .85rem; background:var(--surface2); border:1px solid var(--border);
  border-radius:var(--r); color:var(--text); font-family:var(--sans); font-size:.875rem;
  outline:none; transition:all var(--tr) }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,168,76,.1) }
.form-group textarea { resize:vertical }
.req { color:var(--danger) }
.roles-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:.75rem }
.roles-header label { font-size:.75rem; font-weight:700; text-transform:uppercase;
                      letter-spacing:.06em; color:var(--text-3) }
.role-field { background:var(--surface2); border:1px solid var(--border); border-radius:var(--r);
              padding:1rem; margin-bottom:.75rem; position:relative }
.role-field-head { display:flex; justify-content:space-between; align-items:center;
                   margin-bottom:.85rem }
.role-field-title { font-size:.83rem; font-weight:700; color:var(--gold) }
.btn-remove-role { background:rgba(220,38,38,.08); border:1px solid rgba(220,38,38,.2);
                   border-radius:.4rem; padding:.22rem .6rem; font-size:.72rem;
                   color:var(--danger); cursor:pointer; transition:all var(--tr) }
.btn-remove-role:hover { background:rgba(220,38,38,.15) }
.role-grid { display:grid; grid-template-columns:1fr 1fr; gap:.75rem }
.role-grid .form-group { margin:0 }

/* ══════════ SITE FOOTER ══════════ */
.site-footer { background:var(--navy); border-top:3px solid var(--gold);
               padding:1.1rem 0; margin-top:auto }
.footer-inner { display:flex; align-items:center; justify-content:space-between;
                gap:1rem; flex-wrap:wrap }
.footer-copy { font-size:.8rem; color:rgba(255,255,255,.55) }
.footer-copy strong { color:rgba(255,255,255,.85) }
.footer-credit { font-size:.8rem; color:rgba(255,255,255,.45) }
.footer-link { color:var(--gold); font-weight:600; text-decoration:none;
               transition:color var(--tr) }
.footer-link:hover { color:var(--gold-l) }
@media(max-width:600px) { .footer-inner { justify-content:center; text-align:center } }

/* ══════════ TTS PLAYER ══════════ */
.tts-bar { background:#fff; border:2px solid var(--navy); border-radius:var(--r-lg);
           padding:1.1rem 1.35rem; margin-bottom:1.5rem;
           box-shadow:0 4px 20px rgba(30,58,95,.12) }
.tts-header { display:flex; align-items:center; gap:.65rem; margin-bottom:.9rem }
.tts-title { font-size:.78rem; font-weight:700; text-transform:uppercase;
             letter-spacing:.08em; color:var(--navy) }
.tts-lang-note { font-size:.7rem; color:var(--text-3); margin-left:auto }
.tts-now { background:var(--bg); border:1px solid var(--border); border-radius:var(--r);
           padding:.65rem .9rem; margin-bottom:.85rem; min-height:52px;
           display:flex; align-items:center; gap:.7rem }
.tts-now-ico { font-size:1.2rem; flex-shrink:0 }
.tts-now-inner { flex:1; min-width:0 }
.tts-now-spk { font-size:.68rem; font-weight:700; text-transform:uppercase;
               letter-spacing:.07em; color:var(--gold); margin-bottom:.15rem }
.tts-now-line { font-size:.83rem; color:var(--text-2); white-space:nowrap;
                overflow:hidden; text-overflow:ellipsis }
.tts-controls { display:flex; align-items:center; gap:.55rem; flex-wrap:wrap }
.tts-btn { display:inline-flex; align-items:center; gap:.3rem; padding:.42rem .95rem;
           border-radius:var(--r); font-size:.82rem; font-weight:600; border:none;
           cursor:pointer; transition:all var(--tr) }
.tts-btn.play  { background:var(--navy); color:#fff }
.tts-btn.play:hover  { background:var(--navy-l) }
.tts-btn.pause { background:var(--gold); color:#fff }
.tts-btn.pause:hover { background:var(--gold-dk); color:#fff }
.tts-btn.stop  { background:#fff; color:var(--text-2); border:1.5px solid var(--border) }
.tts-btn.stop:hover  { border-color:var(--navy); color:var(--navy) }
.tts-btn:disabled { opacity:.4; cursor:not-allowed; transform:none !important }
.tts-progress { flex:1; min-width:100px; height:4px; background:var(--border);
                border-radius:2px; overflow:hidden }
.tts-progress-bar { height:100%; background:var(--gold); border-radius:2px;
                    transition:width .3s ease; width:0% }
.tts-speed { padding:.38rem .65rem; border:1.5px solid var(--border); border-radius:var(--r);
             font-size:.8rem; color:var(--text-2); background:#fff; cursor:pointer; outline:none }
.tts-speed:focus { border-color:var(--navy) }
.tts-line-count { font-size:.72rem; color:var(--text-3); white-space:nowrap }
/* Highlight the active dialogue line */
.dlg-item.tts-active .dlg-line {
  border-color:var(--gold); background:rgba(201,168,76,.08);
  box-shadow:0 0 0 2px rgba(201,168,76,.2) }
.dlg-item.tts-active .dlg-spk { font-weight:800 }

/* Print styles for the scenario print page live in print.css (drama/scenario_print.html) */

/* ══════════ TOAST ══════════ */
.toast { position:fixed; bottom:2rem; right:2rem; z-index:2000;
         background:var(--navy); color:#fff; border:1px solid rgba(201,168,76,.3);
         border-radius:var(--r); padding:.75rem 1.25rem; font-size:.85rem; font-weight:500;
         box-shadow:var(--shadow-lg); transform:translateY(120%); opacity:0;
         transition:all .3s cubic-bezier(.34,1.56,.64,1); max-width:340px }
.toast.show { transform:translateY(0); opacity:1 }
.toast.success { border-color:rgba(22,163,74,.4) }
.toast.error { background:var(--danger) }

/* ══════════ ANIMATIONS ══════════ */
.fade-up { opacity:0; transform:translateY(24px); transition:opacity .65s ease,transform .65s ease }
.fade-up.visible { opacity:1; transform:translateY(0) }
.d2 { transition-delay:.12s } .d3 { transition-delay:.24s }

/* ══════════ RESPONSIVE ══════════ */
@media(max-width:1100px) {
  .scenarios-grid { grid-template-columns:repeat(2,1fr) }
  .featured-grid { grid-template-columns:repeat(2,1fr) }
}
@media(max-width:900px) {
  .scenarios-layout { grid-template-columns:1fr }
  .filter-sidebar { position:static; display:none }
  .filter-sidebar.mobile-open { display:block; margin-bottom:1.5rem }
  .mobile-filter-btn-wrap { display:block }
  .stats-row { grid-template-columns:repeat(2,1fr) }
  .res-hero-inner { grid-template-columns:1fr; text-align:center }
  .res-photo-wrap { display:flex; justify-content:center }
  .res-chips { justify-content:center }
  .res-grid { grid-template-columns:1fr }
  .researcher-spot { grid-template-columns:1fr; text-align:center }
  .spot-chips { justify-content:center }
  .spot-photo { display:flex; justify-content:center }
}
@media(max-width:768px) {
  .container { padding:0 1.25rem }
  .nav-links { display:none }
  .hamburger { display:flex }
  .btn-add { display:none }
  .dash-hero { padding:4rem 0 3rem }
  .dash-hero-inner { grid-template-columns:1fr }
  .decor-rings { display:none }
  .scenarios-grid { grid-template-columns:1fr }
  .featured-grid { grid-template-columns:1fr }
  .stats-row { grid-template-columns:repeat(2,1fr) }
  .stat-item { padding:1rem 1.25rem }
  .form-row { grid-template-columns:1fr }
  .form-row-4 { grid-template-columns:1fr 1fr }
  .cf-row { grid-template-columns:1fr }
  .detail-quick { flex-wrap:wrap; gap:.5rem }
  .overlay { padding:0 }
  .modal { border-radius:var(--r-xl) var(--r-xl) 0 0; max-height:95vh;
           position:fixed; bottom:0; left:0; right:0; max-width:100% }
  .role-grid { grid-template-columns:1fr }
}
@media(max-width:480px) {
  .dash-title { font-size:1.7rem }
  .dash-btns { flex-direction:column }
  .stats-row { grid-template-columns:1fr 1fr }
}