@media (max-width: 900px) {
.cta-section {
        padding: 40px 24px;
    }

.cta-section h2 {
        font-size: 1.5rem;
    }
}

@media (max-width: 768px) {
.list-cards.view-card {
        grid-template-columns: 1fr;
        gap: 12px;
    }

.list-card {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 14px 16px;
    }

.list-card-check {
        position: absolute;
        top: 14px;
        right: 16px;
    }

.list-card-end {
        justify-content: space-between;
        width: 100%;
        flex-wrap: wrap;
        gap: 8px;
    }

.list-card-amount {
        font-size: 0.95rem;
    }

.list-card-actions {
        opacity: 1;
        width: 100%;
    }

.list-card-actions .btn {
        flex: 1;
        text-align: center;
    }

.list-card-meta {
        gap: 4px 10px;
    }
}

@media (max-width: 480px) {
.list-card {
        padding: 12px;
        border-radius: 10px;
    }

.list-card-title {
        font-size: 0.9rem;
    }

.list-card-meta {
        font-size: 0.78rem;
    }

.list-card-amount {
        font-size: 0.9rem;
    }
}

@media (max-width: 768px) {
.form-grid {
        grid-template-columns: 1fr;
    }

.form-grid.cols-3 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
.show-actions .btn, .show-actions form {
        width: 100%;
    }

.show-actions form .btn {
        width: 100%;
    }

.ticket-header-actions {
        width: 100%;
        flex-direction: column;
    }

.ticket-header-actions .btn, .ticket-header-actions form {
        width: 100%;
    }

.ticket-header-actions form .btn {
        width: 100%;
    }

.show-layout-equal {
        grid-template-columns: 1fr;
    }

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

.detail-grid.cols-3 {
        grid-template-columns: 1fr;
    }
}

@media (pointer: coarse) {
.btn, .nav-icon-button, .notification-bell, .theme-switcher-btn, a.nav-icon-button {
        min-height: 44px;
        min-width: 44px;
    }
}

@media (max-width: 1024px) {
.dashboard-billing-grid {
        grid-template-columns: repeat(2, 1fr);
    }

.dashboard-recent-grid {
        grid-template-columns: 1fr;
    }

.page-header {
        flex-direction: column;
        gap: 12px;
    }
}

@media (max-width: 768px) {
.content {
        padding: 10px;
        max-width: 100%;
        overflow-x: hidden;
    }

.site-header {
        padding: 0 16px !important;
        flex-wrap: nowrap;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        justify-content: flex-start;
    }

.nav-toggle {
        display: flex !important;
        order: -1;
        margin-right: 12px;
        flex-shrink: 0;
    }

.brand {
        order: 0;
        flex-shrink: 0;
        margin-bottom: 0;
    }

.site-header .site-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        background: var(--surface-2);
        border-bottom: 1px solid var(--border);
        padding: 12px 16px;
        box-sizing: border-box;
        display: none;
        flex-direction: column;
        gap: 8px;
        max-height: calc(100vh - 60px);
        overflow-y: auto;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
        z-index: 99;
        order: 10;
    }

.site-header.nav-open .site-nav {
        display: flex;
    }

.site-nav .nav-group {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        width: 100%;
    }

.site-nav .nav-group-primary {
        margin: 0;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
    }

.site-header .site-nav .nav-segment-btn {
        width: auto !important;
        display: inline-flex !important;
        padding: 6px 10px;
        font-size: 0.82rem;
    }

.nav-subnav-bar {
        display: none !important;
    }

.nav-mobile-pages {
        display: block;
        width: 100%;
        border-top: 1px solid var(--border);
        margin-top: 4px;
        padding-top: 4px;
    }

.nav-subnav-item {
        padding: 6px 10px;
        font-size: 0.8rem;
    }

.nav-search-inline {
        width: 100%;
        padding: 10px 12px;
    }

.nav-search-kbd {
        display: none;
    }

.site-nav .nav-group-secondary {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
        border-top: 1px solid var(--border);
        margin-top: 8px;
        padding-top: 12px;
    }

.site-header .site-nav a:not(.nav-segment-btn):not(.nav-subnav-item) {
        width: 100%;
        padding: 10px 12px;
        display: block;
        border-radius: 8px;
        font-size: 0.95rem;
    }

.site-header .site-nav a:not(.nav-segment-btn):not(.nav-subnav-item):hover {
        background: var(--btn-bg-hover);
    }

.site-header .site-nav .nav-icon-button {
        width: 100%;
        height: auto;
        padding: 10px 12px;
        font-size: 1rem;
        justify-content: flex-start;
        gap: 10px;
    }

.site-header .site-nav .nav-button-text {
        display: inline-block;
    }

.site-header .site-nav .notification-bell {
        width: 100%;
        padding: 10px 12px !important;
        justify-content: flex-start !important;
        gap: 10px;
    }

.site-header .site-nav .notification-bell .nav-button-text {
        display: inline-block;
        font-size: 1rem;
        font-weight: normal;
    }

.notification-dropdown {
        width: calc(100vw - 32px);
        right: -16px;
    }

.nav-dropdown {
        position: static;
        margin-top: 0;
        margin-left: 16px;
        box-shadow: none;
        border: none;
        border-top: 1px solid var(--border);
        border-radius: 0;
        background: transparent;
    }

.nav-dropdown a {
        padding: 10px 0;
    }

.theme-switcher-dropdown.show {
        transform: none;
    }

h1 {
        font-size: 1.5rem !important;
        word-break: break-word;
    }

h2 {
        font-size: 1.2rem !important;
    }

h3 {
        font-size: 1.05rem !important;
    }

.card {
        padding: 14px !important;
        border-radius: 10px !important;
    }

section.card {
        margin-left: 0;
        margin-right: 0;
    }

.table-container, div[style*="overflow:auto"], .page-table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        max-width: 100vw;
    }

table {
        font-size: 0.8rem;
        display: table;
        width: 100%;
        table-layout: auto;
    }

.page-table th[style*="width"], .page-table td[style*="width"] {
        width: auto !important;
    }

table th, table td {
        padding: 8px 6px;
        font-size: 0.8rem;
    }

.page-table th, .page-table td {
        padding: 10px 8px;
        font-size: 0.8rem;
    }

.page-table th {
        font-size: 0.7rem;
        letter-spacing: 0.3px;
    }

table td:not(:first-child):not(:last-child) {
        white-space: normal;
        word-break: break-word;
    }

table td:first-child, table td:last-child {
        white-space: nowrap;
    }

.page-table {
        min-width: 0;
        width: 100%;
    }

.page-table th:first-child:has(input[type="checkbox"]), .page-table td:first-child:has(input[type="checkbox"]) {
        display: none;
    }

.item-meta {
        font-size: 0.7rem;
    }

.item-secondary {
        font-size: 0.78rem;
    }

.status-badge {
        font-size: 0.7rem;
        padding: 3px 8px;
    }

.item-actions .btn {
        padding: 4px 8px !important;
        font-size: 0.75rem !important;
        min-height: 32px;
    }

table[style*="min-width:720px"], table[style*="min-width:760px"], table[style*="min-width:700px"], table[style*="min-width"] {
        min-width: 0 !important;
        width: 100% !important;
    }

th[style*="width"], td[style*="width"] {
        width: auto !important;
    }

div[style*="overflow:auto"] {
        max-width: 100vw;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

.btn {
        min-height: 44px;
        font-size: 0.9rem;
    }

.btn-sm {
        min-height: 32px !important;
        padding: 6px 12px !important;
        font-size: 0.85rem !important;
    }

.item-actions .btn, .list-card-actions .btn {
        min-height: 36px;
        padding: 6px 12px !important;
        font-size: 0.85rem !important;
    }

.auth-card {
        padding: 20px;
        margin: 16px auto;
        max-width: 100%;
    }

input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="tel"], textarea, select {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

.form-row {
        grid-template-columns: 1fr !important;
    }

.form-actions {
        flex-direction: column;
    }

.form-actions .btn {
        width: 100%;
    }

form [style*="display:grid"], form [style*="display: grid"] {
        grid-template-columns: 1fr !important;
    }

[style*="display: grid"][style*="gap: 16px"], [style*="display: grid"][style*="gap: 20px"], [style*="display:grid"][style*="gap: 16px"], [style*="display:grid"][style*="gap: 20px"] {
        grid-template-columns: 1fr !important;
    }

[style*="grid-template-columns:repeat(auto-fill"], [style*="grid-template-columns: repeat(auto-fill"], [style*="grid-template-columns:repeat(auto-fit"], [style*="grid-template-columns: repeat(auto-fit"], [style*="grid-template-columns: 1fr 1fr"], [style*="grid-template-columns:1fr 1fr"], [style*="grid-template-columns:repeat(2"], [style*="grid-template-columns: repeat(2"], [style*="grid-template-columns:repeat(3"], [style*="grid-template-columns: repeat(3"], [style*="grid-template-columns:repeat(4"], [style*="grid-template-columns: repeat(4"], [style*="grid-template-columns:2fr 1fr"], [style*="grid-template-columns: 2fr 1fr"], [style*="grid-template-columns:2fr 2fr"], [style*="grid-template-columns: 2fr 2fr"], [style*="grid-template-columns:3fr"], [style*="grid-template-columns: 3fr"] {
        grid-template-columns: 1fr !important;
    }

.line-item[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

.line-item input, .line-item select, .line-item textarea {
        width: 100% !important;
        min-width: 0 !important;
    }

[style*="display:grid"][style*="gap:16px"], [style*="display:grid"][style*="gap: 16px"], [style*="display: grid"][style*="gap:16px"], [style*="display: grid"][style*="gap: 16px"] {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

[style*="display:flex"][style*="justify-content:space-between"]:not([style*="flex-wrap"]), [style*="display: flex"][style*="justify-content:space-between"]:not([style*="flex-wrap"]), [style*="display: flex"][style*="justify-content: space-between"]:not([style*="flex-wrap"]) {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

[style*="display:flex"][style*="flex-wrap:wrap"], [style*="display: flex"][style*="flex-wrap:wrap"], [style*="display: flex"][style*="flex-wrap: wrap"], [style*="display:flex"][style*="flex-wrap: wrap"] {
        flex-direction: row !important;
    }

[style*="display:flex"][style*="gap:8px"], [style*="display:flex"][style*="gap:10px"], [style*="display:flex"][style*="gap:12px"], [style*="display: flex"][style*="gap: 8px"], [style*="display: flex"][style*="gap: 10px"], [style*="display: flex"][style*="gap: 12px"], [style*="display: flex"][style*="gap:8px"], [style*="display:flex"][style*="gap: 8px"], [style*="display:flex"][style*="gap: 10px"], [style*="display:flex"][style*="gap: 12px"] {
        flex-wrap: wrap !important;
    }

[style*="display:flex"] .btn, [style*="display: flex"] .btn {
        flex: 1 1 auto;
        min-width: 0;
    }

div[style*="justify-content:space-between"][style*="flex-wrap:wrap"], div[style*="justify-content:space-between"][style*="flex-wrap: wrap"], div[style*="justify-content: space-between"][style*="flex-wrap:wrap"], div[style*="justify-content: space-between"][style*="flex-wrap: wrap"] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

div[style*="justify-content:space-between"][style*="flex-wrap:wrap"] > div:last-child, div[style*="justify-content:space-between"][style*="flex-wrap: wrap"] > div:last-child, div[style*="justify-content: space-between"][style*="flex-wrap:wrap"] > div:last-child, div[style*="justify-content: space-between"][style*="flex-wrap: wrap"] > div:last-child {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

div[style*="display:flex"][style*="gap:8px"][style*="flex-wrap:wrap"], div[style*="display:flex"][style*="gap:10px"][style*="flex-wrap:wrap"], div[style*="display: flex"][style*="gap: 8px"][style*="flex-wrap: wrap"], div[style*="display: flex"][style*="gap: 10px"][style*="flex-wrap: wrap"], div[style*="display: flex"][style*="gap:8px"][style*="flex-wrap:wrap"], div[style*="display:flex"][style*="gap: 8px"][style*="flex-wrap: wrap"] {
        width: 100% !important;
    }

div[style*="display:flex"][style*="gap:8px"][style*="flex-wrap:wrap"] > .btn, div[style*="display:flex"][style*="gap:8px"][style*="flex-wrap:wrap"] > form, div[style*="display:flex"][style*="gap:10px"][style*="flex-wrap:wrap"] > .btn, div[style*="display:flex"][style*="gap:10px"][style*="flex-wrap:wrap"] > form, div[style*="display: flex"][style*="gap: 8px"][style*="flex-wrap: wrap"] > .btn, div[style*="display: flex"][style*="gap: 8px"][style*="flex-wrap: wrap"] > form, div[style*="display: flex"][style*="gap: 10px"][style*="flex-wrap: wrap"] > .btn, div[style*="display: flex"][style*="gap: 10px"][style*="flex-wrap: wrap"] > form {
        flex: 1 1 calc(50% - 6px);
        min-width: 120px;
    }

div[style*="display:flex"][style*="gap:8px"][style*="flex-wrap:wrap"] > form .btn, div[style*="display:flex"][style*="gap:10px"][style*="flex-wrap:wrap"] > form .btn, div[style*="display: flex"][style*="gap: 8px"][style*="flex-wrap: wrap"] > form .btn, div[style*="display: flex"][style*="gap: 10px"][style*="flex-wrap: wrap"] > form .btn {
        width: 100%;
    }

section[style*="max-width"], div[style*="max-width:300px"], div[style*="max-width: 300px"], div[style*="max-width:420px"], div[style*="max-width: 420px"], div[style*="max-width:500px"], div[style*="max-width: 500px"], div[style*="max-width:600px"], div[style*="max-width: 600px"], div[style*="max-width:800px"], div[style*="max-width: 800px"], div[style*="max-width:900px"], div[style*="max-width: 900px"], div[style*="max-width:1000px"], div[style*="max-width: 1000px"] {
        max-width: 100% !important;
    }

form[style*="max-width"] {
        max-width: 100% !important;
        padding: 0 !important;
    }

div[style*="repeat(auto-fit, minmax(300px"], div[style*="repeat(auto-fit, minmax(200px"], div[style*="repeat(auto-fill, minmax(300px"], div[style*="repeat(auto-fill, minmax(200px"] {
        grid-template-columns: 1fr !important;
    }

div[style*="display:grid"][style*="gap:24px"], div[style*="display:grid"][style*="gap: 24px"], div[style*="display: grid"][style*="gap:24px"], div[style*="display: grid"][style*="gap: 24px"], div[style*="display:grid"][style*="gap:20px"], div[style*="display:grid"][style*="gap: 20px"], div[style*="display: grid"][style*="gap:20px"], div[style*="display: grid"][style*="gap: 20px"] {
        gap: 16px !important;
    }

div[style*="overflow-x:auto"], div[style*="overflow-x: auto"], div[style*="overflow:auto"] {
        -webkit-overflow-scrolling: touch;
        max-width: 100vw;
        margin-left: -10px;
        margin-right: -10px;
        padding-left: 10px;
        padding-right: 10px;
    }

label {
        font-size: 0.85rem;
        word-break: break-word;
    }

fieldset {
        padding: 12px !important;
        margin: 0 0 16px 0 !important;
    }

textarea {
        min-height: 80px;
        resize: vertical;
    }

form[style*="display:flex"][style*="gap"], form[style*="display: flex"][style*="gap"] {
        flex-wrap: wrap !important;
    }

form[style*="display:flex"][style*="gap"] select, form[style*="display: flex"][style*="gap"] select {
        flex: 1 1 100% !important;
    }

form[style*="display:flex"][style*="gap"] .btn, form[style*="display: flex"][style*="gap"] .btn {
        flex: 1 1 auto;
    }

div[style*="border-left:"], div[style*="border-left :"], aside[style*="border-left:"] {
        border-left: none !important;
        border-top: 1px solid var(--border) !important;
        padding-left: 0 !important;
        padding-top: 16px !important;
    }

.money-value, [style*="font-weight:600"][style*="text-align:right"] {
        text-align: left !important;
    }

div[style*="background:var(--surface)"][style*="border-radius"] {
        padding: 14px !important;
    }

div[style*="border-bottom:"][style*="display:flex"][style*="gap"] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap !important;
    }

div[style*="border-bottom:"][style*="display:flex"][style*="gap"]::-webkit-scrollbar {
        display: none;
    }

div[style*="border-bottom:"][style*="display:flex"][style*="gap"] > a, div[style*="border-bottom:"][style*="display:flex"][style*="gap"] > button {
        white-space: nowrap;
        flex-shrink: 0;
    }

.page-header-content h1 {
        font-size: 1.5rem;
    }

.page-header-actions {
        float: none;
        width: 100%;
        justify-content: flex-start;
        margin-bottom: 4px;
    }

.bulk-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

.bulk-toolbar .btn {
        width: 100%;
        text-align: center;
    }

.page-stats {
        width: 100%;
    }

.stat-card {
        flex: 1 1 calc(50% - 6px);
        min-width: calc(50% - 6px);
    }

.search-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

.search-filter-bar .search-input-wrapper, .search-filter-bar .filter-select-wrapper {
        width: 100%;
        min-width: 100%;
    }

.search-filter-bar .clear-filters {
        width: 100%;
        text-align: center;
    }

.btn-status-draft, .btn-status-available, .btn-status-sent, .btn-status-paid, .btn-status-overdue, .btn-status-void {
        width: 100%;
        margin-bottom: 8px;
    }

[style*="display:flex"][style*="gap:10px"] {
        flex-direction: column;
    }

.footer-nav {
        gap: 8px;
        flex-direction: column;
        align-items: center;
    }

.footer-nav a {
        font-size: 0.85rem;
    }

.site-footer {
        padding: 24px 16px;
    }

.profile-tabs {
        display: none;
    }

.profile-tabs-mobile {
        display: block;
    }

.profile-section {
        padding: 16px;
    }

.dashboard-billing-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

.dashboard-billing-card {
        padding: 14px;
        border-radius: 8px;
    }

.dashboard-billing-card-value {
        font-size: 1.5em;
    }

.portal .card, #portal .card {
        margin: 0;
        width: 100%;
    }

.ticket-header {
        flex-direction: column;
    }

.ticket-header-actions {
        width: 100%;
    }

.ticket-header-actions .btn {
        width: 100%;
    }

.ticket-message {
        gap: 8px;
    }

.ticket-message-avatar {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }

.ticket-info-grid, .ticket-settings-form {
        grid-template-columns: 1fr;
    }

.btn-group .btn, .action-buttons .btn {
        width: 100%;
        margin-bottom: 8px;
    }

.cta-section {
        padding: 32px 16px;
        margin: 32px 0 24px;
    }

.cta-section h2 {
        font-size: 1.4rem;
    }
}

@media (max-width: 480px) {
.content {
        padding: 8px;
    }

.site-header {
        padding: 0 10px !important;
    }

h1 {
        font-size: 1.35rem !important;
    }

h2 {
        font-size: 1.1rem !important;
    }

.card {
        padding: 12px !important;
        border-radius: 8px !important;
    }

table {
        font-size: 0.75rem;
    }

table th, table td {
        padding: 6px 4px;
        font-size: 0.75rem;
    }

.page-table th, .page-table td {
        padding: 6px 4px;
        font-size: 0.75rem;
    }

.page-table th {
        font-size: 0.7rem;
    }

table[style*="min-width:720px"], table[style*="min-width:760px"], table[style*="min-width:700px"], table[style*="min-width"] {
        min-width: 0 !important;
        width: 100% !important;
    }

th[style*="width"], td[style*="width"] {
        width: auto !important;
    }

.item-actions .btn {
        padding: 3px 6px !important;
        font-size: 0.7rem !important;
        min-height: 28px;
    }

.btn {
        padding: 10px 12px;
        font-size: 0.875rem;
        width: 100%;
    }

.btn:not([style*="width"]):not(.btn-sm):not(.btn-xs):not(.item-actions .btn):not(.list-card-actions .btn):not(.approval-btn) {
        width: 100% !important;
    }

.btn-sm, .btn-xs, .item-actions .btn, .list-card-actions .btn {
        width: auto !important;
    }

input, textarea, select {
        font-size: 16px !important;
    }

.auth-card {
        margin: 8px auto;
        padding: 14px;
    }

.dashboard-billing-card-value {
        font-size: 1.35em;
    }

.dashboard-billing-card-title {
        font-size: 0.8rem;
    }

div[style*="display:flex"][style*="gap:8px"][style*="flex-wrap:wrap"] > .btn, div[style*="display:flex"][style*="gap:8px"][style*="flex-wrap:wrap"] > form, div[style*="display:flex"][style*="gap:10px"][style*="flex-wrap:wrap"] > .btn, div[style*="display:flex"][style*="gap:10px"][style*="flex-wrap:wrap"] > form, div[style*="display: flex"][style*="gap: 8px"][style*="flex-wrap: wrap"] > .btn, div[style*="display: flex"][style*="gap: 8px"][style*="flex-wrap: wrap"] > form, div[style*="display: flex"][style*="gap: 10px"][style*="flex-wrap: wrap"] > .btn, div[style*="display: flex"][style*="gap: 10px"][style*="flex-wrap: wrap"] > form {
        flex: 1 1 100% !important;
    }

.status-badge {
        font-size: 0.7rem !important;
        padding: 2px 8px !important;
    }

div[style*="background:var(--surface)"][style*="border-radius"] {
        padding: 10px !important;
    }

.line-item label {
        font-size: 0.75rem;
        margin-bottom: 2px;
    }

div[style*="color:var(--text-2)"][style*="display:flex"][style*="align-items:center"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
    }
}

@media (max-width: 480px) {
.toast-container {
        right: 12px;
        left: 12px;
        bottom: 12px;
        max-width: 100%;
    }
}

@media (max-width: 768px) {
.list-cards:not(.view-table) {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
.line-items-table.mobile-cards {
        min-width: 0 !important;
        width: 100% !important;
        display: block;
    }

.line-items-table.mobile-cards thead {
        display: none;
    }

.line-items-table.mobile-cards tbody {
        display: block;
    }

.line-items-table.mobile-cards tbody tr {
        display: flex;
        flex-direction: column;
        background: var(--surface-2);
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 14px;
        margin-bottom: 10px;
    }

.line-items-table.mobile-cards tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 6px 0;
        border: none;
        font-size: 0.88rem;
        width: auto !important;
    }

.line-items-table.mobile-cards tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--text-2);
        font-size: 0.8rem;
        margin-right: 12px;
        flex-shrink: 0;
    }

.line-items-table.mobile-cards tfoot {
        display: block;
        width: 100%;
    }

.line-items-table.mobile-cards tfoot tr {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0;
        border-top: 1px solid var(--border);
    }

.line-items-table.mobile-cards tfoot td {
        display: block;
        padding: 0 !important;
        border: none !important;
        width: auto !important;
    }

.line-items-table.mobile-cards tfoot td[colspan="5"], .line-items-table.mobile-cards tfoot td[colspan="6"] {
        text-align: left !important;
        flex: 1;
        font-size: 0.85rem;
    }

.line-items-table.mobile-cards tfoot td[colspan="2"], .line-items-table.mobile-cards tfoot td[colspan="1"] {
        text-align: right !important;
        flex-shrink: 0;
        white-space: nowrap;
        font-size: 0.9rem;
    }
}

@media (max-width: 768px) {
table.mobile-cards {
        min-width: 0 !important;
        width: 100% !important;
        display: block;
    }

table.mobile-cards thead {
        display: none;
    }

table.mobile-cards tbody {
        display: block;
    }

table.mobile-cards tbody tr {
        display: flex;
        flex-direction: column;
        background: var(--surface-2);
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 14px;
        margin-bottom: 10px;
    }

table.mobile-cards tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px 0;
        border: none;
        font-size: 0.88rem;
        width: auto !important;
    }

table.mobile-cards tbody tr.adjust-note-row {
        background: none;
        border: none;
        padding: 0 0 10px;
        margin-top: -6px;
    }

table.mobile-cards tbody tr.adjust-note-row td {
        display: block !important;
        width: 100% !important;
        padding: 0;
        max-width: 100%;
        overflow: hidden;
    }

table.mobile-cards tbody tr.adjust-note-row td::before {
        display: none;
    }

table.mobile-cards tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--text-2);
        font-size: 0.8rem;
        margin-right: 12px;
        flex-shrink: 0;
    }

table.mobile-cards tbody td.mobile-card-actions {
        justify-content: flex-end;
        padding-top: 8px;
        border-top: 1px solid var(--border);
        margin-top: 4px;
    }

table.mobile-cards tbody td.mobile-card-actions::before {
        display: none;
    }
}

@media (max-width: 768px) {
.fc-custom .fc-grid {
        display: none;
    }

.fc-custom .fc-day-header {
        display: none;
    }

.fc-agenda-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

.fc-agenda-item {
        display: flex;
        gap: 12px;
        padding: 12px 14px;
        background: var(--surface-2);
        border: 1px solid var(--border);
        border-radius: 8px;
        align-items: center;
        text-decoration: none;
        color: var(--text);
        transition: background 0.15s;
    }

.fc-agenda-item:hover {
        background: var(--surface);
    }

.fc-agenda-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        flex-shrink: 0;
    }

.fc-agenda-date {
        font-weight: 600;
        font-size: 0.85rem;
        min-width: 90px;
        flex-shrink: 0;
        color: var(--text-2);
    }

.fc-agenda-title {
        flex: 1;
        font-size: 0.9rem;
    }
}

@media (max-width: 768px) {
.fc-agenda-list {
        display: flex;
    }
}

@media (max-width: 768px) {
.ps-summary-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: 100%;
        padding: 6px 0;
        margin-bottom: 8px;
        background: var(--surface-2);
        border: 1px solid var(--border);
        border-radius: 8px;
        color: var(--text-2);
        font-size: 0.75rem;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.15s, color 0.15s;
    }

.ps-summary-toggle:hover {
        background: var(--surface);
        color: var(--text);
    }

.ps-summary-toggle i {
        font-size: 0.85rem;
        transition: transform 0.2s;
    }

.ps-summary-toggle.expanded i {
        transform: rotate(180deg);
    }

.ps-summary-row.mobile-collapsed {
        display: none !important;
    }
}

@media (max-width: 768px) {
.ps-rail-btn .ps-rail-label {
        display: block;
        font-size: 0.7rem;
        line-height: 1;
        color: var(--text-2);
        white-space: nowrap;
    }

.ps-rail-btn {
        flex-direction: column;
        width: auto !important;
        height: auto !important;
        padding: 6px 10px !important;
        min-width: 48px;
        font-size: 1.85rem !important;
    }

.ps-rail-btn .rail-badge {
        top: 0;
        right: 0;
        font-size: 0.65rem;
        min-width: 15px;
        height: 15px;
        line-height: 15px;
    }
}

@media (max-width: 768px) {
.ps-rail-group {
        flex-direction: row;
        gap: 2px;
    }

.ps-rail-divider {
        display: none;
        width: 1px;
        height: 24px;
        margin: 0 4px;
    }
}

@media (max-width: 380px) {
.code-input-group input {
        width: 42px;
        height: 48px;
        font-size: 1.2rem;
    }
}

@media (max-width: 768px) {
.report-charts-row {
        grid-template-columns: 1fr !important;
    }

.report-date-range-form {
        flex-direction: column;
        align-items: stretch !important;
    }
}

@media(max-width:1024px) {
.cs-layout { grid-template-columns:1fr; }
}

@media (max-width: 768px) {
.approval-actions { flex-direction:column; width:100%; flex-basis:100%; }

.approval-actions .approval-btn, .approval-actions .approval-form { width:100%; }

.approval-actions .approval-form .approval-btn { width:100%; }
}

@media (max-width:600px) {
.cs-financials-grid { grid-template-columns:1fr 1fr; }
}

@media (max-width: 768px) {
.gantt-label-col, .gantt-row-label-cell, .gantt-month-row th:first-child { min-width: 140px; width: 140px; }

a.gantt-row-link { font-size: 0.75rem; padding: 6px 8px; }

.gantt-day-cell { min-width: 28px; width: 28px; max-width: 28px; font-size: 0.65rem; }

.gantt-bar { font-size: 0.65rem; padding: 0 4px; }

.gantt-bar-cell, .gantt-bar-area { height: 40px; }
}

@media (max-width: 768px) {
.admin-grid-3, .admin-grid-3-gap14 { grid-template-columns: 1fr; }

.admin-grid-2col, .admin-grid-2-card { grid-template-columns: 1fr; }
}

@media(max-width:768px) {
.payment-form-grid { grid-template-columns:1fr 1fr; }
}

@media(max-width:480px) {
.payment-form-grid { grid-template-columns:1fr; }
}

@media (max-width: 768px) {
.payment-summary {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 12px;
    }

.payment-summary-item {
        text-align: left;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        min-width: 0;
        border-bottom: 1px solid var(--border);
    }

.payment-summary-item:last-child {
        border-bottom: none;
    }

.payment-summary-sep {
        display: none;
    }

.payment-summary-label {
        font-size: 0.75rem;
        margin-bottom: 0;
    }

.payment-summary-value {
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
.grid-2-gap16 { grid-template-columns: 1fr; }

.ws-card-grid { grid-template-columns: 1fr; }

.modal-box { padding: 16px; max-width: 95%; }

.stat-box-value { font-size: 1.1rem; }

.search-form-bar { flex-direction: column; }
}

@media (max-width: 768px) {
.merge-grid { grid-template-columns: 1fr; }

.checklist-item-row { grid-template-columns: 1fr auto; }
}

@media (max-width: 768px) {
.content { padding:5px !important; }

.content > .card { padding:10px !important; border-radius:8px; }

.breadcrumbs { padding:0 !important; margin-bottom:0 !important; font-size:0.75rem; display:none;}

.cs-page { padding:6px; border-radius:0; margin-bottom:0; border:none; border-bottom:1px solid var(--border); }

.cs-page-header { flex-direction:row; gap:6px; align-items:center; margin-bottom:4px; }

.cs-page-header h1 { font-size:1.05rem; margin:0; }

.cs-page-header p { display:none; }

.cs-form-header {margin-bottom:2px;}

.cs-page-actions { width:auto; overflow-x:auto; flex-shrink:0; gap:4px; flex-wrap:nowrap; align-items:center; }

.cs-page-actions .btn { padding:0 !important; white-space:nowrap; line-height:1; width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; }

.cs-page-actions .btn i { font-size:1rem; margin:0; }

.cs-page-actions form { display:inline-flex; align-items:center; margin:0; }

.cs-page-stats { display:none !important; }

.search-filter-bar { transition:max-height 0.3s ease, opacity 0.2s ease, padding 0.3s ease, margin 0.3s ease; overflow:hidden; flex-direction:row !important; flex-wrap:wrap; padding:8px 10px !important; gap:6px !important; margin-bottom:6px !important; align-items:center !important; }

.search-filter-bar.mobile-collapsed { max-height:0 !important; opacity:0; padding:0 !important; margin:0 !important; border-color:transparent; }

.search-filter-bar .search-input-wrapper { flex:1; min-width:0 !important; width:auto !important; }

.search-filter-bar .search-input-wrapper input { padding:6px 8px 6px 30px !important; font-size:0.8rem !important; }

.search-filter-bar .filter-select-wrapper { width:auto !important; min-width:0 !important; flex:0 0 auto; }

.search-filter-bar .filter-select-wrapper select { padding:6px 8px !important; font-size:0.8rem !important; min-width:100px; }

.search-filter-bar .btn-filter { padding:5px 10px; font-size:0.8rem; flex-shrink:0; }

.search-filter-bar .clear-filters { width:auto !important; text-align:center; font-size:0.8rem; padding:5px 10px; }

.search-filter-bar .my-items-toggle { font-size:0.75rem; white-space:nowrap; }

.sort-bar { display:none !important; }

.list-toolbar.mobile-hidden, .view-toggle-wrapper.mobile-hidden { display:none !important; }

.mobile-unified-bar { display:flex; align-items:center; gap:6px; padding:4px 0; margin-bottom:4px; }

.mub-btn { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border:1px solid var(--border); border-radius:8px; background:var(--surface-2); color:var(--text-2); font-size:1rem; cursor:pointer; padding:0; transition:all 0.15s; flex-shrink:0; }

.mub-btn:hover { background:var(--surface); color:var(--text); }

.mub-btn.active { background:var(--accent, #3b82f6); color:#fff; border-color:var(--accent, #3b82f6); }

.mub-btn[title="Stats"], .mub-btn[title="Sort"] { display:none !important; }

.mub-select-all { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border:1px solid var(--border); border-radius:8px; background:var(--surface-2); cursor:pointer; flex-shrink:0; margin:0; }

.mub-select-all input[type="checkbox"] { margin:0;  cursor:pointer; }

.mub-view-toggle { display:inline-flex; border:1px solid var(--border); border-radius:6px; overflow:hidden; flex-shrink:0; margin-left:auto; }

.mub-view-toggle .view-toggle-btn { padding:5px 8px; font-size:0.8rem; border:none; border-radius:0; }

.mub-view-toggle .view-toggle-btn + .view-toggle-btn { border-left:1px solid var(--border); }

.list-cards { gap:6px !important; margin-top:5px !important; }

.list-card { padding:10px 12px !important; gap:6px !important; }

.list-card-check.mobile-moved { display:none; }

.list-card-actions .mobile-check { display:inline-flex; align-items:center; justify-content:center; width:44px; height:35px; border:1px solid var(--border); border-radius:6px; background:transparent; cursor:pointer; margin:0; padding:0; }

.list-card-actions .mobile-check input { margin:0; min-width:0; width:20px; height:20px; cursor:pointer; accent-color:var(--accent, #3b82f6); }

.list-card-end { gap:4px !important; justify-content:space-between !important; }

.list-card-actions { width:auto !important; margin-left:auto; }

.list-card-actions .btn { flex:0 0 auto !important; padding:6px 12px !important; font-size:0.8rem !important; min-height:36px !important; }

.list-card-meta { gap:2px 8px !important; }

.list-card-meta-item { font-size:0.8rem; }

.list-card-title { font-size:0.9rem; }

.list-card-id { font-size:0.75rem; }

.cs-form-card { padding:16px; }

.cs-form-card-wide { padding:16px; }
}

@media (max-width: 768px) {
.help-hero { padding: 2rem 1rem 1.5rem; }

.help-hero h1 { font-size: 1.5rem; }

.help-hero-icon { width: 52px; height: 52px; font-size: 1.375rem; }

.help-search-wrap { max-width: 100%; }

.help-stats-bar { padding: 0.75rem 1rem; }

.help-category-header { padding: 1rem 1.25rem; }

.help-article-card { padding: 0.75rem 1.25rem; }

.help-article-desc { display: none; }

.help-body { padding: 20px 16px; border-radius: 10px; }

.help-body .section-heading, .help-body h2.section-heading, .help-body h2 { font-size: 1rem; margin: 20px 0 10px; padding-top: 16px; }

.help-list li, .help-body ul li, .help-body ol li { padding: 7px 10px 7px 24px; font-size: 0.85rem; }

.help-note-box { padding: 12px 16px; margin: 16px 0; }

.mb-lg + h1 { font-size: 1.3rem; padding: 20px 16px 0; }

.mb-lg + h1 + .help-body { padding-top: 8px; }
}

@media (max-width: 480px) {
.empty-state-enhanced { padding: 40px 16px; }

.empty-state-illustration { width: 90px; height: 90px; }

.empty-state-illustration i { font-size: 2.2rem; }

.empty-state-tips { flex-direction: column; align-items: center; }
}

@media (max-width: 768px) {
.site-header .site-nav {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: var(--border-2) transparent;
    }

.site-header .site-nav::-webkit-scrollbar {
        width: 4px;
    }

.site-header .site-nav::-webkit-scrollbar-track {
        background: transparent;
    }

.site-header .site-nav::-webkit-scrollbar-thumb {
        background: var(--border-2);
        border-radius: 4px;
    }
}

@media (max-width: 768px) {
.report-grid-2fr1fr { grid-template-columns: 1fr; }

.grid-2-gap12 { grid-template-columns: 1fr; }

.grid-3-gap8 { grid-template-columns: 1fr 1fr; }

.report-filter-form { flex-direction: column; align-items: stretch; }
}

@media (max-width: 768px) {
.audit-trail-grid { grid-template-columns: 1fr; }

.cf-form-grid { grid-template-columns: 1fr; }

.register-name-grid { grid-template-columns: 1fr; }

.ws-card-grid { grid-template-columns: 1fr; }

.ws-plan-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
.cf-form-grid-3col { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
.pro-reg-name-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
.inline-edit-field.active {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 8px;
    }

.inline-edit-field input, .inline-edit-field select, .inline-edit-field textarea {
        width: 100%;
    }

.inline-edit-field .inline-edit-save, .inline-edit-field .inline-edit-cancel {
        min-width: 44px;
        min-height: 44px;
    }
}

@media (max-width: 768px) {
.health-modal-box {
        max-width: 95vw;
        width: 95%;
        max-height: 90vh;
        overflow-y: auto;
    }

.health-modal-close {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 768px) {
.line-items-table.mobile-cards td:nth-child(7), .line-items-table.mobile-cards th:nth-child(7) {
        display: none;
    }
}

@media (max-width: 640px) {
.form-grid-3 { grid-template-columns: 1fr; }
}

@media (pointer: coarse) {
.btn, .nav-icon-button, .notification-bell, .theme-switcher-btn, a.nav-icon-button {
        min-height: 44px;
        min-width: 44px;
    }
}

@media (max-width: 1024px) and (min-width: 769px) {
.content {
        padding: 0;
    }

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

.dashboard-recent-grid {
        grid-template-columns: 1fr;
    }

.page-header {
        flex-direction: column;
        gap: 12px;
    }
}

@media (max-width: 768px) {
.site-sidebar {
        display: none !important;
    }

.content.has-sidebar {
        margin-left: 0 !important;
    }

.site-header {
        margin-left: 0 !important;
    }

body.authenticated .site-header {
        margin-left: 0 !important;
    }

body.authenticated .site-header .brand {
        display: inline-flex !important;
    }

.site-footer.has-sidebar {
        margin-left: 0 !important;
    }

.content {
        padding: 10px;
        max-width: 100%;
        overflow-x: clip;
    }

.site-header {
        padding: 0 16px !important;
        flex-wrap: nowrap;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        justify-content: flex-start;
    }

.nav-toggle {
        display: flex !important;
        order: -1;
        margin-right: 12px;
        flex-shrink: 0;
    }

.brand {
        order: 0;
        flex-shrink: 0;
        margin-bottom: 0;
    }

.site-header .site-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        background: var(--surface-2);
        border-bottom: 1px solid var(--border);
        padding: 12px 16px;
        box-sizing: border-box;
        display: none;
        flex-direction: column;
        gap: 8px;
        max-height: calc(100vh - 60px);
        overflow-y: auto;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
        z-index: 99;
        order: 10;
    }

.site-header.nav-open .site-nav {
        display: flex;
    }

.site-nav .nav-group {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        width: 100%;
    }

.site-nav .nav-group-primary {
        margin: 0;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 6px;
    }

.site-header .site-nav .nav-segment-btn {
        width: auto !important;
        display: inline-flex !important;
        padding: 6px 10px;
        font-size: 0.82rem;
    }

.nav-subnav-bar {
        display: none !important;
    }

.nav-mobile-pages {
        display: none !important;
    }

.nav-subnav-item {
        padding: 6px 10px;
        font-size: 0.8rem;
    }

.nav-search-inline {
        width: 100%;
        padding: 10px 12px;
    }

.nav-search-kbd {
        display: none;
    }

.site-nav .nav-group-secondary {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
        border-top: 1px solid var(--border);
        margin-top: 8px;
        padding-top: 12px;
    }

.site-header .site-nav a:not(.nav-segment-btn):not(.nav-subnav-item) {
        width: 100%;
        padding: 10px 12px;
        display: block;
        border-radius: 8px;
        font-size: 0.95rem;
    }

.site-header .site-nav a:not(.nav-segment-btn):not(.nav-subnav-item):hover {
        background: var(--btn-bg-hover);
    }

.site-header .site-nav .nav-icon-button {
        width: 100%;
        height: auto;
        padding: 10px 12px;
        font-size: 1rem;
        justify-content: flex-start;
        gap: 10px;
    }

.site-header .site-nav .nav-button-text {
        display: inline-block;
    }

.site-header .site-nav .notification-bell {
        width: 100%;
        padding: 10px 12px !important;
        justify-content: flex-start !important;
        gap: 10px;
    }

.site-header .site-nav .notification-bell .nav-button-text {
        display: inline-block;
        font-size: 1rem;
        font-weight: normal;
    }

.notification-dropdown {
        position: fixed;
        left: 16px;
        right: 16px;
        top: auto;
        width: auto;
        max-height: 70vh;
        overflow-y: auto;
    }

.nav-dropdown {
        position: static;
        margin-top: 0;
        margin-left: 16px;
        box-shadow: none;
        border: none;
        border-top: 1px solid var(--border);
        border-radius: 0;
        background: transparent;
    }

.nav-dropdown a {
        padding: 10px 0;
    }

.theme-switcher-dropdown.show {
        transform: none;
    }

h1 {
        font-size: 1.5rem !important;
        word-break: break-word;
    }

h2 {
        font-size: 1.2rem !important;
    }

h3 {
        font-size: 1.05rem !important;
    }

.card {
        padding: 14px !important;
        border-radius: 10px !important;
    }

section.card {
        margin-left: 0;
        margin-right: 0;
    }

.table-container, div[style*="overflow:auto"], .page-table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        max-width: 100vw;
    }

table {
        font-size: 0.8rem;
        display: table;
        width: 100%;
        table-layout: auto;
    }

.page-table th[style*="width"], .page-table td[style*="width"] {
        width: auto !important;
    }

table th, table td {
        padding: 8px 6px;
        font-size: 0.8rem;
    }

.page-table th, .page-table td {
        padding: 10px 8px;
        font-size: 0.8rem;
    }

.page-table th {
        font-size: 0.7rem;
        letter-spacing: 0.3px;
    }

table td:not(:first-child):not(:last-child) {
        white-space: normal;
        word-break: break-word;
    }

table td:first-child, table td:last-child {
        white-space: nowrap;
    }

.page-table {
        min-width: 0;
        width: 100%;
    }

.page-table th:first-child:has(input[type="checkbox"]), .page-table td:first-child:has(input[type="checkbox"]) {
        display: none;
    }

.item-meta {
        font-size: 0.7rem;
    }

.item-secondary {
        font-size: 0.78rem;
    }

.status-badge {
        font-size: 0.7rem;
        padding: 3px 8px;
    }

.item-actions .btn {
        padding: 4px 8px !important;
        font-size: 0.75rem !important;
        min-height: 32px;
    }

table[style*="min-width:720px"], table[style*="min-width:760px"], table[style*="min-width:700px"], table[style*="min-width"] {
        min-width: 0 !important;
        width: 100% !important;
    }

th[style*="width"], td[style*="width"] {
        width: auto !important;
    }

div[style*="overflow:auto"] {
        max-width: 100vw;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

.btn {
        min-height: 44px;
        font-size: 0.9rem;
    }

.btn-sm {
        min-height: 32px !important;
        padding: 6px 12px !important;
        font-size: 0.85rem !important;
    }

.item-actions .btn, .list-card-actions .btn {
        min-height: 36px;
        padding: 6px 12px !important;
        font-size: 0.85rem !important;
    }

.auth-card {
        padding: 20px;
        margin: 16px auto;
        max-width: 100%;
    }

input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="tel"], textarea, select {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

.form-row {
        grid-template-columns: 1fr !important;
    }

.form-actions {
        flex-direction: column;
    }

.form-actions .btn {
        width: 100%;
    }

form [style*="display:grid"], form [style*="display: grid"] {
        grid-template-columns: 1fr !important;
    }

[style*="display: grid"][style*="gap: 16px"], [style*="display: grid"][style*="gap: 20px"], [style*="display:grid"][style*="gap: 16px"], [style*="display:grid"][style*="gap: 20px"] {
        grid-template-columns: 1fr !important;
    }

[style*="grid-template-columns:repeat(auto-fill"], [style*="grid-template-columns: repeat(auto-fill"], [style*="grid-template-columns:repeat(auto-fit"], [style*="grid-template-columns: repeat(auto-fit"], [style*="grid-template-columns: 1fr 1fr"], [style*="grid-template-columns:1fr 1fr"], [style*="grid-template-columns:repeat(2"], [style*="grid-template-columns: repeat(2"], [style*="grid-template-columns:repeat(3"], [style*="grid-template-columns: repeat(3"], [style*="grid-template-columns:repeat(4"], [style*="grid-template-columns: repeat(4"], [style*="grid-template-columns:2fr 1fr"], [style*="grid-template-columns: 2fr 1fr"], [style*="grid-template-columns:2fr 2fr"], [style*="grid-template-columns: 2fr 2fr"], [style*="grid-template-columns:3fr"], [style*="grid-template-columns: 3fr"] {
        grid-template-columns: 1fr !important;
    }

.line-item[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

.line-item input, .line-item select, .line-item textarea {
        width: 100% !important;
        min-width: 0 !important;
    }

[style*="display:grid"][style*="gap:16px"], [style*="display:grid"][style*="gap: 16px"], [style*="display: grid"][style*="gap:16px"], [style*="display: grid"][style*="gap: 16px"] {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

[style*="display:flex"][style*="justify-content:space-between"]:not([style*="flex-wrap"]), [style*="display: flex"][style*="justify-content:space-between"]:not([style*="flex-wrap"]), [style*="display: flex"][style*="justify-content: space-between"]:not([style*="flex-wrap"]) {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

[style*="display:flex"][style*="flex-wrap:wrap"], [style*="display: flex"][style*="flex-wrap:wrap"], [style*="display: flex"][style*="flex-wrap: wrap"], [style*="display:flex"][style*="flex-wrap: wrap"] {
        flex-direction: row !important;
    }

[style*="display:flex"][style*="gap:8px"], [style*="display:flex"][style*="gap:10px"], [style*="display:flex"][style*="gap:12px"], [style*="display: flex"][style*="gap: 8px"], [style*="display: flex"][style*="gap: 10px"], [style*="display: flex"][style*="gap: 12px"], [style*="display: flex"][style*="gap:8px"], [style*="display:flex"][style*="gap: 8px"], [style*="display:flex"][style*="gap: 10px"], [style*="display:flex"][style*="gap: 12px"] {
        flex-wrap: wrap !important;
    }

[style*="display:flex"] .btn, [style*="display: flex"] .btn {
        flex: 1 1 auto;
        min-width: 0;
    }

div[style*="justify-content:space-between"][style*="flex-wrap:wrap"], div[style*="justify-content:space-between"][style*="flex-wrap: wrap"], div[style*="justify-content: space-between"][style*="flex-wrap:wrap"], div[style*="justify-content: space-between"][style*="flex-wrap: wrap"] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

div[style*="justify-content:space-between"][style*="flex-wrap:wrap"] > div:last-child, div[style*="justify-content:space-between"][style*="flex-wrap: wrap"] > div:last-child, div[style*="justify-content: space-between"][style*="flex-wrap:wrap"] > div:last-child, div[style*="justify-content: space-between"][style*="flex-wrap: wrap"] > div:last-child {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

div[style*="display:flex"][style*="gap:8px"][style*="flex-wrap:wrap"], div[style*="display:flex"][style*="gap:10px"][style*="flex-wrap:wrap"], div[style*="display: flex"][style*="gap: 8px"][style*="flex-wrap: wrap"], div[style*="display: flex"][style*="gap: 10px"][style*="flex-wrap: wrap"], div[style*="display: flex"][style*="gap:8px"][style*="flex-wrap:wrap"], div[style*="display:flex"][style*="gap: 8px"][style*="flex-wrap: wrap"] {
        width: 100% !important;
    }

div[style*="display:flex"][style*="gap:8px"][style*="flex-wrap:wrap"] > .btn, div[style*="display:flex"][style*="gap:8px"][style*="flex-wrap:wrap"] > form, div[style*="display:flex"][style*="gap:10px"][style*="flex-wrap:wrap"] > .btn, div[style*="display:flex"][style*="gap:10px"][style*="flex-wrap:wrap"] > form, div[style*="display: flex"][style*="gap: 8px"][style*="flex-wrap: wrap"] > .btn, div[style*="display: flex"][style*="gap: 8px"][style*="flex-wrap: wrap"] > form, div[style*="display: flex"][style*="gap: 10px"][style*="flex-wrap: wrap"] > .btn, div[style*="display: flex"][style*="gap: 10px"][style*="flex-wrap: wrap"] > form {
        flex: 1 1 calc(50% - 6px);
        min-width: 120px;
    }

div[style*="display:flex"][style*="gap:8px"][style*="flex-wrap:wrap"] > form .btn, div[style*="display:flex"][style*="gap:10px"][style*="flex-wrap:wrap"] > form .btn, div[style*="display: flex"][style*="gap: 8px"][style*="flex-wrap: wrap"] > form .btn, div[style*="display: flex"][style*="gap: 10px"][style*="flex-wrap: wrap"] > form .btn {
        width: 100%;
    }

section[style*="max-width"], div[style*="max-width:300px"], div[style*="max-width: 300px"], div[style*="max-width:420px"], div[style*="max-width: 420px"], div[style*="max-width:500px"], div[style*="max-width: 500px"], div[style*="max-width:600px"], div[style*="max-width: 600px"], div[style*="max-width:800px"], div[style*="max-width: 800px"], div[style*="max-width:900px"], div[style*="max-width: 900px"], div[style*="max-width:1000px"], div[style*="max-width: 1000px"] {
        max-width: 100% !important;
    }

form[style*="max-width"] {
        max-width: 100% !important;
        padding: 0 !important;
    }

div[style*="repeat(auto-fit, minmax(300px"], div[style*="repeat(auto-fit, minmax(200px"], div[style*="repeat(auto-fill, minmax(300px"], div[style*="repeat(auto-fill, minmax(200px"] {
        grid-template-columns: 1fr !important;
    }

div[style*="display:grid"][style*="gap:24px"], div[style*="display:grid"][style*="gap: 24px"], div[style*="display: grid"][style*="gap:24px"], div[style*="display: grid"][style*="gap: 24px"], div[style*="display:grid"][style*="gap:20px"], div[style*="display:grid"][style*="gap: 20px"], div[style*="display: grid"][style*="gap:20px"], div[style*="display: grid"][style*="gap: 20px"] {
        gap: 16px !important;
    }

div[style*="overflow-x:auto"], div[style*="overflow-x: auto"], div[style*="overflow:auto"] {
        -webkit-overflow-scrolling: touch;
        max-width: 100vw;
        margin-left: -10px;
        margin-right: -10px;
        padding-left: 10px;
        padding-right: 10px;
    }

label {
        font-size: 0.85rem;
        word-break: break-word;
    }

fieldset {
        padding: 12px !important;
        margin: 0 0 16px 0 !important;
    }

textarea {
        min-height: 80px;
        resize: vertical;
    }

form[style*="display:flex"][style*="gap"], form[style*="display: flex"][style*="gap"] {
        flex-wrap: wrap !important;
    }

form[style*="display:flex"][style*="gap"] select, form[style*="display: flex"][style*="gap"] select {
        flex: 1 1 100% !important;
    }

form[style*="display:flex"][style*="gap"] .btn, form[style*="display: flex"][style*="gap"] .btn {
        flex: 1 1 auto;
    }

div[style*="border-left:"], div[style*="border-left :"], aside[style*="border-left:"] {
        border-left: none !important;
        border-top: 1px solid var(--border) !important;
        padding-left: 0 !important;
        padding-top: 16px !important;
    }

.money-value, [style*="font-weight:600"][style*="text-align:right"] {
        text-align: left !important;
    }

div[style*="background:var(--surface)"][style*="border-radius"] {
        padding: 14px !important;
    }

div[style*="border-bottom:"][style*="display:flex"][style*="gap"] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap !important;
    }

div[style*="border-bottom:"][style*="display:flex"][style*="gap"]::-webkit-scrollbar {
        display: none;
    }

div[style*="border-bottom:"][style*="display:flex"][style*="gap"] > a, div[style*="border-bottom:"][style*="display:flex"][style*="gap"] > button {
        white-space: nowrap;
        flex-shrink: 0;
    }

.page-header {
        flex-direction: column;
        gap: 12px;
    }

.page-header-content h1 {
        font-size: 1.5rem;
    }

.page-header-actions {
        float: none;
        width: 100%;
        justify-content: flex-start;
        margin-bottom: 4px;
    }

.bulk-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

.bulk-toolbar .btn {
        width: 100%;
        text-align: center;
    }

.page-stats {
        width: 100%;
    }

.stat-card {
        flex: 1 1 calc(50% - 6px);
        min-width: calc(50% - 6px);
    }

.search-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

.search-filter-bar .search-input-wrapper, .search-filter-bar .filter-select-wrapper {
        width: 100%;
        min-width: 100%;
    }

.search-filter-bar .btn-filter, .search-filter-bar .clear-filters {
        width: 100%;
        text-align: center;
    }

.btn-status-draft, .btn-status-available, .btn-status-sent, .btn-status-paid, .btn-status-overdue, .btn-status-void {
        width: 100%;
        margin-bottom: 8px;
    }

[style*="display:flex"][style*="gap:10px"] {
        flex-direction: column;
    }

.footer-nav {
        gap: 8px;
        flex-direction: column;
        align-items: center;
    }

.footer-nav a {
        font-size: 0.85rem;
        min-height: 44px;
        display: flex;
        align-items: center;
    }

.site-footer {
        padding: 24px 16px;
    }

.profile-tabs {
        display: none;
    }

.profile-tabs-mobile {
        display: block;
    }

.profile-section {
        padding: 16px;
    }

.dashboard-billing-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

.dashboard-billing-card {
        padding: 14px;
        border-radius: 8px;
    }

.dashboard-billing-card-value {
        font-size: 1.5em;
    }

.dashboard-recent-grid {
        grid-template-columns: 1fr;
    }

.portal .card, #portal .card {
        margin: 0;
        width: 100%;
    }

.ticket-header {
        flex-direction: column;
    }

.ticket-header-actions {
        width: 100%;
    }

.ticket-header-actions .btn {
        width: 100%;
    }

.ticket-message {
        gap: 8px;
    }

.ticket-message-avatar {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }

.ticket-info-grid, .ticket-settings-form {
        grid-template-columns: 1fr;
    }

.btn-group .btn, .action-buttons .btn {
        width: 100%;
        margin-bottom: 8px;
    }

.cta-section {
        padding: 32px 16px;
        margin: 32px 0 24px;
    }

.cta-section h2 {
        font-size: 1.4rem;
    }

.cs-layout {
        max-width: 100%;
        overflow: hidden;
    }

.cs-main, .cs-sidebar {
        max-width: 100%;
        overflow: hidden;
    }

.cs-profile {
        padding: 10px 14px;
        border-radius: 12px;
        margin-bottom: 14px;
    }

.cs-hero {
        gap: 12px;
    }

.cs-avatar {
        width: 44px;
        height: 44px;
        border-radius: 10px;
        font-size: 0.9rem;
    }

.cs-name {
        font-size: 1.1rem !important;
    }

.cs-topbar-actions {
        flex-wrap: wrap;
        gap: 2px;
    }

.cs-stats {
        padding: 10px 0;
    }

.cs-stat-val {
        font-size: 1rem;
    }

.cs-section {
        padding: 14px;
        border-radius: 10px;
        overflow-x: auto;
    }

.cs-section-head h2 {
        font-size: 0.82rem;
    }

.cs-card {
        padding: 12px;
    }

.cs-card-title, .cs-card-label {
        font-size: 0.78rem;
    }

.cs-field {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 4px 8px;
    }

.cs-field > i {
        display: none;
    }

.cs-field-lbl {
        min-width: 0;
        flex: 0 0 auto;
    }

.cs-field-lbl::after {
        content: ':';
        margin-left: 2px;
        margin-right: 8px;
        color: var(--text-2);
        font-weight: 600;
    }

.cs-field-val {
        flex: 1;
        min-width: 0;
    }

.cs-section .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        margin: 0 -14px;
        padding: 0 14px;
        box-sizing: content-box;
    }

.flex-wrap-center {
        gap: 6px !important;
    }

.flex-wrap-center .btn {
        font-size: 0.78rem !important;
        padding: 6px 10px !important;
    }

.cs-section h4 {
        font-size: 0.85rem;
    }

.mob-nav-palette {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--surface);
        z-index: 10000;
        flex-direction: column;
    }

.mob-nav-palette.open {
        display: flex;
    }

.mob-nav-palette-header {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 16px;
        border-bottom: 1px solid var(--border);
        flex-shrink: 0;
    }

.mob-nav-search-wrap {
        display: flex;
        align-items: center;
        flex: 1;
        background: var(--surface-2, var(--surface));
        border: 0px solid var(--border);
        border-radius: 8px;
        padding: 0 12px;
        height: 42px;
    }

.mob-nav-search-icon {
        color: var(--text-2);
        font-size: 0.9rem;
        margin-right: 8px;
        flex-shrink: 0;
    }

.mob-nav-search {
        flex: 1;
        border: none;
        background: transparent;
        font-size: 0.95rem;
        color: var(--text);
        outline: none;
        padding: 0;
        height: 100%;
    }

.mob-nav-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        border: none;
        background: none;
        color: var(--text-2);
        font-size: 1.2rem;
        cursor: pointer;
        border-radius: 8px;
        flex-shrink: 0;
    }

.mob-nav-close:hover { background: var(--btn-bg, rgba(128,128,128,0.1)); }

.mob-nav-body {
        flex: 1;
        overflow-y: auto;
        padding: 8px 16px 16px;
        -webkit-overflow-scrolling: touch;
    }

.mob-nav-group {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 2px;
        margin-bottom: 8px;
    }

.mob-nav-group.hidden { display: none !important; }

.mob-nav-group-title {
        grid-column: 1 / -1;
        font-size: 0.7rem;
        font-weight: 600;
        color: var(--text-2);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        padding: 8px 12px 4px;
    }

.mob-nav-item {
        display: flex !important;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        min-width: 0;
        color: var(--text) !important;
        text-decoration: none !important;
        font-size: 0.88rem;
        border-radius: 8px;
        transition: background 0.12s;
    }

.mob-nav-item:hover {
        background: var(--btn-bg, rgba(128,128,128,0.08));
        opacity: 1 !important;
    }

.mob-nav-item.active {
        background: var(--btn-bg, rgba(128,128,128,0.08));
        color: var(--primary) !important;
    }

.mob-nav-item.hidden { display: none !important; }

.mob-nav-item .bi {
        font-size: 1.1rem;
        width: 22px;
        text-align: center;
        color: var(--text-2);
        flex-shrink: 0;
    }

.mob-nav-item.active .bi { color: var(--primary); }

.mob-nav-empty {
        text-align: center;
        padding: 24px 16px;
        color: var(--text-2);
        font-size: 0.88rem;
    }

.mob-nav-footer {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch;
        border-top: 1px solid var(--border);
        flex-shrink: 0;
    }

.mob-nav-footer-item {
        flex: 1;
        display: flex !important;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 14px 4px;
        color: var(--text) !important;
        text-decoration: none !important;
        font-size: 0.8rem;
        transition: background 0.12s;
        white-space: nowrap;
    }

.mob-nav-footer-item .bi {
        font-size: 1.15rem;
    }

.mob-nav-footer-item:hover {
        background: var(--btn-bg, rgba(128,128,128,0.08));
        opacity: 1 !important;
    }

.mob-nav-footer-item.active {
        color: var(--primary) !important;
    }

.mob-nav-footer-item.mob-nav-logout {
        color: var(--danger) !important;
    }

.mob-nav-footer-item.mob-nav-logout:hover {
        background: rgba(220, 38, 38, 0.08);
    }
}

@media (max-width: 480px) {
.content {
        padding: 8px;
    }

.site-header {
        padding: 0 10px !important;
    }

h1 {
        font-size: 1.35rem !important;
    }

h2 {
        font-size: 1.1rem !important;
    }

.card {
        padding: 12px !important;
        border-radius: 8px !important;
    }

table {
        font-size: 0.75rem;
    }

table th, table td {
        padding: 6px 4px;
        font-size: 0.75rem;
    }

.page-table th, .page-table td {
        padding: 6px 4px;
        font-size: 0.75rem;
    }

.page-table th {
        font-size: 0.65rem;
    }

table[style*="min-width:720px"], table[style*="min-width:760px"], table[style*="min-width:700px"], table[style*="min-width"] {
        min-width: 0 !important;
        width: 100% !important;
    }

th[style*="width"], td[style*="width"] {
        width: auto !important;
    }

.item-actions .btn {
        padding: 3px 6px !important;
        font-size: 0.7rem !important;
        min-height: 36px;
    }

.btn {
        padding: 10px 12px;
        font-size: 0.875rem;
        width: 100%;
    }

.btn:not([style*="width"]):not(.btn-sm):not(.btn-xs) {
        width: 100% !important;
    }

.btn-sm, .btn-xs, .item-actions .btn, .list-card-actions .btn {
        width: auto !important;
    }

input, textarea, select {
        font-size: 16px !important;
    }

.auth-card {
        margin: 8px auto;
        padding: 14px;
    }

.dashboard-billing-grid {
        grid-template-columns: 1fr;
    }

.dashboard-billing-card-value {
        font-size: 1.35em;
    }

.dashboard-billing-card-title {
        font-size: 0.8rem;
    }

div[style*="display:flex"][style*="gap:8px"][style*="flex-wrap:wrap"] > .btn, div[style*="display:flex"][style*="gap:8px"][style*="flex-wrap:wrap"] > form, div[style*="display:flex"][style*="gap:10px"][style*="flex-wrap:wrap"] > .btn, div[style*="display:flex"][style*="gap:10px"][style*="flex-wrap:wrap"] > form, div[style*="display: flex"][style*="gap: 8px"][style*="flex-wrap: wrap"] > .btn, div[style*="display: flex"][style*="gap: 8px"][style*="flex-wrap: wrap"] > form, div[style*="display: flex"][style*="gap: 10px"][style*="flex-wrap: wrap"] > .btn, div[style*="display: flex"][style*="gap: 10px"][style*="flex-wrap: wrap"] > form {
        flex: 1 1 100% !important;
    }

.status-badge {
        font-size: 0.7rem !important;
        padding: 2px 8px !important;
    }

div[style*="background:var(--surface)"][style*="border-radius"] {
        padding: 10px !important;
    }

.line-item label {
        font-size: 0.75rem;
        margin-bottom: 2px;
    }

div[style*="color:var(--text-2)"][style*="display:flex"][style*="align-items:center"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
    }
}

@media (max-width: 768px) {
.list-cards.view-card {
        grid-template-columns: 1fr;
        padding: 12px;
    }
}

@media (max-width: 768px) {
.ctl-toggle-group {
        display: none !important;
    }
}

@media (max-width: 480px) {
.gt-tooltip {
        max-width: 95vw;
        padding: 18px 16px 14px;
    }

.gt-title {
        font-size: 1.05rem;
    }

.gt-actions {
        flex-wrap: wrap;
    }

.empty-state-enhanced {
        padding: 40px 16px;
    }

.empty-state-illustration {
        width: 90px;
        height: 90px;
    }

.empty-state-illustration i {
        font-size: 2.2rem;
    }

.empty-state-tips {
        flex-direction: column;
        align-items: center;
    }
}


@media (max-width: 768px) {
.home-hero-elegant {
        padding: 0.5rem 1.5rem 0.5rem 1.5rem;
        border-radius: 1rem;
    }

.hero-content-elegant {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

.hero-title-elegant {
        font-size: 2rem;
    }

.hero-tagline-elegant {
        font-size: 1.125rem;
    }

.hero-pricing-elegant {
        justify-content: center;
    }

.pricing-card-elegant {
        max-width: 100%;
    }

.features-grid-elegant {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin: 2rem 0;
    }

.feature-card-elegant {
        padding: 1.5rem;
    }

.cta-section-elegant {
        padding: 0.5rem 1.5rem 0.5rem 1.5rem;
        border-radius: 1rem;
    }

.cta-section-elegant h2 {
        font-size: 1.75rem;
    }

.cta-badges-elegant {
        flex-direction: column;
        align-items: center;
    }

.badge-elegant {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 480px) {
.home-hero-elegant {
        padding: 1.5rem 1rem;
    }

.hero-title-elegant {
        font-size: 1.75rem;
    }

.hero-tagline-elegant {
        font-size: 1rem;
    }

.pricing-card-elegant {
        padding: 1.5rem;
    }

.pricing-amount-elegant {
        font-size: 2.5rem;
    }

.cta-section-elegant {
        padding: 0.5rem 1.5rem 0.5rem 1.5rem;
    }

.cta-section-elegant h2 {
        font-size: 1.5rem;
    }
}

@media (max-width: 768px) {
.pricing-grid-elegant {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin: 1.5rem 0 2rem;
    }

.pricing-card-elegant {
        padding: 1.5rem;
    }

.pricing-plan-name {
        font-size: 1.25rem;
    }

.pricing-amount {
        font-size: 2rem;
    }

.pricing-faq-section {
        padding: 1.5rem;
        margin-top: 2rem;
    }

.pricing-faq-section h3 {
        font-size: 1.25rem;
    }
}

@media (max-width: 480px) {
.pricing-card-elegant {
        padding: 1.25rem;
    }

.pricing-badge {
        top: -10px;
        right: 15px;
        font-size: 0.75rem;
        padding: 0.25rem 0.75rem;
    }
}

@media (max-width: 768px) {
.support-hero { padding: 2rem 1rem 1.5rem; }

.support-hero h1 { font-size: 1.5rem; }

.support-hero-icon { width: 52px; height: 52px; font-size: 1.375rem; }

.support-cards-grid { grid-template-columns: 1fr; }

.support-cta { flex-direction: column; text-align: center; }

.support-cta-content { flex-direction: column; text-align: center; }

.support-cta-actions { justify-content: center; }

.support-faq-section { padding: 1.5rem; }

.support-faq-section h3 { font-size: 1.25rem; }

.support-search-wrap { max-width: 100%; }
}

@media (max-width: 640px) {
.portal-wrapper { padding: 0 12px; }

.portal-header-inner { padding: 0 12px; }

.portal-card { padding: 14px; }

.portal-table-wrap { border-radius: 10px; }

.portal-table thead th, .portal-table tbody td { padding: 10px 12px; }

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

.portal-tab span { display: none; }

.portal-tab { padding: 10px 12px; }
}

@media (max-width: 768px) {
.plan-display-section, .registration-form-section, .payment-section-placeholder {
        padding: 1.5rem;
    }

.plan-display-header {
        flex-direction: column;
        gap: 0.5rem;
    }

.registration-form-section > div[style*="grid"] {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 480px) {
.plan-display-section, .registration-form-section, .payment-section-placeholder {
        padding: 1rem;
    }

.plan-display-card {
        padding: 1rem;
    }

.plan-display-header h3 {
        font-size: 1.25rem;
    }

.plan-price-amount {
        font-size: 1.75rem;
    }
}

@media (max-width: 640px) {
.pro-coming-soon .hero-title {
        font-size: 1.5rem;
    }

.pro-coming-soon .hero-subtitle {
        font-size: 1rem;
    }

.pro-coming-soon .plan-showcase {
        padding: 1.25rem;
    }

.pro-coming-soon .plan-showcase-header {
        flex-direction: column;
        align-items: flex-start;
    }

.pro-coming-soon .plan-price-value {
        font-size: 1.75rem;
    }
}

@media (max-width: 768px) {
.ps-summary-row { grid-template-columns: repeat(3, 1fr); gap:6px; margin-bottom:10px; }

.ps-summary-card { padding:8px 6px; }

.ps-summary-card .sc-value { font-size:1rem; }

.ps-summary-card .sc-label { font-size:0.65rem; margin-top:2px; }

.ps-info-grid { grid-template-columns: 1fr; }

.ps-nav-layout { flex-direction: column; }

.ps-rail { flex-direction: row; flex-wrap: wrap; width: 100%; border-radius: 14px 14px 0 0; border: 1px solid var(--border); border-bottom: none; padding: 8px 6px; justify-content: center; gap: 4px; }

.ps-rail-divider { display: none; }

.ps-rail-btn { width: 36px; height: 36px; font-size: 1rem; }

.ps-rail-btn::before { left: 50%; top: auto; bottom: -6px; transform: translateX(-50%) translateY(0); width: 0; height: 3px; border-radius: 3px 3px 0 0; }

.ps-rail-btn:hover::before { width: 16px; height: 3px; }

.ps-rail-btn.active::before { width: 24px; height: 3px; }

.ps-rail-tooltip { display: none !important; }

.ps-content-panel { border-radius: 0 0 14px 14px; border: 1px solid var(--border); border-top: none; }

.ps-tab-content { padding: 16px 12px; }
}

@media (max-width: 768px) {
.plan-display-section, .registration-form-section {
        padding: 1.5rem;
    }

.plan-display-header {
        flex-direction: column;
        gap: 0.5rem;
    }

.registration-form-section > div[style*="grid"] {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 480px) {
.plan-display-section, .registration-form-section {
        padding: 1rem;
    }

.plan-display-card {
        padding: 1rem;
    }

.plan-display-header h3 {
        font-size: 1.25rem;
    }

.plan-price-amount {
        font-size: 1.75rem;
    }
}

@media (max-width: 768px) {
.list-cards.view-table {
        display: flex;
        flex-direction: column;
        gap: 0 !important;
        padding: 0;
        background: transparent;
    }

.list-cards.view-table .list-card {
        flex-direction: row;
        align-items: center;
        gap: 8px !important;
        padding: 10px 4px !important;
        border-radius: 0;
    }

.list-cards.view-table .list-card-body {
        flex: 1;
        min-width: 0;
    }

.list-cards.view-table .list-card-meta {
        max-height: 42px;
        overflow: hidden;
    }

.list-cards.view-table .list-card-end {
        flex: 0 0 auto;
        width: auto;
        margin: 0;
        padding: 0;
        border: 0;
    }

.list-cards.view-table .list-card-actions {
        flex-wrap: nowrap;
        margin-left: 0;
    }

.cs-score-group {
        gap: 4px;
    }

.cs-score-group .cs-health {
        width: 56px;
    }
}