.designer-shell{--designer-navy:#082b63;--designer-red:#ef302f;--designer-indigo:#5145cd;--designer-yellow:#f5bb2c;--designer-green:#267c58;--designer-page:#f4f3f1;--designer-panel:#fcfbfa;--designer-canvas:#eceef2;--designer-line:#e2dfdc;--designer-muted:#6d6978;background:var(--designer-page);color:#202038;min-height:100svh;font-family:var(--font-geist-sans), "Noto Sans JP", "Hiragino Sans", system-ui, sans-serif;overflow:hidden}.designer-shell *,.designer-shell :before,.designer-shell :after{box-sizing:border-box}.designer-shell button,.designer-shell input,.designer-shell select,.designer-shell textarea{font:inherit}.designer-shell button,.designer-shell select,.designer-shell input[type=range],.designer-shell input[type=color]{cursor:pointer}.designer-shell button:focus-visible{outline:3px solid color-mix(in srgb, var(--designer-indigo) 42%, transparent);outline-offset:2px}.designer-shell input:focus-visible{outline:3px solid color-mix(in srgb, var(--designer-indigo) 42%, transparent);outline-offset:2px}.designer-shell select:focus-visible{outline:3px solid color-mix(in srgb, var(--designer-indigo) 42%, transparent);outline-offset:2px}.designer-shell textarea:focus-visible{outline:3px solid color-mix(in srgb, var(--designer-indigo) 42%, transparent);outline-offset:2px}.designer-layer:focus-visible{outline:3px solid color-mix(in srgb, var(--designer-indigo) 42%, transparent);outline-offset:2px}.designer-topbar{z-index:50;border-bottom:1px solid var(--designer-line);background:#fcfbfaf5;grid-template-columns:minmax(240px,1fr) auto minmax(240px,1fr);align-items:center;min-height:68px;padding:8px 18px;display:grid;position:relative;box-shadow:0 2px 12px #141e370a}.designer-topbar__brand,.designer-topbar__finish,.designer-topbar__history{align-items:center;display:flex}.designer-topbar__brand{gap:12px;min-width:0}.designer-topbar__brand a{align-items:center;display:flex}.designer-topbar__brand img{object-fit:contain;object-position:left center;width:150px;height:44px;display:block}.designer-topbar__brand>span{background:var(--designer-line);width:1px;height:28px}.designer-topbar__brand div{gap:1px;min-width:0;display:grid}.designer-topbar__brand strong{color:var(--designer-navy);text-overflow:ellipsis;white-space:nowrap;font-size:14px;overflow:hidden}.designer-topbar__brand small{color:var(--designer-muted);letter-spacing:.09em;font-size:10px;font-weight:700}.designer-topbar__history{border:1px solid var(--designer-line);background:#fff;border-radius:10px;justify-content:center;gap:4px;padding:4px}.designer-topbar__history button{min-height:36px;color:var(--designer-navy);background:0 0;border:0;border-radius:7px;padding:0 11px;font-size:12px;font-weight:750}.designer-topbar__history button:hover:not(:disabled){background:#f0f0f5}.designer-topbar__history button:disabled{cursor:not-allowed;opacity:.35}.designer-topbar__finish{justify-content:flex-end;gap:14px}.designer-save-state{color:var(--designer-muted);white-space:nowrap;align-items:center;gap:6px;font-size:11px;font-weight:700;display:inline-flex}.designer-save-state i,.canvas-footer p i{background:var(--designer-green);border-radius:50%;flex:none;width:7px;height:7px;box-shadow:0 0 0 4px #267c581a}.designer-export{background:var(--designer-red);color:#fff;border:0;border-radius:9px;justify-content:center;align-items:center;gap:12px;min-height:44px;padding:0 18px;font-size:13px;font-weight:800;display:inline-flex;box-shadow:0 6px 14px #ef302f33}.designer-export:hover:not(:disabled){background:#d92827;transform:translateY(-1px)}.designer-export:disabled{cursor:wait;opacity:.65}.designer-export b{font-size:17px}.designer-layout{grid-template-columns:270px minmax(460px,1fr) 320px;height:calc(100svh - 68px);min-height:560px;display:grid}.designer-panel{z-index:20;scrollbar-width:thin;background:var(--designer-panel);position:relative;overflow:hidden auto}.designer-assets{border-right:1px solid var(--designer-line)}.designer-properties{border-left:1px solid var(--designer-line)}.designer-panel section{border-bottom:1px solid var(--designer-line);padding:20px 18px}.panel-heading{align-items:flex-start;gap:10px;margin-bottom:15px;display:flex}.panel-heading>span{background:var(--designer-navy);color:#fff;border-radius:50%;flex:none;justify-content:center;align-items:center;width:27px;height:27px;font-size:10px;font-weight:850;display:inline-flex}.panel-heading>div{min-width:0}.panel-heading h2{color:var(--designer-navy);margin:0;font-size:13px;font-weight:850;line-height:1.35}.panel-heading p{color:var(--designer-muted);margin:3px 0 0;font-size:10px;line-height:1.5}.panel-heading--small{margin-bottom:10px}.workspace-switch{grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:14px;display:grid}.workspace-switch button{border:1px solid var(--designer-line);min-width:0;min-height:68px;color:var(--designer-muted);background:#fff;border-radius:9px;place-content:center;gap:4px;padding:7px 3px;font-size:9px;font-weight:750;display:grid}.workspace-switch button i{color:var(--designer-navy);font-size:19px;font-style:normal;line-height:1}.workspace-switch button.is-active{border-color:var(--designer-indigo);box-shadow:inset 0 0 0 1px var(--designer-indigo);color:var(--designer-indigo);background:#5145cd12}.designer-field{color:#4f4c58;gap:7px;font-size:11px;font-weight:750;display:grid}.designer-field input,.designer-field select,.designer-field textarea,.add-text-row input{color:#202038;background:#fff;border:1px solid #d9d6d3;border-radius:8px;outline:0;width:100%;min-height:42px;padding:9px 11px;font-size:13px;font-weight:550}.designer-field textarea{resize:vertical;min-height:76px}.designer-field input:hover,.designer-field select:hover,.designer-field textarea:hover,.add-text-row input:hover{border-color:#b9b4c1}.add-image-button{background:var(--designer-red);color:#fff;text-align:center;border:0;border-radius:10px;place-content:center;gap:2px;width:100%;min-height:98px;display:grid;box-shadow:0 7px 18px #ef302f2b}.add-image-button:hover{background:#da2928;transform:translateY(-1px)}.add-image-button b{font-size:24px;font-weight:400;line-height:1}.add-image-button span{font-size:14px;font-weight:850}.add-image-button small{color:#ffffffbf;margin-top:2px;font-size:9px}.designer-privacy{color:var(--designer-muted);align-items:flex-start;gap:6px;margin:10px 0 0;font-size:9px;line-height:1.55;display:flex}.designer-privacy i{width:15px;height:15px;color:var(--designer-green);background:#267c581c;border-radius:50%;flex:none;justify-content:center;align-items:center;font-size:9px;font-style:normal;font-weight:900;display:inline-flex}.add-text-row{grid-template-columns:minmax(0,1fr) 52px;gap:7px;display:grid}.add-text-row button,.shape-buttons button{border:1px solid var(--designer-line);min-height:42px;color:var(--designer-navy);background:#fff;border-radius:8px;font-size:11px;font-weight:800}.add-text-row button:hover,.shape-buttons button:hover{border-color:var(--designer-indigo);color:var(--designer-indigo)}.shape-buttons{grid-template-columns:1fr 1fr;gap:7px;display:grid}.shape-buttons button{justify-content:center;align-items:center;gap:7px;display:flex}.shape-buttons i{border:2px solid;width:15px;height:15px;font-style:normal;display:block}.shape-buttons .shape-circle{border-radius:50%}.background-swatches{flex-wrap:wrap;gap:9px;display:flex}.background-swatches button{border:2px solid #fff;border-radius:50%;width:34px;height:34px;padding:0;position:relative;overflow:hidden;box-shadow:0 0 0 1px #cfcbd1}.background-swatches button.is-transparent{background-color:#fff;background-image:linear-gradient(45deg,#d7d7da 25%,#0000 25%),linear-gradient(-45deg,#d7d7da 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#d7d7da 75%),linear-gradient(-45deg,#0000 75%,#d7d7da 75%);background-position:0 0,0 7px,7px -7px,-7px 0;background-size:14px 14px}.background-swatches button.is-active{box-shadow:0 0 0 3px var(--designer-indigo)}.background-swatches button span{border-radius:inherit;color:#fff;background:#082b6361;place-items:center;font-size:13px;font-weight:900;display:grid;position:absolute;inset:0}.designer-canvas-column{background:var(--designer-canvas);grid-template-rows:auto minmax(0,1fr) auto;min-width:0;min-height:0;display:grid;overflow:hidden}.canvas-toolbar,.canvas-footer{z-index:15;-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);background:#f4f5f8e6;border-bottom:1px solid #cdcdd2bf;justify-content:space-between;align-items:center;min-height:54px;padding:8px 18px;display:flex;position:relative}.canvas-toolbar>div{align-items:baseline;gap:9px;min-width:0;display:flex}.canvas-toolbar strong{color:var(--designer-navy);text-overflow:ellipsis;white-space:nowrap;font-size:13px;overflow:hidden}.canvas-toolbar span{color:var(--designer-muted);white-space:nowrap;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px}.canvas-toolbar button{min-height:36px;color:var(--designer-muted);background:0 0;border:1px solid #0000;border-radius:8px;align-items:center;gap:5px;padding:0 10px;font-size:10px;font-weight:750;display:inline-flex}.canvas-toolbar button.is-active{color:var(--designer-indigo);background:#5145cd14;border-color:#5145cd40}.canvas-toolbar button i{font-size:15px;font-style:normal}.designer-viewport{background:radial-gradient(circle at 50% 45%,#ffffffeb,#fff0 58%),linear-gradient(135deg,#ffffff59,#0000 46%);justify-content:center;align-items:center;min-width:0;min-height:0;padding:18px;display:flex;position:relative;overflow:hidden}.designer-artboard-wrap{transform-origin:50%;justify-content:center;align-items:center;width:100%;height:100%;transition:transform .18s;display:flex}.designer-artboard{isolation:isolate;touch-action:none;-webkit-user-select:none;user-select:none;border:1px solid #5458693d;width:auto;max-width:92%;height:min(68vh,730px);max-height:92%;position:relative;overflow:hidden;box-shadow:0 14px 42px #1a233e29,0 2px 8px #1a233e14;container-type:inline-size}.designer-artboard.has-transparent-background{background-image:linear-gradient(45deg,#e9e9ec 25%,#0000 25%),linear-gradient(-45deg,#e9e9ec 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#e9e9ec 75%),linear-gradient(-45deg,#0000 75%,#e9e9ec 75%);background-position:0 0,0 10px,10px -10px,-10px 0;background-size:20px 20px;background-color:#fff!important}.designer-artboard.has-grid:after{z-index:800;pointer-events:none;content:"";background-image:linear-gradient(#5145cd17 1px,#0000 1px),linear-gradient(90deg,#5145cd17 1px,#0000 1px),linear-gradient(#5145cd29 1px,#0000 1px),linear-gradient(90deg,#5145cd29 1px,#0000 1px);background-size:10% 10%,10% 10%,50% 50%,50% 50%;position:absolute;inset:0}.canvas-empty{z-index:10;width:min(76%,280px);min-height:140px;color:var(--designer-indigo);text-align:center;background:#ffffffe0;border:1px dashed #5145cd8c;border-radius:12px;place-content:center;gap:5px;padding:20px;display:grid;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.canvas-empty i{font-size:30px;font-style:normal;font-weight:300}.canvas-empty strong{font-size:clamp(11px,3.8cqw,15px)}.canvas-empty span{color:var(--designer-muted);font-size:clamp(8px,2.7cqw,11px)}.designer-layer{cursor:grab;transform-origin:50%;touch-action:none;border:1px solid #0000;min-width:8px;min-height:8px;display:block;position:absolute}.designer-layer:active{cursor:grabbing}.designer-layer.is-selected{border:2px solid var(--designer-indigo);box-shadow:0 0 0 1px #ffffffd1}.designer-layer.is-locked{cursor:not-allowed}.designer-layer img,.designer-layer--shape>span{width:100%;height:100%;display:block}.designer-layer img{pointer-events:none;object-fit:contain}.designer-layer--text{border-radius:2px;min-width:max-content;max-width:170%}.designer-layer--text>span{white-space:pre-wrap;overflow-wrap:anywhere;width:max-content;max-width:100%;line-height:1.22;display:block}.layer-resize-handle{z-index:5;background:var(--designer-indigo);cursor:nwse-resize;border:3px solid #fff;border-radius:50%;width:20px;height:20px;padding:0;position:absolute;bottom:-10px;right:-10px;box-shadow:0 2px 6px #1c174e47}.layer-name-tag{background:var(--designer-indigo);color:#fff;text-overflow:ellipsis;white-space:nowrap;border-radius:4px;max-width:180px;padding:3px 6px;font-size:clamp(7px,2cqw,10px);font-style:normal;font-weight:750;position:absolute;bottom:calc(100% + 6px);left:-2px;overflow:hidden}.case-safe-area{z-index:850;border-radius:inherit;pointer-events:none;border:1px dashed #5145cd8a;position:absolute;inset:3.5%}.case-safe-area>span{color:var(--designer-indigo);background:#fffc;border-radius:4px;padding:2px 4px;font-size:clamp(6px,2cqw,9px);font-weight:750;position:absolute;bottom:4px;right:4px}.case-camera-guide,.case-logo-guide{z-index:900;pointer-events:none;place-items:center;display:grid;position:absolute}.case-camera-guide{background:repeating-linear-gradient(45deg,#ef302f26 0 8px,#ffffff85 8px 16px);border:2px solid #ef302fcc}.case-camera-guide span,.case-logo-guide span{white-space:nowrap;background:#ffffffe0;border-radius:999px;padding:3px 5px;font-size:clamp(6px,2.2cqw,10px);font-weight:800}.case-camera-guide span{color:var(--designer-red)}.case-logo-guide{background:#ffffffad;border:2px dashed #267c58bf;border-radius:50%}.case-logo-guide span{color:var(--designer-green)}.canvas-footer{border-top:1px solid #cdcdd2bf;border-bottom:0;min-height:56px}.canvas-footer p{min-width:0;color:var(--designer-muted);text-overflow:ellipsis;white-space:nowrap;align-items:center;gap:8px;margin:0;font-size:10px;font-weight:650;display:flex;overflow:hidden}.canvas-footer>div{border:1px solid var(--designer-line);background:#fff;border-radius:9px;align-items:center;gap:4px;padding:4px;display:flex}.canvas-footer button{min-width:34px;min-height:34px;color:var(--designer-navy);background:0 0;border:0;border-radius:6px;padding:0 8px;font-size:11px;font-weight:800}.canvas-footer button:hover{background:#f0f0f5}.canvas-footer b{min-width:42px;color:var(--designer-navy);text-align:center;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px}.no-selection{min-height:150px;color:var(--designer-muted);text-align:center;border:1px dashed #ccc8d2;border-radius:10px;place-content:center;padding:22px 12px;display:grid}.no-selection i{color:var(--designer-indigo);font-size:27px;font-style:normal}.no-selection strong{color:var(--designer-navy);margin-top:8px;font-size:12px}.no-selection p{margin:5px 0 0;font-size:9px;line-height:1.55}.property-controls{gap:15px;display:grid}.two-fields{grid-template-columns:1fr 1fr;gap:10px;display:grid}.designer-field input[type=color]{padding:4px}.range-control{gap:7px;display:grid}.range-control>span,.position-controls>span{color:#4f4c58;justify-content:space-between;font-size:10px;font-weight:750;display:flex}.range-control>span b{color:var(--designer-indigo);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px}.range-control input[type=range]{width:100%;accent-color:var(--designer-indigo)}.position-controls{gap:8px;display:grid}.position-controls>div{grid-template-columns:repeat(4,1fr) 1.45fr;gap:5px;display:grid}.position-controls button,.layer-actions button{border:1px solid var(--designer-line);min-height:38px;color:var(--designer-navy);background:#fff;border-radius:7px;font-size:10px;font-weight:800}.position-controls button:hover,.layer-actions button:hover:not(:disabled){border-color:var(--designer-indigo);color:var(--designer-indigo)}.background-removal-card{background:#5145cd0d;border:1px solid #5145cd2e;border-radius:10px;gap:12px;padding:14px;display:grid}.background-removal-card>div{gap:3px;display:grid}.background-removal-card>div span{color:var(--designer-navy);font-size:12px;font-weight:850}.background-removal-card>div small,.background-removal-card>p{color:var(--designer-muted);font-size:9px;line-height:1.55}.background-removal-card>p{margin:0}.remove-background-button,.restore-background-button{border-radius:8px;min-height:42px;font-size:11px;font-weight:850}.remove-background-button{background:var(--designer-indigo);color:#fff;border:0}.remove-background-button:disabled{cursor:wait;opacity:.6}.restore-background-button{color:var(--designer-indigo);background:#fff;border:1px solid #5145cd4d}.layer-actions{grid-template-columns:repeat(4,1fr);gap:5px;display:grid}.layer-actions button:disabled{cursor:not-allowed;opacity:.38}.layer-actions button.is-danger{color:var(--designer-red);border-color:#ef302f47}.empty-layers{color:var(--designer-muted);margin:0;font-size:10px;line-height:1.7}.layer-list{gap:6px;display:grid}.layer-list>div{border:1px solid var(--designer-line);background:#fff;border-radius:8px;grid-template-columns:minmax(0,1fr) 32px 32px;align-items:center;gap:3px;min-height:51px;display:grid;overflow:hidden}.layer-list>div.is-selected{border-color:#5145cd61;border-left:3px solid var(--designer-indigo);background:#5145cd0f}.layer-list>div.is-hidden{opacity:.52}.layer-list button{min-height:42px;color:var(--designer-muted);background:0 0;border:0;padding:0;font-size:12px}.layer-main{text-align:left;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:8px;min-width:0;display:grid;padding:4px!important}.layer-main>i{border:1px solid var(--designer-line);width:38px;height:38px;color:var(--designer-indigo);background:#f3f2f1;border-radius:6px;place-items:center;font-style:normal;display:grid;overflow:hidden}.layer-main img{object-fit:cover;width:100%;height:100%}.layer-main>span{gap:2px;min-width:0;display:grid}.layer-main strong,.layer-main small{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.layer-main strong{color:var(--designer-navy);font-size:10px;font-weight:800}.layer-main small{color:var(--designer-muted);font-size:9px}.designer-file-input{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:fixed;overflow:hidden}.designer-mobile-tabs{display:none}@media (max-width:1240px){.designer-layout{grid-template-columns:246px minmax(400px,1fr) 286px}.designer-panel section{padding-left:14px;padding-right:14px}.designer-save-state{display:none}}@media (max-width:900px){.designer-shell{min-height:100svh;padding-bottom:calc(66px + env(safe-area-inset-bottom));overflow:auto}.designer-topbar{grid-template-columns:minmax(0,1fr) auto;min-height:58px;padding:6px 10px;position:sticky;top:0}.designer-topbar__brand{gap:8px}.designer-topbar__brand img{width:116px;height:38px}.designer-topbar__brand>span,.designer-topbar__brand div,.designer-topbar__history,.designer-save-state{display:none}.designer-export{min-height:42px;padding:0 13px;font-size:11px}.designer-layout{flex-direction:column;height:auto;min-height:calc(100svh - 124px);display:flex}.designer-canvas-column{flex:none;order:1;height:48svh;min-height:360px}.canvas-toolbar{min-height:46px;padding:5px 11px}.canvas-toolbar strong{font-size:11px}.canvas-toolbar span{display:none}.canvas-toolbar button{min-height:34px}.designer-viewport{padding:9px}.designer-artboard{max-width:88%;height:min(38svh,490px);max-height:94%}.canvas-footer{min-height:48px;padding:5px 10px}.canvas-footer p{max-width:48%;font-size:9px}.canvas-footer>div{padding:2px}.canvas-footer button{min-height:32px}.designer-panel{border:0;border-top:1px solid var(--designer-line);order:2;height:auto;min-height:calc(52svh - 58px);display:none;overflow:visible}.designer-mobile-assets .designer-assets,.designer-mobile-edit .designer-properties,.designer-mobile-layers .designer-properties{display:block}.designer-mobile-edit .layer-section,.designer-mobile-layers .property-section{display:none}.designer-panel section{padding:18px max(16px, env(safe-area-inset-left))}.designer-mobile-tabs{z-index:80;min-height:calc(64px + env(safe-area-inset-bottom));padding:5px max(8px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(8px, env(safe-area-inset-left));border-top:1px solid var(--designer-line);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#fcfbfaf5;grid-template-columns:repeat(3,1fr);display:grid;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -8px 28px #1d243e1c}.designer-mobile-tabs button{min-height:54px;color:var(--designer-muted);background:0 0;border:0;border-radius:8px;place-content:center;gap:1px;font-size:9px;font-weight:800;display:grid}.designer-mobile-tabs button i{font-size:20px;font-style:normal;line-height:1}.designer-mobile-tabs button.is-active{color:var(--designer-indigo);background:#5145cd14}}@media (max-width:440px){.designer-canvas-column{height:46svh;min-height:330px}.designer-artboard{height:min(35svh,430px)}.canvas-footer p{max-width:42%}.canvas-footer>div button:last-child{display:none}.two-fields{grid-template-columns:1fr}}@media (prefers-reduced-motion:reduce){.designer-shell *,.designer-shell :before,.designer-shell :after{scroll-behavior:auto!important;transition-duration:.01ms!important}}