:root{
  --bg:#0b0f17; --panel:#121826; --panel-2:#171f31; --border:#24304a;
  --text:#e5eaf3; --muted:#8ea0bf; --accent:#5b8cff; --accent-2:#3fd1bc;
  --ok:#3ecf8e; --warn:#f7b84b; --bad:#ef4f4f; --info:#6ea8ff;
  --radius:10px; --shadow:0 8px 28px rgba(0,0,0,.35);
  color-scheme: dark;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;font-size:14px;line-height:1.45}
a{color:var(--accent)}
.hidden{display:none !important}
.error{color:var(--bad);margin-top:10px;min-height:1.2em;font-size:13px}
button{font:inherit;cursor:pointer}

/* --- Login --- */
.login-body{min-height:100vh;display:grid;place-items:center;background:radial-gradient(1200px 700px at 70% 20%,#1a2745 0%,#0b0f17 60%)}
.login-card{width:min(420px,92%);background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:28px;box-shadow:var(--shadow)}
.login-card h1{margin:0 0 18px;font-size:20px;letter-spacing:.3px}
.login-card label{display:block;font-size:12px;color:var(--muted);margin-bottom:10px}
.login-card input{width:100%;padding:10px 12px;margin-top:6px;background:var(--panel-2);border:1px solid var(--border);border-radius:8px;color:var(--text);outline:none}
.login-card input:focus{border-color:var(--accent)}

/* --- App shell --- */
.app{min-height:100vh;display:grid;grid-template-rows:auto 1fr}
.topbar{display:flex;align-items:center;gap:24px;padding:12px 20px;background:var(--panel);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10}
.brand{font-weight:700;letter-spacing:.3px;color:var(--accent)}
.tabs{display:flex;gap:4px;margin-left:12px;flex:1}
.tab{background:transparent;border:1px solid transparent;color:var(--muted);padding:7px 12px;border-radius:8px}
.tab:hover{color:var(--text)}
.tab.active{background:var(--panel-2);color:var(--text);border-color:var(--border)}
.user-menu{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px}
.main{padding:18px;display:grid;gap:18px}

/* --- Cards --- */
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px}
.card h3{margin:0 0 10px;font-size:14px;letter-spacing:.2px;color:var(--text)}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:960px){.grid-2{grid-template-columns:1fr}}

/* --- Tiles --- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.tile{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px}
.tile .k{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.tile .v{font-size:22px;font-weight:700}
.tile .sub{color:var(--muted);font-size:12px;margin-top:4px}
.tile.open .v{color:var(--info)}
.tile.pending .v{color:var(--warn)}
.tile.resolved .v{color:var(--ok)}
.tile.snoozed .v{color:var(--muted)}

/* --- Tables --- */
table.data{width:100%;border-collapse:collapse}
table.data th,table.data td{padding:8px 10px;border-bottom:1px solid var(--border);text-align:left;font-size:13px}
table.data th{color:var(--muted);font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.06em}
table.data tbody tr:hover{background:rgba(255,255,255,.02)}
.status-pill{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;background:var(--panel-2);color:var(--muted)}
.status-pill.open{color:var(--info);background:rgba(110,168,255,.1)}
.status-pill.pending{color:var(--warn);background:rgba(247,184,75,.1)}
.status-pill.resolved{color:var(--ok);background:rgba(62,207,142,.1)}
.status-pill.snoozed{color:var(--muted);background:rgba(150,150,150,.1)}

/* --- Live feed --- */
.live-feed{list-style:none;margin:0;padding:0;max-height:360px;overflow:auto}
.live-feed li{padding:8px 10px;border-bottom:1px solid var(--border);font-size:13px}
.live-feed .t{color:var(--muted);font-size:11px;margin-right:8px}
.live-feed .e-message\.new{border-left:3px solid var(--accent)}
.live-feed .e-conversation\.updated{border-left:3px solid var(--accent-2)}
.live-status{font-size:12px;color:var(--muted);margin-bottom:6px}
.live-status.ok{color:var(--ok)}
.live-status.bad{color:var(--bad)}

/* --- Buttons --- */
.btn{background:var(--panel-2);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:7px 12px;font-size:13px}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#081225}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent}
.btn.full{width:100%;padding:10px}
.btn.danger{color:var(--bad);border-color:var(--bad)}

/* --- Filters --- */
.filter-row{display:flex;gap:10px;align-items:center}
select,input[type="email"],input[type="password"],input[type="text"]{
  background:var(--panel-2);color:var(--text);border:1px solid var(--border);
  border-radius:8px;padding:6px 10px;font-size:13px;outline:none
}
select:focus,input:focus{border-color:var(--accent)}

/* --- Modal --- */
dialog.modal{background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:12px;padding:22px;min-width:360px;box-shadow:var(--shadow)}
dialog.modal::backdrop{background:rgba(0,0,0,.55);backdrop-filter:blur(2px)}
dialog form{display:grid;gap:10px}
dialog label{font-size:12px;color:var(--muted);display:grid;gap:4px}
dialog label input,dialog label select{width:100%}
dialog .row{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text)}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}