:root{
  --sna-bg:#ffffff;
  --sna-fg:#0f172a;
  --sna-muted:#64748b;
  --sna-border:#e2e8f0;
  --sna-shadow:0 8px 24px rgba(148, 163, 184, 0.15);

  --sna-lvl0:#f1f5f9;
  --sna-lvl1:#e0f2fe;
  --sna-lvl2:#bae6fd;
  --sna-lvl3:#7dd3fc;
  --sna-lvl4:#38bdf8;
}

.schneealarm-widget{
  background:var(--sna-bg);
  color:var(--sna-fg);
  border:1px solid var(--sna-border);
  border-radius:16px;
  padding:20px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  max-width:1100px;
  margin:0 auto;
  box-sizing:border-box;
}

.sna-search{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:10px;
}

.sna-search-row{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.sna-input{
  flex:1;
  min-width:160px;
  padding:12px;
  border:1px solid var(--sna-border);
  border-radius:10px;
}

.sna-btn{
  padding:12px 18px;
  border:1px solid var(--sna-border);
  background:#f8fafc;
  border-radius:10px;
  cursor:pointer;
  font-weight:600;
  color:#334155;
}
.sna-btn:hover{ background:#f1f5f9; }

.sna-suggestions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  width:100%;
  margin-top:4px;
  margin-bottom:10px;
}
.sna-suggest-item{
  padding:5px 12px;
  border-radius:20px;
  border:1px solid var(--sna-border);
  background:#fff;
  cursor:pointer;
  font-size:13px;
  color:#0ea5e9;
}
.sna-suggest-item:hover{ background:#f0f9ff; }

.sna-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  margin-top:10px;
}
.sna-title{
  margin:0;
  font-size:24px;
  color:#0f172a;
}
.sna-sub{
  margin:0;
  font-size:13px;
  color:var(--sna-muted);
}

.sna-badge{
  padding:8px 12px;
  border-radius:8px;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
}
.sna-badge.level-0{ background:var(--sna-lvl0); color:#475569; }
.sna-badge.level-1{ background:var(--sna-lvl1); color:#0369a1; }
.sna-badge.level-2{ background:var(--sna-lvl2); color:#075985; }
.sna-badge.level-3{ background:var(--sna-lvl3); color:#0c4a6e; }
.sna-badge.level-4{ background:var(--sna-lvl4); color:#fff; }

.sna-nowcast-chip{
  display:inline-block;
  margin-top:10px;
  padding:6px 12px;
  background:#eff6ff;
  color:#1e40af;
  border-radius:20px;
  font-size:13px;
  font-weight:600;
}

.sna-kpis{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:20px;
}
.kpi{
  background:#f8fafc;
  border:1px solid var(--sna-border);
  border-radius:12px;
  padding:12px;
  text-align:center;
}
.kpi-v{
  font-size:22px;
  font-weight:800;
  color:#0f172a;
}
.kpi-l{
  font-size:12px;
  color:var(--sna-muted);
  text-transform:uppercase;
  letter-spacing:0.5px;
}

.sna-stack{
  display:flex;
  flex-direction:column;
  gap:20px;
  margin-top:20px;
}
.sna-grid{
  display:grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap:16px;
  margin-top:20px;
}
.sna-card{
  background:#fff;
  border:1px solid var(--sna-border);
  border-radius:16px;
  padding:15px;
  box-shadow:var(--sna-shadow);
}

/* Compact layout tweaks */
.sna-compact .kpi{ padding:8px; }
.sna-compact .kpi-v{ font-size:18px; }

/* Responsive Breakpoints */
@media (max-width: 1024px){
  .sna-grid{
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}
@media (max-width: 768px){
  .schneealarm-widget{
    padding:16px;
  }
  .sna-search-row{
    flex-direction:column;
    align-items:stretch;
  }
  .sna-btn{
    width:100%;
    text-align:center;
  }
  .sna-kpis{
    grid-template-columns:1fr;
  }
  .sna-grid,
  .sna-stack{
    grid-template-columns:1fr;
    display:grid;
  }
}