/* ============================================================ ARIA DESIGN SYSTEM v4 — "Infloww" light-first 2026-07 redesign: light theme is the DEFAULT (matches the target video: white surfaces, blue primary, orange CTA). The previous "Dark Rose" palette is preserved verbatim under html[data-theme="dark"] (toggle in the top bar, persisted in localStorage('aria_theme') by nav.js). NOTE: legacy token names (--ink/--card/--rose/…) are kept so all 29 pages reskin without per-page edits. --rose now maps to the Infloww PRIMARY BLUE in light mode; it stays rose in dark mode. Pages needing the literal orange CTA use --cta. ============================================================ */ /* --- FONTS ------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); /* --- TOKENS: LIGHT (default — Infloww) ---------------------- */ :root { /* Backgrounds */ --ink: #f5f6f8; /* page root — pale gray canvas */ --surface: #ffffff; /* nav / sidebar headers */ --card: #ffffff; /* card / panel background */ --raised: #f1f3f7; /* hover / elevated wells */ --overlay: #ffffff; /* modal / dropdown */ /* Borders */ --border: #e8eaed; --border2: #dcdfe4; --border3: #c9cdd4; /* interactive hover border */ /* Text */ --text: #1f2329; --sub: #5c6470; /* secondary text */ --muted: #8a919c; /* labels, placeholders */ --faint: #eef0f4; /* fills, backgrounds */ /* Primary accent — Infloww blue (legacy name --rose kept) */ --rose: #3b82f6; --rose2: #2f6fe0; --rose-glow: rgba(59,130,246,.18); --rose-soft: rgba(59,130,246,.10); /* CTA accent — Infloww orange (Link creator, Connect OF…) */ --cta: #ff6b35; --cta2: #ee5a24; --cta-soft: rgba(255,107,53,.12); /* Secondary accent — kept for charts/badges */ --electric: #6d6af8; --electric2: #5a57e8; --electric-glow: rgba(109,106,248,.12); /* Data accent — Cyan */ --cyan: #0ea5e9; --cyan-glow: rgba(14,165,233,.12); /* Gradients */ --brand-grad: linear-gradient(135deg, #3b82f6 0%, #6d6af8 100%); --brand-grad-soft: linear-gradient(135deg, rgba(59,130,246,.12) 0%, rgba(109,106,248,.08) 100%); --brand-grad-text: linear-gradient(135deg, #3b82f6 0%, #6d6af8 100%); /* Tier colors */ --whale: #f59e0b; --whale-bg: rgba(245,158,11,.12); --mid: #8b5cf6; --mid-bg: rgba(139,92,246,.10); --new: #22c55e; --new-bg: rgba(34,197,94,.10); --free: #d7dade; /* Semantics */ --success: #22c55e; --warn: #f59e0b; --danger: #ef4444; --info: #3b82f6; /* Geometry */ --radius: 10px; --radius-sm: 6px; --radius-lg: 14px; --radius-xl: 20px; /* Shadows — light theme: hairline borders do the work */ --shadow: 0 8px 32px rgba(15,23,42,.10); --shadow-sm: 0 2px 10px rgba(15,23,42,.07); --shadow-rose: 0 4px 20px rgba(59,130,246,.18); --shadow-glow: 0 0 0 1px rgba(59,130,246,.10), 0 4px 20px rgba(59,130,246,.10); } /* --- SFW MODE (roadmap #8) ------------------------------------- Toggle by setting (top-bar shield button, persisted in localStorage as aria_sfw). Blurs explicit media so the UI is safe to screen-share / view in public. Hover or focus a single item to peek; the blur returns on mouse-out. Covers the media surfaces across browse (chat), vault, and PPV history. */ html[data-sfw="on"] .msg-media-thumb, html[data-sfw="on"] .msg-media-ph, html[data-sfw="on"] .ppv-hist-media, html[data-sfw="on"] .ppv-hist-thumb, html[data-sfw="on"] .card-thumb, html[data-sfw="on"] .tbl-thumb, html[data-sfw="on"] .pvm-fold-thumbs img, html[data-sfw="on"] .media-viewer-img, html[data-sfw="on"] .preview { filter: blur(18px) !important; transition: filter .15s ease; } html[data-sfw="on"] .msg-media-thumb:hover, html[data-sfw="on"] .ppv-hist-media:hover, html[data-sfw="on"] .ppv-hist-thumb:hover, html[data-sfw="on"] .card-thumb:hover, html[data-sfw="on"] .tbl-thumb:hover, html[data-sfw="on"] .pvm-fold-thumbs img:hover, html[data-sfw="on"] .preview:hover { filter: none !important; } /* --- TOKENS: DARK (alternate — previous "Dark Rose") -------- Toggle by setting . Full previous palette, unchanged, so dark users lose nothing. */ html[data-theme="dark"] { --ink: #09090f; --surface: #0c0c15; --card: #111119; --raised: #161621; --overlay: #1a1a27; --border: #1c1c2e; --border2: #242438; --border3: #2e2e48; --text: #f0f0ff; --sub: #9898b8; --muted: #4a4a6a; --faint: #16162a; --rose: #f03e6d; --rose2: #c82d56; --rose-glow: rgba(240,62,109,.18); --rose-soft: rgba(240,62,109,.10); --cta: #ff7a47; --cta2: #ff8c5f; --cta-soft: rgba(255,122,71,.14); --electric: #8b7cf8; --electric2: #7060e8; --electric-glow: rgba(139,124,248,.15); --cyan: #22d4e8; --cyan-glow: rgba(34,212,232,.15); --brand-grad: linear-gradient(135deg, #f03e6d 0%, #8b7cf8 100%); --brand-grad-soft: linear-gradient(135deg, rgba(240,62,109,.14) 0%, rgba(139,124,248,.10) 100%); --brand-grad-text: linear-gradient(135deg, #ff6b94 0%, #a893ff 100%); --whale: #f5a623; --whale-bg: rgba(245,166,35,.10); --mid: #b48ef8; --mid-bg: rgba(180,142,248,.10); --new: #2de08a; --new-bg: rgba(45,224,138,.08); --free: #30304a; --success: #2de08a; --warn: #f5a623; --danger: #f0506e; --info: #4db8ff; --shadow: 0 8px 32px rgba(0,0,0,.7); --shadow-sm: 0 2px 10px rgba(0,0,0,.5); --shadow-rose: 0 4px 20px rgba(240,62,109,.25); --shadow-glow: 0 0 0 1px rgba(240,62,109,.12), 0 4px 20px rgba(240,62,109,.12); } /* --- RESET + BASE ----------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; background: var(--ink); color: var(--text); font-family: "Inter", "SF Pro Display", -apple-system, "Segoe UI", sans-serif; font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* iOS native feel */ -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; overscroll-behavior-y: none; } /* ARIA-330 fix (2026-07-14→2026-07-16, Edgar): the html{zoom:0.75} hack below shipped 2026-07-14 to make the cramped chat view denser (chatters were manually zooming OUT ~80% to see more messages per screen). REMOVED — `zoom` (unlike `transform:scale`) desyncs the rendered box from the browser's actual viewport measurements: every 100vw/100vh/calc(100vh-Npx) container in this codebase (see #creator-col, #rail, body itself) still computes against the UN-zoomed viewport, so the whole app rendered at 75% size while its own containers kept claiming 100% of a viewport that no longer matched what was on screen — the literal "got smaller and stopped filling the screen" bug. `zoom` is also non-standard (Chromium/WebKit only; silent no-op pre-126 Firefox), so it never even reached "adjusts per screen size" — it was one fixed ratio everywhere, mobile or 4K alike. Reverted to native 100% scale so the app fills the viewport correctly at any window/screen size again. If density is revisited, it must go through real per-breakpoint sizing (rem/clamp() + the existing @media ladder below), never a blanket zoom/transform on . */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } a { color: inherit; text-decoration: none; } button { cursor: pointer; border: none; background: none; color: inherit; font: inherit; } input:not([type=checkbox]):not([type=radio]), textarea, select { background: var(--card); border: 1px solid var(--border2); color: var(--text); font: inherit; border-radius: var(--radius-sm); padding: 10px 14px; outline: none; transition: border-color .15s, box-shadow .15s, background .15s; } input:not([type=checkbox]):not([type=radio]):focus, textarea:focus, select:focus { border-color: var(--rose); background: var(--raised); box-shadow: 0 0 0 3px var(--rose-glow); } /* Edgar 2026-07-17 (video): checkboxes/radios were caught by the generic `input` rule above — it gave them padding:10px 14px plus a focus box-shadow + bg swap, so every click ballooned the box into a huge rounded halo ("animación rara" en los masivos). Opt them out and let the native control render at its real size, tinted with the brand color. */ input[type=checkbox], input[type=radio] { -webkit-appearance: auto; appearance: auto; accent-color: var(--rose); width: 15px; height: 15px; padding: 0; margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none; cursor: pointer; flex: none; vertical-align: middle; } input[type=checkbox]:focus, input[type=radio]:focus { box-shadow: none; background: none; } /* Re-hide the native input for toggle/switch controls, which stack a styled slider over a visually-hidden checkbox. The generic reset above would otherwise pop a 15px native box on top of the slider. These come AFTER the reset so they win by source order (equal specificity). */ .switch input[type=checkbox], .switch input[type=radio], .toggle input[type=checkbox], .toggle input[type=radio], .toggle-switch input[type=checkbox], .toggle-switch input[type=radio] { -webkit-appearance: none; appearance: none; opacity: 0; width: 0; height: 0; flex: initial; } select option { background: var(--overlay); } ::placeholder { color: var(--muted); } ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border3); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--muted); } /* --- TYPOGRAPHY ------------------------------------------- */ .t-label { font-size: 10px; font-weight: 700; letter-spacing: .10em; text-transform: uppercase; color: var(--muted); } .t-title { font-size: 18px; font-weight: 700; letter-spacing: -.01em; } .t-heading { font-size: 24px; font-weight: 800; letter-spacing: -.025em; } .t-mono { font-family: "SF Mono", "Fira Code", ui-monospace, monospace; } .t-muted { color: var(--sub); } .t-dim { color: var(--muted); } .t-rose { color: var(--rose); } .t-brand { background: var(--brand-grad-text); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* --- SECTION SEPARATOR ------------------------------------ */ .section-rule { display: flex; align-items: center; gap: 10px; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 20px 0 12px; } .section-rule::before, .section-rule::after { content: ''; flex: 1; border-bottom: 1px solid var(--border); } /* --- TOPBAR ----------------------------------------------- */ .topbar { position: fixed; top: 0; left: 0; right: 0; height: 52px; background: rgba(9,9,15,.92); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 18px; gap: 6px; z-index: 100; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .topbar-brand { font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; margin-right: 8px; background: var(--brand-grad-text); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .topbar-brand span { /* legacy compat — no-op with gradient */ } .topbar-sep { width: 1px; height: 18px; background: var(--border2); margin: 0 4px; } .topbar-nav { display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none; flex: 1; } .topbar-nav::-webkit-scrollbar { display: none; } .nav-pill { padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; color: var(--sub); border: 1px solid transparent; white-space: nowrap; transition: all .15s; position: relative; } .nav-pill:hover { color: var(--text); background: var(--raised); } .nav-pill.active { background: var(--rose-soft); border-color: rgba(240,62,109,.25); color: var(--text); } .nav-pill.active::after { content: ''; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%); width: 20px; height: 2px; background: var(--brand-grad); border-radius: 1px; } .nav-pill.danger { color: var(--danger); } .nav-pill.danger:hover { background: rgba(240,80,110,.1); border-color: rgba(240,80,110,.2); } .topbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; } /* --- BUTTONS ---------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; transition: all .15s; white-space: nowrap; border: 1px solid transparent; } .btn-primary { background: var(--brand-grad); color: #fff; border-color: transparent; box-shadow: 0 2px 12px rgba(240,62,109,.25); } .btn-primary:hover { box-shadow: var(--shadow-rose); transform: translateY(-1px); filter: brightness(1.08); } .btn-secondary { background: var(--raised); color: var(--text); border-color: var(--border2); } .btn-secondary:hover { background: var(--overlay); border-color: var(--border3); } .btn-ghost { color: var(--sub); border-color: var(--border2); background: transparent; } .btn-ghost:hover { color: var(--text); background: var(--raised); } .btn-danger { background: rgba(240,80,110,.1); color: var(--danger); border-color: rgba(240,80,110,.2); } .btn-danger:hover { background: rgba(240,80,110,.2); } .btn-warn { background: rgba(245,166,35,.1); color: var(--whale); border-color: rgba(245,166,35,.2); } .btn-warn:hover { background: rgba(245,166,35,.2); } .btn-electric { background: rgba(139,124,248,.12); color: var(--electric); border-color: rgba(139,124,248,.25); } .btn-electric:hover { background: rgba(139,124,248,.22); box-shadow: 0 2px 12px rgba(139,124,248,.2); } .btn-sm { padding: 5px 11px; font-size: 12px; } .btn-lg { padding: 11px 24px; font-size: 14px; border-radius: var(--radius); } .btn-icon { padding: 7px; border-radius: var(--radius-sm); } .btn[disabled], .btn:disabled { opacity: .4; pointer-events: none; } /* --- BLAST BUTTON (special) ------------------------------- */ .btn-blast { background: linear-gradient(135deg, rgba(245,166,35,.18), rgba(245,166,35,.08)); color: var(--whale); border: 1px solid rgba(245,166,35,.35); padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 700; letter-spacing: .04em; transition: all .15s; } .btn-blast:hover { background: rgba(245,166,35,.22); box-shadow: 0 2px 14px rgba(245,166,35,.22); } /* --- CARDS ------------------------------------------------- */ .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: border-color .15s; } .card:hover { border-color: var(--border2); } .card-header { padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; } .card-body { padding: 16px 18px; } /* KPI / STAT CARD ------------------------------------------ */ .kpi-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; position: relative; overflow: hidden; transition: border-color .2s, box-shadow .2s, transform .15s; } .kpi-card:hover { border-color: var(--border3); transform: translateY(-1px); box-shadow: 0 6px 24px rgba(0,0,0,.4); } .kpi-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent-color, var(--brand-grad)); border-radius: var(--radius) var(--radius) 0 0; } .kpi-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--accent-bg, transparent); pointer-events: none; border-radius: var(--radius); opacity: .4; } .kpi-value { font-size: 30px; font-weight: 800; letter-spacing: -.03em; font-family: "Inter", ui-monospace, monospace; color: var(--accent-color, var(--text)); line-height: 1; margin-top: 6px; } .kpi-label { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 4px; } .kpi-sub { font-size: 12px; color: var(--sub); margin-top: 2px; } /* --- BADGE / PILL ----------------------------------------- */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 20px; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; } .badge-rose { background: rgba(240,62,109,.14); color: var(--rose); border: 1px solid rgba(240,62,109,.22); } .badge-electric { background: rgba(139,124,248,.14); color: var(--electric); border: 1px solid rgba(139,124,248,.22); } .badge-whale { background: var(--whale-bg); color: var(--whale); border: 1px solid rgba(245,166,35,.22); } .badge-mid { background: var(--mid-bg); color: var(--mid); border: 1px solid rgba(180,142,248,.22); } .badge-new { background: var(--new-bg); color: var(--new); border: 1px solid rgba(45,224,138,.22); } .badge-free { background: rgba(48,48,74,.4); color: var(--sub); border: 1px solid var(--border2); } .badge-danger { background: rgba(240,80,110,.12); color: var(--danger); border: 1px solid rgba(240,80,110,.22); } .badge-success { background: rgba(45,224,138,.10); color: var(--success); border: 1px solid rgba(45,224,138,.22); } .badge-warn { background: rgba(245,166,35,.10); color: var(--warn); border: 1px solid rgba(245,166,35,.22); } .badge-cyan { background: rgba(34,212,232,.10); color: var(--cyan); border: 1px solid rgba(34,212,232,.22); } /* --- TIER DOT --------------------------------------------- */ .tier-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .tier-dot.whale { background: var(--whale); box-shadow: 0 0 8px rgba(245,166,35,.6); } .tier-dot.mid { background: var(--mid); box-shadow: 0 0 6px rgba(180,142,248,.4); } .tier-dot.new { background: var(--new); box-shadow: 0 0 6px rgba(45,224,138,.4); } .tier-dot.free { background: var(--free); } /* --- ONLINE DOT ------------------------------------------- */ .online-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px rgba(34,212,232,.6); animation: pulse-online 2s ease-in-out infinite; flex-shrink: 0; } @keyframes pulse-online { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .65; transform: scale(.8); } } /* --- TABLE ------------------------------------------------- */ .data-table { width: 100%; border-collapse: collapse; font-size: 13px; } .data-table th { font-size: 10px; font-weight: 700; letter-spacing: .10em; text-transform: uppercase; color: var(--muted); padding: 10px 14px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; background: var(--surface); } .data-table td { padding: 11px 14px; border-bottom: 1px solid var(--border); color: var(--sub); vertical-align: middle; } .data-table td:first-child { color: var(--text); font-weight: 500; } .data-table tr:last-child td { border-bottom: none; } .data-table tr { transition: background .12s; } .data-table tr:hover td { background: var(--raised); } .data-table .t-num { font-family: "SF Mono", ui-monospace, monospace; color: var(--text); font-weight: 600; } /* --- PROGRESS BAR ----------------------------------------- */ .progress-bar { height: 6px; background: var(--faint); border-radius: 3px; overflow: hidden; } .progress-fill { height: 100%; border-radius: 3px; background: var(--brand-grad); transition: width .4s ease; } /* --- MINI BAR (score inline) ------------------------------ */ .mini-bar { display: inline-flex; align-items: center; gap: 6px; min-width: 80px; } .mini-bar-track { flex: 1; height: 4px; background: var(--faint); border-radius: 2px; overflow: hidden; } .mini-bar-fill { height: 100%; border-radius: 2px; background: var(--brand-grad); } .mini-bar-val { font-size: 11px; font-family: "SF Mono", ui-monospace, monospace; font-weight: 600; color: var(--sub); min-width: 28px; text-align: right; } /* --- TABS -------------------------------------------------- */ .tab-bar { display: inline-flex; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 3px; gap: 2px; } .tab-btn { padding: 6px 14px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; color: var(--muted); transition: all .15s; border: 1px solid transparent; } .tab-btn:hover { color: var(--sub); background: var(--raised); } .tab-btn.active { background: var(--raised); border-color: var(--border2); color: var(--text); box-shadow: var(--shadow-sm); } /* --- FORM GROUP ------------------------------------------- */ .form-group { display: flex; flex-direction: column; gap: 6px; } .form-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sub); } .form-input { padding: 10px 14px; border-radius: var(--radius-sm); font-size: 14px; height: 44px; } .form-textarea { resize: vertical; min-height: 80px; height: auto; } .form-select { height: 44px; } .form-hint { font-size: 11px; color: var(--muted); } /* --- ALERT BANNERS ---------------------------------------- */ .alert { padding: 12px 16px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; display: flex; align-items: flex-start; gap: 10px; border-left: 3px solid transparent; border-top: 1px solid transparent; border-right: 1px solid transparent; border-bottom: 1px solid transparent; } .alert-warn { background: rgba(245,166,35,.07); border-left-color: var(--warn); border-top-color: rgba(245,166,35,.15); border-right-color: rgba(245,166,35,.15); border-bottom-color: rgba(245,166,35,.15); color: #fde68a; } .alert-info { background: rgba(77,184,255,.07); border-left-color: var(--info); border-top-color: rgba(77,184,255,.15); border-right-color: rgba(77,184,255,.15); border-bottom-color: rgba(77,184,255,.15); color: #bfdbfe; } .alert-danger { background: rgba(240,80,110,.07); border-left-color: var(--danger); border-top-color: rgba(240,80,110,.15); border-right-color: rgba(240,80,110,.15); border-bottom-color: rgba(240,80,110,.15); color: #fca5a5; } .alert-success{ background: rgba(45,224,138,.07); border-left-color: var(--success); border-top-color: rgba(45,224,138,.15); border-right-color: rgba(45,224,138,.15); border-bottom-color: rgba(45,224,138,.15); color: #6ee7b7; } /* --- PAGE SHELL ------------------------------------------- */ .page-shell { padding-top: 0; min-height: 100vh; display: flex; flex-direction: column; } .page-content { flex: 1; padding: 28px 32px; overflow-y: auto; } .page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; } .page-title { font-size: 22px; font-weight: 800; letter-spacing: -.025em; } .page-subtitle { font-size: 13px; color: var(--sub); margin-top: 3px; } /* --- GRID HELPERS ----------------------------------------- */ .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; } /* --- EMPTY STATE ------------------------------------------ */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 60px 20px; text-align: center; } .empty-icon { font-size: 36px; opacity: .2; } .empty-title { font-size: 15px; font-weight: 600; color: var(--sub); } .empty-sub { font-size: 13px; color: var(--muted); max-width: 320px; } /* --- LOADING SKELETON ------------------------------------- */ @keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } } .skeleton { background: var(--faint); border-radius: var(--radius-sm); overflow: hidden; position: relative; } .skeleton::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(240,62,109,.04) 40%, rgba(139,124,248,.05) 60%, transparent 100% ); animation: shimmer 1.6s infinite; } /* --- SCROLL AREA ------------------------------------------ */ .scroll-area { overflow-y: auto; overflow-x: hidden; } /* --- DIVIDER ---------------------------------------------- */ .divider { border: none; border-top: 1px solid var(--border); margin: 16px 0; } /* --- TOGGLE SWITCH ---------------------------------------- */ .toggle-wrap { display: flex; align-items: center; gap: 10px; } .toggle { position: relative; width: 38px; height: 22px; flex-shrink: 0; } .toggle input { opacity: 0; width: 0; height: 0; } .toggle-track { position: absolute; inset: 0; background: var(--faint); border-radius: 11px; border: 1px solid var(--border2); transition: all .2s; cursor: pointer; } .toggle input:checked + .toggle-track { background: var(--rose); border-color: var(--rose); box-shadow: 0 0 12px rgba(240,62,109,.3); } .toggle-track::after { content: ''; position: absolute; width: 16px; height: 16px; left: 2px; top: 2px; background: #fff; border-radius: 50%; transition: transform .2s; box-shadow: 0 1px 4px rgba(0,0,0,.4); } .toggle input:checked + .toggle-track::after { transform: translateX(16px); } /* --- MODAL ------------------------------------------------- */ .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.75); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 500; opacity: 0; pointer-events: none; transition: opacity .2s; } .modal-backdrop.open { opacity: 1; pointer-events: auto; } .modal { background: var(--card); border: 1px solid var(--border2); border-radius: var(--radius-lg); box-shadow: var(--shadow), 0 0 0 1px rgba(240,62,109,.06); width: 560px; max-width: 92vw; max-height: 85vh; display: flex; flex-direction: column; overflow: hidden; transform: scale(.96) translateY(10px); transition: transform .2s cubic-bezier(.34,1.4,.64,1); } .modal-backdrop.open .modal { transform: scale(1) translateY(0); } .modal-header { padding: 18px 22px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; background: linear-gradient(to bottom, rgba(240,62,109,.04), transparent); } .modal-title { font-size: 15px; font-weight: 700; } .modal-close { width: 28px; height: 28px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 18px; transition: all .15s; } .modal-close:hover { color: var(--text); background: var(--raised); } .modal-body { padding: 20px 22px; overflow-y: auto; flex: 1; } .modal-footer { padding: 14px 22px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: flex-end; gap: 10px; } /* --- AVATAR ----------------------------------------------- */ .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--brand-grad); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0; box-shadow: 0 2px 8px rgba(240,62,109,.3); } .avatar-sm { width: 26px; height: 26px; font-size: 10px; } .avatar-lg { width: 44px; height: 44px; font-size: 16px; } /* --- TOAST ------------------------------------------------- */ #toast-container { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 9999; pointer-events: none; } .toast { padding: 12px 16px; background: var(--overlay); border: 1px solid var(--border2); border-left: 3px solid var(--rose); border-radius: var(--radius); font-size: 13px; color: var(--text); box-shadow: var(--shadow); min-width: 220px; max-width: 340px; animation: toast-in .25s cubic-bezier(.34,1.4,.64,1); pointer-events: auto; } .toast.success { border-left-color: var(--success); } .toast.error { border-left-color: var(--danger); } .toast.warn { border-left-color: var(--warn); } @keyframes toast-in { from { opacity: 0; transform: translateX(24px) scale(.96); } to { opacity: 1; transform: translateX(0) scale(1); } } /* --- UTILITY ---------------------------------------------- */ .flex { display: flex; } .flex-col { display: flex; flex-direction: column; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .w-full { width: 100%; } .h-full { height: 100%; } .flex-1 { flex: 1; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .no-select { user-select: none; } .pointer { cursor: pointer; } .rounded { border-radius: var(--radius); } .rounded-sm { border-radius: var(--radius-sm); } .rounded-full { border-radius: 9999px; } /* ── Vault filter pills ───────────────────────────────────── */ .vault-pill { background: var(--card); border: 1px solid var(--border); color: var(--muted); border-radius: 20px; padding: 3px 10px; font-size: 11px; cursor: pointer; transition: all .15s; white-space: nowrap; } .vault-pill:hover { color: var(--text); border-color: rgba(240,62,109,.35); } .vault-pill.active { background: var(--rose-soft); border-color: rgba(240,62,109,.4); color: var(--rose); font-weight: 600; } /* ── Copilot suggestion chips ─────────────────────────────── */ .suggestion-chip { background: rgba(139,124,248,.08); border: 1px solid rgba(139,124,248,.2); color: var(--text); border-radius: var(--radius-sm); padding: 7px 12px; font-size: 12px; cursor: pointer; transition: all .15s; text-align: left; line-height: 1.4; } .suggestion-chip:hover { background: rgba(139,124,248,.16); border-color: rgba(139,124,248,.35); box-shadow: 0 2px 12px rgba(139,124,248,.15); } .suggestion-chip.best { border-color: rgba(240,62,109,.3); background: rgba(240,62,109,.07); } .suggestion-chip.best:hover { background: rgba(240,62,109,.13); } /* ── Score bar on suggestion chips ───────────────────────── */ .chip-score-bar { height: 2px; border-radius: 1px; background: var(--brand-grad); margin-top: 6px; transition: width .3s ease; } /* ── Date / datetime-local picker icon ─────────────────────────────────────── The native calendar icon is dark by default — invisible on dark backgrounds. Force it light so it's visible and clickable. */ input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"] { /* Ensure the picker icon area remains visible and clickable */ color-scheme: dark; cursor: text; } input[type="date"]::-webkit-calendar-picker-indicator, input[type="datetime-local"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator, input[type="month"]::-webkit-calendar-picker-indicator, input[type="week"]::-webkit-calendar-picker-indicator { /* Make the icon visible on dark backgrounds */ filter: invert(1) opacity(0.55); cursor: pointer; border-radius: 3px; padding: 2px 3px; margin-left: 4px; transition: filter .15s, opacity .15s; } input[type="date"]::-webkit-calendar-picker-indicator:hover, input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover, input[type="time"]::-webkit-calendar-picker-indicator:hover, input[type="month"]::-webkit-calendar-picker-indicator:hover, input[type="week"]::-webkit-calendar-picker-indicator:hover { filter: invert(1) opacity(1); background: rgba(255,255,255,.08); } /* ══════════════════════════════════════════════════════════════════════════ MOBILE / iOS ADAPTATION (2026-07-07) All rules gated @media (max-width:768px) so desktop layout — where the real work is done — is byte-for-byte unchanged. Goal: the sales team sees the HIGHLIGHTS legibly on a phone (KPIs stack, wide tables scroll instead of overflowing the viewport, tap targets grow). The nav shell already reflows to a hamburger drawer at this breakpoint (see nav.js). ══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* KPI / stat grids: collapse to 2-up on phones so big revenue numbers stay readable. ENUMERATED, not blanket — a broad [style*=repeat] selector also catches the emoji picker (repeat(10)) and thumbnail grids and would crush them into a 2-wide strip. Target the actual stat containers by id/class, plus the auto-fit/auto-fill KPI grids (always stat rows), and explicitly exclude the emoji picker. (2026-07-07) */ #top-kpis, #sess-kpis, #rules-kpis, .kpi-grid, .stat-grid, .intel-grid, [style*="repeat(auto-fit"], [style*="repeat(auto-fill"] { grid-template-columns: 1fr 1fr !important; gap: 10px !important; } /* Fan detail expand (3-col field layout) reads better fully stacked */ .fan-expand { grid-template-columns: 1fr !important; } /* Emoji picker stays wide — never let the stat-grid rule touch it */ #emoji-picker-grid { grid-template-columns: repeat(8, 1fr) !important; } .kpi-card { padding: 13px 14px !important; } .kpi-value, .kpi-val { font-size: 22px !important; line-height: 1.1 !important; } .kpi-label, .kpi-lbl { font-size: 9.5px !important; } .kpi-sub { font-size: 10px !important; } /* Wide data tables: never let them blow out the viewport. Wrap scrolls horizontally with momentum; the table keeps a sane min-width so columns don't crush into each other, and a subtle edge fade hints "scroll me". */ .table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; max-width: 100%; border-radius: 12px; } .table-wrap table, .data-table, .fan-table, .members-table, .shift-table { min-width: 540px; /* below this columns collide; above, wrap scrolls */ } .table-wrap table th, .table-wrap table td { white-space: nowrap; font-size: 12px !important; padding: 8px 10px !important; } /* Two-column dashboard splits (main + right rail) stack on phone */ .dash-grid { grid-template-columns: 1fr !important; } /* Generic content padding trim so cards use the full narrow width */ .page, .content, main, .container { padding-left: 12px !important; padding-right: 12px !important; } /* Grow tap targets — 44px is Apple's HIG minimum */ .btn, button, .nav-pill, .period-pills button, .aria-nav-item { min-height: 40px; } .period-pills button { padding: 8px 14px !important; } /* Headings scale down so they don't wrap awkwardly */ h1 { font-size: 22px !important; } h2 { font-size: 18px !important; } } /* Extra-small phones (iPhone SE / mini, ≤380px): KPIs go single-column so the revenue figures never truncate. */ @media (max-width: 380px) { #top-kpis, #sess-kpis, #rules-kpis, .kpi-grid, .stat-grid, .intel-grid, [style*="repeat(auto-fit"], [style*="repeat(auto-fill"] { grid-template-columns: 1fr !important; } }