/* ==========================================================================
   景贤书房 · 登录界面样式
   主题：浅蓝色调
   两个布局：手机端 / 电脑·Pad 端 —— 顶部预览条切换，默认手机端
   三个入口：教师 / 学生 / 家长
   ========================================================================== */

:root{
  /* 品牌浅蓝 */
  --brand:#2E90E8;
  --brand-2:#1B6FC4;
  --brand-hi:#5FB2F4;
  --brand-soft:#E8F3FE;
  --brand-line:#CFE6FA;
  --brand-ink:#0F4C82;

  /* 中性 */
  --ink:#0E2A45;
  --ink-2:#5A7A99;
  --ink-3:#95AEC5;
  --page:#EDF5FD;
  --card:#FFFFFF;
  --line:#DDEBF9;
  --soft:#F5FAFF;

  /* 状态 */
  --warn:#E8912B; --warn-soft:#FDF3E4;
  --dan:#E35B5B;  --dan-soft:#FDECEC;
  --ok:#1FA97A;   --ok-soft:#E7F7F1;

  --r-lg:22px; --r-md:14px; --r-sm:10px;
  --sh-card:0 24px 60px -28px rgba(20,73,124,.34), 0 2px 6px rgba(20,73,124,.06);
  --sh-btn:0 12px 24px -10px rgba(46,144,232,.62);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  color:var(--ink); background:#DCE9F6; -webkit-font-smoothing:antialiased;
}

/* ============================ 顶部预览条 ============================ */
.preview-bar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:12px 20px; background:rgba(255,255,255,.92); backdrop-filter:blur(12px);
  border-bottom:1px solid #D7E6F5;
}
.preview-bar .ttl{font-size:14px; font-weight:600; color:var(--ink)}
.preview-bar .ttl b{color:var(--brand-2)}
.preview-bar .hint{font-size:12px; color:var(--ink-3); margin-left:auto}
.seg{display:flex; gap:4px; background:var(--brand-soft); border-radius:999px; padding:4px}
.seg button{
  border:none; background:transparent; font-family:inherit; font-size:13px; font-weight:600;
  color:var(--brand-ink); padding:8px 16px; border-radius:999px; cursor:pointer; transition:.18s;
}
.seg button.on{background:#fff; color:var(--brand-2); box-shadow:0 2px 8px -2px rgba(31,111,196,.35)}
.seg button:not(.on):hover{background:rgba(255,255,255,.6)}

/* ============================ 舞台 ============================ */
.stage{
  min-height:calc(100vh - 58px); display:flex; align-items:center; justify-content:center;
  padding:34px 20px 46px; transition:.2s;
}
.device{
  transition:width .28s ease, height .28s ease, border-radius .28s ease;
  background:var(--page); position:relative; overflow:hidden;
}
.device.mobile{
  width:390px; height:812px; border-radius:46px; border:10px solid #16324C;
  box-shadow:0 40px 80px -30px rgba(12,54,92,.5), 0 0 0 1px rgba(255,255,255,.6) inset;
}
.device.mobile::before{  /* 听筒 */
  content:""; position:absolute; top:12px; left:50%; transform:translateX(-50%);
  width:104px; height:26px; border-radius:14px; background:#16324C; z-index:9;
}
.device.desktop{
  width:min(1120px, 96vw); height:auto; min-height:640px; border-radius:18px;
  border:1px solid #CBDEF2; box-shadow:var(--sh-card); overflow:hidden;
}
/* 电脑端窗口顶栏 */
.winbar{
  display:none; align-items:center; gap:8px; padding:11px 14px;
  background:#F3F8FE; border-bottom:1px solid #E1EDFA;
}
.device.desktop .winbar{display:flex}
.winbar .dot{width:10px; height:10px; border-radius:50%}
.winbar .dot.r{background:#FB6A5F} .winbar .dot.y{background:#FDCB45} .winbar .dot.g{background:#4FCB62}
.winbar .url{
  margin-left:12px; flex:1; max-width:420px; background:#fff; border:1px solid #E1EDFA;
  border-radius:8px; padding:5px 12px; font-size:11.5px; color:var(--ink-3);
}
.winbar .live{margin-left:auto; font-size:11px; color:var(--ok); display:flex; align-items:center; gap:5px}
.winbar .live i{width:6px; height:6px; border-radius:50%; background:var(--ok); display:block}

/* ============================ 登录页本体 ============================ */
.login{
  height:100%; display:flex; flex-direction:column; position:relative;
  background:
    radial-gradient(120% 66% at 88% -6%, #D6ECFF 0%, rgba(214,236,255,0) 60%),
    radial-gradient(90% 46% at 4% 6%, #E9F5FF 0%, rgba(233,245,255,0) 62%),
    linear-gradient(180deg,#F6FBFF 0%, #E6F2FD 100%);
  overflow-y:auto;
}
.device.mobile .login{padding:44px 24px 26px}
.device.desktop .login{flex-direction:row; padding:0; overflow:hidden}

/* 装饰气泡 */
.bubble{position:absolute; border-radius:50%; background:rgba(120,186,244,.16); pointer-events:none}
.bubble.b1{width:190px; height:190px; right:-62px; top:-58px}
.bubble.b2{width:110px; height:110px; left:-46px; top:180px; background:rgba(150,203,248,.13)}
.bubble.b3{width:64px; height:64px; right:26px; bottom:120px; background:rgba(150,203,248,.16)}

/* ---- 左侧品牌（仅电脑端显示）---- */
.hero{display:none}
.device.desktop .hero{
  display:flex; flex-direction:column; justify-content:center; gap:22px;
  width:44%; flex:none; padding:56px 50px; position:relative; overflow:hidden;
  background:linear-gradient(160deg,#2E90E8 0%, #1B6FC4 100%); color:#fff;
}
.hero .glow{position:absolute; border-radius:50%; background:rgba(255,255,255,.10)}
.hero .glow.g1{width:300px; height:300px; right:-120px; top:-90px}
.hero .glow.g2{width:200px; height:200px; left:-90px; bottom:-70px; background:rgba(255,255,255,.08)}
.hero .mk{width:60px; height:60px; border-radius:18px; background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.34); display:grid; place-items:center;
  font-size:27px; font-weight:800; letter-spacing:1px; backdrop-filter:blur(4px)}
.hero h1{margin:0; font-size:34px; letter-spacing:5px; font-weight:700}
.hero .slogan{margin:0; font-size:14px; line-height:1.9; opacity:.9; max-width:20em}
.hero ul{margin:6px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:11px}
.hero li{display:flex; align-items:center; gap:10px; font-size:13.5px; opacity:.94}
.hero li i{width:20px; height:20px; border-radius:7px; background:rgba(255,255,255,.2);
  display:grid; place-items:center; font-size:11px; font-style:normal; flex:none}
.hero .foot{margin-top:10px; font-size:12px; opacity:.7}

/* ---- 右侧表单区 ---- */
.panel{flex:1; display:flex; flex-direction:column; justify-content:center; position:relative; z-index:2}
.device.mobile .panel{justify-content:flex-start; flex:1}

/* 品牌头（手机端） */
.brand{display:flex; flex-direction:column; align-items:center; gap:12px; margin-bottom:26px}
.brand .mk{
  width:64px; height:64px; border-radius:20px; display:grid; place-items:center;
  background:linear-gradient(160deg,#3E9BF0,#1B6FC4); color:#fff; font-size:28px; font-weight:800;
  letter-spacing:1px; box-shadow:0 16px 30px -14px rgba(31,111,196,.7);
}
.brand h1{margin:0; font-size:25px; letter-spacing:6px; font-weight:700; color:var(--brand-ink)}
.brand .sub{margin:0; font-size:12.5px; color:var(--ink-3); letter-spacing:.5px}

/* 电脑端的表单头 */
.device.desktop .brand{align-items:flex-start; margin-bottom:22px}
.device.desktop .brand h1{font-size:21px; letter-spacing:3px; color:var(--ink)}
.device.desktop .brand .sub{letter-spacing:0}
.device.desktop .brand .mk{display:none}

.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:22px 20px 20px; box-shadow:var(--sh-card);
}
.device.desktop .card{max-width:420px; width:100%; padding:26px 26px 22px}
.device.desktop .panel{padding:0 52px}

/* ---- 角色分段（三入口）---- */
.roles{display:flex; gap:6px; background:var(--soft); border:1px solid var(--line);
  border-radius:var(--r-md); padding:5px; margin-bottom:20px}
.roles button{
  flex:1; border:none; background:transparent; font-family:inherit; cursor:pointer;
  padding:10px 4px; border-radius:var(--r-sm); transition:.18s; color:var(--ink-2);
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
.roles button .ic{font-size:16px; line-height:1}
.roles button .lb{font-size:12.5px; font-weight:600}
.roles button.on{
  background:#fff; color:var(--brand-2);
  box-shadow:0 3px 10px -3px rgba(31,111,196,.4); border:1px solid var(--brand-line);
}
.roles button:not(.on):hover{background:rgba(255,255,255,.7)}

/* ---- 表单 ---- */
.greet{margin:0 0 16px; font-size:13px; color:var(--ink-2); text-align:center}
.device.desktop .greet{text-align:left}
.greet b{color:var(--brand-2)}

.field{margin-bottom:13px}
.field label{display:block; font-size:12.5px; color:var(--ink-2); margin-bottom:6px; font-weight:500}
.ctrl{position:relative; display:flex; align-items:center}
.inp{
  width:100%; border:1px solid var(--line); background:var(--soft); color:var(--ink);
  border-radius:var(--r-md); padding:13px 14px; font-size:15px; font-family:inherit;
  outline:none; transition:.16s;
}
.inp::placeholder{color:#A9C0D6}
.inp:focus{border-color:var(--brand); background:#fff; box-shadow:0 0 0 3.5px rgba(46,144,232,.14)}
.eye{
  position:absolute; right:6px; border:none; background:transparent; cursor:pointer;
  font-size:15px; padding:8px 10px; color:var(--ink-3); border-radius:8px;
}
.eye:hover{color:var(--brand-2); background:var(--soft)}

/* 4 位访问码分格 */
.code{display:flex; gap:10px}
.code input{
  flex:1; min-width:0; height:58px; text-align:center; font-size:26px; font-weight:700;
  color:var(--brand-ink); font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  border:1px solid var(--line); background:var(--soft); border-radius:var(--r-md);
  outline:none; transition:.16s; padding:0;
}
.code input:focus{border-color:var(--brand); background:#fff; box-shadow:0 0 0 3.5px rgba(46,144,232,.14)}
.code input.filled{border-color:var(--brand-line); background:#fff}

/* 行：记住我 / 忘记密码 */
.rowline{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:4px 0 18px}
.chk{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-2); cursor:pointer; user-select:none}
.chk input{appearance:none; width:17px; height:17px; border:1.5px solid #C3D8EC; border-radius:5px;
  background:#fff; margin:0; cursor:pointer; position:relative; transition:.15s}
.chk input:checked{background:var(--brand); border-color:var(--brand)}
.chk input:checked::after{content:""; position:absolute; left:5px; top:1.5px; width:4px; height:8px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg)}
.link{font-size:12.5px; color:var(--brand-2); text-decoration:none; cursor:pointer}
.link:hover{text-decoration:underline}

/* 主按钮 */
.btn{
  width:100%; border:none; border-radius:var(--r-md); padding:14px 16px; font-family:inherit;
  font-size:15.5px; font-weight:600; letter-spacing:2px; cursor:pointer; transition:.18s;
  background:linear-gradient(160deg,#3E9BF0,#1B6FC4); color:#fff; box-shadow:var(--sh-btn);
}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:scale(.988)}
.btn[disabled]{opacity:.68; cursor:default; filter:none; transform:none}
.btn.ghost{
  background:#fff; color:var(--brand-2); border:1px solid var(--brand-line); box-shadow:none;
  letter-spacing:0; font-size:13.5px; padding:12px 16px;
}
.btn.ghost:hover{background:var(--brand-soft)}

/* 提示条 */
.msg{display:none; align-items:flex-start; gap:9px; padding:11px 13px; border-radius:var(--r-md);
  font-size:12.5px; line-height:1.6; margin-bottom:14px}
.msg.on{display:flex}
.msg.err{background:var(--dan-soft); color:#B93B3B; border:1px solid #F7D2D2}
.msg.info{background:var(--brand-soft); color:var(--brand-ink); border:1px solid var(--brand-line)}
.msg .i{flex:none; font-size:13px}

/* 角色额外文案 */
.role-note{margin:14px 0 0; font-size:12px; color:var(--ink-3); line-height:1.65; text-align:center}
.device.desktop .role-note{text-align:left}
.role-note b{color:var(--brand-2); font-weight:600}

/* 底部 */
.tail{margin-top:auto; padding-top:22px; text-align:center}
.tail .ln{display:flex; align-items:center; justify-content:center; gap:14px; font-size:11.5px;
  color:var(--ink-3); flex-wrap:wrap}
.tail .ln span{cursor:pointer}
.tail .ln span:hover{color:var(--brand-2)}
.tail .cp{margin-top:9px; font-size:11px; color:#AFC4D8; letter-spacing:.3px}

/* 切换动画 */
.pane{display:none}
.pane.on{display:block; animation:fade .22s ease}
@keyframes fade{from{opacity:0; transform:translateY(5px)}to{opacity:1; transform:none}}

/* 小屏时缩小手机外壳，避免超出视口 */
@media(max-height:900px) and (min-width:521px){
  .device.mobile{transform:scale(.92); transform-origin:top center}
}
@media(max-width:520px){
  .preview-bar .hint{display:none}
  .stage{padding:16px 0 30px}
  .device.mobile{width:100%; max-width:430px; height:auto; min-height:auto;
    border-radius:0; border:none; box-shadow:none}
  .device.mobile::before{display:none}
  .device.mobile .login{padding:34px 22px 26px; min-height:100vh}
}

/* ==================== 自助查访问码 ==================== */
.find-intro{
  font-size:13px;color:#5A7A99;line-height:1.8;margin:0 0 14px;
  padding:10px 12px;border-radius:10px;background:#F3F8FD;border:1px solid #DCE9F6;
}
.find-intro b{color:#1F5188}
#pane-find select.inp{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,#8AA8C6 50%),
                   linear-gradient(135deg,#8AA8C6 50%,transparent 50%);
  background-position:calc(100% - 19px) 51%,calc(100% - 14px) 51%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.findres{margin-top:14px}
.fres{border:1px solid #CFE3F6;border-radius:13px;background:#F8FCFF;padding:14px 15px}
.fh{font-size:14px;color:#22364C;margin-bottom:11px}
.fh b{font-size:15.5px;color:#1B5FA8;margin-left:2px}
.fh .fc2{font-size:12px;color:#7C93AC;margin-left:9px}
.fcodes{display:flex;gap:10px;flex-wrap:wrap}
.fc{flex:1 1 130px;border:1px solid #DCE9F6;border-radius:11px;background:#fff;
  padding:10px 12px;text-align:center}
.fc .lb{display:block;font-size:11.5px;color:#7C93AC;letter-spacing:1px}
.fc b{display:block;font-size:25px;color:#1B5FA8;letter-spacing:4px;line-height:1.35;
  font-family:Consolas,"Courier New",monospace}
.fc.pc b{color:#1E7A46}
.fc .tip{display:block;font-size:11px;color:#93A7BC;margin-top:3px}
.ftip{font-size:12px;color:#7C93AC;line-height:1.75;margin:11px 0 12px}
#findGo{width:100%}