*{box-sizing:border-box}
body{margin:0;min-height:100dvh;background:var(--paper);color:var(--ink);font:1rem/1.55 Roboto,"Google Sans",Arial,sans-serif}
a{color:var(--accent);text-underline-offset:3px}
button,input{font:inherit}
button,.button{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px 16px;border:1px solid var(--line);border-radius:24px;background:var(--white);color:var(--accent);font-size:.875rem;font-weight:600;text-decoration:none;cursor:pointer}
button:hover,.button:hover{background:var(--tint)}
button.primary{background:var(--active);border-color:var(--active);color:var(--on-active)}
button.primary:hover{filter:brightness(.92)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.app-bar{min-height:76px;padding:12px clamp(16px,3vw,28px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;gap:11px;color:var(--ink);text-decoration:none;font-size:1.2rem;letter-spacing:-.025em;line-height:1.25;white-space:nowrap}
.brand small{display:block;color:var(--muted);font-size:.6rem;letter-spacing:.075em}
.view-tabs{display:flex;gap:4px;padding:4px;border-radius:28px;background:var(--surface-soft);overflow:auto}
.view-tabs a{white-space:nowrap;padding:8px 12px;border-radius:20px;color:var(--muted);font-size:.85rem;font-weight:500;text-decoration:none}
.view-tabs a:hover,.view-tabs a[aria-current]{background:var(--tint);color:var(--accent)}
.header-actions,.card-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.header-actions button,.header-actions .button{min-height:36px;padding:6px 12px}
.login-main{width:min(calc(100% - 32px),440px);margin:clamp(38px,12vh,112px) auto}
.admin-main{width:min(calc(100% - 40px),1120px);margin:clamp(22px,4vw,48px) auto 56px}
.panel{background:var(--white);padding:clamp(18px,3vw,28px);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow)}
h1,h2,h3{font-weight:500;letter-spacing:-.025em;line-height:1.25;margin:0;overflow-wrap:anywhere}
h1{font-size:clamp(1.65rem,4vw,2.15rem)}h2{font-size:1.2rem}h3{font-size:1rem}
p{color:var(--muted);margin:8px 0 0}.login-main form{margin-top:24px}
.fields,label{display:grid;gap:7px}.fields{gap:16px}
label{font-size:.875rem;font-weight:600}label small{color:var(--muted);font-weight:400}
input{min-height:42px;width:100%;padding:9px 12px;color:var(--ink);background:var(--white);border:1px solid var(--line);border-radius:8px}
.notice{padding:12px 16px;margin:16px 0;border-radius:12px;background:var(--tint);color:var(--ink)}
.notice[role=alert]{border-inline-start:3px solid #c5221f}
.page-heading{display:flex;align-items:end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.account-pill,.status{display:inline-flex;align-items:center;gap:7px;padding:4px 10px;border-radius:20px;background:var(--tint);color:var(--accent);font-size:.78rem;font-weight:600}
.account-pill span{font-weight:400;overflow-wrap:anywhere}.status.muted{background:var(--surface-soft);color:var(--muted)}
.account-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(265px,1fr);gap:18px;align-items:start}
.panel-heading{display:flex;justify-content:space-between;align-items:start;gap:12px}
.quota{flex-shrink:0;text-align:right;color:var(--muted);font-size:.78rem}
.quota strong{display:block;font-size:1rem;color:var(--ink)}progress{display:block;width:75px;height:6px;margin-top:5px;accent-color:var(--active)}
.account-list{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:10px}
.account-row{padding:14px;border-radius:16px;border:1px solid var(--line)}
.account-heading{display:flex;align-items:center;gap:11px}
.avatar{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:12px;background:var(--tint);color:var(--accent);font-weight:600}
.account-heading p{margin:3px 0 0;font-size:.82rem}.account-heading .status{margin-left:auto}
.account-row details{margin-top:10px}
summary{width:fit-content;cursor:pointer;color:var(--accent);font-size:.875rem;font-weight:600}
.account-row details .fields{margin:12px 0;grid-template-columns:minmax(0,1fr) auto;align-items:end}
.remove{color:var(--muted)}.confirm-remove{padding:9px 0}.confirm-remove p{font-size:.85rem;margin:0 0 8px}
.empty{margin-top:16px;padding:22px;border:1px dashed var(--line);border-radius:16px;text-align:center;color:var(--muted)}
.invite .fields{margin-top:18px}.invite .primary{justify-self:start}
@media(max-width:930px){.app-bar .view-tabs{order:3;flex-basis:100%;width:0}.app-bar .view-tabs a{flex:1;text-align:center}}
@media(max-width:700px){.account-grid{grid-template-columns:1fr}.admin-main{width:calc(100% - 28px)}}
@media(max-width:410px){.app-bar .view-tabs a{padding-inline:9px}.header-actions{gap:4px}.account-row details .fields{grid-template-columns:1fr}.account-row details .fields button{justify-self:start}}
