:root{
  --bg:#f4f7fb;
  --bg-soft:#eef3f9;
  --surface:#ffffff;
  --surface-2:#f8fbff;
  --sidebar:#ffffff;
  --sidebar-2:#f8fbff;
  --text:#0f172a;
  --muted:#64748b;
  --muted-2:#94a3b8;
  --line:#dbe4ee;
  --line-strong:#cfd9e5;
  --shadow:0 20px 45px rgba(15, 23, 42, 0.08);
  --accent:#0ea5a6;
  --accent-strong:#0f766e;
  --accent-soft:rgba(14,165,166,.10);
  --blue:#2563eb;
  --blue-soft:rgba(37,99,235,.10);
  --amber:#d97706;
  --amber-soft:rgba(217,119,6,.10);
  --red:#dc2626;
  --red-soft:rgba(220,38,38,.10);
  --violet:#7c3aed;
  --violet-soft:rgba(124,58,237,.10);
  --success:#16a34a;
  --success-soft:rgba(22,163,74,.10);
  --radius:22px;
  --radius-sm:14px;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --sidebar-width:276px;
}
html[data-theme="dark"]{
  --bg:#09101c;
  --bg-soft:#111a28;
  --surface:#121b2a;
  --surface-2:#182335;
  --sidebar:#08111f;
  --sidebar-2:#0b1525;
  --text:#f3f7fb;
  --muted:#a7b4c7;
  --muted-2:#7f8ba0;
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.13);
  --shadow:0 24px 48px rgba(0,0,0,.35);
  --accent-soft:rgba(45,212,191,.14);
  --blue-soft:rgba(96,165,250,.14);
  --amber-soft:rgba(251,191,36,.14);
  --red-soft:rgba(248,113,113,.14);
  --violet-soft:rgba(167,139,250,.14);
  --success-soft:rgba(74,222,128,.14);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font);
  background:radial-gradient(circle at top left, rgba(14,165,166,.08), transparent 25%), linear-gradient(180deg,var(--bg),var(--bg-soft));
  color:var(--text);
  min-height:100vh;
}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
input,select,textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--surface);
  color:var(--text);
  padding:13px 14px;
  outline:none;
}
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{background:var(--surface-2)}
input:focus,select:focus,textarea:focus{border-color:rgba(14,165,166,.55);box-shadow:0 0 0 4px rgba(14,165,166,.10)}
textarea{min-height:112px;resize:vertical}

.layout{display:flex;min-height:100vh}
.sidebar{
  width:var(--sidebar-width);
  position:fixed;left:0;top:0;bottom:0;
  background:linear-gradient(180deg,var(--sidebar),var(--sidebar-2));
  color:var(--text);
  border-right:1px solid var(--line);
  padding:22px 16px 18px;
  display:flex;flex-direction:column;
  z-index:30;
}
.brand{display:flex;gap:14px;align-items:center;padding:6px 8px 18px;border-bottom:1px solid var(--line)}
.brand-mark{
  width:52px;height:52px;border-radius:18px;
  background:linear-gradient(145deg,#0ea5a6,#2563eb);
  display:grid;place-items:center;
  font-weight:800;font-size:15px;color:#fff;box-shadow:0 14px 36px rgba(14,165,166,.28)
}
.brand-copy h1{margin:0;font-size:17px;font-weight:800;line-height:1.15}
.brand-copy p{margin:5px 0 0;font-size:12px;color:var(--muted)}
.nav{padding:18px 4px;display:flex;flex-direction:column;gap:6px}
.nav-label{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:700;padding:6px 10px}
.nav a{
  display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;
  font-weight:600;color:var(--text);transition:.15s ease;
}
.nav a:hover{background:var(--accent-soft)}
.nav a.active{background:linear-gradient(90deg, rgba(14,165,166,.16), rgba(37,99,235,.10));color:var(--text);box-shadow:inset 0 0 0 1px rgba(14,165,166,.16)}
.nav-bullet{width:10px;height:10px;border-radius:50%;background:var(--line-strong)}
.nav a.active .nav-bullet{background:#2dd4bf;box-shadow:0 0 0 4px rgba(45,212,191,.12)}
.sidebar-footer{margin-top:auto;display:flex;flex-direction:column;gap:12px}
.user-card{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}
.avatar{width:42px;height:42px;border-radius:14px;background:rgba(45,212,191,.16);display:grid;place-items:center;font-weight:800;color:#2dd4bf}
.user-name{font-weight:700}
.user-role{font-size:12px;color:var(--muted)}
.logout-btn{
  border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:12px 14px;background:rgba(255,255,255,.03);color:#f8fafc;font-weight:600;
  display:flex;align-items:center;justify-content:center;gap:10px;
}
.logout-btn:hover{background:rgba(255,255,255,.06)}
.theme-toggle{
  border:1px solid var(--line);border-radius:16px;padding:12px 14px;background:var(--surface);color:var(--text);font-weight:600;
  display:flex;align-items:center;justify-content:center;gap:10px;
}
.theme-toggle:hover{border-color:var(--line-strong)}
.theme-toggle-side{background:rgba(255,255,255,.03);color:#f8fafc;border-color:rgba(255,255,255,.10)}
.theme-toggle-side:hover{background:rgba(255,255,255,.06)}
.toggle-pill{width:46px;height:24px;background:var(--bg-soft);border-radius:999px;position:relative;display:inline-block}
.theme-toggle-side .toggle-pill{background:rgba(255,255,255,.14)}
.toggle-pill::after{content:"";position:absolute;top:3px;left:4px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .18s ease}
html[data-theme="dark"] .toggle-pill::after{transform:translateX(20px);background:#2dd4bf}

.content{margin-left:var(--sidebar-width);width:calc(100% - var(--sidebar-width));padding:26px}
.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:22px}
.eyebrow{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--accent-strong);margin-bottom:8px}
.topbar h1{margin:0;font-size:28px;line-height:1.05;letter-spacing:-.03em}
.topbar p{margin:6px 0 0;color:var(--muted);max-width:860px;font-size:14px}
.topbar-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sync-badge{display:inline-flex;align-items:center;gap:9px;padding:11px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-weight:700;color:var(--muted)}
.sync-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--amber)}
.sync-badge.success .dot{background:var(--success)}
.sync-badge.error .dot{background:var(--red)}
.sync-badge.running .dot{background:var(--blue)}

.flash{padding:14px 16px;border-radius:16px;margin-bottom:16px;border:1px solid var(--line)}
.flash-success{background:var(--success-soft);color:var(--success)}
.flash-error{background:var(--red-soft);color:var(--red)}
.flash-warning{background:var(--amber-soft);color:var(--amber)}

.hero{background:linear-gradient(135deg,var(--surface),var(--surface-2));border:1px solid var(--line);border-radius:28px;padding:26px;box-shadow:var(--shadow);display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:20px}
.hero h2{margin:0;font-size:28px;line-height:1.05;letter-spacing:-.03em}
.hero p{margin:10px 0 0;color:var(--muted);max-width:860px}
.hero-meta,.actions,.filter-pills,.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.hero-meta{margin-top:16px}
.pill,.badge,.chip{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:12px;font-weight:700;color:var(--muted)}
.pill.success,.badge-green,.chip.success{background:var(--success-soft);border-color:transparent;color:var(--success)}
.pill.info,.badge-blue,.chip.info{background:var(--blue-soft);border-color:transparent;color:var(--blue)}
.pill.warning,.badge-yellow,.chip.warning{background:var(--amber-soft);border-color:transparent;color:var(--amber)}
.badge-red,.chip.danger{background:var(--red-soft);border-color:transparent;color:var(--red)}
.badge-violet{background:var(--violet-soft);border-color:transparent;color:var(--violet)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border-radius:16px;border:1px solid transparent;font-weight:700;white-space:nowrap;transition:.15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(145deg,var(--accent),var(--accent-strong));color:#fff;box-shadow:0 14px 30px rgba(14,165,166,.18)}
.btn-secondary{background:var(--surface);color:var(--text);border-color:var(--line)}
.btn-warning{background:var(--amber-soft);color:var(--amber);border-color:transparent}
.btn-danger{background:var(--red-soft);color:var(--red);border-color:transparent}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--muted)}

.grid{display:grid;gap:16px}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.panel-grid{display:grid;grid-template-columns:1.4fr .9fr;gap:16px}
.card{background:linear-gradient(180deg,var(--surface),var(--surface-2));border:1px solid var(--line);border-radius:24px;padding:20px;box-shadow:var(--shadow)}
.card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.section-title{margin:0;font-size:16px;font-weight:800;letter-spacing:-.02em}
.section-subtitle{margin:5px 0 0;color:var(--muted);font-size:14px}
.card-note{margin-top:12px;color:var(--muted);font-size:13px}

.stat-card{padding:22px;border-radius:24px;overflow:hidden;position:relative}
.stat-card::before{content:"";position:absolute;inset:auto -40px -40px auto;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.32);opacity:.22}
.stat-card .stat-label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:800;opacity:.9}
.stat-card .stat-value{font-size:40px;font-weight:800;line-height:1;margin:10px 0 8px;letter-spacing:-.03em}
.stat-card .stat-value small{font-size:18px;font-weight:700}
.stat-card .stat-sub{font-size:13px;opacity:.92}
.stat-card.accent{background:linear-gradient(160deg,#dff9f4,#f7fffd);color:#0f766e}
.stat-card.blue{background:linear-gradient(160deg,#e5efff,#f8fbff);color:#1d4ed8}
.stat-card.amber{background:linear-gradient(160deg,#fff2df,#fffbf5);color:#b45309}
.stat-card.red{background:linear-gradient(160deg,#ffe7e7,#fff8f8);color:#b91c1c}
.stat-card.violet{background:linear-gradient(160deg,#efe8ff,#faf8ff);color:#6d28d9}
html[data-theme="dark"] .stat-card.accent{background:linear-gradient(160deg,#103a3a,#102b2a);color:#9cf7eb}
html[data-theme="dark"] .stat-card.blue{background:linear-gradient(160deg,#0f2c59,#10223f);color:#bfdbfe}
html[data-theme="dark"] .stat-card.amber{background:linear-gradient(160deg,#4b2d09,#34220d);color:#fed7aa}
html[data-theme="dark"] .stat-card.red{background:linear-gradient(160deg,#4c1717,#341313);color:#fecaca}
html[data-theme="dark"] .stat-card.violet{background:linear-gradient(160deg,#2b1748,#1f1839);color:#ddd6fe}

.metric-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.metric-box{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:18px;min-height:118px}
.metric-box .kicker{font-size:12px;text-transform:uppercase;letter-spacing:.08em;font-weight:800;color:var(--muted)}
.metric-box .value{margin-top:10px;font-size:28px;font-weight:800;letter-spacing:-.03em}
.metric-box .meta{margin-top:8px;color:var(--muted);font-size:13px}
.metric-box.temp1 .value{color:var(--accent)}
.metric-box.temp2 .value{color:var(--blue)}
.metric-box.hum1 .value{color:var(--amber)}
.metric-box.hum2 .value{color:var(--violet)}

.chart-wrap{position:relative;height:360px}
.chart-wrap.chart-large{height:360px}
.chart-wrap.chart-small{height:240px}
.map{height:420px;border-radius:20px;overflow:hidden;border:1px solid var(--line);background:var(--bg-soft)}
.map.map-large{height:560px}
.map-empty{display:flex;align-items:center;justify-content:center;height:100%;color:var(--muted);font-weight:600}

.toolbar{padding:16px;border-radius:20px;background:var(--surface);border:1px solid var(--line);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.toolbar.compact{grid-template-columns:repeat(5,minmax(0,1fr))}
.field label{display:block;margin:0 0 8px;font-size:13px;font-weight:700;color:var(--muted)}
.filter-pills{margin-top:14px}
.filter-pill{padding:9px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:13px;font-weight:700;color:var(--muted)}
.filter-pill.active,.filter-pill:hover{border-color:rgba(14,165,166,.45);color:var(--accent-strong);background:var(--accent-soft)}

.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:18px}
.table{width:100%;border-collapse:collapse;min-width:860px}
.table th,.table td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.table th{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);background:rgba(148,163,184,.06)}
.table tbody tr:hover{background:rgba(148,163,184,.05)}
.small{font-size:13px}
.muted{color:var(--muted)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.empty-state{padding:34px 20px;text-align:center;color:var(--muted);font-weight:600}

.list-cards{display:grid;gap:14px}
.device-list-card,.mini-device-card{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:18px}
.device-list-card{display:grid;grid-template-columns:1.2fr .9fr auto;gap:16px;align-items:center}
.device-list-card h3,.mini-device-card h3{margin:0 0 4px;font-size:18px}
.device-meta,.mini-meta{display:flex;gap:8px;flex-wrap:wrap}
.device-reading{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.reading-pill{padding:12px 14px;border-radius:18px;background:var(--bg-soft);border:1px solid var(--line)}
.reading-pill .label{font-size:12px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.reading-pill .value{margin-top:6px;font-size:22px;font-weight:800;letter-spacing:-.03em}
.reading-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.reading-card{padding:16px;border-radius:20px;background:var(--surface);border:1px solid var(--line)}
.reading-card .title{font-weight:800}
.reading-card .line{display:flex;justify-content:space-between;gap:12px;margin-top:10px;font-size:14px}

.probe-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.probe-card{padding:18px;border-radius:20px;background:var(--surface);border:1px solid var(--line)}
.split{display:flex;align-items:center;justify-content:space-between;gap:14px}
.info-list{display:grid;gap:12px}
.info-row{display:flex;justify-content:space-between;gap:20px;padding:10px 0;border-bottom:1px dashed var(--line)}
.info-row:last-child{border-bottom:none}
.key{font-size:13px;color:var(--muted);font-weight:700}
.value{font-size:14px;font-weight:700}

.login-wrap{min-height:100vh;display:grid;place-items:center;padding:30px;background:linear-gradient(135deg,var(--bg),var(--bg-soft))}
.login-shell{width:min(1180px,100%);display:grid;grid-template-columns:1.1fr .9fr;background:linear-gradient(180deg,var(--surface),var(--surface-2));border:1px solid var(--line);border-radius:30px;overflow:hidden;box-shadow:var(--shadow)}
.login-side{padding:34px;background:linear-gradient(180deg,#0f172a,#132338);color:#f8fafc;display:flex;flex-direction:column;justify-content:space-between}
.login-side .brand{padding:0 0 24px;border-bottom:none}
.login-hero h1{margin:0 0 12px;font-size:40px;line-height:1.02;letter-spacing:-.04em}
.login-hero p{color:rgba(226,232,240,.80);max-width:620px}
.login-hero ul{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:14px}
.login-hero li{display:flex;gap:12px;align-items:flex-start}
.login-hero li span{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(45,212,191,.16);color:#2dd4bf;font-weight:800}
.login-card{padding:34px;display:flex;flex-direction:column;justify-content:center}
.login-card h2{margin:18px 0 8px;font-size:30px}
.login-card p{margin:0 0 22px;color:var(--muted)}
.login-form{display:grid;gap:14px}
.login-footer-note,.login-hint{color:rgba(226,232,240,.62);font-size:13px}
.inline-actions{display:flex;gap:10px;flex-wrap:wrap}

.section-stack{display:grid;gap:18px}
.two-col{display:grid;grid-template-columns:1.1fr .9fr;gap:16px}
.kpi-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.kpi-chip{padding:14px;border-radius:18px;background:var(--surface);border:1px solid var(--line)}
.kpi-chip .value{font-size:24px;font-weight:800;letter-spacing:-.03em}
.gps-list{display:grid;gap:10px}
.gps-item{display:flex;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}

@media (max-width: 1280px){
  .grid-4,.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .panel-grid,.two-col{grid-template-columns:1fr}
}
@media (max-width: 980px){
  .sidebar{position:static;width:100%;height:auto}
  .layout{display:block}
  .content{margin-left:0;width:100%}
  .login-shell{grid-template-columns:1fr}
}
@media (max-width: 720px){
  .content{padding:18px}
  .toolbar,.toolbar.compact,.grid-3,.grid-2,.device-list-card,.probe-grid,.reading-grid,.metric-grid,.grid-4{grid-template-columns:1fr}
  .hero,.topbar{flex-direction:column}
  .chart-wrap{height:320px}
  .table{min-width:720px}
}


.topbar h1{font-size:24px}
.topbar p{font-size:14px}
.sync-badge{padding:9px 12px;gap:10px}
.sync-badge strong{display:block;font-size:14px;line-height:1.2;color:var(--text)}
.sync-badge small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.hero h2{font-size:20px}
.hero p{font-size:14px}
.section-title{font-size:16px}
.section-subtitle{font-size:13px}
.metric-box .value{font-size:24px}
.metric-box .meta{font-size:12px}
.card{padding:18px}
.chart-wrap{height:300px}
.chart-wrap.chart-large{height:340px}
.map.map-large{height:460px}
.map-popup{min-width:190px;font-size:13px;line-height:1.45}
.table th,.table td{padding:12px 14px}
.table-wrap{overflow:auto;max-height:none}
.hero-meta .pill,.badge,.chip{font-size:11px}
.reading-primary{font-weight:700;color:var(--text)}
.reading-time{font-size:13px;color:var(--muted)}
.reading-device{font-size:13px;color:var(--muted)}
.inline-note{font-size:12px;color:var(--muted)}
.empty-state{padding:26px 16px;font-size:14px}
.gps-side-card .map{height:260px}
.kpi-mini{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.kpi-mini .item{padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.kpi-mini .item .label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:800}
.kpi-mini .item .value{font-size:20px;font-weight:800;margin-top:6px}
.kpi-mini .item .sub{font-size:12px;color:var(--muted);margin-top:4px}
.history-table td:first-child{white-space:nowrap}
@media (max-width: 1280px){ .kpi-mini{grid-template-columns:1fr} }

/* 2026 polish overrides */
body{font-size:14px;line-height:1.45}
.topbar{margin-bottom:18px}
.topbar h1{font-size:26px;line-height:1.05}
.topbar p{font-size:14px;margin-top:6px}
.eyebrow{margin-bottom:6px}
.hero,.hero h2,.hero p,.hero-meta{display:none}
.compact-stats .stat-card{padding:18px;border-radius:22px;min-height:118px}
.compact-stats .stat-card .stat-value{font-size:34px}
.compact-stats.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.compact-stats.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.metric-grid.four-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}
.metric-box{min-height:102px;padding:16px}
.metric-box .value{font-size:24px}
.chart-wrap{height:330px}
.chart-wrap.chart-large{height:360px}
.toolbar{background:linear-gradient(180deg,var(--surface),var(--surface-2))}
.toolbar.compact.compact-toolbar-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.toolbar.compact.compact-toolbar-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.table th,.table td{padding:12px 14px}
.history-table .reading-primary{font-weight:700}
.gps-list{display:grid;gap:10px}
.gps-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.section-stack{display:grid;gap:16px}
.login-shell.simple-login{grid-template-columns:.9fr .8fr;max-width:920px}
.login-hero.compact-copy h1{font-size:30px;margin-bottom:6px}
.login-hero.compact-copy p{max-width:300px}
.login-card{padding:34px;display:flex;flex-direction:column;justify-content:center;background:var(--surface)}
.sync-badge{padding:10px 14px}
.sync-badge small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
html[data-theme="dark"] body{background:linear-gradient(180deg,#09101c,#111827)}
html[data-theme="dark"] .content{background:transparent}
html[data-theme="dark"] .card,
html[data-theme="dark"] .toolbar,
html[data-theme="dark"] .metric-box,
html[data-theme="dark"] .gps-item,
html[data-theme="dark"] .login-card,
html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] .sync-badge{background:linear-gradient(180deg,var(--surface),var(--surface-2));color:var(--text)}
html[data-theme="dark"] .table th{background:rgba(255,255,255,.03)}
html[data-theme="dark"] .map{background:#0f172a}
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .map-empty{color:var(--muted)}
@media (max-width: 1320px){
  .grid-4,.compact-stats.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3,.compact-stats.grid-3,.metric-grid.four-metrics,.toolbar.compact.compact-toolbar-5,.toolbar.compact.compact-toolbar-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .panel-grid,.two-col{grid-template-columns:1fr}
}
@media (max-width: 960px){
  .sidebar{position:static;width:100%;height:auto}
  .content{margin-left:0;width:100%;padding:16px}
  .layout{display:block}
  .grid-2,.grid-3,.grid-4,.compact-stats.grid-4,.compact-stats.grid-3,.metric-grid.four-metrics,.toolbar.compact.compact-toolbar-5,.toolbar.compact.compact-toolbar-4{grid-template-columns:1fr}
  .topbar{flex-direction:column;align-items:flex-start}
}

.compact-stats .stat-value{font-size:32px}.value-temp{color:var(--accent);font-weight:700}.value-hum{color:var(--amber);font-weight:700}.value-alert{color:var(--red);font-weight:700}.topbar-actions .btn{min-width:150px}.sync-badge small{display:block;color:var(--muted);font-weight:600}.gps-side-card{display:block}.metric-grid.four-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}.compact-toolbar-5{grid-template-columns:repeat(5,minmax(0,1fr))}.compact-toolbar-4{grid-template-columns:repeat(4,minmax(0,1fr))}@media (max-width:1200px){.grid-4,.metric-grid,.grid-2,.panel-grid,.two-col{grid-template-columns:1fr 1fr}.toolbar,.toolbar.compact,.compact-toolbar-5,.compact-toolbar-4{grid-template-columns:1fr 1fr}}@media (max-width:900px){.sidebar{position:static;width:100%;height:auto}.content{margin-left:0;width:100%;padding:16px}.layout{display:block}.grid-4,.metric-grid,.grid-2,.panel-grid,.two-col{grid-template-columns:1fr}.toolbar,.toolbar.compact,.compact-toolbar-5,.compact-toolbar-4{grid-template-columns:1fr}.topbar{flex-direction:column}}
.logo-mark{padding:0;background:#ffffff;overflow:hidden}
.logo-mark img{width:100%;height:100%;display:block;object-fit:contain;background:#fff;border-radius:14px}
.filter-actions-full{grid-column:1/-1;display:flex;gap:10px;justify-content:flex-start}
.inline-actions{display:flex;flex-wrap:wrap;gap:10px}
.chart-wrap.chart-medium{height:320px}
.table-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 4px 4px}
.pager{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pager-link{min-width:36px;height:36px;border:1px solid var(--line);border-radius:12px;display:inline-flex;align-items:center;justify-content:center;color:var(--text);background:var(--surface);font-weight:700}
.pager-link.active{background:var(--accent);color:#fff;border-color:transparent}
.value-neutral{color:var(--muted);font-weight:700}
.value-cold,.value-cool{color:var(--blue);font-weight:700}
.value-good{color:var(--accent);font-weight:700}
.value-warm,.value-humid{color:var(--amber);font-weight:700}
.value-hot,.value-wet,.value-dry{color:var(--red);font-weight:700}
.table .muted{color:var(--muted)}
html[data-theme="dark"] .logo-mark{background:#fff}
@media (max-width:900px){.filter-actions-full,.inline-actions,.table-footer{flex-direction:column;align-items:stretch}.table-footer{padding-top:12px}}


/* v3 final polish */
.logo-mark{background:transparent !important; box-shadow:none; border:1px solid rgba(255,255,255,.08);}
.logo-mark img{background:transparent !important; border-radius:18px; padding:4px}
.brand-copy h1{font-size:17px}
.brand-copy p{font-size:13px}
.btn-full{width:100%}
.btn-icon-only .mini-icon{font-size:14px;line-height:1}
.toolbar-actions{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.toolbar-actions-end{justify-content:flex-end}
.toolbar-actions-start{justify-content:flex-start;grid-column:1/-1}
.toolbar-index .toolbar-actions-end{grid-column:auto}
.toolbar-graphs{grid-template-columns:repeat(4,minmax(0,1fr)) auto}
.toolbar-history{grid-template-columns:repeat(6,minmax(0,1fr));align-items:end}
.stat-value-sm{font-size:20px !important; line-height:1.2 !important}
.table-fixed{table-layout:fixed; width:100%; min-width:100%}
.table-fixed th:nth-child(1){width:15%}
.table-fixed th:nth-child(2){width:22%}
.table-fixed th:nth-child(3){width:8%}
.table-fixed th:nth-child(4),.table-fixed th:nth-child(5),.table-fixed th:nth-child(6),.table-fixed th:nth-child(7){width:10%}
.table-fixed th:nth-child(8){width:15%}
.pager{gap:6px}
.pager-link{min-width:34px;height:34px;border-radius:10px;font-size:13px}
.theme-toggle{gap:10px}
.chart-wrap canvas{width:100% !important;height:100% !important;display:block}
@media (max-width:1320px){.toolbar-graphs{grid-template-columns:repeat(2,minmax(0,1fr))}.toolbar-history{grid-template-columns:repeat(3,minmax(0,1fr))}.toolbar-actions-end,.toolbar-actions-start{grid-column:1/-1;justify-content:flex-start}}
@media (max-width:900px){.toolbar-graphs,.toolbar-history{grid-template-columns:1fr}.toolbar-actions-end,.toolbar-actions-start{grid-column:1/-1;justify-content:stretch}.toolbar-actions .btn{flex:1}}

.toolbar-index{grid-template-columns:repeat(3,minmax(0,1fr)) auto}
.btn-icon-only{padding-inline:14px}
.btn-icon-only .mini-icon{display:inline-flex;width:18px;justify-content:center}
.logo-brand{gap:12px}
.logo-mark{width:58px;height:58px;border-radius:18px}

/* final v4 fixes */
.logo-mark-remote{background:#ffffff !important;border:1px solid var(--line) !important;box-shadow:0 10px 24px rgba(15,23,42,.12) !important;padding:7px !important}
.logo-mark-remote img{background:#ffffff !important;padding:0 !important;border-radius:12px !important}
html[data-theme="dark"] .logo-mark-remote{background:#ffffff !important}
.gps-side-card{display:block !important}
.toolbar-index-final{grid-template-columns:repeat(3,minmax(0,1fr)) auto;align-items:end}
.toolbar-history-final{grid-template-columns:repeat(6,minmax(0,1fr));align-items:end}
.toolbar-actions-inline{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.toolbar-actions-stack-sm .btn{min-width:132px}
.btn-icon{display:inline-flex;align-items:center;gap:8px;padding-inline:14px}
.mini-icon{display:inline-flex;width:18px;justify-content:center;font-size:14px;line-height:1}
.table-footer{padding:16px 0 0}
.table-footer .pager{margin-left:auto}
.history-table .reading-primary{font-weight:700}
.history-table .reading-device{margin-top:4px}
.chart-wrap.chart-medium{height:340px}
.chart-wrap.chart-large{height:380px}
.card .table-wrap{background:transparent}
.table-wrap .empty-state{padding:28px 12px}
.probe-grid,.reading-grid{align-items:start}
.field input[readonly]{background:var(--surface-2)}
.toolbar .field{min-width:0}
@media (max-width:1320px){
  .toolbar-history-final{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:980px){
  .toolbar-index-final,.toolbar-history-final{grid-template-columns:1fr}
  .toolbar-actions-inline,.toolbar-actions-stack-sm{grid-column:1/-1;justify-content:flex-start}
  .toolbar-actions-inline .btn,.toolbar-actions-stack-sm .btn{min-width:0}
}


html[data-theme="dark"] .sidebar{color:#e5edf8;border-right-color:rgba(255,255,255,.06)}
html[data-theme="dark"] .brand{border-bottom-color:rgba(255,255,255,.08)}
html[data-theme="dark"] .brand-copy p,html[data-theme="dark"] .nav-label,html[data-theme="dark"] .user-role{color:rgba(226,232,240,.62)}
html[data-theme="dark"] .nav a{color:rgba(226,232,240,.88)}
html[data-theme="dark"] .nav a:hover{background:rgba(255,255,255,.06)}
html[data-theme="dark"] .nav a.active{color:#fff;background:linear-gradient(90deg, rgba(45,212,191,.16), rgba(37,99,235,.10))}
html[data-theme="dark"] .nav-bullet{background:rgba(255,255,255,.28)}
html[data-theme="dark"] .user-card{border-color:rgba(255,255,255,.08);background:rgba(255,255,255,.04)}
.chart-legend{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px}
.chart-legend-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 11px;border:1px solid var(--line);background:var(--surface);border-radius:999px;color:var(--muted);font-size:13px;font-weight:600}
.chart-legend-btn.active{color:var(--text);border-color:rgba(14,165,166,.35);background:var(--surface-2)}
.chart-legend-swatch{display:inline-block;width:24px;height:10px;border:3px solid var(--accent);border-radius:4px}
.btn-icon .mini-icon{font-size:14px;line-height:1;display:inline-flex;align-items:center;justify-content:center;width:18px}
.toolbar-actions-inline{display:flex;align-items:end;gap:10px;flex-wrap:wrap}
.toolbar-actions-stack-sm{display:flex;align-items:end;gap:10px;flex-wrap:wrap}
.reading-primary{font-weight:700}
.reading-device{margin-top:3px;color:var(--muted);font-size:12px}
.table.table-fixed{min-width:0}
@media (max-width:900px){.toolbar-actions-inline,.toolbar-actions-stack-sm{width:100%}.toolbar-actions-inline .btn,.toolbar-actions-stack-sm .btn{flex:1 1 auto}}