:root{--bg:#eef3f7;--panel:#fff;--ink:#1f2a33;--muted:#7a8a98;--accent:#2b6cff;color:var(--ink);font-family:system-ui,-apple-system,Hiragino Kaku Gothic ProN,Noto Sans JP,sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);overscroll-behavior:none}.app{flex-direction:column;height:100%;display:flex}.app__header{background:var(--panel);border-bottom:1px solid #e3e9ee;flex:none;justify-content:space-between;align-items:center;gap:12px;padding:10px 16px;display:flex}.app__title{letter-spacing:.02em;margin:0;font-size:18px;font-weight:700}.app__headleft{align-items:center;gap:12px;min-width:0;display:flex}.app__headright{align-items:center;gap:14px;display:flex}.mapswitch{align-items:center;gap:6px;display:flex}.mapswitch__select{appearance:none;color:var(--ink);cursor:pointer;background:#f4f7fa url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237a8a98' stroke-width='1.5'/%3E%3C/svg%3E") right 10px center no-repeat;border:1px solid #dbe3ea;border-radius:9px;max-width:180px;padding:7px 26px 7px 12px;font-size:14px;font-weight:600}.mapswitch__add{width:34px;height:34px;color:var(--accent);cursor:pointer;background:#f4f7fa;border:1px solid #dbe3ea;border-radius:9px;font-size:18px;line-height:1}.mapswitch__add:hover{background:#eaeff4}.btn:disabled{opacity:.5;cursor:not-allowed}@media (width<=560px){.app__header{padding:8px 12px}.app__title{display:none}.mapswitch__select{max-width:120px;font-size:13px}.app__headright{gap:8px}.meter{min-width:96px}.meter__total{font-size:11px}.meter__word{display:none}.app__header .btn{white-space:nowrap;padding:8px 12px;font-size:13px}.app__footer{font-size:11px}.app__credit{display:none}}.app__canvas{touch-action:none;flex:auto;min-height:0;position:relative}.app__msg{color:var(--muted);justify-content:center;align-items:center;font-size:14px;display:flex;position:absolute;inset:0}.app__footer{background:var(--panel);color:var(--muted);border-top:1px solid #e3e9ee;flex:none;justify-content:space-between;align-items:center;gap:12px;padding:6px 16px;font-size:12px;display:flex}.app__credit{opacity:.85;font-size:11px}.meter{flex-direction:column;gap:4px;min-width:160px;display:flex}.meter__label{font-size:13px;line-height:1}.meter__count{color:var(--accent);font-size:18px;font-weight:800}.meter__total{color:var(--muted)}.meter__bar{background:#e3e9ee;border-radius:3px;height:6px;overflow:hidden}.meter__fill{background:linear-gradient(90deg,#2b6cff,#58c2a8);border-radius:3px;height:100%;transition:width .3s}.editor{z-index:5;touch-action:none;cursor:grab;background:#2b6cff0a;border:1.5px dashed #2b6cff8c;border-radius:6px;position:absolute}.editor:active{cursor:grabbing}.panel{z-index:20;background:var(--panel);border:1px solid #e0e7ed;border-radius:14px;width:min(420px,100% - 24px);padding:12px 14px;position:absolute;bottom:16px;left:50%;transform:translate(-50%);box-shadow:0 8px 28px #14283c29}.panel__head{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.panel__title{font-size:16px;font-weight:700}.panel__close{color:var(--muted);cursor:pointer;background:0 0;border:none;padding:0 4px;font-size:22px;line-height:1}.panel__body{flex-wrap:wrap;gap:8px;display:flex}.album{gap:8px;padding:2px 0 10px;display:flex;overflow-x:auto}.thumb{cursor:pointer;background:#f4f7fa;border:2px solid #0000;border-radius:9px;flex:none;width:58px;height:58px;padding:0;position:relative;overflow:hidden}.thumb img{object-fit:cover;width:100%;height:100%;display:block}.thumb--cover{border-color:var(--accent)}.thumb__del{color:#fff;cursor:pointer;background:#0000008c;border:none;border-radius:50%;justify-content:center;align-items:center;width:18px;height:18px;font-size:12px;line-height:1;display:flex;position:absolute;top:2px;right:2px}.thumb--add{color:var(--muted);border:2px dashed #cdd8e0;justify-content:center;align-items:center;font-size:22px;display:flex}.thumb--add:hover{background:#eef3f7}.panel__hint{color:var(--muted);margin:10px 0 0;font-size:11px}.btn{appearance:none;cursor:pointer;border:1px solid #0000;border-radius:10px;padding:9px 16px;font-size:14px;font-weight:600;transition:background .15s,border-color .15s}.btn--primary{background:var(--accent);color:#fff}.btn--primary:hover{background:#1f5be0}.btn--ghost{color:#46586a;background:#f4f7fa;border-color:#e0e7ed}.btn--ghost:hover{background:#eaeff4}