/* Customer workspace. Kept separate so the admin console is unchanged. */
.clean-ui {
  --bg: #101214;
  --surface: #171a1d;
  --surface-solid: #171a1d;
  --surface-2: #1d2125;
  --surface-3: #292e33;
  --border: #2b3035;
  --border-strong: #454d54;
  --text: #edf0f2;
  --muted: #a0a8af;
  --muted-2: #89939c;
  --mint: #a4d6be;
  --mint-strong: #bce7d1;
  --mint-soft: #21362d;
  --danger: #e8a0a0;
  --danger-soft: #362629;
  background: var(--bg);
  font-size: 0.875rem;
  line-height: 1.5;
  font-weight: 400;
}
.clean-ui [hidden] { display: none !important; }
.clean-ui :focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; }
.clean-ui h1:focus { outline: none; }
.clean-ui .section-kicker { display: none; }
.clean-ui .app-header { height: 72px; background: var(--bg); backdrop-filter: none; border-color: var(--border); }
.clean-ui .header-inner { max-width: 1160px; padding: 0 32px; gap: 56px; }
.clean-ui .brand { min-width: auto; min-height: 44px; }
.clean-ui .brand-name { font-size: 1.3125rem; font-weight: 700; letter-spacing: -.7px; }
.clean-ui .top-links { display: flex; align-self: stretch; margin: 0; gap: 32px; }
.clean-ui .top-links a { display: flex; align-items: center; padding: 0 2px; border-radius: 0; border-bottom: 2px solid transparent; font-size: 0.875rem; font-weight: 500; white-space: nowrap; }
.clean-ui .top-links a:hover { background: transparent; color: var(--text); }
.clean-ui .top-links a[aria-current="page"] { color: var(--text); border-bottom-color: var(--mint); }
.clean-ui .header-actions { gap: 18px; }
.clean-ui .language-control { padding: 0; border: 0; background: none; }
.clean-ui .language-control > span { display: none; }
.clean-ui .language-control select { font-size: 0.75rem; font-weight: 400; color: var(--muted); max-width: 105px; }
.clean-ui .wallet { padding: 0 14px; gap: 8px; background: transparent; border-color: var(--border-strong); border-radius: 6px; min-height: 36px; }
.clean-ui .wallet > span:not(.wallet-avatar) { display: inline; max-width: 140px; overflow: hidden; text-overflow: ellipsis; font-size: 0.75rem; }
.clean-ui .wallet b { color: var(--muted); }
.clean-ui .app-container { width: min(960px, calc(100% - 64px)); min-height: calc(100dvh - 154px); padding: 48px 0 64px; }
.clean-ui .page-view { animation: none; }
.clean-ui .view-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 36px; }
.clean-ui .view-heading h1 { margin: 0; font-size: 1.625rem; font-weight: 600; line-height: 1.3; letter-spacing: -.6px; }
.clean-ui .network-label { color: var(--muted); font-size: 0.75rem; }
.clean-ui .portfolio-summary { display: flex; justify-content: space-between; align-items: center; padding-bottom: 36px; gap: 24px; }
.clean-ui .portfolio-total { margin: 0; min-width: 0; }
.clean-ui .portfolio-total > small { font-size: 0.8125rem; }
.clean-ui .portfolio-total > div { margin-top: 12px; gap: 12px; flex-wrap: wrap; }
.clean-ui .portfolio-total strong { font-size: clamp(2.25rem, 4.4vw, 3.25rem); letter-spacing: -1.8px; font-weight: 500; overflow-wrap: anywhere; }
.clean-ui .portfolio-total span { font-size: 0.875rem; font-weight: 400; }
.clean-ui .portfolio-total p { margin-top: 12px; font-size: 0.75rem; color: var(--muted); }
.clean-ui .portfolio-actions { margin: 0; gap: 10px; flex: 0 0 auto; }
.clean-ui .portfolio-actions button { min-width: 88px; height: 40px; font-size: 0.875rem; font-weight: 500; border-radius: 6px; background: transparent; }
.clean-ui .portfolio-actions .portfolio-primary { background: var(--mint); border-color: var(--mint); color: #13251c; }
.clean-ui .guest-hint { display: none; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; border-top: 1px solid var(--border); font-size: 0.8125rem; color: var(--muted); }
.clean-ui.guest-mode .guest-hint { display: flex; }
.clean-ui .guest-hint button { flex-shrink: 0; padding: 8px 0; color: var(--mint); border: 0; background: none; font-size: 0.8125rem; }
.clean-ui .asset-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; }
.clean-ui .asset-table thead { color: var(--muted); font-size: 0.75rem; border-top: 1px solid var(--border); }
.clean-ui .asset-table th { text-align: start; font-weight: 400; }
.clean-ui .asset-table thead th { height: 48px; }
.clean-ui .asset-table tr { border-bottom: 1px solid var(--border); }
.clean-ui .asset-table tbody tr { height: 88px; }
.clean-ui .asset-table th:first-child { width: 43%; }
.clean-ui .asset-table td { font-size: 1rem; font-weight: 500; }
.clean-ui .asset-table td:nth-child(2), .clean-ui .asset-table th:nth-child(2) { text-align: end; padding-inline-end: 36px; overflow-wrap: anywhere; }
.clean-ui .asset-table th:last-child, .clean-ui .asset-table td:last-child { width: 100px; text-align: end; }
.clean-ui .asset-table a { display: inline-block; color: var(--mint); text-decoration: none; font-size: 0.8125rem; padding: 12px 0 12px 12px; }
.clean-ui .asset-name { display: flex; align-items: center; gap: 14px; font-size: 0.9375rem; font-weight: 600; }
.clean-ui .asset-name small { display: block; font-weight: 400; color: var(--muted); font-size: 0.75rem; margin-top: 2px; }
.clean-ui .asset-icon { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text); font-size: 0.8125rem; box-shadow: none; flex-shrink: 0; }
.clean-ui .quiet-note { color: var(--muted); margin: 20px 0 0; font-size: 0.75rem; }
.clean-ui .earn-layout { display: grid; grid-template-columns: minmax(0, 540px) minmax(0, 1fr); gap: 64px; align-items: start; }
.clean-ui .trade-card { box-shadow: none; backdrop-filter: none; border-radius: 0; background: transparent; border: 0; }
.clean-ui .action-card { padding: 0; }
.clean-ui .tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0 0 28px; padding: 0; background: none; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; }
.clean-ui .tabs button { min-height: 46px; padding: 0 4px; border-radius: 0; border-bottom: 2px solid transparent; font-size: 0.875rem; font-weight: 500; }
.clean-ui .tabs button.active { background: none; box-shadow: none; color: var(--text); border-bottom-color: var(--mint); }
.clean-ui .asset-input { margin: 0; padding: 20px; border-radius: 8px; background: var(--surface); border-color: var(--border); }
.clean-ui .input-meta { font-size: 0.8125rem; }
.clean-ui .input-meta button { color: var(--muted); font-size: 0.75rem; font-weight: 400; }
.clean-ui .input-line { margin-top: 20px; }
.clean-ui .input-line input { font-size: 2rem; font-weight: 400; letter-spacing: -.5px; }
.clean-ui .input-line > span { font-size: 0.875rem; background: none; padding: 0; }
.clean-ui .conversion { margin: 18px 0 24px; font-size: 0.8125rem; }
.clean-ui .conversion strong { font-size: 0.875rem; font-weight: 500; }
.clean-ui .target-field { margin-bottom: 20px; }
.clean-ui .target-field label, .clean-ui .field-label, .clean-ui .modal-label { display: block; font-size: 0.8125rem; margin-bottom: 8px; color: var(--muted); }
.clean-ui .target-field input, .clean-ui .target-field select, .clean-ui .bet-password,
.clean-ui .drawer-form input, .clean-ui .drawer-form select, .clean-ui .auth-modal input, .clean-ui .auth-modal textarea {
  min-height: 46px; padding: 12px; border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); background: var(--surface); font-size: 0.875rem; line-height: 1.5;
}
.clean-ui input::placeholder, .clean-ui textarea::placeholder { color: var(--muted-2); opacity: 1; }
.clean-ui .execute { display: flex; justify-content: center; min-height: 46px; border: 1px solid var(--mint); border-radius: 6px; color: #13251c; background: var(--mint); font-size: 0.875rem; font-weight: 600; box-shadow: none; }
.clean-ui .execute > b { display: none; }
.clean-ui .execute:hover:not(:disabled), .clean-ui .portfolio-primary:hover { background: var(--mint-strong); transform: none; }
.clean-ui .action-note { margin-top: 14px; color: var(--muted); font-size: 0.75rem; line-height: 1.7; text-align: start; }
.clean-ui .unlock-summary { padding: 16px 0 0; margin-top: 20px; border: 0; border-top: 1px solid var(--border); background: none; border-radius: 0; }
.clean-ui .unlock-summary > div { padding: 0; border: 0; border-radius: 0; background: none; }
.clean-ui .unlock-summary small { font-size: 0.75rem; }
.clean-ui .unlock-summary b { font-size: 0.8125rem; font-weight: 500; }
.clean-ui .earn-context { padding-top: 13px; min-width: 0; }
.clean-ui .earn-context h2 { margin: 0 0 18px; font-size: 0.875rem; font-weight: 500; color: var(--muted); }
.clean-ui .rate-inline { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; font-size: 0.875rem; }
.clean-ui .rate-inline strong { font-size: 1.375rem; font-weight: 500; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.clean-ui .earn-context p { font-size: 0.75rem; color: var(--muted); line-height: 1.8; margin: 12px 0 24px; }
.clean-ui .context-details { border-top: 1px solid var(--border); font-size: 0.8125rem; }
.clean-ui .context-details summary { padding: 18px 0; cursor: pointer; color: var(--muted); }
.clean-ui .context-details[open] summary { color: var(--text); }
.clean-ui .detail-body { padding: 0 0 8px; }
.clean-ui .detail-body p { margin: 0 0 16px; }
.clean-ui .detail-body > span { font-size: 0.8125rem; }
.clean-ui .micro-chart { height: 90px; margin: 16px 0; color: var(--muted); font-size: 0.75rem; }
.clean-ui .prediction-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 64px; overflow: visible; }
.clean-ui .market-panel { min-height: 0; padding: 0; background: none; border-radius: 0; overflow: visible; }
.clean-ui .market-panel::after { display: none; }
.clean-ui .market-header { gap: 16px; }
.clean-ui .token-pair b { font-size: 0.875rem; font-weight: 500; }
.clean-ui .token-pair small { letter-spacing: 0; font-size: 0.6875rem; line-height: 1.6; }
.clean-ui .countdown small { font-size: 0.6875rem; }
.clean-ui .countdown b { font-size: 1.125rem; font-weight: 500; color: var(--text); }
.clean-ui .market-price { margin: 48px 0 36px; }
.clean-ui .market-price > small { font-size: 0.8125rem; }
.clean-ui .market-price strong { font-size: clamp(1.875rem, 3.4vw, 2.875rem); font-weight: 500; letter-spacing: -1.3px; }
.clean-ui .contract-terms { display: block; margin: 0; border-top: 1px solid var(--border); }
.clean-ui .contract-terms > div { padding: 20px 0; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: none; }
.clean-ui .contract-terms small, .clean-ui .contract-terms span { font-size: 0.75rem; }
.clean-ui .contract-terms b, .clean-ui .contract-terms > div:first-child b { color: var(--text); font-size: 1rem; font-weight: 500; }
.clean-ui .bet-panel { padding: 0; background: none; }
.clean-ui .bet-heading h2 { margin: 0 0 12px; font-size: 1.125rem; font-weight: 500; letter-spacing: 0; line-height: 1.5; }
.clean-ui .bet-heading p { font-size: 0.75rem; line-height: 1.8; }
.clean-ui .directions { margin: 24px 0; gap: 12px; }
.clean-ui .directions button { border-radius: 6px; min-height: 44px; background: none; }
.clean-ui .directions button b { font-size: 0.875rem; font-weight: 500; }
.clean-ui .directions .up.active { border-color: var(--mint); }
.clean-ui .directions .down.active { border-color: var(--danger); }
.clean-ui .bet-input { min-height: 64px; border-radius: 6px; background: var(--surface); padding: 12px 16px; }
.clean-ui .bet-input input { font-size: 1.625rem; font-weight: 400; }
.clean-ui .bet-input b { font-size: 0.8125rem; font-weight: 400; }
.clean-ui .bet-meta { margin: 12px 0 20px; flex-wrap: wrap; font-size: 0.75rem; }
.clean-ui .bet-meta b { font-weight: 500; }
.clean-ui .bet-password { margin-bottom: 20px; }
.clean-ui .prediction-ledger { margin-top: 48px; padding: 28px 0 0; }
.clean-ui .prediction-ledger-head { margin-bottom: 20px; }
.clean-ui .prediction-ledger-head h3 { font-size: 1rem; font-weight: 500; margin: 0; }
.clean-ui .prediction-ledger-head > small { display: block; font-size: 0.75rem; }
.clean-ui .prediction-items { display: block; }
.clean-ui .prediction-empty, .clean-ui .queue-empty { border: 0; border-radius: 0; padding: 32px 16px; font-size: 0.8125rem; line-height: 1.8; background: var(--surface); }
.clean-ui .prediction-item { padding: 18px 0; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: none; grid-template-columns: 76px minmax(0, 1fr) auto; }
.clean-ui .position-side { font-size: 0.75rem; font-weight: 500; border-radius: 4px; }
.clean-ui .position-main b, .clean-ui .position-result b { font-size: 0.8125rem; font-weight: 500; }
.clean-ui .position-main small, .clean-ui .position-result small, .clean-ui .position-result span { font-size: 0.6875rem; }
.clean-ui footer { width: min(960px, calc(100% - 64px)); padding: 20px 0; display: flex; font-size: 0.75rem; }
.clean-ui .connection-status { margin-bottom: 24px; padding: 12px 16px; border: 1px solid var(--border-strong); font-size: 0.8125rem; color: var(--warning); }
/* Existing account flows retain their IDs, with readable, restrained surfaces. */
.clean-ui .account-drawer, .clean-ui .auth-modal { background: var(--bg); box-shadow: none; }
.clean-ui .account-drawer { width: min(480px, 100%); padding: 28px; }
.clean-ui .account-drawer:not(.open) { display: none; }
.clean-ui .auth-modal { width: min(460px, calc(100% - 32px)); padding: 32px; border-radius: 10px; }
.clean-ui .drawer-backdrop, .clean-ui .modal-backdrop { backdrop-filter: none; background: #0009; }
.clean-ui .auth-modal h2, .clean-ui .drawer-head h2 { font-size: 1.5rem; font-weight: 500; letter-spacing: -.5px; }
.clean-ui .auth-modal > p, .clean-ui .drawer-view > p { font-size: 0.8125rem; }
.clean-ui .auth-modal small, .clean-ui .profile-line, .clean-ui .tier-note, .clean-ui .deposit-status { font-size: 0.75rem; }
.clean-ui .drawer-tabs, .clean-ui .auth-switch { border-radius: 6px; background: var(--surface); }
.clean-ui .drawer-tabs button, .clean-ui .auth-switch button, .clean-ui .outline-button, .clean-ui .code-row button, .clean-ui .network-box button { min-height: 42px; font-size: 0.8125rem; font-weight: 500; border-radius: 5px; }
.clean-ui .network-box, .clean-ui .profile-line, .clean-ui .deposit-item { border-radius: 6px; background: var(--surface); }
.clean-ui .network-box > span { font-size: 0.6875rem; letter-spacing: 0; }
.clean-ui .network-box strong { font-size: 0.8125rem; }
.clean-ui .security-list > div { font-size: 0.75rem; gap: 16px; }
.clean-ui .security-list b { font-weight: 500; }
.clean-ui .asset-badges span, .clean-ui .deposit-item small { font-size: 0.6875rem; }
.clean-ui .deposit-item b { font-size: 0.8125rem; }
.clean-ui .toast { font-size: 0.8125rem; font-weight: 500; border-radius: 6px; }
@media (max-width: 800px) {
  .clean-ui .header-inner { gap: 24px; padding: 0 24px; }
  .clean-ui .top-links { gap: 20px; }
  .clean-ui .header-actions { gap: 12px; }
  .clean-ui .earn-layout, .clean-ui .prediction-card { gap: 36px; }
  .clean-ui .earn-layout { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .clean-ui .app-container { width: calc(100% - 48px); padding-top: 36px; }
  .clean-ui .prediction-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .clean-ui .app-header { height: 112px; }
  .clean-ui .header-inner { flex-wrap: wrap; gap: 0; padding: 0 20px; align-content: start; }
  .clean-ui .brand { height: 62px; display: flex; align-items: center; }
  .clean-ui .brand-name { font-size: 1.25rem; }
  .clean-ui .header-actions { height: 62px; gap: 12px; }
  .clean-ui .wallet { padding: 0 10px; }
  .clean-ui .wallet > span:not(.wallet-avatar) { max-width: 116px; font-size: 0.75rem; }
  .clean-ui .language-control select { max-width: 68px; font-size: 0.6875rem; }
  .clean-ui .top-links { order: 3; width: 100%; height: 50px; gap: 28px; }
  .clean-ui .top-links a { font-size: 0.875rem; }
  .clean-ui .app-container { width: calc(100% - 40px); min-height: calc(100dvh - 180px); padding: 28px 0 40px; }
  .clean-ui .view-heading { margin-bottom: 28px; }
  .clean-ui .view-heading h1 { font-size: 1.4375rem; }
  .clean-ui .portfolio-summary { display: block; padding-bottom: 28px; }
  .clean-ui .portfolio-total strong { font-size: 2.5rem; }
  .clean-ui .portfolio-actions { margin-top: 24px; }
  .clean-ui .portfolio-actions button { flex: none; min-width: 88px; }
  .clean-ui .guest-hint { font-size: 0.75rem; }
  .clean-ui .asset-table tbody tr { height: 80px; }
  .clean-ui .asset-table th:first-child { width: 42%; }
  .clean-ui .asset-table th:last-child, .clean-ui .asset-table td:last-child { width: 50px; }
  .clean-ui .asset-table td:nth-child(2), .clean-ui .asset-table th:nth-child(2) { padding-inline-end: 10px; }
  .clean-ui .asset-table td { font-size: 0.875rem; }
  .clean-ui .asset-name { gap: 10px; font-size: 0.875rem; }
  .clean-ui .asset-name small { font-size: 0.6875rem; }
  .clean-ui .asset-icon { width: 30px; height: 30px; font-size: 0.6875rem; }
  .clean-ui .earn-layout, .clean-ui .prediction-card { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .clean-ui .earn-context { padding-top: 24px; border-top: 1px solid var(--border); }
  .clean-ui .tabs button { font-size: 0.8125rem; }
  .clean-ui .market-price { margin: 26px 0; }
  .clean-ui .market-price strong { font-size: 2.375rem; }
  .clean-ui .contract-terms { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
  .clean-ui .contract-terms > div { padding: 16px 0; }
  .clean-ui .contract-terms b, .clean-ui .contract-terms > div:first-child b { font-size: 0.875rem; }
  .clean-ui .prediction-ledger { margin-top: 0; padding-top: 24px; }
  .clean-ui .prediction-ledger-head { align-items: start; gap: 12px; }
  .clean-ui .prediction-ledger-head > small { font-size: 0.6875rem; }
  .clean-ui .prediction-item { grid-template-columns: 58px minmax(0, 1fr); gap: 12px; }
  .clean-ui .position-result { grid-column: 2; text-align: start; }
  .clean-ui .position-main small { white-space: normal; }
  .clean-ui footer { width: calc(100% - 40px); font-size: 0.6875rem; }
  .clean-ui .account-drawer { padding: 24px 20px; }
  .clean-ui .auth-modal { padding: 28px 20px; }
  .clean-ui .code-row { grid-template-columns: minmax(0, 1fr) auto; }
  .clean-ui .input-line input, .clean-ui .bet-input input { font-size: 1.75rem; }
}
@media (prefers-reduced-motion: reduce) { .clean-ui *, .clean-ui *::before, .clean-ui *::after { animation: none !important; transition: none !important; } }

/* Responsive contract: content decides its height; no viewport-wide overflow masking.
   280–600: phones / narrow split view; 601–900: foldables & tablets; >900: desktop. */
.clean-ui {
  --page-gutter: 32px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.clean-ui .app-header { height: auto; padding-top: var(--safe-top); }
.clean-ui .header-inner { min-height: 72px; height: auto; padding-left: max(var(--page-gutter), var(--safe-left)); padding-right: max(var(--page-gutter), var(--safe-right)); }
.clean-ui .app-container, .clean-ui footer {
  width: min(960px, calc(100% - max(var(--page-gutter), var(--safe-left)) - max(var(--page-gutter), var(--safe-right))));
  margin-left: auto; margin-right: auto;
}
.clean-ui .app-container { min-height: calc(100vh - 160px); min-height: calc(100dvh - 160px); }
.clean-ui footer { padding-bottom: max(24px, var(--safe-bottom)); gap: 16px; flex-wrap: wrap; }
.clean-ui .header-actions, .clean-ui .wallet, .clean-ui .language-control, .clean-ui .view-heading > *,
.clean-ui .asset-name > span, .clean-ui .input-meta > *, .clean-ui .conversion > *,
.clean-ui .market-header > *, .clean-ui .token-pair > div, .clean-ui .bet-meta > *,
.clean-ui .unlock-summary > div, .clean-ui .code-row > *, .clean-ui .profile-line > *,
.clean-ui .security-list > div > *, .clean-ui .position-result, .clean-ui .position-main,
.clean-ui .deposit-item > div { min-width: 0; }
.clean-ui button, .clean-ui summary, .clean-ui a, .clean-ui select { touch-action: manipulation; }
.clean-ui .wallet, .clean-ui .language-control, .clean-ui .language-control select,
.clean-ui .portfolio-actions button, .clean-ui .guest-hint button, .clean-ui .drawer-tabs button,
.clean-ui .auth-switch button, .clean-ui .code-row button, .clean-ui .outline-button,
.clean-ui .network-box button, .clean-ui #maxButton { min-height: 44px; height: auto; }
.clean-ui .wallet { flex: 0 1 auto; }
.clean-ui .wallet > span:not(.wallet-avatar) { white-space: nowrap; }
.clean-ui .wallet > b { flex: 0 0 auto; }
.clean-ui .top-links a { min-height: 48px; white-space: normal; overflow-wrap: anywhere; }
.clean-ui .tabs button, .clean-ui .directions button, .clean-ui .execute,
.clean-ui .drawer-tabs button, .clean-ui .auth-switch button, .clean-ui .outline-button {
  white-space: normal; overflow-wrap: anywhere; line-height: 1.5; padding-top: 10px; padding-bottom: 10px;
}
.clean-ui .view-heading { align-items: baseline; flex-wrap: wrap; }
.clean-ui .view-heading h1, .clean-ui .quiet-note, .clean-ui .action-note, .clean-ui .detail-body,
.clean-ui .earn-context p, .clean-ui .bet-heading p, .clean-ui .contract-terms,
.clean-ui .prediction-empty, .clean-ui .deposit-item, .clean-ui .profile-line,
.clean-ui .security-list, .clean-ui .toast { overflow-wrap: anywhere; }
.clean-ui .portfolio-total strong { max-width: 100%; line-height: 1.2; }
.clean-ui .portfolio-total strong.long-amount { font-size: clamp(1.5rem, 3.2vw, 2.5rem); letter-spacing: -.6px; }
.clean-ui .portfolio-actions { flex-wrap: wrap; }
.clean-ui .asset-table td { padding-top: 16px; padding-bottom: 16px; }
.clean-ui .asset-table a { min-width: 44px; min-height: 44px; overflow-wrap: anywhere; }
.clean-ui .input-meta { align-items: center; flex-wrap: wrap; gap: 4px 12px; }
.clean-ui .input-meta button { max-width: 100%; text-align: end; overflow-wrap: anywhere; }
.clean-ui .input-line > span, .clean-ui .bet-input > b { flex: 0 0 auto; }
.clean-ui .conversion { align-items: baseline; flex-wrap: wrap; }
.clean-ui .conversion strong { max-width: 100%; margin-inline-start: auto; overflow-wrap: anywhere; text-align: end; }
.clean-ui .unlock-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.clean-ui .unlock-summary b, .clean-ui .bet-meta b, .clean-ui .rate-inline strong { overflow-wrap: anywhere; }
.clean-ui .market-header { flex-wrap: wrap; }
.clean-ui .market-header .countdown { margin-inline-start: auto; }
.clean-ui .market-price strong { min-width: 0; }
.clean-ui #marketPrice { min-width: 0; overflow-wrap: anywhere; }
.clean-ui .bet-meta > span { max-width: 100%; }
.clean-ui .prediction-ledger-head { flex-wrap: wrap; align-items: baseline; }
.clean-ui .position-main small, .clean-ui .position-result small, .clean-ui .position-result span {
  white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere;
}
.clean-ui .prediction-item { grid-template-columns: 76px minmax(0, 1fr) minmax(0, .7fr); }
.clean-ui .guest-hint { flex-wrap: wrap; }
.clean-ui .guest-hint > span { flex: 1 1 180px; }
.clean-ui .guest-hint button { flex: 0 1 auto; text-align: start; }
/* Safe, scrollable dialogs: short landscape screens and software keyboard. */
.clean-ui.dialog-open { position: fixed; top: var(--dialog-scroll-top, 0); left: 0; right: 0; width: 100%; overflow: hidden; }
.clean-ui .modal-backdrop {
  top: var(--overlay-top, 0px); bottom: auto;
  height: 100vh; height: var(--overlay-height, 100dvh);
  overflow-y: auto; overscroll-behavior: contain;
  padding: max(16px, var(--safe-top)) max(16px, var(--safe-right)) max(16px, var(--safe-bottom)) max(16px, var(--safe-left));
}
.clean-ui .modal-backdrop.open { display: flex; }
.clean-ui .auth-modal, .clean-ui .modal-backdrop.open .auth-modal {
  position: relative; inset: auto; transform: none;
  width: min(460px, 100%); max-height: none; flex: 0 1 460px;
  margin: auto; overflow: visible; transition: opacity .15s ease;
}
.clean-ui .auth-modal h2 { padding-inline-end: 44px; line-height: 1.4; overflow-wrap: anywhere; }
.clean-ui .modal-close, .clean-ui .drawer-head > button { width: 44px; height: 44px; min-width: 44px; flex-shrink: 0; }
.clean-ui .auth-modal .modal-close { top: 16px; right: 16px; }
.clean-ui .account-drawer {
  top: var(--overlay-top, 0px);
  height: 100vh; height: var(--overlay-height, 100dvh);
  padding: max(24px, var(--safe-top)) max(24px, var(--safe-right)) max(24px, var(--safe-bottom)) max(24px, var(--safe-left));
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scroll-padding: 24px;
}
.clean-ui .drawer-head h2 { overflow-wrap: anywhere; }
.clean-ui .profile-line { align-items: baseline; flex-wrap: wrap; }
.clean-ui .profile-line b { white-space: normal; }
.clean-ui .drawer-tabs, .clean-ui .auth-switch { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.clean-ui .auth-switch.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.clean-ui .code-row { grid-template-columns: minmax(0, 1fr) minmax(0, auto); }
.clean-ui .account-access-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.clean-ui .security-list > div { align-items: baseline; }
.clean-ui .security-list > div > span { flex: 1 1 38%; }
.clean-ui .security-list b { flex: 1 1 58%; max-width: 62%; text-align: end; }
.clean-ui .deposit-item { align-items: baseline; flex-wrap: wrap; }
.clean-ui .network-box strong { direction: ltr; text-align: start; }
.clean-ui input, .clean-ui textarea, .clean-ui select { max-width: 100%; min-width: 0; scroll-margin-block: 24px; }
.clean-ui .toast { right: max(16px, var(--safe-right)); bottom: max(16px, var(--safe-bottom)); }
.clean-ui .toast:not(.show) { visibility: hidden; transform: none; pointer-events: none; }
[dir="rtl"] .clean-ui .header-actions { margin-left: 0; margin-right: auto; }
[dir="rtl"] .clean-ui .auth-modal .modal-close { right: auto; left: 16px; }

@media (max-width: 900px) {
  .clean-ui { --page-gutter: 24px; }
  .clean-ui .header-inner {
    display: grid; grid-template-columns: minmax(72px, auto) minmax(0, 1fr);
    grid-template-areas: "brand actions" "navigation navigation"; gap: 0 16px;
  }
  .clean-ui .brand { grid-area: brand; height: auto; min-height: 64px; }
  .clean-ui .header-actions { grid-area: actions; height: auto; min-height: 64px; justify-self: end; max-width: 100%; gap: 12px; }
  .clean-ui .top-links { grid-area: navigation; width: 100%; height: auto; gap: 28px; min-width: 0; }
  .clean-ui .top-links a { padding: 12px 0; }
  .clean-ui .earn-layout { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px; }
  .clean-ui .app-container { min-height: calc(100vh - 180px); min-height: calc(100dvh - 180px); }
}
@media (max-width: 700px) {
  .clean-ui .earn-layout, .clean-ui .prediction-card { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .clean-ui .earn-context { border-top: 1px solid var(--border); padding-top: 24px; }
  .clean-ui .market-price { margin: 24px 0; }
  .clean-ui .contract-terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .clean-ui .prediction-ledger { margin-top: 0; }
  .clean-ui .prediction-item { grid-template-columns: 64px minmax(0, 1fr); }
  .clean-ui .position-result { grid-column: 2; text-align: start; }
}
@media (max-width: 600px) {
  .clean-ui { --page-gutter: 20px; }
  .clean-ui .app-header { position: static; }
  .clean-ui .header-inner { display: flex; flex-wrap: wrap; gap: 0 12px; }
  .clean-ui .header-actions { flex: 1 1 10rem; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
  .clean-ui .language-control { min-width: 0; flex: 0 1 4.75rem; }
  .clean-ui .language-control select { width: 4.75rem; max-width: 100%; }
  .clean-ui .wallet { padding-inline: 8px; gap: 4px; }
  .clean-ui .wallet > span:not(.wallet-avatar) { max-width: 112px; }
  .clean-ui .top-links { display: grid; flex: 0 0 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .clean-ui .top-links a { justify-content: center; text-align: center; }
  .clean-ui .app-container { padding-top: 28px; }
  .clean-ui .portfolio-total strong { font-size: clamp(1.75rem, 9vw, 2.5rem); }
  .clean-ui .portfolio-total strong.long-amount { font-size: clamp(1.375rem, 6vw, 1.875rem); }
  .clean-ui .portfolio-actions button { min-height: 44px; }
  /* A two-line asset row gives real balances space without ellipses or shrinking digits. */
  .clean-ui .asset-table, .clean-ui .asset-table tbody { display: block; }
  .clean-ui .asset-table thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .clean-ui .asset-table tbody { border-top: 1px solid var(--border); }
  .clean-ui .asset-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(44px, auto); gap: 6px 16px; height: auto; min-height: 104px; padding: 18px 0; align-items: center; }
  .clean-ui .asset-table tbody th:first-child { grid-column: 1; grid-row: 1; width: auto; }
  .clean-ui .asset-table tbody td:nth-child(2) { grid-column: 1; grid-row: 2; padding: 0; padding-inline-start: 40px; text-align: start; font-size: 0.9375rem; }
  .clean-ui .asset-table tbody td:last-child { grid-column: 2; grid-row: 1 / 3; width: auto; max-width: 90px; padding: 0; }
  .clean-ui .asset-table a { padding: 10px 0; }
  .clean-ui .asset-name { line-height: 1.5; }
  .clean-ui .asset-name small, .clean-ui .quiet-note, .clean-ui .action-note,
  .clean-ui .bet-heading p, .clean-ui .earn-context p, .clean-ui .bet-meta { font-size: 0.8125rem; }
  .clean-ui .auth-modal { padding: 24px 20px; }
  .clean-ui .auth-modal h2 { margin-top: 0; }
  .clean-ui .tabs button { padding: 12px 4px; }
  .clean-ui .unlock-summary { gap: 12px; }
  .clean-ui .code-row { grid-template-columns: minmax(0, 1fr); }
  .clean-ui .code-row button { width: 100%; }
  .clean-ui .target-field input, .clean-ui .target-field select, .clean-ui .bet-password,
  .clean-ui .drawer-form input, .clean-ui .drawer-form select, .clean-ui .auth-modal input,
  .clean-ui .auth-modal textarea, .clean-ui .language-control select { font-size: 1rem; }
}
@media (max-width: 359px) {
  .clean-ui { --page-gutter: 16px; }
  .clean-ui .brand-name { font-size: 1.125rem; }
  .clean-ui .header-inner { gap: 0 8px; }
  .clean-ui .header-actions { gap: 6px; }
  .clean-ui .wallet > span:not(.wallet-avatar) { max-width: 90px; }
  .clean-ui .asset-input { padding: 16px; }
  .clean-ui .contract-terms, .clean-ui .unlock-summary, .clean-ui .account-access-actions { grid-template-columns: minmax(0, 1fr); }
  .clean-ui .contract-terms { gap: 0; }
  .clean-ui .security-list > div { display: block; }
  .clean-ui .security-list b { display: block; max-width: 100%; text-align: start; margin-top: 6px; }
}
/* On short/landscape screens the header must not consume the usable form area. */
@media (max-height: 500px) {
  .clean-ui .app-header { position: static; }
  .clean-ui .app-container { padding-top: 24px; }
  .clean-ui .view-heading { margin-bottom: 24px; }
}