:root{
  --experience-cyan:#41c9d4;
  --experience-blue:#159fe0;
  --experience-coral:#f18b55;
  --experience-ease:cubic-bezier(.2,.78,.22,1);
}

html{scroll-behavior:smooth}
body{background-attachment:fixed}
button,a,input,textarea,select{transition:color .2s ease,background-color .2s ease,border-color .2s ease,box-shadow .24s ease,transform .24s var(--experience-ease)}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid color-mix(in srgb,var(--experience-cyan) 76%,transparent);outline-offset:3px}

.guest-header,.topbar{backdrop-filter:blur(18px) saturate(1.25);-webkit-backdrop-filter:blur(18px) saturate(1.25)}
.guest-header{box-shadow:0 10px 32px rgba(4,15,22,.16)}
.guest-nav button,.nav button{transition:color .2s ease,background .24s ease,transform .24s var(--experience-ease)}
.guest-nav button:hover,.nav button:hover{transform:translateY(-2px)}
.header-utilities{border-color:rgba(104,199,215,.3);box-shadow:0 10px 26px rgba(0,0,0,.16),inset 0 1px rgba(255,255,255,.08)}

#app main:not(.guest-page):not(.auth):not(.public-profile-page){animation:experiencePageIn .48s var(--experience-ease) both}
.container>.hero{position:relative;overflow:hidden;border-radius:24px;padding:clamp(24px,3.4vw,42px);box-shadow:0 22px 54px rgba(4,16,24,.18),inset 0 1px rgba(255,255,255,.08)}
.container>.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(112deg,transparent 0%,rgba(89,219,224,.075) 43%,transparent 67%);transform:translateX(-120%);animation:experienceHeroSweep 1.1s .18s var(--experience-ease) both}
.container>.hero>*{position:relative;z-index:1}
.container>.hero .eyebrow,.section-title .eyebrow{color:var(--experience-cyan)}
.container>.hero h1{line-height:1.05}
.grid{gap:20px}

.panel,.job-card,.talent-card,.profile-card,.stat,.resume-preview,.mentor-session-card,.mentor-booking-card,.mentor-resources,.mentor-progress,.applications-panel,.company-application-row,.talent-application-card,.notification-card{
  transition:transform .28s var(--experience-ease),border-color .25s ease,box-shadow .28s ease,background-color .25s ease;
}
.panel,.job-card,.talent-card,.profile-card,.resume-preview,.mentor-session-card,.mentor-booking-card,.mentor-resources,.mentor-progress,.applications-panel,.company-application-row,.talent-application-card{border-radius:18px}
.job-card,.talent-card,.company-application-row,.talent-application-card{box-shadow:0 14px 34px rgba(0,0,0,.12),inset 0 1px rgba(255,255,255,.045)}
.job-card:hover,.talent-card:hover,.company-application-row:hover,.talent-application-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--experience-cyan) 58%,var(--line));box-shadow:0 22px 46px rgba(0,0,0,.18),0 0 0 1px rgba(65,201,212,.08)}
.section-title{align-items:center;gap:14px}
.section-title h2{line-height:1.12}
.tag{border-radius:8px;transition:transform .2s var(--experience-ease),background .2s ease,border-color .2s ease}
.tag:hover{transform:translateY(-2px)}

.primary,.secondary{min-height:42px;border-radius:12px;font-weight:700}
.primary{background:linear-gradient(115deg,#078bc9,#13b9c5);box-shadow:0 10px 24px rgba(9,151,195,.22)}
.primary:hover{transform:translateY(-3px);box-shadow:0 16px 30px rgba(9,151,195,.3)}
.secondary{border-radius:12px}
.secondary:hover{transform:translateY(-2px)}
.danger:hover{box-shadow:0 10px 22px rgba(220,78,65,.12)}
.input,select.input,textarea.input{border-radius:10px;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
.input:focus,select.input:focus,textarea.input:focus{border-color:var(--experience-cyan)!important;box-shadow:0 0 0 4px rgba(65,201,212,.13)!important}

.auth{gap:clamp(22px,5vw,76px)}
.auth-art{position:relative;isolation:isolate}
.auth-art::after{content:"DESIGN  /  INTEGRATION  /  OPPORTUNITY";position:absolute;left:0;bottom:26px;color:rgba(207,231,239,.5);font:10px var(--mono);letter-spacing:.14em;pointer-events:none}
.auth-box{border-radius:22px;box-shadow:0 26px 70px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.06)}
.auth-box .primary{min-height:48px}

.talent-profile-hero,.profile-section{transition:transform .25s var(--experience-ease),border-color .25s ease,box-shadow .25s ease}
.talent-profile-hero{border-radius:20px;box-shadow:0 18px 40px rgba(0,0,0,.13),inset 0 1px rgba(255,255,255,.05)}
.talent-profile-hero:hover,.profile-section:hover{border-color:color-mix(in srgb,var(--experience-cyan) 45%,var(--line));box-shadow:0 20px 46px rgba(0,0,0,.15)}
.profile-section{border-radius:16px}
.profile-section h2 span{color:var(--experience-cyan)}
.talent-profile-actions button{min-height:42px}

.mentor-intro,.guidance-hero,.assessment-hero,.resume-intro,.notifications-intro,.talent-applications-intro,.services-heading{animation:experiencePageIn .55s var(--experience-ease) both}
.advice-card,.mentor-session-card,.mentor-booking-card,.mentor-resources,.mentor-progress{border-radius:18px;transition:transform .3s var(--experience-ease),box-shadow .3s ease,border-color .3s ease}
.advice-card:hover,.mentor-session-card:hover,.mentor-booking-card:hover,.mentor-resources:hover,.mentor-progress:hover{transform:translateY(-4px);box-shadow:0 22px 46px rgba(0,0,0,.17)}
.mentor-resource,.mentor-booking-list button{transition:transform .2s var(--experience-ease),border-color .2s ease,background .2s ease}
.mentor-resource:hover,.mentor-booking-list button:hover{transform:translateX(4px)}

.chat-list,.chat-main{border-radius:18px;box-shadow:0 22px 54px rgba(0,0,0,.16)}
.chat-head{backdrop-filter:blur(10px)}
.bubble{animation:experienceMessageIn .28s var(--experience-ease) both}
.composer .primary{min-width:48px}

.modal-wrap{backdrop-filter:blur(12px) saturate(1.12)}
.modal{border-radius:20px;box-shadow:0 28px 82px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.06)}
.modal-head{gap:18px}
.close{transition:transform .22s var(--experience-ease),background .2s ease}
.close:hover{transform:rotate(90deg)}

:root[data-theme='light'] body{background-image:radial-gradient(ellipse at 8% 8%,rgba(70,185,202,.09),transparent 34%),radial-gradient(ellipse at 92% 82%,rgba(238,144,89,.08),transparent 32%),linear-gradient(145deg,#f2f7f8,#e7eff2)}
:root[data-theme='light'] .guest-page{background:transparent!important}
:root[data-theme='light'] .topbar,:root[data-theme='light'] .guest-header{background:rgba(250,253,254,.88)!important;border-color:rgba(166,194,204,.46)!important;box-shadow:0 10px 32px rgba(34,71,86,.08)}
:root[data-theme='light'] .container>.hero{background:linear-gradient(125deg,rgba(255,255,255,.96),rgba(231,244,247,.91) 62%,rgba(255,245,237,.92))!important;border-color:rgba(102,166,190,.35)!important;box-shadow:0 22px 54px rgba(35,78,93,.12),inset 0 1px #fff!important}
:root[data-theme='light'] .panel,:root[data-theme='light'] .job-card,:root[data-theme='light'] .talent-card,:root[data-theme='light'] .profile-card,:root[data-theme='light'] .stat,:root[data-theme='light'] .resume-preview,:root[data-theme='light'] .mentor-session-card,:root[data-theme='light'] .mentor-booking-card,:root[data-theme='light'] .mentor-resources,:root[data-theme='light'] .mentor-progress,:root[data-theme='light'] .applications-panel,:root[data-theme='light'] .company-application-row,:root[data-theme='light'] .talent-application-card,:root[data-theme='light'] .notification-card{border-color:#c5d7dd;box-shadow:0 14px 34px rgba(37,77,92,.085),inset 0 1px rgba(255,255,255,.9)}
:root[data-theme='light'] .job-card:hover,:root[data-theme='light'] .talent-card:hover,:root[data-theme='light'] .company-application-row:hover,:root[data-theme='light'] .talent-application-card:hover{box-shadow:0 22px 46px rgba(37,77,92,.14),0 0 0 1px rgba(30,151,165,.1)}
:root[data-theme='light'] .auth-box{border-color:#d1e0e5;box-shadow:0 26px 70px rgba(38,78,94,.14),inset 0 1px #fff}
:root[data-theme='light'] .chat-list,:root[data-theme='light'] .chat-main{border-color:#c6d8de;box-shadow:0 22px 54px rgba(35,76,91,.1)}
:root[data-theme='light'] .modal{border-color:#cadbe1;box-shadow:0 28px 82px rgba(35,76,91,.2),inset 0 1px #fff}

@keyframes experiencePageIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes experienceHeroSweep{to{transform:translateX(120%)}}
@keyframes experienceMessageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:800px){.guest-header,.topbar{backdrop-filter:blur(14px)}.container>.hero{padding:24px 20px;border-radius:20px}.auth-art::after{display:none}.profile-section{padding:18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}