﻿/* SPQL Master Styles */
/* Generated: 2026-03-02T21:51:21.853Z */
/* Phase 3: CSS Consolidation — Chronology Rule applied */
/* All 26 CSS variables merged from highest-priority batch */

/* ========== SELF-HOSTED FONTS — Stage 6 CSP Hardening (S6-CSP-002) ========== */
/* Cormorant Garamond — replaces https://fonts.googleapis.com */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-v21-latin_latin-ext-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-v21-latin_latin-ext-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-v21-latin_latin-ext-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-v21-latin_latin-ext-500italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-v21-latin_latin-ext-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-v21-latin_latin-ext-600italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-v21-latin_latin-ext-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-v21-latin_latin-ext-700italic.woff2') format('woff2');
}
/* Jost — self-hosted (was undefined/system fallback; now explicitly self-hosted) */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/jost-v20-latin_latin-ext-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/jost-v20-latin_latin-ext-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/jost-v20-latin_latin-ext-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/jost-v20-latin_latin-ext-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/jost-v20-latin_latin-ext-700.woff2') format('woff2');
}

/* ========== CSS VARIABLES ========== */
:root {
  --bg: #07090F;
  --surface: #0E1220;
  --surface2: #161C2E;
  --surface3: #1C2438;
  --gold: #C9973A;
  --gold-light: #E8B85A;
  --gold-dim: #7A5A20;
  --gold-faint: rgba(201,151,58,0.08);
  --crimson: #7A1A2E;
  --crimson-light: #9B2340;
  --crimson-dim: #4A0E1C;
  --crimson-faint: rgba(122,26,46,0.12);
  --steel: #4A6FA5;
  --text: #F0EDE6;
  --text-muted: #8A9BB0;
  --text-dim: #4A5568;
  --success: #3A7D44;
  --warn: #D4821A;
  --danger: #9B2335;
  --border: rgba(201,151,58,0.15);
  --border2: rgba(201,151,58,0.28);
  --border-crimson: rgba(122,26,46,0.35);
  --sidebar: 232px;
  --topbar: 54px;
  --portal-nav: 44px;
  --warning: #E8B85A;
}

/* ========== BASE STYLES ========== */
*, *::before, *::after { box-sizing: border-box; }

html,body{height:100%;}

body{background:var(--bg);color:var(--text);font-family:'Jost',sans-serif;font-weight:300;min-height:100vh;padding:20px;}

a{color:inherit;text-decoration:none;}

button{font-family:'Jost',sans-serif;}

textarea.f-input{resize:vertical;min-height:100px;font-family:inherit;line-height:1.6}

html{scroll-behavior:smooth;}

/* ========== COMPONENT STYLES ========== */

/* [BATCH-B] */
.serif{font-family:'Cormorant Garamond',serif;}

.fade-in{animation:fadeIn .35s ease;}

.fade-up{animation:fadeUp .4s ease;}

.slide-left{animation:slideLeft .35s ease;}

#portal-nav{
  position:fixed;top:0;left:0;right:0;height:var(--portal-nav);
  background:#08090E;
  border-bottom:1px solid rgba(122,26,46,0.45);
  display:flex;align-items:center;z-index:1000;
  padding:0 16px;gap:0;
  box-shadow:0 1px 12px rgba(0,0,0,.4);
}

.pn-logo{display:flex;align-items:center;gap:9px;padding-right:16px;border-right:1px solid var(--border);margin-right:0;cursor:pointer;flex-shrink:0;transition:opacity .2s;}

.pn-logo:hover{opacity:.8;}

.pn-logo-text-wrap{line-height:1.3;}

.pn-logo-text{font-family:'Cormorant Garamond',serif;font-size:13px;font-weight:500;letter-spacing:.08em;color:var(--text);white-space:nowrap;}

.pn-logo-spql{font-size:8px;letter-spacing:.3em;text-transform:uppercase;color:var(--crimson-light);font-weight:500;}

.pn-breadcrumb{display:flex;align-items:center;gap:0;flex:1;padding:0 4px;overflow:hidden;}

.pn-crumb{display:flex;align-items:center;gap:0;position:relative;}

.pn-crumb-btn{display:flex;align-items:center;gap:5px;padding:0 14px;height:var(--portal-nav);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);cursor:pointer;border-bottom:2px solid transparent;transition:all .2s;white-space:nowrap;font-family:'Jost',sans-serif;background:none;border-top:none;border-left:none;border-right:none;}

.pn-crumb-btn:hover{color:var(--text-muted);background:rgba(255,255,255,0.025);}

.pn-crumb-btn.active{color:var(--gold);border-bottom-color:var(--gold);}

.pn-crumb-btn.active-crimson{color:var(--crimson-light);border-bottom-color:var(--crimson-light);}

.pn-crumb-btn .caret{font-size:8px;opacity:.5;margin-left:2px;transition:transform .2s;}

.pn-crumb-btn:hover .caret,.pn-crumb.open .caret{transform:rotate(180deg);}

.pn-crumb-sep{color:var(--text-dim);font-size:11px;padding:0 2px;opacity:.4;flex-shrink:0;}

.pn-dropdown-menu{
  position:fixed;top:var(--portal-nav);z-index:999;
  background:#0C0E18;border:1px solid var(--border);
  min-width:220px;box-shadow:0 8px 32px rgba(0,0,0,.5);
  animation:fadeUp .18s ease;
}

.pn-dd-section{padding:6px 0;border-bottom:1px solid var(--border);}

.pn-dd-section:last-child{border-bottom:none;}

.pn-dd-label{font-size:9px;letter-spacing:.25em;text-transform:uppercase;color:var(--text-dim);padding:6px 16px 3px;font-weight:500;}

.pn-dd-item{display:flex;align-items:center;gap:9px;padding:8px 16px;cursor:pointer;transition:background .15s;font-size:12.5px;color:var(--text-muted);}

.pn-dd-item:hover{background:var(--gold-faint);color:var(--text);}

.pn-dd-item.active{color:var(--gold);}

.pn-dd-item .dd-icon{font-size:12px;width:15px;text-align:center;opacity:.7;}

.pn-dd-item .dd-badge{margin-left:auto;font-size:9px;padding:1px 5px;border-radius:8px;font-weight:600;}

.pn-dd-item .dd-badge.red{background:var(--danger);color:#fff;}

.pn-dd-item .dd-badge.gold{background:var(--gold);color:#07090F;}

.pn-right{margin-left:auto;display:flex;align-items:center;gap:8px;padding-left:12px;border-left:1px solid var(--border);flex-shrink:0;}

.pn-user{display:flex;align-items:center;gap:7px;cursor:pointer;padding:5px 8px;transition:background .2s;}

.pn-user:hover{background:var(--gold-faint);}

.pn-av{width:22px;height:22px;background:var(--crimson-faint);border:1px solid var(--border-crimson);display:flex;align-items:center;justify-content:center;font-family:'Cormorant Garamond',serif;font-size:10px;color:var(--crimson-light);}

.pn-username{font-size:11px;color:var(--text-muted);}

.pn-sep{width:1px;height:18px;background:var(--border);}

.pn-lang{display:flex;border:1px solid var(--border);overflow:hidden;}

.pn-lang button{background:none;border:none;color:var(--text-dim);padding:3px 8px;font-size:10px;cursor:pointer;font-family:'Jost',sans-serif;transition:all .2s;}

.pn-lang button.active{background:var(--gold-faint);color:var(--gold);}

.pn-notif-btn{background:none;border:1px solid var(--border);color:var(--text-muted);width:30px;height:30px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;transition:all .2s;position:relative;}

.pn-notif-btn:hover{border-color:var(--gold-dim);color:var(--gold);}

.pn-notif-dot{position:absolute;top:4px;right:4px;width:6px;height:6px;background:var(--danger);border-radius:50%;border:1px solid #08090E;}

.screen{display:none;height:100vh;width:100vw;margin-top:var(--portal-nav);height:calc(100vh - var(--portal-nav));}

.screen.has-nav{height:calc(100vh - var(--portal-nav));margin-top:var(--portal-nav);}

.screen.active{display:flex;}

#screen-login{background:var(--bg);flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;}

.login-bg{position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 50% 35%,rgba(122,26,46,0.15) 0%,rgba(201,151,58,0.05) 40%,transparent 70%);pointer-events:none;}

.login-bg-lines{position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,transparent,transparent 39px,rgba(201,151,58,0.03) 40px),repeating-linear-gradient(90deg,transparent,transparent 39px,rgba(201,151,58,0.03) 40px);pointer-events:none;}

.login-box{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;width:100%;max-width:400px;padding:0 24px;}

.login-logo{margin-bottom:28px;animation:fadeUp .6s ease;}

.login-wordmark{text-align:center;margin-bottom:36px;animation:fadeUp .6s .1s ease both;}

.login-wordmark-main{font-family:'Cormorant Garamond',serif;font-size:32px;font-weight:300;letter-spacing:.25em;text-transform:uppercase;color:var(--text);line-height:1.1;}

.login-wordmark-sub{font-size:10px;letter-spacing:.45em;text-transform:uppercase;color:var(--crimson-light);margin-top:6px;font-weight:500;}

.login-form{width:100%;animation:fadeUp .6s .2s ease both;}

.login-field{margin-bottom:14px;}

.login-label{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted);margin-bottom:7px;font-weight:500;}

.login-input{width:100%;background:var(--surface);border:1px solid var(--border);color:var(--text);padding:12px 16px;font-family:'Jost',sans-serif;font-size:14px;font-weight:300;outline:none;transition:border-color .2s;}

.login-input:focus{border-color:var(--gold-dim);}

.login-input::placeholder{color:var(--text-dim);}

.login-btn{width:100%;background:var(--crimson);border:1px solid var(--crimson-light);color:var(--text);padding:14px;font-family:'Jost',sans-serif;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:background .2s;margin-top:6px;}

.login-btn:hover{background:var(--crimson-light);}

.login-divider{display:flex;align-items:center;gap:14px;margin:20px 0;}

.login-divider::before,.login-divider::after{content:'';flex:1;height:1px;background:var(--border);}

.login-divider span{font-size:10px;letter-spacing:.15em;color:var(--text-dim);}

.login-roles{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;}

.role-btn{background:var(--surface);border:1px solid var(--border);color:var(--text-muted);padding:12px 8px;cursor:pointer;transition:all .2s;font-size:11px;letter-spacing:.06em;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;}

.role-btn:hover{border-color:var(--border2);color:var(--text);background:var(--gold-faint);}

.role-btn .rb-icon{font-size:18px;}

.role-btn .rb-label{font-size:10px;color:var(--text-dim);}

.login-footer{margin-top:28px;text-align:center;font-size:11px;color:var(--text-dim);animation:fadeUp .6s .3s ease both;}

.login-footer a{color:var(--gold);cursor:pointer;}

.login-footer a:hover{color:var(--gold-light);}

.login-error{color:var(--danger);font-size:12px;margin-top:8px;display:none;}

#screen-app{flex-direction:row;}

::-webkit-scrollbar{width:3px;height:3px;}

::-webkit-scrollbar-track{background:transparent;}

::-webkit-scrollbar-thumb{background:var(--surface3);border-radius:2px;}

::-webkit-scrollbar-thumb:hover{background:var(--gold-dim);}

.sb-logo{padding:18px 18px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:11px;cursor:pointer;transition:background .2s;flex-shrink:0;}

.sb-logo:hover{background:var(--gold-faint);}

.sb-logo-text{font-family:'Cormorant Garamond',serif;font-size:13px;font-weight:500;color:var(--text);letter-spacing:.05em;line-height:1.4;}

.sb-logo-sub{font-size:9px;letter-spacing:.25em;text-transform:uppercase;color:var(--crimson-light);margin-top:2px;}

.sb-member{padding:14px 18px;border-bottom:1px solid var(--border);flex-shrink:0;}

.sb-av{width:32px;height:32px;background:var(--gold-faint);border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;font-family:'Cormorant Garamond',serif;font-size:14px;color:var(--gold);margin-bottom:7px;}

.sb-name{font-size:13px;color:var(--text);font-weight:500;margin-bottom:2px;}

.sb-role{font-size:11px;color:var(--text-muted);margin-bottom:5px;}

.sb-rank{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border:1px solid var(--border);font-size:10px;color:var(--gold);letter-spacing:.1em;}

.sb-admin-tag{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border:1px solid rgba(155,35,53,.35);background:rgba(155,35,53,.06);font-size:9px;color:#D4738A;letter-spacing:.12em;text-transform:uppercase;margin-top:4px;}

.sb-nav{flex:1;padding:8px 0;overflow-y:auto;}

.sb-section{font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--text-dim);padding:10px 18px 4px;font-weight:500;}

.sb-item{display:flex;align-items:center;gap:9px;padding:8px 18px;cursor:pointer;transition:all .2s;color:var(--text-muted);font-size:12.5px;border-left:2px solid transparent;user-select:none;position:relative;}

.sb-item:hover{background:var(--gold-faint);color:var(--text);border-left-color:var(--gold-dim);}

.sb-item.active{background:var(--gold-faint);color:var(--gold);border-left-color:var(--gold);}.sb-item.active.admin-item{background:var(--crimson-faint);color:var(--crimson-light);border-left-color:var(--crimson-light);}

.sb-item .ico{font-size:13px;width:16px;text-align:center;flex-shrink:0;}

.sb-badge{margin-left:auto;font-size:9px;padding:1px 6px;border-radius:10px;font-weight:600;}

.sb-badge.red{background:var(--danger);color:#fff;}

.sb-badge.gold{background:var(--gold);color:#07090F;}

.sb-badge.warn{background:var(--warn);color:#fff;}

.sb-bottom{padding:12px 18px;border-top:1px solid var(--border);flex-shrink:0;}

.lang-pill{display:flex;border:1px solid var(--border);overflow:hidden;}

.lang-pill button{background:none;border:none;color:var(--text-muted);padding:5px 11px;font-size:11px;cursor:pointer;font-family:'Jost',sans-serif;letter-spacing:.08em;transition:all .2s;}

.lang-pill button.active{background:var(--gold-faint);color:var(--gold);}

.sb-logout{display:flex;align-items:center;gap:8px;color:var(--text-dim);font-size:12px;cursor:pointer;padding:8px 0 2px;transition:color .2s;}

.sb-logout:hover{color:var(--danger);}

.main{flex:1;height:calc(100vh - var(--portal-nav));display:flex;flex-direction:column;overflow:hidden;}

.topbar{height:var(--topbar);background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 26px;flex-shrink:0;z-index:40;}

.tb-title{font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:500;color:var(--text);}

.tb-right{display:flex;align-items:center;gap:10px;}

.tb-chip{padding:4px 12px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;}

.tb-chip.admin{border:1px solid rgba(155,35,53,.3);background:rgba(155,35,53,.07);color:#D4738A;}

.tb-chip.guest{border:1px solid rgba(74,111,165,.3);background:rgba(74,111,165,.07);color:#7A9FD4;}

.tb-btn{background:none;border:1px solid var(--border);color:var(--text-muted);width:32px;height:32px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;font-size:13px;position:relative;}

.tb-btn:hover{border-color:var(--gold-dim);color:var(--gold);}

.notif-dot{position:absolute;top:5px;right:5px;width:6px;height:6px;background:var(--danger);border-radius:50%;border:1px solid var(--surface);}

.page-wrap{flex:1;overflow-y:auto;overflow-x:hidden;}

.pg{padding:26px 26px 48px;animation:fadeUp .35s ease;}

.notif-overlay{display:none;position:fixed;inset:0;z-index:200;}

.notif-overlay.open{display:block;}

.notif-panel{position:absolute;top:0;right:0;bottom:0;width:340px;background:var(--surface);border-left:1px solid var(--border);display:flex;flex-direction:column;animation:slideInRight .28s ease;}

.notif-panel.closing{animation:slideOutRight .25s ease forwards;}

.np-head{padding:18px 18px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}

.np-title{font-family:'Cormorant Garamond',serif;font-size:19px;color:var(--text);}

.np-close{background:none;border:1px solid var(--border);color:var(--text-muted);width:28px;height:28px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;}

.np-close:hover{border-color:var(--gold);color:var(--gold);}

.np-filters{display:flex;padding:8px 18px;border-bottom:1px solid var(--border);gap:0;}

.nf{background:none;border:1px solid var(--border);color:var(--text-dim);padding:4px 11px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;font-family:'Jost',sans-serif;transition:all .2s;margin-right:-1px;}

.nf.active{background:var(--gold-faint);border-color:var(--gold);color:var(--gold);z-index:1;}

.np-list{flex:1;overflow-y:auto;}

.np-item{display:flex;gap:11px;padding:13px 18px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .2s;position:relative;}

.np-item:hover{background:var(--gold-faint);}

.np-item.unread::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:55%;background:var(--gold);}

.np-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;border:1px solid var(--border);background:var(--surface2);}

.np-icon.task{border-color:rgba(74,111,165,.3);background:rgba(74,111,165,.07);}

.np-icon.vote{border-color:rgba(201,151,58,.3);background:var(--gold-faint);}

.np-icon.chat{border-color:rgba(58,125,68,.3);background:rgba(58,125,68,.07);}

.np-icon.system{border-color:rgba(155,35,53,.3);background:rgba(155,35,53,.07);}

.np-body .np-t{font-size:12.5px;color:var(--text);margin-bottom:2px;line-height:1.4;}

.np-body .np-t.read{color:var(--text-muted);}

.np-body .np-s{font-size:11px;color:var(--text-dim);}

.np-foot{padding:12px 18px;border-top:1px solid var(--border);display:flex;gap:8px;}

.toast-wrap{position:fixed;bottom:22px;right:22px;z-index:500;display:flex;flex-direction:column;gap:8px;pointer-events:none;}

.toast{background:var(--surface);border:1px solid var(--border2);padding:11px 16px;font-size:13px;color:var(--text);display:flex;align-items:center;gap:10px;pointer-events:all;min-width:240px;animation:slideInRight .3s ease;}

.toast.success{border-color:rgba(58,125,68,.4);}

.toast.warn{border-color:rgba(212,130,26,.4);}

.toast.danger{border-color:rgba(155,35,53,.4);}

.toast-x{background:none;border:none;color:var(--text-dim);cursor:pointer;margin-left:auto;}

.modal-overlay.open{display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;animation:fadeIn .25s ease;}

.modal-head{padding:22px 26px 18px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;}

.modal-head-title{font-family:'Cormorant Garamond',serif;font-size:21px;color:var(--text);}

.modal-x{background:none;border:1px solid var(--border);color:var(--text-muted);width:30px;height:30px;cursor:pointer;transition:all .2s;}

.modal-x:hover{border-color:var(--gold);color:var(--gold);}

.modal-body{padding:22px 26px;}

.modal-foot{padding:14px 26px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px;}

.pg-label{font-size:10px;letter-spacing:.35em;text-transform:uppercase;color:var(--gold);margin-bottom:7px;font-weight:500;}

.pg-title{font-family:'Cormorant Garamond',serif;font-size:clamp(20px,3vw,32px);font-weight:300;color:var(--text);margin-bottom:20px;line-height:1.15;}

.card{background:var(--surface);border:1px solid var(--border);padding:20px;}

.card.gold{border-color:var(--border2);background:linear-gradient(135deg,var(--surface),rgba(201,151,58,.05));}

.card.danger{border-color:rgba(155,35,53,.25);background:rgba(155,35,53,.04);}

.card.success{border-color:rgba(58,125,68,.25);background:rgba(58,125,68,.04);}

.c-label{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted);margin-bottom:10px;font-weight:500;}

.c-big{font-family:'Cormorant Garamond',serif;font-size:38px;font-weight:300;color:var(--text);line-height:1;}

.c-sub{font-size:11px;color:var(--text-muted);margin-top:4px;}

.c-delta{font-size:11px;margin-top:4px;}

.c-delta.up{color:var(--success);}

.c-delta.dn{color:var(--danger);}

.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:18px;}

.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-bottom:18px;}

.g2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:18px;}

.g21{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin-bottom:18px;}

.g12{display:grid;grid-template-columns:1fr 2fr;gap:16px;margin-bottom:18px;}

.sh{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}

.sh-t{font-family:'Cormorant Garamond',serif;font-size:19px;font-weight:400;color:var(--text);}

.btn{display:inline-flex;align-items:center;gap:6px;background:none;border:1px solid var(--border);color:var(--text-muted);padding:7px 13px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;font-family:'Jost',sans-serif;transition:all .2s;}

.btn:hover{border-color:var(--gold-dim);color:var(--text);}

.btn.gold{background:var(--gold);border-color:var(--gold);color:#07090F;font-weight:500;}

.btn.gold:hover{background:var(--gold-light);}

.btn.danger{border-color:rgba(155,35,53,.4);color:var(--danger);}

.btn.danger:hover{background:rgba(155,35,53,.1);}

.btn.success{border-color:rgba(58,125,68,.35);color:var(--success);}

.btn.success:hover{background:rgba(58,125,68,.1);}

.badge{display:inline-flex;padding:2px 8px;border:1px solid var(--border);font-size:10px;letter-spacing:.06em;}

.badge.gold{border-color:var(--border2);color:var(--gold);}

.badge.success{border-color:rgba(58,125,68,.35);color:var(--success);}

.badge.warn{border-color:rgba(212,130,26,.35);color:var(--warn);}

.badge.danger{border-color:rgba(155,35,53,.35);color:var(--danger);}

.badge.steel{border-color:rgba(74,111,165,.35);color:var(--steel);}

.prog{margin-bottom:10px;}

.prog-row{display:flex;justify-content:space-between;margin-bottom:3px;}

.prog-lbl{font-size:12px;color:var(--text-muted);}

.prog-val{font-size:12px;color:var(--gold);}

.prog-track{height:3px;background:var(--surface2);}

.prog-fill{height:100%;background:linear-gradient(to right,var(--gold-dim),var(--gold));}

.prog-fill.blue{background:linear-gradient(to right,#2A4F85,var(--steel));}

.prog-fill.green{background:linear-gradient(to right,#1A5D24,var(--success));}

.prog-fill.warn{background:linear-gradient(to right,#A45210,var(--warn));}

.prog-fill.danger{background:linear-gradient(to right,#6B1525,var(--danger));}

.divider{height:1px;background:var(--border);margin:18px 0;}

.tab:hover{color:var(--text-muted);}

.tab.active{color:var(--gold);border-bottom-color:var(--gold);}

.alert{padding:10px 14px;border:1px solid;font-size:12.5px;margin-bottom:14px;display:flex;gap:9px;align-items:flex-start;line-height:1.5;}

.alert.info{border-color:rgba(74,111,165,.3);background:rgba(74,111,165,.06);color:#7A9FD4;}

.alert.warn{border-color:rgba(212,130,26,.3);background:rgba(212,130,26,.06);color:var(--warn);}

.alert.success{border-color:rgba(58,125,68,.3);background:rgba(58,125,68,.06);color:#7ABF87;}

.alert.danger{border-color:rgba(155,35,53,.3);background:rgba(155,35,53,.06);color:#D4738A;}

.tbl{width:100%;border-collapse:collapse;}

.tbl th{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim);padding:8px 11px;border-bottom:1px solid var(--border);text-align:left;font-weight:500;}

.tbl td{padding:10px 11px;border-bottom:1px solid var(--border);font-size:12.5px;color:var(--text-muted);}

.tbl tr:last-child td{border-bottom:none;}

.tbl tr:hover td{background:var(--gold-faint);}

.tbl td.name{color:var(--text);}

.f-group{margin-bottom:14px;}

.f-label{display:block;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px;font-weight:500;}

.f-input,.f-select,.f-textarea{width:100%;background:var(--bg);border:1px solid var(--border);color:var(--text);padding:10px 13px;font-family:'Jost',sans-serif;font-size:13px;font-weight:300;outline:none;transition:border-color .2s;}

.f-input:focus,.f-select:focus,.f-textarea:focus{border-color:var(--gold-dim);}

.f-input::placeholder{color:var(--text-dim);}

.f-select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238A9BB0' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:32px;}

.f-select option{background:#0E1220;}

.f-textarea{resize:vertical;min-height:75px;line-height:1.6;}

.f-row{display:grid;grid-template-columns:1fr 1fr;gap:13px;}

.toggle{width:40px;height:21px;background:var(--surface2);border:1px solid var(--border);border-radius:11px;cursor:pointer;position:relative;transition:all .3s;flex-shrink:0;}

.toggle.on{background:rgba(201,151,58,.2);border-color:var(--gold-dim);}

.toggle::after{content:'';position:absolute;top:2px;left:2px;width:15px;height:15px;background:var(--text-dim);border-radius:50%;transition:all .3s;}

.toggle.on::after{left:21px;background:var(--gold);}

.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border);}

.toggle-row:last-child{border-bottom:none;}

.t-lbl{font-size:13px;color:var(--text);margin-bottom:2px;}

.t-desc{font-size:11px;color:var(--text-muted);}

.act-item{display:flex;gap:11px;padding:9px 0;border-bottom:1px solid var(--border);}

.act-item:last-child{border-bottom:none;}

.act-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-top:5px;}

.act-body{font-size:12.5px;color:var(--text-muted);line-height:1.5;flex:1;}

.act-body strong{color:var(--text);font-weight:500;}

.act-time{font-size:10px;color:var(--text-dim);flex-shrink:0;margin-top:2px;}

.kanban{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}

.kb-col{background:var(--surface2);padding:14px;}

.kb-col-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}

.kb-col-title{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--text-muted);}

.kb-count{background:var(--surface3);padding:1px 8px;font-size:11px;color:var(--text-dim);}

.kb-card{background:var(--surface);border:1px solid var(--border);padding:12px;margin-bottom:8px;cursor:pointer;transition:all .2s;position:relative;overflow:hidden;}

.kb-card:hover{border-color:var(--border2);}

.kb-card::before{content:'';position:absolute;top:0;left:0;width:3px;height:100%;}

.kb-card.critical::before{background:var(--danger);}

.kb-card.high::before{background:var(--warn);}

.kb-card.medium::before{background:var(--steel);}

.kb-card.low::before{background:var(--text-dim);}

.kb-tag{font-size:10px;color:var(--text-dim);margin-bottom:5px;}

.kb-title{font-size:13px;color:var(--text);}

.chat-layout{display:grid;grid-template-columns:220px 1fr;height:calc(100vh - var(--topbar));overflow:hidden;}

.cr-head{padding:14px 16px;border-bottom:1px solid var(--border);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--text-dim);}

.cr-item{padding:12px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .2s;position:relative;}

.cr-item:hover{background:var(--gold-faint);}

.cr-item.active{background:var(--gold-faint);border-left:2px solid var(--gold);}

.cr-name{font-size:13px;color:var(--text);margin-bottom:2px;}

.cr-preview{font-size:11px;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.cr-badge{position:absolute;top:12px;right:14px;background:var(--danger);color:#fff;font-size:9px;padding:1px 6px;border-radius:10px;}

.chat-head{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}

.chat-msgs{flex:1;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:14px;}

.msg{display:flex;gap:9px;align-items:flex-start;}

.msg.own{flex-direction:row-reverse;}

.msg-av{width:28px;height:28px;background:var(--gold-faint);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-family:'Cormorant Garamond',serif;font-size:12px;color:var(--gold);flex-shrink:0;}

.msg-bubble{max-width:70%;background:var(--surface2);padding:9px 13px;font-size:13px;color:var(--text-muted);line-height:1.5;}

.msg.own .msg-bubble{background:rgba(201,151,58,.09);border:1px solid var(--border);}

.msg-name{font-size:10px;color:var(--text-dim);margin-bottom:3px;}

.msg-time{font-size:10px;color:var(--text-dim);margin-top:3px;text-align:right;}

.chat-input-area{padding:14px 18px;border-top:1px solid var(--border);display:flex;gap:10px;flex-shrink:0;}

.chat-input:focus{border-color:var(--gold-dim);}

.heatmap{display:grid;grid-template-columns:repeat(52,1fr);gap:2px;}

.hm{aspect-ratio:1;border-radius:1px;cursor:pointer;}

.hm-0{background:var(--surface2);}

.hm-1{background:rgba(201,151,58,.15);}

.hm-2{background:rgba(201,151,58,.3);}

.hm-3{background:rgba(201,151,58,.55);}

.hm-4{background:var(--gold);}

.bar-chart{display:flex;align-items:flex-end;gap:7px;height:150px;}

.bc-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;}

.bc-bar{width:100%;border-radius:1px 1px 0 0;transition:height .5s ease;cursor:pointer;}

.bc-bar:hover{filter:brightness(1.3);}

.bc-val{font-size:10px;color:var(--text-muted);}

.bc-lbl{font-size:10px;color:var(--text-dim);}

.vote-item{padding:18px;border:1px solid var(--border);margin-bottom:12px;transition:border-color .2s;}

.vote-item:hover{border-color:var(--border2);}

.vote-scope{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--text-dim);margin-bottom:5px;}

.vote-counts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px;text-align:center;}

.vc-num{font-family:'Cormorant Garamond',serif;font-size:24px;line-height:1;}

.vc-lbl{font-size:10px;color:var(--text-dim);}

.vote-bar{height:4px;background:var(--surface2);margin-bottom:14px;}

.vote-bar-fill{height:100%;background:linear-gradient(to right,var(--gold-dim),var(--gold));}

.vote-actions{display:flex;gap:8px;}

.min-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:12px;margin-bottom:20px;}

.min-card{background:var(--surface);border:1px solid var(--border);padding:16px;cursor:pointer;transition:all .2s;position:relative;overflow:hidden;}

.min-card:hover{border-color:var(--border2);}

.min-card.active-min{border-color:var(--gold);}

.min-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--gold);transform:scaleX(0);transition:transform .3s;}

.min-card:hover::after{transform:scaleX(1);}

.min-num{font-size:10px;color:var(--gold-dim);letter-spacing:.2em;margin-bottom:5px;}

.min-name{font-size:13px;color:var(--text);margin-bottom:8px;line-height:1.4;}

.min-stats{display:flex;gap:12px;}

.ms{font-size:11px;color:var(--text-dim);}

.ms span{color:var(--text-muted);}

.member-av{width:28px;height:28px;background:var(--gold-faint);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-family:'Cormorant Garamond',serif;font-size:12px;color:var(--gold);}

.radar-wrap{position:relative;width:140px;height:140px;}

.appl-card{border:1px solid var(--border);padding:16px;margin-bottom:12px;transition:border-color .2s;}

.appl-card:hover{border-color:var(--border2);}

.appl-rec{padding:9px 13px;background:var(--gold-faint);border:1px solid var(--border2);font-size:12px;color:var(--text-muted);margin-bottom:11px;}

.rank-item:hover{border-color:var(--border2);}

.rank-num{width:26px;height:26px;border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;font-family:'Cormorant Garamond',serif;font-size:14px;color:var(--gold);}

.rank-name-inp{flex:1;background:none;border:none;color:var(--text);font-family:'Jost',sans-serif;font-size:13px;font-weight:300;outline:none;border-bottom:1px solid transparent;transition:border-color .2s;}

.rank-name-inp:focus{border-bottom-color:var(--gold-dim);}

.rank-w{width:55px;background:var(--bg);border:1px solid var(--border);color:var(--gold);text-align:center;padding:4px 7px;font-family:'Jost',sans-serif;font-size:12px;outline:none;}

.min-stat-row{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--border);}

.min-stat-row:last-child{border-bottom:none;}

.email-preview{background:var(--bg);border:1px solid var(--border);padding:22px;font-size:13px;line-height:1.7;color:var(--text-muted);}

.email-subject{font-family:'Cormorant Garamond',serif;font-size:17px;color:var(--text);margin-bottom:14px;}

.email-cta{display:inline-flex;background:var(--gold);color:#07090F;padding:9px 22px;font-size:12px;font-weight:500;letter-spacing:.1em;margin:8px 0;}

#screen-landing{flex-direction:column;background:var(--bg);overflow-y:auto;height:calc(100vh - var(--portal-nav));overflow-x:hidden;}

.landing-hero{min-height:calc(100vh - var(--portal-nav));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 24px;position:relative;}

.lh-bg{position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 50% 35%,rgba(122,26,46,0.18) 0%,rgba(201,151,58,0.06) 45%,transparent 70%);pointer-events:none;}

.lh-content{position:relative;z-index:2;max-width:700px;}

.lh-logo{margin-bottom:32px;animation:fadeUp .8s ease;}

.lh-title{font-family:'Cormorant Garamond',serif;font-size:clamp(36px,6vw,72px);font-weight:300;letter-spacing:.12em;color:var(--text);margin-bottom:16px;line-height:1.1;animation:fadeUp .8s .1s ease both;}

.lh-sub{font-size:13px;letter-spacing:.25em;text-transform:uppercase;color:var(--crimson-light);margin-bottom:24px;animation:fadeUp .8s .2s ease both;}

.lh-desc{font-size:16px;color:var(--text-muted);line-height:1.8;max-width:500px;margin:0 auto 40px;animation:fadeUp .8s .3s ease both;font-weight:300;}

.lh-btns{display:flex;gap:14px;justify-content:center;animation:fadeUp .8s .4s ease both;}

.lh-btn-primary{background:var(--crimson);color:var(--text);padding:14px 36px;font-family:'Jost',sans-serif;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;border:none;cursor:pointer;transition:background .2s;}

.lh-btn-primary:hover{background:var(--crimson-light);}

.lh-btn-secondary{background:none;color:var(--text-muted);padding:14px 36px;font-family:'Jost',sans-serif;font-size:12px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;border:1px solid var(--border);cursor:pointer;transition:all .2s;}

.lh-btn-secondary:hover{border-color:var(--border2);color:var(--text);}

.lh-scroll{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--text-dim);display:flex;flex-direction:column;align-items:center;gap:8px;animation:fadeIn 1s .8s ease both;}

.lh-scroll::after{content:'';width:1px;height:32px;background:linear-gradient(to bottom,var(--gold-dim),transparent);}

.landing-mins{padding:80px 40px;background:var(--surface);}

.landing-mins-title{font-family:'Cormorant Garamond',serif;font-size:40px;text-align:center;margin-bottom:8px;color:var(--text);}

.landing-mins-sub{text-align:center;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:48px;}

.landing-onboard{padding:80px 40px;max-width:680px;margin:0 auto;}

.lo-steps{display:flex;flex-direction:column;gap:0;}

.lo-step{display:flex;gap:20px;padding:20px 0;border-bottom:1px solid var(--border);}

.lo-step:last-child{border-bottom:none;}

.lo-num{width:32px;height:32px;border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;font-family:'Cormorant Garamond',serif;font-size:17px;color:var(--gold);flex-shrink:0;margin-top:2px;}

.lo-step-title{font-family:'Cormorant Garamond',serif;font-size:19px;color:var(--text);margin-bottom:5px;}

.lo-step-desc{font-size:13px;color:var(--text-muted);line-height:1.7;}

.lh-eyebrow{font-size:9px;letter-spacing:.45em;text-transform:uppercase;color:var(--crimson-light);margin-bottom:14px;font-weight:500}

.lh-stats{display:flex;gap:32px;margin-top:28px;flex-wrap:wrap}

.lhs-item{display:flex;flex-direction:column;align-items:center}

.lhs-num{font-size:28px;font-weight:700;color:var(--gold);font-family:'Cormorant Garamond',serif;line-height:1}

.lhs-label{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);margin-top:4px}

.landing-features{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(201,151,58,.12);border-top:1px solid rgba(201,151,58,.15);border-bottom:1px solid rgba(201,151,58,.15)}

.lf-item{background:var(--bg-deep);padding:36px 28px;transition:background .2s}

.lf-item:hover{background:var(--bg-card)}

.lf-icon{font-size:22px;color:var(--gold);margin-bottom:14px}

.lf-title{font-size:14px;font-weight:600;color:var(--text-main);margin-bottom:8px;letter-spacing:.04em}

.lf-desc{font-size:12px;color:var(--text-muted);line-height:1.7}

.lo-title{font-size:13px;font-weight:600;color:var(--text-main);margin-bottom:6px}

.lo-desc{font-size:12px;color:var(--text-muted);line-height:1.65}

.landing-faq{padding:80px 48px;background:var(--bg-main);max-width:800px;margin:0 auto}

.faq-list{display:flex;flex-direction:column;gap:2px}

.faq-item{border:1px solid var(--border);border-radius:4px;overflow:hidden;cursor:pointer;transition:border-color .2s}

.faq-item:hover{border-color:rgba(201,151,58,.4)}

.faq-item.open{border-color:var(--gold)}

.faq-q{padding:18px 20px;font-size:13px;font-weight:600;color:var(--text-main);display:flex;justify-content:space-between;align-items:center}

.faq-arrow{color:var(--gold);transition:transform .2s;font-size:11px}

.faq-item.open .faq-arrow{transform:rotate(90deg)}

.faq-a{display:none;padding:0 20px 18px;font-size:12px;color:var(--text-muted);line-height:1.7}

.faq-item.open .faq-a{display:block}

.landing-footer{padding:48px;background:var(--bg-deep);border-top:1px solid rgba(201,151,58,.15);display:flex;flex-direction:column;align-items:center;gap:12px}

.lf-logo{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:600;color:var(--gold)}

.lf-motto{font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--text-muted)}

.lf-links{display:flex;gap:24px}

.lf-links a{font-size:12px;color:var(--text-muted);cursor:pointer;transition:color .2s}.lf-links a:hover{color:var(--gold)}

.lf-copy{font-size:11px;color:rgba(138,155,176,.4)}

.landing-locked{display:flex;flex-direction:column;align-items:center;gap:16px}

.invite-input-row{display:flex;gap:8px;width:100%;max-width:360px}

.invite-input{flex:1;background:rgba(255,255,255,.06);border:1px solid rgba(201,151,58,.3);padding:10px 14px;color:var(--text-main);font-size:13px;border-radius:3px;outline:none}

.invite-input:focus{border-color:var(--gold)}

.lh-locked-msg{font-size:12px;color:var(--text-muted);letter-spacing:.06em}

.login-split{display:flex;min-height:100vh}

.login-left{flex:1;background:linear-gradient(160deg,var(--crimson-dark) 0%,var(--bg-deep) 60%);display:flex;flex-direction:column;justify-content:center;padding:64px 56px;position:relative;overflow:hidden}

.login-left::before{content:'✦';position:absolute;font-size:320px;opacity:.03;color:var(--gold);right:-60px;top:50%;transform:translateY(-50%);pointer-events:none;line-height:1}

.ll-brand{font-family:'Cormorant Garamond',serif;font-size:36px;font-weight:700;color:var(--text-main);margin-bottom:8px}

.ll-sub{font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--crimson-light);margin-bottom:40px}

.ll-stat{display:flex;align-items:baseline;gap:10px;margin-bottom:20px}

.ll-stat-num{font-family:'Cormorant Garamond',serif;font-size:40px;font-weight:700;color:var(--gold);line-height:1}

.ll-stat-label{font-size:12px;color:var(--text-muted);letter-spacing:.06em}

.ll-tagline{margin-top:40px;font-size:13px;color:var(--text-muted);line-height:1.8;border-left:2px solid var(--gold);padding-left:16px;font-style:italic}

.login-right{width:440px;background:var(--bg-card);display:flex;align-items:center;justify-content:center;padding:48px 40px}

.login-right-inner{width:100%}

.login-right-title{font-size:18px;font-weight:600;color:var(--text-main);margin-bottom:4px}

.login-right-sub{font-size:12px;color:var(--text-muted);margin-bottom:32px;letter-spacing:.04em}

.login-left-minimal{justify-content:center;align-items:center;text-align:center;gap:0;padding:48px 40px}

.ll-logo-wrap{margin-bottom:24px}

.ll-brand-minimal{font-family:"Cormorant Garamond",serif;font-size:32px;font-weight:700;color:var(--text-main);letter-spacing:.12em;margin-bottom:8px}

.ll-motto{font-size:11px;letter-spacing:.35em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:32px}

.ll-lang-switch{display:flex;align-items:center;gap:10px}

.ll-lang{font-size:11px;letter-spacing:.18em;color:rgba(255,255,255,.35);cursor:pointer;padding:4px 8px;border-radius:2px;transition:all .2s}

.ll-lang.active,.ll-lang:hover{color:var(--gold);background:rgba(201,151,58,.1)}

.ll-lang-sep{color:rgba(255,255,255,.2)}

.login-tabs{display:flex;gap:0;margin-bottom:28px;border-bottom:1px solid var(--border)}

.login-tab{flex:1;background:none;border:none;padding:12px 8px;font-size:12px;color:var(--text-muted);cursor:pointer;letter-spacing:.04em;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .2s}

.login-tab.active{color:var(--gold);border-bottom-color:var(--gold)}

.lh-logo-hero{margin-bottom:20px;filter:invert(1) brightness(10)}

.lh-motto-hero{font-size:13px;letter-spacing:.32em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:16px;margin-top:-4px}

.lh-lang-bar{display:flex;align-items:center;gap:10px;margin-top:24px}

.lhl{font-size:11px;letter-spacing:.18em;cursor:pointer;color:rgba(255,255,255,.4);padding:4px 8px;border-radius:2px;transition:all .2s}

.lhl.active,.lhl:hover{color:var(--gold);background:rgba(201,151,58,.1)}

.f-section{font-size:18px;font-weight:600;color:var(--text-main);margin-bottom:24px;padding-bottom:12px;border-bottom:2px solid var(--border)}

.f-field{margin-bottom:16px}

.f-input{width:100%;padding:10px 12px;background:var(--bg-deep);border:1px solid var(--border);color:var(--text-main);font-size:13px;border-radius:4px;outline:none;transition:border-color .2s}

.f-input:focus{border-color:var(--gold)}

.review-card{padding:20px;background:var(--bg-card);border:1px solid var(--border);border-radius:4px}

.rc-title{font-size:14px;font-weight:600;color:var(--text-main);margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid var(--border)}

.rc-line{display:flex;justify-content:space-between;align-items:baseline;padding:8px 0;border-bottom:1px solid rgba(138,155,176,.05);font-size:12px}

.rc-line span{color:var(--text-muted)}

.rc-line strong{color:var(--text-main);font-weight:500}

.f-input[type="radio"]{width:auto;margin:0}

.f-input[type="checkbox"]{width:auto;margin:0}

/* [BATCH-C] */
.ministry-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:40px;}

.ministry-btn{background:var(--surface);border:1px solid var(--border);color:var(--text);padding:20px;text-align:left;cursor:pointer;font-family:'Jost',sans-serif;transition:all .2s;}

.ministry-btn:hover{background:var(--surface2);border-color:var(--gold-dim);}

.ministry-btn strong{display:block;color:var(--gold);font-size:13px;margin-bottom:6px;}

.ministry-btn .name{display:block;font-family:'Cormorant Garamond',serif;font-size:16px;font-weight:500;margin-bottom:4px;}

.ministry-btn .stats{font-size:11px;color:var(--text-dim);}

.detail-ministry-name{font-family:'Cormorant Garamond',serif;font-size:36px;font-weight:400;color:var(--gold);margin-bottom:8px;}

.detail-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0;}

.form-input,.form-select{width:100%;max-width:400px;background:var(--bg);border:1px solid var(--border);color:var(--text);padding:10px 12px;font-family:'Jost',sans-serif;font-size:13px;}

.form-input:focus,.form-select:focus{outline:none;border-color:var(--gold);}

.checkbox-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;max-width:500px;}

.checkbox-label{display:flex;align-items:center;gap:8px;cursor:pointer;padding:8px;}

.checkbox-label input{margin:0;}

.checkbox-label span{font-size:13px;}

.btn-secondary:hover{border-color:var(--gold-dim);color:var(--text);}

/* [BATCH-1] */
.dashboard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-bottom:40px;}

.stat-desc{font-size:12px;color:var(--text-muted);margin-top:4px;}

.data-table{background:var(--surface);border:1px solid var(--border);margin-bottom:20px;}

.data-table th{background:var(--bg);padding:12px 16px;text-align:left;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);border-bottom:1px solid var(--border);}

.data-table td{padding:12px 16px;border-bottom:1px solid rgba(201,151,58,0.05);font-size:13px;}

.data-table tr:last-child td{border-bottom:none;}

.info-box{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--gold);padding:20px;margin:20px 0;}

.info-box strong{color:var(--gold);}

/* [BATCH-2] */
.gantt-container{background:var(--surface);border:1px solid var(--border);padding:24px;margin-bottom:40px;overflow-x:auto;}

.gantt-chart{min-width:800px;}

.task-list{background:var(--surface);border:1px solid var(--border);}

.task-item{padding:16px 20px;border-bottom:1px solid rgba(201,151,58,0.05);cursor:pointer;transition:background .2s;}

.task-item:hover{background:var(--surface2);}

.task-item:last-child{border-bottom:none;}

.task-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}

.task-title{font-size:14px;font-weight:500;color:var(--text);}

.task-meta{font-size:11px;color:var(--text-dim);}

.task-priority{display:inline-block;padding:2px 8px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;border-radius:10px;margin-left:8px;}

.task-priority.high{background:var(--danger);color:#fff;}

.task-priority.medium{background:var(--steel);color:#fff;}

.task-priority.low{background:var(--text-dim);color:#fff;}

.comments-section{background:var(--bg);padding:16px;margin-top:12px;border-top:1px solid var(--border);display:none;}

.comments-section.open{display:block;}

.comment{padding:12px;background:var(--surface);border:1px solid var(--border);margin-bottom:8px;border-radius:4px;}

.comment-author{font-size:12px;font-weight:500;color:var(--gold);margin-bottom:4px;}

.comment-text{font-size:13px;color:var(--text-muted);line-height:1.6;}

.comment-time{font-size:10px;color:var(--text-dim);margin-top:4px;}

.time-display{font-size:11px;color:var(--text-dim);margin-left:16px;}

.input-field{width:100%;background:var(--bg);border:1px solid var(--border);color:var(--text);padding:8px 12px;font-family:'Jost',sans-serif;font-size:12px;margin:8px 0;}

/* [BATCH-3] */
.tabs{display:flex;gap:12px;margin:24px 0;border-bottom:1px solid var(--border);}

.tab{padding:12px 20px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);border-bottom:2px solid transparent;cursor:pointer;}

.tab.active,.tab:hover{color:var(--gold);border-bottom-color:var(--gold);}

.tab-content{padding:24px 0;}

.project-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-bottom:40px;}

.project-card{background:var(--surface);border:1px solid var(--border);padding:24px;cursor:pointer;transition:all .2s;}

.project-card:hover{background:var(--surface2);border-color:var(--gold-dim);}

.project-status{display:inline-block;padding:4px 10px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;border-radius:12px;margin-bottom:12px;}

.project-status.active{background:var(--success);color:#fff;}

.project-status.planning{background:var(--steel);color:#fff;}

.project-status.completed{background:var(--text-dim);color:#fff;}

.project-title{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:500;color:var(--text);margin-bottom:8px;}

.project-meta{font-size:11px;color:var(--text-dim);line-height:1.6;}

.project-progress{margin-top:12px;}

.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:20px 0;}

.stat-box{background:var(--bg);padding:16px;border:1px solid var(--border);text-align:center;}

/* [BATCH-4] */
.vote-title{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:500;color:var(--text);margin-bottom:12px;}

.detail-view{background:var(--surface);border:1px solid var(--border);padding:32px;margin-bottom:32px;}

.detail-header{margin-bottom:24px;}

.detail-title{font-family:'Cormorant Garamond',serif;font-size:36px;font-weight:400;color:var(--gold);margin-bottom:12px;}

.detail-meta{font-size:13px;color:var(--text-muted);line-height:1.8;}

.vote-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-bottom:40px;}

.vote-card{background:var(--surface);border:1px solid var(--border);padding:24px;cursor:pointer;transition:all .2s;}

.vote-card:hover{background:var(--surface2);border-color:var(--gold-dim);}

.vote-status{display:inline-block;padding:4px 10px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;border-radius:12px;margin-bottom:12px;}

.vote-status.active{background:var(--success);color:#fff;}

.vote-status.concluded{background:var(--text-dim);color:#fff;}

.vote-meta{font-size:11px;color:var(--text-dim);line-height:1.6;margin-bottom:12px;}

.vote-results{display:flex;gap:12px;margin-top:12px;}

.vote-count{text-align:center;flex:1;}

.vote-count-value{font-size:20px;font-weight:500;color:var(--gold);}

.vote-count-label{font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.1em;}

.ballot-list{background:var(--bg);padding:20px;border:1px solid var(--border);margin-top:20px;}

.ballot-item{padding:12px;border-bottom:1px solid rgba(201,151,58,0.05);display:flex;justify-content:space-between;align-items:center;}

.ballot-item:last-child{border-bottom:none;}

.ballot-choice{padding:4px 12px;border-radius:12px;font-size:11px;text-transform:uppercase;letter-spacing:.1em;}

.ballot-choice.yes{background:var(--success);color:#fff;}

.ballot-choice.no{background:var(--danger);color:#fff;}

.ballot-choice.abstain{background:var(--text-dim);color:#fff;}

.poll-card{background:var(--surface);border:1px solid var(--border);padding:24px;margin-bottom:20px;}

.poll-question{font-size:18px;font-weight:500;color:var(--text);margin-bottom:16px;}

.poll-options{display:flex;flex-direction:column;gap:8px;}

.poll-option{background:var(--bg);border:1px solid var(--border);padding:12px 16px;cursor:pointer;transition:all .2s;display:flex;justify-content:space-between;align-items:center;}

.poll-option:hover{border-color:var(--gold-dim);}

.poll-bar{height:24px;background:rgba(201,151,58,0.1);border-radius:4px;margin-top:4px;overflow:hidden;}

.poll-bar-fill{height:100%;background:var(--gold);transition:width .3s;}

/* [BATCH-5] */
.member-table{background:var(--surface);border:1px solid var(--border);margin-bottom:40px;}

.member-table thead{background:var(--bg);}

.member-table th{padding:12px 16px;text-align:left;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);border-bottom:1px solid var(--border);}

.member-table td{padding:12px 16px;border-bottom:1px solid rgba(201,151,58,0.05);font-size:13px;}

.member-table tr:hover td{background:var(--surface2);}

.member-status{padding:4px 10px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;border-radius:12px;}

.member-status.active{background:var(--success);color:#fff;}

.member-status.pending{background:var(--steel);color:#fff;}

.member-status.suspended{background:var(--danger);color:#fff;}

.slide-over{position:fixed;top:0;right:-500px;width:500px;height:100vh;background:var(--surface);box-shadow:-4px 0 24px rgba(0,0,0,0.5);z-index:10000;transition:right .3s;overflow-y:auto;padding:32px;}

.slide-over.open{right:0;}

.overlay{position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:9999;opacity:0;pointer-events:none;transition:opacity .3s;}

.overlay.open{opacity:1;pointer-events:all;}

.ceremony-timeline{position:relative;padding-left:40px;}

.ceremony-item{position:relative;padding:20px 0 20px 20px;border-left:2px solid var(--border);}

.ceremony-item::before{content:'';position:absolute;left:-6px;top:24px;width:10px;height:10px;background:var(--gold);border-radius:50%;}

.ceremony-date{font-size:11px;color:var(--gold);text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px;}

.ceremony-title{font-size:16px;font-weight:500;color:var(--text);margin-bottom:4px;}

.ceremony-desc{font-size:13px;color:var(--text-muted);}

.endorsement-card{background:var(--bg);border:1px solid var(--border);padding:16px;margin-bottom:12px;border-radius:4px;}

.endorsement-from{font-size:12px;font-weight:500;color:var(--gold);margin-bottom:4px;}

.endorsement-note{font-size:12px;color:var(--text-muted);line-height:1.6;}

/* [BATCH-6] */
.chat-rooms{background:var(--surface);border:1px solid var(--border);padding:16px;overflow-y:auto;}

.chat-main{background:var(--surface);border:1px solid var(--border);display:flex;flex-direction:column;}

.chat-input{display:flex;gap:12px;padding:16px 20px;border-top:1px solid var(--border);}

.calendar{background:var(--surface);border:1px solid var(--border);padding:24px;}

.calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;}

.calendar-month{font-size:24px;font-weight:500;color:var(--gold);}

.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--border);}

.calendar-day-header{background:var(--bg);padding:12px;text-align:center;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim);}

.calendar-day{background:var(--surface);padding:12px;min-height:100px;cursor:pointer;transition:background .2s;}

.calendar-day:hover{background:var(--surface2);}

.calendar-day-number{font-size:14px;font-weight:500;color:var(--text);margin-bottom:8px;}

.calendar-event{background:var(--gold-dim);padding:4px 8px;font-size:10px;border-radius:3px;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.chat-container{display:grid;grid-template-columns:250px 1fr;gap:20px;height:600px;}

.chat-room{padding:12px;border-radius:4px;cursor:pointer;margin-bottom:8px;transition:background .2s;}

.chat-room:hover,.chat-room.active{background:var(--surface2);}

.chat-room-name{font-size:13px;font-weight:500;color:var(--text);}

.chat-room-type{font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.1em;}

.chat-header{padding:16px 20px;border-bottom:1px solid var(--border);}

.chat-title{font-size:18px;font-weight:500;color:var(--gold);}

.chat-messages{flex:1;padding:20px;overflow-y:auto;}

.chat-message{margin-bottom:16px;}

.chat-message-author{font-size:12px;font-weight:500;color:var(--gold);margin-bottom:4px;}

.chat-message-text{font-size:13px;color:var(--text);line-height:1.6;}

.chat-message-time{font-size:10px;color:var(--text-dim);margin-top:4px;}

.chat-input input{flex:1;background:var(--bg);border:1px solid var(--border);color:var(--text);padding:10px 12px;font-family:'Jost',sans-serif;font-size:13px;}

.notif-prefs{background:var(--surface);border:1px solid var(--border);padding:24px;}

.pref-item{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid rgba(201,151,58,0.05);}

.pref-item:last-child{border-bottom:none;}

.pref-label{font-size:13px;color:var(--text);}

.pref-desc{font-size:11px;color:var(--text-muted);margin-top:4px;}

/* [BATCH-7] */
.stat-card{background:var(--surface);border:1px solid var(--border);padding:24px;text-align:center;}

.stat-label{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--text-dim);}

.stat-value{font-family:'Cormorant Garamond',serif;font-size:48px;font-weight:500;color:var(--gold);margin-bottom:8px;}

.progress-bar{height:24px;background:rgba(201,151,58,0.1);border-radius:4px;overflow:hidden;}

.progress-fill{height:100%;background:var(--gold);transition:width .3s;}

.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:40px;}

.stat-sublabel{font-size:10px;color:var(--text-muted);margin-top:4px;}

.leaderboard-table{background:var(--surface);border:1px solid var(--border);width:100%;}

.leaderboard-table thead{background:var(--bg);}

.leaderboard-table th{padding:12px 16px;text-align:left;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);border-bottom:1px solid var(--border);}

.leaderboard-table td{padding:12px 16px;border-bottom:1px solid rgba(201,151,58,0.05);font-size:13px;}

.leaderboard-table tr:hover td{background:var(--surface2);}

.rank-badge{display:inline-block;width:32px;height:32px;line-height:32px;text-align:center;font-weight:600;border-radius:50%;margin-right:12px;}

.rank-badge.gold{background:var(--gold);color:#07090F;}

.rank-badge.silver{background:var(--steel);color:#fff;}

.rank-badge.bronze{background:#B87333;color:#fff;}

.rank-badge.normal{background:var(--surface2);color:var(--text-muted);}

.score-breakdown{background:var(--surface);border:1px solid var(--border);padding:24px;}

.score-item{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid rgba(201,151,58,0.05);}

.score-item:last-child{border-bottom:none;}

.score-item-label{font-size:13px;color:var(--text);}

.score-item-detail{font-size:11px;color:var(--text-muted);margin-top:2px;}

.score-item-value{font-size:18px;font-weight:500;color:var(--gold);}

.progress-container{margin:20px 0;}

.progress-label{display:flex;justify-content:space-between;font-size:12px;color:var(--text-muted);margin-bottom:8px;}

/* [BATCH-8] */
.finance-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-bottom:40px;}

.finance-card{background:var(--surface);border:1px solid var(--border);padding:24px;}

.finance-label{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--text-dim);margin-bottom:8px;}

.finance-value{font-family:'Cormorant Garamond',serif;font-size:36px;font-weight:500;color:var(--gold);margin-bottom:4px;}

.finance-detail{font-size:12px;color:var(--text-muted);}

.income-table{background:var(--surface);border:1px solid var(--border);width:100%;margin-bottom:20px;}

.income-table thead{background:var(--bg);}

.income-table th{padding:12px 16px;text-align:left;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);border-bottom:1px solid var(--border);}

.income-table td{padding:12px 16px;border-bottom:1px solid rgba(201,151,58,0.05);font-size:13px;}

.income-table tr:hover td{background:var(--surface2);}

.income-type{padding:4px 10px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;border-radius:12px;}

.income-type.dues{background:var(--success);color:#fff;}

.income-type.grants{background:var(--steel);color:#fff;}

.income-type.donations{background:var(--gold-dim);color:#fff;}

.request-card{background:var(--surface);border:1px solid var(--border);padding:20px;margin-bottom:16px;}

.request-header{display:flex;justify-content:space-between;align-items:start;margin-bottom:12px;}

.request-title{font-size:16px;font-weight:500;color:var(--text);}

.request-status{padding:4px 10px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;border-radius:12px;}

.request-status.pending{background:var(--steel);color:#fff;}

.request-status.approved{background:var(--success);color:#fff;}

.request-status.rejected{background:var(--danger);color:#fff;}

.request-amount{font-size:24px;font-weight:500;color:var(--gold);margin:8px 0;}

.request-meta{font-size:11px;color:var(--text-dim);}

/* [BATCH-9] */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.8);z-index:10000;display:flex;align-items:center;justify-content:center;}

.modal{background:var(--surface);border:1px solid var(--border);padding:32px;max-width:600px;width:90%;max-height:80vh;overflow-y:auto;}

.rank-item{padding:16px 20px;border-bottom:1px solid rgba(201,151,58,0.05);display:flex;justify-content:space-between;align-items:center;}

.btn-danger{background:var(--danger);color:#fff;border:none;}

.btn-small{padding:6px 12px;font-size:10px;}

.permission-matrix{background:var(--surface);border:1px solid var(--border);overflow-x:auto;}

.permission-matrix table{width:100%;border-collapse:collapse;}

.permission-matrix th{background:var(--bg);padding:12px 16px;text-align:left;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);border:1px solid var(--border);}

.permission-matrix td{padding:12px 16px;text-align:center;border:1px solid rgba(201,151,58,0.05);}

.permission-matrix td:first-child{text-align:left;font-weight:500;color:var(--text);}

.permission-matrix input[type="checkbox"]{cursor:pointer;}

.question-list{background:var(--surface);border:1px solid var(--border);}

.question-item{padding:16px 20px;border-bottom:1px solid rgba(201,151,58,0.05);display:flex;justify-content:space-between;align-items:center;}

.question-item:last-child{border-bottom:none;}

.question-text{font-size:13px;color:var(--text);flex:1;}

.question-type{font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.1em;margin-left:16px;padding:4px 8px;background:var(--surface2);border-radius:3px;}

.question-actions{display:flex;gap:8px;}

.rank-list{background:var(--surface);border:1px solid var(--border);}

.rank-item:last-child{border-bottom:none;}

.rank-name{font-size:14px;font-weight:500;color:var(--text);}

.rank-points{font-size:12px;color:var(--gold);margin-left:12px;}

.modal-title{font-family:'Cormorant Garamond',serif;font-size:24px;color:var(--gold);margin-bottom:20px;}

/* [BATCH-10] */
.sidebar{background:var(--surface);border-right:1px solid var(--border);padding:24px;}

.btn-primary:hover{background:var(--gold-light);transform:translateY(-2px);box-shadow:0 4px 12px rgba(201,151,58,0.3);}

.app-layout{display:grid;grid-template-columns:250px 1fr;min-height:100vh;padding-top:56px;}

.main-content{padding:32px;}

.nav-section{margin-bottom:32px;}

.nav-section-title{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim);margin-bottom:12px;}

.nav-link{display:block;padding:10px 12px;color:var(--text-muted);text-decoration:none;font-size:13px;border-radius:4px;margin-bottom:4px;transition:all .2s;}

.nav-link:hover,.nav-link.active{background:var(--surface2);color:var(--gold);}

.nav-link .shortcut{float:right;font-size:10px;color:var(--text-dim);}

.mobile-menu-btn{display:none;position:fixed;top:64px;left:16px;z-index:1000;background:var(--gold);color:#07090F;border:none;width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:18px;}

.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.8);z-index:999;}

.empty-state{padding:80px 24px;text-align:center;max-width:500px;margin:0 auto;}

.empty-state-icon{font-size:64px;margin-bottom:24px;opacity:0.3;}

.empty-state-title{font-family:'Cormorant Garamond',serif;font-size:28px;color:var(--text);margin-bottom:12px;}

.empty-state-desc{font-size:14px;color:var(--text-muted);margin-bottom:32px;line-height:1.8;}

.shortcuts-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.9);z-index:10000;display:flex;align-items:center;justify-content:center;}

.shortcuts-modal{background:var(--surface);border:1px solid var(--border);padding:40px;max-width:700px;width:90%;max-height:80vh;overflow-y:auto;}

.shortcuts-title{font-family:'Cormorant Garamond',serif;font-size:32px;color:var(--gold);margin-bottom:32px;text-align:center;}

.shortcuts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}

.shortcut-item{display:flex;align-items:center;gap:16px;}

.shortcut-key{background:var(--bg);border:1px solid var(--border);padding:8px 12px;font-family:monospace;font-size:14px;font-weight:600;color:var(--gold);border-radius:4px;min-width:60px;text-align:center;}

.shortcut-desc{font-size:13px;color:var(--text-muted);}

.skeleton{background:linear-gradient(90deg,var(--surface) 25%,var(--surface2) 50%,var(--surface) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;}

.skeleton-text{height:16px;border-radius:4px;margin-bottom:8px;}

.skeleton-title{height:24px;width:60%;border-radius:4px;margin-bottom:16px;}

.skeleton-card{background:var(--surface);border:1px solid var(--border);padding:24px;margin-bottom:16px;}

.page{opacity:0;transform:translateY(20px);transition:opacity .3s,transform .3s;}

.page.active{opacity:1;transform:translateY(0);}

/* [BATCH-11] */
.form-section{margin:24px 0;}

.form-label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);margin-bottom:8px;display:block;}

.btn-secondary{display:inline-block;background:transparent;color:var(--text-muted);border:1px solid var(--border);padding:10px 20px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;}

.hidden{display:none;}

.member-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;}

.member-card{background:var(--surface);border:1px solid var(--border);padding:24px;text-align:center;transition:all .2s;}

.member-name{font-size:16px;font-weight:500;color:var(--text);margin-bottom:4px;}

.member-role{font-size:12px;color:var(--text-muted);margin-bottom:8px;}

.form-input,.form-select,.form-textarea{width:100%;background:var(--bg);border:1px solid var(--border);color:var(--text);padding:10px 12px;font-family:'Jost',sans-serif;font-size:13px;}

.form-textarea{min-height:120px;resize:vertical;}

.search-bar{background:var(--surface);border:1px solid var(--border);padding:16px;margin-bottom:24px;display:flex;gap:12px;}

.search-input{flex:1;background:var(--bg);border:1px solid var(--border);color:var(--text);padding:10px 12px;font-family:'Jost',sans-serif;font-size:13px;}

.filter-select{background:var(--bg);border:1px solid var(--border);color:var(--text);padding:10px 12px;font-family:'Jost',sans-serif;font-size:13px;min-width:200px;}

.member-card:hover{border-color:var(--gold);transform:translateY(-4px);}

.member-avatar{width:80px;height:80px;border-radius:50%;background:var(--gold-dim);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:32px;font-weight:600;color:var(--text);}

.member-ministry{font-size:11px;color:var(--gold);text-transform:uppercase;letter-spacing:.1em;}

.goal-list{background:var(--surface);border:1px solid var(--border);}

.goal-item{padding:16px 20px;border-bottom:1px solid rgba(201,151,58,0.05);display:flex;align-items:center;gap:16px;}

.goal-item:last-child{border-bottom:none;}

.goal-checkbox{width:24px;height:24px;border:2px solid var(--border);border-radius:4px;cursor:pointer;flex-shrink:0;}

.goal-checkbox.completed{background:var(--success);border-color:var(--success);}

.goal-text{flex:1;font-size:14px;color:var(--text);}

.goal-text.completed{text-decoration:line-through;opacity:0.5;}

.goal-date{font-size:11px;color:var(--text-dim);}

.tree-container{background:var(--surface);border:1px solid var(--border);padding:40px;overflow-x:auto;}

.tree-node{fill:var(--surface2);stroke:var(--gold);stroke-width:2;}

.tree-text{fill:var(--text);font-size:12px;text-anchor:middle;}

.tree-line{stroke:var(--border);stroke-width:2;}

/* [BATCH-12] */
.display{font-family:'Cormorant Garamond',serif;}

.test-banner{position:fixed;top:0;left:0;right:0;z-index:9999;background:linear-gradient(135deg,#3A7D44,#C9973A,#9B2335);color:#fff;padding:14px 24px;text-align:center;font-size:12px;font-weight:600;letter-spacing:.1em;box-shadow:0 2px 12px rgba(0,0,0,0.5);}

.container{max-width:1400px;margin:80px auto 40px;}

.page-title{font-family:'Cormorant Garamond',serif;font-size:48px;font-weight:300;color:var(--gold);margin-bottom:12px;}

.page-subtitle{color:var(--text-muted);font-size:14px;margin-bottom:48px;}

.section-title{font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:500;color:var(--text);margin:40px 0 20px;padding-bottom:12px;border-bottom:1px solid var(--border);}

.btn-primary{display:inline-block;background:var(--gold);color:#07090F;border:none;padding:12px 24px;font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;margin-right:8px;}

.btn-success{background:var(--success);color:#fff;}

.health-overview{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-bottom:40px;}

.health-card{background:var(--surface);border:1px solid var(--border);padding:24px;text-align:center;}

.health-card.success{border-left:4px solid var(--success);}

.health-card.warning{border-left:4px solid var(--warning);}

.health-card.danger{border-left:4px solid var(--danger);}

.health-value{font-family:'Cormorant Garamond',serif;font-size:42px;font-weight:500;color:var(--gold);margin-bottom:8px;}

.health-label{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--text-dim);}

.table-stats{background:var(--surface);border:1px solid var(--border);margin-bottom:20px;}

.table-stats table{width:100%;border-collapse:collapse;}

.table-stats th{background:var(--bg);padding:12px 16px;text-align:left;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);border-bottom:1px solid var(--border);}

.table-stats td{padding:12px 16px;border-bottom:1px solid rgba(201,151,58,0.05);font-size:13px;}

.table-stats tr:hover td{background:var(--surface2);}

.warning-list{background:var(--surface);border:1px solid var(--border);padding:20px;}

.warning-item{padding:12px 16px;background:rgba(232,184,90,0.1);border-left:3px solid var(--warning);margin-bottom:12px;border-radius:4px;}

.warning-item.success{background:rgba(58,125,68,0.1);border-left-color:var(--success);}

.warning-title{font-size:13px;font-weight:500;color:var(--text);margin-bottom:4px;}

.warning-desc{font-size:12px;color:var(--text-muted);}

/* ========== ANIMATIONS ========== */

@keyframes fadeIn{from{opacity:0}to{opacity:1}}

@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

@keyframes slideLeft{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}

@keyframes starPulse{0%,100%{transform:rotate(0deg) scale(1)}50%{transform:rotate(22.5deg) scale(1.04)}}

@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

@keyframes slideInRight{from{transform:translateX(110%);opacity:0}to{transform:translateX(0);opacity:1}}

@keyframes slideOutRight{from{transform:translateX(0);opacity:1}to{transform:translateX(110%);opacity:0}}

@keyframes spin{to{transform:rotate(360deg)}}

/* ========== MEDIA QUERIES ========== */

@media (max-width: 768px) {
  .app-layout{grid-template-columns:1fr;}
  .sidebar{position:fixed;left:-250px;top:56px;bottom:0;width:250px;z-index:1000;transition:left .3s;}
  .sidebar.open{left:0;}
  .sidebar-overlay.open{display:block;}
  .mobile-menu-btn{display:block;}
  .main-content{padding:16px;}
  .shortcuts-grid{grid-template-columns:1fr;}
  .empty-state{padding:40px 16px;}
  .empty-state-icon{font-size:48px;}
  .empty-state-title{font-size:22px;}
  .ministry-grid{
    grid-template-columns:1fr !important;
  }
}

@media(max-width:900px) {
  .sidebar{display:none;}
  .g4{grid-template-columns:1fr 1fr;}
  .g3{grid-template-columns:1fr 1fr;}
  .g21,.g12{grid-template-columns:1fr;}
  .kanban{grid-template-columns:1fr 1fr;}
  .chat-layout{grid-template-columns:1fr;}
}

/* ====================================================================
   SPQL UTILITY CLASSES â€” Stage 6 CSP Hardening (Phase D)
   Replaces inline style= attributes to enable removal of unsafe-inline
   ==================================================================== */

/* Display */
.u-hidden        { display: none !important; }
.u-block         { display: block !important; }
.u-flex          { display: flex !important; }
.u-inline        { display: inline !important; }
.u-inline-block  { display: inline-block !important; }

/* Text alignment */
.u-text-left   { text-align: left !important; }
.u-text-center { text-align: center !important; }
.u-text-right  { text-align: right !important; }

/* Font weights */
.u-fw-normal   { font-weight: 400 !important; }
.u-fw-medium   { font-weight: 500 !important; }
.u-fw-semibold { font-weight: 600 !important; }
.u-fw-bold     { font-weight: 700 !important; }

/* Flex */
.u-flex-1           { flex: 1 !important; }
.u-flex-col         { flex-direction: column !important; }
.u-items-center     { align-items: center !important; }
.u-justify-between  { justify-content: space-between !important; }
.u-gap-1            { gap: 0.25rem !important; }
.u-gap-2            { gap: 0.5rem !important; }

/* Width */
.u-w-full  { width: 100% !important; }
.u-h-full  { height: 100% !important; }

/* Misc */
.u-cursor-pointer  { cursor: pointer !important; }
.u-no-wrap         { white-space: nowrap !important; }
.u-list-none       { list-style: none !important; }
.u-border-none     { border: none !important; }

/* ====================================================================
   SPQL SEMANTIC CLASSES â€” Phase D CSP Migration
   Auto-generated from 197 unique inline style patterns in app.js
   ==================================================================== */

/* === TOP PATTERNS (7-4x occurrence) === */
.sp-caption-muted   { font-size:12px;color:var(--text-muted) }
.sp-c-text          { color:var(--text) }
.sp-icon-sm         { margin-top:4px;width:18px;height:18px;cursor:pointer }
.sp-caption-muted-lh { font-size:12px;color:var(--text-muted);line-height:1.6 }
.sp-flex-start-12-ptr { display:flex;align-items:flex-start;gap:12px;cursor:pointer }
.sp-label-overline  { font-size:11px;color:var(--text-dim);letter-spacing:.15em;text-transform:uppercase;margin-bottom:8px }
.sp-h2-cg-28        { font-family:'Cormorant Garamond',serif;font-size:28px;color:var(--text);margin-bottom:24px }
.sp-h2-cg-24        { font-family:'Cormorant Garamond',serif;font-size:24px;color:var(--text);margin-bottom:24px }
.sp-card-32-mb32    { background:var(--surface);border:1px solid var(--border);padding:32px;margin-bottom:32px }
.sp-icon-18         { width:18px;height:18px }
.sp-txt-sm-4        { font-size:14px;color:var(--text);margin-bottom:4px }
.sp-callout-gold    { margin-bottom:20px;padding:16px;background:var(--surface2);border-left:3px solid var(--gold) }
.sp-th-dim          { padding:12px;text-align:left;font-size:11px;color:var(--text-dim);letter-spacing:.1em }
.sp-td-muted        { padding:12px;font-size:12px;color:var(--text-muted) }
.sp-th-dim-nols     { padding:12px;text-align:left;font-size:11px;color:var(--text-dim) }
.sp-c-gold          { color:var(--gold) }
.sp-mb-24           { margin-bottom:24px }
.sp-fs-32           { font-size:32px }
.sp-flex-center-8   { display:flex;align-items:center;justify-content:center;gap:8px }

/* === 3x patterns === */
.sp-txt-sm-6-med    { font-size:14px;color:var(--text);margin-bottom:6px;font-weight:500 }
.sp-border-bottom   { border-bottom:1px solid var(--border) }
.sp-txt-13-muted    { color:var(--text-muted);font-size:13px }
.sp-h3-cg-20-gold   { font-size:20px;color:var(--gold);font-family:'Cormorant Garamond',serif }
.sp-caption-muted-mb24 { font-size:12px;color:var(--text-muted);margin-bottom:24px }
.sp-flex-center-12-ptr { display:flex;align-items:center;gap:12px;cursor:pointer }
.sp-txt-xs-dim      { color:var(--text-dim);font-size:10px }
.sp-mt-8            { margin-top:8px }
.sp-card-32-mb24    { background:var(--surface);border:1px solid var(--border);padding:32px;margin-bottom:24px }
.sp-caption-muted-m0 { font-size:12px;color:var(--text-muted);margin:0 }

/* === 2x patterns === */
.sp-panel-bg-mb20   { margin-bottom:20px;padding:16px;background:var(--bg);border:1px solid var(--border) }
.sp-txt-13-muted-py8 { padding:8px 0;color:var(--text-muted);font-size:13px }
.sp-flex-center-8-ptr { display:flex;align-items:center;gap:8px;cursor:pointer }
.sp-list-bare       { list-style:none;padding:0 }
.sp-panel-bg-mb16   { margin-bottom:16px;padding:16px;background:var(--bg);border:1px solid var(--border) }
.sp-txt-sm-6        { font-size:14px;color:var(--text);margin-bottom:6px }
.sp-display-gold-32 { font-size:32px;font-family:'Cormorant Garamond',serif;color:var(--gold);font-weight:700;letter-spacing:.08em }
.sp-table-full      { width:100%;border-collapse:collapse }
.sp-label-overline-b { font-size:11px;color:var(--text-dim);letter-spacing:.12em;margin-bottom:8px }
.sp-fs-32-mb8       { font-size:32px;margin-bottom:8px }
.sp-card-32         { background:var(--surface);border:1px solid var(--border);padding:32px }
.sp-mr-8            { margin-right:8px }
.sp-link-gold       { color:var(--gold);text-decoration:underline }
.sp-txt-xs-main     { font-size:12px;color:var(--text-main) }
.sp-txt-xxs-muted   { font-size:11px;color:var(--text-muted) }
.sp-p-24            { padding:24px }
.sp-txt-13-muted-lh2 { color:var(--text-muted);line-height:2;margin-left:24px;font-size:13px }
.sp-txt-13-muted-lh2-b { color:var(--text-muted);font-size:13px;line-height:2 }
.sp-txt-muted-mb48  { color:var(--text-muted);margin-bottom:48px }
.sp-display-gold-48 { font-family:'Cormorant Garamond',serif;font-size:48px;color:var(--gold);margin-bottom:12px }
.sp-txt-16-gold-mb16 { font-size:16px;color:var(--gold);margin-bottom:16px }
.sp-mt-24           { margin-top:24px }

/* === 1x patterns === */
.sp-callout-surface2 { margin-top:24px;padding:20px;background:var(--surface2);border-radius:4px }
.sp-h2-cg-24-gold   { font-family:'Cormorant Garamond',serif;font-size:24px;color:var(--gold);margin-bottom:24px }
.sp-panel-surface2  { padding:16px;background:var(--surface2);border-radius:4px }
.sp-txt-xs-dim-mt4  { font-size:10px;color:var(--text-dim);margin-top:4px }
.sp-flex-center-12-dis { display:flex;align-items:center;gap:12px;cursor:not-allowed }
.sp-txt-xs-dim-p16  { color:var(--text-dim);font-size:12px;padding:16px }
.sp-wrap-900        { max-width:900px;margin:0 auto }
.sp-txt-sm-12       { font-size:14px;color:var(--text);margin-bottom:12px }
.sp-panel-bg        { padding:16px;background:var(--bg);border:1px solid var(--border) }
.sp-grid-2-16       { display:grid;grid-template-columns:repeat(2,1fr);gap:16px }
.sp-callout-success { margin-top:16px;padding:12px;background:rgba(58,125,68,0.1);border-left:3px solid var(--success) }
.sp-callout-gold-mt24 { margin-top:24px;padding:16px;background:rgba(201,151,58,0.1);border-left:3px solid var(--gold) }
.sp-p-32            { padding:32px }
.sp-flex-gap8       { display:flex;gap:8px }
.sp-txt-13-muted-lh2-ml20 { color:var(--text-muted);font-size:13px;line-height:2;margin-left:20px }
.sp-grid-3-20       { display:grid;grid-template-columns:repeat(3,1fr);gap:20px }
.sp-td-text         { padding:12px;font-size:12px;color:var(--text) }
.sp-txt-xs-dim-mb4  { font-size:11px;color:var(--text-dim);margin-bottom:4px }
.sp-callout-success-b { padding:16px;background:var(--surface2);border-left:3px solid var(--success) }
.sp-txt-sm-flex-sb  { font-size:14px;color:var(--text);display:flex;justify-content:space-between;align-items:center }
.sp-border-bottom-2 { border-bottom:2px solid var(--border) }
.sp-fs-18           { font-size:18px }
.sp-display-gold-64 { font-size:64px;font-family:'Cormorant Garamond',serif;color:var(--gold);font-weight:700 }
.sp-center-abs      { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) }
.sp-h1-cg-32        { font-family:'Cormorant Garamond',serif;font-size:32px;color:var(--text);margin-bottom:8px }
.sp-grid-auto-250   { display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px }
.sp-txt-sm-muted    { color:var(--text-muted);font-size:14px }
.sp-grid-4-16       { display:grid;grid-template-columns:repeat(4,1fr);gap:16px }
.sp-txt-sm-8-med    { font-size:14px;color:var(--text);margin-bottom:8px;font-weight:500 }
.sp-panel-surface2-center { padding:24px;background:var(--surface2);text-align:center }
.sp-label-overline-c { font-size:12px;color:var(--text-dim);letter-spacing:.1em;text-transform:uppercase }
.sp-display-gold-32-mb4 { font-size:32px;font-family:'Cormorant Garamond',serif;color:var(--gold);margin-bottom:4px }
.sp-td-13-muted     { padding:12px;font-size:13px;color:var(--text-muted) }
.sp-td-13-text      { padding:12px;font-size:13px;color:var(--text) }
.sp-grid-2-24       { display:grid;grid-template-columns:repeat(2,1fr);gap:24px }
.sp-panel-surface2-center-b { padding:20px;background:var(--surface2);text-align:center }
.sp-grid-3-16       { display:grid;grid-template-columns:repeat(3,1fr);gap:16px }
.sp-s6-001          { color:var(--text-muted);font-size:13px;line-height:1.6;margin:0 }
.sp-s6-002          { font-family:'Cormorant Garamond',serif;font-size:20px;color:var(--gold);margin-bottom:8px }
.sp-s6-003          { display:flex;gap:12px;flex-wrap:wrap }
.sp-fs-48-mb24      { font-size:48px;margin-bottom:24px }
.sp-grid-empty      { grid-column:1/-1;padding:80px 24px;text-align:center;max-width:500px;margin:0 auto }
.sp-caption-muted-mt24 { margin-top:24px;font-size:12px;color:var(--text-muted) }
.sp-wrap-800        { max-width:800px }
.sp-s6-004          { flex:1;min-width:300px }
.sp-s6-005          { max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:24px;flex-wrap:wrap }
.sp-card-gold-48    { background:var(--surface);border:2px solid var(--gold);padding:48px;text-align:center;margin-bottom:32px }
.sp-wrap-1200       { max-width:1200px;margin:0 auto }
.sp-label-overline-d { font-size:14px;letter-spacing:.15em;text-transform:uppercase;color:var(--text-dim);margin-bottom:16px }
.sp-rotate-90       { transform:rotate(-90deg) }
.sp-avatar-wrap     { width:200px;height:200px;margin:0 auto 24px;position:relative }
.sp-txt-muted-mb32  { color:var(--text-muted);margin-bottom:32px;line-height:1.8 }
.sp-h1-cg-32-gold   { font-family:'Cormorant Garamond',serif;font-size:32px;color:var(--gold);margin-bottom:16px }
.sp-txt-xs-dim-mt8  { font-size:11px;color:var(--text-dim);margin-top:8px }
.sp-grid-auto-180   { display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px }
.sp-h1-cg-36-gold   { font-family:'Cormorant Garamond',serif;font-size:36px;color:var(--gold,#c8a96e);margin-bottom:24px }
.sp-txt-xs-muted    { color:var(--text-muted);font-size:12px }
.sp-txt-16-mb12     { font-size:16px;color:var(--text);margin-bottom:12px }
.sp-callout-success-lg { background:rgba(58,125,68,0.1);padding:24px;border-left:3px solid var(--success);margin-bottom:32px }
.sp-txt-13-muted-lh18 { color:var(--text-muted);font-size:13px;line-height:1.8;margin-bottom:12px }
.sp-txt-16-gold-mb20 { font-size:16px;color:var(--gold);margin-bottom:20px }
.sp-panel-border-24 { border:1px solid var(--border);padding:24px;margin-bottom:24px }
.sp-fs-32-gold-mb12 { font-size:32px;color:var(--gold);margin-bottom:12px }
.sp-fs-48-mb8       { font-size:48px;margin-bottom:8px }
.sp-txt-muted-wrap600 { color:var(--text-muted);max-width:600px;margin:0 auto }
.sp-txt-16-mb16     { font-size:16px;color:var(--text);margin-bottom:16px }
.sp-panel-surface2-b24 { background:var(--surface2);padding:24px;border:1px solid var(--border);margin-bottom:24px }
.sp-section-hdr     { font-size:16px;color:var(--text);margin:32px 0 20px;padding-top:24px;border-top:1px solid var(--border) }
.sp-card-bg-mb16    { margin-bottom:16px;padding:16px;background:var(--bg-card);border:1px solid var(--border);border-radius:4px }
.sp-filter-btn      { flex:1;min-width:80px;display:flex;align-items:center;gap:6px;cursor:pointer;font-size:11px;color:var(--text-muted) }
.sp-label-overline-e { font-size:11px;color:var(--text-dim);margin-bottom:8px;letter-spacing:.06em }
.sp-cta-gold        { margin-top:24px;padding:20px;background:var(--bg-card);border:2px solid var(--gold);border-radius:4px;text-align:center }
.sp-flex-gap12      { display:flex;gap:12px }
.sp-txt-13-muted-lh18-0 { font-size:13px;color:var(--text-muted);line-height:1.8;margin:0 }
.sp-callout-danger  { background:rgba(155,35,53,0.1);padding:20px;border-left:3px solid var(--danger);margin-bottom:24px }
.sp-card-bg-mb20    { margin-bottom:20px;padding:16px;background:var(--bg-card);border:1px solid var(--border);border-radius:4px }
.sp-flex-wrap-8     { display:flex;gap:8px;flex-wrap:wrap }
.sp-txt-13-main-med { font-size:13px;color:var(--text-main);margin-bottom:12px;font-weight:500 }
.sp-txt-13-success-bold { font-size:13px;font-weight:600;color:var(--success);margin-bottom:6px }
.sp-callout-success-c { margin-top:16px;padding:16px;background:rgba(58,125,68,.1);border:1px solid var(--success);border-radius:4px }
.sp-card-bg-center  { background:var(--bg-card);border:1px solid var(--border);border-radius:4px;padding:32px;text-align:center }
.sp-callout-gold-b  { padding:16px;background:rgba(201,151,58,.1);border:1px solid var(--gold);border-radius:4px;font-size:12px;color:var(--gold) }
.sp-fs-32-muted     { font-size:32px;color:var(--text-muted);margin-bottom:12px }
.sp-flex-1          { flex:1 }
.sp-mb-20-fs13      { margin-bottom:20px;font-size:13px }
.sp-center-mb32     { text-align:center;margin-bottom:32px }
.sp-modal-hdr       { padding:20px 24px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center }
.sp-card-bg-overflow { background:var(--bg-card);border:1px solid var(--border);border-radius:4px;overflow:hidden }
.sp-label-overline-f { font-size:11px;color:var(--text-muted);letter-spacing:.08em;margin-bottom:4px }
.sp-text-right      { text-align:right }
.sp-h3-cg-20-gold-b { font-size:20px;font-weight:700;color:var(--gold);font-family:Cormorant Garamond,serif }
.sp-grid-2-16-mb24  { display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:24px }
.sp-panel-bg-mb8    { padding:12px;background:var(--bg);border:1px solid var(--border);margin-bottom:8px }
.sp-txt-muted-mb16  { color:var(--text-muted);margin-bottom:16px }
.sp-float-right-xs  { float:right;font-size:11px;color:var(--text-dim) }
.sp-panel-bg-20     { padding:20px;background:var(--bg);border:1px solid var(--border) }
.sp-empty-dim       { color:var(--text-dim);text-align:center;padding:40px }
.sp-section-sep     { margin-top:16px;padding-top:16px;border-top:1px solid var(--border) }
.sp-txt-xs-dim-center { color:var(--text-dim);font-size:12px;text-align:center;padding:20px }
.sp-inline-200      { max-width:200px;display:inline-block }
.sp-txt-lh18-mb16   { color:var(--text);line-height:1.8;margin-bottom:16px }
.sp-txt-xs-muted-ml12 { margin-left:12px;font-size:12px;color:var(--text-muted) }
.sp-txt-mb12        { color:var(--text);margin-bottom:12px }
.sp-flex-sb-mb12    { display:flex;justify-content:space-between;align-items:start;margin-bottom:12px }
.sp-empty-dim-b     { text-align:center;color:var(--text-dim);padding:20px }
.sp-badge-xs        { padding:4px 12px;font-size:10px }
.sp-txt-xs-dim-mb12 { margin-bottom:12px;font-size:11px;color:var(--text-dim) }
.sp-badge-danger    { padding:4px 12px;font-size:10px;background:var(--danger);border-color:var(--danger);color:#fff }
.sp-progress-wrap   { height:24px;margin:16px 0 }
.sp-flex-sb-fs13-muted { display:flex;justify-content:space-between;font-size:13px;color:var(--text-muted) }
.sp-txt-xs-dim-ml12 { color:var(--text-dim);font-size:11px;margin-left:12px }
.sp-txt-lh18-mb24   { color:var(--text);line-height:1.8;margin-bottom:24px }
.sp-wrap-720        { max-width:720px;margin:0 auto }
.sp-display-gold-40 { font-size:40px;font-family:'Cormorant Garamond',serif;color:var(--gold);font-weight:700;letter-spacing:.12em }
.sp-mb-40           { margin-bottom:40px }
.sp-flex-16-mb24    { display:flex;gap:16px;margin-bottom:24px }
.sp-fs-24-gold-mb16 { font-size:24px;color:var(--gold);margin-bottom:16px }
.sp-flex-center-100 { flex:1;min-width:100px;text-align:center }
.sp-flex-wrap-8-mt12 { display:flex;gap:8px;flex-wrap:wrap;margin-top:12px }
.sp-h2-cg-24-gold-bold { font-size:24px;font-weight:700;color:var(--gold);font-family:'Cormorant Garamond',serif }
.sp-center-p16      { text-align:center;padding:16px }
.sp-txt-xs-dim-ls   { font-size:10px;color:var(--text-dim);letter-spacing:.06em }
.sp-form-footer     { display:flex;gap:12px;justify-content:flex-end;margin-top:32px;padding-top:24px;border-top:1px solid var(--border) }
.sp-flex-center-gap12 { display:flex;gap:12px;justify-content:center }
.sp-txt-xxs-muted-mt8 { font-size:11px;color:var(--text-muted);margin-top:8px }
.sp-w-full          { width:100% }
.sp-mb-12           { margin-bottom:12px }
.sp-txt-xs-gold-ml8 { font-size:10px;color:var(--gold);margin-left:8px }
.sp-fs-64-mb24      { font-size:64px;margin-bottom:24px }
.sp-empty-wrap      { max-width:600px;margin:0 auto;text-align:center;padding:80px 24px }
.sp-fs-28-gold-mb16 { font-size:28px;color:var(--gold);margin-bottom:16px }
.sp-card-gold-bg    { padding:24px;background:var(--bg-card);border:2px solid var(--gold);border-radius:8px;margin-bottom:32px }
.sp-txt-13-muted-mb32 { font-size:13px;color:var(--text-muted);margin-bottom:32px;line-height:1.7 }
.sp-callout-crimson { margin-top:16px;padding:16px;background:rgba(155,35,53,.1);border:1px solid var(--crimson);border-radius:4px;font-size:12px;color:var(--text-muted) }
.sp-opacity-30      { opacity:0.3 }
.sp-grid-2-20-mb24  { display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-bottom:24px }

/* === Manual fix classes (D4 pass) === */
.sp-txt-sm-main-6   { font-size:14px;color:var(--text-main);margin-bottom:6px }
.sp-txt-xxs-muted-mt3 { font-size:11px;color:var(--text-muted);margin-top:3px }
.sp-btn-cookie-accept {
  padding: 10px 24px;
  background: var(--gold);
  color: var(--bg);
  border: none;
  cursor: pointer;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 13px;
  transition: all 0.2s;
}
.sp-link-cookie-learn {
  padding: 10px 24px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  text-decoration: none;
  display: inline-block;
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  transition: all 0.2s;
}


/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
   Phase D â€“ index.html extracted classes
   â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
.sp-pn-user-zone     { display:flex; align-items:center; gap:8px; margin-left:auto; padding:0 16px; }
.sp-logo-svg         { display:block; flex-shrink:0; }
.sp-lf-main          { margin-top:20px; text-align:center; }
.sp-lf-reg           { margin-top:16px; text-align:center; font-size:11px; color:var(--text-muted); }
.sp-lang-sep-hero    { color:rgba(255,255,255,.3); }
.sp-ta-center-mt40   { text-align:center; margin-top:40px; }
.sp-ta-center-mb48   { text-align:center; margin-bottom:48px; }
.sp-ta-center-mb40   { text-align:center; margin-bottom:40px; }
.sp-shortcuts-modal  { background:var(--surface,#1e1e2e); border:1px solid var(--border,#3a3a4a); padding:32px; max-width:480px; width:90%; }
.sp-shortcuts-h3     { font-family:'Cormorant Garamond',serif; font-size:24px; color:var(--gold,#c8a96e); margin-bottom:16px; }
.sp-shortcuts-ul     { list-style:none; padding:0; color:var(--text,#e0e0e0); }
.sp-shortcuts-li     { padding:6px 0; }
.sp-shortcuts-close-btn { margin-top:16px; padding:8px 20px; background:var(--gold,#c8a96e); border:none; cursor:pointer; }
.sp-site-footer      { position:fixed; bottom:0; left:0; right:0; padding:8px 24px; background:var(--surface); border-top:1px solid var(--border); display:flex; gap:16px; justify-content:center; font-size:11px; color:var(--text-dim); }
.sp-footer-link      { color:var(--text-dim); }

/* ══════════════════════════════════════════════════════════════
   Phase E — Stage 7: CSP template-literal style= refactor
   Replaces 11 inline style= attrs in app.js with CSS classes
   ══════════════════════════════════════════════════════════════ */

/* Group 1 — renderApplicationStepper() step list rows */
.sp-step-row          { display:flex; gap:16px; align-items:flex-start; padding:14px 0; }
.sp-step-row--sep     { border-bottom:1px solid var(--border); }
.sp-step-icon         { font-size:18px; width:24px; flex-shrink:0; text-align:center; color:var(--text-muted); }
.sp-step-icon--active { color:var(--gold); }
.sp-step-lbl          { font-size:13px; font-weight:600; color:var(--text-muted); }
.sp-step-lbl--done    { color:var(--text-main); }
.sp-step-lbl--active  { color:var(--gold); }

/* Group 2 — renderApplicationFlow() progress step bar */
.sp-stepbar-col          { display:flex; flex-direction:column; align-items:center; gap:4px; flex:1; cursor:default; }
.sp-stepbar-col--click   { cursor:pointer; }
.sp-stepbar-dot          { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; transition:all .2s; background:var(--bg-card); color:var(--text-dim); border:2px solid var(--border); }
.sp-stepbar-dot--done    { background:var(--gold); color:#fff; border-color:transparent; }
.sp-stepbar-dot--current { background:var(--crimson); color:#fff; border-color:transparent; }
.sp-stepbar-lbl          { font-size:10px; color:var(--text-dim); text-align:center; letter-spacing:.04em; }
.sp-stepbar-lbl--active  { color:var(--text-main); }

/* Group 3 — MBTI pair choice labels (renderApplicationFlow vote step) */
.sp-vote-opt       { flex:1; padding:12px; background:var(--bg-deep); border:1px solid var(--border); border-radius:4px; cursor:pointer; transition:all .2s; font-size:12px; color:var(--text-main); display:block; }
.sp-vote-opt--sel  { background:var(--crimson-dark); border-color:var(--gold); }

/* Group 6 — Audit log result column (viewAuditTrail) */
.sp-td-result      { padding:12px; font-size:12px; color:var(--danger); }
.sp-td-result--ok  { color:var(--success); }

/* [Stage8-C/D] Loading state helper — replaces inline style on loading paragraphs (CSP compliance) */
.sp-loading-center {
  text-align: center;
  padding: 1rem;
  color: var(--muted, #888);
}

/* [Stage 10-E] inline-style migration — replaces element.style.* in app.js */

/* doLogin() error display (lines 834/837/841) */
.err-visible { display: block !important; }

/* showScreen() body scroll lock (line 890) */
body.sp-no-scroll { overflow: hidden; }

/* toast() dismiss animation (line 913) */
.toast-dismiss { animation: slideOutRight 0.3s ease forwards; }

/* renderProjectDetail() member count label (line 2139) */
.sp-count-label { color: var(--text-muted); margin-bottom: 16px; }

/* cookie banner layout — replaces banner.style.cssText (line 3825) */
#cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--surface2);
  border-top: 2px solid var(--gold);
  padding: 24px;
  z-index: 10000;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
}

/* cookie accept button hover — replaces mouseover/mouseout JS (lines 3866-3867) */
#cookie-accept-btn:hover { background: var(--gold-light) !important; }

/* cookie banner fade-out — replaces banner.style.transition + opacity (lines 3893-3894) */
.cookie-banner-hiding {
  opacity: 0;
  transition: opacity 0.3s;
}
