/* ────────────────────────────────────────────────────────────────── * Kalshi mobile trading shell — phone-first, thumb-friendly. * Reuses the same color tokens as the desktop app so brand consistency * carries over, but the layout, touch targets, and motion are * purpose-built for /m, NOT a media-query retrofit of /index. * ────────────────────────────────────────────────────────────────── */ :root { --bg: #0a0e17; --sf: #111827; --sf2: #1a2332; --bd: #1f2937; --tx: #e5e7eb; --mt: #9ca3af; --ac: #3b82f6; --gn: #10b981; --rd: #ef4444; --yl: #f59e0b; --or: #f97316; /* Theme-aware alpha tokens (hairline dividers / soft pill fills) so the light theme doesn't render white-on-white. */ --hairline: rgba(255, 255, 255, 0.08); --soft-fill: rgba(255, 255, 255, 0.08); /* iOS safe-area insets — viewport-fit=cover paints under the home indicator and notch, so we have to add them back as padding on fixed elements. The fallbacks (0) make this work in browsers that don't support env(). */ --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); /* Chrome on iOS can report a zero top inset even when the browser/status chrome makes edge controls awkward to hit. Keep a small minimum buffer. */ --safe-top-hit: max(var(--safe-top), 12px); /* Heights of fixed chrome so #app's main scroll area can leave room for them. Bottom nav target hits 56px button + safe-area padding. */ --header-h: 42px; --nav-h: 62px; --m-slider-box-w: 36px; --m-slider-box-h: 34px; } /* Light theme — same palette as the desktop app's :root.light so brand consistency carries across /m and /. Toggled from Account → Appearance (kalshi_mobile_theme); the class lands on pre-paint via the inline head script in mobile.html. */ :root.light { --bg: #ffffff; --sf: #f8fafc; --sf2: #eef2f7; --bd: #e2e8f0; --tx: #1e293b; --mt: #64748b; --ac: #2563eb; --gn: #059669; --rd: #dc2626; --yl: #d97706; --or: #ea580c; --hairline: rgba(15, 23, 42, 0.12); --soft-fill: rgba(15, 23, 42, 0.06); } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; overflow: hidden; background: var(--bg); color: var(--tx); font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; font-size: 15px; /* Stop iOS from auto-zooming inputs with font-size <16px when focused. We size each input to >=16px individually instead. */ -webkit-text-size-adjust: 100%; /* Disable rubber-band overscroll so the order sheet feels native. */ overscroll-behavior: none; /* Tap highlight on Android shows a flashy color square; we replace it with our own :active states. */ -webkit-tap-highlight-color: transparent; touch-action: manipulation; } a { color: var(--ac); text-decoration: none; } button { font-family: inherit; cursor: pointer; /* Prevent iOS from highlighting buttons grey on tap. */ -webkit-tap-highlight-color: transparent; } input, textarea { font-family: inherit; font-size: 16px; /* keep iOS from zooming on focus */ color: var(--tx); } .hidden { display: none !important; } .muted { color: var(--mt); font-size: 13px; line-height: 1.45; } .muted-link { color: var(--mt); font-size: 12px; } .danger-link { color: var(--rd); font-weight: 600; } /* ── LOGIN / OVERLAY ─────────────────────────────────────────────── */ html.has-session #loginScreen{display:none!important} .screen-overlay { position: fixed; inset: 0; background: #07090e; display: flex; align-items: stretch; justify-content: flex-start; padding: 48px 24px 32px; padding-top: calc(48px + var(--safe-top)); padding-bottom: calc(32px + var(--safe-bottom)); z-index: 999; overflow-y: auto; } html.light .screen-overlay { background: #f7f8fa; } .login-card { position: relative; z-index: 1; background: transparent; border: 0; border-radius: 0; padding: 0; width: 100%; max-width: 400px; margin: auto 0; text-align: left; display: flex; flex-direction: column; gap: 14px; box-shadow: none; } .login-mark { display: flex; justify-content: flex-start; } .login-mark img { width: 44px; height: 44px; display: block; } .login-logo { font-size: 28px; font-weight: 560; letter-spacing: -0.04em; padding-bottom: 16px; border-bottom: 1px solid rgba(230, 237, 243, .12); width: max-content; } .login-logo span { color: #4f8cff; } .login-card .m-input, .login-card .m-btn { border-radius: 2px; } .login-card .m-btn { background: #2E5CFF; } .login-tag { color: #8b95a5; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; margin: 8px 0 4px; } .login-emoji { font-size: 28px; } .login-err { background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.4); color: #fca5a5; border-radius: 10px; padding: 9px 12px; font-size: 13px; display: none; } .login-err.show { display: block; } .login-toggle { font-size: 13px; color: var(--mt); margin-top: 4px; } .login-toggle a { color: var(--ac); font-weight: 600; margin-left: 4px; } .login-foot { margin-top: 12px; font-size: 12px; } /* ── INPUTS / BUTTONS ────────────────────────────────────────────── */ .m-input { width: 100%; padding: 13px 14px; background: var(--bg); border: 1px solid var(--bd); border-radius: 10px; color: var(--tx); font-size: 16px; outline: none; transition: border-color 0.12s ease; } .m-input:focus { border-color: var(--ac); } .m-textarea { min-height: 110px; resize: vertical; font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 12px; line-height: 1.45; } .m-input-small { padding: 9px 12px; max-width: 110px; font-size: 16px; } .m-btn { width: 100%; padding: 13px 16px; border: 1px solid transparent; border-radius: 12px; font-size: 16px; font-weight: 700; background: var(--ac); color: #fff; transition: transform 0.08s ease, filter 0.12s ease, opacity 0.12s ease; display: inline-flex; align-items: center; justify-content: center; gap: 6px; -webkit-user-select: none; user-select: none; } .m-btn:active { transform: scale(0.98); filter: brightness(1.05); } .m-btn:disabled { opacity: 0.5; cursor: wait; } .m-btn-primary { background: var(--ac); } .m-btn-buy { background: var(--gn); } .m-btn-sell { background: var(--rd); } .m-btn-ghost { background: transparent; border-color: var(--bd); color: var(--tx); } .m-btn-big { padding: 12px 16px; font-size: 16px; } /* ── APP SHELL ───────────────────────────────────────────────────── */ #app { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--bg); } /* ── HEADER ──────────────────────────────────────────────────────── */ .m-header { flex: 0 0 auto; background: var(--sf); border-bottom: 1px solid var(--bd); padding-top: var(--safe-top-hit); display: flex; align-items: center; gap: 12px; padding-left: 14px; padding-right: 14px; height: calc(var(--header-h) + var(--safe-top-hit)); } .m-header-cash, .m-header-port { display: flex; flex-direction: column; line-height: 1.05; /* Tappable: toggles balance privacy (see setBalancesHidden). */ cursor: pointer; -webkit-user-select: none; user-select: none; } .m-header-cash { color: var(--tx); } .m-header-port { color: var(--gn); margin-left: auto; text-align: right; } .m-header-cash > span:first-child, .m-header-port > span:first-child { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.3px; } .m-header-cash-lbl, .m-header-port-lbl { font-size: 8px; color: var(--mt); font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; } .m-header-port-lbl { color: var(--gn); opacity: 0.75; } .m-header-ws { padding-left: 4px; } .ws-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--rd); box-shadow: 0 0 6px rgba(239, 68, 68, 0.35); } .ws-dot-on { background: var(--gn); box-shadow: 0 0 6px rgba(16, 185, 129, 0.4); } .ws-dot-off { background: var(--rd); } /* ── TABS ────────────────────────────────────────────────────────── */ .tab { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } .tab-on { display: flex; } .tab.hidden { display: none; } /* The Account tab stacks static content directly (no inner .m-list-body), so IT is the scroll container — without this, anything taller than the viewport was simply clipped. */ #tabAccount { overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: calc(var(--nav-h) + var(--safe-bottom) + 16px); } /* ── SEARCH BAR ──────────────────────────────────────────────────── */ .m-home-hero { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 12px; background: linear-gradient(135deg, rgba(59, 130, 246, 0.18), rgba(16, 185, 129, 0.1)); border-bottom: 1px solid var(--bd); } .m-home-kicker { display: none; color: var(--ac); font-size: 10px; font-weight: 900; letter-spacing: 0.7px; text-transform: uppercase; } .m-home-title { color: var(--tx); font-size: 16px; font-weight: 900; letter-spacing: -0.4px; line-height: 1.1; } .m-home-sub { color: var(--mt); font-size: 11px; margin-top: 1px; } .m-home-refresh { flex: 0 0 auto; width: 32px; height: 32px; border: 1px solid rgba(59, 130, 246, 0.45); border-radius: 10px; background: rgba(59, 130, 246, 0.12); color: var(--tx); font-size: 16px; font-weight: 900; } .m-home-refresh:active { background: rgba(59, 130, 246, 0.24); } .m-search-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--bg); border-bottom: 1px solid var(--bd); } .m-search-wrap { position: relative; flex: 1 1 auto; min-width: 0; } /* Custom home volume floor (persisted). 16px font so iOS doesn't zoom. */ .m-minvol { flex: 0 0 auto; display: flex; align-items: center; gap: 5px; border: 1px solid var(--bd); border-radius: 8px; background: var(--sf); padding: 0 8px; height: 36px; } .m-minvol span { font-size: 9px; font-weight: 800; color: var(--mt); letter-spacing: 0.4px; white-space: nowrap; } .m-minvol input { width: 56px; background: transparent; border: none; outline: none; color: var(--tx); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; -moz-appearance: textfield; } /* 16px WHILE EDITING so iOS doesn't auto-zoom the page on focus; the resting size stays small so 5-digit floors never clip. */ .m-minvol input:focus { font-size: 16px; } .m-minvol input::-webkit-outer-spin-button, .m-minvol input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .m-search-input { width: 100%; padding: 8px 34px 8px 12px; background: var(--sf); border: 1px solid var(--bd); border-radius: 10px; color: var(--tx); font-size: 16px; outline: none; } .m-search-input:focus { border-color: var(--ac); } .m-search-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: var(--bd); border: none; width: 26px; height: 26px; border-radius: 50%; color: var(--tx); font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center; } /* ── LEAGUE CHIPS ────────────────────────────────────────────────── */ .m-chip-row { flex: 0 0 auto; display: flex; gap: 5px; overflow-x: auto; padding: 5px 10px; border-bottom: 1px solid var(--bd); background: var(--bg); scrollbar-width: none; } .m-chip-row::-webkit-scrollbar { display: none; } .m-chip { flex: 0 0 auto; padding: 4px 10px; font-size: 11px; font-weight: 700; border: 1px solid var(--bd); background: var(--sf); color: var(--mt); border-radius: 999px; white-space: nowrap; } .m-chip.on { background: rgba(59, 130, 246, 0.18); border-color: var(--ac); color: var(--tx); } /* ── LIST BODIES ─────────────────────────────────────────────────── */ .m-list-body { flex: 1 1 auto; min-height: 0; /* flex kids default to min-height:auto, which blocks scroll */ overflow-y: auto; -webkit-overflow-scrolling: touch; padding-top: 6px; padding-bottom: calc(var(--nav-h) + var(--safe-bottom) + 16px); } .m-empty { padding: 40px 20px; text-align: center; color: var(--mt); font-size: 14px; } /* ── MARKET CARD (live-events list) ──────────────────────────────── */ .m-card { width: calc(100% - 20px); display: flex; flex-direction: column; gap: 2px; margin: 0 10px 6px; padding: 8px 11px; border: 1px solid var(--bd); border-radius: 10px; background: var(--sf); color: var(--tx); text-align: left; appearance: none; -webkit-appearance: none; transition: background 0.12s ease; } .m-card:active { background: var(--sf2); } .m-card-head { display: flex; align-items: center; gap: 8px; } .m-card-league { font-size: 10px; font-weight: 800; color: var(--ac); text-transform: uppercase; letter-spacing: 0.5px; } .m-card-live { font-size: 9px; font-weight: 800; background: rgba(239, 68, 68, 0.18); color: var(--rd); padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.4px; display: inline-flex; align-items: center; gap: 3px; } .m-card-more { font-size: 9px; font-weight: 800; background: rgba(59, 130, 246, 0.16); color: var(--ac); padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.4px; } .m-card-live::before { content: ''; width: 5px; height: 5px; background: var(--rd); border-radius: 50%; animation: livePulse 1.4s ease-in-out infinite; } @keyframes livePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } .m-card-time { color: var(--mt); font-size: 11px; margin-left: auto; white-space: nowrap; } .m-card-title { font-size: 14px; font-weight: 800; color: var(--tx); line-height: 1.25; } .m-card-vol { font-variant-numeric: tabular-nums; font-weight: 700; } /* ── MARKET DETAIL OVERLAY ───────────────────────────────────────── */ .m-detail { position: fixed; inset: 0; background: var(--bg); z-index: 90; display: flex; flex-direction: column; /* Slide up from bottom; matches iOS push-modal feel. */ animation: detailSlide 0.22s cubic-bezier(0.16, 1, 0.3, 1); } .m-detail.hidden { display: none; } @keyframes detailSlide { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .m-detail-head { flex: 0 0 auto; padding-top: var(--safe-top-hit); display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; background: var(--sf); border-bottom: 1px solid var(--bd); height: calc(var(--header-h) + var(--safe-top-hit)); } .m-detail-title { min-width: 0; padding: 0 6px; } .m-detail-title-main { font-size: 14px; font-weight: 700; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; } .m-detail-title-sub { font-size: 11px; color: var(--mt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; } .m-icon-btn { width: 44px; height: 44px; border: none; background: transparent; color: var(--tx); font-size: 26px; line-height: 1; display: flex; align-items: center; justify-content: center; } .m-icon-btn:active { background: var(--sf2); } .m-game-actions { flex: 0 0 auto; padding: 6px 10px; background: var(--bg); border-bottom: 1px solid var(--bd); } .m-game-tool-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .m-game-tool { min-height: 30px; border: 1px solid var(--bd); border-radius: 11px; background: var(--sf); color: var(--tx); font-size: 12px; font-weight: 900; } .m-game-tool.on { border-color: var(--ac); background: rgba(59, 130, 246, 0.18); } .m-game-tool span { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; margin-left: 4px; padding: 1px 6px; border-radius: 999px; background: var(--soft-fill); color: var(--mt); } .m-game-panel { margin-top: 8px; border: 1px solid var(--bd); border-radius: 12px; /* This panel sits ABOVE the scrollable outcomes list, so with 50+ positions or open orders it would grow past the viewport and get clipped with no way to reach the bottom rows. Bound its height and give it its own scroll. */ max-height: 60vh; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: var(--sf); } .m-game-panel-head { padding: 10px 12px; border-bottom: 1px solid var(--bd); display: flex; justify-content: space-between; gap: 10px; align-items: center; } .m-game-panel-title { font-size: 13px; font-weight: 900; color: var(--tx); } .m-game-panel-sub { font-size: 11px; color: var(--mt); margin-top: 2px; } .m-game-pos-row, .m-scen-row { padding: 10px 12px; border-bottom: 1px solid rgba(31, 41, 55, 0.85); } .m-game-pos-row:last-child, .m-scen-row:last-child { border-bottom: none; } .m-scen-row { display: flex; justify-content: space-between; gap: 10px; align-items: center; } .m-game-pos-tappable { cursor: pointer; -webkit-tap-highlight-color: var(--soft-fill); } .m-game-pos-tappable:active { background: var(--sf2, rgba(255, 255, 255, 0.03)); } .m-game-pos-nm { color: var(--tx); font-size: 13px; font-weight: 700; line-height: 1.3; min-width: 0; overflow-wrap: anywhere; } .m-game-pos-det { margin-top: 3px; color: var(--mt); font-size: 11px; font-weight: 500; line-height: 1.3; } .m-game-pos-yes { color: var(--gn); font-weight: 700; } .m-game-pos-no { color: var(--rd); font-weight: 700; } .m-game-pos-mt { color: var(--mt); } .m-game-pos-odds { color: var(--mt); font-weight: 400; } .m-game-pos-det .m-game-pos-yes, .m-game-pos-det .m-game-pos-no, .m-game-pos-det .m-game-pos-mt { font-weight: 600; } /* Blue over/under + signed-line token (desktop .line-token parity). */ .m-line-token { color: var(--ac); font-weight: 800; } /* Market-type section header inside the positions list (desktop .pos-section). */ .m-pos-section { padding: 9px 12px 3px; font-size: 10px; color: var(--mt); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; border-bottom: 1px solid var(--hairline); } /* Line / Size toggle in a positions header (desktop .pos-sort). */ .m-pos-sort { display: flex; gap: 4px; flex: 0 0 auto; } .m-pos-sort button { border: 1px solid var(--bd); background: transparent; color: var(--mt); border-radius: 999px; padding: 3px 10px; font-size: 11px; font-weight: 700; cursor: pointer; } .m-pos-sort button.on { background: rgba(59, 130, 246, 0.18); border-color: var(--ac); color: var(--tx); } /* Toolbar holding the Line/Size toggle above the portfolio positions list. Sticks to the top of the scroll area so the toggle stays reachable, and never shrinks so it can't distort the flex-column scroll height. */ .m-pf-toolbar { flex: 0 0 auto; position: sticky; top: 0; z-index: 2; display: flex; justify-content: flex-end; padding: 2px 0 6px; background: var(--bg); } .m-scen-section { padding: 8px 12px 4px; background: var(--bg); border-bottom: 1px solid var(--bd); color: var(--mt); font-size: 10px; font-weight: 900; letter-spacing: 0.5px; text-transform: uppercase; } .m-scen-row { font-size: 12px; color: var(--tx); } .m-scen-pnl { font-variant-numeric: tabular-nums; font-weight: 900; white-space: nowrap; } .m-scen-pnl.pos { color: var(--gn); } .m-scen-pnl.neg { color: var(--rd); } .m-market-tabs-row { flex: 0 0 auto; display: flex; align-items: center; background: var(--bg); border-bottom: 1px solid var(--bd); padding-right: 8px; } .m-market-tabs { flex: 1 1 auto; min-width: 0; display: flex; gap: 5px; overflow-x: auto; padding: 6px 10px; background: transparent; scrollbar-width: none; } /* Discrete event-page volume floor at the chips row's right edge. */ .m-minvol-sm { height: 26px; padding: 0 6px; gap: 4px; } .m-minvol-sm input { width: 46px; } .m-market-tabs::-webkit-scrollbar { display: none; } .m-market-tab { flex: 0 0 auto; border: 1px solid var(--bd); background: var(--sf); color: var(--mt); border-radius: 999px; padding: 5px 10px; font-size: 11px; font-weight: 800; white-space: nowrap; } .m-market-tab.on { border-color: var(--ac); background: rgba(59, 130, 246, 0.18); color: var(--tx); } .m-market-tab span { color: var(--mt); margin-left: 3px; } .m-mkt-outcomes { padding-bottom: 24px; } /* Outcome row — the core trading affordance. Big YES / NO buttons, nice big tap targets, last price front and center. */ .m-out { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--bd); } .m-out-name { font-size: 14px; font-weight: 700; color: var(--tx); line-height: 1.3; min-width: 0; } .m-out-meta { font-size: 11px; color: var(--mt); margin-top: 2px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .m-out-mid { font-size: 16px; font-weight: 800; color: var(--tx); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; text-align: center; min-width: 50px; } .m-out-buttons { display: flex; gap: 6px; } .m-out-btn { min-width: 56px; padding: 7px 10px; border: 1px solid var(--bd); border-radius: 10px; font-size: 14px; font-weight: 700; background: transparent; display: flex; flex-direction: column; align-items: center; gap: 0; line-height: 1.1; transition: transform 0.08s ease, background 0.12s ease; } .m-out-btn:active { transform: scale(0.96); } .m-out-btn .m-out-btn-side { font-size: 11px; font-weight: 600; opacity: 0.7; } .m-out-btn .m-out-btn-px { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; } .m-out-btn.yes { border-color: rgba(16, 185, 129, 0.4); color: var(--gn); background: rgba(16, 185, 129, 0.06); } .m-out-btn.yes:active { background: rgba(16, 185, 129, 0.18); } .m-out-btn.no { border-color: rgba(239, 68, 68, 0.4); color: var(--rd); background: rgba(239, 68, 68, 0.06); } .m-out-btn.no:active { background: rgba(239, 68, 68, 0.18); } .m-out-btn:disabled { opacity: 0.45; background: transparent; color: var(--mt); border-color: var(--bd); } /* Position pill on outcome row when the user already has shares. */ .m-out-pos { font-size: 10px; font-weight: 700; color: var(--ac); background: rgba(59, 130, 246, 0.15); border: 1px solid rgba(59, 130, 246, 0.35); border-radius: 4px; padding: 1px 6px; margin-left: 6px; text-transform: uppercase; letter-spacing: 0.3px; display: inline-block; } .m-out-pos.no { color: var(--rd); background: rgba(239, 68, 68, 0.15); border-color: rgba(239, 68, 68, 0.35); } .m-out-open { border: 1px solid rgba(245, 158, 11, 0.45); background: rgba(245, 158, 11, 0.12); color: var(--yl); border-radius: 999px; padding: 2px 8px; font-size: 10px; font-weight: 800; white-space: nowrap; } .m-out-open:active { background: rgba(245, 158, 11, 0.22); } .m-slider-card { padding: 12px 14px; border-bottom: 1px solid var(--bd); background: var(--bg); } .m-slider-top { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: start; } .m-slider-title { color: var(--tx); font-size: 15px; font-weight: 800; line-height: 1.25; } .m-slider-row { display: grid; grid-template-columns: 34px 1fr 34px; gap: 6px; align-items: center; margin-top: 10px; } .m-slider-arrow { height: var(--m-slider-box-h); border: 1px solid var(--bd); border-radius: 10px; background: var(--sf); color: var(--tx); font-size: 22px; font-weight: 800; touch-action: manipulation; } .m-slider-arrow:active { background: var(--sf2); } .m-slider-track { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; touch-action: pan-x; overscroll-behavior-x: contain; scrollbar-width: none; padding: 4px 0; } .m-slider-track::-webkit-scrollbar { display: none; } .m-slider-val { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-width: var(--m-slider-box-w); height: var(--m-slider-box-h); border: 1px solid var(--bd); border-radius: 10px; background: var(--sf); color: var(--mt); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; touch-action: pan-x; user-select: none; -webkit-user-select: none; } .m-slider-val.boundary { margin-left: 10px; } .m-slider-val.boundary::before { content: ''; position: absolute; left: -8px; top: 8px; bottom: 8px; width: 1px; background: var(--mt); opacity: 0.5; } .m-slider-val.on { border-color: var(--ac); background: rgba(59, 130, 246, 0.18); color: var(--tx); } /* Side-aware position ring on a slider line chip: green for a held Yes, red for a held No. No ring when the user has no live position there. */ .m-slider-val.has-pos-yes { box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.55) inset; } .m-slider-val.has-pos-no { box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.55) inset; } .m-slider-dot { position: absolute; right: 5px; top: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--yl); } .m-slider-buttons { justify-content: flex-end; margin-top: 10px; } /* Outcome row sub-section header (e.g. "Spread", "Total"). */ .m-out-section { background: var(--sf); color: var(--mt); font-size: 10px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; padding: 8px 14px; border-top: 1px solid var(--bd); border-bottom: 1px solid var(--bd); } /* ── COLLAPSIBLE SECTIONS (All page: More Markets / Player Props) ──── */ .m-collapse-sec { border-top: 1px solid var(--bd); } .m-collapse-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 14px; background: var(--sf); border: none; border-bottom: 1px solid var(--bd); color: var(--tx); text-align: left; cursor: pointer; } .m-collapse-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; } .m-collapse-count { font-size: 10px; font-weight: 800; color: var(--mt); background: var(--bg); border: 1px solid var(--bd); border-radius: 999px; padding: 1px 7px; } .m-collapse-vol { font-size: 10px; font-weight: 600; color: var(--mt); text-transform: none; } .m-collapse-caret { font-size: 10px; color: var(--mt); flex: 0 0 auto; } .m-collapse-body { display: block; } /* ── ORDER SHEET (bottom modal) ──────────────────────────────────── */ .m-sheet { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-end; justify-content: center; } .m-sheet.hidden { display: none; } .m-sheet-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); animation: fadeIn 0.18s ease-out; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .m-sheet-panel { position: relative; width: 100%; max-width: 520px; background: var(--sf); border-top-left-radius: 18px; border-top-right-radius: 18px; border-top: 1px solid var(--bd); border-left: 1px solid var(--bd); border-right: 1px solid var(--bd); padding: 8px 16px calc(20px + var(--safe-bottom)); margin-top: var(--safe-top-hit); max-height: calc(100vh - var(--safe-top-hit) - 8px); max-height: calc(100dvh - var(--safe-top-hit) - 8px); overflow-y: auto; animation: sheetSlide 0.22s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.5); } @keyframes sheetSlide { from { transform: translateY(100%); } to { transform: translateY(0); } } .m-sheet-grab { width: 38px; height: 4px; background: var(--bd); border-radius: 2px; margin: 0 auto 6px; } .m-sheet-head { position: sticky; top: 0; z-index: 2; display: flex; gap: 8px; align-items: flex-start; padding: 2px 0 5px; background: var(--sf); } .m-sheet-head > div { flex: 1; min-width: 0; } .m-sheet-title { font-size: 15px; font-weight: 800; color: var(--tx); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Long titles step DOWN instead of losing the category to the ellipsis. */ .m-sheet-title-sm { font-size: 13px; } .m-sheet-title-xs { font-size: 11.5px; } /* Fee toggle + position chip row directly under the title. */ .m-sheet-subrow { display: flex; align-items: center; gap: 8px; margin-top: 3px; } /* Market volume beside the sheet title. */ .m-sheet-vol { font-size: 10px; font-weight: 700; color: var(--mt); font-variant-numeric: tabular-nums; white-space: nowrap; } /* Desktop positionBadgeHtml parity: ✅ 1.7k Yes @ 34.0¢ (green) / ❌ No (red). */ .m-sheet-pos { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .m-sheet-pos.yes { color: var(--gn); } .m-sheet-pos.no { color: var(--rd); } .m-sheet-sub { font-size: 12px; color: var(--mt); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Side toggle: two huge buttons, very obvious which side you're on. */ .m-side-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 6px; } .m-side-btn { border: 2px solid var(--bd); background: transparent; border-radius: 10px; padding: 7px 8px; display: flex; flex-direction: row; align-items: baseline; justify-content: center; gap: 8px; font-weight: 800; transition: transform 0.08s ease, background 0.12s ease, border-color 0.12s ease; } .m-side-btn:active { transform: scale(0.97); } .m-side-btn .m-side-lbl { font-size: 12px; letter-spacing: 1px; } .m-side-btn .m-side-px { font-size: 15px; font-variant-numeric: tabular-nums; } .m-side-btn.yes { color: var(--gn); } .m-side-btn.yes.on { background: rgba(16, 185, 129, 0.18); border-color: var(--gn); box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.25) inset; } .m-side-btn.no { color: var(--rd); } .m-side-btn.no.on { background: rgba(239, 68, 68, 0.18); border-color: var(--rd); box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.25) inset; } .m-os-book { background: var(--bg); border: 1px solid var(--bd); border-radius: 10px; overflow: hidden; margin-bottom: 8px; } .m-os-book-head, .m-os-book-row { display: grid; grid-template-columns: 44px 42px minmax(52px, auto) 1fr 46px; gap: 6px; align-items: center; padding: 4px 10px; font-size: 12px; font-variant-numeric: tabular-nums; } .m-os-book-head { background: var(--sf2); color: var(--mt); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; } .m-os-book-row { position: relative; width: 100%; border: none; border-top: 1px solid rgba(31, 41, 55, 0.75); background: transparent; color: var(--tx); font-family: inherit; text-align: left; } .m-os-book-row:active { background: var(--sf2); } /* Fee-inclusive American odds per level (desktop Odds column parity). */ .m-os-book-row .odds, .m-os-book-head .odds { font-size: 10px; color: var(--mt); font-variant-numeric: tabular-nums; white-space: nowrap; } /* "You are here" — the row matching the ticket price (see rowHtml). */ .m-os-book-row.cur { background: rgba(59, 130, 246, 0.16); box-shadow: inset 3px 0 0 var(--ac); } /* Scrollable book halves: ~5 rows visible, deeper levels reachable by scrolling. Asks are column-reverse with a single inner wrapper (Kalshi desktop trick) so scrollTop 0 == at-the-spread and the half opens bottom-anchored with the best ask against the divider. */ .m-os-book-asks, .m-os-book-bids { max-height: 81px; /* ~3 compact rows — keeps Place Order above the fold */ overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-width: thin; } .m-os-book-asks { display: flex; flex-direction: column-reverse; } /* Color follows the economic nature of each level, not ask/bid position: YES-bid liquidity is green, NO-bid liquidity is red. Both are normally visible at once and the halves swap when the book is flipped. */ .m-os-book-row.ob-yes { color: var(--gn); } .m-os-book-row.ob-no { color: var(--rd); } .m-os-book-row.mine-row { background: rgba(234, 179, 8, 0.09); box-shadow: inset 3px 0 0 var(--yl); } .m-os-book-row.mine-row:active { background: rgba(234, 179, 8, 0.14); } .m-os-book-row .px { font-size: 15px; font-weight: 900; } .m-os-book-row .qty, .m-os-book-row .depth, .m-os-book-row .mine { color: var(--tx); } /* Align row values with their (left-aligned) column headers: Qty + Mine left so they sit under their labels, Depth right-aligned at the edge. */ .m-os-book-head .qty, .m-os-book-row .qty, .m-os-book-head .mine, .m-os-book-row .mine { text-align: left; } .m-os-book-head .depth, .m-os-book-row .depth { text-align: right; } .m-os-book-row .mine { color: var(--yl); font-size: 10px; font-weight: 800; } .m-mine-badge { display: inline-flex; align-items: center; gap: 4px; max-width: 120px; padding: 2px 5px; border: 1px solid rgba(234, 179, 8, 0.55); border-radius: 999px; background: var(--bg); color: var(--yl); line-height: 1.15; white-space: normal; } /* One-tap cancel ✕ on the mine pill. Padded + negative-margined so the touch target is ~26px while the glyph stays compact. */ .m-mine-x { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; padding: 6px 7px; margin: -6px -7px -6px -2px; color: var(--rd); font-size: 15px; font-weight: 800; line-height: 1; touch-action: manipulation; } .m-mine-x:active { opacity: 0.6; } .m-os-book-mid { padding: 7px 10px; border-top: 1px solid var(--bd); background: var(--sf); color: var(--mt); text-align: center; font-size: 11px; font-weight: 700; } .m-os-book-empty { color: var(--mt); padding: 12px; text-align: center; font-size: 12px; } /* Resting orders on this market: slim collapsible (collapsed by default so Place Order stays above the fold); expanded rows are the shared desktop- style .m-ord-item rows the game Orders panel uses. */ .m-os-orders { background: var(--bg); border: 1px solid var(--bd); border-radius: 10px; padding: 0 8px; margin-bottom: 8px; } .m-os-orders-head { width: 100%; display: flex; align-items: center; justify-content: space-between; background: transparent; border: none; color: var(--yl); font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.45px; padding: 7px 2px; } .m-os-orders-caret { color: var(--mt); font-size: 9px; } /* Sheet rows: tighter than the game panel's, and the expiry clock + cancel x must NEVER get squeezed out — only the text span ellipsizes. */ .m-os-orders .m-ord-item { padding: 7px 2px; font-size: 12px; gap: 6px; } .m-os-orders .m-ord-expiry { flex: 0 0 auto; } .m-os-orders .m-ord-x { flex: 0 0 auto; } /* Field rows */ .m-field-row { display: flex; gap: 10px; } .m-field-row .m-field { flex: 1; } .m-field { margin-bottom: 8px; } .m-field label { display: block; font-size: 11px; color: var(--mt); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; margin-bottom: 4px; } .m-stepper { display: grid; grid-template-columns: 40px 40px 1fr 40px 40px; align-items: stretch; border: 1px solid var(--bd); border-radius: 12px; overflow: hidden; background: var(--bg); } .m-stepper:focus-within { border-color: var(--ac); } .m-step { background: transparent; border: none; color: var(--mt); font-size: 14px; font-weight: 700; border-right: 1px solid var(--bd); transition: background 0.12s ease; } .m-step:last-child { border-right: none; } .m-step:active { background: var(--sf2); color: var(--tx); } .m-step.m-step-down { color: var(--rd); } .m-step.m-step-up { color: var(--gn); } .m-stepper-in { background: transparent; border: none; border-left: 1px solid var(--bd); border-right: 1px solid var(--bd); color: var(--tx); font-size: 18px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; outline: none; width: 100%; min-width: 0; } /* 3-column stepper (price ±1 / qty rung arrows, side-by-side fields). Arrows get the flexible width (big thumb targets — they're the primary control); the readout is a fixed slim center, since price is ≤3 digits and qty tops out around 5-6 in tabular numerals. */ .m-stepper-3 { grid-template-columns: 1fr 64px 1fr; touch-action: manipulation; } .m-stepper-3 .m-step { font-size: 20px; min-height: 44px; } .m-stepper-3 .m-stepper-in { font-size: 16px; } /* Quantity: roomier readout so 6-figure sizes render comfortably; the arrows stay flexible, just a touch narrower than price's. */ .m-stepper-qty { grid-template-columns: 1fr 92px 1fr; } /* Inline label+control field (Expiry) — one slim row. */ .m-field-inline { display: flex; align-items: center; gap: 10px; } .m-field-inline label { margin: 0; flex: 0 0 auto; } .m-field-inline .m-exp-select { flex: 1 1 auto; padding: 6px 10px; font-size: 14px; } /* Fee toggle chip in the sheet header — flips displayed odds between raw and fee-inclusive (kalshi_mobile_fee_odds). */ .m-fee-tgl { flex: 0 0 auto; border: 1px solid var(--bd); border-radius: 999px; background: var(--sf2); color: var(--mt); font-size: 9px; font-weight: 800; padding: 2px 7px; line-height: 1.4; white-space: nowrap; } .m-fee-tgl.on { border-color: var(--ac); background: rgba(59, 130, 246, 0.16); color: var(--tx); } /* Cost summary block. */ .m-cost { background: var(--bg); border: 1px solid var(--bd); border-radius: 10px; padding: 6px 10px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 2px; } .m-cost-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--tx); font-variant-numeric: tabular-nums; } .m-cost-row > span:first-child { color: var(--mt); font-size: 13px; } .m-cost-row.m-cost-row-sub { border-top: 1px dashed var(--bd); padding-top: 4px; margin-top: 4px; font-size: 12px; } .m-cost-row.m-cost-row-sub > span:first-child { font-size: 12px; } .m-cost-row .positive { color: var(--gn); font-weight: 700; } #osPayout { color: var(--gn); font-weight: 700; } /* ── REVIEW MODAL ────────────────────────────────────────────────── Receipt-style confirm: quiet eyebrow title, color-coded YES/NO hero, labeled ticket rows, then the two money numbers you actually decide on (You pay / To win). Submit restates the action and takes the side color. */ .m-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px; padding-top: calc(20px + var(--safe-top)); padding-bottom: calc(20px + var(--safe-bottom)); } .m-modal.hidden { display: none; } .m-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.62); } .m-modal-panel { position: relative; background: var(--sf); border: 1px solid var(--bd); border-radius: 16px; padding: 16px 16px 14px; width: 100%; max-width: 360px; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45); } .m-modal-title { font-size: 11px; font-weight: 800; letter-spacing: 0.55px; text-transform: uppercase; color: var(--mt); margin-bottom: 10px; } .m-modal-body { margin-bottom: 14px; } .m-modal-actions { display: grid; grid-template-columns: 1fr 1.7fr; gap: 8px; } .m-rev { display: flex; flex-direction: column; gap: 10px; } .m-rev-hero { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--bd); } .m-rev-hero.yes { background: rgba(16, 185, 129, 0.12); border-color: rgba(16, 185, 129, 0.38); } .m-rev-hero.no { background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.38); } .m-rev-side { flex: 0 0 auto; font-size: 18px; font-weight: 900; letter-spacing: 0.4px; line-height: 1.15; } .m-rev-hero.yes .m-rev-side { color: var(--gn); } .m-rev-hero.no .m-rev-side { color: var(--rd); } .m-rev-mkt { min-width: 0; font-size: 14px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; } .m-rev-fill { font-size: 11px; font-weight: 700; color: var(--yl); background: rgba(245, 158, 11, 0.12); border: 1px solid rgba(245, 158, 11, 0.35); border-radius: 8px; padding: 6px 10px; } .m-rev-rows { display: flex; flex-direction: column; gap: 6px; } .m-rev-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; font-variant-numeric: tabular-nums; } .m-rev-row > span { color: var(--mt); font-weight: 600; } .m-rev-row > b { color: var(--tx); font-weight: 800; text-align: right; } .m-rev-money { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .m-rev-money > div { background: var(--bg); border: 1px solid var(--bd); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; } .m-rev-pay-lbl { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.45px; color: var(--mt); } .m-rev-pay-val { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.4px; line-height: 1.15; } .m-rev-pay-val.win { color: var(--gn); } .m-rev-odds { font-size: 12px; color: var(--mt); text-align: center; } .m-rev-odds b { color: var(--tx); font-weight: 800; } /* ── BOTTOM NAV ──────────────────────────────────────────────────── */ .m-bottom-nav { flex: 0 0 auto; background: var(--sf); border-top: 1px solid var(--bd); display: grid; grid-template-columns: repeat(3, 1fr); height: calc(var(--nav-h) + var(--safe-bottom)); padding-bottom: var(--safe-bottom); } .m-bn-btn { background: transparent; border: none; color: var(--mt); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; font-size: 11px; font-weight: 600; transition: color 0.12s ease; } .m-bn-btn:active { background: var(--bg); } .m-bn-btn.on { color: var(--ac); } .m-bn-ico { font-size: 22px; line-height: 1; } .m-bn-lbl { letter-spacing: 0.3px; } /* ── PORTFOLIO TAB ───────────────────────────────────────────────── */ .m-port-stats { flex: 0 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 12px 14px; background: var(--bg); border-bottom: 1px solid var(--bd); } .m-stat { background: var(--sf); border: 1px solid var(--bd); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; } .m-stat-lbl { font-size: 10px; color: var(--mt); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; } .m-stat-val { font-size: 18px; font-weight: 800; color: var(--tx); font-variant-numeric: tabular-nums; line-height: 1.1; margin-top: 2px; } .m-stat-val.pos { color: var(--gn); } .m-stat-val.neg { color: var(--rd); } .m-pf-tabs { flex: 0 0 auto; display: flex; gap: 4px; padding: 8px 14px; background: var(--bg); border-bottom: 1px solid var(--bd); } .m-pf-tab { flex: 1; background: var(--sf); border: 1px solid var(--bd); color: var(--mt); border-radius: 8px; padding: 8px 4px; font-size: 12px; font-weight: 700; transition: background 0.12s, color 0.12s, border-color 0.12s; } .m-pf-tab.on { background: rgba(59, 130, 246, 0.18); border-color: var(--ac); color: var(--tx); } .m-pf-tab span { display: inline-block; margin-left: 4px; background: var(--soft-fill); padding: 1px 7px; border-radius: 999px; font-size: 10px; } /* min-height:0 lets this flex child shrink below its content height so its own .m-list-body overflow-y:auto engages; without it the pane grows to its full content height and the list is clipped by .tab{overflow:hidden} (iOS WebKit needs the explicit 0 even though overflow-y:auto is set). */ .m-pf-pane { display: flex; flex-direction: column; min-height: 0; gap: 10px; overscroll-behavior: contain; padding: 10px 14px calc(var(--nav-h) + var(--safe-bottom) + 16px); } .m-pf-pane.hidden { display: none; } .m-pf-group { /* Don't let the flex column shrink the cards to fit — keep their natural height so the pane overflows and .m-list-body's overflow-y:auto scrolls. (A shrinkable card can collapse the scroll height on iOS WebKit.) */ flex: 0 0 auto; background: var(--sf); border: 1px solid var(--bd); border-radius: 14px; overflow: hidden; } .m-pf-group-head { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 11px 12px; background: rgba(59, 130, 246, 0.10); border-bottom: 1px solid rgba(59, 130, 246, 0.16); } .m-pf-group-head:active, .m-pf-rich-row:active { background: var(--sf2); } .m-pf-group-title { color: var(--tx); font-size: 14px; font-weight: 900; line-height: 1.25; } .m-pf-group-title span { display: inline-block; margin-right: 7px; padding: 1px 6px; border-radius: 5px; background: rgba(59, 130, 246, 0.18); color: var(--ac); font-size: 10px; letter-spacing: 0.4px; } .m-pf-group-sub { color: var(--mt); font-size: 11px; margin-top: 2px; } .m-pf-open { color: var(--ac); font-size: 11px; font-weight: 800; white-space: nowrap; } /* Collapsible per-event positions header. */ .m-pf-group-toggle { cursor: pointer; } .m-pf-caret { color: var(--mt); font-size: 11px; line-height: 1; white-space: nowrap; align-self: center; } .m-pf-cat { padding: 7px 12px; background: var(--bg); border-bottom: 1px solid var(--bd); color: var(--mt); font-size: 10px; font-weight: 900; letter-spacing: 0.5px; text-transform: uppercase; } .m-pf-rich-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px; border-bottom: 1px solid rgba(31, 41, 55, 0.85); } .m-pf-rich-row:last-child { border-bottom: none; } .m-pf-rich-main { min-width: 0; } .m-pf-rich-side { text-align: right; min-width: 86px; } .m-pf-item-name { font-size: 14px; font-weight: 800; color: var(--tx); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .m-pf-item-meta { font-size: 11px; color: var(--mt); margin-top: 5px; display: grid; grid-template-columns: auto auto auto auto auto; justify-content: start; gap: 8px 12px; align-items: center; } .m-pf-item-side { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.3px; } .m-pf-side-yes { background: rgba(16, 185, 129, 0.18); color: var(--gn); } .m-pf-side-no { background: rgba(239, 68, 68, 0.18); color: var(--rd); } .m-pf-item-num { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; font-size: 14px; } .m-pf-item-num.pos { color: var(--gn); } .m-pf-item-num.neg { color: var(--rd); } .m-pf-side-label { color: var(--mt); font-size: 10px; margin-top: 2px; text-transform: uppercase; letter-spacing: 0.35px; } .m-pf-item-meta .pos { color: var(--gn); } .m-pf-item-meta .neg { color: var(--rd); } .m-pf-cancel { border: 1px solid rgba(239, 68, 68, 0.4); background: transparent; color: var(--rd); font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 8px; margin-top: 4px; } .m-pf-cancel:active { background: rgba(239, 68, 68, 0.15); } /* ── ORDERS TAB (grouped by game › market type) ──────────────────── */ .m-pf-ord-head { display: flex; align-items: center; gap: 10px; } .m-pf-ord-headmain { min-width: 0; flex: 1 1 auto; } .m-pf-ord-headact { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: 0 0 auto; } .m-pf-cancel-all { margin-top: 0; background: rgba(239, 68, 68, 0.12); font-weight: 800; white-space: nowrap; } .m-pf-open-btn { border: 1px solid rgba(59, 130, 246, 0.4); background: transparent; padding: 5px 11px; border-radius: 8px; font-weight: 800; } .m-pf-open-btn:active { background: rgba(59, 130, 246, 0.16); } .m-pf-cat-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .m-pf-cat-cancel { margin-top: 0; padding: 3px 9px; font-size: 11px; text-transform: none; letter-spacing: 0; } .m-pf-ord-row .m-pf-cancel { min-width: 76px; min-height: 34px; } /* ── OPEN-ORDER ROWS (web .ord-item single-line parity) ────────────── {qty SIDE} · name @ ¢ (odds) [⏱ expiry] ✕ Side text is green (YES) / red (NO) via the shared .m-game-pos-* classes, so order rows match the restyled game-position rows. The text ellipsizes so the optional expiry pill + compact ✕ stay on one line. */ .m-ord-item { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid rgba(31, 41, 55, 0.85); font-size: 13px; } .m-ord-item:last-child { border-bottom: none; } .m-ord-text { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--tx); line-height: 1.3; } .m-ord-text .m-game-pos-yes, .m-ord-text .m-game-pos-no { font-weight: 700; } .m-ord-text .m-game-pos-odds { font-weight: 400; } .m-ord-expiry { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 2px; font-size: 10px; color: var(--yl, #f59e0b); padding: 1px 6px; border: 1px solid rgba(245, 158, 11, 0.35); border-radius: 8px; background: rgba(245, 158, 11, 0.08); white-space: nowrap; } .m-ord-x { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 34px; padding: 0 8px; background: transparent; border: 1px solid rgba(239, 68, 68, 0.4); border-radius: 8px; color: var(--rd); font-size: 14px; font-weight: 700; line-height: 1; } .m-ord-x:active { background: rgba(239, 68, 68, 0.15); } /* ── ACCOUNT TAB ─────────────────────────────────────────────────── */ .m-acct-card { flex: 0 0 auto; margin: 12px 14px 0; background: var(--sf); border: 1px solid var(--bd); border-radius: 12px; padding: 14px; } .m-acct-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; } .m-acct-row + .m-acct-row { border-top: 1px solid var(--bd); } .m-acct-row-stack { flex-direction: column; align-items: flex-start; gap: 6px; } .m-acct-toggle { gap: 16px; } .m-acct-toggle > span:first-child { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .m-acct-lbl { color: var(--mt); font-size: 13px; } .m-acct-val { color: var(--tx); font-size: 13px; font-weight: 700; } .m-acct-sub { color: var(--mt); font-size: 11px; } .m-acct-btn { display: block; margin: 10px 14px 0; padding: 13px 14px; background: var(--sf); border: 1px solid var(--bd); border-radius: 12px; color: var(--tx); font-size: 14px; font-weight: 600; text-align: left; width: calc(100% - 28px); text-decoration: none; } .m-acct-btn:active { background: var(--sf2); } .m-acct-link { color: var(--tx); } .m-acct-btn-inline { margin: 10px 0 2px; } .m-acct-msg { margin: 8px 0; padding: 8px; border-radius: 8px; font-size: 12px; line-height: 1.35; } .m-acct-msg.ok { color: var(--gn); background: rgba(16, 185, 129, 0.12); border: 1px solid rgba(16, 185, 129, 0.35); } .m-acct-msg.err { color: var(--rd); background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.35); } .m-acct-btn-danger { margin-top: 18px; border-color: rgba(239, 68, 68, 0.4); color: var(--rd); } .m-acct-section { margin: 14px 14px 0; background: var(--sf); border: 1px solid var(--bd); border-radius: 12px; padding: 4px 14px 8px; } .m-acct-section-title { font-size: 10px; color: var(--mt); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 10px 0 4px; } .m-acct-foot { text-align: center; color: var(--mt); font-size: 11px; padding: 24px 0 calc(20px + var(--nav-h) + var(--safe-bottom)); } .m-tgl { position: relative; display: inline-block; width: 40px; height: 22px; flex: 0 0 auto; } .m-tgl input { display: none; } .m-tgl-sl { position: absolute; inset: 0; background: var(--bd); border-radius: 999px; transition: background 0.18s ease; } .m-tgl-sl::before { content: ''; position: absolute; width: 18px; height: 18px; left: 2px; top: 2px; background: #fff; border-radius: 50%; transition: transform 0.18s ease; } .m-tgl input:checked + .m-tgl-sl { background: var(--gn); } .m-tgl input:checked + .m-tgl-sl::before { transform: translateX(18px); } .m-tgl input:disabled + .m-tgl-sl { opacity: 0.45; cursor: not-allowed; } /* ── TOAST ───────────────────────────────────────────────────────── */ .m-toast { position: fixed; left: 16px; right: 16px; bottom: calc(var(--nav-h) + var(--safe-bottom) + 16px); padding: 12px 14px; border-radius: 12px; font-size: 14px; font-weight: 600; text-align: center; z-index: 500; background: var(--sf); border: 1px solid var(--bd); color: var(--tx); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); animation: toastSlide 0.22s cubic-bezier(0.16, 1, 0.3, 1); max-width: 520px; margin: 0 auto; } .m-toast.ok { border-color: var(--gn); background: #0f5132; color: #fff; } .m-toast.err { border-color: var(--rd); background: #5b1a1a; color: #fff; } @keyframes toastSlide { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* ────────────────────────────────────────────────────────────────── * Mobile fill-notification stream — the desktop floating "filled orders" * feed, shrunk + anchored BOTTOM-LEFT + semi-transparent so it stays out * of the way on a phone. column-reverse keeps the newest card at the * bottom with older ones stacking upward (matches desktop's feel). * pointer-events:none guarantees the cards never intercept taps. * ────────────────────────────────────────────────────────────────── */ .m-fill-stream { position: fixed; left: 8px; bottom: calc(64px + var(--safe-bottom)); z-index: 9000; display: flex; flex-direction: column-reverse; gap: 6px; pointer-events: none; max-width: 62vw; } .m-fill-notif { pointer-events: none; background: rgba(10, 14, 23, 0.72); border: 1px solid var(--hairline); border-radius: 8px; padding: 3px 7px; opacity: 0.88; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45); animation: mFillIn 0.22s ease-out; transition: opacity 0.3s ease, transform 0.3s ease; } .m-fill-notif.m-fill-out { opacity: 0; transform: translateX(-12px); } .m-fill-main { font-size: 11px; font-weight: 800; letter-spacing: 0.3px; line-height: 1.1; white-space: nowrap; } .m-fill-sub { font-size: 9px; font-weight: 600; opacity: 0.82; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 58vw; } .m-fill-yes .m-fill-main, .m-fill-yes .m-fill-sub { color: var(--gn); } .m-fill-no .m-fill-main, .m-fill-no .m-fill-sub { color: var(--rd); } @keyframes mFillIn { from { opacity: 0; transform: translateX(-14px) scale(0.92); } to { opacity: 0.88; transform: translateX(0) scale(1); } }