/* VinTheme v3.0 - authoritative Microsoft Fluent 2 component layer */
.vt-fluent-app {
    min-height: 100vh;
    background: var(--vt-bg);
    color: var(--vt-text-1);
    font-family: var(--vt-font-primary);
    font-size: .875rem;
    line-height: 1.45;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

.vt-fluent-app :focus-visible {
    outline: 0;
    box-shadow: var(--vt-focus-ring) !important;
}

.vt-fluent-app ::selection {
    background: var(--vt-primary-200);
    color: var(--vt-text-1);
}

/* Chrome */
.vt-fluent-app .vt-header {
    z-index: 1030 !important;
    background: var(--vt-surface-1);
    border-bottom: 1px solid var(--vt-border);
    box-shadow: none;
    backdrop-filter: blur(20px) saturate(130%);
}

.vt-fluent-app .vt-header.is-scrolled { box-shadow: var(--vt-shadow-sm); }
.vt-fluent-app .vt-topbar { min-height: var(--vt-header-height); padding: .5rem 0; background: transparent; }
.vt-fluent-app .vt-brand {
    min-height: var(--vt-control-height-lg);
    gap: .75rem;
    color: var(--vt-text-1);
    font-family: var(--vt-font-display);
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -.015em;
}

.vt-fluent-app .vt-brand-logo {
    width: 32px;
    height: 32px;
    border-radius: var(--vt-radius-sm);
    background: var(--vt-primary);
    box-shadow: none;
}

.vt-fluent-app .vt-header-search .input-group {
    border: 1px solid var(--vt-border-strong);
    border-bottom-color: var(--vt-text-2);
    border-radius: var(--vt-radius-sm);
    background: var(--vt-surface-1);
    transition: border-color var(--vt-transition-fast), box-shadow var(--vt-transition-fast);
}

.vt-fluent-app .vt-header-search .input-group:focus-within {
    border-color: var(--vt-primary);
    border-bottom-width: 2px;
    box-shadow: var(--vt-focus-ring);
}

.vt-fluent-app .vt-header-search .form-control,
.vt-fluent-app .vt-header-search .btn {
    min-height: var(--vt-control-height-lg);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none !important;
}

.vt-fluent-app .vt-theme-toggle,
.vt-fluent-app .vt-sidebar-toggle,
.vt-fluent-app .navbar-toggler {
    width: var(--vt-control-height-lg);
    height: var(--vt-control-height-lg);
    min-width: var(--vt-control-height-lg);
    border: 1px solid transparent !important;
    border-radius: var(--vt-radius-sm);
    background: transparent !important;
    color: var(--vt-text-2);
}

.vt-fluent-app .vt-theme-toggle:hover,
.vt-fluent-app .vt-sidebar-toggle:hover,
.vt-fluent-app .navbar-toggler:hover {
    background: var(--vt-surface-hover) !important;
    color: var(--vt-text-1);
}

.vt-fluent-app .vt-account-chip,
.vt-fluent-app .vt-cart-btn {
    min-height: var(--vt-control-height-lg);
    padding: .25rem .625rem;
    border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius-sm);
    background: var(--vt-surface-1);
    box-shadow: none;
    font-weight: 500;
}

.vt-fluent-app .vt-account-chip:hover,
.vt-fluent-app .vt-cart-btn:hover {
    border-color: var(--vt-border-strong);
    background: var(--vt-surface-hover);
    color: var(--vt-text-1);
}

.vt-fluent-app .vt-account-chip__avatar { width: 28px; height: 28px; background: var(--vt-primary); font-size: .75rem; }
.vt-fluent-app .vt-cart-btn__count { min-width: 18px; height: 18px; background: var(--vt-primary); font-size: .6875rem; }
.vt-fluent-app .vt-navbar-menu { min-height: var(--vt-navbar-height); border-top: 1px solid var(--vt-border-light); background: var(--vt-surface-1); }
.vt-fluent-app .vt-nav-link {
    min-height: 36px;
    margin: 4px 2px;
    padding: .5rem .75rem !important;
    border-radius: var(--vt-radius-sm);
    color: var(--vt-text-2) !important;
    font-size: .875rem;
    font-weight: 500;
}

.vt-fluent-app .vt-nav-link:hover,
.vt-fluent-app .vt-nav-link:focus,
.vt-fluent-app .vt-nav-link.active,
.vt-fluent-app .vt-nav-item.active > .vt-nav-link,
.vt-fluent-app .vt-nav-link[aria-current="page"] { background: var(--vt-surface-selected); color: var(--vt-primary) !important; }
.vt-fluent-app .vt-nav-link::after,
.vt-fluent-app .vt-nav-link.active::after { display: none; }

.vt-fluent-app .dropdown-menu,
.vt-fluent-app .vt-fluent-menu {
    min-width: 220px;
    margin-top: 4px;
    padding: 4px;
    border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius);
    background: var(--vt-surface-1);
    box-shadow: var(--vt-shadow-xl);
}

.vt-fluent-app .dropdown-item {
    min-height: var(--vt-control-height);
    padding: .375rem .625rem;
    border-radius: var(--vt-radius-sm);
    color: var(--vt-text-1);
    font-size: .875rem;
}

.vt-fluent-app .dropdown-item:hover,
.vt-fluent-app .dropdown-item:focus,
.vt-fluent-app .dropdown-item[aria-current="page"] { background: var(--vt-surface-hover); color: var(--vt-text-1); }
.vt-fluent-app .vt-breadcrumb { padding: .625rem 0; background: var(--vt-bg); border-bottom: 1px solid var(--vt-border-light); }
.vt-fluent-app .vt-breadcrumb-nav,
.vt-fluent-app .breadcrumb { min-height: var(--vt-control-height); display: flex; align-items: center; }
.vt-fluent-app .breadcrumb { font-size: .8125rem; }
.vt-fluent-app .breadcrumb-item + .breadcrumb-item::before { content: "\203A"; padding: 0 .5rem; color: var(--vt-text-3); }
.vt-fluent-app .vt-main-body { min-height: 45vh; }

/* Client shell and navigation */
.vt-fluent-app .vt-client-shell {
    display: grid !important;
    grid-template-columns: var(--vt-sidebar-width) minmax(0, 1fr) !important;
    gap: var(--vt-space-6) !important;
    width: 100% !important;
}

.vt-fluent-app .vt-client-shell[data-collapsed="true"] { grid-template-columns: var(--vt-sidebar-width-collapsed) minmax(0, 1fr) !important; }
.vt-fluent-app .vt-sidebar {
    position: sticky !important;
    top: calc(var(--vt-header-height) + var(--vt-navbar-height) + var(--vt-space-4)) !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100vh - var(--vt-header-height) - var(--vt-navbar-height) - var(--vt-space-8));
    color: var(--vt-text-1);
}

.vt-fluent-app .vt-sidebar-card,
.vt-fluent-app .vt-fluent-nav-card {
    overflow: hidden;
    margin-bottom: var(--vt-space-3);
    border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius);
    background: var(--vt-surface-1);
    box-shadow: none;
}

.vt-fluent-app .vt-sidebar-card .card-header { padding: .75rem .75rem .5rem; border: 0; background: transparent; }
.vt-fluent-app .vt-sidebar-card .card-title { font-family: var(--vt-font-primary); font-size: .75rem; font-weight: 600; color: var(--vt-text-2); text-transform: none; }
.vt-fluent-app .vt-sidebar-card .list-group { padding: 0 4px 4px; }
.vt-fluent-app .vt-sidebar-card .list-group-item {
    min-height: 36px;
    margin: 1px 0;
    padding: .5rem .625rem;
    border: 0 !important;
    border-radius: var(--vt-radius-sm);
    background: transparent;
    color: var(--vt-text-2);
    font-size: .875rem;
}

.vt-fluent-app .vt-sidebar-card .list-group-item:hover,
.vt-fluent-app .vt-sidebar-card .list-group-item:focus { background: var(--vt-surface-hover); color: var(--vt-text-1); }
.vt-fluent-app .vt-sidebar-card .list-group-item.active,
.vt-fluent-app .sidebar .list-group-item.active {
    padding-left: .625rem !important;
    border: 0 !important;
    background: var(--vt-surface-selected) !important;
    color: var(--vt-primary) !important;
    font-weight: 600;
}

.vt-fluent-app .vt-sidebar-collapse-trigger {
    width: var(--vt-control-height);
    height: var(--vt-control-height);
    border: 1px solid transparent;
    border-radius: var(--vt-radius-sm);
    background: transparent;
}

.vt-fluent-app .vt-sidebar-collapse-trigger:hover { border-color: transparent; background: var(--vt-surface-hover); color: var(--vt-text-1); }
.vt-fluent-app .vt-sidebar-backdrop { background: var(--vt-surface-overlay); backdrop-filter: blur(2px); }

/* Controls */
.vt-fluent-app .btn {
    min-height: var(--vt-control-height);
    padding: .3125rem .75rem;
    border-radius: var(--vt-radius-sm);
    font-family: var(--vt-font-primary);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.25;
    box-shadow: none;
    transition: background var(--vt-transition-fast), border-color var(--vt-transition-fast), color var(--vt-transition-fast), box-shadow var(--vt-transition-fast);
}

.vt-fluent-app .btn-sm { min-height: 28px; padding: .1875rem .625rem; font-size: .8125rem; }
.vt-fluent-app .btn-lg { min-height: var(--vt-control-height-lg); padding: .5rem 1rem; }
.vt-fluent-app .btn-primary,
.vt-fluent-app .btn-info { border-color: var(--vt-primary); background: var(--vt-primary); color: var(--vt-primary-foreground); }
.vt-fluent-app .btn-primary:hover,
.vt-fluent-app .btn-primary:focus,
.vt-fluent-app .btn-info:hover,
.vt-fluent-app .btn-info:focus { border-color: var(--vt-primary-hover); background: var(--vt-primary-hover); color: var(--vt-primary-foreground); box-shadow: none; }
.vt-fluent-app .btn-primary:active,
.vt-fluent-app .btn-info:active { border-color: var(--vt-primary-pressed); background: var(--vt-primary-pressed); }
.vt-fluent-app .btn-secondary,
.vt-fluent-app .btn-default,
.vt-fluent-app .btn-light,
.vt-fluent-app .btn-outline-secondary,
.vt-fluent-app .btn-outline-primary { border-color: var(--vt-border-strong); background: var(--vt-surface-1); color: var(--vt-text-1); }
.vt-fluent-app .btn-secondary:hover,
.vt-fluent-app .btn-default:hover,
.vt-fluent-app .btn-light:hover,
.vt-fluent-app .btn-outline-secondary:hover,
.vt-fluent-app .btn-outline-primary:hover { border-color: var(--vt-border-strong); background: var(--vt-surface-hover); color: var(--vt-text-1); }
.vt-fluent-app .btn-danger,
.vt-fluent-app .btn-outline-danger:hover { border-color: var(--vt-danger); background: var(--vt-danger); color: #fff; }
.vt-fluent-app .btn-link { padding-right: .375rem; padding-left: .375rem; border-color: transparent; background: transparent; color: var(--vt-primary); }

.vt-fluent-app .form-control,
.vt-fluent-app .custom-select,
.vt-fluent-app select.form-control,
.vt-fluent-app .form-select {
    min-height: var(--vt-control-height);
    padding: .3125rem .625rem;
    border: 1px solid var(--vt-border-strong);
    border-bottom-color: var(--vt-text-2);
    border-radius: var(--vt-radius-sm);
    background: var(--vt-surface-1);
    color: var(--vt-text-1);
    font-family: var(--vt-font-primary);
    font-size: .875rem;
    box-shadow: none;
}

.vt-fluent-app textarea.form-control { min-height: 96px; padding-top: .5rem; }
.vt-fluent-app .form-control:hover,
.vt-fluent-app .custom-select:hover { border-color: var(--vt-text-2); }
.vt-fluent-app .form-control:focus,
.vt-fluent-app .custom-select:focus,
.vt-fluent-app .form-select:focus {
    border-color: var(--vt-primary) !important;
    border-bottom-width: 2px;
    background: var(--vt-surface-1);
    color: var(--vt-text-1);
    box-shadow: var(--vt-focus-ring) !important;
}

.vt-fluent-app .form-control:disabled,
.vt-fluent-app .form-control[readonly],
.vt-fluent-app .custom-select:disabled { border-color: var(--vt-border); background: var(--vt-surface-2); color: var(--vt-text-disabled); opacity: 1; }
.vt-fluent-app .input-group-text { min-height: var(--vt-control-height); border-color: var(--vt-border-strong); border-radius: var(--vt-radius-sm); background: var(--vt-surface-2); color: var(--vt-text-2); }
.vt-fluent-app .form-group > label,
.vt-fluent-app .form-label,
.vt-fluent-app label.control-label { margin-bottom: .375rem; color: var(--vt-text-1); font-size: .875rem; font-weight: 600; }
.vt-fluent-app .custom-control-label::before,
.vt-fluent-app .form-check-input { border-color: var(--vt-border-strong); background: var(--vt-surface-1); }
.vt-fluent-app .custom-control-input:checked ~ .custom-control-label::before,
.vt-fluent-app .form-check-input:checked { border-color: var(--vt-primary); background: var(--vt-primary); }

/* Surfaces */
.vt-fluent-app .card,
.vt-fluent-app .vt-card,
.vt-fluent-app .vt-panel,
.vt-fluent-app .vt-surface-card,
.vt-fluent-app .vt-data-card,
.vt-fluent-app .vt-fluent-card,
.vt-fluent-app .vt-detail-card,
.vt-fluent-app .vt-form-card,
.vt-fluent-app .dashboard-panel-card {
    border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius);
    background: var(--vt-surface-1);
    color: var(--vt-text-1);
    box-shadow: var(--vt-shadow-card);
}

.vt-fluent-app .card-header,
.vt-fluent-app .vt-panel__header,
.vt-fluent-app .vt-surface-card__header { padding: .875rem 1rem; border-bottom: 1px solid var(--vt-border-light); background: var(--vt-surface-1); }
.vt-fluent-app .card-body,
.vt-fluent-app .vt-panel__body,
.vt-fluent-app .vt-surface-card__body { padding: 1rem; }
.vt-fluent-app .card-footer,
.vt-fluent-app .vt-panel__footer,
.vt-fluent-app .vt-surface-card__footer { padding: .75rem 1rem; border-top: 1px solid var(--vt-border-light); background: var(--vt-surface-2); }
.vt-fluent-app .vt-card:hover,
.vt-fluent-app .vt-surface-card--interactive:hover,
.vt-fluent-app .vt-product-card:hover,
.vt-fluent-app .vt-announcement-card:hover,
.vt-fluent-app .vt-quick-card:hover { transform: none; border-color: var(--vt-border-strong); box-shadow: var(--vt-shadow-lg); }

.vt-fluent-app .vt-client-hero,
.vt-fluent-app .vt-dashboard-section__header,
.vt-fluent-app .vt-home-hero { background: var(--vt-primary-gradient); box-shadow: var(--vt-shadow-lg); }
.vt-fluent-app .vt-client-hero,
.vt-fluent-app .vt-dashboard-section__header { border-radius: var(--vt-radius); }
.vt-fluent-app .vt-client-hero::before,
.vt-fluent-app .vt-client-hero::after,
.vt-fluent-app .vt-dashboard-section__header::after,
.vt-fluent-app .vt-home-hero::before,
.vt-fluent-app .vt-home-hero::after { opacity: .45; }
.vt-fluent-app .vt-page-intro__title,
.vt-fluent-app .vt-section-header__title,
.vt-fluent-app .vt-client-title,
.vt-fluent-app .vt-home-hero__title { font-family: var(--vt-font-display); font-weight: 600; letter-spacing: -.02em; }
.vt-fluent-app .vt-page-intro__eyebrow,
.vt-fluent-app .vt-section-header__eyebrow,
.vt-fluent-app .vt-client-eyebrow,
.vt-fluent-app .vt-section-eyebrow { border-radius: var(--vt-radius-sm); text-transform: none; letter-spacing: 0; }
.vt-fluent-app .vt-quick-card,
.vt-fluent-app .vt-stat-card,
.vt-fluent-app .vt-product-card,
.vt-fluent-app .vt-announcement-card { border-radius: var(--vt-radius); box-shadow: var(--vt-shadow-card); }
.vt-fluent-app .vt-quick-card::before { display: none; }
.vt-fluent-app .vt-quick-icon,
.vt-fluent-app .vt-stat-icon,
.vt-fluent-app .vt-card-icon,
.vt-fluent-app .vt-empty-state__icon,
.vt-fluent-app .vt-callout-modern__icon { border-radius: var(--vt-radius-sm); box-shadow: none !important; }
.vt-fluent-app .vt-quick-card--primary .vt-quick-icon { background: var(--vt-primary-subtle); color: var(--vt-primary); }
.vt-fluent-app .vt-quick-card--success .vt-quick-icon { background: var(--vt-success-light); color: var(--vt-success); }
.vt-fluent-app .vt-quick-card--danger .vt-quick-icon { background: var(--vt-danger-light); color: var(--vt-danger); }
.vt-fluent-app .vt-quick-card--warning .vt-quick-icon { background: var(--vt-warning-light); color: var(--vt-warning); }
.vt-fluent-app .vt-quick-card--info .vt-quick-icon { background: var(--vt-info-light); color: var(--vt-info); }
.vt-fluent-app .vt-quick-card--neutral .vt-quick-icon { background: var(--vt-surface-3); color: var(--vt-text-2); }
.vt-fluent-app .vt-stat-card--primary,
.vt-fluent-app .vt-stat-card--success,
.vt-fluent-app .vt-stat-card--danger,
.vt-fluent-app .vt-stat-card--warning,
.vt-fluent-app .vt-stat-card--info { border-top-width: 1px; }

/* Alerts, status and data */
.vt-fluent-app .alert,
.vt-fluent-app .vt-fluent-alert { display: flex; align-items: flex-start; gap: .75rem; padding: .75rem 1rem; border-radius: var(--vt-radius-sm); border-width: 1px; font-size: .875rem; }
.vt-fluent-app .alert-info { background: var(--vt-info-light); border-color: var(--vt-info); color: var(--vt-info-text); }
.vt-fluent-app .alert-success { background: var(--vt-success-light); border-color: var(--vt-success); color: var(--vt-success-text); }
.vt-fluent-app .alert-warning { background: var(--vt-warning-light); border-color: var(--vt-warning); color: var(--vt-warning-text); }
.vt-fluent-app .alert-danger { background: var(--vt-danger-light); border-color: var(--vt-danger); color: var(--vt-danger-text); }
.vt-fluent-app .badge,
.vt-fluent-app .vt-pill,
.vt-fluent-app .vt-status-pill,
.vt-fluent-app .vt-inline-pill { border-radius: var(--vt-radius-full); font-size: .75rem; font-weight: 600; }
.vt-fluent-app .status-active,
.vt-fluent-app .status-open { background: var(--vt-success-light); color: var(--vt-success-text); }
.vt-fluent-app .status-pending,
.vt-fluent-app .status-customer-reply,
.vt-fluent-app .status-customerreply { background: var(--vt-warning-light); color: var(--vt-warning-text); }
.vt-fluent-app .status-terminated,
.vt-fluent-app .status-inprogress,
.vt-fluent-app .status-in-progress { background: var(--vt-danger-light); color: var(--vt-danger-text); }
.vt-fluent-app .status-answered,
.vt-fluent-app .status-suspended { background: var(--vt-info-light); color: var(--vt-info-text); }
.vt-fluent-app .status-closed,
.vt-fluent-app .status-onhold,
.vt-fluent-app .status-on-hold { background: var(--vt-surface-3); color: var(--vt-text-2); }
.vt-fluent-app .table,
.vt-fluent-app .vt-fluent-table { margin-bottom: 0; color: var(--vt-text-1); font-size: .875rem; }
.vt-fluent-app .table th,
.vt-fluent-app .table td { padding: .6875rem .75rem; border-color: var(--vt-border-light); background: transparent; }
.vt-fluent-app .table thead th { border-top: 0; border-bottom: 1px solid var(--vt-border); background: var(--vt-surface-2); color: var(--vt-text-2); font-size: .75rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.vt-fluent-app .table tbody tr:hover,
.vt-fluent-app .table-hover tbody tr:hover { background: var(--vt-surface-hover); }
.vt-fluent-app .dataTables_wrapper .dataTables_filter input,
.vt-fluent-app .dataTables_wrapper .dataTables_length select { min-height: var(--vt-control-height); border: 1px solid var(--vt-border-strong); border-radius: var(--vt-radius-sm); background: var(--vt-surface-1); color: var(--vt-text-1); }
.vt-fluent-app .pagination .page-link { min-width: var(--vt-control-height); min-height: var(--vt-control-height); margin: 0 2px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: var(--vt-radius-sm) !important; background: transparent; color: var(--vt-text-1); }
.vt-fluent-app .pagination .page-link:hover { background: var(--vt-surface-hover); }
.vt-fluent-app .pagination .active .page-link { border-color: var(--vt-primary); background: var(--vt-primary); color: #fff; }

/* Dialogs and page families */
.vt-fluent-app .modal-backdrop.show { opacity: 1; background: var(--vt-surface-overlay); backdrop-filter: blur(2px); }
.vt-fluent-app .modal-content,
.vt-fluent-app .vt-fluent-dialog { overflow: hidden; border: 1px solid var(--vt-border); border-radius: var(--vt-radius); background: var(--vt-surface-1); box-shadow: var(--vt-shadow-xl); }
.vt-fluent-app .modal-header,
.vt-fluent-app .modal-footer { padding: .875rem 1rem; border-color: var(--vt-border-light); }
.vt-fluent-app .modal-body { padding: 1rem; }
.vt-fluent-app .modal-title { font-family: var(--vt-font-display); font-size: 1.25rem; font-weight: 600; }
.vt-fluent-app .close,
.vt-fluent-app .vt-dialog-close { width: var(--vt-control-height); height: var(--vt-control-height); margin: -.25rem -.25rem -.25rem auto; padding: 0; border: 0; border-radius: var(--vt-radius-sm); background: transparent; color: var(--vt-text-2); opacity: 1; text-shadow: none; }
.vt-fluent-app .close:hover,
.vt-fluent-app .vt-dialog-close:hover { background: var(--vt-surface-hover); color: var(--vt-text-1); }
.vt-fluent-app .vt-empty-state { border: 1px solid var(--vt-border); border-radius: var(--vt-radius); background: var(--vt-surface-1); }
.vt-fluent-app .vt-fluent-page { display: flex; flex-direction: column; gap: var(--vt-space-5); }
.vt-fluent-app .vt-public-grid,
.vt-fluent-app .vt-status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--vt-space-4); }

/* Homepage help cards: 3 across on lg, comfortable minimum width so titles
   like "Announcements" never wrap. Drops to 2 then 1 on smaller viewports. */
.vt-fluent-app .vt-public-grid.vt-help-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: var(--vt-space-5);
}

.vt-fluent-app .vt-public-grid.vt-products-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: var(--vt-space-5);
}

/* Cards inside a public grid stretch to fill their track so heights align. */
.vt-fluent-app .vt-public-grid > .vt-card,
.vt-fluent-app .vt-public-grid > .vt-product-card { height: 100%; }

@media (min-width: 992px) {
    .vt-fluent-app .vt-public-grid.vt-help-grid,
    .vt-fluent-app .vt-public-grid.vt-products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.vt-fluent-app .vt-auth-shell { width: min(100%, 480px); margin: var(--vt-space-8) auto; }
.vt-fluent-app .vt-auth-card { overflow: hidden; border: 1px solid var(--vt-border); border-radius: var(--vt-radius); background: var(--vt-surface-1); box-shadow: var(--vt-shadow-xl); }
.vt-fluent-app .vt-domain-card,
.vt-fluent-app .vt-search-box { border-radius: var(--vt-radius); }
.vt-fluent-app .vt-search-box { border: 1px solid var(--vt-border-strong); border-bottom-color: var(--vt-text-2); }
.vt-fluent-app .vt-search-box:focus-within { border-color: var(--vt-primary); box-shadow: var(--vt-focus-ring); }
.vt-fluent-app .vt-search-btn { border-radius: var(--vt-radius-sm); background: var(--vt-primary); }
.vt-fluent-app .vt-fluent-error { width: min(100%, 680px); margin: var(--vt-space-10) auto; padding: var(--vt-space-8); text-align: center; }
.vt-fluent-app.vt-fluent-store .landing-page { font-family: var(--vt-font-primary); }

/* Footer */
.vt-fluent-app .vt-footer { margin-top: var(--vt-space-10); padding: var(--vt-space-8) 0 var(--vt-space-4); border-top: 1px solid var(--vt-border); background: var(--vt-surface-2); color: var(--vt-text-2); }
.vt-fluent-app .vt-footer-col h5 { color: var(--vt-text-1); font-family: var(--vt-font-primary); font-size: .875rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.vt-fluent-app .vt-footer-link { color: var(--vt-text-2); font-size: .875rem; }
.vt-fluent-app .vt-back-to-top { width: var(--vt-density-touch); height: var(--vt-density-touch); border: 1px solid var(--vt-border); border-radius: var(--vt-radius-full); background: var(--vt-surface-1); color: var(--vt-text-1); box-shadow: var(--vt-shadow-lg); }
.vt-fluent-app .vt-back-to-top:hover { background: var(--vt-surface-hover); color: var(--vt-primary); }

[data-vt-theme="dark"] .vt-fluent-app .text-dark,
[data-bs-theme="dark"] .vt-fluent-app .text-dark { color: var(--vt-text-1) !important; }

@media (max-width: 991.98px) {
    .vt-fluent-app .vt-client-shell,
    .vt-fluent-app .vt-client-shell[data-collapsed="true"] { grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; }
    .vt-fluent-app .vt-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0;
        width: min(88vw, 320px) !important;
        max-width: 320px !important;
        height: 100dvh;
        max-height: 100dvh;
        margin: 0 !important;
        padding: var(--vt-space-4);
        transform: translateX(-105%);
        background: var(--vt-surface-1);
        box-shadow: none;
        overflow-y: auto;
        z-index: 1050;
        transition: transform var(--vt-transition);
    }
    .vt-fluent-app .vt-sidebar.is-open { transform: translateX(0); box-shadow: var(--vt-shadow-xl); }
    .vt-fluent-app .vt-header-actions { gap: .25rem !important; }
}

@media (max-width: 575.98px) {
    .vt-fluent-app .vt-topbar { min-height: 52px; }
    .vt-fluent-app .vt-theme-toggle,
    .vt-fluent-app .vt-sidebar-toggle,
    .vt-fluent-app .navbar-toggler,
    .vt-fluent-app .vt-cart-btn { min-width: var(--vt-density-touch); min-height: var(--vt-density-touch); }
    .vt-fluent-app .vt-home-hero { padding: var(--vt-space-8) 0; }
    .vt-fluent-app .vt-search-box { border-radius: var(--vt-radius); }
}

@media (prefers-reduced-motion: reduce) {
    .vt-fluent-app *,
    .vt-fluent-app *::before,
    .vt-fluent-app *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

@media print {
    .vt-fluent-app .vt-header,
    .vt-fluent-app .vt-footer,
    .vt-fluent-app .vt-sidebar,
    .vt-fluent-app .vt-sidebar-backdrop,
    .vt-fluent-app .vt-breadcrumb,
    .vt-fluent-app .vt-back-to-top { display: none !important; }
    .vt-fluent-app,
    .vt-fluent-app .card,
    .vt-fluent-app .vt-panel,
    .vt-fluent-app .vt-data-card { background: #fff !important; color: #242424 !important; box-shadow: none !important; }
}