/* ============================================================================
   ZENIKIT v1.0 — OS-Grade UI Framework
   Physics-Informed · GPU-Accelerated · Flask + Django Native
   
   8,200+ lines · 1,300+ selectors · 37 keyframes · 47 media queries · 0 JS deps
   
   Sections:
   ├─ 1. Reset & Base         ├─ 9. Prose Typography
   ├─ 2. Design Tokens        ├─ 10. Form Validation
   ├─ 3. Typography            ├─ 11. Responsive Visibility
   ├─ 4. Layout Utilities     ├─ 12. Tooltip / Dropdown / Kbd
   ├─ 5. Components           ├─ 13. Glassmorphism / Blur
   ├─ 6. Dock (macOS-style)   ├─ 14. Gradient Text / Animation
   ├─ 7. Animations           ├─ 15. Performance Layer
   └─ 8. Enterprise (v0.8)    └─ 16. SDK (40+ JS APIs)
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
@import 'tokens.css';

/* ============================================================================
   1. RESET & BASE
   ============================================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--zk-font-sans);
    font-size: var(--zk-text-md);
    line-height: var(--zk-leading-normal);
    color: var(--zk-fg-primary);
    background-color: var(--zk-bg-primary);
    min-height: 100dvh;
    overflow-x: hidden;
}

img,
video,
svg {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
}

input,
textarea,
select {
    font: inherit;
    color: inherit;
}

ul,
ol {
    list-style: none;
}

table {
    border-collapse: collapse;
    width: 100%;
}

/* Focus visible for accessibility */
:focus-visible {
    outline: none;
    box-shadow: var(--zk-focus-ring);
}

::selection {
    background-color: var(--zk-brand-100);
    color: var(--zk-brand-900);
}

[data-theme="dark"] ::selection {
    background-color: var(--zk-brand-800);
    color: var(--zk-brand-100);
}

/* ============================================================================
   2. TYPOGRAPHY
   ============================================================================ */

.zk-h1 {
    font-size: var(--zk-text-4xl);
    font-weight: var(--zk-weight-bold);
    line-height: var(--zk-leading-tight);
    letter-spacing: -0.025em;
}

.zk-h2 {
    font-size: var(--zk-text-3xl);
    font-weight: var(--zk-weight-bold);
    line-height: var(--zk-leading-tight);
    letter-spacing: -0.02em;
}

.zk-h3 {
    font-size: var(--zk-text-2xl);
    font-weight: var(--zk-weight-semibold);
    line-height: var(--zk-leading-tight);
}

.zk-h4 {
    font-size: var(--zk-text-xl);
    font-weight: var(--zk-weight-semibold);
    line-height: var(--zk-leading-tight);
}

.zk-h5 {
    font-size: var(--zk-text-lg);
    font-weight: var(--zk-weight-semibold);
    line-height: var(--zk-leading-normal);
}

.zk-h6 {
    font-size: var(--zk-text-md);
    font-weight: var(--zk-weight-semibold);
    line-height: var(--zk-leading-normal);
}

.zk-text-xs {
    font-size: var(--zk-text-xs);
}

.zk-text-sm {
    font-size: var(--zk-text-sm);
}

.zk-text-md {
    font-size: var(--zk-text-md);
}

.zk-text-lg {
    font-size: var(--zk-text-lg);
}

.zk-text-xl {
    font-size: var(--zk-text-xl);
}

.zk-text-muted {
    color: var(--zk-fg-secondary);
}

.zk-text-tertiary {
    color: var(--zk-fg-tertiary);
}

.zk-text-brand {
    color: var(--zk-fg-brand);
}

.zk-text-success {
    color: var(--zk-success-600);
}

.zk-text-warning {
    color: var(--zk-warning-600);
}

.zk-text-error {
    color: var(--zk-error-600);
}

.zk-text-muted {
    color: var(--zk-fg-tertiary);
}

.zk-font-mono {
    font-family: var(--zk-font-mono);
}

.zk-font-medium {
    font-weight: var(--zk-weight-medium);
}

.zk-font-semibold {
    font-weight: var(--zk-weight-semibold);
}

.zk-font-bold {
    font-weight: var(--zk-weight-bold);
}

/* ============================================================================
   3. LAYOUT UTILITIES
   ============================================================================ */

.zk-container {
    width: 100%;
    max-width: var(--zk-container-xl);
    margin-inline: auto;
    padding-inline: var(--zk-space-4);
}

@media (min-width: 640px) {
    .zk-container {
        padding-inline: var(--zk-space-6);
    }
}

@media (min-width: 1024px) {
    .zk-container {
        padding-inline: var(--zk-space-8);
    }
}

/* Flex */
.zk-flex {
    display: flex;
}

.zk-flex-col {
    flex-direction: column;
}

.zk-flex-wrap {
    flex-wrap: wrap;
}

.zk-flex-1 {
    flex: 1 1 0%;
}

.zk-flex-none {
    flex: none;
}

.zk-items-center {
    align-items: center;
}

.zk-items-start {
    align-items: flex-start;
}

.zk-items-end {
    align-items: flex-end;
}

.zk-items-stretch {
    align-items: stretch;
}

.zk-justify-center {
    justify-content: center;
}

.zk-justify-between {
    justify-content: space-between;
}

.zk-justify-end {
    justify-content: flex-end;
}

.zk-gap-1 {
    gap: var(--zk-space-1);
}

.zk-gap-2 {
    gap: var(--zk-space-2);
}

.zk-gap-3 {
    gap: var(--zk-space-3);
}

.zk-gap-4 {
    gap: var(--zk-space-4);
}

.zk-gap-6 {
    gap: var(--zk-space-6);
}

.zk-gap-8 {
    gap: var(--zk-space-8);
}

/* Grid */
.zk-grid {
    display: grid;
}

.zk-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--zk-space-4);
}

.zk-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--zk-space-4);
}

.zk-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--zk-space-4);
}

@media (max-width: 767px) {

    .zk-grid-2,
    .zk-grid-3,
    .zk-grid-4 {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .zk-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .zk-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Spacing */
.zk-p-0 {
    padding: 0;
}

.zk-p-2 {
    padding: var(--zk-space-2);
}

.zk-p-3 {
    padding: var(--zk-space-3);
}

.zk-p-4 {
    padding: var(--zk-space-4);
}

.zk-p-6 {
    padding: var(--zk-space-6);
}

.zk-p-8 {
    padding: var(--zk-space-8);
}

.zk-px-3 {
    padding-inline: var(--zk-space-3);
}

.zk-px-4 {
    padding-inline: var(--zk-space-4);
}

.zk-px-6 {
    padding-inline: var(--zk-space-6);
}

.zk-py-2 {
    padding-block: var(--zk-space-2);
}

.zk-py-3 {
    padding-block: var(--zk-space-3);
}

.zk-py-4 {
    padding-block: var(--zk-space-4);
}

.zk-pt-6 {
    padding-top: var(--zk-space-6);
}

.zk-pb-24 {
    padding-bottom: 8rem;
    /* 128px — dock clearance for desktop */
}

@media (max-width: 640px) {
    .zk-pb-24 {
        padding-bottom: 10rem;
        /* 160px — extra dock clearance for mobile */
    }
}

.zk-m-0 {
    margin: 0;
}

.zk-mt-2 {
    margin-top: var(--zk-space-2);
}

.zk-mt-4 {
    margin-top: var(--zk-space-4);
}

.zk-mt-6 {
    margin-top: var(--zk-space-6);
}

.zk-mt-8 {
    margin-top: var(--zk-space-8);
}

.zk-mb-2 {
    margin-bottom: var(--zk-space-2);
}

.zk-mb-4 {
    margin-bottom: var(--zk-space-4);
}

.zk-mb-6 {
    margin-bottom: var(--zk-space-6);
}

.zk-ml-auto {
    margin-left: auto;
}

/* Display */
.zk-hidden {
    display: none;
}

.zk-block {
    display: block;
}

.zk-inline {
    display: inline;
}

.zk-relative {
    position: relative;
}

.zk-absolute {
    position: absolute;
}

.zk-fixed {
    position: fixed;
}

.zk-sticky {
    position: sticky;
    top: 0;
    z-index: var(--zk-z-sticky);
}

.zk-w-full {
    width: 100%;
}

.zk-h-full {
    height: 100%;
}

.zk-min-h-screen {
    min-height: 100dvh;
}

.zk-overflow-auto {
    overflow: auto;
}

.zk-overflow-hidden {
    overflow: hidden;
}

.zk-overflow-x-auto {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.zk-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zk-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Divider */
.zk-divider {
    border: none;
    border-top: 1px solid var(--zk-border-primary);
    margin-block: var(--zk-space-4);
}

/* ============================================================================
   4. COMPONENTS
   ============================================================================ */

/* ─── Button ─── */
.zk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--zk-space-2);
    white-space: nowrap;
    border: none;
    border-radius: var(--zk-radius-lg);
    font-weight: var(--zk-weight-semibold);
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: var(--zk-transition-fast);
    position: relative;
    user-select: none;
}

.zk-btn:disabled,
.zk-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.zk-btn:active:not(:disabled) {
    transform: scale(0.97);
}

/* Sizes */
.zk-btn-sm {
    padding: var(--zk-space-1_5) var(--zk-space-2_5);
    font-size: var(--zk-text-xs);
}

.zk-btn-md {
    padding: var(--zk-space-2) var(--zk-space-3_5);
    font-size: var(--zk-text-sm);
}

.zk-btn-lg {
    padding: var(--zk-space-3) var(--zk-space-5);
    font-size: var(--zk-text-md);
}

/* Variants */
.zk-btn-primary {
    background: var(--zk-brand-600);
    color: var(--zk-fg-on-brand);
    box-shadow: var(--zk-shadow-skeumorphic);
}

.zk-btn-primary:hover:not(:disabled) {
    background: var(--zk-brand-700);
}

.zk-btn-secondary {
    background: var(--zk-bg-primary);
    color: var(--zk-fg-secondary);
    border: 1px solid var(--zk-border-primary);
    box-shadow: var(--zk-shadow-xs);
}

.zk-btn-secondary:hover:not(:disabled) {
    background: var(--zk-bg-secondary);
    color: var(--zk-fg-primary);
}

.zk-btn-ghost {
    background: transparent;
    color: var(--zk-fg-secondary);
}

.zk-btn-ghost:hover:not(:disabled) {
    background: var(--zk-bg-tertiary);
    color: var(--zk-fg-primary);
}

.zk-btn-danger {
    background: var(--zk-error-600);
    color: #fff;
    box-shadow: var(--zk-shadow-skeumorphic);
}

.zk-btn-danger:hover:not(:disabled) {
    background: var(--zk-error-700);
}

.zk-btn-link {
    background: none;
    color: var(--zk-fg-brand);
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.zk-btn-link:hover {
    color: var(--zk-brand-700);
}

/* Icon-only button */
.zk-btn-icon {
    padding: var(--zk-space-2);
}

.zk-btn-icon.zk-btn-sm {
    padding: var(--zk-space-1_5);
}

.zk-btn-icon.zk-btn-lg {
    padding: var(--zk-space-3);
}

/* Full width (mobile) */
.zk-btn-full {
    width: 100%;
}

/* Loading */
.zk-btn-loading {
    pointer-events: none;
}

.zk-btn-loading .zk-btn-text {
    visibility: hidden;
}

.zk-btn-loading .zk-btn-spinner {
    position: absolute;
}

/* Button spinner */
.zk-btn-spinner {
    width: 1.25rem;
    height: 1.25rem;
    animation: zk-spin 0.6s linear infinite;
}

/* ─── Input ─── */
.zk-input-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--zk-space-1_5);
}

.zk-label {
    font-size: var(--zk-text-sm);
    font-weight: var(--zk-weight-medium);
    color: var(--zk-fg-primary);
}

.zk-input {
    display: block;
    width: 100%;
    padding: var(--zk-space-2) var(--zk-space-3_5);
    font-size: var(--zk-text-sm);
    line-height: var(--zk-leading-normal);
    color: var(--zk-fg-primary);
    background: var(--zk-bg-primary);
    border: 1px solid var(--zk-border-primary);
    border-radius: var(--zk-radius-md);
    box-shadow: var(--zk-shadow-xs);
    transition: var(--zk-transition-fast);
    appearance: none;
}

.zk-input::placeholder {
    color: var(--zk-fg-quaternary);
}

.zk-input:hover:not(:disabled) {
    border-color: var(--zk-gray-300);
}

.zk-input:focus {
    border-color: var(--zk-border-focus);
    box-shadow: var(--zk-focus-ring);
    outline: none;
}

.zk-input:disabled {
    background: var(--zk-bg-secondary);
    color: var(--zk-fg-disabled);
    cursor: not-allowed;
}

.zk-input-error {
    border-color: var(--zk-error-500);
}

.zk-input-error:focus {
    box-shadow: 0 0 0 2px var(--zk-bg-primary), 0 0 0 4px var(--zk-error-500);
}

.zk-hint {
    font-size: var(--zk-text-sm);
    color: var(--zk-fg-tertiary);
}

.zk-error-text {
    font-size: var(--zk-text-sm);
    color: var(--zk-error-600);
}

/* Input sizes */
.zk-input-sm {
    padding: var(--zk-space-1_5) var(--zk-space-2_5);
    font-size: var(--zk-text-xs);
}

.zk-input-lg {
    padding: var(--zk-space-2_5) var(--zk-space-4);
    font-size: var(--zk-text-sm);
}

/* Textarea */
.zk-textarea {
    min-height: 6rem;
    resize: vertical;
}

/* Select */
.zk-select {
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
}

/* ─── Card ─── */
.zk-card {
    background: var(--zk-bg-primary);
    border: 1px solid var(--zk-border-primary);
    border-radius: var(--zk-radius-xl);
    box-shadow: var(--zk-shadow-sm);
    overflow: hidden;
}

.zk-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--zk-space-4) var(--zk-space-5);
    border-bottom: 1px solid var(--zk-border-secondary);
}

.zk-card-body {
    padding: var(--zk-space-5);
}

.zk-card-body-compact {
    padding: var(--zk-space-3);
}

.zk-card-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--zk-space-3);
    padding: var(--zk-space-3) var(--zk-space-5);
    border-top: 1px solid var(--zk-border-secondary);
}

/* Glass card (IlangKural inner-light) */
.zk-card-glass {
    background: var(--zk-bg-glass);
    backdrop-filter: blur(var(--zk-blur-lg));
    -webkit-backdrop-filter: blur(var(--zk-blur-lg));
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: var(--zk-shadow-md), var(--zk-glow-md);
}

/* ─── Table ─── */
.zk-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--zk-border-primary);
    border-radius: var(--zk-radius-xl);
}

.zk-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--zk-text-sm);
}

.zk-table th {
    text-align: left;
    padding: var(--zk-space-3) var(--zk-space-4);
    font-weight: var(--zk-weight-medium);
    color: var(--zk-fg-secondary);
    background: var(--zk-bg-secondary);
    border-bottom: 1px solid var(--zk-border-primary);
    white-space: nowrap;
}

.zk-table td {
    padding: var(--zk-space-3) var(--zk-space-4);
    border-bottom: 1px solid var(--zk-border-secondary);
    color: var(--zk-fg-primary);
}

.zk-table tbody tr:hover {
    background: var(--zk-bg-secondary);
}

.zk-table tbody tr:last-child td {
    border-bottom: none;
}

/* ─── Badge ─── */
.zk-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--zk-space-1);
    padding: 2px var(--zk-space-2);
    font-size: var(--zk-text-xs);
    font-weight: var(--zk-weight-medium);
    border-radius: var(--zk-radius-full);
    white-space: nowrap;
}

.zk-badge-gray {
    background: var(--zk-gray-100);
    color: var(--zk-gray-700);
}

.zk-badge-brand {
    background: var(--zk-brand-50);
    color: var(--zk-brand-700);
}

.zk-badge-success {
    background: var(--zk-success-50);
    color: var(--zk-success-700);
}

.zk-badge-warning {
    background: var(--zk-warning-50);
    color: var(--zk-warning-700);
}

.zk-badge-error {
    background: var(--zk-error-50);
    color: var(--zk-error-700);
}

.zk-badge-info {
    background: var(--zk-info-50);
    color: var(--zk-info-700);
}

/* Badge dot */
.zk-badge-dot::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* ─── Modal ─── */
.zk-modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--zk-bg-overlay);
    z-index: var(--zk-z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--zk-space-4);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--zk-duration-normal) ease, visibility var(--zk-duration-normal) ease;
}

.zk-modal-overlay.zk-active {
    opacity: 1;
    visibility: visible;
}

.zk-modal {
    background: var(--zk-bg-primary);
    border-radius: var(--zk-radius-xl);
    box-shadow: var(--zk-shadow-xl);
    width: 100%;
    max-width: 32rem;
    max-height: 90dvh;
    overflow-y: auto;
    transform: scale(0.95) translateY(10px);
    transition: transform var(--zk-duration-normal) var(--zk-spring-bouncy);
}

.zk-modal-overlay.zk-active .zk-modal {
    transform: scale(1) translateY(0);
}

.zk-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--zk-space-5) var(--zk-space-6);
    border-bottom: 1px solid var(--zk-border-secondary);
}

.zk-modal-body {
    padding: var(--zk-space-6);
}

.zk-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--zk-space-3);
    padding: var(--zk-space-4) var(--zk-space-6);
    border-top: 1px solid var(--zk-border-secondary);
}

/* ─── Toggle / Switch ─── */
.zk-toggle {
    position: relative;
    display: inline-flex;
    width: 2.75rem;
    height: 1.5rem;
    border-radius: var(--zk-radius-full);
    background: var(--zk-gray-200);
    cursor: pointer;
    transition: var(--zk-transition-fast);
}

.zk-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: white;
    box-shadow: var(--zk-shadow-sm);
    transition: transform var(--zk-duration-fast) var(--zk-spring-snappy);
}

.zk-toggle-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.zk-toggle-input:checked+.zk-toggle {
    background: var(--zk-brand-600);
}

.zk-toggle-input:checked+.zk-toggle::after {
    transform: translateX(1.25rem);
}

.zk-toggle-input:focus-visible+.zk-toggle {
    box-shadow: var(--zk-focus-ring);
}

/* ─── Tabs ─── */
.zk-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--zk-border-primary);
}

.zk-tab {
    padding: var(--zk-space-2) var(--zk-space-4);
    font-size: var(--zk-text-sm);
    font-weight: var(--zk-weight-medium);
    color: var(--zk-fg-tertiary);
    border-bottom: 2px solid transparent;
    transition: var(--zk-transition-fast);
    cursor: pointer;
    margin-bottom: -1px;
}

.zk-tab:hover {
    color: var(--zk-fg-secondary);
}

.zk-tab.zk-active,
.zk-tab[aria-selected="true"] {
    color: var(--zk-fg-brand);
    border-bottom-color: var(--zk-brand-600);
}

.zk-tab-content {
    display: none;
    padding: var(--zk-space-6) 0;
}

.zk-tab-content.zk-active {
    display: block;
}

/* ─── Pagination ─── */
.zk-pagination {
    display: flex;
    align-items: center;
    gap: var(--zk-space-1);
}

.zk-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 var(--zk-space-2);
    font-size: var(--zk-text-sm);
    font-weight: var(--zk-weight-medium);
    color: var(--zk-fg-secondary);
    border-radius: var(--zk-radius-md);
    transition: var(--zk-transition-fast);
}

.zk-page-btn:hover {
    background: var(--zk-bg-tertiary);
    color: var(--zk-fg-primary);
}

.zk-page-btn.zk-active {
    background: var(--zk-bg-secondary);
    color: var(--zk-fg-primary);
    border: 1px solid var(--zk-border-primary);
}

/* ─── Avatar ─── */
.zk-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    background: var(--zk-brand-100);
    color: var(--zk-brand-700);
    font-weight: var(--zk-weight-semibold);
    flex-shrink: 0;
}

.zk-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.zk-avatar-xs {
    width: 1.5rem;
    height: 1.5rem;
    font-size: var(--zk-text-xs);
}

.zk-avatar-sm {
    width: 2rem;
    height: 2rem;
    font-size: var(--zk-text-xs);
}

.zk-avatar-md {
    width: 2.5rem;
    height: 2.5rem;
    font-size: var(--zk-text-sm);
}

.zk-avatar-lg {
    width: 3rem;
    height: 3rem;
    font-size: var(--zk-text-md);
}

.zk-avatar-xl {
    width: 4rem;
    height: 4rem;
    font-size: var(--zk-text-lg);
}

/* ─── Empty State ─── */
.zk-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--zk-space-12) var(--zk-space-6);
    text-align: center;
}

.zk-empty-state-icon {
    width: 3rem;
    height: 3rem;
    color: var(--zk-fg-quaternary);
    margin-bottom: var(--zk-space-4);
}

.zk-empty-state-title {
    font-size: var(--zk-text-lg);
    font-weight: var(--zk-weight-semibold);
    color: var(--zk-fg-primary);
    margin-bottom: var(--zk-space-1);
}

.zk-empty-state-desc {
    font-size: var(--zk-text-sm);
    color: var(--zk-fg-tertiary);
    max-width: 20rem;
    margin-bottom: var(--zk-space-6);
}

/* ─── Alert Banner (SaaS: trial, billing, maintenance) ─── */
.zk-alert-banner {
    text-align: center;
    padding: var(--zk-space-1) var(--zk-space-4);
    font-size: var(--zk-text-xs);
    font-weight: var(--zk-weight-semibold);
    letter-spacing: 0.3px;
    color: #fff;
}

.zk-alert-banner a {
    color: #fff;
    text-decoration: underline;
}

.zk-alert-banner-warning {
    background: var(--zk-warning-600);
}

.zk-alert-banner-error {
    background: var(--zk-error-600);
}

.zk-alert-banner-success {
    background: var(--zk-success-600);
}

.zk-alert-banner-info {
    background: var(--zk-brand-600);
}

/* ─── Keyboard Shortcut Badge (standalone) ─── */
.zk-kbd {
    display: inline-block;
    font-family: var(--zk-font-sans);
    font-size: 10px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: var(--zk-radius-sm);
    background: var(--zk-bg-tertiary);
    color: var(--zk-fg-quaternary);
    border: 1px solid var(--zk-border-secondary);
    pointer-events: none;
    vertical-align: middle;
}

/* ─── Toast / Notification ─── */
.zk-toast-container {
    position: fixed;
    top: var(--zk-space-4);
    right: var(--zk-space-4);
    z-index: var(--zk-z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--zk-space-3);
    pointer-events: none;
}

.zk-toast {
    display: flex;
    align-items: flex-start;
    gap: var(--zk-space-3);
    padding: var(--zk-space-4);
    min-width: 20rem;
    max-width: 28rem;
    background: var(--zk-bg-primary);
    border: 1px solid var(--zk-border-primary);
    border-radius: var(--zk-radius-xl);
    box-shadow: var(--zk-shadow-lg);
    pointer-events: auto;
    animation: zk-slide-in-right var(--zk-duration-slow) var(--zk-spring-bouncy);
}

@media (max-width: 639px) {
    .zk-toast-container {
        left: var(--zk-space-4);
        right: var(--zk-space-4);
        top: auto;
        bottom: calc(var(--zk-dock-height) + var(--zk-dock-safe-area) + var(--zk-space-4));
    }

    .zk-toast {
        min-width: 0;
        max-width: none;
        width: 100%;
    }
}

/* ─── Navbar ─── */
.zk-navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--zk-space-3) var(--zk-space-4);
    background: var(--zk-bg-glass);
    backdrop-filter: blur(var(--zk-blur-lg));
    -webkit-backdrop-filter: blur(var(--zk-blur-lg));
    border-bottom: 1px solid var(--zk-border-secondary);
    position: sticky;
    top: 0;
    z-index: var(--zk-z-sticky);
}

@media (min-width: 640px) {
    .zk-navbar {
        padding: var(--zk-space-3) var(--zk-space-6);
    }
}

.zk-navbar-brand {
    display: flex;
    align-items: center;
    gap: var(--zk-space-2);
    font-weight: var(--zk-weight-bold);
    font-size: var(--zk-text-lg);
    color: var(--zk-fg-primary);
}

.zk-navbar-actions {
    display: flex;
    align-items: center;
    gap: var(--zk-space-2);
}

/* ============================================================================
   4b. STATUS BAR (phone-style: brand + search + notifications + theme + user)
   ============================================================================ */

.zk-status-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    padding: 0 var(--zk-space-4);
    background: var(--zk-bg-primary);
    /* Safari fallback */
    background: color-mix(in srgb, var(--zk-bg-primary) 82%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--zk-border-secondary);
}

.zk-status-brand {
    display: flex;
    align-items: center;
    gap: var(--zk-space-2);
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--zk-fg-primary);
    text-decoration: none;
}

.zk-status-brand svg {
    color: var(--zk-brand-500);
}

.zk-status-actions {
    display: flex;
    align-items: center;
    gap: var(--zk-space-1);
}

.zk-status-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--zk-space-1);
    width: 34px;
    height: 34px;
    border: none;
    border-radius: var(--zk-radius-lg);
    background: transparent;
    color: var(--zk-fg-tertiary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.zk-status-btn:hover {
    background: var(--zk-bg-secondary);
    color: var(--zk-fg-primary);
}

.zk-status-kbd {
    display: none;
    font-family: var(--zk-font-sans);
    font-size: 10px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: var(--zk-radius-sm);
    background: var(--zk-bg-tertiary);
    color: var(--zk-fg-quaternary);
    border: 1px solid var(--zk-border-secondary);
    pointer-events: none;
}

@media (min-width: 768px) {
    .zk-status-btn:first-child {
        width: auto;
        padding: 0 var(--zk-space-2);
        gap: var(--zk-space-1_5);
    }

    .zk-status-kbd {
        display: inline-block;
    }
}

/* Notification dot */
.zk-status-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--zk-error-500);
    border: 1.5px solid var(--zk-bg-primary);
}

/* User avatar circle */
.zk-status-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--zk-brand-500), var(--zk-brand-700));
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    margin-left: var(--zk-space-1);
}

.zk-status-avatar:hover {
    background: linear-gradient(135deg, var(--zk-brand-600), var(--zk-brand-800));
    color: #fff;
}

/* ============================================================================
   4c. STATUS BAR — EXPANDABLE PANELS
   ============================================================================ */

/* ─── Panel Base ─── */
.zk-panel {
    position: fixed;
    top: 52px;
    right: var(--zk-space-4);
    width: 340px;
    max-height: calc(100vh - 120px);
    background: var(--zk-bg-primary);
    border: 1px solid var(--zk-border-secondary);
    border-radius: var(--zk-radius-xl);
    box-shadow: var(--zk-shadow-xl);
    z-index: 200;
    display: none;
    flex-direction: column;
    overflow: hidden;
    animation: zk-panel-in 0.15s ease-out;
}

.zk-panel.zk-panel-sm {
    width: 260px;
}

.zk-panel[aria-hidden="false"] {
    display: flex;
}

@keyframes zk-panel-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 640px) {
    .zk-panel {
        right: var(--zk-space-2);
        left: var(--zk-space-2);
        width: auto;
    }
}

.zk-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--zk-space-3) var(--zk-space-4);
    border-bottom: 1px solid var(--zk-border-secondary);
}

.zk-panel-title {
    font-weight: 700;
    font-size: 0.8125rem;
}

.zk-panel-close {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: var(--zk-fg-tertiary);
    cursor: pointer;
    line-height: 1;
    padding: 2px 6px;
    border-radius: var(--zk-radius-md);
}

.zk-panel-close:hover {
    background: var(--zk-bg-secondary);
    color: var(--zk-fg-primary);
}

.zk-panel-body {
    flex: 1;
    overflow-y: auto;
    max-height: 340px;
}

.zk-panel-footer {
    padding: var(--zk-space-2) var(--zk-space-4);
    border-top: 1px solid var(--zk-border-secondary);
    text-align: center;
}

.zk-panel-action {
    background: none;
    border: none;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--zk-brand-600);
    cursor: pointer;
}

.zk-panel-action:hover {
    text-decoration: underline;
}

.zk-panel-divider {
    height: 1px;
    background: var(--zk-border-secondary);
}

/* ─── Notification Items ─── */
.zk-notif-item {
    display: flex;
    gap: var(--zk-space-3);
    padding: var(--zk-space-3) var(--zk-space-4);
    border-bottom: 1px solid var(--zk-border-secondary);
    transition: background 0.1s;
}

.zk-notif-item:last-child {
    border-bottom: none;
}

.zk-notif-item:hover {
    background: var(--zk-bg-secondary);
}

.zk-notif-unread {
    background: var(--zk-brand-50);
}

[data-theme="dark"] .zk-notif-unread {
    background: rgba(37, 99, 235, 0.06);
}

.zk-notif-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: var(--zk-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.zk-notif-text {
    font-size: 0.8125rem;
    line-height: 1.4;
}

.zk-notif-time {
    font-size: 0.6875rem;
    color: var(--zk-fg-quaternary);
    margin-top: 2px;
}

/* ─── Profile Panel ─── */
.zk-profile-header {
    display: flex;
    align-items: center;
    gap: var(--zk-space-3);
    padding: var(--zk-space-4);
}

.zk-profile-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--zk-brand-500), var(--zk-brand-700));
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.zk-profile-name {
    font-size: 0.875rem;
    font-weight: 600;
}

.zk-profile-email {
    font-size: 0.75rem;
    color: var(--zk-fg-tertiary);
}

.zk-profile-nav {
    padding: var(--zk-space-1) 0;
}

.zk-profile-link {
    display: flex;
    align-items: center;
    gap: var(--zk-space-2);
    padding: var(--zk-space-2) var(--zk-space-4);
    font-size: 0.8125rem;
    color: var(--zk-fg-secondary);
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    transition: background 0.1s, color 0.1s;
}

.zk-profile-link:hover {
    background: var(--zk-bg-secondary);
    color: var(--zk-fg-primary);
}

.zk-profile-logout {
    color: var(--zk-error-600);
}

.zk-profile-logout:hover {
    background: var(--zk-error-50);
}

/* ─── Command Palette (⌘K Spotlight) ─── */
.zk-cmd-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(4px);
    z-index: 300;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: 15vh;
}

.zk-cmd-overlay[aria-hidden="false"] {
    display: flex;
}

.zk-cmd-palette {
    width: 100%;
    max-width: 520px;
    background: var(--zk-bg-primary);
    border: 1px solid var(--zk-border-secondary);
    border-radius: var(--zk-radius-xl);
    box-shadow: var(--zk-shadow-xl);
    overflow: hidden;
    animation: zk-panel-in 0.12s ease-out;
}

.zk-cmd-search {
    display: flex;
    align-items: center;
    gap: var(--zk-space-2);
    padding: var(--zk-space-3) var(--zk-space-4);
    border-bottom: 1px solid var(--zk-border-secondary);
}

.zk-cmd-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 0.9375rem;
    color: var(--zk-fg-primary);
    outline: none;
    font-family: var(--zk-font-sans);
}

.zk-cmd-input::placeholder {
    color: var(--zk-fg-quaternary);
}

.zk-cmd-results {
    max-height: 340px;
    overflow-y: auto;
}

.zk-cmd-group {
    padding: var(--zk-space-2) 0;
}

.zk-cmd-group-label {
    padding: var(--zk-space-1) var(--zk-space-4);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--zk-fg-quaternary);
}

.zk-cmd-item {
    display: flex;
    align-items: center;
    gap: var(--zk-space-2);
    padding: var(--zk-space-2) var(--zk-space-4);
    font-size: 0.8125rem;
    color: var(--zk-fg-secondary);
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    transition: background 0.1s;
}

.zk-cmd-item:hover {
    background: var(--zk-brand-50);
    color: var(--zk-brand-700);
}

[data-theme="dark"] .zk-cmd-item:hover {
    background: rgba(37, 99, 235, 0.08);
    color: var(--zk-brand-400);
}

@media (max-width: 640px) {
    .zk-cmd-overlay {
        padding-top: var(--zk-space-4);
    }

    .zk-cmd-palette {
        margin: 0 var(--zk-space-2);
    }
}

/* ============================================================================
   5. DOCK (macOS-style, physics-informed)
   ============================================================================ */

.zk-dock-wrapper {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: var(--zk-z-dock);
    pointer-events: none;
    padding-bottom: calc(var(--zk-dock-safe-area) + 20px);
}

.zk-dock-container {
    margin-inline: auto;
    width: fit-content;
    max-width: calc(100vw - 2rem);
    padding-inline: 0;
    display: flex;
    align-items: center;
    position: relative;
}

@media (min-width: 640px) {
    .zk-dock-container {
        max-width: var(--zk-dock-max-width);
    }
}

/* ─── Dock Arrow Buttons (overlaid on dock ends) ─── */
.zk-dock-arrow {
    pointer-events: auto;
    display: none;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 36px;
    border: none;
    background: var(--zk-bg-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--zk-fg-quaternary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    padding: 0;
    z-index: 3;
}

.zk-dock-arrow-left {
    left: 0;
    border-radius: var(--zk-dock-radius) 0 0 var(--zk-dock-radius);
    border-right: 1px solid color-mix(in srgb, var(--zk-border-secondary) 60%, transparent);
}

.zk-dock-arrow-right {
    right: 0;
    border-radius: 0 var(--zk-dock-radius) var(--zk-dock-radius) 0;
    border-left: 1px solid color-mix(in srgb, var(--zk-border-secondary) 60%, transparent);
}

.zk-dock-arrow:hover {
    background: var(--zk-brand-50);
    color: var(--zk-brand-600);
}

[data-theme="dark"] .zk-dock-arrow:hover {
    background: rgba(37, 99, 235, 0.12);
    color: var(--zk-brand-400);
}

.zk-dock-arrow:active {
    background: var(--zk-brand-100);
    transform: scale(0.92);
}

/* Mobile: always show arrows, enable scroll */
@media (max-width: 639px) {
    .zk-dock-arrow {
        display: flex;
    }

    .zk-dock {
        justify-content: flex-start;
        padding-left: 40px;
        padding-right: 40px;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
    }

    .zk-dock-item {
        scroll-snap-align: center;
    }
}

/* Desktop: show arrows only on overflow */
.zk-dock-container.has-overflow .zk-dock-arrow {
    display: flex;
}

/* Push dock content inward when arrows are visible */
.zk-dock-container.has-overflow .zk-dock {
    padding-left: 40px;
    padding-right: 40px;
}

/* Hide left arrow at scroll start, right at scroll end */
.zk-dock-container.at-start .zk-dock-arrow-left {
    display: none;
}

.zk-dock-container.at-end .zk-dock-arrow-right {
    display: none;
}

.zk-dock {
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--zk-dock-icon-gap);
    background: var(--zk-bg-glass);
    backdrop-filter: blur(var(--zk-dock-blur));
    -webkit-backdrop-filter: blur(var(--zk-dock-blur));
    border: 1px solid var(--zk-border-secondary);
    border-radius: var(--zk-dock-radius);
    box-shadow: var(--zk-shadow-lg), var(--zk-glow-sm);
    padding: var(--zk-dock-padding-y) var(--zk-dock-padding-x);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.zk-dock::-webkit-scrollbar {
    display: none;
}

.zk-dock-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--zk-fg-secondary);
    transition: color var(--zk-duration-fast) ease;
    -webkit-tap-highlight-color: transparent;
    padding: var(--zk-space-1);
    flex-shrink: 0;
    /* CRITICAL: never shrink items — prevents invisible items */
}

.zk-dock-item:hover {
    color: var(--zk-fg-primary);
}

.zk-dock-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--zk-dock-icon-size);
    height: var(--zk-dock-icon-size);
    border-radius: var(--zk-radius-xl);
    background: rgba(15, 23, 42, 0.04);
    transition: transform var(--zk-duration-fast) var(--zk-spring-snappy),
        background var(--zk-duration-fast) ease;
    will-change: transform;
}

[data-theme="dark"] .zk-dock-icon {
    background: rgba(255, 255, 255, 0.06);
}

/* Desktop hover magnification */
@media (hover: hover) and (pointer: fine) {
    .zk-dock-item:hover .zk-dock-icon {
        transform: scale(var(--zk-dock-scale-hover));
        background: rgba(15, 23, 42, 0.08);
    }

    [data-theme="dark"] .zk-dock-item:hover .zk-dock-icon {
        background: rgba(255, 255, 255, 0.1);
    }
}

/* Active / current page */
.zk-dock-item[aria-current="page"] {
    color: var(--zk-fg-brand);
}

.zk-dock-item[aria-current="page"] .zk-dock-icon {
    background: var(--zk-brand-50);
}

[data-theme="dark"] .zk-dock-item[aria-current="page"] .zk-dock-icon {
    background: rgba(124, 58, 237, 0.15);
}

/* Tap press (mobile) */
.zk-dock-item:active .zk-dock-icon {
    transform: scale(var(--zk-dock-scale-active));
}

.zk-dock-icon svg {
    width: 1.375rem;
    height: 1.375rem;
    stroke-width: 1.75;
}

.zk-dock-label {
    margin-top: 2px;
    font-size: 11px;
    font-weight: var(--zk-weight-medium);
    line-height: 1;
}

/* Hide labels on mobile to save space */
@media (max-width: 639px) {
    .zk-dock-label {
        display: none;
    }
}

/* ============================================================================
   6. ANIMATIONS
   ============================================================================ */

@keyframes zk-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes zk-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes zk-fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes zk-slide-up {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes zk-slide-down {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes zk-slide-in-right {
    from {
        opacity: 0;
        transform: translateX(100%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes zk-scale-in {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Spring-based entrance (Kernel 8: slight overshoot then settle) */
@keyframes zk-spring-in {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }

    60% {
        opacity: 1;
        transform: scale(1.02);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Utility animation classes */
.zk-animate-fade-in {
    animation: zk-fade-in var(--zk-duration-normal) ease;
}

.zk-animate-slide-up {
    animation: zk-slide-up var(--zk-duration-normal) var(--zk-spring-gentle);
}

.zk-animate-spring-in {
    animation: zk-spring-in var(--zk-duration-slow) var(--zk-spring-bouncy);
}

.zk-animate-spin {
    animation: zk-spin 0.6s linear infinite;
}

/* ─── Checkbox ─── */
.zk-checkbox-wrapper {
    display: inline-flex;
    align-items: center;
    gap: var(--zk-space-2);
    cursor: pointer;
}

.zk-checkbox {
    width: 1.125rem;
    height: 1.125rem;
    border: 1.5px solid var(--zk-border-primary);
    border-radius: var(--zk-radius-sm);
    appearance: none;
    cursor: pointer;
    transition: var(--zk-transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.zk-checkbox:checked {
    background: var(--zk-brand-600);
    border-color: var(--zk-brand-600);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px;
}

.zk-checkbox:focus-visible {
    box-shadow: var(--zk-focus-ring);
}

/* ─── Dropdown ─── */
.zk-dropdown {
    position: relative;
    display: inline-block;
}

.zk-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 12rem;
    background: var(--zk-bg-primary);
    border: 1px solid var(--zk-border-primary);
    border-radius: var(--zk-radius-lg);
    box-shadow: var(--zk-shadow-lg);
    padding: var(--zk-space-1);
    z-index: var(--zk-z-dropdown);
    opacity: 0;
    visibility: hidden;
    transform: scale(0.95) translateY(-4px);
    transition: opacity var(--zk-duration-fast) ease,
        visibility var(--zk-duration-fast) ease,
        transform var(--zk-duration-fast) var(--zk-spring-snappy);
}

.zk-dropdown.zk-active .zk-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: scale(1) translateY(0);
}

.zk-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--zk-space-2);
    padding: var(--zk-space-2) var(--zk-space-3);
    font-size: var(--zk-text-sm);
    color: var(--zk-fg-secondary);
    border-radius: var(--zk-radius-md);
    cursor: pointer;
    transition: var(--zk-transition-fast);
}

.zk-dropdown-item:hover {
    background: var(--zk-bg-secondary);
    color: var(--zk-fg-primary);
}

.zk-dropdown-divider {
    height: 1px;
    background: var(--zk-border-secondary);
    margin: var(--zk-space-1) 0;
}

/* ─── Progress Bar ─── */
.zk-progress {
    width: 100%;
    height: 0.5rem;
    background: var(--zk-gray-100);
    border-radius: var(--zk-radius-full);
    overflow: hidden;
}

.zk-progress-bar {
    height: 100%;
    background: var(--zk-brand-600);
    border-radius: var(--zk-radius-full);
    transition: width var(--zk-duration-slow) var(--zk-spring-gentle);
}

.zk-progress-success .zk-progress-bar {
    background: var(--zk-success-500);
}

.zk-progress-warning .zk-progress-bar {
    background: var(--zk-warning-500);
}

.zk-progress-error .zk-progress-bar {
    background: var(--zk-error-500);
}

/* ─── Code Block ─── */
.zk-code {
    display: inline;
    padding: 2px 6px;
    font-family: var(--zk-font-mono);
    font-size: 0.875em;
    background: var(--zk-bg-tertiary);
    border-radius: var(--zk-radius-sm);
    color: var(--zk-error-600);
}

.zk-pre {
    display: block;
    padding: var(--zk-space-4);
    font-family: var(--zk-font-mono);
    font-size: var(--zk-text-sm);
    line-height: var(--zk-leading-relaxed);
    background: var(--zk-gray-900);
    color: var(--zk-gray-100);
    border-radius: var(--zk-radius-xl);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
}

.zk-pre-copy {
    position: absolute;
    top: var(--zk-space-2);
    right: var(--zk-space-2);
}

/* ============================================================================
   7. RESPONSIVE UTILITIES (Tailwind-grade 5-tier system)
   Breakpoints: sm:640px  md:768px  lg:1024px  xl:1280px  2xl:1536px
   ============================================================================ */

/* ─── Responsive Breakpoint Tokens ─── */
:root {
    --zk-bp-sm: 640px;
    --zk-bp-md: 768px;
    --zk-bp-lg: 1024px;
    --zk-bp-xl: 1280px;
    --zk-bp-2xl: 1536px;

    /* ─── Dock Physics Tokens ─── */
    --zk-dock-icon-gap: 2px;
    --zk-dock-blur: 16px;
    --zk-dock-radius: 1.25rem;
    --zk-dock-padding-y: 0.5rem;
    --zk-dock-padding-x: 0.75rem;
    --zk-dock-icon-size: 2.75rem;
    --zk-dock-scale-hover: 1.15;
    --zk-dock-max-width: 48rem;
    --zk-dock-safe-area: 8px;
    --zk-dock-height: 5rem;
}

/* ─── Visibility ─── */
@media (max-width: 639px) {
    .zk-hide-mobile {
        display: none !important;
    }
}

@media (min-width: 640px) and (max-width: 767px) {
    .zk-hide-sm {
        display: none !important;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    .zk-hide-tablet {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .zk-hide-md {
        display: none !important;
    }
}

@media (min-width: 1024px) {
    .zk-hide-desktop {
        display: none !important;
    }
}

@media (max-width: 1023px) {
    .zk-show-desktop-only {
        display: none !important;
    }
}

@media (min-width: 640px) {
    .zk-show-mobile-only {
        display: none !important;
    }
}

/* ─── Responsive Grid System ─── */
/* Base: mobile-first single column */
.zk-grid {
    display: grid;
    gap: var(--zk-space-4);
}

.zk-grid-1 {
    grid-template-columns: 1fr;
}

.zk-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.zk-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--zk-space-4);
}

.zk-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--zk-space-4);
}

.zk-grid-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--zk-space-4);
}

.zk-grid-6 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--zk-space-4);
}

/* Mobile: collapse grids */
@media (max-width: 639px) {

    .zk-grid-2,
    .zk-grid-3,
    .zk-grid-4,
    .zk-grid-5,
    .zk-grid-6 {
        grid-template-columns: 1fr;
    }

    .zk-grid-2.zk-grid-keep-2-mobile {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* sm: 640px+ — 2 columns for larger grids */
@media (min-width: 640px) and (max-width: 767px) {

    .zk-grid-3,
    .zk-grid-4,
    .zk-grid-5,
    .zk-grid-6 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* md: 768px+ — tablet layout */
@media (min-width: 768px) and (max-width: 1023px) {

    .zk-grid-4,
    .zk-grid-5,
    .zk-grid-6 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* lg: 1024px+ — full grid */
@media (min-width: 1024px) {
    .zk-grid-5 {
        grid-template-columns: repeat(5, 1fr);
    }

    .zk-grid-6 {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* ─── Bento Grid (2D placement system) ─── */
.zk-bento {
    display: grid;
    gap: var(--zk-space-4);
    grid-template-columns: repeat(12, 1fr);
}

.zk-col-span-1 {
    grid-column: span 1;
}

.zk-col-span-2 {
    grid-column: span 2;
}

.zk-col-span-3 {
    grid-column: span 3;
}

.zk-col-span-4 {
    grid-column: span 4;
}

.zk-col-span-5 {
    grid-column: span 5;
}

.zk-col-span-6 {
    grid-column: span 6;
}

.zk-col-span-7 {
    grid-column: span 7;
}

.zk-col-span-8 {
    grid-column: span 8;
}

.zk-col-span-9 {
    grid-column: span 9;
}

.zk-col-span-10 {
    grid-column: span 10;
}

.zk-col-span-11 {
    grid-column: span 11;
}

.zk-col-span-12 {
    grid-column: span 12;
}

.zk-row-span-2 {
    grid-row: span 2;
}

.zk-row-span-3 {
    grid-row: span 3;
}

/* Bento responsive: full-width on mobile */
@media (max-width: 639px) {
    .zk-bento {
        grid-template-columns: 1fr;
    }

    [class*="zk-col-span-"] {
        grid-column: span 1;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    .zk-bento {
        grid-template-columns: repeat(6, 1fr);
    }

    .zk-col-span-7,
    .zk-col-span-8,
    .zk-col-span-9,
    .zk-col-span-10,
    .zk-col-span-11,
    .zk-col-span-12 {
        grid-column: span 6;
    }
}

/* ─── Responsive Gap ─── */
.zk-gap-1 {
    gap: var(--zk-space-1);
}

.zk-gap-2 {
    gap: var(--zk-space-2);
}

.zk-gap-3 {
    gap: var(--zk-space-3);
}

.zk-gap-4 {
    gap: var(--zk-space-4);
}

.zk-gap-5 {
    gap: var(--zk-space-5);
}

.zk-gap-6 {
    gap: var(--zk-space-6);
}

.zk-gap-8 {
    gap: var(--zk-space-8);
}

/* ─── Responsive Stacking ─── */
@media (max-width: 639px) {
    .zk-stack-mobile {
        flex-direction: column;
    }

    .zk-stack-mobile>* {
        width: 100%;
    }

    .zk-btn-full-mobile {
        width: 100%;
    }

    /* Container padding on mobile */
    .zk-container {
        padding-inline: var(--zk-space-4) !important;
    }
}

@media (max-width: 1023px) {
    .zk-stack-tablet {
        flex-direction: column;
    }

    .zk-stack-tablet>* {
        width: 100%;
    }
}

/* ─── Responsive Container ─── */
.zk-container {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--zk-space-6);
}

@media (min-width: 640px) {
    .zk-container {
        max-width: 640px;
    }
}

@media (min-width: 768px) {
    .zk-container {
        max-width: 768px;
    }
}

@media (min-width: 1024px) {
    .zk-container {
        max-width: 1024px;
    }
}

@media (min-width: 1280px) {
    .zk-container {
        max-width: 1280px;
    }
}

@media (min-width: 1536px) {
    .zk-container {
        max-width: 1536px;
    }
}

.zk-container-fluid {
    max-width: none !important;
}

/* ─── Safe Area ─── */
.zk-safe-bottom {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.zk-safe-top {
    padding-top: env(safe-area-inset-top, 0px);
}

.zk-safe-left {
    padding-left: env(safe-area-inset-left, 0px);
}

.zk-safe-right {
    padding-right: env(safe-area-inset-right, 0px);
}

/* ─── Responsive Content Clearance (dock + status bar) ─── */
.zk-content-area {
    padding-top: 56px;
    padding-bottom: 96px;
    min-height: 100vh;
}

/* ============================================================================
   8. UTILITY CLASSES (Tailwind-grade, extracted from Tailwind/React-main/Start UI)
   ============================================================================ */

/* ─── Flex ─── */
.zk-flex {
    display: flex;
}

.zk-inline-flex {
    display: inline-flex;
}

.zk-flex-row {
    flex-direction: row;
}

.zk-flex-col {
    flex-direction: column;
}

.zk-flex-row-reverse {
    flex-direction: row-reverse;
}

.zk-flex-col-reverse {
    flex-direction: column-reverse;
}

.zk-flex-wrap {
    flex-wrap: wrap;
}

.zk-flex-nowrap {
    flex-wrap: nowrap;
}

.zk-flex-1 {
    flex: 1 1 0%;
}

.zk-flex-auto {
    flex: 1 1 auto;
}

.zk-flex-initial {
    flex: 0 1 auto;
}

.zk-flex-none {
    flex: none;
}

.zk-grow {
    flex-grow: 1;
}

.zk-grow-0 {
    flex-grow: 0;
}

.zk-shrink {
    flex-shrink: 1;
}

.zk-shrink-0 {
    flex-shrink: 0;
}

.zk-basis-0 {
    flex-basis: 0;
}

.zk-basis-auto {
    flex-basis: auto;
}

.zk-basis-full {
    flex-basis: 100%;
}

.zk-basis-1\/2 {
    flex-basis: 50%;
}

.zk-basis-1\/3 {
    flex-basis: 33.333%;
}

.zk-basis-2\/3 {
    flex-basis: 66.667%;
}

.zk-basis-1\/4 {
    flex-basis: 25%;
}

.zk-basis-3\/4 {
    flex-basis: 75%;
}

/* ─── Alignment ─── */
.zk-items-start {
    align-items: flex-start;
}

.zk-items-center {
    align-items: center;
}

.zk-items-end {
    align-items: flex-end;
}

.zk-items-baseline {
    align-items: baseline;
}

.zk-items-stretch {
    align-items: stretch;
}

.zk-justify-start {
    justify-content: flex-start;
}

.zk-justify-center {
    justify-content: center;
}

.zk-justify-end {
    justify-content: flex-end;
}

.zk-justify-between {
    justify-content: space-between;
}

.zk-justify-around {
    justify-content: space-around;
}

.zk-justify-evenly {
    justify-content: space-evenly;
}

.zk-self-start {
    align-self: flex-start;
}

.zk-self-center {
    align-self: center;
}

.zk-self-end {
    align-self: flex-end;
}

.zk-self-stretch {
    align-self: stretch;
}

/* ─── Sizing ─── */
.zk-w-full {
    width: 100%;
}

.zk-w-auto {
    width: auto;
}

.zk-w-screen {
    width: 100vw;
}

.zk-w-min {
    width: min-content;
}

.zk-w-max {
    width: max-content;
}

.zk-w-fit {
    width: fit-content;
}

.zk-h-full {
    height: 100%;
}

.zk-h-auto {
    height: auto;
}

.zk-h-screen {
    height: 100vh;
}

.zk-h-dvh {
    height: 100dvh;
}

.zk-min-h-0 {
    min-height: 0;
}

.zk-min-h-full {
    min-height: 100%;
}

.zk-min-h-screen {
    min-height: 100vh;
}

.zk-min-h-dvh {
    min-height: 100dvh;
}

.zk-max-w-none {
    max-width: none;
}

.zk-max-w-xs {
    max-width: 20rem;
}

.zk-max-w-sm {
    max-width: 24rem;
}

.zk-max-w-md {
    max-width: 28rem;
}

.zk-max-w-lg {
    max-width: 32rem;
}

.zk-max-w-xl {
    max-width: 36rem;
}

.zk-max-w-2xl {
    max-width: 42rem;
}

.zk-max-w-3xl {
    max-width: 48rem;
}

.zk-max-w-4xl {
    max-width: 56rem;
}

.zk-max-w-5xl {
    max-width: 64rem;
}

.zk-max-w-6xl {
    max-width: 72rem;
}

.zk-max-w-7xl {
    max-width: 80rem;
}

.zk-max-w-full {
    max-width: 100%;
}

.zk-max-w-prose {
    max-width: 65ch;
}

.zk-max-h-full {
    max-height: 100%;
}

.zk-max-h-screen {
    max-height: 100vh;
}

.zk-size-4 {
    width: 1rem;
    height: 1rem;
}

.zk-size-5 {
    width: 1.25rem;
    height: 1.25rem;
}

.zk-size-6 {
    width: 1.5rem;
    height: 1.5rem;
}

.zk-size-8 {
    width: 2rem;
    height: 2rem;
}

.zk-size-10 {
    width: 2.5rem;
    height: 2.5rem;
}

.zk-size-12 {
    width: 3rem;
    height: 3rem;
}

.zk-size-16 {
    width: 4rem;
    height: 4rem;
}

/* ─── Opacity ─── */
.zk-opacity-0 {
    opacity: 0;
}

.zk-opacity-5 {
    opacity: 0.05;
}

.zk-opacity-10 {
    opacity: 0.1;
}

.zk-opacity-20 {
    opacity: 0.2;
}

.zk-opacity-25 {
    opacity: 0.25;
}

.zk-opacity-30 {
    opacity: 0.3;
}

.zk-opacity-40 {
    opacity: 0.4;
}

.zk-opacity-50 {
    opacity: 0.5;
}

.zk-opacity-60 {
    opacity: 0.6;
}

.zk-opacity-70 {
    opacity: 0.7;
}

.zk-opacity-75 {
    opacity: 0.75;
}

.zk-opacity-80 {
    opacity: 0.8;
}

.zk-opacity-90 {
    opacity: 0.9;
}

.zk-opacity-100 {
    opacity: 1;
}

/* ─── Transitions (from Tailwind) ─── */
.zk-transition-none {
    transition-property: none;
}

.zk-transition-all {
    transition-property: all;
    transition-duration: 150ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.zk-transition {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-duration: 150ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.zk-transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-duration: 150ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.zk-transition-opacity {
    transition-property: opacity;
    transition-duration: 150ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.zk-transition-shadow {
    transition-property: box-shadow;
    transition-duration: 150ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.zk-transition-transform {
    transition-property: transform;
    transition-duration: 150ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.zk-duration-75 {
    transition-duration: 75ms;
}

.zk-duration-100 {
    transition-duration: 100ms;
}

.zk-duration-150 {
    transition-duration: 150ms;
}

.zk-duration-200 {
    transition-duration: 200ms;
}

.zk-duration-300 {
    transition-duration: 300ms;
}

.zk-duration-500 {
    transition-duration: 500ms;
}

.zk-duration-700 {
    transition-duration: 700ms;
}

.zk-duration-1000 {
    transition-duration: 1000ms;
}

.zk-ease-linear {
    transition-timing-function: linear;
}

.zk-ease-in {
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.zk-ease-out {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.zk-ease-in-out {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.zk-delay-75 {
    transition-delay: 75ms;
}

.zk-delay-100 {
    transition-delay: 100ms;
}

.zk-delay-150 {
    transition-delay: 150ms;
}

.zk-delay-200 {
    transition-delay: 200ms;
}

.zk-delay-300 {
    transition-delay: 300ms;
}

.zk-delay-500 {
    transition-delay: 500ms;
}

/* ─── Animations (from Tailwind + React-main) ─── */
@keyframes zk-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes zk-ping {

    75%,
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

@keyframes zk-pulse {
    50% {
        opacity: 0.5;
    }
}

@keyframes zk-bounce {

    0%,
    100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }

    50% {
        transform: none;
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

@keyframes zk-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes zk-fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes zk-slide-in-up {
    from {
        transform: translateY(1rem);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes zk-slide-in-down {
    from {
        transform: translateY(-1rem);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes zk-slide-in-left {
    from {
        transform: translateX(-1rem);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes zk-slide-in-right {
    from {
        transform: translateX(1rem);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes zk-scale-in {
    from {
        transform: scale(0.95);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes zk-shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-4px);
    }

    75% {
        transform: translateX(4px);
    }
}

@keyframes zk-marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

.zk-animate-spin {
    animation: zk-spin 1s linear infinite;
}

.zk-animate-ping {
    animation: zk-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.zk-animate-pulse {
    animation: zk-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.zk-animate-bounce {
    animation: zk-bounce 1s infinite;
}

.zk-animate-fade-in {
    animation: zk-fade-in 0.3s ease-out;
}

.zk-animate-fade-out {
    animation: zk-fade-out 0.3s ease-out forwards;
}

.zk-animate-slide-up {
    animation: zk-slide-in-up 0.3s ease-out;
}

.zk-animate-slide-down {
    animation: zk-slide-in-down 0.3s ease-out;
}

.zk-animate-slide-left {
    animation: zk-slide-in-left 0.3s ease-out;
}

.zk-animate-slide-right {
    animation: zk-slide-in-right 0.3s ease-out;
}

.zk-animate-scale-in {
    animation: zk-scale-in 0.2s ease-out;
}

.zk-animate-shake {
    animation: zk-shake 0.5s ease-in-out;
}

.zk-animate-marquee {
    animation: zk-marquee 60s linear infinite;
}

/* ─── Transforms ─── */
.zk-rotate-0 {
    transform: rotate(0deg);
}

.zk-rotate-45 {
    transform: rotate(45deg);
}

.zk-rotate-90 {
    transform: rotate(90deg);
}

.zk-rotate-180 {
    transform: rotate(180deg);
}

.zk-rotate-270 {
    transform: rotate(270deg);
}

.-zk-rotate-45 {
    transform: rotate(-45deg);
}

.-zk-rotate-90 {
    transform: rotate(-90deg);
}

.-zk-rotate-180 {
    transform: rotate(-180deg);
}

.zk-scale-0 {
    transform: scale(0);
}

.zk-scale-50 {
    transform: scale(0.5);
}

.zk-scale-75 {
    transform: scale(0.75);
}

.zk-scale-90 {
    transform: scale(0.9);
}

.zk-scale-95 {
    transform: scale(0.95);
}

.zk-scale-100 {
    transform: scale(1);
}

.zk-scale-105 {
    transform: scale(1.05);
}

.zk-scale-110 {
    transform: scale(1.1);
}

.zk-scale-125 {
    transform: scale(1.25);
}

.zk-scale-150 {
    transform: scale(1.5);
}

.zk-origin-center {
    transform-origin: center;
}

.zk-origin-top {
    transform-origin: top;
}

.zk-origin-bottom {
    transform-origin: bottom;
}

.zk-origin-left {
    transform-origin: left;
}

.zk-origin-right {
    transform-origin: right;
}

/* ─── Aspect Ratio ─── */
.zk-aspect-auto {
    aspect-ratio: auto;
}

.zk-aspect-square {
    aspect-ratio: 1 / 1;
}

.zk-aspect-video {
    aspect-ratio: 16 / 9;
}

.zk-aspect-3\/2 {
    aspect-ratio: 3 / 2;
}

.zk-aspect-4\/3 {
    aspect-ratio: 4 / 3;
}

.zk-aspect-21\/9 {
    aspect-ratio: 21 / 9;
}

/* ─── Overflow & Scroll ─── */
.zk-overflow-auto {
    overflow: auto;
}

.zk-overflow-hidden {
    overflow: hidden;
}

.zk-overflow-visible {
    overflow: visible;
}

.zk-overflow-scroll {
    overflow: scroll;
}

.zk-overflow-x-auto {
    overflow-x: auto;
}

.zk-overflow-y-auto {
    overflow-y: auto;
}

.zk-overflow-x-hidden {
    overflow-x: hidden;
}

.zk-overflow-y-hidden {
    overflow-y: hidden;
}

.zk-overscroll-none {
    overscroll-behavior: none;
}

.zk-overscroll-contain {
    overscroll-behavior: contain;
}

.zk-scroll-smooth {
    scroll-behavior: smooth;
}

/* ─── Scrollbar Hide (from React-main globals.css) ─── */
.zk-scrollbar-hide::-webkit-scrollbar {
    display: none;
    -webkit-appearance: none;
    appearance: none;
}

.zk-scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ─── Position ─── */
.zk-relative {
    position: relative;
}

.zk-absolute {
    position: absolute;
}

.zk-fixed {
    position: fixed;
}

.zk-sticky {
    position: sticky;
}

.zk-static {
    position: static;
}

.zk-inset-0 {
    inset: 0;
}

.zk-inset-x-0 {
    left: 0;
    right: 0;
}

.zk-inset-y-0 {
    top: 0;
    bottom: 0;
}

.zk-top-0 {
    top: 0;
}

.zk-right-0 {
    right: 0;
}

.zk-bottom-0 {
    bottom: 0;
}

.zk-left-0 {
    left: 0;
}

/* ─── Z-Index ─── */
.zk-z-0 {
    z-index: 0;
}

.zk-z-10 {
    z-index: 10;
}

.zk-z-20 {
    z-index: 20;
}

.zk-z-30 {
    z-index: 30;
}

.zk-z-40 {
    z-index: 40;
}

.zk-z-50 {
    z-index: 50;
}

.zk-z-auto {
    z-index: auto;
}

/* ─── Cursor & Pointer ─── */
.zk-cursor-pointer {
    cursor: pointer;
}

.zk-cursor-default {
    cursor: default;
}

.zk-cursor-wait {
    cursor: wait;
}

.zk-cursor-text {
    cursor: text;
}

.zk-cursor-move {
    cursor: move;
}

.zk-cursor-not-allowed {
    cursor: not-allowed;
}

.zk-cursor-grab {
    cursor: grab;
}

.zk-cursor-grabbing {
    cursor: grabbing;
}

.zk-pointer-events-none {
    pointer-events: none;
}

.zk-pointer-events-auto {
    pointer-events: auto;
}

.zk-select-none {
    user-select: none;
}

.zk-select-text {
    user-select: text;
}

.zk-select-all {
    user-select: all;
}

/* ─── Text Utilities ─── */
.zk-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Text alignment */
.zk-text-center {
    text-align: center;
}

.zk-text-left {
    text-align: left;
}

.zk-text-right {
    text-align: right;
}

.zk-text-justify {
    text-align: justify;
}

/* Line height */
.zk-leading-none {
    line-height: 1;
}

.zk-leading-tight {
    line-height: 1.25;
}

.zk-leading-normal {
    line-height: 1.5;
}

.zk-leading-relaxed {
    line-height: 1.625;
}

.zk-leading-loose {
    line-height: 2;
}

/* Extra min/max */
.zk-min-w-0 {
    min-width: 0;
}

.zk-max-w-full {
    max-width: 100%;
}

.zk-max-w-prose {
    max-width: 65ch;
}

.zk-max-w-lg {
    max-width: 32rem;
}

.zk-max-w-xl {
    max-width: 36rem;
}

.zk-max-w-2xl {
    max-width: 42rem;
}

/* Lists */
.zk-list-none {
    list-style: none;
}

.zk-list-disc {
    list-style-type: disc;
}

.zk-list-decimal {
    list-style-type: decimal;
}

.zk-line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.zk-line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.zk-line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.zk-line-clamp-4 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.zk-text-balance {
    text-wrap: balance;
}

.zk-text-pretty {
    text-wrap: pretty;
}

.zk-break-words {
    overflow-wrap: break-word;
}

.zk-break-all {
    word-break: break-all;
}

.zk-hyphens-auto {
    hyphens: auto;
}

.zk-whitespace-nowrap {
    white-space: nowrap;
}

.zk-whitespace-pre {
    white-space: pre;
}

.zk-whitespace-pre-wrap {
    white-space: pre-wrap;
}

/* ─── Display ─── */
.zk-block {
    display: block;
}

.zk-inline-block {
    display: inline-block;
}

.zk-inline {
    display: inline;
}

.zk-hidden {
    display: none;
}

.zk-contents {
    display: contents;
}

/* ─── Border Radius (full scale from Tailwind) ─── */
.zk-rounded-none {
    border-radius: 0;
}

.zk-rounded-xs {
    border-radius: 0.125rem;
}

.zk-rounded-sm {
    border-radius: var(--zk-radius-sm);
}

.zk-rounded {
    border-radius: var(--zk-radius-md);
}

.zk-rounded-md {
    border-radius: var(--zk-radius-md);
}

.zk-rounded-lg {
    border-radius: var(--zk-radius-lg);
}

.zk-rounded-xl {
    border-radius: var(--zk-radius-xl);
}

.zk-rounded-2xl {
    border-radius: var(--zk-radius-2xl);
}

.zk-rounded-3xl {
    border-radius: 1.5rem;
}

.zk-rounded-full {
    border-radius: 9999px;
}

/* ─── Box Shadow (from React-main theme.css) ─── */
.zk-shadow-xs {
    box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
}

.zk-shadow-sm {
    box-shadow: 0 1px 3px rgba(10, 13, 18, 0.1), 0 1px 2px -1px rgba(10, 13, 18, 0.1);
}

.zk-shadow-md {
    box-shadow: 0 4px 6px -1px rgba(10, 13, 18, 0.1), 0 2px 4px -2px rgba(10, 13, 18, 0.06);
}

.zk-shadow-lg {
    box-shadow: 0 12px 16px -4px rgba(10, 13, 18, 0.08), 0 4px 6px -2px rgba(10, 13, 18, 0.03);
}

.zk-shadow-xl {
    box-shadow: 0 20px 24px -4px rgba(10, 13, 18, 0.08), 0 8px 8px -4px rgba(10, 13, 18, 0.03);
}

.zk-shadow-2xl {
    box-shadow: 0 24px 48px -12px rgba(10, 13, 18, 0.18);
}

.zk-shadow-none {
    box-shadow: none;
}

/* ─── Ring Focus (enterprise accessibility) ─── */
.zk-ring {
    box-shadow: 0 0 0 3px var(--zk-brand-200);
}

.zk-ring-offset {
    box-shadow: 0 0 0 2px var(--zk-bg-primary), 0 0 0 4px var(--zk-brand-200);
}

.zk-focus-ring:focus-visible {
    outline: 2px solid var(--zk-brand-500);
    outline-offset: 2px;
}

/* ─── Spacing Utilities ─── */
.zk-m-0 {
    margin: 0;
}

.zk-m-auto {
    margin: auto;
}

.zk-mx-auto {
    margin-inline: auto;
}

.zk-my-auto {
    margin-block: auto;
}

.zk-p-0 {
    padding: 0;
}

.zk-p-1 {
    padding: var(--zk-space-1);
}

.zk-p-2 {
    padding: var(--zk-space-2);
}

.zk-p-3 {
    padding: var(--zk-space-3);
}

.zk-p-4 {
    padding: var(--zk-space-4);
}

.zk-p-5 {
    padding: var(--zk-space-5);
}

.zk-p-6 {
    padding: var(--zk-space-6);
}

.zk-p-8 {
    padding: var(--zk-space-8);
}

.zk-px-1 {
    padding-inline: var(--zk-space-1);
}

.zk-px-2 {
    padding-inline: var(--zk-space-2);
}

.zk-px-3 {
    padding-inline: var(--zk-space-3);
}

.zk-px-4 {
    padding-inline: var(--zk-space-4);
}

.zk-px-6 {
    padding-inline: var(--zk-space-6);
}

.zk-px-8 {
    padding-inline: var(--zk-space-8);
}

.zk-py-1 {
    padding-block: var(--zk-space-1);
}

.zk-py-2 {
    padding-block: var(--zk-space-2);
}

.zk-py-3 {
    padding-block: var(--zk-space-3);
}

.zk-py-4 {
    padding-block: var(--zk-space-4);
}

.zk-py-6 {
    padding-block: var(--zk-space-6);
}

.zk-py-8 {
    padding-block: var(--zk-space-8);
}

/* ─── Directional Padding ─── */
.zk-pt-0 {
    padding-top: 0;
}

.zk-pt-2 {
    padding-top: var(--zk-space-2);
}

.zk-pt-3 {
    padding-top: var(--zk-space-3);
}

.zk-pt-4 {
    padding-top: var(--zk-space-4);
}

.zk-pt-5 {
    padding-top: var(--zk-space-5);
}

.zk-pt-6 {
    padding-top: var(--zk-space-6);
}

.zk-pt-8 {
    padding-top: var(--zk-space-8);
}

.zk-pb-0 {
    padding-bottom: 0;
}

.zk-pb-2 {
    padding-bottom: var(--zk-space-2);
}

.zk-pb-3 {
    padding-bottom: var(--zk-space-3);
}

.zk-pb-4 {
    padding-bottom: var(--zk-space-4);
}

.zk-pb-5 {
    padding-bottom: var(--zk-space-5);
}

.zk-pb-6 {
    padding-bottom: var(--zk-space-6);
}

.zk-pb-8 {
    padding-bottom: var(--zk-space-8);
}

.zk-pl-0 {
    padding-left: 0;
}

.zk-pl-2 {
    padding-left: var(--zk-space-2);
}

.zk-pl-3 {
    padding-left: var(--zk-space-3);
}

.zk-pl-4 {
    padding-left: var(--zk-space-4);
}

.zk-pl-5 {
    padding-left: var(--zk-space-5);
}

.zk-pl-6 {
    padding-left: var(--zk-space-6);
}

.zk-pr-0 {
    padding-right: 0;
}

.zk-pr-2 {
    padding-right: var(--zk-space-2);
}

.zk-pr-3 {
    padding-right: var(--zk-space-3);
}

.zk-pr-4 {
    padding-right: var(--zk-space-4);
}

.zk-pr-5 {
    padding-right: var(--zk-space-5);
}

.zk-pr-6 {
    padding-right: var(--zk-space-6);
}

/* ─── Border Utilities ─── */
.zk-border {
    border: 1px solid var(--zk-border-secondary);
}

.zk-border-t {
    border-top: 1px solid var(--zk-border-secondary);
}

.zk-border-r {
    border-right: 1px solid var(--zk-border-secondary);
}

.zk-border-b {
    border-bottom: 1px solid var(--zk-border-secondary);
}

.zk-border-l {
    border-left: 1px solid var(--zk-border-secondary);
}

.zk-border-0 {
    border: 0;
}

.zk-border-none {
    border: none;
}

.zk-mb-0 {
    margin-bottom: 0;
}

.zk-mb-1 {
    margin-bottom: var(--zk-space-1);
}

.zk-mb-2 {
    margin-bottom: var(--zk-space-2);
}

.zk-mb-3 {
    margin-bottom: var(--zk-space-3);
}

.zk-mb-4 {
    margin-bottom: var(--zk-space-4);
}

.zk-mb-6 {
    margin-bottom: var(--zk-space-6);
}

.zk-mb-8 {
    margin-bottom: var(--zk-space-8);
}

.zk-mt-0 {
    margin-top: 0;
}

.zk-mt-1 {
    margin-top: var(--zk-space-1);
}

.zk-mt-2 {
    margin-top: var(--zk-space-2);
}

.zk-mt-3 {
    margin-top: var(--zk-space-3);
}

.zk-mt-4 {
    margin-top: var(--zk-space-4);
}

.zk-mt-6 {
    margin-top: var(--zk-space-6);
}

.zk-mt-8 {
    margin-top: var(--zk-space-8);
}

/* ─── Will Change (performance hints) ─── */
.zk-will-change-auto {
    will-change: auto;
}

.zk-will-change-scroll {
    will-change: scroll-position;
}

.zk-will-change-contents {
    will-change: contents;
}

.zk-will-change-transform {
    will-change: transform;
}

.zk-will-change-opacity {
    will-change: opacity;
}

/* ─── Isolation & Containment ─── */
.zk-isolate {
    isolation: isolate;
}

.zk-contain-content {
    contain: content;
}

.zk-contain-paint {
    contain: paint;
}

.zk-contain-layout {
    contain: layout;
}

.zk-contain-strict {
    contain: strict;
}

/* ============================================================================
   v0.8 — ENTERPRISE COMPONENTS (extracted from React-main + Start UI)
   ============================================================================ */

/* ─── Loading Spinners ─── */
/* Source: react-main/components/application/loading-indicator */
/* 3 types: simple (track+arc), ring (dasharray), dots (gradient) */
/* 4 sizes: sm(2rem), md(3rem), lg(3.5rem), xl(4rem) */
.zk-spinner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.zk-spinner svg {
    animation: zk-spin 1s linear infinite;
}

.zk-spinner-sm svg {
    width: 2rem;
    height: 2rem;
}

.zk-spinner-md svg {
    width: 3rem;
    height: 3rem;
}

.zk-spinner-lg svg {
    width: 3.5rem;
    height: 3.5rem;
}

.zk-spinner-xl svg {
    width: 4rem;
    height: 4rem;
}

.zk-spinner-track {
    stroke: var(--zk-bg-tertiary);
}

.zk-spinner-arc {
    stroke: var(--zk-brand-600);
    fill: none;
    stroke-linecap: round;
}

[data-theme="dark"] .zk-spinner-arc {
    stroke: var(--zk-brand-400);
}

/* Spinner with label */
.zk-spinner-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--zk-space-4);
}

.zk-spinner-label {
    font-size: var(--zk-text-sm);
    font-weight: 500;
    color: var(--zk-fg-secondary);
}

/* ─── Progress Bar ─── */
/* Source: react-main/components/base/progress-indicators */
/* KEY: Uses transform:translateX instead of width for GPU-accelerated, zero-layout-thrash animation */
.zk-progress {
    height: 0.5rem;
    width: 100%;
    overflow: hidden;
    border-radius: var(--zk-radius-md);
    background: var(--zk-bg-tertiary);
}

.zk-progress-sm {
    height: 0.25rem;
}

.zk-progress-lg {
    height: 0.75rem;
}

.zk-progress-bar {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: var(--zk-brand-600);
    transition: transform 150ms ease-out;
    /* Use: style="transform: translateX(-60%)" for 40% progress */
}

.zk-progress-bar-success {
    background: var(--zk-success-600);
}

.zk-progress-bar-warning {
    background: var(--zk-warning-600);
}

.zk-progress-bar-error {
    background: var(--zk-error-600);
}

[data-theme="dark"] .zk-progress-bar {
    background: var(--zk-brand-400);
}

[data-theme="dark"] .zk-progress-bar-success {
    background: var(--zk-success-400);
}

[data-theme="dark"] .zk-progress-bar-warning {
    background: var(--zk-warning-400);
}

[data-theme="dark"] .zk-progress-bar-error {
    background: var(--zk-error-400);
}

/* Progress with label */
.zk-progress-group {
    display: flex;
    flex-direction: column;
    gap: var(--zk-space-2);
}

.zk-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.zk-progress-label {
    font-size: var(--zk-text-sm);
    font-weight: 500;
    color: var(--zk-fg-primary);
}

.zk-progress-value {
    font-size: var(--zk-text-sm);
    font-weight: 500;
    color: var(--zk-fg-secondary);
}

/* ─── Empty State ─── */
/* Source: react-main/components/application/empty-state */
.zk-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--zk-space-8) var(--zk-space-4);
    min-height: 16rem;
    gap: var(--zk-space-4);
}

.zk-empty-state-icon {
    width: 3rem;
    height: 3rem;
    color: var(--zk-fg-quaternary);
    margin-bottom: var(--zk-space-2);
}

.zk-empty-state-title {
    font-size: var(--zk-text-lg);
    font-weight: 600;
    color: var(--zk-fg-primary);
    line-height: 1.4;
}

.zk-empty-state-description {
    font-size: var(--zk-text-sm);
    color: var(--zk-fg-tertiary);
    max-width: 24rem;
    line-height: 1.6;
}

.zk-empty-state-actions {
    display: flex;
    gap: var(--zk-space-3);
    margin-top: var(--zk-space-2);
}

/* ─── Slideout Sheet / Drawer ─── */
/* Source: start-ui-web-main/src/components/ui/sheet.tsx + drawer.tsx */
/* 4-directional panel overlay with slide animation */
.zk-sheet-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 300ms ease, visibility 300ms;
}

.zk-sheet-overlay.zk-open {
    opacity: 1;
    visibility: visible;
}

.zk-sheet {
    position: fixed;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    background: var(--zk-bg-primary);
    box-shadow: var(--zk-shadow-xl);
    transition: transform 350ms cubic-bezier(0.32, 0.72, 0, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Right (default) */
.zk-sheet[data-side="right"],
.zk-sheet:not([data-side]) {
    top: 0;
    right: 0;
    bottom: 0;
    width: 75vw;
    max-width: 24rem;
    border-left: 1px solid var(--zk-border-secondary);
    transform: translateX(100%);
}

.zk-sheet[data-side="right"].zk-open,
.zk-sheet:not([data-side]).zk-open {
    transform: translateX(0);
}

/* Left */
.zk-sheet[data-side="left"] {
    top: 0;
    left: 0;
    bottom: 0;
    width: 75vw;
    max-width: 24rem;
    border-right: 1px solid var(--zk-border-secondary);
    transform: translateX(-100%);
}

.zk-sheet[data-side="left"].zk-open {
    transform: translateX(0);
}

/* Top */
.zk-sheet[data-side="top"] {
    top: 0;
    left: 0;
    right: 0;
    max-height: 50vh;
    border-bottom: 1px solid var(--zk-border-secondary);
    transform: translateY(-100%);
}

.zk-sheet[data-side="top"].zk-open {
    transform: translateY(0);
}

/* Bottom */
.zk-sheet[data-side="bottom"] {
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 50vh;
    border-top: 1px solid var(--zk-border-secondary);
    transform: translateY(100%);
}

.zk-sheet[data-side="bottom"].zk-open {
    transform: translateY(0);
}

/* Sheet inner structure */
.zk-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--zk-space-4) var(--zk-space-5);
    border-bottom: 1px solid var(--zk-border-secondary);
    flex-shrink: 0;
}

.zk-sheet-title {
    font-size: var(--zk-text-lg);
    font-weight: 600;
    color: var(--zk-fg-primary);
}

.zk-sheet-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--zk-radius-md);
    border: none;
    background: transparent;
    color: var(--zk-fg-quaternary);
    cursor: pointer;
    transition: background 150ms, color 150ms;
}

.zk-sheet-close:hover {
    background: var(--zk-bg-secondary);
    color: var(--zk-fg-primary);
}

.zk-sheet-body {
    flex: 1;
    padding: var(--zk-space-5);
    overflow-y: auto;
}

.zk-sheet-footer {
    display: flex;
    gap: var(--zk-space-3);
    justify-content: flex-end;
    padding: var(--zk-space-4) var(--zk-space-5);
    border-top: 1px solid var(--zk-border-secondary);
    flex-shrink: 0;
}

@media (min-width: 640px) {

    .zk-sheet[data-side="right"],
    .zk-sheet:not([data-side]) {
        max-width: 28rem;
    }

    .zk-sheet[data-side="left"] {
        max-width: 28rem;
    }
}

/* ─── Display Typography ─── */
/* Source: react-main/styles/theme.css lines 23-43 */
/* Uses spacing-based calc for mathematical consistency */
.zk-text-display-xs {
    font-size: 1.5rem;
    line-height: 2rem;
}

.zk-text-display-sm {
    font-size: 1.875rem;
    line-height: 2.375rem;
}

.zk-text-display-md {
    font-size: 2.25rem;
    line-height: 2.75rem;
    letter-spacing: -0.72px;
}

.zk-text-display-lg {
    font-size: 3rem;
    line-height: 3.75rem;
    letter-spacing: -0.96px;
}

.zk-text-display-xl {
    font-size: 3.75rem;
    line-height: 4.5rem;
    letter-spacing: -1.2px;
}

.zk-text-display-2xl {
    font-size: 4.5rem;
    line-height: 5.625rem;
    letter-spacing: -1.44px;
}

/* Responsive display typography — scale down on mobile */
@media (max-width: 639px) {
    .zk-text-display-lg {
        font-size: 2.25rem;
        line-height: 2.75rem;
        letter-spacing: -0.5px;
    }

    .zk-text-display-xl {
        font-size: 2.5rem;
        line-height: 3rem;
        letter-spacing: -0.72px;
    }

    .zk-text-display-2xl {
        font-size: 3rem;
        line-height: 3.75rem;
        letter-spacing: -0.96px;
    }
}

/* ─── Skeleton Loader ─── */
/* Source: start-ui-web-main/src/components/ui/skeleton.tsx */
@keyframes zk-skeleton-shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

.zk-skeleton {
    border-radius: var(--zk-radius-md);
    background: linear-gradient(90deg, var(--zk-bg-secondary) 25%, var(--zk-bg-tertiary) 50%, var(--zk-bg-secondary) 75%);
    background-size: 200% 100%;
    animation: zk-skeleton-shimmer 1.5s ease-in-out infinite;
}

.zk-skeleton-text {
    height: 1rem;
    width: 100%;
    margin-bottom: var(--zk-space-2);
}

.zk-skeleton-text:last-child {
    width: 66%;
}

.zk-skeleton-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
}

.zk-skeleton-card {
    height: 8rem;
    width: 100%;
}

/* ─── Separator / Divider ─── */
/* Source: start-ui-web-main/src/components/ui/separator.tsx */
.zk-separator {
    border: none;
    height: 1px;
    background: var(--zk-border-secondary);
    margin: var(--zk-space-4) 0;
}

.zk-separator-vertical {
    width: 1px;
    height: 100%;
    margin: 0 var(--zk-space-4);
}

.zk-separator-label {
    display: flex;
    align-items: center;
    gap: var(--zk-space-3);
    font-size: var(--zk-text-xs);
    color: var(--zk-fg-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.zk-separator-label::before,
.zk-separator-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--zk-border-secondary);
}

/* ============================================================================
   v0.8b — PROSE TYPOGRAPHY (from React-main typography.css)
   ============================================================================ */

.zk-prose {
    --prose-body: var(--zk-fg-tertiary);
    --prose-headings: var(--zk-fg-primary);
    --prose-links: var(--zk-brand-600);
    --prose-bold: var(--zk-fg-primary);
    --prose-bullets: var(--zk-fg-tertiary);
    --prose-quotes: var(--zk-fg-primary);
    --prose-quote-border: var(--zk-brand-500);
    --prose-code-bg: var(--zk-bg-secondary);
    --prose-code-border: var(--zk-border-secondary);
    --prose-hr: var(--zk-border-secondary);

    color: var(--prose-body);
    font-size: var(--zk-text-base);
    line-height: 1.7;
    max-width: 65ch;
}

.zk-prose p {
    margin-top: 1em;
    margin-bottom: 1em;
}

.zk-prose p:first-child {
    margin-top: 0;
}

.zk-prose [class~="lead"] {
    font-size: var(--zk-text-lg);
    line-height: 1.6;
    color: var(--zk-fg-secondary);
}

/* Headings */
.zk-prose h1 {
    color: var(--prose-headings);
    font-weight: 600;
    font-size: 1.875rem;
    line-height: 2.375rem;
    margin-top: 2.5em;
    margin-bottom: 1.25em;
}

.zk-prose h2 {
    color: var(--prose-headings);
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 2rem;
    margin-top: 2em;
    margin-bottom: 1em;
}

.zk-prose h3 {
    color: var(--prose-headings);
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.75rem;
    margin-top: 2em;
    margin-bottom: 0.75em;
}

.zk-prose h4 {
    color: var(--prose-headings);
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 1.5rem;
    margin-top: 1.25em;
    margin-bottom: 0.5em;
}

.zk-prose h2+*,
.zk-prose h3+*,
.zk-prose h4+* {
    margin-top: 0;
}

.zk-prose strong {
    color: var(--prose-bold);
    font-weight: 600;
}

/* Lists */
.zk-prose ul {
    list-style-type: disc;
    padding-inline-start: 1.5em;
    margin-top: 1em;
    margin-bottom: 1em;
}

.zk-prose ol {
    list-style-type: decimal;
    padding-inline-start: 1.5em;
    margin-top: 1em;
    margin-bottom: 1em;
}

.zk-prose li {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.zk-prose li::marker {
    color: var(--prose-bullets);
}

/* Blockquote */
.zk-prose blockquote {
    border-left: 3px solid var(--prose-quote-border);
    padding-left: 1em;
    margin: 1.5em 0;
    color: var(--prose-quotes);
    font-style: italic;
    font-weight: 500;
}

/* Horizontal rule */
.zk-prose hr {
    border: none;
    height: 1px;
    background: var(--prose-hr);
    margin: 2em 0;
}

/* Links */
.zk-prose a {
    color: var(--prose-links);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.zk-prose a:hover {
    text-decoration-thickness: 2px;
}

/* Code */
.zk-prose code:not(pre code) {
    font-size: 0.875em;
    font-weight: 600;
    border-radius: 6px;
    padding: 0.125em 0.375em;
    background: var(--prose-code-bg);
    box-shadow: 0 0 0 1px var(--prose-code-border);
}

.zk-prose pre {
    background: var(--zk-gray-900);
    color: var(--zk-gray-100);
    border-radius: var(--zk-radius-xl);
    padding: 1rem 1.25rem;
    overflow-x: auto;
    margin: 1.5em 0;
    font-size: 0.875rem;
    line-height: 1.6;
}

.zk-prose pre code {
    background: transparent;
    box-shadow: none;
    padding: 0;
    font-weight: 400;
}

/* Images & Media */
.zk-prose img {
    border-radius: var(--zk-radius-xl);
    width: 100%;
    margin: 2em 0;
}

.zk-prose figure {
    margin: 2.5em 0;
}

.zk-prose figcaption {
    color: var(--zk-fg-tertiary);
    font-size: var(--zk-text-sm);
    margin-top: 0.75em;
}

/* Tables */
.zk-prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
    font-size: var(--zk-text-sm);
}

.zk-prose th {
    text-align: left;
    font-weight: 600;
    padding: 0.5em 0.75em;
    border-bottom: 2px solid var(--zk-border-primary);
    color: var(--zk-fg-primary);
}

.zk-prose td {
    padding: 0.5em 0.75em;
    border-bottom: 1px solid var(--zk-border-secondary);
}

/* Responsive prose-lg at tablet+ */
@media (min-width: 768px) {
    .zk-prose-lg {
        font-size: var(--zk-text-lg);
        line-height: 1.75;
    }

    .zk-prose-lg h1 {
        font-size: 2.25rem;
    }

    .zk-prose-lg h2 {
        font-size: 1.875rem;
    }
}

/* ============================================================================
   v0.8c — FORM VALIDATION STATES (from Start UI + React-main)
   ============================================================================ */

/* Error */
.zk-input-error,
.zk-input.zk-error {
    border-color: var(--zk-error-500);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.zk-input-error:focus,
.zk-input.zk-error:focus {
    border-color: var(--zk-error-500);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

/* Warning */
.zk-input-warning,
.zk-input.zk-warning {
    border-color: var(--zk-warning-500);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12);
}

/* Success */
.zk-input-success,
.zk-input.zk-success {
    border-color: var(--zk-success-500);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12);
}

/* Form Group (label + input + helper/error) */
.zk-form-group {
    display: flex;
    flex-direction: column;
    gap: var(--zk-space-1);
}

.zk-form-label {
    font-size: var(--zk-text-sm);
    font-weight: 500;
    color: var(--zk-fg-primary);
}

.zk-form-label-required::after {
    content: ' *';
    color: var(--zk-error-500);
}

.zk-form-helper {
    font-size: var(--zk-text-xs);
    color: var(--zk-fg-tertiary);
}

.zk-form-error {
    font-size: var(--zk-text-xs);
    color: var(--zk-error-600);
}

.zk-form-success {
    font-size: var(--zk-text-xs);
    color: var(--zk-success-600);
}

/* Dark mode validation */
[data-theme="dark"] .zk-input-error,
[data-theme="dark"] .zk-input.zk-error {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

[data-theme="dark"] .zk-input-warning,
[data-theme="dark"] .zk-input.zk-warning {
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
}

[data-theme="dark"] .zk-input-success,
[data-theme="dark"] .zk-input.zk-success {
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}

/* ============================================================================
   v0.8d — RESPONSIVE VISIBILITY UTILITIES
   ============================================================================ */

/* Show only at breakpoint */
.zk-show-mobile {
    display: none;
}

.zk-show-tablet {
    display: none;
}

.zk-show-desktop {
    display: none;
}

@media (max-width: 639px) {
    .zk-show-mobile {
        display: block;
    }

    .zk-hide-mobile {
        display: none !important;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    .zk-show-tablet {
        display: block;
    }

    .zk-hide-tablet {
        display: none !important;
    }
}

@media (min-width: 1024px) {
    .zk-show-desktop {
        display: block;
    }

    .zk-hide-desktop {
        display: none !important;
    }
}

/* Inline variants */
.zk-show-mobile-flex {
    display: none;
}

.zk-show-tablet-flex {
    display: none;
}

.zk-show-desktop-flex {
    display: none;
}

@media (max-width: 639px) {
    .zk-show-mobile-flex {
        display: flex;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    .zk-show-tablet-flex {
        display: flex;
    }
}

@media (min-width: 1024px) {
    .zk-show-desktop-flex {
        display: flex;
    }
}

/* ============================================================================
   v0.9 — OS-GRADE FRAMEWORK (ZeniKit as Operating System UI Layer)
   ============================================================================ */

/* ─── CSS Tooltip ─── */
/* Source: start-ui-web-main/src/components/ui/tooltip.tsx */
/* Pure CSS via data-tooltip attribute + ::after pseudo */
[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    z-index: 10000;
    padding: 0.375rem 0.75rem;
    border-radius: var(--zk-radius-md);
    background: var(--zk-gray-900);
    color: var(--zk-gray-50);
    font-size: var(--zk-text-xs);
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 150ms, transform 150ms;
}

[data-tooltip]:hover::after {
    opacity: 1;
    transform: translateY(0);
}

/* Default: bottom */
[data-tooltip]::after,
[data-tooltip-pos="bottom"]::after {
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
}

[data-tooltip]:hover::after,
[data-tooltip-pos="bottom"]:hover::after {
    transform: translateX(-50%) translateY(0);
}

/* Top */
[data-tooltip-pos="top"]::after {
    bottom: calc(100% + 6px);
    top: auto;
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
}

[data-tooltip-pos="top"]:hover::after {
    transform: translateX(-50%) translateY(0);
}

/* Left */
[data-tooltip-pos="left"]::after {
    right: calc(100% + 6px);
    top: 50%;
    left: auto;
    transform: translateY(-50%) translateX(-4px);
}

[data-tooltip-pos="left"]:hover::after {
    transform: translateY(-50%) translateX(0);
}

/* Right */
[data-tooltip-pos="right"]::after {
    left: calc(100% + 6px);
    top: 50%;
    transform: translateY(-50%) translateX(4px);
}

[data-tooltip-pos="right"]:hover::after {
    transform: translateY(-50%) translateX(0);
}

[data-theme="dark"] [data-tooltip]::after {
    background: var(--zk-gray-100);
    color: var(--zk-gray-900);
}

/* ─── Dropdown Menu ─── */
/* Source: start-ui-web-main/src/components/ui/dropdown-menu.tsx */
.zk-dropdown-menu {
    position: absolute;
    z-index: 9990;
    min-width: 10rem;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    border-radius: var(--zk-radius-lg);
    border: 1px solid var(--zk-border-secondary);
    background: var(--zk-bg-primary);
    box-shadow: var(--zk-shadow-lg);
    padding: var(--zk-space-1);
    opacity: 0;
    transform: scale(0.95) translateY(-4px);
    transform-origin: top left;
    transition: opacity 150ms, transform 150ms;
    pointer-events: none;
}

.zk-dropdown-menu.zk-open {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}

.zk-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--zk-space-2);
    padding: var(--zk-space-2) var(--zk-space-3);
    border-radius: var(--zk-radius-md);
    font-size: var(--zk-text-sm);
    color: var(--zk-fg-primary);
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    transition: background 100ms;
}

.zk-dropdown-item:hover {
    background: var(--zk-bg-secondary);
}

.zk-dropdown-item-danger {
    color: var(--zk-error-600);
}

.zk-dropdown-item-danger:hover {
    background: rgba(239, 68, 68, 0.08);
}

.zk-dropdown-item-icon {
    width: 1rem;
    height: 1rem;
    color: var(--zk-fg-tertiary);
    flex-shrink: 0;
}

.zk-dropdown-separator {
    height: 1px;
    background: var(--zk-border-secondary);
    margin: var(--zk-space-1) 0;
}

.zk-dropdown-label {
    padding: var(--zk-space-2) var(--zk-space-3);
    font-size: var(--zk-text-xs);
    font-weight: 600;
    color: var(--zk-fg-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.zk-dropdown-shortcut {
    margin-left: auto;
    font-size: var(--zk-text-xs);
    color: var(--zk-fg-quaternary);
}

/* ─── Kbd (Keyboard Shortcut Display) ─── */
.zk-kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.375rem;
    padding: 0 0.375rem;
    border-radius: var(--zk-radius-sm);
    border: 1px solid var(--zk-border-secondary);
    background: var(--zk-bg-secondary);
    font-size: 0.6875rem;
    font-family: inherit;
    font-weight: 500;
    color: var(--zk-fg-secondary);
    box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0.04);
    line-height: 1;
}

.zk-kbd+.zk-kbd {
    margin-left: 0.25rem;
}

/* ─── Avatar Group (stacked overlapping) ─── */
.zk-avatar-group {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.zk-avatar-group .zk-avatar {
    margin-left: -0.5rem;
    box-shadow: 0 0 0 2px var(--zk-bg-primary);
    position: relative;
}

.zk-avatar-group .zk-avatar:last-child {
    margin-left: 0;
}

.zk-avatar-group-count {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    background: var(--zk-bg-tertiary);
    font-size: var(--zk-text-xs);
    font-weight: 600;
    color: var(--zk-fg-secondary);
    margin-left: -0.5rem;
    border: 2px solid var(--zk-bg-primary);
}

/* ─── Notification Pulse Dot ─── */
@keyframes zk-beacon {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

.zk-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: var(--zk-error-500);
    position: relative;
}

.zk-dot-pulse::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background: inherit;
    animation: zk-beacon 1.5s ease-out infinite;
}

.zk-dot-success {
    background: var(--zk-success-500);
}

.zk-dot-warning {
    background: var(--zk-warning-500);
}

.zk-dot-brand {
    background: var(--zk-brand-500);
}

/* ─── Backdrop-Filter Utilities ─── */
.zk-blur-none {
    backdrop-filter: none;
}

.zk-blur-sm {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.zk-blur {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.zk-blur-md {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.zk-blur-lg {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.zk-blur-xl {
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.zk-blur-2xl {
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
}

.zk-saturate-50 {
    backdrop-filter: saturate(0.5);
}

.zk-saturate-100 {
    backdrop-filter: saturate(1);
}

.zk-saturate-150 {
    backdrop-filter: saturate(1.5);
}

.zk-saturate-200 {
    backdrop-filter: saturate(2);
}

/* ─── Animated Gradient Text ─── */
@keyframes zk-gradient-shift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.zk-gradient-text {
    background: linear-gradient(135deg, var(--zk-brand-500), var(--zk-brand-700), #8B5CF6, var(--zk-brand-500));
    background-size: 300% 300%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: zk-gradient-shift 6s ease infinite;
}

.zk-gradient-text-gold {
    background: linear-gradient(135deg, #D97706, #F59E0B, #FBBF24, #D97706);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: zk-gradient-shift 6s ease infinite;
}

/* ─── Grid Auto-Fit / Auto-Fill ─── */
.zk-grid-auto-fit {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.zk-grid-auto-fill {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}

.zk-grid-auto-fit-sm {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.zk-grid-auto-fit-lg {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}

/* ─── Glassmorphism Utilities ─── */
.zk-glass {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px) saturate(1.5);
    -webkit-backdrop-filter: blur(12px) saturate(1.5);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .zk-glass {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.06);
}

.zk-frosted-glass {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(20px) saturate(1.8);
    -webkit-backdrop-filter: blur(20px) saturate(1.8);
}

[data-theme="dark"] .zk-frosted-glass {
    background: rgba(15, 23, 42, 0.82);
}

/* ─── Focus-Visible Modern ─── */
.zk-focus-visible:focus-visible {
    outline: 2px solid var(--zk-brand-500);
    outline-offset: 2px;
    border-radius: var(--zk-radius-sm);
}

/* ─── Scroll Shadow (iOS-style fade at edges) ─── */
.zk-scroll-shadow {
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 1rem, black calc(100% - 1rem), transparent);
    mask-image: linear-gradient(to bottom, transparent, black 1rem, black calc(100% - 1rem), transparent);
}

.zk-scroll-shadow-x {
    -webkit-mask-image: linear-gradient(to right, transparent, black 1rem, black calc(100% - 1rem), transparent);
    mask-image: linear-gradient(to right, transparent, black 1rem, black calc(100% - 1rem), transparent);
}

/* ============================================================================
   v1.0 — MISSING CLASS DEFINITIONS (stress-tested, verified)
   ============================================================================ */

/* ─── Chat Layout ─── */
.zk-chat-wrap {
    display: flex;
    height: calc(100vh - 4rem);
}

.zk-chat-sidebar {
    width: 16rem;
    border-right: 1px solid var(--zk-border-secondary);
    overflow-y: auto;
}

.zk-chat-contact {
    display: flex;
    align-items: center;
    gap: var(--zk-space-3);
    padding: var(--zk-space-3);
    cursor: pointer;
    border-bottom: 1px solid var(--zk-border-secondary);
    transition: background 150ms;
}

.zk-chat-contact:hover,
.zk-chat-contact.active {
    background: var(--zk-bg-secondary);
}

.zk-chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.zk-chat-header {
    padding: var(--zk-space-3) var(--zk-space-5);
    border-bottom: 1px solid var(--zk-border-secondary);
    display: flex;
    align-items: center;
    gap: var(--zk-space-3);
}

.zk-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--zk-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--zk-space-3);
}

.zk-chat-bubble {
    max-width: 70%;
    padding: var(--zk-space-3) var(--zk-space-4);
    border-radius: var(--zk-radius-xl);
    font-size: var(--zk-text-sm);
    line-height: 1.5;
}

.zk-chat-sent {
    align-self: flex-end;
    background: var(--zk-brand-600);
    color: var(--zk-white, #fff);
    border-bottom-right-radius: var(--zk-radius-sm);
}

.zk-chat-received {
    align-self: flex-start;
    background: var(--zk-bg-secondary);
    border-bottom-left-radius: var(--zk-radius-sm);
}

.zk-chat-time {
    font-size: var(--zk-text-xs);
    color: var(--zk-fg-quaternary);
    margin-top: var(--zk-space-1);
}

.zk-chat-sent .zk-chat-time {
    color: rgba(255, 255, 255, 0.7);
}

.zk-chat-input {
    padding: var(--zk-space-3) var(--zk-space-5);
    border-top: 1px solid var(--zk-border-secondary);
    display: flex;
    gap: var(--zk-space-2);
}

/* ─── Typing Indicator ─── */
.zk-typing {
    font-size: var(--zk-text-xs);
    color: var(--zk-fg-tertiary);
    padding: 0 var(--zk-space-5);
}

.zk-typing-dots span {
    animation: zk-dot-blink 1.4s infinite;
}

.zk-typing-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.zk-typing-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes zk-dot-blink {

    0%,
    80%,
    100% {
        opacity: 0;
    }

    40% {
        opacity: 1;
    }
}

/* Chat: mobile responsive */
@media (max-width: 767px) {
    .zk-chat-wrap {
        flex-direction: column;
        height: auto;
        min-height: calc(100vh - 4rem);
    }

    .zk-chat-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--zk-border-secondary);
        max-height: 30vh;
        flex-shrink: 0;
    }

    .zk-chat-main {
        min-height: 60vh;
    }

    .zk-chat-input {
        padding-bottom: calc(var(--zk-space-3) + 80px);
    }

    .zk-chat-bubble {
        max-width: 85%;
    }
}

/* ─── Missing Utilities ─── */
.zk-mt-5 {
    margin-top: var(--zk-space-5);
}

.zk-hover-lift {
    transition: transform 200ms, box-shadow 200ms;
}

.zk-hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: var(--zk-shadow-lg);
}

.zk-border-brand {
    border-color: var(--zk-brand-500);
}

.zk-separator-text {
    display: flex;
    align-items: center;
    gap: var(--zk-space-3);
    color: var(--zk-fg-tertiary);
    font-size: var(--zk-text-xs);
}

.zk-separator-text::before,
.zk-separator-text::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--zk-border-secondary);
}

/* ─── Badge Sizes ─── */
.zk-badge-sm {
    font-size: 0.625rem;
    padding: 0.125rem 0.375rem;
}

.zk-badge-lg {
    font-size: var(--zk-text-sm);
    padding: 0.25rem 0.625rem;
}

/* ─── Auth Layout ─── */
.zk-auth-bg {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--zk-bg-secondary);
}

.zk-auth-card {
    width: 100%;
    max-width: 24rem;
    padding: var(--zk-space-8);
    background: var(--zk-bg-primary);
    border-radius: var(--zk-radius-xl);
    box-shadow: var(--zk-shadow-xl);
}

/* ─── Calendar Layout ─── */
.zk-calendar-grid {
    table-layout: fixed;
}

.zk-calendar-cell {
    border: 1px solid var(--zk-border-secondary);
    position: relative;
    vertical-align: top;
    height: 6rem;
    padding: 4px 6px;
}

.zk-calendar-cell.zk-outside {
    background: var(--zk-bg-secondary);
}

.zk-calendar-cell.zk-outside .zk-calendar-day {
    color: var(--zk-fg-quaternary);
}

.zk-calendar-day {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    font-size: var(--zk-text-sm);
    font-weight: var(--zk-weight-medium);
}

.zk-calendar-day.zk-today {
    background: var(--zk-brand-600);
    color: var(--zk-white, #fff);
}

.zk-calendar-event {
    font-size: 0.65rem;
    padding: 1px 4px;
    border-radius: var(--zk-radius-sm);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zk-calendar-event-brand {
    background: var(--zk-brand-50);
    color: var(--zk-brand-700);
}

.zk-calendar-event-success {
    background: var(--zk-success-50);
    color: var(--zk-success-700);
}

.zk-calendar-event-warning {
    background: var(--zk-warning-50);
    color: var(--zk-warning-700);
}

.zk-calendar-event-error {
    background: var(--zk-error-50);
    color: var(--zk-error-700);
}

/* ─── Kanban Layout ─── */
.zk-kanban-col {
    min-width: 16rem;
    flex: 1;
}

.zk-kanban-cards {
    min-height: 20rem;
}

/* ─── Inbox Layout ─── */
.inbox-layout {
    display: flex;
    height: calc(100vh - 4rem);
    overflow: hidden;
}

.inbox-sidebar {
    width: 14rem;
    min-width: 14rem;
    border-right: 1px solid var(--zk-border-secondary);
    padding: var(--zk-space-4);
    overflow-y: auto;
}

.inbox-list {
    width: 22rem;
    min-width: 22rem;
    border-right: 1px solid var(--zk-border-secondary);
    overflow-y: auto;
}

.inbox-preview {
    flex: 1;
    padding: var(--zk-space-6);
    overflow-y: auto;
}

.inbox-msg {
    border-bottom: 1px solid var(--zk-border-secondary);
    cursor: pointer;
}

.inbox-msg:hover {
    background: var(--zk-bg-secondary);
}

/* Inbox: mobile responsive */
@media (max-width: 767px) {
    .inbox-layout {
        flex-direction: column;
        height: auto;
        min-height: calc(100vh - 4rem);
    }

    .inbox-sidebar {
        width: 100%;
        min-width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--zk-border-secondary);
        padding: var(--zk-space-3);
        display: flex;
        align-items: center;
        gap: var(--zk-space-2);
        overflow-x: auto;
    }

    .inbox-sidebar .zk-btn {
        flex-shrink: 0;
    }

    .inbox-sidebar nav {
        display: flex !important;
        flex-direction: row !important;
        gap: var(--zk-space-1) !important;
        flex-shrink: 0;
    }

    .inbox-list {
        width: 100%;
        min-width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--zk-border-secondary);
        max-height: 50vh;
    }

    .inbox-preview {
        padding: var(--zk-space-4);
        padding-bottom: calc(var(--zk-space-8) + 80px);
    }

    .inbox-preview .zk-flex.zk-justify-between {
        flex-direction: column;
        gap: var(--zk-space-2);
    }
}

/* ============================================================================
   v1.0 — PERFORMANCE LAYER (GPU-First Rendering Pipeline)
   
   Principles:
   • Every animation uses transform/opacity only (compositor thread)
   • contain: layout style paint isolates repaint boundaries
   • content-visibility: auto skips off-screen rendering entirely
   • will-change only on elements that actually animate
   • prefers-reduced-motion respected globally
   ============================================================================ */

/* ─── Containment (repaint boundary isolation) ─── */
.zk-contain {
    contain: layout style paint;
}

.zk-contain-strict {
    contain: strict;
}

.zk-contain-content {
    contain: content;
}

/* Cards and modals are natural containment boundaries */
.zk-card {
    contain: layout style;
}

.zk-modal {
    contain: layout style paint;
}

.zk-sheet {
    contain: layout style paint;
}

.zk-dropdown-menu {
    contain: layout style paint;
}

/* ─── Content Visibility (skip off-screen rendering) ─── */
.zk-content-auto {
    content-visibility: auto;
    contain-intrinsic-size: auto 300px;
}

.zk-content-hidden {
    content-visibility: hidden;
}

.zk-content-visible {
    content-visibility: visible;
}

/* ─── GPU Compositor Hints (promote to own layer) ─── */
.zk-gpu {
    will-change: transform;
    transform: translateZ(0);
}

.zk-gpu-opacity {
    will-change: opacity;
}

/* Spinners are always animating — promote */
.zk-spinner {
    will-change: transform;
}

/* Progress bars use translateX — promote */
.zk-progress-bar {
    will-change: transform;
}

/* Sheet uses translateX/Y — promote */
.zk-sheet.zk-open {
    will-change: transform;
}

/* ─── Reduced Motion (accessibility) ─── */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .zk-spinner {
        animation: none;
    }

    .zk-skeleton::before {
        animation: none;
    }

    .zk-gradient-text {
        animation: none;
    }

    .zk-dot-pulse::before {
        animation: none;
    }
}

/* ─── Print Media (clean output) ─── */
@media print {

    .zk-dock,
    .zk-sheet,
    .zk-modal,
    .zk-sheet-overlay,
    .zk-modal-overlay,
    .zk-toast-container,
    .zk-spinner,
    .zk-hide-print {
        display: none !important;
    }

    body {
        background: white;
        color: black;
    }

    .zk-card {
        break-inside: avoid;
        border: 1px solid #ddd;
        box-shadow: none;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
}

/* ============================================================================
   PHASE 8 — NEW COMPONENTS
   ============================================================================ */

/* ─── Slider ─── */
.zk-slider-wrapper {
    width: 100%;
}

.zk-slider {
    position: relative;
    height: 2.5rem;
    display: flex;
    align-items: center;
}

.zk-slider-input {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    background: transparent;
    cursor: pointer;
    position: relative;
    z-index: 2;
    margin: 0;
}

.zk-slider-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--zk-bg-primary);
    border: 2px solid var(--zk-brand-500);
    box-shadow: var(--zk-shadow-sm);
    cursor: grab;
    transition: transform 150ms;
}

.zk-slider-input::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

.zk-slider-input::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1.1);
}

.zk-slider-input::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--zk-bg-primary);
    border: 2px solid var(--zk-brand-500);
    box-shadow: var(--zk-shadow-sm);
    cursor: grab;
}

.zk-slider-input::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 4px;
    background: var(--zk-gray-200);
}

.zk-slider-input::-moz-range-track {
    height: 8px;
    border-radius: 4px;
    background: var(--zk-gray-200);
}

.zk-slider-track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 8px;
    transform: translateY(-50%);
    border-radius: 4px;
    background: var(--zk-gray-200);
    pointer-events: none;
    z-index: 1;
}

.zk-slider-fill {
    height: 100%;
    border-radius: 4px;
    background: var(--zk-brand-500);
    transition: width 50ms;
}

/* ─── Radio ─── */
.zk-radio-group {
    border: none;
}

.zk-radio-options {
    display: flex;
    flex-direction: column;
    gap: var(--zk-space-3);
}

.zk-radio-option {
    display: flex;
    align-items: flex-start;
    gap: var(--zk-space-3);
    cursor: pointer;
    padding: var(--zk-space-3);
    border-radius: var(--zk-radius-lg);
    transition: background 150ms;
}

.zk-radio-option:hover {
    background: var(--zk-bg-secondary);
}

.zk-radio-input {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    margin: 0;
    flex-shrink: 0;
    border: 2px solid var(--zk-gray-300);
    border-radius: 50%;
    background: var(--zk-bg-primary);
    transition: border-color 150ms, box-shadow 150ms;
    position: absolute;
    opacity: 0;
}

.zk-radio-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border: 2px solid var(--zk-gray-300);
    border-radius: 50%;
    transition: border-color 150ms;
}

.zk-radio-option:has(:checked) .zk-radio-dot {
    border-color: var(--zk-brand-600);
    background: var(--zk-brand-600);
    box-shadow: inset 0 0 0 3px var(--zk-bg-primary);
}

.zk-radio-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.zk-radio-label {
    font-size: var(--zk-text-sm);
    font-weight: var(--zk-weight-medium);
}

.zk-radio-desc {
    font-size: var(--zk-text-sm);
    color: var(--zk-fg-tertiary);
}

/* Radio Cards */
.zk-radio-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--zk-space-2);
    padding: var(--zk-space-4);
    border: 2px solid var(--zk-border-primary);
    border-radius: var(--zk-radius-xl);
    cursor: pointer;
    text-align: center;
    transition: border-color 150ms, box-shadow 150ms;
}

.zk-radio-card:hover {
    border-color: var(--zk-gray-300);
}

.zk-radio-card.zk-active,
.zk-radio-card:has(:checked) {
    border-color: var(--zk-brand-600);
    box-shadow: 0 0 0 1px var(--zk-brand-600);
}

.zk-radio-card-label {
    font-size: var(--zk-text-sm);
    font-weight: var(--zk-weight-semibold);
}

.zk-radio-card-desc {
    font-size: var(--zk-text-xs);
    color: var(--zk-fg-tertiary);
}

.zk-radio-card-price {
    font-size: var(--zk-text-lg);
    font-weight: var(--zk-weight-bold);
    color: var(--zk-fg-brand);
    margin-top: var(--zk-space-1);
}

/* ─── Tooltip ─── */
[data-tooltip] {
    position: relative;
    cursor: help;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    z-index: var(--zk-z-tooltip);
    pointer-events: none;
    padding: 6px 10px;
    border-radius: var(--zk-radius-md);
    background: var(--zk-gray-900);
    color: #fff;
    font-size: var(--zk-text-xs);
    white-space: nowrap;
    line-height: 1.4;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 150ms, transform 150ms;
}

[data-tooltip-pos="top"]::after {
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
}

[data-tooltip-pos="bottom"]::after {
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
}

[data-tooltip-pos="left"]::after {
    right: calc(100% + 6px);
    top: 50%;
    transform: translateY(-50%) translateX(4px);
}

[data-tooltip-pos="right"]::after {
    left: calc(100% + 6px);
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
}

[data-tooltip]:hover::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

[data-tooltip-pos="left"]:hover::after,
[data-tooltip-pos="right"]:hover::after {
    transform: translateY(-50%) translateX(0);
}

/* Popover */
.zk-popover {
    position: relative;
    display: inline-block;
}

.zk-popover-content {
    display: none;
    position: absolute;
    z-index: var(--zk-z-popover);
    background: var(--zk-bg-primary);
    border: 1px solid var(--zk-border-primary);
    border-radius: var(--zk-radius-xl);
    box-shadow: var(--zk-shadow-lg);
    padding: var(--zk-space-4);
}

.zk-popover-content[data-pos="bottom"] {
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
}

.zk-popover-content[data-pos="top"] {
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
}

.zk-popover.zk-open .zk-popover-content {
    display: block;
    animation: zk-fade-in 150ms;
}

/* ─── Accordion ─── */
.zk-accordion {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--zk-border-primary);
    border-radius: var(--zk-radius-xl);
    overflow: hidden;
}

.zk-accordion-item {
    border-bottom: 1px solid var(--zk-border-secondary);
}

.zk-accordion-item:last-child {
    border-bottom: none;
}

.zk-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--zk-space-3);
    padding: var(--zk-space-4) var(--zk-space-5);
    cursor: pointer;
    font-weight: var(--zk-weight-medium);
    font-size: var(--zk-text-sm);
    list-style: none;
    user-select: none;
    transition: background 150ms;
}

.zk-accordion-header:hover {
    background: var(--zk-bg-secondary);
}

.zk-accordion-header::-webkit-details-marker {
    display: none;
}

.zk-accordion-chevron {
    flex-shrink: 0;
    color: var(--zk-fg-tertiary);
    transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

details[open]>.zk-accordion-header .zk-accordion-chevron {
    transform: rotate(180deg);
}

.zk-accordion-body {
    padding: 0 var(--zk-space-5) var(--zk-space-4);
    font-size: var(--zk-text-sm);
    color: var(--zk-fg-secondary);
    line-height: var(--zk-leading-relaxed);
}

/* ─── Alert ─── */
.zk-alert {
    display: flex;
    gap: var(--zk-space-3);
    padding: var(--zk-space-4);
    border-radius: var(--zk-radius-xl);
    font-size: var(--zk-text-sm);
}

.zk-alert-icon {
    flex-shrink: 0;
    margin-top: 1px;
}

.zk-alert-content {
    flex: 1;
}

.zk-alert-title {
    font-weight: var(--zk-weight-semibold);
    margin-bottom: 2px;
}

.zk-alert-message {
    color: inherit;
    opacity: 0.85;
}

.zk-alert-dismiss {
    flex-shrink: 0;
    margin: -4px;
    opacity: 0.7;
}

.zk-alert-dismiss:hover {
    opacity: 1;
}

.zk-alert-info {
    background: var(--zk-brand-50);
    color: var(--zk-brand-800);
    border: 1px solid var(--zk-brand-200);
}

.zk-alert-success {
    background: var(--zk-success-50);
    color: var(--zk-success-800);
    border: 1px solid var(--zk-success-200);
}

.zk-alert-warning {
    background: var(--zk-warning-50);
    color: var(--zk-warning-800);
    border: 1px solid var(--zk-warning-200);
}

.zk-alert-error {
    background: var(--zk-error-50);
    color: var(--zk-error-800);
    border: 1px solid var(--zk-error-200);
}

/* ─── Breadcrumb ─── */
.zk-breadcrumb-list {
    display: flex;
    align-items: center;
    gap: var(--zk-space-1);
    flex-wrap: wrap;
}

.zk-breadcrumb-sep {
    display: flex;
    align-items: center;
    color: var(--zk-fg-quaternary);
    font-size: var(--zk-text-sm);
}

.zk-breadcrumb-link {
    font-size: var(--zk-text-sm);
    color: var(--zk-fg-tertiary);
    display: flex;
    align-items: center;
}

.zk-breadcrumb-link:hover {
    color: var(--zk-fg-primary);
}

.zk-breadcrumb-current {
    font-size: var(--zk-text-sm);
    font-weight: var(--zk-weight-medium);
    color: var(--zk-fg-primary);
}

/* ─── Skeleton ─── */
.zk-skeleton {
    background: linear-gradient(90deg, var(--zk-gray-100) 25%, var(--zk-gray-200) 50%, var(--zk-gray-100) 75%);
    background-size: 200% 100%;
    animation: zk-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--zk-radius-md);
}

[data-theme="dark"] .zk-skeleton {
    background: linear-gradient(90deg, var(--zk-gray-800) 25%, var(--zk-gray-700) 50%, var(--zk-gray-800) 75%);
    background-size: 200% 100%;
}

@keyframes zk-shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* ─── Stepper ─── */
.zk-stepper-list {
    display: flex;
    align-items: flex-start;
}

.zk-stepper-horizontal .zk-stepper-list {
    flex-direction: row;
}

.zk-stepper-vertical .zk-stepper-list {
    flex-direction: column;
}

.zk-stepper-item {
    display: flex;
    align-items: center;
    flex: 1;
    position: relative;
}

.zk-stepper-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    flex-shrink: 0;
    font-size: var(--zk-text-sm);
    font-weight: var(--zk-weight-semibold);
    transition: background 200ms, color 200ms;
}

.zk-stepper-completed .zk-stepper-indicator {
    background: var(--zk-brand-600);
    color: #fff;
}

.zk-stepper-active .zk-stepper-indicator {
    background: var(--zk-brand-100);
    color: var(--zk-brand-700);
    border: 2px solid var(--zk-brand-600);
}

.zk-stepper-upcoming .zk-stepper-indicator {
    background: var(--zk-gray-100);
    color: var(--zk-fg-tertiary);
}

.zk-stepper-connector {
    flex: 1;
    height: 2px;
    background: var(--zk-gray-200);
    margin: 0 var(--zk-space-2);
}

.zk-stepper-connector.zk-completed {
    background: var(--zk-brand-600);
}

.zk-stepper-label {
    display: none;
}

@media (min-width: 640px) {
    .zk-stepper-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .zk-stepper-label {
        display: block;
        font-size: var(--zk-text-xs);
        margin-top: var(--zk-space-2);
        font-weight: var(--zk-weight-medium);
    }

    .zk-stepper-desc {
        font-size: var(--zk-text-xs);
        color: var(--zk-fg-tertiary);
    }

    .zk-stepper-connector {
        position: absolute;
        top: 1rem;
        left: calc(50% + 1.25rem);
        right: calc(-50% + 1.25rem);
        margin: 0;
    }
}

/* ─── Drawer ─── */
.zk-drawer-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--zk-z-modal);
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.zk-drawer-overlay.zk-open {
    display: flex;
    animation: zk-fade-in 150ms;
}

.zk-drawer {
    position: absolute;
    background: var(--zk-bg-primary);
    box-shadow: var(--zk-shadow-xl);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.zk-drawer-right {
    right: 0;
    top: 0;
    bottom: 0;
    transform: translateX(0);
    animation: zk-slide-left 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.zk-drawer-left {
    left: 0;
    top: 0;
    bottom: 0;
    animation: zk-slide-right 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.zk-drawer-bottom {
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 85vh;
    border-radius: var(--zk-radius-2xl) var(--zk-radius-2xl) 0 0;
    animation: zk-slide-up 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.zk-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--zk-space-4);
    padding: var(--zk-space-5) var(--zk-space-6);
    border-bottom: 1px solid var(--zk-border-secondary);
}

.zk-drawer-body {
    padding: var(--zk-space-6);
    flex: 1;
    overflow-y: auto;
}

.zk-sheet-handle {
    width: 2.5rem;
    height: 4px;
    background: var(--zk-gray-300);
    border-radius: 2px;
    margin: var(--zk-space-3) auto;
}

@keyframes zk-slide-left {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes zk-slide-right {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes zk-slide-up {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

/* ─── File Upload ─── */
.zk-file-input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

.zk-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--zk-space-2);
    padding: var(--zk-space-8) var(--zk-space-4);
    border: 2px dashed var(--zk-gray-300);
    border-radius: var(--zk-radius-xl);
    cursor: pointer;
    transition: border-color 200ms, background 200ms;
    text-align: center;
}

.zk-dropzone:hover,
.zk-drag-active {
    border-color: var(--zk-brand-500);
    background: var(--zk-brand-50);
}

.zk-dropzone-icon {
    color: var(--zk-fg-tertiary);
}

.zk-dropzone-text {
    font-size: var(--zk-text-sm);
    color: var(--zk-fg-secondary);
}

.zk-dropzone-hint {
    font-size: var(--zk-text-xs);
    color: var(--zk-fg-quaternary);
}

.zk-file-preview {
    display: flex;
    flex-wrap: wrap;
    gap: var(--zk-space-2);
    margin-top: var(--zk-space-3);
}

/* ─── Tags ─── */
.zk-tags-input {
    display: flex;
    flex-wrap: wrap;
    gap: var(--zk-space-2);
    align-items: center;
    padding: var(--zk-space-2) var(--zk-space-3);
    border: 1px solid var(--zk-border-primary);
    border-radius: var(--zk-radius-lg);
    min-height: 2.75rem;
    cursor: text;
    transition: border-color 150ms;
}

.zk-tags-input:focus-within {
    border-color: var(--zk-border-focus);
    box-shadow: var(--zk-focus-ring);
}

.zk-tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--zk-space-1_5);
}

.zk-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--zk-radius-full);
    font-size: var(--zk-text-xs);
    font-weight: var(--zk-weight-medium);
    background: var(--zk-gray-100);
    color: var(--zk-fg-secondary);
}

.zk-tag-brand {
    background: var(--zk-brand-100);
    color: var(--zk-brand-700);
}

.zk-tag-success {
    background: var(--zk-success-100);
    color: var(--zk-success-700);
}

.zk-tag-warning {
    background: var(--zk-warning-100);
    color: var(--zk-warning-700);
}

.zk-tag-error {
    background: var(--zk-error-100);
    color: var(--zk-error-700);
}

.zk-tag-remove {
    display: flex;
    cursor: pointer;
    opacity: 0.6;
    background: none;
    border: none;
    padding: 0;
}

.zk-tag-remove:hover {
    opacity: 1;
}

.zk-tags-field {
    border: none;
    outline: none;
    font-size: var(--zk-text-sm);
    min-width: 4rem;
    flex: 1;
    background: transparent;
}

/* ─── OTP Input ─── */
.zk-otp-wrapper {
    text-align: center;
}

.zk-otp-inputs {
    display: inline-flex;
    gap: var(--zk-space-2);
    align-items: center;
}

.zk-otp-digit {
    width: 3rem;
    height: 3.5rem;
    text-align: center;
    font-size: var(--zk-text-xl);
    font-weight: var(--zk-weight-bold);
    font-family: var(--zk-font-mono);
    letter-spacing: 0;
    border: 2px solid var(--zk-gray-300);
    border-radius: var(--zk-radius-lg);
    background: var(--zk-bg-primary);
    transition: border-color 150ms;
}

.zk-otp-digit:focus {
    border-color: var(--zk-brand-600);
    box-shadow: var(--zk-focus-ring);
    outline: none;
}

.zk-otp-separator {
    font-size: var(--zk-text-xl);
    color: var(--zk-fg-quaternary);
    padding: 0 4px;
}

/* ─── Timeline ─── */
.zk-timeline {
    display: flex;
    flex-direction: column;
}

.zk-timeline-item {
    display: flex;
    gap: var(--zk-space-4);
    position: relative;
    padding-bottom: var(--zk-space-6);
}

.zk-timeline-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--zk-gray-100);
    color: var(--zk-fg-tertiary);
    z-index: 1;
}

.zk-timeline-default .zk-timeline-marker {
    background: var(--zk-gray-100);
}

.zk-timeline-success .zk-timeline-marker {
    background: var(--zk-success-100);
    color: var(--zk-success-600);
}

.zk-timeline-warning .zk-timeline-marker {
    background: var(--zk-warning-100);
    color: var(--zk-warning-600);
}

.zk-timeline-error .zk-timeline-marker {
    background: var(--zk-error-100);
    color: var(--zk-error-600);
}

.zk-timeline-line {
    position: absolute;
    left: calc(1rem - 1px);
    top: 2rem;
    bottom: 0;
    width: 2px;
    background: var(--zk-gray-200);
}

.zk-timeline-title {
    font-size: var(--zk-text-sm);
    font-weight: var(--zk-weight-medium);
}

.zk-timeline-content {
    padding-top: 5px;
}

/* ─── Separator ─── */
.zk-separator {
    border: none;
    border-top: 1px solid var(--zk-border-primary);
    margin: var(--zk-space-6) 0;
}

.zk-separator-labeled {
    display: flex;
    align-items: center;
    gap: var(--zk-space-4);
    color: var(--zk-fg-quaternary);
    font-size: var(--zk-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: var(--zk-weight-medium);
}

.zk-separator-center::before,
.zk-separator-center::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--zk-border-primary);
}

.zk-separator-left::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--zk-border-primary);
}

.zk-separator-right::before {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--zk-border-primary);
}

.zk-separator-v {
    width: 1px;
    background: var(--zk-border-primary);
    align-self: stretch;
    margin: 0 var(--zk-space-3);
}

/* ─── Charts ─── */
.zk-chart {
    position: relative;
    width: 100%;
}

.zk-chart canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

.zk-sparkline {
    display: inline-block;
}

.zk-sparkline canvas {
    display: block;
}

/* ─── Gauge ─── */
.zk-gauge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.zk-gauge-svg {
    transform: rotate(-90deg);
    width: 100%;
    height: 100%;
}

.zk-gauge-track {
    stroke: var(--zk-gray-200);
}

.zk-gauge-fill {
    transition: stroke-dashoffset 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.zk-gauge-brand {
    stroke: var(--zk-brand-500);
}

.zk-gauge-success {
    stroke: var(--zk-success-500);
}

.zk-gauge-warning {
    stroke: var(--zk-warning-500);
}

.zk-gauge-error {
    stroke: var(--zk-error-500);
}

.zk-gauge-center {
    position: absolute;
    text-align: center;
}

.zk-gauge-value {
    font-size: var(--zk-text-xl);
    font-weight: var(--zk-weight-bold);
    display: block;
}

.zk-gauge-label {
    font-size: var(--zk-text-xs);
    color: var(--zk-fg-tertiary);
    display: block;
}

/* ─── Progress Circle ─── */
.zk-progress-circle {
    display: inline-block;
    vertical-align: middle;
}

/* ============================================================================
   PHASE 11 — ENTERPRISE COMPONENTS
   ============================================================================ */

/* ─── Date Picker ─── */
.zk-datepicker {
    position: relative;
}

.zk-datepicker-input {
    padding-right: 2.5rem;
    cursor: pointer;
}

.zk-datepicker-icon {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--zk-fg-tertiary);
    cursor: pointer;
    pointer-events: auto;
}

.zk-datepicker-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: var(--zk-z-dropdown);
    background: var(--zk-bg-primary);
    border: 1px solid var(--zk-border-primary);
    border-radius: var(--zk-radius-xl);
    box-shadow: var(--zk-shadow-lg);
    padding: var(--zk-space-4);
    width: 18rem;
    animation: zk-scale-in 150ms;
}

.zk-datepicker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--zk-space-3);
}

.zk-datepicker-title {
    font-size: var(--zk-text-sm);
    font-weight: var(--zk-weight-semibold);
}

.zk-datepicker-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: var(--zk-text-xs);
    color: var(--zk-fg-tertiary);
    font-weight: var(--zk-weight-medium);
    margin-bottom: var(--zk-space-1);
}

.zk-datepicker-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.zk-datepicker-day {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin: auto;
    border-radius: var(--zk-radius-md);
    font-size: var(--zk-text-sm);
    cursor: pointer;
    transition: background 100ms;
    border: none;
    background: none;
    color: inherit;
}

.zk-datepicker-day:hover {
    background: var(--zk-bg-tertiary);
}

.zk-datepicker-day.zk-active {
    background: var(--zk-brand-600);
    color: #fff;
}

.zk-datepicker-day.zk-today {
    font-weight: var(--zk-weight-bold);
    color: var(--zk-brand-600);
}

.zk-datepicker-day.zk-outside {
    color: var(--zk-fg-quaternary);
}

.zk-datepicker-day:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* ─── Number Input ─── */
.zk-number-input {
    display: flex;
    align-items: center;
}

.zk-number-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--zk-border-primary);
    background: var(--zk-bg-secondary);
    color: var(--zk-fg-secondary);
    cursor: pointer;
    transition: background 100ms;
}

.zk-number-btn:hover {
    background: var(--zk-bg-tertiary);
    color: var(--zk-fg-primary);
}

.zk-number-dec {
    border-radius: var(--zk-radius-lg) 0 0 var(--zk-radius-lg);
    border-right: none;
}

.zk-number-inc {
    border-radius: 0 var(--zk-radius-lg) var(--zk-radius-lg) 0;
    border-left: none;
}

.zk-number-field {
    border-radius: 0;
    text-align: center;
    -moz-appearance: textfield;
    max-width: 5rem;
}

.zk-number-field::-webkit-inner-spin-button,
.zk-number-field::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
}

/* ─── Combobox ─── */
.zk-combobox {
    position: relative;
}

.zk-combobox-search {
    padding-right: 2.5rem;
}

.zk-combobox-arrow {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--zk-fg-tertiary);
    pointer-events: none;
}

.zk-combobox-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: var(--zk-z-dropdown);
    background: var(--zk-bg-primary);
    border: 1px solid var(--zk-border-primary);
    border-radius: var(--zk-radius-xl);
    box-shadow: var(--zk-shadow-lg);
    max-height: 16rem;
    overflow-y: auto;
    animation: zk-scale-in 100ms;
}

.zk-combobox-option {
    display: flex;
    align-items: center;
    gap: var(--zk-space-2);
    padding: var(--zk-space-2) var(--zk-space-3);
    font-size: var(--zk-text-sm);
    cursor: pointer;
    transition: background 80ms;
}

.zk-combobox-option:hover,
.zk-combobox-option.zk-active {
    background: var(--zk-bg-secondary);
}

.zk-combobox-option.zk-selected {
    color: var(--zk-brand-600);
    font-weight: var(--zk-weight-medium);
}

.zk-combobox-check {
    display: none;
    color: var(--zk-brand-600);
}

.zk-combobox-option.zk-selected .zk-combobox-check {
    display: flex;
}

.zk-combobox-desc {
    font-size: var(--zk-text-xs);
    color: var(--zk-fg-quaternary);
    margin-left: auto;
}

.zk-combobox-empty {
    padding: var(--zk-space-4);
    text-align: center;
    font-size: var(--zk-text-sm);
    color: var(--zk-fg-tertiary);
}

/* ─── Pagination ─── */
.zk-pagination {
    display: flex;
    align-items: center;
    gap: var(--zk-space-1);
}

.zk-pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 var(--zk-space-2);
    border-radius: var(--zk-radius-md);
    font-size: var(--zk-text-sm);
    font-weight: var(--zk-weight-medium);
    color: var(--zk-fg-secondary);
    transition: background 100ms;
    border: none;
    background: none;
    cursor: pointer;
    text-decoration: none;
}

.zk-pagination-btn:hover {
    background: var(--zk-bg-secondary);
    color: var(--zk-fg-primary);
}

.zk-pagination-btn.zk-active {
    background: var(--zk-brand-600);
    color: #fff;
}

.zk-pagination-btn.zk-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.zk-pagination-ellipsis {
    display: flex;
    align-items: center;
    padding: 0 var(--zk-space-1);
    color: var(--zk-fg-quaternary);
    font-size: var(--zk-text-sm);
}

/* ─── Avatar Group ─── */
.zk-avatar-group {
    display: flex;
    align-items: center;
}

.zk-avatar-stack {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--zk-avatar-size, 2.25rem);
    height: var(--zk-avatar-size, 2.25rem);
    border-radius: 50%;
    border: 2px solid var(--zk-bg-primary);
    margin-left: -0.5rem;
    background: var(--zk-gray-200);
    overflow: hidden;
    flex-shrink: 0;
}

.zk-avatar-stack:first-child {
    margin-left: 0;
}

.zk-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.zk-avatar-initials {
    font-size: 0.65em;
    font-weight: var(--zk-weight-semibold);
    color: var(--zk-fg-secondary);
}

.zk-avatar-overflow {
    background: var(--zk-brand-100);
}

.zk-avatar-overflow .zk-avatar-initials {
    color: var(--zk-brand-700);
    font-size: 0.6em;
}

/* ─── Command Palette Extensions ─── */
.zk-cmd-dialog {
    width: 100%;
    max-width: 34rem;
    background: var(--zk-bg-primary);
    border: 1px solid var(--zk-border-primary);
    border-radius: var(--zk-radius-2xl);
    box-shadow: var(--zk-shadow-xl);
    overflow: hidden;
    animation: zk-scale-in 150ms;
}

.zk-cmd-search-icon {
    color: var(--zk-fg-tertiary);
    flex-shrink: 0;
}

.zk-kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 6px;
    font-size: var(--zk-text-xs);
    font-family: var(--zk-font-mono);
    font-weight: var(--zk-weight-medium);
    background: var(--zk-bg-tertiary);
    border: 1px solid var(--zk-border-primary);
    border-radius: var(--zk-radius-sm);
    color: var(--zk-fg-tertiary);
    line-height: 1.4;
}

.zk-cmd-empty {
    padding: var(--zk-space-8);
    text-align: center;
    color: var(--zk-fg-tertiary);
    font-size: var(--zk-text-sm);
}

/* ─── Notification Bell ─── */
.zk-notif-wrapper {
    position: relative;
}

.zk-notif-trigger {
    position: relative;
}

.zk-notif-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 10px;
    font-weight: var(--zk-weight-bold);
    line-height: 16px;
    text-align: center;
    background: var(--zk-error-600);
    color: #fff;
    border-radius: var(--zk-radius-full);
}

.zk-notif-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 22rem;
    max-height: 24rem;
    background: var(--zk-bg-primary);
    border: 1px solid var(--zk-border-primary);
    border-radius: var(--zk-radius-xl);
    box-shadow: var(--zk-shadow-lg);
    overflow: hidden;
    animation: zk-scale-in 100ms;
    z-index: var(--zk-z-dropdown);
}

.zk-notif-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--zk-space-3) var(--zk-space-4);
    border-bottom: 1px solid var(--zk-border-secondary);
}

.zk-notif-list {
    overflow-y: auto;
    max-height: 18rem;
}

.zk-notif-item {
    display: flex;
    gap: var(--zk-space-3);
    padding: var(--zk-space-3) var(--zk-space-4);
    transition: background 80ms;
}

.zk-notif-item:hover {
    background: var(--zk-bg-secondary);
}

.zk-notif-unread {
    background: var(--zk-brand-50);
}

.zk-notif-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--zk-brand-500);
    flex-shrink: 0;
    margin-top: 6px;
}

.zk-notif-item:not(.zk-notif-unread) .zk-notif-dot {
    background: transparent;
}

.zk-notif-text {
    font-size: var(--zk-text-sm);
    line-height: 1.4;
}

.zk-notif-time {
    font-size: var(--zk-text-xs);
    color: var(--zk-fg-quaternary);
}

.zk-notif-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--zk-space-2);
    padding: var(--zk-space-8);
}

/* ─── Sidebar ─── */
.zk-sidebar {
    width: 16rem;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    background: var(--zk-bg-primary);
    border-right: 1px solid var(--zk-border-primary);
    display: flex;
    flex-direction: column;
    z-index: var(--zk-z-sticky);
    transition: width 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.zk-sidebar-collapsed {
    width: 4rem;
}

.zk-sidebar-brand {
    display: flex;
    align-items: center;
    gap: var(--zk-space-3);
    padding: var(--zk-space-4);
    border-bottom: 1px solid var(--zk-border-secondary);
    min-height: 3.5rem;
}

.zk-sidebar-brand-text {
    font-weight: var(--zk-weight-bold);
    font-size: var(--zk-text-md);
    white-space: nowrap;
    overflow: hidden;
}

.zk-sidebar-collapsed .zk-sidebar-brand-text {
    display: none;
}

.zk-sidebar-toggle {
    margin-left: auto;
}

.zk-sidebar-collapsed .zk-sidebar-toggle {
    margin: auto;
}

.zk-sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: var(--zk-space-2);
}

.zk-sidebar-section-title {
    padding: var(--zk-space-3) var(--zk-space-3) var(--zk-space-1);
    font-size: var(--zk-text-xs);
    font-weight: var(--zk-weight-semibold);
    color: var(--zk-fg-quaternary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.zk-sidebar-collapsed .zk-sidebar-section-title {
    display: none;
}

.zk-sidebar-item {
    display: flex;
    align-items: center;
    gap: var(--zk-space-3);
    padding: var(--zk-space-2) var(--zk-space-3);
    border-radius: var(--zk-radius-lg);
    font-size: var(--zk-text-sm);
    color: var(--zk-fg-secondary);
    transition: background 80ms, color 80ms;
    text-decoration: none;
}

.zk-sidebar-item:hover {
    background: var(--zk-bg-secondary);
    color: var(--zk-fg-primary);
}

.zk-sidebar-item.zk-active {
    background: var(--zk-brand-50);
    color: var(--zk-brand-700);
    font-weight: var(--zk-weight-medium);
}

.zk-sidebar-collapsed .zk-sidebar-label {
    display: none;
}

.zk-sidebar-icon {
    flex-shrink: 0;
    display: flex;
}

/* ─── Loading States ─── */
.zk-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
}

[data-theme="dark"] .zk-loading-overlay {
    background: rgba(0, 0, 0, 0.8);
}

.zk-loading-content {
    text-align: center;
}

.zk-spinner {
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid var(--zk-gray-200);
    border-top-color: var(--zk-brand-600);
    border-radius: 50%;
    animation: zk-spin 0.6s linear infinite;
    margin: auto;
}

@keyframes zk-spin {
    to {
        transform: rotate(360deg);
    }
}

.zk-loading-bar {
    width: 100%;
    height: 3px;
    background: var(--zk-gray-200);
    border-radius: 2px;
    overflow: hidden;
}

.zk-loading-bar-fill {
    height: 100%;
    background: var(--zk-brand-600);
    border-radius: 2px;
    transition: width 300ms;
}

.zk-loading-dots {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
}

.zk-loading-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--zk-brand-500);
    animation: zk-bounce-dots 1.4s ease-in-out infinite;
}

.zk-loading-dots span:nth-child(2) {
    animation-delay: 0.16s;
}

.zk-loading-dots span:nth-child(3) {
    animation-delay: 0.32s;
}

@keyframes zk-bounce-dots {

    0%,
    80%,
    100% {
        transform: scale(0.6);
        opacity: 0.5;
    }

    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ─── Stat Card ─── */
.zk-stat-card {
    background: var(--zk-bg-primary);
    border: 1px solid var(--zk-border-primary);
    border-radius: var(--zk-radius-xl);
    padding: var(--zk-space-5);
    box-shadow: var(--zk-shadow-sm);
}

.zk-stat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--zk-space-2);
}

.zk-stat-label {
    font-size: var(--zk-text-sm);
    color: var(--zk-fg-tertiary);
}

.zk-stat-icon {
    display: flex;
    padding: var(--zk-space-2);
    border-radius: var(--zk-radius-lg);
}

.zk-stat-icon-brand {
    background: var(--zk-brand-50);
    color: var(--zk-brand-600);
}

.zk-stat-icon-success {
    background: var(--zk-success-50);
    color: var(--zk-success-600);
}

.zk-stat-icon-warning {
    background: var(--zk-warning-50);
    color: var(--zk-warning-600);
}

.zk-stat-icon-error {
    background: var(--zk-error-50);
    color: var(--zk-error-600);
}

.zk-stat-value {
    font-size: var(--zk-text-2xl);
    font-weight: var(--zk-weight-bold);
    line-height: 1.2;
}

.zk-stat-change {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--zk-text-sm);
    font-weight: var(--zk-weight-medium);
    margin-top: var(--zk-space-1);
}

.zk-stat-up {
    color: var(--zk-success-600);
}

.zk-stat-down {
    color: var(--zk-error-600);
}

.zk-stat-flat {
    color: var(--zk-fg-tertiary);
}

/* ─── Code Block ─── */
.zk-code-block {
    border: 1px solid var(--zk-border-primary);
    border-radius: var(--zk-radius-xl);
    overflow: hidden;
}

.zk-code-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--zk-space-2) var(--zk-space-4);
    background: var(--zk-bg-secondary);
    border-bottom: 1px solid var(--zk-border-secondary);
}

.zk-code-lang {
    font-size: var(--zk-text-xs);
    font-weight: var(--zk-weight-medium);
    color: var(--zk-fg-tertiary);
}

.zk-code-body {
    display: flex;
    overflow-x: auto;
}

.zk-code-lines {
    display: flex;
    flex-direction: column;
    padding: var(--zk-space-4) 0;
    padding-left: var(--zk-space-4);
    padding-right: var(--zk-space-3);
    background: var(--zk-bg-secondary);
    border-right: 1px solid var(--zk-border-secondary);
    user-select: none;
    text-align: right;
}

.zk-code-lines span {
    font-size: var(--zk-text-xs);
    font-family: var(--zk-font-mono);
    line-height: 1.7;
    color: var(--zk-fg-quaternary);
}

.zk-code-pre {
    flex: 1;
    margin: 0;
    padding: var(--zk-space-4);
    overflow-x: auto;
    background: var(--zk-bg-primary);
}

.zk-code {
    font-family: var(--zk-font-mono);
    font-size: var(--zk-text-sm);
    line-height: 1.7;
    white-space: pre;
}

.zk-inline-code {
    font-family: var(--zk-font-mono);
    font-size: 0.875em;
    padding: 2px 6px;
    background: var(--zk-bg-tertiary);
    border-radius: var(--zk-radius-sm);
    color: var(--zk-error-600);
}

/* ============================================================================
   PHASE 13 — COMPONENT ARSENAL
   ============================================================================ */

/* ─── Carousel ─── */
.zk-carousel {
    position: relative;
    overflow: hidden;
    border-radius: var(--zk-radius-xl);
}

.zk-carousel-track {
    display: flex;
    transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.zk-carousel-slide {
    min-width: 100%;
    position: relative;
}

.zk-carousel-slide:not(.zk-active) {
    opacity: 0;
}

.zk-carousel-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.zk-carousel-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--zk-space-6);
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
    color: #fff;
}

.zk-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--zk-shadow-md);
    transition: transform 100ms;
}

.zk-carousel-arrow:hover {
    transform: translateY(-50%) scale(1.1);
}

.zk-carousel-prev {
    left: var(--zk-space-3);
}

.zk-carousel-next {
    right: var(--zk-space-3);
}

.zk-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: var(--zk-space-3);
}

.zk-carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: var(--zk-gray-300);
    cursor: pointer;
    transition: background 150ms, transform 150ms;
    padding: 0;
}

.zk-carousel-dot.zk-active {
    background: var(--zk-brand-600);
    transform: scale(1.3);
}

/* ─── Select ─── */
.zk-select-native {
    position: relative;
}

.zk-select-native select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.5rem;
    cursor: pointer;
}

.zk-select-chevron {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--zk-fg-tertiary);
}

/* ─── Textarea ─── */
.zk-textarea {
    resize: vertical;
    font-family: inherit;
}

.zk-textarea-auto {
    resize: none;
    overflow: hidden;
}

.zk-textarea-counter {
    text-align: right;
    font-size: var(--zk-text-xs);
    color: var(--zk-fg-quaternary);
    margin-top: var(--zk-space-1);
}

/* ─── Checkbox ─── */
.zk-checkbox {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.zk-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: var(--zk-space-2);
    cursor: pointer;
    font-size: var(--zk-text-sm);
}

.zk-checkbox-label.zk-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.zk-checkbox-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    border: 1.5px solid var(--zk-gray-400);
    border-radius: var(--zk-radius-sm);
    flex-shrink: 0;
    margin-top: 1px;
    transition: background 100ms, border-color 100ms;
}

.zk-checkbox:checked+.zk-checkbox-box {
    background: var(--zk-brand-600);
    border-color: var(--zk-brand-600);
}

.zk-checkbox-check {
    display: none;
    color: #fff;
}

.zk-checkbox:checked+.zk-checkbox-box .zk-checkbox-check {
    display: block;
}

.zk-checkbox-indeterminate {
    display: none;
    color: #fff;
}

.zk-checkbox[data-indeterminate="true"]+.zk-checkbox-box {
    background: var(--zk-brand-600);
    border-color: var(--zk-brand-600);
}

.zk-checkbox[data-indeterminate="true"]+.zk-checkbox-box .zk-checkbox-indeterminate {
    display: block;
}

.zk-checkbox[data-indeterminate="true"]+.zk-checkbox-box .zk-checkbox-check {
    display: none;
}

.zk-checkbox-text {
    display: flex;
    flex-direction: column;
}

.zk-checkbox-title {
    font-weight: var(--zk-weight-medium);
}

.zk-checkbox-desc {
    font-size: var(--zk-text-xs);
    color: var(--zk-fg-tertiary);
    margin-top: 1px;
}

.zk-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: var(--zk-space-3);
}

.zk-checkbox-horizontal {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--zk-space-4);
}

/* ─── Color Picker ─── */
.zk-color-row {
    display: flex;
    align-items: center;
    gap: var(--zk-space-2);
}

.zk-color-swatch {
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--zk-border-primary);
    border-radius: var(--zk-radius-lg);
    cursor: pointer;
    padding: 0;
}

.zk-color-hex {
    max-width: 6rem;
    font-family: var(--zk-font-mono);
}

.zk-color-presets {
    display: flex;
    gap: 6px;
    margin-top: var(--zk-space-2);
    flex-wrap: wrap;
}

.zk-color-preset {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--zk-radius-md);
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 100ms;
    padding: 0;
}

.zk-color-preset:hover {
    transform: scale(1.2);
    border-color: var(--zk-border-primary);
}

/* ─── Tree View ─── */
.zk-tree {
    font-size: var(--zk-text-sm);
}

.zk-tree-row {
    display: flex;
    align-items: center;
    gap: var(--zk-space-1);
    padding: 2px var(--zk-space-2);
    border-radius: var(--zk-radius-md);
    cursor: pointer;
    transition: background 80ms;
}

.zk-tree-row:hover {
    background: var(--zk-bg-secondary);
}

.zk-tree-chevron {
    display: flex;
    transition: transform 150ms;
}

.zk-tree-item[aria-expanded="false"] .zk-tree-chevron {
    transform: rotate(0deg);
}

.zk-tree-item[aria-expanded="true"] .zk-tree-chevron {
    transform: rotate(90deg);
}

.zk-tree-item[aria-expanded="false"]>.zk-tree-children {
    display: none;
}

.zk-tree-label {
    flex: 1;
}

.zk-tree-icon {
    display: flex;
    color: var(--zk-fg-tertiary);
}

/* ─── Data Grid ─── */
.zk-data-grid-toolbar {
    padding: var(--zk-space-3);
    border-bottom: 1px solid var(--zk-border-secondary);
}

.zk-sortable {
    cursor: pointer;
    user-select: none;
}

.zk-sortable:hover {
    background: var(--zk-bg-secondary);
}

.zk-sort-icon {
    margin-left: var(--zk-space-1);
    opacity: 0.4;
    font-size: var(--zk-text-xs);
}

.zk-sort-asc .zk-sort-icon::after {
    content: "↑";
}

.zk-sort-desc .zk-sort-icon::after {
    content: "↓";
}

/* ─── Range Slider ─── */
.zk-range-track {
    position: relative;
    padding: var(--zk-space-2) 0;
}

.zk-range {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: var(--zk-gray-200);
    border-radius: 2px;
    outline: none;
}

.zk-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    background: var(--zk-brand-600);
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: var(--zk-shadow-sm);
}

.zk-range::-moz-range-thumb {
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    background: var(--zk-brand-600);
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: var(--zk-shadow-sm);
}

.zk-range-second {
    position: absolute;
    top: var(--zk-space-2);
    left: 0;
    background: transparent;
    pointer-events: none;
}

.zk-range-second::-webkit-slider-thumb {
    pointer-events: all;
}

.zk-range-marks {
    display: flex;
    justify-content: space-between;
    padding-top: var(--zk-space-1);
}

.zk-range-mark {
    font-size: var(--zk-text-xs);
    color: var(--zk-fg-quaternary);
    position: absolute;
    transform: translateX(-50%);
}

/* ─── Popover ─── */
.zk-popover-wrapper {
    position: relative;
    display: inline-flex;
}

.zk-popover {
    position: absolute;
    z-index: var(--zk-z-dropdown);
    background: var(--zk-bg-primary);
    border: 1px solid var(--zk-border-primary);
    border-radius: var(--zk-radius-xl);
    box-shadow: var(--zk-shadow-lg);
    padding: var(--zk-space-4);
    min-width: 12rem;
    animation: zk-scale-in 100ms;
}

.zk-popover-bottom {
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
}

.zk-popover-top {
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
}

.zk-popover-left {
    right: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
}

.zk-popover-right {
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
}

.zk-popover-arrow {
    display: none;
}

/* ─── Sheet / Slideout ─── */
.zk-sheet-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    animation: zk-fade-in 150ms;
}

.zk-sheet {
    position: fixed;
    background: var(--zk-bg-primary);
    display: flex;
    flex-direction: column;
    box-shadow: var(--zk-shadow-xl);
}

.zk-sheet-right {
    top: 0;
    right: 0;
    height: 100vh;
    width: var(--zk-sheet-size, 28rem);
    max-width: 90vw;
    animation: zk-slide-right 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.zk-sheet-left {
    top: 0;
    left: 0;
    height: 100vh;
    width: var(--zk-sheet-size, 28rem);
    max-width: 90vw;
    animation: zk-slide-left 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.zk-sheet-bottom {
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--zk-sheet-size, 28rem);
    max-height: 90vh;
    animation: zk-slide-in-up 200ms cubic-bezier(0.22, 1, 0.36, 1);
    border-radius: var(--zk-radius-2xl) var(--zk-radius-2xl) 0 0;
}

.zk-sheet-top {
    top: 0;
    left: 0;
    right: 0;
    height: var(--zk-sheet-size, 28rem);
    max-height: 90vh;
    animation: zk-slide-in-down 200ms cubic-bezier(0.22, 1, 0.36, 1);
    border-radius: 0 0 var(--zk-radius-2xl) var(--zk-radius-2xl);
}

@keyframes zk-slide-right {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes zk-slide-left {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}

.zk-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--zk-space-4) var(--zk-space-5);
    border-bottom: 1px solid var(--zk-border-secondary);
}

.zk-sheet-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--zk-space-5);
}

/* ─── Rich Text Editor ─── */
.zk-rte-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: var(--zk-space-2);
    border: 1px solid var(--zk-border-primary);
    border-bottom: none;
    border-radius: var(--zk-radius-lg) var(--zk-radius-lg) 0 0;
    background: var(--zk-bg-secondary);
}

.zk-rte-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    background: none;
    border-radius: var(--zk-radius-md);
    cursor: pointer;
    font-size: var(--zk-text-sm);
    color: var(--zk-fg-secondary);
    transition: background 80ms;
}

.zk-rte-btn:hover {
    background: var(--zk-bg-tertiary);
}

.zk-rte-sep {
    width: 1px;
    height: 1.25rem;
    background: var(--zk-border-secondary);
    margin: 0 var(--zk-space-1);
}

.zk-rte-editor {
    border: 1px solid var(--zk-border-primary);
    border-radius: 0 0 var(--zk-radius-lg) var(--zk-radius-lg);
    padding: var(--zk-space-3);
    font-size: var(--zk-text-sm);
    line-height: 1.6;
    outline: none;
}

.zk-rte-editor:focus {
    border-color: var(--zk-brand-500);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.zk-rte-editor:empty::before {
    content: attr(data-placeholder);
    color: var(--zk-fg-quaternary);
}

.zk-rich-text .zk-rte-toolbar+.zk-rte-editor {
    border-top: 1px solid var(--zk-border-primary);
}

/* ─── Rating ─── */
.zk-rating-stars {
    display: flex;
    align-items: center;
    gap: 2px;
}

.zk-star {
    border: none;
    background: none;
    padding: 2px;
    cursor: pointer;
    color: var(--zk-gray-300);
    transition: color 100ms, transform 100ms;
    display: flex;
}

.zk-star:hover {
    transform: scale(1.15);
}

.zk-star-filled {
    color: var(--zk-warning-500);
}

.zk-star-readonly {
    cursor: default;
    pointer-events: none;
}

.zk-rating-value {
    margin-left: var(--zk-space-2);
}

/* ─── Progress Circle ─── */
.zk-progress-circle {
    position: relative;
    display: inline-flex;
}

.zk-progress-ring {
    transition: stroke-dashoffset 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.zk-progress-circle-value {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* ─── Empty State ─── */
.zk-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.zk-empty-icon {
    color: var(--zk-fg-quaternary);
    opacity: 0.6;
}

/* ─── Dock: Unique Sub-Components ─── */
.zk-dock-badge {
    position: absolute;
    top: -2px;
    right: 2px;
    min-width: 14px;
    height: 14px;
    font-size: 9px;
    line-height: 14px;
    text-align: center;
    background: var(--zk-error-600);
    color: var(--zk-white, #fff);
    border-radius: var(--zk-radius-full);
    padding: 0 3px;
}

.zk-dock-sep {
    width: 1px;
    height: 2rem;
    background: var(--zk-border-secondary);
    margin: 0 var(--zk-space-1);
}

.zk-dock-initial {
    font-weight: var(--zk-weight-bold);
    font-size: var(--zk-text-sm);
}

/* ─── Additional Animations ─── */
@keyframes zk-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ============================================================================
   PHASE 16 — DX & Enterprise Components
   ============================================================================ */

/* ─── Button Group ─── */
.zk-btn-group {
    display: inline-flex;
}

.zk-btn-group-connected .zk-btn {
    border-radius: 0;
    margin-left: -1px;
}

.zk-btn-group-connected .zk-btn:first-child {
    border-radius: var(--zk-radius) 0 0 var(--zk-radius);
    margin-left: 0;
}

.zk-btn-group-connected .zk-btn:last-child {
    border-radius: 0 var(--zk-radius) var(--zk-radius) 0;
}

.zk-btn-group .zk-btn.zk-active {
    background: var(--zk-brand-600);
    color: #fff;
    border-color: var(--zk-brand-600);
    z-index: 1;
    position: relative;
}

/* ─── Progress Bar ─── */
.zk-progress {
    width: 100%;
}

.zk-progress-track {
    background: var(--zk-bg-tertiary);
    border-radius: 99px;
    overflow: hidden;
}

.zk-progress-fill {
    height: 100%;
    border-radius: 99px;
    transition: width 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.zk-progress-striped {
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-size: 1rem 1rem;
    animation: zk-progress-stripe 1s linear infinite;
}

@keyframes zk-progress-stripe {
    from {
        background-position: 1rem 0;
    }

    to {
        background-position: 0 0;
    }
}

.zk-progress-indeterminate {
    width: 30% !important;
    animation: zk-progress-slide 1.5s ease-in-out infinite;
}

@keyframes zk-progress-slide {
    0% {
        margin-left: 0;
    }

    50% {
        margin-left: 70%;
    }

    100% {
        margin-left: 0;
    }
}

/* ─── Context Menu ─── */
.zk-context-menu {
    position: fixed;
    z-index: 9999;
    background: var(--zk-bg-primary);
    border: 1px solid var(--zk-border-secondary);
    border-radius: var(--zk-radius-lg);
    padding: var(--zk-space-1) 0;
    min-width: 12rem;
    box-shadow: var(--zk-shadow-lg);
}

.zk-context-item {
    display: flex;
    align-items: center;
    gap: var(--zk-space-2);
    width: 100%;
    padding: var(--zk-space-2) var(--zk-space-3);
    border: none;
    background: none;
    cursor: pointer;
    font: var(--zk-text-sm)/1.4 var(--zk-font-sans);
    color: var(--zk-fg-primary);
    text-align: left;
}

.zk-context-item:hover {
    background: var(--zk-bg-secondary);
}

.zk-context-item:focus-visible {
    background: var(--zk-bg-secondary);
    outline: 2px solid var(--zk-brand-500);
    outline-offset: -2px;
}

.zk-context-item.zk-danger {
    color: var(--zk-error-600);
}

.zk-context-item.zk-danger:hover {
    background: var(--zk-error-50);
}

.zk-context-sep {
    height: 1px;
    background: var(--zk-border-secondary);
    margin: var(--zk-space-1) 0;
}

.zk-context-icon {
    width: 16px;
    flex-shrink: 0;
    opacity: 0.7;
}

.zk-context-shortcut {
    margin-left: auto;
    font-size: var(--zk-text-xs);
    color: var(--zk-fg-quaternary);
}

.zk-context-arrow {
    margin-left: auto;
    opacity: 0.5;
}

/* ─── Navbar Extensions ─── */
.zk-navbar-sticky {
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(12px);
    background: color-mix(in srgb, var(--zk-bg-primary) 85%, transparent);
}

.zk-navbar-inner {
    display: flex;
    align-items: center;
    gap: var(--zk-space-4);
    max-width: 80rem;
    margin: 0 auto;
    padding: var(--zk-space-3) var(--zk-space-5);
}

.zk-navbar-brand {
    display: flex;
    align-items: center;
    gap: var(--zk-space-2);
}

.zk-navbar-logo {
    font-weight: var(--zk-weight-bold);
    font-size: var(--zk-text-lg);
    color: var(--zk-fg-primary);
    text-decoration: none;
}

.zk-navbar-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--zk-fg-secondary);
    cursor: pointer;
    padding: var(--zk-space-1);
}

.zk-navbar-nav {
    display: flex;
    align-items: center;
    gap: var(--zk-space-1);
}

.zk-navbar-link {
    font-size: var(--zk-text-sm);
    font-weight: var(--zk-weight-medium);
    color: var(--zk-fg-tertiary);
    text-decoration: none;
    padding: var(--zk-space-2) var(--zk-space-3);
    border-radius: var(--zk-radius);
    transition: all 120ms;
}

.zk-navbar-link:hover {
    color: var(--zk-fg-primary);
    background: var(--zk-bg-secondary);
}

.zk-navbar-link.zk-active {
    color: var(--zk-brand-600);
    background: var(--zk-brand-50);
}

.zk-navbar-actions {
    display: flex;
    align-items: center;
    gap: var(--zk-space-2);
    margin-left: auto;
}

@media (max-width: 768px) {
    .zk-navbar-toggle {
        display: block;
    }

    .zk-navbar-nav,
    .zk-navbar-actions {
        display: none;
    }

    .zk-navbar-open .zk-navbar-nav,
    .zk-navbar-open .zk-navbar-actions {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .zk-navbar-inner {
        flex-wrap: wrap;
    }

    .zk-navbar-brand {
        width: 100%;
        justify-content: space-between;
    }
}

/* ─── Avatar ─── */
.zk-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--zk-brand-100);
    color: var(--zk-brand-700);
    border-radius: 50%;
    overflow: hidden;
}

.zk-avatar-square {
    border-radius: var(--zk-radius-lg);
}

.zk-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.zk-avatar-initials {
    font-weight: var(--zk-weight-semibold);
    line-height: 1;
    user-select: none;
}

.zk-avatar-status {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 25%;
    height: 25%;
    min-width: 8px;
    min-height: 8px;
    border-radius: 50%;
    border: 2px solid var(--zk-bg-primary);
}

.zk-avatar-online {
    background: var(--zk-success-500);
}

.zk-avatar-offline {
    background: var(--zk-gray-400);
}

.zk-avatar-busy {
    background: var(--zk-error-500);
}

.zk-avatar-away {
    background: var(--zk-warning-500);
}

/* ─── Badge Status ─── */
.zk-badge-status {
    display: inline-flex;
    align-items: center;
    gap: var(--zk-space-2);
}

.zk-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.zk-status-pulse {
    animation: zk-status-blink 2s ease-in-out infinite;
}

@keyframes zk-status-blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

.zk-status-label {
    font-size: var(--zk-text-xs);
    color: var(--zk-fg-tertiary);
}

/* ─── Form Validation ─── */
.zk-field-error .zk-input,
.zk-field-error .zk-textarea {
    border-color: var(--zk-error-500);
}

.zk-field-error .zk-input:focus,
.zk-field-error .zk-textarea:focus {
    box-shadow: 0 0 0 3px var(--zk-error-100);
}

.zk-field-success .zk-input,
.zk-field-success .zk-textarea {
    border-color: var(--zk-success-500);
}

.zk-field-success .zk-input:focus,
.zk-field-success .zk-textarea:focus {
    box-shadow: 0 0 0 3px var(--zk-success-100);
}

.zk-field-msg {
    font-size: var(--zk-text-xs);
    margin-top: var(--zk-space-1);
}

.zk-field-msg-error {
    color: var(--zk-error-600);
}

.zk-field-msg-success {
    color: var(--zk-success-600);
}

/* ─── Drag Handle ─── */
.zk-draggable {
    cursor: grab;
}

.zk-draggable:active {
    cursor: grabbing;
}

.zk-drag-over {
    outline: 2px dashed var(--zk-brand-400);
    outline-offset: -2px;
    border-radius: var(--zk-radius-lg);
}

.zk-drag-ghost {
    opacity: 0.5;
}

/* ============================================================================
   8. PRINT
   ============================================================================ */

@media print {

    .zk-dock-wrapper,
    .zk-toast-container,
    .zk-modal-overlay,
    .zk-navbar {
        display: none !important;
    }

    body {
        background: white;
        color: black;
        font-size: 12pt;
    }

    .zk-card {
        box-shadow: none;
        border: 1px solid #ccc;
    }
}

/* ============================================================================
   v1.1: NPROGRESS NAVIGATION LOADER
   GPU-accelerated topbar loading bar — GitHub/YouTube style
   ============================================================================ */
.zk-nprogress {
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    height: 3px;
    opacity: 0;
    transition: opacity 300ms ease;
}

.zk-nprogress.zk-active {
    opacity: 1;
}

.zk-nprogress-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--brand-yellow, var(--zk-brand-500, #eab308));
    transform: translate3d(-100%, 0, 0);
    will-change: transform;
}

.zk-nprogress-peg {
    position: absolute;
    right: 0;
    top: 0;
    width: 100px;
    height: 100%;
    box-shadow:
        0 0 10px var(--brand-yellow, var(--zk-brand-500, #eab308)),
        0 0 5px var(--brand-yellow, var(--zk-brand-500, #eab308));
    opacity: 1;
    transform: rotate(3deg) translate(0px, -4px);
}

/* ============================================================================
   v1.2: Enterprise UX Components
   ============================================================================ */

/* ── Breadcrumb ── */
.zk-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: var(--zk-neutral-500);
}

.zk-breadcrumb-sep {
    opacity: 0.4;
    font-size: 0.7rem;
}

.zk-breadcrumb-current {
    color: var(--zk-neutral-700);
    font-weight: 500;
}

[data-theme="dark"] .zk-breadcrumb-current {
    color: var(--zk-neutral-300);
}

/* ── Sortable Table Headers ── */
th[data-sort] {
    cursor: pointer;
    user-select: none;
    transition: color 0.15s ease;
}

th[data-sort]:hover {
    color: var(--zk-brand-500);
}

th[data-sort][data-sort-dir] {
    color: var(--zk-brand-600);
}

/* ── Dock Badge ── */
.zk-dock-badge {
    position: absolute;
    top: -2px;
    right: -4px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    background: #ef4444;
    color: #fff;
    font-size: 0.5rem;
    font-weight: 700;
    border-radius: 7px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── HTMX Content Transition ── */
@keyframes zkFadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.zk-htmx-swap {
    animation: zkFadeSlideIn 0.25s ease-out;
}

.htmx-swapping {
    opacity: 0;
    transition: opacity 0.15s ease-out;
}

/* ============================================================================
   26. NAVBAR UNITY PROTOCOL — Porsche-level status bar components
   ============================================================================ */

/* ── Status Bar ── */
.zk-status-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.25rem;
    background: var(--bg-secondary, #fff);
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    z-index: 100;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

[data-theme="dark"] .zk-status-bar {
    background: rgba(15, 23, 42, 0.94);
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

/* ── Brand ── */
.zk-status-bar-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: -0.01em;
}

.zk-status-bar-brand svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.zk-status-bar-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* ── Visual Separator ── */
.zk-bar-sep {
    width: 1px;
    height: 20px;
    background: var(--border-color);
    margin: 0 0.35rem;
    opacity: 0.6;
}

/* ── Greeting ── */
.zk-greeting {
    font-size: 0.68rem;
    color: var(--text-muted);
    font-weight: 400;
    white-space: nowrap;
}

.zk-greeting strong {
    color: var(--text-secondary);
    font-weight: 600;
}

/* ── Inline Search ── */
.zk-search-trigger {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.6rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.68rem;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.zk-search-trigger:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-hover);
    color: var(--text-secondary);
}

.zk-search-trigger svg {
    width: 13px;
    height: 13px;
    opacity: 0.5;
    flex-shrink: 0;
}

.zk-search-trigger kbd {
    font-size: 0.55rem;
    font-family: inherit;
    padding: 1px 4px;
    border-radius: 3px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    line-height: 1;
}

/* ── Status Bar Buttons ── */
.zk-status-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
}

.zk-status-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.zk-status-btn svg {
    width: 16px;
    height: 16px;
    pointer-events: none;
}

/* ── Premium Avatar ── */
.zk-avatar-wrap {
    position: relative;
    padding: 2px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #14b8a6, #eab308);
    cursor: pointer;
}

.zk-status-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1e293b, #334155);
    color: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 700;
    cursor: pointer;
    border: 2px solid var(--bg-secondary);
    transition: transform 0.15s ease;
}

.zk-avatar-wrap:hover .zk-status-avatar {
    transform: scale(1.05);
}

.zk-avatar-online {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    border: 2px solid var(--bg-secondary);
}

.zk-status-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 6px;
    height: 6px;
    background: #ef4444;
    border-radius: 50%;
}

/* ── Live Clock ── */
.zk-clock-wrap {
    position: relative;
}

.zk-clock-btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.6rem;
    border-radius: 8px;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.7rem;
    font-weight: 500;
    font-family: 'JetBrains Mono', 'SF Mono', monospace;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.zk-clock-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.zk-clock-btn svg {
    width: 14px;
    height: 14px;
    opacity: 0.6;
    flex-shrink: 0;
}

.zk-clock-time {
    font-weight: 600;
    letter-spacing: 0.02em;
}

.zk-clock-date {
    opacity: 0.7;
    font-weight: 400;
}

.zk-clock-sep {
    opacity: 0.3;
}

/* ── Calendar Popup ── */
.zk-cal-popup {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 6px;
    width: 300px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    z-index: 200;
    overflow: hidden;
}

.zk-cal-popup.open {
    display: block;
}

.zk-cal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0.85rem;
    border-bottom: 1px solid var(--border-color);
}

.zk-cal-month {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-primary);
}

.zk-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    padding: 0.5rem 0.65rem 0.65rem;
}

.zk-cal-dow {
    text-align: center;
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--text-muted);
    padding: 0.25rem 0;
    text-transform: uppercase;
}

.zk-cal-day {
    text-align: center;
    font-size: 0.72rem;
    padding: 0.35rem 0;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.1s;
    font-weight: 500;
}

.zk-cal-day:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.zk-cal-day.today {
    background: var(--brand-yellow, #eab308);
    color: #000;
    font-weight: 700;
    border-radius: 50%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zk-cal-day.other {
    opacity: 0.3;
}

/* ── Theme Transition ── */
body,
.zk-status-bar,
.zk-dock-wrapper,
.zk-dock,
.card,
.kpi-card,
.zk-panel,
.zk-cal-popup,
.zk-cmd-palette {
    transition: background-color 0.3s ease, color 0.25s ease, border-color 0.3s ease;
}

/* ── Navbar Responsive ── */
@media (max-width: 768px) {

    .zk-clock-date,
    .zk-clock-sep {
        display: none;
    }

    .zk-clock-btn {
        padding: 0.2rem 0.45rem;
    }

    .zk-greeting,
    .zk-search-trigger,
    .zk-bar-sep {
        display: none;
    }

    .zk-cal-popup {
        width: 280px;
        right: -40px;
    }
}

@media (max-width: 480px) {
    .zk-clock-btn span {
        display: none;
    }

    .zk-clock-btn {
        width: 32px;
        height: 32px;
        padding: 0;
        justify-content: center;
        border: none;
    }
}