:root, [data-theme="light"] {
  --color-bg: #f4f6f9;
  --color-surface: #ffffff;
  --color-surface-2: #f8fafc;
  --color-border: #e2e8f0;
  --color-divider: #eef2f6;
  --color-text: #0f1729;
  --color-text-muted: #64748b;
  --color-text-faint: #94a3b8;
  --color-primary: #0e7c66;
  --color-primary-hover: #0a6353;
  --color-primary-fg: #ffffff;
  --color-accent: #38e8c8;
  --shadow-sm: 0 1px 2px rgba(15,23,41,.06);
  --shadow-md: 0 6px 20px rgba(15,23,41,.08);
  --shadow-lg: 0 20px 50px rgba(15,23,41,.12);

  --radius-sm: .5rem;
  --radius-md: .75rem;
  --radius-lg: 1.1rem;
  --transition: 180ms cubic-bezier(.16,1,.3,1);

  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;

  --text-xs: clamp(.75rem,.7rem + .25vw,.8125rem);
  --text-sm: clamp(.875rem,.83rem + .2vw,.9375rem);
  --text-base: clamp(1rem,.96rem + .2vw,1.0625rem);
  --text-lg: clamp(1.05rem,1rem + .4vw,1.25rem);
  --text-xl: clamp(1.5rem,1.25rem + 1vw,2.1rem);

  --font-body: 'General Sans','Inter',system-ui,sans-serif;
  --font-mono: 'JetBrains Mono',ui-monospace,monospace;
}

[data-theme="dark"] {
  --color-bg: #0a0f1c;
  --color-surface: #111827;
  --color-surface-2: #0f1626;
  --color-border: #24304a;
  --color-divider: #1b2438;
  --color-text: #e6ebf4;
  --color-text-muted: #94a3b8;
  --color-text-faint: #64748b;
  --color-primary: #2dd4bf;
  --color-primary-hover: #5eead4;
  --color-primary-fg: #042f2a;
  --color-accent: #38e8c8;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 6px 20px rgba(0,0,0,.5);
  --shadow-lg: 0 20px 50px rgba(0,0,0,.6);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}
body{
  min-height:100dvh;
  font-family:var(--font-body);
  font-size:var(--text-base);
  line-height:1.6;
  color:var(--color-text);
  background:
    radial-gradient(1200px 600px at 80% -10%, color-mix(in srgb, var(--color-primary) 8%, transparent), transparent),
    var(--color-bg);
  background-attachment:fixed;
  display:flex;flex-direction:column;
  transition:background-color var(--transition),color var(--transition);
}
img,canvas,svg{display:block;max-width:100%}
input,button,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:var(--radius-sm)}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* Topbar */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-4) clamp(var(--space-4),4vw,var(--space-10));
  border-bottom:1px solid var(--color-border);
  background:color-mix(in srgb,var(--color-surface) 70%,transparent);
  backdrop-filter:blur(10px);position:sticky;top:0;z-index:10;
}
.brand{display:flex;align-items:center;gap:var(--space-3);text-decoration:none;color:var(--color-text);font-weight:600;font-size:var(--text-lg)}
.logo .logo-bg{color:var(--color-text)}
.topbar-right{display:flex;align-items:center;gap:var(--space-3)}
.free-pill{
  font-size:var(--text-xs);font-weight:500;color:var(--color-primary);
  background:color-mix(in srgb,var(--color-primary) 12%,transparent);
  padding:.35rem .7rem;border-radius:var(--radius-sm);white-space:nowrap;
}
.icon-btn{
  width:38px;height:38px;display:grid;place-items:center;border-radius:var(--radius-sm);
  color:var(--color-text-muted);border:1px solid var(--color-border);background:var(--color-surface);
  transition:all var(--transition);
}
.icon-btn:hover{color:var(--color-text);border-color:var(--color-primary)}

/* Layout */
.layout{
  flex:1;width:100%;max-width:1180px;margin:0 auto;
  padding:clamp(var(--space-6),4vw,var(--space-12)) clamp(var(--space-4),4vw,var(--space-10));
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(var(--space-6),3vw,var(--space-10));
  align-items:start;
}
@media (max-width:880px){.layout{grid-template-columns:1fr}}

.panel{
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-md);
  padding:clamp(var(--space-5),3vw,var(--space-8));
}
.page-title{font-size:var(--text-xl);font-weight:700;letter-spacing:-.02em;line-height:1.1}
.subtitle{color:var(--color-text-muted);font-size:var(--text-sm);margin-top:var(--space-2);max-width:46ch}

/* Tabs */
.tabs{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-6)}
.tab{
  font-size:var(--text-sm);font-weight:500;color:var(--color-text-muted);
  padding:.45rem .85rem;border-radius:var(--radius-full,99px);border:1px solid var(--color-border);
  border-radius:99px;transition:all var(--transition);
}
.tab:hover{color:var(--color-text);border-color:var(--color-text-faint)}
.tab.is-active{background:var(--color-primary);color:var(--color-primary-fg);border-color:var(--color-primary)}

/* Fields */
.fields{margin-top:var(--space-5);display:flex;flex-direction:column;gap:var(--space-4)}
.field{display:flex;flex-direction:column;gap:var(--space-2)}
.field label{font-size:var(--text-sm);font-weight:500;color:var(--color-text)}
.field input,.field textarea,.field select{
  width:100%;padding:.7rem .85rem;font-size:var(--text-sm);
  background:var(--color-surface-2);border:1px solid var(--color-border);
  border-radius:var(--radius-md);color:var(--color-text);transition:all var(--transition);
}
.field textarea{resize:vertical;min-height:90px;font-family:inherit}
.field input::placeholder,.field textarea::placeholder{color:var(--color-text-faint)}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--color-primary);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 18%,transparent);
}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
@media (max-width:480px){.field-row{grid-template-columns:1fr}}
.check-field{flex-direction:row;align-items:center;gap:var(--space-2)}
.check-field input{width:auto}

/* Appearance group */
.group{margin-top:var(--space-8);padding-top:var(--space-6);border-top:1px solid var(--color-divider)}
.group-title{font-size:var(--text-sm);font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted);margin-bottom:var(--space-4)}
.appearance-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.color-field,.select-field,.range-field{display:flex;flex-direction:column;gap:var(--space-2);font-size:var(--text-sm);font-weight:500}
.color-field span,.select-field span,.range-field span{color:var(--color-text)}
.color-field input[type=color]{
  -webkit-appearance:none;appearance:none;width:100%;height:42px;border:1px solid var(--color-border);
  border-radius:var(--radius-md);background:var(--color-surface-2);padding:4px;cursor:pointer;
}
.color-field input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.color-field input[type=color]::-webkit-color-swatch{border:none;border-radius:.4rem}
.select-field select{padding:.6rem .7rem;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-md)}
.range-field em{font-style:normal;font-family:var(--font-mono);color:var(--color-primary)}
.range-field input[type=range]{accent-color:var(--color-primary);height:42px}

.swatches{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-4)}
.swatch{
  width:34px;height:34px;border-radius:var(--radius-sm);border:2px solid var(--color-border);
  background:linear-gradient(135deg,var(--a) 0 50%,var(--b) 50% 100%);transition:transform var(--transition),border-color var(--transition);
}
.swatch:hover{transform:scale(1.08);border-color:var(--color-primary)}

/* Preview */
.preview{position:sticky;top:88px;display:flex;flex-direction:column;gap:var(--space-5)}
@media (max-width:880px){.preview{position:static}}
.preview-stage{display:grid;place-items:center;padding:var(--space-4)}
.qr-frame{
  position:relative;width:min(320px,72vw);aspect-ratio:1;display:grid;place-items:center;
  background:var(--color-surface-2);border:1px dashed var(--color-border);border-radius:var(--radius-lg);
  padding:var(--space-5);transition:border-color var(--transition);
}
.qr-frame.has-code{border-style:solid;border-color:var(--color-border);background:var(--color-surface)}
#qrCanvas{width:100%;height:100%;image-rendering:pixelated;border-radius:.4rem;display:none}
.qr-frame.has-code #qrCanvas{display:block}
.empty-hint{position:absolute;color:var(--color-text-faint);font-size:var(--text-sm);text-align:center;padding:0 var(--space-6)}
.qr-frame.has-code .empty-hint{display:none}

.download-row{display:flex;gap:var(--space-3);flex-wrap:wrap;justify-content:center}
.btn{
  display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);font-weight:600;
  padding:.65rem 1.1rem;border-radius:var(--radius-md);transition:all var(--transition);border:1px solid transparent;
}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-primary{background:var(--color-primary);color:var(--color-primary-fg)}
.btn-primary:not(:disabled):hover{background:var(--color-primary-hover)}
.btn-secondary{background:var(--color-surface-2);color:var(--color-text);border-color:var(--color-border)}
.btn-secondary:not(:disabled):hover{border-color:var(--color-primary);color:var(--color-primary)}
.btn-ghost{color:var(--color-text-muted);border-color:transparent}
.btn-ghost:not(:disabled):hover{color:var(--color-text);background:var(--color-surface-2)}
.status{text-align:center;font-size:var(--text-xs);color:var(--color-text-muted);min-height:1.2em}
.status.error{color:#dc2626}
.status.ok{color:var(--color-primary)}

.footer{
  text-align:center;padding:var(--space-8) var(--space-4);
  font-size:var(--text-xs);color:var(--color-text-faint);border-top:1px solid var(--color-border);
}
.footer p{max-width:62ch;margin:0 auto}