/* 启慧知行 V4 · 学校版（独立一套）
   三栏：左导航 224 / 中内容 / 右对话 380
   色板取 brand-logo：海军蓝 / 中蓝 / 亮青 / 薄荷 */

:root{
  --b900:#002448; --b700:#004064; --b600:#00577A; --b500:#00C4E2;
  --b300:#7FE3F0; --b100:#D3EDEE; --b50:#EEF8FA;
  --ink:#12283d; --ink2:#42596e; --ink3:#7b8fa3; --ink4:#a7b6c6;
  --line:#d9ebf0; --line2:#e8f1f4; --card:#ffffff; --bg:#f6fbfc;
  --r:14px; --r-sm:10px;
  --ok:#15803d; --warn:#f59e0b; --bad:#ef4444;
  --nav-w:224px; --chat-w:380px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font:14px/1.55 "Noto Sans SC","Droid Sans Fallback",sans-serif;-webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--b600)}

/* ---------- 登录 ---------- */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(900px 500px at 50% -10%,#e6f7fa 0%,transparent 60%),var(--bg)}
.login .box{width:100%;max-width:400px;background:var(--card);border:1px solid var(--line);
  border-radius:20px;padding:30px 26px;box-shadow:0 18px 50px rgba(0,36,72,.08);text-align:center}
.login img{width:84px;height:84px;border-radius:20px;object-fit:cover;box-shadow:0 10px 24px rgba(0,87,122,.16)}
.login h1{font-size:21px;margin:14px 0 2px;letter-spacing:-.3px}
.login .ver{color:var(--b600);font-weight:700;font-size:13px;letter-spacing:.4px}
.login .tip{color:var(--ink3);font-size:13px;margin:6px 0 18px}
.field{text-align:left;margin-bottom:12px}
.field label{display:block;font-size:12px;color:var(--ink3);margin-bottom:6px}
.inp{display:flex;gap:8px}
input,select{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;outline:none}
input:focus,select:focus{border-color:var(--b300);box-shadow:0 0 0 3px rgba(0,196,226,.15)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:11px 16px;border:0;border-radius:10px;
  background:linear-gradient(135deg,var(--b600),var(--b500));color:#fff;font-weight:600}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.ghost{background:#fff;color:var(--b600);border:1px solid var(--line);font-weight:500}
.btn.sm{padding:7px 11px;font-size:12px;border-radius:8px}
.login .btn{width:100%;margin-top:6px}
.msg{min-height:18px;font-size:12px;color:var(--bad);margin-top:10px}
.msg.ok{color:var(--ok)}
.dev{font-size:11px;color:var(--ink4);margin-top:8px}

/* ---------- 三栏壳 ---------- */
.shell{display:grid;grid-template-columns:var(--nav-w) minmax(0,1fr) var(--chat-w);min-height:100vh}
.shell.student{grid-template-columns:250px minmax(0,1fr) 400px}

/* 左栏 */
.nav{border-right:1px solid var(--line);background:#fff;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:10px;padding:16px 16px 14px;border-bottom:1px dashed var(--line)}
.brand img{width:36px;height:36px;border-radius:10px;object-fit:cover}
.brand b{font-size:14px;display:block;line-height:1.2}
.brand span{font-size:11px;color:var(--ink3)}
.menu{flex:1;overflow:auto;padding:10px 10px 6px}
.menu .grp{font-size:11px;color:var(--ink4);padding:10px 10px 4px;letter-spacing:.3px}
.menu button{display:flex;align-items:center;gap:9px;width:100%;padding:9px 10px;border:0;background:transparent;
  border-radius:9px;color:var(--ink2);text-align:left;font-size:13px}
.menu button:hover{background:var(--b50)}
.menu button.on{background:linear-gradient(90deg,var(--b100),#eaf9fb);color:var(--b700);font-weight:600;
  box-shadow:inset 3px 0 0 var(--b500)}
.menu svg{width:17px;height:17px;flex:0 0 17px;opacity:.8}
.navfoot{border-top:1px solid var(--line);padding:10px 12px;font-size:12px;color:var(--ink3)}
.navfoot .who{color:var(--ink2);font-weight:600}
.navfoot .row{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:6px}

/* 中栏 */
.main{min-width:0;padding:22px 26px 40px}
.pagehd{display:flex;align-items:flex-end;gap:12px;margin-bottom:16px}
.pagehd h2{margin:0;font-size:19px;letter-spacing:-.2px}
.pagehd .sub{font-size:12px;color:var(--ink3);padding-bottom:2px}
.pagehd .sp{flex:1}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin-bottom:14px;
  box-shadow:0 2px 10px rgba(0,36,72,.03)}
.card h3{margin:0 0 12px;font-size:14px;display:flex;align-items:center;gap:8px}
.card h3 .more{margin-left:auto;font-size:12px;color:var(--b600);font-weight:400;cursor:pointer}
.grid{display:grid;gap:12px}
.grid.k4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid.k2{grid-template-columns:repeat(2,minmax(0,1fr))}
.kpi{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.kpi .v{font-size:26px;font-weight:700;letter-spacing:-.5px;
  background:linear-gradient(120deg,var(--b900),var(--b600));-webkit-background-clip:text;background-clip:text;color:transparent}
.kpi .n{font-size:12px;color:var(--ink3);margin-top:2px}
.kpi .b{height:4px;border-radius:3px;background:var(--line2);margin-top:10px;overflow:hidden}
.kpi .b i{display:block;height:100%;background:linear-gradient(90deg,var(--b500),var(--b300))}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;background:linear-gradient(180deg,var(--b50),#f3fbfc);color:var(--ink3);font-weight:600;
  padding:9px 10px;border-bottom:1px solid var(--line);font-size:12px}
.tbl td{padding:9px 10px;border-bottom:1px solid var(--line2);color:var(--ink2)}
.tbl tr:hover td{background:#fbfeff}
.tbl tr:last-child td{border-bottom:0}
.empty{color:var(--ink3);font-size:13px;padding:18px 0;text-align:center}
.hint{font-size:12px;color:var(--ink4);margin-top:8px}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.toolbar select,.toolbar input{width:auto;min-width:120px}
.tag{display:inline-block;font-size:11px;padding:2px 8px;border-radius:20px;background:var(--b50);color:var(--b700)}
.tag.red{background:#fee2e2;color:#b91c1c}
.tag.yellow{background:#fef3c7;color:#a16207}
.tag.green{background:#dcfce7;color:#15803d}
.tag.gray{background:#eef2f6;color:#64748b}
.build{display:flex;gap:14px;align-items:flex-start;background:#fffdf7;border:1px dashed #f2c98a;border-radius:12px;padding:16px}
.build .ico{width:34px;height:34px;border-radius:9px;background:#fff3dd;color:#b45309;display:flex;align-items:center;
  justify-content:center;font-weight:700}
.build b{display:block;margin-bottom:4px;color:#8a4b00}
.build p{margin:0;color:#7a6a52;font-size:13px}

/* 右栏 */
.chat{border-left:1px solid var(--line);background:#fff;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.chat .hd{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px}
.chat .hd b{font-size:13px}
.chat .hd span{font-size:11px;color:var(--ink4);margin-left:auto}
.chat .ctx{padding:8px 16px;border-bottom:1px dashed var(--line);font-size:12px;color:var(--ink3)}
.chat .ctx b{color:var(--b700)}
.msgs{flex:1;overflow:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.chips{display:flex;gap:6px;flex-wrap:wrap;padding:0 16px 10px}
.chips button{border:1px solid var(--line);background:var(--b50);color:var(--b700);border-radius:20px;padding:5px 10px;font-size:12px}
.bub{max-width:92%;padding:9px 12px;border-radius:12px;font-size:13px;white-space:pre-wrap}
.bub.me{align-self:flex-end;background:linear-gradient(135deg,var(--b700),var(--b600));color:#fff;border-bottom-right-radius:4px}
.bub.bot{align-self:flex-start;background:var(--b50);color:var(--ink2);border-bottom-left-radius:4px}
.chat .ft{border-top:1px solid var(--line);padding:10px 12px;display:flex;gap:8px}
.chat .ft input{flex:1}
.chat .ft .btn{padding:10px 14px}

/* 学生：左筛选 */
.filters{padding:14px 14px 8px;overflow:auto}
.filters h4{margin:10px 0 6px;font-size:11px;color:var(--ink4);font-weight:600;letter-spacing:.4px}
.tree{font-size:13px}
.tree .chap{margin:2px 0 6px}
.tree .chap>b{display:block;padding:7px 8px;background:var(--b50);border-radius:8px;color:var(--b700);font-size:13px}
.tree .sec{padding:6px 8px 2px 12px;color:var(--ink3);font-size:12px}
.tree .pt{display:flex;align-items:center;gap:8px;padding:7px 8px 7px 18px;border-radius:8px;cursor:pointer}
.tree .pt:hover{background:#f7fdff}
.tree .pt.on{background:var(--b100);font-weight:600;color:var(--b700)}
.pt .dot{width:8px;height:8px;border-radius:50%;flex:0 0 8px;background:#cbd5e1}
.pt .dot.red{background:var(--bad)} .pt .dot.yellow{background:#facc15}
.pt .dot.green{background:var(--ok)} .pt .dot.gray{background:#cbd5e1}
.legend{display:flex;gap:12px;font-size:12px;color:var(--ink3);padding:6px 2px 12px}
.legend i{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:4px}
.legend .r{background:var(--bad)} .legend .y{background:#facc15} .legend .g{background:var(--ok)} .legend .n{background:#cbd5e1}

/* 学生右栏 */
.pointcard{padding:14px 16px;border-bottom:1px solid var(--line)}
.pointcard h3{margin:0 0 4px;font-size:15px}
.pointcard .path{font-size:11px;color:var(--ink4)}
.pointcard .metrics{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}
.pointcard .m{background:var(--b50);border-radius:10px;padding:8px 10px}
.pointcard .m b{display:block;font-size:16px;color:var(--b900)}
.pointcard .m span{font-size:11px;color:var(--ink3)}
.compose{padding:14px 16px}
.compose h4{margin:0 0 10px;font-size:13px}
.seg{display:flex;gap:6px;margin-bottom:10px}
.seg button{flex:1;padding:8px;border:1px solid var(--line);background:#fff;border-radius:9px;font-size:12px;color:var(--ink2)}
.seg button.on{border-color:var(--b300);background:var(--b50);color:var(--b700);font-weight:600}
.row2{display:flex;gap:8px;margin-bottom:10px}
.row2 select{flex:1}

/* 响应式 */
@media (max-width:1500px){ .shell{grid-template-columns:200px minmax(0,1fr) 340px} .shell.student{grid-template-columns:230px minmax(0,1fr) 360px} }
@media (max-width:1200px){ .shell{grid-template-columns:72px minmax(0,1fr) 320px} .brand b,.brand span,.menu button span,.navfoot .who,.navfoot .row{display:none} }
@media (max-width:960px){
  body{overflow-x:hidden}
  .shell,.shell.student{grid-template-columns:minmax(0,1fr)}
  .nav,.main,.chat{min-width:0;max-width:100%}
  .menu{min-width:0}
  .nav,.chat{position:static;height:auto}
  .chat{order:3}
  .brand{padding:12px 14px}
  .menu{display:flex;gap:6px;overflow-x:auto;padding:8px 12px;border-bottom:1px solid var(--line);flex:0 0 auto}
  .menu .grp{display:none}
  .menu button{flex:0 0 auto;white-space:nowrap;background:var(--b50);padding:8px 12px}
  .menu button span{display:inline}
  .navfoot{display:none}
  .main{padding:14px 14px 28px;overflow-x:hidden}
  .pagehd{flex-wrap:wrap;gap:8px}
  .grid.k4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid.k2{grid-template-columns:1fr}
  .card{overflow:auto}
  .filters{display:flex;gap:8px;overflow-x:auto;padding:10px 12px}
  .filters h4{display:none}
  .filters select{min-width:110px;width:auto}
  .filters .hint{display:none}
}

/* ---------- 一体机（30 寸级，尺寸不一，全部用相对单位） ---------- */
body.kiosk{font-size:clamp(17px,1.15vw,25px)}
body.kiosk .shell.student{grid-template-columns:clamp(280px,20vw,360px) minmax(0,1fr) clamp(400px,28vw,560px)}
body.kiosk .brand{padding:18px 18px 16px}
body.kiosk .brand img{width:clamp(44px,3.2vw,60px);height:clamp(44px,3.2vw,60px)}
body.kiosk .brand b{font-size:clamp(17px,1.2vw,24px)}
body.kiosk .brand span{font-size:clamp(12px,.85vw,16px)}
body.kiosk .filters{padding:clamp(16px,1.5vw,26px)}
body.kiosk .filters h4{font-size:clamp(13px,.9vw,17px);margin:14px 0 8px}
body.kiosk .filters select{padding:clamp(12px,1vw,18px);font-size:clamp(16px,1.1vw,22px);min-height:clamp(48px,3.4vw,60px)}
body.kiosk .pagehd h2{font-size:clamp(24px,1.8vw,34px)}
body.kiosk .pagehd .sub{font-size:clamp(13px,.9vw,18px)}
body.kiosk .card{padding:clamp(18px,1.6vw,30px)}
body.kiosk .card h3{font-size:clamp(18px,1.25vw,25px)}
body.kiosk .tree .chap>b{font-size:clamp(18px,1.25vw,25px);padding:clamp(10px,.8vw,16px) 14px}
body.kiosk .tree .sec{font-size:clamp(15px,1vw,20px);padding:8px 10px 4px 14px}
body.kiosk .tree .pt{padding:clamp(10px,.85vw,16px) 12px clamp(10px,.85vw,16px) 20px;min-height:clamp(54px,4vw,72px);font-size:clamp(17px,1.15vw,24px);gap:12px}
body.kiosk .pt .dot{width:clamp(12px,.9vw,16px);height:clamp(12px,.9vw,16px);flex-basis:clamp(12px,.9vw,16px)}
body.kiosk .legend{font-size:clamp(14px,.95vw,19px);gap:clamp(14px,1.1vw,24px);padding:8px 2px 14px}
body.kiosk .legend i{width:12px;height:12px}
body.kiosk .pointcard{padding:clamp(18px,1.6vw,30px)}
body.kiosk .pointcard h3{font-size:clamp(22px,1.6vw,32px)}
body.kiosk .pointcard .path{font-size:clamp(13px,.9vw,18px)}
body.kiosk .pointcard .metrics{gap:clamp(12px,1vw,20px);margin:16px 0}
body.kiosk .pointcard .m{padding:clamp(12px,1vw,18px)}
body.kiosk .pointcard .m b{font-size:clamp(20px,1.5vw,30px)}
body.kiosk .pointcard .m span{font-size:clamp(12px,.85vw,17px)}
body.kiosk .compose{padding:clamp(18px,1.6vw,30px)}
body.kiosk .compose h4{font-size:clamp(17px,1.2vw,24px);margin-bottom:12px}
body.kiosk .seg{gap:8px;margin-bottom:14px}
body.kiosk .seg button{padding:clamp(14px,1.1vw,20px) 8px;font-size:clamp(15px,1vw,20px);min-height:clamp(54px,4vw,70px)}
body.kiosk .row2{gap:10px;margin-bottom:14px}
body.kiosk .row2 select{padding:clamp(12px,1vw,18px);font-size:clamp(15px,1.05vw,21px);min-height:clamp(48px,3.4vw,60px)}
body.kiosk .btn{padding:clamp(16px,1.2vw,22px);font-size:clamp(17px,1.15vw,24px);min-height:clamp(56px,4.2vw,74px)}
body.kiosk .navfoot{font-size:clamp(13px,.9vw,18px);padding:12px 16px}
body.kiosk .hint{font-size:clamp(13px,.9vw,18px)}
body.kiosk .tag{font-size:clamp(13px,.9vw,18px);padding:5px 12px}

/* 竖屏一体机：筛选变顶部横条，详情变底部抽屉 */
@media (max-aspect-ratio:1/1){
  body.kiosk{overflow:hidden}
  body.kiosk .shell.student{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr) minmax(280px,38vh);height:100vh;min-height:0}
  body.kiosk .shell.student .nav{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line)}
  body.kiosk .shell.student .filters{display:flex;gap:10px;align-items:flex-end;overflow:auto;padding:10px 14px}
  body.kiosk .shell.student .filters h4{display:none}
  body.kiosk .shell.student .filters select{min-width:120px;width:auto}
  body.kiosk .shell.student .filters .hint{display:none}
  body.kiosk .shell.student .nav .brand{border-bottom:0}
  body.kiosk .shell.student .chat{position:static;height:auto;overflow:auto;border-left:0;border-top:1px solid var(--line)}
  body.kiosk .shell.student .main{overflow:auto}
  body.kiosk .shell.student .nav .navfoot{display:none}
}