:root{--paper:#f7f6f2;--surface:#fffdfa;--surface-2:#f0eee8;--ink:#151617;--ink-soft:#3f4140;--muted:#7f817b;--line:#e4e1da;--line-strong:#c9c6bd;--accent:#b8ef56;--accent-2:#efb6d0;--blue:#91d8ee;--danger:#c83f2b;--sidebar:#151715;--radius:14px;--shadow:0 24px 70px rgba(35,33,28,.08);--ease:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box}html{min-width:320px;background:var(--paper)}body{margin:0;color:var(--ink);background:var(--paper);font-family:Bahnschrift,"Segoe UI","Microsoft YaHei","PingFang SC",sans-serif;font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}body:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.34;background-image:radial-gradient(rgba(30,32,30,.06) .6px,transparent .6px);background-size:7px 7px}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit;color:inherit}button,select{cursor:pointer}button:disabled{cursor:not-allowed}::selection{background:var(--accent);color:var(--ink)}:focus-visible{outline:2px solid #eb8db8;outline-offset:3px}.skip-link{position:fixed;z-index:1000;top:8px;left:8px;transform:translateY(-150%);padding:10px 14px;background:var(--ink);color:#fff;transition:transform 180ms var(--ease)}.skip-link:focus{transform:translateY(0)}.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}.muted,.subtle{color:var(--muted)}.mono,.mono-input,.copy-value{font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;font-variant-numeric:tabular-nums}.break-all{overflow-wrap:anywhere}.eyebrow{margin:0 0 10px;color:var(--muted);font-size:10px;font-weight:800;line-height:1.2;letter-spacing:.18em;text-transform:uppercase}.eyebrow--light{color:rgba(255,255,255,.58)}.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(184,239,86,.14)}
.wordmark{display:inline-flex;align-items:center;gap:10px;font-size:17px;font-weight:850;letter-spacing:-.045em}.wordmark__logo{display:block;width:32px;height:32px;border-radius:10px}.wordmark--light{color:#fff}.flash{position:relative;display:flex;align-items:center;gap:10px;margin:0 0 22px;padding:13px 42px 13px 15px;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:0 8px 24px rgba(29,30,26,.05);animation:flash-in 220ms var(--ease) both;transition:opacity 150ms ease-out,transform 150ms ease-out}.flash--success .flash__dot{background:#4f9a1e}.flash--error{border-color:#efb5aa;background:#fff7f5}.flash--error .flash__dot{background:var(--danger)}.flash__dot{width:8px;height:8px;border-radius:50%;background:#739923;flex:0 0 auto}.flash__close{position:absolute;top:50%;right:12px;width:26px;height:26px;padding:0;border:0;background:transparent;color:var(--muted);transform:translateY(-50%);font-size:20px}.flash.is-closing{opacity:0;transform:translateY(-4px)}@keyframes flash-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.button{display:inline-flex;min-height:44px;align-items:center;justify-content:center;gap:14px;padding:10px 16px;border:1px solid var(--ink);border-radius:999px;background:transparent;font-weight:750;line-height:1;transition:color 180ms ease-out,background-color 180ms ease-out,border-color 180ms ease-out,transform 120ms ease-out}.button:active{transform:translateY(1px)}.button-icon{display:inline-grid;width:17px;height:17px;place-items:center}.button-icon svg,.hero-icon svg,.panel-icon svg,.policy-icon svg{width:100%;height:100%}.button--primary{border-color:var(--accent);background:var(--accent);color:var(--ink)}.button--secondary{border-color:var(--line-strong);background:var(--surface)}.button--ink{border-color:var(--ink);background:var(--ink);color:#fff}.button--ghost{border-color:var(--line);background:transparent}.button--danger{border-color:var(--danger);background:var(--danger);color:#fff}.button--disabled{border-color:var(--line);background:#e9e8e2;color:#989a92}.button--wide{width:100%}.text-button{padding:0;border:0;background:transparent;color:var(--muted);text-decoration:underline;text-underline-offset:4px}.text-button--danger{color:var(--danger)}.icon-button{display:grid;width:34px;height:34px;padding:0;place-items:center;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--muted);font-size:18px;transition:color 150ms ease-out,border-color 150ms ease-out,background-color 150ms ease-out}.arrow-link,.back-link{color:var(--ink);font-size:12px;font-weight:700;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:5px}.back-link{display:inline-block;margin-bottom:28px;color:var(--muted)}
.stack-form{display:grid;gap:18px}.stack-form label,.inline-create-form label,.key-create-form label,.filter-bar label{position:relative;display:grid;gap:7px;color:var(--ink-soft);font-size:12px;font-weight:700}.field-hint{float:right;color:var(--muted);font-size:10px;font-weight:500}input,select,textarea{width:100%;border:1px solid var(--line);border-radius:11px;background:var(--surface);transition:border-color 150ms ease-out,box-shadow 150ms ease-out,background-color 150ms ease-out}input,select{height:46px;padding:0 13px}textarea{min-height:100px;padding:12px 13px;resize:vertical}input:hover,select:hover,textarea:hover{border-color:var(--line-strong)}input:focus,select:focus,textarea:focus{border-color:var(--ink);background:#fff;box-shadow:0 0 0 4px rgba(184,239,86,.18);outline:0}.form-note{margin:0;color:var(--muted);font-size:12px;line-height:1.7}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.search-bar,.filter-bar{display:flex;align-items:end;gap:12px}.search-bar .grow,.filter-bar .grow{flex:1}.danger-zone{display:flex;align-items:end;justify-content:space-between;gap:20px;padding:20px;border:1px solid #efc0b7;border-radius:14px;background:#fff7f5}.admin-panel--danger{border:2px solid var(--danger);background:#fff7f5;box-shadow:0 0 0 4px rgba(200,63,43,.08)}.admin-panel--danger .panel-heading h2{color:var(--danger)}.key-generator{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:18px;padding:24px 28px;border:1px solid var(--line-strong);border-left:4px solid var(--accent);border-radius:var(--radius);background:var(--surface)}.key-generator h2{margin:0;font-size:20px;letter-spacing:-.05em}.key-generator h3{margin:0;font-size:16px}.key-generator p:not(.eyebrow){margin:6px 0 0;color:var(--muted);font-size:12px;max-width:620px}.key-generator .eyebrow{margin-bottom:6px}.secret-area{min-height:100px}.copy-value{display:inline-flex;max-width:100%;padding:5px 8px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);font-size:11px;overflow-wrap:anywhere}
.topbar{position:relative;z-index:2;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:28px;min-height:76px;padding:0 clamp(18px,4vw,64px);border-bottom:1px solid rgba(201,198,189,.74);background:rgba(255,253,250,.78);backdrop-filter:blur(18px)}.topbar__nav{display:flex;align-items:center;justify-content:center;gap:7px}.topbar__nav a{position:relative;padding:9px 13px;border-radius:999px;color:var(--muted);font-size:12px;font-weight:700;transition:color 160ms ease-out,background-color 160ms ease-out}.topbar__nav a.is-active{background:var(--ink);color:#fff}.topbar__account{display:flex;align-items:center;gap:16px}.account-name{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:750}
.auth-shell{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr);min-height:100dvh}.auth-art{position:relative;display:flex;min-height:620px;flex-direction:column;justify-content:space-between;padding:clamp(24px,5vw,80px);overflow:hidden;background:linear-gradient(145deg,#1a1c19,#2a2e28 58%,#111310);color:#fff}.auth-art:after{content:"";position:absolute;right:-12%;bottom:-32%;width:72%;height:70%;border-radius:50%;background:radial-gradient(circle,rgba(184,239,86,.32),transparent 67%);filter:blur(12px);pointer-events:none}.auth-art--register:after{background:radial-gradient(circle,rgba(145,216,238,.28),transparent 67%)}.auth-art__copy{position:relative;z-index:1;max-width:700px;padding:clamp(70px,10vh,150px) 0}.auth-art__copy h1{max-width:780px;margin:0;color:#fff;font-size:clamp(54px,7.6vw,112px);font-weight:850;line-height:.92;letter-spacing:-.085em;text-wrap:balance}.auth-art__copy p:not(.eyebrow){max-width:500px;margin:28px 0 0;color:rgba(255,255,255,.67);font-size:17px}.auth-art__status{position:relative;z-index:1;display:flex;align-items:center;gap:11px;color:rgba(255,255,255,.62);font:10px "SFMono-Regular",Consolas,monospace;letter-spacing:.12em}.auth-panel{display:grid;min-height:100%;place-items:center;padding:clamp(28px,6vw,96px);background:var(--paper)}.auth-card{width:min(100%,460px)}.auth-card--wide{width:min(100%,590px)}.auth-card h2{margin:0;font-size:clamp(34px,4vw,56px);line-height:.98;letter-spacing:-.07em;text-wrap:balance}.auth-card .muted{margin:14px 0 28px}.auth-switch{margin:24px 0 0;color:var(--muted);text-align:center}.auth-switch a,.heading-row>a{color:var(--ink);font-weight:800;text-decoration:underline;text-underline-offset:4px}.admin-entry{display:block;margin-top:32px;color:var(--muted);font-size:12px;text-align:center}.heading-row{display:flex;align-items:start;justify-content:space-between;gap:20px}.step-rail{display:flex;gap:28px;margin:0;padding:0;list-style:none;color:rgba(255,255,255,.43);font-size:12px}.step-rail li{position:relative}.step-rail li:before{content:"";display:inline-block;width:8px;height:8px;margin-right:9px;border:1px solid currentColor;border-radius:50%}.step-rail li.is-active{color:var(--accent)}.step-rail li.is-active:before{background:currentColor;border-color:currentColor}.admin-login-shell{display:grid;min-height:100dvh;place-items:center;padding:28px;background:#171915}.admin-login-card{width:min(100%,560px);border:1px solid rgba(255,255,255,.12);border-radius:24px;background:rgba(255,253,250,.97);box-shadow:18px 18px 0 rgba(0,0,0,.23);overflow:hidden}.admin-login-card__head{display:flex;align-items:center;justify-content:space-between;padding:28px 32px;border-bottom:1px solid var(--line)}.admin-login-card__body{padding:48px 56px}.admin-login-card__body h1{margin:0;font-size:clamp(40px,6vw,70px);line-height:.9;letter-spacing:-.08em}.security-label{display:flex;align-items:center;gap:10px;color:var(--muted);font:10px "SFMono-Regular",Consolas,monospace;letter-spacing:.1em}.admin-login-card__foot{display:flex;justify-content:space-between;gap:20px;padding:17px 32px;border-top:1px solid var(--line);color:var(--muted);font-size:10px;letter-spacing:.12em}.admin-login-card__foot a{text-decoration:underline;text-underline-offset:4px}
.user-main{width:min(100% - 44px,1380px);margin:auto;padding:70px 0 110px}.user-main--narrow{width:min(100% - 44px,1020px)}.page-hero{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:38px}.page-hero h1,.admin-header h1{margin:0;font-size:clamp(42px,6vw,82px);font-weight:850;line-height:.94;letter-spacing:-.08em;text-wrap:balance}.page-hero p:not(.eyebrow),.admin-header p:not(.eyebrow){max-width:620px;margin:18px 0 0;color:var(--muted);font-size:15px}.hero-icon{display:grid;width:74px;height:74px;place-items:center;border:1px solid var(--line-strong);border-radius:24px;background:linear-gradient(145deg,var(--accent-2),var(--blue));color:var(--ink);flex:0 0 auto}.hero-icon svg{width:30px;height:30px}.content-grid--user{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,.78fr);gap:18px}.panel,.form-panel,.device-card,.admin-panel,.metric-card,.quick-actions{border:1px solid var(--line);border-radius:var(--radius);background:rgba(255,253,250,.85);box-shadow:var(--shadow)}.panel,.form-panel,.device-card,.admin-panel{padding:28px}.panel-heading,.section-heading,.admin-header,.device-info__head,.announcement-title-row{display:flex;align-items:start;justify-content:space-between;gap:20px}.section-heading{align-items:end;margin-bottom:20px}.section-heading h2,.panel-heading h2{margin:0;font-size:24px;letter-spacing:-.055em}.section-count,.record-count{color:var(--muted);font:11px "SFMono-Regular",Consolas,monospace;letter-spacing:.12em}.user-stats{display:grid;grid-template-columns:repeat(3,1fr);margin:0 0 18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);overflow:hidden}.user-stats article{min-height:144px;padding:23px;border-right:1px solid var(--line)}.user-stats article:last-child{border-right:0}.user-stats strong,.metric-card strong{display:block;margin-top:22px;font:850 clamp(30px,4vw,54px)/.9 Bahnschrift,"Segoe UI",sans-serif;letter-spacing:-.07em;font-variant-numeric:tabular-nums}.user-stats small,.metric-card small{display:block;margin-top:13px;color:var(--muted);font:10px "SFMono-Regular",Consolas,monospace;letter-spacing:.12em}.metric-grid{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);overflow:hidden;margin-bottom:20px}.metric-card{min-height:184px;padding:23px;border:0;border-right:1px solid var(--line);border-radius:0;box-shadow:none;background:transparent}.metric-card:last-child{border-right:0}.metric-card--lead{background:var(--accent)}.metric-card--dark{background:var(--ink);color:#fff}.metric-card__label{color:var(--muted);font-size:11px;font-weight:800}.metric-card--lead .metric-card__label{color:#496018}.metric-card--dark .metric-card__label,.metric-card--dark small{color:rgba(255,255,255,.56)}.metric-card strong em{font-size:.45em;font-style:normal;letter-spacing:0}.metric-bar{height:5px;margin-top:31px;border-radius:999px;background:var(--line)}.metric-bar span{display:block;width:0;height:100%;border-radius:inherit;background:var(--ink);transition:width 500ms var(--ease)}.admin-shell{display:grid;grid-template-columns:252px minmax(0,1fr);min-height:100dvh}.admin-sidebar{position:sticky;top:0;display:flex;height:100dvh;flex-direction:column;padding:28px 16px;background:var(--sidebar);color:#fff}.admin-brand{display:flex;align-items:center;gap:11px;padding:0 10px 36px}.admin-brand__logo{width:34px;height:34px;border-radius:11px}.admin-brand strong{display:block;font-size:16px;letter-spacing:-.035em}.admin-brand small{display:block;margin-top:3px;color:rgba(255,255,255,.44);font:9px "SFMono-Regular",Consolas,monospace;letter-spacing:.15em}.admin-nav{display:grid;gap:4px}.admin-nav a,.sidebar-logout{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border:0;border-radius:11px;background:transparent;color:rgba(255,255,255,.56);font-size:12px;font-weight:750;text-align:left;transition:color 160ms ease-out,background-color 160ms ease-out}.admin-nav a.is-active{background:var(--accent);color:var(--ink)}.nav-icon{display:inline-grid;width:20px;height:20px;place-items:center;flex:0 0 auto}.nav-icon svg{width:18px;height:18px}.admin-sidebar__foot{display:grid;gap:17px;margin-top:auto;padding:16px 10px 4px;border-top:1px solid rgba(255,255,255,.1)}.operator{display:flex;align-items:center;gap:10px}.operator>span:last-child{display:grid;gap:2px}.operator small{color:rgba(255,255,255,.43);font-size:10px}.operator strong{font-size:12px}.sidebar-logout{width:100%;padding:0;color:rgba(255,255,255,.42)}.admin-main{min-width:0;padding:54px clamp(22px,5vw,84px) 100px}.admin-header{align-items:end;margin-bottom:34px}.live-clock{display:flex;align-items:center;gap:9px;color:var(--muted);font:10px "SFMono-Regular",Consolas,monospace;letter-spacing:.1em}.live-clock time{padding-left:12px;border-left:1px solid var(--line-strong)}.admin-grid-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.admin-panel{min-width:0}.quick-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:0;overflow:hidden}.quick-actions .eyebrow{grid-column:1/-1;padding:22px 24px 0}.quick-actions a{display:flex;min-height:74px;align-items:center;justify-content:space-between;padding:18px 24px;border-right:1px solid var(--line);font-weight:800;transition:color 160ms ease-out,background-color 160ms ease-out}.quick-actions a:last-child{border-right:0}.panel-icon{display:grid;width:32px;height:32px;place-items:center;border:1px solid var(--line);border-radius:50%;color:var(--muted)}.panel-icon svg{width:18px;height:18px}.list-marker{display:inline-block;width:8px;height:8px;border:1px solid currentColor;border-radius:50%;color:var(--muted)}.step-marker{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px rgba(184,239,86,.16)}.policy-icon{display:grid;width:36px;height:36px;place-items:center;border:1px solid rgba(21,22,23,.18);border-radius:50%;flex:0 0 auto}.policy-icon svg{width:19px;height:19px}
.error-shell{display:flex;min-height:100dvh;flex-direction:column;justify-content:space-between;padding:36px clamp(24px,6vw,80px)}.error-card{max-width:720px;margin:70px auto}.error-code{display:block;margin-bottom:-20px;color:var(--line-strong);font:clamp(100px,20vw,240px)/.8 Consolas,monospace;letter-spacing:-.09em}.error-card h1{margin:0;font-size:clamp(40px,6vw,72px);letter-spacing:-.06em}.error-card p:not(.eyebrow){max-width:540px;margin:18px 0 30px;color:var(--muted)}.error-shell>small{color:var(--muted);font:9px Consolas,monospace;letter-spacing:.12em}
@media (hover:hover) and (pointer:fine){.button--primary:hover{border-color:var(--ink);background:var(--ink);color:#fff}.button--secondary:hover,.button--ghost:hover{border-color:var(--ink);background:var(--ink);color:#fff}.button--ink:hover{border-color:var(--accent);background:var(--accent);color:var(--ink)}.button--danger:hover{background:#9f2d20}.topbar__nav a:hover{color:var(--ink);background:var(--surface-2)}.account-actions a:hover{background:var(--accent);color:var(--ink)}.admin-nav a:hover:not(.is-active){background:rgba(255,255,255,.08);color:#fff}.compact-list>a:hover,.compact-list>div:hover{background:#f1f0ea}.quick-actions a:hover{background:var(--accent);color:var(--ink)}tbody tr:hover{background:#f6f5f0}.icon-button:hover{border-color:var(--danger);background:var(--danger);color:#fff}.copy-value:hover{border-color:var(--line-strong);background:#fff}}
@media (max-width:1120px){.metric-grid{grid-template-columns:repeat(3,1fr)}.metric-card:nth-child(3){border-right:0}.metric-card:nth-child(-n+3){border-bottom:1px solid var(--line-strong)}.metric-card:nth-child(4){grid-column:span 1}.metric-card:nth-child(5){grid-column:span 2}.project-grid{grid-template-columns:repeat(2,1fr)}.key-create-form{grid-template-columns:repeat(3,1fr)}.settings-layout{grid-template-columns:1fr}}
@media (max-width:900px){.auth-shell{grid-template-columns:1fr}.auth-art{min-height:48vh}.auth-art__copy{padding:70px 0}.auth-art__copy h1{font-size:clamp(44px,11vw,78px)}.auth-panel{min-height:auto;padding-block:70px}.admin-shell{grid-template-columns:76px minmax(0,1fr)}.admin-sidebar{padding-inline:12px}.admin-brand{justify-content:center;padding-inline:0}.admin-brand>span:last-child{display:none}.admin-nav a{justify-content:center;padding:0;font-size:0}.admin-nav a span{font-size:10px}.admin-nav a .nav-icon{font-size:initial}.operator>span:last-child,.sidebar-logout:not(:has(.nav-icon)){display:none}.operator{justify-content:center}.content-grid--user,.editor-grid,.editor-grid--project,.admin-grid-two,.admin-grid-two--announcements{grid-template-columns:1fr}.quick-actions{grid-template-columns:1fr 1fr}.quick-actions .eyebrow{grid-column:1/-1}.split-panel,.device-card{grid-template-columns:1fr}.device-visual{min-height:300px}.inline-create-form{display:grid;grid-template-columns:1fr 1fr}.inline-create-form .grow{grid-column:1/-1}}
@media (max-width:680px){.auth-panel{padding:56px 24px}.topbar{grid-template-columns:1fr auto;min-height:64px;padding-inline:18px}.topbar__nav{position:fixed;z-index:99;right:0;bottom:0;left:0;height:58px;justify-content:space-around;border-top:1px solid var(--line);background:rgba(255,253,250,.94)}.topbar__nav a{height:58px;padding:0 14px}.topbar__account .account-name{display:none}.user-main{width:min(100% - 28px,1380px);padding:48px 0 100px}.page-hero,.admin-header{align-items:flex-start;flex-direction:column}.hero-icon{width:58px;height:58px;border-radius:18px}.user-stats{grid-template-columns:1fr}.user-stats article{min-height:130px;border-right:0;border-bottom:1px solid var(--line-strong)}.user-stats article:last-child{border-bottom:0}.license-card{grid-template-columns:34px 1fr}.license-card__meta{grid-column:2}.announcement-item{grid-template-columns:1fr;gap:12px}.announcement-item__meta{justify-content:flex-start;gap:20px}.form-grid{grid-template-columns:1fr}.split-panel__intro,.split-panel__form,.device-info{padding:30px 24px}.policy-note{grid-template-columns:1fr}.admin-main{padding:34px 16px 70px}.admin-shell{grid-template-columns:58px minmax(0,1fr)}.admin-sidebar{padding-inline:7px}.admin-brand__logo{width:32px;height:32px}.metric-grid{grid-template-columns:1fr 1fr}.metric-card{min-height:150px;border-bottom:1px solid var(--line-strong)}.metric-card:nth-child(2n){border-right:0}.metric-card:nth-child(3){border-right:1px solid var(--line-strong)}.metric-card:nth-child(5){grid-column:1/-1;border-bottom:0}.quick-actions{grid-template-columns:1fr}.quick-actions .eyebrow{grid-column:auto}.project-grid{grid-template-columns:1fr}.inline-create-form,.key-create-form{grid-template-columns:1fr}.inline-create-form .grow{grid-column:auto}.search-bar,.filter-bar{align-items:stretch;flex-direction:column}.filter-bar label{min-width:0}.danger-zone,.key-generator{align-items:stretch;flex-direction:column}.admin-login-card{box-shadow:8px 8px 0 var(--ink)}.admin-login-card__body{padding:34px 24px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
/* Small, semantic line icons replace decorative number glyphs throughout the app. */
.inline-icon,.button-icon{display:inline-grid;width:1em;height:1em;place-items:center;vertical-align:-.14em;flex:0 0 auto}.inline-icon svg,.button-icon svg{width:100%;height:100%}.button-icon{width:17px;height:17px}.empty-state__icon,.license-card__icon{display:grid;width:42px;height:42px;place-items:center;border:1px solid var(--line-strong);border-radius:12px;color:var(--muted)}.empty-state__icon svg,.license-card__icon svg{width:21px;height:21px}.license-card__icon{width:34px;height:34px;border-radius:50%;color:var(--ink);background:var(--surface-2)}.announcement-admin-list>article{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:14px;align-items:start;padding:18px 0;border-top:1px solid var(--line)}.announcement-admin-list>article:first-child{border-top:0}.announcement-admin-list>article>span{margin-top:7px}.empty-state{display:grid;justify-items:start;gap:10px;padding:44px;border:1px dashed var(--line-strong);border-radius:var(--radius);background:rgba(255,253,250,.72)}.empty-state h3,.empty-state p{margin:0}.empty-state p{color:var(--muted)}.license-card{align-items:center}.license-card__icon{grid-row:span 2}.hero-icon{display:grid;width:76px;height:76px;place-items:center;border:1px solid var(--line-strong);border-radius:22px;background:linear-gradient(145deg,var(--accent-2),var(--blue));color:var(--ink);flex:0 0 auto}.hero-icon svg{width:30px;height:30px}.admin-panel .panel-heading>.panel-icon{flex:0 0 auto}.quick-actions a .inline-icon,.account-actions a .inline-icon{transition:transform 180ms var(--ease)}
@media (hover:hover) and (pointer:fine){.quick-actions a:hover .inline-icon,.account-actions a:hover .inline-icon,.button:hover .button-icon{transform:translate(2px,-2px)}}

.back-link{display:inline-flex;align-items:center;gap:7px}.back-link .inline-icon{width:15px;height:15px;transition:transform 160ms var(--ease)}@media (hover:hover) and (pointer:fine){.back-link:hover .inline-icon{transform:translateX(-2px)}}

@media (max-width:680px){
  .auth-art{min-height:390px;padding:24px;overflow:hidden}
  .auth-art__copy{padding:44px 0 26px}
  .auth-art__copy h1{max-width:100%;font-size:clamp(42px,14.2vw,58px);line-height:.92;letter-spacing:-.075em}
  .auth-art__copy p:not(.eyebrow){max-width:100%;margin-top:20px;font-size:14px;line-height:1.65}
  .auth-art__status{font-size:8px}
  .auth-panel{min-width:0;padding:52px 24px 68px;overflow:hidden}
  .auth-card{min-width:0;width:100%}
  .auth-card h2{font-size:clamp(36px,11vw,48px)}
  .auth-card .stack-form,.auth-card input,.auth-card .button{min-width:0;max-width:100%}
  .step-rail{gap:12px;font-size:10px;flex-wrap:wrap}
  .heading-row{align-items:flex-start;flex-direction:column}
}

/* Icon scale correction: compact line icons, with mobile rules last to avoid cascade overrides. */
svg {
  display: block;
}

.wordmark__logo {
  width: 28px;
  height: 28px;
  border-radius: 8px;
}

.admin-brand__logo {
  width: 30px;
  height: 30px;
  border-radius: 9px;
}

.nav-icon {
  width: 18px;
  height: 18px;
}

.nav-icon svg {
  width: 16px;
  height: 16px;
}

.inline-icon {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
}

.button-icon {
  width: 15px;
  height: 15px;
}

.hero-icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
}

.hero-icon svg {
  width: 19px;
  height: 19px;
}

.panel-icon {
  width: 28px;
  height: 28px;
}

.panel-icon svg {
  width: 14px;
  height: 14px;
}

.policy-icon {
  width: 30px;
  height: 30px;
}

.policy-icon svg {
  width: 15px;
  height: 15px;
}

.empty-state__icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}

.empty-state__icon svg {
  width: 16px;
  height: 16px;
}

.license-card__icon {
  width: 30px;
  height: 30px;
}

.license-card__icon svg {
  width: 15px;
  height: 15px;
}

.icon-button {
  font-size: 15px;
}

@media (max-width: 680px) {
  .hero-icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
  }

  .hero-icon svg {
    width: 17px;
    height: 17px;
  }

  .admin-brand__logo {
    width: 28px;
    height: 28px;
  }
}
/* Subscription and announcement item cards. */
.license-list,
.announcement-list {
  display: grid;
  gap: 10px;
}

.license-card {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  transition: border-color 160ms ease-out, background-color 160ms ease-out;
}

.license-card__icon {
  grid-row: auto;
  align-self: start;
  border-radius: 8px;
  border-color: var(--line-strong);
  background: var(--surface-2);
}

.license-card__body {
  min-width: 0;
}

.license-card__body h3 {
  margin: 7px 0 3px;
  font-size: 16px;
  letter-spacing: -.025em;
}

.license-card__body p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.license-card__meta {
  display: grid;
  grid-template-columns: auto auto;
  gap: 3px 14px;
  min-width: 190px;
  padding-left: 16px;
  border-left: 1px solid var(--line);
  font-size: 11px;
}

.license-card__meta span {
  color: var(--muted);
}

.license-card__meta strong {
  text-align: right;
  font-weight: 750;
}

.announcement-item {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  transition: border-color 160ms ease-out, background-color 160ms ease-out;
}

.announcement-item__meta {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  color: var(--muted);
  font: 10px "SFMono-Regular", Consolas, monospace;
  letter-spacing: .04em;
}

.list-marker {
  position: relative;
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--ink);
}

.list-marker::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 0 1px rgba(21, 22, 23, .08);
}

.announcement-title-row {
  align-items: center;
}

.announcement-title-row h3 {
  margin: 0;
  font-size: 16px;
  letter-spacing: -.025em;
}

.announcement-item p {
  margin: 7px 0 0;
  color: var(--muted);
  white-space: pre-wrap;
}

.announcement-empty {
  padding: 18px;
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  color: var(--muted);
  background: rgba(255, 253, 250, .72);
}

@media (hover: hover) and (pointer: fine) {
  .license-card:hover,
  .announcement-item:hover {
    border-color: var(--line-strong);
    background: #fff;
  }
}

@media (max-width: 680px) {
  .license-card {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
  }

  .license-card__meta {
    grid-column: 2;
    min-width: 0;
    padding: 10px 0 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .announcement-item {
    grid-template-columns: 1fr;
    gap: 11px;
    padding: 14px;
  }

  .announcement-item__meta {
    gap: 9px;
  }

  .list-marker {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
  }
}
/* Strong visible separation for dashboard content. */
.announcements-section {
  margin-top: 18px;
  padding: 28px;
  border: 1px solid #b8b4a9;
  border-radius: var(--radius);
  background: rgba(255, 253, 250, .9);
  box-shadow: 0 12px 34px rgba(35, 33, 28, .05);
}

.license-list,
.announcement-list {
  gap: 12px;
}

.license-card,
.announcement-item {
  border: 1px solid #aaa69b;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 2px 0 rgba(21, 22, 23, .045);
}

.license-card__icon,
.list-marker {
  border-color: #aaa69b;
  background: #f3f1eb;
}

.license-card__meta {
  min-width: 208px;
  padding: 10px 12px;
  border: 1px solid #c8c4b9;
  border-radius: 8px;
  background: #f7f5ef;
}

.announcement-item__meta {
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid #c8c4b9;
  border-radius: 8px;
  background: #f7f5ef;
}

.announcement-item > div:last-child {
  min-width: 0;
  padding: 3px 0;
}

@media (hover: hover) and (pointer: fine) {
  .license-card:hover,
  .announcement-item:hover {
    border-color: #77746c;
    box-shadow: 0 3px 0 rgba(21, 22, 23, .07);
  }
}

@media (max-width: 680px) {
  .announcements-section {
    padding: 18px;
  }

  .license-card__meta {
    min-width: 0;
    border: 1px solid #c8c4b9;
  }

  .announcement-item__meta {
    width: fit-content;
    min-height: 0;
  }
}
/* Realtime connection state and event feedback. */
.realtime-status{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.12em;white-space:nowrap}
.realtime-status .status-dot,.live-clock .status-dot{background:#c6c7bf;box-shadow:0 0 0 4px rgba(120,122,112,.12);transition:background-color 180ms ease-out,box-shadow 180ms ease-out}
.realtime-status.is-realtime-live,.live-clock.is-realtime-live{color:#4f781d}
.realtime-status.is-realtime-live .status-dot,.live-clock.is-realtime-live .status-dot{background:#67a522;box-shadow:0 0 0 4px rgba(103,165,34,.14)}
.realtime-status.is-realtime-offline,.live-clock.is-realtime-offline{color:var(--danger)}
.realtime-status.is-realtime-offline .status-dot,.live-clock.is-realtime-offline .status-dot{background:var(--danger);box-shadow:0 0 0 4px rgba(194,81,67,.12)}
.status-dot[data-state="reconnecting"],.status-dot[data-state="connecting"]{animation:realtime-pulse 1.2s ease-in-out infinite}
.realtime-toast{position:fixed;z-index:1200;right:22px;bottom:22px;max-width:min(360px,calc(100vw - 44px));padding:12px 16px;border:1px solid var(--line-strong);border-radius:12px;background:var(--surface);box-shadow:0 14px 36px rgba(29,30,26,.14);opacity:0;transform:translateY(8px);transition:opacity 180ms ease-out,transform 180ms ease-out;font-size:12px;font-weight:700}
.realtime-toast.is-visible{opacity:1;transform:translateY(0)}
.compact-list--presence{min-height:70px}
@keyframes realtime-pulse{0%,100%{opacity:.45}50%{opacity:1}}
@media (max-width:680px){.realtime-status{font-size:9px}.realtime-status [data-realtime-status-label]{display:none}.realtime-toast{right:14px;bottom:74px}}


/* Administrator access pages: quiet controls, clear boundaries, no decorative noise. */
.permission-chips{display:flex;flex-wrap:wrap;gap:5px;max-width:330px}.permission-chips span{padding:4px 7px;border:1px solid var(--line);border-radius:999px;background:var(--surface-2);color:var(--ink-soft);font-size:10px;line-height:1.1}.badge--ink{border-color:var(--ink);background:var(--ink);color:#fff}.permission-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.permission-option{display:flex!important;grid-template-columns:none!important;align-items:flex-start;gap:10px;padding:13px;border:1px solid var(--line);border-radius:11px;background:var(--surface);cursor:pointer;transition:border-color 150ms ease-out,background-color 150ms ease-out}.permission-option:hover{border-color:var(--line-strong);background:var(--surface-2)}.permission-option input{width:16px;height:16px;margin:2px 0 0;accent-color:var(--ink)}.permission-option span{display:grid;gap:2px}.permission-option strong{font-size:12px}.permission-option small{color:var(--muted);font-size:11px;line-height:1.4;font-weight:500}.admin-access-all{display:flex;align-items:center;gap:12px;min-height:120px;padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}.admin-access-all p{margin:0;color:var(--muted);font-size:12px}.editor-grid--admin{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}.editor-grid--admin .editor-actions{grid-column:1/-1}.admin-main .table-panel{overflow:hidden}@media (max-width:760px){.permission-grid{grid-template-columns:1fr}.editor-grid--admin{grid-template-columns:1fr}.editor-grid--admin .editor-actions{grid-column:auto}}

/* Site-wide consistency pass: shared type scale, card frames, controls and line icons. */
:root{--radius:12px;--control-radius:10px;--panel-pad:24px}
.eyebrow{margin-bottom:8px;font-size:11px;line-height:1.25;letter-spacing:.08em;text-transform:none}
.button{min-height:42px;gap:10px;padding:10px 16px;border-radius:var(--control-radius);font-size:13px}
.icon-button{width:34px;height:34px;border-radius:9px}
.icon-button svg{width:16px;height:16px}
.wordmark__logo{width:30px;height:30px;border-radius:9px}
.nav-icon{width:19px;height:19px}
.inline-icon,.button-icon{width:16px;height:16px}
.panel-icon{width:34px;height:34px;border-radius:10px;background:var(--surface-2)}
.panel-icon svg{width:17px;height:17px}
.hero-icon{width:50px;height:50px;border-color:var(--line);border-radius:12px;background:var(--surface);box-shadow:none}
.hero-icon svg{width:22px;height:22px}
.avatar--icon{display:grid;place-items:center;background:var(--surface-2);color:var(--ink-soft)}
.avatar--icon svg{width:17px;height:17px}
.auth-art__copy h1{font-size:clamp(46px,6vw,78px);line-height:.98;letter-spacing:-.065em}
.auth-art__copy p:not(.eyebrow){margin-top:20px;font-size:15px;line-height:1.65}
.auth-card h2,.admin-login-card__body h1{font-size:clamp(34px,4vw,48px);line-height:1;letter-spacing:-.055em}
.page-hero h1,.admin-header h1{font-size:clamp(34px,4.4vw,54px);line-height:1;letter-spacing:-.06em}
.page-hero,.admin-header{align-items:center;margin-bottom:30px}
.page-hero p:not(.eyebrow),.admin-header p:not(.eyebrow){max-width:620px;margin-top:12px;font-size:14px;line-height:1.65}
.panel,.admin-panel,.table-panel,.device-card,.split-panel,.announcements-section,.quick-actions,.project-card,.key-generator,.danger-zone{border-color:var(--line-strong);border-radius:var(--radius);background:var(--surface);box-shadow:none}
.admin-panel{padding:var(--panel-pad)}
.table-panel{border:1px solid var(--line-strong)}
.panel-heading,.section-heading{align-items:center;margin-bottom:18px}
.panel-heading h2,.section-heading h2{font-size:22px;line-height:1.15;letter-spacing:-.035em}
.record-count,.section-count{display:inline-flex;min-height:30px;align-items:center;padding:5px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--muted);font-family:inherit;font-size:11px;font-weight:700;letter-spacing:0;white-space:nowrap}
.user-stats,.metric-grid{border-color:var(--line-strong);box-shadow:none}
.user-stats article,.metric-card{min-height:150px;padding:22px}
.user-stats strong,.metric-card strong{margin-top:16px}
.user-stats small,.metric-card small{margin-top:11px;font-family:inherit;font-size:10px;font-weight:700;letter-spacing:.04em}
.license-card,.announcement-item{border-color:var(--line-strong);box-shadow:none}
.license-card:hover,.announcement-item:hover{border-color:var(--line-strong);box-shadow:none}
.realtime-status{font-size:10px;letter-spacing:.04em}
.permission-option,.admin-access-all{border-radius:10px}
.quick-actions .eyebrow{padding:20px 22px 0}
.quick-actions a{min-height:66px;padding:16px 22px}
@media (max-width:680px){
  :root{--panel-pad:18px}
  .auth-art__copy h1{font-size:clamp(38px,12vw,54px)}
  .auth-card h2,.admin-login-card__body h1{font-size:36px}
  .page-hero h1,.admin-header h1{font-size:36px}
  .page-hero,.admin-header{align-items:flex-start;margin-bottom:24px}
  .hero-icon{width:44px;height:44px;border-radius:11px}
  .hero-icon svg{width:20px;height:20px}
  .user-stats article,.metric-card{min-height:126px;padding:18px}
  .panel-heading h2,.section-heading h2{font-size:20px}
}
/* Complete shared component layer: tables, records, device panels and responsive navigation. */
.badge {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  padding: 5px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}
.badge--active { border-color: #a8ca78; background: #edf7df; color: #41631d; }
.badge--danger { border-color: #e1a89f; background: #fff0ed; color: #9c3022; }
.badge--neutral { border-color: var(--line-strong); background: var(--surface-2); color: var(--muted); }
.badge--priority { border-color: #d8c183; background: #fff7d9; color: #765d18; }
.badge--ink { border-color: var(--ink); background: var(--ink); color: #fff; }

.admin-header--actions { align-items: center; }
.create-panel { margin-bottom: 18px; }
.search-bar,
.filter-bar { margin: 18px 0; }
.search-bar > label:first-child { flex: 1; }

.table-wrap {
  width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
}
.table-panel table {
  width: 100%;
  min-width: 780px;
  border-collapse: collapse;
  table-layout: auto;
}
.table-panel .keys-table { min-width: 980px; }
.table-panel th,
.table-panel td {
  padding: 14px 16px;
  text-align: left;
  vertical-align: middle;
}
.table-panel th {
  border-bottom: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  white-space: nowrap;
}
.table-panel td {
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}
.table-panel tbody tr:last-child td { border-bottom: 0; }
.table-panel tbody tr { transition: background-color 140ms ease-out; }
.table-panel tbody tr:hover { background: #fbfaf6; }
.table-panel td > strong,
.table-panel td > small {
  display: block;
}
.table-panel td > small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.table-empty { padding: 34px 18px !important; color: var(--muted); text-align: center !important; }

.user-cell {
  display: inline-flex;
  min-width: 172px;
  align-items: center;
  gap: 11px;
}
.user-cell > span:last-child { display: grid; min-width: 0; gap: 2px; }
.user-cell strong { overflow: hidden; text-overflow: ellipsis; }
.user-cell small { color: var(--muted); font-size: 10px; }
.avatar,
.avatar--icon {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--ink-soft);
}
.avatar--icon svg { width: 17px; height: 17px; }

.row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  white-space: nowrap;
}
.row-actions form { margin: 0; }
.row-actions a,
.row-actions button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 750;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 4px;
}
.row-actions button:hover,
.row-actions a:hover { color: var(--ink); }
.row-actions--vertical { align-items: flex-end; flex-direction: column; }

.compact-list { display: grid; }
.compact-list > a,
.compact-list > div {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  min-height: 54px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.compact-list > :first-child { border-top: 0; }
.compact-list .list-main { display: grid; min-width: 0; gap: 2px; }
.compact-list .list-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compact-list .list-main small,
.compact-list time { color: var(--muted); font-size: 10px; }
.compact-list time { font-family: "SFMono-Regular", Consolas, monospace; white-space: nowrap; }
.empty-line { margin: 0; padding: 14px 0; color: var(--muted); }

.identity-stamp {
  display: grid;
  min-width: 210px;
  gap: 3px;
  padding: 13px 15px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
}
.identity-stamp span,
.identity-stamp small { color: var(--muted); font-size: 10px; }
.identity-stamp strong { font-size: 12px; }
.stat-word { font-size: clamp(25px, 3vw, 40px) !important; letter-spacing: -.045em !important; }

.detail-list { display: grid; margin: 0 0 20px; }
.detail-list > div {
  display: grid;
  grid-template-columns: minmax(100px, .7fr) minmax(0, 1.3fr);
  gap: 16px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}
.detail-list > div:first-child { border-top: 0; }
.detail-list dt { color: var(--muted); font-size: 11px; }
.detail-list dd { min-width: 0; margin: 0; text-align: right; overflow-wrap: anywhere; }

.device-card {
  display: grid;
  grid-template-columns: minmax(230px, .75fr) minmax(0, 1.25fr);
  padding: 0;
  overflow: hidden;
}
.device-visual {
  display: grid;
  min-height: 360px;
  align-content: center;
  justify-items: center;
  padding: 30px;
  border-right: 1px solid var(--line-strong);
  background: var(--surface-2);
}
.device-visual__screen {
  display: grid;
  width: min(190px, 100%);
  aspect-ratio: 1.55;
  place-items: center;
  border: 1px solid var(--ink-soft);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
  letter-spacing: .12em;
}
.device-visual__base {
  width: 72px;
  height: 9px;
  margin-top: 14px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
}
.device-info { display: grid; align-content: center; padding: 30px; }
.device-info__head h2 { margin: 0; font-size: 26px; letter-spacing: -.04em; }
.device-actions { margin-top: 4px; }
.countdown-box {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px 16px;
  margin: 4px 0 18px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
}
.countdown-box span,
.countdown-box p { color: var(--muted); font-size: 10px; }
.countdown-box p { grid-column: 1 / -1; margin: 0; }
.policy-note {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 13px;
  align-items: start;
  margin-top: 16px;
  padding: 17px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface);
}
.policy-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
}
.policy-icon svg { width: 16px; height: 16px; }
.policy-note p { margin: 5px 0 0; color: var(--muted); }

.project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.project-card { display: grid; gap: 20px; padding: 22px; }
.project-card__top,
.project-card__actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.project-code {
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-2);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
}
.project-card h2 { margin: 0; font-size: 25px; letter-spacing: -.04em; }
.project-card p { margin: 7px 0 0; color: var(--muted); }
.project-card dl { display: grid; grid-template-columns: repeat(2, 1fr); margin: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.project-card dl > div { padding: 12px; }
.project-card dl > div + div { border-left: 1px solid var(--line); }
.project-card dt { color: var(--muted); font-size: 10px; }
.project-card dd { margin: 5px 0 0; font-weight: 800; }

.segmented-control {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 18px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-2);
}
.segmented-control label { position: relative; cursor: pointer; }
.segmented-control input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.segmented-control span { display: grid; min-height: 38px; place-items: center; border-radius: 8px; color: var(--muted); font-size: 11px; font-weight: 750; }
.segmented-control input:checked + span { background: var(--ink); color: #fff; }
.key-fields { margin-top: 4px; }
.key-fingerprint { display: grid; gap: 5px; padding: 12px 0; border-top: 1px solid var(--line); }
.key-fingerprint span { color: var(--muted); font-size: 10px; }
.key-fingerprint strong { overflow-wrap: anywhere; font-family: "SFMono-Regular", Consolas, monospace; font-size: 11px; }
.key-status-card > p:last-child { margin: 18px 0 0; color: var(--muted); }

.editor-single { max-width: 860px; }
.editor-actions { display: flex; align-items: center; gap: 10px; }
.editor-actions--inline { margin-top: 4px; }
.code-form {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 18px;
  color: var(--muted);
  font-size: 11px;
}
.code-form--boxed { padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.security-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 24px; }
.security-meter span { height: 4px; border-radius: 4px; background: var(--line-strong); }
.security-meter span:first-child { background: var(--accent); }

@media (max-width: 900px) {
  .project-grid { grid-template-columns: 1fr; }
  .device-card { grid-template-columns: 1fr; }
  .device-visual { min-height: 170px; border-right: 0; border-bottom: 1px solid var(--line-strong); }
  .device-visual__screen { width: 150px; }
}

@media (max-width: 680px) {
  .topbar { grid-template-columns: minmax(0, 1fr) auto; }
  .topbar .wordmark { min-width: 0; }
  .topbar .wordmark > span { overflow: hidden; text-overflow: ellipsis; }
  .topbar__account { gap: 10px; }
  .topbar__nav { height: 64px; gap: 5px; padding: 8px; }
  .topbar__nav a { display: flex; min-width: 70px; height: 46px; align-items: center; justify-content: center; padding: 0 11px; border-radius: 10px; }
  .topbar__nav a.is-active { background: var(--accent); color: var(--ink); }
  .user-main { padding-bottom: 104px; }
  .page-hero--user .identity-stamp { width: 100%; min-width: 0; }
  .compact-list > a,
  .compact-list > div { grid-template-columns: 22px minmax(0, 1fr); }
  .compact-list time { grid-column: 2; }
  .device-info { padding: 22px 18px; }
  .device-visual { min-height: 140px; padding: 20px; }
  .device-visual__screen { width: 132px; }
  .policy-note { grid-template-columns: 34px minmax(0, 1fr); }
  .detail-list > div { grid-template-columns: 1fr; gap: 3px; }
  .detail-list dd { text-align: left; }
  .project-card { padding: 18px; }
  .segmented-control { grid-template-columns: 1fr; }
  .code-form { align-items: stretch; flex-direction: column; }
}