:root {
  /* Apple HIG-style layout in Cairo International Film Festival colours: gold, deep red, black.
     Gold is too light for text on white, so light mode uses it only as a fill (with black text)
     and a deeper gold for links and tinted buttons. All pairs pass WCAG AA. */
  --bg: #f5f5f5;
  --surface: #ffffff;
  --surface-2: #f5f5f5;
  --fill: rgb(26 26 26 / .06);
  --text: #1a1a1a;
  --muted: #666666;
  --line: #e0dcd0;
  --accent: #7a5c00;
  --accent-fill: #d4af37;
  --accent-ink: #1a1a1a;
  --accent-soft: #f7efd4;
  --accent-ring: rgb(212 175 55 / .45);
  --good: #1f7a3a;
  --good-soft: #e6f4ea;
  --warn: #b04a00;
  --warn-soft: #fdf0e3;
  --bad: #8b0000;
  --bad-soft: #f9e5e5;
  --info: #0066cc;
  --info-soft: #e5f0fc;
  --header-bg: rgb(255 255 255 / .78);
  --segment-on: #ffffff;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: none;
  --menu-shadow: 0 12px 32px rgb(0 0 0 / .14), 0 0 0 .5px rgb(0 0 0 / .06);
  --ease: cubic-bezier(.25, .1, .25, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111111; --surface: #1a1a1a; --surface-2: #242424; --fill: rgb(255 255 255 / .08); --text: #f5f5f5; --muted: #a3a3a3;
    --line: #2e2e2e; --accent: #d4af37; --accent-fill: #d4af37; --accent-ink: #111111; --accent-soft: #2e2810; --accent-ring: rgb(212 175 55 / .45);
    --good: #30d158; --good-soft: #0f2e19; --warn: #ff9f0a; --warn-soft: #33240a;
    --bad: #ff6b6b; --bad-soft: #3a1414; --info: #3d9bff; --info-soft: #0f2a47;
    --header-bg: rgb(17 17 17 / .78); --segment-on: #3a3a3a;
    --shadow: none; --menu-shadow: 0 12px 32px rgb(0 0 0 / .6); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #111111; --surface: #1a1a1a; --surface-2: #242424; --fill: rgb(255 255 255 / .08); --text: #f5f5f5; --muted: #a3a3a3;
  --line: #2e2e2e; --accent: #d4af37; --accent-fill: #d4af37; --accent-ink: #111111; --accent-soft: #2e2810; --accent-ring: rgb(212 175 55 / .45);
  --good: #30d158; --good-soft: #0f2e19; --warn: #ff9f0a; --warn-soft: #33240a;
  --bad: #ff6b6b; --bad-soft: #3a1414; --info: #3d9bff; --info-soft: #0f2a47;
  --header-bg: rgb(17 17 17 / .78); --segment-on: #3a3a3a;
  --shadow: none; --menu-shadow: 0 12px 32px rgb(0 0 0 / .6); color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Arabic", "IBM Plex Sans Arabic", system-ui, "Segoe UI", Tahoma, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.3; margin: 0 0 .5rem; }
h1 { font-size: 1.75rem; font-weight: 700; }
h2 { font-size: 1.2rem; font-weight: 600; }
[dir="ltr"] h1 { letter-spacing: -.02em; }
[dir="ltr"] h2 { letter-spacing: -.01em; }
h3 { font-size: 1rem; }
p { margin: 0 0 .75rem; }
code { background: var(--fill); padding: .1em .4em; border-radius: 4px; font-size: .9em; unicode-bidi: plaintext; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
main.wrap { padding-top: 20px; padding-bottom: 60px; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.ltr { direction: ltr; unicode-bidi: plaintext; text-align: left; word-break: break-all; }
.hidden { display: none !important; }
.good-text { color: var(--good); }
.bad-text { color: var(--bad); }
.center { text-align: center; }
.narrow { max-width: 560px; margin-inline: auto; }
.back { font-size: .9rem; }

/* header */
header.top {
  background: var(--header-bg); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: .5px solid var(--line); position: sticky; top: 0; z-index: 10;
}
.top-inner { display: flex; align-items: center; gap: 20px; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--text); white-space: nowrap; flex-shrink: 0; }
.brand:hover { text-decoration: none; }
.logo { display: block; height: 48px; width: auto; }
.top-nav { display: flex; gap: 2px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.top-nav::-webkit-scrollbar { display: none; }
.top-nav a { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 999px; color: var(--text); font-weight: 500; font-size: .95rem; white-space: nowrap; transition: background .15s var(--ease); }
.top-nav a:hover { background: var(--fill); text-decoration: none; }
.top-nav a[aria-current="page"] { background: var(--fill); font-weight: 600; }
.top-nav .nav-new { color: var(--accent); font-weight: 600; }
.top-tools { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.who { display: flex; align-items: center; gap: 10px; margin: 0; padding-inline-start: 12px; border-inline-start: 1px solid var(--line); }
.avatar { width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center; background: var(--accent-fill); color: var(--accent-ink); font-weight: 700; font-size: .9rem; }
.who-name { display: flex; flex-direction: column; line-height: 1.2; }
.who-name b { font-size: .85rem; font-weight: 600; }
.who-name small { font-size: .75rem; color: var(--muted); }
.who .link { font-size: .85rem; }
/* Not enough room for one row (English labels are longer): logo + tools on top, links on their own row. */
@media (max-width: 1240px) {
  .top-inner { flex-wrap: wrap; gap: 6px 12px; min-height: 0; padding-top: 10px; padding-bottom: 6px; }
  .brand { order: 1; }
  .top-tools { order: 2; margin-inline-start: auto; }
  .top-nav { order: 3; flex: 1 0 100%; margin-inline: -6px; }
}
.venue-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 16px; }
.venue-list label { color: var(--text); font-size: 1rem; }
.login-logo { height: 96px; margin: 0 auto 20px; }
.guest-logo { height: 52px; }
.count { font-style: normal; background: var(--accent-fill); color: var(--accent-ink); font-weight: 700; border-radius: 999px; padding: 0 7px; font-size: .75rem; margin-inline-start: 6px; }

/* form controls */
label { display: flex; flex-direction: column; gap: 6px; font-weight: 500; font-size: .9rem; color: var(--muted); }
label > input, label > select, label > textarea { color: var(--text); }
input, select, textarea {
  font: inherit; font-size: 1rem; color: var(--text); background: var(--fill); border: 1px solid transparent;
  border-radius: var(--radius-sm); padding: 10px 12px; width: 100%; min-height: 44px;
  transition: box-shadow .15s var(--ease), background .15s var(--ease);
}
select { appearance: none; -webkit-appearance: none; padding-inline-end: 34px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-size: 5px 5px; background-repeat: no-repeat; background-position: left 16px center, left 11px center; }
[dir="ltr"] select { background-position: right 11px center, right 16px center; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .8; }
input:focus, select:focus, textarea:focus { outline: none; background-color: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); }
:focus-visible { outline: 3px solid var(--accent-ring); outline-offset: 2px; }
textarea { resize: vertical; }
label.check { flex-direction: row; align-items: center; gap: 8px; font-weight: 400; }
label.check input { width: auto; min-height: 0; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { font-weight: 600; padding: 0; margin-bottom: 8px; }

button, .btn {
  font: inherit; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; min-height: 44px; padding: 8px 18px; border-radius: var(--radius-sm); border: 0;
  background: var(--accent-soft); color: var(--accent); white-space: nowrap; text-decoration: none;
  transition: transform .12s var(--ease), filter .15s var(--ease), background .15s var(--ease);
}
button:hover, .btn:hover { filter: brightness(.97); text-decoration: none; }
button:active, .btn:active { transform: scale(.97); }
.primary, button.primary { background: var(--accent-fill); color: var(--accent-ink); }
.primary:hover { filter: brightness(1.08); }
.ghost, button.ghost { background: transparent; }
.ghost:hover { background: var(--fill); filter: none; }
.danger { color: var(--bad); }
.danger:not(.ghost) { background: var(--bad-soft); }
.btn.small, button.small { min-height: 34px; padding: 4px 12px; font-size: .875rem; border-radius: 8px; }
button.link { background: none; border: 0; color: var(--accent); padding: 0; min-height: 0; font-weight: 500; }
button.link:active { transform: none; opacity: .6; }
button.icon { min-width: 44px; padding: 0; font-size: 1.3rem; color: var(--muted); background: var(--fill); border-radius: 999px; min-height: 44px; }
button:disabled { opacity: .6; cursor: progress; }

/* layout pieces */
.card { background: var(--surface); border: 1px solid transparent; border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.stack { display: flex; flex-direction: column; gap: 14px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid2.top { margin-bottom: 20px; align-items: start; }
.grid-side { display: grid; grid-template-columns: 1fr 300px; gap: 16px; align-items: start; margin-top: 16px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.page-head h1 { margin: 0; }
section { margin-bottom: 24px; }
.empty { color: var(--muted); padding: 32px 20px; text-align: center; background: var(--surface); border-radius: var(--radius); }
.eyebrow { font-size: .8rem; color: var(--muted); letter-spacing: .02em; }

.flash { padding: 12px 16px; border-radius: 12px; margin-bottom: 16px; border: 0; font-weight: 500; animation: flash-in .25s var(--ease); }
@keyframes flash-in { from { opacity: 0; transform: translateY(-4px); } }
.flash.ok { background: var(--good-soft); color: var(--good); }
.flash.err { background: var(--bad-soft); color: var(--bad); }
.flash.warn { background: var(--warn-soft); color: var(--warn); margin: 0; }
.note { background: var(--fill); padding: 10px 12px; border-radius: var(--radius-sm); }

.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.badge.wait { background: var(--warn-soft); color: var(--warn); }
.badge.info { background: var(--info-soft); color: var(--info); }
.badge.good { background: var(--good-soft); color: var(--good); }
.badge.done { background: var(--fill); color: var(--good); }
.badge.bad { background: var(--bad-soft); color: var(--bad); }
.badge.muted { background: var(--fill); color: var(--muted); }
.tag { display: inline-block; font-size: .75rem; padding: 1px 8px; border-radius: 6px; background: var(--fill); color: var(--muted); margin-inline-end: 4px; font-weight: 600; }
.tag.late { background: var(--bad-soft); color: var(--bad); }
.tag.prio { background: var(--accent-soft); color: var(--accent); }

/* login */
.login { max-width: 380px; margin: 10vh auto 0; text-align: center; }
.login form { text-align: start; margin-top: 16px; }

/* request cards */
.list { display: flex; flex-direction: column; gap: 10px; }
.req-card {
  display: flex; justify-content: space-between; gap: 12px; align-items: center; color: var(--text);
  background: var(--surface); border: 1px solid transparent; border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow);
  transition: transform .12s var(--ease), background .15s var(--ease);
}
.req-card:hover { background: color-mix(in srgb, var(--surface) 92%, var(--text)); text-decoration: none; }
.req-card:active { transform: scale(.99); }
.req-card.ready { border-color: var(--good); border-width: 2px; }
.req-card .film { font-weight: 600; font-size: 1.05rem; }
.req-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.qty b { font-size: 1.25rem; }
details.past summary { cursor: pointer; color: var(--muted); margin-bottom: 10px; }

.row-line { display: grid; grid-template-columns: 1fr 110px 42px; gap: 8px; }
.rows { display: flex; flex-direction: column; gap: 8px; }
.select-search { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field-label { font-weight: 500; font-size: .9rem; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.select-search { position: relative; }
.combo { position: relative; }
.combo-toggle {
  width: 100%; text-align: start; justify-content: flex-start; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--fill); color: var(--text); padding: 10px 12px;
}
.combo-toggle:active { transform: none; }
.combo-toggle.placeholder { color: var(--muted); }
.combo-toggle::after { content: "▾"; margin-inline-start: auto; padding-inline-start: 8px; color: var(--muted); }
.combo-toggle:disabled { opacity: .6; }
.combo-panel {
  position: absolute; inset-inline: 0; top: calc(100% + 6px); z-index: 20;
  background: color-mix(in srgb, var(--surface) 88%, transparent); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
  border-radius: var(--radius); box-shadow: var(--menu-shadow); padding: 8px;
  transform-origin: top; animation: menu-in .16s var(--ease);
}
@keyframes menu-in { from { opacity: 0; transform: scale(.97); } }
.combo-search { width: 100%; margin-bottom: 6px; }
.combo-list { max-height: 280px; overflow-y: auto; }
.combo-group { font-size: .8rem; font-weight: 700; color: var(--muted); padding: 8px 8px 4px; }
.combo-item { padding: 10px 12px; border-radius: 8px; cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.combo-item.active { background: var(--fill); }
.combo-item.selected { font-weight: 600; color: var(--accent); }
.combo-item.selected::after { content: "✓"; margin-inline-start: auto; padding-inline-start: 8px; }
.combo-empty { padding: 10px; color: var(--muted); }
.row-line { align-items: end; }
.entity-line { grid-template-columns: 1fr 1.4fr 130px 42px; }
.kind-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kind-card { display: flex; flex-direction: column; gap: 6px; color: var(--text); padding: 24px 20px; position: relative; padding-inline-end: 44px;
  transition: transform .12s var(--ease), background .15s var(--ease); }
.kind-card::after { content: "‹"; position: absolute; inset-inline-end: 20px; top: 50%; transform: translateY(-50%); font-size: 1.6rem; color: var(--muted); }
[dir="ltr"] .kind-card::after { content: "›"; }
.kind-card b { font-size: 1.15rem; font-weight: 600; }
.kind-card:hover { background: color-mix(in srgb, var(--surface) 92%, var(--text)); text-decoration: none; }
.kind-card:active { transform: scale(.99); }

.req-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.req-head h1 { margin: 2px 0 4px; }
.req-head-side { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.req-head-side .big b { font-size: 2rem; line-height: 1; }

.timeline { list-style: none; display: flex; padding: 0; margin: 16px 0; gap: 4px; }
.timeline li { flex: 1; border-top: 4px solid var(--fill); border-radius: 2px; padding-top: 6px; display: flex; flex-direction: column; font-size: .85rem; color: var(--muted); }
.timeline li.done { border-color: var(--good); color: var(--text); }
.timeline li.bad { border-color: var(--bad); color: var(--bad); }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0; }
.stats div { background: var(--surface); border: 1px solid transparent; border-radius: var(--radius); padding: 12px; text-align: center; display: flex; flex-direction: column; }
.stats b { font-size: 1.75rem; line-height: 1.2; font-weight: 700; font-variant-numeric: tabular-nums; }
.stats span { color: var(--muted); font-size: .85rem; }
.stats .hl { border-color: var(--accent); background: var(--accent-soft); }

.make-link { margin-bottom: 24px; }
.make-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.make-row label { width: 140px; }
.make-row .grow, .make-row label.grow { flex: 1; min-width: 200px; width: auto; }

.share-card { background: var(--surface); border: 1px solid transparent; border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.share-top { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.share-url input { direction: ltr; text-align: left; font-size: .9rem; }
.share-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.share-actions form { margin: 0; margin-inline-start: auto; }

details > summary { cursor: pointer; font-weight: 600; }
details.card > summary { margin: -4px 0; }
details.card[open] > summary { margin-bottom: 12px; }
.raw-links, .ticket-list { padding-inline-start: 22px; margin: 12px 0 0; display: flex; flex-direction: column; gap: 6px; }
.ticket-list li { padding: 4px 0; border-bottom: 1px solid var(--line); }
details.inline { display: inline-block; margin-inline-start: 8px; }
details.inline summary { font-weight: 500; color: var(--accent); font-size: .85rem; list-style: none; display: inline; }
details.inline summary::-webkit-details-marker { display: none; }
details.inline[open] { display: block; margin: 8px 0; }

/* desk */
.tabs { display: flex; width: fit-content; max-width: 100%; gap: 2px; padding: 2px; margin-bottom: 16px; overflow-x: auto;
  background: var(--fill); border-radius: 9px; }
.tabs a { padding: 6px 16px; color: var(--text); border-radius: 7px; white-space: nowrap; font-weight: 500; font-size: .9rem; transition: background .2s var(--ease); }
.tabs a.on { background: var(--segment-on); font-weight: 600; box-shadow: 0 1px 3px rgb(0 0 0 / .12), 0 0 0 .5px rgb(0 0 0 / .04); }
.tabs a:hover { text-decoration: none; }
.filter select { min-width: 220px; }
.table-wrap { overflow-x: auto; background: var(--surface); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px 14px; text-align: start; border-bottom: .5px solid var(--line); vertical-align: top; }
th { font-size: .8rem; color: var(--muted); font-weight: 600; background: transparent; }
tbody tr:last-child td { border-bottom: 0; }
table.desk tbody tr[data-href] { cursor: pointer; }
table.desk tbody tr:hover { background: var(--fill); }
tr.prio td:first-child { box-shadow: inset -3px 0 0 var(--accent); }
tr.off { opacity: .55; }
.flags { white-space: nowrap; }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-start; }
.row-actions form { margin: 0; }
.issue-summary { margin-bottom: 16px; }
.issue-summary table td, .issue-summary table th { padding: 8px 10px; }
tfoot td { font-weight: 600; border-top: 1px solid var(--line); }

dl.meta { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; }
dl.meta dt { color: var(--muted); font-size: .85rem; }
dl.meta dd { margin: 0; }
.log { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: .9rem; }

/* guest page */
body.guest { background: var(--bg); }
.guest-wrap { max-width: 520px; padding-top: 40px; }
.guest h1 { font-size: 1.8rem; margin: 4px 0; }
.guest .when { font-size: 1.1rem; font-weight: 600; margin: 0; }
.guest .lead { margin: 20px 0; }
.guest-tickets { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 10px; }
.guest-tickets li { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid transparent; border-radius: var(--radius); padding: 12px 14px; }
.guest-tickets li span { flex: 1; font-weight: 600; }

.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--text); color: var(--bg); padding: 8px 18px; border-radius: 999px; transition: .2s; font-weight: 600; z-index: 50;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 760px) {
  .grid2, .grid-side { grid-template-columns: 1fr; }
  .logo { height: 42px; }
  .who-name { display: none; }
  .who { padding-inline-start: 8px; }
  .req-head { flex-direction: column; }
  .req-head-side { flex-direction: row; align-items: baseline; gap: 8px; }
  .make-row label { width: 100%; }
  .row-line { grid-template-columns: 1fr 84px 42px; }
  .entity-line { grid-template-columns: 1fr 1fr 42px; }
  .kind-choice { grid-template-columns: 1fr; }
  .entity-line [name="person_name[]"] { grid-column: 1 / -1; order: -1; }
  .share-actions form { margin-inline-start: 0; }
  .share-actions .btn, .share-actions button { flex: 1; }
  .filter, .filter select { width: 100%; }
  th, td { padding: 8px; }
}

.big-num { font-size: 1.25rem; }
.table-wrap.flat { border: 0; border-radius: 0; background: transparent; }
.issue-summary .page-head { margin-bottom: 8px; }
.excel-card { margin-top: 20px; }
.steps { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: .9rem; }
input[type="file"] { padding: 8px; }
input[type="file"]::file-selector-button { font: inherit; font-weight: 600; border: 0; border-radius: 8px; padding: 6px 12px; margin-inline-end: 10px; background: var(--accent-soft); color: var(--accent); cursor: pointer; }
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; min-height: 0; padding: 0; accent-color: var(--accent-fill); background: none; box-shadow: none; }

/* sent marks */
.stats.stats-4 { grid-template-columns: repeat(4, 1fr); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { display: inline-block; font-size: .78rem; padding: 2px 10px; border-radius: 999px; background: var(--fill); color: var(--muted); font-weight: 600; white-space: nowrap; }
.chip.sent { background: var(--good-soft); color: var(--good); }
.chip.opened { background: var(--info-soft); color: var(--info); }
.chip.free { background: var(--accent-soft); color: var(--accent); }
.share-card.is-sent { border-color: var(--good); }
.share-actions form { margin: 0; }
.share-actions .push-end { margin-inline-start: auto; }
.ticket-rows { background: var(--surface); border-radius: var(--radius); overflow: hidden; }
.ticket-row { display: grid; grid-template-columns: 90px 1fr auto; gap: 10px; align-items: center; padding: 10px 16px; border-bottom: .5px solid var(--line); }
.ticket-row:last-child { border-bottom: 0; }
.ticket-row.in-link { opacity: .7; }
.t-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.t-actions form { margin: 0; }
@media (max-width: 760px) {
  .stats.stats-4 { grid-template-columns: repeat(2, 1fr); }
  .ticket-row { grid-template-columns: 1fr auto; }
  .t-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .share-actions .push-end { margin-inline-start: 0; }
}

/* light / dark switch: shows the moon in light mode, the sun in dark mode */
.theme-switch { min-height: 36px; min-width: 36px; width: 36px; height: 36px; padding: 0; border-radius: 999px; background: var(--fill); color: var(--text); font-size: 1rem; line-height: 1; }
.theme-switch:hover { filter: brightness(.95); }
.theme-sun { display: none; }
:root[data-theme="dark"] .theme-sun { display: block; }
:root[data-theme="dark"] .theme-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-sun { display: block; }
  :root:not([data-theme="light"]) .theme-moon { display: none; }
}

/* language switch + direction-aware bits */
.lang-switch { font-size: .85rem; font-weight: 600; padding: 5px 12px; border-radius: 999px; background: var(--fill); color: var(--text); white-space: nowrap; }
.lang-switch:hover { filter: brightness(.95); text-decoration: none; }
.top-guest { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding-top: 12px; }
.guest-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.guest-top .eyebrow { margin-inline-end: auto; }
.back::before { content: "→ "; }
[dir="ltr"] .back::before { content: "← "; }
[dir="ltr"] tr.prio td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

.created-users { border-color: var(--good); margin-bottom: 20px; }
.created-users .page-head { margin-bottom: 0; }

/* Respect "reduce motion". */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}