:root{font-family:Inter,Segoe UI,Arial,sans-serif;color:#172033;background:#eef1f5;--blue:#4f46e5;--border:#dce1e8}*{box-sizing:border-box}body{margin:0;height:100vh;overflow:hidden}.app-header{height:64px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 22px}.brand{display:flex;align-items:center;gap:11px;font-weight:700}.brand-mark{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--blue);color:#fff}.header-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}.button{border:1px solid var(--border);border-radius:8px;padding:9px 14px;background:#fff;font-weight:600;cursor:pointer}.button:disabled{opacity:.45;cursor:not-allowed}.primary{background:var(--blue);color:white;border-color:var(--blue)}.ghost{background:#fff}.danger{color:#b42318;border-color:#f1b4b0;width:100%;margin-top:20px}.danger-button{color:#b42318;border-color:#f1b4b0}main{height:calc(100vh - 64px);display:grid;grid-template-columns:240px 1fr 280px}.left-panel,.properties{background:#fff;padding:18px;border-right:1px solid var(--border);overflow:auto}.properties{border-right:0;border-left:1px solid var(--border)}.upload-card{border:1px dashed #aeb7c4;border-radius:12px;text-align:center;padding:26px 14px;margin-top:8px}.upload-icon{margin:auto;width:44px;height:44px;border-radius:12px;background:#eeecff;color:var(--blue);font-size:28px;display:grid;place-items:center}.upload-card h2{font-size:16px;margin:14px 0 6px}.upload-card p,.upload-card small,.empty-state p,.no-selection,dialog p{color:#687386;font-size:13px;line-height:1.5}.file-button{display:inline-block;margin:10px 0}.file-button input{display:none}.panel-title{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#6d7788;font-weight:700;margin-bottom:10px}.spacing{margin-top:24px}.sidebar-section{margin-top:0}.panel-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0;border:0;background:transparent;cursor:pointer}.panel-toggle .panel-title{margin-bottom:0}.panel-toggle::after{content:"";width:8px;height:8px;border-right:2px solid #7b8494;border-bottom:2px solid #7b8494;transform:rotate(45deg);transition:transform .18s ease}.panel-toggle[aria-expanded="true"]::after{transform:rotate(-135deg) translateY(-1px)}.panel-body{margin-top:10px}.sidebar-section.collapsed .panel-body{display:none}.tool-button{width:100%;display:flex;align-items:center;gap:10px;border:1px solid var(--border);background:#fff;border-radius:9px;padding:10px;margin-bottom:8px;text-align:left;cursor:pointer}.tool-button>span{width:34px;height:34px;background:#f1f3f7;border-radius:7px;display:grid;place-items:center;font-weight:700}.tool-button div{display:flex;flex-direction:column;gap:2px}.tool-button small{color:#7b8494}.page-list button{width:100%;border:1px solid var(--border);background:#fff;border-radius:7px;margin:4px 0;padding:7px;text-align:left;cursor:pointer}.workspace{position:relative;overflow:auto;padding:38px}.add-menu-wrap{position:sticky;top:0;left:0;z-index:20;display:flex;align-items:flex-start;gap:12px;width:0;height:0}.add-menu-button{display:grid;place-items:center;width:52px;height:52px;border:0;border-radius:999px;background:var(--blue);color:#fff;font-size:34px;line-height:1;box-shadow:0 10px 28px #4f46e53b;cursor:pointer}.add-menu-button[aria-expanded="true"]{background:#312e81}.add-menu{min-width:220px;padding:10px;border:1px solid var(--border);border-radius:16px;background:#ffffffed;box-shadow:0 18px 44px #1f29371a;backdrop-filter:blur(12px)}.add-menu-item{margin:0 0 8px}.add-menu-item:last-child{margin-bottom:0}.empty-state{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.empty-state h1{font-size:22px;margin:22px 0 4px}.empty-page{width:126px;height:166px;background:#fff;border-radius:8px;box-shadow:0 8px 25px #1e293b1c;position:relative}.empty-page:after{content:"";position:absolute;left:22px;right:22px;top:37px;height:6px;background:#dde2ea;box-shadow:0 18px #e7eaf0,0 36px #e7eaf0,0 54px #e7eaf0}.canvas{display:flex;flex-direction:column;align-items:center;gap:28px}.page{position:relative;background:#fff;box-shadow:0 4px 18px #25304726;user-select:none}.page-bg{width:100%;height:100%;display:block;pointer-events:none}.element{position:absolute;min-width:20px;min-height:16px;border:1px solid transparent;padding:2px;white-space:pre-wrap;overflow:hidden;cursor:move;line-height:1.15}.element.selected{border:1px solid var(--blue);box-shadow:0 0 0 1px #fff inset}.element.selected:after{content:"";position:absolute;right:-4px;bottom:-4px;width:8px;height:8px;background:#fff;border:1px solid var(--blue);border-radius:2px}.properties.disabled{opacity:.65}label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;margin:12px 0}input,select,textarea{width:100%;border:1px solid var(--border);border-radius:7px;padding:8px;font:inherit;background:#fff}.field-row{display:grid;grid-template-columns:1fr 70px;gap:8px}.format-row{display:flex;gap:5px}.format-row button{border:1px solid var(--border);background:#fff;border-radius:6px;padding:7px;cursor:pointer}.format-row button.active{background:#e9e7ff;border-color:var(--blue);color:var(--blue)}.loading{position:absolute;inset:0;display:grid;place-items:center;background:#eef1f5dd;font-weight:600}.hidden{display:none!important}dialog{border:0;border-radius:12px;box-shadow:0 18px 60px #18203344;width:min(520px,90vw);padding:24px}dialog::backdrop{background:#10182877}dialog h2{margin-top:0}.dialog-actions{display:flex;justify-content:flex-end;gap:8px}.error{color:#b42318;font-size:13px;min-height:18px}.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,20px);opacity:0;background:#172033;color:#fff;padding:10px 15px;border-radius:8px;transition:.2s;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}@media(max-width:900px){main{grid-template-columns:190px 1fr}.properties{position:fixed;right:0;top:64px;bottom:0;width:260px;box-shadow:-8px 0 20px #0001}.workspace{padding:24px}.add-menu-wrap{top:4px}.add-menu{min-width:200px}}