@layer components{.ps-body{height:100vh;overflow:hidden;font-size:13px}.menu-bar{display:flex;height:34px;flex-shrink:0;background:var(--surface-solid);border-bottom:1px solid var(--line)}.menu-item{position:relative;padding:8px 12px;cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--fg-muted)}.menu-item:hover,.menu-item.active{background:var(--surface-3);color:var(--fg)}.submenu{display:none;position:absolute;top:100%;left:0;z-index:1000;min-width:200px;padding:6px;background:var(--surface-solid);border:1px solid var(--line-strong);border-radius:var(--radius-sm);box-shadow:var(--shadow-md)}.menu-item.active .submenu{display:block}.submenu-item{padding:8px 14px;border-radius:6px;font-size:12px;color:var(--fg);cursor:pointer}.submenu-item:hover{background:var(--brand-gradient-soft)}.submenu-item.disabled{opacity:.5;pointer-events:none}.submenu-separator{height:1px;margin:4px 0;background:var(--line)}.main-container{display:flex;flex:1;min-height:0;overflow:hidden}.toolbar{display:flex;flex-direction:column;gap:2px;width:60px;padding:8px 5px;background:var(--surface-solid);border-right:1px solid var(--line);overflow-y:auto}.tool-button{display:flex;flex-direction:column;align-items:center;justify-content:center;width:48px;height:48px;flex-shrink:0;border:1px solid transparent;border-radius:var(--radius-sm);color:var(--fg);font-size:20px;cursor:pointer;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease)}.tool-button:hover{background:var(--surface-3)}.tool-button.active{background:var(--brand-gradient-soft);border-color:#025bff80}.tool-button.disabled{opacity:.3;cursor:not-allowed}.tool-button.disabled:hover{background:transparent}.tool-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px}.tool-label{margin-top:2px;font-size:7px;line-height:1;color:var(--fg-subtle);text-align:center}.toolbar-separator{height:1px;margin:5px 0;background:var(--line)}.canvas-container{position:relative;display:flex;flex:1;align-items:center;justify-content:center;overflow:auto;background:var(--bg)}.canvas-wrapper{position:relative;transform-origin:center center;box-shadow:var(--shadow-lg)}#main-canvas{display:block;width:100%;height:100%;background:#fff;cursor:crosshair}.start-screen{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:16px;background-color:var(--bg);background-image:var(--page-glow)}.start-screen-content{width:100%;max-width:600px;text-align:center}.start-screen-icon{margin-bottom:32px;font-size:clamp(64px,12vw,96px);line-height:1;filter:drop-shadow(0 8px 16px rgb(2 91 255 / .3));animation:ps-float 3s ease-in-out infinite}.start-screen-hint{margin-bottom:40px}.start-screen-dropzone{padding:clamp(40px,8vw,80px) 24px;border:2px dashed rgb(2 91 255 / .45);border-radius:var(--radius-xl);background:var(--surface);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);cursor:pointer;transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease)}.start-screen-dropzone:hover,.start-screen-dropzone.drag-over{border-color:var(--brand-blue);background:var(--brand-gradient-soft);box-shadow:var(--brand-glow);transform:translateY(-4px)}.start-screen-dropzone.drag-over{transform:scale(1.03)}.start-screen-dropzone-icon{margin-bottom:20px;font-size:64px;line-height:1}.start-screen-dropzone-text{margin-bottom:8px;font-size:1.35rem;font-weight:700;color:var(--fg)}.start-screen-dropzone-hint{color:var(--fg-subtle)}.right-panel{display:flex;flex-direction:column;width:300px;flex-shrink:0;background:var(--surface-solid);border-left:1px solid var(--line)}.panel-top,.panel-bottom{display:flex;flex:1;flex-direction:column;min-height:0;overflow:hidden}.panel-bottom{border-top:1px solid var(--line)}.panel-tabs{display:flex;border-bottom:1px solid var(--line)}.panel-tab{flex:1;padding:10px;border-bottom:2px solid transparent;font-size:12px;font-weight:600;color:var(--fg-subtle);text-align:center;cursor:pointer;transition:color var(--dur) var(--ease),background var(--dur) var(--ease)}.panel-tab:hover{color:var(--fg);background:var(--surface-2)}.panel-tab.active{color:var(--fg);border-bottom-color:var(--brand-blue)}.panel-content{flex:1;min-height:0;padding:10px;overflow-y:auto}.panel-divider{height:1px;flex-shrink:0;background:var(--line)}.panel-placeholder{padding:20px 10px;font-size:12px;color:var(--fg-subtle);text-align:center}.history-header{flex-shrink:0;padding:10px 15px;border-bottom:1px solid var(--line);font-size:12px;font-weight:600;color:var(--fg)}.history-content{flex:1;padding:5px;overflow-y:auto}.history-item{margin:2px 0;padding:8px 10px;border-radius:6px;background:var(--surface-2);font-size:11px;color:var(--fg);cursor:pointer}.history-item:hover{background:var(--surface-3)}.history-item.active{background:var(--brand-gradient);color:#fff}.history-item-time{margin-top:3px;font-size:9px;color:var(--fg-subtle)}.history-item.active .history-item-time{color:#ffffffbf}.layer-item{display:flex;align-items:center;gap:8px;margin-bottom:2px;padding:8px;border-left:3px solid transparent;border-radius:6px;background:var(--surface-2);font-size:11px;cursor:pointer}.layer-item:hover{background:var(--surface-3)}.layer-item.selected{background:#025bff26;border-left-color:var(--brand-blue)}.layer-item.dragging{opacity:.5}.layer-item.drag-over{border-top:2px solid var(--brand-blue)}.layer-icon{width:16px;height:16px;flex-shrink:0;border-radius:3px;background:var(--fg-subtle)}.layer-icon.image{background:var(--brand-blue)}.layer-icon.shape{background:var(--success)}.layer-icon.circle{background:var(--brand-pink)}.layer-icon.text{background:var(--accent-amber)}.layer-name{flex:1;overflow:hidden;color:var(--fg);text-overflow:ellipsis;white-space:nowrap}.layer-actions{display:flex;align-items:center;gap:4px}.layer-visibility,.layer-delete{display:flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:4px;cursor:pointer}.layer-visibility{color:var(--fg-subtle)}.layer-visibility.visible{color:var(--fg)}.layer-visibility:hover{background:var(--surface-3)}.layer-delete{font-size:12px;color:var(--danger)}.layer-delete:hover{background:#ef444433}.status-bar{display:flex;align-items:center;justify-content:space-between;height:26px;flex-shrink:0;padding:0 12px;background:var(--surface-solid);border-top:1px solid var(--line);font-size:11px;color:var(--fg-subtle)}.modal-overlay,.filter-modal{position:fixed;inset:0;z-index:10001;display:flex;align-items:center;justify-content:center;padding:16px;background:var(--overlay);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal-content,.filter-modal-content{width:100%;max-width:500px;background:var(--surface-solid);border:1px solid var(--line-strong);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}.modal-header h3,.filter-modal-header h3{font-size:1.05rem;font-weight:700;color:var(--fg)}.filter-modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 0}.filter-modal-close{width:36px;height:36px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--fg-subtle);font-size:22px;cursor:pointer}.filter-modal-close:hover{color:var(--fg);background:var(--surface-3)}.filter-modal-body{padding:20px 24px}.filter-modal-footer{display:flex;justify-content:flex-end;gap:12px;padding:0 24px 24px}.filter-param{display:flex;align-items:center;gap:15px}.filter-param label{min-width:140px;color:var(--fg)}.filter-param span{min-width:50px;font-weight:600;color:var(--brand-blue);text-align:right}.filter-btn-cancel,.filter-btn-apply{min-height:38px;padding:8px 20px;border:1px solid var(--line-strong);border-radius:var(--radius-md);background:var(--surface-2);color:var(--fg);font-weight:600;cursor:pointer}:is(.filter-btn-cancel,.filter-btn-apply):hover{background:var(--surface-3)}.filter-btn-apply{border-color:transparent;background:var(--brand-gradient);color:#fff}.filter-btn-apply:hover{background:var(--brand-gradient);box-shadow:var(--brand-glow)}.ps-body input[type=range]{width:100%;accent-color:var(--brand-blue);cursor:pointer}}@keyframes ps-float{50%{transform:translateY(-10px)}}