/* CodeTogether 3D UI layer — presentation only. No behavior/API selectors are changed. */
:root{
  --ct3d-bg:#f5f8ff;
  --ct3d-ink:#101828;
  --ct3d-blue:#2563eb;
  --ct3d-cyan:#06b6d4;
  --ct3d-violet:#7c3aed;
  --ct3d-glass:rgba(255,255,255,.72);
  --ct3d-line:rgba(15,23,42,.09);
  --ct3d-shadow:0 24px 70px rgba(37,99,235,.16),0 10px 30px rgba(15,23,42,.08);
}

html{scroll-behavior:smooth;overflow-x:hidden!important}
body{isolation:isolate;overflow-x:hidden!important;width:100%!important;max-width:100%!important}

/* Ambient 3D space */
body::before{
  content:"";position:fixed;top:0;left:0;width:100%;height:100%;z-index:-3;pointer-events:none;overflow:hidden;
  background:radial-gradient(circle at 15% 15%,rgba(37,99,235,.16),transparent 28%),
             radial-gradient(circle at 82% 18%,rgba(124,58,237,.13),transparent 25%),
             radial-gradient(circle at 70% 82%,rgba(6,182,212,.12),transparent 30%);
  animation:ct3dDrift 18s ease-in-out infinite alternate;
}
body::after{
  content:"";position:fixed;top:0;left:0;width:100%;height:100%;z-index:-2;pointer-events:none;opacity:.28;overflow:hidden;
  background-image:linear-gradient(rgba(37,99,235,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,.08) 1px,transparent 1px);
  background-size:48px 48px;transform:perspective(800px) rotateX(58deg) translateY(28%);transform-origin:center bottom;
  mask-image:linear-gradient(to top,black,transparent 72%);
}
@keyframes ct3dDrift{from{transform:translate3d(-1%,-1%,0) scale(1)}to{transform:translate3d(1%,1%,0) scale(1.04)}}

/* Landing/login */
.light-navbar{backdrop-filter:blur(18px);background:rgba(255,255,255,.72)!important;border-bottom:1px solid rgba(37,99,235,.10)!important;box-shadow:0 8px 35px rgba(15,23,42,.06);position:sticky!important;top:0;z-index:50}
.navbar-brand{transform:translateZ(0);transition:transform .25s ease,filter .25s ease}.navbar-brand:hover{transform:translateY(-2px) scale(1.015);filter:drop-shadow(0 10px 20px rgba(37,99,235,.18))}
.hero-container{perspective:1400px;position:relative}
.hero-content{transform-style:preserve-3d;animation:ct3dRise .8s ease both}
.hero-title{letter-spacing:-.045em;text-shadow:0 10px 35px rgba(37,99,235,.10)}
.hero-title span{background:linear-gradient(100deg,var(--ct3d-blue),var(--ct3d-violet) 55%,var(--ct3d-cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-feature-pill,.hero-badge{box-shadow:0 8px 20px rgba(15,23,42,.05);transition:transform .25s ease,box-shadow .25s ease}.hero-feature-pill:hover{transform:translateY(-4px) rotateX(4deg);box-shadow:0 14px 28px rgba(37,99,235,.12)}
/* Auth card 3D stage base layer */
.auth-3d-stage{perspective:1400px;position:relative;width:100%}
@keyframes ct3dRise{from{opacity:0;transform:translateY(18px) translateZ(-30px)}to{opacity:1;transform:none}}

/* Main application */
.main-content{perspective:1600px;background:transparent!important}
.app-top-header{backdrop-filter:blur(20px)!important;background:rgba(255,255,255,.78)!important;border-bottom:1px solid rgba(37,99,235,.10)!important;box-shadow:0 8px 30px rgba(15,23,42,.05)!important}
.home-hero-container{position:relative;overflow:hidden;border:1px solid rgba(37,99,235,.10)!important;border-radius:30px!important;background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(241,246,255,.72))!important;box-shadow:0 25px 70px rgba(37,99,235,.12),inset 0 1px 0 white!important;transform-style:preserve-3d}
.home-hero-container::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;right:-170px;top:-190px;background:radial-gradient(circle,rgba(124,58,237,.16),transparent 68%);filter:blur(2px);pointer-events:none}
.home-hero-container::after{content:"";position:absolute;inset:auto 8% -90px 8%;height:150px;background:radial-gradient(ellipse,rgba(37,99,235,.18),transparent 68%);filter:blur(22px);pointer-events:none}
.home-hero-content{transform:translateZ(35px)}
.home-hero-headline{letter-spacing:-.055em;text-shadow:0 15px 35px rgba(37,99,235,.08)}
.home-ide-preview-box{transform:perspective(1100px) rotateY(-5deg) rotateX(3deg) translateZ(20px);transform-style:preserve-3d;box-shadow:0 30px 70px rgba(15,23,42,.18),-15px 20px 45px rgba(37,99,235,.10)!important;transition:transform .45s ease,box-shadow .45s ease}
.home-ide-preview-box:hover{transform:perspective(1100px) rotateY(0) rotateX(0) translateZ(32px) translateY(-5px);box-shadow:0 38px 90px rgba(15,23,42,.20),0 20px 55px rgba(37,99,235,.14)!important}
.metric-card,.course-card,.dashboard-card,.feature-card,.stat-card{transform-style:preserve-3d;transition:transform .28s ease,box-shadow .28s ease!important}
.metric-card:hover,.course-card:hover,.dashboard-card:hover,.feature-card:hover,.stat-card:hover{transform:translateY(-7px) rotateX(1.5deg) rotateY(-1deg)!important;box-shadow:0 20px 45px rgba(37,99,235,.12)!important}
.course-card,.metric-card{border:1px solid rgba(37,99,235,.09)!important;background:rgba(255,255,255,.76)!important;backdrop-filter:blur(14px)}
.sidebar{box-shadow:14px 0 45px rgba(15,23,42,.07)!important;background:rgba(255,255,255,.82)!important;backdrop-filter:blur(18px)}
.nav-link{transition:transform .2s,background .2s,box-shadow .2s}.nav-link:hover{transform:translateX(4px);box-shadow:0 8px 20px rgba(37,99,235,.08)}

/* Generic 3D buttons and controls */
button,.cta-btn,.nav-arrow-btn,.header-icon-btn{transition:transform .2s ease,box-shadow .2s ease}.cta-btn:hover,.header-icon-btn:hover,.nav-arrow-btn:hover{transform:translateY(-2px)}

/* Admin login */
body:has(.center-box){background-color:#050816!important;background-image:radial-gradient(circle at 20% 20%,rgba(34,197,94,.13),transparent 30%),radial-gradient(circle at 80% 70%,rgba(59,130,246,.14),transparent 32%),url("backgroundimage.avif")!important;background-blend-mode:screen,screen,normal}
body:has(.center-box)::after{background-image:linear-gradient(rgba(34,197,94,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(34,197,94,.07) 1px,transparent 1px)!important;background-size:48px 48px!important;transform:perspective(700px) rotateX(58deg) scale(1.8) translateY(25%)!important;mask-image:linear-gradient(to top,black,transparent 70%)}
.center-box{transform-style:preserve-3d;animation:ct3dRise .8s ease both}.admin-headline{text-shadow:0 15px 45px rgba(34,197,94,.16)!important;letter-spacing:-.035em!important}.login-box{transform:perspective(1200px) rotateX(2deg) rotateY(-3deg) translateZ(25px);transform-style:preserve-3d;background:rgba(7,14,29,.72)!important;border:1px solid rgba(255,255,255,.12)!important;box-shadow:0 35px 100px rgba(0,0,0,.45),0 0 60px rgba(34,197,94,.08)!important;backdrop-filter:blur(22px);transition:transform .35s ease,box-shadow .35s ease}.login-box:hover{transform:perspective(1200px) rotateX(0) rotateY(0) translateY(-6px) translateZ(35px);box-shadow:0 45px 110px rgba(0,0,0,.5),0 0 70px rgba(34,197,94,.13)!important}
.login-box input{background:rgba(255,255,255,.055)!important;border:1px solid rgba(255,255,255,.10)!important;transition:box-shadow .2s,border-color .2s,transform .2s}.login-box input:focus{border-color:rgba(34,197,94,.5)!important;box-shadow:0 0 0 4px rgba(34,197,94,.08),0 10px 25px rgba(34,197,94,.08)!important;transform:translateY(-1px)}
.login-btn{box-shadow:0 15px 35px rgba(34,197,94,.15)!important;transition:transform .2s,box-shadow .2s!important}.login-btn:hover{transform:translateY(-3px)!important;box-shadow:0 22px 45px rgba(34,197,94,.25)!important}

/* Admin control center */
body:has(.analytics){background-image:radial-gradient(circle at 10% 10%,rgba(34,197,94,.11),transparent 28%),radial-gradient(circle at 90% 90%,rgba(56,189,248,.08),transparent 30%)!important}
body:has(.analytics) .sidebar{box-shadow:15px 0 50px rgba(0,0,0,.22)!important;background:linear-gradient(180deg,rgba(8,16,30,.96),rgba(5,11,22,.96))!important}
body:has(.analytics) .topbar{backdrop-filter:blur(18px);background:rgba(6,11,24,.78)!important;border-bottom:1px solid rgba(255,255,255,.07);box-shadow:0 10px 35px rgba(0,0,0,.18)}
body:has(.analytics) .card,body:has(.analytics) .analytics-card,body:has(.analytics) .chart-card,body:has(.analytics) .export-card{background:linear-gradient(145deg,rgba(17,28,46,.86),rgba(12,22,37,.78))!important;border:1px solid rgba(255,255,255,.07)!important;box-shadow:0 18px 45px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.035)!important;backdrop-filter:blur(16px);transform-style:preserve-3d;transition:transform .28s ease,box-shadow .28s ease}
body:has(.analytics) .card:hover,body:has(.analytics) .analytics-card:hover,body:has(.analytics) .chart-card:hover,body:has(.analytics) .export-card:hover{transform:translateY(-5px) rotateX(1deg);box-shadow:0 28px 60px rgba(0,0,0,.28),0 0 30px rgba(34,197,94,.06)!important}
body:has(.analytics) .btn{transition:transform .2s,box-shadow .2s}.btn:hover{transform:translateY(-2px)}

@media(max-width:900px){
 .auth-glass-card{transform:none}.home-ide-preview-box{transform:none}.home-hero-content{transform:none}
 body::after{opacity:.14}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}