:root { color-scheme: dark; --bg:#101522; --card:#171e2e; --card-2:#1c2538; --text:#f1eee7; --muted:#9da7bb; --line:#2c3850; --accent:#e8b779; --accent-2:#9fc8bd; --danger:#eb8c88; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing:border-box; } body { margin:0; min-width:320px; background:radial-gradient(circle at 70% -10%, #26354e 0, transparent 38%), var(--bg); color:var(--text); } button,input,select { font:inherit; } .shell { max-width:1120px; margin:auto; padding:24px 28px 40px; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding:4px 0 54px; color:var(--muted); font-size:13px; } .brand { color:var(--text); text-decoration:none; font-size:21px; letter-spacing:-.03em; font-weight:700; } .brand-mark { color:var(--accent); margin-right:8px; } .topbar-note { letter-spacing:.08em; text-transform:uppercase; font-size:11px; }
.hero { max-width:710px; padding:20px 0 48px; } .eyebrow,.step { color:var(--accent); text-transform:uppercase; letter-spacing:.14em; font-size:11px; font-weight:700; } h1 { font-size:clamp(48px, 8vw, 92px); line-height:.94; letter-spacing:-.07em; margin:18px 0 26px; } h1 em { color:var(--accent); font-family:Georgia, serif; font-weight:400; } h2 { display:inline; font-size:22px; letter-spacing:-.04em; margin-left:14px; } .hero-copy { max-width:480px; color:var(--muted); line-height:1.7; font-size:17px; }
.card { background:linear-gradient(145deg, rgba(31,42,62,.94), rgba(21,28,44,.96)); border:1px solid var(--line); border-radius:20px; box-shadow:0 20px 70px rgba(0,0,0,.12); } .form-card { padding:30px; } .auth-card { padding:24px 30px; margin-bottom:18px; } .auth-guest,.auth-user { display:flex; align-items:center; justify-content:space-between; gap:20px; color:var(--muted); line-height:1.55; } .auth-guest p { max-width:620px; margin:0; } .auth-user > div:first-child { display:flex; flex-direction:column; gap:4px; } .auth-user strong { color:var(--text); } .auth-user span { font-size:13px; } .auth-form { display:grid; gap:14px; } .secondary-button { border:1px solid var(--line); border-radius:11px; color:var(--text); background:transparent; padding:12px 16px; cursor:pointer; } .secondary-button:disabled { opacity:.6; cursor:default; } .subscription-box { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-top:20px; padding:15px 16px; border:1px solid var(--line); border-radius:12px; } .subscription-box div { display:flex; flex-direction:column; gap:4px; } .subscription-box span { color:var(--muted); font-size:12px; } .section-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:28px; } .section-heading > div { display:flex; align-items:center; } .engine-badge { color:var(--accent-2); border:1px solid #46675f; border-radius:999px; padding:8px 12px; font-size:11px; text-transform:uppercase; letter-spacing:.1em; }
.saved-card { padding:24px 30px; margin-top:18px; } .saved-charts { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; } .saved-chart { border:1px solid var(--line); color:var(--text); background:#111827; border-radius:12px; text-align:left; padding:14px; cursor:pointer; } .saved-chart:hover { border-color:var(--accent); } .saved-chart strong,.saved-chart small { display:block; } .saved-chart small { color:var(--muted); margin-top:6px; }
.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; } label { color:var(--muted); display:flex; flex-direction:column; gap:8px; font-size:13px; } input,select { width:100%; color:var(--text); background:#111827; border:1px solid var(--line); border-radius:10px; padding:13px 14px; outline:none; } input:focus,select:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(232,183,121,.12); } .location-field { position:relative; } .location-results { position:absolute; z-index:5; top:78px; left:0; right:0; background:#202b40; border:1px solid var(--line); border-radius:10px; overflow:hidden; } .location-results:empty { display:none; } .location-option { display:block; width:100%; border:0; text-align:left; color:var(--text); background:transparent; padding:12px 14px; cursor:pointer; } .location-option:hover { background:#2c3952; } .coordinates { min-height:26px; color:var(--muted); font-size:12px; padding:20px 0 12px; } .primary-button { width:100%; display:flex; justify-content:space-between; border:0; border-radius:11px; padding:15px 17px; color:#1c2029; background:var(--accent); cursor:pointer; font-weight:750; } .primary-button:disabled { opacity:.6; cursor:wait; } .message { margin-top:18px; border-radius:10px; padding:12px 14px; font-size:13px; } .error { color:#ffd0cc; background:rgba(235,140,136,.12); border:1px solid rgba(235,140,136,.35); }
.results { padding-top:74px; } .results-heading { margin-bottom:20px; } .text-button { color:var(--muted); background:transparent; border:0; cursor:pointer; } .text-button:hover { color:var(--text); } .insight { padding:28px; margin-bottom:18px; } .insight-kicker { color:var(--accent); font-size:12px; text-transform:uppercase; letter-spacing:.12em; } .insight h3 { font-family:Georgia,serif; font-weight:400; font-size:32px; margin:12px 0; } .insight p { max-width:750px; color:#c9cfda; line-height:1.65; margin:0; } .evidence { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; } .evidence span { color:var(--accent-2); background:rgba(159,200,189,.08); border:1px solid rgba(159,200,189,.25); border-radius:999px; padding:7px 10px; font-size:12px; }
.chart-grid { display:grid; grid-template-columns:1.3fr .7fr; gap:18px; margin-bottom:18px; } .panel,.forecast-panel,.calendar-panel { padding:26px; } .panel-title { color:var(--muted); text-transform:uppercase; letter-spacing:.12em; font-size:11px; margin-bottom:18px; } .placements { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; } .placement,.angle { display:flex; justify-content:space-between; gap:10px; padding:11px 0; border-bottom:1px solid rgba(157,167,187,.15); font-size:14px; } .placement small,.angle small { color:var(--muted); } .angle { flex-direction:column; gap:4px; } .angle strong { color:var(--accent); font-size:18px; }
.forecast-panel { margin-bottom:18px; } #forecast-date { max-width:160px; } .forecast-content { min-height:120px; } .score-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:22px; } .score { background:#111827; border-radius:12px; padding:14px; } .score small { color:var(--muted); display:block; margin-bottom:8px; } .score strong { color:var(--accent); font-size:24px; } .forecast-summary { color:#d2d7df; line-height:1.6; } .advice { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:18px; } .advice h4 { font-size:12px; color:var(--accent-2); text-transform:uppercase; letter-spacing:.1em; } .advice ul { margin:0; padding-left:18px; color:var(--muted); line-height:1.7; font-size:13px; } .muted { color:var(--muted); } .calendar { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; } .day { min-height:130px; background:#111827; border-radius:12px; padding:12px; } .day.locked { opacity:.55; } .day-date { color:var(--muted); font-size:12px; } .day-score { color:var(--accent); font-size:26px; font-weight:700; margin:17px 0 5px; } .day-summary { color:#c3cbd8; font-size:11px; line-height:1.35; } footer { display:flex; justify-content:space-between; color:#68758d; padding:36px 0 0; font-size:11px; gap:20px; }
@media (max-width:720px) { .shell { padding:18px 16px 30px; } .topbar { padding-bottom:30px; } .topbar-note { display:none; } .hero { padding-bottom:32px; } .form-card,.panel,.forecast-panel,.calendar-panel,.insight,.auth-card { padding:20px; } .form-grid,.chart-grid,.advice,.auth-form { grid-template-columns:1fr; } .auth-guest,.auth-user { align-items:stretch; flex-direction:column; } .auth-guest .secondary-button { width:100%; } .placements,.score-grid { grid-template-columns:repeat(2,1fr); } .calendar { grid-template-columns:repeat(2,1fr); } footer { flex-direction:column; } h1 { font-size:58px; } .legal-card { padding:24px 20px; } .requisites-list div { grid-template-columns:1fr; gap:6px; } }
.legal-page { min-height:100vh; display:flex; flex-direction:column; }
.legal-card { max-width:760px; padding:42px; margin:20px 0 40px; }
.legal-title { font-size:clamp(42px, 7vw, 70px); line-height:1; letter-spacing:-.06em; margin:16px 0 20px; }
.legal-lead,.legal-note { color:var(--muted); line-height:1.7; }
.requisites-list { margin:32px 0; }
.requisites-list div { display:grid; grid-template-columns:minmax(180px, .7fr) 1.3fr; gap:24px; padding:16px 0; border-top:1px solid var(--line); }
.requisites-list dt { color:var(--muted); }
.requisites-list dd { margin:0; line-height:1.5; }
.requisites-list a, footer a { color:var(--accent-2); }
.legal-back { display:inline-block; margin-top:24px; text-decoration:none; }
.legal-prose h2 { display:block; font-size:20px; margin:30px 0 10px; letter-spacing:-.03em; }
.legal-prose p { color:#c9cfda; line-height:1.7; margin:10px 0; }
.legal-prose a,.consent-note a { color:var(--accent-2); }
.consent-note { color:var(--muted); font-size:12px; line-height:1.5; margin:14px 0 0; }
.landing-hero { max-width:780px; padding-top:50px; }
.landing-cta { display:flex; text-decoration:none; max-width:260px; }
.landing-description { max-width:760px; padding:30px; margin-bottom:20px; }
.landing-description h2 { display:block; margin:12px 0; font-size:28px; }
.landing-description p:not(.eyebrow) { color:var(--muted); line-height:1.7; max-width:650px; }
.landing-link { display:inline-block; margin-top:12px; text-decoration:none; }
.top-auth-button { border:1px solid #46675f; border-radius:999px; color:var(--accent-2); background:transparent; padding:10px 16px; cursor:pointer; font-size:12px; letter-spacing:.06em; text-transform:uppercase; }
.top-auth-button:hover { border-color:var(--accent-2); color:var(--text); }
.hero-button { max-width:310px; margin-top:24px; }
.product-promise { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:0 0 54px; }
.product-point { padding:22px; border:1px solid var(--line); border-radius:16px; background:rgba(23,30,46,.58); }
.product-number { color:var(--accent); font-size:11px; letter-spacing:.12em; }
.product-point h2 { display:block; margin:20px 0 10px; font-size:18px; }
.product-point p { color:var(--muted); line-height:1.55; font-size:13px; margin:0; }
.profile-settings { margin-left:auto; color:var(--muted); font-size:12px; }
.profile-settings summary { cursor:pointer; }
.profile-settings .danger-text { margin-top:10px; }
@media (max-width:720px) { .product-promise { grid-template-columns:1fr; padding-bottom:32px; } .profile-settings { margin-left:0; } }
.auth-tools { display:flex; flex-wrap:wrap; gap:16px; margin-top:14px; } .modal[hidden] { display:none; } .modal { position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:20px; } .modal-backdrop { position:absolute; inset:0; background:rgba(7,10,17,.78); backdrop-filter:blur(8px); } .modal-card { position:relative; width:min(100%,460px); padding:30px; background:var(--card-2); border:1px solid #43516d; border-radius:20px; box-shadow:0 25px 90px rgba(0,0,0,.45); } .modal-close { position:absolute; top:14px; right:16px; border:0; background:transparent; color:var(--muted); font-size:28px; line-height:1; cursor:pointer; } .modal-card h3 { margin:12px 0 8px; font-size:28px; letter-spacing:-.05em; } .modal-lead { color:var(--muted); line-height:1.5; margin:0 0 20px; } .auth-tabs { display:flex; gap:6px; padding:4px; margin-bottom:20px; background:#111827; border-radius:11px; } .auth-tab { flex:1; border:0; border-radius:8px; padding:10px; color:var(--muted); background:transparent; cursor:pointer; } .auth-tab.active { color:var(--text); background:#2a3852; } .auth-form .primary-button { margin-top:4px; } .primary-button.is-loading { cursor:wait; } .forgot-button { margin-top:14px; } .danger-text { color:var(--danger); }
.danger-text { color:var(--danger); }