@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root{
  /* Dark palette — matches the marketing site's tokens exactly
     (wp-content/themes/pulse/style.css :root) so the logged-in app and
     the landing page read as the same product. */
  --bg:#0A0B12;
  --surface:#12141F;
  --surface-2:#171926;
  --sidebar:#0E1016;
  --sidebar-text:#8B90A3;
  --sidebar-text-active:#FFFFFF;
  --sidebar-line:#1D2030;
  --accent:#5B5FEF;
  --accent-2:#8B8FF5;
  --accent-soft:rgba(91,95,239,.14);
  --up:#17A673;
  --up-soft:rgba(23,166,115,.14);
  --down:#E5484D;
  --down-soft:rgba(229,72,77,.14);
  --warn:#DD9917;
  --warn-soft:rgba(221,153,23,.14);
  --text:#F4F5FA;
  --text-2:#A6ABC2;
  --text-3:#6E7288;
  --border:#242739;
  --radius:12px;
  --radius-lg:16px;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
  --ease:cubic-bezier(.4,0,.2,1);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{color-scheme:dark;}
body{
  font-family:'Inter', -apple-system, "Segoe UI", "Noto Sans Thai", sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
.mono{ font-family:'JetBrains Mono', monospace; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:#2A2D40; border-radius:999px; }

/* ---------- Layout shell ---------- */
.shell{ display:grid; grid-template-columns:248px 1fr; min-height:100vh; }

/* ---------- Sidebar ---------- */
.sidebar{
  background:var(--sidebar);
  color:var(--sidebar-text);
  display:flex; flex-direction:column;
  padding:20px 14px;
  position:sticky; top:0; height:100vh;
}
.brand{ display:flex; align-items:center; gap:10px; padding:6px 10px 22px; }
.brand-mark{
  width:30px; height:30px; border-radius:9px;
  background:linear-gradient(135deg, var(--accent), #A78BFA);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.brand-name{ color:#fff; font-weight:700; font-size:15.5px; letter-spacing:-.01em; }

.nav-group-label{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.08em;
  color:#565B70; padding:16px 10px 6px; font-weight:600;
}
.nav-item{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:8px;
  font-size:13.5px; font-weight:500;
  color:var(--sidebar-text);
  cursor:pointer; transition:background .12s var(--ease), color .12s var(--ease);
  position:relative; text-decoration:none;
}
.nav-item svg{ width:16px; height:16px; flex-shrink:0; opacity:.85; }
.nav-item:hover{ background:#171A26; color:#fff; text-decoration:none; }
.nav-item.active{ background:#181B2C; color:var(--sidebar-text-active); }
.nav-item.active::before{
  content:''; position:absolute; left:-14px; top:50%; transform:translateY(-50%);
  width:3px; height:16px; border-radius:3px; background:var(--accent-2);
}
.nav-badge{
  margin-left:auto; font-size:10.5px; font-weight:700;
  background:var(--down); color:#fff; padding:1px 6px; border-radius:20px;
}
.sidebar-footer{
  margin-top:auto; padding-top:14px; border-top:1px solid var(--sidebar-line);
  display:flex; align-items:center; gap:9px; padding:12px 8px 4px;
}
.avatar{
  width:28px; height:28px; border-radius:8px; background:#2A2D40;
  display:flex; align-items:center; justify-content:center;
  font-size:11.5px; font-weight:700; color:#D7D9F0; flex-shrink:0;
}
.who{ font-size:12.5px; color:#D3D5E4; font-weight:600; }
.plan{ font-size:11px; color:var(--text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidebar-footer-link{ display:flex; align-items:center; gap:9px; flex:1; min-width:0; text-decoration:none; color:inherit; }
.sidebar-logout-btn{
  width:28px; height:28px; border-radius:8px; border:1px solid var(--sidebar-line);
  background:transparent; color:var(--text-3); cursor:pointer; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.sidebar-logout-btn svg{ width:14px; height:14px; }
.sidebar-logout-btn:hover{ background:rgba(255,255,255,.08); color:#D3D5E4; }

/* ---------- Main ---------- */
.main{ min-width:0; }
.topbar{
  display:flex; align-items:center; gap:14px;
  padding:16px 28px; background:var(--surface);
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:5;
}
.search{
  flex:1; max-width:420px; display:flex; align-items:center; gap:8px;
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:9px; padding:8px 12px; color:var(--text-3); font-size:13px;
}
.search svg{ width:14px; height:14px; opacity:.7; flex-shrink:0; }
.search input{
  border:none; background:transparent; outline:none; font:inherit; color:var(--text);
  width:100%;
}
.search input::placeholder{ color:var(--text-3); }
.topbar-right{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.lang-switch{ display:flex; gap:2px; background:var(--surface-2); border:1px solid var(--border); padding:3px; border-radius:9px; }
.lang-switch-btn{
  font:inherit; font-size:12px; font-weight:700; padding:5px 10px; border-radius:6px;
  border:none; background:transparent; color:var(--text-2); cursor:pointer;
}
.lang-switch-btn.active{ background:var(--border); color:var(--text); box-shadow:var(--shadow); }
.btn{
  display:inline-flex; align-items:center; gap:7px;
  font-size:13px; font-weight:600; border-radius:8px;
  padding:8px 14px; cursor:pointer; border:1px solid transparent;
  font-family:inherit; transition:filter .12s var(--ease), transform .1s var(--ease);
}
.btn-primary{ background:var(--accent); color:#fff; box-shadow:0 1px 0 rgba(0,0,0,.05), 0 4px 10px -4px rgba(91,95,239,.55); }
.btn-primary:hover{ filter:brightness(1.06); }
.btn-primary:active{ transform:translateY(1px); }
.btn-primary svg{ width:14px; height:14px; }
.icon-btn{
  width:30px; height:30px; border-radius:8px; border:1px solid var(--border);
  background:var(--surface); display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--text-2); font-size:13px;
}
.icon-btn:hover{ background:var(--surface-2); }
.mobile-menu-btn{ display:none; flex-shrink:0; }
.sidebar-backdrop{ display:none; }

.content{ padding:26px 28px 60px; animation:pageIn .35s var(--ease); }
@keyframes pageIn{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:translateY(0);} }

.page-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:20px; gap:16px; flex-wrap:wrap; }
.page-head h1{ font-size:20px; font-weight:700; letter-spacing:-.01em; }
.page-head p{ font-size:13px; color:var(--text-2); margin-top:3px; }
.tabs{ display:flex; gap:4px; background:var(--surface-2); border:1px solid var(--border); padding:3px; border-radius:9px; }
.tab{ font-size:12.5px; font-weight:600; padding:6px 12px; border-radius:7px; color:var(--text-2); cursor:pointer; text-decoration:none; }
.tab:hover{ text-decoration:none; }
.tab.active{ background:var(--border); color:var(--text); box-shadow:var(--shadow); }

/* ---------- Stat cards ---------- */
.stats{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-bottom:22px; }
.stat-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:16px 18px; box-shadow:var(--shadow); animation:cardIn .4s var(--ease) both;
}
@keyframes cardIn{ from{ opacity:0; transform:translateY(4px);} to{ opacity:1; transform:translateY(0);} }
.stat-label{ font-size:12px; color:var(--text-2); font-weight:600; }
.stat-value{ font-size:25px; font-weight:700; margin-top:8px; letter-spacing:-.02em; }
.up-text{ color:var(--up); } .down-text{ color:var(--down); } .warn-text{ color:var(--warn); }

/* ---------- Grid: monitors + side panel ---------- */
.grid-main{ display:grid; grid-template-columns:1fr 340px; gap:18px; align-items:start; }
.side-stack{ display:flex; flex-direction:column; gap:18px; }
.panel{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden; margin-bottom:18px;
}
.panel-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:1px solid var(--border);
}
.panel-head h2{ font-size:14px; font-weight:700; }
.panel-head a{ font-size:12px; font-weight:600; }
.panel-body{ padding:16px 18px; }

/* Monitor rows */
.monitor-row{
  display:grid; grid-template-columns:18px 1.7fr 150px 80px 150px 100px 150px;
  align-items:center; gap:14px;
  padding:13px 18px; border-bottom:1px solid var(--border);
  transition:background .1s; animation:rowIn .35s var(--ease) both;
}
@keyframes rowIn{ from{ opacity:0; transform:translateY(3px);} to{ opacity:1; transform:translateY(0);} }
.monitor-row:last-child{ border-bottom:none; }
.monitor-row:hover{ background:var(--surface-2); }
.monitor-row.head{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-3);
  font-weight:700; padding-top:10px; padding-bottom:10px; background:var(--surface-2);
  animation:none;
}
.monitor-row.maintenance{ opacity:.6; }

.pulse-dot{ position:relative; width:9px; height:9px; border-radius:50%; }
.pulse-dot.up{ background:var(--up); }
.pulse-dot.down{ background:var(--down); }
.pulse-dot.pending{ background:var(--text-3); }
.pulse-dot.up::after, .pulse-dot.down::after{
  content:''; position:absolute; inset:-5px; border-radius:50%;
  border:1.5px solid currentColor; opacity:0; animation:pulseRing 2.2s ease-out infinite;
}
.pulse-dot.up::after{ color:var(--up); }
.pulse-dot.down::after{ color:var(--down); animation-duration:1.1s; }
@keyframes pulseRing{ 0%{ transform:scale(.5); opacity:.55;} 100%{ transform:scale(2.1); opacity:0;} }

.mon-info{ min-width:0; }
.mon-name{ font-size:13.5px; font-weight:600; color:var(--text); display:block; }
.mon-name:hover{ text-decoration:underline; }
.mon-url{ font-size:11.5px; color:var(--text-3); margin-top:1px; display:flex; align-items:center; gap:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.check-type-chip{
  font-size:9.5px; font-weight:700; letter-spacing:.03em; color:var(--text-2);
  background:var(--surface-2); border:1px solid var(--border); border-radius:5px;
  padding:1px 5px; flex-shrink:0;
}
.badge{ font-size:11px; font-weight:700; padding:3px 8px; border-radius:20px; display:inline-block; }
.badge.badge-up{ background:var(--up-soft); color:var(--up); }
.badge.badge-down{ background:var(--down-soft); color:var(--down); }
.badge.badge-pending{ background:rgba(255,255,255,.06); color:var(--text-3); }
.badge.badge-changed{ background:var(--warn-soft); color:var(--warn); margin-left:6px; }
.rt-val{ font-size:12.5px; color:var(--text-2); font-family:'JetBrains Mono', monospace; }
.last-check{ font-size:11.5px; color:var(--text-3); }

.uptime-bar{ display:flex; gap:2px; align-items:center; height:20px; }
.uptime-bar .bar{ flex:1; min-width:2px; border-radius:2px; background:var(--up); height:100%; }
.uptime-bar .bar.down{ background:var(--down); }
.uptime-bar .bar.nodata{ background:var(--border); }

.row-actions{ display:flex; gap:4px; justify-content:flex-end; }
.icon-action{
  width:28px; height:28px; border-radius:7px; border:1px solid var(--border);
  background:var(--surface); cursor:pointer; font-size:13px; color:var(--text-2);
  display:flex; align-items:center; justify-content:center; transition:background .1s;
}
.icon-action:hover{ background:var(--surface-2); }
.icon-action-danger:hover{ background:var(--down-soft); color:var(--down); border-color:rgba(229,72,77,.3); }

.empty-state{ padding:28px 18px; text-align:center; color:var(--text-3); font-size:13px; }

/* List items (incidents/content-change side panels) */
.list-item{ padding:12px 18px; border-bottom:1px solid var(--border); display:flex; gap:10px; }
.list-item:last-child{ border-bottom:none; }
.list-icon{
  width:26px; height:26px; border-radius:7px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700;
}
.list-icon.down{ background:var(--down-soft); color:var(--down); }
.list-icon.warn{ background:var(--warn-soft); color:var(--warn); }
.list-icon.up-icon{ background:var(--up-soft); color:var(--up); }
.list-title{ font-size:12.5px; font-weight:600; line-height:1.4; }
.list-meta{ font-size:11px; color:var(--text-3); margin-top:2px; }
.time-sub{ display:block; font-size:11px; color:var(--text-3); margin-top:2px; }

/* ---------- Incidents page ---------- */
.incident-row{ display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--border); }
.incident-row:last-child{ border-bottom:none; }
.incident-body{ flex:1; min-width:0; }

/* ---------- Content changes ---------- */
.change-card{ padding:16px 18px; border-bottom:1px solid var(--border); }
.change-card:last-child{ border-bottom:none; }
.change-card-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:10px; gap:10px; }
.change-event{ padding:10px 0; border-bottom:1px solid var(--border); }
.change-event:last-child{ border-bottom:none; }

.diff-box{
  background:#0E1016; border-radius:10px; padding:14px 16px;
  font-family:'JetBrains Mono', monospace; font-size:12.5px; line-height:1.9;
  color:#C7C9DA; overflow-x:auto; white-space:pre-wrap; word-break:break-word;
}
.diff-line.add{ background:rgba(23,166,115,.18); color:#6EE7B0; border-radius:3px; }
.diff-line.rem{ background:rgba(229,72,77,.18); color:#FCA5A5; border-radius:3px; text-decoration:line-through; }
.diff-line.ctx{ color:#8B90A3; }

/* ---------- Modal / forms ---------- */
.modal-overlay{
  position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  background:rgba(5,6,10,.65); backdrop-filter:blur(3px); padding:1rem;
}
.modal-overlay[hidden]{ display:none; }
.modal-card{
  width:100%; max-width:380px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:1.4rem; box-shadow:0 20px 60px rgba(0,0,0,.5), var(--shadow);
  animation:modalIn .16s var(--ease);
}
.modal-card-wide{ max-width:600px; max-height:88vh; overflow-y:auto; }
@keyframes modalIn{ from{ opacity:0; transform:translateY(6px) scale(.98);} to{ opacity:1; transform:translateY(0) scale(1);} }
.modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.modal-head h3{ font-size:16px; font-weight:700; }
.modal-message{ margin:0 0 1.25rem; font-size:.95rem; line-height:1.5; }
.modal-actions{ display:flex; justify-content:flex-end; gap:.6rem; margin-top:14px; }
.form-error{ background:var(--down-soft); color:var(--down); border-radius:8px; padding:10px 12px; font-size:13px; margin-bottom:14px; }

.type-tabs{ display:flex; gap:6px; margin-bottom:16px; background:var(--surface-2); border:1px solid var(--border); border-radius:9px; padding:3px; }
.type-tab{ flex:1; text-align:center; font-size:12.5px; font-weight:600; padding:7px 10px; border-radius:7px; cursor:pointer; color:var(--text-2); }
.type-tab.active{ background:var(--border); color:var(--text); box-shadow:var(--shadow); }
.type-tab input{ display:none; }

.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.type-field-group{ grid-column:1 / -1; }
.type-field-group .form-grid{ margin:0; }
.type-field{ grid-column:1 / -1; }
.form-field{ display:flex; flex-direction:column; gap:5px; font-size:12.5px; font-weight:600; color:var(--text-2); }
.form-field input, .form-field select{
  padding:8px 10px; background:var(--surface-2); border:1px solid var(--border); border-radius:8px;
  color:var(--text); font-size:13px; font-family:inherit; font-weight:400;
  transition:border-color .15s, box-shadow .15s;
}
.form-field input:focus, .form-field select:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(91,95,239,.15);
}
.checkbox-field{ flex-direction:row; align-items:center; gap:8px; }
.checkbox-field input{ width:auto; }

.site-form{ display:flex; flex-direction:column; }

/* ---------- Buttons (small) ---------- */
.btn-small{
  padding:.45rem .8rem; font-size:.8rem; font-weight:600; color:var(--text);
  background:var(--surface); border:1px solid var(--border); border-radius:8px; cursor:pointer; font-family:inherit;
}
.btn-small:hover{ background:var(--surface-2); }
.btn-danger{ background:var(--down); color:#fff; border-color:var(--down); }
.btn-danger:hover{ filter:brightness(1.08); background:var(--down); }

/* ---------- Toggle switch ---------- */
.toggle{
  display:inline-block; width:34px; height:20px; border-radius:20px; background:var(--border);
  position:relative; cursor:pointer; transition:background .18s var(--ease); flex-shrink:0;
}
.toggle::after{
  content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .18s var(--ease);
}
.toggle.on{ background:var(--accent); }
.toggle.on::after{ transform:translateX(14px); }
.maintenance-toggle{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--text-2); margin-right:6px; }

/* ---------- Site detail ---------- */
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.25rem 1.5rem; box-shadow:var(--shadow); margin-bottom:18px; }
.site-detail-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.site-detail-header h2{ font-size:18px; font-weight:700; }
.url-cell{ color:var(--text-2); font-family:'JetBrains Mono', monospace; font-size:.82rem; word-break:break-all; margin-top:4px; display:flex; align-items:center; gap:8px; }
.interval-note{ color:var(--text-3); font-size:.85rem; margin-top:6px; }
.detail-actions{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.stat-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:18px; }
.change-events ul{ list-style:none; }
.error-cell{ color:var(--down); font-size:.78rem; }
.empty{ color:var(--text-3); font-style:italic; }
.sparkline-big{ width:100%; height:80px; }
.sparkline-big path{ fill:none; stroke:var(--accent); stroke-width:1.8; }

table.sites-table{ width:100%; min-width:560px; border-collapse:collapse; }
.table-wrap{ overflow-x:auto; }
.sites-table th, .sites-table td{ padding:.7rem .9rem; text-align:left; border-bottom:1px solid var(--border); font-size:.85rem; white-space:nowrap; }
.sites-table th{ color:var(--text-3); font-weight:600; text-transform:uppercase; font-size:.68rem; letter-spacing:.05em; background:var(--surface-2); }
.sites-table tbody tr:hover{ background:var(--surface-2); }
.sites-table tr:last-child td{ border-bottom:none; }

/* ---------- Status page (public) ---------- */
.public-body{ background:var(--bg); }

/* ---------- Auth pages (login / signup / forgot / reset) ----------
   Dark, matching the app's own sidebar (--sidebar/--sidebar-line) rather
   than the light content area — the same relationship the app already
   has once logged in: a near-black frame around white cards. */
.auth-body{
  position:relative; overflow:hidden; isolation:isolate;
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(circle at 15% 12%, rgba(91,95,239,.25), transparent 42%),
    radial-gradient(circle at 85% 82%, rgba(167,139,250,.2), transparent 45%),
    linear-gradient(160deg, #14162A 0%, var(--sidebar) 55%, #0A0B12 100%);
}
.auth-bg{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.auth-grid{
  position:absolute; inset:-10%; opacity:.5;
  background-image:
    linear-gradient(rgba(139,143,245,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139,143,245,.08) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(circle at 50% 40%, #000 0%, transparent 72%);
  animation:authGridPan 40s linear infinite;
}
@keyframes authGridPan{ from{ transform:translate(0,0); } to{ transform:translate(42px,42px); } }
.auth-blob{
  position:absolute; border-radius:50%; filter:blur(80px); opacity:.5; mix-blend-mode:screen;
  animation:authBlobFloat 16s var(--ease) infinite alternate;
}
.auth-blob-1{
  width:440px; height:440px; top:-150px; left:-130px;
  background:radial-gradient(circle at 30% 30%, var(--accent-2), var(--accent) 70%);
  animation-delay:0s;
}
.auth-blob-2{
  width:400px; height:400px; bottom:-170px; right:-110px;
  background:radial-gradient(circle at 60% 40%, #C9A6F5, #A78BFA 70%);
  animation-delay:-5s;
}
.auth-blob-3{
  width:300px; height:300px; bottom:12%; left:10%;
  background:radial-gradient(circle at 50% 50%, #4FD8B8, var(--accent-2) 70%);
  opacity:.35;
  animation-delay:-10s;
}
@keyframes authBlobFloat{
  0%{ transform:translate(0, 0) scale(1); }
  100%{ transform:translate(30px, -34px) scale(1.14); }
}
.auth-shell{ position:relative; z-index:1; width:100%; max-width:380px; padding:24px; animation:authShellIn .5s var(--ease) both; }
@keyframes authShellIn{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:translateY(0);} }
.auth-brand{ display:flex; align-items:center; gap:10px; justify-content:center; margin-bottom:20px; }
.auth-brand .brand-mark{
  width:30px; height:30px; border-radius:9px;
  background:linear-gradient(135deg, var(--accent), #A78BFA);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 18px -2px rgba(139,143,245,.65);
}
.auth-brand .brand-name{ font-size:15px; font-weight:700; color:#fff; letter-spacing:-.01em; }
.auth-card{
  max-width:none; width:100%; box-sizing:border-box;
  backdrop-filter:blur(16px); background:rgba(18,20,31,.88); border:1px solid var(--border);
  box-shadow:0 0 0 1px rgba(255,255,255,.04), 0 30px 70px -20px rgba(0,0,0,.6), 0 0 60px -12px rgba(91,95,239,.35);
  animation:authCardIn .55s .05s var(--ease) both;
}
@keyframes authCardIn{ from{ opacity:0; transform:translateY(18px) scale(.98);} to{ opacity:1; transform:translateY(0) scale(1);} }
.auth-card h1{ font-size:18px; font-weight:700; margin-bottom:4px; }
.auth-card .auth-subtitle{ font-size:13px; color:var(--text-2); margin-bottom:18px; }
.auth-card .form-field{ margin-bottom:14px; }
.auth-card .btn-primary{ width:100%; justify-content:center; margin-top:4px; }
.auth-card .btn-primary:hover{ transform:translateY(-1px); box-shadow:0 8px 20px -6px rgba(91,95,239,.5); }
.auth-card .auth-links{ margin-top:16px; text-align:center; font-size:12.5px; color:var(--text-2); display:flex; flex-direction:column; gap:8px; }
.auth-card .auth-links a{ color:var(--accent); font-weight:600; }
.auth-success{ background:var(--up-soft); color:var(--up); border-radius:8px; padding:10px 12px; font-size:13px; margin-bottom:14px; }

/* ---------- API key reveal (Settings) ---------- */
.apikey-reveal p{ margin-bottom:8px; }
.apikey-reveal-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.apikey-reveal-row code{ background:rgba(0,0,0,.25); color:var(--text); border-radius:6px; padding:6px 10px; font-size:12.5px; word-break:break-all; }
@media (prefers-reduced-motion: reduce){
  .auth-blob{ animation:none; }
  .auth-grid{ animation:none; }
  .auth-shell{ animation:none; }
  .auth-card{ animation:none; }
}
.status-shell{ max-width:640px; margin:0 auto; padding:48px 20px 60px; }
.status-hero{ text-align:center; padding:32px 20px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow); margin-bottom:24px; }
.status-hero-icon{
  width:52px; height:52px; border-radius:50%; margin:0 auto 14px; font-size:22px; font-weight:800;
  display:flex; align-items:center; justify-content:center; background:var(--up); color:#fff;
}
.status-hero[data-all-up="false"] .status-hero-icon{ background:var(--warn); }
.status-hero h1{ font-size:19px; font-weight:700; }
.status-hero p{ color:var(--text-3); font-size:13px; margin-top:6px; }
.status-list{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); }
.status-row{ padding:14px 18px; border-bottom:1px solid var(--border); }
.status-row:last-child{ border-bottom:none; }
.status-row-head{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.status-row-name{ font-size:13.5px; font-weight:600; flex:1; }
.status-row-pct{ font-size:12.5px; color:var(--text-2); }
.status-footer{ text-align:center; color:var(--text-3); font-size:12px; margin-top:24px; }

/* ---------- Notifications ---------- */
.channel-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; margin-bottom:18px; }
.channel-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); }
.channel-card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.channel-card-head h3{ font-size:14px; font-weight:700; }
.channel-desc{ font-size:12px; color:var(--text-3); margin-bottom:12px; line-height:1.5; }
.channel-card .btn-small[target="_blank"]{ display:inline-flex; margin-bottom:12px; text-decoration:none; }
.channel-form .form-field{ margin-bottom:10px; }
.channel-actions{ display:flex; gap:8px; margin-top:8px; }

/* ---------- Settings ---------- */
.config-list{ display:grid; grid-template-columns:200px 1fr; gap:10px 16px; font-size:13px; }
.config-list dt{ color:var(--text-3); font-weight:600; }
.config-list dd{ color:var(--text); }

/* ---------- Toast ---------- */
#toast-root{ position:fixed; bottom:20px; right:20px; z-index:200; display:flex; flex-direction:column; gap:8px; }
.toast{
  background:#1C1E2B; color:#fff; border:1px solid var(--border);
  padding:10px 16px; border-radius:8px; font-size:13px; font-weight:600;
  box-shadow:0 10px 30px rgba(0,0,0,.4); animation:toastIn .2s var(--ease);
}
@keyframes toastIn{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:translateY(0);} }

@media (max-width: 980px){
  .shell{ grid-template-columns:1fr; }
  .mobile-menu-btn{ display:flex; }
  /* Off-canvas drawer: fixed and pushed off the left edge by default, so
     it overlays content instead of taking part in .shell's grid — opening
     it never reflows the page underneath. */
  .sidebar{
    position:fixed; top:0; left:0; bottom:0; width:260px; z-index:60;
    transform:translateX(-100%); transition:transform .22s var(--ease);
  }
  .sidebar.open{ transform:translateX(0); box-shadow:0 0 40px rgba(0,0,0,.3); }
  .sidebar-backdrop{
    display:block; position:fixed; inset:0; z-index:55;
    background:rgba(15,16,26,.45); opacity:0; pointer-events:none;
    transition:opacity .22s var(--ease);
  }
  .sidebar-backdrop.open{ opacity:1; pointer-events:auto; }
  /* The hamburger button eats into the topbar's already-tight width;
     without this the "+ Add monitor" label wraps to two lines and pushes
     the search box down to nothing. Icon-only keeps it on one line. */
  .topbar{ gap:8px; padding:14px 16px; }
  .btn-primary .btn-label{ display:none; }
  .btn-primary{ padding:8px 10px; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .grid-main{ grid-template-columns:1fr; }
  /* 3 tracks for the columns that stay visible (dot / name-url / status);
     row-actions is placed explicitly onto its own full-width row below —
     left to grid auto-placement, it wrapped into the 16px dot column,
     squeezing all 4 buttons into a sliver and clipping most of them. */
  .monitor-row{ grid-template-columns:16px 1fr auto; row-gap:8px; }
  .monitor-row > *:nth-child(3), .monitor-row > *:nth-child(4), .monitor-row > *:nth-child(6){ display:none; }
  .monitor-row:not(.head) > *:nth-child(7){ grid-column:1 / -1; justify-self:end; }
  .monitor-row.head > *:nth-child(7){ display:none; }
  .form-grid{ grid-template-columns:1fr; }
}