/* Shared styles for the qabit console pages (install.php, convert.php,
   dashboard.php, settings.php). Split out of the original console.html
   tabbed app so each page can link it once instead of duplicating ~300
   lines of CSS three times over. */
:root {
  --bg: #09090b; --paper: #111114; --soft: #18181b; --ink: #fafafa; --muted: #a1a1aa; --dim: #71717a;
  --line: rgba(255,255,255,.08);
  --accent: #a78bfa; --accent2: #c4b5fd; --bad: #f87171;
  --good: #34d399; --good-soft: rgba(52,211,153,.10);
  --shadow: 0 10px 30px rgba(0,0,0,.4);
  --radius: 12px;
  --code-bg: #050506; --code-ink: #e4e4e7; --code-key: #93c5fd; --code-str: #fcd34d; --code-com: #71717a;
  --serif: 'Playfair Display', Georgia, serif; --sans: 'Inter', system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
body {
  font: 400 16px/1.6 var(--sans);
  color: var(--ink); background: var(--bg); margin: 0;
  padding: 24px 20px 80px; -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent); color: var(--bg); }
.shell { max-width: 880px; margin: 0 auto; }
.crumbs { color: var(--muted); font-size: 13px; margin-bottom: 8px; }
.crumbs a { color: var(--muted); text-decoration: none; }
h1 { font-family: var(--serif); font-weight: 400; font-size: 34px; margin: 0 0 8px; letter-spacing: -0.01em; }
.lead { color: var(--muted); font-size: 15px; margin: 0 0 28px; max-width: 640px; }
h2 { font-family: var(--serif); font-weight: 400; font-size: 22px; margin: 32px 0 10px; }
h3 { font-size: 14px; margin: 18px 0 6px; font-weight: 600; }
p { margin: 0 0 12px; }
.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 24px; margin-bottom: 14px; box-shadow: var(--shadow);
}
code, pre {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
}
code { background: var(--soft); padding: 1px 6px; border-radius: 4px; font-size: 13px; color: var(--accent2); }
pre {
  background: var(--code-bg); color: var(--code-ink);
  padding: 16px 18px; border-radius: 8px; border: 1px solid var(--line);
  overflow-x: auto; line-height: 1.5;
  margin: 8px 0 16px;
}
pre code { background: none; color: inherit; padding: 0; }
pre .k { color: var(--code-key); }
pre .s { color: var(--code-str); }
pre .c { color: var(--code-com); }
.copy-btn {
  position: absolute; top: 8px; right: 8px;
  background: rgba(255,255,255,0.08); color: var(--code-ink);
  border: 1px solid rgba(255,255,255,0.2); border-radius: 6px;
  font: 600 11px ui-sans-serif, sans-serif;
  padding: 4px 10px; cursor: pointer;
}
.copy-btn:hover { background: rgba(255,255,255,0.16); }
.copy-btn.ok { background: var(--good); border-color: var(--good); }
.code-wrap { position: relative; }
.topbar {
  display:flex;justify-content:space-between;align-items:center;
  color:var(--muted);font-size:13px;margin-bottom:24px;
}
.topbar a { color: var(--muted); text-decoration: none; }
.topbar a:hover { color: var(--ink); }

.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 28px; }
.pillar { padding: 16px 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.pillar h3 { margin-top: 0; font-size: 14px; }
.pillar .num { font-size: 11px; color: var(--accent); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; }
.pillar p { color: var(--muted); font-size: 13px; margin-bottom: 6px; }
.pillar a { color: var(--accent2); font-size: 13px; font-weight: 600; text-decoration: none; }
.pillar a:hover { text-decoration: underline; }

table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 10px 0; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
td code { font-size: 12px; }

.demo-controls {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0;
}
@media (max-width: 540px) { .demo-controls { grid-template-columns: 1fr; } }
.demo-controls label { font-size: 12px; color: var(--muted); }
.demo-controls select, .demo-controls input {
  width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px;
  font: inherit; font-size: 14px; margin-top: 2px; background: var(--soft); color: var(--ink);
}
.demo-actions { display: flex; gap: 8px; margin: 10px 0; }
.demo-actions button {
  padding: 8px 14px; border-radius: 6px; border: 1px solid var(--accent); background: var(--accent);
  color: var(--bg); font: 600 13px var(--sans); cursor: pointer;
}
.demo-actions button.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.embed-container { border: 1px dashed var(--line); border-radius: 12px; min-height: 480px; background: var(--soft); padding: 8px; }
.save-log {
  margin-top: 8px; padding: 10px 14px; border-radius: 8px;
  background: var(--good-soft); color: var(--good); border: 1px solid var(--good);
  font-size: 13px; display: none;
}
.save-log.show { display: block; }
.save-log code { background: rgba(255,255,255,0.08); color: var(--good); }
/* ---- auth + nav ---- */
.authbar{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-bottom:14px;}
.navemail{font-size:13px;color:var(--muted);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.key-badge{font-size:13px;font-weight:700;color:var(--bg);background:var(--accent);border:1px solid var(--accent);border-radius:99px;padding:5px 14px;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.key-badge b{color:var(--bg);font-weight:800;}
/* user menu (hover dropdown on the signed-in name) - mirrors index.php's own */
.nav-user{position:relative;padding:6px 0;display:flex;align-items:center;gap:5px;cursor:pointer;}
.nav-user .navemail{cursor:pointer;}
.nav-user-arrow{width:9px;height:9px;color:var(--muted);transition:transform .2s ease;flex-shrink:0;}
.nav-user:hover .navemail{color:var(--ink);}
.nav-user:hover .nav-user-arrow{transform:rotate(180deg);color:var(--ink);}
.nav-user-menu{display:none;position:absolute;top:100%;right:0;padding-top:8px;min-width:170px;z-index:50;}
.nav-user-menu-inner{background:#1e1e24;border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:6px;box-shadow:0 20px 50px rgba(0,0,0,.6);}
.nav-user:hover .nav-user-menu,.nav-user-menu:hover{display:block;}
.nav-user-menu a{display:block;padding:9px 12px;border-radius:7px;font-size:13px;color:var(--muted);text-decoration:none;}
.nav-user-menu a:hover{background:rgba(167,139,250,.14);color:var(--ink);}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:9px 16px;border:1px solid var(--accent);background:var(--accent);color:var(--bg);border-radius:8px;font:600 14px var(--sans);cursor:pointer;text-decoration:none;transition:all .2s;}
.btn:hover{opacity:.88;transform:translateY(-1px);}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line);}
.btn.ghost:hover{background:var(--soft);border-color:rgba(255,255,255,.2);}
.btn.sm{padding:6px 12px;font-size:13px;}
.btn-icon{padding:0;width:32px;height:32px;flex-shrink:0;}
.btn-icon svg{width:16px;height:16px;}
.btn.danger{background:transparent;color:var(--bad);border-color:rgba(248,113,113,.3);}
.btn.danger:hover{background:rgba(248,113,113,.1);}
/* ---- page nav (replaces the old in-page tabbar now that each tab is its own URL) ---- */
.pagenav{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:24px;}
.pagenav a{appearance:none;background:none;border:none;border-bottom:2px solid transparent;padding:10px 16px;font:600 14px var(--sans);color:var(--muted);cursor:pointer;margin-bottom:-1px;text-decoration:none;display:inline-block;}
.pagenav a:hover{color:var(--ink);}
.pagenav a.active{color:var(--ink);border-bottom-color:var(--accent);}
.gate{text-align:center;padding:56px 20px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);}
.gate h2{margin:0 0 8px;}
.gate p{color:var(--muted);margin:0 0 20px;}
.gate .btn{margin:0 4px;}
/* Native date inputs draw a black calendar glyph by default - invisible on
   this dark theme. Invert it so it reads as light-on-dark like everything else. */
input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(1);cursor:pointer;}
.field label{display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:14px 0 6px;}
.field input,.field select,.field textarea{width:100%;padding:10px 12px;background:var(--soft);border:1px solid var(--line);border-radius:8px;color:var(--ink);font:14px var(--sans);outline:none;}
.field textarea{resize:vertical;min-height:72px;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);}
.err{color:var(--bad);font-size:13px;min-height:1.1em;margin-top:8px;}
.keybox{margin-top:16px;padding:14px;background:rgba(167,139,250,.08);border:1px solid rgba(167,139,250,.3);border-radius:10px;}
.keybox .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--accent);font-weight:700;margin-bottom:6px;}
.suite-row{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--line);}
.suite-row:last-child{border-bottom:none;}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.stat-box{background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:14px 16px;}
.stat-box .n{font-size:24px;font-weight:700;color:var(--accent2);}
.stat-box .l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;}
table.subtbl{width:100%;border-collapse:collapse;font-size:13px;margin-top:8px;}
table.subtbl th{text-align:left;color:var(--muted);font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.04em;padding:8px 10px;border-bottom:1px solid var(--line);}
table.subtbl td{padding:8px 10px;border-bottom:1px solid var(--line);}
table.subtbl tr.subrow{cursor:pointer;}
table.subtbl tr.subrow:hover td{background:var(--soft);}
.evd-caret{color:var(--muted);transition:transform .15s;display:inline-block;}
tr.subrow.open .evd-caret{transform:rotate(90deg);color:var(--accent);}
tr.evdetail-row>td{padding:0 10px 14px !important;background:var(--soft);}
.evd{border:1px solid var(--line);border-radius:10px;background:var(--paper);padding:16px 18px;margin-top:2px;}
.evd-head{display:flex;align-items:center;gap:16px;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--line);}
.evd-cols{display:grid;grid-template-columns:1fr 1fr;align-items:start;column-gap:28px;}
.evd-col-l{padding-right:0;}
.evd-col-r{border-left:1px solid var(--line);padding-left:28px;}
@media (max-width:640px){
  .evd-cols{grid-template-columns:1fr;}
  .evd-col-r{border-left:none;padding-left:0;border-top:1px solid var(--line);padding-top:16px;margin-top:4px;}
}
.evd-score{font:700 30px var(--sans);color:var(--accent);line-height:1;}
.evd-score span{font-size:14px;color:var(--muted);font-weight:500;}
.evd-metaline{font-size:13px;line-height:1.5;}
.evd-sec{margin:12px 0;break-inside:avoid;}
.evd-sec h5{margin:0 0 6px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--dim);font-weight:600;}
.evd-kv{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:4px 0;border-bottom:1px dashed var(--line);}
.evd-kv:last-child{border-bottom:0;}
.evd-v{font-weight:600;text-align:right;}
.evd-note{font-size:13px;line-height:1.55;padding:3px 0;}
.evd-tags{display:flex;flex-wrap:wrap;gap:6px;}
.evd-tag{font-size:12px;background:var(--soft);border:1px solid var(--line);border-radius:99px;padding:3px 10px;color:var(--accent2);}
.evd-bad{color:var(--bad);font-size:13px;font-weight:600;}
.evd-raw{margin-top:12px;}
.evd-raw summary{cursor:pointer;font-size:12px;color:var(--muted);}
.evd-raw pre{margin:8px 0 0;padding:12px;background:var(--bg);border:1px solid var(--line);border-radius:8px;font-size:12px;line-height:1.5;overflow:auto;max-height:340px;color:var(--ink);}
.muted{color:var(--muted);}
/* modal */
.evq-modal{display:none;position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);align-items:center;justify-content:center;padding:20px;}
.evq-card{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:30px;width:100%;max-width:400px;box-shadow:var(--shadow);}
.evq-x{position:absolute;top:12px;right:14px;background:none;border:none;color:var(--muted);font-size:24px;line-height:1;cursor:pointer;}
.evq-x:hover{color:var(--ink);}

/* live form demo (install.php sandbox, all templates as tabs) */
.formframe{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--bg);}
.formframe iframe{width:100%;border:0;display:block;min-height:560px;}
.formmeta{text-align:center;color:var(--dim);font-size:12px;margin-top:12px;font-family:ui-monospace,monospace;}