:root { --bg:#f5f7f9; --card:#fff; --ink:#1d2730; --muted:#6b7884; --line:#e2e7ec; --accent:#0b6fa4; --bad:#c0392b; --ok:#1e8449; }
[hidden] { display:none !important; }
* { box-sizing: border-box; }
body { margin:0; font:14px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif; background:var(--bg); color:var(--ink); }
#nav { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; padding:10px 16px; background:#12344a; color:#fff; }
#nav .brand { font-weight:700; font-size:16px; }
#nav .links { display:flex; flex-wrap:wrap; gap:4px 14px; align-items:center; }
#nav a { color:#cfe3f0; text-decoration:none; }
#nav a.on, #nav a:hover { color:#fff; text-decoration:underline; }
#nav .who { color:#8fb3c9; }
main { max-width:1150px; margin:0 auto; padding:16px; }
h1 { font-size:20px; margin:4px 0 4px; }
h2 { font-size:16px; margin:24px 0 10px; }
.sub { color:var(--muted); margin:0 0 12px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px 14px; }
.card.stale { opacity:.55; }
.card h3 { font-size:14px; margin:0; }
.card .when { color:var(--muted); font-size:12px; margin:2px 0 10px; }
.card .when b { color:var(--ink); font-weight:600; }
.badge { display:inline-block; font-size:11px; padding:1px 6px; border-radius:8px; background:#fdecea; color:var(--bad); margin-left:6px; vertical-align:middle; }
.kv { display:grid; grid-template-columns:1fr auto; gap:3px 12px; }
.kv .k { color:var(--muted); }
.kv .v { font-variant-numeric:tabular-nums; font-weight:600; text-align:right; }
.kv .v small { color:var(--muted); font-weight:400; }
table { border-collapse:collapse; width:100%; background:var(--card); }
th, td { padding:6px 8px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle; }
th { background:#eef2f5; font-weight:600; font-size:13px; }
.tablewrap { overflow-x:auto; border:1px solid var(--line); border-radius:8px; }
input, select, button { font:inherit; }
input[type=text], input[type=password], input[type=number], input[type=url], select {
  padding:6px 8px; border:1px solid #c8d0d8; border-radius:6px; background:#fff; min-width:0; }
input.narrow { width:70px; } input.mid { width:130px; }
button { padding:6px 12px; border:1px solid var(--accent); background:var(--accent); color:#fff; border-radius:6px; cursor:pointer; }
button.ghost { background:#fff; color:var(--accent); }
button.danger { background:#fff; color:var(--bad); border-color:var(--bad); }
button:disabled { opacity:.5; cursor:default; }
.row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:8px 0; }
.form { display:grid; grid-template-columns:max-content minmax(0,340px); gap:8px 12px; align-items:center; }
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin:12px 0 16px; flex-wrap:wrap; }
.tabs button { background:none; color:var(--muted); border:none; border-bottom:2px solid transparent; border-radius:0; padding:8px 12px; }
.tabs button.on { color:var(--accent); border-bottom-color:var(--accent); }
.muted { color:var(--muted); } .ok { color:var(--ok); } .bad { color:var(--bad); }
code, .mono { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px; }
pre { background:#0f2230; color:#d6e6f2; padding:10px; border-radius:8px; overflow-x:auto; font-size:12px; }
.keybox { background:#fffbe6; border:1px solid #f0d870; padding:8px 10px; border-radius:6px; word-break:break-all; }
#toast { position:fixed; left:50%; bottom:20px; transform:translateX(-50%) translateY(80px); background:#1d2730; color:#fff;
  padding:10px 16px; border-radius:8px; transition:transform .2s; z-index:10; max-width:90vw; }
#toast.show { transform:translateX(-50%) translateY(0); } #toast.bad { background:var(--bad); }
.login { max-width:340px; margin:12vh auto; }
.login .card { padding:22px; }
.login input { width:100%; margin:4px 0 12px; }
.login button { width:100%; padding:9px; }
@media (max-width:600px) { .form { grid-template-columns:1fr; } main { padding:12px; } }

/* ---- dashboard layout editing */
#editbar { position:sticky; top:0; z-index:5; display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between;
  padding:8px 16px; background:#fff8db; border-bottom:1px solid #f0d870; }
.card.editable { cursor:grab; position:relative; outline:1px dashed #9fb6c6; outline-offset:-1px; }
.card.editable:active { cursor:grabbing; }
.card.is-hidden { opacity:.4; background:repeating-linear-gradient(45deg,#fff,#fff 8px,#f4f6f8 8px,#f4f6f8 16px); }
.card.dragging { opacity:.3; }
.card.drop-before { box-shadow:-4px 0 0 var(--accent); }
.card.drop-after { box-shadow:4px 0 0 var(--accent); }
.cardtools { display:flex; gap:4px; justify-content:flex-end; margin:-4px -6px 6px 0; }
button.tiny { padding:2px 8px; font-size:12px; }
.title-in { width:100%; font-weight:600; margin-bottom:2px; }
.lbl-in { width:100%; padding:2px 6px !important; font-size:13px; }
.editing .kv { grid-template-columns:minmax(0,1fr) auto; align-items:center; }
.sechead { display:flex; gap:6px; align-items:center; margin:24px 0 10px; }
.sec-in { font-size:15px; font-weight:600; flex:0 1 320px; }
@media (max-width:600px) { .hide-sm { display:none; } }

/* ---- forecast card */
.card.wide { grid-column:1 / -1; }
.daytiles { display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; margin:4px 0 10px; }
.daytile { flex:0 0 150px; text-align:left; background:#f7f9fb; color:var(--ink); border:1px solid var(--line); border-radius:8px; padding:8px 10px; cursor:pointer; }
.daytile:hover { border-color:var(--accent); }
.daytile .dname { font-weight:600; font-size:13px; }
.daytile .dwind { font-size:17px; font-weight:700; border-radius:6px; padding:2px 6px; margin:4px 0; display:inline-block; }
.daytile .dsub { color:var(--muted); font-size:12px; }
.fcctl { font-size:13px; color:var(--muted); margin:0 0 6px; gap:16px; }
.fcwrap { overflow-x:auto; border:1px solid var(--line); border-radius:8px; }
.fctable { border-collapse:separate; border-spacing:0; width:auto; font-variant-numeric:tabular-nums; }
.fctable th, .fctable td { padding:4px 6px; text-align:center; border-bottom:1px solid var(--line); white-space:nowrap; font-size:13px; min-width:38px; }
.fctable th { background:#eef2f5; font-weight:600; }
.fctable .hd { font-size:11px; color:var(--muted); font-weight:600; }
.fctable .daystart { border-left:2px solid #b9c6d1; }
.fctable .rowlabel { position:sticky; left:0; z-index:1; background:#f7f9fb; text-align:left; min-width:110px; font-weight:600; }
.fctable .rowlabel small { color:var(--muted); font-weight:400; }
.fctable .cmp { font-size:10px; color:var(--muted); }
.arr { display:inline-block; font-weight:700; color:#12344a; }
.w0 { background:#eef3f7; } .w1 { background:#d6efd9; } .w2 { background:#a9e0a6; } .w3 { background:#f3e98a; }
.w4 { background:#f7c070; } .w5 { background:#f08a6a; } .w6 { background:#c98be0; }
.daytiles.big { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); overflow:visible; }
.daytiles.big .daytile { flex:none; }
@media (max-width:600px) { .daytiles.big { display:flex; overflow-x:auto; } .daytiles.big .daytile { flex:0 0 150px; } }
.legend { display:inline-flex; gap:2px; align-items:center; flex-wrap:wrap; }
.legend i { font-style:normal; font-size:11px; padding:1px 6px; border-radius:4px; color:var(--ink); }

/* ---- per-card rows, charts, data */
.lblwrap { display:flex; gap:4px; align-items:center; }
button.eye { background:#fff; border:1px solid var(--line); padding:0 5px; font-size:12px; line-height:20px; color:var(--ink); }
button.eye.off { background:#fdecea; }
.rowoff { opacity:.4; text-decoration:line-through; }
.editing .rowoff input { text-decoration:line-through; }
.chartimg img { display:block; width:100%; height:auto; margin-top:8px; border:1px solid var(--line); border-radius:6px; background:#fff; }
.calimg { position:relative; display:inline-block; max-width:100%; border:1px solid var(--line); margin-top:8px; }
.calimg img { display:block; max-width:100%; height:auto; }
.calimg canvas { position:absolute; left:0; top:0; cursor:crosshair; }
#cal_modes button.on { background:var(--accent); color:#fff; }
.swatch { display:inline-block; width:22px; height:22px; border:1px solid #999; border-radius:4px; vertical-align:middle; }
.steps { margin:0 0 8px 18px; padding:0; }
.card.chartcard { grid-column:span 2; }
.windwrap { margin-top:10px; }
.windwrap svg.windchart { display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:6px; }
.windph { color:var(--muted); font-size:12px; padding:30px 0; text-align:center; border:1px dashed var(--line); border-radius:6px; }
.windctl { margin-top:4px; }
.windctl select { padding:2px 4px; font-size:12px; }
@media (max-width:600px) { .card.chartcard { grid-column:auto; } }

/* ---- chart explorer */
main.wide-main { max-width:1400px; }
.ctl { margin:10px 0 12px; }
#presets button { background:#fff; color:var(--accent); }
#presets button.on { background:var(--accent); color:#fff; }
.chartlayout { display:grid; grid-template-columns:280px minmax(0,1fr); gap:12px; align-items:start; }
.picker { max-height:640px; overflow:auto; position:sticky; top:8px; }
.picker input[type=search] { width:100%; padding:6px 8px; border:1px solid #c8d0d8; border-radius:6px; margin:6px 0; }
.picker details { border-bottom:1px solid var(--line); padding:4px 0; }
.picker summary { cursor:pointer; font-weight:600; font-size:13px; }
.picker label.pick { display:block; padding:2px 0 2px 6px; font-size:13px; cursor:pointer; }
.chip { display:flex; gap:6px; align-items:center; padding:4px 0; border-bottom:1px dashed var(--line); font-size:13px; }
.chip span { flex:1; line-height:1.2; }
.chip input[type=color] { width:26px; height:26px; padding:0; border:none; background:none; }
.plotcard { min-height:300px; }
.plotcard .hint { font-size:12px; margin:6px 0 0; }
.uplot .u-legend { font-size:12px; text-align:left; }
.uplot .u-legend .u-series th { font-weight:400; }
@media (max-width:800px) { .chartlayout { grid-template-columns:1fr; } .picker { position:static; max-height:320px; } }
#cal_lines tr.picking td { background:#fff8db; }
#cal_lines input.mid { width:150px; }
.bandpill { display:inline-block; padding:0 7px; border-radius:10px; line-height:1.5; }
.bandpill small { color:inherit !important; opacity:.85; }
.bandtext { font-weight:700; }
.cbmetrics { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:2px 12px; max-height:180px; overflow:auto; border:1px solid var(--line); border-radius:6px; padding:6px 8px; }
.cbm { font-size:13px; }
#cb_preview .bandpill, #cb_preview .bandtext { margin:2px 0; }
#nav .ver { font-weight:400; font-size:11px; color:#8fb3c9; margin-left:4px; }

/* ---- card values: larger, in a column near the middle (v1.1.2) */
.kv { grid-template-columns:minmax(0, 46%) minmax(0, 1fr); gap:5px 14px; align-items:center; max-width:380px; }
.kv .k { font-size:14px; }
.kv .v { text-align:left; font-size:17px; font-weight:650; white-space:nowrap; }
.kv .v small { font-size:12px; }
.kv .v .bandpill { padding:1px 9px; }
.editing .kv { grid-template-columns:minmax(0, 1fr) minmax(0, 40%); max-width:none; }

/* ---- card values start just right of the card's centre (v1.3.2) */
.kv { grid-template-columns:minmax(0, 54%) minmax(0, 1fr); max-width:none; }
.card.chartcard .kv { max-width:none; }
.editing .kv { grid-template-columns:minmax(0, 1fr) minmax(0, 40%); max-width:none; }
/* ---- headings editor */
select.moveto { font-size:12px; padding:2px 4px; max-width:150px; }
.dropzone { grid-column:1 / -1; border:2px dashed #b9c6d1; border-radius:10px; padding:22px; text-align:center; color:var(--muted); }
.grid.dropgrid { outline:2px dashed var(--accent); outline-offset:4px; border-radius:10px; }
.cardtools { flex-wrap:wrap; }