:root{--bg:#08060e;--surface:rgba(18,14,28,0.85);--surface-solid:#120e1c;--surface2:#1a1428;--glass:rgba(255,255,255,0.09);--glass-border:rgba(255,255,255,0.12);--border:#3a3058;--text:#f0ecf8;--text-dim:#b0a8c8;--text-faint:#7a7090;--neon-pink:#FF2D78;--neon-purple:#B537F2;--neon-blue:#4E8FFF;--neon-gold:#FFD166;--neon-cyan:#56E8FF;--neon-green:#56FFA0;--warm:#ff9d5c;--rain:#6cb4ff;--danger:#FF2D78;--freeze:#56E8FF;--radius:20px;--radius-sm:12px;--font-display:'Bebas Neue',sans-serif;--font-body:'Urbanist',sans-serif;--font-mono:'JetBrains Mono',monospace;}
*{margin:0;padding:0;box-sizing:border-box;}html{scroll-behavior:smooth;}
body{font-size:16px;font-family:var(--font-body);background:var(--bg);color:var(--text);min-height:100vh;min-height:100dvh;-webkit-font-smoothing:antialiased;overflow-x:hidden;}

/* Ambient Background */
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.ambient-orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:0.12;will-change:transform;animation:orbFloat 20s ease-in-out infinite;}
.ambient-orb.pink{width:500px;height:500px;background:var(--neon-pink);top:-10%;left:-10%;}
.ambient-orb.purple{width:400px;height:400px;background:var(--neon-purple);bottom:-5%;right:-5%;animation-delay:-7s;}
.ambient-orb.blue{width:300px;height:300px;background:var(--neon-blue);top:40%;right:20%;animation-delay:-14s;}
@keyframes orbFloat{0%,100%{transform:translate(0,0) scale(1);}33%{transform:translate(40px,-30px) scale(1.1);}66%{transform:translate(-20px,40px) scale(0.9);}}

/* Noise Texture */
.noise{display:none;position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0.03;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:128px 128px;}

/* App Layout */
.app{position:relative;z-index:2;max-width:860px;margin:0 auto;padding:0 16px 120px;}

/* Header */
.hdr{display:flex;align-items:center;justify-content:space-between;padding:16px 0;flex-wrap:wrap;gap:10px;}
.hdr-brand{display:flex;align-items:center;gap:10px;}
.hdr-logo{font-family:var(--font-display);font-size:1.6rem;letter-spacing:0.06em;background:linear-gradient(135deg,var(--neon-pink),var(--neon-purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.hdr-tag{font-size:0.98rem;color:var(--neon-pink);font-weight:600;letter-spacing:0.06em;text-transform:uppercase;opacity:0.85;margin-top:-2px;}
.hdr-loc{display:flex;align-items:center;gap:5px;font-size:0.95rem;color:var(--text-dim);font-weight:500;}
.hdr-loc svg{width:12px;height:12px;stroke:var(--text-dim);fill:none;stroke-width:2;}
.hdr-ctrls{display:flex;align-items:center;gap:6px;}

/* Pill Toggles */
.pill-toggle{display:flex;background:var(--glass);border:1px solid var(--glass-border);border-radius:100px;padding:2px;}
.pill-btn{padding:5px 12px;border:none;background:none;color:var(--text-faint);font-family:var(--font-body);font-size:0.82rem;font-weight:700;border-radius:100px;cursor:pointer;transition:all 0.25s;letter-spacing:0.02em;}
.pill-btn.active{background:var(--neon-pink);color:#fff;box-shadow:0 0 16px rgba(255,45,120,0.35);}
.pill-btn.unit-active{background:var(--neon-blue);color:#fff;box-shadow:0 0 12px rgba(78,143,255,0.3);}

/* Hero Card */
.hero{position:relative;margin:8px 0 20px;padding:32px 28px;background:rgba(22,18,34,0.9);border:1px solid var(--glass-border);border-radius:var(--radius);overflow:hidden;}
.hero::before{content:'';position:absolute;inset:0;background:var(--sky-grad);opacity:0.25;transition:background 1.5s;}
.hero-top{display:flex;align-items:center;gap:8px;margin-bottom:16px;position:relative;z-index:1;}
.hero-top svg{width:28px;height:28px;}
.hero-condition{font-size:0.98rem;color:var(--text-dim);font-weight:500;}
.hero-main{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;position:relative;z-index:1;}
.hero-temp{font-family:var(--font-display);font-size:6rem;line-height:0.9;letter-spacing:0.02em;}
.hero-feels{display:flex;flex-direction:column;gap:2px;}
.hero-feels-lbl{font-size:1rem;text-transform:uppercase;letter-spacing:0.1em;color:var(--text-faint);font-weight:700;}
.hero-feels-val{font-family:var(--font-display);font-size:2.4rem;color:var(--warm);line-height:1;}
.hero-stats{display:flex;gap:20px;margin-top:18px;flex-wrap:wrap;position:relative;z-index:1;}
.hero-stat{font-size:0.98rem;color:var(--text-dim);display:flex;align-items:center;gap:5px;}
.hero-stat strong{color:var(--text);font-weight:700;}

/* FQBI Card */
.fqbi{will-change:auto;position:relative;margin:0 0 20px;padding:28px;background:linear-gradient(145deg,#1a0a28 0%,#160820 40%,#1c0828 100%);border:1px solid rgba(181,55,242,0.2);border-radius:var(--radius);overflow:hidden;}
.fqbi::before{content:'';position:absolute;top:-60px;right:-60px;width:250px;height:250px;background:radial-gradient(circle,rgba(255,45,120,0.12) 0%,transparent 65%);pointer-events:none;}
.fqbi::after{content:'';position:absolute;bottom:-40px;left:-40px;width:200px;height:200px;background:radial-gradient(circle,rgba(181,55,242,0.08) 0%,transparent 65%);pointer-events:none;}
.fqbi-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:24px;position:relative;z-index:1;}
.fqbi-brand{font-family:var(--font-display);font-size:1.8rem;letter-spacing:0.08em;background:linear-gradient(135deg,var(--neon-gold),var(--neon-pink),var(--neon-purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.fqbi-sub{font-size:0.82rem;color:#b098c8;font-style:italic;margin-top:4px;font-weight:500;}
.fqbi-about{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:100px;padding:5px 14px;font-size:0.95rem;color:#b098c8;font-family:var(--font-body);font-weight:700;cursor:pointer;transition:all 0.25s;text-transform:uppercase;letter-spacing:0.08em;}
.fqbi-about:hover{border-color:var(--neon-pink);color:var(--neon-pink);}
.fqbi-body{display:flex;align-items:center;gap:28px;margin-bottom:24px;position:relative;z-index:1;}
.fqbi-gauge{position:relative;width:160px;height:160px;flex-shrink:0;}
.fqbi-gauge svg{width:160px;height:160px;transform:rotate(-90deg);}
.fqbi-gauge-bg{fill:none;stroke:#3a2a50;stroke-width:8;}
.fqbi-gauge-fill{transition:stroke-dashoffset 1.2s ease-out;fill:none;stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset 1.5s cubic-bezier(0.16,1,0.3,1),stroke 0.5s;filter:drop-shadow(0 0 8px currentColor);}
.fqbi-gauge-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;}
.fqbi-score{font-family:var(--font-display);font-size:3.4rem;line-height:1;letter-spacing:0.02em;}
.fqbi-of{font-size:0.95rem;color:#b098c8;font-weight:700;letter-spacing:0.08em;}
.fqbi-info{flex:1;min-width:0;}
.fqbi-status-label{font-family:var(--font-display);font-size:1.5rem;letter-spacing:0.05em;line-height:1.15;margin-bottom:10px;}
.fqbi-desc{font-size:0.95rem;color:#c8b8d8;line-height:1.6;font-style:italic;}
.fqbi-climax{position:relative;z-index:1;padding:16px 20px;background:rgba(255,255,255,0.09);border:1px solid rgba(255,255,255,0.09);border-radius:14px;font-size:0.98rem;color:#e0d0f0;line-height:1.6;text-align:center;margin-bottom:20px;}
.fqbi-scale{position:relative;z-index:1;}
.fqbi-bar{height:6px;border-radius:3px;position:relative;margin-bottom:10px;overflow:visible;background:linear-gradient(90deg,var(--neon-blue) 0%,var(--neon-gold) 25%,var(--neon-pink) 55%,var(--neon-purple) 100%);}
.fqbi-marker{position:absolute;top:-5px;width:16px;height:16px;background:#fff;border-radius:50%;transform:translateX(-50%);transition:left 1.5s cubic-bezier(0.16,1,0.3,1);box-shadow:0 0 12px rgba(255,255,255,0.6),0 0 24px rgba(255,255,255,0.15);}
.fqbi-bar-labels{display:flex;justify-content:space-between;font-size:0.98rem;color:#8a7aa0;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;}
.fqbi-threshold{position:relative;z-index:1;margin-top:14px;padding:10px 14px;background:rgba(255,209,102,0.06);border:1px solid rgba(255,209,102,0.15);border-radius:10px;font-size:0.95rem;color:var(--neon-gold);text-align:center;font-weight:700;}
.fqbi-event{background:linear-gradient(135deg,rgba(255,209,102,0.15),rgba(255,45,120,0.15));border:1px solid rgba(255,209,102,0.3);border-radius:var(--radius-sm);padding:8px 14px;text-align:center;color:var(--neon-gold);font-size:0.88rem;font-weight:700;letter-spacing:0.04em;margin-bottom:12px;}
.fqbi-penalty{background:rgba(255,100,50,0.1);border:1px solid rgba(255,100,50,0.25);border-radius:var(--radius-sm);padding:6px 12px;text-align:center;color:#ff8844;font-size:0.82rem;font-weight:600;letter-spacing:0.03em;margin-bottom:12px;}
.bd-score{font-size:2.5rem;font-weight:900;text-align:center;margin:8px 0 4px;}
.bd-phase{text-align:center;font-size:0.85rem;color:var(--text-dim);margin-bottom:14px;font-style:italic;}
.bd-rows{display:flex;flex-direction:column;gap:2px;}
.bd-row{display:grid;grid-template-columns:110px 55px 1fr;align-items:center;padding:8px 12px;border-radius:6px;background:rgba(255,255,255,0.03);}
.bd-row:nth-child(odd){background:rgba(255,255,255,0.06);}
.bd-label{font-weight:700;font-size:0.85rem;color:var(--text-main);letter-spacing:0.03em;}
.bd-val{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:0.95rem;text-align:right;padding-right:12px;}
.bd-desc{font-size:0.78rem;color:var(--text-dim);}
.bd-formula{text-align:center;font-size:0.75rem;color:var(--text-dim);margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,0.08);font-style:italic;}
.fqbi-banner{position:relative;z-index:1;margin-top:14px;padding:14px 18px;background:rgba(255,45,120,0.06);border:1px solid rgba(255,45,120,0.12);border-radius:14px;font-size:0.95rem;color:#e8d0e8;text-align:center;line-height:1.45;}
.fqbi-banner strong{color:var(--neon-pink);}
.fqbi-head-btns{display:flex;gap:6px;align-items:center;flex-shrink:0;}

/* Share Button */
.share-btn{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:100px;padding:5px 14px;font-size:0.85rem;color:#b098c8;font-family:var(--font-body);font-weight:700;cursor:pointer;transition:all 0.25s;letter-spacing:0.04em;display:inline-flex;align-items:center;gap:5px;}
.share-btn:hover{border-color:var(--neon-pink);color:var(--neon-pink);}
.share-btn svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}
.view-btn.active{background:var(--neon-blue);color:#fff;}

/* Alert Pills */
.alerts{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.alert-pill{display:flex;align-items:center;gap:5px;padding:7px 14px;border-radius:100px;font-size:0.82rem;font-weight:700;}
.alert-uv{background:rgba(255,45,120,0.1);color:var(--neon-pink);border:1px solid rgba(255,45,120,0.2);}
.alert-rain{background:rgba(78,143,255,0.1);color:var(--neon-blue);border:1px solid rgba(78,143,255,0.2);}
.alert-freeze{background:rgba(86,232,255,0.1);color:var(--neon-cyan);border:1px solid rgba(86,232,255,0.2);}

/* NWS Alerts */
.nws-alerts{margin-bottom:16px;display:flex;flex-direction:column;gap:8px;}
.nws-alert{padding:12px 16px;border-radius:var(--radius-sm);font-size:0.88rem;line-height:1.5;cursor:pointer;transition:all 0.2s;}
.nws-alert .nws-alert-head{display:flex;align-items:center;gap:8px;font-weight:700;font-family:var(--font-display);letter-spacing:0.04em;font-size:0.95rem;}
.nws-alert .nws-alert-body{display:none;margin-top:8px;font-size:0.82rem;color:#e0d0e8;line-height:1.6;max-height:200px;overflow-y:auto;}
.nws-alert.open .nws-alert-body{display:block;}
.nws-alert.sev-extreme{background:rgba(255,50,50,0.15);border:1px solid rgba(255,50,50,0.4);color:#ff6b6b;}
.nws-alert.sev-severe{background:rgba(255,120,50,0.12);border:1px solid rgba(255,120,50,0.35);color:#ff9966;}
.nws-alert.sev-moderate{background:rgba(255,209,102,0.1);border:1px solid rgba(255,209,102,0.3);color:var(--neon-gold);}
.nws-alert.sev-minor{background:rgba(86,232,255,0.08);border:1px solid rgba(86,232,255,0.2);color:var(--neon-cyan);}
.nws-alert.sev-unknown{background:rgba(176,168,200,0.08);border:1px solid rgba(176,168,200,0.2);color:var(--text-dim);}
.nws-alert .nws-chevron{margin-left:auto;transition:transform 0.2s;font-size:0.7rem;}
.nws-alert.open .nws-chevron{transform:rotate(90deg);}

/* Radar */
.radar-wrap{border-radius:var(--radius);overflow:hidden;border:1px solid var(--glass-border);margin-bottom:16px;}
.radar-frame{width:100%;height:380px;border:none;border-radius:var(--radius);}

/* Briefing */
.briefing{background:rgba(22,18,34,0.9);border:1px solid var(--glass-border);border-radius:var(--radius);padding:20px 22px;margin-bottom:16px;}
.briefing-lbl{font-size:0.95rem;text-transform:uppercase;letter-spacing:0.1em;color:var(--text-dim);font-weight:700;margin-bottom:10px;}
.briefing-txt{font-size:1rem;line-height:1.65;font-weight:400;}

/* Sun Row */
.sun-row{display:flex;gap:10px;margin-bottom:16px;}
.sun-item{flex:1;display:flex;align-items:center;gap:12px;padding:16px;background:rgba(22,18,34,0.9);border:1px solid var(--glass-border);border-radius:var(--radius-sm);}
.sun-item svg{width:22px;height:22px;flex-shrink:0;}
.sun-lbl{font-size:1rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-dim);font-weight:700;}
.sun-val{font-family:var(--font-mono);font-size:1.2rem;font-weight:600;}
.sun-rise svg{color:var(--neon-gold);}
.sun-set svg{color:var(--neon-purple);}

/* Stats Grid */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px;}
.stat{background:rgba(22,18,34,0.9);border:1px solid var(--glass-border);border-radius:var(--radius-sm);padding:16px;text-align:center;}
.stat-lbl{font-size:1rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-dim);font-weight:700;margin-bottom:5px;}
.stat-val{font-family:var(--font-mono);font-size:1.2rem;font-weight:600;}
.stat-sub{font-size:0.82rem;color:var(--text-dim);margin-top:3px;}

/* Week Strip */
.week{display:flex;gap:6px;overflow-x:auto;padding:6px 0 10px;margin-bottom:16px;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.week::-webkit-scrollbar{display:none;}
.wday{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:5px;padding:14px 12px;background:rgba(22,18,34,0.9);border:1px solid var(--glass-border);border-radius:var(--radius-sm);min-width:76px;cursor:pointer;transition:all 0.25s;-webkit-tap-highlight-color:transparent;}
.wday:hover{border-color:var(--neon-purple);}
.wday.active{background:rgba(181,55,242,0.1);border-color:var(--neon-purple);box-shadow:0 0 20px rgba(181,55,242,0.1);}
.wday.yesterday{opacity:0.5;}
.wday-dow{font-size:0.95rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-dim);}
.wday.active .wday-dow{color:var(--neon-purple);}
.wday-icon svg{width:24px;height:24px;}
.wday-hi{font-family:var(--font-mono);font-size:0.95rem;font-weight:600;}
.wday-lo{font-family:var(--font-mono);font-size:0.82rem;color:var(--text-dim);}
.wday-rain{font-size:1rem;color:var(--rain);font-weight:600;min-height:14px;}
.wday-fqbi{font-size:1rem;font-weight:700;min-height:14px;}

/* Section Labels */
.sec-lbl{font-family:var(--font-display);font-size:1.2rem;letter-spacing:0.12em;color:var(--text-dim);margin:24px 0 12px;}

/* Chart Tabs */
.chart-tabs-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;flex-wrap:wrap;gap:6px;}
.chart-tabs{display:flex;background:var(--glass);border:1px solid var(--glass-border);border-radius:100px;padding:2px;}
.chart-tab{background:none;border:none;padding:4px 14px;font-size:0.82rem;font-family:var(--font-body);font-weight:600;color:var(--text-dim);cursor:pointer;border-radius:100px;transition:all 0.2s;}
.chart-tab.active{background:var(--neon-blue);color:#fff;}

/* Legend */
.legend{display:flex;gap:18px;margin-bottom:8px;}
.legend-item{display:flex;align-items:center;gap:6px;font-size:0.98rem;color:var(--text-dim);font-weight:500;}
.legend-line{width:18px;height:3px;border-radius:2px;}
.legend-line.actual{background:var(--neon-blue);}
.legend-line.feels{background:repeating-linear-gradient(90deg,var(--warm) 0 4px,transparent 4px 7px);}
.legend-line.precip{background:var(--rain);height:2px;border-style:solid;}
.legend-bar{width:18px;height:9px;border-radius:2px;background:rgba(78,143,255,0.15);border:1px solid rgba(78,143,255,0.3);}

/* Chart Wrap */
.chart-wrap{background:rgba(22,18,34,0.9);border:1px solid var(--glass-border);border-radius:var(--radius);padding:18px 8px 10px;margin-bottom:16px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--border) transparent;}
.chart-wrap::-webkit-scrollbar{height:4px;}
.chart-wrap::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}
canvas#hourlyChart{display:block;}

/* Hourly Table */
.table-wrap{background:rgba(22,18,34,0.9);border:1px solid var(--glass-border);border-radius:var(--radius);overflow:hidden;}
.table-scroll{max-height:440px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--border) transparent;}
.table-scroll::-webkit-scrollbar{width:4px;}
.table-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}
table.hourly{width:100%;border-collapse:collapse;font-size:1rem;}
table.hourly thead th{position:sticky;top:0;background:var(--surface-solid);padding:12px 10px;text-align:left;font-size:1rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-dim);font-weight:700;border-bottom:1px solid var(--border);z-index:1;white-space:nowrap;}
table.hourly tbody tr{border-bottom:1px solid rgba(255,255,255,0.09);transition:background 0.15s;}
table.hourly tbody tr:last-child{border-bottom:none;}
table.hourly tbody tr:hover{background:rgba(255,255,255,0.02);}
table.hourly tbody tr.cur-hr{background:rgba(78,143,255,0.08);}
table.hourly tbody tr[onclick]:hover{background:rgba(255,255,255,0.06);}
.fq-tag{display:block;font-size:0.6rem;line-height:1;margin-top:2px;opacity:0.7;letter-spacing:0.02em;}
.fq-tag.up{color:#4ade80;}.fq-tag.dn{color:#f87171;}
table.hourly td{padding:10px;white-space:nowrap;}
.td-time{font-weight:500;color:var(--text-dim);font-size:0.98rem;}
.td-icon svg{width:18px;height:18px;}
.td-temp{font-family:var(--font-mono);font-weight:500;color:var(--neon-blue);}
.td-feels{font-family:var(--font-mono);font-weight:500;color:var(--warm);}
.td-diff{font-family:var(--font-mono);font-size:0.82rem;}
.td-diff.warmer{color:var(--neon-pink);}
.td-diff.cooler{color:var(--neon-cyan);}
.td-diff.same{color:var(--text-faint);}
.td-rain{font-family:var(--font-mono);color:var(--rain);}
.td-rain.dry{color:var(--text-faint);}
.td-humid{font-family:var(--font-mono);color:var(--text-dim);}
.td-wind{font-family:var(--font-mono);color:var(--text-dim);}
.td-fqbi{font-family:var(--font-mono);font-weight:700;font-size:0.95rem;}

/* Footer */
.footer{text-align:center;padding:40px 16px 20px;font-size:0.95rem;color:var(--text-faint);line-height:1.6;}
.footer a{color:var(--neon-purple);text-decoration:none;}

/* Loading */
.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:80vh;gap:20px;position:relative;z-index:2;}
.spinner{width:40px;height:40px;border:3px solid var(--border);border-top-color:var(--neon-pink);border-radius:50%;animation:spin 0.7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.loading-txt{color:var(--text-dim);font-size:0.95rem;font-weight:500;}

/* Error Card */
.error-card{background:rgba(22,18,34,0.9);border:1px solid var(--neon-pink);border-radius:var(--radius);padding:28px;text-align:center;margin:40px 16px;position:relative;z-index:2;}
.error-card h3{color:var(--neon-pink);margin-bottom:8px;font-family:var(--font-display);font-size:1.4rem;letter-spacing:0.05em;}
.retry-btn{margin-top:16px;padding:12px 28px;background:var(--neon-pink);color:#fff;border:none;border-radius:100px;font-family:var(--font-body);font-weight:700;cursor:pointer;box-shadow:0 0 20px rgba(255,45,120,0.3);}

/* About Overlay */
.about-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.75);backdrop-filter:blur(10px);z-index:100;align-items:center;justify-content:center;padding:20px;}
.about-overlay.show{display:flex;}
.about-panel{background:#140e20;border:1px solid var(--border);border-radius:var(--radius);padding:32px;max-width:560px;width:100%;max-height:80vh;overflow-y:auto;position:relative;}
.about-panel h2{font-family:var(--font-display);font-size:1.6rem;letter-spacing:0.06em;background:linear-gradient(135deg,var(--neon-gold),var(--neon-pink),var(--neon-purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:18px;}
.about-panel p{font-size:0.95rem;color:#c8b8d8;line-height:1.7;margin-bottom:14px;}
.close-x{position:absolute;top:16px;right:16px;background:none;border:none;color:#b098c8;font-size:1.4rem;cursor:pointer;}
.about-panel code{display:block;background:rgba(255,255,255,0.09);border:1px solid rgba(255,255,255,0.09);border-radius:8px;padding:14px;font-family:var(--font-mono);font-size:0.82rem;color:#dcc8e8;line-height:1.6;margin:14px 0;white-space:pre-wrap;}
.about-panel em{color:var(--neon-pink);font-style:normal;}
.about-panel .qt{color:#e8eaf0;font-style:italic;border-left:3px solid var(--neon-pink);padding-left:16px;margin:18px 0;}

/* Flavor Picker */
.flavor-overlay{display:none;position:fixed;inset:0;background:rgba(4,2,8,0.92);z-index:200;align-items:center;justify-content:center;padding:20px;}
.flavor-overlay.show{display:flex;}
.flavor-panel{text-align:center;max-width:420px;width:100%;animation:fadeUp 0.6s ease;}
.flavor-q{font-family:var(--font-display);font-size:2.2rem;letter-spacing:0.06em;background:linear-gradient(135deg,var(--neon-gold),var(--neon-pink),var(--neon-purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:8px;}
.flavor-sub{font-size:1rem;color:#c8b8d8;margin-bottom:32px;font-style:italic;line-height:1.5;}
.flavor-opts{display:flex;gap:16px;justify-content:center;}
.flavor-opts-3{flex-wrap:wrap;}
.flavor-opts-3 .flavor-btn{max-width:150px;padding:22px 16px;}
.flavor-btn{flex:1;max-width:180px;padding:28px 20px;background:rgba(22,18,34,0.9);border:2px solid rgba(255,255,255,0.09);border-radius:var(--radius);cursor:pointer;transition:all 0.3s;display:flex;flex-direction:column;align-items:center;gap:12px;}
.flavor-btn:hover{transform:translateY(-4px);}
.flavor-btn.women:hover{border-color:var(--neon-pink);box-shadow:0 0 30px rgba(255,45,120,0.25);}
.flavor-btn.men:hover{border-color:var(--neon-purple);box-shadow:0 0 30px rgba(181,55,242,0.25);}
.flavor-emoji{font-size:3rem;}
.flavor-label{font-family:var(--font-display);font-size:1.3rem;letter-spacing:0.08em;color:var(--text);}
.flavor-tease{font-size:1rem;color:#b098c8;margin-top:2px;line-height:1.4;}

/* Animations */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
.fi{animation:fadeUp 0.5s ease forwards;opacity:0;}
.fi.d1{animation-delay:0.06s;}
.fi.d2{animation-delay:0.12s;}
.fi.d3{animation-delay:0.18s;}
.fi.d4{animation-delay:0.24s;}
.fi.d5{animation-delay:0.3s;}
.fi.d6{animation-delay:0.36s;}

/* Reduced Motion */
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important;}.ambient{display:none;}}

/* Mobile Responsive */
@media(max-width:640px){
  .stats{grid-template-columns:repeat(2,1fr);}
  .hero-temp{font-size:4.5rem;}
  .sun-row{flex-direction:column;}
  table.hourly .hide-m{display:none;}
  .fqbi-body{flex-direction:column;align-items:center;text-align:center;}
  .fqbi-gauge{width:140px;height:140px;}
  .fqbi-gauge svg{width:140px;height:140px;}
  .fqbi-score{font-size:2.8rem;}
  .fqbi-brand{font-size:1.4rem;}
  .fqbi-status-label{font-size:1.2rem;}
  .hero{padding:24px 20px;}
  .fqbi{padding:22px 18px;}
  .radar-frame{height:300px;}
}
/* Settings */
.gear-btn{background:none;border:none;color:var(--text-dim);font-size:1.3rem;cursor:pointer;padding:4px 8px;opacity:0.7;transition:opacity 0.2s;}
.gear-btn:hover{opacity:1;}
.settings-group{margin:20px 0;}
.settings-label{font-family:'Bebas Neue',sans-serif;font-size:1.1rem;letter-spacing:0.05em;color:var(--text-dim);margin-bottom:10px;}
.settings-opts{display:flex;gap:10px;flex-wrap:wrap;}
.settings-opt{padding:10px 18px;border-radius:12px;border:1.5px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.04);color:var(--text-main);font-family:'Urbanist',sans-serif;font-size:0.95rem;font-weight:600;cursor:pointer;transition:all 0.2s;}
.settings-opt:hover{background:rgba(255,255,255,0.08);}
.settings-opt.active{border-color:var(--neon-cyan);background:rgba(86,232,255,0.1);color:var(--neon-cyan);}
.settings-reset{margin-top:16px;padding:12px 24px;border-radius:12px;border:1.5px solid rgba(248,113,113,0.3);background:rgba(248,113,113,0.06);color:#f87171;font-family:'Urbanist',sans-serif;font-size:0.9rem;font-weight:600;cursor:pointer;transition:all 0.2s;width:100%;}
.settings-reset:hover{background:rgba(248,113,113,0.15);}

/* Best Day This Week */
.best-day{position:relative;z-index:1;margin:16px;padding:16px 20px;background:rgba(86,232,255,0.04);border:1px solid rgba(86,232,255,0.12);border-radius:16px;text-align:center;}
.best-day-label{font-family:'Bebas Neue',sans-serif;font-size:0.85rem;letter-spacing:0.1em;color:var(--text-dim);margin-bottom:6px;}
.best-day-text{font-size:1rem;color:var(--text-main);line-height:1.5;}
.best-day-score{font-family:'Bebas Neue',sans-serif;font-weight:700;}

/* Yesterday Delta */
.fqbi-delta{display:inline-block;margin-left:8px;font-size:0.8rem;font-weight:700;padding:2px 8px;border-radius:8px;}
.fqbi-delta.up{color:#4ade80;background:rgba(74,222,128,0.1);}
.fqbi-delta.down{color:#f87171;background:rgba(248,113,113,0.1);}
.fqbi-delta.same{color:var(--text-dim);background:rgba(255,255,255,0.05);}


/* ============ CITY SEARCH ============ */
.city-search-panel{max-height:80vh;overflow-y:auto;}
.city-search-wrap{margin:16px 0;}
.city-search-input{width:100%;padding:14px 18px;border-radius:14px;border:1.5px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.04);color:var(--text-main);font-family:'Urbanist',sans-serif;font-size:1rem;outline:none;box-sizing:border-box;transition:border-color 0.2s;}
.city-search-input:focus{border-color:var(--neon-cyan);}
.city-search-input::placeholder{color:rgba(255,255,255,0.3);}
.city-search-results{margin-top:12px;max-height:320px;overflow-y:auto;}
.city-result{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;cursor:pointer;transition:background 0.15s;}
.city-result:hover{background:rgba(255,255,255,0.06);}
.city-flag{font-size:1.5rem;min-width:32px;text-align:center;}
.city-info{flex:1;min-width:0;}
.city-name{font-weight:600;color:var(--text-main);font-size:0.95rem;}
.city-detail{font-size:0.8rem;color:var(--text-dim);margin-top:2px;}
.city-pin-btn{background:none;border:none;font-size:1.1rem;cursor:pointer;padding:6px;border-radius:8px;transition:background 0.15s;}
.city-pin-btn:hover{background:rgba(255,255,255,0.1);}
.city-loading{text-align:center;color:var(--text-dim);padding:20px;font-size:0.9rem;}
.city-actions{flex-shrink:0;}

/* ============ PINNED CITIES DASHBOARD ============ */
.pinned-dash{position:relative;z-index:1;margin:16px;padding:16px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);border-radius:16px;}
.pinned-dash-label{font-family:'Bebas Neue',sans-serif;font-size:0.85rem;letter-spacing:0.1em;color:var(--text-dim);margin-bottom:12px;text-align:center;}
.pinned-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:10px;}
.pinned-card{text-align:center;padding:12px 8px;border-radius:14px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);transition:all 0.2s;}
.pinned-card:hover{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.12);}
.pinned-card-name{font-family:'Bebas Neue',sans-serif;font-size:0.8rem;letter-spacing:0.05em;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pinned-card-icon{font-size:1.3rem;margin:4px 0;}
.pinned-card-temp{font-size:0.8rem;color:var(--text-dim);}
.pinned-card-score{font-family:'Bebas Neue',sans-serif;font-size:1.8rem;font-weight:700;line-height:1.1;}
.pinned-card-zone{font-size:0.85rem;margin-top:2px;}
.loading-card .pinned-card-score{animation:pulse 1.2s infinite;}
@keyframes pulse{0%,100%{opacity:0.3}50%{opacity:1}}

/* Pinned manage in search panel */
.pinned-manage{margin-top:20px;border-top:1px solid rgba(255,255,255,0.08);padding-top:16px;}
.pinned-label{font-family:'Bebas Neue',sans-serif;font-size:0.85rem;letter-spacing:0.1em;color:var(--text-dim);margin-bottom:8px;}
.pinned-hint{text-align:center;color:var(--text-dim);font-size:0.85rem;padding:10px;}
.pinned-item{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-radius:10px;background:rgba(255,255,255,0.03);margin-bottom:6px;}
.pinned-item span{font-weight:600;color:var(--text-main);}
.pinned-remove{background:none;border:none;color:#f87171;font-size:1rem;cursor:pointer;padding:4px 8px;}

/* ============ TREND CHART ============ */
.trend-card{position:relative;z-index:1;margin:16px;padding:16px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);border-radius:16px;text-align:center;}
.trend-label{font-family:'Bebas Neue',sans-serif;font-size:0.85rem;letter-spacing:0.1em;color:var(--text-dim);margin-bottom:8px;}
.trend-svg{width:100%;max-width:300px;height:auto;}
.trend-footer{display:flex;justify-content:space-between;margin-top:8px;font-size:0.8rem;color:var(--text-dim);}


/* ============ SCIENTIFIC METADATA ============ */
.fqbi-meta{margin-top:14px;padding:12px 16px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:12px;}
.fqbi-meta-row{display:flex;justify-content:space-between;align-items:center;font-size:0.75rem;gap:8px;flex-wrap:wrap;}
.fqbi-meta-row+.fqbi-meta-row{margin-top:4px;}
.fqbi-meta-dim{color:var(--text-dim);font-size:0.7rem;opacity:0.7;}
.fqbi-conf{font-weight:600;color:var(--text-main);}
.fqbi-model{font-family:'JetBrains Mono',monospace;font-size:0.7rem;color:var(--text-dim);padding:2px 8px;background:rgba(255,255,255,0.04);border-radius:6px;}

/* Confidence bar in breakdown */
.bd-conf{margin:16px 0;padding:12px;background:rgba(255,255,255,0.03);border-radius:10px;}
.bd-conf-label{font-size:0.8rem;color:var(--text-dim);margin-bottom:6px;}
.bd-conf-bar{height:8px;background:rgba(255,255,255,0.08);border-radius:4px;overflow:hidden;}
.bd-conf-fill{height:100%;border-radius:4px;transition:width 0.5s ease;}
.bd-conf-pct{text-align:right;font-family:'Bebas Neue',sans-serif;font-size:1.1rem;margin-top:4px;}
.bd-meta{margin-top:12px;font-size:0.7rem;color:var(--text-dim);opacity:0.6;line-height:1.5;text-align:center;}

/* Methodology panel */
.method-section{margin:20px 0;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,0.06);}
.method-section:last-child{border-bottom:none;}
.method-section h3{font-family:'Bebas Neue',sans-serif;font-size:1.1rem;letter-spacing:0.05em;color:var(--neon-cyan);margin-bottom:8px;}
.method-section p{font-size:0.9rem;line-height:1.6;color:var(--text-main);margin-bottom:8px;}
.method-code{font-family:'JetBrains Mono',monospace;font-size:0.78rem;color:var(--text-dim);line-height:1.5;background:rgba(0,0,0,0.3);padding:10px 14px;border-radius:8px;}
.method-list{list-style:none;padding:0;margin:8px 0;}
.method-list li{padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.04);font-size:0.88rem;line-height:1.5;}
.method-list li:last-child{border-bottom:none;}
.method-list li strong{color:var(--neon-cyan);}
.method-export{padding:10px 20px;border-radius:10px;border:1.5px solid rgba(86,232,255,0.3);background:rgba(86,232,255,0.06);color:var(--neon-cyan);font-family:'Urbanist',sans-serif;font-weight:600;cursor:pointer;font-size:0.85rem;transition:all 0.2s;}
.method-export:hover{background:rgba(86,232,255,0.15);}
.method-footer{text-align:center;}
.method-dim{font-size:0.75rem;color:var(--text-dim);opacity:0.6;}


/* ============ PRODUCTION POLISH ============ */
.last-updated{font-size:0.65rem;color:var(--text-dim);opacity:0.6;margin-left:4px;font-family:'JetBrains Mono',monospace;}
.embed-code{width:100%;padding:10px 12px;border-radius:10px;border:1.5px solid rgba(255,255,255,0.1);background:rgba(0,0,0,0.3);color:var(--neon-cyan);font-family:'JetBrains Mono',monospace;font-size:0.75rem;resize:none;box-sizing:border-box;}
.embed-code:focus{outline:none;border-color:var(--neon-cyan);}

@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.skeleton{background:linear-gradient(90deg,rgba(255,255,255,0.03) 25%,rgba(255,255,255,0.08) 50%,rgba(255,255,255,0.03) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:8px;}


/* ============ DUAL-SOURCE VALIDATION ============ */
.fqbi-dual{font-size:0.7rem;padding:2px 8px;background:rgba(74,222,128,0.1);border:1px solid rgba(74,222,128,0.2);border-radius:6px;color:#4ade80;font-weight:600;}
.bd-dual{text-align:center;padding:8px;margin:8px 0;border-radius:8px;font-size:0.8rem;}
.bd-dual:first-child{background:rgba(74,222,128,0.06);color:#4ade80;}
.moon-item{border-top:1px solid rgba(255,255,255,0.05);padding-top:12px !important;margin-top:4px;}
.stat-aqi{border:1px solid rgba(255,255,255,0.06);}