/* =========================================================
   CADD - CONEXAO ACADEMICA DE DIREITO E DESENVOLVIMENTO
   BRAND SYSTEM V1
   Mobile First
   ========================================================= */

:root{
    --cadd-bg:#07101c;
    --cadd-bg-soft:#0a1524;
    --cadd-panel:#0d1929;
    --cadd-panel-2:#101f31;

    --cadd-line:rgba(255,255,255,.09);
    --cadd-line-strong:rgba(216,180,106,.30);

    --cadd-text:#f6f8fb;
    --cadd-muted:#9eafc3;

    --cadd-gold:#d8b46a;
    --cadd-gold-strong:#eccb86;
    --cadd-gold-soft:rgba(216,180,106,.10);

    --cadd-blue:#74a4ff;
    --cadd-green:#53d79c;
    --cadd-orange:#f0b65f;
    --cadd-red:#ff7c8d;

    --cadd-radius-sm:10px;
    --cadd-radius-md:14px;
    --cadd-radius-lg:20px;

    --cadd-shadow:
        0 16px 45px rgba(0,0,0,.22);

    --cadd-transition:
        160ms ease;
}

html{
    background:var(--cadd-bg);
}

body{
    background:
        radial-gradient(
            circle at 12% -10%,
            rgba(116,164,255,.11),
            transparent 30%
        ),
        radial-gradient(
            circle at 95% 8%,
            rgba(216,180,106,.07),
            transparent 24%
        ),
        var(--cadd-bg);
    color:var(--cadd-text);
}

/* =========================================================
   TYPOGRAPHY
   ========================================================= */

body,
button,
input,
select,
textarea{
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

h1,
h2,
h3,
.page-title{
    color:var(--cadd-text);
    letter-spacing:-.045em;
}

.page-title{
    font-size:clamp(30px,9vw,58px);
    line-height:.98;
}

.page-lead{
    max-width:720px;
    color:var(--cadd-muted);
    line-height:1.6;
}

.kicker{
    color:var(--cadd-gold);
    font-weight:850;
    letter-spacing:.12em;
    text-transform:uppercase;
}

/* =========================================================
   GLOBAL CARDS
   ========================================================= */

.card{
    border:1px solid var(--cadd-line);
    border-radius:var(--cadd-radius-md);
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.025),
            rgba(255,255,255,.008)
        ),
        var(--cadd-panel);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.018);
}

.card:hover{
    border-color:
        rgba(216,180,106,.18);
}

/* =========================================================
   CADD BRAND
   ========================================================= */

.cadd-brand{
    display:flex;
    align-items:center;
    gap:11px;
    min-width:0;
}

.cadd-brand-mark{
    width:48px;
    height:48px;
    flex:0 0 auto;
    display:grid;
    place-items:center;
    border:1px solid rgba(216,180,106,.55);
    border-radius:14px;
    background:
        linear-gradient(
            145deg,
            rgba(216,180,106,.15),
            rgba(216,180,106,.035)
        );
    color:var(--cadd-gold-strong);
    box-shadow:
        0 10px 30px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.08);
    font-size:14px;
    font-weight:950;
    letter-spacing:-.04em;
}

.cadd-brand-copy{
    min-width:0;
}

.cadd-brand-copy strong{
    display:block;
    color:var(--cadd-text);
    font-size:16px;
    line-height:1;
    letter-spacing:-.025em;
}

.cadd-brand-copy small{
    display:block;
    max-width:250px;
    margin-top:4px;
    color:var(--cadd-muted);
    font-size:8px;
    line-height:1.25;
    letter-spacing:.025em;
}

/* =========================================================
   HEADER
   ========================================================= */

header,
.app-header,
.topbar{
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

.app-header,
.topbar{
    border-bottom:
        1px solid rgba(255,255,255,.065);
    background:
        rgba(7,16,28,.88);
}

/* =========================================================
   NAVIGATION
   ========================================================= */

nav button,
.nav-button,
[data-nav]{
    transition:
        background var(--cadd-transition),
        border-color var(--cadd-transition),
        color var(--cadd-transition),
        transform var(--cadd-transition);
}

nav button:hover,
.nav-button:hover,
[data-nav]:hover{
    color:var(--cadd-gold-strong);
}

nav button.active,
.nav-button.active,
[data-nav].active{
    border-color:
        rgba(216,180,106,.30);
    background:
        var(--cadd-gold-soft);
    color:var(--cadd-gold-strong);
}

/* =========================================================
   BUTTONS
   ========================================================= */

button,
.home-primary-action,
.class-primary-btn,
.community-primary-btn{
    transition:
        transform var(--cadd-transition),
        box-shadow var(--cadd-transition),
        filter var(--cadd-transition);
}

.home-primary-action,
.class-primary-btn,
.community-primary-btn,
button[type="submit"]{
    border-color:var(--cadd-gold);
    background:
        linear-gradient(
            135deg,
            var(--cadd-gold-strong),
            var(--cadd-gold)
        );
    color:#171108;
    box-shadow:
        0 8px 22px rgba(216,180,106,.12);
}

.home-primary-action:hover,
.class-primary-btn:hover,
.community-primary-btn:hover,
button[type="submit"]:hover{
    filter:brightness(1.04);
    transform:translateY(-1px);
}

/* =========================================================
   FORM ELEMENTS
   ========================================================= */

input,
select,
textarea{
    border:1px solid var(--cadd-line);
    border-radius:var(--cadd-radius-sm);
    background:#081321;
    color:var(--cadd-text);
    outline:none;
    transition:
        border-color var(--cadd-transition),
        box-shadow var(--cadd-transition);
}

input:focus,
select:focus,
textarea:focus{
    border-color:
        rgba(216,180,106,.55);
    box-shadow:
        0 0 0 3px rgba(216,180,106,.08);
}

/* =========================================================
   METRICS
   ========================================================= */

.metric{
    position:relative;
    overflow:hidden;
}

.metric::after{
    content:"";
    position:absolute;
    right:-18px;
    top:-18px;
    width:64px;
    height:64px;
    border-radius:50%;
    background:
        radial-gradient(
            circle,
            rgba(216,180,106,.09),
            transparent 70%
        );
    pointer-events:none;
}

.metric span{
    color:var(--cadd-muted);
}

.metric strong{
    color:var(--cadd-text);
}

/* =========================================================
   PROGRESS
   ========================================================= */

.progress-bar{
    overflow:hidden;
    background:#1b2a3f;
    border-radius:999px;
}

.progress-bar > i{
    background:
        linear-gradient(
            90deg,
            var(--cadd-blue),
            var(--cadd-green)
        );
}

/* =========================================================
   GOLD DETAIL
   ========================================================= */

.pill.green{
    color:var(--cadd-green);
}

.pill{
    border-color:var(--cadd-line);
}

.section-heading{
    position:relative;
}

.section-heading h2{
    margin-bottom:2px;
}

.section-heading::before{
    content:"";
    position:absolute;
    left:0;
    top:-8px;
    width:28px;
    height:2px;
    border-radius:99px;
    background:var(--cadd-gold);
    opacity:.7;
}

/* =========================================================
   LOGIN
   ========================================================= */

body.cadd-login-page{
    background:
        radial-gradient(
            circle at 50% -10%,
            rgba(216,180,106,.10),
            transparent 28%
        ),
        radial-gradient(
            circle at 10% 10%,
            rgba(116,164,255,.12),
            transparent 28%
        ),
        var(--cadd-bg);
}

body.cadd-login-page .card{
    width:min(100%,430px);
    border-color:
        rgba(216,180,106,.16);
    box-shadow:
        0 30px 80px rgba(0,0,0,.34);
}

body.cadd-login-page .mark{
    width:auto;
    min-width:70px;
    height:48px;
    display:inline-grid;
    padding:0 13px;
    border-radius:14px;
    border:
        1px solid rgba(216,180,106,.45);
    background:
        var(--cadd-gold-soft);
    color:var(--cadd-gold-strong);
    font-size:15px;
    font-weight:950;
    letter-spacing:-.03em;
}

/* =========================================================
   ADMIN
   ========================================================= */

body.cadd-admin-page{
    background:
        radial-gradient(
            circle at 90% 0,
            rgba(216,180,106,.07),
            transparent 25%
        ),
        var(--cadd-bg);
}

body.cadd-admin-page main{
    padding-top:10px;
}

body.cadd-admin-page .grid .item{
    min-height:115px;
    transition:
        border-color var(--cadd-transition),
        transform var(--cadd-transition);
}

body.cadd-admin-page .grid .item:hover{
    transform:translateY(-2px);
    border-color:
        rgba(216,180,106,.30);
}

/* =========================================================
   MOBILE FIRST UX
   ========================================================= */

@media(max-width:719px){

    .cadd-brand-mark{
        width:43px;
        height:43px;
    }

    .cadd-brand-copy strong{
        font-size:14px;
    }

    .cadd-brand-copy small{
        font-size:7px;
    }

    .card{
        border-radius:13px;
    }

    button,
    input,
    select{
        min-height:44px;
    }
}

@media(min-width:720px){

    .card{
        border-radius:16px;
    }

    .cadd-brand-mark{
        width:50px;
        height:50px;
    }

    .cadd-brand-copy strong{
        font-size:17px;
    }

    .cadd-brand-copy small{
        font-size:8px;
    }
}

/* =========================================================
   ACCESSIBILITY
   ========================================================= */

:focus-visible{
    outline:
        2px solid var(--cadd-gold-strong);
    outline-offset:3px;
}

@media(prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{
        scroll-behavior:auto;
        transition:none;
        animation:none;
    }
}

/* CADD OFFICIAL LOGO CARD V1 */
.cadd-app-logo-card,.cadd-logo-card,.cadd-brand-mark.cadd-logo-card{
  display:grid;place-items:center;overflow:hidden;padding:7px;
  border:1px solid rgba(236,203,134,.78);border-radius:14px;
  background:linear-gradient(145deg,#eccb86 0%,#d8b46a 58%,#b58b43 100%);
  box-shadow:0 8px 22px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.35);
}
.cadd-app-logo-card{width:48px;height:48px;flex:0 0 48px}
.cadd-login-page .mark.cadd-logo-card{width:58px;min-width:58px;height:58px;padding:8px}
.cadd-brand-mark.cadd-logo-card{width:50px;height:50px;min-width:50px}
.cadd-logo-image{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
@media(max-width:719px){.cadd-app-logo-card{width:46px;height:46px;flex-basis:46px;padding:6px;border-radius:13px}}
/* END CADD OFFICIAL LOGO CARD V1 */

/* CADD LOGO - INTERNAL SCALE POLISH */

.cadd-logo-card img,
.cadd-brand-mark img,
.cadd-native-logo img {
    width: 88%;
    height: 88%;
    max-width: none;
    max-height: none;
    object-fit: contain;
    display: block;
}

@media (max-width:719px) {
    .cadd-logo-card img,
    .cadd-brand-mark img,
    .cadd-native-logo img {
        width: 92%;
        height: 92%;
    }
}


/* =========================================================
   CADD V3.2A - FIXED HEADER + BACK TO TOP
   ========================================================= */

:root{
    --cadd-fixed-header-h: 76px;
}

/* Real fixed header */
.app-header,
.topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;

    width: 100%;

    z-index: 1000;

    background:
        rgba(7,16,28,.94);

    backdrop-filter:
        blur(18px)
        saturate(120%);

    -webkit-backdrop-filter:
        blur(18px)
        saturate(120%);

    border-bottom:
        1px solid rgba(255,255,255,.07);
}

/* Reserve physical space for fixed header */
body{
    padding-top:
        var(--cadd-fixed-header-h);
}

/* Desktop secondary navigation stays under fixed header */
@media (min-width:720px){

    .bottom-nav{
        position: sticky;

        top:
            var(--cadd-fixed-header-h);

        z-index: 900;
    }
}

/* Mobile nav remains fixed at bottom */
@media (max-width:719px){

    .bottom-nav{
        z-index: 900;
    }
}

/* =========================================================
   BACK TO TOP
   ========================================================= */

.cadd-back-top{
    position: fixed;

    right: 16px;

    bottom:
        calc(
            94px +
            env(safe-area-inset-bottom)
        );

    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    padding: 0;

    border:
        1px solid rgba(216,180,106,.28);

    border-radius: 50%;

    background:
        rgba(7,16,28,.88);

    color:
        var(--cadd-gold-strong);

    box-shadow:
        0 10px 28px rgba(0,0,0,.22);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    cursor: pointer;

    opacity: 0;
    visibility: hidden;

    transform:
        translateY(8px);

    transition:
        opacity 160ms ease,
        transform 160ms ease,
        visibility 160ms ease,
        background 160ms ease;

    z-index: 1100;
}

.cadd-back-top.is-visible{
    opacity: 1;
    visibility: visible;

    transform:
        translateY(0);
}

.cadd-back-top:hover{
    background:
        rgba(216,180,106,.12);
}

.cadd-back-top:focus-visible{
    outline:
        2px solid var(--cadd-gold-strong);

    outline-offset:
        3px;
}

.cadd-back-top svg{
    width: 18px;
    height: 18px;
}

/* Desktop position */
@media (min-width:720px){

    .cadd-back-top{
        right: 24px;
        bottom: 24px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){

    .cadd-back-top{
        transition: none;
    }
}


/* =========================================================
   CADD V3.2C - CANONICAL HEADER + NAV GEOMETRY
   ========================================================= */

:root {
    --cadd-fixed-header-h: 76px;
    --cadd-desktop-nav-h: 58px;
    --cadd-desktop-nav-gap: 8px;
}

/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */

.app-header,
.topbar {
    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    width: 100%;

    margin: 0;

    z-index: 1000;
}

/* ---------------------------------------------------------
   MOBILE FIRST
   Header clearance only.
   Bottom navigation remains fixed by canonical mobile rules.
   --------------------------------------------------------- */

body {
    padding-top:
        var(--cadd-fixed-header-h);
}

/* ---------------------------------------------------------
   DESKTOP
   Header + navigation behave as one persistent navigation
   system.
   --------------------------------------------------------- */

@media (min-width:720px) {

    .bottom-nav {
        position: fixed;

        top:
            calc(
                var(--cadd-fixed-header-h) +
                var(--cadd-desktop-nav-gap)
            );

        bottom: auto;

        left: 50%;
        right: auto;

        transform:
            translateX(-50%);

        width: 90%;
        max-width: var(--max);

        height:
            var(--cadd-desktop-nav-h);

        min-height:
            var(--cadd-desktop-nav-h);

        max-height:
            var(--cadd-desktop-nav-h);

        margin: 0;

        z-index: 950;
    }

    main {
        padding-top:
            calc(
                18px +
                var(--cadd-desktop-nav-h) +
                var(--cadd-desktop-nav-gap)
            );
    }

    .screen {
        scroll-margin-top:
            calc(
                var(--cadd-fixed-header-h) +
                var(--cadd-desktop-nav-h) +
                var(--cadd-desktop-nav-gap) +
                16px
            );
    }
}

/* ---------------------------------------------------------
   MOBILE
   Preserve bottom navigation geometry.
   --------------------------------------------------------- */

@media (max-width:719px) {

    .bottom-nav {
        position: fixed;

        top: auto;
        bottom: 0;

        left: 0;
        right: 0;

        transform: none;

        width: 100%;

        margin: 0;
    }
}


/* =========================================================
   CADD V4.1 - UNIFIED HEADER / NAV
   Desktop = navigation inside header
   Mobile  = compact header + bottom navigation
   ========================================================= */

:root{
    --cadd-v41-header-h:76px;
}

/* Header shell */
.topbar{
    position:fixed;
    top:0;
    left:0;
    right:0;

    width:100%;
    min-height:var(--cadd-v41-header-h);

    z-index:1200;

    background:rgba(7,16,28,.94);

    border-bottom:
        1px solid rgba(255,255,255,.07);
}

.topbar-inner{
    width:min(100% - 20px,var(--max));
    min-height:var(--cadd-v41-header-h);

    margin:auto;

    display:flex;
    align-items:center;

    gap:18px;
}

.cadd-brand-copy{
    display:flex;
    flex-direction:column;

    line-height:1.05;
}

.cadd-brand-copy small{
    margin-top:4px;
}


/* User menu */
.cadd-user-menu{
    position:relative;

    margin-left:auto;

    flex:0 0 auto;
}

.cadd-user-menu > summary{
    list-style:none;
    cursor:pointer;
}

.cadd-user-menu > summary::-webkit-details-marker{
    display:none;
}

.cadd-user-chevron{
    opacity:.65;

    margin-left:2px;

    transition:
        transform 160ms ease;
}

.cadd-user-menu[open]
.cadd-user-chevron{
    transform:rotate(180deg);
}

.cadd-user-dropdown{
    position:absolute;

    top:calc(100% + 10px);
    right:0;

    width:240px;

    padding:8px;

    border:
        1px solid rgba(255,255,255,.10);

    border-radius:16px;

    background:
        rgba(7,16,28,.98);

    box-shadow:
        0 18px 48px rgba(0,0,0,.32);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);
}

.cadd-user-identity{
    display:flex;
    flex-direction:column;

    gap:3px;

    padding:
        10px 11px 12px;

    margin-bottom:5px;

    border-bottom:
        1px solid rgba(255,255,255,.08);
}

.cadd-user-identity small{
    color:var(--muted);
}

.cadd-user-dropdown button{
    width:100%;

    border:0;
    border-radius:10px;

    padding:11px;

    background:transparent;

    color:inherit;

    text-align:left;
    font:inherit;

    cursor:pointer;
}

.cadd-user-dropdown button:hover{
    background:
        rgba(255,255,255,.06);
}

.cadd-logout-action{
    color:var(--gold) !important;
}


/* ---------------------------------------------------------
   DESKTOP
   --------------------------------------------------------- */

@media (min-width:720px){

    body{
        padding-top:
            var(--cadd-v41-header-h);
    }

    .topbar-inner{
        justify-content:flex-start;
    }

    .brand{
        flex:0 0 auto;
    }

    /*
     * Navigation is now physically inside the header.
     * Neutralize all historical detached-nav geometry.
     */
    .topbar .bottom-nav{
        position:static;

        top:auto;
        right:auto;
        bottom:auto;
        left:auto;

        transform:none;

        flex:1 1 auto;

        width:auto;
        max-width:760px;

        min-height:
            var(--cadd-v41-header-h);
        height:
            var(--cadd-v41-header-h);

        margin:
            0 auto;

        display:grid;

        grid-template-columns:
            repeat(5,minmax(0,1fr));

        border:0;
        border-radius:0;

        background:transparent;

        box-shadow:none;

        backdrop-filter:none;
        -webkit-backdrop-filter:none;

        z-index:auto;
    }

    .topbar .bottom-nav
    .nav-btn{
        min-width:0;
        min-height:
            var(--cadd-v41-header-h);

        padding:
            8px 9px;

        flex-direction:row;

        gap:6px;

        border:0;
        border-radius:0;

        background:transparent;

        font-size:11px;
    }

    .topbar .bottom-nav
    .nav-btn.active{
        color:var(--gold);

        background:
            rgba(216,180,106,.08);

        box-shadow:
            inset 0 -2px 0
            var(--gold);
    }

    .topbar .bottom-nav
    .nav-btn span{
        font-size:16px;
    }

    main{
        padding-top:28px;
    }

    .screen{
        scroll-margin-top:
            calc(
                var(--cadd-v41-header-h) +
                16px
            );
    }
}


/* ---------------------------------------------------------
   MOBILE FIRST BEHAVIOR
   --------------------------------------------------------- */

@media (max-width:719px){

    :root{
        --cadd-v41-header-h:68px;
    }

    body{
        padding-top:
            var(--cadd-v41-header-h);

        padding-bottom:
            calc(
                82px +
                env(safe-area-inset-bottom)
            );
    }

    .topbar{
        min-height:
            var(--cadd-v41-header-h);
    }

    .topbar-inner{
        min-height:
            var(--cadd-v41-header-h);
    }

    /*
     * Same nav DOM, moved to mobile bottom position.
     */
    .topbar .bottom-nav{
        position:fixed;

        top:auto;
        right:8px;

        bottom:
            calc(
                8px +
                env(safe-area-inset-bottom)
            );

        left:8px;

        transform:none;

        width:auto;

        min-height:66px;
        height:66px;

        margin:0;

        display:grid;

        grid-template-columns:
            repeat(5,minmax(0,1fr));

        border:
            1px solid rgba(255,255,255,.09);

        border-radius:19px;

        background:
            rgba(7,16,28,.96);

        box-shadow:
            0 14px 38px rgba(0,0,0,.32);

        backdrop-filter:
            blur(20px);

        -webkit-backdrop-filter:
            blur(20px);

        z-index:1250;
    }

    .topbar .bottom-nav
    .nav-btn{
        min-width:0;

        padding:
            6px 2px;

        flex-direction:column;

        gap:3px;

        font-size:9px;
    }

    .topbar .bottom-nav
    .nav-btn span{
        font-size:17px;
    }

    .cadd-user-semester{
        display:none;
    }

    .cadd-user-dropdown{
        position:fixed;

        top:
            calc(
                var(--cadd-v41-header-h) +
                8px
            );

        right:10px;

        width:
            min(
                250px,
                calc(100vw - 20px)
            );
    }

    main{
        padding-top:16px;
    }
}


/* =========================================================
   CADD V4.2 - RESPONSIVE SHELL CORRECTION
   One nav only.
   Desktop = visually integrated with header.
   Mobile  = viewport-fixed bottom navigation.
   ========================================================= */

:root{
    --cadd-v42-header-h:76px;
}


/* ---------------------------------------------------------
   DESKTOP
   --------------------------------------------------------- */

@media (min-width:720px){

    body{
        padding-top:
            var(--cadd-v42-header-h);
    }

    /*
     * Nav is a sibling of header in DOM,
     * but occupies the same visual header row.
     */
    .bottom-nav{
        position:fixed !important;

        top:0 !important;
        bottom:auto !important;

        left:50% !important;
        right:auto !important;

        transform:
            translateX(-50%) !important;

        width:
            min(
                760px,
                48vw
            ) !important;

        height:
            var(--cadd-v42-header-h) !important;

        min-height:
            var(--cadd-v42-header-h) !important;

        max-height:
            var(--cadd-v42-header-h) !important;

        margin:0 !important;
        padding:0 !important;

        display:grid !important;

        grid-template-columns:
            repeat(
                5,
                minmax(0,1fr)
            ) !important;

        border:0 !important;
        border-radius:0 !important;

        background:
            transparent !important;

        box-shadow:
            none !important;

        backdrop-filter:
            none !important;

        -webkit-backdrop-filter:
            none !important;

        z-index:1250 !important;
    }

    .bottom-nav .nav-btn{
        min-width:0 !important;

        min-height:
            var(--cadd-v42-header-h) !important;

        padding:
            8px 9px !important;

        flex-direction:
            row !important;

        gap:
            6px !important;

        border:
            0 !important;

        border-radius:
            0 !important;

        font-size:
            11px !important;

        background:
            transparent !important;
    }

    .bottom-nav .nav-btn span{
        font-size:
            16px !important;
    }

    .bottom-nav .nav-btn.active{
        color:
            var(--gold) !important;

        background:
            rgba(
                216,
                180,
                106,
                .08
            ) !important;

        box-shadow:
            inset 0 -2px 0
            var(--gold) !important;
    }

    main{
        padding-top:
            28px !important;
    }

    .screen{
        scroll-margin-top:
            calc(
                var(--cadd-v42-header-h)
                + 16px
            ) !important;
    }
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width:719px){

    :root{
        --cadd-v42-header-h:68px;
    }

    body{
        padding-top:
            var(--cadd-v42-header-h) !important;

        padding-bottom:
            calc(
                92px
                + env(
                    safe-area-inset-bottom
                )
            ) !important;
    }

    /*
     * Restore compact CADD header.
     */
    .topbar{
        display:block !important;

        position:fixed !important;

        top:0 !important;
        right:0 !important;
        left:0 !important;

        min-height:
            var(--cadd-v42-header-h) !important;

        z-index:
            1200 !important;
    }

    .topbar-inner{
        min-height:
            var(--cadd-v42-header-h) !important;
    }

    /*
     * Nav is no longer descendant of header,
     * therefore fixed means viewport-fixed.
     */
    .bottom-nav{
        position:fixed !important;

        top:auto !important;

        right:
            8px !important;

        bottom:
            calc(
                8px
                + env(
                    safe-area-inset-bottom
                )
            ) !important;

        left:
            8px !important;

        transform:
            none !important;

        width:
            auto !important;

        height:
            68px !important;

        min-height:
            68px !important;

        max-height:
            68px !important;

        margin:
            0 !important;

        padding:
            4px !important;

        display:
            grid !important;

        grid-template-columns:
            repeat(
                5,
                minmax(0,1fr)
            ) !important;

        border:
            1px solid
            rgba(
                255,
                255,
                255,
                .09
            ) !important;

        border-radius:
            20px !important;

        background:
            rgba(
                7,
                16,
                28,
                .97
            ) !important;

        box-shadow:
            0 14px 38px
            rgba(
                0,
                0,
                0,
                .34
            ) !important;

        backdrop-filter:
            blur(20px) !important;

        -webkit-backdrop-filter:
            blur(20px) !important;

        z-index:
            1400 !important;
    }

    .bottom-nav .nav-btn{
        min-width:
            0 !important;

        padding:
            6px 2px !important;

        flex-direction:
            column !important;

        gap:
            3px !important;

        font-size:
            9px !important;
    }

    .bottom-nav .nav-btn span{
        font-size:
            17px !important;
    }

    .cadd-user-semester{
        display:none !important;
    }

    .cadd-user-dropdown{
        position:fixed !important;

        top:
            calc(
                var(--cadd-v42-header-h)
                + 8px
            ) !important;

        right:
            10px !important;

        width:
            min(
                250px,
                calc(
                    100vw
                    - 20px
                )
            ) !important;
    }

    main{
        padding-top:
            16px !important;
    }

    /*
     * Keep back-to-top above our navigation.
     */
    .cadd-back-top{
        bottom:
            calc(
                92px
                + env(
                    safe-area-inset-bottom
                )
            ) !important;
    }
}


/* =========================================================
   CADD V4.2.1 - MOBILE FINAL POLISH
   ========================================================= */

@media (max-width:719px) {

    /*
     * More breathing room between content and bottom nav.
     */
    body {
        padding-bottom:
            calc(
                112px
                + env(safe-area-inset-bottom)
            ) !important;
    }

    /*
     * Lift navigation away from Safari controls.
     */
    .bottom-nav {
        bottom:
            calc(
                20px
                + env(safe-area-inset-bottom)
            ) !important;
    }

    /*
     * Back-to-top remains above navigation.
     */
    .cadd-back-top {
        bottom:
            calc(
                116px
                + env(safe-area-inset-bottom)
            ) !important;
    }

    /*
     * Show current semester discreetly on mobile.
     */
    .cadd-user-semester {
        display:inline-flex !important;

        align-items:center;

        font-size:10px !important;
        line-height:1 !important;

        margin-left:2px;

        color:var(--muted);
    }

    /*
     * Compact user trigger.
     */
    .cadd-user-menu .profile-chip {
        padding:
            6px 8px !important;

        gap:
            5px !important;
    }

    .cadd-user-menu .avatar {
        width:
            34px !important;

        height:
            34px !important;

        min-width:
            34px !important;

        font-size:
            12px !important;
    }

    /*
     * Compact dropdown.
     */
    .cadd-user-dropdown {
        top:
            calc(
                var(--cadd-v42-header-h)
                + 6px
            ) !important;

        right:
            8px !important;

        width:
            min(
                292px,
                calc(100vw - 16px)
            ) !important;

        padding:
            7px !important;

        border-radius:
            15px !important;
    }

    .cadd-user-identity {
        padding:
            8px 10px 10px !important;

        margin-bottom:
            4px !important;
    }

    .cadd-user-identity strong {
        font-size:
            15px !important;

        line-height:
            1.2 !important;
    }

    .cadd-user-identity small {
        font-size:
            11px !important;
    }

    .cadd-user-dropdown button {
        padding:
            10px !important;

        font-size:
            14px !important;
    }

    /*
     * Preserve readable content clearance.
     */
    main {
        padding-bottom:
            18px !important;
    }
}


/* =========================================================
   CADD INVITATION UI 4F4B
   ========================================================= */

.cadd-user-invite-link{
    display:flex;
    width:100%;
    box-sizing:border-box;
    padding:10px;
    border-radius:10px;
    text-decoration:none;
    color:inherit;
}

.cadd-user-invite-link:hover{
    background:rgba(255,255,255,.06);
}

.cadd-invite-class-card{
    position:relative;
    overflow:hidden;
}

.cadd-invite-class-action{
    display:inline-flex;
    margin-top:8px;
    font-weight:700;
    text-decoration:none;
}

@media(max-width:719px){

    .cadd-user-invite-link{
        padding:10px !important;
        font-size:14px;
    }
}


/* =========================================================
   CADD LOGIN UX 4F5C1A
   ========================================================= */

.cadd-interest-entry{
    margin-top:24px;
    padding-top:6px;
    text-align:center;
}

.cadd-interest-divider{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:14px;
    color:rgba(230,237,246,.70);
    font-size:13px;
}

.cadd-interest-divider::before,
.cadd-interest-divider::after{
    content:"";
    flex:1;
    height:1px;
    background:rgba(255,255,255,.10);
}

.cadd-interest-entry p{
    margin:0 auto 14px;
    max-width:520px;
    color:rgba(220,229,239,.76);
    font-size:14px;
    line-height:1.55;
}

.cadd-interest-button{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:52px;
    padding:0 18px;
    border:1px solid rgba(215,181,109,.45);
    border-radius:14px;
    background:rgba(215,181,109,.08);
    color:#e8c978;
    text-decoration:none;
    font-weight:800;
}

.cadd-interest-button[data-waitlist-pending="1"]{
    cursor:default;
}

.cadd-interest-entry small{
    display:block;
    margin-top:10px;
    color:rgba(190,201,214,.58);
    font-size:11px;
}

@media(max-width:719px){

    .cadd-interest-entry{
        margin-top:20px;
    }

    .cadd-interest-button{
        min-height:50px;
    }
}