/* ===================================================================== AI Council — "Council Chamber" theme Dark (default) + light, set via [data-theme] on . Display: Fraunces · Body: Inter · Mono: IBM Plex Mono ===================================================================== */ :root { --ink-900:#0B1120; --ink-800:#0F1626; --ink-700:#121A2B; --ink-600:#18223A; --line:#243049; --line-soft:#1B2333; --ivory:#E8E6DF; --ivory-dim:#AEB4C2; --muted:#7C8499; --gold:#C8A24B; --gold-soft:#9E7F38; --gold-glow:rgba(200,162,75,.14); --bad:#E0685C; --good:#5BBF8A; --bg:var(--ink-900); --surface:var(--ink-700); --surface-2:var(--ink-800); --text:var(--ivory); --text-dim:var(--ivory-dim); --border:var(--line); --accent:var(--gold); --r-sm:8px; --r:12px; --r-lg:18px; --shadow:0 18px 50px -24px rgba(0,0,0,.7); --maxw:1180px; --f-display:"Fraunces",Georgia,serif; --f-body:"Inter",system-ui,sans-serif; --f-mono:"IBM Plex Mono",ui-monospace,monospace; } [data-theme="light"] { --bg:#F3F1E9; --surface:#FBFAF5; --surface-2:#FFFFFF; --text:#1C2030; --text-dim:#566074; --muted:#8089A0; --border:#E2DDCD; --line:#E2DDCD; --line-soft:#ECE7D8; --gold:#9A7B2E; --accent:#9A7B2E; --gold-glow:rgba(154,123,46,.12); --shadow:0 16px 40px -28px rgba(40,40,40,.4); } * { box-sizing:border-box; } html,body { margin:0; padding:0; } body { background:var(--bg); color:var(--text); font-family:var(--f-body); font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased; min-height:100vh; display:flex; flex-direction:column; } a { color:inherit; text-decoration:none; } ::selection { background:var(--gold-glow); } /* -- Typography ------------------------------------------------------ */ h1,h2,h3 { font-family:var(--f-display); font-weight:600; letter-spacing:-.01em; margin:0; } .muted { color:var(--muted); } .small { font-size:13px; } .pad { padding:14px 16px; } /* -- Top bar --------------------------------------------------------- */ .topbar { display:flex; align-items:center; gap:18px; padding:0 22px; height:60px; background:linear-gradient(180deg,var(--surface-2),transparent); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:40; backdrop-filter:blur(8px); } .brand { display:flex; align-items:center; gap:9px; font-family:var(--f-display); font-weight:600; font-size:18px; } .brand-center { justify-content:center; margin-bottom:22px; font-size:20px; } .brand-mark { display:inline-grid; place-items:center; width:30px; height:30px; border-radius:8px; background:radial-gradient(circle at 30% 30%,var(--gold),var(--gold-soft)); color:#1a1306; font-size:17px; box-shadow:0 0 0 1px var(--gold-glow); } .brand-text { color:var(--text); } .topnav { display:flex; align-items:center; gap:4px; margin-left:8px; } .topnav a { padding:7px 12px; border-radius:8px; color:var(--text-dim); font-weight:500; font-size:14px; } .topnav a:hover { color:var(--text); background:var(--surface); } .topbar-right { margin-left:auto; display:flex; align-items:center; gap:12px; } .who { color:var(--text-dim); font-size:14px; } .icon-btn { background:none; border:1px solid var(--border); color:var(--text-dim); width:34px; height:34px; border-radius:9px; cursor:pointer; font-size:15px; } .icon-btn:hover { color:var(--gold); border-color:var(--gold-soft); } .pill { font-family:var(--f-mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--gold); border:1px solid var(--gold-soft); padding:2px 8px; border-radius:999px; } /* -- Buttons --------------------------------------------------------- */ .btn { font-family:var(--f-body); font-weight:600; font-size:14px; cursor:pointer; border:1px solid transparent; border-radius:10px; padding:10px 18px; transition:transform .06s ease, background .15s ease, border-color .15s ease; } .btn:active { transform:translateY(1px); } .btn-sm { padding:6px 12px; font-size:13px; border-radius:8px; } .btn-block { width:100%; } .btn-gold { background:linear-gradient(180deg,var(--gold),var(--gold-soft)); color:#1a1306; } .btn-gold:hover { filter:brightness(1.06); } .btn-ghost { background:transparent; border-color:var(--border); color:var(--text-dim); } .btn-ghost:hover { color:var(--text); border-color:var(--gold-soft); } .btn:disabled { opacity:.5; cursor:not-allowed; } /* -- Shell / footer -------------------------------------------------- */ .shell { flex:1; width:100%; max-width:var(--maxw); margin:0 auto; padding:26px 22px 40px; } .footer { border-top:1px solid var(--border); color:var(--muted); font-size:13px; text-align:center; padding:18px; } /* ===================================================================== Landing ===================================================================== */ .landing { } .hero { width:100%; max-width:var(--maxw); margin:0 auto; padding:60px 22px 30px; flex:1; } .hero-inner { max-width:760px; } .eyebrow { font-family:var(--f-mono); text-transform:uppercase; letter-spacing:.22em; font-size:12px; color:var(--gold); margin:0 0 14px; } .hero-title { font-size:clamp(40px,6.5vw,72px); line-height:1.02; font-weight:600; letter-spacing:-.02em; } .hero-sub { color:var(--text-dim); font-size:18px; max-width:620px; margin:22px 0 28px; } .hero-cta { display:flex; gap:12px; flex-wrap:wrap; } .council-row { display:flex; gap:10px; flex-wrap:wrap; margin-top:40px; } .chip { font-family:var(--f-mono); font-size:13px; padding:6px 13px; border-radius:999px; color:var(--c); border:1px solid color-mix(in srgb,var(--c) 40%,transparent); background:color-mix(in srgb,var(--c) 8%,transparent); } .phases { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:56px; } .phase-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:22px; position:relative; overflow:hidden; } .phase-card::before { content:""; position:absolute; inset:0 auto 0 0; width:3px; background:linear-gradient(180deg,var(--gold),transparent); } .phase-no { font-family:var(--f-mono); color:var(--gold); font-size:13px; letter-spacing:.1em; } .phase-card h3 { font-size:19px; margin:8px 0 6px; } .phase-card p { color:var(--text-dim); font-size:14px; margin:0; } /* ===================================================================== Auth ===================================================================== */ .auth-body { align-items:center; justify-content:center; padding:30px 18px; background:radial-gradient(1200px 600px at 50% -10%,var(--gold-glow),transparent),var(--bg); } .auth-card { width:100%; max-width:400px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:32px 28px; box-shadow:var(--shadow); margin:auto; } .auth-title { font-size:26px; text-align:center; } .auth-sub { color:var(--text-dim); text-align:center; font-size:14px; margin:6px 0 22px; } .auth-form { display:flex; flex-direction:column; gap:14px; } .auth-form label { display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--text-dim); } .auth-foot { text-align:center; color:var(--text-dim); font-size:14px; margin:18px 0 0; } .auth-foot a { color:var(--gold); } input,select,textarea { font-family:var(--f-body); font-size:15px; color:var(--text); background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:11px 13px; width:100%; outline:none; transition:border-color .15s, box-shadow .15s; } input:focus,select:focus,textarea:focus { border-color:var(--gold-soft); box-shadow:0 0 0 3px var(--gold-glow); } textarea { resize:vertical; line-height:1.55; } .alert { border-radius:10px; padding:11px 14px; font-size:14px; margin-bottom:16px; } .alert-error { background:color-mix(in srgb,var(--bad) 12%,transparent); border:1px solid color-mix(in srgb,var(--bad) 40%,transparent); color:var(--bad); } /* ===================================================================== Workspace (dashboard) ===================================================================== */ .workspace { display:grid; grid-template-columns:260px 1fr; gap:24px; align-items:start; } .sidebar { position:sticky; top:84px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; max-height:calc(100vh - 110px); display:flex; flex-direction:column; } .sidebar-head { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--border); font-family:var(--f-display); font-size:15px; } .history-list { overflow-y:auto; padding:8px; } .history-item { display:block; padding:10px 12px; border-radius:9px; cursor:pointer; border:1px solid transparent; } .history-item:hover { background:var(--surface-2); border-color:var(--border); } .history-item .h-title { font-size:14px; color:var(--text); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .history-item .h-meta { font-size:11.5px; color:var(--muted); font-family:var(--f-mono); } .history-item .h-del { float:right; color:var(--muted); border:none; background:none; cursor:pointer; font-size:13px; } .history-item .h-del:hover { color:var(--bad); } .main-col { min-width:0; } /* Composer */ .composer { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:18px; box-shadow:var(--shadow); } .composer textarea { border:none; background:transparent; padding:6px 4px; font-size:17px; } .composer textarea:focus { box-shadow:none; } .composer-controls { display:flex; align-items:center; gap:14px; flex-wrap:wrap; border-top:1px solid var(--line-soft); padding-top:14px; margin-top:6px; } .seg { display:inline-flex; background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:3px; } .seg button { border:none; background:none; color:var(--text-dim); font-family:var(--f-body); font-size:13px; font-weight:600; padding:7px 14px; border-radius:8px; cursor:pointer; } .seg button.is-active { background:var(--gold-glow); color:var(--gold); box-shadow:inset 0 0 0 1px var(--gold-soft); } .judge-pick { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-dim); } .judge-pick select { width:auto; padding:7px 10px; font-size:13px; } .composer-actions { margin-left:auto; display:flex; align-items:center; gap:14px; } .estimate { font-family:var(--f-mono); font-size:13px; color:var(--gold); } .council-preview { display:flex; gap:7px; flex-wrap:wrap; margin-top:14px; } .council-preview .chip { font-size:12px; padding:4px 10px; } /* Run status */ .run-status { margin-top:22px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:16px 18px; } .run-bar { height:6px; border-radius:999px; background:var(--surface-2); overflow:hidden; } .run-bar span { display:block; height:100%; width:8%; background:linear-gradient(90deg,var(--gold-soft),var(--gold)); transition:width .5s ease; } .run-label { font-size:13px; color:var(--text-dim); margin-top:10px; font-family:var(--f-mono); } /* Empty state */ .empty { text-align:center; color:var(--muted); padding:70px 20px; } .empty-mark { font-size:46px; color:var(--gold-soft); opacity:.5; } .empty p { margin-top:10px; } /* ===================================================================== Result + tabs ===================================================================== */ .result { margin-top:22px; } .result-head { display:flex; align-items:flex-start; gap:16px; margin-bottom:14px; } .result-q { font-family:var(--f-display); font-size:21px; line-height:1.3; flex:1; } .result-tools { display:flex; gap:8px; flex-shrink:0; } .tabs { display:flex; gap:4px; flex-wrap:wrap; border-bottom:1px solid var(--border); } .tab { background:none; border:none; color:var(--text-dim); font-family:var(--f-body); font-weight:600; font-size:14px; padding:11px 14px; cursor:pointer; position:relative; border-radius:8px 8px 0 0; } .tab:hover { color:var(--text); } .tab.is-active { color:var(--gold); } .tab.is-active::after { content:""; position:absolute; left:10px; right:10px; bottom:-1px; height:2px; background:var(--gold); border-radius:2px; } .tab-panels { padding-top:20px; } .panel { display:none; } .panel.is-active { display:block; animation:fade .25s ease; } @keyframes fade { from{opacity:0;transform:translateY(4px);} to{opacity:1;transform:none;} } /* Cards inside panels */ .final-card { background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--gold); border-radius:var(--r); padding:22px 24px; box-shadow:var(--shadow); } .final-top { display:flex; align-items:center; gap:12px; margin-bottom:14px; } .judge-badge { font-family:var(--f-mono); font-size:12px; color:var(--gold); border:1px solid var(--gold-soft); padding:3px 9px; border-radius:999px; } .member-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:18px 20px; margin-bottom:14px; border-top:2px solid var(--mc,var(--gold)); } .member-top { display:flex; align-items:center; gap:10px; margin-bottom:6px; } .member-name { font-family:var(--f-display); font-size:17px; font-weight:600; } .member-dot { width:9px; height:9px; border-radius:50%; background:var(--mc,var(--gold)); } .member-fail { color:var(--bad); font-size:14px; } /* Confidence meter */ .conf { margin-left:auto; display:flex; align-items:center; gap:8px; font-family:var(--f-mono); font-size:12px; color:var(--text-dim); } .conf-track { width:90px; height:6px; border-radius:999px; background:var(--surface-2); overflow:hidden; } .conf-fill { height:100%; background:linear-gradient(90deg,var(--mc,var(--gold)),color-mix(in srgb,var(--mc,var(--gold)) 50%,#fff)); } /* Markdown body */ .md { font-size:15px; color:var(--text); } .md p { margin:.6em 0; } .md h1,.md h2,.md h3 { font-family:var(--f-display); margin:1em 0 .4em; line-height:1.25; } .md h1 { font-size:22px; } .md h2 { font-size:19px; } .md h3 { font-size:16px; } .md ul,.md ol { padding-left:1.3em; margin:.5em 0; } .md li { margin:.25em 0; } .md code { font-family:var(--f-mono); font-size:.88em; background:var(--surface-2); padding:2px 6px; border-radius:6px; border:1px solid var(--line-soft); } .md pre { background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:14px 16px; overflow-x:auto; } .md pre code { background:none; border:none; padding:0; } .md a { color:var(--gold); text-decoration:underline; text-underline-offset:2px; } .md blockquote { border-left:3px solid var(--gold-soft); margin:.6em 0; padding:.2em 0 .2em 14px; color:var(--text-dim); } .md table { border-collapse:collapse; width:100%; margin:.6em 0; font-size:14px; } .md th,.md td { border:1px solid var(--border); padding:8px 10px; text-align:left; } .chiplist { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; } .tag { font-size:12.5px; color:var(--text-dim); background:var(--surface-2); border:1px solid var(--border); border-radius:8px; padding:5px 10px; } .tag b { color:var(--text); font-weight:600; } .subhead { font-family:var(--f-mono); text-transform:uppercase; letter-spacing:.12em; font-size:11.5px; color:var(--muted); margin:16px 0 8px; } .copy-btn { margin-left:auto; } /* Sources */ .source-item { display:flex; gap:10px; align-items:baseline; padding:9px 0; border-bottom:1px solid var(--line-soft); } .source-item a { color:var(--gold); text-decoration:underline; text-underline-offset:2px; word-break:break-all; } .source-from { font-family:var(--f-mono); font-size:11px; color:var(--muted); flex-shrink:0; } /* Scores (critique) */ .score-row { display:flex; align-items:center; gap:10px; padding:7px 0; font-size:14px; } .score-target { font-weight:600; min-width:90px; } .score-bar { flex:1; height:6px; border-radius:999px; background:var(--surface-2); overflow:hidden; max-width:160px; } .score-bar span { display:block; height:100%; background:var(--gold); } .score-issues { color:var(--text-dim); font-size:13px; } /* Timeline */ .timeline { display:flex; flex-direction:column; gap:0; } .tl-row { display:grid; grid-template-columns:130px 1fr auto; gap:14px; align-items:center; padding:14px 0; border-bottom:1px solid var(--line-soft); } .tl-phase { font-family:var(--f-display); font-size:16px; } .tl-track { height:8px; border-radius:999px; background:var(--surface-2); overflow:hidden; } .tl-track span { display:block; height:100%; background:linear-gradient(90deg,var(--gold-soft),var(--gold)); } .tl-ms { font-family:var(--f-mono); font-size:13px; color:var(--gold); } /* ===================================================================== Conversation view + Settings ===================================================================== */ .convo-view, .settings { max-width:880px; margin:0 auto; } .convo-head { display:flex; align-items:center; gap:14px; margin-bottom:22px; } .convo-title { font-size:24px; flex:1; } .thread-item { margin-bottom:30px; } .thread-q { font-family:var(--f-display); font-size:19px; margin-bottom:12px; padding-left:12px; border-left:3px solid var(--gold); } .page-title { font-size:28px; margin-bottom:22px; } .card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:22px 24px; margin-bottom:20px; } .card-title { font-size:19px; margin-bottom:6px; } .card-sub { color:var(--text-dim); font-size:14px; margin:0 0 16px; } .keys-list { display:flex; flex-direction:column; gap:12px; } .key-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r); } .key-name { display:flex; align-items:center; gap:9px; min-width:130px; font-weight:600; } .key-dot { width:9px; height:9px; border-radius:50%; } .key-row input { flex:1; min-width:180px; } .key-state { font-family:var(--f-mono); font-size:12px; } .key-set { color:var(--good); } .key-unset { color:var(--muted); } .pref-row { display:flex; gap:16px; align-items:flex-end; flex-wrap:wrap; } .pref-row label { display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--text-dim); } .pref-row select { width:auto; min-width:150px; } .form-msg { font-size:13px; margin-top:10px; min-height:18px; } .form-msg.ok { color:var(--good); } .form-msg.err { color:var(--bad); } .usage-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:14px; } .usage-cell { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r); padding:16px; } .usage-num { font-family:var(--f-display); font-size:26px; color:var(--gold); } .usage-lbl { font-family:var(--f-mono); font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); } /* Toast */ .toast { position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--surface); border:1px solid var(--gold-soft); color:var(--text); padding:11px 18px; border-radius:10px; font-size:14px; box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:.25s; z-index:80; } .toast.show { opacity:1; transform:translateX(-50%) translateY(0); } /* ===================================================================== Responsive ===================================================================== */ @media (max-width:900px) { .phases { grid-template-columns:1fr; } .workspace { grid-template-columns:1fr; } .sidebar { position:static; max-height:none; order:2; } .composer-actions { width:100%; } } @media (max-width:560px) { .topnav { display:none; } .who { display:none; } .result-head { flex-direction:column; } .tl-row { grid-template-columns:90px 1fr auto; } } @media (prefers-reduced-motion:reduce) { * { animation:none !important; transition:none !important; } }