/* ==========================================================================
   AmaderSystem — internal buyer directory
   Dark, dense, and built for one job: find the right buyer fast and message
   them. Layout follows the P2P marketplace pattern the team already knows.
   ========================================================================== */

/* Light is the default theme (no attribute needed). Dark is opt-in via
   data-theme="dark" on <html>, toggled by the switch in the header and
   remembered in localStorage — see the bottom of app.js. */
:root {
  --bg:          #f5f6f8;
  --surface:     #ffffff;
  --surface-2:   #f1f2f5;
  --surface-3:   #e7e9ee;
  --border:      #dfe2e8;
  --border-soft: #eaecf0;

  --text:    #171a21;
  --text-dim:#4b5563;
  --muted:   #6b7280;

  --accent:      #15803d;
  --accent-dim:  #166534;
  --accent-bg:   rgba(21, 128, 61, 0.10);
  --accent-text: #ffffff;
  --accent-rgb:  21, 128, 61;

  --danger:    #dc2626;
  --danger-bg: rgba(220, 38, 38, 0.08);
  --danger-rgb: 220, 38, 38;
  --warn:      #b45309;
  --warn-bg:   rgba(180, 83, 9, 0.10);
  --warn-rgb:  180, 83, 9;
  --info:      #2563eb;
  --info-bg:   rgba(37, 99, 235, 0.08);
  --info-rgb:  37, 99, 235;
  --info-contrast-text: #ffffff;

  --wa: #25d366;
  --tg: #29a9eb;
  --fb: #0084ff;

  --radius:    10px;
  --radius-sm: 7px;
  --radius-lg: 14px;

  --shadow: 0 8px 24px rgba(15, 23, 42, 0.12);

  --font: "Open Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

:root[data-theme="dark"] {
  --bg:          #0f1115;
  --surface:     #171a21;
  --surface-2:   #1e222b;
  --surface-3:   #262b36;
  --border:      #2a2f3a;
  --border-soft: #222630;

  --text:    #e6e8ec;
  --text-dim:#a8b0bf;
  --muted:   #7b8494;

  --accent:      #4ade80;
  --accent-dim:  #22c55e;
  --accent-bg:   rgba(74, 222, 128, 0.12);
  --accent-text: #0f1115;
  --accent-rgb:  74, 222, 128;

  --danger:    #f87171;
  --danger-bg: rgba(248, 113, 113, 0.12);
  --danger-rgb: 248, 113, 113;
  --warn:      #fbbf24;
  --warn-bg:   rgba(251, 191, 36, 0.12);
  --warn-rgb:  251, 191, 36;
  --info:      #60a5fa;
  --info-bg:   rgba(96, 165, 250, 0.12);
  --info-rgb:  96, 165, 250;
  --info-contrast-text: #0b1220;

  --shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

/* Self-hosted — no external font request, consistent with the app's
   zero-dependency, nothing-talks-to-a-third-party design. */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/open-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/open-sans-500.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/open-sans-600.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/open-sans-700.woff2") format("woff2");
}

* { box-sizing: border-box; }

/* Light/dark switch.
   A blanket `* { transition }` made the switch stagger: buttons faded in
   0.12s, cards in 0.2s, and anything with a transform-only transition
   snapped instantly, so the page changed in visible waves. Instead the
   toggle (app.js) takes one of two routes, both giving a single even fade:
   - View Transitions browsers: the whole page cross-fades as one image.
     Element transitions are switched off meanwhile so nothing animates on
     top of the fade.
   - Other browsers: every element gets the same timing for the duration. */
:root { --theme-fade: 0.6s; }  /* app.js clears its fallback fade after 700ms — keep that longer than this */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--theme-fade);
  animation-timing-function: ease;
}
html.theme-instant *,
html.theme-instant *::before,
html.theme-instant *::after {
  transition: none !important;
}
html.theme-fade,
html.theme-fade *,
html.theme-fade *::before,
html.theme-fade *::after {
  transition: background-color var(--theme-fade) ease, color var(--theme-fade) ease,
              border-color var(--theme-fade) ease, fill var(--theme-fade) ease,
              stroke var(--theme-fade) ease, box-shadow var(--theme-fade) ease !important;
}
/* The sun/moon swap is the one animation worth keeping in both routes. */
html.theme-instant .theme-toggle svg,
html.theme-fade .theme-toggle svg {
  transition: opacity 0.5s ease, transform 0.6s ease !important;
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 1.35rem; }
h2 { font-size: 1.05rem; }
h3 { font-size: 0.95rem; }

/* ---------------------------------------------------------------- layout */
.shell { min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
  height: 68px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
}

/* Kept separate from .topbar so the bar itself stays full-bleed while its
   content lines up exactly with .main below it — same max-width, same
   horizontal padding. */
.topbar-inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  height: 100%;
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.brand:hover { text-decoration: none; }
.brand-mark { width: 32px; height: 32px; flex: none; object-fit: contain; }

.nav { display: flex; gap: 0.15rem; margin-left: 0.5rem; }
.nav a {
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: 0.86rem;
  font-weight: 500;
  white-space: nowrap;
}
.nav a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.nav a.is-active { background: var(--surface-3); color: var(--text); }

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 0.6rem; }

.who {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.84rem; color: var(--text-dim);
}
.avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--text);
  display: grid; place-items: center;
  font-size: 0.72rem; font-weight: 700;
  border: 1px solid var(--border);
  object-fit: cover;
}

/* ---------------------------------------------------------------- avatar upload */
.avatar-upload {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 0.9rem;
}
.avatar-lg {
  width: 64px; height: 64px; flex: none;
  border-radius: 50%;
  background: var(--surface-3);
  border: 1px solid var(--border);
  object-fit: cover;
}
.avatar-fallback {
  display: grid; place-items: center;
  font-size: 1.1rem; font-weight: 700;
  color: var(--text-dim);
}
.avatar-upload-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.avatar-upload-actions label.btn { cursor: pointer; }

.theme-toggle {
  position: relative;
  display: grid; place-items: center;
  width: 34px; height: 34px; flex: none;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-dim);
  cursor: pointer;
  overflow: hidden;
}
.theme-toggle:hover { background: var(--surface-3); color: var(--text); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-toggle svg {
  position: absolute;
  width: 17px; height: 17px;
  transition: opacity 0.5s ease, transform 0.6s ease;
}
.theme-toggle .icon-sun { opacity: 0; transform: rotate(-90deg) scale(0.5); }
.theme-toggle .icon-moon { opacity: 1; transform: rotate(0deg) scale(1); }
:root[data-theme="dark"] .theme-toggle .icon-sun { opacity: 1; transform: rotate(0deg) scale(1); }
:root[data-theme="dark"] .theme-toggle .icon-moon { opacity: 0; transform: rotate(90deg) scale(0.5); }

.profile { position: relative; }
.profile-trigger {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 0.3rem 0.4rem;
  border-radius: var(--radius-sm);
}
.profile-trigger:hover { background: var(--surface-2); }
.profile-trigger .caret {
  width: 15px; height: 15px; flex: none;
  color: var(--text-dim);
  transition: transform 0.15s, color 0.12s;
}
.profile-trigger:hover .caret { color: var(--text); }
.profile-trigger[aria-expanded="true"] .caret { transform: rotate(180deg); }

.profile-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  min-width: 190px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.35rem;
  z-index: 60;
}
.profile-dropdown.is-open { display: block; }
.profile-dropdown a, .profile-dropdown button {
  display: block;
  width: 100%;
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius-sm);
  border: none;
  background: none;
  color: var(--text);
  font-family: inherit;
  font-size: 0.86rem;
  text-align: left;
  cursor: pointer;
}
.profile-dropdown a:hover, .profile-dropdown button:hover {
  background: var(--surface-2);
  text-decoration: none;
}
.profile-dropdown a.is-active { background: var(--surface-3); color: var(--text); }
.profile-dropdown .dropdown-divider { height: 1px; background: var(--border); margin: 0.3rem 0.1rem; }
.profile-dropdown form { margin: 0; }

/* ---------------------------------------------------------------- notifications */
.notif { position: relative; }
/* .theme-toggle sets overflow:hidden to contain the sun/moon crossfade — the
   bell reuses that class for its square-icon-button look but needs the badge
   below to spill outside its box, not get clipped by it. */
.notif-trigger { position: relative; overflow: visible; }
.notif-badge {
  position: absolute; top: -6px; right: -6px;
  min-width: 20px; height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  /* A fixed, saturated red on purpose — this needs to read as "urgent" in
     both themes, not follow --danger's softer dark-mode tone. */
  background: #ef4444;
  color: #fff;
  font-size: 0.75rem; font-weight: 800; line-height: 1;
  display: grid; place-items: center;
  border: 2px solid var(--surface);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.notif-dropdown {
  width: 320px;
  max-width: calc(100vw - 2rem);
  padding: 0;
  overflow: hidden;
}
.notif-head {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--border-soft);
  font-size: 0.82rem; font-weight: 700;
  color: var(--text-dim);
}
.notif-head form { margin-left: auto; }
.notif-mark-all {
  background: none; border: none;
  color: var(--accent);
  font-family: inherit;
  font-size: 0.78rem; font-weight: 600;
  cursor: pointer; padding: 0;
}
.notif-mark-all:hover { text-decoration: underline; }

.notif-list { max-height: 360px; overflow-y: auto; padding: 0.35rem; }
.notif-divider { margin: 0 0.1rem; }
.notif-see-all {
  display: block;
  text-align: center;
  padding: 0.65rem;
  font-size: 0.82rem; font-weight: 600;
  color: var(--accent);
}
.notif-see-all:hover { background: var(--surface-2); text-decoration: none; }
.notif-empty {
  padding: 1.5rem 0.85rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.84rem;
}
.notif-item {
  display: flex; flex-direction: column; gap: 0.15rem;
  width: 100%;
  padding: 0.6rem 0.65rem;
  margin-bottom: 0.15rem;
  border: none; border-radius: var(--radius-sm);
  background: none;
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  position: relative;
}
.notif-item:hover { background: var(--surface-2); }
.notif-item.is-unread { background: var(--accent-bg); }
.notif-item.is-unread:hover { background: var(--accent-bg); filter: brightness(1.08); }
.notif-item.is-unread::before {
  content: "";
  position: absolute; left: 0.2rem; top: 0.85rem;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}
.notif-item.is-unread .notif-title { padding-left: 0.6rem; }
.notif-title { font-size: 0.85rem; font-weight: 700; }
.notif-body { font-size: 0.8rem; color: var(--text-dim); line-height: 1.4; }
.notif-time { font-size: 0.72rem; color: var(--muted); margin-top: 0.1rem; }

/* The full /notifications page — same row content as the dropdown, laid out
   as full-width cards instead of a cramped panel list. */
.notif-page-list { display: flex; flex-direction: column; gap: 0.5rem; }
.notif-page-item {
  display: flex; flex-direction: column; gap: 0.3rem;
  width: 100%;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  position: relative;
}
.notif-page-item:hover { border-color: var(--surface-3); background: var(--surface-2); }
.notif-page-item.is-unread { border-color: rgba(74, 222, 128, 0.35); background: var(--accent-bg); }
.notif-page-item.is-unread .notif-title { padding-left: 0.7rem; }
.notif-page-item.is-unread::before {
  content: "";
  position: absolute; left: 0.9rem; top: 1.15rem;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
}

.main { flex: 1; padding: 1.25rem; max-width: 1800px; width: 100%; margin: 0 auto; }

.footer {
  padding: 1.1rem 1.75rem 1.4rem;
  text-align: center;
  position: relative;
}
/* The logo's own gradient — teal to green to amber — used as a thin brand
   accent rather than repeated in text, so it reads fine in both themes. */
.footer::before {
  content: "";
  display: block;
  height: 3px;
  max-width: 220px;
  margin: 0 auto 1.1rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #1f4c4d, #3e794f, #e98826);
}
.footer div, .footer span {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.6;
}
.footer-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}
.footer-brand img { width: 18px; height: 18px; object-fit: contain; }
.footer-disclaimer {
  max-width: 720px;
  margin: 0.2rem auto 0;
}
.page-head {
  display: flex; align-items: center; gap: 0.85rem;
  margin-bottom: 1rem; flex-wrap: wrap;
}
.page-head .spacer { margin-left: auto; }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, opacity 0.12s;
}
.btn:hover { background: var(--surface-3); text-decoration: none; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-primary {
  background: var(--accent); border-color: var(--accent);
  color: var(--accent-text); font-weight: 600;
}
.btn-primary:hover { background: var(--accent-dim); border-color: var(--accent-dim); }

.btn-danger { color: var(--danger); border-color: rgba(var(--danger-rgb),0.35); background: var(--danger-bg); }
.btn-danger:hover { background: rgba(var(--danger-rgb),0.2); }

.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--surface-2); }

.btn-sm { padding: 0.3rem 0.6rem; font-size: 0.79rem; }
.btn-block { width: 100%; }

/* ---------------------------------------------------------------- forms */
label { display: block; font-size: 0.82rem; font-weight: 500; color: var(--text-dim); margin-bottom: 0.35rem; }

input[type=text], input[type=password], input[type=search], input[type=number],
input[type=date], select, textarea {
  width: 100%;
  padding: 0.52rem 0.7rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: 0.88rem;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
}
input::placeholder, textarea::placeholder { color: var(--muted); }
textarea { resize: vertical; min-height: 76px; line-height: 1.55; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%237b8494' d='M6 8.5L1.5 4h9z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  padding-right: 1.9rem;
}
.field { margin-bottom: 0.9rem; }
.hint { font-size: 0.78rem; color: var(--muted); margin-top: 0.3rem; }

.check { display: flex; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.5rem; }
.check input { margin-top: 0.2rem; accent-color: var(--accent); }
.check label { margin: 0; color: var(--text); font-weight: 400; }

/* ---------------------------------------------------------------- cards */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem;
  margin-bottom: 1rem;
}
.card-head {
  display: flex; align-items: center; gap: 0.6rem;
  margin: -0.15rem 0 0.9rem;
}
.card-head .spacer { margin-left: auto; }

/* ---------------------------------------------------------------- alerts */
.alert {
  display: flex; gap: 0.6rem; align-items: flex-start;
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-sm);
  border: 1px solid;
  margin-bottom: 1rem;
  font-size: 0.87rem;
}
.alert-success { background: var(--accent-bg); border-color: rgba(var(--accent-rgb),0.3); color: var(--accent); }
.alert-error   { background: var(--danger-bg); border-color: rgba(var(--danger-rgb),0.3); color: var(--danger); }
.alert-warn    { background: var(--warn-bg);   border-color: rgba(var(--warn-rgb),0.3);   color: var(--warn); }
.alert-info    { background: var(--info-bg);   border-color: rgba(var(--info-rgb),0.3);   color: var(--info); }
.alert ul { margin: 0.2rem 0 0; padding-left: 1.1rem; }

/* ==========================================================================
   FILTER BAR — the control surface, modelled on the reference screenshots
   ========================================================================== */
.filterbar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.7rem;
  margin-bottom: 0.85rem;
  position: sticky;
  top: 68px;
  z-index: 40;
}

.filter-row {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  flex-wrap: wrap;
}

/* Segmented Physical / eCode / Any control */
.segmented {
  display: inline-flex;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px;
  gap: 2px;
}
.segmented button {
  padding: 0.38rem 0.72rem;
  border: none;
  background: transparent;
  color: var(--text-dim);
  border-radius: 5px;
  font-family: inherit;
  font-size: 0.83rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.segmented button:hover { color: var(--text); }
.segmented button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
}

.filter-field { position: relative; }
.filter-field select, .filter-field input { min-width: 150px; }
.filter-field.grow { flex: 1; min-width: 190px; }
.filter-field.grow input { min-width: 0; }

/* Amount lives in the filter row for convenience while composing the
   message — it never filters the buyer list, so it stays narrow rather
   than matching the dropdowns' width. */
.amount-field input { min-width: 0; width: 110px; }

.filter-search { position: relative; }
.filter-search input { padding-left: 2rem; }
.filter-search::before {
  content: "";
  position: absolute; left: 0.65rem; top: 50%;
  width: 13px; height: 13px;
  transform: translateY(-50%);
  background: var(--muted);
  -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 21l-4.35-4.35M17 10a7 7 0 11-14 0 7 7 0 0114 0z' stroke='black' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 21l-4.35-4.35M17 10a7 7 0 11-14 0 7 7 0 0114 0z' stroke='black' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  pointer-events: none;
}

/* Active filter chips */
.chips {
  display: flex; gap: 0.4rem; flex-wrap: wrap;
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border-soft);
}
.chips:empty { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.24rem 0.5rem 0.24rem 0.6rem;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.79rem;
  color: var(--text);
}
.chip button {
  border: none; background: none; cursor: pointer;
  color: var(--muted); font-size: 1rem; line-height: 1;
  padding: 0 0 0 0.1rem;
}
.chip button:hover { color: var(--danger); }
.chip-clear {
  background: var(--danger-bg);
  border-color: rgba(var(--danger-rgb),0.3);
  color: var(--danger);
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
}
.chip-clear:hover { background: rgba(var(--danger-rgb),0.2); }

/* ==========================================================================
   FILTER SIDEBAR — left-hand filter panel, modelled on the reference P2P
   exchange screenshot: a fixed dark card, compound fields, toggle switches,
   and one prominent action button at the bottom.
   ========================================================================== */
.directory-shell {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 1rem;
  align-items: start;
}

.filter-sidebar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.1rem;
  position: sticky;
  top: 84px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}

.filter-sidebar-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.filter-sidebar-head h2 { font-size: 0.98rem; }
.filter-sidebar-head .spacer { margin-left: auto; }
.filter-sidebar-head .clear-link {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 0.79rem;
  font-family: inherit;
  cursor: pointer;
  padding: 0.1rem 0;
}
.filter-sidebar-head .clear-link:hover { color: var(--danger); text-decoration: underline; }

.filter-group { margin-bottom: 1rem; }
.filter-group:last-of-type { margin-bottom: 0.9rem; }

.filter-label {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 0.4rem;
}
.info-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px; height: 13px;
  border-radius: 50%;
  border: 1px solid var(--muted);
  color: var(--muted);
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 700;
  cursor: help;
  flex: none;
}

/* Rounded, icon-led control — the "Bitcoin ⌄" / location-pill look */
.pill-field { position: relative; }
.pill-field select,
.pill-field input {
  width: 100%;
  min-width: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: 0.87rem;
  padding: 0.6rem 0.7rem;
}
.pill-field select:focus, .pill-field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
}
.pill-field.has-icon select,
.pill-field.has-icon input { padding-left: 2.15rem; }
.pill-field .field-icon {
  position: absolute;
  left: 0.65rem; top: 50%;
  transform: translateY(-50%);
  width: 15px; height: 15px;
  color: var(--muted);
  pointer-events: none;
}
.pill-field .field-icon svg { width: 100%; height: 100%; }

/* Card type: three equal buttons instead of the old inline segmented row */
.type-toggle {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px;
}
.type-toggle button {
  padding: 0.45rem 0.3rem;
  border: none;
  background: transparent;
  color: var(--text-dim);
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.79rem;
  font-weight: 500;
  cursor: pointer;
}
.type-toggle button:hover { color: var(--text); }
.type-toggle button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 700;
}

/* Amount + currency fused into one field, matching the reference's
   "Enter amount | $£€ ⌄" compound input. */
.amount-compound {
  display: flex;
  align-items: stretch;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.amount-compound:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
}
.amount-compound input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  color: var(--text);
  font-family: inherit;
  font-size: 0.87rem;
  padding: 0.6rem 0.7rem;
}
.amount-compound input:focus { outline: none; }
.amount-compound select {
  flex: none;
  width: auto;
  min-width: 4.75rem;
  background: var(--accent-bg);
  border: none;
  border-left: 1px solid rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
  font-family: inherit;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 0.6rem 0.7rem;
}
.amount-compound select:focus { outline: none; }
/* The accent color/weight above is for the closed button only — text and
   font-weight cascade into <option> by default, which would tint the whole
   dropdown list too. Reset the list back to plain text. */
.amount-compound select option {
  background: var(--surface);
  color: var(--text);
  font-weight: 400;
}

/* Toggle switches for the two quality filters */
.switch-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0;
}
.switch-row .switch-text {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.85rem;
  color: var(--text);
}

.switch {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
  flex: none;
}
.switch input {
  position: absolute;
  opacity: 0;
  width: 100%; height: 100%;
  margin: 0;
  cursor: pointer;
}
.switch .track {
  position: absolute;
  inset: 0;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: background 0.15s, border-color 0.15s;
}
.switch .track::before {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--text-dim);
  transition: transform 0.15s, background 0.15s;
}
.switch input:checked ~ .track { background: var(--accent); border-color: var(--accent); }
.switch input:checked ~ .track::before { transform: translateX(16px); background: var(--accent-text); }
.switch input:focus-visible ~ .track { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Compact message preview, sitting under Amount & currency the way the
   reference's live rate line sits under its asset picker. */
.msg-preview-wrap { position: relative; margin-top: 0.5rem; }

.msg-copy-btn {
  position: absolute;
  right: 0.35rem;
  bottom: 0.35rem;
  width: 24px; height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface-3);
  color: var(--text-dim);
  cursor: pointer;
  padding: 0;
}
.msg-copy-btn:hover { color: var(--text); border-color: var(--accent); }
.msg-copy-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.msg-copy-btn svg { width: 13px; height: 13px; }
.msg-copy-btn.is-copied { color: var(--accent); border-color: var(--accent); }

.msg-preview-inline {
  margin-top: 0;
  padding: 0.5rem 2.1rem 0.5rem 0.6rem;
  background: var(--surface-2);
  border: 1px dashed var(--border);
  border-radius: 6px;
  font-size: 0.76rem;
  font-style: italic;
  line-height: 1.4;
  color: var(--accent);
  overflow-wrap: break-word;
}

.filter-sidebar-divider {
  height: 1px;
  background: var(--border-soft);
  margin: 0.9rem 0;
  border: none;
}

/* The prominent CTA at the bottom of the reference card */
.filter-cta {
  width: 100%;
  margin-top: 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.75rem 1rem;
  background: var(--accent);
  color: var(--accent-text);
  border: none;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s, transform 0.08s;
}
.filter-cta:hover { background: var(--accent-dim); }
.filter-cta:active { transform: translateY(1px); }
.filter-cta svg { width: 15px; height: 15px; }

/* Mobile: only the sidebar toggle button ever appears; JS shows/hides it */
.filter-mobile-toggle { display: none; }

@media (max-width: 900px) {
  .directory-shell { grid-template-columns: 1fr; }
  .filter-sidebar {
    position: static;
    max-height: none;
    display: none;
  }
  .filter-sidebar.is-open { display: block; }
  .filter-mobile-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
  }
  .filter-mobile-toggle svg { width: 15px; height: 15px; }
  .filter-mobile-toggle .count-badge { margin-left: 0.1rem; }
}

/* ---------------------------------------------------------------- results */
.results-head {
  display: flex; align-items: center; gap: 0.7rem;
  margin: 0 0.2rem 0.7rem;
  flex-wrap: wrap;
}
.results-count {
  font-size: 1rem; font-weight: 600; color: var(--text);
}
.count-badge {
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.12rem 0.6rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-dim);
  margin-left: 0.15rem;
}
.results-head .spacer { margin-left: auto; }

.buyer-list { display: flex; flex-direction: column; gap: 0.5rem; }

.buyer {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  display: grid;
  grid-template-columns: minmax(190px, 1.15fr) minmax(200px, 1.5fr) minmax(130px, 0.8fr) auto;
  gap: 1rem;
  align-items: center;
  transition: border-color 0.12s, background 0.12s;
}
.buyer:hover { border-color: var(--surface-3); background: var(--surface-2); }
.buyer.is-blacklisted {
  border-color: rgba(var(--danger-rgb),0.4);
  background: linear-gradient(90deg, rgba(var(--danger-rgb),0.07), transparent 60%);
}
.buyer.is-inactive { opacity: 0.55; }
.buyer.is-onboard {
  border-color: rgba(34,197,94,0.45);
  background: rgba(34,197,94,0.1);
}
.buyer.is-onboard:hover { border-color: rgba(34,197,94,0.6); background: rgba(34,197,94,0.15); }

.buyer-id { display: flex; align-items: center; gap: 0.65rem; min-width: 0; }
.buyer-avatar {
  width: 36px; height: 36px; flex: none;
  border-radius: 9px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  display: grid; place-items: center;
  font-size: 0.78rem; font-weight: 700;
  color: var(--text-dim);
  object-fit: cover;
}
.buyer.is-blacklisted .buyer-avatar { background: var(--danger-bg); color: var(--danger); border-color: rgba(var(--danger-rgb),0.3); }

.buyer-name {
  font-weight: 600; font-size: 0.94rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.flag-icon {
  display: inline-block;
  width: 20px; height: 15px;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--border-soft);
  flex: none;
  vertical-align: middle;
}
.buyer-meta {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.78rem; color: var(--muted);
  margin-top: 0.1rem; flex-wrap: wrap;
}
.buyer-id > div { min-width: 0; }
.platform-url-field { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-soft); }
.platform-url-field input { font-family: var(--mono, ui-monospace, Consolas, monospace); }

.tag {
  display: inline-block;
  padding: 0.1rem 0.42rem;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  background: var(--surface-3);
  color: var(--text-dim);
  border: 1px solid var(--border);
}
.tag-danger { background: var(--danger-bg); color: var(--danger); border-color: rgba(var(--danger-rgb),0.3); }
.tag-warn   { background: var(--warn-bg);   color: var(--warn);   border-color: rgba(var(--warn-rgb),0.3); }
.tag-accent { background: var(--accent-bg); color: var(--accent); border-color: rgba(var(--accent-rgb),0.3); }
.tag-info   { background: var(--info-bg);   color: var(--info);   border-color: rgba(var(--info-rgb),0.3); }

.buyer-cards { display: flex; flex-wrap: wrap; gap: 0.28rem; align-items: center; min-width: 0; }
.card-pill {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.18rem 0.5rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 0.78rem;
  color: var(--text-dim);
  white-space: nowrap;
}
.card-pill.is-match { background: var(--accent-bg); border-color: rgba(var(--accent-rgb),0.35); color: var(--accent); }
.card-pill .type {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--muted); font-weight: 600;
}
.card-pill.is-match .type { color: var(--accent); }

.buyer-currencies { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.curr {
  padding: 0.14rem 0.42rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: var(--mono);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
}
.curr.is-match { background: var(--accent-bg); border-color: rgba(var(--accent-rgb),0.35); color: var(--accent); }

.buyer-actions { display: flex; gap: 0.4rem; align-items: center; justify-self: end; }

.contact-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.35rem;
  width: 38px; height: 34px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  cursor: pointer;
  color: var(--text-dim);
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.contact-btn:hover { text-decoration: none; }
.contact-btn svg { width: 17px; height: 17px; }
.contact-btn.wa:hover { background: rgba(37,211,102,0.16); color: var(--wa); border-color: rgba(37,211,102,0.4); }
.contact-btn.tg:hover { background: rgba(41,169,235,0.16); color: var(--tg); border-color: rgba(41,169,235,0.4); }
.contact-btn.web:hover { background: var(--accent-bg); color: var(--accent); border-color: rgba(var(--accent-rgb),0.4); }
.contact-btn.fb:hover { background: rgba(0,132,255,0.16); color: var(--fb); border-color: rgba(0,132,255,0.4); }
.contact-btn.is-disabled { opacity: 0.3; cursor: not-allowed; }
.contact-btn.has-multi { position: relative; }
.contact-btn .count {
  position: absolute; top: -5px; right: -5px;
  background: var(--info); color: var(--info-contrast-text);
  border-radius: 999px;
  font-size: 0.62rem; font-weight: 800;
  min-width: 15px; height: 15px;
  display: grid; place-items: center;
  padding: 0 3px;
}

.empty {
  text-align: center;
  padding: 3.5rem 1.5rem;
  color: var(--muted);
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}
.empty h3 { color: var(--text-dim); margin-bottom: 0.4rem; }

/* ---------------------------------------------------------------- composer */
.composer {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.7rem;
  margin-bottom: 0.85rem;
  display: flex;
  gap: 0.55rem;
  align-items: center;
  flex-wrap: wrap;
}
.composer-label {
  font-size: 0.78rem; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.05em;
  white-space: nowrap;
}
.composer .preview {
  flex: 1;
  min-width: 240px;
  padding: 0.45rem 0.65rem;
  background: var(--surface-2);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.83rem;
  color: var(--text-dim);
  font-style: italic;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------------------------------------------------------------- modal */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(6, 8, 12, 0.72);
  display: grid; place-items: center;
  z-index: 100;
  padding: 1rem;
}
.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  width: 100%;
  max-width: 480px;
  max-height: 88vh;
  overflow-y: auto;
}
.modal-head {
  padding: 1rem 1.1rem 0.75rem;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 0.6rem;
}
.modal-head .spacer { margin-left: auto; }
.modal-body { padding: 1.1rem; }
.modal-foot {
  padding: 0.85rem 1.1rem;
  border-top: 1px solid var(--border);
  display: flex; gap: 0.5rem; justify-content: flex-end;
}
.modal-close {
  background: none; border: none; color: var(--muted);
  font-size: 1.3rem; cursor: pointer; line-height: 1; padding: 0 0.2rem;
}
.modal-close:hover { color: var(--text); }

/* ---------------------------------------------------------------- confirm
   The site's own "are you sure?" — replaces the browser's confirm() box for
   every form marked data-confirm (see initConfirmDialog in app.js). */
.confirm-backdrop {
  z-index: 1000;
  background: rgba(6, 8, 12, 0.55);
  backdrop-filter: blur(2px);
  opacity: 0; transition: opacity 0.16s ease;
}
.confirm-backdrop.is-open { opacity: 1; }
.confirm-dialog {
  max-width: 440px;
  padding: 1.35rem 1.35rem 1.1rem;
  transform: translateY(8px) scale(0.98);
  transition: transform 0.18s ease;
}
.confirm-backdrop.is-open .confirm-dialog { transform: none; }
.confirm-main { display: flex; gap: 0.95rem; align-items: flex-start; }
.confirm-icon {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-bg); color: var(--accent);
}
.confirm-dialog.is-danger .confirm-icon { background: var(--danger-bg); color: var(--danger); }
.confirm-icon svg { width: 20px; height: 20px; }
.confirm-text { min-width: 0; padding-top: 0.1rem; }
.confirm-text h2 { margin: 0; font-size: 1.02rem; font-weight: 700; line-height: 1.35; color: var(--text); }
.confirm-text p { margin: 0.4rem 0 0; font-size: 0.88rem; line-height: 1.55; color: var(--text-dim); }
.confirm-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1.3rem; }
/* Two classes, so the later general .btn rules further down cannot repaint it. */
.btn.btn-danger-solid { background: #dc2626; border-color: #dc2626; color: #fff; }
.btn.btn-danger-solid:hover { background: #b91c1c; border-color: #b91c1c; color: #fff; }
@media (max-width: 480px) {
  .confirm-actions { flex-direction: column-reverse; }
  .confirm-actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .confirm-backdrop, .confirm-dialog { transition: none; }
}

.msg-preview {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--wa);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.85rem;
  font-size: 0.88rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  margin-bottom: 0.9rem;
}
.msg-preview.tg { border-left-color: var(--tg); }

.contact-choice {
  display: flex; align-items: center; gap: 0.6rem;
  width: 100%;
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.4rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.88rem;
  font-family: var(--mono);
  cursor: pointer;
  text-align: left;
}
.contact-choice:hover { background: var(--surface-3); text-decoration: none; border-color: var(--accent); }
.contact-choice .spacer { margin-left: auto; }

.site-actions { display: flex; gap: 0.35rem; align-items: center; }

.site-name { display: flex; align-items: center; gap: 0.6rem; }
.site-logo {
  width: 26px; height: 26px; flex: none;
  border-radius: 7px;
  background: #fff;
  border: 1px solid var(--border);
  display: grid; place-items: center;
  overflow: hidden;
}
.site-logo img { width: 18px; height: 18px; object-fit: contain; display: block; }
.site-logo.is-fallback {
  background: var(--surface-3);
  color: var(--text-dim);
  font-size: 0.68rem; font-weight: 700;
}

/* ---------------------------------------------------------------- tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
th {
  text-align: left;
  padding: 0.6rem 0.8rem;
  background: var(--surface-2);
  color: var(--muted);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
td { padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-2); }
td.mono, .mono { font-family: var(--mono); font-size: 0.82rem; }
td.nowrap { white-space: nowrap; }

/* ---------------------------------------------------------------- auth pages */
.auth-shell { min-height: 100vh; display: flex; flex-direction: column; }
.auth-wrap {
  flex: 1;
  display: grid; place-items: center;
  padding: 1.5rem;
}
.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow);
}
.auth-card.wide { max-width: 560px; }
.auth-brand {
  display: flex; align-items: center; gap: 0.6rem;
  justify-content: center;
  margin-bottom: 0.35rem;
  font-weight: 700; font-size: 1.05rem;
}
.auth-sub { text-align: center; color: var(--muted); font-size: 0.85rem; margin-bottom: 1.4rem; }
.auth-foot { text-align: center; margin-top: 1.1rem; font-size: 0.78rem; color: var(--muted); }

.code-input {
  font-family: var(--mono);
  font-size: 1.4rem !important;
  letter-spacing: 0.4em;
  text-align: center;
  padding: 0.6rem !important;
}

.secret-box {
  font-family: var(--mono);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.7rem;
  text-align: center;
  word-break: break-all;
  margin-bottom: 0.75rem;
  color: var(--accent);
}

.credential-box {
  background: var(--warn-bg);
  border: 1px solid rgba(var(--warn-rgb),0.35);
  border-radius: var(--radius-sm);
  padding: 0.9rem;
  margin-bottom: 1rem;
}
.credential-box dl { margin: 0.5rem 0 0; display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 0.8rem; }
.credential-box dt { color: var(--muted); font-size: 0.8rem; }
.credential-box dd { margin: 0; font-family: var(--mono); font-weight: 600; color: var(--text); word-break: break-all; }

/* ---------------------------------------------------------------- misc */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 0.9rem;
}
.stat .n { font-size: 1.35rem; font-weight: 700; line-height: 1.1; }
.stat .l { font-size: 0.76rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 0.15rem; }
.stat.danger .n { color: var(--danger); }
.stat.warn .n { color: var(--warn); }
.stat.accent .n { color: var(--accent); }

.row-group { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; align-items: flex-start; }
.row-group > * { flex: 1; }
.row-group .btn { flex: none; }

/* ---------------------------------------------------------------- screenshots */
/* The whole panel is the drop target, so it is deliberately large and the
   caption sits underneath rather than competing with it. */
.dropzone {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: 2.75rem 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.dropzone:hover { border-color: var(--surface-3); }
.dropzone.is-over {
  border-color: var(--accent);
  background: var(--accent-bg);
}
.dropzone-title { font-size: 1.35rem; font-weight: 600; color: var(--text); }
.dropzone-or { margin: 0.55rem 0 0.8rem; color: var(--muted); font-size: 0.86rem; }
.dropzone-note { margin-top: 1.1rem; color: var(--muted); font-size: 0.82rem; }

.dropzone-progress { margin-top: 1.1rem; }

/* A tall bar with the label riding inside the moving fill, striped and
   animating for the whole upload — not just a thin line, something that
   visibly reads as "working" the way the classic striped upload bar does. */
.dropzone-progress-track {
  height: 34px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.dropzone-progress-bar {
  display: flex; align-items: center; justify-content: center;
  height: 100%;
  width: 0;
  min-width: 2.5em;
  background: repeating-linear-gradient(
    45deg, var(--accent), var(--accent) 12px, var(--accent-dim) 12px, var(--accent-dim) 24px
  );
  background-size: 34px 34px;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
  transition: width 0.15s ease-out;
  animation: dropzone-stripes 0.7s linear infinite;
}
@keyframes dropzone-stripes {
  from { background-position: 0 0; }
  to   { background-position: 34px 0; }
}

.dropzone-files { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.3rem; }
.dropzone-files:empty { display: none; }
.dropzone-file {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.4rem 0.65rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.84rem;
  text-align: left;
}
.dropzone-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropzone-file-size { margin-left: auto; color: var(--muted); font-size: 0.78rem; white-space: nowrap; }
.dropzone-file.is-too-big { border-color: rgba(220, 38, 38, 0.4); }
.dropzone-file.is-too-big .dropzone-file-size { color: var(--danger); font-weight: 600; }
.dropzone-warning { font-size: 0.82rem; color: var(--danger); font-weight: 600; }

/* Uploading starts as soon as files land, so the panel says so and stops
   taking more until the page comes back. */
.dropzone.is-busy {
  cursor: progress;
  border-style: solid;
  border-color: var(--accent);
  opacity: 0.85;
}
.dropzone.is-busy .dropzone-title { color: var(--accent); }

/* Only shown without JavaScript, where the upload needs a button. */
.shot-caption {
  display: flex; gap: 0.5rem; align-items: center;
  margin: 0.7rem 0 1.2rem;
}

.shot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.9rem;
}
.shot {
  position: relative;
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.12s;
}
.shot:hover { border-color: var(--surface-3); }

.shot-select {
  position: absolute;
  top: 0.5rem; left: 0.5rem;
  z-index: 5;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  background: rgba(15, 17, 21, 0.55);
  border-radius: 7px;
  cursor: pointer;
}
.shot-select input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); cursor: pointer; }

.bulk-bar {
  display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.6rem 0.85rem;
  margin-bottom: 0.85rem;
}
.bulk-bar .bulk-all { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--text-dim); cursor: pointer; margin: 0; }
.bulk-bar .bulk-all input { accent-color: var(--accent); }
.bulk-count { font-size: 0.85rem; color: var(--text-dim); font-weight: 600; }

/* A fixed frame keeps the grid tidy whatever shape was uploaded; Cloudinary
   does the cropping, so the browser is never handed the full-size file. */
.shot-frame {
  display: block;
  aspect-ratio: 3 / 2;
  background: var(--surface-2);
}
.shot-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

.shot figcaption { padding: 0.65rem 0.75rem 0.75rem; }
.shot-title {
  font-size: 0.9rem; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.shot-meta { font-size: 0.76rem; color: var(--muted); margin-top: 0.2rem; }
.shot-actions {
  display: flex; gap: 0.3rem; align-items: center; flex-wrap: wrap;
  margin-top: 0.55rem;
}

/* ---------------------------------------------------------------- important sheets */
.sheet-name { display: flex; align-items: flex-start; gap: 0.7rem; }
.sheet-icon { flex: none; display: block; width: 26px; height: 26px; margin-top: 0.05rem; }
.sheet-icon svg { width: 100%; height: 100%; display: block; }
.sheet-tags { display: flex; gap: 0.3rem; flex-wrap: wrap; margin-top: 0.35rem; }
.sheet-tab { font-weight: 700; font-size: 1rem; color: var(--text); }

/* This page is a set of links people scan and click, not a dense data grid,
   so it is set larger than the app's other tables. */
.sheet-table table { font-size: 0.95rem; }
.sheet-table th { font-size: 0.82rem; }
.sheet-table td { padding: 0.9rem 0.85rem; }
.sheet-table .sheet-name a { font-size: 1.05rem; font-weight: 600; }
.sheet-table .tag { font-size: 0.76rem; }
.sheet-gid { font-size: 0.95rem; color: var(--text-dim); }
.sheet-actions { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.sheet-gid-form { display: flex; gap: 0.35rem; align-items: center; margin: 0; }
.sheet-gid-form input[type=text] { width: 130px; font-size: 0.82rem; padding: 0.35rem 0.5rem; }

/* ---------------------------------------------------------------- personal note */
.note-card { padding: 0; overflow: hidden; }

/* A notepad, not a form field: monospace, tall, and no decoration competing
   with the text. */
.note-editor {
  display: block;
  width: 100%;
  min-height: calc(100vh - 330px);
  padding: 1rem 1.1rem;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.92rem;
  line-height: 1.65;
  tab-size: 4;
  resize: vertical;
}
.note-editor:focus { outline: none; box-shadow: none; border: none; }

.note-foot {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 1.1rem;
  border-top: 1px solid var(--border-soft);
  background: var(--surface-2);
}
.note-foot .spacer { margin-left: auto; }

.note-status {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.note-status.is-saving { color: var(--text-dim); }
.note-status.is-saved  { color: var(--accent); }
.note-status.is-dirty  { color: var(--warn); }
.note-status.is-error  { color: var(--danger); }

@media (max-width: 780px) {
  .note-editor { min-height: calc(100vh - 300px); }
}

/* ---------------------------------------------------------------- invoices */
/* One block per brand on the invoice form — each carries its own rate. */
.card-group {
  padding: 0.9rem;
  margin-bottom: 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.card-group-head {
  display: flex; align-items: center; gap: 0.5rem;
  margin-bottom: 0.6rem;
}
.card-group-head .spacer { margin-left: auto; }
.card-group-n {
  font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--muted);
}
.card-group-total {
  margin-top: 0.6rem;
  font-size: 0.82rem; font-weight: 600;
  color: var(--accent);
}
.card-group-total:empty { display: none; }
/* A block with a negative rate: a refund, or a card bought back. */
.card-group-total.is-deduction { color: var(--danger); }

.invoice-preview {
  padding: 0.6rem 0.8rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-dim);
  font-size: 0.85rem;
}

.invoice-actions {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--border-soft);
}
.invoice-actions .spacer { margin-left: auto; }
.invoice-total { display: flex; align-items: baseline; gap: 0.45rem; }
.invoice-total strong { font-size: 1.1rem; color: var(--accent); }

/* The canvas is the document itself, so it gets a paper-like frame. */
.invoice-sheet {
  margin-top: 1rem;
  padding: 0.9rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
}
.invoice-sheet canvas {
  display: block;
  width: 100%;
  max-width: 760px;
  height: auto;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: var(--shadow);
}
.invoice-sheet canvas[data-loading] { min-height: 320px; }

.date-with-day { display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; max-width: 360px; }
.date-with-day input[type=date] { flex: 1 1 220px; }
.date-day {
  display: inline-block;
  flex: none;
  white-space: nowrap;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text);
  padding: 0.3rem 0.65rem;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.date-day:empty { display: none; }

.return-date {
  padding: 0.52rem 0.7rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  color: var(--text-dim);
}

/* ==========================================================================
   LEAVE MANAGEMENT
   ========================================================================== */

/* Balance bar: taken, then held for a pending decision, then what is free.
   Widths are per-request data, so they arrive in a nonced <style> block.
   Colors match the stat tiles right above: "Days remaining" is the accent
   green one, "Taken (approved)" is a plain, uncoloured tile, "Awaiting
   decision" is the warn orange one — so free = accent, used = neutral,
   held = warn, not the other way round. */
.leave-bar {
  display: flex;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--accent);
  border: 1px solid var(--border);
}
.leave-bar .seg { display: block; height: 100%; }
.leave-bar .seg.used { background: var(--surface-3); }
.leave-bar .seg.held { background: var(--warn); }

.leave-legend {
  display: flex; flex-wrap: wrap; gap: 0.9rem;
  margin-top: 0.5rem;
  font-size: 0.78rem; color: var(--muted);
}
.leave-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
.leave-legend .dot {
  width: 9px; height: 9px; border-radius: 50%;
  display: inline-block;
  border: 1px solid var(--border);
}
.leave-legend .dot.used { background: var(--surface-3); }
.leave-legend .dot.held { background: var(--warn); }
.leave-legend .dot.free { background: var(--accent); }

.month-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.6rem;
}
.month-cell {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.8rem;
}
.month-cell.is-now { border-color: var(--accent); background: var(--accent-bg); }
.month-label { font-size: 0.8rem; color: var(--text-dim); font-weight: 600; }
.month-value { font-size: 1.05rem; font-weight: 700; margin-top: 0.15rem; }

/* The administrator's queue reads as cards, not rows: each decision needs a
   reason box next to it, which a table cell handles badly. */
.leave-list { display: flex; flex-direction: column; gap: 0.6rem; }
.leave-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
}
.leave-card.is-pending { border-color: rgba(251, 191, 36, 0.45); }

.leave-head { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.leave-who { font-weight: 600; display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.leave-when { text-align: right; margin-left: auto; }
.leave-dates { font-weight: 600; white-space: nowrap; }

.leave-reason {
  margin-top: 0.6rem;
  padding: 0.5rem 0.7rem;
  background: var(--surface-2);
  border-left: 3px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
}

.decision-note {
  margin-top: 0.5rem;
  padding: 0.45rem 0.7rem;
  border-radius: var(--radius-sm);
  border-left: 3px solid;
  font-size: 0.86rem;
}
.decision-note.rejected { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }
.decision-note.approved { background: var(--accent-bg); border-color: var(--accent); }

.leave-decide {
  display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-soft);
}
.leave-decide input[type=text] { flex: 1; min-width: 200px; }

/* Pending count riding along in the profile menu. */
.menu-badge {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: var(--warn);
  color: #241a00;
  font-size: 0.7rem;
  font-weight: 800;
}

@media (max-width: 780px) {
  .leave-when { text-align: left; margin-left: 0; }
  .leave-decide input[type=text] { min-width: 0; }
}

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.divider { height: 1px; background: var(--border); margin: 1.1rem 0; border: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.muted { color: var(--muted); }
.small { font-size: 0.8rem; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.inline-form { display: inline; }
.stack > * + * { margin-top: 0.55rem; }

/* Spacing utilities. The Content-Security-Policy forbids inline style
   attributes, so every one-off adjustment needs a class to live in. */
.mt-1 { margin-top: 0.35rem; }
.mt-2 { margin-top: 0.6rem; }
.mt-3 { margin-top: 0.9rem; }
.mt-4 { margin-top: 1.3rem; }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: 0.6rem; }
.mb-3 { margin-bottom: 0.9rem; }
.w-auto { width: auto; }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.gap-1 { gap: 0.35rem; }
.gap-2 { gap: 0.6rem; }
.items-center { align-items: center; }
.grow { flex: 1; }
.break-all { word-break: break-all; }

details summary { cursor: pointer; }
details summary:hover { color: var(--text); }
details > *:not(summary) { margin-top: 0.5rem; }

dl.stack > div > .hint { margin-bottom: 0.1rem; }

.pagination { display: flex; gap: 0.4rem; align-items: center; justify-content: center; margin-top: 1rem; }

/* Print: the directory occasionally gets printed for a handover */
@media print {
  .topbar, .filterbar, .filter-sidebar, .filter-mobile-toggle, .composer, .buyer-actions, .btn { display: none !important; }
  .directory-shell { display: block; }
  body { background: #fff; color: #000; }
  .buyer { border-color: #ccc; break-inside: avoid; }
}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  .buyer { grid-template-columns: minmax(170px, 1fr) minmax(180px, 1.3fr) auto; }
  .buyer-currencies { grid-column: 2; }
}

@media (max-width: 780px) {
  .main { padding: 0.8rem; }
  .footer { padding: 1rem 0.8rem 1.2rem; }
  .topbar { height: 58px; }
  .topbar-inner { padding: 0 0.8rem; gap: 0.6rem; }
  .nav { display: none; }
  .nav.is-open {
    display: flex; flex-direction: column;
    position: absolute; top: 58px; left: 0; right: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 0.5rem; gap: 0.2rem; margin: 0;
  }
  .menu-toggle { display: inline-flex !important; }
  .filterbar { position: static; }
  .filter-field select, .filter-field input { min-width: 0; width: 100%; }
  .filter-field { flex: 1 1 140px; }
  .buyer {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }
  .buyer-actions { justify-self: start; }
  .split { grid-template-columns: 1fr; }
  .who .name { display: none; }
}

.menu-toggle { display: none; }

/* ==========================================================================
   UI REFRESH — one visual language for every menu.
   Kept as a single layer at the end of the file on purpose: it restyles the
   shared building blocks (page header, cards, tables, stat tiles, inputs,
   buttons) that every page already uses, so no page needs its own copy and
   nothing about markup hooks or behaviour changes.
   ========================================================================== */
:root {
  --input-bg:     #ffffff;
  --input-border: #d6dae1;
  --shadow-card:  0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 6px rgba(15, 23, 42, 0.05);
  --shadow-hover: 0 4px 14px rgba(15, 23, 42, 0.09);
  --shadow-btn:   0 1px 2px rgba(15, 23, 42, 0.06);
}
:root[data-theme="dark"] {
  --input-bg:     #1b1f27;
  --input-border: #313745;
  --shadow-card:  0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-hover: 0 6px 18px rgba(0, 0, 0, 0.45);
  --shadow-btn:   none;
}

/* ---------------------------------------------------------------- navigation */
.nav a { padding: 0.45rem 0.8rem; }
.nav a.is-active {
  background: var(--accent-bg);
  color: var(--accent);
  font-weight: 600;
}

/* ---------------------------------------------------------------- page header */
.main { padding-top: 1.5rem; }

.page-head {
  gap: 0.9rem;
  margin-bottom: 1.25rem;
}
.page-icon {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--accent-bg);
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb), 0.18);
}
.page-icon svg { width: 22px; height: 22px; }
.page-title { min-width: 0; }
.page-title h1 {
  display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap;
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.page-title h1 .count-badge,
.page-title h1 .tag { font-size: 0.75rem; font-weight: 600; letter-spacing: 0; }
.page-sub {
  margin: 0.2rem 0 0;
  font-size: 0.88rem;
  color: var(--muted);
}

.count-badge { background: var(--surface-2); }

/* A page-level footnote, set apart from field hints. */
/* Block, not flex: a flex container would turn every inline link inside the
   sentence into its own item and space it out from the words around it. */
.page-note {
  position: relative;
  margin: 1rem 0 0;
  padding: 0.7rem 0.9rem 0.7rem 2.35rem;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--muted);
}
.page-note::before {
  content: "";
  position: absolute;
  left: 0.85rem; top: 0.85rem;
  width: 16px; height: 16px;
  background: var(--muted);
  -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------------------------------------------------------------- buttons */
.btn {
  min-height: 38px;
  padding: 0.5rem 0.95rem;
  border-radius: 9px;
  border-color: var(--input-border);
  background: var(--surface);
  font-weight: 600;
  box-shadow: var(--shadow-btn);
}
.btn:hover { background: var(--surface-2); border-color: var(--input-border); }
.btn-sm { min-height: 32px; padding: 0.3rem 0.7rem; font-size: 0.8rem; border-radius: 8px; }
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 1px 2px rgba(var(--accent-rgb), 0.25);
}
.btn-primary:hover { background: var(--accent-dim); border-color: var(--accent-dim); }
.btn-ghost { background: transparent; border-color: transparent; box-shadow: none; }
.btn-ghost:hover { background: var(--surface-2); border-color: transparent; }
.btn-danger { background: var(--danger-bg); border-color: rgba(var(--danger-rgb), 0.35); box-shadow: none; }

/* ---------------------------------------------------------------- inputs */
input[type=text], input[type=password], input[type=search], input[type=number],
input[type=date], input[type=month], input[type=email], select, textarea {
  min-height: 40px;
  padding: 0.55rem 0.75rem;
  background-color: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 9px;
  font-size: 0.9rem;
}
textarea { min-height: 88px; }
input:hover, select:hover, textarea:hover { border-color: var(--muted); }
/* The global input padding above would otherwise run text under the icon. */
.filter-search input { padding-left: 2.1rem; }
.pill-field.has-icon select, .pill-field.has-icon input { padding-left: 2.15rem; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
label { font-weight: 600; color: var(--text-dim); }
.field { margin-bottom: 1rem; }

/* Sidebar and composite fields follow the same input surface. */
.pill-field select, .pill-field input { background-color: var(--input-bg); border-color: var(--input-border); min-height: 40px; }
.amount-compound { background: var(--input-bg); border-color: var(--input-border); }
.amount-compound input { min-height: 38px; border: none; }
.amount-compound select { min-height: 38px; border-top: none; border-right: none; border-bottom: none; border-radius: 0; }
.type-toggle { background: var(--surface-2); }
.msg-preview-inline { background: var(--surface-2); }
/* Inputs built without their own box keep it that way. */
.note-editor, .note-editor:hover { border: none; background: transparent; min-height: calc(100vh - 360px); }

/* ---------------------------------------------------------------- cards */
.card {
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.35rem;
  margin-bottom: 1.1rem;
  box-shadow: var(--shadow-card);
}
.card-head {
  margin: -0.1rem 0 1.1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border-soft);
}
.card-head h2 { font-size: 1.02rem; font-weight: 700; }
.note-card { padding: 0; }
.note-card .card-head { margin: 0; padding: 0.85rem 1.35rem; }

.card-group {
  background: var(--surface-2);
  border-color: var(--border-soft);
  border-radius: 12px;
  padding: 1rem 1.1rem;
}

.filterbar {
  border-radius: var(--radius-lg);
  padding: 0.8rem;
  box-shadow: var(--shadow-card);
}
.filter-sidebar { box-shadow: var(--shadow-card); }

/* ---------------------------------------------------------------- stat tiles */
.stat-grid { gap: 0.8rem; margin-bottom: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.stat {
  position: relative;
  padding: 1rem 1.15rem 1rem 1.3rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.stat::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--surface-3);
}
.stat.accent::before { background: var(--accent); }
.stat.warn::before   { background: var(--warn); }
.stat.danger::before { background: var(--danger); }
.stat .n { font-size: 1.55rem; letter-spacing: -0.02em; }
.stat .l {
  margin-top: 0.3rem;
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

/* ---------------------------------------------------------------- tables */
.table-wrap {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
th {
  padding: 0.75rem 1rem;
  background: var(--surface-2);
  font-size: 0.74rem;
  letter-spacing: 0.05em;
}
td { padding: 0.85rem 1rem; }
td.strong { font-weight: 600; }
th.num, td.num { text-align: right; }
.row-actions { display: flex; gap: 0.4rem; justify-content: flex-end; }
.inv-no {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  background: var(--accent-bg);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 600;
}
.inv-no:hover { text-decoration: none; filter: brightness(0.95); }

/* ---------------------------------------------------------------- tags, alerts, empty */
.tag { border-radius: 6px; padding: 0.14rem 0.5rem; }
.alert { border-radius: var(--radius); padding: 0.8rem 1rem; }
.empty {
  border-radius: var(--radius-lg);
  padding: 3rem 1.5rem;
  border-style: dashed;
}
.empty h3 { font-size: 1.02rem; }

/* ---------------------------------------------------------------- tile grid
   Important Sheet and Card Buying Site: short lists people scan and click,
   laid out as cards rather than a wide table. */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}
.tile {
  display: flex; flex-direction: column; gap: 0.85rem;
  padding: 1.1rem 1.15rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.15s, border-color 0.15s, transform 0.15s;
}
.tile:hover { box-shadow: var(--shadow-hover); border-color: var(--input-border); transform: translateY(-1px); }
.tile.is-warn { border-color: rgba(var(--warn-rgb), 0.5); background: linear-gradient(180deg, var(--warn-bg), var(--surface) 55%); }

.tile-top { display: flex; align-items: center; gap: 0.8rem; min-width: 0; }
.tile-id { min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.tile-title {
  font-size: 1rem; font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
a.tile-title:hover { color: var(--accent); text-decoration: none; }
.tile-meta {
  font-size: 0.82rem;
  color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
a.tile-meta:hover { color: var(--accent); }
.tile-meta strong { color: var(--text-dim); font-weight: 600; }
.tile-meta .mono { font-size: 0.8rem; }
.tile-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.tile-foot {
  display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap;
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border-soft);
}
.tile-foot .spacer { margin-left: auto; }

.tile .sheet-icon { width: 40px; height: 40px; margin: 0; padding: 7px; border-radius: 11px; background: rgba(15, 157, 88, 0.1); }
.tile .site-logo { width: 40px; height: 40px; border-radius: 11px; }
.tile .site-logo img { width: 24px; height: 24px; }
.tile .site-logo.is-fallback { font-size: 0.82rem; }
.tile .contact-btn { width: 34px; height: 32px; }

/* Row layout: same tile markup, one site per line — identity, tags, actions
   in fixed columns so the eye can run down each one. Folds back into a
   stacked card on phones. */
.tile-list { display: flex; flex-direction: column; gap: 0.5rem; }
.tile-list .tile {
  display: grid;
  grid-template-columns: minmax(200px, 300px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.25rem;
  padding: 0.7rem 1.1rem;
}
.tile-list .tile:hover { border-color: var(--accent); transform: none; }

/* Code Directory. The code is the reason the row exists, so it is sized to be
   read a character at a time — an O mistaken for a 0 here costs a real card. */
.code-search { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.9rem; }
.code-value {
  font-family: var(--mono);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text);
  overflow-wrap: anywhere;
}
.code-value.is-locked {
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--warn);
}
.chrome-download svg { width: 16px; height: 16px; flex: none; }
/* Code Directory's two header actions: wider than a plain small button so
   they read as the page's main controls. */
.page-head [data-manual-open],
.page-head .chrome-download { min-height: 38px; padding: 0.45rem 1.4rem; gap: 0.5rem; }
.page-head [data-manual-open] { min-width: 132px; }
/* Sized by height: the Android mark is wider than it is tall, so a square box
   would either crop it or strand it in empty space. */
.phone-app svg { height: 18px; width: auto; flex: none; }
.tile-list .tile.is-warn { background: linear-gradient(90deg, var(--warn-bg), var(--surface) 45%); }
.tile-list .tile-foot {
  flex-wrap: nowrap;
  margin-top: 0; padding-top: 0; border-top: 0;
}
.tile-list .tile-foot .spacer {
  margin: 0 0.3rem; align-self: stretch;
  width: 1px; background: var(--border-soft);
}

/* ---------------------------------------------------------------- buyer directory */
.buyer { border-radius: 12px; box-shadow: var(--shadow-card); }
.buyer:hover { box-shadow: var(--shadow-hover); }
.results-head { margin-bottom: 0.8rem; }

/* ---------------------------------------------------------------- screenshots */
.dropzone { border-radius: var(--radius-lg); margin-bottom: 1.1rem; background: var(--surface); }
.shot { border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.shot:hover { box-shadow: var(--shadow-hover); }
.shot-actions { padding-top: 0.55rem; border-top: 1px solid var(--border-soft); }
.shot-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.shot-actions .btn { padding-inline: 0.55rem; }
.shot-actions .btn-danger { margin-left: auto; }

/* ---------------------------------------------------------------- invoices + leave */
.invoice-sheet { border-radius: var(--radius-lg); background: var(--surface-2); }
.month-cell { border-radius: 10px; }
.leave-card { border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }

/* ---------------------------------------------------------------- responsive */
/* Seven menu items plus the right-hand controls need about 1300px. Between
   that and the phone breakpoint the header used to run off the right edge
   and hide the theme, bell and profile buttons, so the menu folds into the
   hamburger here as well. */
@media (min-width: 781px) and (max-width: 1320px) {
  .nav { display: none; }
  .nav.is-open {
    display: flex; flex-direction: column;
    position: absolute; top: 68px; left: 0; right: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-hover);
    padding: 0.5rem; gap: 0.2rem; margin: 0;
  }
  .menu-toggle { display: inline-flex !important; }
}

@media (max-width: 780px) {
  .main { padding-top: 1rem; }
  .page-head { gap: 0.7rem; }
  .page-icon { width: 38px; height: 38px; border-radius: 10px; }
  .page-icon svg { width: 19px; height: 19px; }
  .page-title h1 { font-size: 1.2rem; }
  .page-sub { font-size: 0.82rem; }
  .page-head > .btn { width: 100%; }
  .tile-grid { grid-template-columns: 1fr; }
  .tile-list .tile { grid-template-columns: 1fr; gap: 0.75rem; padding: 1rem; }
  .tile-list .tile-tags:empty { display: none; }
  .tile-list .tile-foot { flex-wrap: wrap; padding-top: 0.75rem; border-top: 1px solid var(--border-soft); }
  .tile-list .tile-foot .spacer { margin: 0 0 0 auto; width: auto; background: none; }
  .table-wrap { border-radius: var(--radius); }
  .card { padding: 1rem; }
  .note-editor, .note-editor:hover { min-height: calc(100vh - 340px); }
  /* Long wildcard pills ("All cards · Uncommon / rare cards only") would
     otherwise push the page sideways on a phone. */
  .card-pill { white-space: normal; max-width: 100%; }
}

/* ---------------------------------------------------------------- image preview
   Screenshots: the "View" panel that opens over the page instead of a new tab. */
.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  display: none; align-items: center; justify-content: center;
  padding: 1rem;
  background: rgba(10, 12, 16, 0.78);
}
.lightbox.is-open { display: flex; }
.lightbox-panel {
  position: relative;
  display: flex; flex-direction: column;
  max-width: min(94vw, 1100px);
  max-height: 94vh;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.lightbox-stage {
  position: relative;
  display: grid; place-items: center;
  min-height: 0;
  background: var(--surface-2);
}
.lightbox-img { display: block; max-width: 100%; max-height: 74vh; object-fit: contain; }
.lightbox-bar {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.6rem 0.85rem;
  border-top: 1px solid var(--border-soft);
}
.lightbox-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 0.9rem; }
.lightbox-count { font-size: 0.8rem; color: var(--text-dim); white-space: nowrap; }
.lightbox-close, .lightbox-nav {
  position: absolute; z-index: 2;
  width: 2.2rem; height: 2.2rem;
  display: grid; place-items: center;
  border: 0; border-radius: 999px;
  background: rgba(15, 17, 21, 0.6); color: #fff;
  font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.lightbox-close:hover, .lightbox-nav:hover { background: rgba(15, 17, 21, 0.85); }
.lightbox-close { top: 0.6rem; right: 0.6rem; }
.lightbox-nav { top: 50%; transform: translateY(-50%); }
.lightbox-prev { left: 0.6rem; }
.lightbox-next { right: 0.6rem; }
.lightbox.is-single .lightbox-nav,
.lightbox.is-single .lightbox-count { display: none; }

/* ---------------------------------------------------------------- fresh pairing code
   Pressing "Get pairing code" reloads the page, and the code appears above the
   button — out of sight if the reader was scrolled down. The page scrolls to it
   and it pulses, so the new code is unmistakable. */
.pair-result { scroll-margin-top: 5rem; }
.pair-result:focus { outline: none; }

.secret-box.is-fresh {
  font-size: 1.7rem;
  font-weight: 700;
  padding: 1rem;
  color: var(--text);
  background: var(--accent-bg);
  border: 2px solid var(--accent);
  animation: pair-pulse 1.3s ease-out 3;
}

@keyframes pair-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.55); }
  70%  { box-shadow: 0 0 0 16px rgba(var(--accent-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
}

@media (prefers-reduced-motion: reduce) {
  .secret-box.is-fresh { animation: none; }
}

/* ---------------------------------------------------------------- who can see a sheet
   Sheet Management: the audience control that sits on each sheet's own row. */
.audience-cell { min-width: 260px; vertical-align: top; }
.audience-form select { width: auto; flex: 1; min-width: 0; }

.audience-picker {
  display: grid;
  gap: 0.3rem;
  max-height: 156px;
  overflow-y: auto;
  margin-top: 0.5rem;
  padding: 0.5rem 0.65rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.audience-picker[hidden] { display: none; }

.audience-employee {
  display: flex; align-items: center; gap: 0.5rem;
  margin: 0;
  font-size: 0.85rem;
  color: var(--text);
  cursor: pointer;
}
.audience-employee input[type="checkbox"] {
  width: 16px; height: 16px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

/* ---------------------------------------------------------------- manual code entry
   Code Directory: the "Add Code Manually" panel, closed until asked for. */
.manual-code[hidden] { display: none; }
.manual-code #manual-code-input { font-size: 1rem; letter-spacing: 0.04em; }

/* ---------------------------------------------------------------- image editor
   Screenshots → Edit (shot-editor.js). A dark full-window workspace, the same
   in light and dark themes so the picture is judged against a neutral ground. */
.shot-editor {
  position: fixed; inset: 0; z-index: 1100;
  display: none; flex-direction: column;
  background: #0d0f13; color: #e6e8ec;
}
.shot-editor.is-open { display: flex; }
.se-bar {
  flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem;
  padding: 0.55rem 0.8rem;
  background: #161a21; border-bottom: 1px solid #262b35;
}
.se-group { display: flex; align-items: center; gap: 0.3rem; }
.se-spacer { flex: 1 1 auto; }
.se-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  min-height: 34px; padding: 0.3rem 0.7rem;
  border: 1px solid #2f3541; border-radius: 8px;
  background: #1d222b; color: #e6e8ec;
  font: inherit; font-size: 0.83rem; font-weight: 600; cursor: pointer;
}
.se-btn:hover:not(:disabled) { background: #272d38; border-color: #3b4352; }
.se-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.se-btn:focus-visible, .se-swatch:focus-visible { outline: 2px solid #4ade80; outline-offset: 2px; }
.se-btn svg { width: 17px; height: 17px; flex: none; }
.se-btn[aria-pressed="true"] { background: #15803d; border-color: #15803d; color: #fff; }
.se-icon { padding: 0.3rem 0.5rem; }
.se-primary { background: #15803d; border-color: #15803d; color: #fff; }
.se-primary:hover:not(:disabled) { background: #166534; border-color: #166534; }
.se-close { font-size: 1.35rem; line-height: 1; padding: 0.2rem 0.65rem; }
.se-danger { background: #dc2626; border-color: #dc2626; color: #fff; }
.se-danger:hover:not(:disabled) { background: #b91c1c; border-color: #b91c1c; }
.se-swatch {
  width: 24px; height: 24px; border-radius: 50%; padding: 0; cursor: pointer;
  background: var(--c); border: 2px solid #2f3541;
}
.se-swatch[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 0 2px #15803d; }
.se-swatch[data-color="#000000"] { border-color: #5b6373; }
.se-sizes.is-off { opacity: 0.35; pointer-events: none; }
.se-size { min-width: 34px; padding: 0.3rem 0.5rem; }
.se-stage {
  position: relative; flex: 1 1 auto; min-height: 0;
  display: flex; align-items: center; justify-content: center; overflow: auto;
  background:
    repeating-conic-gradient(#12151b 0% 25%, #0d0f13 0% 50%) 0 0 / 18px 18px;
}
.se-canvas {
  display: block; touch-action: none; user-select: none; -webkit-user-select: none;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55);
  background: #000;
}
.se-loading { position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem; text-align: center; color: #9aa3b2; font-size: 0.9rem; }
.se-loading[hidden] { display: none; }
.se-foot {
  flex: none; display: flex; gap: 1rem; align-items: center; justify-content: space-between;
  padding: 0.45rem 0.9rem; min-height: 34px;
  background: #161a21; border-top: 1px solid #262b35; font-size: 0.8rem;
}
.se-hint { color: #9aa3b2; }
.se-status { font-weight: 600; color: #4ade80; text-align: right; }
.se-status.is-error { color: #f87171; }
.se-confirm {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center;
  background: rgba(6, 8, 12, 0.6); backdrop-filter: blur(2px);
}
.se-confirm[hidden] { display: none; }
.se-confirm-box {
  display: flex; flex-direction: column; gap: 0.35rem; max-width: 380px; margin: 1rem;
  padding: 1.2rem 1.3rem; border-radius: 14px;
  background: #171a21; border: 1px solid #2f3541; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}
.se-confirm-box span { color: #9aa3b2; font-size: 0.88rem; }
.se-confirm-box div { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.9rem; }
@media (max-width: 700px) {
  .se-bar { gap: 0.4rem 0.6rem; padding: 0.45rem; }
  .se-tool span { display: none; }
  .se-tool { padding: 0.3rem 0.55rem; }
  .se-actions { width: 100%; justify-content: flex-end; }
  .se-hint { display: none; }
}
/* The editor's own display rules would otherwise beat the UA's [hidden]. */
.shot-editor [hidden] { display: none !important; }

/* Editor: "Save as new" with a caret that opens the other ways to save. */
.se-split { position: relative; display: flex; }
.se-split .se-split-main { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.se-split .se-split-caret {
  border-top-left-radius: 0; border-bottom-left-radius: 0;
  border-left-color: rgba(255, 255, 255, 0.28); padding: 0.3rem 0.45rem; min-width: 30px;
}
.se-split .se-split-caret svg { width: 15px; height: 15px; }
.se-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 5;
  min-width: 290px; padding: 0.3rem;
  display: flex; flex-direction: column; gap: 0.15rem;
  background: #171a21; border: 1px solid #2f3541; border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}
.se-menu-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem;
  width: 100%; padding: 0.55rem 0.7rem; border: 0; border-radius: 8px;
  background: transparent; color: #e6e8ec; font: inherit; text-align: left; cursor: pointer;
}
.se-menu-item strong { font-size: 0.86rem; font-weight: 600; }
.se-menu-item span { font-size: 0.76rem; color: #9aa3b2; }
.se-menu-item:hover, .se-menu-item:focus-visible { background: #232833; outline: none; }
.se-menu-item[data-act="replace"] strong { color: #fca5a5; }
@media (max-width: 700px) { .se-menu { min-width: min(290px, calc(100vw - 24px)); } }
/* The extension's version, as a small tag inside the download button. */
.chrome-download .ext-version {
  padding: 0.05rem 0.45rem; border-radius: 999px;
  background: rgba(255, 255, 255, 0.2); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.02em;
}

/* Screenshots: paste an image (Ctrl+V) into a tray, then Upload. */
.dropzone-paste { margin-top: 0.7rem; color: var(--text-dim); font-size: 0.86rem; }
.dropzone-paste kbd {
  display: inline-block; min-width: 1.6em; padding: 0.05rem 0.4rem;
  font: 600 0.78rem/1.4 var(--mono, ui-monospace, Consolas, monospace);
  color: var(--text); background: var(--surface-2);
  border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px;
}
.dropzone.is-pasted { border-color: var(--accent); background: var(--accent-bg); transition: background 0.2s, border-color 0.2s; }
.paste-tray {
  margin: -0.4rem 0 1.1rem; padding: 0.9rem 1rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.paste-tray[hidden] { display: none; }
.paste-tray-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.8rem; margin-bottom: 0.75rem; }
.paste-thumbs { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.paste-thumb {
  position: relative; width: 128px; height: 96px; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--border); background: var(--surface-2);
}
.paste-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.paste-thumb-size {
  position: absolute; left: 6px; bottom: 6px; padding: 0.05rem 0.35rem; border-radius: 5px;
  background: rgba(15, 17, 21, 0.72); color: #fff; font-size: 0.7rem; font-weight: 600;
}
.paste-thumb-remove {
  position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; border-radius: 50%;
  border: 0; background: rgba(15, 17, 21, 0.72); color: #fff; font-size: 1rem; line-height: 1;
  cursor: pointer; display: grid; place-items: center;
}
.paste-thumb-remove:hover { background: var(--danger); }
.paste-tray-foot { display: flex; justify-content: center; gap: 0.5rem; margin-top: 0.9rem; }
/* Paste tray: Clear throws the pasted images away, so it wears the red of the
   site's other discard buttons (same look as .btn-danger). */
.paste-tray-foot #paste-clear {
  color: var(--danger); background: var(--danger-bg);
  border-color: rgba(var(--danger-rgb), 0.35); box-shadow: none;
}
.paste-tray-foot #paste-clear:hover:not(:disabled) { background: rgba(var(--danger-rgb), 0.2); }
/* The Android app's version, as a small tag inside the white Phone/Android App button. */
.phone-app .app-version { background: rgba(21, 128, 61, 0.1); color: var(--accent); }
/* Android App download + its copy-link button, joined as one control. */
.app-dl { display: inline-flex; align-items: stretch; }
.app-dl .phone-app { padding-right: 0.75rem; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.app-dl .phone-app .app-version { margin-left: 0.15rem; }
.app-dl .app-copy {
  border-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0;
  padding: 0 0.6rem; min-width: 38px; color: var(--text-dim);
}
.app-dl .app-copy:hover { color: var(--accent); }
.app-dl .app-copy svg { width: 16px; height: 16px; flex: none; }
.app-dl .app-copy .icon-done { display: none; color: var(--accent); }
.app-dl .app-copy.is-copied .icon-copy { display: none; }
.app-dl .app-copy.is-copied .icon-done { display: block; }
.app-dl .app-copy.is-copied { border-color: rgba(var(--accent-rgb), 0.45); background: var(--accent-bg); }
/* Invoice form: the note's ready-text dropdown sits above the note itself. */
.field .note-preset { display: block; width: auto; min-width: 220px; max-width: 100%; margin-bottom: 0.5rem; }
/* Staff Management: the Edit row under an account (username + full name). */
tbody tr.user-edit-row, tbody tr.user-edit-row:hover { background: var(--surface-2); }
.user-edit-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; }
.user-edit-form .field { flex: 0 1 240px; min-width: 180px; }
/* Screenshots: only the Select Files button opens the picker, so the panel itself is not a click target. */
.dropzone { cursor: default; }
.dropzone.is-busy { cursor: progress; }
/* iPhone Shortcut setup page (Screenshots → iPhone). */
.iphone-steps, .iphone-build { margin: 0; padding-left: 1.3rem; display: grid; gap: 1rem; }
.iphone-build { gap: 0.7rem; margin-top: 0.8rem; }
.iphone-steps > li > strong:first-child { display: block; margin-bottom: 0.45rem; }
.iphone-key { margin: 0.4rem 0 0; }
.iphone-key-row, .iphone-code-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.45rem 0; }
.iphone-key-row code, .iphone-code-row code {
  padding: 0.35rem 0.55rem; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface-2); word-break: break-all; font-size: 0.82rem;
}
.iphone-install { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; }
.iphone-key-form { align-items: flex-end; margin: 0; }
.iphone-guide { margin-top: 0.4rem; }
.iphone-guide ul { margin: 0.35rem 0 0; padding-left: 1.1rem; }
.iphone-guide code { font-size: 0.82rem; }
.phone-app-ios svg { height: 16px; }
.iphone-steps > li { font-size: 0.92rem; }
.iphone-guide li { font-size: 0.88rem; }