:root{
  --bg:#0d0f14;
  --bg-2:#121520;
  --bg-3:#171b28;
  --ink:#e7ebf3;
  --ink-dim:#aab3c5;
  --muted:#8b94a8;

  --border:#232836;
  --shadow:rgba(0,0,0,.35);

  --btn:#4e5bce;         /* primary (purple-ish) */
  --btn-ink:#fff;

  --purple:#7c4dff;
  --green:#25c08a;
  --red:#ff5252;
  --amber:#ffb020;
  --blue:#3aa0ff;
  --teal:#17b1b9;
  --indigo:#5468ff;
  --gray:#657091;

  --chip-green:#23c483;
  --chip-red:#ff4d4d;

  --card-radius:12px;
  --gap:14px;

  --table-head:#1b2130;
  --table-row:#121826;

  --accent:#8a7eff;
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font:14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  background:linear-gradient(180deg, #0c0f16 0%, #0b0e14 100%);
}

/* Links (rare in app) */
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* Typography helpers */
h1,h2,h3{margin:0 0 10px}
h3{font-size:15px;font-weight:700;color:#fff}
.muted{color:var(--muted)}
.mono{font:12px/1.4 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}
.nowrap{white-space:nowrap}

/* Layout: Sidebar + Main */
.sidebar{
  position:fixed; inset:0 auto 0 0; width:240px;
  background:linear-gradient(180deg,#171b28,#141827);
  border-right:1px solid var(--border);
  padding:16px 14px;
  display:flex; flex-direction:column; gap:14px;
  z-index:10;
}
.side-footer{
  margin-top:auto; color:var(--muted); font-size:12px; text-align:center;
  padding-top:8px; border-top:1px dashed var(--border);
}
.brand{
  background:linear-gradient(90deg,#ff3c3c,#ff6e6e);
  color:#fff; font-weight:800; letter-spacing:.6px;
  padding:12px 10px; border-radius:10px; text-align:center;
  text-transform:uppercase; box-shadow:0 4px 16px rgba(255,82,82,.25);
}
.brand span{margin-left:6px}
.nav{display:flex; flex-direction:column; gap:10px}
.nav .btn{
  display:block; width:100%;
  text-align:left; font-weight:700;
  border:0; border-radius:10px;
  padding:11px 12px; cursor:pointer;
  transition:transform .05s ease, filter .2s ease;
  color:#fff; text-decoration:none;
}
.nav .btn:hover{filter:brightness(1.06)}
.nav .btn:active{transform:translateY(1px)}
.nav .btn.active{outline:2px solid rgba(255,255,255,.18)}

.main{
  margin-left:240px;
  min-height:100vh;
  padding:18px;
}

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:9;
  background:linear-gradient(180deg, rgba(18,21,32,.86), rgba(18,21,32,.72));
  backdrop-filter: blur(6px);
  border:1px solid var(--border);
  box-shadow:0 8px 24px var(--shadow);
  padding:10px 14px; margin-bottom:14px;
  display:flex; align-items:center; justify-content:space-between;
  border-radius:12px;
}
.topbar .title{font-weight:800; letter-spacing:.2px}

/* Cards */
.card{
  background:linear-gradient(180deg,#151a28,#121827);
  border:1px solid var(--border);
  border-radius:var(--card-radius);
  box-shadow:0 10px 24px var(--shadow);
  padding:14px;
}

/* Add consistent vertical spacing between stacked cards */
.panel .card { margin-bottom: var(--gap); }

.card.wide{grid-column:1 / -1}

/* Grid helpers */
.grid{display:grid; gap:var(--gap)}
.grid.cols-2{grid-template-columns:1fr 1fr}
.grid.cols-3{grid-template-columns:1.2fr 1fr 1fr}

@media (max-width:1200px){
  .grid.cols-3{grid-template-columns:1fr}
}
@media (max-width:920px){
  .grid.cols-2{grid-template-columns:1fr}
  .sidebar{width:220px}
  .main{margin-left:220px}
}
@media (max-width:680px){
  .sidebar{position:static; width:auto; border-right:0; border-bottom:1px solid var(--border)}
  .main{margin-left:0}
}

 #risk-card { align-self: start; }
 /* Fixed width/length, never stretch with neighbor cards */
 #panel-settings #risk-card {
   width: 360px;
   max-width: 360px;
   justify-self: start;   /* right edge is shorter than wider cards */
}

/* Panels */
.panel{display:none}
.panel.show{display:block}

/* Buttons – solid colors only */
.btn{
  border:0; color:#fff; font-weight:700; letter-spacing:.2px;
  padding:9px 12px; border-radius:9px; cursor:pointer;
  transition: transform .04s ease, filter .15s ease;
}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px)}

.btn.primary{background:var(--btn)}
.btn.success{background:var(--green)}
.btn.danger{background:var(--red)}
.btn.warning{background:var(--amber); color:#1a1200}
.btn.info{background:var(--teal)}
.btn.blue{background:var(--blue)}
.btn.red{background:var(--red)}
.btn.green{background:var(--green)}
.btn.purple{background:var(--purple)}
.btn.muted{background:var(--gray)}

.btn-group{display:flex; gap:10px; align-items:center}
.inline{display:flex; align-items:center; gap:10px}

/* Button text perfectly centered */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1; /* avoid tall line-height pushing text up */
}

/* Domains → Actions layout (2×2 grid, compact “cute” buttons) */
.domain-actions{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 side-by-side */
  gap:8px;                    /* tight + tidy */
  align-content:start;
  padding-bottom:6px;         /* keep a little breathing room */
}

/* Make the buttons compact & centered without widening the cell */
.domain-actions .btn{
  width:100%;                 /* fill each grid cell, not the whole column */
  padding:8px 10px;           /* smaller = cute */
  font-size:12px;
  font-weight:700;
  border-radius:12px;         /* a bit more rounded = cute */
  white-space:nowrap;         /* keep labels on one line */
  justify-content:center;     /* ensure perfect centering */
}


/* Form controls */
.field{display:flex; flex-direction:column; gap:6px}
label{color:var(--ink-dim); font-size:12px}
input[type="text"],input[type="number"],input[type="password"],input[type="date"],textarea,select{
  background:var(--bg-3); color:var(--ink);
  border:1px solid var(--border);
  border-radius:8px; padding:9px 10px;
  outline:none;
}
textarea{min-height:110px; resize:vertical}
input::placeholder, textarea::placeholder{color:#7e879b}

/* Switch + sound indicator */
.switch{position:relative; display:inline-flex; align-items:center; gap:8px; cursor:pointer}
.switch input{appearance:none; width:46px; height:24px; border-radius:24px; background:#2a3042; position:relative; outline:none; border:1px solid var(--border); transition:background .2s}
.switch input:checked{background:#1e7f4f}
.switch input::after{
  content:""; position:absolute; width:18px; height:18px; top:2.5px; left:3px;
  background:#fff; border-radius:50%; transition:left .2s;
}
.switch input:checked::after{left:24px}
.indicator{
  margin-left:6px; font-size:12px; font-weight:800; padding:3px 8px; border-radius:999px;
  border:1px solid var(--border);
}
.indicator.on{background:#113d2a; color:#a1f3c9}
.indicator.off{background:#3a1820; color:#ffb8c0}

/* KPI grid */
.kpis{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
}
.kpi{
  background:linear-gradient(180deg,#111725,#0f1420);
  border:1px solid var(--border);
  border-radius:10px; padding:12px;
  display:flex; flex-direction:column; gap:6px;
}
.kpi .t{color:#9fb0d0; font-size:12px}
.kpi .v{font-size:22px; font-weight:900}
.kpi .s{color:#7c89a3; font-size:12px}

@media (max-width:920px){
  .kpis{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .kpis{grid-template-columns:1fr}
}

/* Charts */
.chart{
  width:100%;
  height:300px;
  display:block;
  border-radius:8px;
  background:linear-gradient(180deg,#0e1422,#0d1220);
  border:1px solid var(--border);
}

/* Chips legend */
.legend{display:flex; gap:12px; align-items:center; margin-top:8px}

.chip.green{background:#0f2a22}
.chip.red{background:#2a1212}
.dot{display:inline-block; width:9px; height:9px; border-radius:50%; background:currentColor}
.chip.green .dot{color:var(--chip-green)}
.chip.red .dot{color:var(--chip-red)}
.chip.solid { color: #fff; }
.chip.solid.green { background:#16a34a; border-color:transparent; }
.chip.solid.red   { background:#ef4444; border-color:transparent; }
.chip.solid.amber { background:#f59e0b; border-color:transparent; color:#111; }
.chip.solid.purple { background:#7c3aed; border-color:transparent; }

/* Eye in orange to stand out */
.btn.info.eye { background:#f59e0b; color:#111; }

/* QR as solid purple */
.btn.qr { background:#7c3aed; color:#fff; }

/* Narrower “Test” buttons in Sounds page (~1/3 width each) */
/* 7 distinct solid colors for each Test button */
/* 1) Human Visitor */
.snd-test[data-kind="allow"] { background:#10b981; color:#111; }

/* 2) Blocked Bot */
.snd-test[data-kind="block"] { background:#e11d48; color:#fff; }

/* 3) Manual Ungrant */
.snd-test[data-kind="manual"] { background:#f59e0b; color:#111; }

/* 4) Mobile Visitor (note capital M to match your current CSS) */
.snd-test[data-kind="Mobile"] { background:#10b981; color:#111; }

/* 5) Country Alert */
.snd-test[data-kind="country"] { background:#7c3aed; color:#fff; } 

/* 6) ASN Visitor */
.snd-test[data-kind="asn"] { background:#06b6d4; color:#111; }

/* 7) Risk Alert */
.snd-test[data-kind="risk"] { background:#ef4444; color:#fff; }

/* 8) Country + ASN */
.snd-test[data-kind="country-asn"] { background:#6366f1; color:#fff; } 

/* 9) Country + Manual */
.snd-test[data-kind="country-manual"] { background:#7c3aed; color:#fff; } 

/* 10) ASN + Manual */
.snd-test[data-kind="asn-manual"] { background:#f97316; color:#111; } /* orange */

/* 11) Country + ASN + Manual */
.snd-test[data-kind="country-asn-manual"] { background:#06b6d4; color:#111; }

.badge { display:inline-block; padding:4px 10px; border-radius:999px; font-weight:700; color:#fff; }
.badge.green { background:#16a34a; } /* Avail */
.badge.red   { background:#dc2626; } /* Bot */

.status-reasons{margin-top:6px; font-size:12px; color:#cbd5e1; line-height:1.35}
.status-reasons .kv{display:flex; gap:6px; flex-wrap:wrap}
.status-reasons .kv span{background:transparent; padding:0; border-radius:0}

/* Tables */
.table-wrap{
  width:100%;
  overflow-x:auto;
  background:linear-gradient(180deg,#0f1421,#0d121d);
  border:1px solid var(--border);
  border-radius:10px;
}

/* === Compact tables (Visitors + Recent) — no horizontal scroll === */

/* === Column width tuning — Visitors + Recent Activity (no table width change) === */
/* Columns: 1 chk, 2 Date/Time, 3 IP, 4 Country/City, 5 ISP/ASN, 6 Device/Version, 7 Status, 8 Actions */

/* 1) Slightly more room for Date/Time so 📅 + date stay on one line */
#panel-dashboard table thead th:nth-child(2),
#panel-dashboard table tbody td:nth-child(2),
#panel-visitors  table thead th:nth-child(2),
#panel-visitors  table tbody td:nth-child(2) {
  width: 16ch; /* small bump only */
}

/* 2) Slight bump for Device/Version so browser + version fit on one pill */
#panel-dashboard table thead th:nth-child(3),
#panel-dashboard table tbody td:nth-child(3),
#panel-visitors  table thead th:nth-child(3),
#panel-visitors  table tbody td:nth-child(3) {
  width: 27ch; /* subtle, keeps table width intact */
}

/* 2) Slight bump for Device/Version so browser + version fit on one pill */
#panel-dashboard table thead th:nth-child(4),
#panel-dashboard table tbody td:nth-child(4),
#panel-visitors  table thead th:nth-child(4),
#panel-visitors  table tbody td:nth-child(4) {
  width: 38ch; /* subtle, keeps table width intact */
}

/* 2) Slight bump for Device/Version so browser + version fit on one pill */
#panel-dashboard table thead th:nth-child(5),
#panel-dashboard table tbody td:nth-child(5),
#panel-visitors  table thead th:nth-child(5),
#panel-visitors  table tbody td:nth-child(5) {
  width: 30ch; /* subtle, keeps table width intact */
}

/* 2) Slight bump for Device/Version so browser + version fit on one pill */
#panel-dashboard table thead th:nth-child(6),
#panel-dashboard table tbody td:nth-child(6),
#panel-visitors  table thead th:nth-child(6),
#panel-visitors  table tbody td:nth-child(6) {
  width: 200px; /* Device / Version fits on one line */
}

/* 3) Reduce Status width to free the space above */
#panel-dashboard table thead th:nth-child(7),
#panel-dashboard table tbody td:nth-child(7),
#panel-visitors  table thead th:nth-child(7),
#panel-visitors  table tbody td:nth-child(7) {
  width: 32ch; /* trims extra air in Status */
}

#panel-dashboard table,
#panel-visitors  table {
  /* Let these two tables shrink within the card; do not force wide min-width */
  min-width: 0 !important;
}

/* Allow text to wrap (IPs, ASNs, devices, UAs, etc.) */
#panel-dashboard th, #panel-dashboard td,
#panel-visitors  th, #panel-visitors  td {
  white-space: normal;      /* permit wrapping */
  word-break: break-word;   /* break long tokens so they don't push width */
}

/* Chips inside cells: keep one per line, but allow a long chip to wrap internally */
#panel-dashboard #recent-tbody  td .chip,
#panel-visitors  #visitors-tbody td .chip{
  white-space: normal !important;   /* override any earlier nowrap */
}


table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:940px; /* avoid cramped columns; still scrolls on tiny screens */
}
thead th{
  position:sticky; top:0; z-index:1;
  background:var(--table-head);
  color:#c9d4ea; font-weight:800; text-align:left;
  padding:8px 10px; border-bottom:1px solid var(--border);
  font-size:12px; /* reduced */
}
tbody td{
  padding:10px; border-bottom:1px solid rgba(255,255,255,.04);
  vertical-align:top;
  background:var(--table-row);
}

/* Prevent ugly splits for key fields */
td .nowrap, th.nowrap{white-space:nowrap}
td .wrap{white-space:normal; overflow-wrap:anywhere}

/* Checkbox col */
th.chk, td.chk{width:36px; text-align:center}
th.chk input{transform:scale(1.1)}

/* Status tags (solid buttons reused) */
.status{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 8px; border-radius:8px; font-weight:800; color:#fff;
}
.status.green{background:var(--green)}
.status.red{background:var(--red)}
.status.amber{background:var(--amber); color:#211500}

/* Actions row buttons small */
table .btn{
  padding:6px 9px;
  border-radius:8px;
  font-size:12px;
}

/* Toolbar row */
.toolbar{
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  margin-top:8px;
}

/* Modal (Raw JSON popup) */
.modal{
  position:fixed; inset:0; background:rgba(0,0,0,.55);
  display:none; align-items:center; justify-content:center;
  padding:16px; z-index:1000;
}
.modal.show{display:flex}
.modal-dialog{
  width:min(920px, 96vw);
  background:var(--bg-2);
  border:1px solid var(--border);
  border-radius:12px; box-shadow:0 20px 48px var(--shadow);
  overflow:hidden;
}
.modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; font-weight:800; letter-spacing:.25px;
  border-bottom:1px solid var(--border);
}
.modal-head.danger{background:linear-gradient(90deg,#3a0f18,#2b0c12); color:#ffc7ce}
.modal-body{padding:12px}
.modal-body.scroll{max-height:70vh; overflow:auto}
.btn.close{background:var(--red); padding:6px 8px}

 /* Admin Guard modal tweaks */
 #admin-guard .modal-dialog{ width:min(420px, 90vw); }
 #admin-guard .modal-body input[type="password"]{ width:100%; padding:10px; }
 #admin-guard .actions { display:flex; gap:8px; justify-content:flex-end; margin-top:12px; }


/* Toast */
.toast{
  position:fixed; right:18px; bottom:18px;
  background:linear-gradient(180deg,#182036,#131a2c);
  border:1px solid var(--border);
  color:#e9f0ff; padding:10px 12px; border-radius:10px;
  box-shadow:0 10px 26px var(--shadow);
  opacity:0; transform:translateY(10px); pointer-events:none;
  transition:opacity .2s, transform .2s;
  z-index:1200;
}
.toast.show{opacity:1; transform:none}

/* Sound toggle wrapper on topbar */
.sound-toggle{display:flex; align-items:center; gap:10px}
.sound-toggle .muted{font-weight:700; color:#a8b2c8}

/* Last Login on topbar */
#last-login{display:flex; align-items:center; gap:8px; margin-right:10px; font-weight:700; color:#a8b2c8}
#last-login .muted{color:#a8b2c8}

/* Small utilities */
.badge{
  display:inline-block; padding:3px 6px; border-radius:999px; font-size:11px;
  background:#223; color:#d8e0ff; border:1px solid var(--border);
}

/* Domain status pills */
.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 8px; border-radius:999px; font-weight:800;
  border:1px solid var(--border);
}
.pill.ok{background:#0f2a22; color:#a8f5d2}
.pill.warn{background:#2a1e0f; color:#ffd99a}
.pill.err{background:#2a0f12; color:#ffb8c0}

/* Domain actions inline */
.domain-actions{display:flex; gap:8px; flex-wrap:wrap}

/* Prevent horizontal scroll on main content */
.main{overflow-x:hidden}

/* Panels spacing for dense tables on mobile */
@media (max-width:720px){
  .table-wrap{border-radius:8px}
  thead th, tbody td{padding:8px}
}

/* Eye icon row alignment helper */
.actions-row{display:flex; gap:6px; align-items:center}

/* Slug formatting (if not manually br-split) */
.slug{
  font-size:12px; line-height:1.35;
  white-space:normal; overflow-wrap:anywhere;
  max-width: 42ch; /* ~42 characters per line -> ~6 lines for your long slug */
}

/* Sticky table header shadow hint */
thead th{box-shadow:0 1px 0 rgba(255,255,255,.05), 0 6px 10px rgba(0,0,0,.24)}
/* Login page */
.login-wrap{
  display:grid; place-items:center; min-height:100vh;
  background:#0c101a;
  position:relative; overflow:hidden;
}
.login-bg{
  position:absolute; inset:0; background:#000; /* replaced in login.html with your base64 BG */
  background-size:cover; background-position:center;
  filter:brightness(.65);
}
.login-card{
  position:relative;
  width:min(420px, 92vw);
  background:linear-gradient(180deg, rgba(18,22,35,.88), rgba(14,18,28,.92));
  border:1px solid var(--border);
  border-radius:14px; padding:16px;
  box-shadow:0 20px 48px var(--shadow);
}
.login-card h2{margin:0 0 12px; font-size:18px}
.login-card .field{margin-bottom:10px}
.login-card .password-wrap{position:relative}
.login-card .eye{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  cursor:pointer; opacity:.9; user-select:none;
}
 .login-card .btn{width:100%; background:var(--purple)}

/* Turnstile + Sign in (left/right) – scoped to the login card only */
.login-card .actions{display:flex; justify-content:flex-end; margin-top:6px}
.login-card .actions.two-col{justify-content:space-between; align-items:center; gap:8px}
.login-card .ts-box{min-height:44px}
#cf-turnstile > div{transform:scale(.95); transform-origin:left center}
@media (max-width:420px){
  .login-card .actions.two-col{flex-direction:column; align-items:stretch; gap:10px}
  .login-card .ts-box{order:-1}
}

.login-error{
  display:none; margin:-4px 0 10px; color:#ffb8c0; font-weight:800;
}
.input-error{border-color:#ff5a5a !important; box-shadow:0 0 0 3px rgba(255,90,90,.2) inset}

/* Mobile landing page */
.mlanding{
  min-height:100vh; display:grid; place-items:center;
  padding:18px; position:relative;
  background:linear-gradient(180deg,#111625,#0f1420);
}
.mlanding .card{
  width:min(680px,96vw); text-align:center;
}
.mlanding .urlbox{
  display:flex; align-items:center; gap:10px; margin-top:12px;
}
.mlanding input[type="text"]{
  flex:1; direction:rtl; /* show tail end as requested */
  text-overflow:ellipsis; overflow:hidden; white-space:nowrap;
}
.mlanding .btn{white-space:nowrap}

/* Visitors page cell layout (compact font) */
td .tiny{font-size:12px}
td .label{color:#9fb0d0; font-size:12px}
.row{display:flex; flex-direction:column; gap:3px}

/* KPI flash update (used by admin.js) */
.flash{
  animation:flash 550ms ease;
}
@keyframes flash{
  0%{box-shadow:0 0 0 0 rgba(123,92,255,.0)}
  20%{box-shadow:0 0 0 6px rgba(123,92,255,.18)}
  100%{box-shadow:0 0 0 0 rgba(123,92,255,.0)}
}

/* KPI number coloring + blink for thresholds */
.kpi-num.white { color: #fff; }
.kpi-num.green { color: var(--green); }
.kpi-num.red   { color: var(--red); }
.kpi-num.blink { animation: pcid-blink 1s steps(2, start) infinite; }
@keyframes pcid-blink { 50% { opacity: .25; } }

/* Nginx config preview block (if used later) */
pre.code{
  background:#0f1422; border:1px solid var(--border);
  padding:10px; border-radius:10px; color:#dfe7ff;
}

/* Pagination muted span */
.toolbar .muted span{font-weight:800}

/* Prevent long hostnames from forcing scroll; allow break anywhere */
.break-anywhere{overflow-wrap:anywhere}

/* QR output page (simple center) */
.qr-wrap{display:grid; place-items:center; min-height:100vh; background:#0c111c}
.qr-wrap .qr-card{
  background:#12192a; border:1px solid var(--border); padding:16px; border-radius:12px;
  text-align:center; color:#eaf1ff;
}
.qr-wrap .qr-card img{display:block; margin:0 auto 10px; width:320px; height:320px}

/* Disabled state */
.btn[disabled]{opacity:.55; pointer-events:none}

/* Active nav focus */
.sidebar .nav .btn:focus{outline:2px solid rgba(255,255,255,.22)}
/* Domain card – button sizing */
#btn-domain-add,#btn-cf-save{min-width:120px}

/* --- Prevent flash: hide Users tab for non-admins by default --- */
.sidebar .nav [data-panel="users"] { display: none; }               /* default = hidden */
body.is-admin .sidebar .nav [data-panel="users"] { display: inline-block; }  /* show for admins */

/* Domain table cells */
#domains-tbody td .domain-actions .btn{padding:6px 10px}

/* Headings spacing consistency */
.card h3{display:flex; align-items:center; gap:8px}

/* Small badges inside tables (e.g., method) */
.badge.method-http{background:#102a3a; color:#9ad7ff}
.badge.method-dns{background:#122a18; color:#94f0c6}

/* Settings: Telegram + Change Password row */
#tg-row{display:flex; flex-wrap:nowrap; gap:12px; align-items:flex-start; grid-column:1 / -1;}
#card-telegram{flex:1 1 72%; max-width:72%;}
#card-password{flex:0 1 26%; max-width:26%; display:flex; flex-direction:column;}
#card-password .toolbar{display:flex; flex-direction:column; gap:10px}

@media (max-width: 900px){
  #tg-row{flex-direction:column}
  #card-telegram, #card-password{max-width:100%}
}


/* Responsive nits */
@media (max-width:500px){
  .topbar{flex-direction:column; gap:8px; align-items:flex-start}
  .sound-toggle{align-self:flex-end}
}

/* Hide scrollbars in WebKit for modal content (nice look) */
.modal-body.scroll::-webkit-scrollbar{width:10px}
.modal-body.scroll::-webkit-scrollbar-track{background:#0d111b}
.modal-body.scroll::-webkit-scrollbar-thumb{background:#273049; border-radius:10px}

/* Table row hover effect */
tbody tr:hover td{background:#131a2a}


/* Input focus ring */
input:focus, textarea:focus, select:focus{
  box-shadow:0 0 0 3px rgba(124,77,255,.2) inset;
  border-color:#5b6bff;
}

/* Ensure no accidental horizontal scroll anywhere */
html, body{max-width:100%; overflow-x:hidden}

/* Make Bulk Import textarea comfortably wide */
#panel-links #bulk-urls{
  min-width: 520px;
  min-height: 200px;
  width: 100%;
}

/* Make small numeric inputs smaller */
#panel-links #bulk-expire,
#panel-links #bulk-max,
#panel-links #lead-expire,
#panel-links #lead-max{
  max-width: 140px;
}

/* Optional status chips (green / red / amber) */
.status-chip { padding: 4px 8px; border-radius: 999px; font-weight: 600; display:inline-flex; align-items:center; gap:6px; }
.status-chip.green  { background:#063;  color:#fff; }
.status-chip.red    { background:#600;  color:#fff; }
.status-chip.amber  { background:#654;  color:#fff; }

/* --- Fixed chart sizes so they never stretch the cards --- */
#chart-trend,
#chart-countries {
  display:block;
  width:100%;
  height:220px;       /* dashboard cards */
  max-height:220px;
}

canvas.chart {       /* just in case */
  max-width:100%;
}

/* Space the Geo/Map charts apart a bit */
#geomap-trend,
#geomap-countries,
#geomap-pie,
#geomap-pievisit {
  margin-bottom: 18px;  /* paragraph-like gap */
}

/* Make the pie + breakdown share the card in two equal columns (double height) */
#geomap-pie,
#geomap-pievisit {
  display: inline-block;
  width: 48%;          /* match the chips column so they sit side-by-side */
  height: 540px;       
  max-height: 540px;
  vertical-align: top;
}

/* +50% height on the two Geo/Map charts */
#geomap-trend,
#geomap-countries {
  display: block;
  width: 100%;
  height: 700px;      /* was 360px */
  max-height: 700px;
}



/* Taller chart cards (+1/3 height) */
.card.taller-133, .taller-133 { min-height: calc(1.33 * 280px); } /* adjust 280px if your base is different */
.card.taller-133 .chart, .taller-133 .chart { height: 100%; }

/* Chart canvas default height if missing */
.chart { width: 100%; min-height: 280px; }

/* Cute badges under charts */
.legend-badges { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; }
.badge { display:inline-block; padding:6px 10px; border-radius:999px; font-weight:600; font-size:12px; }
.badge.solid.green { background:#2ecc71; color:#fff; }
.badge.solid.red   { background:#e74c3c; color:#fff; }

/* Caption + live clock */
.chart-caption { margin-top: 8px; font-size: 12px; color: #333; }
.chart-caption .live-clock { font-weight: 600; }
.chart-caption.grow-text { white-space: normal; }

/* Make chips/pills bigger & high-contrast */
.chip { display:inline-block; padding:4px 8px; border-radius:999px; background:#f4f6f8; color:#111; border:1px solid #e5e7eb; margin:2px; font-size:12px; }
.chip.big { font-size: 13px; padding:6px 10px; }
.chip.solid { border:none; color:#fff; }
.chip.solid.green { background:#2ecc71; }
.chip.solid.red   { background:#e74c3c; }
.chip.solid.amber { background:#f39c12; }

.chip.solid.green{ background:#16a34a; color:#fff; border-color:transparent; }
.chip.solid.red{   background:#dc2626; color:#fff; border-color:transparent; }

/* Table cell readability */
td .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.small { font-size: 12px; }
.break-anywhere { word-break: break-word; overflow-wrap: anywhere; }

.legend-badges { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.badge { display:inline-block; padding:6px 10px; border-radius:999px; background:#f5f7fa; border:1px solid #e5e7eb; font-size:12px; }
.badge.solid { color:#fff; border:none; }
.badge.solid.green { background:#2ecc71; }
.badge.solid.red   { background:#e74c3c; }

.chart-caption { margin-top:8px; font-size:12px; color:#6b7280; line-height:1.4; }
.grow-text { word-break:break-word; overflow-wrap:anywhere; }

/* Slightly narrower some cols, roomier Status */
table th:nth-child(2), table td:nth-child(2) { width: 140px; } /* Time */
table th:nth-child(3), table td:nth-child(3) { width: 170px; } /* IP */
table th:nth-child(4), table td:nth-child(4) { width: 240px; } /* Country/City */
table th:nth-child(5), table td:nth-child(5) { width: 220px; } /* ISP/ASN */
table th:nth-child(6), table td:nth-child(6) { width: 180px; } /* Device */
table th:nth-child(7), table td:nth-child(7) { width: 290px; } /* Status (bigger) */
table th:last-child, table td:last-child { width: 120px; } /* Actions */

/* Status chips on desktop: match Ungrant button height/feel; width wraps label */
#panel-dashboard #recent-tbody td:nth-child(7) .chip.big,
#panel-visitors  #visitors-tbody td:nth-child(7) .chip.big{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* match Actions buttons exactly */
  padding: 6px 10px;
  line-height: 1.2;
  height: auto;
  font-size: 13px;
  border-radius: 9px;
  white-space: nowrap;
}


/* Add a small extra indent to the Status header and cells (Dashboard + Visitors) */
#panel-dashboard thead th:nth-child(7),
#panel-visitors  thead th:nth-child(7){
  padding-left: 40px !important;  /* tiny shift before the "S" in Status */
}
#panel-dashboard #recent-tbody  td:nth-child(7),
#panel-visitors  #visitors-tbody td:nth-child(7){
  padding-left: 40px !important;  /* small gap before 🤖/🛡️ text block */
}

/* Device/Version chips: keep browser + version on the same pill */
#panel-dashboard #recent-tbody  td:nth-child(6) .chip,
#panel-visitors  #visitors-tbody td:nth-child(6) .chip{
  display: inline-flex;
  margin: 0 6px 6px 0;
  white-space: nowrap !important;
}

#panel-dashboard #recent-tbody  td:nth-child(6) .chip:last-child,
#panel-visitors  #visitors-tbody td:nth-child(6) .chip:last-child{
  margin-bottom:0;
}

/* Time col: icon + date on one line, nicely centered */
#panel-dashboard #recent-tbody  td:nth-child(2) .chip,
#panel-visitors  #visitors-tbody td:nth-child(2) .chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 9px 0;
  white-space: nowrap !important; /* prevent icon from stacking above date */
}

#panel-dashboard #recent-tbody td:nth-child(2) .chip:last-of-type,
#panel-visitors  #visitors-tbody td:nth-child(2) .chip:last-of-type{
  margin-bottom:0;
}

/* IP col: small gap between IP and CIDR/range */
#panel-dashboard #recent-tbody td:nth-child(3) .chip,
#panel-visitors  #visitors-tbody td:nth-child(3) .chip{
  display:inline-flex;
  margin:0 0 9px 0;
}
#panel-dashboard #recent-tbody td:nth-child(3) .chip:last-of-type,
#panel-visitors  #visitors-tbody td:nth-child(3) .chip:last-of-type{
  margin-bottom:0;
}

/* Country/City + ISP/ASN: add breathing room between every chip */
#panel-dashboard #recent-tbody td:nth-child(4) .chip,
#panel-visitors  #visitors-tbody td:nth-child(4) .chip,
#panel-dashboard #recent-tbody td:nth-child(5) .chip,
#panel-visitors  #visitors-tbody td:nth-child(5) .chip{
  margin:0 6px 11px 0;  /* right + bottom spacing; wraps cleanly */
}


/* ===== Links panel specific sizing ===== */

/* Slug column gets the freed width from Actions (≈+110px) */
#panel-links table th:nth-child(2),
#panel-links table td:nth-child(2) { width: calc(26ch + 110px); }

#panel-links table th:nth-child(6), /* Mobile */
#panel-links table td:nth-child(6) { width: 90px; }  /* cut width ~half */

#panel-links table th:nth-child(7), /* Expires */
#panel-links table td:nth-child(7) { width: 110px; } /* reduce by ~1.5 */

#panel-links table th:nth-child(8), /* Clicks */
#panel-links table td:nth-child(8),
#panel-links table th:nth-child(9), /* Visits */
#panel-links table td:nth-child(9) { width: 120px; } /* slight increase */

/* Links → Actions column: vertical, auto-width buttons (like Users) */
#panel-links #links-tbody .actions-row{
  display:flex;
  flex-direction:column;
  align-items:flex-start;   /* do NOT stretch full width */
  gap:6px;
}

#panel-links #links-tbody .actions-row .btn{
  width:auto;               /* only as wide as the label */
  flex:none;                /* no flex-basis tricks */
  padding:6px 10px;         /* same feel as Users buttons */
  line-height:1.2;          /* consistent button height */
  text-align:center;        /* keep labels centered */
}



/* Stack the 4 action buttons vertically (Open, QR, Copy, Delete) */
#links-tbody .actions-row{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:6px;
}
#links-tbody .actions-row .btn{ width:100%; }

/* Users panel: narrower Username column */
#panel-users table th:nth-child(2),
#panel-users table td:nth-child(2){ width: 180px; }

/* Users table: column widths after adding the two new columns */
#panel-users table th:nth-child(2),
#panel-users table td:nth-child(2){ width: 160px; } /* Username a bit narrower */

#panel-users table th:nth-child(3),
#panel-users table td:nth-child(3){ width: 100px; } /* Role ~half width */

/* Stack Action buttons vertically in Users table */
#u-body .actions-row{
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
}
#u-body .actions-row .btn{
  padding:6px 10px; /* same feel as Domains */
}

/* ===== Canonical: Reasons pill (mono) + shared chips ===== */
.reasons {
  background: transparent;
  color: #c9d1d9;
  border: 0;
  padding: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  max-width: 520px;
}
.reasons.mono { background: transparent; border: 0; }
.reasons .kv { display:flex; gap:6px; margin:2px 0; align-items:flex-start; }
.reasons .k { opacity: .9; min-width: 96px; font-weight: 700; }
.reasons .v { opacity: 1; word-break: break-word; flex: 1; }

.reasons .chip-list {
  display:flex; flex-wrap:wrap;
  gap:6px; margin:6px 0 2px;
}

/* Shared chip styles used across the app (legend, status, reasons) */
.chip {
  display:inline-flex; align-items:center; justify-content:center;
  font: inherit; font-size: 12px; line-height: 1.6;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid #374151;
  background: #111827;
  color: #e5e7eb;
  white-space: nowrap;
}
.chip.big { font-size: 13px; padding: 6px 10px; }
.chip.solid { border: none; color: #fff; }
.chip.solid.green  { background:#16a34a; }
.chip.solid.red    { background:#dc2626; }
.chip.solid.amber  { background:#f59e0b; color:#111; }
.chip.solid.purple { background:#7c3aed; }
.chip.solid.pink  { background:#ec4899; border-color:transparent; }
.chip.solid.teal  { background:#14b8a6; border-color:transparent; }
.chip.solid.ochre { background:#b8860b; border-color:transparent; color:#111; }
.chip.solid.orange{ background:#f97316; border-color:transparent; }
/* New chips for Status combinations */
.chip.solid.blue   { background:#3b82f6; border-color:transparent; }
.chip.solid.yellow { background:#fbbf24; border-color:transparent; color:#111; }
.chip.solid.blue  { background:#3b82f6; color:#fff; }  /* Country */
.chip.solid.teal  { background:#14b8a6; color:#fff; }  /* IP/IPR */

/* === Tighten Device/Browser chips (right padding & spacing) === */
.chip,
.chip.big {
  display: inline-flex;
  align-items: center;
  gap: .25rem;              /* icon + text spacing */
}

.chip.big {
  padding: 2px 8px;         /* symmetrical left/right */
  line-height: 1.2;
}

.chip .ico,
.chip.big .ico {
  margin-right: 0;
}

.chip .mono,
.chip.big .mono {
  letter-spacing: 0;        /* avoid stretched text inside mono chips */
}



/* tiny dot used in legends */
.dot { display:inline-block; width:9px; height:9px; border-radius:50%; background:currentColor; }

td.actions, .actions-row { background: var(--table-row) !important; }


/* Ensure last column ("Actions") uses the same table-row background */
 #panel-dashboard table td:last-child,
 #panel-dashboard td.actions,
 #panel-links table td:last-child,
 #panel-links td.actions,
 #panel-links .actions-row {
  background: var(--table-row) !important;
 }
 
 /* Tables: use var(--table-row) for the WHOLE cell (not just the buttons/pills) */
#panel-dashboard #recent-tbody td,
#panel-visitors  #visitors-tbody td,
#panel-links     #links-tbody td {
  background-color: var(--table-row) !important;
}

/* Restore hover shading across all 3 tables (hover should override base cell bg) */
#panel-dashboard #recent-tbody tr:hover td,
#panel-visitors  #visitors-tbody tr:hover td,
#panel-links     #links-tbody    tr:hover td {
  background: #131a2a !important;
}

td.actions, .actions-row{ background: var(--table-row) !important; }
/* Also explicitly set the last column for these three tables */
#panel-dashboard #recent-tbody tr>td:last-child,
#panel-visitors  #visitors-tbody tr>td:last-child,
#panel-links     #links-tbody    tr>td:last-child{
  background-color: var(--table-row) !important;
}

/* Domains table column widths (Settings) — FIXED: checkbox col matches Outstock, others unchanged */
#panel-settings #domains-tbody td:nth-child(1), #panel-settings thead th:nth-child(1) { width: 40px; white-space: nowrap; }  /* checkbox */
#panel-settings #domains-tbody td:nth-child(2), #panel-settings thead th:nth-child(2) { width: 320px; }                      /* Domain */
#panel-settings #domains-tbody td:nth-child(3), #panel-settings thead th:nth-child(3) { width: 160px; }                      /* Sub */
#panel-settings #domains-tbody td:nth-child(4), #panel-settings thead th:nth-child(4) { width: 90px; }                       /* Method (~half) */
#panel-settings #domains-tbody td:nth-child(5), #panel-settings thead th:nth-child(5) { width: 120px; }                      /* Status (~half) */
#panel-settings #domains-tbody td:nth-child(6), #panel-settings thead th:nth-child(6) { width: 220px; white-space: nowrap; } /* Updated one-line */


/* Domains Actions cell — force a 2x2 grid:
   Row1: HTTP-01 | DNS-01
   Row2: Delete  | Renew     (as requested: Delete under HTTP-01, Renew under DNS-01) */
#panel-settings #domains-tbody td:last-child{
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap:4px;
}

#panel-settings #domains-tbody td:last-child .btn:nth-child(1) { grid-column:1; grid-row:1; } /* HTTP-01 */
#panel-settings #domains-tbody td:last-child .btn:nth-child(2) { grid-column:2; grid-row:1; } /* DNS-01  */
#panel-settings #domains-tbody td:last-child .btn:nth-child(4) { grid-column:1; grid-row:2; } /* Delete  (under HTTP-01) */
#panel-settings #domains-tbody td:last-child .btn:nth-child(3) { grid-column:2; grid-row:2; } /* Renew   (under DNS-01)  */

/* Actions buttons: full-width + no wrapping (HTTP-01 / DNS-01 / Delete / Renew) */
#panel-settings #domains-tbody td:last-child .btn{
  display:block;
  width:100%;
  white-space:nowrap;    /* keep “HTTP-01”, “DNS-01” on one line */
  text-align:center;
}

/* Settings: keep tables compact so cards can be 50/50 without horizontal scroll */
#panel-settings .table-wrap table { min-width: 0; }

/* Outstock-Customers: tighter columns */
#card-outstock table th:nth-child(1),
#card-outstock table td:nth-child(1){ width: 40px; }
#card-outstock table th:nth-child(3),
#card-outstock table td:nth-child(3){ width: 120px; }

/* Domains column widths (Checkbox / Domain / Sub / Method / Status / Updated / Actions) — FIXED indices */
#domains-card table th:nth-child(1), #domains-card table td:nth-child(1){ width: 40px; }  /* checkbox */
#domains-card table th:nth-child(2), #domains-card table td:nth-child(2){ width: 28%; }   /* Domain */
#domains-card table th:nth-child(3), #domains-card table td:nth-child(3){ width: 12%; }   /* Sub */
#domains-card table th:nth-child(4), #domains-card table td:nth-child(4){ width: 10%; }   /* Method */
#domains-card table th:nth-child(5), #domains-card table td:nth-child(5){ width: 16%; }   /* Status */
#domains-card table th:nth-child(6), #domains-card table td:nth-child(6){ width: 18%; }   /* Updated */
#domains-card table th:nth-child(7), #domains-card table td:nth-child(7){ width: 16%; }   /* Actions */

/* Clicks: show a green dash when unlimited/zero */
.clicks-cell .dash { color: #22c55e; font-weight: 600; display:inline-block; transform:scaleX(4); transform-origin:center; }

/* If not already present */
.text-green { color: #22c55e; }
/* keep table text explicitly white where needed (no visual change in dark theme) */
.text-white { color: #fff !important; }

.sound-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.sound-item h4 { margin: 0 0 6px; font-size: 13px; color:#cbd5e1; }
.sound-item select{ width:100%; margin-bottom:8px }
.sound-item .snd-test{ width:100%; } /* e) all test buttons same width */
.sound-item.full{ grid-column: 1 / -1; } /* the “1” on its own row */

 .sound-item.full{ grid-column: 1 / -1; } /* the “1” on its own row */
 
 /* Space above the Video Tutorial section when it's inside the Soundboard card */
#video-tutorial-card {
  margin-top: 20px;         /* tweak to taste: 12–20px */
  padding-top: 8px;
}
 
/* ===== Video Tutorial (3 per row, cute cards) ===== */
.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 920px){ .video-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .video-grid{ grid-template-columns: 1fr; } }

.video-card {
  background: linear-gradient(180deg,#181e2f,#141a29);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 10px 24px var(--shadow);
  padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.video-card .video-label {
  margin-top: 2px;
  text-align: center;
  font-weight: 700; font-size: 13px; color: #cbd5e1;
}
.video-card video {
  width: 100%; height: 180px; object-fit: cover;
  border-radius: 10px; background: #0b1020;
}
.video-actions { display: flex; gap: 8px; justify-content: center; }
.btn.tiny { padding: 6px 9px; font-size: 12px; }

/* Bunny Stream iframe wrapper to match the <video> look */
.video-card .video-embed {
  border-radius: 10px;
  background: #0b1020;
  overflow: hidden;         /* clip iframe corners */
}

/* The bunny iframe itself inherits sizing from its inline styles */
.video-card .video-embed iframe {
  display: block;
}

/* Expand modal */
.video-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  display: none; align-items: center; justify-content: center;
  z-index: 9999;
}
.video-modal.show { display: flex; }
.video-modal-content {
  background: linear-gradient(180deg,#151a28,#121827);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 20px 40px rgba(0,0,0,.5);
  width: min(900px, 92vw);
  padding: 14px;
}
.video-modal-content video {
  width: 100%; height: min(65vh, 540px);
  border-radius: 10px; background: #0b1020;
}
.video-modal-content .btn { margin-top: 10px; width: 100%; }
/* ===== /Video Tutorial ===== */


/* White card variant specifically for the clocks */
.card.white { background:#fff; border-color:#e5e7eb; color:#111; }
/* orange title inside white clocks card */
.card.white > h3.title-orange { color:#f97316; }

/* 3×3 grid, same inter-card gap */
.clock-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
@media (max-width: 920px){ .clock-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .clock-grid{ grid-template-columns: 1fr; } }

.clock {
  position: relative;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px;
  aspect-ratio: 1;
}
.clock { display:flex; flex-direction:column; gap:6px; padding:12px; }
.clock .ctry{
  position:static;
  text-align:center; font-weight:800; font-size:13px; color:#111;
}
.clock .stamp{
  position:static;
  text-align:center; font-size:11px; line-height:1.2; color:#111; margin-top:6px;
}
.clock .stamp .time{ font-weight:600; }
.clock .stamp .date{ font-weight:600; }

#card-world-clocks { max-width: 96%; margin: 0 auto; overflow: hidden; }
#card-world-clocks .clock{ overflow: hidden; }

/* subtle transparent tooltip on hover */
.clock[data-tip]:hover::after{
  content: attr(data-tip);
  position:absolute; left:8px; right:8px; bottom:8px;
  background: rgba(0,0,0,.55); color:#fff;
  font-size:12px; padding:6px 8px; border-radius:6px;
}

/* make canvases fill each tile */
.clock canvas { width:100%; height:100%; display:block; }

/* Dashboard → Recent Activity: Actions column matches table-row background */
#panel-dashboard #recent-tbody td.actions,
#panel-dashboard #recent-tbody .actions-row,
#panel-dashboard #recent-tbody tr > td:last-child {
  background-color: var(--table-row) !important;
}

/* Status block's multi-line <pre> should not introduce a black box either */
#panel-dashboard #recent-tbody pre.reasons {
  background: transparent;
}

/* Links → All Links table: match Actions bg to other columns */
#panel-links #links-tbody td.actions,
#panel-links #links-tbody .actions-row,
#panel-links #links-tbody tr > td:last-child {
  background-color: var(--table-row) !important;
}


/* Outstock table — keep checkbox column left-aligned */
#card-outstock th.chk,
#card-outstock td.chk{
  text-align: left !important;
  width: 1%;
  white-space: nowrap;
}
#card-outstock th.chk input,
#card-outstock td.chk input{
  margin: 0;
}

/* Dashboard → Recent Activity: space actions */
#panel-dashboard #recent-tbody td.actions{
  display:flex;
  gap:6px;           /* slight space between the four buttons */
  flex-wrap:wrap;
   align-items:flex-start;   /* items align to top of each line */
  justify-content:flex-start;
  align-content:flex-start;
 }

/* Visitors → add the same spacing between actions buttons */
#panel-visitors #visitors-tbody td.actions{
  display:flex;
  gap:6px;
   flex-wrap: wrap;   /* wrap neatly on narrow screens */
  justify-content:flex-start;
  align-content:flex-start;
 }

/* Orange helper text under the Create lead Path fields */
.lead-help{
  color:#f97316;
  font-size:12px;
  line-height:1.35;
  margin:6px 0 0;
}

/* Create a Redirect → Digits help (compact, single-line chips) */
#panel-links .lead-help.compact{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  color:#f97316; /* keep your orange accent */
  margin-top:6px;
}
#panel-links .lead-help.compact .label{ font-weight:800; color:#ffd7a1; }
#panel-links .lead-help.compact .example{
  opacity:.9;          /* keep your current look */
  display:block;       /* force new line */
  flex-basis:100%;     /* take full row in the flex container */
  margin-top:4px;      /* tiny breathing room */
}


/* Slug text: show up to 8 lines, wrap, and then ellipsis */
#panel-links #links-tbody td.tiny.slug{
  display:-webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;        /* 8 lines */
  overflow:hidden;
  white-space:normal;
  word-break:break-word;
  max-height: 11em;            /* fallback approx (if line-clamp unsupported) */
}

/* Settings panel: keep grid for exact column alignment */
#panel-settings .grid.cols-2{
  display:grid;                              /* grid, not flex */
  gap: var(--gap, 12px);
  overflow-x:hidden;
}

#panel-settings .grid.cols-2 > .card{
  min-width: 260px;            /* prevent overflow */
  flex: 1 1 50%;               /* default: 2-up 50/50 */
}

/* Later rows keep 50/50, Outstock-Customers (left) + Domains (right) sit side-by-side */
#panel-settings .grid.cols-2 > .card{
  align-self: flex-start;       /* tidy alignment */
}


/* World Clocks: make tiles fill the card with no gaps */
#card-world-clocks .clock-grid{
  grid-template-columns: repeat(3, 1fr);
  gap: 0;              /* no gaps between tiles */
  justify-content: stretch;
 width: 100%;
 max-width: 100%;
 box-sizing: border-box;
}
#card-world-clocks .clock{
  width:100%;
  aspect-ratio: 1 / 1; /* square tiles that grow to fill column */
 box-sizing: border-box;
}
#card-world-clocks .clock canvas{
  width:100%;
  height:auto;         /* derive from aspect-ratio */
  display:block;
}

/* Users: widen Username, narrow Queries Limit a bit */
#panel-users table th:nth-child(2),
#panel-users table td:nth-child(2){ width: 220px; }  /* Username wider */

#panel-users table th:nth-child(7),
#panel-users table td:nth-child(7){ width: 90px; }   /* Queries Limit a little narrower */

/* LINKS → Make the Slug cell plain text (no chip/card look) */
#panel-links td.slug{
  background: var(--table-row) !important;
}

/* Safety: if anything ever injects a .chip inside the slug cell, strip its look */
#panel-links td.slug .chip{
  display: contents !important; 
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}
#panel-links td.slug .chip::before,
#panel-links td.slug .chip::after{ content: none !important; }

/* Explicitly ensure Slug cells use the same table row background */
#panel-links td.slug { background: var(--table-row) !important; }

/* All Links → Slug column: trim the cell padding so the dark surround is smaller */
#panel-links #links-tbody td.slug{
  padding: 0 0 3px 0 !important;   /* tiny bottom gap; sides/top flush */
}

/* Safety: make sure the inner slug chip isn’t adding spacing */
#panel-links td.slug .chip{ margin: 0 !important; }


/* Read Me editor: keep inline images contained */
#readme-area img {
  max-width: 100%;
  height: auto;
  display: block;   /* avoids unexpected inline gaps */
}

/* ===== Settings: place Outstock (left) and Domains (right) side-by-side ===== */
#panel-settings #settings-duo.duo-row{
  display: flex;
  flex-wrap: nowrap;   /* force same line; matches your main settings-duo rule */
  gap: 12px;
  align-items: flex-start; /* independent heights (no coupled growth) */
}

/* ===== Settings: Blocked Countries (70%) + Mobile lead (Global) (30%) ===== */
#panel-settings #geo-row{
  grid-column: 1 / -1;         /* span both columns of the settings grid */
  display: flex;
  flex-wrap: nowrap;   /* force same line */
  gap: 12px;
  align-items: flex-start;
}
#panel-settings #geo-row #card-countries{     flex: 0 1 70%; max-width:70%; min-width:0; }
#panel-settings #geo-row #card-mobile-global{  flex: 0 1 30%; max-width:30%; min-width:0; }
@media (max-width: 900px){
  #panel-settings #geo-row .card{ flex-basis: 100%; }
}


/* In Settings only, make the 2-column grid 35% / 65% and span both columns */
#panel-settings .grid.cols-2{ grid-template-columns: 65% 35%; }
#panel-settings #settings-duo{ grid-column: 1 / -1; } /* span both grid columns */

/* Make Outstock 35% and Domains 65%, aligned with the grid columns */
#panel-settings #settings-duo .card{ flex: 1 1 auto; min-width:0; width:auto !important; box-sizing:border-box; }
#panel-settings #settings-duo #card-outstock{ flex-basis:30%; }
#panel-settings #settings-duo #domains-card   { flex-basis:70%; }

/* Keep tables from forcing horizontal scroll inside these two cards */
#panel-settings #settings-duo .table-wrap table{ min-width: 0; }

/* Mobile fallback: stack at narrow widths */
@media (max-width: 900px){
  #panel-settings #settings-duo .card{ flex-basis: 100%; }
}

/* Telegram card ~80% width; leaves right side empty so rows look cleaner */
#panel-settings #card-telegram{
  grid-column: 1 / -1;       /* take a full row so nothing sits at its right */
  width: 80% !important;     /* about 80% */
  max-width: 80%;
  margin-left: 0;                 /* align LEFT */
  margin-right: auto;             /* nothing to its right */
}

/* Outstock-Customers → Bulk IPs textarea: half-width */
#panel-settings #bl-import{
  width: 80%;
  max-width: 80%;
  box-sizing: border-box;
}

/* ==== World Clocks: dial sizing + stamps (time/date) ==== */
#card-world-clocks .clock{ 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
}
#card-world-clocks .clock canvas{
  /* shrink just the dial so there's room for the stamp */
  width: 92% !important;          /* was 100% by default */
  height: auto !important;
  display: block;
  margin: 0 auto 6px auto;        /* a little breathing room below the dial */
}
#card-world-clocks .clock .stamp{
  display: block !important;
  text-align: center;
  line-height: 1.1;
  font-size: 11px;                /* small so it fits inside each card */
  color: var(--ink);
}
#card-world-clocks .clock .stamp .time{ font-weight: 600; }
#card-world-clocks .clock .stamp .date{ font-weight: 600; margin-top: 2px; }


/* Trim bottom padding so the row border sits just under the longest cell's content */
#panel-dashboard #recent-tbody  td,
#panel-visitors  #visitors-tbody td{
  padding-bottom: 4px !important;   /* was 10px globally; keep top/side padding unchanged */
}

/* Safety: remove any remaining bottom margin on the last child inside each cell */
#panel-dashboard #recent-tbody  td > *:last-child,
#panel-visitors  #visitors-tbody td > *:last-child{
  margin-bottom: 0 !important;
}

/* Make Actions wrap neatly without widening the table */
#panel-dashboard td.actions,
#panel-visitors  td.actions{
  white-space: normal !important;
}

#panel-dashboard td.actions .btn,
#panel-visitors  td.actions .btn{
  display: inline-flex;   /* your buttons already use flex-friendly styles */
  margin: 0 6px 6px 0;    /* tidy wrapping when they go to next line */
}

/* ==== Recent Activity (Dashboard) column widths tweak ==== */
#panel-dashboard table#recent thead th.status,
#panel-dashboard table#recent tbody td.status{
  width: 10% !important;         /* cut a little space from Status */
}
#panel-dashboard table#recent thead th.isp,
#panel-dashboard table#recent tbody td.isp{
  width: calc(15% + 2.5%) !important; /* add half of what we cut */
}
#panel-dashboard table#recent thead th.device,
#panel-dashboard table#recent tbody td.device{
  width: calc(15% + 2.5%) !important; /* the other half */
}

/* ==== Visitors table column widths tweak ==== */
#panel-visitors table#visitors thead th.status,
#panel-visitors table#visitors tbody td.status{
  width: 10% !important;
}
#panel-visitors table#visitors thead th.isp,
#panel-visitors table#visitors tbody td.isp{
  width: calc(15% + 2.5%) !important;
}
#panel-visitors table#visitors thead th.device,
#panel-visitors table#visitors tbody td.device{
  width: calc(15% + 2.5%) !important;
}

/* ==== Settings → Outstock vs Domains width split (no more 50/50) ==== */
#panel-settings #card-outstock{ flex: 0 1 30% !important; max-width: 30% !important; }
#panel-settings #domains-card { flex: 1 1 70% !important; max-width: 70% !important; }

/* Make sure the container allows this split without cramping buttons */
#panel-settings .outstock-domains-row{
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--gap);
}

/* ==== Enforce full-column var(--table-row) for Actions & Slug, no padding ==== */
/* Visitors (👥) */
#panel-visitors  #visitors-tbody td.actions{
  background-color: var(--table-row) !important;
  padding: 10px 10px 150px 10px !important;  /* top/right/bottom/left */
}
/* Dashboard Recent Activity (🏠) */
#panel-dashboard #recent-tbody td.actions{
  background-color: var(--table-row) !important;
  padding: 10px 10px 150px 10px !important;  /* top/right/bottom/left */
}
/* All Links (🔗) → Actions + Slug */
#panel-links     #links-tbody{ background-color: var(--table-row) !important; }
#panel-links     #links-tbody td.slug{
  background-color: var(--table-row) !important;
  padding: 0 0 50px 0 !important;  /* top/right/bottom/left */
}

/* If a slug "chip" exists, make it raw text (no pill UI) */
#panel-links td.slug .chip{
  display: contents !important;
  background: transparent !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
#panel-links td.slug .chip::before,
#panel-links td.slug .chip::after{ content: none !important; }

/* === World Clocks: leave room for CURRENT TIME / CURRENT DATE === */
#card-world-clocks .clock{
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: visible !important;
  aspect-ratio: auto !important;     /* allow text below the dial */
  padding-bottom: 5px;
}
#card-world-clocks .clock canvas{
  width: 90% !important;             /* shrink dial to make space */
  height: auto !important;
  display: block;
  margin: 0 auto 7px !important;
}
#card-world-clocks .clock .stamp{
  display: block !important;
  text-align: center;
  line-height: 1.1;
  font-size: 13px;                    /* small so it fits in each card */
  color:#111;
}
#card-world-clocks .clock .stamp .time{ font-weight: 800; }
#card-world-clocks .clock .stamp .date{ font-weight: 800; margin-top: 2px; }

/* World Clocks fallback: ensure dial area is never 0×0 before JS sizes it */
#card-world-clocks .clock canvas{
  min-width: 120px;
  min-height: 120px;
}


/* ===== DOMAINS-ACTIONS PATCH — center labels + spacing (authoritative) ===== */
/* A) Actions cell = 2×2 grid with bottom padding */
#panel-settings #domains-tbody td:last-child{
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-content: start;
  padding: 10px 0 12px 0 !important;  /* keep padding under the last button */
}

/* Place them as:
   Row1: HTTP-01 | DNS-01
   Row2: Delete  | Renew
   (Assumes DOM order: HTTP-01, DNS-01, Renew, Delete) */
#panel-settings #domains-tbody td:last-child .btn:nth-child(1){ grid-column:1; grid-row:1; } /* HTTP-01 */
#panel-settings #domains-tbody td:last-child .btn:nth-child(2){ grid-column:2; grid-row:1; } /* DNS-01  */
#panel-settings #domains-tbody td:last-child .btn:nth-child(4){ grid-column:1; grid-row:2; } /* Delete  */
#panel-settings #domains-tbody td:last-child .btn:nth-child(3){ grid-column:2; grid-row:2; } /* Renew   */

/* B) Buttons — center text perfectly (override any earlier rules) */
#panel-settings #domains-tbody td:last-child .btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 40px !important;          /* keep your button height */
  padding: 0 12px !important;        /* no vertical padding, only horizontal */
  line-height: 1 !important;         /* avoids top-biased text */
  white-space: nowrap;
}

/* === Solid badges for Blocked flags === */
.reasons-badges {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  margin-bottom: .25rem;
  align-items: flex-start; /* don't stretch pills horizontally */
}

.reason-badge {
  display: inline-flex;            /* match chip layout */
  align-items: center;
  gap: .25rem;
  padding: 2px 8px;                /* same visual density as .chip.big */
  border-radius: 9999px;           /* pill */
  color: #fff;
  font-weight: 700;                /* match 👥 Bot */
  font-size: 13px;                 /* match .chip.big */
  line-height: 1.2;
  white-space: nowrap;             /* pill hugs text (no wide bars) */
}

.badge-ip      { background: #14b8a6; } /* teal (IP/IPR) */
.badge-asn     { background: #f59e0b; } /* amber */
.badge-country { background: #3b82f6; } /* blue  */

/* Domain status colors (minimal change, no layout impact) */
.status-label.status--ready { color: #22c55e; } /* green */
.status-label.status--added { color: #ffffff; } /* white */
.status-label.status--error { color: #ff3b3b; } /* red */

 /* Cover other domain states used by the UI/API */
 .status-label.status--issuing { color: #f59e0b; }   /* amber */
 .status-label.status--pending { color: #f59e0b; }   /* amber */
 .status-label.status--issued  { color: #38bdf8; }   /* sky */


/* === KPI COLORS (light palette) ======================================== */
/* Admin has 9 KPIs, User has 8 (no Total PC & ID). Colors are soft/pastel. */

/* 1) Active Links — purple (as requested) */
.kpis #kpi-leads { color: #A78BFA; }

/* 2) Blocked IP's/Ranges — soft yellow */
.kpis #kpi-ipblocks { color: #FFB74D; }

/* 3) Blocked ASN Numbers — soft pink */
.kpis #kpi-asnblocks { color: #E727F5; }

/* 4) Blocked Countries — light indigo */
.kpis #kpi-countryblocks { color: #5865F2; }

/* 5) Bots Traffic — red (light) */
.kpis #kpi-no-stock { color: #FF0000; }

/* 6) Human Traffic — green (light) */
.kpis #kpi-avail-stock { color: #9aef9a; }

/* 7) Active Domains — teal (light) */
.kpis #kpi-total { color: #80CBC4; }

/* Titles get a subtle color accent too (without overpowering) */
.kpis .kpi .t { opacity: 1.0; }

/* === White pills for table chips (cols 2–6), keep existing spacing === */
#panel-dashboard #recent-tbody td:nth-child(2) .chip,
#panel-dashboard #recent-tbody td:nth-child(3) .chip,
#panel-dashboard #recent-tbody td:nth-child(4) .chip,
#panel-dashboard #recent-tbody td:nth-child(5) .chip,
#panel-dashboard #recent-tbody td:nth-child(6) .chip,
#panel-visitors  #visitors-tbody td:nth-child(2) .chip,
#panel-visitors  #visitors-tbody td:nth-child(3) .chip,
#panel-visitors  #visitors-tbody td:nth-child(4) .chip,
#panel-visitors  #visitors-tbody td:nth-child(5) .chip,
#panel-visitors  #visitors-tbody td:nth-child(6) .chip{
  background:#fff !important;
  color:#111 !important;
  border-color:#e5e7eb !important;
}

/* Force vertical (one chip per line) for Country/City, ISP/ASN, Device */
#panel-dashboard #recent-tbody td:nth-child(4) .chip,
#panel-dashboard #recent-tbody td:nth-child(5) .chip,
#panel-dashboard #recent-tbody td:nth-child(6) .chip,
#panel-visitors  #visitors-tbody td:nth-child(4) .chip,
#panel-visitors  #visitors-tbody td:nth-child(5) .chip,
#panel-visitors  #visitors-tbody td:nth-child(6) .chip{
  display:block !important; /* each chip gets its own line */
}

/* Keep Device spacing exactly as defined (6px) when made block */
#panel-dashboard #recent-tbody td:nth-child(6) .chip,
#panel-visitors  #visitors-tbody td:nth-child(6) .chip{
  margin:0 0 6px 0 !important;
}
#panel-dashboard #recent-tbody td:nth-child(6) .chip:last-child,
#panel-visitors  #visitors-tbody td:nth-child(6) .chip:last-child{
  margin-bottom:0 !important;
}

/* Status pills (Proxy / Type1 / Type2 / Bot+Risk) — white and vertical */
.reasons-pills .row{ margin:0 0 9px 0; }
.reasons-pills .row:last-child{ margin-bottom:0; }
.reasons-pills .chip{
  background:#fff; color:#111; border-color:#e5e7eb;
}

/* === Mobile Landing HTML: fixed 320px visible preview without growing the card === */
#mobile-html-card .grid > .field:nth-child(2){
  position: relative;
  height: 320px !important;     /* container height = 320px */
  overflow: hidden;              /* clip any overflow after scaling */
}

/* After scale(.5), visible size = declared size ÷ 2.
   So we declare 200% width and 640px height to show as 100% width and 320px height. */
#mobile-html-card #mh-preview{
  position: absolute !important;
  top: 0; left: 0;
  width: 200% !important;
  height: 640px !important;      /* 640px * 0.5 = 320px visible */
  margin: 0 !important;
  transform: scale(0.5);
  transform-origin: top left;
  /* keep your existing border/background/radius from inline style */
}

/* === White pills in tables (cols 2–6) — same font/rounded corners as status, hug content === */
#panel-dashboard #recent-tbody td:nth-child(n+2):nth-child(-n+6) .chip,
#panel-visitors  #visitors-tbody td:nth-child(n+2):nth-child(-n+6) .chip{
  background:#fff !important;
  color:#111 !important;
  border:1px solid #e5e7eb !important;
  border-radius:9999px !important;     /* match status pill corners */
  font-weight:700 !important;          /* match status font weight */
  font-size:13px !important;           /* match .chip.big */
  line-height:1.2 !important;
  padding:6px 10px !important;         /* match .chip.big padding */
  display:inline-flex !important;      /* DO NOT stretch full width */
  width:auto !important;               /* hug content */
  margin-right:0 !important;           /* no extra space on right */
}

/* Keep the exact vertical spacing you already use, but without right margins */
#panel-dashboard #recent-tbody td:nth-child(2) .chip,
#panel-visitors  #visitors-tbody  td:nth-child(2) .chip{ margin:0 0 9px 0 !important; }
#panel-dashboard #recent-tbody td:nth-child(3) .chip,
#panel-visitors  #visitors-tbody  td:nth-child(3) .chip{ margin:0 0 9px 0 !important; }
#panel-dashboard #recent-tbody td:nth-child(4) .chip,
#panel-visitors  #visitors-tbody  td:nth-child(4) .chip,
#panel-dashboard #recent-tbody td:nth-child(5) .chip,
#panel-visitors  #visitors-tbody  td:nth-child(5) .chip{ margin:0 0 11px 0 !important; }
#panel-dashboard #recent-tbody td:nth-child(6) .chip,
#panel-visitors  #visitors-tbody  td:nth-child(6) .chip{ margin:0 0 6px 0 !important; }

/* Make them vertical WITHOUT full-width: inject a line break after each chip */
#panel-dashboard #recent-tbody td:nth-child(4) .chip::after,
#panel-dashboard #recent-tbody td:nth-child(5) .chip::after,
#panel-dashboard #recent-tbody td:nth-child(6) .chip::after,
#panel-visitors  #visitors-tbody  td:nth-child(4) .chip::after,
#panel-visitors  #visitors-tbody  td:nth-child(5) .chip::after,
#panel-visitors  #visitors-tbody  td:nth-child(6) .chip::after{
  content:"";
  display:block;
}

/* Don’t add a gap after the last one in each cell */
#panel-dashboard #recent-tbody td:nth-child(2) .chip:last-of-type,
#panel-visitors  #visitors-tbody  td:nth-child(2) .chip:last-of-type,
#panel-dashboard #recent-tbody td:nth-child(3) .chip:last-of-type,
#panel-visitors  #visitors-tbody  td:nth-child(3) .chip:last-of-type,
#panel-dashboard #recent-tbody td:nth-child(4) .chip:last-of-type,
#panel-visitors  #visitors-tbody  td:nth-child(4) .chip:last-of-type,
#panel-dashboard #recent-tbody td:nth-child(5) .chip:last-of-type,
#panel-visitors  #visitors-tbody  td:nth-child(5) .chip:last-of-type,
#panel-dashboard #recent-tbody td:nth-child(6) .chip:last-of-type,
#panel-visitors  #visitors-tbody  td:nth-child(6) .chip:last-of-type{
  margin-bottom:0 !important;
}

/* Status white pills: match the same font/corners; keep vertical & spacing */
.reasons-pills .row{ margin:0 0 9px 0; }
.reasons-pills .row:last-child{ margin-bottom:0; }
.reasons-pills .chip{
  background:#fff !important;
  color:#111 !important;
  border:1px solid #e5e7eb !important;
  border-radius:9999px !important;
  font-weight:700 !important;
  font-size:13px !important;
  line-height:1.2 !important;
  padding:6px 10px !important;
  display:inline-flex !important;
  width:auto !important;
}

/* Status column (7th): one-per-line for ALL pills/badges */
#panel-dashboard #recent-tbody td:nth-child(7) .chip,
#panel-dashboard #recent-tbody td:nth-child(7) .status,
#panel-dashboard #recent-tbody td:nth-child(7) .status-chip,
#panel-dashboard #recent-tbody td:nth-child(7) .badge,
#panel-visitors  #visitors-tbody td:nth-child(7) .chip,
#panel-visitors  #visitors-tbody td:nth-child(7) .status,
#panel-visitors  #visitors-tbody td:nth-child(7) .status-chip,
#panel-visitors  #visitors-tbody td:nth-child(7) .badge{
  display:inline-flex !important;     /* hug content */
  width:auto !important;
  margin:0 0 9px 0 !important;        /* tidy vertical spacing */
}

#panel-dashboard #recent-tbody td:nth-child(7) .chip::after,
#panel-dashboard #recent-tbody td:nth-child(7) .status::after,
#panel-dashboard #recent-tbody td:nth-child(7) .status-chip::after,
#panel-dashboard #recent-tbody td:nth-child(7) .badge::after,
#panel-visitors  #visitors-tbody td:nth-child(7) .chip::after,
#panel-visitors  #visitors-tbody td:nth-child(7) .status::after,
#panel-visitors  #visitors-tbody td:nth-child(7) .status-chip::after,
#panel-visitors  #visitors-tbody td:nth-child(7) .badge::after{
  content:""; display:block;          /* forces a line break after each */
}

#panel-dashboard #recent-tbody td:nth-child(7) .chip:last-of-type,
#panel-dashboard #recent-tbody td:nth-child(7) .status:last-of-type,
#panel-dashboard #recent-tbody td:nth-child(7) .status-chip:last-of-type,
#panel-dashboard #recent-tbody td:nth-child(7) .badge:last-of-type,
#panel-visitors  #visitors-tbody td:nth-child(7) .chip:last-of-type,
#panel-visitors  #visitors-tbody td:nth-child(7) .status:last-of-type,
#panel-visitors  #visitors-tbody td:nth-child(7) .status-chip:last-of-type,
#panel-visitors  #visitors-tbody td:nth-child(7) .badge:last-of-type{
  margin-bottom:0 !important;
}

/* White pills inside the Status block (“reasons-pills”) — hug text & 1 per line */
.reasons-pills .row{ 
  display:block !important;      /* cancel any global .row flex */
  margin:0 0 9px 0;
}
.reasons-pills .row:last-child{ margin-bottom:0; }

.reasons-pills .chip{
  background:#fff !important;
  color:#111 !important;
  border:1px solid #e5e7eb !important;
  border-radius:9999px !important;
  font-weight:700 !important;
  font-size:13px !important;
  line-height:1.2 !important;
  padding:4px 8px !important;    /* tighter: no big left/right space */
  display:inline-flex !important;
  width:auto !important;         /* never stretch */
}

/* Deleted-domain links appear red in All Links table */
#links-tbody tr.dead-link td { color: #ff3b3b !important; }

/* Deleted-domain links appear red in All Links table */
#links-tbody tr.dead-link td { color: #ff3b3b !important; }

/* Ensure '-' inside clicks cell also turns red for dead rows */
#links-tbody tr.dead-link td.clicks-cell .dash { color: #ff3b3b !important; }


/* simple helpers */
.text-green { color:#22c55e !important; }
.text-red { color:#ff3b3b !important; }

.blink-red { color:#ff3b3b !important; animation: blink 1s step-start infinite; }
.expired { color:#ff3b3b !important; }

 /* Users table column widths – final override (keeps layout stable) */
 #panel-users table th:nth-child(2),
 #panel-users table td:nth-child(2) { width: 100px !important; }        /* ID ≈ quarter of typical auto width */

 #panel-users table th:nth-child(3),
 #panel-users table td:nth-child(3) { width: 250px !important; }         /* Username gets the freed space */

 #panel-users table th:nth-child(4),
 #panel-users table td:nth-child(4) { width: 90px !important; }        /* Role */ 
 
 #panel-users table th:nth-child(5),
 #panel-users table td:nth-child(5) { width: 170px !important; }        /* Created On */ 
 
 #panel-users table th:nth-child(6),
 #panel-users table td:nth-child(6) { width: 170px !important; }        /* Expires On */ 
  
 #panel-users table th:nth-child(8),
 #panel-users table td:nth-child(8) { width: 125px !important; }        /* Queries Today */
  
 #panel-users table th:nth-child(9),
 #panel-users table td:nth-child(9) { width: 125px !important; }        /* Queries Limit */

@keyframes blink { 50% { opacity:.25; } }
.text-green { color:#22c55e !important; } /* already added above */

/* DNS checklist "wait" callout with pointing hands */
.callout-wait{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.55rem .9rem;
  border-radius:999px;
  /* soft amber pill to match theme */
  background: rgba(255,176,32,.10);           /* uses the amber vibe */
  border:1px solid rgba(255,176,32,.38);
  font-weight:700;
}
.callout-wait .txt{ letter-spacing:.1px }
.callout-wait .hand{
  display:inline-block;
  font-size:1.4em;            /* make the emoji a touch larger */
  line-height:1;
}
.callout-wait .hand.left{  animation:nudgeL 1.2s ease-in-out infinite; }
.callout-wait .hand.right{ animation:nudgeR 1.2s ease-in-out infinite; }

@keyframes nudgeL { 0%,100%{transform:translateX(0)} 50%{transform:translateX(-2px)} }
@keyframes nudgeR { 0%,100%{transform:translateX(0)} 50%{transform:translateX( 2px)} }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .callout-wait .hand.left,
  .callout-wait .hand.right{ animation:none }
}

/* Propagation Check inline (no wrapper) */
.propcheck-row .ip{ display:block; margin-left:14px; }
.propcheck-row .green{ color:#22c55e; }
.propcheck-row .red{ color:#ef4444; }

/* Checklist Modal list spacing */
.checklist-list { margin: 0; padding-left: 18px; }
.checklist-list li + li { margin-top: 10px; }
.checklist-note { margin-top: 16px; font-weight: 600; }

/* --- Domains card tweaks (minimal) --- */
#domains-card thead th.chk,
#domains-card tbody td.chk { width: 40px; }            /* narrow checkbox column */

#domains-card thead th.col-domain { width: 24ch; }     /* trim Domain column slightly so layout stays identical */

/* DNS Checklist (Domains card) */
.dns-checklist{
  border:1px solid var(--border);
  border-radius:10px;
  padding:12px;
  margin:8px 0 12px;
}
.dns-checklist .step{ font-size:14px; line-height:1.45 }
.dns-checklist .spacer{ height:8px }

.dns-checklist .records{ display:grid; gap:6px }
.dns-checklist .row{
  display:grid;
  grid-template-columns:28px 28px 1fr auto;
  align-items:center;
  gap:8px;
  font-family:var(--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace);
}
.dns-checklist .rr,
.dns-checklist .name,
.dns-checklist .ip,
.dns-checklist .note{ white-space:nowrap }

.dns-checklist .rr{
  border:1px solid var(--border);
  border-radius:6px;
  padding:2px 6px;
  text-align:center;
  font-weight:600;
}
.dns-checklist .name{ font-weight:700 }
.dns-checklist .note{ font-style:italic; opacity:.85 }

/* Status labels (Visitors + Recent) — same font size + bold, scoped to the Status column */
#panel-dashboard #recent-tbody  td:nth-child(7) .chip.big.solid,
#panel-visitors  #visitors-tbody td:nth-child(7) .chip.big.solid{
  font-weight: 700;   /* Bold */
  font-size: 13px;    /* Match your .chip.big size */
}

/* STEP 2: NICE "NEED TO KNOW" CARD STYLES (scoped) */
#need-to-know-card .n2k-title{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding-bottom:8px; border-bottom:1px dashed var(--border);
}
#need-to-know-card .n2k-flag{ font-size:1.1em }
#need-to-know-card .n2k-badge{ margin-left:auto }

#need-to-know-card .n2k-grid{
  display:grid; gap:12px; margin-top:12px;
  grid-template-columns: 0.70fr 2fr;
}
@media (max-width: 1000px){
  #need-to-know-card .n2k-grid{ grid-template-columns: 1fr; }
}

#need-to-know-card .n2k-section{
  background:linear-gradient(180deg,#121827,#0f1421);
  border:1px solid var(--border);
  border-radius:10px;
  padding:12px;
}

#need-to-know-card .n2k-sub{
  font-size:13px; font-weight:800; color:#fff; margin:0 0 8px 0;
  display:flex; align-items:center; gap:8px;
}

#need-to-know-card .n2k-steps{
  margin:0; padding-left:18px; line-height:1.55;
}
#need-to-know-card .n2k-steps li + li{ margin-top:6px; }

#need-to-know-card .n2k-bullets{
  margin:0; padding-left:18px; line-height:1.55;
}
#need-to-know-card .n2k-bullets.tight li + li{ margin-top:4px; }
#need-to-know-card .n2k-bullets li + li{ margin-top:6px; }

#need-to-know-card .n2k-note{
  margin-top:10px; font-size:12px; color:#f97316; font-weight:600;
}

#need-to-know-card .n2k-split{
  display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:8px;
}
@media (max-width: 560px){ #need-to-know-card .n2k-split{ grid-template-columns:1fr; } }

#need-to-know-card .n2k-mini{
  margin:0 0 6px; font-size:12px; font-weight:800; color:#cbd5e1;
}

#need-to-know-card .n2k-pillcol{ display:flex; align-items:center; gap:8px; margin:6px 0; }
#need-to-know-card .n2k-pillcol .chip{ padding:4px 8px; font-weight:700; }

#need-to-know-card .n2k-callout{
  margin-top:12px; border:1px solid var(--border); border-radius:10px; padding:10px;
  background:linear-gradient(180deg,#17151a,#131018);
}
#need-to-know-card .n2k-callout.danger{
  border-color: rgba(255,82,82,.35);
  background:linear-gradient(180deg,#2a0f12,#1b0b0f);
}
#need-to-know-card .n2k-callout-title{
  font-weight:800; color:#ffb8c0; margin-bottom:4px;
}
#need-to-know-card .n2k-callout-text{ color:#ffd7dc; }

/* make chips used here slightly stronger */
#need-to-know-card .chip{ font-size:12px; line-height:1.2; }

/* Indent the Cloudflare token instruction lines */
.dns-checklist .token .row{
  display:block;        /* you already have this */
  white-space:normal;   /* you already have this */
  word-break:normal;    /* you already have this */
  margin-left: 14px;    /* <- add this */
}

.dns-checklist .token .row + .row{
  margin-top: 6px;      /* optional: a little vertical spacing between lines */
}

/* highlight words inside the DNS checklist */
#dns-checklist-host .hl-verify { color: #87CEFA; font-weight: 600; }
#dns-checklist-host .hl-save   { color: #FFD700; font-weight: 600; } /* yellow/gold */