:root { --bg:#f5f2ec; --card:#fffaf2; --ink:#222; --muted:#6d675f; --accent:#436b58; --line:#ddd3c5; --danger:#9b2f2f; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, sans-serif; background:var(--bg); color:var(--ink); }
.hidden { display:none !important; }
.app-shell { min-height:100vh; }
.login-screen { min-height:100vh; display:grid; place-items:center; padding:22px; background:radial-gradient(circle at top left, #fff 0, #f5f2ec 38%, #e9dfd1 100%); }
.login-card { width:min(440px, 100%); background:#fffaf2; border:1px solid var(--line); border-radius:24px; padding:32px; box-shadow:0 24px 80px #00000022; display:grid; gap:14px; text-align:center; }
.login-card h1 { font-size:28px; line-height:1.15; }
.login-card p { margin:0 0 6px; }
.login-card input { text-align:center; font-size:18px; background:#fff; }
.login-icon { width:62px; height:62px; border-radius:20px; background:#436b5818; display:grid; place-items:center; margin:0 auto; font-size:32px; }
.error { min-height:18px; color:var(--danger); font-weight:700; }
header { display:flex; gap:24px; align-items:center; justify-content:space-between; padding:28px; background:#fff; border-bottom:1px solid var(--line); }
h1 { margin:0; font-size:28px; } p { color:var(--muted); }
.header-actions { display:flex; gap:10px; align-items:center; }
.inline-form { display:flex; gap:10px; }
input, textarea, button { font:inherit; border:1px solid var(--line); border-radius:12px; padding:11px 13px; min-width:0; }
textarea { width:100%; min-height:90px; resize:vertical; }
button { cursor:pointer; background:var(--accent); color:white; border-color:var(--accent); font-weight:700; touch-action:manipulation; }
button.secondary { background:#fff; color:var(--ink); border-color:var(--line); }
button.danger { background:var(--danger); border-color:var(--danger); }
main { display:grid; grid-template-columns:330px 1fr; gap:22px; padding:22px; }
aside, .panel { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:18px; box-shadow:0 8px 24px #0000000c; }
#rooms { display:grid; gap:10px; }
.room-card { display:grid; grid-template-columns:72px 1fr; gap:12px; align-items:center; text-align:left; width:100%; min-height:74px; background:#fff; color:var(--ink); border-color:var(--line); }
.room-card.active { outline:3px solid #436b5833; border-color:var(--accent); }
.room-card span { display:block; color:var(--muted); font-size:13px; margin-top:3px; }
.room-card small { display:block; color:var(--accent); font-size:12px; margin-top:5px; }
.thumb { width:72px; height:56px; overflow:hidden; border-radius:10px; border:1px solid var(--line); background:linear-gradient(135deg, #eee5d8, #f8f3ea); position:relative; }
.thumb::before { content:""; position:absolute; inset:15px 18px; border:2px solid #9c9386; border-radius:7px; opacity:.55; }
.thumb::after { content:""; position:absolute; width:8px; height:8px; border-radius:50%; background:#9c9386; top:21px; right:23px; opacity:.55; }
.thumb img { display:none; width:100%; height:100%; object-fit:cover; }
.thumb.has-photo::before, .thumb.has-photo::after { display:none; }
.thumb.has-photo img { display:block; }
.room-head { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; }
.room-title { display:flex; gap:16px; align-items:center; min-width:0; }
.room-cover { width:156px; aspect-ratio:4/3; object-fit:cover; border-radius:12px; border:1px solid var(--line); background:#e8dfd2; flex:0 0 auto; }
.empty-cover { display:grid; place-items:center; padding:14px; color:var(--muted); text-align:center; font-weight:700; }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:18px; }
.card { background:#fff; border:1px solid var(--line); border-radius:16px; padding:16px; }
.todo { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:start; padding:12px 0; border-bottom:1px solid var(--line); }
.todo:last-child { border-bottom:0; }
.todo.done strong, .todo.done p { text-decoration: line-through; color:var(--muted); }
.todo p { margin:4px 0 0; white-space:pre-wrap; }
.check { width:22px; height:22px; margin-top:3px; }
.photos { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.photo img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:12px; border:1px solid var(--line); }
.photo small { color:var(--muted); display:block; margin:4px 0; }
form.stack { display:grid; gap:10px; margin-bottom:16px; }
.empty { display:grid; place-items:center; min-height:350px; }
@media (max-width: 950px) {
  header, .header-actions, .inline-form, .room-head { flex-direction:column; align-items:stretch; }
  header { gap:16px; padding:20px; }
  h1 { font-size:24px; }
  main, .grid { grid-template-columns:1fr; }
  main { gap:16px; padding:16px; }
  .room-cover { width:100%; max-height:260px; }
}

@media (max-width: 700px) {
  body { font-size:15px; }
  .login-screen { padding:14px; }
  .login-card { padding:22px; border-radius:16px; }
  .login-card h1 { font-size:23px; }
  header { padding:16px; }
  header p { margin:6px 0 0; }
  h1 { font-size:22px; line-height:1.15; }
  h2 { margin:0 0 12px; font-size:18px; }
  h3 { margin:0 0 10px; font-size:16px; }
  input, textarea, button { width:100%; min-height:46px; font-size:16px; border-radius:10px; }
  main { padding:12px; gap:12px; }
  aside, .panel, .card { border-radius:12px; padding:12px; }
  aside { overflow:hidden; }
  #rooms { display:flex; gap:10px; overflow-x:auto; padding:0 2px 6px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
  .room-card { grid-template-columns:62px 1fr; width:240px; min-width:240px; min-height:72px; padding:10px; scroll-snap-align:start; }
  .room-card.active { outline:2px solid #436b5833; }
  .room-card strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .room-card span, .room-card small { font-size:12px; }
  .thumb { width:62px; height:50px; }
  .thumb::before { inset:13px 15px; }
  .thumb::after { top:18px; right:20px; }
  .room-title { flex-direction:column; align-items:stretch; gap:12px; }
  .room-cover { max-height:none; aspect-ratio:16/10; }
  .grid { gap:12px; margin-top:12px; }
  .photo-card { order:-1; }
  form.stack { gap:9px; margin-bottom:14px; }
  .todo { grid-template-columns:28px 1fr; gap:10px; padding:12px 0; }
  .todo button { grid-column:2; width:auto; min-height:38px; padding:8px 12px; justify-self:start; }
  .check { width:24px; height:24px; margin-top:1px; }
  .photos { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
  .photo img { border-radius:10px; }
  .photo button { min-height:38px; padding:8px 10px; }
  .empty { min-height:220px; text-align:center; }
}

@media (max-width: 420px) {
  header { padding:14px; }
  h1 { font-size:20px; }
  main { padding:10px; }
  .room-card { width:215px; min-width:215px; grid-template-columns:56px 1fr; }
  .thumb { width:56px; height:48px; }
  .photos { grid-template-columns:1fr; }
}