
:root {
  --bg: #0f090d;
  --bg-2: #1a1016;
  --panel: rgba(26, 13, 20, 0.84);
  --panel-border: rgba(255, 180, 216, 0.12);
  --text: #f6edf2;
  --muted: #d0b4c2;
  --accent: #f15aa7;
  --accent-2: #ff8a2b;
  --accent-3: #ffbfdc;
  --danger: #ff8d98;
  --success: #f7b85f;
  --shadow: 0 20px 50px rgba(0, 0, 0, 0.42);
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --max-width: 1400px;
  --font: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin:0; min-height:100%; background:
radial-gradient(circle at top right, rgba(241,90,167,0.18), transparent 28%),
radial-gradient(circle at left center, rgba(255,138,43,0.12), transparent 25%),
linear-gradient(180deg, #0b0609 0%, #150b11 100%); color: var(--text); font-family: var(--font); }
body { min-height:100vh; } img { max-width:100%; display:block; } button,input,select{font:inherit;}
.app-shell { min-height:100vh; } .view { display:none; min-height:100vh; } .view.active { display:block; }
.glass { background: var(--panel); border: 1px solid var(--panel-border); box-shadow: var(--shadow); backdrop-filter: blur(16px); }
.login-view { position:relative; display:none; align-items:center; justify-content:center; padding:24px; overflow:hidden; }
.login-view.active { display:flex; }
.login-panel { position:relative; width:min(920px, 100%); padding:42px; border-radius:28px; z-index:2; }
.background-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size:60px 60px; mask-image: radial-gradient(circle at center, black 10%, transparent 85%); opacity:0.6;}
.brand-row { display:flex; align-items:center; gap:20px; }
.brand-logo { width:82px; height:82px; object-fit:contain; } .brand-logo.small { width:48px; height:48px; }
.eyebrow { margin:0 0 6px; color: var(--accent); text-transform:uppercase; letter-spacing:0.16em; font-size:0.72rem; font-weight:700; }
h1,h2,h3,h4{ margin:0; line-height:1.1;} h1{ font-size:clamp(2.2rem,4vw,4rem); max-width:12ch;} h2{font-size:clamp(1.6rem,2.8vw,2.3rem);} h3{font-size:1.35rem;} h4{font-size:1.05rem;}
.subtitle,.intro-copy,.panel-head p,.empty-state p,.meta-chip,.detail-note,.utility-text{ color:var(--muted);}
.intro-copy { margin:22px 0 28px; max-width:65ch; line-height:1.7; }
.login-form label,.field-group label{ display:block; margin-bottom:10px; font-size:0.94rem; font-weight:600;}
.password-row,.form-actions,.topbar,.card-actions,.protocol-actions{ display:flex; gap:12px; }
.password-row input,.field-group input,.field-group select{ width:100%; border:1px solid rgba(255,255,255,0.08); background: rgba(8,13,24,0.82); color:var(--text); border-radius:14px; padding:14px 16px; outline:none; }
.password-row input:focus,.field-group input:focus,.field-group select:focus{ border-color:rgba(241,90,167,0.58); box-shadow:0 0 0 3px rgba(241,90,167,0.18);}
.error-text { min-height:1.4em; color:var(--danger); margin:10px 0 0; font-size:0.92rem; }
.btn{ border:0; border-radius:14px; padding:13px 18px; cursor:pointer; font-weight:700; transition:transform .18s ease, opacity .18s ease, background-color .18s ease;}
.btn:hover{ transform:translateY(-1px);} .btn:active{ transform:translateY(0);}
.btn-primary{ background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#1c0d12;}
.btn-secondary{ background: rgba(241,90,167,0.10); color:var(--text); border:1px solid rgba(241,90,167,0.20);}
.btn-ghost{ background:transparent; color:var(--muted); border:1px solid rgba(255,255,255,0.08);}
.dashboard-view,.protocol-view,.library-view{ padding:20px; }
.topbar{ justify-content:space-between; align-items:center; max-width:var(--max-width); margin:0 auto 20px;}
.topbar-left,.topbar-actions{ display:flex; align-items:center; gap:14px; }
.dashboard-grid{ max-width:var(--max-width); margin:0 auto; display:grid; grid-template-columns:minmax(340px,420px) minmax(0,1fr); gap:20px;}
.panel{ border-radius:var(--radius-lg); padding:26px;}
.panel-head{ margin-bottom:20px;} .panel-head p{ margin:10px 0 0; line-height:1.6;}
.filters-form{ display:grid; gap:16px;}
.results-container,.library-container{ display:grid; gap:16px;} .hidden{ display:none !important;}
.empty-state{ min-height:420px; border:1px dashed rgba(255,255,255,0.10); border-radius:var(--radius-lg); display:grid; place-items:center; text-align:center; padding:24px;}
.empty-icon{ width:68px; height:68px; border-radius:999px; display:grid; place-items:center; background:rgba(241,90,167,0.12); border:1px solid rgba(241,90,167,0.22); font-size:1.8rem; margin:0 auto 14px;}
.result-card,.library-card{ border:1px solid rgba(255,255,255,0.08); border-radius:20px; background:rgba(7,12,23,0.6); padding:22px;}
.result-card.primary{ border-color:rgba(241,90,167,0.28); background: linear-gradient(180deg, rgba(241,90,167,0.10), rgba(17,8,13,0.66));}
.result-card.secondary{ border-color:rgba(255,138,43,0.26); background: linear-gradient(180deg, rgba(255,138,43,0.08), rgba(17,8,13,0.60));}
.card-kicker{ margin-bottom:10px; color:var(--accent); text-transform:uppercase; letter-spacing:0.14em; font-size:0.72rem; font-weight:800;}
.card-title-row{ display:flex; justify-content:space-between; align-items:start; gap:16px;}
.card-title-row h4{ font-size:1.15rem; margin-bottom:10px;}
.meta-row{ display:flex; flex-wrap:wrap; gap:10px; margin:14px 0 16px;}
.meta-chip{ background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.07); border-radius:999px; padding:8px 12px; font-size:0.84rem;}
.card-body p{ margin:0 0 12px; line-height:1.68;}
.card-actions{ margin-top:14px; flex-wrap:wrap; }
.recommendation-why{ border-top:1px solid rgba(255,255,255,0.08); margin-top:20px; padding-top:18px;}
.recommendation-why p{ margin:8px 0 0; line-height:1.65; }
.protocol-view{ max-width:1120px; margin:0 auto; }
.protocol-card{ background:#fff; color:#141821; border-radius:28px; padding:42px 48px; box-shadow:var(--shadow); min-height:calc(100vh - 120px);}
.protocol-card h1{ color:#101521; max-width:none; font-size:clamp(2rem,4vw,3rem); margin-bottom:10px;}
.protocol-card .protocol-subhead{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:24px;}
.protocol-card .subhead-chip{ background:#edf2fa; color:#344054; border-radius:999px; padding:9px 12px; font-size:0.84rem; font-weight:600;}
.protocol-grid{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(260px,0.62fr); gap:22px;}
.protocol-section,.protocol-sidebox{ border:1px solid #e7edf5; border-radius:18px; padding:20px; background:#fff;}
.protocol-section h3,.protocol-sidebox h3{ margin-bottom:12px; color:#111827; font-size:1.02rem;}
.protocol-section p,.protocol-sidebox p,.protocol-section li,.protocol-sidebox li{ margin:0; color:#2b3445; line-height:1.72; font-size:0.98rem;}
.protocol-list{ display:grid; gap:8px; padding-left:18px; margin:0; } .side-grid{ display:grid; gap:16px;}
.protocol-footer-note{ margin-top:22px; padding-top:18px; border-top:1px solid #e7edf5; color:#576175; font-size:0.9rem;}
.library-layout{ max-width:var(--max-width); margin:0 auto; display:grid; grid-template-columns:minmax(280px,340px) minmax(0,1fr); gap:20px;}
.library-card .card-title-row h4{ margin-bottom:8px;} .library-card p{ margin:0; line-height:1.6;}
@media (max-width:1080px){ .dashboard-grid,.library-layout,.protocol-grid{ grid-template-columns:1fr; } }
@media (max-width:760px){ .login-panel,.panel,.protocol-card{ padding:24px;} .brand-row,.topbar,.topbar-left,.topbar-actions,.password-row,.card-actions{ flex-direction:column; align-items:stretch;} h1{ max-width:none;} }
@media print {
body{ background:#fff; color:#111827; }
.no-print{ display:none !important; }
.protocol-view{ padding:0; max-width:none; }
.protocol-card{ box-shadow:none; border-radius:0; min-height:auto; padding:22mm 18mm; }
.protocol-card .subhead-chip{ background:#f2f4f7; }
}

.optional-note{ color: var(--muted); font-weight:500; }
.btn-small{ padding:10px 14px; font-size:0.92rem; }
.candidates-header,.selection-complete-head{ display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:14px; }
.selected-pill{ color:var(--muted); font-size:0.95rem; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:999px; padding:10px 14px; }
.candidates-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.candidate-card{ border:1px solid rgba(255,255,255,0.08); border-radius:18px; background:rgba(8,5,7,0.74); padding:16px; }
.candidate-card h4{ font-size:1rem; margin:4px 0 10px; }
.eyebrow.compact{ margin-bottom:4px; font-size:0.67rem; }
.mini-meta-row{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.mini-copy{ margin:0 0 8px; line-height:1.45; font-size:0.93rem; color:var(--muted); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.candidate-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.selected-results-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.error-box{ padding:16px; border-radius:16px; border:1px solid rgba(255,255,255,0.08); background:rgba(49,12,20,0.7); color:var(--text); }
@media (max-width:900px){ .candidates-grid,.selected-results-grid{ grid-template-columns:1fr; } }
