:root{
  --bg: #fff8f9;
  --card: #ffffff;
  --accent: #d95f80;
  --muted: #6b6b6b;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;color:#222;background:var(--bg)}
#app{display:flex;flex-direction:column;height:100vh;padding:12px;gap:10px}
.panel{background:var(--card);border-radius:12px;padding:10px;box-shadow:0 6px 18px rgba(0,0,0,0.06);display:flex;gap:10px;align-items:center}
#visual{flex:1;min-height:160px;justify-content:space-between}
.graphic{flex:1;display:flex;align-items:center;justify-content:center;max-height:60vh}
.btn{background:var(--accent);color:white;border:none;padding:10px 14px;border-radius:10px;font-weight:600;min-height:44px;min-width:44px}
.btn.small{padding:8px 10px;font-size:13px;background:#f7cbd6;color:#5a202f}
.btn.secondary{background:#fff;border:1px solid #eee;color:#333}
#info{flex:1;flex-direction:column;min-height:160px;justify-content:space-between}
#cards{display:flex;flex-direction:column;gap:8px;overflow:auto}
.card{padding:8px;border-radius:8px;background:linear-gradient(180deg,#fff 0,#fff);box-shadow:inset 0 -1px 0 rgba(0,0,0,0.03)}
.card h3{margin:0 0 6px 0;font-size:15px;color:#2b2b2b}
.card p, .card ul{margin:0;font-size:13px;color:var(--muted)}
ul{padding-left:18px}
#controls{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}
.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.35)}
.sheet{width:min(680px,92%);background:var(--card);padding:16px;border-radius:12px}
.hidden{display:none}
.meter{background:#f1f1f1;height:12px;border-radius:8px;overflow:hidden;margin:12px 0}
#m eterFill, #meterFill{background:linear-gradient(90deg,#ff9aa2,#ffdde1);width:0%;height:100%}
.row{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}
@media (max-width:520px){
  #app{padding:8px;gap:8px}
  .panel{padding:8px;border-radius:10px}
  .card h3{font-size:14px}
}