/* Platform console: same tokens as the app, a darker frame so it never gets mistaken for an agency's view. */
.console .ctop { background: #141B24; color: #E8EDF4; }
.console .ctop-in { max-width: 1180px; margin: 0 auto; padding: 12px max(16px, env(safe-area-inset-left)); display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; }
.console .cbrand { font-family: var(--display); font-weight: 700; font-size: 1.35rem; color: #E8EDF4; text-decoration: none; }
.console .cbrand span { color: #8FB3E6; font-family: var(--body); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-left: 8px; vertical-align: middle; }
.console .cnav { display: flex; gap: 4px; flex-wrap: wrap; }
.console .cnav a { color: #AEB9C8; text-decoration: none; font-weight: 600; font-size: 14px; padding: 6px 10px; border-radius: 4px; }
.console .cnav a[aria-current="page"] { color: #fff; background: rgba(143, 179, 230, .18); }
.console .cright { margin-left: auto; display: flex; gap: 10px; align-items: center; font-size: 13px; color: #AEB9C8; }
.console .cright button { background: transparent; color: #E8EDF4; border-color: #3A4656; }
.console .filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; }
.console .filters label { flex: 0 1 240px; }
.console .tile.money b { color: var(--ok); }
.console .danger-zone { border-color: var(--warn); }
.console code { font-family: var(--mono); font-size: 12px; background: var(--bg); padding: 1px 5px; border-radius: 3px; }
.cnav .count { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px; background: var(--bad, #b42318); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.console .filters { margin: 12px 0; }

.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.vchart { position: relative; }
.vchart svg { width: 100%; height: auto; display: block; }
.vchart .grid { stroke: var(--line); stroke-width: 1; }
.vchart .axis { stroke: var(--muted); stroke-width: 1; }
.vchart .tick { fill: var(--muted); font-size: 11px; font-family: var(--body); }
.vchart .bar { fill: var(--accent); }
.vchart .vbar.on .bar { fill: color-mix(in srgb, var(--accent) 75%, var(--ink)); }
.vchart .hit { fill: transparent; }
.vchart .conv { fill: var(--ok); stroke: var(--surface); stroke-width: 2; }
.vtip { position: absolute; width: 180px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; font-size: 12px; box-shadow: 0 4px 14px rgba(0,0,0,.12); pointer-events: none; }
.convkey { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); vertical-align: middle; }
.cbrand { display: inline-flex; align-items: center; gap: 10px; }
.cbrand img { height: 26px; width: auto; display: block; }

/* Sidebar (sales, billing, support and team need more room than a top bar) */
.console .cwrap { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: calc(100vh - 52px); }
.console .cside { background: #1B2430; padding: 14px 10px 24px; display: flex; flex-direction: column; gap: 14px; position: sticky; top: 0; align-self: start; height: calc(100vh - 52px); overflow-y: auto; }
.console .cside h4 { margin: 0 8px 4px; font: 700 11px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: #7F8DA0; }
.console .cside nav { display: grid; gap: 1px; }
.console .cside a { display: flex; justify-content: space-between; align-items: center; padding: 7px 10px; border-radius: 5px; color: #C9D3E0; text-decoration: none; font-size: 14px; font-weight: 500; }
.console .cside a:hover { background: rgba(143, 179, 230, .12); }
.console .cside a[aria-current="page"] { background: rgba(143, 179, 230, .22); color: #fff; font-weight: 700; }
.console .cside .count { min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--warn); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.console .cmain { min-width: 0; }
.console .cmain > main { max-width: 1180px; margin: 0 auto; padding: 20px 16px 60px; }
.console .rolechip { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8FB3E6; }
@media (max-width: 860px) {
  .console .cwrap { grid-template-columns: 1fr; }
  .console .cside { position: static; height: auto; flex-direction: row; overflow-x: auto; gap: 18px; padding: 8px 10px; }
  .console .cside nav { display: flex; gap: 2px; }
  .console .cside h4 { display: none; }
  .console .cside a { white-space: nowrap; }
}
/* Estimate calculator */
.calc { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 960px) { .calc { grid-template-columns: 1fr; } }
.calc .result { position: sticky; top: 12px; }
.calc .big { font: 700 30px/1.1 var(--display); }
.calc table { width: 100%; border-collapse: collapse; font-size: 14px; }
.calc td, .calc th { padding: 6px 4px; border-bottom: 1px solid var(--line); text-align: left; }
.calc .num, .calc td.num { text-align: right; }
.approve-ok { border-left: 4px solid var(--ok); }
.approve-need { border-left: 4px solid var(--amber); }
.appgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 12px; }
.appgrid label { display: flex; gap: 6px; align-items: center; font-weight: 400; font-size: 14px; }
.appgrid input { width: auto; }
.timeline { display: grid; gap: 6px; font-size: 14px; }
.timeline div { display: flex; gap: 10px; justify-content: space-between; border-bottom: 1px solid var(--line); padding: 6px 0; }
.row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.row4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 640px) { .row3, .row4 { grid-template-columns: 1fr 1fr; } }
.console .guide { line-height: 1.55; }
.console .guide h3 { margin: 14px 0 4px; }