.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 10001;
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    pointer-events: none;
    max-width: 400px;
}

.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-radius: 10px;
    background: var(--surface);
    border: 1px solid var(--border-2);
    box-shadow: 0 6px 24px rgba(0,0,0,0.18);
    color: var(--text);
    font-size: 0.9rem;
    pointer-events: auto;
    animation: toast-in 0.3s ease;
    position: relative;
    overflow: hidden;
}

.toast.toast-out {
    animation: toast-out 0.25s ease forwards;
}

.toast-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.toast-success .toast-icon { color: var(--success, #22c55e); }

.toast-error .toast-icon { color: var(--danger, #ef4444); }

.toast-info .toast-icon { color: var(--primary, #2563eb); }

.toast-warning .toast-icon { color: var(--warning, #f59e0b); }

.toast-message {
    flex: 1;
    line-height: 1.4;
}

.toast-close {
    background: none;
    border: none;
    color: var(--text-2);
    cursor: pointer;
    padding: 4px;
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
    border-radius: 4px;
}

.toast-close:hover {
    color: var(--text);
    background: var(--btn-bg);
}

.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--primary, #2563eb);
    border-radius: 0 0 10px 10px;
    transition: width linear;
}

.toast-success .toast-progress { background: var(--success, #22c55e); }

.toast-error .toast-progress { background: var(--danger, #ef4444); }

.toast-warning .toast-progress { background: var(--warning, #f59e0b); }

@keyframes toast-in {
    from { opacity: 0; transform: translateY(16px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toast-out {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(16px) scale(0.96); }
}

.field-wrapper.is-invalid .validation-icon.icon-invalid { display: block; color: var(--danger, #ef4444); }

.field-wrapper.is-invalid input, .field-wrapper.is-invalid select, .field-wrapper.is-invalid textarea {
    border-color: var(--danger, #ef4444);
    padding-right: 36px;
}

.field-wrapper.is-invalid .field-error-text {
    display: block;
}

.btn-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.7;
}

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

.btn-loading::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    top: 50%;
    left: 50%;
    margin-top: -9px;
    margin-left: -9px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: btn-spin 0.6s linear infinite;
}

@keyframes btn-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.btn, button:not(.ps-rail-btn), a.nav-icon-button, .notification-bell, .theme-switcher-btn, .nav-more-btn, .list-card-actions .btn {
    min-height: 44px;
    min-width: 44px;
}

[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 10px;
    background: var(--text);
    color: var(--surface);
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 5px;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}

[data-tooltip]::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: var(--text);
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}

[data-tooltip]:hover::after, [data-tooltip]:hover::before, [data-tooltip]:focus-visible::after, [data-tooltip]:focus-visible::before {
    opacity: 1;
}

.longpress-tooltip {
    position: fixed;
    transform: translateX(-50%) translateY(-100%);
    padding: 6px 12px;
    background: var(--text);
    color: var(--surface);
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 6px;
    white-space: nowrap;
    z-index: 10001;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.longpress-tooltip.visible {
    opacity: 1;
}

.longpress-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--text);
}

.status-badge .status-icon {
    font-size: 0.75em;
    margin-right: 2px;
}

.alert[data-auto-dismiss] {
    position: relative;
    overflow: hidden;
}

.alert[data-auto-dismiss] .alert-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: currentColor;
    opacity: 0.3;
    border-radius: 0 0 10px 10px;
    animation: alert-dismiss-progress linear forwards;
}

@keyframes alert-dismiss-progress {
    from { width: 100%; }
    to { width: 0%; }
}

.alert .alert-close {
    background: none;
    border: none;
    color: inherit;
    opacity: 0.6;
    cursor: pointer;
    padding: 4px 8px;
    font-size: 1.1rem;
    float: right;
    line-height: 1;
    margin: -4px -4px 0 8px;
}

.alert .alert-close:hover {
    opacity: 1;
}

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

.quick-access-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: var(--btn-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.8rem;
    color: var(--text-2);
    text-decoration: none;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.quick-access-item:hover {
    background: var(--btn-bg-hover);
    color: var(--text);
    border-color: var(--border-2);
}

.quick-access-item.active {
    background: var(--primary-light, rgba(37,99,235,0.07));
    color: var(--primary, #2563eb);
    border-color: var(--primary, #2563eb);
}

.accordion-section {
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 12px;
    overflow: hidden;
}

.accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: var(--surface-2);
    border: none;
    width: 100%;
    cursor: pointer;
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 600;
    transition: background 0.15s;
}

.accordion-header:hover {
    background: var(--btn-bg-hover);
}

.accordion-header .accordion-chevron {
    transition: transform 0.2s ease;
    font-size: 0.85rem;
    color: var(--text-2);
}

.accordion-section.open .accordion-header .accordion-chevron {
    transform: rotate(180deg);
}

.accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.accordion-section.open .accordion-body {
    max-height: 5000px;
}

.accordion-body-inner {
    padding: 18px;
}

.pagination-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 20px;
    margin-top: 0;
    border-top: 1px solid var(--border);
}

.pagination-controls span.active {
    background: var(--primary, #2563eb);
    color: #fff;
    border-color: var(--primary, #2563eb);
}

.pagination-controls span.disabled {
    opacity: 0.4;
    pointer-events: none;
}

.pagination-per-page {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-2);
}

.pagination-per-page select {
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 0.85rem;
}

.my-items-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--text-2);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.my-items-toggle:hover {
    background: var(--btn-bg);
    color: var(--text);
}

.my-items-toggle.active {
    background: var(--primary-light, rgba(37,99,235,0.07));
    color: var(--primary, #2563eb);
    border-color: var(--primary, #2563eb);
}

.my-items-toggle input[type="checkbox"] {
    accent-color: var(--primary, #2563eb);
}

.view-toggle {
    display: inline-flex;
    overflow: hidden;
}

.view-toggle-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0;
    padding: 8px 20px;
    border-bottom: 1px solid var(--border);
}

.view-toggle-btn {
    background: var(--surface);
    border: none !important;
    padding: 6px 12px !important;
    cursor: pointer;
    color: var(--text-2);
    font-size: 0.9rem;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 4px;
}

.view-toggle-btn:hover {
    background: var(--btn-bg);
    color: var(--text);
}

.list-cards.view-table {
    gap: 0;
    border: none;
    border-radius: 0;
    overflow: hidden;
}

.list-cards.view-table .list-card {
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--border);
    padding: 10px 20px;
    gap: 12px;
}

.list-cards.view-table .list-card:last-child {
    border-bottom: none;
}

.list-cards.view-table .list-card:hover {
    box-shadow: none;
    background: var(--surface-2);
}

.list-cards.view-table .list-card-meta {
    flex-direction: row;
    margin-top: 2px;
    gap: 4px 12px;
    font-size: 0.8rem;
}

.list-cards.view-table .list-card-title {
    font-size: 0.88rem;
}

@media (min-width: 769px) {
.list-cards.view-table .list-card-actions {
        opacity: 1;
    }
}

.list-cards:not(.view-table) {
    display: block;
    padding: 0;
    gap: 0;
    background: var(--surface);
    border: none;
    border-top: 1px solid var(--border);
}

.list-cards:not(.view-table) .list-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 12px 20px;
    border: none;
    border-bottom: 1px solid var(--border-2);
    border-radius: 0;
    align-self: auto;
    position: relative;
    transition: background 0.12s ease;
}

.list-cards:not(.view-table) .list-card:last-child {
    border-bottom: none;
}

.list-cards:not(.view-table) .list-card:hover {
    background: var(--surface-2);
    border-color: var(--border-2);
    box-shadow: none;
}

.list-cards:not(.view-table) .list-card-check {
    position: static;
    top: auto;
    right: auto;
    flex: 0 0 auto;
    opacity: 0.55;
}

.list-cards:not(.view-table) .list-card:hover .list-card-check {
    opacity: 1;
}

.list-cards:not(.view-table) .list-card-body {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    display: block;
}

.list-cards:not(.view-table) .list-card-title {
    display: inline;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text);
    margin: 0;
    padding: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.list-cards:not(.view-table) a.list-card:hover .list-card-title, .list-cards:not(.view-table) .list-card-title:hover {
    color: var(--primary);
}

.list-cards:not(.view-table) .list-card-id {
    display: inline;
    margin-left: 8px;
    margin-bottom: 0;
    font-size: 0.75rem;
    color: var(--muted);
}

.list-cards:not(.view-table) .list-card-meta {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 3px 16px;
    margin-top: 3px;
    font-size: 0.82rem;
}

.list-cards:not(.view-table) .list-card-end {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 0;
    border-top: none;
    margin-top: 0;
}

.list-cards:not(.view-table) .list-card-amount {
    font-size: 0.9375rem;
    text-align: right;
}

.list-cards:not(.view-table) .list-card-end > .status-badge {
    align-self: center;
}

.list-cards:not(.view-table) .list-card-actions {
    justify-content: flex-end;
}

@media (min-width: 769px) {
.list-cards:not(.view-table) .list-card-actions {
        opacity: 0;
        transition: opacity 0.15s ease;
    }

.list-cards:not(.view-table) .list-card:hover .list-card-actions {
        opacity: 1;
    }
}

.inline-edit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.15s;
}

.inline-edit:hover {
    background: var(--btn-bg);
}

.inline-edit .inline-edit-icon {
    font-size: 0.8rem;
    color: var(--text-2);
    opacity: 0;
    transition: opacity 0.15s;
}

.inline-edit:hover .inline-edit-icon {
    opacity: 1;
}

.inline-edit-field {
    display: none;
    gap: 6px;
    align-items: center;
}

.inline-edit-field.active {
    display: inline-flex;
}

.inline-edit-field input, .inline-edit-field select, .inline-edit-field textarea {
    padding: 6px 10px;
    border: 1px solid var(--primary, #2563eb);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font-size: 0.9rem;
}

.inline-edit-field .inline-edit-save, .inline-edit-field .inline-edit-cancel {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    font-size: 0.9rem;
}

.inline-edit-field .inline-edit-save {
    color: var(--success, #22c55e);
}

.inline-edit-field .inline-edit-cancel {
    color: var(--danger, #ef4444);
}

.li-mob-modal {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 10002;
    align-items: flex-end;
    justify-content: center;
}

.li-mob-modal.open { display: flex; }

.li-mob-modal-content {
    background: var(--surface);
    width: 100%;
    max-height: 90vh;
    border-radius: 16px 16px 0 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: liMobSlideUp 0.2s ease;
}

@keyframes liMobSlideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.li-mob-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 12px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.li-mob-modal-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
}

.li-mob-modal-close {
    background: none;
    border: none;
    color: var(--text-2);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px;
}

.li-mob-modal-body {
    padding: 16px;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.li-mob-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-2);
}

.li-mob-field input, .li-mob-field select {
    font-size: 0.95rem;
    font-weight: 400;
}

.li-mob-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.li-mob-computed {
    display: flex;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--surface-2);
    border-radius: 8px;
    font-size: 0.88rem;
    color: var(--text-2);
}

.li-mob-computed strong { color: var(--text); }

.li-mob-modal-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

.li-mob-delete {
    margin-left: auto;
    color: var(--danger) !important;
}

@media (min-width: 769px) {
.li-mob-cards { display: none !important; }

.li-mob-modal { display: none !important; }
}

.adjust-note-cell {
    padding: 4px 10px 10px;
    border-bottom: 1px solid var(--border-2);
}

.adjust-note {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--bg-2);
    border-radius: 6px;
    font-size: 0.8rem;
    color: var(--warning, #d97706);
    word-break: break-word;
    overflow-wrap: break-word;
    text-wrap:auto;
}

.section-subtitle {
    margin: 16px 0 8px;
    font-size: 0.95rem;
}

.cn-amount-cell {
    text-align: right;
    font-weight: 600;
    color: var(--accent-purple, #8b5cf6);
}

.record-payment-form {
    border-top: 1px solid var(--border-2);
    padding-top: 16px;
}

.fc-agenda-list {
    display: none;
}

.ps-summary-toggle {
    display: none;
}

@media (min-width: 769px) {
.ps-rail-btn .ps-rail-label {
        display: none;
    }
}

.ps-rail-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ps-rail-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}

.code-input-group {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.code-input-group input, .code-input-digit {
    width: 52px;
    height: 58px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    border: 2px solid var(--border-2);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    transition: border-color 0.2s ease;
}

.code-input-group input:focus {
    outline: none;
    border-color: var(--primary, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.code-input-group input::selection {
    background: var(--primary-light, rgba(37,99,235,0.15));
}

.report-date-range {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    padding: 12px 16px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 20px;
}

.report-date-range label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-2);
}

.report-date-range select, .report-date-range input[type="date"] {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font-size: 0.85rem;
}

.report-date-range .custom-dates {
    display: none;
    gap: 8px;
    align-items: center;
}

.report-date-range .custom-dates.active {
    display: flex;
}

.show-actions .btn {
    transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.show-actions .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.show-actions .btn:active {
    transform: translateY(0);
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    font-size: 0.8rem;
    white-space: nowrap;
    line-height: 1.3;
}

.status-badge-success { background: rgba(34,197,94,0.12); color: var(--success, #16a34a); }

.status-badge-warning { background: rgba(245,158,11,0.12); color: var(--warning, #d97706); }

.status-badge-danger { background: rgba(239,68,68,0.12); color: var(--danger, #dc2626); }

.show-card h2 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 8px;
}

.detail-label {
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.03em;
}

.list-card:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 12px rgba(37, 99, 235, 0.08);
}

.list-card-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.form-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.bulk-toolbar {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.page-stats {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.page-stats .stat-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--text-2);
}

.page-stats .stat-value {
    font-weight: 700;
    color: var(--text);
}

.admin-sidebar.open {
    transform: translateX(0);
}

.admin-sidebar.open ~ .admin-sidebar-toggle {
    left: 232px;
}

.admin-sidebar-link.active {
    background: var(--primary-light, rgba(37,99,235,0.07));
    color: var(--primary, #2563eb);
    font-weight: 600;
}

.admin-sidebar.open ~ .admin-sidebar-overlay {
    display: block;
}

@media (min-width: 769px) {
.admin-sidebar.open ~ .content {
        margin-left: 220px;
        transition: margin-left 0.25s ease;
    }
}

.portal-payment-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--success, #22c55e);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
    text-decoration: none;
}

.portal-payment-btn:hover {
    opacity: 0.9;
    color: #fff;
}

.page-table-wrapper, .table-container {
    overflow-y: auto;
}

.page-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--surface);
    box-shadow: 0 1px 0 var(--border);
}

.ctx-menu {
    position: fixed;
    z-index: 10002;
    min-width: 180px;
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    padding: 6px 0;
    display: none;
    animation: ctx-in 0.12s ease;
}

.ctx-menu.show { display: block; }

.ctx-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    font-size: 0.875rem;
    color: var(--text);
    text-decoration: none;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

.ctx-menu-item:hover { background: var(--bg-2, var(--bg)); }

.ctx-menu-item i { font-size: 1rem; color: var(--text-2); width: 18px; text-align: center; }

.ctx-menu-item.danger { color: var(--danger); }

.ctx-menu-item.danger i { color: var(--danger); }

.ctx-menu-sep { height: 1px; background: var(--border); margin: 4px 0; }

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

.cmd-palette-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 10010;
    display: none;
    justify-content: center;
    padding-top: 12vh;
    backdrop-filter: blur(2px);
}

.cmd-palette-overlay.show { display: flex; }

.cmd-palette {
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: 14px;
    width: 92%;
    max-width: 620px;
    max-height: 60vh;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.28);
    display: flex;
    flex-direction: column;
    animation: cmd-in 0.15s ease;
}

@keyframes cmd-in { from { opacity:0; transform:translateY(-12px) scale(0.97); } to { opacity:1; transform:none; } }

.cmd-palette-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-2);
}

.cmd-palette-search i { font-size: 1.1rem; color: var(--text-2); }

.cmd-palette-search input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 1.05rem;
    color: var(--text);
    outline: none;
}

.cmd-palette-results {
    flex: 1;
    overflow-y: auto;
    padding: 6px;
}

.cmd-palette-group-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-2);
    padding: 8px 12px 4px;
}

.cmd-palette-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--text);
    cursor: pointer;
    font-size: 0.9rem;
}

.cmd-palette-item:hover, .cmd-palette-item.active { background: var(--bg-2, var(--bg)); }

.cmd-palette-item i { font-size: 1rem; color: var(--text-2); width: 20px; text-align: center; }

.cmd-palette-item .cmd-shortcut {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--text-2);
    background: var(--bg);
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid var(--border);
}

.cmd-palette-footer {
    padding: 8px 14px;
    border-top: 1px solid var(--border-2);
    display: flex;
    gap: 16px;
    font-size: 0.75rem;
    color: var(--text-2);
}

.cmd-palette-footer kbd {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 0.7rem;
    margin-right: 4px;
}

.cs-lead-banner { padding:10px 16px; background:var(--primary-light,rgba(37,99,235,0.07)); border-radius:10px; font-size:0.85rem; color:var(--text); margin-bottom:16px; display:flex; align-items:center; gap:8px; }

.cs-lead-banner a { color:var(--primary); text-decoration:underline; }

.cs-profile { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:10px 24px; margin-bottom:20px; }

.cs-topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }

.cs-back { width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:8px; color:var(--text-2); border:1px solid var(--border); transition:all 0.15s; text-decoration:none; font-size:0.9rem; }

.cs-back:hover { background:var(--bg-2,var(--bg)); color:var(--text); }

.cs-topbar-actions { display:flex; gap:4px; align-items:center; }

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

.cs-action-icon { -webkit-appearance:none; -moz-appearance:none; appearance:none; width: 44px; height:44px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; color:var(--text-2); border:1px solid transparent; background:transparent; cursor:pointer; transition:all 0.15s; font-size:0.85rem; text-decoration:none; padding:0; margin:0; font-family:inherit; font-weight:normal; line-height:1; box-sizing:border-box; vertical-align:middle; outline:none; flex-shrink:0; text-align:center; letter-spacing:normal; white-space:nowrap; -webkit-user-select:none; user-select:none; }

a.cs-action-icon, button.cs-action-icon, .cs-topbar-actions form button.cs-action-icon, .cs-topbar-actions button.cs-action-icon[type="submit"] {
    height:44px !important; width:44px !important; min-width:44px !important; min-height:44px !important; max-width:44px !important; max-height:44px !important;
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
    padding:0 !important; margin:0 !important;
    border:1px solid transparent !important; border-radius:8px !important;
    background:transparent !important; color:var(--text-2) !important;
    font-size:1.2rem !important; font-weight:normal !important; line-height:1 !important;
    text-decoration:none !important; box-shadow:none !important;
    -webkit-appearance:none !important; -moz-appearance:none !important; appearance:none !important;
}

a.cs-action-icon:hover, button.cs-action-icon:hover, .cs-topbar-actions form button.cs-action-icon:hover { background:var(--bg-2,var(--bg)) !important; border-color:var(--border) !important; color:var(--text) !important; }

a.cs-action-icon.cs-action-danger:hover, button.cs-action-icon.cs-action-danger:hover { color:var(--danger) !important; border-color:rgba(239,68,68,0.2) !important; background:rgba(239,68,68,0.05) !important; }

.cs-hero { display:flex; align-items:flex-start; gap:18px; }

.cs-avatar { width:56px; height:56px; border-radius:14px; background:linear-gradient(135deg, var(--primary), #7c3aed); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.1rem; letter-spacing:0.5px; flex-shrink:0; }

.cs-hero-info { flex:1; min-width:0; }

.cs-name { font-size:1.35rem; font-weight:700; margin:0 0 4px; color:var(--text); line-height:1.2; }

.cs-meta { display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:0.8rem; color:var(--text-2); margin-bottom:8px; }

.cs-id { background:var(--bg-2,var(--bg)); padding:2px 8px; border-radius:6px; font-family:monospace; font-size:0.75rem; }

.cs-company i, .cs-source { opacity:0.7; }

.cs-tag-add { display:inline-block; position:relative; }

.cs-tag-add input { width:80px; height:24px; font-size:0.75rem; padding:2px 8px; border-radius:12px; border:1px dashed var(--border); background:transparent; color:var(--text); outline:none; transition:border-color 0.15s, width 0.2s; }

.cs-tag-add input:focus { width:120px; border-color:var(--primary); border-style:solid; }

.cs-score-group { display:flex; align-items:flex-start; gap:10px; flex-shrink:0; }

.cs-health { text-align:center; flex-shrink:0; position:relative; width:64px; }

.cs-health-link { color:inherit; text-decoration:none; }

.cs-health-link:hover { color:inherit; text-decoration:none; }

.cs-health-ring { width:48px; height:48px; margin:0 auto; display:block; }

.cs-health-value { font-size:0.95rem; font-weight:700; position:absolute; top:12px; left:50%; transform:translateX(-50%); }

.cs-health-label { font-size:0.7rem; color:var(--text-2); margin-top:2px; text-transform:uppercase; letter-spacing:0.3px; }

.cs-stats { display:flex; gap:0; margin-top:18px; border-top:1px solid var(--border); padding-top:14px; }

.cs-stat { flex:1; text-align:center; position:relative; }

.cs-stat + .cs-stat::before { content:''; position:absolute; left:0; top:4px; bottom:4px; width:1px; background:var(--border); }

.cs-stat-val { font-size:1.2rem; font-weight:700; color:var(--text); line-height:1.2; }

.cs-stat-lbl { font-size:0.7rem; color:var(--text-2); text-transform:uppercase; letter-spacing:0.4px; margin-top:2px; }

.form.form-no-margin {width:100%;}

.cs-layout { display:grid; grid-template-columns:300px 1fr; gap:20px; align-items:start; }

.cs-sidebar { display:flex; flex-direction:column; gap:12px; min-width:0; }

.cs-card { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px; }

.cs-card-label, .cs-card-title { font-size:0.75rem; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-2); margin-bottom:12px; display:flex; align-items:center; justify-content:space-between; }

.cs-card-add { min-width:32px; min-height:32px; display:flex; align-items:center; justify-content:center; border-radius:6px; border:1px dashed var(--border); background:transparent; color:var(--text-2); cursor:pointer; font-size:0.75rem; transition:all 0.15s; }

.cs-card-add:hover { border-color:var(--primary); color:var(--primary); border-style:solid; }

.cs-field { display:flex; align-items:flex-start; gap:10px; padding:6px 0; font-size:0.85rem; color:var(--text); }

.cs-field > i { color:var(--text-2); font-size:0.8rem; margin-top:2px; flex-shrink:0; }

.cs-field a { color:var(--text); text-decoration:none; }

.cs-field a:hover { color:var(--primary); }

.cs-field-lbl { flex:0 0 auto; min-width:90px; font-size:0.8rem; font-weight:600; text-transform:uppercase; letter-spacing:0.3px; color:var(--text-2); padding-top:1px; }

.cs-field-val { flex:1; font-size:0.85rem; color:var(--text); }

.cs-field-val-bold { font-weight:700; }

.cs-edit-hint { font-size:0.7rem; opacity:0; transition:opacity 0.15s; color:var(--text-2); margin-left:4px; }

.cs-field:hover .cs-edit-hint { opacity:0.6; }

.task-complete-btn { color:var(--text-2); transition:color 0.15s; }

.task-complete-btn:hover { color:var(--success, #22c55e) !important; }

.rating-dist-row { display:flex; align-items:center; gap:10px; }

.rating-dist-label { min-width:36px; font-size:0.9rem; font-weight:600; color:var(--text); white-space:nowrap; }

.rating-dist-count { min-width:24px; font-size:0.85rem; font-weight:600; color:var(--primary); text-align:right; }

.progress-bar-track { flex:1; height:10px; background:var(--border); border-radius:6px; overflow:hidden; }

.progress-bar-fill { height:100%; border-radius:6px; transition:width 0.3s ease; }

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

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

.progress-bar-fill.fill-primary { background:var(--primary); }

.progress-bar-fill.fill-danger { background:var(--danger); }

.approval-banner { padding:14px 18px; border-radius:10px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

.approval-icon { font-size:1.3rem; }

.approval-body { flex:1; }

.approval-note { font-size:0.85rem; color:var(--text-2); margin-top:2px; }

.approval-meta { font-size:0.8rem; color:var(--text-2); margin-top:2px; }

.approval-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; width:100%;}

.approval-btn { font-size:0.85rem; padding:6px 12px; width:100%;}

.approval-form { margin:0; width:100%; }

.approval-pending { background:rgba(245,158,11,0.09); border:1px solid rgba(245,158,11,0.2); }

.approval-pending .approval-icon, .approval-pending .approval-label { color:var(--warning, #f59e0b); }

.approval-pending .approval-btn { color:var(--warning, #f59e0b); border:1px solid rgba(245,158,11,0.27); }

.approval-approved { background:rgba(34,197,94,0.09); border:1px solid rgba(34,197,94,0.2); }

.approval-approved .approval-icon, .approval-approved .approval-label { color:var(--success, #22c55e); }

.approval-approved .approval-btn { color:var(--success, #22c55e); border:1px solid rgba(34,197,94,0.27); }

.approval-rejected { background:rgba(239,68,68,0.09); border:1px solid rgba(239,68,68,0.2); }

.approval-rejected .approval-icon, .approval-rejected .approval-label { color:var(--danger, #ef4444); }

.approval-rejected .approval-btn { color:var(--danger, #ef4444); border:1px solid rgba(239,68,68,0.27); }

.approval-btn-warn { color:var(--warning, #f59e0b); border:1px solid rgba(245,158,11,0.27); }

.approval-unknown { background:rgba(107,114,128,0.09); border:1px solid rgba(107,114,128,0.2); }

.approval-unknown .approval-icon, .approval-unknown .approval-label { color:var(--muted, #6b7280); }

.approval-unknown .approval-btn { color:var(--muted, #6b7280); border:1px solid rgba(107,114,128,0.27); }

.approval-none { background:rgba(59,130,246,0.09); border:1px solid rgba(59,130,246,0.2); }

.approval-none .approval-icon, .approval-none .approval-label { color:var(--primary, #3b82f6); }

.approval-btn-info { color:var(--primary, #3b82f6); border:1px solid rgba(59,130,246,0.27); }

.cs-notes-text { color:var(--text-2); font-size:0.85rem; line-height:1.6; white-space:pre-wrap; }

.cs-edit-btns { display:flex; gap:4px; margin-top:6px; }

.cs-save { padding:4px 12px; border-radius:6px; background:var(--primary); color:#fff; border:none; font-size:0.75rem; cursor:pointer; }

.cs-cancel { min-width:32px; min-height:32px; display:flex; align-items:center; justify-content:center; border-radius:6px; border:1px solid var(--border); background:transparent; color:var(--text-2); cursor:pointer; font-size:0.9rem; }

.cs-contact-form { display:flex; flex-direction:column; gap:6px; }

.cs-contact-form .form-input { padding:6px 10px; font-size:0.8rem; }

.cs-checkbox { display:flex; align-items:center; gap:6px; font-size:0.8rem; color:var(--text-2); cursor:pointer; }

.cs-check-toggle { background:none; border:none; cursor:pointer; font-size:1.3rem; padding:0; }

.cs-check-icon { font-size:1.3rem; }

.ms-payment-badge { display:inline-block; margin-left:8px; padding:2px 8px; border-radius:4px; font-size:0.75rem; font-weight:600; }

.cs-contact { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--border); }

.cs-contact:last-of-type { border-bottom:none; }

.cs-contact-avatar { width:30px; height:30px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-size:0.7rem; font-weight:600; flex-shrink:0; }

.cs-contact-info { flex:1; min-width:0; }

.cs-contact-name { font-size:0.85rem; font-weight:600; color:var(--text); display:flex; align-items:center; gap:6px; }

.cs-primary-dot { width:7px; height:7px; border-radius:50%; background:#22c55e; display:inline-block; }

.cs-contact-role { font-size:0.75rem; color:var(--text-2); }

.cs-contact-link { font-size:0.75rem; color:var(--text-2); text-decoration:none; }

.cs-contact-link:hover { color:var(--primary); }

.cs-contact-actions { display:flex; gap:2px; opacity:0; transition:opacity 0.15s; }

.cs-contact:hover .cs-contact-actions { opacity:1; }

.cs-mini-btn { min-width:32px; min-height:32px; display:inline-flex; align-items:center; justify-content:center; border-radius:6px; border:none; background:transparent; color:var(--text-2); cursor:pointer; font-size:0.75rem; transition:all 0.15s; }

.cs-mini-btn:hover { background:var(--bg-2,var(--bg)); color:var(--text); }

.cs-mini-danger:hover { color:var(--danger); background:rgba(239,68,68,0.08); }

.cs-main { display:flex; flex-direction:column; gap:16px; min-width:0; }

.cs-section { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:18px 20px; overflow:hidden; }

.cs-section-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }

.cs-section-head h2 { font-size:0.95rem; font-weight:600; color:var(--text); margin:0; display:flex; align-items:center; gap:8px; }

.cs-section-head h2 i { color:var(--text-2); font-size:0.85rem; }

.cs-link-action { font-size:0.8rem; color:var(--primary); text-decoration:none; display:flex; align-items:center; gap:3px; opacity:0.7; transition:opacity 0.15s; }

.cs-link-action:hover { opacity:1; }

.cs-financials-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:12px; }

.cs-fin-card { display:flex; align-items:center; gap:12px; padding:14px; border-radius:10px; border:1px solid var(--border); background:var(--bg-2,var(--bg)); }

.cs-fin-icon { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; }

.cs-fin-detail { min-width:0; }

.cs-fin-label { font-size:0.75rem; color:var(--text-2); margin-bottom:2px; white-space:nowrap; }

.cs-fin-value { font-size:0.95rem; font-weight:700; color:var(--text); white-space:nowrap; }

.cs-items { display:flex; flex-direction:column; gap:2px; }

.cs-item { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-radius:8px; text-decoration:none; color:var(--text); transition:background 0.12s; gap:12px; }

.cs-item:hover { background:var(--bg-2,var(--bg)); }

.cs-item-main { display:flex; align-items:center; gap:8px; flex:1; min-width:0; }

.cs-item-icon { color:var(--text-2); font-size:0.8rem; flex-shrink:0; }

.cs-item-title { font-size:0.85rem; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.cs-item-date { font-size:0.75rem; color:var(--text-2); flex-shrink:0; margin-left:auto; }

.cs-status { font-size:0.7rem; font-weight:500; padding:3px 9px; border-radius:6px; background:var(--bg-2,var(--bg)); color:var(--text-2); white-space:nowrap; text-transform:capitalize; }

.cs-status-active, .cs-status-in_progress { background:rgba(37,99,235,0.08); color:var(--primary); }

.cs-status-completed, .cs-status-done { background:rgba(34,197,94,0.08); color:#22c55e; }

.cs-status-planned, .cs-status-draft { background:var(--bg-2,var(--bg)); color:var(--text-2); }

.cs-status-on_hold, .cs-status-cancelled { background:rgba(239,68,68,0.06); color:var(--danger); }

.cs-follow-up { font-size:0.7rem; color:var(--text-2); display:flex; align-items:center; gap:3px; white-space:nowrap; }

.cs-follow-up.overdue { color:var(--danger); }

.cs-quick-link { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-radius:8px; border:1px solid var(--border); text-decoration:none; color:var(--text); font-size:0.85rem; transition:all 0.15s; }

.cs-quick-link:hover { border-color:var(--primary); background:var(--primary-light,rgba(37,99,235,0.04)); }

.cs-quick-link i { color:var(--text-2); transition:transform 0.15s; }

.cs-quick-link:hover i { transform:translateX(3px); color:var(--primary); }

.cs-view-all { display:block; text-align:center; font-size:0.8rem; color:var(--primary); padding:8px 0 0; text-decoration:none; }

.cs-empty-text { color:var(--text-2); font-size:0.8rem; margin:0; }

.cs-empty-text a { color:var(--primary); }

.cs-note-input { display:flex; gap:8px; margin-bottom:14px; align-items:flex-end; }

.cs-note-input textarea { flex:1; border:1px solid var(--border); border-radius:10px; padding:10px 12px; background:var(--bg); color:var(--text); font-size:0.85rem; resize:none; outline:none; transition:border-color 0.15s; font-family:inherit; min-height:42px; }

.cs-note-input textarea:focus { border-color:var(--primary); }

.cs-note-input button { width:36px; height:36px; border-radius:10px; border:none; background:var(--primary); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:0.9rem; flex-shrink:0; transition:opacity 0.15s; }

.cs-note-input button:hover { opacity:0.85; }

.cs-note { position:relative; padding:10px 14px; border-radius:10px; background:var(--bg-2,var(--bg)); margin-bottom:6px; }

.cs-note-meta { font-size:0.7rem; color:var(--text-2); margin-bottom:4px; }

.cs-note-body { font-size:0.85rem; color:var(--text); line-height:1.5; white-space:pre-wrap; }

.cs-note .cs-mini-btn { position:absolute; top:8px; right:8px; opacity:0; transition:opacity 0.15s; }

.cs-note:hover .cs-mini-btn { opacity:1; }

.tag-list { display: flex; flex-wrap: wrap; gap: 6px; }

.tag-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    background: var(--tag-color, var(--primary));
    color: #fff;
    white-space: nowrap;
}

.tag-badge .tag-remove {
    cursor: pointer;
    font-size: 0.85rem;
    opacity: 0.7;
    margin-left: 2px;
    border: none;
    background: none;
    color: inherit;
    padding: 4px;
    line-height: 1;
    min-height: 24px;
    min-width: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tag-badge .tag-remove:hover { opacity: 1; }

.tag-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    max-height: 160px;
    overflow-y: auto;
    z-index: 100;
    display: none;
}

.tag-suggestions.show { display: block; }

.tag-suggestion-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text);
}

.tag-suggestion-item:hover { background: var(--bg-2, var(--bg)); }

.quick-create-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 10005;
    display: none;
    justify-content: center;
    align-items: flex-start;
    padding-top: 15vh;
}

.quick-create-overlay.show { display: flex; }

.quick-create-modal {
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: 14px;
    width: 92%;
    max-width: 540px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.2);
    animation: cmd-in 0.15s ease;
}

.quick-create-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-2);
}

.quick-create-header h3 { margin: 0; font-size: 1.05rem; }

.quick-create-body { padding: 20px; }

.quick-create-body .form-group { margin-bottom: 14px; }

.quick-create-body label { display: block; margin-bottom: 4px; font-size: 0.85rem; font-weight: 500; color: var(--text-2); }

.quick-create-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--border-2);
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.overdue-widget {
    border: none;
    border-radius: 0;
    background: var(--surface);
    overflow: hidden;
    margin-bottom: 0;
    border-bottom: 1px solid var(--border);
}

.overdue-widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    font-size: 0.95rem;
}

.overdue-widget-header .overdue-count {
    background: var(--danger);
    color: #fff;
    font-size: 0.75rem;
    padding: 2px 10px;
    border-radius: 12px;
}

.overdue-widget-body { padding: 0; }

.overdue-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--border-2);
    font-size: 0.875rem;
    text-decoration: none;
    color: var(--text);
    transition: background 0.12s;
}

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

.overdue-item:hover { background: var(--bg-2, var(--bg)); }

.overdue-item .overdue-icon { color: var(--danger); font-size: 1rem; width: 20px; text-align: center; }

.overdue-item .overdue-title { flex: 1; font-weight: 500; }

.overdue-item .overdue-date { font-size: 0.8rem; color: var(--danger); white-space: nowrap; }

.onboard-wizard-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 10008;
    display: none;
    justify-content: center;
    align-items: center;
}

.onboard-wizard-overlay.show { display: flex; }

.onboard-wizard {
    background: var(--surface);
    border-radius: 16px;
    width: 92%;
    max-width: 580px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.22);
    overflow: hidden;
}

.onboard-wizard-progress {
    height: 4px;
    background: var(--border);
}

.onboard-wizard-progress-bar {
    height: 100%;
    background: var(--primary);
    transition: width 0.3s ease;
    border-radius: 2px;
}

.onboard-wizard-step {
    padding: 32px 28px;
    display: none;
}

.onboard-wizard-step.active { display: block; }

.onboard-wizard-step h2 {
    font-size: 1.2rem;
    margin: 0 0 6px;
}

.onboard-wizard-step p {
    color: var(--text-2);
    font-size: 0.9rem;
    margin: 0 0 20px;
}

.onboard-wizard-footer {
    padding: 16px 28px;
    border-top: 1px solid var(--border-2);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.onboard-wizard-footer .step-dots { display: flex; gap: 6px; }

.onboard-wizard-footer .step-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--border);
}

.onboard-wizard-footer .step-dot.active { background: var(--primary); }

.gantt-wrapper {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

.gantt-table {
    border-collapse: collapse;
    border-spacing: 0;
    width: max-content;
    min-width: 100%;
}

.gantt-month-row th {
    padding: 0;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.gantt-month-cell {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text);
    padding: 7px 4px !important;
    text-align: center;
    border-right: 1px solid var(--border);
    border-left: 1px solid var(--border);
}

.gantt-day-row th {
    padding: 0;
    border-bottom: 2px solid var(--border);
    background: var(--surface);
}

.gantt-label-col {
    min-width: 200px;
    width: 200px;
    padding: 8px 12px !important;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-2);
    text-align: left;
    border-right: 1px solid var(--border);
    white-space: nowrap;
}

.gantt-day-cell {
    min-width: 36px;
    width: 36px;
    max-width: 36px;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-2);
    padding: 6px 0 !important;
    border-right: 1px solid var(--border);
}

.gantt-day-cell.weekend { background: rgba(128, 128, 128, 0.06); }

.gantt-day-cell.today { background: var(--primary); color: #fff; font-weight: 600; }

.gantt-data-row td {
    padding: 0;
    border-bottom: 1px solid var(--border);
}

.gantt-data-row:last-child td { border-bottom: none; }

.gantt-data-row:hover td { background: rgba(128, 128, 128, 0.03); }

.gantt-row-label-cell {
    min-width: 200px;
    width: 200px;
    border-right: 1px solid var(--border);
    vertical-align: middle;
}

a.gantt-row-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text) !important;
    text-decoration: none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

a.gantt-row-link:hover { color: var(--primary) !important; opacity: 1 !important; }

.gantt-flag-icon { color: var(--success); font-size: 0.85rem; flex-shrink: 0; }

.gantt-task-icon { color: var(--primary); font-size: 0.85rem; flex-shrink: 0; }

.gantt-bar-cell {
    padding: 0 !important;
    vertical-align: middle;
    height: 44px;
}

.gantt-bar-area {
    position: relative;
    height: 44px;
}

.gantt-bar {
    position: absolute;
    top: 10px;
    height: 24px;
    border-radius: 6px;
    background: var(--primary);
    display: flex;
    align-items: center;
    padding: 0 8px;
    font-size: 0.75rem;
    color: #fff;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 6px;
    cursor: pointer;
    transition: filter 0.15s, box-shadow 0.15s;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.gantt-bar:hover { filter: brightness(1.1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); }

.gantt-bar.milestone-bar { background: var(--success); }

.gantt-bar.overdue-bar { background: var(--danger); }

.gantt-milestone-marker {
    position: absolute;
    top: 16px;
    width: 12px;
    height: 12px;
    background: var(--warning, #f59e0b);
    border: 2px solid var(--surface);
    border-radius: 2px;
    transform: rotate(45deg);
    margin-left: -6px;
    z-index: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    cursor: default;
}

.gantt-milestone-marker.overdue { background: var(--danger); }

.gantt-milestone-marker.completed { background: var(--success); }

.gantt-today-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--danger);
    z-index: 1;
    pointer-events: none;
}

.gantt-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 14px 16px;
    margin-top: 12px;
    font-size: 0.82rem;
    color: var(--text-2);
}

.gantt-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.gantt-legend-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    flex-shrink: 0;
}

.gantt-legend-task { background: var(--primary); }

.gantt-legend-milestone { background: var(--success); }

.gantt-legend-due { background: var(--warning, #f59e0b); }

.gantt-legend-completed { background: var(--success); opacity: 0.6; }

.gantt-legend-overdue { background: var(--danger); }

.integrations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.integration-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    background: var(--surface);
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: border-color 0.15s;
}

.integration-card:hover { border-color: var(--primary); }

.integration-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.integration-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--bg-2, var(--bg));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}

.integration-card h3 { font-size: 1rem; margin: 0; }

.integration-card p { font-size: 0.85rem; color: var(--text-2); margin: 0; flex: 1; }

.integration-card-footer { display: flex; flex-direction: column; gap: 10px; }

.integration-status {
    font-size: 0.8rem;
    padding: 3px 10px;
    border-radius: 12px;
}

.integration-status.connected { background: #22c55e22; color: var(--success); }

.integration-status.available { background: var(--bg-2, var(--bg)); color: var(--text-2); }

.timeline-feed { position: relative; padding-left: 28px; }

.timeline-feed::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border);
}

.timeline-entry {
    position: relative;
    margin-bottom: 16px;
    padding-left: 16px;
}

.timeline-entry::before {
    content: '';
    position: absolute;
    left: -22px;
    top: 8px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--primary);
    border: 2px solid var(--surface);
    z-index: 1;
}

.timeline-entry.type-invoice::before { background: var(--success); }

.timeline-entry.type-payment::before { background: #22c55e; }

.timeline-entry.type-expense::before { background: var(--warning); }

.timeline-entry.type-communication::before { background: #8b5cf6; }

.timeline-entry.type-project::before { background: var(--primary); }

.timeline-entry.type-activity::before { background: var(--text-2); }

.timeline-entry-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: var(--text-2);
    margin-bottom: 4px;
}

.timeline-entry-body {
    font-size: 0.9rem;
    color: var(--text);
}

.timeline-entry-body a { color: var(--primary); text-decoration: none; }

.timeline-entry-body a:hover { text-decoration: underline; }

.cs-page {; border:none; border-radius:0; margin-bottom:0; }

.cs-page-header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; flex-wrap:wrap; }

.cs-page-header h1 {; margin:0 0 4px; color:var(--text); line-height:1.2; }

.cs-page-header p {; margin:0; }

.cs-page-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; flex-shrink:0; }

.cs-page-actions .btn { display:inline-flex; align-items:center; gap:6px; text-decoration:none; font-size:0.85rem; }

.cs-page-stats { display:flex; flex-wrap:wrap; border-top:none; margin-top:4px; }

.cs-page-stats .cs-stat { flex:0 0 auto; text-align:left; display:flex; align-items:baseline; gap:6px; padding:0; }

.cs-page-stats .cs-stat:first-child { padding-left:0; }

.cs-page-stats .cs-stat + .cs-stat::before { display:none; }

.cs-page-stats .cs-stat-val {; color:var(--text); line-height:1.2; }

.cs-page-stats .cs-stat-lbl { font-size:0.8rem; text-transform:none; letter-spacing:0; margin-top:0; }

.cs-form-header { display:flex; align-items:center; gap:12px; margin-bottom:16px; }

.cs-form-header h1 { font-size:1.2rem; font-weight:700; margin:0; color:var(--text); }

.cs-form-card { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:24px; max-width:800px; }

.cs-form-card-wide { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:24px; }

.cs-form-card form, .cs-form-card-wide form { max-width:100%; }

.cs-form-card .form-actions, .cs-form-card-wide .form-actions { margin-top:20px; padding-top:16px; border-top:1px solid var(--border); }

.cs-card--selected { border-color:var(--primary); background:var(--primary-light,rgba(37,99,235,0.04)); }

.cs-info-box { padding:14px 18px; background:var(--bg-2,var(--bg)); border:1px solid var(--border); border-radius:10px; margin-bottom:16px; font-size:0.9rem; }

.cs-info-box p { margin:0 0 4px; }

.cs-info-box p:last-child { margin-bottom:0; }

.cs-radio-card { border:1px solid var(--border); border-radius:10px; padding:12px 16px; margin-bottom:8px; transition:border-color 0.15s; }

.cs-radio-card:has(input:checked) { border-color:var(--primary); background:var(--primary-light,rgba(37,99,235,0.04)); }

.cs-radio-card label { display:flex; align-items:flex-start; gap:10px; cursor:pointer; margin:0; }

.cs-radio-card input[type="radio"] { margin-top:4px; accent-color:var(--primary); }

.mt-xs { margin-top: 8px; }

.mt-18 { margin-top: 18px; }

.mt-24 { margin-top: 24px; }

.mb-12 { margin-bottom: 12px; }

.mb-24 { margin-bottom: 24px; }

.mr-4 { margin-right: 4px; }

.mr-6 { margin-right: 6px; }

.p-20 { padding: 20px; }

.w-80 { width: 80px; }

.w-180 { width: 180px; }

.text-color { color: var(--text); }

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

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

.text-danger-var { color: var(--danger); }

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

.text-green { color: var(--success, #22c55e); }

.text-emerald { color: var(--success, #34d399); }

.text-red-500 { color: var(--danger, #ef4444); }

.text-primary { color: var(--primary, #2563eb); }

.text-primary-nodecor { color: var(--primary, #2563eb); text-decoration: none; }

.text-secondary { color: var(--text-2); }

.text-muted { color: var(--muted, #6b7280); }

.text-danger { color: var(--danger, #ef4444); }

.text-warning { color: var(--warning, #f59e0b); }

.text-success-color { color: var(--success, #22c55e); }

.text-center { text-align: center; }

.text-italic { font-style: italic; }

.text-medium { font-weight: 500; }

.text-085 { font-size: 0.85rem; }

.text-08 { font-size: 0.8rem; }

.text-09 { font-size: 0.9rem; }

.text-05 { font-size: 0.7rem; }

.text-12 { font-size: 1.2rem; }

.text-500 { font-weight: 500; }

.text-600 { font-weight: 600; }

.text-500-color { font-weight: 500; color: var(--text); }

.font-mono { font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; font-size: 0.88em; }

.pt-22 { padding-top: 22px; }

.mt-sm { margin-top: 8px; }

.text-muted-085 { color: var(--muted); font-size: 0.85rem; }

.text-secondary-085 { color: var(--text-2); font-size: 0.85rem; }

.text-secondary-09 { color: var(--text-2); font-size: 0.9rem; }

.text-xs-secondary { font-size: 0.8rem; color: var(--text-2); }

.text-secondary-mb4 { color: var(--text-2); font-size: 0.85rem; margin-bottom: 4px; }

.text-secondary-block { color: var(--text-2); display: block; margin-top: 4px; }

.text-secondary-nodecor { color: var(--text-2); text-decoration: none; }

.text-secondary-mb16 { color: var(--text-2); margin-bottom: 16px; }

.text-inherit-nodecor { color: inherit; text-decoration: none; }

.text-color-nodecor { color: var(--text); text-decoration: none; }

.text-left-secondary { text-align: left; color: var(--text-2); }

.text-right-bold { text-align: right; font-weight: 600; }

.text-right-sm-muted { text-align: right; padding: 6px 8px; color: var(--text-2); }

.d-inline { display: inline; }

.d-inline-block-m0 { display: inline-block; margin: 0; }

.nowrap { white-space: nowrap; }

.cursor-default { cursor: default; }

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

.mt-0-error { margin-top: 0; color: var(--error); }

.mt-0-title { margin-top: 0; font-size: 1.1rem; }

.mt-18-narrow { margin-top: 18px; max-width: 800px; }

.mt-18-narrow-lg { margin-top: 18px; max-width: 900px; }

.mb-4-danger { margin-bottom: 4px; color: var(--danger); }

.section-heading-mt { margin-top: 32px; color: var(--text); }

.section-heading-mt24 { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--border); }

.section-heading-mt-color { margin-top: 24px; color: var(--text); }

.section-label { margin: 18px 0 10px; color: var(--text); }

.section-label-sm { margin: 24px 0 12px; color: var(--text-2); font-size: 1rem; }

.badge-danger-inline { background: #ef444422; color: #ef4444; margin-left: 8px; }

.admin-input-sm-surface { width: 100%; padding: 8px; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 6px; color: var(--text); }

.admin-input-sm-main { width: 100%; padding: 8px; background: var(--surface); border: 1px solid var(--border-2); border-radius: 6px; color: var(--text); }

.admin-input-readonly-right { width: 100%; padding: 8px; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 6px; color: var(--text); cursor: not-allowed; text-align: right; font-weight: 500; }

.admin-input-readonly-right-plain { width: 100%; padding: 8px; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 6px; color: var(--text); cursor: not-allowed; text-align: right; }

.admin-input-bg { width: 100%; padding: 10px; background: var(--bg); border: 1px solid var(--border-2); border-radius: 8px; color: var(--text); }

.admin-td-text { padding: 10px; border-bottom: 1px solid var(--border-2); color: var(--text); }

.admin-td-border1 { padding: 10px; border-bottom: 1px solid var(--border); }

.admin-td-muted2 { padding: 10px; border-bottom: 1px solid var(--border-2); color: var(--text-2); }

.admin-td-right-muted { padding: 10px; text-align: right; color: var(--text-2); font-weight: 600; }

.admin-th-110 { padding: 10px; border-bottom: 1px solid var(--border); width: 110px; font-weight: 600; }

.admin-th-130 { padding: 10px; border-bottom: 1px solid var(--border); width: 130px; font-weight: 600; }

.admin-th-130-plain { padding: 10px; border-bottom: 1px solid var(--border); width: 130px; }

.admin-th-140 { padding: 10px; border-bottom: 1px solid var(--border); width: 140px; font-weight: 600; }

.admin-grid-gap12 { display: grid; gap: 12px; }

.admin-grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.admin-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }

.admin-grid-auto-flex { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }

.flex-center-gap-6-nowrap { display: flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--text-2); }

.flex-center-gap-nowrap { display: flex; align-items: center; gap: 8px; white-space: nowrap; }

.flex-center-gap-pointer { display: flex; align-items: center; gap: 8px; cursor: pointer; }

.flex-center-gap-8-pt { display: flex; align-items: center; gap: 8px; padding-top: 28px; }

.flex-wrap-center { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.flex-wrap-center-mt { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.flex-col-meta-sm { display: flex; flex-direction: column; gap: 4px; font-size: 0.9rem; color: var(--text-2); }

.flex-col-meta-mb { display: flex; flex-direction: column; gap: 4px; font-size: 0.9rem; color: var(--text-2); margin-bottom: 18px; }

.flex-justify-between { display: flex; justify-content: space-between; }

.flex-between-card { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: var(--surface-2); border-radius: 8px; }

.flex-detail-card { flex: 1; min-width: 200px; padding: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; }

.flex-detail-card-2 { flex: 1; min-width: 200px; padding: 10px; background: var(--surface); border: 1px solid var(--border-2); border-radius: 8px; color: var(--text); }

.flex-1-center { flex: 1; justify-content: center; }

.inline-flex-center { display: inline-flex; align-items: center; gap: 8px; }

.inline-flex-nodecor { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }

.payment-form-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; align-items:end; }

.payment-summary { display:flex; align-items:center; gap:8px; margin-bottom:16px; padding:14px; background:var(--bg-2); border-radius:10px; flex-wrap:wrap; }

.payment-summary-item { text-align:center; flex:1; min-width:100px; }

.payment-summary-label { font-size:0.75rem; color:var(--text-2); text-transform:uppercase; letter-spacing:0.5px; }

.payment-summary-value { font-size:1.3rem; font-weight:700; color:var(--text); }

.payment-summary-sep { font-size:1.4rem; color:var(--text-2); font-weight:300; }

.table-full { width: 100%; border-collapse: collapse; min-width: 760px; }

.tag-btn { padding: 4px 8px; background: var(--btn-bg); border: 1px solid var(--border); border-radius: 4px; color: var(--text-2); cursor: pointer; font-size: 0.85rem; }

.btn-compact-plain { padding: 6px 12px; font-size: 0.85rem; }

.p-link { padding: 10px 16px; text-decoration: none; }

.p-5-12 { padding: 5px 12px; }

.text-bold-dark { font-weight: 600; color: var(--text); }

.p-8-danger { padding: 8px; color: var(--danger); }

.admin-th-bold { padding: 10px; border-bottom: 1px solid var(--border); font-weight: 600; }

.form-label-block { display: block; font-weight: 600; font-size: 0.85rem; color: var(--text); margin-bottom: 6px; }

.bg-btn-muted { background: var(--btn-bg); color: var(--text-2); }

.text-amber { color: var(--warning, #f59e0b); }

.w-100 { width: 100px; }

.badge-green-light { background: rgba(34,197,94,0.1); color: var(--success, #22c55e); }

.badge-blue-light { background: rgba(59,130,246,0.1); color: var(--primary, #3b82f6); }

.badge-admin { background: color-mix(in srgb, var(--primary, #2563eb) 15%, transparent); color: var(--primary, #2563eb); }

.badge-muted { background: var(--btn-bg, #f1f5f9); color: var(--text-2); }

.badge-neutral { background: var(--btn-bg, #f1f5f9); color: var(--text); }

.p-20-center-muted { padding: 20px; text-align: center; color: var(--text-2); }

.admin-grid-2-gap14 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }

.flex-gap-mt24 { display: flex; gap: 10px; margin-top: 24px; }

.text-color-nodecor-bold { color: var(--text); text-decoration: none; font-weight: 500; }

.flex-center-gap-lg { display:flex; align-items:center; gap:16px; }

.flex-wrap-flex1 { flex-wrap: wrap; flex: 1; }

.mt-4 { margin-top: 4px; }

.mb-2 { margin-bottom: 2px; }

.pl-24 { padding-left: 24px; }

.card-surface { margin-bottom: 18px; padding: 16px; background: var(--surface-2); border-radius: 8px; border: 1px solid var(--border); }

.text-secondary-m0 { color: var(--text-2); margin: 0 0 12px 0; font-size: 0.9rem; }

.resize-v { resize: vertical; }

.grid-gap8 { display: grid; gap: 8px; }

.section-title-lg { margin: 0 0 1rem 0; font-size: 1.25rem; color: var(--text); }

.height-250 { position: relative; height: 250px; }

.mt-12-flex-gap { margin-top: 12px; display: flex; gap: 8px; }

.text-secondary-09-m0 { font-size: 0.9rem; color: var(--text-2); }

.stat-box { padding: 12px; background: var(--bg-2); border-radius: 8px; text-align: center; }

.stat-box-value { font-size: 1.3rem; font-weight: 700; }

.stat-box-label { font-size: 0.8rem; color: var(--text-2); }

.grid-2-gap16 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.desc-box { padding: 14px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 20px; }

.desc-box p { margin: 0; color: var(--text-2); white-space: pre-wrap; line-height: 1.6; font-size: 0.92rem; }

.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; align-items: center; justify-content: center; }

.modal-overlay.active { display: flex; }

.modal-box { background: var(--surface); border-radius: 12px; padding: 24px; max-width: 600px; width: 90%; max-height: 90vh; overflow-y: auto; box-shadow: 0 4px 20px rgba(0,0,0,0.3); }

.cs-section-title { margin: 0 0 10px; font-size: 1.1rem; font-weight: 600; color: var(--text); }

.mini-item-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 6px; }

.avatar-gradient { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 1.2rem; flex-shrink: 0; }

.comm-card { padding: 14px 16px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; }

.toggle-panel-hidden { display: none; margin-bottom: 12px; padding: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; }

.ws-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; margin-top: 24px; }

.text-088 { font-size: 0.88rem; }

.text-082 { font-size: 0.82rem; }

.text-078 { font-size: 0.78rem; }

.text-092 { font-size: 0.92rem; }

.text-11 { font-size: 1.1rem; }

.text-13 { font-size: 1.3rem; }

.text-purple { color: #8b5cf6; }

.text-blue { color: #3b82f6; }

.mb-6 { margin-bottom: 6px; }

.mb-8 { margin-bottom: 8px; }

.mb-10 { margin-bottom: 10px; }

.mb-20 { margin-bottom: 20px; }

.mt-12 { margin-top: 12px; }

.mt-20 { margin-top: 20px; }

.mt-32 { margin-top: 32px; }

.p-14-18 { padding: 14px 18px; }

.p-12 { padding: 12px; }

.p-16 { padding: 16px; }

.p-24 { padding: 24px; }

.gap-16 { gap: 16px; }

.flex-center { display: flex; align-items: center; }

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

.flex-1 { flex: 1; }

.border-top-section { border-top: 1px solid var(--border); padding-top: 16px; margin-top: 16px; }

.text-nowrap { white-space: nowrap; }

.cursor-pointer { cursor: pointer; }

.w-full { width: 100%; }

.max-w-480 { max-width: 480px; }

.badge-active { background: rgba(34,197,94,0.1); color: #22c55e; padding: 3px 10px; border-radius: 6px; font-size: 0.85rem; font-weight: 600; }

.badge-ended { background: rgba(148,163,184,0.1); color: #94a3b8; padding: 3px 10px; border-radius: 6px; font-size: 0.85rem; font-weight: 600; }

.badge-recurring { background: rgba(139,92,246,0.12); color: #a78bfa; padding: 2px 10px; font-size: 0.82rem; border-radius: 6px; margin-left: 6px; }

.badge-category { background: rgba(37,99,235,0.1); color: #60a5fa; padding: 3px 10px; border-radius: 6px; font-size: 0.82rem; font-weight: 500; }

html[data-theme="light"] .badge-active { background: rgba(34,197,94,0.12); color: #059669; }

html[data-theme="light"] .badge-ended { background: rgba(148,163,184,0.12); color: #475569; }

html[data-theme="light"] .badge-recurring { background: rgba(139,92,246,0.12); color: #7c3aed; }

html[data-theme="light"] .badge-category { background: rgba(37,99,235,0.1); color: #2563eb; }

.duplicate-warning-box { display: none; margin-bottom: 16px; padding: 14px 18px; background: var(--warning-bg, #fef3c7); border: 1px solid var(--warning); border-radius: 8px; color: var(--warning-text, #92400e); }

.duplicate-warning-box ul { margin: 8px 0 0 18px; padding: 0; }

.search-form-bar { display: flex; gap: 8px; max-width: 600px; margin: 0 auto; }

.search-input-lg { flex: 1; font-size: 1.1rem; padding: 12px 16px; }

.search-btn { padding: 12px 24px; }

.search-empty-state { padding: 40px; text-align: center; color: var(--text-2); }

.search-empty-icon { font-size: 48px; opacity: 0.3; }

.search-category-card { padding: 16px; margin-bottom: 16px; }

.search-category-heading { margin: 0 0 12px; font-size: 1rem; color: var(--text-2); }

.search-category-count { font-weight: 400; font-size: 0.85rem; }

.search-result-list { display: flex; flex-direction: column; gap: 6px; }

.search-result-link { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; text-decoration: none; color: var(--text); transition: background 0.15s; }

.search-result-link:hover { background: var(--bg-2); }

.search-result-icon { font-size: 1.2rem; color: var(--text-2); width: 24px; text-align: center; }

.dash-config-panel { display: none; margin-bottom: 20px; padding: 16px 20px; background: var(--surface); border: 1px solid var(--border-2); border-radius: 10px; }

.dash-config-title { display: block; margin-bottom: 10px; }

.dash-config-options { display: flex; flex-wrap: wrap; gap: 12px; }

.dash-config-label { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 0.92rem; }

.dash-overdue-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0; margin-bottom: 0; }

.dash-empty-state { padding: 20px; }

.dash-empty-icon { font-size: 2rem; opacity: 0.3; margin-bottom: 8px; }

.ws-empty-hint { margin: 24px 0 16px 0; color: var(--text-2); font-size: 0.95rem; }

.ws-card-title { margin: 0 0 12px 0; font-size: 1.25rem; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; }

.ws-selected-badge { margin-left: auto; padding: 4px 8px; background: var(--primary, #2563eb); color: white; border-radius: 6px; font-size: 0.75rem; font-weight: 500; text-transform: uppercase; }

.ws-role-row { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 0.9rem; margin-bottom: 16px; }

.ws-card-footer { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--border); }

.ws-btn-full { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }

.ws-create-link { margin-top: 24px; text-align: center; }

.ws-card-icon { color: var(--primary, #2563eb); }

.session-card { padding: 16px; background: var(--btn-bg); border-radius: 8px; border: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }

.session-card-current { border-color: var(--primary, #3b82f6); }

.session-device-icon { font-size: 1.5rem; color: var(--text-2); }

.session-detail-row { color: var(--text-2); font-size: 0.85rem; margin-top: 4px; }

.session-badge-current { background: rgba(34,197,94,0.1); color: #22c55e; padding: 2px 8px; border-radius: 4px; font-size: 0.8rem; font-weight: 600; margin-left: 8px; }

html[data-theme="light"] .session-badge-current { background: rgba(34,197,94,0.12); color: #059669; }

.btn-danger-solid { background: var(--danger); color: #fff; }

.hint-text { color: var(--text-2); font-size: 0.88rem; margin: 0 0 12px; }

.no-margin { margin: 0; }

.flex-center-gap-md { display: flex; align-items: center; gap: 12px; }

.flex-wrap-gap-12 { display: flex; flex-wrap: wrap; gap: 12px; }

.text-capitalize { text-transform: capitalize; }

.btn-disabled-muted { opacity: 0.6; cursor: not-allowed; }

.btn-inline-flex-gap { display: inline-flex; align-items: center; gap: 8px; }

.text-overdue-ml { color: #ef4444; font-weight: 600; margin-left: 4px; }

.ps-contact-role { color: var(--text-2); font-size: 0.85rem; margin-left: 4px; }

.ps-contact-icon { margin-right: 4px; color: var(--text-2); font-size: 0.85rem; }

.ps-section-title { margin: 0 0 8px; font-size: 1.1rem; font-weight: 600; }

.ps-subsection-title { margin: 0 0 10px; font-size: 1rem; font-weight: 600; }

.ps-budget-box { margin-top: 12px; padding: 12px; background: var(--btn-bg); border-radius: 8px; border: 1px solid var(--border); }

.ps-progress-track { background: var(--bg-2); border-radius: 6px; height: 10px; overflow: hidden; }

.flex-wrap-gap-8 { display: flex; gap: 8px; flex-wrap: wrap; }

.ps-overview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }

.text-500-nodecor { font-weight: 500; color: var(--text); text-decoration: none; }

.ps-view-all-btn { width: 100%; font-size: 0.85rem; margin-top: 4px; }

.ps-no-items { color: var(--text-2); font-size: 0.88rem; margin: 0; }

.ps-external-link { margin-left: 4px; color: var(--text-2); font-size: 0.82rem; }

.ps-total-row { margin-top: 10px; text-align: right; font-size: 0.9rem; color: var(--text-2); }

.ps-feedback-summary { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; padding: 12px 16px; background: var(--surface-2); border-radius: 10px; border: 1px solid var(--border); }

.ps-feedback-avg-value { font-size: 2rem; font-weight: 700; color: #f59e0b; }

.ps-feedback-author { color: var(--text); font-size: 0.95rem; }

.ps-feedback-date { color: var(--text-2); font-size: 0.8rem; margin-left: 8px; }

.ps-feedback-body { margin: 6px 0 0; color: var(--text-2); line-height: 1.6; white-space: pre-wrap; }

.ps-sub-ratings { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; }

.text-amber-bold { color: #f59e0b; font-weight: 600; }

.btn-link-underline { background: none; border: none; color: var(--text); cursor: pointer; text-decoration: underline; padding: 0; font-size: inherit; }

.ps-type-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 20px; font-size: 0.8rem; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); }

.ps-comm-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }

.ps-comm-body { flex: 1; min-width: 0; }

.ps-comm-title-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }

.ps-comm-subject { color: var(--text); font-size: 0.95rem; }

.ps-inline-badge { padding: 2px 8px; border-radius: 12px; font-size: 0.75rem; background: var(--surface-3); color: var(--text-2); text-transform: capitalize; }

.ps-comm-excerpt { margin: 6px 0 0; color: var(--text-2); line-height: 1.5; font-size: 0.88rem; white-space: pre-wrap; max-height: 80px; overflow: hidden; }

.ps-comm-date { text-align: right; font-size: 0.82rem; color: var(--text-2); white-space: nowrap; }

.ps-follow-up { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 6px; font-size: 0.82rem; }

.ps-action-right { margin-top: 8px; text-align: right; }

.ps-view-link { font-size: 0.82rem; color: var(--primary); text-decoration: none; }

.ml-8 { margin-left: 8px; }

.ps-progress-meta { min-width: 120px; }

.ps-progress-bar { flex: 1; height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; min-width: 60px; }

.ps-form-control { width: 100%; padding: 10px; background: var(--surface); border: 1px solid var(--border-2); border-radius: 8px; color: var(--text); }

.ps-form-control[rows] { resize: vertical; }

.ps-updates-grid { display: grid; gap: 10px; }

.ps-update-header { display: flex; justify-content: space-between; align-items: start; margin-bottom: 6px; }

.ps-update-label { color: var(--text); font-size: 0.95rem; display: block; margin-bottom: 4px; }

.ps-update-meta { display: flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 0.82rem; }

.ps-update-text { margin: 0; color: var(--text-2); white-space: pre-wrap; line-height: 1.6; }

.mt-2 { margin-top: 2px; }

.ps-task-chip { padding: 8px 14px; border-radius: 8px; font-weight: 600; font-size: 0.88rem; }

.ps-badge-internal { background: var(--btn-bg); color: var(--text-2); }

.bg-gradient-blue { background: linear-gradient(135deg, #3b82f6, #6366f1); }

.bg-gradient-blue-cyan { background: linear-gradient(135deg, #3b82f6, #06b6d4); }

.badge-recurring-primary { background: rgba(99,102,241,0.08); color: var(--primary); }

.line-height-15 { line-height: 1.5; }

.inv-th-sm { padding: 10px; border-bottom: 1px solid var(--border); width: 100px; }

.inv-th-md { padding: 10px; border-bottom: 1px solid var(--border); width: 120px; }

.inv-td-bold { padding: 10px; border-bottom: 1px solid var(--border-2); color: var(--text); font-weight: 500; }

.inv-td-empty { padding: 14px; color: var(--text-2); text-align: center; }

.border-top-heavy { border-top: 2px solid var(--border); }

.inv-tfoot-label { padding: 14px 10px; text-align: right; color: var(--text-2); font-weight: 600; }

.inv-tfoot-value { padding: 14px 10px; text-align: right; color: var(--text); font-weight: 600; font-size: 1.05rem; }

.inv-tfoot-grand-row { background: var(--surface); border-top: 2px solid var(--border); }

.inv-tfoot-grand { padding: 14px 10px; text-align: right; color: var(--text); font-weight: 700; font-size: 1.1rem; }

.inv-modal-summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px; background: var(--surface-2); border-radius: 8px; margin-bottom: 20px; }

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

.gap-10 { gap: 10px; }

.gap-12 { gap: 12px; }

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

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

.text-muted-color-fw600 { font-weight: 600; color: var(--muted); }

.inv-modal-label { display: block; margin-bottom: 6px; color: var(--text); font-weight: 500; }

.inv-modal-input { width: 100%; padding: 10px; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 8px; color: var(--text); }

.health-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 10000; align-items: center; justify-content: center; backdrop-filter: blur(2px); }

.health-modal-box { background: var(--surface); border-radius: 12px; max-width: 480px; width: 90%; box-shadow: 0 16px 48px rgba(0,0,0,0.2); border: 1px solid var(--border-2); overflow: hidden; }

.health-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border-2); }

.health-modal-header h3 { margin: 0; font-size: 1.05rem; }

.health-modal-close { background: none; border: none; font-size: 1.3rem; cursor: pointer; color: var(--text-2); line-height: 1; }

.health-summary-row { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }

.health-ring-wrap { position: relative; width: 64px; height: 64px; flex-shrink: 0; }

.health-ring-wrap svg { width: 64px; height: 64px; }

.health-ring-value { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; }

.health-score-label { font-weight: 600; font-size: 1.1rem; }

.health-score-sub { font-size: 0.82rem; color: var(--text-2); }

.health-factors { display: flex; flex-direction: column; gap: 14px; }

.health-factor-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }

.health-factor-name { font-size: 0.85rem; display: flex; align-items: center; gap: 6px; color: var(--text); }

.health-factor-val { font-size: 0.82rem; font-weight: 600; color: var(--text-2); }

.health-bar-track { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }

.health-modal-footer { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; font-size: 0.78rem; color: var(--text-2); }

.health-learn-link { display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); text-decoration: none; }

.cs-fin-icon-blue { background: rgba(59,130,246,0.1); color: #3b82f6; }

.cs-fin-icon-green { background: rgba(34,197,94,0.1); color: #22c55e; }

.cs-fin-icon-orange { background: rgba(249,115,22,0.1); color: #f97316; }

.cs-fin-icon-red { background: rgba(239,68,68,0.1); color: #ef4444; }

.hidden-form-mb12 { display: none; margin-bottom: 12px; }

.hidden-form-mb8 { display: none; margin-bottom: 8px; }

.approval-decision-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }

.approval-card-success { border-top: 3px solid var(--success, #34d399); }

.approval-card-danger { border-top: 3px solid var(--danger, #ef4444); }

.approval-heading-success { display: flex; align-items: center; gap: 8px; color: var(--success, #34d399); margin: 0 0 12px; }

.approval-heading-danger { display: flex; align-items: center; gap: 8px; color: var(--danger, #ef4444); margin: 0 0 12px; }

.btn-success-full { background: var(--success); color: #fff; width: 100%; }

.btn-danger-full { background: var(--danger); color: #fff; width: 100%; }

.btn-primary-full { background: var(--primary); color: #fff; width: 100%; }

.approval-note-text { white-space: pre-wrap; margin: 0; font-size: 0.9rem; }

.approval-desc-sm { font-size: 0.85rem; color: var(--muted); margin: 0 0 12px; }

.approval-desc-sm-16 { font-size: 0.85rem; color: var(--muted); margin: 0 0 16px; }

.snapshot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }

.snapshot-items-heading { margin-top: 20px; margin-bottom: 12px; }

.cs-card-flush { padding: 0; overflow: hidden; }

.activity-action-label { font-weight: 600; color: var(--text); }

.activity-desc-inline { color: var(--text-2); font-size: 0.88rem; }

.activity-timestamp { font-size: 0.8rem; color: var(--text-2); margin-top: 2px; }

.checklist-items-box { margin-top: 24px; padding: 16px; background: var(--btn-bg); border-radius: 8px; border: 1px solid var(--border); }

.checklist-items-help { color: var(--text-2); font-size: 0.85rem; margin: 4px 0 12px; }

.checklist-item-row { display: grid; grid-template-columns: 2fr 1fr auto; gap: 8px; margin-bottom: 8px; align-items: end; }

.btn-remove-item { color: var(--danger); margin-bottom: 2px; }

.completed-by-meta { color: var(--text-2); font-size: 0.8rem; margin-top: 2px; }

.email-compose-panel { display: none; padding: 14px 16px; background: var(--accent-bg, #eff6ff); border: 1px solid var(--border-2); border-radius: 10px; margin-bottom: 8px; }

.email-panel-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }

.email-panel-icon { font-size: 1.1rem; color: var(--primary); }

.email-hint { margin: 8px 0 0; font-size: 0.8rem; color: var(--text-2); }

.email-recipient-input { background: var(--surface); font-size: 0.9rem; }

.email-to-label { min-width: 30px; }

.form-checkbox-row { display: flex; align-items: flex-end; padding-bottom: 4px; }

.form-checkbox-label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 0.92rem; color: var(--text); }

.form-checkbox-icon { font-size: 1rem; }

.checkbox-accent { accent-color: var(--accent, #3b82f6); }

.body-prewrap { white-space: pre-wrap; color: var(--text-2); line-height: 1.7; font-size: 0.92rem; }

.no-detail-text { color: var(--text-2); font-style: italic; margin: 0; }

.text-capitalize-secondary { color: var(--text-2); text-transform: capitalize; }

.follow-up-banner { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-radius: 10px; font-size: 0.92rem; }

.follow-up-banner-done { background: #34d39915; border: 1px solid #34d39930; color: #34d399; }

.follow-up-banner-pending { background: #f59e0b15; border: 1px solid #f59e0b30; color: #f59e0b; }

.follow-up-banner-icon { font-size: 1.1rem; }

.follow-up-form-ml { margin: 0 0 0 auto; }

.btn-mark-done { background: var(--success, #34d399) !important; color: #fff !important; border-color: var(--success, #34d399) !important; }

.email-status-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; font-size: 0.88rem; }

.email-error-text { color: #ef4444; font-size: 0.82rem; }

.merge-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: start; }

.merge-name { font-size: 1.05rem; }

.merge-detail { margin-top: 6px; font-size: 0.85rem; color: var(--text-2); display: flex; flex-direction: column; gap: 3px; }

.merge-timestamp { font-size: 0.78rem; color: var(--text-3, var(--text-2)); }

.merge-btn-col { display: flex; gap: 4px; flex-direction: column; }

.merge-btn-sm { font-size: 0.8rem; padding: 4px 12px; }

.timeline-date-sep { font-size: 0.8rem; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.04em; padding: 16px 0 6px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }

.timeline-subtitle { font-size: 0.82rem; color: var(--text-2); margin-top: 2px; }

.form-info-hint { margin-top: 8px; color: var(--muted); font-size: 0.85rem; }

.form-info-box { margin-top: 16px; padding: 12px; background: var(--btn-bg); border-radius: 8px; border: 1px solid var(--border); }

.form-info-box-inner { margin-top: 8px; color: var(--text-2); }

.contract-num-box { margin-bottom: 12px; padding: 12px; background: var(--btn-bg); border-radius: 8px; border: 1px solid var(--border); }

.contract-num-label { color: var(--text); display: block; margin-bottom: 4px; }

.contract-num-help { color: var(--muted); display: block; margin-top: 4px; }

.file-current-box { margin-bottom: 8px; padding: 8px; background: var(--btn-bg); border-radius: 6px; display: inline-flex; align-items: center; gap: 8px; }

.file-replace-hint { color: var(--text-2); display: block; margin-bottom: 8px; }

.avatar-gradient-green { background: linear-gradient(135deg, #22c55e, #10b981); }

.avatar-gradient-cyan { background: linear-gradient(135deg, #06b6d4, #0891b2); }

.avatar-gradient-emerald { background: linear-gradient(135deg, #059669, #10b981); }

.line-item-grid { display: grid; grid-template-columns: 3fr 1fr 1fr 1fr auto; gap: 8px; margin-bottom: 8px; align-items: end; }

.avatar-gradient-orange-red { background: linear-gradient(135deg, #f97316, #ef4444); }

.avatar-gradient-red-amber { background: linear-gradient(135deg, #ef4444, #f59e0b); }

.avatar-gradient-amber-red { background: linear-gradient(135deg, #f59e0b, #ef4444); }

.checkbox-group-row { display: flex; gap: 20px; margin-top: 10px; }

.checkbox-group-row label { display: flex; align-items: center; gap: 6px; cursor: pointer; }

.recurring-panel { padding: 16px; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 8px; margin-bottom: 12px; }

.btn-recurring-only { background: var(--primary); color: #fff; border: none; display: inline-flex; align-items: center; gap: 6px; }

.section-subtitle-muted { color: var(--muted); font-size: 0.9rem; font-weight: 400; }

.admin-th-action { padding: 10px; border-bottom: 1px solid var(--border); width: 100px; font-weight: 600; }

.form-input-right-bold { text-align: right; font-weight: 500; }

.form-checkbox-row-label { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }

.recurring-grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }

.form-field-help { display: block; margin-bottom: 6px; color: var(--text-2); }

.lead-dup-warning { display: none; margin-bottom: 16px; padding: 14px 18px; background: var(--warning-bg, #fef3c7); border: 1px solid var(--warning, #f59e0b); border-radius: 8px; color: var(--warning-text, #92400e); }

.lead-dup-section { display: none; margin-top: 8px; }

.lead-dup-section ul { margin: 4px 0 0 18px; padding: 0; }

.lead-dup-link { color: var(--warning-text, #92400e); font-weight: 600; }

.client-option-panel { margin-bottom: 20px; padding: 16px; background: var(--surface); border: 1px solid var(--border-2); border-radius: 8px; }

.client-option-radios { display: flex; gap: 20px; margin-bottom: 16px; }

.form-section-heading { margin: 24px 0 16px 0; color: var(--text); font-size: 1.2rem; }

.form-field-hint { color: var(--text-2); font-size: 0.85rem; display: block; margin-top: 4px; }

.btn-merge-sm { font-size: 0.8rem; padding: 4px 12px; }

.kanban-score-badge { background: #f59e0b22; color: #f59e0b; padding: 1px 6px; border-radius: 4px; font-weight: 600; }

.kanban-card-actions { margin-top: 8px; display: flex; gap: 4px; }

.kanban-card-btn { font-size: 0.75rem; padding: 2px 6px; }

.scoring-rule-grid { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 8px; align-items: end; }

.scoring-points-input { max-width: 80px; }

.scoring-action-cell { text-align: right; white-space: nowrap; }

.btn-table-action { padding: 4px 10px; font-size: 0.85rem; }

.scoring-edit-row { background: var(--bg-2, #f8f9fa); }

.scoring-select-field { min-width: 120px; }

.scoring-select-operator { min-width: 100px; }

.scoring-select-status { min-width: 90px; }

.integration-card-connected { border-color: var(--success, #22c55e); }

.integration-status-soon { background: var(--bg-2, rgba(148,163,184,0.1)); color: var(--text-2); }

.integration-auto-label { display: flex; align-items: flex-start; gap: 8px; font-size: 0.85rem; color: var(--text); cursor: pointer; line-height: 1.4; }

.integration-auto-checkbox { flex-shrink: 0; margin-top: 2px; accent-color: var(--primary); }

.integration-connected-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 6px; border-top: 1px solid var(--border); }

.integration-disconnect-form { margin: 0; flex-shrink: 0; }

.btn-disconnect { color: var(--danger); white-space: nowrap; }

.icon-success { color: var(--success, #22c55e); }

.integration-help-text { margin-top: 6px; font-size: 0.78rem; color: var(--text-2); }

.btn-disabled-soon { cursor: not-allowed; }

.integrations-info-banner { margin-top: 24px; padding: 20px; background: var(--bg-2, var(--bg)); border-radius: 12px; text-align: center; }

.integrations-info-text { color: var(--text-2); font-size: 0.9rem; margin: 0; }

.milestone-picker-card { padding: 12px; background: var(--surface); border-radius: 8px; border: 1px solid var(--border-2); display: flex; flex-direction: column; gap: 8px; min-height: 86px; }

.milestone-picker-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.milestone-picker-info { min-width: 0; overflow: hidden; }

.milestone-picker-name { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.milestone-picker-desc { color: var(--text-2); font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.milestone-picker-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }

.milestone-picker-badge-attached { background: var(--primary); color: #fff; padding: 4px 8px; border-radius: 999px; font-size: 0.85rem; }

.milestone-picker-badge-unattached { background: var(--surface-2); color: var(--text-2); padding: 4px 8px; border-radius: 999px; font-size: 0.85rem; }

.milestone-amount-label { font-size: 0.85rem; color: var(--text-2); }

.milestone-amount-field { width: 100%; max-width: 200px; padding: 8px; margin-top: 4px; background: var(--surface); border: 1px solid var(--border-2); border-radius: 6px; color: var(--text); }

.milestone-amount-help { font-size: 0.85rem; color: var(--text-2); margin-top: 6px; }

.milestone-amount-section { margin-top: 6px; }

.milestone-create-card { padding: 12px; background: var(--surface); border-radius: 6px; border: 1px solid var(--border-2); }

.milestone-create-label { flex: 1; margin: 0; cursor: pointer; color: var(--text); }

.milestone-create-amount-section { display: none; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-2); }

.milestone-create-amount-label { margin: 0; font-size: 0.85rem; color: var(--text-2); display: block; margin-bottom: 4px; }

.milestone-create-amount-input { width: 150px; padding: 6px; background: var(--bg); border: 1px solid var(--border-2); border-radius: 6px; color: var(--text); }

.created-by-username { color: var(--text-2); font-size: 0.8rem; margin-left: 4px; }

.badge-company-wide { background: var(--accent-blue-bg, #e0f0ff); color: var(--accent-blue, #0066cc); }

.cs-field-score-row { justify-content: space-between; }

.cs-field-score-positive { color: #22c55e; flex: 0; }

.cs-field-score-negative { color: #ef4444; flex: 0; }

.portal-hero-title { margin: 0 0 4px; font-size: 1.5rem; font-weight: 700; color: var(--text); letter-spacing: -0.02em; }

.portal-hero-subtitle { margin: 0; color: var(--text-2); font-size: 0.92rem; }

.portal-hero-subtext { margin: 4px 0 0; color: var(--text-2); font-size: 0.88rem; }

.portal-settings-label { display: block; color: var(--text-2); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }

.portal-select { width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 0.88rem; }

.portal-popover-col { display: flex; flex-direction: column; gap: 10px; }

.portal-popover-divider { border-top: 1px solid var(--border); margin: 4px 0; }

.portal-btn-row { display: flex; gap: 6px; margin-top: 8px; }

.portal-card-provider { margin-bottom: 28px; padding: 14px 20px; }

.portal-provider-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

.portal-provider-name { font-weight: 700; color: var(--text); font-size: 0.95rem; }

.portal-project-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 8px; }

.portal-project-name { margin: 0; font-size: 1.05rem; font-weight: 600; color: var(--text); line-height: 1.3; }

.portal-project-desc { margin: 0 0 12px; color: var(--text-2); font-size: 0.85rem; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }

.portal-date-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }

.portal-card-footer { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); }

.portal-card-footer-link { font-size: 0.82rem; color: var(--accent, #3b82f6); font-weight: 600; }

.portal-quick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }

.portal-card-heading { font-weight: 600; color: var(--text); margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }

.portal-form-grid { display: grid; gap: 10px; }

.portal-input { width: 100%; padding: 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 0.88rem; }

.portal-textarea { width: 100%; padding: 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 0.88rem; resize: vertical; }

.portal-select-sm { padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 0.85rem; }

.portal-select-lg { padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 0.88rem; }

.portal-booking-desc { color: var(--text-2); font-size: 0.88rem; line-height: 1.5; margin: 0 0 12px; }

.portal-detail-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }

.portal-detail-title { margin: 0 0 8px; font-size: 1.5rem; font-weight: 700; color: var(--text); letter-spacing: -0.02em; }

.portal-detail-desc { margin: 12px 0 0; color: var(--text-2); font-size: 0.9rem; line-height: 1.6; }

.portal-update-card { padding: 14px 16px; }

.portal-update-header { display: flex; justify-content: space-between; align-items: start; margin-bottom: 6px; }

.portal-update-label { color: var(--text); display: block; margin-bottom: 3px; font-size: 0.9rem; }

.portal-update-meta { color: var(--text-2); font-size: 0.8rem; }

.portal-update-body { margin: 6px 0 0; color: var(--text-2); white-space: pre-wrap; line-height: 1.5; font-size: 0.88rem; }

.portal-comment-label { color: var(--text-2); font-size: 0.85rem; margin: 0; }

.portal-comment-textarea { width: 100%; padding: 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 0.9rem; resize: vertical; }

.portal-timeline-pad { padding: 24px; }

.portal-timeline-wrap { position: relative; padding-left: 28px; }

.portal-timeline-node { position: relative; margin-bottom: 24px; }

.portal-timeline-dot { position: absolute; left: -28px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--accent, #3b82f6); border: 3px solid var(--surface); }

.portal-timeline-line { border-left: 2px solid var(--border); position: absolute; left: -22px; top: 17px; bottom: -24px; }

.portal-timeline-title { font-weight: 700; font-size: 1rem; color: var(--text); margin-bottom: 4px; }

.portal-timeline-dates { display: flex; gap: 12px; flex-wrap: wrap; font-size: 0.82rem; color: var(--text-2); }

.portal-milestone-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px dotted var(--border); }

.portal-milestone-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.portal-milestone-name { flex: 1; font-size: 0.88rem; color: var(--text); }

.portal-milestone-date { font-size: 0.78rem; color: var(--text-2); }

.portal-collapse-header { padding: 16px 20px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.portal-collapse-title-wrap { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }

.portal-collapse-name { color: var(--text); font-weight: 600; font-size: 0.95rem; }

.portal-collapse-end { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.portal-collapse-desc { color: var(--text-2); font-size: 0.88rem; line-height: 1.6; margin: 0 0 12px 0; }

.portal-comments-heading { font-size: 0.8rem; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; }

.portal-comment-box { padding: 10px 12px; background: var(--bg); border-radius: 8px; border: 1px solid var(--border); margin-bottom: 6px; }

.portal-comment-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }

.portal-comment-author { font-weight: 600; font-size: 0.85rem; color: var(--text); }

.portal-comment-time { font-size: 0.78rem; color: var(--text-2); }

.portal-comment-text { margin: 0; color: var(--text-2); font-size: 0.88rem; line-height: 1.5; white-space: pre-wrap; }

.portal-comment-form-wrap { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); }

.portal-comment-form { display: grid; gap: 6px; }

.portal-comment-input { width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 0.88rem; resize: vertical; }

.portal-empty-pad { padding: 40px 20px; }

.portal-contract-num { color: var(--text-2); font-size: 0.82rem; }

.portal-ack-yes { color: #10b981; font-weight: 600; }

.portal-ack-date { color: var(--text-2); font-size: 0.78rem; }

.portal-action-cell { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }

.portal-milestone-desc-text { color: var(--text-2); font-size: 0.82rem; }

.portal-amount-cell { text-align: right; color: var(--text-2); }

.portal-item-id { font-weight: 500; font-size: 0.85rem; }

.portal-modal-title { margin: 0 0 16px 0; font-size: 1.1rem; font-weight: 600; color: var(--text); }

.portal-modal-label { display: block; margin-bottom: 4px; color: var(--text-2); font-size: 0.85rem; font-weight: 500; }

.portal-modal-input { width: 100%; padding: 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-size: 0.95rem; }

.portal-modal-hint { color: var(--text-2); font-size: 0.85rem; margin: 8px 0 0; }

.portal-modal-actions { margin-top: 18px; display: flex; gap: 8px; }

.portal-actions-wrap { display: flex; gap: 10px; flex-wrap: wrap; }

.portal-booking-meta { color: var(--text-2); margin-left: 8px; }

.portal-booking-utc { font-size: 0.78rem; }

.portal-booking-subject { color: var(--text-2); margin-left: 12px; font-size: 0.88rem; }

.portal-booking-location { color: var(--text-2); font-size: 0.85rem; margin-top: 6px; }

.portal-booking-card-pad { padding: 14px 16px; }

.portal-booking-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }

.portal-form-card-pad { padding: 24px; }

.portal-form-heading { margin: 0 0 20px; font-size: 1.1rem; font-weight: 600; color: var(--text); }

.portal-form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }

.portal-slots-loading { display: none; color: var(--text-2); font-size: 0.88rem; padding: 12px; }

.portal-slots-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }

.portal-slots-empty { display: none; color: var(--text-2); font-size: 0.88rem; padding: 12px; text-align: center; }

.portal-slot-hint { font-weight: 400; font-size: 0.78rem; color: var(--text-2); }

.portal-submit-full { width: 100%; justify-content: center; padding: 12px; }

.portal-badge-confirmed { background: rgba(59,130,246,0.1); color: #3b82f6; }

.portal-feedback-hero { margin-bottom: 8px; }

.portal-feedback-title { font-size: 1.5rem; font-weight: 700; margin: 0 0 4px; }

.portal-feedback-submitted { text-align: center; padding: 48px 24px; }

.portal-feedback-check { font-size: 3rem; color: #22c55e; display: block; margin-bottom: 16px; }

.portal-feedback-done-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 8px; }

.portal-feedback-done-text { color: var(--text-2); font-size: 0.9rem; margin-bottom: 24px; }

.portal-feedback-card-section { margin-bottom: 16px; }

.portal-feedback-section-title { font-size: 1rem; font-weight: 600; margin-bottom: 16px; }

.portal-feedback-star-lg { font-size: 2rem; cursor: pointer; color: var(--text-2); transition: color 0.15s; margin-right: 4px; }

.portal-feedback-star-sm { font-size: 1.25rem; cursor: pointer; color: var(--text-2); transition: color 0.15s; margin-right: 2px; }

.portal-feedback-hint { color: var(--text-2); display: block; margin-top: 8px; }

.portal-feedback-desc { color: var(--text-2); font-size: 0.85rem; margin-bottom: 20px; }

.portal-feedback-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }

.portal-feedback-label { min-width: 140px; font-size: 0.9rem; font-weight: 500; }

.portal-feedback-comments-title { font-size: 1rem; font-weight: 600; margin-bottom: 12px; }

.portal-feedback-textarea { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; color: var(--text); resize: vertical; font-size: 0.9rem; }

.portal-feedback-submit-row { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }

.portal-icon-warning { color: #f59e0b; }

.portal-icon-purple { color: #8b5cf6; }

.portal-icon-accent { color: var(--accent, #3b82f6); }

.portal-icon-dim { opacity: 0.6; margin-right: 4px; }

.error-page-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 50vh; text-align: center; padding: 40px 20px; }

.error-page-code { font-size: 96px; font-weight: 700; line-height: 1; margin-bottom: 8px; }

.error-page-code-403 { color: var(--danger); }

.error-page-code-404 { color: var(--primary); }

.error-page-code-500 { color: var(--warning); }

.error-page-title { margin: 0 0 12px; font-size: 1.5rem; color: var(--text); }

.error-page-desc { margin: 0 0 32px; color: var(--text-2); max-width: 480px; line-height: 1.6; }

.error-page-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

.adm-role-badge { padding: 4px 10px; border-radius: 6px; font-size: 0.85rem; }

.adm-role-badge-admin { background: #3b82f6; color: #fff; }

.adm-role-badge-member { background: var(--btn-bg); color: var(--text-2); }

.adm-th-actions { padding: 10px; border-bottom: 1px solid var(--border); width: 120px; }

.adm-ticket-msg { padding: 14px; border: 1px solid var(--border-2); border-radius: 10px; }

.adm-ticket-msg-agent { background: var(--primary-bg, rgba(37,99,235,0.06)); }

.adm-ticket-msg-user { background: var(--surface); }

.adm-ticket-msg-internal { border-left: 3px solid #f59e0b; }

.adm-badge-template { background: var(--primary-light, #3b82f622); color: var(--primary); }

.feedback-dist-grid { display: grid; gap: 6px; }

.milestone-ext-link-icon { font-size: 0.8rem; color: var(--text-2); margin-left: 4px; }

.card-padded { padding: 18px; }

.modal-hidden { display: none; }

.portal-btn-gap { gap: 4px; }

.portal-btn-full-start { width: 100%; justify-content: flex-start; }

.portal-btn-full-center { width: 100%; justify-content: center; }

.portal-collapse-card { padding: 0; overflow: hidden; margin-bottom: 8px; }

.portal-btn-mb4 { margin-bottom: 4px; }

.portal-comments-section { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }

.portal-btn-center-sm { justify-content: center; padding: 6px 14px; }

.portal-slot-btn { justify-content: center; flex-direction: column; padding: 12px 8px; gap: 2px; }

.portal-slot-duration { font-size: 0.75rem; color: var(--text-2); }

.ar-form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }

.ar-conditions-help { font-size: 0.85rem; color: var(--text-2); margin-bottom: 12px; }

.ar-condition-row { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 8px; margin-bottom: 8px; align-items: end; }

.ar-btn-add { margin-bottom: 16px; font-size: 0.85rem; }

.ar-btn-add-action { margin-bottom: 20px; font-size: 0.85rem; }

.ar-action-row { margin-bottom: 12px; padding: 12px; background: var(--bg-2); border-radius: 8px; }

.ar-action-grid { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: end; }

.ar-email-fields { display: none; margin-top: 8px; }

.ar-email-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.ar-operator-bold { margin: 0 6px; }

.ar-action-badge { background: var(--primary); color: #fff; font-size: 0.75rem; }

.ar-email-meta { font-size: 0.82rem; color: var(--text-2); }

.cs-avatar-violet { background: linear-gradient(135deg, #8b5cf6, #a855f7); }

.cs-avatar-blue-cyan { background: linear-gradient(135deg, #3b82f6, #06b6d4); }

.cs-avatar-amber { background: linear-gradient(135deg, #f59e0b, #d97706); }

.cs-avatar-amber-yellow { background: linear-gradient(135deg, #f59e0b, #eab308); }

.cs-avatar-purple-indigo { background: linear-gradient(135deg, #8b5cf6, #6366f1); }

.icon-gcal { color: #4285f4; }

.icon-warning { color: var(--warning, #f59e0b); }

.booking-body-text { color: var(--text); line-height: 1.6; }

.booking-notes-text { color: var(--text-2); white-space: pre-wrap; line-height: 1.6; }

.cal-dot-projects { background: #3b82f6; }

.cal-dot-milestones { background: #8b5cf6; }

.cal-dot-invoices { background: #f59e0b; }

.cal-dot-contracts { background: #22c55e; }

.cal-dot-proposals { background: #06b6d4; }

.cal-dot-tasks { background: #ec4899; }

.cal-dot-recurring-invoices { background: #d946ef; }

.cal-dot-recurring-tasks { background: #a855f7; }

.cal-dot-recurring-expenses { background: #f43f5e; }

.cal-dot-checklists { background: #14b8a6; }

.cal-dot-follow-ups { background: #0ea5e9; }

.cal-dot-bookings { background: #059669; }

.cal-more-text { font-size: 0.7rem; color: var(--text-2); padding: 0 6px; }

.checklist-hint { color: var(--text-2); margin-top: 16px; }

.ms-project-subtitle { color: var(--text-2); margin-bottom: 20px; }

.ms-usage-card { background: var(--surface); border: 1px solid var(--border-2); border-radius: 8px; padding: 16px; margin-bottom: 20px; }

.ms-usage-title { margin: 0 0 12px 0; color: var(--text); font-size: 1.1rem; }

.ms-usage-inner { margin-bottom: 16px; padding: 12px; background: var(--btn-bg); border-radius: 6px; }

.ms-usage-label { color: var(--text-2); font-size: 0.85rem; margin-bottom: 8px; }

.ms-usage-tags { display: flex; gap: 8px; flex-wrap: wrap; }

.ms-tag-blue { padding: 4px 10px; background: #3b82f6; color: #fff; border-radius: 6px; font-weight: 500; font-size: 0.9rem; }

.ms-tag-purple { padding: 4px 10px; background: #8b5cf6; color: #fff; border-radius: 6px; font-weight: 500; font-size: 0.9rem; }

.ms-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }

.ms-stat-value { font-size: 1.2rem; font-weight: 600; color: var(--text); }

.ms-stat-value-blue { font-size: 1.2rem; font-weight: 600; color: var(--primary, #3b82f6); }

.ms-stat-value-purple { font-size: 1.2rem; font-weight: 600; color: var(--accent-purple, #8b5cf6); }

.ms-stat-value-emerald { font-size: 1.2rem; font-weight: 600; color: var(--success, #34d399); }

.ms-stat-value-amber { font-size: 1.2rem; font-weight: 600; color: var(--warning, #f59e0b); }

.ms-stat-value-red { font-size: 1.2rem; font-weight: 600; color: var(--danger, #ef4444); }

.ms-detail-sep { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-2); }

.ms-detail-title { margin: 0 0 8px 0; color: var(--text); font-size: 1rem; }

.ms-invoice-row { display: flex; justify-content: space-between; align-items: center; padding: 8px; background: var(--bg); border-radius: 6px; }

.ms-inline-status { color: var(--text-2); font-size: 0.85rem; margin-left: 8px; }

.ms-paid-text { font-size: 0.85rem; color: #34d399; }

.ms-discount-text { font-size: 0.85rem; color: #f59e0b; }

.ms-field-start { align-items: flex-start; }

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

.ms-cs-item-col { flex-direction: column; align-items: stretch; }

.ms-progress-flex { display: flex; justify-content: space-between; margin-bottom: 4px; }

.ms-progress-pct { font-size: 0.8rem; font-weight: 600; }

.ms-progress-track { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }

.ms-progress-fill { height: 100%; border-radius: 3px; transition: width 0.3s; }

.ms-no-desc { color: var(--text-2); font-style: italic; }

.ms-split-merge-card { margin-top: 24px; padding: 16px; background: var(--surface); border: 1px solid var(--border-2); border-radius: 8px; }

.ms-split-merge-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.ms-split-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }

.ms-split-part-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }

.ms-split-name-pct-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }

.ms-split-status-date-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }

.ms-split-preview { margin-top: 8px; padding: 8px; background: var(--bg); border-radius: 6px; font-size: 0.85rem; color: var(--text-2); }

.ms-split-indicator { margin-bottom: 16px; padding: 12px; background: var(--surface); border: 1px solid var(--border-2); border-radius: 8px; display: flex; justify-content: space-between; align-items: center; }

.ms-split-total { font-size: 1.2rem; font-weight: 700; }

.ms-split-add-btn { display: inline-flex; align-items: center; gap: 6px; }

.ms-split-remove-btn { color: var(--danger); padding: 4px 8px; }

.ms-split-indicator-valid { border-color: var(--success) !important; }

.ms-split-indicator-valid .ms-split-total { color: var(--success); }

.ms-split-indicator-invalid { border-color: var(--danger) !important; }

.ms-split-indicator-invalid .ms-split-total { color: var(--danger); }

.ms-merge-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; align-items: center; justify-content: center; }

.ms-merge-modal { background: var(--surface); border-radius: 12px; padding: 24px; max-width: 600px; width: 90%; max-height: 80vh; overflow-y: auto; margin: auto; }

.ms-merge-modal h3 { margin: 0 0 16px 0; }

.ms-merge-label { font-weight: 600; margin-bottom: 8px; display: block; }

.ms-merge-option { display: flex; align-items: center; gap: 8px; padding: 8px; background: var(--bg); border-radius: 6px; margin-bottom: 4px; cursor: pointer; }

.ms-merge-option-cost { color: var(--text-2); font-size: 0.85rem; margin-left: auto; }

.ms-merge-footer { margin-top: 16px; display: flex; gap: 10px; justify-content: flex-end; }

.btn-icon-inline { display: inline-flex; align-items: center; gap: 6px; }

.ms-comment-item { flex-direction: column; align-items: stretch; gap: 4px; }

.ms-comment-author { font-weight: 600; font-size: 0.85rem; color: var(--text); }

.ms-comment-author i { margin-right: 4px; opacity: 0.6; }

.ms-comment-date { font-size: 0.78rem; color: var(--text-2); }

.ms-comment-body { margin: 0; color: var(--text-2); font-size: 0.88rem; line-height: 1.5; white-space: pre-wrap; }

.ms-comment-empty { color: var(--text-2); font-style: italic; font-size: 0.9rem; }

.ms-comment-form { margin-top: 1rem; }

.ms-comment-submit { margin-top: 0.5rem; text-align: right; }

.fb-rating-center { text-align: center; padding: 16px 0; }

.fb-rating-big { font-size: 2.5rem; font-weight: 700; }

.fb-star-icon { font-size: 1.5rem; }

.fb-rating-label { margin-top: 8px; font-size: 1.3rem; letter-spacing: 2px; }

.fb-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 16px 0; }

.fb-rating-value { font-size: 1.2rem; font-weight: 600; }

.fb-bar-track { flex: 1; background: var(--bg-2); border-radius: 4px; height: 6px; }

.fb-bar-fill { height: 100%; border-radius: 4px; }

.fb-body-text { margin: 0; white-space: pre-wrap; line-height: 1.6; padding: 16px 0; }

.prop-th-100 { padding: 10px; border-bottom: 1px solid var(--border); width: 100px; }

.prop-th-120 { padding: 10px; border-bottom: 1px solid var(--border); width: 120px; }

.prop-td-bold { padding: 10px; border-bottom: 1px solid var(--border-2); color: var(--text); font-weight: 500; }

.prop-tfoot-label { padding: 10px; text-align: right; color: var(--text-2); }

.prop-tfoot-value { padding: 10px; color: var(--text); font-weight: 600; }

.prop-tfoot-total-label { padding: 10px; text-align: right; color: var(--text); font-weight: 700; }

.prop-tfoot-total-value { padding: 10px; color: var(--text); font-weight: 700; font-size: 1.1rem; }

.prop-table { width: 100%; border-collapse: collapse; min-width: 720px; }

.prop-milestone-desc { color: var(--text-2); font-size: 0.85rem; font-weight: normal; }

.prop-client-link { color: inherit; text-decoration: none; font-weight: 600; }

.prop-form-client-panel { margin-top: 16px; padding: 12px; background: var(--btn-bg); border-radius: 8px; border: 1px solid var(--border); }

.prop-form-client-info { margin-top: 8px; color: var(--text-2); }

.prop-form-readonly-input { background: var(--btn-bg); color: var(--text-2); cursor: not-allowed; }

.prop-form-milestone-card { padding: 12px; background: var(--surface); border-radius: 6px; border: 1px solid var(--border-2); }

.prop-form-milestone-label { flex: 1; margin: 0; cursor: pointer; color: var(--text); }

.prop-form-milestone-amount-toggle { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-2); }

.prop-form-milestone-amount-label { margin: 0; font-size: 0.85rem; color: var(--text-2); display: block; margin-bottom: 4px; }

.prop-form-milestone-amount-input { width: 150px; padding: 6px; background: var(--bg); border: 1px solid var(--border-2); border-radius: 6px; color: var(--text); }

.prop-form-th-actions { padding: 10px; border-bottom: 1px solid var(--border); width: 100px; font-weight: 600; }

.prop-form-picker-card { padding: 12px; background: var(--surface); border-radius: 8px; border: 1px solid var(--border-2); display: flex; flex-direction: column; gap: 8px; min-height: 86px; }

.prop-form-picker-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.prop-form-picker-info { min-width: 0; overflow: hidden; }

.prop-form-picker-name { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.prop-form-picker-desc { color: var(--text-2); font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.prop-form-picker-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }

.prop-form-picker-badge-attached { background: var(--primary); color: #fff; padding: 4px 8px; border-radius: 999px; font-size: 0.85rem; }

.prop-form-picker-badge-available { background: var(--surface-2); color: var(--text-2); padding: 4px 8px; border-radius: 999px; font-size: 0.85rem; }

.prop-form-picker-amount-section { margin-top: 6px; }

.prop-form-picker-amount-label { font-size: 0.85rem; color: var(--text-2); }

.prop-form-picker-amount-input { width: 100%; max-width: 200px; padding: 8px; margin-top: 4px; background: var(--surface); border: 1px solid var(--border-2); border-radius: 6px; color: var(--text); }

.prop-form-picker-max-hint { font-size: 0.85rem; color: var(--text-2); margin-top: 6px; }

.w-90 { width: 90px; }

.priority-badge-inline { padding: 3px 10px; border-radius: 6px; font-size: 0.85rem; font-weight: 600; }

.global-search-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 9999; justify-content: center; padding-top: 15vh; }

.global-search-overlay.active { display: flex; }

.global-search-box { background: var(--surface); border-radius: 12px; width: 90%; max-width: 600px; max-height: 60vh; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.3); display: flex; flex-direction: column; }

.global-search-input-wrap { padding: 16px; border-bottom: 1px solid var(--border-2); }

.global-search-input { width: 100%; padding: 10px; font-size: 1.1rem; background: transparent; border: none; color: var(--text); outline: none; }

.global-search-results { flex: 1; overflow-y: auto; padding: 8px; }

@media (min-width: 769px) {
.mobile-unified-bar { display:none; }
}

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

.help-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.85rem; font-weight: 500; color: var(--primary);
    text-decoration: none; transition: color 0.2s, gap 0.2s;
}

.help-link:hover { color: var(--text); gap: 8px; }

.help-link i { font-size: 0.9rem; transition: transform 0.2s; }

.help-link:hover i { transform: translateX(-2px); }

.help-body {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 32px 36px;
    margin-top: 8px;
    line-height: 1.75;
    color: var(--text);
    font-size: 0.95rem;
}

.help-body p { margin: 0 0 1rem; color: var(--text); }

.help-body p:last-child { margin-bottom: 0; }

.help-body a { color: var(--primary); text-decoration: none; font-weight: 500; }

.help-body a:hover { text-decoration: underline; }

.help-body strong { color: var(--text); font-weight: 600; }

.mb-lg + h1, .help-link + h1 {
    font-size: 1.5rem; font-weight: 700; color: var(--text);
    margin: 16px 0 0; line-height: 1.3;
    background: var(--surface);
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    padding: 28px 36px 0;
}

.mb-lg + h1 + .help-body {
    border-top: none;
    border-radius: 0 0 12px 12px;
    margin-top: 0;
    padding-top: 12px;
}

.help-body .section-heading, .help-body h2.section-heading, .help-body h2 {
    font-size: 1.1rem; font-weight: 700; color: var(--text);
    margin: 28px 0 12px; padding-top: 20px;
    border-top: 1px solid var(--border); line-height: 1.4;
}

.help-body h2:first-child, .help-body .section-heading:first-child, .help-body p:first-child + h2, .help-body p:first-child + .section-heading {
    border-top: none; padding-top: 0; margin-top: 20px;
}

.help-body h2.section-heading[class]::before { display: none; }

.help-list, .help-body ul, .help-body ol {
    margin: 0 0 1rem; padding-left: 0; list-style: none;
}

.help-list li, .help-body ul li, .help-body ol li {
    position: relative; padding: 8px 12px 8px 28px; margin-bottom: 4px;
    background: var(--bg, var(--surface-2, rgba(0,0,0,0.02)));
    border-radius: 8px; font-size: 0.9rem; line-height: 1.6;
    transition: background 0.15s;
}

.help-list li:hover, .help-body ul li:hover, .help-body ol li:hover {
    background: var(--btn-bg, rgba(0,0,0,0.04));
}

.help-list li::before, .help-body ul li::before {
    content: ''; position: absolute; left: 12px; top: 16px;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--primary);
}

.help-body ol { counter-reset: help-ol; }

.help-body ol li::before {
    content: counter(help-ol); counter-increment: help-ol;
    position: absolute; left: 8px; top: 8px;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--primary); color: #fff;
    font-size: 0.7rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}

.help-body ol li { padding-left: 36px; }

.help-note-box {
    margin: 24px 0; padding: 16px 20px;
    background: rgba(37,99,235,0.06);
    border: 1px solid rgba(37,99,235,0.15);
    border-left: 4px solid var(--primary);
    border-radius: 10px; font-size: 0.9rem;
}

.help-note-box strong { color: var(--primary); }

.help-note-box p { margin: 6px 0 0; color: var(--text-2); }

.help-info-box {
    margin-top: 16px; padding: 20px;
    background: var(--btn-bg); border-radius: 8px;
    border: 1px solid var(--border);
}

.help-warning-box {
    margin-top: 32px; padding: 20px;
    background: color-mix(in srgb, var(--warning) 12%, transparent);
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent);
}

.help-warning-text {
    margin: 8px 0 0 0;
    color: var(--warning);
}

.help-danger-box {
    margin-top: 32px; padding: 20px;
    background: color-mix(in srgb, var(--danger) 8%, transparent);
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--danger) 20%, transparent);
}

.help-score-green { color: var(--success); }

.help-score-amber { color: var(--warning); }

.help-score-orange { color: color-mix(in srgb, var(--warning) 60%, var(--danger)); }

.help-body .page-table { margin: 16px 0; font-size: 0.9rem; }

.help-body .page-table th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.3px; color: var(--text-2); }

.help-body .page-table .bi { font-size: 1.2rem; }

.help-hero {
    text-align: center;
    padding: 2.5rem 1.5rem 2rem;
    margin-bottom: 2rem;
    background: linear-gradient(135deg, rgba(37,99,235,0.08), rgba(139,92,246,0.06));
    border: 1px solid var(--border);
    border-radius: 1rem;
}

.help-hero-icon {
    width: 64px; height: 64px; margin: 0 auto 1rem;
    display: flex; align-items: center; justify-content: center;
    background: var(--primary); color: #fff; border-radius: 1rem;
    font-size: 1.75rem;
}

.help-hero h1 { margin: 0 0 0.5rem; font-size: 2rem; font-weight: 700; color: var(--text); }

.help-hero-subtitle { color: var(--text-2); font-size: 1.0625rem; margin: 0 0 1.5rem; max-width: 540px; margin-inline: auto; line-height: 1.6; }

.help-hero-actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }

.help-hero-actions .btn { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; }

.help-search-wrap { position: relative; max-width: 520px; margin: 1.5rem auto 0; width: 100%; }

.help-search-box {
    display: flex; align-items: center; gap: 0.625rem;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 0.75rem; padding: 0.625rem 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.help-search-box:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,0.12); }

.help-search-icon { color: var(--text-2); font-size: 1rem; flex-shrink: 0; }

.help-search-input {
    flex: 1; border: none; outline: none; background: transparent;
    font-size: 0.9375rem; color: var(--text); min-width: 0;
}

.help-search-input::placeholder { color: var(--text-2); opacity: 0.7; }

.help-search-kbd {
    font-size: 0.6875rem; padding: 0.125rem 0.375rem;
    border: 1px solid var(--border); border-radius: 0.25rem;
    color: var(--text-2); background: var(--btn-bg);
    font-family: inherit; line-height: 1.4; display: none;
}

.help-search-wrap.has-query .help-search-kbd { display: inline-block; }

.help-search-results {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 0.75rem; box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    max-height: 360px; overflow-y: auto; display: none; z-index: 100;
}

.help-search-results.open { display: block; }

.help-search-results-empty { padding: 1.25rem; text-align: center; color: var(--text-2); font-size: 0.875rem; }

.help-search-result {
    display: flex; align-items: flex-start; gap: 0.75rem;
    padding: 0.75rem 1rem; text-decoration: none; color: inherit;
    transition: background 0.15s; border-bottom: 1px solid var(--border);
}

.help-search-result:last-child { border-bottom: none; }

.help-search-result:hover { background: var(--btn-bg); }

.help-search-result-icon {
    width: 32px; height: 32px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(37,99,235,0.1); color: var(--primary);
    border-radius: 0.5rem; font-size: 0.875rem; margin-top: 2px;
}

.help-search-result-text { min-width: 0; }

.help-search-result-title { font-size: 0.875rem; font-weight: 600; color: var(--text); margin: 0 0 0.125rem; line-height: 1.3; }

.help-search-result-cat { font-size: 0.75rem; color: var(--text-2); margin: 0; }

.help-stats-bar {
    display: flex; gap: 1.5rem; margin-bottom: 2rem;
    padding: 1rem 1.5rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: 0.75rem;
}

.help-stat { display: flex; align-items: baseline; gap: 0.375rem; }

.help-stat-num { font-size: 1.25rem; font-weight: 700; color: var(--text); }

.help-stat-label { font-size: 0.875rem; color: var(--text-2); }

.help-category-section {
    margin-bottom: 2rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 1rem;
    overflow: hidden;
}

.help-category-header {
    display: flex; align-items: center; gap: 0.875rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border);
    background: var(--btn-bg);
}

.help-category-icon {
    width: 40px; height: 40px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 0.625rem; font-size: 1.125rem;
}

.help-category-title { margin: 0; font-size: 1.125rem; font-weight: 700; color: var(--text); }

.help-category-count { font-size: 0.8125rem; color: var(--text-2); }

.help-color-blue { background: rgba(37,99,235,0.1);  color: #2563eb; }

.help-color-indigo { background: rgba(99,102,241,0.1);  color: #6366f1; }

.help-color-purple { background: rgba(139,92,246,0.1);  color: #8b5cf6; }

.help-color-green { background: rgba(34,197,94,0.1);   color: #22c55e; }

.help-color-teal { background: rgba(20,184,166,0.1);  color: #14b8a6; }

.help-color-amber { background: rgba(245,158,11,0.1);  color: #f59e0b; }

.help-color-slate { background: rgba(100,116,139,0.1); color: #64748b; }

.help-articles-grid { display: flex; flex-direction: column; }

.help-article-card {
    display: flex; align-items: center; gap: 0.875rem;
    padding: 0.875rem 1.5rem;
    text-decoration: none; color: inherit;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
}

.help-article-card:last-child { border-bottom: none; }

.help-article-card:hover { background: var(--btn-bg); }

.help-article-icon {
    width: 34px; height: 34px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 0.5rem; font-size: 0.9375rem;
}

.help-article-body { flex: 1; min-width: 0; }

.help-article-title {
    margin: 0 0 0.125rem; font-size: 0.9375rem; font-weight: 600;
    color: var(--text); line-height: 1.4;
}

.help-article-desc {
    margin: 0; font-size: 0.8125rem; color: var(--text-2);
    line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.help-article-arrow {
    color: var(--text-2); font-size: 0.75rem; flex-shrink: 0;
    transition: transform 0.2s, color 0.2s;
}

.help-article-card:hover .help-article-arrow { transform: translateX(3px); color: var(--primary); }

:focus-visible {
    outline: 2px solid var(--primary, #2563eb);
    outline-offset: 2px;
}

.btn:focus-visible, a:focus-visible, button:focus-visible, select:focus-visible, textarea:focus-visible, input:focus-visible, .form-input:focus-visible, .form-select:focus-visible {
    outline: 2px solid var(--primary, #2563eb);
    outline-offset: 2px;
}

.cs-action-icon:focus-visible, .cs-back:focus-visible, .btn-icon:focus-visible, .toast-close:focus-visible, .view-toggle-btn:focus-visible, .quick-access-item:focus-visible, .accordion-header:focus-visible, .inline-edit:focus-visible {
    outline: 2px solid var(--primary, #2563eb);
    outline-offset: 2px;
}

.nav-segment-btn:focus-visible, .site-nav a:focus-visible, .nav-subnav-item:focus-visible, .ctx-menu-item:focus-visible, .sidebar-link:focus-visible {
    outline: 2px solid var(--primary, #2563eb);
    outline-offset: 2px;
}

:focus:not(:focus-visible) {
    outline: none;
}

.status-badge::before {
    font-family: 'bootstrap-icons';
    margin-right: 4px;
    font-size: 0.75em;
    vertical-align: middle;
}

.status-badge[data-status="paid"]::before, .status-badge[data-status="completed"]::before, .status-badge[data-status="active"]::before, .status-badge[data-status="done"]::before, .status-badge[data-status="acknowledged"]::before, .status-badge[data-status="approved"]::before { content: "\F26B";  }

.status-badge[data-status="overdue"]::before, .status-badge[data-status="expired"]::before, .status-badge[data-status="urgent"]::before { content: "\F33B";  }

.status-badge[data-status="pending"]::before, .status-badge[data-status="in_progress"]::before, .status-badge[data-status="review"]::before, .status-badge[data-status="in_review"]::before, .status-badge[data-status="waiting"]::before { content: "\F293";  }

.status-badge[data-status="draft"]::before, .status-badge[data-status="todo"]::before { content: "\F4CA";  }

.status-badge[data-status="cancelled"]::before, .status-badge[data-status="rejected"]::before, .status-badge[data-status="void"]::before, .status-badge[data-status="closed"]::before { content: "\F622";  }

.status-badge[data-status="sent"]::before, .status-badge[data-status="shared"]::before { content: "\F571";  }

.status-badge[data-status="paused"]::before { content: "\F4C0";  }

.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-2);
}

.empty-state .empty-icon {
    font-size: 3rem;
    opacity: 0.25;
    margin-bottom: 12px;
}

.empty-state h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 8px;
}

.empty-state p {
    font-size: 0.9rem;
    margin: 0 0 16px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    color: var(--text-2);
}

.empty-state .btn {
    margin-top: 8px;
}

.toast.toast-error {
    border-left: 4px solid var(--danger, #ef4444);
}

.toast.toast-warning {
    border-left: 4px solid var(--warning, #f59e0b);
}

.toast.toast-success {
    border-left: 4px solid var(--success, #34d399);
}

.text-orange { color: #f97316; }

.text-cyan { color: #06b6d4; }

.text-gray { color: #6b7280; }

.fw-600 { font-weight: 600; }

.fw-700 { font-weight: 700; }

.grid-2-gap12 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.grid-3-gap8 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

.report-filter-form { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }

.report-filter-label { font-size: 0.85rem; font-weight: 500; }

.btn-h38 { height: 38px; }

.report-grid-2fr1fr { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }

.report-conversion-notice { margin-top: 8px; padding: 8px 14px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; font-size: 0.8rem; color: var(--text-2); display: inline-flex; align-items: center; gap: 6px; }

.stat-box-sm { padding: 10px; background: var(--bg-2); border-radius: 8px; text-align: center; }

.report-stat-row { padding: 8px 12px; background: var(--bg-2); border-radius: 8px; display: flex; justify-content: space-between; align-items: center; }

.report-empty-msg { text-align: center; padding: 40px; color: var(--text-2); }

.report-overdue-box { margin-top: 12px; padding: 12px; background: #ef444422; border-radius: 8px; text-align: center; }

.report-overdue-box-sm { padding: 10px; background: #ef444422; border-radius: 8px; text-align: center; }

.report-progress-row { display: flex; align-items: center; gap: 12px; margin: 12px 0; }

.report-progress-bar { flex: 1; height: 8px; background: var(--bg-2); border-radius: 4px; overflow: hidden; }

.report-progress-label { font-weight: 600; font-size: 0.9rem; }

.chart-max-h220 { max-height: 220px; }

.text-right-fw600-green { text-align: right; font-weight: 600; color: #22c55e; }

.info-callout { color: var(--text-2); margin-bottom: 20px; font-size: 0.9rem; padding: 12px; background: var(--surface-2); border-radius: 8px; }

.empty-state-title { margin: 0; font-size: 1.1rem; color: var(--text); }

.notification-form-inline { margin: 0; display: inline; }

.auth-description { margin-bottom: 20px; color: var(--text-2); }

.google-status-linked { color: var(--success, #16a34a); font-size: 0.85rem; }

.google-status-unlinked { color: var(--text-2); font-size: 0.85rem; }

.google-account-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; }

.btn-danger-ghost { color: var(--danger, #dc2626); display: inline-flex; align-items: center; gap: 6px; }

.btn-link-ghost { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }

.password-hint { color: var(--text-2); display: flex; align-items: center; gap: 4px; }

.cs-avatar-purple { background: linear-gradient(135deg, #6366f1, #8b5cf6); }

.cs-avatar-indigo { background: linear-gradient(135deg, #6366f1, #4f46e5); }

.cs-avatar-cyan { background: linear-gradient(135deg, #06b6d4, #0284c7); }

.cs-avatar-amber-red { background: linear-gradient(135deg, #f59e0b, #ef4444); }

.frequency-badge { background: var(--bg-2); color: var(--text-2); }

.register-subtitle { color: var(--text-2); margin-bottom: 32px; font-size: 1.125rem; }

.btn-google-signup { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 12px 16px; background: var(--surface, #fff); border: 1px solid var(--border, #d1d5db); border-radius: 8px; color: var(--text, #1f2937); font-size: 0.95rem; font-weight: 500; text-decoration: none; cursor: pointer; transition: background 0.15s, box-shadow 0.15s; margin-bottom: 0; }

.or-divider { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--text-2, #6b7280); font-size: 0.85rem; }

.or-divider-line { flex: 1; height: 1px; background: var(--border, #e5e7eb); }

.invitation-email-readonly { background-color: var(--surface-2); cursor: not-allowed; }

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

.register-footer { text-align: center; margin-top: 1rem; color: var(--text-2); }

.agent-table-unread { background: rgba(59, 130, 246, 0.08); }

.agent-new-badge { margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: #3b82f622; color: #3b82f6; font-size: 0.75rem; font-weight: 700; }

.agent-email-secondary { font-size: 0.85rem; color: var(--text-2); }

.agent-empty-cell { padding: 14px; color: var(--text-2); text-align: center; }

.ticket-msg-header-wrap { flex-wrap: wrap; }

.ticket-msg-delete-form { margin: 0; display: inline; }

.ticket-msg-delete-btn { padding: 6px 12px; font-size: 0.85rem; color: var(--danger); }

.ticket-send-ml-auto { margin-left: auto; }

.ticket-send-self-end { align-self: flex-end; }

.category-badge-neutral { background: #94a3b822; }

.overdue-text { color: var(--danger); font-weight: 600; }

.unassigned-text { color: var(--text-2); font-style: italic; }

.tax-form-section { padding: 20px; background: var(--surface-2); border-radius: 12px; border: 1px solid var(--border); }

.tax-form-heading { margin: 0 0 16px 0; color: var(--text); font-size: 1.1rem; font-weight: 600; }

.btn-sm-danger-ghost { padding: 6px 12px; font-size: 0.85rem; color: #ef4444; }

.cancel-btn-inline { display: inline-flex; align-items: center; gap: 8px; }

.template-form-max { max-width: 900px; }

.template-milestone-section { margin-top: 24px; padding: 16px; background: var(--btn-bg); border-radius: 8px; border: 1px solid var(--border); }

.template-milestone-help { color: var(--text-2); font-size: 0.85rem; margin: 4px 0 12px; }

.btn-remove-milestone { color: var(--danger); margin-bottom: 2px; }

.template-add-form { display: none; margin-bottom: 12px; padding: 12px; background: var(--bg-2, var(--bg)); border-radius: 8px; border: 1px solid var(--border); }

.template-edit-hint { color: var(--text-2); margin-top: 16px; }

.template-checkbox-label { margin: 0; display: flex; align-items: center; gap: 6px; padding-top: 20px; }

.template-category-badge { background: var(--btn-bg); padding: 3px 10px; border-radius: 6px; font-size: 0.85rem; }

.template-checklist-card { margin-top: 12px; padding: 16px; background: var(--bg-2, var(--bg)); border-radius: 8px; border: 1px solid var(--border); }

.template-checklist-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }

.template-checklist-count { color: var(--text-2); font-weight: normal; font-size: 0.85rem; }

.template-checklist-actions { display: flex; gap: 4px; align-items: center; }

.template-checklist-desc { color: var(--text-2); margin: 0 0 8px; font-size: 0.9rem; }

.template-item-form { display: none; margin-bottom: 8px; padding: 8px; background: var(--surface); border-radius: 6px; border: 1px solid var(--border-2); }

.template-item-input { width: 100%; padding: 6px 8px; background: var(--bg-2); border: 1px solid var(--border-2); border-radius: 6px; color: var(--text); }

.template-items-list { display: flex; flex-direction: column; gap: 4px; }

.template-item-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px; background: var(--surface); border-radius: 6px; }

.template-item-desc { color: var(--text-2); font-size: 0.85rem; margin-left: 8px; }

.template-empty-items { color: var(--text-2); margin: 4px 0 0; font-size: 0.9rem; }

.modal-card { background: var(--surface); border-radius: 12px; padding: 24px; max-width: 500px; width: 90%; border: 1px solid var(--border); }

.modal-heading { margin: 0 0 16px; }

.modal-input { width: 100%; padding: 10px; background: var(--bg-2); border: 1px solid var(--border-2); border-radius: 8px; color: var(--text); }

.modal-actions { margin-top: 14px; display: flex; gap: 10px; }

.clone-btn-full { width: 100%; }

.workspace-member-info { margin: 6px 0 0 0; color: var(--text-2); font-size: 0.9rem; }

.workspace-member-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.workspace-user-limit { color: var(--text-2); font-size: 0.9rem; align-self: center; padding: 10px 16px; background: var(--surface-2); border-radius: 8px; }

.role-badge-neutral { background: var(--btn-bg); color: var(--text); text-transform: capitalize; }

.member-actions-width { width: 200px; }

.invitations-heading { margin: 0 0 16px 0; font-size: 1.25rem; font-weight: 600; color: var(--text); }

.pending-invitations-mt { margin-top: 32px; }

.ws-subscription-info { margin: 6px 0 16px; color: var(--text-2); font-size: 0.9rem; }

.ws-plan-card { background: var(--surface); padding: 24px; border-radius: 12px; border: 1px solid var(--border); }

.ws-plan-heading { margin: 0 0 16px 0; color: var(--text); font-size: 1.1rem; font-weight: 600; }

.ws-plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: 16px; }

.ws-plan-value { font-size: 1.25rem; font-weight: 700; color: var(--text); }

.ws-plan-label { color: var(--text-2); font-size: 0.9rem; margin-bottom: 6px; }

.ws-plan-info { margin: 20px 0 0 0; color: var(--text-2); font-size: 0.9rem; padding: 12px; background: var(--surface-2); border-radius: 8px; }

.ws-link-primary { color: #2563eb; text-decoration: underline; }

.ws-link-primary-mt { color: #2563eb; text-decoration: underline; margin-top: 8px; display: inline-block; }

.ws-card-heading { margin: 0 0 12px 0; font-size: 1.25rem; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; }

.ws-card-heading-icon { color: #2563eb; }

.ws-card-details { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }

.ws-card-detail-row { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 0.9rem; }

.ws-card-body { flex: 1; }

.ws-role-value { color: var(--text); text-transform: capitalize; }

.ws-set-form { display: inline; margin: 0; }

.ws-downgrade-desc { margin: 4px 0 0 0; color: var(--text-2); font-size: 0.9rem; }

.ws-role-select { width: 100%; max-width: 300px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; font-size: 1rem; }

.activity-timeline-panel { margin-top: 28px; }

.audit-trail-heading { margin-top: 0; display: flex; align-items: center; gap: 8px; }

.audit-trail-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; font-size: 0.9rem; }

.audit-card { background: var(--surface); border: 1px solid var(--border-2); border-radius: 8px; padding: 14px; }

.audit-card-deleted-active { background: #ef444410; border: 1px solid #ef444433; border-radius: 8px; padding: 14px; }

.audit-heading { font-weight: 600; color: var(--text); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }

.audit-detail { color: var(--text-2); margin-bottom: 4px; }

.audit-id-dim { opacity: 0.5; font-size: 0.8rem; }

.cf-form-wrapper { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border-2); }

.cf-form-heading { margin: 0 0 16px 0; font-size: 1rem; font-weight: 600; }

.cf-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.pagination-bar-info { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: space-between; }

.pagination-per-page-row { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; }

.pagination-select-sm { padding: 4px 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 0.85rem; }

.related-panel-mt { margin-top: 28px; }

.related-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }

.related-heading { font-size: 1.1rem; font-weight: 700; margin: 0; }

.related-heading-count { font-size: 0.8rem; font-weight: 400; color: var(--text-2); margin-left: 6px; }

.availability-tz-hint { margin-top: 4px; font-size: 0.78rem; color: var(--text-2); }

.booking-check-icon { color: var(--success, #22c55e); }

.badge-one-time { background: rgba(245, 158, 11, 0.1); color: #f59e0b; margin-left: 6px; }

.badge-inactive { background: rgba(148, 163, 184, 0.1); color: #94a3b8; margin-left: 4px; }

.badge-in-queue { background: #34d39922; color: #34d399; padding: 8px 16px; }

.list-card-inactive { opacity: 0.6; }

.ml-xs { margin-left: 4px; }

.expiring-soon { color: #f59e0b; font-weight: 600; }

.pub-subtitle { color: var(--text-2); margin-bottom: 24px; }

.pub-subtitle-lg { color: var(--text-2); margin-bottom: 32px; font-size: 1.125rem; }

.pub-content-body { line-height: 1.8; color: var(--text-2); }

.pub-callout { margin-top: 32px; padding: 20px; background: var(--btn-bg); border-radius: 8px; border: 1px solid var(--border); }

.pub-callout-lg { margin-top: 40px; padding: 24px; background: var(--btn-bg); border-radius: 8px; border: 1px solid var(--border); }

.pub-callout h3 { margin-top: 0; color: var(--text); }

.pub-callout-lg h3 { margin-top: 0; color: var(--text); }

.pub-callout p { color: var(--text-2); margin: 8px 0; }

.pub-callout-lg p { color: var(--text-2); margin: 8px 0; }

.pub-list-indent { padding-left: 24px; color: var(--text-2); }

.kanban-priority-dot-wrap { display: inline-flex; align-items: center; gap: 3px; }

.kanban-priority-dot { width: 8px; height: 8px; border-radius: 50%; }

.kanban-card-action-btn { font-size: 0.75rem; padding: 2px 6px; }

.cf-form-grid-3col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }

.fb-form-ratings-panel { margin-top: 20px; padding: 16px; background: var(--btn-bg); border-radius: 8px; border: 1px solid var(--border); }

.fb-form-ratings-desc { color: var(--text-2); font-size: 0.85rem; margin: 4px 0 16px; }

.fb-form-ratings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }

.ms-create-project-subtitle { color: var(--text-2); margin-bottom: 20px; }

.portal-content-pad { padding-top: 32px; padding-bottom: 32px; }

.portal-verify-form { max-width: 420px; margin-top: 16px; }

.portal-verify-actions { margin-top: 12px; display: flex; gap: 8px; justify-content: flex-end; }

.portal-verify-resend { max-width: 420px; margin-top: 8px; text-align: right; }

.overdue-widget-upcoming { border-color: var(--warning); }

.overdue-count-warning { background: var(--warning); }

.gs-result-link { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; text-decoration: none; color: var(--text); transition: background 0.15s; }

.gs-result-link:hover { background: var(--bg-2); }

.gs-result-icon { font-size: 1.2rem; color: var(--text-2); width: 24px; text-align: center; }

.duplicate-link-warning { color: var(--warning-text, #92400e); font-weight: 600; }

.admin-badge-inactive { background: #6b728022; color: #6b7280; }

.adm-badge-status { font-size: 0.7rem; vertical-align: middle; margin-left: 8px; }

.pro-reg-subtitle { color: var(--text-2); margin-bottom: 32px; font-size: 1.125rem; }

.pro-reg-name-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.pro-reg-payment-placeholder { color: var(--text-2); margin: 0; padding: 2rem; background: var(--btn-bg); border: 1px dashed var(--border); border-radius: 8px; text-align: center; }

.pro-reg-footer-links { text-align: center; margin-top: 1rem; color: var(--text-2); }

.cf-disabled-input { width: 100%; padding: 10px; background: var(--bg-2); border: 1px solid var(--border-2); border-radius: 8px; color: var(--text-2); cursor: not-allowed; opacity: 0.7; }

.cf-locked-hint { display: block; margin-top: 4px; color: var(--text-2); font-size: 0.75rem; }

.cf-locked-icon { vertical-align: -2px; }

@media (prefers-reduced-motion: reduce) {
.toast, .inline-edit-field, .accordion-body, .cs-action-icon, .btn, .list-card, .show-actions .btn {
        transition: none !important;
        animation: none !important;
    }
}

.pw-strength-bar { height: 6px; background: var(--border); border-radius: 3px; margin-top: 8px; overflow: hidden; }

.pw-strength-fill { height: 100%; width: 0; transition: width 0.2s ease, background 0.2s ease; background: var(--danger); }

.pw-strength-label { display: block; margin-top: 4px; font-size: 0.8rem; color: var(--text-2); }

.pw-match-label { display: block; margin-top: 4px; font-size: 0.8rem; }

.pw-rules { list-style: none; padding: 0; margin: 8px 0 0 0; font-size: 0.8rem; color: var(--text-2); }

.pw-rules li { display: flex; align-items: center; gap: 6px; padding: 2px 0; }

.pw-rules li.pw-rule-ok { color: var(--success); }

.pw-rules li i { font-size: 0.9rem; }

.bulk-email-preview {
    background: var(--surface-2);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.cat-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    margin-right: 6px;
    vertical-align: middle;
    border: 1px solid var(--border);
}

.form-color-input {
    width: 48px;
    padding: 2px;
    height: 36px;
}

.cat-edit-form {
    display: flex;
    gap: 6px;
    align-items: center;
}

.form-input-sm {
    padding: 4px 8px;
    font-size: 13px;
}

.form-grid-3 {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 12px;
    align-items: end;
}

.form-grid-3 .form-actions {
    grid-column: 1 / -1;
    margin-top: 8px;
}

.saved-views-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 20px;
    background: transparent;
    border: none;
    border-radius: 0;
    margin-bottom: 0;
    flex-wrap: wrap;
}

.saved-views-left, .saved-views-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.saved-views-label {
    color: var(--text-2);
    font-size: 13px;
}

.saved-views-select {
    width: auto;
    min-width: 190px;
}

.cs-retention-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin: 12px 0;
    font-size: 14px;
}

.cs-retention-label {
    color: var(--text-2);
    margin-right: 4px;
}

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

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

.mt-8 { margin-top: 8px; }

.mt-16 { margin-top: 16px; }

.mb-16 { margin-bottom: 16px; }

.empty-text {
    color: var(--text-2);
    text-align: center;
    padding: 16px;
    margin: 0;
}

.filter-form {
    display: flex;
    gap: 12px;
    align-items: end;
    flex-wrap: wrap;
}

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

.mob-nav-palette {
    display: none;
}

html {
    transition: background-color 0.3s ease, color 0.3s ease;
}

html[data-theme="auto"] {
    color-scheme: light dark;
}

@media (prefers-color-scheme: light) {
html[data-theme="auto"] {
        --bg: #f8fafc;
        --surface: #ffffff;
        --surface-2: #ffffff;
        --text: #0f172a;
        --text-2: #334155;
        --muted: #64748b;
        --border: rgba(15,23,42,0.10);
        --border-2: rgba(15,23,42,0.14);
        --shadow: 0 10px 30px rgba(2,6,23,0.10);
        --btn-bg: rgba(2,6,23,0.04);
        --btn-bg-hover: rgba(2,6,23,0.07);
        --primary: #2563eb;
        --primary-light: rgba(37,99,235,0.07);
        --bg-2: #f1f5f9;
        --danger: #dc2626;
        --success: #059669;
        --success-hover: #047857;
        --warning: #d97706;
        --notif-icon-invoice: #2563eb;
        --notif-icon-proposal: #7c3aed;
        --notif-icon-contract: #059669;
        --notif-icon-project: #d97706;
        --notif-icon-client: #db2777;
        --notif-icon-lead: #dc2626;
        --notif-icon-milestone: #7c3aed;
        --notif-icon-default: #475569;
        --notif-icon-bg-opacity: 0.12;
    }
}

@media (prefers-color-scheme: dark) {
html[data-theme="auto"] {
        --bg: #0f1724;
        --surface: #111827;
        --surface-2: #0b1320;
        --text: #e5e7eb;
        --text-2: #cbd5e1;
        --muted: #94a3b8;
        --border: rgba(255,255,255,0.06);
        --border-2: rgba(255,255,255,0.08);
        --shadow: 0 10px 30px rgba(0,0,0,0.35);
        --btn-bg: rgba(255,255,255,0.04);
        --btn-bg-hover: rgba(255,255,255,0.06);
        --primary: #2563eb;
        --primary-light: rgba(37,99,235,0.07);
        --bg-2: #1e293b;
        --danger: #ef4444;
        --success: #34d399;
        --success-hover: #2cc08e;
        --warning: #f59e0b;
        --notif-icon-invoice: #3b82f6;
        --notif-icon-proposal: #8b5cf6;
        --notif-icon-contract: #10b981;
        --notif-icon-project: #f59e0b;
        --notif-icon-client: #ec4899;
        --notif-icon-lead: #ef4444;
        --notif-icon-milestone: #8b5cf6;
        --notif-icon-default: #64748b;
        --notif-icon-bg-opacity: 0.15;
    }
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.nav-subnav-bar {
    position: sticky;
    top: 44px;
    z-index: 99;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.theme-switcher-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.theme-option.active {
    color: var(--text);
    font-weight: 600;
    background: var(--btn-bg);
}

@media (min-width: 769px) {
.site-sidebar {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 220px;
        background: var(--surface);
        border-right: 1px solid var(--border);
        z-index: 101;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

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

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

.sidebar-brand {
        padding: 16px 16px 8px;
        flex-shrink: 0;
    }

.sidebar-brand-link {
        display: flex;
        align-items: center;
        gap: 10px;
        text-decoration: none !important;
    }

.sidebar-brand-text {
        font-size: 1.15rem;
        font-weight: 700;
        color: var(--text) !important;
        letter-spacing: 0.2px;
    }

.sidebar-nav {
        flex: 1;
        padding: 4px 8px;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

.sidebar-group {
        margin-top: 12px;
    }

.sidebar-group-title {
        font-size: 0.7rem;
        font-weight: 600;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        padding: 6px 12px 4px;
    }

.sidebar-link {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 12px;
        color: var(--text-2) !important;
        text-decoration: none !important;
        font-size: 0.88rem;
        font-weight: 500;
        border-radius: 8px;
        transition: background 0.12s, color 0.12s;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.sidebar-link:hover {
        background: var(--btn-bg-hover);
        color: var(--text) !important;
        opacity: 1 !important;
    }

.sidebar-link.active {
        background: var(--primary-light);
        color: var(--primary) !important;
        font-weight: 600;
    }

.sidebar-link .bi {
        font-size: 1.05rem;
        width: 20px;
        text-align: center;
        flex-shrink: 0;
    }

.sidebar-link.active .bi {
        color: var(--primary);
    }

.sidebar-footer {
        padding: 8px;
        border-top: 1px solid var(--border);
        flex-shrink: 0;
    }

body.authenticated .site-header {
        margin-left: 220px;
        width: calc(100vw - 220px);
    }

body.authenticated .site-header .brand {
        display: none;
    }

.nav-toggle {
        display: none !important;
    }

.content.has-sidebar {
        margin-left: 220px;
        width: calc(100vw - 220px);
        max-width: calc(100vw - 220px);
    }

body.authenticated .site-header .site-nav {
        flex: 1;
        justify-content: flex-end;
    }

body.authenticated .site-header .site-nav .nav-group-secondary {
        border-left: none;
        padding-left: 0;
        margin-left: 0;
        flex: 1;
        justify-content: flex-end;
    }

body.authenticated .site-header .nav-search-inline {
        min-width: 240px;
        flex: 0 1 360px;
    }

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

body.authenticated .site-header .site-nav .nav-group-primary {
        display: none;
    }

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

.site-footer.has-sidebar {
        margin-left: 220px;
        width: calc(100vw - 220px);
    }

.card {
        padding: 24px;
    }

.content {
        padding: 0;
    }

.content > .card {
        border-radius: 0;
        border: none;
        box-shadow: none;
    }

table {
        table-layout: auto;
    }
}

@media print {
.site-header, .site-footer, .nav-toggle, .nav-subnav-bar, .breadcrumbs, .notification-wrapper, .mobile-unified-bar, .content {
        max-width: 100%;
        padding: 0;
    }

.card {
        box-shadow: none;
        border: 1px solid #ddd;
    }

body {
        background: #fff;
        color: #000;
    }
}

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

:root {

    --r-xs: 6px;
    --r-sm: 8px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-xl: 18px;
    --r-pill: 999px;

    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 20px;
    --s-6: 24px;
    --s-8: 32px;

    --e-1: 0 1px 2px rgba(2, 6, 23, 0.06);
    --e-2: 0 1px 2px rgba(2, 6, 23, 0.06), 0 4px 12px rgba(2, 6, 23, 0.06);
    --e-3: 0 8px 24px rgba(2, 6, 23, 0.10);

    --ring: 0 0 0 3px rgba(37, 99, 235, 0.28);

    --t-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
    --t-med: 180ms cubic-bezier(0.4, 0, 0.2, 1);

    --brand-tint: rgba(37, 99, 235, 0.08);
    --brand-tint-2: rgba(37, 99, 235, 0.12);
}

html[data-theme="light"] {
    --bg: #f6f8fb;
    --surface: #ffffff;
    --surface-2: #f8fafc;
    --border: rgba(15, 23, 42, 0.08);
    --border-2: rgba(15, 23, 42, 0.12);
    --shadow: var(--e-2);
    --brand-tint: rgba(37, 99, 235, 0.07);
    --brand-tint-2: rgba(37, 99, 235, 0.12);
}

html[data-theme="dark"], html:not([data-theme="light"]) {
    --bg: #0b1220;
    --surface: #111827;
    --surface-2: #0e1626;
    --border: rgba(255, 255, 255, 0.07);
    --border-2: rgba(255, 255, 255, 0.10);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.28);
    --brand-tint: rgba(59, 130, 246, 0.12);
    --brand-tint-2: rgba(59, 130, 246, 0.18);
}

body {
    font-feature-settings: "cv11", "ss01";
    letter-spacing: -0.006em;
    line-height: 1.55;
}

h1, h2, h3, h4 {
    letter-spacing: -0.02em;
}

::selection {
    background: var(--brand-tint-2);
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-2) transparent;
}

.btn {
    border-radius: var(--r-md) !important;
    font-weight: 550 !important;
    letter-spacing: -0.01em;
    padding: 9px 15px !important;
    min-height: 40px;
    box-shadow: none !important;
    transition: background var(--t-fast), color var(--t-fast),
                border-color var(--t-fast), transform var(--t-fast),
                box-shadow var(--t-fast) !important;
}

.btn:active {
    transform: translateY(0.5px);
}

.btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active, html[data-theme="light"] .btn-primary {
    background: var(--primary) !important;
    background-image: none !important;
    border: 1px solid transparent !important;
    color: #fff !important;
}

.btn-primary {
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.25) !important;
}

.btn-primary:hover, .btn-primary:focus {
    filter: brightness(1.06);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.30) !important;
}

.btn-ghost {
    background: var(--surface) !important;
    border: 1px solid var(--border-2) !important;
}

.btn-ghost:hover, .btn-ghost:focus {
    background: var(--surface-2) !important;
    border-color: var(--border-2) !important;
}

.btn-sm {
    border-radius: var(--r-sm) !important;
    padding: 6px 11px !important;
    min-height: 34px !important;
}

.btn:focus-visible {
    outline: none !important;
    box-shadow: var(--ring) !important;
}

@media (min-width: 769px) {
.site-sidebar {
        width: 236px;
        background: var(--surface);
        border-right: 1px solid var(--border);
    }

body.authenticated .site-header {
        margin-left: 236px;
        width: calc(100vw - 236px);
        border-bottom: 1px solid var(--border);
        background: color-mix(in srgb, var(--surface) 82%, transparent);
    }

.content.has-sidebar {
        margin-left: 236px;
        width: calc(100vw - 236px);
        max-width: calc(100vw - 236px);
    }

.sidebar-brand {
        padding: 18px 18px 10px;
    }

.sidebar-nav {
        padding: 4px 12px;
    }

.sidebar-group {
        margin-top: 14px;
    }

.sidebar-group-title {
        font-size: 0.66rem;
        letter-spacing: 0.08em;
        padding: 6px 12px 6px;
        opacity: 0.75;
    }

.sidebar-link {
        position: relative;
        padding: 8px 12px;
        border-radius: var(--r-sm);
        font-size: 0.875rem;
        font-weight: 500;
        transition: background var(--t-fast), color var(--t-fast);
    }

.sidebar-link:hover {
        background: var(--surface-2);
    }

.sidebar-link.active {
        background: var(--brand-tint);
        color: var(--primary) !important;
        font-weight: 600;
    }

.sidebar-link.active::before {
        content: "";
        position: absolute;
        left: -4px;
        top: 50%;
        transform: translateY(-50%);
        height: 18px;
        width: 3px;
        border-radius: var(--r-pill);
        background: var(--primary);
    }
}

.cs-page {
    padding: 22px 24px 14px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.cs-page-header h1 {
    font-size: 1.4rem;
    font-weight: 680;
    letter-spacing: -0.02em;
}

.cs-page-header p {
    font-size: 0.86rem;
    color: var(--muted);
}

.cs-page-stats {
    gap: 26px;
    padding-top: 14px;
}

.cs-page-stats .cs-stat-val {
    font-size: 1.05rem;
    font-weight: 700;
}

.cs-page-stats .cs-stat-lbl {
    color: var(--muted);
}

.search-filter-bar {
    padding: 12px 24px;
}

.search-filter-bar input[type="search"], .search-filter-bar input[type="text"], .search-filter-bar select {
    border-radius: var(--r-md);
    padding: 10px 12px 10px 40px;
    background: var(--surface);
    border: 1px solid var(--border-2);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.search-filter-bar select {
    padding-left: 12px;
}

.search-filter-bar input[type="search"]:focus, .search-filter-bar input[type="text"]:focus, .search-filter-bar select:focus {
    border-color: var(--primary);
    box-shadow: var(--ring);
}

.search-filter-bar .btn-filter, .search-filter-bar .clear-filters {
    border-radius: var(--r-md);
    min-height: 42px;
    display: inline-flex;
    align-items: center;
}

.list-toolbar {
    padding: 10px 24px;
    border-bottom: 1px solid var(--border);
}

.sort-btn {
    border-radius: var(--r-pill) !important;
    border: 1px solid var(--border-2) !important;
    padding: 5px 13px !important;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast) !important;
}

.sort-btn:hover {
    background: var(--surface-2);
    border-color: var(--border-2) !important;
}

.sort-btn.sort-active {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
}

.view-toggle {
    border-radius: var(--r-md);
    border: 1px solid var(--border-2);
    background: var(--surface);
    padding: 2px;
    gap: 2px;
}

.view-toggle-btn {
    border-radius: var(--r-sm) !important;
    min-height: 30px !important;
}

.view-toggle-btn + .view-toggle-btn {
    border-left: none;
}

.view-toggle-btn.active {
    background: var(--brand-tint);
    color: var(--primary);
}

.list-card {
    padding: 15px 24px;
    transition: background var(--t-fast);
}

.list-card:hover {
    background: var(--surface-2);
}

.list-card-title {
    font-weight: 600;
    letter-spacing: -0.01em;
}

.list-card-id {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--muted);
    background: var(--surface-2);
    padding: 2px 7px;
    border-radius: var(--r-pill);
    margin-left: 8px;
}

.list-card-meta {
    margin-top: 7px;
    font-size: 0.8rem;
    color: var(--muted);
}

.list-card-meta-item i {
    color: var(--muted);
}

.list-cards.view-card {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
    padding: 16px 24px;
    border-top: none;
}

.list-cards.view-card .list-card {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    border: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 18px;
    box-shadow: var(--e-1);
    transition: box-shadow var(--t-med), border-color var(--t-med), transform var(--t-med);
}

.list-cards.view-card .list-card:hover {
    box-shadow: var(--e-2);
    border-color: var(--border-2);
    transform: translateY(-2px);
    background: var(--surface);
}

.list-cards.view-card .list-card-end {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.list-cards.view-card .list-card-actions {
    opacity: 1;
    justify-content: flex-end;
}

.bulk-toolbar {
    border-radius: var(--r-lg);
    box-shadow: var(--e-3);
    border: 1px solid var(--border-2);
}

.card {
    border-radius: var(--r-lg);
    box-shadow: var(--e-1);
    border: 1px solid var(--border);
}

.empty-state-enhanced .empty-state-illustration, .empty-state-illustration {
    background: var(--brand-tint);
    border-radius: var(--r-xl);
}

.form-input, input[type="text"]:not(.search-filter-bar input), input[type="email"], input[type="password"], input[type="number"], input[type="search"]:not(.search-filter-bar input), input[type="tel"], input[type="url"], input[type="date"], textarea, select:not(.search-filter-bar select) {
    border-radius: var(--r-md);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.form-input:focus, input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="date"]:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--ring);
}

.status-badge {
    border-radius: var(--r-pill);
    font-weight: 600;
    letter-spacing: -0.005em;
}

@media (prefers-reduced-motion: reduce) {
* {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

.cs-page-actions:has(.ctl-toggle-group) {
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.cs-actions-primary {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.ctl-toggle-group {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex: 0 0 auto;
    width: auto;
}

.list-toolbar > .ctl-toggle-group {
    margin-left: auto;
}

.list-toolbar > .flex-wrap-flex1 {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.list-toolbar .bulk-select-label {
    flex: 0 0 auto;
    white-space: nowrap;
}

.ctl-panel-host {
    width: 100%;
}

.ctl-panel-host > .ctl-panel {
    margin-top: 0;
}

.ctl-panel-host > .sort-bar {
    padding: 8px 20px;
}

.ctl-toggle.active {
    background: var(--brand-tint) !important;
    color: var(--primary) !important;
    border-color: rgba(37, 99, 235, 0.35) !important;
}

.ctl-toggle.active i {
    color: var(--primary);
}

@media (min-width: 769px) {
.ctl-panel.ctl-collapsed {
        display: none !important;
    }
}

.gt-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 10000;
    transition: opacity 0.3s ease;
}

.gt-spotlight {
    display: none;
    position: absolute;
    z-index: 10001;
    border-radius: 8px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
    transition: top 0.35s ease, left 0.35s ease, width 0.35s ease, height 0.35s ease;
    pointer-events: none;
}

.gt-tooltip {
    display: none;
    position: absolute;
    z-index: 10002;
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: 14px;
    padding: 24px 28px 20px;
    max-width: 420px;
    width: 90vw;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    animation: gt-fade-in 0.3s ease;
}

@keyframes gt-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.gt-dots {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
}

.gt-dot {
    width: 100%;
    height: 3px;
    border-radius: 2px;
    background: var(--border-2);
    transition: background 0.3s;
}

.gt-dot.done {
    background: var(--primary);
}

.gt-dot.active {
    background: var(--primary);
    opacity: 0.6;
}

.gt-step-icon {
    text-align: center;
    margin-bottom: 12px;
}

.gt-step-icon i {
    font-size: 2.2rem;
    color: var(--primary);
}

.gt-step-count {
    font-size: 0.75rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

.gt-title {
    margin: 0 0 8px;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text);
}

.gt-text {
    margin: 0 0 16px;
    color: var(--text-2);
    font-size: 0.92rem;
    line-height: 1.55;
}

.gt-action-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.88rem;
    color: var(--primary) !important;
    font-weight: 500;
    margin-bottom: 16px;
    text-decoration: none !important;
}

.gt-action-link:hover {
    text-decoration: underline !important;
}

.gt-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gt-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: background 0.15s, color 0.15s;
    font-family: inherit;
}

.gt-btn-ghost {
    background: transparent;
    color: var(--text-2);
}

.gt-btn-ghost:hover {
    background: var(--btn-bg-hover);
    color: var(--text);
}

.gt-btn-primary {
    background: var(--primary);
    color: #fff;
}

.gt-btn-primary:hover {
    filter: brightness(1.1);
}

.gt-skip-all {
    text-align: center;
    margin-top: 12px;
}

.gt-skip-all button {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 0.8rem;
    cursor: pointer;
    text-decoration: underline;
    font-family: inherit;
}

.gt-skip-all button:hover {
    color: var(--text-2);
}

.empty-state-enhanced {
    padding: 60px 24px;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.empty-state-illustration {
    margin: 0 auto 24px;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-light);
    border-radius: 50%;
}

.empty-state-illustration i {
    font-size: 3rem;
    color: var(--primary);
    opacity: 0.85;
}

.empty-state-enhanced h3 {
    margin: 0 0 8px;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text);
}

.empty-state-enhanced p {
    margin: 0 0 8px;
    color: var(--text-2);
    font-size: 0.95rem;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.55;
}

.empty-state-enhanced .empty-state-tips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin: 20px auto 24px;
    max-width: 520px;
}

.empty-state-tip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--bg-2);
    border-radius: 20px;
    font-size: 0.82rem;
    color: var(--text-2);
}

.empty-state-tip i {
    color: var(--primary);
    font-size: 0.9rem;
}

.empty-state-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.empty-state-help {
    margin-top: 16px;
}

.empty-state-help a {
    font-size: 0.85rem;
    color: var(--muted) !important;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.empty-state-help a:hover {
    color: var(--text-2) !important;
}


.fc-custom { font-family: inherit; }

.fc-custom .fc-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }

.fc-custom .fc-title { font-size: 1.3rem; font-weight: 700; margin: 0; }

.fc-custom .fc-nav { display: flex; gap: 6px; }

.fc-custom .fc-nav button { background: var(--surface); border: 1px solid var(--border-2); color: var(--text); padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 0.9rem; }

.fc-custom .fc-nav button:hover { background: var(--bg-2); }

.fc-custom .fc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--border-2); border: 1px solid var(--border-2); border-radius: 8px; overflow: hidden; }

.fc-custom .fc-day-header { padding: 8px; text-align: center; font-weight: 600; font-size: 0.85rem; background: var(--bg-2); color: var(--text-2); }

.fc-custom .fc-day { background: var(--surface); min-height: 100px; padding: 4px; vertical-align: top; }

.fc-custom .fc-day.other-month { opacity: 0.4; }

.fc-custom .fc-day.today { background: var(--primary-light, #3b82f611); }

.fc-custom .fc-day-num { font-size: 0.85rem; font-weight: 600; padding: 2px 6px; }

.fc-custom .fc-event { display: block; padding: 2px 6px; margin: 1px 0; border-radius: 4px; font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; color: #fff; cursor: pointer; }

.fc-custom .fc-event:hover { opacity: 0.85; }

.fc-custom .fc-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }

.fc-custom .fc-legend-item { display: flex; align-items: center; gap: 4px; font-size: 0.8rem; color: var(--text-2); }

.fc-custom .fc-legend-dot { width: 10px; height: 10px; border-radius: 3px; }

.dash-invoices-header {
        display: flex; align-items: center; justify-content: space-between;
        margin-bottom: 12px;
    }

.dash-invoices-header h3 { margin: 0; }

.home-main-section {
    max-width:1200px;
    margin:0 auto;
}

.home-hero-elegant {
    background: var(--surface);
    border-radius: 1.5rem;
    padding: 0.5rem 1.5rem 0.5rem 1.5rem;
    margin-bottom: 0.5rem;
    border: 0px;
}

.hero-content-elegant {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 4rem;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
}

.hero-text-elegant {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.hero-title-elegant {
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    color: var(--text);
    letter-spacing: -0.02em;
}

.hero-tagline-elegant {
    font-size: 1.25rem;
    color: var(--text-2);
    margin: 0;
    line-height: 1.6;
    font-weight: 400;
}

.hero-features-elegant {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.feature-item-elegant {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
    color: var(--text);
}

.feature-check {
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--btn-bg);
    border: 1px solid var(--border);
    border-radius: 0.25rem;
    color: var(--text);
    font-size: 0.875rem;
    font-weight: 600;
    flex-shrink: 0;
}

.hero-pricing-elegant {
    display: flex;
    justify-content: flex-end;
}

.pricing-card-elegant {;
    width: 100%;
    max-width: 320px;
    text-align: center;
}

.pricing-header-elegant {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.pricing-amount-elegant {
    font-size: 3rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
}

.pricing-period-elegant {
    font-size: 1rem;
    color: var(--text-2);
    font-weight: 500;
}

.pricing-plan-elegant {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 1.5rem;
}

.pricing-features-elegant {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pricing-features-elegant li {
    color: var(--text);
    font-size: 0.9375rem;
    padding-left: 1.5rem;
    position: relative;
}

.pricing-features-elegant li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--text-2);
    font-weight: 600;
}

.btn-full-elegant {
    width: 100%;
    padding: 0.875rem 1.5rem;
    font-size: 1.0625rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.pricing-footer-elegant {
    margin-top: 1rem;
    font-size: 0.875rem;
    color: var(--text-2);
}

.pricing-footer-elegant p {
    margin: 0 0 0.5rem 0;
    color: var(--text-2);
}

.pricing-footer-elegant small {
    color: var(--text-2);
    font-size: 0.8125rem;
}

.features-grid-elegant {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin: 0rem 0;
}

.feature-card-elegant {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.feature-icon-elegant {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--btn-bg);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    color: var(--text);
    margin-bottom: 0.5rem;
}

.feature-card-elegant h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    color: var(--text);
}

.feature-card-elegant p {
    font-size: 0.9375rem;
    line-height: 1.6;
    margin: 0;
    color: var(--text-2);
}

.cta-section-elegant {
    background: var(--surface);
    border: 0px;
    border-radius: 1.5rem;
    padding: 0.5rem 1.5rem 0.5rem 1.5rem;
    margin: 0.5rem 0;
    text-align: center;
}

.cta-content-elegant {
    max-width: 600px;
    margin: 0 auto;
}

.cta-section-elegant h2 {
    font-size: 2.25rem;
    font-weight: 700;
    margin: 0 0 0.75rem 0;
    color: var(--text);
    letter-spacing: -0.02em;
}

.cta-content-elegant > p {
    font-size: 1.125rem;
    color: var(--text-2);
    margin: 0 0 2rem 0;
}

.btn-large-elegant {
    padding: 1rem 2.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.cta-links-elegant {
    font-size: 1rem;
    color: var(--text-2);
    margin-bottom: 1.5rem;
}

.cta-links-elegant a {
    color: var(--text);
    text-decoration: underline;
    font-weight: 500;
    margin-left: 0.5rem;
}

.cta-badges-elegant {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.badge-elegant {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: var(--btn-bg);
    border: 1px solid var(--border);
    border-radius: 2rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text);
}

.kanban-board { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 16px; min-height: 60vh; }

.kanban-column { flex: 1; min-width: 280px; max-width: 350px; background: var(--bg-2, #f1f5f9); border-radius: 12px; display: flex; flex-direction: column; }

.kanban-column-header { padding: 14px 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; border-bottom: 2px solid transparent; }

.kanban-column-body { padding: 8px; flex: 1; min-height: 100px; display: flex; flex-direction: column; gap: 8px; }

.kanban-card { background: var(--surface, #fff); border: 1px solid var(--border-2, #e2e8f0); border-radius: 8px; padding: 12px; cursor: grab; transition: box-shadow 0.15s, transform 0.15s; }

.kanban-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }

.kanban-card.dragging { opacity: 0.5; transform: rotate(2deg); }

.kanban-card-title { font-weight: 600; font-size: 0.95rem; margin-bottom: 6px; }

.kanban-card-meta { font-size: 0.8rem; color: var(--text-2); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.kanban-drop-zone { min-height: 40px; border: 2px dashed transparent; border-radius: 8px; transition: border-color 0.2s; }

.kanban-drop-zone.drag-over { border-color: var(--primary, #3b82f6); background: var(--primary-light, #3b82f622); }

.kanban-count { background: var(--surface, #fff); padding: 1px 8px; border-radius: 10px; font-size: 0.8rem; font-weight: 600; }

.btn-google-signin {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #d1d5db);
    border-radius: 8px;
    color: var(--text, #1f2937);
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
}

.btn-google-signin:hover {
    background: var(--surface-2, #f3f4f6);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.btn-google-signin svg {
    flex-shrink: 0;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0;
    color: var(--text-2, #6b7280);
    font-size: 0.85rem;
}

.auth-divider::before, .auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border, #e5e7eb);
}

.pricing-grid-elegant {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin: 2rem 0 3rem;
}

.pricing-card-elegant {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 2rem;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s;
}

.pricing-card-elegant:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.pricing-card-popular {
    border: 2px solid #2563eb;
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.15);
}

.pricing-badge {
    position: absolute;
    top: -12px;
    right: 20px;
    background: #2563eb;
    color: white;
    padding: 0.375rem 0.875rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.025em;
}

.pricing-plan-name {
    margin: 0 0 1rem 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text);
}

.pricing-amount-wrapper {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
}

.pricing-amount {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
}

.pricing-card-popular .pricing-amount {
    color: #2563eb;
}

.pricing-period {
    font-size: 1rem;
    color: var(--text-2);
    font-weight: 500;
}

.pricing-features-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pricing-features-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    color: var(--text);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.feature-checkmark {
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--btn-bg);
    border: 1px solid var(--border);
    border-radius: 0.25rem;
    color: var(--text);
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.btn-pricing {
    width: 100%;
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.pricing-note {
    font-size: 0.875rem;
    color: var(--text-2);
    text-align: center;
    margin-top: 0.5rem;
}

.pricing-faq-section {
    margin-top: 3rem;
    padding: 2rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 1rem;
}

.pricing-faq-section h3 {
    margin: 0 0 1.5rem 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text);
}

.faq-item {
    margin: 0.75rem 0;
    padding: 1rem;
    background: var(--btn-bg);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    cursor: pointer;
}

.faq-item summary {
    color: var(--text);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    user-select: none;
}

.faq-item summary:hover {
    color: var(--primary);
}

.faq-item p {
    color: var(--text-2);
    margin: 0.75rem 0 0 0;
    padding-left: 0.5rem;
    line-height: 1.6;
    font-size: 0.9375rem;
}

.support-hero {
    text-align: center;
    padding: 2.5rem 1.5rem 2rem;
    margin-bottom: 2.5rem;
    background: linear-gradient(135deg, rgba(37,99,235,0.08), rgba(52,211,153,0.06));
    border: 1px solid var(--border);
    border-radius: 1rem;
}

.support-hero-icon {
    width: 64px; height: 64px; margin: 0 auto 1rem;
    display: flex; align-items: center; justify-content: center;
    background: var(--primary); color: #fff; border-radius: 1rem;
    font-size: 1.75rem;
}

.support-hero h1 { margin: 0 0 0.5rem; font-size: 2rem; font-weight: 700; color: var(--text); }

.support-hero-subtitle { color: var(--text-2); font-size: 1.0625rem; margin: 0 0 1.5rem; max-width: 540px; margin-inline: auto; line-height: 1.6; }

.support-hero-actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }

.support-hero-actions .btn { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; }

.support-login-hint { margin: 1rem 0 0; font-size: 0.875rem; color: var(--text-2); display: flex; align-items: center; justify-content: center; gap: 0.375rem; }

.support-login-hint a { color: var(--primary); font-weight: 600; text-decoration: none; }

.support-login-hint a:hover { text-decoration: underline; }

.support-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2.5rem;
}

.support-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 1.75rem;
    display: flex; flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    text-decoration: none; color: inherit;
    position: relative;
    overflow: hidden;
}

.support-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px; border-radius: 1rem 1rem 0 0;
}

.support-card-blue::before { background: #2563eb; }

.support-card-green::before { background: #34d399; }

.support-card-amber::before { background: #f59e0b; }

.support-card-purple::before { background: #8b5cf6; }

.support-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    border-color: var(--border-2);
}

.support-card-icon {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 0.75rem; font-size: 1.25rem; margin-bottom: 1rem;
}

.support-card-blue .support-card-icon { background: rgba(37,99,235,0.12); color: #2563eb; }

.support-card-green .support-card-icon { background: rgba(52,211,153,0.12); color: #34d399; }

.support-card-amber .support-card-icon { background: rgba(245,158,11,0.12); color: #f59e0b; }

.support-card-purple .support-card-icon { background: rgba(139,92,246,0.12); color: #8b5cf6; }

.support-card h3 { margin: 0 0 0.5rem; font-size: 1.125rem; font-weight: 700; color: var(--text); }

.support-card > p { margin: 0 0 1rem; color: var(--text-2); font-size: 0.9375rem; line-height: 1.6; flex-grow: 1; }

.support-card-list {
    list-style: none; padding: 0; margin: 0 0 1rem;
    display: flex; flex-direction: column; gap: 0.5rem;
}

.support-card-list li {
    display: flex; align-items: center; gap: 0.5rem;
    color: var(--text-2); font-size: 0.875rem; line-height: 1.5;
}

.support-card-list li i { color: var(--text-2); font-size: 0.75rem; flex-shrink: 0; }

.support-card-link {
    display: inline-flex; align-items: center; gap: 0.375rem;
    color: var(--primary); font-size: 0.875rem; font-weight: 600;
    text-decoration: none; margin-top: auto;
    transition: gap 0.2s;
}

.support-card:hover .support-card-link, .support-card-link:hover { gap: 0.625rem; }

.support-cta {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.5rem; flex-wrap: wrap;
    padding: 2rem; margin-bottom: 2.5rem;
    background: linear-gradient(135deg, rgba(37,99,235,0.1), rgba(139,92,246,0.08));
    border: 1px solid var(--border); border-radius: 1rem;
}

.support-cta-content { display: flex; align-items: center; gap: 1.25rem; }

.support-cta-icon {
    width: 52px; height: 52px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--primary); color: #fff; border-radius: 0.875rem;
    font-size: 1.375rem;
}

.support-cta h2 { margin: 0 0 0.25rem; font-size: 1.25rem; font-weight: 700; color: var(--text); }

.support-cta p { margin: 0; color: var(--text-2); font-size: 0.9375rem; line-height: 1.5; }

.support-cta-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

.support-cta-actions .btn { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; white-space: nowrap; }

.support-faq-section {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 1rem; padding: 2rem; margin-bottom: 2rem;
}

.support-faq-section h3 { margin: 0 0 1.5rem; font-size: 1.5rem; font-weight: 700; color: var(--text); }

.support-faq-list { display: flex; flex-direction: column; gap: 0.75rem; }

.support-search-wrap {
    position: relative;
    max-width: 520px;
    margin: 1.5rem auto 0;
    width: 100%;
}

.support-search-box {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    padding: 0.625rem 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.support-search-box:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}

.support-search-icon { color: var(--text-2); font-size: 1rem; flex-shrink: 0; }

.support-search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.9375rem;
    color: var(--text);
    min-width: 0;
}

.support-search-input::placeholder { color: var(--text-2); opacity: 0.7; }

.support-search-kbd {
    font-size: 0.6875rem;
    padding: 0.125rem 0.375rem;
    border: 1px solid var(--border);
    border-radius: 0.25rem;
    color: var(--text-2);
    background: var(--btn-bg);
    font-family: inherit;
    line-height: 1.4;
    display: none;
}

.support-search-wrap.has-query .support-search-kbd { display: inline-block; }

.support-search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0; right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    max-height: 360px;
    overflow-y: auto;
    display: none;
    z-index: 100;
}

.support-search-results.open { display: block; }

.support-search-results-empty {
    padding: 1.25rem;
    text-align: center;
    color: var(--text-2);
    font-size: 0.875rem;
}

.support-search-result {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
    border-bottom: 1px solid var(--border);
}

.support-search-result:last-child { border-bottom: none; }

.support-search-result:hover { background: var(--btn-bg); }

.support-search-result-icon {
    width: 32px; height: 32px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(37,99,235,0.1); color: var(--primary);
    border-radius: 0.5rem; font-size: 0.875rem;
    margin-top: 2px;
}

.support-search-result-text { min-width: 0; }

.support-search-result-title {
    font-size: 0.875rem; font-weight: 600; color: var(--text);
    margin: 0 0 0.125rem; line-height: 1.3;
}

.support-search-result-cat {
    font-size: 0.75rem; color: var(--text-2); margin: 0;
}

.portal-wrapper { max-width: 960px; margin: 0 auto; padding: 0 20px; }

.portal-header {
            background: var(--surface);
            border-bottom: 1px solid var(--border);
            position: sticky; top: 0; z-index: 50;
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }

.portal-header-inner {
             margin: 0 auto; padding: 0 32px;
            display: flex; align-items: center; justify-content: space-between;
        }

.portal-brand {
            font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-family: 'Geometric Sans-Serif', sans-serif;
        }

.portal-footer {
            border-top: 1px solid var(--border);
            padding: 24px 0;
            margin-top: 48px;
            text-align: center;
        }

.portal-footer small { color: var(--text-2); font-size: 0.8rem; }

.portal-section { margin-top: 32px; }

.portal-section-title {
            font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
            letter-spacing: 0.08em; color: var(--text-2); margin: 0 0 16px 0;
            padding-bottom: 8px; border-bottom: 1px solid var(--border);
        }

.portal-card {
            background: var(--surface); border: 1px solid var(--border);
            border-radius: 12px; padding: 20px; transition: border-color 0.15s;
        }

.portal-card:hover { border-color: var(--border-2); }

.portal-card + .portal-card { margin-top: 12px; }

.portal-badge {
            display: inline-flex; align-items: center;
            padding: 3px 10px; border-radius: 20px;
            font-size: 0.78rem; font-weight: 600; line-height: 1.4;
            white-space: nowrap;
        }

.portal-table-wrap {
            background: var(--surface); border: 1px solid var(--border);
            border-radius: 12px; overflow: hidden;
        }

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

.portal-table thead th {
            padding: 12px 16px; font-size: 0.75rem; font-weight: 600;
            text-transform: uppercase; letter-spacing: 0.06em;
            color: var(--text-2); text-align: left;
            background: var(--bg); border-bottom: 1px solid var(--border);
        }

.portal-table tbody td {
            padding: 14px 16px; color: var(--text);
            border-bottom: 1px solid var(--border);
            font-size: 0.9rem; vertical-align: middle;
        }

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

.portal-table tbody tr { transition: background 0.1s; }

.portal-table tbody tr:hover { background: var(--btn-bg); }

.portal-btn {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 7px 16px; border-radius: 8px; font-size: 0.85rem;
            font-weight: 500; text-decoration: none; cursor: pointer;
            border: 1px solid var(--border-2); background: var(--surface);
            color: var(--text); transition: all 0.15s; white-space: nowrap;
        }

.portal-btn:hover { background: var(--btn-bg-hover); border-color: var(--text-2); color: var(--text); }

.portal-btn-primary {
            background: #3b82f6; color: #fff; border-color: #3b82f6;
        }

.portal-btn-primary:hover { background: #2563eb; border-color: #2563eb; color: #fff; }

.portal-meta {
            display: inline-flex; align-items: center; gap: 4px;
            font-size: 0.85rem; color: var(--text-2);
        }

.portal-meta i { font-size: 0.82rem; }

.portal-collapse-detail {
            max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease;
            padding: 0 20px 0 36px;
        }

.portal-collapse-open .portal-collapse-detail { max-height: 600px; padding-bottom: 16px; }

.portal-collapse-chevron { transition: transform 0.2s; }

.portal-collapse-open .portal-collapse-chevron { transform: rotate(90deg); }

.portal-settings-popover {
            display: none; position: absolute; right: 0; top: calc(100% + 6px);
            background: var(--surface); border: 1px solid var(--border);
            border-radius: 12px; padding: 16px; min-width: 260px;
            box-shadow: 0 8px 30px rgba(0,0,0,0.12); z-index: 100;
        }

.portal-modal-backdrop {
            display: none; position: fixed; inset: 0;
            background: rgba(0,0,0,0.4); backdrop-filter: blur(4px);
            z-index: 1000; align-items: center; justify-content: center;
        }

.portal-modal {
            background: var(--surface); border: 1px solid var(--border);
            border-radius: 16px; padding: 28px; max-width: 460px; width: 92%;
            box-shadow: 0 20px 60px rgba(0,0,0,0.15);
        }

.portal-alert {
            padding: 12px 16px; border-radius: 10px; font-size: 0.9rem;
            margin-bottom: 16px; font-weight: 500;
        }

.portal-alert-success { background: #10b98112; color: #10b981; border: 1px solid #10b98130; }

.portal-alert-error { background: #ef444412; color: #ef4444; border: 1px solid #ef444430; }

.portal-empty {
            text-align: center; padding: 60px 20px; color: var(--text-2);
        }

.portal-empty i { font-size: 2.5rem; margin-bottom: 12px; display: block; opacity: 0.4; }

.portal-hero {
            display: flex; align-items: flex-start; justify-content: space-between;
            gap: 16px; flex-wrap: wrap; margin-bottom: 28px;
        }

.portal-grid {
            display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 16px;
        }

.portal-project-card {
            display: flex; flex-direction: column;
            background: var(--surface); border: 1px solid var(--border);
            border-radius: 12px; padding: 20px;
            text-decoration: none; color: inherit;
            transition: border-color 0.15s, box-shadow 0.15s;
        }

.portal-project-card:hover {
            border-color: var(--accent, #3b82f6);
            box-shadow: 0 4px 20px rgba(59, 130, 246, 0.08);
        }

.portal-card-stats {
            display: flex; gap: 12px; flex-wrap: wrap;
        }

.portal-stat {
            display: inline-flex; align-items: center; gap: 4px;
            font-size: 0.8rem; color: var(--text-2); font-weight: 500;
        }

.portal-stat i { font-size: 0.82rem; opacity: 0.7; }

.portal-back-link {
            color: var(--text-2); text-decoration: none; font-size: 0.85rem;
            display: inline-flex; align-items: center; gap: 4px;
            margin-bottom: 12px; transition: color 0.15s;
        }

.portal-back-link:hover { color: var(--text); }

.portal-tabs {
            display: flex; gap: 2px; border-bottom: 2px solid var(--border);
            margin-bottom: 24px; overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

.portal-tab {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 10px 16px; border: none; background: none;
            color: var(--text-2); font-size: 0.88rem; font-weight: 500;
            cursor: pointer; white-space: nowrap;
            border-bottom: 2px solid transparent;
            margin-bottom: -2px; transition: all 0.15s;
        }

.portal-tab:hover { color: var(--text); background: var(--btn-bg); border-radius: 8px 8px 0 0; }

.portal-tab-active {
            color: var(--accent, #3b82f6); border-bottom-color: var(--accent, #3b82f6);
        }

.portal-tab-count {
            display: inline-flex; align-items: center; justify-content: center;
            min-width: 20px; height: 20px; padding: 0 6px;
            border-radius: 10px; font-size: 0.75rem; font-weight: 700;
            background: var(--accent, #3b82f6); color: #fff;
        }

.portal-tab-panel { display: none; }

.portal-tab-panel-active { display: block; animation: fadeIn 0.2s ease; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.payment-section-placeholder {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 2rem;
}

.payment-placeholder {
    margin-top: 1rem;
}

.pro-coming-soon {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.pro-coming-soon .hero-section {
    padding: 3rem 2rem 2rem;
}

.pro-coming-soon .hero-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    border-radius: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.25rem;
    color: #fff;
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.25);
}

.pro-coming-soon .hero-title {
    font-size: 2rem;
    font-weight: 800;
    margin: 0 0 0.75rem;
    color: var(--text);
}

.pro-coming-soon .hero-subtitle {
    font-size: 1.125rem;
    color: var(--text-2);
    margin: 0 0 2rem;
    line-height: 1.6;
}

.pro-coming-soon .badge-coming-soon {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #f59e0b, #f97316);
    color: #fff;
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.pro-coming-soon .plan-showcase {
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: 1rem;
    padding: 2rem;
    margin-bottom: 2rem;
    text-align: left;
}

.pro-coming-soon .plan-showcase-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.pro-coming-soon .plan-showcase-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.pro-coming-soon .plan-showcase-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.pro-coming-soon .plan-price-value {
    font-size: 2.25rem;
    font-weight: 800;
    color: #3b82f6;
}

.pro-coming-soon .plan-price-period {
    font-size: 1rem;
    color: var(--text-2);
    font-weight: 500;
}

.pro-coming-soon .plan-features-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.75rem;
}

.pro-coming-soon .plan-features-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    color: var(--text);
}

.pro-coming-soon .plan-features-list li .check-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    background: #10b98120;
    color: #10b981;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
}

.pro-coming-soon .cta-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.pro-coming-soon .btn-starter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #3b82f6;
    color: #fff;
    padding: 14px 32px;
    border-radius: 10px;
    font-size: 1.05rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.pro-coming-soon .btn-starter:hover {
    background: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}

.pro-coming-soon .cta-hint {
    font-size: 0.9rem;
    color: var(--text-2);
    margin: 0;
}

.pro-coming-soon .footer-links {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

.pro-coming-soon .footer-links a {
    font-size: 0.9rem;
    color: var(--text-2);
    text-decoration: none;
}

.pro-coming-soon .footer-links a:hover {
    color: #3b82f6;
}

.ps-summary-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 28px; }

.ps-summary-card { padding: 16px; background: var(--surface-2); border-radius: 10px; border: 1px solid var(--border); text-align: center; transition: transform 0.15s, box-shadow 0.15s; }

.ps-summary-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }

.ps-summary-card .sc-value { font-size: 1.5rem; font-weight: 700; color: var(--text); line-height: 1.2; }

.ps-summary-card .sc-label { font-size: 0.8rem; color: var(--text-2); margin-top: 4px; }

.ps-nav-layout { display: flex; gap: 0; min-height: 400px; }

.ps-rail { display: flex; flex-direction: column; gap: 2px; padding: 8px 6px; background: var(--surface-2); border: 1px solid var(--border); border-right: none; border-radius: 14px 0 0 14px; width: 52px; flex-shrink: 0; }

.ps-rail-btn { position: relative; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--text-2); cursor: pointer; border-radius: 10px; transition: all 0.2s cubic-bezier(.4,0,.2,1); font-size: 1.1rem; }

.ps-rail-btn::before { content: ''; position: absolute; left: -6px; top: 50%; transform: translateY(-50%); width: 3px; height: 0; background: var(--accent, #3b82f6); border-radius: 0 3px 3px 0; transition: height 0.25s cubic-bezier(.4,0,.2,1); }

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

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

.ps-rail-btn.active { color: var(--accent, #3b82f6); background: var(--surface); }

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

.ps-rail-btn .rail-badge { position: absolute; top: 2px; right: 2px; font-size: 0.6rem; min-width: 16px; height: 16px; line-height: 16px; text-align: center; border-radius: 8px; background: var(--accent, #3b82f6); color: #fff; font-weight: 700; }

.ps-rail-btn .rail-badge.zero { background: var(--border); color: var(--text-2); }

.ps-rail-tooltip { display: none; position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-left: 10px; padding: 6px 12px; background: var(--text); color: var(--surface); font-size: 0.78rem; font-weight: 600; border-radius: 6px; white-space: nowrap; z-index: 100; pointer-events: none; }

.ps-rail-tooltip::before { content: ''; position: absolute; right: 100%; top: 50%; transform: translateY(-50%); border: 5px solid transparent; border-right-color: var(--text); }

.ps-rail-btn:hover .ps-rail-tooltip { display: block; }

.ps-content-panel { flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 0 14px 14px 0; overflow: hidden; }

.ps-tab-content { display: none; padding: 24px; }

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

.ps-card-list { display: flex; flex-direction: column; gap: 8px; }

.ps-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; transition: background-color 0.15s, box-shadow 0.15s; }

.ps-card:hover { background: var(--surface); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }

.ps-card-main { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.ps-card-body { flex: 1; min-width: 0; }

.ps-card-title { font-weight: 600; font-size: 0.95rem; color: var(--text); text-decoration: none; display: inline; }

.ps-card-title:hover { color: var(--accent, #3b82f6); }

.ps-card-subtitle { font-size: 0.85rem; color: var(--text-2); margin-top: 2px; }

.ps-card-meta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 6px; }

.ps-card-meta-item { display: inline-flex; align-items: center; gap: 4px; font-size: 0.82rem; color: var(--text-2); }

.ps-card-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }

.ps-empty { padding: 36px 20px; text-align: center; color: var(--text-2); background: var(--surface-2); border: 1px dashed var(--border); border-radius: 10px; }

.ps-empty i { font-size: 2rem; opacity: 0.4; margin-bottom: 8px; display: block; }

.ps-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 20px; }

.ps-info-card { padding: 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; }

.ps-info-card-label { font-size: 0.82rem; color: var(--text-2); margin-bottom: 4px; }

.ps-info-card-value { font-size: 0.95rem; font-weight: 600; color: var(--text); }

.ps-update-form { padding: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 20px; }

.ps-update-form h3 { margin: 0 0 14px; font-size: 1rem; font-weight: 600; color: var(--text); }

.ps-update-item { padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 10px; }

.ps-profit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-top: 14px; }

.ps-profit-card { padding: 14px; background: var(--btn-bg); border-radius: 8px; border: 1px solid var(--border); text-align: center; }

.ps-profit-card .pv { font-size: 1.2rem; font-weight: 700; }

.ps-profit-card .pl { font-size: 0.78rem; color: var(--text-2); margin-top: 3px; }

.ps-feedback-card { padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 12px; }

.ps-feedback-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }

.ps-stars { color: #f59e0b; font-size: 1rem; letter-spacing: 1px; }

.ps-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; flex-wrap: wrap; gap: 10px; }

.ps-section-header h2 { margin: 0; font-size: 1.3rem; font-weight: 600; color: var(--text); }

.pro-register-container {
    max-width: 800px;
    margin: 0 auto;
}

.pro-register-form {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.plan-display-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 2rem;
}

.plan-display-card {
    border: 2px solid #2563eb;
    border-radius: 0.75rem;
    padding: 1.5rem;
    background: var(--btn-bg);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}

.plan-display-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.plan-display-header h3 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text);
}

.plan-display-price {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}

.plan-price-amount {
    font-size: 2rem;
    font-weight: 700;
    color: #2563eb;
}

.plan-price-period {
    font-size: 1rem;
    color: var(--text-2);
    font-weight: 500;
}

.plan-display-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.plan-display-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 1rem;
    color: var(--text);
    line-height: 1.5;
}

.plan-display-features .feature-check {
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.25rem;
    color: var(--text);
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.registration-form-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 2rem;
}

.registration-form-section label {
    display: block;
    margin-bottom: 1rem;
}

.registration-form-section label:last-of-type {
    margin-bottom: 0;
}

.registration-form-section input[type="text"], .registration-form-section input[type="email"], .registration-form-section input[type="password"] {
    width: 100%;
    padding: 0.875rem;
    margin-top: 0.5rem;
    background: var(--btn-bg);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    color: var(--text);
    font-size: 1rem;
}

.form-actions {
    margin-top: 1rem;
}

.btn-large {
    width: 100%;
    padding: 1rem 2rem;
    font-size: 1.125rem;
    font-weight: 600;
}

.form-actions a {
    color: var(--primary);
    text-decoration: underline;
}