:root{
  --bg:#f5f3ee; --card:#ffffff; --ink:#23211c; --muted:#7c776c;
  --line:#e7e3d9; --brand:#3f6f5b; --brand-soft:#e4efe8; --accent:#d98c54;
  --ok:#3f8f63; --warn:#c5532f; --warnbg:#fbe9e1; --okbg:#e6f1ea;
  --shadow:0 6px 22px rgba(40,38,30,.08);
  --r:18px;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a { text-decoration: none; color: inherit; }

/* Base Components */
h1, h2, h3 { letter-spacing: -.4px; margin-top: 0; }
h1 { font-size: 28px; margin-bottom: 16px; }
h2 { font-size: 22px; margin-bottom: 12px; }

.sub { color:var(--muted); font-size:15px; margin-bottom:14px; }

.card {
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:20px;
  box-shadow:var(--shadow);
}
.card h3 { margin:0 0 8px; font-size:16px; }
.card .mini { color:var(--muted); font-size:13px; }

.row { display:flex; align-items:center; gap:12px; }
.between { justify-content:space-between; }

.pill {
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:600; padding:4px 10px;
  border-radius:999px; background:var(--brand-soft); color:var(--brand);
}
.pill.live { background:var(--okbg); color:var(--ok); }
.pill.warn { background:var(--warnbg); color:var(--warn); }

.dot { width:7px; height:7px; border-radius:50%; background:currentColor; animation:pulse 1.4s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

.avatar {
  width:44px; height:44px; border-radius:50%;
  background:var(--brand-soft); color:var(--brand);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:16px; flex-shrink:0;
}

.btn {
  display:inline-block; border:0; border-radius:14px; padding:15px 24px;
  font-size:15px; font-weight:700; background:var(--brand); color:#fff;
  cursor:pointer; text-align:center; transition: transform 0.1s;
}
.btn.full { width: 100%; }
.btn:active { transform:scale(.99); }
.btn.sec { background:var(--card); color:var(--brand); border:1.5px solid var(--brand); }
.btn.ghost { background:transparent; color:var(--muted); font-weight:600; }
.btn.warn { background:var(--accent); }
.btn[disabled] { opacity:.45; cursor:not-allowed; }

.vital { flex:1; text-align:center; background:var(--bg); border-radius:12px; padding:10px 6px; }
.vital b { display:block; font-size:18px; line-height:1.1; }
.vital small { color:var(--muted); font-size:11px; }
.vital.ok b { color:var(--ok); }
.vital.bad b { color:var(--warn); }

.chip {
  font-size:12px; background:var(--bg); border:1px solid var(--line);
  border-radius:999px; padding:6px 12px; color:var(--muted);
  cursor:pointer; white-space:nowrap; display: inline-block;
}
.chip.on { background:var(--brand); color:#fff; border-color:var(--brand); }

textarea, input {
  width:100%; border:1px solid var(--line); border-radius:12px; padding:12px;
  font-size:14px; font-family:inherit; background:var(--bg); color:var(--ink);
}

.tag {
  font-size:11px; background:var(--brand-soft); color:var(--brand);
  padding:3px 8px; border-radius:7px; font-weight:600;
}

/* Layout helpers */
.container {
  max-width: 1200px; margin: 0 auto; padding: 0 20px; width: 100%;
}