/* ══════════════════════════════════════════════════════════════════════
   QuantumEdge shared theme.

   These are the dashboard's own token values, lifted verbatim so every
   tool renders in the same palette and type. The dashboard sets them from
   JS on a theme toggle; here the same two sets are expressed as CSS so a
   tool matches whichever mode the user is in.

   Source of truth: qe_dashboard/index.html applyTheme(). If the dashboard's
   palette changes, change it there and mirror it here.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  /* dark — the dashboard's default */
  --bg:#0a0e13; --panel:#161d27; --panel2:#121821; --card:#141b24; --inner:#1a222c;
  --border:#4d6076; --border2:#3f4f60; --line:#4a5c6f; --hover:#36424f;
  --t1:#f2f5f8; --t2:#c4cdd8; --t3:#a6b0bc; --t4:#8b95a1; --t5:#9aa4af; --t6:#cdd6e0;
  --green:#2fe3a0; --green2:#46ecae; --red:#f0556b; --redsoft:#f0556b;
  --pink:#e15cc6; --blue:#7fb2f5; --gold:#e6c64f; --orange:#f0935a;

  --font-ui:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --r:11px; --r-sm:9px; --gap:14px; --pad:18px; --ctrl:36px;
  --shadow:0 10px 34px rgba(0,0,0,.4);
}
:root[data-theme="light"] {
  --bg:#f4f6f8; --panel:#ffffff; --panel2:#f8fafb; --card:#ffffff; --inner:#eef2f5;
  --border:#b8c3cd; --border2:#c3ccd4; --line:#c6cfd7; --hover:#b3bfc9;
  --t1:#0b0f15; --t2:#363f49; --t3:#4a545f; --t4:#6a747f; --t5:#566069; --t6:#2a343e;
  --green:#087a52; --green2:#0a8259; --red:#c8324a; --redsoft:#c8324a;
  --pink:#b3318f; --blue:#2862c4; --gold:#9c7d18; --orange:#c26527;
  --shadow:0 10px 34px rgba(19,25,32,.12);
}

*,*::before,*::after { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--t1);
       font:400 14.5px/1.55 var(--font-ui); -webkit-font-smoothing:antialiased; }
h1,h2,h3 { margin:0; font-weight:700; letter-spacing:-.015em; }
h1 { font-size:28px; } h2 { font-size:21px; } h3 { font-size:16.5px; }
p { margin:0; }
a { color:var(--green); }
.num { font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.mute { color:var(--t3); }
.hide { display:none !important; }
.grow { flex:1; }
.row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.stack { display:flex; flex-direction:column; gap:var(--gap); }
.eyebrow { font:500 11.5px/1 var(--font-mono); letter-spacing:.12em;
           text-transform:uppercase; color:var(--t4); }

.card { background:var(--card); border:1px solid var(--border2);
        border-radius:var(--r); padding:var(--pad); }

input[type=text],input[type=email],input[type=password],input[type=search],
input[type=number],select,textarea {
  height:var(--ctrl); padding:0 12px; background:var(--inner); color:var(--t1);
  border:1px solid var(--line); border-radius:var(--r-sm);
  font:400 14.5px/1.4 var(--font-ui); }
textarea { height:auto; min-height:96px; padding:10px 12px; resize:vertical; }
input:disabled,select:disabled { opacity:.45; cursor:not-allowed; }
button { height:var(--ctrl); padding:0 14px; border-radius:var(--r-sm);
  border:1px solid var(--line); background:var(--inner); color:var(--t1);
  font:700 14px/1 var(--font-ui); cursor:pointer; }
button:hover:not(:disabled) { border-color:var(--green); }
button.primary { background:linear-gradient(140deg,var(--green),var(--green2));
  color:#04130d; border:none; }
button.ghost { background:transparent; }
button.small { height:28px; padding:0 10px; font-size:13px; }
button:disabled { opacity:.45; cursor:not-allowed; }
:focus-visible { outline:2px solid var(--green); outline-offset:2px; }

/* ── the shared header: identical on every tool ── */
.qe-top { display:flex; align-items:center; gap:12px; flex-wrap:wrap;
          padding:0 0 13px; border-bottom:1px solid var(--border2);
          margin-bottom:22px; }
/* The brand lock-up, matching the dashboard: a gradient tile with a rotated
   diamond, then the wordmark. The mark carries the colour — the word itself
   stays plain, which is how the dashboard sets it. */
.qe-brand { display:flex; align-items:center; gap:10px; text-decoration:none;
            color:var(--t1); white-space:nowrap; }
.qe-mark { width:30px; height:30px; border-radius:9px; flex:none;
           background:linear-gradient(140deg,var(--green),var(--pink));
           display:flex; align-items:center; justify-content:center;
           box-shadow:0 4px 14px rgba(47,227,160,.22); }
.qe-mark i { width:12px; height:12px; background:var(--bg);
             transform:rotate(45deg); border-radius:2px; display:block; }
.qe-word { display:flex; flex-direction:column; line-height:1.05;
           font-size:17px; font-weight:800; letter-spacing:-.01em; }
.qe-word small { font-size:8.5px; letter-spacing:2.6px; font-weight:600;
                 text-transform:uppercase; color:var(--t4); margin-top:2px; }
.qe-tool { font:500 11.5px/1 var(--font-mono); letter-spacing:.1em;
           text-transform:uppercase; color:var(--t4); padding:4px 8px;
           border:1px solid var(--border2); border-radius:5px; }
.qe-menu-wrap { position:relative; }
.qe-menu { display:none; position:absolute; right:0; top:42px; min-width:252px;
           background:var(--card); border:1px solid var(--border);
           border-radius:var(--r); box-shadow:var(--shadow); padding:6px; z-index:900; }
.qe-menu.open { display:block; }
.qe-item { padding:10px 12px; border-radius:8px; cursor:pointer; }
.qe-item:hover { background:var(--inner); }
.qe-item .n { font-size:14px; font-weight:700; color:var(--t1); }
.qe-item .d { font-size:12.5px; color:var(--t3); margin-top:2px; }
.qe-item.here .n::after { content:" · you are here"; color:var(--t4);
                          font-weight:500; font-size:12px; }
.qe-who { display:flex; align-items:center; gap:8px; height:var(--ctrl);
          padding:0 11px; border:1px solid var(--border2); border-radius:var(--r-sm);
          background:var(--inner); font-size:13px; color:var(--t2);
          cursor:pointer; white-space:nowrap; }
.qe-who .dot { width:7px; height:7px; border-radius:50%; background:var(--green); flex:none; }
.qe-who.out .dot { background:var(--t4); }

/* ── messages, shared vocabulary ── */
.msg { display:flex; gap:10px; padding:10px 13px; border-radius:var(--r-sm);
       font-size:13px; line-height:1.5; border:1px solid; }
.msg .tag { font:500 11px/1.5 var(--font-mono); letter-spacing:.08em;
            text-transform:uppercase; flex:none; }
.msg.ok   { border-color:var(--green); color:var(--green);
            background:color-mix(in srgb, var(--green) 10%, transparent); }
.msg.warn { border-color:var(--gold); color:var(--gold);
            background:color-mix(in srgb, var(--gold) 10%, transparent); }
.msg.bad  { border-color:var(--red); color:var(--red);
            background:color-mix(in srgb, var(--red) 10%, transparent); }
.msg.info-m { border-color:var(--blue); color:var(--blue);
            background:color-mix(in srgb, var(--blue) 10%, transparent); }