/* ==========================================================================
   Blog Automation – tokens: price chips on AI buttons, cost box (balance · cost · afterwards), sidebar token box,
   Plan & Tokens page, Tokens & KI-Modelle page, own AI keys (Settings → KI), automation token plan, admin token views.
   Colours only via theme.css tokens; no gradients, no capital-letter labels, no thick coloured bars.
   ========================================================================== */
.tok-price { margin-left: 6px; font-weight: 500; opacity: .85; white-space: nowrap; }

/* cost box under every AI form */
.tok-cost { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); font-size: var(--fs-sm); }
.tok-cost > .ico { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--accent); }
.tok-cost .grow { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tok-cost-cells { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.tok-cost-cells b { font-variant-numeric: tabular-nums; }
.tok-cost.low { background: var(--err-bg); border-color: color-mix(in srgb, var(--err) 35%, transparent); }
.tok-cost.low > .ico { color: var(--err); }
.tok-cost-act { display: flex; flex-wrap: wrap; gap: 6px; flex: none; }
@media (max-width: 640px) { .tok-cost { flex-wrap: wrap; } .tok-cost-act { width: 100%; } }

/* sidebar box */
.tok-balance { margin: 4px 0 8px; display: flex; align-items: baseline; gap: 6px; }
.tok-balance span:first-child { font-size: var(--fs-xl); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Plan & Tokens */
.tok-big { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tok-big b { font-size: 34px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tok-lots { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tok-lots li { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--fs-sm); }
.tok-lots li b { text-align: right; font-variant-numeric: tabular-nums; }
.tok-lots li .xs { grid-column: 1 / -1; }
.c-plans.tok-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .c-plans.tok-plans { grid-template-columns: minmax(0, 1fr); } }
.tok-plan-tokens { padding: 10px 12px; border-radius: var(--radius); background: var(--accent-50); }
.tok-plan-tokens b { font-size: var(--fs-lg); }
.tok-ownkey { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border: 1px dashed var(--accent); border-radius: var(--radius); }
.tok-ownkey .ico { width: 16px; height: 16px; flex: none; color: var(--accent); margin-top: 2px; }
.tok-qty { display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; align-items: center; }
.tok-qty input { width: 72px; text-align: center; }
.tok-qty-sum { grid-column: 1 / -1; padding: 10px 12px; border-radius: var(--radius); background: var(--surface-2); }
[data-mode="dark"] .tok-plan-tokens { background: var(--surface-3); }

/* Tokens & KI-Modelle */
.tok-reach { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 0 16px 16px; }
.tok-reach-item { display: flex; flex-direction: column; gap: 2px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); }
.tok-reach-item.cur { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-50); }
.tok-reach-n { font-size: var(--fs-lg); font-weight: 700; }
@media (max-width: 900px) { .tok-reach { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .tok-reach { grid-template-columns: minmax(0, 1fr); } }
.c-show-sm { display: none; }
@media (max-width: 700px) { .c-show-sm { display: block; } }

/* AI wizard cost rows + options */
.bp-cost { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.bp-cost-rows { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); }
.bp-cost-rows > span { display: flex; flex-direction: column; }
.bp-cost-rows small { color: var(--text-3); font-size: var(--fs-xs); }
.bp-cost-rows b { text-align: right; font-variant-numeric: tabular-nums; }
.bp-cost-rows .bp-cost-sum { padding-top: 6px; border-top: 1px solid var(--border); font-weight: 700; }
.bp-imgrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.bp-inline { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); }
.bp-inline select { max-width: 280px; }

/* automations: token plan */
.b-tokplan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.b-tokplan > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); min-width: 0; }
@media (max-width: 560px) { .b-tokplan { grid-template-columns: minmax(0, 1fr); } }

/* Settings → KI: models + own keys */
.c-fixedmodels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.c-fixedmodels > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); }
@media (max-width: 560px) { .c-fixedmodels { grid-template-columns: minmax(0, 1fr); } }
.c-keyrow { padding: 12px 0; border-bottom: 1px solid var(--border); }
.c-keyrow:last-child { border-bottom: 0; }
.c-keyrow-head { display: flex; align-items: center; gap: 12px; }
.c-keyrow-act { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-left: 48px; }
.c-keyrow .c-keyform { margin-top: 10px; }
@media (max-width: 560px) { .c-keyrow-act { padding-left: 0; } }

/* admin */
.c-paramgrid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.c-facts.c-facts-col { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
.c-ledger summary { cursor: pointer; margin: 8px 0; }
.c-ok-text { color: var(--ok); font-weight: 600; }
/* table cells hidden on phones (c-hide-sm is for inline elements) */
@media (max-width: 700px) { .tok-hide-sm { display: none; } }