/* ============================================================
   CRYSTAL NINJA SELLER PORTAL
   Single shared stylesheet for every authenticated seller page
   ============================================================ */

/* Legacy component compatibility */
/*
 * Crystal Ninja Seller Dashboard
 * Custom CSS - No dependencies
 */

/* Global Reset - Remove body margin/padding */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;
    background: #0f172a !important;
}

/* Reset & Base */
.sd-dashboard,
.sd-dashboard * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* CSS Variables */
.sd-dashboard {
    --sd-sidebar-width: 260px;
    --sd-sidebar-collapsed: 70px;
    --sd-header-height: 70px;
    
    /* Light Mode Colors */
    --sd-bg-primary: #f5f7fa;
    --sd-bg-secondary: #ffffff;
    --sd-bg-card: #ffffff;
    --sd-text-primary: #1a202c;
    --sd-text-secondary: #64748b;
    --sd-text-muted: #94a3b8;
    --sd-border: #e2e8f0;
    --sd-accent: #3b82f6;
    --sd-accent-light: rgba(59, 130, 246, 0.1);
    --sd-success: #10b981;
    --sd-success-light: rgba(16, 185, 129, 0.1);
    --sd-warning: #f59e0b;
    --sd-warning-light: rgba(245, 158, 11, 0.1);
    --sd-purple: #8b5cf6;
    --sd-purple-light: rgba(139, 92, 246, 0.1);
    
    /* Sidebar Colors */
    --sd-sidebar-bg: #1e293b;
    --sd-sidebar-text: #e2e8f0;
    --sd-sidebar-muted: #94a3b8;
    --sd-sidebar-hover: rgba(255, 255, 255, 0.08);
    --sd-sidebar-active: #3b82f6;
}

/* Dark Mode */
.sd-dashboard.sd-dark {
    --sd-bg-primary: #0f172a;
    --sd-bg-secondary: #1e293b;
    --sd-bg-card: #1e293b;
    --sd-text-primary: #f1f5f9;
    --sd-text-secondary: #94a3b8;
    --sd-text-muted: #64748b;
    --sd-border: #334155;
    --sd-sidebar-bg: #020617;
}

/* Dashboard Wrapper */
.sd-dashboard {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--sd-bg-primary) !important;
    color: var(--sd-text-primary);
    min-height: 100vh;
    display: flex !important;
}

/* Sidebar */
.sd-sidebar {
    width: var(--sd-sidebar-width);
    background: var(--sd-sidebar-bg) !important;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

.sd-sidebar.sd-collapsed {
    width: var(--sd-sidebar-collapsed);
}

.sd-sidebar-header {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sd-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none !important;
}

.sd-logo-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: white !important;
}

.sd-logo-text {
    font-size: 18px;
    font-weight: 700;
    color: var(--sd-sidebar-text) !important;
    letter-spacing: -0.02em;
}

.sd-sidebar.sd-collapsed .sd-logo-text {
    display: none;
}

.sd-sidebar-toggle {
    background: none !important;
    border: none !important;
    color: var(--sd-sidebar-muted);
    cursor: pointer;
    font-size: 22px;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.sd-sidebar-toggle:hover {
    color: var(--sd-sidebar-text);
}

/* Sidebar Navigation */
.sd-sidebar-nav {
    flex: 1;
    padding: 16px 12px;
    overflow-y: auto;
    list-style: none !important;
}

.sd-nav-item {
    display: flex !important;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    color: var(--sd-sidebar-muted) !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 500;
    border-radius: 10px;
    margin-bottom: 4px;
    transition: all 0.2s ease;
}

.sd-nav-item:hover {
    background: var(--sd-sidebar-hover);
    color: var(--sd-sidebar-text) !important;
}

.sd-nav-item.sd-active {
    background: var(--sd-sidebar-active) !important;
    color: white !important;
}

.sd-nav-item i {
    font-size: 20px;
    width: 24px;
    text-align: center;
}

.sd-sidebar.sd-collapsed .sd-nav-item span {
    display: none;
}

.sd-sidebar.sd-collapsed .sd-nav-item {
    justify-content: center;
    padding: 12px;
}

/* Main Content */
.sd-main {
    flex: 1;
    margin-left: var(--sd-sidebar-width);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: margin-left 0.3s ease;
    background: var(--sd-bg-primary);
}

.sd-sidebar.sd-collapsed ~ .sd-main {
    margin-left: var(--sd-sidebar-collapsed);
}

/* Header */
.sd-header {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    height: var(--sd-header-height);
    border-bottom: 1px solid var(--sd-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    position: sticky;
    top: 0;
    z-index: 100;
}

.sd-dashboard.sd-dark .sd-header {
    background: rgba(30, 41, 59, 0.95) !important;
}

.sd-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.sd-mobile-toggle {
    display: none;
    background: none !important;
    border: none !important;
    font-size: 24px;
    color: var(--sd-text-secondary);
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.sd-mobile-toggle:hover {
    background: var(--sd-bg-primary) !important;
    color: var(--sd-text-primary);
}

.sd-header-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sd-header-btn {
    width: 42px;
    height: 42px;
    border: none !important;
    background: transparent !important;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sd-text-secondary);
    font-size: 21px;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.sd-header-btn:hover {
    background: var(--sd-bg-primary) !important;
    color: var(--sd-text-primary);
    transform: scale(1.05);
}

.sd-header-btn:active {
    transform: scale(0.95);
}

.sd-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: white !important;
    font-size: 10px;
    font-weight: 700;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
}

.sd-header-divider {
    width: 1px;
    height: 28px;
    background: var(--sd-border);
    margin: 0 8px;
}

.sd-user-menu {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px;
    padding: 6px 12px 6px 6px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sd-user-menu:hover {
    background: var(--sd-bg-primary);
}

.sd-user-avatar {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 10px;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: white !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.sd-user-avatar:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.sd-user-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: cover;
}

/* Profile Dropdown */
.sd-profile-dropdown {
    position: relative;
}

.sd-profile-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.sd-profile-trigger:hover {
    background: var(--sd-bg-primary);
}

.sd-chevron {
    color: var(--sd-text-muted);
    font-size: 18px;
    transition: transform 0.2s ease;
}

.sd-profile-dropdown.sd-open .sd-chevron {
    transform: rotate(180deg);
}

.sd-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 240px;
    background: var(--sd-bg-secondary);
    border: 1px solid var(--sd-border);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
}

.sd-dropdown-menu.sd-show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.sd-dropdown-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
}

.sd-dropdown-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sd-accent) 0%, #8b5cf6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 16px;
    flex-shrink: 0;
}

.sd-dropdown-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.sd-dropdown-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sd-dropdown-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--sd-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sd-dropdown-email {
    font-size: 12px;
    color: var(--sd-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

.sd-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: var(--sd-text-primary);
    text-decoration: none;
    font-size: 14px;
    transition: background 0.15s ease;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

.sd-dropdown-item:hover {
    background: var(--sd-bg-primary);
}

.sd-dropdown-item i {
    font-size: 18px;
    color: var(--sd-text-muted);
}

.sd-dropdown-item.sd-logout {
    color: #ef4444;
}

.sd-dropdown-item.sd-logout i {
    color: #ef4444;
}

.sd-dropdown-item.sd-logout:hover {
    background: rgba(239, 68, 68, 0.1);
}

.sd-user-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    line-height: 1.2;
}

.sd-user-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--sd-text-primary);
    line-height: 1.2;
    white-space: nowrap;
}

.sd-user-role {
    font-size: 12px;
    color: var(--sd-text-muted);
    white-space: nowrap;
}

/* Page Content */
.sd-page-content {
    flex: 1;
    padding: 28px;
    background: var(--sd-bg-primary);
}

.sd-page-header {
    margin-bottom: 28px;
}

.sd-page-title {
    font-size: 26px !important;
    font-weight: 700 !important;
    color: var(--sd-text-primary) !important;
    letter-spacing: -0.02em;
    margin-bottom: 6px !important;
}

.sd-page-subtitle {
    font-size: 15px;
    color: var(--sd-text-secondary);
    margin: 0;
}

/* Stats Grid */
.sd-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 28px;
}

.sd-stat-card {
    background: var(--sd-bg-card) !important;
    border: 1px solid var(--sd-border) !important;
    border-radius: 16px !important;
    padding: 24px !important;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.2s ease;
    box-shadow: none !important;
}

.sd-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08) !important;
}

.sd-stat-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.sd-stat-icon.sd-green {
    background: var(--sd-success-light) !important;
    color: var(--sd-success) !important;
}

.sd-stat-icon.sd-blue {
    background: var(--sd-accent-light) !important;
    color: var(--sd-accent) !important;
}

.sd-stat-icon.sd-yellow {
    background: var(--sd-warning-light) !important;
    color: var(--sd-warning) !important;
}

.sd-stat-icon.sd-purple {
    background: var(--sd-purple-light) !important;
    color: var(--sd-purple) !important;
}

.sd-stat-info h4 {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--sd-text-secondary) !important;
    margin: 0 0 4px 0 !important;
}

.sd-stat-value {
    font-size: 32px !important;
    font-weight: 700 !important;
    color: var(--sd-text-primary) !important;
    letter-spacing: -0.02em;
    line-height: 1;
}

/* Content Grid */
.sd-content-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.sd-content-card {
    background: var(--sd-bg-card) !important;
    border: 1px solid var(--sd-border) !important;
    border-radius: 16px !important;
    overflow: hidden;
    box-shadow: none !important;
}

.sd-card-header {
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--sd-border);
    background: transparent !important;
}

.sd-card-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--sd-text-primary) !important;
    margin: 0 !important;
}

.sd-view-link {
    font-size: 13px;
    font-weight: 500;
    color: var(--sd-accent) !important;
    text-decoration: none !important;
    transition: opacity 0.2s;
}

.sd-view-link:hover {
    opacity: 0.8;
    color: var(--sd-accent) !important;
}

.sd-card-body {
    padding: 0 !important;
}

.sd-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--sd-border);
    transition: background 0.2s;
}

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

.sd-list-item:hover {
    background: var(--sd-bg-primary);
}

.sd-list-item .sd-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--sd-text-primary);
}

.sd-list-item .sd-time {
    font-size: 13px;
    color: var(--sd-text-muted);
}

.sd-empty-state {
    padding: 48px 24px;
    text-align: center;
    color: var(--sd-text-muted);
}

.sd-empty-state i {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.5;
    display: block;
}

.sd-empty-state p {
    font-size: 14px;
    margin: 0;
}

/* Margin utility */
.sd-mb {
    margin-bottom: 24px;
}

/* Tables */
.sd-table-wrapper {
    overflow-x: auto;
}

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

.sd-table th,
.sd-table td {
    padding: 14px 24px;
    text-align: left;
    border-bottom: 1px solid var(--sd-border);
    font-size: 14px;
}

.sd-table th {
    background: var(--sd-bg-primary);
    font-weight: 600;
    color: var(--sd-text-primary);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.sd-table td {
    color: var(--sd-text-primary);
}

.sd-table tbody tr:hover {
    background: var(--sd-bg-primary);
}

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

/* Product List */
.sd-product-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sd-product-list li {
    padding: 4px 0;
    color: var(--sd-text-primary);
    font-size: 14px;
}

.sd-product-list li::before {
    content: "•";
    color: var(--sd-accent);
    margin-right: 8px;
}

/* Card Content */
.sd-card-content {
    padding: 24px;
}

.sd-card-footer {
    padding: 20px 24px;
    border-top: 1px solid var(--sd-border);
}

/* Section Title */
.sd-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--sd-text-primary);
    margin: 16px 0 12px 0;
}

/* Text utilities */
.sd-text-muted {
    color: var(--sd-text-muted);
    font-size: 14px;
    margin: 0 0 8px 0;
}

/* Status Badge */
.sd-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.sd-status-badge.sd-warning {
    background: var(--sd-warning-light);
    color: var(--sd-warning);
}

.sd-status-badge.sd-success {
    background: var(--sd-success-light);
    color: var(--sd-success);
}

.sd-status-badge.sd-danger {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.sd-status-badge.sd-info {
    background: var(--sd-accent-light);
    color: var(--sd-accent);
}

.sd-status-badge.sd-muted {
    background: var(--sd-bg-primary);
    color: var(--sd-text-muted);
}

/* Buttons */
.sd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    text-decoration: none;
}

.sd-btn-primary {
    background: var(--sd-accent);
    color: white;
}

.sd-btn-primary:hover {
    background: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.sd-btn-secondary {
    background: var(--sd-bg-primary);
    color: var(--sd-text-primary);
    border: 1px solid var(--sd-border);
}

.sd-btn-secondary:hover {
    background: var(--sd-border);
}

.sd-btn-sm {
    padding: 8px 16px;
    font-size: 13px;
    border-radius: 8px;
}

/* Amount styling */
.sd-amount {
    font-weight: 600;
    color: var(--sd-text-primary);
}

.sd-amount.sd-accent {
    color: var(--sd-accent);
}

.sd-amount-large {
    font-size: 28px;
    font-weight: 700;
}

.sd-amount-large.sd-success,
.sd-stat-value.sd-success {
    color: var(--sd-success);
}

/* Dark button */
.sd-btn-dark {
    background: #1e293b;
    color: white;
}

.sd-btn-dark:hover {
    background: #0f172a;
}

/* Button group */
.sd-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

/* Info rows and grids */
.sd-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.sd-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.sd-info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sd-info-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--sd-text-muted);
}

.sd-info-value {
    font-size: 15px;
    font-weight: 600;
    color: var(--sd-text-primary);
}

/* Divider */
.sd-divider {
    height: 1px;
    background: var(--sd-border);
    margin: 16px 0;
}

/* Stats row */
.sd-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.sd-stat-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sd-stat-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--sd-text-muted);
}

.sd-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--sd-text-primary);
}

/* Signature */
.sd-signature-section {
    margin-top: 8px;
}

.sd-signature-box {
    max-width: 320px;
    padding: 16px;
    background: var(--sd-bg-primary);
    border: 1px solid var(--sd-border);
    border-radius: 10px;
    margin-top: 8px;
}

.sd-signature-box img {
    max-width: 100%;
    height: auto;
}

/* PDF Viewer */
.sd-pdf-viewer {
    margin-top: 16px;
}

.sd-pdf-viewer iframe {
    width: 100%;
    height: 500px;
    border: 1px solid var(--sd-border);
    border-radius: 10px;
}

/* Empty inline */
.sd-empty-inline {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--sd-text-muted);
    font-size: 14px;
}

.sd-empty-inline i {
    font-size: 20px;
}

/* Evidence list */
.sd-evidence-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sd-evidence-list li {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--sd-border);
}

.sd-evidence-list li:last-child {
    border-bottom: none;
}

.sd-evidence-label {
    font-weight: 600;
    color: var(--sd-text-primary);
}

.sd-evidence-value {
    color: var(--sd-text-secondary);
}

@media (max-width: 768px) {
    .sd-info-grid,
    .sd-stats-row {
        grid-template-columns: 1fr;
    }
}

/* Compliance Notices & Alerts */
.sd-compliance-notice {
    display: flex !important;
    gap: 20px !important;
    padding: 24px !important;
    border-radius: 16px !important;
    margin-bottom: 24px !important;
    position: relative !important;
    overflow: hidden !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    border: 1px solid transparent !important;
}

.sd-compliance-notice:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.15);
}

.sd-compliance-notice-danger {
    background: linear-gradient(135deg, #fff5f5 0%, #fff 100%) !important;
    border-color: #feb2b2 !important;
    border-left: 6px solid #f56565 !important;
}

.sd-dark .sd-compliance-notice-danger {
    background: linear-gradient(135deg, rgba(127, 29, 29, 0.2) 0%, rgba(30, 41, 59, 0.4) 100%) !important;
    border-color: rgba(248, 113, 113, 0.3) !important;
}

.sd-compliance-notice-warning {
    background: linear-gradient(135deg, #fffaf0 0%, #fff 100%) !important;
    border-color: #fbd38d !important;
    border-left: 6px solid #ed8936 !important;
}

.sd-dark .sd-compliance-notice-warning {
    background: linear-gradient(135deg, rgba(123, 52, 30, 0.2) 0%, rgba(30, 41, 59, 0.4) 100%) !important;
    border-color: rgba(251, 191, 36, 0.3) !important;
}

.sd-compliance-icon-wrapper {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    flex-shrink: 0;
}

.sd-compliance-notice-danger .sd-compliance-icon-wrapper {
    background: #fff5f5;
    color: #e53e3e;
    box-shadow: 0 4px 12px rgba(229, 62, 62, 0.15);
}

.sd-dark .sd-compliance-notice-danger .sd-compliance-icon-wrapper {
    background: rgba(229, 62, 62, 0.2);
    color: #f87171;
}

.sd-compliance-notice-warning .sd-compliance-icon-wrapper {
    background: #fffaf0;
    color: #dd6b20;
    box-shadow: 0 4px 12px rgba(221, 107, 32, 0.15);
}

.sd-dark .sd-compliance-notice-warning .sd-compliance-icon-wrapper {
    background: rgba(221, 107, 32, 0.2);
    color: #fbbf24;
}

.sd-compliance-content {
    flex: 1;
}

.sd-compliance-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.sd-compliance-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    margin: 0 !important;
}

.sd-compliance-notice-danger .sd-compliance-title { color: #c53030; }
.sd-dark .sd-compliance-notice-danger .sd-compliance-title { color: #fecaca; }

.sd-compliance-notice-warning .sd-compliance-title { color: #9c4221; }
.sd-dark .sd-compliance-notice-warning .sd-compliance-title { color: #fde68a; }

.sd-compliance-text {
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin-bottom: 16px !important;
    color: var(--sd-text-secondary) !important;
}

.sd-compliance-action-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 20px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    border: none !important;
}

.sd-compliance-notice-danger .sd-compliance-action-btn {
    background: #e53e3e !important;
    color: white !important;
}

.sd-compliance-notice-danger .sd-compliance-action-btn:hover {
    background: #c53030 !important;
    box-shadow: 0 4px 12px rgba(197, 48, 48, 0.3);
}

.sd-compliance-notice-warning .sd-compliance-action-btn {
    background: #dd6b20 !important;
    color: white !important;
}

.sd-compliance-notice-warning .sd-compliance-action-btn:hover {
    background: #c05621 !important;
    box-shadow: 0 4px 12px rgba(192, 86, 33, 0.3);
}

/* Compliance Table Styles */
.sd-compliance-table-container {
    background: var(--sd-bg-card);
    border: 1px solid var(--sd-border);
    border-radius: 12px;
    margin-top: 16px;
    overflow: hidden;
}

.sd-compliance-table {
    width: 100%;
    border-collapse: collapse;
}

.sd-compliance-table th {
    background: var(--sd-bg-primary);
    padding: 12px 16px;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: var(--sd-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--sd-border);
}

.sd-compliance-table td {
    padding: 14px 16px;
    font-size: 14px;
    border-bottom: 1px solid var(--sd-border);
    color: var(--sd-text-primary);
}

.sd-compliance-table tr:last-child td {
    border-bottom: none;
}

.sd-compliance-status-pill {
    display: inline-flex;
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
}

.sd-compliance-status-overdue {
    background: #fff5f5;
    color: #e53e3e;
}

.sd-dark .sd-compliance-status-overdue {
    background: rgba(229, 62, 62, 0.2);
    color: #f87171;
}

/* Checkbox */
.sd-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--sd-accent);
}

/* Alert Info */
.sd-alert-info {
    background: var(--sd-accent-light) !important;
    color: var(--sd-accent) !important;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

/* Forms */
.sd-form-content {
    padding: 24px;
}

.sd-form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.sd-form-group {
    display: flex;
    flex-direction: column;
}

.sd-form-group.sd-full-width {
    grid-column: 1 / -1;
}

.sd-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--sd-text-primary);
    margin-bottom: 8px;
}

.sd-input,
.sd-select {
    padding: 12px 16px;
    border: 1px solid var(--sd-border);
    border-radius: 10px;
    font-size: 14px;
    color: var(--sd-text-primary);
    background: var(--sd-bg-secondary);
    transition: all 0.2s ease;
    width: 100%;
}

.sd-input:focus,
.sd-select:focus {
    outline: none;
    border-color: var(--sd-accent);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

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

.sd-input-file {
    padding: 12px 16px;
    border: 2px dashed var(--sd-border);
    border-radius: 10px;
    font-size: 14px;
    color: var(--sd-text-primary);
    background: var(--sd-bg-primary);
    cursor: pointer;
    width: 100%;
}

.sd-input-file:hover {
    border-color: var(--sd-accent);
}

.sd-hint {
    font-size: 12px;
    color: var(--sd-text-muted);
    margin-top: 6px;
}

/* Period Badge */
.sd-period-badge {
    display: inline-block;
    padding: 6px 12px;
    background: var(--sd-bg-primary);
    border-radius: 6px;
    font-size: 13px;
    color: var(--sd-text-secondary);
}

/* File Link */
.sd-file-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--sd-accent);
    color: white !important;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none !important;
    margin-bottom: 4px;
    transition: all 0.2s ease;
}

.sd-file-link:hover {
    background: #2563eb;
}

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

/* Footer */
.sd-footer {
    padding: 20px 28px;
    text-align: center;
    color: var(--sd-text-muted);
    font-size: 13px;
    border-top: 1px solid var(--sd-border);
    background: var(--sd-bg-secondary);
}

/* Flash Messages */
.sd-alert {
    padding: 14px 18px;
    border-radius: 10px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
}

.sd-alert-success {
    background: var(--sd-success-light) !important;
    color: #065f46 !important;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.sd-alert-error {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #991b1b !important;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.sd-alert i {
    font-size: 20px;
}

/* Sidebar Overlay */
.sd-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

.sd-overlay.sd-active {
    display: block;
}

/* Responsive */
@media (max-width: 1024px) {
    .sd-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .sd-sidebar {
        transform: translateX(-100%);
    }

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

    .sd-main {
        margin-left: 0 !important;
    }

    .sd-mobile-toggle {
        display: block !important;
    }

    .sd-stats-grid {
        grid-template-columns: 1fr;
    }

    .sd-content-grid {
        grid-template-columns: 1fr;
    }

    .sd-page-content {
        padding: 20px;
    }

    .sd-page-title {
        font-size: 22px !important;
    }
}

/* Seller portal shell 1 */
/* ============================================================
       SELLER PORTAL CHROME (sp-*) — sidebar / header / shell  v2
    ============================================================ */
    :root {
        --sp-accent:        #6366f1;
        --sp-accent-dark:   #4f46e5;
        --sp-accent-soft:   rgba(99,102,241,0.10);
        --sp-bg:            #f7f8fb;
        --sp-card:          #ffffff;
        --sp-border:        #e6e8ef;
        --sp-border-soft:   #eef0f5;
        --sp-text:          #0f172a;
        --sp-sub:           #5b6478;
        --sp-muted:         #98a0b3;
        --sp-sidebar-bg:    #ffffff;
        --sp-sidebar-w:     260px;
        --sp-header-h:      72px;
        --sp-radius:        12px;
    }
    .sd-dark {
        --sp-bg:            #0b1020;
        --sp-card:          #131a2e;
        --sp-border:        #1f2945;
        --sp-border-soft:   #1a2238;
        --sp-text:          #f1f5f9;
        --sp-sub:           #94a3b8;
        --sp-muted:         #6b7587;
        --sp-sidebar-bg:    #0f152a;
    }

    html, body { margin: 0; padding: 0; }
    body {
        font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
        background: var(--sp-bg);
        color: var(--sp-text);
        -webkit-font-smoothing: antialiased;
    }
    *, *::before, *::after { box-sizing: border-box; }

    .sp-shell { display: flex; min-height: 100vh; }

    /* ============================== SIDEBAR ============================== */
    .sp-sidebar {
        width: var(--sp-sidebar-w);
        background: var(--sp-sidebar-bg);
        border-right: 1px solid var(--sp-border);
        color: var(--sp-text);
        display: flex; flex-direction: column;
        position: fixed; left: 0; top: 0; bottom: 0;
        z-index: 1000;
        transition: transform 0.3s ease;
        overflow: hidden;
    }
    .sd-dark .sp-sidebar { border-right-color: var(--sp-border); }

    .sp-sidebar-header {
        padding: 18px 18px;
        display: flex; align-items: center; justify-content: space-between;
        border-bottom: 1px solid var(--sp-border-soft);
        flex-shrink: 0;
        height: var(--sp-header-h);
    }
    .sp-brand {
        display: flex; align-items: center; gap: 11px;
        text-decoration: none; color: inherit;
        min-width: 0;
    }
    .sp-brand-logo {
        width: 40px; height: 40px;
        border-radius: 11px;
        background: linear-gradient(135deg, var(--sp-accent), #8b5cf6);
        display: flex; align-items: center; justify-content: center;
        color: #fff; font-size: 20px;
        box-shadow: 0 6px 14px -4px rgba(99,102,241,0.55);
        overflow: hidden;
        flex-shrink: 0;
    }
    .sp-brand-logo img { width: 24px; height: 24px; object-fit: contain; }
    .sp-brand-logo-sm { width: 34px; height: 34px; border-radius: 9px; font-size: 17px; }
    .sp-brand-logo-sm img { width: 20px; height: 20px; }

    .sp-brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
    .sp-brand-name { font-size: 16px; font-weight: 800; letter-spacing: -0.3px; color: var(--sp-text); }
    .sp-brand-name span { color: var(--sp-accent); }
    .sp-brand-tag { font-size: 10.5px; color: var(--sp-muted); margin-top: 2px; letter-spacing: 0.3px; }

    .sp-sidebar-close {
        display: none;
        background: var(--sp-bg);
        border: 1px solid var(--sp-border);
        color: var(--sp-sub);
        width: 34px; height: 34px;
        border-radius: 9px; font-size: 18px; cursor: pointer;
    }

    .sp-nav {
        flex: 1;
        overflow-y: auto;
        padding: 14px 12px 4px;
        display: flex; flex-direction: column;
        gap: 4px;
        scrollbar-width: thin;
    }
    .sp-nav::-webkit-scrollbar { width: 6px; }
    .sp-nav::-webkit-scrollbar-thumb { background: var(--sp-border); border-radius: 999px; }

    .sp-nav-group { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
    .sp-nav-label {
        font-size: 10.5px; font-weight: 700; color: var(--sp-muted);
        text-transform: uppercase; letter-spacing: 1.1px;
        padding: 10px 12px 6px;
    }
    .sp-nav-item {
        display: flex; align-items: center; gap: 12px;
        padding: 10px 12px;
        border-radius: 10px;
        color: var(--sp-sub);
        text-decoration: none;
        font-size: 13.5px; font-weight: 500;
        background: transparent; border: none;
        width: 100%; cursor: pointer;
        font-family: inherit;
        text-align: left;
        position: relative;
        transition: background-color .15s, color .15s;
    }
    .sp-nav-item:hover { background: var(--sp-bg); color: var(--sp-text); }
    .sp-nav-item.active {
        background: var(--sp-accent-soft);
        color: var(--sp-accent);
        font-weight: 600;
    }
    .sp-nav-item.active::before {
        content: ""; position: absolute;
        left: -12px; top: 50%; transform: translateY(-50%);
        width: 3px; height: 22px;
        background: var(--sp-accent);
        border-radius: 0 4px 4px 0;
    }
    .sp-nav-ico {
        font-size: 19px;
        color: var(--sp-muted);
        flex-shrink: 0;
        width: 22px; text-align: center;
        transition: color .15s;
    }
    .sp-nav-item:hover .sp-nav-ico { color: var(--sp-text); }
    .sp-nav-item.active .sp-nav-ico { color: var(--sp-accent); }

    .sp-sidebar-foot {
        padding: 12px;
        border-top: 1px solid var(--sp-border-soft);
        flex-shrink: 0;
    }
    .sp-user-card {
        display: flex; align-items: center; gap: 10px;
        padding: 8px 10px;
        background: var(--sp-bg);
        border: 1px solid var(--sp-border-soft);
        border-radius: 12px;
    }
    .sp-user-avatar {
        width: 36px; height: 36px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--sp-accent), #8b5cf6);
        color: #fff;
        display: flex; align-items: center; justify-content: center;
        font-weight: 700; font-size: 13px;
        flex-shrink: 0;
    }
    .sp-user-info { flex: 1; min-width: 0; }
    .sp-user-name { font-size: 13px; font-weight: 700; color: var(--sp-text); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .sp-user-role { font-size: 11px; color: var(--sp-muted); margin-top: 2px; }
    .sp-logout-form { margin: 0; flex-shrink: 0; }
    .sp-logout-btn {
        background: transparent; border: none;
        width: 30px; height: 30px;
        border-radius: 8px;
        color: var(--sp-muted);
        font-size: 18px; cursor: pointer;
        display: flex; align-items: center; justify-content: center;
        transition: background-color .15s, color .15s;
    }
    .sp-logout-btn:hover { background: rgba(239,68,68,0.1); color: #ef4444; }

    /* ============================== MAIN COLUMN ============================== */
    .sp-main {
        margin-left: var(--sp-sidebar-w);
        flex: 1;
        min-height: 100vh;
        display: flex; flex-direction: column;
        transition: margin-left 0.3s ease;
        min-width: 0;
    }

    /* ============================== HEADER ============================== */
    .sp-header {
        height: var(--sp-header-h);
        background: var(--sp-card);
        border-bottom: 1px solid var(--sp-border);
        padding: 0 24px;
        position: sticky; top: 0;
        z-index: 100;
        display: flex; align-items: center; justify-content: space-between;
        gap: 16px;
    }
    .sp-header-left  { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1; }
    .sp-header-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

    .sp-header-brand {
        display: none;
        align-items: center; gap: 9px;
        font-weight: 800; color: var(--sp-text);
        text-decoration: none;
    }
    .sp-header-brand-name { font-size: 15px; font-weight: 800; }
    .sp-header-brand-name span { color: var(--sp-accent); }

    .sp-page-title { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
    .sp-page-title h1 {
        margin: 0; padding: 0;
        font-size: 18px; font-weight: 700;
        color: var(--sp-text); letter-spacing: -0.3px;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .sp-page-sub { font-size: 12.5px; color: var(--sp-muted); margin-top: 2px; }
    @media (max-width: 640px) { .sp-page-sub { display: none; } .sp-page-title h1 { font-size: 16px; } }

    .sp-icon-btn {
        width: 40px; height: 40px;
        border-radius: 11px;
        background: var(--sp-bg);
        border: 1px solid var(--sp-border-soft);
        color: var(--sp-sub);
        display: flex; align-items: center; justify-content: center;
        cursor: pointer;
        font-size: 19px;
        position: relative;
        transition: background-color .15s, color .15s, border-color .15s;
    }
    .sp-icon-btn:hover { background: var(--sp-card); border-color: var(--sp-border); color: var(--sp-text); }
    .sp-header-toggle { display: none; }
    @media (max-width: 991px) { .sp-header-toggle { display: flex; } }
    @media (max-width: 991px) { .sp-header-brand { display: inline-flex; } .sp-page-title { display: none; } }
    @media (max-width: 480px) { .sp-header-brand-name { display: none; } }

    .sp-impersonate-pill {
        display: inline-flex; align-items: center; gap: 5px;
        background: #ef4444; color: #fff;
        padding: 6px 12px; border-radius: 999px;
        font-size: 12px; font-weight: 700;
        text-decoration: none;
        white-space: nowrap;
    }
    .sp-impersonate-pill:hover { background: #dc2626; color: #fff; }

    .sp-badge-dot {
        position: absolute; top: 5px; right: 5px;
        background: #ef4444; color: #fff;
        min-width: 18px; height: 18px;
        padding: 0 5px;
        border-radius: 999px;
        font-size: 10px; font-weight: 800;
        display: flex; align-items: center; justify-content: center;
        border: 2px solid var(--sp-card);
        line-height: 1;
    }

    /* Profile trigger pill */
    .sp-dd { position: relative; }
    .sp-profile-trigger {
        display: inline-flex; align-items: center; gap: 10px;
        padding: 6px 12px 6px 6px;
        background: var(--sp-bg);
        border: 1px solid var(--sp-border-soft);
        border-radius: 999px;
        cursor: pointer;
        font-family: inherit;
        transition: background-color .15s, border-color .15s;
    }
    .sp-profile-trigger:hover { background: var(--sp-card); border-color: var(--sp-border); }
    .sp-avatar-sm {
        width: 32px; height: 32px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--sp-accent), #8b5cf6);
        color: #fff;
        display: flex; align-items: center; justify-content: center;
        font-weight: 700; font-size: 12.5px;
        overflow: hidden;
        flex-shrink: 0;
    }
    .sp-avatar-sm img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
    .sp-avatar-md {
        width: 44px; height: 44px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--sp-accent), #8b5cf6);
        color: #fff;
        display: flex; align-items: center; justify-content: center;
        font-weight: 700; font-size: 16px;
        flex-shrink: 0;
    }
    .sp-profile-meta { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; max-width: 160px; }
    .sp-profile-name { font-size: 13px; font-weight: 700; color: var(--sp-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .sp-profile-role { font-size: 11px; color: var(--sp-muted); }
    .sp-profile-chev { font-size: 18px; color: var(--sp-muted); }
    @media (max-width: 640px) { .sp-profile-meta, .sp-profile-chev { display: none; } .sp-profile-trigger { padding: 4px; } }

    .sp-dd-menu {
        display: none;
        position: absolute; right: 0; top: calc(100% + 8px);
        min-width: 260px;
        background: var(--sp-card);
        border: 1px solid var(--sp-border);
        border-radius: 14px;
        box-shadow: 0 18px 40px -10px rgba(15, 23, 42, 0.15), 0 4px 10px -4px rgba(15, 23, 42, 0.08);
        padding: 8px;
        z-index: 200;
    }
    .sp-dd.open .sp-dd-menu { display: block; }
    .sp-dd-head { padding: 12px 12px 10px; border-bottom: 1px solid var(--sp-border-soft); margin-bottom: 6px; }
    .sp-dd-head-flex { display: flex; align-items: center; justify-content: space-between; }
    .sp-dd-head-row { display: flex; align-items: center; gap: 12px; }
    .sp-dd-title { font-size: 13.5px; font-weight: 700; color: var(--sp-text); }
    .sp-dd-sub   { font-size: 11.5px; color: var(--sp-muted); margin-top: 2px; word-break: break-word; }
    .sp-dd-count {
        font-size: 11px; font-weight: 700;
        background: var(--sp-accent-soft); color: var(--sp-accent);
        padding: 3px 9px; border-radius: 999px;
    }
    .sp-dd-item {
        display: flex; align-items: center; gap: 11px;
        padding: 10px 12px;
        border-radius: 9px;
        color: var(--sp-text);
        text-decoration: none;
        font-size: 13px; font-weight: 500;
        background: transparent; border: none; width: 100%;
        cursor: pointer;
        font-family: inherit;
        text-align: left;
        transition: background-color .15s;
    }
    .sp-dd-item:hover { background: var(--sp-bg); }
    .sp-dd-item i { font-size: 18px; color: var(--sp-sub); }
    .sp-dd-item.danger { color: #ef4444; }
    .sp-dd-item.danger:hover { background: rgba(239,68,68,0.08); }
    .sp-dd-item.danger i { color: #ef4444; }
    .sp-dd-sep { height: 1px; background: var(--sp-border-soft); margin: 6px 0; }

    /* Notifications panel */
    .sp-dd-menu.wide { min-width: 360px; max-width: calc(100vw - 24px); padding: 8px; }
    .sp-notif-empty { padding: 32px 14px; text-align: center; color: var(--sp-muted); font-size: 13px; }
    .sp-notif-empty i { font-size: 32px; display: block; margin-bottom: 8px; color: var(--sp-border); }
    .sp-notif-list { max-height: 380px; overflow-y: auto; }
    .sp-notif-item {
        display: flex; gap: 11px; align-items: flex-start;
        padding: 10px 12px;
        border-radius: 10px;
        text-decoration: none; color: inherit;
    }
    .sp-notif-item:hover { background: var(--sp-bg); }
    .sp-notif-icon {
        width: 36px; height: 36px;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0; font-size: 17px;
    }
    .sp-notif-body { flex: 1; min-width: 0; }
    .sp-notif-title { font-size: 13px; font-weight: 700; color: var(--sp-text); line-height: 1.35; margin-bottom: 2px; }
    .sp-notif-text  { font-size: 12px; color: var(--sp-sub); line-height: 1.4; }
    .sp-notif-time  { font-size: 11px; color: var(--sp-muted); margin-top: 4px; display: block; }

    /* ============================== PAGE CONTENT ============================== */
    .sp-content {
        flex: 1;
        padding: 24px;
        background: var(--sp-bg);
    }
    @media (max-width: 640px) { .sp-content { padding: 16px 14px; } }

    /* ============================== FOOTER ============================== */
    .sp-footer {
        background: var(--sp-card);
        border-top: 1px solid var(--sp-border);
        padding: 14px 22px;
        color: var(--sp-sub);
        font-size: 12px;
        text-align: center;
    }
    .sp-footer a { color: var(--sp-accent); text-decoration: none; font-weight: 700; }
    .sp-footer a:hover { text-decoration: underline; }

    /* ============================== OVERLAY (mobile) ============================== */
    .sp-overlay {
        display: none;
        position: fixed; inset: 0;
        background: rgba(15, 23, 42, 0.55);
        z-index: 999;
        backdrop-filter: blur(2px);
    }
    .sp-overlay.open { display: block; }

    /* ============================== RESPONSIVE ============================== */
    @media (max-width: 991px) {
        .sp-sidebar { transform: translateX(-100%); box-shadow: 4px 0 28px rgba(15,23,42,0.18); }
        .sp-sidebar.open { transform: translateX(0); }
        .sp-sidebar-close { display: flex; align-items: center; justify-content: center; }
        .sp-main { margin-left: 0; }
        .sp-header { padding: 0 16px; }
    }

    /* Compliance banner kept compatible with layout's existing notice element */
    .sd-compliance-notice {
        display: flex; gap: 14px;
        padding: 14px 18px;
        border-radius: 12px;
        margin-bottom: 16px;
        align-items: center;
    }
    .sd-compliance-notice-danger { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
    .sd-compliance-notice-warning { background: #fef3c7; border: 1px solid #fcd34d; color: #78350f; }
    .sd-compliance-icon-wrapper { font-size: 24px; flex-shrink: 0; }
    .sd-compliance-title { margin: 0 0 2px; font-size: 14px; font-weight: 800; }
    .sd-compliance-text  { margin: 0; font-size: 13px; line-height: 1.5; }
    .sd-compliance-action-btn {
        background: #ef4444; color: #fff;
        padding: 8px 14px; border-radius: 8px;
        font-size: 12px; font-weight: 700;
        text-decoration: none; white-space: nowrap;
        margin-left: auto;
    }
    .sd-compliance-notice-warning .sd-compliance-action-btn { background: #f59e0b; }

    /* ============================== GUIDED TOOLTIPS ============================== */
    .sp-tooltip {
        position: fixed;
        z-index: 10000;
        width: max-content;
        max-width: min(300px, calc(100vw - 24px));
        padding: 9px 11px;
        border: 1px solid rgba(255,255,255,.1);
        border-radius: 9px;
        color: #f8fafc;
        background: #111827;
        box-shadow: 0 12px 28px rgba(15,23,42,.24);
        font-size: 11px;
        font-weight: 600;
        line-height: 1.45;
        text-align: left;
        pointer-events: none;
        opacity: 0;
        transform: translateY(3px) scale(.98);
        transition: opacity .14s ease, transform .14s ease;
    }
    .sp-tooltip.visible { opacity: 1; transform: translateY(0) scale(1); }
    .sp-tooltip::after {
        content: "";
        position: absolute;
        width: 8px;
        height: 8px;
        background: #111827;
        transform: rotate(45deg);
    }
    .sp-tooltip[data-placement="top"]::after {
        left: var(--sp-tip-arrow, 50%);
        bottom: -4px;
        margin-left: -4px;
    }
    .sp-tooltip[data-placement="bottom"]::after {
        left: var(--sp-tip-arrow, 50%);
        top: -4px;
        margin-left: -4px;
    }
    .sp-tooltip[data-placement="left"]::after {
        top: var(--sp-tip-arrow, 50%);
        right: -4px;
        margin-top: -4px;
    }
    .sp-tooltip[data-placement="right"]::after {
        top: var(--sp-tip-arrow, 50%);
        left: -4px;
        margin-top: -4px;
    }
    .sd-dark .sp-tooltip {
        border-color: #334155;
        color: #0f172a;
        background: #f8fafc;
        box-shadow: 0 14px 32px rgba(0,0,0,.4);
    }
    .sd-dark .sp-tooltip::after { background: #f8fafc; }
    @media (prefers-reduced-motion: reduce) {
        .sp-tooltip { transition: none; }
    }

    /* ============================================================
       SELLER PORTAL VISUAL REFRESH — compact violet admin system
    ============================================================ */
    :root {
        --sp-accent: #7956e8;
        --sp-accent-dark: #6541d8;
        --sp-accent-soft: #f0ebff;
        --sp-bg: #f6f7fb;
        --sp-card: #ffffff;
        --sp-border: #e9ebf2;
        --sp-border-soft: #f0f1f6;
        --sp-text: #26283a;
        --sp-sub: #656b7c;
        --sp-muted: #a1a5b1;
        --sp-sidebar-bg: #ffffff;
        --sp-sidebar-w: 218px;
        --sp-header-h: 64px;
    }
    .sd-dark {
        --sp-bg: #111322;
        --sp-card: #191c2d;
        --sp-border: #2a2e43;
        --sp-border-soft: #24283b;
        --sp-text: #f5f3ff;
        --sp-sub: #b1b4c2;
        --sp-muted: #7f8498;
        --sp-sidebar-bg: #171a2a;
        --sp-accent-soft: rgba(121,86,232,.17);
    }
    body { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif; }
    .sp-sidebar { box-shadow: 5px 0 18px rgba(40,43,64,.025); }
    .sp-sidebar-header {
        height: var(--sp-header-h);
        padding: 0 17px;
        border: 0;
        color: #fff;
        background: linear-gradient(135deg, #7659ed 0%, #9c55e8 100%);
    }
    .sp-brand { gap: 10px; }
    .sp-brand-logo {
        width: 34px; height: 34px; border-radius: 50%;
        background: rgba(255,255,255,.96);
        box-shadow: 0 4px 12px rgba(48,25,117,.2);
    }
    .sp-brand-logo img { width: 21px; height: 21px; }
    .sp-brand-name, .sp-brand-name span { color: #fff; font-size: 15px; letter-spacing: -.35px; }
    .sp-brand-tag { color: rgba(255,255,255,.72); font-size: 9px; letter-spacing: .7px; text-transform: uppercase; }
    .sp-sidebar-close { color: #fff; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.15); }
    .sp-nav { padding: 16px 0 8px; gap: 0; }
    .sp-nav-group { gap: 1px; margin-bottom: 10px; }
    .sp-nav-label { padding: 11px 20px 7px; font-size: 8.5px; letter-spacing: 1.25px; font-weight: 700; }
    .sp-nav-item {
        min-height: 39px;
        padding: 9px 18px 9px 20px;
        gap: 10px;
        border-radius: 0;
        border-left: 3px solid transparent;
        font-size: 11.5px;
        font-weight: 500;
    }
    .sp-nav-item:hover { background: #f8f6ff; color: var(--sp-accent-dark); }
    .sd-dark .sp-nav-item:hover { background: rgba(121,86,232,.08); }
    .sp-nav-item.active {
        border-left-color: var(--sp-accent);
        background: linear-gradient(90deg, #eee9ff 0%, #f8f6ff 100%);
        color: var(--sp-accent-dark);
        font-weight: 600;
    }
    .sd-dark .sp-nav-item.active { background: linear-gradient(90deg, rgba(121,86,232,.2), rgba(121,86,232,.05)); }
    .sp-nav-item.active::before { display: none; }
    .sp-nav-ico { width: 18px; font-size: 16px; }
    .sp-sidebar-foot { padding: 10px; }
    .sp-user-card { padding: 8px; border-radius: 7px; background: var(--sp-bg); }
    .sp-user-avatar { width: 31px; height: 31px; font-size: 11px; background: linear-gradient(135deg, #7659ed, #cc51c8); }
    .sp-user-name { font-size: 10.5px; }
    .sp-user-role { font-size: 9px; }
    .sp-logout-btn { width: 27px; height: 27px; font-size: 15px; }

    .sp-header {
        display: block;
        height: auto;
        padding: 0;
        background: var(--sp-card);
        border-bottom: 0;
    }
    .sp-header-top {
        min-height: var(--sp-header-h);
        padding: 0 24px;
        display: flex; align-items: center; justify-content: space-between;
        gap: 16px;
        border-bottom: 1px solid var(--sp-border-soft);
    }
    .sp-header-left { flex: 1; }
    .sp-search {
        width: min(320px, 34vw);
        height: 34px;
        display: flex; align-items: center; gap: 8px;
        padding: 0 11px;
        border: 1px solid var(--sp-border-soft);
        border-radius: 4px;
        background: var(--sp-bg);
        color: var(--sp-muted);
        position: relative;
    }
    .sp-search > i { font-size: 15px; }
    .sp-search input {
        width: 100%; border: 0; outline: 0; background: transparent;
        color: var(--sp-text); font: inherit; font-size: 10.5px;
    }
    .sp-search input::placeholder { color: var(--sp-muted); }
    .sp-search kbd { border: 1px solid var(--sp-border); border-radius: 3px; padding: 1px 5px; font: 500 8px/1.4 inherit; color: var(--sp-muted); background: var(--sp-card); }
    .sp-search-results {
        display: none; position: absolute; left: 0; right: 0; top: calc(100% + 7px);
        padding: 6px; border: 1px solid var(--sp-border); border-radius: 7px;
        background: var(--sp-card); box-shadow: 0 14px 30px rgba(40,43,64,.13); z-index: 250;
    }
    .sp-search:focus-within .sp-search-results.has-results { display: block; }
    .sp-search-result { display: none; padding: 8px 9px; color: var(--sp-text); font-size: 10.5px; text-decoration: none; border-radius: 5px; }
    .sp-search-result.visible { display: flex; align-items: center; gap: 8px; }
    .sp-search-result:hover, .sp-search-result.selected { background: var(--sp-accent-soft); color: var(--sp-accent-dark); }
    .sp-pagebar {
        min-height: 45px;
        padding: 0 24px;
        display: flex; align-items: center; justify-content: space-between; gap: 16px;
        background: linear-gradient(90deg, rgba(121,86,232,.105), rgba(223,82,199,.055));
        border-bottom: 1px solid rgba(121,86,232,.08);
    }
    .sp-page-title { display: flex; }
    .sp-page-title h1 { font-size: 12px; font-weight: 600; color: var(--sp-accent-dark); letter-spacing: 0; }
    .sp-page-sub { display: none; }
    .sp-breadcrumbs { display: flex; align-items: center; gap: 6px; color: var(--sp-muted); font-size: 8.5px; }
    .sp-breadcrumbs a { color: var(--sp-accent); text-decoration: none; }
    .sp-icon-btn { width: 33px; height: 33px; border: 0; border-radius: 5px; background: transparent; font-size: 16px; }
    .sp-icon-btn:hover { background: var(--sp-accent-soft); color: var(--sp-accent); }
    .sp-profile-trigger { padding: 4px 4px 4px 7px; border: 0; border-radius: 5px; background: transparent; }
    .sp-profile-trigger:hover { background: var(--sp-bg); }
    .sp-avatar-sm { width: 29px; height: 29px; font-size: 10px; background: linear-gradient(135deg, #7659ed, #d052c4); }
    .sp-profile-name { font-size: 10.5px; }
    .sp-profile-role { font-size: 8.5px; }
    .sp-profile-chev { font-size: 14px; }
    .sp-badge-dot { top: 2px; right: 1px; min-width: 15px; height: 15px; font-size: 8px; }
    .sp-content { padding: 22px 24px 30px; }
    .sp-footer { padding: 12px 20px; font-size: 9.5px; }

    @media (max-width: 991px) {
        .sp-header-top { padding: 0 14px; }
        .sp-pagebar { padding: 0 16px; }
        .sp-search { width: min(330px, 48vw); }
    }
    @media (max-width: 640px) {
        .sp-search { display: none; }
        .sp-pagebar { min-height: 42px; padding: 0 14px; }
        .sp-page-title { display: flex; }
        .sp-page-title h1 { font-size: 11px; }
        .sp-breadcrumbs { display: none; }
        .sp-content { padding: 14px 12px 24px; }
    }

    /* ============================================================
       CRYSTAL NINJA IP LICENSING PORTAL — trusted legal workspace
    ============================================================ */
    :root {
        --sp-accent: #5b5bd6;
        --sp-accent-dark: #4545b8;
        --sp-accent-soft: #eeeeff;
        --sp-bg: #f4f6f9;
        --sp-card: #ffffff;
        --sp-border: #dfe4ec;
        --sp-border-soft: #edf0f4;
        --sp-text: #172033;
        --sp-sub: #566176;
        --sp-muted: #8791a5;
        --sp-sidebar-bg: #182238;
        --sp-sidebar-w: 252px;
        --sp-header-h: 72px;
    }
    .sd-dark {
        --sp-bg: #0f1727;
        --sp-card: #172136;
        --sp-border: #2a3852;
        --sp-border-soft: #223049;
        --sp-text: #f5f7fb;
        --sp-sub: #b9c2d2;
        --sp-muted: #8390a7;
        --sp-sidebar-bg: #111a2c;
        --sp-accent-soft: rgba(111,111,231,.16);
    }
    body { font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 14px; }
    .sp-sidebar { border-right:0; box-shadow:8px 0 30px rgba(19,29,49,.08); }
    .sp-sidebar-header { height:var(--sp-header-h); padding:0 20px; background:#141d31; border-bottom:1px solid rgba(255,255,255,.07); }
    .sp-brand-logo { width:38px; height:38px; border-radius:10px; background:#fff; box-shadow:none; }
    .sp-brand-logo img { width:24px; height:24px; }
    .sp-brand { align-items:flex-start; }
    .sp-brand-text { gap:3px; line-height:1; }
    .sp-brand-portal { color:#9ba9c2; font-size:10px; font-weight:700; letter-spacing:1.35px; text-transform:uppercase; }
    .sp-brand-name,.sp-brand-name span { color:#fff; font-size:17px; font-weight:800; letter-spacing:-.35px; }
    .sp-brand-tag { color:#95a3bd; font-size:10px; letter-spacing:.65px; text-transform:uppercase; }
    .sp-nav { padding:18px 12px 10px; }
    .sp-nav-group { gap:4px; margin-bottom:15px; }
    .sp-nav-label { padding:9px 10px 6px; color:#7f8da8; font-size:10px; letter-spacing:1.15px; }
    .sp-nav-item { min-height:44px; padding:11px 12px; gap:12px; border:0; border-radius:8px; color:#b8c3d8; font-size:13px; font-weight:500; }
    .sp-nav-item:hover { background:rgba(255,255,255,.055); color:#fff; }
    .sd-dark .sp-nav-item:hover { background:rgba(255,255,255,.055); }
    .sp-nav-item.active,.sd-dark .sp-nav-item.active { color:#fff; background:linear-gradient(135deg,rgba(99,102,241,.3),rgba(79,70,229,.2)); box-shadow:inset 3px 0 0 #7dd3c7; font-weight:700; }
    .sp-nav-ico,.sp-nav-item:hover .sp-nav-ico,.sp-nav-item.active .sp-nav-ico {
        width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center;
        flex-shrink:0; border:1px solid rgba(255,255,255,.07); border-radius:8px;
        color:inherit; background:rgba(255,255,255,.045); font-size:17px;
        box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
    }
    .sp-nav-item.active .sp-nav-ico { border-color:rgba(125,211,199,.24); background:rgba(125,211,199,.12); color:#9de2d8; }
    .sp-sidebar-foot { padding:12px; border-color:rgba(255,255,255,.07); }
    .sp-user-card { padding:10px; border:1px solid rgba(255,255,255,.07); border-radius:9px; background:rgba(255,255,255,.04); }
    .sp-user-avatar { width:36px; height:36px; font-size:13px; background:#5b5bd6; }
    .sp-user-name { color:#fff; font-size:12px; }.sp-user-role { color:#8f9db6; font-size:10px; }.sp-logout-btn { width:30px; height:30px; color:#91a0bb; font-size:18px; }
    .sp-header-top { min-height:var(--sp-header-h); padding:0 28px; border-color:var(--sp-border-soft); }
    .sp-search { width:min(390px,38vw); height:40px; padding:0 13px; border-color:var(--sp-border); border-radius:8px; background:var(--sp-bg); }
    .sp-search > i { font-size:18px; }.sp-search input { font-size:12px; }.sp-search kbd { padding:2px 6px; font-size:10px; border-radius:4px; }
    .sp-search-results { padding:7px; border-radius:9px; }.sp-search-result { padding:10px; border-radius:7px; font-size:12px; }
    .sp-pagebar { min-height:68px; padding:0 28px; background:var(--sp-card); border-bottom:1px solid var(--sp-border); }
    .sp-page-title h1 { color:var(--sp-text); font-size:20px; font-weight:800; letter-spacing:-.35px; }
    .sp-breadcrumbs { font-size:11px; }.sp-breadcrumbs a { color:var(--sp-muted); }.sp-breadcrumbs span { color:var(--sp-accent); font-weight:700; }
    .sp-icon-btn { width:38px; height:38px; border:1px solid var(--sp-border-soft); border-radius:9px; background:var(--sp-card); font-size:18px; box-shadow:0 2px 7px rgba(23,32,51,.035); }.sp-profile-trigger { padding:5px 7px; border-radius:8px; }.sp-avatar-sm { width:34px; height:34px; font-size:12px; background:linear-gradient(145deg,#6868df,#4545b8); box-shadow:0 4px 10px rgba(69,69,184,.22); }
    .sp-profile-name { font-size:12px; }.sp-profile-role { font-size:10px; }.sp-profile-chev { font-size:16px; }.sp-badge-dot { min-width:17px; height:17px; font-size:9px; }
    .sp-header-brand-copy { display:flex; flex-direction:column; gap:2px; line-height:1; }
    .sp-header-portal { color:var(--sp-muted); font-size:8px; font-weight:800; letter-spacing:1px; text-transform:uppercase; }
    .sp-header-brand-name { color:var(--sp-text); font-size:13px; font-weight:800; letter-spacing:-.25px; }
    .sp-content { padding:28px; }.sp-footer { padding:14px 24px; font-size:11px; }
    @media(max-width:991px){.sp-header-top{padding:0 18px}.sp-pagebar{padding:0 20px}.sp-content{padding:20px}.sp-search{width:min(340px,46vw)}}
    @media(max-width:640px){.sp-pagebar{min-height:58px;padding:0 15px}.sp-page-title h1{font-size:18px}.sp-content{padding:15px 12px 24px}}

/* Sales reporting workspace */
/* Sales Reports — aligned with the Seller Dashboard design system */
.sr-page {
    --sr-navy: #17233b;
    --sr-indigo: #5b5bd6;
    --sr-indigo-soft: #f1f1ff;
    --sr-teal: #0f9488;
    --sr-teal-soft: #eaf8f6;
    --sr-amber: #d88925;
    --sr-amber-soft: #fff7e9;
    --sr-red: #c84962;
    --sr-red-soft: #fff0f3;
    --sr-copy: #647089;
    --sr-muted: #94a0b5;
    --sr-line: #e1e7f0;
    --sr-bg: #f6f8fc;
    --sr-card: #ffffff;
    color: var(--sr-navy);
    font-family: inherit;
}

.sr-page *,
.sr-page *::before,
.sr-page *::after {
    box-sizing: border-box;
}

.sr-page svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.sr-kicker {
    display: block;
    margin-bottom: 4px;
    color: var(--sr-indigo);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.2;
    text-transform: uppercase;
}

/* Reporting status matches the dashboard priority banner. */
.sr-status {
    position: relative;
    display: grid;
    grid-template-columns: 43px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    padding: 16px 18px;
    overflow: hidden;
    border: 1px solid #d9e1ee;
    border-left: 4px solid var(--sr-indigo);
    border-radius: 11px;
    background: linear-gradient(100deg, #f9faff 0%, #ffffff 72%);
    box-shadow: 0 4px 14px rgba(23, 32, 51, .035);
}

.sr-status--open {
    border-left-color: var(--sr-teal);
    background: linear-gradient(100deg, #f2fbfa 0%, #ffffff 72%);
}

.sr-status--overdue {
    border-left-color: var(--sr-red);
    background: linear-gradient(100deg, #fff7f8 0%, #ffffff 72%);
}

.sr-status__mark {
    display: grid;
    width: 43px;
    height: 43px;
    place-items: center;
    border-radius: 11px;
    color: #fff;
    background: linear-gradient(145deg, #7272e9, #5050c7);
    box-shadow: 0 8px 18px rgba(91, 91, 214, .22), inset 0 1px 0 rgba(255, 255, 255, .3);
}

.sr-status--open .sr-status__mark {
    background: linear-gradient(145deg, #1aada0, #0b8177);
    box-shadow: 0 8px 18px rgba(15, 148, 136, .22), inset 0 1px 0 rgba(255, 255, 255, .3);
}

.sr-status--overdue .sr-status__mark {
    background: linear-gradient(145deg, #dc657b, #b73b53);
    box-shadow: 0 8px 18px rgba(200, 73, 98, .22), inset 0 1px 0 rgba(255, 255, 255, .3);
}

.sr-status__mark svg {
    width: 23px;
    height: 23px;
}

.sr-status__content h2 {
    margin: 0 0 3px;
    color: var(--sr-navy);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.35;
}

.sr-status__content p {
    margin: 0;
    color: var(--sr-copy);
    font-size: 11px;
    line-height: 1.55;
}

.sr-status__facts {
    display: flex;
    align-items: stretch;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--sr-line);
    border-radius: 9px;
    background: rgba(255, 255, 255, .84);
}

.sr-status__facts div {
    min-width: 112px;
    padding: 9px 12px;
    border-left: 1px solid var(--sr-line);
}

.sr-status__facts div:first-child {
    border-left: 0;
}

.sr-status__facts dt {
    margin-bottom: 2px;
    color: var(--sr-muted);
    font-size: 9px;
    line-height: 1.3;
}

.sr-status__facts dd {
    margin: 0;
    color: var(--sr-navy);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

/* Dashboard metric cards. */
.sr-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 0 0 18px;
}

.sr-metric {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 142px;
    align-items: flex-end;
    padding: 19px;
    overflow: hidden;
    border: 1px solid var(--sr-line);
    border-radius: 12px;
    background: var(--sr-card);
    box-shadow: 0 4px 16px rgba(23, 32, 51, .035);
}

.sr-metric::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    content: "";
    background: var(--sr-indigo);
    opacity: 0;
    transition: opacity .2s ease;
}

.sr-metric:hover::before {
    opacity: 1;
}

.sr-metric > div {
    min-width: 0;
}

.sr-metric > div > span {
    display: block;
    margin-bottom: 7px;
    color: var(--sr-copy);
    font-size: 12px;
    font-weight: 600;
}

.sr-metric strong {
    display: block;
    overflow: hidden;
    margin-bottom: 5px;
    color: var(--sr-navy);
    font-size: clamp(19px, 1.55vw, 24px);
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sr-metric small {
    display: block;
    color: var(--sr-muted);
    font-size: 10.5px;
    line-height: 1.4;
}

.sr-metric > svg {
    position: absolute;
    top: 17px;
    right: 17px;
    width: 44px;
    height: 44px;
    padding: 11px;
    border-radius: 12px;
    color: var(--sr-indigo);
    background: linear-gradient(145deg, #f4f4ff, #e8e8ff);
    box-shadow: inset 0 0 0 1px rgba(91, 91, 214, .11);
}

.sr-metric:nth-child(2) > svg {
    color: var(--sr-teal);
    background: linear-gradient(145deg, #effbf9, #dff5f2);
    box-shadow: inset 0 0 0 1px rgba(15, 148, 136, .11);
}

.sr-metric:nth-child(3) > svg {
    color: var(--sr-amber);
    background: linear-gradient(145deg, #fffaf0, #ffefd4);
    box-shadow: inset 0 0 0 1px rgba(216, 137, 37, .12);
}

.sr-metric:nth-child(4) > svg {
    color: var(--sr-teal);
    background: linear-gradient(145deg, #effbf9, #dff5f2);
    box-shadow: inset 0 0 0 1px rgba(15, 148, 136, .11);
}

.sr-metric--attention > svg {
    color: var(--sr-red) !important;
    background: linear-gradient(145deg, #fff5f7, #ffe7ec) !important;
    box-shadow: inset 0 0 0 1px rgba(200, 73, 98, .12) !important;
}

/* Shared dashboard card treatment. */
.sr-card,
.sr-periods,
.sr-ledger,
.sr-empty {
    overflow: hidden;
    border: 1px solid var(--sr-line);
    border-radius: 12px;
    background: var(--sr-card);
    box-shadow: 0 4px 16px rgba(23, 32, 51, .035);
}

.sr-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, .65fr);
    align-items: start;
    gap: 18px;
    margin-bottom: 18px;
}

.sr-card__header,
.sr-ledger__header {
    display: flex;
    min-height: 64px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 19px;
    border-bottom: 1px solid var(--sr-line);
}

.sr-card__header h2,
.sr-ledger__header h2,
.sr-periods h2 {
    margin: 0;
    color: var(--sr-navy);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.35;
}

.sr-card__header p,
.sr-ledger__header p {
    margin: 2px 0 0;
    color: var(--sr-muted);
    font-size: 10.5px;
    line-height: 1.45;
}

.sr-secure-label {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
    padding: 6px 9px;
    border: 1px solid #dfdffc;
    border-radius: 7px;
    color: var(--sr-indigo);
    background: var(--sr-indigo-soft);
    font-size: 9.5px;
    font-weight: 700;
    white-space: nowrap;
}

.sr-secure-label i {
    font-size: 13px;
}

/* Missing-period action card. */
.sr-periods {
    margin-bottom: 18px;
    border-left: 4px solid var(--sr-red);
}

.sr-periods > header {
    display: flex;
    min-height: 64px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--sr-line);
    background: linear-gradient(90deg, #fff8f9, #fff);
}

.sr-count-badge {
    padding: 5px 9px;
    border-radius: 999px;
    color: var(--sr-red);
    background: var(--sr-red-soft);
    font-size: 9.5px;
    font-weight: 700;
}

.sr-periods__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 14px 18px 17px;
}

.sr-periods__list article {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 12px;
    border: 1px solid #f0dce1;
    border-radius: 9px;
    background: #fffafb;
}

.sr-periods__list article span {
    display: block;
    margin-bottom: 2px;
    color: var(--sr-red);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}

.sr-periods__list article strong {
    color: var(--sr-navy);
    font-size: 11px;
}

.sr-text-button {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    color: var(--sr-indigo);
    background: transparent;
    font: inherit;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}

.sr-text-button i {
    font-size: 15px;
}

/* Filing form. */
.sr-filing form {
    padding: 0 19px;
}

.sr-form-section {
    min-width: 0;
    margin: 0;
    padding: 20px 0 22px;
    border: 0;
    border-bottom: 1px solid var(--sr-line);
}

.sr-form-section legend {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
    margin-bottom: 17px;
    padding: 0;
    color: var(--sr-navy);
    font-size: 12px;
    font-weight: 700;
}

.sr-form-section legend > span {
    display: grid;
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    place-items: center;
    border-radius: 9px;
    color: #fff;
    background: linear-gradient(145deg, #7272e9, #5050c7);
    box-shadow: 0 5px 12px rgba(91, 91, 214, .18), inset 0 1px 0 rgba(255, 255, 255, .28);
    font-size: 9px;
}

.sr-form-section legend small {
    display: block;
    margin-top: 2px;
    color: var(--sr-muted);
    font-size: 9.5px;
    font-weight: 400;
}

.sr-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}

.sr-field--full {
    grid-column: 1 / -1;
}

.sr-field label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 7px;
    color: #344158;
    font-size: 10.5px;
    font-weight: 650;
}

.sr-field label em {
    color: var(--sr-red);
    font-size: 8.5px;
    font-style: normal;
    font-weight: 650;
}

.sr-field > small {
    display: block;
    margin-top: 5px;
    color: var(--sr-muted);
    font-size: 9.5px;
    line-height: 1.4;
}

.sr-control {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    border: 1px solid #dce3ed;
    border-radius: 8px;
    outline: 0;
    color: var(--sr-navy);
    background: #fff;
    font: inherit;
    font-size: 11px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

select.sr-control {
    cursor: pointer;
}

.sr-control:focus {
    border-color: #8585e7;
    box-shadow: 0 0 0 3px rgba(91, 91, 214, .1);
}

.sr-control[readonly] {
    color: #4f5a70;
    background: #f8f9fc;
}

.sr-control.is-invalid {
    border-color: var(--sr-red);
}

.sr-control-wrap {
    position: relative;
}

.sr-control-wrap > i,
.sr-control-wrap > span {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 12px;
    color: var(--sr-muted);
    font-size: 14px;
    transform: translateY(-50%);
}

.sr-control-wrap .sr-control {
    padding-left: 34px;
}

.sr-control-wrap--money > span {
    color: var(--sr-copy);
    font-size: 11px;
    font-weight: 700;
}

.sr-field-error {
    display: block;
    margin-top: 5px;
    color: var(--sr-red);
    font-size: 9.5px;
}

.sr-products {
    min-height: 48px;
    padding: 8px;
    border: 1px solid var(--sr-line);
    border-radius: 9px;
    background: #f9faff;
}

.sr-products__empty {
    display: flex;
    min-height: 31px;
    align-items: center;
    gap: 8px;
    padding: 0 4px;
    color: var(--sr-muted);
    font-size: 10px;
}

.sr-products__empty i {
    color: var(--sr-indigo);
    font-size: 17px;
}

.sr-products__list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sr-products__list span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 8px;
    border: 1px solid #dfdffc;
    border-radius: 7px;
    color: #4646b7;
    background: #f3f3ff;
    font-size: 9.5px;
    font-weight: 600;
}

.sr-products__list i {
    font-size: 13px;
}

.sr-upload {
    border: 1px dashed #cbd4e3;
    border-radius: 10px;
    background: #fafbfe;
    transition: border-color .15s ease, background .15s ease;
}

.sr-upload:hover,
.sr-upload.is-dragging {
    border-color: var(--sr-indigo);
    background: #f7f7ff;
}

.sr-upload input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.sr-upload > label {
    display: flex;
    min-height: 84px;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 13px;
    cursor: pointer;
}

.sr-upload > label > span:nth-child(2) {
    min-width: 0;
    flex: 1;
}

.sr-upload > label strong,
.sr-upload > label small {
    display: block;
}

.sr-upload > label strong {
    margin-bottom: 3px;
    color: var(--sr-navy);
    font-size: 11px;
}

.sr-upload > label small {
    color: var(--sr-muted);
    font-size: 9.5px;
    font-weight: 400;
}

.sr-upload > label b {
    padding: 7px 10px;
    border: 1px solid #dcdcf9;
    border-radius: 7px;
    color: var(--sr-indigo);
    background: #fff;
    font-size: 9.5px;
}

.sr-upload__mark {
    display: grid;
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    place-items: center;
    border-radius: 10px;
    color: var(--sr-indigo);
    background: linear-gradient(145deg, #f4f4ff, #e8e8ff);
    box-shadow: inset 0 0 0 1px rgba(91, 91, 214, .1);
}

.sr-upload__mark i {
    font-size: 19px;
}

.sr-file-list {
    display: grid;
    gap: 6px;
    margin-top: 7px;
}

.sr-file-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    border: 1px solid var(--sr-line);
    border-radius: 7px;
    color: var(--sr-copy);
    background: #fff;
    font-size: 9.5px;
}

.sr-file-item > span {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sr-file-item button {
    padding: 2px;
    border: 0;
    color: var(--sr-red);
    background: transparent;
    cursor: pointer;
}

.sr-form-alert {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 15px 19px 0;
    padding: 10px 12px;
    border: 1px solid #f2d6dc;
    border-radius: 8px;
    color: #a5374c;
    background: var(--sr-red-soft);
    font-size: 10px;
}

.sr-form-alert i {
    font-size: 16px;
}

.sr-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 17px 0;
}

.sr-form-footer p {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--sr-muted);
    font-size: 9.5px;
}

.sr-form-footer p i {
    color: var(--sr-indigo);
    font-size: 14px;
}

.sr-button {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 8px;
    font: inherit;
    font-size: 10.5px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}

.sr-button--primary {
    color: #fff;
    background: linear-gradient(135deg, #6868df, #4e4ec4);
    box-shadow: 0 7px 15px rgba(91, 91, 214, .2);
}

.sr-button--primary:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 9px 19px rgba(91, 91, 214, .25);
}

/* Locked filing state. */
.sr-locked__body {
    display: grid;
    gap: 14px;
    padding: 19px;
}

.sr-date-panel {
    padding: 16px;
    border: 1px solid #cde9e6;
    border-radius: 10px;
    background: linear-gradient(110deg, #eefaf8, #f8fdfc);
}

.sr-date-panel span,
.sr-date-panel strong,
.sr-date-panel small {
    display: block;
}

.sr-date-panel span {
    margin-bottom: 5px;
    color: var(--sr-teal);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.sr-date-panel strong {
    margin-bottom: 4px;
    color: var(--sr-navy);
    font-size: 18px;
    letter-spacing: -.025em;
}

.sr-date-panel small {
    color: var(--sr-copy);
    font-size: 9.5px;
}

.sr-preparation {
    padding: 15px 16px;
    border: 1px solid var(--sr-line);
    border-radius: 10px;
}

.sr-preparation h3 {
    margin: 0 0 11px;
    color: var(--sr-navy);
    font-size: 11px;
}

.sr-preparation ul {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sr-preparation li {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--sr-copy);
    font-size: 10px;
}

.sr-preparation li i {
    display: grid;
    width: 18px;
    height: 18px;
    place-items: center;
    border-radius: 50%;
    color: var(--sr-teal);
    background: var(--sr-teal-soft);
    font-size: 13px;
}

/* Royalty terms side card. */
.sr-terms {
    position: sticky;
    top: 18px;
}

.sr-terms .sr-card__header {
    background: linear-gradient(120deg, #fffaf1, #fff);
}

.sr-terms .sr-kicker {
    color: var(--sr-amber);
}

.sr-estimate {
    margin: 16px 16px 0;
    padding: 14px;
    border: 1px solid #f1dfbf;
    border-radius: 10px;
    background: var(--sr-amber-soft);
}

.sr-estimate span,
.sr-estimate strong,
.sr-estimate small {
    display: block;
}

.sr-estimate span {
    margin-bottom: 5px;
    color: #9c6824;
    font-size: 9.5px;
    font-weight: 600;
}

.sr-estimate strong {
    margin-bottom: 3px;
    color: var(--sr-navy);
    font-size: 22px;
    letter-spacing: -.03em;
}

.sr-estimate small {
    color: var(--sr-copy);
    font-size: 9px;
}

.sr-terms__list {
    margin: 0;
    padding: 11px 16px;
}

.sr-terms__list div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--sr-line);
}

.sr-terms__list div:last-child {
    border-bottom: 0;
}

.sr-terms__list dt {
    color: var(--sr-copy);
    font-size: 10px;
}

.sr-terms__list dd {
    margin: 0;
    color: var(--sr-navy);
    font-size: 10.5px;
    font-weight: 700;
}

.sr-terms__note {
    display: flex;
    gap: 8px;
    margin: 0 16px 16px;
    padding: 10px;
    border-radius: 8px;
    color: var(--sr-copy);
    background: #f7f8fc;
}

.sr-terms__note i {
    flex: 0 0 auto;
    color: var(--sr-indigo);
    font-size: 15px;
}

.sr-terms__note p {
    margin: 0;
    font-size: 9.5px;
    line-height: 1.5;
}

/* Financial ledger follows dashboard table density. */
.sr-ledger__tools {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sr-ledger__tools > span {
    display: flex;
    align-items: baseline;
    gap: 3px;
    color: var(--sr-muted);
    font-size: 9px;
}

.sr-ledger__tools > span strong {
    color: var(--sr-navy);
    font-size: 12px;
}

.sr-ledger__tools > a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--sr-indigo);
    font-size: 10px;
    font-weight: 700;
    text-decoration: none;
}

.sr-ledger__tools > a i {
    font-size: 14px;
}

.sr-ledger__scroll {
    overflow-x: auto;
}

.sr-ledger table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.sr-col-period { width: 23%; }
.sr-col-sales { width: 14%; }
.sr-col-royalty { width: 15%; }
.sr-col-record { width: 28%; }
.sr-col-payment { width: 20%; }

.sr-ledger th {
    padding: 10px 15px;
    border-bottom: 1px solid var(--sr-line);
    color: #8792a8;
    background: var(--sr-bg);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .055em;
    text-align: left;
    text-transform: uppercase;
}

.sr-ledger td {
    padding: 13px 15px;
    border-bottom: 1px solid #e8ecf3;
    color: var(--sr-copy);
    font-size: 10px;
    vertical-align: middle;
}

.sr-ledger tbody tr:last-child td {
    border-bottom: 0;
}

.sr-ledger tbody tr {
    transition: background .15s ease;
}

.sr-ledger tbody tr:hover {
    background: #fafbfe;
}

.sr-number {
    text-align: right !important;
}

.sr-ledger-period span,
.sr-ledger-period strong,
.sr-ledger-period small,
.sr-ledger-value strong,
.sr-ledger-value small {
    display: block;
}

.sr-ledger-period span {
    margin-bottom: 3px;
    color: var(--sr-indigo);
    font-size: 8.5px;
    font-weight: 700;
}

.sr-ledger-period strong,
.sr-ledger-value strong {
    color: var(--sr-navy);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.35;
}

.sr-ledger-period small,
.sr-ledger-value small {
    margin-top: 3px;
    color: var(--sr-muted);
    font-size: 8.5px;
    line-height: 1.35;
}

.sr-ledger-value small.is-due {
    color: var(--sr-red);
}

.sr-ledger-value.is-muted strong {
    color: var(--sr-muted);
}

.sr-ledger-record > strong {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    color: var(--sr-navy);
    font-size: 9.5px;
}

.sr-ledger-record > strong > i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sr-teal);
    box-shadow: 0 0 0 3px var(--sr-teal-soft);
}

.sr-ledger-record > strong > i.is-admin {
    background: var(--sr-indigo);
    box-shadow: 0 0 0 3px var(--sr-indigo-soft);
}

.sr-ledger-record > div {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 9px;
}

.sr-ledger-record > div span,
.sr-ledger-record > div a {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--sr-muted);
    font-size: 8.5px;
    text-decoration: none;
}

.sr-ledger-record > div a {
    color: var(--sr-indigo);
}

.sr-ledger-payment {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.sr-payment-state {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border-radius: 999px;
    color: #68748a;
    background: #f0f2f6;
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
}

.sr-payment-state > i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}

.sr-payment-state--paid {
    color: #087a71;
    background: #e6f7f4;
}

.sr-payment-state--due {
    color: #a96813;
    background: #fff4df;
}

.sr-payment-state--failed {
    color: #ae3850;
    background: #ffedf1;
}

.sr-ledger-actions {
    display: flex;
    align-items: center;
    gap: 5px;
}

.sr-ledger-actions form {
    margin: 0;
}

.sr-ledger-action {
    display: inline-flex;
    min-height: 29px;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 9px;
    border: 1px solid #dce3ed;
    border-radius: 7px;
    color: #536078;
    background: #fff;
    font: inherit;
    font-size: 8.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.sr-ledger-action--primary {
    border-color: var(--sr-indigo);
    color: #fff;
    background: var(--sr-indigo);
}

.sr-ledger__empty {
    display: grid;
    min-height: 190px;
    place-items: center;
    align-content: center;
    gap: 5px;
    color: var(--sr-muted);
    text-align: center;
}

.sr-ledger__empty i {
    display: grid;
    width: 42px;
    height: 42px;
    margin-bottom: 5px;
    place-items: center;
    border-radius: 11px;
    color: var(--sr-indigo);
    background: var(--sr-indigo-soft);
    font-size: 20px;
}

.sr-ledger__empty strong {
    color: var(--sr-navy);
    font-size: 11px;
}

.sr-ledger__empty span {
    font-size: 9.5px;
}

/* No-license empty state. */
.sr-empty {
    display: grid;
    min-height: 330px;
    place-items: center;
    align-content: center;
    padding: 30px;
    text-align: center;
}

.sr-empty__icon {
    display: grid;
    width: 54px;
    height: 54px;
    margin-bottom: 13px;
    place-items: center;
    border-radius: 14px;
    color: var(--sr-indigo);
    background: linear-gradient(145deg, #f4f4ff, #e8e8ff);
    box-shadow: inset 0 0 0 1px rgba(91, 91, 214, .1);
    font-size: 27px;
}

.sr-empty h2 {
    margin: 0 0 7px;
    color: var(--sr-navy);
    font-size: 17px;
}

.sr-empty p {
    max-width: 430px;
    margin: 0 0 17px;
    color: var(--sr-copy);
    font-size: 10.5px;
    line-height: 1.6;
}

@media (max-width: 1180px) {
    .sr-status {
        grid-template-columns: 43px minmax(0, 1fr);
    }

    .sr-status__facts {
        grid-column: 1 / -1;
        margin-left: 57px;
    }

    .sr-status__facts div {
        min-width: 0;
        flex: 1;
    }

    .sr-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sr-workspace {
        grid-template-columns: minmax(0, 1.4fr) minmax(260px, .6fr);
    }
}

@media (max-width: 920px) {
    .sr-workspace {
        grid-template-columns: 1fr;
    }

    .sr-terms {
        position: static;
    }

    .sr-terms__list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 18px;
    }

    .sr-ledger table {
        min-width: 820px;
    }
}

@media (max-width: 700px) {
    .sr-status {
        grid-template-columns: 39px minmax(0, 1fr);
        padding: 14px;
    }

    .sr-status__mark {
        width: 39px;
        height: 39px;
    }

    .sr-status__facts {
        display: grid;
        grid-template-columns: 1fr;
        margin-left: 0;
    }

    .sr-status__facts div,
    .sr-status__facts div:first-child {
        padding: 8px 10px;
        border-top: 1px solid var(--sr-line);
        border-left: 0;
    }

    .sr-status__facts div:first-child {
        border-top: 0;
    }

    .sr-metrics,
    .sr-form-grid,
    .sr-periods__list,
    .sr-terms__list {
        grid-template-columns: 1fr;
    }

    .sr-metric {
        min-height: 126px;
    }

    .sr-periods__list article,
    .sr-form-footer,
    .sr-card__header,
    .sr-ledger__header {
        align-items: flex-start;
        flex-direction: column;
    }

    .sr-card__header,
    .sr-ledger__header {
        display: flex;
    }

    .sr-periods__list article {
        align-items: flex-start;
    }

    .sr-form-footer .sr-button {
        width: 100%;
    }

    .sr-upload > label {
        flex-wrap: wrap;
    }

    .sr-upload > label b {
        margin-left: 51px;
    }

    .sr-ledger__tools {
        width: 100%;
        justify-content: space-between;
    }

    .sr-ledger__scroll {
        padding: 10px;
        overflow: visible;
    }

    .sr-ledger table,
    .sr-ledger thead,
    .sr-ledger tbody,
    .sr-ledger tr,
    .sr-ledger td {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .sr-ledger thead,
    .sr-ledger colgroup {
        display: none;
    }

    .sr-ledger tbody {
        display: grid;
        gap: 10px;
    }

    .sr-ledger tbody tr {
        padding: 5px 12px;
        border: 1px solid var(--sr-line);
        border-radius: 10px;
        background: #fff;
    }

    .sr-ledger td {
        display: grid;
        grid-template-columns: 108px minmax(0, 1fr);
        gap: 10px;
        padding: 9px 0;
        border-bottom: 1px solid var(--sr-line);
        text-align: left !important;
    }

    .sr-ledger td::before {
        color: var(--sr-muted);
        content: attr(data-label);
        font-size: 8.5px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .sr-ledger-payment {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 430px) {
    .sr-metrics {
        gap: 10px;
    }

    .sr-metric {
        min-height: 118px;
        padding: 16px;
    }

    .sr-metric > svg {
        top: 14px;
        right: 14px;
        width: 40px;
        height: 40px;
    }

    .sr-ledger td {
        grid-template-columns: 1fr;
        gap: 5px;
    }
}

/* ============================================================
   ACCOUNT & RESOURCE COMPONENTS (acct-* / res-*)
   Shared by Profile, Password, Android App, and Help Center.
   ============================================================ */
.acct-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(285px, .55fr);
    align-items: start;
    gap: 18px;
}

.acct-stack,
.res-stack {
    display: grid;
    gap: 18px;
}

.acct-avatar {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(145deg, #6f6fe4, #4949b9);
    box-shadow: 0 7px 16px rgba(91, 91, 214, .22), inset 0 1px 0 rgba(255, 255, 255, .26);
    font-size: 15px;
    font-weight: 800;
}

.acct-form {
    padding: 18px;
}

.acct-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}

.acct-field--full { grid-column: 1 / -1; }

.acct-field label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 7px;
    color: var(--sp-text);
    font-size: 10px;
    font-weight: 700;
}

.acct-required { color: var(--sp-red); font-size: 8.5px; }

.acct-input-wrap { position: relative; }

.acct-input-wrap > i {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 12px;
    color: var(--sp-muted);
    font-size: 15px;
    transform: translateY(-50%);
}

.acct-input-wrap > i.is-top { top: 14px; transform: none; }

.acct-input,
.acct-textarea {
    width: 100%;
    min-height: 42px;
    padding: 0 12px 0 36px;
    border: 1px solid var(--sp-border);
    border-radius: 8px;
    outline: 0;
    color: var(--sp-text);
    background: var(--sp-card);
    font: inherit;
    font-size: 10.5px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.acct-textarea {
    min-height: 100px;
    padding-top: 11px;
    resize: vertical;
}

.acct-input:focus,
.acct-textarea:focus {
    border-color: #8585e7;
    box-shadow: 0 0 0 3px rgba(91, 91, 214, .1);
}

.acct-input.is-error,
.acct-textarea.is-error { border-color: var(--sp-red); }

.acct-help,
.acct-error {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 5px;
    color: var(--sp-muted);
    font-size: 8.5px;
    line-height: 1.4;
}

.acct-error { color: var(--sp-red); }

.acct-form-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 18px;
    border-top: 1px solid var(--sp-border);
    background: color-mix(in srgb, var(--sp-bg) 55%, var(--sp-card));
}

.acct-info-list { margin: 0; padding: 7px 17px; }

.acct-info-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid var(--sp-border-soft);
}

.acct-info-list > div:last-child { border-bottom: 0; }
.acct-info-list dt { display: flex; align-items: center; gap: 6px; color: var(--sp-sub); font-size: 9.5px; }
.acct-info-list dt i { color: var(--sp-accent); font-size: 14px; }
.acct-info-list dd { margin: 0; color: var(--sp-text); font-size: 10px; font-weight: 750; text-align: right; }

.acct-note,
.res-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 17px 17px;
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--sp-accent) 20%, var(--sp-border));
    border-radius: 8px;
    color: var(--sp-sub);
    background: color-mix(in srgb, var(--sp-accent) 6%, var(--sp-card));
    font-size: 9px;
    line-height: 1.5;
}

.acct-note i,
.res-note i { flex: 0 0 auto; color: var(--sp-accent); font-size: 15px; }

.acct-security-list,
.res-feature-list {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 5px 17px;
    list-style: none;
}

.acct-security-list li,
.res-feature {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 11px 0;
    border-bottom: 1px solid var(--sp-border-soft);
    color: var(--sp-sub);
    font-size: 9.5px;
    line-height: 1.5;
}

.acct-security-list li:last-child,
.res-feature:last-child { border-bottom: 0; }
.acct-security-list li > i { color: var(--sp-teal); font-size: 15px; }
.acct-security-list li.is-warning > i { color: var(--sp-red); }

.acct-password-field { margin-bottom: 15px; }
.acct-password-field:last-child { margin-bottom: 0; }

.acct-password-toggle {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: 8px;
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 0;
    border-radius: 7px;
    color: var(--sp-muted);
    background: transparent;
    cursor: pointer;
    transform: translateY(-50%);
}

.acct-password-toggle:hover { color: var(--sp-accent); background: var(--sp-bg); }
.acct-password-field .acct-input { padding-right: 42px; }

.acct-strength { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; margin-top: 8px; }
.acct-strength__track { height: 5px; overflow: hidden; border-radius: 99px; background: var(--sp-border); }
.acct-strength__fill { width: 0; height: 100%; border-radius: inherit; background: var(--sp-red); transition: width .2s ease, background-color .2s ease; }
.acct-strength__label { color: var(--sp-muted); font-size: 8.5px; font-weight: 750; }

.acct-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 14px; padding: 12px; border: 1px solid var(--sp-border); border-radius: 9px; background: var(--sp-bg); }
.acct-check { display: flex; align-items: center; gap: 5px; color: var(--sp-muted); font-size: 8.5px; }
.acct-check i { font-size: 13px; }
.acct-check.is-valid { color: var(--sp-teal); }
.acct-match { display: flex; align-items: center; gap: 4px; margin-top: 6px; color: var(--sp-red); font-size: 8.5px; }
.acct-match.is-valid { color: var(--sp-teal); }

.res-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(310px, .85fr);
    align-items: start;
    gap: 18px;
}

.res-feature__icon {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    place-items: center;
    border-radius: 9px;
    color: var(--sp-accent);
    background: color-mix(in srgb, var(--sp-accent) 10%, var(--sp-card));
    font-size: 17px;
}

.res-feature strong { display: block; margin-bottom: 2px; color: var(--sp-text); font-size: 10px; }
.res-feature span { display: block; color: var(--sp-sub); font-size: 9px; }

.res-steps { margin: 0; padding: 5px 17px; list-style: none; counter-reset: install-step; }
.res-steps li { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--sp-border-soft); counter-increment: install-step; }
.res-steps li:last-child { border-bottom: 0; }
.res-steps li::before { display: grid; width: 27px; height: 27px; flex: 0 0 27px; place-items: center; border-radius: 8px; color: #fff; background: linear-gradient(145deg, #6f6fe4, #4949b9); content: counter(install-step); font-size: 8px; font-weight: 800; }
.res-steps strong { display: block; margin-bottom: 2px; color: var(--sp-text); font-size: 9.5px; }
.res-steps span { display: block; color: var(--sp-sub); font-size: 8.5px; line-height: 1.5; }

.res-download { padding: 0 17px 17px; }
.res-download .pw-action { width: 100%; min-height: 39px; }
.res-qr { display: flex; align-items: center; gap: 12px; margin: 0 17px 17px; padding: 12px; border: 1px solid var(--sp-border); border-radius: 9px; background: var(--sp-bg); }
.res-qr img { width: 82px; height: 82px; flex: 0 0 82px; padding: 5px; border-radius: 7px; background: #fff; }
.res-qr strong { display: block; margin-bottom: 3px; color: var(--sp-text); font-size: 9.5px; }
.res-qr span { color: var(--sp-sub); font-size: 8.5px; line-height: 1.5; }

.res-faq { margin: 0; padding: 5px 17px; }
.res-faq details { border-bottom: 1px solid var(--sp-border-soft); }
.res-faq details:last-child { border-bottom: 0; }
.res-faq summary { display: flex; align-items: center; gap: 7px; padding: 12px 0; color: var(--sp-text); font-size: 9.5px; font-weight: 700; cursor: pointer; list-style: none; }
.res-faq summary::-webkit-details-marker { display: none; }
.res-faq summary i { color: var(--sp-accent); font-size: 15px; }
.res-faq summary::after { margin-left: auto; color: var(--sp-muted); content: "+"; font-size: 14px; }
.res-faq details[open] summary::after { content: "−"; }
.res-faq p { margin: -3px 0 12px 22px; color: var(--sp-sub); font-size: 8.8px; line-height: 1.6; }
.res-faq a { color: var(--sp-accent); }

/* Help Center: retain rich guide content but use the shared portal language. */
.hc-wrap { color: var(--sp-text); }
.hc-hero { border: 1px solid var(--sp-border) !important; border-left: 4px solid var(--sp-accent) !important; border-radius: 11px !important; color: var(--sp-text) !important; background: linear-gradient(100deg, color-mix(in srgb, var(--sp-accent) 6%, var(--sp-card)), var(--sp-card) 72%) !important; box-shadow: var(--sp-shadow) !important; }
.hc-hero :is(h2, strong) { color: var(--sp-text) !important; }
.hc-hero :is(p, span) { color: var(--sp-sub); }
.hc-toolbar, .hc-card, .hc-guide, .hc-quick, .hc-support { border-color: var(--sp-border) !important; border-radius: var(--sp-radius) !important; background-color: var(--sp-card) !important; box-shadow: var(--sp-shadow) !important; }
.hc-search { border-color: var(--sp-border) !important; background: var(--sp-card) !important; }
.hc-search input { color: var(--sp-text) !important; background: transparent !important; }
.hc-tool-btn, .hc-inline-btn, .hc-btn { border-radius: 8px !important; font-family: inherit; }
.hc-quick :is(strong, small), .hc-guide-title :is(strong, small), .hc-card h3, .hc-section-title h2 { color: var(--sp-text) !important; }
.hc-quick small, .hc-guide-title small, .hc-card p, .hc-section-title p { color: var(--sp-sub) !important; }
.hc-guide summary { border-color: var(--sp-border) !important; background: var(--sp-card) !important; }
.hc-guide[open] summary { background: color-mix(in srgb, var(--sp-accent) 4%, var(--sp-card)) !important; }
.hc-guide-body { color: var(--sp-sub); background: var(--sp-card) !important; }
.hc-steps li > span, .hc-guide-num { color: #fff !important; background: linear-gradient(145deg, #6f6fe4, #4949b9) !important; }
.hc-tip, .hc-definition, .hc-warning, .hc-mini-card { border-color: var(--sp-border) !important; color: var(--sp-sub) !important; background: var(--sp-bg) !important; }
.hc-tip strong, .hc-definition strong, .hc-warning strong, .hc-mini-card strong { color: var(--sp-text) !important; }
.hc-support { color: var(--sp-text) !important; background: linear-gradient(100deg, color-mix(in srgb, var(--sp-accent) 7%, var(--sp-card)), var(--sp-card)) !important; }
.hc-support :is(h2, span) { color: var(--sp-text) !important; }
.hc-support p { color: var(--sp-sub) !important; }

@media (max-width: 940px) {
    .acct-grid, .res-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
    .acct-form-grid, .acct-checks { grid-template-columns: 1fr; }
    .acct-field--full { grid-column: auto; }
    .acct-form-footer { align-items: stretch; flex-direction: column-reverse; }
    .acct-form-footer .pw-action { width: 100%; }
    .res-qr { align-items: flex-start; }
}

@media (max-width: 430px) {
    .res-qr { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    .sr-page *,
    .sr-page *::before,
    .sr-page *::after {
        scroll-behavior: auto !important;
        transition: none !important;
    }
}

/* ============================================================
   PORTAL WORKSPACE COMPONENTS (pw-*)
   Shared by Billing and Settlements in light and dark mode.
   ============================================================ */
.pw-page {
    display: grid;
    gap: 18px;
    color: var(--sp-text);
}

.pw-status {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    min-height: 82px;
    padding: 15px 17px;
    border: 1px solid var(--sp-border);
    border-left: 4px solid var(--sp-accent);
    border-radius: 11px;
    background: linear-gradient(100deg, color-mix(in srgb, var(--sp-accent) 5%, var(--sp-card)), var(--sp-card) 70%);
    box-shadow: var(--sp-shadow);
}

.pw-status--attention {
    border-left-color: var(--sp-amber);
    background: linear-gradient(100deg, color-mix(in srgb, var(--sp-amber) 7%, var(--sp-card)), var(--sp-card) 70%);
}

.pw-status--success {
    border-left-color: var(--sp-teal);
    background: linear-gradient(100deg, color-mix(in srgb, var(--sp-teal) 7%, var(--sp-card)), var(--sp-card) 70%);
}

.pw-status__icon,
.pw-head-icon,
.pw-metric__icon {
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: var(--sp-accent);
    background: color-mix(in srgb, var(--sp-accent) 11%, var(--sp-card));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sp-accent) 16%, transparent);
}

.pw-status__icon {
    width: 44px;
    height: 44px;
    color: #fff;
    background: linear-gradient(145deg, #6f6fe4, #4949b9);
    box-shadow: 0 7px 16px rgba(91, 91, 214, .22), inset 0 1px 0 rgba(255, 255, 255, .26);
    font-size: 21px;
}

.pw-status--attention .pw-status__icon {
    background: linear-gradient(145deg, #eba84d, #bd7118);
    box-shadow: 0 7px 16px rgba(216, 137, 37, .22), inset 0 1px 0 rgba(255, 255, 255, .26);
}

.pw-status--success .pw-status__icon {
    background: linear-gradient(145deg, #1aada0, #0b8177);
    box-shadow: 0 7px 16px rgba(15, 148, 136, .22), inset 0 1px 0 rgba(255, 255, 255, .26);
}

.pw-eyebrow {
    display: block;
    margin-bottom: 3px;
    color: var(--sp-accent);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .075em;
    text-transform: uppercase;
}

.pw-status--attention .pw-eyebrow { color: var(--sp-amber); }
.pw-status--success .pw-eyebrow { color: var(--sp-teal); }

.pw-status h2,
.pw-card h2 {
    margin: 0;
    color: var(--sp-text);
    font-size: 14px;
    font-weight: 750;
    letter-spacing: -.015em;
}

.pw-status p,
.pw-card-head p {
    margin: 3px 0 0;
    color: var(--sp-sub);
    font-size: 10.5px;
    line-height: 1.45;
}

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

.pw-status__facts {
    display: flex;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--sp-border);
    border-radius: 9px;
    background: color-mix(in srgb, var(--sp-card) 88%, transparent);
}

.pw-status__facts div {
    min-width: 96px;
    padding: 8px 11px;
    border-left: 1px solid var(--sp-border);
}

.pw-status__facts div:first-child { border-left: 0; }

.pw-status__facts dt {
    margin-bottom: 2px;
    color: var(--sp-muted);
    font-size: 8.5px;
}

.pw-status__facts dd {
    margin: 0;
    color: var(--sp-text);
    font-size: 10.5px;
    font-weight: 750;
    white-space: nowrap;
}

.pw-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.pw-metric {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 136px;
    align-items: flex-end;
    padding: 18px 19px;
    overflow: hidden;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    background: var(--sp-card);
    box-shadow: var(--sp-shadow);
}

.pw-metric::before {
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    content: "";
    background: var(--pw-tone, var(--sp-accent));
    opacity: .8;
}

.pw-metric--teal { --pw-tone: var(--sp-teal); }
.pw-metric--amber { --pw-tone: var(--sp-amber); }
.pw-metric--red { --pw-tone: var(--sp-red); }

.pw-metric__icon {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 42px;
    height: 42px;
    color: var(--pw-tone, var(--sp-accent));
    background: color-mix(in srgb, var(--pw-tone, var(--sp-accent)) 11%, var(--sp-card));
    font-size: 20px;
}

.pw-metric__label {
    display: block;
    margin-bottom: 6px;
    color: var(--sp-sub);
    font-size: 10.5px;
    font-weight: 650;
}

.pw-metric__value {
    display: block;
    overflow: hidden;
    margin-bottom: 4px;
    color: var(--sp-text);
    font-size: clamp(19px, 1.55vw, 23px);
    font-weight: 750;
    letter-spacing: -.035em;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pw-metric__meta {
    display: block;
    color: var(--sp-muted);
    font-size: 9.5px;
    line-height: 1.4;
}

.pw-card {
    overflow: hidden;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    background: var(--sp-card);
    box-shadow: var(--sp-shadow);
}

.pw-card-head {
    display: flex;
    min-height: 66px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--sp-border);
}

.pw-card-head__title {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
}

.pw-head-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    font-size: 18px;
}

.pw-card-tools {
    display: flex;
    align-items: center;
    gap: 9px;
}

.pw-segments {
    display: inline-flex;
    gap: 3px;
    padding: 3px;
    border: 1px solid var(--sp-border-soft);
    border-radius: 9px;
    background: var(--sp-bg);
}

.pw-segment {
    min-height: 29px;
    padding: 0 10px;
    border: 0;
    border-radius: 6px;
    color: var(--sp-sub);
    background: transparent;
    font: inherit;
    font-size: 9.5px;
    font-weight: 700;
    cursor: pointer;
}

.pw-segment.active {
    color: var(--sp-accent);
    background: var(--sp-card);
    box-shadow: 0 1px 4px rgba(23, 32, 51, .08);
}

.pw-segment__count {
    display: inline-grid;
    min-width: 18px;
    height: 18px;
    margin-left: 4px;
    place-items: center;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 9%, transparent);
    font-size: 8px;
}

.pw-search {
    position: relative;
    width: min(220px, 28vw);
}

.pw-search i {
    position: absolute;
    top: 50%;
    left: 10px;
    color: var(--sp-muted);
    font-size: 15px;
    transform: translateY(-50%);
}

.pw-search input {
    width: 100%;
    height: 35px;
    padding: 0 10px 0 31px;
    border: 1px solid var(--sp-border);
    border-radius: 8px;
    outline: 0;
    color: var(--sp-text);
    background: var(--sp-card);
    font: inherit;
    font-size: 9.5px;
}

.pw-search input:focus {
    border-color: #8585e7;
    box-shadow: 0 0 0 3px rgba(91, 91, 214, .1);
}

.pw-table-wrap { overflow-x: auto; }

.pw-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.pw-table th {
    padding: 10px 14px;
    border-bottom: 1px solid var(--sp-border);
    color: var(--sp-muted);
    background: var(--sp-bg);
    font-size: 8.5px;
    font-weight: 750;
    letter-spacing: .055em;
    text-align: left;
    text-transform: uppercase;
}

.pw-table td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--sp-border-soft);
    color: var(--sp-sub);
    font-size: 10px;
    vertical-align: middle;
}

.pw-table tbody tr:last-child td { border-bottom: 0; }
.pw-table tbody tr:hover { background: color-mix(in srgb, var(--sp-accent) 3%, var(--sp-card)); }
.pw-table tr[hidden] { display: none; }
.pw-table .is-number { text-align: right; }
.pw-table .is-action { text-align: right; }

.pw-record {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
}

.pw-record__icon {
    display: grid;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    place-items: center;
    border-radius: 8px;
    color: var(--sp-accent);
    background: color-mix(in srgb, var(--sp-accent) 10%, var(--sp-card));
    font-size: 16px;
}

.pw-record strong,
.pw-cell-value {
    display: block;
    color: var(--sp-text);
    font-size: 10.5px;
    font-weight: 750;
    line-height: 1.35;
}

.pw-record small,
.pw-cell-meta {
    display: block;
    margin-top: 2px;
    color: var(--sp-muted);
    font-size: 8.5px;
    line-height: 1.4;
}

.pw-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 8px;
    border-radius: 999px;
    color: var(--sp-sub);
    background: color-mix(in srgb, var(--sp-muted) 12%, var(--sp-card));
    font-size: 8px;
    font-weight: 750;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.pw-badge--success { color: var(--sp-teal); background: color-mix(in srgb, var(--sp-teal) 12%, var(--sp-card)); }
.pw-badge--warning { color: var(--sp-amber); background: color-mix(in srgb, var(--sp-amber) 12%, var(--sp-card)); }
.pw-badge--danger { color: var(--sp-red); background: color-mix(in srgb, var(--sp-red) 12%, var(--sp-card)); }
.pw-badge--info { color: var(--sp-accent); background: color-mix(in srgb, var(--sp-accent) 11%, var(--sp-card)); }

.pw-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.pw-actions form { margin: 0; }

.pw-action {
    display: inline-flex;
    min-height: 31px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 10px;
    border: 1px solid var(--sp-border);
    border-radius: 7px;
    color: var(--sp-sub);
    background: var(--sp-card);
    font: inherit;
    font-size: 8.5px;
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.pw-action:hover { color: var(--sp-accent); border-color: color-mix(in srgb, var(--sp-accent) 35%, var(--sp-border)); }
.pw-action--primary { color: #fff; border-color: transparent; background: linear-gradient(135deg, #6868df, #4e4ec4); box-shadow: 0 5px 12px rgba(91, 91, 214, .18); }
.pw-action--primary:hover { color: #fff; }
.pw-action--teal { color: #fff; border-color: transparent; background: linear-gradient(135deg, #18a99d, #0b8177); box-shadow: 0 5px 12px rgba(15, 148, 136, .18); }
.pw-action--teal:hover { color: #fff; }

.pw-empty {
    display: grid;
    min-height: 230px;
    place-items: center;
    align-content: center;
    padding: 28px;
    text-align: center;
}

.pw-empty__icon {
    display: grid;
    width: 46px;
    height: 46px;
    margin-bottom: 10px;
    place-items: center;
    border-radius: 12px;
    color: var(--sp-accent);
    background: color-mix(in srgb, var(--sp-accent) 11%, var(--sp-card));
    font-size: 22px;
}

.pw-empty h3 { margin: 0 0 4px; color: var(--sp-text); font-size: 12px; }
.pw-empty p { max-width: 390px; margin: 0; color: var(--sp-muted); font-size: 9.5px; line-height: 1.5; }

.pw-alert {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--sp-border);
    border-radius: 9px;
    color: var(--sp-sub);
    background: var(--sp-card);
    font-size: 10px;
}

.pw-alert--success { color: var(--sp-teal); border-color: color-mix(in srgb, var(--sp-teal) 28%, var(--sp-border)); background: color-mix(in srgb, var(--sp-teal) 7%, var(--sp-card)); }
.pw-alert--danger { color: var(--sp-red); border-color: color-mix(in srgb, var(--sp-red) 28%, var(--sp-border)); background: color-mix(in srgb, var(--sp-red) 7%, var(--sp-card)); }
.pw-alert--info { color: var(--sp-accent); border-color: color-mix(in srgb, var(--sp-accent) 25%, var(--sp-border)); background: color-mix(in srgb, var(--sp-accent) 6%, var(--sp-card)); }

.bl-source {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 3px;
    color: var(--sp-muted);
    font-size: 8px;
}

.bl-source--license { color: var(--sp-teal); }
.bl-source--settlement { color: var(--sp-accent); }
.bl-date { white-space: nowrap; }
.bl-awaiting { color: var(--sp-muted); font-size: 9px; font-style: italic; }
.bl-col-record { width: 25%; }
.bl-col-date { width: 16%; }
.bl-col-amount { width: 14%; }
.bl-col-status { width: 15%; }
.bl-col-action { width: 30%; }

.stl-reference strong { color: var(--sp-text); font-size: 10.5px; }
.stl-reference small { display: block; margin-top: 2px; color: var(--sp-muted); font-size: 8px; }
.stl-products { display: inline-flex; align-items: center; gap: 5px; color: var(--sp-sub); font-weight: 650; }
.stl-col-record { width: 22%; }
.stl-col-products { width: 12%; }
.stl-col-amount { width: 13%; }
.stl-col-agreement { width: 13%; }
.stl-col-status { width: 15%; }
.stl-col-updated { width: 12%; }
.stl-col-action { width: 13%; }

.std-back {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: max-content;
    color: var(--sp-sub);
    font-size: 9.5px;
    font-weight: 700;
    text-decoration: none;
}

.std-back:hover { color: var(--sp-accent); }
.std-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.std-body { padding: 17px 18px; }
.std-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

.std-info {
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--sp-border-soft);
    border-radius: 9px;
    background: var(--sp-bg);
}

.std-info span { display: block; margin-bottom: 4px; color: var(--sp-muted); font-size: 8.5px; }
.std-info strong { display: block; overflow-wrap: anywhere; color: var(--sp-text); font-size: 10.5px; }
.std-signature { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--sp-border); }
.std-signature span { display: block; margin-bottom: 7px; color: var(--sp-muted); font-size: 8.5px; }
.std-signature img { display: block; max-width: 240px; max-height: 82px; padding: 8px; border: 1px solid var(--sp-border); border-radius: 8px; background: #fff; }
.std-filebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; padding: 10px 12px; border: 1px solid var(--sp-border); border-radius: 9px; background: var(--sp-bg); }
.std-filebar strong { overflow: hidden; color: var(--sp-text); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.std-pdf { width: 100%; height: 640px; border: 1px solid var(--sp-border); border-radius: 9px; background: var(--sp-bg); }
.std-evidence { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.std-evidence li { padding: 12px; border: 1px solid var(--sp-border); border-radius: 9px; background: var(--sp-bg); }
.std-evidence strong { display: block; margin-bottom: 7px; color: var(--sp-text); font-size: 10px; }
.std-evidence span { display: block; margin-top: 3px; color: var(--sp-sub); font-size: 9px; }

.sd-dark .pw-segment.active { box-shadow: none; }
.sd-dark .pw-status__facts { background: rgba(8, 13, 24, .28); }
.sd-dark .pw-record__icon,
.sd-dark .pw-head-icon,
.sd-dark .pw-metric__icon,
.sd-dark .pw-empty__icon { box-shadow: none; }

@media (max-width: 1100px) {
    .pw-status { grid-template-columns: 44px minmax(0, 1fr); }
    .pw-status__side { grid-column: 1 / -1; margin-left: 58px; justify-content: space-between; }
    .pw-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .pw-card-head { align-items: flex-start; flex-direction: column; }
    .pw-card-tools { width: 100%; justify-content: space-between; }
    .pw-search { width: min(260px, 48vw); }
    .std-grid { grid-template-columns: 1fr; }
    .std-pdf { height: 520px; }
}

@media (max-width: 700px) {
    .pw-status { grid-template-columns: 40px minmax(0, 1fr); padding: 14px; }
    .pw-status__icon { width: 40px; height: 40px; }
    .pw-status__side { grid-column: 1 / -1; align-items: stretch; flex-direction: column; margin-left: 0; }
    .pw-status__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pw-status__facts div { min-width: 0; border-left: 1px solid var(--sp-border); }
    .pw-status__facts div:first-child { border-left: 0; }
    .pw-metrics { grid-template-columns: 1fr; gap: 10px; }
    .pw-metric { min-height: 118px; }
    .pw-card-tools { align-items: stretch; flex-direction: column; }
    .pw-segments { width: 100%; overflow-x: auto; }
    .pw-segment { flex: 1 0 auto; }
    .pw-search { width: 100%; }
    .pw-table-wrap { padding: 10px; overflow: visible; }
    .pw-table, .pw-table thead, .pw-table tbody, .pw-table tr, .pw-table td { display: block; width: 100%; }
    .pw-table colgroup, .pw-table thead { display: none; }
    .pw-table tbody { display: grid; gap: 10px; }
    .pw-table tbody tr { padding: 5px 12px; border: 1px solid var(--sp-border); border-radius: 10px; background: var(--sp-card); }
    .pw-table td { display: grid; grid-template-columns: 106px minmax(0, 1fr); gap: 10px; padding: 9px 0; text-align: left !important; }
    .pw-table td::before { color: var(--sp-muted); content: attr(data-label); font-size: 8px; font-weight: 750; letter-spacing: .045em; text-transform: uppercase; }
    .pw-table .pw-actions { justify-content: flex-start; }
    .std-info-grid, .std-evidence { grid-template-columns: 1fr; }
    .std-filebar { align-items: flex-start; flex-direction: column; }
    .std-pdf { height: 430px; }
}

@media (max-width: 430px) {
    .pw-status__facts { grid-template-columns: 1fr; }
    .pw-status__facts div, .pw-status__facts div:first-child { border-top: 1px solid var(--sp-border); border-left: 0; }
    .pw-status__facts div:first-child { border-top: 0; }
    .pw-table td { grid-template-columns: 1fr; gap: 5px; }
    .pw-actions { align-items: stretch; flex-direction: column; }
    .pw-action { width: 100%; }
}

/* resources/views/tenant/license/dashboard.blade.php — block 1 */
.seller-panel {
        background: #ffffff;
        padding: 35px 30px;
        border-radius: 18px;
        border: 1px solid #e6e8ef;
        box-shadow: 0 6px 20px rgba(0,0,0,0.04);
        font-family: "Inter", sans-serif;
    }

    .seller-title {
        font-size: 26px;
        font-weight: 800;
        margin-bottom: 10px;
        color: #111;
        font-family: "Inter", sans-serif;
    }

    .seller-sub {
        color: #555;
        font-size: 14px;
        margin-bottom: 20px;
    }

    .seller-section-box {
        background: #fff;
        padding: 25px;
        border-radius: 14px;
        border: 1px solid #e1e3ef;
        box-shadow: 0 4px 12px rgba(0,0,0,0.04);
        font-family: "Inter", sans-serif;
        margin-top: 20px;
    }

/* resources/views/tenant/license/payment.blade.php — block 1 */
.custom-scroll::-webkit-scrollbar {
        width: 6px;
    }
    .custom-scroll::-webkit-scrollbar-track {
        background: rgba(0,0,0,0.05);
        border-radius: 3px;
    }
    .sd-dark .custom-scroll::-webkit-scrollbar-track {
        background: rgba(255,255,255,0.05);
    }
    .custom-scroll::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.15);
        border-radius: 3px;
    }
    .sd-dark .custom-scroll::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,0.2);
    }
    .custom-scroll::-webkit-scrollbar-thumb:hover {
        background: rgba(0,0,0,0.25);
    }
    .sd-dark .custom-scroll::-webkit-scrollbar-thumb:hover {
        background: rgba(255,255,255,0.3);
    }
    
    .gradient-text {
        background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    
    /* Light Mode (Default) - Clean White */
    .payment-bg {
        background: #ffffff;
    }
    
    /* Dark Mode */
    .sd-dark .payment-bg {
        background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
    }
    
    /* Glass Card - Light Mode */
    .glass-card {
        background: #ffffff;
        border: 1px solid #e5e7eb;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    }
    /* Glass Card - Dark Mode */
    .sd-dark .glass-card {
        background: rgba(30, 41, 59, 0.9);
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    }
    
    @keyframes spin {
        to { transform: rotate(360deg); }
    }
    .animate-spin {
        animation: spin 1s linear infinite;
    }
    
    /* Document Styling - Light Mode (Default) */
    .doc-content h3 {
        color: #2563eb;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 0.75rem;
        letter-spacing: 0.05em;
        margin-top: 1.5rem;
        margin-bottom: 0.75rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid rgba(37, 99, 235, 0.3);
        display: inline-block;
    }
    .doc-content h4 {
        color: #111827;
        font-weight: 600;
        font-size: 0.875rem;
        margin-top: 1.25rem;
        margin-bottom: 0.5rem;
    }
    .doc-content p {
        margin-bottom: 0.75rem;
        color: #1f2937;
        line-height: 1.6;
        text-align: justify;
    }
    .doc-content ul {
        list-style-type: disc;
        padding-left: 1.5rem;
        margin-bottom: 0.75rem;
        color: #1f2937;
    }
    .doc-content li {
        margin-bottom: 0.25rem;
    }
    
    /* Document Styling - Dark Mode */
    .sd-dark .doc-content h3 {
        color: #60a5fa;
        border-bottom-color: rgba(96, 165, 250, 0.3);
    }
    .sd-dark .doc-content h4 {
        color: #f3f4f6;
    }
    .sd-dark .doc-content p {
        color: #d1d5db;
    }
    .sd-dark .doc-content ul {
        color: #d1d5db;
    }
    
    /* Text colors - Light: Black/Blue, Dark: White/Blue */
    .text-adaptive-heading { color: #111827; }
    .sd-dark .text-adaptive-heading { color: #ffffff; }
    
    .text-adaptive { color: #374151; }
    .sd-dark .text-adaptive { color: #d1d5db; }
    
    .text-adaptive-subtle { color: #6b7280; }
    .sd-dark .text-adaptive-subtle { color: #9ca3af; }
    
    .text-adaptive-strong { color: #111827; }
    .sd-dark .text-adaptive-strong { color: #f9fafb; }
    
    .text-blue { color: #2563eb; }
    .sd-dark .text-blue { color: #60a5fa; }
    
    /* Background adaptive */
    .bg-adaptive-header {
        background: #ffffff;
        border-bottom: 1px solid #e5e7eb;
    }
    .sd-dark .bg-adaptive-header {
        background: linear-gradient(to right, #1e293b, #0f172a);
        border-bottom: 1px solid #334155;
    }
    
    .bg-adaptive-body {
        background: #ffffff;
    }
    .sd-dark .bg-adaptive-body {
        background: rgba(15, 23, 42, 0.3);
    }
    
    .bg-adaptive-muted {
        background: #f9fafb;
        border: 1px solid #e5e7eb;
    }
    .sd-dark .bg-adaptive-muted {
        background: rgba(30, 41, 59, 0.5);
        border: 1px solid #334155;
    }
    
    .border-adaptive {
        border-color: #e5e7eb;
    }
    .sd-dark .border-adaptive {
        border-color: #334155;
    }
    
    /* Icon container */
    .icon-container {
        background: rgba(37, 99, 235, 0.1);
    }
    .sd-dark .icon-container {
        background: rgba(96, 165, 250, 0.2);
    }
    
    /* Payment element container */
    .payment-element-container {
        background: #ffffff;
        border: 1px solid #e5e7eb;
    }
    .sd-dark .payment-element-container {
        background: #1e293b;
        border: 1px solid #334155;
    }

/* resources/views/tenant/license/payment.blade.php — block 2 */
.cn-pay-card {
    background: linear-gradient(160deg, #0f172a 0%, #1e1b4b 55%, #0b1530 100%);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 25px 60px -15px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.04);
    color: #e5e7eb;
}
.cn-pay-heading { color: #ffffff; }
.cn-pay-text { color: #cbd5e1; }
.cn-pay-strong { color: #ffffff; }
.cn-pay-subtle { color: #94a3b8; }

.cn-pay-amount {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
}
.cn-pay-amount-value {
    background: linear-gradient(135deg, #818cf8 0%, #22d3ee 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cn-pay-row { border-bottom: 1px solid rgba(255,255,255,0.07); }
.cn-pay-divider { border-top: 1px solid rgba(255,255,255,0.08); }

.cn-pay-alert {
    background: rgba(99,102,241,0.10);
    border: 1px solid rgba(99,102,241,0.25);
}

.cn-pay-loading {
    background: rgba(255,255,255,0.04);
    border: 1px dashed rgba(255,255,255,0.15);
}

/* Stripe Payment Element wrapper — give it room to breathe on dark bg */
#payment-element {
    background: #ffffff;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    padding: 14px;
}

/* resources/views/tenant/license/payment.blade.php — block 3 */
.animate-fade-in-up {
    animation: fadeInUp 0.3s ease-out;
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* resources/views/tenant/seller-settlements/index.blade.php — block 1 */
/* ============================ SETTLEMENTS PAGE — v2 ============================ */
:root {
    --sts-accent: #6366f1;
    --sts-card:   #ffffff;
    --sts-bg:     #f7f8fb;
    --sts-border: #e6e8ef;
    --sts-soft:   #eef0f5;
    --sts-text:   #0f172a;
    --sts-sub:    #5b6478;
    --sts-muted:  #98a0b3;
}
.sd-dark {
    --sts-card:   #131a2e;
    --sts-bg:     #0b1020;
    --sts-border: #1f2945;
    --sts-soft:   #1a2238;
    --sts-text:   #f1f5f9;
    --sts-sub:    #94a3b8;
    --sts-muted:  #6b7587;
}

/* Hero */
.sts-hero {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; flex-wrap: wrap;
    padding: 22px 26px;
    border-radius: 16px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    color: #fff;
    box-shadow: 0 12px 30px -12px rgba(139,92,246,0.55);
    margin-bottom: 18px;
    position: relative; overflow: hidden;
}
.sts-hero::before {
    content: ""; position: absolute; right: -40px; top: -60px;
    width: 220px; height: 220px; border-radius: 50%;
    background: rgba(255,255,255,0.10);
}
.sts-hero-left { position: relative; z-index: 1; flex: 1; min-width: 250px; }
.sts-hero-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; opacity: 0.85; }
.sts-hero-title { font-size: 22px; font-weight: 800; letter-spacing: -0.4px; margin: 6px 0; line-height: 1.2; }
.sts-hero-sub { font-size: 13.5px; opacity: 0.92; margin: 0; max-width: 560px; line-height: 1.5; }
.sts-hero-stats { display: flex; gap: 12px; position: relative; z-index: 1; }
.sts-hero-stat {
    background: rgba(255,255,255,0.16); backdrop-filter: blur(6px);
    padding: 14px 18px; border-radius: 12px; min-width: 120px;
    display: flex; flex-direction: column; align-items: center;
    border: 1px solid rgba(255,255,255,0.18);
}
.sts-hero-stat-val { font-size: 26px; font-weight: 800; line-height: 1.1; }
.sts-hero-stat-lbl { font-size: 11px; opacity: 0.92; margin-top: 2px; text-transform: uppercase; letter-spacing: 0.6px; }
@media (max-width: 640px) { .sts-hero { padding: 18px; } .sts-hero-title { font-size: 18px; } .sts-hero-stat { min-width: 100px; padding: 10px 14px; } }

/* Stats */
.sts-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
@media (max-width: 1100px) { .sts-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .sts-stats { grid-template-columns: 1fr; } }
.sts-stat {
    display: flex; align-items: center; gap: 14px;
    background: var(--sts-card);
    border: 1px solid var(--sts-border);
    border-radius: 14px;
    padding: 16px 18px;
}
.sts-stat-icon {
    width: 44px; height: 44px;
    border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; flex-shrink: 0;
}
.sts-icon-indigo { background: rgba(99,102,241,0.12);  color: #6366f1; }
.sts-icon-green  { background: rgba(16,185,129,0.12);  color: #10b981; }
.sts-icon-amber  { background: rgba(245,158,11,0.12);  color: #f59e0b; }
.sts-icon-purple { background: rgba(139,92,246,0.12);  color: #8b5cf6; }
.sts-icon-red    { background: rgba(239,68,68,0.12);   color: #ef4444; }
.sts-icon-slate  { background: rgba(100,116,139,0.12); color: #64748b; }
.sts-stat-body { display: flex; flex-direction: column; min-width: 0; }
.sts-stat-lbl  { font-size: 12px; color: var(--sts-sub); font-weight: 500; }
.sts-stat-val  { font-size: 22px; font-weight: 800; color: var(--sts-text); letter-spacing: -0.3px; }

/* Filter tabs */
.sts-tabs {
    display: flex; gap: 6px;
    background: var(--sts-card);
    border: 1px solid var(--sts-border);
    border-radius: 12px;
    padding: 6px;
    margin-bottom: 14px;
    overflow-x: auto;
}
.sts-tab {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 16px;
    border-radius: 9px;
    border: none;
    background: transparent;
    color: var(--sts-sub);
    font-size: 13px; font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background-color .15s, color .15s;
}
.sts-tab:hover { background: var(--sts-bg); color: var(--sts-text); }
.sts-tab.active { background: var(--sts-accent); color: #fff; }
.sts-tab.active .sts-tab-count { background: rgba(255,255,255,0.22); color: #fff; }
.sts-tab-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; padding: 1px 7px;
    background: var(--sts-soft);
    border-radius: 999px;
    font-size: 11px; font-weight: 700;
    color: var(--sts-sub);
    line-height: 1;
}

/* Card */
.sts-card {
    background: var(--sts-card);
    border: 1px solid var(--sts-border);
    border-radius: 14px;
    overflow: hidden;
}
.sts-card-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--sts-soft);
    flex-wrap: wrap;
}
.sts-card-head-l { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sts-card-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; flex-shrink: 0;
}
.sts-card-title { margin: 0; font-size: 15px; font-weight: 700; color: var(--sts-text); line-height: 1.2; }
.sts-card-sub   { font-size: 12px; color: var(--sts-muted); }

.sts-card-body { padding: 20px; }
.sts-card-body-flush { padding: 0; }

/* Search */
.sts-search {
    display: flex; align-items: center; gap: 8px;
    background: var(--sts-bg);
    border: 1px solid var(--sts-border);
    border-radius: 10px;
    padding: 6px 12px;
    min-width: 230px;
}
.sts-search i { color: var(--sts-muted); font-size: 18px; }
.sts-search input {
    flex: 1;
    background: transparent;
    border: none; outline: none;
    color: var(--sts-text);
    font-size: 13px;
    font-family: inherit;
    padding: 4px 0;
}
.sts-search input::placeholder { color: var(--sts-muted); }
@media (max-width: 640px) { .sts-search { min-width: 0; width: 100%; } }

/* Pills */
.sts-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 11.5px; font-weight: 700;
    line-height: 1; white-space: nowrap;
}
.sts-pill i { font-size: 14px; }
.sts-pill-success-soft { background: rgba(16,185,129,0.12); color: #059669; }
.sd-dark .sts-pill-success-soft { color: #34d399; }
.sts-pill-warning { background: rgba(245,158,11,0.15); color: #b45309; }
.sd-dark .sts-pill-warning { color: #fbbf24; }
.sts-pill-danger  { background: rgba(239,68,68,0.12); color: #b91c1c; }
.sd-dark .sts-pill-danger { color: #fca5a5; }
.sts-pill-neutral { background: rgba(100,116,139,0.12); color: #475569; }
.sd-dark .sts-pill-neutral { color: #cbd5e1; }
.sts-pill-info    { background: rgba(99,102,241,0.12); color: #4f46e5; }
.sd-dark .sts-pill-info { color: #a5b4fc; }

.sts-tag {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 7px;
    font-size: 11.5px; font-weight: 600;
}
.sts-tag i { font-size: 14px; }
.sts-tag-indigo { background: rgba(99,102,241,0.12); color: #4f46e5; }
.sd-dark .sts-tag-indigo { color: #a5b4fc; }

/* Buttons */
.sts-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 16px;
    border-radius: 9px;
    font-size: 13px; font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer; font-family: inherit;
    text-decoration: none;
    line-height: 1;
    transition: background-color .15s, transform .1s;
}
.sts-btn i { font-size: 16px; }
.sts-btn:active { transform: translateY(1px); }
.sts-btn-primary { background: var(--sts-accent); color: #fff; }
.sts-btn-primary:hover { background: #4f46e5; }
.sts-btn-sm { padding: 6px 12px; font-size: 12px; }

/* Table */
.sts-table-wrap { overflow-x: auto; }
.sts-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.sts-table thead th {
    text-align: left;
    padding: 12px 18px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--sts-muted);
    background: var(--sts-bg);
    border-bottom: 1px solid var(--sts-soft);
    white-space: nowrap;
}
.sts-table tbody td {
    padding: 14px 18px;
    color: var(--sts-text);
    border-bottom: 1px solid var(--sts-soft);
    vertical-align: middle;
}
.sts-table tbody tr:last-child td { border-bottom: none; }
.sts-table tbody tr:hover td { background: var(--sts-bg); }
.sts-th-right { text-align: right; }

.sts-id-cell { display: flex; flex-direction: column; gap: 2px; line-height: 1.2; }
.sts-id      { font-weight: 700; color: var(--sts-text); font-size: 13.5px; }
.sts-uid     { font-size: 11px; color: var(--sts-muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.sts-amount  { font-weight: 800; color: var(--sts-text); font-size: 14px; }
.sts-date    { color: var(--sts-sub); font-size: 12.5px; }

/* Empty */
.sts-empty-inline {
    padding: 56px 24px;
    text-align: center;
}
.sts-empty-inline i { font-size: 44px; color: var(--sts-muted); margin-bottom: 8px; display: block; }
.sts-empty-inline h4 { font-size: 15px; font-weight: 700; color: var(--sts-text); margin: 0 0 4px; }
.sts-empty-inline p  { font-size: 13px; color: var(--sts-sub); margin: 0 auto; max-width: 420px; line-height: 1.5; }

/* Responsive — table to cards */
@media (max-width: 900px) {
    .sts-table thead { display: none; }
    .sts-table tr {
        display: block;
        background: var(--sts-card);
        border-bottom: 1px solid var(--sts-soft);
        padding: 12px 16px;
    }
    .sts-table tr:hover td { background: transparent; }
    .sts-table td {
        display: flex; justify-content: space-between; align-items: center;
        padding: 6px 0;
        border: none !important;
        gap: 12px;
    }
    .sts-table td::before {
        content: attr(data-label);
        font-weight: 700;
        color: var(--sts-muted);
        font-size: 11px;
        letter-spacing: 0.7px;
        text-transform: uppercase;
    }
    .sts-th-right { text-align: left; }
}

/* resources/views/tenant/seller/app/index.blade.php — block 1 */
/* ============================ SELLER ANDROID APP PAGE ============================ */
:root {
    --apx-card:   #ffffff;
    --apx-border: #e6e8ef;
    --apx-soft:   #eef0f5;
    --apx-text:   #0f172a;
    --apx-sub:    #5b6478;
    --apx-muted:  #98a0b3;
}
.sd-dark {
    --apx-card:   #131a2e;
    --apx-border: #1f2945;
    --apx-soft:   #1a2238;
    --apx-text:   #f1f5f9;
    --apx-sub:    #94a3b8;
    --apx-muted:  #6b7587;
}

/* Hero */
.apx-hero {
    display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
    padding: 24px 26px;
    border-radius: 16px;
    background: linear-gradient(135deg, #059669 0%, #0d9488 100%);
    color: #fff;
    box-shadow: 0 12px 30px -12px rgba(5,150,105,0.55);
    margin-bottom: 18px;
    position: relative; overflow: hidden;
}
.apx-hero::before {
    content: ""; position: absolute; right: -40px; top: -60px;
    width: 220px; height: 220px; border-radius: 50%;
    background: rgba(255,255,255,0.10);
}
.apx-hero-icon {
    width: 78px; height: 78px;
    border-radius: 22px;
    background: rgba(255,255,255,0.20);
    border: 3px solid rgba(255,255,255,0.30);
    display: flex; align-items: center; justify-content: center;
    font-size: 42px;
    flex-shrink: 0;
    position: relative; z-index: 1;
    backdrop-filter: blur(6px);
}
.apx-hero-body { flex: 1; min-width: 260px; position: relative; z-index: 1; }
.apx-hero-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; opacity: 0.85; }
.apx-hero-title { font-size: 22px; font-weight: 800; letter-spacing: -0.4px; margin: 6px 0; line-height: 1.2; }
.apx-hero-text { font-size: 13.5px; line-height: 1.6; opacity: 0.92; margin: 0 0 10px; max-width: 62ch; }
.apx-hero-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    font-size: 12.5px; opacity: 0.92;
}
.apx-hero-meta i { margin-right: 4px; }
.apx-dot { opacity: 0.5; }
.apx-hero-cta { position: relative; z-index: 1; }

@media (max-width: 640px) {
    .apx-hero { padding: 20px; }
    .apx-hero-icon { width: 60px; height: 60px; font-size: 32px; border-radius: 18px; }
    .apx-hero-title { font-size: 18px; }
    .apx-hero-cta, .apx-hero-cta .apx-btn { width: 100%; }
}

/* Buttons */
.apx-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 20px;
    border-radius: 11px;
    font-size: 14px; font-weight: 700;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s, background-color .15s;
    white-space: nowrap;
}
.apx-btn i { font-size: 19px; }
.apx-btn-sm { padding: 9px 15px; font-size: 13px; }
.apx-btn-light { background: #fff; color: #047857; box-shadow: 0 8px 20px -8px rgba(0,0,0,0.45); }
.apx-btn-light:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -8px rgba(0,0,0,0.5); }
.apx-btn-primary { background: linear-gradient(135deg, #10b981, #059669); color: #fff; box-shadow: 0 8px 18px -8px rgba(16,185,129,0.9); }
.apx-btn-primary:hover { transform: translateY(-1px); }
.apx-btn-block { display: flex; width: 100%; margin-top: 18px; }

/* Empty state */
.apx-empty {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 16px 18px;
    border-radius: 12px;
    background: rgba(245,158,11,0.10);
    border: 1px solid rgba(245,158,11,0.30);
    color: #b45309;
    margin-bottom: 18px;
    font-size: 13px;
}
.sd-dark .apx-empty { color: #fcd34d; }
.apx-empty i { font-size: 20px; flex-shrink: 0; }
.apx-empty strong { display: block; margin-bottom: 2px; }

/* Grid — two balanced columns that collapse to one on narrow screens */
.apx-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: start;
}
.apx-col {
    display: grid;
    gap: 18px;
    align-content: start;
}
/* Single column: drop the column wrappers so the install steps come before the FAQ,
   which is what someone reading this on their phone actually needs first. */
@media (max-width: 1000px) {
    .apx-grid { grid-template-columns: 1fr; }
    .apx-col  { display: contents; }
    .apx-card-features { order: 1; }
    .apx-card-install  { order: 2; }
    .apx-card-faq      { order: 3; }
}

/* Card */
.apx-card {
    background: var(--apx-card);
    border: 1px solid var(--apx-border);
    border-radius: 14px;
    overflow: hidden;
}
.apx-card-head {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--apx-soft);
}
.apx-card-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; flex-shrink: 0;
}
.apx-icon-green  { background: rgba(16,185,129,0.12); color: #10b981; }
.apx-icon-indigo { background: rgba(99,102,241,0.12); color: #6366f1; }
.apx-icon-amber  { background: rgba(245,158,11,0.12); color: #f59e0b; }
.apx-icon-purple { background: rgba(139,92,246,0.12); color: #8b5cf6; }
.apx-card-title { font-size: 15px; font-weight: 700; color: var(--apx-text); margin: 0 0 2px; }
.apx-card-sub   { font-size: 12px; color: var(--apx-muted); }
.apx-card-body  { padding: 18px 20px; }

/* Feature rows */
.apx-feature {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--apx-soft);
}
.apx-feature:first-child { padding-top: 0; }
.apx-feature:last-child  { border-bottom: none; padding-bottom: 0; }
.apx-feature-ico {
    width: 34px; height: 34px;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0;
}
.apx-feature strong { display: block; font-size: 13.5px; font-weight: 700; color: var(--apx-text); margin-bottom: 2px; }
.apx-feature span   { font-size: 12.5px; color: var(--apx-sub); line-height: 1.55; }

/* Steps */
.apx-steps { list-style: none; margin: 0; padding: 0; }
.apx-steps li { display: flex; align-items: flex-start; gap: 12px; padding-bottom: 16px; }
.apx-steps li:last-child { padding-bottom: 0; }
.apx-step-n {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: rgba(16,185,129,0.12);
    color: #059669;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800;
    flex-shrink: 0;
}
.sd-dark .apx-step-n { color: #34d399; }
.apx-steps strong { display: block; font-size: 13.5px; font-weight: 700; color: var(--apx-text); margin-bottom: 2px; }
.apx-steps span   { font-size: 12.5px; color: var(--apx-sub); line-height: 1.55; }

/* QR block */
.apx-qr {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    margin-top: 14px;
    padding: 16px;
    border-radius: 12px;
    background: var(--apx-soft);
    border: 1px solid var(--apx-border);
}
.apx-qr-img {
    width: 110px; height: 110px;
    border-radius: 10px;
    background: #fff;
    padding: 8px;
    flex-shrink: 0;
}
.apx-qr-text { flex: 1; min-width: 180px; }
.apx-qr-text strong { display: block; font-size: 13.5px; font-weight: 700; color: var(--apx-text); margin-bottom: 3px; }
.apx-qr-text span   { display: block; font-size: 12.5px; color: var(--apx-sub); line-height: 1.55; }

/* FAQ */
.apx-faq {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: 18px;
}
.apx-faq-item strong {
    display: flex; align-items: center; gap: 7px;
    font-size: 13.5px; font-weight: 700;
    color: var(--apx-text);
    margin-bottom: 5px;
}
.apx-faq-item strong i { font-size: 17px; color: #10b981; }
.apx-faq-item span { font-size: 12.5px; color: var(--apx-sub); line-height: 1.6; }
.apx-faq-item a { color: #10b981; font-weight: 600; text-decoration: none; }
.apx-faq-item a:hover { text-decoration: underline; }

/* resources/views/tenant/seller/billing/index.blade.php — block 1 */
.bm-page { padding: 8px 0; font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; }

.bm-hero {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: #fff;
    padding: 24px 28px;
    border-radius: 16px;
    margin-bottom: 22px;
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 16px;
}
.bm-hero h1 { margin: 0 0 4px; font-size: 22px; font-weight: 800; }
.bm-hero p { margin: 0; opacity: 0.9; font-size: 14px; }

.bm-stats { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 22px; }
@media (min-width: 640px) { .bm-stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .bm-stats { grid-template-columns: repeat(4, 1fr); } }

.bm-stat {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
    padding: 18px 20px;
    position: relative; overflow: hidden;
    transition: all 0.2s;
}
.bm-stat:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,0.06); }
.bm-stat::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.bm-stat.amber::after  { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.bm-stat.green::after  { background: linear-gradient(90deg, #10b981, #34d399); }
.bm-stat.blue::after   { background: linear-gradient(90deg, #3b82f6, #06b6d4); }
.bm-stat.purple::after { background: linear-gradient(90deg, #6366f1, #8b5cf6); }
.bm-stat-label { font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.bm-stat-value { font-size: 22px; font-weight: 800; color: #0f172a; line-height: 1.1; font-variant-numeric: tabular-nums; }
.bm-stat-meta  { font-size: 11px; color: #94a3b8; margin-top: 4px; }

.bm-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; overflow: hidden; margin-bottom: 22px; }
.bm-card-head {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    padding: 14px 20px; border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
}
.bm-card-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; color: #0f172a; }
.bm-card-title i { color: #6366f1; font-size: 20px; }

.bm-filters { display: flex; gap: 4px; background: #f1f5f9; padding: 3px; border-radius: 10px; }
.bm-filter {
    padding: 7px 14px; border: none; background: transparent;
    color: #64748b; font-size: 12px; font-weight: 700;
    border-radius: 8px; cursor: pointer;
    font-family: inherit;
}
.bm-filter.active { background: #fff; color: #4f46e5; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }

.bm-scroll { overflow-x: auto; }
.bm-table { width: 100%; border-collapse: collapse; min-width: 880px; }
.bm-table thead { background: #f8fafc; border-bottom: 2px solid #e2e8f0; }
.bm-table th { padding: 12px 16px; text-align: left; font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; }
.bm-table th.num { text-align: right; }
.bm-table tbody tr { border-bottom: 1px solid #f1f5f9; transition: background 0.15s; }
.bm-table tbody tr:hover { background: #f8fafc; }
.bm-table tbody td { padding: 14px 16px; font-size: 13px; color: #334155; vertical-align: middle; }
.bm-table td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; color: #0f172a; }

.bm-kind {
    display: inline-block; padding: 3px 10px; border-radius: 6px;
    font-size: 10px; font-weight: 700; color: #fff;
    text-transform: uppercase; letter-spacing: 0.4px;
}
.bm-ref { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: #1e293b; font-weight: 600; }
.bm-status { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; }
.bm-status.paid       { background: #d1fae5; color: #065f46; }
.bm-status.pending    { background: #fef3c7; color: #92400e; }
.bm-status.processing { background: #dbeafe; color: #1d4ed8; }
.bm-status.failed,
.bm-status.cancelled  { background: #fee2e2; color: #991b1b; }

.bm-pay-group { display: inline-flex; flex-direction: column; gap: 6px; align-items: stretch; min-width: 130px; }
.bm-pay-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    color: #fff; padding: 7px 12px; border-radius: 7px;
    font-size: 12px; font-weight: 700; text-decoration: none;
    border: none; cursor: pointer;
    font-family: inherit;
    transition: all 0.15s; white-space: nowrap;
}
.bm-pay-btn.card { background: linear-gradient(135deg, #6366f1, #4f46e5); }
.bm-pay-btn.card:hover { transform: translateY(-1px); color: #fff; box-shadow: 0 4px 10px rgba(99,102,241,0.35); }
.bm-pay-btn.ach { background: linear-gradient(135deg, #10b981, #059669); }
.bm-pay-btn.ach:hover { transform: translateY(-1px); color: #fff; box-shadow: 0 4px 10px rgba(16,185,129,0.35); }

.bm-paid-label { color: #10b981; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; }
.bm-clear-label { color: #1d4ed8; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; }
.bm-await-label { color: #94a3b8; font-size: 11px; font-style: italic; }

.bm-empty { padding: 60px 20px; text-align: center; color: #94a3b8; }
.bm-empty i { font-size: 56px; color: #cbd5e1; display: block; margin-bottom: 10px; }
.bm-empty h3 { margin: 0 0 4px; color: #0f172a; font-size: 16px; font-weight: 700; }
.bm-empty p { margin: 0; font-size: 13px; }

.bm-alert { padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; font-size: 14px; }
.bm-alert.info { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
.bm-alert.success { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.bm-alert.error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

/* resources/views/tenant/seller/dashboard.blade.php — block 1 */
/* resources/views/tenant/seller/fixed_settlements/dashboard.blade.php — block 1 */
.sf-page { padding: 8px 0; }
.sf-hero {
    background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%);
    color: #fff; padding: 28px 32px; border-radius: 16px; margin-bottom: 24px;
}
.sf-hero h1 { margin: 0 0 4px; font-size: 22px; font-weight: 700; }
.sf-hero p { margin: 0; opacity: 0.9; font-size: 14px; }

.sf-stats { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 24px; }
@media (min-width: 768px) { .sf-stats { grid-template-columns: repeat(3, 1fr); } }

.sf-stat { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 22px; }
.sf-stat-label { font-size: 11px; color: #64748b; text-transform: uppercase; font-weight: 700; letter-spacing: 0.5px; margin-bottom: 10px; }
.sf-stat-value { font-size: 24px; font-weight: 700; color: #1e293b; }
.sf-stat-value.amber { color: #f59e0b; }
.sf-stat-value.green { color: #10b981; }

.sf-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 24px; margin-bottom: 20px; }
.sf-card h3 { margin: 0 0 16px; font-size: 16px; color: #1e293b; display: flex; align-items: center; gap: 8px; }
.sf-card .sf-sub { font-size: 13px; color: #64748b; margin: -12px 0 16px; }

.sf-license-pill {
    display: inline-flex; gap: 14px; padding: 10px 16px;
    background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; border-radius: 999px;
    font-size: 13px; font-weight: 600; margin-bottom: 14px;
}
.sf-license-pill strong { color: #1e3a8a; }

.sf-agreement-docs {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #6366f1;
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 20px;
}
.sf-agreement-docs h4 {
    margin: 0 0 10px;
    font-size: 13px;
    color: #475569;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.sf-agreement-docs h4 i { color: #6366f1; font-size: 16px; }
.sf-agreement-doc-link {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px;
    background: #fff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    margin-right: 8px;
    margin-bottom: 6px;
    transition: all 0.2s;
}
.sf-agreement-doc-link:hover {
    background: #eff6ff; color: #1e40af; transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(59,130,246,0.15);
}

.sf-product-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 600px) { .sf-product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .sf-product-grid { grid-template-columns: repeat(3, 1fr); } }

.sf-product {
    padding: 12px 14px; background: #f8fafc; border: 1px solid #e2e8f0;
    border-radius: 10px; font-size: 13px;
}
.sf-product strong { display: block; color: #1e293b; margin-bottom: 4px; line-height: 1.3; }
.sf-product small { color: #64748b; }

.sf-form-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 768px) { .sf-form-grid { grid-template-columns: repeat(2, 1fr); } }
.sf-form-full { grid-column: 1 / -1; }

.sf-form-group { display: flex; flex-direction: column; gap: 6px; }
.sf-form-group label { font-size: 13px; font-weight: 600; color: #475569; }
.sf-form-group .req { color: #ef4444; }
.sf-form-group input, .sf-form-group textarea {
    padding: 12px 14px; border: 2px solid #e2e8f0; border-radius: 10px; font-size: 14px;
    background: #fff;
}
.sf-form-group input:focus, .sf-form-group textarea:focus {
    outline: none; border-color: #6366f1; box-shadow: 0 0 0 4px rgba(99,102,241,0.1);
}
.sf-form-help { font-size: 12px; color: #64748b; }

.sf-net-line {
    background: #f1f5f9; border-radius: 10px; padding: 10px 14px;
    display: flex; justify-content: space-between; align-items: center;
    font-size: 13px; color: #475569; margin-top: 8px;
}
.sf-net-line strong { color: #1e293b; font-size: 16px; }

.sf-file-area { border: 2px dashed #cbd5e1; border-radius: 10px; padding: 16px; text-align: center; background: #f8fafc; cursor: pointer; display: block; }
.sf-file-area input { display: none; }
.sf-file-area i { font-size: 24px; color: #94a3b8; display: block; margin-bottom: 4px; }
.sf-file-area p { margin: 0; font-size: 13px; color: #64748b; }
.sf-preview { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-top: 10px; }
.sf-preview-item { padding: 8px 10px; background: #fff; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 11px; word-break: break-word; }

.sf-submit-btn {
    background: linear-gradient(135deg, #6366f1, #4f46e5); color: #fff;
    padding: 14px 28px; border: none; border-radius: 10px;
    font-size: 14px; font-weight: 600; cursor: pointer;
    box-shadow: 0 4px 12px rgba(99,102,241,0.3);
}
.sf-submit-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(99,102,241,0.4); }

.sf-payments-table { width: 100%; border-collapse: collapse; }
.sf-payments-table th { padding: 12px; text-align: left; font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
.sf-payments-table td { padding: 14px 12px; font-size: 13px; border-top: 1px solid #f1f5f9; color: #334155; vertical-align: middle; }
.sf-payments-table tbody tr:hover { background: #f8fafc; }

.sf-badge { display: inline-flex; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.sf-badge.pending { background: #fef3c7; color: #92400e; }
.sf-badge.processing { background: #dbeafe; color: #1d4ed8; }
.sf-badge.paid { background: #d1fae5; color: #065f46; }
.sf-badge.failed, .sf-badge.cancelled { background: #fee2e2; color: #991b1b; }

.sf-pay-group { display: inline-flex; flex-direction: column; gap: 6px; align-items: stretch; min-width: 140px; }
.sf-pay-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    color: #fff; padding: 8px 14px; border-radius: 8px;
    font-size: 12px; font-weight: 600; text-decoration: none;
    transition: all 0.2s; white-space: nowrap;
}
.sf-pay-btn.card { background: linear-gradient(135deg, #6366f1, #4f46e5); }
.sf-pay-btn.card:hover { transform: translateY(-1px); color: #fff; box-shadow: 0 4px 10px rgba(99,102,241,0.35); }
.sf-pay-btn.ach { background: linear-gradient(135deg, #10b981, #059669); }
.sf-pay-btn.ach:hover { transform: translateY(-1px); color: #fff; box-shadow: 0 4px 10px rgba(16,185,129,0.35); }

.sf-method-tag {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 6px; font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.4px;
}
.sf-method-tag.card { background: #ede9fe; color: #5b21b6; }
.sf-method-tag.ach { background: #d1fae5; color: #065f46; }

.sf-empty { text-align: center; padding: 30px 20px; color: #64748b; }
.sf-empty i { font-size: 42px; color: #cbd5e1; display: block; margin-bottom: 8px; }
.sf-empty p { margin: 0; font-size: 14px; }

.sf-alert { padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; font-size: 14px; }
.sf-alert.success { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.sf-alert.error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.sf-alert.info { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }

/* resources/views/tenant/seller/fixed_settlements/pay.blade.php — block 1 */
.pay-wrap { max-width: 560px; margin: 32px auto; padding: 0 16px; }

.pay-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
}

.pay-header {
    background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%);
    color: #fff;
    padding: 24px 28px;
}
.pay-header h1 { margin: 0 0 4px; font-size: 20px; font-weight: 700; }
.pay-header p { margin: 0; opacity: 0.9; font-size: 13px; }

.pay-body { padding: 28px; }

.pay-summary {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 24px;
}
.pay-summary-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; }
.pay-summary-row label { color: #64748b; }
.pay-summary-row span { color: #1e293b; font-weight: 600; }
.pay-summary-row.total { border-top: 1px solid #e2e8f0; margin-top: 8px; padding-top: 14px; }
.pay-summary-row.total span { font-size: 18px; color: #1e293b; }

.pay-ach-info {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 13px;
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
}
.pay-ach-info i { font-size: 18px; flex-shrink: 0; margin-top: 2px; }

#payment-element {
    background: #fff;
    padding: 4px 0;
    margin-bottom: 20px;
}

.pay-submit {
    width: 100%;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    border: none;
    padding: 14px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.pay-submit:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16,185,129,0.35);
}
.pay-submit:disabled { opacity: 0.6; cursor: not-allowed; }

.pay-cancel {
    display: block;
    text-align: center;
    margin-top: 12px;
    color: #64748b;
    text-decoration: none;
    font-size: 13px;
}
.pay-cancel:hover { color: #1e293b; }

#error-message {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    padding: 12px 14px;
    border-radius: 10px;
    margin-top: 12px;
    font-size: 13px;
}

.pay-secured {
    margin-top: 16px;
    text-align: center;
    color: #94a3b8;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

/* resources/views/tenant/seller/help/index.blade.php — block 1 */
:root{--hc-card:#fff;--hc-border:#e6e8ef;--hc-soft:#f4f6fa;--hc-text:#0f172a;--hc-sub:#5b6478;--hc-muted:#8a94a8;--hc-accent:#6366f1;--hc-shadow:0 10px 30px -22px rgba(15,23,42,.38)}
.sd-dark{--hc-card:#131a2e;--hc-border:#25304d;--hc-soft:#19223a;--hc-text:#f1f5f9;--hc-sub:#a4b1c6;--hc-muted:#738099;--hc-shadow:0 12px 34px -20px rgba(0,0,0,.65)}
.hc-wrap{max-width:1440px;margin:0 auto;color:var(--hc-text)}
.hc-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:34px;align-items:center;padding:34px 38px;border-radius:20px;overflow:hidden;color:#fff;background:linear-gradient(130deg,#4338ca 0%,#6366f1 52%,#0891b2 100%);box-shadow:0 18px 45px -22px rgba(79,70,229,.75)}
.hc-hero:before,.hc-hero:after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.09)}.hc-hero:before{width:320px;height:320px;right:-130px;top:-190px}.hc-hero:after{width:180px;height:180px;left:42%;bottom:-140px}
.hc-hero-main,.hc-status-card{position:relative;z-index:1}.hc-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1.4px;color:#dbeafe;margin-bottom:10px}.hc-eyebrow i{font-size:16px}.hc-hero h2{font-size:30px;line-height:1.16;letter-spacing:-.8px;margin:0 0 10px;color:#fff}.hc-hero p{max-width:760px;margin:0;color:#e0e7ff;font-size:14px;line-height:1.65}.hc-hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.hc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 15px;border-radius:10px;text-decoration:none;font-size:12.5px;font-weight:750;border:1px solid transparent;transition:.18s ease}.hc-btn:hover{transform:translateY(-1px)}.hc-btn-light{background:#fff;color:#4338ca;box-shadow:0 7px 18px -10px rgba(0,0,0,.5)}.hc-btn-ghost{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28);color:#fff}
.hc-status-card{padding:18px;border:1px solid rgba(255,255,255,.23);background:rgba(15,23,42,.18);backdrop-filter:blur(10px);border-radius:16px}.hc-status-top,.hc-status-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;font-size:11px;color:#dbeafe}.hc-status-top strong{font-size:15px;color:#fff}.hc-progress{height:7px;background:rgba(255,255,255,.18);border-radius:999px;overflow:hidden;margin:11px 0 17px}.hc-progress span{display:block;height:100%;border-radius:inherit;background:#fff}.hc-status-row{border-top:1px solid rgba(255,255,255,.16);padding-top:13px}.hc-status-row strong{text-align:right;color:#fff;font-size:11px}.hc-status-row strong.is-active{color:#86efac}
.hc-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:18px 0}.hc-search{height:46px;max-width:620px;flex:1;display:flex;align-items:center;gap:10px;padding:0 13px;background:var(--hc-card);border:1px solid var(--hc-border);border-radius:12px;box-shadow:var(--hc-shadow)}.hc-search:focus-within{border-color:var(--hc-accent);box-shadow:0 0 0 3px rgba(99,102,241,.11)}.hc-search i{font-size:20px;color:var(--hc-muted)}.hc-search input{border:0;outline:0;background:transparent;color:var(--hc-text);font:inherit;font-size:13px;flex:1;min-width:0}.hc-search input::placeholder{color:var(--hc-muted)}.hc-search kbd{font:700 9px Inter,sans-serif;color:var(--hc-muted);background:var(--hc-soft);border:1px solid var(--hc-border);border-radius:5px;padding:3px 6px}.hc-toolbar-actions{display:flex;gap:8px}.hc-tool-btn{height:42px;padding:0 12px;border:1px solid var(--hc-border);border-radius:10px;color:var(--hc-sub);background:var(--hc-card);font:700 11.5px Inter,sans-serif;cursor:pointer;display:flex;align-items:center;gap:7px}.hc-tool-btn:hover{color:var(--hc-accent);border-color:var(--hc-accent)}
.hc-no-results{padding:36px;text-align:center;background:var(--hc-card);border:1px dashed var(--hc-border);border-radius:14px;margin-bottom:18px}.hc-no-results i{display:block;font-size:35px;color:var(--hc-muted)}.hc-no-results strong,.hc-no-results span{display:block}.hc-no-results strong{margin:8px 0 3px}.hc-no-results span{font-size:12px;color:var(--hc-sub)}
.hc-quick-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}.hc-quick{display:flex;align-items:center;gap:11px;min-width:0;padding:14px;background:var(--hc-card);border:1px solid var(--hc-border);border-radius:13px;text-decoration:none;color:var(--hc-text);box-shadow:var(--hc-shadow);transition:.18s ease}.hc-quick:hover{transform:translateY(-2px);border-color:var(--qc)}.hc-quick>i:first-child{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--qc) 12%,transparent);color:var(--qc);font-size:20px;flex-shrink:0}.hc-quick>i:last-child{margin-left:auto;color:var(--hc-muted);font-size:19px}.hc-quick span{display:flex;flex-direction:column;min-width:0}.hc-quick strong{font-size:12.5px}.hc-quick small{font-size:10.5px;color:var(--hc-muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hc-quick-indigo{--qc:#6366f1}.hc-quick-cyan{--qc:#0891b2}.hc-quick-amber{--qc:#d97706}.hc-quick-green{--qc:#059669}
.hc-layout{display:grid;grid-template-columns:290px minmax(0,1fr);gap:18px;align-items:start}.hc-side{display:flex;flex-direction:column;gap:14px;position:sticky;top:90px}.hc-card{background:var(--hc-card);border:1px solid var(--hc-border);border-radius:15px;box-shadow:var(--hc-shadow)}.hc-card-head{display:flex;gap:11px;align-items:center;padding:16px;border-bottom:1px solid var(--hc-border)}.hc-card-head h3,.hc-card h3{margin:0;font-size:13px;color:var(--hc-text)}.hc-card-head p{margin:2px 0 0;font-size:10.5px;color:var(--hc-muted)}.hc-card-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(99,102,241,.11);color:var(--hc-accent);font-size:20px}.hc-check-list{padding:8px}.hc-check{display:flex;gap:10px;padding:9px 8px}.hc-check-icon{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--hc-soft);color:var(--hc-muted);font-size:14px;flex-shrink:0}.hc-check.complete .hc-check-icon{background:#dcfce7;color:#15803d}.sd-dark .hc-check.complete .hc-check-icon{background:rgba(34,197,94,.15);color:#86efac}.hc-check div{display:flex;flex-direction:column;min-width:0}.hc-check strong{font-size:11px}.hc-check small{font-size:9.8px;line-height:1.4;color:var(--hc-muted);margin-top:2px}.hc-card-link{display:flex;align-items:center;justify-content:space-between;padding:11px 15px;border-top:1px solid var(--hc-border);font-size:11px;font-weight:750;color:var(--hc-accent);text-decoration:none}
.hc-contents{padding:14px}.hc-contents h3{margin:1px 6px 9px}.hc-contents a{display:flex;align-items:center;gap:9px;padding:7px 6px;border-radius:7px;text-decoration:none;color:var(--hc-sub);font-size:10.8px}.hc-contents a:hover{background:var(--hc-soft);color:var(--hc-accent)}.hc-contents a span{font-size:8.5px;font-weight:800;color:var(--hc-muted)}.hc-account-stats{padding:14px}.hc-account-stats h3{margin-bottom:9px}.hc-account-stats div{display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--hc-border);padding:8px 0;font-size:10.5px;color:var(--hc-sub)}.hc-account-stats strong{color:var(--hc-text)}
.hc-guides{min-width:0}.hc-section-title{margin:3px 2px 13px}.hc-section-title span{font-size:9.5px;color:var(--hc-accent);font-weight:800;text-transform:uppercase;letter-spacing:1px}.hc-section-title h2{margin:3px 0;font-size:21px;letter-spacing:-.4px}.hc-section-title p{margin:0;color:var(--hc-muted);font-size:11.5px}.hc-guide{background:var(--hc-card);border:1px solid var(--hc-border);border-radius:15px;margin-bottom:11px;box-shadow:var(--hc-shadow);scroll-margin-top:92px;overflow:hidden}.hc-guide[open]{border-color:color-mix(in srgb,var(--hc-accent) 32%,var(--hc-border))}.hc-guide summary{list-style:none;display:flex;align-items:center;gap:13px;padding:15px 17px;cursor:pointer;user-select:none}.hc-guide summary::-webkit-details-marker{display:none}.hc-guide summary:hover{background:var(--hc-soft)}.hc-guide-num{width:34px;height:34px;border-radius:10px;background:rgba(99,102,241,.1);color:var(--hc-accent);font-size:10px;font-weight:850;display:flex;align-items:center;justify-content:center;flex-shrink:0}.hc-guide-title{display:flex;flex-direction:column;min-width:0;flex:1}.hc-guide-title strong{font-size:13px}.hc-guide-title small{font-size:10.5px;color:var(--hc-muted);margin-top:3px}.hc-guide-time{font-size:9.5px;color:var(--hc-muted);white-space:nowrap;display:flex;align-items:center;gap:4px}.hc-chevron{font-size:21px;color:var(--hc-muted);transition:transform .2s}.hc-guide[open] .hc-chevron{transform:rotate(180deg)}.hc-guide-body{padding:5px 18px 19px;border-top:1px solid var(--hc-border)}
.hc-steps{list-style:none;padding:0;margin:12px 0}.hc-steps li{display:grid;grid-template-columns:28px 1fr;gap:11px;position:relative;padding:6px 0 12px}.hc-steps li:not(:last-child):before{content:"";position:absolute;left:13px;top:35px;bottom:-3px;width:1px;background:var(--hc-border)}.hc-steps li>span{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--hc-soft);border:1px solid var(--hc-border);color:var(--hc-accent);font-size:10px;font-weight:850;z-index:1}.hc-steps strong{font-size:11.5px}.hc-steps p{font-size:10.8px;line-height:1.55;color:var(--hc-sub);margin:3px 0 0}.hc-steps a,.hc-mini-card a{color:var(--hc-accent);font-weight:700}.hc-tip,.hc-warning{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;border-radius:10px;background:#eef2ff;color:#3730a3}.sd-dark .hc-tip{background:rgba(99,102,241,.13);color:#c7d2fe}.hc-tip>i,.hc-warning>i{font-size:19px;flex-shrink:0}.hc-tip strong,.hc-warning strong{font-size:10.8px}.hc-tip p,.hc-warning p{font-size:10.4px;margin:2px 0 0;line-height:1.45;color:inherit}.hc-warning{background:#fff7ed;color:#9a3412}.sd-dark .hc-warning{background:rgba(249,115,22,.13);color:#fdba74}.hc-warning.soft{background:#eff6ff;color:#1d4ed8}.sd-dark .hc-warning.soft{background:rgba(59,130,246,.13);color:#93c5fd}.hc-definition{display:flex;align-items:center;gap:12px;margin:13px 0 6px;padding:11px 12px;border:1px solid #fed7aa;background:#fff7ed;border-radius:10px}.sd-dark .hc-definition{border-color:rgba(249,115,22,.28);background:rgba(249,115,22,.1)}.hc-definition strong{font-size:11px;color:#c2410c;white-space:nowrap}.hc-definition span{font-size:10.5px;color:var(--hc-sub)}.hc-definition.green{border-color:#bbf7d0;background:#f0fdf4}.sd-dark .hc-definition.green{border-color:rgba(34,197,94,.28);background:rgba(34,197,94,.1)}.hc-definition.green strong{color:#15803d}.sd-dark .hc-definition.green strong{color:#86efac}.hc-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.hc-inline-btn{display:inline-flex;padding:8px 11px;border-radius:8px;background:var(--hc-accent);color:#fff;text-decoration:none;font-size:10.5px;font-weight:750}.hc-inline-btn.secondary{color:var(--hc-accent);background:var(--hc-soft);border:1px solid var(--hc-border)}.hc-two-col{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:13px 0}.hc-mini-card{padding:13px;border:1px solid var(--hc-border);border-radius:11px;background:var(--hc-soft)}.hc-mini-card>i{font-size:21px;color:var(--hc-accent);display:block;margin-bottom:6px}.hc-mini-card strong{display:block;font-size:11px}.hc-mini-card p{font-size:10.3px;color:var(--hc-sub);line-height:1.5;margin:4px 0 0}
.hc-support{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:16px;padding:24px 26px;border-radius:16px;color:#fff;background:linear-gradient(130deg,#0f766e,#0891b2)}.hc-support span{font-size:9.5px;text-transform:uppercase;letter-spacing:1px;font-weight:800;color:#a5f3fc}.hc-support h2{margin:3px 0;font-size:20px}.hc-support p{margin:0;font-size:11px;color:#cffafe}
@media(max-width:1100px){.hc-hero{grid-template-columns:1fr 300px}.hc-layout{grid-template-columns:250px 1fr}.hc-quick-grid{grid-template-columns:1fr 1fr}}
@media(max-width:820px){.hc-hero{grid-template-columns:1fr;padding:26px}.hc-status-card{max-width:440px}.hc-layout{grid-template-columns:1fr}.hc-side{position:static;display:grid;grid-template-columns:1fr 1fr}.hc-contents{display:none}.hc-account-stats{grid-column:2}.hc-checklist{grid-row:span 2}.hc-toolbar{align-items:stretch;flex-direction:column}.hc-search{max-width:none}.hc-toolbar-actions{justify-content:flex-end}}
@media(max-width:560px){.hc-hero{padding:22px 18px}.hc-hero h2{font-size:24px}.hc-quick-grid,.hc-side,.hc-two-col{grid-template-columns:1fr}.hc-account-stats{grid-column:auto}.hc-search kbd,.hc-guide-time{display:none}.hc-guide summary{padding:13px 12px;gap:9px}.hc-guide-title strong{font-size:12px}.hc-guide-body{padding:4px 13px 16px}.hc-definition{align-items:flex-start;flex-direction:column;gap:3px}.hc-support{align-items:flex-start;flex-direction:column;padding:21px}.hc-toolbar-actions{justify-content:stretch}.hc-tool-btn{flex:1;justify-content:center}}
@media print{.sp-sidebar,.sp-header,.sp-footer,.hc-toolbar,.hc-quick-grid,.hc-side,.hc-hero-actions,.hc-actions,.hc-support{display:none!important}.sp-main{margin-left:0!important}.sp-content{padding:0!important}.hc-hero{display:block;background:#fff;color:#000;border:1px solid #ccc;box-shadow:none;padding:20px}.hc-hero h2,.hc-hero p{color:#000}.hc-status-card{display:none}.hc-layout{display:block}.hc-guide{break-inside:avoid;box-shadow:none}.hc-guide:not([open])>.hc-guide-body{display:block}.hc-guide summary{background:#f5f5f5}.hc-chevron{display:none}}

/* resources/views/tenant/seller/license/apply-license.blade.php — block 1 */
.apply-container, .apply-container * {
        font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    }

    .apply-container {
        max-width: 900px;
        margin: 0 auto;
        padding: 24px;
    }

    /* Page Header */
    .apply-container .page-header {
        text-align: center;
        margin-bottom: 40px;
    }

    .apply-container .page-title {
        font-size: 32px;
        font-weight: 700;
        color: #0f172a;
        margin-bottom: 8px;
        letter-spacing: -0.02em;
    }

    .sd-dark .apply-container .page-title {
        color: #ffffff;
    }

    .apply-container .page-subtitle {
        font-size: 16px;
        color: #64748b;
        line-height: 1.6;
    }

    .sd-dark .apply-container .page-subtitle {
        color: #94a3b8;
    }

    /* Modern Card */
    .apply-container .apply-card {
        background: #ffffff;
        border-radius: 20px;
        position: relative;
        border: 1px solid #e2e8f0;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 10px 20px -5px rgba(0, 0, 0, 0.05);
        overflow: hidden;
    }

    .sd-dark .apply-container .apply-card {
        background: rgba(30, 41, 59, 0.95);
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
    }

    /* Animated gradient border */
    .apply-container .apply-card::before {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: 22px;
        padding: 2px;
        background: linear-gradient(130deg, #ff6b6b, #ffb347, #53dd6c, #5ea8ff, #b57aff);
        background-size: 300% 300%;
        animation: borderFlow 6s linear infinite;
        -webkit-mask:
            linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
        z-index: 0;
    }

    @keyframes borderFlow {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }

    .apply-container .card-content {
        position: relative;
        z-index: 1;
    }

    /* Card Header */
    .apply-container .card-header {
        background: #f8fafc;
        padding: 24px 32px;
        border-bottom: 1px solid #e2e8f0;
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .sd-dark .apply-container .card-header {
        background: rgba(15, 23, 42, 0.5);
        border-bottom-color: rgba(255, 255, 255, 0.1);
    }

    .apply-container .header-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        background: #f1f5f9;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .sd-dark .apply-container .header-icon {
        background: rgba(255, 255, 255, 0.1);
    }

    .apply-container .header-icon svg {
        width: 24px;
        height: 24px;
        color: #0f172a;
    }

    .sd-dark .apply-container .header-icon svg {
        color: #ffffff;
    }

    .apply-container .header-text h2 {
        font-size: 18px;
        font-weight: 600;
        color: #0f172a;
        margin-bottom: 4px;
    }

    .sd-dark .apply-container .header-text h2 {
        color: #ffffff;
    }

    .apply-container .header-text p {
        font-size: 14px;
        color: #64748b;
    }

    .sd-dark .apply-container .header-text p {
        color: #94a3b8;
    }

    /* Card Body */
    .apply-container .card-body {
        padding: 32px;
    }

    /* Info Alert */
    .apply-container .info-alert {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        background: #eff6ff;
        border-left: 4px solid #3b82f6;
        padding: 16px 20px;
        border-radius: 10px;
        margin-bottom: 24px;
    }

    .sd-dark .apply-container .info-alert {
        background: rgba(59, 130, 246, 0.1);
        border-left-color: #60a5fa;
    }

    .apply-container .info-alert svg {
        width: 20px;
        height: 20px;
        color: #3b82f6;
        flex-shrink: 0;
        margin-top: 2px;
    }

    .apply-container .info-alert span {
        font-size: 14px;
        color: #1e40af;
        font-weight: 500;
    }

    .sd-dark .apply-container .info-alert span {
        color: #93c5fd;
    }

    /* Select All Row */
    .apply-container .select-all-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px;
        background: #f8fafc;
        border-radius: 10px;
        margin-bottom: 16px;
    }

    .sd-dark .apply-container .select-all-row {
        background: rgba(15, 23, 42, 0.5);
    }

    .apply-container .select-all-label {
        display: flex;
        align-items: center;
        gap: 12px;
        cursor: pointer;
    }

    .apply-container .select-all-label span {
        font-size: 14px;
        font-weight: 600;
        color: #1e293b;
    }

    .sd-dark .apply-container .select-all-label span {
        color: #f1f5f9;
    }

    .apply-container .selected-count {
        font-size: 13px;
        color: #64748b;
        font-weight: 500;
    }

    .sd-dark .apply-container .selected-count {
        color: #94a3b8;
    }

    /* Product List */
    .apply-container .product-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .apply-container .product-item {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 16px 20px;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.15s ease;
    }

    .sd-dark .apply-container .product-item {
        background: rgba(30, 41, 59, 0.5);
        border-color: rgba(255, 255, 255, 0.1);
    }

    .apply-container .product-item:hover {
        border-color: #3b82f6;
        background: #f8fafc;
    }

    .sd-dark .apply-container .product-item:hover {
        border-color: #60a5fa;
        background: rgba(59, 130, 246, 0.1);
    }

    .apply-container .product-item.selected {
        border-color: #3b82f6;
        background: #eff6ff;
    }

    .sd-dark .apply-container .product-item.selected {
        border-color: #60a5fa;
        background: rgba(59, 130, 246, 0.15);
    }

    /* Custom Checkbox */
    .apply-container .custom-checkbox {
        position: relative;
        width: 22px;
        height: 22px;
        flex-shrink: 0;
    }

    .apply-container .custom-checkbox input {
        position: absolute;
        opacity: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
        z-index: 2;
    }

    .apply-container .checkbox-visual {
        position: absolute;
        inset: 0;
        background: #ffffff;
        border: 2px solid #d1d5db;
        border-radius: 6px;
        transition: all 0.15s ease;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .sd-dark .apply-container .checkbox-visual {
        background: rgba(15, 23, 42, 0.5);
        border-color: #4b5563;
    }

    .apply-container .checkbox-visual svg {
        width: 14px;
        height: 14px;
        color: #ffffff;
        opacity: 0;
        transform: scale(0.5);
        transition: all 0.15s ease;
    }

    .apply-container .custom-checkbox input:checked + .checkbox-visual {
        background: #3b82f6;
        border-color: #3b82f6;
    }

    .apply-container .custom-checkbox input:checked + .checkbox-visual svg {
        opacity: 1;
        transform: scale(1);
    }

    .apply-container .custom-checkbox input:focus + .checkbox-visual {
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    }

    /* Product Details */
    .apply-container .product-details {
        flex: 1;
        min-width: 0;
    }

    .apply-container .product-name {
        font-size: 15px;
        font-weight: 600;
        color: #1e293b;
        margin-bottom: 4px;
    }

    .sd-dark .apply-container .product-name {
        color: #f1f5f9;
    }

    .apply-container .product-meta {
        display: flex;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
    }

    .apply-container .product-sku {
        font-size: 13px;
        color: #64748b;
    }

    .sd-dark .apply-container .product-sku {
        color: #94a3b8;
    }

    .apply-container .product-asin {
        font-size: 12px;
        color: #94a3b8;
        background: #f1f5f9;
        padding: 2px 8px;
        border-radius: 4px;
    }

    .sd-dark .apply-container .product-asin {
        background: rgba(255, 255, 255, 0.1);
        color: #64748b;
    }

    /* Card Footer */
    .apply-container .card-footer {
        padding: 24px 32px;
        background: #f8fafc;
        border-top: 1px solid #e2e8f0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        flex-wrap: wrap;
    }

    .sd-dark .apply-container .card-footer {
        background: rgba(15, 23, 42, 0.5);
        border-top-color: rgba(255, 255, 255, 0.1);
    }

    .apply-container .footer-info {
        font-size: 14px;
        color: #64748b;
    }

    .sd-dark .apply-container .footer-info {
        color: #94a3b8;
    }

    .apply-container .footer-info strong {
        color: #1e293b;
    }

    .sd-dark .apply-container .footer-info strong {
        color: #f1f5f9;
    }

    /* Submit Button */
    .apply-container .btn-submit {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 48px;
        padding: 0 32px;
        background: #0f172a;
        color: #ffffff;
        border-radius: 10px;
        font-weight: 600;
        border: none;
        cursor: pointer;
        transition: all 0.15s ease;
        font-size: 15px;
    }

    .apply-container .btn-submit:hover:not(:disabled) {
        background: #1e293b;
        transform: translateY(-1px);
    }

    .apply-container .btn-submit:active:not(:disabled) {
        transform: translateY(0);
    }

    .apply-container .btn-submit:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .sd-dark .apply-container .btn-submit {
        background: #3b82f6;
    }

    .sd-dark .apply-container .btn-submit:hover:not(:disabled) {
        background: #2563eb;
    }

    .apply-container .btn-submit svg {
        width: 18px;
        height: 18px;
    }

    /* Empty State */
    .apply-container .empty-state {
        text-align: center;
        padding: 48px 24px;
    }

    .apply-container .empty-icon {
        width: 64px;
        height: 64px;
        margin: 0 auto 16px;
        background: #f1f5f9;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .sd-dark .apply-container .empty-icon {
        background: rgba(255, 255, 255, 0.1);
    }

    .apply-container .empty-icon svg {
        width: 32px;
        height: 32px;
        color: #94a3b8;
    }

    .apply-container .empty-title {
        font-size: 18px;
        font-weight: 600;
        color: #1e293b;
        margin-bottom: 8px;
    }

    .sd-dark .apply-container .empty-title {
        color: #f1f5f9;
    }

    .apply-container .empty-text {
        font-size: 14px;
        color: #64748b;
    }

    .sd-dark .apply-container .empty-text {
        color: #94a3b8;
    }

    /* Pending Status Card */
    .apply-container .pending-card {
        background: #fffbeb;
        border: 1px solid #fcd34d;
        border-radius: 12px;
        padding: 24px;
        margin-bottom: 32px;
    }

    .sd-dark .apply-container .pending-card {
        background: rgba(251, 191, 36, 0.1);
        border-color: rgba(251, 191, 36, 0.3);
    }

    .apply-container .pending-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 16px;
    }

    .apply-container .pending-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: #fbbf24;
        color: #78350f;
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
    }

    .apply-container .pending-title {
        font-size: 16px;
        font-weight: 600;
        color: #92400e;
    }

    .sd-dark .apply-container .pending-title {
        color: #fcd34d;
    }

    .apply-container .pending-text {
        font-size: 14px;
        color: #a16207;
        margin-bottom: 16px;
    }

    .sd-dark .apply-container .pending-text {
        color: #fbbf24;
    }

    .apply-container .pending-products {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .apply-container .pending-product-tag {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: #ffffff;
        border: 1px solid #fcd34d;
        padding: 6px 12px;
        border-radius: 8px;
        font-size: 13px;
        color: #92400e;
    }

    .sd-dark .apply-container .pending-product-tag {
        background: rgba(251, 191, 36, 0.1);
        color: #fcd34d;
    }

    @media (max-width: 640px) {
        .apply-container {
            padding: 16px;
        }

        .apply-container .page-title {
            font-size: 24px;
        }

        .apply-container .card-header,
        .apply-container .card-body,
        .apply-container .card-footer {
            padding: 20px;
        }

        .apply-container .product-item {
            padding: 14px 16px;
        }

        .apply-container .card-footer {
            flex-direction: column;
            align-items: stretch;
        }

        .apply-container .btn-submit {
            width: 100%;
            justify-content: center;
        }
    }

/* resources/views/tenant/seller/password/edit.blade.php — block 1 */
/* ============================ SELLER PASSWORD PAGE — v2 ============================ */
:root {
    --pwd-accent: #6366f1;
    --pwd-card:   #ffffff;
    --pwd-bg:     #f7f8fb;
    --pwd-border: #e6e8ef;
    --pwd-soft:   #eef0f5;
    --pwd-text:   #0f172a;
    --pwd-sub:    #5b6478;
    --pwd-muted:  #98a0b3;
}
.sd-dark {
    --pwd-card:   #131a2e;
    --pwd-bg:     #0b1020;
    --pwd-border: #1f2945;
    --pwd-soft:   #1a2238;
    --pwd-text:   #f1f5f9;
    --pwd-sub:    #94a3b8;
    --pwd-muted:  #6b7587;
}

/* Hero */
.pwd-hero {
    display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
    padding: 22px 26px;
    border-radius: 16px;
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    color: #fff;
    box-shadow: 0 12px 30px -12px rgba(239,68,68,0.45);
    margin-bottom: 18px;
    position: relative; overflow: hidden;
}
.pwd-hero::before {
    content: ""; position: absolute; right: -40px; top: -60px;
    width: 220px; height: 220px; border-radius: 50%;
    background: rgba(255,255,255,0.10);
}
.pwd-hero-icon {
    width: 64px; height: 64px;
    border-radius: 16px;
    background: rgba(255,255,255,0.20);
    border: 1px solid rgba(255,255,255,0.30);
    display: flex; align-items: center; justify-content: center;
    font-size: 32px;
    flex-shrink: 0;
    position: relative; z-index: 1;
    backdrop-filter: blur(6px);
}
.pwd-hero-body { flex: 1; min-width: 240px; position: relative; z-index: 1; }
.pwd-hero-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; opacity: 0.85; }
.pwd-hero-title { font-size: 22px; font-weight: 800; letter-spacing: -0.4px; margin: 6px 0; line-height: 1.2; }
.pwd-hero-sub { font-size: 13.5px; opacity: 0.92; margin: 0; max-width: 560px; line-height: 1.5; }
@media (max-width: 640px) { .pwd-hero { padding: 18px; } .pwd-hero-icon { width: 56px; height: 56px; font-size: 28px; } .pwd-hero-title { font-size: 18px; } }

/* Toast */
.pwd-toast {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    border-radius: 12px;
    margin-bottom: 14px;
    font-size: 13px; font-weight: 600;
    border: 1px solid;
}
.pwd-toast i { font-size: 20px; flex-shrink: 0; }
.pwd-toast-success { background: rgba(16,185,129,0.10); border-color: rgba(16,185,129,0.30); color: #059669; }
.sd-dark .pwd-toast-success { color: #34d399; }

/* Grid */
.pwd-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 18px;
    align-items: start;
}
@media (max-width: 1000px) { .pwd-grid { grid-template-columns: 1fr; } }

/* Card */
.pwd-card {
    background: var(--pwd-card);
    border: 1px solid var(--pwd-border);
    border-radius: 14px;
    overflow: hidden;
}
.pwd-card-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--pwd-soft);
}
.pwd-card-head-l { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pwd-card-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; flex-shrink: 0;
}
.pwd-icon-amber  { background: rgba(245,158,11,0.12); color: #f59e0b; }
.pwd-icon-indigo { background: rgba(99,102,241,0.12); color: #6366f1; }
.pwd-card-title { margin: 0; font-size: 15px; font-weight: 700; color: var(--pwd-text); line-height: 1.2; }
.pwd-card-sub   { font-size: 12px; color: var(--pwd-muted); }

.pwd-card-body { padding: 20px; }
.pwd-card-foot {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid var(--pwd-soft);
    background: var(--pwd-bg);
}

/* Form */
.pwd-form { display: contents; }
.pwd-fg { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.pwd-label { font-size: 12.5px; font-weight: 600; color: var(--pwd-text); }
.pwd-req   { color: #ef4444; }

.pwd-input-wrap { position: relative; }
.pwd-input-ico {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--pwd-muted); font-size: 18px; pointer-events: none;
}
.pwd-input {
    width: 100%;
    padding: 10px 44px 10px 14px;
    font-size: 13.5px;
    background: var(--pwd-card);
    color: var(--pwd-text);
    border: 1px solid var(--pwd-border);
    border-radius: 9px;
    font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
}
.pwd-input-with-ico { padding-left: 38px; }
.pwd-input:focus { outline: none; border-color: var(--pwd-accent); box-shadow: 0 0 0 3px rgba(99,102,241,0.15); }
.pwd-input-err   { border-color: #ef4444; }
.pwd-input-err:focus { box-shadow: 0 0 0 3px rgba(239,68,68,0.15); }
.pwd-toggle {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    background: transparent; border: none;
    width: 32px; height: 32px;
    border-radius: 8px;
    color: var(--pwd-muted);
    cursor: pointer;
    font-size: 18px;
    display: flex; align-items: center; justify-content: center;
    transition: color .15s, background-color .15s;
}
.pwd-toggle:hover { color: var(--pwd-text); background: var(--pwd-bg); }

.pwd-err {
    display: flex; align-items: center; gap: 5px;
    font-size: 12px; color: #b91c1c; margin-top: 2px;
}
.sd-dark .pwd-err { color: #fca5a5; }
.pwd-err i { font-size: 14px; }

/* Strength meter */
.pwd-strength { margin-top: 6px; display: flex; align-items: center; gap: 10px; }
.pwd-strength-bar {
    flex: 1;
    height: 6px;
    background: var(--pwd-soft);
    border-radius: 999px;
    overflow: hidden;
}
.pwd-strength-fill {
    height: 100%; width: 0;
    background: #ef4444;
    border-radius: 999px;
    transition: width .2s ease, background-color .2s ease;
}
.pwd-strength-label { font-size: 11.5px; font-weight: 700; color: var(--pwd-muted); min-width: 70px; text-align: right; }

/* Match line */
.pwd-match { font-size: 12px; font-weight: 600; margin-top: 2px; display: inline-flex; align-items: center; gap: 5px; }
.pwd-match.match    { color: #059669; }
.pwd-match.nomatch  { color: #b91c1c; }
.sd-dark .pwd-match.match   { color: #34d399; }
.sd-dark .pwd-match.nomatch { color: #fca5a5; }
.pwd-match i { font-size: 14px; }

/* Checklist */
.pwd-checklist {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px;
    margin-top: 4px;
    padding: 14px;
    background: var(--pwd-bg);
    border: 1px dashed var(--pwd-border);
    border-radius: 10px;
}
.pwd-check {
    display: flex; align-items: center; gap: 7px;
    font-size: 12.5px; color: var(--pwd-sub);
    transition: color .15s;
}
.pwd-check i { font-size: 16px; color: var(--pwd-muted); transition: color .15s; }
.pwd-check.ok        { color: var(--pwd-text); }
.pwd-check.ok i      { color: #10b981; }

/* Side panel */
.pwd-side { display: flex; flex-direction: column; gap: 14px; }
.pwd-tips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pwd-tips li {
    display: flex; align-items: flex-start; gap: 8px;
    font-size: 12.5px; color: var(--pwd-sub); line-height: 1.5;
}
.pwd-tips li code {
    background: var(--pwd-soft); padding: 1px 5px; border-radius: 4px;
    font-size: 11.5px; color: var(--pwd-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.pwd-tips li i { font-size: 18px; color: #10b981; flex-shrink: 0; margin-top: 1px; }
.pwd-icon-bad { color: #ef4444 !important; }

.pwd-card-account .pwd-card-body { padding: 16px; }
.pwd-account-row { display: flex; align-items: center; gap: 12px; }
.pwd-account-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pwd-accent), #8b5cf6);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 16px;
    flex-shrink: 0;
}
.pwd-account-name  { font-size: 13.5px; font-weight: 700; color: var(--pwd-text); }
.pwd-account-email { font-size: 12px; color: var(--pwd-muted); word-break: break-word; }

/* Buttons */
.pwd-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 16px;
    border-radius: 9px;
    font-size: 13px; font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer; font-family: inherit;
    text-decoration: none;
    line-height: 1;
    transition: background-color .15s, transform .1s;
}
.pwd-btn i { font-size: 16px; }
.pwd-btn:active { transform: translateY(1px); }
.pwd-btn-primary { background: var(--pwd-accent); color: #fff; }
.pwd-btn-primary:hover { background: #4f46e5; }
.pwd-btn-ghost {
    background: var(--pwd-card);
    color: var(--pwd-text);
    border-color: var(--pwd-border);
}
.pwd-btn-ghost:hover { background: var(--pwd-bg); }
.pwd-btn-ghost-light {
    background: rgba(255,255,255,0.16);
    color: #fff;
    border-color: rgba(255,255,255,0.25);
    backdrop-filter: blur(6px);
}
.pwd-btn-ghost-light:hover { background: rgba(255,255,255,0.25); color: #fff; }

/* resources/views/tenant/seller/profile/edit.blade.php — block 1 */
/* ============================ SELLER PROFILE PAGE — v2 ============================ */
:root {
    --prf-accent: #6366f1;
    --prf-card:   #ffffff;
    --prf-bg:     #f7f8fb;
    --prf-border: #e6e8ef;
    --prf-soft:   #eef0f5;
    --prf-text:   #0f172a;
    --prf-sub:    #5b6478;
    --prf-muted:  #98a0b3;
}
.sd-dark {
    --prf-card:   #131a2e;
    --prf-bg:     #0b1020;
    --prf-border: #1f2945;
    --prf-soft:   #1a2238;
    --prf-text:   #f1f5f9;
    --prf-sub:    #94a3b8;
    --prf-muted:  #6b7587;
}

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

/* Hero */
.prf-hero {
    display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
    padding: 22px 26px;
    border-radius: 16px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: #fff;
    box-shadow: 0 12px 30px -12px rgba(99,102,241,0.55);
    margin-bottom: 18px;
    position: relative; overflow: hidden;
}
.prf-hero::before {
    content: ""; position: absolute; right: -40px; top: -60px;
    width: 220px; height: 220px; border-radius: 50%;
    background: rgba(255,255,255,0.10);
}
.prf-hero-avatar {
    width: 78px; height: 78px;
    border-radius: 50%;
    background: rgba(255,255,255,0.20);
    border: 3px solid rgba(255,255,255,0.30);
    display: flex; align-items: center; justify-content: center;
    font-size: 30px; font-weight: 800;
    flex-shrink: 0;
    position: relative; z-index: 1;
    backdrop-filter: blur(6px);
}
.prf-hero-body { flex: 1; min-width: 240px; position: relative; z-index: 1; }
.prf-hero-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; opacity: 0.85; }
.prf-hero-title { font-size: 22px; font-weight: 800; letter-spacing: -0.4px; margin: 6px 0; line-height: 1.2; }
.prf-hero-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    font-size: 13px; opacity: 0.92;
}
.prf-hero-meta i { margin-right: 4px; }
.prf-hero-dot { opacity: 0.5; }
.prf-hero-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 700;
}
.prf-badge-active   { background: rgba(16,185,129,0.30); color: #d1fae5; }
.prf-badge-inactive { background: rgba(239,68,68,0.30);  color: #fee2e2; }
.prf-hero-actions { position: relative; z-index: 1; }

@media (max-width: 640px) {
    .prf-hero { padding: 18px; }
    .prf-hero-avatar { width: 64px; height: 64px; font-size: 24px; }
    .prf-hero-title { font-size: 18px; }
}

/* Toast */
.prf-toast {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    border-radius: 12px;
    margin-bottom: 14px;
    font-size: 13px; font-weight: 600;
    border: 1px solid;
}
.prf-toast i { font-size: 20px; flex-shrink: 0; }
.prf-toast-success { background: rgba(16,185,129,0.10); border-color: rgba(16,185,129,0.30); color: #059669; }
.sd-dark .prf-toast-success { color: #34d399; }
.prf-toast-danger  { background: rgba(239,68,68,0.10);  border-color: rgba(239,68,68,0.30);  color: #b91c1c; }
.sd-dark .prf-toast-danger  { color: #fca5a5; }

/* Grid */
.prf-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 18px;
}
@media (max-width: 1000px) { .prf-grid { grid-template-columns: 1fr; } }

/* Card */
.prf-card {
    background: var(--prf-card);
    border: 1px solid var(--prf-border);
    border-radius: 14px;
    overflow: hidden;
}
.prf-card-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    padding: 16px 20px;
    border-bottom: 1px solid var(--prf-soft);
}
.prf-card-head-l { display: flex; align-items: center; gap: 12px; min-width: 0; }
.prf-card-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; flex-shrink: 0;
}
.prf-icon-indigo { background: rgba(99,102,241,0.12); color: #6366f1; }
.prf-icon-purple { background: rgba(139,92,246,0.12); color: #8b5cf6; }
.prf-icon-amber  { background: rgba(245,158,11,0.12); color: #f59e0b; }
.prf-card-title { margin: 0; font-size: 15px; font-weight: 700; color: var(--prf-text); line-height: 1.2; }
.prf-card-sub   { font-size: 12px; color: var(--prf-muted); }

.prf-card-body { padding: 20px; }
.prf-card-foot {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid var(--prf-soft);
    background: var(--prf-bg);
}

/* Form */
.prf-form { display: contents; }
.prf-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
}
.prf-span-2 { grid-column: 1 / -1; }
.prf-fg { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.prf-fg:last-child { margin-bottom: 0; }
.prf-label { font-size: 12.5px; font-weight: 600; color: var(--prf-text); }
.prf-req   { color: #ef4444; }
.prf-help  { font-size: 11.5px; color: var(--prf-muted); }

.prf-input-wrap { position: relative; }
.prf-input-ico {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--prf-muted); font-size: 18px;
    pointer-events: none;
}
.prf-input {
    width: 100%;
    padding: 10px 14px;
    font-size: 13.5px;
    background: var(--prf-card);
    color: var(--prf-text);
    border: 1px solid var(--prf-border);
    border-radius: 9px;
    font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
}
.prf-input-with-ico { padding-left: 38px; }
.prf-input-ico-top { top: 13px; transform: none; }
.prf-textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
.prf-input:focus { outline: none; border-color: var(--prf-accent); box-shadow: 0 0 0 3px rgba(99,102,241,0.15); }
.prf-input-err   { border-color: #ef4444; }
.prf-input-err:focus { box-shadow: 0 0 0 3px rgba(239,68,68,0.15); }

.prf-err {
    display: flex; align-items: center; gap: 5px;
    font-size: 12px; color: #b91c1c;
}
.sd-dark .prf-err { color: #fca5a5; }
.prf-err i { font-size: 14px; }

/* Buttons */
.prf-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 16px;
    border-radius: 9px;
    font-size: 13px; font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer; font-family: inherit;
    text-decoration: none;
    line-height: 1;
    transition: background-color .15s, transform .1s;
}
.prf-btn i { font-size: 16px; }
.prf-btn:active { transform: translateY(1px); }
.prf-btn-primary { background: var(--prf-accent); color: #fff; }
.prf-btn-primary:hover { background: #4f46e5; }
.prf-btn-ghost {
    background: var(--prf-card);
    color: var(--prf-text);
    border-color: var(--prf-border);
}
.prf-btn-ghost:hover { background: var(--prf-bg); }
.prf-btn-ghost-light {
    background: rgba(255,255,255,0.16);
    color: #fff;
    border-color: rgba(255,255,255,0.25);
    backdrop-filter: blur(6px);
}
.prf-btn-ghost-light:hover { background: rgba(255,255,255,0.25); color: #fff; }
.prf-btn-sm { padding: 6px 12px; font-size: 12px; }

/* Info list */
.prf-info-list { display: flex; flex-direction: column; gap: 0; padding: 12px 20px; }
.prf-info-row {
    display: flex; justify-content: space-between; align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--prf-soft);
}
.prf-info-row:last-child { border-bottom: none; }
.prf-info-lbl {
    display: flex; align-items: center; gap: 7px;
    font-size: 12.5px; font-weight: 600; color: var(--prf-sub);
}
.prf-info-lbl i { font-size: 16px; color: var(--prf-muted); }
.prf-info-val   { font-size: 13.5px; font-weight: 600; color: var(--prf-text); text-align: right; max-width: 60%; }
.prf-info-val-wrap { white-space: normal; line-height: 1.4; }
.prf-link {
    color: var(--prf-accent); text-decoration: none; font-weight: 600;
    display: inline-flex; align-items: center; gap: 4px;
}
.prf-link:hover { text-decoration: underline; }
.prf-link i { font-size: 14px; }
.prf-admin-note {
    display: flex; align-items: flex-start; gap: 8px;
    margin: 10px 0 8px;
    padding: 11px 12px;
    border-radius: 9px;
    background: var(--prf-bg);
    color: var(--prf-sub);
    font-size: 12px;
    line-height: 1.5;
}
.prf-admin-note i { color: var(--prf-accent); font-size: 17px; flex-shrink: 0; margin-top: 1px; }

@media (max-width: 640px) {
    .prf-form-grid { grid-template-columns: 1fr; }
    .prf-span-2 { grid-column: auto; }
}

/* Security tips */
.prf-tips { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.prf-tip {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 12px 14px;
    background: var(--prf-bg);
    border: 1px solid var(--prf-soft);
    border-radius: 10px;
    font-size: 12.5px; color: var(--prf-sub); line-height: 1.5;
}
.prf-tip i { color: #10b981; font-size: 18px; flex-shrink: 0; margin-top: 1px; }

/* resources/views/tenant/seller/auth/login.blade.php */
.sp-login, .sp-login * { box-sizing: border-box; margin: 0; padding: 0; }

        body.sp-login-page {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            min-height: 100vh;
            background: #0f172a;
            color: #fff;
            overflow-x: hidden;
        }

        .sp-login {
            min-height: 100vh;
            display: grid;
            grid-template-columns: 1fr;
        }
        @media (min-width: 992px) {
            .sp-login { grid-template-columns: 1.1fr 1fr; }
        }

        /* =================================================================
           LEFT: BRANDING PANEL
        ================================================================= */
        .sp-login .sp-brand {
            display: none;
            position: relative;
            padding: 56px 56px 40px;
            background:
                radial-gradient(circle at 20% 10%, rgba(16, 185, 129, 0.35) 0%, transparent 45%),
                radial-gradient(circle at 80% 90%, rgba(20, 184, 166, 0.35) 0%, transparent 45%),
                linear-gradient(135deg, #064e3b 0%, #065f46 60%, #047857 100%);
            flex-direction: column;
            justify-content: space-between;
            overflow: hidden;
        }
        @media (min-width: 992px) { .sp-login .sp-brand { display: flex; } }

        .sp-login .sp-brand::before {
            content: '';
            position: absolute; top: -30%; right: -20%;
            width: 600px; height: 600px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(16,185,129,0.2) 0%, transparent 70%);
            filter: blur(40px);
            pointer-events: none;
        }
        .sp-login .sp-brand::after {
            content: '';
            position: absolute; bottom: -25%; left: -15%;
            width: 520px; height: 520px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(20,184,166,0.2) 0%, transparent 70%);
            filter: blur(40px);
            pointer-events: none;
        }

        .sp-login .sp-brand-top {
            display: flex; align-items: center; gap: 14px;
            position: relative; z-index: 1;
        }
        .sp-login .sp-brand-logo {
            width: 50px; height: 50px;
            border-radius: 14px;
            background: linear-gradient(135deg, #10b981, #14b8a6);
            display: flex; align-items: center; justify-content: center;
            color: #fff;
            font-size: 24px;
            box-shadow: 0 10px 24px rgba(16,185,129,0.45);
            overflow: hidden;
        }
        .sp-login .sp-brand-logo img { width: 28px; height: 28px; object-fit: contain; }
        .sp-login .sp-brand-name { font-size: 20px; font-weight: 800; letter-spacing: -0.3px; }
        .sp-login .sp-brand-name span { color: #a7f3d0; }
        .sp-login .sp-brand-tag { font-size: 12px; color: #a7f3d0; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }

        .sp-login .sp-brand-center { position: relative; z-index: 1; max-width: 480px; }
        .sp-login .sp-brand-headline {
            font-size: 42px; font-weight: 900;
            letter-spacing: -1.2px;
            line-height: 1.05;
            margin-bottom: 18px;
            background: linear-gradient(135deg, #fff 0%, #a7f3d0 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .sp-login .sp-brand-sub {
            font-size: 15px; color: #a7f3d0;
            line-height: 1.6;
            margin-bottom: 32px;
        }

        .sp-login .sp-feature {
            display: flex; align-items: flex-start; gap: 14px;
            padding: 14px 0;
        }
        .sp-login .sp-feature-icon {
            width: 40px; height: 40px;
            border-radius: 12px;
            background: rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.15);
            color: #6ee7b7;
            display: flex; align-items: center; justify-content: center;
            font-size: 22px;
            flex-shrink: 0;
        }
        .sp-login .sp-feature-text strong { display: block; font-size: 14px; color: #fff; margin-bottom: 2px; font-weight: 700; }
        .sp-login .sp-feature-text span { font-size: 12px; color: #d1fae5; line-height: 1.5; opacity: 0.85; }

        .sp-login .sp-brand-bottom { position: relative; z-index: 1; font-size: 12px; color: rgba(255,255,255,0.5); }

        /* =================================================================
           RIGHT: FORM PANEL
        ================================================================= */
        .sp-login .sp-form-panel {
            display: flex; align-items: center; justify-content: center;
            padding: 40px 24px;
            background: #f8fafc;
            color: #1e293b;
            min-height: 100vh;
        }
        @media (min-width: 992px) { .sp-login .sp-form-panel { padding: 40px; } }

        .sp-login .sp-form-wrap { width: 100%; max-width: 440px; }

        .sp-login .sp-mobile-brand {
            display: flex; align-items: center; gap: 10px;
            margin-bottom: 28px;
        }
        @media (min-width: 992px) { .sp-login .sp-mobile-brand { display: none; } }
        .sp-login .sp-mobile-brand .sp-brand-logo { width: 42px; height: 42px; font-size: 20px; }
        .sp-login .sp-mobile-brand .sp-brand-logo img { width: 22px; height: 22px; }
        .sp-login .sp-mobile-brand strong { color: #0f172a; font-size: 16px; font-weight: 800; }
        .sp-login .sp-mobile-brand strong span { color: #10b981; }
        .sp-login .sp-mobile-brand .sp-brand-tag { color: #10b981; }

        .sp-login .sp-form-card {
            background: #fff;
            border: 1px solid #e2e8f0;
            border-radius: 18px;
            padding: 36px 32px;
            box-shadow: 0 10px 40px rgba(15, 23, 42, 0.06);
        }

        .sp-login .sp-badge {
            display: inline-flex; align-items: center; gap: 6px;
            background: #d1fae5;
            color: #047857;
            padding: 4px 10px;
            border-radius: 999px;
            font-size: 11px; font-weight: 700;
            text-transform: uppercase; letter-spacing: 0.6px;
            margin-bottom: 16px;
        }

        .sp-login .sp-h1 {
            font-size: 26px; font-weight: 800;
            color: #0f172a;
            letter-spacing: -0.5px;
            margin-bottom: 6px;
        }
        .sp-login .sp-sub {
            font-size: 13px;
            color: #64748b;
            margin-bottom: 26px;
            line-height: 1.55;
        }

        .sp-login .sp-alert {
            padding: 11px 14px;
            border-radius: 10px;
            font-size: 13px;
            margin-bottom: 18px;
            display: flex; gap: 8px; align-items: flex-start;
        }
        .sp-login .sp-alert i { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
        .sp-login .sp-alert.error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
        .sp-login .sp-alert.error i { color: #ef4444; }
        .sp-login .sp-alert.success { background: #d1fae5; border: 1px solid #6ee7b7; color: #065f46; }
        .sp-login .sp-alert.success i { color: #10b981; }

        .sp-login .sp-field { margin-bottom: 16px; }
        .sp-login .sp-field label {
            display: block;
            font-size: 12px; font-weight: 700;
            color: #475569;
            text-transform: uppercase; letter-spacing: 0.5px;
            margin-bottom: 6px;
        }
        .sp-login .sp-input-wrap { position: relative; display: flex; align-items: center; }
        .sp-login .sp-input-wrap > i {
            position: absolute;
            left: 14px; top: 50%;
            transform: translateY(-50%);
            color: #94a3b8;
            font-size: 18px;
            pointer-events: none;
            z-index: 1;
        }
        .sp-login .sp-input {
            width: 100%;
            padding: 13px 14px 13px 42px;
            border: 2px solid #e2e8f0;
            border-radius: 12px;
            font-size: 14px;
            color: #1e293b;
            background: #fff;
            font-family: inherit;
            transition: all 0.15s;
        }
        .sp-login .sp-input:focus {
            outline: none;
            border-color: #10b981;
            box-shadow: 0 0 0 4px rgba(16,185,129,0.12);
        }
        .sp-login .sp-input::placeholder { color: #cbd5e1; }

        .sp-login .sp-pwd-toggle {
            position: absolute;
            right: 8px; top: 50%;
            transform: translateY(-50%);
            background: transparent; border: none;
            width: 36px; height: 36px;
            border-radius: 8px;
            color: #64748b;
            cursor: pointer;
            font-size: 18px;
            display: inline-flex; align-items: center; justify-content: center;
            padding: 0;
            z-index: 2;
            transition: color .15s, background-color .15s;
        }
        .sp-login .sp-pwd-toggle:hover { color: #1e293b; background: rgba(16,185,129,0.08); }
        .sp-login .sp-pwd-toggle i { font-size: 18px; line-height: 1; }
        .sp-login .sp-input[type="password"], .sp-login .sp-input[type="text"][name="password"] { padding-right: 48px; }

        .sp-login .sp-captcha-row {
            display: flex; gap: 12px; align-items: end;
        }
        .sp-login .sp-captcha-display {
            background: linear-gradient(135deg, #ecfdf5, #d1fae5);
            border: 2px solid #a7f3d0;
            border-radius: 12px;
            padding: 11px 16px;
            font-size: 18px;
            font-weight: 800;
            color: #065f46;
            font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
            white-space: nowrap;
            line-height: 1.4;
        }
        .sp-login .sp-captcha-display .q-mark { color: #10b981; margin: 0 4px; }

        .sp-login .sp-submit {
            width: 100%;
            padding: 14px;
            background: linear-gradient(135deg, #10b981, #059669);
            color: #fff;
            border: none;
            border-radius: 12px;
            font-size: 15px;
            font-weight: 700;
            cursor: pointer;
            display: inline-flex; align-items: center; justify-content: center; gap: 8px;
            transition: all 0.2s;
            margin-top: 6px;
            box-shadow: 0 6px 16px rgba(16,185,129,0.3);
        }
        .sp-login .sp-submit:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(16,185,129,0.4); }
        .sp-login .sp-submit i { font-size: 18px; }

        .sp-login .sp-divider {
            display: flex; align-items: center; gap: 12px;
            margin: 22px 0 16px;
            color: #94a3b8;
            font-size: 11px; font-weight: 600;
            text-transform: uppercase; letter-spacing: 0.5px;
        }
        .sp-login .sp-divider::before, .sp-login .sp-divider::after { content: ''; flex: 1; height: 1px; background: #e2e8f0; }

        .sp-login .sp-notice {
            background: #ecfdf5;
            border: 1px solid #a7f3d0;
            border-radius: 10px;
            padding: 12px 14px;
            font-size: 12px;
            color: #065f46;
            display: flex; gap: 8px; align-items: flex-start;
            line-height: 1.5;
        }
        .sp-login .sp-notice i { color: #10b981; font-size: 16px; flex-shrink: 0; margin-top: 1px; }

        /* =================================================================
           ANDROID APP DOWNLOAD (highlighted)
        ================================================================= */
        /* Shown only below 992px, where the branding panel (and its card) is hidden. */
        .sp-login .sp-app-mobile { display: block; }
        @media (min-width: 992px) { .sp-login .sp-app-mobile { display: none; } }

        .sp-login .sp-app-card {
            position: relative;
            margin-top: 18px;
            padding: 20px;
            border-radius: 18px;
            border: 1px solid rgba(16,185,129,0.45);
            background:
                radial-gradient(circle at 90% 0%, rgba(16,185,129,0.28) 0%, transparent 55%),
                linear-gradient(135deg, #0f172a 0%, #064e3b 100%);
            color: #fff;
            box-shadow: 0 12px 30px rgba(16,185,129,0.22);
            overflow: hidden;
        }
        .sp-login .sp-app-card::before {
            content: '';
            position: absolute;
            top: -60%; right: -30%;
            width: 260px; height: 260px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(16,185,129,0.35) 0%, transparent 70%);
            filter: blur(30px);
            pointer-events: none;
        }

        /* Glass variant — sits on the green branding panel instead of a light background. */
        .sp-login .sp-app-card--glass {
            /* A flex child of .sp-brand — space-between floats it in the gap under the logo.
               The margins keep clear air around it once that free space runs out. */
            z-index: 1;
            max-width: 480px;
            margin: 36px 0;
            background: rgba(255, 255, 255, 0.09);
            border-color: rgba(255, 255, 255, 0.22);
            box-shadow: 0 16px 34px rgba(2, 44, 34, 0.28);
            -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
        }
        .sp-login .sp-app-card--glass::before { opacity: 0.6; }
        .sp-login .sp-app-card--glass .sp-app-desc { color: #d1fae5; }

        .sp-login .sp-app-flag {
            position: absolute;
            top: 14px; right: 14px;
            background: #10b981;
            color: #04231a;
            font-size: 9px; font-weight: 900;
            letter-spacing: 0.8px; text-transform: uppercase;
            padding: 3px 8px;
            border-radius: 999px;
            z-index: 2;
        }

        .sp-login .sp-app-head {
            display: flex; align-items: center; gap: 14px;
            position: relative; z-index: 1;
            margin-bottom: 14px;
            padding-right: 90px; /* keeps the corner flag clear of the text */
        }
        .sp-login .sp-app-icon {
            position: relative;
            width: 48px; height: 48px;
            flex-shrink: 0;
            border-radius: 14px;
            background: linear-gradient(135deg, #10b981, #14b8a6);
            display: flex; align-items: center; justify-content: center;
            font-size: 28px; color: #04231a;
            box-shadow: 0 8px 20px rgba(16,185,129,0.45);
        }
        .sp-login .sp-app-icon::after {
            content: '';
            position: absolute; inset: 0;
            border-radius: 14px;
            border: 2px solid rgba(16,185,129,0.7);
            animation: sp-app-pulse 2.4s ease-out infinite;
        }
        @keyframes sp-app-pulse {
            0%   { transform: scale(1);    opacity: 0.9; }
            100% { transform: scale(1.45); opacity: 0; }
        }
        @media (prefers-reduced-motion: reduce) {
            .sp-login .sp-app-icon::after { animation: none; opacity: 0; }
        }

        /* On narrow screens give the text the full width and drop the flag into the flow. */
        @media (max-width: 520px) {
            .sp-login .sp-app-head { padding-right: 0; }
            .sp-login .sp-app-flag {
                position: static;
                display: inline-block;
                margin-bottom: 14px;
            }
        }

        .sp-login .sp-app-title {
            font-size: 15px; font-weight: 800;
            letter-spacing: -0.2px;
            margin-bottom: 3px;
        }
        .sp-login .sp-app-title span { color: #6ee7b7; }
        .sp-login .sp-app-desc {
            font-size: 12px;
            color: #a7f3d0;
            line-height: 1.55;
        }

        .sp-login .sp-app-points {
            list-style: none;
            position: relative; z-index: 1;
            display: grid; gap: 6px;
            margin-bottom: 16px;
            font-size: 12px;
            color: #d1fae5;
        }
        .sp-login .sp-app-points li { display: flex; align-items: center; gap: 7px; }
        .sp-login .sp-app-points i { color: #6ee7b7; font-size: 15px; flex-shrink: 0; }

        .sp-login .sp-app-btn {
            position: relative; z-index: 1;
            width: 100%;
            padding: 13px;
            border-radius: 12px;
            background: linear-gradient(135deg, #10b981, #059669);
            color: #fff;
            font-size: 14px; font-weight: 800;
            text-decoration: none;
            display: inline-flex; align-items: center; justify-content: center; gap: 8px;
            box-shadow: 0 8px 20px rgba(16,185,129,0.35);
            transition: transform 0.15s, box-shadow 0.15s;
        }
        .sp-login .sp-app-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(16,185,129,0.5); }
        .sp-login .sp-app-btn i { font-size: 20px; }

        .sp-login .sp-app-meta {
            position: relative; z-index: 1;
            margin-top: 10px;
            text-align: center;
            font-size: 10.5px;
            color: rgba(209,250,229,0.7);
            line-height: 1.5;
        }

        .sp-login .sp-help-row {
            display: flex; justify-content: center;
            margin-top: 18px;
            font-size: 12px;
            color: #94a3b8;
        }
        .sp-login .sp-help-row a { color: #10b981; text-decoration: none; font-weight: 600; }
        .sp-login .sp-help-row a:hover { text-decoration: underline; }

        .sp-login .sp-footer-text {
            text-align: center;
            font-size: 11px;
            color: #94a3b8;
            margin-top: 22px;
        }
        .sp-login .sp-footer-text a { color: #10b981; text-decoration: none; }
        .sp-login .sp-footer-text a:hover { text-decoration: underline; }

/* Compiled utilities required by seller payment views */
.absolute{position:absolute}.relative{position:relative}.-bottom-24{bottom:-6rem}.-left-20{left:-5rem}.-right-24{right:-6rem}.-top-32{top:-8rem}.z-10{z-index:10}.mx-auto{margin-left:auto;margin-right:auto}.\!mb-0{margin-bottom:0!important}.\!mb-6{margin-bottom:1.5rem!important}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-0{margin-left:0}.mr-1{margin-right:.25rem}.mt-1{margin-top:.25rem}.mt-12{margin-top:3rem}.mt-2{margin-top:.5rem}.mt-5{margin-top:1.25rem}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-10{height:2.5rem}.h-12{height:3rem}.h-56{height:14rem}.h-6{height:1.5rem}.h-64{height:16rem}.max-h-\[75vh\]{max-height:75vh}.min-h-\[70vh\]{min-height:70vh}.min-h-screen{min-height:100vh}.w-10{width:2.5rem}.w-12{width:3rem}.w-56{width:14rem}.w-6{width:1.5rem}.w-64{width:16rem}.w-full{width:100%}.max-w-7xl{max-width:80rem}.max-w-md{max-width:28rem}.flex-shrink-0{flex-shrink:0}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite}.cursor-default{cursor:default}.\!list-none{list-style-type:none!important}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-12{gap:3rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-blue-500\/40{border-color:rgba(59,130,246,.4)}.border-emerald-500\/40{border-color:rgba(16,185,129,.4)}.border-red-500\/40{border-color:rgba(239,68,68,.4)}.border-slate-700{--tw-border-opacity:1;border-color:rgb(51 65 85/var(--tw-border-opacity,1))}.bg-blue-500\/15{background-color:rgba(59,130,246,.15)}.bg-emerald-500\/20{background-color:rgba(16,185,129,.2)}.bg-green-600\/20{background-color:rgba(22,163,74,.2)}.bg-indigo-600{--tw-bg-opacity:1;background-color:rgb(79 70 229/var(--tw-bg-opacity,1))}.bg-red-500\/15{background-color:rgba(239,68,68,.15)}.bg-red-500\/20{background-color:rgba(239,68,68,.2)}.bg-slate-700\/40{background-color:rgba(51,65,85,.4)}.bg-slate-800{--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity,1))}.bg-slate-900{--tw-bg-opacity:1;background-color:rgb(15 23 42/var(--tw-bg-opacity,1))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-emerald-500{--tw-gradient-from:#10b981 var(--tw-gradient-from-position);--tw-gradient-to:rgba(16,185,129,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-indigo-500{--tw-gradient-from:#6366f1 var(--tw-gradient-from-position);--tw-gradient-to:rgba(99,102,241,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.to-cyan-500{--tw-gradient-to:#06b6d4 var(--tw-gradient-to-position)}.to-emerald-600{--tw-gradient-to:#059669 var(--tw-gradient-to-position)}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-8{padding-top:2rem;padding-bottom:2rem}.\!pl-0{padding-left:0!important}.pb-1{padding-bottom:.25rem}.pb-3{padding-bottom:.75rem}.pt-5{padding-top:1.25rem}.pt-8{padding-top:2rem}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.italic{font-style:italic}.leading-relaxed{line-height:1.625}.tracking-wider{letter-spacing:.05em}.text-blue-100{--tw-text-opacity:1;color:rgb(219 234 254/var(--tw-text-opacity,1))}.text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1))}.text-emerald-300{--tw-text-opacity:1;color:rgb(110 231 183/var(--tw-text-opacity,1))}.text-green-400{--tw-text-opacity:1;color:rgb(74 222 128/var(--tw-text-opacity,1))}.text-red-100\/80{color:hsla(0,93%,94%,.8)}.text-red-100\/90{color:hsla(0,93%,94%,.9)}.text-red-200{--tw-text-opacity:1;color:rgb(254 202 202/var(--tw-text-opacity,1))}.text-red-300{--tw-text-opacity:1;color:rgb(252 165 165/var(--tw-text-opacity,1))}.text-red-400{--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.underline{text-decoration-line:underline}.opacity-70{opacity:.7}.shadow-inner{--tw-shadow:inset 0 2px 4px 0 rgba(0,0,0,.05);--tw-shadow-colored:inset 0 2px 4px 0 var(--tw-shadow-color)}.shadow-inner,.shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-xl{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-indigo-500\/30{--tw-shadow-color:rgba(99,102,241,.3);--tw-shadow:var(--tw-shadow-colored)}.blur-3xl{--tw-blur:blur(64px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.hover\:-translate-y-0\.5:hover{--tw-translate-y:-0.125rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:bg-indigo-500:hover{--tw-bg-opacity:1;background-color:rgb(99 102 241/var(--tw-bg-opacity,1))}.hover\:from-indigo-400:hover{--tw-gradient-from:#818cf8 var(--tw-gradient-from-position);--tw-gradient-to:rgba(129,140,248,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.hover\:to-cyan-400:hover{--tw-gradient-to:#22d3ee var(--tw-gradient-to-position)}.hover\:shadow-indigo-500\/50:hover{--tw-shadow-color:rgba(99,102,241,.5);--tw-shadow:var(--tw-shadow-colored)}.disabled\:transform-none:disabled{transform:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}@media (min-width:768px){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1024px){.lg\:col-span-2{grid-column:span 2/span 2}.lg\:col-span-3{grid-column:span 3/span 3}.lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* ============================================================
   SHARED SELLER DESIGN SYSTEM
   This final layer is authoritative across every seller view.
   ============================================================ */
:root {
    --sp-accent: #5b5bd6;
    --sp-accent-dark: #4949bc;
    --sp-accent-soft: #f0f0ff;
    --sp-teal: #0f9488;
    --sp-teal-soft: #eaf8f6;
    --sp-amber: #d88925;
    --sp-amber-soft: #fff7e9;
    --sp-red: #c84962;
    --sp-red-soft: #fff0f3;
    --sp-navy: #17233b;
    --sp-bg: #f6f8fc;
    --sp-card: #ffffff;
    --sp-border: #e1e7f0;
    --sp-border-soft: #edf0f5;
    --sp-text: #17233b;
    --sp-sub: #647089;
    --sp-muted: #94a0b5;
    --sp-radius: 12px;
    --sp-radius-sm: 8px;
    --sp-shadow: 0 4px 16px rgba(23, 32, 51, .035);
    --sp-shadow-raised: 0 10px 28px rgba(23, 32, 51, .08);
}

body:not(.sp-login-page),
body:not(.sp-login-page) button,
body:not(.sp-login-page) input,
body:not(.sp-login-page) select,
body:not(.sp-login-page) textarea {
    font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body:not(.sp-login-page) {
    color: var(--sp-text);
    background: var(--sp-bg) !important;
}

.sd-dark {
    --sp-bg: #0c1220;
    --sp-card: #151d2f;
    --sp-border: #263149;
    --sp-border-soft: #202a40;
    --sp-text: #f2f5fa;
    --sp-sub: #a4aec0;
    --sp-muted: #748096;
    --sp-shadow: 0 5px 18px rgba(0, 0, 0, .16);
    --sp-shadow-raised: 0 12px 30px rgba(0, 0, 0, .23);
}

/* Reusable primitives for all new seller views. */
.sp-page {
    display: grid;
    gap: 18px;
}

.sp-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 18px;
}

.sp-card {
    overflow: hidden;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    background: var(--sp-card);
    box-shadow: var(--sp-shadow);
}

.sp-card-head {
    display: flex;
    min-height: 64px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 19px;
    border-bottom: 1px solid var(--sp-border);
}

.sp-card-title {
    margin: 0;
    color: var(--sp-text);
    font-size: 14px;
    font-weight: 750;
    letter-spacing: -.015em;
}

.sp-card-subtitle {
    margin: 3px 0 0;
    color: var(--sp-muted);
    font-size: 10.5px;
    line-height: 1.45;
}

.sp-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.sp-stat {
    position: relative;
    min-height: 142px;
    padding: 19px;
    overflow: hidden;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    background: var(--sp-card);
    box-shadow: var(--sp-shadow);
}

.sp-label {
    color: var(--sp-sub);
    font-size: 11px;
    font-weight: 650;
}

.sp-value {
    color: var(--sp-text);
    font-size: 24px;
    font-weight: 750;
    letter-spacing: -.035em;
}

.sp-button {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 14px;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    color: var(--sp-text);
    background: var(--sp-card);
    font-size: 10.5px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.sp-button-primary {
    border-color: transparent;
    color: #fff;
    background: linear-gradient(135deg, #6868df, #4e4ec4);
    box-shadow: 0 7px 15px rgba(91, 91, 214, .2);
}

.sp-input {
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    outline: 0;
    color: var(--sp-text);
    background: var(--sp-card);
    font-size: 11px;
}

.sp-input:focus {
    border-color: #8585e7;
    box-shadow: 0 0 0 3px rgba(91, 91, 214, .1);
}

/* Normalize existing seller page headers to one restrained banner. */
:is(.bm-hero, .sts-hero, .sf-hero, .prf-hero, .pwd-hero) {
    min-height: 92px;
    margin-bottom: 18px !important;
    padding: 18px 20px !important;
    border: 1px solid var(--sp-border) !important;
    border-left: 4px solid var(--sp-accent) !important;
    border-radius: 11px !important;
    color: var(--sp-text) !important;
    background: linear-gradient(100deg, #f9faff 0%, var(--sp-card) 72%) !important;
    box-shadow: var(--sp-shadow) !important;
}

:is(.bm-hero, .sts-hero, .sf-hero, .prf-hero, .pwd-hero) :is(h1, h2, h3, strong) {
    color: var(--sp-text) !important;
}

:is(.bm-hero, .sts-hero, .sf-hero, .prf-hero, .pwd-hero) :is(p, small, span) {
    color: var(--sp-sub);
}

.sd-dark :is(.bm-hero, .sts-hero, .sf-hero, .prf-hero, .pwd-hero) {
    background: linear-gradient(100deg, #181f35 0%, var(--sp-card) 72%) !important;
}

/* One surface, radius, and shadow system for existing page cards. */
:is(
    .lp-record, .lp-metric, .lp-alert, .lp-empty,
    .bm-card, .bm-stat,
    .sts-card, .sts-stat,
    .sf-card, .sf-stat, .sf-alert,
    .prf-card, .prf-tip, .prf-admin-note,
    .pwd-card, .pwd-tip,
    .hc-guide, .hc-contents, .hc-quick, .hc-status-card, .hc-mini-card,
    .apx-feature, .apx-steps, .apx-faq-item,
    .apply-container .apply-card,
    .pay-card
) {
    border-color: var(--sp-border) !important;
    border-radius: var(--sp-radius) !important;
    background-color: var(--sp-card);
    box-shadow: var(--sp-shadow) !important;
}

:is(.lp-metrics, .bm-stats, .sts-stats, .sf-stats) {
    gap: 14px !important;
    margin-bottom: 18px !important;
}

:is(.lp-metric, .bm-stat, .sts-stat, .sf-stat) {
    min-height: 132px;
    padding: 18px 19px !important;
}

:is(.bm-stat-value, .sts-stat-value, .sf-stat-value, .lp-metric-value) {
    color: var(--sp-text) !important;
    font-size: 23px !important;
    font-weight: 750 !important;
    letter-spacing: -.035em;
}

:is(.bm-stat-label, .sts-stat-label, .sf-stat-label, .lp-metric-label) {
    color: var(--sp-sub) !important;
    font-size: 10.5px !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* Shared card headers. */
:is(.lp-title, .bm-card-head, .sts-card-head, .sf-card-head, .prf-card-head, .pwd-card-head, .hc-card-head, .apply-container .card-header) {
    min-height: 64px;
    padding: 14px 19px !important;
    border-bottom: 1px solid var(--sp-border) !important;
    background: var(--sp-card) !important;
}

:is(.lp-title h2, .bm-card-title, .sts-card-title, .sf-card-title, .prf-card-title, .pwd-card-title, .hc-card-head h2, .apply-container .header-text h2) {
    color: var(--sp-text) !important;
    font-size: 14px !important;
    font-weight: 750 !important;
    letter-spacing: -.015em;
}

/* Shared inputs and focus behavior. */
:is(
    .prf-input, .pwd-input,
    .bm-filter,
    .sts-search input,
    .sf-form-group input, .sf-form-group select, .sf-form-group textarea,
    .apply-container input, .apply-container select, .apply-container textarea,
    .pay-card input, .pay-card select, .pay-card textarea
) {
    border-color: var(--sp-border) !important;
    border-radius: var(--sp-radius-sm) !important;
    color: var(--sp-text);
    background-color: var(--sp-card);
    font-family: inherit;
}

:is(
    .prf-input, .pwd-input,
    .sts-search input,
    .sf-form-group input, .sf-form-group select, .sf-form-group textarea,
    .apply-container input, .apply-container select, .apply-container textarea,
    .pay-card input, .pay-card select, .pay-card textarea
):focus {
    border-color: #8585e7 !important;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(91, 91, 214, .1) !important;
}

/* Shared buttons and interaction quality. */
:is(
    .lp-btn, .bm-pay-btn, .sts-btn, .sf-pay-btn, .sf-submit-btn,
    .prf-btn, .pwd-btn, .hc-tool-btn, .apx-btn,
    .apply-container .btn-submit, .pay-submit, .pay-cancel
) {
    border-radius: var(--sp-radius-sm) !important;
    font-family: inherit;
    font-weight: 700;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

:is(
    .lp-btn-primary, .bm-pay-btn.card, .sts-btn-primary,
    .sf-submit-btn, .prf-btn-primary, .pwd-btn-primary, .apx-btn-primary,
    .apply-container .btn-submit, .pay-submit
) {
    border-color: transparent !important;
    color: #fff !important;
    background: linear-gradient(135deg, #6868df, #4e4ec4) !important;
    box-shadow: 0 7px 15px rgba(91, 91, 214, .2) !important;
}

:is(
    .lp-btn-primary, .bm-pay-btn.card, .sts-btn-primary,
    .sf-submit-btn, .prf-btn-primary, .pwd-btn-primary, .apx-btn-primary,
    .apply-container .btn-submit, .pay-submit
):hover {
    transform: translateY(-1px);
    box-shadow: 0 9px 19px rgba(91, 91, 214, .25) !important;
}

/* Shared data-table language. */
:is(.lp-table, .bm-table, .sts-table, .sf-payments-table) {
    width: 100%;
    border-collapse: collapse;
}

:is(.lp-table, .bm-table, .sts-table, .sf-payments-table) th {
    padding: 10px 15px !important;
    border-bottom: 1px solid var(--sp-border) !important;
    color: var(--sp-muted) !important;
    background: var(--sp-bg) !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: .055em !important;
    text-transform: uppercase;
}

:is(.lp-table, .bm-table, .sts-table, .sf-payments-table) td {
    padding: 13px 15px !important;
    border-bottom: 1px solid var(--sp-border-soft) !important;
    color: var(--sp-sub);
    font-size: 10.5px !important;
}

:is(.lp-table, .bm-table, .sts-table, .sf-payments-table) tbody tr:hover {
    background: color-mix(in srgb, var(--sp-accent) 3%, var(--sp-card)) !important;
}

/* Shared semantic status pills. */
:is(.bm-status, .sts-pill, .sf-badge, .lp-status) {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px !important;
    border-radius: 999px !important;
    font-size: 8.5px !important;
    font-weight: 750 !important;
    letter-spacing: .025em !important;
}

/* Remove animated decoration that conflicts with the calm portal language. */
.apply-container .apply-card::before {
    display: none !important;
}

.apply-container .apply-container,
.apply-container {
    font-family: inherit;
}

.apply-container .page-title,
.apply-container .header-text h2,
.apply-container .product-name,
.apply-container .pending-title {
    color: var(--sp-text) !important;
}

.apply-container .page-subtitle,
.apply-container .header-text p,
.apply-container .product-sku,
.apply-container .pending-text {
    color: var(--sp-sub) !important;
}

/* Checkout screens use the same portal surface instead of a separate theme. */
.sp-checkout-page > .w-full,
body.sp-checkout-success > .w-full {
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius) !important;
    color: var(--sp-text) !important;
    background: var(--sp-card) !important;
    box-shadow: var(--sp-shadow-raised) !important;
}

.sp-checkout-page :is(h1, strong, span),
body.sp-checkout-success :is(h1, strong) {
    color: var(--sp-text);
}

.sp-checkout-page :is(p, .text-slate-400),
body.sp-checkout-success :is(p, .text-slate-400) {
    color: var(--sp-sub) !important;
}

.sp-checkout-page .border-slate-700 {
    border-color: var(--sp-border) !important;
}

body.sp-checkout-success {
    padding: 20px;
    color: var(--sp-text) !important;
    background: var(--sp-bg) !important;
}

body.sp-checkout-success .bg-slate-700\/40 {
    color: var(--sp-sub);
    background: var(--sp-bg) !important;
}

/* Authoritative sidebar icon system. Keep this isolated from page icons. */
.sp-sidebar .sp-nav-item {
    min-height: 46px;
    gap: 10px;
    padding: 7px 11px;
}

.sp-sidebar .sp-nav-ico,
.sp-sidebar .sp-nav-item:hover .sp-nav-ico,
.sp-sidebar .sp-nav-item.active .sp-nav-ico {
    display: inline-flex !important;
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 9px !important;
    color: #8795ad !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 19px !important;
    line-height: 1 !important;
    text-align: center;
    transition: color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.sp-sidebar .sp-nav-item:hover .sp-nav-ico {
    color: #dce5f4 !important;
    background: rgba(255, 255, 255, .07) !important;
}

.sp-sidebar .sp-nav-item.active .sp-nav-ico {
    color: #fff !important;
    background: linear-gradient(145deg, #24b8aa, #0b8177) !important;
    box-shadow: 0 6px 14px rgba(6, 105, 97, .3), inset 0 1px 0 rgba(255, 255, 255, .28) !important;
}

.sp-sidebar .sp-nav-ico::before {
    display: block;
    line-height: 1;
}

/* Sales Reports dark mode — mirrors Dashboard and License surfaces. */
.sd-dark .sr-page {
    --sr-navy: var(--sp-text);
    --sr-indigo: #a3a3ff;
    --sr-indigo-soft: rgba(91, 91, 214, .16);
    --sr-teal: #48c9bd;
    --sr-teal-soft: rgba(15, 148, 136, .14);
    --sr-amber: #efb55f;
    --sr-amber-soft: rgba(216, 137, 37, .13);
    --sr-red: #eb8195;
    --sr-red-soft: rgba(200, 73, 98, .13);
    --sr-copy: var(--sp-sub);
    --sr-muted: var(--sp-muted);
    --sr-line: var(--sp-border);
    --sr-bg: var(--sp-bg);
    --sr-card: var(--sp-card);
    color-scheme: dark;
}

.sd-dark .sr-status {
    border-color: var(--sr-line);
    border-left-color: var(--sr-indigo);
    background: linear-gradient(100deg, rgba(91, 91, 214, .1), var(--sr-card) 72%);
    box-shadow: var(--sp-shadow);
}

.sd-dark .sr-status--open {
    border-left-color: var(--sr-teal);
    background: linear-gradient(100deg, rgba(15, 148, 136, .1), var(--sr-card) 72%);
}

.sd-dark .sr-status--overdue {
    border-left-color: var(--sr-red);
    background: linear-gradient(100deg, rgba(200, 73, 98, .1), var(--sr-card) 72%);
}

.sd-dark .sr-status__facts {
    border-color: var(--sr-line);
    background: rgba(9, 15, 28, .36);
}

.sd-dark :is(.sr-metric, .sr-card, .sr-periods, .sr-ledger, .sr-empty) {
    border-color: var(--sr-line);
    background: var(--sr-card);
    box-shadow: var(--sp-shadow);
}

.sd-dark .sr-metric > svg,
.sd-dark .sr-metric:nth-child(2) > svg,
.sd-dark .sr-metric:nth-child(3) > svg,
.sd-dark .sr-metric:nth-child(4) > svg,
.sd-dark .sr-upload__mark,
.sd-dark .sr-empty__icon,
.sd-dark .sr-ledger__empty i {
    border: 1px solid rgba(163, 163, 255, .13);
    color: var(--sr-indigo);
    background: rgba(91, 91, 214, .14);
    box-shadow: none;
}

.sd-dark .sr-metric:nth-child(2) > svg,
.sd-dark .sr-metric:nth-child(4) > svg {
    border-color: rgba(72, 201, 189, .14);
    color: var(--sr-teal);
    background: rgba(15, 148, 136, .13);
}

.sd-dark .sr-metric:nth-child(3) > svg {
    border-color: rgba(239, 181, 95, .14);
    color: var(--sr-amber);
    background: rgba(216, 137, 37, .13);
}

.sd-dark .sr-metric--attention > svg {
    border-color: rgba(235, 129, 149, .14) !important;
    color: var(--sr-red) !important;
    background: rgba(200, 73, 98, .13) !important;
    box-shadow: none !important;
}

.sd-dark .sr-secure-label {
    border-color: rgba(163, 163, 255, .2);
    color: var(--sr-indigo);
    background: var(--sr-indigo-soft);
}

.sd-dark .sr-periods > header {
    background: linear-gradient(90deg, rgba(200, 73, 98, .09), var(--sr-card));
}

.sd-dark .sr-periods__list article {
    border-color: rgba(200, 73, 98, .25);
    background: rgba(200, 73, 98, .07);
}

.sd-dark .sr-field label {
    color: var(--sr-navy);
}

.sd-dark .sr-control,
.sd-dark .sr-upload > label b,
.sd-dark .sr-file-item,
.sd-dark .sr-ledger-action {
    border-color: var(--sr-line);
    color: var(--sr-navy);
    background: #111827;
}

.sd-dark .sr-control[readonly] {
    color: var(--sr-copy);
    background: rgba(9, 15, 28, .45);
}

.sd-dark .sr-control:focus {
    border-color: #8585e7;
    box-shadow: 0 0 0 3px rgba(91, 91, 214, .16);
}

.sd-dark .sr-products,
.sd-dark .sr-upload {
    border-color: var(--sr-line);
    background: rgba(9, 15, 28, .28);
}

.sd-dark .sr-upload:hover,
.sd-dark .sr-upload.is-dragging {
    border-color: var(--sr-indigo);
    background: rgba(91, 91, 214, .08);
}

.sd-dark .sr-products__list span {
    border-color: rgba(163, 163, 255, .2);
    color: var(--sr-indigo);
    background: var(--sr-indigo-soft);
}

.sd-dark .sr-date-panel {
    border-color: rgba(72, 201, 189, .25);
    background: linear-gradient(110deg, rgba(15, 148, 136, .12), rgba(15, 148, 136, .04));
}

.sd-dark .sr-preparation {
    border-color: var(--sr-line);
    background: rgba(9, 15, 28, .18);
}

.sd-dark .sr-preparation li i {
    background: var(--sr-teal-soft);
}

.sd-dark .sr-terms .sr-card__header {
    background: linear-gradient(120deg, rgba(216, 137, 37, .1), var(--sr-card));
}

.sd-dark .sr-estimate {
    border-color: rgba(239, 181, 95, .23);
    background: var(--sr-amber-soft);
}

.sd-dark .sr-estimate span {
    color: var(--sr-amber);
}

.sd-dark .sr-terms__note {
    color: var(--sr-copy);
    background: rgba(9, 15, 28, .3);
}

.sd-dark .sr-ledger th {
    border-color: var(--sr-line);
    color: var(--sr-muted);
    background: rgba(9, 15, 28, .38);
}

.sd-dark .sr-ledger td {
    border-color: var(--sr-line);
}

.sd-dark .sr-ledger tbody tr:hover {
    background: rgba(91, 91, 214, .06);
}

.sd-dark .sr-payment-state {
    color: var(--sr-copy);
    background: rgba(148, 160, 181, .12);
}

.sd-dark .sr-payment-state--paid {
    color: var(--sr-teal);
    background: var(--sr-teal-soft);
}

.sd-dark .sr-payment-state--due {
    color: var(--sr-amber);
    background: var(--sr-amber-soft);
}

.sd-dark .sr-payment-state--failed {
    color: var(--sr-red);
    background: var(--sr-red-soft);
}

.sd-dark .sr-ledger-action--primary {
    border-color: var(--sr-indigo);
    color: #fff;
    background: #5b5bd6;
}

@media (max-width: 700px) {
    .sd-dark .sr-ledger tbody tr {
        border-color: var(--sr-line);
        background: var(--sr-card);
    }
}

@media (max-width: 1100px) {
    .sp-stats,
    :is(.lp-metrics, .bm-stats, .sts-stats, .sf-stats) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 700px) {
    .sp-grid,
    .sp-stats,
    :is(.lp-metrics, .bm-stats, .sts-stats, .sf-stats) {
        grid-template-columns: 1fr !important;
    }

    :is(.bm-hero, .sts-hero, .sf-hero, .prf-hero, .pwd-hero) {
        min-height: 0;
        padding: 15px !important;
    }

    :is(.lp-metric, .bm-stat, .sts-stat, .sf-stat) {
        min-height: 118px;
    }
}

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

/* Final Help Center normalization (placed after migrated legacy rules). */
.hc-wrap.pw-page {
    --hc-bg: var(--sp-bg);
    --hc-card: var(--sp-card);
    --hc-border: var(--sp-border);
    --hc-text: var(--sp-text);
    --hc-sub: var(--sp-sub);
    --hc-muted: var(--sp-muted);
    --hc-soft: color-mix(in srgb, var(--sp-accent) 5%, var(--sp-card));
    --hc-accent: var(--sp-accent);
    max-width: none;
    margin: 0;
    color: var(--sp-text);
}

.hc-wrap .hc-toolbar {
    min-height: 62px;
    margin: 0;
    padding: 9px 12px;
    border: 1px solid var(--sp-border) !important;
    border-radius: var(--sp-radius) !important;
    background: var(--sp-card) !important;
    box-shadow: var(--sp-shadow) !important;
}

.hc-wrap :is(.hc-card, .hc-guide, .hc-quick, .hc-support) {
    border-color: var(--sp-border) !important;
    border-radius: var(--sp-radius) !important;
    color: var(--sp-text);
    background: var(--sp-card) !important;
    box-shadow: var(--sp-shadow) !important;
}

.hc-wrap .hc-quick-grid { margin: 0; }
.hc-wrap .hc-layout { gap: 18px; }
.hc-wrap .hc-card-head { border-color: var(--sp-border); }
.hc-wrap .hc-search { border-color: var(--sp-border); background: var(--sp-card); box-shadow: none; }
.hc-wrap .hc-search input { color: var(--sp-text); background: transparent; }
.hc-wrap .hc-search kbd { color: var(--sp-muted); border-color: var(--sp-border); background: var(--sp-bg); }
.hc-wrap .hc-tool-btn { color: var(--sp-sub); border-color: var(--sp-border); border-radius: 8px; background: var(--sp-card); font-family: inherit; }
.hc-wrap .hc-quick :is(strong, small),
.hc-wrap .hc-guide-title :is(strong, small),
.hc-wrap :is(.hc-card, .hc-section-title) h2,
.hc-wrap .hc-card h3 { color: var(--sp-text); }
.hc-wrap :is(.hc-quick small, .hc-guide-title small, .hc-card p, .hc-section-title p) { color: var(--sp-sub); }
.hc-wrap .hc-guide summary { border-color: var(--sp-border); background: var(--sp-card); }
.hc-wrap .hc-guide[open] summary,
.hc-wrap .hc-guide summary:hover { background: color-mix(in srgb, var(--sp-accent) 4%, var(--sp-card)); }
.hc-wrap .hc-guide-body { border-color: var(--sp-border); color: var(--sp-sub); background: var(--sp-card); }
.hc-wrap .hc-steps li > span,
.hc-wrap .hc-guide-num { color: #fff; border-color: transparent; background: linear-gradient(145deg, #6f6fe4, #4949b9); }
.hc-wrap :is(.hc-tip, .hc-definition, .hc-warning, .hc-mini-card) { border-color: var(--sp-border); color: var(--sp-sub); background: var(--sp-bg); }
.hc-wrap :is(.hc-tip, .hc-definition, .hc-warning, .hc-mini-card) strong { color: var(--sp-text); }
.hc-wrap .hc-check.complete .hc-check-icon { color: var(--sp-teal); background: color-mix(in srgb, var(--sp-teal) 12%, var(--sp-card)); }
.hc-wrap .hc-contents a { color: var(--sp-sub); }
.hc-wrap .hc-contents a:hover { color: var(--sp-accent); background: var(--sp-bg); }
.hc-wrap .hc-account-stats div { border-color: var(--sp-border); color: var(--sp-sub); }
.hc-wrap .hc-account-stats strong { color: var(--sp-text); }
.hc-wrap .hc-support { color: var(--sp-text); background: linear-gradient(100deg, color-mix(in srgb, var(--sp-accent) 7%, var(--sp-card)), var(--sp-card)) !important; }
.hc-wrap .hc-support :is(h2, span) { color: var(--sp-text); }
.hc-wrap .hc-support p { color: var(--sp-sub); }
.hc-wrap .hc-btn-light { color: #fff; background: linear-gradient(135deg, #6868df, #4e4ec4); box-shadow: 0 7px 15px rgba(91, 91, 214, .2); }

@media (max-width: 700px) {
    .hc-wrap .hc-toolbar { align-items: stretch; flex-direction: column; }
    .hc-wrap .hc-search { width: 100%; max-width: none; }
}


/* ============================================================
   SELLER DASHBOARD (sdb-*)
   Company-style overview: a figures strip, performance chart,
   reports table and side panels. Flat surfaces, hairline borders,
   no card shadows; one accent for links and the primary action;
   teal/amber/red only as status dots and badges.
   ============================================================ */
.sdb { display: grid; gap: 20px; color: var(--sp-text); font-size: 13px; line-height: 1.5; }
.sdb *, .sdb *::before, .sdb *::after { box-sizing: border-box; }

/* Status dot — the only place status color appears outside badges. */
.sdb-dot { display: inline-block; width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: var(--sp-muted); }
.sdb-dot.ok { background: var(--sp-teal); }
.sdb-dot.warn { background: var(--sp-amber); }
.sdb-dot.danger { background: var(--sp-red); }
.sdb-dot.accent { background: var(--sp-accent); }

/* ---------- Toolbar ---------- */
.sdb-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.sdb-toolbar-copy h2 { margin: 0; color: var(--sp-text); font-size: 20px; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; }
.sdb-meta { display: flex; flex-wrap: wrap; gap: 4px 0; margin-top: 4px; color: var(--sp-sub); font-size: 12.5px; }
.sdb-meta > span { display: inline-flex; align-items: center; gap: 7px; }
.sdb-meta > span + span::before { content: ""; width: 1px; height: 12px; margin: 0 12px; background: var(--sp-border); }
.sdb-toolbar-title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sdb-toolbar-actions { display: flex; flex-shrink: 0; gap: 8px; }

.sdb-btn {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 14px;
    border: 1px solid var(--sp-border);
    border-radius: 8px;
    color: var(--sp-text);
    background: var(--sp-card);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
.sdb-btn:hover { background: var(--sp-bg); border-color: color-mix(in srgb, var(--sp-text) 20%, var(--sp-border)); }
.sdb-btn-primary { border-color: var(--sp-accent); color: #fff; background: var(--sp-accent); }
.sdb-btn-primary:hover { border-color: var(--sp-accent-dark); background: var(--sp-accent-dark); }

/* ---------- Alert ---------- */
.sdb-alert {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid var(--sp-border);
    border-radius: 10px;
    background: var(--sp-card);
    font-size: 13px;
}
.sdb-alert > i { flex-shrink: 0; font-size: 20px; color: var(--sp-accent); }
.sdb-alert p { flex: 1; min-width: 0; margin: 0; color: var(--sp-sub); }
.sdb-alert strong { color: var(--sp-text); font-weight: 700; }
.sdb-alert a { flex-shrink: 0; color: var(--sp-accent); font-weight: 700; text-decoration: none; white-space: nowrap; }
.sdb-alert a:hover { text-decoration: underline; }
.sdb-alert.info { border-color: color-mix(in srgb, var(--sp-accent) 30%, var(--sp-border)); background: color-mix(in srgb, var(--sp-accent) 5%, var(--sp-card)); }
.sdb-alert.warning { border-color: color-mix(in srgb, var(--sp-amber) 40%, var(--sp-border)); background: color-mix(in srgb, var(--sp-amber) 7%, var(--sp-card)); }
.sdb-alert.warning > i { color: var(--sp-amber); }
.sdb-alert.danger { border-color: color-mix(in srgb, var(--sp-red) 40%, var(--sp-border)); background: color-mix(in srgb, var(--sp-red) 6%, var(--sp-card)); }
.sdb-alert.danger > i { color: var(--sp-red); }

/* ---------- Figures row ---------- */
/* Five stat cards with soft depth. Color appears only on the icon and the
   status line of a card that is actually in a due / overdue state. */
.sdb-stats { --stat-cols: 5; display: grid; grid-template-columns: repeat(var(--stat-cols), minmax(0, 1fr)); gap: 14px; }
.sdb-stats.cols-4 { --stat-cols: 4; }
.sdb-stats.cols-3 { --stat-cols: 3; }
.sdb-stat {
    --stat-color: var(--sp-accent);
    --stat-tint: color-mix(in srgb, var(--sp-accent) 10%, var(--sp-card));
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 18px 20px 16px;
    overflow: hidden;
    border: 1px solid var(--sp-border);
    border-radius: 12px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--sp-card) 100%, transparent) 0%, var(--sp-card) 100%);
    box-shadow: 0 1px 2px rgba(23, 32, 51, .04), 0 10px 24px -16px rgba(23, 32, 51, .22);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sdb-stat::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--stat-color) 45%, transparent), transparent); }
.sdb-stat::after { content: ""; position: absolute; top: -48px; right: -48px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, var(--stat-tint) 0%, transparent 70%); pointer-events: none; }
.sdb-stat:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--stat-color) 30%, var(--sp-border)); box-shadow: 0 2px 4px rgba(23, 32, 51, .05), 0 16px 30px -16px rgba(23, 32, 51, .3); }
.sdb-stat.is-ok { --stat-color: var(--sp-teal); --stat-tint: color-mix(in srgb, var(--sp-teal) 11%, var(--sp-card)); }
.sdb-stat.is-warn { --stat-color: var(--sp-amber); --stat-tint: color-mix(in srgb, var(--sp-amber) 12%, var(--sp-card)); }
.sdb-stat.is-danger { --stat-color: var(--sp-red); --stat-tint: color-mix(in srgb, var(--sp-red) 11%, var(--sp-card)); }
.sdb-stat > * { position: relative; z-index: 1; }
.sdb-stat-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sdb-stat-label { color: var(--sp-sub); font-size: 12.5px; font-weight: 600; }
.sdb-stat-icon {
    display: inline-flex;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--stat-color) 22%, transparent);
    border-radius: 10px;
    color: var(--stat-color);
    background: var(--stat-tint);
    font-size: 17px;
}
.sdb-stat-value { margin-top: 6px; overflow: hidden; color: var(--sp-text); font-size: 24px; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }
.sdb-stat-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--sp-muted); font-size: 12px; }
.sdb-stat.is-warn .sdb-stat-meta { color: var(--sp-amber); font-weight: 600; }
.sdb-stat.is-danger .sdb-stat-meta { color: var(--sp-red); font-weight: 600; }
.sdb-stat-meta a { color: var(--sp-accent); font-weight: 700; text-decoration: none; }
.sdb-stat-meta a:hover { text-decoration: underline; }
.sd-dark .sdb-stat { box-shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 12px 26px -16px rgba(0, 0, 0, .6); }

/* ---------- Layout ---------- */
.sdb-columns { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.sdb-main, .sdb-side { display: grid; gap: 20px; min-width: 0; }

/* ---------- Cards ---------- */
.sdb-card { overflow: hidden; border: 1px solid var(--sp-border); border-radius: 10px; background: var(--sp-card); }
.sdb-card-head { display: flex; min-height: 56px; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--sp-border-soft); }
.sdb-card-head h3 { margin: 0; color: var(--sp-text); font-size: 14px; font-weight: 700; }
.sdb-card-head p { margin: 2px 0 0; color: var(--sp-muted); font-size: 12px; }
.sdb-link { flex-shrink: 0; color: var(--sp-accent); font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.sdb-link:hover { text-decoration: underline; }

.sdb-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: 6px;
    color: var(--sp-sub);
    background: var(--sp-bg);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.sdb-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sdb-badge.ok { color: var(--sp-teal); background: color-mix(in srgb, var(--sp-teal) 11%, var(--sp-card)); }
.sdb-badge.warn { color: var(--sp-amber); background: color-mix(in srgb, var(--sp-amber) 12%, var(--sp-card)); }
.sdb-badge.danger { color: var(--sp-red); background: color-mix(in srgb, var(--sp-red) 11%, var(--sp-card)); }

.sdb-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 220px; padding: 28px 20px; text-align: center; }
.sdb-empty.compact { min-height: 120px; }
.sdb-empty strong { color: var(--sp-text); font-size: 13px; font-weight: 700; }
.sdb-empty span { max-width: 360px; color: var(--sp-muted); font-size: 12.5px; }

/* ---------- Performance ---------- */
.sdb-segmented { display: inline-flex; padding: 2px; border: 1px solid var(--sp-border); border-radius: 8px; background: var(--sp-bg); }
.sdb-segmented button { padding: 5px 12px; border: 0; border-radius: 6px; color: var(--sp-sub); background: transparent; font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.sdb-segmented button.active { color: var(--sp-text); background: var(--sp-card); box-shadow: 0 1px 2px rgba(23, 32, 51, .1); }
.sdb-chart-head { flex-wrap: wrap; }
.sdb-chart-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sdb-select { position: relative; display: inline-flex; }
.sdb-select select {
    min-height: 32px;
    padding: 0 30px 0 12px;
    border: 1px solid var(--sp-border);
    border-radius: 8px;
    color: var(--sp-text);
    background: var(--sp-card);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
.sdb-select::after { content: ""; position: absolute; top: 50%; right: 11px; width: 7px; height: 7px; border-right: 1.5px solid var(--sp-sub); border-bottom: 1.5px solid var(--sp-sub); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.sdb-select select:focus { outline: 0; border-color: var(--sp-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sp-accent) 15%, transparent); }
.sdb-chart { position: relative; padding: 12px 20px 10px; }
.sdb-chart-canvas { position: relative; width: 100%; height: 300px; }
.sdb-chart-canvas canvas { width: 100% !important; height: 100% !important; }
.sdb-chart-canvas { transition: opacity .2s ease; }
.sdb-chart.is-loading .sdb-chart-canvas { opacity: .4; pointer-events: none; }
.sdb-chart-status { margin: 8px 0 0; color: var(--sp-red); font-size: 12px; font-weight: 600; }
.sdb-select select:disabled { opacity: .6; cursor: progress; }
.sdb-figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 0; border-top: 1px solid var(--sp-border-soft); background: var(--sp-border-soft); }
.sdb-figures > div { min-width: 0; padding: 14px 20px; background: var(--sp-card); }
.sdb-figures span { display: block; color: var(--sp-muted); font-size: 12px; }
.sdb-figures strong { display: block; margin-top: 3px; overflow: hidden; color: var(--sp-text); font-size: 16px; font-weight: 700; letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap; }
.sdb-figures small { display: block; margin-top: 2px; color: var(--sp-muted); font-size: 12px; }
.sdb-figures small.up { color: var(--sp-teal); font-weight: 600; }
.sdb-figures small.down { color: var(--sp-red); font-weight: 600; }

/* ---------- Table ---------- */
.sdb-table-wrap { overflow-x: auto; }
.sdb-table { width: 100%; min-width: 620px; border-collapse: collapse; }
.sdb-table th { padding: 10px 20px; border-bottom: 1px solid var(--sp-border-soft); color: var(--sp-muted); background: var(--sp-bg); font-size: 12px; font-weight: 600; text-align: left; white-space: nowrap; }
.sdb-table td { padding: 12px 20px; border-bottom: 1px solid var(--sp-border-soft); color: var(--sp-sub); font-size: 13px; white-space: nowrap; }
.sdb-table tbody tr:last-child td { border-bottom: 0; }
.sdb-table td.strong { color: var(--sp-text); font-weight: 600; }
.sdb-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.sdb-table td.num { color: var(--sp-text); }
.sdb-table tbody tr:hover td { background: var(--sp-bg); }

/* ---------- Side panels ---------- */
.sdb-checklist { margin: 0; padding: 0; list-style: none; }
.sdb-checklist li { display: flex; align-items: center; gap: 12px; padding: 13px 20px; border-bottom: 1px solid var(--sp-border-soft); }
.sdb-checklist li:last-child { border-bottom: 0; }
.sdb-checklist li > div { flex: 1; min-width: 0; }
.sdb-checklist strong { display: block; color: var(--sp-text); font-size: 13px; font-weight: 600; }
.sdb-checklist small { display: block; margin-top: 1px; color: var(--sp-muted); font-size: 12px; }
.sdb-checklist a { flex-shrink: 0; color: var(--sp-accent); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.sdb-checklist a:hover { text-decoration: underline; }

.sdb-kv { margin: 0; }
.sdb-kv > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px; border-bottom: 1px solid var(--sp-border-soft); }
.sdb-kv > div:last-child { border-bottom: 0; }
.sdb-kv dt { color: var(--sp-sub); font-size: 12.5px; }
.sdb-kv dd { margin: 0; overflow: hidden; color: var(--sp-text); font-size: 13px; font-weight: 600; text-align: right; text-overflow: ellipsis; white-space: nowrap; }

.sdb-list { margin: 0; padding: 0; list-style: none; }
.sdb-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--sp-border-soft); }
.sdb-list li:last-child { border-bottom: 0; }
.sdb-list li > div { min-width: 0; }
.sdb-list strong { display: block; overflow: hidden; color: var(--sp-text); font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.sdb-list small { display: block; margin-top: 1px; color: var(--sp-muted); font-size: 12px; }

/* ---------- Page kit: definition grids, documents, forms ---------- */
.sdb-kv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; }
.sdb-kv-grid > div { min-width: 0; padding: 14px 20px; border-bottom: 1px solid var(--sp-border-soft); }
.sdb-kv-grid > div:nth-child(odd) { border-right: 1px solid var(--sp-border-soft); }
.sdb-kv-grid > div:nth-last-child(-n+2) { border-bottom: 0; }
.sdb-kv-grid dt { color: var(--sp-muted); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.sdb-kv-grid dd { margin: 4px 0 0; overflow: hidden; color: var(--sp-text); font-size: 13.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.sdb-kv-grid dd .sdb-link { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.sdb-kv-grid dd .sdb-link i { font-size: 16px; }
.sdb-kv-tag { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 5px; color: var(--sp-teal); background: color-mix(in srgb, var(--sp-teal) 11%, var(--sp-card)); font-size: 11px; font-weight: 700; vertical-align: 1px; }
.sdb-kv dd.is-warn { color: var(--sp-amber); }
.sdb-kv dd.is-danger { color: var(--sp-red); }
.sdb-footnote { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--sp-muted); font-size: 12.5px; }
.sdb-footnote i { font-size: 16px; }
.sdb-card-body { padding: 18px 20px; }
.sdb-copy { margin: 0; color: var(--sp-sub); font-size: 13px; line-height: 1.6; }
.sdb-copy strong { color: var(--sp-text); }
.sdb-card-note { margin: 0; padding: 12px 20px 16px; border-top: 1px solid var(--sp-border-soft); color: var(--sp-sub); font-size: 12.5px; line-height: 1.55; }
.sdb-card-actions { padding: 0 20px 18px; }
.sdb-card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 14px 20px; border-top: 1px solid var(--sp-border-soft); background: var(--sp-bg); }
.sdb-card-foot strong { display: block; color: var(--sp-text); font-size: 13px; }
.sdb-card-foot span { display: block; margin-top: 1px; color: var(--sp-muted); font-size: 12px; }
.sdb-count { padding: 3px 9px; border-radius: 999px; color: var(--sp-sub); background: var(--sp-bg); font-size: 12px; font-weight: 600; white-space: nowrap; }
.sdb-btn-block { width: 100%; }
.sdb-doc { display: flex; align-items: center; gap: 14px; padding: 18px 20px; }
.sdb-doc-icon { display: flex; width: 44px; height: 52px; flex-shrink: 0; align-items: center; justify-content: center; border: 1px solid var(--sp-border); border-radius: 8px; color: var(--sp-red); background: var(--sp-bg); font-size: 24px; }
.sdb-doc strong { display: block; color: var(--sp-text); font-size: 13.5px; font-weight: 700; }
.sdb-doc small { display: block; margin-top: 2px; color: var(--sp-muted); font-size: 12px; }
.sdb-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.sdb-chips span { max-width: 100%; overflow: hidden; padding: 4px 10px; border: 1px solid var(--sp-border); border-radius: 999px; color: var(--sp-sub); background: var(--sp-bg); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.sdb-note { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; border: 1px solid color-mix(in srgb, var(--sp-teal) 30%, var(--sp-border)); border-radius: 10px; color: var(--sp-sub); background: color-mix(in srgb, var(--sp-teal) 6%, var(--sp-card)); font-size: 13px; line-height: 1.55; }
.sdb-note > i { flex-shrink: 0; font-size: 20px; color: var(--sp-teal); }
.sdb-note strong { color: var(--sp-text); }
.sdb-form-error { display: flex; align-items: center; gap: 8px; margin: 14px 20px 0; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--sp-red) 35%, var(--sp-border)); border-radius: 8px; color: var(--sp-red); background: color-mix(in srgb, var(--sp-red) 7%, var(--sp-card)); font-size: 12.5px; font-weight: 600; }
.sdb-table td.wrap { white-space: normal; line-height: 1.45; }
.sdb-table td.right, .sdb-table th.right { text-align: right; }
.sdb-table th.check, .sdb-table td.check { width: 44px; padding-right: 0; }
.sdb-table code { padding: 2px 6px; border-radius: 5px; color: var(--sp-sub); background: var(--sp-bg); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; }
.sdb-table-products { min-width: 720px; }
.sdb-table-products td.wrap { min-width: 320px; }
.sdb-check { position: relative; display: inline-flex; width: 18px; height: 18px; cursor: pointer; }
.sdb-check input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sdb-check span { width: 18px; height: 18px; border: 1.5px solid var(--sp-border); border-radius: 5px; background: var(--sp-card); transition: background-color .15s ease, border-color .15s ease; }
.sdb-check input:checked + span, .sdb-check input:indeterminate + span { border-color: var(--sp-accent); background: var(--sp-accent); }
.sdb-check input:checked + span::after { content: ""; position: absolute; top: 3px; left: 6px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.sdb-check input:indeterminate + span::after { content: ""; position: absolute; top: 8px; left: 4px; width: 10px; height: 2px; background: #fff; }
.sdb-check input:focus-visible + span { box-shadow: 0 0 0 3px color-mix(in srgb, var(--sp-accent) 20%, transparent); }
.sdb-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ---------- Sales reporting ---------- */
/* Page-specific controls use the dashboard's spacing, surfaces, and status language. */
.sdb-sales-workspace { grid-template-columns: minmax(0, 1fr) 340px; }
.sdb-sales-periods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; gap: 10px; }
.sdb-sales-periods li { border: 1px solid var(--sp-border-soft); border-radius: 8px; }
.sdb-sales-periods li:last-child { border-bottom: 1px solid var(--sp-border-soft); }
.sdb-sales-periods .sdb-btn { min-height: 32px; padding: 0 10px; font-size: 12px; }

.sdb-sales-form { padding: 0 20px; }
.sdb-sales-section { min-width: 0; margin: 0; padding: 20px 0 22px; border: 0; border-bottom: 1px solid var(--sp-border-soft); }
.sdb-sales-section legend { display: flex; width: 100%; align-items: center; gap: 10px; margin: 0 0 18px; padding: 0; color: var(--sp-text); font-size: 13px; font-weight: 700; }
.sdb-sales-section legend > span { display: inline-flex; width: 30px; height: 30px; flex: 0 0 30px; align-items: center; justify-content: center; border-radius: 8px; color: var(--sp-accent); background: var(--sp-accent-soft); font-size: 11px; }
.sdb-sales-section legend small { display: block; margin-top: 1px; color: var(--sp-muted); font-size: 11.5px; font-weight: 400; }
.sdb-sales-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sdb-sales-field.full { grid-column: 1 / -1; }
.sdb-sales-field label { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; color: var(--sp-sub); font-size: 12px; font-weight: 600; }
.sdb-sales-field label em { color: var(--sp-red); font-size: 10.5px; font-style: normal; font-weight: 600; }
.sdb-sales-field > small { display: block; margin-top: 5px; color: var(--sp-muted); font-size: 11px; line-height: 1.45; }
.sdb-sales-control { width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--sp-border); border-radius: 8px; outline: 0; color: var(--sp-text); background: var(--sp-card); font: inherit; font-size: 12.5px; transition: border-color .15s ease, box-shadow .15s ease; }
select.sdb-sales-control { cursor: pointer; }
.sdb-sales-control:focus { border-color: var(--sp-accent); box-shadow: var(--sp-focus); }
.sdb-sales-control[readonly] { color: var(--sp-sub); background: var(--sp-bg); }
.sdb-sales-control.is-invalid { border-color: var(--sp-red); }
.sdb-sales-control-wrap { position: relative; }
.sdb-sales-control-wrap > i, .sdb-sales-control-wrap > span { position: absolute; z-index: 1; top: 50%; left: 12px; color: var(--sp-muted); font-size: 15px; transform: translateY(-50%); }
.sdb-sales-control-wrap .sdb-sales-control { padding-left: 36px; }
.sdb-sales-control-wrap.money > span { color: var(--sp-sub); font-size: 12px; font-weight: 700; }
.sdb-sales-error { display: block; margin-top: 5px; color: var(--sp-red); font-size: 11px; }

.sdb-sales-products { min-height: 48px; padding: 8px; border: 1px solid var(--sp-border-soft); border-radius: 8px; background: var(--sp-bg); }
.sdb-sales-products-empty { display: flex; min-height: 30px; align-items: center; gap: 8px; padding: 0 4px; color: var(--sp-muted); font-size: 11.5px; }
.sdb-sales-products-empty i { color: var(--sp-accent); font-size: 17px; }
.sdb-sales-products-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sdb-sales-products-list li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border: 1px solid var(--sp-border); border-radius: 6px; color: var(--sp-sub); background: var(--sp-card); font-size: 11.5px; }
.sdb-sales-products-list li i { color: var(--sp-teal); font-size: 14px; }
.sdb-sales-products-list li small { color: var(--sp-muted); }

.sdb-sales-upload { border: 1px dashed var(--sp-border); border-radius: 8px; background: var(--sp-bg); transition: border-color .15s ease, background-color .15s ease; }
.sdb-sales-upload:hover, .sdb-sales-upload.is-dragging { border-color: var(--sp-accent); background: color-mix(in srgb, var(--sp-accent) 4%, var(--sp-card)); }
.sdb-sales-upload input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.sdb-sales-upload > label { display: flex; min-height: 82px; align-items: center; gap: 12px; margin: 0; padding: 14px; cursor: pointer; }
.sdb-sales-upload > label > span:nth-child(2) { min-width: 0; flex: 1; }
.sdb-sales-upload strong, .sdb-sales-upload small { display: block; }
.sdb-sales-upload strong { margin-bottom: 2px; color: var(--sp-text); font-size: 12.5px; }
.sdb-sales-upload small { color: var(--sp-muted); font-size: 11px; font-weight: 400; }
.sdb-sales-upload b { padding: 6px 10px; border: 1px solid var(--sp-border); border-radius: 7px; color: var(--sp-accent); background: var(--sp-card); font-size: 11.5px; }
.sdb-sales-upload-icon { display: inline-flex; width: 38px; height: 38px; flex: 0 0 38px; align-items: center; justify-content: center; border: 1px solid var(--sp-border-soft); border-radius: 9px; color: var(--sp-sub); background: var(--sp-card); font-size: 19px; }
.sdb-sales-files { display: grid; gap: 6px; margin-top: 8px; }
.sdb-sales-file { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid var(--sp-border-soft); border-radius: 7px; color: var(--sp-sub); background: var(--sp-card); font-size: 11.5px; }
.sdb-sales-file > span { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sdb-sales-file small { color: var(--sp-muted); }
.sdb-sales-file button { padding: 2px; border: 0; color: var(--sp-red); background: transparent; font-size: 16px; cursor: pointer; }
.sdb-sales-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; }
.sdb-sales-form-footer p { display: flex; align-items: center; gap: 7px; margin: 0; color: var(--sp-muted); font-size: 11.5px; }
.sdb-sales-form-footer p i { color: var(--sp-accent); font-size: 16px; }

.sdb-sales-terms { position: sticky; top: 18px; }
.sdb-sales-estimate { margin: 16px 20px; padding: 15px; border: 1px solid var(--sp-border-soft); border-radius: 8px; background: var(--sp-bg); }
.sdb-sales-estimate span, .sdb-sales-estimate strong, .sdb-sales-estimate small { display: block; }
.sdb-sales-estimate span { color: var(--sp-sub); font-size: 12px; font-weight: 600; }
.sdb-sales-estimate strong { margin-top: 4px; color: var(--sp-text); font-size: 22px; letter-spacing: -.02em; }
.sdb-sales-estimate small { margin-top: 2px; color: var(--sp-muted); font-size: 11.5px; }
.sdb-sales-locked { display: grid; gap: 14px; padding: 20px; }
.sdb-sales-date, .sdb-sales-prepare { padding: 16px; border: 1px solid var(--sp-border-soft); border-radius: 8px; background: var(--sp-bg); }
.sdb-sales-date span, .sdb-sales-date strong, .sdb-sales-date small { display: block; }
.sdb-sales-date span { color: var(--sp-muted); font-size: 11px; font-weight: 600; text-transform: uppercase; }
.sdb-sales-date strong { margin-top: 4px; color: var(--sp-text); font-size: 18px; }
.sdb-sales-date small { margin-top: 3px; color: var(--sp-muted); font-size: 11.5px; }
.sdb-sales-prepare h4 { margin: 0 0 10px; color: var(--sp-text); font-size: 13px; }
.sdb-sales-prepare ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sdb-sales-prepare li { display: flex; align-items: center; gap: 8px; color: var(--sp-sub); font-size: 12px; }
.sdb-sales-empty { gap: 7px; }
.sdb-sales-empty .sdb-btn { margin-top: 10px; }
.sdb-sales-empty-icon { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; margin-bottom: 5px; border: 1px solid var(--sp-border-soft); border-radius: 10px; color: var(--sp-sub); background: var(--sp-bg); font-size: 22px; }

.sdb-sales-ledger { min-width: 940px; }
.sdb-sales-ledger-tools { display: flex; align-items: center; gap: 12px; }
.sdb-sales-ledger td { vertical-align: middle; }
.sdb-sales-cell strong, .sdb-sales-cell small { display: block; }
.sdb-sales-cell strong { color: var(--sp-text); font-size: 12.5px; font-weight: 600; }
.sdb-sales-cell small { margin-top: 2px; color: var(--sp-muted); font-size: 11px; }
.sdb-sales-cell small.danger { color: var(--sp-red); }
.sdb-sales-record { display: flex; flex-wrap: wrap; gap: 3px 8px; min-width: 180px; }
.sdb-sales-record strong { width: 100%; color: var(--sp-text); font-size: 12px; }
.sdb-sales-record span, .sdb-sales-record a { display: inline-flex; align-items: center; gap: 3px; color: var(--sp-muted); font-size: 11px; text-decoration: none; }
.sdb-sales-record a { color: var(--sp-accent); }
.sdb-sales-payment { display: flex; align-items: center; gap: 8px; }
.sdb-sales-actions, .sdb-sales-actions form { display: flex; align-items: center; gap: 6px; margin: 0; }
.sdb-sales-ledger .sdb-btn { min-height: 30px; padding: 0 9px; font-size: 11px; }

@media (max-width: 1040px) {
    .sdb-sales-workspace { grid-template-columns: 1fr; }
    .sdb-sales-workspace > .sdb-side { grid-template-columns: 1fr; }
    .sdb-sales-terms { position: static; }
}
@media (max-width: 760px) {
    .sdb-sales-periods, .sdb-sales-grid { grid-template-columns: 1fr; }
    .sdb-sales-form { padding: 0 16px; }
    .sdb-sales-form-footer { align-items: stretch; flex-direction: column; }
    .sdb-sales-form-footer .sdb-btn { width: 100%; }
    .sdb-sales-ledger-tools { width: 100%; justify-content: space-between; }
}
@media (max-width: 480px) {
    .sdb-sales-upload > label { align-items: flex-start; flex-wrap: wrap; }
    .sdb-sales-upload b { margin-left: 50px; }
    .sdb-sales-periods li { align-items: flex-start; flex-direction: column; }
}

/* ---------- Calendar ---------- */
.sdb-calendar { padding: 12px 16px 14px; }
.sdb-legend { display: flex; flex-wrap: wrap; gap: 14px; padding: 10px 20px; border-top: 1px solid var(--sp-border-soft); color: var(--sp-muted); font-size: 12px; }
.sdb-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sdb .fc {
    --fc-border-color: var(--sp-border-soft);
    --fc-page-bg-color: var(--sp-card);
    --fc-neutral-bg-color: var(--sp-bg);
    --fc-neutral-text-color: var(--sp-muted);
    --fc-today-bg-color: color-mix(in srgb, var(--sp-accent) 8%, var(--sp-card));
    --fc-button-bg-color: var(--sp-card);
    --fc-button-border-color: var(--sp-border);
    --fc-button-text-color: var(--sp-sub);
    --fc-button-hover-bg-color: var(--sp-bg);
    --fc-button-hover-border-color: var(--sp-border);
    --fc-button-active-bg-color: var(--sp-bg);
    --fc-button-active-border-color: var(--sp-border);
    --fc-event-bg-color: var(--sp-accent);
    --fc-event-border-color: var(--sp-accent);
    --fc-event-text-color: #fff;
    --fc-list-event-hover-bg-color: var(--sp-bg);
    --fc-highlight-color: color-mix(in srgb, var(--sp-accent) 10%, var(--sp-card));
    color: var(--sp-sub);
    font-size: 11.5px;
}
.sdb .fc .fc-toolbar.fc-header-toolbar { margin-bottom: 10px; }
.sdb .fc .fc-toolbar-title { color: var(--sp-text); font-size: 13.5px !important; font-weight: 700; }
.sdb .fc .fc-button { width: 28px; height: 28px; padding: 0; border-radius: 6px; box-shadow: none !important; font-size: 12px; }
.sdb .fc .fc-button .fc-icon { font-size: 15px; }
.sdb .fc .fc-button-group > .fc-button { margin-left: 4px; border-radius: 6px !important; }
.sdb .fc .fc-scrollgrid { border-radius: 8px; overflow: hidden; }
.sdb .fc .fc-col-header-cell { background: var(--sp-bg); }
.sdb .fc .fc-col-header-cell-cushion { padding: 6px 4px; color: var(--sp-muted); font-size: 10.5px; font-weight: 600; text-decoration: none; }
.sdb .fc .fc-daygrid-day-number { padding: 4px 6px; color: var(--sp-sub); font-size: 11px; text-decoration: none; }
.sdb .fc .fc-day-other .fc-daygrid-day-number { opacity: .45; }
.sdb .fc .fc-day-today .fc-daygrid-day-number { color: var(--sp-accent); font-weight: 700; }
.sdb .fc .fc-daygrid-day-frame { min-height: 46px; }
.sdb .fc .fc-daygrid-day-events { margin-top: 0; }
.sdb .fc .fc-event { border: 0; border-radius: 4px; padding: 1px 4px; font-size: 10px; font-weight: 600; }
.sdb .fc .fc-daygrid-event { margin: 0 3px 2px; }
.sdb .fc .fc-daygrid-more-link { color: var(--sp-accent); font-size: 10px; font-weight: 600; }
.sdb .fc .fc-popover { border-color: var(--sp-border); background: var(--sp-card); box-shadow: var(--sp-shadow-raised); }
.sdb .fc .fc-popover-header { color: var(--sp-text); background: var(--sp-bg); }

/* Large calendar (full-width card near the top of the page) */
.sdb-legend.inline { padding: 0; border: 0; }
.sdb-calendar.large { padding: 16px 20px 20px; }
.sdb-calendar.large .fc { font-size: 12.5px; }
.sdb-calendar.large .fc .fc-toolbar.fc-header-toolbar { margin-bottom: 14px; }
.sdb-calendar.large .fc .fc-toolbar-title { font-size: 16px !important; }
.sdb-calendar.large .fc .fc-button { width: auto; height: 32px; padding: 0 12px; font-size: 12px; font-weight: 600; text-transform: none; }
.sdb-calendar.large .fc .fc-button.fc-prev-button, .sdb-calendar.large .fc .fc-button.fc-next-button { width: 32px; padding: 0; }
.sdb-calendar.large .fc .fc-button-group > .fc-button { margin-left: 0; border-radius: 0 !important; }
.sdb-calendar.large .fc .fc-button-group > .fc-button:first-child { border-top-left-radius: 6px !important; border-bottom-left-radius: 6px !important; }
.sdb-calendar.large .fc .fc-button-group > .fc-button:last-child { border-top-right-radius: 6px !important; border-bottom-right-radius: 6px !important; }
.sdb-calendar.large .fc .fc-button-primary:not(:disabled).fc-button-active { color: #fff; background: var(--sp-accent); border-color: var(--sp-accent); }
.sdb-calendar.large .fc .fc-today-button { margin-left: 8px; }
.sdb-calendar.large .fc .fc-col-header-cell-cushion { padding: 10px 6px; font-size: 11.5px; letter-spacing: .03em; text-transform: uppercase; }
.sdb-calendar.large .fc .fc-daygrid-day-number { padding: 8px 10px; font-size: 12.5px; }
.sdb-calendar.large .fc .fc-day-today .fc-daygrid-day-number { display: inline-flex; min-width: 24px; height: 24px; margin: 5px; padding: 0 6px; align-items: center; justify-content: center; border-radius: 999px; color: #fff; background: var(--sp-accent); }
.sdb-calendar.large .fc .fc-daygrid-day-frame { min-height: 104px; }
.sdb-calendar.large .fc .fc-event { border-radius: 5px; padding: 3px 7px; font-size: 11.5px; }
.sdb-calendar.large .fc .fc-daygrid-event { margin: 1px 6px 3px; }
.sdb-calendar.large .fc .fc-daygrid-more-link { font-size: 11px; margin-left: 6px; }
.sdb-calendar.large .fc .fc-list { border-radius: 8px; }
.sdb-calendar.large .fc .fc-list-day-cushion { background: var(--sp-bg); }
.sdb-calendar.large .fc .fc-list-event td { padding: 10px 12px; font-size: 12.5px; }
.sdb-calendar.large .fc .fc-list-empty { color: var(--sp-muted); background: var(--sp-bg); }

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
    .sdb-stats, .sdb-stats.cols-4 { --stat-cols: 3; }
    .sdb-columns { grid-template-columns: minmax(0, 1fr) 320px; }
}
@media (max-width: 1040px) {
    .sdb-columns { grid-template-columns: 1fr; }
    .sdb-side { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (max-width: 760px) {
    .sdb { gap: 16px; }
    .sdb-toolbar { flex-direction: column; }
    .sdb-toolbar-actions { width: 100%; }
    .sdb-toolbar-actions .sdb-btn { flex: 1; }
    .sdb-alert { flex-wrap: wrap; }
    .sdb-alert a { margin-left: 32px; }
    .sdb-stats, .sdb-stats.cols-4, .sdb-stats.cols-3 { --stat-cols: 2; }
    .sdb-stat { padding: 14px 16px 14px; }
    .sdb-stat-value { font-size: 21px; }
    .sdb-side { grid-template-columns: 1fr; }
    .sdb-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sdb-kv-grid { grid-template-columns: 1fr; }
    .sdb-kv-grid > div:nth-child(odd) { border-right: 0; }
    .sdb-kv-grid > div:nth-last-child(2) { border-bottom: 1px solid var(--sp-border-soft); }
    .sdb-kv-grid > div, .sdb-doc, .sdb-card-body, .sdb-card-actions, .sdb-card-foot, .sdb-card-note { padding-right: 16px; padding-left: 16px; }
    .sdb-chart { padding: 8px 10px 6px; }
    .sdb-chart-canvas { height: 240px; }
    .sdb-chart-controls { width: 100%; }
    .sdb-chart-controls .sdb-select { flex: 1; }
    .sdb-chart-controls .sdb-select select { width: 100%; }
    .sdb-card-head { padding: 12px 16px; }
    .sdb-calendar-card .sdb-card-head { flex-wrap: wrap; }
    .sdb-calendar.large { padding: 12px 12px 14px; }
    .sdb-calendar.large .fc .fc-toolbar.fc-header-toolbar { flex-direction: column; gap: 8px; }
    .sdb-calendar.large .fc .fc-toolbar-title { font-size: 14px !important; }
    .sdb-chart, .sdb-figures > div, .sdb-checklist li, .sdb-kv > div, .sdb-list li, .sdb-legend { padding-right: 16px; padding-left: 16px; }
    .sdb-table th, .sdb-table td { padding-right: 16px; padding-left: 16px; }
    .sdb-meta > span + span::before { margin: 0 8px; }
}
@media (max-width: 480px) {
    .sdb-stats, .sdb-stats.cols-4, .sdb-stats.cols-3 { --stat-cols: 1; }
}

/* Layout-level compliance notice must not overflow narrow screens. */
@media (max-width: 680px) {
    .sd-compliance-notice { flex-wrap: wrap; }
    .sd-compliance-notice .sd-compliance-action-btn { width: 100%; text-align: center; }
}

/* ============================================================
   SELLER SIDEBAR — flat navigation
   Final layer for the seller sidebar: plain icons (no icon boxes),
   a filled row for the active item, quieter section labels, and a
   flat account footer. Overrides the earlier icon-box layers.
   ============================================================ */
:root { --sp-sidebar-bg: #141c30; --sp-sidebar-w: 248px; }
.sd-dark { --sp-sidebar-bg: #0f1628; }

.sp-sidebar { border-right: 1px solid rgba(255, 255, 255, .06); box-shadow: none; }
.sp-sidebar-header { height: var(--sp-header-h); padding: 0 18px; background: transparent; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.sp-brand { align-items: center; gap: 11px; }
.sp-brand-mark { display: flex; width: 34px; height: 34px; flex-shrink: 0; align-items: center; justify-content: center; }
.sp-brand-mark img { width: 34px; height: 34px; border-radius: 9px; object-fit: contain; }
.sp-brand-text { gap: 2px; line-height: 1.15; }
.sp-brand-name, .sp-brand-name span { color: #fff; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.sp-brand-portal { order: 2; color: rgba(255, 255, 255, .5); font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.sp-sidebar-close { border-color: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .75); background: rgba(255, 255, 255, .06); }

.sp-nav { padding: 12px 12px 8px; gap: 0; }
.sp-nav-group { gap: 2px; margin-bottom: 10px; }
.sp-nav-label { padding: 12px 10px 6px; color: rgba(255, 255, 255, .38); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.sp-sidebar .sp-nav-item {
    min-height: 38px;
    gap: 10px;
    padding: 8px 10px;
    border: 0;
    border-radius: 7px;
    color: rgba(255, 255, 255, .74);
    background: transparent;
    font-size: 13px;
    font-weight: 500;
    box-shadow: none;
}
.sp-sidebar .sp-nav-item::before { display: none; }
.sp-sidebar .sp-nav-item:hover,
.sd-dark .sp-sidebar .sp-nav-item:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.sp-sidebar .sp-nav-item.active,
.sd-dark .sp-sidebar .sp-nav-item.active { color: #fff; background: rgba(255, 255, 255, .1); font-weight: 600; box-shadow: none; }
.sp-sidebar .sp-nav-ico,
.sp-sidebar .sp-nav-item:hover .sp-nav-ico,
.sp-sidebar .sp-nav-item.active .sp-nav-ico {
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 20px;
    border: 0 !important;
    border-radius: 0 !important;
    color: rgba(255, 255, 255, .55) !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 18px !important;
}
.sp-sidebar .sp-nav-item:hover .sp-nav-ico { color: #fff !important; }
.sp-sidebar .sp-nav-item.active .sp-nav-ico { color: #b3b3ff !important; }

.sp-sidebar-foot { padding: 10px 12px 12px; border-top: 1px solid rgba(255, 255, 255, .07); }
.sp-user-card { padding: 8px 8px 8px 6px; border: 0; border-radius: 8px; background: transparent; }
.sp-user-card:hover { background: rgba(255, 255, 255, .05); }
.sp-user-avatar { width: 32px; height: 32px; background: var(--sp-accent); font-size: 12.5px; font-weight: 700; }
.sp-user-name { color: #fff; font-size: 12.5px; font-weight: 600; }
.sp-user-role { color: rgba(255, 255, 255, .5); font-size: 11px; }
.sp-logout-btn { width: 30px; height: 30px; color: rgba(255, 255, 255, .55); font-size: 18px; }
.sp-logout-btn:hover { color: #fff; background: rgba(255, 255, 255, .08); }

/* ---------- Seller footer: one quiet line ---------- */
.sp-footer { padding: 14px 28px; border-top: 1px solid var(--sp-border); color: var(--sp-muted); background: var(--sp-card); font-size: 12px; text-align: left; }
.sp-footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; }
.sp-footer-copy strong { color: var(--sp-sub); font-weight: 700; }
.sp-footer-sep { margin: 0 4px; color: var(--sp-muted); opacity: .7; }
.sp-footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; }
.sp-footer-links a { display: inline-flex; align-items: center; gap: 6px; color: var(--sp-muted); font-weight: 500; text-decoration: none; transition: color .15s ease; }
.sp-footer-links a strong { color: var(--sp-sub); font-weight: 700; transition: color .15s ease; }
.sp-footer-links a:hover, .sp-footer-links a:hover strong { color: var(--sp-accent); text-decoration: none; }
.sp-footer-links svg { width: 15px; height: 15px; color: var(--sp-teal); }
@media (max-width: 760px) {
    .sp-footer { padding: 14px 16px; }
    .sp-footer-inner, .sp-footer-links { justify-content: center; text-align: center; }
}

/* ============================================================
   LIGHT THEME — single authoritative layer
   Everything the seller portal shows in light mode is defined
   here, on top of the shared design system above. Rules are
   scoped to body:not(.sd-dark) so the dark theme is untouched.
   The fixed-settlement and ACH pages never had dark rules, so
   their section uses tokens without scoping and works in both.

   1  tokens            7  sales reports (sr-*)
   2  canvas + chrome   8  license application (apply-container)
   3  layout notices    9  fixed settlements (sf-*) + ACH pay (pay-*)
   4  dashboard/license 10 license payment + checkout
   5  workspace pages   11 legacy license panel
   6  help center
   Language: cool-gray page, white cards with a hairline and one
   soft shadow, a second surface tone for table heads and inner
   panels, one accent for actions and links, status colors only
   on things that are actually in that state. No gradients, no
   glow, no decorative blobs.
   ============================================================ */

/* 1. Tokens ------------------------------------------------------- */
:root {
    --sp-bg: #eceff5;
    --sp-surface-2: #f5f7fb;
    --sp-card: #ffffff;
    --sp-border: #d4dbe7;
    --sp-border-soft: #e4e9f2;
    --sp-text: #101a2d;
    --sp-sub: #465266;
    --sp-muted: #75819a;
    --sp-accent: #4f4fd0;
    --sp-accent-dark: #3f3fb8;
    --sp-accent-soft: #ececfc;
    --sp-teal: #0d8a7e;
    --sp-teal-soft: #e5f5f2;
    --sp-amber: #c67b16;
    --sp-amber-soft: #fdf3e2;
    --sp-red: #c23b57;
    --sp-red-soft: #fcedf0;
    --sp-frame: #141c30;
    --sp-frame-line: rgba(255, 255, 255, .09);
    --sp-frame-ink: rgba(255, 255, 255, .82);
    --sp-frame-muted: rgba(255, 255, 255, .5);
    --sp-shadow: 0 1px 2px rgba(16, 26, 45, .05), 0 1px 3px rgba(16, 26, 45, .07);
    --sp-shadow-raised: 0 12px 28px rgba(16, 26, 45, .12);
    --sp-focus: 0 0 0 3px rgba(79, 79, 208, .16);
}
.sd-dark { --sp-surface-2: #111a2c; }

/* 2. Canvas + chrome ---------------------------------------------- */
/* The legacy reset paints <html> navy; in light mode the canvas must be the page gray. */
html:has(body:not(.sd-dark)) { background: var(--sp-bg) !important; }
body:not(.sd-dark) { color-scheme: light; }

/* Top bar shares the sidebar's navy so sidebar + header read as one frame. */
body:not(.sd-dark) .sp-header { background: var(--sp-frame); border-bottom: 0; box-shadow: none; }
body:not(.sd-dark) .sp-header-top { border-bottom: 1px solid var(--sp-frame-line); }
body:not(.sd-dark) .sp-header-brand-name { color: #fff; }
body:not(.sd-dark) .sp-header-portal { color: var(--sp-frame-muted); }
body:not(.sd-dark) .sp-search { border-color: var(--sp-frame-line); color: var(--sp-frame-muted); background: rgba(255, 255, 255, .07); box-shadow: none; }
body:not(.sd-dark) .sp-search:focus-within { border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .11); box-shadow: none; }
body:not(.sd-dark) .sp-search > i { color: var(--sp-frame-muted); }
body:not(.sd-dark) .sp-search input { color: #fff; }
body:not(.sd-dark) .sp-search input::placeholder { color: var(--sp-frame-muted); }
body:not(.sd-dark) .sp-search kbd { border-color: var(--sp-frame-line); color: var(--sp-frame-muted); background: rgba(255, 255, 255, .06); }
body:not(.sd-dark) .sp-search-results { border-color: var(--sp-border); background: var(--sp-card); box-shadow: var(--sp-shadow-raised); }
body:not(.sd-dark) .sp-search-result { color: var(--sp-text); }
body:not(.sd-dark) .sp-search-result:hover,
body:not(.sd-dark) .sp-search-result.selected { color: var(--sp-accent); background: var(--sp-accent-soft); }
body:not(.sd-dark) .sp-header .sp-icon-btn { border: 1px solid var(--sp-frame-line); color: var(--sp-frame-ink); background: rgba(255, 255, 255, .06); box-shadow: none; }
body:not(.sd-dark) .sp-header .sp-icon-btn:hover { border-color: rgba(255, 255, 255, .22); color: #fff; background: rgba(255, 255, 255, .12); }
body:not(.sd-dark) .sp-badge-dot { border-color: var(--sp-frame); }
body:not(.sd-dark) .sp-profile-trigger { border-color: transparent; background: transparent; }
body:not(.sd-dark) .sp-profile-trigger:hover { border-color: transparent; background: rgba(255, 255, 255, .08); }
body:not(.sd-dark) .sp-profile-name { color: #fff; }
body:not(.sd-dark) .sp-profile-role,
body:not(.sd-dark) .sp-profile-chev { color: var(--sp-frame-muted); }
body:not(.sd-dark) .sp-avatar-sm,
body:not(.sd-dark) .sp-avatar-md { background: var(--sp-accent); box-shadow: none; }
body:not(.sd-dark) .sp-sidebar { border-right-color: var(--sp-frame-line); }

/* Dropdown panels */
body:not(.sd-dark) .sp-dd-menu { border-color: var(--sp-border); background: var(--sp-card); box-shadow: var(--sp-shadow-raised); }
body:not(.sd-dark) .sp-dd-item:hover,
body:not(.sd-dark) .sp-notif-item:hover { background: var(--sp-surface-2); }
body:not(.sd-dark) .sp-dd-item.danger,
body:not(.sd-dark) .sp-dd-item.danger i { color: var(--sp-red); }
body:not(.sd-dark) .sp-dd-item.danger:hover { background: var(--sp-red-soft); }
body:not(.sd-dark) .sp-dd-count { color: var(--sp-accent); background: var(--sp-accent-soft); }

/* Page bar, content, footer */
body:not(.sd-dark) .sp-pagebar { background: var(--sp-card); border-bottom: 1px solid var(--sp-border); }
body:not(.sd-dark) .sp-page-title h1 { color: var(--sp-text); }
body:not(.sd-dark) .sp-breadcrumbs,
body:not(.sd-dark) .sp-breadcrumbs a { color: var(--sp-muted); }
body:not(.sd-dark) .sp-breadcrumbs span { color: var(--sp-accent); }
body:not(.sd-dark) .sp-content { background: var(--sp-bg); }
body:not(.sd-dark) .sp-footer { border-top-color: var(--sp-border); background: var(--sp-card); }
body:not(.sd-dark) .sp-overlay { background: rgba(16, 26, 45, .5); }

/* 3. Layout-level notices (compliance banner, flash messages) ------ */
.sd-compliance-notice,
.sd-compliance-notice:hover {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin-bottom: 20px !important;
    padding: 13px 18px !important;
    border: 1px solid var(--sp-border) !important;
    border-radius: 10px !important;
    background: var(--sp-card) !important;
    box-shadow: var(--sp-shadow) !important;
    transform: none !important;
}
.sd-compliance-notice-warning,
.sd-compliance-notice-warning:hover {
    border-color: color-mix(in srgb, var(--sp-amber) 40%, var(--sp-border)) !important;
    background: color-mix(in srgb, var(--sp-amber) 7%, var(--sp-card)) !important;
}
.sd-compliance-notice-danger,
.sd-compliance-notice-danger:hover {
    border-color: color-mix(in srgb, var(--sp-red) 40%, var(--sp-border)) !important;
    background: color-mix(in srgb, var(--sp-red) 6%, var(--sp-card)) !important;
}
.sd-compliance-icon-wrapper,
.sd-dark .sd-compliance-icon-wrapper,
.sd-compliance-notice-warning .sd-compliance-icon-wrapper,
.sd-compliance-notice-danger .sd-compliance-icon-wrapper,
.sd-dark .sd-compliance-notice-warning .sd-compliance-icon-wrapper,
.sd-dark .sd-compliance-notice-danger .sd-compliance-icon-wrapper {
    width: auto; height: auto; border-radius: 0;
    background: transparent; box-shadow: none;
    font-size: 20px;
}
.sd-compliance-notice-warning .sd-compliance-icon-wrapper { color: var(--sp-amber); }
.sd-compliance-notice-danger .sd-compliance-icon-wrapper { color: var(--sp-red); }
.sd-compliance-content { flex: 1; min-width: 0; }
.sd-compliance-title,
.sd-compliance-notice-warning .sd-compliance-title,
.sd-compliance-notice-danger .sd-compliance-title,
.sd-dark .sd-compliance-notice-warning .sd-compliance-title,
.sd-dark .sd-compliance-notice-danger .sd-compliance-title {
    margin: 0 !important;
    color: var(--sp-text) !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
}
.sd-compliance-text { margin: 2px 0 0 !important; color: var(--sp-sub) !important; font-size: 12.5px !important; line-height: 1.5 !important; }
.sd-compliance-text strong { color: var(--sp-text); }
.sd-compliance-action-btn,
.sd-compliance-notice-warning .sd-compliance-action-btn,
.sd-compliance-notice-danger .sd-compliance-action-btn {
    margin-left: auto;
    padding: 8px 14px !important;
    border: 1px solid var(--sp-accent) !important;
    border-radius: 7px !important;
    color: #fff !important;
    background: var(--sp-accent) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    white-space: nowrap;
}
.sd-compliance-action-btn:hover,
.sd-compliance-notice-warning .sd-compliance-action-btn:hover,
.sd-compliance-notice-danger .sd-compliance-action-btn:hover { background: var(--sp-accent-dark) !important; border-color: var(--sp-accent-dark) !important; box-shadow: none !important; }
.sd-compliance-notice-danger .sd-compliance-action-btn { background: var(--sp-red) !important; border-color: var(--sp-red) !important; }
.sd-compliance-notice-danger .sd-compliance-action-btn:hover { background: color-mix(in srgb, var(--sp-red) 85%, #000) !important; border-color: color-mix(in srgb, var(--sp-red) 85%, #000) !important; }
@media (max-width: 760px) {
    .sd-compliance-notice { flex-wrap: wrap !important; }
    .sd-compliance-action-btn { margin-left: 34px; }
}

.sd-alert { padding: 12px 16px; border-radius: 10px; font-size: 13px; }
.sd-alert-success { color: var(--sp-teal) !important; background: var(--sp-teal-soft) !important; border-color: color-mix(in srgb, var(--sp-teal) 35%, var(--sp-border)); }
.sd-alert-error { color: var(--sp-red) !important; background: var(--sp-red-soft) !important; border-color: color-mix(in srgb, var(--sp-red) 35%, var(--sp-border)); }
.sd-dark .sd-alert-success { background: color-mix(in srgb, var(--sp-teal) 14%, var(--sp-card)) !important; }
.sd-dark .sd-alert-error { background: color-mix(in srgb, var(--sp-red) 14%, var(--sp-card)) !important; }

/* 4. Dashboard + license (sdb-*) ----------------------------------- */
body:not(.sd-dark) .sdb-toolbar-copy h2,
body:not(.sd-dark) .sdb-toolbar-title h2 { color: var(--sp-text); }
body:not(.sd-dark) .sdb-btn { border-color: var(--sp-border); color: var(--sp-text); background: var(--sp-card); }
body:not(.sd-dark) .sdb-btn:hover { border-color: color-mix(in srgb, var(--sp-text) 22%, var(--sp-border)); background: var(--sp-surface-2); }
body:not(.sd-dark) .sdb-btn-primary,
body:not(.sd-dark) .sdb-btn-primary:hover { border-color: var(--sp-accent); color: #fff; background: var(--sp-accent); }
body:not(.sd-dark) .sdb-btn-primary:hover { border-color: var(--sp-accent-dark); background: var(--sp-accent-dark); }
body:not(.sd-dark) .sdb-card,
body:not(.sd-dark) .sdb-alert { box-shadow: var(--sp-shadow); }
body:not(.sd-dark) .sdb-card-head { border-bottom-color: var(--sp-border-soft); background: var(--sp-card); }

/* Figures: plain white cards, no glow, no lift. Only a card in a due/overdue state gets color. */
body:not(.sd-dark) .sdb-stat { background: var(--sp-card); box-shadow: var(--sp-shadow); }
body:not(.sd-dark) .sdb-stat::before,
body:not(.sd-dark) .sdb-stat::after { display: none; }
body:not(.sd-dark) .sdb-stat:hover { transform: none; border-color: var(--sp-border); box-shadow: var(--sp-shadow); }
body:not(.sd-dark) .sdb-stat-icon { border-color: var(--sp-border-soft); color: var(--sp-sub); background: var(--sp-surface-2); }
body:not(.sd-dark) .sdb-stat.is-ok .sdb-stat-icon,
body:not(.sd-dark) .sdb-stat.is-warn .sdb-stat-icon,
body:not(.sd-dark) .sdb-stat.is-danger .sdb-stat-icon { border-color: color-mix(in srgb, var(--stat-color) 25%, transparent); color: var(--stat-color); background: var(--stat-tint); }

/* Tables, badges and inner panels use the second surface, never the page gray. */
body:not(.sd-dark) .sdb-table th { color: var(--sp-sub); background: var(--sp-surface-2); border-bottom-color: var(--sp-border); }
body:not(.sd-dark) .sdb-table tbody tr:hover td { background: var(--sp-surface-2); }
body:not(.sd-dark) .sdb-table code,
body:not(.sd-dark) .sdb-count,
body:not(.sd-dark) .sdb-chips span,
body:not(.sd-dark) .sdb-card-foot,
body:not(.sd-dark) .sdb-doc-icon,
body:not(.sd-dark) .sdb-segmented,
body:not(.sd-dark) .sdb-badge:not(.ok, .warn, .danger) { background: var(--sp-surface-2); }
body:not(.sd-dark) .sdb-figures { border-top-color: var(--sp-border-soft); background: var(--sp-border-soft); }
body:not(.sd-dark) .sdb-figures > div { background: var(--sp-card); }
body:not(.sd-dark) .sdb-kv dt,
body:not(.sd-dark) .sdb-kv-grid dt { color: var(--sp-muted); }
body:not(.sd-dark) .sdb-select select { border-color: var(--sp-border); background: var(--sp-card); }
body:not(.sd-dark) .sdb-select select:focus { border-color: var(--sp-accent); box-shadow: var(--sp-focus); }
body:not(.sd-dark) .sdb-segmented button.active { background: var(--sp-card); box-shadow: 0 1px 2px rgba(16, 26, 45, .12); }
body:not(.sd-dark) .sdb-check span { border-color: var(--sp-border); background: var(--sp-card); }
body:not(.sd-dark) .sdb-check input:checked + span,
body:not(.sd-dark) .sdb-check input:indeterminate + span { border-color: var(--sp-accent); background: var(--sp-accent); }

/* Calendar */
body:not(.sd-dark) .sdb .fc {
    --fc-neutral-bg-color: var(--sp-surface-2);
    --fc-button-hover-bg-color: var(--sp-surface-2);
    --fc-button-active-bg-color: var(--sp-surface-2);
    --fc-list-event-hover-bg-color: var(--sp-surface-2);
}
body:not(.sd-dark) .sdb .fc .fc-col-header-cell,
body:not(.sd-dark) .sdb .fc .fc-day-other,
body:not(.sd-dark) .sdb .fc .fc-popover-header,
body:not(.sd-dark) .sdb .fc .fc-list-day-cushion,
body:not(.sd-dark) .sdb .fc .fc-list-empty { background: var(--sp-surface-2); }
body:not(.sd-dark) .sdb .fc .fc-col-header-cell-cushion { color: var(--sp-sub); }
body:not(.sd-dark) .sdb .fc .fc-day-other .fc-daygrid-day-number { opacity: .55; }
body:not(.sd-dark) .sdb .fc .fc-day-today { background: color-mix(in srgb, var(--sp-accent) 7%, var(--sp-card)) !important; }

/* 5. Workspace pages (pw-*, acct-*, res-*, std-*) ------------------- */
/* Billing, settlements, settlement detail, profile, password, Android app, help */
body:not(.sd-dark) .pw-status { background: var(--sp-card); box-shadow: var(--sp-shadow); }
body:not(.sd-dark) .pw-status__icon { color: var(--sp-accent); background: var(--sp-accent-soft); box-shadow: none; }
body:not(.sd-dark) .pw-status--attention .pw-status__icon { color: var(--sp-amber); background: var(--sp-amber-soft); }
body:not(.sd-dark) .pw-status--success .pw-status__icon { color: var(--sp-teal); background: var(--sp-teal-soft); }
body:not(.sd-dark) .pw-status__facts { border-color: var(--sp-border); background: var(--sp-surface-2); }
body:not(.sd-dark) .pw-status__facts div { border-left-color: var(--sp-border); }
body:not(.sd-dark) .pw-card,
body:not(.sd-dark) .pw-metric,
body:not(.sd-dark) .pw-alert { box-shadow: var(--sp-shadow); }

/* Metric cards: no colored top bar. The icon is neutral unless the card carries a tone. */
body:not(.sd-dark) .pw-metric::before { display: none; }
body:not(.sd-dark) .pw-metric__icon {
    color: var(--pw-tone, var(--sp-sub));
    background: color-mix(in srgb, var(--pw-tone, var(--sp-muted)) 12%, var(--sp-card));
    box-shadow: none;
}
body:not(.sd-dark) .pw-head-icon,
body:not(.sd-dark) .pw-record__icon,
body:not(.sd-dark) .pw-empty__icon,
body:not(.sd-dark) .res-feature__icon { color: var(--sp-sub); background: var(--sp-surface-2); box-shadow: inset 0 0 0 1px var(--sp-border-soft); }

body:not(.sd-dark) .pw-segments { border-color: var(--sp-border-soft); background: var(--sp-surface-2); }
body:not(.sd-dark) .pw-segment.active { color: var(--sp-accent); background: var(--sp-card); box-shadow: 0 1px 2px rgba(16, 26, 45, .12); }
body:not(.sd-dark) .pw-search input { border-color: var(--sp-border); background: var(--sp-card); }
body:not(.sd-dark) .pw-search input:focus { border-color: var(--sp-accent); box-shadow: var(--sp-focus); }
body:not(.sd-dark) .pw-table th { color: var(--sp-sub); background: var(--sp-surface-2); border-bottom-color: var(--sp-border); }
body:not(.sd-dark) .pw-table tbody tr:hover { background: var(--sp-surface-2); }
body:not(.sd-dark) .pw-badge:not([class*="pw-badge--"]) { color: var(--sp-sub); background: var(--sp-surface-2); }

/* Buttons: flat accent / flat teal, no gradient, no shadow. */
body:not(.sd-dark) .pw-action { border-color: var(--sp-border); color: var(--sp-sub); background: var(--sp-card); }
body:not(.sd-dark) .pw-action:hover { border-color: color-mix(in srgb, var(--sp-accent) 35%, var(--sp-border)); color: var(--sp-accent); background: var(--sp-card); }
body:not(.sd-dark) .pw-action--primary,
body:not(.sd-dark) .pw-action--primary:hover { border-color: var(--sp-accent); color: #fff; background: var(--sp-accent); box-shadow: none; }
body:not(.sd-dark) .pw-action--primary:hover { border-color: var(--sp-accent-dark); background: var(--sp-accent-dark); }
body:not(.sd-dark) .pw-action--teal,
body:not(.sd-dark) .pw-action--teal:hover { border-color: var(--sp-teal); color: #fff; background: var(--sp-teal); box-shadow: none; }
body:not(.sd-dark) .pw-action--teal:hover { filter: brightness(.94); }

/* Detail tiles, forms and side panels */
body:not(.sd-dark) .std-info { border-color: var(--sp-border-soft); background: var(--sp-surface-2); }
body:not(.sd-dark) .std-filebar,
body:not(.sd-dark) .std-evidence li,
body:not(.sd-dark) .std-pdf,
body:not(.sd-dark) .acct-checks,
body:not(.sd-dark) .res-qr { border-color: var(--sp-border); background: var(--sp-surface-2); }
body:not(.sd-dark) .acct-form-footer { border-top-color: var(--sp-border); background: var(--sp-surface-2); }
body:not(.sd-dark) .acct-input,
body:not(.sd-dark) .acct-textarea { border-color: var(--sp-border); background: var(--sp-card); }
body:not(.sd-dark) .acct-input:focus,
body:not(.sd-dark) .acct-textarea:focus { border-color: var(--sp-accent); box-shadow: var(--sp-focus); }
body:not(.sd-dark) .acct-password-toggle:hover { color: var(--sp-accent); background: var(--sp-surface-2); }
body:not(.sd-dark) .acct-avatar { background: var(--sp-accent); box-shadow: none; }
body:not(.sd-dark) .acct-strength__track { background: var(--sp-border); }
body:not(.sd-dark) .acct-note,
body:not(.sd-dark) .res-note { border-color: color-mix(in srgb, var(--sp-accent) 22%, var(--sp-border)); background: var(--sp-accent-soft); }
body:not(.sd-dark) .res-steps li::before { background: var(--sp-accent); }
body:not(.sd-dark) .res-qr img { background: #fff; }

/* 6. Help center (hc-*) --------------------------------------------- */
/* Quick links stay neutral and pick up the accent only on hover. */
body:not(.sd-dark) .hc-quick { --qc: var(--sp-sub); }
body:not(.sd-dark) .hc-quick:hover { --qc: var(--sp-accent); border-color: var(--sp-accent) !important; }
body:not(.sd-dark) .hc-quick > i:first-child { background: var(--sp-surface-2); box-shadow: inset 0 0 0 1px var(--sp-border-soft); }
body:not(.sd-dark) .hc-quick:hover > i:first-child { background: var(--sp-accent-soft); box-shadow: none; }
body:not(.sd-dark) .hc-card-icon { color: var(--sp-sub); background: var(--sp-surface-2); box-shadow: inset 0 0 0 1px var(--sp-border-soft); }
body:not(.sd-dark) .hc-wrap .hc-steps li > span,
body:not(.sd-dark) .hc-wrap .hc-guide-num { color: var(--sp-accent) !important; border-color: transparent; background: var(--sp-accent-soft) !important; }
body:not(.sd-dark) .hc-wrap .hc-guide[open] .hc-guide-num { color: #fff !important; background: var(--sp-accent) !important; }
body:not(.sd-dark) .hc-wrap .hc-guide[open] { border-color: color-mix(in srgb, var(--sp-accent) 30%, var(--sp-border)) !important; }
body:not(.sd-dark) .hc-wrap .hc-search:focus-within { border-color: var(--sp-accent) !important; box-shadow: var(--sp-focus); }
body:not(.sd-dark) .hc-wrap .hc-search kbd,
body:not(.sd-dark) .hc-wrap .hc-no-results,
body:not(.sd-dark) .hc-wrap .hc-check-icon,
body:not(.sd-dark) .hc-wrap .hc-contents a:hover,
body:not(.sd-dark) .hc-wrap :is(.hc-tip, .hc-definition, .hc-mini-card, .hc-warning.soft) { background: var(--sp-surface-2) !important; }
body:not(.sd-dark) .hc-wrap .hc-check.complete .hc-check-icon { color: var(--sp-teal); background: var(--sp-teal-soft) !important; }
/* A real warning keeps its amber tint; informational notes stay neutral. */
body:not(.sd-dark) .hc-wrap .hc-warning:not(.soft) { border-color: color-mix(in srgb, var(--sp-amber) 35%, var(--sp-border)) !important; background: var(--sp-amber-soft) !important; }
body:not(.sd-dark) .hc-wrap .hc-warning:not(.soft) > i { color: var(--sp-amber); }
body:not(.sd-dark) .hc-wrap .hc-tip > i,
body:not(.sd-dark) .hc-wrap .hc-warning.soft > i,
body:not(.sd-dark) .hc-wrap .hc-mini-card > i { color: var(--sp-accent); }
body:not(.sd-dark) .hc-wrap .hc-support { border: 1px solid var(--sp-border); color: var(--sp-text); background: var(--sp-card) !important; box-shadow: var(--sp-shadow); }
body:not(.sd-dark) .hc-wrap .hc-support span { color: var(--sp-accent); }
body:not(.sd-dark) .hc-wrap .hc-btn-light,
body:not(.sd-dark) .hc-wrap .hc-inline-btn { color: #fff; background: var(--sp-accent); box-shadow: none; }
body:not(.sd-dark) .hc-wrap .hc-btn-light:hover,
body:not(.sd-dark) .hc-wrap .hc-inline-btn:hover { background: var(--sp-accent-dark); transform: none; }
body:not(.sd-dark) .hc-wrap .hc-inline-btn.secondary { color: var(--sp-accent); border-color: var(--sp-border); background: var(--sp-accent-soft); }
body:not(.sd-dark) .hc-wrap .hc-inline-btn.secondary:hover { background: var(--sp-accent-soft); }
body:not(.sd-dark) .hc-wrap .hc-tool-btn:hover { color: var(--sp-accent); border-color: var(--sp-accent); }

/* 7. Sales reports (sr-*) ------------------------------------------- */
/* The page keeps its own variable names; in light mode they resolve to the shared tokens. */
body:not(.sd-dark) .sr-page {
    --sr-navy: var(--sp-text);
    --sr-copy: var(--sp-sub);
    --sr-muted: var(--sp-muted);
    --sr-line: var(--sp-border);
    --sr-bg: var(--sp-surface-2);
    --sr-card: var(--sp-card);
    --sr-indigo: var(--sp-accent);
    --sr-indigo-soft: var(--sp-accent-soft);
    --sr-teal: var(--sp-teal);
    --sr-teal-soft: var(--sp-teal-soft);
    --sr-amber: var(--sp-amber);
    --sr-amber-soft: var(--sp-amber-soft);
    --sr-red: var(--sp-red);
    --sr-red-soft: var(--sp-red-soft);
}
body:not(.sd-dark) .sr-status { border-color: var(--sp-border); background: var(--sp-card); box-shadow: var(--sp-shadow); }
body:not(.sd-dark) .sr-status__mark { color: var(--sp-accent); background: var(--sp-accent-soft); box-shadow: none; }
body:not(.sd-dark) .sr-status--open .sr-status__mark { color: var(--sp-teal); background: var(--sp-teal-soft); box-shadow: none; }
body:not(.sd-dark) .sr-status--overdue .sr-status__mark { color: var(--sp-red); background: var(--sp-red-soft); box-shadow: none; }
body:not(.sd-dark) .sr-status__facts { background: var(--sp-surface-2); }
body:not(.sd-dark) :is(.sr-metric, .sr-card, .sr-periods, .sr-ledger, .sr-empty) { box-shadow: var(--sp-shadow); }
body:not(.sd-dark) .sr-metric::before { display: none; }
body:not(.sd-dark) .sr-metric > svg,
body:not(.sd-dark) .sr-metric:nth-child(2) > svg,
body:not(.sd-dark) .sr-metric:nth-child(3) > svg,
body:not(.sd-dark) .sr-metric:nth-child(4) > svg,
body:not(.sd-dark) .sr-upload__mark,
body:not(.sd-dark) .sr-empty__icon,
body:not(.sd-dark) .sr-ledger__empty i { color: var(--sp-sub); background: var(--sp-surface-2); box-shadow: inset 0 0 0 1px var(--sp-border-soft); }
body:not(.sd-dark) .sr-metric--attention > svg { color: var(--sp-red) !important; background: var(--sp-red-soft) !important; box-shadow: none !important; }
body:not(.sd-dark) .sr-secure-label { border-color: color-mix(in srgb, var(--sp-accent) 25%, var(--sp-border)); }
body:not(.sd-dark) .sr-periods > header { background: var(--sp-red-soft); }
body:not(.sd-dark) .sr-periods__list article { border-color: color-mix(in srgb, var(--sp-red) 30%, var(--sp-border)); background: var(--sp-red-soft); }
body:not(.sd-dark) .sr-form-section legend > span { color: var(--sp-accent); background: var(--sp-accent-soft); box-shadow: none; }
body:not(.sd-dark) .sr-field label { color: var(--sp-text); }
body:not(.sd-dark) .sr-control { border-color: var(--sp-border); background: var(--sp-card); }
body:not(.sd-dark) .sr-control[readonly] { color: var(--sp-sub); background: var(--sp-surface-2); }
body:not(.sd-dark) .sr-control:focus { border-color: var(--sp-accent); box-shadow: var(--sp-focus); }
body:not(.sd-dark) .sr-products { background: var(--sp-surface-2); }
body:not(.sd-dark) .sr-products__list span { border-color: color-mix(in srgb, var(--sp-accent) 25%, var(--sp-border)); color: var(--sp-accent); background: var(--sp-accent-soft); }
body:not(.sd-dark) .sr-upload { border-color: var(--sp-border); background: var(--sp-surface-2); }
body:not(.sd-dark) .sr-upload:hover,
body:not(.sd-dark) .sr-upload.is-dragging { border-color: var(--sp-accent); background: var(--sp-accent-soft); }
body:not(.sd-dark) .sr-upload > label b { border-color: var(--sp-border); color: var(--sp-accent); background: var(--sp-card); }
body:not(.sd-dark) .sr-file-item { background: var(--sp-card); }
body:not(.sd-dark) .sr-form-alert { border-color: color-mix(in srgb, var(--sp-red) 35%, var(--sp-border)); color: var(--sp-red); }
body:not(.sd-dark) .sr-button--primary,
body:not(.sd-dark) .sr-button--primary:hover { background: var(--sp-accent); box-shadow: none; transform: none; }
body:not(.sd-dark) .sr-button--primary:hover { background: var(--sp-accent-dark); }
body:not(.sd-dark) .sr-date-panel { border-color: color-mix(in srgb, var(--sp-teal) 30%, var(--sp-border)); background: var(--sp-teal-soft); }
body:not(.sd-dark) .sr-terms .sr-card__header { background: var(--sp-card); }
body:not(.sd-dark) .sr-estimate { border-color: color-mix(in srgb, var(--sp-amber) 30%, var(--sp-border)); }
body:not(.sd-dark) .sr-estimate span { color: var(--sp-amber); }
body:not(.sd-dark) .sr-terms__note { background: var(--sp-surface-2); }
body:not(.sd-dark) .sr-ledger th { color: var(--sp-sub); background: var(--sp-surface-2); }
body:not(.sd-dark) .sr-ledger td { border-bottom-color: var(--sp-border-soft); }
body:not(.sd-dark) .sr-ledger tbody tr:hover { background: var(--sp-surface-2); }
body:not(.sd-dark) .sr-payment-state { color: var(--sp-sub); background: var(--sp-surface-2); }
body:not(.sd-dark) .sr-payment-state--paid { color: var(--sp-teal); background: var(--sp-teal-soft); }
body:not(.sd-dark) .sr-payment-state--due { color: var(--sp-amber); background: var(--sp-amber-soft); }
body:not(.sd-dark) .sr-payment-state--failed { color: var(--sp-red); background: var(--sp-red-soft); }
body:not(.sd-dark) .sr-ledger-action { border-color: var(--sp-border); color: var(--sp-sub); background: var(--sp-card); }
body:not(.sd-dark) .sr-ledger-action--primary { border-color: var(--sp-accent); color: #fff; background: var(--sp-accent); }
@media (max-width: 700px) {
    body:not(.sd-dark) .sr-ledger tbody tr { border-color: var(--sp-border); background: var(--sp-card); }
}

/* 8. License application (apply-container) -------------------------- */
/* The page's own font stack asked for Inter, which the portal does not load. */
.apply-container,
.apply-container * { font-family: inherit; }
body:not(.sd-dark) .apply-container .header-icon { background: var(--sp-surface-2); }
body:not(.sd-dark) .apply-container .header-icon svg { color: var(--sp-sub); }
body:not(.sd-dark) .apply-container .info-alert { border-left-color: var(--sp-accent); background: var(--sp-accent-soft); }
body:not(.sd-dark) .apply-container .info-alert svg { color: var(--sp-accent); }
body:not(.sd-dark) .apply-container .info-alert span { color: var(--sp-text); }
body:not(.sd-dark) .apply-container .select-all-row { background: var(--sp-surface-2); }
body:not(.sd-dark) .apply-container .select-all-label span,
body:not(.sd-dark) .apply-container .footer-info strong,
body:not(.sd-dark) .apply-container .empty-title { color: var(--sp-text); }
body:not(.sd-dark) .apply-container .selected-count,
body:not(.sd-dark) .apply-container .footer-info,
body:not(.sd-dark) .apply-container .empty-text,
body:not(.sd-dark) .apply-container .product-sku { color: var(--sp-sub); }
body:not(.sd-dark) .apply-container .product-item { border-color: var(--sp-border); background: var(--sp-card); }
body:not(.sd-dark) .apply-container .product-item:hover { border-color: color-mix(in srgb, var(--sp-accent) 40%, var(--sp-border)); background: var(--sp-surface-2); }
body:not(.sd-dark) .apply-container .product-item.selected { border-color: var(--sp-accent); background: var(--sp-accent-soft); }
body:not(.sd-dark) .apply-container .checkbox-visual { border-color: var(--sp-border); background: var(--sp-card); }
body:not(.sd-dark) .apply-container .custom-checkbox input:checked + .checkbox-visual { border-color: var(--sp-accent); background: var(--sp-accent); }
body:not(.sd-dark) .apply-container .custom-checkbox input:focus + .checkbox-visual { box-shadow: var(--sp-focus); }
body:not(.sd-dark) .apply-container .product-asin { color: var(--sp-muted); background: var(--sp-surface-2); }
body:not(.sd-dark) .apply-container .card-footer { border-top-color: var(--sp-border); background: var(--sp-surface-2); }
body:not(.sd-dark) .apply-container .btn-submit,
body:not(.sd-dark) .apply-container .btn-submit:hover:not(:disabled) { border-color: var(--sp-accent) !important; color: #fff !important; background: var(--sp-accent) !important; box-shadow: none !important; transform: none; }
body:not(.sd-dark) .apply-container .btn-submit:hover:not(:disabled) { border-color: var(--sp-accent-dark) !important; background: var(--sp-accent-dark) !important; }
body:not(.sd-dark) .apply-container .btn-submit:disabled { background: var(--sp-muted) !important; border-color: var(--sp-muted) !important; opacity: .6; }
body:not(.sd-dark) .apply-container .empty-icon { background: var(--sp-surface-2); }
body:not(.sd-dark) .apply-container .empty-icon svg { color: var(--sp-muted); }
body:not(.sd-dark) .apply-container .pending-card { border-color: color-mix(in srgb, var(--sp-amber) 40%, var(--sp-border)); background: var(--sp-amber-soft); }
body:not(.sd-dark) .apply-container .pending-badge { color: #fff; background: var(--sp-amber); }
body:not(.sd-dark) .apply-container .pending-title { color: var(--sp-text) !important; }
body:not(.sd-dark) .apply-container .pending-text { color: var(--sp-sub) !important; }
body:not(.sd-dark) .apply-container .pending-product-tag { border-color: var(--sp-border); color: var(--sp-text); background: var(--sp-card); }

/* 9. Fixed settlements (sf-*) + ACH pay (pay-*) --------------------- */
/* These pages had no dark rules at all; token-based rules give them both modes. */
.sf-page .sf-hero { background: var(--sp-card) !important; }
.sf-hero h1 { color: var(--sp-text); }
.sf-hero p { color: var(--sp-sub); opacity: 1; }
.sf-stat { border-color: var(--sp-border); background: var(--sp-card); }
.sf-card { border-color: var(--sp-border); background: var(--sp-card); }
.sf-card h3 { color: var(--sp-text); }
.sf-card .sf-sub { color: var(--sp-sub); }
.sf-license-pill { border-color: color-mix(in srgb, var(--sp-accent) 25%, var(--sp-border)); color: var(--sp-text); background: var(--sp-accent-soft); }
.sf-license-pill strong { color: var(--sp-accent); }
.sf-agreement-docs { border-color: var(--sp-border); border-left-color: var(--sp-accent); background: var(--sp-surface-2); }
.sf-agreement-docs h4 { color: var(--sp-sub); }
.sf-agreement-docs h4 i { color: var(--sp-accent); }
.sf-agreement-doc-link { border-color: var(--sp-border); color: var(--sp-accent); background: var(--sp-card); }
.sf-agreement-doc-link:hover { color: var(--sp-accent-dark); background: var(--sp-accent-soft); box-shadow: none; transform: none; }
.sf-product { border-color: var(--sp-border-soft); background: var(--sp-surface-2); }
.sf-product strong { color: var(--sp-text); }
.sf-product small { color: var(--sp-muted); }
.sf-form-group label { color: var(--sp-text); }
.sf-form-group .req { color: var(--sp-red); }
.sf-form-group input,
.sf-form-group textarea { border-width: 1px; color: var(--sp-text); background: var(--sp-card); }
.sf-form-group input:focus,
.sf-form-group textarea:focus { border-color: var(--sp-accent) !important; box-shadow: var(--sp-focus) !important; }
.sf-form-help { color: var(--sp-muted); }
.sf-net-line { color: var(--sp-sub); background: var(--sp-surface-2); }
.sf-net-line strong { color: var(--sp-text); }
.sf-file-area { border-color: var(--sp-border); background: var(--sp-surface-2); }
.sf-file-area i { color: var(--sp-muted); }
.sf-file-area p { color: var(--sp-sub); }
.sf-preview-item { border-color: var(--sp-border); color: var(--sp-sub); background: var(--sp-card); }
.sf-submit-btn,
.sf-submit-btn:hover { border: 1px solid var(--sp-accent) !important; color: #fff !important; background: var(--sp-accent) !important; box-shadow: none !important; transform: none; }
.sf-submit-btn:hover { border-color: var(--sp-accent-dark) !important; background: var(--sp-accent-dark) !important; }
.sf-payments-table th { color: var(--sp-sub) !important; background: var(--sp-surface-2) !important; border-bottom-color: var(--sp-border) !important; }
.sf-payments-table td { border-top-color: var(--sp-border-soft); color: var(--sp-sub); }
.sf-payments-table td strong { color: var(--sp-text); }
.sf-payments-table tbody tr:hover { background: var(--sp-surface-2); }
.sf-badge.pending { color: var(--sp-amber); background: var(--sp-amber-soft); }
.sf-badge.processing { color: var(--sp-accent); background: var(--sp-accent-soft); }
.sf-badge.paid { color: var(--sp-teal); background: var(--sp-teal-soft); }
.sf-badge.failed,
.sf-badge.cancelled { color: var(--sp-red); background: var(--sp-red-soft); }
.sf-pay-btn.card,
.sf-pay-btn.card:hover { background: var(--sp-accent); box-shadow: none; transform: none; }
.sf-pay-btn.card:hover { background: var(--sp-accent-dark); }
.sf-pay-btn.ach,
.sf-pay-btn.ach:hover { background: var(--sp-teal); box-shadow: none; transform: none; }
.sf-pay-btn.ach:hover { filter: brightness(.94); }
.sf-method-tag.card { color: var(--sp-accent); background: var(--sp-accent-soft); }
.sf-method-tag.ach { color: var(--sp-teal); background: var(--sp-teal-soft); }
.sf-empty { color: var(--sp-sub); }
.sf-empty i { color: var(--sp-border); }
.sf-alert.success { color: var(--sp-teal); border-color: color-mix(in srgb, var(--sp-teal) 35%, var(--sp-border)); background: var(--sp-teal-soft); }
.sf-alert.error { color: var(--sp-red); border-color: color-mix(in srgb, var(--sp-red) 35%, var(--sp-border)); background: var(--sp-red-soft); }
.sf-alert.info { color: var(--sp-accent); border-color: color-mix(in srgb, var(--sp-accent) 30%, var(--sp-border)); background: var(--sp-accent-soft); }

.pay-card { color: var(--sp-text); }
.pay-header { border-bottom: 1px solid var(--sp-border); color: var(--sp-text); background: var(--sp-card); }
.pay-header h1 { color: var(--sp-text); }
.pay-header p { color: var(--sp-sub); opacity: 1; }
.pay-summary { border-color: var(--sp-border); background: var(--sp-surface-2); }
.pay-summary-row label { color: var(--sp-sub); }
.pay-summary-row span,
.pay-summary-row.total span { color: var(--sp-text); }
.pay-summary-row.total { border-top-color: var(--sp-border); }
.pay-ach-info { border-color: color-mix(in srgb, var(--sp-accent) 25%, var(--sp-border)); color: var(--sp-text); background: var(--sp-accent-soft); }
.pay-ach-info i { color: var(--sp-accent); }
.pay-card #payment-element { background: var(--sp-card); }
.pay-card .pay-submit,
.pay-card .pay-submit:hover:not(:disabled) { border-color: var(--sp-accent) !important; color: #fff !important; background: var(--sp-accent) !important; box-shadow: none !important; transform: none; }
.pay-card .pay-submit:hover:not(:disabled) { border-color: var(--sp-accent-dark) !important; background: var(--sp-accent-dark) !important; }
.pay-cancel { color: var(--sp-sub); }
.pay-cancel:hover { color: var(--sp-text); }
.pay-card #error-message { border-color: color-mix(in srgb, var(--sp-red) 35%, var(--sp-border)); color: var(--sp-red); background: var(--sp-red-soft); }
.pay-secured { color: var(--sp-muted); }

/* 10. License payment + checkout ----------------------------------- */
/* The agreement column and the payment card become ordinary white cards. */
body:not(.sd-dark) .payment-bg { background: transparent; }
body:not(.sd-dark) .glass-card { border-color: var(--sp-border); background: var(--sp-card); box-shadow: var(--sp-shadow); }
body:not(.sd-dark) .text-adaptive-heading,
body:not(.sd-dark) .text-adaptive-strong { color: var(--sp-text); }
body:not(.sd-dark) .text-adaptive { color: var(--sp-sub); }
body:not(.sd-dark) .text-adaptive-subtle { color: var(--sp-muted); }
body:not(.sd-dark) .text-blue,
body:not(.sd-dark) .text-blue-600 { color: var(--sp-accent); }
body:not(.sd-dark) .doc-content h3 { color: var(--sp-accent); border-bottom-color: color-mix(in srgb, var(--sp-accent) 30%, transparent); }
body:not(.sd-dark) .doc-content h4 { color: var(--sp-text); }
body:not(.sd-dark) .doc-content p,
body:not(.sd-dark) .doc-content ul { color: var(--sp-text); }
body:not(.sd-dark) .bg-adaptive-header { border-bottom-color: var(--sp-border); background: var(--sp-card); }
body:not(.sd-dark) .bg-adaptive-body { background: var(--sp-card); }
body:not(.sd-dark) .bg-adaptive-muted { border-color: var(--sp-border); background: var(--sp-surface-2); }
body:not(.sd-dark) .border-adaptive { border-color: var(--sp-border); }
body:not(.sd-dark) .icon-container { background: var(--sp-accent-soft); }
body:not(.sd-dark) .payment-element-container { border-color: var(--sp-border); background: var(--sp-card); }
body:not(.sd-dark) .doc-content .shadow-inner { --tw-shadow: 0 0 #0000; }

body:not(.sd-dark) .cn-pay-card { border: 1px solid var(--sp-border); color: var(--sp-text); background: var(--sp-card); box-shadow: var(--sp-shadow); }
body:not(.sd-dark) .cn-pay-card .blur-3xl { display: none; }
body:not(.sd-dark) .cn-pay-heading,
body:not(.sd-dark) .cn-pay-strong { color: var(--sp-text); }
body:not(.sd-dark) .cn-pay-text { color: var(--sp-sub); }
body:not(.sd-dark) .cn-pay-subtle { color: var(--sp-muted); }
body:not(.sd-dark) .cn-pay-amount { border-color: var(--sp-border); background: var(--sp-surface-2); }
body:not(.sd-dark) .cn-pay-amount-value { color: var(--sp-accent); background: none; -webkit-text-fill-color: currentColor; }
body:not(.sd-dark) .cn-pay-row { border-bottom-color: var(--sp-border-soft); }
body:not(.sd-dark) .cn-pay-divider { border-top-color: var(--sp-border-soft); }
body:not(.sd-dark) .cn-pay-alert { border-color: color-mix(in srgb, var(--sp-accent) 25%, var(--sp-border)); background: var(--sp-accent-soft); }
body:not(.sd-dark) .cn-pay-alert .cn-pay-text { color: var(--sp-text); }
body:not(.sd-dark) .cn-pay-loading { border-color: var(--sp-border); background: var(--sp-surface-2); }
body:not(.sd-dark) .cn-pay-card #payment-element { border-color: var(--sp-border); background: var(--sp-card); }
/* Inline-styled chips in the card markup */
body:not(.sd-dark) .cn-pay-card .w-10 { background: var(--sp-accent-soft) !important; }
body:not(.sd-dark) .cn-pay-card .w-10 i { color: var(--sp-accent) !important; }
body:not(.sd-dark) .cn-pay-card .w-6 { background: var(--sp-teal-soft) !important; }
body:not(.sd-dark) .cn-pay-card .w-6 i,
body:not(.sd-dark) .cn-pay-card .bx-shield-check { color: var(--sp-teal) !important; }
body:not(.sd-dark) .cn-pay-card span.rounded-full { border-color: color-mix(in srgb, var(--sp-teal) 35%, var(--sp-border)) !important; color: var(--sp-teal) !important; background: var(--sp-teal-soft) !important; }
body:not(.sd-dark) .cn-pay-card #submit-btn { border-radius: 8px; background: var(--sp-accent); box-shadow: none; transform: none; }
body:not(.sd-dark) .cn-pay-card #submit-btn:hover:not(:disabled) { background: var(--sp-accent-dark); }
body:not(.sd-dark) .cn-pay-card #submit-btn.from-emerald-500 { background: var(--sp-teal); }
/* Status messages the page script injects with dark-theme utility classes */
body:not(.sd-dark) .cn-pay-card .bg-red-500\/15,
body:not(.sd-dark) .cn-pay-card .bg-red-500\/20 { background-color: var(--sp-red-soft); }
body:not(.sd-dark) .cn-pay-card .text-red-100\/80,
body:not(.sd-dark) .cn-pay-card .text-red-100\/90,
body:not(.sd-dark) .cn-pay-card .text-red-200,
body:not(.sd-dark) .cn-pay-card .text-red-300 { color: var(--sp-red); }
body:not(.sd-dark) .cn-pay-card .border-red-500\/40 { border-color: color-mix(in srgb, var(--sp-red) 35%, var(--sp-border)); }
body:not(.sd-dark) .cn-pay-card .bg-blue-500\/15 { background-color: var(--sp-accent-soft); }
body:not(.sd-dark) .cn-pay-card .text-blue-100 { color: var(--sp-text); }
body:not(.sd-dark) .cn-pay-card .border-blue-500\/40 { border-color: color-mix(in srgb, var(--sp-accent) 30%, var(--sp-border)); }
body:not(.sd-dark) .cn-pay-card .bg-emerald-500\/20 { background-color: var(--sp-teal-soft); }
body:not(.sd-dark) .cn-pay-card .text-emerald-300 { color: var(--sp-teal); }
body:not(.sd-dark) .cn-pay-card .border-emerald-500\/40 { border-color: color-mix(in srgb, var(--sp-teal) 35%, var(--sp-border)); }
body:not(.sd-dark) .text-red-400 { color: var(--sp-red); }

/* Stripe checkout card and success page */
body:not(.sd-dark) .sp-checkout-page #submit,
body:not(.sd-dark) .sp-checkout-page #submit:hover { color: #fff; background: var(--sp-accent); }
body:not(.sd-dark) .sp-checkout-page #submit:hover { background: var(--sp-accent-dark); }
body.sp-checkout-success .bg-indigo-600,
body.sp-checkout-success .bg-indigo-600:hover { color: #fff; background: var(--sp-accent); }
body.sp-checkout-success .bg-indigo-600:hover { background: var(--sp-accent-dark); }
body.sp-checkout-success .bg-green-600\/20 { background-color: var(--sp-teal-soft); }
body.sp-checkout-success .text-green-400 { color: var(--sp-teal); }

/* 11. Legacy license panel ------------------------------------------ */
.seller-panel,
.seller-title,
.seller-section-box { font-family: inherit; }
body:not(.sd-dark) .seller-panel,
body:not(.sd-dark) .seller-section-box { border-color: var(--sp-border); background: var(--sp-card); box-shadow: var(--sp-shadow); }
body:not(.sd-dark) .seller-title { color: var(--sp-text); }
body:not(.sd-dark) .seller-sub { color: var(--sp-sub); }

/* ============================================================
   DASHBOARD-ALIGNED SELLER WORKSPACES
   Billing, settlements, account, Android, and help pages share
   the same density, surfaces, controls, and responsive behavior.
   ============================================================ */
.sdb-workspace-head { flex-wrap: wrap; }
.sdb-workspace-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.sdb-workspace-search { position: relative; display: flex; align-items: center; }
.sdb-workspace-search i { position: absolute; left: 10px; color: var(--sp-muted); font-size: 16px; pointer-events: none; }
.sdb-workspace-search input { width: 190px; height: 34px; padding: 0 10px 0 32px; border: 1px solid var(--sp-border); border-radius: 8px; outline: 0; color: var(--sp-text); background: var(--sp-card); font: inherit; font-size: 12px; }
.sdb-workspace-search input:focus { border-color: var(--sp-accent); box-shadow: var(--sp-focus); }
.sdb-workspace-table { min-width: 820px; }
.sdb-workspace-table .sdb-btn { min-height: 30px; padding: 0 9px; font-size: 11px; }
.sdb-workspace-record { display: flex; align-items: center; gap: 10px; }
.sdb-workspace-record-icon { display: inline-flex; width: 32px; height: 32px; flex: 0 0 32px; align-items: center; justify-content: center; border: 1px solid var(--sp-border-soft); border-radius: 8px; color: var(--sp-sub); background: var(--sp-bg); font-size: 16px; }
.sdb-workspace-record strong, .sdb-workspace-record small { display: block; }
.sdb-workspace-record strong { color: var(--sp-text); font-size: 12.5px; }
.sdb-workspace-record small { margin-top: 2px; color: var(--sp-muted); font-size: 11px; }
.sdb-workspace-actions, .sdb-workspace-actions form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.sdb-workspace-muted { display: inline-flex; align-items: center; gap: 5px; color: var(--sp-muted); font-size: 11.5px; }
.sdb-workspace-grid { display: grid; gap: 20px; }
.sdb-workspace-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sdb-workspace-signature { padding: 16px 20px; border-top: 1px solid var(--sp-border-soft); }
.sdb-workspace-signature span { display: block; margin-bottom: 8px; color: var(--sp-muted); font-size: 11px; font-weight: 600; text-transform: uppercase; }
.sdb-workspace-signature img { display: block; max-width: 220px; max-height: 80px; padding: 8px; border: 1px solid var(--sp-border-soft); border-radius: 6px; background: #fff; object-fit: contain; }
.sdb-workspace-filebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--sp-border-soft); }
.sdb-workspace-filebar > strong { display: flex; min-width: 0; align-items: center; gap: 7px; overflow: hidden; color: var(--sp-text); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.sdb-workspace-pdf { display: block; width: 100%; height: min(72vh, 800px); min-height: 480px; border: 0; background: var(--sp-bg); }
.sdb-workspace-identity { display: flex; align-items: center; gap: 12px; }
.sdb-workspace-avatar { display: inline-flex; width: 42px; height: 42px; flex: 0 0 42px; align-items: center; justify-content: center; border-radius: 10px; color: #fff; background: var(--sp-accent); font-size: 15px; font-weight: 700; }
.sdb-workspace-user { display: flex; align-items: center; gap: 12px; padding: 16px 20px; }
.sdb-workspace-user strong, .sdb-workspace-user small { display: block; }
.sdb-workspace-user strong { color: var(--sp-text); font-size: 13px; }
.sdb-workspace-user small { margin-top: 2px; color: var(--sp-muted); font-size: 11.5px; }

/* Account forms */
.sdb-account-columns { grid-template-columns: minmax(0, 1fr) 340px; }
.sdb-account-form { padding: 20px; }
.sdb-account-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sdb-account-field.full { grid-column: 1 / -1; }
.sdb-account-field label { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; color: var(--sp-sub); font-size: 12px; font-weight: 600; }
.sdb-account-field label em { color: var(--sp-red); font-size: 10.5px; font-style: normal; }
.sdb-account-control { position: relative; }
.sdb-account-control > i { position: absolute; z-index: 1; top: 50%; left: 12px; color: var(--sp-muted); font-size: 16px; transform: translateY(-50%); pointer-events: none; }
.sdb-account-control.textarea > i { top: 13px; transform: none; }
.sdb-account-control input, .sdb-account-control textarea { width: 100%; border: 1px solid var(--sp-border); border-radius: 8px; outline: 0; color: var(--sp-text); background: var(--sp-card); font: inherit; font-size: 12.5px; transition: border-color .15s ease, box-shadow .15s ease; }
.sdb-account-control input { height: 40px; padding: 0 40px 0 38px; }
.sdb-account-control textarea { min-height: 96px; padding: 10px 12px 10px 38px; resize: vertical; }
.sdb-account-control input:focus, .sdb-account-control textarea:focus { border-color: var(--sp-accent); box-shadow: var(--sp-focus); }
.sdb-account-control :is(input, textarea).is-error { border-color: var(--sp-red); }
.sdb-account-help { display: block; margin-top: 5px; color: var(--sp-muted); font-size: 11px; }
.sdb-account-error { display: flex; align-items: center; gap: 4px; margin-top: 5px; color: var(--sp-red); font-size: 11px; }
.sdb-account-footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: 20px -20px -20px; padding: 14px 20px; border-top: 1px solid var(--sp-border-soft); background: var(--sp-bg); }
.sdb-password-fields { display: grid; gap: 18px; }
.sdb-password-toggle { position: absolute; top: 50%; right: 7px; display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border: 0; border-radius: 6px; color: var(--sp-muted); background: transparent; font-size: 17px; transform: translateY(-50%); cursor: pointer; }
.sdb-password-toggle:hover { color: var(--sp-accent); background: var(--sp-bg); }
.sdb-password-strength { display: flex; align-items: center; gap: 10px; margin-top: 7px; }
.sdb-password-strength > div { height: 5px; flex: 1; overflow: hidden; border-radius: 99px; background: var(--sp-border-soft); }
.sdb-password-strength > div > span { display: block; width: 0; height: 100%; border-radius: inherit; transition: width .2s ease; }
.sdb-password-strength small { width: 62px; color: var(--sp-muted); font-size: 11px; font-weight: 600; text-align: right; }
.sdb-password-match { display: flex; align-items: center; gap: 5px; margin-top: 6px; color: var(--sp-red); font-size: 11px; }
.sdb-password-match.is-valid { color: var(--sp-teal); }
.sdb-password-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 12px; border: 1px solid var(--sp-border-soft); border-radius: 8px; background: var(--sp-bg); }
.sdb-password-checks > div { display: flex; align-items: center; gap: 6px; color: var(--sp-muted); font-size: 11.5px; }
.sdb-password-checks > div.is-valid { color: var(--sp-teal); }

/* Android resources */
.sdb-resource-columns { grid-template-columns: minmax(0, 1fr) 360px; }
.sdb-resource-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sdb-resource-features > div { display: flex; gap: 12px; padding: 16px 20px; border-right: 1px solid var(--sp-border-soft); border-bottom: 1px solid var(--sp-border-soft); }
.sdb-resource-features > div:nth-child(2n) { border-right: 0; }
.sdb-resource-features > div:nth-last-child(-n+2) { border-bottom: 0; }
.sdb-resource-features > div > span { display: inline-flex; width: 34px; height: 34px; flex: 0 0 34px; align-items: center; justify-content: center; border: 1px solid var(--sp-border-soft); border-radius: 9px; color: var(--sp-sub); background: var(--sp-bg); font-size: 17px; }
.sdb-resource-features strong, .sdb-resource-features small { display: block; }
.sdb-resource-features strong { color: var(--sp-text); font-size: 12.5px; }
.sdb-resource-features small { margin-top: 3px; color: var(--sp-muted); font-size: 11.5px; line-height: 1.5; }
.sdb-resource-faq details { border-bottom: 1px solid var(--sp-border-soft); }
.sdb-resource-faq details:last-child { border-bottom: 0; }
.sdb-resource-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 20px; color: var(--sp-text); font-size: 12.5px; font-weight: 600; cursor: pointer; list-style: none; }
.sdb-resource-faq summary::-webkit-details-marker { display: none; }
.sdb-resource-faq summary i { color: var(--sp-muted); font-size: 18px; transition: transform .15s ease; }
.sdb-resource-faq details[open] summary i { transform: rotate(180deg); }
.sdb-resource-faq p { margin: 0; padding: 0 20px 14px; color: var(--sp-sub); font-size: 12px; line-height: 1.6; }
.sdb-resource-faq a { color: var(--sp-accent); }
.sdb-resource-steps { margin: 0; padding: 0; list-style: none; }
.sdb-resource-steps li { display: flex; gap: 11px; padding: 13px 20px; border-bottom: 1px solid var(--sp-border-soft); }
.sdb-resource-steps li > span { display: inline-flex; width: 26px; height: 26px; flex: 0 0 26px; align-items: center; justify-content: center; border-radius: 7px; color: var(--sp-accent); background: var(--sp-accent-soft); font-size: 10px; font-weight: 700; }
.sdb-resource-steps strong, .sdb-resource-steps small { display: block; }
.sdb-resource-steps strong { color: var(--sp-text); font-size: 12px; }
.sdb-resource-steps small { margin-top: 2px; color: var(--sp-muted); font-size: 11px; line-height: 1.45; }
.sdb-resource-qr { display: flex; align-items: center; gap: 12px; margin: 0 20px 18px; padding: 12px; border: 1px solid var(--sp-border-soft); border-radius: 8px; background: var(--sp-bg); }
.sdb-resource-qr img { width: 72px; height: 72px; padding: 3px; border-radius: 5px; background: #fff; }
.sdb-resource-qr strong, .sdb-resource-qr small { display: block; }
.sdb-resource-qr strong { color: var(--sp-text); font-size: 12px; }
.sdb-resource-qr small { margin-top: 2px; color: var(--sp-muted); font-size: 11px; }

/* Help center normalization over the retired standalone help theme. */
.sdb-help.hc-wrap { display: grid; max-width: none; margin: 0; gap: 20px; color: var(--sp-text); }
.sdb-help .hc-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; }
.sdb-help .hc-search { display: flex; min-width: 260px; max-width: 520px; flex: 1; align-items: center; gap: 8px; height: 38px; padding: 0 10px; border: 1px solid var(--sp-border); border-radius: 8px; background: var(--sp-card); }
.sdb-help .hc-search > i { color: var(--sp-muted); font-size: 17px; }
.sdb-help .hc-search input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--sp-text); background: transparent; font: inherit; font-size: 12px; }
.sdb-help .hc-search kbd { padding: 2px 6px; border: 1px solid var(--sp-border); border-radius: 5px; color: var(--sp-muted); background: var(--sp-bg); font: inherit; font-size: 10px; }
.sdb-help .hc-toolbar-actions { display: flex; gap: 8px; }
.sdb-help .hc-no-results { padding: 18px; border: 1px solid var(--sp-border); border-radius: 8px; color: var(--sp-sub); background: var(--sp-card); text-align: center; }
.sdb-help .hc-quick-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; }
.sdb-help .hc-quick { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 14px 16px; border: 1px solid var(--sp-border) !important; border-radius: 10px !important; color: var(--sp-sub); background: var(--sp-card) !important; box-shadow: var(--sp-shadow) !important; text-decoration: none; }
.sdb-help .hc-quick:hover { transform: none; border-color: var(--sp-border) !important; }
.sdb-help .hc-quick > i:first-child { color: var(--sp-sub) !important; font-size: 19px; }
.sdb-help .hc-quick > i:last-child { margin-left: auto; color: var(--sp-muted) !important; }
.sdb-help .hc-quick strong, .sdb-help .hc-quick small { display: block; }
.sdb-help .hc-quick strong { color: var(--sp-text) !important; font-size: 12.5px; }
.sdb-help .hc-quick small { margin-top: 2px; color: var(--sp-muted) !important; font-size: 10.5px; }
.sdb-help .hc-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; }
.sdb-help .hc-side, .sdb-help .hc-guides { display: grid; gap: 14px; min-width: 0; }
.sdb-help .hc-card, .sdb-help .hc-guide { margin: 0; border: 1px solid var(--sp-border) !important; border-radius: 10px !important; background: var(--sp-card) !important; box-shadow: var(--sp-shadow) !important; }
.sdb-help .hc-check-list { padding: 4px 0; }
.sdb-help .hc-check { display: flex; align-items: center; gap: 9px; padding: 10px 16px; border-bottom: 1px solid var(--sp-border-soft); }
.sdb-help .hc-check-icon { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; border-radius: 7px; color: var(--sp-amber); background: var(--sp-amber-soft); }
.sdb-help .hc-check.complete .hc-check-icon { color: var(--sp-teal); background: var(--sp-teal-soft) !important; }
.sdb-help .hc-check strong, .sdb-help .hc-check small { display: block; }
.sdb-help .hc-check strong { color: var(--sp-text); font-size: 11.5px; }
.sdb-help .hc-check small { color: var(--sp-muted); font-size: 10.5px; }
.sdb-help .hc-card-link { display: flex; align-items: center; justify-content: space-between; padding: 11px 16px; color: var(--sp-accent); font-size: 11.5px; font-weight: 600; text-decoration: none; }
.sdb-help .hc-contents, .sdb-help .hc-account-stats { padding: 14px 16px; }
.sdb-help .hc-contents h3, .sdb-help .hc-account-stats h3 { margin: 0 0 10px; color: var(--sp-text); font-size: 12.5px; }
.sdb-help .hc-contents a { display: flex; gap: 8px; padding: 7px 4px; color: var(--sp-sub); font-size: 11.5px; text-decoration: none; }
.sdb-help .hc-contents a span { color: var(--sp-muted); font-size: 10px; }
.sdb-help .hc-account-stats div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--sp-border-soft); color: var(--sp-sub); font-size: 11.5px; }
.sdb-help .hc-account-stats div:last-child { border-bottom: 0; }
.sdb-help .hc-account-stats strong { color: var(--sp-text); }
.sdb-help .hc-section-title { margin: 0 2px; }
.sdb-help .hc-section-title > span { color: var(--sp-accent); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.sdb-help .hc-section-title h2 { margin: 3px 0; color: var(--sp-text); font-size: 18px; }
.sdb-help .hc-section-title p { margin: 0; color: var(--sp-muted); font-size: 11.5px; }
.sdb-help .hc-guide summary { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border: 0; color: var(--sp-text); background: var(--sp-card) !important; cursor: pointer; list-style: none; }
.sdb-help .hc-guide[open] summary { border-bottom: 1px solid var(--sp-border-soft); background: var(--sp-card) !important; }
.sdb-help .hc-guide-num, .sdb-help .hc-steps li > span { display: inline-flex; align-items: center; justify-content: center; color: var(--sp-accent) !important; background: var(--sp-accent-soft) !important; box-shadow: none; }
.sdb-help .hc-guide-num { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 8px; font-size: 10px; font-weight: 700; }
.sdb-help .hc-guide-title { flex: 1; }
.sdb-help .hc-guide-title strong, .sdb-help .hc-guide-title small { display: block; }
.sdb-help .hc-guide-title strong { color: var(--sp-text) !important; font-size: 12.5px; }
.sdb-help .hc-guide-title small, .sdb-help .hc-guide-time { color: var(--sp-muted) !important; font-size: 10.5px; }
.sdb-help .hc-guide-body { padding: 16px; border: 0; color: var(--sp-sub); background: var(--sp-card) !important; }
.sdb-help .hc-steps { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.sdb-help .hc-steps li { display: flex; gap: 10px; }
.sdb-help .hc-steps li > span { width: 24px; height: 24px; flex: 0 0 24px; border-radius: 7px; font-size: 9px; font-weight: 700; }
.sdb-help .hc-steps strong { color: var(--sp-text); font-size: 12px; }
.sdb-help .hc-steps p { margin: 2px 0 0; color: var(--sp-sub); font-size: 11.5px; line-height: 1.55; }
.sdb-help .hc-guide a { color: var(--sp-accent); }
.sdb-help :is(.hc-tip, .hc-definition, .hc-warning, .hc-mini-card) { border: 1px solid var(--sp-border-soft) !important; border-radius: 8px; color: var(--sp-sub); background: var(--sp-bg) !important; box-shadow: none !important; }
.sdb-help .hc-inline-btn, .sdb-help .hc-btn-light { display: inline-flex; min-height: 34px; align-items: center; padding: 0 12px; border: 1px solid var(--sp-accent); border-radius: 7px; color: #fff !important; background: var(--sp-accent) !important; font-size: 11.5px; font-weight: 600; text-decoration: none; box-shadow: none !important; }
.sdb-help .hc-inline-btn.secondary { border-color: var(--sp-border); color: var(--sp-text) !important; background: var(--sp-card) !important; }
.sdb-help .hc-support { border: 1px solid var(--sp-border) !important; border-radius: 10px !important; color: var(--sp-text); background: var(--sp-card) !important; box-shadow: var(--sp-shadow) !important; }

@media (max-width: 1040px) {
    .sdb-account-columns, .sdb-resource-columns { grid-template-columns: 1fr; }
    .sdb-account-columns > .sdb-side, .sdb-resource-columns > .sdb-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sdb-help .hc-layout { grid-template-columns: 1fr; }
    .sdb-help .hc-side { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .sdb-workspace-grid.two, .sdb-account-grid, .sdb-resource-features { grid-template-columns: 1fr; }
    .sdb-resource-features > div { border-right: 0; }
    .sdb-resource-features > div:nth-last-child(2) { border-bottom: 1px solid var(--sp-border-soft); }
    .sdb-account-columns > .sdb-side, .sdb-resource-columns > .sdb-side, .sdb-help .hc-side { grid-template-columns: 1fr; }
    .sdb-workspace-tools, .sdb-workspace-search { width: 100%; }
    .sdb-workspace-search input { width: 100%; }
    .sdb-password-checks { grid-template-columns: 1fr; }
    .sdb-workspace-filebar { align-items: flex-start; flex-direction: column; }
    .sdb-workspace-pdf { min-height: 380px; }
    .sdb-help .hc-toolbar { align-items: stretch; flex-direction: column; }
    .sdb-help .hc-search { width: 100%; max-width: none; }
    .sdb-help .hc-toolbar-actions .sdb-btn { flex: 1; }
    .sdb-help .hc-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
    .sdb-account-footer { align-items: stretch; flex-direction: column-reverse; }
    .sdb-account-footer .sdb-btn { width: 100%; }
    .sdb-help .hc-quick-grid { grid-template-columns: 1fr; }
    .sdb-help .hc-guide-time, .sdb-help .hc-search kbd { display: none; }
}

/* ============================================================
   POST-LOGIN ACCOUNT ATTENTION MODAL
   ============================================================ */
body.sp-attention-open { overflow: hidden; }
.sp-attention-modal { position: fixed; z-index: 10000; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; visibility: hidden; transition: opacity .18s ease, visibility .18s ease; }
.sp-attention-modal.is-open { opacity: 1; visibility: visible; }
.sp-attention-backdrop { position: absolute; inset: 0; background: rgba(8, 14, 28, .72); backdrop-filter: blur(8px); }
.sp-attention-dialog { position: relative; display: flex; width: min(780px, 100%); max-height: min(780px, calc(100vh - 48px)); flex-direction: column; overflow: hidden; border: 1px solid var(--sp-border); border-radius: 16px; outline: 0; color: var(--sp-text); background: var(--sp-card); box-shadow: 0 28px 80px rgba(7, 13, 28, .32); transform: translateY(10px) scale(.99); transition: transform .18s ease; }
.sp-attention-modal.is-open .sp-attention-dialog { transform: translateY(0) scale(1); }
.sp-attention-header { display: flex; min-height: 66px; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 20px; border-bottom: 1px solid var(--sp-border-soft); }
.sp-attention-brand { display: flex; align-items: center; gap: 10px; }
.sp-attention-brand-mark { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; }
.sp-attention-brand-mark img { display: block; width: 34px; height: 34px; border-radius: 9px; object-fit: contain; }
.sp-attention-brand strong, .sp-attention-brand small { display: block; }
.sp-attention-brand strong { color: var(--sp-text); font-size: 13px; }
.sp-attention-brand small { margin-top: 1px; color: var(--sp-muted); font-size: 10.5px; }
.sp-attention-close { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border: 1px solid var(--sp-border); border-radius: 8px; color: var(--sp-sub); background: var(--sp-card); font-size: 20px; cursor: pointer; }
.sp-attention-close:hover { color: var(--sp-text); background: var(--sp-bg); }
.sp-attention-close:focus-visible, .sp-attention-later:focus-visible, .sp-attention-action:focus-visible { outline: 0; box-shadow: var(--sp-focus); }
.sp-attention-body { min-height: 0; overflow-y: auto; padding: 24px; }
.sp-attention-intro { display: flex; align-items: flex-start; gap: 15px; }
.sp-attention-hero-icon { display: inline-flex; width: 46px; height: 46px; flex: 0 0 46px; align-items: center; justify-content: center; border: 1px solid color-mix(in srgb, var(--sp-amber) 25%, var(--sp-border)); border-radius: 12px; color: var(--sp-amber); background: var(--sp-amber-soft); font-size: 23px; }
.sp-attention-hero-icon.is-critical { border-color: color-mix(in srgb, var(--sp-red) 25%, var(--sp-border)); color: var(--sp-red); background: var(--sp-red-soft); }
.sp-attention-eyebrow { display: block; margin-bottom: 3px; color: var(--sp-red); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sp-attention-intro h2 { margin: 0; color: var(--sp-text); font-size: 22px; line-height: 1.3; letter-spacing: -.02em; }
.sp-attention-intro p { margin: 5px 0 0; color: var(--sp-sub); font-size: 12.5px; line-height: 1.55; }
.sp-attention-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-top: 20px; overflow: hidden; border: 1px solid var(--sp-border-soft); border-radius: 10px; background: var(--sp-border-soft); gap: 1px; }
.sp-attention-summary > div { min-width: 0; padding: 12px 14px; background: var(--sp-bg); }
.sp-attention-summary span, .sp-attention-summary strong { display: block; }
.sp-attention-summary span { color: var(--sp-muted); font-size: 10.5px; font-weight: 600; text-transform: uppercase; }
.sp-attention-summary strong { margin-top: 3px; overflow: hidden; color: var(--sp-text); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.sp-attention-summary strong.is-danger { color: var(--sp-red); }
.sp-attention-list { display: grid; gap: 10px; margin-top: 20px; }
.sp-attention-item { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid var(--sp-border); border-radius: 10px; background: var(--sp-card); }
.sp-attention-item-icon { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: 9px; color: var(--sp-amber); background: var(--sp-amber-soft); font-size: 19px; }
.sp-attention-item--danger .sp-attention-item-icon { color: var(--sp-red); background: var(--sp-red-soft); }
.sp-attention-item-copy { min-width: 0; }
.sp-attention-item-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 5px 12px; }
.sp-attention-item-title strong { color: var(--sp-text); font-size: 12.5px; font-weight: 700; }
.sp-attention-item-title span { color: var(--sp-text); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sp-attention-item-copy p { margin: 3px 0 0; color: var(--sp-muted); font-size: 11.5px; line-height: 1.5; }
.sp-attention-action { display: inline-flex; min-height: 34px; align-items: center; justify-content: center; gap: 5px; padding: 0 11px; border: 1px solid var(--sp-accent); border-radius: 7px; color: #fff; background: var(--sp-accent); font-size: 11.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.sp-attention-action:hover { border-color: var(--sp-accent-dark); color: #fff; background: var(--sp-accent-dark); }
.sp-attention-action i { font-size: 15px; }
.sp-attention-footer { display: flex; min-height: 64px; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 20px; border-top: 1px solid var(--sp-border-soft); background: var(--sp-bg); }
.sp-attention-footer p { display: flex; align-items: center; gap: 7px; margin: 0; color: var(--sp-muted); font-size: 10.5px; }
.sp-attention-footer p i { color: var(--sp-teal); font-size: 15px; }
.sp-attention-later { flex: 0 0 auto; min-height: 34px; padding: 0 12px; border: 1px solid var(--sp-border); border-radius: 7px; color: var(--sp-sub); background: var(--sp-card); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; }
.sp-attention-later:hover { color: var(--sp-text); background: var(--sp-surface-2); }
.sd-dark .sp-attention-backdrop { background: rgba(2, 6, 14, .82); }

@media (max-width: 680px) {
    .sp-attention-modal { align-items: flex-end; padding: 0; }
    .sp-attention-dialog { width: 100%; max-height: min(90vh, 820px); border-width: 1px 0 0; border-radius: 16px 16px 0 0; transform: translateY(30px); }
    .sp-attention-header { min-height: 58px; padding: 10px 16px; }
    .sp-attention-body { padding: 20px 16px; }
    .sp-attention-intro h2 { font-size: 19px; }
    .sp-attention-item { grid-template-columns: 36px minmax(0, 1fr); }
    .sp-attention-item-icon { width: 36px; height: 36px; }
    .sp-attention-action { grid-column: 2; width: 100%; }
    .sp-attention-footer { align-items: stretch; flex-direction: column; padding: 12px 16px max(12px, env(safe-area-inset-bottom)); }
    .sp-attention-later { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .sp-attention-modal, .sp-attention-dialog { transition: none; }
}

/* ============================================================
   12. LICENSE PAYMENT (lp-*) — toolbar + agreement + fee panel
   Tokens only, so light and dark both come from --sp-* .
   ============================================================ */
.lp-page { display: flex; flex-direction: column; gap: 18px; max-width: 980px; margin: 0 auto; }
.lp-page .hidden { display: none !important; }

.lp-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.lp-toolbar-copy h2 { margin: 0; color: var(--sp-text); font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.lp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin-top: 6px; color: var(--sp-sub); font-size: 12.5px; }
.lp-meta span { display: inline-flex; align-items: center; gap: 6px; }
.lp-meta span + span::before { content: ""; display: inline-block; width: 1px; height: 12px; margin: 0 10px; background: var(--sp-border); }
.lp-toolbar-actions { display: flex; flex-shrink: 0; gap: 8px; }

.lp-dot { display: inline-block; width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--sp-muted); }
.lp-dot.ok { background: var(--sp-teal); }
.lp-dot.warn { background: var(--sp-amber); }

.lp-grid { display: flex; flex-direction: column; gap: 18px; }
.lp-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.lp-panel { min-width: 0; overflow: hidden; border: 1px solid var(--sp-border); border-radius: 12px; background: var(--sp-card); box-shadow: var(--sp-shadow); }
.lp-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 15px 20px; border-bottom: 1px solid var(--sp-border); }
.lp-panel-head.compact { padding: 12px 18px; }
.lp-panel-head h3 { margin: 0; color: var(--sp-text); font-size: 14.5px; font-weight: 700; }
.lp-panel-head p { margin: 3px 0 0; color: var(--sp-sub); font-size: 12.5px; }

.lp-tag { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 8px; border: 1px solid var(--sp-border); border-radius: 6px; color: var(--sp-sub); background: var(--sp-card); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.lp-tag.ok { border-color: color-mix(in srgb, var(--sp-teal) 35%, var(--sp-border)); color: var(--sp-teal); background: var(--sp-teal-soft); }
.lp-tag.warn { border-color: color-mix(in srgb, var(--sp-amber) 35%, var(--sp-border)); color: var(--sp-amber); background: var(--sp-amber-soft); }

/* Agreement document */
.lp-doc { max-height: 560px; min-height: 0; overflow-y: auto; padding: 28px 36px; color: var(--sp-text); font-size: 13.5px; line-height: 1.65; }
.lp-doc .bg-adaptive-muted { box-shadow: none; }
.lp-doc .bx-check-circle { color: var(--sp-accent); }

/* Fee panel */
.lp-kv { margin: 0; padding: 4px 20px; }
.lp-kv > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--sp-border-soft); }
.lp-kv > div:last-child { border-bottom: 0; }
.lp-kv dt { color: var(--sp-sub); font-size: 12.5px; }
.lp-kv dd { margin: 0; color: var(--sp-text); font-size: 13px; font-weight: 600; text-align: right; }
.lp-kv .lp-total dt { color: var(--sp-text); font-weight: 600; }
.lp-kv .lp-total dd { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }

.lp-pay { padding: 16px 20px 18px; border-top: 1px solid var(--sp-border); background: var(--sp-surface-2); }
.lp-fee-panel { width: 100%; max-width: 640px; margin: 0 auto; }
.lp-pay-form { max-width: none; }
.lp-after { padding: 14px 20px 16px; border-top: 1px solid var(--sp-border); color: var(--sp-sub); font-size: 12.5px; line-height: 1.5; }
.lp-after strong { display: block; margin-bottom: 6px; color: var(--sp-text); font-size: 12.5px; font-weight: 600; }
.lp-after ul { margin: 0; padding-left: 18px; }
.lp-after li { padding: 2px 0; }
.lp-message { margin-bottom: 12px; }
.lp-label { display: block; margin: 0 0 8px; color: var(--sp-text); font-size: 12.5px; font-weight: 600; }
.lp-loading { padding: 14px; border: 1px dashed var(--sp-border); border-radius: 10px; color: var(--sp-sub); background: var(--sp-card); font-size: 12.5px; text-align: center; }
.lp-page #payment-element { padding: 12px; border: 1px solid var(--sp-border); border-radius: 10px; background: var(--sp-card); }
.lp-card-errors { min-height: 0; margin-top: 6px; color: var(--sp-red); font-size: 12px; }
.lp-card-errors:empty { display: none; }

.lp-pay-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 44px; margin-top: 14px; padding: 10px 16px; border: 1px solid var(--sp-accent); border-radius: 8px; color: #fff; background: var(--sp-accent); font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.lp-pay-btn:hover:not(:disabled) { border-color: var(--sp-accent-dark); background: var(--sp-accent-dark); }
.lp-pay-btn:disabled { opacity: .55; cursor: not-allowed; }
.lp-pay-btn:focus-visible { outline: 2px solid var(--sp-accent); outline-offset: 2px; }
.lp-secure { display: flex; align-items: flex-start; gap: 6px; margin: 12px 0 0; color: var(--sp-muted); font-size: 12px; line-height: 1.45; }
.lp-secure i { flex: 0 0 auto; margin-top: 1px; font-size: 14px; }

.lp-list { margin: 0; padding: 12px 18px 14px 32px; color: var(--sp-sub); font-size: 12.5px; line-height: 1.5; }
.lp-list li { padding: 3px 0; }

@media (max-width: 900px) { .lp-doc { max-height: 60vh; } }
@media (max-width: 640px) {
    .lp-toolbar { flex-direction: column; }
    .lp-toolbar-actions { width: 100%; }
    .lp-toolbar-actions .sdb-btn { flex: 1; justify-content: center; }
    .lp-doc { padding: 20px 16px; }
    .lp-panel-head { padding-left: 16px; padding-right: 16px; }
    .lp-kv { padding-left: 16px; padding-right: 16px; }
    .lp-pay { padding-left: 16px; padding-right: 16px; }
}
/* Script-injected message colours (tailwind utilities) read poorly on the light canvas */
body:not(.sd-dark) .lp-page .text-red-300,
body:not(.sd-dark) .lp-page .text-red-400,
body:not(.sd-dark) .lp-page .text-red-200 { color: var(--sp-red); }
body:not(.sd-dark) .lp-page .bg-red-500\/20,
body:not(.sd-dark) .lp-page .bg-red-500\/15 { background-color: var(--sp-red-soft); }
body:not(.sd-dark) .lp-page .border-red-500\/40 { border-color: color-mix(in srgb, var(--sp-red) 35%, var(--sp-border)); }
body:not(.sd-dark) .lp-page .text-emerald-300,
body:not(.sd-dark) .lp-page .text-green-400 { color: var(--sp-teal); }
body:not(.sd-dark) .lp-page .bg-emerald-500\/20,
body:not(.sd-dark) .lp-page .bg-green-600\/20 { background-color: var(--sp-teal-soft); }
body:not(.sd-dark) .lp-page .border-emerald-500\/40 { border-color: color-mix(in srgb, var(--sp-teal) 35%, var(--sp-border)); }
body:not(.sd-dark) .lp-page .text-blue-100 { color: var(--sp-text); }
body:not(.sd-dark) .lp-page .bg-blue-500\/15 { background-color: var(--sp-accent-soft); }
body:not(.sd-dark) .lp-page .border-blue-500\/40 { border-color: color-mix(in srgb, var(--sp-accent) 35%, var(--sp-border)); }