: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-form { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; align-items:end; } .auth-actions { display:flex; gap:8px; } .auth-actions button { min-height:47px; } .auth-actions .primary-button { flex:1; } .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; } .placements,.score-grid { grid-template-columns:repeat(2,1fr); } .calendar { grid-template-columns:repeat(2,1fr); } footer { flex-direction:column; } h1 { font-size:58px; } }