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

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

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

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

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

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

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

  --accent:#8a7eff;
}

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

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

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

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

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

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

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

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

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

#risk-card { align-self: start; }

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Narrower “Test” buttons in Sounds page (~1/3 width each) */
/* 7 distinct solid colors for each Test button */
.snd-test[data-kind="allow"]  { background:#2563eb; color:#fff; }
.snd-test[data-kind="ungrant"],
.snd-test[data-kind="block"]  { background:#ef4444; color:#fff; }
.snd-test[data-kind="manual"] { background:#f59e0b; color:#111; }
.snd-test[data-kind="Mobile"] { background:#7c3aed; color:#fff; }
.snd-test[data-kind="country"]{ background:#10b981; color:#111; }
.snd-test[data-kind="asn"]    { background:#06b6d4; color:#111; }
.snd-test[data-kind="risk"]   { background:#e11d48; color:#fff; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#geomap-trend,
#geomap-countries {
  display:block;
  width:100%;
  height:360px;       /* bigger cards on Geo/Map panel */
  max-height:360px;
}

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

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

/* Geo/Map pie sizing */
.pie-wrap { min-height: calc(1.33 * 280px); }
.pie-canvas { width: 70%; height: calc(1.33 * 280px); display:block; margin: 0 auto; }

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

.pie-wrap { width:70%; /* 7/10 of the big chart width */
            min-width: min(900px, 100%); /* reasonable floor on large screens, still responsive */
          }
.pie-canvas { width:100%; height: calc(133%); /* 4/3 of typical chart height */ }

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

/* ===== Links panel specific sizing ===== */
#panel-links table th:nth-child(2), /* Slug */
#panel-links table td:nth-child(2) { width: 26ch; }  /* ~5 lines for your long slug */

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

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

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

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

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

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

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

/* Stack Action buttons vertically in Users table */
#u-body .actions-row{
  display:flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

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

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

td.actions, .actions-row { background: transparent !important; }

/* Settings two-up layout (desktop) */
#panel-settings #risk-card,
#panel-settings #domains-card {
  display:inline-block;
  vertical-align: top;
}
#panel-settings #risk-card    { width: 50%; padding-right: calc(var(--gap)/2); }
#panel-settings #domains-card { width: 50%; padding-left:  calc(var(--gap)/2); }

@media (max-width: 920px){
  #panel-settings #risk-card,
  #panel-settings #domains-card { width: 100%; padding: 0; display:block; }
}

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