:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;color:#0f172a;--panel:#fff;--panel-soft:#f8fafc;--line:#cbd5e1;--line-strong:#64748b;--text:#0f172a;--muted:#64748b;--primary:#0f766e;--primary-dark:#115e59;--danger:#dc2626;--warning:#d97706;--accent:#2563eb;--radius:8px;background:#e2e8f0;font-family:Inter,Segoe UI,Hiragino Kaku Gothic ProN,Yu Gothic,Meiryo,system-ui,sans-serif}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0}body{overflow:hidden}body.is-tool-dragging,body.is-tool-dragging *{cursor:copy!important}button,input,select,textarea{font:inherit}button{border:1px solid var(--line);min-height:34px;color:var(--text);cursor:pointer;white-space:nowrap;background:#fff;border-radius:6px;justify-content:center;align-items:center;gap:6px;padding:7px 10px;display:inline-flex}button:hover{border-color:var(--line-strong);background:#f8fafc}button.primary,.primary{color:#fff;background:var(--primary);border-color:var(--primary-dark)}button.primary:hover{background:var(--primary-dark)}button.danger,.danger{color:#fff;background:var(--danger);border-color:#991b1b}button:disabled{opacity:.5;cursor:not-allowed}input,select,textarea{border:1px solid var(--line);min-height:34px;color:var(--text);background:#fff;border-radius:6px;width:100%;padding:7px 9px}textarea{resize:vertical;min-height:72px}.app{width:100vw;height:100dvh}.desktop-layout{background:#e2e8f0;grid-template-columns:260px minmax(520px,1fr);display:grid}.mobile-layout{background:#e2e8f0;grid-template-rows:54px 1fr 66px;display:grid}.desktop-sidebar,.coach-sidebar,.right-panel{background:var(--panel);border-right:1px solid var(--line);min-height:0;padding:12px;overflow:auto}.coach-sidebar{flex-direction:column;gap:10px;padding:12px;display:flex}.coach-title{padding:4px 2px 8px}.coach-title strong{font-size:17px;display:block}.coach-title span{color:var(--muted);margin-top:3px;font-size:12px;display:block}.coach-section{border:1px solid var(--line);background:#fff;border-radius:8px;padding:10px}.coach-section h2{margin:0 0 8px;font-size:13px}.coach-section label{color:var(--muted);gap:5px;margin-top:8px;font-size:12px;font-weight:800;display:grid}.palette-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.palette-list,.job-palette{gap:7px;display:grid}.palette-chip,.job-palette-chip{text-align:left;white-space:normal;background:#f8fafc;border-color:#cbd5e1;justify-content:flex-start;min-height:48px}.palette-chip strong{font-size:13px;display:block}.palette-chip span{color:var(--muted);font-size:11px;display:block}.job-palette-chip span{border-radius:999px;justify-content:center;align-items:center;width:30px;height:30px;margin-right:7px;font-weight:800;display:inline-flex}.save-section{margin-top:auto}.right-panel{border-right:0;border-left:1px solid var(--line);flex-direction:column;gap:10px;display:flex}.sidebar-title{align-items:center;gap:10px;padding:10px 8px 14px;display:flex}.sidebar-title strong{font-size:18px;display:block}.sidebar-title span,.template-note span,.section-heading small{color:var(--muted);font-size:12px;display:block}.panel-section{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel-soft);margin-bottom:10px;padding:10px}.panel-section.compact{margin:0 0 12px}.section-heading,.modal-header,.bottom-sheet-header{justify-content:space-between;align-items:center;gap:8px;margin-bottom:9px;font-weight:800;display:flex}.section-heading{justify-content:flex-start}.field-row{grid-template-columns:94px minmax(0,1fr);align-items:center;gap:8px;margin:8px 0;font-size:13px;display:grid}.field-row.multiline{align-items:start}.button-row{grid-template-columns:1fr 1fr;gap:7px;margin:7px 0;display:grid}.wide-action{width:100%;margin-top:7px}.tool-grid{grid-template-columns:1fr 1fr;gap:7px;display:grid}.tool-grid button{justify-content:center;min-width:0;font-size:12px}.coach-shortcuts{background:#ecfdf5;border-color:#0f766e59}.coach-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}.coach-grid button{background:#fff;border-color:#0f766e59;min-height:46px;font-weight:800}.search-field{margin-bottom:8px;display:block;position:relative}.search-field svg{color:var(--muted);position:absolute;top:9px;left:9px}.search-field input{padding-left:31px}.preset-list,.layer-list{gap:6px;max-height:300px;margin-top:8px;display:grid;overflow:auto}.preset-row{text-align:left;justify-content:space-between;min-height:42px}.preset-main{min-width:0}.preset-main span,.layer-name span{text-overflow:ellipsis;display:block;overflow:hidden}.preset-main small,.layer-name small{color:var(--muted);font-size:11px;display:block}.job-grid{grid-template-columns:1fr 1fr;gap:6px;max-height:260px;display:grid;overflow:auto}.job-grid button{justify-content:flex-start;min-width:0;font-size:12px}.job-chip{border-radius:50%;flex:0 0 31px;justify-content:center;align-items:center;min-width:31px;height:31px;font-size:12px;font-weight:800;display:inline-flex}.editor-main{grid-template-rows:auto 1fr;min-width:0;min-height:0;display:grid}.desktop-toolbar{border-bottom:1px solid var(--line);background:#f8fafc;align-items:center;gap:7px;padding:9px 10px;display:flex;overflow-x:auto}.desktop-toolbar button.is-active{color:#fff;background:var(--accent);border-color:#1d4ed8}.toolbar-zoom{text-align:center;min-width:52px;font-weight:800}.switch-label,.compact-field{white-space:nowrap;align-items:center;gap:7px;min-height:34px;font-size:13px;display:inline-flex}.switch-label input{width:auto;min-height:auto}.compact-field input[type=color]{width:44px;padding:2px}.canvas-shell{background-color:#e2e8f0;background-image:linear-gradient(90deg,#0f172a0d 1px,#0000 1px),linear-gradient(0deg,#0f172a0d 1px,#0000 1px),none;background-position:0 0,0 0,0 0;background-repeat:repeat,repeat,repeat;background-size:18px 18px;background-attachment:scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box;min-height:0;position:relative;overflow:hidden}.canvas-scroll-region{touch-action:none;position:absolute;inset:0;overflow:hidden}.diagram-svg{transform-origin:0 0;touch-action:none;-webkit-user-select:none;user-select:none;position:absolute;top:0;left:0;box-shadow:0 10px 24px #0f172a2e}.canvas-status{z-index:4;gap:8px;display:flex;position:absolute;bottom:12px;left:12px}.canvas-status span{border:1px solid var(--line);background:#ffffffe6;border-radius:999px;padding:4px 9px;font-size:12px;font-weight:700}.quick-edit-bar{z-index:8;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffffff5;border:1px solid #0f766e59;border-radius:8px;grid-template-columns:minmax(130px,1fr) minmax(170px,1.2fr) minmax(250px,1.6fr) auto auto;align-items:center;gap:8px;width:min(760px,100% - 28px);padding:8px;display:grid;position:absolute;top:14px;left:50%;transform:translate(-50%);box-shadow:0 16px 36px #0f172a33}.quick-edit-title{min-width:0}.quick-edit-title strong{white-space:nowrap;text-overflow:ellipsis;font-size:14px;display:block;overflow:hidden}.quick-edit-title span{color:#b45309;margin-top:2px;font-size:12px;font-weight:800;display:inline-block}.quick-label{color:var(--muted);grid-template-columns:48px minmax(0,1fr);align-items:center;gap:6px;font-size:12px;font-weight:800;display:grid}.quick-label input{min-height:38px}.quick-control{color:var(--muted);grid-template-columns:auto 38px minmax(82px,1fr) 38px;align-items:center;gap:6px;font-size:12px;font-weight:800;display:grid}.quick-control input[type=range]{min-height:38px;padding:0}.quick-control button,.quick-actions button,.direction-buttons button{min-width:38px;min-height:38px;padding:6px}.direction-control{grid-template-columns:auto 38px auto 38px}.direction-buttons{grid-template-columns:repeat(4,38px);gap:4px;display:grid}.direction-buttons button.active{color:#fff;background:var(--primary);border-color:var(--primary-dark)}.quick-swatches{gap:5px;display:flex}.quick-swatches button{border:2px solid #fff;width:32px;min-width:32px;height:32px;min-height:32px;box-shadow:0 0 0 1px #0f172a38}.quick-actions{gap:6px;display:flex}.context-menu{z-index:30;border:1px solid var(--line-strong);border-radius:var(--radius);background:#fff;gap:5px;width:170px;padding:8px;display:grid;position:fixed;box-shadow:0 16px 30px #0f172a38}.context-menu button{justify-content:flex-start}.context-title{padding:3px 4px;font-size:13px;font-weight:800}.phase-tabs{border-top:1px solid var(--line);background:#fff;grid-template-columns:1fr auto;gap:8px;padding:9px 10px;display:grid}.phase-list{align-items:center;gap:6px;display:flex;overflow-x:auto}.phase-tab.active{color:#fff;background:var(--primary);border-color:var(--primary-dark)}.phase-actions{gap:6px;display:flex}.phase-meta{grid-column:1/-1;grid-template-columns:160px 160px minmax(180px,1fr);gap:8px;display:grid}.phase-meta label,.template-form label,.template-size-row label{color:var(--muted);gap:4px;font-size:12px;font-weight:700;display:grid}.layer-row{grid-template-columns:minmax(0,1fr) 34px 34px;align-items:center;gap:5px;display:grid}.layer-row.selected .layer-name{border-color:var(--primary);background:#ccfbf1}.layer-name{justify-content:flex-start;min-width:0}.properties-panel{overflow:auto}.advanced-properties{border:1px solid var(--line);background:#fff;border-radius:6px;margin-top:8px;padding:0 8px 8px}.advanced-properties summary{cursor:pointer;min-height:40px;color:var(--primary-dark);align-items:center;font-weight:800;display:flex}.empty-note,.template-note{color:var(--muted);font-size:13px;line-height:1.5}.file-button{border:1px dashed var(--line-strong);min-height:42px;color:var(--primary-dark);cursor:pointer;border-radius:6px;justify-content:center;align-items:center;margin-top:8px;padding:8px;font-weight:800;display:flex}.file-button input{display:none}.modal-backdrop,.bottom-sheet-backdrop{z-index:50;background:#0f172a73;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.template-selector,.export-dialog{border-radius:var(--radius);border:1px solid var(--line);background:#fff;width:min(920px,100vw - 32px);max-height:min(760px,100dvh - 32px);padding:16px;overflow:auto;box-shadow:0 18px 50px #0f172a47}.modal-header h2,.bottom-sheet-header h2{margin:0;font-size:20px}.template-form{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.template-size-row{grid-template-columns:1fr 1fr;gap:10px;display:grid}.template-pick-list{margin-top:14px}.template-pick-list h3{margin:0 0 8px;font-size:15px}.attack-checkbox-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;display:grid}.check-card{justify-content:space-between;min-height:42px}.check-card.active{border-color:var(--primary);color:var(--primary-dark);background:#ccfbf1}.modal-actions,.export-actions{flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:16px;display:flex}.dialog-grid{gap:10px;display:grid}.mobile-header{padding:calc(env(safe-area-inset-top) + 6px) 8px 6px;border-bottom:1px solid var(--line);background:#fff;grid-template-columns:98px 1fr 68px;align-items:center;gap:8px;display:grid}.mobile-header div{text-align:center;min-width:0}.mobile-header strong,.mobile-header span{white-space:nowrap;text-overflow:ellipsis;display:block;overflow:hidden}.mobile-header strong{font-size:14px}.mobile-header span{color:var(--muted);font-size:12px}.mobile-toolbar{padding:6px 6px calc(env(safe-area-inset-bottom) + 6px);border-top:1px solid var(--line);background:#fff;grid-template-columns:repeat(6,1fr);gap:4px;display:grid}.mobile-toolbar button{flex-direction:column;gap:2px;min-height:52px;padding:5px;font-size:11px}.mobile-toolbar button.active{color:#fff;background:var(--primary);border-color:var(--primary-dark)}.bottom-sheet-backdrop{pointer-events:none;background:#0f172a40;align-items:flex-end}.bottom-sheet{pointer-events:auto;border-top:1px solid var(--line);width:100%;max-height:min(74dvh,680px);padding:12px 12px calc(env(safe-area-inset-bottom) + 12px);background:#fff;border-radius:8px 8px 0 0;overflow:hidden;box-shadow:0 -16px 36px #0f172a3d}.bottom-sheet-content{max-height:calc(min(74dvh,680px) - 72px);overflow:auto}.mobile-add-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mobile-layout .editor-main{grid-template-rows:1fr}.mobile-layout .canvas-status{flex-wrap:wrap;bottom:10px;left:10px}.quick-edit-bar.mobile{grid-template-columns:1fr;gap:7px;width:calc(100% - 20px);padding:8px;top:10px}.quick-edit-bar.mobile .quick-edit-title{display:none}.quick-edit-bar.mobile .quick-label{grid-template-columns:52px minmax(0,1fr)}.quick-edit-bar.mobile .quick-control{grid-template-columns:52px 42px minmax(100px,1fr) 42px}.quick-edit-bar.mobile .direction-control{grid-template-columns:52px 42px auto 42px}.quick-edit-bar.mobile .direction-buttons{grid-template-columns:repeat(4,42px)}.quick-edit-bar.mobile .quick-swatches,.quick-edit-bar.mobile .quick-actions{justify-content:center}.mobile-layout button,.mobile-layout input,.mobile-layout select,.mobile-layout textarea{min-height:44px}.mobile-layout .field-row{grid-template-columns:104px minmax(0,1fr)}@media (width<=767px){.template-selector{border-radius:0;width:100vw;height:100dvh;max-height:none}.template-form,.attack-checkbox-grid,.phase-meta{grid-template-columns:1fr}.phase-tabs.compact{border-top:0;padding:0;display:block}.phase-actions{flex-wrap:wrap;margin:8px 0}.job-grid,.tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.quick-edit-bar{max-height:42dvh;overflow:auto}}@media (width<=1180px){.quick-edit-bar:not(.mobile){grid-template-columns:minmax(110px,1fr) minmax(160px,1fr) minmax(220px,1.4fr)}.quick-edit-bar:not(.mobile) .quick-swatches,.quick-edit-bar:not(.mobile) .quick-actions{grid-column:span 1}}