/* Lockright · brand layer over the shared shell (hmg-app.css).
   Black radial #1E231A -> #070806, lime #B8F23A.
   Space Grotesk headings, IBM Plex Sans body, JetBrains Mono labels (embedded in fonts.css).
   Wordmark: Russo One, as outlines.
   The shell names its accent "red"; Lockright fills that slot with lime and keeps
   real red (--danger) for Critical findings only. */
:root {
  --bg: #070806;
  --bg-2: #0b0d09;
  --panel: #10130e;
  --panel-2: #151a12;
  --panel-3: #1b2117;
  --line: #20261b;
  --line-2: #2c3526;
  --cream: #f3f6ee;
  --text: #e9eee3;
  --muted: #9aa391;
  --gray: #7d8674;
  --lime: #b8f23a;
  --lime-hi: #d6ff7a;
  --lime-deep: #4b6317;
  --ink: #070806;
  --danger: #ff5a5f;
  --red: var(--lime);
  --red-hi: var(--lime-hi);
  --dark-red: var(--lime-deep);
  --grad-red: linear-gradient(135deg, #d6ff7a 0%, #b8f23a 55%, #8fbd2c 100%);
  --grad-panel: linear-gradient(180deg, rgba(184, 242, 58, .022) 0%, rgba(255, 255, 255, 0) 55%), #10130e;
  --display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --label: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --shadow: 0 18px 50px rgba(0, 0, 0, .6);
}
body {
  background:
    radial-gradient(1100px 640px at 50% -14%, #1e231a 0%, transparent 70%),
    radial-gradient(900px 600px at 105% 105%, rgba(184, 242, 58, .045), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
a { color: var(--lime); }
code { background: #050604; color: var(--cream); }
::selection { background: var(--lime); color: var(--ink); }
:focus-visible { outline-color: var(--lime); }
* { scrollbar-color: #33402a transparent; }
::-webkit-scrollbar-thumb { background: #2c3526; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #3d4a33; background-clip: padding-box; }

/* ---------------------------------------------------------------- top bar */
.topbar {
  background: linear-gradient(180deg, rgba(22, 27, 18, .97) 0%, rgba(9, 11, 8, .95) 100%);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .45);
}
.topbar::after { height: 1px; bottom: -1px; background: linear-gradient(90deg, transparent 5%, rgba(184, 242, 58, .5) 50%, transparent 95%); opacity: 1; }
.brand-tile {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 28%, #1e231a 0%, #070806 78%);
  border: 1px solid #2a3322;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.brand-tile .brand-icon { display: block; width: 80%; height: 80%; }
.brand-tile.big { width: 64px; height: 64px; border-radius: 16px; margin-bottom: 14px; }
/* The wordmark is drawn, not typed: outlines of Russo One (brand/wordmark.svg, tools/make_wordmark.py). */
.brand-txt { display: grid; gap: 6px; }
.brand .app-name { display: block; line-height: 0; color: var(--cream); text-shadow: none; }
.wm { display: block; width: auto; }
.brand .app-name .wm { height: 17px; }
.modal-hero h2 .wm { height: 25px; }
.brand .app-sub { font-family: var(--label); font-size: 10.5px; letter-spacing: .3px; text-transform: none; color: var(--muted); }
.tabs { background: rgba(0, 0, 0, .45); border-color: var(--line); }
.tab { font-family: var(--body); font-weight: 600; font-size: 13.5px; letter-spacing: .1px; text-transform: none; }
.tab[aria-selected="true"] { background: var(--lime); color: var(--ink); box-shadow: 0 4px 16px rgba(184, 242, 58, .25); }
.tab .badge { background: rgba(7, 8, 6, .25); }
.offline-pill { font-family: var(--label); letter-spacing: .3px; text-transform: none; background: rgba(0, 0, 0, .45); }
.icon-btn { background: rgba(0, 0, 0, .45); border-color: var(--line-2); }
.icon-btn:hover { border-color: var(--lime); background: rgba(184, 242, 58, .1); color: var(--lime-hi); }

/* ---------------------------------------------------------------- shell */
.side { background: linear-gradient(180deg, rgba(16, 19, 14, .85), rgba(7, 8, 6, .6)); }
.side h3 { font-family: var(--label); font-size: 11px; letter-spacing: 1.4px; color: var(--gray); }
.steps .st-dot { background: var(--bg-2); font-family: var(--label); font-weight: 600; }
.steps .st-title { font-family: var(--display); font-weight: 600; font-size: 14.5px; letter-spacing: 0; text-transform: none; }
.steps li.done .st-dot { background: #0d2418; }
.steps li.current .st-dot { background: var(--lime); border-color: var(--lime-hi); color: var(--ink); box-shadow: 0 0 0 4px rgba(184, 242, 58, .14); }
.side-card { background: rgba(0, 0, 0, .3); }
.side-card b { font-family: var(--display); font-weight: 600; font-size: 13.5px; letter-spacing: 0; text-transform: none; }

/* ---------------------------------------------------------------- cards + controls */
.card { box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 12px 34px rgba(0, 0, 0, .4); }
.card.glow { border-color: rgba(184, 242, 58, .28); box-shadow: 0 0 0 1px rgba(184, 242, 58, .05), 0 18px 50px rgba(0, 0, 0, .45), 0 0 70px rgba(184, 242, 58, .05); }
.card-head h2 { font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: -.2px; text-transform: none; }
.btn { font-family: var(--body); font-weight: 600; font-size: 13.5px; letter-spacing: .1px; text-transform: none; background: linear-gradient(180deg, #1c2218, #141811); }
.btn:hover { border-color: #46553a; background: linear-gradient(180deg, #232a1e, #181d14); }
.btn.primary { background: var(--lime); border-color: var(--lime-hi); color: var(--ink); box-shadow: 0 6px 20px rgba(184, 242, 58, .2); }
.btn.primary:hover { background: var(--lime-hi); filter: none; }
.btn.ghost { background: transparent; }
.btn.link { color: var(--lime); }
.seg { background: var(--bg-2); }
.seg button { font-family: var(--body); font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 12.5px; }
.fields label, .field { font-family: var(--label); letter-spacing: .6px; }
input[type=text], input[type=number], input[type=email], textarea, select { background: #060705; border-color: var(--line-2); }
input:focus, textarea:focus, select:focus { border-color: var(--lime); box-shadow: 0 0 0 3px rgba(184, 242, 58, .14); }
.check input { accent-color: var(--lime); }

.drop { border-color: #2c3526; background: radial-gradient(600px 180px at 50% 0%, rgba(184, 242, 58, .07), transparent 70%), #090b08; }
.drop:hover, .drop:focus { border-color: var(--lime); background: radial-gradient(600px 200px at 50% 0%, rgba(184, 242, 58, .12), transparent 70%), #0b0d09; }
.drop .drop-ico { background: var(--lime); color: var(--ink); box-shadow: 0 8px 24px rgba(184, 242, 58, .25); }
.drop strong { font-family: var(--display); font-weight: 700; letter-spacing: -.2px; text-transform: none; }
.drop-overlay { border-color: var(--lime); }
.drop-overlay div { font-family: var(--display); font-weight: 700; letter-spacing: -.5px; }

.kv { background: rgba(0, 0, 0, .3); }
.kv span { font-family: var(--label); letter-spacing: .6px; }
.banner.red { border-color: rgba(255, 90, 95, .4); background: rgba(255, 90, 95, .08); color: #ffc9ca; }
.table-wrap { background: rgba(0, 0, 0, .2); }
.grid th { background: var(--bg-2); font-family: var(--label); letter-spacing: .6px; }
.grid td { border-bottom-color: #1a2016; }
.note-in { background: #060705; border-color: var(--line-2); }

/* ---------------------------------------------------------------- modal / drawer */
.modal { background: linear-gradient(180deg, #141811, #0b0d09); border-color: var(--line-2); }
.modal-hero { background: radial-gradient(circle at 30% 0%, #1e231a 0%, #0b0d09 75%); border-bottom: 1px solid var(--line); }
.modal-hero h2 { line-height: 0; color: var(--cream); margin-bottom: 10px; }
.modal-hero p { font-family: var(--label); font-size: 12px; letter-spacing: .3px; text-transform: none; color: var(--muted); }
.modal-body h4, .set-group > b { font-family: var(--label); letter-spacing: 1px; }
.drawer { background: linear-gradient(180deg, #141811, #0b0d09); }
.drawer-head h2 { font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: -.2px; text-transform: none; }
.set-row { background: rgba(0, 0, 0, .28); }

/* ---------------------------------------------------------------- shared widgets */
.xcard { background: linear-gradient(160deg, #181d14, #0f120d); }
.xcard:hover { border-color: #46553a; }
.xcard.primary { background: linear-gradient(160deg, rgba(184, 242, 58, .16), rgba(184, 242, 58, .04) 60%, #0f120d); border-color: rgba(184, 242, 58, .5); }
.xcard .x-ico { font-family: var(--label); font-weight: 600; font-size: 12.5px; background: #050604; }
.xcard.primary .x-ico { background: var(--lime); border-color: var(--lime-hi); color: var(--ink); }
.xcard b { font-family: var(--display); font-weight: 700; letter-spacing: -.1px; text-transform: none; }
.switch { background: #2a3322; }
.switch:checked { background: var(--lime); }
.switch:checked::after { background: var(--ink); }
.tag, .settings label { font-family: var(--label); letter-spacing: .3px; text-transform: none; }
.count-pill { background: var(--lime); color: var(--ink); font-weight: 600; }
.tag.lib { border-color: rgba(255, 90, 95, .45); color: #ff9a9d; }

/* ---------------------------------------------------------------- footer + toast */
.app-foot { font-family: var(--label); font-size: 11px; letter-spacing: .3px; text-transform: none; }
.toast { background: var(--cream); color: var(--ink); }
.toast.err { background: var(--danger); color: var(--ink); }
.paper-wrap { background: #1a1f16; }

/* ---------------------------------------------------------------- license gate + Settings › License */
.lic-scrim { position: fixed; inset: 0; z-index: 90; background: rgba(4, 5, 3, .86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.modal.lic { z-index: 91; width: min(560px, calc(100vw - 32px)); }
.modal.lic .modal-hero { display: flex; align-items: center; gap: 16px; }
.modal.lic .brand-tile.big { flex: 0 0 auto; margin: 0; }
.modal.lic .modal-hero h2 { margin: 0 0 4px; font: 700 24px/1.15 var(--display); letter-spacing: -.3px; color: var(--cream); }
.modal.lic .modal-hero p { margin: 0; }
.lic-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 6px; }
.lic-key { flex: 1 1 260px; min-width: 0; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line-2); background: #050604; color: var(--cream); font: 14px/1.2 var(--label); letter-spacing: .4px; }
.lic-key:focus { outline: none; border-color: var(--lime); box-shadow: 0 0 0 3px rgba(184, 242, 58, .22); }
.lic-msg { margin: 8px 0 0; font-size: 14px; }
.lic-msg.err { color: #ffb3b5; }
.lic-msg.ok { color: var(--lime); }
.lic-help, .lic-note { margin: 12px 0 0; color: var(--muted); font-size: 13px; }
.lic-help a { color: var(--lime); }
html.lic-locked { overflow: hidden; }
.lic-set .set-row small { word-break: normal; max-width: none; }
.lic-set .lic-on > span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--lime); }
.lic-tools { flex: 0 0 auto; display: flex; gap: 6px; }