/* Snap Coach: bright surfaces, restrained depth, one clear action. */
body:not([data-theme=dark]) { --paper:#f4f9fa; --line:#d2e1e3; --muted:#4e666a; background:radial-gradient(ellipse at 100% 0%,#c4eef28a,transparent 42%),var(--paper); }
body[data-theme=dark] { background:radial-gradient(ellipse at 100% 0%,#24556270,transparent 45%),var(--paper); }
.room-tile,.first-room-card,.auth-card,#active-step { box-shadow:0 10px 28px #173c4710,inset 0 1px #ffffffaa; }
#active-step { position:relative;border:1px solid #8cb8c0; background:linear-gradient(150deg,#ffffff,#f4fbfc);color:#213b40; }
#active-step h2 { letter-spacing:-.035em; }
#active-step p { color:#38585e; }
#active-step .active-step-photo { border:1px solid #d3e6e9;box-shadow:inset 0 1px #fff; }
#do-step,.reset-cta,.main-action { background:linear-gradient(150deg,#ffd0c6,#eca598);color:#263b3e;border:1px solid #d98c80;box-shadow:inset 0 1px #fff9,0 5px 14px #a7574225;transition:transform .15s,box-shadow .15s; }
#do-step:hover,.reset-cta:hover { box-shadow:inset 0 1px #fff9,0 7px 20px #a7574238; }
#do-step:active,.reset-cta:active { transform:translateY(1px); }
.guide-progress progress { overflow:hidden;border-radius:100px;height:10px;background:#dbe9eb; }
.guide-progress progress::-webkit-progress-bar { background:#dbe9eb;border-radius:100px; }
.guide-progress progress::-webkit-progress-value { border-radius:100px;background:linear-gradient(90deg,#126573,#43a9b7);box-shadow:0 0 10px #43a9b755; }
.coach-home-card { background:linear-gradient(135deg,#e9fbfd,#c4eef2);border:1px solid #9ccbd1;box-shadow:inset 0 1px #fff,0 10px 28px #173c4710; }
.clean-saved-card { border:1px solid #b3d8de;box-shadow:inset 0 1px #fff,0 28px 90px #091c3b50; }
.saved-symbol { border:5px solid #e0f9f8;background:linear-gradient(145deg,#e4fbfc,#a6dce0);color:#155762;box-shadow:0 0 0 1px #81bac4,0 8px 24px #329dad25;width:82px;height:82px; }
body[data-theme=dark] #active-step { background:linear-gradient(150deg,#29454a,#213336);color:#f2fbfc;border-color:#55828a; }
body[data-theme=dark] #active-step p { color:#d1e8ec; }
body[data-theme=dark] .coach-home-card { background:linear-gradient(135deg,#294b51,#213c42);border-color:#55828a; }
body[data-theme=dark] .coach-home-card p { color:#d1e8ec; }
@media(prefers-reduced-motion:reduce){#do-step,.reset-cta,.main-action{transition:none}}
.coach-attachment-controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:16px 0 8px}
.coach-attachment-controls small{flex-basis:100%;color:var(--muted,#53666c);font-size:.8rem}
.coach-attachment-preview{display:flex;gap:12px;align-items:center;padding:10px;margin:8px 0;border:1px solid #a7ced3;border-radius:14px;background:var(--surface,#eef9fa)}
.coach-attachment-preview[hidden]{display:none}
.coach-attachment-preview img{width:84px;height:84px;object-fit:contain;border-radius:8px;background:#dae7e9}
.coach-attachment-preview p{font-size:.85rem;margin:0 0 6px}
.coach-message-photo{margin:10px 0 0;display:grid;gap:6px;justify-items:start}
.coach-attached-image{display:block;max-width:100%;width:260px;max-height:320px;object-fit:contain;border-radius:12px;background:#dae7e9}
.coach-message-photo .text-button{font-size:.8rem;min-height:40px}
body[data-theme=dark] .coach-attachment-preview{background:#213c42;border-color:#55828a;color:#f2fbfc}
body[data-theme=dark] .coach-attachment-controls small{color:#d1e8ec}

/* Keep saved-visit text and both photos usable on narrow phones. */
@media(max-width:420px){.history-card{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.history-card>div,.history-card>button{grid-column:1/-1}.history-card>button{justify-self:start}.history-card>img{min-width:0}}

@media(max-width:420px){.room-row{display:grid;grid-template-columns:minmax(0,1fr);overflow:visible}.room-row .room-tile{width:100%;min-width:0;max-width:none}.room-row .room-tile .small-action{max-width:100%;white-space:normal}}

.keep-app { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:24px; padding:18px; border:1px solid var(--line, #d8dfda); border-radius:20px; background:var(--card); }
.keep-app[hidden] { display:none; }
.keep-app p { margin:6px 0 0; font-size:.88rem; line-height:1.45; }
.keep-app > div:last-child { display:flex; flex-wrap:wrap; gap:8px; flex-shrink:0; }
@media(max-width:600px) { .keep-app { align-items:stretch; flex-direction:column; } }