:root { --background:#f3f4f6; --surface:#fff; --text:#17212f; --muted:#526071; --border:#d4dae2; --primary:#1759b8; --danger:#ae2029; --radius:6px; }
* { box-sizing:border-box; }
body { margin:0; background:var(--background); color:var(--text); font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif; }
a { color:var(--primary); text-underline-offset:3px; }
button,input,textarea,summary { font:inherit; }
button,.button { display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:8px 16px; border:1px solid transparent; border-radius:var(--radius); background:var(--primary); color:#fff; text-decoration:none; cursor:pointer; text-align:center; }
button:hover,.button:hover { filter:brightness(.94); }
.secondary { background:var(--surface); border-color:var(--border); color:var(--text); }
.danger { background:var(--danger); }
.danger-outline { background:var(--surface); color:var(--danger); border-color:var(--danger); }
:focus-visible { outline:3px solid var(--primary); outline-offset:3px; }
.skip { position:absolute; left:16px; top:-80px; z-index:2; padding:8px; background:var(--surface); }
.skip:focus { top:8px; }
.top { background:var(--surface); border-bottom:1px solid var(--border); padding:16px 32px; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.brand { color:var(--text); text-decoration:none; font-size:24px; font-weight:700; white-space:nowrap; }
.identity { display:flex; align-items:center; gap:16px; min-width:0; }
.identity span { overflow-wrap:anywhere; }
.shell { display:flex; gap:32px; max-width:1440px; margin:0 auto; padding:32px; }
nav { flex:0 0 192px; }
nav summary { display:none; }
.navlinks { display:flex; flex-direction:column; gap:8px; }
.navlinks a { padding:8px 16px; min-height:40px; color:var(--text); border-radius:var(--radius); text-decoration:none; }
.navlinks a[aria-current] { background:var(--surface); color:var(--primary); font-weight:600; }
main { min-width:0; flex:1; }
h1 { font-size:32px; line-height:1.25; margin:0 0 24px; }
h2 { font-size:20px; line-height:1.4; margin:0 0 16px; }
p { margin:0 0 16px; overflow-wrap:anywhere; }
.lead { color:var(--muted); }
.panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:24px; margin-bottom:24px; }
.panel>:last-child { margin-bottom:0; }
.notice { border:1px solid var(--border); border-left:4px solid var(--primary); background:var(--surface); padding:16px; margin-bottom:24px; }
.muted,small { color:var(--muted); }
small { display:block; font-size:14px; }
.login { max-width:640px; }
.login .button { margin-bottom:24px; }
input,textarea { width:100%; min-height:40px; border:1px solid var(--border); border-radius:var(--radius); padding:8px; color:var(--text); background:var(--surface); margin-top:8px; }
textarea { resize:vertical; overflow-wrap:anywhere; }
label { display:block; }
form { margin:0; }
.add-form,.form-grid { display:flex; align-items:flex-end; flex-wrap:wrap; gap:16px; }
.add-form label { flex:1; min-width:200px; }
.form-grid { margin-top:16px; }
.form-grid label { flex:1; min-width:160px; }
.quotas { display:flex; flex-wrap:wrap; gap:32px; margin-bottom:16px; }
.quotas strong { display:block; font-size:24px; }
summary { cursor:pointer; min-height:40px; padding:8px 0; }
.actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.device-list,.audit-list { list-style:none; padding:0; margin:0; }
.device-list li { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:24px 0; border-top:1px solid var(--border); }
.device-list li:first-child { border-top:0; padding-top:0; }
.device-list li:last-child { padding-bottom:0; }
.device-list strong { overflow-wrap:anywhere; }
.device-list p { margin:8px 0; }
.status { font-size:14px; border:1px solid var(--border); border-radius:var(--radius); padding:0 8px; display:inline-block; }
table { border-collapse:collapse; width:100%; text-align:left; }
th { font-size:14px; color:var(--muted); font-weight:600; }
th,td { padding:16px 8px; vertical-align:top; border-bottom:1px solid var(--border); overflow-wrap:anywhere; }
td:first-child { max-width:256px; }
tr:last-child td { border-bottom:0; }
.audit-list li { padding:16px 0; border-bottom:1px solid var(--border); }
.audit-list li:first-child { padding-top:0; }
.audit-list li:last-child { border-bottom:0; }
.audit-list p { margin:8px 0; }
footer { padding:0 32px 24px; text-align:center; color:var(--muted); font-size:14px; }
@media(max-width:1100px) { .shell { gap:24px; padding:24px; } nav { flex-basis:160px; } .panel { padding:16px; } .responsive-table thead { display:none; } .responsive-table,.responsive-table tbody,.responsive-table tr { display:block; } .responsive-table tr { border-bottom:1px solid var(--border); padding:16px 0; } .responsive-table tr:first-child { padding-top:0; } .responsive-table tr:last-child { border:0; padding-bottom:0; } .responsive-table td { display:grid; grid-template-columns:120px minmax(0,1fr); gap:0 16px; max-width:none; border:0; padding:8px 0; } .responsive-table td::before { content:attr(data-label); color:var(--muted); } .responsive-table small { grid-column:2; } }
@media(max-width:767px) { .top { padding:16px; flex-wrap:wrap; } .identity { width:100%; justify-content:space-between; font-size:14px; } .shell { padding:16px; display:block; } nav { margin-bottom:24px; } nav details { border-bottom:1px solid var(--border); padding-bottom:8px; } nav summary { display:list-item; } .navlinks { flex-direction:row; flex-wrap:wrap; } .navlinks a { flex:1 0 40%; } h1 { font-size:24px; margin-bottom:16px; } .panel,.notice { margin-bottom:16px; } .device-list li { align-items:flex-start; flex-direction:column; } .add-form label,.form-grid label { min-width:0; flex-basis:100%; } .responsive-table td { grid-template-columns:88px minmax(0,1fr); gap:0 8px; } .responsive-table td .button,.responsive-table td button { width:100%; padding:8px; } }