/* Compact navigation and responsive workspaces. */
:root{--text-primary:#f0f4ff;--text-secondary:#a6b0c6;--text-muted:#8795ae;--bg-card:#080c18;--bg-glass:rgba(8,12,24,.8);--accent-glow:rgba(27,158,255,.4);--border:rgba(27,158,255,.2);--font-mono:'JetBrains Mono',monospace}
.topbar{min-height:88px;padding:16px 3vw;flex-wrap:nowrap;gap:22px}.brand .brand-logo{width:260px}.brand .brand-wordmark{font-size:8px}.topbar #main-nav{flex-basis:auto;flex:1;gap:22px;justify-content:flex-end}.dashboard-menus{display:flex;align-items:center;gap:4px}.nav-dropdown{position:relative;background:transparent;border:0;border-radius:0;padding:0;margin:0;box-shadow:none}.nav-dropdown summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;cursor:pointer;list-style:none;font-size:12px;font-weight:600;white-space:nowrap;border-radius:9px;color:#b8c5da}.nav-dropdown summary::-webkit-details-marker{display:none}.nav-dropdown summary span{font-size:16px;line-height:1;transition:rotate .2s}.nav-dropdown[open] summary span{rotate:180deg}.nav-dropdown.active summary,.nav-dropdown[open] summary{color:#fff;background:#1b9eff14}.nav-dropdown summary:hover{color:white;background:#ffffff08}.nav-dropdown-list{position:absolute;top:calc(100% + 9px);left:0;min-width:230px;display:flex;flex-direction:column;padding:8px;border:1px solid #273c58;border-radius:12px;background:#0a1220;box-shadow:0 18px 50px #0009;z-index:50}.nav-dropdown-list a{display:block;padding:11px 13px;color:#c0cee2;font-size:12px;border-radius:7px;white-space:normal;line-height:1.5}.nav-dropdown-list a:hover,.nav-dropdown-list a[aria-current]{background:#1b9eff18;color:#74c9ff}.nav-account{border-left:1px solid #ffffff14;padding-left:20px;gap:16px}.nav-account .text-btn{white-space:nowrap}.page{max-width:1360px;padding:34px 4vw 64px}.hero.compact{padding:10px 0 24px}.hero.compact h1{font-size:clamp(30px,3.3vw,46px);margin:12px 0}.hero.compact p{font-size:14px;line-height:1.7;max-width:680px;margin-bottom:0}.hero.split{padding:20px 0 40px;align-items:center}.hero.split h1{font-size:clamp(34px,4vw,56px)}.hero::after{opacity:.35}.workspace-title{font-size:22px;margin:12px 0 22px}.panel{border-radius:16px}.narrow{margin:24px 0}.panel label{line-height:1.5}.stat-grid{margin-bottom:26px}.stat{padding:20px 24px}.stat strong{font-size:34px}.track-card{padding:24px}.track-card h2,.track-card h3{font-size:24px}.section-heading{margin:24px 0 18px}.section-heading h2{font-size:22px}.card-grid{gap:18px}.builder-grid{grid-template-columns:minmax(0,1fr) minmax(280px,360px);gap:24px}.builder-grid>*{min-width:0}.two-grid>*{min-width:0}input,select,textarea{max-width:100%;min-width:0}select{width:100%;text-overflow:ellipsis}.table-wrap{overflow-x:auto;max-width:100%;border-radius:12px}.table-wrap table{width:100%;font-size:13px}th,td{padding:15px 18px}.tab-nav{gap:6px;flex-wrap:wrap;overflow:visible}.tab-nav button{font-size:12px}.user-row{flex-wrap:wrap}.user-row label{min-width:140px}.topbar .nav-toggle{border:1px solid #273c58;background:#0a1220;color:#dce7f8;border-radius:8px;padding:8px 12px;font-size:12px}.form-status,.notice,td{overflow-wrap:anywhere}.bt-atmosphere{opacity:.65}
@media(max-width:1150px){.brand .brand-logo{width:220px}.topbar{gap:12px}.nav-dropdown summary{padding:10px;font-size:11px;gap:7px}.nav-account{padding-left:12px;gap:10px}.topbar #main-nav{gap:12px}}
@media(max-width:980px){.topbar{min-height:82px;justify-content:space-between}.topbar #main-nav{position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;align-items:stretch;padding:16px 20px;background:#070e19;border-bottom:1px solid #273c58;max-height:calc(100dvh - 82px);overflow:auto}.topbar #main-nav.open{display:flex}.dashboard-menus{display:flex;flex-direction:column;align-items:stretch;gap:4px}.nav-dropdown{width:100%}.nav-dropdown summary{font-size:14px;padding:14px}.nav-dropdown-list{position:static;box-shadow:none;border:0;border-left:2px solid #1b9eff55;border-radius:0;margin:4px 14px 12px;padding:0 0 0 10px;min-width:0;background:transparent}.nav-dropdown-list a{padding:12px;font-size:13px}.nav-account{border-left:0;border-top:1px solid #ffffff12;padding:14px 12px 0;justify-content:space-between}.page{padding:24px 24px 48px}.builder-grid{grid-template-columns:1fr}.sticky-card{position:static}.nav-toggle{display:block}.card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.topbar{padding:14px 18px}.brand .brand-logo{width:225px}.page{padding:24px 18px 40px}.hero.split{padding:4px 0 30px}.hero.split h1{font-size:36px}.hero.compact h1{font-size:30px}.hero p{font-size:14px}.card-grid,.two-grid,.auth-layout{grid-template-columns:1fr}.panel,.track-card{padding:20px}.stat{padding:16px 12px}.stat strong{font-size:28px}.stat>span{font-size:9px}.stat small{font-size:10px}.section-heading{align-items:center;flex-wrap:wrap}.tab-nav button{flex-grow:1;min-height:40px}.user-row{align-items:stretch}.user-row>div{min-width:0;width:100%}.table-wrap table{font-size:12px}th,td{padding:12px}.actions .button{max-width:100%}.auth-layout{margin-top:0}.auth-card{margin:0;width:100%}.hero.compact.split{padding-bottom:24px}}
@media(max-width:360px){.brand .brand-logo{width:190px}}
.student-workspace{display:grid;grid-template-columns:minmax(0,1fr) 410px;gap:40px;align-items:start}.student-content{min-width:0}.student-content .hero h1{font-size:clamp(30px,3.5vw,46px)}.student-content .card-grid{grid-template-columns:1fr}.student-content .stat{padding:18px 14px}.student-content .stat small{font-size:10px}.student-content .request-panel{grid-template-columns:1fr}.student-demo{position:sticky;top:24px;padding-top:14px}.student-demo .avatar-demo{max-width:none}.student-demo .hav-video-window{height:270px}.student-content .empty-state{padding:28px}.student-content .hero::after{display:none}
@media(max-width:1100px){.student-workspace{grid-template-columns:minmax(0,1fr) 360px;gap:24px}.student-content .stat>span{font-size:9px}.student-content .stat small{display:none}}
@media(max-width:850px){.student-workspace{grid-template-columns:1fr}.student-demo{position:static;padding-top:0;max-width:460px;width:100%;margin:0 auto}.student-content .stat small{display:block}.student-content .card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.student-content .card-grid{grid-template-columns:1fr}.student-content .hero h1{font-size:32px}.student-content .stat small{font-size:9px}}
@media(max-width:700px){.auth-story h1{font-size:34px;line-height:1.15}.auth-story h1 br{display:initial}}
/* Credit management: stable resource cards and responsive controls. */
.credit-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.credit-stat{display:flex;flex-direction:column;gap:10px;min-width:0}.credit-stat>strong{font-size:clamp(1.6rem,3vw,2.5rem);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.credit-stat>span,.credit-stat>small{color:var(--muted,#94a3b8)}.credit-filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:16px;align-items:end}.credit-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}.credit-layout>.stack,.credit-layout .panel{min-width:0}.credit-dashboard select{width:100%;min-width:0}.credit-zero{color:#ffca83}.credit-change{font-variant-numeric:tabular-nums;white-space:nowrap}.credit-dashboard .table-wrap{max-width:100%;overflow-x:auto}.credit-dashboard td{overflow-wrap:anywhere}.credit-dashboard details summary{cursor:pointer;font-weight:600}.credit-dashboard .actions{margin-top:18px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:1050px){.credit-layout{grid-template-columns:1fr}.credit-filters{grid-template-columns:1fr 1fr}.credit-summary{grid-template-columns:1fr 1fr}}
@media(max-width:550px){.credit-filters{grid-template-columns:1fr}.credit-summary{gap:10px}.credit-stat{padding:16px}.credit-dashboard .card-top{align-items:flex-start;flex-wrap:wrap}.credit-dashboard .panel{max-width:100%}}
/* Decorative glows must stay within the viewport, including long admin pages. */
.bt-atmosphere{overflow:clip;contain:paint}
.credit-dashboard .table-wrap{position:relative}
.credit-dashboard td .tag{white-space:nowrap;overflow-wrap:normal}