/* DO NOT EDIT — copied from packages/shared/src/design/css/organizer.css
   by `npm run tokens`. Edit the source there, regenerate, commit both.
   A vitest in packages/shared fails if this file drifts from the source. */
/* Organizer Hub — shared presentation (2026-09-29). Hand-written, NOT
   generated. `npm run tokens` COPIES this file to
   apps/server/public/shared/organizer.css for the no-build web surfaces; the
   desktop app imports it through the `@tdtt/shared` exports map
   (`@tdtt/shared/css/organizer.css`). Edit this file, never the copy.

   Built on the shared classes (.tdtt-banner, .tdtt-statrow, .tdtt-panel,
   .tdtt-btn, .chip, .seg-slab, .tdtt-asidecard). `.tdtt-oh-*` adds the hub's
   own layers: hex banner glyph, tinted CTA tiles, featured cards, activity.

   Tint rule: a SURFACE is only ever tinted by mixing an accent into a solid
   surface token (color-mix(in srgb, accent N%, var(--surface))), never into
   transparent, so page texture cannot show through. The one exception is a
   box-shadow / drop-shadow GLOW, which is light cast outside a surface. */

.tdtt-oh {
  --oh-ac: var(--cyan);
  display: flex; flex-direction: column; gap: 16px; min-width: 0;
}
.tdtt-oh [data-accent='cyan'] { --oh-ac: var(--cyan); --sec-accent: var(--cyan); }
.tdtt-oh [data-accent='magenta'] { --oh-ac: var(--magenta); --sec-accent: var(--magenta); }
.tdtt-oh [data-accent='gold'] { --oh-ac: var(--gold); --sec-accent: var(--gold); }
.tdtt-oh [data-accent='orange'] { --oh-ac: var(--orange); --sec-accent: var(--orange); }

/* ── banner ─────────────────────────────────────────────────────────── */
.tdtt-oh-banner { --ac: var(--magenta); min-height: 132px; display: flex; align-items: center; }
.tdtt-oh-banner__copy { position: relative; max-width: 60ch; }
.tdtt-oh-glyph {
  position: absolute; right: 3%; top: 50%; z-index: -1;
  width: clamp(180px, 28vw, 340px); height: auto; transform: translateY(-50%);
  pointer-events: none; overflow: visible;
}
.tdtt-oh-hex { fill: color-mix(in srgb, var(--cyan) 8%, var(--surface)); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.tdtt-oh-hex--a { stroke: var(--cyan); filter: drop-shadow(0 0 8px var(--cyan)); }
.tdtt-oh-hex--b { stroke: var(--magenta); fill: color-mix(in srgb, var(--magenta) 10%, var(--surface)); filter: drop-shadow(0 0 10px var(--magenta)); }
.tdtt-oh-hex--c { stroke: var(--gold); fill: color-mix(in srgb, var(--gold) 8%, var(--surface)); filter: drop-shadow(0 0 8px var(--gold)); }
.tdtt-oh-hex--d { stroke: var(--orange); filter: drop-shadow(0 0 6px var(--orange)); }
.tdtt-oh-hex--e { stroke: var(--chrome); }
@media (max-width: 700px) { .tdtt-oh-glyph { opacity: 0.55; right: -30px; } }

/* ── tabs ───────────────────────────────────────────────────────────── */
.tdtt-oh-tabs { position: relative; overflow-x: auto; scrollbar-width: none; }
.tdtt-oh-tabs::-webkit-scrollbar { display: none; }
.tdtt-oh-tabs .t { min-width: 96px; white-space: nowrap; }

.tdtt-oh-body { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* ── shared bits ────────────────────────────────────────────────────── */
.tdtt-oh-ico { flex: none; }
.tdtt-oh-h2 {
  margin: 0 0 12px; font-family: var(--head); font-size: 12px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text);
}
.tdtt-oh-empty { margin: 0; font-family: var(--body); font-size: 13.5px; color: var(--text-dim); }
.tdtt-oh-panel {
  position: relative; isolation: isolate; overflow: hidden; padding: 18px;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--cyan) 5%, var(--surface)) 0%, var(--surface) 60%);
  border: 1px solid var(--border); border-radius: 16px;
}
.tdtt-oh-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tdtt-oh-chip { cursor: default; }
.tdtt-oh-chip--open { color: var(--green); border-color: color-mix(in srgb, var(--green) 45%, var(--surface)); }
.tdtt-oh-chip--closed { color: var(--text-dim); }
.tdtt-oh-chip--warn { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, var(--surface)); }
.tdtt-oh-btn--danger {
  background: color-mix(in srgb, var(--red) 26%, var(--surface));
  border-color: color-mix(in srgb, var(--red) 60%, var(--surface));
}

/* ── CTA row ────────────────────────────────────────────────────────── */
.tdtt-oh-cta-row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.tdtt-oh-cta {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 16px;
  font-family: var(--head); font-size: 12.5px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; text-align: left; text-decoration: none; cursor: pointer;
  color: var(--text);
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--oh-ac) 22%, var(--surface)) 0%, var(--surface) 78%);
  border: 1px solid color-mix(in srgb, var(--oh-ac) 50%, var(--surface));
  border-radius: 14px;
  box-shadow: 0 0 20px color-mix(in srgb, var(--oh-ac) 16%, transparent);
  transition: filter 0.15s, box-shadow 0.15s;
}
.tdtt-oh-cta::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--oh-ac) 30%, var(--surface)) 1px, var(--surface) 1.5px);
  background-size: 8px 8px; opacity: 0.35;
  -webkit-mask-image: linear-gradient(100deg, var(--bg), transparent 75%);
  mask-image: linear-gradient(100deg, var(--bg), transparent 75%);
}
.tdtt-oh-cta > .tdtt-oh-ico:first-child {
  width: 40px; height: 40px; padding: 9px; border-radius: 11px; color: var(--oh-ac);
  background: color-mix(in srgb, var(--oh-ac) 16%, var(--input));
}
.tdtt-oh-cta > span { flex: 1; min-width: 0; }
.tdtt-oh-cta__go { color: var(--oh-ac); width: 18px; height: 18px; }
@media (hover: hover) {
  .tdtt-oh-cta:hover { filter: brightness(1.12); box-shadow: 0 2px 26px color-mix(in srgb, var(--oh-ac) 34%, transparent); }
}
.tdtt-oh-cta:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* ── stat tiles ─────────────────────────────────────────────────────── */
.tdtt-oh-stats { margin: 0; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.tdtt-oh-stat-sub {
  display: block; margin-top: 2px; font-family: var(--body); font-size: 10px;
  letter-spacing: 0; text-transform: none; color: var(--muted);
}

/* ── featured row ───────────────────────────────────────────────────── */
.tdtt-oh-featured { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .tdtt-oh-featured { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tdtt-oh-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; gap: 12px; padding: 16px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--oh-ac) 14%, var(--surface)) 0%, var(--surface) 46%);
  border: 1px solid color-mix(in srgb, var(--oh-ac) 32%, var(--surface));
  border-radius: 16px;
}
.tdtt-oh-card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 88px; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(30deg, color-mix(in srgb, var(--oh-ac) 16%, var(--surface)) 12%, var(--surface) 12.5%, var(--surface) 87%, color-mix(in srgb, var(--oh-ac) 16%, var(--surface)) 87.5%),
    linear-gradient(150deg, color-mix(in srgb, var(--oh-ac) 16%, var(--surface)) 12%, var(--surface) 12.5%, var(--surface) 87%, color-mix(in srgb, var(--oh-ac) 16%, var(--surface)) 87.5%);
  background-size: 44px 76px; opacity: 0.5;
  -webkit-mask-image: linear-gradient(180deg, var(--bg), transparent);
  mask-image: linear-gradient(180deg, var(--bg), transparent);
}
.tdtt-oh-card__head { display: flex; align-items: center; }
.tdtt-oh-card__kind {
  font-family: var(--head); font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--oh-ac);
}
.tdtt-oh-card__main { display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
.tdtt-oh-card__text { min-width: 0; flex: 1; }
.tdtt-oh-card__title {
  margin: 0; font-family: var(--head); font-size: 15px; font-weight: 700; line-height: 1.25;
  color: var(--text); overflow-wrap: anywhere;
}
.tdtt-oh-card__meta { margin: 3px 0 0; font-family: var(--body); font-size: 12.5px; color: var(--text-dim); }
.tdtt-oh-card__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.tdtt-oh-card__actions .tdtt-btn { min-height: 36px; padding: 0 12px; font-size: 11px; }
.tdtt-oh-art {
  flex: none; width: 64px; height: 64px; overflow: hidden; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--oh-ac) 14%, var(--input));
  border: 1px solid color-mix(in srgb, var(--oh-ac) 40%, var(--surface));
  box-shadow: 0 0 18px color-mix(in srgb, var(--oh-ac) 24%, transparent);
}
.tdtt-oh-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tdtt-oh-art__ph { display: flex; color: var(--oh-ac); }
.tdtt-oh-art__ph .tdtt-oh-ico { width: 28px; height: 28px; }

/* ── activity ───────────────────────────────────────────────────────── */
.tdtt-oh-activity__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tdtt-oh-activity__row {
  display: flex; align-items: center; gap: 12px; padding: 10px 0;
  border-top: 1px solid var(--border); font-family: var(--body); font-size: 13.5px; color: var(--text-dim);
}
.tdtt-oh-activity__row:first-child { border-top: 0; }
.tdtt-oh-activity__row strong { color: var(--text); font-weight: 600; }
.tdtt-oh-activity__ico {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 10px; color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 14%, var(--input));
}
.tdtt-oh-activity__ico .tdtt-oh-ico { width: 16px; height: 16px; }
.tdtt-oh-activity__text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tdtt-oh-activity__at { flex: none; font-size: 11px; color: var(--muted); }

/* ── onboarding, error, placeholder, skeleton ───────────────────────── */
.tdtt-oh-onboard { text-align: center; padding: 34px 20px; }
.tdtt-oh-onboard__art { display: flex; justify-content: center; margin-bottom: 8px; }
.tdtt-oh-onboard__art .tdtt-oh-glyph { position: static; z-index: auto; transform: none; width: 200px; }
.tdtt-oh-onboard__copy { max-width: 46ch; margin: 0 auto 18px; font-family: var(--body); font-size: 14px; color: var(--text-dim); }
.tdtt-oh-onboard__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.tdtt-oh-onboard__actions .tdtt-oh-cta { min-width: 220px; }
.tdtt-oh-skeleton { display: grid; gap: 12px; }
.tdtt-oh-skeleton span {
  display: block; height: 84px; border-radius: 14px; border: 1px solid var(--border);
  background: linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%);
  background-size: 220% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .tdtt-oh-skeleton span { animation: tdtt-oh-shimmer 1.4s linear infinite; }
}
@keyframes tdtt-oh-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }

/* ── confirm dialog ─────────────────────────────────────────────────── */
.tdtt-oh-confirm {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgb(from var(--bg) r g b / 0.82);
}
.tdtt-oh-confirm__card {
  width: min(420px, 100%); padding: 20px; border-radius: 16px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--cyan) 8%, var(--surface)), var(--surface) 70%);
  border: 1px solid var(--border-hi, var(--border));
  box-shadow: 0 12px 40px color-mix(in srgb, var(--bg) 90%, transparent);
}
.tdtt-oh-confirm__card.is-danger { border-color: color-mix(in srgb, var(--red) 60%, var(--surface)); }
.tdtt-oh-confirm__msg { margin: 0 0 16px; font-family: var(--body); font-size: 14.5px; color: var(--text); }
.tdtt-oh-confirm__actions { display: flex; justify-content: flex-end; gap: 10px; }

/* ── aside cards ────────────────────────────────────────────────────── */
.tdtt-oh-asidewrap { display: flex; flex-direction: column; gap: 14px; }
.tdtt-oh-aside {
  background: linear-gradient(160deg, color-mix(in srgb, var(--magenta) 6%, var(--surface)), var(--surface) 62%);
}
.tdtt-oh-astats { margin: 0; display: grid; gap: 8px; }
.tdtt-oh-astats > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border-radius: 10px; background: var(--input);
}
.tdtt-oh-astats dt { font-family: var(--body); font-size: 12px; color: var(--text-dim); }
.tdtt-oh-astats dd { margin: 0; font-family: var(--head); font-size: 15px; font-weight: 700; color: var(--gold); }
.tdtt-oh-tools, .tdtt-oh-tips { list-style: none; margin: 0; padding: 0; }
.tdtt-oh-tools { display: flex; flex-direction: column; gap: 6px; }
.tdtt-oh-tool {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px;
  font-family: var(--body); font-size: 13px; font-weight: 600; text-align: left; text-decoration: none;
  color: var(--text); cursor: pointer; background: var(--input);
  border: 1px solid var(--border); border-radius: 10px;
}
.tdtt-oh-tool > .tdtt-oh-ico:first-child { color: var(--cyan); }
.tdtt-oh-tool__label { flex: 1; min-width: 0; }
.tdtt-oh-tool__go { width: 16px; height: 16px; color: var(--muted); }
@media (hover: hover) {
  .tdtt-oh-tool:hover { border-color: var(--border-hi, var(--cyan)); background: color-mix(in srgb, var(--cyan) 10%, var(--input)); }
}
.tdtt-oh-tool:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.tdtt-oh-badge {
  min-width: 20px; padding: 1px 7px; border-radius: 999px; text-align: center;
  font-family: var(--head); font-size: 10.5px; font-weight: 700; color: var(--bg); background: var(--gold);
}
.tdtt-oh-tips { display: flex; flex-direction: column; gap: 8px; }
.tdtt-oh-tips li {
  position: relative; padding-left: 18px; font-family: var(--body); font-size: 12.5px; color: var(--text-dim);
}
.tdtt-oh-tips li::before {
  content: ''; position: absolute; left: 2px; top: 5px; width: 8px; height: 9px;
  background: var(--magenta); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

/* ── Shop tab (B3) ──────────────────────────────────────────────────── */
.tdtt-oh-chip--ok { color: var(--cyan); border-color: color-mix(in srgb, var(--cyan) 45%, var(--surface)); }
.tdtt-oh-chip--bad { color: var(--red); border-color: color-mix(in srgb, var(--red) 50%, var(--surface)); }
.tdtt-oh-chip--cat { color: var(--text-dim); }
.tdtt-oh-subnav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.tdtt-oh-subtabs { overflow-x: auto; scrollbar-width: none; }
.tdtt-oh-subtabs .t { min-width: 88px; white-space: nowrap; }
.tdtt-oh-switch { display: flex; align-items: center; gap: 8px; }
.tdtt-oh-switch__l, .tdtt-oh-field__l {
  font-family: var(--head); font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-dim);
}
.tdtt-oh select, .tdtt-oh .tdtt-oh-field input[type='text'], .tdtt-oh .tdtt-oh-field textarea,
.tdtt-oh .tdtt-oh-search input[type='text'], .tdtt-oh .tdtt-oh-hours input[type='text'] {
  min-height: 38px; padding: 0 12px; width: 100%; box-sizing: border-box;
  font-family: var(--body); font-size: 14px; color: var(--text);
  background: var(--input); border: 1px solid var(--border); border-radius: 10px;
}
.tdtt-oh select { width: auto; min-width: 160px; }
.tdtt-oh .tdtt-oh-field textarea { padding: 10px 12px; resize: vertical; }
.tdtt-oh input[type='text']:focus, .tdtt-oh textarea:focus, .tdtt-oh select:focus {
  outline: 2px solid var(--cyan); outline-offset: 1px;
}

.tdtt-oh-msg {
  padding: 10px 14px; border-radius: 12px; font-family: var(--body); font-size: 13.5px; overflow-wrap: anywhere;
  color: var(--text); border: 1px solid var(--border); background: var(--surface);
}
.tdtt-oh-msg--ok { border-color: color-mix(in srgb, var(--green) 55%, var(--surface)); background: color-mix(in srgb, var(--green) 10%, var(--surface)); }
.tdtt-oh-msg--err { border-color: color-mix(in srgb, var(--red) 60%, var(--surface)); background: color-mix(in srgb, var(--red) 12%, var(--surface)); }

.tdtt-oh-shopgrid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .tdtt-oh-shopgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; } }
.tdtt-oh-shoplist, .tdtt-oh-tags, .tdtt-oh-staff { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tdtt-oh-shoprow {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; text-align: left; cursor: pointer;
  color: var(--text); background: var(--input); border: 1px solid var(--border); border-radius: 14px;
}
.tdtt-oh-shoprow .tdtt-oh-art { width: 44px; height: 44px; border-radius: 11px; }
.tdtt-oh-shoprow.is-selected {
  border-color: color-mix(in srgb, var(--cyan) 60%, var(--surface));
  background: linear-gradient(120deg, color-mix(in srgb, var(--cyan) 14%, var(--input)), var(--input) 80%);
  box-shadow: 0 0 18px color-mix(in srgb, var(--cyan) 18%, transparent);
}
.tdtt-oh-shoprow__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tdtt-oh-shoprow__name { font-family: var(--head); font-size: 13.5px; font-weight: 700; overflow-wrap: anywhere; }
.tdtt-oh-shoprow__meta { font-family: var(--body); font-size: 12px; color: var(--text-dim); }
.tdtt-oh-shoprow__chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
@media (hover: hover) { .tdtt-oh-shoprow:hover { border-color: var(--border-hi, var(--cyan)); } }
.tdtt-oh-shoprow:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.tdtt-oh-venues { background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 7%, var(--surface)) 0%, var(--surface) 60%); }
.tdtt-oh-tag, .tdtt-oh-staffrow {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 12px;
  background: var(--input); border: 1px solid var(--border); border-radius: 12px;
}
.tdtt-oh-tag__text, .tdtt-oh-staffrow__text { flex: 1; min-width: 160px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.tdtt-oh-tag__name, .tdtt-oh-staffrow__name { font-family: var(--head); font-size: 13px; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.tdtt-oh-tag__actions { display: flex; gap: 8px; }
.tdtt-oh-tag .tdtt-btn, .tdtt-oh-staffrow .tdtt-btn { min-height: 34px; padding: 0 12px; font-size: 11px; }
.tdtt-oh-staffrow .tdtt-oh-art { width: 40px; height: 40px; border-radius: 50%; }
.tdtt-oh-you { font-family: var(--body); font-weight: 400; color: var(--muted); }
.tdtt-oh-search { display: flex; gap: 8px; margin-bottom: 12px; }
.tdtt-oh-results { margin-top: 4px; }

.tdtt-oh-fields { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.tdtt-oh-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tdtt-oh-field.is-wide { grid-column: 1 / -1; }
.tdtt-oh-field__h { margin: 0; font-family: var(--body); font-size: 11.5px; color: var(--muted); }
.tdtt-oh-shopform { display: flex; flex-direction: column; gap: 14px; }
.tdtt-oh-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.tdtt-oh-cat { position: relative; cursor: pointer; }
.tdtt-oh-cat input { position: absolute; opacity: 0; pointer-events: none; }
.tdtt-oh-cat span {
  display: inline-block; padding: 7px 12px; border-radius: 999px; font-family: var(--body); font-size: 12.5px;
  color: var(--text-dim); background: var(--input); border: 1px solid var(--border);
}
.tdtt-oh-cat input:checked + span {
  color: var(--text); border-color: color-mix(in srgb, var(--cyan) 65%, var(--surface));
  background: color-mix(in srgb, var(--cyan) 16%, var(--input));
  box-shadow: 0 0 12px color-mix(in srgb, var(--cyan) 22%, transparent);
}
.tdtt-oh-cat input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 2px; }
.tdtt-oh-hours { display: grid; gap: 8px; margin: 12px 0 8px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.tdtt-oh-hours__row { display: flex; align-items: center; gap: 10px; }
.tdtt-oh-hours__row label { flex: none; width: 84px; font-family: var(--body); font-size: 13px; color: var(--text-dim); }
.tdtt-oh-formbar { display: flex; justify-content: flex-end; }

.tdtt-oh-mediagrid { display: grid; gap: 16px; grid-template-columns: 120px minmax(0, 1fr); align-items: start; }
@media (max-width: 560px) { .tdtt-oh-mediagrid { grid-template-columns: minmax(0, 1fr); } }
.tdtt-oh-mediaslot { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.tdtt-oh-banner-prev {
  width: 100%; height: 84px; overflow: hidden; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--cyan) 10%, var(--input)); border: 1px solid var(--border);
}
.tdtt-oh-banner-prev img { width: 100%; height: 100%; object-fit: cover; }
.tdtt-oh-upload { position: relative; overflow: hidden; cursor: pointer; min-height: 34px; padding: 0 12px; font-size: 11px; }
.tdtt-oh-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.tdtt-oh-gallery { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.tdtt-oh-gallery__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.tdtt-oh-gallery__item { position: relative; width: 96px; height: 96px; }
.tdtt-oh-gallery__item img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; border: 1px solid var(--border); }
.tdtt-oh-gallery__x {
  position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; padding: 4px; cursor: pointer;
  color: var(--text); background: color-mix(in srgb, var(--red) 55%, var(--surface));
  border: 1px solid var(--border); border-radius: 50%;
}
.tdtt-oh-x { width: 14px; height: 14px; transform: rotate(45deg); }

/* Tournaments tab (B4) */
.tdtt-oh-panelhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.tdtt-oh-panelhead .tdtt-oh-h2 { margin: 0; }
.tdtt-oh-tlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tdtt-oh-trow, .tdtt-oh-invite {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 10px 12px;
  background: var(--input); border: 1px solid var(--border); border-radius: 14px;
}
.tdtt-oh-trow.has-pending { border-color: color-mix(in srgb, var(--gold) 50%, var(--surface)); }
.tdtt-oh-trow.is-cancelled { opacity: 0.55; }
.tdtt-oh-trow__ico { color: var(--magenta); display: inline-flex; }
.tdtt-oh-trow__text, .tdtt-oh-invite__text { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 2px; }
.tdtt-oh-trow__name, .tdtt-oh-invite__name { font-family: var(--head); font-size: 13.5px; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.tdtt-oh-trow__chips { margin-top: 4px; }
.tdtt-oh-trow__actions, .tdtt-oh-invite__actions { display: flex; gap: 8px; }
.tdtt-oh-trow .tdtt-btn, .tdtt-oh-invite .tdtt-btn { min-height: 34px; padding: 0 12px; font-size: 11px; }
.tdtt-oh-invites { background: linear-gradient(160deg, color-mix(in srgb, var(--cyan) 7%, var(--surface)) 0%, var(--surface) 60%); }

/* ── events tab (B5): editor, registrations ─────────────────────────── */
.tdtt-oh .tdtt-oh-field input[type='url'], .tdtt-oh .tdtt-oh-field input[type='date'],
.tdtt-oh .tdtt-oh-field input[type='time'], .tdtt-oh .tdtt-oh-field input[type='number'],
.tdtt-oh .tdtt-oh-share input[type='text'], .tdtt-oh .tdtt-oh-ag-row input {
  min-height: 38px; padding: 0 12px; width: 100%; box-sizing: border-box;
  font-family: var(--body); font-size: 14px; color: var(--text);
  background: var(--input); border: 1px solid var(--border); border-radius: 10px;
}
.tdtt-oh input[type='url']:focus, .tdtt-oh input[type='date']:focus, .tdtt-oh input[type='time']:focus,
.tdtt-oh input[type='number']:focus { outline: 2px solid var(--cyan); outline-offset: 1px; }
.tdtt-oh-eventform { gap: 14px; }
.tdtt-oh-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-family: var(--body); font-size: 13.5px; color: var(--text); }
.tdtt-oh-check input { margin-top: 3px; accent-color: var(--gold); }
.tdtt-oh-check .tdtt-oh-field__h { display: block; }
.tdtt-oh-herogrid, .tdtt-oh-agenda { display: flex; flex-wrap: wrap; gap: 8px; }
.tdtt-oh-agenda { flex-direction: column; align-items: flex-start; }
.tdtt-oh-chipbtn { cursor: pointer; font-family: var(--body); font-size: 12.5px; color: var(--text-dim); background: var(--input); border: 1px solid var(--border); }
.tdtt-oh-chipbtn.is-on {
  color: var(--text); border-color: color-mix(in srgb, var(--red) 65%, var(--surface));
  background: color-mix(in srgb, var(--red) 16%, var(--input));
}
.tdtt-oh-chipbtn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.tdtt-oh-cardresults { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.tdtt-oh-cardrow {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; text-align: left; cursor: pointer;
  font-family: var(--body); font-size: 13.5px; color: var(--text); background: var(--input); border: 1px solid var(--border); border-radius: 10px;
}
.tdtt-oh-cardrow:disabled { opacity: 0.5; cursor: default; }
.tdtt-oh-cardrow:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
.tdtt-oh-ag-row { display: grid; gap: 8px; width: 100%; grid-template-columns: 110px 110px minmax(0, 1fr) auto; align-items: center; }
@media (max-width: 560px) { .tdtt-oh-ag-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .tdtt-oh-ag-label { grid-column: 1 / -1; } }
.tdtt-oh-share { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 12px; background: var(--input); border: 1px solid var(--border); }
.tdtt-oh-reg .tdtt-oh-trow__actions { flex-wrap: wrap; }

/* ── admin tab (B6) ─────────────────────────────────────────────────── */
/* Local list-row + table classes: the shared .tdtt-listrow__right/__badges are width-gated and vanish
   below 620px, so the admin views never use them. */
.tdtt-oh-adminnav { margin-bottom: 4px; }
.tdtt-oh-adm { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tdtt-oh-atotal { margin-left: auto; font-family: var(--body); font-size: 12.5px; color: var(--text-dim); }
.tdtt-oh-alist { display: flex; flex-direction: column; gap: 8px; }
.tdtt-oh-arow {
  display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; min-width: 0;
  background: var(--input); border: 1px solid var(--border); border-radius: 14px;
}
.tdtt-oh-arow.is-open { border-color: color-mix(in srgb, var(--cyan) 45%, var(--surface)); }
.tdtt-oh-arow.is-draft { opacity: 0.6; }
.tdtt-oh-arow__head {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px; width: 100%; padding: 0; text-align: left;
  font: inherit; color: inherit; background: none; border: 0; cursor: pointer;
}
.tdtt-oh-arow__head.is-static { cursor: default; }
.tdtt-oh-arow__head:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.tdtt-oh-arow__main { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 2px; }
.tdtt-oh-arow__title { font-family: var(--head); font-size: 13.5px; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.tdtt-oh-arow__meta, .tdtt-oh-arow__text { margin: 0; font-family: var(--body); font-size: 12.5px; color: var(--text-dim); overflow-wrap: anywhere; }
.tdtt-oh-arow__text { color: var(--text); }
.tdtt-oh-arow__dim { color: var(--muted); font-weight: 400; }
.tdtt-oh-arow__bad { margin: 0; font-family: var(--body); font-size: 12.5px; color: var(--red); overflow-wrap: anywhere; }
.tdtt-oh-arow__ctl, .tdtt-oh-arow__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tdtt-oh-arow__body { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.tdtt-oh-arow .tdtt-btn { min-height: 34px; padding: 0 12px; font-size: 11px; }
.tdtt-oh-arow .tdtt-oh-art { width: 44px; height: 44px; border-radius: 11px; }
.tdtt-oh-banform {
  display: flex; flex-direction: column; gap: 10px; padding: 12px; background: var(--bg);
  border: 1px solid color-mix(in srgb, var(--red) 40%, var(--surface)); border-radius: 12px;
}
.tdtt-oh-banform__t { margin: 0; font-family: var(--body); font-size: 13.5px; color: var(--red); overflow-wrap: anywhere; }
.tdtt-oh-pager { display: flex; justify-content: center; align-items: center; gap: 12px; padding-top: 6px; }
.tdtt-oh-pager__n { font-family: var(--body); font-size: 12.5px; color: var(--text-dim); }
.tdtt-oh-pager .tdtt-btn { min-height: 34px; padding: 0 12px; font-size: 11px; }
.tdtt-oh-pager .tdtt-btn[disabled] { opacity: 0.4; cursor: default; }
.tdtt-oh .tdtt-oh-field input[type='datetime-local'], .tdtt-oh .tdtt-oh-field input[type='date'],
.tdtt-oh .tdtt-oh-field input[type='number'], .tdtt-oh .tdtt-oh-search input[type='text'] {
  min-height: 38px; padding: 0 12px; width: 100%; box-sizing: border-box;
  font-family: var(--body); font-size: 14px; color: var(--text);
  background: var(--input); border: 1px solid var(--border); border-radius: 10px;
}
.tdtt-oh .tdtt-oh-search input[type='text'] { flex: 1; min-width: 0; }
.tdtt-oh input[type='datetime-local']:focus { outline: 2px solid var(--cyan); outline-offset: 1px; }
.tdtt-oh-adform { display: flex; flex-direction: column; gap: 14px; }
.tdtt-oh-atablewrap { overflow-x: auto; }
.tdtt-oh-atable { width: 100%; border-collapse: collapse; font-family: var(--body); font-size: 13px; }
.tdtt-oh-atable th { text-align: left; padding: 6px 12px 8px 0; color: var(--text-dim); font-weight: 600; border-bottom: 1px solid var(--border); }
.tdtt-oh-atable td { padding: 8px 12px 8px 0; color: var(--text); border-bottom: 1px solid var(--border); overflow-wrap: anywhere; vertical-align: top; }
@media (max-width: 620px) {
  .tdtt-oh-atable thead { display: none; }
  .tdtt-oh-atable, .tdtt-oh-atable tbody, .tdtt-oh-atable tr, .tdtt-oh-atable td { display: block; width: 100%; }
  .tdtt-oh-atable tr { padding: 8px 0; border-bottom: 1px solid var(--border); }
  .tdtt-oh-atable td { border: 0; padding: 2px 0; }
  .tdtt-oh-atable td::before { content: attr(data-label) ': '; color: var(--muted); }
}