:root {
      --bg:#07090f; --bg-raised:#0d1020; --bg-card:#111525; --bg-hover:#161b2e;
      --border:rgba(255,255,255,0.07); --border-gold:rgba(201,168,76,0.25);
      --gold:#c9a84c; --gold-lt:#e4c97e; --gold-dim:rgba(201,168,76,0.12);
      --ivory:#f0e8d5; --ivory-60:rgba(240,232,213,0.6); --ivory-30:rgba(240,232,213,0.3);
      --c1:#c9a84c; --c1d:rgba(201,168,76,0.15);
      --c2:#6fa3a4; --c2d:rgba(111,163,164,0.15);
      --c3:#a47ea4; --c3d:rgba(164,126,164,0.15);
      --c4:#a4896f; --c4d:rgba(164,137,111,0.15);
      --sidebar-w:260px; --topbar-h:60px;
    }
    *,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
    html { scroll-behavior:smooth }
    body { background:var(--bg); color:var(--ivory); font-family:'Jost',sans-serif; font-weight:300; min-height:100vh; display:flex }
    body::after { content:''; position:fixed; inset:0; z-index:9999; pointer-events:none;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
      opacity:0.45 }

    /* SIDEBAR */
    .sidebar { position:fixed; top:0; left:0; width:var(--sidebar-w); height:100vh; background:var(--bg-raised); border-right:1px solid var(--border); display:flex; flex-direction:column; z-index:200; overflow:hidden }
    .sidebar-logo { padding:1rem 1.2rem; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:0.8rem }
    .sidebar-logo img { width:64px; height:64px; object-fit:contain; border-radius:50%; flex-shrink:0; border:1px solid var(--border-gold) }
    .sidebar-logo .kmc { font-family:'Playfair Display',serif; font-size:1rem; font-weight:700; letter-spacing:0.05em; line-height:1.2 }
    .sidebar-logo .kmc span { color:var(--gold) }
    .sidebar-logo .sub { font-size:0.55rem; letter-spacing:0.25em; text-transform:uppercase; color:var(--ivory-30); margin-top:0.2rem; font-weight:400; line-height:1.4 }
    .sidebar-section-label { padding:1.2rem 1.5rem 0.5rem; font-size:0.55rem; letter-spacing:0.4em; text-transform:uppercase; color:var(--ivory-30); font-weight:400 }
    .sidebar-nav { flex:1; overflow-y:auto; padding-bottom:1rem }
    .sidebar-nav::-webkit-scrollbar { width:3px }
    .sidebar-nav::-webkit-scrollbar-thumb { background:var(--border-gold) }
    .nav-item { display:flex; align-items:center; gap:0.8rem; padding:0.75rem 1.5rem; cursor:pointer; font-size:0.8rem; font-weight:400; color:var(--ivory-60); transition:all 0.2s; border-left:2px solid transparent; margin:1px 0 }
    .nav-item:hover { background:var(--bg-hover); color:var(--ivory) }
    .nav-item.active { color:var(--ivory); background:var(--bg-hover) }
    .nav-item.active.overview { border-left-color:var(--gold) }
    .nav-item.active.q1 { border-left-color:var(--c1); color:var(--c1) }
    .nav-item.active.q2 { border-left-color:var(--c2); color:var(--c2) }
    .nav-item.active.q3 { border-left-color:var(--c3); color:var(--c3) }
    .nav-item.active.q4 { border-left-color:var(--c4); color:var(--c4) }
    .nav-item .nav-icon { font-size:0.9rem; width:18px; text-align:center }
    .nav-item .nav-badge { margin-left:auto; font-size:0.55rem; background:var(--bg-card); border:1px solid var(--border); border-radius:20px; padding:0.1rem 0.5rem; color:var(--ivory-30) }
    .nav-item.active .nav-badge { border-color:currentColor; color:currentColor }
    .sidebar-progress { padding:1.2rem 1.5rem; border-top:1px solid var(--border) }
    .sp-label { font-size:0.6rem; letter-spacing:0.3em; text-transform:uppercase; color:var(--ivory-30); margin-bottom:0.8rem; display:flex; justify-content:space-between }
    .sp-label strong { color:var(--gold) }
    .sp-bar-bg { height:3px; background:var(--border); border-radius:2px; overflow:hidden }
    .sp-bar-fill { height:100%; background:linear-gradient(to right,var(--c1),var(--c4)); border-radius:2px; transition:width 0.6s ease }
    .sp-pillars { display:grid; grid-template-columns:1fr 1fr; gap:0.5rem; margin-top:0.8rem }
    .sp-pill { background:var(--bg-card); border:1px solid var(--border); border-radius:4px; padding:0.4rem 0.6rem; font-size:0.6rem }
    .sp-pill .pill-name { color:var(--ivory-60); margin-bottom:0.25rem }
    .sp-pill .pill-bar { height:2px; background:var(--border); border-radius:1px; overflow:hidden }
    .sp-pill .pill-fill { height:100%; border-radius:1px; transition:width 0.6s ease }

    /* TOPBAR */
    .topbar { position:fixed; top:0; left:var(--sidebar-w); right:0; height:var(--topbar-h); background:rgba(7,9,15,0.92); backdrop-filter:blur(12px); border-bottom:1px solid var(--border); display:flex; align-items:center; padding:0 2rem; z-index:100; gap:1.2rem }
    .topbar-logo { width:30px; height:30px; object-fit:contain; border-radius:3px; opacity:0.8; flex-shrink:0 }
    .topbar-crumb { font-size:0.65rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--ivory-30) }
    .topbar-crumb .sep { margin:0 0.5rem; opacity:0.3 }
    .topbar-crumb .crumb-active { color:var(--ivory-60); font-weight:400 }
    .topbar-actions { margin-left:auto; display:flex; align-items:center; gap:0.8rem }
    .filter-btn { font-size:0.58rem; letter-spacing:0.2em; text-transform:uppercase; padding:0.3rem 0.8rem; border:1px solid var(--border); background:transparent; color:var(--ivory-30); cursor:pointer; transition:all 0.2s; font-family:'Jost',sans-serif; border-radius:2px }
    .filter-btn:hover { border-color:var(--gold); color:var(--gold) }
    .filter-btn.active-filter { border-color:var(--gold); background:var(--gold-dim); color:var(--gold-lt) }
    .reset-btn { font-size:0.58rem; letter-spacing:0.2em; text-transform:uppercase; padding:0.3rem 1rem; background:var(--gold-dim); border:1px solid var(--border-gold); color:var(--gold-lt); cursor:pointer; font-family:'Jost',sans-serif; transition:all 0.2s; border-radius:2px }
    .reset-btn:hover { background:rgba(201,168,76,0.2) }

    /* MAIN */
    .main { margin-left:var(--sidebar-w); padding-top:var(--topbar-h); flex:1; min-height:100vh }
    .content { padding:2.5rem 2.5rem 5rem }
    .view { display:none }
    .view.active { display:block }

    /* DASHBOARD */
    .dash-hero { background:var(--bg-raised); border:1px solid var(--border); padding:3rem; margin-bottom:2rem; position:relative; overflow:hidden }
    .dash-hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 80% 100% at 50% 110%,rgba(201,168,76,0.07),transparent) }
    .dash-hero-content { position:relative; z-index:1 }
    .dash-hero-eyebrow { font-size:0.6rem; letter-spacing:0.45em; text-transform:uppercase; color:var(--gold); margin-bottom:1rem; font-weight:400 }
    .dash-hero h1 { font-family:'Playfair Display',serif; font-size:clamp(2rem,4vw,3.5rem); font-weight:700; line-height:1.1; margin-bottom:0.8rem }
    .dash-hero h1 em { color:var(--gold); font-style:italic }
    .dash-hero p { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.1rem; color:var(--ivory-60); max-width:520px; line-height:1.7 }
    .stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:2rem }
    .stat-card { background:var(--bg-raised); border:1px solid var(--border); padding:1.5rem; position:relative; overflow:hidden; transition:transform 0.3s,border-color 0.3s; cursor:pointer }
    .stat-card:hover { transform:translateY(-3px); border-color:var(--border-gold) }
    .stat-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px }
    .stat-card:nth-child(1)::after { background:var(--c1) }
    .stat-card:nth-child(2)::after { background:var(--c2) }
    .stat-card:nth-child(3)::after { background:var(--c3) }
    .stat-card:nth-child(4)::after { background:var(--c4) }
    .stat-number { font-family:'Playfair Display',serif; font-size:2.5rem; font-weight:700; line-height:1; margin-bottom:0.4rem }
    .stat-card:nth-child(1) .stat-number { color:var(--c1) }
    .stat-card:nth-child(2) .stat-number { color:var(--c2) }
    .stat-card:nth-child(3) .stat-number { color:var(--c3) }
    .stat-card:nth-child(4) .stat-number { color:var(--c4) }
    .stat-label { font-size:0.65rem; letter-spacing:0.25em; text-transform:uppercase; color:var(--ivory-30); font-weight:400; margin-bottom:1rem }
    .stat-progress-bar { height:2px; background:var(--border); overflow:hidden; border-radius:1px }
    .stat-progress-fill { height:100%; border-radius:1px; transition:width 0.8s ease }
    .stat-card:nth-child(1) .stat-progress-fill { background:var(--c1) }
    .stat-card:nth-child(2) .stat-progress-fill { background:var(--c2) }
    .stat-card:nth-child(3) .stat-progress-fill { background:var(--c3) }
    .stat-card:nth-child(4) .stat-progress-fill { background:var(--c4) }
    .pillar-overview-card { background:var(--bg-raised); border:1px solid var(--border); padding:2rem; cursor:pointer; transition:all 0.3s; position:relative; overflow:hidden }
    .pillar-overview-card:hover { border-color:var(--border-gold); transform:translateY(-3px) }
    .pillar-overview-card::before { content:''; position:absolute; top:0; left:0; bottom:0; width:3px }
    .pillar-overview-card.p1::before { background:var(--c1) }
    .pillar-overview-card.p2::before { background:var(--c2) }
    .pillar-overview-card.p3::before { background:var(--c3) }
    .pillar-overview-card.p4::before { background:var(--c4) }
    .poc-quarter { font-size:0.58rem; letter-spacing:0.35em; text-transform:uppercase; margin-bottom:0.6rem; font-weight:400 }
    .p1 .poc-quarter { color:var(--c1) } .p2 .poc-quarter { color:var(--c2) } .p3 .poc-quarter { color:var(--c3) } .p4 .poc-quarter { color:var(--c4) }
    .poc-title { font-family:'Playfair Display',serif; font-size:1.6rem; font-weight:700; margin-bottom:0.5rem }
    .poc-desc { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:0.9rem; color:var(--ivory-60); line-height:1.6; margin-bottom:1.2rem }
    .poc-stats { display:flex; gap:1.5rem; font-size:0.62rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--ivory-30) }
    .poc-stats strong { font-weight:600; color:var(--ivory-60) }
    .poc-arrow { position:absolute; top:1.5rem; right:1.5rem; font-size:1rem; color:var(--ivory-30); transition:all 0.3s }
    .pillar-overview-card:hover .poc-arrow { color:var(--gold); transform:translate(3px,-3px) }
    .scripture-card { background:var(--bg-raised); border:1px solid var(--border-gold); padding:2rem 2.5rem; margin-bottom:2rem; text-align:center; position:relative }
    .scripture-card::before { content:'\201C'; position:absolute; top:-0.8rem; left:1.5rem; font-family:'Playfair Display',serif; font-size:5rem; color:var(--gold); opacity:0.2; line-height:1 }
    .scripture-card p { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.15rem; color:var(--ivory-60); line-height:1.7; margin-bottom:0.6rem }
    .scripture-card cite { font-size:0.6rem; letter-spacing:0.35em; text-transform:uppercase; color:var(--gold); font-weight:400 }
    .section-head { display:flex; align-items:center; gap:1rem; margin-bottom:1.2rem }
    .section-head h3 { font-family:'Playfair Display',serif; font-size:1.1rem; font-weight:600 }
    .section-head::after { content:''; flex:1; height:1px; background:var(--border) }

    /* ── SCORECARD STATUS COLORS ── */
    /* Stat card status overrides */
    .stat-card.s-not-started { border-color:rgba(148,103,189,0.35) }
    .stat-card.s-red    { border-color:rgba(210,55,55,0.35) }
    .stat-card.s-yellow { border-color:rgba(210,170,35,0.35) }
    .stat-card.s-green  { border-color:rgba(50,170,90,0.35) }
    .stat-card.s-gold   { border-color:rgba(201,168,76,0.5); animation:goldPulse 3s ease infinite }
    .stat-card.s-locked { border-color:rgba(255,255,255,0.04); opacity:0.38; cursor:not-allowed !important }
    .stat-card.s-locked:hover { transform:none !important; border-color:rgba(255,255,255,0.04) !important }
    .stat-card.s-not-started::after { background:#9467bd }
    .stat-card.s-red::after    { background:#d23737 }
    .stat-card.s-yellow::after { background:#d2aa23 }
    .stat-card.s-green::after  { background:#32aa5a }
    .stat-card.s-gold::after   { background:linear-gradient(to right,var(--c1),var(--gold-lt)) }
    .stat-card.s-locked::after { background:rgba(255,255,255,0.08) }
    .stat-card.s-not-started .stat-number { color:#9467bd }
    .stat-card.s-red .stat-number    { color:#d23737 }
    .stat-card.s-yellow .stat-number { color:#d2aa23 }
    .stat-card.s-green .stat-number  { color:#32aa5a }
    .stat-card.s-gold .stat-number   { color:var(--gold) }
    .stat-card.s-locked .stat-number { color:var(--ivory-30) }
    .stat-card.s-not-started .stat-progress-fill { background:#9467bd }
    .stat-card.s-red .stat-progress-fill    { background:#d23737 }
    .stat-card.s-yellow .stat-progress-fill { background:#d2aa23 }
    .stat-card.s-green .stat-progress-fill  { background:#32aa5a }
    .stat-card.s-gold .stat-progress-fill   { background:var(--gold) }

    /* Status badge row inside stat card */
    .stat-badge { display:flex; align-items:center; gap:0.45rem; margin-top:0.7rem }
    .status-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0 }
    .status-dot.not-started { background:#9467bd }
    .status-dot.red    { background:#d23737 }
    .status-dot.yellow { background:#d2aa23 }
    .status-dot.green  { background:#32aa5a }
    .status-dot.gold   { background:var(--gold) }
    .status-dot.locked { background:var(--ivory-30) }
    .stat-status-label { font-size:0.55rem; letter-spacing:0.2em; text-transform:uppercase; font-weight:400 }
    .stat-status-label.not-started { color:#9467bd }
    .stat-status-label.red    { color:#d23737 }
    .stat-status-label.yellow { color:#d2aa23 }
    .stat-status-label.green  { color:#32aa5a }
    .stat-status-label.gold   { color:var(--gold) }
    .stat-status-label.locked { color:var(--ivory-30) }

    /* Pillar overview card status */
    .pillar-overview-card.s-not-started { border-color:rgba(148,103,189,0.3) }
    .pillar-overview-card.s-red    { border-color:rgba(210,55,55,0.3) }
    .pillar-overview-card.s-yellow { border-color:rgba(210,170,35,0.3) }
    .pillar-overview-card.s-green  { border-color:rgba(50,170,90,0.3) }
    .pillar-overview-card.s-gold   { border-color:rgba(201,168,76,0.45); animation:goldPulse 3s ease infinite }
    .pillar-overview-card.s-locked { cursor:not-allowed !important }
    .pillar-overview-card.s-locked:hover { transform:none !important; border-color:var(--border) !important }

    /* Status badge on pillar card */
    .poc-status-badge { position:absolute; top:1.2rem; right:1.2rem; font-size:0.52rem; letter-spacing:0.2em; text-transform:uppercase; padding:0.2rem 0.65rem; border-radius:20px; font-weight:400; border:1px solid; pointer-events:none }
    .poc-status-badge.not-started { color:#9467bd; border-color:rgba(148,103,189,0.35); background:rgba(148,103,189,0.1) }
    .poc-status-badge.red    { color:#d23737; border-color:rgba(210,55,55,0.35); background:rgba(210,55,55,0.1) }
    .poc-status-badge.yellow { color:#d2aa23; border-color:rgba(210,170,35,0.35); background:rgba(210,170,35,0.1) }
    .poc-status-badge.green  { color:#32aa5a; border-color:rgba(50,170,90,0.35); background:rgba(50,170,90,0.1) }
    .poc-status-badge.gold   { color:var(--gold); border-color:var(--border-gold); background:var(--gold-dim) }
    .poc-status-badge.locked { color:var(--ivory-30); border-color:var(--border); background:transparent }

    /* Lock overlay on pillar cards */
    .pillar-lock-overlay { position:absolute; inset:0; background:rgba(5,7,14,0.78); display:none; flex-direction:column; align-items:center; justify-content:center; z-index:5; backdrop-filter:blur(3px) }
    .pillar-overview-card.s-locked .pillar-lock-overlay { display:flex }
    .lock-icon-xl { font-size:2.2rem; margin-bottom:0.7rem; opacity:0.55 }
    .lock-msg-text { font-size:0.6rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--ivory-30); text-align:center; line-height:1.7; max-width:160px }

    /* Sidebar locked nav item */
    .nav-item.nav-locked { opacity:0.32; cursor:not-allowed }
    .nav-item.nav-locked:hover { background:transparent !important; color:var(--ivory-60) !important }

    /* Scorecard legend */
    .scorecard-legend { display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; padding:0.7rem 1.2rem; background:var(--bg-raised); border:1px solid var(--border); margin-bottom:1rem }
    .legend-title { font-size:0.55rem; letter-spacing:0.3em; text-transform:uppercase; color:var(--ivory-30); font-weight:400; margin-right:0.5rem }
    .legend-item { display:flex; align-items:center; gap:0.4rem; font-size:0.55rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--ivory-30) }
    .legend-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0 }

    /* Toast */
    .toast { position:fixed; bottom:2rem; left:50%; transform:translateX(-50%) translateY(16px); background:var(--bg-card); border:1px solid rgba(210,55,55,0.4); color:rgba(240,232,213,0.75); padding:0.75rem 2rem; font-size:0.72rem; letter-spacing:0.08em; z-index:700; opacity:0; transition:all 0.3s ease; border-radius:2px; pointer-events:none; white-space:nowrap; max-width:90vw; text-align:center }
    .toast.show { opacity:1; transform:translateX(-50%) translateY(0) }

    /* Gold pulse keyframe */
    @keyframes goldPulse { 0%,100%{ box-shadow:0 0 0 0 rgba(201,168,76,0) } 50%{ box-shadow:0 0 24px 4px rgba(201,168,76,0.12) } }

    /* QUARTER VIEWS */
    .quarter-view-header { background:var(--bg-raised); border:1px solid var(--border); padding:2.5rem; margin-bottom:1.5rem; position:relative; overflow:hidden }
    .qvh-bg { position:absolute; inset:0; opacity:0.04; font-family:'Playfair Display',serif; font-size:15rem; font-weight:900; display:flex; align-items:center; justify-content:flex-end; padding-right:1rem; line-height:1; user-select:none; pointer-events:none; color:var(--ivory) }
    .qvh-content { position:relative; z-index:1 }
    .qvh-badge { display:inline-block; font-size:0.58rem; letter-spacing:0.4em; text-transform:uppercase; padding:0.3rem 1rem; border:1px solid; margin-bottom:1rem; font-weight:400; border-radius:2px }
    .q1-view .qvh-badge { border-color:rgba(201,168,76,0.4); color:var(--c1); background:var(--c1d) }
    .q2-view .qvh-badge { border-color:rgba(111,163,164,0.4); color:var(--c2); background:var(--c2d) }
    .q3-view .qvh-badge { border-color:rgba(164,126,164,0.4); color:var(--c3); background:var(--c3d) }
    .q4-view .qvh-badge { border-color:rgba(164,137,111,0.4); color:var(--c4); background:var(--c4d) }
    .qvh-title { font-family:'Playfair Display',serif; font-size:clamp(2.2rem,4vw,3.5rem); font-weight:700; margin-bottom:0.5rem }
    .qvh-sub { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.1rem; color:var(--ivory-60); max-width:480px; line-height:1.6 }
    .qvh-progress { margin-top:1.5rem; display:flex; align-items:center; gap:1rem }
    .qvh-progress-bar { flex:1; height:3px; background:var(--border); border-radius:2px; overflow:hidden }
    .qvh-progress-fill { height:100%; border-radius:2px; transition:width 0.6s ease }
    .q1-view .qvh-progress-fill { background:var(--c1) } .q2-view .qvh-progress-fill { background:var(--c2) }
    .q3-view .qvh-progress-fill { background:var(--c3) } .q4-view .qvh-progress-fill { background:var(--c4) }
    .qvh-progress-label { font-size:0.6rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--ivory-30); white-space:nowrap }

    /* MILESTONE CARDS */
    .milestones-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1rem }
    .m-card { background:var(--bg-raised); border:1px solid var(--border); padding:1.5rem; position:relative; overflow:hidden; transition:all 0.25s }
    .m-card:hover { border-color:rgba(255,255,255,0.12); background:var(--bg-hover); transform:translateY(-2px) }
    .m-card.completed { opacity:0.5 }
    .m-card.completed .m-title { text-decoration:line-through; text-decoration-color:var(--ivory-30) }
    .m-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px }
    .q1-view .m-card::before { background:linear-gradient(to right,var(--c1),transparent) }
    .q2-view .m-card::before { background:linear-gradient(to right,var(--c2),transparent) }
    .q3-view .m-card::before { background:linear-gradient(to right,var(--c3),transparent) }
    .q4-view .m-card::before { background:linear-gradient(to right,var(--c4),transparent) }
    .m-card-top { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:0.8rem; gap:0.5rem }
    .m-left { display:flex; align-items:flex-start; gap:0.7rem; flex:1 }
    .m-check { width:18px; height:18px; border:1px solid var(--border); border-radius:3px; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px; transition:all 0.2s; font-size:0.6rem; cursor:pointer }
    .m-card.completed .m-check { background:var(--gold-dim); border-color:var(--gold); color:var(--gold) }
    .m-icon { font-size:1.1rem; flex-shrink:0; margin-top:1px }
    .m-title { font-family:'Playfair Display',serif; font-size:0.95rem; font-weight:600; line-height:1.35; cursor:pointer }
    .m-title:hover { color:var(--gold-lt) }
    .m-open-btn { font-size:0.6rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--ivory-30); border:1px solid var(--border); background:transparent; padding:0.2rem 0.6rem; cursor:pointer; font-family:'Jost',sans-serif; transition:all 0.2s; border-radius:2px; white-space:nowrap; flex-shrink:0 }
    .m-open-btn:hover { border-color:var(--gold); color:var(--gold) }
    .m-desc { font-size:0.78rem; color:var(--ivory-60); line-height:1.6; margin-bottom:1rem }
    .m-footer { display:flex; justify-content:space-between; align-items:center }
    .m-month { font-size:0.55rem; letter-spacing:0.3em; text-transform:uppercase; color:var(--ivory-30) }
    .m-status { font-size:0.55rem; letter-spacing:0.2em; text-transform:uppercase; padding:0.2rem 0.6rem; border-radius:20px }
    .m-status.pending { border:1px solid var(--border); color:var(--ivory-30) }
    .m-status.done { border:1px solid rgba(201,168,76,0.3); background:var(--gold-dim); color:var(--gold-lt) }

    /* MODAL */
    .modal-overlay { position:fixed; inset:0; background:rgba(4,6,12,0.88); z-index:500; display:flex; align-items:center; justify-content:center; padding:1.5rem; opacity:0; pointer-events:none; transition:opacity 0.3s; backdrop-filter:blur(6px) }
    .modal-overlay.open { opacity:1; pointer-events:all }
    .modal { background:var(--bg-raised); border:1px solid var(--border); max-width:740px; width:100%; max-height:88vh; display:flex; flex-direction:column; transform:translateY(20px); transition:transform 0.3s; position:relative }
    .modal-overlay.open .modal { transform:translateY(0) }
    .modal-header { padding:1.8rem 2rem 1.2rem; border-bottom:1px solid var(--border); position:relative; flex-shrink:0 }
    .modal-pillar-tag { font-size:0.55rem; letter-spacing:0.4em; text-transform:uppercase; font-weight:400; margin-bottom:0.6rem }
    .modal-title { font-family:'Playfair Display',serif; font-size:1.5rem; font-weight:700; line-height:1.2; margin-bottom:0.3rem }
    .modal-month { font-size:0.6rem; letter-spacing:0.25em; text-transform:uppercase; color:var(--ivory-30) }
    .modal-close { position:absolute; top:1.2rem; right:1.5rem; background:transparent; border:1px solid var(--border); color:var(--ivory-60); cursor:pointer; font-size:1rem; width:32px; height:32px; display:flex; align-items:center; justify-content:center; transition:all 0.2s; border-radius:2px }
    .modal-close:hover { border-color:var(--ivory-30); color:var(--ivory) }
    .modal-tabs { display:flex; border-bottom:1px solid var(--border); flex-shrink:0 }
    .modal-tab { padding:0.85rem 1.5rem; font-size:0.62rem; letter-spacing:0.25em; text-transform:uppercase; color:var(--ivory-30); cursor:pointer; transition:all 0.2s; border-bottom:2px solid transparent; font-weight:400; margin-bottom:-1px }
    .modal-tab:hover { color:var(--ivory-60) }
    .modal-tab.active { color:var(--ivory); border-bottom-color:var(--gold) }
    .modal-body { overflow-y:auto; flex:1; padding:2rem }
    .modal-body::-webkit-scrollbar { width:4px }
    .modal-body::-webkit-scrollbar-thumb { background:var(--border-gold) }
    .tab-panel { display:none }
    .tab-panel.active { display:block }

    /* Scripture tab */
    .scripture-panel { background:linear-gradient(135deg,rgba(201,168,76,0.06),transparent); border:1px solid var(--border-gold); padding:2.5rem; text-align:center; position:relative }
    .scripture-panel::before { content:'\201C'; position:absolute; top:-1rem; left:1.5rem; font-family:'Playfair Display',serif; font-size:6rem; color:var(--gold); opacity:0.15; line-height:1 }
    .scripture-verse { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.25rem; line-height:1.9; color:var(--ivory); margin-bottom:1.2rem }
    .scripture-ref { font-size:0.65rem; letter-spacing:0.4em; text-transform:uppercase; color:var(--gold); font-weight:400 }
    .scripture-translation { font-size:0.55rem; letter-spacing:0.3em; text-transform:uppercase; color:var(--ivory-30); margin-top:0.4rem }

    /* Devotional tab */
    .devotional-text p { font-family:'Cormorant Garamond',serif; font-size:1.08rem; line-height:1.9; color:var(--ivory-60); margin-bottom:1.4rem }
    .devotional-text p:last-child { margin-bottom:0 }

    /* Application tab */
    .application-list { list-style:none; display:flex; flex-direction:column; gap:0.8rem }
    .application-list li { display:flex; gap:1rem; align-items:flex-start; background:var(--bg-card); border:1px solid var(--border); padding:1.2rem }
    .app-num { font-family:'Playfair Display',serif; font-size:1.6rem; font-weight:700; color:var(--gold); opacity:0.45; line-height:1; flex-shrink:0; min-width:24px }
    .app-text { font-size:0.88rem; color:var(--ivory-60); line-height:1.7; padding-top:0.2rem }

    /* Reflection tab */
    .reflection-list { list-style:none; display:flex; flex-direction:column; gap:0.8rem }
    .reflection-list li { padding:1.2rem 1.4rem; border:1px solid var(--border); background:var(--bg-card); position:relative }
    .reflection-list li::after { content:'"'; position:absolute; bottom:0.5rem; right:1rem; font-family:'Playfair Display',serif; font-size:3rem; font-weight:700; color:var(--gold); opacity:0.08; line-height:1; pointer-events:none }
    .reflection-q { font-size:0.88rem; color:var(--ivory-60); line-height:1.7; font-style:italic; font-family:'Cormorant Garamond',serif; font-size:1rem }
    .reflection-answer { display:block; width:100%; box-sizing:border-box; margin-top:0.75rem; background:rgba(255,255,255,0.03); border:none; border-bottom:1px dashed rgba(255,255,255,0.15); color:var(--ivory); font-size:0.8rem; font-family:'Jost',sans-serif; line-height:1.75; padding:0.4rem 0.1rem 0.4rem; resize:none; outline:none; overflow:hidden; min-height:60px; transition:border-color 0.2s; position:relative; z-index:1 }
    .reflection-answer:focus { border-bottom-color:var(--gold) }
    .reflection-answer::placeholder { color:rgba(255,255,255,0.18); font-style:italic }
    .reflection-save-status { font-size:0.52rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--ivory-30); text-align:right; margin-top:0.25rem; min-height:0.9rem; transition:opacity 0.3s }

    /* Modal nav */
    .modal-nav { display:flex; justify-content:space-between; align-items:center; padding:1rem 2rem; border-top:1px solid var(--border); flex-shrink:0 }
    .modal-nav-btn { font-size:0.6rem; letter-spacing:0.2em; text-transform:uppercase; background:transparent; border:1px solid var(--border); color:var(--ivory-30); padding:0.45rem 1rem; cursor:pointer; font-family:'Jost',sans-serif; transition:all 0.2s; border-radius:2px }
    .modal-nav-btn:hover:not(:disabled) { border-color:var(--gold); color:var(--gold) }
    .modal-nav-btn:disabled { opacity:0.2; cursor:default }
    .modal-mark-btn { font-size:0.6rem; letter-spacing:0.2em; text-transform:uppercase; background:var(--gold-dim); border:1px solid var(--border-gold); color:var(--gold-lt); padding:0.45rem 1.2rem; cursor:pointer; font-family:'Jost',sans-serif; transition:all 0.2s; border-radius:2px }
    .modal-mark-btn:hover { background:rgba(201,168,76,0.2) }
    .modal-mark-btn.marked { background:var(--gold); color:var(--bg); border-color:var(--gold) }

    /* TIMELINE */
    .timeline-row { display:grid; grid-template-columns:80px 1fr; gap:0; margin-bottom:0.5rem }
    .tl-month-label { display:flex; align-items:center; justify-content:center; font-size:0.6rem; letter-spacing:0.25em; text-transform:uppercase; color:var(--ivory-30); background:var(--bg-raised); border:1px solid var(--border); border-right:none; font-weight:400 }
    .tl-events { border:1px solid var(--border); padding:0.6rem 1rem; display:flex; flex-wrap:wrap; gap:0.4rem; background:var(--bg-raised); min-height:48px; align-items:center }
    .tl-chip { font-size:0.62rem; padding:0.25rem 0.7rem; border-radius:20px; border:1px solid; cursor:pointer; transition:all 0.2s; font-weight:400 }
    .tl-chip.q1 { border-color:rgba(201,168,76,0.35); color:var(--c1); background:var(--c1d) }
    .tl-chip.q2 { border-color:rgba(111,163,164,0.35); color:var(--c2); background:var(--c2d) }
    .tl-chip.q3 { border-color:rgba(164,126,164,0.35); color:var(--c3); background:var(--c3d) }
    .tl-chip.q4 { border-color:rgba(164,137,111,0.35); color:var(--c4); background:var(--c4d) }
    .tl-chip:hover { opacity:0.75 }

    /* ── APP LOADER ── */
    .app-loader { position:fixed; inset:0; z-index:950; background:var(--bg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.6rem; transition:opacity 0.5s ease; pointer-events:all }
    .app-loader.fade-out { opacity:0; pointer-events:none }
    .app-loader.hidden { display:none }
    .loader-logo { width:92px; height:92px; border-radius:50%; border:1px solid var(--border-gold); object-fit:contain; animation:loaderPulse 2.2s ease infinite }
    .loader-text { font-size:0.58rem; letter-spacing:0.45em; text-transform:uppercase; color:var(--ivory-30); font-weight:400 }
    .loader-bar-wrap { width:160px; height:2px; background:var(--border); border-radius:2px; overflow:hidden }
    .loader-bar-fill { height:100%; width:30%; background:linear-gradient(to right,transparent,var(--gold),transparent); animation:loaderSlide 1.6s ease infinite }
    @keyframes loaderPulse { 0%,100%{opacity:0.65;transform:scale(1)} 50%{opacity:1;transform:scale(1.05)} }
    @keyframes loaderSlide { 0%{transform:translateX(-200%)} 100%{transform:translateX(600%)} }

    /* ── MILESTONE COMPLETION FLASH ── */
    @keyframes checkBounce { 0%{transform:scale(0.4);opacity:0} 55%{transform:scale(1.35)} 100%{transform:scale(1);opacity:1} }
    @keyframes cardGlow { 0%{box-shadow:0 0 0 0 rgba(201,168,76,0)} 35%{box-shadow:0 0 0 6px rgba(201,168,76,0.22)} 100%{box-shadow:0 0 0 0 rgba(201,168,76,0)} }
    .m-card.flash-complete { animation:cardGlow 0.7s ease forwards }
    .m-card.flash-complete .m-check { animation:checkBounce 0.35s cubic-bezier(0.34,1.56,0.64,1) forwards }

    /* ── PILLAR CELEBRATION MODAL ── */
    .celebrate-overlay { position:fixed; inset:0; z-index:600; background:rgba(4,6,12,0.92); display:none; align-items:center; justify-content:center; backdrop-filter:blur(8px); padding:1.5rem }
    .celebrate-overlay.open { display:flex }
    .celebrate-card { background:var(--bg-raised); border:1px solid var(--border-gold); max-width:480px; width:100%; padding:3rem 2.5rem; text-align:center; position:relative; animation:celebIn 0.42s cubic-bezier(0.34,1.56,0.64,1) }
    @keyframes celebIn { from{transform:scale(0.78);opacity:0} to{transform:scale(1);opacity:1} }
    .celebrate-icon { font-size:3.2rem; margin-bottom:0.8rem; display:block }
    .celebrate-tag { font-size:0.55rem; letter-spacing:0.42em; text-transform:uppercase; color:var(--gold); margin-bottom:0.7rem; font-weight:400 }
    .celebrate-title { font-family:'Playfair Display',serif; font-size:2rem; font-weight:700; margin-bottom:0.5rem }
    .celebrate-sub { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1rem; color:var(--ivory-60); line-height:1.75; margin-bottom:1.6rem }
    .celebrate-verse { background:var(--gold-dim); border:1px solid var(--border-gold); padding:1.2rem 1.5rem; margin-bottom:1.8rem; font-family:'Cormorant Garamond',serif; font-style:italic; font-size:0.98rem; color:var(--ivory); line-height:1.75; text-align:left; position:relative }
    .celebrate-verse::before { content:'\201C'; position:absolute; top:-0.5rem; left:1rem; font-size:3.5rem; font-family:'Playfair Display',serif; color:var(--gold); opacity:0.2; line-height:1 }
    .celebrate-btn { background:var(--gold); color:var(--bg); font-family:'Jost',sans-serif; font-size:0.7rem; font-weight:500; letter-spacing:0.22em; text-transform:uppercase; border:none; padding:0.88rem 3rem; cursor:pointer; border-radius:2px; transition:all 0.2s }
    .celebrate-btn:hover { background:var(--gold-lt) }
    /* Confetti */
    .confetti-wrap { position:fixed; inset:0; pointer-events:none; z-index:599; overflow:hidden }
    .cp { position:absolute; top:-12px; width:9px; height:9px; border-radius:2px; animation:cpFall linear forwards }
    @keyframes cpFall { 0%{opacity:1;transform:translateY(0) rotate(0deg)} 100%{opacity:0;transform:translateY(105vh) rotate(800deg)} }

    /* ── NEXT STEP CARD ── */
    .journey-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.8rem; margin-bottom:1.5rem }
    @media(max-width:680px){ .journey-grid { grid-template-columns:1fr } }
    .next-step-card { border:1px solid var(--border-gold); padding:1.2rem 1.5rem; display:flex; align-items:center; gap:1.2rem; cursor:pointer; transition:all 0.3s; position:relative; overflow:hidden; background:var(--bg-raised) }
    .next-step-card::before { content:''; position:absolute; top:0; left:0; bottom:0; width:3px; background:var(--gold) }
    .next-step-card:hover { transform:translateY(-2px) }
    .next-step-card:hover .ns-arrow { transform:translate(3px,-3px) }
    .ns-icon { font-size:1.7rem; flex-shrink:0 }
    .ns-body { flex:1; min-width:0 }
    .ns-eyebrow { font-size:0.52rem; letter-spacing:0.35em; text-transform:uppercase; color:var(--gold); font-weight:400; margin-bottom:0.3rem }
    .ns-title { font-family:'Playfair Display',serif; font-size:0.95rem; font-weight:700; margin-bottom:0.2rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
    .ns-meta { font-size:0.58rem; color:var(--ivory-30); letter-spacing:0.1em }
    .ns-arrow { font-size:1rem; color:var(--gold); flex-shrink:0; transition:transform 0.25s }
    /* Per-pillar accent colors */
    .nsc-p1 { background:linear-gradient(120deg,var(--c1d),var(--bg-raised) 65%); border-color:rgba(201,168,76,0.35) }
    .nsc-p1::before { background:var(--c1) } .nsc-p1 .ns-eyebrow { color:var(--c1) } .nsc-p1 .ns-arrow { color:var(--c1) }
    .nsc-p1:hover { border-color:var(--c1) }
    .nsc-p2 { background:linear-gradient(120deg,var(--c2d),var(--bg-raised) 65%); border-color:rgba(111,163,164,0.35) }
    .nsc-p2::before { background:var(--c2) } .nsc-p2 .ns-eyebrow { color:var(--c2) } .nsc-p2 .ns-arrow { color:var(--c2) }
    .nsc-p2:hover { border-color:var(--c2) }
    .nsc-p3 { background:linear-gradient(120deg,var(--c3d),var(--bg-raised) 65%); border-color:rgba(164,126,164,0.35) }
    .nsc-p3::before { background:var(--c3) } .nsc-p3 .ns-eyebrow { color:var(--c3) } .nsc-p3 .ns-arrow { color:var(--c3) }
    .nsc-p3:hover { border-color:var(--c3) }
    .nsc-p4 { background:linear-gradient(120deg,var(--c4d),var(--bg-raised) 65%); border-color:rgba(164,137,111,0.35) }
    .nsc-p4::before { background:var(--c4) } .nsc-p4 .ns-eyebrow { color:var(--c4) } .nsc-p4 .ns-arrow { color:var(--c4) }
    .nsc-p4:hover { border-color:var(--c4) }
    /* State overrides */
    .next-step-card.ns-done::before { background:#32aa5a }
    .next-step-card.ns-done:hover { transform:none }
    .next-step-card.ns-locked { opacity:0.5; cursor:not-allowed }
    .next-step-card.ns-locked::before { background:rgba(255,255,255,0.15) }
    .next-step-card.ns-locked:hover { transform:none }

    /* ── WELCOME MODAL ── */
    .welcome-overlay { position:fixed; inset:0; z-index:560; background:rgba(4,6,12,0.88); display:none; align-items:center; justify-content:center; backdrop-filter:blur(6px); padding:1.5rem }
    .welcome-overlay.open { display:flex }
    .welcome-card { background:var(--bg-raised); border:1px solid var(--border-gold); max-width:500px; width:100%; padding:2.8rem 2.5rem 2.2rem; animation:celebIn 0.4s cubic-bezier(0.34,1.56,0.64,1) }
    .welcome-steps { display:flex; flex-direction:column; gap:1rem; margin:1.6rem 0 2rem }
    .welcome-step { display:flex; gap:1rem; align-items:flex-start }
    .ws-num { width:28px; height:28px; border-radius:50%; background:var(--gold-dim); border:1px solid var(--border-gold); display:flex; align-items:center; justify-content:center; font-family:'Playfair Display',serif; font-size:0.9rem; font-weight:700; color:var(--gold); flex-shrink:0; margin-top:1px }
    .ws-text { font-size:0.82rem; color:var(--ivory-60); line-height:1.65 }
    .ws-text strong { color:var(--ivory); font-weight:500 }

    /* ── AUTH OVERLAY ── */
    .auth-overlay { position:fixed; inset:0; z-index:800; background:var(--bg); display:flex; align-items:center; justify-content:center; padding:1.5rem }
    .auth-card { background:var(--bg-raised); border:1px solid var(--border-gold); width:100%; max-width:420px; padding:2.5rem 2.5rem 2rem; position:relative }
    .auth-logo { display:flex; align-items:center; gap:0.8rem; justify-content:center; margin-bottom:2rem }
    .auth-logo img { width:72px; height:72px; object-fit:contain; border-radius:50%; border:1px solid var(--border-gold) }
    .auth-logo-text .kmc-word { font-family:'Playfair Display',serif; font-size:1rem; font-weight:700; letter-spacing:0.05em }
    .auth-logo-text .kmc-word span { color:var(--gold) }
    .auth-logo-text .kmc-sub { font-size:0.55rem; letter-spacing:0.25em; text-transform:uppercase; color:var(--ivory-30); font-weight:400; margin-top:0.2rem }
    .auth-tabs { display:flex; border-bottom:1px solid var(--border); margin-bottom:2rem }
    .auth-tab { flex:1; text-align:center; padding:0.75rem; font-size:0.6rem; letter-spacing:0.25em; text-transform:uppercase; cursor:pointer; color:var(--ivory-30); border-bottom:2px solid transparent; margin-bottom:-1px; transition:all 0.2s }
    .auth-tab.active { color:var(--ivory); border-bottom-color:var(--gold) }
    .auth-tab:hover:not(.active) { color:var(--ivory-60) }
    .auth-heading { font-family:'Playfair Display',serif; font-size:1.55rem; font-weight:700; margin-bottom:0.4rem }
    .auth-sub { font-size:0.75rem; color:var(--ivory-60); margin-bottom:1.8rem; line-height:1.6; font-family:'Cormorant Garamond',serif; font-style:italic }
    .auth-field { margin-bottom:1.1rem }
    .auth-label { display:block; font-size:0.56rem; letter-spacing:0.25em; text-transform:uppercase; color:var(--ivory-30); margin-bottom:0.45rem; font-weight:400 }
    .auth-input { width:100%; background:var(--bg-card); border:1px solid var(--border); color:var(--ivory); font-family:'Jost',sans-serif; font-size:0.88rem; padding:0.72rem 1rem; outline:none; transition:border-color 0.2s; border-radius:2px; -webkit-appearance:none }
    .auth-input:focus { border-color:var(--border-gold) }
    .auth-input::placeholder { color:var(--ivory-30) }
    .auth-btn { width:100%; background:var(--gold); color:var(--bg); font-family:'Jost',sans-serif; font-size:0.7rem; font-weight:500; letter-spacing:0.22em; text-transform:uppercase; border:none; padding:0.88rem; cursor:pointer; transition:all 0.2s; border-radius:2px; margin-top:0.6rem }
    .auth-btn:hover:not(:disabled) { background:var(--gold-lt) }
    .auth-btn:disabled { opacity:0.5; cursor:not-allowed }
    .auth-error { font-size:0.7rem; margin-top:0.9rem; text-align:center; min-height:1.1em; line-height:1.5 }
    .auth-error.err { color:#d23737 }
    .auth-error.ok  { color:#32aa5a }
    .auth-footer { text-align:center; margin-top:1.4rem; font-size:0.62rem; color:var(--ivory-30) }
    .auth-footer a { color:var(--gold); cursor:pointer; text-decoration:none; transition:color 0.2s }
    .auth-footer a:hover { color:var(--gold-lt) }
    /* User info in topbar */
    .topbar-user { display:none; align-items:center; gap:0.6rem }
    .topbar-user-avatar { width:26px; height:26px; border-radius:50%; background:var(--gold-dim); border:1px solid var(--border-gold); display:flex; align-items:center; justify-content:center; font-size:0.68rem; color:var(--gold); font-weight:600; flex-shrink:0; text-transform:uppercase }
    .topbar-user-name { font-size:0.62rem; font-weight:400; color:var(--ivory-60); letter-spacing:0.05em; max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
    .signout-btn { font-size:0.55rem; letter-spacing:0.18em; text-transform:uppercase; padding:0.28rem 0.75rem; border:1px solid var(--border); background:transparent; color:var(--ivory-30); cursor:pointer; transition:all 0.2s; font-family:'Jost',sans-serif; border-radius:2px }
    .user-role-badge { display:inline-flex; align-items:center; font-size:0.5rem; letter-spacing:0.18em; text-transform:uppercase; font-weight:600; padding:0.18rem 0.55rem; border-radius:20px; border:1px solid; white-space:nowrap; flex-shrink:0 }
    .user-role-badge.admin  { color:#c9a84c; border-color:rgba(201,168,76,0.5); background:rgba(201,168,76,0.1) }
    .user-role-badge.mentor { color:#6fa3a4; border-color:rgba(111,163,164,0.5); background:rgba(111,163,164,0.1) }
    .user-role-badge.member { color:#a47ea4; border-color:rgba(164,126,164,0.5); background:rgba(164,126,164,0.1) }
    .signout-btn:hover { border-color:rgba(210,55,55,0.5); color:#d23737 }

    /* MOBILE */
    .mobile-toggle { display:none; position:fixed; bottom:1.5rem; right:1.5rem; width:48px; height:48px; background:var(--gold); color:var(--bg); border:none; border-radius:50%; cursor:pointer; z-index:300; font-size:1.2rem; align-items:center; justify-content:center }
    @media(max-width:900px) {
      :root { --sidebar-w:0px }
      .sidebar { transform:translateX(-260px); width:260px; transition:transform 0.3s }
      .sidebar.open { transform:translateX(0) }
      .main { margin-left:0 } .topbar { left:0 }
      .mobile-toggle { display:flex }
      .stats-row { grid-template-columns:repeat(2,1fr) }
      .content { padding:1.5rem 1rem 4rem }
      .modal-tabs .modal-tab { padding:0.8rem 0.8rem; font-size:0.55rem }
      .modal-body { padding:1.2rem }
    }

    /* ── RBAC / ROLE-GATED STYLES ── */
    .role-only { display:none }
    .admin-only { display:none }
    .mentor-only { display:none }

    /* Admin Panel */
    .admin-tabs { display:flex; gap:0; border-bottom:1px solid var(--border); margin-bottom:1.5rem }
    .admin-tab { padding:0.6rem 1.4rem; font-size:0.6rem; letter-spacing:0.25em; text-transform:uppercase; color:var(--ivory-30); cursor:pointer; border-bottom:2px solid transparent; transition:all 0.2s }
    .admin-tab.active { color:var(--gold); border-bottom-color:var(--gold) }
    .admin-tab-panel { display:none }
    .admin-tab-panel.active { display:block }

    .admin-table { width:100%; border-collapse:collapse; font-size:0.72rem }
    .admin-table th { text-align:left; padding:0.6rem 0.8rem; font-size:0.55rem; letter-spacing:0.25em; text-transform:uppercase; color:var(--ivory-30); border-bottom:1px solid var(--border); font-weight:400 }
    .admin-table td { padding:0.7rem 0.8rem; border-bottom:1px solid rgba(255,255,255,0.04); color:var(--ivory-60); vertical-align:middle }
    .admin-table tr:hover td { background:var(--bg-hover) }
    .role-select { background:var(--bg-card); border:1px solid var(--border); color:var(--ivory); font-size:0.65rem; padding:0.2rem 0.5rem; border-radius:3px; cursor:pointer }
    .assign-btn, .save-role-btn { background:var(--gold-dim); border:1px solid var(--border-gold); color:var(--gold); font-size:0.55rem; letter-spacing:0.2em; text-transform:uppercase; padding:0.25rem 0.7rem; border-radius:3px; cursor:pointer; transition:background 0.2s }
    .assign-btn:hover, .save-role-btn:hover { background:rgba(201,168,76,0.2) }
    .admin-search { background:var(--bg-card); border:1px solid var(--border); color:var(--ivory); font-size:0.72rem; padding:0.5rem 0.9rem; border-radius:4px; width:100%; margin-bottom:1rem; outline:none }
    .admin-search:focus { border-color:var(--border-gold) }
    .admin-section-head { font-size:0.58rem; letter-spacing:0.35em; text-transform:uppercase; color:var(--ivory-30); margin-bottom:1rem; padding-bottom:0.5rem; border-bottom:1px solid var(--border) }
    .progress-member-row { background:var(--bg-card); border:1px solid var(--border); padding:1rem 1.2rem; margin-bottom:0.6rem; border-radius:4px }
    .pmr-name { font-size:0.8rem; color:var(--ivory); font-weight:500; margin-bottom:0.5rem }
    .pmr-pillars { display:grid; grid-template-columns:repeat(4,1fr); gap:0.5rem }
    .pmr-pillar { text-align:center; font-size:0.58rem; color:var(--ivory-30) }
    .pmr-pillar strong { display:block; font-size:0.85rem; color:var(--ivory); font-weight:600; margin-bottom:0.15rem }
    .pmr-bar { height:3px; background:var(--bg-hover); border-radius:2px; margin-top:0.3rem }
    .pmr-bar-fill { height:3px; border-radius:2px; transition:width 0.5s }
    .content-editor-grid { display:grid; gap:0.6rem }
    .ce-card { background:var(--bg-card); border:1px solid var(--border); padding:0.9rem 1.1rem; border-radius:4px; cursor:pointer; transition:border-color 0.2s }
    .ce-card:hover { border-color:var(--border-gold) }
    .ce-card-title { font-size:0.78rem; color:var(--ivory); font-weight:500 }
    .ce-card-meta { font-size:0.6rem; color:var(--ivory-30); margin-top:0.2rem }
    .ce-edit-btn { float:right; background:var(--gold-dim); border:1px solid var(--border-gold); color:var(--gold); font-size:0.52rem; letter-spacing:0.2em; text-transform:uppercase; padding:0.2rem 0.6rem; border-radius:3px; cursor:pointer }
    .ce-pillar-label { font-size:0.58rem; letter-spacing:0.3em; text-transform:uppercase; color:var(--gold); margin:1rem 0 0.5rem; padding-bottom:0.3rem; border-bottom:1px solid var(--border-gold) }
    .ce-add-btn { display:block; width:100%; margin-top:0.7rem; background:transparent; border:1px dashed rgba(255,255,255,0.15); color:var(--ivory-30); font-size:0.58rem; letter-spacing:0.25em; text-transform:uppercase; padding:0.5rem 1rem; border-radius:3px; cursor:pointer; text-align:center; transition:all 0.2s }
    .ce-add-btn:hover { border-color:var(--border-gold); color:var(--gold); background:var(--gold-dim) }
    .field-label { font-size:0.55rem; letter-spacing:0.25em; text-transform:uppercase; color:var(--ivory-30); margin-bottom:0.3rem; margin-top:0.8rem }
    .field-input, .field-textarea { width:100%; background:var(--bg-card); border:1px solid var(--border); color:var(--ivory); font-size:0.72rem; padding:0.5rem 0.8rem; border-radius:3px; outline:none; font-family:inherit; resize:vertical }
    .field-textarea { min-height:80px; line-height:1.6 }
    .field-input:focus, .field-textarea:focus { border-color:var(--border-gold) }
    .save-content-btn { margin-top:1rem; background:var(--gold-dim); border:1px solid var(--border-gold); color:var(--gold); font-size:0.6rem; letter-spacing:0.25em; text-transform:uppercase; padding:0.5rem 1.5rem; border-radius:3px; cursor:pointer; transition:background 0.2s }
    .save-content-btn:hover { background:rgba(201,168,76,0.25) }
    .admin-add-user-btn { background:var(--gold-dim); border:1px solid var(--border-gold); color:var(--gold); font-size:0.6rem; letter-spacing:0.2em; text-transform:uppercase; padding:0.4rem 1rem; border-radius:3px; cursor:pointer; margin-bottom:1rem }

    /* Mentor Panel */
    .mentor-connect-form { background:var(--bg-card); border:1px solid var(--border); padding:1.2rem; border-radius:4px; margin-bottom:1.5rem }
    .mentor-connect-form p { font-size:0.72rem; color:var(--ivory-60); margin-bottom:0.8rem; line-height:1.6 }
    .mentee-email-input { width:100%; background:var(--bg); border:1px solid var(--border); color:var(--ivory); font-size:0.75rem; padding:0.5rem 0.9rem; border-radius:3px; outline:none; font-family:inherit; margin-bottom:0.7rem }
    .mentee-email-input:focus { border-color:var(--border-gold) }
    .connect-mentee-btn { background:var(--gold-dim); border:1px solid var(--border-gold); color:var(--gold); font-size:0.6rem; letter-spacing:0.25em; text-transform:uppercase; padding:0.45rem 1.2rem; border-radius:3px; cursor:pointer }
    .mentee-card { background:var(--bg-card); border:1px solid var(--border); padding:1rem 1.2rem; border-radius:4px; margin-bottom:0.6rem }
    .mentee-card-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:0.8rem }
    .mentee-name { font-size:0.85rem; color:var(--ivory); font-weight:500 }
    .mentee-email-label { font-size:0.6rem; color:var(--ivory-30) }
    .view-mentee-btn { background:var(--gold-dim); border:1px solid var(--border-gold); color:var(--gold); font-size:0.55rem; letter-spacing:0.2em; text-transform:uppercase; padding:0.25rem 0.7rem; border-radius:3px; cursor:pointer }
    .mentee-pillars { display:grid; grid-template-columns:repeat(4,1fr); gap:0.5rem }
    .mentee-pillar-mini { text-align:center; padding:0.5rem; background:var(--bg); border-radius:3px; border:1px solid var(--border) }
    .mpm-label { font-size:0.52rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--ivory-30); margin-bottom:0.3rem }
    .mpm-count { font-size:0.9rem; font-weight:600; color:var(--ivory) }

    /* Member pillar visibility */
    .nav-item.pillar-hidden { display:none !important }
    .pillar-overview-card.pillar-hidden { display:none !important }

    /* Content Edit Modal */
    .content-edit-overlay { position:fixed; inset:0; z-index:900; background:rgba(0,0,0,0.85); display:flex; align-items:center; justify-content:center; padding:1.5rem }
    .content-edit-panel { background:var(--bg-raised); border:1px solid var(--border-gold); width:100%; max-width:680px; max-height:90vh; overflow-y:auto; border-radius:6px; padding:2rem }
    .cep-title { font-family:'Playfair Display',serif; font-size:1.2rem; color:var(--gold); margin-bottom:0.3rem }
    .cep-close { float:right; background:none; border:none; color:var(--ivory-30); font-size:1.2rem; cursor:pointer; margin-top:-0.3rem }

    /* ── KPI DASHBOARD ── */
    .kpi-section { margin-top:2rem }
    .kpi-head { display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap }
    .kpi-sub { font-size:0.58rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--ivory-30) }
    .kpi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:1rem }
    @media(max-width:900px){ .kpi-grid { grid-template-columns:1fr } }
    .kpi-card { background:var(--bg-card); border:1px solid var(--border); border-radius:6px; padding:1.25rem 1.5rem }
    .kpi-card-label { font-size:0.52rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--ivory-30); margin-bottom:1rem }
    /* Bar chart */
    .kpi-bar-row { display:flex; align-items:center; gap:0.75rem; margin-bottom:0.75rem }
    .kpi-bar-label { font-size:0.65rem; color:var(--ivory-60); width:70px; flex-shrink:0 }
    .kpi-bar-track { flex:1; height:8px; background:rgba(255,255,255,0.07); border-radius:4px; overflow:hidden }
    .kpi-bar-fill { height:100%; border-radius:4px; transition:width 0.6s ease }
    .kpi-bar-pct { font-size:0.6rem; color:var(--ivory-30); width:32px; text-align:right; flex-shrink:0 }
    .kpi-bar-fill.p1 { background:var(--c1) }
    .kpi-bar-fill.p2 { background:var(--c2) }
    .kpi-bar-fill.p3 { background:var(--c3) }
    .kpi-bar-fill.p4 { background:var(--c4) }
    /* Gauge */
    .kpi-gauge { display:flex; flex-direction:column; align-items:center; justify-content:center }
    .kpi-gauge-pct { font-size:1.6rem; font-family:'Playfair Display',serif; color:var(--gold); margin-top:-0.4rem; line-height:1 }
    .kpi-gauge-sub { font-size:0.52rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--ivory-30); margin-top:0.3rem }
    /* Donut */
    .kpi-donut { display:flex; flex-direction:column; align-items:center; justify-content:center }
    .kpi-donut-wrap { position:relative; display:inline-block }
    .kpi-donut-center { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; pointer-events:none }
    .kpi-donut-num { font-size:1.2rem; font-family:'Playfair Display',serif; color:var(--gold); line-height:1 }
    .kpi-donut-denom { font-size:0.52rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--ivory-30); margin-top:0.1rem }
    .kpi-donut-legend { display:flex; gap:1rem; margin-top:0.75rem; flex-wrap:wrap; justify-content:center }
    .kpi-donut-legend-item { display:flex; align-items:center; gap:0.35rem; font-size:0.6rem; color:var(--ivory-60) }
    /* Gantt */
    .kpi-gantt-card { margin-bottom:1.5rem }
    .kpi-gantt-legend { font-size:0.48rem; letter-spacing:0.1em; color:var(--ivory-30); display:inline-flex; align-items:center; gap:0.5rem; margin-left:0.75rem; flex-wrap:wrap }
    .kpi-dot { display:inline-block; width:7px; height:7px; border-radius:50%; vertical-align:middle; margin-right:2px }
    .kpi-dot.red { background:#d23737 }
    .kpi-dot.yellow { background:#d2aa23 }
    .kpi-dot.green { background:#32aa5a }
    .kpi-dot.gold { background:var(--gold) }
    .kpi-dot.ns { background:#9467bd }
    .kpi-gantt { overflow-x:auto }
    .kpi-gantt-inner { min-width:480px }
    .kpi-gantt-header { display:flex; align-items:flex-end; margin-bottom:0.5rem; gap:0.5rem }
    .kpi-gantt-name-col { width:82px; flex-shrink:0; font-size:0.5rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--ivory-30) }
    .kpi-gantt-timeline-col { flex:1; position:relative; min-height:18px }
    .kpi-gantt-row { display:flex; align-items:center; gap:0.5rem; margin-bottom:0.55rem }
    .kpi-gantt-row-name { width:82px; flex-shrink:0; font-size:0.65rem; color:var(--ivory-60) }
    .kpi-gantt-row-track { flex:1; height:20px; background:rgba(255,255,255,0.04); border-radius:3px; position:relative; overflow:visible }
    .kpi-gantt-bar { position:absolute; top:2px; bottom:2px; border-radius:2px; min-width:4px; overflow:hidden }
    .kpi-gantt-bar.red { background:rgba(210,55,55,0.65); border:1px solid #d23737 }
    .kpi-gantt-bar.yellow { background:rgba(210,170,35,0.65); border:1px solid #d2aa23 }
    .kpi-gantt-bar.green { background:rgba(50,170,90,0.65); border:1px solid #32aa5a }
    .kpi-gantt-bar.gold { background:rgba(201,168,76,0.65); border:1px solid var(--gold) }
    .kpi-gantt-bar.ns { background:rgba(148,103,189,0.25); border:1px dashed rgba(148,103,189,0.5) }
    .kpi-gantt-progress { height:100%; background:rgba(255,255,255,0.18); border-radius:1px }
    .kpi-gantt-bar-label { position:absolute; right:5px; top:50%; transform:translateY(-50%); font-size:0.5rem; color:rgba(255,255,255,0.75); white-space:nowrap; z-index:2 }
    .kpi-gantt-today-line { position:absolute; top:-3px; bottom:-3px; width:2px; background:rgba(255,255,255,0.35); z-index:5; border-radius:1px }
    .kpi-gantt-today-tip { position:absolute; top:-12px; left:50%; transform:translateX(-50%); font-size:0.45rem; color:rgba(255,255,255,0.45); white-space:nowrap; letter-spacing:0.08em }