/* Owner console: reuses the dashboard design system (/admin/styles.css) */
.console-tag { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.state { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 650; padding: 3px 9px; border-radius: 99px; white-space: nowrap; }
.state::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.state.active { background: var(--green-soft); color: var(--green); }
.state.expiring, .state.grace { background: var(--amber-soft); color: var(--amber); }
.state.readonly, .state.suspended { background: var(--red-soft); color: var(--red); }
.state.trial { background: var(--purple-soft); color: var(--purple); }
.proc { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--faint); flex-shrink: 0; }
.proc.running { background: #1fa971; box-shadow: 0 0 0 3px color-mix(in srgb, #1fa971 20%, transparent); }
.proc.crashed { background: var(--red); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; font-size: 14px; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.welcome-box { white-space: pre-wrap; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 14px; font-size: 14px; line-height: 1.55; }
.logbox { white-space: pre-wrap; background: #0b0f16; color: #cfd6e4; border-radius: var(--radius-md); padding: 12px; font: 12px/1.5 ui-monospace, Consolas, monospace; max-height: 60vh; overflow: auto; }
.calc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 20px; align-items: start; }
.calc-in { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.calc-in .col-span { grid-column: 1 / -1; }
.money-in { position: relative; }
.money-in::before { content: '$'; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 600; pointer-events: none; }
.money-in input { padding-left: 24px; }
.big-num { font-family: var(--font-head); font-size: 30px; font-weight: 750; line-height: 1.1; font-variant-numeric: tabular-nums; }
.profit-pos { color: var(--green); } .profit-neg { color: var(--red); }
.plan-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.plan-card { display: flex; flex-direction: column; gap: 6px; }
.plan-card .price { font-family: var(--font-head); font-size: 30px; font-weight: 750; }
.plan-card .price small { font-size: 14px; color: var(--muted); font-weight: 500; font-family: var(--font-body); }
.plan-card.off { opacity: .55; }
.slug-field { display: flex; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
.slug-field input { border: none; box-shadow: none !important; min-width: 0; }
.slug-field span { padding: 0 12px; color: var(--muted); white-space: nowrap; background: var(--surface-2); align-self: stretch; display: flex; align-items: center; border-left: 1px solid var(--line); font-size: 14px; }
.slug-field:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
@media (max-width: 1000px) { .calc-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .calc-in { grid-template-columns: 1fr; } }