*{box-sizing:border-box}body{margin:0;background:#edf1f3;color:#1d2930;font-family:Inter,Segoe UI,Arial,sans-serif;line-height:1.5}button,input,select,textarea{font:inherit}header{min-height:76px;padding:0 4vw;background:#121b21;color:#fff;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50;box-shadow:0 12px 35px #10171c66}header a{color:#fff;text-decoration:none;border:1px solid #52616a;border-radius:10px;padding:9px 13px}.brand{display:flex;align-items:center;gap:12px}.brand>span{width:44px;height:44px;border:1px solid #c69a3c;border-radius:13px;display:grid;place-items:center;color:#e6c56f;font-weight:900}.brand b{display:block}.brand small{display:block;color:#93a2aa;font-size:11px;letter-spacing:1px}.brand i{font-style:normal;font-size:8px;background:#d8ae4c;color:#17120a;padding:3px 5px;border-radius:99px}.hero{max-width:1500px;margin:auto;padding:52px 4vw 38px;display:grid;grid-template-columns:1fr 360px;align-items:center;gap:40px}.eyebrow{font-size:11px;letter-spacing:2.1px;font-weight:900;color:#5b7888}.hero h1{font:600 clamp(42px,5.5vw,72px)/1.04 Georgia,serif;margin:10px 0 16px}.hero p{color:#687880;font-size:18px}.hero-card{background:linear-gradient(145deg,#1c2d36,#4f7181);border-radius:26px;padding:28px;display:grid;place-items:center;color:#fff;box-shadow:0 24px 70px #20333d33}.fake-qr{width:190px;height:190px;background:repeating-conic-gradient(#101820 0 25%,#fff 0 50%) 0/24px 24px;border:16px solid #fff;margin-bottom:15px}.workspace{max-width:1500px;margin:auto;padding:0 4vw 80px;display:grid;grid-template-columns:minmax(350px,450px) minmax(0,1fr);gap:22px;align-items:start}.panel{background:#fff;border:1px solid #d1dde2;border-radius:22px;padding:22px;box-shadow:0 20px 65px #15252e14}.controls{max-height:calc(100vh - 95px);overflow:auto;position:sticky;top:92px}.preview{position:sticky;top:92px}fieldset{border:1px solid #dbe4e8;border-radius:15px;padding:15px;margin:0 0 14px;background:#fbfcfc}fieldset.important{border-color:#9ebbc8;background:#f1f8fa}legend{padding:0 7px;font-weight:800;color:#294957}label{display:block;font-size:12px;color:#60717a;margin:9px 0}input,select,textarea{width:100%;padding:10px;border:1px solid #c8d4da;border-radius:9px;margin-top:5px;background:#fff}.two{display:grid;grid-template-columns:1fr 1fr;gap:9px}.check{display:flex;align-items:center;gap:8px;background:#f1f5f6;padding:10px;border-radius:9px}.check input{width:auto;margin:0}.type-panel{display:none}.type-panel.active{display:block}.design-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.design-cards label{border:1px solid #d1dce1;border-radius:11px;padding:8px;text-align:center;cursor:pointer}.design-cards label.active{border-color:#4c7588;background:#edf5f8}.design-cards input{display:none}.design-preview{height:44px;display:block;margin-bottom:5px;background:repeating-conic-gradient(#1b2930 0 25%,#fff 0 50%) 0/12px 12px}.design-preview.rounded{border-radius:10px}.design-preview.dots{border-radius:50%;background:radial-gradient(circle,#1b2930 38%,transparent 42%) 0 0/12px 12px}.button-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.button-grid button,.preview button,.exports button{border:1px solid #bdcbd1;background:#f7f9fa;color:#294653;border-radius:9px;padding:10px 13px;cursor:pointer}.status{font-size:11px;background:#f0f4f5;border-radius:9px;padding:9px;margin-top:8px;color:#6a7981}.status.active{background:#e7f4eb;color:#356044}.preview-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.preview-head span{display:block;font-size:11px;color:#75848c}.stage{min-height:620px;background:repeating-conic-gradient(#e8edef 0 25%,#dce3e6 0 50%) 50%/24px 24px;border-radius:18px;padding:22px;display:grid;place-items:center;overflow:auto}.stage canvas{max-width:100%;max-height:72vh;box-shadow:0 18px 55px #12212a44}.quality-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:13px}.quality-grid div{border:1px solid #dbe4e7;background:#f6f9fa;border-radius:11px;padding:10px}.quality-grid span{display:block;font-size:9px;text-transform:uppercase;color:#7b8990}.quality-grid strong{font-size:14px;color:#2d5263}.warning{margin-top:10px}.warning .ok,.warning .warn,.warning .bad{border-radius:10px;padding:10px;font-size:12px}.warning .ok{background:#e7f4eb;color:#356044}.warning .warn{background:#fff3d7;color:#775717}.warning .bad{background:#fde7e7;color:#8d3333}.exports{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin-top:13px}.exports .primary{background:#315f74;color:#fff;border-color:#315f74}.note{font-size:11px;color:#687981;background:#f1f5f6;padding:10px;border-radius:10px}footer{padding:25px 4vw;background:#121b21;color:#92a2aa;display:flex;justify-content:space-between}
@media(max-width:1050px){.workspace{grid-template-columns:1fr}.controls,.preview{position:static;max-height:none}.hero{grid-template-columns:1fr}.hero-card{display:none}}
@media(max-width:700px){header{padding:12px 4vw;align-items:flex-start}.brand small{display:none}.hero h1{font-size:42px}.two,.quality-grid{grid-template-columns:1fr 1fr}.stage{min-height:360px;padding:8px}.exports{display:grid;grid-template-columns:1fr 1fr}.exports button{width:100%}footer{flex-direction:column;gap:6px}}

/* v1.1 – Data QR Builder */
.data-builder{padding-top:12px}
.data-mode-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:12px}
.data-mode{border:1px solid #c7d5db;background:#f4f7f8;color:#365463;border-radius:8px;padding:8px 6px;cursor:pointer;font-size:11px}
.data-mode.active{background:#315f74;color:#fff;border-color:#315f74}
.data-mode-panel{display:none}.data-mode-panel.active{display:block}
.data-field-head,.data-field-row{display:grid;grid-template-columns:34px minmax(90px,.8fr) minmax(130px,1.5fr) 32px;gap:6px;align-items:start}
.data-field-head{padding:0 4px 5px;font-size:9px;text-transform:uppercase;letter-spacing:.5px;color:#74858d}
.data-fields{max-height:420px;overflow:auto;padding:6px;border:1px solid #d6e1e5;border-radius:11px;background:#f5f8f9}
.data-field-row{padding:5px;margin-bottom:5px;background:#fff;border:1px solid #dce4e7;border-radius:9px}
.data-field-row:last-child{margin-bottom:0}
.data-index{display:grid;place-items:center;width:28px;height:32px;border-radius:7px;background:#294956;color:#fff;font-size:10px;font-weight:800}
.data-field-row input,.data-field-row textarea{margin:0;min-width:0;padding:7px 8px}
.data-field-row textarea{resize:vertical;min-height:34px}
.data-remove{width:30px;height:32px!important;padding:0!important;border:1px solid #e1caca!important;background:#fff1f1!important;color:#963535!important}
.data-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.data-actions button,#formatJson{border:1px solid #c5d2d8;background:#f7f9fa;color:#315362;border-radius:8px;padding:8px 10px;cursor:pointer;font-size:11px}
.data-options{margin-top:10px;padding-top:8px;border-top:1px solid #dde5e8}
.capacity-box{margin-top:10px;padding:11px;border:1px solid #cbd9df;border-radius:11px;background:#eef5f7}
.capacity-box>div{display:flex;justify-content:space-between;gap:8px;align-items:center}
.capacity-box span{font-size:10px;text-transform:uppercase;color:#70828b}
.capacity-box strong{font-size:12px;color:#274e60}
.capacity-box progress{width:100%;height:12px;margin:7px 0 3px;accent-color:#3a7b62}
.capacity-box progress.over{accent-color:#b94b4b}
.capacity-box small{display:block;color:#64767f}
.part-navigator{display:flex;align-items:center;justify-content:center;gap:7px;margin:-4px 0 12px;padding:8px;border:1px solid #d7e1e5;background:#f5f8f9;border-radius:10px}
.part-navigator.hidden{display:none}
.part-navigator span{min-width:60px;text-align:center;font-size:12px;font-weight:800;color:#315666}
.part-navigator button{padding:7px 10px}
@media(max-width:700px){
  .data-mode-tabs{grid-template-columns:1fr 1fr}
  .data-field-head,.data-field-row{grid-template-columns:30px minmax(75px,.8fr) minmax(100px,1.4fr) 30px;gap:4px}
  .part-navigator{flex-wrap:wrap}
}