/* ── Cost Analytics tab ────────────────────────────────────────────────── */
          .cost-layout { padding:24px; max-width:1200px; }
  .cost-grid-top { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
  .cost-stat-card { background:var(--surface); border:1px solid var(--border); border-radius:12px;
    padding:16px 20px; }
  .cost-stat-label { font-size:11px; color:var(--muted); text-transform:uppercase;
    letter-spacing:0.05em; margin-bottom:8px; }
  .cost-stat-value { font-size:24px; font-weight:700; font-family:var(--font); }
  .cost-stat-sub { font-size:11px; color:var(--muted); margin-top:4px; }
  .cost-section { background:var(--surface); border:1px solid var(--border); border-radius:12px;
    overflow:hidden; margin-bottom:24px; }
  .cost-section-header { padding:14px 20px; border-bottom:1px solid var(--border);
    display:flex; justify-content:space-between; align-items:center; }
  .cost-section-title { font-size:13px; font-weight:600; }
  .cost-table { width:100%; border-collapse:collapse; font-size:13px; }
  .cost-table th { padding:10px 16px; text-align:left; font-size:11px; font-weight:600;
    color:var(--muted); text-transform:uppercase; letter-spacing:0.05em;
    border-bottom:1px solid var(--border); background:var(--border-subtle); }
  .cost-table td { padding:12px 16px; border-bottom:1px solid var(--border); }
  .cost-table tr:last-child td { border-bottom:none; }
  .cost-table tr:hover td { background:var(--border-subtle); }
  .cost-bar-wrap { background:var(--border-subtle); border-radius:4px; height:6px;
    width:120px; display:inline-block; vertical-align:middle; margin-left:8px; }
  .cost-bar { height:6px; border-radius:4px; background:var(--accent); }
  .cost-green { color:var(--green); }
  .cost-amber { color:var(--amber); }
  .cost-red   { color:var(--red); }
  .cost-muted { color:var(--muted); }

  /* Calculator */
  .calc-grid { display:grid; grid-template-columns:1fr 1fr 1fr 1fr auto; gap:12px;
    padding:16px 20px; align-items:end; }
  .calc-group { display:flex; flex-direction:column; gap:5px; }
  .calc-group label { font-size:11px; font-weight:600; color:var(--muted);
    text-transform:uppercase; letter-spacing:0.05em; }
  .calc-group select, .calc-group input { background:var(--border-subtle);
    border:1px solid var(--border); border-radius:8px; color:var(--text);
    padding:7px 10px; font-size:13px; }
  .calc-group select:focus, .calc-group input:focus { outline:none; border-color:var(--accent); }
  .calc-result { background:var(--info-bg-tint); border:1px solid var(--info-border);
    border-radius:10px; padding:14px 20px; margin:0 20px 16px; }
  .calc-result-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
  .calc-result-item { text-align:center; }
  .calc-result-label { font-size:10px; color:var(--muted); text-transform:uppercase;
    letter-spacing:0.05em; margin-bottom:4px; }
  .calc-result-val { font-size:16px; font-weight:700; font-family:var(--font); color:var(--accent); }
  .calc-result-total { font-size:20px; color:var(--green); }
  .btn-calc { background:var(--accent); color:var(--text-inverted); border:none; padding:8px 16px;
    border-radius:8px; font-size:13px; cursor:pointer; white-space:nowrap; }
  .btn-calc:hover { background:var(--accent-hover); }

  .combo-best     { background:var(--success-bg-tint); border-left:3px solid var(--green); }
  .combo-badge    { font-size:10px; padding:2px 6px; border-radius:4px; font-weight:600; }
  .combo-fastest  { background:var(--success-bg-tint); color:var(--green); }
  .combo-cheapest { background:var(--warning-bg-tint); color:var(--amber); }
  .combo-balanced { background:var(--info-bg-tint);    color:var(--accent); }

  /* UI-A redesign: Detail sub-tabs + estimated-row tint + Plan-a-stack collapse. */
  .cost-subtab { background:var(--border-subtle); border:1px solid var(--border);
    border-radius:6px; color:var(--muted); padding:5px 12px; font-size:12px;
    cursor:pointer; font-family:inherit; }
  .cost-subtab:hover { background:var(--border-subtle); color:var(--text); }
  .cost-subtab-active, .cost-subtab.cost-subtab-active { background:var(--accent);
    color:var(--text-inverted); border-color:var(--accent); }
  /* Estimated rows in Call Spend History — keep the (est) suffix and add a
     subtle warm tint so the eye picks them out at a glance. */
  .spend-row-est { background:var(--warning-bg-tint); }
  .spend-row-est:hover td { background:var(--warning-border) !important; }
  /* Plan-a-stack <details> wrapper. The browser default <summary> arrow is
     replaced by an inline emoji for visual continuity with section headers. */
  details.cost-section > summary { padding:14px 20px; cursor:pointer;
    display:flex; align-items:center; justify-content:space-between;
    list-style:none; user-select:none;
    border-bottom:1px solid transparent; }
  details.cost-section[open] > summary { border-bottom-color:var(--border); }
  details.cost-section > summary::-webkit-details-marker { display:none; }
  details.cost-section > summary::after { content:'▸'; color:var(--muted);
    transition:transform 0.15s; }
  details.cost-section[open] > summary::after { transform:rotate(90deg); }