html, body { min-height: 100%; }
body.demo1,
.kt-wrapper,
main { background: var(--background); color: var(--foreground); }
.ctf-app-shell,
.kt-wrapper { width: 100%; min-width: 0; max-width: 100%; }
.kt-wrapper { min-height: 100vh; }
main,
.kt-container-fixed,
.kt-card,
.kt-card-content,
.grid > * { min-width: 0; }
.dark {
    --background: #0b0f19;
    --card: #111827;
    --popover: #111827;
    --muted: #111827;
    --accent: #1f2937;
    --border: #253044;
    --input: #334155;
    --muted-foreground: #9ca3af;
}
.dark body.demo1,
.dark .kt-wrapper,
.dark main,
.dark .kt-header,
.dark .kt-sidebar { background: var(--background) !important; color: var(--foreground); }
.dark .kt-card { background: var(--card); border-color: var(--border); box-shadow: none; }
.dark .kt-table th,
.dark .kt-table td { border-color: var(--border); color: var(--foreground); }
.dark .kt-input,
.dark .kt-select,
.dark .kt-textarea { background: var(--background); border-color: var(--input); color: var(--foreground); }
.dark .kt-input::placeholder,
.dark .kt-textarea::placeholder { color: var(--muted-foreground); }
.ctf-brand { display: inline-flex; min-width: 0; align-items: center; gap: .65rem; color: var(--foreground); }
.ctf-global-brand { display: inline-flex; min-width: 0; align-items: center; gap: .65rem; }
.ctf-global-brand-logo { display: inline-flex; flex: 0 0 auto; align-items: center; height: 30px; max-width: 116px; }
.ctf-global-brand-logo img { display: block; width: auto; max-width: 116px; height: 30px; object-fit: contain; }
.ctf-global-brand-logo-dark { display: none !important; }
.dark .ctf-global-brand-logo-light { display: none !important; }
.dark .ctf-global-brand-logo-dark { display: block !important; }
.ctf-global-brand.is-compact .ctf-global-brand-logo,
.ctf-global-brand.is-compact .ctf-global-brand-logo img { width: 30px; max-width: 30px; }
.ctf-brand-mark { width: 30px; height: 30px; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; border-radius: .55rem; background: linear-gradient(135deg, #2563eb, #7c3aed 58%, #db2777); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: -.03em; box-shadow: 0 7px 18px color-mix(in oklab, #4f46e5 24%, transparent); }
.ctf-brand-name { min-width: 0; overflow: hidden; color: var(--foreground); font-size: 14px; font-weight: 800; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }
.ctf-brand .small-logo { display: none; }
.kt-sidebar-collapse .ctf-brand .default-logo { display: none; }
.kt-sidebar-collapse .ctf-brand .small-logo { display: inline-flex; }
.ctf-page-title { font-size: 20px; line-height: 1.2; font-weight: 600; color: var(--foreground); margin: 0; }
.ctf-page-subtitle { color: var(--muted-foreground); font-size: 13px; margin-top: 4px; }
.ctf-alert { border: 1px solid var(--border); border-radius: .75rem; padding: .75rem 1rem; background: color-mix(in oklab, var(--primary) 8%, var(--background)); color: var(--foreground); margin-bottom: 1rem; }
.ctf-alert-error { background: color-mix(in oklab, var(--destructive) 8%, var(--background)); color: var(--destructive); }
.code { max-width: 100%; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; background: var(--muted); border-radius: .375rem; padding: .125rem .375rem; }
.grid { display: grid; gap: 1rem; }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat { padding: 1rem; }
.stat small { color: var(--muted-foreground); display: block; margin-bottom: .5rem; }
.stat strong { color: var(--foreground); font-size: 1.625rem; line-height: 1; font-weight: 700; }
.toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.kt-card-header:has(> form.toolbar) { gap: .75rem; align-items: center; justify-content: space-between; }
.kt-card-header > form.toolbar { flex: 1 1 auto; min-width: 0; max-width: 100%; gap: .5rem; align-items: center; }
.kt-card-header > form.toolbar > .kt-select:not([style]) { width: 190px; flex: 0 1 190px; }
.kt-card-header > form.toolbar > .kt-input:not([style]) { width: 260px; flex: 0 1 260px; }
.kt-card-header > form.toolbar > .kt-select,
.kt-card-header > form.toolbar > .kt-input { height: 38px; max-width: 100%; }
.kt-card-header > form.toolbar > .kt-btn,
.kt-card-header:has(> form.toolbar) > .kt-btn { height: 38px; white-space: nowrap; }
.ctf-list-header { gap: .75rem; align-items: center; justify-content: space-between; }
.ctf-filter-bar { display: flex; flex: 1 1 auto; min-width: 0; gap: .5rem; align-items: center; }
.ctf-filter-control { position: relative; display: flex; align-items: center; min-width: 0; }
.ctf-date-filter { display: block; padding-inline-end: 2.5rem; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right .75rem center !important; background-size: 18px 18px !important; }
.dark .ctf-date-filter { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") !important; }
.ctf-date-picker { position: fixed; z-index: 10000; width: min(320px, calc(100vw - 24px)); border: 1px solid var(--border); border-radius: .75rem; padding: .75rem; background: var(--popover); color: var(--foreground); box-shadow: 0 18px 46px color-mix(in oklab, #000 26%, transparent); }
.ctf-date-picker-header { display: grid; grid-template-columns: 36px minmax(0, 1fr) 36px; align-items: center; gap: .5rem; margin-bottom: .65rem; }
.ctf-date-picker-title { text-align: center; font-size: 13px; font-weight: 700; text-transform: capitalize; }
.ctf-date-picker-nav { width: 36px; height: 36px; display: inline-grid; place-items: center; border: 1px solid transparent; border-radius: .5rem; color: var(--foreground); font-size: 20px; line-height: 1; }
.ctf-date-picker-nav:hover { border-color: var(--border); background: var(--accent); }
.ctf-date-picker-weekdays,
.ctf-date-picker-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .2rem; }
.ctf-date-picker-weekdays span { padding: .25rem 0; color: var(--muted-foreground); font-size: 10px; font-weight: 700; text-align: center; }
.ctf-date-picker-day { aspect-ratio: 1; display: grid; place-items: center; border: 1px solid transparent; border-radius: .5rem; color: var(--foreground); font-size: 12px; }
.ctf-date-picker-day:hover { border-color: color-mix(in oklab, var(--primary) 45%, var(--border)); background: color-mix(in oklab, var(--primary) 10%, transparent); }
.ctf-date-picker-day.is-outside { color: color-mix(in oklab, var(--muted-foreground) 55%, transparent); }
.ctf-date-picker-day.is-today { border-color: color-mix(in oklab, var(--primary) 55%, var(--border)); color: var(--primary); font-weight: 700; }
.ctf-date-picker-day.is-selected { border-color: var(--primary); background: var(--primary); color: var(--primary-foreground); font-weight: 700; }
.ctf-date-picker-footer { display: flex; align-items: center; justify-content: space-between; gap: .5rem; border-top: 1px solid var(--border); margin-top: .65rem; padding-top: .65rem; }
.ctf-filter-control > .ki-filled { position: absolute; inset-inline-start: .75rem; z-index: 1; color: var(--muted-foreground); pointer-events: none; }
.ctf-filter-control > .kt-input,
.ctf-filter-control > .kt-select { width: 100%; height: 38px; padding-inline-start: 2.25rem; }
.ctf-filter-type { flex: 0 0 190px; }
.ctf-filter-search { flex: 0 1 320px; }
.ctf-filter-submit,
.ctf-list-action { height: 38px; white-space: nowrap; }
.muted { color: var(--muted-foreground); }
.pagination { max-width: 100%; margin-top: 1rem; }
.dark .pagination nav a[class],
.dark .pagination nav span[class] { border-color: var(--border) !important; background: var(--card) !important; color: var(--foreground) !important; }
.dark .pagination nav a[class]:hover { background: var(--accent) !important; color: var(--foreground) !important; }
.dark .pagination nav span[aria-current="page"] > span[class] { border-color: color-mix(in oklab, var(--primary) 48%, var(--border)) !important; background: color-mix(in oklab, var(--primary) 18%, var(--card)) !important; color: var(--primary) !important; }
.dark .pagination nav span[aria-disabled="true"] > span[class],
.dark .pagination nav > div > span[class] { color: var(--muted-foreground) !important; }
.ctf-api-hint { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-bottom: 1rem; }
.ctf-api-quickstart { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.ctf-api-quickstart > div { min-width: 0; border: 1px solid var(--border); border-radius: .5rem; padding: .75rem; background: color-mix(in oklab, var(--muted) 45%, transparent); }
.ctf-api-quickstart strong { display: block; margin-bottom: .25rem; color: var(--foreground); }
.ctf-api-quickstart span { color: var(--muted-foreground); font-size: 13px; }
.ctf-checkline { display: inline-flex; align-items: center; gap: .45rem; min-height: 38px; color: var(--foreground); font-size: 13px; white-space: nowrap; }
.ctf-checkline input { inline-size: 16px; block-size: 16px; }
.ctf-json-large { min-height: 260px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.ctf-compact-help { border: 1px solid var(--border); border-radius: .5rem; padding: .75rem; margin-bottom: 1rem; background: color-mix(in oklab, var(--muted) 35%, transparent); color: var(--foreground); font-size: 13px; line-height: 1.45; }
.ctf-compact-help span { display: block; margin-top: .25rem; color: var(--muted-foreground); }
.ctf-field-help,
.ctf-advanced-copy { color: var(--muted-foreground); font-size: 13px; line-height: 1.45; }
.ctf-field-help { display: block; margin-top: .35rem; }
.ctf-advanced-panel { border: 1px dashed var(--border); border-radius: .75rem; padding: .75rem; }
.ctf-advanced-panel summary { cursor: pointer; font-weight: 600; color: var(--foreground); }
.ctf-advanced-copy { margin: .5rem 0 .75rem; }
.ctf-system-brand-preview { display: flex; align-items: center; gap: 1rem; border: 1px solid var(--border); border-radius: .75rem; padding: 1rem; background: color-mix(in oklab, var(--primary) 6%, var(--background)); }
.ctf-system-brand-preview-logo { width: 76px; height: 56px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: .65rem; background: var(--background); }
.ctf-system-brand-preview-logo img { max-width: 64px; max-height: 42px; object-fit: contain; }
.ctf-system-brand-preview-logo span { color: var(--primary); font-size: 18px; font-weight: 800; }
.ctf-system-brand-preview > div:last-child { display: grid; gap: .2rem; }
.ctf-system-brand-preview small,
.ctf-system-brand-preview span { color: var(--muted-foreground); font-size: 12px; }
.ctf-system-brand-preview strong { color: var(--foreground); font-size: 18px; }
.ctf-system-asset-card { display: grid; align-content: start; gap: .65rem; border: 1px solid var(--border); border-radius: .75rem; padding: .85rem; }
.ctf-system-asset-preview { height: 96px; display: grid; place-items: center; overflow: hidden; border: 1px dashed var(--border); border-radius: .65rem; background: #f8fafc; }
.ctf-system-asset-preview.is-dark { background: #0b0f19; }
.ctf-system-asset-preview img { max-width: calc(100% - 24px); max-height: 64px; object-fit: contain; }
.ctf-system-asset-preview span { color: #2563eb; font-size: 18px; font-weight: 800; }
.ctf-section-title { color: var(--muted-foreground); font-size: 12px; font-weight: 600; margin: 1rem 0 .5rem; text-transform: uppercase; }
.ctf-rule-date-start { grid-column: 1; }
.ctf-rule-multi-picker + .select2-container { width: 100% !important; margin-top: .35rem; }
.ctf-rule-multi-picker + .select2-container .select2-selection--multiple { min-height: 42px; border: 1px solid var(--input); border-radius: .5rem; padding: .2rem .35rem; background: var(--background); color: var(--foreground); }
.ctf-rule-multi-picker + .select2-container .select2-selection--multiple .select2-selection__rendered { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; padding: 0; }
.ctf-rule-multi-picker + .select2-container .select2-selection--multiple .select2-selection__choice { display: inline-flex; align-items: center; margin: 0; border: 1px solid color-mix(in oklab, var(--primary) 30%, var(--border)); border-radius: .4rem; padding: .28rem .45rem .28rem .35rem; background: color-mix(in oklab, var(--primary) 12%, var(--background)); color: var(--foreground); font-size: 12px; line-height: 1.2; }
.ctf-rule-multi-picker + .select2-container .select2-selection--multiple .select2-selection__choice__remove { position: static; width: auto; height: auto; margin: 0 .35rem 0 0; padding: 0 .35rem 0 0; border: 0; border-right: 1px solid color-mix(in oklab, var(--primary) 25%, var(--border)); color: var(--muted-foreground); line-height: 1; }
.ctf-rule-multi-picker + .select2-container .select2-search--inline .select2-search__field { height: 28px; margin: 0; color: var(--foreground); font-family: inherit; }
.ctf-rule-multi-picker + .select2-container.select2-container--focus .select2-selection--multiple { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in oklab, var(--primary) 15%, transparent); }
.ctf-rule-term-picker + .select2-container { margin-top: 0; }
.ctf-rule-term-picker + .select2-container .select2-selection--multiple { min-height: 36px; padding: .12rem .25rem; }
.ctf-rule-term-picker + .select2-container .select2-selection--multiple .select2-selection__rendered { min-height: 30px; }
.ctf-rule-term-picker + .select2-container .select2-selection--multiple .select2-selection__choice { padding-block: .2rem; }
.ctf-rule-term-picker + .select2-container .select2-search--inline { flex: 1 1 140px; min-width: 120px; }
.ctf-rule-term-picker + .select2-container .select2-search--inline .select2-search__field { width: 100% !important; height: 24px; }
.select2-container--open { z-index: 10050; }
.ctf-rule-target-dropdown.select2-dropdown { overflow: hidden; border: 1px solid var(--border); border-radius: .5rem; background: var(--popover); color: var(--foreground); box-shadow: 0 16px 40px color-mix(in oklab, #020617 22%, transparent); }
.ctf-rule-target-dropdown .select2-search--dropdown { padding: .5rem; }
.ctf-rule-target-dropdown .select2-search--dropdown .select2-search__field { height: 38px; border: 1px solid var(--input); border-radius: .45rem; padding: .45rem .65rem; background: var(--background); color: var(--foreground); outline: none; }
.ctf-rule-target-dropdown .select2-results__options { max-height: 300px; padding: .25rem; }
.ctf-rule-target-dropdown .select2-results__option { margin: .1rem 0; border-radius: .4rem; padding: .6rem .7rem; color: var(--foreground); font-size: 13px; line-height: 1.35; }
.ctf-rule-target-dropdown .select2-results__option[aria-selected="true"] { background: color-mix(in oklab, var(--primary) 12%, var(--background)); color: var(--primary); }
.ctf-rule-target-dropdown .select2-results__option--highlighted[aria-selected] { background: var(--primary); color: var(--primary-foreground); }
.ctf-rule-target-dropdown .select2-results__message,
.ctf-rule-target-dropdown .loading-results,
.ctf-rule-target-dropdown .loading-more-results { color: var(--muted-foreground); }
.ctf-nested-advanced { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: .75rem; }
.ctf-nested-advanced summary { cursor: pointer; color: var(--foreground); font-weight: 600; }
.ctf-menu-section { margin: .25rem 0; }
.ctf-menu-section-admin { border-top: 1px solid var(--border); margin-top: 1rem; padding-top: 1rem; }
.ctf-menu-summary { display: flex; align-items: center; gap: .625rem; padding: .625rem .625rem; border-radius: .5rem; cursor: pointer; list-style: none; color: var(--foreground); }
.ctf-menu-summary::-webkit-details-marker { display: none; }
.ctf-menu-summary:hover { background: color-mix(in oklab, var(--accent) 60%, transparent); }
.ctf-menu-summary-icon { width: 20px; display: inline-flex; color: var(--muted-foreground); }
.ctf-menu-summary-text { min-width: 0; flex: 1; display: grid; gap: .125rem; }
.ctf-menu-summary-text strong { font-size: 12px; line-height: 1.1; text-transform: uppercase; color: var(--muted-foreground); }
.ctf-menu-summary-text small { font-size: 11px; line-height: 1.2; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctf-menu-chevron { color: var(--muted-foreground); transition: transform .15s ease; }
.ctf-menu-section[open] > .ctf-menu-summary .ctf-menu-chevron { transform: rotate(180deg); }
.ctf-menu-section-items { padding-top: .125rem; }
.ctf-page-help { display: flex; align-items: center; justify-content: space-between; gap: .75rem; border: 1px solid var(--border); border-radius: .75rem; padding: .75rem 1rem; background: color-mix(in oklab, var(--muted) 32%, transparent); margin-bottom: 1rem; }
.ctf-page-help strong { display: block; font-size: 13px; color: var(--foreground); margin-bottom: .125rem; }
.ctf-page-help span { display: block; font-size: 13px; color: var(--muted-foreground); line-height: 1.4; }
.ctf-page-help .kt-btn { flex: 0 0 auto; }
.ctf-help-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 1rem; align-items: start; }
.ctf-help-nav { position: sticky; top: calc(var(--kt-header-height) + 1rem); display: grid; gap: .35rem; border: 1px solid var(--border); border-radius: .75rem; padding: .5rem; background: var(--card); }
.ctf-help-nav a { border-radius: .5rem; padding: .55rem .65rem; color: var(--foreground); font-size: 13px; }
.ctf-help-nav a:hover,
.ctf-help-nav a.active { background: color-mix(in oklab, var(--primary) 12%, var(--background)); color: var(--primary); }
.ctf-help-steps { display: grid; gap: .75rem; }
.ctf-help-steps > div { border: 1px solid var(--border); border-radius: .625rem; padding: .875rem; background: color-mix(in oklab, var(--muted) 28%, transparent); }
.ctf-help-steps strong { display: block; margin-bottom: .25rem; color: var(--foreground); }
.ctf-help-steps span { color: var(--muted-foreground); font-size: 13px; line-height: 1.45; }
.ctf-step-box { border: 1px solid var(--border); border-radius: .625rem; padding: .875rem; background: color-mix(in oklab, var(--muted) 28%, transparent); }
.ctf-step-box strong { color: var(--foreground); }
.ctf-step-box span { display: block; margin-top: .25rem; color: var(--muted-foreground); font-size: 13px; }
.ctf-subnav { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.ctf-subnav a { display: inline-flex; align-items: center; gap: .45rem; min-height: 38px; border: 1px solid var(--border); border-radius: .5rem; padding: .45rem .75rem; color: var(--foreground); background: var(--card); font-size: 13px; font-weight: 600; }
.ctf-subnav a:hover,
.ctf-subnav a.active { color: var(--primary); border-color: color-mix(in oklab, var(--primary) 36%, var(--border)); background: color-mix(in oklab, var(--primary) 10%, var(--background)); }
.ctf-inline-details summary { cursor: pointer; list-style: none; }
.ctf-inline-details summary::-webkit-details-marker { display: none; }
.ctf-inline-details ul { margin: .5rem 0 0 1rem; padding: 0; color: var(--muted-foreground); font-size: 12px; line-height: 1.45; min-width: 220px; }
.ctf-product-media { display: grid; gap: .75rem; align-content: start; }
.ctf-product-media > a { display: inline-flex; width: min(100%, 320px); min-height: 220px; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: .5rem; background: color-mix(in oklab, var(--muted) 24%, transparent); overflow: hidden; }
.ctf-product-media > a img { display: block; max-width: 100%; max-height: 300px; object-fit: contain; }
.ctf-image-error { border: 1px dashed var(--border); border-radius: .5rem; padding: .75rem; color: var(--muted-foreground); font-size: 13px; }
.ctf-image-error a { color: var(--primary); font-weight: 600; }
.ctf-product-thumbs { display: flex; flex-wrap: wrap; gap: .5rem; }
.ctf-product-thumbs a { width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: .4rem; overflow: hidden; background: color-mix(in oklab, var(--muted) 24%, transparent); }
.ctf-product-thumbs img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ctf-auth-page { min-height: 100dvh; display: grid; place-items: center; padding: 2rem; position: relative; overflow: hidden; background: var(--background); }
.ctf-auth-page::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 44px 44px; opacity: .18; pointer-events: none; }
.ctf-auth-theme { position: fixed; top: 1.25rem; right: 1.25rem; z-index: 2; background: var(--card); }
.ctf-auth-shell { position: relative; z-index: 1; width: min(100%, 1040px); min-height: 620px; display: grid; grid-template-columns: minmax(0, 1fr) 420px; border: 1px solid var(--border); border-radius: .5rem; overflow: hidden; background: var(--card); box-shadow: 0 24px 80px color-mix(in oklab, #020617 18%, transparent); }
.ctf-auth-shell-wide { width: min(100%, 1180px); grid-template-columns: minmax(0, .85fr) minmax(520px, 1fr); }
.ctf-auth-intro { display: flex; flex-direction: column; gap: 2rem; padding: 2.25rem; background: color-mix(in oklab, var(--muted) 52%, var(--background)); border-inline-end: 1px solid var(--border); }
.ctf-auth-brand { display: inline-flex; width: fit-content; align-items: center; gap: .75rem; color: var(--foreground); font-weight: 700; }
.ctf-auth-copy { margin-top: auto; max-width: 560px; }
.ctf-auth-eyebrow { display: inline-flex; align-items: center; min-height: 28px; border: 1px solid var(--border); border-radius: .375rem; padding: .25rem .6rem; color: var(--muted-foreground); font-size: 12px; font-weight: 600; text-transform: uppercase; }
.ctf-auth-copy h1 { margin: 1rem 0 .75rem; max-width: 600px; font-size: 34px; line-height: 1.08; font-weight: 700; color: var(--foreground); letter-spacing: 0; }
.ctf-auth-copy p { max-width: 560px; margin: 0; color: var(--muted-foreground); font-size: 14px; line-height: 1.6; }
.ctf-auth-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-top: auto; }
.ctf-auth-metrics > div { min-width: 0; border: 1px solid var(--border); border-radius: .5rem; padding: .875rem; background: color-mix(in oklab, var(--card) 72%, transparent); }
.ctf-auth-metrics i { color: var(--primary); font-size: 20px; }
.ctf-auth-metrics strong { display: block; margin-top: .6rem; color: var(--foreground); font-size: 13px; }
.ctf-auth-metrics span { display: block; margin-top: .25rem; color: var(--muted-foreground); font-size: 12px; line-height: 1.4; }
.ctf-auth-panel { display: flex; align-items: center; justify-content: center; padding: 2rem; background: var(--card); }
.ctf-auth-form { width: 100%; max-width: 340px; display: grid; gap: 1rem; }
.ctf-auth-form-register { max-width: 680px; }
.ctf-auth-form-head { display: flex; gap: .875rem; align-items: center; margin-bottom: .25rem; }
.ctf-auth-lock { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: .5rem; background: color-mix(in oklab, var(--primary) 12%, var(--background)); color: var(--primary); font-size: 20px; flex: 0 0 auto; }
.ctf-auth-form h2 { margin: 0; color: var(--foreground); font-size: 22px; line-height: 1.2; font-weight: 700; }
.ctf-auth-form p { margin: .25rem 0 0; color: var(--muted-foreground); font-size: 13px; line-height: 1.4; }
.ctf-auth-field { display: grid; gap: .45rem; color: var(--foreground); font-size: 13px; font-weight: 600; }
.ctf-auth-input { position: relative; min-height: 44px; display: flex; align-items: center; border: 1px solid var(--input); border-radius: .5rem; background: var(--background); color: var(--foreground); }
.ctf-auth-input > .ki-filled:first-child { position: absolute; left: .8rem; color: var(--muted-foreground); font-size: 17px; pointer-events: none; }
.ctf-auth-input input { width: 100%; min-height: 42px; border: 0; outline: 0; background: transparent; color: var(--foreground); padding: .65rem 2.75rem .65rem 2.35rem; font-size: 14px; }
.ctf-auth-input input::placeholder { color: var(--muted-foreground); }
.ctf-auth-password-toggle { position: absolute; right: .35rem; }
.ctf-auth-options { display: flex; align-items: center; justify-content: space-between; gap: .75rem; color: var(--muted-foreground); font-size: 12px; }
.ctf-auth-options a { color: var(--primary); font-weight: 600; }
.ctf-auth-submit { width: 100%; justify-content: center; min-height: 44px; margin-top: .25rem; }
.ctf-auth-switch { color: var(--muted-foreground); font-size: 13px; text-align: center; }
.ctf-auth-switch a { color: var(--primary); font-weight: 700; }
.ctf-auth-register-grid { gap: .75rem; }
.ctf-plan-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.ctf-plan-option { position: relative; display: block; cursor: pointer; }
.ctf-plan-option input { position: absolute; opacity: 0; pointer-events: none; }
.ctf-plan-option span { min-height: 124px; display: grid; align-content: start; gap: .35rem; border: 1px solid var(--border); border-radius: .5rem; padding: .875rem; background: var(--background); color: var(--foreground); transition: border-color .15s ease, background .15s ease; }
.ctf-plan-option input:checked + span { border-color: color-mix(in oklab, var(--primary) 60%, var(--border)); background: color-mix(in oklab, var(--primary) 10%, var(--background)); }
.ctf-plan-option strong { font-size: 14px; color: var(--foreground); }
.ctf-plan-option small { color: var(--primary); font-weight: 700; font-size: 13px; }
.ctf-plan-option em { color: var(--muted-foreground); font-style: normal; font-size: 12px; line-height: 1.4; }
.ctf-products-page { display: grid; gap: 1rem; }
.ctf-product-nav { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-width: 0; border: 1px solid var(--border); border-radius: .75rem; padding: .4rem; background: var(--card); }
.ctf-product-nav-links { display: flex; flex: 1 1 auto; align-items: center; gap: .25rem; min-width: 0; overflow-x: auto; }
.ctf-product-nav-links > a,
.ctf-product-nav-more > summary { display: inline-flex; align-items: center; gap: .45rem; min-height: 38px; border-radius: .5rem; padding: .5rem .7rem; color: var(--muted-foreground); font-size: 13px; font-weight: 600; white-space: nowrap; transition: background .15s ease, color .15s ease; }
.ctf-product-nav-links > a:hover,
.ctf-product-nav-links > a.active,
.ctf-product-nav-more > summary:hover,
.ctf-product-nav-more.active > summary { background: color-mix(in oklab, var(--primary) 11%, var(--background)); color: var(--primary); }
.ctf-product-nav-links > a.active { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--primary) 28%, transparent); }
.ctf-product-nav-links i,
.ctf-product-nav-more > summary i { font-size: 16px; }
.ctf-product-nav-more { position: relative; flex: 0 0 auto; }
.ctf-product-nav-more > summary { cursor: pointer; list-style: none; }
.ctf-product-nav-more > summary::-webkit-details-marker { display: none; }
.ctf-product-nav-more > summary i:last-child { margin-inline-start: .15rem; transition: transform .15s ease; }
.ctf-product-nav-more[open] > summary i:last-child { transform: rotate(180deg); }
.ctf-product-nav-menu { position: absolute; top: calc(100% + .5rem); inset-inline-end: 0; z-index: 30; width: min(360px, calc(100vw - 2rem)); display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; border: 1px solid var(--border); border-radius: .75rem; padding: .5rem; background: var(--card); box-shadow: 0 18px 45px color-mix(in oklab, #020617 18%, transparent); }
.ctf-product-nav-menu a { display: flex; align-items: flex-start; gap: .65rem; border-radius: .5rem; padding: .7rem; color: var(--foreground); }
.ctf-product-nav-menu a:hover,
.ctf-product-nav-menu a.active { background: color-mix(in oklab, var(--primary) 10%, var(--background)); color: var(--primary); }
.ctf-product-nav-menu > a > i { width: 18px; margin-top: .1rem; color: var(--muted-foreground); font-size: 17px; }
.ctf-product-nav-menu a span { display: grid; gap: .15rem; min-width: 0; }
.ctf-product-nav-menu a strong { font-size: 12px; line-height: 1.25; }
.ctf-product-nav-menu a small { color: var(--muted-foreground); font-size: 10px; line-height: 1.35; }
.ctf-products-overview { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, .8fr); gap: 1rem; }
.ctf-products-summary,
.ctf-products-health,
.ctf-products-guide { border: 1px solid var(--border); border-radius: .75rem; background: var(--card); }
.ctf-products-summary { padding: 1.25rem; }
.ctf-products-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.ctf-products-eyebrow { display: block; margin-bottom: .25rem; color: var(--primary); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ctf-products-section-head h2,
.ctf-products-list-head h2 { margin: 0; color: var(--foreground); font-size: 16px; line-height: 1.25; font-weight: 700; }
.ctf-products-section-head p,
.ctf-products-list-head p { margin: .3rem 0 0; color: var(--muted-foreground); font-size: 12px; line-height: 1.45; }
.ctf-products-source-badge { display: inline-flex; align-items: center; gap: .4rem; min-height: 30px; border: 1px solid color-mix(in oklab, var(--primary) 28%, var(--border)); border-radius: 999px; padding: .3rem .65rem; background: color-mix(in oklab, var(--primary) 8%, var(--background)); color: var(--primary); font-size: 11px; font-weight: 700; white-space: nowrap; }
.ctf-products-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.ctf-products-metric { display: flex; align-items: center; gap: .8rem; min-width: 0; border: 1px solid var(--border); border-radius: .625rem; padding: .85rem; background: color-mix(in oklab, var(--muted) 30%, transparent); }
.ctf-products-metric-icon { width: 38px; height: 38px; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; border-radius: .55rem; background: color-mix(in oklab, var(--muted-foreground) 10%, var(--background)); color: var(--muted-foreground); font-size: 18px; }
.ctf-products-metric small { display: block; margin-bottom: .25rem; color: var(--muted-foreground); font-size: 11px; }
.ctf-products-metric strong { display: block; color: var(--foreground); font-size: 22px; line-height: 1; font-weight: 700; }
.ctf-products-metric-success .ctf-products-metric-icon { background: color-mix(in oklab, #16a34a 12%, var(--background)); color: #16a34a; }
.ctf-products-metric-primary .ctf-products-metric-icon { background: color-mix(in oklab, var(--primary) 12%, var(--background)); color: var(--primary); }
.ctf-products-metric-warning .ctf-products-metric-icon { background: color-mix(in oklab, #d97706 13%, var(--background)); color: #d97706; }
.ctf-products-health { padding: 1.25rem; }
.ctf-products-health-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.ctf-products-health-head small { display: block; margin-bottom: .25rem; color: var(--muted-foreground); font-size: 11px; }
.ctf-products-health-head strong { color: var(--foreground); font-size: 28px; line-height: 1; font-weight: 700; }
.ctf-products-health-status { display: inline-flex; align-items: center; min-height: 26px; border-radius: 999px; padding: .25rem .55rem; background: color-mix(in oklab, #d97706 12%, var(--background)); color: #d97706; font-size: 10px; font-weight: 700; }
.ctf-products-health-status.is-ready { background: color-mix(in oklab, #16a34a 12%, var(--background)); color: #16a34a; }
.ctf-products-progress { height: 8px; margin: 1rem 0 .75rem; overflow: hidden; border-radius: 999px; background: color-mix(in oklab, var(--muted-foreground) 15%, var(--background)); }
.ctf-products-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), #16a34a); }
.ctf-products-health > p { margin: 0 0 .9rem; color: var(--muted-foreground); font-size: 11px; line-height: 1.5; }
.ctf-products-issues { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
.ctf-products-issues span { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .35rem; border-radius: .45rem; padding: .5rem; background: color-mix(in oklab, var(--muted) 44%, transparent); color: var(--muted-foreground); font-size: 10px; }
.ctf-products-issues i { color: var(--muted-foreground); font-size: 13px; }
.ctf-products-issues strong { color: var(--foreground); font-size: 11px; }
.ctf-products-guide { overflow: visible; }
.ctf-products-guide > summary { display: flex; align-items: center; gap: .75rem; min-height: 62px; padding: .75rem 1rem; cursor: pointer; list-style: none; }
.ctf-products-guide > summary::-webkit-details-marker { display: none; }
.ctf-products-guide-icon { width: 36px; height: 36px; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; border-radius: .5rem; background: color-mix(in oklab, var(--primary) 10%, var(--background)); color: var(--primary); font-size: 17px; }
.ctf-products-guide > summary > span:nth-child(2) { min-width: 0; display: grid; gap: .2rem; }
.ctf-products-guide > summary strong { color: var(--foreground); font-size: 13px; }
.ctf-products-guide > summary small { color: var(--muted-foreground); font-size: 11px; }
.ctf-products-guide-chevron { margin-inline-start: auto; color: var(--muted-foreground); transition: transform .15s ease; }
.ctf-products-guide[open] .ctf-products-guide-chevron { transform: rotate(180deg); }
.ctf-products-guide-body { border-top: 1px solid var(--border); padding: 1rem; }
.ctf-products-guide-body > p { margin: 0 0 .75rem; color: var(--muted-foreground); font-size: 12px; line-height: 1.5; }
.ctf-products-endpoints { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.ctf-products-endpoints > div { display: grid; gap: .35rem; border: 1px solid var(--border); border-radius: .5rem; padding: .7rem; background: color-mix(in oklab, var(--muted) 28%, transparent); }
.ctf-products-endpoints span { color: var(--muted-foreground); font-size: 10px; font-weight: 600; text-transform: uppercase; }
.ctf-products-endpoints strong { width: fit-content; max-width: 100%; overflow-wrap: anywhere; color: var(--foreground); font-size: 11px; font-weight: 600; }
.ctf-products-guide-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-top: .75rem; }
.ctf-products-guide-notes > div { display: flex; align-items: flex-start; gap: .6rem; color: var(--muted-foreground); font-size: 11px; line-height: 1.45; }
.ctf-products-guide-notes > div > i { margin-top: .15rem; color: var(--primary); }
.ctf-products-guide-notes strong { color: var(--foreground); }
.ctf-products-code-example { margin-top: .75rem; border-top: 1px solid var(--border); padding-top: .75rem; }
.ctf-products-code-example > summary { width: fit-content; cursor: pointer; color: var(--primary); font-size: 11px; font-weight: 700; }
.ctf-products-code-example pre { display: block; max-height: 360px; margin: .75rem 0 0; overflow: auto; white-space: pre-wrap; font-size: 11px; line-height: 1.5; }
.ctf-products-list-card { overflow: visible; }
.ctf-products-list-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--border); padding: 1rem 1.1rem; }
.ctf-products-filter-count { display: inline-flex; align-items: center; gap: .35rem; border-radius: 999px; padding: .3rem .6rem; background: color-mix(in oklab, var(--primary) 10%, var(--background)); color: var(--primary); font-size: 10px; font-weight: 700; white-space: nowrap; }
.ctf-products-filter-form { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: end; gap: .75rem; border-bottom: 1px solid var(--border); padding: 1rem 1.1rem; background: color-mix(in oklab, var(--muted) 22%, transparent); }
.ctf-products-filter-field { min-width: 0; display: grid; grid-column: span 1; gap: .4rem; }
.ctf-products-filter-field > span { color: var(--muted-foreground); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.ctf-products-filter-field > small { color: var(--muted-foreground); font-size: 10px; line-height: 1.35; }
.ctf-products-filter-field .kt-input,
.ctf-products-filter-field .kt-select { width: 100%; height: 40px; }
.ctf-products-filter-search { grid-column: span 2; }
.ctf-products-control-with-icon { position: relative; }
.ctf-products-control-with-icon > i { position: absolute; inset-inline-start: .75rem; top: 50%; z-index: 1; transform: translateY(-50%); color: var(--muted-foreground); pointer-events: none; }
.ctf-products-control-with-icon .kt-input { padding-inline-start: 2.25rem; }
.ctf-products-filter-actions { display: flex; align-items: center; gap: .35rem; min-width: max-content; }
.ctf-products-filter-actions .kt-btn { min-height: 40px; }
.ctf-products-advanced-filters { grid-column: 1 / -1; border-top: 1px dashed var(--border); padding-top: .75rem; }
.ctf-products-advanced-filters > summary { width: fit-content; display: flex; align-items: center; gap: .5rem; cursor: pointer; list-style: none; color: var(--muted-foreground); font-size: 11px; font-weight: 600; }
.ctf-products-advanced-filters > summary::-webkit-details-marker { display: none; }
.ctf-products-advanced-filters > summary i:last-child { transition: transform .15s ease; }
.ctf-products-advanced-filters[open] > summary i:last-child { transform: rotate(180deg); }
.ctf-products-advanced-filters > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: .75rem; }
.ctf-products-table-wrap { max-width: 100%; overflow-x: auto; }
.ctf-products-table { min-width: 900px; }
.ctf-products-table th { padding: .75rem 1rem; color: var(--muted-foreground); font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.ctf-products-table td { padding: .85rem 1rem; vertical-align: middle; }
.ctf-products-table tbody tr { transition: background .15s ease; }
.ctf-products-table tbody tr:hover { background: color-mix(in oklab, var(--primary) 4%, transparent); }
.ctf-products-product-cell { min-width: 320px; display: flex; align-items: center; gap: .75rem; }
.ctf-products-product-image { position: relative; width: 52px; height: 52px; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--border); border-radius: .55rem; background: color-mix(in oklab, var(--muted) 40%, var(--background)); color: var(--muted-foreground); font-size: 20px; }
.ctf-products-product-image img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: contain; background: var(--card); }
.ctf-products-product-cell > div { min-width: 0; display: grid; gap: .2rem; }
.ctf-products-product-name { max-width: 360px; overflow: hidden; color: var(--foreground); font-size: 12px; font-weight: 700; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.ctf-products-product-name:hover { color: var(--primary); }
.ctf-products-product-code { color: var(--muted-foreground); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; }
.ctf-products-product-brand { width: fit-content; border-radius: 999px; padding: .12rem .4rem; background: color-mix(in oklab, var(--muted-foreground) 10%, var(--background)); color: var(--muted-foreground); font-size: 9px; font-weight: 700; }
.ctf-products-category,
.ctf-products-account { display: block; max-width: 180px; overflow: hidden; color: var(--foreground); font-size: 11px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.ctf-products-table td > small { display: block; margin-top: .2rem; color: var(--muted-foreground); font-size: 9px; }
.ctf-products-price { white-space: nowrap; }
.ctf-products-price strong { display: block; color: var(--foreground); font-size: 11px; }
.ctf-products-price del { display: block; margin-top: .2rem; color: var(--muted-foreground); font-size: 9px; }
.ctf-products-status { width: fit-content; max-width: 190px; display: inline-flex; align-items: center; gap: .35rem; border-radius: 999px; padding: .3rem .55rem; font-size: 10px; font-weight: 700; line-height: 1.3; }
.ctf-products-status.is-success { background: color-mix(in oklab, #16a34a 12%, var(--background)); color: #16a34a; }
.ctf-products-status.is-warning { background: color-mix(in oklab, #d97706 13%, var(--background)); color: #d97706; }
.ctf-products-row-action { width: 50px; padding-inline-start: .25rem !important; }
.ctf-products-row-action a { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: .45rem; color: var(--muted-foreground); }
.ctf-products-row-action a:hover { border-color: color-mix(in oklab, var(--primary) 34%, var(--border)); background: color-mix(in oklab, var(--primary) 8%, var(--background)); color: var(--primary); }
.ctf-products-empty-row:hover { background: transparent !important; }
.ctf-products-empty-row td { padding: 2.5rem 1rem; text-align: center; }
.ctf-products-empty-row td > i { display: block; margin-bottom: .5rem; color: var(--muted-foreground); font-size: 24px; }
.ctf-products-empty-row strong { display: block; color: var(--foreground); font-size: 13px; }
.ctf-products-empty-row span { display: block; margin-top: .25rem; color: var(--muted-foreground); font-size: 11px; }
.ctf-products-list-card > .pagination { padding: 0 1rem 1rem; }
.ctf-categories-card > .kt-card-header > div { display: flex; align-items: center; gap: .65rem; }
.ctf-categories-card > .kt-card-header .muted { font-size: 11px; }
.ctf-categories-filter { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); align-items: end; gap: .75rem; border-bottom: 1px solid var(--border); padding: 1rem 1.1rem; background: color-mix(in oklab, var(--muted) 22%, transparent); }
.ctf-categories-filter-search { grid-column: span 2; }
.ctf-categories-filter-actions { display: flex; align-items: center; gap: .35rem; min-width: max-content; }
.ctf-categories-filter-actions .kt-btn { min-height: 40px; }
.ctf-categories-table-wrap { width: 100%; max-width: 100%; overflow-x: auto; }
.ctf-categories-table { min-width: 1050px; }
.ctf-sales-report-card { min-width: 0; overflow: hidden; }
.ctf-sales-report-card > .kt-card-header { display: block; }
.ctf-sales-filter { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.ctf-sales-filter > .kt-input,
.ctf-sales-filter > .kt-select,
.ctf-sales-filter > .kt-btn { width: 100%; min-width: 0; min-height: 38px; }
.ctf-sales-filter > .kt-btn { justify-content: center; }
.ctf-sales-table-wrap { width: 100%; max-width: 100%; overflow-x: auto; }
.ctf-sales-table { width: 100%; min-width: 960px; table-layout: fixed; }
.ctf-sales-table th,
.ctf-sales-table td { padding: .7rem .6rem; vertical-align: top; }
.ctf-sales-table th { color: var(--muted-foreground); font-size: 9px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.ctf-sales-table th:first-child { width: 42px; }
.ctf-sales-table th:nth-child(2) { width: 25%; }
.ctf-sales-table th:nth-child(3),
.ctf-sales-table th:nth-child(4) { width: 12%; }
.ctf-sales-table th:nth-child(5) { width: 14%; }
.ctf-sales-table th:nth-child(6) { width: 10%; }
.ctf-sales-table th:nth-child(7) { width: 13%; }
.ctf-sales-table th:nth-child(8) { width: 10%; }
.ctf-sales-row-number { color: var(--muted-foreground); font-weight: 700; }
.ctf-sales-product-cell { line-height: 1.35; }
.ctf-sales-product-cell > a,
.ctf-sales-product-cell > strong { display: block; margin-top: .25rem; color: var(--foreground); font-size: 11px; font-weight: 700; line-height: 1.35; }
.ctf-sales-product-cell > a:hover { color: var(--primary); }
.ctf-sales-product-cell > small,
.ctf-sales-product-code { display: block; color: var(--muted-foreground); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 9px; overflow-wrap: anywhere; }
.ctf-sales-product-cell > .kt-badge,
.ctf-sales-product-cell > small { margin-top: .3rem; }
.ctf-sales-metric strong { display: block; color: var(--foreground); font-size: 10px; line-height: 1.35; overflow-wrap: anywhere; }
.ctf-sales-metric small { display: block; margin-top: .25rem; color: var(--muted-foreground); font-size: 9px; }
.ctf-sales-metric-list > span { display: flex; align-items: center; justify-content: space-between; gap: .35rem; }
.ctf-sales-metric-list > span + span { margin-top: .35rem; }
.ctf-sales-metric-list small { color: var(--muted-foreground); font-size: 8px; line-height: 1.2; }
.ctf-sales-metric-list strong { color: var(--foreground); font-size: 9px; }
.ctf-sales-empty td { padding: 2rem 1rem; text-align: center; }
.ctf-report-cell { min-width: 0; display: grid; gap: .2rem; }
.ctf-report-link { color: var(--primary); font-weight: 700; }
.ctf-report-link:hover { text-decoration: underline; }
.ctf-report-cell small { max-width: 220px; overflow: hidden; color: var(--muted-foreground); font-size: 9px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.ctf-system-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.ctf-system-stat { min-width: 0; display: grid; grid-template-columns: 42px minmax(0, 1fr) 18px; align-items: center; gap: .75rem; border: 1px solid var(--border); border-radius: .65rem; padding: .8rem; background: color-mix(in oklab, var(--muted) 24%, transparent); transition: border-color .15s ease, background .15s ease; }
.ctf-system-stat:hover { border-color: color-mix(in oklab, var(--primary) 38%, var(--border)); background: color-mix(in oklab, var(--primary) 6%, var(--background)); }
.ctf-system-stat-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: .6rem; background: color-mix(in oklab, var(--primary) 12%, var(--background)); color: var(--primary); font-size: 18px; }
.ctf-system-stat > span:nth-child(2) { min-width: 0; display: grid; gap: .12rem; }
.ctf-system-stat small { color: var(--muted-foreground); font-size: 10px; font-weight: 600; }
.ctf-system-stat strong { color: var(--foreground); font-size: 20px; line-height: 1.1; }
.ctf-system-stat > span > span { overflow: hidden; color: var(--muted-foreground); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.ctf-system-stat-arrow { color: var(--muted-foreground); font-size: 12px; }
.ctf-system-log-card { min-width: 0; overflow: hidden; }
.ctf-system-filters { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: end; gap: .75rem; border-bottom: 1px solid var(--border); padding: 1rem 1.1rem; background: color-mix(in oklab, var(--muted) 22%, transparent); }
.ctf-system-filters > label { min-width: 0; display: grid; gap: .4rem; }
.ctf-system-filters > label > span { color: var(--muted-foreground); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.ctf-system-filters .kt-input,
.ctf-system-filters .kt-select { width: 100%; height: 40px; }
.ctf-system-filter-search { grid-column: span 2; }
.ctf-system-search-control { position: relative; }
.ctf-system-search-control > i { position: absolute; inset-inline-start: .75rem; top: 50%; transform: translateY(-50%); color: var(--muted-foreground); pointer-events: none; }
.ctf-system-search-control .kt-input { padding-inline-start: 2.25rem; }
.ctf-system-filter-actions { display: flex; align-items: center; justify-content: flex-end; gap: .35rem; }
.ctf-system-filter-actions .kt-btn { min-height: 40px; }
.ctf-system-help { display: flex; align-items: flex-start; gap: .6rem; border-bottom: 1px solid var(--border); padding: .75rem 1.1rem; color: var(--muted-foreground); font-size: 11px; line-height: 1.45; }
.ctf-system-help i { margin-top: .1rem; color: var(--primary); }
.ctf-system-table-wrap { width: 100%; max-width: 100%; overflow-x: auto; }
.ctf-system-table { width: 100%; min-width: 980px; table-layout: fixed; }
.ctf-system-table th { padding: .7rem .75rem; color: var(--muted-foreground); font-size: 9px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.ctf-system-table td { padding: .75rem; vertical-align: middle; }
.ctf-system-table th:nth-child(1) { width: 92px; }
.ctf-system-table th:nth-child(2) { width: 150px; }
.ctf-system-table th:nth-child(3) { width: 100px; }
.ctf-system-table th:nth-child(4) { width: 130px; }
.ctf-system-table th:nth-child(5) { width: 82px; }
.ctf-system-table th:nth-child(6) { width: 82px; }
.ctf-system-table tbody tr { transition: background .15s ease; }
.ctf-system-table tbody tr:hover { background: color-mix(in oklab, var(--primary) 4%, transparent); }
.ctf-system-date,
.ctf-system-event { display: table-cell; }
.ctf-system-date strong,
.ctf-system-event strong { display: block; color: var(--foreground); font-size: 10px; line-height: 1.35; }
.ctf-system-date small,
.ctf-system-event small { display: block; margin-top: .2rem; overflow: hidden; color: var(--muted-foreground); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.ctf-system-source,
.ctf-system-product,
.ctf-system-code { display: block; overflow: hidden; color: var(--muted-foreground); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.ctf-system-level { width: fit-content; display: inline-flex; align-items: center; border-radius: 999px; padding: .25rem .5rem; font-size: 9px; font-weight: 700; }
.ctf-system-level.is-info { background: color-mix(in oklab, var(--primary) 10%, var(--background)); color: var(--primary); }
.ctf-system-level.is-success { background: color-mix(in oklab, #16a34a 12%, var(--background)); color: #16a34a; }
.ctf-system-level.is-warning { background: color-mix(in oklab, #d97706 13%, var(--background)); color: #d97706; }
.ctf-system-level.is-error { background: color-mix(in oklab, #dc2626 12%, var(--background)); color: #dc2626; }
.ctf-system-description { color: var(--foreground); font-size: 10px; line-height: 1.45; overflow-wrap: anywhere; }
.ctf-system-empty td { padding: 2.5rem 1rem; text-align: center; }
.ctf-system-empty i { display: block; margin-bottom: .5rem; color: var(--muted-foreground); font-size: 22px; }
.ctf-system-empty strong { display: block; color: var(--foreground); font-size: 12px; }
.ctf-system-empty span { display: block; margin-top: .25rem; color: var(--muted-foreground); font-size: 10px; }
.ctf-system-pagination { padding: 0 1rem 1rem; }
.ctf-customer-tags { display: grid; gap: .65rem; border-top: 1px solid var(--border); margin-top: 1rem; padding-top: 1rem; }
.ctf-customer-tags > strong { color: var(--foreground); font-size: 12px; }
.ctf-customer-searches { display: grid; align-content: start; gap: .65rem; }
.ctf-customer-search-item { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: .75rem; border: 1px solid var(--border); border-radius: .55rem; padding: .7rem .75rem; background: color-mix(in oklab, var(--muted) 30%, transparent); }
.ctf-customer-search-item > div { min-width: 0; display: grid; gap: .25rem; }
.ctf-customer-search-item strong { overflow: hidden; color: var(--foreground); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.ctf-customer-search-item small { color: var(--muted-foreground); font-size: 10px; }
.ctf-customer-search-item > .kt-badge { flex: 0 0 auto; }
.ctf-customer-empty { min-height: 180px; display: grid; place-content: center; gap: .4rem; color: var(--muted-foreground); text-align: center; }
.ctf-customer-empty strong { color: var(--foreground); font-size: 13px; }
.ctf-customer-empty span { max-width: 440px; font-size: 11px; line-height: 1.5; }
.ctf-customer-history-wrap { max-width: 100%; overflow-x: auto; }
.ctf-customer-history { min-width: 860px; }
.ctf-customer-history th { white-space: nowrap; }
.ctf-customer-history td:nth-child(2) { max-width: 220px; overflow-wrap: anywhere; }
.ctf-customer-history td:nth-child(3) { max-width: 320px; }
@media (max-width: 900px) {
    .grid-4, .grid-3, .grid-2, .ctf-api-quickstart { grid-template-columns: 1fr; }
    .ctf-system-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ctf-system-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ctf-system-filter-search { grid-column: span 2; }
    .ctf-system-filter-actions { grid-column: span 2; }
    .kt-card-header { flex-wrap: wrap; }
    .kt-card-content { overflow-x: auto; }
    .kt-card-header:has(> form.toolbar) { align-items: stretch; }
    .kt-card-header > form.toolbar { width: 100%; }
    .kt-card-header > form.toolbar > .kt-select,
    .kt-card-header > form.toolbar > .kt-input { flex: 1 1 220px; }
    .kt-card-header:has(> form.toolbar) > .kt-btn { justify-content: center; }
    .ctf-list-header { align-items: stretch; }
    .ctf-filter-bar { width: 100%; flex-wrap: wrap; }
    .ctf-filter-type, .ctf-filter-search { flex: 1 1 220px; }
    .ctf-list-action { justify-content: center; }
    .ctf-page-help { align-items: stretch; flex-direction: column; }
    .ctf-page-help .kt-btn { justify-content: center; }
    .ctf-help-layout { grid-template-columns: 1fr; }
    .ctf-help-nav { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ctf-auth-page { padding: 1rem; place-items: stretch; }
    .ctf-auth-theme { top: .85rem; right: .85rem; }
    .ctf-auth-shell { min-height: auto; grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
    .ctf-auth-shell-wide { grid-template-columns: 1fr; }
    .ctf-auth-intro { padding: 1.25rem; border-inline-end: 0; border-bottom: 1px solid var(--border); }
    .ctf-auth-copy { margin-top: 1rem; }
    .ctf-auth-copy h1 { font-size: 26px; }
    .ctf-auth-metrics { grid-template-columns: 1fr; }
    .ctf-auth-panel { padding: 1.25rem; }
    .ctf-auth-form { max-width: none; }
    .ctf-plan-picker,
    .ctf-auth-register-grid.grid-2,
    .ctf-auth-register-grid.grid-3 { grid-template-columns: 1fr; }
    .ctf-product-nav { align-items: stretch; flex-direction: column; }
    .ctf-product-nav-links { width: 100%; overflow-x: auto; padding-bottom: .1rem; }
    .ctf-product-nav-more { width: 100%; }
    .ctf-product-nav-more > summary { width: 100%; justify-content: center; }
    .ctf-product-nav-menu { position: static; width: 100%; margin-top: .4rem; box-shadow: none; }
    .ctf-products-overview { grid-template-columns: 1fr; }
    .ctf-products-filter-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ctf-products-filter-search { grid-column: span 2; }
    .ctf-products-filter-actions { align-self: end; }
    .ctf-products-advanced-filters { grid-column: 1 / -1; }
    .ctf-products-table { min-width: 0; display: block; }
    .ctf-products-table thead { display: none; }
    .ctf-products-table tbody { display: grid; gap: .75rem; padding: .75rem; }
    .ctf-products-table tbody tr { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; border: 1px solid var(--border); border-radius: .65rem; padding: .85rem; background: var(--card); }
    .ctf-products-table tbody td { display: block; border: 0 !important; padding: 0 !important; }
    .ctf-products-table tbody td[data-label]::before { content: attr(data-label); display: block; margin-bottom: .3rem; color: var(--muted-foreground); font-size: 9px; font-weight: 700; text-transform: uppercase; }
    .ctf-products-product-cell { min-width: 0; grid-column: 1 / -1; padding-inline-end: 2.5rem !important; }
    .ctf-products-product-name { max-width: none; white-space: normal; }
    .ctf-products-category,
    .ctf-products-account { max-width: none; white-space: normal; }
    .ctf-products-row-action { position: absolute; top: .85rem; inset-inline-end: .85rem; width: auto; }
    .ctf-products-empty-row { display: block !important; }
    .ctf-products-empty-row td { padding: 2rem .75rem !important; }
    .ctf-categories-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ctf-sales-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ctf-sales-table { min-width: 0; display: block; }
    .ctf-sales-table thead { display: none; }
    .ctf-sales-table tbody { display: grid; gap: .75rem; }
    .ctf-sales-table tbody tr { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; border: 1px solid var(--border); border-radius: .65rem; padding: .85rem; background: var(--card); }
    .ctf-sales-table tbody td { display: block; border: 0 !important; padding: 0 !important; }
    .ctf-sales-table tbody td[data-label]::before { content: attr(data-label); display: block; margin-bottom: .3rem; color: var(--muted-foreground); font-size: 9px; font-weight: 700; text-transform: uppercase; }
    .ctf-sales-table .ctf-sales-row-number { position: absolute; top: .85rem; right: .85rem; }
    .ctf-sales-product-cell { grid-column: 1 / -1; padding-right: 2rem !important; }
    .ctf-sales-empty { display: block !important; }
    .ctf-sales-empty td { padding: 2rem .75rem !important; }
    .ctf-customer-search-item { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 640px) {
    .ctf-system-stats,
    .ctf-system-filters { grid-template-columns: 1fr; }
    .ctf-system-filter-search,
    .ctf-system-filter-actions { grid-column: 1; }
    .ctf-system-filter-actions .kt-btn { flex: 1 1 auto; justify-content: center; }
    .ctf-auth-page { padding: .75rem; }
    .ctf-auth-shell { min-height: 0; }
    .ctf-auth-intro { gap: 0; padding: 1rem; }
    .ctf-auth-copy,
    .ctf-auth-metrics { display: none; }
    .ctf-auth-panel { align-items: flex-start; padding: 1rem; }
    #headerContainer { min-width: 0; gap: .35rem; padding-inline: .75rem; }
    .ctf-header-menu { flex: 0 0 auto; }
    .ctf-header-title { min-width: 0; flex: 1 1 0; }
    .ctf-header-title > div { min-width: 0; }
    .ctf-header-actions { flex: 0 0 auto; gap: .25rem; }
    .ctf-page-title { overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
    .ctf-page-subtitle { display: none; }
    .ctf-header-switch { display: none; }
    .ctf-header-actions .kt-btn { width: 34px; height: 34px; justify-content: center; padding: 0; }
    .ctf-logout-label { display: none; }
    .kt-container-fixed { max-width: 100%; padding-inline: .75rem; }
    .kt-card-content { padding-inline: .75rem; }
    #swagger-ui { max-width: 100%; }
    #swagger-ui .swagger-ui .wrapper { padding-inline: 0; }
    .ctf-product-nav-menu { grid-template-columns: 1fr; }
    .ctf-products-section-head { align-items: stretch; flex-direction: column; }
    .ctf-products-source-badge { width: fit-content; }
    .ctf-products-metrics,
    .ctf-products-issues,
    .ctf-products-endpoints,
    .ctf-products-guide-notes,
    .ctf-products-filter-form,
    .ctf-products-advanced-filters > div { grid-template-columns: 1fr; }
    .ctf-products-filter-search,
    .ctf-products-filter-field,
    .ctf-products-filter-actions { grid-column: 1; }
    .ctf-products-filter-actions { min-width: 0; }
    .ctf-products-filter-actions .kt-btn { flex: 1 1 auto; justify-content: center; }
    .ctf-products-list-head { align-items: flex-start; flex-direction: column; }
    .ctf-products-table tbody tr { grid-template-columns: 1fr; }
    .ctf-categories-filter { grid-template-columns: 1fr; }
    .ctf-categories-filter-search { grid-column: 1; }
    .ctf-categories-filter-actions { min-width: 0; }
    .ctf-categories-filter-actions .kt-btn { flex: 1 1 auto; justify-content: center; }
    .ctf-sales-filter,
    .ctf-sales-table tbody tr { grid-template-columns: 1fr; }
}