:root{ color-scheme: light; }
html{ color-scheme: light; }

:root{
  --bg1:#f7f9ff;
  --bg2:#eef2ff;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --line:#e5e7eb;

  --primary:#2563eb;
  --primary2:#1d4ed8;

  --danger:#dc2626;

  --radius:18px;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:linear-gradient(180deg, var(--bg1), var(--bg2)) !important;
  color:var(--text) !important;
}

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

.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:12px;
}
.brand{font-weight:900;letter-spacing:.2px;}
.badge{
  font-size:12px;color:var(--muted);
  padding:6px 10px;border:1px solid var(--line);
  border-radius:999px;background:#f8fafc;
}

.card{
  background:var(--card) !important;
  border:1px solid rgba(229,231,235,.9);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:0 16px 40px rgba(2,6,23,.08);
}

.h1{font-size:18px;margin:0 0 10px 0;}
.h2{
  font-size:12px;margin:14px 0 8px 0;color:var(--muted);
  font-weight:900;text-transform:uppercase;letter-spacing:.7px;
}

.grid{display:grid;grid-template-columns:1fr;gap:12px;}
@media(min-width:640px){.grid.two{grid-template-columns:1fr 1fr;}}

.label{font-size:12px;color:var(--muted);margin:0 0 6px 2px;font-weight:800;}

.input,.select,.textarea{
  width:100%;
  padding:14px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fff !important;
  color:var(--text) !important;
  outline:none;
}

.input:focus,.select:focus,.textarea:focus{
  border-color:rgba(37,99,235,.55);
  box-shadow:0 0 0 4px rgba(37,99,235,.12);
}

.textarea{min-height:90px;resize:vertical}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 14px;border-radius:14px;border:1px solid var(--line);
  background:var(--primary);color:white;font-weight:900;cursor:pointer;width:100%;
}
.btn:hover{background:var(--primary2)}
.btn.secondary{background:#f1f5f9;color:var(--text)}
.btn.secondary:hover{background:#e2e8f0}
.btn.danger{background:#fee2e2;color:#991b1b}
.btn.danger:hover{background:#fecaca}

.footer-actions{display:grid;grid-template-columns:1fr;gap:10px;margin-top:12px;}
@media(min-width:640px){.footer-actions{grid-template-columns:1fr 1fr;}}

.toast{border:1px solid #a7f3d0;background:#ecfdf5;color:#065f46;padding:10px 12px;border-radius:12px;margin-bottom:12px;font-weight:700;}
.error{border:1px solid #fecaca;background:#fef2f2;color:#991b1b;padding:10px 12px;border-radius:12px;margin-bottom:12px;font-weight:700;}

.small{font-size:12px;color:var(--muted);margin-top:10px;line-height:1.45;}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
hr.sep{border:none;border-top:1px solid var(--line);margin:14px 0;}

input, select, textarea { font-size:16px; } /* prevents iOS zoom */

/* Chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;}
.chip{
  border:1px solid var(--line);
  background:#fff;
  color:var(--text);
  padding:10px 12px;
  border-radius:999px;
  font-weight:900;
  cursor:pointer;
  user-select:none;
}
.chip:hover{background:#f8fafc}
.chip.active{
  border-color:rgba(37,99,235,.35);
  box-shadow:0 0 0 4px rgba(37,99,235,.10);
  background:#eff6ff;
  color:#1d4ed8;
}
.chip.muted{color:var(--muted);font-weight:900;}

/* Minimal collapsible sections */
details.minibox{
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px 12px;
  background:#fff;
}
details.minibox summary{
  cursor:pointer;
  font-weight:900;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
details.minibox summary::-webkit-details-marker{display:none;}
details.minibox .hint{font-size:12px;color:var(--muted);font-weight:800;}
details.minibox[open]{box-shadow:0 10px 24px rgba(2,6,23,.06);}