.qr-page { --qr-blue:#9ac7ff; --qr-gold:#efd38d; }
.qr-main { padding:62px 0 110px; }
.qr-intro { max-width:920px; }
.truth-card,.studio-card,.preview-card,.check-card { border:1px solid var(--line); border-radius:var(--radius); background:rgba(16,23,19,.88); box-shadow:var(--shadow); }
.truth-card { display:grid; grid-template-columns:auto minmax(0,1fr); gap:20px; padding:clamp(22px,4vw,34px); border-color:rgba(154,199,255,.24); background:linear-gradient(145deg,rgba(154,199,255,.07),rgba(16,23,19,.9)); }
.truth-icon { width:44px; height:44px; display:grid; place-items:center; border-radius:14px; background:rgba(154,199,255,.1); color:var(--qr-blue); font-size:1.35rem; }
.truth-card h2,.studio-card h2,.preview-card h2,.check-card h2 { margin:3px 0 8px; }
.truth-card p { margin:0; color:var(--muted); }
.micro-label { margin:0!important; color:var(--accent)!important; font-size:.69rem!important; font-weight:850; letter-spacing:.15em; text-transform:uppercase; }
.studio-layout { display:grid; grid-template-columns:minmax(0,1.13fr) minmax(350px,.87fr); gap:18px; margin-top:18px; align-items:start; }
.editor-column,.preview-column { display:grid; gap:18px; }
.preview-column { position:sticky; top:18px; }
.studio-card,.preview-card,.check-card { padding:clamp(21px,4vw,34px); }
.card-heading,.preview-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; margin-bottom:20px; }
.card-heading>span,.preview-heading>span { flex:0 0 auto; padding:.42rem .66rem; border-radius:999px; background:rgba(198,223,136,.08); color:var(--accent); font-size:.72rem; font-weight:800; }
.type-tabs { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:22px; }
.type-tabs button { min-height:39px; padding:0 13px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.02); color:var(--muted); cursor:pointer; font-weight:760; font-size:.78rem; }
.type-tabs button:hover,.type-tabs button:focus-visible { color:var(--text); border-color:var(--line-strong); }
.type-tabs button[aria-selected="true"] { background:var(--accent); border-color:var(--accent); color:#11170f; }
.type-panel label,.form-grid label { display:block; min-width:0; color:#dbe2dd; font-size:.78rem; font-weight:750; }
.type-panel input,.type-panel textarea,.type-panel select,.form-grid input,.form-grid textarea,.form-grid select { width:100%; min-height:48px; margin-top:8px; border:1px solid var(--line-strong); border-radius:12px; padding:0 13px; background:#0b100d; color:var(--text); outline:none; }
.type-panel textarea,.form-grid textarea { padding:12px 13px; resize:vertical; }
.type-panel input:focus,.type-panel textarea:focus,.type-panel select:focus,.form-grid input:focus,.form-grid textarea:focus,.form-grid select:focus { border-color:var(--accent-deep); box-shadow:0 0 0 3px rgba(198,223,136,.08); }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.form-grid .wide { grid-column:1 / -1; }
.field-note { margin:9px 0 0; color:var(--soft); font-size:.75rem; }
.field-note code { color:var(--muted); }
.check-row { display:flex!important; align-items:center; gap:10px; min-height:48px; padding:8px 0; }
.check-row input { width:19px!important; min-height:19px!important; margin:0!important; accent-color:var(--accent); }
.payload-preview { margin-top:20px; border-top:1px solid var(--line); padding-top:16px; }
.payload-preview summary { cursor:pointer; color:var(--muted); font-size:.8rem; font-weight:760; }
.payload-preview pre { max-height:220px; margin:14px 0; padding:14px; overflow:auto; border:1px solid var(--line); border-radius:12px; background:#070a08; white-space:pre-wrap; overflow-wrap:anywhere; color:#d8e3dc; font:12px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace; }
.inline-button { min-height:36px; border:1px solid var(--line-strong); border-radius:10px; padding:0 12px; background:transparent; color:var(--text); cursor:pointer; font-weight:760; font-size:.76rem; }
.color-value { display:block; margin-top:5px; color:var(--soft); font:11px ui-monospace,monospace; }
input[type="color"] { padding:5px!important; cursor:pointer; }
.file-label input { position:absolute; width:1px!important; height:1px; min-height:1px!important; opacity:0; }
.file-label>span { display:flex; align-items:center; min-height:48px; margin-top:8px; border:1px dashed var(--line-strong); border-radius:12px; padding:0 13px; color:var(--muted); cursor:pointer; }
.compact { min-height:42px; margin-top:14px; }
.qr-stage { position:relative; display:grid; place-items:center; aspect-ratio:1; overflow:hidden; border:1px solid var(--line); border-radius:20px; background:repeating-conic-gradient(rgba(255,255,255,.025) 0 25%,transparent 0 50%) 0/22px 22px; }
.qr-stage canvas { display:block; width:100%; height:100%; }
#empty-state { position:absolute; inset:0; display:grid; place-content:center; gap:5px; padding:30px; text-align:center; background:rgba(9,13,11,.76); }
#empty-state[hidden] { display:none; }
#empty-state span { color:var(--muted); font-size:.82rem; }
.export-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
.export-actions button { min-width:0; }
#generation-message { margin-top:14px; }
.check-list { display:grid; gap:10px; }
.check-item { display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; padding:14px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.02); }
.check-item>span { width:29px; height:29px; display:grid; place-items:center; border-radius:50%; background:rgba(169,220,145,.1); color:var(--success); font-weight:900; }
.check-item.warning>span { background:rgba(239,211,141,.1); color:var(--warning); }
.check-item.error>span { background:rgba(255,155,143,.1); color:var(--danger); }
.check-item strong { display:block; margin-bottom:3px; }
.check-item p,.empty-check,.check-disclaimer { margin:0; color:var(--muted); font-size:.78rem; }
.check-disclaimer { margin-top:16px; color:var(--soft); }
@media (max-width:960px) { .studio-layout { grid-template-columns:1fr; } .preview-column { position:static; grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:700px) { .truth-card { grid-template-columns:1fr; } .preview-column { grid-template-columns:1fr; } .form-grid { grid-template-columns:1fr; } .form-grid .wide { grid-column:auto; } .export-actions { grid-template-columns:1fr; } .type-tabs { flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; } .type-tabs button { flex:0 0 auto; } }