:root{--bg: #0f1117;--panel: #171a23;--panel-soft: #202431;--panel-hover: #292f3f;--canvas-bg: #0a0c10;--text: #f6f7fb;--muted: #9aa3b2;--muted-2: #c4cad6;--line: rgba(255,255,255,.1);--accent: #ff4f9a;--accent-2: #7c5cff;--success: #41d68c;--warn: #ffc857;--danger: #ff647c;--radius: 16px;--shadow: 0 20px 60px rgba(0,0,0,.35)}*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Hiragino Sans,Yu Gothic,Noto Sans JP,sans-serif;background:radial-gradient(circle at top left,rgba(255,79,154,.18),transparent 34%),radial-gradient(circle at bottom right,rgba(124,92,255,.16),transparent 36%),var(--bg);color:var(--text);overflow:hidden}button,input,select,textarea{font:inherit;min-width:0}button{border:0;cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}.app{display:grid;grid-template-columns:var(--sidebar-width, 430px) 6px minmax(0,1fr) 6px var(--inspector-width, 390px);height:calc(100vh - 68px);gap:0;overflow:hidden}.app-header{height:68px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 18px;border-bottom:1px solid var(--line);background:#0f1117eb;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.app-title{min-width:0}.app-title h1{margin:0;font-size:21px;letter-spacing:0}.app-title p{margin:4px 0 0;color:var(--muted);font-size:13px}.sidebar{min-width:0;min-height:0;height:100%;background:#171a23eb;overflow-y:auto;padding:18px;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.sidebar-resizer{position:relative;background:#ffffff09;border-left:1px solid var(--line);border-right:1px solid var(--line);cursor:col-resize}.sidebar-resizer:after{content:"";position:absolute;inset:20px 2px;border-radius:999px;background:#ffffff1f;opacity:.55}.sidebar-resizer:hover:after,body.is-resizing .sidebar-resizer:after{background:var(--success);opacity:.9}.inspector-width-resizer{position:relative;background:#ffffff09;border-left:1px solid var(--line);border-right:1px solid var(--line);cursor:col-resize}.inspector-width-resizer:after{content:"";position:absolute;inset:20px 2px;border-radius:999px;background:#ffffff1f;opacity:.55}.inspector-width-resizer:hover:after,body.is-resizing .inspector-width-resizer:after{background:var(--success);opacity:.9}.brand{display:none}.brand-old{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:4px 2px 16px}.brand h1{margin:0;font-size:22px;letter-spacing:.02em}.brand p{margin:6px 0 0;color:var(--muted);font-size:13px;line-height:1.55}.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;border:1px solid var(--line);color:var(--muted-2);background:#ffffff0a;font-size:12px;white-space:nowrap}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}.stat{padding:10px;border-radius:14px;background:#ffffff0b;border:1px solid var(--line)}.stat span{display:block;color:var(--muted);font-size:11px}.stat strong{display:block;margin-top:4px;font-size:15px}.section{margin:12px 0;border:1px solid var(--line);border-radius:var(--radius);background:#ffffff0a;overflow:hidden}.section>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;cursor:pointer;-webkit-user-select:none;user-select:none}.section>summary::-webkit-details-marker{display:none}.section>summary strong{font-size:15px}.section>summary small{display:block;margin-top:3px;color:var(--muted);font-size:12px;font-weight:500}.chevron{color:var(--muted);transition:transform .2s ease}details[open]>summary .chevron{transform:rotate(90deg)}.section-body{padding:0 14px 14px}.actions{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.actions.single{grid-template-columns:1fr}.actions.three{grid-template-columns:repeat(3,1fr)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:10px 12px;border-radius:12px;color:var(--text);background:linear-gradient(135deg,var(--accent),#d93c83);box-shadow:0 10px 28px #ff4f9a2e;font-weight:700;width:100%;min-width:0;white-space:normal}.btn:hover{filter:brightness(1.06)}.btn.secondary{background:#ffffff12;box-shadow:none;border:1px solid var(--line);color:var(--muted-2)}.btn.ghost{background:transparent;box-shadow:none;border:1px solid var(--line);color:var(--muted-2)}.btn.danger{background:#ff647c21;box-shadow:none;border:1px solid rgba(255,100,124,.25);color:#ffb5c0}.note{margin:10px 0 0;padding:10px 12px;border-radius:12px;color:var(--muted-2);background:#ffffff0b;border:1px solid var(--line);font-size:12px;line-height:1.55}.folder-status{margin-top:10px;padding:10px 12px;border-radius:12px;background:#41d68c14;border:1px solid rgba(65,214,140,.2);color:#c9ffe1;font-size:12px;line-height:1.4;word-break:break-word}.drop-zone{display:grid;place-items:center;min-height:86px;margin-bottom:10px;padding:16px;border:1.5px dashed rgba(255,255,255,.25);border-radius:16px;background:linear-gradient(135deg,#ff4f9a14,#7c5cff12);color:var(--muted-2);text-align:center;transition:.18s ease}.drop-zone strong{display:block;color:var(--text);margin-bottom:4px}.drop-zone span{font-size:12px;color:var(--muted)}.drop-zone.is-dragover{border-color:var(--accent);background:#ff4f9a29;transform:translateY(-1px)}.layer-help{margin:0 0 10px;color:var(--muted);font-size:12px;line-height:1.5}.list{display:grid;gap:10px}.empty{border:1px dashed var(--line);border-radius:14px;padding:14px;color:var(--muted);text-align:center;font-size:13px}.item{border:1px solid var(--line);border-radius:16px;background:#ffffff0b;overflow:hidden}.item[open]{background:#fff1}.item.active{border-color:#ff4f9aa6;box-shadow:0 0 0 1px #ff4f9a2e}.item>summary{list-style:none;display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:10px;padding:10px;cursor:pointer}.item>summary::-webkit-details-marker{display:none}.thumb{width:42px;height:42px;border-radius:12px;object-fit:cover;background:linear-gradient(45deg,rgba(255,255,255,.1) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.1) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(255,255,255,.1) 75%),linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.1) 75%);background-size:14px 14px;background-position:0 0,0 7px,7px -7px,-7px 0;border:1px solid var(--line)}.thumb.text{display:grid;place-items:center;font-weight:900;color:#fff;background:linear-gradient(135deg,#ff4f9a52,#7c5cff47)}.item-title{min-width:0}.item-title strong{display:block;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.item-title span{display:block;margin-top:3px;color:var(--muted);font-size:11px}.pill{display:inline-flex;align-items:center;justify-content:center;min-width:34px;padding:4px 7px;border-radius:999px;background:#ffffff12;color:var(--muted-2);font-size:11px;border:1px solid var(--line)}.pill.warn{color:#ffe3a1;border-color:#ffc85747;background:#ffc8571f}.item-body{padding:0 10px 10px}.mini-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px}.mini-actions.two{grid-template-columns:repeat(2,1fr)}.mini-actions.attr{grid-template-columns:repeat(2,1fr);margin-top:-2px}.mini-actions .btn:disabled{opacity:.42;cursor:not-allowed;transform:none}.mini-actions .btn{min-height:34px;padding:7px 8px;border-radius:10px;font-size:12px}.field{margin:10px 0}label.label{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:6px;color:var(--muted-2);font-size:12px;font-weight:700}label.label small{color:var(--muted);font-weight:500}input[type=text],input[type=number],select,textarea{width:100%;min-height:38px;padding:9px 10px;border-radius:11px;border:1px solid var(--line);outline:none;background:#0a0c1099;color:var(--text)}textarea{min-height:74px;resize:vertical;line-height:1.5}input[type=text]:focus,input[type=number]:focus,select:focus,textarea:focus{border-color:#ff4f9a8c;box-shadow:0 0 0 3px #ff4f9a1f}input[type=color]{width:100%;height:38px;padding:4px;border-radius:11px;border:1px solid var(--line);background:#0a0c1099}.range-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(66px,76px);gap:8px;align-items:center}input[type=range]{width:100%;accent-color:var(--accent)}.inline-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.inline-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.subsection-title{margin:14px 0 8px;padding-top:12px;border-top:1px solid var(--line);color:var(--text);font-size:13px;font-weight:800}.bg-preview{min-height:38px;border:1px solid var(--line);border-radius:11px;background-color:#fff;background-image:linear-gradient(45deg,rgba(0,0,0,.12) 25%,transparent 25%),linear-gradient(-45deg,rgba(0,0,0,.12) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(0,0,0,.12) 75%),linear-gradient(-45deg,transparent 75%,rgba(0,0,0,.12) 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}.font-preview{margin-top:8px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#0a0c105c;color:var(--muted-2);font-size:22px;line-height:1.25;text-align:center;word-break:break-word}.font-note{margin-top:6px;color:var(--muted);font-size:11px;line-height:1.45}.check-row{display:flex;align-items:center;gap:8px;margin:8px 0;color:var(--muted-2);font-size:13px}.check-row input{accent-color:var(--accent)}.mini-drop{margin-top:8px;padding:10px;border:1px dashed rgba(255,255,255,.18);border-radius:12px;color:var(--muted);text-align:center;font-size:12px}.mini-drop.is-dragover{border-color:var(--accent);color:var(--text);background:#ff4f9a1a}.preview{min-width:0;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);height:100%;background:#0a0c10a8}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);background:#0f1117b8;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.topbar h2{margin:0;font-size:15px}.topbar p{margin:4px 0 0;color:var(--muted);font-size:12px}.zoom-controls,.preview-controls{display:flex;align-items:center;gap:8px}.zoom-controls select,.preview-controls select{width:112px;min-height:36px}.preview-controls{position:absolute;right:22px;top:18px;z-index:8;flex-wrap:wrap;max-width:min(560px,calc(100% - 44px));padding:8px;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:#0f1117db;box-shadow:0 14px 36px #00000047;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);cursor:grab;-webkit-user-select:none;user-select:none}.control-grip{width:18px;height:28px;flex:0 0 auto;border-radius:6px;cursor:grab;background-image:radial-gradient(circle,rgba(246,247,251,.72) 1.5px,transparent 1.7px);background-size:8px 8px;background-position:2px 3px;opacity:.72}.dragging .control-grip,.preview-controls.dragging{cursor:grabbing}.preview-controls .btn{width:auto;min-height:32px;padding:7px 10px;white-space:nowrap}.preview-controls .btn.active{border-color:#41d68c99;background:#41d68c2e;color:#d8ffe9}.stage-wrap{position:relative;overflow:auto;padding:26px}.stage{min-width:min-content;min-height:100%;display:grid;place-items:center}.canvas-card{position:relative;padding:12px;border-radius:24px;background:#ffffff0e;border:1px solid var(--line);box-shadow:var(--shadow)}.canvas-frame{position:relative;display:inline-block;line-height:0}.main-canvas{display:block;width:800px;height:auto;border-radius:10px;border:1px solid rgba(255,255,255,.18);background-color:#fff;background-image:linear-gradient(45deg,#ddd 25%,transparent 25%),linear-gradient(-45deg,#ddd 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ddd 75%),linear-gradient(-45deg,transparent 75%,#ddd 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0;cursor:default;touch-action:none}.animated-media-layer,.text-canvas-overlay{position:absolute;inset:1px;width:calc(100% - 2px);height:calc(100% - 2px);border-radius:10px;overflow:hidden;pointer-events:none}.animated-media-layer{z-index:1}.animated-media-layer.interactive{pointer-events:auto}.animated-media-item,.animated-media-freeze{position:absolute;display:block;object-fit:fill;transform-origin:50% 50%;pointer-events:none}.animated-media-layer.interactive .animated-media-item{pointer-events:auto}.text-canvas-overlay{z-index:2;display:block;background:transparent;border:0}.grid-overlay{position:absolute;inset:1px;z-index:3;border-radius:10px;pointer-events:none;display:none;opacity:.72;background-image:linear-gradient(to right,rgba(255,255,255,.42) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.42) 1px,transparent 1px);mix-blend-mode:difference}.grid-overlay.show{display:block}.selection-overlay{position:absolute;display:none;pointer-events:auto;border:2px solid #41d68c;border-radius:6px;box-shadow:0 0 0 1px #0a0c10ad,0 0 0 4px #41d68c29;transform-origin:0 0;z-index:4}.selection-overlay.show{display:block}.selection-overlay.group-selected{border-color:#ffc857;box-shadow:0 0 0 1px #0a0c10ad,0 0 0 5px #ffc85733}.selection-overlay.group-member-selected{box-shadow:0 0 0 1px #0a0c10ad,0 0 0 4px #41d68c29,0 0 0 8px #ffc85724}.selection-handle{position:absolute;width:12px;height:12px;background:#41d68c;border:2px solid #0a0c10;border-radius:50%;pointer-events:auto}.selection-handle[data-handle=nw]{left:-7px;top:-7px;cursor:nwse-resize}.selection-handle[data-handle=n]{left:50%;top:-7px;transform:translate(-50%);cursor:ns-resize}.selection-handle[data-handle=ne]{right:-7px;top:-7px;cursor:nesw-resize}.selection-handle[data-handle=e]{right:-7px;top:50%;transform:translateY(-50%);cursor:ew-resize}.selection-handle[data-handle=se]{right:-7px;bottom:-7px;cursor:nwse-resize}.selection-handle[data-handle=s]{left:50%;bottom:-7px;transform:translate(-50%);cursor:ns-resize}.selection-handle[data-handle=sw]{left:-7px;bottom:-7px;cursor:nesw-resize}.selection-handle[data-handle=w]{left:-7px;top:50%;transform:translateY(-50%);cursor:ew-resize}.rotate-handle{position:absolute;left:50%;top:-42px;width:24px;height:24px;transform:translate(-50%);border-radius:50%;border:2px solid #0a0c10;background:var(--warn);cursor:grab;pointer-events:auto}.rotate-handle:after{content:"";position:absolute;left:50%;top:22px;width:2px;height:19px;transform:translate(-50%);background:#41d68c}.text-editor-popover{position:absolute;display:none;z-index:4;min-width:220px;min-height:70px;padding:8px;border-radius:10px;border:1px solid rgba(65,214,140,.55);background:#0f1117f5;box-shadow:var(--shadow)}.text-editor-popover.show{display:block}.text-editor-popover textarea{width:100%;min-height:96px;resize:both;color:var(--text);background:#ffffff12;border-color:#41d68c59}.canvas-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;color:var(--muted);font-size:12px}.toast{position:fixed;right:18px;bottom:18px;z-index:20;max-width:min(420px,calc(100vw - 36px));padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:#171a23f5;color:var(--text);box-shadow:var(--shadow);opacity:0;transform:translateY(10px);pointer-events:none;transition:.2s ease;font-size:13px;line-height:1.5}.toast.show{opacity:1;transform:translateY(0)}.layer-item{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:16px;background:#ffffff0b}.layer-item.active{border-color:#ff4f9aa6;box-shadow:0 0 0 1px #ff4f9a2e;background:#ffffff12}.layer-main{min-width:0;cursor:pointer}.layer-z{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:98px}.layer-z .btn{min-height:34px;padding:7px 8px;border-radius:10px;font-size:12px}.layer-meta{display:flex;align-items:center;gap:6px;margin-top:4px;color:var(--muted);font-size:11px;flex-wrap:wrap}.inspector{border-left:1px solid var(--line);background:#0f1117f0;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);padding:14px;overflow:auto;min-width:0;min-height:0;height:100%}.inspector *{min-width:0}.inspector-resizer{position:relative;background:#ffffff09;border-top:1px solid var(--line);border-bottom:1px solid var(--line);cursor:row-resize}.inspector-resizer:after{content:"";position:absolute;left:calc(50% - 44px);right:calc(50% - 44px);top:2px;bottom:2px;border-radius:999px;background:#ffffff24}.inspector-resizer:hover:after,body.is-resizing .inspector-resizer:after{background:var(--success)}.inspector-card{border:1px solid var(--line);border-radius:16px;background:#ffffff0b;padding:12px;min-width:0;overflow:hidden}.inspector-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.inspector-head h3{margin:0;font-size:14px}.inspector-head p{margin:4px 0 0;color:var(--muted);font-size:12px}.inspector-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}.tab-btn{min-height:32px;padding:7px 10px;border-radius:999px;border:1px solid var(--line);background:#ffffff0a;color:var(--muted-2);font-size:12px;font-weight:700}.tab-btn.active{background:linear-gradient(135deg,#ff4f9af2,#7c5cfff2);border-color:transparent;color:#fff}.inspector-panel{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-items:start}.inspector-col{min-width:0;padding:10px;border-radius:14px;background:#0a0c1052;border:1px solid rgba(255,255,255,.06)}.inspector-col.full{grid-column:1 / -1}.inspector-empty{border:1px dashed var(--line);border-radius:16px;padding:16px;color:var(--muted);text-align:center}.inspector-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.inspector-actions.two{grid-template-columns:repeat(2,minmax(0,1fr))}.inspector-actions .btn{min-height:34px;font-size:12px;padding:8px 10px}@media(max-width:920px){body{overflow:auto}.app{grid-template-columns:1fr;height:auto;min-height:100vh}.app-header{height:auto;align-items:flex-start;flex-direction:column}.sidebar-resizer,.inspector-resizer,.inspector-width-resizer{display:none}.sidebar{height:auto;overflow:visible;border-right:0;border-bottom:1px solid var(--line)}.preview{height:auto;min-height:78vh;grid-template-rows:auto minmax(520px,1fr) auto}.inspector{min-height:220px}.inspector-panel{grid-template-columns:1fr}}.react-app-strip{position:fixed;top:10px;right:14px;z-index:1000;display:flex;align-items:center;gap:14px;max-width:min(620px,calc(100vw - 28px));padding:7px 9px;border:1px solid rgba(255,255,255,.14);border-radius:8px;color:#f6f7fb;background:#0f1117d1;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 12px 34px #0000003d}.react-app-strip div{display:flex;align-items:baseline;gap:8px;min-width:0}.react-app-strip strong{font-size:12px;white-space:nowrap}.react-app-strip span{color:#c4cad6;font-size:11px;white-space:nowrap}.react-app-strip label{display:inline-flex;align-items:center;gap:6px}.react-app-strip select{min-height:28px;padding:4px 8px;border-radius:7px;font-size:12px}@media(max-width:920px){.react-app-strip{position:sticky;inset:0 auto auto 0;justify-content:space-between;width:100%;max-width:none;border-radius:0}}