:root { --ink:#102b23; --muted:#66756f; --cream:#f4f1e8; --card:#fff; --green:#176b4a; --lime:#d8ee8d; --line:#d9dfda; --shadow:0 22px 60px rgba(24,54,44,.12); }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 85% 8%,rgba(216,238,141,.33),transparent 24%),linear-gradient(180deg,#f9f8f3 0,#f0eee5 100%); color:var(--ink); font-family:"DM Sans",sans-serif; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.35; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E"); }
.shell { width:min(1080px,calc(100% - 40px)); margin:auto; padding-bottom:70px; position:relative; }
.topbar { height:90px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(16,43,35,.12); }
.brand { color:var(--ink); display:flex; align-items:center; gap:11px; font:600 21px "Newsreader",serif; text-decoration:none; }
.brand-mark { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--ink); font-size:17px; }
.live-pill { padding:8px 13px; border:1px solid #ced7d2; border-radius:999px; font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.live-pill i { display:inline-block; width:7px; height:7px; margin-right:6px; border-radius:50%; background:#4ea273; box-shadow:0 0 0 4px rgba(78,162,115,.12); }
.hero { max-width:650px; margin:76px 0 34px; }
.eyebrow { color:var(--green); font-size:12px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
h1,h2,h3 { font-family:"Newsreader",serif; margin:0; letter-spacing:-.025em; }
h1 { margin-top:10px; font-size:clamp(54px,7vw,82px); line-height:.95; }
.hero p { margin:20px 0 0; color:var(--muted); font-size:18px; line-height:1.6; }
.search-card { position:relative; background:rgba(255,255,255,.9); border:1px solid rgba(16,43,35,.1); border-radius:22px; padding:26px; box-shadow:var(--shadow); backdrop-filter:blur(12px); }
form { display:grid; grid-template-columns:1.4fr 1fr auto; gap:16px; align-items:end; }
.field { min-width:0; position:relative; }
label { display:block; margin:0 0 9px 2px; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
label span { color:#8a9893; font-weight:500; text-transform:none; }
.input-wrap { height:56px; display:flex; align-items:center; gap:11px; padding:0 15px; background:#f8f8f5; border:1px solid #d8dedb; border-radius:12px; transition:.2s; }
.input-wrap:focus-within { background:#fff; border-color:var(--green); box-shadow:0 0 0 3px rgba(23,107,74,.1); }
.input-wrap svg,.course-confirmation svg { width:19px; fill:none; stroke:currentColor; stroke-width:1.7; }
input { width:100%; border:0; outline:0; background:transparent; color:var(--ink); font:500 15px "DM Sans",sans-serif; }
input::placeholder { color:#98a49f; }
.clear-button { display:none; border:0; background:none; color:#83918c; font-size:23px; cursor:pointer; }
.primary-button { height:56px; padding:0 22px; border:0; border-radius:12px; background:var(--ink); color:white; font:700 14px "DM Sans",sans-serif; display:flex; align-items:center; gap:12px; cursor:pointer; box-shadow:0 8px 20px rgba(16,43,35,.18); transition:.2s; }
.primary-button:hover { transform:translateY(-2px); background:#174c3b; }
.primary-button svg { width:17px; fill:none; stroke:currentColor; stroke-width:2; }
.suggestions { position:absolute; z-index:10; top:84px; left:0; right:0; overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 16px 40px rgba(16,43,35,.15); }
.suggestion { width:100%; padding:13px 15px; border:0; border-bottom:1px solid #edf0ee; background:#fff; color:var(--ink); text-align:left; cursor:pointer; }
.suggestion:last-child { border-bottom:0; }
.suggestion:hover { background:#f3f7f1; }
.suggestion strong,.suggestion span { display:block; }
.suggestion strong { font-size:14px; }.suggestion span { margin-top:2px;color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.location-note { margin:7px 2px 0; color:var(--muted); font-size:11px; position:absolute; }
.form-error { margin:14px 0 0; color:#a23d31; font-size:13px; }
.loading-card { margin-top:26px; padding:28px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.75); display:flex; align-items:center; gap:18px; }
.loading-card[hidden] { display:none; }.loading-card strong,.loading-card span { display:block; }.loading-card span{color:var(--muted);font-size:13px;margin-top:3px}
.spinner { width:32px; height:32px; border:3px solid #dbe2de; border-top-color:var(--green); border-radius:50%; animation:spin .75s linear infinite; } @keyframes spin{to{transform:rotate(360deg)}}
.result { margin-top:30px; animation:rise .5s ease both; } @keyframes rise{from{opacity:0;transform:translateY(14px)}}
.verdict-card { min-height:300px; display:flex; align-items:stretch; justify-content:space-between; overflow:hidden; border-radius:24px; background:var(--ink); color:white; box-shadow:var(--shadow); }
.verdict-main { padding:46px; display:flex; flex-direction:column; align-items:flex-start; }
.verdict-kicker { padding:7px 11px; border-radius:7px; background:var(--lime); color:var(--ink); font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.verdict-main h2 { margin-top:18px; font-size:58px; line-height:1; }
.verdict-main>p { max-width:520px; margin:14px 0 32px; color:#c8d3cf; font-size:16px; line-height:1.6; }
.course-confirmation { margin-top:auto; display:flex; align-items:center; gap:10px; }.course-confirmation strong,.course-confirmation span{display:block}.course-confirmation strong{font-size:14px}.course-confirmation span{margin-top:3px;color:#9db0a9;font-size:12px}
.score-wrap { width:310px; min-width:310px; padding:30px; display:grid; place-content:center; text-align:center; background:linear-gradient(140deg,rgba(216,238,141,.17),rgba(255,255,255,.02)); border-left:1px solid rgba(255,255,255,.1); }
.score-ring { width:170px; height:170px; border:2px solid var(--lime); border-radius:50%; display:grid; place-content:center; box-shadow:inset 0 0 50px rgba(216,238,141,.08),0 0 0 12px rgba(216,238,141,.04); }
.score-ring span { font:600 64px/1 "Newsreader",serif; }.score-ring small { margin-top:5px;color:#b9c8c2;font-size:10px;line-height:1.2;letter-spacing:.1em;text-transform:uppercase}.score-wrap p{margin:20px 0 0;color:#aebdb7;font-size:12px}
.weather-grid { margin:14px 0; display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.weather-stat { display:flex; align-items:center; gap:12px; min-height:92px; padding:18px; background:rgba(255,255,255,.8); border:1px solid var(--line); border-radius:16px; }
.stat-icon { display:grid;place-items:center;width:34px;height:34px;flex:0 0 auto;border-radius:50%;background:#edf2e5;color:var(--green);font-size:20px}.weather-stat div span,.weather-stat div strong{display:block}.weather-stat div span{color:var(--muted);font-size:11px}.weather-stat div strong{margin-top:4px;font-size:19px}
.scale-card { padding:28px 30px 30px; background:rgba(255,255,255,.8); border:1px solid var(--line); border-radius:18px; }
.scale-header { display:flex;align-items:end;justify-content:space-between}.scale-header h3{font-size:27px;margin-top:5px}.scale-header p{color:var(--muted);font-size:12px}
.scale-bar { height:13px; display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1.2fr; position:relative; margin:26px 0 12px; gap:3px; }.scale-bar i{background:#77ad77}.scale-bar i:nth-child(2){background:#aac268}.scale-bar i:nth-child(3){background:#d5ba58}.scale-bar i:nth-child(4){background:#d98d47}.scale-bar i:nth-child(5){background:#bc5547}.scale-bar i:first-child{border-radius:8px 0 0 8px}.scale-bar i:nth-child(5){border-radius:0 8px 8px 0}
#scale-marker { position:absolute; top:-8px; width:4px; height:29px; border-radius:3px; background:var(--ink); box-shadow:0 0 0 3px #fff; transition:left .7s ease; }
.scale-labels { display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1.2fr;gap:3px;color:#314940;font-size:10px;font-weight:700}.scale-labels span:not(:first-child){padding-left:3px}.scale-labels small{color:#84918c;font-size:9px;font-weight:500}
.scale-credit { margin:22px 0 0; padding-top:17px; border-top:1px solid #e5e9e6; color:#7a8883; font-size:10px; line-height:1.5; }
.scale-credit a { color:var(--green); font-weight:600; text-decoration-color:rgba(23,107,74,.35); text-underline-offset:2px; }
.scale-credit a:hover { text-decoration-color:var(--green); }
.weather-source { margin:14px 2px;text-align:right;color:#8c9994;font-size:10px; }
@media(max-width:850px){form{grid-template-columns:1fr 1fr}.primary-button{grid-column:1/-1;justify-content:center}.weather-grid{grid-template-columns:repeat(2,1fr)}.verdict-main{padding:35px}.score-wrap{width:260px;min-width:260px}}
@media(max-width:650px){.shell{width:min(100% - 24px,1080px)}.topbar{height:70px}.hero{margin:48px 4px 28px}.hero p{font-size:16px}form{display:block}.field{margin-bottom:19px}.primary-button{width:100%;justify-content:center}.search-card{padding:18px}.verdict-card{display:block}.verdict-main{padding:30px}.verdict-main h2{font-size:47px}.score-wrap{width:100%;border-left:0;border-top:1px solid rgba(255,255,255,.1)}.score-ring{width:145px;height:145px}.weather-grid{grid-template-columns:1fr 1fr}.weather-stat{padding:13px;min-height:78px}.weather-stat:last-child{grid-column:1/-1}.scale-labels small{display:none}.scale-card{padding:23px 18px}.scale-header p{display:none}}