:root{color-scheme:light dark;--bg:#edf3fa;--card:#fff;--ink:#17233b;--muted:#425673;--line:#aec0d5;--accent:#0068b5;--button:#0b1020;--on-button:#fff;--focus:#0068b5;--error:#9b2444}

@media(prefers-color-scheme:dark){:root{--bg:#0b1020;--card:#151d30;--ink:#eef3fc;--muted:#b6c9e2;--line:#536781;--accent:#8bcbff;--button:#cfe8ff;--on-button:#0b1020;--focus:#8bcbff;--error:#ffb1c1}
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,sans-serif}
header,main,footer{max-width:1200px;margin:auto;padding:20px 24px}
header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:16px}
.brand{font-size:18px;font-weight:750;text-decoration:none}
a{color:var(--accent);text-underline-offset:.2em}
h1,h2,h3{line-height:1.3}
h1{font-size:1.5rem;letter-spacing:-.02em;margin:0 0 12px}
h2{font-size:1.1rem;margin:0 0 14px}
h3{font-size:1rem;margin:0}
.eyebrow{font-size:.75rem;font-weight:750;letter-spacing:.1em;color:var(--muted)}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:20px;overflow-wrap:anywhere}
#signin{max-width:540px}
#recovery{margin-bottom:24px}
form,.rename-field{display:grid;gap:10px}
label{font-weight:650}
input,button{font:inherit;border-radius:6px;min-height:44px;padding:8px 12px}
input{background:var(--card);border:1px solid var(--line);color:var(--ink);min-width:0;width:100%}
button{background:transparent;border:1px solid var(--line);color:var(--ink);font-weight:650;cursor:pointer}
button:hover,summary:hover{border-color:var(--accent)}
button.primary{background:var(--button);color:var(--on-button);border-color:var(--button)}
button:disabled{opacity:.55;cursor:wait}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.account-bar,.actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.account-bar{justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:24px}
.account-bar p{margin:0;overflow-wrap:anywhere;min-width:0}
.account-bar button{flex-shrink:0}
.actions{margin-top:20px;justify-content:flex-end}
.devices{display:grid;gap:10px}
.subscription-group,.empty-state{background:var(--card);border:1px solid var(--line);border-radius:10px}
.licence-row{display:grid;grid-template-columns:minmax(180px,1.5fr) minmax(100px,.7fr) minmax(200px,1.25fr) auto;gap:16px;align-items:start;padding:16px;overflow-wrap:anywhere}
.licence-row+.licence-row{border-top:1px solid var(--line)}
.licence-row p{margin:0}
.licence-plan p:first-child{font-weight:650}
.device-detail{font-size:.875rem;color:var(--muted);margin-top:4px!important}
.status-chip{display:inline-block;border:1px solid var(--line);border-radius:20px;padding:2px 9px;font-size:.8125rem;font-weight:650}
.licence-date{max-width:27ch}
.group-title{font-size:.8125rem;font-weight:650;color:var(--muted);margin:0;padding:10px 16px 0}
.action-menu{position:relative;min-width:100px}
.action-menu>summary{border:1px solid var(--line);border-radius:6px;padding:10px 12px;min-height:44px;font-size:.875rem;cursor:pointer;white-space:nowrap}
.menu-actions{position:absolute;z-index:2;right:0;top:calc(100% + 5px);width:210px;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:6px;box-shadow:0 8px 24px #0003;display:grid;gap:4px}
.menu-actions button{text-align:left;font-size:.875rem;border-color:transparent}
.menu-actions button:hover{border-color:var(--accent)}
.legacy{margin-top:24px}
.legacy>summary{padding:12px 0;cursor:pointer;font-weight:650}
.legacy .devices{background:var(--card);border:1px solid var(--line);border-radius:10px;margin-top:8px}
.legacy .licence-row{grid-template-columns:minmax(180px,1.5fr) minmax(100px,.7fr) minmax(200px,1.25fr)}
.empty-state{padding:20px}
.empty-state p{margin-bottom:0;color:var(--muted)}
.account-help{border-top:1px solid var(--line);margin-top:28px;padding-top:8px;max-width:900px;font-size:.9rem;color:var(--muted)}
.account-help strong{color:var(--ink)}
footer{color:var(--muted);font-size:.875rem;border-top:1px solid var(--line);margin-top:24px}
#notice:empty{display:none}
#notice.error,#dialog-error{color:var(--error)}
#more{margin-top:20px}
dialog{width:520px;max-width:calc(100vw - 32px);border:1px solid var(--line);border-radius:10px;padding:24px;background:var(--card);color:var(--ink)}
dialog::backdrop{background:#0b1020b3}
dialog p{overflow-wrap:anywhere}
.rename-field p{font-size:.875rem;color:var(--muted);margin:0}
.field-count{text-align:right}
.skip{position:absolute;top:-100px;left:16px;padding:12px;background:var(--card);z-index:3}
.skip:focus{top:8px}
.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}
[hidden]{display:none!important}
@media(max-width:900px){.licence-row{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto}
.licence-identity{grid-column:1/3}
.licence-plan{grid-column:1}
.licence-state{grid-column:2/4}
.action-menu{grid-column:3;grid-row:1}
.legacy .licence-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.legacy .licence-state{grid-column:2}
.legacy .licence-identity{grid-column:1/3}
}
@media(max-width:480px){header,main,footer{padding:16px}
.brand{font-size:16px}
.account-bar{gap:8px}
.account-bar p{flex:1 1 180px;font-size:.875rem}
.licence-row{padding:14px;gap:12px;grid-template-columns:minmax(0,1fr) auto}
.licence-identity{grid-column:1/-1}
.licence-plan{grid-column:1;grid-row:2}
.action-menu{grid-column:2;grid-row:2;min-width:96px}
.licence-state{grid-column:1/-1;grid-row:3}
.licence-date{max-width:none}
.legacy .licence-row{grid-template-columns:minmax(0,1fr)}
.legacy .licence-identity,.legacy .licence-plan,.legacy .licence-state{grid-column:1}
.card{padding:16px}
.actions button{flex:1 1 100%}
dialog{padding:20px}
}