/* ========================
   Variables (user-provided)
   ======================== */
:root {
    --primary: #00ff88;
    --secondary: #0099ff;
    --accent: #ff3366;
    --dark: #0a0a0a;
    --dark-gray: #1a1a1a;
    --gray: #2a2a2a;
    --light: #f5f5f5;
    --transition: all 0.3s ease;
}

[data-theme="light"] {
    --primary: #0099ff;
    --secondary: #00cc88;
    --accent: #ff3366;
    --dark: #f5f5f5;
    --dark-gray: #ffffff;
    --gray: #e0e0e0;
    --light: #0a0a0a;
}

/* ========================
   Reset & Base
   ======================== */
* { box-sizing: border-box; }
/* html,body { height: 100%; margin: 0; font-family: "Segoe UI", Inter, Arial, sans-serif; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body { background: var(--dark); color: var(--light); padding: 18px; display:flex; justify-content:center; } */

/* ========================
   Layout
   ======================== */
.container { width:100%; max-width:1280px; display:grid; grid-template-columns: 1fr 520px; gap:20px; align-items:start; }
@media (max-width: 980px) { .container { grid-template-columns: 1fr; } }

/* ========================
   Card
   ======================== */
.qrcode .card { background: var(--dark-gray); border-radius: 12px; padding:20px; border: 1px solid rgba(255,255,255,0.04); }
.qrcode .header-title { margin:0 0 12px; font-size:20px; color: var(--primary); }
.qrcode .lead { color: var(--light); font-size:13px; margin-bottom:8px; }

/* ========================
   Form controls
   ======================== */
.qrcode .form-label { display:block; margin:12px 0 6px; font-weight:600; font-size:13px; color:var(--light); }
.qrcode .input, .select, .textarea, .number-input { width:100%; padding:10px 12px; border-radius:10px; background:var(--gray); border:1px solid var(--input-border, rgba(255,255,255,0.06)); color:var(--light); font-size:14px; }
.qrcode .textarea { min-height:80px; resize:vertical; }
.qrcode .select { appearance:none; }

/* color pickers (styled circle wrapper) */
.qrcode .color-row { display:flex; gap:16px; align-items:center; }
.qrcode .color-picker { position:relative; width:46px; height:46px; border-radius:50%; overflow:hidden; background:var(--dark); border:2px solid rgba(255,255,255,0.04); }
.qrcode .color-picker input[type=color] { position:absolute; inset:0; opacity:0; cursor:pointer; }

/* small text */
.qrcode .small { font-size:12px; color: rgba(255,255,255,0.6); }

/* switches */
.qrcode .switch {
    position: relative;
    display: inline-block;
        width: 89px;
    height: 20px;
}

.qrcode .switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.qrcode .switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #5c5c5c; /* OFF state background */
    border-radius: 34px;
    transition: 0.25s ease;
}

.qrcode .switch .slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    top: 2px;
    background: #ffffff; /* knob always white */
    border-radius: 50%;
    transition: 0.25s ease;
}

/* ON STATE */
.qrcode .switch input:checked + .slider {
    background: var(--secondary); /* Blue from your theme */
}

.qrcode .switch input:checked + .slider:before {
    transform: translateX(16px);
}



/* Fix AI Colors button single-line text */
.qrcode .btn-ai {
    white-space: nowrap;     /* Prevent line break */
    width: 120px;            /* Set a consistent width */
    justify-content: center; /* Center icon + text */
    display: inline-flex;
    align-items: center;
    gap: 6px;                /* Icon spacing */
    padding: 8px 12px;
}
/* inline row */
.qrcode .inline-row { display:flex; gap:12px; align-items:center; }

/* ========================
   Buttons
   (all use classes, no inline)
   ======================== */
.qrcode .button { padding:10px 16px; border-radius:10px; border: none; cursor:pointer; font-weight:700; transition: var(--transition); }
.qrcode .btn-primary { background: linear-gradient(90deg, var(--primary), var(--secondary)); color: rgba(0,0,0,0.9); }
.qrcode .btn-secondary { background: var(--dark-gray); color: var(--light); border:1px solid rgba(255,255,255,0.04); }
.qrcode .btn-danger { background: var(--accent); color: #fff; }

/* small action button */
.qrcode .btn-compact { padding:6px 10px; border-radius:8px; font-size:13px; }

/* icons */
.qrcode .icon { margin-right:8px; }

/* ========================
   QR preview
   ======================== */
.qrcode .preview-area { text-align:center; }
.qrcode .qr-holder { width:100%; max-width:420px; background:var(--light); padding:12px; border-radius:14px; margin:16px auto; display:flex; align-items:center; justify-content:center; }
.qrcode .qr-container { width:100%; }

/* logo preview */
.qrcode .logo-preview { display:flex; flex-direction:column; align-items:center; gap:8px; }
.qrcode .logo-thumb { max-width:90px; border-radius:8px; }

/* ========================
   Utility classes
   ======================== */
.qrcode .row { display:flex; gap:12px; align-items:center; }
.qrcode .col { display:flex; flex-direction:column; gap:8px; }
.qrcode .hidden { display:none !important; }

/* ========================
   Responsive tweaks
   ======================== */
@media (max-width: 520px) {
  .qrcode  .qr-holder { max-width: 320px; }
}

/* small muted text */
.qrcode  .muted { color: rgba(255,255,255,0.6); font-size:13px; text-align:center; }


.qrcode .color-picker {
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--dark);
    border: 2px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
}

.qrcode .color-picker input[type=color] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.qrcode .color-preview {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}