:root{
  --bg:#080a0f;
  --panel:rgba(18, 20, 28, .72);
  --panel-border:rgba(255,255,255,.08);
  --text:#f5f7fb;
  --muted:#c9ccda;
  --accent:#6ee7f9;
  --accent-2:#8b5cf6;
  --success:#22c55e;
  --danger:#ef4444;

  /* Swal theme */
  --swal-bg: rgba(18, 20, 28, .92);
  --swal-border: rgba(255,255,255,.10);
  --swal-text: #f5f7fb;
  --swal-confirm: linear-gradient(90deg,#6ee7f9,#8b5cf6);
  --swal-cancel: rgba(255,255,255,.08);
}

/* พื้นฐาน */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Kanit", system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans Thai", sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 10% -10%, #0f172a 0%, rgba(15,23,42,0) 55%),
    radial-gradient(1200px 600px at 110% 10%, #111827 0%, rgba(17,24,39,0) 55%),
    linear-gradient(180deg, #0b1020 0%, #0a0f1a 100%);
  min-height:100svh; overflow-x:hidden;
}
a{color:inherit;text-decoration:none}

/* เอฟเฟ็กต์พื้นหลัง */
.bokeh{position:fixed; width:42vmax; height:42vmax; filter:blur(70px); opacity:.25; z-index:-1; border-radius:50%}
.bokeh-1{background:radial-gradient(circle at 30% 30%, #22c55e, transparent 60%); top:-10vmax; left:-10vmax; animation:float1 18s ease-in-out infinite}
.bokeh-2{background:radial-gradient(circle at 70% 70%, #3b82f6, transparent 60%); bottom:-12vmax; right:-12vmax; animation:float2 22s ease-in-out infinite}
.bokeh-3{background:radial-gradient(circle at 50% 50%, #8b5cf6, transparent 60%); top:20vmax; left:40%; animation:float3 26s ease-in-out infinite}
@keyframes float1{0%,100%{transform:translate(0,0)}50%{transform:translate(3vmax,2vmax)}}
@keyframes float2{0%,100%{transform:translate(0,0)}50%{transform:translate(-3vmax,-1vmax)}}
@keyframes float3{0%,100%{transform:translate(0,0)}50%{transform:translate(1vmax,-2vmax)}}

/* โครง */
.container{max-width:1180px;margin:0 auto;padding:20px}
.header{padding-top:26px}
.brand{display:flex;gap:14px;align-items:center}
.logo{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-weight:800;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 10px 30px rgba(79,70,229,.35)}
.title{margin:0;font-size:clamp(22px,2.4vw,30px);background:linear-gradient(90deg,#e5e7eb,#a5b4fc,#6ee7f9);-webkit-background-clip:text;background-clip:text;color:transparent}
.subtitle{margin:.15rem 0 0 0; color:var(--muted)}

.grid-new{display:grid;gap:20px;align-items:start;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.panel{backdrop-filter:saturate(130%) blur(12px);background:var(--panel);border:1px solid var(--panel-border);border-radius:18px;padding:20px;box-shadow:0 8px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06)}
.panel-preview{position:sticky; top:20px}

/* ฟอร์ม */
.group{border:none;padding:0;margin:0 0 18px 0}
.group>legend{font-size:13px;color:#a7adbf;letter-spacing:.3px;margin-left:6px;margin-bottom:8px}
.form-row{margin-bottom:16px}
.form-row.tight{margin-top:10px;margin-bottom:0}
label{display:block;margin-bottom:8px;color:#e5e7eb}
textarea,select,input[type="number"],input[type="file"],input[type="color"]{width:100%;background:rgba(14,16,24,.8);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:12px 12px;color:var(--text);outline:none;transition:box-shadow .2s,border-color .2s,transform .06s}
textarea{min-height:90px}
textarea:focus,select:focus,input:focus{border-color:#6ee7f9;box-shadow:0 0 0 3px rgba(110,231,249,.25)}
.input-with-indicator{position:relative}
.charcount{position:absolute;right:10px;bottom:10px;font-size:12px;color:var(--muted);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);padding:2px 8px;border-radius:10px}
.tips{font-size:12px;color:var(--muted);margin-top:6px}
.cols-3{display:grid;gap:12px;grid-template-columns:1fr 1fr 1fr}
.cols-2{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.field>label{margin-bottom:8px}
.range-hint{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:6px}

/* พรีวิวสี */
.color-preview{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
.swatch{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:10px}
.chip{width:34px;height:34px;border-radius:10px;border:1px solid rgba(255,255,255,.14)}
.meta .l1{font-size:12px;color:#b8bed0}
.meta .l2{font-size:13px;letter-spacing:.2px}

/* โหมดสี/ขนาดโลโก้ */
.logo-color-modes .logo-color-options{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.logo-color-modes .radio{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);padding:8px 10px;border-radius:10px}
.logo-color-modes input[type="color"]{width:44px;height:34px;border-radius:10px;padding:2px}
.logo-size-row .logo-size-controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.logo-size-row .checkbox{display:flex;gap:8px;align-items:center;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);padding:8px 10px;border-radius:10px}
.size-inline{display:flex;align-items:center;gap:8px}
.size-inline input[type="number"]{width:120px}
.size-inline .size-note{opacity:.7}
.size-live{font-size:12px;color:#c9ccda}
.range-wrap{margin-top:10px}

/* Upload card */
.upload-card{display:grid;gap:14px;align-items:center;padding:14px;border:1px dashed rgba(255,255,255,.16);border-radius:14px;background:rgba(255,255,255,.03);transition:border-color .2s,background .2s}
.upload-card:hover{border-color:#6ee7f9;background:rgba(110,231,249,.07)}
.upload-card.right-preview{grid-template-columns:1fr auto}
.upload-center{min-width:0}
.upload-right{display:grid;place-items:center}
.thumb{width:60px;height:60px;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,rgba(110,231,249,.22),rgba(139,92,246,.22));border:1px solid rgba(255,255,255,.12);display:grid;place-items:center}
.thumb.large{width:84px;height:84px}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb-placeholder{font-size:28px;opacity:.8}
.upload-title{font-weight:600}
.upload-sub{font-size:12px;color:var(--muted);margin-top:2px}
.upload-actions{display:flex;gap:10px;margin-top:8px}
.linklike{background:transparent;border:1px dashed rgba(255,255,255,.25);color:#e5e7eb}
.linklike:hover{border-color:#6ee7f9}
.btn.sm{padding:8px 10px;border-radius:10px}

/* ปุ่ม */
.btn{appearance:none;border:none;cursor:pointer;user-select:none;padding:12px 16px;border-radius:12px;color:#0b0c10;font-weight:600;letter-spacing:.2px;transition:transform .06s ease,box-shadow .2s ease,opacity .2s ease;text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn.primary{color:#05121a;background:linear-gradient(90deg,#6ee7f9,#8b5cf6);box-shadow:0 10px 30px rgba(139,92,246,.35)}
.btn.ghost{color:#e5e7eb;background:transparent;border:1px solid rgba(255,255,255,.14)}
.btn.success{color:#04110a;background:linear-gradient(90deg,#86efac,#22c55e);box-shadow:0 10px 30px rgba(34,197,94,.35);pointer-events:none;opacity:.55}
.btn.success.ready{pointer-events:auto;opacity:1}
.actions{display:flex;gap:12px;margin-top:16px}

/* พรีวิว QR */
.preview-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.preview-head h2{margin:0}
.badge{margin-top:6px;display:inline-block;font-size:12px;color:#052011;background:linear-gradient(90deg,#bbf7d0,#86efac);padding:3px 10px;border-radius:999px;border:1px solid rgba(0,0,0,.08)}
.preview-wrap{display:grid;place-items:center;margin-top:10px;background:repeating-conic-gradient(from 25deg,#0e1420 0% 25%,#0c111b 0% 50%) 50%/22px 22px;border-radius:14px;border:1px solid rgba(255,255,255,.08);min-height:420px}
canvas#qrCanvas{max-width:96%;height:auto;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.hint-list{color:var(--muted);font-size:13px;line-height:1.6}

/* Swal2 custom theme */
.swal2-popup{
  background:var(--swal-bg)!important;
  color:var(--swal-text)!important;
  border:1px solid var(--swal-border)!important;
  border-radius:16px!important;
  backdrop-filter: blur(10px) saturate(120%);
}
.swal2-title{font-weight:600!important}
.swal2-styled.swal2-confirm{
  background:var(--swal-confirm)!important;
  color:#04111a!important;
  border:0!important;
}
.swal2-styled.swal2-cancel{
  background:var(--swal-cancel)!important;
  color:#e5e7eb!important;
  border:1px solid rgba(255,255,255,.12)!important;
}

/* Responsive */
@media (max-width:1060px){
  .grid-new{grid-template-columns:1fr}
  .panel-preview{position:static}
  .preview-wrap{min-height:360px}
}
@media (max-width:640px){
  .cols-3{grid-template-columns:1fr}
  .cols-2{grid-template-columns:1fr}
  .brand{gap:10px}
  .logo{width:36px;height:36px;border-radius:10px}
  .panel{padding:16px;border-radius:16px}
  .btn{width:100%}
  .upload-actions{flex-wrap:wrap}
  .actions{display:grid;grid-template-columns:1fr;gap:10px}
}