:root {
  --bg: #f5f7fb;
  --surface: rgba(255,255,255,0.88);
  --surface-strong: #fff;
  --sidebar: #0b1020;
  --sidebar-soft: rgba(255,255,255,0.09);
  --text: #0f172a;
  --muted: #667085;
  --border: rgba(15,23,42,0.08);
  --primary: #111827;
  --accent: #2563eb;
  --success: #16a34a;
  --danger: #dc2626;
  --shadow: 0 18px 50px rgba(15,23,42,0.08);
  --radius: 26px;
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: radial-gradient(circle at top, #ffffff 0%, #f5f7fb 45%, #edf2f7 100%);
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
input, select, textarea, button { font: inherit; }
button, .btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.9rem 1.1rem; border-radius:16px; border:1px solid transparent; cursor:pointer;
  text-decoration:none; font-weight:600; transition:all .18s ease;
}
button:hover, .btn:hover { transform: translateY(-1px); text-decoration:none; }
.btn.primary, button.primary { background: linear-gradient(180deg, #1f2937 0%, #111827 100%); color:#fff; box-shadow:0 10px 24px rgba(17,24,39,.16); }
.btn.secondary, button.secondary { background:rgba(255,255,255,.92); color:var(--text); border-color:var(--border); }
.btn.danger, button.danger { background:linear-gradient(180deg,#ef4444 0%,#dc2626 100%); color:#fff; }
.btn.small, button.small { padding:.6rem .8rem; border-radius:12px; font-size:.92rem; }
textarea, input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="date"], input[type="number"], select, input[type="file"] {
  width:100%; min-height:54px; padding:.92rem 1rem; border:1px solid rgba(15,23,42,.1); border-radius:16px; background:#fff;
  box-shadow: inset 0 1px 1px rgba(15,23,42,.02); color:var(--text);
}
textarea { min-height:120px; resize:vertical; }
label { display:block; margin-bottom:.42rem; font-weight:600; }
.help { color:var(--muted); font-size:.92rem; margin-top:.35rem; }
.muted { color:var(--muted); }
.kbd { padding:.2rem .45rem; border:1px solid var(--border); border-bottom-width:2px; border-radius:8px; background:#fff; font-size:.82rem; }

.login-body { height:100vh; overflow:hidden; }
.login-page {
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center; padding:16px; overflow:hidden;
}
.login-card {
  width:min(100%, 440px); max-height:calc(100vh - 32px); overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:rgba(255,255,255,.92); border:1px solid rgba(255,255,255,.72); border-radius:30px; box-shadow:var(--shadow); padding:28px 22px;
}
.login-card h1 { margin:0 0 10px; font-size:clamp(2.2rem, 6vw, 3rem); line-height:1; letter-spacing:-.03em; }
.login-form .group { margin-bottom:16px; }

.admin-body { display:grid; grid-template-columns:280px 1fr; min-height:100vh; overflow:hidden; }
.sidebar {
  background:linear-gradient(180deg, #0b1020 0%, #121a30 100%); color:#fff; padding:1.25rem; position:sticky; top:0; height:100vh; z-index:30;
}
.brand-wrap { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1.6rem; }
.eyebrow { text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; color:#98a2b3; font-weight:700; }
.brand { font-size:1.55rem; font-weight:800; margin-top:.2rem; }
.sidebar nav { display:grid; gap:.4rem; }
.sidebar nav a { color:#dbe4f0; padding:.86rem 1rem; border-radius:16px; }
.sidebar nav a.active, .sidebar nav a:hover { background:var(--sidebar-soft); color:#fff; text-decoration:none; }
.main { padding:1.25rem; min-width:0; height:100vh; overflow:auto; }
.glass { background:var(--surface); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.topbar {
  display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; margin-bottom:1rem; padding:1rem 1.1rem;
  border:1px solid rgba(255,255,255,.65); border-radius:24px; box-shadow:var(--shadow);
}
.topbar h1 { margin:.15rem 0 0; font-size:clamp(1.55rem, 2.2vw, 2.3rem); }
.topbar p { margin:.4rem 0 0; color:var(--muted); max-width:52rem; }
.user-chip { background:rgba(255,255,255,.9); border:1px solid var(--border); padding:.68rem .95rem; border-radius:999px; white-space:nowrap; }
.alert { padding:1rem 1.05rem; border-radius:18px; margin-bottom:1rem; border:1px solid transparent; }
.alert.success { background:#ecfdf3; color:#166534; border-color:#bbf7d0; }
.alert.error { background:#fef2f2; color:#991b1b; border-color:#fecaca; }
.card { background:var(--surface); border:1px solid rgba(255,255,255,.65); border-radius:var(--radius); padding:1.2rem; box-shadow:var(--shadow); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.nested-card { background:rgba(255,255,255,.68); }
.grid { display:grid; gap:1rem; }
.grid.cols-2 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.grid.cols-4 { grid-template-columns:repeat(4, minmax(0, 1fr)); }
.stat .num { font-size:2rem; font-weight:800; }
.stat .label { color:var(--muted); }
form .row, .public-grid, .field-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1rem; }
form .row .full, .public-grid .full, .field-grid .full { grid-column:1 / -1; }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; }
th, td { padding:.95rem .85rem; border-bottom:1px solid rgba(15,23,42,.08); text-align:left; vertical-align:top; }
th { font-size:.86rem; color:var(--muted); font-weight:700; }
tr:hover td { background:rgba(255,255,255,.32); }
.actions { display:flex; gap:.55rem; flex-wrap:wrap; }
.actions.spread { justify-content:space-between; align-items:center; }
.badge { display:inline-flex; align-items:center; padding:.28rem .6rem; border-radius:999px; background:#eef2ff; color:#3730a3; font-size:.8rem; font-weight:700; }
.notice { padding:1rem; border-radius:16px; background:#eff6ff; border:1px solid #bfdbfe; }
.form-builder-list { display:grid; gap:1rem; }
.field-card { border:1px dashed rgba(15,23,42,.18); border-radius:20px; padding:1rem; background:rgba(255,255,255,.68); }
.field-card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:.75rem; }
.codebox { background:#0f172a; color:#e2e8f0; padding:1rem; border-radius:16px; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; overflow:auto; }
.mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.section-title { margin:0 0 .25rem; font-size:1.05rem; }
.mobile-nav-toggle, .mobile-nav-close, .shell-backdrop { display:none; }

.public-shell { min-height:100vh; display:grid; place-items:center; padding:1.2rem; }
.public-shell.embed-shell { min-height:auto; padding:0; background:transparent; }
.public-card { width:min(100%, 920px); background:rgba(255,255,255,.9); border:1px solid rgba(255,255,255,.7); border-radius:30px; box-shadow:0 20px 60px rgba(15,23,42,.08); overflow:hidden; backdrop-filter:blur(14px); }
.public-header { padding:1.6rem 1.6rem 0; }
.public-header h1 { margin:0 0 .45rem; font-size:clamp(1.7rem, 2vw, 2.25rem); }
.public-logo { max-height:64px; max-width:160px; object-fit:contain; margin-bottom:1rem; display:block; }
.public-body { padding:1.6rem; }
.public-footer { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:1.35rem; }
.choice { display:flex; gap:.55rem; align-items:center; margin:.35rem 0; font-weight:400; }
.public-field-wrap[style*="display: none"] { margin:0 !important; }

@media (max-width: 980px) {
  .grid.cols-2, .grid.cols-3, .grid.cols-4, form .row, .public-grid, .field-grid { grid-template-columns:1fr; }
}
@media (max-width: 860px) {
  .admin-body { grid-template-columns:1fr; }
  .sidebar { position:fixed; left:0; top:0; bottom:0; width:min(88vw, 320px); transform:translateX(-105%); transition:transform .22s ease; box-shadow:0 12px 40px rgba(15,23,42,.22); }
  body.nav-open .sidebar { transform:translateX(0); }
  .main { padding:.85rem; height:100vh; }
  .mobile-nav-toggle { display:inline-flex; position:fixed; top:.9rem; left:.9rem; z-index:35; border:1px solid var(--border); background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border-radius:14px; padding:.7rem .9rem; }
  .mobile-nav-close { display:inline-flex; background:transparent; color:#fff; border:none; padding:0; font-size:1.8rem; }
  .shell-backdrop { position:fixed; inset:0; background:rgba(15,23,42,.35); z-index:29; }
  body.nav-open .shell-backdrop { display:block; }
  .topbar { margin-top:3.5rem; }
}
@media (max-width: 640px) {
  .login-page { align-items:flex-end; padding:14px; }
  .login-card { width:100%; max-height:calc(100vh - 16px); border-radius:24px 24px 0 0; padding:24px 18px; }
  .public-shell { padding:.7rem; }
  .public-card { border-radius:22px; }
  .public-header, .public-body { padding:1rem; }
}


.inline-list { display:flex; gap:.75rem; flex-wrap:wrap; }
.marketing-shell { max-width:1180px; margin:0 auto; padding:1.2rem; }
.marketing-nav { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem 0 1.4rem; }
.marketing-nav nav { display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; }
.marketing-brand { font-size:1.45rem; font-weight:800; color:var(--text); }
.hero { display:grid; grid-template-columns:1.3fr .9fr; gap:1rem; align-items:center; }
.hero h1 { margin:.25rem 0 .75rem; font-size:clamp(2rem, 5vw, 4rem); line-height:1.02; letter-spacing:-.04em; }
.hero-side { display:grid; gap:.8rem; }
.marketing-list { margin:1rem 0 0; padding-left:1.1rem; color:var(--muted); }
.marketing-list li { margin:.35rem 0; }
@media (max-width: 860px) {
  .marketing-nav { flex-direction:column; align-items:flex-start; }
  .hero { grid-template-columns:1fr; }
}