@import url("./fonts.css");

/* Frosted Glass Workbench — visual-only override. Content, IDs and behavior stay untouched. */
:root,
html[data-theme="dark"],
html[data-theme="oled"] {
  --bg-0:#050b14;
  --bg-1:#08111f;
  --bg-2:#0a1224;
  --glass:rgba(10,18,36,.76);
  --glass-2:rgba(13,28,49,.78);
  --stroke:rgba(0,217,255,.16);
  --stroke-2:rgba(22,139,255,.34);
  --txt:#f3f7ff;
  --txt-dim:#c8d4e3;
  --txt-mut:#9aa8ba;
  --accent:#00d9ff;
  --accent-2:#168bff;
  --accent-3:#59e4b2;
  --code-bg:#040a12;
  --code-stroke:rgba(0,217,255,.19);
  --glow:0 0 0 1px rgba(0,217,255,.05),0 16px 48px rgba(0,0,0,.34);
  --radius:8px;
  --radius-sm:6px;
  --sans:"DM Sans",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --display:"Space Grotesk",system-ui,sans-serif;
}
html{background:#050b14!important;color-scheme:dark!important}
html:not([data-master-ready]),html:not([data-master-ready]) body{background:#050b14!important;color:#f3f7ff!important}
html:not([data-master-ready])::before,
html:not([data-master-ready]):not(.locked) #master-boot-status{
  background-color:#050b14!important;
  background-image:linear-gradient(rgba(0,217,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(0,217,255,.035) 1px,transparent 1px)!important;
  background-size:32px 32px!important;color:#9aa8ba!important;font-family:"DM Sans",system-ui,sans-serif!important;
}
body{
  color:var(--txt)!important;background-color:var(--bg-0)!important;
  background-image:linear-gradient(rgba(0,217,255,.024) 1px,transparent 1px),linear-gradient(90deg,rgba(0,217,255,.024) 1px,transparent 1px),radial-gradient(ellipse at 70% 0%,rgba(22,139,255,.11),transparent 38%)!important;
  background-size:40px 40px,40px 40px,auto!important;font-family:var(--sans)!important;
}
h1,h2,h3,.brand,.topic-title,.welcome h1,#topbar .brand b,.hero h1{font-family:var(--display)!important;letter-spacing:0!important}
code,pre,kbd,.idx,.stat-value,.metric strong{font-family:var(--mono)!important}

/* Main shell */
.app{grid-template-columns:286px minmax(0,1fr) 272px!important;grid-template-rows:68px minmax(0,1fr)!important}
.topbar{
  background:rgba(5,11,20,.88)!important;border-bottom:1px solid var(--stroke)!important;
  backdrop-filter:blur(18px) saturate(125%)!important;box-shadow:0 10px 35px rgba(0,0,0,.18)!important;
}
.brand .logo,.lock-card .logo,#topbar .mark{
  border-radius:6px!important;background:linear-gradient(145deg,var(--accent),var(--accent-2))!important;
  box-shadow:0 0 24px rgba(0,217,255,.24)!important;color:#03101d!important;
}
.brand>div:last-child>div:first-child{font-family:var(--display)!important;font-size:15px!important}
.rail{background:rgba(5,11,20,.78)!important;backdrop-filter:blur(18px) saturate(120%)!important}
.rail h3{background:rgba(5,11,20,.92)!important;color:var(--txt-mut)!important}
.navitem{border-radius:6px!important}
.navitem:hover{background:rgba(22,139,255,.08)!important;border-color:rgba(0,217,255,.10)!important;text-decoration:none!important}
.navitem.active{background:linear-gradient(90deg,rgba(0,217,255,.13),rgba(22,139,255,.04))!important;color:var(--txt)!important;border-color:rgba(0,217,255,.22)!important}
.navitem.active::before{background:var(--accent)!important;border-radius:0!important;box-shadow:0 0 12px var(--accent)!important}
.searchbox input,.search-launch{background:rgba(4,10,18,.78)!important;border-color:var(--stroke)!important;border-radius:6px!important}
.btn,.tool-btn,.mobile-nav-btn,#topbar button{border-radius:6px!important}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2))!important;color:#03101d!important}
.content{padding-top:34px!important}
.content-inner{max-width:1080px!important}

/* Dashboard and reading */
.welcome{position:relative!important}
.welcome::before{content:"KNOWLEDGE SYSTEM / ONLINE";display:inline-flex;margin-bottom:16px;padding:5px 9px;border:1px solid rgba(0,217,255,.22);border-radius:4px;color:var(--accent);font:600 10px var(--mono);letter-spacing:.08em}
.welcome h1,.topic-title{color:var(--txt)!important;background:none!important;-webkit-text-fill-color:currentColor!important}
.welcome h1{font-size:clamp(34px,5vw,58px)!important;line-height:1.02!important;max-width:700px!important}
.welcome>p{max-width:760px!important;color:var(--txt-dim)!important}
.grid{gap:12px!important}
.fcard,.card,.callout,.qa,.anim,.diagram,.tablewrap,.settings-panel,.dsa-card{
  border-radius:8px!important;background:linear-gradient(145deg,rgba(10,18,36,.88),rgba(7,18,31,.72))!important;
  border-color:rgba(0,217,255,.15)!important;box-shadow:var(--glow)!important;
  backdrop-filter:blur(14px) saturate(115%)!important;
}
.fcard{position:relative!important;overflow:hidden!important;padding:20px!important}
.fcard::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.45}
.fcard b{color:var(--accent)!important;font-family:var(--display)!important}
.topic-title{font-size:clamp(28px,4vw,44px)!important;line-height:1.08!important}
.content h2.sec::before{background:var(--accent)!important;box-shadow:0 0 10px rgba(0,217,255,.55)!important}
.content h3.sub{color:var(--txt)!important}
.content strong{color:var(--txt)!important}
.content code:not(pre code){color:#81ebff!important;background:rgba(0,217,255,.07)!important}
.callout.info{border-color:var(--accent-2)!important;background:rgba(22,139,255,.07)!important}
.callout.info .lbl{color:#72b6ff!important}
table.data th{background:#0a1a2d!important;color:var(--txt)!important}
.subject-header-art{background:#060d18!important;border-color:var(--stroke)!important;border-radius:8px!important}
::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-track{background:#050b14}::-webkit-scrollbar-thumb{background:#17324a;border:2px solid #050b14;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#20577b}

/* Access gate */
#lockScreen{
  background-color:#050b14!important;
  background-image:linear-gradient(rgba(0,217,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(0,217,255,.035) 1px,transparent 1px),radial-gradient(ellipse at 50% 18%,rgba(22,139,255,.18),transparent 43%)!important;
  background-size:40px 40px,40px 40px,auto!important;
}
.lock-card{width:min(92vw,420px)!important;padding:38px 34px 30px!important;border-radius:8px!important;background:rgba(8,17,31,.78)!important;border:1px solid rgba(0,217,255,.24)!important;box-shadow:0 30px 90px rgba(0,0,0,.48),inset 0 1px rgba(243,247,255,.035)!important;backdrop-filter:blur(20px) saturate(125%)!important}
.lock-card::before{content:"SECURE STUDY TERMINAL";display:block;margin-bottom:22px;color:var(--accent);font:600 10px var(--mono);letter-spacing:.14em}
.lock-card h1{font:700 24px var(--display)!important;color:var(--txt)!important}
.lock-card p{font:500 13px var(--sans)!important;color:var(--txt-mut)!important;margin-top:7px!important}
#lockInput{border-radius:6px!important;background:#040a12!important;border-color:rgba(0,217,255,.24)!important;color:var(--txt)!important;height:50px!important}
#lockBtn{border-radius:6px!important;background:linear-gradient(135deg,var(--accent),var(--accent-2))!important;color:#03101d!important;height:46px!important;font-family:var(--display)!important}

/* 15-day plan shell */
#topbar{background:rgba(5,11,20,.9)!important;border-color:var(--stroke)!important;backdrop-filter:blur(18px) saturate(125%)!important}
#layout{background:transparent!important}
#sidebar,#context{background:rgba(5,11,20,.8)!important;border-color:var(--stroke)!important;backdrop-filter:blur(16px)!important}
#main{background:transparent!important}
#sidebar button.active,.top-links button.active{background:rgba(0,217,255,.11)!important;color:var(--txt)!important;border-color:rgba(0,217,255,.2)!important}
.day-card.current,.day-card:hover{border-color:rgba(0,217,255,.32)!important;box-shadow:0 12px 40px rgba(0,0,0,.28)!important}
.progress-fill,.bar-fill{background:linear-gradient(90deg,var(--accent-2),var(--accent))!important}

@media(max-width:1080px){.app{grid-template-columns:238px minmax(0,1fr)!important}.content{padding-left:30px!important;padding-right:30px!important}}
@media(max-width:760px){
 .app{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:60px minmax(0,1fr)!important}
 .topbar{padding:0 10px!important;gap:7px!important}
 .content{padding:22px 16px 74px!important}
 .welcome h1{font-size:36px!important}
 .grid{grid-template-columns:1fr!important}
 .lock-card{padding:30px 22px 24px!important}
 .topic-title{font-size:28px!important}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}