/* Masar visual system. The original palette in style.css remains authoritative. */
:root{--radius-lg:1.6rem;--radius-md:1.1rem;--premium-shadow:0 24px 80px -40px rgba(var(--shadow-color),.65)}
body{background-image:radial-gradient(ellipse at 90% 0%,rgba(var(--accent-rgb),.07),transparent 38%)}
:focus-visible{outline:2px solid var(--blue-soft);outline-offset:5px}
.nav-wrap{top:1rem;padding-inline:1.5rem;transition:top .3s ease}
.nav{width:min(100%,1320px);border-radius:1.2rem;padding:.65rem 1rem!important;gap:1.25rem;box-shadow:none;border-color:transparent;background:transparent;backdrop-filter:none}
.nav-links{gap:1.25rem;font-size:.85rem;white-space:nowrap}
.is-scrolled .nav{background:var(--nav-bg);border-color:var(--border);backdrop-filter:blur(16px);box-shadow:var(--premium-shadow)}
.is-scrolled .nav-wrap{top:.55rem}
.logo{font-size:1.5rem;gap:.7rem}.logo-mark{width:2.6rem;height:2.6rem;border-radius:.85rem}
.nav-actions{flex-shrink:0}.btn{border-radius:.85rem;min-height:46px;transition:transform .25s ease,box-shadow .25s ease,background .25s ease}
.btn-primary{box-shadow:0 5px 24px -12px var(--blue);border:1px solid rgba(242,220,216,.17)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 34px -12px var(--blue)}
.btn-ghost:hover{border-color:var(--blue-soft)}
.btn-icon{transition:transform .25s ease}.btn:hover .btn-icon{transform:translateX(-3px)}
.mobile-menu{background:var(--bg);backdrop-filter:none;gap:1.1rem;padding:6.5rem 1.5rem 2rem;overflow-y:auto}
.mobile-menu::before{content:'MASAR';position:absolute;inset-inline:0;bottom:0;text-align:center;font-family:var(--font-en);font-weight:800;font-size:20vw;color:var(--text);opacity:.025;pointer-events:none}
.mobile-menu a{font-size:clamp(1.15rem,3.5vh,1.7rem);position:relative}
.bezel{box-shadow:var(--premium-shadow);border-color:var(--border)}
.course-card-link:hover{transform:translateY(-6px)}.course-thumb{position:relative;background:linear-gradient(135deg,var(--bg-soft),var(--bg-alt));overflow:hidden}
.course-thumb:after{content:'';position:absolute;width:9rem;height:9rem;border:1px solid rgba(242,220,216,.15);border-radius:28%;transform:rotate(35deg);pointer-events:none}
.course-thumb>.ico{transition:transform .4s ease}.course-card-link:hover .course-thumb>.ico{transform:scale(1.1) rotate(-4deg)}
.course-card .course-body{padding:1.4rem}.course-card h3{line-height:1.5}.course-progress-strip .progress-fill{transition:width .5s ease}
.page-head{background:radial-gradient(ellipse at 80% 10%,rgba(var(--accent-rgb),.1),transparent 65%)}
.page-head h1{letter-spacing:-.03em}.toolbar{border-radius:var(--radius-lg);box-shadow:var(--premium-shadow)}
.tcard,.auth-card,.stat-card{box-shadow:var(--premium-shadow);border-color:var(--border)}
.tcard{background:linear-gradient(145deg,var(--card-solid),var(--bg-soft))}
.tside{background:var(--nav-bg);border-color:var(--border)}.tnav a{border-radius:.8rem;transition:background .2s ease,transform .2s ease}.tnav a:hover{transform:translateX(-2px)}
.tnav a.active{box-shadow:inset -3px 0 var(--blue)}
.ttop{background:var(--nav-bg);backdrop-filter:blur(12px)}
.auth-wrap{background:radial-gradient(ellipse at 75% 40%,rgba(var(--accent-rgb),.12),transparent 60%)}
.auth-card{border-radius:var(--radius-lg)}
.container.auth-wrap{padding-inline:1.5rem}.auth-wrap>.bezel{width:100%;max-width:520px;justify-self:center}
@media(max-width:600px){.container.auth-wrap{padding-inline:1.1rem}.auth-card{padding:1.5rem}}
input:not([type=checkbox]):not([type=radio]),textarea,select{border-radius:.75rem}
footer{border-top:1px solid var(--border);background:var(--bg);padding-top:4rem}
.foot-brand .logo{margin-bottom:1.3rem}.foot-col a{transition:color .2s ease}.foot-col a:hover{color:var(--blue-soft)}
.foot-col .foot-title{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dimmer);margin-bottom:1rem;line-height:1.6;font-weight:700}
html[dir=rtl] .foot-col .foot-title{letter-spacing:0}
.backdrop::before,.backdrop::after,.routes .trail,.routes .node{animation:none!important}.backdrop .routes{opacity:.3;will-change:auto;transform:none}
.m-block-loader{display:inline-flex;align-items:end;gap:4px;height:24px}.m-block-loader i{width:7px;height:10px;background:var(--blue-soft);border-radius:2px;animation:m-loading .9s ease-in-out infinite alternate}.m-block-loader i:nth-child(2){height:17px;animation-delay:.15s}.m-block-loader i:nth-child(3){height:24px;animation-delay:.3s}
@keyframes m-loading{to{transform:translateY(-5px);opacity:.45}}
.m-page-arrival{animation:m-page-arrival .35s ease-out both}@keyframes m-page-arrival{from{opacity:.7;translate:0 5px}to{opacity:1;translate:0 0}}
@media(min-width:960px) and (max-width:1199px){.nav-links{display:none}#burgerBtn{display:flex}}
@media(max-width:600px){.nav-wrap{padding-inline:.6rem}.nav{gap:.5rem;padding:.55rem .65rem!important}.logo{font-size:1.2rem}.logo-mark{width:2.15rem;height:2.15rem}.nav-actions{gap:.35rem}.theme-toggle,.lang-switch{padding:.12rem}.theme-toggle button{width:1.65rem;height:1.65rem}.lang-switch button{padding:.3rem .4rem}.container{padding-inline:1.25rem}.mobile-menu{justify-content:flex-start}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal{opacity:1!important;transform:none!important}}
