:root { /* ===== Токены дизайн-системы MAX — светлая палитра ===== Источник: github.com/max-messenger/max-ui src/styles/variables/appearance.scss (lightPalette) */ --background-surface-ground: rgb(237 238 242); --background-surface-primary: rgb(255 255 255); --background-surface-card: rgb(255 255 255); --background-surface-secondary: rgb(240 240 240); --background-surface-tertiary: rgb(246 246 246); --background-button-secondary: rgb(233 235 241); --background-accent-themed: rgb(0 122 255); --background-accent-positive: rgb(26 190 67); --background-accent-negative: rgb(255 48 60); --text-primary: rgb(12 13 14); --text-secondary: rgb(12 13 14 / 0.52); --text-subhead: rgb(12 13 14 / 0.72); --text-tertiary: rgb(12 13 14 / 0.4); --text-themed: rgb(0 122 255); --accent-themed: rgb(0 122 255); --stroke-separator-primary: rgb(12 13 14 / 0.16); --stroke-separator-secondary: rgb(12 13 14 / 0.06); --shadow-elevation-2-primary: rgb(0 0 0 / 0.06); --shadow-elevation-3-primary: rgb(0 0 0 / 0.08); --shadow-elevation-4-primary: rgb(0 0 0 / 0.16); --accent-red: rgb(255 48 60); --gradient-blue: linear-gradient(157deg, #08D7F3 6.38%, #5398FF 85%); /* ===== Радиусы (src/styles/variables/sizes.scss) ===== */ --radius: 16px; /* --size-border-radius-semantic-border-radius-card */ --radius-lg: 20px; /* --size-border-radius-semantic-border-radius-promo */ --radius-md: 12px; /* --size-border-radius-action-medium */ /* ===== Семантические алиасы приложения ===== */ --bg: var(--background-surface-ground); --surface: var(--background-surface-primary); --surface-2: var(--background-surface-tertiary); --text: var(--text-primary); --muted: var(--text-secondary); --border: var(--stroke-separator-primary); --accent: var(--accent-themed); --accent-hover: rgb(71 159 255); --accent-soft: rgb(0 122 255 / 0.12); --danger: var(--accent-red); --success: var(--background-accent-positive); --shadow: 0 8px 24px var(--shadow-elevation-2-primary); --shadow-lg: 0 12px 40px var(--shadow-elevation-3-primary); --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px); --nav-h: 68px; } /* Тёмная тема (appearance.scss, darkPalette). data-theme на выставляет app.js: внутри MAX — по WebApp.colorScheme, вне MAX — по системной теме. */ :root[data-theme="dark"] { --background-surface-ground: rgb(23 24 28); --background-surface-primary: rgb(23 24 28); --background-surface-card: rgb(37 38 45); --background-surface-secondary: rgb(30 31 36); --background-surface-tertiary: rgb(37 38 45); --background-button-secondary: rgb(67 68 85); --background-accent-themed: rgb(0 122 255); --background-accent-positive: rgb(43 198 68); --background-accent-negative: rgb(206 66 87); --text-primary: rgb(255 255 255 / 0.8); --text-secondary: rgb(255 255 255 / 0.44); --text-subhead: rgb(255 255 255 / 0.74); --text-tertiary: rgb(255 255 255 / 0.28); --text-themed: rgb(0 122 255); --accent-themed: rgb(0 122 255); --stroke-separator-primary: rgb(255 255 255 / 0.12); --stroke-separator-secondary: rgb(255 255 255 / 0.06); --shadow-elevation-2-primary: rgb(0 0 0 / 0.2); --shadow-elevation-3-primary: rgb(0 0 0 / 0.3); --shadow-elevation-4-primary: rgb(0 0 0 / 0.2); --accent-red: rgb(255 68 79); --gradient-blue: linear-gradient(157deg, #08D7F3 6.38%, #5398FF 85%); } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html { height: 100%; } html, body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; } /* ===== Login / Register ===== */ .auth-wrap { min-height: 100dvh; min-height: 100vh; display: flex; flex-direction: column; padding: 24px 20px calc(24px + var(--safe-b)); background: radial-gradient(120% 60% at 50% -10%, rgb(0 122 255 / 0.12), transparent 60%), var(--bg); } .auth-card { width: min(100%, 400px); margin: auto; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 28px 24px; } .auth-card h2 { margin: 0 0 4px 0; font-size: 1.5rem; font-weight: 800; } .auth-subtitle { margin: 0 0 24px 0; font-size: 14px; color: var(--muted); } /* ===== Layout ===== */ .login-box, .dashboard-shell { display: flex; flex-direction: column; } /* Личный кабинет */ .dashboard-shell { min-height: 100dvh; min-height: 100vh; } .dash-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: calc(10px + var(--safe-t)) 20px 8px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); } .dash-header-left { display: flex; align-items: center; gap: 12px; min-width: 0; } .dash-greet { min-width: 0; } .dash-greet .eyebrow { display: block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--accent); margin-bottom: 2px; } .dash-greet h1 { margin: 0; font-size: 1.35rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .avatar-badge { flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; background: var(--gradient-blue); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 18px; box-shadow: 0 4px 12px rgb(0 122 255 / 0.3); } .logout-btn { appearance: none; border: 1px solid var(--border); background: var(--surface); color: var(--muted); padding: 10px 16px; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; } .logout-btn:active { transform: scale(0.96); } .dash-main { flex: 1; padding: 8px 20px calc(var(--nav-h) + var(--safe-b) + 24px); } .dash-main .profile-card:first-child { margin-top: 4px; } /* ===== Карточки ===== */ .profile-card, .editor-card, .partner-link-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; box-shadow: var(--shadow); } .partner-link-card { margin-bottom: 18px; } .partner-link-card h3 { font-size: 17px; margin: 0 0 6px; color: var(--text); } .partner-link-card p { font-size: 13px; color: var(--muted); margin: 0 0 14px; line-height: 1.45; } .partner-link-result { margin-top: 12px; display: flex; gap: 8px; align-items: center; } .partner-link-result input { flex: 1; min-width: 0; padding: 12px 14px; font-size: 13px; color: var(--text); background: var(--field-bg); border: 1px solid var(--border); border-radius: 10px; outline: none; } .partner-link-result .btn-secondary { flex-shrink: 0; width: auto; height: auto; padding: 12px 16px; font-size: 13px; border-radius: 10px; white-space: nowrap; } .profile-card.loading { display: flex; align-items: center; justify-content: center; min-height: 140px; color: var(--muted); font-size: 14px; } .avatar-badge-lg { width: 72px; height: 72px; font-size: 28px; } /* ===== Кнопки ===== */ .btn-primary, .btn-secondary, .ghost-button, .link-btn, .pwd-request-btn { appearance: none; border: none; border-radius: 14px; font-size: 16px; font-weight: 700; cursor: pointer; transition: all 0.2s ease; letter-spacing: 0.01em; } .btn-primary { width: 100%; height: 52px; background: var(--accent); color: #fff; box-shadow: 0 12px 24px rgb(0 122 255 / 0.25); } .btn-primary:hover:not(:disabled) { transform: translateY(-1px); background: var(--accent-hover); } .btn-primary:active:not(:disabled) { transform: translateY(0); background: rgb(0 110 229); box-shadow: 0 8px 16px rgb(0 122 255 / 0.2); } .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; } .btn-secondary { width: 100%; height: 48px; background: var(--surface); color: var(--text); border: 1.5px solid var(--border); font-weight: 600; } .btn-secondary:active { background: var(--surface-2); transform: scale(0.98); } /* Отступ между кнопками «Создать аккаунт» и «Назад» в форме регистрации */ form .btn-secondary { margin-top: 12px; } .ghost-button { background: var(--accent-soft); color: var(--accent); padding: 10px 14px; font-size: 13px; font-weight: 600; width: auto; } .link-btn { display: block; width: 100%; margin-top: 16px; background: transparent; color: var(--accent); font-size: 14px; font-weight: 600; text-align: center; padding: 8px 0; } .password-request-wrap { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); } .pwd-request-btn { width: 100%; height: 48px; background: var(--accent-soft); color: var(--accent); border: 1.5px solid var(--accent); font-weight: 600; } .pwd-request-btn:active:not(:disabled) { transform: scale(0.98); } .pwd-request-btn:disabled { opacity: 0.6; cursor: not-allowed; } .profile-actions, .editor-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; } /* Honeypot-поле против ботов: невидимо для людей, боты его заполняют */ .hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } /* ===== Формы ===== */ .input-group { margin-bottom: 16px; } .input-group.compact { margin-bottom: 14px; } label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; color: var(--muted); letter-spacing: 0.02em; } input, textarea { width: 100%; padding: 14px 16px; border: 1.5px solid var(--border); border-radius: 14px; font-size: 16px; outline: none; transition: all 0.2s ease; background: var(--surface-2); color: var(--text); font-family: inherit; } input { height: 52px; } input::placeholder, textarea::placeholder { color: var(--text-tertiary); } input:focus, textarea:focus { background: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 4px rgb(0 122 255 / 0.15); } input:disabled { background: var(--surface); border-color: var(--border); color: var(--text); opacity: 1; cursor: default; -webkit-text-fill-color: var(--text); } textarea { resize: vertical; min-height: 100px; } .input-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 16px; } .full-width { grid-column: 1 / -1; } .profile-form { display: flex; flex-direction: column; } /* ===== Нижняя навигация ===== */ .bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid var(--border); padding-bottom: var(--safe-b); box-shadow: 0 -4px 20px var(--shadow-elevation-2-primary); } .nav-item { flex: 1; appearance: none; border: none; background: transparent; padding: 10px 4px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--muted); font-size: 11px; font-weight: 600; cursor: pointer; transition: color 0.2s ease; min-height: 56px; } .nav-item svg { width: 24px; height: 24px; } .nav-item.active { color: var(--accent); } .tab-content { transition: opacity 0.25s ease, transform 0.25s ease; } .tab-content.hidden { display: none !important; } /* ===== Заработок партнёра (Сделки) ===== */ .earnings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; } .earning-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px; box-shadow: var(--shadow); } .earning-card-accent { border-color: rgb(0 122 255 / 0.35); background: linear-gradient(180deg, rgb(0 122 255 / 0.06), var(--surface) 45%); } .earning-label { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; } .earning-value { font-size: 18px; font-weight: 800; color: var(--text); white-space: nowrap; } .earning-card-accent .earning-value { color: var(--accent); } /* ===== Тарифы ===== */ .tariff-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px 18px; box-shadow: var(--shadow); margin-bottom: 14px; } .tariff-card-accent { border-color: rgb(0 122 255 / 0.35); background: linear-gradient(180deg, rgb(0 122 255 / 0.06), var(--surface) 45%); } .tariff-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .tariff-name { font-size: 16px; font-weight: 700; } .tariff-desc { font-size: 13px; color: var(--muted); margin-top: 3px; } .tariff-badge { flex-shrink: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); padding: 5px 10px; border-radius: 20px; white-space: nowrap; } .tariff-reward { font-size: 26px; font-weight: 800; color: var(--accent); line-height: 1.1; } .tariff-note { font-size: 13px; color: var(--muted); margin: 4px 0 14px; } .tariff-condition { display: flex; align-items: flex-start; gap: 10px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 13px; line-height: 1.45; color: var(--text); } .tariff-condition svg { flex-shrink: 0; width: 18px; height: 18px; color: var(--accent); margin-top: 1px; } /* ===== Статистика сделок ===== */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 18px; } .stat-chip { appearance: none; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; box-shadow: var(--shadow); border-left: 3px solid var(--stat-color, var(--accent)); background: var(--surface); text-align: left; cursor: pointer; font-family: inherit; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .stat-chip:active { transform: scale(0.97); } .stat-chip-active { border-color: var(--stat-color, var(--accent)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--stat-color, var(--accent)) 25%, transparent), var(--shadow); } .stat-chip-count { font-size: 22px; font-weight: 800; color: var(--stat-color, var(--accent)); line-height: 1.1; } .stat-chip-label { font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.3; } /* ===== Сделки ===== */ .deals-status { text-align: center; color: var(--muted); font-size: 14px; padding: 30px 0; } .deals-list { display: flex; flex-direction: column; gap: 12px; } .deal-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; box-shadow: var(--shadow); } .deal-top { margin-bottom: 12px; } .deal-title { font-size: 16px; font-weight: 700; line-height: 1.35; } .deal-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .stage-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; padding: 6px 11px; border-radius: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%; } .stage-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; } .deal-date { flex-shrink: 0; font-size: 12px; color: var(--muted); } .empty-state { text-align: center; padding: 40px 20px; color: var(--muted); font-size: 14px; } .empty-icon { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; background: var(--accent-soft); display: flex; align-items: center; justify-content: center; color: var(--accent); } .empty-icon svg { width: 30px; height: 30px; } /* ===== Сообщения ===== */ .message-box { padding: 14px 16px; border-radius: 14px; margin-top: 12px; font-size: 14px; text-align: center; font-weight: 500; } .message-box.success { background: rgb(26 190 67 / 0.12); color: var(--success); border: 1px solid rgb(26 190 67 / 0.2); } .message-box.error { background: rgb(255 48 60 / 0.12); color: var(--danger); border: 1px solid rgb(255 48 60 / 0.2); } .error-text { color: var(--danger); font-size: 13px; min-height: 18px; margin-bottom: 10px; text-align: center; font-weight: 500; } .hidden { display: none !important; } /* ===== Секция передачи лида ===== */ .transfer-head { margin: 8px 0 16px; } .transfer-head h3 { margin: 0 0 4px 0; font-size: 1.1rem; font-weight: 700; } .transfer-head p { margin: 0; font-size: 13px; color: var(--muted); } .transfer-submit { padding-top: 4px; } /* ===== Планшет / десктоп ===== */ @media (min-width: 600px) { .dashboard-shell { width: min(100%, 520px); margin: 0 auto; } .bottom-nav { left: 50%; transform: translateX(-50%); max-width: 520px; border-radius: 20px 20px 0 0; } .input-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dash-main { padding-left: 0; padding-right: 0; } }