:root{color:#122044;font-synthesis:none;background:#f2f6fb;font-family:Inter,system-ui,sans-serif}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}.app-shell{min-height:100vh;padding-left:226px}.topbar{z-index:20;background:#fffffff5;border-bottom:1px solid #dce5f0;align-items:center;gap:30px;height:78px;padding:0 26px;display:flex;position:fixed;inset:0 0 auto;box-shadow:0 2px 10px #1832540f}.brand{align-items:center;gap:13px;min-width:320px;display:flex}.brand-mark{color:#0874f9;border:3px solid #0874f9;border-radius:6px;place-items:center;width:42px;height:48px;display:grid}.brand strong{color:#071638;font-size:25px;line-height:1.05;display:block}.brand span{color:#56627b;margin-top:4px;font-size:13px;display:block}.steps{flex:1;justify-content:center;align-items:center;display:flex}.step{color:#647087;white-space:nowrap;align-items:center;font-size:13px;display:flex}.step:not(:last-child):after{content:"";background:#cad3df;width:clamp(18px,3.2vw,55px);height:1px;margin:0 12px}.step i{color:#293750;background:#e7ecf2;border-radius:50%;place-items:center;width:34px;height:34px;margin-right:8px;font-style:normal;font-weight:700;display:grid}.step.current{color:#122044;font-weight:700}.step.current i,.step.done i{color:#fff;background:#0874f9}.top-actions{gap:22px;display:flex}.top-actions svg{width:22px}.sidebar{z-index:19;color:#fff;background:linear-gradient(165deg,#243955,#132a48 72%,#102540);flex-direction:column;width:226px;padding:22px 14px;display:flex;position:fixed;top:78px;bottom:0;left:0}.sidebar nav{gap:6px;display:grid}.nav-item{color:#f4f7fc;text-align:left;background:0 0;border:0;border-radius:9px;align-items:center;gap:14px;height:50px;padding:0 13px;display:flex}.nav-item svg{width:21px}.nav-item.active{background:linear-gradient(135deg,#1684ff,#0868e8);font-weight:700;box-shadow:0 8px 20px #0067ef40}.nav-item:disabled{opacity:.72}.tip{color:#2d3d5d;background:linear-gradient(145deg,#fff,#e8f2ff);border-radius:10px;margin-top:auto;padding:18px;font-size:13px;line-height:1.55}.tip>div{color:#173462;align-items:center;gap:8px;display:flex}.tip svg{color:#0874f9}.tip p{margin:10px 0 0}.sidebar-close,.menu-button{display:none}main{max-width:1680px;margin:0 auto;padding:96px 18px 24px}.panel{background:#fff;border:1px solid #dde6f0;border-radius:11px;box-shadow:0 2px 10px #1b33520e}.section-title{align-items:flex-start;gap:8px;margin-bottom:14px;display:flex}.section-title>span{color:#fff;background:#0874f9;border-radius:7px;place-items:center;width:25px;height:25px;font-size:13px;font-weight:800;display:grid}.section-title h2{color:#101d3c;margin:0;font-size:18px;line-height:25px}.section-title p{color:#657188;margin:2px 0 0;font-size:13px}.upload-panel,.operations-panel{margin-bottom:12px;padding:16px 20px}.upload-content{grid-template-columns:minmax(320px,.95fr) 1.25fr;gap:24px;display:grid}.drop-zone{color:#274475;border:1.5px dashed #a7b5c9;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;gap:11px;min-height:170px;padding:18px;transition:all .2s;display:flex}.drop-zone.dragging{background:#edf6ff;border-color:#0874f9}.drop-zone p{color:#2f3c55;text-align:center;max-width:330px;margin:0;font-size:14px}.primary{color:#fff;background:linear-gradient(135deg,#087cff,#0064e8);border:0;border-radius:8px;justify-content:center;align-items:center;gap:9px;font-weight:700;display:inline-flex;box-shadow:0 7px 18px #0068e833}.primary:disabled{opacity:.48;box-shadow:none}.primary.small{min-width:180px;padding:11px 20px}.file-analysis{border-left:1px solid #dfe6ef;align-items:center;min-height:170px;padding:16px 22px;display:flex}.file-analysis>div:not(.file-icon){min-width:0}.file-icon{color:#0874f9;background:#e9f3ff;border-radius:14px;flex:none;place-items:center;width:58px;height:58px;margin-right:18px;display:grid}.file-analysis h3{text-overflow:ellipsis;color:#102044;white-space:nowrap;max-width:500px;margin:0 0 12px;font-size:16px;overflow:hidden}dl{gap:28px;margin:0;display:flex}dl div{gap:3px;display:grid}dt{color:#69758b;font-size:12px}dd{color:#1a2b4c;margin:0;font-size:14px;font-weight:600}.success,.quality{color:#128340;align-items:center;gap:7px;font-size:13px;display:flex}.success{margin:13px 0 0}.success svg,.quality svg{color:#fff;background:#159448;border-radius:50%;width:18px;height:18px;padding:2px}.empty-analysis{text-align:center;color:#8792a5;width:100%}.empty-analysis svg{width:34px;height:34px}.empty-analysis p{margin:8px 0 0}.operation-grid{grid-template-columns:repeat(4,1fr);gap:9px;display:grid}.operation-card{color:#22365c;text-align:left;background:#fff;border:1px solid #d9e1ec;border-radius:8px;gap:13px;min-height:123px;padding:17px 15px;display:flex;position:relative}.operation-card>svg{flex:0 0 38px;width:38px;height:38px}.operation-card h3{margin:1px 0 3px;font-size:14px}.operation-card strong{color:#0670ed;font-size:11px}.operation-card p{color:#647086;margin:10px 0 0;font-size:12px;line-height:1.4}.operation-card.selected{background:linear-gradient(140deg,#fff,#eef6ff);border:2px solid #0874f9}.operation-card:disabled{opacity:.66}.soon{color:#657188;text-transform:uppercase;background:#eef2f6;border-radius:10px;padding:3px 6px;font-size:9px;position:absolute;bottom:8px;right:9px}.workflow-grid{grid-template-columns:1.2fr 1.1fr .56fr;align-items:stretch;gap:12px;display:grid}.config-panel,.preview-panel,.export-panel{min-height:350px;padding:16px 20px}fieldset{border:0;margin:0;padding:0}.disabled-panel fieldset{opacity:.48}.field-grid{grid-template-columns:1fr 1fr;gap:15px 14px;display:grid}label{color:#2a3a5c;gap:7px;font-size:12px;font-weight:700;display:grid}label.full{grid-column:1/-1}select,input{color:#35445f;background:#fff;border:1px solid #ccd6e3;border-radius:7px;outline:none;width:100%;height:42px;padding:0 12px}select:focus,input:focus{border-color:#0874f9;box-shadow:0 0 0 3px #0874f91f}.info-box{color:#52627c;background:#eef5ff;border-radius:8px;align-items:flex-start;gap:10px;margin-top:20px;padding:13px;font-size:12px;line-height:1.45;display:flex}.info-box svg{color:#0874f9;flex:none;width:19px}.info-box p{margin:0}.info-box strong{color:#165bbb;margin-bottom:2px;display:block}.preview-stage{background:#e7ebf0;place-items:center;min-height:230px;padding:10px;display:grid;position:relative;overflow:hidden;box-shadow:inset 0 2px 8px #1a2d451f}.preview-stage img{max-width:100%;max-height:250px;display:block;box-shadow:0 4px 10px #18253747}.preview-empty{color:#7c899d;text-align:center}.preview-empty svg{width:48px;height:48px}.preview-empty p{margin:8px 0 0;font-size:13px}.preview-loading{z-index:2;color:#315278;background:#f1f6fbdb;justify-content:center;align-items:center;gap:9px;font-size:13px;display:flex;position:absolute;inset:0}.dimensions{color:#51617c;margin:11px 0 5px;font-size:12px}.quality{margin:0;font-size:11px}.export-panel{flex-direction:column;display:flex}.export-button{width:100%;min-height:74px;margin-top:32px}.export-panel>p{color:#6c788d;text-align:center;margin:13px 8px;font-size:11px;line-height:1.5}.error-banner{color:#9f2929;background:#fff1f1;border:1px solid #ffc4c4;border-radius:8px;justify-content:space-between;align-items:center;margin-bottom:12px;padding:11px 15px;font-size:13px;display:flex}.error-banner button{color:inherit;background:0 0;border:0}.inline-error{color:#84510d;background:#fff8e8;border:1px solid #f5c27a;border-radius:8px;align-items:center;gap:8px;margin-bottom:12px;padding:11px 15px;font-size:13px;display:flex}.booklet-workflow{grid-template-columns:1.25fr 1fr .55fr;align-items:stretch;gap:12px;display:grid}.booklet-config,.booklet-preview-panel,.booklet-export-panel{min-height:520px}.analysis-strip{color:#53627a;background:#f3f7fc;border-radius:8px;justify-content:space-between;gap:12px;margin-bottom:16px;padding:11px 13px;font-size:12px;display:flex}.analysis-strip strong{color:#172a4c}.warning-text{color:#a45f00;font-weight:700}.success-text{color:#128340;font-weight:700}.booklet-fields,.dimension-pair{grid-template-columns:1fr 1fr;gap:13px;display:grid}.dimension-pair.full{grid-column:1/-1}.toggle-grid{grid-template-columns:1fr 1fr;gap:8px 14px;margin-top:16px;display:grid}.check-label{grid-template-columns:none;align-items:center;gap:8px;min-height:30px;font-weight:500;display:flex}.check-label input{accent-color:#0874f9;flex:none;width:17px;height:17px;margin:0}.blank-toggle{color:#754d13;background:#fff6df;border-radius:7px;grid-column:1/-1;padding:9px 10px}.face-heading{text-align:center;grid-template-columns:36px 1fr 36px;align-items:center;gap:8px;margin-bottom:9px;display:grid}.face-heading button{color:#23446f;background:#fff;border:1px solid #d4deea;border-radius:7px;place-items:center;width:34px;height:34px;display:grid}.face-heading button:disabled{opacity:.35}.face-heading svg{width:18px}.face-heading strong{font-size:13px}.booklet-preview-stage{min-height:310px}.face-image-wrap{place-items:center;width:100%;height:100%;display:grid;position:relative}.face-image-wrap img{max-height:285px}.page-badge{color:#fff;text-align:center;background:#0a2345d1;border-radius:15px;min-width:32px;padding:5px 7px;font-size:10px;font-weight:800;position:absolute;top:10px;box-shadow:0 2px 7px #0000002e}.page-badge.left{left:10px}.page-badge.right{right:10px}.face-dots{flex-wrap:wrap;justify-content:center;gap:6px;margin:11px 0 9px;display:flex}.face-dots button{background:#bbc7d6;border:0;border-radius:50%;width:8px;height:8px;padding:0}.face-dots button.active{background:#0874f9;border-radius:5px;width:22px}.preview-stats{color:#53617a;justify-content:space-between;gap:12px;margin-bottom:8px;font-size:11px;display:flex}.booklet-export-panel .export-button{min-height:84px}.spin{animation:.9s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=1180px){.steps span{display:none}.step:not(:last-child):after{width:18px}.brand{min-width:270px}.workflow-grid,.booklet-workflow{grid-template-columns:1fr 1fr}.booklet-export-panel{flex-direction:row;grid-column:1/-1;align-items:center;gap:20px;min-height:auto}.booklet-export-panel .section-title{margin:0 auto 0 0}.booklet-export-panel .export-button{width:270px;min-height:54px;margin:0}.export-panel{flex-direction:row;grid-column:1/-1;align-items:center;gap:20px;min-height:auto}.export-panel .section-title{margin:0 auto 0 0}.export-button{width:250px;min-height:54px;margin:0}.export-panel>p{width:220px}}@media (width<=900px){.app-shell{padding-left:0}.topbar{height:68px;padding:0 16px}.menu-button{color:#1d3355;background:0 0;border:0;place-items:center;padding:5px;display:grid}.brand{min-width:0}.brand-mark{width:34px;height:39px}.brand strong{font-size:20px}.brand span,.steps,.top-actions{display:none}.sidebar{z-index:30;width:min(300px,85vw);transition:transform .25s;top:0;transform:translate(-102%)}.sidebar.open{transform:translate(0)}.sidebar-close{color:#fff;background:#ffffff1a;border:0;border-radius:50%;align-self:flex-end;place-items:center;width:38px;height:38px;margin-bottom:12px;display:grid}.scrim{z-index:25;background:#05112385;border:0;position:fixed;inset:0}main{padding:84px 12px 20px}.operation-grid{grid-template-columns:1fr 1fr}.workflow-grid,.booklet-workflow{grid-template-columns:1fr}.booklet-export-panel,.export-panel{grid-column:auto}}@media (width<=620px){.upload-panel,.operations-panel,.config-panel,.preview-panel,.export-panel{padding:14px}.upload-content{grid-template-columns:1fr;gap:8px}.file-analysis{border-top:1px solid #dfe6ef;border-left:0}dl{flex-direction:column;gap:8px}dl div{grid-template-columns:80px 1fr}.operation-grid,.field-grid,.booklet-fields,.dimension-pair,.toggle-grid{grid-template-columns:1fr}.dimension-pair.full,.blank-toggle,label.full{grid-column:auto}.operation-card{min-height:105px}.export-panel,.booklet-export-panel{flex-direction:column;align-items:stretch}.export-panel .section-title{margin:0 0 12px}.export-button,.export-panel>p{width:100%}}