:root{
  --pink:#ff8fb1; --pink-d:#e4497c; --pink-l:#ffd7e4;
  --cream:#fff7f2; --ink:#43323a; --sub:#9c8892;
  --ok:#2fa36b; --ng:#d8455f; --card:#ffffff;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{overscroll-behavior-y:contain}
body{margin:0;padding:14px 14px 40px;background:var(--cream);color:var(--ink);
  font-family:"Hiragino Maru Gothic ProN","Hiragino Sans",system-ui,sans-serif;
  -webkit-text-size-adjust:100%}
header{display:flex;align-items:center;gap:9px;margin:2px 0 14px}
header img{width:34px;height:34px;border-radius:9px}
header h1{font-size:19px;margin:0;letter-spacing:.02em}
header span{font-size:11.5px;color:var(--sub);margin-left:auto}

.card{background:var(--card);border-radius:20px;padding:15px;margin-bottom:13px;
  box-shadow:0 3px 12px rgba(228,73,124,.09)}
.ttl{font-size:12.5px;font-weight:700;color:var(--pink-d);margin:0 0 11px;
  display:flex;align-items:center;gap:6px}
.ttl b{background:var(--pink-l);color:var(--pink-d);border-radius:20px;
  padding:2px 9px;font-size:11px}

label{display:block;font-size:12px;color:var(--sub);margin:0 0 5px}
input[type=text]{width:100%;padding:12px 13px;font-size:16px;border-radius:13px;
  border:2px solid var(--pink-l);background:#fffafc;font-family:inherit;color:var(--ink)}
input[type=text]:focus{outline:none;border-color:var(--pink)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:9px}

button{border:0;border-radius:14px;padding:14px;font-size:15.5px;font-weight:700;
  color:#fff;background:var(--pink);font-family:inherit;width:100%}
button:active{transform:scale(.985)}
button:disabled{background:#e6dade;color:#fff}
button.ghost{background:#fff;color:var(--pink-d);border:2px solid var(--pink-l)}
button.big{padding:17px;font-size:17px;border-radius:16px}
.btnrow{display:grid;grid-template-columns:1fr 1fr;gap:9px}

#stage{position:relative;border-radius:16px;overflow:hidden;background:#f0e8ea;
  touch-action:none;display:flex;justify-content:center;align-items:center}
#cv{display:block;max-width:100%;max-height:54vh;width:auto;height:auto}
#hint{position:absolute;left:0;right:0;bottom:0;padding:7px 10px;font-size:11.5px;
  color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.55));text-align:center;
  transition:opacity .5s;pointer-events:none}

.thumbs{display:flex;gap:8px;overflow-x:auto;padding:2px 0 6px;-webkit-overflow-scrolling:touch}
.thumb{position:relative;flex:0 0 auto;width:58px;height:78px;border-radius:11px;
  overflow:hidden;border:3px solid transparent;background:#eee}
.thumb.on{border-color:var(--pink)}
.thumb canvas,.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb i{position:absolute;top:2px;left:4px;font-size:10px;font-style:normal;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.7)}
.thumb .done{position:absolute;right:3px;bottom:3px;background:var(--ok);color:#fff;
  border-radius:9px;font-size:9px;padding:1px 5px}

.chips{margin:11px 0 0}
.chiprow{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:7px}
.chiprow .lab{font-size:11px;color:var(--sub);width:40px;flex:0 0 auto}
.chip.roll{background:var(--pink);color:#fff;border-color:var(--pink);font-weight:700}
.chip{background:#fff4f8;border:1.5px solid var(--pink-l);border-radius:20px;
  padding:5px 11px;font-size:11.5px;color:var(--pink-d)}

#bar{height:9px;border-radius:9px;background:var(--pink-l);overflow:hidden;margin:11px 0 8px}
#bar i{display:block;height:100%;width:0;background:var(--pink);transition:width .25s}
#status{font-size:12.5px;color:var(--sub);text-align:center;min-height:18px}
.note{font-size:11.5px;color:var(--sub);line-height:1.7;margin:9px 0 0}
.hide{display:none!important}
#src{position:fixed;top:0;left:0;width:2px;height:2px;opacity:.01;z-index:-1;pointer-events:none}

.saveGrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.saveGrid button{background:#2fa36b;padding:13px 4px;font-size:14px;border-radius:13px}
.saveGrid button.saved{background:#cfe9db;color:#2fa36b}

.saveGrid button.failed{background:#ffe6ea;color:#d8455f;border:2px solid #ffc2cc}