*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-base);font-size:var(--text-base);-webkit-font-smoothing:antialiased}a{color:var(--accent-2);text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3,h4{font-family:var(--font-heading);font-weight:var(--fw-semibold);margin:0;letter-spacing:.01em}button{font-family:var(--font-base);cursor:pointer}.app{display:grid;grid-template-columns:236px 1fr;min-height:100vh}.sidebar{background:var(--surface);border-right:1px solid var(--line);padding:var(--space-6) var(--space-4);display:flex;flex-direction:column;gap:var(--space-2);position:sticky;top:0;height:100vh}.brand{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-6)}.brand .mark{width:30px;height:30px;border-radius:var(--radius-md);background:var(--accent);display:grid;place-items:center;color:var(--on-accent);font-family:var(--font-heading);font-weight:700}.brand .name{font-family:var(--font-heading);font-weight:700;font-size:var(--text-lg);line-height:1}.brand .sub{color:var(--muted);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.12em}.nav{display:flex;flex-direction:column;gap:2px}.nav a{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);color:var(--muted);font-size:var(--text-sm);font-weight:var(--fw-medium)}.nav a:hover{background:var(--surface-hover);color:var(--text);text-decoration:none}.nav a.active{background:var(--surface-2);color:var(--text);box-shadow:inset 2px 0 0 var(--accent)}.nav .ico{width:16px;text-align:center;opacity:.9}.sidebar .spacer{flex:1}.who{border-top:1px solid var(--line);padding-top:var(--space-4);font-size:var(--text-xs);color:var(--muted)}.who .email{color:var(--text);font-size:var(--text-sm);font-weight:var(--fw-medium)}.role-tag{display:inline-block;margin-top:4px;padding:2px 8px;border-radius:var(--radius-pill);font-size:var(--text-xs);font-weight:var(--fw-semibold);letter-spacing:.04em}.role-SUPERADMIN{background:color-mix(in srgb,var(--accent) 22%,transparent);color:var(--accent)}.role-SKINADMIN{background:color-mix(in srgb,var(--accent-2) 20%,transparent);color:var(--accent-2)}.main{padding:var(--space-7) var(--space-8);max-width:1400px;width:100%}.page-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:var(--space-6);gap:var(--space-5);flex-wrap:wrap}.page-head h1{font-size:var(--text-2xl)}.page-head .crumb{color:var(--muted);font-size:var(--text-sm);margin-bottom:4px}.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--space-4);margin-bottom:var(--space-7)}.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-card)}.tile .label{color:var(--muted);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.08em}.tile .value{font-family:var(--font-numeric);font-size:var(--text-xl);font-weight:var(--fw-bold);margin-top:6px;font-variant-numeric:tabular-nums}.tile .foot{color:var(--faint);font-size:var(--text-xs);margin-top:4px}.tile .value.accent{color:var(--accent)}.tile .value.warn{color:var(--warn)}.skin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--space-5)}.skin-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-card);display:block;color:inherit}.skin-card:hover{border-color:var(--line-strong);background:var(--surface-hover);text-decoration:none}.skin-card .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-4)}.skin-card .title{display:flex;align-items:center;gap:var(--space-3)}.skin-card .title h3{font-size:var(--text-lg)}.skin-card .id{color:var(--faint);font-size:var(--text-xs);font-family:var(--font-numeric)}.skin-kpis{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3) var(--space-5)}.skin-kpis .k{display:flex;flex-direction:column}.skin-kpis .k .l{color:var(--muted);font-size:var(--text-xs)}.skin-kpis .k .v{font-family:var(--font-numeric);font-weight:var(--fw-semibold);font-variant-numeric:tabular-nums}.dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none}.dot.online{background:var(--positive);box-shadow:0 0 0 3px color-mix(in srgb,var(--positive) 25%,transparent)}.dot.offline{background:var(--faint)}.dot.mock{background:var(--warn);box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 22%,transparent)}.status-row{display:inline-flex;align-items:center;gap:var(--space-3);font-size:var(--text-xs);color:var(--muted)}.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);overflow:hidden}.panel+.panel{margin-top:var(--space-6)}.panel-head{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--line);gap:var(--space-4);flex-wrap:wrap}.panel-head h2{font-size:var(--text-lg)}table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}thead th{text-align:left;color:var(--muted);font-weight:var(--fw-semibold);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.06em;padding:var(--space-3) var(--space-5);border-bottom:1px solid var(--line)}tbody td{padding:var(--space-3) var(--space-5);border-bottom:1px solid var(--line)}tbody tr:last-child td{border-bottom:none}tbody tr:hover{background:var(--surface-hover)}td.num,th.num{text-align:right;font-family:var(--font-numeric);font-variant-numeric:tabular-nums}td.mono{font-family:var(--font-numeric);color:var(--muted);font-size:var(--text-xs)}.badge{display:inline-block;padding:2px 9px;border-radius:var(--radius-pill);font-size:var(--text-xs);font-weight:var(--fw-semibold);text-transform:capitalize}.b-active,.b-won{background:color-mix(in srgb,var(--positive) 18%,transparent);color:var(--positive)}.b-open{background:color-mix(in srgb,var(--accent-2) 18%,transparent);color:var(--accent-2)}.b-suspended,.b-void{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}.b-closed,.b-lost{background:color-mix(in srgb,var(--danger) 18%,transparent);color:var(--danger-ink)}.field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--space-4)}.field label{font-size:var(--text-xs);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}.input,select,.input:focus{background:var(--surface-2);border:1px solid var(--line);color:var(--text);border-radius:var(--radius-md);padding:9px var(--space-4);font-size:var(--text-sm);font-family:var(--font-base);width:100%}select{height:38px}.input:focus,select:focus{outline:none;border-color:var(--line-strong);box-shadow:var(--ring)}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 var(--space-5)}.btn{background:var(--accent);color:var(--on-accent);border:none;border-radius:var(--radius-md);padding:9px var(--space-5);font-weight:var(--fw-semibold);font-size:var(--text-sm)}.btn:hover{background:var(--accent-strong)}.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line-strong)}.btn.ghost:hover{background:var(--surface-hover)}.btn:disabled{opacity:.5;cursor:not-allowed}.toolbar{display:flex;gap:var(--space-3);align-items:center;flex-wrap:wrap}.search{min-width:240px}.chips{display:flex;gap:var(--space-2);flex-wrap:wrap}.chip{padding:5px 12px;border-radius:var(--radius-pill);border:1px solid var(--line);background:var(--surface-2);color:var(--muted);font-size:var(--text-xs);font-weight:var(--fw-medium)}.chip.on{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}.muted{color:var(--muted)}.faint{color:var(--faint)}.empty{padding:var(--space-8);text-align:center;color:var(--muted)}.notice{padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);font-size:var(--text-sm);margin-bottom:var(--space-5)}.notice.ok{background:color-mix(in srgb,var(--positive) 14%,transparent);color:var(--positive)}.notice.warn{background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--warn)}.notice.err{background:color-mix(in srgb,var(--danger) 14%,transparent);color:var(--danger-ink)}.row-gap{display:flex;gap:var(--space-5);flex-wrap:wrap;align-items:flex-start}.theme-swatch{display:inline-flex;align-items:center;gap:6px}.theme-swatch .sw{width:14px;height:14px;border-radius:4px;border:1px solid var(--line)}.login-wrap{display:grid;place-items:center;min-height:100vh;padding:var(--space-5)}.login-card{width:100%;max-width:380px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-8);box-shadow:var(--shadow-float)}.login-card .brand{justify-content:center;margin-bottom:var(--space-7)}.login-card h1{text-align:center;font-size:var(--text-xl);margin-bottom:var(--space-2)}.login-card .sub{text-align:center;color:var(--muted);font-size:var(--text-sm);margin-bottom:var(--space-6)}.hint{margin-top:var(--space-5);font-size:var(--text-xs);color:var(--faint);text-align:center;line-height:1.6}@media(max-width:860px){.app{grid-template-columns:1fr}.sidebar{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center}.sidebar .spacer{display:none}.nav{flex-direction:row;flex-wrap:wrap}.main{padding:var(--space-5)}}