:root { --cream: #faf4ec; --blush: #f3cbd3; --mint: #cfe7dd; --wood: #e5cfae; --brass: #c9a15a; --ink: #4a323b; --muted: #9a7a84; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font: 15px/1.4 "Segoe UI", system-ui, -apple-system, sans-serif; color: var(--ink); background: var(--cream); display: flex; flex-direction: column; overflow: hidden; }
.bar { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: #fff; border-bottom: 1px solid #eadfd3; }
.brand { font-weight: 700; letter-spacing: .2px; } .brand span { font-weight: 400; color: var(--muted); margin-left: 6px; }
.grow { flex: 1; } .muted { color: var(--muted); font-size: 13px; }
button, a.primary { font: inherit; border: 1px solid #e3d4c8; background: #fff; color: var(--ink); padding: 7px 14px; border-radius: 999px; cursor: pointer; text-decoration: none; }
button:disabled { opacity: .4; cursor: default; }
button.primary, a.primary { background: #d9627f; border-color: #d9627f; color: #fff; font-weight: 600; }
button.ghost { background: transparent; }
main { flex: 1; display: grid; grid-template-columns: 220px 1fr 150px; min-height: 0; }
.panel { padding: 14px; overflow: auto; background: #fff8f1; border-right: 1px solid #eadfd3; } .panel.right { border-right: 0; border-left: 1px solid #eadfd3; }
.panel h2 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.tools { display: grid; gap: 8px; }
.tool { text-align: left; } .tool.on { background: var(--blush); border-color: #e4a6b4; font-weight: 600; }
.shelf { margin-top: 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bottle { padding: 6px 4px 6px; display: grid; justify-items: center; gap: 3px; border-radius: 10px; }
.bottle.on { border-color: #d9627f; background: #fff0f3; }
.cap { width: 14px; height: 10px; background: #2b2630; border-radius: 3px 3px 0 0; }
.glass { width: 26px; height: 30px; border-radius: 5px 5px 8px 8px; background: var(--c); position: relative; overflow: hidden; box-shadow: inset 2px 0 4px rgba(255,255,255,.5), inset -3px 0 5px rgba(0,0,0,.18); }
.fin.matte { position: absolute; inset: 0; background: rgba(255,255,255,.12); }
.fin.glitter { position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,.9) 0 1px, transparent 1.5px), radial-gradient(circle, rgba(255,250,220,.8) 0 .8px, transparent 1.2px); background-size: 7px 7px, 5px 5px; background-position: 0 0, 3px 2px; }
.fin.gloss { position: absolute; left: 4px; top: 3px; width: 5px; height: 20px; border-radius: 3px; background: rgba(255,255,255,.55); }
.lbl { font-size: 10px; color: var(--muted); }
.hint { margin-top: 16px; font-size: 13px; color: var(--muted); }
.stagebox { position: relative; min-width: 0; min-height: 0; background: #eadbcd; }
#stage { display: block; touch-action: none; }
.float { position: absolute; left: 14px; top: 14px; }
.toast { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%) translateY(10px); background: rgba(74,50,59,.9); color: #fff; padding: 8px 14px; border-radius: 999px; opacity: 0; transition: .2s; pointer-events: none; }
.toast.on { opacity: 1; transform: translateX(-50%); }
.nails { display: grid; gap: 8px; }
.nail { text-transform: capitalize; } .nail.on { background: var(--blush); border-color: #e4a6b4; font-weight: 600; }
dialog { border: 0; border-radius: 16px; padding: 14px; max-width: 92vw; box-shadow: 0 20px 60px rgba(60,30,40,.3); }
dialog::backdrop { background: rgba(60,30,40,.45); }
dialog img { display: block; max-width: 80vw; max-height: 70vh; border-radius: 10px; }
dialog .row { display: flex; gap: 10px; justify-content: flex-end; margin-top: 12px; }
@media (max-width: 800px) { main { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; } .panel { padding: 8px 10px; } .tools, .nails { grid-auto-flow: column; overflow: auto; } }