:root {
  color-scheme: dark;
  --bg: #090a0f;
  --surface: #11131b;
  --surface-2: #171a24;
  --line: #262a39;
  --text: #f4f5fb;
  --muted: #969bad;
  --violet: #8d72ff;
  --violet-deep: #654bd6;
  --green: #35df9a;
  --blue: #62a8ff;
  --red: #ff6b7c;
  --shadow: 0 24px 80px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% -12%, rgba(105, 77, 218, .22), transparent 32rem),
    radial-gradient(circle at 96% 8%, rgba(57, 104, 180, .12), transparent 27rem),
    var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
button, input { font: inherit; }
.eyebrow { margin: 0 0 .7rem; color: var(--violet); font-size: .72rem; font-weight: 800; letter-spacing: .13em; }
.lede { color: var(--muted); font-size: 1rem; line-height: 1.65; }

.auth-page { display: grid; place-items: center; padding: max(1.25rem, env(safe-area-inset-top)) 1.25rem max(1.25rem, env(safe-area-inset-bottom)); }
.auth-shell { width: min(100%, 31rem); }
.auth-card {
  overflow: hidden;
  position: relative;
  padding: clamp(2rem, 7vw, 3.25rem);
  background: linear-gradient(145deg, rgba(25, 27, 38, .97), rgba(15, 17, 25, .98));
  border: 1px solid var(--line);
  border-radius: 1.5rem;
  box-shadow: var(--shadow);
}
.auth-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(141,114,255,.8), transparent); }
.auth-card h1 { max-width: 22rem; margin: 0; font-size: clamp(2rem, 8vw, 3.1rem); line-height: 1.02; letter-spacing: -.045em; }
.auth-card .lede { margin: 1rem 0 2rem; }
.brand-mark { display: flex; align-items: end; gap: 4px; width: 31px; height: 30px; margin-bottom: 2rem; }
.brand-mark span { flex: 1; border-radius: 5px; background: linear-gradient(180deg, #a28dff, #6a4fdd); box-shadow: 0 0 18px rgba(141,114,255,.35); }
.brand-mark span:nth-child(1) { height: 48%; }.brand-mark span:nth-child(2) { height: 100%; }.brand-mark span:nth-child(3) { height: 70%; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: .75rem; min-height: 2.8rem; padding: .72rem 1rem; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: .78rem; text-decoration: none; cursor: pointer; transition: transform .15s ease, border-color .15s ease, background .15s ease; }
.button:hover { transform: translateY(-1px); border-color: #4d5267; }
.button:focus-visible { outline: 3px solid rgba(141,114,255,.42); outline-offset: 2px; }
.button-primary { background: linear-gradient(135deg, var(--violet), var(--violet-deep)); border-color: transparent; font-weight: 750; box-shadow: 0 12px 30px rgba(91,67,196,.3); }
.button-full { width: 100%; }
.button-quiet { min-height: 2.35rem; padding: .45rem .75rem; background: transparent; color: var(--muted); }
.microsoft-mark { display: grid; grid-template-columns: repeat(2, 7px); gap: 2px; }
.microsoft-mark i { width: 7px; height: 7px; background: white; opacity: .95; }
.auth-note { margin: 1rem 0 0; color: var(--muted); text-align: center; font-size: .77rem; }
.legal-links { display: flex; justify-content: center; gap: .55rem; margin-top: 2.2rem; color: #727789; font-size: .75rem; }
.legal-links a:hover { color: var(--text); }
.alert { margin-bottom: 1.2rem; padding: .8rem .9rem; border-radius: .75rem; font-size: .84rem; line-height: 1.45; }
.alert-error { color: #ffc2ca; background: rgba(163,48,66,.15); border: 1px solid rgba(255,107,124,.32); }

.topbar { height: 4.4rem; padding: env(safe-area-inset-top) max(1.1rem, env(safe-area-inset-right)) 0 max(1.1rem, env(safe-area-inset-left)); display: flex; align-items: center; justify-content: space-between; background: rgba(9,10,15,.78); border-bottom: 1px solid rgba(38,42,57,.85); backdrop-filter: blur(18px); position: sticky; top: 0; z-index: 10; }
.wordmark { display: inline-flex; align-items: center; gap: .65rem; font-weight: 800; text-decoration: none; letter-spacing: -.02em; }
.brand-dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--violet); box-shadow: 0 0 18px rgba(141,114,255,.8); }
.app-shell { width: min(100% - 2rem, 72rem); margin: 0 auto; padding: clamp(2rem, 5vw, 4.5rem) 0 max(4rem, env(safe-area-inset-bottom)); }
.hero-panel { display: flex; align-items: end; justify-content: space-between; gap: 2rem; padding-bottom: 2.2rem; }
.hero-panel > div:first-child { max-width: 45rem; }
.hero-panel h1 { margin: 0; font-size: clamp(2.25rem, 7vw, 4.6rem); letter-spacing: -.055em; line-height: .98; }
.hero-panel .lede { max-width: 42rem; margin: 1.1rem 0 0; }
.status-orb { display: flex; align-items: center; gap: .6rem; padding: .55rem .8rem; border: 1px solid rgba(53,223,154,.22); border-radius: 999px; color: #a3f1d1; background: rgba(53,223,154,.07); font-size: .78rem; font-weight: 700; white-space: nowrap; }
.status-orb span { width: .55rem; height: .55rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 14px rgba(53,223,154,.8); }
.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.metric-card { display: flex; align-items: center; gap: .9rem; min-width: 0; padding: 1.15rem; background: rgba(17,19,27,.88); border: 1px solid var(--line); border-radius: 1rem; }
.metric-card strong, .metric-card small { display: block; overflow: hidden; text-overflow: ellipsis; }
.metric-card strong { font-size: .9rem; }.metric-card small { margin-top: .28rem; color: var(--muted); font-size: .72rem; white-space: nowrap; }
.metric-icon { display: grid; flex: 0 0 2rem; height: 2rem; place-items: center; border-radius: .65rem; font-weight: 900; }
.metric-icon.green { color: var(--green); background: rgba(53,223,154,.1); }.metric-icon.violet { color: #a895ff; background: rgba(141,114,255,.12); }.metric-icon.blue { color: var(--blue); background: rgba(98,168,255,.1); }
.empty-state { margin-top: 1rem; padding: clamp(1.4rem, 4vw, 2.4rem); background: linear-gradient(140deg, rgba(21,23,33,.95), rgba(14,16,23,.9)); border: 1px solid var(--line); border-radius: 1.15rem; }
.empty-state h2 { margin: 0; font-size: 1.35rem; }.empty-state p:last-child { max-width: 46rem; margin: .7rem 0 0; color: var(--muted); line-height: 1.6; }

.legal-page { padding: 3rem 1.2rem; }.legal-document { width: min(100%, 48rem); margin: 0 auto; }.legal-document h1 { font-size: clamp(2.1rem, 7vw, 3.5rem); letter-spacing: -.04em; }.legal-document h2 { margin-top: 2rem; font-size: 1.1rem; }.legal-document p, .legal-document li { color: var(--muted); line-height: 1.7; }.back-link { color: #b9adff; }

@media (max-width: 760px) {
  .hero-panel { align-items: flex-start; flex-direction: column; }
  .metric-grid { grid-template-columns: 1fr; }
  .metric-card small { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

/* Mobile security console */
.mobile-topbar { height: 4.25rem; }
.connection-pill { display: inline-flex; align-items: center; gap: .48rem; padding: .42rem .65rem; color: var(--muted); background: rgba(23,26,36,.75); border: 1px solid var(--line); border-radius: 999px; font-size: .7rem; font-weight: 750; }
.connection-pill span { width: .46rem; height: .46rem; border-radius: 50%; }
.connection-pill.online span { background: var(--green); box-shadow: 0 0 12px rgba(53,223,154,.75); }
.connection-pill.offline span { background: #697083; }
.back-button { display: grid; width: 2.4rem; height: 2.4rem; place-items: center; border: 1px solid var(--line); border-radius: .72rem; color: var(--text); text-decoration: none; font-size: 1.25rem; }
.mobile-shell { width: min(100% - 1.25rem, 58rem); margin: 0 auto; padding: 1rem 0 2.5rem; }
.mobile-hero { position: relative; overflow: hidden; padding: clamp(1.4rem, 6vw, 2.5rem); border: 1px solid var(--line); border-radius: 1.35rem; background: linear-gradient(145deg, rgba(24,26,37,.98), rgba(13,15,22,.98)); box-shadow: var(--shadow); }
.mobile-hero::after { content: ""; position: absolute; width: 13rem; height: 13rem; right: -5rem; top: -6rem; border-radius: 50%; filter: blur(8px); opacity: .18; }
.mobile-hero.green::after { background: var(--green); }.mobile-hero.yellow::after { background: #f5b942; }.mobile-hero.red::after { background: var(--red); }.mobile-hero.gray::after { background: #6b7280; }
.hero-status { display: flex; align-items: center; gap: .65rem; color: var(--muted); font-size: .76rem; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; }
.mobile-hero h1 { position: relative; margin: 1.25rem 0 .65rem; max-width: 38rem; font-size: clamp(2rem, 9vw, 4.1rem); line-height: .98; letter-spacing: -.055em; }
.mobile-hero > p { position: relative; max-width: 40rem; margin: 0; color: #b3b7c5; line-height: 1.6; }
.hero-meta { display: flex; gap: 1.1rem; margin-top: 1.45rem; color: #767c8e; font-size: .72rem; }
.streetlight { flex: 0 0 auto; width: .78rem; height: .78rem; border-radius: 50%; background: #697083; box-shadow: 0 0 0 4px rgba(105,112,131,.08); }
.streetlight.green, .dot.green { background: var(--green); box-shadow: 0 0 14px rgba(53,223,154,.68); }
.streetlight.yellow, .dot.yellow { background: #f5b942; box-shadow: 0 0 14px rgba(245,185,66,.65); }
.streetlight.red, .dot.red { background: var(--red); box-shadow: 0 0 14px rgba(255,107,124,.68); }
.status-strip { display: grid; grid-template-columns: repeat(3, 1fr); margin: .85rem 0 1.75rem; background: rgba(17,19,27,.9); border: 1px solid var(--line); border-radius: 1rem; }
.status-strip > div { padding: 1rem; text-align: center; }.status-strip > div + div { border-left: 1px solid var(--line); }
.status-strip strong { display: block; font-size: 1.35rem; }.status-strip span { display: flex; align-items: center; justify-content: center; gap: .38rem; margin-top: .25rem; color: var(--muted); font-size: .68rem; }
.dot { display: inline-block; width: .4rem; height: .4rem; border-radius: 50%; }
.section-block { margin-top: 2rem; }
.section-title { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; padding: 0 .15rem; }
.section-title .eyebrow { margin-bottom: .32rem; }.section-title h2 { margin: 0; font-size: 1.35rem; letter-spacing: -.025em; }
.section-title > span { display: grid; min-width: 1.85rem; height: 1.85rem; place-items: center; padding: 0 .5rem; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; font-size: .72rem; font-weight: 800; }
.section-intro { margin: -.25rem .15rem 1rem; color: var(--muted); font-size: .82rem; line-height: 1.5; }
.attention-list, .ip-list, .finding-list { display: grid; gap: .7rem; }
.attention-card { display: flex; align-items: center; gap: .85rem; padding: 1rem; color: var(--text); background: rgba(20,22,31,.92); border: 1px solid var(--line); border-radius: 1rem; text-decoration: none; }
.attention-card:active { transform: scale(.992); }.attention-card b { margin-left: auto; color: #686e81; font-size: 1.45rem; font-weight: 400; }
.attention-copy { min-width: 0; }.attention-copy strong, .attention-copy span { display: block; overflow: hidden; text-overflow: ellipsis; }
.attention-copy strong { font-size: .9rem; }.attention-copy span { margin-top: .28rem; color: var(--muted); font-size: .7rem; white-space: nowrap; }
.ip-card { padding: 1rem; background: rgba(20,22,31,.92); border: 1px solid var(--line); border-radius: 1rem; }
.ip-card-top, .ip-card-foot, .finding-card-top, .source-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ip-card code, .source-row code { color: #d5d8e4; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; }
.ip-card-top span { color: #f0c875; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.ip-card p { margin: .75rem 0; color: #b2b6c4; font-size: .8rem; line-height: 1.55; }
.ip-card-foot { padding-top: .7rem; border-top: 1px solid var(--line); color: #757b8d; font-size: .67rem; }
.ip-select { display: inline-flex; align-items: center; gap: .65rem; min-width: 0; cursor: pointer; }
.ip-select input { appearance: none; width: 1.15rem; height: 1.15rem; margin: 0; flex: 0 0 auto; border: 1px solid #4a5062; border-radius: .35rem; background: #0c0e14; }
.ip-select input:checked { border-color: var(--violet); background: var(--violet); box-shadow: inset 0 0 0 3px #171326; }
.ip-select input:disabled { opacity: .3; cursor: not-allowed; }
.inline-action { padding: 0; color: #b9adff; background: transparent; border: 0; cursor: pointer; font-size: .69rem; font-weight: 800; }
.inline-action.unblock { margin-top: .85rem; color: #aeb4c5; }
.passkey-panel { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .9rem; margin: 0 0 1rem; padding: 1rem; border: 1px solid rgba(141,114,255,.35); border-radius: 1rem; background: linear-gradient(135deg, rgba(141,114,255,.13), rgba(20,22,31,.94)); }
.passkey-icon { display: grid; width: 2.4rem; height: 2.4rem; place-items: center; color: #c4baff; border-radius: .75rem; background: rgba(141,114,255,.15); font-size: 1.35rem; }
.passkey-panel strong { display: block; font-size: .86rem; }.passkey-panel p { margin: .25rem 0 0; color: var(--muted); font-size: .73rem; line-height: 1.45; }
.passkey-panel .button { white-space: nowrap; font-size: .74rem; }
.collapsible-section > summary, .command-card > summary { list-style: none; cursor: pointer; }.collapsible-section > summary::-webkit-details-marker, .command-card > summary::-webkit-details-marker { display: none; }
.collapse-summary::after, .command-card-head::after { content: "›"; flex: 0 0 auto; color: #747b8e; font-size: 1.35rem; line-height: 1; transform: rotate(90deg); transition: transform .16s ease; }
.collapsible-section:not([open]) > .collapse-summary::after, .command-card:not([open]) > .command-card-head::after { transform: rotate(0deg); }
.collapsible-content { padding-top: .1rem; }
.command-list { display: grid; gap: .65rem; }.command-card { padding: 0; background: rgba(20,22,31,.86); border: 1px solid var(--line); border-radius: 1rem; }
.command-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }.command-card-head strong, .command-card-head div > span { display: block; }.command-card-head strong { font-size: .82rem; }.command-card-head div > span { margin-top: .25rem; color: var(--muted); font-size: .65rem; }
.command-card-head { align-items: center; padding: 1rem; }.command-card-head .command-state { margin-left: auto; }
.command-card-details { padding: 0 1rem 1rem; border-top: 1px solid var(--line); }.command-card-details > p { margin: .85rem 0 0; color: #aeb3c2; font-size: .75rem; line-height: 1.5; }
.command-state { white-space: nowrap; font-size: .65rem; font-weight: 800; }.command-state.queued, .command-state.dispatched, .command-state.acknowledged, .command-state.running, .command-state.working { color: #f2c86c; }.command-state.succeeded { color: var(--green); }.command-state.partial { color: #f5b942; }.command-state.failed, .command-state.rejected { color: var(--red); }
.instance-results { display: flex; flex-wrap: wrap; gap: .42rem; margin-top: .8rem; }.instance-results span { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .5rem; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; font-size: .62rem; }.instance-results i { width: .38rem; height: .38rem; border-radius: 50%; background: #6d7384; }.instance-results .blocked i, .instance-results .unblocked i { background: var(--green); }.instance-results .failed i { background: var(--red); }
.batch-bar { position: fixed; z-index: 20; left: 50%; bottom: max(.75rem, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: min(calc(100% - 1.25rem), 36rem); padding: .7rem .75rem .7rem 1rem; border: 1px solid #3b3f51; border-radius: 1rem; background: rgba(20,22,31,.96); box-shadow: 0 20px 70px rgba(0,0,0,.55); backdrop-filter: blur(18px); color: var(--muted); font-size: .75rem; }.batch-bar[hidden] { display: none; }.batch-bar strong { color: var(--text); }
.batch-bar .button { min-height: 2.45rem; font-size: .75rem; }
.toast { position: fixed; z-index: 30; left: 50%; top: max(1rem, env(safe-area-inset-top)); transform: translateX(-50%); width: min(calc(100% - 1.5rem), 30rem); padding: .85rem 1rem; color: #e7e9f2; background: rgba(28,31,42,.98); border: 1px solid #42475a; border-radius: .85rem; box-shadow: var(--shadow); font-size: .78rem; line-height: 1.45; }.toast[hidden] { display: none; }.toast[data-tone="success"] { border-color: rgba(53,223,154,.48); }.toast[data-tone="error"] { border-color: rgba(255,107,124,.5); }
.app-grid-mobile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.app-tile { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: .62rem; min-height: 4.25rem; padding: .82rem; background: rgba(20,22,31,.86); border: 1px solid var(--line); border-radius: .9rem; color: var(--text); text-decoration: none; }
.app-tile strong, .app-tile span { grid-column: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.app-tile strong { align-self: end; font-size: .76rem; }.app-tile span { align-self: start; color: var(--muted); font-size: .64rem; }.app-tile .streetlight { grid-row: 1 / 3; }
.detail-shell { padding-top: 1.35rem; }.detail-heading { display: flex; align-items: flex-start; gap: 1rem; padding: .8rem .45rem 1.25rem; }.detail-heading .streetlight { margin-top: .38rem; }.detail-heading .eyebrow { margin-bottom: .35rem; }.detail-heading h1 { overflow-wrap: anywhere; margin: 0; font-size: clamp(1.65rem, 8vw, 2.8rem); letter-spacing: -.04em; }.detail-heading p:last-child { margin: .55rem 0 0; color: var(--muted); font-size: .76rem; }
.finding-card { padding: 1.05rem; background: rgba(20,22,31,.94); border: 1px solid var(--line); border-radius: 1rem; }.finding-card-top time { color: #747a8d; font-size: .68rem; }.severity-badge { padding: .28rem .45rem; border-radius: .42rem; font-size: .62rem; font-weight: 850; letter-spacing: .05em; }.severity-badge.red { color: #ffc1c9; background: rgba(255,107,124,.13); }.severity-badge.yellow { color: #f9d891; background: rgba(245,185,66,.12); }
.finding-card h3 { margin: .85rem 0 .45rem; font-size: 1rem; }.finding-card > p { margin: 0; color: #b2b6c4; font-size: .82rem; line-height: 1.55; }.evidence-box { display: grid; gap: .32rem; margin-top: .9rem; padding: .75rem; background: #0c0e14; border: 1px solid #202431; border-radius: .7rem; }.evidence-box strong { color: #7f8597; font-size: .63rem; text-transform: uppercase; letter-spacing: .07em; }.evidence-box span { color: #c6c9d3; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem; line-height: 1.5; overflow-wrap: anywhere; }.source-row { margin-top: .85rem; color: var(--muted); font-size: .7rem; }
.empty-state.compact { margin-top: 1rem; }.mobile-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: min(100% - 1.5rem, 58rem); margin: 0 auto; padding: 1.3rem 0 max(1.5rem, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); color: #666c7d; font-size: .68rem; }.mobile-footer form { margin: 0; }.mobile-footer button { color: #8c92a4; background: transparent; border: 0; cursor: pointer; }

@media (min-width: 680px) {
  .mobile-shell { padding-top: 1.5rem; }
  .attention-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ip-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .app-grid-mobile { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .command-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 360px) {
  .app-grid-mobile { grid-template-columns: 1fr; }
  .mobile-hero { padding: 1.2rem; }
}
@media (max-width: 520px) {
  .passkey-panel { grid-template-columns: auto minmax(0,1fr); }
  .passkey-panel .button { grid-column: 1 / -1; width: 100%; }
}