:root{--accent:#b63741;--accent-hover:#c94a55;--accent-soft:#f5c9cd;--bg:#172126;--surface:#1d2a2f;--line:#405158;--text:#ecf2f0;--muted:#9eb0b2;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:16px;color:var(--text);background:var(--bg)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;overscroll-behavior:none}button,input{font:inherit}button{cursor:pointer;color:inherit;border:1px solid var(--line);background:#26343a;border-radius:10px;padding:10px 14px;min-height:44px;white-space:nowrap}button:hover{background:#31434a}button:disabled{opacity:.42;cursor:not-allowed}.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:750}.primary:hover{background:var(--accent-hover)}.large{padding:13px 22px}
.app{height:100dvh;min-height:450px;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px max(20px,env(safe-area-inset-right)) 12px max(20px,env(safe-area-inset-left));border-bottom:1px solid #39484f;background:#1c292e;z-index:2}.brand{display:flex;align-items:center;gap:12px;white-space:nowrap}.brand strong{font-size:1.18rem;letter-spacing:-.03em;display:block}.brand small{font-size:.69rem;letter-spacing:.14em;color:var(--muted);font-weight:650}.brandmark{display:grid;place-items:center;width:39px;height:39px;border-radius:11px;background:var(--accent);color:#fff;font-size:1.5rem}.top-actions{display:flex;gap:8px;overflow-x:auto}
.layout{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 282px;min-height:0}.workspace{min-width:0;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;background-color:#293438;background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:28px 28px;padding:28px 28px 48px}.empty{background:#1f2b30;border:1px solid #46555a;border-radius:20px;text-align:center;max-width:410px;padding:37px 30px;box-shadow:0 25px 70px #09111655}.empty-icon{height:68px;width:68px;display:grid;place-items:center;margin:auto auto 18px;border-radius:16px;background:var(--accent);color:#fff;font-size:2.2rem}.empty h1{font-size:1.55rem;letter-spacing:-.04em;margin:0 0 12px}.empty p{color:#b4c2c3;line-height:1.48;margin:0 0 24px}.empty span{display:block;font-size:.82rem;color:#849ca1;margin-top:15px}.stage{width:100%;height:100%;display:flex;align-items:center;justify-content:center;min-height:0}.stage[hidden],.empty[hidden],.modal-backdrop[hidden],.photo-controls[hidden]{display:none}.photo-frame{position:relative;box-shadow:0 20px 55px #0e1719bb;border:1px solid #7b8886;background:#fff;overflow:hidden;flex:none}.photo-frame img,.photo-frame canvas{display:block;position:absolute;inset:0;width:100%;height:100%}.photo-frame img{object-fit:fill;pointer-events:none;user-select:none}.photo-frame canvas{touch-action:none;cursor:crosshair}.workspace-help{position:absolute;bottom:13px;left:50%;transform:translateX(-50%);border-radius:99px;padding:6px 13px;background:#152226dd;color:#bfcdd0;font-size:.81rem;white-space:nowrap;pointer-events:none}
.panel{background:var(--surface);border-left:1px solid #39484f;padding:17px 16px;overflow-y:auto;min-height:0}.sidebar-layers{padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--line)}.layers-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:13px}.layers-head strong,.layers-head small{display:block}.layers-head strong{font-size:1rem}.layers-head small{font-size:.72rem;color:var(--muted);margin-top:2px;line-height:1.3}.layers-head button{background:var(--accent);border-color:var(--accent);color:#fff;min-height:35px;min-width:35px;padding:2px 7px;font-size:1.3rem;line-height:1}.layers-head button:hover{background:var(--accent-hover)}.layer-list{display:flex;flex-direction:column;gap:7px}.layer-row{display:flex;align-items:center;flex-wrap:wrap;gap:4px;background:#26363b;border:1px solid var(--line);border-radius:11px;padding:5px;position:relative}.layer-row.active{border-color:var(--accent);background:#3b3438}.layer-row.dragging{z-index:3;box-shadow:0 12px 25px #0009;opacity:.92}.layer-row.drop-target{outline:2px solid var(--accent);outline-offset:2px}.drag-handle{touch-action:none;user-select:none;-webkit-user-select:none;min-height:38px;min-width:31px;padding:4px 5px;border:0;background:transparent;color:#c7d1d2;font-size:1.4rem;cursor:grab}.drag-handle:active{cursor:grabbing}.layer-select{min-width:0;flex:1;min-height:40px;border:0;background:transparent;text-align:left;padding:3px 4px;overflow:hidden}.layer-select:hover,.drag-handle:hover{background:#36474c}.layer-select strong,.layer-select small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layer-select strong{font-size:.86rem}.layer-select small{color:var(--muted);font-size:.7rem}.layer-actions{display:flex;gap:2px}.layer-actions button,.photo-lock{min-width:31px;min-height:35px;padding:3px 5px;border:0;background:transparent;font-size:1rem}.layer-actions button:hover,.photo-lock:hover{background:#42545a}.layer-photo .layer-select{padding-left:9px}.layer-extra{display:flex;gap:5px;justify-content:flex-end;flex-wrap:wrap;width:100%;padding:5px 2px 2px}.layer-extra button{min-height:33px;font-size:.75rem;padding:4px 8px}.photo-controls{padding:12px 7px 0}.photo-controls button{width:100%;min-height:36px;padding:6px;font-size:.79rem}.photo-controls input[type=range]{margin-bottom:10px}
.panel-heading{display:flex;justify-content:space-between;gap:8px;color:var(--accent-soft);letter-spacing:.12em;font-size:.72rem;font-weight:800}.panel-heading span:last-child{color:var(--muted);letter-spacing:0;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:120px}.toolgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:16px 0 22px}.tool{display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:left;font-size:.83rem}.tool span{font-size:1.4rem;line-height:1.1}.tool.active{background:#46343a;border-color:var(--accent);color:#ffd9dc}.section-title{font-size:.83rem;color:#b4c3c4;margin-bottom:12px}.colors{display:flex;gap:10px;margin-bottom:20px}.swatch{width:31px;height:31px;min-height:31px;padding:0;border-radius:50%;background:var(--swatch);border:2px solid #71838a}.swatch.selected{outline:2px solid var(--accent);outline-offset:3px}.range-label{display:flex;justify-content:space-between;color:#c6d1d1;font-size:.83rem;margin-bottom:7px}.range-label output{color:var(--accent-soft)}input[type=range]{width:100%;accent-color:var(--accent);margin:0 0 22px}.rule{border-top:1px solid var(--line);margin-bottom:18px}.row{display:flex;gap:8px}.row button{flex:1;padding:8px}.check{display:flex;align-items:center;gap:9px;font-size:.85rem;color:#c6d1d1;margin:22px 0}.check input{accent-color:var(--accent);width:18px;height:18px}.panel-foot{border-top:1px solid var(--line);padding-top:15px;color:#8ea1a5;font-size:.77rem;line-height:1.4}
.modal-backdrop{position:fixed;inset:0;background:#071013bd;z-index:5;display:grid;place-items:center;padding:20px}.modal{background:#26353b;border:1px solid #526267;padding:23px;width:min(420px,100%);border-radius:17px;box-shadow:0 30px 80px #0008}.modal h2{margin:0 0 18px}.modal label{display:block;margin-bottom:8px;font-size:.85rem}.modal input{width:100%;height:48px;border:1px solid #718086;background:#162328;border-radius:9px;color:#fff;padding:0 12px}.modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:20px}#toast{position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--accent);color:#fff;padding:10px 16px;border-radius:9px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:9;font-size:.85rem;font-weight:650}#toast.show{opacity:1}
@media(max-width:700px){.layout{display:flex;flex-direction:column}.workspace{flex:1;padding:12px 12px 35px}.panel{flex:0 0 min(42vh,370px);border-left:0;border-top:1px solid var(--line);padding:12px 16px}.sidebar-layers{margin-bottom:15px}.topbar{padding:8px 12px;flex-wrap:wrap}.brand small{display:none}.brandmark{width:32px;height:32px}.top-actions{width:100%}.top-actions button{flex:1;padding:7px 10px;min-height:38px;font-size:.8rem}.workspace-help{font-size:.7rem}.empty{padding:24px 20px}.empty h1{font-size:1.3rem}.toolgrid{display:flex;overflow-x:auto}.tool{min-width:75px}}
@media(max-width:500px){.workspace{padding:8px 8px 34px}.panel{flex-basis:min(45vh,370px)}.top-actions button{padding:6px 8px}}
.projects-backdrop[hidden]{display:none}.projects-backdrop{position:fixed;inset:0;z-index:4;background:#071013c9;display:grid;place-items:center;padding:22px}.projects-sheet{width:min(960px,100%);height:min(750px,calc(100dvh - 44px));display:flex;flex-direction:column;background:#1d2a2f;border:1px solid #516167;border-radius:18px;box-shadow:0 25px 80px #0009;overflow:hidden}.projects-top{padding:18px 22px;display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid var(--line)}.projects-top h2{margin:0;font-size:1.35rem}.projects-top p{margin:3px 0 0;color:var(--muted);font-size:.83rem}.projects-top button{min-height:35px;padding:4px 10px}.projects-content{flex:1;min-height:0;display:grid;grid-template-columns:280px minmax(0,1fr)}.projects-column,.sketches-column{padding:18px;overflow-y:auto;min-width:0}.projects-column{border-right:1px solid var(--line);background:#1a272c}.projects-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}.projects-heading strong{font-size:.94rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.projects-heading button{min-height:35px;padding:5px 9px;font-size:.77rem}.projects-list,.sketches-list{display:flex;flex-direction:column;gap:8px}.project-card{border:1px solid var(--line);background:#26353b;border-radius:12px;padding:10px;display:flex;align-items:flex-start;gap:7px}.project-card.active{border-color:var(--accent);background:#3b3438}.project-select{min-width:0;flex:1;text-align:left;border:0;background:transparent;white-space:normal;padding:3px;min-height:40px}.project-select strong,.project-select small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.project-select strong{font-size:.88rem}.project-select small{color:var(--muted);font-size:.7rem;margin-top:4px}.card-menu{min-height:34px;padding:3px 8px;border:0;background:transparent}.card-options{width:100%;display:flex;gap:5px;justify-content:flex-end;flex-wrap:wrap;margin-top:4px}.card-options button{min-height:32px;font-size:.75rem;padding:3px 8px}.project-card:has(.card-options){flex-wrap:wrap}.sketch-card{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;background:#26353b;padding:8px}.sketch-card.active{border-color:var(--accent)}.sketch-thumb{width:76px;height:58px;object-fit:cover;border-radius:7px;background:#415159;flex:none}.sketch-select{min-width:0;flex:1;text-align:left;border:0;background:transparent;white-space:normal;padding:3px}.sketch-select strong,.sketch-select small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sketch-select strong{font-size:.87rem}.sketch-select small{font-size:.72rem;color:var(--muted);margin-top:4px}.list-empty{border:1px dashed #506168;border-radius:11px;padding:24px;text-align:center;color:var(--muted);font-size:.85rem;line-height:1.45}.projects-foot{border-top:1px solid var(--line);padding:12px 20px;color:var(--muted);font-size:.75rem}
@media(max-width:700px){.projects-backdrop{padding:8px}.projects-sheet{height:calc(100dvh - 16px)}.projects-content{display:flex;flex-direction:column}.projects-column{max-height:40%;border-right:0;border-bottom:1px solid var(--line)}.sketches-column{flex:1}.projects-column,.sketches-column{padding:13px}.projects-top{padding:13px}.projects-foot{padding:9px 13px}.top-actions{gap:5px}.top-actions button{font-size:.74rem;padding:6px}}
.selection-controls[hidden]{display:none}.selection-controls{border:1px solid var(--accent);border-radius:12px;background:#332b30;padding:11px;margin:-10px 0 18px}.selection-controls strong{font-size:.85rem;color:#f5d1d4}.selection-controls p{font-size:.74rem;color:#bccbcb;line-height:1.35;margin:6px 0 10px}.selection-actions{display:flex;gap:6px}.selection-actions button{flex:1;min-height:35px;padding:5px 7px;font-size:.76rem}.selection-actions #deleteSelected{color:#ffc5c8}.photo-frame canvas.select-mode{cursor:default}
.stage{position:relative;overflow:hidden;touch-action:none}.photo-frame{transform-origin:center center}.view-controls{position:absolute;top:10px;right:10px;z-index:1;display:flex;align-items:center;gap:3px;padding:4px;background:#152226e8;border:1px solid #526166;border-radius:11px}.view-controls button{min-width:38px;min-height:38px;border:0;background:transparent;padding:3px 7px;font-size:1.1rem}.view-controls button:hover{background:#36474c}.view-controls #resetView{min-width:56px;font-size:.8rem;font-weight:700}
.photo-edit-actions{display:flex;gap:6px;margin-top:8px}.photo-edit-actions button{flex:1;white-space:normal}.photo-edit-actions[hidden],.crop-box[hidden]{display:none}.crop-box{position:absolute;z-index:1;border:2px dashed #fff;background:#b6374126;box-shadow:0 0 0 5000px #07101388;pointer-events:none}.measurement-section{border-top:1px solid var(--line);padding:16px 0;margin:4px 0 16px}.measurement-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:.91rem}.measurement-heading small{color:var(--muted)}.measurement-list{display:flex;flex-direction:column;gap:6px;max-height:225px;overflow:auto}.measurement-list button{white-space:normal;text-align:left;min-height:40px;padding:7px 9px;font-size:.84rem}.measurement-list button small{display:block;color:var(--muted);font-size:.72rem;margin-top:2px}.measurement-list button.active{border-color:var(--accent)}.measurement-list p{color:var(--muted);font-size:.78rem;margin:4px 0 8px}.projects-top-actions{display:flex;gap:7px}
.workspace-actions{position:absolute;top:10px;left:10px;z-index:2;display:flex;gap:5px;padding:4px;background:#152226ee;border:1px solid #526166;border-radius:11px}.workspace-actions button{min-height:38px;padding:5px 9px;font-size:.83rem}.workspace-actions #gridBtn[aria-pressed="true"]{background:#624048;border-color:var(--accent);color:#fff}.grid-overlay[hidden],.paper-controls[hidden],#overlayOpacityControl[hidden]{display:none}.grid-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.35;background-image:linear-gradient(to right,#ffffffaa 1px,transparent 1px),linear-gradient(to bottom,#ffffffaa 1px,transparent 1px),linear-gradient(to right,transparent calc(50% - 1px),#b63741aa 50%,transparent calc(50% + 1px));background-size:10% 10%,10% 10%,100% 100%}.add-photo-layer{width:100%;margin:-2px 0 10px;min-height:37px;padding:6px;font-size:.8rem}.paper-controls{padding:12px 7px 0}.paper-controls input[type=range],#overlayOpacityControl input[type=range]{margin-bottom:4px}.layer-row.layer-extra-photo{background:#26343d}.layer-row.layer-extra-photo.active{background:#3b3438}.layer-row.layer-extra-photo .layer-select strong{color:#ecf2f0}
@media(max-width:550px){.workspace-actions{top:auto;bottom:9px;left:8px}.workspace-actions button{font-size:.75rem;padding:5px 7px;min-height:34px}.view-controls{top:8px;right:8px}.workspace-help{bottom:57px}}
.top-actions{min-width:0}.projects-top-actions{flex-wrap:wrap;justify-content:flex-end}.projects-top-actions #syncBtn{border-color:#b63741;color:#ffd9dc}.photo-controls #restorePhotoEdit{margin-top:8px;border-color:#8e6268;color:#f5d1d4}.projects-foot{line-height:1.4}