/* ClassHub 班级资料站 —— 样式 */
:root{
  --bg:#f5f7fb; --panel:#ffffff; --line:#e4e8f0; --line-2:#eef1f7;
  --text:#1b2230; --muted:#7a8699; --brand:#2f6fed; --brand-d:#1f55c9;
  --ok:#12a150; --err:#e0483d; --warn:#b8860b;
  --radius:12px; --shadow:0 1px 2px rgba(23,35,64,.05), 0 8px 24px rgba(23,35,64,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text); font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",
  "PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased; min-height:100vh; display:flex; flex-direction:column;
}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
code{background:#eef1f7; padding:1px 5px; border-radius:5px; font-size:.9em;
     font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace}
.wrap{width:100%; max-width:1360px; margin:0 auto; padding:0 24px}
.muted{color:var(--muted)}
.small{font-size:12.5px}
h1{font-size:22px; margin:0 0 4px}
h2{font-size:16px; margin:0 0 10px}
h3{font-size:14px; margin:0 0 8px}

/* ---------- 顶栏 ---------- */
.topbar{background:var(--panel); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50}
.topbar-inner{display:flex; align-items:center; gap:18px; height:62px}
.brand{display:flex; align-items:center; gap:10px; color:var(--text); flex:0 0 auto}
.brand:hover{text-decoration:none}
.logo{font-size:24px}
.brand-text{display:flex; flex-direction:column; line-height:1.15}
.brand-text strong{font-size:15.5px}
.brand-text small{color:var(--muted); font-size:11.5px}
.search{flex:1 1 auto; display:flex; max-width:520px; background:#f1f4fa; border:1px solid var(--line);
        border-radius:10px; overflow:hidden}
.search input{flex:1; border:0; background:transparent; padding:9px 12px; font-size:14px; outline:none; color:var(--text)}
.search button{border:0; background:var(--brand); color:#fff; padding:0 16px; cursor:pointer; font-size:14px}
.search button:hover{background:var(--brand-d)}
.nav{display:flex; align-items:center; gap:14px; margin-left:auto; font-size:14px; flex:0 0 auto}
.nav a{color:#41506a}
.nav a:hover{color:var(--brand)}

/* ---------- 按钮 ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px;
     padding:8px 14px; border-radius:9px; border:1px solid var(--line); background:#fff;
     color:#2a3346; font-size:14px; cursor:pointer; line-height:1.2; white-space:nowrap;
     transition:.15s; font-family:inherit}
.btn:hover{background:#f4f7fd; text-decoration:none; border-color:#cfd9ea}
.btn.primary{background:var(--brand); border-color:var(--brand); color:#fff}
.btn.primary:hover{background:var(--brand-d); border-color:var(--brand-d)}
.btn.danger{color:var(--err); border-color:#f3cfcc}
.btn.danger:hover{background:#fdf1f0}
.btn.small{padding:5px 10px; font-size:13px; border-radius:8px}
.btn.block{width:100%}

/* ---------- flash ---------- */
.flash-wrap{margin-top:14px}
.flash{padding:10px 14px; border-radius:10px; margin-bottom:8px; font-size:14px;
       background:#eef4ff; border:1px solid #d7e3ff; color:#22468f}
.flash.ok{background:#eaf8f0; border-color:#c9ecd8; color:#0d7a3c}
.flash.error{background:#fdf0ef; border-color:#f5d3cf; color:#b3362c}

/* ---------- 布局 ---------- */
.layout{display:grid; grid-template-columns:238px minmax(0,1fr); gap:22px; padding-top:22px; padding-bottom:44px; flex:1}
/* 没有侧栏的页面（登录/管理/分享/错误）：单列铺满 */
.layout.no-sidebar{grid-template-columns:minmax(0,1fr)}
.sidebar{position:sticky; top:84px; align-self:start}
.sidebar h3{color:var(--muted); font-weight:600; font-size:12px; letter-spacing:.08em; text-transform:uppercase}
.subject-list{list-style:none; margin:0; padding:0}
.subject-list a{display:flex; justify-content:space-between; align-items:center;
  padding:8px 11px; border-radius:9px; color:#3a465c; font-size:14px}
.subject-list a:hover{background:#eef2fa; text-decoration:none}
.subject-list a.active{background:var(--brand); color:#fff}
.subject-list a.active .count{background:rgba(255,255,255,.25); color:#fff}
.count{font-size:11.5px; color:var(--muted); background:#eef1f7; padding:1px 7px; border-radius:99px}
.side-stat{margin-top:16px; padding:11px 12px; background:var(--panel); border:1px solid var(--line);
  border-radius:10px; font-size:12.5px; color:var(--muted); line-height:1.8}
.side-empty{font-size:12.5px; color:var(--muted); line-height:1.7; margin:10px 0 0; padding:0 11px}

/* ---------- 列表头 ---------- */
.content-head{display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:14px; flex-wrap:wrap}
.sortbar{display:flex; gap:10px; align-items:center; font-size:13px}
.sortbar a{color:var(--muted); padding:4px 8px; border-radius:7px}
.sortbar a:hover{background:#e9eef9; text-decoration:none; color:var(--brand)}
.sortbar a.on{background:#e6eefc; color:var(--brand); font-weight:600}

/* ---------- 文件行 ---------- */
.file-list{display:flex; flex-direction:column; gap:10px}
.file-row{display:grid; grid-template-columns:18px 52px minmax(0,1fr) auto; gap:14px; align-items:center;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px;
  transition:.15s}
.file-row.no-pick{grid-template-columns:52px minmax(0,1fr) auto}
.file-row.picked{border-color:var(--brand); background:#f6f9ff; box-shadow:0 0 0 2px rgba(47,111,237,.12)}
.fselect{display:flex; align-items:center; justify-content:center}
.fselect input{width:16px; height:16px; accent-color:var(--brand); cursor:pointer}
.file-row:hover{box-shadow:var(--shadow); border-color:#d8e1f0}
.ficon{width:52px; height:52px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; letter-spacing:.02em; color:#fff; background:#8b97ab; text-align:center;
  padding:0 4px; overflow:hidden}
.kind-pdf .ficon{background:#e0483d}
.kind-image .ficon{background:#12a150}
.kind-video .ficon{background:#7c4dff}
.kind-audio .ficon{background:#0097a7}
.kind-text .ficon{background:#4b5c74}
.kind-office .ficon{background:#2f6fed}
.kind-legacy-office .ficon{background:#5b7ba8}
.kind-archive .ficon{background:#b8860b}
.ftitle{margin:0; font-size:15.5px; font-weight:600; line-height:1.4; word-break:break-word}
.ftitle a{color:var(--text)}
.ftitle a:hover{color:var(--brand); text-decoration:none}
.ftitle .ext{font-size:11.5px; color:var(--muted); font-weight:400; margin-left:6px}
.pin{margin-right:2px}
.fmeta{display:flex; flex-wrap:wrap; gap:4px 12px; font-size:12.5px; color:var(--muted); margin-top:3px}
.fmeta .tag{background:#eef2fa; color:#3f5c96; padding:1px 8px; border-radius:99px; font-size:12px}
.fmeta .tag:hover{background:#e2eafb; text-decoration:none}
.fmeta .note{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.factions{display:flex; gap:7px; align-items:center}
.more{position:relative}
.more summary{list-style:none; cursor:pointer; padding:4px 8px; border-radius:8px; color:var(--muted);
  border:1px solid var(--line); background:#fff}
.more summary::-webkit-details-marker{display:none}
.more[open] summary,.more summary:hover{background:#eef2fa; color:var(--brand)}
.more-menu{position:absolute; right:0; top:36px; z-index:40; width:268px; background:#fff;
  border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:12px;
  display:flex; flex-direction:column; gap:10px}
.more-menu form{display:flex; flex-direction:column; gap:7px}
.more-menu label{display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--muted)}
.more-menu label.inline{flex-direction:row; align-items:center; gap:6px}
.more-menu input[type=text],.more-menu input:not([type]){border:1px solid var(--line); border-radius:7px;
  padding:6px 8px; font-size:13px; font-family:inherit; color:var(--text)}

/* ---------- 预览页 ---------- */
.viewer-head{display:flex; justify-content:space-between; gap:18px; align-items:flex-start;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; margin-bottom:16px}
.viewer-head h1{font-size:20px; margin:2px 0 6px}
.back{font-size:12.5px; color:var(--muted)}
.note-line{margin:8px 0 0; font-size:13px; color:#4b5c74; background:#f6f8fd; padding:7px 10px; border-radius:8px}
.viewer-actions{display:flex; gap:8px; align-items:center; flex:0 0 auto}
.viewer-actions form{display:inline}
.viewer{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.pdf-frame{width:100%; height:calc(100vh - 260px); min-height:520px; border:0; display:block; background:#525659}
.img-stage{display:flex; justify-content:center; padding:18px; background:#f0f3f9}
.img-stage img{max-width:100%; max-height:calc(100vh - 240px); border-radius:8px; box-shadow:var(--shadow)}
.media{width:100%; max-height:calc(100vh - 240px); display:block; background:#000}
.audio-stage{display:flex; flex-direction:column; align-items:center; gap:14px; padding:46px 18px}
.audio-icon{font-size:44px}
.audio-stage audio{width:min(560px,100%)}
.code{margin:0; padding:18px; font-size:13.5px; line-height:1.65; overflow:auto; max-height:calc(100vh - 240px);
  font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace; white-space:pre-wrap; word-break:break-word;
  background:#fbfcfe; color:#1f2937; tab-size:4}
.doc-body{padding:24px 30px; max-height:calc(100vh - 240px); overflow:auto; line-height:1.75}
.doc-body h1,.doc-body h2,.doc-body h3{margin:1.1em 0 .5em}
.doc-body p{margin:.55em 0}
.doc-table{border-collapse:collapse; margin:12px 0; font-size:13.5px}
.doc-table td,.doc-table th{border:1px solid var(--line); padding:6px 10px; vertical-align:top}
.doc-table tr:nth-child(even) td{background:#fafbfe}
.no-preview{padding:52px 20px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:12px}
.no-preview p{margin:0}
.hint{font-size:12.5px; color:var(--muted); text-align:center; padding:8px}
.empty{background:var(--panel); border:1px dashed var(--line); border-radius:var(--radius);
  padding:56px 20px; text-align:center; color:var(--muted); display:flex; flex-direction:column; align-items:center; gap:12px}
.empty-icon{font-size:34px; color:#b9c4d6; font-weight:700}

/* ---------- 表单 / 卡片 ---------- */
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px; margin-bottom:16px}
.card.warn{border-color:#f0e0b8; background:#fffdf5}
.upload-form{display:flex; flex-direction:column; gap:14px}
.dropzone{border:2px dashed #cbd6e8; border-radius:var(--radius); padding:30px; text-align:center;
  cursor:pointer; transition:.15s; background:#fafcff}
.dropzone.hot{border-color:var(--brand); background:#eef4ff}
.dz-icon{font-size:28px; margin-bottom:6px}
.dz-inner p{margin:3px 0}
.picked{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.picked li{display:flex; justify-content:space-between; gap:12px; font-size:13px;
  background:#f6f8fd; border:1px solid var(--line-2); border-radius:8px; padding:6px 10px}
.picked em{color:var(--muted); font-style:normal; flex:0 0 auto}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
label{display:flex; flex-direction:column; gap:5px; font-size:13px; color:#43506a}
label.inline{flex-direction:row; align-items:center; gap:8px}
input[type=text],input[type=password],input[type=search],input:not([type]),select{
  border:1px solid var(--line); border-radius:9px; padding:9px 11px; font-size:14px; font-family:inherit;
  color:var(--text); background:#fff; outline:none; width:100%}
input:focus,select:focus{border-color:var(--brand); box-shadow:0 0 0 3px rgba(47,111,237,.12)}
.form-actions{display:flex; align-items:center; gap:10px}
.progress{height:7px; background:#eef1f7; border-radius:99px; overflow:hidden}
.progress .bar{height:100%; width:0; background:linear-gradient(90deg,#2f6fed,#5b9dff); transition:width .2s}
.login-wrap{display:flex; justify-content:center; padding:40px 0}
.login-card{width:min(420px,100%); display:flex; flex-direction:column; gap:12px}
.login-card h1{font-size:19px; margin:0}
.login-card p{margin:0}
.inline-form{display:flex; gap:10px; max-width:420px}

/* ---------- 管理后台 ---------- */
.stat-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:16px}
.stat{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px;
  display:flex; flex-direction:column; gap:2px}
.stat b{font-size:22px}
.stat span{color:var(--muted); font-size:12.5px}
.table-wrap{overflow:auto}
.admin-table{width:100%; border-collapse:collapse; font-size:13.5px}
.admin-table th,.admin-table td{text-align:left; padding:9px 10px; border-bottom:1px solid var(--line-2); vertical-align:top}
.admin-table th{color:var(--muted); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.05em}
.admin-table tr:hover td{background:#fafbfe}
.admin-table .ops{display:flex; gap:6px}
.admin-table .ops form{display:inline}

/* ---------- 页脚 ---------- */
.footer{border-top:1px solid var(--line); background:var(--panel); padding:16px 0; color:var(--muted); font-size:12.5px; margin-top:auto}

/* ---------- 响应式 ---------- */
@media (max-width:900px){
  .layout{grid-template-columns:1fr; gap:14px}
  .sidebar{position:static; order:2}
  .subject-list{display:flex; flex-wrap:wrap; gap:6px}
  .subject-list a{background:#eef2fa; padding:5px 10px; font-size:13px}
  .subject-list a.active{background:var(--brand)}
  .side-stat{display:none}
  .topbar-inner{flex-wrap:wrap; height:auto; padding:10px 0; gap:10px}
  .search{order:3; flex:1 0 100%; max-width:none}
  .nav{font-size:13px}
  .file-row{grid-template-columns:18px 44px minmax(0,1fr); grid-template-areas:"sel icon main" "sel act act"}
  .file-row.no-pick{grid-template-columns:44px minmax(0,1fr); grid-template-areas:"icon main" "act act"}
  .fselect{grid-area:sel}
  .ficon{width:44px;height:44px;grid-area:icon}
  .fmain{grid-area:main}
  .factions{grid-area:act; justify-content:flex-end}
  .grid2{grid-template-columns:1fr}
  .stat-cards{grid-template-columns:1fr}
  .viewer-head{flex-direction:column}
  .more-menu{position:fixed; left:12px; right:12px; width:auto; top:auto}
  .doc-body{padding:16px}
  .pdf-frame{height:70vh}
}

/* ---------- 成员 / 分享 / 管理补充 ---------- */
.banner{background:#eef4ff;border:1px solid #d7e3ff;color:#22468f;border-radius:10px;
  padding:10px 14px;font-size:13.5px;margin-bottom:14px}
.banner a{font-weight:600}
.share-card{display:grid;grid-template-columns:280px minmax(0,1fr);gap:26px;align-items:start}
.qr-box{text-align:center}
.qr-box img{border:1px solid var(--line);border-radius:12px;padding:10px;background:#fff}
.share-info h2{margin-top:0}
.share-info p{margin:12px 0 6px;font-size:13.5px;color:#43506a}
.copy-row{display:flex;gap:8px;max-width:560px}
.copy-row input{flex:1;font-size:13px}
.settings-form{display:flex;flex-direction:column;gap:12px}
label.inline-check{flex-direction:row;align-items:center;gap:8px;font-size:13px;color:#43506a}
label.inline-check span{display:flex;align-items:center;gap:8px}
.subject-manage{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:8px;max-height:540px;overflow:auto}
.subject-item{display:flex;align-items:center;gap:10px;padding:7px 10px;border:1px solid var(--line-2);
  border-radius:9px;background:#fbfcfe}
.subject-name{flex:1 1 auto;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inline-form-mini{display:flex;gap:6px;align-items:center}
.inline-form-mini input{width:120px;padding:5px 8px;font-size:12.5px}
@media (max-width:900px){
  .share-card{grid-template-columns:1fr;gap:16px}
  .qr-box img{width:200px;height:200px}
  .subject-item{flex-wrap:wrap}
  .subject-manage{grid-template-columns:1fr;max-height:none}
  .inline-form-mini input{width:90px}
}

/* ---------- 分类点选（上传页） ---------- */
.subject-field{display:flex; flex-direction:column; gap:6px}
.field-label{font-size:13px; color:#43506a}
.field-label em{font-style:normal; color:var(--muted); font-size:12px; margin-left:4px}
.subject-picker{display:flex; flex-wrap:wrap; gap:7px; padding:10px; background:#fbfcfe;
  border:1px solid var(--line); border-radius:10px; max-height:168px; overflow:auto}
.chip{border:1px solid var(--line); background:#fff; color:#3a465c; border-radius:99px;
  padding:6px 13px; font-size:13px; cursor:pointer; font-family:inherit; transition:.12s; line-height:1.3}
.chip:hover{background:#eef2fa; border-color:#cfd9ea}
.chip.active{background:var(--brand); border-color:var(--brand); color:#fff; font-weight:600}
.chip-add{border-style:dashed; color:var(--brand)}
.new-subject{margin-top:2px; border:1px solid var(--brand); border-radius:9px; padding:8px 11px;
  font-size:13.5px; font-family:inherit; width:100%; outline:none}

/* ---------- 批量操作条 ---------- */
.batchbar{position:fixed; left:50%; transform:translateX(-50%); bottom:20px; z-index:60;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center;
  max-width:min(760px, calc(100% - 24px)); background:#1b2230; color:#fff;
  padding:11px 16px; border-radius:14px; box-shadow:0 12px 36px rgba(15,23,42,.38); font-size:13.5px}
.batchbar b{color:#7fb0ff}
.batchbar select{border:0; border-radius:8px; padding:7px 10px; font-size:13.5px;
  font-family:inherit; color:#1b2230; background:#fff; max-width:180px}
.batchbar .btn.small{background:#fff; color:#1b2230; border-color:transparent}
.batchbar .btn.small:hover{background:#e9eef9}
.batchbar .btn.primary{background:var(--brand); color:#fff}
@media (max-width:900px){
  .batchbar{bottom:12px; padding:10px 12px; gap:8px; font-size:13px}
  .batchbar select{max-width:140px}
  .subject-picker{max-height:132px}
}

/* ---------- 分类总览（首页卡片） ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.cat-card{display:flex;align-items:center;gap:14px;padding:16px 18px;background:var(--panel);
  border:1px solid var(--line);border-radius:14px;color:var(--text);text-decoration:none;
  transition:.16s;position:relative}
.cat-card:hover{box-shadow:var(--shadow);border-color:#cfd9ea;transform:translateY(-2px);text-decoration:none}
.cat-icon{width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  font-size:23px;background:#eef2fa;flex:0 0 auto}
.cat-body{min-width:0}
.cat-body h3{margin:0 0 3px;font-size:16px;font-weight:600;color:var(--text)}
.cat-body p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.55}
.cat-arrow{margin-left:auto;color:#b9c4d6;font-size:18px;transition:.16s}
.cat-card:hover .cat-arrow{color:var(--brand);transform:translateX(3px)}
.cat-all{background:linear-gradient(135deg,#f2f7ff,#e9f1ff);border-color:#d7e3ff}
.cat-all .cat-body h3{color:var(--brand-d)}
@media (max-width:900px){
  .cat-grid{grid-template-columns:1fr;gap:10px}
  .cat-card{padding:14px}
  .cat-icon{width:42px;height:42px;font-size:20px}
}