:root{--bg:#0b1b2b;--panel:#0f2740;--border:#143a5c;--text:#e7eef6;--good:#a2f2a2;--bad:#ff9aa2;--warm:#ffb86b;--cool:#7abaff;--stable:#b7c2cc}
  body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;margin:0;background:var(--bg);color:var(--text)}
  header{padding:14px 20px;background:#0f2740;border-bottom:1px solid var(--border);display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
  h1{margin:0;font-size:14px;font-weight:400;text-align:center;grid-column:2}
  .toolbar{grid-column:3;justify-self:end}.toolbar .small{font-size:12px;opacity:.8}
  .wrap{max-width:1200px;margin:0 auto;padding:16px 24px}
  .cards-top{display:grid;grid-template-columns:2fr 2fr 1fr;gap:12px;margin-bottom:16px;grid-auto-rows:1fr}
  .card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:14px;min-height:120px}
  .k{opacity:.85;font-size:13px}.v{font-size:26px;margin-top:4px}.small{font-size:13px;opacity:.95}
  .row{display:flex;gap:12px;flex-wrap:wrap;margin:12px 0}.narrow{max-width:720px;flex:1 1 720px}
  canvas{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:8px}
  a,a:visited{color:#9fd1ff}
  .period-bottom{display:flex;justify-content:center;gap:8px;margin:8px 0 14px 0}
  select{background:var(--panel);border:1px solid #305a82;color:var(--text);border-radius:8px;padding:6px}
  #temp_out{font-size:28px!important;font-weight:600}
  #mslp_out{font-size:26px!important;font-weight:600}
  .card.humid{display:flex;align-items:center;justify-content:space-between}
  .card.humid .k{display:inline-block;margin:0;white-space:nowrap}
  .card.humid .v{display:inline-block;margin:0;white-space:nowrap;font-size:18px;line-height:1.05}
  .trend-block{border-left:3px solid #244e75;padding-left:10px;margin-top:6px}
  .c-warm{color:var(--warm)} .c-cool{color:var(--cool)} .c-stable{color:var(--stable)}
  .c-good{color:var(--good)} .c-bad{color:var(--bad)}
  .val-chip{display:inline-block;padding:2px 6px;border-radius:8px;background:rgba(255,255,255,.06);margin-left:6px;font-weight:600}
  .chip-warm{color:var(--warm)} .chip-cool{color:var(--cool)} .chip-stable{color:var(--stable)}
  .chip-good{color:var(--good)} .chip-bad{color:var(--bad)}

  /* ---------- Mobile (<= 720px) ---------- */
  @media (max-width: 720px){
    header{grid-template-columns:1fr;row-gap:6px}
    h1{grid-column:auto;text-align:left;font-size:16px}
    .toolbar{display:none}
    .wrap{padding:12px}
    .cards-top{grid-template-columns:1fr;gap:10px}
    .row{flex-direction:column}
    .row > *{flex:1 1 100% !important;min-width:100% !important}
    .narrow{max-width:100%;flex:1 1 auto}
    .card{padding:12px;border-radius:12px}
    .k{font-size:14px}.v{font-size:22px}
    .card.humid .v{font-size:18px}
    .period-bottom{justify-content:space-between}
    select{width:100%}
    /* По-високи графики за пръсти */
    canvas{height:240px !important;width:100% !important;max-width:100% !important;display:block}
  }
#acc-card{font-size:12px}
#acc-card .acc-title{font-size:14px;font-weight:600}
#acc-card .acc-row{font-size:13px}
#acc-card .acc-note{font-size:10px;opacity:.7}

:root{--acc-width:340px;} /* <-- тук сменяш ширината когато поискаш */
#row-forecast-wrap{display:grid;grid-template-columns:1fr var(--acc-width);gap:12px;align-items:start}
#acc-col{width:var(--acc-width)}
#acc-card{max-width:100%}
@media (max-width:720px){
  #row-forecast-wrap{grid-template-columns:1fr} /* на мобилен да се подредят един под друг */
}

#acc-card{font-size:12px}
#acc-card .acc-title{font-size:16px;font-weight:600}
#acc-card .acc-row{font-size:15px}
#acc-card .acc-note{font-size:12px;opacity:.7}

/* --- Gutters for charts (safe & minimal) --- */
.wrap{padding-left:24px; padding-right:24px}
canvas#tempChart, canvas#mslpChart{display:block; margin:0 16px}