/* Generated runtime theme bundle. Edit source CSS files and rebuild this bundle when needed. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap');

/* Source: assets/css/main.css */
:root {
    --primary-color: #c5f949;
    --primary-hover: #b4e83a;
    --bg-color: #f4f7fc;
    --sidebar-bg: #1a1d2e;
    --sidebar-text: #a0a0c0;
    --sidebar-active: #c5f949;
    --sidebar-active-bg: rgba(197, 249, 73, 0.1);
    --text-main: #1a1d2e;
    --text-muted: #718096;
    --card-bg: #ffffff;
    --sidebar-width: 280px;
    --header-height: 80px;
    --radius: 24px;
    --shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
    --font-family: 'Outfit', 'Inter', system-ui, -apple-system, sans-serif;
    --border-color: rgba(0, 0, 0, 0.05);

    /* Image Reference Colors */
    --color-blue: #a0c4ff;
    --color-green: #c5f949;
    --color-yellow: #fff275;
    --color-salmon: #f8ad9d;
}

[data-theme="dark"] {
    /* Premium Midnight Slate Palette */
    --bg-color: #06080c;
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --card-bg: #11141d;
    --shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    --border-color: rgba(255, 255, 255, 0.05);

    /* Overrides for specific elements in dark mode */
    --sidebar-active-bg: rgba(197, 249, 73, 0.15);
    --input-bg: #1a1f2b;
}

[data-theme="dark"] .main-content header {
    background: rgba(6, 8, 12, 0.8);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-color);
}

[data-theme="dark"] .stat-card,
[data-theme="dark"] .resource-card,
[data-theme="dark"] .promo-banner {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
}

[data-theme="dark"] .stat-card.subscription,
[data-theme="dark"] .stat-card.expiry,
[data-theme="dark"] .stat-card.download,
[data-theme="dark"] .stat-card.blue,
[data-theme="dark"] .stat-card.green,
[data-theme="dark"] .stat-card.yellow,
[data-theme="dark"] .stat-card.salmon {
    border: none;
}

[data-theme="dark"] .access-container {
    background: transparent;
    border: none;
    box-shadow: none;
}

[data-theme="dark"] .cat-tab {
    background: #1a1f2b;
    color: var(--text-muted);
}

[data-theme="dark"] .cat-tab.active {
    background: var(--primary-color);
    color: #121421;
}

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background: #1a1f2b !important;
    border-color: var(--border-color) !important;
    color: white !important;
}

[data-theme="dark"] table tr:hover {
    background: rgba(255, 255, 255, 0.02) !important;
}

[data-theme="dark"] .nav-link {
    color: #94a3b8;
}

[data-theme="dark"] .nav-link:hover,
[data-theme="dark"] .nav-link.active {
    color: var(--primary-color);
}

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

body {
    font-family: var(--font-family);
    background-color: var(--bg-color);
    color: var(--text-main);
    display: flex;
    min-height: 100vh;
}

/* Layout Containers */
.wrapper {
    display: flex;
    width: 100%;
}

/* Sidebar Redesign */
.sidebar {
    width: var(--sidebar-width);
    background: #121421;
    /* Ultra Deep Premium Dark */
    height: 100vh;
    position: fixed;
    border-right: none;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    z-index: 1000;
    overflow-y: auto;
    box-shadow: 20px 0 60px rgba(0, 0, 0, 0.15);
}

/* Creative Scrollbar */
.sidebar::-webkit-scrollbar {
    width: 4px;
}

.sidebar::-webkit-scrollbar-track {
    background: #0f111a;
}

.sidebar::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, var(--primary-color), #8b5cf6);
    border-radius: 10px;
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 24px;
    font-weight: 700;
    color: white !important;
    margin-bottom: 35px;
    text-decoration: none;
    letter-spacing: -1px;
}

.sidebar-logo .logo-icon {
    width: 38px;
    height: 38px;
    background: var(--primary-color);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #121421;
    font-size: 18px;
    box-shadow: 0 8px 15px rgba(197, 249, 73, 0.3);
}

.sidebar-logo span {
    font-family: 'Outfit', sans-serif;
}

.nav-menu {
    list-style: none;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nav-item {
    width: 100%;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    text-decoration: none;
    color: #8a8ca0;
    font-weight: 500;
    font-size: 13.5px;
    border-radius: 14px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.nav-link .nav-icon-wrapper {
    width: 32px;
    height: 32px;
    min-width: 32px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.nav-link i {
    font-size: 14px;
    color: #8a8ca0;
    transition: 0.3s;
}

.nav-link:hover {
    color: white;
    background: rgba(255, 255, 255, 0.05);
}

.nav-link:hover .nav-icon-wrapper {
    background: rgba(255, 255, 255, 0.1);
}

.nav-link:hover i {
    color: white;
}

.nav-link.active {
    background: #1e2030;
    color: white;
}

.nav-link.active .nav-icon-wrapper {
    background: var(--primary-color);
    box-shadow: 0 8px 15px rgba(197, 249, 73, 0.2);
}

.nav-link.active i {
    color: #121421;
}

/* Badge System */
.nav-badge {
    position: absolute;
    right: 12px;
    background: #ef4444;
    color: white;
    font-size: 8px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Sidebar CTA Box */
.sidebar-cta {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 15px;
    margin: 15px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.btn-cta {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.03);
    color: #8a8ca0;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    border-radius: 12px;
    transition: 0.3s;
}

.btn-cta i {
    font-size: 14px;
}

.btn-cta:hover {
    background: var(--primary-color);
    color: #121421;
    transform: translateY(-2px);
}

.sidebar-footer {
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

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

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ddd;
    overflow: hidden;
}

.user-info h4 {
    font-size: 14px;
    margin-bottom: 2px;
    color: white;
}

.user-info p {
    font-size: 11px;
    color: var(--sidebar-text);
    opacity: 0.7;
}

/* Main Content */
.main-content {
    margin-left: var(--sidebar-width);
    flex-grow: 1;
    padding: 32px 48px;
    background: var(--bg-color);
}

header {
    height: var(--header-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

.header-title h1 {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: -1px;
}

.header-title span {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 24px;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.btn-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    border: none;
    background: white;
    box-shadow: var(--shadow);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: var(--text-main);
    font-size: 18px;
}

.btn-icon:hover {
    background: var(--primary-color);
    transform: scale(1.05);
}

.btn-logout {
    background: var(--sidebar-bg);
    color: white;
    padding: 12px 24px;
    border-radius: 16px;
    text-decoration: none;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: 0.3s;
    font-size: 14px;
}

.btn-logout:hover {
    background: #000;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* Cards & Components */
.promo-banner {
    background: linear-gradient(90deg, #ff4d4d, #ff7676);
    border-radius: var(--radius);
    padding: 30px 40px;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(255, 77, 77, 0.2);
}

.promo-text h2 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 8px;
}

.btn-white {
    background: white;
    color: var(--primary-color);
    padding: 12px 28px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 40px;
}

.stat-card {
    background: var(--card-bg);
    padding: 32px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.01);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
    overflow: hidden;
}

.stat-card::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.1), transparent);
}

.stat-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}

.stat-card.subscription {
    background-color: var(--color-blue);
    border: none;
}

.stat-card.expiry {
    background-color: var(--color-green);
    border: none;
}

.stat-card.download {
    background-color: var(--color-salmon);
    border: none;
}

.stat-card.subscription *,
.stat-card.expiry *,
.stat-card.download * {
    color: #1a1d2e !important;
}

.stat-card.blue {
    background-color: var(--color-blue);
    border: none;
}

.stat-card.green {
    background-color: var(--color-green);
    border: none;
}

.stat-card.yellow {
    background-color: var(--color-yellow);
    border: none;
}

.stat-card.salmon {
    background-color: var(--color-salmon);
    border: none;
}

.stat-card.blue *,
.stat-card.green *,
.stat-card.yellow *,
.stat-card.salmon * {
    color: #1a1d2e !important;
}

.stat-label {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: 12px;
    opacity: 0.8;
}

.stat-value {
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -1px;
}

.stat-subtext {
    font-size: 13px;
    margin-top: 8px;
    font-weight: 500;
    opacity: 0.7;
}

.resource-section-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.resource-section-title::before {
    content: '';
    width: 4px;
    height: 24px;
    background: var(--primary-color);
    border-radius: 2px;
}

.search-bar {
    width: 100%;
    margin-bottom: 30px;
    position: relative;
    max-width: 500px;
}

.search-bar input {
    width: 100%;
    padding: 18px 28px;
    border-radius: 20px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    background: white;
    font-size: 15px;
    box-shadow: var(--shadow);
    outline: none;
    transition: 0.3s;
}

.search-bar input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 10px 30px rgba(197, 249, 73, 0.2);
}

.resource-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

@media (max-width: 1400px) {
    .resource-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

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

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

.resource-card {
    background: var(--card-bg);
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    position: relative;
    background: linear-gradient(145deg, var(--card-bg), var(--bg-color));
}

.resource-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.05));
    pointer-events: none;
    z-index: 1;
}

.resource-card:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.08);
    border-color: var(--primary-color);
}

.resource-card .tool-thumb-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16/10;
    overflow: hidden;
}

.resource-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.resource-card:hover img {
    transform: scale(1.15);
}

.resource-card-content {
    padding: 24px;
    text-align: left;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border-top: 1px solid var(--border-color);
}

.resource-title {
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 12px;
    color: var(--text-main);
    line-height: 1.2;
}

.btn-access {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px;
    background: var(--bg-color);
    color: var(--text-main);
    text-decoration: none;
    border-radius: 16px;
    font-weight: 800;
    transition: all 0.3s ease;
    text-align: center;
    margin-top: auto;
    font-size: 13px;
    border: 1px solid var(--border-color);
}

.btn-access:hover {
    background: var(--primary-color);
    color: #000;
    border-color: var(--primary-color);
    box-shadow: 0 8px 15px rgba(197, 249, 73, 0.3);
}

.dashboard-subtitle,
.affiliate-subtitle {
    margin: 0;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.6;
}

.dashboard-announcement {
    --announcement-bg: var(--surface-soft);
    --announcement-accent: var(--primary-color);
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 22px 24px;
    margin-bottom: 24px;
    border-left: 5px solid var(--announcement-accent);
    border-radius: 20px;
    background: var(--announcement-bg);
    box-shadow: var(--shadow);
}

.dashboard-announcement__icon {
    flex: 0 0 auto;
    margin-top: 2px;
    font-size: 22px;
    color: var(--announcement-accent);
}

.dashboard-announcement__title {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 800;
    color: var(--text-main);
}

.dashboard-announcement__copy {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.6;
}

.dashboard-stat-list {
    margin-top: 12px;
    display: grid;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #00d084;
}

.dashboard-stat-list span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.dashboard-stat-list .is-muted {
    color: var(--text-muted);
}

.dashboard-stat-meta {
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.6;
}

.dashboard-stat-icon {
    position: absolute;
    right: 20px;
    top: 38%;
    font-size: 30px;
    opacity: 0.28;
}

.dashboard-stat-icon--gold {
    color: #ffd700;
}

.dashboard-stat-icon--green {
    color: #00d084;
}

.dashboard-stat-icon--violet {
    color: #705ec8;
}

.dashboard-filter-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.dashboard-category-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.dashboard-search {
    max-width: 300px;
    margin-bottom: 0;
}

.dashboard-empty-slot,
.dashboard-recommended-head {
    grid-column: 1 / -1;
}

.dashboard-empty {
    padding: 40px;
    text-align: center;
    background: var(--card-bg);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-xl);
}

.dashboard-empty i {
    margin-bottom: 15px;
    color: var(--primary-color);
}

.dashboard-empty h3,
.dashboard-recommended-head h4 {
    margin: 0 0 10px;
    color: var(--text-main);
}

.dashboard-empty p,
.dashboard-recommended-head p,
.resource-copy-meta,
.resource-copy-meta--split {
    color: var(--text-muted);
}

.dashboard-empty p {
    margin: 0 0 24px;
}

.img-placeholder--full {
    width: 100%;
    height: 100%;
}

.tool-price-badge,
.tool-badge-chip {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 4px 9px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18);
}

.tool-price-badge {
    background: rgba(15, 23, 42, 0.78);
    color: #fff;
}

.tool-badge-chip {
    --tool-badge-bg: #f1f5f9;
    --tool-badge-color: #64748b;
    overflow: hidden;
    background: var(--tool-badge-bg);
    color: var(--tool-badge-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tool-badge-chip::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32), transparent);
    transform: translateX(-120%);
    animation: tool-badge-shimmer 2.2s linear infinite;
}

.tool-image-fade {
    position: absolute;
    inset: auto 0 0 0;
    height: 50%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.62), transparent);
    pointer-events: none;
}

.resource-copy-meta {
    margin-bottom: 12px;
    font-size: 11px;
    line-height: 1.55;
    display: -webkit-box;
    min-height: 34px;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.resource-copy-meta--split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.resource-action-icon {
    font-size: 11px;
}

.affiliate-shell {
    display: grid;
    gap: 30px;
}

.affiliate-success {
    background: #e6fffa;
    color: #00a973;
    border-color: rgba(0, 208, 132, 0.26);
}

.affiliate-join-card,
.affiliate-panel,
.affiliate-link-card,
.affiliate-history-card,
.cart-empty,
.cart-item,
.cart-summary,
.checkout-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow);
}

.affiliate-join-card {
    max-width: 800px;
    margin: 12px auto 0;
    padding: 60px;
    text-align: center;
}

.affiliate-join-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-xl);
    background: rgba(0, 208, 132, 0.1);
    color: var(--primary-color);
    font-size: 40px;
}

.affiliate-join-card h2 {
    margin-bottom: 16px;
}

.affiliate-join-card p {
    margin-bottom: 32px;
    font-size: 16px;
    line-height: 1.7;
}

.affiliate-join-card .btn-primary {
    width: auto;
    padding: 16px 48px;
    font-size: 16px;
}

.affiliate-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 0;
}

.affiliate-stat-card {
    border-bottom: 3px solid var(--stat-accent, var(--primary-color));
}

.affiliate-stat-card i {
    position: absolute;
    right: 20px;
    top: 38%;
    font-size: 28px;
    opacity: 0.28;
    color: var(--stat-accent, var(--primary-color));
}

.affiliate-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(300px, 1.2fr);
    gap: 30px;
    align-items: start;
}

.affiliate-panel {
    padding: 35px;
}

.affiliate-panel-head,
.affiliate-history-head,
.affiliate-link-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.affiliate-panel-head {
    margin-bottom: 25px;
}

.affiliate-panel-head h3,
.affiliate-history-head h3 {
    margin: 0 0 4px;
    font-size: 24px;
    font-weight: 900;
}

.affiliate-panel-head p,
.affiliate-history-head p {
    margin: 0;
    font-size: 13px;
}

.affiliate-reward-pill {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 16px;
    border-radius: var(--radius-md);
    background: rgba(197, 249, 73, 0.1);
    color: #7cb305;
    font-size: 12px;
    font-weight: 800;
}

.affiliate-progress-meta {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 15px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
}

.affiliate-progress-track {
    height: 14px;
    margin-bottom: 25px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-pill);
    background: #f1f5f9;
}

.affiliate-progress-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--primary-color), #22c55e);
    box-shadow: 0 0 10px rgba(197, 249, 73, 0.4);
    transition: width 0.9s ease;
}

.affiliate-empty-state {
    padding: 20px;
    text-align: center;
    border: 1px dashed #22c55e;
    border-radius: var(--radius-lg);
    background: #f0fdf4;
}

.affiliate-empty-state i {
    margin-bottom: 12px;
    font-size: 32px;
    color: #f59e0b;
}

.affiliate-empty-state h4 {
    margin-bottom: 6px;
    font-weight: 800;
}

.affiliate-empty-state p {
    color: #166534;
    font-size: 13px;
}

.affiliate-milestones {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding-bottom: 10px;
}

.affiliate-milestone {
    flex: 0 0 120px;
    padding: 15px;
    text-align: center;
    border-radius: var(--radius-lg);
    border: 1px solid #e2e8f0;
    background: #f8fafc;
}

.affiliate-milestone.is-complete {
    border-color: #22c55e;
    background: #f0fdf4;
}

.affiliate-milestone i {
    margin-bottom: 8px;
    font-size: 20px;
    color: #94a3b8;
}

.affiliate-milestone.is-complete i {
    color: #22c55e;
}

.affiliate-milestone small {
    display: block;
    margin-bottom: 4px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.affiliate-milestone strong {
    display: block;
    font-size: 14px;
    font-weight: 900;
    color: var(--text-main);
}

.affiliate-side-stack {
    display: grid;
    gap: 20px;
}

.affiliate-coupon-card {
    padding: 30px;
    border-radius: var(--radius-2xl);
    background: linear-gradient(135deg, var(--sidebar-bg), #2c3e50);
    color: #fff;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.affiliate-coupon-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.affiliate-coupon-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--primary-color);
    color: #000;
}

.affiliate-coupon-card p {
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
}

.affiliate-coupon-code {
    padding: 15px;
    text-align: center;
    cursor: pointer;
    border: 2px dashed rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.1);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 2px;
}

.affiliate-link-card {
    padding: 25px;
}

.affiliate-link-card h4 {
    margin-bottom: 12px;
    font-weight: 800;
}

.affiliate-link-input {
    flex: 1;
    min-height: 48px;
    padding: 12px 18px;
    border: 1px solid #f1f5f9;
    border-radius: 14px;
    background: #f8fafc;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
}

.affiliate-link-card .btn-primary {
    width: auto;
    padding: 0 20px;
    border-radius: 14px;
    font-size: 13px;
}

.affiliate-history-card {
    padding: 28px;
}

.affiliate-history-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
}

.affiliate-history-table th {
    padding: 16px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: left;
}

.affiliate-history-table tbody tr {
    background: var(--card-bg);
    box-shadow: var(--shadow);
    transition: transform 0.24s ease;
}

.affiliate-history-table tbody tr:hover {
    transform: translateX(5px);
}

.affiliate-history-table td {
    padding: 20px 16px;
}

.affiliate-history-table td:first-child {
    border-radius: 20px 0 0 20px;
}

.affiliate-history-table td:last-child {
    border-radius: 0 20px 20px 0;
}

.affiliate-history-primary {
    font-weight: 800;
    color: var(--text-main);
}

.affiliate-history-muted {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
}

.affiliate-history-empty {
    padding: 60px;
    text-align: center;
    border-radius: var(--radius-2xl);
    background: var(--card-bg);
    color: var(--text-muted);
    font-weight: 700;
}

.affiliate-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 32px;
    padding: 0 14px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 800;
}

.affiliate-status-badge.is-pending {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.affiliate-status-badge.is-complete {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.page-cart,
.page-checkout {
    display: block;
}

.cart-page__note,
.checkout-page__note {
    margin: 0;
    color: var(--text-muted);
    font-size: 14px;
}

.cart-clear-link {
    color: #e11d48;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.cart-empty {
    padding: 96px 24px;
    text-align: center;
}

.cart-empty__icon {
    margin-bottom: 30px;
    font-size: 80px;
    color: #e2e8f0;
}

.cart-empty h2 {
    margin-bottom: 10px;
    color: #0f172a;
    font-weight: 900;
}

.cart-empty p {
    margin-bottom: 35px;
    color: #64748b;
    font-weight: 600;
}

.cart-empty .btn-primary {
    display: inline-flex;
    width: auto;
    padding: 18px 40px;
    text-decoration: none;
}

.cart-layout,
.checkout-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 350px;
    gap: 40px;
    align-items: start;
}

.cart-items {
    display: grid;
    gap: 20px;
}

.cart-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 25px;
}

.cart-item__thumb {
    width: 80px;
    height: 80px;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid #f1f5f9;
    background: #f8fafc;
}

.cart-item__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-item__thumb--bundle,
.cart-item__thumb--custom {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    font-size: 32px;
}

.cart-item__thumb--bundle {
    background: #0f172a;
    color: var(--primary-color);
}

.cart-item__thumb--custom {
    background: linear-gradient(135deg, #8b5cf6, #d946ef);
    color: #fff;
}

.cart-item__body {
    flex: 1;
    min-width: 0;
}

.cart-item__body h4 {
    margin: 0 0 6px;
    color: #0f172a;
    font-weight: 800;
}

.cart-item__type {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.cart-item__type--tool {
    background: #eff6ff;
    color: #3b82f6;
}

.cart-item__type--bundle {
    background: #fffbeb;
    color: #b45309;
}

.cart-item__meta {
    margin-top: 8px;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}

.cart-item__aside {
    text-align: right;
}

.cart-item__price {
    color: #0f172a;
    font-size: 18px;
    font-weight: 950;
}

.cart-item__price--success {
    color: #10b981;
}

.cart-item__remove {
    display: inline-block;
    margin-top: 6px;
    color: #e11d48;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.cart-summary {
    position: sticky;
    top: 120px;
    padding: 35px;
}

.cart-summary h3,
.checkout-card h3 {
    margin-bottom: 24px;
    font-weight: 900;
    color: #0f172a;
}

.cart-summary__row,
.checkout-summary__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-weight: 700;
}

.cart-summary__row {
    margin-bottom: 15px;
    color: #64748b;
}

.cart-summary__row--total {
    margin: 25px 0 35px;
    padding-top: 25px;
    border-top: 2px dashed #f1f5f9;
    align-items: baseline;
}

.cart-summary__row--total span:first-child {
    font-size: 20px;
    font-weight: 950;
    color: #0f172a;
}

.cart-summary__row--total strong {
    font-size: 32px;
    color: var(--text-main);
    letter-spacing: -0.04em;
}

.cart-summary__tax {
    color: #10b981;
}

.cart-summary .btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 64px;
    border-radius: 20px;
    font-size: 18px;
    text-decoration: none;
    box-shadow: 0 10px 20px rgba(205, 255, 68, 0.3);
}

.cart-summary__note {
    margin-top: 24px;
    text-align: center;
    font-size: 12px;
    color: #94a3b8;
    font-weight: 700;
    line-height: 1.6;
}

.cart-summary__note i {
    color: var(--primary-color);
}

.checkout-layout {
    grid-template-columns: minmax(0, 1fr) 420px;
}

.checkout-card {
    padding: 40px;
}

.checkout-list {
    display: grid;
    gap: 16px;
}

.checkout-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    border-radius: 20px;
    border: 1px solid rgba(0, 0, 0, 0.03);
    background: #f8f9fa;
}

.checkout-item__main {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.checkout-item__icon {
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--primary-color);
    color: var(--text-main);
    font-size: 20px;
}

.checkout-item__title {
    color: var(--text-main);
    font-weight: 800;
}

.checkout-item__meta {
    font-size: 12px;
    color: var(--text-muted);
}

.checkout-item__price {
    color: var(--text-main);
    font-weight: 900;
}

.checkout-coupon {
    margin-top: 40px;
    padding: 24px;
    border-radius: 24px;
    background: #f1f5f9;
}

.checkout-coupon h4 {
    margin-bottom: 12px;
    font-weight: 800;
}

.checkout-coupon__row {
    display: flex;
    gap: 12px;
}

.checkout-coupon input {
    flex: 1;
    min-height: var(--input-height);
    padding: 14px 20px;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    outline: none;
    font-weight: 600;
    text-transform: uppercase;
}

.checkout-coupon .btn-primary {
    width: auto;
    padding: 0 24px;
}

.checkout-coupon__message {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 700;
}

.checkout-summary__rows {
    display: grid;
    gap: 12px;
    margin-bottom: 32px;
}

.checkout-summary__row {
    font-size: 16px;
    color: var(--text-muted);
    font-weight: 600;
}

.checkout-summary__row--discount {
    display: none;
    color: #e11d48;
    font-weight: 800;
}

.checkout-summary__row--total {
    margin-top: 5px;
    padding-top: 15px;
    border-top: 2px dashed #f1f5f9;
    color: var(--text-main);
    font-size: 28px;
    font-weight: 950;
}

.checkout-payment-label,
.checkout-wallet-label {
    margin-bottom: 10px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.checkout-payment-label {
    font-size: 11px;
}

.checkout-wallet {
    margin-top: 10px;
    padding-top: 15px;
    border-top: 1px solid #f1f5f9;
}

.payment-gate {
    margin-bottom: 20px;
    padding: 15px;
    border-radius: 16px;
}

.payment-gate--upi {
    background: #eef2ff;
    border: 1px solid #c7d2fe;
}

.payment-gate--upi p {
    margin-bottom: 15px;
    color: #4338ca;
    font-size: 13px;
    font-weight: 700;
}

.payment-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 50px;
    margin-bottom: 12px;
    padding: 0 18px;
    border: 0;
    border-radius: 16px;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
}

.payment-button img {
    height: 24px;
}

.payment-button--upi {
    background: #4338ca;
}

.payment-button--razorpay {
    background: #3399cc;
}

.payment-button--stripe {
    background: #635bff;
}

.payment-button--crypto {
    background: #111827;
}

.payment-button--wallet {
    background: var(--text-main);
    color: var(--primary-color);
}

.payment-button--wallet.is-disabled {
    cursor: not-allowed;
    opacity: 0.5;
    background: #94a3b8;
    color: #fff;
}

.checkout-wallet-help {
    margin-top: 8px;
    font-size: 11px;
    color: #e11d48;
    font-weight: 700;
}

.checkout-wallet-help a {
    color: inherit;
    text-decoration: underline;
}

.checkout-trust-note {
    margin-top: 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.6;
}

.checkout-trust-note i {
    margin-right: 4px;
    color: #059669;
}

@keyframes tool-badge-shimmer {
    100% {
        transform: translateX(120%);
    }
}

@media (max-width: 1024px) {
    .affiliate-content-grid,
    .cart-layout,
    .checkout-layout {
        grid-template-columns: 1fr;
    }

    .cart-summary,
    .checkout-card:last-child {
        position: static;
        top: auto;
    }
}

@media (max-width: 768px) {
    .dashboard-filter-row,
    .affiliate-panel-head,
    .affiliate-history-head,
    .affiliate-link-row,
    .checkout-coupon__row {
        flex-direction: column;
        align-items: stretch;
    }

    .dashboard-search {
        max-width: none;
    }

    .affiliate-join-card,
    .affiliate-panel,
    .affiliate-coupon-card,
    .affiliate-link-card,
    .affiliate-history-card,
    .cart-item,
    .cart-summary,
    .checkout-card {
        padding: 24px 20px;
        border-radius: var(--radius-xl);
    }

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

    .affiliate-join-card .btn-primary,
    .cart-empty .btn-primary {
        width: 100%;
        justify-content: center;
    }

    .cart-item,
    .checkout-item {
        align-items: flex-start;
    }

    .cart-item__aside {
        text-align: left;
    }
}

@media (max-width: 520px) {
    .affiliate-stats {
        grid-template-columns: 1fr;
    }

    .cart-empty {
        padding: 72px 18px;
    }

    .cart-item,
    .checkout-item {
        flex-direction: column;
    }
}

/* Authentication Pages */
.auth-container {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1d2e;
    padding: 24px;
}

.auth-page {
    --auth-primary: #f05a30;
    --auth-primary-hover: #e0481d;
    --auth-accent: #f59e42;
    --auth-surface: #fff8f1;
    --auth-surface-strong: #ffffff;
    --auth-text: #2f1d16;
    --auth-muted: #87695c;
    --auth-border: rgba(159, 92, 48, 0.16);
    --auth-shadow: 0 30px 70px rgba(122, 69, 36, 0.18);
    background:
        radial-gradient(circle at top left, rgba(240, 90, 48, 0.22), transparent 28%),
        radial-gradient(circle at bottom right, rgba(245, 158, 66, 0.18), transparent 24%),
        linear-gradient(180deg, #fff2e8 0%, #f7e4d4 52%, #f5ddd0 100%);
}

.auth-page .auth-container {
    background: transparent;
    padding: 32px 24px;
}

.auth-card {
    background: white;
    padding: 48px;
    border-radius: 32px;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.4);
    width: 100%;
    max-width: 480px;
    transition: transform 0.3s ease;
}

.auth-page .auth-card {
    max-width: 520px;
    background: linear-gradient(180deg, var(--auth-surface-strong), var(--auth-surface));
    border: 1px solid var(--auth-border);
    box-shadow: var(--auth-shadow);
    font-family: 'Plus Jakarta Sans', 'Outfit', system-ui, -apple-system, sans-serif;
}

.auth-card:hover {
    transform: translateY(-5px);
}

.auth-header {
    text-align: center;
    margin-bottom: 30px;
}

.auth-header img {
    height: 50px;
    margin-bottom: 16px;
}

.auth-logo {
    width: auto;
    height: 60px;
    margin-bottom: 15px;
}

.auth-title {
    margin-top: 5px;
    color: var(--auth-text);
    font-family: 'Playfair Display', serif;
    letter-spacing: -0.03em;
}

.auth-subtitle {
    color: var(--auth-muted);
    font-family: 'Plus Jakarta Sans', 'Outfit', system-ui, -apple-system, sans-serif;
}

.auth-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 78px;
    margin: 0 auto 18px;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(240, 90, 48, 0.16), rgba(245, 158, 66, 0.22));
    color: var(--auth-primary);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.auth-inline-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.auth-inline-row label {
    margin-bottom: 0;
}

.auth-link-inline {
    color: var(--auth-primary);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
}

.auth-check {
    margin-top: 18px;
}

.auth-check label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.6;
    color: var(--auth-muted);
}

.auth-check input[type="checkbox"] {
    width: auto;
    margin-top: 3px;
    accent-color: var(--auth-primary);
}

.auth-check a {
    color: var(--auth-primary);
    text-decoration: none;
}

.auth-note {
    margin-top: 10px;
    color: var(--auth-muted);
}

.auth-alert {
    padding: 14px 16px;
    margin-bottom: 18px;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid transparent;
}

.auth-alert.error {
    background: rgba(211, 62, 62, 0.09);
    color: #bf3131;
    border-color: rgba(211, 62, 62, 0.16);
}

.auth-alert.success {
    background: rgba(21, 128, 61, 0.09);
    color: #166534;
    border-color: rgba(21, 128, 61, 0.16);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--text-muted);
    font-size: 14px;
}

.auth-page .form-group label {
    color: var(--auth-muted);
    font-weight: 700;
}

.form-group input {
    width: 100%;
    padding: 14px 20px;
    border-radius: 12px;
    border: 1px solid #ddd;
    outline: none;
    transition: 0.2s;
}

.auth-page .form-group input {
    min-height: 52px;
    border-radius: 16px;
    border: 1px solid rgba(159, 92, 48, 0.16);
    background: rgba(255, 251, 247, 0.96);
    color: var(--auth-text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.form-group input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(255, 77, 77, 0.1);
}

.auth-page .form-group input:focus {
    border-color: var(--auth-primary);
    box-shadow: 0 0 0 4px rgba(240, 90, 48, 0.12);
}

.btn-primary {
    width: 100%;
    padding: 16px;
    background: var(--primary-color);
    color: var(--text-main);
    border: none;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
}

.auth-page .btn-primary {
    background: linear-gradient(135deg, var(--auth-primary), var(--auth-accent));
    color: #fff;
    box-shadow: 0 18px 32px rgba(240, 90, 48, 0.24);
}

.auth-page .btn-primary:hover {
    background: linear-gradient(135deg, var(--auth-primary-hover), #e97c32);
    box-shadow: 0 20px 38px rgba(240, 90, 48, 0.28);
}

.auth-page .btn-primary i {
    color: inherit;
}

.auth-page .btn-primary.auth-link-button {
    display: block;
    text-align: center;
    text-decoration: none;
}

.btn-primary:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(197, 249, 73, 0.3);
}

.auth-footer {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
    color: var(--text-muted);
}

.auth-footer a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
}

.auth-page .auth-footer,
.auth-page .auth-footer a {
    color: var(--auth-muted);
}

.auth-page .auth-footer a,
.auth-page .auth-link-inline {
    color: var(--auth-primary);
}

@media (max-width: 768px) {
    .auth-page {
        background:
            radial-gradient(circle at top center, rgba(240, 90, 48, 0.18), transparent 34%),
            radial-gradient(circle at bottom center, rgba(245, 158, 66, 0.14), transparent 26%),
            linear-gradient(180deg, #fff5ed 0%, #f8e3d1 54%, #f4d9ca 100%);
    }

    .auth-page .auth-container {
        align-items: flex-start;
        padding: calc(18px + env(safe-area-inset-top, 0px)) 14px calc(18px + env(safe-area-inset-bottom, 0px));
    }

    .auth-page .auth-card {
        max-width: none;
        padding: 26px 18px 22px;
        border-radius: 26px;
        box-shadow: 0 22px 48px rgba(122, 69, 36, 0.15);
    }

    .auth-card:hover {
        transform: none;
    }

    .auth-header {
        margin-bottom: 24px;
    }

    .auth-logo {
        height: 48px;
        margin-bottom: 12px;
    }

    .auth-icon-badge {
        width: 64px;
        height: 64px;
        margin-bottom: 14px;
        border-radius: 20px;
    }

    .auth-title {
        font-size: clamp(28px, 8vw, 36px);
        line-height: 1.02;
    }

    .auth-subtitle {
        font-size: 14px;
        line-height: 1.6;
    }

    .auth-inline-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .auth-check {
        margin-top: 14px;
    }

    .auth-check label {
        font-size: 12.5px;
        line-height: 1.5;
    }

    .auth-alert {
        padding: 13px 14px;
        border-radius: 14px;
        font-size: 13px;
    }

    .auth-page .form-group label {
        margin-bottom: 7px;
        font-size: 13px;
    }

    .auth-page .form-group input {
        min-height: 50px;
        padding: 13px 16px;
        border-radius: 14px;
        font-size: 16px;
    }

    .auth-page .btn-primary {
        min-height: 52px;
        padding: 14px 16px;
        border-radius: 16px;
        font-size: 15px;
        box-shadow: 0 16px 28px rgba(240, 90, 48, 0.2);
    }

    .auth-footer {
        margin-top: 18px;
        font-size: 13px;
        line-height: 1.6;
    }
}

@media (max-width: 420px) {
    .auth-page .auth-container {
        padding-left: 10px;
        padding-right: 10px;
    }

    .auth-page .auth-card {
        padding: 22px 14px 18px;
        border-radius: 22px;
    }

    .auth-title {
        font-size: 26px;
    }

    .auth-subtitle {
        font-size: 13px;
    }

    .auth-page .form-group input {
        min-height: 48px;
        padding: 12px 14px;
    }

    .auth-page .btn-primary {
        min-height: 50px;
    }
}

/* Category Tabs */
.cat-tab {
    padding: 12px 28px;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    background: white;
    cursor: pointer;
    font-weight: 700;
    color: var(--text-muted);
    transition: 0.3s;
    box-shadow: var(--shadow);
    font-size: 14px;
}

.cat-tab:hover {
    border-color: var(--primary-color);
    color: var(--text-main);
}

.cat-tab.active {
    background: var(--primary-color);
    color: var(--text-main);
    border-color: var(--primary-color);
}

/* Pricing Tabs & Toggles */
.pricing-tabs {
    display: flex;
    background: white;
    padding: 8px;
    border-radius: 12px;
    gap: 8px;
    box-shadow: var(--shadow);
    width: fit-content;
    margin: 30px auto;
}

.price-tab {
    padding: 10px 24px;
    border-radius: 8px;
    border: none;
    background: transparent;
    font-weight: 700;
    cursor: pointer;
    color: var(--text-muted);
    transition: 0.3s;
    position: relative;
}

.price-tab.active {
    background: #ff7676;
    color: white;
}

.badge-save {
    position: absolute;
    top: -15px;
    right: -10px;
    background: #00d084;
    color: white;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 700;
}

/* Pricing Grid */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 40px;
}

.pricing-card {
    background: white;
    border-radius: 32px;
    padding: 48px;
    border: 1px solid rgba(0, 0, 0, 0.03);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow);
}

.pricing-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.1);
}

.pricing-card.featured {
    border: 3px solid var(--primary-color);
    transform: scale(1.05);
    z-index: 2;
}

.pricing-card.featured:hover {
    transform: scale(1.07) translateY(-12px);
}

.btn-plan {
    display: block;
    text-align: center;
    padding: 18px;
    border-radius: 18px;
    text-decoration: none;
    font-weight: 900;
    margin-bottom: 40px;
    transition: 0.3s;
    font-size: 16px;
    letter-spacing: 0.5px;
}

.pricing-card:not(.featured) .btn-plan {
    background: #f8f9fa;
    color: var(--text-main);
}

.pricing-card.featured .btn-plan {
    background: var(--primary-color);
    color: var(--text-main);
}

.btn-plan:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.feature-list {
    list-style: none;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #444;
}

.feature-item i {
    color: #00d084;
}

/* Sidebar Submenu Styling */
.nav-submenu {
    list-style: none;
    padding-left: 30px;
    margin-top: 5px;
    display: none;
}

.nav-submenu.open {
    display: block;
}

.nav-sublink {
    display: block;
    padding: 8px 16px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 13px;
    border-radius: 8px;
    transition: 0.3s;
}

.nav-sublink:hover,
.nav-sublink.active {
    color: var(--primary-color);
    background: rgba(255, 77, 77, 0.05);
}

/* Header Cart Icon Styles */
.cart-trigger {
    position: relative;
    width: 48px;
    height: 48px;
    background: white;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #0f172a;
    border: 1px solid #f1f5f9;
    transition: 0.3s;
    box-shadow: var(--shadow);
}

.cart-trigger:hover {
    border-color: var(--primary-color);
    transform: translateY(-2px);
}

.cart-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--primary-color);
    color: var(--text-main);
    font-size: 10px;
    font-weight: 900;
    padding: 2px 6px;
    border-radius: 8px;
    border: 2px solid white;
}

/* Modern Modal System */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(10px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.3s ease;
}

.modal-content {
    background: white;
    width: 100%;
    max-width: 800px;
    max-height: 90vh;
    border-radius: 35px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal-content>form {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: hidden;
    min-height: 0;
}

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

.modal-overlay.open .modal-content {
    transform: scale(1);
}

.modal-header {
    padding: 25px 40px;
    background: #f8fafc;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.modal-body {
    padding: 40px;
    overflow-y: auto;
    flex-grow: 1;
    min-height: 0;
}

.modal-footer {
    padding: 25px 40px;
    border-top: 1px solid #f1f5f9;
    display: flex;
    gap: 15px;
    flex-shrink: 0;
}

/* Custom Scrollbar for Modal Body */
.modal-body::-webkit-scrollbar {
    width: 6px;
}

.modal-body::-webkit-scrollbar-track {
    background: transparent;
}

.modal-body::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 10px;
}

.modal-body::-webkit-scrollbar-thumb:hover {
    background: #cbd5e1;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (max-width: 640px) {
    .modal-content {
        max-height: 95vh;
        border-radius: 24px;
    }

    .modal-body {
        padding: 25px;
    }

    .modal-header,
    .modal-footer {
        padding: 20px 25px;
    }
}

/* Advanced Modal Content Styling */
.modal-section-title {
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #94a3b8;
    margin: 30px 0 15px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.modal-section-title:first-child {
    margin-top: 0;
}

.modal-section-title::after {
    content: '';
    flex-grow: 1;
    height: 1px;
    background: #f1f5f9;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.modal-field {
    margin-bottom: 20px;
}

.modal-label {
    display: block;
    font-weight: 700;
    font-size: 13px;
    color: #475569;
    margin-bottom: 8px;
}

.modal-input-group {
    position: relative;
    display: flex;
    align-items: center;
}

.modal-input-group i {
    position: absolute;
    left: 18px;
    color: #94a3b8;
    font-size: 14px;
    transition: 0.3s;
}

.modal-input {
    width: 100%;
    padding: 14px 18px 14px 48px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    outline: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-input:focus {
    background: white;
    border-color: var(--primary-color);
    box-shadow: 0 10px 25px rgba(197, 249, 73, 0.15);
}

.modal-input:focus+i {
    color: var(--primary-color);
}

.modal-textarea {
    min-height: 120px;
    padding-left: 18px !important;
    padding-right: 18px !important;
    resize: none;
}

/* Custom Checkbox Cards */
.selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

.check-card {
    position: relative;
    cursor: pointer;
}

.check-card input {
    position: absolute;
    opacity: 0;
}

.check-card-ui {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #f8fafc;
    border: 2px solid #f1f5f9;
    border-radius: 14px;
    transition: 0.3s;
}

.check-card-ui i {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 10px;
    color: transparent;
    transition: 0.2s;
}

.check-card input:checked+.check-card-ui {
    background: var(--sidebar-active-bg);
    border-color: var(--primary-color);
}

.check-card input:checked+.check-card-ui i {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #1a1d2e;
}

.check-card-text {
    font-size: 13px;
    font-weight: 700;
    color: #475569;
}

.check-card input:checked+.check-card-ui .check-card-text {
    color: #1a1d2e;
}

/* Attribute Toggles */
.toggle-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

.attribute-toggle {
    cursor: pointer;
}

.attribute-toggle input {
    display: none;
}

.attribute-toggle-ui {
    padding: 10px 15px;
    background: #f1f5f9;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 800;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: 0.3s;
}

.attribute-toggle input:checked+.attribute-toggle-ui.popular {
    background: #fff2d8;
    color: #b45309;
}

.attribute-toggle input:checked+.attribute-toggle-ui.active {
    background: #ecfdf5;
    color: #059669;
}

/* Sidebar Submenu Styles */
.nav-submenu {
    list-style: none;
    padding-left: 48px;
    height: 0;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    opacity: 0;
}

.nav-submenu.open {
    height: auto;
    opacity: 1;
    margin-bottom: 10px;
    padding-top: 5px;
}

.nav-sublink {
    display: block;
    padding: 8px 0;
    color: #8a8ca0;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: 0.2s;
}

.nav-sublink:hover {
    color: var(--primary-color);
}

/* Sidebar Collapse Feature */
:root {
    --sidebar-collapsed-width: 85px;
}

.sidebar {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.main-content {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar.collapsed {
    width: var(--sidebar-collapsed-width) !important;
    padding: 30px 15px !important;
}

.sidebar.collapsed .sidebar-logo span,
.sidebar.collapsed .nav-text,
.sidebar.collapsed .nav-submenu,
.sidebar.collapsed .nav-link i.fa-chevron-down,
.sidebar.collapsed .sidebar-cta,
.sidebar.collapsed .user-info,
.sidebar.collapsed .sidebar-footer span:not(.theme-toggle-icon),
.sidebar.collapsed .nav-badge:not(.cart-badge) {
    display: none !important;
}

.sidebar.collapsed .sidebar-header {
    flex-direction: column;
    gap: 20px;
}

.sidebar.collapsed .nav-link {
    justify-content: center;
    padding: 10px 0;
    gap: 0;
}

.sidebar.collapsed .nav-icon-wrapper {
    margin: 0 !important;
}

.sidebar-collapsed .main-content {
    margin-left: var(--sidebar-collapsed-width) !important;
}

.sidebar-toggle-btn {
    transition: transform 0.3s ease;
}

.sidebar.collapsed .sidebar-toggle-btn {
    transform: rotate(180deg);
}

.tool-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    background: #f1f5f9;
}

[data-theme="dark"] .tool-thumb {
    background: #1e293b;
}

.tool-card-v2:hover .tool-thumb {
    transform: scale(1.05);
}

.img-placeholder {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    font-size: 14px;
}

[data-theme="dark"] .img-placeholder {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    color: #475569;
}


/* Source: assets/css/responsive.css */
/* assets/css/responsive.css */

/* --- TABLET (max-width: 1024px) --- */
@media screen and (max-width: 1024px) {
    .wrapper.dashboard-layout {
        flex-direction: column !important;
    }

    body:not([data-app-scope="user"]):not([data-app-scope="admin"]):not([data-app-scope="super"]) .sidebar {
        width: 100% !important;
        height: auto !important;
        position: relative !important;
        padding: 15px 20px !important;
        box-shadow: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    }

    body:not([data-app-scope="user"]):not([data-app-scope="admin"]):not([data-app-scope="super"]) .sidebar.collapsed .nav-menu,
    body:not([data-app-scope="user"]):not([data-app-scope="admin"]):not([data-app-scope="super"]) .sidebar.collapsed .sidebar-cta,
    body:not([data-app-scope="user"]):not([data-app-scope="admin"]):not([data-app-scope="super"]) .sidebar.collapsed .sidebar-footer {
        display: none !important;
    }

    .main-content {
        margin-left: 0 !important;
        padding: 20px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .stats-grid,
    .resource-grid,
    .modern-grid,
    [data-ui-style*="grid-template-columns: 1fr 1fr"],
    [data-ui-style*="grid-template-columns: 2fr 1fr"],
    [data-ui-style*="grid-template-columns: 2fr 1.2fr"],
    [data-ui-style*="grid-template-columns: 1fr 400px"],
    [data-ui-style*="grid-template-columns: 1fr 1.5fr"],
    [data-ui-style*="grid-template-columns:repeat(3"],
    [data-ui-style*="grid-template-columns: repeat(3"],
    [data-ui-style*="grid-template-columns:repeat(4"],
    [data-ui-style*="grid-template-columns: repeat(4"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}


/* --- MOBILE (max-width: 768px) --- */
@media screen and (max-width: 768px) {

    /* --- GLOBAL RESETS --- */
    html,
    body {
        overflow-x: hidden !important;
        width: 100% !important;
        position: relative;
    }

    /* Force all main containers to be fluid */
    .wrapper,
    .main-content,
    .public-container,
    .hero-container,
    .footer-container,
    .shop-wrapper,
    .container,
    .section-header {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* --- TYPOGRAPHY RESIZING --- */
    h1 {
        font-size: 28px !important;
        line-height: 1.2 !important;
    }

    h2 {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }

    h3 {
        font-size: 20px !important;
    }

    p {
        font-size: 16px !important;
    }

    /* --- NAVIGATION --- */
    .main-nav {
        padding: 0 15px !important;
        height: 70px !important;
        width: 100% !important;
    }

    .nav-links {
        display: none !important;
        flex-direction: column;
        position: fixed;
        /* Fixed better than absolute for mobile menu */
        top: 70px;
        left: 0;
        width: 100% !important;
        background: #0f172a;
        padding: 20px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        z-index: 9999;
        height: auto;
        border-radius: 0 0 20px 20px;
    }

    .nav-links.active {
        display: flex !important;
    }

    .nav-actions .btn-nav-login,
    .nav-actions .btn-nav-signup {
        display: none !important;
    }

    .mobile-toggle {
        display: block !important;
        color: white;
        font-size: 24px;
        cursor: pointer;
    }

    /* --- COMPONENTS & GRIDS --- */

    /* Force 1 Column on EVERYTHING */
    .stats-grid,
    .resource-grid,
    .how-grid,
    .bento-grid-v2,
    .pricing-grid-v2,
    .tool-grid-v2,
    .shop-grid,
    .related-products-grid,
    .footer-grid,
    .product-detail-container,
    [data-ui-style*="grid-template-columns: 1fr 1fr"],
    [data-ui-style*="grid-template-columns: 2fr 1fr"],
    [data-ui-style*="grid-template-columns: 2fr 1.2fr"],
    [data-ui-style*="grid-template-columns: 1fr 400px"],
    [data-ui-style*="grid-template-columns: 1fr 1.5fr"],
    [data-ui-style*="grid-template-columns:repeat(3"],
    [data-ui-style*="grid-template-columns: repeat(3"],
    [data-ui-style*="grid-template-columns:repeat(4"],
    [data-ui-style*="grid-template-columns: repeat(4"] {
        grid-template-columns: 1fr !important;
        display: grid !important;
        gap: 30px !important;
    }

    [data-ui-style*="display: flex; justify-content: space-between"],
    [data-ui-style*="display:flex; justify-content:space-between"],
    [data-ui-style*="display: flex; gap:"],
    [data-ui-style*="display:flex; gap:"] {
        flex-wrap: wrap !important;
    }

    /* Cards */
    .bento-card.dark {
        grid-column: span 1 !important;
    }

    .stat-card,
    .resource-card,
    .product-card,
    .tool-card-v2,
    .price-card-v2,
    .auth-card {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Product Detail Fixes */
    .product-detail-container>div:first-child {
        position: static !important;
    }

    /* Shop Filters */
    .shop-sidebar {
        width: 100% !important;
        position: relative !important;
        top: 0 !important;
        margin-bottom: 30px !important;
        order: -1;
    }

    .shop-wrapper {
        flex-direction: column !important;
        display: flex !important;
    }

    [data-ui-style*="margin-left: 40px"] {
        margin-left: 0 !important;
    }

    [data-ui-style*="position: sticky"] {
        position: static !important;
        top: auto !important;
    }

    /* Forms */
    input,
    select,
    textarea {
        max-width: 100% !important;
    }

    /* Landing Page Specifics */
    .hero-v2 {
        padding: 100px 0 50px !important;
    }

    .hero-btns {
        flex-direction: column;
        width: 100%;
    }

    .btn-hero-primary,
    .btn-hero-secondary {
        width: 100% !important;
        display: block !important;
        text-align: center !important;
    }

    .ticker-v2 {
        padding: 20px 0 !important;
    }

    /* Footer */
    footer {
        padding: 50px 0 !important;
        text-align: center;
    }

    .footer-bottom {
        flex-direction: column !important;
    }

    /* Auth Pages */
    .auth-page .auth-container {
        padding: calc(18px + env(safe-area-inset-top, 0px)) 14px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
        align-items: flex-start !important;
        min-height: 100dvh !important;
    }

    .dashboard-category-tabs,
    .affiliate-milestones {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 6px;
    }

    .dashboard-category-tabs::-webkit-scrollbar,
    .affiliate-milestones::-webkit-scrollbar {
        height: 6px;
    }

    .cart-layout,
    .checkout-layout,
    .affiliate-content-grid {
        gap: 24px !important;
    }

    .checkout-summary__row--total {
        font-size: 24px !important;
    }
}

@media screen and (max-width: 420px) {
    .cart-summary,
    .checkout-card,
    .affiliate-panel,
    .affiliate-coupon-card,
    .affiliate-link-card,
    .affiliate-history-card,
    .affiliate-join-card {
        padding: 20px 16px !important;
    }

    .cart-summary .btn-primary,
    .payment-button {
        min-height: 52px !important;
    }
}


/* Source: assets/css/theme-system.css */

:root {
  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-ui: 'Inter', system-ui, -apple-system, sans-serif;
  --font-accent: 'Outfit', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  
  --color-green: #10b981;
  --color-red: #ef4444;
  --color-yellow: #f59e0b;
  --color-blue: #3b82f6;

  /* Default Light Theme - High Contrast SaaS */
  --bg-color: #fafafa;
  --surface-color: #ffffff;
  --card-bg: #ffffff;
  --surface-muted: #f4f4f5;
  --surface-success: #ecfdf5;
  --surface-warning: #fffbeb;
  
  --text-main: #09090b;
  --text-muted: #52525b;
  --text-light: #71717a;

  --border-color: #e4e4e7;
  --border-focus: #18181b;

  --shadow-sm: 0 2px 4px rgba(0,0,0,0.02);
  --shadow: 0 4px 12px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.03);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;

  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  --container-max: 1200px;
  --content-max: 1240px;
  --input-height: 52px;
  --button-height: 48px;
  
  /* These should be overridden by layout_header.php data-theme-vars if present */
  --primary-color: #18181b;
  --theme-accent: #3f3f46;
}

[data-theme-preset="dark"] {
  --bg-color: #000000;
  --surface-color: #09090b;
  --card-bg: #09090b;
  --surface-muted: #18181b;
  --surface-success: rgba(16, 185, 129, 0.1);
  --surface-warning: rgba(245, 158, 11, 0.1);
  
  --text-main: #fafafa;
  --text-muted: #a1a1aa;
  --text-light: #71717a;

  --border-color: #27272a;
  --border-focus: #fafafa;

  --shadow-sm: 0 2px 4px rgba(0,0,0,0.2);
  --shadow: 0 4px 12px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.2);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.6), 0 4px 8px rgba(0,0,0,0.3);
  
  --primary-color: #fafafa;
  --theme-accent: #e4e4e7;
}

/* Global Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-ui);
  background-color: var(--bg-color);
  color: var(--text-main);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
}

p {
  margin: 0 0 1rem;
  color: var(--text-muted);
}

a {
  color: var(--primary-color);
  text-decoration: none;
  transition: all 0.2s ease;
}

a:hover {
  opacity: 0.8;
}

body[data-app-scope="public"],
body[data-app-scope="user"],
body[data-app-scope="admin"],
body[data-app-scope="super"],
body.auth-page {
  overflow-x: hidden;
}

body[data-app-scope="public"] {
  min-height: 100vh;
}

body[data-app-scope="public"] .public-container {
  width: min(var(--content-max), calc(100% - 48px));
  margin-left: auto;
  margin-right: auto;
}

body[data-app-scope="user"] .main-content,
body[data-app-scope="admin"] .main-content,
body[data-app-scope="super"] .main-content {
  color: var(--text-main);
}

body[data-app-scope="public"] .content-surface,
body[data-app-scope="user"] .content-surface,
body[data-app-scope="admin"] .content-surface,
body[data-app-scope="super"] .content-surface {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow);
}

body[data-app-scope="public"] .eyebrow-label,
body[data-app-scope="user"] .eyebrow-label,
body[data-app-scope="admin"] .eyebrow-label,
body[data-app-scope="super"] .eyebrow-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--primary-color) 10%, var(--card-bg));
  color: var(--primary-color);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Header tweaks for public site */
body[data-app-scope="public"] .universal-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: transparent;
  border-bottom: 0;
}

body[data-app-scope="public"] .universal-header .nav-links a {
  color: var(--text-main);
  font-weight: 600;
}

body[data-app-scope="public"] .universal-header .header-brand {
  color: var(--text-main);
}


/* Source: assets/css/theme-presets.css */
body[data-theme-layout="neo-panel"] {
    --button-primary-text: #121421;
    --surface-elevated: rgba(255, 255, 255, 0.96);
    --surface-soft: rgba(255, 255, 255, 0.88);
    --surface-muted: #eef4ff;
    --surface-warning: #f8fbdd;
    --surface-success: #effee0;
    --surface-danger: #fff0f2;
    --line-soft: rgba(15, 23, 42, 0.08);
    background:
        radial-gradient(circle at top left, rgba(197, 249, 73, 0.08), transparent 22%),
        linear-gradient(180deg, #f7f9fd 0%, #f2f5fb 100%);
}

body[data-theme-layout="neo-panel"] .sidebar-logo span,
body[data-theme-layout="neo-panel"] .header-title h1,
body[data-theme-layout="neo-panel"] h1,
body[data-theme-layout="neo-panel"] h2,
body[data-theme-layout="neo-panel"] h3 {
    font-family: var(--font-display);
}

body[data-theme-layout="neo-panel"] .app-page-header {
    background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(248,250,252,0.98));
    border: 1px solid rgba(15, 23, 42, 0.06);
}

body[data-theme-layout="neo-panel"] .btn-primary,
body[data-theme-layout="neo-panel"] .btn-action.primary,
body[data-theme-layout="neo-panel"] .btn-card-primary,
body[data-theme-layout="neo-panel"] .tab-link-new.active,
body[data-theme-layout="neo-panel"] .duration-tab.active,
body[data-theme-layout="neo-panel"] .theme-switch-indicator,
body[data-theme-layout="neo-panel"] .nav-link:hover .nav-icon-wrapper,
body[data-theme-layout="neo-panel"] .nav-link.active .nav-icon-wrapper {
    background: var(--primary-color);
    background-image: none;
    box-shadow: 0 14px 28px rgba(197, 249, 73, 0.24);
}

body[data-theme-layout="neo-panel"] .btn-primary:hover,
body[data-theme-layout="neo-panel"] .btn-action.primary:hover,
body[data-theme-layout="neo-panel"] .btn-card-primary:hover {
    background: var(--primary-color);
    background-image: none;
}

body[data-theme-layout="neo-panel"] .nav-link:hover,
body[data-theme-layout="neo-panel"] .nav-link.active {
    background: rgba(197, 249, 73, 0.12);
    color: #ffffff;
}

body[data-theme-layout="neo-panel"] .nav-link:hover i,
body[data-theme-layout="neo-panel"] .nav-link.active i,
body[data-theme-layout="neo-panel"] .tab-link-new.active i,
body[data-theme-layout="neo-panel"] .duration-tab.active small {
    color: inherit;
}

body[data-theme-layout="neo-panel"] .nav-link .nav-icon-wrapper,
body[data-theme-layout="neo-panel"] .btn-cta,
body[data-theme-layout="neo-panel"] .theme-switch,
body[data-theme-layout="neo-panel"] .sidebar-toggle-btn,
body[data-theme-layout="neo-panel"] .nav-badge-inline {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

body[data-theme-layout="neo-panel"] .nav-badge-inline {
    color: #ffffff;
}

body[data-theme-layout="neo-panel"] .nav-sublink {
    color: rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.05);
}

body[data-theme-layout="neo-panel"] .nav-sublink:hover,
body[data-theme-layout="neo-panel"] .nav-sublink.active {
    background: rgba(197, 249, 73, 0.10);
    color: #ffffff;
    border-color: rgba(197, 249, 73, 0.16);
}

body[data-theme-layout="neo-panel"] .theme-toggle-icon,
body[data-theme-layout="neo-panel"] .nav-link:hover .nav-icon-wrapper i,
body[data-theme-layout="neo-panel"] .nav-link.active .nav-icon-wrapper i,
body[data-theme-layout="neo-panel"] .theme-switch-indicator {
    color: #121421;
}

body[data-theme-layout="neo-panel"] .btn-primary,
body[data-theme-layout="neo-panel"] .btn-action.primary,
body[data-theme-layout="neo-panel"] .btn-card-primary,
body[data-theme-layout="neo-panel"] .tab-link-new.active,
body[data-theme-layout="neo-panel"] .duration-tab.active {
    color: #121421;
}

body[data-theme-layout="neo-panel"] .tab-link-new.active i,
body[data-theme-layout="neo-panel"] .duration-tab.active small,
body[data-theme-layout="neo-panel"] .duration-tab.active span {
    color: rgba(18, 20, 33, 0.92);
}

body[data-theme-layout="neo-panel"] .header-title h1 span {
    font-style: normal;
}

html[data-theme="dark"] body[data-theme-layout="neo-panel"],
body[data-theme-layout="neo-panel"][data-theme="dark"] {
    --button-primary-text: #121421;
    --surface-elevated: rgba(15, 21, 31, 0.92);
    --surface-soft: rgba(12, 17, 27, 0.94);
    --surface-muted: rgba(20, 27, 39, 0.96);
    --surface-warning: rgba(52, 45, 18, 0.96);
    --surface-success: rgba(17, 45, 26, 0.96);
    --surface-danger: rgba(55, 23, 31, 0.96);
    --line-soft: rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(circle at top left, rgba(197, 249, 73, 0.10), transparent 24%),
        linear-gradient(180deg, #070b12 0%, #0b1118 48%, #091018 100%);
}

html[data-theme="dark"] body[data-theme-layout="neo-panel"] .sidebar,
body[data-theme-layout="neo-panel"][data-theme="dark"] .sidebar {
    background: linear-gradient(180deg, #090d16 0%, #0b1020 100%);
    box-shadow: 20px 0 60px rgba(0, 0, 0, 0.38);
}

html[data-theme="dark"] body[data-theme-layout="neo-panel"] .app-page-header,
html[data-theme="dark"] body[data-theme-layout="neo-panel"] .stat-card,
html[data-theme="dark"] body[data-theme-layout="neo-panel"] .resource-card,
html[data-theme="dark"] body[data-theme-layout="neo-panel"] .promo-banner,
html[data-theme="dark"] body[data-theme-layout="neo-panel"] .access-container,
html[data-theme="dark"] body[data-theme-layout="neo-panel"] .card,
html[data-theme="dark"] body[data-theme-layout="neo-panel"] .widget,
html[data-theme="dark"] body[data-theme-layout="neo-panel"] .panel,
html[data-theme="dark"] body[data-theme-layout="neo-panel"] .table-card,
html[data-theme="dark"] body[data-theme-layout="neo-panel"] .plan-card,
html[data-theme="dark"] body[data-theme-layout="neo-panel"] .product-card-new,
html[data-theme="dark"] body[data-theme-layout="neo-panel"] .filter-panel,
body[data-theme-layout="neo-panel"][data-theme="dark"] .app-page-header,
body[data-theme-layout="neo-panel"][data-theme="dark"] .stat-card,
body[data-theme-layout="neo-panel"][data-theme="dark"] .resource-card,
body[data-theme-layout="neo-panel"][data-theme="dark"] .promo-banner,
body[data-theme-layout="neo-panel"][data-theme="dark"] .access-container,
body[data-theme-layout="neo-panel"][data-theme="dark"] .card,
body[data-theme-layout="neo-panel"][data-theme="dark"] .widget,
body[data-theme-layout="neo-panel"][data-theme="dark"] .panel,
body[data-theme-layout="neo-panel"][data-theme="dark"] .table-card,
body[data-theme-layout="neo-panel"][data-theme="dark"] .plan-card,
body[data-theme-layout="neo-panel"][data-theme="dark"] .product-card-new,
body[data-theme-layout="neo-panel"][data-theme="dark"] .filter-panel {
    background: rgba(15, 21, 31, 0.92);
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] body[data-theme-layout="neo-panel"] .btn-action,
html[data-theme="dark"] body[data-theme-layout="neo-panel"] .btn-secondary,
html[data-theme="dark"] body[data-theme-layout="neo-panel"] .btn-card-secondary,
html[data-theme="dark"] body[data-theme-layout="neo-panel"] .currency-pill,
html[data-theme="dark"] body[data-theme-layout="neo-panel"] .filter-pill,
html[data-theme="dark"] body[data-theme-layout="neo-panel"] .header-currency-select,
html[data-theme="dark"] body[data-theme-layout="neo-panel"] .btn-icon,
html[data-theme="dark"] body[data-theme-layout="neo-panel"] .btn-logout,
html[data-theme="dark"] body[data-theme-layout="neo-panel"] input,
html[data-theme="dark"] body[data-theme-layout="neo-panel"] select,
html[data-theme="dark"] body[data-theme-layout="neo-panel"] textarea,
body[data-theme-layout="neo-panel"][data-theme="dark"] .btn-action,
body[data-theme-layout="neo-panel"][data-theme="dark"] .btn-secondary,
body[data-theme-layout="neo-panel"][data-theme="dark"] .btn-card-secondary,
body[data-theme-layout="neo-panel"][data-theme="dark"] .currency-pill,
body[data-theme-layout="neo-panel"][data-theme="dark"] .filter-pill,
body[data-theme-layout="neo-panel"][data-theme="dark"] .header-currency-select,
body[data-theme-layout="neo-panel"][data-theme="dark"] .btn-icon,
body[data-theme-layout="neo-panel"][data-theme="dark"] .btn-logout,
body[data-theme-layout="neo-panel"][data-theme="dark"] input,
body[data-theme-layout="neo-panel"][data-theme="dark"] select,
body[data-theme-layout="neo-panel"][data-theme="dark"] textarea {
    background: rgba(12, 17, 27, 0.94);
    border-color: rgba(255, 255, 255, 0.08);
    color: #f8fafc;
}

html[data-theme="dark"] body[data-theme-layout="neo-panel"] .header-title h1,
html[data-theme="dark"] body[data-theme-layout="neo-panel"] .header-title p,
html[data-theme="dark"] body[data-theme-layout="neo-panel"] .main-content h1,
html[data-theme="dark"] body[data-theme-layout="neo-panel"] .main-content h2,
html[data-theme="dark"] body[data-theme-layout="neo-panel"] .main-content h3,
html[data-theme="dark"] body[data-theme-layout="neo-panel"] .main-content h4,
html[data-theme="dark"] body[data-theme-layout="neo-panel"] .main-content strong,
html[data-theme="dark"] body[data-theme-layout="neo-panel"] .main-content b,
html[data-theme="dark"] body[data-theme-layout="neo-panel"] .main-content p,
html[data-theme="dark"] body[data-theme-layout="neo-panel"] .main-content span,
body[data-theme-layout="neo-panel"][data-theme="dark"] .header-title h1,
body[data-theme-layout="neo-panel"][data-theme="dark"] .header-title p,
body[data-theme-layout="neo-panel"][data-theme="dark"] .main-content h1,
body[data-theme-layout="neo-panel"][data-theme="dark"] .main-content h2,
body[data-theme-layout="neo-panel"][data-theme="dark"] .main-content h3,
body[data-theme-layout="neo-panel"][data-theme="dark"] .main-content h4,
body[data-theme-layout="neo-panel"][data-theme="dark"] .main-content strong,
body[data-theme-layout="neo-panel"][data-theme="dark"] .main-content b,
body[data-theme-layout="neo-panel"][data-theme="dark"] .main-content p,
body[data-theme-layout="neo-panel"][data-theme="dark"] .main-content span {
    color: #f8fafc;
}

html[data-theme="dark"] body[data-theme-layout="neo-panel"] .header-subtitle,
html[data-theme="dark"] body[data-theme-layout="neo-panel"] .price-note,
html[data-theme="dark"] body[data-theme-layout="neo-panel"] .card-description,
html[data-theme="dark"] body[data-theme-layout="neo-panel"] .feature-list-new li,
html[data-theme="dark"] body[data-theme-layout="neo-panel"] .toolbar-group-title small,
body[data-theme-layout="neo-panel"][data-theme="dark"] .header-subtitle,
body[data-theme-layout="neo-panel"][data-theme="dark"] .price-note,
body[data-theme-layout="neo-panel"][data-theme="dark"] .card-description,
body[data-theme-layout="neo-panel"][data-theme="dark"] .feature-list-new li,
body[data-theme-layout="neo-panel"][data-theme="dark"] .toolbar-group-title small {
    color: #94a3b8;
}

body[data-theme-layout="editorial-warm"] {
    --button-primary-text: #ffffff;
    --surface-elevated: rgba(255, 250, 244, 0.96);
    --surface-soft: rgba(255, 246, 238, 0.94);
    --surface-muted: #f7ece2;
    --surface-warning: #fff2de;
    --surface-success: #eef8ee;
    --surface-danger: #fff1ef;
    --line-soft: rgba(163, 108, 59, 0.12);
    background:
        radial-gradient(circle at top left, rgba(240, 90, 48, 0.14), transparent 24%),
        linear-gradient(180deg, #fbf1e5 0%, #f4e4d3 48%, #f8f0e8 100%);
}

body[data-theme-layout="editorial-warm"] .sidebar {
    background: linear-gradient(180deg, #fffaf4 0%, #f6e7d5 58%, #f0ddc8 100%);
    box-shadow: 20px 0 60px rgba(144, 97, 54, 0.14);
    border-right: 1px solid rgba(163, 108, 59, 0.14);
}

body[data-theme-layout="editorial-warm"] .sidebar-header,
body[data-theme-layout="editorial-warm"] .sidebar-cta,
body[data-theme-layout="editorial-warm"] .sidebar-footer-switch {
    border-color: rgba(163, 108, 59, 0.12);
}

body[data-theme-layout="editorial-warm"] .sidebar-logo,
body[data-theme-layout="editorial-warm"] .sidebar-logo span,
body[data-theme-layout="editorial-warm"] .header-title h1,
body[data-theme-layout="editorial-warm"] .main-content h1,
body[data-theme-layout="editorial-warm"] .main-content h2,
body[data-theme-layout="editorial-warm"] .main-content h3 {
    color: #241914;
}

body[data-theme-layout="editorial-warm"] .sidebar-logo span,
body[data-theme-layout="editorial-warm"] .header-title h1,
body[data-theme-layout="editorial-warm"] h1,
body[data-theme-layout="editorial-warm"] h2,
body[data-theme-layout="editorial-warm"] h3 {
    font-family: var(--font-display);
    letter-spacing: -0.03em;
}

body[data-theme-layout="editorial-warm"] .header-title h1 span {
    color: var(--primary-color);
    font-style: normal;
}

body[data-theme-layout="editorial-warm"] .app-page-header {
    background: linear-gradient(180deg, rgba(255, 250, 244, 0.96), rgba(248, 239, 230, 0.94));
    border: 1px solid rgba(163, 108, 59, 0.12);
    box-shadow: 0 24px 50px rgba(123, 78, 39, 0.08);
}

body[data-theme-layout="editorial-warm"] .header-subtitle {
    color: #7b685b;
}

body[data-theme-layout="editorial-warm"] .btn-primary,
body[data-theme-layout="editorial-warm"] .btn-action.primary,
body[data-theme-layout="editorial-warm"] .btn-card-primary,
body[data-theme-layout="editorial-warm"] .tab-link-new.active,
body[data-theme-layout="editorial-warm"] .duration-tab.active {
    box-shadow: 0 18px 34px rgba(240, 90, 48, 0.22);
    color: #ffffff;
}

body[data-theme-layout="editorial-warm"] .btn-primary i,
body[data-theme-layout="editorial-warm"] .btn-action.primary i,
body[data-theme-layout="editorial-warm"] .btn-card-primary i,
body[data-theme-layout="editorial-warm"] .tab-link-new.active i,
body[data-theme-layout="editorial-warm"] .duration-tab.active small,
body[data-theme-layout="editorial-warm"] .duration-tab.active span {
    color: rgba(255, 255, 255, 0.95);
}

body[data-theme-layout="editorial-warm"] .nav-link,
body[data-theme-layout="editorial-warm"] .nav-sublink,
body[data-theme-layout="editorial-warm"] .sidebar-footer span,
body[data-theme-layout="editorial-warm"] .sidebar-footer p {
    color: #755c4d;
}

body[data-theme-layout="editorial-warm"] .nav-link .nav-icon-wrapper,
body[data-theme-layout="editorial-warm"] .btn-cta,
body[data-theme-layout="editorial-warm"] .theme-switch {
    background: rgba(240, 90, 48, 0.08);
    border: 1px solid rgba(240, 90, 48, 0.08);
}

body[data-theme-layout="editorial-warm"] .sidebar .sidebar-toggle-btn,
body[data-theme-layout="editorial-warm"] .sidebar .nav-link .nav-caret,
body[data-theme-layout="editorial-warm"] .sidebar .nav-link i,
body[data-theme-layout="editorial-warm"] .sidebar .nav-sublink::before {
    color: #a1826c;
}

body[data-theme-layout="editorial-warm"] .sidebar-toggle-btn,
body[data-theme-layout="editorial-warm"] .nav-badge-inline {
    background: rgba(255, 250, 244, 0.94);
    border-color: rgba(163, 108, 59, 0.12);
}

body[data-theme-layout="editorial-warm"] .nav-sublink {
    background: rgba(255, 250, 244, 0.78);
    border-color: rgba(163, 108, 59, 0.10);
}

body[data-theme-layout="editorial-warm"] .theme-switch-indicator,
body[data-theme-layout="editorial-warm"] .nav-link:hover .nav-icon-wrapper,
body[data-theme-layout="editorial-warm"] .nav-link.active .nav-icon-wrapper {
    background: linear-gradient(135deg, #f05a30, #f59e42);
}

body[data-theme-layout="editorial-warm"] .nav-link:hover,
body[data-theme-layout="editorial-warm"] .nav-link.active,
body[data-theme-layout="editorial-warm"] .nav-sublink:hover,
body[data-theme-layout="editorial-warm"] .nav-sublink.active {
    background: rgba(240, 90, 48, 0.12);
    color: #241914;
}

body[data-theme-layout="editorial-warm"] .nav-submenu {
    border-left-color: rgba(163, 108, 59, 0.18);
}

body[data-theme-layout="editorial-warm"] .sidebar .nav-item:has(.nav-submenu.open) > .nav-link {
    background: rgba(240, 90, 48, 0.10);
    color: #241914;
}

body[data-theme-layout="editorial-warm"] .sidebar .nav-item:has(.nav-submenu.open) > .nav-link .nav-caret {
    color: #f05a30;
}

body[data-theme-layout="editorial-warm"] .sidebar .user-snippet {
    background: rgba(255, 250, 244, 0.68);
    border: 1px solid rgba(163, 108, 59, 0.12);
}

body[data-theme-layout="editorial-warm"] .sidebar .user-info h4 {
    color: #241914;
}

body[data-theme-layout="editorial-warm"] .sidebar .user-info p,
body[data-theme-layout="editorial-warm"] .sidebar .sidebar-footer-label {
    color: #8b705f;
}

body[data-theme-layout="editorial-warm"] .btn-icon,
body[data-theme-layout="editorial-warm"] .btn-logout,
body[data-theme-layout="editorial-warm"] .header-actions select,
body[data-theme-layout="editorial-warm"] .modal-input,
body[data-theme-layout="editorial-warm"] input,
body[data-theme-layout="editorial-warm"] select,
body[data-theme-layout="editorial-warm"] textarea {
    background: rgba(255, 251, 246, 0.96);
    border: 1px solid rgba(163, 108, 59, 0.12);
    color: #241914;
    box-shadow: none;
}

body[data-theme-layout="editorial-warm"] .btn-action,
body[data-theme-layout="editorial-warm"] .btn-secondary,
body[data-theme-layout="editorial-warm"] .btn-card-secondary {
    background: rgba(255, 250, 244, 0.96);
    border: 1px solid rgba(163, 108, 59, 0.12);
    color: #241914;
}

body[data-theme-layout="editorial-warm"] .btn-icon,
body[data-theme-layout="editorial-warm"] .header-currency-select,
body[data-theme-layout="editorial-warm"] .btn-logout {
    border-radius: 18px;
}

body[data-theme-layout="editorial-warm"] .btn-icon:hover,
body[data-theme-layout="editorial-warm"] .btn-logout:hover {
    transform: translateY(-2px);
}

body[data-theme-layout="editorial-warm"] .theme-panel,
body[data-theme-layout="editorial-warm"] .stat-card,
body[data-theme-layout="editorial-warm"] .resource-card,
body[data-theme-layout="editorial-warm"] .promo-banner,
body[data-theme-layout="editorial-warm"] .access-container,
body[data-theme-layout="editorial-warm"] .card,
body[data-theme-layout="editorial-warm"] .widget,
body[data-theme-layout="editorial-warm"] .panel,
body[data-theme-layout="editorial-warm"] .table-card {
    background: rgba(255, 250, 244, 0.96);
    box-shadow: 0 22px 50px rgba(123, 78, 39, 0.10);
}

body[data-theme-layout="editorial-warm"] .badge-save,
body[data-theme-layout="editorial-warm"] .nav-badge,
body[data-theme-layout="editorial-warm"] .theme-chip,
body[data-theme-layout="editorial-warm"] .meta-chip,
body[data-theme-layout="editorial-warm"] .product-feature-chip {
    background: rgba(240, 90, 48, 0.10);
    color: #7c3b1c;
}

body[data-theme-layout="editorial-warm"] .main-content table tbody tr {
    background: rgba(255, 250, 244, 0.92);
}

body[data-theme-layout="editorial-warm"] .theme-feature-pack {
    background: linear-gradient(180deg, rgba(240, 90, 48, 0.12), rgba(245, 158, 66, 0.10));
    border: 1px solid rgba(240, 90, 48, 0.12);
}

body[data-theme-layout="editorial-warm"] .theme-price-block {
    background: rgba(255, 247, 239, 0.98);
    border-color: rgba(163, 108, 59, 0.12);
}

body[data-theme-layout="editorial-warm"] .theme-chip {
    background: rgba(240, 90, 48, 0.08);
}

body[data-theme-layout="editorial-warm"] .theme-tab {
    background: rgba(255, 248, 240, 0.96);
}

body[data-theme-layout="editorial-warm"] .theme-tab.is-active {
    background: linear-gradient(135deg, #f05a30 0%, #f59e42 100%);
}

html[data-theme="dark"] body[data-theme-layout="editorial-warm"],
body[data-theme-layout="editorial-warm"][data-theme="dark"] {
    --button-primary-text: #ffffff;
    --surface-elevated: rgba(32, 23, 18, 0.92);
    --surface-soft: rgba(33, 24, 18, 0.96);
    --surface-muted: rgba(44, 31, 24, 0.94);
    --surface-warning: rgba(70, 43, 18, 0.94);
    --surface-success: rgba(24, 47, 32, 0.94);
    --surface-danger: rgba(63, 28, 24, 0.94);
    --line-soft: rgba(255, 228, 208, 0.08);
    background:
        radial-gradient(circle at top left, rgba(240, 90, 48, 0.16), transparent 24%),
        linear-gradient(180deg, #160e0a 0%, #1c130f 48%, #140c08 100%);
}

html[data-theme="dark"] body[data-theme-layout="editorial-warm"] .sidebar,
body[data-theme-layout="editorial-warm"][data-theme="dark"] .sidebar {
    background: linear-gradient(180deg, #261a14 0%, #1c130f 100%);
}

html[data-theme="dark"] body[data-theme-layout="editorial-warm"] .app-page-header,
html[data-theme="dark"] body[data-theme-layout="editorial-warm"] .stat-card,
html[data-theme="dark"] body[data-theme-layout="editorial-warm"] .resource-card,
html[data-theme="dark"] body[data-theme-layout="editorial-warm"] .promo-banner,
html[data-theme="dark"] body[data-theme-layout="editorial-warm"] .access-container,
html[data-theme="dark"] body[data-theme-layout="editorial-warm"] .card,
html[data-theme="dark"] body[data-theme-layout="editorial-warm"] .widget,
html[data-theme="dark"] body[data-theme-layout="editorial-warm"] .panel,
html[data-theme="dark"] body[data-theme-layout="editorial-warm"] .table-card,
html[data-theme="dark"] body[data-theme-layout="editorial-warm"] .plan-card,
html[data-theme="dark"] body[data-theme-layout="editorial-warm"] .product-card-new,
html[data-theme="dark"] body[data-theme-layout="editorial-warm"] .filter-panel,
body[data-theme-layout="editorial-warm"][data-theme="dark"] .app-page-header,
body[data-theme-layout="editorial-warm"][data-theme="dark"] .stat-card,
body[data-theme-layout="editorial-warm"][data-theme="dark"] .resource-card,
body[data-theme-layout="editorial-warm"][data-theme="dark"] .promo-banner,
body[data-theme-layout="editorial-warm"][data-theme="dark"] .access-container,
body[data-theme-layout="editorial-warm"][data-theme="dark"] .card,
body[data-theme-layout="editorial-warm"][data-theme="dark"] .widget,
body[data-theme-layout="editorial-warm"][data-theme="dark"] .panel,
body[data-theme-layout="editorial-warm"][data-theme="dark"] .table-card,
body[data-theme-layout="editorial-warm"][data-theme="dark"] .plan-card,
body[data-theme-layout="editorial-warm"][data-theme="dark"] .product-card-new,
body[data-theme-layout="editorial-warm"][data-theme="dark"] .filter-panel {
    background: rgba(32, 23, 18, 0.92);
    border-color: rgba(255, 228, 208, 0.08);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.26);
}

html[data-theme="dark"] body[data-theme-layout="editorial-warm"] .header-title h1,
html[data-theme="dark"] body[data-theme-layout="editorial-warm"] .main-content h1,
html[data-theme="dark"] body[data-theme-layout="editorial-warm"] .main-content h2,
html[data-theme="dark"] body[data-theme-layout="editorial-warm"] .main-content h3,
html[data-theme="dark"] body[data-theme-layout="editorial-warm"] .main-content h4,
html[data-theme="dark"] body[data-theme-layout="editorial-warm"] .main-content strong,
html[data-theme="dark"] body[data-theme-layout="editorial-warm"] .main-content b,
html[data-theme="dark"] body[data-theme-layout="editorial-warm"] .main-content p,
html[data-theme="dark"] body[data-theme-layout="editorial-warm"] .main-content span,
body[data-theme-layout="editorial-warm"][data-theme="dark"] .header-title h1,
body[data-theme-layout="editorial-warm"][data-theme="dark"] .main-content h1,
body[data-theme-layout="editorial-warm"][data-theme="dark"] .main-content h2,
body[data-theme-layout="editorial-warm"][data-theme="dark"] .main-content h3,
body[data-theme-layout="editorial-warm"][data-theme="dark"] .main-content h4,
body[data-theme-layout="editorial-warm"][data-theme="dark"] .main-content strong,
body[data-theme-layout="editorial-warm"][data-theme="dark"] .main-content b,
body[data-theme-layout="editorial-warm"][data-theme="dark"] .main-content p,
body[data-theme-layout="editorial-warm"][data-theme="dark"] .main-content span {
    color: #f7eadf;
}

html[data-theme="dark"] body[data-theme-layout="editorial-warm"] .header-subtitle,
html[data-theme="dark"] body[data-theme-layout="editorial-warm"] .price-note,
html[data-theme="dark"] body[data-theme-layout="editorial-warm"] .card-description,
html[data-theme="dark"] body[data-theme-layout="editorial-warm"] .feature-list-new li,
html[data-theme="dark"] body[data-theme-layout="editorial-warm"] .toolbar-group-title small,
body[data-theme-layout="editorial-warm"][data-theme="dark"] .header-subtitle,
body[data-theme-layout="editorial-warm"][data-theme="dark"] .price-note,
body[data-theme-layout="editorial-warm"][data-theme="dark"] .card-description,
body[data-theme-layout="editorial-warm"][data-theme="dark"] .feature-list-new li,
body[data-theme-layout="editorial-warm"][data-theme="dark"] .toolbar-group-title small {
    color: #cfb5a2;
}

html[data-theme="dark"] body[data-theme-layout="editorial-warm"] .btn-icon,
html[data-theme="dark"] body[data-theme-layout="editorial-warm"] .btn-logout,
html[data-theme="dark"] body[data-theme-layout="editorial-warm"] .header-actions select,
html[data-theme="dark"] body[data-theme-layout="editorial-warm"] .modal-input,
html[data-theme="dark"] body[data-theme-layout="editorial-warm"] input,
html[data-theme="dark"] body[data-theme-layout="editorial-warm"] select,
html[data-theme="dark"] body[data-theme-layout="editorial-warm"] textarea,
body[data-theme-layout="editorial-warm"][data-theme="dark"] .btn-icon,
body[data-theme-layout="editorial-warm"][data-theme="dark"] .btn-logout,
body[data-theme-layout="editorial-warm"][data-theme="dark"] .header-actions select,
body[data-theme-layout="editorial-warm"][data-theme="dark"] .modal-input,
body[data-theme-layout="editorial-warm"][data-theme="dark"] input,
body[data-theme-layout="editorial-warm"][data-theme="dark"] select,
body[data-theme-layout="editorial-warm"][data-theme="dark"] textarea {
    background: rgba(33, 24, 18, 0.96);
    color: #f9ede0;
}


/* Source: assets/css/app-shell.css */
:root {
    --nav-bg: #0f172a;
    --nav-text: #ffffff;
    --nav-height: 80px;
    --nav-radius: 24px;
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-color);
}

.wrapper {
    flex: 1 1 auto;
}

.wrapper.public-layout {
    display: block !important;
    width: 100%;
}

.public-body .main-content,
.public-body .public-container {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

.impersonation-banner {
    width: 100%;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--primary-color);
    color: var(--text-main);
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    z-index: 10001;
}

.impersonation-banner__link {
    color: inherit;
    text-decoration: underline;
}

.mobile-sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.48);
    backdrop-filter: blur(4px);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.24s ease;
}

body.sidebar-mobile-open .mobile-sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
}

.mobile-app-sidebar-toggle {
    position: fixed;
    top: 16px;
    left: 16px;
    width: 48px;
    height: 48px;
    display: none;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: color-mix(in srgb, var(--card-bg) 90%, white 10%);
    color: var(--text-main);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12);
    z-index: 1002;
    cursor: pointer;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.mobile-app-sidebar-toggle:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.16);
}

body.sidebar-mobile-open .mobile-app-sidebar-toggle {
    background: linear-gradient(135deg, var(--primary-color), var(--theme-accent));
    color: #fff;
    border-color: transparent;
}

.mobile-bottom-nav {
    position: fixed;
    left: 50%;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    width: min(440px, calc(100% - 20px));
    display: none;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: end;
    gap: 8px;
    padding: 12px 12px 10px;
    border-radius: 30px;
    background: color-mix(in srgb, var(--card-bg) 78%, white 22%);
    border: 1px solid color-mix(in srgb, var(--border-color) 82%, white 18%);
    box-shadow: 0 26px 60px rgba(15, 23, 42, 0.16);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    z-index: 1001;
}

.mobile-bottom-nav__item,
.mobile-bottom-nav__menu {
    border: 0;
    background: transparent;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.mobile-bottom-nav__item {
    min-height: 56px;
    padding: 10px 4px;
    border-radius: 18px;
    transition: transform 0.22s ease, background 0.22s ease, color 0.22s ease;
}

.mobile-bottom-nav__item i,
.mobile-bottom-nav__menu i {
    font-size: 18px;
}

.mobile-bottom-nav__item span,
.mobile-bottom-nav__menu span {
    white-space: nowrap;
}

.mobile-bottom-nav__item.active {
    color: var(--text-main);
    background: color-mix(in srgb, var(--primary-color) 14%, white 86%);
}

.mobile-bottom-nav__item:active,
.mobile-bottom-nav__menu:active {
    transform: translateY(1px);
}

.mobile-bottom-nav__menu {
    width: 64px;
    height: 64px;
    margin: -28px auto 0;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--primary-color), var(--theme-accent));
    color: #fff;
    box-shadow: 0 18px 40px color-mix(in srgb, var(--primary-color) 26%, transparent);
    cursor: pointer;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

body.sidebar-mobile-open .mobile-bottom-nav__menu {
    transform: translateY(-2px);
    box-shadow: 0 22px 46px color-mix(in srgb, var(--primary-color) 34%, transparent);
}

.main-nav-wrapper {
    position: fixed;
    top: 18px;
    left: 0;
    width: 100%;
    z-index: 10000;
    padding: 0 20px;
    transition: transform 0.28s ease, opacity 0.28s ease;
}

.main-nav-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.main-nav {
    min-height: 82px;
    padding: 0 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: rgba(15, 23, 42, 0.9);
    color: var(--nav-text);
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.2);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    transition: all 0.28s ease;
}

body.scrolled .main-nav {
    min-height: 72px;
    background: rgba(15, 23, 42, 0.96);
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    text-decoration: none;
    font: 950 26px/1 var(--font-display);
    letter-spacing: -0.04em;
}

.nav-logo img {
    height: 38px;
    width: auto;
    object-fit: contain;
}

.nav-links {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 28px;
    margin: 0;
    padding: 0;
}

.nav-links a {
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--primary-color);
}

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

.btn-nav-login,
.btn-nav-signup {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 800;
}

.btn-nav-login {
    color: #fff;
}

.btn-nav-signup {
    background: var(--primary-color);
    color: #08111f;
}

.site-footer {
    margin-top: 72px;
    padding: 88px 0 36px;
    background: #0f172a;
    color: #fff;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-container {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.35fr;
    gap: 48px;
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    color: #fff;
    text-decoration: none;
    font: 900 28px/1 var(--font-display);
}

.footer-logo-image {
    height: 35px;
    width: auto;
}

.footer-desc,
.footer-contact-note {
    color: #94a3b8;
    line-height: 1.7;
}

.footer-contact-note {
    margin-bottom: 10px;
    font-size: 14px;
}

.footer-links h4 {
    margin: 0 0 20px;
    font-size: 17px;
    font-weight: 800;
}

.footer-links ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-links li + li {
    margin-top: 12px;
}

.footer-links a,
.footer-contact-link {
    color: #94a3b8;
    text-decoration: none;
}

.footer-contact-link {
    color: var(--primary-color);
    font-weight: 800;
}

.footer-links a:hover,
.footer-contact-link:hover {
    color: #fff;
}

.footer-socials {
    display: flex;
    align-items: center;
    gap: 18px;
}

.footer-social-link {
    color: #fff;
    font-size: 19px;
}

.footer-bottom {
    margin-top: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: #64748b;
    font-size: 14px;
}

body[data-app-scope="user"] .main-content,
body[data-app-scope="admin"] .main-content,
body[data-app-scope="super"] .main-content {
    width: min(100%, calc(100vw - var(--sidebar-width)));
    min-height: 100vh;
}

body[data-app-scope="user"] .sidebar,
body[data-app-scope="admin"] .sidebar,
body[data-app-scope="super"] .sidebar {
    transition: transform 0.24s ease, width 0.24s ease, box-shadow 0.24s ease;
}

body[data-app-scope="user"] .sidebar .sidebar-header,
body[data-app-scope="admin"] .sidebar .sidebar-header,
body[data-app-scope="super"] .sidebar .sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 24px;
    min-width: 0;
}

body[data-app-scope="user"] .sidebar .sidebar-logo,
body[data-app-scope="admin"] .sidebar .sidebar-logo,
body[data-app-scope="super"] .sidebar .sidebar-logo {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;
    gap: 14px;
    font-size: 22px;
    line-height: 1;
    letter-spacing: -0.04em;
}

body[data-app-scope="user"] .sidebar .sidebar-logo-image,
body[data-app-scope="admin"] .sidebar .sidebar-logo-image,
body[data-app-scope="super"] .sidebar .sidebar-logo-image {
    width: 46px;
    height: 46px;
    display: block;
    object-fit: contain;
    object-position: center;
    flex: 0 0 46px;
}

body[data-app-scope="user"] .sidebar .sidebar-logo span,
body[data-app-scope="admin"] .sidebar .sidebar-logo span,
body[data-app-scope="super"] .sidebar .sidebar-logo span {
    display: inline-block;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body[data-app-scope="user"] .sidebar .sidebar-toggle-btn,
body[data-app-scope="admin"] .sidebar .sidebar-toggle-btn,
body[data-app-scope="super"] .sidebar .sidebar-toggle-btn {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    color: #cbd5e1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

body[data-app-scope="user"] .sidebar .sidebar-toggle-btn:hover,
body[data-app-scope="admin"] .sidebar .sidebar-toggle-btn:hover,
body[data-app-scope="super"] .sidebar .sidebar-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

body[data-app-scope="user"] .sidebar.collapsed,
body[data-app-scope="admin"] .sidebar.collapsed,
body[data-app-scope="super"] .sidebar.collapsed {
    width: 94px;
}

body[data-app-scope="user"] .sidebar.collapsed .nav-text,
body[data-app-scope="user"] .sidebar.collapsed .nav-caret,
body[data-app-scope="user"] .sidebar.collapsed .nav-submenu,
body[data-app-scope="user"] .sidebar.collapsed .sidebar-cta,
body[data-app-scope="user"] .sidebar.collapsed .sidebar-footer,
body[data-app-scope="admin"] .sidebar.collapsed .nav-text,
body[data-app-scope="admin"] .sidebar.collapsed .nav-caret,
body[data-app-scope="admin"] .sidebar.collapsed .nav-submenu,
body[data-app-scope="admin"] .sidebar.collapsed .sidebar-cta,
body[data-app-scope="admin"] .sidebar.collapsed .sidebar-footer,
body[data-app-scope="super"] .sidebar.collapsed .nav-text,
body[data-app-scope="super"] .sidebar.collapsed .nav-caret,
body[data-app-scope="super"] .sidebar.collapsed .nav-submenu,
body[data-app-scope="super"] .sidebar.collapsed .sidebar-cta,
body[data-app-scope="super"] .sidebar.collapsed .sidebar-footer {
    display: none !important;
}

.wrapper.sidebar-collapsed .main-content {
    margin-left: 94px !important;
    width: min(100%, calc(100vw - 94px));
}

.alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    margin-bottom: 20px;
    border-radius: 16px;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 700;
}

.alert-success,
.alert.success {
    background: #eefdf3;
    color: #1e7e34;
    border-color: rgba(34, 197, 94, 0.24);
}

.alert-error,
.alert.error {
    background: #fff5f5;
    color: #c53030;
    border-color: rgba(239, 68, 68, 0.24);
}

.theme-switch-indicator {
    transform: translateX(0);
}

[data-theme="dark"] .theme-switch-indicator {
    transform: translateX(24px);
}

@media (max-width: 1024px) {
    body.sidebar-mobile-open {
        overflow: hidden;
    }

    body[data-app-scope="user"] .sidebar,
    body[data-app-scope="admin"] .sidebar,
    body[data-app-scope="super"] .sidebar {
        position: fixed !important;
        inset: 0 auto 0 0 !important;
        width: min(336px, 90vw) !important;
        height: 100vh !important;
        z-index: 1003;
        transform: translateX(-100%);
        overflow-y: auto;
        padding: 20px 16px calc(120px + env(safe-area-inset-bottom, 0px)) !important;
        border-radius: 0 28px 28px 0;
        border-right: 1px solid color-mix(in srgb, var(--border-color) 84%, white 16%);
        background: linear-gradient(180deg,
                color-mix(in srgb, var(--sidebar-bg) 94%, white 6%) 0%,
                color-mix(in srgb, var(--sidebar-bg) 98%, #f8fafc 2%) 100%);
        box-shadow: 24px 0 60px rgba(15, 23, 42, 0.18);
    }

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

    body[data-app-scope="user"] .sidebar .sidebar-header,
    body[data-app-scope="admin"] .sidebar .sidebar-header,
    body[data-app-scope="super"] .sidebar .sidebar-header {
        position: sticky;
        top: 0;
        z-index: 2;
        margin: -20px -16px 16px;
        padding: 18px 16px 16px;
        background: inherit;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    body[data-app-scope="user"] .sidebar .nav-menu,
    body[data-app-scope="admin"] .sidebar .nav-menu,
    body[data-app-scope="super"] .sidebar .nav-menu {
        gap: 8px;
    }

    body[data-app-scope="user"] .sidebar .nav-link,
    body[data-app-scope="admin"] .sidebar .nav-link,
    body[data-app-scope="super"] .sidebar .nav-link {
        min-height: 52px;
        padding: 12px 16px;
        border-radius: 18px;
    }

    body[data-app-scope="user"] .sidebar .nav-submenu,
    body[data-app-scope="admin"] .sidebar .nav-submenu,
    body[data-app-scope="super"] .sidebar .nav-submenu {
        padding-top: 6px;
    }

    body[data-app-scope="user"] .sidebar .sidebar-toggle-btn,
    body[data-app-scope="admin"] .sidebar .sidebar-toggle-btn,
    body[data-app-scope="super"] .sidebar .sidebar-toggle-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        border-radius: 14px;
        border: 1px solid color-mix(in srgb, var(--border-color) 80%, white 20%);
        background: color-mix(in srgb, var(--card-bg) 88%, white 12%);
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    }

    body.sidebar-mobile-open .sidebar .sidebar-toggle-btn i::before {
        content: "\f00d";
    }

    body[data-app-scope="user"] .main-content,
    body[data-app-scope="admin"] .main-content,
    body[data-app-scope="super"] .main-content,
    .wrapper.sidebar-collapsed .main-content {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 24px 20px calc(112px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .wrapper.dashboard-layout {
        display: block !important;
    }

    body[data-app-scope="user"] .mobile-app-sidebar-toggle,
    body[data-app-scope="admin"] .mobile-app-sidebar-toggle,
    body[data-app-scope="super"] .mobile-app-sidebar-toggle {
        display: none !important;
    }

    body[data-app-scope="user"] .mobile-bottom-nav,
    body[data-app-scope="admin"] .mobile-bottom-nav,
    body[data-app-scope="super"] .mobile-bottom-nav {
        display: grid;
    }
}

@media (max-width: 768px) {
    .mobile-app-sidebar-toggle {
        top: 12px;
        left: 12px;
        width: 44px;
        height: 44px;
        border-radius: 14px;
    }

    .mobile-bottom-nav {
        width: min(100%, calc(100% - 16px));
        bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        padding: 10px 10px 8px;
        border-radius: 26px;
        gap: 4px;
    }

    .mobile-bottom-nav__item {
        min-height: 52px;
        padding: 8px 2px;
        font-size: 9px;
    }

    .mobile-bottom-nav__item i,
    .mobile-bottom-nav__menu i {
        font-size: 17px;
    }

    .mobile-bottom-nav__menu {
        width: 58px;
        height: 58px;
        border-radius: 20px;
        margin-top: -24px;
        font-size: 9px;
    }

    .main-nav-wrapper {
        top: 12px;
        padding: 0 14px;
    }

    .main-nav {
        min-height: 68px;
        padding: 0 18px;
        border-radius: 24px;
    }

    .nav-links {
        position: fixed;
        top: 86px;
        left: 14px;
        right: 14px;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 20px;
        background: rgba(15, 23, 42, 0.98);
        border-radius: 24px;
        box-shadow: 0 18px 40px rgba(15, 23, 42, 0.28);
    }

    .nav-links.active {
        display: flex;
    }

    .nav-actions .btn-nav-login,
    .nav-actions .btn-nav-signup {
        display: none;
    }

    .mobile-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        border-radius: 14px;
        color: #fff;
        cursor: pointer;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(255, 255, 255, 0.06);
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

body[data-app-scope="user"] .main-content,
body[data-app-scope="admin"] .main-content,
body[data-app-scope="super"] .main-content {
    padding: 32px clamp(20px, 3vw, 40px) 48px;
}

body[data-app-scope="public"] .public-container {
    padding-bottom: 72px;
}

.app-page-header,
.main-content > header:not(.app-page-header),
.public-container > header:not(.app-page-header),
.page-cart > header,
.page-checkout > header {
    min-height: 92px;
    padding: 20px 28px;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    background: color-mix(in srgb, var(--card-bg) 94%, white 6%);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow);
}

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

.header-title {
    display: grid;
    gap: 6px;
    min-width: 0;
    flex: 1 1 420px;
    align-content: center;
}

.header-title h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.02;
    letter-spacing: -0.05em;
}

.header-title h1 span,
.header-chip {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
    color: var(--primary-color);
    font-size: 0.62em;
    font-weight: 800;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

.header-title p,
.page-note {
    margin: 0;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.55;
    max-width: 620px;
}

.header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    flex: 0 1 auto;
}

.header-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.header-currency-form {
    margin: 0;
}

.header-currency-select {
    min-height: 42px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--card-bg) 96%, white 4%);
    color: var(--text-main);
    font-size: 14px;
    font-weight: 700;
    box-shadow: none;
}

.header-icon-link {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 16px;
}

.header-icon-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--primary-color);
    color: var(--button-primary-text, #101418);
    font-size: 10px;
    font-weight: 800;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--primary-color) 30%, transparent);
}

.header-icon-badge-alert {
    background: #ef4444;
    color: #fff;
}

.header-actions .btn-primary,
.header-actions .btn-action {
    width: auto;
    min-height: var(--button-height);
    padding: 12px 20px;
}

.page-cart .header-actions,
.page-checkout .header-actions {
    align-self: center;
}

body[data-app-scope="user"] .sidebar .sidebar-footer,
body[data-app-scope="admin"] .sidebar .sidebar-footer,
body[data-app-scope="super"] .sidebar .sidebar-footer {
    margin-top: auto;
    padding-top: 18px;
    display: grid;
    gap: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

body[data-app-scope="user"] .sidebar .sidebar-footer-switch,
body[data-app-scope="admin"] .sidebar .sidebar-footer-switch,
body[data-app-scope="super"] .sidebar .sidebar-footer-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

body[data-app-scope="user"] .sidebar .sidebar-footer-label,
body[data-app-scope="admin"] .sidebar .sidebar-footer-label,
body[data-app-scope="super"] .sidebar .sidebar-footer-label {
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body[data-app-scope="user"] .sidebar .theme-switch,
body[data-app-scope="admin"] .sidebar .theme-switch,
body[data-app-scope="super"] .sidebar .theme-switch {
    position: relative;
    width: 56px;
    height: 32px;
    flex: 0 0 56px;
    display: inline-flex;
    align-items: center;
    padding: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.22);
}

body[data-app-scope="user"] .sidebar .theme-switch-indicator,
body[data-app-scope="admin"] .sidebar .theme-switch-indicator,
body[data-app-scope="super"] .sidebar .theme-switch-indicator {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--primary-color);
    color: #101418;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--primary-color) 28%, transparent);
    transition: transform 0.2s ease;
}

body[data-app-scope="user"] .sidebar .user-snippet,
body[data-app-scope="admin"] .sidebar .user-snippet,
body[data-app-scope="super"] .sidebar .user-snippet {
    padding: 14px 16px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    gap: 12px;
}

body[data-app-scope="user"] .sidebar .sidebar-user-avatar,
body[data-app-scope="admin"] .sidebar .sidebar-user-avatar,
body[data-app-scope="super"] .sidebar .sidebar-user-avatar {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 50%;
    overflow: hidden;
    background: color-mix(in srgb, var(--primary-color) 22%, #fff 78%);
}

body[data-app-scope="user"] .sidebar .sidebar-user-avatar img,
body[data-app-scope="admin"] .sidebar .sidebar-user-avatar img,
body[data-app-scope="super"] .sidebar .sidebar-user-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

body[data-app-scope="user"] .sidebar .sidebar-user-avatar__image,
body[data-app-scope="admin"] .sidebar .sidebar-user-avatar__image,
body[data-app-scope="super"] .sidebar .sidebar-user-avatar__image {
    border-radius: 50%;
}

body[data-app-scope="user"] .sidebar .user-info,
body[data-app-scope="admin"] .sidebar .user-info,
body[data-app-scope="super"] .sidebar .user-info {
    min-width: 0;
    display: grid;
    gap: 3px;
}

body[data-app-scope="user"] .sidebar .user-info h4,
body[data-app-scope="admin"] .sidebar .user-info h4,
body[data-app-scope="super"] .sidebar .user-info h4 {
    margin: 0;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body[data-app-scope="user"] .sidebar .nav-submenu,
body[data-app-scope="admin"] .sidebar .nav-submenu,
body[data-app-scope="super"] .sidebar .nav-submenu {
    position: relative;
    margin: 8px 0 0 18px;
    padding: 4px 0 4px 16px;
    border-left: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    display: grid;
    gap: 8px;
}

body[data-app-scope="user"] .sidebar .nav-submenu.open,
body[data-app-scope="admin"] .sidebar .nav-submenu.open,
body[data-app-scope="super"] .sidebar .nav-submenu.open {
    margin-bottom: 12px;
}

body[data-app-scope="user"] .sidebar .nav-submenu::before,
body[data-app-scope="admin"] .sidebar .nav-submenu::before,
body[data-app-scope="super"] .sidebar .nav-submenu::before {
    display: none;
}

body[data-app-scope="user"] .sidebar .nav-sublink,
body[data-app-scope="admin"] .sidebar .nav-sublink,
body[data-app-scope="super"] .sidebar .nav-sublink {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 0 8px 0 16px;
    border-radius: 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(203, 213, 225, 0.78);
    transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease;
}

body[data-app-scope="user"] .sidebar .nav-inline-badge,
body[data-app-scope="admin"] .sidebar .nav-inline-badge,
body[data-app-scope="super"] .sidebar .nav-inline-badge {
    position: static;
    margin-left: auto;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #00d084;
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

body[data-app-scope="user"] .sidebar .nav-sublink::before,
body[data-app-scope="admin"] .sidebar .nav-sublink::before,
body[data-app-scope="super"] .sidebar .nav-sublink::before {
    content: "";
    position: absolute;
    left: 0;
    width: 4px;
    height: 18px;
    border-radius: 999px;
    background: rgba(203, 213, 225, 0.24);
    transition: transform 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}

body[data-app-scope="user"] .sidebar .nav-sublink:hover,
body[data-app-scope="admin"] .sidebar .nav-sublink:hover,
body[data-app-scope="super"] .sidebar .nav-sublink:hover {
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    transform: translateX(2px);
}

body[data-app-scope="user"] .sidebar .nav-sublink.active,
body[data-app-scope="admin"] .sidebar .nav-sublink.active,
body[data-app-scope="super"] .sidebar .nav-sublink.active {
    background: linear-gradient(135deg, rgba(197, 249, 73, 0.14), rgba(197, 249, 73, 0.08));
    color: var(--primary-color);
    font-weight: 700;
    box-shadow: inset 0 0 0 1px rgba(197, 249, 73, 0.08);
}

body[data-app-scope="user"] .sidebar .nav-sublink:hover::before,
body[data-app-scope="admin"] .sidebar .nav-sublink:hover::before,
body[data-app-scope="super"] .sidebar .nav-sublink:hover::before,
body[data-app-scope="user"] .sidebar .nav-sublink.active::before,
body[data-app-scope="admin"] .sidebar .nav-sublink.active::before,
body[data-app-scope="super"] .sidebar .nav-sublink.active::before {
    background: var(--primary-color);
    transform: scaleY(1.04);
    box-shadow: 0 0 0 4px rgba(197, 249, 73, 0.08);
}

body[data-app-scope="user"] .sidebar .nav-link .nav-caret,
body[data-app-scope="admin"] .sidebar .nav-link .nav-caret,
body[data-app-scope="super"] .sidebar .nav-link .nav-caret {
    margin-left: auto;
    font-size: 12px;
    color: rgba(203, 213, 225, 0.62);
    transition: transform 0.22s ease, color 0.22s ease;
}

body[data-app-scope="user"] .sidebar .nav-item:has(.nav-submenu.open) > .nav-link,
body[data-app-scope="admin"] .sidebar .nav-item:has(.nav-submenu.open) > .nav-link,
body[data-app-scope="super"] .sidebar .nav-item:has(.nav-submenu.open) > .nav-link {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}

body[data-app-scope="user"] .sidebar .nav-item:has(.nav-submenu.open) > .nav-link .nav-caret,
body[data-app-scope="admin"] .sidebar .nav-item:has(.nav-submenu.open) > .nav-link .nav-caret,
body[data-app-scope="super"] .sidebar .nav-item:has(.nav-submenu.open) > .nav-link .nav-caret {
    color: var(--primary-color);
    transform: rotate(180deg);
}

body[data-app-scope="user"] .sidebar .user-info p,
body[data-app-scope="admin"] .sidebar .user-info p,
body[data-app-scope="super"] .sidebar .user-info p {
    margin: 0;
    color: rgba(203, 213, 225, 0.72);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 1024px) {
    .app-page-header,
    .main-content > header:not(.app-page-header),
    .public-container > header:not(.app-page-header),
    .page-cart > header,
    .page-checkout > header {
        padding: 18px 20px;
    }
}

@media (max-width: 768px) {
    .app-page-header,
    .main-content > header:not(.app-page-header),
    .public-container > header:not(.app-page-header),
    .page-cart > header,
    .page-checkout > header {
        min-height: auto;
        padding: 16px 18px;
        gap: 16px;
        border-radius: var(--radius-xl);
    }

    .header-title h1 span,
    .header-chip {
        min-height: 32px;
        padding: 0 12px;
    }

    .header-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .header-tools {
        width: 100%;
        justify-content: flex-start;
    }
}


/* Source: assets/css/inline-extracted.css */
/* Generated page-level CSS migrated out of PHP templates. */

/* admin/addons.php :: block 1 */
.market-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 25px; }
    .addon-card {
        background: white;
        border-radius: 24px;
        padding: 25px;
        border: 1px solid rgba(0,0,0,0.05);
        box-shadow: 0 10px 30px rgba(0,0,0,0.02);
        display: flex;
        flex-direction: column;
        transition: 0.3s;
    }
    .addon-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.05); }
    
    .status-tag {
        font-size: 10px;
        font-weight: 800;
        padding: 4px 10px;
        border-radius: 100px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .status-owned { background: #ecfdf5; color: #059669; }
    .status-premium { background: #fff1f2; color: #e11d48; }
    
    .btn-market {
        width: 100%;
        height: 48px;
        border-radius: 12px;
        font-weight: 700;
        font-size: 13px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        text-decoration: none;
        transition: 0.2s;
        border: none;
        cursor: pointer;
    }
    .btn-owned { background: #0f172a; color: white; }
    .btn-buy { background: var(--primary-color); color: var(--text-main); }
    .btn-disabled { background: #f1f5f9; color: #94a3b8; cursor: not-allowed; }

/* admin/announcements.php :: block 1 */
.type-radio {
        cursor: pointer;
    }

    .type-radio input {
        display: none;
    }

    .type-btn {
        display: block;
        padding: 10px;
        border-radius: 10px;
        text-align: center;
        font-size: 12px;
        font-weight: 800;
        border: 2px solid transparent;
        transition: 0.2s;
        background: #f8fafc;
        color: #64748b;
    }

    .type-radio input:checked+.type-btn.info {
        background: #e0f2fe;
        color: #0369a1;
        border-color: #0ea5e9;
    }

    .type-radio input:checked+.type-btn.success {
        background: #dcfce7;
        color: #166534;
        border-color: #22c55e;
    }

    .type-radio input:checked+.type-btn.warning {
        background: #fef3c7;
        color: #92400e;
        border-color: #f59e0b;
    }

    .type-radio input:checked+.type-btn.danger {
        background: #fee2e2;
        color: #991b1b;
        border-color: #ef4444;
    }

    /* Switch Styles */
    .switch {
        position: relative;
        display: inline-block;
        width: 44px;
        height: 24px;
    }

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #e2e8f0;
        transition: .4s;
        border-radius: 34px;
    }

    .slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: .4s;
        border-radius: 50%;
    }

    input:checked+.slider {
        background-color: var(--primary-color);
    }

    input:checked+.slider:before {
        transform: translateX(20px);
    }

/* admin/coupons.php :: block 1 */
.switch input:checked+.slider {
        background-color: #00d084;
    }

    .switch input:focus+.slider {
        box-shadow: 0 0 1px #00d084;
    }

    .switch input:checked+.slider:before {
        transform: translateX(24px);
    }

    .slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        transition: .4s;
        border-radius: 50%;
    }

/* admin/dashboard.php :: block 1 */
.ops-shell {
        display: grid;
        gap: 24px;
        padding-bottom: 32px;
    }

    .ops-hero {
        display: grid;
        grid-template-columns: 1.25fr 0.95fr;
        gap: 24px;
    }

    .ops-panel {
        background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.96));
        border: 1px solid rgba(15, 23, 42, 0.08);
        border-radius: 28px;
        padding: 24px;
        box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
    }

    .ops-dark {
        background:
            radial-gradient(circle at top right, rgba(197, 249, 73, 0.16), transparent 24%),
            linear-gradient(160deg, #0f172a 0%, #111827 100%);
        color: #f8fafc;
    }

    .ops-hero h1 {
        margin: 0 0 12px;
        font: 900 38px/0.98 'Outfit', sans-serif;
        letter-spacing: -0.05em;
    }

    .ops-hero p {
        margin: 0;
        color: var(--text-muted);
        line-height: 1.7;
        max-width: 720px;
    }

    .ops-dark p {
        color: rgba(255,255,255,0.72);
    }

    .ops-actions {
        margin-top: 24px;
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
    }

    .ops-btn {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 14px 18px;
        border-radius: 16px;
        text-decoration: none;
        font-weight: 800;
        font-size: 13px;
    }

    .ops-btn-primary {
        background: var(--primary-color);
        color: #08111f;
    }

    .ops-btn-muted {
        background: rgba(15, 23, 42, 0.06);
        color: var(--text-main);
    }

    .ops-dark .ops-btn-muted {
        background: rgba(255,255,255,0.08);
        color: #fff;
    }

    .status-stack {
        display: grid;
        gap: 12px;
    }

    .status-card {
        padding: 16px 18px;
        border-radius: 20px;
        background: rgba(255,255,255,0.06);
        border: 1px solid rgba(255,255,255,0.08);
    }

    .status-card strong {
        display: block;
        margin-bottom: 6px;
        font-size: 13px;
    }

    .status-card span {
        font-size: 13px;
        color: rgba(255,255,255,0.72);
        line-height: 1.6;
    }

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

    .metric-card {
        background: #fff;
        border: 1px solid rgba(15, 23, 42, 0.08);
        border-radius: 24px;
        padding: 22px;
        box-shadow: 0 12px 30px rgba(15, 23, 42, 0.04);
    }

    .metric-card .label {
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.12em;
        font-size: 11px;
        font-weight: 800;
    }

    .metric-card .value {
        margin: 12px 0 6px;
        font-size: 34px;
        font-weight: 900;
        letter-spacing: -0.04em;
        color: var(--text-main);
    }

    .metric-card .meta {
        color: var(--text-muted);
        font-size: 12px;
    }

    .content-grid {
        display: grid;
        grid-template-columns: 1.3fr 0.95fr;
        gap: 24px;
    }

    .panel-stack {
        display: grid;
        gap: 24px;
    }

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

    .section-head h3 {
        margin: 0;
        font-size: 20px;
        font-weight: 850;
        color: var(--text-main);
    }

    .section-head span,
    .section-head a {
        color: var(--text-muted);
        font-size: 12px;
        text-decoration: none;
    }

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

    .table th,
    .table td {
        padding: 14px 0;
        border-bottom: 1px solid rgba(15, 23, 42, 0.08);
        text-align: left;
        font-size: 13px;
    }

    .table th {
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        font-size: 11px;
    }

    .list-stack {
        display: grid;
        gap: 12px;
    }

    .list-row {
        padding: 15px 16px;
        border-radius: 18px;
        background: rgba(15, 23, 42, 0.03);
        border: 1px solid rgba(15, 23, 42, 0.06);
    }

    .list-row strong {
        display: block;
        font-size: 13px;
        margin-bottom: 6px;
        color: var(--text-main);
    }

    .muted {
        color: var(--text-muted);
        font-size: 12px;
        line-height: 1.6;
    }

    .badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 6px 10px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .ok { background: rgba(34,197,94,0.10); color: #15803d; }
    .warn { background: rgba(245,158,11,0.12); color: #b45309; }
    .bad { background: rgba(239,68,68,0.10); color: #b91c1c; }

    @media (max-width: 1280px) {
        .ops-hero, .content-grid { grid-template-columns: 1fr; }
        .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

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

/* admin/email_campaigns.php :: block 1 */
@keyframes spin { to { transform: rotate(360deg); } }

/* admin/memberships.php :: block 1 */
.stat-mini {
        background: white;
        padding: 10px 20px;
        border-radius: 12px;
        text-align: center;
        box-shadow: var(--shadow);
        min-width: 100px;
    }

    .stat-mini.warning {
        border-left: 4px solid #f59e0b;
    }

    .stat-mini .label {
        display: block;
        font-size: 10px;
        font-weight: 800;
        color: #94a3b8;
    }

    .stat-mini .value {
        font-size: 18px;
        font-weight: 900;
        color: #0f172a;
    }

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

    .m-card {
        background: white;
        border-radius: 20px;
        padding: 20px;
        box-shadow: var(--shadow);
        border: 1px solid #f1f5f9;
        transition: 0.3s;
    }

    .m-card:hover {
        transform: translateY(-5px);
        border-color: var(--primary-color);
    }

    .m-card.warning {
        border-left: 5px solid #f59e0b;
    }

    .m-card.expired {
        border-left: 5px solid #ef4444;
        opacity: 0.8;
    }

    .m-card-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 20px;
    }

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

    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #f1f5f9;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 900;
        color: #64748b;
    }

    .user-info h4 {
        margin: 0;
        font-size: 14px;
        font-weight: 800;
    }

    .user-info p {
        margin: 0;
        font-size: 11px;
        color: #94a3b8;
        font-weight: 600;
    }

    .m-badge {
        padding: 4px 10px;
        border-radius: 8px;
        font-size: 10px;
        font-weight: 900;
        text-transform: uppercase;
    }

    .m-badge.product {
        background: #eff6ff;
        color: #3b82f6;
    }

    .m-badge.bundle {
        background: #f5f3ff;
        color: #8b5cf6;
    }

    .resource-name {
        font-weight: 900;
        font-size: 16px;
        color: #0f172a;
        margin-bottom: 15px;
    }

    .m-stats {
        display: flex;
        gap: 20px;
        background: #f8fafc;
        padding: 12px;
        border-radius: 12px;
        margin-bottom: 15px;
    }

    .m-stat .label {
        display: block;
        font-size: 9px;
        font-weight: 800;
        color: #94a3b8;
    }

    .m-stat .value {
        font-size: 11px;
        font-weight: 800;
        color: #0f172a;
    }

    .m-card-footer {
        border-top: 1px solid #f1f5f9;
        pt: 15px;
        margin-top: 15px;
        display: flex;
    }

    .mini-select {
        flex: 1;
        padding: 8px;
        border-radius: 8px;
        border: 1px solid #e2e8f0;
        font-size: 12px;
        font-weight: 700;
    }

    .btn-mini-action {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        cursor: pointer;
        transition: 0.3s;
    }

    .btn-mini-action.extend {
        background: #10b981;
        color: white;
    }

    .btn-mini-action.revoke {
        background: #fee2e2;
        color: #ef4444;
    }

    .btn-mini-action.view {
        background: #f1f5f9;
        color: #64748b;
    }

    .btn-mini-action:hover {
        opacity: 0.8;
        transform: scale(1.1);
    }

/* admin/orders.php :: block 1 */
.dropdown-parent:hover .quick-actions {
        display: block !important;
    }

    .line-item-row {
        display: flex;
        align-items: center;
        gap: 15px;
        padding: 15px;
        background: #fbfcfe;
        border-radius: 16px;
        border: 1px solid #f1f5f9;
        margin-bottom: 12px;
    }

/* admin/user_details.php :: block 1 */
.modal-input {
        width: 100%;
        padding: 14px 18px 14px 48px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 16px;
        font-size: 14px;
        font-weight: 600;
        color: #1e293b;
        outline: none;
        transition: all 0.3s ease;
    }

    .modal-input:focus {
        background: white;
        border-color: var(--primary-color);
        box-shadow: 0 10px 25px rgba(112, 94, 200, 0.1);
    }

    .modal-field {
        margin-bottom: 15px;
    }

    .modal-label {
        display: block;
        font-weight: 700;
        font-size: 13px;
        color: #475569;
        margin-bottom: 8px;
    }

    .modal-input-group {
        position: relative;
        display: flex;
        align-items: center;
    }

    .modal-input-group i {
        position: absolute;
        left: 18px;
        color: #94a3b8;
        transition: 0.3s;
    }

    .modal-input:focus+i {
        color: var(--primary-color);
    }

    .form-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
    }

    .modal-section-title {
        font-size: 11px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        color: #94a3b8;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .modal-section-title::after {
        content: '';
        flex-grow: 1;
        height: 1px;
        background: #f1f5f9;
    }

    .btn-icon-lite {
        width: 32px;
        height: 32px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        background: #f8fafc;
        color: #64748b;
        cursor: pointer;
        transition: 0.3s;
    }

    .btn-icon-lite:hover {
        background: #f1f5f9;
        color: var(--primary-color);
        transform: translateY(-2px);
    }

/* admin/users.php :: block 1 */
@keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }

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

/* user/affiliate.php :: block 1 */
.stat-card {
        position: relative;
        overflow: hidden;
    }

    .stat-card i {
        position: absolute;
        right: 15px;
        bottom: 15px;
        font-size: 24px;
        opacity: 0.15;
    }

/* user/dashboard.php :: block 1 */
@keyframes shine {
                0% { left: -100%; top: 0; }
                20% { left: 100%; top: 0; }
                100% { left: 100%; top: 0; }
            }

/* user/dashboard.php :: block 2 */
/* Simple Switch CSS */
                        .switch { position: relative; display: inline-block; width: 34px; height: 18px; }
                        .switch input { opacity: 0; width: 0; height: 0; }
                        .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; }
                        .slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 2px; bottom: 2px; background-color: white; transition: .4s; border-radius: 50%; }
                        input:checked + .slider { background-color: #00d084; }
                        input:checked + .slider:before { transform: translateX(16px); }



/* Source: assets/css/pages/home.css */
.page-home {
    background: var(--bg-color);
}

.page-home .home-shell {
    color: var(--text-main);
    overflow: hidden;
}

.page-home .home-shell section,
.page-home .home-shell .activation-banner {
    width: min(1200px, calc(100% - 48px));
    margin-left: auto;
    margin-right: auto;
}

.page-home .activation-banner {
    margin-top: 136px;
    padding: 18px 24px;
    border-radius: 20px;
    background: var(--surface-success);
    border: 1px solid color-mix(in srgb, var(--color-green) 40%, transparent);
    color: color-mix(in srgb, var(--color-green) 60%, var(--text-main) 40%);
    font-weight: 700;
}

.page-home .hero-home {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 160px 0 100px;
    position: relative;
    max-width: 960px;
    margin: 0 auto;
}

.page-home .hero-copy,
.page-home .hero-visual {
    position: relative;
    z-index: 1;
    width: 100%;
}

.page-home .home-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--card-bg) 92%, white 8%);
    color: var(--primary-color);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    box-shadow: var(--shadow);
}

.page-home .home-eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--theme-accent) 100%);
}

.page-home .hero-title {
    margin: 24px 0;
    font: 800 clamp(3.2rem, 7vw, 5.8rem)/1.05 var(--font-display);
    letter-spacing: -0.05em;
    color: var(--text-main);
}

.page-home .hero-title em {
    font-style: normal;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--theme-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.page-home .hero-copy p {
    margin: 0 auto;
    max-width: 720px;
    color: var(--text-muted);
    font-size: 19px;
    line-height: 1.7;
}

.page-home .hero-actions,
.page-home .cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 36px;
    justify-content: center;
}

.page-home .home-btn,
.page-home .home-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 56px;
    padding: 0 28px;
    border-radius: 18px;
    text-decoration: none;
    font-weight: 800;
    font-size: 15px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.page-home .home-btn {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--theme-accent) 100%);
    color: #fff;
    box-shadow: 0 20px 40px color-mix(in srgb, var(--primary-color) 25%, transparent);
}

.page-home .home-btn-secondary {
    background: color-mix(in srgb, var(--card-bg) 96%, white 4%);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--text-main) 5%, transparent);
}

.page-home .home-btn:hover,
.page-home .home-btn-secondary:hover {
    transform: translateY(-2px);
}

.page-home .hero-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
    justify-content: center;
}

.page-home .hero-proof span,
.page-home .tool-marquee span,
.page-home .catalog-tags span,
.page-home .bundle-stack span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--card-bg) 94%, white 6%);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    font-size: 14px;
    font-weight: 700;
}

.page-home .hero-proof span::before,
.page-home .catalog-tags span::before,
.page-home .bundle-stack span::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--primary-color);
}

.page-home .hero-visual {
    padding: 40px 0 0;
}

.page-home .control-board {
    position: relative;
    padding: 34px;
    border-radius: 36px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
    text-align: left;
    overflow: hidden;
}

.page-home .board-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 24px;
}

.page-home .board-header strong {
    display: block;
    margin-bottom: 8px;
    font-size: 26px;
    letter-spacing: -0.04em;
    color: var(--text-main);
}

.page-home .board-header p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.6;
    font-size: 15px;
}

.page-home .board-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.page-home .board-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.page-home .board-card {
    border-radius: 24px;
    padding: 24px;
    background: color-mix(in srgb, var(--card-bg) 95%, white 5%);
    border: 1px solid var(--border-color);
}

.page-home .board-card h3,
.page-home .board-card h4 {
    margin: 0 0 12px;
    font-size: 20px;
    color: var(--text-main);
}

.page-home .board-card p,
.page-home .board-card li {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.7;
    font-size: 14px;
}

.page-home .board-metric {
    display: block;
    margin-top: 14px;
    font-size: 38px;
    font-weight: 800;
    letter-spacing: -0.05em;
    color: var(--text-main);
}

.page-home .board-list,
.page-home .bundle-list,
.page-home .faq-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.page-home .board-list li,
.page-home .bundle-list li {
    display: flex;
    gap: 12px;
    margin-top: 12px;
}

.page-home .board-list li::before,
.page-home .bundle-list li::before {
    content: "•";
    color: var(--primary-color);
    font-size: 20px;
    line-height: 1;
    margin-top: 1px;
}

.page-home .tool-marquee {
    padding-bottom: 40px;
}

.page-home .tool-marquee-track {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

.page-home .home-section {
    padding: 60px 0;
}

.page-home .section-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 24px;
    margin-bottom: 40px;
}

.page-home .section-heading h2,
.page-home .cta-shell h2 {
    margin: 0 0 14px;
    font: 800 clamp(2.4rem, 4vw, 3.8rem)/1.1 var(--font-display);
    letter-spacing: -0.05em;
    color: var(--text-main);
}

.page-home .section-heading p,
.page-home .cta-shell p {
    margin: 0;
    max-width: 760px;
    color: var(--text-muted);
    font-size: 17px;
    line-height: 1.8;
}

.page-home .section-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary-color);
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    padding: 10px 16px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
    transition: background 0.2s;
}

.page-home .section-link:hover {
    background: color-mix(in srgb, var(--primary-color) 16%, transparent);
}

.page-home .metrics-grid,
.page-home .catalog-grid,
.page-home .bundle-grid,
.page-home .story-grid {
    display: grid;
    gap: 24px;
}

.page-home .metrics-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.page-home .metric-card,
.page-home .catalog-card,
.page-home .bundle-card,
.page-home .story-card,
.page-home .bento-card,
.page-home .cta-shell,
.page-home .faq-shell {
    border-radius: 32px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
}

.page-home .metric-card {
    padding: 30px;
}

.page-home .metric-card span {
    display: block;
    color: var(--primary-color);
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 800;
}

.page-home .metric-card strong {
    display: block;
    margin: 14px 0 10px;
    font-size: 46px;
    line-height: 1;
    letter-spacing: -0.05em;
    color: var(--text-main);
}

.page-home .metric-card p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.7;
    font-size: 15px;
}

.page-home .bento-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 0.8fr;
    gap: 24px;
}

.page-home .bento-card {
    padding: 34px;
}

.page-home .bento-card.tall {
    grid-row: span 2;
    background: var(--surface-muted);
}

.page-home .bento-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    margin-bottom: 24px;
    font-size: 24px;
    background: color-mix(in srgb, var(--primary-color) 14%, transparent);
    color: var(--primary-color);
}

.page-home .bento-card h3 {
    margin: 0 0 12px;
    font-size: 26px;
    letter-spacing: -0.04em;
    color: var(--text-main);
}

.page-home .bento-card p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.75;
    font-size: 15px;
}

.page-home .catalog-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.page-home .catalog-card {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.page-home .catalog-media {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
    padding: 34px;
    background: var(--surface-muted);
    border-bottom: 1px solid var(--border-color);
}

.page-home .catalog-media img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 28px;
    box-shadow: var(--shadow);
}

.page-home .catalog-body {
    padding: 28px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.page-home .catalog-badge {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.page-home .catalog-card h3,
.page-home .bundle-card h3 {
    margin: 16px 0 12px;
    font-size: 26px;
    letter-spacing: -0.04em;
    color: var(--text-main);
}

.page-home .catalog-card p,
.page-home .bundle-card p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.75;
    font-size: 15px;
}

.page-home .catalog-footer,
.page-home .bundle-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: auto;
    padding-top: 24px;
}

.page-home .price-tag {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.05em;
    color: var(--text-main);
}

.page-home .price-tag small {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 700;
}

.page-home .catalog-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.page-home .bundle-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.page-home .bundle-card {
    padding: 34px;
    position: relative;
    display: flex;
    flex-direction: column;
}

.page-home .bundle-card.featured {
    background: var(--surface-muted);
    border-color: var(--primary-color);
    box-shadow: 0 24px 60px color-mix(in srgb, var(--primary-color) 12%, transparent);
}

.page-home .bundle-label {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--surface-warning);
    border: 1px solid color-mix(in srgb, var(--color-yellow) 40%, transparent);
    color: color-mix(in srgb, var(--color-yellow) 80%, var(--text-main) 20%);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.page-home .bundle-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 24px 0 12px;
}

.page-home .story-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.page-home .story-card {
    padding: 34px;
}

.page-home .story-step {
    width: 56px;
    height: 56px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    margin-bottom: 24px;
    background: color-mix(in srgb, var(--primary-color) 14%, transparent);
    color: var(--primary-color);
    font-size: 20px;
    font-weight: 800;
}

.page-home .story-card h3 {
    margin: 0 0 12px;
    font-size: 26px;
    letter-spacing: -0.04em;
    color: var(--text-main);
}

.page-home .story-card p {
    margin: 0;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.75;
}

.page-home .faq-shell {
    padding: 40px;
    background: var(--card-bg);
}

.page-home .faq-item + .faq-item {
    margin-top: 16px;
}

.page-home .faq-item {
    border-radius: 24px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--card-bg) 96%, white 4%);
    overflow: hidden;
}

.page-home .faq-item summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 24px 28px;
    font-size: 18px;
    font-weight: 800;
    color: var(--text-main);
}

.page-home .faq-item summary::-webkit-details-marker {
    display: none;
}

.page-home .faq-item summary::after {
    content: "+";
    font-size: 24px;
    color: var(--primary-color);
}

.page-home .faq-item[open] summary::after {
    content: "−";
}

.page-home .faq-item p {
    margin: 0;
    padding: 0 28px 28px;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.75;
}

.page-home .cta-home {
    padding: 40px 0 120px;
}

.page-home .cta-shell {
    padding: 60px;
    background: var(--surface-muted);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.page-home .cta-shell h2 {
    color: var(--text-main);
}

.page-home .cta-shell p {
    max-width: 800px;
    color: var(--text-muted);
}

@media (max-width: 1180px) {
    .page-home .section-heading {
        flex-direction: column;
        align-items: flex-start;
    }

    .page-home .metrics-grid,
    .page-home .catalog-grid,
    .page-home .bundle-grid,
    .page-home .story-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-home .bento-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-home .bento-card.tall {
        grid-row: auto;
        grid-column: span 2;
    }
}

@media (max-width: 780px) {
    .page-home .hero-home {
        padding-top: 140px;
    }

    .page-home .board-grid,
    .page-home .metrics-grid,
    .page-home .catalog-grid,
    .page-home .bundle-grid,
    .page-home .story-grid,
    .page-home .bento-grid {
        grid-template-columns: 1fr;
    }

    .page-home .bento-card.tall {
        grid-column: auto;
    }

    .page-home .control-board,
    .page-home .faq-shell,
    .page-home .cta-shell {
        border-radius: 28px;
        padding: 24px;
    }

    .page-home .hero-actions,
    .page-home .cta-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .page-home .home-btn,
    .page-home .home-btn-secondary {
        width: 100%;
    }
}


/* Source: assets/css/pages/pricing.css */
.pricing-page-shell {
    padding-bottom: 80px;
}

.pricing-wrap {
    width: min(1200px, calc(100% - 48px));
    margin: 0 auto;
}

.pricing-page-shell-dashboard .pricing-wrap {
    width: 100%;
    max-width: none;
}

body[data-app-scope="public"] .pricing-page-shell {
    background: var(--bg-color);
}

.pricing-hero {
    display: block;
    padding: 24px 0 32px;
}

body[data-app-scope="public"] .pricing-hero {
    padding-top: 140px;
}

.pricing-hero-copy,
.pricing-control-bar,
.pricing-card,
.filter-panel,
.empty-state {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
    border-radius: 36px;
}

.pricing-hero-copy {
    padding: 40px;
}

.pricing-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.pricing-hero-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 24px;
}

.pricing-hero-copy h1 {
    margin: 0 0 16px;
    font: 800 clamp(2.6rem, 4vw, 4rem)/1.05 var(--font-display);
    letter-spacing: -0.05em;
    color: var(--text-main);
    max-width: 14ch;
}

.pricing-hero-copy p {
    margin: 0;
    max-width: 680px;
    color: var(--text-muted);
    font-size: 17px;
    line-height: 1.8;
}

.pricing-hero-inline {
    display: grid;
    gap: 16px;
    justify-items: end;
}

.pricing-duration-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--border-color);
}

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

.pricing-hero-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 16px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--card-bg) 95%, white 5%);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    font-size: 13px;
    font-weight: 700;
}

.pricing-card-kicker,
.filter-label,
.toolbar-label {
    display: inline-flex;
    align-items: center;
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.pricing-tabs {
    justify-content: flex-start;
}

.tabs-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.tab-link-new,
.duration-tab,
.pricing-btn {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.tab-link-new {
    min-width: 200px;
    min-height: 60px;
    padding: 0 24px;
    border-radius: 20px;
    background: color-mix(in srgb, var(--card-bg) 96%, white 4%);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 15px;
    font-weight: 800;
}

.tab-link-new.active,
.duration-tab.active,
.pricing-btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--theme-accent));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 16px 32px color-mix(in srgb, var(--primary-color) 20%, transparent);
}

.duration-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(110px, 130px));
    gap: 10px;
}

.duration-tab {
    min-height: 52px;
    border-radius: 18px;
    background: color-mix(in srgb, var(--card-bg) 96%, white 4%);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.duration-tab span {
    font-size: 14px;
    font-weight: 800;
}

.currency-pill,
.filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: color-mix(in srgb, var(--card-bg) 96%, white 4%);
    border: 1px solid var(--border-color);
    border-radius: 20px;
}

.currency-pill {
    min-height: 60px;
    padding: 0 20px;
}

.currency-pill select,
.filter-select,
.filter-input {
    background: transparent;
    border: 0;
    outline: 0;
    color: var(--text-main);
    font-size: 15px;
    font-weight: 700;
}

.filter-input {
    width: 100%;
    min-width: 260px;
}

.pricing-section {
    margin-top: 16px;
}

.section-head {
    margin-bottom: 32px;
}

.section-head-left {
    max-width: 720px;
    text-align: left;
}

.section-head h2 {
    margin: 0;
    font: 800 clamp(2rem, 3.5vw, 3.2rem)/1.05 var(--font-display);
    letter-spacing: -0.05em;
    color: var(--text-main);
}

.section-head p {
    margin: 12px 0 0;
    color: var(--text-muted);
    line-height: 1.8;
    font-size: 17px;
}

.plan-grid,
.product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.pricing-card {
    padding: 34px;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pricing-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 6px;
    background: linear-gradient(90deg, var(--primary-color), var(--theme-accent));
}

.pricing-plan-card.featured,
.pricing-plan-card-custom {
    box-shadow: 0 24px 64px color-mix(in srgb, var(--primary-color) 12%, transparent);
    border-color: color-mix(in srgb, var(--primary-color) 30%, transparent);
}

.pricing-plan-card {
    padding-top: 40px;
}

.pricing-card-tag,
.pricing-card-mini-tag {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.pricing-card-mini-tag {
    background: color-mix(in srgb, var(--theme-accent) 12%, transparent);
    color: var(--theme-accent);
}

.pricing-card-head {
    display: grid;
    gap: 12px;
}

.pricing-card-head h3 {
    margin: 0;
    font-size: 28px;
    line-height: 1.15;
    letter-spacing: -0.04em;
    color: var(--text-main);
}

.pricing-card-head p {
    margin: 0;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.8;
}

.pricing-card-price {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin-top: 24px;
}

.pricing-card-price strong {
    font-size: 52px;
    line-height: 1;
    letter-spacing: -0.06em;
    color: var(--text-main);
}

.pricing-card-price span {
    color: var(--text-muted);
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 8px;
}

.pricing-card-note {
    margin-top: 10px;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.75;
}

.pricing-plan-card .pricing-card-note {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.pricing-tool-list {
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.pricing-tool-list li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    color: var(--text-main);
    font-size: 15px;
    line-height: 1.6;
}

.pricing-tool-list li::before {
    content: "";
    width: 8px;
    height: 8px;
    margin-top: 8px;
    border-radius: 999px;
    background: var(--primary-color);
    flex-shrink: 0;
}

.pricing-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.pricing-chip {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 16px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--card-bg) 94%, white 6%);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    font-size: 13px;
    font-weight: 700;
}

.pricing-card-actions {
    display: flex;
    gap: 14px;
    margin-top: auto;
    padding-top: 28px;
    flex-wrap: wrap;
}

.pricing-action-form {
    flex: 1;
}

.pricing-btn {
    border: 0;
    cursor: pointer;
    border-radius: 20px;
    min-height: 60px;
    padding: 0 24px;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.pricing-btn-primary {
    color: #fff;
}

.pricing-btn-secondary {
    background: color-mix(in srgb, var(--card-bg) 96%, white 4%);
    border: 1px solid var(--border-color);
    color: var(--text-main);
}

.pricing-btn-fill {
    width: 100%;
}

.pricing-tool-card .pricing-card-head h3 {
    font-size: 24px;
}

.pricing-tool-media {
    display: block;
    overflow: hidden;
    border-radius: 24px;
    background: var(--surface-muted);
    border: 1px solid var(--border-color);
    aspect-ratio: 1 / 1;
    margin-bottom: 24px;
}

.pricing-tool-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pricing-tool-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.filter-panel {
    padding: 28px;
    margin-bottom: 32px;
}

.filter-bar {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) repeat(2, minmax(190px, 1fr)) 150px;
    gap: 16px;
    align-items: center;
}

.filter-pill {
    min-height: 64px;
    padding: 0 20px;
}

.filter-pill-search {
    justify-content: flex-start;
}

.filter-pill-select {
    justify-content: space-between;
}

.filter-icon {
    color: var(--text-muted);
    font-size: 18px;
}

.filter-submit {
    width: 100%;
}

.empty-state {
    padding: 60px 40px;
    text-align: center;
}

.empty-state-title {
    margin: 0 0 14px;
    color: var(--text-main);
    font-size: 26px;
    letter-spacing: -0.04em;
}

.empty-state-copy {
    margin: 0 0 24px;
    color: var(--text-muted);
    font-size: 17px;
}

.empty-state-reset {
    display: inline-flex;
}

.tab-link-new:hover,
.duration-tab:hover,
.pricing-btn:hover {
    transform: translateY(-2px);
}

@media (max-width: 1180px) {
    .plan-grid,
    .product-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 900px) {
    .pricing-wrap {
        width: min(100%, calc(100% - 32px));
    }

    .plan-grid,
    .product-grid,
    .filter-bar {
        grid-template-columns: 1fr;
    }

    .pricing-tabs .tab-link-new,
    .currency-pill,
    .duration-tabs {
        width: 100%;
    }

    .duration-tabs {
        grid-template-columns: 1fr;
    }

    .pricing-hero-head,
    .pricing-duration-bar,
    .pricing-hero-inline {
        align-items: stretch;
        justify-items: stretch;
    }
}

@media (max-width: 640px) {
    body[data-app-scope="public"] .pricing-hero {
        padding-top: 120px;
    }

    .pricing-hero-copy,
    .pricing-control-bar,
    .pricing-card,
    .filter-panel,
    .empty-state {
        border-radius: 28px;
        padding-left: 24px;
        padding-right: 24px;
    }

    .pricing-card-price strong {
        font-size: 42px;
    }

    .pricing-card-actions {
        flex-direction: column;
    }

    .pricing-action-form,
    .pricing-btn {
        width: 100%;
    }
}


/* Source: assets/css/pages/product.css */
.product-page-shell {
    padding-bottom: 80px;
}

body[data-app-scope="public"] .product-page-shell {
    background: var(--bg-color);
}

.product-wrap {
    width: min(1200px, calc(100% - 48px));
    margin: 0 auto;
}

.product-page-shell-dashboard .product-wrap {
    width: 100%;
    max-width: none;
}

.product-breadcrumb {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 16px 0 0;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 700;
}

body[data-app-scope="public"] .product-breadcrumb {
    padding-top: 140px;
}

.product-breadcrumb a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s;
}

.product-breadcrumb a:hover {
    color: var(--primary-color);
}

.product-breadcrumb strong {
    color: var(--text-main);
}

.product-alert {
    margin-top: 24px;
    padding: 20px 24px;
    border-radius: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-weight: 700;
}

.product-alert-success {
    background: var(--surface-success);
    color: color-mix(in srgb, var(--color-green) 60%, var(--text-main) 40%);
    border: 1px solid color-mix(in srgb, var(--color-green) 30%, transparent);
}

.product-alert a {
    color: inherit;
    text-decoration: underline;
    white-space: nowrap;
}

.product-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
    gap: 28px;
    align-items: start;
    margin-top: 28px;
}

.product-main-card,
.product-purchase-card,
.related-tool-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
    border-radius: 36px;
}

.product-main-card {
    padding: 32px;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 32px;
}

.product-media-shell {
    border-radius: 32px;
    overflow: hidden;
    background: var(--surface-muted);
    border: 1px solid var(--border-color);
    aspect-ratio: 1 / 1;
}

.product-media-shell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.product-media-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

.product-media-chips span,
.product-kicker,
.duration-choice,
.related-tool-category {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 16px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
    color: var(--primary-color);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.product-copy-card {
    display: flex;
    flex-direction: column;
}

.product-copy-card h1 {
    margin: 20px 0 16px;
    font: 800 clamp(2.4rem, 4vw, 3.8rem)/1.05 var(--font-display);
    letter-spacing: -0.05em;
    color: var(--text-main);
}

.product-description {
    margin: 0;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1.8;
}

.product-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 28px;
}

.product-detail-item {
    padding: 24px 20px;
    border-radius: 24px;
    background: color-mix(in srgb, var(--card-bg) 95%, white 5%);
    border: 1px solid var(--border-color);
}

.product-detail-item span {
    display: inline-flex;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.product-detail-item strong {
    display: block;
    margin-top: 12px;
    font-size: 20px;
    color: var(--text-main);
    letter-spacing: -0.04em;
}

.product-detail-item small {
    display: block;
    margin-top: 8px;
    color: var(--text-muted);
    line-height: 1.6;
    font-size: 13px;
}

.product-clean-note {
    display: flex;
    gap: 14px;
    margin-top: 24px;
    padding: 24px;
    border-radius: 24px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color) 8%, var(--card-bg) 92%), color-mix(in srgb, var(--theme-accent) 6%, var(--card-bg) 94%));
    border: 1px solid color-mix(in srgb, var(--primary-color) 20%, transparent);
}

.product-clean-note i {
    color: var(--primary-color);
    margin-top: 3px;
    font-size: 18px;
}

.product-clean-note p {
    margin: 0;
    color: var(--text-main);
    font-size: 15px;
    line-height: 1.8;
}

.product-purchase-card {
    padding: 34px;
    position: sticky;
    top: 120px;
}

.product-price-block {
    padding: 28px;
    border-radius: 28px;
    background: var(--surface-muted);
    border: 1px solid color-mix(in srgb, var(--primary-color) 20%, var(--border-color) 80%);
}

.product-price-label {
    display: inline-flex;
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.product-price-line {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin-top: 14px;
}

.product-price-line strong {
    font-size: 56px;
    line-height: 1;
    letter-spacing: -0.06em;
    color: var(--text-main);
}

.product-price-line span,
.product-price-block p {
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1.7;
}

.product-price-block p {
    margin: 10px 0 0;
}

.product-duration-picker {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 24px;
}

.duration-choice {
    justify-content: center;
    min-height: 54px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--card-bg) 96%, white 4%);
    cursor: pointer;
    transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, border-color 0.22s ease;
    color: var(--text-main);
}

.duration-choice.active {
    background: linear-gradient(135deg, var(--primary-color), var(--theme-accent));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 16px 32px color-mix(in srgb, var(--primary-color) 20%, transparent);
}

.duration-choice:hover,
.product-btn:hover,
.related-tool-footer a:hover {
    transform: translateY(-2px);
}

.product-purchase-form {
    display: grid;
    gap: 14px;
    margin-top: 24px;
}

.product-btn {
    min-height: 60px;
    border-radius: 20px;
    border: 0;
    text-decoration: none;
    font-size: 15px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--theme-accent));
    color: #fff;
    box-shadow: 0 20px 40px color-mix(in srgb, var(--primary-color) 25%, transparent);
}

.product-btn-secondary {
    background: color-mix(in srgb, var(--card-bg) 96%, white 4%);
    border: 1px solid var(--border-color);
    color: var(--text-main);
}

.product-purchase-points {
    display: grid;
    gap: 16px;
    margin-top: 24px;
}

.product-purchase-points div {
    padding: 24px;
    border-radius: 24px;
    background: var(--surface-muted);
    border: 1px solid var(--border-color);
}

.product-purchase-points strong {
    display: block;
    color: var(--text-main);
    font-size: 16px;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}

.product-purchase-points span {
    display: block;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.7;
}

.product-related-section {
    margin-top: 48px;
}

.section-head {
    margin-bottom: 28px;
}

.section-head-left {
    max-width: 680px;
}

.section-head h2 {
    margin: 0;
    font: 800 clamp(2rem, 3.5vw, 3.2rem)/1.05 var(--font-display);
    letter-spacing: -0.05em;
    color: var(--text-main);
}

.section-head p {
    margin: 12px 0 0;
    color: var(--text-muted);
    line-height: 1.8;
    font-size: 17px;
}

.product-related-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.related-tool-card {
    overflow: hidden;
}

.related-tool-media {
    display: block;
    aspect-ratio: 1 / 1;
    background: var(--surface-muted);
    border-bottom: 1px solid var(--border-color);
}

.related-tool-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.related-tool-body {
    padding: 24px;
}

.related-tool-body h3 {
    margin: 16px 0 10px;
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: -0.03em;
}

.related-tool-body h3 a,
.related-tool-footer a {
    color: var(--text-main);
    text-decoration: none;
}

.related-tool-body p {
    margin: 0;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.75;
}

.related-tool-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.related-tool-footer strong {
    color: var(--text-main);
    font-size: 20px;
    letter-spacing: -0.04em;
}

.related-tool-footer a {
    font-weight: 800;
    color: var(--primary-color);
}

@media (max-width: 1180px) {
    .product-hero,
    .product-main-card,
    .product-related-grid {
        grid-template-columns: 1fr 1fr;
    }

    .product-purchase-card {
        position: static;
    }
}

@media (max-width: 900px) {
    .product-wrap {
        width: min(100%, calc(100% - 32px));
    }

    .product-hero,
    .product-main-card,
    .product-detail-grid,
    .product-related-grid,
    .product-duration-picker {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    body[data-app-scope="public"] .product-breadcrumb {
        padding-top: 120px;
    }

    .product-main-card,
    .product-purchase-card,
    .related-tool-card {
        border-radius: 28px;
    }

    .product-main-card,
    .product-purchase-card {
        padding: 24px;
    }

    .product-alert {
        flex-direction: column;
        align-items: flex-start;
    }

    .product-price-line strong {
        font-size: 44px;
    }
}


/* Source: assets/css/standalone-pages.css */
body.file-manager-select {
    font-family: 'Outfit', 'Inter', system-ui, -apple-system, sans-serif;
    padding: 20px;
    background: #f8fafc;
    color: #1a1d2e;
}

body.file-manager-select .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 15px;
}

body.file-manager-select .item {
    background: white;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    text-align: center;
    cursor: pointer;
    transition: 0.2s;
}

body.file-manager-select .item:hover {
    transform: scale(1.05);
    border-color: #3b82f6;
}

body.file-manager-select .folder {
    color: #fbbf24;
}

body.file-manager-select img {
    width: 100%;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 5px;
}

body.file-manager-select .name {
    font-size: 11px;
    color: #64748b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.invoice-page {
    --primary: var(--primary-color);
    --dark: #121421;
    --text: var(--text-main);
    --muted: var(--text-muted);
    --bg: var(--bg-color);
    --card: var(--card-bg);
    margin: 0;
    font-family: 'Outfit', 'Inter', system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    transition: background 0.3s;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

body.invoice-page .actions {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 20px 0;
}

body.invoice-page .btn-action {
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.82);
    color: var(--text);
    border-radius: 14px;
    padding: 12px 16px;
    font-weight: 800;
    cursor: pointer;
}

body.invoice-page .btn-action.primary {
    background: linear-gradient(135deg, var(--primary), var(--theme-accent, #8b5cf6));
    color: #fff;
    border-color: transparent;
}

body.invoice-page .invoice-wrapper {
    min-height: 100vh;
    padding: 40px 20px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

body.invoice-page .invoice-card {
    background: var(--card) !important;
    width: 100%;
    max-width: 800px;
    padding: 50px;
    border-radius: 24px;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

body.invoice-page .accent-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;
    height: 100%;
    background: linear-gradient(to bottom, var(--primary), var(--theme-accent, #8b5cf6)) !important;
}

body.invoice-page .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 50px;
}

body.invoice-page .logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Outfit', sans-serif;
    font-size: 28px;
    font-weight: 900;
    color: var(--text);
}

body.invoice-page .logo-icon {
    width: 40px;
    height: 40px;
    background: var(--primary) !important;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #121421 !important;
    font-size: 20px;
}

body.invoice-page .invoice-meta {
    text-align: right;
}

body.invoice-page .invoice-meta h1 {
    margin: 0;
    font-size: 32px;
    font-weight: 900;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 2px;
}

body.invoice-page .billing-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 35px;
}

body.invoice-page .billing-box {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 18px;
    padding: 20px;
}

body.invoice-page .billing-box h4 {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 900;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

body.invoice-page table {
    width: 100%;
    border-collapse: collapse;
}

body.invoice-page th,
body.invoice-page td {
    padding: 18px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    vertical-align: top;
}

body.invoice-page th {
    font-size: 11px;
    font-weight: 900;
    color: var(--muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: left;
}

body.invoice-page .totals {
    margin-top: 28px;
    margin-left: auto;
    width: min(100%, 320px);
}

body.invoice-page .total-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    color: var(--muted);
}

body.invoice-page .total-row.grand {
    margin-top: 8px;
    padding-top: 18px;
    border-top: 2px solid rgba(0, 0, 0, 0.08);
    color: var(--text);
    font-size: 20px;
    font-weight: 900;
}

body.invoice-page .footer {
    margin-top: 38px;
    color: var(--muted);
}

body.invoice-page[data-theme="dark"] .invoice-card {
    border-color: rgba(255, 255, 255, 0.05);
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.4);
}

body.invoice-page[data-theme="dark"] .billing-box {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.06);
}

body.super-admin-page {
    background: #020617;
    color: #f8fafc;
    display: flex;
    font-family: 'Outfit', 'Inter', system-ui, -apple-system, sans-serif;
}

body.super-admin-page .main-content {
    flex: 1;
    margin-left: 260px;
    padding: 38px;
}

body.super-admin-addons {
    --primary-gradient: linear-gradient(135deg, #c5f949 0%, #a3e635 100%);
    --card-glass: rgba(30, 41, 59, 0.7);
    --border-glass: rgba(255, 255, 255, 0.05);
}

body.super-admin-addons .main-content {
    background: radial-gradient(circle at 50% 0%, rgba(197, 249, 73, 0.05) 0%, transparent 50%);
}

body.super-admin-addons .card {
    background: var(--card-glass);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-glass);
    border-radius: 24px;
    padding: 40px;
}

body.super-admin-addons .addon-feature {
    background: rgba(197, 249, 73, 0.05);
    padding: 24px;
    border-radius: 16px;
    border-left: 4px solid #c5f949;
    margin-top: 30px;
}

body.super-admin-dashboard {
    --shell-bg: #030712;
    --panel-bg: rgba(15, 23, 42, 0.76);
    --panel-border: rgba(148, 163, 184, 0.14);
    --panel-soft: rgba(255, 255, 255, 0.04);
    --text-soft: #9fb0c5;
    --good: #86efac;
    --bad: #fca5a5;
    --warn: #fcd34d;
    background:
        radial-gradient(circle at top left, rgba(197, 249, 73, 0.10), transparent 26%),
        linear-gradient(180deg, #020617 0%, #07101d 100%);
}

body.super-admin-dashboard .hero {
    display: grid;
    grid-template-columns: 1.35fr 0.95fr;
    gap: 24px;
    margin-bottom: 24px;
}

body.super-admin-dashboard .panel,
body.super-licenses-page .card {
    background: rgba(15, 23, 42, 0.76);
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 28px;
    padding: 24px;
    backdrop-filter: blur(18px);
}

body.super-licenses-page .grid {
    display: grid;
    gap: 16px;
}

body.super-licenses-page .grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

body.super-licenses-page .grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

body.super-licenses-page label {
    display: block;
    font-size: 11px;
    font-weight: 800;
    margin-bottom: 8px;
    color: #94a3b8;
    text-transform: uppercase;
}

body.super-licenses-page input,
body.super-licenses-page select,
body.super-licenses-page textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: #0f172a;
    color: #fff;
}

body.super-licenses-page textarea {
    min-height: 92px;
}

body.super-licenses-page .btn {
    padding: 11px 16px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    font-weight: 800;
}

body.super-licenses-page .btn-primary {
    background: #c5f949;
    color: #101827;
}

body.super-licenses-page .btn-muted {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

body.super-licenses-page .btn-danger {
    background: #7f1d1d;
    color: #fff;
}

body.super-licenses-page table {
    width: 100%;
    border-collapse: collapse;
}

body.super-licenses-page th,
body.super-licenses-page td {
    padding: 14px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    vertical-align: top;
}

body.super-licenses-page .badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}

body.super-licenses-page .active {
    background: rgba(34, 197, 94, .14);
    color: #86efac;
}

body.super-licenses-page .suspended {
    background: rgba(245, 158, 11, .14);
    color: #fcd34d;
}

body.super-licenses-page .expired {
    background: rgba(239, 68, 68, .14);
    color: #fca5a5;
}

@media (max-width: 960px) {
    body.invoice-page .header,
    body.invoice-page .billing-grid,
    body.super-admin-dashboard .hero,
    body.super-licenses-page .grid-2,
    body.super-licenses-page .grid-3 {
        grid-template-columns: 1fr;
        display: grid;
    }

    body.invoice-page .header {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    body.super-admin-page .main-content {
        margin-left: 0;
        padding: 20px;
    }
}

@media print {
    body.invoice-page .actions {
        display: none;
    }

    body.invoice-page {
        background: white !important;
    }

    body.invoice-page .invoice-wrapper {
        padding: 0;
        display: block;
    }

    body.invoice-page .invoice-card {
        max-width: 100%;
        min-height: 100vh;
        border-radius: 0;
        box-shadow: none;
        border: none;
        padding: 40px;
    }

    body.invoice-page .accent-bar {
        width: 12px;
    }
}

/* Runtime fix: cream orange sidebar parity */
body[data-theme-preset="cream_orange"][data-app-scope="user"] .sidebar,
body[data-theme-preset="cream_orange"][data-app-scope="admin"] .sidebar,
body[data-theme-preset="cream_orange"][data-app-scope="super"] .sidebar {
    background: linear-gradient(180deg, #fffaf4 0%, #f8eadb 52%, #f1dfcb 100%) !important;
    border-right: 1px solid rgba(163, 108, 59, 0.16) !important;
    box-shadow: 20px 0 60px rgba(144, 97, 54, 0.16) !important;
}

body[data-theme-preset="cream_orange"] .sidebar .sidebar-header {
    border-bottom-color: rgba(163, 108, 59, 0.12) !important;
}

body[data-theme-preset="cream_orange"] .sidebar .sidebar-logo,
body[data-theme-preset="cream_orange"] .sidebar .sidebar-logo span {
    color: #241914 !important;
}

body[data-theme-preset="cream_orange"] .sidebar .sidebar-toggle-btn {
    background: rgba(255, 250, 244, 0.92) !important;
    border-color: rgba(163, 108, 59, 0.14) !important;
    color: #a07f69 !important;
}

body[data-theme-preset="cream_orange"] .sidebar .sidebar-toggle-btn:hover {
    background: rgba(240, 90, 48, 0.10) !important;
    color: #f05a30 !important;
}

body[data-theme-preset="cream_orange"] .sidebar .nav-link {
    color: #755c4d !important;
}

body[data-theme-preset="cream_orange"] .sidebar .nav-link i,
body[data-theme-preset="cream_orange"] .sidebar .nav-link .nav-caret {
    color: #a07f69 !important;
}

body[data-theme-preset="cream_orange"] .sidebar .nav-link:hover,
body[data-theme-preset="cream_orange"] .sidebar .nav-link.active,
body[data-theme-preset="cream_orange"] .sidebar .nav-item:has(.nav-submenu.open) > .nav-link {
    background: rgba(240, 90, 48, 0.12) !important;
    color: #241914 !important;
    box-shadow: inset 0 0 0 1px rgba(240, 90, 48, 0.08) !important;
}

body[data-theme-preset="cream_orange"] .sidebar .nav-link:hover i,
body[data-theme-preset="cream_orange"] .sidebar .nav-link.active i,
body[data-theme-preset="cream_orange"] .sidebar .nav-item:has(.nav-submenu.open) > .nav-link i,
body[data-theme-preset="cream_orange"] .sidebar .nav-link:hover .nav-caret,
body[data-theme-preset="cream_orange"] .sidebar .nav-link.active .nav-caret,
body[data-theme-preset="cream_orange"] .sidebar .nav-item:has(.nav-submenu.open) > .nav-link .nav-caret {
    color: #f05a30 !important;
}

body[data-theme-preset="cream_orange"] .sidebar .nav-link:hover .nav-icon-wrapper i,
body[data-theme-preset="cream_orange"] .sidebar .nav-link.active .nav-icon-wrapper i,
body[data-theme-preset="cream_orange"] .sidebar .nav-item:has(.nav-submenu.open) > .nav-link .nav-icon-wrapper i {
    color: #ffffff !important;
}

body[data-theme-preset="cream_orange"] .sidebar .nav-sublink {
    background: rgba(255, 252, 247, 0.88) !important;
    border: 1px solid rgba(163, 108, 59, 0.10) !important;
    color: #866b59 !important;
}

body[data-theme-preset="cream_orange"] .sidebar .nav-sublink::before {
    background: rgba(163, 108, 59, 0.24) !important;
}

body[data-theme-preset="cream_orange"] .sidebar .nav-sublink:hover,
body[data-theme-preset="cream_orange"] .sidebar .nav-sublink.active {
    background: rgba(240, 90, 48, 0.12) !important;
    color: #241914 !important;
}

body[data-theme-preset="cream_orange"] .sidebar .nav-sublink:hover::before,
body[data-theme-preset="cream_orange"] .sidebar .nav-sublink.active::before {
    background: #f05a30 !important;
    box-shadow: 0 0 0 4px rgba(240, 90, 48, 0.10) !important;
}

body[data-theme-preset="cream_orange"] .sidebar .sidebar-cta,
body[data-theme-preset="cream_orange"] .sidebar .sidebar-footer {
    border-top-color: rgba(163, 108, 59, 0.12) !important;
}

body[data-theme-preset="cream_orange"] .sidebar .theme-switch {
    background: rgba(240, 90, 48, 0.10) !important;
    border-color: rgba(163, 108, 59, 0.12) !important;
}

body[data-theme-preset="cream_orange"] .sidebar .user-snippet {
    background: rgba(255, 250, 244, 0.78) !important;
    border-color: rgba(163, 108, 59, 0.12) !important;
}

body[data-theme-preset="cream_orange"] .sidebar .user-info h4 {
    color: #241914 !important;
}

body[data-theme-preset="cream_orange"] .sidebar .user-info p,
body[data-theme-preset="cream_orange"] .sidebar .sidebar-footer-label {
    color: #8b705f !important;
}

html[data-theme="dark"] body[data-theme-preset="cream_orange"] .sidebar,
body[data-theme-preset="cream_orange"][data-theme="dark"] .sidebar {
    background: linear-gradient(180deg, #261a14 0%, #1f1510 100%) !important;
    border-right-color: rgba(255, 228, 208, 0.08) !important;
}

/* Runtime fix: pricing + product wrappers */
.pricing-page-shell-public,
.product-page-shell-public {
    min-height: 100vh;
}

.pricing-currency-pill {
    min-width: 196px;
}

.custom-bundles-section {
    margin-top: 28px;
}

.product-media-card {
    display: grid;
    gap: 18px;
}


/* Source: assets/css/user-themes.css */
body.user-theme-cream-orange {
    --primary-color: #f05a30;
    --primary-hover: #e0481d;
    --bg-color: #f5ede3;
    --sidebar-bg: #fff8ef;
    --sidebar-text: #7c6759;
    --sidebar-active: #f05a30;
    --sidebar-active-bg: rgba(240, 90, 48, 0.12);
    --text-main: #241914;
    --text-muted: #7b685b;
    --card-bg: #fffaf4;
    --radius: 28px;
    --shadow: 0 24px 60px rgba(123, 78, 39, 0.12);
    --border-color: rgba(108, 78, 49, 0.12);
    --font-family: 'Plus Jakarta Sans', 'Outfit', system-ui, -apple-system, sans-serif;
    --primary: #f05a30;
    --dark: #241914;
    --text: #241914;
    --muted: #7b685b;
    --bg: #f5ede3;
    --card: #fffaf4;
    background:
        radial-gradient(circle at top left, rgba(255, 246, 233, 0.96), transparent 28%),
        linear-gradient(180deg, #fbf1e5 0%, #f4e4d3 46%, #f8f0e8 100%) !important;
    color: var(--text-main);
}

html[data-theme="dark"] body.user-theme-cream-orange,
body.user-theme-cream-orange[data-theme="dark"] {
    --bg-color: #1a120d;
    --sidebar-bg: #221711;
    --sidebar-text: #d5bcab;
    --sidebar-active-bg: rgba(240, 90, 48, 0.22);
    --text-main: #f9ede0;
    --text-muted: #cfb6a4;
    --card-bg: #251b15;
    --shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    --border-color: rgba(255, 238, 221, 0.08);
    --text: #f9ede0;
    --muted: #cfb6a4;
    --bg: #1a120d;
    --card: #251b15;
    background:
        radial-gradient(circle at top left, rgba(240, 90, 48, 0.16), transparent 24%),
        linear-gradient(180deg, #160e0a 0%, #1c130f 48%, #140c08 100%) !important;
}

body.user-theme-cream-orange .wrapper.dashboard-layout,
body.user-theme-cream-orange .main-content {
    background: transparent;
}

body.user-theme-cream-orange .sidebar {
    background: linear-gradient(180deg, #fffaf4 0%, #f6e7d5 58%, #f0ddc8 100%) !important;
    border-right: 1px solid rgba(163, 108, 59, 0.14) !important;
    box-shadow: 20px 0 60px rgba(144, 97, 54, 0.14) !important;
}

html[data-theme="dark"] body.user-theme-cream-orange .sidebar,
body.user-theme-cream-orange[data-theme="dark"] .sidebar {
    background: linear-gradient(180deg, #261a14 0%, #1c130f 100%) !important;
    box-shadow: 20px 0 60px rgba(0, 0, 0, 0.25) !important;
}

body.user-theme-cream-orange .sidebar-logo,
body.user-theme-cream-orange .sidebar-logo span {
    color: var(--text-main) !important;
}

body.user-theme-cream-orange .sidebar-logo span,
body.user-theme-cream-orange .header-title h1 span {
    font-family: 'Playfair Display', serif;
    letter-spacing: -0.03em;
}

body.user-theme-cream-orange .nav-link,
body.user-theme-cream-orange .nav-sublink,
body.user-theme-cream-orange .sidebar-footer span,
body.user-theme-cream-orange .sidebar-footer p {
    color: #755c4d !important;
}

body.user-theme-cream-orange .nav-link .nav-icon-wrapper,
body.user-theme-cream-orange .btn-cta {
    background: rgba(240, 90, 48, 0.08) !important;
    border: 1px solid rgba(240, 90, 48, 0.08);
}

body.user-theme-cream-orange .sidebar-toggle-btn,
body.user-theme-cream-orange .nav-link .nav-caret,
body.user-theme-cream-orange .nav-link i,
body.user-theme-cream-orange .nav-sublink::before {
    color: #a1826c !important;
}

body.user-theme-cream-orange .nav-link i,
body.user-theme-cream-orange .nav-sublink,
body.user-theme-cream-orange .btn-cta i {
    color: inherit !important;
}

body.user-theme-cream-orange .nav-link:hover,
body.user-theme-cream-orange .nav-link.active,
body.user-theme-cream-orange .nav-sublink:hover,
body.user-theme-cream-orange .nav-sublink.active {
    background: rgba(240, 90, 48, 0.12) !important;
    color: var(--text-main) !important;
}

body.user-theme-cream-orange .nav-item:has(.nav-submenu.open) > .nav-link {
    background: rgba(240, 90, 48, 0.10) !important;
    color: var(--text-main) !important;
}

body.user-theme-cream-orange .nav-item:has(.nav-submenu.open) > .nav-link .nav-caret {
    color: var(--primary-color) !important;
}

body.user-theme-cream-orange .nav-link:hover .nav-icon-wrapper,
body.user-theme-cream-orange .nav-link.active .nav-icon-wrapper {
    background: linear-gradient(135deg, #f05a30, #f59e42) !important;
    box-shadow: 0 14px 28px rgba(240, 90, 48, 0.18);
}

body.user-theme-cream-orange .nav-link:hover .nav-icon-wrapper i,
body.user-theme-cream-orange .nav-link.active .nav-icon-wrapper i {
    color: #fff7f1 !important;
}

body.user-theme-cream-orange .theme-switch {
    background: rgba(36, 25, 20, 0.08) !important;
}

body.user-theme-cream-orange .theme-switch-indicator {
    background: linear-gradient(135deg, #f05a30, #f59e42) !important;
}

body.user-theme-cream-orange .main-content header {
    background: rgba(255, 250, 244, 0.82) !important;
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--border-color) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] body.user-theme-cream-orange .main-content header,
body.user-theme-cream-orange[data-theme="dark"] .main-content header {
    background: rgba(37, 27, 21, 0.88) !important;
}

body.user-theme-cream-orange .header-title h1 {
    color: var(--text-main) !important;
    letter-spacing: -0.04em;
}

body.user-theme-cream-orange .header-title h1 span {
    color: var(--primary-color) !important;
    font-style: italic;
}

body.user-theme-cream-orange .header-actions select,
body.user-theme-cream-orange .header-actions .btn-icon,
body.user-theme-cream-orange .header-actions .btn-logout {
    background: rgba(255, 250, 244, 0.92) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-main) !important;
    box-shadow: 0 14px 30px rgba(123, 78, 39, 0.08) !important;
}

body.user-theme-cream-orange .user-snippet {
    background: rgba(255, 250, 244, 0.68) !important;
    border: 1px solid rgba(163, 108, 59, 0.12) !important;
}

body.user-theme-cream-orange .user-info h4 {
    color: #241914 !important;
}

body.user-theme-cream-orange .user-info p,
body.user-theme-cream-orange .sidebar-footer-label {
    color: #8b705f !important;
}

body.user-theme-cream-orange .nav-sublink {
    background: rgba(255, 250, 244, 0.78) !important;
    border-color: rgba(163, 108, 59, 0.10) !important;
}

html[data-theme="dark"] body.user-theme-cream-orange .header-actions select,
html[data-theme="dark"] body.user-theme-cream-orange .header-actions .btn-icon,
html[data-theme="dark"] body.user-theme-cream-orange .header-actions .btn-logout,
body.user-theme-cream-orange[data-theme="dark"] .header-actions select,
body.user-theme-cream-orange[data-theme="dark"] .header-actions .btn-icon,
body.user-theme-cream-orange[data-theme="dark"] .header-actions .btn-logout {
    background: rgba(45, 31, 23, 0.92) !important;
}

body.user-theme-cream-orange .stat-card,
body.user-theme-cream-orange .resource-card,
body.user-theme-cream-orange .promo-banner,
body.user-theme-cream-orange .access-container,
body.user-theme-cream-orange .main-content div[style*="background: white"],
body.user-theme-cream-orange .main-content div[style*="background: #f8fafc"],
body.user-theme-cream-orange .main-content div[style*="background:#f8fafc"],
body.user-theme-cream-orange .main-content form[style*="background: white"],
body.user-theme-cream-orange .main-content section[style*="background: white"] {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    box-shadow: var(--shadow) !important;
}

body.user-theme-cream-orange .main-content div[style*="background: linear-gradient(135deg, #0f172a"],
body.user-theme-cream-orange .main-content div[style*="background: linear-gradient(135deg, var(--sidebar-bg), #2c3e50"] {
    background: linear-gradient(135deg, #b2472a 0%, #f05a30 55%, #f5a24f 100%) !important;
    box-shadow: 0 24px 48px rgba(179, 71, 42, 0.22) !important;
}

body.user-theme-cream-orange .main-content table {
    background: transparent !important;
}

body.user-theme-cream-orange .main-content tbody tr {
    background: rgba(255, 250, 244, 0.88) !important;
}

html[data-theme="dark"] body.user-theme-cream-orange .main-content tbody tr,
body.user-theme-cream-orange[data-theme="dark"] .main-content tbody tr {
    background: rgba(45, 31, 23, 0.88) !important;
}

body.user-theme-cream-orange .main-content th,
body.user-theme-cream-orange .main-content td {
    border-color: var(--border-color) !important;
}

body.user-theme-cream-orange .main-content span[style*="background: #f8fafc"],
body.user-theme-cream-orange .main-content span[style*="background:#f8fafc"],
body.user-theme-cream-orange .main-content div[style*="background: #f1f5f9"],
body.user-theme-cream-orange .main-content div[style*="background:#f1f5f9"] {
    background: rgba(240, 90, 48, 0.08) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}

body.user-theme-cream-orange input,
body.user-theme-cream-orange select,
body.user-theme-cream-orange textarea {
    background: rgba(255, 251, 246, 0.96) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-main) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] body.user-theme-cream-orange input,
html[data-theme="dark"] body.user-theme-cream-orange select,
html[data-theme="dark"] body.user-theme-cream-orange textarea,
body.user-theme-cream-orange[data-theme="dark"] input,
body.user-theme-cream-orange[data-theme="dark"] select,
body.user-theme-cream-orange[data-theme="dark"] textarea {
    background: rgba(33, 24, 18, 0.96) !important;
}

body.user-theme-cream-orange input::placeholder,
body.user-theme-cream-orange textarea::placeholder {
    color: var(--text-muted);
}

body.user-theme-cream-orange .btn-primary,
body.user-theme-cream-orange .main-content button[style*="background: var(--primary-color)"],
body.user-theme-cream-orange .main-content a[style*="background: var(--primary-color)"],
body.user-theme-cream-orange .btn-action.primary {
    background: linear-gradient(135deg, #f05a30 0%, #f48d49 100%) !important;
    color: #fffaf4 !important;
    border: none !important;
    box-shadow: 0 18px 34px rgba(240, 90, 48, 0.22) !important;
}

body.user-theme-cream-orange .btn-primary:hover,
body.user-theme-cream-orange .btn-action.primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 22px 38px rgba(240, 90, 48, 0.26) !important;
}

body.user-theme-cream-orange .btn-action,
body.user-theme-cream-orange .main-content a[style*="background: #f1f5f9"],
body.user-theme-cream-orange .main-content button[style*="background: #f1f5f9"] {
    background: rgba(255, 250, 244, 0.96) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-color) !important;
}

body.user-theme-cream-orange .invoice-card {
    background: var(--card) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow) !important;
}

body.user-theme-cream-orange .accent-bar {
    background: linear-gradient(to bottom, #f05a30, #f59e42) !important;
}

body.user-theme-cream-orange .logo-icon {
    background: linear-gradient(135deg, #f05a30, #f59e42) !important;
    color: #fffaf4 !important;
}

body.user-theme-cream-orange .billing-grid {
    background: rgba(240, 90, 48, 0.06) !important;
}

html[data-theme="dark"] body.user-theme-cream-orange .billing-grid,
body.user-theme-cream-orange[data-theme="dark"] .billing-grid {
    background: rgba(240, 90, 48, 0.12) !important;
}

body.user-theme-cream-orange .logo,
body.user-theme-cream-orange .invoice-meta h1 {
    color: var(--text) !important;
}

body.user-theme-cream-orange .invoice-meta h1 {
    letter-spacing: 0.1em;
}

/* Runtime refinement: simple premium pricing + product pages */
.pricing-hero {
    padding: 10px 0 18px;
}

body[data-app-scope="public"] .pricing-hero {
    padding-top: 112px;
}

.pricing-hero-copy {
    padding: 30px 32px;
    border-radius: 30px;
}

.pricing-hero-head {
    margin-top: 16px;
    align-items: center;
}

.pricing-hero-copy h1 {
    max-width: 11ch;
    margin-bottom: 12px;
    font: 800 clamp(2.15rem, 3.7vw, 3.35rem)/1.04 var(--font-display);
}

.pricing-hero-copy p {
    max-width: 560px;
    font-size: 15px;
    line-height: 1.7;
}

.pricing-hero-inline {
    justify-items: start;
}

.pricing-duration-bar {
    margin-top: 22px;
    padding-top: 18px;
}

.pricing-hero-meta span {
    min-height: 34px;
    padding: 0 14px;
    font-size: 12px;
}

.pricing-section {
    margin-top: 12px;
}

.pricing-section--compact {
    margin-top: 8px;
}

.pricing-inline-label {
    display: inline-flex;
    align-items: center;
    margin: 8px 0 18px;
    min-height: 36px;
    padding: 0 16px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.plan-grid,
.product-grid {
    gap: 20px;
}

.pricing-card {
    border-radius: 30px;
    padding: 26px;
}

.pricing-card-head p {
    font-size: 14px;
    line-height: 1.7;
}

.pricing-card-price strong {
    font-size: clamp(2rem, 3vw, 2.6rem);
}

.pricing-tool-list {
    margin-top: 18px;
}

.pricing-chip-row {
    display: none;
}

.pricing-card-actions {
    margin-top: 20px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pricing-card-actions .pricing-btn {
    min-height: 50px;
    border-radius: 16px;
}

.filter-panel {
    padding: 18px 20px;
    border-radius: 28px;
}

.filter-bar {
    gap: 12px;
}

.filter-submit {
    min-width: 132px;
}

.product-page-shell {
    padding-bottom: 56px;
}

body[data-app-scope="public"] .product-breadcrumb {
    padding-top: 112px;
}

.product-breadcrumb {
    padding-top: 8px;
    gap: 10px;
}

.product-hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    gap: 22px;
    margin-top: 18px;
}

.product-main-card,
.product-purchase-card {
    border-radius: 30px;
}

.product-main-card {
    padding: 24px;
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
    gap: 24px;
}

.product-media-shell {
    border-radius: 28px;
}

.product-media-chips,
.product-detail-grid,
.product-clean-note,
.product-purchase-points,
.product-related-section {
    display: none;
}

.product-copy-card {
    justify-content: center;
}

.product-copy-card h1 {
    margin: 14px 0 12px;
    font: 800 clamp(2.05rem, 3.4vw, 3.1rem)/1.05 var(--font-display);
}

.product-description {
    max-width: 62ch;
    font-size: 15px;
    line-height: 1.75;
}

.product-copy-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.product-copy-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
    color: var(--text-main);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.product-purchase-card {
    top: 104px;
    padding: 28px;
}

.product-price-block {
    padding: 22px;
    border-radius: 24px;
}

.product-price-line strong {
    font-size: clamp(2rem, 3.2vw, 3rem);
}

.product-duration-picker {
    margin-top: 18px;
    gap: 10px;
}

.duration-choice {
    min-height: 46px;
    padding: 0 14px;
    font-size: 12px;
}

.product-purchase-form {
    margin-top: 20px;
}

.product-compact-note {
    margin: 16px 2px 0;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.6;
}

@media (max-width: 991px) {
    .pricing-card-actions {
        grid-template-columns: 1fr;
    }

    .product-hero,
    .product-main-card {
        grid-template-columns: 1fr;
    }

    .product-purchase-card {
        position: static;
    }
}

/* Runtime refinement: flat clean pricing layout */
.pricing-page-shell {
    padding-bottom: 40px;
}

.pricing-hero {
    padding: 2px 0 10px;
}

.pricing-hero-copy {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 6px 0 12px;
}

.pricing-eyebrow {
    display: none;
}

.pricing-hero-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px 24px;
    margin-top: 0;
}

.pricing-hero-copy h1 {
    max-width: 14ch;
    margin: 0 0 10px;
    font: 800 clamp(2rem, 3vw, 2.85rem)/1.02 var(--font-display);
    letter-spacing: -0.055em;
    text-wrap: balance;
}

.pricing-hero-copy p {
    max-width: 620px;
    font-size: 15px;
    line-height: 1.75;
}

.pricing-hero-copy h1 span {
    color: var(--primary-color);
    font-style: italic;
}

.pricing-hero-inline {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.pricing-tabs {
    gap: 10px;
}

.tab-link-new {
    min-width: 0;
    min-height: 48px;
    padding: 0 18px;
    border-radius: 16px;
    box-shadow: none;
    font-size: 14px;
}

.currency-pill {
    min-height: 48px;
    padding: 0 16px;
    border-radius: 16px;
}

.pricing-duration-bar {
    margin-top: 16px;
    padding-top: 16px;
}

.duration-tabs {
    grid-template-columns: repeat(3, minmax(96px, 118px));
}

.duration-tab {
    min-height: 46px;
    border-radius: 16px;
}

.pricing-hero-meta {
    gap: 10px;
}

.pricing-hero-meta span {
    min-height: 32px;
    padding: 0 12px;
    font-size: 12px;
}

.pricing-card {
    padding: 24px;
    border-radius: 26px;
    box-shadow: none;
}

.pricing-card::before {
    display: none;
}

.pricing-card.featured {
    transform: none;
    background: var(--card-bg);
}

.pricing-card-head h3 {
    font-size: clamp(1.7rem, 2.4vw, 2.35rem);
}

.pricing-card-head p {
    max-width: 32ch;
}

.pricing-card-tag,
.pricing-card-mini-tag {
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 11px;
}

.pricing-card-note {
    margin-top: 8px;
}

.pricing-tool-list {
    gap: 10px;
}

.pricing-card-actions {
    gap: 10px;
}

.pricing-btn {
    min-height: 48px;
    border-radius: 14px;
}

.custom-bundles-section .pricing-inline-label {
    margin-top: 2px;
}

@media (max-width: 991px) {
    .pricing-hero-copy {
        padding: 4px 0 10px;
    }

    .pricing-hero-head {
        grid-template-columns: 1fr;
    }

    .pricing-hero-inline {
        justify-content: flex-start;
    }

    .duration-tabs {
        grid-template-columns: repeat(3, minmax(88px, 1fr));
    }
}

/* Runtime refinement: centered pricing layout */
.pricing-hero-copy {
    text-align: center;
}

.pricing-hero-head {
    grid-template-columns: 1fr;
    justify-items: center;
}

.pricing-hero-copy h1,
.pricing-hero-copy p {
    margin-left: auto;
    margin-right: auto;
}

.pricing-hero-inline,
.pricing-tabs,
.pricing-hero-meta {
    justify-content: center;
}

.pricing-hero-stat-count,
.pricing-hero-stat-starting {
    display: none;
}

.pricing-duration-bar {
    flex-direction: column;
    align-items: center;
}

.duration-tabs {
    justify-content: center;
}

.plan-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
}

.plan-grid > .pricing-card.featured {
    order: 0;
    grid-column: auto;
}

.plan-grid > .pricing-card:not(.featured):first-of-type {
    order: 0;
}

.plan-grid > .pricing-card:not(.featured):not(:first-of-type) {
    order: 2;
}

@media (max-width: 1100px) {
    .plan-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .plan-grid > .pricing-card.featured {
        order: 0;
        grid-column: auto;
    }

    .plan-grid > .pricing-card:not(.featured):first-of-type,
    .plan-grid > .pricing-card:not(.featured):not(:first-of-type) {
        order: 0;
    }
}

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

/* Runtime refinement: compact single tools layout */
.filter-panel {
    padding: 18px 20px;
    margin-bottom: 24px;
}

.filter-bar {
    grid-template-columns: minmax(0, 1.45fr) repeat(2, minmax(170px, 0.9fr)) 132px;
    gap: 12px;
}

.filter-pill {
    min-height: 56px;
    padding: 0 16px;
    border-radius: 18px;
}

.filter-input,
.filter-select {
    font-size: 14px;
}

.product-grid {
    gap: 18px;
}

.pricing-tool-card {
    padding: 18px;
    border-radius: 24px;
}

.pricing-tool-media {
    aspect-ratio: 1 / 0.76;
    margin-bottom: 16px;
    border-radius: 18px;
}

.pricing-tool-meta {
    margin-bottom: 10px;
    gap: 10px;
}

.pricing-tool-card .pricing-card-head h3 {
    font-size: 20px;
}

.pricing-tool-card .pricing-card-head p {
    font-size: 13px;
    line-height: 1.6;
}

.pricing-tool-card .pricing-card-price strong {
    font-size: clamp(1.8rem, 2.5vw, 2.15rem);
}

.pricing-tool-card .pricing-card-actions {
    padding-top: 18px;
}

.pricing-tool-card .pricing-btn {
    min-height: 46px;
}

@media (max-width: 1180px) {
    .filter-bar {
        grid-template-columns: minmax(0, 1fr) repeat(2, minmax(160px, 0.9fr)) 120px;
    }
}

/* Runtime refinement: stronger compact single tools sizing */
.pricing-section--compact .filter-panel {
    max-width: 1120px;
    margin: 0 auto 20px;
    padding: 16px 18px;
    border-radius: 24px;
}

.pricing-section--compact .filter-bar {
    grid-template-columns: minmax(260px, 1.35fr) repeat(2, minmax(145px, 0.82fr)) 118px;
    gap: 10px;
    align-items: center;
}

.pricing-section--compact .filter-pill {
    min-height: 52px;
    padding: 0 14px;
    border-radius: 16px;
}

.pricing-section--compact .filter-submit {
    min-width: 118px;
}

.pricing-section--compact .product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}

.pricing-section--compact .pricing-tool-card {
    padding: 16px;
    border-radius: 22px;
}

.pricing-section--compact .pricing-tool-media {
    aspect-ratio: 1 / 0.62;
    margin-bottom: 14px;
    border-radius: 16px;
}

.pricing-section--compact .pricing-tool-meta {
    margin-bottom: 8px;
    gap: 8px;
}

.pricing-section--compact .pricing-card-head h3 {
    font-size: 17px;
}

.pricing-section--compact .pricing-card-head p {
    font-size: 12px;
    line-height: 1.55;
}

.pricing-section--compact .pricing-card-price {
    gap: 8px;
    margin-top: 16px;
}

.pricing-section--compact .pricing-card-price strong {
    font-size: clamp(1.55rem, 2vw, 1.95rem);
}

.pricing-section--compact .pricing-card-note {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.55;
}

.pricing-section--compact .pricing-card-actions {
    gap: 10px;
    padding-top: 14px;
}

.pricing-section--compact .pricing-action-form {
    display: contents;
}

.pricing-section--compact .pricing-btn {
    min-height: 42px;
    padding: 0 18px;
    border-radius: 14px;
    font-size: 14px;
}

.pricing-section--compact .pricing-btn-fill {
    width: 100%;
}

@media (max-width: 1400px) {
    .pricing-section--compact .product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1180px) {
    .pricing-section--compact .filter-bar {
        grid-template-columns: minmax(0, 1fr) repeat(2, minmax(150px, 0.85fr));
    }

    .pricing-section--compact .filter-submit {
        grid-column: 1 / -1;
        width: 100%;
    }
}

@media (max-width: 900px) {
    .pricing-section--compact .product-grid,
    .pricing-section--compact .filter-bar {
        grid-template-columns: 1fr;
    }
}

/* Runtime refinement: consistent page header spacing */
.app-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 22px 28px;
    padding: 22px 26px;
    margin-bottom: 30px;
    min-height: 112px;
}

.header-title {
    gap: 10px;
    flex: 1 1 520px;
    align-content: start;
}

.header-title h1 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    margin: 0;
    line-height: 0.98;
}

.header-title h1 span,
.header-chip {
    min-height: 40px;
    padding: 0 16px;
    font-size: 0.58em;
}

.header-title p,
.header-subtitle,
.page-note {
    margin: 0;
    max-width: 720px;
    font-size: 15px;
    line-height: 1.68;
}

.header-actions {
    gap: 14px 16px;
    align-self: center;
}

.header-tools {
    gap: 10px;
}

.header-currency-select,
.btn-logout,
.header-icon-link {
    min-height: 52px;
}

.header-currency-select {
    min-width: 118px;
    padding: 0 16px;
    border-radius: 16px;
}

.header-icon-link {
    width: 52px;
    height: 52px;
    border-radius: 18px;
}

.btn-logout {
    padding: 0 22px;
    border-radius: 18px;
}

@media (max-width: 1080px) {
    .app-page-header {
        padding: 20px 22px;
        gap: 18px;
    }

    .header-actions {
        width: 100%;
        justify-content: space-between;
    }
}

@media (max-width: 720px) {
    .app-page-header {
        padding: 18px;
        gap: 16px;
        min-height: auto;
    }

    .header-title h1 {
        gap: 8px 10px;
    }

    .header-title h1 span,
    .header-chip {
        min-height: 36px;
        padding: 0 14px;
    }

    .header-actions,
    .header-tools {
        width: 100%;
        justify-content: flex-start;
    }

    .btn-logout {
        min-width: 140px;
    }
}

/* Runtime refinement: custom bundle page */
.custom-bundle-page {
    padding-bottom: 140px;
}

.custom-bundle-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 30px 32px;
    margin-bottom: 28px;
}

.custom-bundle-hero-copy {
    display: grid;
    gap: 12px;
    max-width: 720px;
}

.custom-bundle-hero-copy h1 {
    margin: 0;
    font: 800 clamp(2rem, 4vw, 3rem)/1.02 var(--font-display);
    letter-spacing: -0.05em;
    color: var(--text-main);
}

.custom-bundle-hero-copy p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-muted);
}

.custom-bundle-counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 18px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--primary-color) 10%, var(--card-bg));
    color: var(--text-main);
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
}

.custom-bundle-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    padding: 16px 18px;
    border-radius: var(--radius-lg);
    font-weight: 700;
}

.custom-bundle-alert-error {
    background: #fee2e2;
    color: #b91c1c;
}

.custom-bundle-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.select-card {
    position: relative;
    display: block;
    cursor: pointer;
}

.select-card input {
    display: none;
}

.select-card-ui {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    min-height: 100%;
    padding: 22px 20px 24px;
    background: color-mix(in srgb, var(--card-bg) 96%, white 4%);
    border: 1px solid var(--border-color);
    border-radius: 28px;
    box-shadow: var(--shadow);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.select-card:hover .select-card-ui {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--primary-color) 22%, var(--border-color));
    box-shadow: var(--shadow-lg);
}

.select-card input:checked + .select-card-ui {
    border-color: color-mix(in srgb, var(--primary-color) 35%, var(--border-color));
    background: color-mix(in srgb, var(--primary-color) 6%, var(--card-bg));
    box-shadow: 0 18px 38px color-mix(in srgb, var(--primary-color) 14%, transparent);
}

.check-icon {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--border-color) 72%, white 28%);
    color: transparent;
    transition: all 0.2s ease;
}

.select-card input:checked + .select-card-ui .check-icon {
    background: var(--primary-color);
    color: var(--button-primary-text, #ffffff);
}

.tool-icon-circle {
    width: 84px;
    height: 84px;
    margin-bottom: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-color) 88%, white 12%);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.tool-icon-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.custom-bundle-card-title {
    margin: 0;
    font-size: 18px;
    line-height: 1.2;
    color: var(--text-main);
}

.custom-bundle-card-copy {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.custom-bundle-footer {
    position: sticky;
    bottom: 20px;
    z-index: 20;
    margin-top: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 22px;
    border: 1px solid var(--border-color);
    border-radius: 26px;
    background: color-mix(in srgb, var(--card-bg) 90%, white 10%);
    backdrop-filter: blur(14px);
    box-shadow: var(--shadow-lg);
}

.custom-bundle-footer-price {
    display: grid;
    gap: 4px;
}

.custom-bundle-footer-label {
    color: var(--text-light);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.custom-bundle-footer-amount {
    color: var(--text-main);
    font-size: clamp(1.7rem, 3vw, 2.2rem);
    font-weight: 900;
    letter-spacing: -0.05em;
}

.custom-bundle-footer-amount span {
    color: var(--text-muted);
    font-size: 0.55em;
    font-weight: 700;
}

.custom-bundle-footer-note {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 700;
}

.custom-bundle-submit {
    width: min(340px, 100%);
    min-width: 240px;
    min-height: 56px;
    margin-left: auto;
    padding: 0 28px;
    border-radius: 18px;
    border: 1px solid transparent;
    background: color-mix(in srgb, var(--primary-color) 22%, white 78%);
    color: rgba(36, 25, 20, 0.56);
    box-shadow: none;
    opacity: 1;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.custom-bundle-submit:disabled {
    cursor: not-allowed;
}

.custom-bundle-submit.is-ready {
    background: linear-gradient(135deg, #f05a30, #f59e42);
    color: #ffffff;
    box-shadow: 0 18px 34px rgba(240, 90, 48, 0.24);
}

.custom-bundle-submit.is-ready:hover {
    transform: translateY(-2px);
}

@media (max-width: 1280px) {
    .custom-bundle-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 960px) {
    .custom-bundle-hero,
    .custom-bundle-footer {
        flex-direction: column;
        align-items: stretch;
    }

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

    .custom-bundle-counter {
        width: fit-content;
    }

    .custom-bundle-submit {
        width: 100%;
        min-width: 0;
        margin-left: 0;
    }
}

@media (max-width: 640px) {
    .custom-bundle-hero {
        padding: 22px 18px;
    }

    .custom-bundle-grid {
        grid-template-columns: 1fr;
    }

    .select-card-ui {
        padding: 20px 18px 22px;
    }

    .custom-bundle-footer {
        bottom: 12px;
        padding: 16px;
    }
}