*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:hidden;max-width:100vw}
:root{
  --primary:#6366f1;--secondary:#a855f7;
  --bg:#080818;--surface:rgba(14,14,36,0.97);--surface-2:rgba(20,20,46,0.95);
  --border:rgba(255,255,255,0.07);--border-hi:rgba(99,102,241,0.45);
  --text:#f1f5f9;--muted:#94a3b8;--radius:12px;--radius-sm:7px;
}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);min-height:100vh}

/* ── Orbs ── */
.bg-orbs{position:fixed;inset:0;pointer-events:none;z-index:0}
.orb{position:absolute;border-radius:50%;filter:blur(100px);opacity:.1}
.orb-1{width:400px;height:400px;background:radial-gradient(circle,#6366f1,transparent);top:-150px;left:-150px}
.orb-2{width:300px;height:300px;background:radial-gradient(circle,#a855f7,transparent);top:45%;right:-60px}
.orb-3{width:260px;height:260px;background:radial-gradient(circle,#06b6d4,transparent);bottom:-40px;left:35%}

/* ── Header ── */
.app-header{position:sticky;top:0;z-index:100;background:rgba(8,8,24,0.9);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:8px 14px;height:48px}
.header-left{display:flex;align-items:center;gap:8px}
.logo-icon{width:30px;height:30px;background:linear-gradient(135deg,rgba(99,102,241,.2),rgba(168,85,247,.2));border:1px solid rgba(99,102,241,.3);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.app-title{font-size:14px;font-weight:800;background:linear-gradient(135deg,#e2e8f0,#a5b4fc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.2}
.app-sub{font-size:10px;color:var(--muted);line-height:1}
.header-actions{display:flex;align-items:center;gap:5px}
.header-btn{background:rgba(99,102,241,.1);border:1px solid rgba(99,102,241,.2);border-radius:7px;color:var(--muted);padding:5px 8px;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:4px;font-size:11px;font-family:inherit;font-weight:600}
.header-btn:hover{background:rgba(99,102,241,.2);color:#a5b4fc}
.header-share-btn{background:rgba(99,102,241,.15);border:1px solid rgba(99,102,241,.3);border-radius:7px;color:#a5b4fc;padding:6px;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}
.header-share-btn:hover{background:rgba(99,102,241,.25)}
.hbtn-label{display:none}
@media(min-width:640px){.hbtn-label{display:inline}}

/* ── Container ── */
.container{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:10px 10px 50px}

/* ── Palettes & Templates bars ── */
.palettes-bar,.templates-bar{display:flex;align-items:center;gap:8px;margin-bottom:6px;overflow:hidden}
.palettes-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--primary);white-space:nowrap;flex-shrink:0;min-width:60px}
.palettes-scroll{display:flex;gap:5px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:1px}
.palettes-scroll::-webkit-scrollbar{display:none}
.palette-btn{background:var(--surface);border:1px solid var(--border);border-radius:99px;padding:3px 8px;cursor:pointer;display:flex;align-items:center;gap:4px;font-size:10px;font-family:inherit;color:var(--muted);white-space:nowrap;flex-shrink:0;transition:all .15s;height:22px}
.palette-btn:hover{border-color:var(--border-hi);color:var(--text)}
.pal-dot{width:11px;height:11px;border-radius:50%;flex-shrink:0;display:inline-block}
.tpl-chip{background:var(--surface);border:1px solid var(--border);border-radius:99px;padding:3px 9px;cursor:pointer;font-size:10px;font-family:inherit;color:var(--muted);white-space:nowrap;flex-shrink:0;transition:all .15s;height:22px;display:flex;align-items:center}
.tpl-chip:hover{border-color:var(--border-hi);color:var(--text);background:rgba(99,102,241,.08)}

/* ── Main layout ── */
.layout{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.left-col{display:flex;flex-direction:column;min-width:0}
.right-col{display:flex;flex-direction:column;position:sticky;top:52px;min-width:0}

/* ── Tabs ── */
.tabs{display:flex;gap:1px;background:var(--surface);border:1px solid var(--border);border-bottom:none;border-radius:10px 10px 0 0;padding:5px 5px 0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{background:transparent;border:none;border-radius:6px 6px 0 0;padding:6px 10px;font-size:11px;font-weight:600;font-family:inherit;color:var(--muted);cursor:pointer;white-space:nowrap;transition:all .15s;border-bottom:2px solid transparent;flex-shrink:0}
.tab:hover{color:var(--text)}
.tab.active{color:#a5b4fc;border-bottom-color:var(--primary)}

/* ── Panel ── */
.panel{background:var(--surface);border:1px solid var(--border);border-radius:0 0 14px 14px;padding:12px;display:flex;flex-direction:column;gap:12px}
.tab-panel{display:none}
.tab-panel.active-panel{display:flex;flex-direction:column;gap:12px}
.section{display:flex;flex-direction:column;gap:7px}
.section-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--primary)}

/* ── Type grid ── */
.type-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.type-btn{background:var(--surface-2);border:1px solid var(--border);color:var(--muted);border-radius:7px;padding:6px 3px;cursor:pointer;font-size:10px;font-family:inherit;display:flex;flex-direction:column;align-items:center;gap:2px;transition:all .15s}
.type-btn:hover{border-color:var(--border-hi);color:var(--text)}
.type-btn.active{background:linear-gradient(135deg,rgba(99,102,241,.22),rgba(168,85,247,.12));border-color:rgba(99,102,241,.55);color:#a5b4fc;font-weight:600}
.type-icon{font-size:14px}

/* ── Fields ── */
.input-field,.select-field,.textarea-field{width:100%;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:inherit;font-size:12px;padding:7px 10px;outline:none;transition:border-color .2s}
.textarea-field{resize:vertical;min-height:56px}
.input-field:focus,.select-field:focus,.textarea-field:focus{border-color:var(--border-hi);box-shadow:0 0 0 2px rgba(99,102,241,.1)}
.input-field::placeholder,.textarea-field::placeholder{color:var(--muted);font-size:11px}
.field-label{font-size:10.5px;font-weight:500;color:var(--muted)}
.field-group{display:flex;flex-direction:column;gap:3px;flex:1}
.field-row{display:flex;gap:6px}

/* ── Color ── */
.color-row{display:flex;gap:6px;align-items:center}
.color-picker{width:32px;height:28px;border-radius:6px;border:1px solid var(--border);background:transparent;cursor:pointer;padding:2px;flex-shrink:0}
.color-hex{flex:1;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:monospace;font-size:11px;padding:6px 8px;outline:none}

/* ── Toggle ── */
.toggle-row{display:flex;align-items:center;justify-content:space-between}
.toggle{position:relative;display:inline-block;width:34px;height:18px}
.toggle input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;cursor:pointer;inset:0;background:var(--surface-2);border:1px solid var(--border);border-radius:99px;transition:.3s}
.toggle-slider:before{content:'';position:absolute;width:12px;height:12px;left:2px;bottom:2px;background:var(--muted);border-radius:50%;transition:.3s}
.toggle input:checked+.toggle-slider{background:linear-gradient(135deg,var(--primary),var(--secondary));border-color:transparent}
.toggle input:checked+.toggle-slider:before{transform:translateX(15px);background:#fff}
.range-input{width:100%;accent-color:var(--primary);cursor:pointer;height:3px}

/* ── Style grids ── */
.style-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.style-btn{background:var(--surface-2);border:1px solid var(--border);border-radius:7px;padding:6px 3px;cursor:pointer;color:var(--muted);font-size:9.5px;font-family:inherit;display:flex;flex-direction:column;align-items:center;gap:3px;transition:all .15s}
.style-btn:hover{border-color:var(--border-hi);color:var(--text)}
.style-btn.active{border-color:rgba(99,102,241,.6);color:#a5b4fc;background:rgba(99,102,241,.1)}

/* ── Upload areas ── */
.upload-area{border:2px dashed rgba(99,102,241,.3);border-radius:10px;padding:10px;text-align:center;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:3px}
.upload-area:hover{border-color:rgba(99,102,241,.6);background:rgba(99,102,241,.04)}
.upload-icon{font-size:18px}
.upload-text{font-size:11px;color:var(--muted)}
.upload-hint{font-size:10px;color:rgba(148,163,184,.6)}

/* ── Frame grid ── */
.frame-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.frame-btn{background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:7px 5px;cursor:pointer;color:var(--muted);font-size:9.5px;font-family:inherit;display:flex;flex-direction:column;align-items:center;gap:5px;transition:all .15s}
.frame-btn:hover{border-color:var(--border-hi);color:var(--text)}
.frame-btn.active{border-color:rgba(99,102,241,.6);color:#a5b4fc;background:rgba(99,102,241,.1)}
.frame-preview{width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:#64748b;background:#1e1e3f;border-radius:3px;position:relative;overflow:hidden}
.fp-none{border:1px dashed #334155}
.fp-simple{border:2px solid #6366f1}
.fp-rounded{border:2px solid #6366f1;border-radius:8px}
.fp-banner{border:2px solid #6366f1;border-radius:3px;flex-direction:column;gap:0}
.fp-banner .fp-label{background:#6366f1;color:#fff;font-size:6px;width:100%;text-align:center;padding:1.5px 0}
.fp-banner-top{border:2px solid #6366f1;border-radius:3px;flex-direction:column;gap:0}
.fp-banner-top .fp-label{background:#6366f1;color:#fff;font-size:6px;width:100%;text-align:center;padding:1.5px 0;order:-1}
.fp-speech{border:2px solid #6366f1;border-radius:50%}

/* ── Card templates ── */
.card-template-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.card-tpl-btn{background:var(--surface-2);border:1px solid var(--border);border-radius:7px;padding:6px 4px;cursor:pointer;color:var(--muted);font-size:9.5px;font-family:inherit;display:flex;flex-direction:column;align-items:center;gap:4px;transition:all .15s}
.card-tpl-btn:hover{border-color:var(--border-hi)}
.card-tpl-btn.active{border-color:rgba(99,102,241,.6);color:#a5b4fc;background:rgba(99,102,241,.1)}
.ctpl-preview{width:44px;height:27px;border-radius:3px;display:flex;flex-direction:column;justify-content:center;padding:3px;gap:2px;position:relative;overflow:hidden}
.ctpl-stripe{position:absolute;left:0;top:0;bottom:0;width:6px;background:#6366f1}
.ctpl-modern{background:#1e1b4b}.ctpl-classic{background:#f8fafc;border:1px solid #e2e8f0}.ctpl-dark{background:#0f172a}.ctpl-gradient{background:linear-gradient(135deg,#6366f1,#a855f7)}
.ctpl-lines{display:flex;flex-direction:column;gap:2px;padding-left:10px}
.ctpl-lines div{height:2px;border-radius:2px;background:currentColor;opacity:.4}
.ctpl-lines div:first-child{width:22px;opacity:.8}.ctpl-lines div:last-child{width:14px}
.ctpl-modern .ctpl-lines{color:#e2e8f0}.ctpl-classic .ctpl-lines{color:#1e293b}.ctpl-dark .ctpl-lines{color:#94a3b8}.ctpl-gradient .ctpl-lines{color:#fff}

/* ── Buttons ── */
.btn-primary{width:100%;background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;border:none;border-radius:10px;padding:9px 14px;font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;transition:all .2s;box-shadow:0 4px 14px rgba(99,102,241,.28)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(99,102,241,.38)}
.btn-ghost{background:transparent;border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--muted);font-size:11px;font-family:inherit;padding:5px 9px;cursor:pointer;transition:all .2s;white-space:nowrap}
.btn-ghost:hover{color:var(--text);border-color:rgba(255,255,255,.2)}
.btn-accent{background:rgba(99,102,241,.18);border:1px solid rgba(99,102,241,.4);border-radius:var(--radius-sm);color:#a5b4fc;font-size:12px;font-weight:600;font-family:inherit;padding:7px 12px;cursor:pointer;transition:all .2s;white-space:nowrap}
.btn-accent:hover{background:rgba(99,102,241,.28)}
.action-row{display:flex;gap:6px;margin-top:6px}
.btn-action{flex:1;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--muted);font-size:11px;font-weight:600;font-family:inherit;padding:8px 5px;cursor:pointer;transition:all .2s}
.btn-action:hover{border-color:var(--border-hi);color:var(--text)}
.btn-share{border-color:rgba(99,102,241,.3);color:#a5b4fc}
.btn-share:hover{background:rgba(99,102,241,.1)}

/* ── Preview tabs ── */
.preview-tabs{display:flex;gap:1px;background:var(--surface);border:1px solid var(--border);border-bottom:none;border-radius:10px 10px 0 0;padding:5px 5px 0}
.preview-tab{background:transparent;border:none;border-radius:6px 6px 0 0;padding:6px 10px;font-size:11px;font-weight:600;font-family:inherit;color:var(--muted);cursor:pointer;transition:all .15s;border-bottom:2px solid transparent;flex:1;text-align:center}
.preview-tab.active{color:#a5b4fc;border-bottom-color:var(--primary)}
.preview-section .panel{border-radius:0 0 14px 14px}
.preview-header{display:flex;align-items:center;justify-content:space-between}
.qr-info{font-size:10px;color:var(--muted)}
.preview-box{background:var(--surface-2);border:1px solid var(--border);border-radius:8px;min-height:200px;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:6px}
.card-preview-box{display:flex;align-items:center;justify-content:center;min-height:130px;padding:10px;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;flex-direction:column;gap:8px}
.preview-placeholder{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--muted);font-size:11px;text-align:center;line-height:1.5;padding:20px}

/* ── Export ── */
.export-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.export-btn{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--muted);font-size:10.5px;font-weight:600;font-family:inherit;padding:7px 4px;cursor:pointer;transition:all .2s;text-align:center}
.export-btn:hover{border-color:var(--border-hi);color:var(--text);background:rgba(99,102,241,.08)}
.hd-row{display:flex;gap:6px;align-items:center}

/* ── Quality ── */
.quality-badge{padding:2px 7px;border-radius:99px;font-size:10px;font-weight:700}
.quality-badge.q-excellent{background:rgba(34,197,94,.15);color:#22c55e}
.quality-badge.q-good{background:rgba(234,179,8,.15);color:#eab308}
.quality-badge.q-poor{background:rgba(239,68,68,.15);color:#ef4444}
.quality-bar-bg{height:3px;background:rgba(255,255,255,.08);border-radius:99px;overflow:hidden;margin-bottom:6px}
.quality-bar{height:100%;border-radius:99px;transition:width .5s ease}
.quality-tips{font-size:10px;color:var(--muted);line-height:1.4}

/* ── History ── */
.history-header{display:flex;align-items:center;justify-content:space-between}
.history-list{display:flex;flex-direction:column;gap:4px}
.history-item{background:var(--surface-2);border:1px solid var(--border);border-radius:6px;padding:6px 9px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:all .15s;gap:7px}
.history-item:hover{border-color:var(--border-hi)}
.history-item-text{font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.history-item-type{font-size:9px;font-weight:700;padding:1px 6px;border-radius:99px;background:rgba(99,102,241,.15);color:#a5b4fc;flex-shrink:0}

/* ── Modals ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(8px);z-index:500;display:flex;align-items:center;justify-content:center;padding:12px}
.modal{background:#0e0e28;border:1px solid rgba(99,102,241,.2);border-radius:18px;width:100%;max-width:420px;overflow:hidden;animation:modalIn .22s ease;max-height:calc(100vh - 24px);overflow-y:auto}
@keyframes modalIn{from{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px;border-bottom:1px solid var(--border);position:sticky;top:0;background:#0e0e28;z-index:1}
.modal-header h3{font-size:14px;font-weight:700;color:var(--text)}
.modal-close{background:transparent;border:none;color:var(--muted);font-size:17px;cursor:pointer;padding:2px 5px;border-radius:5px}
.modal-close:hover{color:var(--text);background:rgba(255,255,255,.06)}
.modal-body{padding:14px 16px 18px;display:flex;flex-direction:column;gap:12px}
.share-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.share-btn{background:var(--surface-2);border:1px solid var(--border);border-radius:9px;padding:10px 5px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;transition:all .2s;font-family:inherit}
.share-btn:hover{border-color:var(--border-hi);transform:translateY(-2px)}
.share-icon{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center}
.share-btn span{font-size:9.5px;color:var(--muted);font-weight:500}
.share-link-row{display:flex;gap:6px;align-items:center}
.share-link-row .input-field{font-size:11px;color:var(--muted)}
.share-note{font-size:10px;color:rgba(148,163,184,.5);text-align:center}
.modal-wide{max-width:480px}

/* ── Scanner ── */
.scanner-tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);padding-bottom:7px}
.scanner-tab{background:transparent;border:none;border-radius:5px 5px 0 0;padding:6px 12px;font-size:11.5px;font-weight:600;font-family:inherit;color:var(--muted);cursor:pointer;transition:all .2s;border-bottom:2px solid transparent}
.scanner-tab.active{color:#a5b4fc;border-bottom-color:var(--primary)}
.scan-result-box{background:var(--surface-2);border:1px solid var(--border);border-radius:9px;padding:12px}
.scan-result-text{font-size:12px;color:var(--text);word-break:break-all;line-height:1.5;max-height:90px;overflow-y:auto}

/* ── Saves ── */
.saves-list{display:flex;flex-direction:column;gap:7px;max-height:340px;overflow-y:auto}
.save-item{background:var(--surface-2);border:1px solid var(--border);border-radius:9px;padding:10px 12px;display:flex;align-items:center;gap:9px;transition:border-color .2s}
.save-item:hover{border-color:var(--border-hi)}
.save-item-info{flex:1;min-width:0}
.save-item-name{font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.save-item-meta{font-size:10px;color:var(--muted);margin-top:1px}
.save-item-actions{display:flex;gap:5px;flex-shrink:0}
.save-item-btn{background:transparent;border:1px solid var(--border);border-radius:5px;color:var(--muted);font-size:10.5px;font-family:inherit;padding:4px 7px;cursor:pointer;transition:all .2s;white-space:nowrap}
.save-item-btn:hover{color:var(--text);border-color:var(--border-hi)}
.save-item-btn.del:hover{color:#ef4444;border-color:rgba(239,68,68,.3)}

/* ── Toast ── */
.toast{position:fixed;bottom:16px;left:50%;transform:translateX(-50%) translateY(60px);background:linear-gradient(135deg,#1e1b4b,#312e81);color:#fff;padding:8px 18px;border-radius:99px;font-size:12px;font-weight:500;border:1px solid rgba(99,102,241,.4);box-shadow:0 6px 24px rgba(0,0,0,.4);z-index:1000;transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .3s;opacity:0;white-space:nowrap;pointer-events:none}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}

/* ── Card side tabs ── */
.card-side-tabs{display:flex;gap:0;margin-bottom:10px;border-radius:7px;overflow:hidden;border:1px solid var(--border)}
.card-side-tab{flex:1;padding:7px 10px;font-size:12px;font-weight:600;background:transparent;border:none;cursor:pointer;color:var(--muted);transition:all .15s}
.card-side-tab.active{background:var(--primary);color:#fff}
.card-side-tab:hover:not(.active){background:rgba(99,102,241,.1);color:var(--text)}

/* ── Service rows ── */
.verso-service-row{display:flex;align-items:flex-start;gap:8px;margin-bottom:8px}
.verso-svc-icon-upload{width:42px;height:42px;min-width:42px;border:2px dashed var(--border);border-radius:9px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;color:var(--muted);background:rgba(255,255,255,.03);transition:border-color .15s,background .15s;overflow:hidden}
.verso-svc-icon-upload:hover{border-color:var(--primary);background:rgba(99,102,241,.08);color:var(--primary)}
.verso-svc-fields{flex:1;display:flex;flex-direction:column}

/* ── Mini QR preview ── */
.qr-mini-preview-row{display:flex;align-items:center;gap:10px;margin-top:6px;padding:8px 10px;background:var(--surface-2);border:1px solid var(--border);border-radius:9px}
.qr-mini-canvas{width:52px;height:52px;border-radius:5px;background:#fff;flex-shrink:0}
.qr-mini-label{font-size:10.5px;color:var(--muted);line-height:1.4}

/* ── Tab short/long labels ── */
.tab-short{display:none}
.tab-long{display:inline}
@media(max-width:440px){
  .tab-short{display:inline}
  .tab-long{display:none}
}

/* ── Mobile bottom FAB ── */
.mobile-fab{display:none;position:fixed;bottom:0;left:0;right:0;z-index:200;background:rgba(8,8,24,.96);backdrop-filter:blur(12px);border-top:1px solid var(--border);padding:8px 12px;gap:6px}
.mobile-fab-btn{flex:1;background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;border:none;border-radius:10px;padding:11px 8px;font-size:12px;font-weight:700;font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px}
.mobile-fab-sec{flex:1;background:var(--surface-2);border:1px solid var(--border);color:var(--muted);border-radius:10px;padding:11px 8px;font-size:11px;font-weight:600;font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px}

/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */

/* Tablette : une seule colonne */
@media(max-width:900px){
  .layout{grid-template-columns:1fr}
  .right-col{position:static}
}

/* Mobile */
@media(max-width:600px){
  .container{padding:6px 8px 80px}

  /* Barres compactes */
  .palettes-label{display:none}
  .palettes-bar,.templates-bar{margin-bottom:4px}
  .palette-btn,.tpl-chip{padding:2px 7px;font-size:9.5px;height:20px}
  .pal-dot{width:9px;height:9px}

  /* Layout mono-col */
  .layout{gap:8px}
  .right-col{position:static}

  /* Tabs scrollables et compacts */
  .tabs{border-radius:9px 9px 0 0;padding:4px 4px 0;gap:0}
  .tab{padding:5px 9px;font-size:10.5px;flex:1;text-align:center}

  .panel{padding:10px;gap:10px;border-radius:0 0 12px 12px}

  /* Type grid 4 colonnes sur mobile, icônes petites */
  .type-grid{grid-template-columns:repeat(4,1fr);gap:4px}
  .type-btn{padding:5px 2px;font-size:9.5px;gap:1px}
  .type-icon{font-size:16px}

  /* Fields : no zoom iOS */
  .input-field,.select-field,.textarea-field{font-size:16px}
  .field-row{flex-direction:column;gap:6px}

  /* Style/frame/card grids */
  .style-grid{grid-template-columns:repeat(4,1fr);gap:4px}
  .style-btn{padding:5px 2px;font-size:9px}
  .frame-grid{grid-template-columns:repeat(3,1fr)}
  .card-template-grid{grid-template-columns:repeat(4,1fr);gap:4px}
  .card-tpl-btn{padding:5px 3px;font-size:9px}

  /* Preview — met l'aperçu QR AVANT les options sur mobile */
  .layout{display:flex;flex-direction:column}
  .right-col{order:-1}
  .left-col{order:1}

  /* Taille aperçu QR sur mobile */
  .preview-tabs{border-radius:9px 9px 0 0}
  .preview-tab{font-size:10.5px;padding:6px 7px}
  .preview-box{min-height:220px}
  .card-preview-box{min-height:100px;padding:8px}

  /* Export */
  .export-grid{grid-template-columns:repeat(4,1fr);gap:4px}
  .export-btn{font-size:9.5px;padding:6px 3px}
  .action-row{gap:5px}
  .btn-action{font-size:10.5px;padding:7px 4px}
  .hd-row{flex-wrap:wrap;gap:5px}
  .hd-row .select-field{min-width:0;flex:1}

  /* Modals full-width */
  .modal-overlay{padding:0;align-items:flex-end}
  .modal{border-radius:18px 18px 0 0;max-width:100%;max-height:88vh}
  .share-grid{grid-template-columns:repeat(4,1fr);gap:6px}
  .share-btn{padding:10px 4px}
  .share-icon{width:30px;height:30px}
  .share-btn span{font-size:9.5px}
  .modal-header{padding:12px 14px 8px}
  .modal-body{padding:12px 14px 20px;gap:10px}

  /* Header compact */
  .app-header{padding:6px 10px;height:44px}
  .app-title{font-size:13px}
  .app-sub{font-size:9px}
  .logo-icon{width:28px;height:28px}

  /* Verso services */
  .verso-svc-icon-upload{width:38px;height:38px;min-width:38px}

  /* FAB mobile */
  .mobile-fab{display:flex}
  .toast{bottom:72px}

  /* Section label plus visible */
  .section-label{font-size:9.5px}

  /* Btn primary plus grand sur mobile */
  .btn-primary{padding:12px 14px;font-size:14px}
}

/* Très petit */
@media(max-width:360px){
  .type-grid{grid-template-columns:repeat(3,1fr)}
  .share-grid{grid-template-columns:repeat(3,1fr)}
  .export-grid{grid-template-columns:repeat(2,1fr)}
  .tab{padding:4px 6px;font-size:9.5px}
}

@media print{
  body *{visibility:hidden}
  #print-content,#print-content *{visibility:visible}
  #print-content{position:fixed;inset:0;display:flex!important;align-items:center;justify-content:center;background:#fff}
}

/* ── Reviews ── */
.rev-stats-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:8px}
.rev-stat-box{background:rgba(99,102,241,.08);border:1px solid var(--border);border-radius:10px;padding:10px 6px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:3px}
.rev-stat-num{font-size:22px;font-weight:800;background:linear-gradient(135deg,#a5b4fc,#f0abfc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.1}
.rev-stat-lbl{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.rev-share-btn{display:flex;align-items:center;gap:6px;padding:7px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:var(--text);font-size:11px;font-weight:500;cursor:pointer;transition:opacity .15s,transform .1s;white-space:nowrap;flex:1}
.rev-share-btn:hover{opacity:.8;transform:scale(1.02)}
.rev-share-btn:active{transform:scale(.97)}
.rev-stars-bar{display:flex;flex-direction:column;gap:2px;width:100%}
.rev-bar-row{display:flex;align-items:center;gap:4px;font-size:9px;color:var(--muted)}
.rev-bar-track{flex:1;height:5px;background:rgba(255,255,255,.08);border-radius:99px;overflow:hidden}
.rev-bar-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,#fbbf24,#f59e0b);transition:width .4s ease}
.rev-list{display:flex;flex-direction:column;gap:8px;max-height:360px;overflow-y:auto;padding-right:2px}
.rev-item{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:4px}
.rev-item-top{display:flex;align-items:center;justify-content:space-between;gap:6px}
.rev-stars{color:#fbbf24;font-size:13px;letter-spacing:1px}
.rev-date{font-size:10px;color:var(--muted)}
.rev-name-badge{font-size:10px;font-weight:600;color:#a5b4fc;background:rgba(99,102,241,.12);border-radius:99px;padding:2px 7px}
.rev-comment{font-size:12px;color:var(--muted);line-height:1.5;margin-top:2px;font-style:italic}

/* ── Bulk Send ── */
.bulk-number-row{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:8px 12px}
.bulk-qr-row{align-items:center;padding:10px 12px}
.bulk-qr-info{display:flex;align-items:center;gap:10px}
.bulk-qr-canvas{width:80px;height:80px;border-radius:6px;background:#fff;flex-shrink:0}
.bulk-qr-meta{display:flex;flex-direction:column;gap:3px}
.bulk-qr-hint{font-size:11px;color:var(--muted)}
.bulk-single-qr-section{background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:14px;margin-bottom:12px;text-align:center}
.bulk-single-qr-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:4px}
.bulk-single-qr-hint{font-size:11px;color:var(--muted);margin-bottom:6px}
.bulk-single-qr-canvas{width:180px;height:180px;border-radius:10px;background:#fff;border:2px solid var(--border)}
.bulk-single-qr-msg{font-size:12px;color:var(--muted);font-style:italic;margin:6px 0 10px;padding:6px 10px;background:var(--surface);border-radius:8px;word-break:break-word}
.bulk-download-qr-btn{background:var(--accent);color:#fff;border:none;border-radius:8px;padding:8px 18px;font-size:13px;font-weight:600;cursor:pointer}
.bulk-sep{display:flex;align-items:center;gap:8px;margin:8px 0;font-size:11px;color:var(--muted)}
.bulk-sep::before,.bulk-sep::after{content:'';flex:1;height:1px;background:var(--border)}
.bulk-num{font-family:monospace;font-size:13px;color:var(--text);flex:1}
.bulk-send-btn{background:var(--primary);color:#fff;border:none;border-radius:7px;padding:6px 12px;font-size:12px;font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .2s}
.bulk-send-btn:hover{background:#4f46e5}
.bulk-info{font-size:11px;color:var(--muted);background:rgba(99,102,241,.07);border:1px solid var(--border);border-radius:8px;padding:8px 12px;line-height:1.5}