:root{
  --bg: linear-gradient(135deg,#f7f8fb 0%,#eef1f7 100%);
  --card-bg: rgba(255,255,255,0.75);
  --card-border: rgba(0,0,0,0.08);
  --shadow: 0 8px 30px rgba(0,0,0,0.06);
  --ring: rgba(99,102,241,0.25);
  --accent: linear-gradient(135deg,#6366f1,#8b5cf6);
  --text: #0f172a;
  --muted: #475569;
}

*{box-sizing:border-box}
body{
  margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--text); background:var(--bg) fixed;
}

.site-header{ padding:24px clamp(16px,4vw,48px); }
.brand{ display:flex; align-items:center; gap:16px; }
.logo{ width:56px; height:56px; object-fit:contain; border-radius:12px; }
.title{ margin:0; font-size:28px; font-weight:700; }
.subtitle{ margin:4px 0 0; color:var(--muted); font-size:14px; }

.wrap{ display:grid; grid-template-columns: minmax(280px, 420px) 1fr; gap:24px; padding:0 clamp(16px,4vw,48px) 24px; }

.card{
  background:var(--card-bg);
  border:1px solid var(--card-border);
  backdrop-filter: blur(10px) saturate(140%);
  border-radius:16px;
  box-shadow:var(--shadow);
  overflow:visible; /* allow tooltips */
}

.card-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; border-bottom:1px solid var(--card-border);
  overflow:visible;
}
.card-head h2{ margin:0; font-size:16px; font-weight:600; color:#111827; }

.controls{ padding:18px; }
.stack{ display:flex; flex-direction:column; gap:24px; }

.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:12px; color:#334155; font-weight:600; }
.field input[type="text"], .field select{
  background:#fff; border:1px solid #e5e7eb; border-radius:10px;
  padding:10px 12px; font-size:14px; min-height:42px; line-height:1.4; width:100%;
  transition:box-shadow .2s ease, border-color .2s ease;
}
.field input:focus, .field select:focus{ outline:none; border-color:#6366f1; box-shadow:0 0 0 4px var(--ring); }
.span-2{ grid-column: span 2; }

.color-row{ grid-column: span 2; display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; }
.color-swatch{ appearance:none; width:44px; height:44px; border:none; border-radius:10px; cursor:pointer; }
.color-swatch::-webkit-color-swatch{border:none; border-radius:10px;}
.color-swatch::-moz-color-swatch{border:none; border-radius:10px;}

.preview-area{ padding:18px; min-height:120px; display:flex; align-items:center; justify-content:center; }

.code-card pre{
  margin:0; padding:16px 18px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:13px; line-height:1.55; background:#fbfbfd; max-height:260px; overflow:auto;
}

.icon-btn{ display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:10px; border:1px solid #e5e7eb; background:#fff; cursor:pointer; position:relative;
}
.icon-btn:hover{ box-shadow:0 6px 16px rgba(0,0,0,.06); }
.icon-btn:focus{ outline:none; border-color:#6366f1; box-shadow:0 0 0 4px var(--ring); }

.copy-tooltip{
  position:absolute; top:-38px; right:50%; transform:translateX(50%);
  background:#111827; color:#fff; font-size:12px; padding:4px 8px;
  border-radius:8px; opacity:0; pointer-events:none; transition:opacity .25s ease;
  white-space:nowrap; z-index:20;
}

.site-footer{ padding:28px; color:#6b7280; text-align:center; font-size:13px; }

@media (max-width:980px){ .wrap{ grid-template-columns:1fr; } }