:root{
  --bg:#f4f8ff;
  --bg-soft:#eef5ff;
  --surface:#ffffff;
  --surface-2:#f8fbff;
  --text:#16324f;
  --muted:#5f7b99;
  --line:#d9e8fb;
  --primary:#6fa8ff;
  --primary-strong:#4f8df6;
  --primary-deep:#2f6fd6;
  --accent:#9dc5ff;
  --success-bg:#e9f9f0;
  --success-text:#256d4f;
  --error-bg:#fff0f3;
  --error-text:#9d3650;
  --warning-bg:#fff7e8;
  --warning-text:#8b6416;
  --shadow:0 18px 48px rgba(87,129,194,.12);
  --shadow-sm:0 8px 24px rgba(87,129,194,.08);
  --radius:22px;
  --radius-sm:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:radial-gradient(circle at top left, rgba(159,196,255,.35), transparent 28%),radial-gradient(circle at top right, rgba(115,168,255,.18), transparent 24%),linear-gradient(180deg, #f7fbff 0%, var(--bg) 100%)}
a{color:var(--primary-deep);text-decoration:none}a:hover{opacity:.9}
.container{max-width:1120px;margin:0 auto;padding:28px}
.wrap{display:grid;grid-template-columns:300px 1fr;min-height:100vh}
.sidebar{background:linear-gradient(180deg, rgba(92,144,243,.96) 0%, rgba(112,177,255,.92) 100%);color:#fff;padding:28px 22px;box-shadow:var(--shadow);position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:14px;margin-bottom:28px}.brand-mark{width:48px;height:48px;border-radius:16px;background:linear-gradient(135deg, rgba(255,255,255,.92), rgba(225,238,255,.82));color:var(--primary-deep);display:grid;place-items:center;font-weight:800;box-shadow:0 8px 20px rgba(17,41,89,.18)}.sidebar-logo{width:54px;height:54px;object-fit:cover;border-radius:18px;background:rgba(255,255,255,.18);padding:4px;box-shadow:0 8px 20px rgba(17,41,89,.18)}.brand-text h2{margin:0;font-size:20px;letter-spacing:.2px}.brand-text p{margin:4px 0 0;color:rgba(255,255,255,.82);font-size:13px;line-height:1.5}
.sidebar nav{display:grid;gap:8px}.sidebar a.nav-link{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;color:#fff;background:rgba(255,255,255,.08);backdrop-filter:blur(6px)}.sidebar a.nav-link:hover,.sidebar a.nav-link.is-active{background:rgba(255,255,255,.18)}
.version-box,.notice{margin-top:18px;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.14);color:#f4f9ff;font-size:13px;line-height:1.6}.notice{background:rgba(255,247,227,.95);color:var(--warning-text)}
.content{padding:32px}.page-header{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:22px}.page-title{margin:0 0 8px;font-size:30px;line-height:1.15}.page-subtitle{margin:0;color:var(--muted);max-width:760px}
.card{background:rgba(255,255,255,.9);border:1px solid rgba(217,232,251,.9);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-sm);margin-bottom:20px;backdrop-filter:blur(10px)}
.card.soft{background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(244,250,255,.96))}.card.hero{padding:30px;background:linear-gradient(135deg, rgba(255,255,255,.95), rgba(235,244,255,.95));box-shadow:var(--shadow)}
.card-title{margin:0 0 8px;font-size:22px}.card-subtitle{margin:0;color:var(--muted)}.stats-grid,.grid,.metrics{display:grid;gap:16px}.stats-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
.stat-card{padding:18px;border-radius:18px;background:linear-gradient(180deg,var(--surface),var(--surface-2));border:1px solid var(--line)}.stat-label{display:block;color:var(--muted);font-size:13px;margin-bottom:8px}.stat-value{font-size:30px;font-weight:800;letter-spacing:-.02em}.stat-note{margin-top:6px;font-size:12px;color:var(--muted)}
label{display:block;margin-bottom:8px;font-weight:700;color:#244567}.field,.input,textarea,select,input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="date"],input[type="file"]{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:14px;background:#fbfdff;color:var(--text);outline:none;transition:.2s ease}textarea{min-height:120px;resize:vertical}input[type="file"]{padding:10px 12px;background:#fff}input:focus,textarea:focus,select:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(111,168,255,.16);background:#fff}
.checkbox-row,label.inline{display:flex;align-items:center;gap:10px;font-weight:600}input[type="checkbox"],input[type="radio"]{width:18px;height:18px;accent-color:var(--primary-strong)}
button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:14px;padding:12px 18px;font-weight:700;cursor:pointer;background:linear-gradient(135deg,var(--primary-strong),var(--primary));color:#fff;box-shadow:0 10px 20px rgba(79,141,246,.22)}button:hover,.btn:hover{transform:translateY(-1px)}.btn-secondary{background:linear-gradient(135deg,#8bb7ff,#b1d0ff);color:#17395b}.btn-ghost{background:#fff;color:var(--primary-deep);border:1px solid var(--line);box-shadow:none}.btn-danger{background:linear-gradient(135deg,#ec7ea0,#d95d83)}.actions{display:flex;gap:10px;flex-wrap:wrap}
.alert{padding:14px 16px;border-radius:16px;margin-bottom:18px;border:1px solid transparent}.alert-success{background:var(--success-bg);color:var(--success-text);border-color:#cdeedb}.alert-error{background:var(--error-bg);color:var(--error-text);border-color:#ffd0db}.small,.muted{font-size:13px;color:var(--muted)}.help-text{font-size:13px;color:var(--muted);margin-top:8px;line-height:1.5}hr{border:none;border-top:1px solid var(--line);margin:24px 0}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:18px;background:#fff}table{width:100%;border-collapse:collapse;min-width:680px}th,td{padding:14px 16px;border-bottom:1px solid #edf4fe;text-align:left;vertical-align:top}th{background:#f4f9ff;color:#406489;font-size:13px;text-transform:uppercase;letter-spacing:.04em}tr:hover td{background:#fbfdff}
.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:#ebf3ff;color:var(--primary-deep);font-size:12px;font-weight:700}.list-clean{padding-left:18px;margin:0}.list-clean li{margin:8px 0}.topnav{display:flex;justify-content:space-between;align-items:center;gap:14px}.topnav-links{display:flex;gap:10px;flex-wrap:wrap}.field-row{position:relative;overflow:hidden}.field-row:before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:linear-gradient(180deg,var(--primary),#bdd6ff)}
.hero-form-title{margin:0 0 10px;font-size:40px;letter-spacing:-.03em}.hero-form-text{margin:0;color:var(--muted);line-height:1.7;max-width:760px}.form-shell{max-width:860px;margin:0 auto}.form-group{margin-bottom:18px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.kbd{display:inline-block;padding:6px 10px;border-radius:999px;background:#edf5ff;color:var(--primary-deep);font-size:12px;font-weight:700}pre.code-block{white-space:pre-wrap;background:#f6faff;padding:14px;border-radius:16px;border:1px solid var(--line);color:#335477}.empty-state{text-align:center;padding:34px;color:var(--muted)}
.public-shell.has-banner{margin-bottom:16px}.brand-banner{margin-bottom:18px;border-radius:28px;overflow:hidden;box-shadow:var(--shadow)}.brand-banner img{width:100%;height:220px;object-fit:cover;display:block}.brand-inline{display:flex;align-items:center;gap:16px}.brand-logo{width:66px;height:66px;object-fit:cover;border-radius:20px;box-shadow:var(--shadow-sm);background:#fff;padding:4px}.public-hero{position:relative;overflow:hidden}.public-hero:after{content:"";position:absolute;inset:auto -40px -40px auto;width:220px;height:220px;background:radial-gradient(circle, rgba(111,168,255,.20), transparent 65%)}.hero-split{display:grid;grid-template-columns:1.5fr .8fr;gap:20px;align-items:center}.hero-glass{padding:18px;border-radius:22px;background:linear-gradient(180deg, rgba(255,255,255,.65), rgba(236,244,255,.8));border:1px solid rgba(217,232,251,.95);box-shadow:var(--shadow-sm)}.hero-glass.compact{align-self:start}.mini-stat{padding:12px 0;border-bottom:1px solid #e6f0ff}.mini-stat:last-child{border-bottom:none}.mini-stat span{display:block;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.mini-stat strong{display:block;font-size:18px;margin-top:4px}.public-form-list{display:grid;gap:14px}.public-form-item{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px;border-radius:18px;border:1px solid var(--line);background:linear-gradient(180deg,#fff,#f9fbff)}.choice-panel{padding:16px;border-radius:18px;background:#fbfdff;border:1px solid #e6f0ff;display:grid;gap:12px}
@media (max-width: 980px){.wrap{grid-template-columns:1fr}.sidebar{position:relative;height:auto}.content{padding:22px}.grid,.metrics,.form-grid,.hero-split{grid-template-columns:1fr}.page-header,.topnav{flex-direction:column;align-items:flex-start}.brand-inline{align-items:flex-start}.brand-banner img{height:160px}}

.email-preview-shell{margin-top:16px;padding:18px;border-radius:20px;background:linear-gradient(180deg,#f7fbff,#eef5ff);border:1px solid var(--line)}
.preview-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}.email-preview-card{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--shadow-sm)}.email-preview-top{display:flex;align-items:center;gap:12px;padding:16px 18px;background:linear-gradient(135deg,#79abff,#b7d1ff);color:#fff}.email-preview-logo{width:44px;height:44px;object-fit:cover;border-radius:14px;background:rgba(255,255,255,.15);padding:4px}.email-subject-preview{font-size:18px;font-weight:800;line-height:1.3}.email-body-preview{padding:18px;line-height:1.7;color:var(--text)}
.branding-preview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.branding-preview-card{background:#fff;border:1px solid var(--line);padding:14px;border-radius:18px}.branding-preview-card img{margin-top:10px;width:100%;max-height:180px;object-fit:cover;border-radius:14px;display:block}.layout-split .hero-form-title,.form-layout-split .hero-form-title{font-size:46px}.layout-split .hero-glass,.form-layout-split .hero-glass{background:linear-gradient(180deg,#ffffff,#f2f7ff)}.layout-minimal .badge,.form-layout-minimal .badge{background:#f7fbff;border:1px solid var(--line)}.minimal-box{background:#fff;border:1px dashed #cfe1fb}.split-card{background:linear-gradient(180deg,#ffffff,#f4f9ff)}
@media (max-width: 980px){.branding-preview-grid{grid-template-columns:1fr}}

body.theme-blue{--primary:#9fc4ff;--primary-strong:#78a9ff;--primary-deep:#2d5ea8;--bg:#eef5ff;--surface:#ffffff;--surface-2:#f7fbff;--line:#d9e8fb;--muted:#5f799a;--text:#1c3553}
body.theme-lavender{--primary:#c7b7ff;--primary-strong:#a792ff;--primary-deep:#5e4ca8;--bg:#f6f1ff;--surface:#ffffff;--surface-2:#fbf8ff;--line:#e6dcff;--muted:#766b9e;--text:#332d57}
body.theme-mint{--primary:#9fe6d6;--primary-strong:#73d5bf;--primary-deep:#257d73;--bg:#eefaf7;--surface:#ffffff;--surface-2:#f7fffd;--line:#d2f0ea;--muted:#5d8d84;--text:#1f4e48}
body.theme-midnight{--primary:#7fa6ff;--primary-strong:#5e85ea;--primary-deep:#dce8ff;--bg:#0f1726;--surface:#162033;--surface-2:#1b2740;--line:#2a3b5e;--muted:#a5b7db;--text:#edf4ff}
body.theme-midnight .card, body.theme-midnight .table-wrap, body.theme-midnight .field, body.theme-midnight input, body.theme-midnight textarea, body.theme-midnight select{background:rgba(22,32,51,.92);color:var(--text);border-color:var(--line)}
body.theme-midnight .btn-ghost{background:#1b2740;color:#edf4ff;border-color:#31466d}body.theme-midnight .badge{background:#20304d;color:#edf4ff}body.theme-midnight .sidebar{background:linear-gradient(180deg,#10192d,#17243c)}body.theme-midnight .alert-success{background:#153423;color:#c8f3da}body.theme-midnight .alert-error{background:#3a1a28;color:#ffd6e1}
.public-form-item.theme-lavender,.theme-preview-shell.theme-lavender .theme-preview-card{background:linear-gradient(180deg,#fff,#f8f4ff);border-color:#e6dcff}
.public-form-item.theme-mint,.theme-preview-shell.theme-mint .theme-preview-card{background:linear-gradient(180deg,#fff,#f3fffb);border-color:#d2f0ea}
.public-form-item.theme-midnight,.theme-preview-shell.theme-midnight .theme-preview-card{background:linear-gradient(180deg,#162033,#1b2740);border-color:#2a3b5e;color:#edf4ff}
.builder-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:12px 0}.field-builder-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}.theme-preview-shell{margin-top:16px;padding:16px;border-radius:22px;background:linear-gradient(180deg,#f8fbff,#eef5ff);border:1px solid var(--line)}.theme-preview-card{padding:22px;border-radius:22px;background:linear-gradient(135deg,#ffffff,#f1f7ff);border:1px solid var(--line);box-shadow:var(--shadow-sm)}.theme-preview-card.layout-split{display:grid;grid-template-columns:1.2fr .8fr;gap:14px}.theme-preview-card.layout-minimal{background:linear-gradient(180deg,#fff,#fcfdff);border-style:dashed}.theme-preview-badge{display:inline-flex;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.74);font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin-bottom:12px}
.theme-preview-shell.theme-blue{background:linear-gradient(180deg,#f8fbff,#eef5ff)}.theme-preview-shell.theme-lavender{background:linear-gradient(180deg,#fbf9ff,#f2ecff)}.theme-preview-shell.theme-mint{background:linear-gradient(180deg,#f8fffd,#eefaf7)}.theme-preview-shell.theme-midnight{background:linear-gradient(180deg,#11192a,#17233a);border-color:#2a3b5e}.theme-preview-shell.theme-midnight .theme-preview-card{color:#edf4ff}.theme-preview-shell.theme-midnight .theme-preview-badge{background:#20304d;color:#edf4ff}


.public-url-preview {margin-top:8px; padding:12px 14px; border-radius:14px; background:rgba(255,255,255,.7); border:1px solid rgba(120,160,255,.18); overflow:auto}
.public-url-preview code {font-size:13px; color:#35508a; white-space:nowrap}