:root{
  --bg:#eef4f9;--card:#fff;--ink:#17233a;--muted:#718096;--line:#dce6ef;--blue:#1d7cf2;--blue2:#0f66d8;--danger:#d9485f;
  font-family:system-ui,-apple-system,"Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;color:var(--ink);background:var(--bg)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:linear-gradient(#f7fbff,#edf4f8);min-height:100vh}
button,input,select{font:inherit}
button{cursor:pointer}
.app-header{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.brand{display:flex;gap:10px;align-items:center}.brand-mark{width:38px;height:38px;border:5px double var(--ink);border-radius:50%;display:grid;place-items:center;font-size:12px}.brand h1{font-size:18px;margin:0}.brand p{font-size:11px;color:var(--muted);margin:2px 0 0}.icon-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:white;font-weight:800;color:var(--ink)}
.page{width:min(760px,100%);margin:auto;padding:12px 12px 100px}.card,.preview-card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:16px;margin:12px 0;box-shadow:0 8px 28px rgba(27,55,90,.07)}
.sticky-preview{position:sticky;top:72px;z-index:30}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.section-head>div{display:flex;align-items:center;gap:9px}.section-head h2{font-size:17px;margin:0}.section-head.compact{margin-bottom:8px}.eyebrow{font-size:10px;font-weight:800;color:var(--blue);letter-spacing:.12em;display:block}.badge{display:grid;place-items:center;width:27px;height:27px;border-radius:9px;background:var(--blue);color:#fff;font-weight:800}
.canvas-wrap{display:grid;place-items:center;min-height:280px;background:radial-gradient(circle at 50% 35%,#fff 0,#f4f8fc 55%,#eef3f7 100%);border-radius:16px;overflow:hidden;touch-action:none}#manholeCanvas{width:min(72vw,420px);height:auto;max-width:100%;display:block;touch-action:none}.hint{font-size:12px;color:var(--muted);line-height:1.6;margin:8px 0 0}.top-hint{margin-bottom:12px}.overlay-hint{margin-top:2px;margin-bottom:8px}
.edit-target-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}.edit-target-status{font-size:12px;font-weight:700;color:#25517d;background:#f5f9ff;border:1px solid #cfe0f6;border-radius:999px;padding:8px 12px}
.upload-btn,.primary-btn,.secondary-btn,.ghost-btn,.danger-btn,.primary-small,.section-lock-btn{border-radius:12px;border:1px solid var(--line);padding:11px 14px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:6px;background:#fff;color:var(--ink)}.upload-btn{width:100%;border-style:dashed;background:#f8fbff}.primary-btn,.primary-small{background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff;border-color:transparent}.primary-small{padding:9px 12px;font-size:13px}.secondary-btn{background:#f5f9ff;border-color:#cfe0f6;color:#25517d}.ghost-btn{background:#fff}.danger-btn{background:#fff3f5;border-color:#f4c7d0;color:#b22943}
.section-lock-btn{padding:8px 12px;font-size:12px;background:#f5f9ff;border-color:#cfe0f6;color:#25517d;min-width:88px}.section-lock-btn.active{background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff;border-color:transparent}
.control-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}.control-grid label{display:grid;grid-template-columns:auto auto;gap:6px 10px;align-items:center;font-size:13px;font-weight:700;color:#516278}.control-grid input[type=range]{grid-column:1/-1;width:100%}.control-grid output{text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}.row-actions{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:12px;flex-wrap:wrap}.color-row,.ring-options label,.two-col label,.text-body>label{font-size:13px;font-weight:700;color:#516278}.color-row{display:flex;align-items:center;gap:8px}.color-row input,.ring-options input,.text-color{width:44px;height:36px;border:1px solid var(--line);border-radius:10px;padding:2px;background:white}
.overlay-list{display:flex;gap:8px;overflow:auto;padding-bottom:8px}.overlay-chip{min-width:88px;border:2px solid transparent;border-radius:14px;background:#f6f9fc;padding:8px;text-align:center}.overlay-chip.active{border-color:var(--blue);background:#eef6ff}.overlay-chip.editing{box-shadow:0 0 0 2px rgba(29,124,242,.15) inset}.overlay-chip img{width:60px;height:60px;object-fit:contain;background:#fff;border-radius:10px;border:1px solid var(--line)}.overlay-chip div{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.overlay-controls{margin-top:10px;padding:12px;border-radius:14px;background:#f8fbfe;border:1px solid var(--line)}.overlay-controls .toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.empty-state{text-align:center;color:var(--muted);font-size:13px}
.ring-options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.ring-options label{display:flex;align-items:center;justify-content:space-between;background:#f8fbfe;border:1px solid var(--line);padding:10px;border-radius:12px}
.text-editors{display:grid;gap:10px}.text-editor{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fbfdff}.text-editor summary{list-style:none;display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:8px;padding:12px;cursor:pointer}.text-editor summary::-webkit-details-marker{display:none}.slot-dot{width:10px;height:10px;border-radius:50%;background:var(--blue)}.summary-text{justify-self:end;color:var(--muted);font-size:12px;max-width:45vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.text-body{border-top:1px solid var(--line);padding:12px;display:grid;gap:12px}.text-body>label{display:grid;gap:6px}.text-body input[type=text],.text-body select{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px;background:white;color:var(--ink)}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:10px}.two-col label{display:grid;gap:6px}.compact-controls{margin-top:0}.toggle{display:flex!important;grid-template-columns:none!important;align-items:center;gap:8px!important;color:var(--ink)!important}.toggle input{accent-color:var(--blue)}
.export-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.export-grid .primary-btn{grid-column:1/-1}.file-label{cursor:pointer}.export-card .toggle{margin-top:12px}
.lockable[data-locked="true"] .guard-note{display:block}.guard-note{display:none;font-size:12px;color:var(--muted);background:#f8fbfe;border:1px dashed var(--line);border-radius:12px;padding:8px 10px;margin-bottom:10px}.lockable[data-locked="true"] input[type=range],.lockable[data-locked="true"] input[type=color],.lockable[data-locked="true"] select{pointer-events:none;opacity:.45}
.floating-preview{position:fixed;top:76px;right:10px;z-index:60;background:rgba(255,255,255,.97);border:1px solid var(--line);border-radius:16px;padding:8px;box-shadow:0 12px 36px rgba(15,23,42,.18);width:130px}.floating-preview.hidden{display:none}.floating-label{font-size:11px;font-weight:700;color:#516278;text-align:center;margin-bottom:6px}#floatingCanvas{width:100%;height:auto;display:block;border-radius:12px;background:#fff}body.keyboard-open .floating-preview{display:block}
#helpDialog,#previewDialog{border:0;padding:0;background:transparent}.dialog-card{width:min(92vw,480px);background:#fff;border-radius:20px;padding:18px;box-shadow:0 30px 90px rgba(0,0,0,.25)}.dialog-card h2{margin-top:0}.dialog-card ol{padding-left:20px;line-height:1.8}.dialog-card .primary-btn{width:100%}.preview-dialog::backdrop,#helpDialog::backdrop{background:rgba(8,15,30,.72)}.preview-full{width:min(96vw,900px);background:#fff;border-radius:20px;padding:14px;position:relative}.preview-full canvas{width:100%;height:auto;display:block}.close-btn{position:absolute;right:12px;top:12px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(15,23,42,.9);color:#fff;font-size:25px;z-index:2}
@media(max-width:560px){.control-grid,.export-grid{grid-template-columns:1fr}.ring-options{grid-template-columns:1fr}.two-col{grid-template-columns:1fr}.brand p{display:none}.section-head h2{font-size:16px}.page{padding-inline:9px}.card,.preview-card{border-radius:16px;padding:13px}.sticky-preview{top:68px}.canvas-wrap{min-height:210px}#manholeCanvas{width:min(54vw,250px)}.preview-card .hint{font-size:11px}.export-grid .primary-btn{grid-column:auto}.floating-preview{top:70px;right:8px;width:118px}.edit-target-bar{flex-direction:column;align-items:flex-start}.edit-target-status{padding:7px 10px}}