/*
  TownHQ safe facelift
  Presentation only. No layout rewrites, no animation system, no JS hooks.
*/

:root {
  --thq-ink: #1d2d2a;
  --thq-muted: #5d6e68;
  --thq-line: #d4ddd1;
  --thq-line-strong: #bccab9;
  --thq-paper: #fffdf8;
  --thq-surface: #f6f7f2;
  --thq-green: #34594b;
  --thq-green-soft: #e8efe5;
  --thq-coral: #c76549;
  --thq-shadow: 0 8px 22px rgba(29, 45, 42, 0.07);
  --thq-shadow-raised: 0 14px 32px rgba(29, 45, 42, 0.10);
}

@media(max-width:430px){
  .topbar .account-chip{min-height:46px!important}
}

body {
  background: linear-gradient(180deg, #edf2eb 0, #f7f5ee 42%, #f1f3ed 100%);
  color: var(--thq-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.topbar {
  border-color: var(--thq-line);
  background: rgba(255, 253, 248, 0.98);
  box-shadow: var(--thq-shadow);
  backdrop-filter: none;
}

.main-nav button,
.account-chip,
.pill {
  min-height: 42px;
  padding: 9px 14px;
  border-color: var(--thq-line-strong);
  background: #fff;
  color: var(--thq-ink);
  font-weight: 800;
}

.main-nav button:hover,
.account-chip:hover,
.pill:hover {
  border-color: #8fa58e;
  background: #f4f8f1;
}

.main-nav button.active,
.account-chip.active,
.pill.active {
  border-color: var(--thq-green);
  background: var(--thq-green);
  color: #fff;
}

.hero {
  overflow: hidden;
  border: 1px solid var(--thq-line-strong);
  box-shadow: var(--thq-shadow-raised);
}

.hero h1 {
  letter-spacing: -0.045em;
}

.hero .eyebrow {
  letter-spacing: 0.11em;
}

.app-main > .stack > .head {
  margin-bottom: 4px;
  padding: 17px 19px;
  border: 1px solid var(--thq-line);
  border-radius: 18px;
  background: rgba(255, 253, 248, 0.96);
  box-shadow: var(--thq-shadow);
}

.head h2,
.panel h2,
.panel h3,
.card h3,
.post h3,
.ad h3 {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -0.025em;
}

.head h2 {
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1;
  color: var(--thq-green);
}

.panel,
.card,
.post,
.ad {
  border-color: var(--thq-line);
  border-radius: 18px;
  background: var(--thq-paper);
  box-shadow: var(--thq-shadow);
}

.card,
.post {
  padding: 17px;
}

.card h3,
.post h3,
.panel h3,
.ad h3 {
  color: var(--thq-ink);
}

.card p,
.post p,
.panel p,
.ad p,
.muted {
  color: var(--thq-muted);
  line-height: 1.55;
}

.badge {
  border: 1px solid #cbdac7;
  background: var(--thq-green-soft);
  color: #28513f;
  font-size: 10px;
  letter-spacing: 0.08em;
}

.actions button,
.controls button {
  min-height: 40px;
  border-color: var(--thq-line-strong);
  background: #fff;
  color: var(--thq-ink);
}

.actions button:hover,
.controls button:hover {
  border-color: #8fa58e;
  background: #f4f8f1;
}

.actions button.primary,
.controls button.primary {
  border-color: var(--thq-green);
  background: var(--thq-green);
  color: #fff;
}

.sidebar {
  gap: 14px;
}

.sidebar .panel,
.sidebar .ad {
  padding: 18px;
}

.sidebar .panel h3,
.sidebar .ad h3 {
  margin-top: 0;
}

.sidebar .ad {
  border-style: solid;
  border-color: #decfae;
  background: linear-gradient(145deg, #fffaf0, #f5eddc);
}

.sidebar .ad small {
  color: #7a6842;
}

.sidebar .ad button {
  border-color: var(--thq-line-strong);
  background: #fff;
  color: var(--thq-ink);
}

.room-group,
.room-link,
.group-head {
  border-color: var(--thq-line);
}

.group-head {
  background: linear-gradient(180deg, #fff, #f7f8f4);
}

.room-link.active {
  border-color: var(--thq-green);
  background: var(--thq-green);
}

.site-legal {
  border: 1px solid var(--thq-line);
  border-radius: 18px;
  background: rgba(255, 253, 248, 0.94);
  box-shadow: var(--thq-shadow);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 3px solid rgba(199, 101, 73, 0.36);
  outline-offset: 2px;
}

@media (max-width: 920px) {
  .app-main > .stack > .head {
    padding: 15px 16px;
  }

  .sidebar .panel,
  .sidebar .ad {
    padding: 16px;
  }
}

@media (max-width: 640px) {
  .main-nav button,
  .account-chip,
  .pill {
    min-height: 40px;
    padding: 8px 12px;
  }

  .card,
  .post,
  .panel,
  .ad {
    border-radius: 16px;
  }

  .head h2 {
    font-size: 30px;
  }
}