* { margin: 0; padding: 0; box-sizing: border-box; }
        :root { --clr-text: #333; }
        body { font-family: 'Inter', sans-serif; background: #f5f5f5; padding: 0; }

        /* Scroll offset for anchor links (account for sticky header) */
        #topicProblemsSection {
            scroll-margin-top: 80px;
        }

        /* Top Bar Styles */
        .tp-topbar {
            background: #00a651;
            background: #000000;
            padding: 8px 20px;
        }
        .tp-topbar-inner {
            max-width: 1413px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .tp-topbar-left {
            display: flex;
            align-items: center;
            gap: 24px;
        }
        .tp-topbar-link {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
            color: #fff;
            text-decoration: none;
            transition: color 0.2s;
        }
        .tp-topbar-link:hover { color: #ffd700; }
        .tp-topbar-link i { font-size: 14px; }
        .tp-topbar-right {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .tp-social-link {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            border-radius: 4px;
            color: #fff;
            text-decoration: none;
            transition: opacity 0.2s;
        }
        .tp-social-link:hover { opacity: 0.8; }
        .tp-social-link i { font-size: 14px; }
        .tp-social-fb { background: #1877f2; }
        .tp-social-x { background: #000; }
        .tp-social-yt { background: #ff0000; }
        .tp-social-li { background: #0a66c2; }
        .tp-social-ig { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
        .tp-theme-toggle {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            border-radius: 4px;
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: #fff;
            cursor: pointer;
            transition: all 0.3s;
            margin-right: 12px;
        }
        .tp-theme-toggle:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(1.1);
        }
        .tp-theme-toggle i {
            font-size: 14px;
        }
        @media (max-width: 900px) {
            .tp-topbar-left { gap: 16px; }
            .tp-topbar-link span { display: none; }
        }
        @media (max-width: 600px) {
            .tp-topbar { display: none; }
        }

        /* Header Styles */
        .tp-header {
            background: #fff;
            padding: 12px 20px;
            border-bottom: 1px solid #e5e5e5;
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        .tp-header-inner {
            max-width: 1413px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;
        }
        .tp-header-left {
            display: flex;
            align-items: center;
            gap: 24px;
        }
        .tp-logo-desktop { height: 32px; width: auto; }
        .tp-logo-mobile { display: none; }
        .tp-categories-wrapper {
            position: static;
        }
        .tp-categories-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            background: none;
            border: none;
            cursor: pointer;
            font-family: inherit;
            font-size: 14px;
            font-weight: 500;
            color: #333;
            padding: 8px 0;
        }
        .tp-categories-btn i { font-size: 18px; color: #666; }
        .tp-categories-btn i:last-child { font-size: 12px; }
        .tp-categories-dropdown {
            position: absolute;
            top: calc(100% + 12px);
            left: 0;
            right: 0;
            background: #fff;
            border: 1px solid #e5e5e5;
            border-top: none;
            border-radius: 0 0 8px 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            padding: 30px 20px;
            display: none;
            z-index: 1001;
            margin-top: 0;
        }
        .tp-categories-dropdown.active {
            display: block;
        }
        .tp-categories-close {
            position: absolute;
            top: 15px;
            right: 20px;
            width: 36px;
            height: 36px;
            background: #f5f5f5;
            border: 1px solid #e5e5e5;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
            color: #666;
            font-size: 18px;
        }
        .tp-categories-close:hover {
            background: #ff4444;
            border-color: #ff4444;
            color: #fff;
        }
        .tp-categories-header-title {
            margin-bottom: 24px;
            padding-bottom: 20px;
            border-bottom: 1px solid #e5e5e5;
        }
        .tp-categories-header-title h2 {
            font-size: 32px;
            font-weight: 700;
            color: #1a1a1a;
            margin: 0 0 8px 0;
        }
        .tp-categories-header-title h2 span {
            color: #40A944;
        }
        .tp-categories-header-title p {
            font-size: 15px;
            color: #666;
            margin: 0;
        }
        .tp-categories-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 8px 30px;
        }
        .tp-cat-link {
            display: flex;
            align-items: center;
            padding: 12px 16px;
            color: #333;
            text-decoration: none;
            font-size: 14px;
            font-weight: 500;
            background: #f8f9fa;
            border-radius: 8px;
            transition: all 0.2s;
            border: 1px solid #e5e5e5;
        }
        .tp-cat-link:hover {
            background: #40A944;
            color: #fff;
            border-color: #40A944;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(64, 169, 68, 0.2);
        }
        .tp-cat-link-all {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 14px 20px;
            color: #fff;
            background: #40A944;
            text-decoration: none;
            font-size: 15px;
            font-weight: 600;
            border-radius: 8px;
            transition: background 0.2s;
        }
        .tp-cat-link-all:hover {
            background: #369b3d;
        }
        @media (max-width: 1200px) {
            .tp-categories-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }
        @media (max-width: 768px) {
            .tp-categories-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 8px 20px;
            }
        }
        @media (max-width: 480px) {
            .tp-categories-grid {
                grid-template-columns: 1fr;
            }
        }
        .tp-search-wrapper {
            position: relative;
            flex: 1;
            max-width: 500px;
            width: 429px;
        }
        .tp-search-wrapper .tp-search-icon {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 14px;
            color: #999;
        }
        .tp-search-input {
            width: 100%;
            padding: 10px 16px 10px 40px;
            border: 1px solid #e5e5e5;
            border-radius: 8px;
            font-size: 14px;
            font-family: inherit;
            background: #fafafa;
            transition: border-color 0.2s, background 0.2s;
        }
        .tp-search-input:focus {
            outline: none;
            border-color: #40A944;
            background: #fff;
        }
        .tp-search-input::placeholder { color: #999; }
        .tp-header-right {
            display: flex;
            align-items: center;
            gap: 24px;
        }
        .tp-nav-link {
            font-size: 14px;
            font-weight: 500;
            color: #333;
            text-decoration: none;
            transition: color 0.2s;
        }
        .tp-nav-link:hover { color: #40A944; }
        .tp-login-btn {
            background: #40A944;
            color: #fff;
            padding: 10px 24px;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 600;
            text-decoration: none;
            transition: background 0.2s;
        }
        .tp-login-btn:hover { background: #369b3d; }
        .tp-main-content { padding: 20px; }
        @media (max-width: 768px) {
            .tp-header-right .tp-nav-link { display: none; }
            .tp-search-wrapper { max-width: 250px; }
        }
        @media (max-width: 480px) {
            .tp-logo-desktop { display: none; }
            .tp-logo-mobile { display: block; height: 32px; }
            .tp-categories-btn span { display: none; }
            .tp-search-wrapper { max-width: 180px; }
        }

        .container {
            max-width: 1413px;
            margin: 0 auto;
        }

        .section-title {
            font-size: 26px;
            font-weight: 700;
            color: #1a1a1a;
            margin-bottom: 6px;
        }

        .section-title span { color: #00a651; font-weight: 700; }

        .section-subtitle {
            font-size: 13px;
            color: #666;
            margin-bottom: 16px;
        }

        .ai-subtitle {
            font-size: 14px;
            color: #555;
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
        }

        .ai-subtitle strong {
            color: #40A944;
            font-weight: 700;
        }

        .ai-sparkle {
            font-size: 16px;
            animation: sparkleFloat 2s ease-in-out infinite;
            color: #f59e0b;
            filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.5));
        }

        .ai-sparkle i {
            color: #f59e0b;
        }

        .ai-divider {
            color: #40A944;
            font-weight: bold;
        }

        @keyframes sparkleFloat {
            0%, 100% { transform: translateY(0) scale(1); }
            50% { transform: translateY(-2px) scale(1.1); }
        }

        /* Banner Slider */
        .banner-slider-wrap {
            position: relative;
            margin-bottom: 20px;
        }

        .banner-slider .swiper-slide {
            width: 300px;
        }

        .banner {
            display: block;
            border-radius: 16px;
            padding: 22px;
            position: relative;
            overflow: hidden;
            min-height: 155px;
            text-decoration: none;
            transition: transform 0.3s, box-shadow 0.3s;
        }

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

        .banner h3 {
            font-size: 22px;
            font-weight: 700;
            margin-bottom: 6px;
            position: relative;
            z-index: 5;
        }

        .banner p {
            font-size: 13px;
            margin-bottom: 16px;
            max-width: 170px;
            line-height: 1.4;
            position: relative;
            z-index: 5;
        }

        .banner .badge {
            display: inline-block;
            padding: 3px 10px;
            border-radius: 10px;
            font-size: 10px;
            font-weight: 700;
            margin-left: 8px;
            vertical-align: middle;
            position: relative;
            z-index: 5;
        }

        .banner .badge-top {
            position: absolute;
            top: 15px;
            right: 15px;
            margin-left: 0;
            z-index: 10;
        }

        .banner .btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 10px 20px;
            border-radius: 25px;
            font-size: 13px;
            font-weight: 600;
            text-decoration: none;
            transition: transform 0.2s;
            position: relative;
            z-index: 5;
        }

        .banner .btn:hover {
            transform: scale(1.03);
        }

        .banner .illus {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            width: 130px;
            height: 110px;
            z-index: 1;
        }

        /* Banner Variants */
        .banner-green {
            background: linear-gradient(135deg, #c8e6c9 0%, #81c784 100%);
        }
        .banner-green h3 { color: #1b5e20; }
        .banner-green .badge { background: #ff5722; color: #fff; }
        .banner-green .badge-top { background: #ff5722; color: #fff; }
        .banner-green p { color: #2e7d32; }
        .banner-green .btn { background: #1b5e20; color: #fff; }

        .banner-mint {
            background: #e8f5e9;
        }
        .banner-mint h3 { color: #1a1a1a; }
        .banner-mint .badge { background: #4caf50; color: #fff; }
        .banner-mint p { color: #555; }
        .banner-mint .btn { background: #1a1a1a; color: #fff; }

        .banner-violet {
            background: linear-gradient(135deg, #ede7f6 0%, #d1c4e9 100%);
        }
        .banner-violet h3 { color: #4a148c; }
        .banner-violet .badge { background: #7c4dff; color: #fff; }
        .banner-violet p { color: #5e35b1; }
        .banner-violet .btn { background: #5e35b1; color: #fff; }

        .banner-orange {
            background: linear-gradient(135deg, #ffb347 0%, #ff6f00 100%);
        }
        .banner-orange h3 { color: #fff; }
        .banner-orange p { color: rgba(255,255,255,0.9); }
        .banner-orange .btn { background: #fff; color: #e65100; }

        .banner-python {
            background: linear-gradient(135deg, #4B8BBE 0%, #306998 100%);
        }
        .banner-python h3 { color: #FFD43B; }
        .banner-python p { color: rgba(255,255,255,0.9); }
        .banner-python .btn { background: #FFD43B; color: #306998; }

        .banner-cyan {
            background: linear-gradient(135deg, #4dd0e1 0%, #00838f 100%);
        }
        .banner-cyan h3 { color: #fff; }
        .banner-cyan p { color: rgba(255,255,255,0.9); }
        .banner-cyan .btn { background: #fff; color: #00838f; }

        .banner-amber {
            background: linear-gradient(135deg, #ffca28 0%, #ff8f00 100%);
        }
        .banner-amber h3 { color: #fff; }
        .banner-amber p { color: rgba(255,255,255,0.95); }
        .banner-amber .btn { background: #fff; color: #e65100; }

        .banner-blue {
            background: linear-gradient(135deg, #64b5f6 0%, #1565c0 100%);
        }
        .banner-blue h3 { color: #fff; }
        .banner-blue p { color: rgba(255,255,255,0.9); }
        .banner-blue .btn { background: #e8f4fd; color: #1565c0; }

        .banner-purple {
            background: linear-gradient(135deg, #ce93d8 0%, #8e24aa 100%);
        }
        .banner-purple h3 { color: #fff; }
        .banner-purple p { color: rgba(255,255,255,0.9); }
        .banner-purple .btn { background: #fff; color: #7b1fa2; }

        .banner-teal {
            background: linear-gradient(135deg, #80cbc4 0%, #00897b 100%);
        }
        .banner-teal h3 { color: #fff; }
        .banner-teal p { color: rgba(255,255,255,0.9); }
        .banner-teal .btn { background: #fff; color: #00695c; }

        .banner-red {
            background: linear-gradient(135deg, #ef9a9a 0%, #e53935 100%);
        }
        .banner-red h3 { color: #fff; }
        .banner-red p { color: rgba(255,255,255,0.9); }
        .banner-red .btn { background: #fff; color: #c62828; }

        /* Navigation Buttons */
        .nav-btn {
            position: absolute;
            top: 46%;
            transform: translateY(-50%);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #fff;
            border: none;
            box-shadow: 0 2px 12px rgba(0,0,0,0.15);
            cursor: pointer;
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }

        .nav-btn:hover {
            background: #00a651;
            color: #fff;
        }

        .nav-btn svg {
            width: 20px;
            height: 20px;
        }

        .nav-prev { left: -20px; }
        .nav-next { right: -20px; }

        .nav-btn.swiper-button-disabled {
            opacity: 0.35;
            cursor: not-allowed;
            pointer-events: none;
        }

        /* Cards Grid */
        .cards-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
        }

        .card {
            background: #fff;
            border-radius: 14px;
            padding: 16px;
            display: flex;
            align-items: center;
            gap: 14px;
            text-decoration: none;
            transition: all 0.25s;
            box-shadow: 0 1px 3px rgba(0,0,0,0.04);
        }

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

        .card-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .card-icon svg { width: 24px; height: 24px; }

        .card h4 {
            font-size: 14px;
            font-weight: 600;
            color: #1a1a1a;
        }

        .card .count {
            font-size: 12px;
            color: #00a651;
            font-weight: 600;
        }

        .ic1 { background: #1a1a1a; } .ic1 svg { stroke: #fff; }
        .ic2 { background: #1a1a1a; } .ic2 svg { stroke: #fff; }
        .ic3 { background: #1a1a1a; } .ic3 svg { stroke: #fff; }
        .ic4 { background: #1a1a1a; } .ic4 svg { stroke: #fff; }
        .ic5 { background: #1a1a1a; } .ic5 svg { stroke: #fff; }
        .ic6 { background: #1a1a1a; } .ic6 svg { stroke: #fff; }
        .ic7 { background: #1a1a1a; } .ic7 svg { stroke: #fff; }
        .ic8 { background: #00a651; } .ic8 svg { stroke: #fff; }

        /* Expanded Cards Section */
        .cards-container { position: relative; }

        .cards-expanded {
            display: none;
        }

        .cards-expanded.active {
            display: block;
        }

        .cards-grid.hidden {
            display: none;
        }

        .cards-scroll {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
            max-height: 400px;
            overflow-y: auto;
            padding-right: 8px;
        }

        .cards-scroll::-webkit-scrollbar {
            width: 6px;
        }
        .cards-scroll::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 3px;
        }
        .cards-scroll::-webkit-scrollbar-thumb {
            background: #ccc;
            border-radius: 3px;
        }
        .cards-scroll::-webkit-scrollbar-thumb:hover {
            background: #aaa;
        }

        .card-small {
            background: #fff;
            border-radius: 14px;
            padding: 16px;
            display: flex;
            align-items: center;
            gap: 14px;
            text-decoration: none;
            transition: all 0.25s;
            box-shadow: 0 1px 3px rgba(0,0,0,0.04);
        }

        .card-small:hover {
            box-shadow: 0 6px 20px rgba(0,0,0,0.08);
            transform: translateY(-2px);
        }

        .card-icon-sm {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .card-icon-sm svg {
            width: 24px;
            height: 24px;
        }

        .card-small h4 {
            font-size: 14px;
            font-weight: 600;
            color: #1a1a1a;
        }

        .card-small span {
            font-size: 12px;
            color: #00a651;
            font-weight: 600;
        }

        .see-all-btn {
            cursor: pointer;
        }

        .collapse-btn {
            cursor: pointer;
        }
        .collapse-btn .card-icon-sm {
            background: #e53935 !important;
        }
        .collapse-btn .card-icon-sm svg {
            stroke: #fff;
        }
        .collapse-btn h4 { color: #c62828; }
        .collapse-btn span { color: #e53935; }

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

        @media (max-width: 900px) {
            .cards-grid { grid-template-columns: repeat(2, 1fr); }
            .banner-slider .swiper-slide { width: 260px; }
            .nav-btn { display: none; }
            .cards-scroll { grid-template-columns: repeat(2, 1fr); }
        }

        @media (max-width: 600px) {
            .cards-scroll { grid-template-columns: repeat(1, 1fr); }
        }

        /* Code Practice Section Styles */
        .practice-section {
            margin-top: 40px;
            padding: 30px;
            background: #fffef8;
            border-radius: 16px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.04);
            border: 1px solid #f0eedf;
        }

        .practice-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            flex-wrap: wrap;
            gap: 16px;
            margin-bottom: 10px;
        }

        .practice-title-wrapper {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
        }

        .practice-title-wrapper .section-title {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        /* Cute Animated Robot */
        .ai-robot {
            width: 42px;
            height: 42px;
            position: relative;
            display: inline-block;
            vertical-align: middle;
        }

        .robot-head {
            width: 32px;
            height: 26px;
            background: linear-gradient(135deg, #40A944 0%, #2d8a30 100%);
            border-radius: 8px;
            position: absolute;
            top: 8px;
            left: 5px;
            box-shadow: 0 3px 10px rgba(64, 169, 68, 0.3);
        }

        .robot-eye {
            width: 6px;
            height: 6px;
            background: #fff;
            border-radius: 50%;
            position: absolute;
            top: 8px;
            animation: robotBlink 3s infinite;
        }

        .robot-eye.left { left: 6px; }
        .robot-eye.right { right: 6px; }

        .robot-mouth {
            width: 12px;
            height: 4px;
            background: #fff;
            border-radius: 0 0 4px 4px;
            position: absolute;
            bottom: 5px;
            left: 50%;
            transform: translateX(-50%);
            animation: robotSmile 2s ease-in-out infinite;
        }

        .robot-antenna {
            width: 4px;
            height: 10px;
            background: linear-gradient(to top, #40A944, #6fd672);
            border-radius: 2px;
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            animation: robotBounce 1s ease-in-out infinite;
        }

        .robot-antenna::after {
            content: '';
            width: 8px;
            height: 8px;
            background: #6fd672;
            border-radius: 50%;
            position: absolute;
            top: -6px;
            left: 50%;
            transform: translateX(-50%);
            box-shadow: 0 0 8px rgba(111, 214, 114, 0.6);
            animation: robotGlow 1.5s ease-in-out infinite;
        }

        .robot-ear {
            width: 4px;
            height: 10px;
            background: #2d8a30;
            border-radius: 2px;
            position: absolute;
            top: 14px;
        }

        .robot-ear.left { left: 1px; }
        .robot-ear.right { right: 1px; }

        @keyframes robotBlink {
            0%, 90%, 100% { transform: scaleY(1); }
            95% { transform: scaleY(0.1); }
        }

        @keyframes robotSmile {
            0%, 100% { width: 12px; }
            50% { width: 14px; }
        }

        @keyframes robotBounce {
            0%, 100% { transform: translateX(-50%) translateY(0); }
            50% { transform: translateX(-50%) translateY(-3px); }
        }

        @keyframes robotGlow {
            0%, 100% { box-shadow: 0 0 8px rgba(111, 214, 114, 0.6); }
            50% { box-shadow: 0 0 15px rgba(111, 214, 114, 1); }
        }

        /* Header Navigation Buttons */
        .practice-header-nav {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .practice-header-nav .nav-btn {
            position: static;
            transform: none;
            width: 36px;
            height: 36px;
            background: transparent;
            border: 1px solid #e8e4d9;
        }

        .practice-header-nav .nav-btn:hover {
            background: #40A944;
            border-color: #40A944;
            color: #fff;
        }

        .practice-stats-slider-wrap {
            position: relative;
            margin: 24px 0;
        }

        .practice-stats-slider {
            overflow: hidden;
        }

        .practice-stats-slider .swiper-slide {
            width: auto;
        }

        .practice-stat-card {
            min-width: 160px;
            background: transparent;
            border-radius: 12px;
            padding: 20px;
            display: flex;
            align-items: center;
            gap: 16px;
            border: 1px solid #e8e4d9;
            cursor: pointer;
            transition: all 0.2s;
        }

        .practice-stat-card:hover {
            border-color: #40A944;
            background: rgba(64,169,68,0.05);
        }

        .practice-stat-icon {
            width: 50px;
            height: 50px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            background: rgba(0,0,0,0.04);
        }

        .practice-stat-icon i {
            font-size: 24px;
        }

        /* Company icon colors */
        .practice-stat-icon.company-google { background: rgba(66,133,244,0.1); color: #4285f4; }
        .practice-stat-icon.company-amazon { background: rgba(255,153,0,0.1); color: #ff9900; }
        .practice-stat-icon.company-microsoft { background: rgba(0,120,215,0.1); color: #0078d7; }
        .practice-stat-icon.company-meta { background: rgba(24,119,242,0.1); color: #1877f2; }
        .practice-stat-icon.company-apple { background: rgba(0,0,0,0.08); color: #333; }
        .practice-stat-icon.company-adobe { background: rgba(255,0,0,0.08); color: #ff0000; }
        .practice-stat-icon.company-netflix { background: rgba(229,9,20,0.1); color: #e50914; }
        .practice-stat-icon.company-uber { background: rgba(0,0,0,0.08); color: #000; }
        .practice-stat-icon.company-linkedin { background: rgba(10,102,194,0.1); color: #0a66c2; }
        .practice-stat-icon.company-twitter { background: rgba(0,0,0,0.08); color: #000; }
        .practice-stat-icon.company-spotify { background: rgba(30,215,96,0.1); color: #1ed760; }
        .practice-stat-icon.company-bloomberg { background: rgba(0,0,0,0.08); color: #000; }
        .practice-stat-icon.company-airbnb { background: rgba(255,90,95,0.1); color: #ff5a5f; }
        .practice-stat-icon.company-oracle { background: rgba(255,0,0,0.08); color: #f00; }

        .practice-stat-info {
            display: flex;
            flex-direction: column;
        }

        .practice-stat-value {
            font-size: 24px;
            font-weight: 700;
            color: #1a1a1a;
        }

        .practice-stat-label {
            font-size: 13px;
            color: #666;
        }

        .practice-filters {
            display: flex;
            gap: 16px;
            margin-bottom: 20px;
            flex-wrap: wrap;
            align-items: center;
        }

        .practice-search {
            flex: 1;
            min-width: 250px;
            position: relative;
        }

        .practice-search-icon {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: #888;
            font-size: 14px;
            z-index: 2;
            pointer-events: none;
        }

        .practice-search input {
            width: 100%;
            padding: 12px 16px 12px 42px;
            border: 1px solid #e8e4d9;
            border-radius: 8px;
            font-size: 14px;
            outline: none;
            transition: border-color 0.2s;
            background: transparent;
        }

        .practice-search input:focus {
            border-color: #40A944;
            background: rgba(255,255,255,0.5);
        }

        .practice-filter-btns {
            display: flex;
            gap: 8px;
        }

        .practice-filter-btn {
            padding: 10px 18px;
            border: 1px solid #e8e4d9;
            border-radius: 8px;
            background: transparent;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.2s;
            font-weight: 500;
        }

        .practice-filter-btn:hover {
            border-color: #40A944;
            color: #40A944;
        }

        .practice-filter-btn.active {
            background: #40A944;
            border-color: #40A944;
            color: #fff;
        }

        .practice-topic-select {
            padding: 10px 16px;
            border: 1px solid #e8e4d9;
            border-radius: 8px;
            font-size: 14px;
            cursor: pointer;
            outline: none;
            min-width: 140px;
            background: transparent;
        }

        .practice-topic-select:focus {
            border-color: #40A944;
        }

        .practice-table-container {
            background: transparent;
            border-radius: 12px;
            overflow: hidden;
            border: 1px solid #e8e4d9;
        }

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

        .practice-table th {
            text-align: left;
            padding: 14px 16px;
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            color: #666;
            background: rgba(0,0,0,0.03);
            border-bottom: 1px solid #e8e4d9;
        }

        .practice-table td {
            padding: 14px 16px;
            border-bottom: 1px solid #f0eedf;
            font-size: 14px;
        }

        .practice-table tbody tr:hover {
            background: rgba(64,169,68,0.06);
        }

        .practice-table tbody tr:nth-child(even) {
            background: rgba(0,0,0,0.02);
        }

        .practice-table tbody tr:nth-child(even):hover {
            background: rgba(64,169,68,0.08);
        }

        .practice-problem-link {
            color: #1a1a1a;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.2s;
        }

        .practice-problem-link:hover {
            color: #40A944;
        }

        .practice-difficulty {
            padding: 4px 10px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 600;
        }

        .practice-difficulty.easy { background: rgba(64,169,68,0.12); color: #40A944; }
        .practice-difficulty.medium { background: rgba(255,165,0,0.12); color: #e69500; }
        .practice-difficulty.hard { background: rgba(239,68,68,0.12); color: #ef4444; }

        .practice-topics {
            display: flex;
            gap: 6px;
            flex-wrap: nowrap;
        }

        .practice-topic-tag {
            padding: 3px 8px;
            background: rgba(0,0,0,0.05);
            border-radius: 4px;
            font-size: 11px;
            color: #666;
        }

        .practice-pagination {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20px;
            flex-wrap: wrap;
            gap: 16px;
        }

        .practice-pagination-info {
            font-size: 14px;
            color: #666;
        }

        .practice-pagination-info span {
            font-weight: 600;
            color: #1a1a1a;
        }

        .practice-pagination-btns {
            display: flex;
            gap: 8px;
        }

        .practice-page-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 38px;
            height: 38px;
            padding: 0 12px;
            border: 1px solid #e8e4d9;
            border-radius: 8px;
            background: transparent;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.2s;
            text-decoration: none;
            color: #333;
        }

        .practice-page-btn:hover:not(.disabled):not(.active) {
            border-color: #40A944;
            color: #40A944;
        }

        .practice-page-btn:disabled,
        .practice-page-btn.disabled {
            opacity: 0.5;
            cursor: not-allowed;
            pointer-events: none;
        }

        .practice-page-btn.active {
            background: #40A944;
            border-color: #40A944;
            color: #fff;
        }

        @media (max-width: 768px) {
            .practice-filters { flex-direction: column; align-items: stretch; }
            .practice-search { min-width: 100%; }
            .practice-filter-btns { justify-content: center; }
            .practice-table th:nth-child(3), .practice-table td:nth-child(3) { display: none; }
            .practice-header-nav { display: none; }
        }

        /* Coding Ground Section - Light Theme */
        .coding-ground {
            padding: 0 0 60px 0;
            margin-top: 0;
            position: relative;
            overflow: hidden;
        }

        .coding-ground-card {
            background: #fffef8;
            border-radius: 0 0 16px 16px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.04);
            border: 1px solid #f0eedf;
            border-top: none;
            padding: 50px 30px 50px 30px;
            position: relative;
            overflow: hidden;
        }

        .coding-ground-card::before {
            content: '';
            background-image: url('https://www.tutorialspoint.com/static/img/auth/bg-bottom.png');
            background-repeat: no-repeat;
            background-position: bottom -4rem right -3rem;
            position: absolute;
            inset: 0;
            opacity: .06;
            z-index: 0;
        }

        .coding-ground .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        .coding-ground__grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            align-items: center;
            position: relative;
            z-index: 1;
        }

        .coding-ground__image-wrapper {
            position: relative;
            background: #fff;
            border-radius: 12px;
            padding: 16px;
            border: 1px solid #ccc;
        }

        .coding-ground__code-block {
            background: #1a1a2e;
            border-radius: 12px;
            padding: 24px 30px;
            font-family: 'Consolas', 'Monaco', monospace;
            font-size: 14px;
            line-height: 1.8;
            position: relative;
        }

        .coding-ground__code-block .code-line {
            display: flex;
            align-items: center;
            color: #c8c8c8;
        }

        .coding-ground__code-block .code-line .edit-btn {
            margin-left: 30px;
        }

        .coding-ground__code-block .edit-btn {
            background: #00a651;
            color: #fff;
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            text-decoration: none;
            font-family: 'Inter', sans-serif;
            transition: all 0.2s;
            white-space: nowrap;
        }

        .coding-ground__code-block .edit-btn:hover {
            background: #059669;
            transform: scale(1.05);
        }

        .coding-ground__code-block .code-keyword { color: #cc99cc; }
        .coding-ground__code-block .code-class { color: #99cc99; }
        .coding-ground__code-block .code-string { color: #f2c68a; }
        .coding-ground__code-block .code-comment { color: #7a8a7a; }
        .coding-ground__code-block .code-method { color: #cc99cc; }
        .coding-ground__code-block .code-text { color: #c8c8c8; }

        .coding-ground__content h2 {
            font-size: 42px;
            font-weight: 700;
            color: #1a1a1a;
            margin-bottom: 8px;
        }

        .coding-ground__content h2 span {
            color: #00a651;
        }

        .coding-ground__start {
            color: #1a1a1a !important;
        }

        /* 2. Dark Theme: Force ONLY "Start Coding" to be White */
        body.dark-theme .coding-ground__start {
            color: #ffffff !important;
        }

        body.dark-theme .coding-ground__image-wrapper{
            background: #383838ff;
            border: 0px solid #ccc;

        }
        /* 1. Target both Main Cards and Small Scrollable Cards */
        body.dark-theme .card,
        body.dark-theme .card-small {
            background-color: #2d2d2d;       /* Dark Grey Background */
            border: 1px solid #444;          /* Subtle Border for definition */
            box-shadow: 0 4px 6px rgba(0,0,0,0.2); /* Soft shadow */
        }

        /* 2. Change Text Color to White */
        body.dark-theme .card h4,
        body.dark-theme .card-small h4 {
            color: #e5e5e5;
        }

        /* 3. Make the "Count" text distinct (optional: keep green or make slightly brighter) */
        body.dark-theme .card .count,
        body.dark-theme .card-small span {
            color: #00a651;
            font-weight: 600;
        }

        /* 4. Hover Effects for Dark Theme */
        body.dark-theme .card:hover,
        body.dark-theme .card-small:hover {
            background-color: #333;          /* Slightly lighter on hover */
            border-color: #00a651;           /* Green border on hover */
            transform: translateY(-2px);
            box-shadow: 0 8px 15px rgba(0,0,0,0.4);
        }

        /* 5. Fix the "Collapse" button text color in Dark Mode (it was getting overridden) */
        body.dark-theme .collapse-btn h4 {
            color: #ff5252; /* Lighter red for better visibility on dark */
        }
        body.dark-theme .collapse-btn span {
            color: #ff8a80;
        }
        .coding-ground__subtitle {
            font-size: 18px;
            font-weight: 600;
            color: #333;
            margin-bottom: 12px;
        }

        .coding-ground__badge {
            display: inline-block;
            background: #00a651;
            color: #fff;
            padding: 6px 14px;
            border-radius: 4px;
            font-size: 13px;
            font-weight: 600;
            margin-bottom: 16px;
        }

        .coding-ground__description {
            color: #666;
            font-size: 14px;
            line-height: 1.6;
            margin-bottom: 28px;
            max-width: 450px;
        }

        .coding-ground__buttons {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            max-width: 400px;
        }

        .coding-ground__btn {
            padding: 14px 24px;
            border-radius: 10px;
            font-size: 15px;
            font-weight: 500;
            text-decoration: none;
            text-align: center;
            transition: all 0.2s;
        }

        .coding-ground__btn strong {
            font-weight: 700;
        }

        .coding-ground__btn--java {
            background: #e8f5e9;
            color: #2d4a2d;
            border: 1px solid #c8e6c9;
        }
        .coding-ground__btn--java:hover {
            background: #c8e6c9;
            transform: translateY(-2px);
        }

        .coding-ground__btn--python {
            background: #fff8e1;
            color: #4a4a20;
            border: 1px solid #ffecb3;
        }
        .coding-ground__btn--python:hover {
            background: #ffecb3;
            transform: translateY(-2px);
        }

        .coding-ground__btn--cpp {
            background: #e3f2fd;
            color: #1565c0;
            border: 1px solid #bbdefb;
        }
        .coding-ground__btn--cpp:hover {
            background: #bbdefb;
            transform: translateY(-2px);
        }

        .coding-ground__btn--html {
            background: #fce4ec;
            color: #c62828;
            border: 1px solid #f8bbd9;
        }
        .coding-ground__btn--html:hover {
            background: #f8bbd9;
            transform: translateY(-2px);
        }

        @media (max-width: 900px) {
            .coding-ground__grid {
                grid-template-columns: 1fr;
                gap: 30px;
            }
            .coding-ground__content h2 {
                font-size: 28px;
            }
            .coding-ground__image-wrapper {
                order: 2;
            }
            .coding-ground__content {
                order: 1;
            }
        }

        /* Tutorials Library Section - Prototype 6 */
        .proto6-layout {
            display: grid;
            grid-template-columns: 350px 1fr;
            gap: 30px;
            max-width: 1413px;
            margin: 0 auto;
            padding: 60px 0;
        }

        .proto6-sidebar {
            background: linear-gradient(180deg, #00a651 0%, #059669 100%);
            border-radius: 20px;
            padding: 30px;
            color: #fff;
        }

        .proto6-sidebar h2 {
            font-size: 28px;
            margin-bottom: 12px;
        }

        .proto6-sidebar p {
            font-size: 14px;
            opacity: 0.9;
            margin-bottom: 30px;
            line-height: 1.6;
        }

        .proto6-cat-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .proto6-cat-item {
            padding: 14px 20px;
            background: rgba(255,255,255,0.1);
            border-radius: 12px;
            color: #fff;
            text-decoration: none;
            font-size: 14px;
            font-weight: 500;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: all 0.2s;
        }

        .proto6-cat-item:hover, .proto6-cat-item.active {
            background: rgba(255,255,255,0.25);
        }

        .proto6-cat-item .count {
            background: rgba(255,255,255,0.2);
            padding: 4px 10px;
            border-radius: 10px;
            font-size: 12px;
        }

        .proto6-main {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 20px;
            align-content: start;
        }

        .proto6-card {
            background: #fff;
            border-radius: 16px;
            padding: 24px;
            text-align: center;
            text-decoration: none;
            border: 1px solid #eee;
            transition: all 0.3s;
        }

        .proto6-card:hover {
            border-color: #00a651;
            box-shadow: 0 8px 25px rgba(0,0,0,0.08);
        }

        .proto6-card img {
            width: 52px;
            height: 52px;
            margin-bottom: 14px;
        }

        .proto6-card h4 {
            font-size: 14px;
            font-weight: 600;
            color: #1a1a1a;
        }

        @media (max-width: 1200px) {
            .proto6-main { grid-template-columns: repeat(4, 1fr); }
        }

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

        @media (max-width: 900px) {
            .proto6-layout { grid-template-columns: 1fr; }
            .proto6-main { grid-template-columns: repeat(4, 1fr); }
        }

        @media (max-width: 600px) {
            .proto6-main { grid-template-columns: repeat(2, 1fr); margin: 10px;}
            .dev-tools-card{ margin: 10px;padding-bottom:0px; margin-bottom:0px}
            .coding-ground{ margin: 0px 10px 10px 10px}

        }

        /* Dark Theme Styles */
        body.dark-theme {
            background: #1a1a1a;
            color: #e5e5e5;
        }
        body.dark-theme .tp-header {
            background: #2d2d2d;
            border-bottom-color: #444;
        }
        body.dark-theme .tp-search-input {
            background: #1a1a1a;
            border-color: #444;
            color: #e5e5e5;
        }
        body.dark-theme .tp-search-input::placeholder {
            color: #888;
        }
        body.dark-theme .tp-nav-link {
            color: #e5e5e5;
        }
        body.dark-theme .tp-logo-desktop path[fill="var(--clr-text)"],
        body.dark-theme .tp-logo-mobile path[fill="var(--clr-text)"] {
            fill: #fff;
        }
        body.dark-theme .tp-categories-btn {
            color: #e5e5e5;
        }
        body.dark-theme .tp-categories-dropdown {
            background: #2d2d2d;
            border-color: #444;
        }
        body.dark-theme .tp-categories-header-title h2 {
            color: #e5e5e5;
        }
        body.dark-theme .tp-categories-header-title p {
            color: #aaa;
        }
        body.dark-theme .tp-categories-header-title {
            border-bottom-color: #444;
        }
        body.dark-theme .tp-cat-link {
            background: #1a1a1a;
            color: #e5e5e5;
            border-color: #444;
        }
        body.dark-theme .section-title {
            color: #e5e5e5;
        }
        body.dark-theme .section-subtitle {
            color: #aaa;
        }
        body.dark-theme .dev-tools-section {
            background: #1a1a1a;
        }
        body.dark-theme .dev-tools-card {
            background: #2d2d2d;
            border-color: #444;
        }
        body.dark-theme .dev-tools-title {
            color: #e5e5e5;
        }
        body.dark-theme .dev-tools-subtitle {
            color: #aaa;
        }
        body.dark-theme .dev-tools-nav .nav-btn {
            background: #1a1a1a;
            border-color: #444;
            color: #aaa;
        }
        body.dark-theme .dev-tools-nav .nav-btn:hover {
            background: #00a651;
            border-color: #00a651;
            color: #fff;
        }
        body.dark-theme .dev-tool-card {
            background: #1a1a1a;
            border-color: #333;
        }
        body.dark-theme .dev-tool-card:hover {
            background: #2d2d2d;
            border-color: #00a651;
        }
        body.dark-theme .dev-tool-card h4 {
            color: #e5e5e5;
        }
        body.dark-theme .dev-tool-view-all {
            background: #00a651;
        }
        body.dark-theme .coding-ground {
            background: #0d1117;
        }
        body.dark-theme .coding-ground-card {
            background: #0d1117;
            border-color: #30363d;
        }
        body.dark-theme .coding-ground__code-block {
            background: #0d1117;
            border-color: #30363d;
        }
        body.dark-theme .coding-ground__code-block pre {
            color: #e5e5e5;
        }
        body.dark-theme .code-keyword {
            color: #ff7b72;
        }
        body.dark-theme .code-class {
            color: #79c0ff;
        }
        body.dark-theme .code-method {
            color: #d2a8ff;
        }
        body.dark-theme .code-string {
            color: #a5d6ff;
        }
        body.dark-theme .code-comment {
            color: #8b949e;
        }
        body.dark-theme .coding-ground__right h2 {
            color: #fff;
        }
        body.dark-theme .coding-ground__right h2 .coding-ground__start {
            color: #ffd700;
        }
        body.dark-theme .coding-ground__right h3 {
            color: #e5e5e5;
        }
        body.dark-theme .coding-ground__right p {
            color: #8b949e;
        }
        body.dark-theme .coding-ground__cta-button {
            background: #00a651;
            color: #fff;
        }
        body.dark-theme .coding-ground__cta-button:hover {
            background: #008f45;
        }
        body.dark-theme .coding-ground__btn--java {
            background: #1a1a1a;
            border-color: #30363d;
            color: #e5e5e5;
        }
        body.dark-theme .coding-ground__btn--java:hover {
            background: #2d2d2d;
            border-color: #00a651;
        }
        body.dark-theme .coding-ground__btn--python {
            background: #1a1a1a;
            border-color: #30363d;
            color: #e5e5e5;
        }
        body.dark-theme .coding-ground__btn--python:hover {
            background: #2d2d2d;
            border-color: #00a651;
        }
        body.dark-theme .coding-ground__btn--cpp {
            background: #1a1a1a;
            border-color: #30363d;
            color: #e5e5e5;
        }
        body.dark-theme .coding-ground__btn--cpp:hover {
            background: #2d2d2d;
            border-color: #00a651;
        }
        body.dark-theme .coding-ground__btn--html {
            background: #1a1a1a;
            border-color: #30363d;
            color: #e5e5e5;
        }
        body.dark-theme .coding-ground__btn--html:hover {
            background: #2d2d2d;
            border-color: #00a651;
        }
        body.dark-theme .coding-ground__subtitle {
            color: #aaa;
        }
        body.dark-theme .coding-ground__description {
            color: #8b949e;
        }
        body.dark-theme .compiler-card {
            background: #1a1a1a;
            border-color: #30363d;
        }
        body.dark-theme .compiler-card:hover {
            background: #2d2d2d;
        }
        body.dark-theme .compiler-card h4 {
            color: #e5e5e5;
        }
        body.dark-theme .footer {
            background: #2d2d2d;
            border-top-color: #444;
        }
        body.dark-theme .footer__list li a {
            color: #aaa;
        }
        body.dark-theme .footer__legal-wrapper {
            background: #1a1a1a;
        }
        body.dark-theme .footer__legal p {
            color: #aaa;
        }
        body.dark-theme .footer__logo {
            filter: brightness(0) invert(1);
        }
        body.dark-theme .proto6-sidebar {
            background: linear-gradient(180deg, #00a651 0%, #059669 100%);
        }
        body.dark-theme .proto6-sidebar h2 {
            color: #fff;
        }
        body.dark-theme .proto6-sidebar p {
            color: #fff;
        }
        body.dark-theme .proto6-cat-item {
            background: rgba(255,255,255,0.1);
            color: #fff;
        }
        body.dark-theme .proto6-cat-item:hover,
        body.dark-theme .proto6-cat-item.active {
            background: rgba(255,255,255,0.25);
        }
        body.dark-theme .proto6-card {
            background: #2d2d2d;
            border-color: #444;
        }
        body.dark-theme .proto6-card:hover {
            border-color: #00a651;
            background: #333;
        }
        body.dark-theme .proto6-card h4 {
            color: #e5e5e5;
        }
        /* --- Dark Theme: Code Practice Section --- */

        /* 1. Main Container */
        body.dark-theme .practice-section {
            background: #2d2d2d;       /* Dark Grey background */
            border-color: #444;        /* Darker border */
            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
        }

        /* 2. Headings & Text */
        body.dark-theme .practice-section .section-title {
            color: #e5e5e5;
        }
        body.dark-theme .practice-section .section-subtitle,
        body.dark-theme .practice-pagination-info {
            color: #aaa;
        }
        body.dark-theme .practice-pagination-info span {
            color: #fff;
        }

        /* 3. Company Stats Cards (Google, Amazon, etc.) */
        body.dark-theme .practice-stat-card {
            border-color: #444;
            background: #333;          /* Slightly lighter than container */
        }
        body.dark-theme .practice-stat-card:hover {
            background: #3a3a3a;
            border-color: #00a651;
        }
        body.dark-theme .practice-stat-value {
            color: #fff;
        }
        body.dark-theme .practice-stat-label {
            color: #bbb;
        }
        body.dark-theme .practice-stat-icon {
            background: rgba(255,255,255,0.05); /* Subtle background for icons */
        }

        /* 4. Search Bar & Dropdowns */
        body.dark-theme .practice-search input,
        body.dark-theme .practice-topic-select {
            background: #1a1a1a;
            border-color: #555;
            color: #e5e5e5;
        }
        body.dark-theme .practice-search input::placeholder {
            color: #888;
        }

        /* 5. Filter Buttons (Easy, Medium, Hard) */
        body.dark-theme .practice-filter-btn {
            border-color: #555;
            color: #aaa;
        }
        body.dark-theme .practice-filter-btn:hover {
            color: #00a651;
            border-color: #00a651;
        }
        body.dark-theme .practice-filter-btn.active {
            background: #00a651;
            color: #fff;
            border-color: #00a651;
        }

        /* 6. Table Styling */
        body.dark-theme .practice-table-container {
            border-color: #444;
        }
        body.dark-theme .practice-table th {
            background: #262626;      /* Darker header */
            color: #aaa;
            border-bottom-color: #444;
        }
        body.dark-theme .practice-table td {
            border-bottom-color: #444;
            color: #ddd;
        }
        body.dark-theme .practice-problem-link {
            color: #e5e5e5;
        }
        body.dark-theme .practice-problem-link:hover {
            color: #00a651;
        }
        /* Table Row Hover & Striping */
        body.dark-theme .practice-table tbody tr:hover {
            background: rgba(255,255,255,0.05);
        }
        body.dark-theme .practice-table tbody tr:nth-child(even) {
            background: rgba(255,255,255,0.02);
        }

        /* 7. Pagination Buttons */
        body.dark-theme .practice-page-btn {
            background: #1a1a1a;
            border-color: #555;
            color: #e5e5e5;
        }
        body.dark-theme .practice-page-btn:hover:not(:disabled) {
            color: #00a651;
            border-color: #00a651;
        }
        body.dark-theme .practice-page-btn.active {
            background: #00a651;
            border-color: #00a651;
            color: #fff;
        }
        body.dark-theme .practice-page-btn:disabled,
        body.dark-theme .practice-page-btn.disabled {
            opacity: 0.3;
            background: #2d2d2d;
            pointer-events: none;
        }

        /* 8. Top Right Arrows */
        body.dark-theme .practice-header-nav .nav-btn {
            background: transparent;
            border-color: #555;
            color: #aaa;
        }
        body.dark-theme .practice-header-nav .nav-btn:hover {
            background: #00a651;
            border-color: #00a651;
            color: #fff;
        }
        /* --- Mobile Responsive Enhancements --- */

        @media (max-width: 768px) {
            /* 1. Hide the Top Bar (Green Row) completely */
            .tp-topbar {
                display: none !important;
            }

            /* 2. Fix Main Header Spacing */
            .tp-header {
                padding: 12px 15px;
            }

            .tp-header-inner {
                gap: 10px;
            }

            .tp-header-left {
                gap: 15px; /* Reduce gap between Logo, Cat, Search */
                justify-content: space-between; /* Distribute items nicely */
            }

            /* 3. Categories Button: Icon Only */
            .tp-categories-btn span,          /* Hide Text */
            .tp-categories-btn i:last-child { /* Hide Arrow */
                display: none;
            }

            .tp-categories-btn {
                padding: 8px; /* Square shape */
            }

            .tp-categories-btn i:first-child {
                font-size: 22px; /* Make the grid icon larger */
                color: #333;
            }

            /* 4. Search Box: Icon Only */
            .tp-search-input {
                display: none; /* Hide the text box */
            }

            .ai-subtitle {
                display: inline;
            }
            .tp-search-wrapper {
                width: auto;       /* Shrink wrapper to fit icon */
                max-width: none;
                background: transparent; /* Remove background */
                border: none;
                padding: 0;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .tp-search-wrapper .tp-search-icon {
                position: static; /* Reset absolute position */
                transform: none;
                font-size: 20px;
                color: #333;
                padding: 5px;
                cursor: pointer;
            }

            /* Dark Theme Adjustments for these Icons */
            body.dark-theme .tp-categories-btn i:first-child,
            body.dark-theme .tp-search-wrapper .tp-search-icon {
                color: #e5e5e5;
            }

            /* Hide Desktop Navigation Links, Keep Login if needed */
            .tp-header-right .tp-nav-link {
                display: none;
            }
            /* 1. Header Adjustments */
            .tp-header {
                padding: 10px 15px;
            }

            .tp-header-left {
                gap: 12px;
            }

            /* Make search bar full width on its own row if needed,
            or keep it compact. Here we ensure it doesn't overflow. */
            .tp-search-wrapper {
                max-width: 200px;
            }

            /* 2. Banner Slider */
            /* Let slides take up most of the screen width for better visibility */
            .banner-slider .swiper-slide {
                width: 85vw;
            }

            .banner {
                min-height: 140px; /* Slightly compact */
                padding: 20px;
            }

            /* 3. Cards Grid: Switch to 1 column on smaller tablets/phones */
            .cards-grid {
                grid-template-columns: repeat(2, 1fr); /* 2 cols for tablets */
                gap: 10px;
            }

            /* 4. Practice Section */
            .practice-section {
                padding: 20px 15px; /* Reduce padding */
            }

            .practice-header {
                flex-direction: column;
                align-items: flex-start;
            }

            .practice-title-wrapper {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }

            .practice-filters {
                gap: 12px;
            }

            .practice-filter-btns {
                width: 100%;
                overflow-x: auto; /* Allow scrolling for filter buttons */
                padding-bottom: 5px; /* Space for scrollbar */
                justify-content: flex-start;
            }

            .practice-filter-btn {
                flex-shrink: 0; /* Prevent buttons from squishing */
            }

            /* 5. Practice Table - Critical Mobile Fix */
            .practice-table-container {
                overflow-x: auto; /* Enable horizontal scroll for table */
                display: block;
                width: 100%;
            }

            .practice-table {
                min-width: 600px; /* Force table to keep shape so it scrolls */
            }

            /* 6. Coding Ground */
            .coding-ground-card {
                padding: 20px;
            }

            .coding-ground__buttons {
                grid-template-columns: 1fr; /* Stack buttons vertically */
                width: 61%;
            }
        }

        @media (max-width: 480px) {
            /* --- Specific Styles for Phones --- */

            /* 1. Header: Hide Search on very small screens if cluttering
            (Optional: toggle visibility with JS) */
            .tp-search-wrapper {
                display: none;
            }

            /* 2. Cards: 1 Column for best readability */
            .cards-grid {
                grid-template-columns: 1fr;
            }

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

            /* 3. Typography Scaling */
            .section-title {
                font-size: 18px;
            }

            .coding-ground__content h2 {
                font-size: 24px;
            }

            /* 4. Robot Animation: Scale down to fit */
            .ai-robot {
                transform: scale(0.8);
                margin-left: -5px;
            }

            /* 5. Pagination: Stack/Compact */
            .practice-pagination {
                justify-content: center;
                flex-direction: column;
                gap: 15px;
            }
        }
        /* 1. Allow the slide container to stretch vertically */
        .banner-slider .swiper-slide {
            height: auto;      /* Let Swiper calculate height based on the tallest item */
            display: flex;     /* Enable Flexbox */
        }

        /* 2. Force the banner link to fill that full height */
        .banner {
            height: 100%;      /* Fill the parent slide's height */
            display: flex;
            flex-direction: column;
            justify-content: space-between; /* Push the button to the bottom if content is short */
            width: 100%;       /* Ensure full width */
        }

        /* Optional: Ensure the description text doesn't push the button too far down unnecessarily */
        .banner p {
            flex-grow: 1;      /* Allow text area to grow to fill gaps */
        }
       /* Hero Image Theme Toggle */
       .hero-light { display: block; }
       .hero-dark { display: none; }

       body.dark-theme .hero-light { display: none; }
       body.dark-theme .hero-dark { display: block; }
       a.practice-stat-card {
           text-decoration: none;
           color: inherit;
       }
.company-bloomberg { background: rgba(0,0,0,0.08); color: #000; }
.company-oracle { background: rgba(255,0,0,0.08); color: #f00; }
.company-salesforce { background: rgba(0,161,224,0.1); color: #00a1e0; }
.company-paypal { background: rgba(0,48,135,0.1); color: #003087; }
.company-nvidia { background: rgba(118,185,0,0.1); color: #76b900; }
.company-intel { background: rgba(0,113,197,0.1); color: #0071c5; }
.company-ibm { background: rgba(0,98,152,0.1); color: #006298; }
.company-spotify { background: rgba(30,215,96,0.1); color: #1ed760; }
.company-airbnb { background: rgba(255,90,95,0.1); color: #ff5a5f; }
.company-snap { background: rgba(255,252,0,0.15); color: #fffc00; }
/* Company Banner Base Styles */
.company-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40px 50px;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    min-height: 200px;
    margin-bottom: 30px;
}

.company-banner::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 40%;
    height: 100%;
    opacity: 0.1;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center right;
}

.company-banner-content {
    position: relative;
    z-index: 2;
    max-width: 60%;
}

.company-banner-logo {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 28px;
}

.company-banner-title {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 8px;
}

.company-banner-subtitle {
    font-size: 16px;
    margin-bottom: 20px;
    opacity: 0.9;
}

.company-banner-stats {
    display: flex;
    gap: 30px;
    margin-bottom: 24px;
}

.company-banner-stat {
    text-align: left;
}

.company-banner-stat-value {
    font-size: 28px;
    font-weight: 700;
}

.company-banner-stat-label {
    font-size: 13px;
    opacity: 0.8;
}

.company-banner-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s;
    position: relative;
}

.company-banner-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

.company-banner-btn.loading {
    pointer-events: none;
    opacity: 0.85;
}

.company-banner-btn.loading .btn-text,
.company-banner-btn.loading i {
    opacity: 0;
}

.company-banner-btn .btn-spinner {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: btn-spin 0.8s linear infinite;
}

.company-banner-btn.loading .btn-spinner {
    display: block;
}

@keyframes btn-spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.company-banner-illustration {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    opacity: 0.9;
}

/* Google Banner */
.company-banner-google {
    background: linear-gradient(135deg, #4285f4 0%, #34a853 50%, #fbbc05 100%);
    color: #fff;
}
.company-banner-google .company-banner-logo {
    background: #fff;
    color: #4285f4;
}
.company-banner-google .company-banner-btn {
    background: #fff;
    color: #4285f4;
}

/* Amazon Banner */
.company-banner-amazon {
    background: linear-gradient(135deg, #232f3e 0%, #ff9900 100%);
    color: #fff;
}
.company-banner-amazon .company-banner-logo {
    background: #ff9900;
    color: #232f3e;
}
.company-banner-amazon .company-banner-btn {
    background: #ff9900;
    color: #232f3e;
}

/* Microsoft Banner */
.company-banner-microsoft {
    background: linear-gradient(135deg, #00a4ef 0%, #7fba00 50%, #f25022 100%);
    color: #fff;
}
.company-banner-microsoft .company-banner-logo {
    background: #fff;
    color: #00a4ef;
}
.company-banner-microsoft .company-banner-btn {
    background: #fff;
    color: #00a4ef;
}

/* Meta Banner */
.company-banner-meta {
    background: linear-gradient(135deg, #0668e1 0%, #1877f2 100%);
    color: #fff;
}
.company-banner-meta .company-banner-logo {
    background: #fff;
    color: #1877f2;
}
.company-banner-meta .company-banner-btn {
    background: #fff;
    color: #1877f2;
}

/* Apple Banner */
.company-banner-apple {
    background: linear-gradient(135deg, #1d1d1f 0%, #333 100%);
    color: #fff;
}
.company-banner-apple .company-banner-logo {
    background: #fff;
    color: #1d1d1f;
}
.company-banner-apple .company-banner-btn {
    background: #fff;
    color: #1d1d1f;
}

/* Netflix Banner */
.company-banner-netflix {
    background: linear-gradient(135deg, #e50914 0%, #b20710 100%);
    color: #fff;
}
.company-banner-netflix .company-banner-logo {
    background: #fff;
    color: #e50914;
}
.company-banner-netflix .company-banner-btn {
    background: #fff;
    color: #e50914;
}

/* LinkedIn Banner */
.company-banner-linkedin {
    background: linear-gradient(135deg, #0a66c2 0%, #004182 100%);
    color: #fff;
}
.company-banner-linkedin .company-banner-logo {
    background: #fff;
    color: #0a66c2;
}
.company-banner-linkedin .company-banner-btn {
    background: #fff;
    color: #0a66c2;
}

/* Uber Banner */
.company-banner-uber {
    background: linear-gradient(135deg, #000 0%, #1d1d1d 100%);
    color: #fff;
}
.company-banner-uber .company-banner-logo {
    background: #fff;
    color: #000;
}
.company-banner-uber .company-banner-btn {
    background: #fff;
    color: #000;
}

/* PayPal Banner */
.company-banner-paypal {
    background: linear-gradient(135deg, #003087 0%, #009cde 100%);
    color: #fff;
}
.company-banner-paypal .company-banner-logo {
    background: #fff;
    color: #003087;
}
.company-banner-paypal .company-banner-btn {
    background: #fff;
    color: #003087;
}

/* Adobe Banner */
.company-banner-adobe {
    background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
    color: #fff;
}
.company-banner-adobe .company-banner-logo {
    background: #fff;
    color: #ff0000;
}
.company-banner-adobe .company-banner-btn {
    background: #fff;
    color: #ff0000;
}

/* Spotify Banner */
.company-banner-spotify {
    background: linear-gradient(135deg, #1db954 0%, #191414 100%);
    color: #fff;
}
.company-banner-spotify .company-banner-logo {
    background: #fff;
    color: #1db954;
}
.company-banner-spotify .company-banner-btn {
    background: #1db954;
    color: #fff;
}

/* Airbnb Banner */
.company-banner-airbnb {
    background: linear-gradient(135deg, #ff5a5f 0%, #fc642d 100%);
    color: #fff;
}
.company-banner-airbnb .company-banner-logo {
    background: #fff;
    color: #ff5a5f;
}
.company-banner-airbnb .company-banner-btn {
    background: #fff;
    color: #ff5a5f;
}

/* Twitter/X Banner */
.company-banner-twitter {
    background: linear-gradient(135deg, #000 0%, #1d1d1d 100%);
    color: #fff;
}
.company-banner-twitter .company-banner-logo {
    background: #fff;
    color: #000;
}
.company-banner-twitter .company-banner-btn {
    background: #fff;
    color: #000;
}

/* Bloomberg Banner */
.company-banner-bloomberg {
    background: linear-gradient(135deg, #1e1e1e 0%, #472d2d 100%);
    color: #fff;
}
.company-banner-bloomberg .company-banner-logo {
    background: #ff6600;
    color: #fff;
}
.company-banner-bloomberg .company-banner-btn {
    background: #ff6600;
    color: #fff;
}

/* Oracle Banner */
.company-banner-oracle {
    background: linear-gradient(135deg, #c74634 0%, #f80000 100%);
    color: #fff;
}
.company-banner-oracle .company-banner-logo {
    background: #fff;
    color: #f80000;
}
.company-banner-oracle .company-banner-btn {
    background: #fff;
    color: #f80000;
}

/* Salesforce Banner */
.company-banner-salesforce {
    background: linear-gradient(135deg, #00a1e0 0%, #1798c1 100%);
    color: #fff;
}
.company-banner-salesforce .company-banner-logo {
    background: #fff;
    color: #00a1e0;
}
.company-banner-salesforce .company-banner-btn {
    background: #fff;
    color: #00a1e0;
}

/* NVIDIA Banner */
.company-banner-nvidia {
    background: linear-gradient(135deg, #76b900 0%, #1a1a1a 100%);
    color: #fff;
}
.company-banner-nvidia .company-banner-logo {
    background: #76b900;
    color: #fff;
}
.company-banner-nvidia .company-banner-btn {
    background: #76b900;
    color: #fff;
}

/* Intel Banner */
.company-banner-intel {
    background: linear-gradient(135deg, #0071c5 0%, #00aeef 100%);
    color: #fff;
}
.company-banner-intel .company-banner-logo {
    background: #fff;
    color: #0071c5;
}
.company-banner-intel .company-banner-btn {
    background: #fff;
    color: #0071c5;
}

/* IBM Banner */
.company-banner-ibm {
    background: linear-gradient(135deg, #006699 0%, #054ada 100%);
    color: #fff;
}
.company-banner-ibm .company-banner-logo {
    background: #fff;
    color: #006699;
}
.company-banner-ibm .company-banner-btn {
    background: #fff;
    color: #006699;
}

/* Snap Banner */
.company-banner-snap {
    background: linear-gradient(135deg, #fffc00 0%, #f7f400 100%);
    color: #000;
}
.company-banner-snap .company-banner-logo {
    background: #fff;
    color: #000;
}
.company-banner-snap .company-banner-btn {
    background: #000;
    color: #fffc00;
}

/* Topic Banners */
.topic-banner-array {
    background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
    color: #fff;
}
.topic-banner-array .company-banner-logo { background: #fff; color: #4CAF50; }
.topic-banner-array .company-banner-btn { background: #fff; color: #4CAF50; }

.topic-banner-string {
    background: linear-gradient(135deg, #2196F3 0%, #1565C0 100%);
    color: #fff;
}
.topic-banner-string .company-banner-logo { background: #fff; color: #2196F3; }
.topic-banner-string .company-banner-btn { background: #fff; color: #2196F3; }

.topic-banner-hash {
    background: linear-gradient(135deg, #9C27B0 0%, #6A1B9A 100%);
    color: #fff;
}
.topic-banner-hash .company-banner-logo { background: #fff; color: #9C27B0; }
.topic-banner-hash .company-banner-btn { background: #fff; color: #9C27B0; }

.topic-banner-dp {
    background: linear-gradient(135deg, #FF9800 0%, #E65100 100%);
    color: #fff;
}
.topic-banner-dp .company-banner-logo { background: #fff; color: #FF9800; }
.topic-banner-dp .company-banner-btn { background: #fff; color: #FF9800; }

.topic-banner-math {
    background: linear-gradient(135deg, #E91E63 0%, #AD1457 100%);
    color: #fff;
}
.topic-banner-math .company-banner-logo { background: #fff; color: #E91E63; }
.topic-banner-math .company-banner-btn { background: #fff; color: #E91E63; }

.topic-banner-sorting {
    background: linear-gradient(135deg, #00BCD4 0%, #00838F 100%);
    color: #fff;
}
.topic-banner-sorting .company-banner-logo { background: #fff; color: #00BCD4; }
.topic-banner-sorting .company-banner-btn { background: #fff; color: #00BCD4; }

.topic-banner-greedy {
    background: linear-gradient(135deg, #8BC34A 0%, #558B2F 100%);
    color: #fff;
}
.topic-banner-greedy .company-banner-logo { background: #fff; color: #8BC34A; }
.topic-banner-greedy .company-banner-btn { background: #fff; color: #558B2F; }

.topic-banner-dfs {
    background: linear-gradient(135deg, #673AB7 0%, #4527A0 100%);
    color: #fff;
}
.topic-banner-dfs .company-banner-logo { background: #fff; color: #673AB7; }
.topic-banner-dfs .company-banner-btn { background: #fff; color: #673AB7; }

.topic-banner-binary {
    background: linear-gradient(135deg, #F44336 0%, #C62828 100%);
    color: #fff;
}
.topic-banner-binary .company-banner-logo { background: #fff; color: #F44336; }
.topic-banner-binary .company-banner-btn { background: #fff; color: #F44336; }

.topic-banner-bfs {
    background: linear-gradient(135deg, #3F51B5 0%, #283593 100%);
    color: #fff;
}
.topic-banner-bfs .company-banner-logo { background: #fff; color: #3F51B5; }
.topic-banner-bfs .company-banner-btn { background: #fff; color: #3F51B5; }

.topic-banner-tree {
    background: linear-gradient(135deg, #795548 0%, #4E342E 100%);
    color: #fff;
}
.topic-banner-tree .company-banner-logo { background: #fff; color: #795548; }
.topic-banner-tree .company-banner-btn { background: #fff; color: #795548; }

.topic-banner-btree {
    background: linear-gradient(135deg, #607D8B 0%, #37474F 100%);
    color: #fff;
}
.topic-banner-btree .company-banner-logo { background: #fff; color: #607D8B; }
.topic-banner-btree .company-banner-btn { background: #fff; color: #607D8B; }

.topic-banner-matrix {
    background: linear-gradient(135deg, #009688 0%, #00695C 100%);
    color: #fff;
}
.topic-banner-matrix .company-banner-logo { background: #fff; color: #009688; }
.topic-banner-matrix .company-banner-btn { background: #fff; color: #009688; }

.topic-banner-twoptr {
    background: linear-gradient(135deg, #CDDC39 0%, #9E9D24 100%);
    color: #333;
}
.topic-banner-twoptr .company-banner-logo { background: #fff; color: #9E9D24; }
.topic-banner-twoptr .company-banner-btn { background: #333; color: #CDDC39; }

.topic-banner-bit {
    background: linear-gradient(135deg, #FF5722 0%, #D84315 100%);
    color: #fff;
}
.topic-banner-bit .company-banner-logo { background: #fff; color: #FF5722; }
.topic-banner-bit .company-banner-btn { background: #fff; color: #FF5722; }

.topic-banner-stack {
    background: linear-gradient(135deg, #9E9E9E 0%, #616161 100%);
    color: #fff;
}
.topic-banner-stack .company-banner-logo { background: #fff; color: #616161; }
.topic-banner-stack .company-banner-btn { background: #fff; color: #616161; }

.topic-banner-heap {
    background: linear-gradient(135deg, #FFEB3B 0%, #F9A825 100%);
    color: #333;
}
.topic-banner-heap .company-banner-logo { background: #333; color: #FFEB3B; }
.topic-banner-heap .company-banner-btn { background: #333; color: #FFEB3B; }

.topic-banner-graph {
    background: linear-gradient(135deg, #03A9F4 0%, #0277BD 100%);
    color: #fff;
}
.topic-banner-graph .company-banner-logo { background: #fff; color: #03A9F4; }
.topic-banner-graph .company-banner-btn { background: #fff; color: #03A9F4; }

.topic-banner-linked {
    background: linear-gradient(135deg, #E040FB 0%, #AA00FF 100%);
    color: #fff;
}
.topic-banner-linked .company-banner-logo { background: #fff; color: #E040FB; }
.topic-banner-linked .company-banner-btn { background: #fff; color: #AA00FF; }

.topic-banner-backtrack {
    background: linear-gradient(135deg, #FF6F00 0%, #E65100 100%);
    color: #fff;
}
.topic-banner-backtrack .company-banner-logo { background: #fff; color: #FF6F00; }
.topic-banner-backtrack .company-banner-btn { background: #fff; color: #FF6F00; }

.topic-banner-window {
    background: linear-gradient(135deg, #00E676 0%, #00C853 100%);
    color: #333;
}
.topic-banner-window .company-banner-logo { background: #333; color: #00E676; }
.topic-banner-window .company-banner-btn { background: #333; color: #00E676; }

.topic-banner-union {
    background: linear-gradient(135deg, #7C4DFF 0%, #651FFF 100%);
    color: #fff;
}
.topic-banner-union .company-banner-logo { background: #fff; color: #7C4DFF; }
.topic-banner-union .company-banner-btn { background: #fff; color: #7C4DFF; }

.topic-banner-trie {
    background: linear-gradient(135deg, #64FFDA 0%, #1DE9B6 100%);
    color: #333;
}
.topic-banner-trie .company-banner-logo { background: #333; color: #64FFDA; }
.topic-banner-trie .company-banner-btn { background: #333; color: #1DE9B6; }

.topic-banner-divide {
    background: linear-gradient(135deg, #FF4081 0%, #F50057 100%);
    color: #fff;
}
.topic-banner-divide .company-banner-logo { background: #fff; color: #FF4081; }
.topic-banner-divide .company-banner-btn { background: #fff; color: #FF4081; }

.topic-banner-queue {
    background: linear-gradient(135deg, #448AFF 0%, #2962FF 100%);
    color: #fff;
}
.topic-banner-queue .company-banner-logo { background: #fff; color: #448AFF; }
.topic-banner-queue .company-banner-btn { background: #fff; color: #448AFF; }

.topic-banner-recursion {
    background: linear-gradient(135deg, #69F0AE 0%, #00E676 100%);
    color: #333;
}
.topic-banner-recursion .company-banner-logo { background: #333; color: #69F0AE; }
.topic-banner-recursion .company-banner-btn { background: #333; color: #00E676; }

.topic-banner-database {
    background: linear-gradient(135deg, #40C4FF 0%, #00B0FF 100%);
    color: #fff;
}
.topic-banner-database .company-banner-logo { background: #fff; color: #40C4FF; }
.topic-banner-database .company-banner-btn { background: #fff; color: #00B0FF; }

.topic-banner-simulation {
    background: linear-gradient(135deg, #B388FF 0%, #7C4DFF 100%);
    color: #fff;
}
.topic-banner-simulation .company-banner-logo { background: #fff; color: #B388FF; }
.topic-banner-simulation .company-banner-btn { background: #fff; color: #7C4DFF; }

.topic-banner-prefix {
    background: linear-gradient(135deg, #F48FB1 0%, #EC407A 100%);
    color: #fff;
}
.topic-banner-prefix .company-banner-logo { background: #fff; color: #F48FB1; }
.topic-banner-prefix .company-banner-btn { background: #fff; color: #EC407A; }

.topic-banner-segment {
    background: linear-gradient(135deg, #81D4FA 0%, #29B6F6 100%);
    color: #333;
}
.topic-banner-segment .company-banner-logo { background: #333; color: #81D4FA; }
.topic-banner-segment .company-banner-btn { background: #333; color: #29B6F6; }

/* New Topic Banners (42 additional topics) - Add after .topic-banner-segment rules */

.topic-banner-counting {
    background: linear-gradient(135deg, #FF7043 0%, #F4511E 100%);
    color: #fff;
}
.topic-banner-counting .company-banner-logo { background: #fff; color: #FF7043; }
.topic-banner-counting .company-banner-btn { background: #fff; color: #F4511E; }

.topic-banner-design {
    background: linear-gradient(135deg, #AB47BC 0%, #8E24AA 100%);
    color: #fff;
}
.topic-banner-design .company-banner-logo { background: #fff; color: #AB47BC; }
.topic-banner-design .company-banner-btn { background: #fff; color: #8E24AA; }

.topic-banner-enumeration {
    background: linear-gradient(135deg, #5C6BC0 0%, #3F51B5 100%);
    color: #fff;
}
.topic-banner-enumeration .company-banner-logo { background: #fff; color: #5C6BC0; }
.topic-banner-enumeration .company-banner-btn { background: #fff; color: #3F51B5; }

.topic-banner-number {
    background: linear-gradient(135deg, #26A69A 0%, #00897B 100%);
    color: #fff;
}
.topic-banner-number .company-banner-logo { background: #fff; color: #26A69A; }
.topic-banner-number .company-banner-btn { background: #fff; color: #00897B; }

.topic-banner-ordered {
    background: linear-gradient(135deg, #7E57C2 0%, #673AB7 100%);
    color: #fff;
}
.topic-banner-ordered .company-banner-logo { background: #fff; color: #7E57C2; }
.topic-banner-ordered .company-banner-btn { background: #fff; color: #673AB7; }

.topic-banner-mono-stack {
    background: linear-gradient(135deg, #78909C 0%, #546E7A 100%);
    color: #fff;
}
.topic-banner-mono-stack .company-banner-logo { background: #fff; color: #78909C; }
.topic-banner-mono-stack .company-banner-btn { background: #fff; color: #546E7A; }

.topic-banner-javascript {
    background: linear-gradient(135deg, #F7DF1E 0%, #F0DB4F 100%);
    color: #333;
}
.topic-banner-javascript .company-banner-logo { background: #333; color: #F7DF1E; }
.topic-banner-javascript .company-banner-btn { background: #333; color: #F7DF1E; }

.topic-banner-combinatorics {
    background: linear-gradient(135deg, #EC407A 0%, #D81B60 100%);
    color: #fff;
}
.topic-banner-combinatorics .company-banner-logo { background: #fff; color: #EC407A; }
.topic-banner-combinatorics .company-banner-btn { background: #fff; color: #D81B60; }

.topic-banner-bitmask {
    background: linear-gradient(135deg, #8D6E63 0%, #6D4C41 100%);
    color: #fff;
}
.topic-banner-bitmask .company-banner-logo { background: #fff; color: #8D6E63; }
.topic-banner-bitmask .company-banner-btn { background: #fff; color: #6D4C41; }

.topic-banner-memo {
    background: linear-gradient(135deg, #FF8A65 0%, #FF5722 100%);
    color: #fff;
}
.topic-banner-memo .company-banner-logo { background: #fff; color: #FF8A65; }
.topic-banner-memo .company-banner-btn { background: #fff; color: #FF5722; }

.topic-banner-bit-tree {
    background: linear-gradient(135deg, #4DB6AC 0%, #00897B 100%);
    color: #fff;
}
.topic-banner-bit-tree .company-banner-logo { background: #fff; color: #4DB6AC; }
.topic-banner-bit-tree .company-banner-btn { background: #fff; color: #00897B; }

.topic-banner-geometry {
    background: linear-gradient(135deg, #9575CD 0%, #7E57C2 100%);
    color: #fff;
}
.topic-banner-geometry .company-banner-logo { background: #fff; color: #9575CD; }
.topic-banner-geometry .company-banner-btn { background: #fff; color: #7E57C2; }

.topic-banner-bst {
    background: linear-gradient(135deg, #4DD0E1 0%, #00ACC1 100%);
    color: #fff;
}
.topic-banner-bst .company-banner-logo { background: #fff; color: #4DD0E1; }
.topic-banner-bst .company-banner-btn { background: #fff; color: #00ACC1; }

.topic-banner-hash-func {
    background: linear-gradient(135deg, #BA68C8 0%, #9C27B0 100%);
    color: #fff;
}
.topic-banner-hash-func .company-banner-logo { background: #fff; color: #BA68C8; }
.topic-banner-hash-func .company-banner-btn { background: #fff; color: #9C27B0; }

.topic-banner-string-match {
    background: linear-gradient(135deg, #4FC3F7 0%, #03A9F4 100%);
    color: #fff;
}
.topic-banner-string-match .company-banner-logo { background: #fff; color: #4FC3F7; }
.topic-banner-string-match .company-banner-btn { background: #fff; color: #03A9F4; }

.topic-banner-topo {
    background: linear-gradient(135deg, #AED581 0%, #8BC34A 100%);
    color: #333;
}
.topic-banner-topo .company-banner-logo { background: #333; color: #AED581; }
.topic-banner-topo .company-banner-btn { background: #333; color: #8BC34A; }

.topic-banner-shortest {
    background: linear-gradient(135deg, #FFB74D 0%, #FF9800 100%);
    color: #333;
}
.topic-banner-shortest .company-banner-logo { background: #333; color: #FFB74D; }
.topic-banner-shortest .company-banner-btn { background: #333; color: #FF9800; }

.topic-banner-rolling {
    background: linear-gradient(135deg, #F06292 0%, #E91E63 100%);
    color: #fff;
}
.topic-banner-rolling .company-banner-logo { background: #fff; color: #F06292; }
.topic-banner-rolling .company-banner-btn { background: #fff; color: #E91E63; }

.topic-banner-game {
    background: linear-gradient(135deg, #A1887F 0%, #8D6E63 100%);
    color: #fff;
}
.topic-banner-game .company-banner-logo { background: #fff; color: #A1887F; }
.topic-banner-game .company-banner-btn { background: #fff; color: #8D6E63; }

.topic-banner-interactive {
    background: linear-gradient(135deg, #90A4AE 0%, #78909C 100%);
    color: #fff;
}
.topic-banner-interactive .company-banner-logo { background: #fff; color: #90A4AE; }
.topic-banner-interactive .company-banner-btn { background: #fff; color: #78909C; }

.topic-banner-stream {
    background: linear-gradient(135deg, #4DD0E1 0%, #00BCD4 100%);
    color: #fff;
}
.topic-banner-stream .company-banner-logo { background: #fff; color: #4DD0E1; }
.topic-banner-stream .company-banner-btn { background: #fff; color: #00BCD4; }

.topic-banner-mono-queue {
    background: linear-gradient(135deg, #81C784 0%, #66BB6A 100%);
    color: #333;
}
.topic-banner-mono-queue .company-banner-logo { background: #333; color: #81C784; }
.topic-banner-mono-queue .company-banner-btn { background: #333; color: #66BB6A; }

.topic-banner-brain {
    background: linear-gradient(135deg, #FFD54F 0%, #FFC107 100%);
    color: #333;
}
.topic-banner-brain .company-banner-logo { background: #333; color: #FFD54F; }
.topic-banner-brain .company-banner-btn { background: #333; color: #FFC107; }

.topic-banner-dll {
    background: linear-gradient(135deg, #CE93D8 0%, #BA68C8 100%);
    color: #fff;
}
.topic-banner-dll .company-banner-logo { background: #fff; color: #CE93D8; }
.topic-banner-dll .company-banner-btn { background: #fff; color: #BA68C8; }

.topic-banner-random {
    background: linear-gradient(135deg, #EF5350 0%, #E53935 100%);
    color: #fff;
}
.topic-banner-random .company-banner-logo { background: #fff; color: #EF5350; }
.topic-banner-random .company-banner-btn { background: #fff; color: #E53935; }

.topic-banner-merge {
    background: linear-gradient(135deg, #42A5F5 0%, #1E88E5 100%);
    color: #fff;
}
.topic-banner-merge .company-banner-logo { background: #fff; color: #42A5F5; }
.topic-banner-merge .company-banner-btn { background: #fff; color: #1E88E5; }

.topic-banner-count-sort {
    background: linear-gradient(135deg, #66BB6A 0%, #43A047 100%);
    color: #fff;
}
.topic-banner-count-sort .company-banner-logo { background: #fff; color: #66BB6A; }
.topic-banner-count-sort .company-banner-btn { background: #fff; color: #43A047; }

.topic-banner-iterator {
    background: linear-gradient(135deg, #FFA726 0%, #FB8C00 100%);
    color: #333;
}
.topic-banner-iterator .company-banner-logo { background: #333; color: #FFA726; }
.topic-banner-iterator .company-banner-btn { background: #333; color: #FB8C00; }

.topic-banner-concurrent {
    background: linear-gradient(135deg, #5C6BC0 0%, #3F51B5 100%);
    color: #fff;
}
.topic-banner-concurrent .company-banner-logo { background: #fff; color: #5C6BC0; }
.topic-banner-concurrent .company-banner-btn { background: #fff; color: #3F51B5; }

.topic-banner-sweep {
    background: linear-gradient(135deg, #26C6DA 0%, #00ACC1 100%);
    color: #fff;
}
.topic-banner-sweep .company-banner-logo { background: #fff; color: #26C6DA; }
.topic-banner-sweep .company-banner-btn { background: #fff; color: #00ACC1; }

.topic-banner-prob {
    background: linear-gradient(135deg, #7E57C2 0%, #673AB7 100%);
    color: #fff;
}
.topic-banner-prob .company-banner-logo { background: #fff; color: #7E57C2; }
.topic-banner-prob .company-banner-btn { background: #fff; color: #673AB7; }

.topic-banner-suffix {
    background: linear-gradient(135deg, #26A69A 0%, #00897B 100%);
    color: #fff;
}
.topic-banner-suffix .company-banner-logo { background: #fff; color: #26A69A; }
.topic-banner-suffix .company-banner-btn { background: #fff; color: #00897B; }

.topic-banner-quicksel {
    background: linear-gradient(135deg, #EF5350 0%, #E53935 100%);
    color: #fff;
}
.topic-banner-quicksel .company-banner-logo { background: #fff; color: #EF5350; }
.topic-banner-quicksel .company-banner-btn { background: #fff; color: #E53935; }

.topic-banner-mst {
    background: linear-gradient(135deg, #8BC34A 0%, #689F38 100%);
    color: #fff;
}
.topic-banner-mst .company-banner-logo { background: #fff; color: #8BC34A; }
.topic-banner-mst .company-banner-btn { background: #fff; color: #689F38; }

.topic-banner-bucket {
    background: linear-gradient(135deg, #FF8A65 0%, #FF5722 100%);
    color: #fff;
}
.topic-banner-bucket .company-banner-logo { background: #fff; color: #FF8A65; }
.topic-banner-bucket .company-banner-btn { background: #fff; color: #FF5722; }

.topic-banner-pandas {
    background: linear-gradient(135deg, #150458 0%, #1a0a6b 100%);
    color: #fff;
}
.topic-banner-pandas .company-banner-logo { background: #fff; color: #150458; }
.topic-banner-pandas .company-banner-btn { background: #fff; color: #150458; }

.topic-banner-reservoir {
    background: linear-gradient(135deg, #00ACC1 0%, #00838F 100%);
    color: #fff;
}
.topic-banner-reservoir .company-banner-logo { background: #fff; color: #00ACC1; }
.topic-banner-reservoir .company-banner-btn { background: #fff; color: #00838F; }

.topic-banner-shell {
    background: linear-gradient(135deg, #455A64 0%, #37474F 100%);
    color: #fff;
}
.topic-banner-shell .company-banner-logo { background: #fff; color: #455A64; }
.topic-banner-shell .company-banner-btn { background: #fff; color: #37474F; }

.topic-banner-euler {
    background: linear-gradient(135deg, #7986CB 0%, #5C6BC0 100%);
    color: #fff;
}
.topic-banner-euler .company-banner-logo { background: #fff; color: #7986CB; }
.topic-banner-euler .company-banner-btn { background: #fff; color: #5C6BC0; }

.topic-banner-scc {
    background: linear-gradient(135deg, #4DB6AC 0%, #00897B 100%);
    color: #fff;
}
.topic-banner-scc .company-banner-logo { background: #fff; color: #4DB6AC; }
.topic-banner-scc .company-banner-btn { background: #fff; color: #00897B; }

.topic-banner-radix {
    background: linear-gradient(135deg, #FF7043 0%, #F4511E 100%);
    color: #fff;
}
.topic-banner-radix .company-banner-logo { background: #fff; color: #FF7043; }
.topic-banner-radix .company-banner-btn { background: #fff; color: #F4511E; }

/* Responsive */
@media (max-width: 768px) {
    .company-banner {
        flex-direction: column;
        padding: 30px;
        text-align: center;
    }
    .company-banner-content {
        max-width: 100%;
    }
    .company-banner-stats {
        justify-content: center;
    }
    .company-banner-illustration {
        display: none;
    }
    .company-banner-title {
        font-size: 28px;
    }
}
/* Developer Toolbox Section */
.dev-tools-section {
    padding: 0;
}

.dev-tools-card {
    background: #fffade;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    border: 1px solid #f0eedf;
    border-bottom: none;
    padding: 30px;
    padding-bottom: 50px;
    overflow: hidden;
}

.dev-tools-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}

.dev-tools-title {
    font-size: 28px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 6px;
}

.dev-tools-title span {
    color: #00a651;
}

.dev-tools-subtitle {
    color: #666;
    font-size: 14px;
}

.dev-tools-nav {
    display: flex;
    gap: 8px;
}

.dev-tools-nav .nav-btn {
    position: relative;
    top: auto;
    transform: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f5f5f0;
    border: 1px solid #e8e6d9;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    color: #666;
}

.dev-tools-nav .nav-btn:hover {
    background: #00a651;
    border-color: #00a651;
    color: #fff;
}

.dev-tools-nav .nav-btn svg {
    width: 18px;
    height: 18px;
}

.dev-tools-slider-wrap {
    overflow: hidden;
    margin: 0 -5px;
}

.dev-tools-slider {
    overflow: visible;
    padding: 5px 5px;
}

.dev-tools-slider .swiper-slide {
    width: auto;
}

.dev-tool-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 120px;
    background: #fff;
    border: 1px solid #e8e6d9;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s;
}

.dev-tool-card:hover {
    border-color: #00a651;
    box-shadow: 0 6px 20px rgba(0,166,81,0.12);
    transform: translateY(-2px);
}

.dev-tool-card svg {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
}

.dev-tool-card h4 {
    color: #1a1a1a;
    font-size: 14px;
    font-weight: 600;
    margin: 0;
}

.dev-tool-view-all {
    background: linear-gradient(135deg, #00a651 0%, #059669 100%);
    border: none;
}

.dev-tool-view-all h4 {
    color: #fff;
}

.dev-tool-view-all:hover {
    box-shadow: 0 6px 20px rgba(0,166,81,0.25);
}

@media (max-width: 768px) {
    .dev-tools-header {
        flex-direction: column;
        gap: 16px;
    }
    .dev-tools-nav {
        align-self: flex-end;
    }
    .dev-tool-card {
        width: 140px;
        height: 110px;
    }
}
/* Footer Styles - Light Theme */
.footer {
    background: #f8f9fa;
    color: #1a1a1a;
    padding-top: 30px;
    border-top: 1px solid #e0e0e0;
}

.footer__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0;
    padding: 20px 0 30px;
    list-style: none;
    text-align: center;
}

.footer__list li {
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    position: relative;
}

.footer__list li:first-child {
    padding-left: 0;
}

.footer__list li:last-child {
    padding-right: 0;
}

.footer__list li:not(:last-child)::after {
    content: '|';
    position: absolute;
    right: 0;
    color: #ccc;
    font-weight: 300;
}

.footer__list li a {
    color: #666;
    text-decoration: none;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 500;
    transition: color 0.2s;
}

.footer__list li a:hover {
    color: #00a651;
}

.footer__socials {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px 0;
    border-top: 1px solid #e0e0e0;
}

.footer__logo {
    height: 32px;
    filter: brightness(0);
}

.footer__social-icons {
    display: flex;
    gap: 20px;
}

.footer__social-icons a {
    color: #333;
    font-size: 18px;
    transition: color 0.2s;
}

.footer__social-icons a:hover {
    color: #00a651;
}

.footer__apps {
    display: flex;
    gap: 12px;
}

.footer__apps img {
    height: 36px;
}

.footer__legal-wrapper {
    background: #eee;
    padding: 25px 0;
}

.footer__legal {
    text-align: center;
}

.footer__legal p {
    color: #666;
    font-size: 13px;
    margin: 0 0 8px;
    line-height: 1.5;
}

.footer__copyright {
    color: #999 !important;
    font-size: 12px !important;
}

@media (max-width: 600px) {
    .footer__socials {
        flex-direction: column;
        gap: 20px;
    }
    .footer__list {
        justify-content: center;
    }
}