body{ background:var(--bg-page); }
#appRoot{ min-height:100vh; }

.topbar{
  display:flex; align-items:center; flex-wrap:wrap; gap:12px 18px; padding:18px 32px;
  position:sticky; top:0; z-index:20; background:rgba(238,240,246,.82); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(10,14,26,.05);
}
.topbar .spacer{flex:1;}
.admin-bar{display:flex; align-items:center; gap:10px;}
.admin-bar select{padding:8px 10px; border-radius:10px; border:1px solid var(--line); font-family:inherit; font-size:13px; background:#fff;}
.month-bar{display:flex; align-items:center;}
.month-bar select{
  padding:8px 12px; border-radius:10px; border:1.5px solid var(--cyan-soft); font-family:inherit;
  font-size:13px; font-weight:700; color:var(--cyan-deep); background:#fff;
}
.ghost-btn{
  background:#fff; border:1px solid var(--line); color:var(--ink-2); font-family:inherit;
  font-size:12.5px; font-weight:600; padding:8px 14px; border-radius:10px; cursor:pointer; transition:.15s;
}
.ghost-btn:hover{border-color:var(--cyan-deep); color:var(--cyan-deep);}
.admin-only{display:none;}
body.is-admin .admin-only{display:flex;}

.wrap{max-width:1180px; margin:0 auto; padding:28px 32px 80px;}

/* ---------- hero ---------- */
.hero{display:grid; grid-template-columns:280px 1fr; gap:20px; margin-bottom:26px; align-items:stretch;}
.hero.solo{grid-template-columns:280px;}
@media (max-width:860px){ .hero, .hero.solo{grid-template-columns:1fr;} }

/* brief about the month (free text the admin writes, replaces the old KPI tile) */
.brief-card{
  background:linear-gradient(135deg,var(--cyan-soft) 0%,#fff 65%); border:1px solid rgba(14,165,192,.18);
  border-radius:24px; padding:22px 26px; display:flex; flex-direction:column; justify-content:center;
  box-shadow:0 8px 30px rgba(10,14,26,.06);
}
.brief-card .brief-eyebrow{font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--cyan-deep); margin-bottom:8px;}
.brief-card .brief-text{font-size:15.5px; line-height:1.6; color:var(--ink); font-weight:500;}
.brief-card .brief-text.muted{color:var(--ink-3); font-weight:400;}
.brief-card.empty{background:#fcfcfd; border-style:dashed;}

.card{
  background:var(--card); border-radius:24px; padding:22px 24px;
  box-shadow:0 8px 30px rgba(10,14,26,.06);
}

.profile-card{display:flex; flex-direction:column; align-items:flex-start; gap:14px;}
/* initials fallback: a soft circle */
.avatar-ring{
  width:60px;height:60px;border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--cyan-soft),#fff);
  font-weight:800; font-size:20px; color:var(--cyan-deep); overflow:hidden;
}
.avatar-ring img{width:100%;height:100%;object-fit:cover;}
/* a real logo shows full and uncropped, no circle, no background behind it */
.avatar-ring.has-logo{
  width:auto; height:56px; max-width:160px; border-radius:0; background:none; overflow:visible;
}
.avatar-ring.has-logo img{width:auto; height:100%; max-width:160px; object-fit:contain;}

.profile-meta{display:flex; flex-direction:column; gap:2px;}
.profile-card .welcome-eyebrow{
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3);
}
.profile-card h2{margin:0; font-size:20px; line-height:1.2; letter-spacing:-.01em; color:var(--ink);}
.profile-card .role{color:var(--ink-3); font-size:12.5px; margin-top:3px;}
.profile-card .period-pill{
  font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--cyan-deep); background:var(--cyan-soft); padding:5px 11px; border-radius:999px;
}

.gradient-tile{
  border-radius:24px; padding:22px 24px; color:#fff; position:relative; overflow:hidden;
  box-shadow:0 14px 34px rgba(10,14,26,.14);
}
.gradient-tile.cyan{background:linear-gradient(135deg,#2DD4F4 0%,#0EA5C0 100%);}
.gradient-tile.ink{background:linear-gradient(135deg,#243247 0%,#0A0E1A 100%);}
.gradient-tile .g-label{font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; opacity:.85;}
.gradient-tile .g-val{font-size:40px; font-weight:800; letter-spacing:-.03em; margin:8px 0 2px; line-height:1;}
.gradient-tile .g-sub{font-size:12.5px; opacity:.85;}
.gradient-tile .g-badge{
  position:absolute; top:18px; right:18px; width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.22); display:flex; align-items:center; justify-content:center; font-size:15px;
}

/* ---------- section cards ---------- */
.section-card{
  margin-bottom:20px; opacity:0; transform:translateY(18px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1);
}
.section-card.in-view{opacity:1; transform:none;}
.section-head{display:flex; align-items:baseline; gap:10px; margin-bottom:16px;}
.section-head h3{margin:0; font-size:17px; letter-spacing:-.01em;}
.section-head .count{color:var(--ink-3); font-size:12px; font-weight:600;}

/* stat tiles (single-value metrics) */
.stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px;}
.stat-tile{border:1px solid var(--line); border-radius:16px; padding:15px 16px; background:#fcfcfd;}
.stat-tile .s-label{font-size:11px; color:var(--ink-3); font-weight:700; letter-spacing:.04em; text-transform:uppercase; margin-bottom:6px;}
.stat-tile .s-val{font-size:22px; font-weight:800; letter-spacing:-.02em; color:var(--ink); line-height:1.1;}
.stat-tile .s-val .unit{font-size:12px; color:var(--ink-3); font-weight:600; margin-left:2px;}
.stat-tile .s-delta{font-size:11.5px; font-weight:700; margin-top:5px;}
/* client-facing palette is deliberately calm: green for genuinely good, yellow
   for okay/in-progress, everything else (including anything bad) stays gray,
   never red, never "urgent" looking. */
.stat-tile .s-delta.good{color:var(--good);} .stat-tile .s-delta.neutral{color:var(--ink-3);}
.stat-tile .s-status{
  display:inline-block; margin-top:6px; font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:3px 9px; border-radius:999px;
}
.stat-tile .s-status.good{background:#E7F9F1; color:var(--good);}
.stat-tile .s-status.ok{background:var(--warn-soft); color:var(--warn);}
.stat-tile .s-status.neutral{background:#F1F2F5; color:var(--ink-3);}
.stat-tile .s-notes{font-size:11.5px; color:var(--ink-3); margin-top:6px; line-height:1.4;}

/* donut ring for score-style metrics */
.donut-tile{display:flex; align-items:center; gap:12px;}
.donut-tile svg{flex:none;}
.donut-tile .d-label{font-size:11px; color:var(--ink-3); font-weight:700; text-transform:uppercase; letter-spacing:.04em;}
.donut-tile .d-val{font-size:19px; font-weight:800; color:var(--ink);}

/* platform sub-groups (e.g. Social: Instagram / Facebook) */
.platform-block{margin-bottom:16px;}
.platform-block:last-child{margin-bottom:0;}
.platform-block .p-name{
  font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--cyan-deep); margin-bottom:10px;
}

/* list-style metrics (repeated rows, e.g. Blog Post, Roadmap step) */
.metric-list{list-style:none; margin:0; padding:0;}
.metric-list li{
  padding:10px 0; border-bottom:1px solid var(--line); display:flex; gap:10px; align-items:flex-start;
}
.metric-list li:last-child{border-bottom:none;}
.metric-list .li-bullet{
  width:7px; height:7px; border-radius:50%; background:var(--cyan); margin-top:6px; flex:none;
  box-shadow:0 0 0 3px var(--cyan-soft);
}
.metric-list .li-title{font-size:13.5px; font-weight:600; color:var(--ink);}
.metric-list .li-notes{font-size:12px; color:var(--ink-3); margin-top:2px;}

/* report table (blog posts: post / date / keyword focus) */
.report-table-wrap{overflow-x:auto;}
.report-table{width:100%; border-collapse:collapse; font-size:13px;}
.report-table th{
  text-align:left; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-3); padding:0 14px 8px 0; border-bottom:1.5px solid var(--line); white-space:nowrap;
}
.report-table td{padding:11px 14px 11px 0; border-bottom:1px solid var(--line); color:var(--ink); vertical-align:top;}
.report-table tr:last-child td{border-bottom:none;}
.report-table .bt-post{font-weight:600; min-width:180px;}
.report-table .bt-post a{color:var(--cyan-deep); text-decoration:none;}
.report-table .bt-post a:hover{text-decoration:underline;}
.report-table .bt-date{color:var(--ink-2); white-space:nowrap;}
.report-table .bt-kw{color:var(--ink-2);}

/* narrative-style card (Executive Summary headline, Incident) */
.narrative-card{
  background:linear-gradient(135deg,var(--cyan-soft) 0%,#fff 60%); border-radius:18px; padding:18px 20px;
  margin-bottom:14px; border:1px solid rgba(14,165,192,.18);
}
.narrative-card .n-eyebrow{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--cyan-deep); margin-bottom:6px;}
.narrative-card .n-text{font-size:15px; font-weight:600; color:var(--ink); line-height:1.5;}
/* incidents and other narrative call-outs always use the calm default styling
   above, no red "urgent" variant, even for a genuinely bad incident. */

.empty-state{
  padding:30px 20px; text-align:center; color:var(--ink-3); font-size:13.5px; border:1.5px dashed var(--line);
  border-radius:16px; background:#fcfcfd;
}

/* animated bars (used for per-platform comparisons, e.g. followers by platform) */
.bar-rows{display:flex; flex-direction:column; gap:10px;}
.bar-row{display:grid; grid-template-columns:110px 1fr 60px; align-items:center; gap:10px;}
.bar-row .b-name{font-size:12.5px; color:var(--ink-2); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;}
.bar-row .b-track{background:#F1F2F5; height:8px; border-radius:5px; overflow:hidden;}
.bar-row .b-fill{height:100%; border-radius:5px; width:0; background:linear-gradient(90deg,var(--cyan),var(--cyan-deep)); transition:width 1s cubic-bezier(.2,.8,.2,1);}
.bar-row .b-val{font-size:12.5px; font-weight:700; text-align:right;}

@media (max-width:520px){
  .topbar{padding:12px 16px;}
  .bar-row{grid-template-columns:72px 1fr 44px; gap:6px;}
  .bar-row .b-val{font-size:11px;}
}

.no-report-card{
  padding:60px 30px; text-align:center; border-radius:24px; background:#fff; box-shadow:0 8px 30px rgba(10,14,26,.06);
}
.no-report-card h2{margin:0 0 8px;}
.no-report-card p{color:var(--ink-2);}