/* Stay Sava Admin — hand-written, no build step.
   Palette/type/radius lifted from the public site (css/home.css, css/base.css
   in staysava.remote): navy #002366 primary, green #74cc00 accent, Poppins
   (the site's own Google Fonts fallback for the licensed AvenirNext),
   soft-rounded (~.15em) buttons. (The gold accent from an earlier iteration
   of this palette has been removed — green is now the sole accent colour.) */

:root {
  --navy: #002366;
  --navy-700: #001c52;
  --navy-600: #05316f;
  --navy-100: #e7ecf5;
  --green: #74cc00;
  --green-dark: #5fa600;
  --red: #d64545;

  --ink: #1a1f2b;
  --ink-soft: #5a6473;
  --border: #e1e5ec;
  --surface: #ffffff;
  --surface-muted: #f5f6f9;
  --page-bg: #eef1f6;

  /* "Navy-as-text" (links, active tab/nav labels, focus rings) — kept
     separate from --navy itself, which stays a solid background fill
     (buttons, the sidebar/header chrome) unchanged in dark mode. */
  --accent-ink: var(--navy);

  --radius-sm: .25em;
  --radius-md: .5em;
  --radius-lg: .9em;
  --radius-pill: 999px;

  --font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --header-h: 64px;
  --statusbar-h: 34px;
  --sidebar-w: 240px;
  --sidebar-w-collapsed: 68px;
  --tabbar-h: 42px;

  --shadow-sm: 0 1px 2px rgba(0, 15, 50, .06);
  --shadow-md: 0 6px 20px rgba(0, 15, 50, .12);
}

/* ---------- dark mode ----------
   "My Settings" > Appearance offers Light / Dark / System. System sets
   no attribute at all and relies purely on prefers-color-scheme; Light
   and Dark stamp data-theme explicitly and win over the OS preference
   either way. Only the main-content palette changes — the navy
   sidebar/header chrome (already dark-branded) and solid button fills
   (--navy, --green, --red used as backgrounds under white text) are
   deliberately left alone in both blocks below. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #e7ecf5;
    --ink-soft: #98a2b8;
    --border: #2b3348;
    --surface: #1b2233;
    --surface-muted: #242c40;
    --page-bg: #10141f;
    --navy-100: rgba(122, 163, 255, .16);
    --accent-ink: #86aefb;
  }
  :root:not([data-theme="light"]) .pill-live { background: rgba(116, 204, 0, .16); color: #a6e33d; }
  :root:not([data-theme="light"]) .pill-paused { background: rgba(220, 150, 40, .18); color: #f0b429; }
  :root:not([data-theme="light"]) .pill-deleted { background: rgba(214, 69, 69, .18); color: #f68787; }
  :root:not([data-theme="light"]) .pill-off { background: rgba(255, 255, 255, .08); color: #98a2b8; }
  :root:not([data-theme="light"]) .host-logo-missing { background: rgba(214, 69, 69, .14); }
  :root:not([data-theme="light"]) .login-logo-light { display: none; }
  :root:not([data-theme="light"]) .login-logo-dark { display: block; }
  :root:not([data-theme="light"]) .website-flag--alert, :root:not([data-theme="light"]) .website-mainwp { color: #f68787; }
  :root:not([data-theme="light"]) .website-mainwp.is-ok, :root:not([data-theme="light"]) .website-detail .form-ok { color: #a6e33d; }
}
:root[data-theme="dark"] {
  --ink: #e7ecf5;
  --ink-soft: #98a2b8;
  --border: #2b3348;
  --surface: #1b2233;
  --surface-muted: #242c40;
  --page-bg: #10141f;
  --navy-100: rgba(122, 163, 255, .16);
  --accent-ink: #86aefb;
}
:root[data-theme="dark"] .pill-live { background: rgba(116, 204, 0, .16); color: #a6e33d; }
:root[data-theme="dark"] .pill-paused { background: rgba(220, 150, 40, .18); color: #f0b429; }
:root[data-theme="dark"] .pill-deleted { background: rgba(214, 69, 69, .18); color: #f68787; }
:root[data-theme="dark"] .pill-off { background: rgba(255, 255, 255, .08); color: #98a2b8; }
:root[data-theme="dark"] .host-logo-missing { background: rgba(214, 69, 69, .14); }
:root[data-theme="dark"] .login-logo-light { display: none; }
:root[data-theme="dark"] .login-logo-dark { display: block; }
:root[data-theme="dark"] .website-flag--alert, :root[data-theme="dark"] .website-mainwp { color: #f68787; }
:root[data-theme="dark"] .website-mainwp.is-ok, :root[data-theme="dark"] .website-detail .form-ok { color: #a6e33d; }

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--page-bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
#app { height: 100%; }
img { max-width: 100%; }
button { font-family: inherit; }
a { color: var(--accent-ink); }

/* ---------- shared controls ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  height: 2.6em;
  padding: 0 1.1em;
  border: none;
  border-radius: var(--radius-sm);
  font-size: .95em;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .15s, box-shadow .15s;
}
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-600); }
.btn-accent { background: var(--green); color: #fff; }
.btn-accent:hover { background: var(--green-dark); }
.btn-ghost { background: transparent; color: var(--accent-ink); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--surface-muted); }
.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover { filter: brightness(.92); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
/* Looks inactive but stays clickable — for actions that should explain
   themselves (a popup) rather than just silently not respond. */
.btn.btn-look-disabled { opacity: .55; }
.btn-sm { height: 2.1em; padding: 0 .8em; font-size: .85em; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4em;
  height: 2.4em;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
}
.icon-btn:hover { background: rgba(255, 255, 255, .12); }

.field { display: flex; flex-direction: column; gap: .35em; margin-bottom: 1em; }
.field label { font-size: .8em; font-weight: 600; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .6em .75em;
  font: inherit;
  background: var(--surface);
  color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent-ink);
  box-shadow: 0 0 0 3px var(--navy-100);
}
.field input[readonly] { background: var(--surface-muted); color: var(--ink-soft); cursor: default; }
.field input[readonly]:focus { box-shadow: none; border-color: var(--border); }
.form-error { color: var(--red); font-size: .85em; margin: .25em 0 0; }
/* An input with an "open in a new tab" link beside it */
.data-table tr.row-open td { background: var(--surface-muted); }
/* Bulk edit on the Hosts / Properties / Guests lists */
.bulk-col { width: 2.2em; }
.data-table tr.row-selected td { background: var(--surface-muted); }
.bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5em; margin: 0 0 .75em; padding: .6em .85em; border: 1px solid var(--accent-ink); border-radius: var(--radius-sm); background: var(--surface); }
.bulk-bar strong { margin-right: .35em; }
.bulk-password { display: inline-flex; gap: .4em; align-items: center; }
.bulk-password input { padding: .35em .6em; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: inherit; font-size: .9em; min-width: 14em; }
.bulk-bar .bulk-danger { color: var(--red); }
.bulk-result { margin: 0 0 .75em; color: var(--green); font-size: .9em; }
.input-open { display: flex; gap: .4em; align-items: stretch; }
.input-open input { flex: 1; min-width: 0; }
.input-open .field-open { height: auto; padding: 0 .8em; justify-content: center; font-size: 1.05em; text-decoration: none; }
.input-open .field-open.is-empty { opacity: .35; pointer-events: none; }

/* View-only access: forms wrapped in a disabled fieldset stay readable */
.ro-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.ro-fieldset:disabled input, .ro-fieldset:disabled select, .ro-fieldset:disabled textarea {
  background: var(--surface-muted); color: var(--ink); -webkit-text-fill-color: var(--ink); opacity: 1; cursor: default;
}
.ro-fieldset:disabled input[type=checkbox], .ro-fieldset:disabled input[type=radio] { opacity: .7; }
.ro-fieldset:disabled button, .ro-fieldset:disabled .kv-switch, .ro-fieldset:disabled label { cursor: default; }
.view-only-note { display: inline-flex; align-items: center; gap: .45em; margin: 0 0 1em; padding: .45em .85em; border-radius: var(--radius-sm); background: var(--surface-muted); color: var(--ink-soft); font-size: .85em; }
.view-only-note::before, .view-only-tag::before { content: '👁'; }
.view-only-tag { display: inline-flex; align-items: center; gap: .35em; color: var(--ink-soft); font-size: .85em; }
/* An input with its action button beside it, inside a .field — the button
   stretches to the input's height rather than using .btn's fixed one. */
.input-action { display: flex; gap: .5em; }
.input-action input { flex: 1; min-width: 0; }
.input-action .btn { height: auto; white-space: nowrap; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 1.25em; }

.code-editor { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8em; resize: vertical; white-space: pre; width: 100%; }

.email-editor { display: flex; gap: 1em; align-items: flex-start; }
.email-template-list { flex: 0 0 240px; padding: .4em; display: flex; flex-direction: column; gap: .15em; max-height: 70vh; overflow-y: auto; }
.email-editor-main { flex: 1 1 auto; min-width: 0; }
.template-list-item {
  display: flex; align-items: center; gap: .5em;
  text-align: left; border: none; background: none; border-radius: var(--radius-sm);
  padding: .55em .6em; font: inherit; cursor: pointer; color: var(--ink);
}
.template-list-item:hover { background: var(--navy-100); }
.template-list-item.active { background: var(--navy); color: #fff; }
.template-list-item.active .pill { opacity: .85; }
.template-list-item-label { flex: 1 1 auto; font-size: .9em; }

@media (max-width: 860px) {
  .email-editor { flex-direction: column; }
  .email-template-list { flex: 1 1 auto; width: 100%; max-height: 240px; }
}

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.card-pad { padding: 1.25em; }

.badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.4em; height: 1.4em; padding: 0 .4em; border-radius: var(--radius-pill); background: var(--red); color: #fff; font-size: .7em; font-weight: 700; }
.pill { display: inline-block; padding: .2em .7em; border-radius: var(--radius-pill); font-size: .78em; font-weight: 600; }
.pill-live { background: #e6f7d9; color: #3f7a00; }
.pill-paused { background: #fbe9c7; color: #8a5a00; }
.pill-deleted { background: #fbe1e1; color: #a12b2b; }
.pill-off { background: #eceff1; color: #607080; }

table.data-table { width: 100%; border-collapse: collapse; font-size: .92em; }
.data-table th { text-align: left; font-size: .78em; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); padding: .3em .375em; border-bottom: 2px solid var(--border); }
.data-table th.sortable { cursor: pointer; user-select: none; }
.data-table th.sortable:hover { color: var(--accent-ink); }
.data-table td { padding: .35em .375em; border-bottom: 1px solid var(--border); vertical-align: middle; }
.data-table tbody tr:hover { background: var(--surface-muted); }
.row-actions { display: flex; gap: .4em; justify-content: flex-end; }
.table-scroll { overflow-x: auto; }

.host-logo { width: 32px; height: 32px; object-fit: contain; border-radius: var(--radius-sm); background: var(--surface-muted); display: block; }
img.host-logo { transition: transform .15s ease; cursor: zoom-in; transform-origin: left center; }
img.host-logo:hover { transform: scale(2.75); position: relative; z-index: 5; box-shadow: var(--shadow-sm); }
.host-logo-missing {
  border: 1.5px dashed var(--red); background: #fbe1e1;
  display: flex; align-items: center; justify-content: center; font-size: .95em;
}
.host-links { display: flex; align-items: center; gap: .5em; white-space: nowrap; }
.social-icon { width: 18px; height: 18px; object-fit: contain; display: block; }
.booking-badge { font-size: 1.05em; line-height: 1; }

.host-logo-editor { display: flex; align-items: center; gap: 1em; flex-wrap: wrap; }
.host-logo-preview { width: 96px; height: 96px; object-fit: contain; border-radius: var(--radius-sm); background: var(--surface-muted); display: block; flex-shrink: 0; font-size: 2.2em; }
/* .host-logo-missing (line ~213) sets display:flex to center its emoji
   placeholder, but it's declared before .host-logo-preview above, so on
   an element carrying both classes (equal specificity) the later rule's
   display:block was winning and the emoji rendered top-left instead of
   centered. The extra specificity here settles it regardless of source
   order. font-size is set in px, not em, since the 96px box is fixed —
   70% of that is 67.2px, sized to fill the box rather than the small
   2.2em .host-logo-preview otherwise sets. */
.host-logo-preview.host-logo-missing { display: flex; align-items: center; justify-content: center; font-size: 67.2px; }

.checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .3em 1em; margin-bottom: 1em; }
.checkbox-grid label { display: flex; align-items: center; gap: .6em; font-size: .9em; font-weight: 500; cursor: pointer; padding: .4em .2em; border-radius: var(--radius-sm); }
.checkbox-grid label:hover { background: var(--surface-muted); }
.checkbox-grid input[type=checkbox] { width: 1.4em; height: 1.4em; margin: 0; flex-shrink: 0; accent-color: var(--navy); }

.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .75em; margin-bottom: 1em; }
.gallery-item { position: relative; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-muted); cursor: grab; border: 1px solid var(--border); transition: box-shadow .15s, transform .15s; }
.gallery-item.dragging { opacity: .4; box-shadow: 0 6px 16px rgba(0,0,0,.3); }
.gallery-item img { width: 100%; height: 110px; object-fit: cover; display: block; }
.gallery-item .gallery-order { position: absolute; top: .3em; left: .3em; background: rgba(0,0,0,.55); color: #fff; font-size: .72em; font-weight: 700; padding: .1em .5em; border-radius: var(--radius-pill); }
.gallery-item .gallery-remove { position: absolute; top: .3em; right: .3em; background: rgba(0,0,0,.55); color: #fff; border: none; width: 1.6em; height: 1.6em; border-radius: 50%; cursor: pointer; font-size: .85em; line-height: 1; }
.gallery-item .gallery-remove:hover { background: var(--red); }
.gallery-item .gallery-move { position: absolute; bottom: .3em; left: 50%; transform: translateX(-50%); display: flex; gap: .35em; }
.gallery-item .gallery-move button { background: rgba(0,0,0,.55); color: #fff; border: none; width: 1.8em; height: 1.8em; border-radius: 50%; cursor: pointer; font-size: .8em; line-height: 1; }
.gallery-item .gallery-move button:hover:not(:disabled) { background: var(--navy); }
.gallery-item .gallery-move button:disabled { opacity: .35; cursor: not-allowed; }
.gallery-add { display: flex; align-items: center; justify-content: center; border: 1.5px dashed var(--border); border-radius: var(--radius-sm); height: 110px; cursor: pointer; color: var(--ink-soft); font-size: .85em; text-align: center; padding: .5em; }

.toolbar { display: flex; align-items: center; gap: .75em; flex-wrap: wrap; margin-bottom: 1em; }
.toolbar .search-input { flex: 1 1 240px; }
.toolbar input[type=search] { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-pill); padding: .55em 1em; font: inherit; }
.toolbar select {
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: .55em 2.2em .55em 1.1em;
  font: inherit;
  font-size: .9em;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%235a6473' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E") no-repeat right .85em center;
  background-size: .7em;
  color: var(--ink);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.toolbar select:focus {
  outline: none;
  border-color: var(--accent-ink);
  box-shadow: 0 0 0 3px var(--navy-100);
}

.empty-state { padding: 3em 1em; text-align: center; color: var(--ink-soft); }
.spinner { display: inline-block; width: 1.1em; height: 1.1em; border: .18em solid var(--navy-100); border-top-color: var(--accent-ink); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* A table mid-refresh (rows already loaded, a new fetch in flight) —
   dims existing content rather than blanking it, so a slow refresh
   doesn't flash the table empty. */
.table-loading { opacity: .5; pointer-events: none; transition: opacity .15s; }

.pagination { display: flex; align-items: center; gap: .6em; justify-content: flex-end; margin-top: auto; padding-top: 1em; font-size: .85em; color: var(--ink-soft); }

/* ---------- login screen ---------- */

.login-screen {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 20% 20%, var(--navy-600), var(--navy) 60%, var(--navy-700));
  padding: 1.5rem;
}
.login-card {
  width: 100%;
  max-width: 360px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 2.25em 2em;
  text-align: center;
}
/* Full colour wordmark, from the main site's own brand assets — two
   pre-made variants (ss-logo-bl.png navy text, ss-logo-wh.png white
   text), swapped per theme in the dark-mode blocks above/below rather
   than a single image CSS-filtered to one fixed appearance. Replaces a
   flat logo-white.png that was forced dark via
   filter:invert/grayscale/brightness — fine back when the login card was
   always light, but low-contrast to the point of near-invisibility once
   .login-card started following the theme (var(--surface), dark in dark
   mode) rather than always being light. */
.login-logo { margin: 0 auto 1.25em; }
.login-logo img { max-width: 220px; margin: 0 auto; }
.login-logo-light { display: block; }
.login-logo-dark { display: none; }
.login-card h1 { margin: 0 0 1.1em; font-size: 1.2em; color: var(--accent-ink); }
.login-card .field { text-align: left; }
.login-card .btn { width: 100%; justify-content: center; margin-top: .5em; }

/* ---------- shell layout ---------- */

.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--header-h) minmax(0, 1fr) var(--statusbar-h);
  grid-template-areas: "header header" "sidebar main" "statusbar statusbar";
  height: 100%;
  transition: grid-template-columns .18s ease;
}
.shell.sidebar-collapsed { grid-template-columns: var(--sidebar-w-collapsed) 1fr; }

/* header */
.shell-header {
  grid-area: header;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  gap: .5em;
  padding: 0 .75em;
  box-shadow: var(--shadow-sm);
  z-index: 20;
}
.hamburger { display: none; }
.header-stats { display: flex; gap: 1.5em; margin-left: .5em; overflow-x: auto; scrollbar-width: none; }
.header-stats::-webkit-scrollbar { display: none; }
.stat-tile { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; white-space: nowrap; }
.stat-value { font-size: 1.15em; font-weight: 700; color: #fff; }
.stat-label { font-size: .68em; text-transform: uppercase; letter-spacing: .04em; color: #cfd7ea; }
.header-spacer { flex: 1; }
.header-notifications { position: relative; }
.header-notifications .badge { position: absolute; top: 2px; right: 2px; }

/* dropdowns */
.dropdown-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 320px;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 50;
}
.dropdown-panel .dropdown-title { padding: .8em 1em; font-weight: 600; font-size: .85em; border-bottom: 1px solid var(--border); }
.dropdown-item { padding: .7em 1em; border-bottom: 1px solid var(--border); cursor: pointer; font-size: .88em; }
.dropdown-item:hover { background: var(--surface-muted); }
.dropdown-item:last-child { border-bottom: none; }
.dropdown-empty { padding: 1.5em 1em; text-align: center; color: var(--ink-soft); font-size: .88em; }

/* sidebar */
.shell-sidebar {
  grid-area: sidebar;
  background: var(--navy-700);
  color: #e7ecf5;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  z-index: 15;
}
.sidebar-brand { display: flex; align-items: center; height: var(--header-h); padding: 0 1em; flex-shrink: 0; }
.sidebar-brand img { height: 28px; }
.sidebar-nav { list-style: none; margin: .5em 0; padding: 0 .6em; flex: 1; overflow-y: auto; }
.sidebar-nav li { margin-bottom: .2em; }
.nav-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .8em;
  padding: .65em .75em;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: inherit;
  cursor: pointer;
  font-size: .92em;
  text-align: left;
  white-space: nowrap;
}
.nav-btn:hover { background: rgba(255, 255, 255, .08); }
.nav-btn.active { background: var(--navy); border-left: 3px solid var(--green); }
.nav-icon { flex-shrink: 0; width: 1.3em; text-align: center; }
.shell.sidebar-collapsed .nav-label,
.shell.sidebar-collapsed .sidebar-profile-name,
.shell.sidebar-collapsed .sidebar-brand span { display: none; }
.shell.sidebar-collapsed .sidebar-brand { justify-content: center; padding: 0; }

.sidebar-nav.sidebar-nav-foot { flex: 0 0 auto; overflow: visible; margin: 0 0 .4em; }
.sidebar-bottom { border-top: 1px solid rgba(255, 255, 255, .12); padding: .6em; flex-shrink: 0; }
.sidebar-profile {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .7em;
  padding: .5em;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.sidebar-profile:hover { background: rgba(255, 255, 255, .08); }
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--green) center/cover no-repeat;
  color: var(--navy); font-weight: 700; font-size: .8em;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* main / tabs */
.shell-main { grid-area: main; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.tab-bar {
  display: flex;
  align-items: stretch;
  height: var(--tabbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  flex-shrink: 0;
}
.tab {
  display: flex;
  align-items: center;
  gap: .6em;
  padding: 0 .5em 0 1em;
  border-right: 1px solid var(--border);
  cursor: pointer;
  font-size: .85em;
  white-space: nowrap;
  color: var(--ink-soft);
  position: relative;
}
.tab.active { color: var(--accent-ink); font-weight: 600; background: var(--page-bg); }
.tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--green); }
.tab-close {
  width: 1.4em; height: 1.4em; border: none; background: transparent; border-radius: 50%;
  color: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.tab-close:hover { background: rgba(0, 0, 0, .08); }

.tab-content { flex: 1; overflow-y: auto; padding: 1.25em; min-height: 0; }
/* Pins any .pagination block to the bottom of the pane (via its
   margin-top:auto) instead of it drifting up under a short table —
   applies globally since every tab's content is exactly one child div. */
.tab-pane { display: flex; flex-direction: column; min-height: 100%; }
.tab-pane > div { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.tab-pane h2 { margin-top: 0; color: var(--accent-ink); font-size: 1.15em; }

/* status bar */
.shell-statusbar {
  grid-area: statusbar;
  background: var(--navy-700);
  color: #cfd7ea;
  display: flex;
  align-items: center;
  padding: 0 .9em;
  font-size: .78em;
  gap: 1em;
  position: relative;
}
.status-item { display: flex; align-items: center; gap: .4em; }
.status-item button { background: transparent; border: none; color: inherit; font: inherit; cursor: pointer; display: flex; align-items: center; gap: .4em; padding: 0; }
.status-dot { width: .55em; height: .55em; border-radius: 50%; background: var(--green); flex-shrink: 0; }
.status-spacer { flex: 1; }
.sessions-widget { position: relative; }
.sessions-widget .dropdown-panel { bottom: calc(100% + 8px); top: auto; right: 0; }

/* inner tabs (within a single workspace tab, e.g. Transactions/Config/Admin Settings) */
.inner-tabs { display: flex; gap: .3em; border-bottom: 1px solid var(--border); margin-bottom: 1.1em; }
.inner-tab-btn {
  padding: .6em 1em;
  border: none;
  background: transparent;
  border-bottom: 2px solid transparent;
  color: var(--ink-soft);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  margin-bottom: -1px;
}
.inner-tab-btn.active { color: var(--accent-ink); border-bottom-color: var(--green); }

.segmented { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-pill); padding: .2em; gap: .2em; }
.segmented button { border: none; background: none; padding: .45em 1.1em; border-radius: var(--radius-pill); font: inherit; font-size: .85em; font-weight: 500; cursor: pointer; color: var(--ink-soft); }
.segmented button.active { background: var(--navy); color: #fff; }

.kv-count { font-size: .85em; color: var(--ink-soft); white-space: nowrap; }
.kv-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.kv-table th { position: sticky; top: var(--kv-sticky-h, 0px); z-index: 1; background: var(--surface); text-align: left; font-size: .78em; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); padding: .5em; border-bottom: 2px solid var(--border); }
/* Key column fits the longest key: ch is measured in the col's own
   monospace font (same as td.kv-key), plus the cell's horizontal padding. */
.kv-table col.kv-key-col { font-family: monospace; font-size: .85em; width: calc(var(--kv-key-chars, 24) * 1ch + 1.5em); }
.kv-table col.kv-value-col { width: 50%; }
.kv-table td { padding: .35em .5em; vertical-align: middle; border-bottom: 1px solid var(--border); }
.kv-table tbody tr:hover { background: var(--surface-muted); }
.kv-table td.kv-key { font-size: .85em; font-family: monospace; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kv-table input { width: 100%; }
.kv-table input.kv-desc { font-family: var(--font); font-size: .95em; color: var(--ink-soft); background: transparent; border-color: transparent; }
.kv-table input.kv-desc:hover, .kv-table input.kv-desc:focus { border-color: var(--border); background: var(--surface); }
/* Site config: sticky toolbar + category links, grouped rows, typed inputs */
.kv-card { --kv-sticky-h: 0px; }
.kv-sticky { position: sticky; top: -1.25em; z-index: 3; margin: -1.25em -1.25em 0; padding: 1.25em 1.25em .6em; background: var(--surface); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.kv-sticky .toolbar { margin-bottom: .6em; }
.kv-groups { display: flex; flex-wrap: wrap; gap: .35em; }
.kv-groups button { display: inline-flex; align-items: center; gap: .35em; padding: .3em .8em; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); color: var(--accent-ink); font: inherit; font-size: .8em; font-weight: 500; cursor: pointer; }
.kv-groups button:hover { background: var(--surface-muted); }
.kv-groups small { color: var(--ink-soft); font-size: .9em; }
.kv-table th { top: calc(var(--kv-sticky-h) - 1.25rem); }
.kv-table tr.kv-group-row th { position: static; padding: 1.4em .5em .45em; border-bottom: 1px solid var(--border); background: none; color: var(--accent-ink); font-size: .82em; font-weight: 700; letter-spacing: .05em; }
.kv-table tr.kv-group-row { scroll-margin-top: calc(var(--kv-sticky-h) + 1.4rem); }
.kv-table tbody:first-of-type tr.kv-group-row th { padding-top: .9em; }
.kv-table tbody tr.kv-group-row:hover { background: none; }
.kv-toggle { display: flex; align-items: center; gap: .7em; font-size: .9em; color: var(--ink-soft); }
.kv-switch { position: relative; flex: none; width: 2.6em; height: 1.5em; padding: 0; border: none; border-radius: var(--radius-pill); background: var(--border); cursor: pointer; transition: background-color .2s; }
.kv-switch span { position: absolute; top: .18em; left: .18em; width: 1.14em; height: 1.14em; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform .2s; }
.kv-switch[aria-checked="true"] { background: var(--green); }
.kv-switch[aria-checked="true"] span { transform: translateX(1.1em); }
.kv-switch:focus-visible, .kv-seg button:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.kv-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.kv-seg button { padding: .4em 1em; border: none; border-left: 1px solid var(--border); background: var(--surface); color: var(--ink); font: inherit; font-size: .88em; cursor: pointer; }
.kv-seg button:first-child { border-left: none; }
.kv-seg button:hover { background: var(--surface-muted); }
.kv-seg button.on { background: var(--navy); color: #fff; font-weight: 600; }
.kv-seg button.on.danger { background: var(--red); }
.kv-affix { position: relative; max-width: 12em; }
.kv-affix::before { position: absolute; top: 50%; transform: translateY(-50%); color: var(--ink-soft); font-size: .9em; pointer-events: none; }
.kv-affix.money::before { content: '$'; left: .7em; }
.kv-affix.money input { padding-left: 1.5em; }
.kv-affix.percent::before { content: '%'; right: .7em; }
.kv-affix.percent input { padding-right: 1.8em; }
.kv-secret { display: flex; gap: .4em; }
.kv-secret input { flex: 1; min-width: 0; font-family: monospace; }
@media (max-width: 760px) {
  .kv-table thead { display: none; }
  .kv-table, .kv-table tbody, .kv-table tr, .kv-table td { display: block; width: 100%; }
  .kv-table tr { padding: .5em 0; border-bottom: 1px solid var(--border); }
  .kv-table td { border-bottom: none; padding: .2em 0; }
  .kv-table tr.kv-group-row { border-bottom: none; }
  .kv-table tr.kv-group-row th { display: block; padding-left: 0; }
}

.google-place-result { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: .6em 0; border-bottom: 1px solid var(--border); }
.google-place-result:last-child { border-bottom: none; }

.amenity-group { margin-bottom: .75em; }
.rank-panel { margin: 0 0 1.25em; padding: 0 0 1.25em; border-bottom: 1px solid var(--border); }
.rank-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .3em .75em; counter-reset: none; }
.rank-list li { display: flex; align-items: center; gap: .5em; padding: .3em .45em; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); cursor: grab; font-size: .9em; }
.rank-list li.rank-cutoff { box-shadow: inset 0 -3px 0 var(--green); }
.rank-num { width: 1.6em; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-soft); font-size: .85em; }
.rank-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-actions { display: flex; gap: .1em; }
.rank-actions .btn-sm { height: 1.8em; padding: 0 .45em; }
.amenity-table td { vertical-align: middle; }
.amenity-icon-cell { width: 2.2em; }
.icon-pick { display: inline-flex; align-items: center; gap: .5em; padding: .35em .6em; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: inherit; font-family: monospace; font-size: .9em; cursor: pointer; }
.icon-pick:hover:not(:disabled) { border-color: var(--accent-ink); }
.icon-pick:disabled { cursor: default; opacity: .8; }
.icon-pick.missing { border-color: var(--red); }
.icon-pick-warn { padding: .05em .45em; border-radius: 1em; background: var(--red); color: #fff; font-family: inherit; font-size: .75em; font-weight: 700; }
.modal-card.icon-picker { max-width: 720px; max-height: 86vh; overflow: auto; }
.icon-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .4em; }
.icon-picker-grid button { display: flex; flex-direction: column; align-items: center; gap: .35em; padding: .6em .3em; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); cursor: pointer; }
.icon-picker-grid button:hover { border-color: var(--accent-ink); }
.icon-picker-grid button.on { border-color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent-ink); }
.icon-picker-grid small { font-size: .72em; line-height: 1.2; text-align: center; color: var(--ink-soft); word-break: break-word; }
/* Icon drawn as a mask so it takes the theme's accent colour (navy in
   light, light blue in dark) whatever colour the SVG file itself uses. */
.amenity-icon { display: block; width: 1.6em; height: 1.6em; background-color: var(--accent-ink); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.amenity-table td input:not([type=checkbox]) { width: 100%; min-width: 8em; border: 1px solid transparent; border-radius: var(--radius-sm); padding: .35em .45em; font: inherit; background: transparent; color: var(--ink); }
.amenity-table td input:not([type=checkbox]):hover, .amenity-table td input:not([type=checkbox]):focus { border-color: var(--border); background: var(--surface); outline: none; }
.amenity-table td input[type=checkbox] { width: 1.2em; height: 1.2em; accent-color: var(--navy); }
.amenity-table tr.amenity-inactive td { opacity: .55; }
.amenity-group h4 { margin: .6em 0 .3em; font-size: .8em; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.amenity-detail { display: block; font-size: .8em; color: var(--ink-soft); line-height: 1.3; font-weight: 400; }
.amenity-group .checkbox-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); margin-bottom: .25em; }
.amenity-group .checkbox-grid label { align-items: flex-start; }

.perm-group { margin-bottom: 1em; }
.perm-group-title { display: flex; align-items: center; gap: .6em; font-weight: 600; margin-bottom: .4em; cursor: pointer; }
.perm-checks { display: flex; flex-wrap: wrap; gap: .5em; padding-left: 1.4em; }
.perm-check { display: inline-flex; align-items: center; gap: .35em; background: var(--surface-muted); border-radius: var(--radius-pill); padding: .25em .7em .25em .5em; font-size: .82em; cursor: pointer; }

.checkbox-pill { display: inline-flex; align-items: center; gap: .35em; background: var(--surface-muted); border-radius: var(--radius-pill); padding: .3em .8em .3em .55em; font-size: .82em; cursor: pointer; margin: .15em; }

/* confirm modal */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0, 15, 50, .45);
  display: flex; align-items: center; justify-content: center; z-index: 100; padding: 1rem;
}
.modal-card { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 1.5em; max-width: 380px; width: 100%; }
.modal-card p { margin: 0 0 1.25em; }
.modal-card-wide { max-width: 560px; }

/* coming soon */
.coming-soon { padding: 3em 1em; text-align: center; color: var(--ink-soft); }
.coming-soon .icon { font-size: 2.4em; margin-bottom: .3em; }

/* ---------- responsive ---------- */

@media (max-width: 1023px) {
  .header-stats { gap: 1em; }
  .stat-label { display: none; }
}

@media (max-width: 767px) {
  .shell {
    grid-template-columns: 1fr;
    grid-template-areas: "header" "main" "statusbar";
  }
  .hamburger { display: inline-flex; }
  .collapse-btn { display: none; }
  .header-stats { display: none; }

  .shell-sidebar {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: var(--sidebar-w);
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: var(--shadow-md);
  }
  .shell.sidebar-open-mobile .shell-sidebar { transform: translateX(0); }
  .shell.sidebar-open-mobile::before {
    content: "";
    position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 14;
  }

  .shell-statusbar { font-size: .72em; padding: 0 .5em; }
  .stat-label { display: none; }
}

@media (max-width: 420px) {
  .dropdown-panel { width: calc(100vw - 24px); right: -8px; }
  .form-grid { grid-template-columns: 1fr; }
}

/* ---------- dashboard ---------- */

.dash-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1em; }
.dash-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: 1em 1.1em; display: flex; flex-direction: column; gap: .5em;
}
.dash-card.clickable { cursor: pointer; transition: box-shadow .15s, transform .15s; }
.dash-card.clickable:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.dash-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5em; }
.dash-card-head > span:first-child { font-size: .8em; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .03em; }
.dash-card-total { font-size: 1.5em; font-weight: 700; color: var(--ink); }
.dash-card-foot { font-size: .78em; color: var(--ink-soft); }
.dash-card-static { justify-content: center; }
.dash-sparkline-wrap { position: relative; width: 100%; height: 42px; }

.dash-breakdowns { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1em; }
.dash-status-row { display: flex; justify-content: space-between; padding: .35em 0; border-bottom: 1px solid var(--border); font-size: .9em; }
.dash-status-row:last-child { border-bottom: none; }
.dash-status-row span:last-child { font-weight: 600; color: var(--ink); }

/* ---------- activity feed (Contact Requests detail) ---------- */

.activity-feed { display: flex; flex-direction: column; gap: .1em; }
.activity-row { display: flex; align-items: flex-start; gap: .6em; padding: .5em 0; border-bottom: 1px solid var(--border); font-size: .88em; }
.activity-row:last-child { border-bottom: none; }
.activity-icon { flex-shrink: 0; font-size: 1em; line-height: 1.4; }

/* ---------- inline search-to-select dropdowns (Property edit's Host
   field, promo code lookups, ...) ---------- */

.autocomplete-lookup { position: relative; }
.autocomplete-lookup input { width: 100%; }
.autocomplete-results { position: absolute; z-index: 10; top: 100%; left: 0; right: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); max-height: 220px; overflow-y: auto; margin-top: .25em; }
.autocomplete-results button { display: block; width: 100%; text-align: left; padding: .5em .75em; border: none; background: none; cursor: pointer; font: inherit; color: var(--ink); border-bottom: 1px solid var(--border); }
.autocomplete-results button:last-child { border-bottom: none; }
.autocomplete-results button:hover { background: var(--surface-muted); }
.autocomplete-results .autocomplete-meta { color: var(--ink-soft); font-size: .8em; }

.host-avatar-preview { border-radius: 50%; object-fit: cover; }

/* image cropper (avatar / logo adjust) */
.cropper-card { max-width: 340px; text-align: center; }
.cropper-title { margin: 0 0 .8em; }
.cropper-stage { width: min(280px, 75vw); height: min(280px, 75vw); margin: 0 auto; position: relative; overflow: hidden; border-radius: var(--radius-md); background: var(--surface-muted); touch-action: none; cursor: grab; }
.cropper-stage:active { cursor: grabbing; }
.cropper-stage img { position: absolute; top: 0; left: 0; max-width: none; transform-origin: top left; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.cropper-guide { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 9999px rgba(255, 255, 255, .7); pointer-events: none; }
:root[data-theme="dark"] .cropper-guide { box-shadow: 0 0 0 9999px rgba(16, 20, 31, .7); }
.cropper-guide.square { display: none; }
.cropper-zoom { flex: 1; min-width: 0; margin: 0; }
.cropper-help { margin: .6em 0 0; font-size: .85em; color: var(--ink-soft); }
.cropper-zoomrow { display: flex; align-items: center; gap: .5em; width: min(280px, 75vw); margin: 1em auto 0; }
.cropper-step { flex: none; width: 32px; height: 32px; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--ink); font: inherit; font-size: 1.1em; font-weight: 700; line-height: 1; cursor: pointer; touch-action: none; user-select: none; }
.cropper-step:hover { border-color: var(--accent-ink); }
.cropper-readout { margin: .5em 0 0; font-size: .78em; color: var(--ink-soft); }
.cropper-readout b { color: var(--ink); font-variant-numeric: tabular-nums; }
.cropper-error { min-height: 1.2em; margin: .5em 0 0; }
.cropper-buttons { display: flex; gap: .75em; justify-content: center; margin-top: 1em; }
.cropper-card .cropper-buttons .btn { min-width: 7em; }
.modal-overlay[hidden] { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cropper-guide { box-shadow: 0 0 0 9999px rgba(16, 20, 31, .7); } }

/* Analytics: traffic sources + per-row detail */
.src-dot { display: inline-block; width: .65em; height: .65em; border-radius: .2em; margin-right: .45em; vertical-align: .02em; }
.clickable-row { cursor: pointer; }
.row-selected td { background: var(--surface-muted); }
.analytics-detail { margin-top: 1em; }
.analytics-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25em; }
.detail-nums { display: flex; gap: 1.25em; margin-bottom: .5em; color: var(--ink-soft); font-size: .9em; }
.detail-nums b { font-size: 1.4em; color: var(--ink); }
.src-bar { display: flex; height: .6em; border-radius: .3em; overflow: hidden; background: var(--surface-muted); margin-bottom: .6em; }
.src-bar span { display: block; height: 100%; }

/* ---------- booking page jobs ---------- */
.nav-badge { margin-left: auto; min-width: 1.6em; padding: .05em .45em; border-radius: var(--radius-pill); background: var(--green); color: #fff; font-size: .72em; font-weight: 700; text-align: center; }
.shell.sidebar-collapsed .nav-badge { position: absolute; top: .2em; right: .3em; margin: 0; }
.nav-btn { position: relative; }
.job-progress { width: 120px; height: 6px; border-radius: var(--radius-pill); background: var(--surface-muted); overflow: hidden; }
.job-progress span { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--green); transition: width .3s; }
.job-progress-lg { width: 100%; max-width: 360px; height: 8px; margin: .8em 0 .3em; }
.job-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1em; margin-bottom: 1.25em; }
.job-head-side { text-align: right; }
.job-hold { display: flex; flex-basis: 100%; gap: .5em; }
.job-hold input { flex: 1; }
.job-banner { flex-basis: 100%; margin: 0; padding: .6em .9em; border-radius: var(--radius-md); background: rgba(220, 150, 40, .12); color: var(--ink); }
.job-banner-done { background: rgba(116, 204, 0, .14); }
.job-tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6em; }
.job-task { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.job-task.current { border-color: var(--green); box-shadow: 0 0 0 2px rgba(116, 204, 0, .18); }
.job-task-head { display: flex; align-items: center; gap: .8em; width: 100%; padding: .85em 1em; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.job-task-icon { flex: none; display: flex; align-items: center; justify-content: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--surface-muted); color: var(--ink-soft); font-size: .85em; font-weight: 700; }
.job-task.done .job-task-icon { background: var(--green); color: #fff; }
.job-task.current .job-task-icon { background: var(--navy); color: #fff; }
.job-task-title { flex: 1; display: flex; flex-direction: column; font-weight: 600; }
.job-task-title small { color: var(--ink-soft); font-size: .8em; font-weight: 400; }
.job-task.locked .job-task-title > span { color: var(--ink-soft); }
.job-task-chev { flex: none; color: var(--ink-soft); font-size: 1.3em; transition: transform .2s; }
.job-task.open .job-task-chev { transform: rotate(90deg); }
.job-task-body { padding: 0 1em 1em 3.7em; }
.job-task-help { margin: 0 0 .8em; color: var(--ink-soft); line-height: 1.5; }
/* Website jobs: phase headings, wide fields, host picker */
.job-task-item { list-style: none; }
.job-phase { margin: .9em 0 .4em; font-size: .78em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.job-task-item:first-child .job-phase { margin-top: 0; }
.job-field-wide { grid-column: 1 / -1; }
.job-id-input { width: 9em; padding: .35em .5em; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: inherit; font-family: ui-monospace, Menlo, monospace; font-size: .85em; }
.job-id-input:disabled { background: var(--surface-muted); }
.job-id-select { max-width: 16em; padding: .35em .4em; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: inherit; font-size: .85em; }
.job-suggest { display: block; margin-top: .2em; color: var(--green-dark); font-size: .78em; font-weight: 600; }
.job-dns { margin: .5em 0; padding: .7em .9em; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-muted); }
.job-dns .job-copy-table { margin-top: .4em; }
.job-credentials { display: grid; gap: .35em; margin-top: .6em; padding: .8em 1em; border: 1px solid var(--green); border-radius: var(--radius-md); background: var(--surface-muted); }
.job-credentials code { font-size: .95em; }
.job-check-inline b { display: inline-flex; align-items: center; justify-content: center; width: 1.3em; height: 1.3em; border-radius: 50%; font-size: .8em; color: #fff; background: var(--ink-soft); }
.job-check-inline.ok b { background: var(--green); }
.job-check-inline.bad b { background: var(--red); }
.job-host-results { display: grid; gap: .3em; margin-top: .5em; max-width: 520px; }
.job-host-results button { display: grid; gap: .1em; text-align: left; padding: .55em .8em; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; }
.job-host-results button:hover { border-color: var(--accent-ink); }
.job-host-results span { color: var(--ink-soft); font-size: .85em; }
.pill-website { background: rgba(107, 79, 216, .14); color: #5639c4; }
.data-table td .pill { white-space: nowrap; }
.job-panel { padding: .8em 1em; border-radius: var(--radius-md); background: var(--surface-muted); }
.job-kv { display: flex; gap: 1em; padding: .25em 0; }
.job-kv > span:first-child { flex: none; width: 9em; color: var(--ink-soft); font-size: .9em; }
.job-kv a { word-break: break-all; }
.job-copy-table { width: 100%; border-collapse: collapse; font-size: .92em; }
.job-copy-table th { width: 11em; padding: .3em .5em .3em 0; color: var(--ink-soft); font-weight: 500; text-align: left; vertical-align: middle; }
.job-copy-table td { padding: .3em .5em .3em 0; vertical-align: middle; word-break: break-word; }
.job-copy-table td:last-child { width: 1%; white-space: nowrap; text-align: right; }
.job-copy-table tr.job-copy-group th { padding-top: .8em; color: var(--accent-ink); font-size: .8em; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.job-copy-table tr:first-child.job-copy-group th { padding-top: 0; }
.job-check { display: flex; align-items: center; gap: .5em; padding: .2em 0; }
@media (max-width: 760px) {
  .job-task-body { padding-left: 1em; }
  .job-head-side { text-align: left; }
}
.job-checks { display: flex; flex-wrap: wrap; align-items: center; gap: .3em 1em; margin-top: .5em; font-size: .9em; }
.job-checks b { display: inline-flex; align-items: center; justify-content: center; width: 1.3em; height: 1.3em; margin-right: .2em; border-radius: 50%; font-size: .8em; color: #fff; background: var(--ink-soft); }
.job-checks .ok b { background: var(--green); }
.job-checks .bad b { background: var(--red); }
.job-checks small { color: var(--ink-soft); }
.job-checks p { flex-basis: 100%; margin: 0; color: var(--ink-soft); }
.job-warn { margin: .5em 0 0; color: var(--red); font-size: .9em; }
.job-preview { margin-top: .8em; }
.job-preview iframe { display: block; width: 100%; height: 520px; margin-top: .5em; border: 1px solid var(--border); border-radius: var(--radius-md); background: #fff; }

/* Guides (app/Views/admin/guides/*, GuideController) */
.guide { max-width: 860px; color: var(--ink); line-height: 1.6; }
.guide h1, .guide h2, .guide h3 { color: var(--accent-ink); line-height: 1.25; text-wrap: balance; margin: 0; }
.guide h1 { font-size: 1.7em; }
.guide h2 { font-size: 1.2em; margin-top: 2.2em; }
.guide h3 { font-size: 1.02em; }
.guide p { margin: 0; }
.guide .lede { margin-top: .6em; font-size: 1.05em; color: var(--ink-soft); max-width: 62ch; }
.guide .eyebrow { font-size: .72em; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--green-dark); margin-bottom: .6em; }
.guide code { font-family: ui-monospace, Menlo, monospace; font-size: .86em; background: var(--surface-muted); padding: .1em .4em; border-radius: var(--radius-sm); }
.guide .ui { font-weight: 600; color: var(--ink); }
.guide .facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .8em; margin-top: 1.1em; }
.guide .fact { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: .9em 1em; display: grid; gap: .3em; }
.guide .fact b { color: var(--accent-ink); }
.guide .fact p { font-size: .92em; color: var(--ink-soft); }
.guide .statuses { display: flex; flex-wrap: wrap; gap: .5em; margin-top: .9em; }
.guide .pill { font-size: .8em; font-weight: 600; padding: .35em .7em; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--surface); }
.guide .pill i { font-style: normal; font-weight: 400; color: var(--ink-soft); margin-left: .3em; }
.guide .phases { margin-top: .9em; font-size: .92em; color: var(--ink-soft); }
.guide .steps { list-style: none; margin: 1.1em 0 0; padding: 0; display: grid; gap: 1em; counter-reset: step; }
.guide .step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.2em 1.3em; display: grid; grid-template-columns: 2.6em minmax(0, 1fr); column-gap: 1em; }
.guide .num { counter-increment: step; width: 2.1em; height: 2.1em; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-weight: 600; }
.guide .num::before { content: counter(step); }
.guide .step-body { display: grid; gap: .7em; }
.guide .step-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3em .8em; }
.guide .where { font-size: .72em; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); }
.guide .tag { font-size: .7em; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #9a5b00; background: #fdf1dc; padding: .3em .55em; border-radius: var(--radius-sm); }
.guide .goal { color: var(--ink-soft); }
.guide .todo { margin: 0; padding-left: 1.2em; display: grid; gap: .35em; }
.guide .todo li::marker { color: var(--green-dark); font-weight: 700; }
.guide .gate { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7em; align-items: start; background: var(--surface-muted); border-left: 3px solid var(--green); border-radius: var(--radius-sm); padding: .6em .9em; font-size: .93em; }
.guide .gate b { font-size: .72em; letter-spacing: .06em; text-transform: uppercase; color: var(--green-dark); padding-top: .25em; white-space: nowrap; }
.guide .tip { font-size: .92em; color: var(--ink-soft); border-left: 3px solid var(--border); padding-left: .8em; }
.guide .callout { margin-top: 1.1em; background: #fdf1dc; color: #5c3b00; border-radius: var(--radius-md); padding: .9em 1.1em; display: grid; gap: .4em; }
.guide .callout b { color: #9a5b00; }
.guide .ideas { margin: 1.1em 0 0; padding-left: 1.2em; display: grid; gap: .6em; }
/* Long-form guides (Help › Strategy): paragraphs, lists and wide tables */
/* The tables use the whole pane; the text stays at a readable width */
.guide.guide-prose { max-width: none; }
.guide-prose > :not(.guide-table) { max-width: 860px; }
.guide-prose > p, .guide-prose > ul, .guide-prose > ol, .guide-prose > .guide-table { margin-top: .9em; }
.guide-prose ul, .guide-prose ol { padding-left: 1.3em; display: grid; gap: .45em; }
.guide-prose li > p + ul, .guide-prose li > p + ol { margin-top: .45em; }
.guide-prose a { color: var(--accent-ink); }
.guide .guide-table { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.guide .guide-table table { border-collapse: collapse; width: 100%; min-width: 720px; font-size: .86em; line-height: 1.45; }
.guide .guide-table th, .guide .guide-table td { text-align: left; vertical-align: top; padding: .55em .7em; border-bottom: 1px solid var(--border); }
.guide .guide-table th { background: var(--surface-muted); color: var(--accent-ink); font-weight: 600; white-space: nowrap; }
.guide .guide-table tr:last-child td { border-bottom: 0; }
.guide .guide-table td:first-child { font-weight: 600; }
.guide .guide-foot { margin-top: 2.5em; padding-top: 1em; border-top: 1px solid var(--border); font-size: .88em; color: var(--ink-soft); }
@media (max-width: 560px) { .guide .step { grid-template-columns: minmax(0, 1fr); row-gap: .7em; } }
/* Guides, dark theme */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .guide .callout { background: rgba(220, 150, 40, .16); color: var(--ink); }
  :root:not([data-theme="light"]) .guide .callout b,
  :root:not([data-theme="light"]) .guide .tag { color: #f0b429; }
  :root:not([data-theme="light"]) .guide .tag { background: rgba(220, 150, 40, .18); }
  :root:not([data-theme="light"]) .guide .num { background: var(--navy-600); }
}
:root[data-theme="dark"] .guide .callout { background: rgba(220, 150, 40, .16); color: var(--ink); }
:root[data-theme="dark"] .guide .callout b,
:root[data-theme="dark"] .guide .tag { color: #f0b429; }
:root[data-theme="dark"] .guide .tag { background: rgba(220, 150, 40, .18); }
:root[data-theme="dark"] .guide .num { background: var(--navy-600); }

/* Help tab: one card per guide */
.help-list { display: grid; gap: .75em; }
.help-section + .help-section { margin-top: 1.8em; }
.help-section h3 { font-size: .78em; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 .7em; }
.help-card { display: grid; gap: .3em; text-align: left; padding: 1em 1.2em; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; transition: border-color .15s; }
.help-card:hover, .help-card:focus-visible { border-color: var(--accent-ink); }
.help-card strong { color: var(--accent-ink); font-size: 1.02em; }
.help-card span { color: var(--ink-soft); font-size: .92em; }

/* Website job: design picker on the WordPress step */
.job-design { margin: .8em 0; padding: .8em 1em; border: 1px solid var(--border); border-radius: 10px; }
.job-design-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3em 1em; margin-bottom: .5em; }
.job-design-head small { color: var(--ink-soft); }
/* Site config › Site Colours: ready-made schemes and a small preview of the public site */
.sc-wrap { display: flex; flex-direction: column; gap: .7em; padding: .3em 0; }
.sc-schemes { display: flex; flex-wrap: wrap; gap: .45em; }
.sc-scheme { display: inline-flex; align-items: center; gap: .5em; padding: .35em .75em .35em .45em; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: .85em; font-weight: 600; cursor: pointer; }
.sc-scheme:hover { border-color: var(--accent-ink); }
.sc-scheme.on { border-color: var(--accent-ink); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-ink) 25%, transparent); }
.sc-dots { display: inline-flex; }
.sc-dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--surface); margin-left: -5px; }
.sc-dots i:first-child { margin-left: 0; }
.sc-preview { max-width: 520px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); font-family: system-ui, sans-serif; }
.sc-bar { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: var(--b); color: #fff; }
.sc-bar b { font-size: 15px; } .sc-bar em { font-style: normal; color: var(--l); }
.sc-bar span { padding: 2px 10px; border: 2px solid var(--l); border-radius: 6px; font-size: 12px; font-weight: 700; }
.sc-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 14px 12px; background: linear-gradient(135deg, #5b6b7d, #2c3a4a); }
.sc-hero strong { flex-basis: 100%; color: #fff; font-size: 17px; } .sc-hero strong em { font-style: normal; color: var(--l); }
.sc-cta, .sc-btn { padding: 6px 12px; border-radius: 7px; color: #fff; font-size: 12.5px; font-weight: 700; }
.sc-cta { background: var(--o); } .sc-btn { background: var(--g); }
.job-colour { display: flex; gap: .4em; align-items: center; }
.job-colour input[type="color"] { flex: none; width: 2.4em; height: 2.2em; padding: 2px; border: 1px solid var(--border); border-radius: 6px; background: none; cursor: pointer; }
.job-colour input[type="text"] { flex: 1; min-width: 7em; font-family: monospace; }
.job-colour input[type="text"].invalid { border-color: var(--red); box-shadow: 0 0 0 2px color-mix(in srgb, var(--red) 20%, transparent); }
.job-colour .btn { flex: none; }
.photo-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .5em; }
.photo-pick-item { display: flex; flex-direction: column; gap: .3em; padding: 4px; border: 2px solid var(--border); border-radius: var(--radius-md); background: var(--surface); cursor: pointer; font-size: .8em; line-height: 1.3; color: var(--ink-soft); font-weight: 400; }
.photo-pick-item input { position: absolute; opacity: 0; pointer-events: none; }
.photo-pick-item.on { border-color: var(--accent-ink); color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-ink) 18%, transparent); }
.photo-pick-img { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-sm); background: var(--surface-muted); color: var(--ink-soft); }
.job-inline-check { display: inline-flex; align-items: center; gap: .4em; margin-right: auto; font-size: .9em; color: var(--ink-soft); }
.job-notice { display: flex; flex-direction: column; gap: .25em; margin: .2em 0 .8em; padding: .7em .9em; border: 1px solid rgba(220, 150, 40, .5); border-radius: 8px; background: rgba(240, 180, 41, .12); color: var(--ink); font-size: .92em; }

/* Websites screen */
.websites-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1em; align-items: start; }
.websites-layout.has-detail { grid-template-columns: minmax(0, 1.2fr) minmax(320px, 1fr); }
.row-clickable { cursor: pointer; }
.row-selected td { background: var(--surface-muted); }
.website-flag { display: inline-block; padding: .15em .55em; border-radius: var(--radius-pill); background: var(--surface-muted); color: var(--ink-soft); font-size: .82em; white-space: nowrap; }
.website-flag--alert { background: rgba(214, 69, 69, .14); color: #b32d2d; font-weight: 600; }
.website-detail { position: sticky; top: 1em; }
.website-detail h4 { margin: 1.2em 0 .5em; font-size: .78em; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.website-detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1em; margin-bottom: .6em; }
.website-detail-head h3 { margin: 0; font-size: 1.15em; }
.website-detail-head p { margin: .2em 0 0; color: var(--ink-soft); font-size: .9em; }
.website-facts { display: grid; grid-template-columns: 1fr 1fr; gap: .5em 1em; margin: .6em 0 0; }
.website-facts div { min-width: 0; }
.website-facts dt { color: var(--ink-soft); font-size: .8em; }
.website-facts dd { margin: 0; font-size: .92em; overflow-wrap: anywhere; }
.website-confirm { margin-top: .4em; padding: .8em; border: 1px solid rgba(214, 69, 69, .4); border-radius: 8px; background: rgba(214, 69, 69, .07); color: var(--ink); }
.website-confirm p { margin: 0 0 .6em; font-size: .9em; }
.nav-badge--alert { background: var(--red); }
@media (max-width: 1100px) { .websites-layout, .websites-layout.has-detail { grid-template-columns: minmax(0, 1fr); } .website-detail { position: static; } }
.website-detail fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.website-detail .form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.website-mainwp { display: inline-flex; align-items: center; gap: .5em; margin: 0 0 .8em; padding: .35em .8em; border-radius: var(--radius-pill); background: rgba(214, 69, 69, .14); color: #b32d2d; font-size: .88em; }
.website-mainwp.is-ok { background: rgba(116, 204, 0, .16); color: var(--green-dark); }
.website-detail .form-ok { margin: .6em 0 0; color: var(--green-dark); }
.kv-bands table { border-collapse: collapse; margin-bottom: .3em; }
.kv-bands th { padding: 0 .5em .2em 0; color: var(--ink-soft); font-size: .78em; font-weight: 600; text-align: left; }
.kv-bands td { padding: 0 .5em .25em 0; }
.kv-bands input { width: 7em; }
.kv-bands small { display: block; margin-top: .3em; color: var(--ink-soft); }
.website-current, .website-hint { margin: 0 0 .5em; color: var(--ink-soft); font-size: .88em; }
.website-hint { margin: .4em 0 0; }

/* Hosts list: Google / Airbnb rating chips */
.host-ratings { display: flex; flex-wrap: wrap; gap: .3em; }
.rating-chip { display: inline-flex; align-items: center; gap: .3em; padding: .1em .5em; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); font-size: .8em; white-space: nowrap; }
.rating-chip b { color: #1a73e8; font-weight: 700; }
.rating-chip-ab b { color: #e0565b; }
.rating-none { color: var(--ink-soft); }

/* Two-step login (js/modules/mfa.js) */
.mfa-card { max-width: 440px; }
.mfa-notice { margin: 0 0 1em; padding: .7em .9em; border-radius: var(--radius-md); background: var(--surface-muted); font-size: .9em; }
.mfa-trust { display: flex; align-items: center; gap: .5em; margin: .2em 0 1em; font-size: .9em; }
.mfa-alts { display: flex; flex-wrap: wrap; justify-content: center; gap: .4em 1.2em; margin-top: 1em; }
.link-btn { padding: 0; border: 0; background: none; color: var(--accent-ink); font: inherit; font-size: .88em; font-weight: 600; text-decoration: underline; cursor: pointer; }
:root[data-theme="dark"] .link-btn { color: #9cc2ff; }
.mfa-qr { width: 200px; height: 200px; margin: .6em auto 1em; padding: 8px; border-radius: var(--radius-md); background: #fff; }
.mfa-qr svg { display: block; width: 100%; height: 100%; }
.mfa-secret { font-size: .85em; color: var(--ink-soft); }
.mfa-secret code { display: inline-block; margin-top: .2em; font-size: 1.05em; letter-spacing: .05em; color: var(--ink); user-select: all; }
.mfa-code-row { display: flex; gap: .5em; }
.mfa-code-input { max-width: 9em; font-size: 1.3em; letter-spacing: .2em; text-align: center; }
.mfa-codes { columns: 2; margin: .5em 0 1em; padding-left: 1.6em; font-family: ui-monospace, Menlo, monospace; font-size: .95em; line-height: 1.8; }
.mfa-ok { font-weight: 700; color: var(--green-dark); }
.mfa-banner { display: flex; flex-wrap: wrap; align-items: center; gap: .6em 1em; margin: 0 0 .8em; padding: .7em 1em; border-radius: var(--radius-md); background: #fff4d6; color: #5a4300; font-size: .9em; }
:root[data-theme="dark"] .mfa-banner { background: rgba(240, 180, 41, .14); color: #f0d48a; }
.mfa-banner .modal-overlay { font-size: 1rem; color: var(--ink); }
.mfa-banner .modal-card { color: var(--ink); }

/* ---- Configuration › Page Banners (js/modules/page-banners.js) ---- */
.pb-page { padding: 1em 0; border-top: 1px solid var(--border); }
.pb-page:first-of-type { border-top: 0; }
.pb-row { display: flex; flex-wrap: wrap; gap: 1em 1.5em; align-items: flex-start; }
.pb-variant { margin: .9em 0 0 1.5em; padding-left: 1em; border-left: 3px solid var(--border); }
.pb-previews { display: flex; gap: .5em; align-items: flex-start; }
.pb-preview { display: flex; align-items: center; justify-content: center; background-size: cover; background-repeat: no-repeat; background-blend-mode: overlay; background-color: #000; border-radius: var(--radius-md); color: #fff; font-size: .8em; overflow: hidden; }
.pb-wide { width: 320px; height: 110px; }
.pb-phone { width: 62px; height: 110px; }
.pb-controls { flex: 1; min-width: 260px; }
.pb-controls h3, .pb-controls h4 { margin: 0; }
.pb-status { margin: .1em 0 .4em; color: var(--ink-soft); font-size: .85em; }
.pb-slider { display: grid; grid-template-columns: 5.5em 2.8em minmax(120px, 260px) auto; align-items: center; gap: .5em; margin: .25em 0; }
.pb-slider small { color: var(--ink-soft); font-size: .8em; }
.pb-slider input[type=range] { width: 100%; }
.pb-add { display: flex; flex-wrap: wrap; align-items: center; gap: .5em; margin: .6em 0 0; }
.pb-add select { max-width: 280px; }
.modal-card.pb-picker { max-width: 760px; max-height: 86vh; overflow: auto; }
.pb-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .5em; }
.pb-picker-grid button { padding: 0; border: 2px solid transparent; border-radius: var(--radius-md); background: none; cursor: pointer; overflow: hidden; }
.pb-picker-grid button:hover { border-color: var(--border); }
.pb-picker-grid button.on { border-color: var(--accent-ink); }
.pb-picker-grid span { display: block; aspect-ratio: 16 / 7; background: #000 center / cover no-repeat; }
label.btn { cursor: pointer; }
label.btn.disabled { opacity: .55; pointer-events: none; }
@media (max-width: 640px) { .pb-wide { width: 220px; height: 80px; } .pb-phone { width: 45px; height: 80px; } .pb-variant { margin-left: .5em; } }

/* Configuration › Promotion Corner: the badge preview row */
.kv-badge-preview { display: flex; align-items: center; gap: 1em; }
.kv-badge-preview img { flex: none; width: 170px; height: 170px; padding: 8px; border-radius: var(--radius-md); background: linear-gradient(135deg, #2a5d7a, #0a2463); }
.kv-badge-preview span { color: var(--ink-soft); font-size: .85em; }

/* Configuration: image settings (promo_floater) — preview, address and upload */
.kv-image { display: flex; align-items: flex-start; gap: .75em; }
.kv-image img { flex: none; width: 72px; height: 72px; object-fit: contain; padding: 4px; border: 1px solid var(--border); border-radius: var(--radius-md); background: repeating-conic-gradient(#eef1f6 0 25%, #fff 0 50%) 50% / 12px 12px; }
.kv-image > div { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .4em; }
.kv-image > div > input { flex: 1 1 220px; min-width: 0; }
.kv-image .form-error { flex-basis: 100%; margin: 0; }
.kv-library { flex-basis: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .5em; margin-top: .3em; }
.kv-library-empty { grid-column: 1 / -1; margin: 0; color: var(--ink-soft); font-size: .85em; }
.kv-library-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: .2em; }
.kv-library-pick { width: 100%; aspect-ratio: 1; padding: 4px; border: 2px solid var(--border); border-radius: var(--radius-md); background: repeating-conic-gradient(#eef1f6 0 25%, #fff 0 50%) 50% / 12px 12px; cursor: pointer; }
.kv-library-pick img { width: 100%; height: 100%; object-fit: contain; }
.kv-library-item.chosen .kv-library-pick { border-color: var(--green); box-shadow: 0 0 0 2px var(--green); }
.kv-library-item small { color: var(--ink-soft); font-size: .72em; }
.kv-library-del { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--surface, #fff); color: var(--ink-soft); font-size: 11px; line-height: 1; cursor: pointer; }
.kv-library-del:hover { color: var(--red); border-color: var(--red); }

/* Property editor: capacity fields that disagree with the description */
.capacity-warning { margin: .5em 0 0; padding: .45em .7em; border-radius: var(--radius-sm); background: #fff4e5; color: #8a4b00; font-size: .85em; }
:root[data-theme="dark"] .capacity-warning { background: #3a2a12; color: #ffcf8a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .capacity-warning { background: #3a2a12; color: #ffcf8a; } }

/* Configuration › Home Banner Ticket: a preview of the ticket (keep in step with the public site's .hb-ticket) */
.bt-preview-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: .6em 1.2em; }
.bt-preview { display: flex; align-items: center; gap: 22px; padding: 22px 26px; border-radius: var(--radius-md); background: linear-gradient(160deg, #2a5d7a, #0a2463); }
.bt-preview.off { opacity: .4; filter: grayscale(.6); }
.bt-btn { padding: 12px 18px; border: 2px solid rgba(255,255,255,.9); border-radius: 10px; background: #ff6200; color: #fff; font-weight: 800; white-space: nowrap; }
.bt-ticket { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 170px; padding: 8px 22px 8px 42px; line-height: 1; text-align: center; transform: rotate(-3deg);
  clip-path: polygon(20px 0, 100% 0, 100% 100%, 20px 100%, 0 50%); filter: drop-shadow(4px 8px 6px rgba(0,0,0,.4)); }
.bt-ticket small { font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.bt-ticket b { font: 700 24px/1 Caveat, 'Bradley Hand', 'Comic Sans MS', cursive; white-space: nowrap; }
.bt-ticket span { font: 700 14px/1 Caveat, 'Bradley Hand', 'Comic Sans MS', cursive; white-space: nowrap; }
.bt-eye { position: absolute; left: 11px; top: 50%; width: 15px; height: 15px; margin-top: -7.5px; border-radius: 50%; background: radial-gradient(circle, #140c05 0 3px, #c8a35a 4px, #8a6a2a 7px); }
.bt-kraft { background: linear-gradient(90deg, #e2c08c, #edd2a3 30%, #dfb87f 85%, #d2a86c); color: #3b2612; }
.bt-red { background: linear-gradient(90deg, #f0443a, #e02a20 30%, #c61b14); color: #fff4e8; }
.bt-navy { background: linear-gradient(90deg, #2a4aa6, #1a378c 30%, #122a70); color: #fff; }
.bt-yellow { background: linear-gradient(90deg, #ffdb55, #ffc81a 30%, #eeb200); color: #1d1406; }
.bt-white { background: linear-gradient(90deg, #fff, #f7f4ee 30%, #ebe5da); color: #c11d16; }
.bt-note { color: var(--ink-soft); font-size: .85em; }

/* Host editor › Booking Page Design */
.bpd-designs { display: inline-flex; margin: 0 0 .7em; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.bpd-design { padding: .5em 1.2em; border: 0; border-right: 1px solid var(--border); background: var(--surface); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.bpd-design:last-child { border-right: 0; }
.bpd-design.on { background: var(--navy); color: #fff; }
.bpd-palettes { display: flex; flex-wrap: wrap; gap: .4em; }
.bpd-swatch { display: inline-flex; align-items: center; gap: .45em; padding: .3em .7em .3em .3em; border: 1.5px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); font: inherit; font-size: .85em; cursor: pointer; }
.bpd-swatch.on { border-color: var(--accent-ink); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-ink) 25%, transparent); }
.bpd-dot { flex: none; width: 1.4em; height: 1.4em; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }
.bpd-dot-custom { background: conic-gradient(#f43f5e, #f59e0b, #84cc16, #06b6d4, #6366f1, #d946ef, #f43f5e); }
.bpd-picker { display: flex; gap: .4em; align-items: center; }
.bpd-picker input[type=color] { flex: none; width: 44px; height: 36px; padding: 2px; }
.bpd-picker input:not([type=color]) { width: 110px; font-family: monospace; }