:root {
  --bg: #0b0d0c; --panel: #151817; --panel-2: #1c201e; --border: #2c312f; --text: #eef0ee; --muted: #9aa19e;
  --primary: #35c3e0; --primary-ink: #04161b; --gold: #e4bd4d; --danger: #ff8a7a; --ok: #6fd39b; --warn: #f2c35b;
  color-scheme: dark;
}
* {box-sizing: border-box}
html,body {margin: 0; background: var(--bg); color: var(--text); font: 14px/1.5 'Be Vietnam Pro','Segoe UI',Arial,sans-serif}
[hidden] {display: none!important}
a {color: var(--primary)}
h1 {font-size: 20px; margin: 0 0 6px}
h2 {font-size: 17px; margin: 0 0 12px}
h3 {font-size: 15px; margin: 0 0 10px}
.muted {color: var(--muted)}
.small {font-size: 12px}
label {display: block; margin: 0 0 12px; color: #c9cecb; font-size: 13px}
input,select,textarea {display: block; width: 100%; margin-top: 5px; padding: 8px 10px; border: 1px solid #3a403d; border-radius: 6px; background: #0d0f0e; color: var(--text); font: inherit}
textarea {min-height: 320px; font: 12.5px/1.5 ui-monospace,Consolas,monospace; resize: vertical}
input:focus,select:focus,textarea:focus,button:focus-visible {outline: 2px solid var(--primary); outline-offset: 1px}
input[type=checkbox] {display: inline-block; width: auto; margin: 0 6px 0 0; vertical-align: -2px}
button {min-height: 34px; padding: 6px 14px; border: 1px solid #3a403d; border-radius: 6px; background: var(--panel-2); color: var(--text); font: inherit; font-weight: 600; cursor: pointer}
button:hover {border-color: #56605b}
button:disabled {opacity: .55; cursor: progress}
button.primary {background: var(--primary); border-color: var(--primary); color: var(--primary-ink)}
button.danger {border-color: #7a3a33; color: var(--danger)}
button.ghost {background: transparent}
.login-view {display: grid; place-items: center; min-height: 100vh; padding: 16px}
.login-card {width: 100%; max-width: 380px; padding: 28px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel)}
.login-card button {width: 100%; margin-top: 4px}
.error {min-height: 1em; margin: 0 0 8px; color: var(--danger)}
.topbar {position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 10px 20px; border-bottom: 1px solid var(--border); background: #0f1211f2}
.brand {color: var(--gold)}
.tabs {order: 3; display: flex; flex-wrap: wrap; gap: 4px; flex: 1 1 100%}
.tabs button {background: transparent; border-color: transparent; white-space: nowrap}
.tabs button.active {border-color: var(--primary); color: var(--primary)}
.brand {flex: 1}
.me {display: flex; flex-wrap: wrap; align-items: center; gap: 8px}
main {max-width: 1200px; margin: 0 auto; padding: 20px 16px 60px}
.toast {position: fixed; right: 16px; bottom: 16px; z-index: 20; max-width: min(520px,calc(100vw - 32px)); padding: 12px 16px; border: 1px solid #2f5c48; border-radius: 8px; background: #12261d; box-shadow: 0 10px 30px #000a; white-space: pre-line}
.toast.bad {border-color: #7a3a33; background: #2a1512}
.card {margin: 0 0 16px; padding: 18px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel)}
.grid {display: grid; gap: 16px; grid-template-columns: repeat(auto-fill,minmax(320px,1fr))}
.row {display: flex; flex-wrap: wrap; gap: 10px; align-items: center}
.row > label {flex: 1 1 160px}
.actions {display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px}
.pill {display: inline-block; padding: 2px 9px; border-radius: 99px; background: #26302c; font-size: 12px; font-weight: 600}
.pill.ok {background: #183a2a; color: var(--ok)} .pill.warn {background: #3a3018; color: var(--warn)} .pill.bad {background: #3a1d18; color: var(--danger)}
.team-head {display: flex; gap: 12px; align-items: center; margin-bottom: 12px}
.logo {width: 56px; height: 56px; flex: none; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 10px; background: #0d0f0e; overflow: hidden; font-weight: 800; color: var(--muted)}
.logo img {width: 100%; height: 100%; object-fit: contain}
table {width: 100%; border-collapse: collapse}
th,td {padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top}
th {color: var(--muted); font-size: 12px; font-weight: 600}
.table-wrap {overflow-x: auto}
.vars {display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px}
.vars button {min-height: 26px; padding: 2px 8px; font: 12px ui-monospace,Consolas,monospace}
.split {display: grid; gap: 16px; grid-template-columns: minmax(0,1fr) minmax(0,1fr)}
.preview {width: 100%; min-height: 560px; border: 1px solid var(--border); border-radius: 8px; background: #fff}
.kpis {display: grid; gap: 12px; grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); margin-bottom: 16px}
.kpi {padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel)}
.kpi strong {display: block; font-size: 22px}
.perm-list {display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 4px 0 12px}
.perm-list label {margin: 0}
dialog {width: min(560px,calc(100vw - 32px)); padding: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); color: var(--text)}
dialog::backdrop {background: #000a}
dialog form {padding: 22px}
code {font: 12px ui-monospace,Consolas,monospace; color: #bfe9f2}
@media (max-width: 860px) {.split {grid-template-columns: 1fr} .topbar {padding: 10px 16px}}
@media (max-width: 480px) {.grid {grid-template-columns: 1fr} main {padding: 16px 16px 48px}}
.sep {margin: 14px 0; border: 0; border-top: 1px solid var(--border)}