:root{
  --bg:#0f1014;
  --card:#171922;
  --ink:#ffffff;
  --muted:#c7ced9;
  --line:rgba(255,255,255,.12);
  --pink:#ff4fa3;
  --cyan:#2ed3ff;
  --lime:#b8ff3b;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,-apple-system,sans-serif;color:var(--ink)}
.theme-dark{
  background:
    radial-gradient(circle at top left, rgba(46,211,255,.2), transparent 25%),
    radial-gradient(circle at top right, rgba(255,79,163,.2), transparent 22%),
    linear-gradient(180deg, #0f1014 0%, #0a0b0f 100%);
}
.screen-center{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:28px;
}
.card{
  width:min(520px,100%);
  background:rgba(23,25,34,.88);
  backdrop-filter:blur(16px);
  border:1px solid var(--line);
  border-radius:24px;
  padding:32px;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
}
.street-card{position:relative;overflow:hidden}
.street-card::before,.street-card::after{
  content:"";
  position:absolute;
  width:180px;height:180px;pointer-events:none;opacity:.18;filter:blur(8px);
  background:
    radial-gradient(circle at 30% 20%, var(--pink), transparent 32%),
    radial-gradient(circle at 60% 50%, var(--cyan), transparent 28%),
    radial-gradient(circle at 50% 80%, var(--lime), transparent 20%);
}
.street-card::before{left:-10px;bottom:-10px}
.street-card::after{right:-10px;top:-10px;transform:rotate(180deg)}
.spray-tag{
  display:inline-block;background:linear-gradient(90deg,var(--pink),var(--cyan));color:#fff;
  padding:8px 14px;border-radius:999px;letter-spacing:.18em;font-weight:800;font-size:.74rem;text-transform:uppercase;margin-bottom:12px;
}
.spray-tag.small{font-size:.66rem;padding:6px 10px}
h1,h2{margin:0 0 10px}
.subtitle,.panel-user{color:var(--muted)}
.stack{display:grid;gap:12px}
input,select,textarea{
  width:100%;border-radius:14px;border:1px solid var(--line);background:#12141b;color:#fff;padding:14px 16px;
}
button,.btn{
  border:0;border-radius:14px;padding:13px 18px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;
}
.btn{background:#232634;color:#fff}
.btn-primary{background:linear-gradient(90deg,var(--pink),var(--cyan));color:#fff;font-weight:700}
.alert{padding:12px 14px;border-radius:14px;margin:10px 0 14px}
.alert-error{background:rgba(255,79,163,.15);border:1px solid rgba(255,79,163,.35)}
.alert-success{background:rgba(46,211,255,.15);border:1px solid rgba(46,211,255,.35)}
.link-white,.theme-dark a,body.theme-dark a{color:#fff;text-decoration:underline}
.checkbox-row{display:flex;align-items:center;gap:10px;color:#fff}
.checkbox-row input{width:auto}
.builder-shell{display:grid;grid-template-columns:340px 1fr;min-height:100vh}
.builder-panel{padding:24px;border-right:1px solid var(--line);background:rgba(13,14,18,.85)}
.builder-stage{display:flex;align-items:center;justify-content:center;padding:24px}
.phone-frame{
  width:min(440px,100%);
  min-height:720px;
  background:#12141b;
  border:1px solid var(--line);
  border-radius:34px;
  padding:24px;
  overflow:auto;
  transition:background-color .2s ease,color .2s ease,font-size .2s ease,font-family .2s ease;
}
.tool-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.color-field{display:block}
.color-input{
  width:100%;
  height:48px;
  padding:4px;
  border-radius:14px;
  border:1px solid var(--line);
  cursor:pointer;
  background:#12141b;
}
.color-input-filled{-webkit-appearance:none;appearance:none}
.color-input-filled::-webkit-color-swatch-wrapper{padding:0;border-radius:10px}
.color-input-filled::-webkit-color-swatch{border:none;border-radius:10px}
.color-input-filled::-moz-color-swatch{border:none;border-radius:10px}

.font-button-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
.font-choice-btn{
  width:100%;
  justify-content:flex-start;
  text-align:left;
  background:#232634;
  color:#fff;
  border:1px solid var(--line);
}
.font-choice-btn:hover{
  background:rgba(255,255,255,.08);
}
.font-choice-btn.is-active{
  background:#ffffff;
  color:#111111;
  border-color:#ffffff;
}

.font-scale-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.font-scale-btn{
  justify-content:center;
}
.font-scale-btn.is-active{
  background:linear-gradient(90deg,var(--pink),var(--cyan));
  color:#fff;
  font-weight:700;
}

.live-text-editor{
  transition:background-color .2s ease,color .2s ease,font-size .2s ease,font-family .2s ease;
}

.builder-block-card{
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  padding:14px;
  margin-bottom:16px;
  background:rgba(255,255,255,.03);
  transition:transform .15s ease, border-color .15s ease, background-color .15s ease, opacity .15s ease;
}
.builder-block-card.is-dragging{
  opacity:.55;
  transform:scale(.99);
}
.builder-block-card.is-drop-target{
  border-color:rgba(46,211,255,.75);
  background:rgba(46,211,255,.08);
}
.builder-block-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}
.builder-block-title{
  font-size:.92rem;
  font-weight:700;
  color:var(--muted);
}
.drag-handle{
  cursor:grab;
  user-select:none;
  font-size:1.2rem;
  line-height:1;
  color:var(--cyan);
  padding:4px 8px;
  border-radius:10px;
  background:rgba(46,211,255,.08);
}
.drag-handle:active{
  cursor:grabbing;
}

@media (max-width:960px){
  .builder-shell{grid-template-columns:1fr}
  .builder-panel{border-right:0;border-bottom:1px solid var(--line)}
}