/* AiqiGo · 2026 visual refinement.
 * Screen-only component layer: retain board geometry, state classes, print reports
 * and the existing responsive layout contracts in styles.css.
 */
@media screen {
  :root {
    --ui-bg: #06110e;
    --ui-panel: #0c1d17;
    --ui-panel-raised: #12271f;
    --ui-text: #f7edcf;
    --ui-secondary: #d8c9a8;
    --ui-muted: #8ea99f;
    --ui-gold: #d4a13b;
    --ui-gold-light: #ffe07a;
    --ui-action-gold-deep: #b88523;
    --ui-action-gold-light: #f0c765;
    --ui-action-gold-edge: #ffe07a;
    --ui-jade: #8ecab2;
    --ui-line: rgba(190, 205, 184, .16);
    --ui-line-gold: rgba(214, 184, 121, .28);
    --ui-radius: 8px;
    --ui-shadow: 0 4px 14px rgba(0, 0, 0, .10);
  }

  body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
  body:not(.auth-mode) {
    --ink: var(--ui-text);
    --ink2: var(--ui-secondary);
    --ink3: var(--ui-muted);
    --paper: var(--ui-panel);
    --paper2: #081710;
    --paper3: var(--ui-line);
    --gold: var(--ui-gold);
    --gold2: var(--ui-gold-light);
    --gold3: #f6e7c4;
    --green2: var(--ui-jade);
    --teal: #7bb99f;
    --teal2: #acd9c5;
    background: radial-gradient(ellipse at 55% 0, #10271d 0, transparent 65%), var(--ui-bg);
  }
  /* Components retain natural Chinese spacing and share the local font fallback. */
  button, input, select, textarea { font-family: var(--font-sans); }
  button { touch-action: manipulation; }
  button:disabled { cursor: not-allowed; }
  :where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--ui-gold-light);
    outline-offset: 3px;
  }
  ::selection { background: #d6b879; color: #102018; }
  :where(.modal, .rv-left, .rv-right, .lobby-main, .lobby-side-panel, .institution-workspace, .dynamic-kifu-workspace) {
    scrollbar-width: thin;
    scrollbar-color: #456050 transparent;
  }
  :where(.stat-num, .seat-clock-card, .go-profile-record-grid, .batch-report-metrics, .rv-fp-score-card, .personal-stats) {
    font-variant-numeric: tabular-nums;
  }

  /* Authentication: keep the original robot/Go art and give the form a quiet focal plane. */
  #auth-view { padding: 44px clamp(24px, 7vw, 120px); }
  body.auth-mode #auth-view { min-height: 100svh; }
  .auth-bg { animation: authBgBreath 9s ease-in-out infinite; transform: scale(1.01); will-change: transform, filter; }
  #auth-view::before {
    background: linear-gradient(90deg, rgba(3, 11, 8, .95), rgba(3, 11, 8, .81) 32%, rgba(3, 11, 8, .25) 62%, rgba(3, 11, 8, .08));
  }
  #auth-view::after { animation: authGridDrift 12s linear infinite; opacity: .16; will-change: background-position; }
  .auth-panel { width: min(440px, 100%); }
  .auth-brand { align-items: flex-start; margin-bottom: 28px; }
  .auth-brand-logo { width: min(340px, 100%); filter: none; }
  .auth-sub { margin: 3px 0 0; color: rgba(200,185,155,.75); font-size: 12px; letter-spacing: 2px; text-align: left; }
  .auth-card {
    width: 100%; padding: 30px 32px 28px; border-radius: 16px;
    border: 1px solid rgba(214, 184, 121, .32);
    background: linear-gradient(145deg, rgba(23, 40, 31, .94), rgba(7, 20, 14, .94));
    box-shadow: 0 28px 80px rgba(0, 0, 0, .36), inset 0 1px 0 rgba(238, 215, 162, .1);
    backdrop-filter: blur(16px);
  }
  .auth-card-intro { margin-bottom: 24px; }
  .auth-card-intro h1 { color: var(--gold2); font: 600 23px/1.5 var(--font-serif); letter-spacing: 1px; }
  .auth-card-intro p { color: rgba(200,185,155,.78); font-size: 12px; line-height: 1.8; margin-top: 6px; }
  .auth-card .tabs { height: 44px; padding: 4px; gap: 4px; border: 1px solid var(--ui-line); border-radius: 9px; background: #06140e; margin-bottom: 24px; }
  .auth-card .tab-btn { border: 1px solid transparent; border-radius: 6px; color: rgba(200,185,155,.66); font-size: 13px; }
  .auth-card .tab-btn.active { color: var(--gold2); background: rgba(200,146,42,.22); border-color: rgba(232,184,75,.34); box-shadow: 0 2px 5px #0002; }
  .auth-card .form-group { margin-bottom: 18px; }
  .auth-card .form-group label { color: rgba(200,185,155,.88); font-size: 12px; margin-bottom: 8px; letter-spacing: .5px; }
  .auth-card .form-group :is(input, select) {
    min-height: 46px; padding: 11px 13px; border-radius: 8px;
    border: 1px solid rgba(200,146,42,.3); background: #091710; color: var(--paper);
    font-size: 14px; box-shadow: inset 0 1px 2px #0002;
  }
  .auth-card .form-group input::placeholder { color: rgba(200,185,155,.56); opacity: 1; }
  .auth-card .form-group :is(input, select):focus { border-color: var(--ui-gold); background: #102319; box-shadow: 0 0 0 3px #d6b87913; }
  .auth-card .form-group select option { background: #102319; color: var(--paper); }
  .auth-password-field { position: relative; }
  .auth-card .auth-password-field input { padding-right: 65px; }
  .auth-password-toggle { position: absolute; right: 4px; top: 4px; min-width: 52px; height: 38px; border: 0; border-radius: 5px; background: rgba(200,146,42,.10); color: #765314; font-size: 12px; font-weight: 700; cursor: pointer; }
  .auth-password-toggle:hover { background: #eadcb9; color: #5e410e; }
  .auth-card .form-btn {
    min-height: 48px; margin-top: 7px; border: 1px solid var(--ui-action-gold-edge); border-radius: 8px;
    background: linear-gradient(135deg, var(--ui-action-gold-deep), var(--ui-action-gold-light) 52%, #bd8a28); color: #0d1712;
    box-shadow: 0 5px 18px rgba(200,146,42,.38), inset 0 1px 0 rgba(255,240,173,.58);
    font: 800 14px var(--font-sans); letter-spacing: 2px;
  }
  .auth-card .form-btn:hover { background: linear-gradient(135deg,#c8922a,#f5d98a 52%,#c8922a); border-color:#fff0ad; box-shadow:0 7px 24px rgba(200,146,42,.5),inset 0 1px 0 rgba(255,255,255,.42); }
  .auth-card .form-btn:active { transform:translateY(1px); box-shadow:0 2px 8px rgba(200,146,42,.34); }
  .auth-card .form-btn:disabled { opacity: .65; transform: none; }
  .auth-card .form-err { color: #ffb5a7; line-height: 1.6; text-align: left; }
  .auth-card .captcha-img { padding: 0; background: #102319; }
  .auth-card .captcha-row input { min-width: 0; }

  /* Shared application chrome and controls. Gold identifies actions; jade identifies state. */
  body:not(.auth-mode) #navbar {
    background: #06130f; border-bottom-color: var(--ui-line);
    box-shadow: none;
  }
  body:not(.auth-mode) .logo { filter: none; }
  body:not(.auth-mode) :is(.nav-btn, .game-btn, .admin-action-btn, .modal-btn, .board-toggle) {
    border-color: var(--ui-line); border-radius: 6px; background: #11251c; color: var(--ui-secondary);
    transition: background .16s ease, border-color .16s ease, color .16s ease;
  }
  body:not(.auth-mode) :is(.nav-btn, .game-btn, .admin-action-btn, .modal-btn, .board-toggle):hover {
    background: #23382a; border-color: #b99e69; color: var(--ui-gold-light);
  }
  body:not(.auth-mode) :is(.nav-btn.primary, .modal-btn.primary, .chat-send, .game-btn.analyze-btn, .score-btn, .ai-btn.save, .ai-btn.test) {
    background: linear-gradient(135deg, var(--ui-action-gold-deep), var(--ui-action-gold-light) 52%, #bd8a28) !important;
    border-color: var(--ui-action-gold-edge) !important; color: #0d1712 !important; font-weight: 800;
    box-shadow: 0 2px 7px rgba(200,146,42,.18), inset 0 1px 0 rgba(255,240,173,.34);
  }
  body:not(.auth-mode) :is(.nav-btn.primary, .modal-btn.primary, .chat-send, .game-btn.analyze-btn, .score-btn, .ai-btn.save, .ai-btn.test):hover {
    background: linear-gradient(135deg,#c8922a,#f5d98a 52%,#c8922a) !important;
    border-color: #fff0ad !important; color: #0d1712 !important;
    box-shadow: 0 6px 18px rgba(200,146,42,.46), inset 0 1px 0 rgba(255,255,255,.4);
  }
  body:not(.auth-mode) :is(.nav-btn.primary, .modal-btn.primary, .chat-send, .game-btn.analyze-btn, .score-btn, .ai-btn.save, .ai-btn.test):active {
    transform: translateY(1px); box-shadow: 0 2px 7px rgba(200,146,42,.3);
  }
  body:not(.auth-mode) :is(.game-btn.danger, .admin-action-btn.del) { color: #ffb1a5; border-color: #ad655b80; background: #492d252b; }
  body:not(.auth-mode) :is(.game-btn.future, .game-btn:disabled, .modal-btn:disabled, .ai-btn:disabled) { opacity: .5; box-shadow: none; }
  body:not(.auth-mode) .section-title { color: var(--ui-gold-light); border-color: var(--ui-line); }
  body:not(.auth-mode) :is(.modal, .msg-box) {
    background: #10251a; border-color: var(--ui-line);
    border-radius: 10px; box-shadow: 0 22px 55px #0004;
  }
  .modal-overlay { background: rgba(1, 8, 5, .76); backdrop-filter: blur(5px); padding: 16px; }
  .modal-title { color: var(--ui-gold-light); font-size: 19px; line-height: 1.5; }
  .modal-head { border-color: var(--ui-line); }
  .modal-close, .modal-toolbar-title > div > button:last-child { min-width: 36px; min-height: 36px; border-radius: 7px; }
  .modal-close:hover { color: var(--ui-gold-light); background: #d6b87912; }
  .modal-actions { gap: 10px; }
  .modal-actions .modal-btn { min-height: 40px; }
  :is(.empty-state, .loading, .live-games-empty, .institution-empty-small) { color: var(--ui-muted); line-height: 1.8; }
  .empty-state { padding: 30px 16px; }
  .empty-state .empty-icon { opacity: .8; color: var(--ui-gold); }
  .empty-state .empty-title { color: var(--ui-secondary); font-size: 14px; }
  .empty-state .empty-desc { color: var(--ui-muted); font-size: 12px; margin-top: 7px; }

  /* Lobby: retain the challenge artwork and compact workspace hierarchy. */
  body.view-lobby-view #lobby-view.active { background: transparent; }
  body.view-lobby-view :is(.lobby-nav-rail, .lobby-side-panel) { background: #091a13; border-color: var(--ui-line); }
  body.view-lobby-view .lobby-nav-rail { overflow-y: auto; }
  body.view-lobby-view .lobby-nav-item { min-height: 44px; border-radius: 5px; font-weight: 500; color: var(--ui-secondary); font-size: 14px; }
  body.view-lobby-view .lobby-nav-item:hover,
  body.view-lobby-view .lobby-nav-item.active { transform: none; background: linear-gradient(90deg, #d6b8791c, #d6b87908); border-color: var(--ui-line-gold); color: var(--ui-gold-light); }
  body.view-lobby-view .lobby-nav-icon { background: transparent; border-color: transparent; color: #b5d4bd; filter: none; box-shadow: none; }
  body.view-lobby-view .lobby-main { gap: 24px; }
  body.view-lobby-view :is(.lobby-card, .lobby-side-card, .lobby-handicap-panel) {
    border: 0; border-radius: var(--ui-radius);
    background: #0c1e15; box-shadow: none;
  }
  body.view-lobby-view .lobby-circuit-frame { opacity: .09; filter: none; }
  body.view-lobby-view .challenge-panel-head { gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
  body.view-lobby-view .challenge-panel-head h2 { color: var(--ui-gold-light); font: 600 22px/1.4 var(--font-serif); text-shadow: none; }
  body.view-lobby-view .handicap-guide-inline { color: rgba(255,244,199,.85); font-size: 12px; font-weight: 400; white-space: normal; margin: 0; text-shadow: none; }
  body.view-lobby-view .handicap-grade-card { border-radius: 6px; box-shadow: none; border-color: transparent; }
  body.view-lobby-view .handicap-grade-card:hover { filter: brightness(1.05); box-shadow: 0 8px 22px #0004, 0 0 0 1px #d6b87980; }
  body.view-lobby-view .challenge-foot { color: var(--ui-muted); font-size: 11px; margin-top: 14px; }
  body.view-lobby-view .challenge-foot i { background: #8ecab2; box-shadow: 0 0 0 3px #8ecab210; }
  body.view-lobby-view .lobby-card-head { border-color: var(--ui-line); gap: 12px; }
  body.view-lobby-view .lobby-card-head h3 { font-size: 17px; color: var(--ui-text); font-weight: 600; text-shadow: none; }
  body.view-lobby-view :is(.lobby-card-head button, .online-tabs button, .invite-btn-sm) { font-weight: 500; border-color: var(--ui-line-gold); }
  body.view-lobby-view .personal-card { background: #12291e; border-color: var(--ui-line-gold); border-radius: 12px; box-shadow: var(--ui-shadow); }
  body.view-lobby-view .personal-stats div { background: #091b13; border-color: var(--ui-line); border-radius: 8px; padding: 10px; }
  body.view-lobby-view .personal-stats strong { font-size: 14px; }
  body.view-lobby-view .personal-name { font-weight: 600; line-height: 1.5; }
  :is(.live-game-row, .saved-game-card, .kifu-item) { border: 0; border-bottom: 1px solid var(--ui-line); border-radius: 0; background: transparent; }
  :is(.live-game-row, .saved-game-card, .kifu-item):hover { border-color: var(--ui-line-gold); background: #162e21; }
  .chat-msg { line-height: 1.75; }
  .chat-input { border-color: var(--ui-line-gold); border-radius: 7px; }

  /* Game and professional review: preserve all canvas dimensions and touch geometry. */
  body.view-game-view :is(.game-sidebar, .game-sidebar-right),
  .professional-review :is(.rv-left, .rv-right) { background: #0b1c14; border-color: var(--ui-line); }
  body.view-game-view .room-player-card { border-color: var(--ui-line-gold); background: linear-gradient(145deg, #183123, #102319); box-shadow: var(--ui-shadow); border-radius: 10px; }
  body.view-game-view .room-player-name { color: var(--ui-text); text-shadow: none; }
  body.view-game-view .seat-clock-card { border-color: var(--ui-line-gold); box-shadow: inset 0 1px 0 #ffffff05; }
  .professional-review { background: radial-gradient(ellipse at center, #173725, #08170f 75%); }
  .rv-header { background: #0a1b13; border-color: var(--ui-line-gold); }
  .rv-title-wrap small { color: var(--ui-jade); font-size: 11px; line-height: 1.6; }
  .rv-analysis-head { background: transparent; border-color: var(--ui-line); }
  .rv-analysis-head small, .rv-analysis-head > span { font-size: 11px; color: var(--ui-muted); }
  .rv-analysis-head strong { font-weight: 600; }
  .rv-analysis-controls { border-color: var(--ui-line); gap: 9px; }
  .rv-level-label, .rv-analysis-status { font-size: 12px; line-height: 1.65; }
  .rv-analysis-status { background: #ffffff05; color: var(--ui-secondary); }
  .rv-tabs { border-color: var(--ui-line); background: #071910; }
  .rv-tab { min-height: 42px; color: var(--ui-secondary); font-size: 14px; font-family: var(--font-sans); }
  .rv-tab.on { color: var(--ui-gold-light); background: #d6b87912; border-bottom-color: var(--ui-gold); }
  .rv-btn, .rv-tool-btn, .rv-back { border-radius: 6px; border-color: var(--ui-line); color: var(--ui-secondary); }
  .rv-tool-btn { font-size: 14px; min-height: 42px; }
  .professional-review .rv-tool-btn.primary { background:linear-gradient(135deg,var(--ui-action-gold-deep),var(--ui-action-gold-light) 52%,#bd8a28); border:1px solid var(--ui-action-gold-edge); color:#0d1712; font-weight:800; box-shadow:0 4px 14px rgba(200,146,42,.32),inset 0 1px 0 rgba(255,240,173,.5); }
  .professional-review .rv-tool-btn.primary:hover { background:linear-gradient(135deg,#c8922a,#f5d98a 52%,#c8922a); color:#0d1712; }
  .rv-file-actions .rv-tool-btn { font-size: 11px; }
  .rv-chartbar { background: #081910; border-color: var(--ui-line-gold); }
  .rv-interpret { font-size: 14px; line-height: 1.85; }
  .review-workbench-body { gap: 16px; }
  .review-workbench-tools button { min-height: 42px; font-size: 12px; border-radius: 8px; }
  .review-source-grid { gap: 10px; }
  .review-source-grid > :is(article, button) { padding: 14px 12px; min-height: 80px; background: #10271c; border-color: var(--ui-line-gold); border-radius: 10px; }
  .review-source-grid strong { font-size: 13px; }
  .review-source-grid small, .review-source-grid article span { font-size: 11px; line-height: 1.65; }

  /* Analysis and Go profile: readable evidence and restrained numeric emphasis. */
  :is(.fairplay-source-panel, .fairplay-analysis-stage, .go-profile-head, .batch-analysis-head, .go-profile-split, .go-profile-weekly, .go-profile-monthly, .go-profile-learner-card) {
    border-color: var(--ui-line-gold); border-radius: var(--ui-radius); background: #10261b; box-shadow: var(--ui-shadow);
  }
  :is(.go-profile-record-grid, .batch-report-metrics) { gap: 10px; margin: 16px 0; }
  :is(.go-profile-record-grid, .batch-report-metrics) article { padding: 16px 10px; border-color: var(--ui-line); background: #142b1f; border-radius: 10px; }
  :is(.go-profile-record-grid, .batch-report-metrics) strong { font-size: 26px; font-weight: 600; line-height: 1.5; }
  :is(.go-profile-record-grid, .batch-report-metrics) span { font-size: 12px; }
  :is(.go-profile-issue-grid, .go-profile-task-grid) { gap: 10px; }
  :is(.go-profile-issue-grid, .go-profile-task-grid) article { padding: 14px; border-radius: 10px; border-color: var(--ui-line); }
  :is(.go-profile-issue-grid, .go-profile-task-grid) strong { font-size: 13px; }
  :is(.go-profile-issue-grid, .go-profile-task-grid) p { font-size: 12px; line-height: 1.8; }
  :is(.go-profile-issue-grid, .go-profile-task-grid) :is(small, span, em) { font-size: 11px; line-height: 1.7; }
  :is(.go-profile-monthly, .go-profile-learner-card) p { font-size: 12px; line-height: 1.8; }
  .go-profile-footnote, .go-profile-growth span, .go-profile-section-title span, .go-profile-weekly header :is(span, em) { font-size: 11px; line-height: 1.7; }
  .go-profile-section-title strong { font-size: 14px; }
  .go-profile-actions button { font-size: 11px; padding: 7px 10px; }
  .rv-fp-score-card { padding: 18px; border-color: var(--ui-line-gold); background: linear-gradient(120deg, #263923, #122a1e); box-shadow: none; }
  .rv-fp-score-card strong { color: var(--ui-gold-light); text-shadow: none; line-height: 1.1; }
  .rv-fp-score-card :is(small, p), .rv-fp-metrics small, .rv-fp-deep-summary small, .rv-fp-distribution small { font-size: 11px; color: var(--ui-muted); line-height: 1.6; }
  :is(.rv-fp-narrative, .rv-fp-verification, .rv-fp-dimension) p,
  .rv-fp-result > p, .rv-fp-limitations li, .rv-fp-method, .rv-fp-disclaimer { font-size: 12px; line-height: 1.8; color: var(--ui-secondary); }
  .rv-fp-evidence button { padding: 10px; border-radius: 7px; }
  .rv-fp-evidence button :is(b, span), .rv-fp-evidence p, .rv-fp-phase { font-size: 11px; line-height: 1.65; }
  .rv-fp-metrics b, .rv-fp-deep-summary b { font-size: 15px; margin-top: 5px; }

  /* Institution, voice and dynamic kifu workspaces share the same material and type scale. */
  #institution-view, .dynamic-kifu-view, .voice-review-workspace { background: radial-gradient(ellipse at top, #133223, transparent 65%), #081910; }
  :is(.institution-workspace-header, .dynamic-kifu-header, .voice-review-header, .fairplay-workspace-header) {
    background: #0b1d14; border-color: var(--ui-line);
  }
  :is(.institution-workspace-header, .dynamic-kifu-header, .voice-review-header, .fairplay-workspace-header) h1 { color: var(--ui-gold-light); font-weight: 600; }
  :is(.institution-workspace-header, .dynamic-kifu-header, .voice-review-header) p { color: var(--ui-secondary); font-size: 12px; line-height: 1.75; }
  :is(.institution-history-panel, .dynamic-kifu-panel) { background: #0a1e14; border-color: var(--ui-line); }
  :is(.institution-panel-title, .institution-preview-head, .dynamic-panel-title) small,
  .dynamic-preview-head small { font-size: 11px; color: var(--ui-muted); }
  .institution-history-item :is(span, small) { font-size: 11px; color: var(--ui-muted); }
  .institution-history-item { border-color: var(--ui-line); border-radius: 9px; }
  .institution-section-head { border-color: var(--ui-line); }
  .institution-field { font-size: 12px; color: var(--ui-secondary); line-height: 1.6; }
  .institution-section-head small { font-size: 11px; color: var(--ui-muted); }
  .institution-empty-small { font-size: 12px; padding: 24px 14px; }
  .dynamic-field { font-size: 12px; color: var(--ui-secondary); margin-top: 16px; }
  .dynamic-field :is(input, select) { font-size: 13px; min-height: 42px; border-color: var(--ui-line-gold); background: #091b12; }
  .dynamic-btn, .dynamic-preview-controls button { min-height: 40px; font-size: 12px; }
  .dynamic-source-summary span { font-size: 11px; color: var(--ui-muted); line-height: 1.7; }
  .voice-review-panel { border-color: var(--ui-line-gold); background: #10291c; border-radius: 12px; }
  .voice-review-narrative { border-color: var(--ui-line); background: #10251b; border-radius: 10px; }
  .cr-card, .cr-position, .cr-entry { border-color: var(--ui-line-gold); box-shadow: inset 0 1px 0 #ffffff05; }

  /* Profile, settings, coin ledger and administration. */
  .my-profile-modal, .aiqi-center-modal { color: var(--ui-text); }
  .personal-card, .stat-chip { border-color: var(--ui-line); border-radius: 10px; }
  #admin-view, #ai-backend-view { color: var(--ui-text); }
  .admin-tabs { border-color: var(--ui-line-gold); gap: 5px; }
  .admin-tab { padding: 11px 16px; font-size: 13px; color: var(--ui-muted); }
  .admin-tab.active { color: var(--ui-gold-light); border-color: var(--ui-gold); background: #d6b87910; }
  .admin-table { font-size: 13px; border-color: var(--ui-line); }
  .admin-table th { background: #142c20; color: var(--ui-secondary); font-weight: 500; padding: 13px 12px; border-color: var(--ui-line); }
  .admin-table td { padding: 12px; border-color: var(--ui-line); }
  .admin-table tbody tr:hover { background: #d6b87908; }
  .admin-overview-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .mp-btn.primary { color:#0d1712; border-color:var(--ui-action-gold-edge); background:linear-gradient(135deg,var(--ui-action-gold-deep),var(--ui-action-gold-light) 52%,#bd8a28); box-shadow:0 3px 12px rgba(200,146,42,.3); }
  .mp-btn.primary:hover { color:#0d1712; background:linear-gradient(135deg,#c8922a,#f5d98a 52%,#c8922a); }
  .mp-btn.danger { color: #edaa9c; }
  .mp-input:focus-visible { outline: 2px solid var(--ui-gold-light); outline-offset: 2px; }
  :is(.aiqi-balance-card, .aiqi-pkg-card, .recharge-form-modal, .recharge-target, .recharge-pkg-btn) {
    background: #142d20; border-color: var(--ui-line-gold); color: var(--ui-text);
  }
  .aiqi-pkg-card.recommended, .recharge-pkg-btn.recommended { background: #253723; border-color: #b9a170; }
  .recharge-pkg-btn.selected { background: #d6b87926; border-color: var(--ui-gold); }
  :is(.aiqi-packages-title, .aiqi-pkg-coins, .aiqi-pkg-label, .aiqi-tips, .recharge-packages-title, .recharge-pkg-btn small, .recharge-custom label, .recharge-note-wrap label, .admin-tx-user, .admin-tx-bal) { color: var(--ui-muted); font-size: 12px; }
  :is(.aiqi-pkg-badge, .recharge-pkg-btn em) { background: #40553a; color: #f0dfb9; }
  :is(.aiqi-ok-btn, .mp-coin-btn) { border:1px solid var(--ui-action-gold-edge); background:linear-gradient(135deg,var(--ui-action-gold-deep),var(--ui-action-gold-light) 52%,#bd8a28); color:#0d1712; font-weight:800; box-shadow:0 3px 12px rgba(200,146,42,.3); }
  :is(.aiqi-ok-btn, .mp-coin-btn):hover { background:linear-gradient(135deg,#c8922a,#f5d98a 52%,#c8922a); color:#0d1712; }
  :is(.aiqi-filter-tab, .aiqi-bill-pager button) { background: #102a1b; color: var(--ui-secondary); border-color: var(--ui-line-gold); }
  .aiqi-filter-tab.active { background: #31432b; color: var(--ui-gold-light); border-color: var(--ui-gold); }
  :is(.recharge-input-row input, .recharge-note-wrap input, .recharge-note-wrap select) { background: #0a1d12; color: var(--ui-text); border-color: var(--ui-line-gold); }
  .admin-tx-reason { color: var(--ui-secondary); }
  .aiqi-tabs { border-color: var(--ui-line-gold); }
  .aiqi-tab { color: var(--ui-muted); }
  .aiqi-tab.active { color: var(--ui-gold-light); border-color: var(--ui-gold); }
  .aiqi-contact-card, .aiqi-bill-reason { color: var(--ui-secondary); }
  .aiqi-balance-label, .aiqi-balance-meta, .aiqi-contact-tip, .aiqi-bill-time { color: var(--ui-muted); font-size: 12px; }
  .aiqi-copy-btn { background: #304930; color: var(--ui-gold-light); }
  .aiqi-center-modal { padding: 0; }
  .aiqi-center-modal .modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--ui-line-gold); }
  .aiqi-center-modal .modal-title { margin: 0; }
  .aiqi-center-modal .modal-close { border: 1px solid var(--ui-line); color: var(--ui-secondary); background: #1c3425; font-size: 20px; cursor: pointer; }

  @media (min-width: 981px) {
    body.view-lobby-view .lobby-nav-rail { padding-top: 24px; gap: 9px; }
    body.view-lobby-view .lobby-main { padding: 22px; }
  }
  @media (min-width: 1101px) and (max-width: 1360px) {
    body.view-lobby-view #lobby-view.active { grid-template-columns: 172px minmax(0, 1fr) 280px; }
    body.view-lobby-view .lobby-main { padding: 16px; }
  }
  @media (min-width: 621px) and (max-width: 980px) {
    .auth-shell { justify-content: center; }
    .auth-panel { width: min(440px, 100%); }
    #auth-view { align-items: center; }
    #auth-view::before { background: linear-gradient(90deg, #031109b8, #03110985); }
  }
  @media (max-width: 620px) {
    body:is(.view-review-view, .view-dynamic-kifu-view, .view-fairplay-view) #navbar { display: none; }
    body:not(.auth-mode) #navbar { height: auto; min-height: 58px; gap: 10px; padding: 8px 12px; }
    body:not(.auth-mode) #navbar .logo { width: 120px; min-width: 0; flex: 0 0 120px; }
    body:not(.auth-mode) #navbar :is(.nav-right, #nav-user) { min-width: 0; }
    body:not(.auth-mode) #navbar .user-info { flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
    body:not(.auth-mode) #navbar #nav-username { max-width: 5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    body:not(.auth-mode) #navbar .nav-btn { min-height: 36px; padding: 6px 9px; font-size: 11px; white-space: nowrap; }
    #auth-view { padding: 30px 18px; align-items: center; }
    .auth-shell { justify-content: center; }
    .auth-panel { width: min(420px, 100%); }
    .auth-brand { margin-bottom: 24px; }
    .auth-brand-logo { width: min(290px, 90%); }
    .auth-sub { margin: 4px 0 0; font-size: 11px; letter-spacing: 1px; }
    #auth-view::before { background: linear-gradient(180deg, #03110985, #031109e6 48%, #031109fa); }
    .auth-card { padding: 24px 22px; border-radius: 14px; }
    .auth-card-intro h1 { font-size: 21px; }
    .auth-card .form-group :is(input, select) { font-size: 16px; }
    .auth-card .form-group { margin-bottom: 16px; }
    .auth-card .captcha-row { gap: 7px; }
    .modal-overlay { padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)); overflow-y: auto; }
    .modal-overlay > .modal { min-width: 0; max-width: 100%; max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; }
    .modal .form-group :is(input, select), .mp-input { min-width: 0; min-height: 44px; font-size: 16px; }
    .modal-actions .modal-btn { min-height: 44px; }
    .modal .mp-row { flex-wrap: wrap; }
    .modal .mp-input { width: 100%; flex: 1 1 150px; }
    .mp-btn, .aiqi-filter-tab, .aiqi-bill-pager button { min-height: 40px; }
    .modal-title { font-size: 17px; }
    body.view-lobby-view .lobby-main { gap: 14px; }
    body.view-lobby-view .lobby-nav-rail { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 10px; }
    body.view-lobby-view .lobby-nav-item { height: auto; min-height: 67px; flex-direction: column; justify-content: center; gap: 6px; padding: 8px 2px; font-size: 11px; background: #18332550; }
    body.view-lobby-view .lobby-nav-icon { width: 25px; height: 25px; font-size: 13px; }
    body.view-lobby-view .mobile-lobby-modules .live-games-list { grid-template-columns: 1fr; }
    body.view-lobby-view .challenge-panel-head { margin-bottom: 12px; }
    body.view-lobby-view .challenge-panel-head h2 { font-size: 20px; }
    body.view-lobby-view .handicap-guide-inline { font-size: 11px; }
    .modal-overlay .review-workbench-modal { display: block; height: auto; padding: 14px; }
    .review-workbench-modal > .modal-title { position: sticky; top: -14px; z-index: 5; margin: -14px -14px 14px; padding: 14px; background: #11271b; border-bottom: 1px solid var(--ui-line-gold); }
    .review-workbench-body { grid-template-columns: 1fr; gap: 10px; }
    .review-workbench-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 0; }
    .review-workbench-tools button { justify-content: center; font-size: 11px; padding: 8px 4px; }
    .review-workbench-tools span { display: none; }
    .review-source-grid { grid-template-columns: 1fr; }
    .review-source-grid > :is(article, button) { padding: 11px 9px; }
    .review-source-grid strong { font-size: 12px; }
    :is(.review-workbench-list, .go-profile-content, .batch-analysis-content, .training-library-content) { max-height: none; overflow: visible; }
    .go-profile-record-grid, .batch-report-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .go-profile-split, .go-profile-issue-grid, .go-profile-task-grid { grid-template-columns: 1fr; }
    .go-profile-head, .batch-analysis-head, .profile-import-toolbar { flex-wrap: wrap; }
    .profile-import-toolbar > .modal-btn { width: 100%; }
    .go-profile-record-grid strong, .batch-report-metrics strong { font-size: 22px; }
    .go-profile-dimension { grid-template-columns: 54px minmax(30px, 1fr) 28px 40px; gap: 5px; }
    .saved-game-card { flex-wrap: wrap; }
    .saved-game-card footer { justify-content: flex-start; }
    .rv-header { flex-wrap: wrap; gap: 8px; }
    .rv-board-stage { order: 1; }
    .rv-left { order: 2; }
    .rv-right { order: 3; }
    .rv-header :is(.rv-back, .board-toggle), .rv-btn, .rv-tool-btn, .rv-tab { min-height: 42px; }
    .rv-level-select { min-height: 44px; font-size: 16px; }
    #review-slider, #dynamic-preview-slider { min-height: 30px; touch-action: pan-y; }
    .rv-analysis-head > span { max-width: 50%; }
    .rv-fp-metrics, .rv-fp-deep-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    :is(.dynamic-field, .institution-editor-panel) :is(input, select, textarea) { font-size: 16px; }
    :is(.institution-workspace-header, .dynamic-kifu-header, .voice-review-header, .fairplay-workspace-header) { flex-wrap: wrap; gap: 12px; }
    :is(.institution-header-actions, .voice-review-header-actions) { width: 100%; flex-direction: row; flex-wrap: wrap; }
    :is(.institution-header-actions, .voice-review-header-actions) button { flex: 1; min-height: 42px; }
    .institution-workspace-header p { max-width: none; }
    .institution-template-actions, .institution-share-box { min-width: 0; }
    .institution-editor-actions button { min-height: 44px; }
    .institution-report-paper { overflow-wrap: anywhere; }
    .dynamic-kifu-header button, .fairplay-workspace-header button, .fairplay-source-panel > button, .dynamic-btn, .dynamic-preview-controls button { min-height: 44px; }
    .voice-review-intro-card { padding: 20px; }
    .voice-review-source-layout { padding: 14px; gap: 14px; }
    .voice-review-link-field input, .fairplay-source-panel input { min-height: 44px; font-size: 16px; }
    #admin-view, #ai-backend-view { padding: 16px 12px; }
    .admin-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 5px; }
    .admin-tab { flex-shrink: 0; min-height: 44px; }
    .admin-table-wrap { overflow-x: auto; }
    body:not(.auth-mode) #admin-view .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    #admin-view .stat-card { padding: 16px 10px; }
    #admin-view .stat-card:last-child { grid-column: 1 / -1; }
    .admin-overview-panels { grid-template-columns: 1fr; }
    .admin-user-table-wrap { overflow-x: auto; }
    .admin-user-table { min-width: 660px; }
    .admin-user-table th { white-space: nowrap; }
    .admin-user-table:has(.empty-state) { min-width: 0; }
    .admin-user-table:has(.empty-state) thead { display: none; }
    .admin-user-filters :is(input, select) { font-size: 16px; min-height: 44px; }
    .admin-user-filters button, .admin-user-pager button { min-height: 40px; }
    .fin-field, .fin-field :is(input, select) { min-width: 0; max-width: 100%; }
    .finance-toolbar { padding: 12px; }
    .modal .recharge-input-row input { min-width: 0; width: 100%; }
    .aiqi-bill-row, .admin-tx-row { flex-wrap: wrap; row-gap: 6px; }
    .aiqi-tips { font-size: 12px; }
    :is(#lobby-view, #institution-view, #dynamic-kifu-view, #voice-review-view, .professional-review) { padding-bottom: env(safe-area-inset-bottom); }
    .my-profile-modal .modal-body { max-height: none; overflow: visible; }
    .my-profile-modal .modal-head { position: sticky; top: 0; z-index: 3; }
    .aiqi-center-body { max-height: none; overflow: visible; padding: 16px; }
    .aiqi-tab, .aiqi-ok-btn, .aiqi-copy-btn { min-height: 40px; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  }
}

/* Approved 2026-09-10 refinements. Authentication, clock components and game
 * entrance/loading animation selectors deliberately retain their existing rules. */
@media screen {
  body:not(.auth-mode) #navbar { gap: 18px; padding-inline: 22px; }
  body:not(.auth-mode) #navbar .logo { min-width: 140px; flex: 0 0 160px; }
  body:not(.auth-mode) .nav-right { min-width: 0; margin-left: auto; }
  body:not(.auth-mode) #nav-user { display: flex; align-items: center; gap: 16px; }
  body:not(.auth-mode) #nav-user .user-info { gap: 8px; min-width: 0; }
  body:not(.auth-mode) #nav-username { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .site-service-nav { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
  body.view-lobby-view #nav-user .site-service-nav > .site-service-btn:first-of-type { display: inline-flex; }
  body:not(.auth-mode) .site-service-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 7px 9px; background: transparent; border-color: transparent; font-size: 13px; }
  .site-service-btn [data-service-icon] { display: inline-flex; height: 18px; width: 18px; flex-shrink: 0; }
  .site-service-btn svg, .lobby-nav-icon svg { display: block; height: 100%; width: 100%; }
  .site-message-btn { position: relative; }
  .service-message-label { display: none; }
  .site-message-badge { position: absolute; top: -2px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #d4a13b; color: #102018; font: 700 10px/17px var(--font-sans); }
  body:not(.auth-mode) .mobile-settings-btn { display: none; }
  .site-service-modal { width: min(560px, 100%); padding: 0; }
  .site-service-modal .modal-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 23px 25px 18px; margin: 0; border-bottom: 1px solid var(--ui-line); }
  .site-service-modal .modal-close { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border: 0; border-radius: 6px; background: transparent; color: var(--ui-secondary); font-size: 24px; cursor: pointer; }
  .site-service-modal .modal-close:hover { background: #193123; color: var(--ui-gold-light); }
  .site-service-content { padding: 22px 25px 26px; overflow-wrap: anywhere; max-height: 65dvh; overflow-y: auto; overflow-x: hidden; }
  .service-intro { font-size: 15px; color: var(--ui-text); line-height: 1.9; }
  .service-note, .service-loading { color: var(--ui-secondary); font-size: 14px; line-height: 1.8; margin: 12px 0; }
  .service-contact-card { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 24px; padding: 20px; border-radius: 6px; background: #081910; }
  .service-contact-card > span { font-size: 13px; color: var(--ui-secondary); }
  .service-contact-card strong { font-size: 20px; color: var(--ui-gold-light); user-select: text; }
  .service-contact-card .modal-btn { margin-left: auto; }
  .service-messages-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--ui-secondary); font-size: 13px; margin-bottom: 10px; }
  .service-message { border-bottom: 1px solid var(--ui-line); padding: 20px 0; }
  .service-message > div { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; align-items: center; }
  .service-message strong { font-size: 14px; font-weight: 500; }
  .service-message.unread strong::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--ui-gold-light); }
  .service-message time { color: var(--ui-muted); font-size: 12px; }
  .service-message p { margin-top: 12px; color: var(--ui-secondary); font-size: 14px; line-height: 1.85; white-space: pre-wrap; }

  /* Shared surfaces keep independent panels; rows use spacing and a single divider. */
  body.view-lobby-view .lobby-lower-grid { gap: 24px; }
  body.view-lobby-view .lobby-card-head { padding-block: 16px; }
  body.view-lobby-view .online-user { box-shadow: none; border-color: transparent; }
  body.view-lobby-view .lobby-side-panel { padding-inline: 16px; }
  body.view-lobby-view .lobby-side-card { background: transparent; }
  body.view-lobby-view .lobby-side-card + .lobby-side-card { border-top: 1px solid var(--ui-line); border-radius: 0; padding-top: 20px; }
  body.view-lobby-view .chat-input { background: #071710; color: var(--ui-text); }
  body:not(.auth-mode) :is(.modal-btn, .mp-btn, .admin-action-btn, .rv-btn) { font-family: var(--font-sans); }
  body:not(.auth-mode) .modal .form-group label { font-size: 14px; color: var(--ui-secondary); }
  body:not(.auth-mode) .modal .form-group :is(input:not([type=checkbox]):not([type=radio]), select) { background: #081910; color: var(--ui-text); border-color: var(--ui-line); border-radius: 6px; }
  body:not(.auth-mode) .modal .form-group input::placeholder { color: #b0a48a; }
  body:not(.auth-mode) #fairplay-kifu-link { background: #081910 !important; color: var(--ui-text) !important; border-color: var(--ui-line); min-height: 44px; }
  body:not(.auth-mode) #fairplay-kifu-link::placeholder { color: #b0a48a !important; }
  body:not(.auth-mode) :is(.modal, .voice-review-workspace) input:autofill { box-shadow: inset 0 0 0 1000px #081910; -webkit-text-fill-color: #f7edcf; caret-color: #f7edcf; }
  body:not(.auth-mode) :is(.modal, .voice-review-workspace) input:-webkit-autofill { box-shadow: inset 0 0 0 1000px #081910; -webkit-text-fill-color: #f7edcf; caret-color: #f7edcf; }

  /* Current board canvas sizing reads this stage; retain all move handling. */
  body.view-game-view .room-circuit-frame { opacity: .23; }
  body.view-game-view :is(.game-action-rail, .room-info-rail) { background: #0b1b13; border-color: var(--ui-line); box-shadow: none; }
  body.view-game-view .room-action-btn { min-height: 46px; padding: 10px 12px; gap: 9px; font-size: 14px; background: transparent; border-color: transparent; }
  body.view-game-view .room-tool-btn { min-height: 44px; font-size: 14px; }
  body.view-game-view .room-action-btn.danger { color: #e1a095 !important; border-color: transparent !important; background: transparent !important; box-shadow: none; }
  body.view-game-view .room-action-btn.danger .room-action-icon { color: #e1a095; }
  body.view-game-view .room-action-btn.score-btn:not(:disabled) { background: #14271e !important; color: var(--ui-secondary) !important; border-color: var(--ui-line) !important; box-shadow: none; }
  body.view-game-view .room-tool-btn.analyze-btn:not(:disabled) { color: #0d1712 !important; opacity: 1; }
  body.view-game-view .analyze-btn:not(:disabled) .room-tool-icon { color: #0d1712; }
  body.view-game-view :is(.room-info-card-wrap, .room-record-card) { border-color: transparent; border-radius: 0; background: transparent; box-shadow: none; }
  body.view-game-view .room-panel-title { color: var(--ui-text); font: 600 14px/1.5 var(--font-sans); }
  body.view-game-view .game-panel-tab { font: 500 14px/1.5 var(--font-sans); }
  body.view-game-view :is(.room-info-rail, .room-record-card, .record-section, .game-chat) { min-width: 0; grid-template-columns: minmax(0, 1fr); }
  body.view-game-view .chat-input { min-width: 0; width: 0; }
  body.view-game-view .chat-send { flex: 0 0 64px; }
  body.view-game-view .moves-list { border: 0; background: transparent; }
  .professional-review :is(.rv-analysis-head strong, .rv-section-title) { font-family: var(--font-sans); color: var(--ui-text); }
  .professional-review .rv-tabs { background: transparent; }
  .professional-review .rv-file-actions { gap: 8px; }
  .professional-review .rv-chartbar { box-shadow: none; }

  /* Entry only: preserve the current voice player/analysis flow and billing UI. */
  .voice-review-source-layout { grid-template-columns: minmax(0, 2fr) minmax(285px, 1fr); gap: 26px; align-items: start; }
  .voice-review-intro-card { min-height: 200px; grid-template-columns: 96px minmax(0, 1fr); gap: 20px 24px; padding: 22px 24px; background: transparent; border: 0; box-shadow: none; }
  .voice-review-intro-card::after { display: none; }
  .voice-review-intro-card h2 { font-size: 26px; line-height: 1.5; font-weight: 600; }
  .voice-review-intro-card p { color: var(--ui-secondary); font-size: 14px; }
  .voice-review-intro-card li { font-size: 13px; color: var(--ui-secondary); padding-inline: 0; }
  .voice-review-intro-card li b { font-size: 12px; }
  .voice-review-orbit { width: 94px; height: 94px; box-shadow: none; }
  .voice-review-orbit i { width: 54px; height: 54px; }
  .voice-review-orbit::after { width: 6px; height: 6px; right: 12px; top: 10px; box-shadow: none; }
  .voice-review-library-card { background: transparent; border: 0; box-shadow: none; padding: 12px 24px 24px; }
  .voice-review-section-title strong { font: 600 18px/1.5 var(--font-sans); color: var(--ui-text); }
  .voice-review-import-card { border: 0; background: #102319; border-radius: 8px; padding: 24px; box-shadow: none; }
  .voice-review-import-card > p { margin-top: 12px; font-size: 12px; color: var(--ui-secondary); }
  .voice-review-link-field { font-size: 13px; color: var(--ui-secondary); gap: 8px; }
  .voice-review-link-field input { background: #071710; color: var(--ui-text); font-size: 14px; border-color: var(--ui-line); }
  .voice-review-link-field input::placeholder { color: #b0a48a; }
  .voice-review-source-btn { border-radius: 6px; color: var(--ui-secondary); min-height: 48px; }
  .voice-review-source-btn span { font-size: 12px; }
  .voice-review-source-btn strong { font-size: 14px; }
  .voice-review-source-btn.primary { background: linear-gradient(135deg, var(--ui-action-gold-deep), var(--ui-action-gold-light) 52%, #bd8a28); border-color: var(--ui-action-gold-edge); color: #0d1712; }
  .voice-review-source-btn.primary strong { color: #0d1712; }
  .voice-review-game-list { gap: 0; max-height: 410px; }
  .voice-review-game-row { min-height: 80px; border: 0; border-bottom: 1px solid var(--ui-line); border-radius: 0; background: transparent; padding: 12px 0; }
  .voice-review-game-row:hover { transform: none; }
  .voice-review-game-row strong { font-size: 14px; color: var(--ui-text); }
  .voice-review-game-row small { font-size: 12px; color: var(--ui-secondary); }
  .voice-review-game-row > b { font-size: 13px; }

  @media (min-width: 1051px) {
    body.view-lobby-view .lobby-main { padding: 28px; }
    body.view-game-view .room-layout { grid-template-columns: 174px minmax(0, 1fr) 280px; }
    body.view-game-view .game-table-shell { grid-template-columns: minmax(126px, 142px) minmax(0, 1fr) minmax(126px, 142px); gap: 0 10px; padding-inline: 12px; }
    body.view-game-view .room-player-slot { width: 100%; min-width: 0; }
  }
  @media (min-width: 1700px) {
    body.view-game-view .room-layout { grid-template-columns: 184px minmax(0, 1fr) 304px; }
    body.view-game-view .game-table-shell { grid-template-columns: 164px minmax(0, 1fr) 164px; gap: 0 18px; }
  }
  @media (max-width: 1240px) and (min-width: 761px) {
    body:not(.auth-mode) #navbar { padding-inline: 14px; gap: 8px; }
    body:not(.auth-mode) #navbar .logo { flex-basis: 130px; min-width: 130px; }
    body:not(.auth-mode) #nav-user { gap: 8px; }
    body:not(.auth-mode) #nav-user .user-info { gap: 5px; }
    body:not(.auth-mode) #nav-username { max-width: 60px; }
    body:not(.auth-mode) #nav-rank { display: none; }
    body:not(.auth-mode) .site-service-btn { padding-inline: 6px; font-size: 12px; }
    body:not(.auth-mode) .site-service-btn [data-service-icon] { display: none; }
    body:not(.auth-mode) .site-message-btn [data-service-icon] { display: inline-flex; }
  }
  @media (max-width: 1050px) {
    .voice-review-source-layout { grid-template-columns: minmax(0, 1fr); }
    .voice-review-import-card { grid-row: auto; }
    .voice-review-library-card { order: 1; }
    .voice-review-import-card { order: 2; }
  }
  @media (max-width: 760px) {
    /* Compact service icons elsewhere; full two-row header belongs to the lobby. */
    body:not(.auth-mode) #navbar { padding-inline: 10px; gap: 8px; }
    body:not(.auth-mode) #navbar .logo { min-width: 100px; flex-basis: 110px; }
    body:not(.auth-mode) #nav-user { gap: 5px; }
    body:not(.auth-mode) #nav-user .user-info { gap: 5px; }
    body:not(.auth-mode) .site-service-nav { gap: 0; }
    body:not(.auth-mode) .site-service-btn { padding: 7px; min-height: 36px; }
    body:not(.auth-mode) .site-service-btn > span:not([data-service-icon]):not(.site-message-badge) { display: none; }
    body:not(.auth-mode):not(.view-lobby-view) .site-service-nav .site-service-btn:not(.site-message-btn) { display: none; }
    body.view-lobby-view #navbar { height: auto; min-height: 104px; display: grid; grid-template-columns: 110px minmax(0, 1fr); grid-template-rows: 46px auto; gap: 0 10px; padding: max(4px, env(safe-area-inset-top)) 14px 7px; }
    body.view-lobby-view #navbar .logo { width: 110px; min-width: 0; grid-column: 1; grid-row: 1; }
    body.view-lobby-view :is(.nav-right, #nav-user) { display: contents !important; }
    body.view-lobby-view #nav-user .user-info { grid-column: 2; grid-row: 1; justify-content: flex-end; width: 100%; }
    body.view-lobby-view #nav-user .user-info > button[onclick="showLobby()"] { display: none; }
    body.view-lobby-view #nav-user .user-info > .nav-btn { font-size: 12px; min-height: 36px; }
    body.view-lobby-view .site-service-nav { grid-column: 1/-1; grid-row: 2; width: 100%; display: flex; gap: 4px; justify-content: space-between; border-top: 1px solid var(--ui-line); padding-top: 5px; }
    body.view-lobby-view #navbar .site-service-btn { flex: 1; min-width: 0; min-height: 46px; flex-direction: column; gap: 4px; font-size: 11px; line-height: 1.3; padding: 4px 0; }
    body.view-lobby-view .site-service-btn > span:not([data-service-icon]):not(.site-message-badge) { display: inline; }
    body.view-lobby-view .site-service-btn [data-service-icon] { width: 17px; height: 17px; }
    body.view-lobby-view .site-message-badge { right: calc(50% - 20px); top: -2px; }
    body.view-lobby-view #navbar .mobile-settings-btn { display: flex; }
    body.view-lobby-view .lobby-main > .lobby-handicap-panel { order: -3; }
    body.view-lobby-view .lobby-main > .lobby-nav-rail { order: -2; border: 0; margin: 0; }
    body.view-lobby-view .lobby-nav-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 10px 14px; border: 0; background: #0c1e15; margin: 14px 14px 0; border-radius: 8px; }
    body.view-lobby-view .lobby-nav-item { display: flex; flex-direction: column; justify-content: center; min-height: 82px; height: auto; gap: 8px; padding: 11px 3px; border: 0; border-radius: 0; background: transparent; font-size: 14px; }
    body.view-lobby-view .lobby-nav-icon { width: 24px; height: 24px; font-size: 16px; border: 0; }
    body.view-lobby-view .lobby-settings-entry, body.view-lobby-view .lobby-ai-online { display: none; }
    body.view-lobby-view .lobby-nav-rail .pwa-install-btn { grid-column: 1/-1; flex-direction: row; min-height: 44px; border-top: 1px solid var(--ui-line); }
    body.view-lobby-view .lobby-main { padding: 20px 14px; gap: 20px; }
    body.view-lobby-view .lobby-side-panel { padding-inline: 14px; }
    body.view-lobby-view .lobby-card-head h3 { font-size: 16px; }
    .voice-review-header { padding: 22px 18px; }
    .voice-review-source-layout { padding: 14px 18px 24px; gap: 22px; }
    .voice-review-intro-card { grid-template-columns: 62px minmax(0, 1fr); min-height: 0; padding: 10px 0 0; gap: 14px; }
    .voice-review-intro-card h2 { font-size: 21px; margin: 4px 0 8px; }
    .voice-review-intro-card p { font-size: 13px; }
    .voice-review-orbit { width: 60px; height: 60px; }
    .voice-review-orbit i { width: 40px; height: 40px; }
    .voice-review-orbit b { font-size: 17px; }
    .voice-review-orbit::after { right: 4px; top: 4px; }
    .voice-review-intro-card ol { gap: 5px; }
    .voice-review-intro-card li { gap: 5px; font-size: 12px; white-space: nowrap; }
    .voice-review-library-card { padding: 0; }
    .voice-review-import-card { padding: 22px; }
    .voice-review-link-field input { min-height: 46px; font-size: 16px; }
    .voice-review-game-row { gap: 9px; }
    .voice-review-game-row strong { white-space: normal; overflow-wrap: anywhere; font-size: 13px; }
    .voice-review-game-row small { font-size: 12px; }
    .site-service-content { padding: 18px; }
    .professional-review .rv-analysis-head { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .professional-review .rv-analysis-head > span { text-align: left; }
    .site-service-modal .modal-head { padding: 20px 18px 16px; }
    .service-contact-card { padding: 16px; }
  }
}