:root {
  color-scheme: light;
  font-family: "DM Sans", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
  --page: #f1f5f1;
  --paper: #fbfcfa;
  --paper-raised: #ffffff;
  --ink: #1e2c29;
  --muted: #697875;
  --subtle: #8a9894;
  --line: #dfe7e2;
  --line-strong: #cbd8d1;
  --accent: #276255;
  --accent-strong: #194c42;
  --accent-soft: #e5f1eb;
  --warm: #d5784d;
  --warm-soft: #f9ebe2;
  --sky: #cce8ed;
  --shadow: 0 18px 54px rgb(42 64 55 / 8%);
  --small-shadow: 0 6px 22px rgb(42 64 55 / 7%);
  --day-card: #f5f6eb;
  --night-card: #eaf3f0;
  --focus: #5fa294;
  --page-glow: rgb(238 247 239 / 75%);
}

html[data-theme="night"] {
  color-scheme: dark;
  --page: #141a18;
  --paper: #1b2320;
  --paper-raised: #222c28;
  --ink: #edf0e9;
  --muted: #aab5ae;
  --subtle: #85918b;
  --line: #303c36;
  --line-strong: #45534b;
  --accent: #a8d1bb;
  --accent-strong: #c6e7d2;
  --accent-soft: #283b32;
  --warm: #e5a271;
  --warm-soft: #382b24;
  --sky: #27433f;
  --shadow: 0 18px 60px rgb(0 0 0 / 23%);
  --small-shadow: 0 6px 24px rgb(0 0 0 / 18%);
  --day-card: #202a25;
  --night-card: #212f2c;
  --focus: #aacdb9;
  --page-glow: rgb(52 76 60 / 25%);
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(ellipse at 16% 0%, var(--page-glow), transparent 42rem),
    var(--page);
  transition: background-color 350ms ease, color 250ms ease;
}

button, input, select, textarea { font: inherit; }
button, select { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--focus) 52%, transparent);
  outline-offset: 2px;
}
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }

.app-shell { width: min(100%, 1240px); min-height: 100vh; margin: 0 auto; padding: 0 42px 48px; }
.app-header { position: relative; z-index: 3; display: flex; align-items: center; min-height: 82px; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; }
.brand-mark { position: relative; display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid color-mix(in srgb, var(--warm) 50%, var(--line)); border-radius: 50%; background: var(--paper); }
.brand-mark::before { width: 9px; height: 13px; border-radius: 8px 8px 5px 5px; background: var(--warm); box-shadow: 0 0 13px color-mix(in srgb, var(--warm) 65%, transparent); content: ""; }
.brand-mark span { position: absolute; bottom: 6px; width: 15px; height: 2px; border-radius: 2px; background: var(--warm); }
.brand-name { font-size: 15px; font-weight: 700; letter-spacing: 0; white-space: nowrap; }
.header-meta { display: inline-flex; align-items: center; gap: 12px; margin-left: 28px; color: var(--muted); font-size: 12px; }
.private-indicator { display: inline-flex; align-items: center; gap: 7px; }
.private-dot, .refresh-dot { width: 7px; height: 7px; border-radius: 50%; background: #66a782; box-shadow: 0 0 0 3px color-mix(in srgb, #66a782 14%, transparent); }
.header-divider { width: 1px; height: 15px; background: var(--line-strong); }
.sync-status { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sync-status.is-offline { color: var(--warm); }
.header-actions { display: inline-flex; align-items: center; gap: 9px; margin-left: auto; }
.theme-control { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--muted); font-size: 12px; }
.theme-control select { max-width: 83px; border: 0; color: var(--ink); background: transparent; font-size: 12px; cursor: pointer; }
.icon-button { display: grid; width: 38px; height: 38px; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); color: var(--muted); font-size: 18px; cursor: pointer; transition: border-color 150ms ease, color 150ms ease, transform 150ms ease; }
.icon-button:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }

.welcome-view { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(330px, .75fr); align-items: center; gap: clamp(44px, 8vw, 110px); min-height: calc(100vh - 131px); padding: 45px 0 60px; }
.welcome-copy { max-width: 550px; }
.eyebrow, .section-kicker, .panel-kicker { margin: 0; color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: 1.2px; }
.eyebrow { display: flex; align-items: center; gap: 9px; }
.eyebrow-line { display: inline-block; width: 20px; height: 1px; background: currentColor; }
.welcome-copy h1, .room-heading h1, .bedroom-copy h1 { margin: 20px 0 16px; font-size: clamp(36px, 4vw, 55px); font-weight: 600; line-height: 1.22; letter-spacing: 0; }
.welcome-copy h1 span, .room-heading h1 span, .bedroom-copy h1 span { color: var(--accent); }
.welcome-description { max-width: 430px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.9; }
.welcome-scene { position: relative; width: min(100%, 520px); height: 230px; margin-top: 32px; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: linear-gradient(130deg, #dbeee9 0%, #edf0df 51%, #f6e4d2 100%); }
.welcome-window { position: absolute; top: 33px; width: 116px; height: 125px; overflow: hidden; border: 7px solid #fbfcf8; border-bottom-width: 9px; background: linear-gradient(#a9d7da 0 61%, #7daea3 62%); box-shadow: 0 6px 14px rgb(31 57 50 / 13%); }
.welcome-window::before { position: absolute; top: 0; bottom: 0; left: 50%; width: 4px; background: #f7f8ee; content: ""; }
.welcome-window::after { position: absolute; top: 62%; right: 0; left: 0; height: 4px; background: #f7f8ee; content: ""; }
.window-left { left: 18%; transform: rotate(-2deg); }
.window-right { right: 18%; top: 45px; background: linear-gradient(#506a69 0 61%, #55796c 62%); transform: rotate(2deg); }
.window-sun { position: absolute; top: 17px; right: 15px; width: 19px; height: 19px; border-radius: 50%; background: #f1bd73; box-shadow: 0 0 18px #ffe5aa; }
.window-moon { position: absolute; top: 17px; right: 15px; width: 18px; height: 18px; border-radius: 50%; background: #f2e8c8; box-shadow: 0 0 14px #f2e8c8; }
.welcome-window i, .welcome-window b { position: absolute; z-index: 1; bottom: 0; width: 15px; background: #78968a; }
.welcome-window i { left: 16px; height: 30px; }
.welcome-window b { left: 37px; width: 25px; height: 48px; background: #6f8a81; }
.window-right i, .window-right b { background: #273e3a; }
.welcome-floor { position: absolute; right: 0; bottom: 0; left: 0; height: 38px; background: linear-gradient(#d3d2bd, #c9c8b3); }
.welcome-light { position: absolute; z-index: 2; bottom: 34px; left: 50%; width: 44px; height: 68px; transform: translateX(-50%); }
.welcome-light::before { position: absolute; top: 0; left: 10px; width: 25px; height: 29px; border-radius: 16px 16px 9px 9px; background: #dd9861; box-shadow: 0 0 35px 13px rgb(255 207 141 / 42%); content: ""; }
.welcome-light::after { position: absolute; top: 26px; left: 17px; width: 12px; height: 35px; background: #7b7464; content: ""; }
.welcome-light span { position: absolute; z-index: 1; bottom: 0; left: 8px; width: 30px; height: 4px; border-radius: 50%; background: #6e6a5d; }
.entry-panel { padding: 29px 30px 27px; border: 1px solid var(--line); border-radius: 5px; background: var(--paper); box-shadow: var(--small-shadow); }
.panel-kicker { margin-bottom: 23px; color: var(--ink); font-size: 14px; letter-spacing: 0; }
.field-label { display: block; margin: 17px 0 8px; color: var(--muted); font-size: 12px; }
.text-input { display: block; width: 100%; min-width: 0; height: 45px; padding: 0 13px; border: 1px solid var(--line-strong); border-radius: 4px; color: var(--ink); background: var(--paper-raised); font-size: 13px; transition: border-color 150ms ease, box-shadow 150ms ease; }
.text-input::placeholder { color: var(--subtle); }
.text-input:focus { border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 13%, transparent); outline: 0; }
.primary-button, .secondary-button, .danger-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 45px; padding: 0 17px; border: 1px solid transparent; border-radius: 4px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 150ms ease, transform 150ms ease, border-color 150ms ease; }
.primary-button { color: #fff; background: #276255; }
.primary-button:hover { background: #1b4f44; transform: translateY(-1px); }
.secondary-button { border-color: var(--line-strong); color: var(--ink); background: var(--paper); }
.secondary-button:hover { border-color: var(--accent); color: var(--accent); }
.danger-button { color: #fff; background: #ac5142; }
#createRoomButton { width: 100%; margin-top: 12px; }
.privacy-note { margin: 12px 0 0; color: var(--subtle); font-size: 11px; }
.privacy-note span { margin-right: 4px; color: var(--accent); }
.entry-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0 2px; color: var(--subtle); font-size: 11px; }
.entry-divider::before, .entry-divider::after { height: 1px; flex: 1; background: var(--line); content: ""; }
.entry-divider span { padding: 0 4px; }
.join-row { display: flex; gap: 8px; }
.join-row .text-input { flex: 1; }
.join-row .secondary-button { min-width: 64px; }
.error-message { margin: 10px 0 0; color: #ad4f43; font-size: 12px; line-height: 1.6; }

.room-view { padding-top: 46px; }
.room-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.room-heading h1 { margin: 12px 0 6px; font-size: clamp(28px, 3vw, 38px); }
.heading-subtitle { margin: 0; color: var(--muted); font-size: 13px; }
.activity-control { display: flex; align-items: center; gap: 10px; padding-bottom: 4px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.activity-control select { max-width: 135px; min-height: 36px; padding: 0 28px 0 10px; border: 1px solid var(--line); border-radius: 4px; color: var(--ink); background: var(--paper); font-size: 12px; cursor: pointer; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 14px; }
.section-heading h2, .capsule-copy h2 { margin: 5px 0 0; font-size: 19px; font-weight: 600; letter-spacing: 0; }
.section-kicker { font-size: 9px; letter-spacing: 1px; }
.weather-section-heading { margin-bottom: 13px; }
.weather-refresh-note { display: flex; align-items: center; gap: 8px; margin: 0 1px 3px 0; color: var(--subtle); font-size: 11px; }
.refresh-dot { width: 6px; height: 6px; background: #84a88d; box-shadow: none; }
.weather-room { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.city-panel { position: relative; min-height: 315px; overflow: hidden; padding: 17px 19px 12px; border: 1px solid color-mix(in srgb, #8faea3 28%, var(--line)); border-radius: 5px; background: linear-gradient(150deg, #edf4e6 0%, #dcecea 54%, #c1dcd9 100%); color: #1d302c; isolation: isolate; }
.city-panel[data-side="other"] { background: linear-gradient(145deg, #f8ebd9 0%, #f1d9c3 50%, #dbbaa4 100%); }
.city-panel[data-day="false"] { background: linear-gradient(150deg, #314642 0%, #425b53 55%, #1e322d 100%); color: #f1efe4; }
.city-panel[data-day="false"][data-side="other"] { background: linear-gradient(145deg, #463e42 0%, #61514d 55%, #2e3d39 100%); }
.city-panel[data-weather="rain"] { background-image: linear-gradient(150deg, #b9d0d0 0%, #b5c9c8 50%, #879e9b 100%); }
.city-panel[data-side="other"][data-weather="rain"] { background-image: linear-gradient(145deg, #c6c4ba 0%, #aebdbb 55%, #81918d 100%); }
.city-panel::after { position: absolute; z-index: -1; right: -65px; bottom: 31px; left: -22px; height: 112px; border-radius: 50% 50% 0 0; background: color-mix(in srgb, #94b6a3 57%, transparent); content: ""; }
.city-panel[data-side="other"]::after { right: -35px; left: -67px; height: 96px; background: color-mix(in srgb, #bf997d 49%, transparent); }
.city-panel[data-day="false"]::after { background: color-mix(in srgb, #172d27 81%, transparent); }
.city-panel-top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; }
.city-caption { color: color-mix(in srgb, currentColor 72%, transparent); font-size: 11px; }
.city-local-time { color: color-mix(in srgb, currentColor 62%, transparent); font-variant-numeric: tabular-nums; font-size: 11px; }
.city-picker { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 7px; max-width: 100%; margin-top: 14px; padding: 0; border: 0; color: currentColor; background: transparent; text-align: left; cursor: pointer; }
.city-picker:disabled { cursor: default; }
.city-name { overflow: hidden; font-size: 18px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.city-change { color: color-mix(in srgb, currentColor 56%, transparent); font-size: 14px; }
.city-picker:disabled .city-change { display: none; }
.city-region { position: relative; z-index: 2; max-width: 220px; min-height: 16px; margin: 3px 0 0; overflow: hidden; color: color-mix(in srgb, currentColor 68%, transparent); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.weather-reading { position: relative; z-index: 2; display: flex; align-items: center; gap: 13px; margin-top: 8px; }
.weather-temperature { font-size: 43px; font-weight: 500; line-height: 1; letter-spacing: 0; }
.weather-description { display: grid; gap: 4px; padding-top: 6px; }
.weather-condition { font-size: 13px; font-weight: 600; }
.weather-feels-like { color: color-mix(in srgb, currentColor 69%, transparent); font-size: 10px; }
.sky-art { position: absolute; z-index: 0; right: 2%; bottom: 29px; width: 69%; height: 133px; overflow: hidden; pointer-events: none; }
.sky-sun { position: absolute; top: 8px; right: 13%; width: 47px; aspect-ratio: 1; border-radius: 50%; background: #f3c778; box-shadow: 0 0 0 10px rgb(247 214 153 / 21%), 0 0 42px 10px rgb(255 218 154 / 40%); transition: transform 400ms ease, opacity 250ms ease; }
.city-panel[data-day="false"] .sky-sun { background: #efe7c7; box-shadow: 0 0 0 8px rgb(239 231 199 / 11%), 0 0 34px 6px rgb(239 231 199 / 28%); }
.sky-cloud { position: absolute; z-index: 2; top: 44px; right: 31%; width: 58px; height: 20px; border-radius: 20px; background: rgb(250 251 239 / 86%); box-shadow: 0 -8px 0 -2px rgb(250 251 239 / 86%), 11px 1px 0 rgb(250 251 239 / 86%); opacity: .72; }
.sky-cloud-two { top: 68px; right: 8%; width: 43px; height: 14px; opacity: .44; transform: scale(.8); }
.sky-horizon { position: absolute; right: 0; bottom: 0; left: 0; height: 50px; background: linear-gradient(160deg, transparent 0 23%, rgb(111 153 130 / 43%) 24% 51%, transparent 52%), linear-gradient(20deg, #8eae95 0 52%, #b7c4a4 53%); clip-path: polygon(0 47%, 15% 30%, 25% 46%, 40% 12%, 56% 50%, 68% 19%, 83% 47%, 100% 15%, 100% 100%, 0 100%); }
.sky-building { position: absolute; z-index: 2; bottom: 15px; width: 20px; height: 61px; background: color-mix(in srgb, #5b7770 64%, transparent); clip-path: polygon(0 9%, 72% 9%, 100% 0, 100% 100%, 0 100%); }
.building-one { right: 53%; height: 48px; }
.building-two { right: 40%; width: 27px; height: 72px; }
.building-three { right: 26%; height: 37px; }
.city-panel[data-weather="cloudy"] .sky-sun, .city-panel[data-weather="rain"] .sky-sun { opacity: .3; transform: translateX(-20px); }
.city-panel[data-weather="rain"] .sky-cloud { background: rgb(230 239 237 / 94%); box-shadow: 0 -8px 0 -2px rgb(230 239 237 / 94%), 11px 1px 0 rgb(230 239 237 / 94%); }
.sky-rain { position: absolute; z-index: 3; inset: 40px 20% 28px 35%; display: none; background: repeating-linear-gradient(109deg, transparent 0 11px, rgb(239 249 248 / 71%) 12px 13px, transparent 14px 24px); opacity: .65; animation: rain-fall 1.25s linear infinite; }
.city-panel[data-weather="rain"] .sky-rain { display: block; }
.city-panel[data-weather="rain"] .sky-horizon { filter: saturate(.62); }
.city-card-footer { position: absolute; z-index: 2; right: 16px; bottom: 10px; left: 18px; display: flex; align-items: center; justify-content: space-between; color: color-mix(in srgb, currentColor 70%, transparent); font-size: 9px; }
.weather-symbol { font-size: 16px; }
.weather-error { position: absolute; z-index: 4; right: 12px; bottom: 25px; left: 12px; width: fit-content; max-width: calc(100% - 24px); margin: 0; padding: 5px 8px; border-radius: 3px; color: var(--ink); background: color-mix(in srgb, var(--paper) 85%, transparent); font-size: 10px; }
.shared-lamp { position: absolute; z-index: 3; top: 47%; left: 50%; display: flex; align-items: center; flex-direction: column; gap: 3px; width: 65px; height: 50px; transform: translate(-50%, -40%); pointer-events: none; }
.lamp-icon { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgb(220 175 118 / 65%); border-radius: 50%; color: #8d5735; background: #fff7e6; box-shadow: 0 0 0 6px rgb(255 244 210 / 32%), 0 2px 9px rgb(69 63 40 / 16%); font-size: 16px; }
.lamp-label { padding: 2px 5px; border-radius: 3px; color: #fdfbf3; background: rgb(45 61 53 / 66%); font-size: 8px; white-space: nowrap; }
.city-panel[data-day="false"] .lamp-icon { color: #e8c57f; background: #2f3830; }

.presence-strip { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 2px 20px; border-bottom: 1px solid var(--line); }
.room-home-actions { display: grid; justify-items: end; gap: 6px; }
.room-home-actions > div { display: flex; align-items: center; justify-content: end; gap: 7px; }
.room-decor-home-meta { color: var(--subtle); font-size: 9px; text-align: right; }
.room-decor-home-button { min-height: 32px; padding: 0 8px; border: 1px solid var(--line); color: var(--muted); background: transparent; font-size: 9px; cursor: pointer; }
.room-decor-home-button:hover { border-color: var(--accent); color: var(--accent-strong); background: var(--accent-soft); }
.member-presence { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 20px; }
.presence-member { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; }
.avatar-dot { display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--accent-strong); background: var(--accent-soft); font-size: 10px; font-weight: 600; }
.presence-member:nth-child(2) .avatar-dot { color: #8a563a; background: var(--warm-soft); }
.presence-state { color: var(--ink); font-weight: 500; }
.presence-time { color: var(--subtle); }
.star-summary { display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 7px 10px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.star-summary-icon { color: var(--warm); font-size: 16px; }
.star-summary-link { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; margin-left: auto; padding: 0 8px; border: 0; color: var(--accent); background: transparent; font-size: 10px; cursor: pointer; }
.star-summary-link:hover { color: var(--accent-strong); }
.rest-entry-button { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); background: transparent; font-size: 11px; cursor: pointer; transition: all 150ms ease; }
.rest-entry-button:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.rest-entry-button span { color: var(--warm); font-size: 15px; }

.content-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(30px, 6vw, 72px); padding: 28px 0 26px; }
.content-section { min-width: 0; }
.compact-heading { align-items: center; min-height: 44px; }
.compact-heading h2 { margin-top: 5px; }
.quiet-count { color: var(--subtle); font-size: 10px; white-space: nowrap; }
.composer { display: flex; align-items: center; gap: 7px; }
.note-composer { margin-top: 17px; }
.composer .text-input { flex: 1; height: 40px; border-color: var(--line); background: var(--paper); font-size: 11px; }
.send-button { display: grid; flex: 0 0 40px; width: 40px; height: 40px; place-items: center; border: 1px solid var(--line); border-radius: 4px; color: var(--accent); background: var(--accent-soft); font-size: 19px; cursor: pointer; transition: transform 150ms ease, background 150ms ease; }
.send-button:hover { background: color-mix(in srgb, var(--accent-soft) 65%, var(--accent)); transform: translateY(-1px); }
.notes-list { display: grid; gap: 8px; margin-top: 12px; }
.note-card { position: relative; display: flex; align-items: start; gap: 9px; min-height: 58px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 3px; background: var(--paper); }
.note-pin { flex: 0 0 8px; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--warm); }
.note-card:nth-child(2n) .note-pin { background: #79a88c; }
.note-body { min-width: 0; flex: 1; }
.note-text { margin: 0; overflow-wrap: anywhere; color: var(--ink); font-size: 11px; line-height: 1.6; }
.note-meta { display: flex; gap: 7px; margin-top: 5px; color: var(--subtle); font-size: 9px; }
.delete-item { display: grid; width: 27px; height: 27px; flex: 0 0 27px; place-items: center; margin: -3px -5px 0 0; border: 0; border-radius: 50%; color: var(--subtle); background: transparent; font-size: 16px; cursor: pointer; }
.delete-item:hover { color: var(--warm); background: var(--warm-soft); }
.empty-hint { margin: 18px 0 0; color: var(--subtle); font-size: 11px; }
.ideas-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 13px; }
.idea-card { position: relative; min-height: 84px; padding: 11px 11px 9px; border: 1px solid var(--line); border-radius: 3px; background: var(--paper); }
.idea-card.is-matched { border-color: color-mix(in srgb, #77a78b 58%, var(--line)); background: var(--accent-soft); }
.idea-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.idea-type { color: var(--subtle); font-size: 9px; }
.idea-title { margin: 5px 0 8px; overflow: hidden; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.idea-votes { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.vote-button { min-height: 27px; padding: 0 8px; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); background: transparent; font-size: 9px; cursor: pointer; }
.vote-button:hover, .vote-button.is-active { border-color: var(--accent); color: var(--accent-strong); background: var(--accent-soft); }
.match-label { color: var(--accent-strong); font-size: 9px; font-weight: 600; }
.idea-composer { margin-top: 9px; }
.idea-composer select { height: 40px; padding: 0 8px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); background: var(--paper); font-size: 10px; }

.capsule-section { position: relative; display: flex; align-items: center; gap: 22px; min-height: 112px; padding: 19px 20px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(110deg, color-mix(in srgb, var(--warm-soft) 47%, transparent), transparent 72%); }
.capsule-copy { min-width: 0; flex: 1; }
.capsule-copy h2 { font-size: 16px; }
.capsule-copy > p:last-child { margin: 7px 0 0; color: var(--muted); font-size: 10px; }
.capsule-button, .capsule-outline-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 37px; padding: 0 12px; border: 1px solid color-mix(in srgb, var(--warm) 42%, var(--line)); border-radius: 4px; color: color-mix(in srgb, var(--warm) 80%, var(--ink)); background: var(--paper); font-size: 10px; cursor: pointer; white-space: nowrap; }
.capsule-button:hover, .capsule-outline-button:hover { border-color: var(--warm); color: var(--warm); }
.capsules-list { position: absolute; right: 19px; bottom: -27px; z-index: 1; display: flex; gap: 6px; }
.capsule-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 22px; padding: 0 7px; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); background: var(--paper); font-size: 9px; cursor: pointer; }
.capsule-chip.is-ready { border-color: color-mix(in srgb, var(--warm) 42%, var(--line)); color: var(--warm); }
.app-footer { display: flex; justify-content: space-between; gap: 12px; padding: 20px 2px 0; color: var(--subtle); font-size: 9px; }

.rest-view { min-height: calc(100vh - 82px); padding: 15px 0 32px; }
.rest-topbar { display: flex; align-items: center; justify-content: space-between; min-height: 37px; }
.text-icon-button { display: inline-flex; align-items: center; gap: 7px; padding: 4px 0; border: 0; color: var(--muted); background: transparent; font-size: 12px; cursor: pointer; }
.text-icon-button:hover { color: var(--accent); }
.rest-live-label { display: inline-flex; align-items: center; gap: 7px; color: var(--subtle); font-size: 10px; }
.rest-live-label span { width: 6px; height: 6px; border-radius: 50%; background: #83ae91; }
.bedroom-scene { position: relative; height: clamp(370px, 49vh, 510px); margin-top: 18px; overflow: hidden; border: 1px solid #313b35; border-radius: 4px; color: #efe8d9; background: radial-gradient(ellipse at 72% 30%, #37473d 0, #202a25 34%, #151c18 71%); isolation: isolate; }
.bedroom-scene::before { position: absolute; z-index: -1; right: 0; bottom: 0; left: 0; height: 29%; background: linear-gradient(180deg, #262c25, #171c19); content: ""; }
.bedroom-copy { position: absolute; z-index: 2; top: 36px; left: 37px; max-width: 390px; }
.bedroom-copy .section-kicker { color: #c8b889; }
.bedroom-copy h1 { margin: 12px 0 8px; font-size: clamp(28px, 3vw, 38px); }
.bedroom-copy h1 span { color: #e6c988; }
.bedroom-copy > p:last-child { max-width: 300px; margin: 0; color: #aaa99c; font-size: 11px; line-height: 1.8; }
.bedroom-window { position: absolute; top: 22px; right: 9%; width: min(31%, 242px); height: 192px; border: 8px solid #566057; border-bottom-width: 12px; background: linear-gradient(160deg, #182d2e 0%, #293c3a 60%, #37413a 100%); box-shadow: inset 0 0 28px rgb(7 12 10 / 35%), 0 0 43px rgb(198 179 117 / 7%); }
.bedroom-window::after { position: absolute; right: 0; bottom: -7px; left: 0; height: 7px; background: #60675c; content: ""; }
.bedroom-moon { position: absolute; top: 28px; right: 26px; width: 39px; aspect-ratio: 1; border-radius: 50%; background: #e7d9b3; box-shadow: 0 0 0 9px rgb(231 217 179 / 8%), 0 0 32px 7px rgb(231 217 179 / 27%); }
.window-star { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #eee5cc; box-shadow: 0 0 6px #fff0c7; }
.star-one { top: 32px; left: 24px; }.star-two { top: 81px; left: 55px; }.star-three { top: 61px; right: 88px; }
.window-divider { position: absolute; top: 0; bottom: 0; left: 50%; width: 7px; background: #566057; }
.window-divider::after { position: absolute; top: 58%; right: -97px; left: 0; height: 7px; background: #566057; content: ""; }
.bedroom-beds { position: absolute; z-index: 1; right: 12%; bottom: 17%; left: 12%; display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: clamp(18px, 6vw, 78px); }
.bed-slot { position: relative; min-width: 0; height: clamp(85px, 13vw, 126px); border: 1px solid #51574d; border-bottom: 6px solid #4e5148; background: linear-gradient(180deg, #606056 0%, #40483f 38%, #344039 100%); box-shadow: 0 8px 18px rgb(0 0 0 / 19%); }
.bed-slot::before { position: absolute; top: -20px; left: 9px; width: 39%; height: 29px; border-radius: 4px; background: #c1b69a; box-shadow: 0 2px 8px rgb(0 0 0 / 13%); content: ""; }
.bed-slot::after { position: absolute; top: 3px; right: 7px; bottom: 7px; left: 34%; border-radius: 25px 6px 4px 7px; background: linear-gradient(135deg, #66786a, #435349); content: ""; }
.bed-slot:nth-child(2)::before { background: #c5a98b; }.bed-slot:nth-child(2)::after { background: linear-gradient(135deg, #75594d, #55453f); }
.bed-slot.is-empty { border-style: dashed; background: linear-gradient(180deg, rgb(92 99 85 / 48%), rgb(51 65 57 / 52%)); }
.bed-slot.is-empty::before { border: 1px dashed #aa9e7c; background: #8e876f; }
.bed-slot.is-empty::after { background: linear-gradient(135deg, rgb(93 113 100 / 63%), rgb(63 80 70 / 68%)); }
.bed-slot.is-empty .bed-status { color: #9da49a; }
.bed-label { position: absolute; z-index: 2; right: 0; bottom: -25px; left: 0; color: #9da49a; font-size: 9px; text-align: center; }
.bed-status { position: absolute; z-index: 3; top: 19px; right: 10px; color: #e6c988; font-size: 10px; }
.bedroom-floor { position: absolute; z-index: 0; right: -4%; bottom: 4%; left: -4%; height: 22%; border-top: 1px solid rgb(211 186 123 / 7%); transform: perspective(210px) rotateX(25deg); }
.rest-actions { display: flex; align-items: center; gap: 12px; padding: 18px 2px 14px; border-bottom: 1px solid var(--line); }
.rest-status-control { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-right: auto; color: var(--muted); font-size: 10px; }
.rest-status-options { display: flex; flex-wrap: wrap; gap: 5px; }
.rest-status-options button { min-height: 31px; padding: 0 9px; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); background: var(--paper); font-size: 9px; cursor: pointer; }
.rest-status-options button.is-active { border-color: #85734d; color: #c9ae74; background: color-mix(in srgb, #83724f 18%, var(--paper)); }
.star-button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid #957949; border-radius: 4px; color: #f0d490; background: #2b3028; font-size: 11px; cursor: pointer; white-space: nowrap; transition: transform 150ms ease, background 150ms ease; }
.star-button:hover { background: #38392b; transform: translateY(-1px); }
.star-button span { font-size: 16px; }
.capsule-outline-button { border-color: var(--line); color: var(--muted); background: transparent; }
.star-inbox, .rest-capsules { padding: 10px 2px 0; }
.inbox-message, .rest-capsule-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); background: var(--paper); font-size: 10px; }
.inbox-message + .inbox-message, .rest-capsule-item + .rest-capsule-item { margin-top: 6px; }
.star-count { flex: 0 0 auto; color: var(--warm); font-weight: 600; }
.inbox-message .star-count { color: var(--warm); font-weight: 700; }
.rest-footnote { margin: 11px 2px 0; color: var(--subtle); font-size: 9px; }
html[data-theme="rest"] { color-scheme: dark; --page: #0d110f; --paper: #151b17; --paper-raised: #1a201c; --ink: #e8e4d8; --muted: #a5a397; --subtle: #77796f; --line: #2c332d; --line-strong: #45493e; --accent: #ccb47d; --accent-strong: #e1c990; --accent-soft: #302e24; --warm: #d79a64; --warm-soft: #332820; --page-glow: transparent; }

.app-dialog { position: fixed; width: min(calc(100% - 28px), 430px); max-height: min(84vh, 720px); padding: 26px; overflow: auto; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); background: var(--paper); box-shadow: 0 26px 90px rgb(0 0 0 / 25%); }
.app-dialog::backdrop { background: rgb(16 24 21 / 45%); backdrop-filter: blur(3px); }
.dialog-close-form { position: absolute; top: 12px; right: 12px; }
.dialog-close-form .icon-button { width: 31px; height: 31px; font-size: 19px; }
.app-dialog h2 { margin: 8px 0 6px; font-size: 21px; font-weight: 600; }
.dialog-description { margin: 0 0 17px; color: var(--muted); font-size: 11px; line-height: 1.7; }
.city-results { display: grid; gap: 6px; max-height: 300px; margin-top: 12px; overflow: auto; }
.city-result { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 55px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 3px; color: var(--ink); background: var(--paper-raised); text-align: left; cursor: pointer; }
.city-result:hover { border-color: var(--accent); background: var(--accent-soft); }
.city-result strong { display: block; font-size: 12px; }
.city-result small { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; }
.city-result > span:last-child { color: var(--accent); font-size: 14px; }
.city-search-hint { margin: 14px 2px; color: var(--subtle); font-size: 10px; }
.textarea-input { min-height: 115px; padding: 11px 13px; resize: vertical; line-height: 1.6; }
.capsule-dialog .field-label { margin-top: 18px; }
.dialog-actions { display: flex; justify-content: end; gap: 8px; margin-top: 19px; }
.dialog-actions .primary-button, .dialog-actions .danger-button, .dialog-actions .secondary-button { min-height: 39px; font-size: 11px; }
.dialog-footnote { margin: 13px 0 0; color: var(--subtle); font-size: 9px; line-height: 1.65; }
.settings-member { display: flex; align-items: center; gap: 10px; margin: 17px 0; padding: 11px; border: 1px solid var(--line); border-radius: 3px; background: var(--paper-raised); }
.settings-member > div { display: grid; gap: 4px; min-width: 0; }
.settings-member strong { font-size: 12px; }.settings-member > div > span { color: var(--muted); font-size: 9px; line-height: 1.5; }
.settings-member .avatar-dot { width: 31px; height: 31px; flex: 0 0 31px; }
.room-decor-editor { margin: 17px 0 19px; padding: 15px 0 17px; border-top: 2px solid var(--line); border-bottom: 2px solid var(--line); }
.room-decor-heading h3 { margin: 0; color: var(--ink); font-size: 14px; }
.room-decor-heading p { margin: 4px 0 10px; color: var(--subtle); font-size: 10px; }
.room-decor-preview { display: block; width: 100%; height: auto; aspect-ratio: 640 / 428; border: 2px solid var(--line-strong); background: #20363f; image-rendering: pixelated; image-rendering: crisp-edges; }
.room-decor-status { min-height: 16px; margin: 7px 1px 0; color: var(--subtle); font-size: 9px; line-height: 1.5; }
.room-decor-choices { min-width: 0; margin: 10px 0 0; padding: 0; border: 0; }
.room-decor-choices legend { margin-bottom: 6px; color: var(--muted); font-size: 10px; }
.room-decor-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.room-decor-option { display: flex; min-width: 0; min-height: 47px; align-items: center; gap: 8px; padding: 5px 7px; border: 2px solid var(--line); color: var(--muted); background: var(--paper-raised); text-align: left; cursor: pointer; }
.room-decor-option[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-strong); background: var(--accent-soft); box-shadow: 2px 2px 0 color-mix(in srgb, var(--accent) 25%, transparent); }
.room-decor-swatch { width: 26px; height: 26px; flex: 0 0 26px; border: 2px solid color-mix(in srgb, var(--ink) 24%, transparent); box-shadow: inset 3px 3px 0 rgb(255 255 255 / 25%), inset -3px -3px 0 rgb(0 0 0 / 18%); }
.room-decor-name { min-width: 0; font-size: 9px; line-height: 1.3; overflow-wrap: anywhere; }
.room-decor-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; margin-top: 10px; }
.room-decor-actions button { min-height: 39px; padding-right: 10px; padding-left: 10px; font-size: 10px; }
.room-decor-actions .primary-button { width: 100%; }
.room-decor-actions button:disabled { opacity: .55; cursor: default; }
.settings-row { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 59px; padding: 9px 2px; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); background: transparent; text-align: left; cursor: pointer; }
.settings-row > span:first-child { display: grid; gap: 4px; }.settings-row strong { font-size: 11px; font-weight: 500; }.settings-row small { color: var(--subtle); font-size: 9px; }.settings-row > span:last-child { color: var(--muted); font-size: 17px; }
.settings-row:hover strong { color: var(--accent); }.danger-row:hover strong, .danger-row:hover > span:last-child { color: #bd5f51; }
.recovery-link-box { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 17px; padding: 10px; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); background: var(--paper-raised); font-size: 10px; }
.recovery-link-box button { padding: 5px 8px; border: 0; border-radius: 3px; color: var(--accent); background: var(--accent-soft); font-size: 10px; cursor: pointer; }
.share-link-input { height: auto; min-height: 45px; padding: 10px; overflow-wrap: anywhere; font-size: 10px; }
.copy-link-button { width: 100%; margin-top: 11px; }
.confirm-dialog { width: min(calc(100% - 28px), 370px); }
.read-capsule-body { margin: 18px 0 3px; padding: 16px; border-left: 2px solid var(--warm); color: var(--ink); background: var(--warm-soft); font-size: 14px; line-height: 1.9; white-space: pre-wrap; overflow-wrap: anywhere; }
.toast { position: fixed; z-index: 10; right: 20px; bottom: max(20px, env(safe-area-inset-bottom)); max-width: min(400px, calc(100vw - 40px)); padding: 11px 14px; border: 1px solid var(--line-strong); border-radius: 4px; color: var(--ink); background: var(--paper-raised); box-shadow: var(--shadow); font-size: 11px; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity 180ms ease, transform 180ms ease; }
.toast.is-visible { opacity: 1; transform: translateY(0); }
.toast.is-error { border-color: #ba6957; }

.star-burst { position: fixed; z-index: 9; right: 18%; bottom: 16%; color: #f1d78c; font-size: 21px; opacity: 0; pointer-events: none; animation: star-float 1.7s ease-out forwards; }
.star-burst::after { position: absolute; top: 7px; left: 50%; width: 7px; height: 7px; border: 1px solid rgb(237 213 151 / 75%); border-radius: 50%; content: ""; animation: star-ring 1.1s ease-out forwards; }
@keyframes rain-fall { from { transform: translateY(-9px); } to { transform: translateY(10px); } }
@keyframes star-float { 0% { opacity: 0; transform: translateY(12px) scale(.7); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-56px) scale(1.13); } }
@keyframes star-ring { from { transform: translate(-50%, -50%) scale(.4); opacity: .9; } to { transform: translate(-50%, -50%) scale(5.4); opacity: 0; } }

@media (max-width: 820px) {
  .app-shell { padding-right: 24px; padding-left: 24px; }
  .welcome-view { grid-template-columns: minmax(0, 1fr) minmax(300px, .85fr); gap: 32px; }
  .welcome-window { width: 95px; height: 112px; }
  .content-grid { gap: 28px; }
  .city-panel { min-height: 300px; padding-right: 14px; padding-left: 14px; }
  .weather-temperature { font-size: 38px; }
  .sky-art { width: 78%; }
  .shared-lamp { top: 48%; }
}

@media (max-width: 620px) {
  .app-shell { padding: 0 17px max(28px, env(safe-area-inset-bottom)); }
  .app-header { min-height: 63px; }
  .brand { gap: 8px; }.brand-mark { width: 27px; height: 27px; }.brand-name { font-size: 13px; }
  .header-meta { gap: 6px; margin-left: 9px; font-size: 9px; }.header-divider { display: none; }.sync-status { max-width: 43px; }.private-label { display: none; }.private-indicator { gap: 0; }
  .header-actions { gap: 5px; }.theme-control { min-height: 33px; gap: 4px; padding: 0 7px; font-size: 11px; }.theme-control select { max-width: 67px; font-size: 10px; }
  .icon-button { width: 33px; height: 33px; font-size: 16px; }
  .welcome-view { grid-template-columns: 1fr; gap: 17px; min-height: unset; padding: 41px 0 30px; }
  .welcome-copy h1 { margin: 13px 0 8px; font-size: 36px; }
  .welcome-description { max-width: 360px; font-size: 12px; line-height: 1.8; }
  .welcome-scene { height: 145px; margin-top: 16px; }
  .welcome-window { top: 16px; width: 78px; height: 91px; border-width: 5px; border-bottom-width: 6px; }
  .window-left { left: 19%; }.window-right { top: 23px; right: 19%; }
  .welcome-light { bottom: 23px; transform: translateX(-50%) scale(.78); }.welcome-floor { height: 25px; }
  .entry-panel { padding: 19px; }.panel-kicker { margin-bottom: 11px; font-size: 13px; }.field-label { margin-top: 13px; }
  .text-input { height: 43px; font-size: 12px; }.primary-button, .secondary-button { min-height: 43px; font-size: 12px; }
  .room-view { padding-top: 28px; }
  .room-heading { align-items: start; flex-direction: column; gap: 14px; margin-bottom: 21px; }
  .room-heading h1 { margin: 9px 0 4px; font-size: 28px; }.heading-subtitle { font-size: 11px; }
  .activity-control { gap: 8px; font-size: 10px; }.activity-control select { min-height: 33px; }
  .weather-section-heading { align-items: end; }.weather-section-heading h2 { font-size: 17px; }.weather-section-heading .section-kicker { font-size: 8px; }.weather-refresh-note { max-width: 111px; gap: 6px; font-size: 8px; line-height: 1.45; }
  .weather-room { gap: 7px; }
  .city-panel { min-height: 249px; padding: 12px 10px 9px; }
  .city-caption, .city-local-time { font-size: 9px; }
  .city-picker { gap: 3px; margin-top: 13px; }.city-name { font-size: 14px; }.city-region { max-width: 100%; margin-top: 2px; font-size: 8px; }
  .weather-reading { align-items: start; flex-direction: column; gap: 2px; margin-top: 8px; }.weather-temperature { font-size: 34px; }.weather-description { gap: 2px; padding-top: 0; }.weather-condition { font-size: 10px; }.weather-feels-like { max-width: 128px; font-size: 8px; }
  .sky-art { right: -4%; bottom: 25px; width: 93%; height: 100px; }
  .sky-sun { top: 1px; right: 12%; width: 33px; }.sky-cloud { top: 34px; right: 29%; width: 46px; height: 15px; }.sky-cloud-two { top: 51px; }.sky-horizon { height: 37px; }.sky-building { bottom: 10px; height: 43px; }.building-one { height: 35px; }.building-two { height: 53px; }.building-three { height: 28px; }
  .city-card-footer { right: 9px; bottom: 8px; left: 10px; font-size: 7px; }.weather-symbol { font-size: 13px; }
  .shared-lamp { display: none; }
  .presence-strip { align-items: start; padding: 11px 0 15px; }.member-presence { align-items: start; flex-direction: column; gap: 7px; }.presence-member { gap: 6px; font-size: 9px; }.avatar-dot { width: 22px; height: 22px; font-size: 9px; }.presence-time { display: none; }
  .room-home-actions { width: 100%; grid-template-columns: minmax(0, 1fr); justify-items: end; }
  .room-decor-home-meta { max-width: 100%; text-align: right; }
  .rest-entry-button { min-height: 33px; padding: 0 9px; font-size: 9px; }
  .content-grid { grid-template-columns: 1fr; gap: 25px; padding: 21px 0; }
  .section-heading h2 { font-size: 17px; }.quiet-count { font-size: 9px; }
  .composer .text-input { font-size: 10px; }.notes-list { gap: 6px; margin-top: 9px; }.note-card { min-height: 51px; padding: 8px; }.note-text { font-size: 10px; }
  .ideas-list { gap: 6px; margin-top: 10px; }.idea-card { min-height: 80px; padding: 9px; }.idea-title { font-size: 11px; }.vote-button { min-height: 27px; padding: 0 6px; font-size: 8px; }
  .capsule-section { align-items: start; flex-wrap: wrap; gap: 12px; min-height: 110px; padding: 16px 11px; }
  .capsule-copy h2 { font-size: 15px; }.capsule-copy > p:last-child { font-size: 9px; line-height: 1.5; }.capsule-button { min-height: 34px; padding: 0 9px; font-size: 9px; }
  .capsules-list { right: 10px; bottom: -25px; }
  .app-footer { padding-top: 22px; font-size: 8px; }
  .rest-view { min-height: calc(100vh - 63px); padding-top: 9px; }.rest-live-label { font-size: 8px; }.text-icon-button { font-size: 10px; }
  .bedroom-scene { height: 390px; margin-top: 12px; }.bedroom-copy { top: 21px; left: 17px; max-width: 70%; }.bedroom-copy h1 { margin: 9px 0 6px; font-size: 27px; }.bedroom-copy > p:last-child { font-size: 9px; }
  .bedroom-window { top: 35px; right: 7%; width: 31%; height: 140px; border-width: 5px; border-bottom-width: 8px; }.bedroom-moon { top: 22px; right: 18px; width: 27px; }.window-divider { width: 5px; }.window-divider::after { right: -53px; height: 5px; }
  .bedroom-beds { right: 8%; bottom: 21%; left: 8%; gap: 17px; }.bed-slot { height: 82px; }.bed-slot::before { top: -15px; height: 22px; }
  .rest-actions { align-items: stretch; flex-direction: column; gap: 10px; padding: 13px 0; }.rest-status-control { align-items: start; flex-direction: column; gap: 8px; }.rest-status-options { width: 100%; }.rest-status-options button { flex: 1; min-height: 34px; padding: 0 4px; font-size: 9px; }
  .star-button, .capsule-outline-button { min-height: 38px; }.star-button { justify-content: center; }.rest-footnote { font-size: 8px; }
  .app-dialog { padding: 22px 18px; }.app-dialog h2 { font-size: 19px; }.dialog-description { font-size: 10px; }
}

@media (max-width: 375px) {
  .app-shell { padding-right: 12px; padding-left: 12px; }
  .brand-name { font-size: 12px; }.header-meta { margin-left: 8px; }.private-indicator { gap: 5px; }.sync-status { max-width: 44px; }
  .header-actions { gap: 4px; }.theme-control { padding: 0 5px; }.theme-control select { max-width: 60px; }
  .city-panel { min-height: 238px; padding-right: 8px; padding-left: 8px; }.city-name { font-size: 13px; }.weather-temperature { font-size: 31px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

:root {
  --page: #e8f0e8;
  --paper: #f6f8ef;
  --paper-raised: #fcfdf8;
  --ink: #293c38;
  --muted: #62786f;
  --subtle: #84968b;
  --line: #d0ddd1;
  --line-strong: #aabdaf;
  --accent: #347666;
  --accent-strong: #245d51;
  --accent-soft: #dbeae0;
  --warm: #cf7955;
  --warm-soft: #f5e2d3;
  --sky: #a8d0cf;
  --shadow: 3px 3px 0 rgb(54 74 63 / 13%);
  --small-shadow: 3px 3px 0 rgb(54 74 63 / 11%);
  --focus: #578e83;
  --page-glow: transparent;
}

html[data-theme="night"] {
  --page: #17282d;
  --paper: #20383b;
  --paper-raised: #294347;
  --ink: #e4e6cf;
  --muted: #b5c8b8;
  --subtle: #93aa9b;
  --line: #3c5856;
  --line-strong: #58716b;
  --accent: #9ed0ad;
  --accent-strong: #c0e0bd;
  --accent-soft: #2d4a46;
  --warm: #e6b36d;
  --warm-soft: #4c3c31;
  --sky: #29474e;
  --shadow: 3px 3px 0 rgb(0 0 0 / 23%);
  --small-shadow: 2px 2px 0 rgb(0 0 0 / 20%);
  --page-glow: transparent;
}

html[data-theme="rest"] {
  --page: #101d24;
  --paper: #172a30;
  --paper-raised: #20363a;
  --ink: #d9dec5;
  --muted: #a7b8a8;
  --subtle: #82978a;
  --line: #30484a;
  --line-strong: #49605b;
  --accent: #9dc9a7;
  --accent-strong: #c4dbb4;
  --accent-soft: #253f3d;
  --warm: #ddb06b;
  --warm-soft: #44382e;
  --page-glow: transparent;
}

body { background: var(--page); }
.app-header { border-bottom: 3px solid var(--line); }
.brand-mark { border: 0; border-radius: 0; background: transparent; }
.brand-mark::before { width: 10px; height: 12px; border-radius: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--warm) 18%, transparent); }
.brand-mark span { height: 4px; border-radius: 0; }
.theme-control, .icon-button, .entry-panel, .primary-button, .secondary-button, .danger-button,
.text-input, .activity-control select, .city-panel, .note-card, .idea-card, .capsule-section,
.app-dialog, .vote-button, .capsule-chip, .rest-entry-button, .send-button,
.rest-status-options button, .star-button, .inbox-message, .rest-capsule-item {
  border-radius: 0;
}
.entry-panel, .app-dialog { box-shadow: var(--small-shadow); }
.primary-button, .send-button, .icon-button { box-shadow: 2px 2px 0 rgb(42 69 61 / 18%); }
.primary-button:active, .send-button:active, .icon-button:active { box-shadow: 0 0 0 transparent; transform: translate(2px, 2px); }
.welcome-scene { height: 230px; border: 4px solid #7e957e; border-radius: 0; background: #a5d2ca; box-shadow: 4px 4px 0 rgb(48 75 65 / 18%); }
.pixel-scene { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; image-rendering: pixelated; image-rendering: crisp-edges; }
.city-panel { border: 4px solid #789487; border-radius: 0; background: #b7dace; color: #263b3a; box-shadow: 3px 3px 0 rgb(48 75 65 / 19%); }
.city-panel[data-side="other"] { border-color: #a58a78; background: #f0d2af; color: #3e3537; }
.city-panel[data-day="false"] { border-color: #617d77; background: #304d52; color: #e8e5ca; }
.city-panel[data-day="false"][data-side="other"] { border-color: #786d68; background: #4a464b; color: #eee2c8; }
.city-panel[data-weather="rain"] { filter: saturate(.82); }
.city-panel::after { display: none; }
.sky-art { z-index: 0; right: 2%; bottom: 29px; width: 320px; height: auto; max-width: none; overflow: hidden; pointer-events: none; }
.pixel-weather-art { image-rendering: pixelated; image-rendering: crisp-edges; }
.city-card-footer { color: currentColor; text-shadow: 1px 1px var(--paper); }
.shared-lamp { width: 54px; }
.lamp-icon { border-radius: 0; box-shadow: 3px 3px 0 rgb(48 75 65 / 20%); }
.presence-strip, .star-summary { border-bottom: 3px solid var(--line); }
.avatar-dot { overflow: hidden; border: 2px solid var(--line-strong); border-radius: 0; }
.presence-other .avatar-dot { border-color: #bd8a6c; }
.note-card, .idea-card { border-width: 2px; box-shadow: 2px 2px 0 rgb(42 69 61 / 10%); }
.capsule-section { border: 3px solid var(--line); box-shadow: 3px 3px 0 rgb(42 69 61 / 12%); }
.bedroom-scene { display: grid; justify-items: center; height: auto; min-height: 0; border: 4px solid #5e7b76; border-radius: 0; background: #172b32; box-shadow: 4px 4px 0 rgb(0 0 0 / 18%); }
.bedroom-scene::before { display: none; }
.bedroom-pixel-scene { position: static; z-index: 0; width: min(100%, 640px); height: auto; transform: none; }
.bedroom-copy { position: static; z-index: 2; width: 100%; max-width: none; padding: 25px 28px 12px; }
.bedroom-copy .section-kicker { color: #e2c881; }
.bedroom-copy h1 span { color: #f0d08c; }
.bedroom-copy > p:last-child { color: #c0c6ad; }
.room-decor-meta { margin: 7px 0 0; color: #b6c4ad; font-size: 9px; line-height: 1.5; }
.rest-decor-button { min-height: 28px; margin-top: 7px; padding: 0 8px; border: 1px solid #647666; color: #e4dcc2; background: #263b34; font-size: 9px; cursor: pointer; }
.shared-rest-prompt { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0; padding: 12px 14px; border: 1px solid var(--line-strong); color: var(--ink); background: var(--paper-raised); }
.shared-rest-prompt[hidden] { display: none; }
.shared-rest-prompt p { min-width: 0; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.shared-rest-prompt-actions { display: flex; flex: 0 0 auto; gap: 6px; }
.shared-rest-prompt-actions button, .shared-rest-button { min-height: 36px; padding: 0 10px; border: 1px solid var(--line-strong); color: var(--accent-strong); background: var(--paper-raised); font-size: 10px; cursor: pointer; }
.shared-rest-prompt-actions button[data-action="accept-shared-rest"] { border-color: var(--accent-strong); color: var(--paper); background: var(--accent-strong); }
.shared-rest-button:disabled { opacity: .55; cursor: default; }
.shared-bed-slot .bed-label { color: #f0ddaa; }
.bedroom-beds { position: static; z-index: 1; width: min(100%, 640px); height: auto; min-height: 59px; padding: 4px 30px 16px; gap: 62px; align-items: start; }
.bed-slot { display: flex; height: 100%; flex-direction: column; align-items: center; justify-content: end; gap: 3px; border: 0; border-bottom: 0; background: transparent; box-shadow: none; text-shadow: 1px 1px #182b31; }
.bed-slot::before, .bed-slot::after { display: none; }
.bed-label, .bed-status { position: static; display: block; color: #e6d9b6; font-size: 10px; }
.bed-slot.is-empty { border: 0; background: transparent; }
.bed-slot.is-empty .bed-status { color: #a8b4a2; }
.rest-status-options button, .vote-button, .capsule-chip, .rest-entry-button, .star-button { border-width: 2px; }
.inbox-message, .rest-capsule-item { border-width: 2px; }

.avatar-editor { margin: 17px 0 19px; padding: 15px 0 17px; border-top: 2px solid var(--line); border-bottom: 2px solid var(--line); }
.avatar-editor-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 13px; }
.avatar-editor-title { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 10px; }
.avatar-editor-heading h3 { margin: 0; color: var(--ink); font-size: 14px; }
.avatar-editor-heading p { flex-basis: 100%; margin: 4px 0 0; color: var(--subtle); font-size: 10px; }
.avatar-random-button { min-height: 30px; padding: 0 9px; border: 2px solid var(--line-strong); color: var(--accent-strong); background: var(--paper-raised); font-size: 9px; cursor: pointer; }
.avatar-random-button:hover { border-color: var(--accent); background: var(--accent-soft); }
.avatar-preview { width: 128px; height: 192px; flex: 0 0 128px; padding: 0; border: 0; outline: 2px solid var(--line-strong); background: var(--accent-soft); image-rendering: pixelated; image-rendering: crisp-edges; }
.settings-member .settings-avatar { width: 64px; height: 96px; flex: 0 0 64px; padding: 0; border: 0; outline: 2px solid var(--line-strong); image-rendering: pixelated; image-rendering: crisp-edges; }
.presence-member .presence-avatar { width: 64px; height: 96px; flex: 0 0 64px; border: 0; outline: 2px solid var(--line-strong); image-rendering: pixelated; image-rendering: crisp-edges; }
.avatar-choice-group { min-width: 0; margin: 13px 0 0; padding: 0; border: 0; }
.avatar-choice-group legend { margin-bottom: 7px; color: var(--muted); font-size: 10px; }
.avatar-sprite-options, .avatar-style-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.avatar-style-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.avatar-preset-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.avatar-preset-option { display: flex; min-width: 0; min-height: 66px; align-items: center; gap: 8px; padding: 4px 7px; border: 2px solid var(--line); color: var(--muted); background: var(--paper-raised); cursor: pointer; }
.avatar-preset-option[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-strong); background: var(--accent-soft); box-shadow: 2px 2px 0 color-mix(in srgb, var(--accent) 25%, transparent); }
.avatar-preset-preview { width: 32px; height: 48px; flex: 0 0 32px; image-rendering: pixelated; image-rendering: crisp-edges; }
.avatar-hair-options { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.avatar-outfit-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.avatar-chip-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.avatar-chip-options.accessory-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.avatar-visual-option, .avatar-color-option, .avatar-chip-option { display: flex; min-width: 0; min-height: 68px; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 5px 3px; border: 2px solid var(--line); color: var(--muted); background: var(--paper-raised); font-size: 10px; cursor: pointer; }
.avatar-layer-option { display: flex; min-width: 0; min-height: 69px; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 3px 2px; border: 2px solid var(--line); color: var(--muted); background: var(--paper-raised); font-size: 10px; cursor: pointer; }
.avatar-layer-preview { width: 32px; height: 48px; image-rendering: pixelated; image-rendering: crisp-edges; }
.avatar-visual-option { min-height: 126px; }
.avatar-hair-option { display: flex; min-width: 0; min-height: 50px; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 4px 2px; border: 2px solid var(--line); color: var(--muted); background: var(--paper-raised); cursor: pointer; }
.body-options .avatar-visual-option { min-height: 126px; }
.avatar-style-options .avatar-visual-option { min-height: 126px; }
.avatar-chip-option { min-height: 44px; }
.avatar-visual-option[aria-pressed="true"], .avatar-chip-option[aria-pressed="true"], .avatar-layer-option[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-strong); background: var(--accent-soft); box-shadow: 2px 2px 0 color-mix(in srgb, var(--accent) 25%, transparent); }
.avatar-hair-option[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); background: var(--accent-soft); box-shadow: 2px 2px 0 color-mix(in srgb, var(--accent) 28%, transparent); }
.avatar-color-option[aria-pressed="true"] { border-color: var(--ink); background: var(--accent-soft); box-shadow: 2px 2px 0 color-mix(in srgb, var(--accent) 36%, transparent); }
.avatar-choice-preview { width: 64px; height: 96px; image-rendering: pixelated; image-rendering: crisp-edges; }
.avatar-option-name { max-width: 100%; color: inherit; font-size: 9px; line-height: 1.25; text-align: center; overflow-wrap: anywhere; }
.outfit-swatch { width: 22px; height: 22px; border: 2px solid rgb(38 48 44 / 28%); }
.bottom-swatch { width: 22px; height: 22px; border: 2px solid color-mix(in srgb, var(--ink) 24%, transparent); box-shadow: inset 3px 3px 0 rgb(255 255 255 / 26%), inset -3px -3px 0 rgb(0 0 0 / 18%); }
.hair-color-swatch { width: 22px; height: 22px; border: 2px solid color-mix(in srgb, var(--ink) 24%, transparent); box-shadow: inset 3px 3px 0 rgb(255 255 255 / 30%), inset -3px -3px 0 rgb(0 0 0 / 18%); }
.avatar-save-status { min-height: 16px; margin: 9px 0 4px; color: var(--subtle); font-size: 10px; }
.avatar-save-button { width: 100%; min-height: 44px; font-size: 11px; }

.wardrobe-preview-button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 15px; padding: 0 12px; border: 2px solid var(--line-strong); color: var(--accent-strong); background: var(--paper-raised); font-size: 12px; cursor: pointer; }
.wardrobe-preview-button:hover { border-color: var(--accent); background: var(--accent-soft); }
.local-preview-notice { margin-bottom: 22px; padding: 15px; border: 2px solid var(--line-strong); color: var(--ink); background: var(--accent-soft); }
.local-preview-notice strong { font-size: 13px; }
.local-preview-notice p { margin: 8px 0 10px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.local-preview-notice a { display: inline-flex; align-items: center; min-height: 36px; color: var(--accent-strong); font-size: 12px; }
.entry-panel :disabled { opacity: .55; cursor: default; }

@media (max-width: 620px) {
  .room-decor-editor { margin: 13px 0 15px; padding: 12px 0 14px; }
  .room-decor-options { gap: 5px; }
  .room-decor-option { min-height: 44px; gap: 6px; padding: 4px 5px; }
  .room-decor-swatch { width: 23px; height: 23px; flex-basis: 23px; }
  .room-decor-actions button { min-height: 42px; }
  .shared-rest-prompt { align-items: stretch; flex-direction: column; gap: 9px; padding: 11px; }
  .shared-rest-prompt-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shared-rest-prompt-actions button { min-height: 40px; }
  .welcome-scene { height: 145px; }
  .bedroom-pixel-scene { width: 100%; height: auto; }
  .city-panel { border-width: 3px; }
  .sky-art { right: -50px; left: auto; width: 320px; height: auto; transform: none; }
  .bedroom-scene { height: auto; }
  .bedroom-copy { max-width: none; padding: 21px 17px 10px; }
  .bedroom-beds { height: auto; gap: 32px; padding: 6px 12px 14px; }
  .bed-label, .bed-status { font-size: 9px; }
  .avatar-editor { margin: 13px 0 15px; padding: 12px 0 14px; }
  .presence-member .presence-avatar { width: 64px; height: 96px; flex: 0 0 64px; outline-width: 2px; }
  .avatar-sprite-options { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .avatar-hair-options { gap: 4px; }
  .avatar-style-options, .avatar-outfit-options { gap: 5px; }
  .avatar-visual-option { min-height: 126px; padding-right: 1px; padding-left: 1px; font-size: 9px; }
  .body-options .avatar-visual-option { min-height: 126px; }
  .avatar-option-name { font-size: 8px; }
}

@media (max-width: 370px) {
  .avatar-sprite-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Keep the detailed sprite on whole CSS pixels in the wardrobe and presence strip. */
.presence-details { display: grid; min-width: 0; gap: 5px; line-height: 1.45; overflow-wrap: anywhere; }
.presence-details strong { color: var(--ink); font-size: inherit; font-weight: 500; }
@media (max-width: 620px) {
  .presence-strip { flex-wrap: wrap; gap: 12px; }
  .member-presence { width: 100%; flex: 1 1 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .presence-member { min-width: 0; }
  .presence-waiting { min-height: 96px; line-height: 1.6; }
  .rest-entry-button { margin-left: auto; }
}
.app-version { margin: 12px auto; color: var(--subtle); font-size: 10px; text-align: center; }
[data-theme="rest"] .app-version { color: #76694e; }
.history-more { min-height: 44px; align-self: end; }