/* BrandJet's orange wordmark and warm neutral palette, adapted for client reporting. */
:root {
  --ink: #171717;
  --muted: #696763;
  --border: #dedad4;
  --paper: #fff;
  --bg: #f4f2ef;
  --blue: #f45b30;
  --blue-dark: #d83e1c;
  --soft-blue: #fff0e9;
  --shadow: 0 9px 28px rgba(30, 24, 19, .045);
}

html { font-family: Inter, "Segoe UI", Arial, sans-serif; }
h1, h2, h3, .brand-product { font-family: Inter, "Segoe UI", Arial, sans-serif; }
body {
  background-color: var(--bg);
  background-image: radial-gradient(rgba(42, 38, 34, .07) .7px, transparent .7px);
  background-size: 28px 28px;
}

.topbar { border-bottom: 1px solid #d6d1cb; box-shadow: 0 2px 12px rgba(25, 20, 16, .025); }
.topbar-inner { gap: 35px; }
.brand { gap: 12px; }
.brand-logo { display: block; width: 141px; height: auto; }
.brand-product {
  border-left: 1px solid #d6d1cb;
  padding-left: 12px;
  color: #55514d;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .15em;
}
.topnav a { color: #706b66; }
.topnav a:hover, .topnav a[aria-current=page] { color: var(--blue-dark); }
.account-email { color: #77736e; }
.footer { background: #fff; border-color: #dedad4; color: #8d8882; }
.footer span { color: var(--blue); }

.eyebrow, .card-kicker { color: var(--blue-dark); letter-spacing: .14em; }
.lede, .muted, .auth-intro p { color: #706d69; }
.summary-number { background: #fff0e9; color: #bd3e20; }
.period-bar, .metric-panel, .panel { border-color: #dedad4; }
.metric-panel, .panel { border-top: 2px solid #262220; }
.period-copy span, .channel-count, .client-meta small { color: #89837c; }

input, select { border-color: #d9d4cd; color: var(--ink); }
input:focus, select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(244, 91, 48, .14); }
label { color: #4b4845; }
.button.primary { background: var(--blue-dark); box-shadow: 0 6px 14px rgba(216, 62, 28, .16); }
.button.primary:hover { background: #c43b18; }
.button.secondary { background: #f6f4f1; border-color: #dedad4; color: #3c3835; }
.button.secondary:hover { background: #eeebe7; }

.channel-icon, .avatar { background: #fff0e9; color: #d34925; }
.channel-icon.linkedin { background: #e8f3fd; color: #0c75ac; }
.client-row:hover { background: #fffaf6; }
.stat { border-color: #ebe6e0; }
.stat span { color: #817b75; }
.metric-heading, .metric-foot, .viewer-list, .viewer-row { border-color: #eeeae5; }
.metric-foot { color: #8c857e; }
.info-note { background: #fff5ee; border-color: #f7dfd1; color: #66534b; }
.info-mark { background: #ffe2d4; color: var(--blue-dark); }
.back-link { color: var(--blue-dark); }

.auth-intro .eyebrow { font-size: 11px; }
.auth-intro h1 { color: #171717; }
.auth-lines span { background: #f45b30; }
.auth-lines span:nth-child(2) { background: #f9ad8b; }
.auth-lines span:nth-child(3) { background: #fbd9c8; }
.auth-card {
  border: 2px solid #201d1a;
  border-radius: 11px;
  box-shadow: 7px 7px 0 #201d1a;
}
.auth-card h2 { color: #171717; }
.form-footnote { color: #8c857e; }
.private-badge { color: #35654b; }
.tokens-layout .field-help code { background: #f4f2ef; color: #554e49; }

@media (max-width: 700px) {
  .topbar-inner { flex-wrap: wrap; gap: 6px 14px; padding-top: 10px; padding-bottom: 8px; }
  .brand { margin-right: auto; }
  .brand-logo { width: 116px; }
  .brand-product { display: none; }
  .topnav { order: 3; width: 100%; height: 34px; gap: 20px; }
  .account { margin-left: auto; }
  .auth-card { box-shadow: 5px 5px 0 #201d1a; }
}