:root { --bg: #F7F4EB; --panel: #FFFFFF; --panel-2: #FBF9F1; --yellow: #FCE000; --yellow-d: #F0CE00; /* Theme-stable anchors: the brand yellow never changes between light/dark, so text sitting on it (--on-yellow) and the "dark chip" surfaces that carry fixed light text (--ink-fixed) must also stay constant. Using the theme-flipping --ink for these made yellow-on-ink and light-on-yellow invert and vanish in dark mode. These are intentionally NOT overridden below. */ --ink-fixed: #17160F; --on-yellow: #17160F; --ink: #17160F; --ink-2: #2A2820; --muted: #8A8881; --muted-2: #B5B2A8; --line: #E8E3D6; --line-2: #DBD5C2; --hover: #F1EDDF; --green: #1B9F4B; --red: #E04D4D; --blue: #3B82F6; --purple: #8B5CF6; --orange: #F59E0B; --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --shadow-sm: 0 1px 3px rgba(23,22,15,0.04); --shadow-md: 0 8px 24px rgba(23,22,15,0.07); --shadow-lg: 0 24px 60px rgba(23,22,15,0.14); --shadow-hover: 0 10px 30px rgba(23,22,15,0.09); --t-fast: cubic-bezier(.2,.7,.3,1); --gradient-yellow: linear-gradient(135deg, #FCE000 0%, #F0CE00 100%); --gradient-dark: linear-gradient(180deg, #23211A 0%, #17160F 100%); } /* Dark tokens live in a reusable block. Three states: - no [data-theme] → follow the OS (media query below) - [data-theme="dark"] → forced dark (wins over a light OS) - [data-theme="light"] → forced light (excluded from the media query) The theme toggle (.theme-toggle) sets data-theme on . */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #17160F; --panel: #201E16; --panel-2: #26241B; --ink: #F0EDE4; --ink-2: #D4D0C8; --muted: #8A8780; --muted-2: #5A5850; --line: #2C2A20; --line-2: #383528; --hover: #2C2A20; --shadow-sm: 0 2px 8px rgba(0,0,0,0.24); --shadow-md: 0 8px 24px rgba(0,0,0,0.32); --shadow-lg: 0 24px 60px rgba(0,0,0,0.48); --shadow-hover: 0 12px 40px rgba(0,0,0,0.40); } } :root[data-theme="dark"] { --bg: #17160F; --panel: #201E16; --panel-2: #26241B; --ink: #F0EDE4; --ink-2: #D4D0C8; --muted: #8A8780; --muted-2: #5A5850; --line: #2C2A20; --line-2: #383528; --hover: #2C2A20; --shadow-sm: 0 2px 8px rgba(0,0,0,0.24); --shadow-md: 0 8px 24px rgba(0,0,0,0.32); --shadow-lg: 0 24px 60px rgba(0,0,0,0.48); --shadow-hover: 0 12px 40px rgba(0,0,0,0.40); } * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { height: 100%; } body { font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg); color: var(--ink); font-size: 13px; line-height: 1.4; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Never let the page scroll sideways — keeps fixed overlays (the lead drawer) locked to the viewport in the Telegram fullscreen webview. */ overflow-x: hidden; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; } button { border: 0; background: 0; cursor: pointer; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: var(--muted-2); } /* ===== Telegram Mini App safe areas ===== In fullscreen mode the Mini App covers the whole screen, including behind the status bar and Telegram's close/menu controls. These vars are populated from the SDK (safeAreaChanged / contentSafeAreaChanged / fullscreenChanged) by initTelegramWebApp(); env() is the browser fallback. Consumed by .topbar (top) and the mobile bottom nav. */ :root { --tg-safe-top: env(safe-area-inset-top, 0px); --tg-safe-bottom: env(safe-area-inset-bottom, 0px); } /* ===== Layout ===== */ .layout { display: grid; grid-template-columns: 56px 1fr; min-height: 100vh; } /* ===== Sidebar ===== */ .sidebar { background: #17160F; border-right: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; align-items: center; padding: 16px 0; position: sticky; top: 0; height: 100vh; z-index: 10; } .sidebar-logo { width: 36px; height: 36px; background: var(--yellow); border-radius: 12px; display: grid; place-items: center; font-weight: 900; font-size: 15px; color: #17160F; margin-bottom: 24px; box-shadow: 0 4px 14px rgba(252,224,0,.35); } .sidebar-logo { cursor: pointer; } .sidebar-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; align-items: center; } .side-item { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: rgba(255,255,255,.45); transition: background .2s, color .2s; cursor: pointer; position: relative; flex: 0 0 40px; } .side-item:hover { background: rgba(255,255,255,.08); color: #fff; } .side-item.active { background: var(--yellow); color: #17160F; } .side-item svg { width: 20px; height: 20px; } .side-item .tip { position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%) translateX(-6px); background: var(--ink-fixed); color: #fff; font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 99; } .side-item:hover .tip { opacity: 1; transform: translateY(-50%) translateX(0); } .sidebar-bottom { display: flex; flex-direction: column; gap: 4px; align-items: center; } /* ===== Main ===== */ .main { display: flex; flex-direction: column; min-width: 0; overflow-x: hidden; } /* ===== Top bar ===== */ .topbar { background: var(--panel); border-bottom: 1px solid var(--line); padding: calc(14px + var(--tg-safe-top)) 24px 14px; display: flex; align-items: center; gap: 16px; position: sticky; top: 0; z-index: 9; } .page-title { font-size: 21px; font-weight: 800; letter-spacing: -0.03em; text-transform: lowercase; } .topbar-actions { display: flex; gap: 8px; align-items: center; margin-left: 8px; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; font-weight: 700; font-size: 13px; transition: background .2s, color .2s, transform .15s, box-shadow .2s; white-space: nowrap; cursor: pointer; } .btn svg { width: 16px; height: 16px; } .btn-ghost { color: var(--ink); background: transparent; } .btn-ghost:hover { background: var(--hover); } .btn-primary { background: var(--yellow); color: var(--on-yellow); } .btn-primary:hover { background: var(--yellow-d); } .btn-dark { background: var(--ink-fixed); color: #fff; } .btn-dark:hover { background: #000; } .btn-outline { background: transparent; border: 1px solid var(--line-2); color: var(--ink); } .btn-outline:hover { background: var(--hover); border-color: var(--muted-2); } .tabs { display: flex; gap: 4px; margin-left: auto; margin-right: auto; background: var(--panel-2); padding: 4px; border-radius: 999px; } .tab { padding: 7px 16px; border-radius: 999px; font-weight: 700; font-size: 13px; color: var(--muted); cursor: pointer; transition: background .2s, color .2s; } .tab:hover { color: var(--ink); } .tab.active { background: var(--ink-fixed); color: var(--yellow); box-shadow: inset 0 0 0 1px rgba(252,224,0,.35), var(--shadow-sm); } .topbar-right { display: flex; align-items: center; gap: 10px; margin-left: auto; } /* Theme toggle (injected into every .topbar-right by admin.js). The sun/moon icon is chosen purely in CSS from the effective theme, so it also stays correct when following the OS. */ .theme-toggle { width: 36px; height: 36px; flex: 0 0 36px; display: inline-grid; place-items: center; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); color: var(--ink); cursor: pointer; transition: background .2s ease, border-color .2s ease, transform .15s ease; } .theme-toggle:hover { background: var(--hover); transform: translateY(-1px); } .theme-toggle svg { width: 18px; height: 18px; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } /* Effective dark → show the sun (tap goes to light). Covers both the forced-dark attribute and the follow-the-OS (no forced light) case. */ :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; } :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; } } .user-chip { display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; background: var(--bg); border-radius: 999px; cursor: pointer; transition: background .2s; } .user-chip:hover { background: var(--line); } .user-ava { width: 28px; height: 28px; border-radius: 50%; background: var(--yellow); color: var(--on-yellow); display: grid; place-items: center; font-weight: 800; font-size: 12px; position: relative; } .user-ava .badge { position: absolute; top: -2px; right: -2px; width: 10px; height: 10px; background: var(--red); border: 2px solid var(--bg); border-radius: 50%; display: none; } .user-ava.has-unseen .badge { display: block; } .user-name { font-weight: 700; font-size: 13px; } /* ===== Filter bar ===== */ .filterbar { background: var(--panel); border-bottom: 1px solid var(--line); padding: 12px 24px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* Recruiters' Telegram channel promo banner (Leads page, dismissible) */ .channel-banner { display: flex; align-items: center; gap: 10px; padding: 10px 24px; background: var(--panel-2); border-bottom: 1px solid var(--line); font-size: 14px; } .channel-banner[hidden] { display: none; } .channel-banner svg { flex-shrink: 0; } .channel-banner-text { flex: 1 1 auto; min-width: 0; } .channel-banner-join { flex-shrink: 0; } .channel-banner-close { flex-shrink: 0; background: transparent; border: 0; cursor: pointer; font-size: 14px; line-height: 1; padding: 6px; color: inherit; opacity: .6; } .channel-banner-close:hover { opacity: 1; } @media (max-width: 900px) { .channel-banner { padding: 10px 16px; flex-wrap: wrap; } .channel-banner-text { flex-basis: 100%; } } .filter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border: 1px solid var(--line-2); border-radius: 999px; font-weight: 600; font-size: 12px; color: var(--ink); background: var(--panel); cursor: pointer; transition: background .2s, border-color .2s; } .filter-chip:hover { background: var(--hover); border-color: var(--muted-2); } .filter-chip .caret { width: 10px; height: 10px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg) translate(-1px,-1px); } .filter-chip.add { color: var(--muted); border-style: dashed; } .filter-chip.add:hover { color: var(--ink); } .filter-spacer { flex: 1; } /* ===== Stats summary ===== */ .stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; padding: 16px; } .stats-header { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .stats-header h3 { font-size: 16px; font-weight: 700; margin: 0; } .stats-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 0 16px 16px; } .section-pad { padding: 20px; } .section-shell { display: grid; gap: 16px; margin: 0 auto; max-width: 1120px; } .profile-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, .95fr) minmax(340px, 1.05fr); } .profile-hero { background: var(--panel); border-color: var(--line-2); display: flex; flex-direction: column; gap: 16px; align-self: start; } .profile-hero-main { align-items: center; display: flex; gap: 14px; } .profile-avatar-large { background: var(--yellow); border: 1px solid var(--yellow-d); border-radius: 16px; color: var(--on-yellow); display: grid; flex: 0 0 56px; font-size: 21px; font-weight: 900; height: 56px; place-items: center; width: 56px; } .profile-title { color: var(--ink); font-size: 20px; font-weight: 900; line-height: 1.15; overflow-wrap: anywhere; } .profile-subtitle { color: var(--muted); font-size: 13px; margin-top: 4px; } .profile-meta-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .profile-meta { align-items: center; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; display: flex; gap: 12px; justify-content: space-between; min-width: 0; padding: 12px; } .profile-meta-label { color: var(--muted); font-size: 11px; font-weight: 900; text-transform: uppercase; } .profile-meta-value { color: var(--ink); font-size: 14px; font-weight: 800; min-width: 0; overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; } .profile-stack { display: grid; gap: 16px; } .profile-status-strip { background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; } .profile-status-item { min-width: 0; } .profile-status-label { color: var(--muted); font-size: 10px; font-weight: 900; text-transform: uppercase; } .profile-status-value { color: var(--ink); font-size: 14px; font-weight: 900; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .payment-card { border-color: var(--line-2); } .payment-hint { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; color: var(--muted); font-size: 12px; line-height: 1.45; margin-bottom: 14px; padding: 12px; } .profile-form-grid { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; } .profile-actions { align-items: center; display: flex; gap: 10px; justify-content: space-between; margin-top: 12px; } .onboarding-card { border-color: var(--line-2); } .onboarding-card-body { display: grid; gap: 12px; } .onboarding-card-copy { color: var(--muted); font-size: 12px; line-height: 1.45; } .onboarding-card-actions { display: flex; justify-content: flex-end; } .profile-save-status { color: var(--muted); font-size: 12px; font-weight: 700; } .payout-survey-card { background: var(--panel); border-color: var(--line-2); } .payout-survey-list { display: grid; gap: 10px; } .payout-survey-item { align-items: start; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 3px; grid-template-columns: 22px minmax(0, 1fr); padding: 12px; } .payout-survey-icon { color: var(--green); display: grid; height: 22px; place-items: center; width: 22px; } .payout-survey-title { color: var(--ink); font-size: 13px; font-weight: 900; } .payout-survey-text { color: var(--muted); font-size: 12px; line-height: 1.35; } .stats-insight-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .8fr); padding: 0 16px 16px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .stats-chart-card canvas { display: block; height: 220px; width: 100%; } .stats-chart-legend { color: var(--muted); display: flex; flex-wrap: wrap; font-size: 12px; gap: 12px; margin-top: 10px; } .legend-dot { border-radius: 4px; display: inline-block; height: 10px; margin-right: 5px; vertical-align: middle; width: 10px; } .health-metric-list { display: grid; gap: 10px; } .health-metric { background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px; } .health-metric strong { display: block; font-size: 16px; font-weight: 900; margin-bottom: 4px; } .history-item { align-items: flex-start; } .history-content { background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; } .history-status-row { align-items: center; display: flex; gap: 8px; justify-content: space-between; } .history-order { background: var(--ink-fixed); border-radius: 999px; color: #fff; font-size: 10px; font-weight: 900; padding: 3px 7px; } .detail-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px; } .detail-card h4 { font-size: 14px; font-weight: 600; margin: 0 0 12px 0; } .detail-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .detail-count { font-size: 12px; color: var(--muted); background: var(--bg); padding: 4px 8px; border-radius: 6px; } .detail-list { display: flex; flex-direction: column; gap: 8px; } .detail-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); } .detail-item:last-child { border-bottom: none; } .detail-item-name { font-size: 13px; color: var(--ink); } .detail-item-meta { color: var(--muted); font-size: 11px; line-height: 1.45; margin-top: 4px; } .detail-item-value { font-size: 13px; font-weight: 600; color: var(--ink); } /* iOS-style switch toggle (Settings) */ .switch { position: relative; display: inline-flex; width: 40px; height: 24px; flex: 0 0 auto; cursor: pointer; } .switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .switch-track { position: absolute; inset: 0; background: var(--line-2); border-radius: 999px; transition: background .2s ease; } .switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s ease; } .switch input:checked + .switch-track { background: var(--yellow-d); } .switch input:checked + .switch-track::after { transform: translateX(16px); } .switch input:disabled { cursor: not-allowed; } .switch input:disabled + .switch-track { opacity: .5; } .switch input:focus-visible + .switch-track { outline: 2px solid var(--yellow-d); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .switch-track, .switch-track::after { transition: none; } } .detail-bar { height: 4px; background: var(--line-2); border-radius: 2px; margin-top: 4px; overflow: hidden; } .detail-bar-fill { height: 100%; background: var(--yellow); border-radius: 2px; transition: width 0.3s; } .payouts-list { display: grid; gap: 10px; } /* Payout hero: the single "how much will I get" answer */ .payout-hero { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); display: grid; gap: 18px; grid-template-columns: 1.2fr 1fr; margin: 0 16px 14px; overflow: hidden; padding: 0; } .payout-hero-main { background: var(--yellow); color: var(--on-yellow); display: grid; align-content: center; gap: 4px; padding: 22px 24px; } .payout-hero-label { font-size: 11px; font-weight: 900; letter-spacing: .06em; opacity: .75; text-transform: uppercase; } .payout-hero-value { font-size: 34px; font-weight: 900; line-height: 1.05; } .payout-hero-value::after { content: ' к выплате'; font-size: 14px; font-weight: 800; opacity: .7; } .payout-hero-sub { font-size: 12px; font-weight: 700; opacity: .8; } .payout-hero-side { align-content: center; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); padding: 16px 20px 16px 0; } .payout-hero-stat { display: grid; gap: 1px; } .payout-hero-stat-label { color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; } .payout-hero-stat b { font-size: 16px; font-weight: 900; } .payout-hero-stat-note { color: var(--muted); font-size: 11px; } /* Payout tabs: one zone instead of stacked card piles */ .payout-tabs { display: flex; gap: 6px; margin: 0 16px 12px; } .payout-tab { background: var(--panel); border: 1px solid var(--line); border-radius: 999px; color: var(--muted); cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 800; padding: 8px 16px; } .payout-tab.active { background: var(--ink-fixed); border-color: var(--ink-fixed); color: var(--yellow); } .payout-pane { margin: 0 16px 16px; } .payout-pane .detail-card { margin: 0; } .payout-row { align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 12px; grid-template-columns: minmax(220px, 1fr) repeat(4, minmax(90px, auto)); padding: 14px 16px; } .payout-row-own { grid-template-columns: minmax(200px, 1fr) repeat(2, minmax(120px, auto)); } .payout-card-chip { background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; display: inline-flex; font-size: 11px; font-weight: 800; gap: 6px; margin-top: 6px; max-width: 100%; overflow: hidden; padding: 5px 9px; text-overflow: ellipsis; white-space: nowrap; } .payout-row:hover { border-color: var(--yellow); background: var(--panel-2); box-shadow: var(--shadow-sm); } .payout-person { min-width: 0; } .payout-person-name { font-size: 14px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .payout-person-meta { color: var(--muted); font-size: 12px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .payout-cell { text-align: right; } .payout-cell-label { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 2px; } .payout-cell-value { font-size: 14px; font-weight: 800; margin-top: 2px; white-space: nowrap; } .payout-cell-value.money { color: var(--green); } .payout-muted { color: var(--muted); } .payout-badge { background: var(--bg); border: 1px solid var(--line); border-radius: 999px; color: var(--muted); display: inline-flex; font-size: 11px; font-weight: 700; padding: 4px 8px; white-space: nowrap; } .payout-accrual { align-items: center; border-bottom: 1px solid var(--line); display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) auto; padding: 10px 0; } .payout-accrual:last-child { border-bottom: 0; } .payout-accrual-name { font-size: 13px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .payout-accrual-meta { color: var(--muted); font-size: 12px; margin-top: 2px; } .payout-note { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; color: var(--muted); font-size: 12px; line-height: 1.45; margin-top: 12px; padding: 12px; } /* Funnel hero: one vertical funnel with bars sized by stage share. */ .funnel-hero { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); margin: 0 16px 16px; padding: 18px; } .funnel-hero-head { align-items: baseline; display: flex; gap: 12px; justify-content: space-between; margin-bottom: 14px; } .funnel-hero-head h3 { font-size: 15px; font-weight: 900; margin: 0; } .funnel-flow { display: grid; gap: 6px; } .fstage { align-items: center; display: grid; gap: 12px; grid-template-columns: minmax(120px, 180px) 1fr; } .fstage-info { display: grid; gap: 2px; } .fstage-label { font-size: 12px; font-weight: 900; letter-spacing: .03em; text-transform: uppercase; } .fstage-note { color: var(--muted); font-size: 11px; } .fstage-track { background: var(--panel-2); border-radius: 10px; min-height: 40px; overflow: hidden; } .fstage-bar { align-items: center; background: var(--yellow); border-radius: 10px; color: var(--on-yellow); display: flex; min-height: 40px; min-width: 64px; padding: 0 14px; transition: width .5s ease; width: 100%; } .fstage-bar.is-active { background: var(--yellow-d); } .fstage-bar.is-money { background: var(--ink-fixed); color: var(--yellow); } .fstage-value { font-size: 19px; font-weight: 900; white-space: nowrap; } .fstage-conv { color: var(--muted); font-size: 12px; font-weight: 800; margin-left: calc(min(180px, max(120px, 24%)) + 12px); padding-left: 14px; position: relative; } .fstage-conv::before { content: '↓'; left: 0; position: absolute; } .fstage-conv.is-money { color: var(--green); } .funnel-insight { background: var(--panel-2); border: 1px dashed var(--line-2); border-radius: 10px; color: var(--ink-2); font-size: 13px; font-weight: 700; margin-top: 14px; padding: 10px 14px; } /* Compact source table: clicks→leads→active path in one cell */ .funnel-path { align-items: baseline; display: inline-flex; gap: 6px; } .funnel-path-num { font-weight: 800; } .funnel-path-num.is-strong { color: var(--green); font-weight: 900; } .funnel-path-sep { color: var(--muted-2); } .funnel-path-legend { color: var(--muted); font-size: 11px; margin-top: 2px; } .funnel-rates-cell { display: inline-flex; gap: 6px; } .money-strong { font-weight: 900; white-space: nowrap; } .funnel-compact-stats .stat-icon { border-radius: 12px; height: 42px; width: 42px; } .funnel-compact-stats .stat-icon svg { height: 20px; width: 20px; } /* Recruiter management: summary bar + guarded danger actions */ .recruiter-summary { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); padding: 14px 16px; text-align: center; } .recruiter-sum-cell { display: grid; gap: 2px; } .recruiter-sum-cell b { font-size: 20px; font-weight: 900; } .recruiter-sum-cell span { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; } .danger-fold summary { color: var(--muted); cursor: pointer; font-size: 11px; font-weight: 700; list-style: none; padding: 4px 0; } .danger-fold summary::-webkit-details-marker { display: none; } .danger-fold summary::before { content: '⚠ '; } .danger-fold summary:hover { color: var(--red); } .danger-fold-body { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } /* Expandable details row in the recruiters table */ .rec-details-row > td { background: var(--panel-2); } .rec-details-body { display: grid; gap: 8px; padding: 4px 2px; } .rec-row-actions { display: flex; gap: 4px; white-space: nowrap; } .rec-main-table td { vertical-align: middle; } .leaderboard-shell, .recruiter-mgmt-shell { display: grid; gap: 12px; margin: 0 auto; max-width: 1040px; } .creatives-shell { display: grid; gap: 16px; padding: 20px; } .creatives-intro, .creative-card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-sm); } .creatives-intro { padding: 18px 20px; } .creatives-intro h3, .creative-card h3 { font-size: 18px; margin-bottom: 6px; } .creatives-intro p, .creative-card p { color: var(--muted); font-size: 14px; line-height: 1.6; } .creatives-intro p { max-width: 780px; } .creatives-grid { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .creative-card { display: grid; gap: 14px; padding: 18px; } .creative-card-icon { align-items: center; background: var(--yellow); border-radius: 14px; color: var(--on-yellow); display: inline-flex; height: 44px; justify-content: center; width: 44px; } .creative-card-icon svg { height: 22px; width: 22px; } .creative-card .btn { justify-self: start; } .leaderboard-row, .recruiter-row { align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; display: grid; gap: 14px; padding: 14px 16px; } .leaderboard-row { grid-template-columns: 52px minmax(0, 1fr) repeat(3, minmax(92px, auto)); } .leaderboard-row.top-rank { border-color: rgba(252,224,0,.7); box-shadow: 0 10px 28px rgba(252,224,0,.12); } .rank-badge { align-items: center; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; display: flex; font-size: 16px; font-weight: 900; height: 44px; justify-content: center; width: 44px; } .top-rank .rank-badge { background: var(--yellow); border-color: var(--yellow-d); color: var(--on-yellow); } .leaderboard-person, .recruiter-person { min-width: 0; } .leaderboard-name, .recruiter-name { font-size: 14px; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .leaderboard-meta, .recruiter-meta { color: var(--muted); font-size: 12px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .metric-pill { text-align: right; } .metric-pill-value { font-size: 16px; font-weight: 900; font-variant-numeric: tabular-nums; } .metric-pill-label { color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; } .recruiter-row { grid-template-columns: minmax(0, 1.2fr) repeat(4, minmax(74px, auto)) minmax(190px, auto); } .recruiter-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; } .status-pill { border-radius: 999px; display: inline-flex; font-size: 11px; font-weight: 900; padding: 5px 8px; } .status-pill.ok { background: rgba(27,159,75,.1); color: var(--green); } .status-pill.bad { background: rgba(224,77,77,.1); color: var(--red); } .funnel-toolbar { align-items: center; background: var(--panel); border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px; padding: 12px 24px; } .funnel-select { background: var(--panel); border: 1px solid var(--line-2); border-radius: 10px; cursor: pointer; outline: 0; padding: 8px 12px; } .funnel-table { min-width: 640px; } .funnel-source { min-width: 0; } .funnel-source-title { font-size: 13px; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .funnel-source-meta { color: var(--muted); font-size: 11px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .funnel-pill { background: var(--bg); border: 1px solid var(--line); border-radius: 999px; color: var(--muted); display: inline-flex; font-size: 11px; font-weight: 800; padding: 4px 8px; white-space: nowrap; } .funnel-rate { font-weight: 900; } .funnel-rate.good { color: var(--green); } .funnel-rate.warn { color: var(--orange); } .funnel-rate.low { color: var(--muted); } .rates-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 0 16px 16px; } .rates-section { display: grid; gap: 12px; } .rate-city-group { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; } .rate-city-head { align-items: center; background: var(--panel-2); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding: 12px 14px; } .rate-city-name { font-size: 16px; font-weight: 900; } .rate-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); padding: 12px; } .rate-table-head { display: none; } .rate-col-headers { display: grid; grid-template-columns: 1.35fr 1.45fr .65fr minmax(92px, .95fr) minmax(92px, .95fr) minmax(92px, .95fr); gap: 12px; padding: 0 14px 6px; margin-bottom: -4px; } .rate-col-label { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; display: flex; align-items: center; gap: 4px; } .rate-col-tip { position: relative; display: inline-flex; cursor: help; } .rate-col-tip svg { opacity: .5; flex-shrink: 0; } .rate-col-tip:hover svg { opacity: 1; } .rate-col-tip::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--bg); font-size: 12px; font-weight: 400; line-height: 1.4; white-space: pre-line; padding: 7px 10px; border-radius: 8px; width: 200px; text-align: left; pointer-events: none; opacity: 0; transition: opacity .15s; z-index: 99; text-transform: none; letter-spacing: 0; } .rate-col-tip:hover::after { opacity: 1; } .rate-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; display: grid; gap: 10px; grid-template-rows: auto auto auto; padding: 16px; } .rate-card-top { align-items: start; display: flex; gap: 12px; justify-content: space-between; } .rate-badges { display: flex; gap: 6px; margin-top: 6px; } .rate-badge { background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 10px; font-weight: 800; padding: 3px 8px; text-transform: uppercase; } .rate-hero { text-align: right; } .rate-hero-value { color: var(--ink); font-size: 21px; font-weight: 900; line-height: 1.1; white-space: nowrap; } .rate-hero-note { color: var(--muted); font-size: 11px; } .rate-formula { background: var(--panel-2); border-radius: 10px; color: var(--ink-2); font-size: 13px; font-weight: 700; padding: 9px 12px; } .rate-period { color: var(--muted); font-size: 12px; font-weight: 600; } .rate-card:hover { border-color: var(--yellow); box-shadow: var(--shadow-sm); transition: all 0.2s ease; } .rate-date-cell, .rate-number-cell, .rate-amount { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; } .rate-card.archived { opacity: .62; } .rate-main { min-width: 0; } .rate-courier { font-size: 15px; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rate-condition { color: var(--muted); font-size: 12px; margin-top: 4px; } .rate-date-cell { font-size: 13px; font-weight: 700; text-align: center; white-space: nowrap; } .rate-number-cell { font-size: 13px; font-weight: 800; text-align: center; white-space: nowrap; } .rate-amount { color: var(--green); font-size: 15px; font-weight: 900; text-align: center; white-space: nowrap; } .rate-mobile-label { color: var(--muted); display: block; font-size: 10px; font-weight: 900; letter-spacing: .02em; margin-bottom: 3px; text-transform: uppercase; } .rate-admin-grid { display: grid; gap: 8px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 10px; } .rate-admin-panel { grid-column: 1 / -1; } .rate-admin-panel[open] { border-top: 1px solid var(--line); margin-top: 2px; padding-top: 10px; } .rate-admin-panel summary { color: var(--muted); cursor: pointer; font-size: 12px; font-weight: 900; list-style: none; } .rate-admin-panel summary::-webkit-details-marker { display: none; } .rate-admin-panel summary::after { content: '+'; margin-left: 6px; } .rate-admin-grid label { color: var(--muted); display: grid; font-size: 11px; font-weight: 800; gap: 5px; text-transform: uppercase; } .rate-admin-grid input { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; font-size: 13px; min-width: 0; padding: 8px 9px; text-transform: none; } .rate-switches { align-items: end; display: flex; flex-wrap: wrap; gap: 10px; } .rate-switches label { align-items: center; display: inline-flex; gap: 6px; text-transform: none; } .rate-publish-preview { background: rgba(252, 224, 0, .18); border: 1px solid rgba(235, 205, 0, .45); border-radius: 10px; color: var(--ink); display: grid; gap: 4px; padding: 9px 10px; } .rate-publish-preview strong { font-size: 13px; font-weight: 900; } .rate-publish-preview span { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: none; } .rate-archive-title { color: var(--muted); font-size: 13px; font-weight: 900; margin: 16px 0 8px; } .rate-card.is-recruiter { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; gap: 20px; } .rate-card.is-recruiter .rate-main { flex: 1; } .rate-card.is-recruiter .rate-courier { font-size: 17px; margin-bottom: 4px; } .rate-card.is-recruiter .rate-amount { font-size: 24px; color: var(--on-yellow); background: var(--yellow); padding: 8px 16px; border-radius: 10px; box-shadow: 0 4px 12px rgba(252,224,0,0.2); } .rate-card.is-recruiter .rate-meta-grid { display: flex; gap: 16px; margin-top: 10px; } .rate-card.is-recruiter .rate-meta-item { display: flex; flex-direction: column; gap: 2px; } .rate-card.is-recruiter .rate-meta-label { font-size: 10px; font-weight: 800; color: var(--muted); text-transform: uppercase; } .rate-card.is-recruiter .rate-meta-value { font-size: 12px; font-weight: 600; } .calc-field { display: grid; gap: 6px; margin-bottom: 12px; } .calc-field label { color: var(--muted); font-size: 12px; font-weight: 800; } .calc-field input, .calc-field select { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; } .stat-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 20px; transition: transform .35s var(--t-fast), box-shadow .35s, border-color .25s; display: flex; align-items: flex-start; gap: 16px; position: relative; overflow: hidden; } .stat-card::before { content: ''; position: absolute; top: -50%; right: -20%; width: 200px; height: 200px; background: radial-gradient(circle, rgba(252,224,0,0.08) 0%, transparent 70%); pointer-events: none; opacity: 0; transition: opacity .5s var(--t-fast); } .stat-card:hover::before { opacity: 1; } .stat-icon { width: 52px; height: 52px; background: var(--bg); border-radius: 14px; display: flex; align-items: center; justify-content: center; color: var(--muted); flex-shrink: 0; transition: transform .5s var(--t-fast), box-shadow .3s; } .stat-card:hover .stat-icon { transform: scale(1.04); } .stat-card.accent .stat-icon { background: rgba(252, 224, 0, 0.15); color: var(--yellow); box-shadow: 0 6px 18px rgba(252,224,0,.25); } .stat-content { flex: 1; } .stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: var(--line-2); } .stat-label { font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; } .stat-value { font-size: 32px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; margin-bottom: 6px; font-variant-numeric: tabular-nums; } .stat-delta { font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; } .stat-delta.up { color: var(--green); } .stat-delta.down { color: var(--red); } .stat-delta.neutral { color: var(--muted); } .stat-card.accent { background: var(--gradient-dark); color: #fff; border-color: var(--ink); } .stat-card.accent .stat-label { color: rgba(255,255,255,.6); } .stat-card.accent .stat-value { color: var(--yellow); } .stat-card.accent::before { background: radial-gradient(circle, rgba(252,224,0,0.15) 0%, transparent 70%); } /* ===== Table area ===== */ .table-wrap { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); margin: 24px; overflow: hidden; box-shadow: var(--shadow-sm); } .table-scroll { max-width: 100%; overflow-x: auto; width: 100%; } table.leads { width: 100%; border-collapse: collapse; min-width: 1100px; } table.leads th { background: var(--panel-2); color: var(--muted); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; position: sticky; top: 0; z-index: 2; } table.leads td { padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 13px; white-space: nowrap; vertical-align: middle; } table.leads tbody tr { transition: background .15s; } table.leads tbody tr[data-lead-id] { cursor: pointer; } table.leads tbody tr.lead-deadline-expired { opacity: 0.45; filter: grayscale(0.6); } table.leads tbody tr:hover { background: var(--hover); } table.leads tbody tr:last-child td { border-bottom: 0; } .mobile-lead-summary { display: none; } .lead-mobile-card { display: grid; gap: 9px; min-width: 0; } .lead-mobile-top { align-items: flex-start; display: flex; gap: 10px; justify-content: space-between; min-width: 0; } .lead-mobile-main { min-width: 0; } .lead-mobile-name { align-items: center; display: flex; font-size: 14px; font-weight: 900; gap: 6px; line-height: 1.25; min-width: 0; } .lead-mobile-name .lmn-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lead-mobile-meta { color: var(--muted); display: flex; flex-wrap: wrap; font-size: 12px; font-weight: 700; gap: 4px 8px; margin-top: 4px; } .lead-mobile-reg { display: inline-flex; align-items: center; gap: 4px; } .lead-mobile-reg svg { width: 12px; height: 12px; flex-shrink: 0; } .lead-mobile-footer { align-items: center; border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: space-between; padding-top: 9px; } .lead-mobile-metric { color: var(--muted); font-size: 12px; font-weight: 800; } .lead-mobile-money { color: var(--ink); font-size: 13px; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; } .lead-mobile-flags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; } .lead-mobile-action { color: var(--muted); font-size: 11px; font-weight: 800; white-space: nowrap; } /* Order-progress checkpoints at the bottom of the mobile lead card. 6 equal columns → node centers at 8.33/25/41.67/58.33/75/91.67%, so the track (inset 8.333% each side) runs exactly between first and last node. */ .lead-cp { position: relative; margin-top: 11px; padding-top: 12px; border-top: 1px solid var(--line); } .lead-cp-track { position: absolute; top: 18px; left: 8.333%; right: 8.333%; height: 3px; border-radius: 2px; background: var(--line-2); overflow: hidden; } .lead-cp-fill { position: absolute; top: 0; bottom: 0; left: 0; background: var(--green); border-radius: 2px; } .lead-cp-steps { display: grid; grid-template-columns: repeat(6, 1fr); position: relative; } .lead-cp-step { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 2px; } .lead-cp-node { width: 12px; height: 12px; border-radius: 50%; box-sizing: border-box; background: var(--panel); border: 2px solid var(--line-2); } .lead-cp-node.is-reached { background: var(--green); border-color: var(--green); } .lead-cp-node.is-current { box-shadow: 0 0 0 3px rgba(27,159,75,.22); } .lead-cp-label { font-size: 9px; font-weight: 700; color: var(--muted); text-align: center; line-height: 1.15; } .lead-cp-label.is-reached { color: var(--ink); } .lead-cp-label i { display: block; font-style: normal; font-size: 9px; font-weight: 700; color: var(--muted); } .status { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; } .status .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .status.s-created .dot { background: var(--yellow); } .status.s-invited .dot { background: var(--blue); } .status.s-active .dot { background: var(--green); } .status.s-rejected .dot { background: var(--muted-2); } .status.s-pending .dot { background: var(--orange); } .cell-muted { color: var(--muted); } /* Numeric columns line up on the right so digits of different lengths (0 vs 162 000) don't look ragged. Header matches via th.th-num. */ .cell-num { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; } table.leads th.th-num { text-align: right; } .cell-name { font-weight: 600; } .cell-flag { align-items: center; background: rgba(59,130,246,.08); border: 1px solid rgba(59,130,246,.18); border-radius: 999px; color: var(--blue); display: inline-flex; font-size: 11px; font-weight: 800; gap: 6px; margin-left: 6px; padding: 3px 7px; vertical-align: middle; } .cell-flag.warn { background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.22); color: #B46900; } /* Car chip marking an auto courier in the leads list (mobile + desktop). */ .lead-auto-badge { align-items: center; background: rgba(59,130,246,.1); border: 1px solid rgba(59,130,246,.22); border-radius: 999px; color: var(--blue); display: inline-flex; flex-shrink: 0; height: 20px; justify-content: center; margin-left: 6px; vertical-align: middle; width: 20px; } .lead-auto-badge svg { display: block; } .table-loading { padding: 28px 18px; } .skeleton-line { background: linear-gradient(90deg, var(--panel-2), var(--hover), var(--panel-2)); background-size: 220% 100%; border-radius: 8px; height: 16px; margin: 9px 0; animation: skeletonMove 1.2s ease-in-out infinite; } @keyframes skeletonMove { from { background-position: 100% 0; } to { background-position: -100% 0; } } /* Leads loader — a rotating, morphing 2x2 dot ring shown while leads load. */ .leads-loader { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 48px 18px; color: var(--muted); font-size: 13px; font-weight: 600; } .dot-ring { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; width: 30px; height: 30px; animation: dotRingSpin 1.8s ease-in-out infinite; } .dot-ring > span { width: 100%; height: 100%; border-radius: 50%; background: var(--ink); } @keyframes dotRingSpin { 0% { transform: rotate(0deg); gap: 5px; } 50% { transform: rotate(180deg); gap: 1px; } 100% { transform: rotate(360deg); gap: 5px; } } @media (prefers-reduced-motion: reduce) { .dot-ring { animation-duration: 3.5s; } } .table-footer { padding: 16px; display: flex; justify-content: center; border-top: 1px solid var(--line); background: var(--panel-2); } .load-more { padding: 10px 24px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 999px; font-weight: 700; font-size: 13px; cursor: pointer; transition: background .2s, border-color .2s; } .load-more:hover { background: var(--hover); border-color: var(--muted); } /* ===== Empty state ===== */ .empty { padding: 64px 24px; text-align: center; color: var(--muted); } .empty-icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 16px; background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); } .empty-icon svg { width: 28px; height: 28px; } .empty h3 { font-size: 15px; color: var(--ink); margin-bottom: 8px; } .empty p { max-width: 340px; margin: 0 auto; line-height: 1.4; } .empty-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 9px 18px; border-radius: 999px; background: var(--yellow); color: var(--on-yellow); font-weight: 700; font-size: 13px; border: 1px solid var(--yellow-d); cursor: pointer; transition: background .2s, transform .15s; } .empty-cta:hover { background: var(--yellow-d); transform: translateY(-1px); } .empty-cta svg { width: 16px; height: 16px; } /* ===== Skeleton shimmer for KPI cards / funnel / payouts ===== */ .kpi-loading .kpi-value, .kpi-loading .kpi-value-sm, .kpi-loading .kpi-sub { color: transparent !important; border-radius: 8px; background: linear-gradient(90deg, var(--panel-2), var(--hover), var(--panel-2)); background-size: 220% 100%; animation: skeletonMove 1.2s ease-in-out infinite; min-width: 48px; user-select: none; } .kpi-loading .kpi-sub { min-width: 90px; } .funnel-flow.is-loading .fstage-value, .funnel-flow.is-loading .fstage-label { color: transparent !important; border-radius: 6px; background: linear-gradient(90deg, var(--panel-2), var(--hover), var(--panel-2)); background-size: 220% 100%; animation: skeletonMove 1.2s ease-in-out infinite; } .skeleton-rows { padding: 8px 4px; } .skeleton-rows .skeleton-line:nth-child(1) { width: 92%; } .skeleton-rows .skeleton-line:nth-child(2) { width: 78%; } .skeleton-rows .skeleton-line:nth-child(3) { width: 85%; } .skeleton-rows .skeleton-line:nth-child(4) { width: 64%; } /* ===== Modal ===== */ .modal-overlay { position: fixed; inset: 0; background: rgba(23,22,15,0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 100; display: none; align-items: center; justify-content: center; padding: 20px; animation: fadeIn .25s ease; overflow: hidden; } .modal-overlay.show { display: flex; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } } .modal { background: var(--panel); border-radius: 22px; border-top: 4px solid var(--yellow); padding: 32px; max-width: 560px; max-height: calc(100vh - 40px); overflow-y: auto; overscroll-behavior: contain; width: 100%; box-shadow: var(--shadow-lg); animation: slideUp .35s cubic-bezier(.2,.7,.3,1); position: relative; } .modal-close { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); cursor: pointer; transition: background .2s, color .2s; } .modal-close:hover { background: var(--hover); color: var(--ink); } .modal h2 { font-size: 23px; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 8px; line-height: 1.15; text-transform: lowercase; } .onboarding-modal { max-width: 640px; } .onboarding-progress { color: var(--muted); font-size: 12px; font-weight: 900; letter-spacing: .04em; margin-bottom: 8px; text-transform: uppercase; } .onboarding-progress-bar { height: 6px; background: var(--line); border-radius: 4px; overflow: hidden; margin-bottom: 16px; } .onboarding-progress-fill { height: 100%; background: var(--green, #1B9F4B); border-radius: 4px; transition: width .35s ease; } .onboarding-list { display: grid; gap: 10px; list-style: none; margin: 18px 0 0; padding: 0; } .onboarding-list li { background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; color: var(--ink); font-size: 13px; font-weight: 700; line-height: 1.45; padding: 12px 14px; } .onboarding-actions { align-items: center; display: flex; gap: 12px; justify-content: space-between; margin-top: 22px; } .onboarding-actions-group { display: flex; gap: 8px; } /* Drawer Overlay */ .drawer-overlay { position: fixed; inset: 0; background: rgba(23,22,15,0.45); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: 100; display: none; justify-content: flex-end; animation: fadeIn .2s ease; } .drawer-overlay.show { display: flex; } .drawer { background: var(--panel); width: 100%; max-width: 480px; height: 100%; box-shadow: -8px 0 32px rgba(23,22,15,0.12); display: flex; flex-direction: column; animation: slideInRight .3s cubic-bezier(.2,.7,.3,1); position: relative; } @keyframes slideInRight { from { transform: translateX(100%); } to { transform: none; } } .drawer-header { padding: calc(24px + var(--tg-safe-top)) 32px 24px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; } .drawer-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 32px; } .drawer-close { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); color: var(--muted); cursor: pointer; transition: all .2s; } .drawer-close:hover { background: var(--line); color: var(--ink); } /* Drag handle (grabber) — shadcn/vaul-style. Only shown on the mobile bottom sheet; hidden on the desktop right panel. */ .drawer-grabber { display: none; } @media (max-width: 768px) { .drawer-grabber { display: block; width: 100px; height: 5px; border-radius: 999px; background: var(--line, #d9d7cc); margin: 10px auto 2px; flex-shrink: 0; } } /* ===== HH leads board ===== */ .hh-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 16px 24px; } .hh-search { flex: 1; min-width: 180px; } .hh-board { padding: 0 24px 32px; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .hh-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; cursor: pointer; transition: box-shadow .2s, border-color .2s; display: flex; flex-direction: column; gap: 8px; } .hh-card:hover { border-color: var(--muted-2); box-shadow: var(--shadow-sm); } .hh-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; } .hh-card-name { font-weight: 800; font-size: 15px; letter-spacing: -0.01em; word-break: break-word; } .hh-card-sub { font-size: 12.5px; color: var(--muted); } .hh-card-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); margin-top: 2px; } .hh-badge { font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 999px; white-space: nowrap; } .hh-badge.s-new { background: rgba(59,130,246,.12); color: #2563eb; } .hh-badge.s-work { background: rgba(252,224,0,.20); color: #8a6d00; } .hh-badge.s-win { background: rgba(27,159,75,.14); color: var(--green); } .hh-badge.s-lost { background: rgba(224,77,77,.12); color: var(--red); } .hh-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .hh-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .hh-field.full { grid-column: 1 / -1; } .hh-field label { font-size: 12px; font-weight: 700; color: var(--muted); } .hh-input, .hh-select, .hh-textarea { width: 100%; box-sizing: border-box; padding: 9px 12px; border: 1px solid var(--line-2); border-radius: var(--r-md); font-size: 14px; background: var(--bg); color: var(--ink); font-family: inherit; } .hh-textarea { resize: vertical; } .hh-timeline { display: flex; flex-direction: column; gap: 10px; max-height: 320px; overflow-y: auto; } .hh-comment { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; } .hh-comment.system { background: transparent; border-style: dashed; } .hh-comment-head { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--muted); margin-bottom: 3px; } .hh-comment-text { font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; } .hh-empty { padding: 8px 2px; font-size: 13px; color: var(--muted); } .ov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; } .ov-field { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 700; color: var(--muted); min-width: 0; } .rec-emails-table { width: 100%; border-collapse: collapse; font-size: 13px; } .rec-emails-table th { text-align: left; padding: 8px 12px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border-bottom: 1px solid var(--line); white-space: nowrap; } .rec-emails-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; } .rec-emails-table tbody tr:last-child td { border-bottom: 0; } .rec-emails-table tbody tr:hover { background: var(--bg); } @media (max-width: 900px) { .hh-board { grid-template-columns: 1fr; padding: 0 16px calc(24px + var(--tg-safe-bottom)); } .hh-toolbar { padding: 12px 16px; } .hh-form-grid { grid-template-columns: 1fr; } } .lead-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 32px; } .lead-info-group label { display: block; font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; } .lead-info-group div { font-size: 15px; font-weight: 700; color: var(--ink); } .lead-detail-alert { display: none; margin-bottom: 18px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--muted); font-size: 13px; font-weight: 650; line-height: 1.35; } .lead-detail-alert.show { display: flex; align-items: center; gap: 10px; } .lead-detail-alert.warn { border-color: rgba(212, 124, 0, .24); background: rgba(255, 213, 0, .14); color: #7a4c00; } .lead-detail-alert.loading::before { content: ""; flex: 0 0 auto; width: 14px; height: 14px; border: 2px solid var(--line); border-top-color: var(--muted); border-radius: 50%; animation: leadAlertSpin .7s linear infinite; } @keyframes leadAlertSpin { to { transform: rotate(360deg); } } .lead-detail-alert-text { flex: 1 1 auto; } .lead-detail-retry { flex: 0 0 auto; padding: 6px 12px; border: 1px solid rgba(212, 124, 0, .4); border-radius: 9px; background: #fff; color: #7a4c00; font-size: 12px; font-weight: 700; cursor: pointer; } .lead-detail-retry:hover { background: rgba(255, 213, 0, .22); } .lead-detail-section { margin-bottom: 28px; } .lead-detail-section-head { width: 100%; padding: 0 0 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: transparent; color: var(--ink); cursor: pointer; font-size: 18px; font-weight: 900; line-height: 1.2; } .lead-detail-section-head svg { width: 20px; height: 20px; flex-shrink: 0; transition: transform .2s ease; } .lead-detail-section.is-collapsed .lead-detail-section-head svg { transform: rotate(180deg); } .lead-detail-section.is-collapsed .lead-detail-list, .lead-detail-section.is-collapsed .lead-dispute-form { display: none; } .lead-detail-list { border-top: 1px solid var(--line); } .lead-detail-row { min-height: 54px; padding: 12px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: minmax(120px, .9fr) minmax(0, 1.1fr); gap: 14px; align-items: center; } /* The lead ID is shown in the detail card only on desktop (hidden in the list and on mobile). */ @media (max-width: 900px) { .lead-detail-row.lead-detail-desktop-only { display: none; } } .lead-detail-label { color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1.3; min-width: 0; overflow-wrap: anywhere; } .lead-detail-value { min-width: 0; color: var(--ink); font-size: 14px; font-weight: 750; line-height: 1.35; text-align: right; overflow-wrap: anywhere; } .lead-detail-value-stack { display: flex; flex-direction: column; gap: 3px; align-items: flex-end; } .lead-detail-subvalue { color: var(--muted); font-size: 12px; font-weight: 650; line-height: 1.25; } .lead-detail-inline { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; } .lead-phone-actions { flex-wrap: wrap; } .icon-mini-btn { width: 32px; height: 32px; border-radius: 10px; display: inline-grid; place-items: center; flex: 0 0 32px; background: var(--bg); color: var(--ink); border: 1px solid var(--line); cursor: pointer; transition: background .2s ease, border-color .2s ease, transform .2s ease; } .icon-mini-btn:hover { background: var(--yellow); border-color: var(--yellow); color: var(--on-yellow); transform: translateY(-1px); } .icon-mini-btn svg { width: 17px; height: 17px; } /* CopyButton success state (unlumen port): green + checkmark pop */ .icon-mini-btn.copied { background: var(--green); border-color: var(--green); color: #fff; } .icon-mini-btn.copied:hover { background: var(--green); border-color: var(--green); } .btn.copied { background: var(--green); border-color: var(--green); color: #fff; } .copy-btn.copied svg, .icon-mini-btn.copied svg { animation: copyCheckPop .25s cubic-bezier(.2,.8,.3,1.4); } @keyframes copyCheckPop { 0% { transform: scale(.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .copy-btn.copied svg, .icon-mini-btn.copied svg { animation: none; } } .telegram-btn { background: #229ed9; border-color: #229ed9; color: #fff; text-decoration: none; } .telegram-btn:hover { background: #168ac0; border-color: #168ac0; } .telegram-btn.is-disabled { display: none; } .lead-dispute-form { display: grid; gap: 12px; } .lead-dispute-form input, .lead-dispute-form textarea { width: 100%; border: 0; border-radius: 14px; background: var(--bg); color: var(--ink); font: inherit; font-size: 14px; font-weight: 650; outline: none; padding: 14px 16px; } .lead-dispute-form textarea { min-height: 112px; resize: vertical; } .lead-dispute-form input:focus, .lead-dispute-form textarea:focus { box-shadow: 0 0 0 3px rgba(255, 213, 0, .32); } .lead-history { margin-top: 32px; border-top: 1px solid var(--line); padding-top: 32px; } .lead-history h3 { font-size: 16px; font-weight: 800; margin-bottom: 20px; } .history-list { display: flex; flex-direction: column; gap: 20px; position: relative; } .history-list::before { content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--line); } .history-item { display: flex; gap: 16px; position: relative; z-index: 1; } .history-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--panel); border: 3px solid var(--yellow); flex-shrink: 0; } .history-content { flex: 1; } .history-status { font-size: 14px; font-weight: 700; margin-bottom: 4px; } .history-time { font-size: 12px; color: var(--muted); } .modal p.sub { color: var(--muted); font-size: 14px; margin-bottom: 24px; line-height: 1.5; } .link-box { background: var(--panel); border: 2px solid var(--line); border-radius: 14px; padding: 16px 18px; display: flex; align-items: center; gap: 12px; margin-bottom: 20px; transition: border-color .2s, box-shadow .2s; } .link-box:hover { border-color: var(--line-2); box-shadow: 0 4px 12px rgba(0,0,0,.04); } .link-box input { flex: 1; background: transparent; border: 0; outline: 0; font-size: 13px; font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace; color: var(--ink); min-width: 0; font-weight: 500; } .copy-btn { background: var(--ink-fixed); color: #fff; padding: 10px 16px; border-radius: 10px; font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; gap: 7px; transition: all .2s cubic-bezier(.2,.7,.3,1); flex-shrink: 0; box-shadow: 0 2px 8px rgba(23,22,15,.15); } .copy-btn:hover { background: #000; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(23,22,15,.25); } .copy-btn:active { transform: translateY(0); } .copy-btn.copied { background: var(--green); box-shadow: 0 2px 8px rgba(27,159,75,.25); } .copy-btn svg { width: 15px; height: 15px; } .link-actions { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 20px; } .link-actions .btn { justify-content: center; padding: 14px 16px; font-size: 14px; font-weight: 600; gap: 8px; } .analytics-panel { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; margin-top: 18px; padding: 16px; } .analytics-panel summary { cursor: pointer; font-size: 14px; font-weight: 800; list-style: none; } .analytics-panel summary::-webkit-details-marker { display: none; } .analytics-panel summary::after { content: '+'; float: right; color: var(--muted); font-weight: 900; } .analytics-panel[open] summary::after { content: '−'; } .analytics-head { margin: 6px 0 14px; } .analytics-head p { color: var(--muted); font-size: 12px; line-height: 1.45; } .utm-grid { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; margin-bottom: 16px; } .utm-field { display: grid; gap: 6px; } .utm-field label { color: var(--muted); font-size: 12px; font-weight: 700; } .utm-field input { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; color: var(--ink); font-size: 13px; min-width: 0; outline: 0; padding: 11px 12px; } .utm-field input:focus { border-color: var(--yellow-d); box-shadow: 0 0 0 3px rgba(252,224,0,.18); } .utm-help { color: var(--muted); font-size: 11px; line-height: 1.35; } .utm-field-wide { grid-column: 1 / -1; } .analytics-create-btn { justify-content: center; width: 100%; } .saved-links { display: grid; gap: 8px; margin-top: 14px; max-height: 260px; overflow-y: auto; padding-right: 4px; } .saved-links-title { color: var(--muted); font-size: 12px; font-weight: 800; margin-top: 2px; } .saved-link { align-items: start; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; display: grid; gap: 8px; grid-template-columns: 1fr; padding: 10px 12px; text-align: left; transition: border-color .2s, background .2s; } .saved-link:hover { background: var(--hover); border-color: var(--line-2); } .saved-link.active { border-color: var(--yellow-d); box-shadow: 0 0 0 3px rgba(252,224,0,.14); } .saved-link-title { font-size: 13px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .saved-link-meta { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .saved-link-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; } .saved-link-pill { background: var(--bg); border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 11px; padding: 4px 8px; } .modal-info { background: linear-gradient(135deg, var(--bg) 0%, var(--panel-2) 100%); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; font-size: 13px; color: var(--ink-2); line-height: 1.6; } .toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--ink-fixed); color: #fff; padding: 12px 20px; border-radius: 12px; box-shadow: var(--shadow-lg); z-index: 1000; opacity: 0; transition: all .3s var(--t-fast); pointer-events: none; display: inline-flex; align-items: center; gap: 8px; } .toast.show { transform: translateX(-50%) translateY(0); opacity: 1; } .toast svg { width: 16px; height: 16px; color: var(--yellow); } .search-wrap { position: relative; display: flex; align-items: center; flex: 1; } .search-wrap .search-input { width: 100%; padding-right: 38px; } .search-clear { position: absolute; right: 10px; width: 22px; height: 22px; border: none; border-radius: 50%; background: var(--line); color: var(--ink); font-size: 12px; cursor: pointer; align-items: center; justify-content: center; display: flex; transition: background .15s; } .search-clear:hover { background: var(--muted); color: #fff; } .funnel-conv { font-size: 11px; font-weight: 700; color: var(--green, #1B9F4B); margin-left: 6px; } .toast-success { background: #1B9F4B; color: #fff; } .toast-error { background: #D8442F; color: #fff; } .toast-info { background: var(--ink-fixed); color: #fff; } .toast-success::before { content: '✓'; font-weight: 900; } .toast-error::before { content: '✕'; font-weight: 900; } /* Disabled buttons must not look clickable */ button:disabled, .btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; pointer-events: none; } .bot-connect { display: flex; gap: 14px; align-items: flex-start; background: var(--bg); border: 1px solid var(--line-2); border-radius: 12px; padding: 16px; margin-bottom: 18px; } .bot-connect-icon { width: 44px; height: 44px; border-radius: 12px; background: #0088cc; color: #fff; display: grid; place-items: center; flex-shrink: 0; } .bot-connect-icon svg { width: 22px; height: 22px; } .bot-connect-title { font-weight: 800; font-size: 14px; margin-bottom: 4px; } .bot-connect-text { color: var(--muted); font-size: 13px; line-height: 1.45; } /* ===== Search Input ===== */ .search-input { flex: 1; max-width: 320px; padding: 8px 14px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--panel); font-size: 13px; outline: 0; transition: border-color .2s, box-shadow .2s; } .search-input:focus { border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(252,224,0,.15); } /* ===== Spinner ===== */ .spin { animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* RefreshButton (unlumen port): icon spins while loading */ .refresh-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 10px; background: var(--bg); color: var(--ink); border: 1px solid var(--line); font-weight: 600; font-size: 13px; cursor: pointer; transition: background .2s ease, border-color .2s ease, transform .2s ease; } .refresh-btn:hover { background: var(--yellow); border-color: var(--yellow); color: var(--on-yellow); transform: translateY(-1px); } .refresh-btn:active { transform: translateY(0); } .refresh-btn:disabled { cursor: default; opacity: .7; transform: none; } .refresh-btn svg { width: 16px; height: 16px; } @media (prefers-reduced-motion: reduce) { .spin { animation-duration: 1.6s; } } /* ===== Notification badge pulse ===== */ @keyframes badgePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } } .user-ava.has-unseen .badge { animation: badgePulse 2s ease-in-out infinite; } /* ===== Smooth reveal animation ===== */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s var(--t-fast), transform .6s var(--t-fast); } .reveal.in { opacity: 1; transform: translateY(0); } /* ===== Responsive ===== */ @media (max-width: 900px) { .layout { grid-template-columns: 1fr; } .sidebar { position: fixed; bottom: 0; left: 0; right: 0; top: auto; height: auto; flex-direction: row; border-right: 0; border-top: 1px solid rgba(255,255,255,.1); padding: 8px 8px calc(8px + var(--tg-safe-bottom)); z-index: 50; justify-content: space-around; overflow-x: auto; } .sidebar-logo { display: none; } .sidebar-nav { flex: 1; flex-direction: row; gap: 4px; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; /* fade the right edge to hint that more nav items are scrollable */ -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent); } .sidebar-nav::-webkit-scrollbar { display: none; } .sidebar-nav .side-item { scroll-snap-align: center; } .sidebar-bottom { display: none; } .side-item { flex: 0 0 42px; height: 42px; width: 42px; } .side-item svg { height: 19px; width: 19px; } .side-item .tip { display: none; } .main { padding-bottom: calc(64px + var(--tg-safe-bottom)); } .topbar { padding: calc(12px + var(--tg-safe-top)) 16px 12px; flex-wrap: wrap; } .tabs { order: 3; width: 100%; overflow-x: auto; margin: 4px 0 0; } .filterbar { padding: 12px 16px; } .stats { grid-template-columns: 1fr 1fr; padding: 16px 16px 0; } .stats-detail { grid-template-columns: 1fr; } .stats-insight-grid, .profile-grid { grid-template-columns: 1fr; } .profile-form-grid { grid-template-columns: 1fr; } .profile-actions { align-items: stretch; flex-direction: column; } .profile-actions .btn { justify-content: center; width: 100%; } .funnel-hero { margin: 0 12px 12px; padding: 14px; } .fstage { grid-template-columns: 1fr; gap: 4px; } .fstage-conv { margin-left: 0; } .payout-hero { grid-template-columns: 1fr; gap: 0; } .payout-hero-main { padding: 18px 20px; } .payout-hero-value { font-size: 28px; } /* Secondary stats: the auto-fit grid turns into a ragged 2-col with an orphan on phones. A label-left / value-right list reads clean. */ .payout-hero-side { padding: 4px 16px 8px; grid-template-columns: 1fr; gap: 0; } .payout-hero-stat { grid-template-columns: 1fr auto; grid-template-areas: 'label value' 'note value'; align-items: center; column-gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--line); } .payout-hero-stat:last-child { border-bottom: 0; } .payout-hero-stat-label { grid-area: label; } .payout-hero-stat-note { grid-area: note; } .payout-hero-stat b { grid-area: value; font-size: 17px; text-align: right; white-space: nowrap; } .rates-layout { grid-template-columns: 1fr; } .rate-admin-grid { grid-template-columns: 1fr 1fr; } .rate-cards { grid-template-columns: 1fr; } .payout-row { align-items: stretch; grid-template-columns: 1fr 1fr; } .payout-row-own, .payout-row-admin { grid-template-columns: 1fr 1fr; } .payout-person { grid-column: 1 / -1; } .payout-cell { text-align: left; } .leaderboard-row { grid-template-columns: 44px minmax(0, 1fr) minmax(72px, auto); } .leaderboard-row .metric-pill:nth-of-type(2), .leaderboard-row .metric-pill:nth-of-type(3) { display: none; } .recruiter-row { grid-template-columns: 1fr 1fr; } .recruiter-person, .recruiter-actions { grid-column: 1 / -1; } .recruiter-actions { justify-content: flex-start; } .creatives-grid { grid-template-columns: 1fr; } /* On mobile the rows are already standalone cards, so drop the outer panel chrome (it left an empty band above the first card) and pull the list up close to the filter bar. */ .table-wrap { background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; margin: 4px 16px 16px; } /* On mobile the modal is a bottom sheet: full-width, anchored to the bottom with a rounded top — no floating/stretched card. */ .modal-overlay { align-items: flex-end; justify-content: center; padding: 0; } .modal { width: 100%; max-width: none; border-radius: 20px 20px 0 0; padding: 22px 18px calc(20px + var(--tg-safe-bottom, 0px)); max-height: calc(100dvh - 24px); } .modal h2 { font-size: 20px; } } @media (max-width: 540px) { .stats { grid-template-columns: 1fr; } .section-pad { padding: 12px; } .profile-meta-grid { grid-template-columns: 1fr; } .profile-hero, .payment-card, .onboarding-card, .payout-survey-card { padding: 14px; } .onboarding-card-actions { justify-content: stretch; } .onboarding-card-actions .btn { justify-content: center; width: 100%; } .onboarding-modal { border-radius: 16px; max-height: calc(100vh - 24px); } .onboarding-list { gap: 8px; margin-top: 14px; } .onboarding-list li { font-size: 12px; padding: 10px 12px; } .onboarding-actions { align-items: stretch; flex-direction: column; } .onboarding-actions-group { display: grid; grid-template-columns: 1fr 1fr; } .onboarding-actions .btn { justify-content: center; } .profile-status-strip { grid-template-columns: 1fr; } .profile-meta { align-items: flex-start; flex-direction: column; gap: 4px; } .profile-meta-value { text-align: left; white-space: normal; } .payout-row { gap: 10px; grid-template-columns: 1fr 1fr; padding: 12px; } .payout-person { border-bottom: 1px solid var(--line); padding-bottom: 10px; } .payout-cell { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; } .payout-cell-value { white-space: normal; } .payout-accrual { align-items: start; grid-template-columns: 1fr; } .topbar { gap: 10px; padding: calc(10px + var(--tg-safe-top)) 12px 10px; } .tabs { gap: 6px; padding: 3px; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tab { flex: 0 0 auto; min-height: 36px; padding: 9px 13px; } /* Leads tabs (in the topbar) stretch to fill the bar in equal proportions — no empty space on the right after "Не лиды". Other tab bars (leaderboard, hh statuses) keep scrolling. */ .topbar .tabs { overflow-x: visible; } .topbar .tabs .tab { flex: 1 1 0; min-width: 0; padding: 9px 6px; text-align: center; } .filterbar { gap: 10px; padding: 10px 12px; } .filterbar .search-input { max-width: none; min-height: 44px; width: 100%; } .filterbar .filter-spacer { display: none; } .filterbar .btn { justify-content: center; min-height: 44px; width: 100%; } .rate-card { gap: 10px; padding: 14px; } .page-title { font-size: 15px; } .topbar-actions .btn span { display: none; } /* Collapsed to icons: make every action a uniform square button so the row reads as an even toolbar. Without this the buttons keep the desktop pill padding (9px 16px) and .btn-outline (sync) keeps its border, so icons sit unevenly and one looks like an odd chip. */ .topbar-actions .btn { width: 40px; height: 40px; padding: 0; flex: 0 0 40px; justify-content: center; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); color: var(--ink); } .topbar-actions .btn svg { width: 18px; height: 18px; } .user-chip .user-name { display: none; } /* Mobile / Mini App topbar: title + avatar on row 1, action icons on row 2, tabs on row 3 — so the avatar isn't orphaned on its own row. */ .page-title { order: 0; } .topbar-right { order: 1; margin-left: auto; } .topbar-actions { order: 2; width: 100%; margin-left: 0; overflow-x: auto; scrollbar-width: none; } .topbar-actions::-webkit-scrollbar { display: none; } .leaderboard-row, .recruiter-row { grid-template-columns: 1fr; } .creatives-shell { padding: 16px; } .rank-badge { height: 38px; width: 38px; } .metric-pill { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; text-align: left; } .utm-grid { grid-template-columns: 1fr; } .link-actions { grid-template-columns: 1fr; } .table-scroll { overflow-x: visible; } table.leads { border-collapse: separate; border-spacing: 0 8px; min-width: 0; } table.leads thead { display: none; } table.leads tbody, table.leads tr { display: block; width: 100%; } table.leads td { width: 100%; } table.leads tbody tr { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); overflow: hidden; } table.leads tbody tr:hover { background: var(--panel); } table.leads td { display: none; white-space: normal; } table.leads td.mobile-lead-summary { border-bottom: 0; display: block; padding: 12px; } table.leads td.mobile-lead-summary::before { display: none; } /* State rows (loader / empty / error) span the card list on mobile — they'd otherwise be hidden by the `td { display:none }` rule above, leaving the area blank. Shown full-width, without the card chrome. */ table.leads td.lead-state-cell { display: block; } table.leads tbody tr.lead-state-row { background: transparent; border: 0; box-shadow: none; } .lead-mobile-card .status { flex-shrink: 0; font-size: 11px; max-width: 42%; overflow: hidden; padding: 5px 8px; text-overflow: ellipsis; white-space: nowrap; } .lead-mobile-card .cell-flag { margin-left: 0; } .drawer { border-radius: 18px 18px 0 0; /* Drop the whole sheet below the status bar / Telegram fullscreen controls so the close button isn't pushed off the top edge. */ height: calc(100dvh - 18px - var(--tg-safe-top)); margin-top: calc(18px + var(--tg-safe-top)); max-width: none; } .drawer-header { padding: 18px 16px; } .drawer-body, .drawer-content { padding-left: 16px; padding-right: 16px; } .drawer-overlay { align-items: flex-end; justify-content: center; } .drawer-header { padding: 16px 18px; } .drawer-body { padding: 18px; } .lead-card-grid { gap: 14px; grid-template-columns: 1fr; margin-bottom: 20px; } .lead-detail-section { margin-bottom: 22px; } .lead-detail-section-head { font-size: 16px; } .lead-detail-row { grid-template-columns: minmax(112px, .85fr) minmax(0, 1.15fr); gap: 10px; min-height: 50px; padding: 11px 0; } .lead-detail-label, .lead-detail-value { font-size: 13px; } .icon-mini-btn { width: 30px; height: 30px; flex-basis: 30px; } .lead-dispute-form input, .lead-dispute-form textarea { border-radius: 12px; padding: 13px 14px; } } /* ── Analytics redesign ──────────────────────────── */ .analytics-period-bar { display: flex; align-items: center; gap: 10px; padding: 0 16px 16px; } .analytics-period-pills { display: flex; gap: 6px; /* One row always: scroll instead of a ragged wrap on narrow screens */ overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; max-width: 100%; } .analytics-period-pills::-webkit-scrollbar { display: none; } .period-pill { padding: 7px 16px; border-radius: 20px; border: 1.5px solid var(--line); background: var(--panel-2); color: var(--ink-2); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .18s; white-space: nowrap; flex-shrink: 0; } .period-pill:hover { background: var(--panel-3); } .period-pill-active { background: var(--blue); border-color: var(--blue); color: #fff; } .analytics-period-label { font-size: 12px; color: var(--ink-3); margin-left: auto; white-space: nowrap; } /* The label duplicates the active pill — drop it when space is tight */ @media (max-width: 640px) { .analytics-period-label { display: none; } } .analytics-kpi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 0 16px 16px; } /* Compact funnel link-row (replaces the old full funnel block) */ .funnel-link-row { align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; cursor: pointer; display: flex; font-family: inherit; gap: 10px; padding: 13px 16px; width: 100%; } .funnel-link-row:hover { border-color: var(--yellow); } .funnel-link-title { color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; } .funnel-link-path { color: var(--ink); font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; } .funnel-link-cta { color: var(--blue); font-size: 13px; font-weight: 800; margin-left: auto; white-space: nowrap; } /* Collapsed breakdown details (cities/statuses/vacancies/UTM) */ .stats-details-fold { margin: 0 16px 16px; } .stats-details-fold > summary { align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; cursor: pointer; display: flex; font-size: 13px; font-weight: 800; justify-content: space-between; list-style: none; padding: 13px 16px; } .stats-details-fold > summary::-webkit-details-marker { display: none; } .stats-details-fold > summary:hover { border-color: var(--yellow); } .stats-details-chev { color: var(--muted); font-size: 16px; transition: transform .2s ease; } .stats-details-fold[open] .stats-details-chev { transform: rotate(90deg); } .stats-details-fold[open] > summary { margin-bottom: 12px; } .stats-details-fold .stats-detail { padding: 0 0 12px; } /* 5th card (forecast) would orphan on a half-width cell in the 2-col layout — stretch it across so the grid closes in a clean rectangle */ .analytics-kpi-grid > .kpi-card:nth-child(odd):last-child { grid-column: 1 / -1; } @media (min-width: 640px) { .analytics-kpi-grid { grid-template-columns: repeat(4, 1fr); } /* In the 4-col layout a 5th card spans the full row instead */ .analytics-kpi-grid > .kpi-card:nth-child(odd):last-child { grid-column: auto; } .analytics-kpi-grid > .kpi-card:nth-child(5):last-child { grid-column: 1 / -1; } } .kpi-card { border-radius: var(--r-lg); padding: 16px; display: flex; align-items: flex-start; gap: 12px; background: var(--panel); border: 1px solid var(--line); color: var(--ink); } .kpi-blue .kpi-icon { background: rgba(60,130,246,.12); color: var(--blue); } .kpi-green .kpi-icon { background: rgba(34,197,94,.12); color: #16a34a; } .kpi-orange .kpi-icon{ background: rgba(249,115,22,.12); color: #ea6c0a; } .kpi-yellow .kpi-icon{ background: rgba(252,224,0,.25); color: var(--ink); } .kpi-icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 12px; display: flex; align-items: center; justify-content: center; } .kpi-body { min-width: 0; } .kpi-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } .kpi-value { font-size: 26px; font-weight: 800; line-height: 1.1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .kpi-value-sm { font-size: 20px; } /* (old analytics funnel block styles removed — replaced by .funnel-link-row) */ @media (max-width: 640px) { /* Compact KPI cards: uniform value size and tighter box so the 2-col grid reads as one calm block instead of mixed heights */ .kpi-card { padding: 12px; gap: 10px; } .kpi-icon { width: 32px; height: 32px; border-radius: 10px; } .kpi-icon svg { width: 17px; height: 17px; } .kpi-value { font-size: 21px; } .kpi-value-sm { font-size: 19px; } .kpi-label { font-size: 10px; letter-spacing: .06em; } }