﻿:root{color-scheme:dark;--bg:#0d1117;--sidebar:#10151c;--surface:#151b23;--surface-2:#1a212b;--line:#29313c;--line-soft:#222a34;--text:#f1f4f6;--muted:#929daa;--subtle:#687482;--primary:#73bde8;--primary-bg:#163247;--warning:#e0ad62;--warning-bg:#332817;--danger:#e47777;--danger-bg:#351d20;--ok:#69c99f;--radius:12px;--shadow:0 14px 36px rgba(0,0,0,.2);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei UI",sans-serif;font-size:14px}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);overflow-x:hidden}
body{line-height:1.5;overflow-x:hidden}
button,input,select{font:inherit}
textarea{font:inherit;min-height:96px;resize:vertical;border:1px solid #34404d;border-radius:8px;background:#10161d;color:var(--text);padding:8px 10px}
button,a,select{touch-action:manipulation}
a{color:inherit}
.skip-link{position:fixed;z-index:100;left:12px;top:8px;transform:translateY(-160%);background:var(--text);color:var(--bg);padding:8px 12px;border-radius:8px}
.skip-link:focus{transform:none}
.app-shell{min-height:100vh;display:grid;grid-template-columns:232px minmax(0,1fr)}
.sidebar{position:sticky;top:0;height:100vh;padding:24px 16px 18px;background:var(--sidebar);border-right:1px solid var(--line-soft);display:flex;flex-direction:column}
.brand{display:flex;gap:11px;align-items:center;padding:4px 8px 24px;text-decoration:none}
.brand-mark{display:grid;place-items:center;width:32px;height:32px;border:1px solid #566270;border-radius:10px;font-weight:750;color:var(--text)}
.brand b,.brand small{display:block}
.brand b{font-size:14px}
.brand small{margin-top:2px;color:var(--subtle);font:9px ui-monospace,monospace;letter-spacing:.12em}
.nav-label{margin:20px 10px 7px;color:var(--subtle);font-size:11px}
.nav-item{display:flex;gap:11px;align-items:center;min-height:42px;padding:9px 11px;border-radius:8px;text-decoration:none;color:var(--muted);font-size:13px}
.nav-item:hover{background:#171e27;color:var(--text)}
.nav-item.is-active{background:#1a2530;color:var(--text);box-shadow:inset 2px 0 var(--primary)}
.sidebar-status{margin-top:auto;display:flex;gap:10px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:10px;background:#131a22}
.sidebar-status b,.sidebar-status small{display:block}
.sidebar-status b{font-size:12px}
.sidebar-status small{font-size:10px;color:var(--muted)}
.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);flex:0 0 auto}
.workspace{min-width:0}
.topbar{height:58px;padding:0 28px;border-bottom:1px solid var(--line-soft);display:flex;align-items:center;gap:14px;background:rgba(13,17,23,.94);position:sticky;top:0;z-index:20}
.breadcrumb{display:flex;gap:8px;color:var(--subtle);font-size:12px}
.breadcrumb b{color:var(--text)}
.environment-badge,.count-badge{margin-left:auto;border:1px solid var(--line);border-radius:999px;padding:4px 9px;color:var(--muted);font-size:10px}
.main-content{max-width:1480px;margin:0 auto;padding:30px 28px 56px}
.main-content:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
.site-compliance{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border-top:1px solid var(--line-soft);background:#0b1016;color:var(--muted);font-size:12px}
.site-compliance a{color:inherit;text-decoration:none}
.site-compliance a:hover{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.site-compliance a:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:2px}
.page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px}
.eyebrow{margin:0 0 5px;color:var(--primary);font:10px ui-monospace,monospace;letter-spacing:.14em}
.page-heading h1,.security-task h1{margin:0;font-size:28px;line-height:1.2;letter-spacing:-.035em;text-wrap:balance}
.page-heading p,.security-task p{margin:7px 0 0;color:var(--muted)}
.sync-strip{display:flex;justify-content:space-between;gap:16px;margin-bottom:16px;color:var(--muted);font-size:11px}
.sync-strip span{display:flex;align-items:center;gap:8px}
.mono,time,.metric-card strong{font-variant-numeric:tabular-nums}
.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}
.metric-card,.panel,.security-task{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:0 1px rgba(255,255,255,.025)}
.metric-card{padding:17px 18px;min-height:144px}
.metric-card>div:first-child{display:flex;align-items:flex-start;justify-content:space-between}
.metric-card span{color:var(--muted);font-size:12px}
.metric-card strong{font-size:29px;line-height:1;font-weight:650;letter-spacing:-.04em}
.metric-card p{margin:17px 0 12px;color:var(--muted);font-size:11px}
.metric-card small{color:var(--subtle);font-size:10px}
.progress,.metric-rule{height:3px;background:#242d37;border-radius:4px;margin-bottom:8px;overflow:hidden}
.progress i{display:block;height:100%;background:var(--primary)}
.metric-warning strong{color:var(--warning)}
.metric-warning .metric-rule{background:linear-gradient(90deg,var(--warning) 0 24%,#242d37 24%)}
.dashboard-grid{display:grid;grid-template-columns:minmax(560px,1fr) 270px;gap:16px;align-items:start}
.panel{min-width:0;overflow:hidden}
.panel-header{display:flex;justify-content:space-between;align-items:center;padding:17px 18px;border-bottom:1px solid var(--line-soft)}
.panel-header h2{font-size:14px;margin:0}
.panel-header p{font-size:10px;color:var(--muted);margin:3px 0 0}
.filter-bar{display:flex;gap:8px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line-soft);background:#131920}
.search-field{flex:1;min-width:150px}
.filter-bar input,.filter-bar select{width:100%}
.field label,.action-menu label{display:grid;gap:5px;color:var(--muted);font-size:11px}
input,select{min-height:40px;border:1px solid #34404d;border-radius:8px;background:#10161d;color:var(--text);padding:8px 10px}
input::placeholder{color:#5f6b78}
input:hover,select:hover{border-color:#4a5867}
input:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.button,.icon-button,.text-link{border:0;cursor:pointer}
.button{min-height:40px;border-radius:8px;padding:9px 13px;font-weight:650;font-size:12px}
.button-primary{color:#08131a;background:var(--primary)}
.button-primary:hover{background:#8ccbf0}
.button-secondary{color:var(--text);background:#202a35;border:1px solid #35414e}
.button-secondary:hover{background:#283441}
.button-danger-quiet{width:100%;color:var(--danger);background:transparent;border:1px solid #563035}
.button-danger-quiet:hover{background:var(--danger-bg)}
.icon-button{display:grid;place-items:center;min-width:40px;min-height:40px;border-radius:8px;color:var(--muted);background:transparent}
.icon-button:hover{color:var(--text);background:#242d38}
.text-link{color:var(--primary);background:transparent;text-decoration:none;font-size:12px;white-space:nowrap}
.table-scroll{width:100%;max-width:100%;overflow-x:auto;contain:inline-size}
table{width:100%;border-collapse:collapse;min-width:810px}
th{padding:11px 14px;text-align:left;color:var(--subtle);font-size:10px;font-weight:600;letter-spacing:.04em;background:#121820}
td{height:62px;padding:12px 14px;border-top:1px solid var(--line-soft);font-size:12px;vertical-align:middle}
tbody tr:hover{background:#18202a}
.muted{color:var(--muted)}
.owner-meta{display:block;color:var(--muted);margin-top:3px}.profile-tag{display:inline-block;margin-top:5px;padding:2px 6px;border:1px solid var(--line);border-radius:999px;color:var(--primary);font-size:9px}.system-vehicles{padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2)}.system-vehicles p{margin:6px 0 0;color:var(--muted);font-size:11px}
.status-tag{display:inline-flex;align-items:center;gap:6px;border:1px solid;padding:4px 8px;border-radius:999px;font-size:10px;white-space:nowrap}
.status-ok{color:var(--ok);background:#14271f;border-color:#28503f}
.status-danger{color:var(--danger);background:var(--danger-bg);border-color:#573036}
.status-neutral{color:#a9b3bd;background:#222932;border-color:#39434e}
.row-action{text-align:right}
.action-menu{position:fixed;inset:auto;margin:0;width:min(300px,calc(100vw - 24px));max-height:min(620px,calc(100vh - 24px));overflow-y:auto;padding:12px;border:1px solid #3b4754;border-radius:10px;background:#171e27;color:var(--text);box-shadow:var(--shadow);text-align:left}
.action-menu:not(:popover-open){display:none}
.action-menu:popover-open{display:grid;gap:9px}
.action-menu::backdrop{background:transparent}
.action-menu form{display:grid;gap:9px}
.empty-state{text-align:center;padding:34px}
.empty-state p{color:var(--muted)}
.timeline{list-style:none;margin:0;padding:8px 18px 18px}
.timeline li{position:relative;display:grid;grid-template-columns:12px minmax(0,1fr);gap:10px;padding:12px 0}
.timeline li:not(:last-child):before{content:"";position:absolute;left:4px;top:25px;bottom:-10px;width:1px;background:var(--line)}
.timeline i{width:9px;height:9px;margin-top:4px;border:2px solid var(--primary);border-radius:50%;background:var(--surface)}
.timeline b{display:block;font-size:11px;overflow-wrap:anywhere}
.timeline p{margin:3px 0;color:var(--muted);font-size:10px}
.timeline time{color:var(--subtle);font-size:9px;overflow-wrap:anywhere}
.timeline-empty{display:block!important;color:var(--muted)}
.panel-footer{display:flex;justify-content:flex-end;padding:12px 18px;border-top:1px solid var(--line-soft)}
.audit-page-panel{max-width:920px}
.audit-history{padding:10px 22px 22px}
.audit-history li{grid-template-columns:16px minmax(0,1fr);padding:16px 0}
.invite-panel{position:fixed;inset:0 0 0 auto;width:min(440px,92vw);height:100dvh;max-width:none;max-height:none;margin:0;padding:max(24px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) 24px;overflow-y:auto;overscroll-behavior:contain;border:0;border-left:1px solid var(--line);border-radius:0;background:var(--surface);color:var(--text);box-shadow:-18px 0 48px rgba(0,0,0,.3)}
.invite-panel::backdrop{background:rgba(4,7,10,.68)}
.invite-panel header{display:flex;justify-content:space-between}
.invite-panel h2{margin:0;font-size:18px}
.invite-panel .inline-form{grid-template-columns:1fr;margin-top:28px}
.invite-panel .inline-form .button{margin-top:8px}
.inline-form{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end;margin-top:16px}
.stack-form{display:grid;gap:16px}
.field{display:grid;gap:6px}
.field label{color:var(--text);font-size:12px}
.field small{color:var(--muted)}
.logout-form{margin-top:18px;text-align:right}
.notice{padding:11px 13px;margin-bottom:14px;border:1px solid;border-radius:9px;font-size:12px}
.notice-error{color:#f1aaaa;background:var(--danger-bg);border-color:#5b3036}
.notice-success{color:#96dfbf;background:#14271f;border-color:#29513f}
.security-task{max-width:720px;margin:48px auto;padding:28px;display:grid;grid-template-columns:44px 1fr;gap:16px}
.security-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:var(--warning-bg);color:var(--warning);font-weight:bold}
.security-form{grid-column:2}
.auth-page{background:#0c1117}
.auth-shell{width:100%;min-height:100vh;display:grid;grid-template-columns:minmax(360px,430px) minmax(360px,560px);align-items:center;justify-content:center;gap:clamp(48px,8vw,120px);padding:clamp(24px,5vw,72px)}
.auth-card{width:min(100%,430px);padding:30px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:var(--shadow)}
.auth-brand{display:flex;align-items:center;gap:10px}
.auth-brand b,.auth-brand small{display:block}
.auth-brand small{color:var(--muted);font-size:10px}
.security-line{display:flex;align-items:center;gap:7px;margin:28px 0;color:var(--muted);font-size:10px}
.auth-header h1{margin:0;font-size:25px;letter-spacing:-.03em}
.auth-header p{margin:7px 0 22px;color:var(--muted)}
.auth-foot{margin:18px 0 0;color:var(--subtle);font-size:10px;text-align:center}
.auth-context{max-width:520px}
.auth-context h2{max-width:460px;margin:8px 0 34px;font-size:32px;line-height:1.25;letter-spacing:-.04em;text-wrap:balance}
.auth-context dl{margin:0;display:grid;gap:0;border-top:1px solid var(--line)}
.auth-context dl div{display:grid;grid-template-columns:128px 1fr;gap:24px;padding:18px 0;border-bottom:1px solid var(--line)}
.auth-context dt{font-weight:650}
.auth-context dd{margin:0;color:var(--muted);font-size:12px}
.nav-toggle{display:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:1279px){.dashboard-grid{grid-template-columns:1fr}
.audit-panel{margin-top:0}
.timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.timeline li:before{display:none}
}
@media(max-width:899px){.auth-shell{grid-template-columns:minmax(0,430px)}
.auth-context{display:none}
.app-shell{grid-template-columns:1fr}
.sidebar{display:none;position:fixed;z-index:50;width:232px}
.sidebar.is-open{display:flex}
.nav-toggle{display:grid}
.main-content{padding:24px 18px 46px}
.metric-grid{grid-template-columns:repeat(2,1fr)}
.topbar{padding:0 16px}
.inline-form{grid-template-columns:1fr 1fr}
.inline-form .button{grid-column:1/-1}
.filter-bar{flex-wrap:wrap}
.search-field{flex-basis:100%}
}
@media(max-width:639px){.page-heading{align-items:flex-start;flex-direction:column}
.page-heading h1{font-size:24px}
.metric-grid{grid-template-columns:1fr}
.sync-strip{align-items:flex-start;flex-direction:column}
.main-content{padding-inline:12px}
.inline-form{grid-template-columns:1fr}
.timeline{grid-template-columns:1fr}
.auth-shell{padding:14px}
.auth-card{padding:22px}
.security-task{margin:20px auto;padding:20px;grid-template-columns:1fr}
.security-form{grid-column:1}
}
@media(prefers-reduced-motion:no-preference){.button,.nav-item,.icon-button,input,select{transition:background-color .16s ease,border-color .16s ease,color .16s ease}
}

