:root{
  --bg: #f6f7fb;
  --card: #ffffff;
  --ring: #e5e7eb;
  --text: #111827;
  --muted: #6b7280;
  --primary: #2563eb;
  --radius: 14px;
}
*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.wrap{ max-width: 920px; margin: 28px auto; padding: 20px; }
.card{ background:var(--card); border:1px solid var(--ring); border-radius: var(--radius);
  box-shadow: 0 8px 22px rgba(0,0,0,.06); }
h1{ text-align:center; margin: 6px 0 12px; }
.grid2{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
@media(max-width: 720px){ .grid2{ grid-template-columns: 1fr; } }
.field{ display:flex; flex-direction:column; gap:6px; margin: 10px 0; }
.field span{ color:var(--muted); font-size:.95rem; }
input, select{ padding: 12px; border-radius: 12px; border:1px solid var(--ring); }
.btn.primary{ background: var(--primary); color:#fff; padding:12px; border:none; width:100%; border-radius:12px; margin-top: 6px;}
.result{ margin-top: 12px; }
.big{ font-size: 1.9rem; font-weight:700; }
.muted{ color:var(--muted); }
.summary{ background:#f9fafb; padding:12px; border-radius:12px; margin-top:10px; display:flex; flex-direction:column; gap:10px; }
.divider{ height:1px; background:var(--ring); }
.table{ width:100%; border-collapse: collapse; margin-top:10px; }
.table th, .table td{ border-bottom:1px solid var(--ring); padding:8px; }
.details{ margin-top: 10px; }
.note{ color:var(--muted); text-align:center; margin-top: 10px; }
.hidden{ display:none; }