:root {
  --bg1:#1f2226;
  --bg2:#272a2f;
  --text:#ffffff;
  --muted:#b9bec7;
  --accent:#ea6e4b;
  --card1:#2a2e34;
  --card2:#30343b;
  --chip:#32363d;
  --shadow:0 10px 25px rgba(0,0,0,.35);
}

*{margin:0;padding:0;box-sizing:border-box}
body {
  background:linear-gradient(180deg,var(--bg1),#15171a 80%);
  color:var(--text);
  font-family:'Poppins',sans-serif;
  min-height:100vh;
}

.app-shell{display:flex;min-height:100vh}

/* Sidebar */
.sidebar{width:68px;background:var(--bg2);display:flex;flex-direction:column;align-items:center;gap:22px;padding:18px 10px;box-shadow:var(--shadow)}
.sidebar .logo{font-size:28px;color:var(--accent)}
.icon-btn{width:42px;height:42px;border-radius:14px;border:none;cursor:pointer;background:#343840;color:var(--text);display:grid;place-items:center;transition:.25s}
.icon-btn:hover{transform:translateY(-3px);background:#3b3f47}

/* Main */
.main{flex:1;padding:22px 22px 40px}

/* Header */
.header{display:flex;flex-wrap:wrap;align-items:center;gap:14px;justify-content:space-between;margin-bottom:18px}
.header h1{font-size:24px;font-weight:700;color:var(--accent)}

.controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.input-wrap{display:flex;align-items:center;gap:10px;background:var(--bg2);padding:12px 14px;border-radius:28px;min-width:240px;border:1px solid #3a3f46}
.input-wrap input{background:transparent;border:none;color:var(--text);outline:none;font-size:15px;width:220px}
.pill-btn{border:none;border-radius:28px;padding:12px 18px;cursor:pointer;font-weight:600;background:#fff;color:#111;display:flex;align-items:center;gap:8px;transition:.3s}
.pill-btn.accent{background:var(--accent);color:#fff}
.pill-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,0.4)}

.unit-toggle{background:var(--bg2);border-radius:20px;padding:8px 12px;display:flex;align-items:center;gap:8px;border:1px solid #3a3f46;cursor:pointer}
.unit-toggle .unit{opacity:.6}
.unit-toggle .active{opacity:1;font-weight:700;color:var(--accent)}
.unit-toggle .divider{opacity:.3}

/* Alerts */
.alert{background:#4a1010;color:#ffdede;border:1px solid #812b2b;padding:10px 14px;border-radius:10px;margin:6px 0 14px 0}

/* Cards */
.card{background:linear-gradient(145deg,var(--card1),var(--card2));border:none;border-radius:18px;box-shadow:var(--shadow);padding:18px;transition:.3s}
.card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(0,0,0,.6)}
.card-title{font-weight:700;margin-bottom:10px;opacity:.9;color:var(--accent)}

.grid.two-col{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}
@media(max-width:900px){.grid.two-col{grid-template-columns:1fr}}

/* Current block */
.current{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}
@media(max-width:900px){.current{grid-template-columns:1fr}}
.place-row h2{font-size:22px}
.place-row span{color:var(--muted);font-size:14px}
.temp-row{display:flex;align-items:center;gap:14px;margin:14px 0}
#currentIcon{width:70px;height:70px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{background:var(--chip);border-radius:999px;padding:8px 12px;font-size:13px;color:#e4e7ec}

/* Mini cards */
.mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mini-card{background:#30343b;border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:4px}
.mini-card span{font-size:12px;color:#CDD3DC}
.mini-card b{font-size:15px}

/* Hourly/Daily */
.hourly-strip{display:flex;gap:10px;overflow:auto;padding-bottom:6px}
.hourly-item{min-width:82px;background:#30343b;border-radius:14px;padding:10px;text-align:center}
.hourly-item img{width:46px;height:46px}
.daily-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
@media(max-width:900px){.daily-grid{grid-template-columns:repeat(2,1fr)}}
.daily-item{background:#30343b;border-radius:14px;padding:12px;text-align:center}
.daily-item img{width:52px;height:52px}
.day{font-weight:700}
.range{font-size:13px;color:#cbd2dc}

/* Footer */
.footer{opacity:.7;margin-top:16px;display:flex;justify-content:space-between;font-size:12px}

/* Loader */
.skeleton::after{content:"";display:block;height:4px;border-radius:999px;background:linear-gradient(90deg,#2f333a,#3a3f46,#2f333a);animation:sk 1.3s infinite}
@keyframes sk{0%{transform:translateX(-20%)}50%{transform:translateX(20%)}100%{transform:translateX(-20%)}}