/* ============================================================
           BAND PREDICTOR — PAGE-SCOPED STYLES
           ============================================================ */

            .band-predictor-page {
                padding-top: 80px;
                /* offset for fixed navbar */
            }

            /* HERO */
            .tool-hero {
                background: linear-gradient(135deg, #0f1d3a 0%, #1a2e5a 50%, #162648 100%);
                padding: 48px 0 60px;
                position: relative;
                overflow: hidden;
            }

            .tool-hero::before {
                content: '';
                position: absolute;
                inset: 0;
                background-image:
                    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
                background-size: 50px 50px;
                pointer-events: none;
            }

            .bp-hero-orb-1 {
                position: absolute;
                width: 400px;
                height: 400px;
                border-radius: 50%;
                background: radial-gradient(circle, rgba(192, 32, 42, .2) 0%, transparent 70%);
                top: -120px;
                right: -80px;
                pointer-events: none;
            }

            .bp-hero-orb-2 {
                position: absolute;
                width: 300px;
                height: 300px;
                border-radius: 50%;
                background: radial-gradient(circle, rgba(245, 166, 35, .1) 0%, transparent 70%);
                bottom: -100px;
                left: 5%;
                pointer-events: none;
            }

            .hero-badge {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                background: rgba(255, 255, 255, .1);
                border: 1px solid rgba(255, 255, 255, .15);
                border-radius: 50px;
                padding: 5px 14px;
                font-size: .75rem;
                font-weight: 700;
                color: #f5a623;
                letter-spacing: .06em;
                text-transform: uppercase;
                margin-bottom: 1rem;
            }

            .hero-badge .dot {
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background: #f5a623;
                animation: bpBlink 2s infinite;
            }

            @keyframes bpBlink {

                0%,
                100% {
                    opacity: 1
                }

                50% {
                    opacity: .3
                }
            }

            .tool-hero h1 {
                font-size: clamp(1.8rem, 4vw, 2.8rem);
                color: #fff;
                font-weight: 800;
                margin-bottom: .75rem;
            }

            .tool-hero h1 em {
                color: #f5a623;
                font-style: normal;
            }

            .tool-hero p {
                color: rgba(255, 255, 255, .7);
                font-size: 1rem;
                line-height: 1.7;
                max-width: 560px;
            }

            .hero-chips {
                display: flex;
                flex-wrap: wrap;
                gap: 8px;
                margin-top: 1.5rem;
            }

            .hero-chip {
                display: inline-flex;
                align-items: center;
                gap: 6px;
                background: rgba(255, 255, 255, .08);
                border: 1px solid rgba(255, 255, 255, .15);
                border-radius: 50px;
                padding: 5px 12px;
                font-size: .78rem;
                font-weight: 600;
                color: rgba(255, 255, 255, .75);
            }

            /* TOOL SELECTOR TABS */
            .tool-selector {
                display: flex;
                background: #fff;
                border-radius: 36px;
                box-shadow: 0 20px 60px rgba(26, 46, 90, .12);
                border: 1px solid #dde3ef;
                margin-top: -32px;
                position: relative;
                z-index: 2;
                overflow: hidden;
            }

            .tool-tab {
                flex: 1;
                padding: 1.25rem 1rem;
                text-align: center;
                cursor: pointer;
                transition: all .3s;
                font-weight: 700;
                font-size: .85rem;
                color: #6b7a99;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 8px;
                background: #f4f7fc;
                font-family: 'Plus Jakarta Sans', sans-serif;
                border: none;
                border-bottom: 3px solid transparent;
                outline: none;
            }

            .tool-tab i {
                font-size: 1.4rem;
            }

            .tool-tab.active {
                color: #c0202a;
                border-bottom: 3px solid #c0202a !important;
                background: #fff;
            }

            .tool-tab:hover:not(.active) {
                color: #1a2e5a;
                background: #fff;
            }

            /* MAIN PANEL AREA */
            .main-area {
                background: #fff;
                border-radius: 0 0 36px 36px;
                border: 1px solid #dde3ef;
                border-top: none;
            }

            .tool-panel {
                display: none;
                padding: 2rem 2.5rem;
            }

            .tool-panel.active {
                display: block;
                animation: bpFadeSlide .3s ease;
            }

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

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

            /* TASK TYPE BUTTONS */
            .task-type-row {
                display: flex;
                gap: 12px;
                margin-bottom: 1.5rem;
            }

            .task-type-btn {
                flex: 1;
                background: #f4f7fc;
                border: 2px solid #dde3ef;
                border-radius: 14px;
                padding: 1rem;
                text-align: center;
                cursor: pointer;
                transition: all .25s;
                font-family: 'Plus Jakarta Sans', sans-serif;
            }

            .task-type-btn:hover {
                border-color: #1a2e5a;
                background: #fff;
            }

            .task-type-btn.active {
                border-color: #c0202a;
                background: rgba(192, 32, 42, .04);
            }

            .task-type-btn .tt-icon {
                font-size: 1.5rem;
                margin-bottom: .4rem;
                display: block;
            }

            .task-type-btn strong {
                display: block;
                font-size: .85rem;
                color: #1a2e5a;
            }

            .task-type-btn span {
                font-size: .75rem;
                color: #6b7a99;
            }

            /* TEXTAREA */
            .answer-textarea {
                width: 100%;
                min-height: 220px;
                resize: vertical;
                border: 1.5px solid #dde3ef;
                border-radius: 14px;
                font-family: 'Plus Jakarta Sans', sans-serif;
                font-size: .9rem;
                line-height: 1.75;
                padding: 1rem 1.25rem;
                color: #1a2e5a;
                outline: none;
                transition: border .2s;
                background: #fff;
            }

            .answer-textarea:focus {
                border-color: #1a2e5a;
                box-shadow: 0 0 0 3px rgba(26, 46, 90, .07);
            }

            .textarea-footer {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top: .5rem;
                flex-wrap: wrap;
                gap: .5rem;
            }

            .word-chip {
                background: #f4f7fc;
                border: 1px solid #dde3ef;
                border-radius: 50px;
                padding: 4px 12px;
                font-size: .75rem;
                font-weight: 600;
                color: #1a2e5a;
            }

            .word-chip.good {
                background: rgba(34, 197, 94, .1);
                border-color: rgba(34, 197, 94, .3);
                color: #16a34a;
            }

            .word-chip.warn {
                background: rgba(245, 166, 35, .1);
                border-color: rgba(245, 166, 35, .3);
                color: #b45309;
            }

            .word-chip.low {
                background: rgba(192, 32, 42, .08);
                border-color: rgba(192, 32, 42, .2);
                color: #c0202a;
            }

            /* TASK PROMPT BOX */
            .task-prompt-box {
                background: linear-gradient(135deg, rgba(26, 46, 90, .04), rgba(26, 46, 90, .02));
                border: 1.5px solid #dde3ef;
                border-left: 4px solid #1a2e5a;
                border-radius: 0 14px 14px 0;
                padding: 1rem 1.25rem;
                margin-bottom: 1rem;
                font-size: .875rem;
                color: #1a2e5a;
                line-height: 1.65;
            }

            .task-prompt-box strong {
                display: block;
                font-size: .72rem;
                text-transform: uppercase;
                letter-spacing: .08em;
                color: #c0202a;
                font-weight: 700;
                margin-bottom: .4rem;
            }

            /* LEAD GATE */
            .lead-gate {
                background: linear-gradient(135deg, #0f1d3a 0%, #1a2e5a 100%);
                border-radius: 36px;
                padding: 2.5rem;
                text-align: center;
                position: relative;
                overflow: hidden;
                margin: 1.5rem 0;
            }

            .lead-gate::before {
                content: '';
                position: absolute;
                width: 300px;
                height: 300px;
                border-radius: 50%;
                background: radial-gradient(circle, rgba(192, 32, 42, .2) 0%, transparent 70%);
                top: -100px;
                right: -50px;
                pointer-events: none;
            }

            .lead-gate h3 {
                color: #fff;
                font-size: 1.5rem;
                margin-bottom: .5rem;
            }

            .lead-gate>p {
                color: rgba(255, 255, 255, .7);
                font-size: .9rem;
                margin-bottom: 1.75rem;
                line-height: 1.7;
            }

            .preview-band-strip {
                display: flex;
                justify-content: center;
                gap: 1.25rem;
                margin-bottom: 2rem;
                flex-wrap: wrap;
            }

            .pbs-item {
                background: rgba(255, 255, 255, .07);
                border: 1px solid rgba(255, 255, 255, .12);
                border-radius: 14px;
                padding: .9rem 1.1rem;
                min-width: 90px;
                text-align: center;
                position: relative;
            }

            .pbs-val {
                font-family: 'Playfair Display', serif;
                font-size: 1.6rem;
                font-weight: 800;
                color: #fff;
                filter: blur(7px);
                user-select: none;
            }

            .pbs-label {
                font-size: .68rem;
                color: rgba(255, 255, 255, .45);
                font-weight: 600;
                text-transform: uppercase;
                letter-spacing: .05em;
                margin-top: 2px;
            }

            .lock-badge {
                position: absolute;
                inset: 0;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .lock-badge i {
                color: #f5a623;
                font-size: 1.1rem;
            }

            .lead-form-inner {
                max-width: 380px;
                margin: 0 auto;
            }

            .lead-input {
                background: rgba(255, 255, 255, .08);
                border: 1.5px solid rgba(255, 255, 255, .2);
                color: #fff;
                border-radius: 8px;
                font-family: 'Plus Jakarta Sans', sans-serif;
                font-size: .9rem;
                padding: .7rem 1rem;
                width: 100%;
                margin-bottom: .75rem;
                outline: none;
                transition: border .2s;
                display: block;
            }

            .lead-input::placeholder {
                color: rgba(255, 255, 255, .4);
            }

            .lead-input:focus {
                border-color: #f5a623;
                background: rgba(255, 255, 255, .12);
            }

            /* RESULTS */
            .results-wrap {
                margin-top: 0;
            }

            .band-hero {
                background: linear-gradient(135deg, #0f1d3a, #1a2e5a);
                border-radius: 36px;
                padding: 2rem;
                text-align: center;
                margin-bottom: 1.5rem;
            }

            .band-big-num {
                font-family: 'Playfair Display', serif;
                font-size: 4rem;
                font-weight: 800;
                color: #fff;
                line-height: 1;
            }

            .band-desc {
                font-size: .875rem;
                color: rgba(255, 255, 255, .65);
                margin-top: .5rem;
            }

            .band-badge {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                background: #c0202a;
                color: #fff;
                border-radius: 50px;
                padding: 6px 20px;
                font-size: .82rem;
                font-weight: 700;
                margin-bottom: 1rem;
            }

            .criteria-grid {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 12px;
                margin-bottom: 1.5rem;
            }

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

            .crit-card {
                background: #fff;
                border: 1.5px solid #dde3ef;
                border-radius: 14px;
                padding: 1.25rem .75rem;
                text-align: center;
                transition: all .3s;
            }

            .crit-card:hover {
                border-color: #c0202a;
                box-shadow: 0 4px 16px rgba(192, 32, 42, .1);
                transform: translateY(-3px);
            }

            .crit-score {
                font-family: 'Playfair Display', serif;
                font-size: 1.8rem;
                font-weight: 800;
                line-height: 1;
                margin-bottom: .25rem;
            }

            .score-hi {
                color: #16a34a;
            }

            .score-md {
                color: #f5a623;
            }

            .score-lo {
                color: #c0202a;
            }

            .crit-name {
                font-size: .7rem;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: .06em;
                color: #6b7a99;
            }

            .progress-bar-wrap {
                margin-top: .6rem;
            }

            .prog-bg {
                background: #f4f7fc;
                border-radius: 50px;
                height: 5px;
                overflow: hidden;
            }

            .prog-fill {
                height: 100%;
                border-radius: 50px;
                transition: width 1.2s cubic-bezier(.34, 1.56, .64, 1);
                background: linear-gradient(90deg, #c0202a, #f5a623);
            }

            .analysis-card {
                background: #f4f7fc;
                border-radius: 22px;
                padding: 1.5rem;
                margin-bottom: 1.25rem;
            }

            .analysis-card h5 {
                display: flex;
                align-items: center;
                gap: 8px;
                font-size: .95rem;
                margin-bottom: 1rem;
                color: #1a2e5a;
            }

            .analysis-item {
                display: flex;
                gap: 10px;
                align-items: flex-start;
                padding: .6rem 0;
                border-bottom: 1px solid #dde3ef;
                font-size: .875rem;
                line-height: 1.65;
                color: #1a2e5a;
            }

            .analysis-item:last-child {
                border: none;
            }

            .ai-bullet {
                width: 22px;
                height: 22px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: .65rem;
                flex-shrink: 0;
                margin-top: 2px;
            }

            .ai-bullet.green {
                background: #dcfce7;
                color: #16a34a;
            }

            .ai-bullet.yellow {
                background: #fef9c3;
                color: #b45309;
            }

            .ai-bullet.red {
                background: #fee2e2;
                color: #dc2626;
            }

            .ai-bullet.blue {
                background: rgba(26, 46, 90, .08);
                color: #1a2e5a;
            }

            .sample-sentence {
                background: #fff;
                border: 1.5px solid #dde3ef;
                border-left: 3px solid #f5a623;
                border-radius: 14px;
                padding: 1rem 1.25rem;
                font-size: .875rem;
                color: #1a2e5a;
                line-height: 1.75;
                margin-top: .75rem;
            }

            .sample-label {
                font-size: .7rem;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: .08em;
                color: #f5a623;
                margin-bottom: .4rem;
            }

            .vocab-list {
                display: flex;
                flex-wrap: wrap;
                gap: 8px;
                margin-top: .75rem;
            }

            .vocab-chip {
                background: #fff;
                border: 1.5px solid #dde3ef;
                border-radius: 50px;
                padding: 4px 14px;
                font-size: .8rem;
                font-weight: 600;
                color: #1a2e5a;
            }

            .vocab-chip.bad {
                border-color: rgba(192, 32, 42, .3);
                background: rgba(192, 32, 42, .04);
                color: #c0202a;
            }

            .vocab-chip.good {
                border-color: rgba(34, 197, 94, .3);
                background: rgba(34, 197, 94, .04);
                color: #16a34a;
            }

            .cta-box-result {
                background: #c0202a;
                border-radius: 36px;
                padding: 2rem;
                text-align: center;
                position: relative;
                overflow: hidden;
            }

            .cta-box-result::before {
                content: '';
                position: absolute;
                inset: 0;
                background: radial-gradient(circle at 80% 50%, rgba(255, 255, 255, .1) 0%, transparent 60%);
                pointer-events: none;
            }

            .cta-box-result h4 {
                color: #fff;
                font-size: 1.3rem;
                margin-bottom: .5rem;
            }

            .cta-box-result p {
                color: rgba(255, 255, 255, .8);
                font-size: .875rem;
                margin-bottom: 1.5rem;
                line-height: 1.65;
            }

            /* AI LOADER */
            .ai-loader {
                text-align: center;
                padding: 3.5rem 1rem;
            }

            .spin-ring {
                width: 72px;
                height: 72px;
                border-radius: 50%;
                border: 4px solid #f4f7fc;
                border-top-color: #c0202a;
                animation: bpSpin 1s linear infinite;
                margin: 0 auto 1.5rem;
            }

            @keyframes bpSpin {
                to {
                    transform: rotate(360deg);
                }
            }

            .ai-dots span {
                animation: bpDotPulse 1.4s ease infinite;
                opacity: .3;
                font-size: 1.2rem;
            }

            .ai-dots span:nth-child(2) {
                animation-delay: .2s;
            }

            .ai-dots span:nth-child(3) {
                animation-delay: .4s;
            }

            @keyframes bpDotPulse {

                0%,
                100% {
                    opacity: .3
                }

                50% {
                    opacity: 1
                }
            }

            /* TIPS */
            .tips-strip {
                background: rgba(245, 166, 35, .07);
                border: 1px solid rgba(245, 166, 35, .25);
                border-radius: 14px;
                padding: 1rem 1.25rem;
                margin-top: 1rem;
                font-size: .82rem;
                color: #1a2e5a;
                line-height: 1.65;
            }

            .tips-strip strong {
                color: #c0202a;
            }

            /* TOOL BUTTONS */
            .btn-bp-red {
                background: #c0202a;
                color: #fff;
                border: none;
                border-radius: 50px;
                font-weight: 700;
                font-size: .9rem;
                padding: .7rem 1.75rem;
                cursor: pointer;
                transition: all .25s;
                box-shadow: 0 4px 16px rgba(192, 32, 42, .3);
                font-family: 'Plus Jakarta Sans', sans-serif;
            }

            .btn-bp-red:hover {
                background: #e8333e;
                transform: translateY(-2px);
                box-shadow: 0 8px 24px rgba(192, 32, 42, .4);
            }

            .btn-bp-red:disabled {
                opacity: .4;
                cursor: not-allowed;
                transform: none;
                box-shadow: none;
            }

            .btn-bp-outline {
                background: transparent;
                color: #1a2e5a;
                border: 2px solid #dde3ef;
                border-radius: 50px;
                font-weight: 700;
                font-size: .85rem;
                padding: .6rem 1.25rem;
                cursor: pointer;
                transition: all .25s;
                font-family: 'Plus Jakarta Sans', sans-serif;
            }

            .btn-bp-outline:hover {
                border-color: #1a2e5a;
                background: #f4f7fc;
            }

            .btn-bp-white {
                background: #fff;
                color: #c0202a;
                border: none;
                border-radius: 50px;
                font-weight: 700;
                font-size: .9rem;
                padding: .7rem 1.75rem;
                cursor: pointer;
                transition: all .25s;
                box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
                font-family: 'Plus Jakarta Sans', sans-serif;
            }

            .btn-bp-white:hover {
                transform: translateY(-2px);
                box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
            }

            /* UTILS */
            .bp-d-none {
                display: none !important;
            }

            .bp-flex-between {
                display: flex;
                justify-content: space-between;
                align-items: center;
                flex-wrap: wrap;
                gap: 1rem;
            }

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

            /* Sample question chips */
            .sample-chip {
                display: inline-flex;
                align-items: center;
                gap: 5px;
                background: #f0f4ff;
                border: 1.5px solid #c7d4f5;
                border-radius: 50px;
                padding: 4px 12px;
                font-size: .73rem;
                font-weight: 600;
                color: #1a2e5a;
                cursor: pointer;
                transition: all .2s;
                white-space: nowrap;
                max-width: 220px;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .sample-chip:hover {
                background: #1a2e5a;
                color: #fff;
                border-color: #1a2e5a;
            }

            .sample-chip.active {
                background: #c0202a;
                color: #fff;
                border-color: #c0202a;
            }

            @media(max-width:600px) {
                .tool-panel {
                    padding: 1.25rem;
                }

                .task-type-row {
                    flex-direction: column;
                }

                .criteria-grid {
                    grid-template-columns: 1fr 1fr;
                }
            }