:root{
  --b:#e5e7eb;
  --bg:#f6f7fb;
  --text:#111827;
  --muted: rgba(17,24,39,.65);
  --card:#ffffff;
}
*{ box-sizing: border-box; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: var(--bg);
  color: var(--text);
}
.wrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px;
}
.header{
  background: var(--card);
  border: 1px solid var(--b);
  border-radius: 16px;
  padding: 16px 16px;
  box-shadow: 0 1px 12px rgba(0,0,0,.03);
}
.header h1{ margin:0 0 6px; font-size: 22px; }
.sub{ margin:0; color: var(--muted); }

.grid{
  display:grid;
  grid-template-columns: 1.2fr 1.2fr 1fr;
  gap:14px;
  margin-top: 14px;
}
@media (max-width: 980px){
  .grid{ grid-template-columns: 1fr; }
}

.card{
  background: var(--card);
  border: 1px solid var(--b);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 1px 12px rgba(0,0,0,.03);
}
.card h2{ margin: 0 0 10px; font-size: 16px; }

.card-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap:10px;
}
.actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.btn{
  border: 1px solid #d1d5db;
  background:#fff;
  border-radius: 12px;
  padding: 9px 11px;
  cursor:pointer;
}
.btn:hover{ background:#f9fafb; }
.btn-primary{
  background:#111827;
  border-color:#111827;
  color:#fff;
}
.btn-primary:hover{ filter: brightness(1.08); }
.btn-ghost{ background:#f9fafb; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

.stores{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.check{
  display:flex;
  align-items:center;
  gap:8px;
  padding: 9px 10px;
  border: 1px solid var(--b);
  border-radius: 14px;
  background:#fbfbfd;
}
.check input{ transform: translateY(1px); }

.row{
  display:grid;
  grid-template-columns: 120px 1fr;
  gap:10px;
  align-items:center;
  margin: 10px 0;
}
label{ font-weight: 600; font-size: 13px; color: rgba(17,24,39,.9); }
select{
  width:100%;
  padding: 9px 10px;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  background:#fff;
}
.radios{
  display:flex;
  flex-wrap:wrap;
  gap: 12px;
  font-weight: 400;
}
.radios label{
  display:flex;
  align-items:center;
  gap:6px;
  font-weight: 500;
  font-size: 14px;
}
.hint{
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
}

.status{
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--b);
  border-radius: 12px;
  background:#fafafa;
  font-size: 13px;
}
.status.is-ok{ background:#f0fdf4; border-color:#86efac; }
.status.is-warn{ background:#fffbeb; border-color:#fde68a; }
.status.is-err{ background:#fef2f2; border-color:#fecaca; }

.results{
  margin-top: 14px;
  background: var(--card);
  border: 1px solid var(--b);
  border-radius: 16px;
  overflow:hidden;
  box-shadow: 0 1px 12px rgba(0,0,0,.03);
}
.tabs{
  display:flex;
  gap:8px;
  padding: 10px;
  background:#fafafa;
  border-bottom: 1px solid var(--b);
}
.tab{
  border: 1px solid var(--b);
  background:#fff;
  border-radius: 12px;
  padding: 9px 11px;
  cursor:pointer;
}
.tab.is-active{ border-color:#111827; }

.panel{ display:none; }
.panel.is-active{ display:block; }

.tablewrap{ overflow-x:auto; }
table{
  width:100%;
  border-collapse: collapse;
  font-size: 13px;
}
th, td{
  padding: 10px;
  border-bottom: 1px solid #eef2f7;
  vertical-align: top;
}
th{
  text-align:left;
  font-size:12px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: rgba(17,24,39,.65);
}
.muted{ color: var(--muted); }