[hidden] { display: none !important; }

    body {
      min-height: 100vh;
      height: auto;
      overflow: auto;
      background:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--card) 48%, transparent), transparent 300px),
        linear-gradient(180deg, var(--paper-2), var(--paper) 260px);
    }

    .admin-shell {
      width: min(1440px, calc(100% - 36px));
      margin: 0 auto;
      padding: 28px 0 46px;
    }

    .admin-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: end;
      gap: 18px;
      padding-bottom: 20px;
      border-bottom: 1px solid color-mix(in srgb, var(--line) 74%, transparent);
    }

    .kicker {
      color: var(--clay-deep);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .11em;
      text-transform: uppercase;
    }

    h1, h2, h3 {
      margin: 0;
      font-family: 'Inter', 'Noto Sans SC', sans-serif;
      font-weight: 560;
      letter-spacing: 0;
    }

    h1 {
      margin-top: 8px;
      font-size: clamp(26px, 4vw, 34px);
      line-height: 1.02;
    }

    .admin-head p {
      margin: 10px 0 0;
      color: var(--ink-3);
      font-size: 13px;
      line-height: 1.75;
    }

    .top-actions,
    .row-actions,
    .form-row,
    .table-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .button,
    .seg button,
    .theme-switch,
    input,
    select,
    textarea {
      font: inherit;
    }

    .button {
      min-height: 36px;
      border: 1px solid color-mix(in srgb, var(--line-2) 82%, transparent);
      border-radius: 999px;
      background: color-mix(in srgb, var(--card) 76%, transparent);
      color: var(--ink-2);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 0 14px;
      text-decoration: none;
      font-size: 13px;
      line-height: 1;
      box-shadow: var(--shadow-sm);
      transition: transform .28s var(--spring), color .28s var(--ease), background-color .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease);
    }

    .button:hover {
      transform: translateY(-1px);
      color: var(--clay-deep);
      border-color: var(--clay-line);
      background: color-mix(in srgb, var(--clay-soft) 62%, var(--card));
    }

    .button.primary {
      border-color: var(--clay-line);
      background: var(--clay);
      color: var(--clay-ink);
    }

    .button.danger {
      border-color: color-mix(in srgb, var(--err) 45%, transparent);
      background: var(--err);
      color: #fff;
    }

    .button.mini {
      min-height: 28px;
      padding: 0 10px;
      font-size: 11.5px;
      box-shadow: none;
    }

    .theme-switch {
      width: 54px;
      height: 30px;
      padding: 0;
      border: 1px solid color-mix(in srgb, var(--line-2) 82%, transparent);
      border-radius: 999px;
      background: color-mix(in srgb, var(--card) 82%, transparent);
      color: var(--ink-2);
      cursor: pointer;
      display: inline-grid;
      place-items: center;
      box-shadow: inset 0 1px 0 color-mix(in srgb, var(--card) 76%, transparent), var(--shadow-sm);
      transition: background-color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--spring);
    }

    .theme-switch:hover {
      transform: translateY(-1px);
      border-color: color-mix(in srgb, var(--clay) 44%, var(--line-2));
    }

    .theme-switch-track {
      position: relative;
      width: 46px;
      height: 22px;
      display: block;
    }

    .theme-switch-thumb {
      position: absolute;
      left: 0;
      top: 0;
      width: 22px;
      height: 22px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      background: var(--paper);
      color: var(--clay-deep);
      box-shadow: 0 2px 8px rgba(60, 50, 38, .14);
      transition: transform .45s var(--spring), background-color .35s var(--ease), color .35s var(--ease);
    }

    .theme-switch svg {
      grid-area: 1 / 1;
      width: 13px;
      height: 13px;
      transition: opacity .25s var(--ease), transform .35s var(--spring);
    }

    .theme-switch .moon {
      opacity: 0;
      transform: rotate(-25deg) scale(.78);
    }

    .theme-switch[data-theme="dark"] .theme-switch-thumb {
      transform: translateX(24px);
      background: color-mix(in srgb, var(--card) 88%, #000);
      color: var(--clay);
    }

    .theme-switch[data-theme="dark"] .sun {
      opacity: 0;
      transform: rotate(35deg) scale(.78);
    }

    .theme-switch[data-theme="dark"] .moon {
      opacity: 1;
      transform: rotate(0) scale(1);
    }

    .seg {
      --count: 2;
      --active-offset: 0px;
      --seg-min: 98px;
      --seg-thumb: calc(50% - 6px);
      position: relative;
      display: inline-grid;
      grid-template-columns: repeat(var(--count), minmax(var(--seg-min), 1fr));
      gap: 4px;
      padding: 4px;
      border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
      border-radius: 999px;
      background: color-mix(in srgb, var(--card-2) 72%, transparent);
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--card) 42%, transparent);
      overflow-x: auto;
      overflow-y: hidden;
      isolation: isolate;
      max-width: 100%;
      scrollbar-width: thin;
      scrollbar-color: color-mix(in srgb, var(--clay) 45%, transparent) transparent;
      overscroll-behavior-x: contain;
      touch-action: pan-x;
      -webkit-overflow-scrolling: touch;
    }

    .seg::-webkit-scrollbar { height: 4px; }
    .seg::-webkit-scrollbar-track { background: transparent; }
    .seg::-webkit-scrollbar-thumb {
      border-radius: 999px;
      background: color-mix(in srgb, var(--clay) 45%, transparent);
    }

    .seg::before {
      content: '';
      position: absolute;
      z-index: 0;
      top: 4px;
      bottom: 4px;
      left: 4px;
      width: var(--seg-thumb);
      border: 1px solid color-mix(in srgb, var(--clay-line) 72%, transparent);
      border-radius: inherit;
      background:
        linear-gradient(180deg, color-mix(in srgb, var(--card) 94%, transparent), color-mix(in srgb, var(--clay-soft) 58%, var(--card))),
        var(--card);
      box-shadow: var(--shadow-sm);
      transform: translateX(var(--active-offset));
      transition: transform .42s var(--spring), background-color .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease);
    }

    .seg button {
      position: relative;
      z-index: 1;
      min-height: 32px;
      border: 0;
      border-radius: 999px;
      background: transparent;
      color: var(--ink-3);
      cursor: pointer;
      padding: 0 14px;
      font-size: 12px;
      font-weight: 700;
      transition: transform .32s var(--spring), color .28s var(--ease), background-color .28s var(--ease), box-shadow .28s var(--ease);
    }

    .seg button:hover {
      color: var(--clay-deep);
      background: color-mix(in srgb, var(--clay-soft) 44%, transparent);
    }

    .seg button.on {
      color: var(--clay-deep);
      transform: translateY(-1px);
    }

    #imageTabSeg {
      --count: 7;
      --seg-min: 74px;
      --seg-thumb: calc(14.285714% - 4.571429px);
    }

    .control-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin: 18px 0;
      flex-wrap: wrap;
    }

    .login-panel {
      width: min(430px, 100%);
      margin: 78px auto 0;
      padding: 26px;
      border: 1px solid color-mix(in srgb, var(--line-2) 82%, transparent);
      border-radius: 22px;
      background:
        linear-gradient(180deg, color-mix(in srgb, var(--card) 94%, transparent), color-mix(in srgb, var(--paper-2) 76%, transparent)),
        var(--card);
      box-shadow: var(--shadow-lg);
    }

    .login-panel p,
    .fine-note,
    .muted {
      color: var(--ink-3);
      font-size: 12px;
      line-height: 1.65;
    }

    .login-panel form,
    .stack {
      display: grid;
      gap: 12px;
    }

    input,
    select,
    textarea {
      min-height: 40px;
      border: 1px solid color-mix(in srgb, var(--line-2) 82%, transparent);
      border-radius: 10px;
      background: color-mix(in srgb, var(--card) 80%, transparent);
      color: var(--ink);
      padding: 8px 12px;
      outline: none;
      transition: border-color .28s var(--ease), box-shadow .28s var(--ease), background-color .28s var(--ease);
    }

    input:focus,
    select:focus,
    textarea:focus {
      border-color: var(--clay);
      box-shadow: 0 0 0 3px var(--clay-soft);
    }

    .error,
    .notice {
      min-height: 20px;
      color: var(--err);
      font-size: 12px;
      line-height: 1.55;
    }

    .notice.ok {
      color: var(--ok);
    }

    .metric-band {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      margin: 0 0 20px;
      gap: 12px;
      border: 0;
      background: transparent;
    }

    .metric {
      min-width: 0;
      min-height: 88px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--card);
      display: grid;
      align-content: space-between;
      gap: 8px;
    }

    .metric:nth-child(4n),
    .metric:last-child {
      border-right: 1px solid var(--line);
    }

    .metric:nth-child(n + 5) {
      border-top: 1px solid var(--line);
    }

    .metric span {
      color: var(--ink-3);
      font-size: 11.5px;
    }

    .metric strong {
      color: var(--ink);
      font-size: clamp(20px, 2.45vw, 28px);
      font-weight: 680;
      line-height: 1;
      font-variant-numeric: tabular-nums;
      overflow-wrap: anywhere;
    }

    .admin-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
      align-items: start;
    }

    .admin-panel {
      min-width: 0;
      border-top: 1px solid color-mix(in srgb, var(--line) 74%, transparent);
      background: linear-gradient(180deg, color-mix(in srgb, var(--card) 36%, transparent), transparent 170px);
    }

    .panel-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      padding: 14px 0 10px;
    }

    .panel-head h2 {
      font-size: 21px;
    }

    .trend-list {
      display: grid;
      gap: 9px;
      padding-bottom: 6px;
    }

    .trend-row {
      display: grid;
      grid-template-columns: 88px minmax(0, 1fr) 78px;
      gap: 10px;
      align-items: center;
      color: var(--ink-2);
      font-size: 12.5px;
    }

    .trend-bar {
      height: 8px;
      overflow: hidden;
      border-radius: 999px;
      background: color-mix(in srgb, var(--line) 72%, transparent);
    }

    .trend-bar i {
      display: block;
      width: var(--w, 0%);
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--clay), color-mix(in srgb, var(--clay) 42%, var(--ok)));
    }

    .table-section {
      display: grid;
      gap: 10px;
      margin-top: 18px;
    }

    .table-wrap {
      overflow: auto;
      border: 1px solid var(--line);
      border-radius: 12px;
      overflow-anchor: none;
      scrollbar-width: thin;
      scrollbar-color: color-mix(in srgb, var(--clay) 48%, var(--line)) transparent;
    }

    .table-window {
      max-height: 430px;
      background: var(--card);
    }

    .table-window.compact {
      max-height: 300px;
    }

    .table-wrap::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }

    .table-wrap::-webkit-scrollbar-thumb {
      border-radius: 999px;
      background: color-mix(in srgb, var(--clay) 44%, var(--line));
    }

    table {
      width: 100%;
      min-width: 720px;
      border-collapse: collapse;
    }

    th,
    td {
      padding: 9px 10px;
      text-align: left;
      border-bottom: 1px solid color-mix(in srgb, var(--line) 54%, transparent);
      color: var(--ink-2);
      font-size: 12.5px;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
      vertical-align: middle;
    }

    th {
      position: sticky;
      top: 0;
      z-index: 2;
      color: var(--ink-3);
      font-weight: 700;
      background: color-mix(in srgb, var(--paper) 88%, var(--card));
    }

    tr:last-child td {
      border-bottom: 0;
    }

    .status {
      display: inline-flex;
      align-items: center;
      min-height: 21px;
      padding: 0 8px;
      border: 1px solid color-mix(in srgb, var(--line-2) 70%, transparent);
      border-radius: 999px;
      color: var(--ink-2);
      background: color-mix(in srgb, var(--card) 58%, transparent);
    }

    .status.ok,
    .status.success,
    .status.completed,
    .status.paid,
    .status.account,
    .status.unused,
    .status.redeemed {
      color: var(--ok);
      border-color: color-mix(in srgb, var(--ok) 34%, var(--line));
    }

    .status.redeemed {
      color: var(--clay-deep);
      border-color: color-mix(in srgb, var(--clay) 38%, var(--line));
      background: color-mix(in srgb, var(--clay-soft) 68%, transparent);
    }

    .status.pending,
    .status.queued,
    .status.processing,
    .status.optimizing,
    .status.blocked {
      color: var(--warn);
      border-color: color-mix(in srgb, var(--warn) 34%, var(--line));
    }

    .status.cancelled,
    .status.expired,
    .status.failed {
      color: var(--err);
      border-color: color-mix(in srgb, var(--err) 34%, var(--line));
    }

    .status.byok {
      color: var(--clay-deep);
      border-color: color-mix(in srgb, var(--clay) 34%, var(--line));
      background: color-mix(in srgb, var(--clay-soft) 66%, transparent);
    }

    .media-params {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      min-width: 190px;
      max-width: 340px;
      white-space: normal;
      line-height: 1.45;
    }

    .media-param {
      display: inline-flex;
      align-items: baseline;
      gap: 4px;
      padding: 3px 7px;
      border: 1px solid color-mix(in srgb, var(--line-2) 72%, transparent);
      border-radius: 6px;
      background: color-mix(in srgb, var(--card) 72%, transparent);
      color: var(--ink-2);
      font-size: 11px;
      white-space: nowrap;
    }

    .media-param strong {
      color: var(--ink-3);
      font-weight: 600;
    }

    .alt-key {
      font-family: ui-monospace, "Cascadia Mono", "SFMono-Regular", monospace;
      font-size: 12px;
      word-break: break-all;
    }

    .alt-user {
      padding: 3px 0;
      border-bottom: 1px dashed color-mix(in srgb, var(--line-2) 60%, transparent);
      font-size: 12px;
      line-height: 1.55;
    }

    .alt-user:last-child {
      border-bottom: 0;
    }

    .alt-user .alt-email {
      font-weight: 600;
      color: var(--ink);
    }

    .alt-user .alt-dim {
      color: var(--ink-2);
    }

    .drawer {
      position: fixed;
      inset: 0;
      z-index: 8000;
      display: none;
      place-items: center;
      padding: 18px;
      background: color-mix(in srgb, var(--paper) 62%, transparent);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }

    .drawer.open {
      display: grid;
      animation: reveal .24s var(--ease) both;
    }

    .drawer-card {
      width: min(420px, 100%);
      border: 1px solid color-mix(in srgb, var(--line-2) 82%, transparent);
      border-radius: 22px;
      background: var(--card);
      box-shadow: var(--shadow-lg);
      padding: 24px;
    }

    [data-theme="dark"] body {
      background:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--card) 44%, transparent), transparent 300px),
        linear-gradient(180deg, var(--paper-2), var(--paper) 260px);
    }

    [data-theme="dark"] .button,
    [data-theme="dark"] .theme-switch,
    [data-theme="dark"] input,
    [data-theme="dark"] select,
    [data-theme="dark"] textarea,
    [data-theme="dark"] .login-panel,
    [data-theme="dark"] .drawer-card {
      background: color-mix(in srgb, var(--card) 82%, #000 8%);
      border-color: var(--line-2);
    }

    [data-theme="dark"] .button.primary {
      color: var(--clay-ink);
      border-color: color-mix(in srgb, var(--clay) 64%, var(--line-2));
      background: linear-gradient(180deg, color-mix(in srgb, var(--clay) 92%, #fff 6%), color-mix(in srgb, var(--clay) 88%, #000 8%));
      box-shadow: 0 8px 24px color-mix(in srgb, var(--clay) 18%, transparent);
    }

    [data-theme="dark"] .button.primary:hover {
      color: var(--clay-ink);
      background: linear-gradient(180deg, color-mix(in srgb, var(--clay) 96%, #fff 8%), color-mix(in srgb, var(--clay) 92%, #000 7%));
    }

    [data-theme="dark"] .button.danger {
      color: #fff;
      background: color-mix(in srgb, var(--err) 88%, #000 10%);
      border-color: color-mix(in srgb, var(--err) 58%, var(--line-2));
    }

    [data-theme="dark"] .seg {
      background: color-mix(in srgb, var(--card-2) 82%, #000 8%);
      border-color: var(--line-2);
    }

    [data-theme="dark"] .seg::before {
      border-color: color-mix(in srgb, var(--clay) 56%, var(--line-2));
      background:
        linear-gradient(180deg, color-mix(in srgb, var(--card) 88%, #000 5%), color-mix(in srgb, var(--clay-soft) 46%, var(--card))),
        var(--card);
      box-shadow: 0 8px 24px color-mix(in srgb, #000 22%, transparent);
    }

    [data-theme="dark"] .seg button.on {
      color: var(--clay);
      background: transparent;
    }

    [data-theme="dark"] .metric-band,
    [data-theme="dark"] .admin-panel {
      background: linear-gradient(180deg, color-mix(in srgb, var(--card) 58%, #000 8%), transparent 190px);
    }

    @keyframes reveal {
      from { opacity: 0; transform: scaleY(.96) translateY(-4px); }
      to { opacity: 1; transform: scaleY(1) translateY(0); }
    }

    @media (max-width: 1000px) {
      .metric-band {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .metric:nth-child(2n) {
        border-right: 0;
      }

      .metric:nth-child(n + 3) {
        border-top: 1px solid color-mix(in srgb, var(--line) 62%, transparent);
      }

      .admin-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 720px) {
      .admin-shell {
        width: min(100% - 24px, 1260px);
        padding-top: 20px;
      }

      .admin-head {
        grid-template-columns: 1fr;
        align-items: start;
      }

      .top-actions {
        justify-content: flex-start;
      }

      .metric-band {
        grid-template-columns: 1fr;
      }

      .metric {
        border-right: 0;
      }

      .metric:nth-child(n + 2) {
        border-top: 1px solid color-mix(in srgb, var(--line) 62%, transparent);
      }

      .seg {
        width: 100%;
        justify-content: start;
      }
    }

/* Shared component layer: every module uses these semantic column and card styles. */
html { scrollbar-gutter: stable; }
.module-heading { margin: 0 0 20px; }
.module-heading h2 { font-size: 21px; margin-bottom: 6px; }
.module-heading p { margin: 0; }
.cell-numeric { text-align: right; font-variant-numeric: tabular-nums; }
.cell-timestamp { color: var(--ink-3); font-size: 12px; }
.cell-title { color: var(--ink); font-weight: 500; }
.cell-sub { color: var(--ink-3); font-size: 11px; margin-top: 4px; }
.cell-user, .cell-model, .cell-prompt { white-space: normal; overflow-wrap: anywhere; }
.table-wrap td { padding: 12px; }
.empty-state { text-align: center; padding: 36px 20px; color: var(--ink-3); }
.media-table { min-width: 1280px; table-layout: fixed; }
.media-table .cell-id { width: 64px; }
.media-table .cell-user { width: 180px; }
.media-table .cell-model { width: 200px; }
.media-table .cell-prompt { width: 270px; }
.media-table .cell-numeric { width: 90px; }
.media-table .cell-status { width: 90px; }
.media-table .cell-timestamp { width: 155px; }
.media-table .cell-action { width: 100px; position: sticky; right: 0; background: var(--card); border-left: 1px solid var(--line); }
.media-table th.cell-action { z-index: 3; background: var(--card-2); }
.prompt-preview { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; line-height: 1.6; }
.media-table .media-params { min-width: 0; margin-top: 6px; }
.media-table .media-param:nth-child(n+3) { display: none; }
.status.failed { color: var(--err); border-color: var(--err); }
.status.refunded, .status.expired, .status.cancelled { color: var(--ink-3); background: var(--card-2); }
#imagePagination { justify-content: flex-end; margin-top: 14px; }
.page-summary { margin-right: auto; }
.button:disabled { opacity: .45; cursor: not-allowed; }
.drawer-card { max-height: 88vh; overflow-y: auto; width: min(720px, calc(100vw - 32px)); }
.detail-list { display: grid; gap: 16px; }
.detail-field dt { color: var(--ink-3); font-size: 12px; margin-bottom: 6px; }
.detail-field dd { margin: 0; color: var(--ink); font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.detail-text { white-space: pre-wrap; background: var(--paper); padding: 12px; border-radius: 8px; }
.detail-error { color: var(--err); }
.notice-error { padding: 12px; border: 1px solid var(--err); border-radius: 10px; margin-bottom: 16px; }
.traffic-filters { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; margin: 0 0 20px; }
.traffic-filters label { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 13px; }
.traffic-filters select { min-width: 140px; }
.traffic-note { padding: 0 0 16px; line-height: 1.7; }
.traffic-trend { max-height: 480px; overflow: auto; overflow-anchor: none; padding-right: 8px; }
.traffic-breakdowns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.traffic-breakdowns .admin-panel { min-width: 0; }
.traffic-breakdowns table { min-width: 320px; }
#trafficSitesTable .cell-user { min-width: 170px; }
#trafficRange { flex-basis: 100%; }
@media (max-width: 700px) {
  .traffic-breakdowns { grid-template-columns: minmax(0, 1fr); }
  .traffic-filters { align-items: flex-start; }
  .traffic-trend .trend-row { grid-template-columns: 86px minmax(24px, 1fr) 84px; gap: 8px; font-size: 11px; }
}
.table-caption { text-align: left; padding: 12px; font-size: 13px; font-weight: 600; color: var(--ink); background: var(--card); }
@media (max-width: 700px) {
  .metric-band { gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric, .metric:nth-child(2n), .metric:nth-child(4n), .metric:last-child { border: 1px solid var(--line); }
  .module-heading h2 { font-size: 18px; }
  .admin-head p { font-size: 12px; }
  .page-summary { flex-basis: 100%; }
}
/* Operations workspace. Keep data dense and navigation quiet. */
:root { --paper:#f4f2ec; --paper-2:#edece5; --card:#fffef9; --card-2:#eeeee7; --ink:#263b31; --ink-2:#526057; --ink-3:#6b736b; --line:#dce0d5; --line-2:#ccd3c6; --clay:#ac492e; --clay-deep:#963d25; --ok:#367155; --forest:#253f33; }
[data-theme="dark"] { --paper:#191e1a; --paper-2:#1f2620; --card:#222a23; --card-2:#29332a; --ink:#e0e8db; --ink-2:#b8c5b6; --ink-3:#96a491; --line:#354336; --line-2:#4b5b49; --clay:#ed9976; --clay-deep:#ed9976; --ok:#95c4a4; --forest:#b8d4b7; }
body,[data-theme="dark"] body { height:auto; min-height:100dvh; overflow:auto; background:var(--paper); }
.admin-shell { width:min(1600px,calc(100% - 64px)); padding:0 0 48px; }
.admin-head { min-height:106px; padding:23px 0; align-items:center; }
.admin-head .kicker { font-size:9px; letter-spacing:.18em; }
h1 { font-size:23px; margin-top:4px; letter-spacing:-.04em; }
.admin-head p { font-size:11px; margin-top:7px; }
.top-actions { justify-content:flex-end; }
#dashboard { display:grid; grid-template-columns:184px minmax(0,1fr); gap:36px; padding-top:30px; }
.admin-sidebar { align-self:start; position:sticky; top:24px; min-width:0; }
.nav-caption { font-size:10px; letter-spacing:.12em; color:var(--ink-3); display:block; margin:0 12px 18px; }
#productSeg { display:grid; gap:7px; }
#productSeg button { display:flex; align-items:center; gap:13px; width:100%; padding:13px 12px; border:0; border-radius:7px; background:none; color:var(--ink-2); text-align:left; font:inherit; font-size:13px; cursor:pointer; transition:background .2s,color .2s; }
#productSeg button:hover { background:var(--card-2); }
#productSeg button.on { background:var(--forest); color:var(--paper); }
.nav-icon { font-family:ui-monospace,monospace; font-size:10px; opacity:.65; }
.sidebar-note { border-top:1px solid var(--line); margin:42px 12px 0; padding-top:20px; font-size:11px; color:var(--ink-2); }
.sidebar-note p { font-size:10px; color:var(--ink-3); line-height:1.9; margin-top:8px; }
.live-dot { display:inline-block; width:5px; height:5px; background:var(--ok); border-radius:50%; margin-right:7px; }
.admin-workspace { min-width:0; }
.workspace-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.workspace-meta .kicker { font-size:9px; letter-spacing:.12em; }
#lastLoaded { font-size:10px; }
.module-heading { margin-bottom:24px; }
.module-heading h2 { font-size:28px; font-weight:550; letter-spacing:-.04em; }
.module-heading p { font-size:12px; max-width:680px; margin-top:8px; }
.button,.button.mini { border-radius:7px; box-shadow:none; transition:background .18s,color .18s,border-color .18s; }
.button:hover { transform:none; }
.button.primary,[data-theme="dark"] .button.primary { background:var(--forest); color:var(--paper); border-color:var(--forest); box-shadow:none; }
.button.primary:hover,[data-theme="dark"] .button.primary:hover { background:color-mix(in srgb,var(--forest) 88%,var(--clay)); color:var(--paper); }
.button.mini { min-height:32px; }
.button:disabled { cursor:wait; }
.metric-band,[data-theme="dark"] .metric-band { gap:0; background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden; margin-bottom:26px; }
.metric,.metric:nth-child(2n),.metric:nth-child(4n),.metric:last-child { border:0; border-radius:0; border-right:1px solid var(--line); min-height:116px; padding:20px 22px; background:transparent; }
.metric:nth-child(4n) { border-right:0; }
.metric:nth-child(n+5) { border-top:1px solid var(--line); }
.metric strong { font-family:'Fraunces',Georgia,serif; font-size:32px; font-weight:500; letter-spacing:-.025em; }
.metric span { font-size:11px; }
.metric span:last-child { font-size:10px; }
.control-bar { margin:0 0 16px; gap:16px; }
.seg,[data-theme="dark"] .seg { display:flex; gap:22px; border:0; border-radius:0; padding:0; background:none; box-shadow:none; width:100%; }
.seg::before { display:none; }
.seg button { flex-shrink:0; border-radius:0; min-height:44px; padding:0 1px 10px; font-size:12px; font-weight:500; border-bottom:2px solid transparent; }
.seg button.on,[data-theme="dark"] .seg button.on { color:var(--clay); border-color:var(--clay); transform:none; }
.seg button:hover { background:none; }
.query-tools { border:1px solid var(--line); border-radius:10px; background:var(--card); padding:16px 18px 0; }
.query-main { display:grid; grid-template-columns:minmax(120px,1fr) 140px auto auto; gap:8px; }
input,select,textarea { min-width:0; max-width:100%; border-radius:6px; font-size:13px; min-height:38px; background:var(--paper); }
#querySearch { width:100%; }
.query-advanced { margin-top:10px; }
.query-advanced summary { padding:5px 0; font-size:11px; color:var(--ink-2); cursor:pointer; width:fit-content; }
.query-advanced summary span { margin-left:9px; font-size:10px; color:var(--ink-3); }
.query-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:16px 0; }
.query-fields label { display:grid; gap:6px; font-size:11px; color:var(--ink-2); }
.query-fields label input,.query-fields label select { width:100%; }
.query-dates { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding-bottom:8px; }
.query-dates .muted { margin-right:auto; font-size:10px; }
.query-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid var(--line); padding:10px 0; margin-top:10px; font-size:11px; color:var(--ink-3); }
.query-footer>div { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.query-footer .button { flex-shrink:0; }
.query-footer .is-filtered { color:var(--clay); }
.notice:empty { display:none; }
#imageNotice:not(:empty) { margin:12px 0; }
.notice-error { margin:12px 0; }
.table-wrap { border-radius:9px; max-width:100%; background:var(--card); }
#imageTable { min-width:760px; }
#imageTable[aria-busy="true"],.table-wrap[aria-busy="true"] { opacity:.55; }
#imageTable.media-table { min-width:1270px; }
#imagePanel>.table-wrap { margin-top:14px; }
.table-window { max-height:620px; }
.table-window.compact { max-height:340px; }
table { min-width:760px; }
th { font-size:10px; font-weight:500; padding:12px 14px; background:var(--card-2); }
td,.table-wrap td { font-size:12px; padding:15px 14px; }
tbody tr:hover td { background:color-mix(in srgb,var(--clay) 3%,var(--card)); }
.cell-user { min-width:175px; }
.cell-sub { font-size:10px; }
.cell-timestamp { font-size:11px; }
.cell-action { white-space:nowrap; }
#imageTable:not(.media-table) td:last-child .button { margin:2px; }
.status { font-size:10px; padding:2px 7px; min-height:23px; border-radius:5px; }
.status.paid,.status.success,.status.ok { background:color-mix(in srgb,var(--ok) 7%,transparent); }
.empty-state { height:170px; font-size:13px; }
.ledger-description { white-space:normal; min-width:200px; max-width:420px; line-height:1.8; overflow-wrap:anywhere; }
.ledger-description small { display:block; color:var(--ink-3); }
.credit-in { color:var(--ok); }.credit-out { color:var(--clay); }
.admin-grid { gap:24px; }
.admin-panel,[data-theme="dark"] .admin-panel { background:none; }
.panel-head { padding:18px 0 14px; }
.panel-head h2 { font-size:18px; }.panel-head h3 { font-size:14px; }
.table-section { margin-top:26px; }
#imageActions:empty { display:none; }
#imageActions { width:100%; padding:14px; background:var(--card); border:1px solid var(--line); border-radius:9px; }
#imageActions input { width:150px; }
.drawer { padding:0; place-items:stretch end; background:#0b160d55; backdrop-filter:blur(3px); }
.drawer.open { animation:none; }
.drawer-card { width:min(620px,100vw); height:100dvh; max-height:none; border:0; border-radius:0; padding:32px; box-shadow:var(--shadow-lg); overscroll-behavior:contain; animation:drawer-in .22s var(--ease); }
.drawer-card>.stack { min-height:100%; grid-template-rows:auto 1fr auto auto; gap:24px; }
#drawerTitle { font-size:23px; }
#drawerBody>.stack,#drawerBody>label { margin:16px 0; font-size:12px; }
#drawerBody p { margin-bottom:14px; }
#drawerError { margin:0; padding:12px; background:var(--clay-soft); border-radius:7px; }
.drawer-card>.stack>.row-actions { position:sticky; bottom:-32px; padding:16px 0; background:var(--card); border-top:1px solid var(--line); }
.detail-list { gap:22px; }
.detail-field dt { font-size:10px; }
.detail-field dd { font-size:13px; }
.user-profile { display:flex; gap:13px; align-items:center; margin-bottom:18px; }
.profile-letter { display:grid; place-items:center; width:45px; height:45px; border-radius:8px; background:var(--forest); color:var(--paper); flex-shrink:0; font-family:'Fraunces',serif; font-size:25px; }
.user-profile>div { min-width:0; overflow-wrap:anywhere; }.user-profile h3 { font-size:15px; }.user-profile p { font-size:11px; margin:3px 0 0!important; color:var(--ink-3); }
.user-profile>strong { font-size:23px; font-weight:500; margin-left:auto; text-align:right; white-space:nowrap; }.user-profile small { display:block; font-size:10px; color:var(--ink-3); }
.related-section { border-top:1px solid var(--line); margin-top:24px; }
.related-row { display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-top:1px solid var(--line); font-size:12px; }
.related-row>span { overflow-wrap:anywhere; min-width:0; }.related-row b { white-space:nowrap; font-size:11px; font-weight:500; }.related-row small { display:block; font-size:10px; margin-top:4px; color:var(--ink-3); }
.login-panel { border-radius:12px; box-shadow:none; }.field-label { font-size:11px; margin-bottom:-6px; }
@keyframes drawer-in { from {transform:translateX(25px);opacity:0} to {transform:none;opacity:1} }
@media(min-width:1500px) { .admin-shell { width:calc(100% - 96px); } #dashboard { grid-template-columns:196px minmax(0,1fr);gap:44px; } }
@media(max-width:1100px) { .admin-shell { width:calc(100% - 40px); } #dashboard {grid-template-columns:154px minmax(0,1fr);gap:24px;} .metric-band {grid-template-columns:repeat(2,minmax(0,1fr));} .metric:nth-child(2n) {border-right:0}.metric:nth-child(n+3){border-top:1px solid var(--line)} .query-main{grid-template-columns:minmax(80px,1fr) 110px auto auto;} }
@media(max-width:800px) {
  .admin-shell {width:calc(100% - 32px);padding-bottom:28px;}
  .admin-head {min-height:98px;grid-template-columns:1fr auto;gap:12px;}.admin-head p{display:none;}h1{font-size:21px;}
  .top-actions{gap:6px;}.top-actions .button{font-size:11px;min-height:32px;padding:0 9px;}
  #dashboard{display:block;padding-top:18px;}.admin-sidebar{position:static;margin-bottom:25px;}
  .nav-caption,.sidebar-note{display:none;}#productSeg{display:flex;gap:6px;overflow-x:auto;padding-bottom:5px;scrollbar-width:thin;}
  #productSeg button{width:auto;flex-shrink:0;font-size:11px;padding:10px 12px;gap:8px;}.nav-icon{font-size:9px;}
  .module-heading h2{font-size:25px;}.module-heading p{font-size:11px;}.module-heading{margin-bottom:20px;}
  .workspace-meta{gap:8px;}.workspace-meta .kicker{font-size:8px;}#lastLoaded{font-size:9px;}
  .metric{padding:16px!important;min-height:104px;}.metric strong{font-size:29px;}
  .seg{gap:20px;}.seg button{font-size:12px;}.query-tools{padding:12px 12px 0;}.query-main{grid-template-columns:minmax(0,1fr) 100px auto auto;gap:6px;}.query-main .button{padding:0 12px;}
  .query-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}.query-footer{align-items:flex-start;font-size:10px;}.query-footer>div{min-height:32px;}
  .table-window{max-height:65dvh;}.drawer-card{padding:24px;}.drawer-card>.stack>.row-actions{bottom:-24px;}
}
@media(max-width:540px) {
  .admin-head{padding:18px 0;min-height:92px;} .top-actions{max-width:190px;}#logoutBtn{order:4;}#refreshBtn{order:3;}
  .query-main{grid-template-columns:minmax(0,1fr) auto auto;}#querySearch{grid-column:1/-1;}#queryStatus{width:100%;}
  .query-main:has(#queryStatus[hidden]) .button{grid-row:2;}
  .query-footer{gap:6px;}.query-footer .button{font-size:10px;padding:0 8px;}.query-advanced summary span{font-size:9px;}
  .query-fields input,.query-fields select,#querySearch{font-size:16px;}.query-dates .muted{flex-basis:100%;}
  .page-summary{font-size:11px;}.row-actions{gap:5px;}.button.mini{min-height:36px;}.drawer-card{padding:20px;}.drawer-card>.stack>.row-actions{bottom:-20px;}
  .metric-band{margin-bottom:18px;}.metric{min-height:98px;}.metric strong{font-size:26px;}.metric span{font-size:10px;}
  .user-profile{flex-wrap:wrap;}.user-profile>strong{font-size:21px;}.traffic-filters select{min-width:120px;}
}

body:has(.drawer.open) { overflow:hidden; }
.user-link { display:block; border:0; background:none; color:inherit; text-align:left; cursor:pointer; font:inherit; padding:4px 0; }
.user-link:hover .cell-title { color:var(--clay); }
.action-icon { display:none; }
#imageActions { align-items:flex-end; }
#imageActions label { gap:5px;font-size:11px;color:var(--ink-2); }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important; } }
@media(max-width:540px) {
  .top-actions { max-width:none;flex-wrap:nowrap;gap:5px; }
  .top-actions #refreshBtn,.top-actions #logoutBtn { min-width:30px;width:30px;padding:0; }
  .top-actions .action-label { display:none; }.action-icon {display:inline;font-size:19px;}
  .admin-head {min-height:82px;gap:8px;}.admin-head h1{font-size:19px;}.admin-head .kicker{font-size:8px;}
  .top-actions>a.button {font-size:10px;padding:0 7px;}
  .metric-band .metric {padding:12px 14px!important;min-height:88px;gap:6px;}
  .admin-sidebar {margin-bottom:20px;}#productSeg,.seg {scrollbar-width:none;}
  #productSeg::-webkit-scrollbar,.seg::-webkit-scrollbar {display:none;}
  .module-heading {margin-bottom:18px;}.module-heading p{margin-top:5px;}
}
/* Shared suite controls */
/* Same control geometry across the suite; keyboard focus stays visible. */
html { -webkit-tap-highlight-color: transparent; }
:where(a,button,input,textarea,select,summary,label,[role="button"],[tabindex]) { -webkit-tap-highlight-color: transparent; }
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible,[role="button"]:focus-visible,[tabindex]:focus-visible { outline:2px solid var(--clay,#ac492e); outline-offset:4px; }
:where(button,summary,[role="button"]):active { filter:brightness(.96); }
.theme-switch { position:relative; width:46px; min-width:46px; height:30px; min-height:30px; padding:0; display:inline-grid; place-items:center; border:1px solid var(--line,#dddfd4); border-radius:999px; background:var(--card,var(--panel,#fffdf8)); color:var(--ink); cursor:pointer; flex-shrink:0; transform:none; box-shadow:none; }
.theme-switch::after { content:""; position:absolute; inset:-7px 0; }
.theme-switch-track { position:relative; display:block; width:40px; height:22px; }
.theme-switch-thumb { position:absolute; left:0; top:0; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:var(--paper,var(--bg,#f4f2ec)); color:var(--clay,#ac492e); box-shadow:0 2px 6px #1d302016; transition:transform .35s cubic-bezier(.32,.72,0,1),background .25s; }
.theme-switch svg { grid-area:1/1; width:13px; height:13px; transition:opacity .2s,transform .3s; }
.theme-switch .moon { opacity:0; transform:rotate(-25deg) scale(.78); }
.theme-switch[data-theme="dark"] .theme-switch-thumb { transform:translateX(18px); }
.theme-switch[data-theme="dark"] .sun { opacity:0; transform:rotate(35deg) scale(.78); }
.theme-switch[data-theme="dark"] .moon { opacity:1; transform:none; }
.theme-switch:hover { border-color:var(--clay,#ac492e); }
@media(max-width:540px) { .theme-switch { width:40px; min-width:40px; height:28px; min-height:28px; }.theme-switch-track { width:34px; height:20px; }.theme-switch-thumb { width:20px; height:20px; }.theme-switch[data-theme="dark"] .theme-switch-thumb { transform:translateX(14px); } }
.skip-link { position:fixed; left:16px; top:-70px; z-index:1000; padding:12px 18px; color:var(--ink); background:var(--card,var(--panel)); border:1px solid var(--line); border-radius:8px; }
.skip-link:focus { top:12px; }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }