:root{
  --bg:#f2f2f7;
  --card:#ffffff;
  --text:#111;
  --muted:#6b7280;
  --tint:#0b84ff;
  --ok:#0b8f55;
  --warn:#b07d00;
  --bad:#b00020;
  --radius:16px;
  --shadow:0 6px 18px rgba(0,0,0,.06);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--text);
}

.app-header{
  position:sticky; top:0; z-index:5;
  background:linear-gradient(180deg,#fff,rgba(255,255,255,.85));
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid rgba(0,0,0,.06);
  padding:14px 16px;
}
.app-header h1{ margin:0; font-size:20px; }
.app-header .sub{ color:var(--muted); font-size:12px; margin-top:4px; }

.container{ max-width:900px; margin:18px auto; padding:0 16px; }

.card{
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:16px; margin-bottom:16px;
}
.card-title{ margin:0 0 12px 0; font-size:18px; }

.label{ display:block; font-size:13px; color:var(--muted); margin-bottom:6px; }
.hint{ font-size:12px; color:var(--muted); margin-top:6px; }

.row{ margin-top:12px; }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media (max-width:800px){
  .grid-2,.grid-3{ grid-template-columns:1fr; }
}

.ftin{
  display:grid; grid-template-columns:1fr auto 1fr auto; gap:8px; align-items:center;
}
.with-suffix{ position:relative; display:flex; align-items:center; gap:8px; }
.suffix{ background:#eee; padding:6px 8px; border-radius:10px; font-size:12px; color:#444; }

.multiselect{ width:100%; height:auto; min-height:160px; }

.btn-primary{
  width:100%; margin-top:14px; padding:14px 16px; border:0; border-radius:14px;
  background:var(--tint); color:#fff; font-weight:600; font-size:16px;
}

.hidden{ display:none; }

.table-wrap{ overflow:auto; }
table{
  width:100%; border-collapse:separate; border-spacing:0; min-width:720px;
}
thead th{
  text-align:left; font-size:12px; color:var(--muted);
  position:sticky; top:0; background:var(--card);
  border-bottom:1px solid rgba(0,0,0,.06);
  padding:10px;
}
tbody td{ padding:10px; border-bottom:1px solid rgba(0,0,0,.06); vertical-align:top; }

.pill{
  display:inline-block; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:600;
}
.pill.ok{ background:rgba(11,143,85,.12); color:var(--ok); border:1px solid rgba(11,143,85,.3); }
.pill.warn{ background:rgba(176,125,0,.12); color:var(--warn); border:1px solid rgba(176,125,0,.3); }
.pill.bad{ background:rgba(176,0,32,.10); color:var(--bad); border:1px solid rgba(176,0,32,.30); }
.pill.info{ background:#eef2ff; color:#334; border:1px solid #d8def7; }

.small{ font-size:12px; color:var(--muted); }
.code{ font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size:12px; }