.qr-choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-top:2rem; }
.qr-choice { display:flex; flex-direction:column; min-height:310px; padding:1.5rem; color:var(--ink); background:white; border:1px solid var(--line); border-radius:22px; text-decoration:none; box-shadow:0 12px 35px rgba(24,33,51,.06); transition:.2s; }
.qr-choice:hover { color:var(--ink); border-color:#bcb2f8; transform:translateY(-4px); box-shadow:var(--shadow); }
.qr-choice-icon { display:grid; place-items:center; width:58px; height:58px; margin-bottom:1rem; color:white; background:linear-gradient(135deg,var(--brand),#9d67e8); border-radius:17px; font-weight:900; }
.qr-choice ul { margin:.5rem 0 1rem; padding-left:1.15rem; color:var(--muted); font-size:.9rem; }
.qr-choice .button { margin-top:auto; align-self:flex-start; }
.qr-suite-nav { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.qr-suite-nav a { padding:.5rem .75rem; color:var(--ink); background:white; border:1px solid var(--line); border-radius:9px; font-size:.85rem; font-weight:750; text-decoration:none; }
.qr-suite-nav a[aria-current="page"] { color:white; background:var(--brand); border-color:var(--brand); }
.qr-workspace { display:grid; grid-template-columns:minmax(350px,.95fr) minmax(360px,1.05fr); gap:1.25rem; align-items:start; padding:1.5rem 0 4rem; }
.qr-controls,.qr-preview-panel { min-width:0; background:white; border:1px solid var(--line); border-radius:18px; box-shadow:0 10px 30px rgba(27,36,55,.06); }
.qr-panel-title { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:1rem 1.15rem; background:#fafbfe; border-bottom:1px solid var(--line); border-radius:18px 18px 0 0; }
.qr-panel-title h2 { margin:0; font-size:1.05rem; }
.qr-control-body { display:grid; gap:1rem; padding:1.15rem; }
.qr-field-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; }
.qr-content-fields { display:grid; gap:.8rem; }
.qr-content-fields .textarea { min-height:110px; }
.required::after { content:" *"; color:var(--danger); }
.qr-preview-panel { position:sticky; top:88px; }
.qr-preview-stage { display:grid; place-items:center; min-height:480px; padding:clamp(1rem,4vw,2rem); background:radial-gradient(circle at 50% 40%,#fff,#edf0f6); overflow:auto; }
.qr-preview-stage canvas { display:block; width:min(100%,440px); height:auto; background:transparent; border-radius:8px; box-shadow:0 10px 28px rgba(20,27,42,.14); image-rendering:auto; }
.qr-placeholder { max-width:280px; color:var(--muted); text-align:center; }
.qr-placeholder strong { display:block; color:var(--ink); font-size:1.05rem; }
.qr-preview-actions { display:flex; flex-wrap:wrap; gap:.55rem; padding:1rem; border-top:1px solid var(--line); }
.qr-preview-actions .button { flex:1 1 120px; }
.qr-quality { display:flex; flex-wrap:wrap; gap:.5rem; padding:0 1rem 1rem; }
.quality-badge { padding:.35rem .55rem; border-radius:999px; color:#08634f; background:#e8f8f3; font-size:.76rem; font-weight:750; }
.quality-badge.warning { color:#7a4d00; background:#fff3d4; }
.content-tabs { display:grid; grid-template-columns:repeat(5,1fr); gap:.35rem; }
.content-tab { min-height:42px; padding:.4rem .3rem; color:var(--muted); background:white; border:1px solid var(--line); border-radius:8px; font-size:.75rem; font-weight:750; cursor:pointer; }
.content-tab:hover,.content-tab.active { color:var(--brand-dark); background:#efecff; border-color:#bcb2f8; }
.advanced-tabs { display:flex; gap:.35rem; overflow-x:auto; padding-bottom:.2rem; scrollbar-width:thin; }
.advanced-tab { flex:0 0 auto; padding:.55rem .75rem; color:var(--muted); background:white; border:1px solid var(--line); border-radius:9px; font-size:.82rem; font-weight:750; cursor:pointer; }
.advanced-tab.active { color:white; background:var(--brand); border-color:var(--brand); }
.advanced-section { display:grid; gap:.9rem; }
.style-options { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; }
.style-option { cursor:pointer; }
.style-option input { position:absolute; opacity:0; pointer-events:none; }
.style-option span { display:grid; place-items:center; min-height:56px; padding:.45rem; text-align:center; border:1px solid var(--line); border-radius:9px; font-size:.78rem; font-weight:750; }
.style-option input:checked+span { color:var(--brand-dark); background:#efecff; border-color:#a99df4; box-shadow:0 0 0 2px rgba(102,87,232,.08); }
.color-field { display:grid; grid-template-columns:48px 1fr; gap:.55rem; }
.color-field input[type=color] { width:48px; height:46px; padding:3px; background:white; border:1px solid var(--line); border-radius:9px; }
.color-field .input { min-width:0; }
.range-with-value { display:grid; grid-template-columns:1fr 66px; gap:.6rem; align-items:center; }
.range-with-value output { padding:.35rem .45rem; text-align:center; background:var(--soft); border-radius:7px; font-size:.78rem; }
.logo-preview { display:flex; align-items:center; gap:.7rem; }
.logo-preview img { width:58px; height:58px; object-fit:contain; background:var(--soft); border:1px solid var(--line); border-radius:10px; }
.template-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem; }
.template-card { padding:.8rem; text-align:left; background:white; border:1px solid var(--line); border-radius:10px; cursor:pointer; }
.template-card:hover { border-color:#bcb2f8; background:#faf9ff; }
.template-card strong,.template-card span { display:block; }
.template-card span { color:var(--muted); font-size:.76rem; }
.history-list { display:grid; gap:.55rem; }
.history-item { display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding:.65rem; background:white; border:1px solid var(--line); border-radius:9px; }
.history-main { min-width:0; }
.history-main strong,.history-main span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.history-main span { color:var(--muted); font-size:.75rem; }
.history-actions { display:flex; gap:.3rem; }
.history-actions button { min-height:34px; padding:.3rem .5rem; }
.privacy-strip { padding:.75rem 1rem; color:#08634f; background:#effaf7; border:1px solid #cbece3; border-radius:11px; font-size:.82rem; }
.privacy-strip strong { display:block; }
.qr-compare { width:100%; border-collapse:collapse; margin-top:1.5rem; }
.qr-compare th,.qr-compare td { padding:.75rem; text-align:left; border-bottom:1px solid var(--line); }
.qr-compare th { background:var(--soft); }
.qr-compare td:first-child { font-weight:750; }
.upload-button { position:relative; overflow:hidden; }
.upload-button input { position:absolute; inset:0; width:100%; opacity:0; cursor:pointer; }
.switch-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.switch-row input { accent-color:var(--brand); width:18px; height:18px; }
.qr-message { min-height:1.4em; }
@media(max-width:980px){.qr-workspace{grid-template-columns:1fr}.qr-preview-panel{position:static}.qr-preview-stage{min-height:360px}.content-tabs{grid-template-columns:repeat(3,1fr)}}
@media(max-width:650px){.qr-choice-grid,.qr-field-grid{grid-template-columns:1fr}.qr-workspace{padding-top:1rem}.qr-control-body{padding:.9rem}.qr-preview-stage{min-height:320px;padding:1rem}.content-tabs{grid-template-columns:repeat(2,1fr)}.style-options{grid-template-columns:repeat(2,1fr)}.template-grid{grid-template-columns:1fr}.qr-preview-actions{position:sticky;bottom:.3rem;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);z-index:10}.qr-compare{display:block;overflow-x:auto;white-space:nowrap}}

.advanced-section[hidden] { display: none !important; }