:root{
  --bg:#071021;
  --card: rgba(255,255,255,0.04);
  --muted: #98a0aa;
  --accent1: linear-gradient(90deg,#ff7a00,#ff2d8b);
  --glass: rgba(255,255,255,0.04);
  --radius:14px;
  --glass-border: rgba(255,255,255,0.06);
  --text:#f7fafc;
}

.theme-light{
  --bg: #f6f9fc;
  --card: rgba(10,10,10,0.03);
  --muted:#6b7280;
  --glass: rgba(255,255,255,0.6);
  --glass-border: rgba(10,10,10,0.06);
  --text:#0b1220;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:
    radial-gradient(1200px 400px at 10% 10%, rgba(255,45,139,0.06), transparent 8%),
    radial-gradient(800px 300px at 90% 90%, rgba(0,122,255,0.04), transparent 12%),
    var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding:16px;
}

/* Layout */
.app{
  max-width:980px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:18px;
}

/* header */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand{display:flex;align-items:center;gap:12px}
.logo-dot{width:36px;height:36px;border-radius:10px;background:var(--accent1);box-shadow:0 6px 18px rgba(0,0,0,0.25)}
.brand h1{font-size:18px;margin:0;font-weight:600;letter-spacing:0.2px}

/* panels */
.panel{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  border-radius: var(--radius);
  padding:14px;
  box-shadow: 0 6px 18px rgba(2,6,23,0.45);
  border:1px solid var(--glass-border);
  backdrop-filter: blur(6px) saturate(120%);
}

.form{display:flex;flex-direction:column;gap:12px}
.field{display:flex;flex-direction:column;gap:8px}
.field.small{flex-direction:row;align-items:center;gap:10px}
.field.tiny{display:flex;flex-direction:column;align-items:flex-start}
.field .lbl{font-size:12px;color:var(--muted)}
input[type="text"], input[type="color"]{
  padding:12px 12px;border-radius:10px;border:1px solid var(--glass-border);background:var(--card);color:var(--text);
  outline:none;font-size:14px;
}
input[type="color"]{height:40px;padding:6px}

/* logo choices row */
.logo-choices{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.logo-choice{width:44px;height:44px;border-radius:8px;object-fit:contain;padding:6px;background:rgba(255,255,255,0.03);border:1px solid transparent;cursor:pointer;transition:transform .18s, box-shadow .18s}
.logo-choice:hover{transform:translateY(-4px);box-shadow:0 10px 20px rgba(2,6,23,0.45)}
.logo-choice.selected{box-shadow:0 10px 30px rgba(0,0,0,0.5);border-color:rgba(255,255,255,0.08)}
.logo-upload{display:inline-flex;align-items:center;justify-content:center;padding:8px 10px;border-radius:10px;background:linear-gradient(90deg,#ffffff08,#ffffff06);cursor:pointer;border:1px dashed var(--glass-border);font-size:13px;color:var(--muted)}
.logo-upload input{display:none}

/* preview */
.preview-panel{
  display:flex;
  gap:16px;
  flex-direction:column;
}
.preview{
  display:flex;
  gap:12px;
  align-items:flex-start;
  flex-direction:column;
}
.preview-canvas{
  width:100%;max-width:420px;border-radius:16px;padding:16px;background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  display:flex;justify-content:center;align-items:center;border:1px solid var(--glass-border)
}
canvas{background:transparent;border-radius:6px;max-width:100%}

/* meta area */
.preview-meta{display:flex;gap:12px;align-items:center;justify-content:space-between}
.logo-preview{display:flex;gap:8px;align-items:center}
.logo-preview img{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,0.05);background:var(--card);padding:6px}
.logo-label{font-size:12px;color:var(--muted)}

/* tiny controls */
.meta-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.row{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.actions{display:flex;gap:8px}

/* buttons */
.btn{padding:10px 14px;border-radius:12px;border:0;background:transparent;color:var(--text);cursor:pointer;font-weight:600;box-shadow:0 6px 14px rgba(2,6,23,0.35);transition:transform .12s}
.btn:hover{transform:translateY(-3px)}
.btn.primary{background:linear-gradient(90deg,#ff7a00,#ff2d8b);color:white}
.btn.ghost{background:transparent;border:1px solid var(--glass-border);padding:8px 10px}

/* help */
.help{background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);padding:12px;border-radius:12px;border:1px solid var(--glass-border)}
.help h3{margin:0 0 8px 0}
.help ol{padding-left:18px;margin:0;color:var(--muted)}

/* footer */
.footer{display:flex;justify-content:center;padding:6px;color:var(--muted);font-size:13px}

/* responsive */
@media(min-width:860px){
  .preview-panel{flex-direction:row;align-items:flex-start}
  .panel{flex:1}
  .preview-panel > .preview{width:420px;flex:0 0 420px}
  .preview .preview-meta{flex-direction:column;align-items:flex-start}
}