/* Companion screens share the home hub's white and pale-blue surfaces. */
.market-app .secondary-page { padding-top:6px; min-width:0; }
.market-app .secondary-page .secondary-heading { margin:16px 0; padding:0; align-items:center; gap:14px; }
.secondary-heading .page-heading-copy { display:flex; align-items:center; gap:15px; min-width:0; }
.page-heading-copy > div { min-width:0; }
.secondary-page .page-heading-icon { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:44px; height:44px; border-radius:12px; background:#edf3ff; color:#365cbb; }
.market-app .secondary-page .secondary-heading h1 { font-size:26px; font-weight:800; letter-spacing:-.04em; line-height:1.4; overflow-wrap:anywhere; }
.secondary-page .page-description { margin-top:5px; color:var(--muted); font-size:13px; line-height:1.7; }
.market-app .secondary-page .panel { border:1px solid #dce4ef; border-radius:16px; background:#fff; box-shadow:none; min-width:0; }
.market-app .secondary-page .button { min-height:44px; border-radius:10px; padding:10px 16px; font-size:13px; font-weight:700; white-space:normal; }
.market-app .secondary-page .button.primary { background:#365cbb; color:#fff; border-color:#365cbb; }
.market-app .secondary-page .button.primary:hover { background:#284a9d; border-color:#284a9d; }
.market-app .secondary-page .button.secondary { background:#fff; color:#365cbb; border-color:#dce4ef; }
.market-app .secondary-page .button.secondary:hover { background:#edf3ff; border-color:#b7caed; }
.secondary-page .text-link,.secondary-page .text-button { min-height:44px; display:inline-flex; align-items:center; gap:6px; }
.secondary-page :is(button,a,input,select,summary):focus-visible { outline:3px solid #365cbb; outline-offset:3px; }
.secondary-page .panel-heading { gap:12px; align-items:center; background:#fff; border-radius:16px 16px 0 0; }
.secondary-page .panel-heading h2 { display:flex; align-items:center; gap:8px; font-size:18px; line-height:1.5; }
.secondary-page .panel-subtitle { color:var(--muted); font-size:13px; margin-top:4px; line-height:1.6; }
.secondary-page .empty-state { background:#fff; border-radius:16px; padding:28px 20px; }
.secondary-page .empty-state .empty-icon { background:#edf3ff; color:#365cbb; width:48px; height:48px; border-radius:12px; margin-bottom:12px; }
.secondary-page .empty-state .empty-icon > svg { width:24px; height:24px; }
.secondary-page .empty-state h3 { font-weight:750; }
.market-app .secondary-page .empty-state p { color:#4c607e; font-size:13px; line-height:1.7; max-width:520px; }
.secondary-page .empty-state .button { margin-top:16px; }
.secondary-page .page-loading { min-height:180px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:12px; color:var(--muted); font-size:13px; }

/* Detail: identity, price and prediction are three clear groups. */
.market-app .stock-detail-page .back-link { display:inline-flex; align-items:center; min-height:44px; margin:8px 0; color:var(--muted); font-size:13px; }
.market-app .stock-detail-page .detail-heading { padding:22px 24px; margin:0 0 22px; background:#fff; border:1px solid var(--line); border-radius:24px; }
.stock-detail-page .detail-heading .stock-identity { gap:16px; min-width:0; }
.stock-detail-page .detail-heading .stock-identity > div { min-width:0; }
.stock-detail-page .detail-heading .stock-identity h1 { overflow-wrap:anywhere; }
.stock-detail-page .detail-heading .instrument-avatar { width:58px; height:58px; border-radius:20px; font-size:28px; }
.stock-detail-page .detail-actions { display:flex; flex-wrap:wrap; gap:8px; }
.market-app .stock-detail-page .detail-actions .is-favorite { background:#fbf0c2; border-color:#ebdfa8; }
.stock-detail-page .detail-actions .is-favorite svg { fill:currentColor; }
.market-app .stock-detail-page .live-detail-columns { gap:22px; }
.stock-detail-page .quote-price-heading { padding-bottom:18px; border-bottom:1px solid var(--line); margin-bottom:18px; gap:12px; }
.stock-detail-page .quote-price-heading .closing-price { margin-top:5px; font-size:34px; line-height:1.3; letter-spacing:-1px; }
.stock-detail-page .quote-price-date { font-size:12px; color:var(--muted); }
.stock-detail-page .quote-data-details { margin-top:16px; border:1px solid #e8ebdf; background:#f8f9f3; border-radius:16px; padding:0 14px; }
.stock-detail-page .quote-data-details summary { min-height:48px; padding:12px 0; font-size:13px; }
.stock-detail-page .quote-data-details > div { padding-bottom:14px; }
.stock-detail-page .quote-next-note { border:1px solid var(--line); background:#f0f2e9; border-radius:18px; padding:14px 18px; margin-top:18px; }

/* Small, honest summaries remain useful before the first prediction. */
.market-app .secondary-page .page-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0 0 16px; padding:0; border:0; }
.market-app .secondary-page .page-stat { display:flex; flex-direction:column; min-width:0; padding:18px; border:1px solid #dce4ef; border-radius:16px; background:#fff; box-shadow:none; }
.market-app .secondary-page .page-stat.stat-featured { background:#edf3ff; border-color:#cbdcf5; }
.secondary-page .page-stat-label { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:13px; line-height:1.5; }
.page-stat-label svg { flex-shrink:0; }
.page-stat-label > span { min-width:0; }
.market-app .secondary-page .page-stat > strong { display:block; color:#0d1522; font-size:32px; font-weight:700; line-height:1.3; margin:8px 0 4px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.market-app .secondary-page .page-stat > strong small { margin-left:4px; font-size:13px; font-weight:500; }
.market-app .secondary-page .page-stat > p { margin-top:auto; color:var(--muted); font-size:13px; line-height:1.6; }
.secondary-page .profile-account { display:flex; align-items:center; gap:14px; margin-bottom:16px; padding:16px 18px; background:#fff; border:1px solid #dce4ef; border-radius:16px; }
.profile-account .account-avatar { display:flex; align-items:center; justify-content:center; flex-shrink:0; width:44px; height:44px; border-radius:12px; background:#edf3ff; color:#365cbb; }
.profile-account .account-copy { flex:1; min-width:0; }
.profile-account .account-copy strong { display:block; font-size:15px; overflow-wrap:anywhere; }
.profile-account .account-copy p { font-size:13px; color:var(--muted); margin-top:3px; line-height:1.65; }
.profile-account .account-actions { flex-shrink:0; }
.profile-account .account-status { display:block; font-size:13px; color:#4c607e; }
.secondary-page .profile-share { margin:-10px 0 14px; text-align:right; }
.market-app .secondary-page .status-tag.correct { color:#2d6b54; background:#edf7f1; }
.market-app .secondary-page .status-tag.pending { color:#365cbb; background:#edf3ff; }
.market-app .secondary-page .status-tag.incorrect { color:#4c607e; background:#f1f4f8; }

/* Results stay first, with update timing and longer explanations below. */
.market-app .results-page .result-update-schedule { margin-bottom:16px; padding:16px 20px; background:#edf3ff; border-color:#dce4ef; }
.results-page .result-update-copy > strong { font-size:14px; }
.secondary-page .result-update-details summary { width:fit-content; min-height:44px; padding:8px 0; color:var(--accent); font-size:13px; cursor:pointer; }
.secondary-page .result-update-details p { font-size:13px; line-height:1.65; margin-bottom:6px; }
.market-app .secondary-page .results-summary .page-stat { padding:15px 20px; box-shadow:none; }
.market-app .secondary-page .results-summary .page-stat > strong { font-size:28px; }
.secondary-page .page-toolbar { align-items:end; gap:18px; }
.secondary-page .page-filter-field { display:grid; gap:5px; color:var(--muted); font-size:13px; min-width:0; }
.market-app .secondary-page .page-filter-field select { width:100%; min-height:44px; color:#0d1522; background:#fff; border:1px solid #dce4ef; border-radius:10px; font-size:14px; }
.market-app .secondary-page .segmented { background:#f3f6fb; border:1px solid #dce4ef; border-radius:12px; padding:3px; }
.market-app .secondary-page .segmented button { min-height:44px; padding:8px 18px; border-radius:9px; font-size:13px; color:#4c607e; }
.market-app .secondary-page .segmented button.active { background:#365cbb; color:#fff; box-shadow:none; }
.market-app .secondary-page .segmented button:hover:not(.active) { background:#e6eefc; color:#365cbb; }
.market-app .secondary-page .result-filter { background:#fff; }
.market-app .secondary-page .result-filter .filter-tabs { flex-wrap:wrap; gap:4px; }
.market-app .secondary-page .result-filter .filter-tabs button { min-height:44px; padding:8px 12px; border:1px solid transparent; border-radius:9px; color:#4c607e; font-size:13px; }
.market-app .secondary-page .result-filter .filter-tabs button.active { color:#365cbb; background:#edf3ff; border-color:#b7caed; }
.market-app .secondary-page .result-filter .filter-tabs button:hover:not(.active) { background:#f3f6fb; color:#365cbb; }
.secondary-page .result-data-details,.secondary-page .ranking-rules { margin-top:16px; padding:0 18px; background:#fff; border:1px solid #dce4ef; border-radius:12px; font-size:13px; }
.secondary-page .result-data-details > summary,.secondary-page .ranking-rules > summary { display:flex; align-items:center; gap:8px; min-height:48px; padding:11px 0; cursor:pointer; color:var(--accent); font-weight:600; list-style:none; }
.secondary-page .result-data-details > summary::after { content:'＋'; margin-left:auto; }
.secondary-page .result-data-details[open] > summary::after { content:'−'; }
.secondary-page .ranking-rules > summary > svg:last-child { margin-left:auto; transition:transform .15s ease; }
.secondary-page .ranking-rules[open] > summary > svg:last-child { transform:rotate(180deg); }
.secondary-page :is(.result-data-details,.ranking-rules) > summary::-webkit-details-marker { display:none; }
.secondary-page :is(.result-data-details,.ranking-rules) > div { padding:0 0 16px; color:var(--muted); line-height:1.75; overflow-wrap:anywhere; }
.secondary-page :is(.result-data-details,.ranking-rules) p + p { margin-top:10px; }

/* Ranking controls, personal record and leaderboard have distinct surfaces. */
.market-app .secondary-page .stock-ranking-filters { margin-bottom:16px; padding:16px 18px; gap:16px; align-items:end; }
.secondary-page .stock-ranking-filters label { flex:1; }
.secondary-page .stock-ranking-filters label:first-child { flex:2; max-width:none; }
.secondary-page .stock-ranking-heading { margin-bottom:20px; align-items:center; }
.secondary-page .ranking-title-copy .eyebrow { color:var(--muted); font-size:12px; margin-bottom:4px; }
.secondary-page .ranking-title-copy h2 { font-size:22px; font-weight:800; line-height:1.45; overflow-wrap:anywhere; }
.secondary-page .ranking-title-copy .caption { color:var(--muted); font-size:13px; margin-top:4px; }
.market-app .secondary-page .stock-ranking-summary { display:block; border:0; padding:0; background:transparent; margin-bottom:20px; }
.market-app .secondary-page .ranking-own-stats { margin-bottom:10px; }
.secondary-page .ranking-own-recent { display:flex; align-items:center; flex-wrap:wrap; gap:10px; font-size:13px; color:var(--muted); padding:8px 4px; }
.secondary-page .ranking-guest-note { display:flex; align-items:center; gap:12px; padding:16px 18px; border:1px solid #dce4ef; border-radius:16px; background:#edf3ff; }
.secondary-page .ranking-guest-note .page-heading-icon { width:40px; height:40px; border-radius:12px; background:#dfe9ff; }
.secondary-page .ranking-guest-note strong { font-size:14px; font-weight:700; }
.secondary-page .ranking-guest-note p { font-size:13px; line-height:1.65; margin-top:3px; }
.secondary-page .stock-ranking-panel { overflow:hidden; }
.secondary-page .rank-number { display:inline-flex; align-items:center; justify-content:center; gap:3px; min-width:36px; min-height:36px; border-radius:10px; }
.secondary-page .rank-number.rank-1 { background:#dfe9ff; color:#284a9d; }
.secondary-page .rank-number.rank-2 { background:#edf3ff; color:#365cbb; }
.secondary-page .rank-number.rank-3 { background:#f1f4f8; color:#4c607e; }
.secondary-page .rank-number small { margin:0; font-size:11px; }
.market-app .secondary-page .stock-ranking-table .my-row { background:#edf3ff; }
.secondary-page .recent-result { border-radius:6px; background:#f1f4f8; width:24px; height:28px; }
.secondary-page .recent-result.correct { color:#2d6b54; background:#edf7f1; }
.secondary-page .recent-result.empty { background:transparent; }
.secondary-page .ranking-empty { border:1px solid var(--line); }

/* Give the result and history tables the same quiet header and readable rows. */
.market-app .secondary-page :is(.live-result-table,.live-history-table) { color:#0d1522; font-size:14px; line-height:1.6; font-variant-numeric:tabular-nums; }
.market-app .secondary-page :is(.live-result-table,.live-history-table) th { padding:12px 18px; color:#4c607e; background:#f5f8fd; border-color:#dce4ef; font-size:13px; font-weight:600; }
.market-app .secondary-page :is(.live-result-table,.live-history-table) td { padding:16px 18px; border-color:#e7edf5; vertical-align:top; }
.market-app .secondary-page :is(.live-result-table,.live-history-table) tbody tr:hover { background:#f7faff; }
.market-app .secondary-page :is(.live-result-table,.live-history-table) .stock-identity { color:#0d1522; }
.market-app .secondary-page :is(.live-result-table,.live-history-table) .stock-identity:hover { color:#365cbb; }
.market-app .secondary-page :is(.live-result-table,.live-history-table) small { color:#4c607e; line-height:1.55; }
.market-app .secondary-page .pending-reason { max-width:180px; margin-top:5px; color:#4c607e; font-size:13px; line-height:1.55; white-space:normal; }

/* Dialogs remain above the mobile navigation, with comfortable controls. */
.market-app ~ #modal-root { --ink:#0d1522; --navy:#0d1522; --muted:#4c607e; --line:#dce4ef; --accent:#365cbb; --accent-hover:#284a9d; --focus:#365cbb; --surface:#f7faff; }
.market-app ~ #modal-root .modal { color:#0d1522; background:#fff; border:1px solid #dce4ef; border-radius:20px; padding:28px; box-shadow:0 24px 80px #152b4a24; }
.market-app ~ #modal-root .modal-mark { display:flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:12px; margin-bottom:14px; background:#edf3ff; color:#365cbb; }
.market-app ~ #modal-root .modal h2 { font-size:24px; letter-spacing:-.025em; }
.market-app ~ #modal-root .modal input,.market-app ~ #modal-root .modal textarea { border:1px solid #dce4ef; border-radius:10px; min-height:48px; font-size:16px; background:#fff; }
.market-app ~ #modal-root .button { min-height:44px; border-radius:10px; }
.market-app ~ #modal-root .button.primary { border-color:#365cbb; background:#365cbb; color:#fff; font-weight:700; }
.market-app ~ #modal-root .button.primary:hover { border-color:#284a9d; background:#284a9d; }
.market-app ~ #modal-root .button.secondary { border-color:#dce4ef; color:#365cbb; background:#fff; }
.market-app ~ #modal-root .button.secondary:hover { background:#edf3ff; }
.market-app ~ #modal-root .auth-unavailable,.market-app ~ #modal-root .legacy-login { border-color:#dce4ef; border-radius:12px; background:#f7faff; }
.market-app ~ #modal-root .auth-unavailable,.market-app ~ #modal-root .legacy-login > p,.market-app ~ #modal-root .legacy-login summary { font-size:13px; line-height:1.7; }
.market-app ~ #modal-root .legacy-login { padding:16px; }
.market-app ~ #modal-root .rules-section { margin:16px 0; padding:16px 18px; background:#f7faff; border:1px solid #dce4ef; border-radius:12px; }
.market-app ~ #modal-root .rules-section h3 { font-size:15px; color:#0d1522; margin-bottom:8px; }
.market-app ~ #modal-root .rules-section p { margin:8px 0 0; font-size:13px; line-height:1.85; }
.market-app ~ #modal-root :is(button,a,input,textarea,summary):focus-visible { outline:3px solid #365cbb; outline-offset:3px; }

@media (max-width:850px) {
  .market-app .stock-detail-page .live-detail-columns { grid-template-columns:minmax(0,1fr); }
  .market-app .stock-detail-page .live-detail-columns > .detail-prediction { grid-column:1; grid-row:1; }
  .market-app .stock-detail-page .live-detail-columns > .quote-detail { grid-column:1; grid-row:2; }
  .market-app .stock-detail-page .detail-heading { flex-wrap:wrap; }
  .stock-detail-page .detail-actions { width:100%; }
  .secondary-page .profile-account { flex-wrap:wrap; }
  .profile-account .account-actions { margin-left:60px; }
}
@media (max-width:700px) {
  .market-app .secondary-page .secondary-heading { margin:12px 0 16px; flex-wrap:wrap; gap:8px; }
  .secondary-heading .page-heading-copy { gap:11px; align-items:flex-start; }
  .secondary-page .page-heading-icon { width:40px; height:40px; border-radius:12px; }
  .market-app .secondary-page .secondary-heading h1 { font-size:24px; }
  .secondary-page .page-description { font-size:13px; }
  .market-app .stock-detail-page .detail-heading { padding:18px; margin-bottom:16px; border-radius:22px; }
  .stock-detail-page .detail-heading .stock-identity { gap:12px; align-items:flex-start; }
  .stock-detail-page .detail-heading .instrument-avatar { width:44px; height:44px; border-radius:16px; font-size:23px; }
  .stock-detail-page .detail-actions { gap:8px; }
  .stock-detail-page .detail-actions .button { flex:1; padding:8px 10px; font-size:12px; }
  .stock-detail-page .quote-price-heading { flex-wrap:wrap; }
  .stock-detail-page .quote-price-heading .closing-price { font-size:30px; }
  .market-app .secondary-page .page-stats { gap:8px; margin-bottom:18px; }
  .market-app .secondary-page .page-stat,.market-app .secondary-page .results-summary .page-stat { padding:14px 10px; border-radius:14px; }
  .secondary-page .page-stat-label { font-size:13px; gap:4px; min-height:36px; align-items:flex-start; }
  .secondary-page .page-stat-label svg { width:14px; height:14px; margin-top:2px; }
  .market-app .secondary-page .page-stat > strong { font-size:28px; }
  .market-app .secondary-page .page-stat > strong small { font-size:12px; margin-left:2px; }
  .market-app .secondary-page .page-stat > p { font-size:13px; }
  .secondary-page .profile-account { padding:14px; gap:12px; border-radius:16px; }
  .profile-account .account-copy { flex-basis:calc(100% - 60px); }
  .profile-account .account-actions { margin-left:58px; }
  .market-app .secondary-page .result-update-schedule { padding:14px; gap:9px; }
  .market-app .secondary-page .page-toolbar { align-items:stretch; gap:12px; padding:15px; }
  .secondary-page .page-toolbar .segmented { width:100%; display:flex; }
  .secondary-page .page-toolbar .segmented button { flex:1; }
  .secondary-page .page-filter-field { width:100%; }
  .market-app .secondary-page .page-filter-field select { font-size:16px; }
  .market-app .secondary-page .result-filter { gap:6px; padding:8px 12px; }
  .market-app .secondary-page .result-filter .filter-tabs button { font-size:13px; padding:8px 10px; }
  .secondary-page .panel-heading > .text-link { font-size:13px; }
  .market-app .secondary-page .live-result-table tbody,.market-app .secondary-page .live-history-table tbody { background:#f7faff; border-radius:0 0 16px 16px; }
  .market-app .secondary-page .live-result-table tr,.market-app .secondary-page .live-history-table tr { border-color:#dce4ef; border-radius:12px; padding:14px; }
  .market-app .secondary-page :is(.live-result-table,.live-history-table) td { padding:0; border:0; }
  .market-app .secondary-page :is(.live-result-table,.live-history-table) td[data-label]::before { color:#4c607e; font-size:13px; line-height:1.5; margin-bottom:4px; }
  .market-app .secondary-page .stock-ranking-filters { flex-direction:row; flex-wrap:wrap; padding:14px; gap:12px; margin-bottom:16px; }
  .secondary-page .stock-ranking-filters label:first-child { flex-basis:100%; }
  .secondary-page .stock-ranking-heading h2 { font-size:21px; }
  .secondary-page .stock-ranking-heading > .button { margin-top:10px; }
  .secondary-page .ranking-guest-note { padding:14px; align-items:flex-start; }
  .market-app .secondary-page .stock-ranking-panel { background:transparent; border:0; box-shadow:none; overflow:visible; }
  .market-app .secondary-page .stock-ranking-table tbody { display:grid; gap:10px; }
  .market-app .secondary-page .stock-ranking-table tr { grid-template-columns:36px minmax(0,1fr) auto; gap:10px; padding:14px 13px; background:#fff; border:1px solid #dce4ef; border-radius:16px; }
  .market-app .secondary-page .stock-ranking-table tr.my-row { background:#edf3ff; border-color:#b7caed; }
  .market-app .secondary-page .stock-ranking-table td { padding:0; }
  .secondary-page .stock-rank-place .rank-number { flex-wrap:nowrap; font-size:18px; }
  .secondary-page .stock-rank-place small { display:inline; }
  .secondary-page .ranking-rules,.secondary-page .result-data-details { padding-inline:14px; }
  .market-app ~ #modal-root .modal { padding:24px 20px; border-radius:16px; }
  .market-app ~ #modal-root .modal h2 { font-size:22px; }
  .market-app ~ #modal-root .rules-section { padding:14px; }
}
@media (max-width:360px) {
  .market-app .secondary-page .page-stat,.market-app .secondary-page .results-summary .page-stat { padding-inline:7px; }
  .market-app .secondary-page .page-stat > strong { font-size:24px; }
  .secondary-page .page-stat-label svg { display:none; }
  .market-app .secondary-page .results-summary .page-stat > strong { font-size:25px; }
  .market-app .stock-detail-page .detail-prediction .vote-button { padding-inline:6px; gap:5px; font-size:18px; }
  .market-app .stock-detail-page .detail-prediction .vote-button > svg { width:18px; height:18px; }
  .stock-detail-page .vote-button-note { white-space:nowrap; }
  .market-app .secondary-page .live-result-table tr,.market-app .secondary-page .live-history-table tr { padding:12px; }
}
@media (prefers-reduced-motion:reduce) {
  .secondary-page *, .market-app ~ #modal-root * { transition:none !important; }
}