/* XLearniverse — landing + reader shell theme (LIGHT) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --bg:#f5f8fd; --bg2:#eaf0f9; --panel:rgba(255,255,255,.82); --panels:#ffffff;
  --ink:#16202e; --ink2:#2c3a4f; --muted:#566377; --faint:#8a97aa;
  --accent:#0ea5a4; --accent2:#5b6ef5; --accent3:#a855f7;
  --accent-deep:#0d9488;
  --border:#e2e9f3; --border2:#d3deec;
  --shadow:0 24px 60px rgba(40,70,130,.14);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink); background:var(--bg);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:var(--accent-deep); text-decoration:none}

/* ---------- LANDING ---------- */
.stage{position:relative; min-height:100vh; display:grid; place-items:center; padding:32px}
.bg-img{position:fixed; inset:0; z-index:0;
  background:#eef3fb url('../img/hero_light.png') center/cover no-repeat;}
.bg-img::after{content:""; position:absolute; inset:0;
  background:
    radial-gradient(1100px 700px at 74% 40%, rgba(120,150,240,.10), transparent 62%),
    linear-gradient(105deg, rgba(245,248,253,.92) 22%, rgba(245,248,253,.55) 52%, rgba(245,248,253,.25));
}
#net{position:fixed; inset:0; z-index:1; pointer-events:none}

.card-wrap{position:relative; z-index:2; width:100%; max-width:430px;
  animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0; transform:translateY(18px)}to{opacity:1; transform:none}}

.brand{display:flex; align-items:center; gap:14px; justify-content:center; margin-bottom:22px}
.brand img{width:56px; height:56px; filter:drop-shadow(0 6px 14px rgba(14,165,164,.28))}
.brand .name{font-size:1.7rem; font-weight:800; letter-spacing:-.02em;
  background:linear-gradient(100deg,var(--accent),var(--accent2) 55%,var(--accent3));
  -webkit-background-clip:text; background-clip:text; color:transparent}

.headline{text-align:center; margin:0 0 6px; font-size:1.34rem; font-weight:700;
  letter-spacing:-.01em; color:var(--ink)}
.subhead{text-align:center; color:var(--muted); margin:0 0 26px; font-size:.98rem; line-height:1.5}

.card{
  background:var(--panel); backdrop-filter:blur(14px) saturate(130%);
  -webkit-backdrop-filter:blur(14px) saturate(130%);
  border:1px solid #fff; outline:1px solid var(--border); border-radius:20px; padding:30px 28px;
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.9);
}
.card h2{margin:0 0 4px; font-size:1.18rem; color:var(--ink)}
.card .hint{margin:0 0 22px; color:var(--faint); font-size:.85rem}

.field{margin-bottom:16px}
.field label{display:block; font-size:.8rem; color:var(--muted); margin-bottom:7px; font-weight:600}
.field input{
  width:100%; padding:13px 14px; border-radius:11px; font-size:.96rem; color:var(--ink);
  background:#fff; border:1px solid var(--border2); outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.field input::placeholder{color:#aab4c4}
.field input:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(14,165,164,.16)}

.btn{
  width:100%; margin-top:6px; padding:13px 16px; border:none; cursor:pointer;
  border-radius:11px; font-size:1rem; font-weight:600; color:#fff; letter-spacing:.01em;
  background:linear-gradient(100deg,var(--accent),var(--accent2));
  box-shadow:0 12px 26px rgba(91,110,245,.30); transition:transform .12s, box-shadow .2s, filter .2s;
}
.btn:hover{transform:translateY(-1px); filter:brightness(1.05); box-shadow:0 16px 34px rgba(91,110,245,.40)}
.btn:active{transform:translateY(0)}
.btn[disabled]{opacity:.65; cursor:progress; filter:none}

.err{min-height:1.1em; margin-top:12px; color:#d6336c; font-size:.85rem; text-align:center;
  opacity:0; transition:opacity .2s}
.err.show{opacity:1}

.foot{position:relative; z-index:2; text-align:center; color:var(--faint); font-size:.78rem;
  margin-top:26px; line-height:1.6}
.foot .dot{color:var(--accent2)}

/* ---------- LIBRARY (course picker) ---------- */
.lib{position:relative; z-index:2; max-width:1000px; margin:0 auto; padding:42px clamp(20px,5vw,48px) 80px;
  animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
.lib-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:38px}
.lib-head .brand{margin:0; gap:12px}
.lib-head .brand img{width:40px;height:40px}
.lib-head .brand .name{font-size:1.3rem}
.lib-title{font-size:1.9rem; font-weight:800; letter-spacing:-.02em; margin:0 0 6px; color:var(--ink)}
.lib-sub{color:var(--muted); margin:0 0 30px; font-size:1rem}
.course-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:22px}
.course-card{background:var(--panel); backdrop-filter:blur(14px) saturate(130%);
  -webkit-backdrop-filter:blur(14px) saturate(130%); border:1px solid #fff; outline:1px solid var(--border);
  border-radius:20px; padding:24px 24px 22px; box-shadow:var(--shadow); display:flex; flex-direction:column;
  transition:transform .15s, box-shadow .2s}
.course-card:hover{transform:translateY(-3px); box-shadow:0 30px 70px rgba(40,70,130,.20)}
.cc-tag{display:inline-block; align-self:flex-start; font-size:.64rem; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:#0d9488; background:#d7f5f0; border:1px solid #b3ebe2; padding:4px 9px;
  border-radius:20px; margin-bottom:12px}
.course-card h2{margin:0 0 3px; font-size:1.3rem; letter-spacing:-.01em; color:var(--ink)}
.cc-sub{color:var(--accent-deep); font-weight:600; font-size:.9rem; margin-bottom:10px}
.cc-blurb{color:var(--muted); font-size:.92rem; line-height:1.55; margin:0 0 14px; flex:1}
.cc-meta{color:var(--faint); font-size:.78rem; margin-bottom:16px}
.cc-actions{display:flex; align-items:center; gap:12px}
.cc-open{flex:1; text-align:center; padding:11px 16px}
.cc-dl{color:var(--muted); font-size:.84rem; white-space:nowrap; border-bottom:1px solid transparent}
.cc-dl:hover{color:var(--accent-deep); border-bottom-color:var(--accent-deep)}

/* ---------- READER ---------- */
.side .top .back{display:inline-block; color:var(--muted); font-size:.78rem; margin-bottom:12px;
  border-bottom:1px solid transparent}
.side .top .back:hover{color:var(--accent-deep); border-bottom-color:var(--accent-deep)}
.reader{display:grid; grid-template-columns:300px 1fr; height:100vh; background:var(--bg)}
.side{
  background:linear-gradient(180deg,#ffffff,#f4f7fc); border-right:1px solid var(--border2);
  display:flex; flex-direction:column; min-height:0;
}
.side .top{padding:20px 18px; border-bottom:1px solid var(--border)}
.side .top .brand{justify-content:flex-start; gap:11px; margin:0}
.side .top .brand img{width:34px;height:34px}
.side .top .brand .name{font-size:1.18rem}
.side .top .tag{color:var(--faint); font-size:.74rem; margin:8px 0 0 1px; letter-spacing:.02em}

.toc{overflow-y:auto; padding:12px 10px; flex:1; min-height:0}
.toc .part{color:var(--accent3); font-size:.68rem; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; margin:16px 12px 7px}
.toc a{display:block; color:var(--ink2); padding:9px 13px; border-radius:9px; font-size:.9rem;
  border:1px solid transparent; transition:background .12s,color .12s,border-color .12s; cursor:pointer}
.toc a .n{color:var(--faint); font-variant-numeric:tabular-nums; margin-right:8px; font-size:.82em}
.toc a:hover{background:#eef3fb; color:var(--ink)}
.toc a.active{background:linear-gradient(90deg,rgba(14,165,164,.14),rgba(91,110,245,.08));
  color:var(--ink); border-color:var(--border2); box-shadow:inset 2px 0 0 var(--accent)}
.toc .subnav{margin:2px 0 8px 14px; padding-left:8px; border-left:1px solid var(--border2);
  display:flex; flex-direction:column; gap:1px}
.toc a.sub{padding:6px 11px; font-size:.82rem; color:var(--muted); border-radius:8px}
.toc a.sub:hover{background:#eef3fb; color:var(--ink)}
.toc a.sub.active{background:rgba(14,165,164,.12); color:var(--ink);
  box-shadow:inset 2px 0 0 var(--accent); border-color:transparent}

.side .bottom{padding:12px 16px; border-top:1px solid var(--border); display:flex;
  align-items:center; justify-content:space-between; gap:8px}
.side .bottom .docx{color:var(--muted); font-size:.8rem}
.logout{background:#fff; border:1px solid var(--border2); color:var(--muted); cursor:pointer;
  padding:6px 12px; border-radius:8px; font-size:.8rem; transition:.15s}
.logout:hover{color:var(--ink); border-color:var(--accent)}

.main{display:flex; flex-direction:column; min-height:0; background:#fff}
.bar{display:flex; align-items:center; gap:12px; padding:10px 16px; background:#fff;
  border-bottom:1px solid var(--border); flex:0 0 auto}
.bar .ttl{font-weight:600; font-size:.95rem; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tutor-btn{margin-left:auto; border:1px solid var(--border2); background:#fff; color:var(--accent-deep);
  font-weight:600; font-size:.85rem; padding:7px 13px; border-radius:9px; cursor:pointer; transition:.15s}
.tutor-btn:hover{background:#eafaf8; border-color:var(--accent)}
#frame{flex:1; width:100%; border:none; background:#fff; display:block; min-height:0}
.menu-btn{display:none}

/* chat / tutor panel */
.reader.chat-open{grid-template-columns:300px minmax(0,1fr) 400px}
.chat{display:none; flex-direction:column; min-height:0; background:#fff; border-left:1px solid var(--border2)}
.reader.chat-open .chat{display:flex}
.chat-head{display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--border);
  background:linear-gradient(100deg,#f0fbfa,#eef0fe)}
.chat-head-main{flex:1; min-width:0}
.chat-title{font-weight:700; font-size:.95rem; color:var(--ink)}
.chat-section{font-size:.76rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.chat-head-actions button{border:none; background:transparent; color:var(--muted); cursor:pointer; font-size:1rem; padding:4px 7px; border-radius:7px}
.chat-head-actions button:hover{background:rgba(255,255,255,.6); color:var(--ink)}
.thread-list{border-bottom:1px solid var(--border); max-height:42%; overflow:auto; background:#fafcff}
.tl-empty{padding:10px 14px; font-size:.82rem; color:var(--faint)}
.tl-item{display:block; padding:9px 14px; border-bottom:1px solid var(--border); cursor:pointer; text-decoration:none}
.tl-item:hover{background:#eef3fb}
.tl-item.on{background:rgba(14,165,164,.10)}
.tl-sec{font-weight:600; color:var(--ink); font-size:.84rem}
.tl-snip{color:var(--faint); font-size:.78rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.chat-msgs{flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:12px; min-height:0}
.chat-empty{color:var(--muted); font-size:.86rem; line-height:1.6; background:#f5f8fd; border:1px solid var(--border); border-radius:10px; padding:12px}
.msg.user{align-self:flex-end; max-width:88%}
.msg.user .msg-body{background:linear-gradient(100deg,var(--accent),var(--accent2)); color:#fff; padding:9px 12px; border-radius:13px 13px 4px 13px; font-size:.9rem; line-height:1.5}
.msg.assistant{align-self:flex-start; max-width:96%}
.msg.assistant .msg-body{background:#f3f6fc; color:var(--ink); padding:10px 13px; border-radius:13px 13px 13px 4px; font-size:.9rem; line-height:1.6}
.msg-quote{font-size:.76rem; color:var(--muted); border-left:2px solid var(--accent2); padding:2px 8px; margin:0 0 5px; background:#f6f8fd; border-radius:4px}
.msg-body p{margin:0 0 .55em}.msg-body p:last-child{margin:0}
.msg-body ul,.msg-body ol{margin:.3em 0 .6em; padding-left:1.3em}
.msg-body code{background:#e7edf6; padding:.05em .35em; border-radius:4px; font-family:'JetBrains Mono',monospace; font-size:.85em}
.msg-body pre{background:#0e1626; color:#dcdccc; padding:10px 12px; border-radius:9px; overflow:auto; font-size:.8rem}
.msg-body pre code{background:none; color:inherit; padding:0}
.msg-body .mh{font-weight:700}
.dots{letter-spacing:2px; color:var(--faint); animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.4}}
.chat-quote{margin:0 14px; padding:7px 10px; background:#f6f8fd; border:1px solid var(--border2); border-radius:9px; font-size:.78rem; color:var(--muted); display:flex; gap:8px; align-items:flex-start}
.chat-quote button{border:none; background:none; color:var(--faint); cursor:pointer; margin-left:auto}
.chat-input{display:flex; gap:8px; padding:12px 14px; border-top:1px solid var(--border); align-items:flex-end}
.chat-input textarea{flex:1; resize:none; border:1px solid var(--border2); border-radius:11px; padding:9px 11px; font:inherit; font-size:.9rem; color:var(--ink); max-height:140px; outline:none}
.chat-input textarea:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(14,165,164,.14)}
.chat-input button{border:none; cursor:pointer; width:38px; height:38px; border-radius:50%; color:#fff; font-size:1.1rem;
  background:linear-gradient(100deg,var(--accent),var(--accent2)); flex:0 0 auto}

/* mobile */
@media (max-width:820px){
  .reader, .reader.chat-open{grid-template-columns:1fr}
  .side{position:fixed; z-index:30; width:300px; height:100%; transform:translateX(-105%);
    transition:transform .25s ease; box-shadow:0 0 60px rgba(40,60,110,.25)}
  .side.open{transform:none}
  .menu-btn{display:inline-flex; background:#fff;border:1px solid var(--border2);color:var(--ink);
    border-radius:9px;padding:7px 11px;cursor:pointer;font-size:1rem}
  .reader.chat-open .chat{position:fixed; inset:0; z-index:40; border-left:none}
  .scrim{position:fixed;inset:0;background:rgba(20,40,80,.28);z-index:20;display:none}
  .scrim.show{display:block}
}
@media (min-width:821px){ .scrim{display:none} }