:root { --terracotta: #B8593A; --terradark: #9A4730; --sand: #F5EDE6; --ink: #2B2018; }

h1, h2, h3, .font-heading { font-family: 'Fraunces', serif; }

.brand-grad { background: linear-gradient(135deg, #B8593A 0%, #9A4730 100%); }

.card { background:#fff; border:1px solid #ece2d7; border-radius:16px;
  box-shadow:0 1px 3px rgba(43,32,24,.06); transition:transform .15s, box-shadow .15s; }
.card:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(43,32,24,.10); }

.btn { background:var(--terracotta); color:#fff; border-radius:12px; font-weight:600;
  transition:background .15s; }
.btn:hover { background:var(--terradark); }
.btn-ghost { background:transparent; color:var(--terracotta); border:1px solid #e3d6c8; border-radius:12px; }
.btn-ghost:hover { background:#faf5ef; }

.nav-item { border-radius:12px; transition:background .15s,color .15s; }
.nav-item.active { background:rgba(255,255,255,.18); color:#fff; }
.nav-item:not(.active):hover { background:rgba(255,255,255,.10); }

.status-dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
.s-connected{ background:#22c55e; } .s-pending{ background:#f59e0b; } .s-disconnected{ background:#ef4444; }

.field { border:1px solid #e3d6c8; border-radius:12px; background:#fff; }
.field:focus { outline:none; border-color:var(--terracotta); box-shadow:0 0 0 3px rgba(184,89,58,.12); }

.out-box { background:#fffdfb; border:1px dashed #e3d6c8; border-radius:14px; white-space:pre-wrap; }
.spin { animation:sp 1s linear infinite; } @keyframes sp{to{transform:rotate(360deg)}}
.fade-in { animation:fi .3s ease; } @keyframes fi{from{opacity:0;transform:translateY(6px)}to{opacity:1}}
.stream-caret { display:inline-block; width:.5ch; color:#B8593A; animation:bl 1s steps(2) infinite; } @keyframes bl{50%{opacity:0}}