:root{
            --fd-bg:#f5f7ff;
            --fd-card:#ffffff;
            --fd-card-soft:#f8fbff;
            --fd-line:#dce7fb;
            --fd-text:#081226;
            --fd-muted:#667694;
            --fd-blue:#155dfc;
            --fd-blue-2:#1992ee;
            --fd-blue-3:#0f3fbf;
            --fd-pink:#ff1493;
            --fd-magenta:#c2188b;
            --fd-green:#22c55e;
            --fd-green-2:#16a34a;
            --fd-gold:#f59e0b;
            --fd-purple:#4f46e5;
            --fd-dark:#0b1020;
            --fd-shadow:0 16px 42px rgba(17,39,84,.10);
            --fd-shadow-soft:0 10px 28px rgba(17,39,84,.08);
            --fd-shadow-pink:0 14px 30px rgba(255,20,147,.18);
            --fd-shadow-green:0 14px 30px rgba(34,197,94,.18);
        }

        body{
            background:
                radial-gradient(circle at top left, rgba(25,146,238,.08), transparent 24%),
                radial-gradient(circle at top right, rgba(255,20,147,.08), transparent 20%),
                linear-gradient(180deg,#f8fbff 0%,#eef4ff 100%);
        }

        .hidden{display:none !important;}

        .screen-loader{
            position:fixed;
            inset:0;
            display:flex;
            align-items:center;
            justify-content:center;
            z-index:9999;
            background:
                radial-gradient(circle at top left, rgba(25,146,238,.10), transparent 24%),
                radial-gradient(circle at top right, rgba(255,20,147,.12), transparent 20%),
                linear-gradient(180deg,#f8fbff 0%,#eef4ff 100%);
            color:var(--fd-text);
            font-weight:900;
        }

        .page.page-light{
            max-width:520px;
            margin:0 auto;
            padding:18px 16px 118px;
            min-height:100vh;
            background:transparent;
        }

        .academy-hero-card{
            position:relative;
            overflow:hidden;
            border-radius:28px;
            padding:20px;
            margin-bottom:16px;
            background:
                radial-gradient(circle at top right, rgba(255,20,147,.16), transparent 24%),
                radial-gradient(circle at bottom left, rgba(25,146,238,.16), transparent 28%),
                radial-gradient(circle at center right, rgba(95,227,33,.08), transparent 20%),
                linear-gradient(135deg,#0b1020 0%,#132a6b 55%,#1c1469 100%);
            color:#fff;
            box-shadow:0 20px 42px rgba(11,16,32,.22);
        }

        .academy-hero-copy small{
            display:block;
            color:rgba(255,255,255,.76);
            text-transform:uppercase;
            letter-spacing:.08em;
            font-size:.72rem;
            font-weight:900;
            margin-bottom:8px;
        }

        .academy-hero-copy h2{
            margin:0 0 8px;
            color:#fff;
            font-size:1.28rem;
            line-height:1.1;
        }

        .academy-hero-copy p{
            margin:0;
            color:rgba(255,255,255,.84);
            font-size:.9rem;
            line-height:1.5;
            font-weight:700;
            max-width:86%;
        }

        .academy-hero-badge{
            position:absolute;
            top:16px;
            right:16px;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            min-width:48px;
            height:48px;
            border-radius:16px;
            background:linear-gradient(135deg,var(--fd-pink),var(--fd-magenta));
            color:#fff;
            font-size:.86rem;
            font-weight:900;
            box-shadow:var(--fd-shadow-pink);
        }

        .academy-hero-slider{
            display:grid;
            gap:12px;
            margin-bottom:16px;
        }

        .academy-banner-card{
            position:relative;
            overflow:hidden;
            border-radius:24px;
            min-height:170px;
            background:
                radial-gradient(circle at top right, rgba(255,20,147,.10), transparent 24%),
                radial-gradient(circle at bottom left, rgba(25,146,238,.12), transparent 28%),
                linear-gradient(135deg,#0b1020 0%, #132a6b 58%, #1c1469 100%);
            border:1px solid rgba(37,99,235,.10);
            box-shadow:0 18px 38px rgba(11,16,32,.18);
        }

        .academy-banner-image{
            position:absolute;
            inset:0;
            width:100%;
            height:100%;
            object-fit:cover;
            opacity:.20;
        }

        .academy-banner-overlay{
            position:relative;
            z-index:2;
            padding:18px;
            display:flex;
            flex-direction:column;
            justify-content:space-between;
            min-height:170px;
        }

        .academy-banner-overlay small{
            display:block;
            color:rgba(255,255,255,.76);
            text-transform:uppercase;
            letter-spacing:.08em;
            font-size:.7rem;
            font-weight:900;
            margin-bottom:8px;
        }

        .academy-banner-overlay strong{
            display:block;
            color:#fff;
            font-size:1.05rem;
            line-height:1.15;
            margin-bottom:8px;
            max-width:85%;
        }

        .academy-banner-overlay p{
            margin:0;
            color:rgba(255,255,255,.82);
            font-size:.84rem;
            line-height:1.45;
            font-weight:700;
            max-width:78%;
        }

        .academy-banner-actions{
            display:flex;
            justify-content:flex-end;
            margin-top:auto;
            padding-top:16px;
        }

        .academy-banner-btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            padding:10px 14px;
            border-radius:14px;
            background:linear-gradient(135deg,var(--fd-pink),var(--fd-magenta));
            color:#fff;
            text-decoration:none;
            font-size:.82rem;
            font-weight:900;
            box-shadow:var(--fd-shadow-pink);
        }

        .academy-search-wrap{
            margin-bottom:14px;
        }

        .academy-search-box{
            display:flex;
            align-items:center;
            gap:10px;
            padding:14px 16px;
            border-radius:18px;
            background:rgba(255,255,255,.96);
            border:1px solid var(--fd-line);
            box-shadow:var(--fd-shadow-soft);
        }

        .academy-search-box svg{
            width:18px;
            height:18px;
            color:var(--fd-blue);
            flex:0 0 18px;
        }

        .academy-search-box input{
            flex:1;
            border:none;
            outline:none;
            background:transparent;
            color:var(--fd-text);
            font-size:.92rem;
            font-weight:700;
        }

        .academy-filter-row{
            display:flex;
            gap:10px;
            overflow:auto;
            padding-bottom:4px;
            margin-bottom:16px;
            scrollbar-width:none;
        }

        .academy-filter-row::-webkit-scrollbar{
            display:none;
        }

        .academy-chip{
            border:none;
            border-radius:999px;
            padding:11px 14px;
            white-space:nowrap;
            background:#fff;
            color:var(--fd-blue-3);
            font-size:.82rem;
            font-weight:900;
            border:1px solid rgba(37,99,235,.10);
            box-shadow:0 8px 18px rgba(17,39,84,.06);
        }

        .academy-chip.active{
            background:linear-gradient(135deg,var(--fd-blue),var(--fd-purple));
            color:#fff;
            box-shadow:0 12px 24px rgba(21,93,252,.22);
        }

        .panel-light{
            border-radius:26px;
            padding:18px;
            margin-bottom:16px;
            background:rgba(255,255,255,.96);
            border:1px solid var(--fd-line);
            box-shadow:var(--fd-shadow);
        }

        .panel-light-head{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:10px;
            margin-bottom:14px;
        }

        .panel-light-head h3{
            margin:0;
            font-size:1.03rem;
            color:var(--fd-text);
        }

        .panel-mini-badge{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            min-height:30px;
            padding:6px 10px;
            border-radius:999px;
            background:#eef5ff;
            color:var(--fd-blue-3);
            font-size:.74rem;
            font-weight:900;
            border:1px solid rgba(37,99,235,.10);
        }

        .summary-grid{
            display:grid;
            grid-template-columns:repeat(2,minmax(0,1fr));
            gap:12px;
        }

        .summary-card{
            border-radius:18px;
            padding:14px;
            background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
            border:1px solid rgba(37,99,235,.10);
            box-shadow:0 8px 18px rgba(17,39,84,.05);
        }

        .summary-card span{
            display:block;
            color:var(--fd-muted);
            font-size:.76rem;
            font-weight:800;
            margin-bottom:8px;
        }

        .summary-card strong{
            display:block;
            color:var(--fd-text);
            font-size:1.04rem;
            line-height:1.1;
        }

        .academy-routes-grid,
        .academy-cards-grid{
            display:grid;
            gap:14px;
        }

        .academy-route-card,
        .academy-module-card{
            position:relative;
            overflow:hidden;
            border-radius:22px;
            background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
            border:1px solid rgba(37,99,235,.10);
            box-shadow:0 10px 24px rgba(17,39,84,.06);
        }

        .academy-route-thumb,
        .academy-module-thumb{
            width:100%;
            height:160px;
            object-fit:cover;
            display:block;
        }

        .academy-route-body,
        .academy-module-body{
            padding:15px;
        }

        .academy-route-top,
        .academy-module-top{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:8px;
            margin-bottom:10px;
        }

        .academy-mini-tag{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            min-height:28px;
            padding:6px 10px;
            border-radius:999px;
            background:#eef5ff;
            color:var(--fd-blue-3);
            font-size:.72rem;
            font-weight:900;
        }

        .academy-mini-tag.beginner{
            background:#eafaf0;
            color:#15803d;
        }

        .academy-mini-tag.intermediate{
            background:#fff7e8;
            color:#b45309;
        }

        .academy-mini-tag.advanced{
            background:#ffe8f5;
            color:var(--fd-magenta);
        }

        .academy-route-top small,
        .academy-module-top small{
            color:var(--fd-muted);
            font-size:.74rem;
            font-weight:800;
        }

        .academy-route-body h4,
        .academy-module-body h4{
            margin:0 0 8px;
            color:var(--fd-text);
            font-size:1rem;
            line-height:1.25;
        }

        .academy-route-body p,
        .academy-module-body p{
            margin:0 0 14px;
            color:#50617d;
            font-size:.84rem;
            line-height:1.5;
            font-weight:700;
        }

        .academy-route-actions,
        .academy-module-actions{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:10px;
        }

        .academy-route-progress{
            color:var(--fd-muted);
            font-size:.76rem;
            font-weight:800;
        }

        .small-action-btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            border:none;
            border-radius:14px;
            padding:11px 14px;
            background:#eef5ff;
            color:var(--fd-blue-3);
            font-size:.82rem;
            font-weight:900;
            text-decoration:none;
        }

        .small-action-btn.dark{
            background:linear-gradient(135deg,var(--fd-pink),var(--fd-magenta));
            color:#fff;
            box-shadow:var(--fd-shadow-pink);
        }

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

        .stats-row-card{
            display:flex;
            align-items:center;
            gap:12px;
            padding:14px;
            border-radius:18px;
            background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
            border:1px solid rgba(37,99,235,.10);
        }

        .stats-row-left{
            display:flex;
            align-items:center;
            gap:12px;
        }

        .stats-icon-box{
            width:34px;
            height:34px;
            border-radius:12px;
            display:flex;
            align-items:center;
            justify-content:center;
            background:linear-gradient(135deg,var(--fd-blue),var(--fd-purple));
            color:#fff;
            font-size:.84rem;
            font-weight:900;
            flex:0 0 34px;
        }

        .stats-row-left small{
            color:#50617d;
            font-size:.84rem;
            font-weight:800;
            line-height:1.45;
        }

        .module-check{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            width:28px;
            height:28px;
            border-radius:10px;
            background:linear-gradient(135deg,var(--fd-green),var(--fd-green-2));
            color:#fff;
            font-size:.78rem;
            font-weight:900;
            box-shadow:var(--fd-shadow-green);
            flex:0 0 28px;
        }

        .module-lock{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            min-height:28px;
            padding:6px 10px;
            border-radius:999px;
            background:#eef2f7;
            color:#64748b;
            font-size:.72rem;
            font-weight:900;
        }

        .module-status-text{
            color:var(--fd-muted);
            font-size:.76rem;
            font-weight:800;
        }

        .is-locked{
            opacity:.72;
        }

        .logout-wrap{
            margin-top:8px;
            margin-bottom:16px;
        }

        .logout-light-btn{
            width:100%;
            border:none;
            border-radius:18px;
            padding:16px 18px;
            background:linear-gradient(135deg,#0f172a,#1e293b);
            color:#fff;
            font-size:.96rem;
            font-weight:900;
        }

        .toast-wrap{
            position:fixed;
            left:50%;
            bottom:94px;
            transform:translateX(-50%);
            width:min(92vw,420px);
            display:grid;
            gap:10px;
            z-index:9999;
            pointer-events:none;
        }

        .toast{
            padding:14px 16px;
            border-radius:16px;
            color:#fff;
            font-size:.88rem;
            font-weight:800;
            box-shadow:0 16px 32px rgba(15,23,42,.24);
            text-align:center;
            transform:translateY(0);
            opacity:1;
            transition:all .24s ease;
        }

        .toast.info{background:#0f172a;}
        .toast.success{background:linear-gradient(135deg,var(--fd-green),#16a34a);}
        .toast.error{background:linear-gradient(135deg,#dc2626,#b91c1c);}

        .empty-box{
            padding:18px;
            text-align:center;
            color:var(--fd-muted);
            border-radius:18px;
            border:1px dashed rgba(37,99,235,.16);
            background:#fbfdff;
            font-weight:700;
        }

        @media (max-width:420px){
            .page.page-light{
                padding-left:14px;
                padding-right:14px;
            }

            .academy-banner-card{
                min-height:184px;
            }

            .academy-banner-overlay{
                min-height:184px;
                padding:16px;
            }

            .academy-banner-overlay strong,
            .academy-banner-overlay p{
                max-width:100%;
            }

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

            .academy-route-thumb,
            .academy-module-thumb{
                height:150px;
            }
        }

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