@property --syn-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
@property --syn-pos{syntax:'<percentage>';initial-value:0%;inherits:false}
:root{
  --syn-bg:#f5f8ff;--syn-bg-2:#edf4ff;--syn-panel:rgba(255,255,255,.74);--syn-panel-solid:#fff;
  --syn-text:#11182a;--syn-muted:#64708a;--syn-line:rgba(68,86,126,.16);--syn-shadow:0 28px 80px rgba(41,67,121,.14);
  --syn-cyan:#00cfe8;--syn-blue:#5b70ff;--syn-violet:#8e5cff;--syn-green:#50e49a;--syn-gold:#e4b664;
  --syn-radius:24px;--syn-nav:rgba(249,252,255,.74);
}
html[data-theme="dark"]{
  --syn-bg:#050710;--syn-bg-2:#0b1020;--syn-panel:rgba(13,18,35,.72);--syn-panel-solid:#0d1222;
  --syn-text:#f6f8ff;--syn-muted:#a7b2ca;--syn-line:rgba(153,173,223,.14);--syn-shadow:0 34px 100px rgba(0,0,0,.42);--syn-nav:rgba(5,7,16,.76);
}
html{scroll-behavior:smooth;color-scheme:light}
html[data-theme="dark"]{color-scheme:dark}
body{background:var(--syn-bg);color:var(--syn-text)}
body:before,body:after{content:"";position:fixed;z-index:-3;width:42vw;height:42vw;border-radius:50%;filter:blur(80px);opacity:.28;pointer-events:none;animation:synFloat 16s ease-in-out infinite alternate}
body:before{left:-12vw;top:-14vw;background:radial-gradient(circle,var(--syn-cyan),transparent 65%)}
body:after{right:-12vw;bottom:-16vw;background:radial-gradient(circle,var(--syn-violet),transparent 65%);animation-delay:-7s}
@keyframes synFloat{0%{transform:translate3d(-2%,0,0) scale(.95)}100%{transform:translate3d(4%,6%,0) scale(1.08)}}
@keyframes synSpin{to{--syn-angle:360deg;transform:rotate(360deg)}}
@keyframes synBeam{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes synPulse{0%,100%{opacity:.4;transform:scale(.92)}50%{opacity:1;transform:scale(1.06)}}
@keyframes synDrift{0%{transform:translate3d(0,0,0) scale(1.02)}50%{transform:translate3d(-1.5%,1%,0) scale(1.055)}100%{transform:translate3d(1%,-1%,0) scale(1.03)}}
.syn-topbar{position:sticky;top:0;z-index:1000;border-bottom:1px solid var(--syn-line);background:var(--syn-nav);backdrop-filter:blur(22px) saturate(1.25);-webkit-backdrop-filter:blur(22px) saturate(1.25)}
.syn-topbar:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--syn-cyan),var(--syn-violet),var(--syn-green),transparent);background-size:220% 100%;animation:synBeam 8s linear infinite;opacity:.65}
.syn-nav-shell{width:min(1240px,calc(100% - 34px));min-height:76px;margin:auto;display:flex;align-items:center;gap:30px}
.syn-brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--syn-text)!important;font-weight:900;letter-spacing:.16em;font-size:.92rem;white-space:nowrap}
.syn-brand-icon{position:relative;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(var(--syn-panel-solid),var(--syn-panel-solid)) padding-box,conic-gradient(from var(--syn-angle),var(--syn-cyan),var(--syn-violet),var(--syn-green),var(--syn-cyan)) border-box;border:1px solid transparent;animation:synBorder 5s linear infinite;box-shadow:0 0 24px rgba(0,207,232,.18)}
@keyframes synBorder{to{--syn-angle:360deg}}
.syn-brand-icon img{width:27px;height:27px;object-fit:contain}
.syn-brand-word{background:linear-gradient(90deg,var(--syn-text),var(--syn-blue),var(--syn-cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.syn-main-nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.syn-nav-link{appearance:none;border:0;background:transparent;color:var(--syn-muted)!important;text-decoration:none!important;font:inherit;font-weight:760;font-size:.91rem;padding:11px 13px;border-radius:12px;cursor:pointer;transition:.2s ease;white-space:nowrap}
.syn-nav-link:hover,.syn-nav-link.is-active,.syn-tools-menu.is-active>.syn-nav-link{color:var(--syn-text)!important;background:rgba(91,112,255,.08)}
.syn-tools-menu{position:relative}
.syn-tools-panel{position:absolute;top:calc(100% + 13px);left:50%;width:360px;transform:translate(-50%,8px);padding:10px;border:1px solid var(--syn-line);border-radius:20px;background:var(--syn-panel-solid);box-shadow:var(--syn-shadow);opacity:0;visibility:hidden;pointer-events:none;transition:.2s ease;overflow:hidden}
.syn-tools-panel:before{content:"";position:absolute;inset:-1px;background:conic-gradient(from var(--syn-angle),transparent 0 30%,rgba(0,207,232,.4),rgba(142,92,255,.34),transparent 62%);animation:synBorder 7s linear infinite;z-index:-1;filter:blur(12px)}
.syn-tools-menu:hover .syn-tools-panel,.syn-tools-menu.is-open .syn-tools-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.syn-tools-panel a{display:flex;flex-direction:column;gap:4px;padding:13px 14px;border-radius:14px;text-decoration:none!important;color:var(--syn-text)!important;transition:.2s}
.syn-tools-panel a:hover{background:rgba(91,112,255,.08);transform:translateX(3px)}
.syn-tools-panel strong{font-size:.94rem}.syn-tools-panel span{font-size:.78rem;color:var(--syn-muted);line-height:1.45}
.syn-nav-actions{display:flex;align-items:center;gap:8px}.syn-theme-toggle,.syn-mobile-toggle{width:42px;height:42px;border-radius:13px;border:1px solid var(--syn-line);background:var(--syn-panel);color:var(--syn-text);cursor:pointer;position:relative;overflow:hidden}
.syn-theme-toggle:after{content:"";position:absolute;inset:-45%;background:conic-gradient(from 0deg,transparent,var(--syn-cyan),transparent 26%,var(--syn-violet),transparent 55%);animation:synSpin 5s linear infinite;opacity:.35}.syn-theme-toggle span{position:relative;z-index:2}.syn-theme-moon{display:none}html[data-theme="dark"] .syn-theme-sun{display:none}html[data-theme="dark"] .syn-theme-moon{display:inline}
.syn-mobile-toggle{display:none;padding:10px}.syn-mobile-toggle span{display:block;height:2px;background:currentColor;margin:4px 0;border-radius:2px}
.syn-global-footer{position:relative;margin-top:72px;border-top:1px solid var(--syn-line);background:color-mix(in srgb,var(--syn-panel-solid) 82%,transparent);overflow:hidden}.syn-footer-glow{position:absolute;left:-20%;top:-1px;width:140%;height:2px;background:linear-gradient(90deg,transparent,var(--syn-cyan),var(--syn-violet),var(--syn-green),transparent);background-size:220% 100%;animation:synBeam 9s linear infinite;filter:drop-shadow(0 0 8px var(--syn-cyan))}.syn-footer-inner{width:min(1240px,calc(100% - 34px));margin:auto;min-height:130px;display:grid;grid-template-columns:1fr auto auto;gap:28px;align-items:center}.syn-footer-inner>div:first-child{display:flex;flex-direction:column;gap:5px}.syn-footer-inner strong{letter-spacing:.18em}.syn-footer-inner span,.syn-footer-copy,.syn-footer-links a{color:var(--syn-muted);font-size:.82rem}.syn-footer-links{display:flex;gap:16px}.syn-footer-links a{text-decoration:none}.syn-footer-links a:hover{color:var(--syn-text)}
/* Shared luminous treatments for existing app UI */
.card,.panel,.tool-card,.info-card,.chat-card,.course-card,.course-banner,.course-detail-panel,.course-detail-aside,.sidebar,.form,.advanced-link-card{border-color:var(--syn-line)!important;box-shadow:var(--syn-shadow)!important}
.button,button.primary,.btn-primary,.primary{position:relative;overflow:hidden}
.syn-luminous-border{position:relative;background:linear-gradient(var(--syn-panel-solid),var(--syn-panel-solid)) padding-box,conic-gradient(from var(--syn-angle),var(--syn-cyan),var(--syn-violet),var(--syn-green),var(--syn-cyan)) border-box!important;border:1px solid transparent!important;animation:synBorder 6s linear infinite}
/* App body harmonization */
body.syn-app{min-height:100vh;background:var(--syn-bg)!important;color:var(--syn-text)!important}
body.syn-app .site-header{display:none!important}
body.syn-app main.container,body.syn-app .container-xl.main-content{padding-top:28px}
body.syn-app .site-footer{display:none!important}
body.syn-app input,body.syn-app textarea,body.syn-app select{border-color:var(--syn-line)!important}
body.syn-app .muted,body.syn-app small{color:var(--syn-muted)}
@media(max-width:900px){.syn-mobile-toggle{display:block}.syn-main-nav{position:fixed;left:17px;right:17px;top:84px;display:none;flex-direction:column;align-items:stretch;background:var(--syn-panel-solid);border:1px solid var(--syn-line);border-radius:20px;padding:12px;box-shadow:var(--syn-shadow)}.syn-main-nav.is-open{display:flex}.syn-nav-link{text-align:left}.syn-tools-panel{position:static;transform:none!important;width:100%;box-shadow:none;margin-top:4px;display:none;opacity:1;visibility:visible;pointer-events:auto;background:rgba(91,112,255,.04)}.syn-tools-menu.is-open .syn-tools-panel{display:block}.syn-tools-menu:hover .syn-tools-panel{display:none}.syn-tools-menu.is-open:hover .syn-tools-panel{display:block}.syn-footer-inner{grid-template-columns:1fr;gap:14px;padding:28px 0}.syn-footer-links{flex-wrap:wrap}}
@media(max-width:560px){.syn-nav-shell{width:min(100% - 22px,1240px);min-height:68px}.syn-brand-word{font-size:.82rem}.syn-footer-links{gap:12px}}
