*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0}body{overflow:hidden;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#1f1f1f;background:#b9b9b9}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}img{max-width:none;-webkit-user-select:none;user-select:none}.app-shell{height:100vh;display:grid;grid-template-rows:48px minmax(0,1fr) 158px;background:#b9b9b9}.topbar{display:flex;align-items:center;gap:14px;height:48px;padding:0 14px;color:#fff;background:linear-gradient(#606060,#4d4d4d);border-bottom:1px solid #3d3d3d;box-shadow:0 2px 8px #00000038}.brand{display:flex;align-items:center;gap:10px;min-width:275px}.brand strong{display:block;font-size:14px;line-height:1}.brand span{display:block;margin-top:4px;color:#d8d8d8;font-size:11px;font-weight:700}.mark{width:31px;height:31px;border-radius:9px;display:grid;place-items:center;color:#171717;background:#f5c842;font-weight:1000;box-shadow:inset 0 -2px #00000024}.album-input{width:240px;border:1px solid rgba(255,255,255,.23);border-radius:8px;outline:none;padding:8px 10px;color:#fff;background:#ffffff1a;font-weight:800}.album-input:focus{border-color:#f5c842}.top-actions{margin-left:auto;display:flex;gap:8px}.btn,.top-actions .btn,.film-actions button,.layout-actions button{border:1px solid rgba(0,0,0,.14);border-radius:8px;padding:8px 11px;background:#f4f4f4;color:#222;font-weight:850;font-size:12px;box-shadow:inset 0 -1px #00000014}.top-actions .btn{color:#fff;background:#696969;border-color:#767676}.btn:hover,.film-actions button:hover,.layout-actions button:hover{filter:brightness(1.03)}.btn.danger{color:#8e1f1f;background:#fff2f2;border-color:#ffc2c2}.icon{display:inline-flex;align-items:center;justify-content:center}.workspace{min-height:0;display:grid;grid-template-columns:44px minmax(0,1fr) 320px}.tools{background:#505050;border-right:1px solid #444;padding-top:8px;display:flex;flex-direction:column;align-items:center;gap:3px}.tool{width:34px;height:34px;border:0;background:transparent;color:#f4f4f4;font-weight:1000;font-size:17px;border-radius:7px}.tool:hover,.tool.active{background:#f5c842;color:#171717}.stage-wrap{min-width:0;min-height:0;overflow:auto;background:#bdbdbd}.ruler{position:sticky;top:0;z-index:5;height:28px;display:flex;align-items:center;padding-left:18px;color:#565656;background:#cdcdcd;border-bottom:1px solid #a4a4a4;font-size:10px;font-weight:800;letter-spacing:.2px}.stage-center{min-height:calc(100% - 28px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px 20px 20px}.stage-head{width:min(100%,980px,calc((100vh - 270px)*2));min-width:620px;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px;color:#555;font-size:10px;font-weight:950;text-transform:uppercase;letter-spacing:.08em}.layout-actions{display:flex;align-items:center;gap:6px}.layout-actions button{background:#f5c842;border-color:#d2a829;padding:7px 10px}.spread-canvas{position:relative;width:min(100%,980px,calc((100vh - 270px)*2));min-width:620px;aspect-ratio:2 / 1;overflow:hidden;background:#fff;border:1px solid rgba(0,0,0,.24);box-shadow:0 18px 42px #00000057}.spread-canvas:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(90deg,rgba(0,0,0,.035) 0 1px,transparent 1px 100%),linear-gradient(0deg,rgba(0,0,0,.025) 0 1px,transparent 1px 100%);background-size:5% 10%;pointer-events:none}.safe-area{position:absolute;top:3.2%;right:3.2%;bottom:3.2%;left:3.2%;border:1px dashed rgba(219,74,74,.55);pointer-events:none}.gutter,.center-line{position:absolute;left:50%;top:0;height:100%;width:2px;transform:translate(-1px);background:linear-gradient(to bottom,transparent,rgba(80,80,80,.48),transparent);pointer-events:none}.blank-message{position:absolute;left:50%;top:50%;width:min(78%,540px);transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:8px;padding:28px;border:2px dashed #d7d7d7;border-radius:18px;color:#777;text-align:center;background:#fafafac7}.blank-message strong{font-size:23px;color:#333}.blank-message span{font-size:13px;font-weight:700;line-height:1.35}.drop-ready{outline:6px solid rgba(245,200,66,.45)}.drop-overlay{position:absolute;top:22px;right:22px;bottom:22px;left:22px;z-index:80;display:grid;place-items:center;border:4px dashed #f5c842;color:#171717;background:#f5c84238;font-size:25px;font-weight:1000}.swap-float{position:fixed;z-index:2000;color:#fff;background:#141414e0;border-radius:999px;padding:8px 13px;font-size:12px;font-weight:950;pointer-events:none}.frame{position:absolute;overflow:visible;-webkit-user-select:none;user-select:none}.frame-photo{position:relative;width:100%;height:100%;display:block;overflow:hidden;border:0;padding:0;background:#efefef;box-shadow:0 4px 12px #0000003d;outline:1px solid rgba(0,0,0,.12)}.frame-photo:hover{outline:2px solid #2d2d2d}.frame.selected .frame-photo{outline:4px solid #f5c842;outline-offset:2px}.frame.drop-target .frame-photo{box-shadow:0 0 0 8px #f5c84273}.photo-img{position:absolute;object-fit:cover;transform-origin:center center}.photo-empty{width:100%;height:100%;display:grid;place-items:center;color:#aaa;background:#efefef;font-size:30px}.swap-btn{position:absolute;left:50%;top:50%;z-index:50;width:46px;height:46px;transform:translate(-50%,-50%);border-radius:999px;border:1px solid rgba(255,255,255,.8);color:#fff;background:#0000006b;box-shadow:0 8px 22px #00000042;font-size:21px;font-weight:1000;opacity:0;transition:.18s;cursor:grab}.frame:hover .swap-btn{opacity:1}.swap-btn:active{cursor:grabbing}.resize-handle{position:absolute;z-index:60;width:14px;height:14px;border:2px solid #1d1d1d;background:#fff;box-shadow:0 2px 5px #00000040}.handle-nw{left:-8px;top:-8px;cursor:nwse-resize}.handle-n{left:50%;top:-8px;transform:translate(-50%);cursor:ns-resize}.handle-ne{right:-8px;top:-8px;cursor:nesw-resize}.handle-e{right:-8px;top:50%;transform:translateY(-50%);cursor:ew-resize}.handle-se{right:-8px;bottom:-8px;cursor:nwse-resize}.handle-s{left:50%;bottom:-8px;transform:translate(-50%);cursor:ns-resize}.handle-sw{left:-8px;bottom:-8px;cursor:nesw-resize}.handle-w{left:-8px;top:50%;transform:translateY(-50%);cursor:ew-resize}.right-panel{min-width:0;min-height:0;overflow-y:auto;background:#f7f7f7;border-left:1px solid #d1d1d1}.tabs{position:sticky;top:0;z-index:8;display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:12px;background:#fff;border-bottom:1px solid #ddd}.tabs button{border:0;border-radius:8px;padding:9px;background:#ececec;color:#555;font-weight:950}.tabs button.active{background:#f5c842;color:#191919}.album-panel,.crop-panel{padding:12px}.panel-block{margin-bottom:12px;padding:12px;border:1px solid #e4e4e4;border-radius:12px;background:#fff;box-shadow:0 1px 2px #00000008}.panel-block h3,.panel-title{margin:0 0 10px;color:#555;font-size:11px;font-weight:1000;text-transform:uppercase;letter-spacing:.12em}.panel-subtitle{margin:-4px 0 10px;color:#777;font-size:12px;font-weight:650;line-height:1.3}.stat{display:flex;align-items:center;justify-content:space-between;padding:7px 0;border-bottom:1px solid #f0f0f0;color:#555;font-size:13px;font-weight:750}.stat:last-child{border-bottom:0}.stat b{color:#222}.panel-actions{display:grid;gap:8px;margin-top:10px}.panel-actions.two{grid-template-columns:1fr 1fr}.panel-actions.two .danger{grid-column:span 2}.muted{color:#777;font-size:12px;font-weight:700;line-height:1.35}.empty-panel{margin:12px;padding:18px;border:1px dashed #cfcfcf;border-radius:12px;color:#777;background:#fff;font-size:13px;font-weight:700;line-height:1.4}.spread-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}.spread-mini{border:1px solid #dedede;border-radius:10px;padding:6px;background:#fff;text-align:left}.spread-mini.active{border-color:#f5c842;box-shadow:0 0 0 2px #f5c84252}.spread-mini-canvas{position:relative;aspect-ratio:2 / 1;overflow:hidden;background:#fafafa;border:1px solid #eee}.mini-frame{position:absolute;overflow:hidden;background:#d8d8d8}.mini-frame img{width:100%;height:100%;object-fit:cover}.mini-empty{position:absolute;top:20%;right:20%;bottom:20%;left:20%;border:1px dashed #d9d9d9;border-radius:5px}.mini-label{display:flex;justify-content:space-between;margin-top:4px;color:#666;font-size:10px;font-weight:950}.layout-card{width:100%;display:grid;grid-template-columns:88px 1fr;align-items:center;gap:9px;border:1px solid #e4e4e4;border-radius:10px;padding:7px;margin-bottom:7px;background:#fff;text-align:left}.layout-card.active{border-color:#f5c842;background:#fff9df}.layout-card strong{font-size:12px;color:#444}.layout-thumb{position:relative;aspect-ratio:2 / 1;background:#f1f1f1;overflow:hidden;border:1px solid #e0e0e0}.layout-thumb span{position:absolute;background:#777}.crop-stage{position:relative;height:216px;overflow:hidden;border:1px solid #b8b8b8;border-radius:10px;background:#d6d6d6;cursor:grab;box-shadow:inset 0 2px 8px #0000001f}.crop-stage:active{cursor:grabbing}.crop-full-img{position:absolute;left:50%;top:50%;max-width:92%;max-height:92%;object-fit:contain;transform-origin:center center}.crop-mask{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:2px solid #fff;box-shadow:0 0 0 999px #00000042,inset 0 0 0 1px #00000080}.crop-mask:before{content:"";position:absolute;left:50%;top:0;width:1px;height:100%;background:#ffffffb3}.crop-mask:after{content:"";position:absolute;left:0;top:50%;width:100%;height:1px;background:#ffffffb3}.crop-mask span{position:absolute;left:8px;top:8px;padding:4px 7px;border-radius:999px;color:#333;background:#ffffffe0;font-size:10px;font-weight:1000;text-transform:uppercase;letter-spacing:.06em}.range-label{display:block;margin:12px 0 5px;color:#555;font-size:12px;font-weight:1000}.range{width:100%;accent-color:#f5c842}.filmstrip{min-height:0;color:#fff;background:#5d5d5d;border-top:1px solid #454545}.filmstrip-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border-bottom:1px solid #737373}.selection-info strong{display:block;color:#fff;font-size:13px}.selection-info span{display:block;margin-top:2px;color:#d4d4d4;font-size:10px;font-weight:750}.film-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px}.film-actions button{color:#222;background:#f3f3f3;padding:7px 9px}.film-actions button.active{color:#111;background:#f5c842}.photos-row{display:flex;align-items:stretch;gap:8px;height:96px;overflow-x:auto;padding:9px 12px}.photo-tile{position:relative;flex:0 0 auto;width:94px;height:72px;overflow:hidden;padding:0;border:3px solid rgba(255,255,255,.3);border-radius:5px;background:#ddd;box-shadow:0 4px 10px #0000003b}.photo-tile img{width:100%;height:100%;object-fit:cover}.photo-tile.selected{border-color:#f5c842}.photo-tile.used:not(.selected){opacity:.64}.photo-number,.photo-order,.used-badge{position:absolute;display:inline-flex;align-items:center;justify-content:center;font-weight:1000}.photo-number{left:5px;top:5px;min-width:20px;height:20px;padding:0 5px;color:#333;background:#ffffffe6;border-radius:999px;font-size:10px}.photo-order{right:5px;top:5px;width:24px;height:24px;color:#111;background:#f5c842;border-radius:999px;font-size:12px}.used-badge{right:5px;bottom:5px;padding:3px 6px;color:#fff;background:#000000b8;border-radius:999px;font-size:9px;text-transform:uppercase;letter-spacing:.04em}.empty-film{display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:380px;padding:12px 16px;border:1px dashed rgba(255,255,255,.28);border-radius:10px;color:#e8e8e8}.empty-film strong{font-size:13px}.empty-film span{color:#cfcfcf;font-size:12px;font-weight:700}@media (max-width: 1150px){.workspace{grid-template-columns:44px minmax(0,1fr) 285px}.stage-head,.spread-canvas{min-width:560px}.top-actions .btn{padding:7px 8px}.album-input{width:190px}}