/* 成绩管理系统 v3.0 — 移动优先简洁风格 */
:root {
  --primary: #4f6ef7; --primary-dark: #3b54d4; --bg: #f5f6fa; --card: #fff;
  --text: #1a1a2e; --text-secondary: #6b7280; --border: #e5e7eb;
  --success: #10b981; --danger: #ef4444; --warning: #f59e0b;
  --radius: 10px; --shadow: 0 1px 3px rgba(0,0,0,.06);
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;
  background:var(--bg); color:var(--text); line-height:1.5; min-height:100vh; font-size:14px;
}
.layout { display:flex; min-height:100vh; }
.sidebar {
  width:220px; background:var(--card); border-right:1px solid var(--border);
  padding:16px 0; position:fixed; top:0; left:0; bottom:0; z-index:100; transition:transform .25s;
  overflow-y:auto;
}
.sidebar-logo { padding:0 16px 14px; font-size:16px; font-weight:700; color:var(--primary); border-bottom:1px solid var(--border); margin-bottom:8px; display:flex; justify-content:space-between; align-items:center; }
.sidebar-close { display:none; background:none; border:none; font-size:20px; cursor:pointer; color:var(--text-secondary); padding:0 4px; }
.sidebar a { display:block; padding:10px 16px; color:var(--text); text-decoration:none; font-size:13px; transition:.15s; }
.sidebar a:hover,.sidebar a.active { background:#eef1ff; color:var(--primary); font-weight:600; }
.sidebar-user { padding:14px 16px; border-top:1px solid var(--border); margin-top:auto; font-size:12px; color:var(--text-secondary); position:absolute; bottom:0; width:100%; background:var(--card); }

.main { flex:1; margin-left:220px; padding:20px; min-width:0; }
.main-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; flex-wrap:wrap; gap:6px; }
.main-header h1 { font-size:17px; white-space:nowrap; }
.main-header .btn { font-size:12px; padding:6px 12px; white-space:nowrap; }
.menu-toggle { display:none; background:none; border:none; font-size:22px; cursor:pointer; padding:2px 6px; }

/* Cards */
.card { background:var(--card); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); margin-bottom:16px; }
.card h3 { margin-bottom:12px; font-size:15px; }

/* Inline Stats */
.inline-stats { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.inline-stat { background:var(--card); border-radius:var(--radius); padding:10px 16px; box-shadow:var(--shadow); display:flex; align-items:center; gap:8px; flex:1; min-width:120px; }
.inline-stat .num { font-size:22px; font-weight:700; color:var(--primary); }
.inline-stat .lbl { font-size:12px; color:var(--text-secondary); }

/* Stat Grid */
.stat-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap:10px; margin-bottom:16px; }
.stat-card { background:var(--card); border-radius:var(--radius); padding:14px; box-shadow:var(--shadow); text-align:center; }
.stat-card .num { font-size:24px; font-weight:700; color:var(--primary); }
.stat-card .label { font-size:12px; color:var(--text-secondary); margin-top:2px; }

/* Forms */
.form-group { margin-bottom:12px; }
.form-group label { display:block; font-size:13px; font-weight:600; margin-bottom:4px; }
.form-group input,.form-group select,.form-group textarea {
  width:100%; padding:8px 12px; border:1px solid var(--border); border-radius:6px;
  font-size:14px; transition:border-color .2s; font-family:inherit;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus {
  outline:none; border-color:var(--primary); box-shadow:0 0 0 2px rgba(79,110,247,.1);
}
textarea { min-height:70px; resize:vertical; }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:4px; padding:7px 14px; border:none; border-radius:6px; font-size:13px; font-weight:600; cursor:pointer; transition:.15s; text-decoration:none; line-height:1.4; }
.btn-primary { background:var(--primary); color:#fff; } .btn-primary:hover { background:var(--primary-dark); }
.btn-danger { background:var(--danger); color:#fff; } .btn-danger:hover { opacity:.85; }
.btn-success { background:var(--success); color:#fff; }
.btn-outline { background:transparent; border:1px solid var(--border); color:var(--text); }
.btn-sm { padding:4px 10px; font-size:12px; }
.btn-xs { padding:2px 8px; font-size:11px; }

/* Tables */
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; }
table { width:100%; border-collapse:collapse; font-size:13px; min-width:600px; }
th,td { padding:6px 8px; text-align:left; border-bottom:1px solid var(--border); white-space:nowrap; }
th { background:#f9fafb; font-weight:600; color:var(--text-secondary); font-size:12px; position:sticky; top:0; z-index:1; }
td { font-size:13px; }
tr:hover { background:#f8faff; }
.sortable { cursor:pointer; user-select:none; }
.sortable::after { content:' ↕'; font-size:10px; color:#ccc; }
.sortable.asc::after { content:' ↑'; color:var(--primary); }
.sortable.desc::after { content:' ↓'; color:var(--primary); }

/* Tabs */
.tabs { display:flex; gap:4px; margin-bottom:16px; border-bottom:2px solid var(--border); }
.tab-btn { padding:8px 16px; border:none; background:none; font-size:13px; font-weight:600; color:var(--text-secondary); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; transition:.15s; }
.tab-btn.active { color:var(--primary); border-bottom-color:var(--primary); }

/* Messages */
.msg { padding:10px 14px; border-radius:6px; margin-bottom:12px; display:none; font-size:13px; }
.msg.success { background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0; }
.msg.error { background:#fef2f2; color:#991b1b; border:1px solid #fecaca; }

/* Charts */
.chart-container { position:relative; width:100%; max-height:350px; }
.charts-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }

/* Badges */
.badge { display:inline-block; padding:1px 6px; border-radius:10px; font-size:11px; font-weight:600; }
.badge-green { background:#d1fae5; color:#065f46; } .badge-red { background:#fee2e2; color:#991b1b; }
.badge-blue { background:#dbeafe; color:#1e40af; } .badge-gray { background:#f3f4f6; color:#4b5563; }

/* Login */
.login-page { display:flex; align-items:center; justify-content:center; min-height:100vh; background:linear-gradient(135deg,#667eea,#764ba2); padding:16px; }
.login-box { background:#fff; border-radius:14px; padding:32px 24px; width:100%; max-width:360px; box-shadow:0 20px 60px rgba(0,0,0,.2); }
.login-box h2 { text-align:center; margin-bottom:6px; font-size:20px; }
.login-box .sub { text-align:center; color:var(--text-secondary); margin-bottom:24px; font-size:13px; }

/* Grade letters */
.grade-A{color:#059669;font-weight:700} .grade-B{color:#2563eb;font-weight:600}
.grade-C{color:#d97706} .grade-D{color:#dc2626} .grade-E{color:#991b1b}
.green{color:#10b981;font-weight:600} .red{color:#ef4444;font-weight:600}

/* Upload */
.upload-zone { border:2px dashed var(--border); border-radius:var(--radius); padding:24px; text-align:center; cursor:pointer; transition:.15s; }
.upload-zone:hover { border-color:var(--primary); background:#f8faff; }
.upload-zone .icon { font-size:36px; margin-bottom:6px; }

/* Share */
.share-link-box { background:#f0fdf4; border:1px solid #bbf7d0; border-radius:var(--radius); padding:14px; word-break:break-all; font-family:monospace; font-size:12px; }

/* Search */
.search-bar { display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap; }
.search-bar input { flex:1; min-width:120px; }

/* Modal */
.modal-bg { display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:200; align-items:center; justify-content:center; }
.modal-bg.show { display:flex; }
.modal { background:#fff; border-radius:var(--radius); padding:20px; width:92%; max-width:520px; max-height:85vh; overflow-y:auto; }
.modal h3 { margin-bottom:14px; font-size:15px; }

/* Filter bar */
.filter-bar { display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap; align-items:center; }
.filter-bar select,.filter-bar input { font-size:12px; padding:4px 8px; border:1px solid var(--border); border-radius:4px; }
.filter-bar label { font-size:12px; white-space:nowrap; }

/* Clickable name */
.clickable-name { color:var(--primary); cursor:pointer; text-decoration:underline; text-decoration-style:dotted; }
.clickable-name:hover { color:var(--primary-dark); }

/* Checkbox column */
.cb-col { width:30px; text-align:center; }

/* VOICE RECORDING */
.voice-btn { width:48px; height:48px; border-radius:50%; border:none; background:var(--danger); color:#fff; font-size:18px; cursor:pointer; transition:.2s; display:flex; align-items:center; justify-content:center; }
.voice-btn.recording { background:#991b1b; animation:pulse 1s infinite; }
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }
.voice-timer { font-size:13px; color:var(--text-secondary); margin-left:8px; }

/* Flex helpers */
.flex{display:flex;gap:6px;align-items:center}
.flex-between{display:flex;justify-content:space-between;align-items:center}
.flex-wrap{flex-wrap:wrap}
.mt-16{margin-top:16px}.mb-16{margin-bottom:16px}
.text-sm{font-size:12px;color:var(--text-secondary)}
.text-center{text-align:center}

/* Mobile */
@media (max-width:768px) {
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0)}
  .sidebar-close{display:block}
  .main{margin-left:0;padding:12px}
  .menu-toggle{display:block}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .charts-row{grid-template-columns:1fr}
  .card{padding:12px}
  .main-header h1{font-size:15px}
  th,td{padding:4px 5px;font-size:11px}
  table{font-size:11px;min-width:400px}
  .btn{font-size:11px;padding:5px 10px}
  .inline-stats{flex-direction:row;flex-wrap:wrap}
  .inline-stat{min-width:80px;flex:1 1 auto;padding:8px 12px}
  .inline-stat .num{font-size:18px}
  .compare-select{grid-template-columns:1fr!important}
  /* Make modal wider on mobile */
  .modal{width:96%;padding:14px}
  /* Horizontal scroll hint */
  .table-wrap::after{content:'';display:none}
}

@media (min-width:1400px) {
  .charts-row{grid-template-columns:1fr 1fr 1fr}
}