@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&family=Source+Serif+4:wght@400;600&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

*{box-sizing:border-box;margin:0;padding:0}

/* ═══ Theme variables ═══ */
:root{
  --bg:#F7F6F3;--cd:#FFF;--cdH:#FAFAF8;--bd:#E8E6E1;--bdH:#D5D3CD;
  --tx:#1A1A1A;--txM:#5C5C5C;--txD:#9B9B9B;
  --co:#1976D2;--sk:#1565C0;--am:#F59E0B;--gn:#2E7D32;--gnD:rgba(46,125,50,0.06);
  --rd:#C62828;--rdD:rgba(198,40,40,0.05);--pr:#7C3AED;--pk:#DB2777;--tl:#0D9488;
  --sh:0 1px 3px rgba(0,0,0,0.04);--iBg:#F0EFEC;--sBg:#EBF4FF;
  --nBg:#FDFCFA;--nAct:#EBF2FF;--stCo:#1976D2;
  --mn:'JetBrains Mono',monospace;--sr:'Source Serif 4',Georgia,serif;--dp:'Cormorant Garamond',serif;
}
.dark{
  --bg:#06060C;--cd:#0F0F1C;--cdH:#15152A;--bd:rgba(255,255,255,0.06);--bdH:rgba(255,255,255,0.12);
  --tx:#E8E6DC;--txM:#9B9A90;--txD:#5A5A52;
  --co:#4FC3F7;--sk:#4FC3F7;--am:#F59E0B;--gn:#4CAF50;--gnD:rgba(46,125,50,0.12);
  --rd:#E53935;--rdD:rgba(229,57,53,0.08);--pr:#A78BFA;--pk:#F472B6;--tl:#2DD4BF;
  --sh:0 2px 6px rgba(0,0,0,0.3);--iBg:#181830;--sBg:rgba(79,195,247,0.06);
  --nBg:#0A0A16;--nAct:rgba(25,118,210,0.12);--stCo:#4FC3F7;
}

/* ═══ Shell ═══ */
body{font-family:var(--sr);background:var(--bg);color:var(--tx);transition:background .3s,color .3s}
#shell{display:flex;height:100vh;overflow:hidden}
#sidebar{width:216px;flex-shrink:0;background:var(--nBg);border-right:1px solid var(--bd);display:flex;flex-direction:column;height:100vh;overflow:hidden;transition:width .2s}
#sidebar.collapsed{width:56px}
#content-wrap{flex:1;min-width:0;display:flex;flex-direction:column}
#header{padding:10px 24px;border-bottom:1px solid var(--bd);display:flex;justify-content:space-between;align-items:center;background:var(--cd);flex-shrink:0}
#main{flex:1;overflow:auto;padding:24px}

/* ═══ Sidebar ═══ */
.sb-top{padding:14px 18px;border-bottom:1px solid var(--bd);display:flex;align-items:center;gap:10;flex-shrink:0}
.collapsed .sb-top{padding:14px 0;justify-content:center}
.sb-avatar{border-radius:10px;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff}
.sb-avatar img{width:100%;height:100%;object-fit:cover}
.sb-name{font-size:14px;font-weight:700;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-sub{font-size:10px;color:var(--txD)}
.sb-collapse-btn{background:transparent;border:1px solid var(--bd);border-radius:6px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--txD);flex-shrink:0;padding:0}
.sb-nav{flex:1;padding:8px 10px;overflow:hidden}
.sb-section-label{font:9px/1 var(--mn);color:var(--txD);letter-spacing:.1em;padding:12px 12px 6px;text-transform:uppercase}
.collapsed .sb-section-label{display:none}
.sb-item{display:flex;align-items:center;gap:10;padding:8px 14px;margin:2px 0;border-radius:10px;cursor:pointer;background:transparent;color:var(--txM);font:13px/1.3 var(--sr);font-weight:450;border:none;width:100%;text-align:left;transition:all .15s}
.collapsed .sb-item{padding:10px 0;justify-content:center}
.collapsed .sb-item span{display:none}
.sb-item.active{background:var(--nAct);color:var(--co);font-weight:600}
.sb-item:hover:not(.active){background:var(--iBg)}
.sb-item svg{flex-shrink:0}
.sb-bottom{padding:10px 18px;border-top:1px solid var(--bd);flex-shrink:0}
.collapsed .sb-bottom{padding:8px}
.sb-profile{display:flex;align-items:center;gap:8;cursor:pointer;padding:6px 8px;border-radius:8px;transition:background .15s;border:none;width:100%;background:transparent;text-align:left;color:var(--tx);font-family:var(--sr)}
.collapsed .sb-profile{justify-content:center;padding:4px}
.sb-profile:hover{background:var(--iBg)}
.sb-profile-avatar{border-radius:50%;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:#fff}
.sb-profile-avatar img{width:100%;height:100%;object-fit:cover}
.sb-profile-name{font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-profile-role{font-size:9px;color:var(--txD)}
/* Collapsed expand toggle overlay */
.sb-toggle-overlay{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;background:var(--co);display:none;align-items:center;justify-content:center}
.sb-profile-wrap:hover .sb-toggle-overlay{display:flex}
.sb-profile-wrap:hover .sb-profile-avatar-inner{display:none}
.sb-powered{padding:6px 18px 8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;gap:5}
.collapsed .sb-powered span{display:none}
.sb-powered span{font-size:9px;color:var(--txD)}
.sb-powered .accent{color:var(--stCo);font-weight:600}

/* ═══ Breadcrumb ═══ */
.bc{display:flex;align-items:center;gap:6;font:12px var(--mn);color:var(--txD)}
.bc .active{color:var(--co)}
.bc .sep{font-size:10px}

/* ═══ Cards ═══ */
.card{background:var(--cd);border-radius:14px;border:1px solid var(--bd);padding:16px;box-shadow:var(--sh);transition:all .15s}
.card:hover.hoverable{border-color:var(--bdH);background:var(--cdH)}
.card.clickable{cursor:pointer}
.card+.card{margin-top:0}

/* ═══ Stat cards ═══ */
.stat{padding:14px 16px}
.stat-label{display:flex;align-items:center;gap:6;margin-bottom:6;font-size:11px;color:var(--txD);font-weight:500;letter-spacing:.03em}
.stat-value{font:700 22px/1 var(--mn);color:var(--tx)}
.stat-sub{font-size:11px;color:var(--txM);margin-top:5px}

/* ═══ Section header ═══ */
.sh{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:8}
.sh-title{font:700 24px/1.2 var(--dp);letter-spacing:-.02em}
.sh-sub{font-size:13px;color:var(--txM);margin-top:3px}

/* ═══ Tags ═══ */
.tag{font-size:10px;padding:3px 8px;border-radius:6px;font-weight:600;white-space:nowrap;display:inline-block}

/* ═══ Signal bars ═══ */
.signal-bars{display:flex;gap:2px;align-items:flex-end}
.signal-bar{width:4px;border-radius:1px}

/* ═══ Score badge ═══ */
.score-badge{border-radius:8px;display:flex;align-items:center;justify-content:center;font:700 var(--mn)}

/* ═══ Status dot ═══ */
.status-dot{display:flex;align-items:center;gap:5}
.status-dot .dot{width:6px;height:6px;border-radius:50%}
.status-dot .label{font-size:10px;font-weight:500}

/* ═══ Buttons ═══ */
.btn{padding:6px 14px;border-radius:8px;font-size:11px;cursor:pointer;font-weight:500;border:1px solid var(--bd);background:transparent;color:var(--txM);transition:all .15s}
.btn:hover{border-color:var(--bdH)}
.btn-primary{background:var(--co);color:#fff;border-color:var(--co)}
.btn-danger{background:var(--rdD);border-color:rgba(229,57,53,.3);color:var(--rd)}
.btn-sm{padding:5px 12px;font-size:10px;border-radius:6px}
.chip{padding:5px 12px;border-radius:6px;font-size:10px;cursor:pointer;border:1px solid var(--bd);background:transparent;color:var(--txD);font-weight:400;transition:all .15s}
.chip.active{border-color:rgba(25,118,210,.35);background:rgba(25,118,210,.08);color:var(--co);font-weight:600}

/* ═══ Grids ═══ */
.grid{display:grid;gap:8px}
.grid-2{grid-template-columns:1fr 1fr}
.grid-3{grid-template-columns:1fr 1fr 1fr}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-5{grid-template-columns:repeat(5,1fr)}

/* ═══ Mini bar chart ═══ */
.mini-bars{display:flex;align-items:flex-end;gap:3px}
.mini-bars .bar{flex:1;border-radius:2px;transition:height .3s}
.mini-bars .bar-label{font:7px var(--mn);color:var(--txD);text-align:center;margin-top:2px}

/* ═══ Steward badge ═══ */
.svb{display:inline-flex;align-items:center;gap:4px;font-size:10px;color:var(--stCo);background:rgba(25,118,210,.08);padding:3px 8px;border-radius:6px;font-weight:600;border:1px solid rgba(25,118,210,.2)}

/* ═══ Alert banner ═══ */
.alert-banner{border-radius:14px;padding:14px 16px;display:flex;align-items:center;gap:10;flex-wrap:wrap;margin-bottom:12px}
.alert-banner.danger{background:var(--rdD);border:1px solid rgba(229,57,53,.2)}
.alert-banner.info{border:1px solid rgba(25,118,210,.2)}

/* ═══ Progress bars ═══ */
.progress-track{height:5px;background:var(--iBg);border-radius:3px;overflow:hidden}
.progress-fill{height:100%;border-radius:3px}

/* ═══ Row styles ═══ */
.list-row{display:flex;align-items:center;gap:10px;padding:10px 4px;border-bottom:1px solid var(--bd);cursor:pointer;transition:background .1s}
.list-row:last-child{border-bottom:none}
.list-row:hover{background:var(--iBg)}

/* ═══ Wizard ═══ */
.wiz-steps{display:flex;gap:4px;margin-bottom:20px}
.wiz-step{flex:1;text-align:center}
.wiz-step-bar{height:4px;border-radius:2px;margin-bottom:6px;transition:background .3s}
.wiz-step-label{font:9px var(--mn);color:var(--txD)}
.wiz-step.done .wiz-step-bar{background:var(--gn)}
.wiz-step.done .wiz-step-label{color:var(--gn)}
.wiz-step.current .wiz-step-bar{background:var(--co);opacity:.8}
.wiz-step.current .wiz-step-label{color:var(--co);font-weight:600}
.wiz-step-bar{background:var(--iBg)}
.drop-zone{padding:24px;border:2px dashed var(--bd);border-radius:12px;text-align:center;cursor:pointer;background:var(--iBg)}

/* ═══ Timeline bars (Migrate) ═══ */
.timeline-bar{display:flex;height:14px;border-radius:6px;overflow:hidden;background:var(--iBg)}
.timeline-pre{position:relative}
.timeline-marker{position:absolute;right:0;top:0;bottom:0;width:2px;background:var(--co)}
.timeline-labels{display:flex;justify-content:space-between;margin-top:2px}
.timeline-labels span{font:8px var(--mn)}

/* ═══ Hatched pattern for pre-Steward ═══ */
.hatched{background:repeating-linear-gradient(45deg,rgba(245,158,11,.2),rgba(245,158,11,.2) 3px,rgba(245,158,11,.1) 3px,rgba(245,158,11,.1) 6px)}

/* ═══ Ledger timeline ═══ */
.ledger-row{display:flex;gap:16px;min-height:60px}
.ledger-left{display:flex;flex-direction:column;align-items:center;width:48px}
.ledger-year{font:12px var(--mn);color:var(--txD)}
.ledger-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;margin-top:6px}
.ledger-line{width:1px;flex:1;background:var(--bd);margin-top:4px}
.ledger-content{flex:1;padding-bottom:16px}

/* ═══ Legacy Room sub-tabs ═══ */
.lr-tabs{display:flex;gap:2px;margin-bottom:20px;background:var(--iBg);border-radius:10px;padding:3px;overflow:auto}
.lr-tab{flex:1 0 auto;padding:8px 14px;border-radius:8px;border:none;background:transparent;color:var(--txD);font-size:11px;font-weight:400;cursor:pointer;white-space:nowrap}
.lr-tab.active{background:var(--cd);color:var(--co);font-weight:600;box-shadow:var(--sh)}

/* ═══ Vault video card ═══ */
.vault-card{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:14px;border:1px solid var(--bd);background:var(--cd);cursor:pointer;transition:all .15s;margin-bottom:8px}
.vault-card:hover{border-color:var(--bdH);background:var(--cdH)}
.vault-thumb{width:64px;height:44px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center}

/* ═══ Gallery grid ═══ */
.gallery-grid{display:grid;grid-template-columns:1fr 1fr 1fr;grid-auto-rows:160px;gap:10px;margin-bottom:14px}
.gallery-item{border-radius:10px;overflow:hidden;border:1px solid var(--bd);display:flex;flex-direction:column;cursor:pointer}
.gallery-item.wide{grid-column:span 2}
.gallery-item-img{flex:1;display:flex;align-items:center;justify-content:center}
.gallery-item-cap{padding:8px 12px;border-top:1px solid var(--bd)}
.gallery-item-cap p{font-size:11px;color:var(--txM)}
.gallery-item-cap span{font-size:9px;color:var(--txD);margin-top:2px;display:block}

/* ═══ Member cards ═══ */
.member-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.member-card{text-align:center;padding:16px 14px}
.member-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 8px;font:13px var(--mn)}

/* ═══ Animations ═══ */
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
#main>div{animation:fadeUp .4s ease}

/* ═══ Footer ═══ */
.footer{padding:16px 0 8px;margin-top:24px;border-top:1px solid var(--bd);display:flex;justify-content:center}
.footer span{font-size:9px;color:var(--txD)}