/*
 * Infineural Books UI — Elevexa design language, shared by wp-admin and
 * the client portal. Every surface/text/border goes through tokens, so
 * light, dark and accent come free. Components are prefixed .inb-.
 */

/* ---------- Tokens ---------- */
.inb-ui {
	--inb-font: "Inter", "InterVariable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--inb-font-display: "Inter Display", "Inter", ui-sans-serif, system-ui, sans-serif;
	--inb-font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

	--r-sm: 6px; --r-md: 8px; --r-lg: 10px; --r-xl: 14px; --r-2xl: 18px;
	--shadow-xs: 0 1px 2px 0 oklch(0% 0 0 / .04);
	--shadow-sm: 0 1px 2px 0 oklch(0% 0 0 / .05), 0 1px 3px 0 oklch(0% 0 0 / .03);
	--shadow-md: 0 4px 12px -2px oklch(0% 0 0 / .06), 0 2px 4px -1px oklch(0% 0 0 / .04);
	--shadow-lg: 0 12px 24px -6px oklch(0% 0 0 / .08), 0 4px 8px -2px oklch(0% 0 0 / .05);

	--ink-0: oklch(100% 0 0); --ink-50: oklch(98.5% .003 265); --ink-100: oklch(96.8% .004 265);
	--ink-150: oklch(94.5% .005 265); --ink-300: oklch(86% .008 265); --ink-400: oklch(71% .012 265);
	--ink-500: oklch(56% .014 265); --ink-600: oklch(44% .016 265); --ink-700: oklch(34% .018 265);
	--ink-800: oklch(24.5% .02 265); --ink-850: oklch(19.8% .018 265); --ink-900: oklch(16% .016 265);
	--ink-950: oklch(11% .014 265); --ink-1000: oklch(6% .012 265);

	--accent-h: 265; --accent-c: .22;
	--brand-50: oklch(.97 .02 var(--accent-h)); --brand-100: oklch(.94 .05 var(--accent-h));
	--brand-300: oklch(.78 .14 var(--accent-h)); --brand-400: oklch(.68 .19 var(--accent-h));
	--brand-500: oklch(.6 var(--accent-c) var(--accent-h)); --brand-600: oklch(.53 var(--accent-c) var(--accent-h));
	--brand-700: oklch(.46 .2 var(--accent-h)); --brand-800: oklch(.39 .16 var(--accent-h));

	--success-500: oklch(58% .17 155); --success-600: oklch(50% .16 155); --success-700: oklch(42% .13 155); --success-300: oklch(78% .13 155);
	--warning-500: oklch(71% .17 78); --warning-600: oklch(62% .16 78); --warning-700: oklch(50% .13 78); --warning-300: oklch(84% .13 78);
	--danger-500: oklch(58% .22 25); --danger-600: oklch(52% .22 25); --danger-700: oklch(45% .19 25); --danger-300: oklch(78% .13 25);
	--info-500: oklch(60% .18 220); --info-600: oklch(52% .17 220); --info-700: oklch(44% .14 220); --info-300: oklch(80% .11 220);

	--bg: var(--ink-50); --surface: var(--ink-0); --surface-muted: var(--ink-100); --surface-subtle: var(--ink-150);
	--fg: var(--ink-900); --fg-muted: var(--ink-600); --fg-subtle: oklch(52% .014 265); --fg-inverse: var(--ink-50);
	--border: color-mix(in oklab, var(--ink-300) 60%, transparent);
	--border-strong: var(--ink-300);
	--border-subtle: color-mix(in oklab, var(--ink-300) 35%, transparent);
	--brand-fg: var(--brand-700);
	--tone-success: var(--success-700); --tone-warning: var(--warning-700); --tone-danger: var(--danger-700); --tone-info: var(--info-700);
	--sidebar-bg: var(--ink-0); --sidebar-fg: var(--ink-700); --sidebar-fg-active: var(--brand-600);
	--sidebar-active-bg: color-mix(in oklab, var(--brand-500) 12%, transparent);
	--inb-series-1: #2a78d6; --inb-series-2: #eb6834;
	color-scheme: light;
}


:root[data-inb-theme="dark"] .inb-ui {
	--bg: var(--ink-1000); --surface: var(--ink-900); --surface-muted: var(--ink-850); --surface-subtle: var(--ink-800);
	--fg: var(--ink-50); --fg-muted: var(--ink-300); --fg-subtle: var(--ink-400); --fg-inverse: var(--ink-950);
	--border: color-mix(in oklab, var(--ink-700) 55%, transparent);
	--border-strong: var(--ink-700);
	--border-subtle: color-mix(in oklab, var(--ink-700) 35%, transparent);
	--brand-fg: var(--brand-300);
	--tone-success: var(--success-300); --tone-warning: var(--warning-300); --tone-danger: var(--danger-300); --tone-info: var(--info-300);
	--sidebar-bg: var(--ink-950); --sidebar-fg: var(--ink-300); --sidebar-fg-active: var(--brand-300);
	--sidebar-active-bg: color-mix(in oklab, var(--brand-500) 20%, transparent);
	--inb-series-1: #3987e5; --inb-series-2: #d95926;
	color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-inb-theme]) .inb-ui {
		--bg: var(--ink-1000); --surface: var(--ink-900); --surface-muted: var(--ink-850); --surface-subtle: var(--ink-800);
		--fg: var(--ink-50); --fg-muted: var(--ink-300); --fg-subtle: var(--ink-400); --fg-inverse: var(--ink-950);
		--border: color-mix(in oklab, var(--ink-700) 55%, transparent);
		--border-strong: var(--ink-700);
		--border-subtle: color-mix(in oklab, var(--ink-700) 35%, transparent);
		--brand-fg: var(--brand-300);
		--tone-success: var(--success-300); --tone-warning: var(--warning-300); --tone-danger: var(--danger-300); --tone-info: var(--info-300);
		--sidebar-bg: var(--ink-950); --sidebar-fg: var(--ink-300); --sidebar-fg-active: var(--brand-300);
		--sidebar-active-bg: color-mix(in oklab, var(--brand-500) 20%, transparent);
		--inb-series-1: #3987e5; --inb-series-2: #d95926;
		color-scheme: dark;
	}
}

/* ---------- Base ---------- */
.inb-ui .inb-scope,
.inb-scope {
	font-family: var(--inb-font);
	color: var(--fg);
	font-size: 14px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	font-feature-settings: "cv11", "ss01";
}
.inb-scope *, .inb-scope *::before, .inb-scope *::after { box-sizing: border-box; }
:where(.inb-scope) a { color: var(--brand-fg); text-decoration: none; }
:where(.inb-scope) a:hover { text-decoration: underline; }
.inb-scope :focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; border-radius: 4px; }
.inb-num, .inb-scope .tabular { font-variant-numeric: tabular-nums; }
.inb-mono { font-family: var(--inb-font-mono); font-size: 12.5px; }
.inb-muted { color: var(--fg-muted); }
.inb-subtle { color: var(--fg-subtle); }
.inb-small { font-size: 12.5px; }
.inb-right { text-align: right; }
.inb-nowrap { white-space: nowrap; }
.inb-icon { flex: none; vertical-align: middle; }
.inb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@keyframes inb-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes inb-scale-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
.inb-animate { animation: inb-fade-in .24s ease-out both; }
@media (prefers-reduced-motion: reduce) { .inb-animate { animation: none; } }

/* ---------- Page header ---------- */
.inb-page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 0 0 24px; }
.inb-breadcrumbs { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--fg-subtle); margin-bottom: 8px; }
.inb-breadcrumbs a { color: var(--fg-subtle); }
.inb-eyebrow { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--brand-fg); margin: 0 0 4px; }
.inb-h1 { font-family: var(--inb-font-display); font-size: 26px; line-height: 1.2; font-weight: 650; letter-spacing: -.02em; margin: 0; color: var(--fg); padding: 0; }
.inb-page-desc { max-width: 720px; margin: 6px 0 0; font-size: 14px; color: var(--fg-muted); }
.inb-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ---------- Layout ---------- */
.inb-grid { display: grid; gap: 16px; }
.inb-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.inb-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.inb-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.inb-grid-main { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.inb-grid-side { grid-template-columns: 220px minmax(0, 1fr); }
.inb-stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.inb-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.inb-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.inb-mt { margin-top: 16px; }
.inb-mb { margin-bottom: 16px; }
@media (max-width: 1280px) { .inb-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .inb-grid-main { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 960px) { .inb-grid-3, .inb-grid-2, .inb-grid-side { grid-template-columns: minmax(0, 1fr); } }
.inb-grid-span-2 { grid-column: span 2; }
@media (max-width: 560px) { .inb-grid-4 { grid-template-columns: minmax(0, 1fr); } .inb-grid-span-2 { grid-column: auto; } }

/* ---------- Card ---------- */
.inb-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-2xl); box-shadow: var(--shadow-xs); transition: box-shadow .2s; min-width: 0; }
.inb-card.is-hover:hover { box-shadow: var(--shadow-md); }
.inb-card-body { padding: 20px; }
.inb-card-body.sm { padding: 16px; }
.inb-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 0; }
.inb-card-header.bordered { padding-bottom: 14px; border-bottom: 1px solid var(--border); }
@media (max-width: 640px) { .inb-card-header { flex-wrap: wrap; } .inb-card-header > * { max-width: 100%; } }
.inb-card-title { font-size: 15px; font-weight: 600; margin: 0; color: var(--fg); line-height: 1.35; }
.inb-card-desc { margin: 2px 0 0; font-size: 13px; color: var(--fg-muted); }
.inb-card-footer { margin: 0 20px; padding: 14px 0 18px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.inb-card > .inb-table-wrap { border-top: 1px solid var(--border); margin-top: 14px; }
.inb-card > .inb-table-wrap:first-child { border-top: 0; margin-top: 0; }

/* ---------- KPI ---------- */
.inb-kpi { padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.inb-kpi-top { display: flex; align-items: center; justify-content: space-between; }
.inb-kpi-label { font-size: 12.5px; font-weight: 500; color: var(--fg-muted); }
.inb-kpi-value { font-family: var(--inb-font-display); font-size: 26px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--fg); line-height: 1.2; }
.inb-kpi-foot { font-size: 12.5px; color: var(--fg-subtle); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.inb-chip-icon { height: 36px; width: 36px; border-radius: var(--r-xl); display: grid; place-items: center; background: color-mix(in oklab, var(--brand-500) 11%, transparent); color: var(--brand-fg); }
.inb-chip-icon.success { background: color-mix(in oklab, var(--success-500) 12%, transparent); color: var(--tone-success); }
.inb-chip-icon.warning { background: color-mix(in oklab, var(--warning-500) 14%, transparent); color: var(--tone-warning); }
.inb-chip-icon.danger { background: color-mix(in oklab, var(--danger-500) 12%, transparent); color: var(--tone-danger); }
.inb-chip-icon.info { background: color-mix(in oklab, var(--info-500) 12%, transparent); color: var(--tone-info); }

/* ---------- Buttons ---------- */
.inb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: var(--r-lg); font: 500 13.5px/1 var(--inb-font); border: 1px solid transparent; cursor: pointer; text-decoration: none !important; white-space: nowrap; transition: background .15s, border-color .15s, color .15s, box-shadow .15s; }
.inb-btn.sm { height: 30px; padding: 0 10px; font-size: 12.5px; border-radius: var(--r-md); }
.inb-btn.lg { height: 44px; padding: 0 20px; font-size: 15px; }
.inb-btn.icon { width: 36px; padding: 0; }
.inb-btn.sm.icon { width: 30px; }
.inb-btn.primary { background: var(--brand-600); color: #fff; box-shadow: var(--shadow-xs); }
.inb-btn.primary:hover { background: var(--brand-700); color: #fff; }
.inb-btn.primary:active { background: var(--brand-800); }
.inb-btn.secondary { background: var(--surface-muted); color: var(--fg); border-color: var(--border); }
.inb-btn.secondary:hover { background: var(--surface-subtle); color: var(--fg); }
.inb-btn.outline { background: var(--surface); color: var(--fg); border-color: var(--border-strong); }
.inb-btn.outline:hover { background: var(--surface-muted); color: var(--fg); }
.inb-btn.ghost { background: transparent; color: var(--fg-muted); }
.inb-btn.ghost:hover { background: var(--surface-muted); color: var(--fg); }
.inb-btn.soft { background: color-mix(in oklab, var(--brand-500) 11%, transparent); color: var(--brand-fg); }
.inb-btn.soft:hover { background: color-mix(in oklab, var(--brand-500) 18%, transparent); }
.inb-btn.danger { background: var(--danger-600); color: #fff; }
.inb-btn.danger:hover { background: var(--danger-700); color: #fff; }
.inb-btn.danger-soft { background: color-mix(in oklab, var(--danger-500) 10%, transparent); color: var(--tone-danger); }
.inb-btn.success { background: var(--success-600); color: #fff; }
.inb-btn.success:hover { background: var(--success-700); color: #fff; }
.inb-btn[disabled], .inb-btn.is-disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
.inb-link-btn { background: none; border: 0; padding: 0; color: var(--brand-fg); font: inherit; cursor: pointer; }
.inb-link-btn.danger { color: var(--tone-danger); }

/* ---------- Badges ---------- */
.inb-badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: var(--r-md); font-size: 11.5px; font-weight: 600; line-height: 1; white-space: nowrap; background: color-mix(in oklab, var(--ink-500) 10%, transparent); color: var(--fg-muted); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ink-500) 18%, transparent); text-transform: none; letter-spacing: 0; }
.inb-badge.success { background: color-mix(in oklab, var(--success-500) 11%, transparent); color: var(--tone-success); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--success-500) 22%, transparent); }
.inb-badge.warning { background: color-mix(in oklab, var(--warning-500) 13%, transparent); color: var(--tone-warning); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--warning-500) 26%, transparent); }
.inb-badge.danger { background: color-mix(in oklab, var(--danger-500) 10%, transparent); color: var(--tone-danger); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--danger-500) 22%, transparent); }
.inb-badge.info { background: color-mix(in oklab, var(--info-500) 11%, transparent); color: var(--tone-info); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--info-500) 22%, transparent); }
.inb-badge.brand { background: color-mix(in oklab, var(--brand-500) 11%, transparent); color: var(--brand-fg); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand-500) 22%, transparent); }
.inb-dot { width: 7px; height: 7px; border-radius: 99px; background: currentColor; display: inline-block; flex: none; }

/* ---------- Tables ---------- */
.inb-table-wrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* relative: keeps absolutely-positioned .inb-sr labels inside the scroller */
.inb-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.inb-table thead th { text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--fg-subtle); padding: 10px 16px; background: color-mix(in oklab, var(--surface-muted) 50%, transparent); border-bottom: 1px solid var(--border); white-space: nowrap; }
.inb-table td { padding: 12px 16px; border-top: 1px solid var(--border-subtle); vertical-align: middle; color: var(--fg); }
.inb-table tbody tr:first-child td { border-top: 0; }
.inb-table tbody tr:hover td { background: color-mix(in oklab, var(--surface-muted) 55%, transparent); }
.inb-table .num, .inb-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.inb-table tfoot td { font-weight: 600; border-top: 1px solid var(--border); background: color-mix(in oklab, var(--surface-muted) 40%, transparent); }
.inb-table .inb-empty-row td { text-align: center; color: var(--fg-subtle); padding: 32px 16px; }
.inb-table tr.is-sub td { color: var(--fg-muted); font-size: 12.5px; }

/* ---------- Tabs / segmented ---------- */
.inb-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: 0 0 20px; overflow-x: auto; scrollbar-width: none; }
.inb-tabs a, .inb-tabs button { display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px; font-size: 13.5px; font-weight: 500; color: var(--fg-muted); border: 0; background: none; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; text-decoration: none !important; cursor: pointer; }
.inb-tabs a:hover { color: var(--fg); }
.inb-tabs a.is-active { color: var(--brand-fg); border-bottom-color: var(--brand-500); font-weight: 600; }
.inb-tabs .inb-badge { height: 18px; padding: 0 6px; font-size: 10.5px; }
.inb-segmented { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-muted); border: 1px solid var(--border); border-radius: var(--r-lg); }
.inb-segmented a, .inb-segmented button { padding: 5px 12px; border-radius: var(--r-md); font-size: 12.5px; font-weight: 500; color: var(--fg-muted); text-decoration: none !important; border: 0; background: none; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.inb-segmented .is-active { background: var(--surface); color: var(--fg); box-shadow: var(--shadow-sm); }

/* ---------- Alerts ---------- */
.inb-alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-xl); border: 1px solid var(--border); background: var(--surface); font-size: 13.5px; }
.inb-alert .inb-icon { margin-top: 1px; }
.inb-alert strong { display: block; font-weight: 600; }
.inb-alert.success { background: color-mix(in oklab, var(--success-500) 7%, var(--surface)); border-color: color-mix(in oklab, var(--success-500) 25%, transparent); }
.inb-alert.success .inb-icon { color: var(--tone-success); }
.inb-alert.warning { background: color-mix(in oklab, var(--warning-500) 8%, var(--surface)); border-color: color-mix(in oklab, var(--warning-500) 30%, transparent); }
.inb-alert.warning .inb-icon { color: var(--tone-warning); }
.inb-alert.danger { background: color-mix(in oklab, var(--danger-500) 7%, var(--surface)); border-color: color-mix(in oklab, var(--danger-500) 25%, transparent); }
.inb-alert.danger .inb-icon { color: var(--tone-danger); }
.inb-alert.info { background: color-mix(in oklab, var(--info-500) 7%, var(--surface)); border-color: color-mix(in oklab, var(--info-500) 22%, transparent); }
.inb-alert.info .inb-icon { color: var(--tone-info); }
.inb-alert-list { display: flex; flex-direction: column; gap: 8px; }

/* ---------- Forms ---------- */
.inb-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.inb-field > label, .inb-label { font-size: 12.5px; font-weight: 600; color: var(--fg); }
.inb-help { font-size: 12px; color: var(--fg-subtle); margin: 0; }
.inb-scope .inb-input, .inb-scope input.inb-input, .inb-scope select.inb-input, .inb-scope textarea.inb-input {
	width: 100%; min-height: 36px; padding: 7px 11px; border-radius: var(--r-lg); border: 1px solid var(--border-strong);
	background: var(--surface); color: var(--fg); font: 400 13.5px/1.4 var(--inb-font); box-shadow: var(--shadow-xs); max-width: none;
}
.inb-scope textarea.inb-input { min-height: 72px; }
.inb-scope .inb-input:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand-500) 22%, transparent); }
.inb-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.inb-form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .inb-form-grid { grid-template-columns: minmax(0, 1fr); } }
.inb-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--fg); }

/* ---------- Misc components ---------- */
.inb-empty { text-align: center; padding: 40px 20px; color: var(--fg-muted); }
.inb-empty .inb-chip-icon { margin: 0 auto 12px; height: 44px; width: 44px; }
.inb-empty h3 { margin: 0 0 4px; font-size: 15px; color: var(--fg); }
.inb-kv { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; font-size: 13.5px; }
.inb-kv dt { color: var(--fg-muted); }
.inb-kv dd { margin: 0; color: var(--fg); min-width: 0; overflow-wrap: anywhere; }
.inb-divider { height: 1px; background: var(--border); margin: 16px 0; border: 0; }
.inb-progress { height: 6px; background: var(--surface-subtle); border-radius: 99px; overflow: hidden; }
.inb-progress > span { display: block; height: 100%; background: var(--brand-500); border-radius: 99px; }
.inb-progress.success > span { background: var(--success-500); }
.inb-progress.warning > span { background: var(--warning-500); }
.inb-progress.danger > span { background: var(--danger-500); }
.inb-list { list-style: none; margin: 0; padding: 0; }
.inb-list li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 20px; border-top: 1px solid var(--border-subtle); }
.inb-list li:first-child { border-top: 0; }
.inb-list .inb-list-main { flex: 1; min-width: 0; }
.inb-list .inb-list-title { font-weight: 600; font-size: 13.5px; color: var(--fg); }
.inb-list .inb-list-meta { font-size: 12.5px; color: var(--fg-muted); }
.inb-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.inb-pill { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface); color: var(--fg-muted); font-size: 12.5px; font-weight: 500; text-decoration: none !important; }
.inb-pill:hover { color: var(--fg); border-color: var(--border-strong); }
.inb-pill.is-active { background: color-mix(in oklab, var(--brand-500) 11%, transparent); color: var(--brand-fg); border-color: color-mix(in oklab, var(--brand-500) 30%, transparent); }
.inb-pill .count { font-variant-numeric: tabular-nums; opacity: .8; }
.inb-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.inb-steps li { position: relative; padding: 0 0 18px 30px; }
.inb-steps li::before { content: ""; position: absolute; left: 9px; top: 22px; bottom: 0; width: 2px; background: var(--border); }
.inb-steps li:last-child::before { display: none; }
.inb-steps .marker { position: absolute; left: 0; top: 0; height: 20px; width: 20px; border-radius: 99px; display: grid; place-items: center; background: var(--surface-muted); color: var(--fg-subtle); border: 1px solid var(--border-strong); font-size: 11px; font-weight: 700; }
.inb-steps li.done .marker { background: var(--success-600); border-color: var(--success-600); color: #fff; }
.inb-steps li.late .marker { background: var(--danger-600); border-color: var(--danger-600); color: #fff; }
.inb-steps li.now .marker { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.inb-steps .title { font-weight: 600; font-size: 13.5px; }
.inb-steps .meta { font-size: 12.5px; color: var(--fg-muted); }
.inb-qr { display: grid; place-items: center; padding: 12px; background: #fff; border-radius: var(--r-xl); border: 1px solid var(--border); width: max-content; margin: 0 auto; }
.inb-qr svg, .inb-qr img { display: block; width: 168px; height: 168px; }
.inb-copy { display: flex; gap: 6px; }
.inb-copy input { flex: 1; }
.inb-bignum { font-family: var(--inb-font-display); font-size: 34px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.inb-section-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--fg-subtle); margin: 0 0 10px; }
details.inb-details > summary { cursor: pointer; font-weight: 600; font-size: 13.5px; list-style: none; display: flex; align-items: center; justify-content: space-between; }
details.inb-details > summary::-webkit-details-marker { display: none; }

/* ---------- Charts ---------- */
.inb-chart { display: flex; flex-direction: column; gap: 10px; }
.inb-chart-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--fg-muted); }
.inb-chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.inb-swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.inb-swatch.inb-series-1 { background: var(--inb-series-1); }
.inb-swatch.inb-series-2 { background: var(--inb-series-2); }
.inb-chart-plot { position: relative; }
.inb-chart-svg { width: 100%; height: auto; display: block; overflow: visible; }
.inb-chart-grid { stroke: var(--border-subtle); stroke-width: 1; }
.inb-chart-axis { fill: var(--fg-subtle); font: 500 11px var(--inb-font); font-variant-numeric: tabular-nums; }
.inb-chart-bar.inb-series-1 { fill: var(--inb-series-1); }
.inb-chart-bar.inb-series-2 { fill: var(--inb-series-2); }
.inb-chart-hit { fill: transparent; cursor: default; }
.inb-chart-hit:hover, .inb-chart-hit:focus { fill: color-mix(in oklab, var(--fg) 5%, transparent); outline: none; }
.inb-chart-tip { position: absolute; pointer-events: none; z-index: 5; min-width: 150px; padding: 8px 10px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg); font-size: 12.5px; color: var(--fg); animation: inb-scale-in .12s ease-out; }
.inb-chart-tip .t { font-weight: 600; margin-bottom: 4px; color: var(--fg-muted); }
.inb-chart-tip .r { display: flex; align-items: center; gap: 6px; justify-content: space-between; }
.inb-chart-tip .r b { font-variant-numeric: tabular-nums; }
.inb-chart-table summary { font-size: 12px; color: var(--fg-subtle); cursor: pointer; }
.inb-chart-table table { width: 100%; font-size: 12.5px; border-collapse: collapse; margin-top: 8px; }
.inb-chart-table th, .inb-chart-table td { text-align: right; padding: 4px 8px; border-top: 1px solid var(--border-subtle); font-variant-numeric: tabular-nums; }
.inb-chart-table th:first-child { text-align: left; }

@media (forced-colors: active) {
	.inb-chart-bar { fill: CanvasText !important; }
	.inb-chart-bar.inb-series-2 { fill: GrayText !important; }
}

/* ---------- Wizard ---------- */
.inb-wizard-steps { list-style: none; display: flex; gap: 8px; padding: 0; margin: 0 0 20px; flex-wrap: wrap; }
.inb-wizard-steps li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface); color: var(--fg-muted); font-size: 12.5px; font-weight: 500; margin: 0; }
.inb-wizard-steps li span { height: 22px; width: 22px; border-radius: 99px; display: grid; place-items: center; background: var(--surface-muted); font-size: 11px; font-weight: 700; }
.inb-wizard-steps li.now { border-color: color-mix(in oklab, var(--brand-500) 40%, transparent); color: var(--brand-fg); }
.inb-wizard-steps li.now span { background: var(--brand-600); color: #fff; }
.inb-wizard-steps li.done span { background: var(--success-600); color: #fff; }
.inb-biz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.inb-biz-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: var(--r-2xl); border: 1px solid var(--border); background: var(--surface); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.inb-biz-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.inb-biz-card.is-active { border-color: var(--brand-500); box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand-500) 18%, transparent); }
.inb-biz-card input { position: absolute; opacity: 0; pointer-events: none; }
.inb-biz-card strong { color: var(--fg); font-size: 14px; }
.inb-biz-card .inb-badge { align-self: flex-start; margin-top: auto; }
.inb-segmented label { padding: 6px 14px; border-radius: var(--r-md); font-size: 13px; font-weight: 500; color: var(--fg-muted); cursor: pointer; }
.inb-segmented label.is-active { background: var(--surface); color: var(--fg); box-shadow: var(--shadow-sm); }

/* ---------- Filing assistant ---------- */
.inb-filing-hero { background: linear-gradient(135deg, color-mix(in oklab, var(--brand-500) 10%, var(--surface)), var(--surface)); }
.inb-filing-num { flex: none; height: 30px; width: 30px; border-radius: 99px; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: var(--surface-muted); color: var(--fg-muted); border: 1px solid var(--border-strong); }
.inb-filing-step.is-done .inb-filing-num { background: var(--success-600); border-color: var(--success-600); color: #fff; }
.inb-filing-step.is-todo .inb-filing-num { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.inb-filing-step.is-blocked .inb-filing-num { background: var(--danger-600); border-color: var(--danger-600); color: #fff; }
.inb-filing-step.is-done { opacity: .85; }
.inb-howto { margin: 8px 0 10px 18px; padding: 0; font-size: 13px; color: var(--fg-muted); }
.inb-howto li { margin: 3px 0; }

/* ---------- HSN suggestions ---------- */
.inb-hsn-local { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; max-width: 520px; }
.inb-hsn-option { display: grid; grid-template-columns: 70px 1fr auto; gap: 10px; align-items: center; width: 100%; text-align: left; padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); color: var(--fg); font: 400 12.5px/1.35 var(--inb-font); cursor: pointer; }
.inb-hsn-option:hover, .inb-hsn-option:focus { border-color: var(--brand-500); background: color-mix(in oklab, var(--brand-500) 6%, var(--surface)); }
.inb-hsn-pop { position: absolute; z-index: 100000; width: 440px; max-width: 92vw; padding: 6px; display: flex; flex-direction: column; gap: 4px; background: var(--surface, #fff); border: 1px solid var(--border, #ddd); border-radius: 12px; box-shadow: 0 12px 24px -6px rgba(0,0,0,.18); }

/* ---------- Fixes: hidden, focus, mobile ---------- */
/* Component display rules must never defeat the HTML hidden attribute. */
.inb-ui [hidden], .inb-scope [hidden], body.inb-p [hidden] { display: none !important; }
.inb-biz-card:has(input:focus-visible), .inb-segmented label:has(input:focus-visible) { outline: 2px solid var(--brand-500); outline-offset: 2px; }
.inb-page-header .inb-actions .inb-btn { max-width: 100%; white-space: normal; height: auto; min-height: 36px; text-align: left; line-height: 1.25; padding-top: 6px; padding-bottom: 6px; }
.inb-page-header .inb-actions .inb-btn.icon { width: 36px; padding: 0; }
.inb-hsn-pop { box-sizing: border-box; }
@media (max-width: 600px) {
	.inb-chart-axis { font-size: 18px; }
}

/* ---------- SaaS: plans, usage, banner, signup ---------- */
.inb-saas-banner { align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 12px 0; }
.inb-alert.info { background: color-mix(in oklab, var(--info-500) 7%, var(--surface)); border-color: color-mix(in oklab, var(--info-500) 25%, transparent); }
.inb-plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.inb-plan-card { display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: var(--r-2xl); border: 1px solid var(--border); background: var(--surface); min-width: 0; }
.inb-plan-card.is-current { border-color: var(--brand-500); box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand-500) 16%, transparent); }
.inb-plan-card.is-featured { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.inb-plan-name { font-family: var(--inb-font-display); font-size: 17px; font-weight: 650; color: var(--fg); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inb-plan-price { font-family: var(--inb-font-display); font-size: 28px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--fg); line-height: 1.1; }
.inb-plan-price small { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 500; color: var(--fg-subtle); letter-spacing: 0; }
.inb-plan-feat { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; color: var(--fg-muted); }
.inb-plan-feat li { display: flex; gap: 8px; align-items: flex-start; margin: 0; }
.inb-plan-feat li .inb-icon { flex: none; margin-top: 2px; color: var(--tone-success); }
.inb-plan-feat li.is-off { color: var(--fg-subtle); text-decoration: line-through; }
.inb-plan-feat li.is-off .inb-icon { color: var(--fg-subtle); }
.inb-plan-card form { margin-top: auto; }
.inb-plan-card .inb-btn { width: 100%; justify-content: center; }
.inb-meter { display: grid; gap: 6px; }
.inb-meter-head { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--fg-muted); }
.inb-meter-head strong { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }
[data-cycle-show][hidden] { display: none !important; }
.inb-saas-act { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.inb-scope .inb-saas-act .inb-input { display: inline-block; width: auto; min-width: 0; height: 30px; padding-top: 0; padding-bottom: 0; }