/* ---------- Waiting room ---------- */
html, body.waiting-room {
  margin: 0;
  height: 100%;
  background: #ffffff;
}
body.waiting-room {
  display: flex;
  align-items: center;
  justify-content: center;
}
.spinner {
  width: 42px;
  height: 42px;
  border: 3px solid #eaeaea;
  border-top-color: #999;
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ---------- Admin panel ---------- */
html.admin-html {
  background: #0f1115;
  min-height: 100%;
}
body.admin {
  margin: 0;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #0f1115;
  color: #e6e6e6;
  /* Hints the browser to render native controls (file picker button,
     select dropdown, checkboxes) in dark mode so they match the theme. */
  color-scheme: dark;
}

/* ---------- Sidebar shell ---------- */
.admin-shell { display:flex; min-height:100vh; }
.sidebar {
  width: 210px; flex-shrink:0; background:#12141a; border-right:1px solid #23262e;
  display:flex; flex-direction:column; transition: width .18s ease;
}
html.sidebar-collapsed .sidebar { width: 60px; }
.sidebar-header { display:flex; align-items:center; justify-content:space-between; padding:16px 14px; gap:8px; }
.sidebar-header .brand-label { font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; }
.sidebar-toggle {
  background:none; border:none; color:#9aa4b2; cursor:pointer;
  padding:4px 6px; border-radius:6px; flex-shrink:0; display:flex; align-items:center;
}
.sidebar-toggle:hover { background:#1c2028; color:#fff; }
.sidebar-nav { display:flex; flex-direction:column; gap:2px; padding:6px 10px; }
.sidebar-footer { margin-top:auto; padding:6px 10px 14px; border-top:1px solid #23262e; padding-top:10px; }
.sidebar-link {
  display:flex; align-items:center; gap:12px; padding:10px 10px; border-radius:6px;
  color:#c9cdd4; text-decoration:none; font-size:13.5px; white-space:nowrap; overflow:hidden;
}
.sidebar-link:hover { background:#1c2028; color:#fff; }
.sidebar-link.active { background:#1c2836; color:#5b9bff; font-weight:500; }
.sidebar-link .icon { width:18px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
html.sidebar-collapsed .sidebar-link .label,
html.sidebar-collapsed .sidebar-header .brand-label { display:none; }
html.sidebar-collapsed .sidebar-header { justify-content:center; }
html.sidebar-collapsed .sidebar-link { justify-content:center; }

.admin-main { flex:1; min-width:0; }

.admin-wrap { max-width: 1100px; margin: 0 auto; padding: 32px 20px 80px; }
.admin-header { display:flex; justify-content:space-between; align-items:center; margin-bottom: 24px; }
.admin-header h1 { font-size: 20px; font-weight: 600; margin:0; }
.admin-header a { color:#9aa4b2; text-decoration:none; font-size: 14px; }
.admin-header a.back-link { color:#e6e6e6; font-weight:500; display:inline-flex; align-items:center; gap:6px; }
.admin-header a.back-link:hover { color:#fff; }

.section-title { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color:#9aa4b2; margin: 32px 0 10px; }

table { width: 100%; border-collapse: collapse; background:#171a21; border-radius:8px; overflow:hidden; }
th, td { text-align:left; padding: 10px 12px; font-size: 13px; border-bottom: 1px solid #23262e; }
th { color:#9aa4b2; font-weight:500; }
tr:last-child td { border-bottom: none; }

/* Presence badges: green On Page / blue Idle / grey Inactive */
.badge {
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; padding:3px 9px; border-radius:999px;
  background:#1c2028; color:#c9cdd4;
  white-space:nowrap; /* keep "On Page" etc. on a single line, never "On\nPage" */
}
.badge svg { display:block; }
.badge .dot { width:7px; height:7px; border-radius:50%; }
.badge.on-page { color:#3ddc84; }
.badge.on-page .dot { background:#3ddc84; }
.badge.idle { color:#5b9bff; }
.badge.idle .dot { background:#5b9bff; }
.badge.inactive { color:#9aa0ab; }
.badge.inactive .dot { background:#5a5f6b; }
.badge.bot-flag {
  background:#3a1f24; color:#ff8a8a; cursor:help;
}
.badge.bot-flag .dot { display:none; }
/* The bot badge sits on its own line under the guest name (the Client column
   is narrow, so it wraps there anyway). Block + top margin aligns it to the
   name's edge - a left margin would just indent it away from the name. */
.botline { display:block; margin-top:4px; }

.ip-flag { color:#ff8a8a; }

.btn {
  background:#2b6cff; color:#fff; border:none; padding:6px 12px; border-radius:6px;
  font-size: 13px; cursor:pointer; text-decoration:none; display:inline-block;
}
.btn.secondary { background:#2a2d35; color:#e6e6e6; }
.btn.danger { background:#3a1f24; color:#ff8a8a; }
.btn:hover { opacity:0.88; }

select.piece-select {
  background:#101216; color:#e6e6e6; border:1px solid #2a2d35; border-radius:6px; padding:5px 8px; font-size:13px;
}

/* Generic admin form controls (upload fields, etc.) */
body.admin input[type="text"],
body.admin input[type="password"],
body.admin select {
  background:#101216;
  color:#e6e6e6;
  border:1px solid #2a2d35;
  border-radius:6px;
  padding:7px 10px;
  font-size:13px;
}
body.admin input[type="file"] {
  color:#e6e6e6;
  font-size:13px;
}

.upload-box {
  margin-top: 40px; padding: 18px; border:1px dashed #2a2d35; border-radius:8px;
}
.upload-box h3 { margin-top:0; font-size:14px; }

.artist-group { margin-top: 20px; }
.artist-head {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:8px; padding-bottom:6px; border-bottom:1px solid #23262e;
}
.artist-name {
  font-size: 13px; font-weight:600; color:#e6e6e6;
}
/* When the name sits inside the flex header, the header owns the divider. */
.artist-head .artist-name { margin-bottom:0; padding-bottom:0; border-bottom:none; }
.artist-del-form { margin:0; flex-shrink:0; }

.path-link { margin-bottom:4px; }
.path-link .piece-url-link { color:#5b9bff; text-decoration:none; font-size:12px; }
.path-link .piece-url-link:hover { text-decoration:underline; }
.path-edit-form { display:flex; gap:6px; }
.path-edit-form .path-input {
  padding:4px 8px !important; font-size:12px !important; width:140px;
}
.path-edit-form .btn { padding:4px 10px; font-size:12px; }

/* User Management page */
.info-grid {
  display:grid; grid-template-columns: repeat(3, 1fr); gap:16px;
  background:#171a21; border-radius:8px; padding:18px; margin-top:16px;
  font-size:13px;
}
.info-grid .muted { font-size:11px; text-transform:uppercase; letter-spacing:.05em; }

.comments-list { display:flex; flex-direction:column; gap:10px; }
.comment-item { background:#171a21; border-radius:8px; padding:12px 14px; }
.comment-item.new { animation: commentPulse 1.4s ease; }
@keyframes commentPulse {
  from { background:#1f2f22; }
  to { background:#171a21; }
}
.comment-meta { display:flex; justify-content:space-between; font-size:12px; color:#9aa4b2; margin-bottom:6px; }
.comment-title { font-size:14px; font-weight:700; color:#e6e6e6; line-height:1.4; margin-bottom:3px; white-space:pre-wrap; }
.comment-text { font-size:13px; line-height:1.5; white-space:pre-wrap; }

.live-toast {
  position: fixed; bottom: 20px; right: 20px; z-index: 9999;
  background:#171a21; color:#e6e6e6; border:1px solid #2a2d35;
  padding: 12px 16px; border-radius: 8px; font-size:13px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  opacity:0; transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease;
  max-width: 320px;
  display:flex; align-items:flex-start; gap:8px;
}
.live-toast .toast-icon { flex-shrink:0; margin-top:2px; color:#5b9bff; }
.live-toast.show { opacity:1; transform:translateY(0); }

.login-wrap { display:flex; align-items:center; justify-content:center; height:100vh; background:#0f1115; }
.login-box { background:#171a21; padding:32px; border-radius:10px; width:280px; }
.login-box input {
  width:100%; box-sizing:border-box; padding:9px 10px; margin-bottom:12px;
  background:#101216; border:1px solid #2a2d35; border-radius:6px; color:#e6e6e6;
}
.login-box .btn { width:100%; padding:10px; text-align:center; }
.error { color:#ff8a8a; font-size:13px; margin-bottom:10px; }
small.muted { color:#6b7280; }

/* Master Control */
.flash-box {
  padding: 14px 16px; border-radius: 8px; margin: 16px 0; font-size:13px;
}
.flash-box.flash-ok { background:#16241a; color:#8fe0a8; border:1px solid #234a2e; }
.flash-box.flash-error { background:#3a1f24; color:#ff8a8a; border:1px solid #4a2a30; }
.flash-box.password-reveal { background:#1c2028; border:1px solid #2a2d35; color:#e6e6e6; }
.password-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 16px; background:#101216; border:1px solid #2a2d35; border-radius:6px;
  padding:10px 12px; margin:8px 0; letter-spacing:0.5px; user-select:all;
}

/* ---- Live input view (admin) ------------------------------------------- */
.live-inputs { display:flex; flex-direction:column; gap:12px; }
.live-guest {
  background:#171a21; border:1px solid #23262e; border-radius:8px; padding:12px 14px;
}
.live-guest-name { font-weight:600; font-size:13px; color:#e6e6e6; margin-bottom:8px; }
.live-field {
  display:flex; gap:12px; align-items:baseline; padding:5px 0;
  border-top:1px solid #20242c;
}
.live-field:first-of-type { border-top:none; }
.live-label {
  flex:0 0 34%; max-width:34%; color:#9aa4b2; font-size:12px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.live-value {
  flex:1; color:#e6e6e6; font-size:13px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  white-space:pre-wrap; word-break:break-word; transition: background .5s ease;
  border-radius:4px; padding:1px 4px;
}
.live-field.changed .live-value { background:#1c2836; }

/* ---- Per-gallery admin password cell (Master Control) ------------------ */
.pw-cell { display:flex; gap:5px; align-items:center; flex-wrap:wrap; }
.pw-field {
  background:#0f1115; border:1px solid #23262e; color:#e6e6e6; border-radius:5px;
  padding:3px 6px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px;
}
.access-details summary { color:#9aa4b2; }
.access-details summary:hover { color:#e6e6e6; }

/* ---- Custom scrollable dropdown (Redirect this guest) ------------------ */
.cselect { position:relative; display:inline-block; min-width:210px; }
.cselect-trigger {
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:8px;
  background:#0f1115; border:1px solid #23262e; color:#e6e6e6; border-radius:6px;
  padding:8px 10px; font-size:13px; cursor:pointer; text-align:left; font-family:inherit;
}
.cselect-trigger:hover { border-color:#3a3f4a; }
.cselect.open .cselect-trigger { border-color:#5b9bff; }
.cselect-trigger svg { flex-shrink:0; transition:transform .15s ease; opacity:.7; }
.cselect.open .cselect-trigger svg { transform:rotate(180deg); }
.cselect-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cselect-panel {
  display:none; position:absolute; z-index:60; top:calc(100% + 4px); left:0; min-width:100%;
  max-height:280px; overflow-y:auto; background:#171a21; border:1px solid #2a2f3a;
  border-radius:8px; box-shadow:0 10px 28px rgba(0,0,0,.45); padding:4px;
}
.cselect.open .cselect-panel { display:block; }
.cselect-option {
  padding:8px 10px; font-size:13px; color:#c9cdd4; border-radius:5px; cursor:pointer; white-space:nowrap;
}
.cselect-option:hover { background:#1c2028; color:#fff; }
.cselect-option.selected { background:#1c2836; color:#5b9bff; }
.cselect-empty { padding:8px 10px; font-size:12px; color:#6b7280; }
.cselect-panel::-webkit-scrollbar { width:10px; }
.cselect-panel::-webkit-scrollbar-thumb { background:#2a2f3a; border-radius:5px; }
.cselect-panel::-webkit-scrollbar-track { background:transparent; }

/* ---- Master Control table redesign ------------------------------------ */
.master-table td { vertical-align:top; }
.domain-cell { display:inline-flex; align-items:center; gap:6px; }
.domain-globe { color:#5b9bff; display:inline-flex; }
.domain-name { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; color:#e6e6e6; }
/* Compact domain label used in the aggregated dashboard "Domain" column and the
   Manage-guest "Gallery" field. */
.domain-cell-sm { display:inline-flex; align-items:center; gap:5px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; }

.ssl-cell { display:flex; align-items:center; gap:8px; }
.ssl-toggle { display:inline; margin:0; }

.admin-cell { display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.admin-btn-row { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.admin-btn-row form { display:inline; margin:0; }

/* small buttons */
.btn-sm { font-size:11px; padding:4px 9px; display:inline-flex; align-items:center; gap:5px; }
.btn-sm svg { width:13px; height:13px; }

/* round icon buttons (+ / - / eye / copy) */
.icon-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:6px; border:1px solid #2a2f3a;
  background:#1c2028; color:#c9cdd4; font-size:15px; line-height:1; cursor:pointer; padding:0;
}
.icon-btn:hover { background:#242a34; color:#fff; }
.icon-btn.add { color:#3ddc84; border-color:#274b38; }
.icon-btn.add:hover { background:#183226; }
.icon-btn.danger { color:#ff8a8a; border-color:#4b2a2a; }
.icon-btn.danger:hover { background:#3a1f24; }
.icon-btn.pw-copy.ok { color:#3ddc84; }

/* ---- Modal (Manage pages) --------------------------------------------- */
.modal-overlay {
  position:fixed; inset:0; z-index:200; background:rgba(4,6,10,.66);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.modal-overlay[hidden] { display:none; }
.modal {
  width:100%; max-width:440px; max-height:82vh; display:flex; flex-direction:column;
  background:#12141a; border:1px solid #2a2f3a; border-radius:12px; padding:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
}
.modal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.modal-head h3 { margin:0; font-size:15px; }
.modal-close { background:none; border:none; color:#9aa4b2; font-size:24px; line-height:1; cursor:pointer; padding:0 4px; }
.modal-close:hover { color:#fff; }
.modal-tools { display:flex; gap:8px; align-items:center; margin-bottom:10px; }
.modal-filter { flex:1; background:#0f1115; border:1px solid #23262e; color:#e6e6e6; border-radius:6px; padding:6px 9px; font-size:12px; }
.modal-list { overflow-y:auto; flex:1; border:1px solid #23262e; border-radius:8px; padding:4px; margin-bottom:12px; }
.modal-check { display:flex; align-items:center; gap:9px; padding:8px 9px; border-radius:6px; font-size:13px; color:#c9cdd4; cursor:pointer; }
.modal-check:hover { background:#1c2028; }
.modal-check input { width:15px; height:15px; flex-shrink:0; }
.modal-foot { display:flex; justify-content:flex-end; gap:8px; }
.modal-list::-webkit-scrollbar { width:10px; }
.modal-list::-webkit-scrollbar-thumb { background:#2a2f3a; border-radius:5px; }

/* ---- Device / OS / browser icons -------------------------------------- */
.tech-ico { width:18px; height:18px; flex-shrink:0; vertical-align:middle; }
img.tech-ico { object-fit:contain; display:inline-block; }
svg.tech-ico { display:inline-block; }
span.tech-ico { display:inline-flex; align-items:center; justify-content:center; }
span.tech-ico svg { width:100%; height:100%; }
.tech-ico.muted-ico { color:#9aa4b2; }    /* desktop/phone outline */
.tech-ico.globe-ico { color:#5b9bff; }    /* unknown-browser globe */
.ico-cell { display:inline-flex; align-items:center; gap:6px; }
.ico-cell .tech-ico { width:17px; height:17px; }

/* ---- Advanced device details ------------------------------------------ */
.ua-block { margin-bottom:12px; }
.ua-row { display:flex; gap:8px; align-items:flex-start; }
.ua-row code {
  flex:1; background:#0f1115; border:1px solid #23262e; border-radius:6px; padding:8px 10px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; color:#c9cdd4;
  word-break:break-all; white-space:pre-wrap; max-height:96px; overflow-y:auto;
}
.fp-table { width:100%; border-collapse:collapse; background:transparent; }
.fp-table tr { border:none; }
.fp-table td { border-bottom:1px solid #20242c; padding:7px 10px; font-size:12.5px; vertical-align:top; }
.fp-key { color:#9aa4b2; width:42%; }
.fp-val {
  color:#e6e6e6; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; word-break:break-word;
}

/* Wrapper that lets a wide table scroll sideways inside its own box instead
   of forcing the whole page wide. */
.table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* =========================================================================
   Mobile / narrow screens.
   The admin panel is desktop-first (fixed side rail + wide multi-column
   tables). Below this width we turn the rail into a scrollable top bar,
   collapse the guest tables into labelled cards (using each cell's
   data-label), and relax the grids so the Dashboard (Users) and Manage-guest
   pages are fully usable on a phone.
   ========================================================================= */
@media (max-width: 760px) {
  /* Sizing safety net: with no global reset, any width:100% control would
     otherwise add its own padding/border on top of 100% and overflow the
     viewport. Scoped to the mobile admin view so the desktop layout is
     untouched. Also hard-stop any accidental horizontal page scroll. */
  body.admin { overflow-x:hidden; }
  .admin-main, .admin-wrap, .admin-wrap * { box-sizing:border-box; }
  .admin-main { max-width:100%; }

  /* Side rail -> horizontal top bar */
  .admin-shell { flex-direction:column; }
  .sidebar {
    width:100% !important; flex-direction:row; align-items:center;
    border-right:none; border-bottom:1px solid #23262e; overflow-x:auto;
  }
  .sidebar-header { display:none; }
  .sidebar-nav { flex-direction:row; padding:6px 8px; gap:4px; flex:1; }
  .sidebar-link { padding:8px 10px; }
  .sidebar-footer { margin-top:0; border-top:none; border-left:1px solid #23262e; padding:6px 8px; }
  /* The collapse toggle has no meaning as a top bar - ignore any saved
     collapsed state so the labels stay readable. */
  html.sidebar-collapsed .sidebar { width:100% !important; }
  html.sidebar-collapsed .sidebar-link .label,
  html.sidebar-collapsed .sidebar-header .brand-label { display:inline; }

  .admin-wrap { padding:20px 14px 60px; }
  .admin-header { margin-bottom:16px; }

  /* Guest tables -> stacked cards: one card per guest, each field labelled. */
  /* border-box is essential here: once these become display:block with
     width:100%, content-box would add each cell's padding + border ON TOP of
     100%, pushing the cards ~30px past the viewport (right-edge clipping). */
  table.dash-table,
  table.dash-table tbody,
  table.dash-table tr,
  table.dash-table td { box-sizing:border-box; }
  table.dash-table { background:transparent; border-radius:0; display:block; width:100%; }
  table.dash-table thead { display:none; }
  table.dash-table tbody,
  table.dash-table tr,
  table.dash-table td { display:block; width:100%; max-width:100%; }
  table.dash-table tr {
    background:#171a21; border:1px solid #23262e; border-radius:10px;
    margin-bottom:12px; padding:2px 4px;
  }
  table.dash-table td {
    display:flex; justify-content:space-between; align-items:flex-start; gap:14px;
    text-align:left; padding:9px 12px; border-bottom:1px solid #20242c;
  }
  table.dash-table tr td:last-child { border-bottom:none; }
  table.dash-table td::before {
    content:attr(data-label); color:#9aa4b2; font-weight:500;
    flex:0 0 auto; text-transform:none; letter-spacing:0;
  }
  /* The whole value on the right, kept as one unit so multi-part values
     (name+badge, IP+VPN tag) stay together and right-aligned. min-width:0 +
     wrapping lets long IPs/locations wrap instead of clipping off-screen. */
  table.dash-table .cell-val {
    text-align:right; min-width:0; word-break:break-word; overflow-wrap:anywhere;
  }
  /* Icon cells (OS/Browser) keep their icon+text together on the right. */
  table.dash-table .cell-val.ico-cell { justify-content:flex-end; }
  /* Empty-state message rows ("No one active", "Queue is empty") span full
     width with no label. */
  table.dash-table td[colspan] { display:block; text-align:left; }
  table.dash-table td[colspan]::before { content:none; }
  /* Action cell (Manage / Approve): full-width button, no label. */
  table.dash-table td.row-action { justify-content:stretch; }
  table.dash-table td.row-action::before { content:none; }
  table.dash-table td.row-action .btn,
  table.dash-table td.row-action form { width:100%; }
  table.dash-table td.row-action .btn { display:block; text-align:center; }

  /* Manage-guest info grid: 3 columns -> 2 */
  .info-grid { grid-template-columns:repeat(2, 1fr); gap:12px; padding:14px; }

  /* Redirect dropdowns stack full width instead of sitting side by side. */
  .cselect { min-width:0; width:100%; }
  .cselect-panel { width:100%; }

  /* Pages: each artist's piece table scrolls sideways rather than pushing
     the page wide. */
  .artist-group { overflow-x:auto; }
}

@media (max-width: 430px) {
  .info-grid { grid-template-columns:1fr; }
}

/* Question-mark help tooltip (e.g. the Master Control "Admin" column header). */
.help-tip {
  display:inline-flex; align-items:center; justify-content:center;
  width:15px; height:15px; border-radius:50%; background:#2a2f3a; color:#9aa4b2;
  font-size:10px; font-weight:700; cursor:help; position:relative; margin-left:5px;
  vertical-align:middle; user-select:none;
}
.help-tip:hover, .help-tip:focus { background:#3a4150; color:#fff; outline:none; }
/* position:fixed so the bubble is anchored to the viewport, not the table -
   otherwise the table's overflow (and the horizontal scroll wrapper) would clip
   it. master.php's script sets top/left on hover/focus. */
.help-bubble {
  display:none; position:fixed; z-index:9999;
  width:280px; max-width:min(280px, calc(100vw - 20px)); padding:11px 13px; border-radius:9px;
  background:#1c2028; border:1px solid #2f3542; box-shadow:0 12px 34px rgba(0,0,0,.55);
  color:#c9cdd4; font-size:12px; font-weight:400; line-height:1.5;
  text-transform:none; letter-spacing:normal; white-space:normal; text-align:left;
}
.help-bubble code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; color:#8fb8ff; word-break:break-all; }
.help-bubble strong { color:#e6e6e6; }
.help-tip.show .help-bubble { display:block; }

/* ---- Themed dialogs (admin-ui.js: galleryConfirm/Alert/Form) ------------- */
.gd-overlay { opacity:0; transition:opacity .15s ease; }
.gd-overlay.show { opacity:1; }
.gd-modal { transform:translateY(6px) scale(.99); transition:transform .15s ease; }
.gd-overlay.show .gd-modal { transform:none; }
.gd-body { margin:4px 0 14px; flex:1 1 auto; overflow-y:auto; min-height:0; }
.gd-msg { margin:0; font-size:13.5px; line-height:1.55; color:#c9cdd4; white-space:pre-wrap; }
.gd-intro { margin-bottom:12px; }
.gd-form { display:flex; flex-direction:column; gap:12px; }
.gd-field { display:flex; flex-direction:column; gap:5px; }
.gd-field-label { font-size:12px; color:#9aa4b2; }
.gd-input {
  background:#0f1115; border:1px solid #2a2d35; color:#e6e6e6;
  border-radius:6px; padding:8px 10px; font-size:13px; width:100%; box-sizing:border-box;
}
.gd-input:focus { border-color:#5b9bff; outline:none; }

/* "Contains custom values" note under a redirect-dropdown option. */
.cselect-note { display:block; font-size:10.5px; color:#8a93a3; margin-top:2px; letter-spacing:.02em; }
.cselect-option.selected .cselect-note { color:#9fc0ff; }

/* ---- Page preview modal (admin/api/preview.php screenshot) --------------- */
.preview-modal { max-width:900px; }
.preview-stage {
  background:#0b0d11; border:1px solid #23262e; border-radius:8px;
  min-height:200px; display:flex; align-items:center; justify-content:center;
  overflow:auto; margin:6px 0 12px; padding:8px;
}
.preview-stage img { max-width:100%; height:auto; display:block; border-radius:4px; box-shadow:0 6px 22px rgba(0,0,0,.5); }
/* Mobile view: keep the screenshot at a phone-ish width so it reads as a phone. */
.preview-stage[data-view="mobile"] { align-items:flex-start; }
.preview-stage[data-view="mobile"] img { max-width:390px; width:100%; }
.preview-status { color:#9aa4b2; font-size:13px; padding:40px 16px; text-align:center; }
/* Desktop / mobile toggle above the stage. */
.preview-toggle { display:flex; gap:8px; margin:2px 0 4px; }
.preview-view-btn.is-active { background:#2b6cb0; border-color:#2b6cb0; color:#fff; }