/* ZedTravel Frontend extensions
   Surfaces the admin's design system doesn't cover: DataTables, Leaflet,
   multi-step trip modals, status badges, and the standalone auth shell.
   Loaded after styles.css so it inherits all --zt-* tokens. */

/* ─── DataTables (Bootstrap 5 plugin) ──────────────────────────────────── */
  body.zt-shell .dataTables_wrapper {
    color: var(--zt-ink);
    font-family: var(--zt-font-body);
  }
  body.zt-shell .dataTables_wrapper .dataTables_length,
  body.zt-shell .dataTables_wrapper .dataTables_filter,
  body.zt-shell .dataTables_wrapper .dataTables_info,
  body.zt-shell .dataTables_wrapper .dataTables_paginate {
    color: var(--zt-ink-muted);
    font-size: var(--zt-fs-sm);
    padding: var(--zt-3) 0;
  }
  body.zt-shell .dataTables_wrapper .dataTables_filter input,
  body.zt-shell .dataTables_wrapper .dataTables_length select {
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--zt-hairline);
    background: var(--zt-bone-raised);
    color: var(--zt-ink);
    padding: 0 var(--zt-3);
    font: inherit;
    margin-left: var(--zt-2);
  }
  body.zt-shell .dataTables_wrapper .dataTables_filter input:focus,
  body.zt-shell .dataTables_wrapper .dataTables_length select:focus {
    outline: none;
    border-color: var(--zt-accent);
    box-shadow: 0 0 0 3px var(--zt-accent-soft);
  }
  body.zt-shell .dataTables_wrapper .dataTables_paginate .paginate_button {
    border: 1px solid var(--zt-hairline) !important;
    background: var(--zt-bone) !important;
    color: var(--zt-ink) !important;
    border-radius: 8px !important;
    padding: 4px 10px !important;
    margin-left: 4px !important;
    font-family: var(--zt-font-mono);
    font-size: var(--zt-fs-xs);
    transition: background var(--zt-dur) var(--zt-ease), border-color var(--zt-dur) var(--zt-ease);
  }
  body.zt-shell .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--zt-bone-raised) !important;
    border-color: var(--zt-hairline-strong) !important;
    color: var(--zt-ink) !important;
  }
  body.zt-shell .dataTables_wrapper .dataTables_paginate .paginate_button.current,
  body.zt-shell .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--zt-ink) !important;
    border-color: var(--zt-ink) !important;
    color: var(--zt-bone) !important;
  }
  body.zt-shell .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
  body.zt-shell .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: var(--zt-ink-soft) !important;
    background: var(--zt-bone) !important;
    border-color: var(--zt-hairline) !important;
    opacity: 0.6;
  }
  /* Bootstrap5-DataTables pagination uses .pagination .page-link / .page-item.active */
  body.zt-shell .dataTables_wrapper .pagination {
    gap: 4px;
    margin: 0;
  }
  body.zt-shell .dataTables_wrapper .pagination .page-link {
    background: var(--zt-bone);
    color: var(--zt-ink);
    border: 1px solid var(--zt-hairline);
    border-radius: 8px !important;
    padding: 4px 10px;
    font-family: var(--zt-font-mono);
    font-size: var(--zt-fs-xs);
    transition: background var(--zt-dur) var(--zt-ease), border-color var(--zt-dur) var(--zt-ease);
  }
  body.zt-shell .dataTables_wrapper .pagination .page-link:hover {
    background: var(--zt-bone-raised);
    border-color: var(--zt-hairline-strong);
    color: var(--zt-ink);
  }
  body.zt-shell .dataTables_wrapper .pagination .page-item.active .page-link {
    background: var(--zt-ink);
    border-color: var(--zt-ink);
    color: var(--zt-bone);
  }
  body.zt-shell .dataTables_wrapper .pagination .page-item.disabled .page-link {
    background: var(--zt-bone);
    color: var(--zt-ink-soft);
    border-color: var(--zt-hairline);
    opacity: 0.6;
  }
  body.zt-shell table.dataTable {
    border-collapse: separate !important;
    border-spacing: 0;
  }
  body.zt-shell table.dataTable thead th {
    font-family: var(--zt-font-mono) !important;
    font-size: var(--zt-fs-xs) !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--zt-ink-soft) !important;
    border-bottom: 1px solid var(--zt-hairline-strong) !important;
    background: transparent !important;
  }
  body.zt-shell table.dataTable tbody td {
    font-variant-numeric: tabular-nums;
    border-bottom-color: var(--zt-hairline) !important;
  }
  body.zt-shell table.dataTable tbody tr:hover > td {
    background: var(--zt-bone-raised) !important;
  }
  body.zt-shell table.dataTable.table-striped > tbody > tr:nth-of-type(odd) > * {
    background: var(--zt-bone-raised);
  }
  /* DataTables surface — wrap any table id in a tile-like surface */
  body.zt-shell .zt-table-surface {
    background: var(--zt-bone);
    border: 1px solid var(--zt-hairline);
    border-radius: 14px;
    padding: var(--zt-5);
  }

/* ─── Leaflet ──────────────────────────────────────────────────────────── */
  body.zt-shell .leaflet-container {
    border: 1px solid var(--zt-hairline);
    border-radius: 12px;
    font-family: var(--zt-font-body);
    background: var(--zt-bone-sunk);
  }
  body.zt-shell .leaflet-control-zoom a {
    background: var(--zt-bone) !important;
    color: var(--zt-ink) !important;
    border: 1px solid var(--zt-hairline) !important;
  }
  body.zt-shell .leaflet-control-zoom a:hover {
    background: var(--zt-bone-raised) !important;
  }
  body.zt-shell .leaflet-popup-content-wrapper,
  body.zt-shell .leaflet-popup-tip {
    background: var(--zt-bone);
    color: var(--zt-ink);
    border: 1px solid var(--zt-hairline);
    border-radius: 10px;
    box-shadow: 0 6px 24px -10px oklch(0.22 0.02 60 / 0.18);
  }

/* ─── multi-step trip / station forms ──────────────────────────────────── */
  body.zt-shell .zt-stepper {
    display: flex;
    gap: var(--zt-2);
    margin-bottom: var(--zt-5);
    counter-reset: step;
  }
  body.zt-shell .zt-step {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--zt-2);
    padding: var(--zt-2) var(--zt-3);
    border: 1px solid var(--zt-hairline);
    border-radius: 10px;
    background: var(--zt-bone);
    font-size: var(--zt-fs-sm);
    color: var(--zt-ink-muted);
  }
  body.zt-shell .zt-step::before {
    counter-increment: step;
    content: counter(step);
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--zt-bone-raised);
    color: var(--zt-ink-soft);
    display: grid; place-items: center;
    font-family: var(--zt-font-mono);
    font-size: var(--zt-fs-xs);
    font-weight: 500;
    flex-shrink: 0;
  }
  body.zt-shell .zt-step.is-active {
    border-color: var(--zt-accent);
    background: var(--zt-accent-soft);
    color: var(--zt-accent-ink);
  }
  body.zt-shell .zt-step.is-active::before {
    background: var(--zt-accent);
    color: var(--zt-bone);
  }
  body.zt-shell .zt-step.is-done {
    color: var(--zt-ink);
  }
  body.zt-shell .zt-step.is-done::before {
    background: var(--zt-ink);
    color: var(--zt-bone);
    content: '✓';
  }
  body.zt-shell .zt-step-actions {
    display: flex;
    justify-content: space-between;
    gap: var(--zt-2);
    margin-top: var(--zt-5);
  }

/* ─── status badges ────────────────────────────────────────────────────── */
  body.zt-shell .zt-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    font-family: var(--zt-font-mono);
    font-size: var(--zt-fs-xs);
    font-weight: 500;
    letter-spacing: 0.04em;
    background: var(--zt-bone-raised);
    color: var(--zt-ink);
    border: 1px solid var(--zt-hairline);
  }
  body.zt-shell .zt-badge::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--zt-ink-soft);
  }
  body.zt-shell .zt-badge--ok {
    background: var(--zt-accent-soft);
    color: var(--zt-accent-ink);
    border-color: transparent;
  }
  body.zt-shell .zt-badge--ok::before { background: var(--zt-accent); }
  body.zt-shell .zt-badge--warn {
    background: oklch(0.95 0.06 80);
    color: oklch(0.32 0.07 60);
    border-color: transparent;
  }
  body.zt-shell .zt-badge--warn::before { background: var(--zt-ochre); }
  body.zt-shell .zt-badge--danger {
    background: oklch(0.95 0.04 25);
    color: oklch(0.4 0.13 25);
    border-color: transparent;
  }
  body.zt-shell .zt-badge--danger::before { background: oklch(0.6 0.18 25); }

/* ─── modal action toolbars ────────────────────────────────────────────── */
  body.zt-shell .modal-header {
    border-bottom: 1px solid var(--zt-hairline);
    padding: var(--zt-4) var(--zt-5);
  }
  body.zt-shell .modal-title {
    font-family: var(--zt-font-display);
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--zt-ink);
  }
  body.zt-shell .modal-body {
    padding: var(--zt-5);
  }
  body.zt-shell .modal-footer {
    border-top: 1px solid var(--zt-hairline);
    padding: var(--zt-3) var(--zt-5);
    background: var(--zt-bone);
  }
  body.zt-shell .form-label {
    font-size: var(--zt-fs-sm);
    font-weight: 500;
    color: var(--zt-ink);
    margin-bottom: 6px;
  }
  body.zt-shell .form-check-input:checked {
    background-color: var(--zt-accent);
    border-color: var(--zt-accent);
  }
  body.zt-shell .btn-success {
    background: var(--zt-accent-ink);
    border-color: var(--zt-accent-ink);
    color: var(--zt-bone);
    border-radius: 10px;
    font-weight: 500;
  }
  body.zt-shell .btn-success:hover,
  body.zt-shell .btn-success:focus {
    background: var(--zt-accent);
    border-color: var(--zt-accent);
  }
  body.zt-shell .btn-light {
    background: var(--zt-bone-raised);
    border: 1px solid var(--zt-hairline);
    color: var(--zt-ink);
    border-radius: 10px;
    font-weight: 500;
  }
  body.zt-shell .btn-light:hover {
    background: var(--zt-bone-sunk);
    border-color: var(--zt-hairline-strong);
  }
  body.zt-shell .btn-outline-secondary {
    color: var(--zt-ink);
    border-color: var(--zt-hairline);
  }
  body.zt-shell .btn-outline-secondary:hover {
    background: var(--zt-bone-raised);
    color: var(--zt-ink);
    border-color: var(--zt-hairline-strong);
  }
  body.zt-shell .btn-group .btn {
    border-radius: 8px;
  }
  body.zt-shell .btn-group .btn + .btn {
    margin-left: var(--zt-1);
  }
  body.zt-shell .text-danger {
    color: oklch(0.5 0.16 25) !important;
  }
  body.zt-shell .text-muted {
    color: var(--zt-ink-muted) !important;
  }
  body.zt-shell .border-bottom {
    border-bottom: 1px solid var(--zt-hairline) !important;
  }
  body.zt-shell hr {
    border-color: var(--zt-hairline);
    opacity: 1;
  }
  body.zt-shell .invalid-feedback {
    color: oklch(0.5 0.16 25);
    font-size: var(--zt-fs-xs);
  }

/* ─── button text colour fix for <a class="zt-btn"> ─────────────────────
   styles.css has `body.zt-shell a { color: inherit }` (specificity 0,2,1)
   which beats `.zt-btn-primary` (0,1,0) and makes anchor-as-button text
   invisible against the dark fill. Restate the colors with extra
   specificity so links inherit correctly. */
  body.zt-shell a.zt-btn { color: var(--zt-ink); }
  body.zt-shell a.zt-btn-primary,
  body.zt-shell a.zt-btn.zt-btn-primary { color: var(--zt-bone); }

/* ─── full-width main: override Bootstrap .col-md-10 cap ─────────────────
   Every page wraps <main class="col-md-10 ... main-content">. Bootstrap's
   .col-md-10 forces width: 83.33% which leaves a dead strip on the right.
   styles.css already declares `width: calc(100% - var(--zt-rail-w)) !important`
   on .main-content, but the col-md-10 / col-lg-10 rules co-applied to the
   same element still trim flex-basis. Pin the size explicitly here. */
  body.zt-shell main.main-content {
    flex: 1 1 auto !important;
    max-width: none !important;
    width: calc(100% - var(--zt-rail-w)) !important;
  }
  @media (max-width: 767.98px) {
    body.zt-shell main.main-content {
      width: 100% !important;
    }
  }

/* ─── responsive page header (.zt-greeting) on inner pages ─────────────── */
  body.zt-shell .zt-greeting--inner {
    margin-bottom: var(--zt-5);
    padding-bottom: var(--zt-4);
    border-bottom: 1px solid var(--zt-hairline);
    align-items: center;
  }
  body.zt-shell .zt-greeting--inner .zt-greet-title {
    font-size: var(--zt-fs-2xl);
    max-width: none;
  }
  body.zt-shell .zt-greet-sub {
    margin-top: var(--zt-2);
    color: var(--zt-ink-muted);
    font-size: var(--zt-fs-sm);
  }

/* ─── Bus seating layout (renders inside layoutContainer) ──────────────── */
  body.zt-shell .bus-layout {
    border: 1px solid var(--zt-hairline) !important;
    background: var(--zt-bone-raised) !important;
    border-radius: 10px;
    padding: var(--zt-4) !important;
  }

/* ─── Bus seat editor (add_bus.html) ────────────────────────────────────
   Top-down bus view: driver/steering at the front, seat columns flowing
   back, optional aisles between columns. Editor controls (+/−, aisle
   toggle) sit inline so the structure self-explains. The HTML is
   generated by add_bus.js; we style the existing class names so the
   save logic (which queries .bus .column, .walkway-toggle.active, etc.)
   keeps working unchanged. */
  body.zt-shell .bus {
    --bus-seat-size: 38px;
    --bus-aisle-w: 14px;
    --bus-col-gap: 4px;
    --bus-controls-h: 60px;
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    background: var(--zt-bone);
    border: 1.5px solid var(--zt-hairline-strong);
    border-radius: 36px 36px 18px 18px;
    padding: 14px 18px 22px;
    position: relative;
    box-shadow:
      0 1px 0 oklch(1 0 0 / 0.5) inset,
      0 12px 28px -18px oklch(0.22 0.02 60 / 0.18);
  }
  /* The "front" (driver area) — pulled to top via flex order. */
  body.zt-shell .bus .bus-front {
    order: -1;
    width: auto !important;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 4px 12px 14px;
    margin-bottom: 14px;
    border-bottom: 1px dashed var(--zt-hairline-strong);
    position: relative;
  }
  body.zt-shell .bus .bus-front::after {
    content: 'driver';
    font-family: var(--zt-font-mono);
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--zt-ink-soft);
  }
  body.zt-shell .bus .bus-front img {
    filter: invert(0.55) sepia(0.15);
    opacity: 0.75;
  }
  /* Seat columns sit side-by-side, each with its own +/− and seat stack. */
  body.zt-shell .bus .bus-body {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: var(--bus-col-gap);
  }
  body.zt-shell .bus .bus-body > .d-flex.flex-column {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px;
    position: relative;
  }
  /* + / − circular controls */
  body.zt-shell .bus .add-seat,
  body.zt-shell .bus .remove-seat {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
    border: 1px solid var(--zt-hairline);
    background: var(--zt-bone);
    transition:
      background 180ms var(--zt-ease),
      border-color 180ms var(--zt-ease),
      transform 120ms var(--zt-ease);
  }
  body.zt-shell .bus .add-seat .material-icons,
  body.zt-shell .bus .remove-seat .material-icons {
    font-size: 16px !important;
    color: var(--zt-ink-soft) !important;
  }
  body.zt-shell .bus .add-seat:hover {
    background: var(--zt-accent-soft);
    border-color: var(--zt-accent);
  }
  body.zt-shell .bus .add-seat:hover .material-icons {
    color: var(--zt-accent-ink) !important;
  }
  body.zt-shell .bus .remove-seat:hover {
    background: oklch(0.95 0.04 25);
    border-color: oklch(0.72 0.13 25);
  }
  body.zt-shell .bus .remove-seat:hover .material-icons {
    color: oklch(0.5 0.16 25) !important;
  }
  body.zt-shell .bus .add-seat:active,
  body.zt-shell .bus .remove-seat:active {
    transform: translateY(1px);
  }
  /* The vertical seat stack (one per column). */
  body.zt-shell .bus .column {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 7px 6px;
    background: var(--zt-bone-sunk);
    border-radius: 10px;
    margin-top: 4px;
  }
  body.zt-shell .bus .seat {
    width: var(--bus-seat-size);
    height: var(--bus-seat-size);
    border-radius: 9px;
    background: var(--zt-bone);
    border: 1px solid var(--zt-hairline-strong);
    display: grid;
    place-items: center;
    position: relative;
    transition: border-color 180ms var(--zt-ease), transform 120ms var(--zt-ease);
  }
  body.zt-shell .bus .seat:hover {
    border-color: var(--zt-accent);
  }
  /* The seat "cushion" — replaces the legacy blue square */
  body.zt-shell .bus .blue-square {
    width: 24px;
    height: 18px;
    background: var(--zt-accent);
    border-radius: 4px 4px 7px 7px;
    position: relative;
    box-shadow: inset 0 -2px 0 oklch(0.4 0.09 200 / 0.45);
  }
  body.zt-shell .bus .blue-square::before {
    /* Seat back — small extra bar above the cushion */
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 6px;
    background: var(--zt-accent);
    border-radius: 4px 4px 0 0;
    opacity: 0.55;
  }
  /* Aisle toggle — a vertical strip between columns. Stretches to the full
     body height so the aisle visually runs the length of the bus. */
  body.zt-shell .bus .walkway-toggle {
    align-self: stretch;
    width: var(--bus-aisle-w);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 6px;
    background: transparent;
    border: 1px dashed transparent;
    position: relative;
    transition:
      width 200ms var(--zt-ease),
      background 180ms var(--zt-ease),
      border-color 180ms var(--zt-ease);
    flex-shrink: 0;
  }
  body.zt-shell .bus .walkway-toggle .material-icons {
    font-size: 14px !important;
    color: var(--zt-ink-soft);
    transition: color 180ms;
  }
  body.zt-shell .bus .walkway-toggle:hover {
    background: var(--zt-bone-raised);
    border-color: var(--zt-hairline);
  }
  body.zt-shell .bus .walkway-toggle:hover .material-icons {
    color: var(--zt-ink);
  }
  /* Aisle ON: widens, paints a dashed center line, hides the toggle icon,
     surfaces an "aisle" label at the top. */
  body.zt-shell .bus .walkway-toggle.active {
    width: 26px;
    background: linear-gradient(
      to right,
      transparent 0%,
      var(--zt-accent-soft) 50%,
      transparent 100%
    );
    border: 0;
  }
  body.zt-shell .bus .walkway-toggle.active .material-icons {
    display: none;
  }
  body.zt-shell .bus .walkway-toggle.active::before {
    content: '';
    position: absolute;
    top: calc(var(--bus-controls-h) - 4px);
    bottom: 8px;
    left: 50%;
    width: 2px;
    background: repeating-linear-gradient(
      to bottom,
      var(--zt-accent) 0 5px,
      transparent 5px 10px
    );
    transform: translateX(-50%);
    opacity: 0.85;
    border-radius: 2px;
  }
  body.zt-shell .bus .walkway-toggle.active::after {
    content: 'aisle';
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--zt-font-mono);
    font-size: 8px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--zt-accent-ink);
    white-space: nowrap;
    background: var(--zt-bone);
    padding: 1px 4px;
    border-radius: 4px;
  }

/* ─── Saved layout viewer (view_buses.html → "Layout" modal) ────────────
   add_bus.js renders a similar tile grid. We restyle the .bus-layout it
   creates so saved layouts also look like a bus, not raw blue squares. */
  body.zt-shell .bus-layout {
    display: inline-block;
    background: var(--zt-bone) !important;
    border: 1.5px solid var(--zt-hairline-strong) !important;
    border-radius: 18px !important;
    padding: 16px 14px !important;
  }
  body.zt-shell .bus-layout > div {
    /* Each row from view_buses.html's renderer is a flex row with seat divs. */
    gap: 4px;
  }

/* ─── auth shell (signin / unauthorized) ───────────────────────────────── */
  body.zt-auth {
    margin: 0;
    min-height: 100vh;
    background:
      radial-gradient(circle at 15% 20%, var(--zt-accent-soft) 0%, transparent 45%),
      radial-gradient(circle at 85% 75%, oklch(0.78 0.13 80 / 0.10) 0%, transparent 45%),
      var(--zt-bone);
    font-family: var(--zt-font-body);
    color: var(--zt-ink);
    display: grid;
    place-items: center;
    padding: var(--zt-6);
    -webkit-font-smoothing: antialiased;
  }
  body.zt-auth * { box-sizing: border-box; }
  .zt-auth-card {
    width: 100%;
    max-width: 400px;
    background: var(--zt-bone);
    border: 1px solid var(--zt-hairline);
    border-radius: 18px;
    padding: var(--zt-7) var(--zt-6) var(--zt-6);
    box-shadow: 0 24px 64px -32px oklch(0.22 0.02 60 / 0.18);
  }
  .zt-auth-brand {
    display: flex;
    align-items: center;
    gap: var(--zt-3);
    margin-bottom: var(--zt-6);
  }
  .zt-auth-brand .zt-brand-mark {
    width: 32px; height: 32px;
    border-radius: 9px;
    background: var(--zt-ink);
    color: var(--zt-bone);
    display: grid; place-items: center;
    font-family: var(--zt-font-display);
    font-weight: 600;
    font-size: 16px;
    position: relative;
  }
  .zt-auth-brand .zt-brand-mark::after {
    content: '';
    position: absolute;
    top: -3px; right: -3px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--zt-ochre);
    border: 2px solid var(--zt-bone);
  }
  .zt-auth-brand .zt-brand-name {
    font-family: var(--zt-font-display);
    font-size: var(--zt-fs-lg);
    font-weight: 500;
    letter-spacing: -0.025em;
  }
  .zt-auth-eyebrow {
    font-family: var(--zt-font-mono);
    font-size: var(--zt-fs-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--zt-ink-soft);
    margin-bottom: var(--zt-2);
  }
  .zt-auth-title {
    font-family: var(--zt-font-display);
    font-weight: 500;
    font-size: var(--zt-fs-xl);
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--zt-ink);
    margin: 0 0 var(--zt-2);
  }
  .zt-auth-sub {
    color: var(--zt-ink-muted);
    font-size: var(--zt-fs-sm);
    margin: 0 0 var(--zt-6);
  }
  .zt-auth-field {
    margin-bottom: var(--zt-4);
  }
  .zt-auth-field label {
    display: block;
    font-size: var(--zt-fs-sm);
    font-weight: 500;
    color: var(--zt-ink);
    margin-bottom: 6px;
  }
  .zt-auth-field input {
    width: 100%;
    height: 42px;
    padding: 0 var(--zt-3);
    border: 1px solid var(--zt-hairline);
    border-radius: 10px;
    background: var(--zt-bone-raised);
    color: var(--zt-ink);
    font: inherit;
    transition: border-color var(--zt-dur) var(--zt-ease), background var(--zt-dur) var(--zt-ease), box-shadow var(--zt-dur) var(--zt-ease);
  }
  .zt-auth-field input:focus {
    outline: none;
    border-color: var(--zt-accent);
    background: var(--zt-bone);
    box-shadow: 0 0 0 3px var(--zt-accent-soft);
  }
  .zt-auth-submit {
    width: 100%;
    height: 44px;
    border: 0;
    border-radius: 10px;
    background: var(--zt-ink);
    color: var(--zt-bone);
    font: 500 var(--zt-fs-md) var(--zt-font-body);
    cursor: pointer;
    transition: background var(--zt-dur) var(--zt-ease), transform 120ms var(--zt-ease);
    margin-top: var(--zt-2);
  }
  .zt-auth-submit:hover { background: var(--zt-accent-ink); }
  .zt-auth-submit:active { transform: translateY(1px); }
  .zt-auth-error {
    background: oklch(0.95 0.04 25);
    color: oklch(0.4 0.13 25);
    border: 1px solid oklch(0.85 0.08 25);
    border-radius: 10px;
    padding: var(--zt-2) var(--zt-3);
    font-size: var(--zt-fs-sm);
    margin-bottom: var(--zt-4);
  }
  .zt-auth-success {
    background: var(--zt-accent-soft);
    color: var(--zt-accent-ink);
    border: 1px solid var(--zt-accent);
    border-radius: 10px;
    padding: var(--zt-2) var(--zt-3);
    font-size: var(--zt-fs-sm);
    margin-bottom: var(--zt-4);
  }
  .zt-auth-link {
    display: inline-block;
    margin-top: var(--zt-3);
    color: var(--zt-accent-ink);
    text-decoration: none;
    font-size: var(--zt-fs-sm);
    font-weight: 500;
    transition: color var(--zt-dur) var(--zt-ease);
  }
  .zt-auth-link:hover { color: var(--zt-ink); text-decoration: underline; }
  .zt-auth-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--zt-2);
  }
  .zt-auth-foot {
    margin-top: var(--zt-5);
    text-align: center;
    color: var(--zt-ink-soft);
    font-size: var(--zt-fs-xs);
    font-family: var(--zt-font-mono);
    letter-spacing: 0.04em;
  }