/* ============================================================
   TenantHub — Light Glassmorphism theme
   Bright surfaces · layered translucency · controlled blur
  亮眼背景 · 精致层次 · 克制的冷色
   ============================================================ */

:root {
  --ink: #1f2c4c;
  --muted: #5f6f93;
  --accent: #4c6ef5;
  --accent-2: #19b1e6;
  --accent-soft: rgba(76, 110, 245, .12);
  --danger: #e0506e;
  --ok: #16a17a;
  --glass-bg: linear-gradient(150deg, rgba(255,255,255,.78), rgba(255,255,255,.5));
  --glass-brd: 1px solid rgba(255,255,255,.75);
  --glass-shdw: 0 10px 34px rgba(38, 64, 122, .10), 0 2px 8px rgba(38, 64, 122, .06);
  --glass-inner: inset 0 1px 0 rgba(255,255,255,.85);
  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 11px;
  --tr: .22s cubic-bezier(.4, 0, .2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Segoe UI", "Inter", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  min-height: 100vh;
  background:
    radial-gradient(1100px 700px at 85% -10%, #dcebff 0%, transparent 60%),
    radial-gradient(900px 650px at -10% 20%, #e6f9f3 0%, transparent 55%),
    radial-gradient(1000px 800px at 50% 110%, #e8e6ff 0%, transparent 60%),
    linear-gradient(165deg, #f2f6ff 0%, #eef3fb 45%, #f4f8ff 100%);
  background-attachment: fixed;
  font-size: 15px;
  line-height: 1.55;
}

/* ---- Floating background blobs ---- */
.bg-blob {
  position: fixed;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .5;
  pointer-events: none;
  z-index: 0;
  animation: drift 36s ease-in-out infinite alternate;
}
.b1 { width: 460px; height: 460px; background: #b9d8ff; top: -140px; right: -100px; }
.b2 { width: 380px; height: 380px; background: #c5f2e4; bottom: -120px; left: -120px; animation-delay: -12s; }
.b3 { width: 420px; height: 420px; background: #dcd8ff; top: 30%; left: 32%; opacity: .35; animation-delay: -24s; }
@keyframes drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(60px, 40px) scale(1.12); }
}

/* ---- Glass building block ---- */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: var(--glass-brd);
  box-shadow: var(--glass-shdw), var(--glass-inner);
  border-radius: var(--r-lg);
}
.glass-inner {
  background: rgba(255,255,255,.5);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--r-md);
}

/* ---- App shell ---- */
.shell { display: flex; min-height: 100vh; position: relative; z-index: 1; }
.sidebar {
  width: 252px;
  flex: 0 0 252px;
  margin: 18px 0 18px 18px;
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: sticky;
  top: 18px;
  height: calc(100vh - 36px);
  animation: slideRight .5s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes slideRight { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }

.brand { display: flex; align-items: center; gap: 12px; padding: 4px 8px; }
.brand.center { justify-content: center; }
.brand-mark {
  width: 42px; height: 42px; border-radius: 14px; flex: 0 0 42px;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 8px 20px rgba(76,110,245,.35), inset 0 1px 0 rgba(255,255,255,.4);
}
.brand-mark .ic { width: 22px; height: 22px; }
.brand strong { display: block; font-size: 17px; letter-spacing: .2px; }
.brand small { color: var(--muted); font-size: 11.5px; letter-spacing: .6px; text-transform: uppercase; }

.nav { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.nav-link {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: var(--r-sm);
  color: var(--muted); text-decoration: none; font-weight: 600; font-size: 14px;
  border: 1px solid transparent;
  transition: all var(--tr);
}
.nav-link .ic { width: 19px; height: 19px; }
.nav-link:hover { color: var(--ink); background: rgba(255,255,255,.65); transform: translateX(3px); }
.nav-link.active {
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 8px 18px rgba(76,110,245,.32);
  border-color: rgba(255,255,255,.25);
}

.side-user {
  display: flex; align-items: center; gap: 10px;
  padding: 12px; border-radius: var(--r-md);
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.7);
}
.avatar {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 12px;
  display: grid; place-items: center; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #8f7bf0, #4cc3f0);
}
.su-txt { min-width: 0; flex: 1; }
.su-txt strong { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.su-txt small { color: var(--muted); font-size: 11px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.main-col { flex: 1; min-width: 0; padding: 18px 26px 40px; }
.topbar { display: none; }
.content { max-width: 1220px; margin: 0 auto; }

/* ---- Page head ---- */
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  margin: 14px 2px 24px; flex-wrap: wrap;
}
.page-head h1 { margin: 0; font-size: 27px; letter-spacing: -.4px; }
.muted { color: var(--muted); }
.sm { font-size: 12.5px; }
.page-actions { display: flex; gap: 10px; align-items: center; }
.inline-form { display: flex; }

/* ---- Panels ---- */
.panel { padding: 20px; margin-bottom: 20px; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.panel-head h3 { margin: 0; font-size: 16px; }
.link { color: var(--accent); text-decoration: none; font-weight: 600; transition: color var(--tr); }
.link:hover { color: var(--accent-2); }
.empty { color: var(--muted); text-align: center; padding: 30px 10px; }

/* ---- Stat cards ---- */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.stat { display: flex; align-items: center; gap: 14px; padding: 18px; transition: transform var(--tr), box-shadow var(--tr); }
.stat:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(38,64,122,.14), var(--glass-inner); }
.stat-ic {
  width: 46px; height: 46px; flex: 0 0 46px; border-radius: 14px;
  display: grid; place-items: center; color: #fff;
}
.stat-ic .ic { width: 22px; height: 22px; }
.i-blue   { background: linear-gradient(135deg, #4c6ef5, #38bdf8); box-shadow: 0 6px 16px rgba(76,110,245,.35); }
.i-green  { background: linear-gradient(135deg, #10b981, #6ee7b7); box-shadow: 0 6px 16px rgba(16,185,129,.3); }
.i-violet { background: linear-gradient(135deg, #8b5cf6, #c4b5fd); box-shadow: 0 6px 16px rgba(139,92,246,.3); }
.i-cyan   { background: linear-gradient(135deg, #06b6d4, #67e8f9); box-shadow: 0 6px 16px rgba(6,182,212,.3); }
.stat-n { font-size: 24px; font-weight: 700; letter-spacing: -.5px; }
.stat-l { color: var(--muted); font-size: 12.5px; }

.grid-2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; }
.grid-inner { display: flex; flex-direction: column; gap: 16px; }
.mini2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ---- Tables ---- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11.5px; letter-spacing: .8px; text-transform: uppercase;
  color: var(--muted); font-weight: 700; padding: 10px 12px; border-bottom: 1px solid rgba(31,44,76,.08);
}
.table td { padding: 12px; border-bottom: 1px solid rgba(31,44,76,.06); vertical-align: middle; }
.table tbody tr { transition: background var(--tr); }
.table tbody tr:hover { background: rgba(255,255,255,.6); }
.table tbody tr:last-child td { border-bottom: 0; }
.td-actions { display: flex; gap: 4px; align-items: center; }
.th-actions { text-align: right; }
.td-actions form { display: inline; }

/* ---- Badges ---- */
.badge {
  display: inline-block; padding: 4px 11px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .3px;
  border: 1px solid rgba(255,255,255,.65); backdrop-filter: blur(6px);
}
.b-applicant { background: rgba(76,110,245,.16); color: #3b5bd9; }
.b-active    { background: rgba(16,185,129,.16); color: #0d8d6a; }
.b-notice    { background: rgba(245,158,11,.18); color: #b4680b; }
.b-vacated   { background: rgba(148,163,184,.2); color: #64748b; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: var(--r-sm);
  font-weight: 700; font-size: 14px; cursor: pointer; text-decoration: none;
  border: 1px solid transparent; transition: all var(--tr);
  color: var(--ink);
}
.btn .ic { width: 17px; height: 17px; }
.btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 8px 20px rgba(76,110,245,.32), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(76,110,245,.42), inset 0 1px 0 rgba(255,255,255,.35); filter: brightness(1.04); }
.btn-primary:active { transform: translateY(0); }
.btn-ghost { background: rgba(255,255,255,.6); border-color: rgba(31,44,76,.1); backdrop-filter: blur(8px); }
.btn-ghost:hover { background: rgba(255,255,255,.85); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(38,64,122,.1); }
.w-full { width: 100%; justify-content: center; }
.w-auto { width: auto; }

.icon-btn {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; border-radius: 10px;
  color: var(--muted); background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.7);
  cursor: pointer; text-decoration: none; transition: all var(--tr); flex: 0 0 34px;
}
.icon-btn .ic { width: 16px; height: 16px; }
.icon-btn:hover { color: var(--accent); transform: translateY(-1px); box-shadow: 0 5px 12px rgba(38,64,122,.12); }
.icon-btn.danger:hover { color: var(--danger); background: rgba(224,80,110,.1); }
.menu-btn { display: none; }

/* ---- Forms / inputs ---- */
.form-control {
  width: 100%; padding: 10px 13px; font: inherit; font-size: 14px; color: var(--ink);
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(31,44,76,.12);
  border-radius: var(--r-sm);
  box-shadow: inset 0 1px 2px rgba(31,44,76,.05), 0 1px 0 rgba(255,255,255,.7) inset;
  backdrop-filter: blur(6px);
  transition: border var(--tr), box-shadow var(--tr), background var(--tr);
  outline: none;
  appearance: none;
}
select.form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235f6f93' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px;
}
textarea.form-control { resize: vertical; min-height: 80px; }
.form-control:focus {
  border-color: rgba(76,110,245,.55);
  background: rgba(255,255,255,.9);
  box-shadow: 0 0 0 4px var(--accent-soft), inset 0 1px 2px rgba(31,44,76,.05);
}
.form-control::placeholder { color: #9aa7c2; }

.fform-row { margin-bottom: 16px; }
.fform-row > label { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .3px; color: var(--muted); margin-bottom: 6px; text-transform: uppercase; }
.star { color: var(--danger); }
.fhelp { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }
.fgroup { display: flex; flex-wrap: wrap; gap: 10px; }
.fopt {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--r-sm); font-size: 13.5px;
  background: rgba(255,255,255,.55); border: 1px solid rgba(31,44,76,.1);
  cursor: pointer; transition: all var(--tr);
}
.fopt:hover { border-color: rgba(76,110,245,.4); }
.fopt input { accent-color: var(--accent); }

.filewrap { display: flex; align-items: center; gap: 10px; }
.file-input { display: none; }
.file-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: var(--r-sm); cursor: pointer;
  background: rgba(255,255,255,.6); border: 1px dashed rgba(76,110,245,.45);
  color: var(--accent); font-weight: 700; font-size: 13px; transition: all var(--tr);
  flex: 0 0 auto;
}
.file-btn:hover { background: var(--accent-soft); transform: translateY(-1px); }
.file-name { color: var(--muted); font-size: 12.5px; }

.form-sec { margin: 18px 0 10px; font-size: 13px; letter-spacing: .5px; text-transform: uppercase; color: var(--accent); }
.form-panel { padding: 26px; }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 22px; }
.form-actions { display: flex; gap: 10px; margin-top: 8px; }

/* ---- Toolbar ---- */
.toolbar-form { display: flex; gap: 10px; flex-wrap: wrap; }
.search-wrap { position: relative; flex: 1; min-width: 220px; }
.search-wrap .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); }
.search-wrap .form-control { padding-left: 36px; }

/* ---- Flash ---- */
.flash-zone { position: sticky; top: 10px; z-index: 30; display: flex; flex-direction: column; gap: 8px; }
.flash {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: var(--r-md); font-weight: 600; font-size: 14px;
  background: rgba(255,255,255,.8); backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 8px 24px rgba(38,64,122,.12);
  animation: dropIn .35s cubic-bezier(.2,.9,.3,1.2) both;
}
@keyframes dropIn { from { opacity: 0; transform: translateY(-10px) scale(.98); } to { opacity: 1; transform: none; } }
.flash-s { border-left: 4px solid var(--ok); }
.flash-e { border-left: 4px solid var(--danger); }
.flash .ic { width: 18px; height: 18px; color: var(--ok); flex: 0 0 18px; }
.flash-e .ic { color: var(--danger); }
.flash-x { margin-left: auto; background: none; border: 0; font-size: 18px; cursor: pointer; color: var(--muted); }

/* ---- Auth / installer ---- */
.auth-body { display: grid; place-items: center; min-height: 100vh; padding: 24px; }
.auth-card { width: 100%; max-width: 430px; padding: 38px 34px; }
.install-card { max-width: 540px; }
.auth-title { margin: 6px 0 2px; font-size: 24px; letter-spacing: -.4px; }
.auth-sub { color: var(--muted); margin: 0 0 20px; }
.hint { color: var(--muted); font-size: 12.5px; }
.mb24 { margin-bottom: 24px; }
.mt16 { margin-top: 16px; }

/* ---- Feed ---- */
.feed-row { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid rgba(31,44,76,.05); font-size: 13.5px; }
.feed-row:last-child { border-bottom: 0; }
.feed-ic { color: var(--accent); }
.feed-ic .ic { width: 16px; height: 16px; }
.feed-t { margin-left: auto; font-size: 11.5px; }
.tenant-link { border-bottom: 1px dashed rgba(31,44,76,.12); padding-bottom: 14px; }

/* ============================================================
   FORM BUILDER
   ============================================================ */
.builder-shell { display: grid; grid-template-columns: 232px 1fr 288px; gap: 16px; align-items: start; }
.pal, .insp { position: sticky; top: 18px; max-height: calc(100vh - 40px); overflow-y: auto; }
.pal-h { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 14px; }
.pal-h .ic { width: 17px; height: 17px; color: var(--accent); }
.pal-tip { margin: 0 0 12px; }
.pal-grid { display: grid; grid-template-columns: 1fr; gap: 7px; }
.pal-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); text-align: left;
  background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.75);
  border-radius: var(--r-sm); cursor: grab;
  transition: all var(--tr);
}
.pal-item:hover { background: #fff; border-color: rgba(76,110,245,.4); transform: translateX(3px); box-shadow: 0 5px 14px rgba(38,64,122,.1); }
.pal-item:active { cursor: grabbing; }
.pal-item.drag-ghost { opacity: .45; }
.pal-ic {
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 8px;
  display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 800;
}
.t-text     { background: linear-gradient(135deg,#4c6ef5,#6c9bf5); } .t-text::before     { content: "T"; }
.t-textarea { background: linear-gradient(135deg,#0ea5e9,#38d9f5); } .t-textarea::before { content: "¶"; }
.t-select   { background: linear-gradient(135deg,#8b5cf6,#c084fc); } .t-select::before   { content: "▾"; }
.t-radio    { background: linear-gradient(135deg,#ec4899,#f9a8d4); } .t-radio::before    { content: "◉"; }
.t-checkbox { background: linear-gradient(135deg,#10b981,#6ee7b7); } .t-checkbox::before { content: "☑"; }
.t-file     { background: linear-gradient(135deg,#f59e0b,#fcd34d); } .t-file::before     { content: "↑"; }
.t-number   { background: linear-gradient(135deg,#06b6d4,#67e8f9); } .t-number::before   { content: "#"; }
.t-email    { background: linear-gradient(135deg,#6366f1,#a5b4fc); } .t-email::before    { content: "@"; }
.t-tel      { background: linear-gradient(135deg,#14b8a6,#5eead4); } .t-tel::before      { content: "☏"; }
.t-url      { background: linear-gradient(135deg,#3b82f6,#93c5fd); } .t-url::before      { content: "↗"; }
.t-date     { background: linear-gradient(135deg,#f43f5e,#fda4af); } .t-date::before     { content: "▦"; }
.t-time     { background: linear-gradient(135deg,#a855f7,#e9d5ff); } .t-time::before     { content: "◷"; }
.t-color    { background: conic-gradient(from 180deg,#f87171,#fbbf24,#4ade80,#38bdf8,#818cf8,#f87171); }
.t-color::before { content: "◍"; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.t-range    { background: linear-gradient(135deg,#34d399,#a7f3d0); } .t-range::before    { content: "⇋"; }
.t-hidden   { background: linear-gradient(135deg,#94a3b8,#cbd5e1); } .t-hidden::before   { content: "◌"; }
.t-heading  { background: linear-gradient(135deg,#1f2c4c,#5f6f93); } .t-heading::before  { content: "H"; }
.t-paragraph{ background: linear-gradient(135deg,#475569,#94a3b8); } .t-paragraph::before{ content: "≡"; }
.t-divider  { background: linear-gradient(135deg,#d4d9e3,#eef1f7); } .t-divider::before  { content: "—"; color: #64748b; }

.canvas-wrap { min-height: 420px; }
.form-meta { border-bottom: 1px dashed rgba(31,44,76,.14); padding-bottom: 16px; margin-bottom: 16px; }
.canvas { display: flex; flex-direction: column; gap: 10px; min-height: 60px; }
.canvas-empty { color: #9aa7c2; text-align: center; padding: 44px 12px; border: 2px dashed rgba(31,44,76,.13); border-radius: var(--r-md); margin-bottom: 12px; transition: all var(--tr); }
.canvas-empty.drag-over, .canvas.drag-over ~ .canvas-empty.drag-over { border-color: rgba(76,110,245,.55); background: var(--accent-soft); color: var(--accent); }
.canvas.drop-into { outline: 2px dashed rgba(76,110,245,.45); outline-offset: 6px; border-radius: var(--r-md); }

.frow {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: var(--r-md);
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.8);
  transition: all var(--tr);
  animation: dropIn .3s cubic-bezier(.2,.9,.3,1.15) both;
}
.frow:hover { background: #fff; box-shadow: 0 6px 18px rgba(38,64,122,.09); }
.frow.selected { border-color: rgba(76,110,245,.6); box-shadow: 0 0 0 3px var(--accent-soft), 0 6px 18px rgba(38,64,122,.09); background: #fff; }
.frow.drag-ghost { opacity: .4; }
.frow.drop-before { box-shadow: 0 -3px 0 0 var(--accent); }
.frow.drop-after { box-shadow: 0 3px 0 0 var(--accent); }
.fhandle { color: #b3bdd4; cursor: grab; padding-top: 4px; }
.fhandle:active { cursor: grabbing; }
.fhandle .ic { width: 18px; height: 18px; }
.frow-body { flex: 1; min-width: 0; }
.frow-body > label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .3px; color: var(--muted); text-transform: uppercase; margin-bottom: 5px; }
.frow-tools { display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; }
.ftype-tag {
  position: absolute; right: 52px; top: 12px; display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .4px; color: var(--muted); text-transform: uppercase;
}
.frow { position: relative; }

.req-dot {
  display: inline-flex; width: 8px; height: 8px; border-radius: 50%;
  background: var(--danger); margin-left: 5px; vertical-align: middle;
}
.frow-preview input.form-control, .frow-preview textarea.form-control, .frow-preview select.form-control {
  pointer-events: none;
}
.frow-preview .form-control { background: rgba(255,255,255,.75); }
.frow-bhead h3 { margin: 0; font-size: 17px; }
.frow-bpara p { margin: 0; color: var(--muted); font-size: 13.5px; }
.frow-bdiv { height: 2px; background: linear-gradient(90deg, transparent, rgba(31,44,76,.18), transparent); margin: 6px 0; }
.rangeval { display: inline-block; min-width: 34px; text-align: center; font-weight: 700; color: var(--accent); }

.preview-wrap { margin-top: 16px; }
.preview-wrap summary { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 700; font-size: 13px; color: var(--accent); }
.preview-wrap summary .ic { width: 16px; height: 16px; }
.preview { padding: 18px; margin-top: 12px; }

/* Inspector */
.insp .fform-row { margin-bottom: 12px; }
.insp-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.insp-actions { display: flex; gap: 8px; margin-top: 4px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1180px) {
  .builder-shell { grid-template-columns: 1fr; }
  .pal, .insp { position: static; max-height: none; }
  .pal-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}
@media (max-width: 960px) {
  .grid-2 { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .shell { display: block; }
  .sidebar {
    position: fixed; z-index: 50; top: 0; left: 0; bottom: 0; height: auto;
    border-radius: 0 var(--r-lg) var(--r-lg) 0;
    transform: translateX(-110%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    width: 264px; margin: 0;
  }
  body.sidebar-open .sidebar { transform: none; }
  .scrim { position: fixed; inset: 0; background: rgba(31,44,76,.28); z-index: 40; opacity: 0; pointer-events: none; transition: opacity .3s; }
  body.sidebar-open .scrim { opacity: 1; pointer-events: auto; }
  .topbar {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; margin-bottom: 12px;
    background: rgba(255,255,255,.7); backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.75); border-radius: var(--r-md);
    box-shadow: var(--glass-shdw);
    position: sticky; top: 8px; z-index: 20;
  }
  .topbar h2 { margin: 0; font-size: 17px; }
  .menu-btn { display: inline-grid; }
  .main-col { padding: 12px 14px 32px; }
  .fgrid { grid-template-columns: 1fr; }
  .page-head h1 { font-size: 22px; }
  .form-actions { flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .stat-grid { grid-template-columns: 1fr; }
  .frow-tools { flex-direction: row; }
}

/* ---- Motion preference ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---- Scrollbars ---- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(31,44,76,.16); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(31,44,76,.28); }