:root {
  color-scheme: dark;
  --bg: #07100f;
  --bg-soft: #0a1513;
  --panel: #0d1a17;
  --panel-2: #10201c;
  --line: rgba(169, 210, 193, .13);
  --line-strong: rgba(169, 210, 193, .24);
  --text: #f1f7f4;
  --muted: #8ea49c;
  --green: #47e8a6;
  --green-deep: #0e9f70;
  --red: #ff5e67;
  --orange: #ffad55;
  --blue: #5cb8ff;
  --shadow: 0 24px 80px rgba(0, 0, 0, .28);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body { min-height: 100vh; margin: 0; color: var(--text); background: radial-gradient(circle at 20% 0%, rgba(33, 116, 83, .14), transparent 30rem), var(--bg); }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.brand { display: inline-flex; align-items: center; gap: 14px; letter-spacing: .12em; }
.brand-mark { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid rgba(71, 232, 166, .55); border-radius: 13px; color: var(--green); background: linear-gradient(145deg, rgba(71, 232, 166, .14), rgba(71, 232, 166, .02)); font-size: 21px; font-weight: 800; box-shadow: inset 0 0 18px rgba(71, 232, 166, .08); }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 14px; }
.brand small { margin-top: 3px; color: var(--muted); font-size: 8px; letter-spacing: .2em; }
.brand.compact .brand-mark { width: 36px; height: 36px; border-radius: 10px; font-size: 17px; }

.auth-shell { display: grid; min-height: 100vh; grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr); }
.auth-intro { position: relative; display: flex; overflow: hidden; padding: 52px clamp(36px, 6vw, 100px); flex-direction: column; justify-content: space-between; border-right: 1px solid var(--line); background: linear-gradient(135deg, rgba(8, 21, 18, .8), rgba(5, 13, 12, .96)); }
.auth-intro::before { position: absolute; width: 500px; height: 500px; content: ""; right: -180px; bottom: -200px; border: 1px solid rgba(71, 232, 166, .15); border-radius: 50%; box-shadow: 0 0 0 60px rgba(71, 232, 166, .025), 0 0 0 120px rgba(71, 232, 166, .016); }
.auth-intro::after { position: absolute; inset: 0; pointer-events: none; content: ""; opacity: .28; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 52px 52px; mask-image: linear-gradient(to bottom, transparent, black, transparent); }
.auth-intro > * { position: relative; z-index: 1; }
.auth-copy { max-width: 660px; margin: 100px 0; }
.eyebrow, .section-kicker { color: var(--green); font-size: 11px; font-weight: 750; letter-spacing: .17em; text-transform: uppercase; }
.eyebrow span { display: inline-block; width: 24px; height: 1px; margin: 0 10px 3px 0; background: var(--green); }
.auth-copy h1 { margin: 25px 0; font-size: clamp(42px, 5vw, 76px); line-height: 1.08; letter-spacing: -.055em; font-weight: 660; }
.auth-copy > p:last-child { max-width: 570px; color: #9cb0a9; font-size: 16px; line-height: 1.9; }
.trust-row { display: flex; flex-wrap: wrap; gap: 26px; color: #82978f; font-size: 12px; }
.trust-row span::before { display: inline-block; width: 5px; height: 5px; margin: 0 9px 2px 0; content: ""; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); }
.auth-panel { display: grid; min-height: 100%; padding: 40px; place-items: center; background: rgba(7, 16, 15, .74); }
.auth-card { width: min(430px, 100%); }
.step-indicator { display: flex; width: 150px; align-items: center; margin-bottom: 50px; }
.step-indicator span { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--muted); font-size: 11px; }
.step-indicator span.active, .step-indicator span.done { border-color: var(--green); color: #06271c; background: var(--green); font-weight: 800; }
.step-indicator i { width: 100%; height: 1px; background: var(--line-strong); }
.step-indicator i.active { background: var(--green); }
.auth-card h2, .dialog-card h1 { margin: 8px 0 12px; font-size: 34px; letter-spacing: -.035em; }
.subtle { margin: 0 0 30px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.subtle strong { color: #c8d8d2; }
.stack-form { display: grid; gap: 20px; }
.stack-form label { display: grid; gap: 9px; color: #c3d2cd; font-size: 12px; font-weight: 650; }
.stack-form label small { color: var(--muted); font-weight: 400; line-height: 1.5; }
input, select { width: 100%; height: 52px; padding: 0 15px; border: 1px solid var(--line-strong); border-radius: 10px; outline: none; color: var(--text); background: rgba(6, 15, 13, .82); transition: border-color .15s, box-shadow .15s; }
input::placeholder { color: #52665f; }
input:focus, select:focus { border-color: rgba(71, 232, 166, .7); box-shadow: 0 0 0 3px rgba(71, 232, 166, .09); }
.otp-input { height: 64px; text-align: center; letter-spacing: .62em; font-size: 25px; font-weight: 700; }
.primary-button, .secondary-button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; border: 0; border-radius: 10px; cursor: pointer; font-weight: 750; transition: transform .15s, filter .15s, border-color .15s; }
.primary-button { padding: 0 20px; color: #052419; background: var(--green); box-shadow: 0 10px 30px rgba(71, 232, 166, .12); }
.primary-button span { margin-left: auto; font-size: 18px; }
.primary-button:hover { filter: brightness(1.05); transform: translateY(-1px); }
.secondary-button { width: 100%; padding: 9px 12px; border: 1px solid var(--line-strong); color: var(--text); background: var(--panel-2); font-size: 12px; }
.security-note { margin: 24px 0 0; color: #71867f; font-size: 11px; text-align: center; }
.security-note span { margin-right: 8px; color: var(--green); font-size: 8px; }
.back-link { display: block; margin-top: 28px; color: var(--muted); font-size: 12px; text-align: center; }

.notice { padding: 13px 15px; margin: 0 0 20px; border: 1px solid; border-radius: 9px; font-size: 13px; line-height: 1.55; }
.notice.error { border-color: rgba(255, 94, 103, .25); color: #ffb0b5; background: rgba(255, 94, 103, .08); }
.notice.success { border-color: rgba(71, 232, 166, .25); color: #9df6d2; background: rgba(71, 232, 166, .07); }
.notice.warning { border-color: rgba(255, 173, 85, .25); color: #ffd29f; background: rgba(255, 173, 85, .07); }

.center-shell { display: grid; min-height: 100vh; padding: 32px; place-items: center; }
.dialog-card { width: min(520px, 100%); padding: 40px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); box-shadow: var(--shadow); }
.dialog-card .brand { margin-bottom: 45px; }
.error-dialog { text-align: center; }
.error-code { display: grid; width: 52px; height: 52px; margin: 0 auto 24px; place-items: center; border: 1px solid rgba(255,94,103,.35); border-radius: 50%; color: var(--red); background: rgba(255,94,103,.08); font-size: 24px; }
.link-button { margin-top: 8px; }

.app-header { position: sticky; z-index: 20; top: 0; display: grid; min-height: 76px; padding: 0 clamp(22px, 4vw, 64px); grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid var(--line); backdrop-filter: blur(18px); background: rgba(7, 16, 15, .88); }
.top-nav { display: flex; align-self: stretch; gap: 32px; }
.top-nav a { position: relative; display: grid; place-items: center; color: var(--muted); font-size: 13px; }
.top-nav a.active { color: var(--text); }
.top-nav a.active::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; content: ""; background: var(--green); box-shadow: 0 0 12px rgba(71,232,166,.4); }
.account-menu { display: flex; justify-self: end; align-items: center; gap: 11px; }
.role-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.role-dot.admin { background: var(--orange); }
.account-name { min-width: 60px; font-size: 12px; }
.account-name small { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; }
.text-button { padding: 8px; border: 0; cursor: pointer; color: var(--muted); background: none; font-size: 11px; }

.app-main { width: min(1480px, calc(100% - 44px)); min-height: calc(100vh - 150px); margin: 0 auto; padding: 54px 0 80px; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 34px; }
.page-heading h1 { margin: 10px 0 8px; font-size: clamp(34px, 4vw, 52px); line-height: 1; letter-spacing: -.05em; }
.page-heading > div > p:last-child { margin: 0; color: var(--muted); font-size: 14px; }
.sync-state { display: flex; min-width: 210px; align-items: center; gap: 12px; justify-content: flex-end; }
.sync-state > span { width: 9px; height: 9px; border-radius: 50%; }
.sync-state.healthy > span { background: var(--green); box-shadow: 0 0 16px var(--green); }
.sync-state.warning > span { background: var(--orange); box-shadow: 0 0 16px var(--orange); }
.sync-state strong, .sync-state small { display: block; text-align: right; }
.sync-state strong { font-size: 12px; }
.sync-state small { margin-top: 4px; color: var(--muted); font-size: 10px; }

.metric-grid { display: grid; margin: 24px 0; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.metric-card { position: relative; overflow: hidden; min-height: 162px; padding: 23px; border: 1px solid var(--line); border-radius: 13px; background: linear-gradient(145deg, rgba(16, 32, 28, .92), rgba(10, 22, 19, .92)); }
.metric-card::before { position: absolute; top: 0; left: 23px; width: 32px; height: 2px; content: ""; background: var(--accent); box-shadow: 0 0 14px var(--accent); }
.metric-card::after { position: absolute; width: 110px; height: 110px; content: ""; top: -55px; right: -40px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 9%, transparent); filter: blur(4px); }
.accent-red { --accent: var(--red); }.accent-orange { --accent: var(--orange); }.accent-green { --accent: var(--green); }.accent-blue { --accent: var(--blue); }
.metric-label { display: block; color: var(--muted); font-size: 12px; }
.metric-card strong { display: block; margin: 16px 0 8px; font-size: 40px; line-height: 1; letter-spacing: -.04em; }
.metric-card strong em { color: var(--muted); font-size: 17px; font-style: normal; font-weight: 500; }
.metric-card small { color: #6f857d; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }

.content-card { border: 1px solid var(--line); border-radius: 14px; background: rgba(12, 26, 23, .82); box-shadow: 0 18px 50px rgba(0,0,0,.12); }
.content-card-header { display: flex; min-height: 82px; padding: 20px 24px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.content-card-header .section-kicker { margin: 0 0 5px; font-size: 9px; }
.content-card-header h2 { margin: 0; font-size: 19px; }
.readonly-badge, .role-tag, .status-tag { padding: 6px 9px; border: 1px solid rgba(71,232,166,.18); border-radius: 999px; color: #84d9b7; background: rgba(71,232,166,.06); font-size: 9px; letter-spacing: .06em; }
.admin-badge { border-color: rgba(255,173,85,.2); color: #ffcb8d; background: rgba(255,173,85,.07); }
.finding-row { position: relative; display: grid; padding: 23px 24px; grid-template-columns: 3px 1fr; gap: 19px; border-bottom: 1px solid var(--line); }
.finding-row:last-child { border-bottom: 0; }
.severity-marker { border-radius: 3px; background: var(--severity); box-shadow: 0 0 14px color-mix(in srgb, var(--severity) 50%, transparent); }
.severity-critical { --severity: var(--red); }.severity-high { --severity: var(--orange); }.severity-medium { --severity: #e6d65a; }.severity-low { --severity: var(--blue); }
.finding-title-line { display: flex; align-items: center; gap: 10px; }
.severity-pill { padding: 4px 7px; border-radius: 5px; color: var(--severity); background: color-mix(in srgb, var(--severity) 9%, transparent); font-size: 9px; font-weight: 750; }
.asset-name { color: #b7c8c2; font-size: 11px; }
.finding-title-line time { margin-left: auto; color: #60756d; font-size: 10px; }
.finding-main h3 { margin: 11px 0 7px; font-size: 15px; }
.finding-main > p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.recommendation { display: flex; gap: 10px; margin-top: 13px; color: #758a82; font-size: 11px; }
.recommendation strong { color: var(--green); font-weight: 650; }
.readonly-disclaimer { margin: 20px 0 0; color: #586c65; font-size: 10px; text-align: center; }
.empty-state { padding: 70px 30px; text-align: center; }
.empty-state > span { display: grid; width: 46px; height: 46px; margin: 0 auto 18px; place-items: center; border: 1px solid rgba(71,232,166,.25); border-radius: 50%; color: var(--green); background: rgba(71,232,166,.06); }
.empty-state h3 { margin: 0 0 8px; font-size: 16px; }.empty-state p { margin: 0; color: var(--muted); font-size: 12px; }

.admin-grid { display: grid; grid-template-columns: 360px 1fr; gap: 16px; }
.create-user-card .stack-form { padding: 24px; }
.user-list { padding: 4px 20px; }
.user-row { display: grid; min-height: 82px; align-items: center; grid-template-columns: 42px minmax(120px, 1.1fr) 82px 70px 120px 64px; gap: 12px; border-bottom: 1px solid var(--line); }
.user-row:last-child { border-bottom: 0; }
.avatar { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--line-strong); border-radius: 10px; color: var(--green); background: var(--panel-2); font-size: 12px; font-weight: 800; }
.user-identity strong, .user-identity span { display: block; }
.user-identity strong { font-size: 12px; }.user-identity span { margin-top: 5px; color: var(--muted); font-size: 10px; }
.role-tag.admin { border-color: rgba(255,173,85,.2); color: var(--orange); background: rgba(255,173,85,.06); }
.status-tag.enabled { color: var(--green); }.status-tag.disabled { border-color: var(--line); color: var(--muted); background: transparent; }
.user-meta span, .user-meta strong { display: block; }.user-meta span { color: var(--muted); font-size: 9px; }.user-meta strong { margin-top: 4px; font-size: 10px; font-weight: 500; }
.user-actions { position: relative; }
.user-actions summary { cursor: pointer; color: var(--muted); font-size: 11px; list-style: none; }
.user-actions summary::-webkit-details-marker { display: none; }
.action-popover { position: absolute; z-index: 10; top: 30px; right: 0; display: grid; width: 250px; padding: 13px; gap: 13px; border: 1px solid var(--line-strong); border-radius: 10px; background: #0d1b18; box-shadow: var(--shadow); }
.action-popover form { display: grid; gap: 8px; }.action-popover label { display: grid; gap: 6px; color: var(--muted); font-size: 10px; }.action-popover input { height: 40px; }
.audit-card { margin-top: 16px; }
.audit-list { padding: 4px 24px; }
.audit-row { display: grid; min-height: 54px; align-items: center; grid-template-columns: 12px 130px 1.4fr 1fr 150px; gap: 9px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.audit-row:last-child { border-bottom: 0; }.audit-row strong { color: #c3d3cd; }.audit-row time { text-align: right; }.audit-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--green); }
.empty-inline { padding: 24px 0; color: var(--muted); font-size: 11px; }
.site-footer { display: flex; min-height: 72px; padding: 0 clamp(22px, 4vw, 64px); align-items: center; justify-content: space-between; border-top: 1px solid var(--line); color: #4f645c; font-size: 9px; letter-spacing: .06em; }

@media (max-width: 1050px) {
  .auth-shell { grid-template-columns: 1fr 1fr; }
  .auth-copy h1 { font-size: 48px; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-grid { grid-template-columns: 1fr; }
  .user-row { grid-template-columns: 42px minmax(120px, 1fr) 80px 65px 110px 55px; }
}

@media (max-width: 760px) {
  .auth-shell { display: block; }
  .auth-intro { min-height: 310px; padding: 28px 24px; border-right: 0; border-bottom: 1px solid var(--line); }
  .auth-copy { margin: 60px 0 25px; }.auth-copy h1 { margin: 14px 0; font-size: 38px; }.auth-copy > p:last-child { font-size: 13px; }.trust-row { display: none; }
  .auth-panel { min-height: 560px; padding: 50px 24px; place-items: start center; }.step-indicator { margin-bottom: 35px; }
  .app-header { grid-template-columns: 1fr auto; padding: 13px 18px; }.top-nav { position: fixed; right: 0; bottom: 0; left: 0; z-index: 30; min-height: 58px; justify-content: center; gap: 60px; border-top: 1px solid var(--line); background: rgba(7,16,15,.96); }.top-nav a.active::after { top: -1px; bottom: auto; }.account-name { display: none; }
  .app-main { width: min(100% - 28px, 700px); padding: 38px 0 90px; }.page-heading { display: block; }.sync-state { margin-top: 24px; justify-content: flex-start; }.sync-state strong, .sync-state small { text-align: left; }
  .metric-grid { grid-template-columns: 1fr 1fr; }.metric-card { min-height: 140px; padding: 19px; }.metric-card strong { font-size: 32px; }
  .finding-row { padding: 20px 16px; gap: 13px; }.finding-title-line { flex-wrap: wrap; }.finding-title-line time { width: 100%; margin-left: 0; }.recommendation { display: block; }.recommendation strong { display: block; margin-bottom: 4px; }
  .user-list { padding: 4px 14px; }.user-row { padding: 15px 0; grid-template-columns: 40px 1fr auto; }.role-tag, .status-tag, .user-meta { display: none; }.user-actions { grid-column: 3; grid-row: 1; }.action-popover { right: 0; }
  .audit-row { grid-template-columns: 10px 90px 1fr; }.audit-row span:nth-of-type(2), .audit-row time { display: none; }
  .site-footer { padding-bottom: 58px; }
}

@media (max-width: 440px) {
  .metric-grid { grid-template-columns: 1fr; }.metric-card { min-height: 125px; }.dialog-card { padding: 28px 22px; }.site-footer { display: none; }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }