/* ==================================================
   Gaya global + tema terang/gelap (default: gelap)
   ================================================== */
:root{
  --bg: #0b0f17;
  --panel: #111827;
  --panel-2:#0f1624;
  --text:#e6e6ea;
  --muted:#9aa3b2;
  --accent:#60a5fa;
  --accent-2:#22d3ee;
  --border:#1f2937;
  --danger:#ef4444;
  --success:#22c55e;
  --warning:#f59e0b;
  --chip:#1f2937;
  --chip-border:#2b3545;
  --link:#93c5fd;
  --shadow: 0 10px 30px rgba(0,0,0,.4);
}
/* Tema terang */
html[data-theme="light"]{
  --bg: #f7fafc;
  --panel: #ffffff;
  --panel-2:#f2f6ff;
  --text:#0f172a;
  --muted:#475569;
  --accent:#2563eb;
  --accent-2:#06b6d4;
  --border:#e2e8f0;
  --danger:#dc2626;
  --success:#16a34a;
  --warning:#d97706;
  --chip:#f1f5f9;
  --chip-border:#e2e8f0;
  --link:#1d4ed8;
  --shadow: 0 10px 30px rgba(0,0,0,.06);
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0; background: var(--bg); color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  line-height:1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a{ color: var(--link); text-decoration: none; }
a:hover{ text-decoration: underline; }

.container{ max-width: 1200px; margin: 0 auto; padding: 1rem; }

/* Topbar */
.topbar{
  background: linear-gradient(135deg, var(--panel), var(--panel-2));
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
  position: sticky; top: 0; z-index: 10;
}
.topbar-inner{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.75rem 1rem; }
.brand{ display:flex; align-items:center; gap:.6rem; font-weight:700; letter-spacing:.2px; }
.brand .pill{
  background: rgba(96,165,250,.14); color: var(--accent);
  border: 1px solid rgba(96,165,250,.35); padding:.15rem .5rem; border-radius:.5rem; font-size:.85rem;
}
.quick-actions{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; gap:.5rem; border:1px solid var(--border);
  background: #0e1421; color: #eaf2ff; padding:.45rem .75rem; border-radius:.55rem; font-weight:600;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
}
html[data-theme="light"] .btn{ background:#ffffff; color:#0f172a; }
.btn:hover{ background:#0d1220; text-decoration:none; }
html[data-theme="light"] .btn:hover{ background:#f8fafc; }
.btn-accent{ background: linear-gradient(135deg, #1e293b, #0b1220); border-color:#2b3650; }
html[data-theme="light"] .btn-accent{ background: linear-gradient(135deg, #eff6ff, #ffffff); border-color:#cbd5e1; }
.btn-ghost{ background: transparent; }
.btn .icon{ font-size:1.05rem; }
.hide-xs{ display:inline; }
@media (max-width:520px){ .hide-xs{ display:none; } }

/* Hero & cards */
.hero{ padding: 1.25rem 0 1rem; }
.hero h1{ margin:.2rem 0 .25rem; font-size: clamp(1.25rem, 2.2vw, 1.8rem); }
.hero .sub{ color: var(--muted); }

.info-cards{ display:grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; margin-top: 1rem; }
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.0));
  border:1px solid var(--border); border-radius:.9rem; padding:1rem; box-shadow: var(--shadow);
}
.card h3{ margin:.1rem 0 .6rem; font-size:1rem; color:#cbd5e1; }
html[data-theme="light"] .card h3{ color:#334155; }
.card p{ margin:.25rem 0; }

.span-12{ grid-column: span 12; }
.span-6{ grid-column: span 6; }
@media (max-width: 900px){
  .span-6{ grid-column: span 12; }
}

.clock{ display:flex; align-items: baseline; gap:.5rem; font-variant-numeric: tabular-nums; }
.clock .time{ font-size: 2rem; font-weight:700; letter-spacing:.5px; }
.clock .ms{ font-size: 1.15rem; opacity:.9; }
.clock .tz{ color: var(--muted); font-weight:600; }

/* Domain chips */
.domain-chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.5rem; }
.chip{
  background: var(--chip); border:1px solid var(--chip-border);
  padding:.35rem .55rem; border-radius:999px; font-size:.9rem; display:inline-flex; align-items:center; gap:.35rem;
}
.chip-copy, .btn-icon{
  background: transparent; border:1px dashed var(--chip-border); color: var(--muted);
  border-radius:.4rem; padding:.1rem .35rem; cursor:pointer;
}
.chip-copy:hover, .btn-icon:hover{ color: var(--text); border-style: solid; }

/* Toolbar / search */
.toolbar{ margin-top:.5rem; }
.searchbar{ display:flex; align-items:center; gap:.6rem; margin-top:.5rem; }
.searchbar input[type="search"]{
  flex:1; min-width: 200px; max-width: 700px; padding:.65rem .85rem; border-radius:.65rem;
  border:1px solid var(--border); background:#0b1220; color:var(--text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}
html[data-theme="light"] .searchbar input[type="search"]{ background:#ffffff; }
.searchbar input::placeholder{ color:#6b7280; }

/* Table */
.table-wrap{ margin-top:1rem; border:1px solid var(--border); border-radius:.9rem; overflow:auto; box-shadow: var(--shadow); }
table{ width:100%; border-collapse: collapse; min-width: 760px; }
thead th{
  position: sticky; top: 0; z-index: 2; user-select: none; cursor: pointer;
  background: #0e1726; color:#cbd5e1; font-weight:700; text-align:left;
  border-bottom:1px solid var(--border); padding:.7rem .65rem;
}
html[data-theme="light"] thead th{ background:#f1f5f9; color:#0f172a; }
thead th.sort-asc::after{ content:" ▲"; font-size:.85em; }
thead th.sort-desc::after{ content:" ▼"; font-size:.85em; }
tbody td{ border-top:1px solid var(--border); padding:.6rem .65rem; vertical-align: top; }
tbody tr:hover{ background: rgba(148,163,184,.08); }
code{
  background:#0f172a; border:1px solid #1f2a44; padding:.12rem .35rem; border-radius:.35rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
html[data-theme="light"] code{ background:#f1f5f9; border-color:#e2e8f0; }

.badge{ display:inline-block; padding:.15rem .5rem; border-radius:.45rem; font-size:.78rem; border:1px solid var(--border); }
.badge.true{ background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.35); color:#16f19a; }
.badge.false{ background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.35); color:#ffb4b4; }

/* Footer */
.footer{ margin: 1rem 0 2rem; color: var(--muted); font-size:.95rem; }

/* Utilities */
.kpi{ display:flex; gap:.5rem; flex-wrap:wrap; }
.kpi .item{ background:#0c1322; border:1px solid var(--border); padding:.5rem .6rem; border-radius:.6rem; }
html[data-theme="light"] .kpi .item{ background:#ffffff; }
.visually-hidden{ position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px, 1px, 1px, 1px); white-space:nowrap; }

/* Toast */
.toast{
  position: fixed; left:50%; transform: translateX(-50%) translateY(20px);
  bottom: 24px; background: rgba(0,0,0,.8); color:#fff; padding:.5rem .75rem; border-radius:.5rem;
  opacity:0; transition: all .2s ease; z-index: 50; font-size:.9rem;
}
html[data-theme="light"] .toast{ background: rgba(15,23,42,.9); }
.toast.show{ opacity:1; transform: translateX(-50%) translateY(0); }