:root {
        --tint: #eef4f2;
        --success: #6f9c79;
        --warning: #c08a2e;
        --destructive: #b5532b;
        --hair: #f1ece4;
        --hair-soft: #f4efe8;
        --neutral-dot: #d7d0c6;
        --subcard-border: #e4ddd2;
        --rail-active: #f6f3ee;
      }
      html, body { margin: 0; }
      body {
        font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
        font-size: 15px; line-height: 1.5; color: var(--ink); background: var(--bg);
      }
      a { color: var(--brand); text-decoration: none; }
      h1, h2, h3 { font-family: var(--serif); font-weight: 500; margin: 0; }

      /* ---- Top bar ---- */
      .topbar {
        position: sticky; top: 0; z-index: 40; height: 63px;
        background: var(--surface); border-bottom: 1px solid var(--line);
        display: flex; align-items: center; gap: 16px; padding: 0 22px;
      }
      .topbar .logo-chip {
        width: 34px; height: 34px; border-radius: 9px; background: var(--brand);
        color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 15px;
      }
      .topbar .org-name { font-weight: 700; font-size: 15px; white-space: nowrap; }
      .topbar .crumb { color: var(--muted); font-weight: 600; }
      .topbar .back { color: var(--muted); font-weight: 600; }
      .topbar .btn-ghost { white-space: nowrap; }
      .topbar .divider { width: 1px; height: 26px; background: var(--line); }
      .topbar .ev-title { font-family: var(--serif); font-size: 19px; font-weight: 500; }
      .topbar .spacer { flex: 1; }
      .topbar a.back:hover { color: var(--ink); }

      /* ---- Org switcher ---- */
      .org-switcher { position: relative; }
      .org-switcher > summary {
        list-style: none; display: flex; align-items: center; gap: 8px;
        cursor: pointer; padding: 4px 8px 4px 4px; border-radius: 10px;
      }
      .org-switcher > summary::-webkit-details-marker { display: none; }
      .org-switcher > summary::marker { content: ""; }
      .org-switcher > summary:hover { background: var(--rail-active); }
      .org-switcher .caret { color: var(--muted); font-size: 11px; }
      .org-menu {
        position: absolute; top: calc(100% + 6px); left: 0; min-width: 232px;
        background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
        box-shadow: 0 10px 34px rgba(40,32,20,.13); padding: 6px; z-index: 50;
      }
      .org-menu form { margin: 0; }
      .org-menu .org-item {
        display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
        border: 0; background: none; font: inherit; font-weight: 600; color: var(--ink);
        padding: 9px 10px; border-radius: 10px; cursor: pointer; text-decoration: none;
      }
      .org-menu .org-item:hover { background: var(--rail-active); }
      .org-menu .org-item.active { background: var(--tint); }
      .org-menu .org-item .tick { margin-left: auto; color: var(--brand); }
      .org-menu .org-item.new {
        color: var(--brand); border-top: 1px solid var(--line);
        border-radius: 0 0 10px 10px; margin-top: 4px;
      }
      .org-menu .logo-chip.sm { width: 22px; height: 22px; border-radius: 7px; font-size: 11px; }

      /* ---- Top nav (list-level pages) ---- */
      .topnav { display: flex; gap: 2px; margin-left: 10px; }
      .topnav a { padding: 8px 13px; border-radius: 8px; color: var(--muted); font-weight: 600; font-size: 14px; }
      .topnav a:hover { color: var(--ink); background: var(--rail-active); }
      .topnav a.active { color: var(--ink); background: var(--rail-active); }

      /* ---- Settings area ---- */
      .settings-shell { display: flex; gap: 26px; max-width: 1100px; margin: 0 auto; padding: 26px 22px 80px; align-items: flex-start; }
      .settings-nav { width: 200px; flex: 0 0 200px; position: sticky; top: 89px; display: flex; flex-direction: column; gap: 2px; }
      .settings-nav a { padding: 10px 12px; border-radius: 9px; color: var(--ink); font-weight: 600; font-size: 14px; }
      .settings-nav a:hover { background: var(--rail-active); }
      .settings-nav a.active { background: var(--rail-active); }
      .settings-switch > summary { display: none; }
      .settings-switch .ss-list { display: flex; flex-direction: column; gap: 2px; }
      .settings-main { flex: 1; min-width: 0; max-width: 660px; display: flex; flex-direction: column; gap: 16px; }
      .settings-main > h1 { font-size: 26px; }
      .settings-main > .lede { color: var(--muted); font-size: 14px; margin: 2px 0 6px; }
      .card2 { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 20px 24px; }
      .card2 h2 { font-size: 18px; margin-bottom: 6px; }
      .card2 .sub { color: var(--muted); font-size: 13px; margin: 0 0 14px; }
      .url-display { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 14px; font-weight: 600;
        background: var(--hair); padding: 10px 13px; border-radius: 10px; display: inline-block; color: var(--ink); }
      .statusline { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; }
      .statusline.ok { color: var(--success); }
      .statusline.warn { color: var(--warning); }
      .statusline.idle { color: var(--muted); }

      /* ---- Orders table ---- */
      .data-table { width: 100%; border-collapse: collapse; }
      .data-table th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
        color: var(--muted); padding: 14px 0 10px; }
      .data-table td { padding: 15px 0; border-top: 1px solid var(--hair); vertical-align: middle; }
      .data-table tr:first-child td { border-top: 0; }
      .data-table a.rowlink { font-weight: 700; color: var(--ink); }
      .data-table a.rowlink:hover { color: var(--brand); }
      .pill.paid { color: var(--success); background: var(--tint); }
      .pill.pending { color: var(--warning); background: var(--hair); }
      .pill.cancelled, .pill.expired { color: #8a847a; background: var(--hair); }

      /* ---- Pills ---- */
      .pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;
        padding: 4px 11px; border-radius: 20px; white-space: nowrap; }
      .pill.on_sale { color: var(--brand); background: var(--tint); }
      .pill.on_sale::before { content: "●"; font-size: 9px; }
      .pill.draft { color: var(--muted); background: var(--hair); }
      .pill.closed { color: #8a847a; background: var(--hair); }
      /* On sale but Stripe not connected — buyers are being turned away. */
      .pill.nopay { color: var(--alert, #b5532b); background: #f7ece5; text-decoration: none; margin-left: 6px; }
      .pill.nopay:hover { text-decoration: underline; }

      /* ---- Save indicator ---- */
      .saveind { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600;
        color: var(--muted); min-width: 74px; }
      .saveind.saved { color: var(--success); }
      .saveind.saving { color: var(--muted); }
      .saveind.error { color: var(--destructive); }

      /* ---- Buttons ---- */
      .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap;
        min-height: 44px; padding: 0 16px; border-radius: 10px; font: inherit; font-weight: 600;
        font-size: 14px; cursor: pointer; border: 1px solid var(--ctl-border); background: var(--surface); color: var(--ink); }
      .btn:hover { border-color: var(--muted); }
      .btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
      .btn-primary:hover { filter: brightness(.95); border-color: var(--brand); }
      .btn-primary:disabled { background: var(--hair); border-color: var(--line); color: var(--muted); cursor: not-allowed; }
      .btn-sm { min-height: 38px; padding: 0 13px; font-size: 13px; }
      .btn-ghost { border: 0; background: none; color: var(--muted); font-weight: 600; cursor: pointer; padding: 8px; font: inherit; }
      .btn-ghost:hover { color: var(--ink); }
      .btn-dashed { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
        min-height: 46px; border: 1.5px dashed var(--ctl-border); border-radius: 11px; background: none;
        color: var(--brand); font: inherit; font-weight: 600; cursor: pointer; }
      .btn-dashed:hover { background: var(--hair-soft); }
      .icon-btn { width: 36px; height: 36px; min-width: 36px; display: inline-flex; align-items: center; justify-content: center;
        border: 1px solid var(--ctl-border); border-radius: 9px; background: var(--surface); color: var(--muted);
        cursor: pointer; font: inherit; font-size: 15px; }
      .icon-btn:hover { color: var(--ink); border-color: var(--muted); }
      .icon-btn.danger:hover { color: var(--destructive); border-color: var(--destructive); }
      .icon-btn:disabled { opacity: .35; cursor: not-allowed; }

      /* ---- Layout shell ---- */
      .shell { display: flex; gap: 26px; max-width: 1240px; margin: 0 auto; padding: 26px 22px 80px; align-items: flex-start; }
      .page { max-width: 1100px; margin: 0 auto; padding: 30px 22px 80px; }

      /* ---- Rail ---- */
      .rail { width: 248px; flex: 0 0 248px; position: sticky; top: 89px; align-self: flex-start; }
      .rail h6 { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
        color: var(--muted); margin: 0 0 10px 12px; }
      .rail-nav { display: flex; flex-direction: column; gap: 2px; margin-bottom: 18px; }
      .rail-nav a { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 9px;
        color: var(--ink); font-weight: 600; font-size: 14px; }
      .rail-nav a:hover { background: var(--rail-active); }
      .rail-nav a.active { background: var(--rail-active); }
      .rail-nav a .count { margin-left: auto; color: var(--muted); font-weight: 600; font-size: 13px; }
      .dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: var(--neutral-dot); }
      .dot.ok { background: var(--success); }
      .dot.alert { background: var(--warning); }
      .dot.neutral { background: var(--neutral-dot); }
      .readiness { border: 1px solid var(--line); border-radius: 13px; padding: 14px; background: var(--surface); }
      .readiness .rtitle { font-weight: 700; font-size: 14px; margin-bottom: 9px; }
      .readiness.ready .rtitle { color: var(--ink); }
      .rbar { height: 7px; border-radius: 5px; background: var(--hair); overflow: hidden; }
      .rbar > span { display: block; height: 100%; background: var(--warning); transition: width .25s; }
      .readiness.ready .rbar > span { background: var(--success); }
      .readiness .rhint { font-size: 12px; color: var(--muted); margin-top: 9px; }

      /* ---- Main column / sections ---- */
      .main { flex: 1; min-width: 0; max-width: 760px; display: flex; flex-direction: column; gap: 18px; }
      .section { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
      .section-head { display: flex; align-items: center; gap: 12px; padding: 20px 24px; cursor: pointer; user-select: none; }
      .section-head h2 { font-size: 20px; }
      .section-head .sub { color: var(--muted); font-size: 13px; font-weight: 500; }
      .section-head .toggle { margin-left: auto; color: var(--muted); font-size: 13px; font-weight: 600; }
      .section-body { padding: 4px 24px 24px; }
      .section.collapsed .section-body { display: none; }
      .section.collapsed .section-head { padding-bottom: 20px; }

      /* ---- Fields ---- */
      .field { margin: 16px 0; }
      .field:first-child { margin-top: 4px; }
      .field > label, .flabel { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
      .helper { font-size: 12px; color: var(--muted); margin-top: 6px; }
      .helper b { color: var(--ink); font-weight: 700; }
      input[type=text], input[type=number], input[type=time], input[type=password], input[type=email],
      input[type=date], input[type=datetime-local], input[type=url], textarea, select {
        width: 100%; padding: 11px 13px; border: 1px solid var(--ctl-border); border-radius: 10px;
        font: inherit; font-size: 15px; font-weight: 500; background: var(--surface); color: var(--ink); }
      input[type=text], input[type=number], input[type=time], input[type=password], input[type=email],
      input[type=date], input[type=datetime-local], input[type=url], select { height: 44px; }
      textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
      .flatpickr-input { background: var(--surface); }
      /* flatpickr calendar — themed to the brand, slightly more compact */
      .flatpickr-calendar { font-size: 13px; border-radius: 13px; border: 1px solid var(--line);
        box-shadow: 0 10px 34px rgba(31,28,25,.16); }
      .flatpickr-day { height: 34px; line-height: 34px; border-radius: 8px; }
      .flatpickr-day.selected, .flatpickr-day.selected:hover { background: var(--brand); border-color: var(--brand); }
      .flatpickr-day.today { border-color: var(--brand); }
      .flatpickr-day.today:hover { background: var(--tint); color: var(--ink); }
      .flatpickr-months .flatpickr-month, .flatpickr-current-month input.cur-year,
      .flatpickr-weekday { color: var(--ink); }
      span.flatpickr-weekday { color: var(--muted); }
      .flatpickr-monthDropdown-months { color: var(--ink); }
      /* Hour / minute: two clean, padded fields with a colon between */
      .flatpickr-time { border-top: 1px solid var(--line); padding: 10px; height: auto !important;
        display: flex; align-items: center; gap: 8px; }
      .flatpickr-time .numInputWrapper { flex: 1; height: 40px; border: 1px solid var(--ctl-border);
        border-radius: 9px; background: var(--surface); overflow: hidden; }
      .flatpickr-time .numInputWrapper:hover, .flatpickr-time .numInputWrapper:focus-within { border-color: var(--brand); }
      .flatpickr-time input.numInput { height: 38px !important; line-height: 38px; font-weight: 600;
        font-size: 15px; color: var(--ink); text-align: center; padding: 0; }
      .flatpickr-time .flatpickr-time-separator { width: auto; font-weight: 700; color: var(--muted); line-height: 40px; }
      .flatpickr-time .numInputWrapper span { border: 0; }
      /* SortableJS drag affordances */
      .handle { cursor: grab; }
      .sortable-ghost { opacity: .4; }
      .sortable-chosen .handle { cursor: grabbing; }
      .sortable-drag { box-shadow: 0 8px 24px rgba(31,28,25,.18); }
      input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible {
        outline: 2px solid var(--brand); outline-offset: 0; }
      .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0; align-items: start; }
      .grid2 .field { margin: 0; }  /* grid gap handles spacing; keeps columns top-aligned */

      /* ---- Type tiles ---- */
      .type-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
      .type-tile { position: relative; border: 1px solid var(--ctl-border); border-radius: 13px; padding: 16px 18px;
        cursor: pointer; background: var(--surface); display: block; }
      .type-tile:hover { border-color: var(--muted); }
      .type-tile input { position: absolute; opacity: 0; }
      .type-tile .tname { font-weight: 700; font-size: 15px; margin-top: 2px; }
      .type-tile .tdesc { color: var(--muted); font-size: 13px; margin-top: 3px; }
      .type-tile:has(input:checked) { border: 2px solid var(--brand); background: var(--brand); }
      .type-tile:has(input:checked) .tname { color: #fff; }
      .type-tile:has(input:checked) .tdesc { color: #dceae6; }

      /* Event type: collapsed to its current value (set at creation, rarely changed). */
      .type-collapse > summary { list-style: none; display: flex; align-items: center; gap: 10px;
        cursor: pointer; padding: 11px 13px; border: 1px solid var(--ctl-border); border-radius: 11px; }
      .type-collapse > summary::-webkit-details-marker { display: none; }
      .type-collapse > summary:hover { border-color: var(--muted); }
      .type-collapse > summary .tc-label { color: var(--muted); font-size: 13px; font-weight: 600; }
      .type-collapse > summary .type-current { font-weight: 700; }
      .type-collapse > summary .type-change { margin-left: auto; color: var(--brand); font-weight: 600; font-size: 13px; }
      .type-collapse[open] > summary { margin-bottom: 12px; }
      .type-collapse[open] > summary .type-change::after { content: " ▴"; }
      .type-collapse:not([open]) > summary .type-change::after { content: " ▾"; }

      /* ---- Segmented control ---- */
      .segmented { display: inline-flex; border: 1px solid var(--ctl-border); border-radius: 10px; overflow: hidden; background: var(--surface); }
      .segmented label { padding: 9px 16px; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer;
        border-right: 1px solid var(--ctl-border); }
      .segmented label:last-child { border-right: 0; }
      .segmented input { position: absolute; opacity: 0; }
      .segmented label:has(input:checked) { background: var(--brand); color: #fff; }

      /* ---- Toggle switch ---- */
      .switch { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; cursor: pointer; }
      .switch input { position: absolute; opacity: 0; }
      .switch .track { width: 40px; height: 23px; border-radius: 20px; background: var(--ctl-border); position: relative; transition: background .15s; flex: 0 0 auto; }
      .switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px;
        border-radius: 50%; background: #fff; transition: transform .15s; }
      .switch input:checked + .track { background: var(--brand); }
      .switch input:checked + .track::after { transform: translateX(17px); }

      /* ---- Column headers ---- */
      .colhead { display: grid; gap: 12px; font-size: 11px; font-weight: 700; letter-spacing: .04em;
        text-transform: uppercase; color: var(--muted); padding: 0 4px 8px; }

      /* ---- Tickets ---- */
      .ticket-row { border: 1px solid var(--subcard-border); border-radius: 13px; padding: 14px; margin-bottom: 12px; }
      .ticket-grid { display: grid; grid-template-columns: 1fr 120px 120px 40px; gap: 12px; align-items: center; }
      /* Early-bird sub-row: price + Until equal width (was an inline style). */
      .eb-grid { grid-template-columns: 1fr 1fr 40px; }
      .ticket-grid .price-wrap, .ticket-grid .gbp { position: relative; }
      .prefix { position: relative; }
      /* £ stays pinned left; the number sits on the right so the symbol never
         overlaps it (kept consistent across every currency input in the app). */
      .prefix input { padding-left: 26px; text-align: right; }
      .suffix { position: relative; }
      .suffix input { padding-right: 30px; }
      .suffix::after { content: "%"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
        color: var(--muted); font-weight: 600; pointer-events: none; }
      .prefix::before { content: "£"; position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
        color: var(--muted); font-weight: 600; z-index: 1; }
      .eb-sub { border-top: 1.5px dashed var(--ctl-border); margin-top: 14px; padding-top: 14px; }
      .eb-sub .eb-title { font-size: 13px; font-weight: 600; color: var(--brand); margin-bottom: 10px; }
      .eb-sub .eb-title .star { margin-right: 4px; }
      /* details/summary disclosure: closed = a single ★ line, open = the fields. */
      details.eb-sub > summary { list-style: none; cursor: pointer; display: flex; align-items: center;
        min-height: 32px; margin-bottom: 0; user-select: none; }
      details.eb-sub > summary::-webkit-details-marker { display: none; }
      details.eb-sub .eb-caret::after { content: "▸ Show"; font-weight: 600; color: var(--muted); margin-left: 8px; }
      details.eb-sub[open] .eb-caret::after { content: "▾ Hide"; }
      details.eb-sub[open] > summary { margin-bottom: 10px; }

      /* ---- Sessions ---- */
      .session-card { border: 1px solid var(--subcard-border); border-radius: 14px; overflow: hidden; margin-bottom: 14px; }
      .session-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--bg); border-bottom: 1px solid var(--subcard-border); }
      .session-head .handle { color: var(--muted); cursor: grab; font-size: 15px; }
      .session-head .sname { font-weight: 700; font-size: 15px; border: 1px solid transparent; background: none;
        padding: 5px 8px; border-radius: 7px; width: 150px; font-family: var(--serif); }
      .session-head .sname:hover, .session-head .sname:focus-visible { border-color: var(--ctl-border); background: var(--surface); }
      .session-head .times { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
      .session-head .times input { width: 84px; padding: 7px 9px; font-size: 13px; }
      .session-head .wcount { font-size: 12px; font-weight: 700; color: var(--muted); }
      .session-head .wcount.alert { color: var(--warning); }
      .session-head .sactions { margin-left: auto; display: flex; gap: 4px; }
      .session-body { padding: 12px 14px 14px; }
      .workshop-row { display: grid; grid-template-columns: 18px 1fr 96px 96px 70px; gap: 10px; align-items: start;
        padding: 12px 0; border-top: 1px solid var(--hair); }
      .workshop-row:first-child { border-top: 0; }
      .workshop-row .handle { color: var(--muted); cursor: grab; padding-top: 10px; }
      .workshop-row .wname { font-weight: 600; }
      .workshop-row .wdesc { margin-top: 8px; }
      .workshop-row .wdesc input { color: var(--muted); }
      .workshop-row .wact { display: flex; gap: 4px; padding-top: 2px; }
      .wcol { padding-top: 2px; }
      .note { display: flex; gap: 9px; font-size: 12px; color: var(--muted); background: var(--tint); border-radius: 10px;
        padding: 11px 13px; margin-top: 6px; }
      .note .i { color: var(--brand); font-weight: 700; }

      /* ---- Questions ---- */
      .question-card { border: 1px solid var(--subcard-border); border-radius: 14px; padding: 16px; margin-bottom: 14px; }
      .question-card .qtop { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
      .question-card .qlabel { flex: 1; font-weight: 600; }
      .qcontrols { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
      .option-row { display: grid; grid-template-columns: 18px 1fr 120px 40px; gap: 10px; align-items: center;
        padding: 8px 0; border-top: 1px solid var(--hair); }
      .option-row .handle { color: var(--muted); cursor: grab; }

      /* ---- Promo table ---- */
      .promo-row { display: grid; grid-template-columns: 1fr 150px 110px 90px 90px 40px; gap: 12px; align-items: center;
        padding: 12px 4px; border-top: 1px solid var(--hair); }
      .promo-row:first-of-type { border-top: 0; }
      .promo-row .uses { color: var(--muted); font-size: 13px; }

      /* ---- Branding ---- */
      .dropzone { border: 1.5px dashed var(--ctl-border); border-radius: 12px; padding: 18px; display: flex; align-items: center; gap: 14px; }
      .swatches { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0; }
      .swatch { width: 34px; height: 34px; border-radius: 9px; cursor: pointer; border: 2px solid transparent; }
      .swatch.sel { border-color: var(--ink); }
      .brand-preview { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
      .brand-preview .pv-btn { background: var(--brand); color: #fff; padding: 9px 16px; border-radius: 9px; font-weight: 600; font-size: 14px; }
      .brand-preview .pv-chip { background: var(--tint); color: var(--brand); padding: 5px 12px; border-radius: 20px; font-weight: 700; font-size: 13px; }

      /* ---- Dashboard ---- */
      .page-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; }
      .page-head h1 { font-size: 28px; }
      .page-head .subline { color: var(--muted); font-size: 14px; margin-top: 4px; }
      .events-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 6px 22px; }
      .events-table { width: 100%; border-collapse: collapse; }
      .events-table th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
        color: var(--muted); padding: 16px 0 10px; }
      .events-table td { padding: 18px 0; border-top: 1px solid var(--hair); vertical-align: middle; }
      .events-table tr:first-child td { border-top: 0; }
      .ev-name { font-size: 17px; font-weight: 700; }
      .ev-meta { color: var(--muted); font-size: 13px; margin-top: 3px; }
      .sold b { font-weight: 700; }
      .sold .cap { color: var(--muted); }
      .row-actions { display: flex; gap: 8px; justify-content: flex-end; }
      .row-actions .disabled { color: var(--muted); opacity: .55; cursor: not-allowed; pointer-events: none; }
      .tip { color: var(--muted); font-size: 13px; padding: 16px 2px 8px; }

      /* ---- Empty state ---- */
      .empty { max-width: 720px; margin: 60px auto; text-align: center; background: var(--surface);
        border: 1px solid var(--line); border-radius: 20px; padding: 44px 40px; }
      .empty .icontile { width: 64px; height: 64px; border-radius: 16px; background: var(--tint); color: var(--brand);
        display: flex; align-items: center; justify-content: center; font-size: 26px; margin: 0 auto 16px; }
      .empty h1 { font-size: 30px; margin-bottom: 8px; }
      .empty .reassure { color: var(--muted); margin-bottom: 28px; }
      .empty .choices { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; text-align: left; }
      .empty .choice { border: 1px solid var(--ctl-border); border-radius: 14px; padding: 20px; cursor: pointer;
        background: var(--surface); position: relative; }
      .empty .choice:hover { border-color: var(--muted); }
      .empty .choice.brand { border: 2px solid var(--brand); }
      .empty .choice .icontile2 { width: 42px; height: 42px; border-radius: 11px; background: var(--hair);
        display: flex; align-items: center; justify-content: center; font-size: 18px; margin-bottom: 26px; }
      .empty .choice.brand .icontile2 { background: var(--tint); color: var(--brand); }
      .empty .choice .cname { font-weight: 700; font-size: 16px; }
      .empty .choice .cdesc { color: var(--muted); font-size: 13px; margin-top: 4px; }
      .empty .choice .badge { position: absolute; top: 18px; right: 18px; font-size: 10px; font-weight: 700;
        letter-spacing: .05em; color: var(--muted); text-transform: uppercase; line-height: 1.2; text-align: right; }
      .empty .divider-row { border-top: 1px solid var(--line); margin-top: 28px; padding-top: 18px; color: var(--muted); font-size: 14px; }

      /* ---- Publish modal ---- */
      dialog.publish { border: 0; border-radius: 18px; padding: 0; width: 480px; max-width: 92vw;
        box-shadow: 0 24px 60px rgba(31,28,25,.28); }
      dialog.publish::backdrop { background: rgba(31,28,25,.5); }
      .pm-head { display: flex; align-items: center; padding: 22px 24px 14px; }
      .pm-head h2 { font-size: 21px; }
      .pm-head .x { margin-left: auto; }
      .pm-body { padding: 4px 24px 8px; }
      .checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
      .checklist li { display: flex; align-items: flex-start; gap: 11px; font-size: 14px; }
      .checklist .mark { width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center;
        justify-content: center; font-size: 13px; font-weight: 700; color: #fff; }
      .checklist .ok .mark { background: var(--success); }
      .checklist .bad .mark { background: var(--warning); }
      .checklist .bad { color: var(--ink); }
      .pm-warnings { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
      .checklist .warn .mark { background: var(--warning); }
      .checklist .warn a { color: var(--brand); font-weight: 700; }
      .pm-foot { display: flex; align-items: center; gap: 12px; padding: 18px 24px 22px; flex-wrap: wrap; }
      .pm-foot .status { flex: 1 1 100%; font-size: 13px; font-weight: 600; color: var(--muted); }
      @media (min-width: 480px) {
        .pm-foot { flex-wrap: nowrap; }
        .pm-foot .status { flex: 1 1 auto; }
      }
      .pm-foot .status.ready { color: var(--success); }

      .hint-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }

      /* ---- Go-live readiness panel ---- */
      .golive { margin-bottom: 18px; }
      .golive .golive-head { display: flex; align-items: center; gap: 10px; }
      .golive .golive-head h2 { font-size: 18px; }
      .golive-steps { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
      .golive-steps li { display: flex; align-items: center; gap: 12px; }
      .golive-steps .mark { width: 24px; height: 24px; flex: 0 0 auto; border-radius: 50%; display: flex;
        align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
        background: var(--hair); color: var(--muted); }
      .golive-steps li.done .mark { background: var(--success); color: #fff; }
      .golive-steps .lbl { font-weight: 600; }
      .golive-steps li.done .lbl { color: var(--muted); }
      .golive-steps li:not(.done) .lbl { flex: 1; }
      .golive-steps a.btn, .golive-steps .helper { margin-left: auto; }

      /* ============================================================
         BRAND WORDMARK + MOBILE SLIDE-OUT DRAWER
         ============================================================ */
      .wordmark { display: inline-flex; align-items: baseline; text-decoration: none; flex: 0 0 auto; }
      .wm-text { font-family: "Fredoka", "Hanken Grotesk", system-ui, sans-serif; font-weight: 600;
        font-size: 22px; letter-spacing: .002em; color: var(--ink); line-height: 1; }
      .wm-text b { color: var(--brand); font-weight: 600; }

      .hamburger { display: none; width: 44px; height: 44px; margin-left: -6px; border-radius: 10px;
        align-items: center; justify-content: center; flex-direction: column; gap: 4px; cursor: pointer; }
      .hamburger span { width: 19px; height: 2px; border-radius: 2px; background: var(--ink); transition: opacity .2s; }
      .hamburger:hover { background: var(--rail-active); }
      .topdivider { width: 1px; height: 26px; background: var(--line); flex: 0 0 auto; }
      .org-inline { display: inline-flex; align-items: center; gap: 9px; }

      /* Drawer is off-canvas on desktop and simply never shown (hamburger hidden). */
      .drawer-backdrop { display: none; position: fixed; inset: 0; background: rgba(31,28,25,.5);
        opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 90; }
      .drawer { display: none; position: fixed; top: 0; left: 0; bottom: 0; width: 84vw; max-width: 320px;
        background: var(--surface); z-index: 100; box-shadow: 0 10px 34px rgba(40,32,20,.18);
        transform: translateX(-100%); transition: transform .25s ease; flex-direction: column; }
      .drawer-head { display: flex; align-items: center; padding: 16px 14px 16px 18px; border-bottom: 1px solid var(--line); }
      .drawer-close { margin-left: auto; width: 44px; height: 44px; display: flex; align-items: center;
        justify-content: center; font-size: 19px; color: var(--muted); cursor: pointer; border-radius: 10px; }
      .drawer-close:hover { background: var(--rail-active); color: var(--ink); }
      .drawer-org { display: flex; align-items: center; gap: 11px; padding: 15px 18px; border-bottom: 1px solid var(--line); }
      .drawer-org .do-name { font-weight: 700; }
      .drawer-org .do-sub { font-size: 12px; color: var(--muted); }
      .drawer-org .do-text { min-width: 0; }
      .drawer-org .do-name, .drawer-org .do-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      /* Org switcher in the rail/drawer: the org row is a <summary>; the list
         reuses .org-item but sits inline (not an absolute dropdown). */
      .drawer-switch { border-bottom: 1px solid var(--line); }
      .drawer-switch > summary { list-style: none; cursor: pointer; }
      .drawer-switch > summary::-webkit-details-marker { display: none; }
      .drawer-switch > summary.drawer-org { border-bottom: 0; }
      .drawer-switch > summary:hover { background: var(--rail-active); }
      .drawer-org .do-caret { margin-left: auto; color: var(--muted); font-size: 11px; transition: transform .15s; }
      .drawer-switch[open] .do-caret { transform: rotate(180deg); }
      .drawer-switch .org-menu { position: static; box-shadow: none; border: 0; border-radius: 0;
        min-width: 0; background: transparent; padding: 2px 10px 10px; z-index: auto; }
      .drawer-nav { display: flex; flex-direction: column; padding: 10px 12px; gap: 2px; flex: 1; overflow-y: auto; }
      .drawer-nav a { display: flex; align-items: center; min-height: 48px; padding: 0 14px; border-radius: 11px;
        font-weight: 600; font-size: 16px; color: var(--ink); }
      .drawer-nav a:hover { background: var(--rail-active); }
      .drawer-nav a.active { background: var(--tint); color: var(--brand); }
      .drawer-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px;
        padding: 12px 18px; border-top: 1px solid var(--line); }
      .drawer-foot .adminlink { color: var(--muted); font-weight: 600; }
      @media (prefers-reduced-motion: reduce) { .drawer, .drawer-backdrop { transition: none; } }

      /* ---- Collapsible nav group (Settings) — used in the rail/drawer ---- */
      .drawer-nav .dn-group { display: flex; flex-direction: column; }
      .drawer-nav .dn-group > summary { display: flex; align-items: center; min-height: 48px;
        padding: 0 14px; border-radius: 11px; color: var(--ink); font-weight: 600; cursor: pointer;
        list-style: none; }
      .drawer-nav .dn-group > summary::-webkit-details-marker { display: none; }
      .drawer-nav .dn-group > summary::after { content: "▸"; margin-left: auto; color: var(--muted); font-size: 11px; }
      .drawer-nav .dn-group[open] > summary::after { content: "▾"; }
      .drawer-nav .dn-group > summary:hover { background: var(--rail-active); }
      .drawer-nav .dn-group > summary.active { background: var(--tint); color: var(--brand); }
      .drawer-nav .dn-sub { display: flex; flex-direction: column; padding: 2px 0 6px 12px; gap: 1px; }
      .drawer-nav .dn-sub a { display: flex; align-items: center; min-height: 40px; padding: 0 14px;
        border-radius: 10px; color: var(--muted); font-weight: 600; font-size: 14px; }
      .drawer-nav .dn-sub a:hover { background: var(--rail-active); color: var(--ink); }
      .drawer-nav .dn-sub a.active { background: var(--tint); color: var(--brand); }

      /* ===========================================================
         DESKTOP LEFT RAIL (≥901px) — promote the (mobile) drawer to a
         persistent sidebar; the list-level top bar's contents live in it.
         The editor keeps its own top bar (it has no .drawer), untouched.
         =========================================================== */
      @media (min-width: 901px) {
        body:has(.drawer) .topbar { height: 0; min-height: 0; padding: 0; border: 0;
          position: static; background: transparent; overflow: visible; }
        body:has(.drawer) .topbar > :not(.drawer):not(.drawer-backdrop) { display: none; }
        body:has(.drawer) .drawer-backdrop { display: none; }
        body:has(.drawer) .drawer { display: flex; position: fixed; top: 0; left: 0; bottom: 0;
          width: 236px; max-width: 236px; transform: none; box-shadow: none;
          border-right: 1px solid var(--line); z-index: 30; }
        body:has(.drawer) .drawer-close { display: none; }
        body:has(.drawer) .mmain { padding-left: 236px; }
        /* Settings sub-pages now live in the rail, so drop the in-page settings switcher. */
        body:has(.drawer) .settings-nav { display: none; }
        body:has(.drawer) .settings-shell { max-width: 920px; }
      }

      /* ---- Header switches to hamburger + drawer at ≤900px (tablet down) ---- */
      @media (max-width: 900px) {
        .topbar:has(.hamburger) { padding: 0 10px; gap: 10px; }
        .topbar .hamburger { display: flex; }
        /* Make the toggle focusable on mobile (override the [hidden] attr) */
        .navdrawer-toggle { display: block; position: absolute; width: 1px; height: 1px; opacity: 0; }
        .navdrawer-toggle:focus-visible ~ .hamburger { outline: 2px solid var(--brand); outline-offset: 2px; }
        .topbar:has(.hamburger) .topnav,
        .topbar:has(.hamburger) > .org-switcher,
        .topbar:has(.hamburger) > .org-inline,
        .topbar:has(.hamburger) > .topdivider,
        .topbar:has(.hamburger) > .adminlink,
        .topbar:has(.hamburger) > form,
        .topbar:has(.hamburger) > .spacer { display: none; }
        .topbar:has(.hamburger) .wordmark { margin-left: 2px; }
        /* Center the wordmark on mobile: hamburger floats left, logo centered */
        .topbar:has(.hamburger) > .wordmark { position: absolute; left: 50%;
          transform: translateX(-50%); margin: 0; }
        .drawer, .drawer-backdrop { display: flex; }
        .navdrawer-toggle:checked ~ .drawer { transform: translateX(0); }
        .navdrawer-toggle:checked ~ .drawer-backdrop { opacity: 1; pointer-events: auto; }
        /* Lock the page behind the open drawer (also stops scroll-driven auto-hide). */
        body:has(.navdrawer-toggle:checked) { overflow: hidden; }
        .navdrawer-toggle:checked ~ .hamburger span:nth-child(1) { opacity: 0; }
        .navdrawer-toggle:checked ~ .hamburger span:nth-child(3) { opacity: 0; }
      }

      @media (max-width: 1024px) {
        .ticket-grid { grid-template-columns: 1fr 100px 100px 40px; }
      }

      /* ============================================================
         MOBILE REWORK  (≤760px)
         · editor rows reflow to stacked, labelled fields (.ebf cells)
         · data tables collapse to cards (table.stack + data-label)
         · ≥44px tap targets, roomier forms, scrollable tab strips
         ============================================================ */

      /* .ebf wraps one editor-row cell. On desktop the grid + .colhead do the
         work, so the wrapper and its label are invisible; on mobile it shows
         its data-label above a full-width control. */
      .ebf { min-width: 0; }
      .ebf > .prefix, .ebf > .suffix { display: block; }
      .ebf::before { display: none; }

      @media (max-width: 760px) {
        /* ---- Editor top bar (its own markup, no drawer) stays compact ---- */
        .topbar { padding: 0 14px; }
        .topbar .crumb { display: none; }
        .topbar .divider { display: none; }
        .topbar .ev-title { font-size: 16px; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .topbar .btn-ghost { white-space: nowrap; }
        .saveind { min-width: 0; white-space: nowrap; }
        .topbar .back:not(.adminlink) { font-size: 0; padding: 0 2px; }
        .topbar .back:not(.adminlink)::before { content: "‹"; font-size: 24px; line-height: 1; }
        .topbar .pill { display: none; }     /* status stays editable in the form below */

        /* iOS Safari zooms in when an input is <16px — bump to 16 on mobile */
        input[type=text], input[type=number], input[type=time], input[type=password],
        input[type=email], input[type=date], input[type=datetime-local], input[type=url],
        textarea, select { font-size: 16px; }
        .url-display { max-width: 100%; overflow-wrap: anywhere; }
        .page > .back { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }

        /* ---- Shells stack; side rails step aside ---- */
        .shell, .settings-shell { flex-direction: column; gap: 14px; padding: 16px 14px 64px; }
        .rail { display: none; }            /* desktop scroll-spy / readiness aid */
        .main, .settings-main { max-width: none; width: 100%; }

        /* ---- Settings nav -> the page title IS the section switcher (zero extra row) ---- */
        .settings-nav { width: 100%; flex: none; position: relative; top: auto; display: block; margin: 0 0 4px; z-index: 6; }
        .settings-main > h1 { display: none; }   /* the switcher carries the section title */
        .settings-switch { border: 0; background: none; border-radius: 0; overflow: visible; }
        .settings-switch > summary { list-style: none; display: inline-flex; align-items: center; gap: 9px;
          padding: 2px 0 4px; cursor: pointer; font-family: var(--serif); font-size: 27px; font-weight: 500; color: var(--ink); }
        .settings-switch > summary::-webkit-details-marker { display: none; }
        .settings-switch .ss-lead { display: none; }
        .settings-switch .ss-cur { color: var(--ink); }
        .settings-switch .ss-caret { color: var(--muted); font-size: 15px; transition: transform .2s; }
        .settings-switch[open] .ss-caret { transform: rotate(180deg); }
        .settings-switch .ss-list { position: absolute; left: 0; top: 100%; min-width: 244px; z-index: 30;
          background: var(--surface); border: 1px solid var(--line); border-radius: 13px; overflow: hidden;
          box-shadow: 0 10px 34px rgba(40,32,20,.13); display: flex; flex-direction: column; padding: 5px; gap: 1px; }
        .settings-switch:not([open]) .ss-list { display: none; }
        .settings-nav a { min-height: 46px; display: flex; align-items: center; padding: 0 13px;
          border-radius: 9px; font-weight: 600; }
        .settings-nav a:hover { background: var(--rail-active); }
        .settings-nav a.active { background: var(--tint); color: var(--brand); }

        /* ---- Generic pages ---- */
        .page { padding: 20px 14px 64px; }
        .page-head { flex-wrap: wrap; gap: 12px; align-items: flex-start; }
        .page-head h1 { font-size: 24px; }
        .page-head > .btn-primary { width: 100%; }   /* e.g. + Create event */
        .card2 { padding: 18px 16px; }

        /* ---- Forms: tighter, but still breathable ---- */
        .type-tiles, .empty .choices { grid-template-columns: 1fr; gap: 12px; }
        .grid2 { gap: 12px; }                 /* keep 2-up: short fields share the row */
        .grid2 input, .grid2 select { min-width: 0; }
        .segmented { display: flex; width: 100%; }
        .segmented label { flex: 1; text-align: center; white-space: nowrap; padding: 12px 8px; }
        .field { margin: 16px 0; }
        .section-head { padding: 18px 16px; flex-wrap: wrap; align-items: baseline; }
        .section-head h2 { white-space: nowrap; }
        .section-head .toggle { margin-left: auto; }
        .section-head .sub { flex-basis: 100%; order: 3; }
        .section-body { padding: 6px 16px 20px; overflow: visible; }
        .empty { margin: 28px auto; padding: 30px 20px; }

        /* ---- Bigger tap targets ---- */
        .icon-btn { width: 44px; height: 44px; min-width: 44px; font-size: 17px; }
        .btn-sm { min-height: 44px; }
        .handle { display: none; }            /* no touch DnD; reorder via ↑ ↓ */

        /* ============ Editor rows -> tight 2-up labelled grid ============
           The long primary field (name / code) spans the row; the short
           numeric fields (price, capacity, surcharge, value…) pair up
           two-across so the rows stay compact instead of one-per-line. */
        .colhead { display: none; }
        .ticket-grid,
        .eb-sub .ticket-grid,
        .workshop-row,
        .option-row,
        .promo-row { display: grid; grid-template-columns: 1fr 1fr !important;
          gap: 14px 12px; align-items: start; }

        .ebf { display: block; margin: 0; min-width: 0; }
        .ebf::before { content: attr(data-label); display: block;
          font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
        .ebf input, .ebf select { width: 100%; }

        /* Primary field spans both columns */
        .ticket-row > .ticket-grid > .ebf:first-child,   /* Ticket name  */
        .workshop-row > .ebf:first-of-type,              /* Workshop name + desc */
        .promo-row > .ebf:first-child { grid-column: 1 / -1; }   /* Promo code */

        /* Action clusters / spacer cells */
        .workshop-row > .wact { grid-column: 1 / -1; justify-content: flex-start; }
        .ticket-grid > span:empty { display: none; }     /* early-bird spacer */

        /* Delete buttons -> labelled "× Remove" */
        .ticket-grid > .icon-btn.danger,
        .option-row > .icon-btn.danger,
        .promo-row > .icon-btn.danger {
          width: auto; min-width: 0; height: 44px; padding: 0 16px; gap: 6px;
          align-self: end; border-color: var(--ctl-border); }
        .ticket-grid > .icon-btn.danger,
        .promo-row > .icon-btn.danger { grid-column: 1 / -1; justify-self: start; }
        .ticket-grid > .icon-btn.danger::after,
        .option-row > .icon-btn.danger::after,
        .promo-row > .icon-btn.danger::after { content: "Remove"; font-size: 14px; font-weight: 600; }

        /* Workshop / session action clusters: a row of 44px icon buttons */
        .workshop-row .wact,
        .session-head .sactions { gap: 8px; padding-top: 4px; }
        .workshop-row .wcol { padding-top: 0; }
        .workshop-row .wdesc { margin-top: 10px; }

        /* Session header wraps; name + times go full width */
        .session-head { flex-wrap: wrap; gap: 10px; }
        .session-head .sname { width: 100%; font-size: 16px; }
        .session-head .times { width: 100%; flex-wrap: wrap; }
        .session-head .times input { width: 90px; }
        .session-head .sactions { margin-left: 0; }

        .qcontrols { gap: 12px 16px; }

        /* ============ Data tables -> cards ============ */
        /* Drop the wrapping card chrome so each row-card stands alone */
        .events-card { padding: 0; background: transparent; border: 0; }

        table.stack, table.stack thead, table.stack tbody,
        table.stack tr, table.stack td { display: block; width: 100%; }
        table.stack thead { display: none; }
        table.stack tr { border: 1px solid var(--line); border-radius: 14px;
          padding: 14px 16px; margin-bottom: 12px; background: var(--surface);
          box-shadow: 0 1px 2px rgba(40,32,20,.04); }
        table.stack td { border: 0 !important; padding: 6px 0 !important; display: flex;
          flex-wrap: wrap; justify-content: space-between; align-items: baseline;
          gap: 4px 16px; text-align: right; }
        table.stack td::before { content: attr(data-label); font-weight: 600; font-size: 12px;
          letter-spacing: .03em; text-transform: uppercase; color: var(--muted);
          text-align: left; white-space: nowrap; }
        table.stack td:empty { display: none; }
        /* First cell becomes the card title — no label, left-aligned */
        table.stack td:first-child { display: block; text-align: left;
          padding: 0 0 10px !important; margin-bottom: 6px;
          border-bottom: 1px solid var(--hair) !important; }
        table.stack td:first-child::before { display: none; }
        table.stack td:first-child .rowlink,
        table.stack td:first-child .ev-name { font-size: 16px; }
        /* Actions cell: hide label, full-width wrap of buttons */
        table.stack td:has(.row-actions) { display: block; text-align: right; padding-top: 10px !important; }
        table.stack td:has(.row-actions)::before { display: none; }
        /* Right-align so Edit/⋯ sit at the right and the ⋯ menu (anchored right:0)
           opens on-screen instead of overflowing off the left edge. */
        table.stack .row-actions { justify-content: flex-end; flex-wrap: wrap; gap: 8px; width: 100%; }
        table.stack .row-actions form { display: inline-flex; margin: 0; }
      }

      @media (max-width: 380px) {
        .session-head .times input { width: 78px; }
      }

      /* ---- Change workshops (order detail, per ticket) ---- */
      .move-slot { margin-top: 8px; }
      .ticket-move { display: grid; gap: 8px; margin-top: 4px; padding: 12px;
        background: var(--bg); border: 1px solid var(--line); border-radius: 12px; max-width: 420px; }
      .ticket-move .move-row { display: grid; gap: 3px; margin: 0; }
      .ticket-move .move-session { font-size: 12px; font-weight: 600; letter-spacing: .04em;
        text-transform: uppercase; color: var(--muted); }
      .ticket-move select { width: 100%; min-height: 42px; border: 1px solid var(--ctl-border);
        border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 14px; background: var(--surface); }
      .move-warn { background: #f7ece5; color: var(--alert, #b5532b); border-radius: 10px;
        padding: 9px 12px; font-size: 13px; font-weight: 600; }
      .move-opt { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600;
        color: var(--ink); margin: 0; min-height: 28px; }
      .move-opt input { width: 17px; height: 17px; accent-color: var(--brand); }
      .move-opt.hidden-opt { display: none; }
      .move-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 2px; }

      /* ---- Styled destructive-action confirm ---- */
      .confirm-dlg { border: 0; border-radius: 18px; padding: 22px 22px 18px; max-width: 380px;
        width: calc(100vw - 40px); background: var(--surface); color: var(--ink);
        box-shadow: 0 10px 34px rgba(40,32,20,.13); }
      .confirm-dlg::backdrop { background: rgba(31,28,25,.5); }
      .confirm-q { margin: 0 0 18px; font-size: 15px; font-weight: 600; line-height: 1.5; }
      .confirm-actions { display: flex; justify-content: flex-end; gap: 10px; }
      .confirm-actions .btn { min-height: 44px; }
      .confirm-yes { background: var(--alert, #b5532b); border-color: var(--alert, #b5532b); color: #fff; }
      .confirm-yes:hover { filter: brightness(1.05); }

      /* ---- ⓘ helper toggles (switch explanations, tappable on touch) ---- */
      .ihint { border: 0; background: none; color: var(--muted); font: inherit; font-size: 14px;
        cursor: pointer; width: 32px; height: 32px; margin-left: -6px; border-radius: 50%;
        display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
      .ihint:hover, .ihint[aria-expanded="true"] { color: var(--brand); background: var(--tint, #eef4f2); }
      .ihint-line { background: var(--tint, #eef4f2); border-radius: 10px; padding: 9px 12px;
        margin-top: 8px; font-size: 13px; color: var(--ink); }

      /* Empty session times: a quiet amber nudge until a time is set (the publish
         modal spells it out in words). */
      .session-head .times input:placeholder-shown {
        border-color: var(--warning, #c08a2e); background: #fdf7ec;
      }

      /* ---- Orders list: filter bar + pager ---- */
      .orders-filter { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; }
      .orders-filter input[type="search"] { flex: 1 1 220px; min-width: 0; }
      .orders-filter select { flex: 0 1 auto; }
      @media (max-width: 560px) {
        .orders-filter input[type="search"] { flex-basis: 100%; }
        .orders-filter select { flex: 1 1 40%; }
      }
      .pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; }
      .pager-status { color: var(--muted); font-size: 13px; font-weight: 600; }

      /* ---- Flash messages (Django messages, rendered once in base) ---- */
      .flashes { max-width: 1100px; margin: 14px auto 0; padding: 0 22px; display: grid; gap: 8px; }
      @media (max-width: 760px) { .flashes { padding: 0 14px; } }
      .flash {
        display: flex; align-items: flex-start; gap: 10px;
        background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
        padding: 11px 13px; font-size: 14px; font-weight: 600; color: var(--ink);
        box-shadow: 0 1px 2px rgba(40,32,20,.04);
      }
      .flash .flash-ico {
        flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
        display: inline-flex; align-items: center; justify-content: center;
        font-size: 12px; font-weight: 800; color: #fff; background: var(--success);
      }
      .flash.error .flash-ico, .flash.warning .flash-ico { background: var(--alert, #b5532b); }
      .flash.warning .flash-ico { background: var(--warning, #c08a2e); }
      .flash.error { border-color: color-mix(in srgb, var(--alert, #b5532b) 35%, var(--line)); }
      .flash .flash-x {
        margin-left: auto; flex: 0 0 auto; border: 0; background: none; cursor: pointer;
        color: var(--muted); font-size: 13px; padding: 2px 6px; border-radius: 8px;
      }
      .flash .flash-x:hover { background: var(--soft, #f1ece4); }

      /* ---- Impersonation banner ---- */
      .imp-banner {
        position: sticky; top: 0; z-index: 60; display: flex; align-items: center;
        justify-content: center; gap: 14px; flex-wrap: wrap;
        background: var(--warning); color: #fff; font-weight: 600; font-size: 14px;
        padding: 8px 16px;
      }
      .imp-banner form { margin: 0; }
      .imp-banner button {
        border: 1px solid rgba(255,255,255,.7); background: rgba(255,255,255,.15);
        color: #fff; font: inherit; font-weight: 700; padding: 4px 12px; border-radius: 8px; cursor: pointer;
      }
      .imp-banner button:hover { background: rgba(255,255,255,.28); }

      /* ---- Stripe test-mode banner (platform-wide, hard to miss) ---- */
      .stripe-test-banner {
        position: sticky; top: 0; z-index: 61; display: flex; align-items: center;
        justify-content: center; gap: 12px; flex-wrap: wrap;
        background: var(--alert, #b5532b); color: #fff; font-weight: 700; font-size: 14px;
        padding: 8px 16px; text-align: center;
      }
      .stripe-test-banner a { color: #fff; text-decoration: underline; font-weight: 800; }
      /* ---- Booking-page preview pane ----------------------------------- */
      /* Mobile-first base = full-screen takeover (crossfade). Desktop (≥1024)
         overrides to a side-by-side split that leaves the editor usable. */
      .preview-pane {
        position: fixed; inset: 0; z-index: 70;
        display: flex; flex-direction: column; background: var(--surface);
        opacity: 0; pointer-events: none; transition: opacity .2s ease;
      }
      /* Closed state uses the `inert` attribute (set in JS) for focus/a11y
         removal — NOT `visibility`, which would gate focusability behind the
         fade transition and make focus() flaky. */
      body.preview-open .preview-pane { opacity: 1; pointer-events: auto; }

      .preview-bar {
        flex: 0 0 auto; display: flex; align-items: center; gap: 10px; height: 48px;
        padding: 0 12px; background: var(--surface); border-bottom: 1px solid var(--line);
      }
      .preview-bar-title { font-weight: 600; font-size: 13px; }
      .preview-back {
        display: inline-flex; align-items: center; border: 0; background: none;
        font: inherit; font-weight: 600; color: var(--muted); cursor: pointer; padding: 6px 4px;
      }
      .preview-devices {
        margin-left: auto; display: inline-flex; border: 1px solid var(--line);
        border-radius: 8px; overflow: hidden;
      }
      .preview-devices button {
        border: 0; background: var(--surface); color: var(--muted);
        font: inherit; font-size: 12px; padding: 5px 11px; min-height: 32px; cursor: pointer;
      }
      .preview-devices button.active { background: var(--brand); color: #fff; }
      .preview-newtab { font-size: 12px; color: var(--muted); text-decoration: none; }
      .preview-x {
        border: 0; background: none; color: var(--muted);
        font-size: 18px; line-height: 1; cursor: pointer; padding: 6px 8px;
      }

      .preview-stage {
        flex: 1 1 auto; min-height: 0; overflow: auto;
        display: flex; justify-content: center; background: var(--surface);
      }
      #preview-frame { width: 100%; height: 100%; border: 0; background: var(--surface); }

      /* On the mobile takeover the device toggle / new-tab / title are noise,
         and the editor behind it must not scroll through. */
      @media (max-width: 1023px) {
        .preview-devices, .preview-newtab, .preview-bar-title { display: none; }
        body.preview-open { overflow: hidden; }
      }

      /* Desktop: side panel; push the editor left so it stays usable. */
      @media (min-width: 1024px) {
        body { transition: padding-right .2s ease; }
        body.preview-open { padding-right: 520px; }
        .preview-pane {
          top: 63px; bottom: 0; right: 0; left: auto; width: 520px;
          border-left: 1px solid var(--line); transform: translateX(16px);
          transition: opacity .2s ease, transform .2s ease;
        }
        body.preview-open .preview-pane { transform: none; }
        .preview-back { display: none; }
        .preview-stage { background: #e7e5df; padding: 16px; }
        .preview-pane[data-device="phone"] .preview-stage { align-items: flex-start; }
        .preview-pane[data-device="phone"] #preview-frame {
          width: 390px; max-width: 100%; border-radius: 14px;
          box-shadow: 0 1px 2px rgba(40,32,20,.08);
        }
        .preview-pane[data-device="desktop"] #preview-frame { width: 100%; }
      }

      @media (prefers-reduced-motion: reduce) {
        .preview-pane, body { transition: none; }
      }

      .member .va, .member .rm { white-space: nowrap; }

      /* ============================================================
         DENSITY / CONSOLIDATION + EDITOR ACTION BAR
         ============================================================ */

      /* ---- Row overflow menu (dashboard event actions) ---- */
      .rowmenu { position: relative; display: inline-flex; }
      .rowmenu > summary { list-style: none; cursor: pointer; margin: 0; }
      .rowmenu > summary::-webkit-details-marker { display: none; }
      .rowmenu[open] > summary { border-color: var(--muted); color: var(--ink); background: var(--rail-active); }
      .rowmenu-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50;
        background: var(--surface); border: 1px solid var(--line); border-radius: 13px;
        box-shadow: 0 10px 34px rgba(40,32,20,.13); padding: 6px; min-width: 204px;
        display: flex; flex-direction: column; gap: 1px; }
      .rowmenu-pop a, .rowmenu-pop button { display: flex; align-items: center; gap: 11px; width: 100%;
        min-height: 44px; text-align: left; background: none; border: 0; font: inherit; font-weight: 600;
        font-size: 14px; color: var(--ink); padding: 0 12px; border-radius: 9px; cursor: pointer; }
      .rowmenu-pop a:hover, .rowmenu-pop button:hover { background: var(--rail-active); }
      .rowmenu-pop a.disabled { color: var(--muted); pointer-events: none; }
      .rowmenu-pop form { margin: 0; }
      .rowmenu-pop .danger { color: var(--destructive); }
      .rowmenu-pop .danger:hover { background: #f8ece6; }
      .rowmenu-pop .sep { height: 1px; background: var(--hair); margin: 5px 6px; }
      .rowmenu-pop .ico { width: 17px; text-align: center; opacity: .65; flex: 0 0 auto; }
      .row-actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }

      /* ---- Form footer publish (editor, all widths) ---- */
      .form-foot { display: flex; align-items: center; gap: 14px; margin-top: 4px; padding: 4px 2px 0; }
      .form-foot .btn-primary { min-height: 46px; padding: 0 26px; font-size: 15px; }
      .form-foot .helper { margin: 0; }

      /* ---- Editor: static header that scrolls away + bottom publish bar (mobile) ---- */
      .editor-actionbar { display: none; align-items: center; gap: 12px;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
        padding: 11px 16px calc(11px + env(safe-area-inset-bottom));
        background: var(--surface); border-top: 1px solid var(--line);
        box-shadow: 0 -6px 22px rgba(40,32,20,.09); }
      .editor-actionbar .saveind { margin-right: auto; }   /* save status on the left */
      .editor-actionbar .preview-toggle { flex: 0 0 auto; }
      .editor-actionbar .btn-primary { flex: 0 0 auto; min-height: 46px; padding: 0 24px; font-size: 15px; }
      @media (max-width: 760px) {
        /* List-page headers (with the hamburger) auto-hide on scroll-down. The editor
           header is plain-static so it scrolls away naturally and only returns at the
           very top — so the header Publish and the footer Publish are never both on
           screen at once. NB: no `will-change: transform` here — it (like an applied
           transform) makes the header a containing block for `position: fixed`
           descendants, which would clip the slide-out drawer (it lives inside .topbar
           for the pure-CSS ~ toggle) to the header's height. The transition alone
           animates fine. While the drawer is open we also neutralise the auto-hide
           transform, so the open drawer is never contained. */
        .topbar:has(.hamburger) { transition: transform .26s ease; }
        body.hdr-hidden .topbar:has(.hamburger) { transform: translateY(-100%); }
        .topbar:has(.navdrawer-toggle:checked) { transform: none !important; }
        .topbar:not(:has(.hamburger)) { position: static; }

        /* Footer Publish appears only once you've scrolled past the header. */
        body.past-top .editor-actionbar { display: flex; }
        .shell { padding-bottom: 24px; }
        body.past-top .shell { padding-bottom: 96px; }
        .form-foot { display: none; }   /* the bottom bar / header carry Publish on mobile */
        /* Save status + Preview move into the bottom action bar on mobile, off the cramped header. */
        .topbar .saveind, .topbar .preview-toggle { display: none; }

        /* Orders -> compact receipt cards (labels are self-evident) */
        table.orders-stack tr { display: grid; grid-template-columns: 1fr auto;
          align-items: baseline; column-gap: 14px; row-gap: 5px; }
        table.orders-stack td { display: block; padding: 0 !important; border: 0 !important;
          text-align: left; flex: none; }
        table.orders-stack td::before { display: none !important; }
        table.orders-stack td:nth-child(1) { grid-column: 1 / -1; padding-bottom: 9px !important;
          margin-bottom: 2px; border-bottom: 1px solid var(--hair) !important; }
        table.orders-stack td:nth-child(2) { grid-column: 1; grid-row: 2; }
        table.orders-stack td:nth-child(4) { grid-column: 2; grid-row: 2; justify-self: end;
          text-align: right; font-weight: 700; font-size: 15px; }
        table.orders-stack td:nth-child(5) { grid-column: 1; grid-row: 3; color: var(--muted); font-size: 13px; }
        table.orders-stack td:nth-child(3) { grid-column: 2; grid-row: 3; justify-self: end; text-align: right; }

        /* Order detail -> flat line items (no card-in-card) */
        table.lineitems tr { border: 0 !important; border-radius: 0 !important; background: none !important;
          box-shadow: none !important; padding: 13px 0 !important; margin: 0 !important;
          border-bottom: 1px solid var(--hair) !important; }
        table.lineitems tr:last-child { border-bottom: 0 !important; padding-bottom: 0 !important; }
        table.lineitems td:first-child { border-bottom: 0 !important; padding-bottom: 2px !important;
          margin-bottom: 2px !important; font-weight: 700; }
      }