/* Iconify Fluent Icon Base Support */
iconify-icon {
    display: inline-block;
    vertical-align: middle;
    width: 1em;
    height: 1em;
}

.btn-icon iconify-icon {
    width: 1rem;
    height: 1rem;
}

#downtimeCompensationModal .modal-close-btn {
            display: none;
        }

        .swal2-container {
            z-index: 1600 !important;
        }

        .swal2-toast {
            max-width: 80vw !important;
        }

        @keyframes glow {
            0% {
                box-shadow: 0 0 5px rgba(var(--accent-primary-rgb), 0.2);
            }

            50% {
                box-shadow: 0 0 20px rgba(var(--accent-primary-rgb), 0.4);
            }

            100% {
                box-shadow: 0 0 5px rgba(var(--accent-primary-rgb), 0.2);
            }
        }

        .font-minecraft {
            font-family: 'Press Start 2P', cursive;
        }

        .antialiased {
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        body {
            scrollbar-width: thin;
            scrollbar-color: var(--border-color) transparent;
            background-color: var(--bg-primary);
            color: var(--text-main);
            font-family: 'Google Sans', 'Sarabun', sans-serif;
            overflow-x: hidden;
            background-image: radial-gradient(circle at 1% 1%, rgba(var(--accent-primary-rgb), 0.08), transparent 30%),
                radial-gradient(circle at 99% 99%, rgba(168, 85, 247, 0.08), transparent 40%);
            background-attachment: fixed;
        }

        .navigation-bar {
            background-color: var(--glass-bg-primary);
            border-bottom: 1px solid var(--glass-border);
            height: var(--top-nav-height);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1050;
            display: none;
        }

        .main-content-wrapper {
            display: flex;
            height: 100vh;
            width: 100vw;
        }

        /* --- FIX START: Hide desktop toggle on mobile --- */
        #desktop-sidebar-show-btn {
            display: none;
        }

        /* --- FIX END --- */
        /* Desktop Sidebar Collapse Logic */
        @media (min-width: 1025px) {
            body.sidebar-collapsed #dashboardSidebar {
                transform: translateX(-100%);
            }

            body.sidebar-collapsed #dashboardContent {
                margin-left: 0;
                padding-left: 6rem;
            }

            /* Floating toggle button (visible when collapsed) */
            #desktop-sidebar-show-btn {
                display: flex;
                position: fixed;
                top: 1.15rem;
                left: 1.5rem;
                z-index: 100;
                opacity: 0;
                pointer-events: none;
                transform: translateX(-20px);
                transition: all 0.3s ease-in-out;
                width: 40px;
                height: 40px;
                align-items: center;
                justify-content: center;
            }

            body.sidebar-collapsed #desktop-sidebar-show-btn {
                opacity: 1;
                pointer-events: auto;
                transform: translateX(0);
            }
        }

        /* Sidebar Toggle Button (inside sidebar) */
        .sidebar-toggle-btn {
            color: var(--text-muted);
            background: transparent;
            border: 1px solid var(--glass-border);
            border-radius: 0.5rem;
            padding: 0.25rem;
            cursor: pointer;
            transition: all 0.2s;
            display: none;
        }

        @media (min-width: 1025px) {
            .sidebar-toggle-btn {
                display: flex;
            }
        }

        .sidebar-toggle-btn:hover {
            color: var(--text-heading);
            background-color: var(--bg-secondary);
            border-color: var(--text-muted);
        }

        /* Flex adjustment for header to accommodate the button */
        .sidebar-header {
            padding: 0 0.5rem 1.5rem 0.5rem;
            border-bottom: none;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        #initial-loading {
            background-color: var(--glass-bg-primary);
            backdrop-filter: blur(100px);
            -webkit-backdrop-filter: blur(100px);
            transition: all 0.7s ease-in-out;
        }

        #mobile-sidebar-overlay {
            transition: opacity 0.3s ease-in-out;
            z-index: 2999 !important;
        }

        .sidebar-legal-links {
            text-align: center;
            font-size: 0.8rem;
            padding-bottom: 0.75rem;
        }

        .user-label-box {
            background-color: var(--bg-secondary);
            padding: 0.2rem 0.6rem;
            border-radius: 0.25rem;
            font-size: 0.75rem;
            font-weight: 500;
            color: var(--text-muted);
            border: 1px solid var(--border-subtle);
            line-height: 1.2;
        }

        .user-name-text {
            font-weight: 600;
            color: var(--text-heading);
            font-size: 0.95rem;
        }

        .sidebar-legal-links a {
            color: var(--text-muted);
            text-decoration: none;
            transition: color 0.2s ease;
        }

        .sidebar-legal-links a:hover {
            color: var(--text-main);
            text-decoration: underline;
        }

        .sidebar-legal-links span {
            margin: 0 0.5rem;
            color: var(--text-muted);
        }

        .sidebar-logo-text {
            font-size: 1.1rem;
            color: var(--text-heading);
            letter-spacing: -1px;
            text-decoration: none;
            transition: color 0.2s;
        }

        .sidebar-logo-text:hover {
            color: var(--accent-primary);
        }

        .user-profile-widget {
            padding: 1.5rem 0.5rem;
            border-bottom: 1px solid var(--glass-border);
        }

        .user-profile-widget .username {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            background-color: var(--bg-tertiary);
            padding: 0.5rem 0.75rem;
            border-radius: 0.5rem;
            border: 1px solid var(--glass-border-subtle);
            margin-bottom: 0.75rem;
            font-weight: 600;
            color: var(--text-heading);
            font-size: 0.95rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .credit-balance-display {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: var(--bg-tertiary);
            padding: 0.5rem 0.75rem;
            border-radius: 0.5rem;
            margin-top: 0.75rem;
            border: 1px solid var(--glass-border-subtle);
        }

        .credit-balance-display .label {
            font-size: 0.8rem;
            color: var(--text-muted);
        }

        .credit-balance-display .amount {
            font-weight: 700;
            color: var(--price-color);
            font-size: 1rem;
        }

        #dashboardSidebarNav {
            flex-grow: 1;
            margin-top: 1rem;
            padding-bottom: 2rem;
        }

        /* REMOVED: #active-indicator styles */
        .dashboard-nav-link {
            display: flex;
            align-items: center;
            gap: 0.875rem;
            padding: 0.65rem 1rem;
            margin: 0.25rem 0;
            border-radius: 0.5rem;
            color: var(--text-muted);
            font-weight: 500;
            transition: all 0.2s ease;
            text-decoration: none;
            border: 1px solid transparent;
            cursor: pointer;
        }

        .dashboard-nav-link:hover {
            color: var(--text-heading);
            background-color: var(--glass-bg-secondary);
        }

        /* Direct Active State */
        .dashboard-nav-link.active {
            background-color: var(--accent-primary);
            color: white;
            box-shadow: var(--accent-glow);
            border-color: rgba(255, 255, 255, 0.1);
        }

        /* Sidebar Dropdown Styles */
        .sidebar-submenu {
            overflow: hidden;
            max-height: 0;
            transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .sidebar-submenu.open {
            max-height: 200px;
        }

        .submenu-link {
            display: flex;
            align-items: center;
            padding: 0.5rem 1rem 0.5rem 3.25rem;
            font-size: 0.85rem;
            color: var(--text-muted);
            font-weight: 500;
            transition: all 0.2s;
            text-decoration: none;
            cursor: pointer;
            border-radius: 0.5rem;
            margin: 0.1rem 0;
        }

        .submenu-link:hover {
            color: var(--text-heading);
            background-color: var(--glass-bg-secondary);
        }

        /* Direct Submenu Active State */
        .submenu-link.active {
            color: white;
            background-color: rgba(var(--accent-primary-rgb), 0.15);
            border-left: 3px solid var(--accent-primary);
            border-radius: 0 0.5rem 0.5rem 0;
        }

        .submenu-arrow {
            transition: transform 0.3s ease;
        }

        .has-submenu.expanded .submenu-arrow {
            transform: rotate(180deg);
        }

        .sidebar-footer {
            margin-top: auto;
            padding-top: 1rem;
            border-top: 1px solid var(--glass-border);
        }

        #sidebarLogoutBtn {
            width: 100%;
        }

        @keyframes toast-bubble-in {
            from {
                transform: scale(0);
                opacity: 0;
            }

            to {
                transform: scale(1);
                opacity: 1;
            }
        }

        .toast-bubble-animate-in {
            animation: toast-bubble-in 0.5s cubic-bezier(0.34, 1.2, 0.64, 1);
        }

        @keyframes toast-bubble-out {
            from {
                transform: scale(1);
                opacity: 1;
            }

            to {
                transform: scale(0);
                opacity: 0;
            }
        }

        .toast-bubble-animate-out {
            animation: toast-bubble-out 0.5s cubic-bezier(0.34, 1.2, 0.64, 1);
        }

        .dashboard-panel {
            display: none;
            visibility: hidden;
            opacity: 0;
            transition: opacity 0.4s ease, visibility 0.4s ease;
        }

        .dashboard-panel.active {
            display: block;
            visibility: visible;
            opacity: 1;
        }

        .panel-title {
            font-size: 1.75rem;
            font-weight: 700;
            color: var(--text-heading);
            margin-bottom: 1.5rem;
            border-bottom: 1px solid var(--glass-border);
            padding-bottom: 1rem;
        }

        .panel-section-title {
            font-size: 1.125rem;
            font-weight: 600;
            color: var(--text-heading);
            margin-bottom: 1rem;
        }

        .btn-bubble {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            padding: 0.5rem 1rem;
            border-radius: 9999px;
            font-weight: 500;
            border: 1px solid var(--border-color);
            background-color: var(--bg-tertiary);
            color: var(--text-main);
            transition: all 0.2s ease;
            cursor: pointer;
        }

        .btn-bubble:hover {
            border-color: var(--text-muted);
            color: var(--text-heading);
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        }

        .btn-bubble:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

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

        .btn-bubble.btn-bubble-primary:hover {
            background-color: var(--accent-primary-hover);
            border-color: var(--accent-primary-hover);
            box-shadow: var(--accent-glow);
        }

        .btn-bubble.btn-bubble-danger {
            background-color: var(--danger-color);
            border-color: var(--danger-color);
            color: white;
        }

        .btn-bubble.btn-bubble-warning {
            background-color: var(--warning-color);
            border-color: var(--warning-color);
            color: #101012;
        }

        .btn-bubble.btn-bubble-success {
            background-color: var(--success-color);
            border-color: var(--success-color);
            color: white;
        }

        .btn-bubble-danger:hover {
            background-color: #d03434;
            border-color: #d03434;
            box-shadow: 0 0 15px rgba(239, 68, 68, 0.4);
        }

        .btn-bubble-warning:hover {
            background-color: #d4870a;
            border-color: #d4870a;
            box-shadow: 0 0 15px rgba(245, 158, 11, 0.4);
        }

        .btn-bubble-success:hover {
            background-color: #1a9e4a;
            border-color: #1a9e4a;
            box-shadow: 0 0 15px rgba(34, 197, 94, 0.4);
        }

        .btn-bubble.btn-bubble-secondary {
            background-color: var(--accent-secondary);
            border-color: var(--accent-secondary);
            color: white;
        }

        .btn-bubble-secondary:hover {
            background-color: #9333ea;
            border-color: #9333ea;
            box-shadow: 0 0 15px rgba(168, 85, 247, 0.4);
        }

        .btn-bubble.btn-autorenew-disabled {
            background-color: transparent;
            border-color: var(--accent-primary);
            color: var(--accent-primary);
        }

        .btn-bubble.btn-autorenew-disabled:hover {
            background-color: rgba(var(--accent-primary-rgb), 0.1);
            color: var(--accent-primary-hover);
            border-color: var(--accent-primary-hover);
        }

        .btn-icon {
            background: transparent;
            border: none;
            padding: 0.25rem;
            border-radius: 50%;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            transition: background-color 0.2s ease, transform 0.2s ease;
        }

        .btn-icon:hover {
            background-color: var(--bg-tertiary);
            transform: scale(1.1);
        }

        .btn-icon iconify-icon, .btn-icon iconify-icon {
            width: 16px;
            height: 16px;
        }

        .form-control {
            width: 100%;
            background-color: var(--glass-bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 0.375rem;
            padding: 0.625rem 0.875rem;
            color: var(--text-main);
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
            box-sizing: border-box;
            margin: 0 auto;
        }

        .form-control:focus {
            outline: none;
            border-color: var(--accent-primary);
            box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb), 0.2), inset 0 0 5px rgba(var(--accent-primary-rgb), 0.1);
        }

        .form-group {
            margin-bottom: 1rem;
        }

        .form-label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
            font-size: 0.875rem;
        }

        .form-error {
            color: var(--danger-color);
            font-size: 0.8rem;
            margin-top: 0.5rem;
            min-height: 1.25rem;
        }

        .form-inline {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
            align-items: flex-end;
        }

        .form-inline .form-group {
            flex: 1 1 auto;
            margin-bottom: 0;
        }

        /* General styles for all purchase option buttons */
        .purchase-step-option {
            display: flex;
            align-items: center;
            gap: 0.875rem;
            padding: 1rem 1.25rem;
            border: 1px solid var(--border-color);
            border-radius: 0.75rem;
            background-color: var(--glass-bg-secondary);
            backdrop-filter: blur(5px);
            transition: all 0.2s ease;
            cursor: pointer;
            font-weight: 500;
            text-align: left;
            width: 100%;
        }

        .purchase-step-option:hover {
            border-color: var(--accent-primary);
            background-color: var(--bg-tertiary);
        }

        .purchase-step-option.active {
            border-color: var(--accent-primary);
            border-width: 2px;
            background-color: rgba(var(--accent-primary-rgb), 0.1);
            color: var(--text-heading);
            padding: calc(1rem - 1px) calc(1.25rem - 1px);
        }

        .purchase-step-option svg,
        .purchase-step-option img,
        .purchase-step-option iconify-icon, .purchase-step-option iconify-icon {
            width: 24px;
            height: 24px;
            color: var(--text-muted);
            transition: color 0.2s ease;
            flex-shrink: 0;
        }

        .purchase-step-option.active svg,
        .purchase-step-option.active iconify-icon, .active iconify-icon {
            color: var(--accent-primary);
        }

        /* Specific overrides for the redesigned Service Type selection */
        #service-category-options .purchase-step-option {
            flex-direction: row;
            align-items: flex-start;
            gap: 1rem;
            padding: 1.5rem;
        }

        #service-category-options .purchase-step-option.active {
            padding: calc(1.5rem - 1px);
        }

        #service-category-options .purchase-step-option iconify-icon, .purchase-step-option iconify-icon {
            margin-top: 0.125rem;
        }

        /* New classes for the title and description inside the card */
        .purchase-option-text-content {
            display: flex;
            flex-direction: column;
        }

        .purchase-option-title {
            font-weight: 600;
            font-size: 1rem;
            color: var(--text-heading);
        }

        .purchase-option-description {
            font-size: 0.875rem;
            color: var(--text-muted);
            margin-top: 0.25rem;
        }

        /* Style adjustment for the "Select Service Type" title to match the image */
        #purchasePanel .panel-section-title {
            font-size: 1.25rem;
            font-weight: 600;
        }

        .billing-period-button {
            justify-content: center;
            text-align: center;
            flex-direction: column;
            gap: 0.5rem;
            padding: 1.5rem 1rem;
            height: 100%;
        }

        .billing-period-button .period-label {
            font-weight: 600;
            font-size: 1.1rem;
        }

        .billing-period-button .period-price {
            font-size: 0.9rem;
            color: var(--text-muted);
        }

        .plans-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.5rem;
        }

        .plan-card {
            background-color: var(--glass-bg-secondary);
            border: 1px solid var(--glass-border);
            backdrop-filter: blur(5px);
            border-radius: 0.75rem;
            padding: 1.5rem;
            display: flex;
            flex-direction: column;
            transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
        }

        .plan-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
            border-color: var(--border-color);
        }

        .plan-card.active-plan {
            border-color: var(--accent-primary);
            transform: translateY(-6px);
            box-shadow: 0 0 0 3px var(--accent-primary), 0 10px 25px rgba(0, 0, 0, 0.3);
        }

        .plan-card h3 {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--text-heading);
        }

        .plan-card .plan-category {
            font-size: 0.8rem;
            color: var(--text-muted);
            margin-bottom: 1rem;
            display: block;
        }

        .plan-specs {
            list-style: none;
            padding: 0;
            margin: 0 0 1.5rem 0;
            flex-grow: 1;
        }

        .plan-specs li {
            display: flex;
            align-items: center;
            gap: 0.875rem;
            margin-bottom: 0.75rem;
            font-size: 0.9rem;
        }

        .plan-specs svg {
            color: var(--text-muted);
            width: 18px;
            height: 18px;
            flex-shrink: 0;
        }

        .plan-footer {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 1rem;
            border-top: 1px solid var(--glass-border);
            padding-top: 1rem;
            margin-top: auto;
        }

        .plan-price {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--price-color);
        }

        .plan-price .term {
            font-size: 0.875rem;
            font-weight: 400;
            color: var(--text-muted);
        }

        .plan-pricing-options {
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-wrap: wrap;
            width: 100%;
        }

        .pricing-box {
            background-color: var(--glass-bg-secondary);
            border: 1px solid var(--glass-border-subtle);
            border-radius: 0.5rem;
            padding: 0.75rem;
            width: 100%;
            box-sizing: border-box;
        }

        .plan-price-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            line-height: 1.2;
            padding: 0 0.25rem;
        }

        .plan-price-item .price-value {
            font-size: 1.15rem;
            font-weight: 700;
            color: var(--price-color);
        }

        .plan-price-item .price-period {
            font-size: 0.7rem;
            font-weight: 500;
            color: var(--text-muted);
            text-transform: uppercase;
        }

        .service-list {
            list-style: none;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .service-list-item {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            background-color: var(--glass-bg-secondary);
            backdrop-filter: blur(5px);
            border: 1px solid var(--glass-border);
            padding: 1rem 1.5rem;
            border-radius: 0.75rem;
            transition: all 0.25s ease;
            gap: 1rem;
        }

        .service-list-item:hover {
            background-color: var(--bg-tertiary);
            border-color: var(--border-color);
            transform: scale(1.01);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        .service-item-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.5rem 1rem;
        }

        .service-item-main-info {
            flex-grow: 1;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .service-item-actions {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-left: auto;
        }

        .service-info-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 1rem;
        }

        .service-details-box,
        .service-price-box {
            background-color: var(--glass-bg-primary);
            border: 1px solid var(--glass-border-subtle);
            padding: 1rem;
            border-radius: 0.5rem;
            font-size: 0.875rem;
            color: var(--text-muted);
        }

        .service-details-box ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        .service-details-box li {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .service-details-box .detail-label {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .service-details-box .detail-value {
            font-weight: 500;
            color: var(--text-main);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .service-price-box {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
        }

        .service-price-box .price-label {
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 0.25rem;
        }

        .service-price-box .price-value {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--price-color);
            line-height: 1;
        }

        .service-price-box .price-term {
            font-size: 0.75rem;
            color: var(--text-muted);
        }

        .copy-btn-list {
            color: var(--text-muted);
            background: transparent;
            border: none;
            padding: 0.25rem;
            border-radius: 50%;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            transition: background-color 0.2s ease, transform 0.2s ease;
        }

        .copy-btn-list:hover {
            background-color: var(--bg-tertiary);
            transform: scale(1.1);
        }

        .copy-btn-list iconify-icon, .copy-btn-list iconify-icon {
            width: 14px;
            height: 14px;
        }

        .service-meta {
            margin-left: 0;
        }

        .service-actions {
            margin-left: auto;
        }

        .service-status-text {
            padding: 0.2rem 0.6rem;
            border-radius: 9999px;
            font-size: 0.8rem;
            font-weight: 500;
        }

        .service-status-text.status-online {
            background-color: var(--success-color);
            color: white;
        }

        .service-status-text.status-offline {
            background-color: var(--danger-color);
            color: white;
        }

        .service-status-text.status-pending {
            background-color: var(--info-color);
            color: white;
        }

        .service-status-text.status-suspended {
            background-color: var(--warning-color);
            color: #101012;
        }

        .service-status-text.status-error {
            background-color: var(--danger-color);
            color: white;
        }

        .service-status-indicator {
            width: 8px;
            height: 8px;
            border-radius: 50%;
        }

        .status-online {
            background-color: var(--success-color);
            box-shadow: 0 0 8px var(--success-color);
        }

        .status-offline {
            background-color: var(--danger-color);
            box-shadow: 0 0 8px var(--danger-color);
        }

        .status-pending {
            background-color: var(--info-color);
            animation: pulse 1.5s infinite;
            box-shadow: 0 0 8px var(--info-color);
        }

        .status-suspended {
            background-color: var(--warning-color);
            box-shadow: 0 0 8px var(--warning-color);
        }

        .status-error {
            background-color: var(--danger-color);
            animation: pulse 1.5s infinite;
            box-shadow: 0 0 8px var(--danger-color);
        }

        @keyframes pulse {

            0%,
            100% {
                opacity: 1;
                transform: scale(1);
            }

            50% {
                opacity: 0.6;
                transform: scale(0.9);
            }
        }

        .vps-detail-item {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1rem;
            background-color: var(--glass-bg-secondary);
            border-radius: 0.5rem;
            border: 1px solid var(--glass-border);
        }

        .vps-detail-item iconify-icon, .vps-detail-item iconify-icon {
            width: 24px;
            height: 24px;
            color: var(--text-muted);
            flex-shrink: 0;
        }

        .vps-detail-item strong {
            display: block;
            font-size: 0.8rem;
            color: var(--text-muted);
            font-weight: 500;
        }

        .vps-detail-item .detail-text {
            font-weight: 600;
            color: var(--text-heading);
        }

        .vps-detail-item--os-windows {
            background: linear-gradient(45deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.05));
            border-color: rgba(59, 130, 246, 0.4);
        }

        .vps-detail-item--os-windows iconify-icon, .vps-detail-item--os-windows iconify-icon,
        .vps-detail-item--os-windows strong,
        .vps-detail-item--os-windows .detail-text {
            color: #a7c5f8;
        }

        .vps-detail-item--os-windows iconify-icon, .vps-detail-item--os-windows iconify-icon {
            color: var(--accent-primary);
        }

        .vps-status-pill {
            padding: 0.25rem 0.75rem;
            border-radius: 9999px;
            font-weight: 600;
            font-size: 0.9rem;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .vps-status-pill.status-online {
            background-color: var(--success-color);
            color: white;
            box-shadow: 0 0 10px var(--success-color);
        }

        .vps-status-pill.status-offline {
            background-color: var(--danger-color);
            color: white;
            box-shadow: 0 0 10px var(--danger-color);
        }

        .vps-status-pill.status-pending {
            background-color: var(--info-color);
            color: white;
            box-shadow: 0 0 10px var(--info-color);
        }

        .vps-status-pill.status-suspended {
            background-color: var(--warning-color);
            color: #101012;
            box-shadow: 0 0 10px var(--warning-color);
        }

        .vps-status-pill.status-error {
            background-color: var(--danger-color);
            color: white;
            box-shadow: 0 0 10px var(--danger-color);
        }

        .vps-controls {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
            margin-top: 2rem;
            margin-bottom: 2rem;
        }

        .vps-controls .btn-bubble {
            flex: 1 1 180px;
            padding: 0.75rem 1.25rem;
            border-radius: 0.75rem;
            font-weight: 600;
            font-size: 0.9rem;
            background-color: var(--glass-bg-secondary);
            border: 1px solid var(--glass-border);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            color: var(--text-main);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.03);
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            text-align: center;
        }

        .vps-controls .btn-bubble:hover:not(:disabled) {
            background-color: var(--glass-bg-primary);
            border-color: var(--border-color);
            color: var(--text-heading);
            transform: translateY(-3px);
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.05);
        }

        .vps-controls .btn-bubble:active:not(:disabled) {
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.05);
        }

        .vps-controls .btn-bubble:disabled {
            opacity: 0.5;
            background-color: var(--glass-bg-secondary);
            border-color: var(--glass-border);
        }

        /* --- Glassmorphic Color Variations --- */
        /* Generic button hover for light theme */
        body[data-theme="light"] .vps-controls .btn-bubble:hover:not(:disabled) {
            color: var(--text-heading);
        }

        /* Success */
        .vps-controls .btn-bubble.btn-bubble-success {
            color: var(--success-color);
            border-color: rgba(var(--success-rgb), 0.4);
            background-color: rgba(var(--success-rgb), 0.1);
            text-shadow: 0 0 8px rgba(var(--success-rgb), 0.2);
        }

        .vps-controls .btn-bubble.btn-bubble-success:hover:not(:disabled) {
            background-color: rgba(var(--success-rgb), 0.2);
            border-color: var(--success-color);
            color: white;
            box-shadow: 0 6px 18px rgba(var(--success-rgb), 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.1);
        }

        body[data-theme="light"] .vps-controls .btn-bubble.btn-bubble-success:hover:not(:disabled) {
            color: var(--bg-primary);
        }

        /* Danger */
        .vps-controls .btn-bubble.btn-bubble-danger {
            color: var(--danger-color);
            border-color: rgba(var(--danger-rgb), 0.4);
            background-color: rgba(var(--danger-rgb), 0.1);
            text-shadow: 0 0 8px rgba(var(--danger-rgb), 0.2);
        }

        .vps-controls .btn-bubble.btn-bubble-danger:hover:not(:disabled) {
            background-color: rgba(var(--danger-rgb), 0.2);
            border-color: var(--danger-color);
            color: white;
            box-shadow: 0 6px 18px rgba(var(--danger-rgb), 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.1);
        }

        /* Warning */
        .vps-controls .btn-bubble.btn-bubble-warning {
            color: var(--warning-color);
            border-color: rgba(var(--warning-rgb), 0.4);
            background-color: rgba(var(--warning-rgb), 0.1);
            text-shadow: 0 0 8px rgba(var(--warning-rgb), 0.2);
        }

        .vps-controls .btn-bubble.btn-bubble-warning:hover:not(:disabled) {
            background-color: rgba(var(--warning-rgb), 0.2);
            border-color: var(--warning-color);
            color: white;
            box-shadow: 0 6px 18px rgba(var(--warning-rgb), 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.1);
        }

        /* Secondary */
        .vps-controls .btn-bubble.btn-bubble-secondary {
            color: var(--accent-secondary);
            border-color: rgba(var(--accent-secondary-rgb), 0.4);
            background-color: rgba(var(--accent-secondary-rgb), 0.1);
            text-shadow: 0 0 8px rgba(var(--accent-secondary-rgb), 0.2);
        }

        .vps-controls .btn-bubble.btn-bubble-secondary:hover:not(:disabled) {
            background-color: rgba(var(--accent-secondary-rgb), 0.2);
            border-color: var(--accent-secondary);
            color: white;
            box-shadow: 0 6px 18px rgba(var(--accent-secondary-rgb), 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.1);
        }

        /* Primary (Used for active Auto-Renew) */
        .vps-controls .btn-bubble.btn-bubble-primary {
            color: white;
            background-color: var(--accent-primary);
            border-color: var(--accent-primary-hover);
            box-shadow: var(--accent-glow);
        }

        .vps-controls .btn-bubble.btn-bubble-primary:hover:not(:disabled) {
            background-color: var(--accent-primary-hover);
            box-shadow: 0 6px 18px rgba(var(--accent-primary-rgb), 0.4);
        }

        .destroy-section {
            margin-top: 2.5rem;
            padding: 1.5rem;
            border: 1px solid var(--danger-color);
            border-radius: 0.5rem;
            background-color: rgba(239, 68, 68, 0.05);
        }

        #default-creds-details {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 1rem;
        }

        .credential-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: var(--glass-bg-secondary);
            padding: 0.75rem 1rem;
            border-radius: 0.5rem;
            border: 1px solid var(--glass-border);
        }

        .credential-item .cred-info {
            display: flex;
            flex-direction: column;
        }

        .credential-item .cred-label {
            font-size: 0.8rem;
            color: var(--text-muted);
        }

        .credential-item .cred-value {
            font-family: monospace;
            font-weight: 600;
        }

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

        #slip-drop-zone {
            min-height: 160px;
            border: 2px dashed var(--border-color);
            transition: background-color 0.2s ease, border-color 0.2s ease;
        }

        #slip-drop-zone.drag-over {
            border-color: var(--accent-primary);
            background-color: rgba(var(--accent-primary-rgb), 0.1);
        }

        .modal-overlay {
            position: fixed;
            inset: 0;
            background-color: rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            z-index: 1500;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 0.4s ease;
        }

        .modal-overlay.is-visible {
            opacity: 1;
            visibility: visible;
        }

        .modal-content {
            background-color: var(--glass-bg-primary);
            border: 1px solid var(--glass-border);
            border-radius: 1rem;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
            padding: 2rem;
            width: 90%;
            max-width: 500px;
            position: relative;
            transform: scale(0.95) translateY(20px);
            transition: all 0.5s cubic-bezier(0.34, 1.15, 0.64, 1);
            max-height: 80vh;
            overflow-y: auto;
            scrollbar-width: thin;
            scrollbar-color: var(--border-color) transparent;
        }

        body[data-theme="light"] .modal-content {
            background-color: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border: 1px solid rgba(255, 255, 255, 1);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
                0 10px 10px -5px rgba(0, 0, 0, 0.04),
                0 0 0 1px rgba(0, 0, 0, 0.05);
            color: var(--text-main);
        }

        /* Ensure the Modal Title is sharp black in light mode */
        body[data-theme="light"] .modal-title {
            color: #09090b;
            text-shadow: none;
        }

        /* Improve Close Button visibility in light mode */
        body[data-theme="light"] .modal-close-btn {
            color: #71717a;
            background-color: rgba(0, 0, 0, 0.03);
            border-radius: 50%;
            padding: 4px;
            transition: all 0.2s ease;
        }

        body[data-theme="light"] .modal-close-btn:hover {
            background-color: rgba(0, 0, 0, 0.08);
            color: #000;
        }

        /* Fix input fields inside modals for light mode */
        body[data-theme="light"] .modal-content .form-control {
            background-color: #ffffff;
            border-color: #e4e4e7;
            color: #18181b;
        }

        body[data-theme="light"] .modal-content .form-control:focus {
            background-color: #ffffff;
            border-color: var(--accent-primary);
            box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb), 0.15);
        }

        /* Fix placeholders inside light mode modals */
        body[data-theme="light"] .modal-content .placeholder-text {
            color: #a1a1aa;
        }

        .modal-content::-webkit-scrollbar {
            width: 8px;
        }

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

        .modal-content::-webkit-scrollbar-thumb {
            background-color: var(--border-color);
            border-radius: 20px;
            border: 2px solid var(--glass-bg-primary);
            transition: background-color 0.2s ease-in-out;
        }

        .modal-content::-webkit-scrollbar-thumb:hover {
            background-color: var(--accent-primary);
        }

        .modal-overlay.is-visible .modal-content {
            transform: scale(1) translateY(0);
        }

        .modal-title {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--text-heading);
            margin-bottom: 1rem;
        }

        .modal-close-btn {
            position: absolute;
            top: 1rem;
            right: 1rem;
            color: var(--text-muted);
        }

        .payment-method-options {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
            margin-bottom: 1.5rem;
        }

        .payment-method-btn {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            padding: 0.75rem 1rem;
            border: 2px solid var(--border-color);
            border-radius: 9999px;
            transition: all 0.2s ease;
        }

        .payment-method-btn:hover {
            border-color: var(--text-muted);
            transform: translateY(-3px);
        }

        .payment-method-btn.active {
            border-color: var(--accent-primary);
            background-color: rgba(var(--accent-primary-rgb), 0.1);
            box-shadow: 0 0 0 3px var(--accent-primary);
        }

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

        th,
        td {
            padding: 0.75rem 1rem;
            text-align: left;
            border-bottom: 1px solid var(--glass-border);
        }

        thead {
            background-color: rgba(24, 24, 27, 0.5);
        }

        th {
            font-weight: 600;
            color: var(--text-heading);
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        tbody tr {
            transition: background-color 0.2s ease;
        }

        tbody tr:hover {
            background-color: var(--bg-tertiary);
        }

        .placeholder-text {
            text-align: center;
            padding: 2rem;
            color: var(--text-muted);
        }

        #verification-gating-banner {
            background-color: var(--warning-glass);
            border: 1px solid var(--warning-color);
            border-radius: 0.5rem;
            padding: 1rem;
            margin-bottom: 1.5rem;
        }

        @media (max-width: 1024px) {
            #dashboardSidebar {
                transform: translateX(-100%);
                z-index: 3000 !important;
            }

            #dashboardSidebar.is-open {
                transform: translateX(0);
                box-shadow: 10px 0 30px rgba(0, 0, 0, 0.5);
            }

            #dashboardContent {
                margin-left: 0;
                padding: calc(var(--top-nav-height) + 1.5rem) 1.5rem 1.5rem 1.5rem;
                width: 100%;
            }

            .navigation-bar {
                display: flex;
            }

            .service-actions {
                margin-left: 0;
            }

            .navbar-container {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                padding: 0 1.5rem;
            }

            .dashboard-header {
                padding: 0 1rem;
                justify-content: space-between;
                background-color: var(--bg-primary);
            }

            /* --- FIX START: Alignment & Animation --- */
            /* 1. Fix Text Centering */
            .header-service-status-text {
                font-size: 0.8rem;
                font-weight: 600;
                white-space: nowrap;
                line-height: 1;
                padding-top: 1px;
            }

            /* 2. ADD THESE NEW MOBILE STYLES to handle the shape change */
            @media (max-width: 768px) {

                /* Default State: Circle with Icon (No Services) */
                .m3-status-pill {
                    padding: 0;
                    width: 40px;
                    height: 40px;
                    justify-content: center;
                    align-items: center;
                    border-radius: 50%;
                }

                .m3-status-pill.mobile-active-pill {
                    width: auto;
                    padding: 0 16px;
                    border-radius: 50px;
                }

                /* Remove the specific margin-right we added in the previous step 
                since we are now using 'gap-3' in the HTML */
                .m3-status-indicator-dot {
                    margin-right: 0;
                }
            }

            /* 2. Fix Pill Layout & Height */
            .m3-status-pill {
                display: flex !important;
                align-items: center;
                justify-content: center;
                gap: 0.6rem;
                height: 44px;
                padding: 0 1.25rem;
                margin-left: 0.75rem;
                margin-right: auto;
                background-color: var(--glass-bg-secondary);
                border: 1px solid var(--glass-border);
                box-sizing: border-box;
            }

            /* 3. Remove Hover/Click Animations (Jump & Shadow) */
            .m3-status-pill:hover,
            .m3-status-pill:active,
            .m3-status-pill:focus {
                transform: none !important;
                box-shadow: none !important;
                background-color: var(--glass-bg-secondary);
                border-color: var(--glass-border);
            }

            /* Profile Button Consistency */
            .header-profile {
                height: 44px;
                display: flex;
                align-items: center;
                box-sizing: border-box;
            }

            /* --- FIX END --- */
            .navbar-logo-text {
                color: var(--text-heading);
                text-decoration: none;
                font-size: 1rem;
            }

            .nav-links-container {
                display: none;
            }

            .navbar-buttons-container button {
                color: var(--text-main);
                background: none;
                border: none;
            }

            #mobileNavLinks {
                display: none;
            }

            footer {
                padding: 1rem 1.5rem;
            }
        }

        @media (max-width: 768px) {
            .panel-title {
                font-size: 1.5rem;
            }

            #dashboardContent {
                padding: calc(var(--top-nav-height) + 1rem) 1rem 1rem 1rem;
            }

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

            .form-inline .form-group {
                width: 100%;
            }
        }

        .progress-bar-bg {
            background-color: var(--bg-tertiary);
            border-radius: 9999px;
            height: 8px;
            width: 100%;
            overflow: hidden;
            border: 1px solid var(--border-subtle);
        }

        .progress-bar-fg {
            height: 100%;
            border-radius: 9999px;
            transition: width 0.5s ease-in-out;
        }

        .progress-bar-cpu {
            background-color: var(--accent-primary);
        }

        .progress-bar-mem {
            background-color: var(--accent-secondary);
        }

        .service-status-text.status-unpaid {
            background-color: var(--warning-color);
            color: #101012;
        }

        .service-status-indicator.status-unpaid {
            background-color: var(--warning-color);
            box-shadow: 0 0 8px var(--warning-color);
        }

        .vps-status-pill.status-unpaid {
            background-color: var(--warning-color);
            color: #101012;
            box-shadow: 0 0 10px var(--warning-color);
        }

        .service-item-details-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 0.25rem 1.5rem;
            font-size: 0.875rem;
            color: var(--text-muted);
            padding: 0.5rem 0;
        }

        .service-item-details-list .detail-entry {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.5rem 0;
            border-bottom: 1px solid var(--glass-border-subtle);
        }

        .service-item-details-list .detail-label {
            display: flex;
            align-items: center;
            gap: 0.6rem;
        }

        .service-item-details-list .detail-value {
            font-weight: 500;
            color: var(--text-main);
            display: flex;
            align-items: center;
            gap: 0.5rem;
            text-align: right;
        }

        .service-item-details-list .detail-value.autorenew-on {
            color: var(--success-color);
        }

        .service-item-details-list .detail-value.autorenew-off {
            color: var(--text-muted);
        }

        .service-item-details-list .copy-btn-list {
            color: var(--text-muted);
            background: transparent;
            border: none;
            padding: 0.25rem;
            border-radius: 50%;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            transition: all 0.2s ease;
        }

        .service-item-details-list .copy-btn-list:hover {
            background-color: var(--bg-tertiary);
            transform: scale(1.1);
            color: var(--text-main);
        }

        .service-item-details-list .copy-btn-list iconify-icon, .copy-btn-list iconify-icon {
            width: 14px;
            height: 14px;
        }

        .service-item-footer {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
            padding-top: 1rem;
            margin-top: 0.5rem;
            border-top: 1px solid var(--glass-border);
        }

        .service-item-footer .manage-service-btn {
            flex-grow: 1;
            background-color: var(--accent-primary);
            border-color: var(--accent-primary);
            color: white;
            font-weight: 600;
            padding: 0.6rem 1.25rem;
            border-radius: 0.5rem;
            text-align: center;
            justify-content: center;
            transition: all 0.2s ease;
        }

        .service-item-footer .manage-service-btn:hover {
            background-color: var(--accent-primary-hover);
            border-color: var(--accent-primary-hover);
            box-shadow: var(--accent-glow);
            transform: translateY(-2px);
        }

        .service-item-footer .renew-service-btn {
            flex-shrink: 0;
            background-color: transparent;
            border-color: var(--success-color);
            color: var(--success-color);
            font-weight: 600;
            padding: 0.6rem 1.25rem;
            border-radius: 0.5rem;
            justify-content: center;
            transition: all 0.2s ease;
        }

        .service-item-footer .renew-service-btn:hover {
            background-color: var(--success-glass);
            border-color: var(--success-color);
            transform: translateY(-2px);
            box-shadow: 0 0 10px rgba(34, 197, 94, 0.3);
        }

        .service-item-footer .renew-service-btn:disabled,
        .service-item-footer .manage-service-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        .admin-tab {
            border-color: transparent;
            color: var(--text-muted);
            transition: all 0.2s ease-in-out;
        }

        .admin-tab:hover {
            color: var(--text-main);
            border-color: var(--text-muted);
        }

        .admin-tab.active {
            border-color: var(--accent-primary);
            color: var(--accent-primary);
        }

        .admin-sub-panel.active {
            display: block;
            animation: fadeIn 0.5s ease-in-out;
        }

        .admin-sub-panel {
            display: none;
        }

        .admin-action-menu {
            background-color: var(--glass-bg-secondary);
            backdrop-filter: blur(10px);
        }

        .admin-action-menu>a:hover {
            background-color: var(--glass-info);
            color: white;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

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

        .timeframe-btn,
        .metric-btn {
            background-color: transparent;
            border-color: transparent;
        }

        .timeframe-btn.active,
        .timeframe-btn:hover,
        .metric-btn.active,
        .metric-btn:hover {
            background-color: var(--accent-primary);
            border-color: var(--accent-primary);
            color: white;
            box-shadow: var(--accent-glow);
        }

        .firewall-tabs {
            display: flex;
            border-bottom: 1px solid var(--glass-border);
            margin-bottom: 1.5rem;
        }

        .firewall-tab-btn {
            padding: 0.75rem 1.25rem;
            cursor: pointer;
            font-weight: 500;
            color: var(--text-muted);
            border-bottom: 2px solid transparent;
            transition: all 0.2s ease-in-out;
        }

        .firewall-tab-btn:hover {
            color: var(--text-heading);
        }

        .firewall-tab-btn.active {
            color: var(--accent-primary);
            border-bottom-color: var(--accent-primary);
        }

        .firewall-tab-panel {
            display: none;
            animation: fadeIn 0.5s ease-in-out;
        }

        .firewall-tab-panel.active {
            display: block;
        }

        .firewall-ip-card {
            background-color: var(--glass-bg-secondary);
            border: 1px solid var(--glass-border);
            border-radius: 0.75rem;
            transition: all 0.2s ease-in-out;
        }

        .firewall-ip-header {
            padding: 1rem 1.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
        }

        .firewall-ip-header:hover {
            background-color: var(--bg-tertiary);
        }

        .firewall-status-pill {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.8rem;
            font-weight: 600;
            padding: 0.25rem 0.75rem;
            border-radius: 9999px;
            color: white;
            background-color: var(--success-color);
            box-shadow: 0 0 8px var(--success-color);
        }

        .firewall-config-panel {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
            padding: 0 1.5rem;
            border-top: 1px solid transparent;
        }

        .firewall-config-panel.is-visible {
            max-height: 5000px;
            padding: 1.5rem;
            border-top-color: var(--glass-border);
        }

        .preset-btn {
            border-radius: 0.5rem;
            padding: 0.375rem 0.875rem;
            font-weight: 500;
            transition: all 0.2s ease-in-out;
            transform: none;
            box-shadow: none;
            background-color: var(--glass-bg-primary);
            border: 1px solid var(--border-color);
            color: var(--text-muted);
        }

        .preset-btn:hover {
            border-color: var(--accent-primary);
            background-color: rgba(var(--accent-primary-rgb), 0.1);
            color: var(--text-main);
            transform: translateY(-2px);
        }

        .preset-btn.active {
            border-color: var(--accent-primary);
            background-color: var(--accent-primary);
            color: white;
            box-shadow: var(--accent-glow);
            transform: translateY(-2px);
        }

        .advanced-tcp-options {
            display: flex;
            gap: 0.5rem;
            align-items: flex-end;
        }

        .advanced-rules-list {
            list-style: none;
            padding: 0.5rem;
            margin: 0;
            min-height: 60px;
            border: 1px solid var(--glass-border-subtle);
            border-radius: 0.5rem;
        }

        .advanced-rule-item {
            background-color: var(--glass-bg-primary);
            border: 1px solid var(--glass-border-subtle);
            padding: 0.75rem 1rem;
            border-radius: 0.5rem;
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 0.5rem;
            font-size: 0.875rem;
        }

        .advanced-rule-item:last-child {
            margin-bottom: 0;
        }

        .rule-drag-handle {
            cursor: grab;
            color: var(--text-muted);
        }

        .rule-drag-handle:active {
            cursor: grabbing;
        }

        .rule-action-icon {
            width: 18px;
            height: 18px;
        }

        .rule-action-allow {
            color: var(--success-color);
        }

        .rule-action-block {
            color: var(--danger-color);
        }

        .advanced-rule-item.dragging {
            opacity: 0.5;
            background: var(--accent-primary);
        }

        .firewall-ip-main-details {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }

        .attack-log-summary {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            font-size: 0.8rem;
            color: var(--text-muted);
            margin-top: 0.5rem;
        }

        .attack-status-pill {
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
            font-weight: 600;
            padding: 0.15rem 0.6rem;
            border-radius: 9999px;
            font-size: 0.75rem;
            line-height: 1.2;
        }

        .attack-status-mitigated {
            background-color: var(--success-glass);
            color: var(--success-color);
        }

        .attack-status-ongoing {
            background-color: rgba(239, 68, 68, 0.1);
            color: var(--danger-color);
            animation: pulse 1.5s infinite;
        }

        .attack-log-list {
            display: flex;
            flex-direction: column;
            margin-top: 1rem;
            border: 2px solid var(--glass-border);
            border-radius: 0.5rem;
            overflow: hidden;
        }

        .attack-log-item-section {
            display: flex;
            flex-direction: column;
        }

        .attack-log-item-label {
            font-size: 0.75rem;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 0.25rem;
        }

        .attack-log-item-value {
            font-weight: 500;
            color: var(--text-main);
        }

        .attack-log-item-value.type {
            color: var(--warning-color);
        }

        .attack-log-item-value.action-mitigated {
            color: var(--success-color);
        }

        .attack-log-item-value.action-ongoing {
            color: var(--danger-color);
        }

        body[data-theme="light"] {
            --bg-primary: #F4F4F5;
            --bg-secondary: #FFFFFF;
            --bg-tertiary: #FAFAFA;
            --text-main: #3F3F46;
            --text-heading: #18181B;
            --text-muted: #71717A;
            --border-color: rgba(0, 0, 0, 0.1);
            --border-subtle: rgba(0, 0, 0, 0.05);
            --accent-primary: #2563EB;
            --accent-primary-hover: #1D4ED8;
            --accent-secondary: #9333ea;
            --price-color: #16A34A;
            --danger-color: #DC2626;
            --warning-color: #D97706;
            --success-color: #16A34A;
            --info-color: #0284C7;
            --accent-primary-rgb: 37, 99, 235;
            --accent-secondary-rgb: 147, 51, 234;
            --success-rgb: 22, 163, 74;
            --warning-rgb: 217, 119, 6;
            --danger-rgb: 220, 38, 38;
            --info-rgb: 2, 132, 199;
            --accent-tertiary-rgb: 219, 39, 119;
            --accent-glow: 0 0 15px rgba(var(--accent-primary-rgb), 0.2);
            --glass-bg-first: rgba(255, 255, 255, 0.6);
            --glass-bg-primary: rgba(255, 255, 255, 0.3);
            --glass-bg-secondary: rgba(255, 255, 255, 0.8);
            --glass-border: rgba(0, 0, 0, 0.08);
            --glass-border-subtle: rgba(0, 0, 0, 0.04);
            --glass-info: rgba(14, 165, 233, 0.1);
            --warning-glass: rgba(245, 158, 11, 0.1);
            --success-glass: rgba(34, 197, 94, 0.1);
            scrollbar-color: var(--border-color) transparent;
            background-image: radial-gradient(circle at 1% 1%, rgba(var(--accent-primary-rgb), 0.04), transparent 30%),
                radial-gradient(circle at 99% 99%, rgba(168, 85, 247, 0.04), transparent 40%);
        }

        /* NEW: Light Theme Overrides */
        body[data-theme="light"] .btn-bubble.btn-bubble-warning {
            color: white;
        }

        body[data-theme="light"] .btn-bubble-warning:hover {
            background-color: #b45f06;
            border-color: #b45f06;
        }

        body[data-theme="light"] .vps-status-pill.status-suspended,
        body[data-theme="light"] .service-status-text.status-suspended,
        body[data-theme="light"] .service-status-text.status-unpaid,
        body[data-theme="light"] .vps-status-pill.status-unpaid {
            color: white;
        }

        /* Styling for OS Grouping in Purchase Flow */
        .os-group-container {
            background-color: var(--glass-bg-secondary);
            border: 1px solid var(--glass-border);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            border-radius: 0.75rem;
            padding: 1.25rem;
            transition: all 0.2s ease-in-out;
        }

        .os-group-title {
            font-size: 1rem;
            font-weight: 600;
            color: var(--text-heading);
            margin-bottom: 1rem;
            padding-bottom: 0.75rem;
            border-bottom: 1px solid var(--glass-border-subtle);
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .os-group-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
        }

        /* Adjust the main options container to stack the groups */
        #os-options {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .firewall-status-pill.status-active {
            background-color: var(--success-color);
            box-shadow: 0 0 8px var(--success-color);
            color: white;
        }

        .firewall-status-pill.status-custom {
            background-color: var(--info-color);
            box-shadow: 0 0 8px var(--info-color);
            color: white;
        }

        .firewall-status-pill.status-monitoring {
            background-color: var(--warning-color);
            border: 1px solid var(--border-color);
            box-shadow: none;
            color: white;
        }

        /* Add these new styles for the detailed attack log layout */
        .attack-log-item-wrapper {
            display: flex;
            flex-direction: column;
        }

        .attack-log-details {
            animation: fadeIn 0.3s ease-in-out;
        }

        .attack-log-item {
            background-color: transparent;
            border: 1px solid var(--glass-border);
            padding: 1rem 1rem;
            display: grid;
            gap: 0.75rem 1rem;
            align-items: center;
            font-size: 0.875rem;
            transition: background-color 0.2s ease;
        }

        .attack-log-item:hover {
            background-color: var(--bg-tertiary);
        }

        /* ========== (REPLACE PREVIOUS ACCOUNT GRID STYLES WITH THIS) ========== */
        .account-management-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 1.25rem;
        }

        .account-management-item {
            background: none;
            border: 1px solid var(--glass-border);
            padding: 1.5rem;
            font: inherit;
            color: inherit;
            cursor: pointer;
            text-align: left;
            display: flex;
            align-items: center;
            gap: 1.25rem;
            background-color: var(--glass-bg-secondary);
            border-radius: 1rem;
            transition: all 0.25s ease-in-out;
        }

        .account-management-item:hover:not(.logout-item) {
            transform: translateY(-5px) scale(1.02);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            border-color: var(--border-color);
        }

        .account-management-item.logout-item:hover {
            transform: translateY(-5px) scale(1.02);
            border-color: var(--danger-color);
            background-color: rgba(var(--danger-rgb), 0.1);
            box-shadow: 0 10px 30px rgba(var(--danger-rgb), 0.2);
        }

        body[data-theme="light"] .account-management-item:hover {
            box-shadow: 0 10px 30px rgba(90, 90, 110, 0.12);
        }

        .account-management-item .item-icon-wrapper {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 48px;
            height: 48px;
            border-radius: 0.75rem;
            flex-shrink: 0;
        }

        .account-management-item .item-icon-wrapper iconify-icon, .item-icon-wrapper iconify-icon {
            width: 24px;
            height: 24px;
        }

        .account-management-item .item-content {
            flex-grow: 1;
        }

        .account-management-item .item-title {
            font-weight: 600;
            color: var(--text-heading);
            font-size: 1rem;
            margin: 0;
        }

        .account-management-item .item-description {
            font-size: 0.875rem;
            color: var(--text-muted);
            margin: 0.25rem 0 0 0;
            line-height: 1.4;
        }

        /* ========== (ADD THIS BLOCK for the last row wrapper) ========== */
        .account-grid-last-row-wrapper {
            grid-column: 1 / -1;
            display: flex;
            gap: 1.25rem;
        }

        .account-grid-last-row-wrapper>.account-management-item {
            flex: 1 1 0;
            width: 0;
        }

        .table-container {
            overflow-x: auto;
            background-color: var(--glass-bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 0.75rem;
        }

        body[data-theme="light"] thead {
            background-color: #F9FAFB;
            border-bottom: 1px solid var(--border-color);
        }

        body[data-theme="light"] th,
        body[data-theme="light"] td {
            border-color: var(--border-subtle);
        }

        body[data-theme="light"] tbody tr:hover {
            background-color: #F9FAFB;
        }

        /* ========== (ADD THIS BLOCK to your <style> tag) ========== */
        .summary-card {
            background-color: var(--glass-bg-secondary);
            padding: 1.5rem;
            border-radius: 1rem;
            border: 1px solid var(--glass-border-subtle);
            display: flex;
            flex-direction: column;
        }

        .summary-card h4 {
            font-size: 1.125rem;
            font-weight: 600;
            color: var(--text-heading);
            margin-bottom: 1rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--glass-border-subtle);
        }

        .summary-right-col {
            padding-left: 1.5rem;
            border-left: 1px solid var(--glass-border-subtle);
        }

        @media (max-width: 1024px) {
            .summary-right-col {
                padding-left: 0;
                border-left: none;
                padding-top: 1.5rem;
                border-top: 1px solid var(--glass-border-subtle);
            }
        }

        .config-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.875rem 0;
            border-bottom: 1px solid var(--glass-border-subtle);
            font-size: 0.875rem;
        }

        .config-item:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

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

        .config-item .value {
            color: var(--text-main);
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            text-align: right;
        }

        .price-summary-card {
            justify-content: space-between;
        }

        .price-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: rgba(var(--accent-primary-rgb), 0.05);
            padding: 1rem;
            border-radius: 0.75rem;
            margin-bottom: 0.75rem;
        }

        body[data-theme="light"] .price-item {
            background-color: rgba(var(--accent-primary-rgb), 0.08);
        }

        .price-item .label {
            font-weight: 500;
            color: var(--text-main);
        }

        .price-item .value {
            font-weight: 600;
            font-family: monospace;
            color: var(--text-heading);
            letter-spacing: 0.5px;
        }

        .total-due-section {
            margin-top: 1.5rem;
            padding-top: 1.5rem;
            border-top: 1px solid var(--glass-border-subtle);
            text-align: center;
        }

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

        .total-due-value {
            font-size: 2.25rem;
            font-weight: 700;
            color: var(--price-color);
            line-height: 1;
        }

        @keyframes deploy-button-aurora {
            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }

        #final-purchase-btn.deploy-button-final {
            margin-top: 1rem;
            padding: 1.125rem;
            font-size: 1.125rem;
            font-weight: 600;
            border-radius: 1.5rem;
            border: none;
            color: white;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
            background: linear-gradient(110deg,
                    var(--accent-primary-hover) 0%,
                    #4f46e5 25%,
                    var(--accent-secondary) 50%,
                    #4f46e5 75%,
                    var(--accent-primary-hover) 100%);
            background-size: 250% auto;
            animation: deploy-button-aurora 6s ease-in-out infinite;
            box-shadow: 0 8px 20px -6px rgba(var(--accent-primary-rgb), 0.5),
                0 4px 10px -4px rgba(var(--accent-secondary-rgb), 0.3);
            transition: all 0.35s cubic-bezier(0.15, 0.8, 0.3, 1);
        }

        #final-purchase-btn.deploy-button-final:hover {
            transform: translateY(-4px) scale(1.03);
            box-shadow: 0 12px 28px -6px rgba(var(--accent-primary-rgb), 0.6),
                0 6px 15px -4px rgba(var(--accent-secondary-rgb), 0.4);
            animation-duration: 3s;
        }

        #final-purchase-btn.deploy-button-final:active {
            transform: translateY(-1px) scale(1.01);
        }

        /* --- UPDATED VPS DETAILS GRID (Material 3 Style) --- */
        .vps-details {
            display: grid;
            gap: 1rem;
            margin-bottom: 2rem;
            grid-template-columns: 1fr;
        }

        @media (min-width: 700px) {
            .vps-details {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (min-width: 1300px) {
            .vps-details {
                grid-template-columns: repeat(4, 1fr);
            }
        }

        /* Logic to make the last item span the full width */
        .vps-details .vps-m3-card:last-child {
            grid-column: 1 / -1;
        }

        .vps-m3-card {
            position: relative;
            padding: 1.5rem;
            border-radius: 1.25rem;
            overflow: hidden;
            transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.25s;
            border: 1px solid transparent;
            display: flex;
            flex-direction: column;
            justify-content: center;
            min-height: 110px;
            width: 100%;
        }

        .vps-m3-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
        }

        .vps-m3-label {
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 0.5rem;
            opacity: 0.8;
            z-index: 2;
        }

        .vps-m3-value {
            font-size: 1.35rem;
            font-weight: 600;
            z-index: 2;
            word-break: break-all;
            line-height: 1.2;
        }

        .vps-m3-icon-bg {
            position: absolute;
            right: -10px;
            bottom: -10px;
            width: 80px;
            height: 80px;
            opacity: 0.15;
            transform: rotate(-10deg);
            z-index: 1;
            pointer-events: none;
        }

        /* --- COLOR VARIANTS (Glass/Tonal Styles) --- */
        /* IP Address - Blue Tone */
        .vps-card-blue {
            background-color: rgba(59, 130, 246, 0.1);
            border-color: rgba(59, 130, 246, 0.2);
            color: #93c5fd;
        }

        .vps-card-blue .vps-m3-value {
            color: #bfdbfe;
        }

        body[data-theme="light"] .vps-card-blue {
            background-color: #eff6ff;
            border-color: #dbeafe;
            color: #1e40af;
        }

        body[data-theme="light"] .vps-card-blue .vps-m3-value {
            color: #172554;
        }

        /* Status - Green/Emerald Tone */
        .vps-card-green {
            background-color: rgba(16, 185, 129, 0.1);
            border-color: rgba(16, 185, 129, 0.2);
            color: #6ee7b7;
        }

        .vps-card-green .vps-m3-value {
            color: #a7f3d0;
        }

        body[data-theme="light"] .vps-card-green {
            background-color: #ecfdf5;
            border-color: #d1fae5;
            color: #047857;
        }

        body[data-theme="light"] .vps-card-green .vps-m3-value {
            color: #064e3b;
        }

        /* Plan - Purple/Violet Tone */
        .vps-card-purple {
            background-color: rgba(139, 92, 246, 0.1);
            border-color: rgba(139, 92, 246, 0.2);
            color: #c4b5fd;
        }

        .vps-card-purple .vps-m3-value {
            color: #ddd6fe;
        }

        body[data-theme="light"] .vps-card-purple {
            background-color: #f5f3ff;
            border-color: #ede9fe;
            color: #5b21b6;
        }

        body[data-theme="light"] .vps-card-purple .vps-m3-value {
            color: #4c1d95;
        }

        /* Node - Orange/Amber Tone */
        .vps-card-orange {
            background-color: rgba(249, 115, 22, 0.1);
            border-color: rgba(249, 115, 22, 0.2);
            color: #fdba74;
        }

        .vps-card-orange .vps-m3-value {
            color: #fed7aa;
        }

        body[data-theme="light"] .vps-card-orange {
            background-color: #fff7ed;
            border-color: #ffedd5;
            color: #9a3412;
        }

        body[data-theme="light"] .vps-card-orange .vps-m3-value {
            color: #7c2d12;
        }

        /* OS - Pink/Rose Tone */
        .vps-card-pink {
            background-color: rgba(236, 72, 153, 0.1);
            border-color: rgba(236, 72, 153, 0.2);
            color: #f9a8d4;
        }

        .vps-card-pink .vps-m3-value {
            color: #fbcfe8;
        }

        body[data-theme="light"] .vps-card-pink {
            background-color: #fdf2f8;
            border-color: #fce7f3;
            color: #9d174d;
        }

        body[data-theme="light"] .vps-card-pink .vps-m3-value {
            color: #831843;
        }

        body[data-theme="light"] #backToServicesBtn:hover,
        body[data-theme="light"] #backToAccountBtn:hover,
        body[data-theme="light"] #backToAccountSettingsBtn:hover {
            background-color: rgba(0, 0, 0, 0.08) !important;
            color: var(--text-heading) !important;
        }

        .verification-box {
            background-color: #18181B;
            color: #FFFFFF;
            user-select: none;
            -webkit-user-select: none;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        body[data-theme="light"] .verification-box {
            background-color: #F4F4F5;
            color: #18181B;
            border-color: #ef4444;
        }

        /* --- LAYOUT UPDATES --- */
        :root {
            --sidebar-width: 260px;
            --sidebar-width-collapsed: 80px;
            --top-nav-height: 60px;
            --bg-primary: #0A0A0B;
            --bg-secondary: #101012;
            --bg-tertiary: #18181B;
            --text-main: #D4D4D8;
            --text-heading: #FFFFFF;
            --text-muted: #71717A;
            --border-color: rgba(100, 100, 110, 0.3);
            --border-subtle: rgba(100, 100, 110, 0.2);
            --accent-primary: #3B82F6;
            --accent-primary-hover: #2563EB;
            --accent-secondary: #A855F7;
            --price-color: #34D399;
            --danger-color: #EF4444;
            --danger-rgb: 239, 68, 68;
            --warning-color: #F59E0B;
            --success-color: #22C55E;
            --info-color: #0EA5E9;
            --accent-primary-rgb: 59, 130, 246;
            --accent-secondary-rgb: 168, 85, 247;
            --accent-glow: 0 0 15px rgba(var(--accent-primary-rgb), 0.35);
            --glass-bg-first: rgba(16, 16, 18, 0.15);
            --glass-bg-primary: rgba(16, 16, 18, 0.25);
            --glass-bg-secondary: rgba(24, 24, 27, 0.3);
            --glass-border: rgba(100, 100, 110, 0.15);
            --glass-border-subtle: rgba(100, 100, 110, 0.1);
            --glass-info: rgba(14, 165, 233, 0.1);
            --warning-glass: rgba(245, 158, 11, 0.1);
            --success-glass: rgba(34, 197, 94, 0.1);
            --accent-tertiary-rgb: 235, 69, 158;
            --header-height: 70px;
        }

        /* Make the sidebar connect to the top, but allow header to sit to the right of it */
        #dashboardSidebar {
            position: fixed;
            top: 0;
            left: 0;
            width: var(--sidebar-width);
            height: 100vh;
            background-color: var(--glass-bg-primary);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border-right: 1px solid var(--glass-border);
            padding: 1.5rem 1rem;
            display: flex;
            flex-direction: column;
            z-index: 60;
            transition: transform 0.3s ease-in-out;
        }

        /* Adjust Content to fit the new Header */
        #dashboardContent {
            flex-grow: 1;
            margin-left: var(--sidebar-width);
            height: 100vh;
            overflow-y: auto;
            padding: 2rem;
            scroll-behavior: smooth;
            transition: margin-left 0.3s ease-in-out;
            padding-top: calc(var(--header-height) + 1.5rem);
        }

        /* --- NEW TOP HEADER STYLES --- */
        .dashboard-header {
            position: fixed;
            top: 0;
            right: 0;
            width: calc(100% - var(--sidebar-width));
            height: var(--header-height);
            background-color: rgba(10, 10, 11, 0.6);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-bottom: 1px solid var(--glass-border);
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding: 0 2rem;
            z-index: 50;
            transition: width 0.3s ease-in-out;
        }

        /* Adjust header width when sidebar is collapsed */
        body.sidebar-collapsed .dashboard-header {
            width: 100%;
        }

        /* Mobile Header Adjustment */
        @media (max-width: 1024px) {
            .dashboard-header {
                width: 100%;
                justify-content: space-between;
                padding: 0 1rem;
                background-color: var(--bg-primary);
            }

            /* Hide specific desktop elements on mobile if needed, or scale them down */
            .header-service-status-text {
                display: none;
            }
        }

        /* --- HEADER WIDGETS (Material 3 Expressive Style) --- */
        .header-actions {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        /* 1. Running Services (M3 Expressive Pill) */
        .m3-status-pill {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            background-color: rgba(var(--accent-primary-rgb), 0.1);
            color: var(--accent-primary);
            border: 1px solid rgba(var(--accent-primary-rgb), 0.2);
            padding: 0.5rem 1rem;
            border-radius: 2rem;
            font-size: 0.875rem;
            font-weight: 600;
            transition: all 0.25s cubic-bezier(0.2, 0, 0, 1);
            cursor: pointer;
        }

        .m3-status-pill:hover {
            background-color: rgba(var(--accent-primary-rgb), 0.15);
            box-shadow: 0 4px 12px rgba(var(--accent-primary-rgb), 0.15);
            transform: translateY(-1px);
        }

        .m3-status-indicator-dot {
            width: 8px;
            height: 8px;
            background-color: var(--accent-primary);
            border-radius: 50%;
            box-shadow: 0 0 10px var(--accent-primary);
            animation: pulse-dot 2s infinite;
            flex-shrink: 0;
            margin: 0;
        }

        @keyframes pulse-dot {
            0% {
                transform: scale(0.95);
                opacity: 1;
            }

            50% {
                transform: scale(1.2);
                opacity: 0.7;
            }

            100% {
                transform: scale(0.95);
                opacity: 1;
            }
        }

        /* 2. Support Button */
        .header-icon-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            color: var(--text-muted);
            background-color: var(--glass-bg-secondary);
            border: 1px solid var(--glass-border);
            transition: all 0.2s ease;
        }

        .header-icon-btn:hover {
            background-color: var(--bg-tertiary);
            color: var(--text-heading);
            transform: scale(1.05);
        }

        /* 3. Balance Display */
        /* UPDATE: Adjust Header Balance Box for Mobile */
        .header-balance-box {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            line-height: 1.1;
            margin-right: 0.75rem;
        }

        /* Hide the "CREDIT BALANCE" text label on mobile to save space */
        @media (max-width: 640px) {
            .header-balance-label {
                display: none;
            }

            .header-balance-amount {
                font-size: 0.95rem;
            }
        }

        /* UPDATE: Adjust Status Pill for Mobile (Compact Mode) */
        @media (max-width: 768px) {
            .m3-status-pill {
                padding: 0;
                width: 40px;
                height: 40px;
                justify-content: center;
                border-radius: 50%;
                gap: 0;
            }

            .m3-status-indicator-dot {
                margin: 0;
            }

            /* When showing number, allow pill to expand slightly if needed, or keep tight */
            .m3-status-pill.has-services {
                width: auto;
                border-radius: 2rem;
                padding: 0 0.75rem;
                gap: 0.5rem;
            }
        }

        .header-balance-label {
            font-size: 0.7rem;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .header-balance-amount {
            font-size: 1rem;
            font-weight: 700;
            color: var(--price-color);
            font-family: 'Google Sans', sans-serif;
        }

        /* 4. Profile Dropdown / Area */
        .header-profile {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.35rem 0.5rem 0.35rem 0.35rem;
            background-color: var(--glass-bg-secondary);
            border: 1px solid var(--glass-border);
            border-radius: 2rem;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        /* --- FIX 1: FORCE CIRCULAR PROFILE ON MOBILE --- */
        @media (max-width: 768px) {
            .header-profile {
                width: 40px;
                height: 40px;
                padding: 0 !important;
                justify-content: center;
                border-radius: 50% !important;
                flex-shrink: 0;
            }

            .header-avatar {
                width: 32px;
                height: 32px;
                margin: 0;
            }
        }

        /* --- FIX 2: MOBILE PILL WITH BALANCE --- */
        @media (max-width: 768px) {

            /* Base Pill Style on Mobile */
            .m3-status-pill {
                width: auto !important;
                border-radius: 50px !important;
                padding: 0 12px 0 6px !important;
                gap: 0 !important;
            }

            /* Adjust the active content wrapper */
            #status-content-active {
                padding-right: 8px;
            }

            /* Adjust the plus icon wrapper */
            #mobile-add-service-icon {
                padding: 0 4px;
                margin-right: 4px;
            }

            /* Ensure the balance text is readable */
            .mobile-balance-text {
                font-family: 'Google Sans', sans-serif;
                font-weight: 700;
                font-size: 0.85rem;
                padding-left: 8px;
                line-height: 1;
                padding-top: 1px;
                display: block;
            }
        }

        .header-profile:hover {
            border-color: var(--text-muted);
            background-color: var(--bg-tertiary);
        }

        .header-avatar {
            width: 32px;
            height: 32px;
            background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 700;
            font-size: 0.9rem;
        }

        .header-username {
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--text-heading);
            padding-right: 0.5rem;
        }

        /* Add this to your existing body[data-theme="light"] block or as a new rule */
        body[data-theme="light"] .dashboard-header {
            background-color: rgba(255, 255, 255, 0.8);
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }

        body[data-theme="light"] .header-username {
            color: #18181B;
        }

        /* Fix for the Balance label in light mode */
        body[data-theme="light"] .header-balance-box .header-balance-label {
            color: #71717A;
        }

        @media (max-width: 1024px) {
            .dashboard-header {
                padding: 0 1rem;
                justify-content: space-between;
            }

            /* Ensure the status pill shrinks slightly on mobile if needed */
            .m3-status-pill {
                padding: 0.35rem 0.75rem;
                font-size: 0.8rem;
            }
        }

        /* --- Material 3 Expressive Order Summary --- */
        .m3-summary-card {
            background-color: var(--glass-bg-secondary);
            border: 1px solid var(--glass-border);
            border-radius: 28px;
            padding: 0;
            overflow: hidden;
            position: relative;
            display: flex;
            flex-direction: column;
            transition: box-shadow 0.3s ease;
        }

        .m3-summary-card:hover {
            box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.3);
        }

        .m3-summary-main {
            padding: 32px;
            display: flex;
            flex-direction: column;
            gap: 24px;
        }

        .m3-summary-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            flex-wrap: wrap;
            gap: 16px;
        }

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

        .m3-tag {
            padding: 6px 16px;
            border-radius: 12px;
            font-size: 0.85rem;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            letter-spacing: 0.02em;
        }

        /* Tag Variants */
        .m3-tag-primary {
            background-color: rgba(var(--accent-primary-rgb), 0.1);
            color: var(--accent-primary);
            border: 1px solid rgba(var(--accent-primary-rgb), 0.2);
        }

        .m3-tag-secondary {
            background-color: var(--bg-tertiary);
            color: var(--text-muted);
            border: 1px solid var(--glass-border);
        }

        .m3-info-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 16px;
            margin-top: 12px;
        }

        .m3-info-item {
            background-color: var(--bg-tertiary);
            padding: 16px;
            border-radius: 16px;
            border: 1px solid var(--glass-border-subtle);
        }

        .m3-info-value {
            font-size: 1rem;
            font-weight: 600;
            color: var(--text-heading);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        /* Light Mode Overrides for M3 */
        body[data-theme="light"] .m3-summary-card {
            background-color: #ffffff;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
        }

        body[data-theme="light"] .m3-info-item {
            background-color: #F8F9FA;
        }

        /* Desktop layout adjustment for the footer */
        @media (min-width: 1024px) {
            .m3-summary-footer {
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
            }

            .m3-price-container {
                flex-grow: 1;
                margin-right: 32px;
            }

            .m3-action-container {
                min-width: 280px;
            }
        }

        /* --- Material 3 Expressive Billing Selection --- */
        /* Override grid layout for billing options specifically */
        #billing-period-options {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 16px;
        }

        .m3-period-card {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: space-between;
            padding: 24px;
            background-color: var(--glass-bg-secondary);
            border: 1px solid var(--glass-border);
            border-radius: 24px;
            cursor: pointer;
            transition: all 0.25s cubic-bezier(0.2, 0, 0, 1);
            min-height: 140px;
            text-align: left;
        }

        /* Hover State */
        .m3-period-card:hover {
            background-color: var(--bg-tertiary);
            transform: translateY(-4px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
        }

        /* Active/Selected State */
        .m3-period-card.active {
            background-color: rgba(var(--accent-primary-rgb), 0.08);
            border-color: var(--accent-primary);
            border-width: 2px;
            padding: 23px;
            box-shadow: 0 0 0 4px rgba(var(--accent-primary-rgb), 0.15);
        }

        /* Internal Typography */
        .m3-period-header {
            width: 100%;
            margin-bottom: 12px;
        }

        .m3-period-name {
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            display: block;
            margin-bottom: 4px;
        }

        .m3-period-price-large {
            font-family: 'Google Sans', sans-serif;
            font-size: 1.75rem;
            font-weight: 700;
            color: var(--text-heading);
            line-height: 1.1;
        }

        .m3-period-price-large small {
            font-size: 0.9rem;
            font-weight: 400;
            color: var(--text-muted);
        }

        /* Discount Badge */
        .m3-discount-badge {
            position: absolute;
            top: 16px;
            right: 16px;
            background-color: var(--success-color);
            color: white;
            padding: 4px 10px;
            border-radius: 8px;
            font-size: 0.75rem;
            font-weight: 700;
            box-shadow: 0 2px 8px rgba(var(--success-rgb), 0.3);
        }

        /* Selection Indicator (Radio Circle) */
        .m3-radio-indicator {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 2px solid var(--border-color);
            margin-top: auto;
            position: relative;
            transition: all 0.2s ease;
        }

        .m3-period-card.active .m3-radio-indicator {
            border-color: var(--accent-primary);
            background-color: var(--accent-primary);
            box-shadow: 0 0 0 2px var(--bg-secondary);
        }

        .m3-period-card.active .m3-radio-indicator::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 8px;
            height: 8px;
            background-color: white;
            border-radius: 50%;
        }

        /* Light Theme Adjustments */
        body[data-theme="light"] .m3-period-card {
            background-color: #ffffff;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
        }

        body[data-theme="light"] .m3-period-card.active {
            background-color: #eff6ff;
        }

        @keyframes simpleFadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

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

        .simple-fade-in {
            animation: simpleFadeIn 0.4s cubic-bezier(0.2, 0, 0.2, 1) forwards;
            opacity: 0;
        }

        /* --- Material 3 Expressive Plan Cards --- */
        #filteredPlansGrid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 20px;
        }

        .m3-plan-card {
            display: flex;
            flex-direction: column;
            background-color: var(--glass-bg-secondary);
            border: 1px solid var(--glass-border);
            border-radius: 24px;
            overflow: hidden;
            transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
            position: relative;
            height: 100%;
        }

        .m3-plan-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.2);
            border-color: var(--border-color);
            z-index: 10;
        }

        /* Active State (Selected) */
        .m3-plan-card.active-plan {
            border-color: var(--accent-primary);
            box-shadow: 0 0 0 2px var(--accent-primary), 0 12px 32px -8px rgba(var(--accent-primary-rgb), 0.3);
            background-color: var(--glass-bg-secondary);
        }

        /* Content Area */
        .m3-plan-content {
            padding: 24px;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .m3-plan-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 12px;
        }

        .m3-plan-title {
            font-family: 'Google Sans', sans-serif;
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--text-heading);
            line-height: 1.2;
            margin-bottom: 8px;
            margin: 0;
        }

        .m3-plan-badge {
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            padding: 4px 10px;
            border-radius: 8px;
            background-color: var(--bg-tertiary);
            color: var(--text-muted);
            border: 1px solid var(--glass-border);
            white-space: nowrap;
        }

        .m3-plan-specs {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .m3-plan-spec-item {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 0.9rem;
            color: var(--text-main);
        }

        .m3-plan-spec-item iconify-icon, .m3-plan-spec-item iconify-icon {
            width: 18px;
            height: 18px;
            color: var(--accent-primary);
            flex-shrink: 0;
        }

        .m3-plan-spec-item span {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Footer Area (Pricing & Action) */
        .m3-plan-footer {
            background-color: rgba(var(--accent-primary-rgb), 0.04);
            padding: 20px 24px;
            display: flex;
            flex-direction: column;
            gap: 16px;
            margin-top: auto;
            margin: 0.75rem;
            border-radius: 1.25rem;
        }

        .m3-price-currency {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--text-heading);
        }

        .m3-price-amount {
            font-family: 'Google Sans', sans-serif;
            font-size: 2rem;
            font-weight: 700;
            color: var(--text-heading);
            line-height: 1;
        }

        .m3-price-period {
            font-size: 0.85rem;
            color: var(--text-muted);
            font-weight: 500;
        }

        .m3-price-subtext {
            font-size: 0.75rem;
            color: var(--text-muted);
            margin-top: 4px;
        }

        /* Out of Stock Styling */
        .m3-plan-card.out-of-stock {
            opacity: 0.7;
            border-style: dashed;
        }

        .m3-plan-card.out-of-stock:hover {
            transform: none;
            box-shadow: none;
        }

        /* Light Mode Overrides */
        body[data-theme="light"] .m3-plan-footer {
            background-color: #F0F4FA;
            margin: 0.75rem;
            border-radius: 1.25rem;
        }

        /* --- Fixed Material 3 Footer Layout --- */
        /* Base Footer Container */
        .m3-summary-footer {
            background-color: rgba(var(--accent-primary-rgb), 0.04);
            border-top: 1px dashed var(--glass-border);
            padding: 24px 32px;
            display: flex;
            flex-direction: column;
            gap: 24px;
        }

        /* Wrapper for Pricing Info */
        .m3-price-container {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        /* Breakdown (Subtotal / VAT) */
        .m3-price-breakdown {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .m3-price-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.9rem;
            color: var(--text-muted);
        }

        .m3-total-value {
            font-size: 2rem;
            font-weight: 700;
            color: var(--price-color);
            line-height: 1;
            font-family: 'Google Sans', sans-serif;
        }

        .m3-action-container {
            width: 100%;
        }

        /* --- Desktop Specific Layout (Side-by-Side) --- */
        @media (min-width: 1024px) {
            .m3-summary-footer {
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                gap: 32px;
            }

            .m3-price-container {
                flex-direction: row;
                align-items: center;
                flex-grow: 1;
                gap: 0;
            }

            /* Subtotal/VAT becomes a distinct block on the left with a separator */
            .m3-price-breakdown {
                padding-right: 32px;
                margin-right: 32px;
                border-right: 1px solid var(--glass-border-subtle);
                min-width: 160px;
                gap: 6px;
            }

            /* Total becomes a distinct block on the right */
            .m3-total-row {
                border-top: none;
                padding-top: 0;
                flex-direction: column;
                justify-content: center;
                align-items: flex-start;
                gap: 4px;
            }

            .m3-total-label {
                font-size: 0.75rem;
                text-transform: uppercase;
                letter-spacing: 0.05em;
                color: var(--text-muted);
            }

            .m3-total-value {
                font-size: 2.25rem;
            }

            /* Button Container */
            .m3-action-container {
                width: auto;
                min-width: 280px;
                flex-shrink: 0;
            }
        }

        /* Light Theme Adjustments */
        body[data-theme="light"] .m3-summary-footer {
            background-color: #F0F4FA;
            border-top-color: rgba(0, 0, 0, 0.08);
        }

        body[data-theme="light"] .m3-price-breakdown {
            border-right-color: rgba(0, 0, 0, 0.08);
        }

        /* --- Material 3 Expressive Top Up Styles --- */
        .m3-topup-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 16px;
            margin-bottom: 2rem;
            width: 100%;
        }

        .m3-topup-card {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 1.75rem 1rem;
            background-color: var(--glass-bg-secondary);
            border: 1px solid var(--glass-border);
            border-radius: 28px;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
            overflow: hidden;
            appearance: none;
            text-align: center;
        }

        .m3-topup-card:hover {
            transform: translateY(-4px);
            background-color: var(--bg-tertiary);
            border-color: var(--accent-primary);
            box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.15);
        }

        .m3-topup-card:active {
            transform: scale(0.96);
        }

        .m3-topup-amount {
            font-family: 'Google Sans', sans-serif;
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--text-heading);
            z-index: 2;
            line-height: 1.2;
        }

        .m3-topup-label {
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--text-muted);
            margin-top: 0.25rem;
            font-weight: 600;
            z-index: 2;
        }

        /* Subtle Glow Effect on Hover */
        .m3-topup-card::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 120%;
            height: 120%;
            background: radial-gradient(circle, rgba(var(--accent-primary-rgb), 0.15) 0%, transparent 70%);
            transform: translate(-50%, -50%) scale(0);
            transition: transform 0.4s ease-out;
            opacity: 0;
            z-index: 1;
            pointer-events: none;
        }

        .m3-topup-card:hover::before {
            transform: translate(-50%, -50%) scale(1);
            opacity: 1;
        }

        /* --- M3 Custom Input Section --- */
        .m3-custom-topup-container {
            background-color: var(--glass-bg-secondary);
            border: 1px solid var(--glass-border);
            border-radius: 24px;
            padding: 24px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .m3-input-group {
            display: flex;
            align-items: center;
            gap: 12px;
            background-color: var(--bg-tertiary);
            border-radius: 16px;
            padding: 6px 6px 6px 20px;
            border: 1px solid var(--glass-border-subtle);
            transition: all 0.2s ease;
        }

        .m3-input-group:focus-within {
            border-color: var(--accent-primary);
            background-color: rgba(var(--accent-primary-rgb), 0.04);
            box-shadow: 0 0 0 2px rgba(var(--accent-primary-rgb), 0.1);
        }

        .m3-currency-symbol {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--text-muted);
        }

        .m3-custom-input {
            background: transparent;
            border: none;
            color: var(--text-heading);
            font-size: 1.1rem;
            font-weight: 500;
            font-family: 'Google Sans', sans-serif;
            width: 100%;
            outline: none;
            padding: 8px 0;
        }

        .m3-custom-input::placeholder {
            color: var(--text-muted);
            font-weight: 400;
        }

        /* M3 Floating Action Button (FAB) Style for Submit */
        .m3-fab-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            width: 48px;
            height: 48px;
            background-color: var(--accent-primary);
            color: white;
            border-radius: 12px;
            border: none;
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
            box-shadow: 0 2px 8px rgba(var(--accent-primary-rgb), 0.3);
        }

        .m3-fab-btn:hover {
            background-color: var(--accent-primary-hover);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(var(--accent-primary-rgb), 0.4);
        }

        .m3-fab-btn:active {
            transform: scale(0.95);
        }

        /* Light Mode Overrides specifically for this section */
        body[data-theme="light"] .m3-topup-card {
            background-color: #ffffff;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
        }

        body[data-theme="light"] .m3-custom-topup-container {
            background-color: #ffffff;
        }

        body[data-theme="light"] .m3-input-group {
            background-color: #f1f5f9;
        }

        /* --- Material 3 Modal Redesign --- */
        .m3-modal-header {
            text-align: center;
            margin-bottom: 2rem;
        }

        .m3-modal-title {
            font-family: 'Google Sans', sans-serif;
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--text-heading);
        }

        /* Hero Amount Display */
        .m3-amount-hero {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background-color: var(--bg-tertiary);
            border-radius: 24px;
            padding: 20px;
            margin-bottom: 24px;
            border: 1px solid var(--glass-border-subtle);
        }

        .m3-amount-hero-label {
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--text-muted);
            font-weight: 600;
            margin-bottom: 4px;
        }

        .m3-amount-hero-value {
            font-family: 'Google Sans', sans-serif;
            font-size: 2.25rem;
            font-weight: 700;
            color: var(--price-color);
            line-height: 1;
        }

        /* Payment Method Grid */
        .m3-payment-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            margin-bottom: 24px;
        }

        .m3-payment-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 16px;
            background-color: var(--glass-bg-secondary);
            border: 1px solid var(--glass-border);
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
            text-align: center;
            height: 100%;
        }

        .m3-payment-card:hover {
            background-color: var(--bg-tertiary);
            transform: translateY(-2px);
            border-color: var(--text-muted);
        }

        .m3-payment-card.active {
            border-color: var(--accent-primary);
            background-color: rgba(var(--accent-primary-rgb), 0.08);
            box-shadow: 0 0 0 1px var(--accent-primary);
        }

        .m3-payment-card.disabled {
            opacity: 0.5;
            cursor: not-allowed;
            pointer-events: none;
        }

        .m3-payment-card iconify-icon, .m3-payment-card iconify-icon {
            width: 24px;
            height: 24px;
            color: var(--text-muted);
            transition: color 0.2s;
        }

        .m3-payment-card.active iconify-icon, .active iconify-icon {
            color: var(--accent-primary);
        }

        .m3-payment-name {
            font-weight: 600;
            font-size: 0.9rem;
            color: var(--text-main);
        }

        .m3-payment-card.active .m3-payment-name {
            color: var(--text-heading);
        }

        /* Bank Info Surface */
        .m3-info-surface {
            background-color: var(--bg-tertiary);
            border-radius: 16px;
            padding: 20px;
            border: 1px solid var(--glass-border-subtle);
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-bottom: 20px;
        }

        .m3-info-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.9rem;
            padding-bottom: 8px;
            border-bottom: 1px solid var(--glass-border-subtle);
        }

        .m3-info-row:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

        .m3-info-label {
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--text-muted);
            margin-bottom: 4px;
            display: block;
        }

        .m3-info-val {
            font-weight: 600;
            color: var(--text-heading);
            font-family: monospace;
            font-size: 1rem;
        }

        /* Modern Upload Zone */
        .m3-upload-zone {
            border: 2px dashed var(--border-color);
            border-radius: 20px;
            padding: 24px 16px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            transition: all 0.2s ease;
            background-color: rgba(var(--glass-bg-primary), 0.3);
            cursor: pointer;
            gap: 8px;
        }

        .m3-upload-zone:hover,
        .m3-upload-zone.drag-over {
            border-color: var(--accent-primary);
            background-color: rgba(var(--accent-primary-rgb), 0.05);
        }

        .m3-upload-text-main {
            font-weight: 500;
            color: var(--text-heading);
        }

        .m3-upload-text-sub {
            font-size: 0.75rem;
            color: var(--text-muted);
        }

        /* Large Primary Button */
        .m3-primary-btn {
            width: 100%;
            padding: 14px;
            border-radius: 16px;
            font-weight: 600;
            font-size: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            background-color: var(--accent-primary);
            color: white;
            border: 1px solid transparent;
            transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
            margin-top: 16px;
            cursor: pointer;
        }

        .m3-primary-btn:hover:not(:disabled) {
            background-color: var(--accent-primary-hover);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(var(--accent-primary-rgb), 0.3);
        }

        .m3-primary-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            background-color: var(--bg-tertiary);
            color: var(--text-muted);
            box-shadow: none;
            transform: none;
        }

        /* Light Theme Overrides for Modal */
        body[data-theme="light"] .m3-amount-hero,
        body[data-theme="light"] .m3-info-surface {
            background-color: #f1f5f9;
        }

        body[data-theme="light"] .m3-payment-card {
            background-color: #ffffff;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
        }

        /* Bento Grid Styles for My Services Overview */
        .service-list.bento-mode {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 1.5rem;
            flex-direction: row;
        }

        .bento-card {
            position: relative;
            background-color: var(--glass-bg-secondary);
            border: 1px solid var(--glass-border);
            border-radius: 1.5rem;
            padding: 2rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            overflow: hidden;
            transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
            cursor: pointer;
            min-height: 220px;
        }

        .bento-card:hover {
            transform: translateY(-5px);
            border-color: var(--accent-primary);
            box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.3);
        }

        .bento-card-content {
            z-index: 2;
        }

        .bento-title {
            font-family: 'Google Sans', sans-serif;
            font-size: 1.75rem;
            font-weight: 600;
            color: var(--text-heading);
            margin-bottom: 0.5rem;
            line-height: 1.2;
        }

        .bento-subtitle {
            font-size: 0.9rem;
            color: var(--text-muted);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .bento-action-row {
            margin-top: auto;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-weight: 600;
            font-size: 0.9rem;
            color: var(--accent-primary);
            z-index: 2;
            padding-top: 1.5rem;
        }

        .bento-icon-bg {
            position: absolute;
            bottom: -20px;
            right: -20px;
            width: 140px;
            height: 140px;
            opacity: 0.05;
            transform: rotate(-15deg);
            pointer-events: none;
            z-index: 1;
            transition: all 0.4s ease;
        }

        .bento-card:hover .bento-icon-bg {
            transform: rotate(0deg) scale(1.1);
            opacity: 0.1;
        }

        /* Specific Card Themes */
        .bento-card[data-type="vps"]:hover {
            border-color: #3B82F6;
        }

        .bento-card[data-type="vps"] .bento-action-row {
            color: #3B82F6;
        }

        .bento-card[data-type="ddc"]:hover {
            border-color: #F97316;
        }

        .bento-card[data-type="ddc"] .bento-action-row {
            color: #F97316;
        }

        .bento-card[data-type="firewall"]:hover {
            border-color: #A855F7;
        }

        .bento-card[data-type="firewall"] .bento-action-row {
            color: #A855F7;
        }

        /* --- New Selection Card Styles --- */
        .selection-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
            gap: 1rem;
            width: 100%;
        }

        .m3-selection-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 1.5rem 1rem;
            background-color: var(--glass-bg-secondary);
            border: 1px solid var(--glass-border);
            backdrop-filter: blur(5px);
            border-radius: 1rem;
            cursor: pointer;
            transition: all 0.25s cubic-bezier(0.2, 0, 0, 1);
            min-height: 120px;
            position: relative;
            overflow: hidden;
        }

        .m3-selection-card:hover {
            background-color: var(--bg-tertiary);
            transform: translateY(-4px);
            box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.1);
            border-color: var(--border-color);
        }

        .m3-selection-card.active {
            background-color: rgba(var(--accent-primary-rgb), 0.1);
            border-color: var(--accent-primary);
            box-shadow: 0 0 0 2px var(--accent-primary);
            color: var(--text-heading);
        }

        .m3-selection-card img,
        .m3-selection-card svg,
        .m3-selection-card iconify-icon, .m3-selection-card iconify-icon {
            width: 36px;
            height: 36px;
            margin-bottom: 0.75rem;
            color: var(--text-muted);
            transition: all 0.2s ease;
        }

        .m3-selection-card.active img,
        .m3-selection-card.active svg,
        .m3-selection-card.active iconify-icon, .active iconify-icon {
            transform: scale(1.1);
            color: var(--accent-primary);
        }

        .m3-selection-card span {
            font-weight: 600;
            font-size: 0.95rem;
            line-height: 1.2;
        }

        /* Specific fix for the DDC Input Container to match */
        .m3-input-container-card {
            background-color: var(--glass-bg-secondary);
            border: 1px solid var(--glass-border);
            border-radius: 1rem;
            padding: 2rem;
            display: flex;
            flex-direction: column;
            gap: 1rem;
            width: 100%;
            max-width: 600px;
        }

        /* --- FIX: Light Mode Sidebar Visibility on Mobile --- */
        body[data-theme="light"] #dashboardSidebar {
            background-color: rgba(255, 255, 255, 0.95);
            border-right: 1px solid rgba(0, 0, 0, 0.06);
            box-shadow: 4px 0 24px rgba(0, 0, 0, 0.05);
        }

        /* Improve text contrast in sidebar for light mode */
        body[data-theme="light"] .dashboard-nav-link,
        body[data-theme="light"] .submenu-link {
            color: #52525b;
        }

        body[data-theme="light"] .dashboard-nav-link:hover,
        body[data-theme="light"] .submenu-link:hover {
            color: #18181b;
            background-color: rgba(0, 0, 0, 0.04);
        }

        /* Keep active states readable (White text on Blue bg) */
        body[data-theme="light"] .dashboard-nav-link.active,
        body[data-theme="light"] .submenu-link.active {
            color: #ffffff;
        }

        /* Ensure Logo is sharp black */
        body[data-theme="light"] .sidebar-logo-text {
            color: #000000;
            text-shadow: none;
        }

        /* --- FIX: Active State Persistence on Hover --- */
        /* Ensure active links stay blue/white when hovered, instead of turning gray */
        .dashboard-nav-link.active:hover,
        .submenu-link.active:hover {
            background-color: var(--accent-primary-hover) !important;
            color: white !important;
            box-shadow: var(--accent-glow);
        }

        /* Specifically for Light Mode to override generic light hover styles */
        body[data-theme="light"] .dashboard-nav-link.active:hover,
        body[data-theme="light"] .submenu-link.active:hover {
            background-color: var(--accent-primary-hover) !important;
            color: #ffffff !important;
        }

        /* --- FIX: Light Mode Submenu Active Contrast --- */
        body[data-theme="light"] .submenu-link.active {
            color: var(--text-heading);
            background-color: rgba(var(--accent-primary-rgb), 0.12);
            border-left-color: var(--accent-primary);
        }

        /* --- Material 3 Expressive Service List Item --- */
        /* Grid container for the colorful info boxes */
        .m3-service-details-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
            gap: 0.75rem;
            margin-top: 1rem;
            margin-bottom: 1rem;
        }

        /* PC / Desktop: Expand items to fit the entire width */
        @media (min-width: 1024px) {
            .m3-service-details-grid {
                grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            }
        }

        /* Base Chip Style */
        .m3-detail-chip {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 0.75rem 1rem;
            border-radius: 1rem;
            border: 1px solid transparent;
            font-size: 0.875rem;
            position: relative;
            overflow: hidden;
            transition: transform 0.2s ease;
            min-height: 72px;
        }

        .m3-detail-chip:hover {
            transform: translateY(-2px);
        }

        .m3-chip-label {
            font-size: 0.7rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            opacity: 0.8;
            margin-bottom: 0.25rem;
            display: flex;
            align-items: center;
            gap: 0.35rem;
            z-index: 2;
        }

        .m3-chip-value {
            font-weight: 600;
            font-size: 0.95rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            z-index: 2;
            line-height: 1.2;
        }

        /* Background Icon (Subtle decoration) */
        .m3-chip-bg-icon {
            position: absolute;
            right: -5px;
            bottom: -5px;
            width: 40px;
            height: 40px;
            opacity: 0.15;
            transform: rotate(-10deg);
            z-index: 1;
            pointer-events: none;
        }

        /* --- Chip Color Themes (Dark Mode Default) --- */
        /* IP Address - Blue */
        .chip-blue {
            background-color: rgba(59, 130, 246, 0.1);
            border-color: rgba(59, 130, 246, 0.2);
            color: #93c5fd;
        }

        /* Plan - Purple */
        .chip-purple {
            background-color: rgba(139, 92, 246, 0.1);
            border-color: rgba(139, 92, 246, 0.2);
            color: #c4b5fd;
        }

        /* OS - Pink */
        .chip-pink {
            background-color: rgba(236, 72, 153, 0.1);
            border-color: rgba(236, 72, 153, 0.2);
            color: #f9a8d4;
        }

        /* Node - Orange */
        .chip-orange {
            background-color: rgba(249, 115, 22, 0.1);
            border-color: rgba(249, 115, 22, 0.2);
            color: #fdba74;
        }

        /* Expiry - Gray/Green/Red (Logic handled in JS, base gray) */
        .chip-gray {
            background-color: var(--bg-tertiary);
            border-color: var(--glass-border);
            color: var(--text-main);
        }

        .chip-green {
            background-color: rgba(34, 197, 94, 0.1);
            border-color: rgba(34, 197, 94, 0.2);
            color: #86efac;
        }

        /* Price - Slate */
        .chip-slate {
            background-color: rgba(148, 163, 184, 0.1);
            border-color: rgba(148, 163, 184, 0.2);
            color: #cbd5e1;
        }

        /* --- Light Mode Overrides for Chips --- */
        body[data-theme="light"] .chip-blue {
            background-color: #eff6ff;
            border-color: #dbeafe;
            color: #1e40af;
        }

        body[data-theme="light"] .chip-purple {
            background-color: #f5f3ff;
            border-color: #ede9fe;
            color: #5b21b6;
        }

        body[data-theme="light"] .chip-pink {
            background-color: #fdf2f8;
            border-color: #fce7f3;
            color: #9d174d;
        }

        body[data-theme="light"] .chip-orange {
            background-color: #fff7ed;
            border-color: #ffedd5;
            color: #9a3412;
        }

        body[data-theme="light"] .chip-green {
            background-color: #ecfdf5;
            border-color: #d1fae5;
            color: #047857;
        }

        body[data-theme="light"] .chip-gray {
            background-color: #f4f4f5;
            border-color: #e4e4e7;
            color: #3f3f46;
        }

        body[data-theme="light"] .chip-slate {
            background-color: #f8fafc;
            border-color: #e2e8f0;
            color: #334155;
        }

        /* Fix footer button alignment in M3 card */
        .service-list-item .service-item-footer {
            border-top: 1px dashed var(--glass-border);
            padding-top: 1.25rem;
            margin-top: 0.5rem;
        }

        /* --- FIX: Light Mode Renew/Billing Modal --- */
        /* 1. Fix Info Box (Service Details) Background & Text */
        /* Changes the dark gray box to a light gray box with dark text */
        body[data-theme="light"] #billing-period-details,
        body[data-theme="light"] #auto-renew-details {
            background-color: #f4f4f5 !important;
            color: var(--text-main) !important;
            border: 1px solid var(--border-color);
        }

        /* 2. Fix Option Button Text (Main Label e.g. "Monthly") */
        /* Forces 'text-white' to be dark in light mode */
        body[data-theme="light"] .billing-option label span.text-white {
            color: var(--text-heading) !important;
        }

        /* 3. Fix Option Price Text (Secondary e.g. "$4000/mo") */
        /* Forces 'text-gray-300' to be muted gray in light mode */
        body[data-theme="light"] .billing-option label span.text-gray-300 {
            color: var(--text-muted) !important;
        }

        /* 4. Fix Selected State Text */
        /* When selected, make text Blue (Accent) instead of White, for better contrast on light blue bg */
        body[data-theme="light"] .billing-option input:checked+label span.text-white,
        body[data-theme="light"] .billing-option input:checked+label span.peer-checked\:text-white {
            color: var(--accent-primary) !important;
        }