:root {
  --ink: #eef4ed;
  --muted: #91a39b;
  --deep: #07120f;
  --surface: rgba(16, 32, 27, .78);
  --surface-strong: #10241e;
  --line: rgba(201, 228, 215, .12);
  --mint: #80f0b2;
  --mint-strong: #4de794;
  --coral: #ff765f;
  --gold: #d7bc72;
  --shadow: 0 28px 80px rgba(0, 0, 0, .36);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--deep);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; min-height: 100vh; overflow-x: hidden; background:
  radial-gradient(circle at 74% 9%, rgba(49, 125, 91, .20), transparent 34rem),
  linear-gradient(160deg, #091713 0%, #07100e 42%, #050b09 100%); }
button, input, select { font: inherit; }
button { color: inherit; }

.ambient { position: fixed; border-radius: 50%; filter: blur(90px); pointer-events: none; opacity: .17; }
.ambient-one { width: 28rem; height: 28rem; background: #1fd57b; top: 5rem; right: -14rem; }
.ambient-two { width: 24rem; height: 24rem; background: #cf5948; bottom: 10rem; left: -17rem; opacity: .08; }

.topbar { height: 82px; max-width: 1220px; margin: auto; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: flex; gap: 12px; align-items: center; color: var(--ink); text-decoration: none; letter-spacing: .08em; }
.brand strong { display: block; font-size: .92rem; line-height: 1; }
.brand small { display: block; color: var(--muted); font-size: .55rem; letter-spacing: .28em; margin-top: 5px; }
.brand-mark { width: 34px; height: 34px; border: 1px solid rgba(128, 240, 178, .35); border-radius: 50%; display: grid; place-items: center; }
.brand-mark span { display: block; width: 11px; height: 14px; border: 2px solid var(--mint); border-radius: 6px 6px 3px 3px; position: relative; margin-top: 4px; }
.brand-mark span::before { content: ""; position: absolute; width: 7px; height: 8px; border: 2px solid var(--mint); border-bottom: 0; border-radius: 7px 7px 0 0; left: 0; top: -9px; }
.local-only { color: var(--muted); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; display: flex; align-items: center; gap: 9px; }
.local-only > span { width: 7px; height: 7px; border-radius: 50%; background: var(--mint-strong); box-shadow: 0 0 12px var(--mint-strong); }
.lock-picker { display: flex; align-items: center; gap: 9px; margin-left: auto; margin-right: 18px; }
.lock-picker label { display: block; font-size: .55rem; }
.lock-picker select { width: 190px; min-height: 38px; }
.button.compact { min-height: 38px; padding: 0 13px; background: rgba(128,240,178,.09); border: 1px solid rgba(128,240,178,.22); color: var(--mint); }
.active-lock-meta { color: var(--gold); font: 600 .68rem/1.4 ui-monospace, monospace; letter-spacing: .08em; margin: 0 0 10px; }

main { max-width: 1220px; margin: auto; padding: 40px 28px 90px; }
.panel { background: linear-gradient(145deg, rgba(21, 42, 35, .82), rgba(11, 25, 21, .92)); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); backdrop-filter: blur(18px); }
.hero { min-height: 460px; display: grid; grid-template-columns: 1.12fr .88fr; overflow: hidden; position: relative; }
.hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px); background-size: 36px 36px; mask-image: linear-gradient(90deg, black, transparent); }
.hero-copy { align-self: center; padding: 64px 72px; position: relative; z-index: 1; }
.eyebrow { color: var(--mint); font-size: .68rem; font-weight: 750; letter-spacing: .24em; margin: 0 0 18px; }
h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: clamp(3.2rem, 6vw, 5.5rem); line-height: .89; letter-spacing: -.055em; margin: 0; }
h1 em { color: var(--mint); font-weight: 400; }
.lead { color: #a8bab1; max-width: 34rem; line-height: 1.68; margin: 28px 0 32px; font-size: .96rem; }
.button { min-height: 48px; border: 0; border-radius: 12px; padding: 0 21px; font-weight: 760; font-size: .82rem; cursor: pointer; transition: transform .18s ease, filter .18s ease, opacity .18s ease; }
.button:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.07); }
.button:focus-visible, .quick-action:focus-visible, .icon-button:focus-visible, .text-button:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
.button:disabled, [data-action]:disabled { opacity: .42; cursor: wait; }
.button.primary { background: var(--mint); color: #06130e; box-shadow: 0 12px 35px rgba(77, 231, 148, .18); }
.button.secondary { background: rgba(128, 240, 178, .09); border: 1px solid rgba(128, 240, 178, .28); color: var(--mint); }
.button.full { width: 100%; }
.button-icon { font-size: 1.15rem; margin-right: 7px; }

.lock-orbit { position: relative; min-height: 430px; display: grid; place-items: center; }
.lock-orbit::before { content: ""; width: 330px; height: 330px; position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(91, 224, 151, .17), rgba(43, 107, 79, .04) 52%, transparent 70%); }
.orbit { position: absolute; border-radius: 50%; border: 1px solid rgba(128, 240, 178, .12); }
.orbit-one { width: 300px; height: 300px; }
.orbit-two { width: 380px; height: 380px; border-style: dashed; animation: rotate 50s linear infinite; }
@keyframes rotate { to { transform: rotate(360deg); } }
.lock-core { width: 176px; height: 176px; border-radius: 50%; background: linear-gradient(145deg, #1f3c32, #0b1a16); border: 1px solid rgba(128, 240, 178, .25); box-shadow: inset 0 1px 2px rgba(255,255,255,.08), 0 30px 70px rgba(0,0,0,.42); display: grid; place-items: center; position: relative; transition: border-color .3s, box-shadow .3s; }
.shackle { position: absolute; width: 54px; height: 57px; border: 7px solid #c3d8ce; border-bottom: 0; border-radius: 28px 28px 0 0; top: 44px; transition: transform .35s; }
.keyhole { width: 38px; height: 43px; border-radius: 7px; background: #c3d8ce; margin-top: 43px; position: relative; }
.keyhole::before { content: ""; width: 8px; height: 16px; background: #173028; border-radius: 50% 50% 3px 3px; position: absolute; top: 11px; left: 15px; }
.lock-core.unlocked { border-color: rgba(128, 240, 178, .7); box-shadow: 0 0 50px rgba(77, 231, 148, .18), inset 0 1px 2px rgba(255,255,255,.08); }
.lock-core.unlocked .shackle { transform: translate(14px, -9px) rotate(14deg); }
.status-card, .battery-card { position: absolute; background: rgba(6, 18, 14, .82); border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(0,0,0,.25); backdrop-filter: blur(12px); }
.status-card { left: 4%; bottom: 16%; border-radius: 12px; padding: 13px 16px; display: flex; gap: 11px; align-items: center; min-width: 180px; }
.status-card small, .battery-card small { display: block; color: var(--muted); letter-spacing: .16em; font-size: .54rem; margin-bottom: 3px; }
.status-card strong { font-size: .76rem; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: #607169; }
.status-dot.locked { background: var(--coral); box-shadow: 0 0 12px rgba(255,118,95,.7); }
.status-dot.unlocked { background: var(--mint); box-shadow: 0 0 12px rgba(128,240,178,.7); }
.battery-card { right: 6%; top: 18%; width: 74px; height: 74px; border-radius: 50%; display: grid; place-content: center; text-align: center; }
.battery-card > span { font-family: Georgia, serif; font-size: 1.25rem; }

.quick-grid { display: grid; grid-template-columns: 1fr 1fr 1.55fr; gap: 14px; margin: 16px 0 78px; }
.quick-action, .wake-note { min-height: 94px; border-radius: 18px; border: 1px solid var(--line); background: rgba(13, 28, 23, .8); display: flex; align-items: center; padding: 20px; }
.quick-action { text-align: left; cursor: pointer; gap: 16px; transition: background .2s, transform .2s; }
.quick-action:hover:not(:disabled) { transform: translateY(-2px); background: rgba(22, 44, 36, .9); }
.quick-action.unlock { border-color: rgba(128, 240, 178, .25); }
.quick-action.lock { border-color: rgba(255, 118, 95, .2); }
.quick-symbol { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 50%; background: rgba(128,240,178,.1); color: var(--mint); font-size: 1.25rem; }
.lock .quick-symbol { background: rgba(255,118,95,.1); color: var(--coral); }
.quick-action small, .wake-note small { display: block; color: var(--muted); font-size: .58rem; letter-spacing: .16em; margin-bottom: 5px; }
.quick-action strong { font-family: Georgia, serif; font-size: 1.25rem; font-weight: 400; }
.wake-note { gap: 16px; }
.wake-note strong { display: block; font-size: .8rem; margin-bottom: 6px; }
.wake-note small { letter-spacing: 0; line-height: 1.45; margin: 0; }
.pulse-icon { width: 42px; height: 42px; border: 1px solid rgba(215,188,114,.3); border-radius: 50%; position: relative; flex: 0 0 auto; }
.pulse-icon::after { content: ""; width: 7px; height: 7px; background: var(--gold); border-radius: 50%; position: absolute; inset: 0; margin: auto; box-shadow: 0 0 0 7px rgba(215,188,114,.1), 0 0 18px var(--gold); }

.management-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 22px; }
.management-heading h2 { font-family: Georgia, serif; font-weight: 400; font-size: clamp(2rem, 4vw, 3.2rem); margin: 0; }
.capabilities { display: flex; gap: 8px; flex-wrap: wrap; }
.capabilities span { padding: 8px 11px; background: rgba(255,255,255,.035); border: 1px solid var(--line); border-radius: 999px; font-size: .65rem; color: var(--muted); }
.capabilities b { color: var(--gold); margin-left: 5px; }
.capabilities .supported b { color: var(--mint); }
.capabilities .unsupported { opacity: .45; }
.management-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.access-panel { padding: 30px; box-shadow: 0 20px 55px rgba(0,0,0,.25); }
.access-panel.wide { grid-column: 1 / -1; }
.access-panel.unsupported { opacity: .52; }
.section-title { display: flex; gap: 15px; align-items: center; padding-bottom: 23px; border-bottom: 1px solid var(--line); margin-bottom: 23px; }
.section-number { font-family: Georgia, serif; color: var(--mint); font-size: 1.7rem; }
.section-title h3 { font-family: Georgia, serif; font-size: 1.55rem; font-weight: 400; margin: 0 0 4px; }
.section-title p { color: var(--muted); margin: 0; font-size: .72rem; }
.management-note { margin: -9px 0 20px; padding: 10px 12px; border: 1px solid rgba(236, 185, 93, .28); border-radius: 10px; background: rgba(236, 185, 93, .08); color: #e9ca91; font-size: .72rem; line-height: 1.45; }
form { display: grid; gap: 15px; }
label { display: grid; gap: 8px; color: var(--muted); font-size: .65rem; letter-spacing: .09em; text-transform: uppercase; font-weight: 700; }
input, select { min-height: 46px; width: 100%; border: 1px solid var(--line); background: rgba(3, 13, 10, .55); border-radius: 10px; color: var(--ink); padding: 0 13px; outline: none; color-scheme: dark; }
input:focus, select:focus { border-color: rgba(128, 240, 178, .55); box-shadow: 0 0 0 3px rgba(128,240,178,.07); }
input:disabled { opacity: .42; }
.input-with-button { position: relative; }
.input-with-button input { padding-right: 84px; }
.text-button { position: absolute; right: 6px; top: 6px; height: 34px; background: transparent; border: 0; color: var(--mint); cursor: pointer; font-size: .58rem; letter-spacing: .1em; }
.field-hint { color: var(--muted); font-size: .62rem; font-weight: 500; letter-spacing: 0; line-height: 1.45; text-transform: none; }
.form-row { display: grid; grid-template-columns: .8fr 1fr 1fr; gap: 10px; }
.form-row[hidden] { display: none; }
.form-row.two { grid-template-columns: 1fr 1fr; }
.enroll-hint { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: .6rem; text-transform: uppercase; letter-spacing: .05em; }
.enroll-hint span { width: 19px; height: 19px; display: grid; place-items: center; border: 1px solid rgba(128,240,178,.3); color: var(--mint); border-radius: 50%; }
.enroll-hint i { width: 18px; height: 1px; background: var(--line); }
.fingerprint-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 10px; }
.fingerprint-form .switch-row,
.fingerprint-form .fingerprint-validity-note,
.fingerprint-form .fingerprint-time,
.fingerprint-form .button { grid-column: 1 / -1; }
.fingerprint-form .button { margin-top: 4px; }
.local-label-note { margin: 12px 0 0; color: var(--muted); font-size: .62rem; line-height: 1.5; }
.validity-note { margin-top: -9px; color: var(--muted); font-size: .62rem; line-height: 1.45; }
.list-heading { display: flex; justify-content: space-between; align-items: center; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.list-heading h4 { margin: 0; font-size: .68rem; text-transform: uppercase; letter-spacing: .15em; }
.icon-button { width: 31px; height: 31px; border-radius: 50%; border: 1px solid var(--line); color: var(--mint); background: transparent; cursor: pointer; }
.access-list { display: grid; gap: 8px; margin-top: 13px; min-height: 54px; }
.access-list.compact { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.empty { margin: 12px 0; color: var(--muted); font-size: .74rem; }
.access-item { min-height: 58px; border: 1px solid rgba(255,255,255,.06); background: rgba(2,12,9,.33); border-radius: 10px; display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 11px 12px 11px 15px; gap: 10px; }
.access-item strong { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; display: block; font-size: .84rem; letter-spacing: .08em; }
.access-item small { display: block; color: var(--muted); margin-top: 4px; font-size: .62rem; }
.item-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.item-actions button { min-width: 34px; min-height: 34px; padding: 0 9px; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; font-size: .62rem; }
.item-actions button:hover { color: var(--mint); border-color: rgba(128,240,178,.3); }
.item-actions .delete:hover { color: var(--coral); border-color: rgba(255,118,95,.35); }
.gateway-item strong { font-family: inherit; font-size: .9rem; letter-spacing: 0; }
.gateway-item { border-left: 3px solid var(--line); }
.gateway-item[data-status="ok"] { border-left-color: var(--mint); }
.gateway-item[data-status="warn"] { border-left-color: #f2c14e; }
.gateway-item[data-status="error"] { border-left-color: var(--coral); }
.gateway-item[data-status="muted"] { opacity: .6; }
.hint { color: var(--muted); font-size: .68rem; margin-top: 12px; line-height: 1.5; word-break: break-word; }
.inline-row { display: flex; gap: 8px; align-items: center; }
.inline-row select { flex: 1; }

.login-body { display: grid; place-items: center; padding: 24px; }
.login-card { width: min(400px, 100%); padding: 40px 36px; background: linear-gradient(145deg, rgba(21, 42, 35, .82), rgba(11, 25, 21, .92)); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); }
.login-card h1 { font-size: 2.4rem; margin: 0 0 28px; }
.login-card label { display: block; margin-bottom: 16px; color: var(--muted); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; }
.login-card input { display: block; width: 100%; box-sizing: border-box; margin-top: 8px; min-height: 44px; padding: 0 14px; border-radius: 11px; border: 1px solid var(--line); background: rgba(3,13,10,.7); color: var(--ink); letter-spacing: normal; text-transform: none; }
.login-card input:focus-visible { outline: 2px solid var(--mint); outline-offset: 1px; }
.login-card .button { margin-top: 10px; }
.login-error { color: var(--coral); font-size: .72rem; min-height: 1.2em; margin: 16px 0 0; text-align: center; }

.pin-item { align-items: start; }
.pin-item strong, .card-item strong { font-family: inherit; font-size: .9rem; letter-spacing: 0; }
.fingerprint-item strong { font-family: inherit; font-size: .9rem; letter-spacing: 0; }
.access-item.unlabelled { border-color: rgba(236,185,93,.22); }
.saved-pin { margin-top: 16px; padding: 14px 15px; border: 1px solid rgba(128,240,178,.35); border-radius: 11px; background: rgba(77,231,148,.08); display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.saved-pin[hidden] { display: none; }
.saved-pin-label { display: block; color: var(--mint); font-size: .58rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.saved-pin strong { display: block; margin-top: 5px; color: var(--ink); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 1.15rem; letter-spacing: .16em; }
.saved-pin small { display: block; margin-top: 4px; color: var(--muted); font-size: .62rem; }
.saved-pin-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.saved-pin-actions button { min-height: 34px; padding: 0 10px; border: 1px solid rgba(128,240,178,.25); border-radius: 8px; background: transparent; color: var(--mint); cursor: pointer; font-size: .62rem; }

.debug-panel { margin: 0 0 72px; padding: 30px; overflow: hidden; }
.access-log-panel { margin: 0 0 28px; padding: 30px; overflow: hidden; }
.access-log-legend { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.access-cat {
  font-size: .55rem; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 8px; border-radius: 999px; border: 1px solid rgba(128,240,178,.18); color: #8fa89c;
}
.access-cat.access { border-color: rgba(128,240,178,.45); color: var(--mint); }
.access-cat.denied { border-color: rgba(255,118,95,.5); color: #ff9e8e; }
.access-cat.credential { border-color: rgba(125,180,255,.45); color: #9ec0ff; }
.access-cat.control { border-color: rgba(215,188,114,.5); color: var(--gold); }
.access-cat.system { border-color: rgba(160,170,180,.35); color: #9aa7b0; }
.access-log {
  height: 280px; overflow: auto; overscroll-behavior: contain;
  border: 1px solid rgba(128,240,178,.15); border-radius: 11px; background: #030b08;
  padding: 8px 0; font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  scrollbar-color: rgba(128,240,178,.3) transparent;
}
.access-line {
  min-height: 34px; display: grid;
  grid-template-columns: 92px 88px minmax(0, 1fr);
  align-items: start; gap: 10px; padding: 8px 12px;
  border-left: 2px solid transparent; font-size: .68rem; line-height: 1.45;
}
.access-line:hover { background: rgba(255,255,255,.025); }
.access-line time { color: #60756c; }
.access-line .access-kind {
  font-size: .55rem; letter-spacing: .07em; text-transform: uppercase; font-weight: 700; color: #7c958a;
}
.access-line .access-body strong { display: block; color: #d7e6de; font-weight: 600; margin-bottom: 2px; }
.access-line .access-body span { color: #8fa89c; overflow-wrap: anywhere; }
.access-line.access { border-left-color: rgba(128,240,178,.55); }
.access-line.access .access-kind { color: var(--mint); }
.access-line.denied { border-left-color: rgba(255,118,95,.7); }
.access-line.denied .access-kind,
.access-line.denied .access-body strong { color: #ff9e8e; }
.access-line.credential { border-left-color: rgba(125,180,255,.55); }
.access-line.credential .access-kind { color: #9ec0ff; }
.access-line.control { border-left-color: rgba(215,188,114,.62); }
.access-line.control .access-kind { color: var(--gold); }
.access-line.system { border-left-color: rgba(160,170,180,.45); }
.access-line.system .access-kind { color: #9aa7b0; }
.debug-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.debug-heading h2 { font-family: Georgia, serif; font-size: clamp(1.7rem, 3vw, 2.35rem); font-weight: 400; margin: 0 0 8px; }
.debug-heading p:not(.eyebrow) { color: var(--muted); margin: 0; font-size: .72rem; line-height: 1.55; }
.discovery-badge { min-height: 34px; display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .59rem; letter-spacing: .1em; }
.discovery-badge span { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 9px currentColor; }
.discovery-badge.scanning, .discovery-badge.starting { color: var(--gold); }
.discovery-badge.scanning span, .discovery-badge.starting span { animation: pulse 1.4s ease-in-out infinite; }
.discovery-badge.visible { color: var(--mint); border-color: rgba(128,240,178,.3); background: rgba(128,240,178,.06); }
.discovery-badge.paused { color: #d9b875; }
.discovery-badge.error, .discovery-badge.stopped { color: var(--coral); }
.discovery-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 24px 0 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--line); }
.discovery-stats div { min-height: 65px; padding: 13px 15px; background: rgba(3,13,10,.74); }
.discovery-stats small { display: block; color: var(--muted); font-size: .55rem; letter-spacing: .12em; margin-bottom: 8px; }
.discovery-stats strong { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .72rem; font-weight: 500; }
.debug-toolbar { min-height: 38px; display: flex; align-items: center; gap: 16px; color: var(--muted); font-size: .62rem; }
.debug-toolbar > span { margin-right: auto; }
.debug-autoscroll { display: flex; grid-template-columns: auto auto; align-items: center; gap: 7px; font-size: .58rem; letter-spacing: .06em; cursor: pointer; }
.debug-autoscroll input { width: 14px; min-height: 14px; accent-color: var(--mint); }
.debug-clear { border: 0; background: transparent; color: var(--mint); padding: 7px 0; cursor: pointer; font-size: .58rem; letter-spacing: .07em; text-transform: uppercase; }
.debug-log { height: 330px; overflow: auto; overscroll-behavior: contain; border: 1px solid rgba(128,240,178,.15); border-radius: 11px; background: #030b08; padding: 8px 0; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; scrollbar-color: rgba(128,240,178,.3) transparent; }
.debug-empty { color: var(--muted); padding: 8px 13px; margin: 0; font-size: .67rem; }
.debug-line { min-height: 25px; display: grid; grid-template-columns: 92px 52px 82px minmax(0, 1fr); align-items: start; gap: 8px; padding: 5px 12px; border-left: 2px solid transparent; font-size: .65rem; line-height: 1.45; }
.debug-line:hover { background: rgba(255,255,255,.025); }
.debug-line time, .debug-source { color: #60756c; }
.debug-level { color: #7c958a; font-weight: 700; }
.debug-message { color: #b8c9c1; overflow-wrap: anywhere; }
.debug-line.info { border-left-color: rgba(128,240,178,.45); }
.debug-line.info .debug-level { color: var(--mint); }
.debug-line.warning { border-left-color: rgba(215,188,114,.62); }
.debug-line.warning .debug-level { color: var(--gold); }
.debug-line.error { border-left-color: rgba(255,118,95,.7); }
.debug-line.error .debug-level, .debug-line.error .debug-message { color: #ff9e8e; }
.debug-privacy { color: #60756c; font-size: .58rem; margin: 10px 0 0; }
.discovered-devices { display: flex; gap: 8px; flex-wrap: wrap; margin: -6px 0 14px; }
.device-chip { display: grid; grid-template-columns: auto 1fr; gap: 4px 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(3,13,10,.5); font-size: .62rem; }
.device-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); margin-top: 4px; }
.device-chip.visible i { background: var(--mint); box-shadow: 0 0 8px var(--mint); }
.device-chip small { grid-column: 2; color: var(--muted); }
.debug-line.filtered { display: none; }
.debug-toolbar label { display: flex; grid-template-columns: auto 150px; align-items: center; }
.debug-toolbar select { min-height: 32px; }

.settings-grid { margin-bottom: 54px; }
.device-info { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin: 0 0 22px; }
.device-info div { background: rgba(3,13,10,.68); padding: 11px 13px; }
.device-info dt { color: var(--muted); font-size: .57rem; text-transform: uppercase; letter-spacing: .1em; }
.device-info dd { margin: 5px 0 0; font-family: ui-monospace, monospace; font-size: .72rem; overflow-wrap: anywhere; }
.switch-row { display: flex; grid-template-columns: auto 1fr; align-items: center; gap: 9px; text-transform: none; letter-spacing: 0; }
.switch-row input { width: 18px; min-height: 18px; accent-color: var(--mint); }
.button-row { display: flex; gap: 8px; flex-wrap: wrap; }
.danger-link { border: 0; background: transparent; color: #e98e7e; font-size: .63rem; padding: 8px 0; cursor: pointer; }
.danger-zone { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 25px 30px; border-color: rgba(255,118,95,.25); }
.danger-zone h3 { margin: 0 0 7px; font: 400 1.5rem Georgia, serif; }
.danger-zone p:not(.eyebrow) { color: var(--muted); margin: 0; max-width: 680px; font-size: .72rem; line-height: 1.5; }
.button.danger { background: rgba(255,118,95,.12); border: 1px solid rgba(255,118,95,.4); color: #ff9e8e; }
.operation-list { max-height: 430px; overflow: auto; }

dialog { width: min(660px, calc(100vw - 28px)); border: 1px solid rgba(128,240,178,.25); border-radius: 22px; background: #0b1b16; color: var(--ink); padding: 0; box-shadow: 0 40px 120px rgba(0,0,0,.72); }
dialog::backdrop { background: rgba(0,7,5,.78); backdrop-filter: blur(8px); }
.onboard-form { padding: 30px; }
.onboard-form hr { border: none; border-top: 1px solid var(--line); margin: 22px 0; }
.dialog-heading { display: flex; justify-content: space-between; gap: 18px; }
.dialog-heading h2 { margin: 0; font: 400 2rem Georgia, serif; }
.dialog-close { width: 38px; height: 38px; border-radius: 50%; background: transparent; border: 1px solid var(--line); cursor: pointer; }
.onboard-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0; margin: 24px 0; list-style-position: inside; }
.onboard-steps li { padding: 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--mint); font-size: .72rem; }
.onboard-steps strong, .onboard-steps small { display: block; color: var(--ink); margin-top: 6px; }
.onboard-steps small { color: var(--muted); line-height: 1.4; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 8px; }
.onboard-status { color: var(--muted); font-size: .67rem; line-height: 1.5; margin: 5px 0 0; }
.label-form { gap: 17px; }
.label-dialog-copy { color: var(--muted); font-size: .72rem; line-height: 1.55; margin: 6px 0 4px; }

.activity { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); width: min(520px, calc(100vw - 30px)); min-height: 68px; padding: 13px 18px; background: rgba(7, 21, 16, .96); border: 1px solid rgba(128,240,178,.26); border-radius: 16px; box-shadow: 0 22px 70px rgba(0,0,0,.55); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; z-index: 20; backdrop-filter: blur(16px); }
.activity[hidden], .toast[hidden] { display: none; }
.activity-spinner { width: 31px; height: 31px; border: 2px solid rgba(128,240,178,.14); border-top-color: var(--mint); border-radius: 50%; animation: rotate .9s linear infinite; }
.activity strong { display: block; font-size: .76rem; margin-bottom: 4px; }
.activity small { display: block; color: var(--muted); font-size: .65rem; }
.activity time { color: var(--mint); font-family: ui-monospace, monospace; font-size: .74rem; }
.toast { position: fixed; top: 98px; right: 25px; max-width: min(390px, calc(100vw - 40px)); background: #152a23; border: 1px solid rgba(128,240,178,.25); border-radius: 12px; padding: 14px 17px; box-shadow: var(--shadow); font-size: .76rem; line-height: 1.5; z-index: 30; }
.toast.error { border-color: rgba(255,118,95,.45); color: #ffc1b6; }
.toast.warning { border-color: rgba(244,190,92,.5); color: #ffe0a1; }
footer { max-width: 1164px; margin: auto; min-height: 70px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: .63rem; padding: 0 4px; }

@media (max-width: 850px) {
  .hero { grid-template-columns: 1fr; }
  .hero-copy { padding: 48px 38px 15px; }
  .lock-orbit { min-height: 390px; }
  .quick-grid { grid-template-columns: 1fr 1fr; }
  .wake-note { grid-column: 1 / -1; }
  .management-grid { grid-template-columns: 1fr; }
  .discovery-stats { grid-template-columns: 1fr 1fr; }
  .access-panel.wide { grid-column: auto; }
  .fingerprint-form { grid-template-columns: 1fr 1fr; }
  .fingerprint-form .switch-row,
  .fingerprint-form .fingerprint-validity-note,
  .fingerprint-form .fingerprint-time,
  .fingerprint-form button { grid-column: 1 / -1; }
}

@media (max-width: 570px) {
  .topbar { height: 68px; padding: 0 18px; }
  .local-only { font-size: 0; }
  main { padding: 24px 14px 70px; }
  .hero-copy { padding: 39px 24px 8px; }
  .hero { min-height: 0; }
  .lock-orbit { min-height: 330px; transform: scale(.9); margin: -10px; }
  .quick-grid { grid-template-columns: 1fr; margin-bottom: 55px; }
  .wake-note { grid-column: auto; }
  .management-heading { display: block; }
  .capabilities { margin-top: 16px; }
  .access-panel { padding: 23px 18px; }
  .form-row, .form-row.two, .fingerprint-form { grid-template-columns: 1fr; }
  .access-item, .saved-pin { grid-template-columns: 1fr; align-items: stretch; }
  .access-item { display: grid; }
  .saved-pin { flex-direction: column; align-items: stretch; }
  .item-actions, .saved-pin-actions { justify-content: flex-start; }
  .fingerprint-form button { grid-column: auto; }
  .enroll-hint { flex-wrap: wrap; justify-content: flex-start; }
  .debug-panel, .access-log-panel { padding: 23px 14px; margin-bottom: 55px; }
  .access-log-panel { margin-bottom: 22px; }
  .debug-heading { display: block; }
  .access-log-legend { justify-content: flex-start; margin-top: 14px; }
  .access-line { grid-template-columns: 80px 1fr; }
  .access-line .access-body { grid-column: 1 / -1; }
  .discovery-badge { margin-top: 16px; }
  .discovery-stats { grid-template-columns: 1fr; }
  .debug-toolbar { flex-wrap: wrap; padding-bottom: 8px; }
  .debug-toolbar > span { width: 100%; }
  .debug-line { grid-template-columns: 80px 45px 1fr; }
  .debug-message { grid-column: 1 / -1; padding-left: 0; }
  footer { margin: 0 18px; display: block; padding-top: 20px; }
  footer span { display: block; margin-bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}