.rfm-app { --rfm-ink:#0b2038; --rfm-muted:#617083; --rfm-line:#dce4ec; --rfm-blue:#0b67a3; --rfm-sky:#eaf5fb; --rfm-yellow:#f2c94c; --rfm-red:#c92f3e; max-width:1180px; margin:0 auto; padding:44px 20px; color:var(--rfm-ink); font-family:Arial,Helvetica,sans-serif; box-sizing:border-box; }
.rfm-app { --rfm-ink:#0b2038; --rfm-muted:#617083; --rfm-line:#dce4ec; --rfm-blue:#0b67a3; --rfm-sky:#eaf5fb; --rfm-yellow:#f2c94c; width:100%; max-width:1180px; margin:0 auto; padding:44px 20px; color:var(--rfm-ink); font-family:Arial,Helvetica,sans-serif; box-sizing:border-box; }
.rfm-app * { box-sizing:border-box; }
.rfm-intro { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:30px; }
.rfm-intro h1 { margin:0; font-size:clamp(38px,6vw,64px); line-height:1; letter-spacing:-.045em; }
.rfm-intro>div>p:last-child { max-width:650px; margin:17px 0 0; color:var(--rfm-muted); font-size:17px; line-height:1.55; }
.rfm-kicker { margin:0 0 9px!important; color:var(--rfm-blue)!important; font-size:12px!important; font-weight:800; text-transform:uppercase; letter-spacing:.15em; }
.rfm-intro aside { flex:0 0 auto; padding-left:20px; border-left:3px solid var(--rfm-yellow); }
.rfm-intro aside span,.rfm-intro aside strong { display:block; }
.rfm-intro aside span { color:var(--rfm-muted); font-size:11px; font-weight:700; letter-spacing:.16em; }
.rfm-intro aside strong { margin-top:5px; font-size:16px; }
.rfm-workspace { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr)); gap:22px; }
.rfm-card { min-width:0; padding:30px; border:1px solid var(--rfm-line); border-radius:18px; background:#fff; box-shadow:0 18px 50px rgba(14,48,78,.07); overflow:hidden; }
.rfm-result { background:#0b2844; color:#fff; border-color:#0b2844; }
.rfm-card-heading { display:flex; align-items:flex-start; gap:14px; }
.rfm-card-heading>span { flex:0 0 auto; display:grid; place-items:center; width:35px; height:35px; border-radius:50%; background:var(--rfm-sky); color:var(--rfm-blue); font-size:11px; font-weight:800; }
.rfm-result .rfm-card-heading>span { color:#a9dbf6; background:rgba(255,255,255,.11); }
.rfm-card-heading h2 { margin:1px 0 5px; font-size:20px; letter-spacing:-.02em; }
.rfm-card-heading p { margin:0; color:var(--rfm-muted); font-size:13px; line-height:1.45; }
.rfm-result .rfm-card-heading p { color:#a9bbcc; }
.rfm-fields { display:grid; gap:14px; margin-top:29px; }
.rfm-fields>label { display:grid; grid-template-columns:1fr 154px; align-items:center; gap:16px; color:#31445a; font-size:14px; font-weight:700; }
.rfm-input { display:grid; grid-template-columns:1fr 45px; overflow:hidden; border:1px solid #cbd7e2; border-radius:9px; background:#fff; }
.rfm-input:focus-within { border-color:var(--rfm-blue); box-shadow:0 0 0 3px rgba(11,103,163,.12); }
.rfm-input input { width:100%; min-width:0; padding:12px 10px 12px 14px; border:0; outline:0; color:var(--rfm-ink); background:transparent; font:800 16px Arial,sans-serif; }
.rfm-input b { display:grid; place-items:center; background:#f1f5f8; color:var(--rfm-muted); font-size:12px; }
.rfm-form fieldset { margin:30px 0 0; padding:0; border:0; }
.rfm-form legend { margin-bottom:12px; color:#31445a; font-size:14px; font-weight:800; }
.rfm-trends { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }
.rfm-trends>label { display:flex; align-items:center; gap:10px; padding:11px 12px; border:1px solid var(--rfm-line); border-radius:10px; background:#fbfcfd; cursor:pointer; }
.rfm-trends>label:last-child { grid-column:1/-1; }
.rfm-trends>label.is-active { border-color:var(--rfm-blue); background:var(--rfm-sky); }
.rfm-trends input { accent-color:var(--rfm-blue); }
.rfm-trends b,.rfm-trends small { display:block; }
.rfm-trends b { font-size:13px; }
.rfm-trends small { margin-top:2px; color:var(--rfm-muted); font-size:10px; }
.rfm-actions { display:flex; gap:10px; margin-top:30px; }
.rfm-actions button { min-height:46px; padding:0 20px; border:1px solid transparent; border-radius:9px; font-weight:800; cursor:pointer; }
.rfm-actions button:first-child { flex:1; color:#fff; background:var(--rfm-blue); }
.rfm-actions button:first-child:hover { background:#085888; }
.rfm-actions button:last-child { color:var(--rfm-ink); border-color:var(--rfm-line); background:#fff; }
.rfm-empty { min-height:440px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.rfm-empty .rfm-weather { opacity:.55; transform:scale(.82); }
.rfm-empty strong { margin-top:15px; font-size:18px; }
.rfm-empty p { margin:6px 0 0; color:#9fb3c6; font-size:13px; }
.rfm-forecast { padding-top:28px; }
.rfm-hero { display:grid; grid-template-columns:190px 1fr; align-items:center; gap:18px; min-height:204px; }
.rfm-hero h3 { margin:0; font-size:clamp(26px,3.4vw,39px); line-height:1.04; letter-spacing:-.035em; }
.rfm-hero>div>p:last-child { margin:14px 0 0; color:#c2d0dd; font-size:14px; line-height:1.55; }
.rfm-hero .rfm-kicker { color:#74c4f0!important; }
.rfm-weather { position:relative; width:184px; height:152px; }
.rfm-sun { position:absolute; width:72px; height:72px; left:18px; top:11px; border-radius:50%; background:var(--rfm-yellow); box-shadow:0 0 0 9px rgba(242,201,76,.13); }
.rfm-cloud { position:absolute; display:block; height:52px; border-radius:35px; background:#d8e3ec; }
.rfm-cloud:before,.rfm-cloud:after { content:""; position:absolute; bottom:18px; border-radius:50%; background:inherit; }
.rfm-cloud:before { width:68px; height:68px; left:23px; }
.rfm-cloud:after { width:50px; height:50px; right:17px; }
.rfm-cloud-back { width:132px; left:30px; top:57px; opacity:.5; }
.rfm-cloud-front { width:150px; left:12px; top:73px; }
.rfm-weather-rain .rfm-cloud-front,.rfm-weather-storm .rfm-cloud-front,.rfm-weather-snow .rfm-cloud-front,.rfm-weather-mixed .rfm-cloud-front,.rfm-weather-overcast .rfm-cloud-front { background:#7790a7; }
.rfm-rain { position:absolute; display:flex; gap:26px; left:45px; top:128px; transform:skewX(-16deg); }
.rfm-rain b { display:block; width:4px; height:22px; border-radius:3px; background:#48b8ee; }
.rfm-snow { position:absolute; left:31px; top:127px; color:#fff; font-size:18px; letter-spacing:4px; font-style:normal; }
.rfm-lightning { position:absolute; left:111px; top:111px; color:var(--rfm-yellow); font-size:54px; font-weight:900; line-height:1; font-style:normal; transform:rotate(5deg); }
.rfm-chance { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; margin-top:12px; padding:14px 0; border-block:1px solid rgba(255,255,255,.12); font-size:12px; }
.rfm-chance>span { color:#b4c5d4; }
.rfm-chance>i { height:6px; overflow:hidden; border-radius:9px; background:rgba(255,255,255,.12); }
.rfm-chance>i>b { display:block; height:100%; background:#51bff1; }
.rfm-warning { margin-top:16px; overflow:hidden; border:1px solid rgba(255,142,151,.55); border-radius:10px; background:rgba(201,47,62,.12); }
.rfm-warning button { width:100%; min-height:52px; display:grid; grid-template-columns:28px 1fr auto; align-items:center; gap:9px; padding:8px 12px; color:#fff; border:0; background:transparent; text-align:left; cursor:pointer; }
.rfm-warning button>span { display:grid; place-items:center; width:25px; height:25px; border-radius:50%; background:var(--rfm-red); font-weight:900; }
.rfm-warning button strong { font-size:13px; }
.rfm-warning button small { color:#ffb7bd; font-size:10px; text-transform:uppercase; letter-spacing:.1em; }
.rfm-warning p { margin:0; padding:0 14px 15px 49px; color:#ffd6d9; font-size:13px; line-height:1.5; }
.rfm-forecast details { margin-top:14px; border-top:1px solid rgba(255,255,255,.12); }
.rfm-forecast summary { padding:16px 0 4px; color:#dce8f1; cursor:pointer; font-size:13px; font-weight:700; }
.rfm-forecast ul { margin:10px 0 0; padding-left:18px; color:#afc1d0; font-size:12px; line-height:1.6; }
.rfm-app>footer { margin-top:22px; color:var(--rfm-muted); font-size:11px; line-height:1.5; }
@media(max-width:850px){.rfm-intro aside{display:none}.rfm-workspace{grid-template-columns:1fr}.rfm-empty{min-height:330px}}
@media(max-width:540px){.rfm-app{padding:34px 12px}.rfm-card{padding:23px 18px;border-radius:14px}.rfm-fields>label{grid-template-columns:1fr;gap:7px}.rfm-trends{grid-template-columns:1fr}.rfm-trends>label:last-child{grid-column:auto}.rfm-actions{flex-direction:column}.rfm-hero{grid-template-columns:1fr;justify-items:center;text-align:center}}
@media(prefers-reduced-motion:reduce){.rfm-app *{transition:none!important}}