: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;

  /* Needed by pay-modal + signup styles (defined once, globally) */
  --text: var(--ink);
  --panel: var(--bg-2);
  --panel-2: var(--bg-3);
}

*{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;
  /* ✅ Sidebar only: dirty white */
  background:#f4f1e8;
  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);
}

/* =========================
   Sidebar collapse toggle
   ========================= */
.sidebar-collapse{
  width: 100%;
  border: 0;
  background: transparent;
  padding: 6px 0;
  cursor: pointer;
  display:flex;
  justify-content:center;
  align-items:center;
}
.sidebar-collapse img{
  width: 26px;
  height: 26px;
  display:block;
  opacity: .85;
}
.sidebar-collapse:hover img{ opacity: 1; }

/* Collapsed sidebar: icon-only */
.sidebar.is-collapsed{
  width: 64px;
  padding: 16px 8px;
}
.sidebar.is-collapsed .brand span{ display:none; }
.sidebar.is-collapsed .nav .nav-label{ display:none; }
.sidebar.is-collapsed .nav .btn{
  justify-content: center;
  text-align: center;
  padding: 11px 0;
}

/* ✅ Desktop: hide copyright footer when sidebar is collapsed */
.sidebar.is-collapsed .side-footer{
  display:none;
}

/* When collapsed, push page left (more space) — desktop/tablet only */
@media (min-width: 681px){
  body.sidebar-collapsed .main{
    margin-left: 64px;
    width: calc(100% - 64px);
  }
}

/* Mobile stacked layout must NOT be shifted */
@media (max-width: 680px){
  body.sidebar-collapsed .main{
    margin-left: 0;
    width: 100%;
  }
}

.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,0.25);
}
.brand span{margin-left:6px}
/* Brand pill is clickable (anchor) — keep it looking like the original pill (authoritative) */
a.brand.brand-link,
a.brand.brand-link:hover,
a.brand.brand-link:focus,
a.brand.brand-link:active,
a.brand.brand-link:visited{
  display:block;
  color:#fff;
  text-decoration:none !important;  /* beats: a:hover{text-decoration:underline} */
}

/* Auth + sidebar brand icon (SVG) */
.brand .brand-icon{
  width:18px;
  height:18px;
  display:inline-block;
  vertical-align:-3px;
}

.nav{
  display:flex;
  flex-direction:column;
  gap:10px;
  flex: 1 1 auto;                 /* lets footer stay pinned */
  overflow-y: auto;               /* ✅ allows nav to scroll when it exceeds height */
  -webkit-overflow-scrolling: touch;
}
.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;
  width: calc(100% - 240px);  /* ✅ prevents right cut-off on narrower screens */
  min-height:100vh;
  padding:18px;
}

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:9;
  background:#f4f1e8; /* same dirty white as sidebar */
  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; color:#1f2937}

/* Table wrapper: prevent right-side cut-off on smaller laptops */
.table-wrap{
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 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 > *{ min-width: 0; } /* ✅ prevents table/cards from forcing overflow */
.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);
    height:auto;
  }
  .main{
    margin-left:0;
    width:100%;
  }
}

/* ✅ MOBILE PORTRAIT: show ALL nav buttons (wrap instead of horizontal hidden scroll) */
@media (max-width:720px) and (orientation:portrait){
  #sidebar-collapse{
    display:none !important;
  }

  .sidebar .nav{
    flex-direction: row;
    flex-wrap: wrap;          /* ✅ shows all buttons */
    overflow-x: visible;      /* ✅ no sideways hidden nav */
    overflow-y: visible;
  }
  .sidebar .nav .btn{
    width: auto;
    flex: 1 1 calc(50% - 10px);  /* 2 per row */
  }
}

/* ✅ MOBILE TILT/LANDSCAPE: keep sidebar usable and allow scrolling to bottom items */
@media (max-width:920px) and (orientation:landscape){
  #sidebar-collapse{
    display:flex !important;
  }

  .sidebar{
    position: fixed;
    height: 100vh;
  }
  .sidebar .nav{
    overflow-y: auto;          /* ✅ scroll to Geo/Readme/Logout/Users */
    flex-direction: column;
    flex-wrap: nowrap;
  }
}

/* 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, opacity .2s ease;
}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px)}

.btn.is-faded{
  opacity:.35;
  filter:grayscale(.35);
  pointer-events:none;
  cursor:not-allowed;
}

.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;
}

/* ✅ Make Available Domains selects the exact same width in Links + Website panels */
#lead-domain,
#website-domain{
  width: 520px;
  max-width: 100%;
}

/* ✅ Website panel: make Available Domains wider on Protect your Website card only */
#panel-website #website-protect-card #website-domain{
  width: 640px;
}

/* Fix for payment modal dropdown options in dark theme */
#pay-modal select option {
  background-color: var(--bg-3); /* Dark background */
  color: var(--ink); /* Light text */
}

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}

/* Detection toggles (Proxy/Bot): red OFF, green ON */
.switch.det-toggle input{background:#3a1820}
.switch.det-toggle 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;
  min-height: 96px;          /* gives enough vertical space for top/middle/bottom */
 }

/* Force: title top, number middle, subtext bottom */
.kpi .v{ margin: auto 0; }    /* pushes value to vertical middle */
.kpi .s{ margin-top: auto; }  /* pins subtext to bottom */

.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}
}

/* Split KPI: left half aligns left, right half aligns right */
.kpi .v.kpi-split-v .kpi-half{
  display:flex;
  flex-direction:column;
  min-height: 72px;            /* ensures true top/middle/bottom inside each half */
}

/* Left half */
.kpi .v.kpi-split-v .kpi-half:nth-child(1){
  text-align:left !important;
  align-items:flex-start;
}
.kpi .v.kpi-split-v .kpi-half:nth-child(1) .kpi-mini-value{
  margin: auto 0;              /* middle */
}

/* Right half */
.kpi .v.kpi-split-v .kpi-half:nth-child(2){
  text-align:right !important;
  align-items:flex-end;
}
.kpi .v.kpi-split-v .kpi-half:nth-child(2) .kpi-mini-value{
  margin: auto 0;              /* middle */
}

/* 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;
}

table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:0;
}
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 */
}

/* Dirty-white table headers (same as sidebar / Recent Activity) */
#panel-dashboard #recent thead th,
#panel-visitors table thead th,
#panel-links table thead th,
#panel-website table thead th,
#domains-card table thead th,
#card-outstock table thead th{
  background:#f4f1e8 !important;
  color:#1f2937 !important;
}
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}

/* ✅ prevent nowrap utilities from causing clipped text in tables */
table .nowrap,
table th.nowrap,
table td.nowrap,
table td .nowrap{
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 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;
}


/* =========================================================
   TABLE TYPOGRAPHY OVERRIDES (requested sizes)
   - No function changes, no emoji changes
   ========================================================= */

/* 1) Recent Activity table + Visitors table
   - Header labels already 12px (global thead th)
   - Normal body text: 13px
   - Date/Time body text: 13px (mono)
   - Actions button text: 12px (already handled by table .btn above)
   - Status Chip text: 11px
*/
#panel-dashboard #recent-tbody td,
#panel-visitors  #visitors-tbody td{
  font-size:13px;
}

/* Date/Time uses .mono in Visitors rowHTML (📅/🕒 block), so force mono to 13px */
#panel-dashboard #recent-tbody .mono,
#panel-visitors  #visitors-tbody .mono{
  font-size:13px !important;
}

/* Status chips live inside the Status column (7th col) */
#panel-dashboard #recent-tbody td:nth-child(7) .chip,
#panel-visitors  #visitors-tbody td:nth-child(7) .chip{
  font-size:11px !important;
}

/* 2) Redirected Links table
   - Header labels already 12px
   - Slug body text: 12px (mono) -> already handled by .slug + .mono
   - Other body text: 13px
   - Actions button text: 12px (already table .btn)
*/
#panel-links #links-tbody td{
  font-size:13px;
}
/* Keep slug specifically at 12px mono */
#panel-links #links-tbody td.slug{
  font-size:12px;
}
#panel-links #links-tbody td.slug.mono,
#panel-links #links-tbody td.slug .mono{
  font-size:12px !important;
}

/* 3) Protected Websites table
   - Header labels already 12px
   - VPS IP body text: 13px (mono)
   - Other body text: 13px
   - Actions button text: 12px (already table .btn)
*/
#panel-website #website-links-tbody td{
  font-size:13px;
}
/* Force any mono cells in the Websites table (VPS IP is rendered as <td class="tiny mono">...) */
#panel-website #website-links-tbody td.mono,
#panel-website #website-links-tbody td .mono{
  font-size:13px !important;
}

/* 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}

/* First login / no active plan modal */
#first-login-plan-modal{
  z-index: 1001;
}

#first-login-plan-modal .first-login-plan-dialog{
  width: min(560px, 94vw);
  background: #f4f1e8; /* same dirty white as sidebar */
  border: 1px solid #d8d2c4;
  border-radius: 14px;
  box-shadow: 0 20px 48px rgba(0,0,0,.35);
  position: relative;
  overflow: hidden;
}

#first-login-plan-modal .first-login-plan-close{
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
}

#first-login-plan-modal .first-login-plan-body{
  padding: 26px 22px 22px;
  color: #4b5563;
}

#first-login-plan-modal .first-login-plan-icon-row{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-right: 42px; /* leaves room for the X button */
}

#first-login-plan-modal .first-login-plan-icon{
  color: #ef4444;
  font-size: 22px;
  line-height: 1;
  font-weight: 800;
}

#first-login-plan-modal .first-login-plan-title{
  font-size: 28px;
  line-height: 1.15;
  font-weight: 800;
  color: #ef4444;
}

#first-login-plan-modal .first-login-plan-text{
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: #6b7280;
}

#first-login-plan-modal .first-login-plan-divider{
  height: 1px;
  background: #d9d4c8;
  margin: 18px 0;
}

#first-login-plan-modal .first-login-plan-text-bottom{
  color: #6b7280;
}

@media (max-width: 640px){
  #first-login-plan-modal .first-login-plan-title{
    font-size: 24px;
  }

  #first-login-plan-modal .first-login-plan-body{
    padding: 22px 16px 18px;
  }
}

.origin-modal-dialog{
  width:min(860px, 96vw);
}

.origin-modal-body textarea{
  min-height: 120px;
  max-height: 260px;
  overflow-y: auto;
  resize: vertical;
  font: 12px/1.45 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  white-space: pre-wrap;
}

#origin-issue-btn.is-uploading,
#origin-issue-btn.is-faded{
  pointer-events: none;
}

/* Eye modal — make it match the dirty-white first signup modal */
#modal .eye-modal-dialog{
  background: #f4f1e8;
  border: 1px solid #d8d2c4;
  border-radius: 14px;
  box-shadow: 0 20px 48px rgba(0,0,0,35);
}

#modal .modal-head{
  background: #f4f1e8;
  color: #ef4444;
  border-bottom: 1px solid #d9d4c8;
}

#modal .mh-title{
  color: #ef4444;
}

#modal .modal-body{
  background: #f4f1e8;
  color: #4b5563;
}

#modal .modal-body h4{
  color: #ef4444;
}

#modal pre{
  background: transparent;
  color: #6b7280;
}

/* ✅ Eye modal: never horizontal-scroll because of long slugs/URLs */
#modal pre{
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Users table: click username → details modal */
.u-link{
  background:transparent;
  border:0;
  padding:0;
  margin:0;
  color:var(--blue);
  cursor:pointer;
  font:inherit;
  text-decoration:none;
}
.u-link:hover{ filter:brightness(1.1); }
.u-link:focus{ outline:2px solid var(--blue); outline-offset:2px; border-radius:6px; }

/* User Details + Redeemed Payment modals — match dirty-white eye modal */
#user-details-modal .modal-dialog,
#redeemed-modal .modal-dialog{
  background: #f4f1e8;
  border: 1px solid #d8d2c4;
  box-shadow: 0 20px 48px rgba(0,0,0,.35);
}

#user-details-modal .modal-head,
#redeemed-modal .modal-head{
  background: #f4f1e8;
  color: #ef4444;
  border-bottom: 1px solid #d9d4c8;
}

#user-details-modal .mh-title,
#redeemed-modal .mh-title{
  color: #ef4444;
}

#user-details-modal .modal-body,
#redeemed-modal .modal-body{
  background: #f4f1e8;
  color: #4b5563;
}

#user-details-modal #ud-pre,
#redeemed-modal #redeemed-pre{
  background: transparent;
  color: #6b7280;
}

#user-details-modal #ud-pre{
  margin:0;
  white-space:pre-wrap;
  word-break:break-word;
}

#redeemed-modal #redeemed-pre{
  margin:0;
  white-space:pre-wrap;
  word-break:break-word;
}

 /* 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; }

/* Payment modal (Subscribe) */
#pay-modal .modal-dialog{ width:min(560px, 94vw); }
#pay-modal .modal-head{
  background: linear-gradient(90deg, rgba(124,58,237,.22), rgba(34,197,94,.16));
}
#pay-modal .modal-body{ display:flex; flex-direction:column; gap:12px; }
#pay-modal .field label{ display:block; margin-bottom:6px; font-weight:800; color:#e9f0ff; }
#pay-modal select{
  width:100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.18);
  color: var(--text);
  outline: none;
}
#pay-modal .pay-summary-line{ font-weight:900; letter-spacing:.1px; }
#pay-modal .pay-output{ display:flex; flex-direction:column; gap:12px; }
#pay-modal .pay-qr-wrap{ display:flex; flex-direction:column; align-items:center; gap:10px; }
#pay-modal #pay-qr-img{
  width: 260px;
  height: 260px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: #fff;
  padding: 10px;
}
#pay-modal .pay-address{
  width: 100%;
  max-width: 520px;
  text-align: center;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px dashed rgba(255,255,255,.22);
  background: rgba(0,0,0,.18);
  word-break: break-all;
}
#pay-modal .pay-instructions{ display:flex; flex-direction:column; gap:8px; }
#pay-modal .pay-send-amount{ font-weight:900; }
#pay-modal .pay-network-warning{ color: rgba(250,204,21,.92); font-weight:800; line-height:1.35; }
#pay-modal .pay-paid-hint{ font-size: 12px; opacity: .9; }

#pay-modal .btn.copy{
  align-self: center;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.18);
}
#pay-modal .btn.copy:hover{
  filter: brightness(1.08);
}

/* 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}

/* Toast error state (used for Payment: address_missing) */
.toast.error{
  color:#ef4444;
}

.toast.success{
  color:#22c55e;
}

.toast.purple{
  color:#a78bfa;
}

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

/* ===== Subscription Ends (topbar) ===== */
/* Topbar right-side “info chips” (Last Login + Subscription Ends) */
/* ===== Topbar right alignment grid (LOGGED AS left, all labels aligned in col 2) ===== */
.topbar .right{
  display:grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 14px;
  row-gap: 4px;
  align-items: center;
}

/* Let #sub-ends “disappear” as a wrapper so its children can sit on the grid */
#sub-ends{ display: contents; }

/* Column 1, Row 1: LOGGED IN AS */
#sub-ends .logged-as{
  grid-column: 1;
  grid-row: 1;
  margin-right: 0;          /* overrides old margin-right:14px */
}

/* Column 2, Row 1: Subscription Ends (label + value) */
#sub-ends .sub-row{
  grid-column: 2;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

/* Column 2, Row 2: Last Login */
#last-login{
  grid-column: 2;
  grid-row: 2;
  margin-right: 0;          /* keep spacing consistent */
}

/* Column 2, Row 3: Sound toggle */
.topbar .right .sound-toggle{
  grid-column: 2;
  grid-row: 3;
  justify-self: start;
}
.last-login{
  display:flex;
  align-items:center;
  gap:8px;
  margin-right:10px;
  font-weight:700;                 /* <-- makes BOTH bold */
  color:#a8b2c8;
  white-space:nowrap;
}
.last-login .muted{
  color:#a8b2c8;
  font-weight:700;
}
/* LOGGED IN AS (before Subscription Ends) */
#sub-ends .logged-as{
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}
#sub-ends .logged-label{
  color:#a8b2c8;            /* match the “dirty white” used by .last-login .muted */
  font-weight:800;
  font-size:11px;           /* ⬇ slightly smaller */
  line-height:1.15;
}

/* Make "Subscription Ends:" label match LOGGED IN AS: label size */
#sub-ends .sub-row .muted{
  font-size:13px;           /* ⬇ slightly smaller, same as LOGGED IN AS: */
  line-height:1.15;
}

/* Make green username + green subscription date/time match sizes */
#sub-ends .logged-user{
  color:#22c55e;            /* green username */
  font-weight:800;
  font-size:13px;           /* ⬇ slightly smaller */
  line-height:1.15;
}

#last-login-text,
#sub-ends-text{
  font-variant-numeric: tabular-nums;
  font-size:12px;           /* ⬇ slightly smaller, matches green username */
  line-height:1.15;
  font-weight:800;  /* ✅ makes Subscription Ends date/time match green username */
}

/* Subscription Ends coloring helpers (used by admin.js) */
.sub-green{ color:#22c55e !important; }
.sub-red{   color:#ef4444 !important; }
.sub-blink{ animation: blink 1s step-start infinite; }

/* 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}

/* 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 (scoped)
   IMPORTANT: Do NOT force row layout inside table Actions columns (Links uses vertical stack). */
#panel-dashboard .actions-row,
#panel-visitors  .actions-row,
#panel-users     .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(500px, 92vw) !important;
  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 (login) — centered like signup, no scale/crop */
.login-card #cf-turnstile{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  margin: 16px 0 8px;
}

/* Center the injected wrapper div */
.login-card #cf-turnstile > div{
  display:flex !important;
  justify-content:center !important;
  margin: 0 auto !important;
  width: fit-content !important;
  transform: none !important;           /* kill old scale */
  transform-origin: initial !important;  /* kill old origin */
}

/* Center the actual iframe */
.login-card #cf-turnstile iframe{
  display:block !important;
  margin: 0 auto !important;
  max-width: 100% !important;
}

/* Buttons row (login-card only): Sign up left, Sign in right */
.login-card .actions.login-actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-top: 10px;
}

@media (max-width:420px){
  .login-card .actions.login-actions{
    flex-direction: column;
    align-items: stretch;
  }
  .login-card .actions.login-actions .btn,
  .login-card .actions.login-actions a.btn{
    width:100%;
  }
}


.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}

/* Upload buttons: show spinner while large HTML uploads */
.btn.is-uploading{
  position: relative;
  pointer-events: none;
  padding-right: 34px; /* space for spinner */
}
.btn.is-uploading::after{
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  transform: translateY(-50%);
  animation: ogBtnSpin .8s linear infinite;
}
@keyframes ogBtnSpin{
  from{ transform: translateY(-50%) rotate(0deg); }
  to  { transform: translateY(-50%) rotate(360deg); }
}
@media (prefers-reduced-motion: reduce){
  .btn.is-uploading::after{ animation: 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 */

/* Hide 💳 Subscribe for admin accounts */
body.is-admin .sidebar .nav [data-panel="subscribe"]{
  display:none;
}

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

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

/* Detection Configuration header + README button */
#detection-card .detection-card-head{
  position: relative;
  min-height: 34px;
  margin-bottom: 0;
}

#detection-card .detection-card-head h3{
  margin: 0;
  display: block;
}

#detection-readme-btn{
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  border: 1px solid #d9d4c8;
  background: #f4f1e8;
  color: #7c2d12;
  font-weight: 800;
  letter-spacing: .2px;
  padding: 7px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

#detection-readme-btn:hover{
  background: #efe9dd;
  color: #b45309;
  border-color: #cfc7b7;
  transform: translateY(-50%) translateY(-1px);
}

#detection-readme-btn:active{
  transform: translateY(-50%);
}

/* Detection README modal */
#detection-readme-modal .detection-readme-modal-dialog{
  width: min(820px, 96vw);
  background: #f4f1e8;
  border: 1px solid #d8d2c4;
  border-radius: 16px;
  box-shadow: 0 20px 48px rgba(0,0,0,.35);
  overflow: hidden;
}

#detection-readme-modal .modal-head{
  background: linear-gradient(180deg, #f8f5ee 0%, #f1eadf 100%);
  color: #dc2626;
  border-bottom: 1px solid #d9d4c8;
}

#detection-readme-modal .mh-title{
  color: #dc2626;
  font-weight: 900;
  letter-spacing: .2px;
}

#detection-readme-modal .detection-readme-modal-body{
  background: #f4f1e8;
  color: #4b5563;
  line-height: 1.75;
  padding-top: 18px;
}

#detection-readme-modal .detection-readme-modal-body p{
  margin: 0 0 14px 0;
}

#detection-readme-modal .det-readme-block{
  background: rgba(255,255,255,.38);
  border: 1px solid #ddd4c5;
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 14px;
}

#detection-readme-modal .det-readme-eyebrow{
  margin: 0 0 6px 0;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #92400e;
}

#detection-readme-modal .det-readme-title{
  margin: 0 0 12px 0;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 900;
  color: #111827;
}

#detection-readme-modal .det-readme-subtitle{
  margin: 0 0 10px 0;
  font-size: 16px;
  line-height: 1.35;
  font-weight: 900;
  color: #1f2937;
}

#detection-readme-modal .det-readme-status-list{
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

#detection-readme-modal .det-readme-status-list > div{
  padding: 10px 12px;
  border-radius: 10px;
  background: #fffaf2;
  border: 1px solid #e7dcc8;
  color: #4b5563;
}

#detection-readme-modal .det-proxy{
  color: #0f766e;
}

#detection-readme-modal .det-type1,
#detection-readme-modal .det-type2{
  color: #7c3aed;
}

#detection-readme-modal .det-bot{
  color: #b91c1c;
}

#detection-readme-modal .det-on{
  color: #047857;
  font-weight: 900;
}

#detection-readme-modal .det-good{
  color: #15803d;
  font-weight: 900;
}

#detection-readme-modal .det-bad{
  color: #dc2626;
  font-weight: 900;
}

#detection-readme-modal .det-readme-note{
  background: #fffaf0;
  border-color: #ead7b0;
}

#detection-readme-modal .det-readme-warning{
  background: #fff1f2;
  border-color: #fecdd3;
}

@media (max-width: 640px){
  #detection-readme-modal .detection-readme-modal-dialog{
    width: min(96vw, 96vw);
  }

  #detection-readme-modal .det-readme-title{
    font-size: 18px;
  }

  #detection-readme-modal .det-readme-subtitle{
    font-size: 15px;
  }

  #detection-readme-modal .det-readme-block{
    padding: 12px 13px;
  }
}

/* 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;   /* keeps independent heights */
  grid-column:1 / -1;
}

#tg-row > #card-telegram{
  flex: 0 1 50%;
  max-width: 50%;
  min-width: 0;             /* prevents overflow from long content */
}

#tg-row #card-password{
  flex: 0 1 48%;
  max-width: 48%;
  min-width: 0;             /* prevents overflow from long token/fields */
  display:flex;
  flex-direction:column;
}

#tg-row #card-password .toolbar{
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* ============================
   Settings: LEFT column stack (Telegram + Countries)
   ============================ */
#tg-row #tg-left{
  flex: 0 1 50%;
  max-width: 50%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Telegram card should just fill the left column now */
#tg-row #tg-left #card-telegram{
  width: 100%;
  max-width: 100%;
}

/* Countries card fills left column and is the only one that can grow */
#tg-row #tg-left #card-countries{
  width: 100%;
  max-width: 100%;
}

/* Make sure Change Password never stretches with Countries */
#tg-row #card-password{
  align-self: flex-start; /* prevents “grow together” */
}

/* ============================
   Settings: ASN (left) + Mobile/Risk (right stack)
   ============================ */
#panel-settings #asn-mobile-risk-row{
  display:flex;
  flex-wrap:nowrap;
  gap:12px;
  align-items:flex-start;     /* ✅ makes ASN match total height of right stack */
  grid-column:1 / -1;       /* span the full settings grid row */
}

/* LEFT column: ASN card = same width family as Telegram/Countries column */
#panel-settings #asn-mobile-risk-row #card-asn{
  flex: 0 1 50%;
  max-width: 50%;
  min-width: 0;
}

/* ============================
   ASN card: input half width + persistent red chips (6 per row)
   ============================ */

/* Keep Mobile/Risk stack from stretching */
#panel-settings #asn-mobile-risk-row #mobile-risk-stack{
  align-self:flex-start;
}

/* Default ASN card size when empty */
#panel-settings #asn-mobile-risk-row #card-asn{
  min-height: 255px; /* requested default/min size */
}

/* Cut ASN input width by half (only this card) */
#panel-settings #asn-mobile-risk-row #card-asn .field.asn-field{
  flex: 0 0 50%;
  max-width: 50%;
  min-width: 0;
}
#panel-settings #asn-mobile-risk-row #card-asn .field.asn-field input{
  width: 100%;
}

/* ASN chips stack container */
#panel-settings #asn-mobile-risk-row #card-asn .asn-selected{
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 10px;
}

/* 6 per line like the country chips */
#panel-settings #asn-mobile-risk-row #card-asn .asn-selected .asn-pill{
  position: relative;
  flex: 0 0 calc((100% - (10px * 5)) / 6);
  max-width: calc((100% - (10px * 5)) / 6);
  min-width: 0;
  background: rgba(255,255,255,0.04); /* ✅ match Countries chip background */
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 30px 10px 12px;
  color: var(--chip-red);        /* ✅ red text (no red background) */
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#panel-settings #asn-mobile-risk-row #card-asn .asn-selected .asn-x{
  position:absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  border-radius: 9px;
  border: none;
  cursor: pointer;
  background: rgba(255,255,255,0.18);
  color: #fff;
  font-weight: 900;
  line-height: 18px;
  padding: 0;
}

/* Mobile fallback: don’t force 6-per-row on small screens */
@media (max-width: 720px){
  #panel-settings #asn-mobile-risk-row #card-asn .field.asn-field{
    flex: 1 1 100%;
    max-width: 100%;
  }
  #panel-settings #asn-mobile-risk-row #card-asn .asn-selected .asn-pill{
    flex: 0 0 calc((100% - (10px * 2)) / 3);
    max-width: calc((100% - (10px * 2)) / 3);
  }
}

/* RIGHT column: same width family as Change Password card */
#panel-settings #asn-mobile-risk-row #mobile-risk-stack{
  flex: 0 1 48%;
  max-width: 48%;
  min-width: 0;

  display:flex;
  flex-direction:column;
  gap: var(--gap);
}

/* Force the stacked cards to match Change Password width edges */
#panel-settings #asn-mobile-risk-row #mobile-risk-stack #card-mobile-global,
#panel-settings #asn-mobile-risk-row #mobile-risk-stack #risk-card{
  width: 100%;
  max-width: 100%;
}

/* ============================
   Countries selector (matches your dark inputs)
   ============================ */
#card-countries .bc-wrap{ position: relative; width: 100%; }

#card-countries .bc-btn{
  width: 100%;
  min-height: 44px;
  padding: 12px 12px;
  background: var(--panel);            /* uses the card/panel color family */
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

#card-countries .bc-btn:focus{
  outline: none;
  border-color: var(--purple);
}

#card-countries .bc-caret{ color: var(--muted); font-size: 14px; }

#card-countries .bc-menu{
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 340px; /* wide enough, not overly wide */
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
  z-index: 60;
  overflow: hidden;
}

#card-countries .bc-search-wrap{
  padding: 10px;
  border-bottom: 1px solid var(--border);
}

#card-countries .bc-search{
  width: 100%;
  padding: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 14px;
}

#card-countries .bc-search:focus{
  outline: none;
  border-color: var(--purple);
}

#card-countries .bc-list{
  display: flex;
  flex-direction: column;
  max-height: 240px;
  overflow-y: auto;
}

#card-countries .bc-item{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

#card-countries .bc-item:hover{ background: rgba(255,255,255,0.06); }
#card-countries .bc-item:last-child{ border-bottom: 0; }

/* ============================
   Selected countries stack: 6 per line + tiny X
   ============================ */
#card-countries .bc-selected{
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 6 per line */
#card-countries .bc-chip{
  position: relative;
  flex: 0 0 calc((100% - (8px * 5)) / 6);  /* 6 across with gaps */
  max-width: calc((100% - (8px * 5)) / 6);
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  color: #ef4444;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* tiny X top-right */
#card-countries .bc-chip .bc-x{
  position: absolute;
  top: 4px;
  right: 6px;
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 6px;
  background: rgba(255,255,255,0.08);
  color: var(--text);
  font-weight: 900;
  font-size: 12px;
  line-height: 16px;
  cursor: pointer;
  padding: 0;
}

#card-countries .bc-chip .bc-x:hover{
  background: rgba(255,255,255,0.14);
}

/* Responsive: don’t cram 6-per-line on small screens */
@media (max-width: 900px){
  #card-countries .bc-chip{
    flex: 0 0 calc((100% - (8px * 2)) / 3);
    max-width: calc((100% - (8px * 2)) / 3);
  }
}

/* Prevent access from a country (Global) — nicer default height */
#card-countries{
  min-height: 265px;   /* try 360–440px */
}

/* Settings → Change Password: Password Reset Token line */
#card-password .pw-reset-token{
  margin: 2px 0 6px 0;          /* small height bump only */
  font-size: 13px;
  line-height: 1.2;
  overflow-wrap: anywhere;       /* long token never forces width growth */
  word-break: break-word;
}
/* ===== Settings → Change Password layout fixes (RIGHT align form, LEFT note) ===== */

/* Push the Current/New/Save group to the far right edge of the card */
#tg-row #card-password .toolbar.pw-change-toolbar{
  margin-left: auto;                 /* ✅ pushes this whole block to the right */
  align-items: flex-end;             /* ✅ right-align button + field boxes */
  width: min(336px, 100%);          /* ✅ keeps card size unchanged; form has a sane width */
}

/* Keep fields full width INSIDE the right-aligned block */
#tg-row #card-password .toolbar.pw-change-toolbar .field{
  width: 100%;
}

/* Make sure inputs fill the field width */
#tg-row #card-password .toolbar.pw-change-toolbar input{
  width: 100%;
}

/* Left-side green note under the token line */
#card-password .pw-reset-note{
  margin: 6px 0 10px 0;
  color: var(--green);               /* ✅ green font */
  font-size: 15px;
  line-height: 1.25;
  text-align: left;                  /* ✅ stays left aligned */
}
#card-password .pw-reset-token .prt-label{
  color: #a8b2c8;
  font-weight: 700;
}
#card-password .pw-reset-token .prt-token{
  color: #22c55e;                /* green token */
  font-weight: 800;
}

@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 small numeric inputs smaller */
#panel-links #lead-expire,
#panel-links #lead-max,
#panel-links #lead-risk{
  max-width: 140px;
}

/* Links panel: make the widened controls actually fill the space */
#panel-links #lead-domain{
  flex: 1 1 auto;
  min-width: 0;
}

#panel-links #human-html-card #lead-target,
#panel-links #bot-html-card #lead-block-url{
  width: 100%;
}

/* 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; }

/* 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 */
}

/* 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; }
 
 /* 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;
}

/* Domains table column widths (Settings) — FIXED: checkbox col matches Outstock, others unchanged */
/* Domains table width is controlled by the dedicated #domains-card rules below. */

/* 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 (FIX)
   Give Actions more room so "Unblock" never clips. */
#card-outstock table th:nth-child(1),
#card-outstock table td:nth-child(1){
  width: 40px;
}

/* Make Actions wider by +10% and reduce IP/IP Range by -10% */
#card-outstock table th:nth-child(2),
#card-outstock table td:nth-child(2){
  width: 70% !important;          /* IP/IP Range (reduced) */
  overflow-wrap: anywhere;
  word-break: break-word;
}

#card-outstock table th:nth-child(3),
#card-outstock table td:nth-child(3){
  width: 30% !important;          /* Actions (increased) */
  white-space: nowrap;            /* keep Unblock on one line */
}

/* Domains column widths (Checkbox / Domain / Sub / Method / Status / Updated / Actions) */
#domains-card table{
  width: 100%;
  table-layout: fixed;
}

#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: 17ch; }    /* Domain */
#domains-card table th:nth-child(3), #domains-card table td:nth-child(3){ width: 18ch; }    /* Sub */
#domains-card table th:nth-child(4), #domains-card table td:nth-child(4){ width: 10ch; }    /* Method */
#domains-card table th:nth-child(5), #domains-card table td:nth-child(5){ width: 12ch; }    /* Status */
#domains-card table th:nth-child(6), #domains-card table td:nth-child(6){ width: 18ch; }    /* Updated */
#domains-card table th:nth-child(7), #domains-card table td:nth-child(7){ width: 18ch; }    /* Actions */

#domains-card table td:nth-child(2),
#domains-card table td:nth-child(3){
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  vertical-align: top;
}

/* 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 */
 
 /* 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; }

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


/* 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;
}

/* 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;
}
/* Create a Redirect → Link Structure should be BELOW the toolbar fields (not on the right) */
#panel-links .toolbar .lead-help.link-structure-box{
  flex-basis: 100%;
  width: 100%;
  order: 999;          /* keep it after the fields */
  margin-top: 10px;    /* breathing room */
}

/* Create a Redirect: keep the toolbar content packed to the left */
#panel-links .card.wide .toolbar{
  justify-content: flex-start;
}


/* Link Structure box should stack normally (disable flex just for this box) */
#panel-links .lead-help.compact.link-structure-box{
  display: block;
}

/* Link Structure title color override */
#panel-links .lead-help.compact .link-structure-title{
  color:#F5C527 !important;
  font-weight:800;
}

/* Make the new selectors sit nicely under each Part line */
#panel-links .lead-help.compact .link-structure-field{
  flex-basis: 220px;
  max-width: 220px;
}

#panel-links .lead-help.compact .link-structure-field.p0-wide{
  flex-basis: 440px;
  max-width: 440px;
}

#panel-links #lead-part0-digits.part1-invalid{
  border-color:#ef4444 !important;
  box-shadow:0 0 0 2px rgba(239,68,68,.35) !important;
}

#panel-links .lead-help.compact .label{ font-weight:800; color:#ffd7a1; }
#panel-links .lead-help.compact .example{
  opacity:.9;          /* keep your current look */
}

/* Create a Redirect → Link Structure block should stack normally (no flex wrapping) */
#panel-links .lead-help.compact.link-structure-box{
  display: block;
}


/* Links → Create your link (thin wide bar card) */
#panel-links #card-create-your-link{
  padding: 10px 14px 20px; /* extra bottom space under the Create button */
}

#panel-links #card-create-your-link .create-link-row{
  display:flex;
  flex-direction:column;     /* text on top, button below */
  align-items:stretch;
  gap:12px;                  /* space between text + button */
}

#panel-links #card-create-your-link .create-link-text{
  width:100%;
}

#panel-links #card-create-your-link .create-link-action{
  width:100%;
  display:flex;
  justify-content:center;    /* center the Create button */
  margin-top:6px;            /* extra breathing room */
}

#panel-links #card-create-your-link .create-link-action #lead-create{
  width: 200%;
  max-width: 420px; /* safety cap so it doesn't get absurd on wide screens */
}


#panel-links #card-create-your-link .create-link-text h3{
  margin:0;
}

#panel-links #card-create-your-link .create-link-subtitle{
  margin:4px 0 0;
}

/* Website → Create your link (same as Links panel) */
#panel-website #card-create-your-link-website{
  padding: 10px 14px 20px;
}

#panel-website #card-create-your-link-website .create-link-row{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:12px;
}

#panel-website #card-create-your-link-website .create-link-text{
  width:100%;
}

#panel-website #card-create-your-link-website .create-link-action{
  width:100%;
  display:flex;
  justify-content:center;
  margin-top:6px;
}

#panel-website #card-create-your-link-website .create-link-action #website-create{
  width: 200%;
  max-width: 423px;      /* +3 */
  display: block;        /* allows margin auto centering */
  margin: 0 auto;        /* hard-center even if wrapper styling changes */
}

#panel-website #card-create-your-link-website .create-link-text h3{
  margin:0;
}

#panel-website #card-create-your-link-website .create-link-subtitle{
  margin:4px 0 0;
}

/* ===============================
   🌐 Website panel — input visibility
   =============================== */
#panel-website #website-vps-ip{
  background:#fff !important;
  color:#111 !important;
  width: 260px;            /* half-ish width (prevents the huge white bar) */
  max-width: 50%;          /* if the toolbar shrinks, it won’t overflow */
 }

/* Website table cell backgrounds (match Links) */
#panel-website #website-links-tbody td{
  background-color: var(--table-row) !important;
}
#panel-website #website-links-tbody tr:hover td{
  background: #131a2a !important;
}
#panel-website table td:last-child{
  background: var(--table-row) !important;
}

/* Website Links actions: TD paints full height (no black dead zone) */
#panel-website #website-links-tbody tr > td.actions.website-actions{
  background-color: var(--table-row) !important;
  background-clip: padding-box !important;
  vertical-align: top !important;
}

/* Hover should cover the entire actions cell too */
#panel-website #website-links-tbody tr:hover > td.actions.website-actions{
  background-color: #131a2a !important;
}

/* Inner wrapper stacks buttons and stretches so the TD stays “filled” */
#panel-website #website-links-tbody td.actions.website-actions .actions-row{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:10px !important;
  background: transparent !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
}

/* =======================================================================
   Protected Websites table — remove underline ONLY from the Open link
   (Open is an <a class="btn">; other buttons are typically <button>)
   ======================================================================= */
#panel-website #website-links-tbody td.actions.website-actions a.btn,
#panel-website #website-links-tbody td.actions.website-actions a.btn:hover,
#panel-website #website-links-tbody td.actions.website-actions a.btn:focus,
#panel-website #website-links-tbody td.actions.website-actions a.btn:active,
#panel-website #website-links-tbody td.actions.website-actions a.btn:visited{
  text-decoration: none !important;
}

/* ===============================
   🌐 Protected Websites table — hard NO horizontal scroll + wrap long text
   =============================== */

/* 1) never allow horizontal scrolling for Website tables */
#panel-website .table-wrap{
  overflow-x: hidden !important;
  max-width: 100%;
}

#panel-website .table-wrap table{
  min-width: 0 !important;
}

/* 3) wrap ONLY the problem columns: Label (2), Human URL (3), Bot URL (4) */
#panel-website table th:nth-child(2),
#panel-website table td:nth-child(2),
#panel-website table th:nth-child(3),
#panel-website table td:nth-child(3),
#panel-website table th:nth-child(4),
#panel-website table td:nth-child(4){
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

/* ===============================
   🌐 Website panel — READ ME card
   =============================== */

#panel-website #website-readme-card .website-readme-title{
  color:#1d4ed8;            /* deep blue */
  font-weight:900;
  letter-spacing:.6px;
  font-size:16px;
  margin-bottom:10px;
}

#panel-website #website-readme-card .website-readme-body{
  display:flex;
  flex-direction:column;
  gap:10px;
}

#panel-website #website-readme-card .website-readme-lead{
  font-weight:800;
  color:#e7ebff;
}

#panel-website #website-readme-card .website-readme-note{
  /* Container no longer draws the full-width green box */
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
  color: inherit;
}

#panel-website #website-readme-card .website-readme-note-line{
  display: inline-block;               /* ✅ shrink highlight to content width */
  background:rgba(34,197,94,.12);
  border:1px solid rgba(34,197,94,.35);
  color:#bbf7d0;
  padding:8px 10px;
  border-radius:10px;
}

#panel-website #website-readme-card .website-readme-section-title{
  margin-top:2px;
  font-weight:900;
  color:#ffffff;
}

#panel-website #website-readme-card .website-readme-steps{
  margin:0;
  padding-left:18px;
}

#panel-website #website-readme-card .website-readme-steps li{
  margin:6px 0;
  color:#d6def0;
}

#panel-website #website-readme-card .website-readme-pill{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(59,130,246,.12);
  color:#bfdbfe;
  font-weight:800;
  white-space:nowrap;
}

#panel-website #website-readme-card .website-readme-muted{
  color:var(--muted);
}

/* 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 */
}

/* =========================================================
   MOBILE RESPONSIVE PATCH (NO DESKTOP CHANGES)
   - Extends your existing mobile card-row pattern (Dashboard/Visitors)
     to Links / Website / Settings / Users tables
   - Fixes mobile overflow from fixed-width toolbars + tall charts
   ========================================================= */

@media (max-width: 900px){
  /* Your Settings grid is forced to 65/35 on desktop; collapse on smaller screens */
  #panel-settings .grid.cols-2{ grid-template-columns: 1fr !important; }

  /* Your CSS forces these rows to nowrap (desktop). Allow wrap on mobile/tablet. */
  #panel-settings #settings-duo.duo-row,
  #panel-settings #geo-row{
    flex-wrap: wrap !important;
  }
  #panel-settings #settings-duo .card,
  #panel-settings #geo-row .card{
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }

  /* Risk card is hard-sized to 360px; allow full width on small screens */
  #panel-settings #risk-card{
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 720px){

  /* -----------------------------
     A) Sidebar nav: show ALL buttons on mobile portrait (no hidden off-screen)
     ----------------------------- */
  .sidebar .nav{
    flex-direction: row;
    flex-wrap: wrap;           /* ✅ show all buttons (no sideways hidden nav) */
    overflow-x: visible;
    overflow-y: visible;
    gap: 8px;
    padding-bottom: 6px;
  }
  .sidebar .nav .btn{
    flex: 1 1 calc(50% - 10px); /* ✅ 2 per row */
    white-space: normal;        /* ✅ allow label wrap instead of clipping */
  }

  /* -----------------------------
     B) Toolbars: wrap fields and override inline fixed widths
     Links panel has a 780px fixed field; Website panel has 920px fixed field
     ----------------------------- */
  .toolbar{ flex-wrap: wrap; }
  .toolbar .field{
    flex: 1 1 220px !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Website VPS IP input is max-width:50% inline; let it go full width on mobile */
  #panel-website #website-vps-ip{
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Links panel has a desktop-only “width:200%” button rule — cancel on mobile */
  #panel-links #card-create-your-link .create-link-action #lead-create{
    width: 100% !important;
  }

  /* Preview iframes use width:200% + scale(.5) inline; stop overflow on mobile */
  #panel-links iframe,
  #panel-website iframe{
    width: 100% !important;
    transform: none !important;
    transform-origin: top left !important;
  }

  /* -----------------------------
     C) Charts: your canvases are forced to 700px tall on desktop
     (shrink for phones)
     ----------------------------- */
  #chart-trend, #chart-countries,
  #geomap-trend, #geomap-countries{
    height: 320px !important;
    max-height: 320px !important;
  }
  /* Geo pies are 48% / 48% wide on desktop; stack on phones */
  #geomap-pie, #geomap-pievisit{
    width: 100% !important;
    height: 320px !important;
    max-height: 320px !important;
    display: block !important;
  }
  .card.taller-133{ min-height: 0 !important; }

  /* -----------------------------
     D) TABLES: Mobile card-row layout for remaining panels
     (Dashboard/Visitors already have their own mobile rules)
     Targets your real tbody IDs:
       - Links:    #links-tbody  (11 columns)  :contentReference[oaicite:6]{index=6}
       - Website:  #website-links-tbody
       - Outstock: #bl-body      (3 columns)   :contentReference[oaicite:7]{index=7}
       - Domains:  #domains-tbody
       - Users:    #u-body
     ----------------------------- */

  /* Hide table headers for these specific panels/cards only */
  #panel-links table thead,
  #panel-website table thead,
  #card-outstock table thead,
  #domains-card table thead,
  #panel-users table thead{
    display: none !important;
  }

  /* Convert tables to block layout only for these areas */
  #panel-links table, #panel-links tbody, #panel-links tr, #panel-links td,
  #panel-website table, #panel-website tbody, #panel-website tr, #panel-website td,
  #card-outstock table, #card-outstock tbody, #card-outstock tr, #card-outstock td,
  #domains-card table, #domains-card tbody, #domains-card tr, #domains-card td,
  #panel-users table, #panel-users tbody, #panel-users tr, #panel-users td{
    display: block;
    width: 100%;
  }

  /* Row “cards” */
  #links-tbody tr,
  #website-links-tbody tr,
  #bl-body tr,
  #domains-tbody tr,
  #u-body tr{
    margin: 0 0 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background-color: var(--table-row);
    padding: 10px;
  }

  /* Cells become “label : value” rows */
  #links-tbody td,
  #website-links-tbody td,
  #bl-body td,
  #domains-tbody td,
  #u-body td{
    width: auto !important; /* kill fixed column widths on mobile */
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  #links-tbody td:last-child,
  #website-links-tbody td:last-child,
  #bl-body td:last-child,
  #domains-tbody td:last-child,
  #u-body td:last-child{
    border-bottom: 0;
  }

  /* Loading/empty rows (single colspan cell) */
  #links-tbody td[colspan],
  #website-links-tbody td[colspan],
  #bl-body td[colspan],
  #domains-tbody td[colspan],
  #u-body td[colspan]{
    display: block;
    text-align: center;
    justify-content: center;
    border-bottom: 0;
    padding: 14px 8px;
  }
  #links-tbody td[colspan]::before,
  #website-links-tbody td[colspan]::before,
  #bl-body td[colspan]::before,
  #domains-tbody td[colspan]::before,
  #u-body td[colspan]::before{
    display: none !important;
  }

  /* Label styling */
  #links-tbody td::before,
  #website-links-tbody td::before,
  #bl-body td::before,
  #domains-tbody td::before,
  #u-body td::before{
    font-weight: 700;
    color: var(--muted);
    white-space: nowrap;
    padding-right: 10px;
  }

  /* LINKS table labels (11 columns) */
  #links-tbody td:nth-child(1)::before{ display:none; content:""; }
  #links-tbody td:nth-child(1){ justify-content:flex-start; }
  #links-tbody td:nth-child(2)::before{ content:"Slug"; }
  #links-tbody td:nth-child(3)::before{ content:"Label"; }
  #links-tbody td:nth-child(4)::before{ content:"Human URL"; }
  #links-tbody td:nth-child(5)::before{ content:"Bot URL"; }
  #links-tbody td:nth-child(6)::before{ content:"Redirect Mobile?"; }
  #links-tbody td:nth-child(7)::before{ content:"Expires In"; }
  #links-tbody td:nth-child(8)::before{ content:"Max Clicks"; }
  #links-tbody td:nth-child(9)::before{ content:"Visit count"; }
  #links-tbody td:nth-child(10)::before{ content:"Risk Score"; }
  #links-tbody td:nth-child(11)::before{ content:"Actions"; }

  /* WEBSITE table labels (10 columns: chk, label, human, bot, vps, expires, max, visits, risk, actions) */
  #website-links-tbody td:nth-child(1)::before{ display:none; content:""; }
  #website-links-tbody td:nth-child(1){ justify-content:flex-start; }
  #website-links-tbody td:nth-child(2)::before{ content:"Label"; }
  #website-links-tbody td:nth-child(3)::before{ content:"Human URL"; }
  #website-links-tbody td:nth-child(4)::before{ content:"Bot URL"; }
  #website-links-tbody td:nth-child(5)::before{ content:"VPS IP"; }
  #website-links-tbody td:nth-child(6)::before{ content:"Expires In"; }
  #website-links-tbody td:nth-child(7)::before{ content:"Max Clicks"; }
  #website-links-tbody td:nth-child(8)::before{ content:"Visit count"; }
  #website-links-tbody td:nth-child(9)::before{ content:"Risk Score"; }
  #website-links-tbody td:nth-child(10)::before{ content:"Actions"; }

  /* OUTSTOCK labels (3 columns: chk, ip, action) */
  #bl-body td:nth-child(1)::before{ display:none; content:""; }
  #bl-body td:nth-child(1){ justify-content:flex-start; }
  #bl-body td:nth-child(2)::before{ content:"IP / IP Range"; }
  #bl-body td:nth-child(3)::before{ content:"Actions"; }

  /* DOMAINS labels (7 columns: chk, domain, sub, method, status, updated, actions) */
  #domains-tbody td:nth-child(1)::before{ display:none; content:""; }
  #domains-tbody td:nth-child(1){ justify-content:flex-start; }
  #domains-tbody td:nth-child(2)::before{ content:"Domain"; }
  #domains-tbody td:nth-child(3)::before{ content:"Sub"; }
  #domains-tbody td:nth-child(4)::before{ content:"Method"; }
  #domains-tbody td:nth-child(5)::before{ content:"Status"; }
  #domains-tbody td:nth-child(6)::before{ content:"Updated"; }
  #domains-tbody td:nth-child(7)::before{ content:"Actions"; }

  /* USERS labels (10 columns: chk, id, username, role, created, expires, check2, queries today, queries limit, actions) */
  #u-body td:nth-child(1)::before{ display:none; content:""; }
  #u-body td:nth-child(1){ justify-content:flex-start; }
  #u-body td:nth-child(2)::before{ content:"ID"; }
  #u-body td:nth-child(3)::before{ content:"Username"; }
  #u-body td:nth-child(4)::before{ content:"Role"; }
  #u-body td:nth-child(5)::before{ content:"Created On"; }
  #u-body td:nth-child(6)::before{ content:"Expires On"; }
  #u-body td:nth-child(7)::before{ content:"Check2"; }
  #u-body td:nth-child(8)::before{ content:"Queries Today"; }
  #u-body td:nth-child(9)::before{ content:"Queries Limit"; }
  #u-body td:nth-child(10)::before{ content:"Actions"; }

  /* Actions cells: stack buttons under the label for space */
  #links-tbody td:nth-child(11),
  #website-links-tbody td:nth-child(10),
  #bl-body td:nth-child(3),
  #domains-tbody td:nth-child(7),
  #u-body td:nth-child(10){
    flex-direction: column;
    align-items: flex-start;
  }
  #links-tbody td:nth-child(11)::before,
  #website-links-tbody td:nth-child(10)::before,
  #bl-body td:nth-child(3)::before,
  #domains-tbody td:nth-child(7)::before,
  #u-body td:nth-child(10)::before{
    margin-bottom: 6px;
  }

  /* Domains actions: desktop uses grid/floats; force clean flex wrap on mobile */
  #domains-tbody td:last-child{
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
  }
  #domains-tbody td:last-child .btn{
    float: none !important;
    width: auto !important;
    margin: 0 !important;
  }
}

/* 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;
}

/* ==== 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);
}

/* 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) ===== */
/* IMPORTANT:
   - Do NOT use display:grid on a <td> inside a table (causes “dead zone” background gaps).
   - Keep the <td> as a real table-cell, and layout the 4 buttons using floats.
   - DOM order is: 1=VERIFY, 2=ISSUE, 3=ORIGIN, 4=DELETE (from admin.js row render). */
#panel-settings #domains-tbody td:last-child{
  display: table-cell !important;                 /* ✅ keep table-cell so background fills */
  vertical-align: top !important;
  background-color: var(--table-row) !important;  /* ✅ same as other cells */
  background-clip: padding-box !important;
  padding: 10px !important;                       /* normal cell padding */
}

/* Clear floats so the TD height always wraps the buttons (no black band under them) */
#panel-settings #domains-tbody td:last-child::after{
  content:"";
  display:block;
  clear:both;
}

/* Base button layout: 2 columns */
#panel-settings #domains-tbody td:last-child .btn{
  float: left;
  width: calc(50% - 5px);        /* 2 per row with a small gap */
  margin: 0 0 10px 0;            /* vertical gap between rows */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 40px !important;
  padding: 0 12px !important;
  line-height: 1 !important;
  white-space: nowrap;
  text-decoration: none !important; /* safety if any button is an <a> */
}

/* Right column buttons */
#panel-settings #domains-tbody td:last-child .btn:nth-child(2),
#panel-settings #domains-tbody td:last-child .btn:nth-child(3){
  float: right;
}

/* Force row breaks so it becomes a clean 2×2 grid */
#panel-settings #domains-tbody td:last-child .btn:nth-child(1){
  clear: left;
}
#panel-settings #domains-tbody td:last-child .btn:nth-child(2){
  clear: right;
}

/* Swap the 3rd/4th visual positions so:
   Row2: Delete under VERIFY (left), Origin under ISSUE (right) */
#panel-settings #domains-tbody td:last-child .btn:nth-child(3){
  clear: right;   /* starts row2 on the right */
}
#panel-settings #domains-tbody td:last-child .btn:nth-child(4){
  clear: left;    /* starts row2 on the left */
}

/* Remove bottom margin on last button so the cell ends cleanly */
#panel-settings #domains-tbody td:last-child .btn:nth-child(4){
  margin-bottom: 0;
}

/* Hover should cover this Actions cell too (no dead zone on hover) */
#panel-settings #domains-tbody tr:hover > td:last-child{
  background-color: #131a2a !important;
}

/* ✅ Domains: Propagation Check inserted row must NOT show as a black band */
#panel-settings #domains-tbody tr.propcheck-row > td{
  /* IMPORTANT: this row has only 1 TD, so it accidentally matches td:last-child rules.
     Force it back to a normal table cell so it paints like every other row. */
  display: table-cell !important;
  background-color: var(--table-row) !important;
  background-clip: padding-box;
  padding: 10px !important;          /* match normal cell padding */
  vertical-align: top !important;
}

/* Make sure the inner content doesn't create a “dark strip” */
#panel-settings #domains-tbody tr.propcheck-row .prop-body{
  display: block !important;
  width: 100% !important;
  background: inherit !important;
}

#panel-settings #domains-tbody tr.propcheck-row:hover > td{
  background-color: #131a2a !important; /* match your row hover */
}

/* === 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; }

/* 1b) Active Websites — same purple */
.kpis #kpi-websites { 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 */
.kpis #kpi-avail-stock { color: var(--green); }

/* 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; }

/* === Split KPI (Active Links + Active Websites) ============================ */
/* Same KPI card, but show: titles pinned to top corners + counts pinned to bottom corners. */
.kpi.kpi-split .kpi-split-top,
.kpi.kpi-split .kpi-split-mid,
.kpi.kpi-split .kpi-split-bottom{
  width:100%;
  display:flex;
  justify-content:space-between;
  gap:14px;
}

/* Right-side items should visually hug the right edge */
.kpi.kpi-split .kpi-split-top span:last-child,
.kpi.kpi-split .kpi-split-mid span:last-child,
.kpi.kpi-split .kpi-split-bottom span:last-child{
  text-align:right;
}

/* Ensure spans behave consistently */
.kpi.kpi-split .kpi-split-top span,
.kpi.kpi-split .kpi-split-mid span,
.kpi.kpi-split .kpi-split-bottom span{
  display:block;
}

/* === 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;
}

/* === Human Static HTML (Real Visit here): match Bot/Mobile preview height (320px visible) === */
#human-html-card .grid.cols-2 > .field:last-child{
  position: relative;
  height: 320px !important;     /* container height = 320px (visible preview height) */
  overflow: hidden;             /* clip 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. */
#human-html-card #rh-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 */
}

/* === Bot Static HTML (Serve Visit here): match Mobile preview height (320px visible) === */
#bot-html-card .grid.cols-2 > .field:last-child{
  position: relative;
  height: 320px !important;     /* container height = 320px (visible preview height) */
  overflow: hidden;             /* clip 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. */
#bot-html-card #bh-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 */
}

/* === 🌐 Website → Bot Static HTML preview: match Links panel height (320px visible) === */
#website-bot-html-card .grid.cols-2 > .field:last-child{
  position: relative;
  height: 320px !important;
  overflow: hidden;
}

#website-bot-html-card #wbh-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;
}

 /* === 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 websites appear red in Protected Websites table */
#website-links-tbody tr.dead-link td { color: #ff3b3b !important; }
#website-links-tbody tr.dead-link td.clicks-cell .dash { 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 */
 
 
 /* Expired non-admin accounts: fade & block panels (Dashboard + Subscribe + Logout remain usable) */
body.is-expired .sidebar .nav [data-panel="visitors"],
body.is-expired .sidebar .nav [data-panel="links"],
body.is-expired .sidebar .nav [data-panel="settings"],
body.is-expired .sidebar .nav [data-panel="sounds"],
body.is-expired .sidebar .nav [data-panel="geomap"],
body.is-expired .sidebar .nav [data-panel="readme"]{
  opacity:.40;
  filter: grayscale(.25);
  cursor: not-allowed;
}

/* Extra class used by JS for immediate feedback */
.sidebar .nav button.nav-locked{
  opacity:.40;
  filter: grayscale(.25);
  cursor: not-allowed;
}


@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 td{
  background: var(--table-row) !important;                 /* ✅ remove black dead zone */
  border-bottom: 1px solid rgba(255,255,255,.04);          /* ✅ match normal tbody td divider */
  padding: 10px !important;                                 /* ✅ match tbody td padding */
}

.propcheck-row .prop-body{
  background: transparent;                                  /* keep it clean */
  margin: 0;                                                /* prevent any spacing surprises */
}

.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: 17ch; }     /* 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 */

/* =========================================================
   MOBILE — Responsive “card rows” for Recent Activity + Visitors
   - No horizontal scroll
   - Desktop layout remains EXACTLY as-is
   ========================================================= */
@media (max-width: 720px){

	/* Hide table headers on mobile (we’ll label each cell instead) */
	#panel-dashboard table thead,
	#panel-visitors  table thead{
	  display: none !important;
	}

  /* Make the two tables behave like block layouts on mobile */
  #panel-dashboard table,
  #panel-dashboard tbody,
  #panel-dashboard tr,
  #panel-dashboard td,
  #panel-visitors  table,
  #panel-visitors  tbody,
  #panel-visitors  tr,
  #panel-visitors  td{
    display: block !important;
    width: 100% !important;
  }

  /* Each row becomes a “card” */
  #panel-dashboard #recent-tbody tr,
  #panel-visitors  #visitors-tbody tr{
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 12px;
  }

  /* Cell styling inside the card */
  #panel-dashboard #recent-tbody td,
  #panel-visitors  #visitors-tbody td{
    background-color: var(--table-row) !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }

  /* Remove border under last cell in the card */
  #panel-dashboard #recent-tbody tr > td:last-child,
  #panel-visitors  #visitors-tbody tr > td:last-child{
    border-bottom: 0;
  }

  /* Label/value layout for cells EXCEPT checkbox + actions */
  #panel-dashboard #recent-tbody  td:not(:nth-child(1)):not(:nth-child(8)),
  #panel-visitors  #visitors-tbody td:not(:nth-child(1)):not(:nth-child(8)){
    display: flex !important;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
  }

  /* The label (left side) */
  #panel-dashboard #recent-tbody  td:not(:nth-child(1)):not(:nth-child(8))::before,
  #panel-visitors  #visitors-tbody td:not(:nth-child(1)):not(:nth-child(8))::before{
    font-weight: 800;
    color: #c9d4ea;
    flex: 0 0 120px;
    max-width: 120px;
  }

  /* The value (right side) must be allowed to wrap */
  #panel-dashboard #recent-tbody  td:not(:nth-child(1)):not(:nth-child(8)) > * ,
  #panel-visitors  #visitors-tbody td:not(:nth-child(1)):not(:nth-child(8)) > * {
    min-width: 0;
    max-width: 100%;
  }

  /* Column labels (same for both tables) */
  #panel-dashboard #recent-tbody  td:nth-child(2)::before,
  #panel-visitors  #visitors-tbody td:nth-child(2)::before{ content: "Date / Time"; }

  #panel-dashboard #recent-tbody  td:nth-child(3)::before,
  #panel-visitors  #visitors-tbody td:nth-child(3)::before{ content: "IP / IP RANGE"; }

  #panel-dashboard #recent-tbody  td:nth-child(4)::before,
  #panel-visitors  #visitors-tbody td:nth-child(4)::before{ content: "Country / City"; }

  #panel-dashboard #recent-tbody  td:nth-child(5)::before,
  #panel-visitors  #visitors-tbody td:nth-child(5)::before{ content: "ISP / ASN"; }

  #panel-dashboard #recent-tbody  td:nth-child(6)::before,
  #panel-visitors  #visitors-tbody td:nth-child(6)::before{ content: "Device / Version"; }

  #panel-dashboard #recent-tbody  td:nth-child(7)::before,
  #panel-visitors  #visitors-tbody td:nth-child(7)::before{ content: "Status"; }

  /* Checkbox cell: keep it simple */
  #panel-dashboard #recent-tbody  td:nth-child(1),
  #panel-visitors  #visitors-tbody td:nth-child(1){
    display: flex !important;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
  }

  /* Actions cell stays stacked (from Part A), just add a label-like top padding */
  #panel-dashboard #recent-tbody  td:nth-child(8),
  #panel-visitors  #visitors-tbody td:nth-child(8){
    padding-top: 12px !important;
  }
}

/* ===== subscribe panel (scoped) ===== */
/* Everything is scoped to #panel-subscribe so it cannot affect other panels. */
#panel-subscribe .subscribe-scope{
  --bg1:#0b1220;
  --bg2:#0f1b36;
  --stroke:rgba(255,255,255,.10);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.68);
  --accent1:#7c3aed;
  --accent2:#22c55e;
  --shadow: 0 18px 50px rgba(0,0,0,.45);
  --radius: 18px;

  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(900px 450px at 15% 10%, rgba(124,58,237,.35), transparent 60%),
    radial-gradient(900px 450px at 85% 25%, rgba(34,197,94,.22), transparent 60%),
    linear-gradient(140deg, var(--bg1), var(--bg2));
  padding:38px 18px;
  overflow-x:hidden;
}

/* box sizing only inside this panel */
#panel-subscribe .subscribe-scope *,
#panel-subscribe .subscribe-scope *::before,
#panel-subscribe .subscribe-scope *::after{ box-sizing:border-box; }

#panel-subscribe .subscribe-scope .wrap{ max-width:1200px; margin:0 auto; }

/* Notice card styling */
#panel-subscribe .subscribe-scope .notice{
  margin: 0 0 16px;
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: 0 10px 30px rgba(0,0,0,.30);
  border-radius: var(--radius);
  padding: 16px 18px;
}
#panel-subscribe .subscribe-scope .notice .lead{
  margin: 0 0 10px;
  font-weight: 900;
  font-size: 20px;
  color: #facc15;
}
#panel-subscribe .subscribe-scope .notice p{
  margin: 0 0 10px;
  line-height: 1.65;
  color: rgba(255,255,255,.86);
}
#panel-subscribe .subscribe-scope .notice strong.section-title{
  display: block;
  margin: 14px 0 8px;
  font-size: 16px;
  font-weight: 900;
  color: #facc15;
}
#panel-subscribe .subscribe-scope .notice ul{ margin:8px 0 12px 18px; padding:0; }
#panel-subscribe .subscribe-scope .notice li{
  margin: 6px 0;
  line-height: 1.6;
  color: rgba(255,255,255,.86);
}
#panel-subscribe .subscribe-scope .notice .signoff{
  margin-top: 12px;
  font-weight: 800;
  color: rgba(255,255,255,.90);
}

/* Pricing section */
#panel-subscribe .subscribe-scope .pricing-section{
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: 0 10px 30px rgba(0,0,0,.30);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 16px;
}
#panel-subscribe .subscribe-scope .hero{
  padding: 26px 22px;
  position: relative;
  overflow:hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
}
#panel-subscribe .subscribe-scope .hero::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(600px 120px at 10% 0%, rgba(124,58,237,.30), transparent 60%),
    radial-gradient(600px 120px at 90% 0%, rgba(34,197,94,.22), transparent 60%);
  pointer-events:none;
  filter: blur(10px);
  opacity:.9;
}
#panel-subscribe .subscribe-scope .hero-inner{
  position: relative;
  display:flex;
  gap:16px;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
}
#panel-subscribe .subscribe-scope h1{
  margin:0;
  font-size: clamp(22px, 3vw, 34px);
  letter-spacing: -0.02em;
  line-height:1.15;
}
#panel-subscribe .subscribe-scope .sub{
  margin:8px 0 0;
  color: var(--muted);
  font-size: 15px;
}
#panel-subscribe .subscribe-scope .pill{
  margin-top:8px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.18);
  border-radius: 999px;
  color: rgba(255,255,255,.86);
  font-size: 13px;
  white-space: nowrap;
}
#panel-subscribe .subscribe-scope .dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background: linear-gradient(135deg, var(--accent1), var(--accent2));
  box-shadow: 0 0 0 4px rgba(255,255,255,.06);
}
#panel-subscribe .subscribe-scope .grid{
  padding: 0 18px 18px;
  display:grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1050px){
  #panel-subscribe .subscribe-scope .grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px){
  #panel-subscribe .subscribe-scope .grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  #panel-subscribe .subscribe-scope .grid{ grid-template-columns: 1fr; }
}
#panel-subscribe .subscribe-scope .plan{
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border-radius: var(--radius);
  padding: 16px 16px 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.30);
  position: relative;
  overflow:hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
#panel-subscribe .subscribe-scope .plan::after{
  content:"";
  position:absolute;
  inset:auto -40px -60px auto;
  width:160px;
  height:160px;
  background: radial-gradient(circle at 30% 30%, rgba(124,58,237,.25), transparent 60%);
  transform: rotate(12deg);
  pointer-events:none;
}
#panel-subscribe .subscribe-scope .plan:hover{
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.20);
  box-shadow: 0 18px 44px rgba(0,0,0,.40);
}

/* ===== CURRENT PLAN ribbon + Custom plan ===== */
#panel-subscribe .subscribe-scope .plan.is-current-plan::before{
  content: "CURRENT PLAN";
  position: absolute;
  top: 14px;
  left: -48px;
  transform: rotate(-35deg);
  width: 180px;
  text-align: center;
  padding: 6px 0;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(255,255,255,.95);
  background: linear-gradient(135deg, var(--accent1), var(--accent2));
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  z-index: 5;
  pointer-events: none;
}

#panel-subscribe .subscribe-scope .plan.is-current-plan{
  border-color: rgba(255,255,255,.26);
  box-shadow: 0 18px 44px rgba(0,0,0,.45);
}

/* Custom plan: subtle distinction (keeps your theme) */
#panel-subscribe .subscribe-scope .plan.is-custom-plan .badge{
  border-color: rgba(255,255,255,.18);
  background: rgba(0,0,0,.22);
}

#panel-subscribe .subscribe-scope .row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}
#panel-subscribe .subscribe-scope .label{
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
#panel-subscribe .subscribe-scope .price{
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height:1.05;
  margin: 10px 0 6px;
}
#panel-subscribe .subscribe-scope .traffic{
  font-size: 15px;
  color: rgba(255,255,255,.86);
  margin: 0 0 12px;
}
#panel-subscribe .subscribe-scope .term{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-top: 12px;
  border-top: 1px dashed rgba(255,255,255,.14);
  color: rgba(255,255,255,.80);
  font-size: 13px;
}
#panel-subscribe .subscribe-scope .badge{
  font-size: 12px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.84);
  white-space: nowrap;
}
#panel-subscribe .subscribe-scope .editable{
  padding: 0 2px;
  border-radius: 6px;
  background: rgba(255,255,255,.05);
}

/* Subscribe button style */
#panel-subscribe .subscribe-scope .subscribe-btn{
  background: linear-gradient(135deg, var(--accent1), var(--accent2));
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(124,58,237,0.3);
  white-space: nowrap;
}
#panel-subscribe .subscribe-scope .subscribe-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(124,58,237,0.5);
}

/* TXID input row */
#panel-subscribe .subscribe-scope .txid-row{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
}
#panel-subscribe .subscribe-scope .txid-input{
  flex: 1 1 320px;
  min-width: 220px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: rgba(0,0,0,.18);
  color: var(--text);
  outline: none;
}
#panel-subscribe .subscribe-scope .txid-input::placeholder{ color: rgba(255,255,255,.55); }

/* Verify button styled like Subscribe */
#panel-subscribe .subscribe-scope .verify-btn{
  background: linear-gradient(135deg, var(--accent1), var(--accent2));
  color: white;
  border: none;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(124,58,237,0.3);
  white-space: nowrap;
}
#panel-subscribe .subscribe-scope .verify-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(124,58,237,0.5);
}

/* TXID activation feedback (success / error) */
#panel-subscribe .subscribe-scope .txid-msg{
  margin-top: 10px;
  font-weight: 800;
}
#panel-subscribe .subscribe-scope .verify-btn[disabled]{
  opacity: 0.45;
  filter: grayscale(.25);
}


/* Expired user navigation restrictions */
/* NOTE: do NOT disable pointer-events here, because expired users should be able to click
   the faded buttons and receive the toast: "User account expired. Please Subscribe". */
.nav .btn.expired-faded {
  opacity: 0.45 !important;
  filter: grayscale(.25);
  cursor: not-allowed !important;
}

/* =========================================================
   ✅ SIGNUP FORM UI FIXES (scoped to #signup-form only)
   - Contact Method <select>: full width, dark bg, same height
   - Caret inside select (like password eye)
   - WhatsApp row: country selector + input same line
   - Country list: one item per line + dark dropdown
   - Reduce hint font size
   ========================================================= */
#signup-form .select-dark{
  position:relative;
  width:100%;
}

#signup-form .select-dark select{
  width:100%;
  height:44px;                 /* match password input height */
  padding:12px 40px 12px 14px; /* right padding for caret */
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius:10px;
  color: var(--text);
  font-size:15px;
  outline:none;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
}

#signup-form .select-dark .select-caret{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  pointer-events:none;         /* caret inside the box */
  color: var(--muted);
  font-size:14px;
}

/* hints smaller (your request) */
#signup-form .hint{
  font-size:5px;
  color: var(--muted);
  margin-top:6px;
}

/* WhatsApp phone row: keep same line */
#signup-form .phone-row{
  display:flex;
  gap:10px;
  align-items:stretch;
}

/* Country code selector (same height + dark) */
#signup-form .cc-wrap{ position:relative; flex:0 0 auto; }

#signup-form .cc-btn{
  height:44px;
  padding:0 12px;
  border-radius:10px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
}

#signup-form .cc-caret{
  color: var(--muted);
  font-size:14px;
}

/* Phone input same height + same dark color */
#signup-form .phone-input{
  height:44px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius:10px;
  color: var(--text);
}

/* Dropdown menu should be dark, readable */
#signup-form .cc-menu{
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: 0 10px 28px rgba(0,0,0,0.45), 0 2px 10px rgba(0,0,0,0.25);
}

/* Force one country per line (fix “4 per line”) */
#signup-form .cc-list{
  display:block !important;
}

#signup-form .cc-item{
  display:flex !important;
  width:100% !important;
  justify-content:space-between;
  gap:10px;
  background: transparent;
  border:0;
  text-align:left;
  padding:10px 12px;
  cursor:pointer;
  color: var(--text);
}

#signup-form .cc-item:hover{
  background: rgba(255,255,255,0.06);
}

#signup-form .cc-code{ color: var(--text); font-weight:700; }
#signup-form .cc-name{ color: var(--muted); }

/* Search input inside dropdown also dark */
#signup-form .cc-search{
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
}

/* =========================================================
   ✅ FINAL SIGNUP OVERRIDES (authoritative)
   Fixes:
   1) Contact Method select (WhatsApp/Telegram) = same look/size as inputs
   2) +33 country selector = same height/look as inputs
   3) Phone input sits to the RIGHT of +33 (not below)
   4) Country dropdown = ONE per line + scrollable list
   Scoped to #signup-form only (won’t affect dashboard)
   ========================================================= */

/* ===== Contact Method (WhatsApp/Telegram) select ===== */
#signup-form .select-dark{
  position: relative;
  width: 100%;
}

#signup-form .select-dark select{
  width: 100% !important;
  height: 44px !important;                 /* match username/password input height */
  padding: 12px 40px 12px 14px !important; /* space for caret */
  background: var(--panel-2, var(--bg-3)) !important;
  color: var(--text, var(--ink)) !important;
  border: 1px solid var(--border, #232836) !important;
  border-radius: 10px !important;
  font-size: 15px !important;

  /* remove native gray/white select styling */
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  color-scheme: dark;
}

/* dropdown options stay dark too */
#signup-form .select-dark select option{
  background: var(--panel, var(--bg-2)) !important;
  color: var(--text, var(--ink)) !important;
}

/* caret inside the select (your ▾ span) */
#signup-form .select-dark .select-caret{
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--muted, #9aa3b2);
}

/* ===== Phone row (force same line: +33 on left, input on right) ===== */
#signup-form .phone-row{
  display: flex !important;
  flex-wrap: nowrap !important;      /* prevents stacking */
  align-items: stretch !important;
  gap: 10px !important;
}

#signup-form .cc-wrap{
  position: relative;
  flex: 0 0 120px !important;        /* fixed +33 width */
  width: 120px !important;
  min-width: 120px !important;
}

/* +33 button looks EXACTLY like inputs */
#signup-form .cc-btn{
  width: 100% !important;
  height: 44px !important;
  background: var(--panel-2, var(--bg-3)) !important;
  color: var(--text, var(--ink)) !important;
  border: 1px solid var(--border, #232836) !important;
  border-radius: 10px !important;
  padding: 0 12px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  cursor: pointer;
}

/* phone input sits to the right and is narrower than full-row because of +33 */
#signup-form .phone-input{
  flex: 1 1 auto !important;
  width: auto !important;            /* prevents taking a full row under +33 */
  min-width: 0 !important;
  height: 44px !important;           /* match input height */
}

/* ===== Country dropdown: list (one per line) + scroll ===== */
#signup-form .cc-menu{
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 50;

  background: var(--panel, var(--bg-2)) !important;
  border: 1px solid var(--border, #232836) !important;
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
}

/* search input in dropdown also matches */
#signup-form .cc-search{
  width: 100%;
  height: 40px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--panel-2, var(--bg-3)) !important;
  border: 1px solid var(--border, #232836) !important;
  color: var(--text, var(--ink)) !important;
}

/* THIS is what removes the “4 per row” compact layout */
#signup-form .cc-list{
  display: flex !important;
  flex-direction: column !important;   /* one per line */
  flex-wrap: nowrap !important;
  max-height: 260px !important;
  overflow-y: auto !important;         /* scrollable list */
}

#signup-form .cc-item{
  display: flex !important;
  width: 100% !important;
  flex: 0 0 100% !important;           /* prevents packing into multiple columns */
  align-items: center !important;
  gap: 12px !important;

  background: transparent;
  border: 0;
  text-align: left;
  padding: 10px 12px !important;
  cursor: pointer;

  color: var(--text, var(--ink)) !important;
}

#signup-form .cc-item:hover{
  background: rgba(255,255,255,0.06);
}

#signup-form .cc-code{
  font-weight: 700;
  color: var(--text, var(--ink)) !important;
  min-width: 64px;
}

#signup-form .cc-name{
  color: var(--muted, #9aa3b2) !important;
}

/* ===== Link Structure (Create Redirect help box) ===== */
.link-structure-title{
  color:#F5C527;
  font-weight:800;
  display:block;
  margin-top:4px;
}

#panel-links .lead-help.compact .link-structure-field{
  margin-top:6px;
  max-width: 260px;
}

#panel-links .lead-help.compact .link-structure-field select{
  width: 100%;
}

/* --- Force dark Title inputs on all 3 cards --- */
#human-html-card #rh-title,
#bot-html-card   #bh-title,
#mobile-html-card #mh-title{
  background: var(--bg-3) !important;
  color: var(--ink) !important;
  border: 1px solid var(--border) !important;
}

/* Vertical stack for Refresh/Delete/Save */
.btn-stack{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:stretch;
}
.btn-stack .btn{ width:100%; }

/* --- Red line breaker (Links panel cards) --- */
.red-breaker{
  display:flex;
  align-items:center;
  gap:10px;
  margin:18px 0;                 /* equal space above + below */
  color:#ef4444;
  font-weight:700;
  font-size:12px;
  line-height:1;
  white-space:nowrap;
}
.red-breaker::before,
.red-breaker::after{
  content:"";
  flex:1;
  border-top:2px dashed #ef4444; /* looks like - - - - - */
}

/* ✅ Website panel: hard-center the Create button + slightly wider (+3px) */
#panel-website #website-create{
  display:block;
  width: 300px;        /* +3 */
  max-width: 100%;
  margin: 14px auto 0; /* centers */
}

/* =========================================================
   FINAL Actions Cell Cleanup — full background + full hover
   Dashboard Recent + Visitors + Links
   ========================================================= */

/* A) Actions cells: use the same background as all other cells */
#panel-dashboard #recent-tbody  td.actions,
#panel-dashboard #recent-tbody  td:last-child,
#panel-visitors  #visitors-tbody td.actions,
#panel-visitors  #visitors-tbody td:last-child,
#panel-links     #links-tbody    td.actions,
#panel-links     #links-tbody    td:last-child{
  background-color: var(--table-row) !important;
  /* keep normal cell padding (remove any old “150px” hacks) */
  padding: 10px !important;
}

/* B) IMPORTANT: make the inner wrapper inherit the TD background
   so hover affects EVERYTHING (no split/black areas) */
#panel-dashboard #recent-tbody  td:last-child .actions-row,
#panel-visitors  #visitors-tbody td:last-child .actions-row,
#panel-links     #links-tbody    td:last-child .actions-row{
  background: inherit !important;
}

/* C) Full-row hover MUST apply to Actions too */
#panel-dashboard #recent-tbody  tr:hover td:last-child,
#panel-visitors  #visitors-tbody tr:hover td:last-child,
#panel-links     #links-tbody    tr:hover td:last-child{
  background: #131a2a !important;
}

/* D) Mobile: match your card padding */
@media (max-width:720px){
  #panel-dashboard #recent-tbody  td:last-child,
  #panel-visitors  #visitors-tbody td:last-child{
    padding: 10px 12px !important;
  }
}

/* =========================================================
   ACTIONS CELL — kill the black “dead zone” under buttons
   (Dashboard Recent + Visitors)
   ========================================================= */

/* Force the TD itself to paint the full height background */
#panel-dashboard #recent-tbody  tr > td:nth-child(8),
#panel-visitors  #visitors-tbody tr > td:nth-child(8){
  background-color: var(--table-row) !important;
  background-clip: padding-box;
}

/* Ensure hover colors the FULL Actions cell too */
#panel-dashboard #recent-tbody  tr:hover > td:nth-child(8),
#panel-visitors  #visitors-tbody tr:hover > td:nth-child(8){
  background-color: #131a2a !important;
}

/* Make the inner wrapper stretch so there’s no uncovered space */
#panel-dashboard #recent-tbody  tr > td:nth-child(8) .actions-row,
#panel-visitors  #visitors-tbody tr > td:nth-child(8) .actions-row{
  height: 100% !important;
  min-height: 100% !important;
  width: 100% !important;
  background: transparent !important; /* let the TD paint */
  align-self: stretch !important;
}

/* =========================================================
   FINAL FIX (DESKTOP ONLY)
   1) Keep Actions TD as table-cell (prevents black gap)
   2) Stack buttons vertically using .actions-row
   3) Give Recent a bit more Actions width (take from Device)
   ========================================================= */
@media (min-width: 721px){

  /* ---- 1) Actions TD must remain a table-cell so it stretches ---- */
  #panel-dashboard #recent-tbody  tr > td:nth-child(8),
  #panel-visitors  #visitors-tbody tr > td:nth-child(8){
    display: table-cell !important;         /* <-- kills the dead zone */
    vertical-align: top !important;
    background-color: var(--table-row) !important;
  }

  /* ---- 2) Stack actions INSIDE the wrapper (not the TD) ---- */
  #panel-dashboard #recent-tbody  td:nth-child(8) .actions-row,
  #panel-visitors  #visitors-tbody td:nth-child(8) .actions-row{
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    align-items: flex-start !important;
    background: transparent !important;    /* TD paints the full cell */
  }

  #panel-dashboard #recent-tbody  td:nth-child(8) > .btn:last-child,
  #panel-visitors  #visitors-tbody td:nth-child(8) > .btn:last-child{
    margin-bottom: 0 !important;
  }
}
/* === FINAL SAFETY PATCH (put LAST in styles.css) ======================= */

/* Pay modal: don’t rely on undefined --text */
#pay-modal select{ color: var(--ink); }

/* Actions cell: kill any flex wrappers that could force side-by-side */
#panel-dashboard #recent-tbody  td:nth-child(8) .btn-group,
#panel-dashboard #recent-tbody  td:nth-child(8) .inline,
#panel-visitors  #visitors-tbody td:nth-child(8) .btn-group,
#panel-visitors  #visitors-tbody td:nth-child(8) .inline{
  display: block !important;
}

/* =======================================================================
   FINAL FIX — Redirect Links (Slug column + hover + NO wrapper look)
   Put this at the VERY END of styles.css
   ======================================================================= */

/* 1–3) Desktop-only Slug sizing + paint rules */
@media (min-width: 721px){

  /* 1) Slug column ~40% narrower (frees space for Risk Score + Actions) */
  #panel-links table th:nth-child(2),
  #panel-links table td:nth-child(2){
    width: calc(16ch + 66px) !important;
  }

  /* 2) Slug cell must be a real table-cell (prevents hover “dead zone”) */
  #panel-links #links-tbody td:nth-child(2){
    display: table-cell !important;
    padding: 10px !important;                      /* match other cells */
    background-color: var(--table-row) !important; /* same as other columns */
    vertical-align: top !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  /* 3) Full hover shading across the *entire* slug cell */
  #panel-links #links-tbody tr:hover td:nth-child(2){
    background: #131a2a !important;
  }
}

/* 4) Remove the “chip/container” look inside Slug cells (plain text only) */
#panel-links #links-tbody td:nth-child(2) .chip,
#panel-links #links-tbody td:nth-child(2) .badge,
#panel-links #links-tbody td:nth-child(2) .pill{
  display: inline !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  color: inherit !important;
}

/* If slug is wrapped in any extra element, strip visuals */
#panel-links #links-tbody td:nth-child(2) *{
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* =======================================================================
   MOBILE — Links table becomes “card rows” (NO horizontal scroll)
   Desktop remains EXACTLY the same (scoped to max-width:720px)
   ======================================================================= */
@media (max-width: 720px){

  /* Hide table headers */
  #panel-links table thead{ display:none !important; }

  /* Convert the table structure to blocks */
  #panel-links table,
  #panel-links tbody,
  #panel-links tr,
  #panel-links td{
    display:block !important;
    width:100% !important;
  }

  /* Each row becomes a card */
  #panel-links #links-tbody tr{
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 12px;
  }

  /* Card cell styling */
  #panel-links #links-tbody td{
    background-color: var(--table-row) !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  #panel-links #links-tbody tr > td:last-child{ border-bottom: 0; }

  /* Label/value layout for cells except checkbox (1) and actions (11) */
  #panel-links #links-tbody td:not(:nth-child(1)):not(:nth-child(11)){
    display:flex !important;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
  }

  #panel-links #links-tbody td:not(:nth-child(1)):not(:nth-child(11))::before{
    font-weight: 800;
    color: #c9d4ea;
    flex: 0 0 140px;
    max-width: 140px;
  }

  /* Column labels */
  #panel-links #links-tbody td:nth-child(2)::before{ content:"Slug"; }
  #panel-links #links-tbody td:nth-child(3)::before{ content:"Label"; }
  #panel-links #links-tbody td:nth-child(4)::before{ content:"Human URL"; }
  #panel-links #links-tbody td:nth-child(5)::before{ content:"Bot URL"; }
  #panel-links #links-tbody td:nth-child(6)::before{ content:"Redirect Mobile?"; }
  #panel-links #links-tbody td:nth-child(7)::before{ content:"Expires In"; }
  #panel-links #links-tbody td:nth-child(8)::before{ content:"Max Clicks"; }
  #panel-links #links-tbody td:nth-child(9)::before{ content:"Visit count"; }
  #panel-links #links-tbody td:nth-child(10)::before{ content:"Risk Score"; }

  /* Checkbox cell (keep simple) */
  #panel-links #links-tbody td:nth-child(1){
    display:flex !important;
    justify-content:flex-start;
    align-items:center;
    gap:10px;
  }

  /* Actions cell (11): keep vertical stack, no label */
  #panel-links #links-tbody td:nth-child(11){
    padding-top: 12px !important;
  }
  #panel-links #links-tbody td:nth-child(11) .actions-row{
    display:flex !important;
    flex-direction:column !important;
    gap:6px !important;
    align-items:flex-start !important;
  }
}

/* =======================================================================
   HOTFIX — Links table Actions cell paints full height (kills black dead zone)
   Desktop only (keeps mobile card layout untouched)
   ======================================================================= */
@media (min-width: 721px){
  /* Prefer class-based targeting (most reliable), keep nth-child(11) as fallback */
  #panel-links #links-tbody tr > td.actions,
  #panel-links #links-tbody tr > td:nth-child(11){
    display: table-cell !important;                /* ensure TD paints full height */
    vertical-align: top !important;
    background-color: var(--table-row) !important; /* TD paints full height */
    background-clip: padding-box !important;
  }

  #panel-links #links-tbody tr:hover > td.actions,
  #panel-links #links-tbody tr:hover > td:nth-child(11){
    background-color: #131a2a !important;          /* full hover coverage */
  }

  /* Inner wrapper must NOT paint a separate box */
  #panel-links #links-tbody tr > td.actions .actions-row,
  #panel-links #links-tbody tr > td:nth-child(11) .actions-row{
    background: transparent !important;            /* TD paints everything */
    height: 100% !important;
    min-height: 100% !important;
    width: 100% !important;
    align-self: stretch !important;
  }
}

/* =======================================================================
   FINAL FIX — Links table Actions buttons stack vertically + spacing restored
   (Open, QR, Copy, Delete)
   Desktop only — keeps the dead-zone fix intact
   ======================================================================= */
@media (min-width: 721px){

  /* If any wrapper like .btn-group or .inline exists inside Actions, kill row layout */
  #panel-links #links-tbody tr > td.actions .btn-group,
  #panel-links #links-tbody tr > td.actions .inline,
  #panel-links #links-tbody tr > td:nth-child(11) .btn-group,
  #panel-links #links-tbody tr > td:nth-child(11) .inline{
    display: block !important;
  }
  
/* Links table: Action buttons that are <a> must never underline on hover */
#panel-links #links-tbody td.actions a.btn:hover,
#panel-links #links-tbody td:nth-child(11) a.btn:hover{
  text-decoration: none !important;
}

  /* Prefer wrapper-based stacking (most common markup) */
  #panel-links #links-tbody tr > td.actions .actions-row,
  #panel-links #links-tbody tr > td:nth-child(11) .actions-row{
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;                 /* ✅ restores the little spaces */
    align-items: flex-start !important;  /* ✅ keeps button width natural */
  }

  /* Buttons INSIDE .actions-row: stack vertically BUT hug text (no wide bars) */
  #panel-links #links-tbody tr > td.actions .actions-row > .btn,
  #panel-links #links-tbody tr > td.actions .actions-row > a.btn,
  #panel-links #links-tbody tr > td:nth-child(11) .actions-row > .btn,
  #panel-links #links-tbody tr > td:nth-child(11) .actions-row > a.btn{
    display: inline-flex !important;     /* ✅ hug content width */
    width: fit-content !important;       /* ✅ no stretching */
    max-width: 100% !important;
    margin: 0 !important;                /* gap handles spacing */
    text-decoration: none !important;    /* keep anchors clean */
  }

  /* Fallback: if buttons are DIRECT children of the TD (no .actions-row wrapper) */
  #panel-links #links-tbody tr > td.actions > .btn,
  #panel-links #links-tbody tr > td.actions > a.btn,
  #panel-links #links-tbody tr > td:nth-child(11) > .btn,
  #panel-links #links-tbody tr > td:nth-child(11) > a.btn{
    display: inline-flex !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 0 6px 0 !important;        /* ✅ restores spacing */
    text-decoration: none !important;
  }

  #panel-links #links-tbody tr > td.actions > .btn:last-child,
  #panel-links #links-tbody tr > td.actions > a.btn:last-child,
  #panel-links #links-tbody tr > td:nth-child(11) > .btn:last-child,
  #panel-links #links-tbody tr > td:nth-child(11) > a.btn:last-child{
    margin-bottom: 0 !important;
  }
}

/* =======================================================================
   DOMAINS CARD (Settings) — micro alignment fixes ONLY
   Fixes:
   - Register button not flush to right border
   - Verify button not flush to right border
   - Subdomain field nudged left (no width/size changes)
   - Cloudflare token field reduced ~20% and buttons nudged left
   ======================================================================= */

/* A) Row 1: Apex + Subdomain + Register  -------------------------------- */

/* Give the first toolbar a tiny right breathing room (ONLY in Domains card) */
#domains-card > .toolbar:first-of-type{
  padding-right: 12px;
}

/* Nudge the Subdomain field (label + input) slightly left without resizing inputs */
#domains-card > .toolbar:first-of-type .field:nth-child(2){
  margin-left: -12px;
}

/* Register button: add a little space from the card’s right border */
#domains-card #btn-domain-add{
  margin-right: 10px;
}


/* B) Row 2: Cloudflare Token + Save + Verify ----------------------------- */

/* Give the second toolbar a tiny right breathing room (ONLY in Domains card) */
#domains-card > .toolbar:nth-of-type(2){
  padding-right: 12px;
}

/* Reduce ONLY the Cloudflare token field by ~20% (keep input height/look unchanged) */
#domains-card > .toolbar:nth-of-type(2) .field:first-child{
  flex: 0 1 65% !important;     /* was flex:1 (effectively 100% of remaining space) */
  max-width: 65% !important;
}

/* Nudge Save CF Token + Verify slightly left and keep them off the right edge */
#domains-card #btn-cf-save{
  margin-left: -6px;
}

#domains-card #btn-cf-verify{
  margin-right: 10px;           /* ensures it never kisses the right border */
}

/* FINAL (authoritative) — Redirected Links table Actions buttons
   Put this at the VERY END of styles.css */

#panel-links #links-tbody td.actions .actions-row,
#panel-links #links-tbody td:nth-child(11) .actions-row{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
}

#panel-links #links-tbody td.actions .btn-group,
#panel-links #links-tbody td.actions .inline,
#panel-links #links-tbody td:nth-child(11) .btn-group,
#panel-links #links-tbody td:nth-child(11) .inline{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
}

#panel-links #links-tbody td.actions .actions-row > a.btn,
#panel-links #links-tbody td.actions .actions-row > button.btn,
#panel-links #links-tbody td:nth-child(11) .actions-row > a.btn,
#panel-links #links-tbody td:nth-child(11) .actions-row > button.btn{
  display: inline-flex !important;
  width: max-content !important;
  max-width: 100% !important;
  align-self: flex-start !important;
  margin: 0 !important;
  text-decoration: none !important;
}

#panel-links #links-tbody td.actions > a.btn,
#panel-links #links-tbody td.actions > button.btn,
#panel-links #links-tbody td:nth-child(11) > a.btn,
#panel-links #links-tbody td:nth-child(11) > button.btn{
  display: block !important;
  width: max-content !important;
  max-width: 100% !important;
  margin: 0 0 8px 0 !important;
  text-decoration: none !important;
}
#panel-links #links-tbody td.actions > a.btn:last-child,
#panel-links #links-tbody td.actions > button.btn:last-child,
#panel-links #links-tbody td:nth-child(11) > a.btn:last-child,
#panel-links #links-tbody td:nth-child(11) > button.btn:last-child{
  margin-bottom: 0 !important;
}

/* ✅ FINAL OVERRIDE: Mobile landscape must allow full nav scroll (wins vs later mobile patches) */
@media (max-width:920px) and (orientation:landscape){
  #sidebar-collapse{
    display:flex !important;
  }

  .sidebar{
    position: fixed;
    height: 100vh;
  }
  .sidebar .nav{
    flex-direction: column;
    flex-wrap: nowrap;
    overflow-y: auto;   /* ✅ can scroll down to Geo/Readme/Subscribe/Logout/Users */
    overflow-x: hidden;
  }
}

/* =======================================================================
   AUTHORITATIVE DESKTOP TABLE WIDTHS
   - Recent Activity
   - Visitors
   - Redirected Links
   - Protected Websites

   Rules:
   - No horizontal scrolling on computer screens
   - Table always uses 100% of available desktop width
   - Column percentages stay proportional on resize
   - Each table keeps its own independent width map
   - Mobile card layout stays untouched
   ======================================================================= */
@media (min-width: 721px){

  /* 1) Desktop wrapper: no side scroll for these four tables */
  #panel-dashboard .table-wrap,
  #panel-visitors .table-wrap,
  #panel-links .table-wrap,
  #panel-website .table-wrap{
    overflow-x: hidden !important;
    max-width: 100%;
  }

  /* 2) Force the real table to obey the colgroup percentages */
  #panel-dashboard table#recent,
  #panel-visitors table#visitors,
  #panel-links table#links-table,
  #panel-website table#website-links-table{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
  }

  /* 3) Allow content to shrink/wrap inside its assigned % instead of causing overflow */
  #panel-dashboard table#recent th,
  #panel-dashboard table#recent td,
  #panel-visitors table#visitors th,
  #panel-visitors table#visitors td,
  #panel-links table#links-table th,
  #panel-links table#links-table td,
  #panel-website table#website-links-table th,
  #panel-website table#website-links-table td{
    min-width: 0 !important;
    vertical-align: top;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  /* 4) Cancel any old hard checkbox width so the % colgroup controls it */
  #panel-dashboard table#recent th.chk,
  #panel-dashboard table#recent td.chk,
  #panel-visitors table#visitors th.chk,
  #panel-visitors table#visitors td.chk,
  #panel-links table#links-table th.chk,
  #panel-links table#links-table td.chk,
  #panel-website table#website-links-table th.chk,
  #panel-website table#website-links-table td.chk{
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  /* 5) Keep existing actions vertical, but do NOT let actions force weird column growth */
  #panel-dashboard #recent-tbody td.actions .actions-row,
  #panel-visitors #visitors-tbody td.actions .actions-row,
  #panel-links #links-tbody td.actions .actions-row,
  #panel-website #website-links-tbody td.actions.website-actions .actions-row{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* 6) Buttons keep their current look and emoji, but cannot overflow the column */
  #panel-dashboard #recent-tbody td.actions .btn,
  #panel-visitors #visitors-tbody td.actions .btn,
  #panel-links #links-tbody td.actions .btn,
  #panel-website #website-links-tbody td.actions.website-actions .btn,
  #panel-dashboard #recent-tbody td.actions a.btn,
  #panel-visitors #visitors-tbody td.actions a.btn,
  #panel-links #links-tbody td.actions a.btn,
  #panel-website #website-links-tbody td.actions.website-actions a.btn{
    display: inline-flex !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

/* =========================================================
   FINAL ONE-TIME SPACING FIX
   Recent Activity + Visitors
   - adds vertical gap between status chips
   - adds vertical gap between stacked action buttons
   - keeps all buttons/chips in same order and behavior
   ========================================================= */

/* Status chips: stack vertically with a little breathing room */
#panel-dashboard #recent-tbody td:nth-child(7) .status-stack,
#panel-visitors  #visitors-tbody td:nth-child(7) .status-stack{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:6px !important;
}

/* Remove old chip margins inside the new stack so gap is the single source of spacing */
#panel-dashboard #recent-tbody td:nth-child(7) .status-stack .chip,
#panel-visitors  #visitors-tbody td:nth-child(7) .status-stack .chip{
  margin:0 !important;
}

/* Actions: keep buttons below each other with a little spacing */
#panel-dashboard #recent-tbody td:nth-child(8) .actions-row,
#panel-visitors  #visitors-tbody td:nth-child(8) .actions-row{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:6px !important;
}

/* Ensure every action button stays on its own line */
#panel-dashboard #recent-tbody td:nth-child(8) .actions-row .btn,
#panel-visitors  #visitors-tbody td:nth-child(8) .actions-row .btn{
  display:inline-flex !important;
  margin:0 !important;
}

/* Keep emoji + label together inside Recent Activity / Visitors action buttons */
#panel-dashboard #recent-tbody td:nth-child(8) .actions-row .btn,
#panel-visitors  #visitors-tbody td:nth-child(8) .actions-row .btn{
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}