* { box-sizing: border-box; }

    body {
      margin: 0;
      font-family: var(--font-sans);
      background: var(--color-bg);
      color: var(--text);
    }

    .app {
      max-width: 1680px;
      margin: 0 auto;
      padding: 0 20px 20px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 320px;
      gap: 16px;
    }

    .app-shell {
      min-height: 100vh;
    }

    .app-header {
      max-width: 1680px;
      margin: 0 auto;
      padding: 14px 20px 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }

    .app-brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }

    .app-brand-mark {
      width: 36px;
      height: 36px;
      border-radius: var(--radius-md);
      display: grid;
      place-items: center;
      font-size: 18px;
      background: linear-gradient(145deg, #3948d1 0%, #268358 100%);
      box-shadow: 0 8px 24px rgba(57, 72, 209, 0.22);
    }

    .app-brand-copy {
      display: flex;
      flex-direction: column;
      gap: 1px;
      line-height: 1.15;
    }

    .app-brand-copy strong {
      font-size: 15px;
      letter-spacing: 0.01em;
    }

    .app-brand-copy span {
      font-size: 11px;
      color: var(--muted);
    }

    .account-bar {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      flex-shrink: 0;
    }

    .account-bar.is-guest .account-chip {
      display: none !important;
    }

    .account-bar.is-user .account-btn {
      display: none !important;
    }

    .account-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
      background: color-mix(in srgb, var(--accent) 12%, #262628);
    }

    .account-btn-icon {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-size: 12px;
      background: rgba(255, 255, 255, 0.08);
    }

    .account-chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 4px 6px 4px 4px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: color-mix(in srgb, var(--panel) 88%, transparent);
    }

    .account-avatar {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-size: 12px;
      font-weight: 700;
      color: #ffffff;
      background: linear-gradient(145deg, #505dd6, #268358);
    }

    .account-email {
      font-size: 12px;
      color: var(--text);
      max-width: 180px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .account-logout {
      padding: 6px 10px;
      border-radius: 999px;
      font-size: 12px;
    }

    .toolbar-main-label {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--muted);
      margin-right: 2px;
    }

    .panel {
      background: color-mix(in srgb, var(--panel) 92%, transparent);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 14px;
      backdrop-filter: blur(4px);
    }

    .toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      margin-bottom: 12px;
    }

    .toolbar-group {
      display: inline-flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
      padding-right: 8px;
      margin-right: 2px;
      border-right: 1px solid #3c3c41;
    }

    .toolbar-group:last-of-type {
      border-right: 0;
      padding-right: 0;
    }

    .toolbar-spacer {
      flex: 1 1 auto;
    }

    /* Кнопки просмотрщика повторяют .pl-btn: они стоят в одном ряду с кнопками
       оболочки, и разъезжаться им нельзя. */
    button {
      background: var(--color-surface);
      color: var(--text);
      border: 1px solid var(--color-border);
      padding: 6px 10px;
      border-radius: var(--radius-md);
      cursor: pointer;
      font-size: var(--text-md);
      font-weight: 500;
    }

    button:hover:not(:disabled) {
      border-color: var(--color-border-strong);
      background: var(--color-surface-raised);
    }

    /* Поля унаследованной разметки: до переезда они были системными и в новой
       оболочке выпадали белыми пятнами. Область ограничена явно, чтобы не
       перебить .pl-input оболочки. */
    .pl-viewer select,
    .pl-viewer input:not([type="checkbox"]):not([type="range"]),
    #gtoAdvancedSection select,
    #gtoAdvancedSection input:not([type="checkbox"]):not([type="range"]) {
      background: var(--color-surface-sunken);
      color: var(--color-text);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-sm);
      padding: 5px 8px;
      font: inherit;
      font-size: var(--text-sm);
    }

    .pl-viewer select,
    #gtoAdvancedSection select {
      appearance: none;
      padding-right: 22px;
      background-image:
        linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%),
        linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%);
      background-position:
        calc(100% - 12px) calc(50% - 2px),
        calc(100% - 7px) calc(50% - 2px);
      background-size: 5px 5px, 5px 5px;
      background-repeat: no-repeat;
    }

    .pl-viewer input[type="checkbox"],
    #gtoAdvancedSection input[type="checkbox"] {
      appearance: none;
      -webkit-appearance: none;
      display: grid;
      place-items: center;
      width: 16px;
      height: 16px;
      margin: 0;
      border: 1px solid var(--color-border-strong);
      border-radius: var(--radius-sm);
      background: var(--color-surface-sunken);
      cursor: pointer;
      vertical-align: middle;
    }

    .pl-viewer input[type="checkbox"]:checked,
    #gtoAdvancedSection input[type="checkbox"]:checked {
      border-color: var(--color-accent);
      background: var(--color-accent);
    }

    .pl-viewer input[type="checkbox"]:checked::after,
    #gtoAdvancedSection input[type="checkbox"]:checked::after {
      content: "";
      width: 4px;
      height: 7px;
      margin-bottom: 2px;
      border: solid var(--color-accent-contrast);
      border-width: 0 2px 2px 0;
      transform: rotate(45deg);
    }

    button:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }

    button:focus-visible,
    input[type="checkbox"]:focus-visible {
      outline: 2px solid var(--color-accent);
      outline-offset: 2px;
    }

    button.primary {
      border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
      background: color-mix(in srgb, var(--accent) 20%, #262628);
    }

    .status {
      color: var(--muted);
      font-size: 13px;
    }

    .status.error {
      color: #ef8285;
    }

    .cloud-upload-banner {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 8px;
      margin-bottom: 12px;
      font-size: 13px;
      line-height: 1.35;
      border: 1px solid #56565f;
      background: #2a2a2f;
      color: #cdd1f3;
    }

    .cloud-upload-banner.is-loading::before {
      content: "";
      width: 16px;
      height: 16px;
      border: 2px solid rgba(205, 209, 243, 0.25);
      border-top-color: #7882df;
      border-radius: 50%;
      flex-shrink: 0;
      animation: libraryUploadSpin 0.7s linear infinite;
    }

    .cloud-upload-banner.is-success {
      border-color: #2ea06b;
      background: #12261d;
      color: #b7ead2;
    }

    .cloud-upload-banner.is-warn {
      border-color: #896318;
      background: #2a1f08;
      color: #ebcc8f;
    }

    .cloud-upload-banner.is-error {
      border-color: #be4b4f;
      background: #2d1516;
      color: #f7bcbe;
    }

    .library-upload-status.is-success {
      border-color: #2ea06b;
      background: #12261d;
      color: #b7ead2;
    }

    .library-upload-status.is-success::before {
      display: none;
    }

    .library-upload-status.is-warn {
      border-color: #896318;
      background: #2a1f08;
      color: #ebcc8f;
    }

    .library-upload-status.is-warn::before {
      display: none;
    }

    .library-upload-status.is-error {
      border-color: #be4b4f;
      background: #2d1516;
      color: #f7bcbe;
    }

    .library-upload-status.is-error::before {
      display: none;
    }
    /* lib-1: fix hidden attribute overridden by display:flex */
    .library-upload-status[hidden] { display: none !important; }

    /* lib-2: guest mode — hide search/panel/hint when not logged in */
    .library-guest-mode .library-search-toolbar,
    .library-guest-mode .library-hint-toggle,
    .library-guest-mode .library-panel { display: none; }
    .library-guest-mode #libraryUploadBtn,
    .library-guest-mode #libraryRefreshBtn { opacity: 0.38; pointer-events: none; }

    /* lib-3: empty state block */
    .library-empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 24px 12px 16px;
      gap: 8px;
      color: var(--muted);
      font-size: 12px;
    }
    .library-empty-state[hidden] { display: none !important; }
    .library-empty-state-icon { font-size: 30px; line-height: 1; opacity: 0.55; }
    .library-empty-state-title { font-weight: 700; font-size: 13px; color: var(--text); }

    /* lib-4: hint toggle */
    .library-hint-toggle { margin-bottom: 8px; }
    .library-hint-btn {
      font-size: 11px;
      padding: 3px 8px;
      background: transparent;
      border: 1px solid #3c3c41;
      border-radius: 6px;
      color: #868690;
    }
    .library-hint-btn:hover:not(:disabled) { background: #262629; color: #a4a4ab; border-color: #52525b; }
    .library-hint-collapse {
      font-size: 11px;
      color: var(--muted);
      line-height: 1.4;
      padding: 6px 0 0 2px;
    }
    .library-hint-collapse[hidden] { display: none !important; }

    /* lib-5: section group hide when empty */
    .library-section-group { display: none; }
    .library-section-group.has-items { display: block; }
    .library-section-count {
      font-size: 10px;
      font-weight: 700;
      color: #676770;
      margin-left: 4px;
      letter-spacing: 0.2px;
    }

    /* lib-6: hover on items */
    .library-item {
      cursor: pointer;
      transition: border-color 0.13s, background 0.13s;
    }
    .library-item:hover {
      border-color: #52525b;
      background: color-mix(in srgb, var(--panel) 92%, #505dd6 8%);
    }

    /* lib-7: delete button compact → expand on parent hover */
    .library-item-delete .del-text { display: none; margin-left: 3px; }
    .library-item:hover .library-item-delete { padding: 4px 9px; }
    .library-item:hover .library-item-delete .del-text { display: inline; }

    .table-wrap {
      position: relative;
      container-type: size;
      min-height: 660px;
      width: 100%;
      display: grid;
      place-items: center;
      /* Места сидят на кромке овала и выступают наружу (~59px).
         Padding держит и обводку, и HUD внутри clip-box — иначе
         overflow + radius срезают левый/правый край эллипса. */
      padding: 88px 84px 100px;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      background-color: var(--table-room, #08080a);
      background-image: var(--table-room-image, none);
      background-size: cover;
      background-position: center;
      overflow: hidden;
    }

    html[data-felt="solid"] .table-wrap {
      background-image: none;
    }

    html[data-felt="none"] .table-wrap {
      background-image: none;
      background-color: var(--color-bg);
    }

    .table-wrap .legacy-hand-strip {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 7;
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 36px;
      padding: 6px 48px 6px 12px;
      box-sizing: border-box;
      background: rgba(8, 8, 10, 0.62);
    }

    .table-wrap .legacy-hand-strip .progress-wrap {
      flex: 1 1 auto;
      min-width: 64px;
      height: 4px;
      margin: 0;
      border: none;
      background: rgba(255, 255, 255, 0.12);
    }

    .table-wrap .legacy-hand-strip #stepProgress {
      flex: 0 0 auto;
      margin: 0;
      color: #c8c8ce;
      font-family: var(--font-mono);
      font-size: 12px;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }

    .table-look-menu {
      position: absolute;
      top: 6px;
      right: 8px;
      z-index: 14;
    }

    .table-look-menu:has(#tableLookPanel:not([hidden])) {
      bottom: 12px;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }

    .table-look-toggle {
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      width: 36px;
      height: 36px;
      padding: 0;
      border: 1px solid rgba(255, 255, 255, 0.16);
      border-radius: 10px;
      background: rgba(12, 12, 14, 0.78);
      color: #f4f4f6;
      cursor: pointer;
    }

    .table-look-toggle svg {
      width: 16px;
      height: 16px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.7;
    }

    .table-look-toggle:hover,
    .table-look-toggle[aria-expanded="true"] {
      border-color: rgba(255, 255, 255, 0.36);
      background: rgba(16, 16, 18, 0.92);
    }

    .table-look-panel {
      position: relative;
      top: auto;
      right: auto;
      width: min(280px, calc(100cqw - 24px));
      flex: 1 1 auto;
      min-height: 0;
      margin-top: 8px;
      overflow: auto;
      padding: 12px;
      border: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));
      border-radius: 12px;
      background: var(--color-surface-raised, #191a1e);
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    }

    .table-look-panel[hidden] {
      display: none;
    }

    .table-look-panel .pl-look {
      gap: 12px;
    }

    .table-look-panel .pl-look-block {
      padding: 10px;
      gap: 8px;
    }

    .table-wrap.empty .table-oval {
      opacity: 0.3;
      filter: saturate(0.8);
    }

    .table-placeholder {
      position: absolute;
      z-index: 12;
      max-width: 440px;
      padding: 16px 18px;
      border-radius: var(--radius-md);
      border: 1px solid var(--color-border-strong);
      background: rgba(25, 25, 28, 0.92);
      text-align: center;
      display: none;
    }

    .table-wrap.empty .table-placeholder {
      display: block;
    }

    .table-placeholder-title {
      font-size: 16px;
      font-weight: 700;
      margin-bottom: 6px;
    }

    .table-placeholder-text {
      font-size: 13px;
      color: #d0d0d2;
      margin-bottom: 10px;
      line-height: 1.4;
    }

    .table-placeholder.error {
      border-color: #8b3033;
      background: rgba(42, 20, 21, 0.92);
    }

    .table-oval {
      box-sizing: border-box;
      width: min(1100px, 88%);
      aspect-ratio: 2.2 / 1;
      /* Стадион: прямые длинные стороны, полукруги на торцах
         (радиус = половина высоты, не эллипс 50% и не 48px). */
      border-radius: 999px;
      position: relative;
      z-index: 2;
      isolation: isolate;
      background: transparent;
    }

    .table-oval::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      z-index: 0;
      pointer-events: none;
      background:
        radial-gradient(
          ellipse at 50% 40%,
          var(--table-felt-hi, #7a3140) 0%,
          var(--table-felt, #4e1e28) 52%,
          var(--table-felt-shade, #2a1218) 100%
        );
      box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--table-rail-inner, #e0c36a) 55%, transparent),
        inset 0 0 48px rgba(0, 0, 0, 0.42),
        0 0 0 2px var(--table-rail-inner, #e0c36a),
        0 0 0 18px var(--table-rail, #c4a36c),
        0 7px 0 18px var(--table-rail-edge, #8a6a3e),
        0 22px 40px rgba(0, 0, 0, 0.62);
      opacity: var(--table-opacity, 1);
    }

    .table-center {
      position: absolute;
      left: 50%;
      top: 46%;
      transform: translate(-50%, -50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      z-index: 3;
      pointer-events: none;
      max-width: 78%;
    }

    .pot-label {
      color: #e8c44a;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0.02em;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
    }

    .pot {
      background: none;
      border: none;
      padding: 0;
      color: #f4f4f6;
      font-family: var(--font-mono);
      font-size: 13px;
      font-variant-numeric: tabular-nums;
    }

    .center-board {
      display: flex;
      gap: 6px;
      align-items: center;
      min-height: 0;
    }

    .pot-chips {
      display: flex;
      align-items: flex-end;
      gap: 4px;
      min-height: 12px;
    }

    .pot-chip-stack {
      position: relative;
      width: 14px;
      height: 11px;
    }

    .pot-chip-stack i {
      position: absolute;
      left: 0;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      border: 1px dashed rgba(255, 255, 255, 0.35);
    }

    .pot-chip-stack i:nth-child(1) { bottom: 0; }
    .pot-chip-stack i:nth-child(2) { bottom: 2px; }
    .pot-chip-stack i:nth-child(3) { bottom: 4px; }
    .pot-chip-stack i:nth-child(4) { bottom: 6px; }
    .pot-chip-stack i:nth-child(5) { bottom: 8px; }

    .pot-chip-stack.is-yellow i { background: radial-gradient(circle at 32% 30%, #f3d56a, #b8860b); }
    .pot-chip-stack.is-black i { background: radial-gradient(circle at 32% 30%, #4a4a50, #141416); border-color: rgba(255,255,255,0.2); }
    .pot-chip-stack.is-green i { background: radial-gradient(circle at 32% 30%, #4ecf7a, #176b38); }
    .pot-chip-stack.is-red i { background: radial-gradient(circle at 32% 30%, #f2555a, #8d171c); }
    .pot-chip-stack.is-blue i { background: radial-gradient(circle at 32% 30%, #6ec8ff, #1a4f8a); }
    .pot-chip-stack.is-pink i { background: radial-gradient(circle at 32% 30%, #f4a4d0, #9a2f6c); }
    .pot-chip-stack.is-orange i { background: radial-gradient(circle at 32% 30%, #ffb45a, #b85a12); }

    .seat {
      position: absolute;
      z-index: 1;
      box-sizing: border-box;
      width: 112px;
      height: auto;
      transform: translate(-50%, -50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      overflow: visible;
      background: transparent;
      border: none;
      padding: 0;
      font-size: 12px;
      line-height: 1.2;
      cursor: default;
      user-select: none;
    }

    .seat .cards {
      position: relative;
      z-index: 1;
      display: flex;
      margin: 0 0 -10px;
    }

    .seat .hole-cards {
      display: flex;
      width: auto;
      height: auto;
      gap: 3px;
    }

    .seat-hud {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      width: 104px;
      min-width: 0;
      padding: 5px 8px 6px;
      border-radius: 6px;
      background: rgba(10, 10, 12, 0.72);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .seat-hud.is-empty {
      padding: 8px;
      opacity: 0.7;
    }

    .seat .role {
      font-family: var(--font-mono);
      font-size: 9px;
      font-weight: 600;
      letter-spacing: 0.04em;
      color: #c8c8ce;
      margin: 0;
    }

    .seat .name {
      font-size: 11px;
      font-weight: 600;
      color: #f4f4f6;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 100%;
    }

    .seat .chips {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      margin: 1px 0 0;
      padding: 0;
      min-height: 16px;
      border: none;
      border-radius: 0;
      background: transparent;
      color: #6ec8ff;
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      cursor: pointer;
    }

    .seat .chips:hover {
      color: #9ad8ff;
    }

    .seat-hud .hud-action {
      display: none;
      width: 100%;
      margin-top: 2px;
    }

    .seat-hud .hud-action:not([hidden]) {
      display: flex;
      justify-content: center;
    }

    .seat-hud .hud-action .action-badge {
      width: 100%;
      max-width: 100%;
      justify-content: center;
    }

    .seat.is-folded .seat-hud {
      opacity: 0.42;
    }

    .seat.is-folded .cards {
      opacity: 0.35;
    }

    .bet-pile {
      position: absolute;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 4px;
      pointer-events: none;
      z-index: 4;
    }

    .seat-south .bet-pile { left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); }
    .seat-north .bet-pile { left: 50%; top: calc(100% + 6px); transform: translateX(-50%); }
    .seat-west .bet-pile { left: calc(100% + 6px); top: 50%; transform: translateY(-50%); }
    .seat-east .bet-pile { right: calc(100% + 6px); top: 50%; left: auto; transform: translateY(-50%); }
    .seat-south-west .bet-pile { left: calc(100% + 8px); bottom: calc(100% + 2px); transform: none; }
    .seat-south-east .bet-pile { right: calc(100% + 8px); left: auto; bottom: calc(100% + 2px); transform: none; }
    .seat-north-west .bet-pile { left: calc(100% + 8px); top: calc(100% + 2px); transform: none; }
    .seat-north-east .bet-pile { right: calc(100% + 8px); left: auto; top: calc(100% + 2px); transform: none; }

    .chip-stack {
      position: relative;
      flex: 0 0 12px;
      width: 12px;
      height: 10px;
    }

    .chip-stack i {
      position: absolute;
      left: 0;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      border: 1px dashed rgba(255, 255, 255, 0.35);
      background: radial-gradient(circle at 32% 30%, #e8c56a, #8d6414);
    }

    .chip-stack i:nth-child(1) { bottom: 0; }
    .chip-stack i:nth-child(2) { bottom: 2px; }
    .chip-stack i:nth-child(3) { bottom: 4px; }

    .bet-amount {
      font-family: var(--font-mono);
      font-size: 10px;
      font-variant-numeric: tabular-nums;
      color: #e5bd6d;
      white-space: nowrap;
      line-height: 1;
    }

    .table-action-mix {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 6;
      display: flex;
      flex-wrap: nowrap;
      align-items: stretch;
      gap: 0;
      height: 28px;
      max-height: 28px;
      overflow: hidden;
    }

    .table-act {
      position: relative;
      display: flex;
      flex: 1 1 0;
      align-items: center;
      justify-content: space-between;
      gap: 4px;
      min-width: 0;
      height: 100%;
      overflow: hidden;
      padding: 0 8px;
      border: none;
      border-radius: 0;
      background: rgba(8, 8, 10, 0.78);
    }

    .table-act + .table-act {
      box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.08);
    }

    .table-act-fill {
      position: absolute;
      inset: 0 auto 0 0;
      width: var(--p, 0%);
      background: currentColor;
      opacity: 0.28;
    }

    .table-act.action-fold { color: #b8b8be; }
    .table-act.action-check,
    .table-act.action-call { color: #35c07a; }
    .table-act.action-bet,
    .table-act.action-raise { color: #8b93ff; }
    .table-act.action-allin { color: #f2555a; }

    .table-act.is-selected {
      box-shadow: inset 0 0 0 1px currentColor;
    }

    .table-act + .table-act.is-selected {
      box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.08), inset 0 0 0 1px currentColor;
    }

    .table-act-label,
    .table-act-pct {
      position: relative;
      z-index: 1;
      font-family: var(--font-mono);
      font-size: 11px;
      font-size: clamp(8px, 1.5vw, 11px);
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }

    .table-act-label {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .table-act-pct {
      flex: 0 0 auto;
    }

    .table-action-empty {
      margin: 0;
      font-size: 12px;
      color: var(--muted);
    }

    .chip-fly {
      position: absolute;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      border: 2px dashed rgba(255, 255, 255, 0.4);
      background: radial-gradient(circle at 32% 30%, #e8c56a, #8d6414);
      z-index: 20;
      pointer-events: none;
    }

    .seat.hero .seat-hud {
      border-color: rgba(255, 255, 255, 0.2);
    }

    .seat.hero .cards {
      margin-bottom: -20px;
    }

    .seat.button-seat {
      background: transparent;
      box-shadow: none;
    }

    .dealer-button-chip {
      position: absolute;
      right: -11px;
      top: -11px;
      width: auto;
      min-width: 24px;
      height: 24px;
      padding: 0 5px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-mono);
      font-size: 9px;
      font-weight: 800;
      letter-spacing: 0.02em;
      color: #1f1605;
      border: 1px solid #e5bd6d;
      background: radial-gradient(circle at 35% 35%, #f6e8cb 0%, #e5bd6d 45%, #be8e2d 100%);
      box-shadow: 0 0 0 1px rgba(25, 25, 27, 0.65), 0 0 10px rgba(229, 189, 109, 0.45);
      z-index: 5;
      user-select: none;
      pointer-events: none;
    }

    .dealer-button-chip.is-pos {
      color: #f4f4f6;
      border: 1px solid rgba(255, 255, 255, 0.2);
      background: rgba(12, 12, 14, 0.88);
      box-shadow: 0 0 0 1px rgba(8, 8, 10, 0.7);
      font-weight: 600;
    }

    .seat.empty {
      width: 88px;
      background: transparent;
      border: none;
      opacity: 0.78;
    }

    .seat.active .seat-hud {
      border-color: #6ec8ff;
    }

    .seat.winner .seat-hud {
      border-color: #e5bd6d;
    }

    .seat .name-row {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 3px;
      width: 100%;
    }

    .seat .identity {
      display: flex;
      align-items: flex-start;
      gap: 6px;
      width: 100%;
    }

    .seat .identity .name {
      font-weight: 600;
      font-size: 11px;
    }

    .avatar {
      width: 20px;
      height: 20px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 9px;
      font-weight: 700;
      color: #ffffff;
      border: 1px solid rgba(255, 255, 255, 0.24);
      flex: 0 0 20px;
      margin-top: 1px;
      text-transform: uppercase;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      overflow: hidden;
      transition: filter 0.15s ease, transform 0.15s ease;
    }

    .avatar.small {
      width: 16px;
      height: 16px;
      font-size: 8px;
      flex-basis: 16px;
      margin-top: 0;
    }


    .seat .badges {
      display: inline-flex;
      gap: 3px;
      align-items: center;
    }

    .seat .badge {
      font-size: 9px;
      font-weight: 700;
      padding: 2px 4px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: #ffffff;
      letter-spacing: 0.2px;
    }

    .seat .badge.hero-badge { background: #268358; }
    .seat .badge.pos-badge { background: #444447; }

    .seat .bounty { display: none; }
    .seat .bounty {
      color: #ef8083;
      margin-top: 1px;
      font-size: 10px;
      font-weight: 600;
    }
    .seat.empty .role { color: var(--muted); }
    .seat .showdown-result {
      margin-top: 2px;
      min-height: 0;
      font-size: 10px;
      color: #e5bd6d;
      font-weight: 700;
      line-height: 1.2;
      white-space: normal;
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    .seat .hero-gto { display: none; }
    .hero-gto-title {
      color: #9da4e8;
      font-weight: 700;
      margin-bottom: 2px;
    }
    .hero-gto-mix {
      display: flex;
      flex-wrap: wrap;
      gap: 3px;
    }
    .hero-gto-bar {
      margin-top: 3px;
      height: 6px;
      width: 100%;
      border-radius: 999px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.16);
      background: #222226;
      display: flex;
    }
    .hero-gto-bar-segment {
      height: 100%;
      min-width: 2px;
    }
    .hero-gto-chip {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      padding: 1px 5px;
      font-size: 9px;
      font-weight: 700;
      color: #ffffff;
      letter-spacing: 0.1px;
    }
    .hero-gto-chip.fold { background: #505054; }
    .hero-gto-chip.check { background: #2d39a3; }
    .hero-gto-chip.call { background: #27875a; }
    .hero-gto-chip.bet { background: #966d1b; }
    .hero-gto-chip.raise { background: #a8151a; }
    .hero-gto-chip.allin { background: #b9171c; }
    .hero-gto-chip.other { background: #444447; }
    .hero-gto-bar-segment.fold { background: #505054; }
    .hero-gto-bar-segment.check { background: #2d39a3; }
    .hero-gto-bar-segment.call { background: #27875a; }
    .hero-gto-bar-segment.bet { background: #966d1b; }
    .hero-gto-bar-segment.raise { background: #a8151a; }
    .hero-gto-bar-segment.allin { background: #b9171c; }
    .hero-gto-bar-segment.other { background: #444447; }
    .hero-gto-meta {
      margin-top: 2px;
      color: #a4a4ab;
      font-size: 8px;
    }
    .hero-gto-confidence {
      color: #868690;
      font-size: 8px;
    }
    .hero-gto-tier-row {
      margin-top: 3px;
    }
    .hole-cards {
      display: flex;
      gap: 3px;
      align-items: stretch;
      min-height: 0;
    }

    .mini-card {
      box-sizing: border-box;
      flex: 0 0 auto;
      width: 34px;
      height: 48px;
      overflow: hidden;
      border-radius: 4px;
      border: 1px solid #d4d0c8;
      background: #f4f1ea;
      color: #161616;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 700;
      line-height: 1;
      padding: 0 2px;
      transition: transform 0.16s ease, opacity 0.16s ease;
    }

    .seat.hero .mini-card {
      width: 40px;
      height: 56px;
      font-size: 16px;
    }

    .mini-card.back,
    html[data-backs="lattice"] .mini-card.back:not([data-backs-preview]),
    html[data-cards] .mini-card.back:not([data-backs-preview]),
    .mini-card.back[data-backs-preview="lattice"] {
      position: relative;
      isolation: isolate;
      font-size: 0;
      line-height: 0;
      color: transparent;
      overflow: hidden;
      border-color: #3d4270;
      background:
        repeating-linear-gradient(45deg, rgba(89, 100, 214, 0.5) 0 1px, transparent 1px 5px),
        repeating-linear-gradient(-45deg, rgba(89, 100, 214, 0.28) 0 1px, transparent 1px 5px),
        linear-gradient(180deg, #22264a, #16182e);
      box-shadow: inset 0 0 0 1.5px #b8bcd8;
    }

    .mini-card.back::before,
    .mini-card.back::after {
      content: "";
      position: absolute;
      pointer-events: none;
    }

    .mini-card.back::before {
      inset: 4px;
      border: 1px solid rgba(200, 204, 232, 0.45);
      border-radius: 2px;
    }

    .mini-card.back::after {
      width: 7px;
      height: 7px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(45deg);
      background: #8b92d8;
      box-shadow: 0 0 0 1px #16182e;
    }

    html[data-backs="indigo"] .mini-card.back:not([data-backs-preview]),
    .mini-card.back[data-backs-preview="indigo"] {
      border-color: #3a4288;
      background: radial-gradient(ellipse at 50% 38%, #3d4aa0 0%, #1a2268 68%, #141848 100%);
      box-shadow: inset 0 0 0 1.5px #c4c8ec;
    }

    html[data-backs="indigo"] .mini-card.back:not([data-backs-preview])::before,
    .mini-card.back[data-backs-preview="indigo"]::before {
      inset: 5px;
      border-radius: 40%;
      border-color: rgba(220, 224, 248, 0.7);
    }

    html[data-backs="indigo"] .mini-card.back:not([data-backs-preview])::after,
    .mini-card.back[data-backs-preview="indigo"]::after {
      width: auto;
      height: auto;
      transform: translate(-50%, -50%);
      background: none;
      box-shadow: none;
      content: "♠";
      color: #d4d8f4;
      font-size: 11px;
      line-height: 1;
      font-weight: 700;
    }

    html[data-backs="gold"] .mini-card.back:not([data-backs-preview]),
    .mini-card.back[data-backs-preview="gold"] {
      border-color: #c4a36c;
      background:
        repeating-linear-gradient(45deg, rgba(196, 163, 108, 0.45) 0 1px, transparent 1px 6px),
        repeating-linear-gradient(-45deg, rgba(160, 124, 64, 0.28) 0 1px, transparent 1px 6px),
        linear-gradient(180deg, #4a241c, #2a1410);
      box-shadow: inset 0 0 0 1.5px #d8c08a;
    }

    html[data-backs="gold"] .mini-card.back:not([data-backs-preview])::before,
    .mini-card.back[data-backs-preview="gold"]::before {
      border-color: rgba(232, 208, 150, 0.55);
    }

    html[data-backs="gold"] .mini-card.back:not([data-backs-preview])::after,
    .mini-card.back[data-backs-preview="gold"]::after {
      background: #d4b06a;
      box-shadow: 0 0 0 1px #2a1410;
    }

    html[data-backs="night"] .mini-card.back:not([data-backs-preview]),
    .mini-card.back[data-backs-preview="night"] {
      border-color: #6a6a72;
      background:
        repeating-linear-gradient(0deg, transparent 0 4px, rgba(200, 200, 210, 0.14) 4px 5px),
        repeating-linear-gradient(90deg, transparent 0 4px, rgba(200, 200, 210, 0.14) 4px 5px),
        #141418;
      box-shadow: inset 0 0 0 1.5px #8a8a92;
    }

    html[data-backs="night"] .mini-card.back:not([data-backs-preview])::before,
    .mini-card.back[data-backs-preview="night"]::before {
      border-color: rgba(200, 200, 210, 0.28);
    }

    html[data-backs="night"] .mini-card.back:not([data-backs-preview])::after,
    .mini-card.back[data-backs-preview="night"]::after {
      background: #c8c8d0;
      box-shadow: 0 0 0 1px #141418;
    }

    html[data-backs="forest"] .mini-card.back:not([data-backs-preview]),
    .mini-card.back[data-backs-preview="forest"] {
      border-color: #2a6a44;
      background:
        repeating-linear-gradient(45deg, rgba(220, 208, 168, 0.28) 0 1px, transparent 1px 5px),
        repeating-linear-gradient(-45deg, rgba(220, 208, 168, 0.16) 0 1px, transparent 1px 5px),
        linear-gradient(180deg, #1e4a30, #12301e);
      box-shadow: inset 0 0 0 1.5px #c8c0a0;
    }

    html[data-backs="forest"] .mini-card.back:not([data-backs-preview])::before,
    .mini-card.back[data-backs-preview="forest"]::before {
      border-color: rgba(220, 208, 168, 0.45);
    }

    html[data-backs="forest"] .mini-card.back:not([data-backs-preview])::after,
    .mini-card.back[data-backs-preview="forest"]::after {
      background: #d8d0b0;
      box-shadow: 0 0 0 1px #12301e;
    }

    .mini-card.suit-clubs,
    .mini-card.suit-spades,
    .card.suit-clubs,
    .card.suit-spades {
      background: #f4f1ea;
      color: #161616;
    }

    .mini-card.suit-hearts,
    .mini-card.suit-diamonds,
    .card.suit-hearts,
    .card.suit-diamonds {
      background: #f4f1ea;
      color: #c42b32;
    }

    .meta h3 {
      margin: 0 0 8px;
      font-size: 15px;
    }

    .meta-row {
      font-size: 13px;
      margin-bottom: 6px;
      color: #d0d0d2;
    }

    .board {
      display: flex;
      gap: 6px;
      margin-top: 8px;
      flex-wrap: wrap;
    }

    .card {
      box-sizing: border-box;
      color: #161616;
      background: #f4f1ea;
      border-radius: 6px;
      border: 1px solid #d4d0c8;
      flex: 0 0 auto;
      width: 42px;
      height: 58px;
      text-align: center;
      font-weight: 700;
      font-size: 18px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 3px;
      overflow: hidden;
      animation: popIn 0.16s ease;
    }

    @keyframes popIn {
      from { transform: translateY(4px) scale(0.96); opacity: 0.75; }
      to { transform: translateY(0) scale(1); opacity: 1; }
    }

    .meta-inline {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin: 8px 0 6px;
    }

    .street-pill {
      border: 1px solid #56565f;
      background: #2a2a2f;
      color: #cdd1f3;
      border-radius: 999px;
      padding: 4px 10px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.4px;
    }

    .progress-wrap {
      width: 100%;
      height: 6px;
      border-radius: 999px;
      background: #232327;
      border: 1px solid #3c3c41;
      overflow: hidden;
      margin-bottom: 8px;
    }

    .progress-bar {
      height: 100%;
      width: 100%;
      display: flex;
      gap: 2px;
      overflow: hidden;
    }

    .action-badge {
      display: inline-flex;
      max-width: 160px;
      align-items: center;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      padding: 2px 7px;
      font-size: 10px;
      font-weight: 700;
      color: #ffffff;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.2;
    }

    .action-fold { background: #505054; }
    .action-check { background: #2d39a3; }
    .action-call { background: #27875a; }
    .action-bet { background: #966d1b; }
    .action-raise { background: #a8151a; }
    .action-allin { background: #b9171c; }
    .action-other { background: #444447; }

    .actions-list button.hero-action {
      border-left: 3px solid var(--hero);
      padding-left: 9px;
    }
    .actions-list button.street-separator {
      background: transparent;
      border: none;
      border-top: 1px solid #37373b;
      border-bottom: 1px solid #37373b;
      border-radius: 0;
      color: #939396;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.5px;
      padding: 5px 8px;
      text-align: left;
      cursor: pointer;
      width: 100%;
    }
    .actions-list button.street-separator:hover:not(:disabled) {
      background: rgba(80, 93, 214, 0.06);
      color: #d0d0d2;
    }
    .actions-list button.street-separator.primary {
      background: rgba(80, 93, 214, 0.1);
      border-top-color: var(--accent);
      border-bottom-color: var(--accent);
      color: #7882df;
    }

    .actions-toolbar {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin: 10px 0;
    }

    .side-tabs {
      display: flex;
      gap: 6px;
      margin: 10px 0 8px;
    }

    .side-tab-btn {
      flex: 1 1 0;
      text-align: center;
      font-size: 12px;
      padding: 7px 8px;
    }

    .side-tab-content[hidden] {
      display: none !important;
    }

    .auth-user-label {
      display: none;
    }

    .side-tab-btn.requires-auth:not(.logged-in)::after {
      content: "●";
      color: #cf9625;
      font-size: 8px;
      margin-left: 4px;
      vertical-align: super;
    }

    .cloud-banner {
      font-size: 12px;
      color: var(--muted);
      padding: 6px 10px;
      border: 1px dashed var(--border);
      border-radius: 8px;
      margin-bottom: 8px;
    }

    .library-panel {
      display: flex;
      flex-direction: column;
      gap: 8px;
      max-height: 520px;
      overflow: auto;
    }

    .library-section-title {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--muted);
      margin-top: 4px;
    }

    .library-list {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .library-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 7px 8px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: color-mix(in srgb, var(--panel) 88%, transparent);
      font-size: 12px;
    }

    .library-item-main {
      flex: 1;
      min-width: 0;
      cursor: pointer;
    }

    .library-item-title {
      font-weight: 600;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .library-item-meta {
      font-size: 11px;
      color: var(--muted);
    }

    .library-item-delete {
      flex-shrink: 0;
      font-size: 11px;
      padding: 4px 8px;
      border-radius: 6px;
      border: 1px solid #6e3032;
      background: #3d1f20;
      color: #f0b4b6;
      cursor: pointer;
    }

    .library-item-delete:hover {
      background: #5a282a;
      border-color: #be4b4f;
    }

    .library-hint {
      font-size: 11px;
      color: var(--muted);
      margin: 0 0 8px;
      line-height: 1.35;
    }

    .library-toolbar {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }

    .library-toolbar input[type="search"] {
      flex: 1 1 120px;
      min-width: 100px;
      font-size: 12px;
      padding: 6px 8px;
      border-radius: 6px;
      border: 1px solid var(--border);
      background: var(--bg);
      color: var(--text);
      appearance: none;
    }

    .library-toolbar input[type="search"]::-webkit-search-decoration,
    .library-toolbar input[type="search"]::-webkit-search-cancel-button,
    .library-toolbar input[type="search"]::-webkit-search-results-button {
      appearance: none;
    }

    .library-upload-status {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      color: #cdd1f3;
      padding: 6px 10px;
      border: 1px solid #56565f;
      border-radius: 8px;
      margin-bottom: 8px;
      background: #2a2a2f;
    }

    .library-upload-status::before {
      content: "";
      width: 14px;
      height: 14px;
      border: 2px solid rgba(205, 209, 243, 0.25);
      border-top-color: #7882df;
      border-radius: 50%;
      flex-shrink: 0;
      animation: libraryUploadSpin 0.7s linear infinite;
    }

    @keyframes libraryUploadSpin {
      to { transform: rotate(360deg); }
    }

    .auth-modal-backdrop {
      position: fixed;
      inset: 0;
      background: color-mix(in srgb, var(--color-bg) 72%, transparent);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      padding: 16px;
    }

    .auth-modal-backdrop.open {
      display: flex;
    }

    .auth-modal {
      position: relative;
      width: min(440px, 100%);
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-lg);
      padding: 22px 22px 18px;
    }

    .auth-modal-backdrop.open .auth-modal {
      transform: scale(1);
      opacity: 1;
    }

    .auth-modal-close {
      position: absolute;
      top: 14px;
      right: 14px;
      width: 32px;
      height: 32px;
      padding: 0;
      border-radius: 8px;
      font-size: 20px;
      line-height: 1;
      color: var(--muted);
      background: transparent;
    }

    .auth-modal-close:hover:not(:disabled) {
      color: var(--text);
      background: rgba(255, 255, 255, 0.06);
      border-color: var(--border);
    }

    .auth-modal-brand {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 18px;
      padding-right: 36px;
    }

    .auth-modal-logo {
      width: 44px;
      height: 44px;
      border-radius: var(--radius-md);
      display: grid;
      place-items: center;
      font-size: 22px;
      background: linear-gradient(145deg, #3948d1 0%, #268358 100%);
      box-shadow: 0 10px 28px rgba(57, 72, 209, 0.24);
      flex-shrink: 0;
    }

    .auth-modal-brand-copy h3 {
      margin: 0;
      font-size: 20px;
      line-height: 1.15;
    }

    .auth-modal-brand-copy p {
      margin: 4px 0 0;
      font-size: 13px;
      color: var(--muted);
      line-height: 1.4;
    }

    .auth-mode-tabs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
      padding: 4px;
      margin-bottom: 16px;
      border-radius: var(--radius-md);
      background: rgba(0, 0, 0, 0.18);
      border: 1px solid rgba(255, 255, 255, 0.04);
    }

    .auth-mode-tab {
      padding: 9px 12px;
      border-radius: 9px;
      font-size: 13px;
      font-weight: 600;
      background: transparent;
      border: 1px solid transparent;
      color: var(--muted);
    }

    .auth-mode-tab.active {
      color: var(--text);
      background: color-mix(in srgb, var(--accent) 18%, #262628);
      border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
      box-shadow: 0 6px 18px rgba(57, 72, 209, 0.12);
    }

    .auth-form {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .auth-field label {
      display: block;
      font-size: 12px;
      font-weight: 600;
      color: color-mix(in srgb, var(--text) 82%, var(--muted));
      margin-bottom: 6px;
    }

    .auth-field input {
      width: 100%;
      box-sizing: border-box;
      padding: 11px 12px;
      border-radius: var(--radius-md);
      border: 1px solid color-mix(in srgb, var(--border) 88%, #7882df 12%);
      background: rgba(12, 12, 14, 0.72);
      color: var(--text);
      font-size: 14px;
      transition: border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
    }

    /* Autofill dark mode styling */
    .auth-field input:-webkit-autofill,
    .auth-field input:-webkit-autofill:hover,
    .auth-field input:-webkit-autofill:focus,
    .auth-field input:-webkit-autofill:active {
      -webkit-text-fill-color: var(--text) !important;
      -webkit-box-shadow: 0 0 0px 1000px #0c0c0e inset !important;
      box-shadow: 0 0 0px 1000px #0c0c0e inset !important;
      transition: background-color 5000s ease-in-out 0s;
    }

    .auth-password-input-wrapper {
      position: relative;
      width: 100%;
    }

    .auth-password-input-wrapper input {
      padding-right: 40px;
    }

    .auth-password-toggle-btn {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      color: var(--muted);
      cursor: pointer;
      padding: 4px;
      font-size: 16px;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      transition: color 0.15s ease, background-color 0.15s ease;
    }

    .auth-password-toggle-btn:hover:not(:disabled) {
      color: var(--text);
      background: rgba(255, 255, 255, 0.08);
    }

    .auth-field input:disabled,
    .auth-mode-tab:disabled,
    .auth-submit:disabled,
    .auth-inline-link:disabled,
    .auth-modal-close:disabled {
      opacity: 0.5;
      cursor: not-allowed !important;
    }

    .auth-field input.auth-code-input {
      letter-spacing: 0.32em;
      text-align: center;
      font-size: 22px;
      font-weight: 700;
      padding-left: 18px;
      padding-right: 18px;
    }

    .auth-field input[readonly] {
      opacity: 0.82;
      cursor: default;
    }

    .auth-password-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 6px;
    }

    .auth-password-row label {
      margin: 0;
    }

    .auth-inline-link {
      background: none;
      border: none;
      color: #7882df;
      font-size: 12px;
      padding: 0;
      cursor: pointer;
      text-decoration: none;
    }

    .auth-inline-link:hover:not(:disabled) {
      color: #929be6;
      background: none;
      border-color: transparent;
      text-decoration: underline;
    }

    .auth-submit {
      width: 100%;
      margin-top: 4px;
      padding: 11px 14px;
      border-radius: var(--radius-md);
      font-size: 14px;
      font-weight: 600;
      transition: background-color 0.15s ease, opacity 0.15s ease, transform 0.1s ease;
    }

    .auth-submit:active:not(:disabled) {
      transform: scale(0.98);
    }

    .auth-submit.loading {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .auth-spinner {
      width: 16px;
      height: 16px;
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      border-top-color: #ffffff;
      animation: auth-spin 0.6s linear infinite;
      flex-shrink: 0;
    }

    @keyframes auth-spin {
      to { transform: rotate(360deg); }
    }

    .auth-modal-message {
      font-size: 12px;
      line-height: 1.5;
      color: #ef8285;
      background: rgba(234, 87, 92, 0.1);
      border: 1px solid rgba(234, 87, 92, 0.2);
      border-radius: 8px;
      padding: 0;
      opacity: 0;
      max-height: 0;
      overflow: hidden;
      transition: opacity 0.2s ease, padding 0.2s ease, max-height 0.2s ease, margin-top 0.2s ease, margin-bottom 0.2s ease;
      display: flex;
      align-items: flex-start;
      gap: 8px;
      box-sizing: border-box;
    }

    .auth-modal-message.has-message {
      padding: 10px 12px;
      opacity: 1;
      max-height: 80px;
      margin-top: 4px;
      margin-bottom: 4px;
    }

    .auth-modal-message::before {
      content: "⚠️";
      font-size: 13px;
      flex-shrink: 0;
    }

    .auth-modal-message.success {
      color: #5acf98;
      background: rgba(63, 185, 128, 0.1);
      border: 1px solid rgba(63, 185, 128, 0.2);
    }

    .auth-modal-message.success::before {
      content: "✓";
      font-size: 13px;
      font-weight: bold;
    }

    .auth-modal-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px solid rgba(255, 255, 255, 0.06);
      font-size: 12px;
      color: var(--muted);
    }

    .auth-modal-footer-switch {
      margin-left: auto;
      text-align: right;
    }

    .auth-modal-hint {
      color: var(--muted);
      font-size: 13px;
      margin: -4px 0 12px;
      line-height: 1.45;
    }

    .cloud-banner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }

    .cloud-banner-action {
      padding: 6px 10px;
      border-radius: 999px;
      font-size: 12px;
    }

    .actions-list {
      max-height: 410px;
      overflow: auto;
      border-top: 1px solid var(--border);
      padding-top: 8px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .actions-list.hand-log {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 0;
      height: 46vh;
      max-height: 46vh;
      overflow: hidden;
      border-top: 0;
      padding: 0;
      background: #16161a;
      border: 1px solid #2a2a30;
      border-radius: var(--radius-md);
    }

    .hand-log-col {
      display: flex;
      flex-direction: column;
      gap: 6px;
      min-width: 0;
      min-height: 0;
      height: 100%;
      overflow-x: hidden;
      overflow-y: auto;
      padding: 6px 6px 8px;
      border-right: 1px solid #2a2a30;
    }

    .hand-log-col:last-child { border-right: 0; }

    .hand-log-head {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      padding-bottom: 8px;
      border-bottom: 1px solid #2a2a30;
    }

    .hand-log-street {
      font-size: 12px;
      font-weight: 600;
      color: #f0f0f3;
    }

    .hand-log-pot {
      font-family: var(--font-mono);
      font-size: 13px;
      font-weight: 700;
      color: #e8c44a;
      font-variant-numeric: tabular-nums;
    }

    .hand-log-ante {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      padding: 10px 8px;
      border-radius: 8px;
      background: #f4f4f6;
      color: #161616;
      font-size: 12px;
      font-weight: 700;
    }

    .hand-log-row {
      display: grid;
      grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
      gap: 4px;
      align-items: start;
      width: 100%;
      padding: 0;
      border: 0;
      background: transparent;
      text-align: left;
      cursor: pointer;
    }

    .hand-log-row.is-active .hand-log-bubble {
      outline: 2px solid #e8c44a;
    }

    .hand-log-who {
      display: grid;
      grid-template-columns: 28px 1fr;
      grid-template-rows: auto auto;
      column-gap: 4px;
      align-items: center;
    }

    .hand-log-who .avatar {
      grid-row: 1;
      width: 26px;
      height: 26px;
      font-size: 9px;
    }

    .hand-log-pos {
      grid-row: 2;
      justify-self: start;
      border-radius: 999px;
      padding: 1px 5px;
      font-size: 8px;
      font-weight: 700;
      color: #111;
    }

    .hand-log-pos.is-sb { background: #8fd18a; }
    .hand-log-pos.is-bb { background: #2f7a4a; color: #fff; }
    .hand-log-pos.is-utg { background: #3aa39a; color: #fff; }
    .hand-log-pos.is-mp { background: #3d6fd1; color: #fff; }
    .hand-log-pos.is-co { background: #c4a36c; }
    .hand-log-pos.is-btn { background: #8a5a2b; color: #fff; }
    .hand-log-pos.is-other { background: #6b6b76; color: #fff; }

    .hand-log-name {
      grid-column: 2;
      grid-row: 1;
      min-width: 0;
      color: #f0f0f3;
      font-size: 10px;
      font-weight: 600;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .hand-log-bubble {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 2px;
      padding: 7px 9px;
      border-radius: 8px;
      background: #f4f4f6;
      color: #161616;
    }

    .hand-log-bubble::before {
      content: "";
      position: absolute;
      left: -5px;
      top: 10px;
      border: 5px solid transparent;
      border-right-color: #f4f4f6;
      border-left: 0;
    }

    .hand-log-verb,
    .hand-log-amt {
      font-size: 12px;
      font-weight: 700;
      line-height: 1.2;
    }

    .hand-log-allin {
      margin-top: 4px;
      align-self: flex-start;
      padding: 1px 6px;
      border: 1px solid #c42b32;
      border-radius: 4px;
      color: #c42b32;
      font-size: 10px;
      font-weight: 700;
    }

    .hand-log-cards {
      display: flex;
      gap: 3px;
      margin-top: 4px;
    }

    .hand-log-cards .mini-card {
      width: 22px;
      height: 30px;
      font-size: 10px;
    }

    .actions-list button {
      text-align: left;
      width: 100%;
      font-size: 12px;
      padding: 8px;
    }

    .actions-list.hand-log .hand-log-row {
      padding: 0;
      background: transparent;
      border: none;
    }

    .player-btn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }
    .player-btn.hero-filter-btn {
      border-color: var(--hero);
      box-shadow: 0 0 0 1px color-mix(in srgb, var(--hero) 35%, transparent);
    }
    .player-btn.hero-filter-btn:hover:not(:disabled) {
      border-color: var(--hero);
      background: color-mix(in srgb, var(--hero) 12%, #262628);
    }
    button[data-kbd]::after {
      content: attr(data-kbd);
      display: inline-block;
      margin-left: 6px;
      padding: 1px 4px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: 4px;
      font-size: 10px;
      font-weight: 700;
      line-height: 1.4;
      color: #939396;
      vertical-align: 1px;
      letter-spacing: 0.1px;
    }

    .action-label {
      color: var(--muted);
      font-size: 12px;
      margin: 8px 0 4px;
    }

    .hint {
      color: var(--muted);
      font-size: 12px;
    }

    .gto-box {
      margin-top: 10px;
      border-top: 1px solid var(--border);
      padding-top: 10px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .gto-title {
      font-size: 13px;
      font-weight: 700;
      color: #cdd1f3;
    }

    .gto-row {
      font-size: 12px;
      color: #d0d0d2;
    }

    #gtoSpotInfo,
    #gtoEval,
    #gtoProviderStatus,
    #gtoConfidence {
      white-space: normal;
      overflow-wrap: anywhere;
      word-break: break-word;
      line-height: 1.3;
      max-width: 100%;
    }

    .gto-mix {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .gto-idle {
      margin: 0;
      font-size: 13px;
      color: var(--muted);
    }

    .gto-chip {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      border-radius: 999px;
      padding: 3px 8px;
      font-size: 11px;
      font-weight: 700;
      border: 1px solid rgba(255, 255, 255, 0.18);
      background: #323238;
      color: #dde0f7;
    }
    .gto-chip.action-fold { background: #505054; }
    .gto-chip.action-check { background: #2d39a3; }
    .gto-chip.action-call { background: #27875a; }
    .gto-chip.action-bet { background: #966d1b; }
    .gto-chip.action-raise { background: #a8151a; }
    .gto-chip.action-allin { background: #b9171c; }
    .gto-chip.selected {
      box-shadow: 0 0 0 2px #e5bd6d, 0 0 0 4px rgba(229, 189, 109, 0.25);
      color: #ffffff;
    }
    .gto-chip .chip-marker {
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.4px;
      padding: 1px 4px;
      border-radius: 999px;
      background: rgba(0, 0, 0, 0.35);
      color: #f2deb5;
    }
    .hero-gto-chip.selected {
      box-shadow: 0 0 0 1.5px #e5bd6d, 0 0 0 3px rgba(229, 189, 109, 0.3);
    }
    .decision-tier {
      display: inline-block;
      margin-left: 6px;
      padding: 2px 7px;
      border-radius: 999px;
      color: #ffffff;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.2px;
      vertical-align: 1px;
    }
    .hero-gto-tier {
      display: inline-block;
      margin-left: 0;
      padding: 1px 6px;
      border-radius: 999px;
      color: #ffffff;
      font-size: 9px;
      font-weight: 700;
    }
    .gto-hand-line {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
      margin-bottom: 6px;
      font-size: 11px;
      color: #c6cbf2;
    }
    .gto-hand-label {
      font-family: var(--font-mono);
      letter-spacing: 0.5px;
      background: #1f1f23;
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 6px;
      padding: 1px 5px;
      color: #f3f4fc;
    }
    .gto-hand-cluster, .hero-gto-cluster {
      display: inline-block;
      padding: 1px 6px;
      border-radius: 999px;
      font-weight: 700;
      font-size: 10px;
      color: #ffffff;
      letter-spacing: 0.3px;
      background: #545457;
    }
    .hero-gto-cluster {
      margin-left: 4px;
      font-size: 8px;
      padding: 1px 5px;
    }
    .cluster-premium { background: #b9171c; }
    .cluster-strong { background: #a8151a; }
    .cluster-medium { background: #966d1b; }
    .cluster-speculative { background: #2d39a3; }
    .cluster-trash { background: #505054; }
    .cluster-value { background: #27875a; }
    .cluster-medium_made { background: #966d1b; }
    .cluster-draw { background: #2d39a3; }
    .cluster-air { background: #505054; }
    .gto-source-badge, .hero-gto-source {
      display: inline-block;
      border-radius: 999px;
      padding: 1px 7px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.2px;
      color: #eeeffb;
      background: #45454c;
      border: 1px solid rgba(255, 255, 255, 0.2);
      vertical-align: 1px;
    }
    .hero-gto-source {
      font-size: 8px;
      padding: 1px 5px;
      margin-right: 4px;
    }
    .gto-source-badge.source-precomputed_exact,
    .hero-gto-source.source-precomputed_exact {
      background: #1f6c49;
      border-color: #2a9261;
    }
    .gto-source-badge.source-precomputed_nearest,
    .hero-gto-source.source-precomputed_nearest {
      background: #6a4e15;
      border-color: #916b1e;
    }
    .gto-source-badge.source-template_fallback,
    .hero-gto-source.source-template_fallback {
      background: #5a2a2c;
      border-color: #7c3739;
    }
    .gto-source-badge.source-api_lookup,
    .hero-gto-source.source-api_lookup {
      background: #45454d;
      border-color: #666671;
    }
    .gto-scale-badge, .hero-gto-heat {
      display: inline-block;
      border-radius: 999px;
      color: #ffffff;
      font-weight: 700;
      letter-spacing: 0.2px;
      border: 1px solid rgba(255, 255, 255, 0.25);
    }
    .gto-scale-badge {
      margin-left: 6px;
      padding: 2px 7px;
      font-size: 10px;
      vertical-align: 1px;
    }
    .hero-gto-heat {
      font-size: 8px;
      padding: 1px 5px;
      margin-right: 4px;
    }
    .gto-eval-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      align-items: center;
      margin-bottom: 4px;
    }
    .gto-eval-freq {
      font-size: 12px;
      color: #d0d0d2;
      margin-bottom: 2px;
    }
    .gto-provider-short {
      font-size: 11px;
      color: #939396;
      margin-bottom: 4px;
    }
    .gto-provider-detail {
      font-size: 10px;
      color: #868690;
      word-break: break-all;
      line-height: 1.4;
    }
    .gto-cluster-mix-tag {
      display: inline-block;
      margin-left: 4px;
      padding: 1px 5px;
      border-radius: 999px;
      font-size: 9px;
      font-weight: 700;
      background: rgba(255, 255, 255, 0.08);
      color: #939396;
      border: 1px solid rgba(255, 255, 255, 0.15);
      vertical-align: 1px;
    }
    .gto-reasoning {
      margin-top: 2px;
      padding: 6px 8px;
      border-radius: 8px;
      border: 1px solid rgba(157, 164, 232, 0.25);
      background: #1d1d20;
      color: #d2d5f4;
      font-size: 11px;
      line-height: 1.35;
    }
    .gto-limitations {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
      margin-top: 2px;
    }
    .gto-limit-chip {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      border: 1px solid #6d3a3c;
      background: #3a2021;
      color: #f9cfd0;
      font-size: 10px;
      padding: 2px 7px;
      line-height: 1.2;
    }
    .gto-limit-chip.muted {
      border-color: #494950;
      background: #2a2a2e;
      color: #d2d6f5;
    }
    .validation-gates {
      margin-top: 6px;
      padding: 6px 8px;
      border-radius: 8px;
      background: #2a1f1f;
      border: 1px solid #4a2c2d;
      font-size: 11px;
      color: #f5abae;
    }
    .validation-gates.good {
      background: #1f2a25;
      border-color: #27543f;
      color: #b8e0cd;
    }
    .validation-gates .gate-warn {
      display: inline-block;
      margin-right: 6px;
      padding: 1px 5px;
      border-radius: 4px;
      background: #5a282a;
      color: #f8c7c9;
    }
    .validation-breakdown {
      margin-top: 8px;
      background: #212124;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 8px;
      padding: 8px;
    }
    .validation-breakdown-table {
      width: 100%;
      font-size: 11px;
      border-collapse: collapse;
    }
    .validation-breakdown-table th, .validation-breakdown-table td {
      padding: 2px 4px;
      text-align: right;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
    .validation-breakdown-table th:first-child, .validation-breakdown-table td:first-child {
      text-align: left;
      color: #9da4e8;
    }

    .spot-key-wrap {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      margin-top: 4px;
    }

    .spot-key-chip {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.16);
      background: #2a2a2f;
      color: #dde0f7;
      padding: 2px 7px;
      font-size: 11px;
      line-height: 1.2;
      max-width: 100%;
      overflow-wrap: anywhere;
    }

    .gto-api-controls {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      align-items: center;
    }
    .gto-toggles-row {
      margin-top: 10px;
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }
    .gto-advanced-btn {
      font-size: 11px;
      padding: 4px 8px;
      background: transparent;
      border: 1px solid #3c3c41;
      color: #868690;
      border-radius: 6px;
    }
    .gto-advanced-btn:hover:not(:disabled) {
      background: #262629;
      border-color: #52525b;
      color: #a4a4ab;
    }
    .gto-legend {
      margin-top: 8px;
      border-top: 1px solid var(--border);
      padding-top: 10px;
      display: flex;
      flex-direction: column;
      gap: 0;
    }
    .gto-legend[hidden] { display: none !important; }
    .gto-legend-section {
      display: grid;
      grid-template-columns: auto 1fr;
      column-gap: 10px;
      row-gap: 5px;
      align-items: center;
      padding: 8px 0;
      border-bottom: 1px solid #29292e;
    }
    .gto-legend-section:last-child {
      padding-bottom: 0;
      border-bottom: none;
    }
    .gto-legend-heading {
      grid-column: 1 / -1;
      font-size: 10px;
      font-weight: 700;
      color: #868690;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 0;
    }
    .gto-legend-item {
      display: contents;
    }
    .gto-legend-item .decision-tier {
      margin-left: 0;
      vertical-align: 0;
    }
    .gto-legend-item .gto-source-badge,
    .gto-legend-item .gto-hand-cluster {
      vertical-align: 0;
    }
    .gto-legend-desc {
      font-size: 11px;
      color: #939396;
      line-height: 1.35;
    }
    .gto-legend-code {
      font-family: var(--font-mono);
      font-size: 10px;
      background: #1f1f23;
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 4px;
      padding: 1px 5px;
      color: #d0d0d2;
      white-space: nowrap;
      justify-self: start;
    }
    .gto-advanced-section {
      margin-top: 8px;
      border-top: 1px solid var(--border);
      padding-top: 8px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .gto-advanced-section[hidden] {
      display: none !important;
    }

    .gto-api-input {
      width: 100%;
      background: #17171a;
      color: var(--text);
      border: 1px solid #3c3c41;
      border-radius: 8px;
      padding: 6px 8px;
      font-size: 12px;
    }

    .validation-report {
      margin-top: 8px;
      border: 1px solid #3c3c41;
      border-radius: var(--radius-md);
      padding: 8px;
      background: #17171a;
      font-size: 12px;
      color: #d0d0d2;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .validation-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin-top: 4px;
    }

    .validation-card {
      border: 1px solid #333338;
      border-radius: 8px;
      padding: 6px;
      background: #1c1c1e;
      display: flex;
      flex-direction: column;
      gap: 3px;
      min-width: 0;
    }

    .validation-card-title {
      font-size: 11px;
      font-weight: 700;
      color: #acb2eb;
    }

    .validation-delta {
      color: #b6b6bd;
    }

    .validation-delta.good {
      color: #7cd9ae;
    }

    .validation-delta.bad {
      color: #f4a3a6;
    }

    .validation-history {
      margin-top: 8px;
      border-top: 1px solid #333338;
      padding-top: 8px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .validation-history-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .validation-history-row {
      border: 1px solid #333338;
      border-radius: 8px;
      padding: 6px;
      background: #0e1025;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .validation-history-head {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      font-size: 11px;
      color: #b9beec;
    }

    .validation-history-metrics {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      color: #d0d0d2;
      font-size: 11px;
    }

    .validation-history-deltas {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      font-size: 11px;
    }

    .validation-history-empty {
      color: #b6b6bd;
      font-size: 11px;
    }

    .validation-title {
      font-size: 12px;
      font-weight: 700;
      color: #cdd1f3;
    }
    .validation-section {
      margin-top: 8px;
      border-top: 1px solid #333338;
      padding-top: 8px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .validation-subsection {
      margin-top: 4px;
      border: 1px solid #333338;
      border-radius: 8px;
      padding: 6px;
      background: #0f1228;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .validation-note {
      font-size: 11px;
      color: #b6b6bd;
    }
    .validation-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 11px;
    }
    .validation-table th, .validation-table td {
      padding: 3px 4px;
      text-align: right;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      vertical-align: top;
    }
    .validation-table th:first-child,
    .validation-table td:first-child {
      text-align: left;
      color: #acb2eb;
    }
    .validation-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .validation-list-row {
      border: 1px solid #333338;
      border-radius: 8px;
      padding: 6px;
      background: #0d0f23;
      display: flex;
      flex-direction: column;
      gap: 3px;
      font-size: 11px;
    }
    .validation-list-row.tier-blunder {
      border-color: #7f1d20;
      background: #2a1516;
    }
    .validation-list-row.tier-mistake {
      border-color: #8e1216;
      background: #2a1617;
    }
    .validation-list-head {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      color: #d7daf6;
    }
    .validation-list-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      color: #b9beec;
    }
    .validation-link-btn {
      border: 1px solid #4a4a51;
      background: #161d57;
      color: #e8e9f9;
      border-radius: 6px;
      padding: 2px 7px;
      font-size: 11px;
      cursor: pointer;
    }
    .validation-link-btn:hover {
      background: #1c246f;
    }
    .validation-export-row {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      align-items: center;
      margin-top: 2px;
    }
    .validation-export-btn {
      border: 1px solid #4a4a51;
      background: #111645;
      color: #dcdff7;
      border-radius: 6px;
      padding: 3px 8px;
      font-size: 11px;
      cursor: pointer;
    }
    .validation-export-btn:hover {
      background: #181f5e;
    }
    .validation-pill {
      display: inline-block;
      padding: 1px 6px;
      border-radius: 999px;
      background: #36363c;
      color: #d8dbf6;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.2px;
    }

    @media (max-width: 1020px) {
      .app {
        grid-template-columns: 1fr;
      }

      .panel {
        padding: 12px;
      }

      .table-wrap {
        min-height: 560px;
      }

      .actions-list {
        max-height: 280px;
      }

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

    @media (max-width: 760px) {
      .app-header {
        padding: 12px 12px 8px;
      }

      .app {
        padding: 0 12px 12px;
        gap: 12px;
      }

      .account-email {
        max-width: 120px;
      }

      .auth-modal {
        padding: 18px 16px 16px;
      }

      .auth-modal-footer {
        flex-direction: column;
        align-items: stretch;
      }

      .auth-modal-footer-switch {
        margin-left: 0;
        text-align: center;
      }

      .toolbar-group {
        border-right: 0;
        padding-right: 0;
      }

      .status {
        width: 100%;
      }

      .table-wrap {
        min-height: 470px;
      }

      .seat {
        width: 104px;
        height: auto;
        min-height: 0;
        padding: 0;
      }

      .seat .name {
        font-size: 10px;
      }

      .seat .chips {
        font-size: 10px;
      }

      .mini-card {
        width: 30px;
        height: 42px;
        font-size: 13px;
      }
    }