/* ═══════════════════════════════════════════════════════════════ FOXBOT PRO — MOBILE STYLES Native-like app shell · safe areas · 60fps gestures Active uniquement quand ═══════════════════════════════════════════════════════════════ */ [data-mobile="true"] { --m-header-h: 56px; --m-nav-h: 64px; --m-pad-x: 16px; --m-radius-card: 20px; --m-radius-card-sm: 16px; --m-radius-pill: 9999px; --m-tap-min: 44px; /* Safe-area helpers (cssom fallback to 0) */ --sa-top: env(safe-area-inset-top, 0px); --sa-bot: env(safe-area-inset-bottom, 0px); --sa-l: env(safe-area-inset-left, 0px); --sa-r: env(safe-area-inset-right, 0px); /* Springs */ --spring-snappy: cubic-bezier(0.34, 1.56, 0.64, 1); --spring-smooth: cubic-bezier(0.32, 0.72, 0.24, 1); --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1); } [data-mobile="true"] body { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; overscroll-behavior: none; touch-action: manipulation; } [data-mobile="true"] input, [data-mobile="true"] textarea, [data-mobile="true"] [contenteditable="true"] { -webkit-user-select: text; user-select: text; } /* Hide desktop chrome on mobile */ [data-mobile="true"] .sidebar, [data-mobile="true"] .topbar, [data-mobile="true"] .bottom-nav { display: none !important; } [data-mobile="true"] .app { display: block; grid-template-columns: 1fr !important; } [data-mobile="true"] .main { display: block; } /* ────────────────────────────────────────────────────── APP SHELL ────────────────────────────────────────────────────── */ .m-app { min-height: 100vh; min-height: 100dvh; background: var(--bg-base); color: var(--text-base); padding-top: calc(var(--m-header-h) + var(--sa-top)); padding-bottom: calc(var(--m-nav-h) + var(--sa-bot)); position: relative; overflow-x: hidden; } /* ────────────────────────────────────────────────────── HEADER (sticky top, blur) ────────────────────────────────────────────────────── */ .m-header { position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: calc(var(--m-header-h) + var(--sa-top)); padding-top: var(--sa-top); padding-left: max(var(--m-pad-x), var(--sa-l)); padding-right: max(var(--m-pad-x), var(--sa-r)); background: color-mix(in srgb, var(--bg-base) 78%, transparent); -webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%); border-bottom: 1px solid transparent; transition: border-color 200ms ease, background 200ms ease; display: flex; align-items: center; } .m-header.scrolled { border-bottom-color: var(--border-subtle); background: color-mix(in srgb, var(--bg-base) 92%, transparent); } .m-header-inner { width: 100%; display: flex; align-items: center; gap: 10px; } .m-brand-mark { width: 32px; height: 32px; border-radius: 9px; background: var(--gradient-accent); display: grid; place-items: center; position: relative; box-shadow: 0 0 20px var(--accent-glow); flex-shrink: 0; } .m-brand-mark::after { content: ""; position: absolute; inset: 1px; border-radius: 8px; background: linear-gradient(180deg, rgba(255,255,255,0.18), transparent 60%); pointer-events: none; } .m-header-title { display: flex; flex-direction: column; gap: 1px; line-height: 1; min-width: 0; } .m-header-title .crumb { font-size: 10px; color: var(--text-muted); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; } .m-header-title h1 { font-size: 15px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; margin: 0; font-family: var(--font-mono); } .m-header-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; } .m-mode-pill { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; border: 1px solid var(--border-base); border-radius: var(--m-radius-pill); color: var(--text-base); background: var(--bg-elevated); cursor: pointer; transition: transform 100ms; } .m-mode-pill:active { transform: scale(0.96); } .m-mode-pill.live { color: var(--bull); border-color: rgba(16,185,129,0.4); background: var(--bull-soft); } .m-mode-pill.paper { color: var(--warn); border-color: rgba(245,158,11,0.4); background: var(--warn-soft); } .m-icon-btn { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--border-subtle); background: var(--bg-elevated); color: var(--text-base); position: relative; cursor: pointer; transition: transform 100ms, background 150ms; } .m-icon-btn:active { transform: scale(0.92); background: var(--bg-surface); } .m-icon-btn .notif-dot { position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-mag); box-shadow: 0 0 8px var(--accent-mag); border: 1.5px solid var(--bg-elevated); } /* ────────────────────────────────────────────────────── BOTTOM NAV ────────────────────────────────────────────────────── */ .m-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; height: calc(var(--m-nav-h) + var(--sa-bot)); padding-bottom: var(--sa-bot); background: color-mix(in srgb, var(--bg-base) 88%, transparent); -webkit-backdrop-filter: blur(28px) saturate(140%); backdrop-filter: blur(28px) saturate(140%); border-top: 1px solid var(--border-subtle); box-shadow: 0 -12px 32px rgba(0,0,0,0.5); } .m-nav-inner { height: var(--m-nav-h); display: grid; grid-template-columns: repeat(5, 1fr); align-items: stretch; padding: 0 max(var(--sa-l), 0px) 0 max(var(--sa-r), 0px); } .m-nav-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; color: var(--text-muted); transition: color 200ms; user-select: none; } .m-nav-item:active .m-nav-icon-wrap { transform: scale(0.88); } .m-nav-icon-wrap { position: relative; display: grid; place-items: center; width: 28px; height: 28px; transition: transform 180ms var(--spring-snappy); } .m-nav-item .m-nav-label { font-size: 10px; letter-spacing: 0.06em; font-weight: 500; text-transform: uppercase; font-family: var(--font-mono); } .m-nav-item.active { color: var(--accent-400); } .m-nav-item.active .m-nav-icon-wrap { filter: drop-shadow(0 0 8px var(--accent-glow)); } .m-nav-pill { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 26px; height: 3px; border-radius: 9999px; background: var(--gradient-accent); box-shadow: 0 0 10px var(--accent-glow); opacity: 0; transition: opacity 160ms ease; } .m-nav-item.active .m-nav-pill { opacity: 1; } .m-nav-badge { position: absolute; top: 4px; right: calc(50% - 18px); min-width: 14px; height: 14px; padding: 0 4px; border-radius: 9999px; background: var(--accent-mag); color: white; font-family: var(--font-mono); font-size: 9px; font-weight: 700; display: grid; place-items: center; border: 1.5px solid var(--bg-base); } /* ────────────────────────────────────────────────────── PAGE LAYOUT (inside .m-app) ────────────────────────────────────────────────────── */ .m-page { padding: 16px var(--m-pad-x) 24px; display: flex; flex-direction: column; gap: 20px; min-height: calc(100dvh - var(--m-header-h) - var(--m-nav-h) - var(--sa-top) - var(--sa-bot)); } .m-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .m-section-head h2 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.015em; color: var(--text-primary); } .m-section-head .m-count { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: 9999px; padding: 2px 10px; } .m-section-head .m-see-all { background: transparent; border: none; color: var(--accent-400); font-size: 13px; font-weight: 500; cursor: pointer; padding: 4px 6px; font-family: var(--font-mono); } .m-section-head .m-see-all:active { opacity: 0.5; } /* ────────────────────────────────────────────────────── HERO PNL CARD (Dashboard) ────────────────────────────────────────────────────── */ .m-hero { position: relative; padding: 18px 18px 16px; border-radius: var(--m-radius-card); border: 1px solid rgba(168,85,247,0.22); background: radial-gradient(120% 100% at 100% 0%, rgba(236,72,153,0.10), transparent 50%), radial-gradient(120% 100% at 0% 100%, rgba(168,85,247,0.14), transparent 50%), var(--bg-elevated); overflow: hidden; animation: hero-in 600ms var(--ease-out-quint) backwards; } @keyframes hero-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .m-hero::before { content: ""; position: absolute; top: -40px; right: -40px; width: 180px; height: 180px; background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%); pointer-events: none; opacity: 0.6; } .m-hero-label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .m-hero-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; } .m-live-dot-wrap { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bull); } .m-hero-value { font-family: var(--font-mono); font-size: 44px; font-weight: 600; letter-spacing: -0.035em; line-height: 1; margin: 4px 0 12px; background: var(--gradient-bull); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; position: relative; z-index: 1; } .m-hero-value.bear { background: var(--gradient-bear); -webkit-background-clip: text; background-clip: text; } .m-hero-value .cur { font-size: 24px; opacity: 0.7; margin-right: 2px; vertical-align: 6px; } .m-hero-meta { display: flex; align-items: center; gap: 8px; position: relative; z-index: 1; } .m-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 9999px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; border: 1px solid var(--border-subtle); background: var(--bg-base); color: var(--text-base); } .m-pill.bull { color: var(--bull); background: var(--bull-soft); border-color: rgba(16,185,129,0.3); } .m-pill.bear { color: var(--bear); background: var(--bear-soft); border-color: rgba(239,68,68,0.3); } .m-pill.accent { color: var(--accent-400); background: var(--accent-soft); border-color: rgba(168,85,247,0.3); } .m-hero-spark { position: absolute; right: 0; bottom: 12px; left: 50%; pointer-events: none; opacity: 0.25; } /* ────────────────────────────────────────────────────── KPI GRID 2x2 ────────────────────────────────────────────────────── */ .m-kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .m-kpi { background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--m-radius-card-sm); padding: 14px; display: flex; flex-direction: column; gap: 6px; min-height: 100px; position: relative; overflow: hidden; animation: kpi-in 420ms var(--ease-out-quint) backwards; } .m-kpi:nth-child(1) { animation-delay: 60ms; } .m-kpi:nth-child(2) { animation-delay: 110ms; } .m-kpi:nth-child(3) { animation-delay: 160ms; } .m-kpi:nth-child(4) { animation-delay: 210ms; } @keyframes kpi-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .m-kpi-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; } .m-kpi-value { font-family: var(--font-mono); font-size: 22px; font-weight: 600; letter-spacing: -0.025em; color: var(--text-primary); line-height: 1; display: flex; align-items: baseline; gap: 4px; margin-top: auto; } .m-kpi-value .unit { font-size: 12px; color: var(--text-muted); font-weight: 400; } .m-kpi-foot { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); } .m-kpi-mini-bar { height: 4px; border-radius: 2px; background: var(--bg-surface); overflow: hidden; flex: 1; } .m-kpi-mini-bar > span { display: block; height: 100%; border-radius: 2px; background: var(--gradient-accent); } .m-kpi-mini-bar.bull > span { background: var(--gradient-bull); } .m-kpi-mini-bar.bear > span { background: var(--gradient-bear); } .m-kpi-mini-bar.warn > span { background: var(--warn); } /* ────────────────────────────────────────────────────── POSITIONS — horizontal scroll snap ────────────────────────────────────────────────────── */ .m-pos-scroll-wrap { margin: 0 -16px; } .m-pos-scroll { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 16px; gap: 12px; padding: 4px 16px 8px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .m-pos-scroll::-webkit-scrollbar { display: none; } .m-pos-card { flex: 0 0 82%; scroll-snap-align: start; background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--m-radius-card-sm); padding: 14px; display: flex; flex-direction: column; gap: 12px; position: relative; overflow: hidden; } .m-pos-card .rail { position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--bull); } .m-pos-card.bear .rail { background: var(--bear); } .m-pos-head { display: flex; align-items: center; gap: 10px; padding-left: 6px; } .m-pos-head .sym { font-weight: 600; font-size: 14px; color: var(--text-primary); } .m-pos-head .lev { font-family: var(--font-mono); font-size: 10px; padding: 2px 6px; border-radius: 4px; background: var(--bg-surface); color: var(--text-muted); letter-spacing: 0.04em; } .m-pos-pnl { font-family: var(--font-mono); font-size: 26px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; padding-left: 6px; } .m-pos-pnl.bull { color: var(--bull); } .m-pos-pnl.bear { color: var(--bear); } .m-pos-pnl .pct { font-size: 13px; opacity: 0.7; margin-left: 6px; } .m-pos-chart { height: 56px; margin: 0 -2px; } .m-pos-meta { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding-top: 8px; border-top: 1px solid var(--border-subtle); font-family: var(--font-mono); font-size: 11px; } .m-pos-meta .k { color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; font-size: 9px; font-weight: 600; } .m-pos-meta .v { color: var(--text-primary); } .m-pos-meta .v.bull { color: var(--bull); } .m-pos-meta .v.bear { color: var(--bear); } .m-pos-dots { display: flex; justify-content: center; gap: 6px; padding-top: 10px; } .m-pos-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--border-base); transition: all 180ms; } .m-pos-dots span.active { background: var(--accent-400); box-shadow: 0 0 8px var(--accent-glow); width: 18px; border-radius: 9999px; } /* ────────────────────────────────────────────────────── COMPACT SIGNAL ROWS ────────────────────────────────────────────────────── */ .m-sig-stack { display: flex; flex-direction: column; gap: 8px; } .m-sig-row { display: flex; align-items: center; gap: 12px; background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--m-radius-card-sm); padding: 12px 14px; cursor: pointer; transition: transform 100ms, border-color 200ms; } .m-sig-row:active { transform: scale(0.99); border-color: var(--border-base); } .m-sig-row .sym-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .m-sig-row .sym-name b { font-weight: 600; color: var(--text-primary); font-size: 14px; } .m-sig-row .sym-name .note { font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .m-sig-row .sig-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } /* ────────────────────────────────────────────────────── ACTIVITY ROWS ────────────────────────────────────────────────────── */ .m-act-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--border-subtle); } .m-act-row:last-child { border-bottom: none; } .m-act-dot { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; } .m-act-dot.bull { background: var(--bull-soft); color: var(--bull); } .m-act-dot.bear { background: var(--bear-soft); color: var(--bear); } .m-act-dot.accent { background: var(--accent-soft); color: var(--accent-400); } .m-act-dot.muted { background: var(--bg-surface); color: var(--text-muted); } .m-act-text { flex: 1; min-width: 0; } .m-act-text .title { font-size: 13px; font-weight: 500; color: var(--text-primary); } .m-act-text .desc { font-size: 12px; color: var(--text-muted); font-family: var(--font-mono); } .m-act-row .time { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); } /* ────────────────────────────────────────────────────── BOTTOM SHEET ────────────────────────────────────────────────────── */ .m-sheet-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); z-index: 80; opacity: 0; animation: backdrop-in 200ms ease forwards; } .m-sheet-backdrop.closing { animation: backdrop-out 160ms ease forwards; } @keyframes backdrop-in { to { opacity: 1; } } @keyframes backdrop-out { to { opacity: 0; } } .m-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 81; background: var(--bg-elevated); border-radius: 24px 24px 0 0; border-top: 1px solid var(--border-subtle); padding: 12px 18px calc(20px + var(--sa-bot)); display: flex; flex-direction: column; max-height: 88vh; transform: translateY(100%); animation: sheet-in 280ms var(--spring-smooth) forwards; box-shadow: 0 -16px 48px rgba(0,0,0,0.6); } .m-sheet.closing { animation: sheet-out 200ms ease-out forwards; } @keyframes sheet-in { to { transform: translateY(0); } } @keyframes sheet-out { to { transform: translateY(100%); } } .m-sheet-handle { width: 36px; height: 5px; border-radius: 9999px; background: var(--border-base); margin: 0 auto 10px; } .m-sheet h3 { margin: 0 0 14px; font-size: 16px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; } .m-sheet-list { display: flex; flex-direction: column; background: var(--bg-base); border-radius: 14px; border: 1px solid var(--border-subtle); overflow: hidden; } .m-sheet-item { display: flex; align-items: center; gap: 14px; padding: 16px 14px; min-height: 56px; border-bottom: 1px solid var(--border-subtle); cursor: pointer; transition: background 120ms; } .m-sheet-item:last-child { border-bottom: none; } .m-sheet-item:active { background: var(--bg-surface); } .m-sheet-item .ic { width: 28px; height: 28px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-400); display: grid; place-items: center; flex-shrink: 0; } .m-sheet-item .lbl { flex: 1; font-size: 14px; color: var(--text-primary); font-weight: 500; } .m-sheet-item .chev { color: var(--text-dim); } /* ────────────────────────────────────────────────────── PULL-TO-REFRESH ────────────────────────────────────────────────────── */ .m-ptr-indicator { position: absolute; top: 0; left: 50%; transform: translateX(-50%) translateY(-100%); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--bg-elevated); border: 1px solid var(--border-base); color: var(--accent-400); z-index: 5; box-shadow: 0 4px 16px rgba(0,0,0,0.4); opacity: 0; transition: opacity 200ms; pointer-events: none; } /* ────────────────────────────────────────────────────── PAGE TRANSITION ────────────────────────────────────────────────────── */ .m-screen { animation: screen-in 220ms var(--ease-out-quint) backwards; } @keyframes screen-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* ────────────────────────────────────────────────────── UTILITY ────────────────────────────────────────────────────── */ .m-scrollable { -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; } .m-tap { transition: transform 100ms; cursor: pointer; } .m-tap:active { transform: scale(0.96); } /* Reduce motion */ @media (prefers-reduced-motion: reduce) { .m-app *, .m-app *::before, .m-app *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; } }