:root{--ink:#17201d;--muted:#69736f;--line:#dfe5e2;--paper:#f7f9f8;--white:#fff;--accent:#ff6534;--accent-dark:#e94e1b;--green:#265d4c}*{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden}body{font-family:Manrope,system-ui,sans-serif;color:var(--ink);background:#eef2f0}.app-shell{height:100%;display:grid;grid-template-rows:64px 1fr 27px}.topbar{background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 18px;gap:24px;z-index:3}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-size:15px;letter-spacing:.05em}.brand b{color:var(--accent)}.brand-mark{display:grid;place-items:center;width:31px;height:31px;border-radius:9px;background:var(--ink);color:white;font-weight:700}.document-name{margin:auto;display:flex;align-items:center;gap:8px}.document-name input{border:0;text-align:center;font:600 14px Manrope;width:170px;color:var(--ink);border-radius:6px;padding:7px}.document-name input:focus{outline:2px solid #ffd8c9}.status-dot{width:7px;height:7px;border-radius:50%;background:#45a36c}.top-actions{display:flex;align-items:center;gap:8px}.save-status{font-size:11px;color:var(--muted);margin-right:8px}.button{border:1px solid var(--line);background:white;border-radius:8px;padding:9px 15px;font:600 12px Manrope;cursor:pointer;transition:.15s}.button:hover{transform:translateY(-1px);box-shadow:0 4px 14px #1b2b2520}.button.primary{border-color:var(--accent);background:var(--accent);color:#fff}.button.dark{background:var(--ink);color:#fff;border-color:var(--ink);width:100%;margin-top:12px}.workspace{min-height:0;display:grid;grid-template-columns:76px 1fr 270px}.toolrail{background:#fff;border-right:1px solid var(--line);padding:12px 8px;display:flex;flex-direction:column;gap:6px;z-index:2}.tool{border:0;background:transparent;border-radius:9px;height:57px;color:#66706c;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}.tool:hover,.tool.active{background:#fff0ea;color:var(--accent)}.tool-icon{font:500 23px Manrope;height:25px;display:grid;place-items:center}.tool small{font:600 9px Manrope}.tool-icon.square{width:18px;height:16px;border:2px solid currentColor}.tool-icon.circle{width:18px;height:18px;border:2px solid currentColor;border-radius:50%}.tool-divider{height:1px;background:var(--line);margin:6px}.canvas-area{position:relative;min-width:0;background:#f8faf9;overflow:hidden}.canvas-area canvas{width:100%;height:100%;display:block;cursor:crosshair}.view-tabs{position:absolute;z-index:2;top:14px;left:50%;transform:translateX(-50%);background:#e8ecea;padding:3px;border-radius:9px;display:flex}.view-tab{border:0;background:transparent;border-radius:7px;padding:7px 17px;font:600 11px Manrope;color:#737d79;cursor:pointer}.view-tab.active{background:#fff;color:var(--ink);box-shadow:0 2px 6px #263b3320}.canvas-toolbar{position:absolute;z-index:2;left:18px;right:18px;top:18px;display:flex;justify-content:space-between;pointer-events:none;color:#7f8985;font:500 10px DM Mono}.empty-state{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none}.empty-state.hidden{display:none}.empty-state h1{font-size:22px;margin:16px 0 5px}.empty-state p{font-size:12px;color:var(--muted);max-width:310px;line-height:1.55;margin:0 0 18px}.empty-state .button{pointer-events:auto}.empty-icon{width:70px;height:70px;border-radius:20px;background:white;border:1px solid var(--line);display:grid;place-items:center;box-shadow:0 12px 30px #24392f12}.empty-icon span{width:29px;height:23px;border:2px solid var(--accent);transform:skewY(-12deg);box-shadow:7px -7px 0 -2px #ffd1c1}.view-cube{position:absolute;right:24px;top:58px;width:45px;height:45px;border:1px solid #cbd3cf;background:#fff;color:#737c78;font:500 8px DM Mono;display:grid;place-items:center;transform:rotate(0deg)}.view-cube i,.view-cube b{position:absolute;background:#e7ebe9}.view-cube i{width:12px;height:45px;right:-13px;transform:skewY(-45deg)}.view-cube b{width:45px;height:12px;top:-13px;transform:skewX(-45deg)}.coordinates{position:absolute;left:16px;bottom:12px;font:10px DM Mono;color:#75807b;background:#ffffffc7;border:1px solid var(--line);padding:6px 8px;border-radius:5px}.properties{background:#fff;border-left:1px solid var(--line);display:flex;flex-direction:column;min-width:0}.properties.collapsed{display:none}.panel-heading{height:47px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 16px;font-size:12px;font-weight:700}.panel-heading button{border:0;background:transparent;font-size:21px;color:#89918e;cursor:pointer}.no-selection{margin:auto;padding:20px;text-align:center}.selection-glyph{width:44px;height:44px;border:1px dashed #adb7b2;border-radius:11px;margin:0 auto 13px;position:relative}.selection-glyph:after{content:'↖';font-size:21px;position:absolute;inset:8px}.no-selection h2{font-size:13px;margin:0 0 5px}.no-selection p{font-size:11px;line-height:1.5;color:var(--muted)}.shape-properties{padding:16px;overflow:auto}.property-title{display:flex;align-items:center;gap:10px;margin-bottom:20px}.property-title>span{width:34px;height:34px;border-radius:8px;background:#fff0e9;color:var(--accent);font-weight:700;display:grid;place-items:center}.property-title div{display:flex;flex-direction:column}.property-title strong{font-size:12px}.property-title small{color:var(--muted);font-size:9px}.shape-properties label{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#65706b;margin:11px 0}.shape-properties label>input,.shape-properties label span{width:122px}.shape-properties input[type=text],.shape-properties input[type=number]{width:100%;border:1px solid var(--line);border-radius:6px;padding:8px;font:500 11px DM Mono;color:var(--ink);background:#fbfcfc}.shape-properties label span{position:relative}.shape-properties em{position:absolute;right:8px;top:8px;font:9px DM Mono;color:#98a19d}.shape-properties label span input{padding-right:28px}.section-label{text-transform:uppercase;letter-spacing:.1em;font-size:8px;font-weight:700;color:#89938f;border-top:1px solid var(--line);padding-top:16px;margin-top:16px}.range{accent-color:var(--accent);width:100%}.color-row input{border:0;width:32px!important;height:25px;padding:0;background:none}.export-card{margin-top:auto;border-top:1px solid var(--line);padding:15px}.export-card div{display:flex;flex-direction:column}.export-card strong{font-size:11px}.export-card small{font-size:9px;color:var(--muted);margin-top:3px}.statusbar{background:var(--ink);color:#b8c4bf;display:flex;align-items:center;justify-content:space-between;padding:0 14px;font:9px DM Mono}.toast{position:fixed;bottom:42px;left:50%;transform:translate(-50%,16px);background:#17201d;color:white;border-radius:8px;padding:10px 15px;font-size:11px;opacity:0;pointer-events:none;transition:.2s;z-index:5}.toast.show{opacity:1;transform:translate(-50%,0)}@media(max-width:800px){.workspace{grid-template-columns:62px 1fr}.properties{position:absolute;right:0;top:64px;bottom:27px;width:250px;z-index:4;box-shadow:-10px 0 30px #20352d18}.save-status{display:none}.topbar{gap:8px;padding:0 10px}.document-name{display:none}.toolrail{padding-inline:5px}.view-cube{display:none}}@media(max-width:520px){.top-actions .ghost{display:none}.workspace{grid-template-columns:55px 1fr}.properties{display:none}.brand{font-size:13px}.canvas-toolbar .zoom-label{display:none}.view-tabs{top:10px}.empty-state{padding-left:30px}.statusbar span:first-child{display:none}}