:root {
  --bg: #f8f5ed;
  --card: #fffefb;
  --ink: #223b2e;
  --ink-2: #6b7d70;
  --line: #e3ddc9;
  --accent: #245641;
  --accent-soft: #e3ede4;
  --ok: #2f7d53;
  --warn: #b98a2e;
  --bad: #b5483c;
  --shadow: 0 1px 3px rgba(36,86,65,.08), 0 6px 18px rgba(36,86,65,.08);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15201a;
    --card: #1d2b23;
    --ink: #eef1e9;
    --ink-2: #9fb0a3;
    --line: #2b3a31;
    --accent: #5fae89;
    --accent-soft: #223b30;
  }
}

body { letter-spacing: .1px; }

.brand { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); font-weight: 700; margin: 10px 4px 2px; }
.home-title { font-size: 28px; font-weight: 800; margin: 2px 4px 2px; }
.home-sub { font-size: 14px; color: var(--ink-2); margin: 0 4px 16px; }

.search { border-radius: 16px; padding: 14px 20px; }
.card, .item, .room, .qa, .sec, .login { border-radius: 16px; }
.btn { border-radius: 12px; white-space: nowrap; flex-shrink: 0; }
.btn.primary { box-shadow: 0 4px 14px rgba(36,86,65,.25); }

.sec > .li, .list .item { min-width: 0; }
.sec > .li > *, .item > * { min-width: 0; }
.sec > .li .code, .kv span:last-child, textarea, input, select { overflow-wrap: anywhere; word-break: break-word; }
.item .name, .place { overflow-wrap: anywhere; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

@media (max-width: 389px) {
  .tabs a { font-size: 11px; }
}

@media (min-width: 1000px) {
  body { padding-bottom: 0; }
  .wrap { max-width: 880px; margin-left: 240px; padding-left: 24px; }
  .tabs {
    left: 0; right: auto; top: 0; bottom: 0; width: 220px; height: 100vh;
    flex-direction: column; justify-content: flex-start; align-items: stretch;
    border-top: 0; border-right: 1px solid var(--line); padding: 24px 0 0;
  }
  .tabs a { flex: none; flex-direction: row; justify-content: flex-start; gap: 10px; padding: 12px 24px; font-size: 15px; }
  .tabs a svg { width: 20px; height: 20px; }
  .fab { right: 32px; }
}

.login { background: var(--card); padding: 32px 24px; box-shadow: var(--shadow); margin-top: 10vh; }