:root {
            --bg: #030712;
            --bg2: #050d1a;
            --glass: rgba(255, 255, 255, .04);
            --glass2: rgba(255, 255, 255, .07);
            --brd: rgba(0, 255, 136, .15);
            --brd2: rgba(0, 255, 136, .3);
            --neon: #00ff88;
            --neon2: #00e5ff;
            --neon3: #a855f7;
            --gold: #ffd700;
            --red: #ff4757;
            --txt: #f0f9ff;
            --txt2: #94a3b8;
            --txt3: #64748b;
            --shadow-card: 0 8px 32px rgba(0, 0, 0, .6), 0 0 0 1px rgba(0, 255, 136, .08);
            --safe-b: env(safe-area-inset-bottom, 0px);
        }
        *,
        *::before,
        *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0
        }
        html,
        body {
            height: 100%;
            overflow: hidden
        }
        body {
            background: var(--bg);
            color: var(--txt);
            font-family: 'Noto Serif Bengali', serif;
            font-size: 14px;
            line-height: 1.7;
            background-image: radial-gradient(ellipse at 20% 20%, rgba(0, 255, 136, .06) 0%, transparent 50%), radial-gradient(ellipse at 80% 80%, rgba(168, 85, 247, .05) 0%, transparent 50%)
        }
        #app {
            height: 100vh;
            height: 100dvh;
            display: flex;
            flex-direction: column;
            position: relative;
            overflow: hidden
        }
        .screen {
            display: none;
            flex-direction: column;
            flex: 1;
            overflow: hidden
        }
        .screen.active {
            display: flex;
            animation: screenIn .3s ease
        }
        @keyframes screenIn {
            from {
                opacity: 0;
                transform: translateY(10px)
            }
            to {
                opacity: 1;
                transform: translateY(0)
            }
        }
        .dash-scroll,
        .history-scroll,
        .shop-scroll {
            flex: 1;
            overflow-y: auto;
            padding: 14px 14px calc(80px + var(--safe-b));
            -webkit-overflow-scrolling: touch;
            scrollbar-width: thin;
            scrollbar-color: var(--neon) transparent
        }
        .dash-scroll::-webkit-scrollbar {
            width: 2px
        }
        .dash-scroll::-webkit-scrollbar-thumb {
            background: var(--neon)
        }
        .card {
            background: var(--glass);
            border: 1px solid var(--brd);
            border-radius: 18px;
            padding: 16px;
            margin-bottom: 12px;
            backdrop-filter: blur(20px);
            box-shadow: var(--shadow-card);
            transition: all .3s;
            position: relative;
            overflow: hidden
        }
        .card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(0, 255, 136, .4), transparent)
        }
        .card:hover {
            border-color: var(--brd2);
            box-shadow: 0 0 30px rgba(0, 255, 136, .12), 0 12px 40px rgba(0, 0, 0, .7);
            transform: translateY(-2px)
        }
        .btn-primary {
            width: 100%;
            padding: 14px;
            background: linear-gradient(135deg, rgba(0, 255, 136, .15), rgba(0, 229, 255, .1));
            color: var(--neon);
            border: 1px solid var(--brd2);
            border-radius: 12px;
            font-family: 'Noto Serif Bengali', serif;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            transition: all .25s;
            margin-top: 10px;
            text-shadow: 0 0 10px rgba(0, 255, 136, .5);
            box-shadow: 0 0 20px rgba(0, 255, 136, .1)
        }
        .btn-primary:hover {
            border-color: var(--neon);
            box-shadow: 0 0 30px rgba(0, 255, 136, .35);
            transform: translateY(-2px)
        }
        .btn-secondary {
            padding: 10px 20px;
            background: rgba(0, 255, 136, .06);
            color: var(--neon);
            border: 1px solid var(--brd);
            border-radius: 10px;
            font-family: 'Noto Serif Bengali', serif;
            font-size: 13px;
            cursor: pointer;
            transition: all .2s;
            backdrop-filter: blur(10px)
        }
        .btn-secondary:hover {
            background: rgba(0, 255, 136, .14);
            border-color: var(--neon)
        }
        .btn-avoid {
            width: 100%;
            padding: 12px;
            background: rgba(255, 71, 87, .06);
            color: #ff6b7a;
            border: 1px solid rgba(255, 71, 87, .25);
            border-radius: 12px;
            font-family: 'Noto Serif Bengali', serif;
            font-size: 13px;
            cursor: pointer;
            margin-top: 8px;
            transition: all .2s
        }
        .btn-avoid:hover {
            background: rgba(255, 71, 87, .14);
            border-color: var(--red)
        }
        .btn-ai {
            width: 100%;
            padding: 11px;
            background: rgba(168, 85, 247, .08);
            color: #c084fc;
            border: 1px solid rgba(168, 85, 247, .25);
            border-radius: 10px;
            font-family: 'Noto Serif Bengali', serif;
            font-size: 12px;
            cursor: pointer;
            margin-top: 8px;
            transition: all .2s
        }
        .btn-ai:hover {
            background: rgba(168, 85, 247, .18);
            border-color: var(--neon3)
        }
        .btn-glow {
            animation: btnPulse 2.5s ease infinite
        }
        @keyframes btnPulse {
            0%,
            100% {
                box-shadow: 0 0 15px rgba(0, 255, 136, .25)
            }
            50% {
                box-shadow: 0 0 35px rgba(0, 255, 136, .7)
            }
        }
        .fld {
            margin-bottom: 16px
        }
        .fld label {
            display: block;
            font-size: 10px;
            color: var(--neon);
            margin-bottom: 5px;
            letter-spacing: 1px;
            text-transform: uppercase;
            text-shadow: 0 0 8px rgba(0, 255, 136, .4)
        }
        .opt {
            color: var(--txt3);
            font-weight: 400;
            text-transform: none;
            font-size: 10px
        }
        input[type=text],
        input[type=password],
        input[type=date] {
            width: 100%;
            background: rgba(0, 255, 136, .03);
            border: 1px solid var(--brd);
            border-radius: 10px;
            color: var(--txt);
            font-family: 'Noto Serif Bengali', serif;
            font-size: 13px;
            padding: 12px 14px;
            outline: none;
            transition: all .25s;
            backdrop-filter: blur(10px)
        }
        input:focus {
            border-color: var(--neon);
            box-shadow: 0 0 20px rgba(0, 255, 136, .15);
            background: rgba(0, 255, 136, .05)
        }
        input::placeholder {
            color: var(--txt3)
        }
        .hint {
            font-size: 10px;
            color: var(--txt3);
            margin-top: 4px;
            line-height: 1.5
        }
        #scr-setup {
            align-items: center;
            justify-content: center;
            background: radial-gradient(circle at 30% 40%, rgba(0, 255, 136, .08) 0%, transparent 45%), radial-gradient(circle at 70% 60%, rgba(168, 85, 247, .06) 0%, transparent 45%), var(--bg);
            overflow-y: auto
        }
        .setup-wrap {
            width: 100%;
            max-width: 420px;
            padding: 40px 20px;
            text-align: center
        }
        .setup-logo {
            font-size: 56px;
            margin-bottom: 12px;
            animation: logoFloat 3s ease infinite;
            filter: drop-shadow(0 0 20px rgba(0, 255, 136, .6))
        }
        @keyframes logoFloat {
            0%,
            100% {
                transform: translateY(0)
            }
            50% {
                transform: translateY(-10px)
            }
        }
        .setup-title {
            font-size: clamp(20px, 6vw, 28px);
            font-weight: 700;
            background: linear-gradient(135deg, var(--neon), var(--neon2), var(--gold));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 6px
        }
        .setup-sub {
            color: var(--txt2);
            font-size: 13px;
            margin-bottom: 28px
        }
        .setup-box {
            background: rgba(0, 255, 136, .02);
            border: 1px solid var(--brd);
            border-radius: 22px;
            padding: 26px 22px;
            text-align: left;
            backdrop-filter: blur(30px);
            box-shadow: 0 20px 60px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .05);
            position: relative;
            overflow: hidden
        }
        .setup-box::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--neon), var(--neon2), transparent)
        }
        .setup-footer {
            color: var(--txt3);
            font-size: 11px;
            margin-top: 20px;
            line-height: 1.8
        }
        .top-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 16px 8px;
            flex-shrink: 0;
            background: rgba(3, 7, 18, .8);
            backdrop-filter: blur(20px);
            border-bottom: 1px solid var(--brd)
        }
        .top-greet {
            font-size: 13px;
            color: var(--neon);
            font-weight: 600;
            text-shadow: 0 0 10px rgba(0, 255, 136, .4)
        }
        .top-pts {
            background: rgba(255, 215, 0, .06);
            border: 1px solid rgba(255, 215, 0, .2);
            border-radius: 20px;
            padding: 5px 14px;
            font-size: 12px;
            color: var(--gold);
            box-shadow: 0 0 12px rgba(255, 215, 0, .1)
        }
        #pts-num {
            font-weight: 700;
            font-size: 14px;
            text-shadow: 0 0 8px rgba(255, 215, 0, .4)
        }
        .dash-hero {
            background: linear-gradient(135deg, rgba(0, 255, 136, .06), rgba(0, 229, 255, .03));
            border-color: rgba(0, 255, 136, .2)
        }
        .hero-top {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 16px
        }
        .hero-day {
            display: flex;
            flex-direction: column;
            align-items: center;
            background: linear-gradient(135deg, rgba(0, 255, 136, .2), rgba(0, 229, 255, .15));
            border: 1px solid var(--brd2);
            border-radius: 14px;
            padding: 10px 16px;
            flex-shrink: 0;
            box-shadow: 0 0 20px rgba(0, 255, 136, .2)
        }
        .day-num {
            font-size: 24px;
            font-weight: 700;
            color: var(--neon);
            line-height: 1;
            text-shadow: 0 0 15px rgba(0, 255, 136, .7)
        }
        .day-lbl {
            font-size: 9px;
            color: rgba(0, 255, 136, .6);
            margin-top: 2px;
            letter-spacing: .5px
        }
        .hero-info {
            flex: 1
        }
        .hero-date {
            font-size: 11px;
            color: var(--txt2);
            margin-bottom: 4px
        }
        .streak-row {
            font-size: 12px;
            color: var(--gold);
            display: flex;
            align-items: center;
            gap: 4px;
            text-shadow: 0 0 8px rgba(255, 215, 0, .3)
        }
        .fire {
            font-size: 15px
        }
        .hero-badge {
            font-size: 34px;
            flex-shrink: 0;
            filter: drop-shadow(0 0 10px rgba(0, 255, 136, .4))
        }
        .prog-labels {
            display: flex;
            justify-content: space-between;
            font-size: 11px;
            color: var(--txt2);
            margin-bottom: 5px
        }
        .prog-bar {
            height: 6px;
            background: rgba(255, 255, 255, .06);
            border-radius: 3px;
            overflow: hidden
        }
        .prog-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--neon), var(--neon2));
            border-radius: 3px;
            transition: width .8s ease;
            box-shadow: 0 0 10px rgba(0, 255, 136, .5)
        }
        .prog-animal {
            font-size: 11px;
            color: var(--txt3);
            margin-top: 5px;
            text-align: center
        }
        .task-preview {
            cursor: pointer;
            border-color: rgba(0, 255, 136, .12)
        }
        .task-preview:hover {
            border-color: var(--brd2)
        }
        .task-pre-head {
            font-size: 10px;
            color: var(--neon);
            letter-spacing: .8px;
            text-transform: uppercase;
            margin-bottom: 8px;
            text-shadow: 0 0 8px rgba(0, 255, 136, .3)
        }
        .task-pre-body {
            font-size: 14px;
            font-weight: 600;
            color: var(--txt);
            margin-bottom: 10px;
            line-height: 1.5
        }
        .task-pre-foot {
            display: flex;
            align-items: center;
            gap: 8px
        }
        .task-pre-cat {
            background: rgba(0, 255, 136, .08);
            color: var(--neon);
            border-radius: 20px;
            padding: 3px 10px;
            font-size: 10px;
            border: 1px solid rgba(0, 255, 136, .15)
        }
        .task-pre-pts {
            background: rgba(255, 215, 0, .08);
            color: var(--gold);
            border-radius: 20px;
            padding: 3px 10px;
            font-size: 10px;
            border: 1px solid rgba(255, 215, 0, .15)
        }
        .task-arr {
            margin-left: auto;
            color: var(--neon);
            font-size: 16px;
            text-shadow: 0 0 8px rgba(0, 255, 136, .5)
        }
        .stats-row {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
            margin-bottom: 12px
        }
        .stat-card {
            background: var(--glass);
            border: 1px solid var(--brd);
            border-radius: 14px;
            padding: 14px 8px;
            text-align: center;
            backdrop-filter: blur(15px);
            transition: all .2s
        }
        .stat-card:hover {
            border-color: var(--brd2);
            box-shadow: 0 0 15px rgba(0, 255, 136, .1)
        }
        .stat-icon {
            font-size: 20px;
            margin-bottom: 4px
        }
        .stat-num {
            font-size: 20px;
            font-weight: 700;
            color: var(--neon);
            text-shadow: 0 0 10px rgba(0, 255, 136, .4)
        }
        .stat-lbl {
            font-size: 9px;
            color: var(--txt3);
            margin-top: 2px
        }
        .animal-status {
            border-color: rgba(255, 215, 0, .3);
            background: linear-gradient(135deg, rgba(255, 215, 0, .06), rgba(0, 255, 136, .04));
            text-align: center;
            animation: goldPulse 3s ease infinite
        }
        @keyframes goldPulse {
            0%,
            100% {
                box-shadow: var(--shadow-card)
            }
            50% {
                box-shadow: 0 0 30px rgba(255, 215, 0, .2), 0 12px 40px rgba(0, 0, 0, .6)
            }
        }
        .anim-status-head {
            font-size: 15px;
            font-weight: 700;
            color: var(--gold);
            margin-bottom: 6px;
            text-shadow: 0 0 10px rgba(255, 215, 0, .4)
        }
        .anim-status-sub {
            font-size: 12px;
            color: var(--txt2);
            margin-bottom: 12px
        }
        .qurbani-day-card {
            background: linear-gradient(135deg, rgba(0, 255, 136, .08), rgba(0, 229, 255, .05));
            border-color: rgba(0, 255, 136, .4);
            text-align: center;
            padding: 26px;
            animation: qurbaniGlow 2s ease infinite
        }
        @keyframes qurbaniGlow {
            0%,
            100% {
                box-shadow: 0 0 20px rgba(0, 255, 136, .1)
            }
            50% {
                box-shadow: 0 0 50px rgba(0, 255, 136, .3)
            }
        }
        .qd-title {
            font-size: 18px;
            font-weight: 700;
            color: var(--neon);
            margin-bottom: 8px;
            text-shadow: 0 0 15px rgba(0, 255, 136, .6)
        }
        .qd-sub {
            font-size: 12px;
            color: var(--txt2);
            margin-bottom: 16px
        }
        .recent-head {
            font-size: 10px;
            color: var(--txt3);
            letter-spacing: .8px;
            text-transform: uppercase;
            margin-bottom: 8px
        }
        .recent-item {
            display: flex;
            align-items: center;
            gap: 10px;
            background: var(--glass);
            border: 1px solid var(--brd);
            border-radius: 12px;
            padding: 10px 12px;
            margin-bottom: 7px;
            backdrop-filter: blur(10px);
            transition: all .2s
        }
        .recent-item:hover {
            border-color: var(--brd2);
            background: var(--glass2)
        }
        .ri-emoji {
            font-size: 20px;
            flex-shrink: 0
        }
        .ri-info {
            flex: 1;
            min-width: 0
        }
        .ri-title {
            font-size: 12px;
            color: var(--txt);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap
        }
        .ri-date {
            font-size: 10px;
            color: var(--txt3);
            margin-top: 2px
        }
        .ri-pts {
            font-size: 12px;
            color: var(--neon);
            font-weight: 600;
            flex-shrink: 0;
            text-shadow: 0 0 6px rgba(0, 255, 136, .3)
        }
        .task-header {
            padding: 14px 16px;
            border-bottom: 1px solid var(--brd);
            display: flex;
            align-items: center;
            gap: 12px;
            flex-shrink: 0;
            background: rgba(3, 7, 18, .8);
            backdrop-filter: blur(20px)
        }
        .task-header h2 {
            font-size: 15px;
            font-weight: 600;
            color: var(--txt)
        }
        .back-btn {
            background: var(--glass);
            border: 1px solid var(--brd);
            border-radius: 9px;
            color: var(--txt2);
            font-size: 12px;
            padding: 7px 13px;
            cursor: pointer;
            font-family: 'Noto Serif Bengali', serif;
            flex-shrink: 0;
            backdrop-filter: blur(10px);
            transition: all .2s
        }
        .back-btn:hover {
            border-color: var(--neon);
            color: var(--neon)
        }
        .task-body {
            flex: 1;
            overflow-y: auto;
            padding: 20px 16px 100px;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center
        }
        .task-day-badge {
            background: rgba(0, 255, 136, .08);
            color: var(--neon);
            border: 1px solid rgba(0, 255, 136, .2);
            border-radius: 20px;
            padding: 4px 16px;
            font-size: 11px;
            margin-bottom: 10px;
            text-shadow: 0 0 8px rgba(0, 255, 136, .3)
        }
        .task-cat-badge {
            background: var(--glass);
            color: var(--txt2);
            border: 1px solid var(--brd);
            border-radius: 20px;
            padding: 3px 12px;
            font-size: 10px;
            margin-bottom: 16px;
            backdrop-filter: blur(10px)
        }
        .task-emoji {
            font-size: 64px;
            margin-bottom: 16px;
            animation: emojiFloat 3s ease infinite;
            filter: drop-shadow(0 0 20px rgba(0, 255, 136, .3))
        }
        @keyframes emojiFloat {
            0%,
            100% {
                transform: translateY(0) scale(1)
            }
            50% {
                transform: translateY(-8px) scale(1.06)
            }
        }
        .task-main-title {
            font-size: 18px;
            font-weight: 700;
            color: var(--txt);
            margin-bottom: 12px;
            line-height: 1.5;
            max-width: 360px
        }
        .task-desc {
            font-size: 13px;
            color: var(--txt2);
            line-height: 1.9;
            margin-bottom: 16px;
            max-width: 360px
        }
        .task-pts-badge {
            background: linear-gradient(135deg, rgba(255, 215, 0, .1), rgba(255, 215, 0, .05));
            border: 1px solid rgba(255, 215, 0, .25);
            border-radius: 20px;
            padding: 7px 20px;
            font-size: 13px;
            color: var(--gold);
            font-weight: 600;
            margin-bottom: 16px;
            text-shadow: 0 0 8px rgba(255, 215, 0, .3);
            box-shadow: 0 0 15px rgba(255, 215, 0, .08)
        }
        .ai-motivation {
            background: rgba(168, 85, 247, .06);
            border: 1px solid rgba(168, 85, 247, .2);
            border-radius: 14px;
            padding: 14px;
            margin-bottom: 12px;
            width: 100%;
            max-width: 380px;
            text-align: left;
            backdrop-filter: blur(10px)
        }
        .ai-label {
            font-size: 10px;
            color: #c084fc;
            margin-bottom: 6px;
            letter-spacing: .5px
        }
        .ai-text {
            font-size: 13px;
            color: var(--txt2);
            line-height: 1.8
        }
        .task-done-msg {
            background: rgba(0, 255, 136, .06);
            border: 1px solid rgba(0, 255, 136, .2);
            border-radius: 12px;
            padding: 12px 16px;
            color: var(--neon);
            font-size: 13px;
            width: 100%;
            max-width: 380px;
            text-align: center;
            text-shadow: 0 0 8px rgba(0, 255, 136, .3)
        }
        .task-actions,
        .ai-btn-wrap {
            width: 100%;
            max-width: 380px
        }
        .hist-summary {
            text-align: center;
            background: linear-gradient(135deg, rgba(0, 255, 136, .04), rgba(0, 229, 255, .02))
        }
        .hs-row {
            display: flex;
            justify-content: space-around
        }
        .hs-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px
        }
        .hs-n {
            font-size: 22px;
            font-weight: 700;
            color: var(--neon);
            text-shadow: 0 0 10px rgba(0, 255, 136, .4)
        }
        .hs-l {
            font-size: 10px;
            color: var(--txt3)
        }
        .hist-item {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            background: var(--glass);
            border: 1px solid var(--brd);
            border-radius: 12px;
            padding: 12px;
            margin-bottom: 8px;
            backdrop-filter: blur(10px);
            transition: all .2s
        }
        .hist-item:hover {
            border-color: var(--brd2);
            background: var(--glass2)
        }
        .hi-emoji {
            font-size: 22px;
            flex-shrink: 0
        }
        .hi-info {
            flex: 1;
            min-width: 0
        }
        .hi-title {
            font-size: 13px;
            color: var(--txt);
            font-weight: 500;
            margin-bottom: 3px
        }
        .hi-meta {
            font-size: 10px;
            color: var(--txt3);
            display: flex;
            align-items: center;
            gap: 6px
        }
        .hi-cat {
            background: rgba(0, 255, 136, .08);
            color: var(--neon);
            border: 1px solid rgba(0, 255, 136, .15);
            border-radius: 20px;
            padding: 2px 8px;
            font-size: 9px
        }
        .hi-pts {
            font-size: 12px;
            color: var(--gold);
            font-weight: 600;
            flex-shrink: 0;
            text-shadow: 0 0 6px rgba(255, 215, 0, .2)
        }
        .shop-pts-banner {
            text-align: center;
            background: linear-gradient(135deg, rgba(255, 215, 0, .07), rgba(0, 229, 255, .04));
            border-color: rgba(255, 215, 0, .2)
        }
        .shop-pts-banner strong {
            color: var(--gold);
            font-size: 20px;
            font-weight: 700;
            text-shadow: 0 0 10px rgba(255, 215, 0, .4)
        }
        .shop-sub {
            font-size: 12px;
            color: var(--txt2);
            text-align: center;
            margin: 0 16px 14px;
            line-height: 1.7
        }
        .shop-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px
        }
        @media(max-width:360px) {
            .shop-grid {
                grid-template-columns: 1fr
            }
        }
        .shop-item {
            background: var(--glass);
            border: 1.5px solid var(--brd);
            border-radius: 16px;
            padding: 16px;
            text-align: center;
            backdrop-filter: blur(15px);
            transition: all .25s
        }
        .shop-item.can-buy {
            border-color: rgba(0, 255, 136, .35);
            background: rgba(0, 255, 136, .04);
            box-shadow: 0 0 20px rgba(0, 255, 136, .08)
        }
        .shop-item.can-buy:hover {
            transform: translateY(-4px);
            box-shadow: 0 0 35px rgba(0, 255, 136, .2), 0 12px 30px rgba(0, 0, 0, .5);
            border-color: var(--neon)
        }
        .shop-item.owned {
            border-color: rgba(255, 215, 0, .4);
            background: rgba(255, 215, 0, .05)
        }
        .si-svg-wrap {
            width: 80px;
            height: 65px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 8px
        }
        .si-name {
            font-size: 14px;
            font-weight: 600;
            color: var(--txt);
            margin-bottom: 4px
        }
        .si-pts {
            font-size: 12px;
            color: var(--gold);
            margin-bottom: 6px;
            text-shadow: 0 0 6px rgba(255, 215, 0, .2)
        }
        .si-desc {
            font-size: 10px;
            color: var(--txt3);
            margin-bottom: 10px;
            line-height: 1.5
        }
        .si-btn {
            width: 100%;
            padding: 9px;
            border: 1px solid;
            border-radius: 9px;
            font-family: 'Noto Serif Bengali', serif;
            font-size: 12px;
            cursor: pointer;
            transition: all .2s
        }
        .si-btn.active {
            background: rgba(0, 255, 136, .12);
            border-color: var(--neon);
            color: var(--neon);
            text-shadow: 0 0 6px rgba(0, 255, 136, .3)
        }
        .si-btn.active:hover {
            background: rgba(0, 255, 136, .22);
            box-shadow: 0 0 15px rgba(0, 255, 136, .2)
        }
        .si-btn.disabled {
            background: rgba(255, 255, 255, .02);
            border-color: var(--brd);
            color: var(--txt3);
            cursor: not-allowed
        }
        .si-btn.owned {
            background: rgba(255, 215, 0, .08);
            border-color: rgba(255, 215, 0, .3);
            color: var(--gold)
        }
        .owned-animal {
            display: flex;
            align-items: center;
            gap: 14px;
            background: linear-gradient(135deg, rgba(255, 215, 0, .08), rgba(0, 255, 136, .04));
            border-color: rgba(255, 215, 0, .35)
        }
        .oa-svg-wrap {
            width: 70px;
            height: 56px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center
        }
        .oa-info {
            flex: 1
        }
        .oa-name {
            font-size: 16px;
            font-weight: 700;
            color: var(--gold);
            text-shadow: 0 0 8px rgba(255, 215, 0, .3)
        }
        .oa-msg {
            font-size: 11px;
            color: var(--neon);
            margin-top: 4px
        }
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(3, 7, 18, .92);
            backdrop-filter: blur(30px);
            border-top: 1px solid var(--brd);
            display: flex;
            padding: 8px 0 calc(8px + var(--safe-b));
            z-index: 100
        }
        .nav-btn {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 3px;
            background: none;
            border: none;
            cursor: pointer;
            padding: 4px 0;
            transition: all .2s;
            color: var(--txt3)
        }
        .nav-icon {
            font-size: 20px;
            transition: all .2s
        }
        .nav-lbl {
            font-size: 9px;
            color: var(--txt3);
            transition: all .2s
        }
        .nav-btn.active .nav-icon {
            filter: drop-shadow(0 0 8px rgba(0, 255, 136, .9))
        }
        .nav-btn.active .nav-lbl {
            color: var(--neon);
            font-weight: 600;
            text-shadow: 0 0 6px rgba(0, 255, 136, .4)
        }
        .toast {
            position: fixed;
            bottom: 90px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 255, 136, .08);
            border: 1px solid rgba(0, 255, 136, .3);
            backdrop-filter: blur(20px);
            border-radius: 10px;
            padding: 8px 20px;
            font-size: 13px;
            color: var(--neon);
            z-index: 300;
            opacity: 0;
            transition: opacity .3s;
            pointer-events: none;
            white-space: nowrap;
            text-shadow: 0 0 8px rgba(0, 255, 136, .3);
            box-shadow: 0 0 20px rgba(0, 255, 136, .15)
        }
        .toast.show {
            opacity: 1
        }
        .demo-btn {
            position: fixed;
            bottom: calc(76px + var(--safe-b));
            left: 14px;
            background: rgba(168, 85, 247, .14);
            border: 1px solid rgba(168, 85, 247, .4);
            border-radius: 20px;
            color: #c084fc;
            font-size: 11px;
            font-weight: 600;
            padding: 8px 14px;
            cursor: pointer;
            font-family: 'Noto Serif Bengali', serif;
            z-index: 200;
            transition: all .2s;
            backdrop-filter: blur(16px);
            letter-spacing: .3px;
            box-shadow: 0 0 16px rgba(168, 85, 247, .2);
            white-space: nowrap;
            display: flex;
            align-items: center;
            gap: 5px
        }
        .demo-btn:hover {
            background: rgba(168, 85, 247, .28);
            border-color: var(--neon3);
            box-shadow: 0 0 24px rgba(168, 85, 247, .45);
            transform: translateY(-2px)
        }
        .celebration-overlay {
            position: fixed;
            inset: 0;
            z-index: 500;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(0, 0, 0, .92);
            backdrop-filter: blur(10px)
        }
        #fw-canvas {
            position: absolute;
            inset: 0;
            pointer-events: none
        }
        .cel-content {
            position: relative;
            z-index: 10;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            padding: 24px 20px;
            max-width: 400px;
            width: 100%
        }
        .cel-sparkles {
            position: absolute;
            inset: 0;
            pointer-events: none;
            overflow: hidden
        }
        .sparkle {
            position: absolute;
            font-size: 18px;
            animation: sparkleAnim var(--dur, 2s) ease-in-out var(--del, 0s) infinite
        }
        @keyframes sparkleAnim {
            0% {
                opacity: 0;
                transform: translateY(10px) scale(.5)
            }
            50% {
                opacity: 1;
                transform: translateY(-40px) scale(1)
            }
            100% {
                opacity: 0;
                transform: translateY(-80px) scale(.3)
            }
        }
        .cel-animal-wrap {
            position: relative;
            margin-bottom: 18px;
            width: 160px;
            height: 130px;
            display: flex;
            align-items: center;
            justify-content: center
        }
        .cel-glow-ring {
            position: absolute;
            inset: -20px;
            border-radius: 50%;
            border: 2px solid rgba(0, 255, 136, .35);
            animation: glowRing 1.8s ease-in-out infinite
        }
        .cel-glow-ring-2 {
            position: absolute;
            inset: -35px;
            border-radius: 50%;
            border: 1px solid rgba(0, 229, 255, .2);
            animation: glowRing 2.5s ease-in-out infinite reverse
        }
        @keyframes glowRing {
            0%,
            100% {
                transform: scale(1);
                opacity: .8
            }
            50% {
                transform: scale(1.15);
                opacity: .2
            }
        }
        .cel-animal-svg {
            width: 100%;
            height: 100%;
            animation: animalBounce 1.2s ease infinite;
            filter: drop-shadow(0 0 25px rgba(0, 255, 136, .6))
        }
        @keyframes animalBounce {
            0%,
            100% {
                transform: scale(1)
            }
            50% {
                transform: scale(1.08)
            }
        }
        .cel-msg {
            font-size: clamp(14px, 4vw, 17px);
            font-weight: 700;
            background: linear-gradient(135deg, var(--neon), var(--neon2), var(--gold));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            line-height: 1.5;
            margin-bottom: 10px
        }
        .cel-sub {
            font-size: 13px;
            color: var(--gold);
            margin-bottom: 16px;
            text-shadow: 0 0 8px rgba(255, 215, 0, .3)
        }
        .cel-stats {
            background: rgba(0, 255, 136, .03);
            border: 1px solid var(--brd);
            border-radius: 14px;
            padding: 14px 20px;
            margin-bottom: 20px;
            width: 100%;
            backdrop-filter: blur(15px)
        }
        .cel-stat-row {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            margin-bottom: 6px;
            color: var(--txt2);
            border-bottom: 1px solid rgba(255, 255, 255, .04);
            padding-bottom: 5px
        }
        .cel-stat-row:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0
        }
        .cel-stat-row span:last-child {
            color: var(--neon);
            font-weight: 600;
            text-shadow: 0 0 6px rgba(0, 255, 136, .3)
        }
        .cel-btns {
            display: flex;
            flex-direction: column;
            gap: 8px;
            width: 100%
        }
        .btn-cel {
            padding: 13px;
            background: linear-gradient(135deg, rgba(0, 255, 136, .15), rgba(0, 229, 255, .1));
            color: var(--neon);
            border: 1px solid var(--brd2);
            border-radius: 12px;
            font-family: 'Noto Serif Bengali', serif;
            font-size: 13px;
            cursor: pointer;
            font-weight: 600;
            text-shadow: 0 0 8px rgba(0, 255, 136, .3);
            transition: all .2s
        }
        .btn-cel:hover {
            box-shadow: 0 0 25px rgba(0, 255, 136, .3);
            transform: translateY(-1px)
        }
        .btn-cel-sec {
            padding: 10px;
            background: var(--glass);
            color: var(--txt2);
            border: 1px solid var(--brd);
            border-radius: 10px;
            font-family: 'Noto Serif Bengali', serif;
            font-size: 12px;
            cursor: pointer;
            backdrop-filter: blur(10px);
            transition: all .2s
        }
        .btn-cel-sec:hover {
            border-color: var(--brd2);
            color: var(--txt)
        }
        .animal-goat {
            color: #00ff88
        }
        .animal-cow {
            color: #00e5ff
        }
        .animal-buffalo {
            color: #a855f7
        }
        .animal-camel {
            color: #ffd700
        }

        /* ================================================================
           v2.0 সংযোজন: সেটিংস, কনফার্ম মোডাল, ক্যাটাগরি স্ট্যাটস, টগল সুইচ
           (বিদ্যমান ডিজাইন টোকেন ও কনভেনশন অনুসরণ করে লেখা)
           ================================================================ */

        .top-bar-right {
            display: flex;
            align-items: center;
            gap: 10px
        }
        .icon-btn {
            background: var(--glass);
            border: 1px solid var(--brd);
            border-radius: 10px;
            color: var(--txt2);
            font-size: 15px;
            width: 34px;
            height: 34px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            backdrop-filter: blur(10px);
            transition: all .2s;
            flex-shrink: 0
        }
        .icon-btn:hover {
            border-color: var(--neon);
            color: var(--neon);
            transform: translateY(-1px)
        }

        .settings-scroll {
            flex: 1;
            overflow-y: auto;
            padding: 14px 14px calc(80px + var(--safe-b));
            -webkit-overflow-scrolling: touch;
            scrollbar-width: thin;
            scrollbar-color: var(--neon) transparent
        }
        .settings-card-title {
            font-size: 13px;
            font-weight: 700;
            color: var(--neon);
            margin-bottom: 12px;
            text-shadow: 0 0 10px rgba(0, 255, 136, .35)
        }
        .settings-btn-row {
            display: flex;
            gap: 8px;
            margin-top: 4px
        }
        .settings-btn-row .btn-secondary,
        .settings-btn-row .btn-danger-outline {
            flex: 1;
            width: auto;
            text-align: center
        }
        .settings-toggle-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 0;
            font-size: 13px;
            color: var(--txt)
        }
        .settings-version {
            text-align: center;
            font-size: 10px;
            color: var(--txt3);
            margin: 18px 0 6px;
            letter-spacing: .5px
        }

        /* টগল সুইচ */
        .switch {
            position: relative;
            display: inline-block;
            width: 42px;
            height: 24px;
            flex-shrink: 0
        }
        .switch input {
            opacity: 0;
            width: 0;
            height: 0
        }
        .switch .slider {
            position: absolute;
            cursor: pointer;
            inset: 0;
            background: rgba(255, 255, 255, .08);
            border: 1px solid var(--brd);
            border-radius: 24px;
            transition: all .25s
        }
        .switch .slider::before {
            content: '';
            position: absolute;
            height: 16px;
            width: 16px;
            left: 3px;
            top: 50%;
            transform: translateY(-50%);
            background: var(--txt2);
            border-radius: 50%;
            transition: all .25s
        }
        .switch input:checked + .slider {
            background: rgba(0, 255, 136, .18);
            border-color: var(--brd2);
            box-shadow: 0 0 12px rgba(0, 255, 136, .2)
        }
        .switch input:checked + .slider::before {
            transform: translate(18px, -50%);
            background: var(--neon);
            box-shadow: 0 0 8px rgba(0, 255, 136, .6)
        }

        /* ডেঞ্জার জোন / বাটন */
        .danger-zone {
            border-color: rgba(255, 71, 87, .25)
        }
        .danger-zone .settings-card-title {
            color: #ff6b7a;
            text-shadow: 0 0 10px rgba(255, 71, 87, .35)
        }
        .btn-danger {
            width: 100%;
            padding: 12px;
            background: rgba(255, 71, 87, .1);
            color: #ff6b7a;
            border: 1px solid rgba(255, 71, 87, .35);
            border-radius: 12px;
            font-family: 'Noto Serif Bengali', serif;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: all .2s
        }
        .btn-danger:hover {
            background: rgba(255, 71, 87, .2);
            border-color: var(--red)
        }
        .btn-danger-outline {
            padding: 10px 16px;
            background: transparent;
            color: #ff6b7a;
            border: 1px solid rgba(255, 71, 87, .3);
            border-radius: 10px;
            font-family: 'Noto Serif Bengali', serif;
            font-size: 13px;
            cursor: pointer;
            transition: all .2s
        }
        .btn-danger-outline:hover {
            background: rgba(255, 71, 87, .1)
        }

        /* কনফার্ম মোডাল */
        .confirm-overlay {
            position: fixed;
            inset: 0;
            z-index: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(0, 0, 0, .78);
            backdrop-filter: blur(6px);
            padding: 20px
        }
        .confirm-box {
            background: var(--bg2);
            border: 1px solid var(--brd2);
            border-radius: 18px;
            padding: 22px;
            max-width: 360px;
            width: 100%;
            box-shadow: var(--shadow-card);
            animation: screenIn .25s ease
        }
        .confirm-box h3 {
            font-size: 15px;
            color: var(--neon);
            margin-bottom: 10px;
            text-shadow: 0 0 10px rgba(0, 255, 136, .35)
        }
        .confirm-box p {
            font-size: 13px;
            color: var(--txt2);
            line-height: 1.7;
            margin-bottom: 18px
        }
        .confirm-btns {
            display: flex;
            gap: 10px
        }
        .confirm-btns button {
            flex: 1;
            width: auto;
            margin-top: 0
        }

        /* নতুন যাত্রা কার্ড (qurbani-day-card এর ভ্যারিয়েন্ট) */
        .new-cycle-card {
            background: linear-gradient(135deg, rgba(255, 215, 0, .08), rgba(0, 255, 136, .05));
            border-color: rgba(255, 215, 0, .35);
            text-align: center;
            padding: 26px
        }

        /* ক্যাটাগরি ব্রেকডাউন বার */
        .cat-stats-card {
            padding: 16px
        }
        .catbar-row {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
            font-size: 11px
        }
        .catbar-row:last-child {
            margin-bottom: 0
        }
        .catbar-label {
            width: 92px;
            flex-shrink: 0;
            color: var(--txt2);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap
        }
        .catbar-track {
            flex: 1;
            height: 8px;
            background: rgba(255, 255, 255, .05);
            border-radius: 6px;
            overflow: hidden
        }
        .catbar-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--neon), var(--neon2));
            border-radius: 6px;
            box-shadow: 0 0 8px rgba(0, 255, 136, .4);
            transition: width .4s ease
        }
        .catbar-pts {
            width: 44px;
            flex-shrink: 0;
            text-align: right;
            color: var(--neon);
            font-weight: 600
        }

        /* খারাপ কাজ এড়ানোর সম্পন্ন-বার্তা (লাল টোন ভ্যারিয়েন্ট) */
        .avoid-done-msg {
            background: rgba(255, 71, 87, .06);
            border-color: rgba(255, 71, 87, .2);
            color: #ff6b7a;
            text-shadow: 0 0 8px rgba(255, 71, 87, .3);
            margin-top: 8px
        }

        /* অ্যাক্সেসিবিলিটি: কীবোর্ড ফোকাস স্পষ্টভাবে দৃশ্যমান রাখা */
        button:focus-visible,
        input:focus-visible,
        .nav-btn:focus-visible,
        .icon-btn:focus-visible {
            outline: 2px solid var(--neon);
            outline-offset: 2px
        }
        @media (prefers-reduced-motion: reduce) {
            *,
            *::before,
            *::after {
                animation-duration: .001ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: .001ms !important
            }
        }

        /* ================================================================
           v2.1 সংযোজন: মাল্টি-প্রোভাইডার AI সেটিংস ও বার্ষিক প্রতিফলন
           ================================================================ */

        select#set-ai-provider {
            width: 100%;
            background: rgba(0, 255, 136, .03);
            border: 1px solid var(--brd);
            border-radius: 10px;
            color: var(--txt);
            font-family: 'Noto Serif Bengali', serif;
            font-size: 13px;
            padding: 12px 14px;
            outline: none;
            transition: all .25s;
            backdrop-filter: blur(10px);
            appearance: none;
            -webkit-appearance: none;
            background-image: linear-gradient(45deg, transparent 50%, var(--neon) 50%), linear-gradient(135deg, var(--neon) 50%, transparent 50%);
            background-position: calc(100% - 18px) center, calc(100% - 13px) center;
            background-size: 5px 5px, 5px 5px;
            background-repeat: no-repeat;
        }
        select#set-ai-provider:focus {
            border-color: var(--neon);
            box-shadow: 0 0 20px rgba(0, 255, 136, .15)
        }
        select#set-ai-provider option {
            background: var(--bg2);
            color: var(--txt)
        }
        .ai-provider-dynamic-hint {
            color: var(--neon2)
        }
        .ai-provider-warning {
            color: #ffcc66;
            background: rgba(255, 204, 102, .07);
            border: 1px solid rgba(255, 204, 102, .25);
            border-radius: 8px;
            padding: 8px 10px;
            margin: 6px 0 12px;
            font-size: 10px;
            line-height: 1.6
        }
        .ai-reflection-box {
            background: rgba(168, 85, 247, .07);
            border: 1px solid rgba(168, 85, 247, .3);
            border-radius: 14px;
            padding: 14px 16px;
            margin-bottom: 10px;
            font-size: 13px;
            line-height: 1.8;
            color: #e9d5ff;
            text-align: center;
            width: 100%;
            max-width: 380px;
        }