/* Web 后台样式 —— 严格照搬 Web端设计样式与交互流程-visual.html 原型 */
* { margin:0; padding:0; box-sizing:border-box; font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif; }
body { background:#E9EDF3; color:#1F2937; }
.app { display:flex; min-height:100vh; }
/* 顶部栏 */
.topbar { position:fixed; top:0; left:0; right:0; height:56px; background:#fff; border-bottom:1px solid #E5E7EB; display:flex; align-items:center; padding:0 20px; z-index:10; }
.topbar .logo { font-weight:700; color:#2563EB; font-size:17px; }
.topbar .sep { flex:1; }
.topbar .org { font-size:13px; color:#6B7280; margin-right:16px; }
.topbar .bell { position:relative; cursor:pointer; margin-right:18px; font-size:15px; }
.topbar .bell .dot { position:absolute; top:-3px; right:-6px; background:#DC2626; color:#fff; font-size:10px; border-radius:8px; padding:0 4px; }
.topbar .user { font-size:13px; color:#374151; cursor:pointer; }
/* 左侧导航 */
.sidebar { position:fixed; top:56px; bottom:0; left:0; width:200px; background:#fff; border-right:1px solid #E5E7EB; padding-top:12px; overflow-y:auto; }
.sidebar .nav-group { margin-bottom:10px; }
.sidebar .nav-title { font-size:11px; color:#9CA3AF; padding:6px 18px; }
.sidebar .nav-item { padding:10px 18px; font-size:14px; color:#374151; cursor:pointer; border-left:3px solid transparent; }
.sidebar .nav-item:hover { background:#F3F6FC; }
.sidebar .nav-item.active { color:#2563EB; background:#EEF3FE; border-left-color:#2563EB; font-weight:600; }
.sidebar .nav-item.disabled { color:#B0B8C4; cursor:not-allowed; }
/* 主内容 */
.main { margin-left:200px; margin-top:56px; padding:20px; flex:1; }
.page { display:none; }
.page.active { display:block; }
.card { background:#fff; border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,.06); padding:16px; margin-bottom:16px; }
.card h3 { font-size:15px; margin-bottom:12px; color:#111827; }
.row { display:flex; gap:16px; flex-wrap:wrap; }
.metric { flex:1; min-width:150px; background:#fff; border-radius:8px; padding:16px; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.metric .label { font-size:12px; color:#6B7280; }
.metric .num { font-size:22px; font-weight:700; color:#111827; margin-top:6px; }
.metric .sub { font-size:11px; color:#9CA3AF; margin-top:4px; }
.btn { display:inline-block; background:#2563EB; color:#fff; border:none; border-radius:6px; padding:8px 16px; font-size:13px; cursor:pointer; }
.btn.ghost { background:#fff; color:#2563EB; border:1px solid #2563EB; }
.btn.gray { background:#F3F4F6; color:#374151; }
.btn.danger { background:#DC2626; }
.toolbar { display:flex; gap:10px; align-items:center; margin-bottom:14px; flex-wrap:wrap; }
.toolbar select, .toolbar input { padding:6px 10px; border:1px solid #D1D5DB; border-radius:6px; font-size:13px; background:#fff; }
.toolbar .spacer { flex:1; }
/* 表格 */
table.tb { width:100%; border-collapse:collapse; font-size:13px; }
table.tb th { background:#F3F4F6; padding:9px 10px; text-align:left; color:#374151; }
table.tb td { padding:9px 10px; border-top:1px solid #F3F4F6; }
table.tb tr:hover td { background:#FAFCFF; }
.tag { display:inline-block; padding:2px 8px; border-radius:10px; font-size:11px; }
.tag.blue { background:#E0EAFF; color:#1D4ED8; }
.tag.green { background:#DCFCE7; color:#15803D; }
.tag.orange { background:#FEF3C7; color:#B45309; }
.tag.red { background:#FEE2E2; color:#B91C1C; }
.tag.gray { background:#F3F4F6; color:#6B7280; }
.tag.yellow { background:#FEF9C3; color:#A16207; }
/* 时间线 */
.tl { padding-left:6px; }
.tl-year { padding:8px 0; cursor:pointer; font-size:15px; font-weight:600; color:#111827; }
.tl-year .arr { display:inline-block; transition:.2s; margin-right:6px; color:#9CA3AF; }
.tl-year.open .arr { transform:rotate(90deg); }
.tl-month { padding:7px 0 7px 26px; cursor:pointer; font-size:14px; color:#374151; display:none; }
.tl-month .sum { float:right; color:#6B7280; font-size:12px; }
.tl-month.open { color:#2563EB; }
.tl-day { padding:6px 0 6px 52px; cursor:pointer; font-size:13px; color:#4B5563; display:none; }
.tl-day .cnt { float:right; color:#2563EB; font-size:12px; }
.tl-course { display:none; margin:6px 0 6px 66px; background:#fff; border:1px solid #E5E7EB; border-radius:8px; padding:10px 12px; }
.tl-course .c-title { font-size:13px; font-weight:600; }
.tl-course .c-meta { font-size:12px; color:#6B7280; margin-top:4px; display:flex; gap:14px; flex-wrap:wrap; }
/* 排课网格 */
.grid { border-collapse:collapse; width:100%; font-size:12px; }
.grid th, .grid td { border:1px solid #E5E7EB; padding:8px; text-align:center; }
.grid th { background:#F3F4F6; color:#374151; }
.grid td { height:54px; vertical-align:top; cursor:pointer; }
.grid .slot { background:#E0EAFF; color:#1D4ED8; border-radius:6px; padding:4px 6px; font-size:11px; margin-bottom:4px; }
.grid .slot.conflict { background:#FEE2E2; color:#B91C1C; }
.grid .slot.alert { background:#FEF9C3; color:#A16207; }
/* 平台后台 */
.inst-row { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid #F3F4F6; }
/* 图表示意 */
.bars { display:flex; align-items:flex-end; gap:14px; height:130px; padding:10px 0 0; }
.bars .bar { width:34px; background:#BFD3FE; border-radius:4px 4px 0 0; position:relative; }
.bars .bar b { position:absolute; top:-20px; left:50%; transform:translateX(-50%); font-size:11px; color:#374151; }
.bars .bar span { position:absolute; bottom:-18px; left:50%; transform:translateX(-50%); font-size:10px; color:#9CA3AF; }
.hint { font-size:11px; color:#9CA3AF; margin-top:6px; }
/* 弹窗 */
.mask { position:fixed; inset:0; background:rgba(17,24,39,.45); z-index:50; display:none; align-items:center; justify-content:center; }
.mask.show { display:flex; }
.modal { background:#fff; border-radius:8px; padding:18px; width:420px; max-width:92vw; max-height:80vh; overflow-y:auto; box-shadow:0 8px 30px rgba(0,0,0,.18); }
.modal h3 { font-size:15px; margin-bottom:12px; color:#111827; }
.modal .fm { margin-bottom:10px; }
.modal label { display:block; font-size:12px; color:#6B7280; margin-bottom:4px; }
.modal input, .modal select { width:100%; padding:8px 10px; border:1px solid #D1D5DB; border-radius:6px; font-size:13px; }
.modal .row2 { display:flex; gap:10px; }
.toast { position:fixed; top:70px; left:50%; transform:translateX(-50%); background:#111827; color:#fff; font-size:13px; padding:9px 18px; border-radius:6px; z-index:99; display:none; }
.print-view { display:none; }
@media print { body * { visibility:hidden; } .print-view, .print-view * { visibility:visible; } .print-view { display:block; position:absolute; left:0; top:0; width:100%; } }