/* Public pages share the dashboard palette (see web/assets/js/components/ui.jsx). */
:root { --bg:#080909; --panel:#0c0d0e; --card:#111314; --line:#27292b; --line-soft:#202224; --line-strong:#3a3d40; --field-line:#303336; --hover:#191b1d; --chip:#242629; --ink:#eeeef0; --heading:#fff; --muted:#858a91; --dim:#777d84; --soft-ink:#a6aaaf; --accent:#d4a94b; --accent-dim:#9c8350; --accent-bg:#3a2f1b; --accent-ink:#d7ae59; --btn:#f0f0f1; --btn-ink:#111214; --good:#6ed3a1; --good-bg:#143326; --bad:#e58b8b; --bad-bg:#1d1212; --bad-line:#4a2323; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--bg); font:16px/1.6 ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; }
a { color:inherit; text-decoration:none; }
.shell { width:min(1120px,calc(100% - 40px)); margin:0 auto; }
.site-header { position:relative; z-index:10; border-bottom:1px solid var(--line-soft); background:var(--panel); }
.nav-wrap { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.brand { display:inline-flex; align-items:center; gap:10px; color:var(--heading); font-weight:600; font-size:18px; letter-spacing:-.02em; }
.brand-mark { display:grid; place-items:center; width:32px; height:32px; border:1px solid var(--line-strong); border-radius:8px; color:#e7e7e9; background:#1d1f21; font-size:15px; }
.site-nav { display:flex; align-items:center; gap:27px; color:var(--muted); font-size:14px; font-weight:500; }
.site-nav > a:not(.button):hover,.footer-links a:hover { color:var(--heading); }
.nav-actions { display:flex; align-items:center; gap:10px; margin-left:7px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 19px; border:1px solid transparent; border-radius:6px; font-weight:600; font-size:14px; transition:.2s ease; }
.button:hover { transform:translateY(-1px); }
.button-dark,.button-primary { color:var(--btn-ink); background:var(--btn); }
.button-dark:hover,.button-primary:hover { background:#fff; }
.button-ghost { border-color:var(--field-line); color:var(--soft-ink); background:transparent; }
.button-ghost:hover { background:var(--hover); }
.button-lg { min-height:52px; padding:0 24px; }
.nav-toggle { display:none; border:0; background:none; padding:8px; }
.nav-toggle span { display:block; width:23px; height:2px; margin:4px; background:var(--ink); }
.eyebrow { display:inline-flex; align-items:center; gap:8px; margin-bottom:14px; color:var(--accent-dim); font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; }
.eyebrow:before { width:6px; height:6px; border-radius:50%; content:""; background:var(--accent); }
h1,h2,h3 { margin:0; color:var(--heading); font-weight:600; letter-spacing:-.06em; line-height:1.1; }
h1 { font-size:clamp(42px,6vw,72px); }
h2 { font-size:clamp(32px,4vw,48px); }
h3 { font-size:20px; letter-spacing:-.03em; }
.hero { position:relative; overflow:hidden; padding:105px 0 112px; background:linear-gradient(145deg,var(--panel) 0%,var(--bg) 70%); }
.hero:before,.hero:after { position:absolute; content:""; border-radius:50%; filter:blur(2px); pointer-events:none; }
.hero:before { width:420px; height:420px; top:-220px; right:-90px; background:rgba(212,169,75,.08); }
.hero:after { width:300px; height:300px; bottom:-180px; left:-100px; background:rgba(255,255,255,.025); }
.hero-grid { position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:72px; }
.hero-copy p { max-width:550px; margin:26px 0 32px; color:var(--muted); font-size:19px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
.hero-meta { display:flex; align-items:center; gap:10px; margin-top:28px; color:var(--muted); font-size:13px; }
.avatars { display:flex; }
.avatar { display:grid; place-items:center; width:28px; height:28px; margin-left:-7px; border:2px solid var(--bg); border-radius:50%; color:var(--btn-ink); background:#a6aaaf; font-size:11px; font-weight:700; }
.avatar:first-child { margin-left:0; background:var(--accent); }
.avatar:last-child { background:#6ed3a1; }
.hero-card { position:relative; min-height:380px; padding:26px; border:1px solid var(--line); border-radius:12px; background:var(--card); box-shadow:0 25px 70px rgba(0,0,0,.45); }
.hero-card:before { position:absolute; width:90px; height:90px; content:""; top:-20px; right:-22px; border-radius:25px; background:rgba(212,169,75,.14); transform:rotate(12deg); }
.window-bar { display:flex; gap:6px; padding-bottom:24px; border-bottom:1px solid var(--line); }
.window-bar i { width:8px; height:8px; border-radius:50%; background:var(--line-strong); }
.window-bar i:first-child { background:var(--accent); }
.window-content { position:relative; z-index:1; padding:32px 14px 10px; }
.window-content small { color:var(--accent-dim); font-weight:600; letter-spacing:.14em; }
.window-content h3 { margin:10px 0 24px; font-size:27px; }
.memory-item { display:flex; align-items:center; gap:12px; padding:15px 0; border-top:1px solid var(--line); font-size:14px; }
.memory-item strong { color:var(--ink); }
.memory-icon { display:grid; place-items:center; width:35px; height:35px; border:1px solid var(--field-line); border-radius:8px; color:var(--accent); background:#1d1f21; font-weight:600; }
.section { padding:105px 0; }
.section-soft { background:var(--panel); }
.section-heading { max-width:600px; margin:0 auto 52px; text-align:center; }
.section-heading p { margin:17px auto 0; color:var(--muted); }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.feature-card { padding:29px; border:1px solid var(--line); border-radius:8px; background:var(--card); }
.feature-card:hover { border-color:var(--line-strong); box-shadow:0 16px 35px rgba(0,0,0,.35); }
.feature-icon { display:grid; place-items:center; width:45px; height:45px; margin-bottom:24px; border:1px solid var(--field-line); border-radius:10px; color:var(--accent); background:#1d1f21; font-weight:600; }
.feature-card p,.step p,.cta p { margin:10px 0 0; color:var(--muted); }
.split { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:90px; }
.split-copy p { margin:20px 0 25px; color:var(--muted); }
.check-list { display:grid; gap:13px; padding:0; margin:0; list-style:none; color:var(--soft-ink); }
.check-list li:before { display:inline-grid; place-items:center; width:20px; height:20px; margin-right:10px; border-radius:50%; content:"✓"; color:var(--good); background:var(--good-bg); font-size:12px; font-weight:700; }
.note-board { padding:30px; border:1px solid var(--line); border-radius:12px; background:var(--card); color:var(--ink); box-shadow:0 25px 45px rgba(0,0,0,.4); }
.note-board > p { color:var(--muted); }
.note-line { display:flex; gap:13px; align-items:flex-start; padding:18px 0; border-bottom:1px solid var(--line); }
.note-line:last-child { border-bottom:0; }
.note-line b { display:block; font-size:14px; }
.note-line span { display:block; margin-top:3px; color:var(--muted); font-size:13px; }
.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch; }
.price-card { position:relative; display:flex; flex-direction:column; padding:30px; border:1px solid var(--line); border-radius:8px; background:var(--card); }
.price-card.popular { border:2px solid var(--accent); box-shadow:0 18px 45px rgba(212,169,75,.08); }
.popular-label { position:absolute; top:17px; right:17px; padding:5px 9px; border-radius:20px; color:var(--accent-ink); background:var(--accent-bg); font-size:10px; font-weight:700; letter-spacing:.07em; }
.price-card p { color:var(--muted); }
.price { margin:23px 0 7px; color:var(--heading); font-weight:600; font-size:40px; letter-spacing:-.06em; }
.price small { color:var(--muted); font-weight:500; font-size:14px; letter-spacing:0; }
.price-list { display:grid; gap:12px; padding:20px 0 25px; margin:0; border-top:1px solid var(--line); list-style:none; color:var(--muted); font-size:14px; }
.price-list li:before { margin-right:9px; content:"✓"; color:var(--good); font-weight:700; }
.price-card .button { width:100%; margin-top:auto; }
.faq-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.faq { padding:22px 24px; border:1px solid var(--line); border-radius:8px; background:var(--card); }
.faq summary { cursor:pointer; list-style:none; color:var(--heading); font-weight:600; }
.faq summary::-webkit-details-marker { display:none; }
.faq p { margin:13px 0 0; color:var(--muted); font-size:14px; }
.cta { margin:0 auto; padding:72px 30px; border:1px solid var(--line); border-radius:12px; color:var(--ink); background:radial-gradient(circle at 50% 0%,rgba(212,169,75,.12),transparent 60%),var(--card); text-align:center; }
.cta .button { margin-top:25px; color:var(--btn-ink); background:var(--btn); }
.site-footer { padding:62px 0 24px; background:var(--panel); border-top:1px solid var(--line-soft); }
.footer-grid { display:flex; justify-content:space-between; gap:60px; }
.footer-note { max-width:260px; margin:18px 0 0; color:var(--muted); font-size:14px; }
.footer-links { display:flex; gap:75px; }
.footer-links div { display:grid; align-content:start; gap:10px; min-width:95px; color:var(--muted); font-size:14px; }
.footer-links strong { margin-bottom:5px; color:var(--ink); font-size:13px; }
.footer-bottom { display:flex; justify-content:space-between; padding-top:35px; margin-top:46px; border-top:1px solid var(--line-soft); color:var(--dim); font-size:12px; }
.auth-page { min-height:calc(100vh - 77px); display:grid; place-items:center; padding:70px 0; background:radial-gradient(circle at 50% 0%,rgba(212,169,75,.07),transparent 55%),var(--bg); }
.auth-card { width:min(460px,100%); margin:0 auto; padding:38px; border:1px solid var(--line); border-radius:12px; background:var(--card); box-shadow:0 20px 50px rgba(0,0,0,.45); }
.auth-card h1 { font-size:34px; }
.auth-card > p { color:var(--muted); }
.auth-logo { margin-bottom:32px; }
.auth-logo p { color:var(--muted); }
.form-group { margin:17px 0; }
.form-group label { display:block; margin-bottom:7px; color:#a8adb3; font-size:12px; font-weight:500; }
.form-group input { width:100%; height:46px; padding:0 14px; border:1px solid var(--field-line); border-radius:6px; color:#e2e3e5; background:var(--panel); font:inherit; outline:none; }
.form-group input::placeholder { color:#686d73; }
.form-group input:focus { border-color:#6e7379; }
.form-submit { width:100%; margin-top:6px; border:0; cursor:pointer; }
.auth-footer { margin:23px 0 0; text-align:center; color:var(--muted); font-size:14px; }
.auth-footer a { color:var(--ink); font-weight:600; }
.auth-footer a:hover { color:var(--accent); }
.alert { padding:12px 15px; margin:18px 0; border:1px solid transparent; border-radius:6px; font-size:14px; }
.alert-success { color:var(--good); background:var(--good-bg); border-color:#1d4a37; }
.alert-danger { color:var(--bad); background:var(--bad-bg); border-color:var(--bad-line); }
.center-page { padding:100px 0; text-align:center; }
.center-page p { color:var(--muted); }
.dashboard-page { min-height:calc(100vh - 77px); padding:55px 0 90px; background:var(--panel); }
.dashboard-head { display:flex; align-items:end; justify-content:space-between; gap:25px; margin-bottom:34px; }
.dashboard-actions { display:flex; align-items:center; gap:12px; }
.organization-switcher { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; font-weight:600; }
.organization-switcher select { min-height:40px; padding:0 28px 0 11px; border:1px solid var(--field-line); border-radius:6px; color:var(--ink); background:var(--panel); font:inherit; }
.dashboard-head p { margin:9px 0 0; color:var(--muted); }
.dashboard-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.dashboard-card { padding:25px; border:1px solid var(--line); border-radius:8px; background:var(--card); }
.dashboard-card.wide { grid-column:span 2; }
.dashboard-card h3 { font-size:18px; }
.card-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.button-small { min-height:36px; padding:0 13px; font-size:12px; }
.metric { margin:18px 0 2px; color:var(--heading); font-weight:600; font-size:36px; }
.metric-note { color:var(--muted); font-size:13px; }
.progress { height:9px; margin-top:19px; overflow:hidden; border-radius:20px; background:var(--chip); }
.progress span { display:block; width:68%; height:100%; border-radius:inherit; background:var(--accent); }
.dashboard-list { display:grid; gap:12px; padding:0; margin:20px 0 0; list-style:none; }
.dashboard-list li { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-bottom:12px; border-bottom:1px solid var(--line); color:var(--muted); font-size:14px; }
.dashboard-list li:last-child { padding-bottom:0; border-bottom:0; }
.dashboard-list small { color:var(--muted); font-size:12px; }
.table-scroll { overflow-x:auto; }
.keys-table { width:100%; border-collapse:collapse; text-align:left; }
.keys-table th,.keys-table td { padding:15px 12px; border-bottom:1px solid var(--line); vertical-align:middle; white-space:nowrap; font-size:14px; }
.keys-table th { color:var(--ink); font-weight:600; }
.keys-table td { color:var(--muted); }
.keys-table thead th { padding-top:0; color:var(--dim); font-size:12px; letter-spacing:.05em; text-transform:uppercase; }
.keys-table tbody tr:last-child th,.keys-table tbody tr:last-child td { border-bottom:0; }
.tag-list { display:flex; flex-wrap:wrap; gap:6px; }
.organization-list-card { display:grid; gap:10px; max-width:720px; margin:0 auto; }
.organization-option { display:flex; align-items:center; justify-content:space-between; gap:20px; width:100%; padding:17px 18px; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:var(--card); font:inherit; text-align:left; cursor:pointer; }
.organization-option:hover { border-color:var(--line-strong); background:var(--hover); }
.organization-option span { color:var(--muted); font-size:13px; }
.badge { padding:4px 8px; border-radius:20px; color:var(--good); background:var(--good-bg); font-size:11px; font-weight:700; }
.health-badge-good { color:var(--good); background:var(--good-bg); }
.health-card .progress span { width:100%; }
.health-warning .progress span { background:#eab64d; }
.health-bad .progress span { background:#ef963e; }
.health-critical .progress span { background:#df5d5d; }
.health-badge-warning { color:var(--accent-ink); background:var(--accent-bg); }
.health-badge-bad { color:#ef963e; background:#3a2512; }
.health-badge-critical { color:var(--bad); background:#3a1717; }
.dashboard-form { max-width:720px; margin:0 auto; }
.dashboard-form small { display:block; margin-top:5px; color:var(--dim); font-size:12px; }
.form-submit:disabled { cursor:wait; opacity:.65; }
.toast { position:fixed; z-index:20; top:94px; right:24px; max-width:340px; padding:14px 18px; border:1px solid var(--line-strong); border-radius:6px; box-shadow:0 14px 30px rgba(0,0,0,.5); font-size:14px; font-weight:600; }
.toast-success { color:#fff; background:#202326; }
.rotator { display:inline-block; height:1.1em; overflow:hidden; vertical-align:bottom; color:var(--accent); }
.rotator.is-ready { transition:width .5s ease; }
.rotator-track { display:flex; flex-direction:column; align-items:flex-start; transition:transform .5s ease; }
.rotator-track > span { display:block; width:max-content; height:1.1em; white-space:nowrap; }
.rotator:not(.is-ready) .rotator-track > span:nth-child(n+2) { display:none; }
@media (max-width:800px) { .site-nav { gap:16px; } .hero-grid,.split { grid-template-columns:1fr; gap:45px; } .hero { padding:75px 0 80px; } .feature-grid,.pricing-grid { grid-template-columns:1fr; } .faq-grid { grid-template-columns:1fr; } .footer-grid { display:grid; } .dashboard-grid { grid-template-columns:1fr 1fr; } .dashboard-card.wide { grid-column:span 2; } }
@media (max-width:640px) { .shell { width:min(100% - 30px,1120px); } .nav-toggle { display:block; } .site-nav { position:absolute; top:76px; right:15px; left:15px; display:none; padding:18px; border:1px solid var(--line); border-radius:12px; background:var(--panel); box-shadow:0 15px 35px rgba(0,0,0,.5); } .site-nav.is-open { display:grid; } .nav-actions { margin:5px 0 0; } .nav-actions .button { flex:1; } .hero-copy p { font-size:17px; } .auth-card { padding:27px 22px; } .footer-links { flex-wrap:wrap; gap:30px; } .footer-bottom { display:grid; gap:7px; } .dashboard-head { display:block; } .dashboard-actions { flex-wrap:wrap; margin-top:20px; } .dashboard-head .button { margin-top:0; } .dashboard-grid { grid-template-columns:1fr; } .dashboard-card.wide { grid-column:auto; } }