@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

:root {
    --bg: #07090e;
    --panel: #0f131c;
    --panel-2: #141a25;
    --line: #222a38;
    --text: #f5f7fb;
    --muted: #8d98aa;
    --cyan: #17fe3a;
    --blue: #1f4fef;
    --purple: #5309f1;
    --orange: #ff9d55;
    --sidebar: 250px
}

/* Universo TAZZ IA */
:root {
    --bg: #020504;
    --panel: #07100c;
    --panel-2: #0b1711;
    --line: #173425;
    --text: #f3fff7;
    --muted: #85a693;
    --cyan: #39ff78;
    --blue: #00d98b;
    --purple: #83ff5b;
}

body {
    min-height: 100vh;
    background:
        radial-gradient(circle at 72% 14%, #123d2466, transparent 23rem),
        radial-gradient(circle at 12% 75%, #063f2c55, transparent 28rem),
        #020504;
    overflow-x: hidden;
}

.space-scene { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none }
.space-scene::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #020504e8, #02050491 52%, #020504da) }
.stars { position: absolute; inset: -40%; background-image: radial-gradient(#c8ffe0 1px, transparent 1px); background-size: 54px 54px; opacity: .32; animation: starDrift 70s linear infinite }
.stars-b { background-size: 91px 91px; opacity: .18; transform: rotate(20deg); animation-duration: 110s }
.shooting-star { position: absolute; width: 150px; height: 1px; background: linear-gradient(90deg, transparent, #aaffc9, transparent); filter: drop-shadow(0 0 6px #39ff78); transform: rotate(-28deg); opacity: 0; animation: shoot 8s ease-in infinite }
.star-one { top: 12%; left: 72%; animation-delay: 1s }.star-two { top: 42%; left: 44%; animation-delay: 4.8s }.star-three { top: 76%; left: 82%; animation-delay: 7s }
.planet { position: absolute; border-radius: 50%; filter: drop-shadow(0 0 45px #39ff7822) }
.planet-green { width: 190px; height: 190px; right: 5%; top: 17%; background: radial-gradient(circle at 32% 28%, #8dffad, #148044 27%, #062c1b 57%, #010604 73%); opacity: .38; box-shadow: inset -24px -19px 40px #000 }
.planet-dark { width: 84px; height: 84px; left: 27%; top: 68%; background: radial-gradient(circle at 30% 25%, #3e7f5b, #0b2418 42%, #010302 74%); opacity: .28 }
.brand-watermark { position: fixed; right: -1vw; bottom: 1vh; z-index: -1; color: transparent; -webkit-text-stroke: 1px #39ff7819; font-family: 'Space Mono'; font-size: clamp(4rem, 13vw, 12rem); font-weight: 800; letter-spacing: -.08em; transform: rotate(-6deg); pointer-events: none }

@keyframes starDrift { to { transform: translate3d(12%, 12%, 0) } }
@keyframes shoot { 0%,70% { opacity: 0; transform: translate(-280px,-160px) rotate(-28deg) } 73% { opacity: 1 } 88%,100% { opacity: 0; transform: translate(390px,220px) rotate(-28deg) } }

.sidebar { background: linear-gradient(180deg, #040906f4, #07100cf2); border-color: #19452d; box-shadow: 18px 0 60px #0007 }
.brand { opacity: .74; letter-spacing: .12em }.brand:hover { opacity: 1 }
.brand-mark { box-shadow: 0 0 30px #39ff7866 }
.topbar { height: 84px; background: #030705d9; border-color: #163b29 }
.portal-branding { display:flex;align-items:center;gap:12px;min-width:0 }
.portal-logo { width:48px;height:48px;object-fit:cover;border:1px solid #39ff7866;border-radius:12px;box-shadow:0 0 24px #39ff7855;filter:saturate(1.08) contrast(1.04) }
.portal-identity { display: flex; align-items: baseline; gap: 9px; font-family: 'Space Mono'; letter-spacing: .12em }
.portal-identity span { color: #83a98f; font-size: .65rem }.portal-identity strong { color: white; font-size: clamp(.9rem, 1.7vw, 1.2rem); text-shadow: 0 0 20px #39ff7855 }.portal-identity small { display: flex; align-items: center; gap: 6px; margin-left: 6px; color: var(--cyan); font-size: .52rem }.portal-identity i { width: 6px; height: 6px; background: var(--cyan); border-radius: 50%; box-shadow: 0 0 12px var(--cyan) }
.search-box { background: #06100bca; border-color: #1b4a31 }
.content { max-width: 1480px }
.welcome { min-height: 490px; border-color: #173425 }
.welcome::before { width: 560px; height: 400px; background: #20e96c20; filter: blur(100px) }
.welcome h1 { font-family: 'Space Mono', monospace; font-size: clamp(2.5rem, 5vw, 5.1rem); letter-spacing: -.075em; text-shadow: 0 0 42px #39ff7817 }
.welcome h1 em { text-shadow: 0 0 26px #39ff7866 }
.welcome h1 #welcome-message { display:inline-block;max-width:100%;font-size:.62em;line-height:1.08;letter-spacing:-.055em }
.welcome h1 #welcome-name { display:inline-block;max-width:100%;font-size:.76em;line-height:1.08;overflow-wrap:anywhere }
.welcome blockquote { margin: 20px 0 3px; padding-left: 15px; color: #b6d7c2; border-left: 2px solid var(--cyan); font-family: 'Space Mono'; font-size: .72rem; font-style: normal; letter-spacing: .03em }
.core { background: radial-gradient(circle at 30% 20%, #205536, #07140d 60%); border-color: #3f9660; box-shadow: 0 0 90px #39ff7830 }
.orbit { border-color: #2b6343 }.tech-tag { background: #07130dbd; border-color: #28663f; color: #c8ffdb }
.stats { background: #163b29; border-color: #163b29; box-shadow: 0 22px 70px #0006 }.stats article { background: #06100be8 }
.motivation-strip { display: flex; align-items: center; gap: 18px; margin: 0 0 15px; padding: 11px 16px; background: linear-gradient(90deg, #0a1b12, #07100c99); border: 1px solid #19472e; border-radius: 9px; font: .62rem 'Space Mono'; letter-spacing: .13em }.motivation-strip span { color: var(--cyan) }.motivation-strip small { margin-left: auto; color: #779a84; letter-spacing: .03em }
.lesson-grid::before { background: linear-gradient(180deg, #39ff78, #0c8d4b 55%, #14291d 90%); box-shadow: 0 0 24px #39ff7844 }
.lesson-card { overflow: hidden; background: linear-gradient(145deg, #0a1710e8, #050b08e8); border-color: #173d29; box-shadow: 0 18px 50px #0005; backdrop-filter: blur(14px) }
.lesson-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 25%, #39ff7809 50%, transparent 75%); transform: translateX(-120%); transition: transform .7s ease; pointer-events: none }.lesson-card:hover::after { transform: translateX(120%) }
.lesson-card.unlocked:hover { border-color: var(--cyan); box-shadow: 0 0 0 1px #39ff7830, 0 20px 55px #0007, 0 0 34px #39ff7812 }
.lesson-card.completed { border-color: #277c4d; background: linear-gradient(145deg, #0b2115e8, #050c08e8) }
.lesson-tech { display: flex; align-items: center; gap: 7px; margin-bottom: 13px }.tech-icon { width: auto; min-width: 27px; height: 27px; padding: 0 5px; display: grid; place-items: center; border: 1px solid #2c6b45; border-radius: 7px; color: var(--cyan); background: #0a1b12; font: 700 .54rem 'Space Mono' }.lesson-tip-mini { margin: 15px 0 0 !important; padding: 10px 11px; min-height: 0 !important; color: #a3cbb0 !important; background: #06110b; border-left: 2px solid var(--cyan); border-radius: 0 6px 6px 0; font-size: .69rem !important; line-height: 1.55 !important }.lesson-tip-mini b { color: var(--cyan); font-family: 'Space Mono'; font-size: .58rem; letter-spacing: .08em }
.lesson-dialog,.quiz-dialog { background: linear-gradient(145deg, #07130ddf, #030805f2); border-color: #286842; box-shadow: 0 35px 120px #000e, 0 0 50px #39ff7817; backdrop-filter: blur(22px) }
.lesson-tip { margin-top: 20px; padding: 14px; background: #091b11; border: 1px solid #20583a; border-radius: 9px }.lesson-tip span,.lesson-notes>span { color: var(--cyan); font: .61rem 'Space Mono'; letter-spacing: .12em }.lesson-tip p { margin: 7px 0 0; color: #a9c9b4; font-size: .76rem; line-height: 1.6 }
.lesson-notes { display: block; margin-top: 16px }.lesson-notes small { display: block; margin: 6px 0 9px; color: #769083; font-size: .68rem }.lesson-notes textarea { width: 100%; resize: vertical; padding: 12px; color: #eafff0; background: #030906; border: 1px solid #1d5034; border-radius: 8px; font: .76rem Manrope; line-height: 1.6; outline: none }.lesson-notes textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px #39ff7812 }.lesson-notes b { display: block; min-height: 16px; margin-top: 5px; color: #527962; font-size: .58rem; text-align: right }

@media (prefers-reduced-motion: reduce) { .stars,.shooting-star,.orbit { animation: none !important } }
@media(max-width:620px) { .portal-logo { width:40px;height:40px;border-radius:10px }.portal-branding { gap:8px }.portal-identity small,.portal-identity span { display:none }.portal-identity strong { font-size:.83rem }.planet-green { width:110px;height:110px;right:-30px }.motivation-strip { flex-wrap:wrap }.motivation-strip small { width:100%;margin:0 }.brand-watermark { font-size:18vw }.welcome blockquote { line-height:1.6 } }

* {
    box-sizing: border-box
}

[hidden] {
    display: none !important
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    font-family: Manrope, Arial, sans-serif;
    color: var(--text);
    background: var(--bg)
}

button,
input {
    font: inherit
}

.app-shell {
    min-height: 100vh
}

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar);
    display: flex;
    flex-direction: column;
    padding: 26px 18px;
    background: #090c12;
    border-right: 1px solid var(--line);
    z-index: 20
}

.brand {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 8px;
    color: white;
    text-decoration: none;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: .04em
}

.brand b {
    color: var(--cyan)
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: #07100e;
    background: var(--cyan);
    border-radius: 8px;
    font-family: 'Space Mono';
    font-weight: bold;
    box-shadow: 0 0 25px #45f5c244
}

.main-nav {
    display: grid;
    gap: 6px;
    margin-top: 45px
}

.main-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 13px;
    color: #8390a3;
    border: 1px solid transparent;
    border-radius: 9px;
    text-decoration: none;
    font-size: .9rem;
    font-weight: 600
}

.main-nav a:hover,
.main-nav a.active {
    color: white;
    background: #131923;
    border-color: #08ff5a
}

.main-nav a.active span {
    color: var(--cyan)
}

.sidebar-card {
    margin-top: auto;
    padding: 17px;
    background: linear-gradient(145deg, #151d28, #10151e);
    border: 1px solid #293447;
    border-radius: 12px
}

.sidebar-card>span,
.eyebrow {
    color: var(--cyan);
    font-family: 'Space Mono';
    font-size: .67rem;
    letter-spacing: .13em
}

.sidebar-card strong,
.sidebar-card p,
.sidebar-card small {
    display: block
}

.sidebar-card strong {
    margin-top: 8px;
    font-size: .88rem
}

.sidebar-card p,
.sidebar-card small {
    color: var(--muted);
    font-size: .72rem
}

.mini-progress,
.progress-track,
.quiz-progress {
    overflow: hidden;
    background: #252d3a;
    border-radius: 20px
}

.mini-progress {
    height: 5px;
    margin: 14px 0 7px
}

.mini-progress i,
.progress-track i,
.quiz-progress i {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--cyan), var(--blue));
    transition: width .4s ease
}

.sidebar footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 22px 7px 0
}

.avatar {
    display: grid;
    place-items: center;
    width: 35px;
    height: 35px;
    color: #08100e;
    background: var(--cyan);
    border-radius: 50%;
    font-size: .72rem;
    font-weight: 800
}

.sidebar footer strong,
.sidebar footer span {
    display: block
}

.sidebar footer strong {
    font-size: .76rem
}

.sidebar footer span {
    margin-top: 2px;
    color: #7f8b9d;
    font-size: .66rem
}

.sidebar footer .user-data { flex: 1; min-width: 0 }
.sidebar footer .user-data strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
#logout-button { width: 30px; height: 30px; padding: 0; color: #7f8b9d; background: transparent; border: 1px solid #283241; border-radius: 7px; cursor: pointer }
#logout-button:hover { color: var(--cyan); border-color: var(--cyan) }

main {
    margin-left: var(--sidebar)
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    height: 74px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 clamp(24px, 4vw, 58px);
    background: #080b11e8;
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(16px)
}

.status-live {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #9ba6b6;
    font-size: .78rem
}

.status-live i {
    width: 7px;
    height: 7px;
    background: var(--cyan);
    border-radius: 50%;
    box-shadow: 0 0 12px var(--cyan)
}

.search-box {
    width: min(340px, 42vw);
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 13px;
    background: #111620;
    border: 1px solid #242d3b;
    border-radius: 8px
}

.search-box span {
    color: #7d8999
}

.search-box input {
    width: 100%;
    border: 0;
    outline: 0;
    color: white;
    background: transparent;
    font-size: .8rem
}

.menu-button {
    display: none;
    color: white;
    background: transparent;
    border: 0;
    font-size: 1.4rem
}

.content {
    max-width: 1400px;
    margin: auto;
    padding: 0 clamp(24px, 4vw, 58px) 70px
}

.welcome {
    position: relative;
    min-height: 420px;
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    align-items: center;
    gap: 35px;
    overflow: hidden;
    border-bottom: 1px solid var(--line)
}

.welcome::before {
    content: '';
    position: absolute;
    inset: auto 15% -100px auto;
    width: 400px;
    height: 300px;
    background: #245fdf24;
    filter: blur(80px)
}

.welcome h1 {
    margin: 14px 0 18px;
    font-size: clamp(2.7rem, 5vw, 5.5rem);
    line-height: .98;
    letter-spacing: -.06em
}

.welcome h1 em {
    color: var(--cyan);
    font-style: normal
}

.welcome p {
    max-width: 620px;
    color: #9aa5b5;
    font-size: 1rem;
    line-height: 1.75
}

.primary-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 35px;
    padding: 13px 17px;
    border: 0;
    color: #07100e;
    background: var(--cyan);
    border-radius: 7px;
    font-size: .82rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 0 25px #45f5c225
}

.welcome .primary-button {
    margin-top: 16px
}

.primary-button:hover {
    filter: brightness(1.08);
    transform: translateY(-1px)
}

.hero-orbit {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 340px
}

.orbit {
    position: absolute;
    border: 1px solid #344258;
    border-radius: 50%;
    animation: spin 18s linear infinite
}

.orbit-one {
    width: 290px;
    height: 290px
}

.orbit-two {
    width: 215px;
    height: 215px;
    border-style: dashed;
    animation-direction: reverse;
    animation-duration: 12s
}

.core {
    z-index: 1;
    width: 130px;
    height: 130px;
    display: grid;
    place-items: center;
    text-align: center;
    background: radial-gradient(circle at 30% 20%, #244351, #101722 60%);
    border: 1px solid #436372;
    border-radius: 50%;
    box-shadow: 0 0 70px #45f5c21c
}

.core span {
    font-family: 'Space Mono';
    color: var(--cyan);
    font-size: 2rem
}

.core small {
    font-size: .6rem;
    letter-spacing: .2em
}

.tech-tag {
    position: absolute;
    padding: 7px 11px;
    color: #bbc5d3;
    background: #121823;
    border: 1px solid #2a3444;
    border-radius: 5px;
    font-family: 'Space Mono';
    font-size: .65rem
}

.tag-html {
    top: 13%;
    left: 17%
}

.tag-css {
    right: 12%;
    top: 37%
}

.tag-js {
    left: 21%;
    bottom: 10%
}

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

.stats {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    margin: 30px 0 65px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden
}

.stats article {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 21px;
    background: #0e131c
}

.stat-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    font-weight: 800
}

.stat-icon.cyan {
    color: var(--cyan);
    background: #45f5c214
}

.stat-icon.purple {
    color: #b58cff;
    background: #9b6cff16
}

.stat-icon.orange {
    color: var(--orange);
    background: #ff9d5517
}

.stats article span,
.stats article strong {
    display: block
}

.stats article span {
    color: #7e899a;
    font-size: .7rem
}

.stats article strong {
    margin-top: 4px;
    font-size: 1rem
}

.stats article strong b {
    font-size: 1.15rem
}

.progress-track {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px
}

.section-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 25px;
    margin-bottom: 28px
}

.section-heading h2 {
    margin: 8px 0;
    font-size: 1.8rem
}

.section-heading p {
    margin: 0;
    color: var(--muted);
    font-size: .88rem
}

.filters {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    justify-content: flex-end
}

.filters button {
    padding: 8px 13px;
    color: #8792a3;
    background: transparent;
    border: 1px solid #293242;
    border-radius: 6px;
    font-size: .72rem;
    cursor: pointer
}

.filters button:hover,
.filters button.active {
    color: #07100e;
    background: var(--cyan);
    border-color: var(--cyan);
    font-weight: 700
}

.course-module-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 0 0 24px
}

.course-module-card {
    position: relative;
    min-width: 0;
    padding: 20px;
    overflow: hidden;
    color: var(--text);
    text-align: left;
    background: linear-gradient(145deg, #0b1510eb, #050908f2);
    border: 1px solid #1b3b2a;
    border-radius: 13px;
    cursor: pointer;
    transition: transform .25s, border-color .25s, box-shadow .25s
}

.course-module-card::after {
    content: '';
    position: absolute;
    width: 110px;
    height: 110px;
    top: -55px;
    right: -45px;
    background: var(--module-glow, #39ff78);
    border-radius: 50%;
    opacity: .09;
    filter: blur(8px)
}

.course-module-card:hover,
.course-module-card.active {
    transform: translateY(-4px);
    border-color: var(--module-glow, var(--cyan));
    box-shadow: 0 18px 55px #0008, 0 0 28px color-mix(in srgb, var(--module-glow, var(--cyan)) 14%, transparent)
}

.course-module-card.active {
    background: linear-gradient(145deg, color-mix(in srgb, var(--module-glow, var(--cyan)) 10%, #09110d), #050908f2)
}

.course-module-card.green { --module-glow: #39ff78 }
.course-module-card.violet { --module-glow: #aa7dff }
.course-module-card.blue { --module-glow: #5ba8ff }
.course-module-card.orange { --module-glow: #ff9d55 }
.course-module-index { color: var(--module-glow); font: 700 .55rem 'Space Mono'; letter-spacing: .12em }
.course-module-icon { width: 44px; height: 44px; display: grid; place-items: center; margin: 18px 0 14px; color: #06100a; background: var(--module-glow); border-radius: 10px; font: 800 .75rem 'Space Mono'; box-shadow: 0 0 24px color-mix(in srgb, var(--module-glow) 25%, transparent) }
.course-module-card h3 { margin: 0; font-size: 1rem }
.course-module-card p { min-height: 58px; margin: 9px 0 17px; color: #7f8d86; font-size: .69rem; line-height: 1.55 }
.course-module-progress { height: 4px; overflow: hidden; background: #19231e; border-radius: 8px }
.course-module-progress i { display: block; height: 100%; background: var(--module-glow); border-radius: inherit; box-shadow: 0 0 12px var(--module-glow) }
.course-module-card footer { display: flex; justify-content: space-between; margin-top: 9px; color: #637269; font: .58rem 'Space Mono' }
.course-module-card footer b { color: var(--module-glow) }

.active-module-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 34px 0 18px;
    padding: 20px 22px;
    background: linear-gradient(110deg, #0b1b12e8, #07100be8);
    border: 1px solid #23543a;
    border-radius: 12px;
    box-shadow: inset 3px 0 0 var(--cyan)
}

.active-module-panel>div:first-child>span { color: var(--cyan); font: 700 .57rem 'Space Mono'; letter-spacing: .12em }
.active-module-panel h3 { margin: 7px 0 5px; font-size: 1.25rem }
.active-module-panel p { margin: 0; color: #7c8c83; font-size: .72rem }
.active-module-meter { width: min(250px, 30%); text-align: right }
.active-module-meter strong { color: var(--cyan); font: 700 1rem 'Space Mono' }
.active-module-meter span { display: block; height: 5px; margin-top: 8px; overflow: hidden; background: #18251e; border-radius: 8px }
.active-module-meter i { display: block; height: 100%; background: var(--cyan); box-shadow: 0 0 14px #39ff78 }

.path-legend {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0 0 32px;
    padding: 13px 16px;
    color: #8d98aa;
    background: #0d121a;
    border: 1px solid #202a38;
    border-radius: 9px;
    font-size: .68rem
}

.path-legend span { display: flex; align-items: center; gap: 7px }
.path-legend small { margin-left: auto; color: #697587 }
.dot { width: 8px; height: 8px; border-radius: 50% }
.dot.available { background: var(--cyan); box-shadow: 0 0 10px var(--cyan) }
.dot.completed { background: var(--blue) }
.dot.locked { background: #454d59 }

.lesson-grid {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 20px 0 30px
}

.lesson-grid::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 50%;
    width: 2px;
    background: linear-gradient(180deg, var(--cyan), #2455d9 45%, #252e3b 80%);
    box-shadow: 0 0 18px #17fe3a33
}

.lesson-card {
    position: relative;
    width: calc(50% - 46px);
    min-width: 0;
    padding: 22px;
    background: linear-gradient(145deg, #111720, #0d1118);
    border: 1px solid #202938;
    border-radius: 11px;
    cursor: pointer;
    transition: transform .2s, border-color .2s, opacity .2s
}

.lesson-card:nth-child(odd) { align-self: flex-start }
.lesson-card:nth-child(even) { align-self: flex-end }

.lesson-card.unlocked:hover {
    transform: translateY(-3px) scale(1.01);
    border-color: #47c71d
}

.lesson-card.completed {
    border-color: #2e7866
}

.path-node {
    position: absolute;
    top: 50%;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    color: #9ba6b6;
    background: #131a24;
    border: 2px solid #344051;
    border-radius: 50%;
    font-size: .85rem;
    font-weight: bold;
    transform: translateY(-50%);
    z-index: 2
}

.lesson-card:nth-child(odd) .path-node { right: -66px }
.lesson-card:nth-child(even) .path-node { left: -66px }
.lesson-card.unlocked .path-node { color: #07100e; background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 20px #17fe3a66 }
.lesson-card.completed .path-node { color: white; background: var(--blue); border-color: #7190ff; box-shadow: 0 0 20px #1f4fef66 }
.lesson-card.locked { cursor: not-allowed; opacity: .48; filter: saturate(.35) }
.lesson-card.locked:hover { border-color: #394352 }

.lesson-head { display: flex; justify-content: space-between; align-items: center; gap: 12px }
.lesson-status { color: var(--cyan); font-family: 'Space Mono'; font-size: .55rem; letter-spacing: .08em }
.lesson-card.completed .lesson-status { color: #7897ff }
.lesson-card.locked .lesson-status { color: #737d8b }

.lesson-number {
    display: block;
    color: #4c596c;
    font-family: 'Space Mono';
    font-size: .65rem
}

.lesson-card h3 {
    margin: 18px 0 0;
    font-size: 1.02rem;
    line-height: 1.45
}

.lesson-card p {
    min-height: 39px;
    margin: 9px 0 17px;
    color: #778396;
    font-size: .72rem;
    line-height: 1.5
}

.lesson-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 13px;
    border-top: 1px solid #202735;
    color: #697486;
    font-size: .65rem
}

.lesson-meta b {
    color: #aab3c1;
    font-weight: 600
}

.empty-state {
    padding: 50px;
    text-align: center;
    color: var(--muted);
    border: 1px dashed #2a3443;
    border-radius: 10px
}

.lesson-dialog,
.quiz-dialog {
    padding: 0;
    color: var(--text);
    background: #0d1118;
    border: 1px solid #2b3544;
    border-radius: 14px;
    box-shadow: 0 30px 100px #000c
}

.lesson-dialog {
    width: min(1100px, 94vw)
}

.quiz-dialog {
    width: min(620px, 92vw);
    padding: 32px
}

.lesson-dialog::backdrop,
.quiz-dialog::backdrop {
    background: #030509db;
    backdrop-filter: blur(6px)
}

.dialog-close {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 3;
    width: 34px;
    height: 34px;
    color: #9da7b7;
    background: #171e29;
    border: 1px solid #2b3543;
    border-radius: 50%;
    font-size: 1.3rem;
    cursor: pointer
}

.lesson-layout {
    display: grid;
    grid-template-columns: 1.35fr .75fr
}

.video-column {
    padding: 28px;
    background: #080b10
}

.video-stage {
    position: relative;
    aspect-ratio: 16/9;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: radial-gradient(circle at center, #162b32, #090d13 65%);
    border: 1px solid #25313e;
    border-radius: 9px
}

.video-stage iframe,
.video-stage video {
    width: 100%;
    height: 100%;
    border: 0
}

.video-stage video {
    accent-color: #39ff78;
    color-scheme: dark
}

.video-stage video::-webkit-media-controls-panel {
    background: linear-gradient(180deg, transparent 0%, #020806d9 48%, #06140de8 100%)
}

.video-stage video::-webkit-media-controls-play-button,
.video-stage video::-webkit-media-controls-mute-button,
.video-stage video::-webkit-media-controls-fullscreen-button,
.video-stage video::-webkit-media-controls-overflow-button {
    background-color: #39ff78;
    border-radius: 50%;
    box-shadow: 0 0 12px #39ff78a8;
    filter: brightness(1.08) saturate(1.2)
}

.video-stage video::-webkit-media-controls-timeline,
.video-stage video::-webkit-media-controls-volume-slider {
    filter: sepia(1) saturate(7) hue-rotate(82deg) brightness(1.25)
}

.video-stage video::-webkit-media-controls-current-time-display,
.video-stage video::-webkit-media-controls-time-remaining-display {
    color: #d9ffe5;
    text-shadow: 0 0 7px #39ff78
}

.video-placeholder {
    text-align: center
}

.play-orb {
    width: 70px;
    height: 70px;
    display: grid;
    place-items: center;
    margin: auto;
    color: #06100d;
    background: var(--cyan);
    border-radius: 50%;
    font-size: 1.4rem;
    box-shadow: 0 0 55px #45f5c244
}

.video-placeholder strong,
.video-placeholder span {
    display: block
}

.video-placeholder strong {
    margin: 19px 0 6px
}

.video-placeholder span {
    color: var(--muted);
    font-size: .78rem
}

.video-tools {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding-top: 14px
}

.video-tools span {
    color: #697587;
    font-size: .7rem
}

.video-tools button {
    color: var(--cyan);
    background: transparent;
    border: 0;
    font-size: .72rem;
    cursor: pointer
}

.video-form {
    margin-top: 14px;
    padding: 15px;
    background: #111720;
    border-radius: 8px
}

.video-form label {
    display: block;
    margin-bottom: 8px;
    color: #9aa5b5;
    font-size: .72rem
}

.video-form div {
    display: flex;
    gap: 8px
}

.video-form input {
    flex: 1;
    min-width: 0;
    padding: 10px;
    color: white;
    background: #090d13;
    border: 1px solid #293444;
    border-radius: 6px
}

.video-form button {
    padding: 9px 15px;
    border: 0;
    color: #07100e;
    background: var(--cyan);
    border-radius: 6px;
    font-weight: bold
}

.lesson-info {
    padding: 42px 30px 30px
}

.lesson-kicker,
.quiz-top span,
.quiz-category {
    color: var(--cyan);
    font-family: 'Space Mono';
    font-size: .68rem;
    letter-spacing: .11em
}

.lesson-info h2 {
    margin: 12px 0;
    font-size: 1.8rem
}

.lesson-info>p {
    color: #94a0b1;
    font-size: .82rem;
    line-height: 1.7
}

.lesson-info h3 {
    margin-top: 26px;
    font-size: .78rem
}

.lesson-info ul {
    padding-left: 18px;
    color: #a5afbd;
    font-size: .78rem;
    line-height: 2
}

.lesson-actions {
    display: grid;
    gap: 9px;
    margin-top: 27px
}

.lesson-actions a {
    padding: 11px;
    text-align: center;
    color: #b9c3d1;
    border: 1px solid #2d3747;
    border-radius: 7px;
    text-decoration: none;
    font-size: .75rem
}

.quiz-top {
    display: flex;
    justify-content: space-between
}

.quiz-top strong {
    font-family: 'Space Mono';
    font-size: .7rem
}

.quiz-progress {
    height: 5px;
    margin: 15px 0 32px
}

.quiz-category {
    margin: 0
}

.quiz-dialog h2 {
    font-size: 1.5rem;
    line-height: 1.4
}

.quiz-options {
    display: grid;
    gap: 10px;
    margin-top: 23px
}

.quiz-options button {
    padding: 13px 15px;
    text-align: left;
    color: #b9c2d0;
    background: #121822;
    border: 1px solid #273140;
    border-radius: 8px;
    cursor: pointer
}

.quiz-options button:hover {
    color: white;
    border-color: var(--cyan)
}

.quiz-result {
    text-align: center
}

.result-icon {
    width: 75px;
    height: 75px;
    display: grid;
    place-items: center;
    margin: auto;
    color: #07100e;
    background: var(--cyan);
    border-radius: 50%;
    font-size: 2rem;
    font-weight: bold
}

.quiz-result p {
    color: var(--muted);
    line-height: 1.6
}

.quiz-result .primary-button {
    margin: auto
}

.toast {
    position: fixed;
    right: 25px;
    bottom: 25px;
    z-index: 50;
    padding: 12px 17px;
    color: #07100e;
    background: var(--cyan);
    border-radius: 8px;
    font-size: .78rem;
    font-weight: 700;
    transform: translateY(100px);
    opacity: 0;
    transition: .3s
}

.toast.show {
    transform: translateY(0);
    opacity: 1
}

@media(max-width:1100px) {
    .course-module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}

@media(max-width:900px) {
    :root {
        --sidebar: 0px
    }

    .sidebar {
        transform: translateX(-100%);
        width: 250px;
        transition: transform .25s
    }

    .sidebar.open {
        transform: translateX(0)
    }

    main {
        margin-left: 0
    }

    .menu-button {
        display: block
    }

    .topbar {
        gap: 16px
    }

    .welcome {
        grid-template-columns: 1fr
    }

    .hero-orbit {
        display: none
    }

    .lesson-grid::before { left: 18px }
    .lesson-card, .lesson-card:nth-child(odd), .lesson-card:nth-child(even) { width: calc(100% - 55px); align-self: flex-end }
    .lesson-card:nth-child(odd) .path-node, .lesson-card:nth-child(even) .path-node { left: -56px; right: auto }

    .lesson-layout {
        grid-template-columns: 1fr
    }

    .lesson-info {
        padding-top: 20px
    }
}

@media(max-width:620px) {
    .course-module-grid { grid-template-columns: 1fr }
    .course-module-card p { min-height: 0 }
    .active-module-panel { align-items: flex-start; flex-direction: column }
    .active-module-meter { width: 100%; text-align: left }
    .content {
        padding-inline: 17px
    }

    .topbar {
        padding-inline: 17px
    }

    .status-live {
        display: none
    }

    .search-box {
        width: 100%
    }

    .welcome {
        min-height: 430px
    }

    .welcome h1 {
        font-size: 2.7rem
    }

    .stats {
        grid-template-columns: 1fr
    }

    .section-heading {
        align-items: flex-start;
        flex-direction: column
    }

    .filters {
        justify-content: flex-start
    }

    .path-legend { align-items: flex-start; flex-wrap: wrap; gap: 10px 15px }
    .path-legend small { width: 100%; margin: 4px 0 0; line-height: 1.5 }

    .lesson-card h3,
    .lesson-card p {
        min-height: 0
    }

    .quiz-dialog {
        padding: 25px 18px
    }

    .video-column {
        padding: 18px
    }

    .video-tools {
        align-items: flex-start;
        flex-direction: column
    }

    .video-form div {
        flex-direction: column
    }
}

/* Camada final da identidade TAZZ IA */
body { background: radial-gradient(circle at 72% 14%, #123d2466, transparent 23rem), radial-gradient(circle at 12% 75%, #063f2c55, transparent 28rem), #020504; overflow-x:hidden }
.sidebar { background:linear-gradient(180deg,#040906f4,#07100cf2);border-color:#19452d;box-shadow:18px 0 60px #0007 }
.brand { opacity:.74;letter-spacing:.12em }.brand:hover{opacity:1}.brand-mark{box-shadow:0 0 30px #39ff7866}
.topbar { height:84px;background:#030705d9;border-color:#163b29 }
.search-box { background:#06100bca;border-color:#1b4a31 }.content{max-width:1480px}
.welcome { min-height:490px;border-color:#173425 }.welcome::before{width:560px;height:400px;background:#20e96c20;filter:blur(100px)}
.welcome h1{font-family:'Space Mono',monospace;font-size:clamp(2.5rem,5vw,5.1rem);letter-spacing:-.075em;text-shadow:0 0 42px #39ff7817}.welcome h1 em{text-shadow:0 0 26px #39ff7866}
.core{background:radial-gradient(circle at 30% 20%,#205536,#07140d 60%);border-color:#3f9660;box-shadow:0 0 90px #39ff7830}.orbit{border-color:#2b6343}.tech-tag{background:#07130dbd;border-color:#28663f;color:#c8ffdb}
.stats{background:#163b29;border-color:#163b29;box-shadow:0 22px 70px #0006}.stats article{background:#06100be8}
.lesson-grid::before{background:linear-gradient(180deg,#39ff78,#0c8d4b 55%,#14291d 90%);box-shadow:0 0 24px #39ff7844}
.lesson-card{overflow:hidden;background:linear-gradient(145deg,#0a1710e8,#050b08e8);border-color:#173d29;box-shadow:0 18px 50px #0005;backdrop-filter:blur(14px)}
.lesson-card.completed{border-color:#277c4d;background:linear-gradient(145deg,#0b2115e8,#050c08e8)}
.lesson-dialog,.quiz-dialog{background:linear-gradient(145deg,#07130ddf,#030805f2);border-color:#286842;box-shadow:0 35px 120px #000e,0 0 50px #39ff7817;backdrop-filter:blur(22px)}

/* Módulos curtos da videoaula */
.module-playlist{display:grid;gap:7px;max-height:250px;margin-top:14px;overflow:auto}.module-item{width:100%;display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;padding:10px 12px;text-align:left;color:#aab6c5;background:#0c1219;border:1px solid #202c38;border-radius:8px;cursor:pointer;transition:.2s}.module-item:hover,.module-item.active{color:#fff;background:#102019;border-color:#3a8060;transform:translateX(2px)}.module-item>span{width:28px;height:28px;display:grid;place-items:center;color:#7d8b9c;background:#151d27;border-radius:7px;font:700 .62rem 'Space Mono'}.module-item.done>span{color:#041008;background:var(--cyan);box-shadow:0 0 15px #45f5c244}.module-item strong,.module-item small{display:block}.module-item strong{font-size:.72rem}.module-item small{margin-top:3px;color:#687687;font-size:.61rem}.module-item>i{color:#526171;font-style:normal}.module-item.active>i{color:var(--cyan)}.module-navigation{display:grid;grid-template-columns:auto 1fr auto;gap:8px;margin-top:10px}.module-navigation button{padding:10px 12px;color:#9eabba;background:#0c1219;border:1px solid #283747;border-radius:7px;cursor:pointer}.module-navigation button:disabled{opacity:.35;cursor:not-allowed}.module-navigation .module-complete{color:#06100d;background:var(--cyan);border-color:var(--cyan);font-weight:800}.module-navigation .module-complete.done{color:#b8c6d5;background:#132019;border-color:#2f684f}.primary-button:disabled{opacity:.46;cursor:not-allowed;filter:grayscale(.55)}
@media(max-width:620px){.module-navigation{grid-template-columns:1fr 1fr}.module-navigation .module-complete{grid-column:1/-1;grid-row:1}.module-item{grid-template-columns:32px 1fr auto}}
@media(max-width:620px){.topbar{height:auto;min-height:84px;flex-wrap:wrap;padding-block:11px}.portal-branding{flex:1}.search-box{order:3;flex-basis:100%}}

/* Provas de etapa */
.exam-section{margin-top:80px;padding-top:28px;border-top:1px solid #21412e}.exam-summary{align-self:center;padding:8px 12px;color:#ffbd70;background:#171008;border:1px solid #754820;border-radius:20px;font:700 .65rem 'Space Mono'}.exam-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:13px;margin-top:28px}.exam-card{position:relative;min-height:250px;padding:18px;overflow:hidden;background:linear-gradient(150deg,#161008ef,#070a08ed 66%);border:1px solid #62401f;border-radius:13px;box-shadow:0 18px 50px #0005;transition:.25s}.exam-card::after{content:'';position:absolute;width:100px;height:100px;right:-50px;top:-50px;border-radius:50%;background:#ff8b3111;box-shadow:0 0 45px #ff8b3117}.exam-card.available:hover,.exam-card.rejected:hover{transform:translateY(-4px);border-color:#ff9c4d;box-shadow:0 24px 65px #0008,0 0 30px #ff8b3113}.exam-card.pending{border-color:#6f5b2d}.exam-card.approved{background:linear-gradient(150deg,#0b2617ef,#060c08ef);border-color:#278c52}.exam-card.locked{opacity:.48;filter:saturate(.4)}.exam-card>span{position:relative;z-index:1;color:#ff9d50;font:700 .56rem 'Space Mono';letter-spacing:.12em}.exam-card h3{position:relative;z-index:1;margin:16px 0 8px;font-size:1rem}.exam-card p{position:relative;z-index:1;min-height:64px;margin:0;color:#87918b;font-size:.69rem;line-height:1.55}.exam-card-meta{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:7px;margin:15px 0;color:#776d61;font-size:.58rem}.exam-card-status{display:inline-flex!important;align-items:center;gap:5px;padding:5px 7px;color:#e6b37d!important;background:#22170d;border:1px solid #6b4727;border-radius:14px;font:700 .51rem 'Space Mono'!important;letter-spacing:.04em!important}.exam-card.pending .exam-card-status{color:#ffd875!important;border-color:#796229}.exam-card.approved .exam-card-status{color:var(--cyan)!important;background:#0b2114;border-color:#287c4b}.exam-card.rejected .exam-card-status{color:#ff9188!important;background:#24100e;border-color:#763a33}.exam-card button{position:relative;z-index:1;width:100%;padding:9px 10px;color:#120c06;background:#ff9d50;border:0;border-radius:7px;font-size:.65rem;font-weight:800;cursor:pointer}.exam-card button:disabled{color:#657067;background:#182019;cursor:not-allowed}.exam-card.approved button{color:#06100a;background:var(--cyan)}
.exam-dialog{width:min(620px,calc(100% - 24px));padding:30px;color:#edf8f0;background:linear-gradient(145deg,#130d08f4,#040805f6);border:1px solid #7b4d27;border-radius:15px;box-shadow:0 35px 120px #000e,0 0 50px #ff8b311c}.exam-dialog::backdrop{background:#010403d8;backdrop-filter:blur(7px)}.exam-dialog-kicker{color:#ff9d50;font:700 .6rem 'Space Mono';letter-spacing:.15em}.exam-dialog h2{margin:10px 38px 8px 0;font-size:1.55rem}.exam-dialog-meta{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}.exam-dialog-meta span{padding:6px 9px;color:#d7b28e;background:#21150b;border:1px solid #654321;border-radius:17px;font-size:.63rem}.exam-dialog>p{color:#9fa9a2;font-size:.78rem;line-height:1.7}.exam-resource{display:block;margin:14px 0;padding:11px 13px;color:#130b05;background:#ff9d50;border-radius:8px;text-align:center;text-decoration:none;font-size:.72rem;font-weight:800}.exam-dialog form{margin-top:18px;padding-top:15px;border-top:1px solid #4c321d}.exam-dialog label{display:block;margin:12px 0;color:#c8b9aa;font-size:.7rem}.exam-dialog input,.exam-dialog textarea{width:100%;margin-top:7px;padding:11px;color:white;background:#060805;border:1px solid #654321;border-radius:7px;resize:vertical}.exam-dialog input:focus,.exam-dialog textarea:focus{outline:2px solid #ff9d5033;border-color:#ff9d50}.exam-dialog .primary-button{width:100%;margin-top:6px;background:#ff9d50}.exam-review{margin-top:16px;padding:14px;color:#c5d2c9;background:#0a1510;border:1px solid #2b5c3f;border-radius:9px;font-size:.72rem;line-height:1.6}.exam-review strong,.exam-review span{display:block}.exam-review strong{color:var(--cyan);font:700 .65rem 'Space Mono'}.exam-review.rejected{background:#1a0d0b;border-color:#6f332e}.exam-review.rejected strong{color:#ff9188}.exam-review.pending{background:#19140a;border-color:#6d5a26}.exam-review.pending strong{color:#ffd875}
@media(max-width:1200px){.exam-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:760px){.exam-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:480px){.exam-grid{grid-template-columns:1fr}.exam-card{min-height:220px}}

/* Biblioteca digital */
.ebook-section{margin-top:80px;padding-top:28px;border-top:1px solid #163b29}.ebook-count{align-self:center;padding:8px 12px;color:var(--cyan);background:#07150f;border:1px solid #225c3d;border-radius:20px;font:700 .65rem 'Space Mono'}.ebook-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:28px}.ebook-card{display:grid;grid-template-columns:145px 1fr;min-height:230px;overflow:hidden;background:linear-gradient(145deg,#09170fef,#050b08eb);border:1px solid #1b4931;border-radius:13px;box-shadow:0 20px 55px #0005;transition:.25s}.ebook-card:hover{border-color:#3a8b59;transform:translateY(-5px);box-shadow:0 26px 70px #0008,0 0 35px #39ff7811}.ebook-cover{position:relative;min-height:230px;overflow:hidden;background:linear-gradient(145deg,#123b25,#06110b)}.ebook-cover img{width:100%;height:100%;object-fit:cover}.ebook-cover>i{position:absolute;right:9px;top:9px;padding:5px 7px;color:#06100a;background:var(--cyan);border-radius:5px;font:800 .55rem 'Space Mono';font-style:normal}.ebook-cover-fallback{height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:18px;background:radial-gradient(circle at 70% 18%,#39ff7850,transparent 28%),linear-gradient(150deg,#123b25,#050b08 65%)}.ebook-cover-fallback>span{margin-bottom:auto;color:var(--cyan);font:700 1.4rem 'Space Mono'}.ebook-cover-fallback>b{font:700 1rem 'Space Mono';line-height:1.1}.ebook-cover-fallback>small{margin-top:10px;color:#6f9d7d;font:8px 'Space Mono';letter-spacing:.12em}.ebook-body{display:flex;flex-direction:column;padding:20px}.ebook-body>span{color:var(--cyan);font:700 .56rem 'Space Mono';letter-spacing:.12em;text-transform:uppercase}.ebook-body h3{margin:9px 0 8px;font-size:1rem}.ebook-body p{margin:0;color:#81908a;font-size:.7rem;line-height:1.6}.ebook-body>div{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:16px}.ebook-body small{color:#587262;font-size:.6rem}.ebook-body a{padding:8px 10px;color:#07100b;background:var(--cyan);border-radius:6px;text-decoration:none;font-size:.65rem;font-weight:800}.ebook-empty{margin-top:25px}@media(max-width:1200px){.ebook-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:700px){.ebook-grid{grid-template-columns:1fr}.ebook-card{grid-template-columns:115px 1fr}.ebook-cover{min-height:210px}}@media(max-width:430px){.ebook-card{grid-template-columns:1fr}.ebook-cover{height:185px;min-height:0}.ebook-cover-fallback{min-height:185px}}