:root{--bg:#f7f7f8;--card:#ffffff;--muted:#666;--accent:#2b6cb0} /* 全局允许横向滚动以避免在极窄视口下布局被强制换行/错位。同时保留 .prevent-horizontal-collapse 作为可选类（向后兼容）。 */ html, body { overflow-x: auto; } .prevent-horizontal-collapse { overflow-x: auto; } /* 给主容器设置一个保守的最小宽度，防止在极窄视口下组件互相覆盖或换行异常。这个值可以根据需要调整（例如 640px 或 720px），这里采用 640px 作为保守起点。 */ .container{min-width:640px} /* 如果你希望只在窄屏设备上启用滚动，可以在 HTML 上添加 .prevent-horizontal-collapse 类。例如：或 */ body{font-family: "PingFang SC","Microsoft YaHei",Arial,Helvetica,sans-serif;background:var(--bg);margin:0;color:#222} .container{max-width:1100px;margin:20px auto;padding:16px} header{background:var(--card);border-radius:8px;padding:16px;box-shadow:0 1px 3px rgba(0,0,0,.06);display:flex;align-items:center;justify-content:space-between;gap:12px} header h1{margin:0;font-size:18px} .topline{display:flex;gap:12px;align-items:center;flex-wrap:wrap} .topline .small{white-space:nowrap} .topline #header-weather, .topline #header-next-competition{opacity:0.95} /* 经费低于阈值时的高亮样式 */ .low-funds{ color: #c53030 !important; background: linear-gradient(90deg, rgba(229,62,62,0.04), rgba(255,255,255,0)); padding: 4px 8px; border-radius:6px; font-weight:800 } .panel{background:var(--card);border-radius:8px;padding:12px;margin-top:12px;box-shadow:0 1px 3px rgba(0,0,0,.04)} .row{display:flex;gap:12px;flex-wrap:wrap} .col{flex:1;min-width:240px} .small{font-size:13px;color:var(--muted)} .btn{background:var(--accent);color:#fff;border:none;padding:8px 12px;border-radius:6px;cursor:pointer;display:inline-block;text-decoration:none} .btn:disabled{opacity:.5;cursor:not-allowed} .btn-ghost{background:transparent;border:1px solid #ddd;color:#333;padding:6px 10px;border-radius:6px;cursor:pointer} ul.list{list-style:none;padding:0;margin:0} li.item{padding:6px 8px;border-bottom:1px dashed #eee;display:flex;justify-content:space-between;align-items:center} label.block{display:block;margin:6px 0;font-weight:600} input[type="number"], select, input[type="text"]{width:100%;padding:6px;border:1px solid #ddd;border-radius:6px} .muted{color:var(--muted);font-size:13px} .stat{font-weight:700} .facility-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} /* province selection grid */ .prov-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:6px;margin-top:4px} .prov-btn{background:var(--accent);color:#fff;border:none;padding:5px 6px;border-radius:4px;cursor:pointer;display:block;text-align:center;white-space:normal} .prov-btn.selected{background:#fff;color:var(--accent);border:2px solid rgba(43,108,176,0.18);box-shadow:0 4px 14px rgba(43,108,176,0.06);} /* option card (used in entertainment modal) */ .option-card{transition:all 180ms ease;border:1px solid #e6e6e6;background:#fff} .option-card:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgba(0,0,0,0.04)} .option-card.selected{border-color:var(--accent);background:linear-gradient(180deg, rgba(43,108,176,0.04), rgba(43,108,176,0.02));box-shadow:none;transform:none} /* theme swatches */ .theme-swatch{display:inline-block;width:16px;height:16px;border-radius:50%;cursor:pointer;margin-left:4px;border:1px solid #ccc;vertical-align:middle} body.theme-red{--accent:#e53e3e;--bg:#fff5f5;--card:#ffffff;--muted:#666} body.theme-green{--accent:#38a169;--bg:#f0fff4;--card:#ffffff;--muted:#666} body.theme-purple{--accent:#805ad5;--bg:#faf5ff;--card:#ffffff;--muted:#666} .facility{padding:8px;border-radius:6px;border:1px solid #eee;background:#fafafa;text-align:center} .fac-label{font-weight:700;margin-bottom:6px} .fac-action{margin-top:8px} .btn.upgrade{background:#38a169;color:#fff;padding:6px 8px;font-size:13px;border-radius:6px} .btn.upgrade.ghost{background:transparent;border:1px solid #ddd;color:#333} .modal{position:fixed;left:0;top:0;right:0;bottom:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:999} .dialog{width:820px;max-width:96%;background:#fff;padding:18px;border-radius:10px;max-height:85vh;overflow:auto;position:relative} .dialog h3{margin-top:0} .flex-between{display:flex;justify-content:space-between;align-items:center} footer{margin-top:16px;text-align:center;color:var(--muted)} .tag{display:inline-block;padding:4px 8px;border-radius:999px;background:#eef6ff;color:#1b4f8a;font-size:12px;margin-left:6px} .warn{color:#b45309} .diff-tag{padding:3px 8px;border-radius:999px;font-weight:700;font-size:12px;margin-left:6px} /* 颜色按照要求：底色为对应颜色，字体颜色根据可读性调整 */ .diff-beginner{background:#fff0f0;color:#c53030;border:1px solid rgba(197, 48, 48, 0.12)} /* 入门：红色字体 */ .diff-popular-low{background:#fff7f0;color:#d97706;border:1px solid rgba(217,119,6,0.12)} /* 普及-：橙色字体 */ .diff-popular-high{background:#fffbe6;color:#b77900;border:1px solid rgba(183,121,0,0.12)} /* 普及+提高：黄色字体 */ .diff-advanced-low{background:#f0f8ff;color:#2563eb;border:1px solid rgba(37,99,235,0.12)} /* 提高+省选-：蓝色字体 */ .diff-provincial{background:#faf5ff;color:#6b21a8;border:1px solid rgba(107,33,168,0.12)} /* 省选 / NOI-：紫色字体 */ .diff-noi{background:#f5f5f5;color:#0f172a;border:1px solid rgba(15,23,42,0.06)} /* NOI/NOI+/CTSC：黑色字体 */ /* 新增：七色难度语义类（红/橙/黄/绿/蓝/紫/黑） */ .diff-red{background: #fff0f0; color: #c53030; border: 1px solid rgba(197,48,48,0.12)} .diff-orange{background: #fff7ed; color: #d97706; border: 1px solid rgba(217,119,6,0.12)} .diff-yellow{background: #fffbe6; color: #b77900; border: 1px solid rgba(183,121,0,0.12)} .diff-green{background: #f0fff4; color: #2f855a; border: 1px solid rgba(47,133,90,0.12)} .diff-blue{background: #f0f8ff; color: #2563eb; border: 1px solid rgba(37,99,235,0.12)} .diff-purple{background: #faf5ff; color: #6b21a8; border: 1px solid rgba(107,33,168,0.12)} .diff-black{background: #f5f5f5; color: #0f172a; border: 1px solid rgba(15,23,42,0.06)} .status-row{display:flex;gap:12px;flex-wrap:wrap} /* ========== 优化后的学生卡片样式（紧凑横条布局） ========== */ .student-box { position: relative; border: 1px solid #e5e7eb; padding: 10px 12px; border-radius: 8px; background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%); margin-bottom: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.03); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; gap: 8px; } .student-box:hover { box-shadow: 0 3px 8px rgba(0,0,0,0.08); transform: translateY(-1px); border-color: #cbd5e0; } /* 劝退按钮 - 紧凑设计 */ .evict-btn { position: absolute; top: 8px; right: 8px; background: linear-gradient(135deg, #fc8181 0%, #e53e3e 100%); color: #fff; border: none; padding: 3px 8px; border-radius: 5px; font-size: 10px; font-weight: 600; cursor: pointer; /* 降低显示优先级，确保模态/提示等能覆盖该按钮 */ z-index: 0; box-shadow: 0 1px 3px rgba(229,62,62,0.2); transition: all 0.2s ease; opacity: 0; } .student-box:hover .evict-btn { opacity: 1; } .evict-btn:hover { background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%); box-shadow: 0 2px 6px rgba(229,62,62,0.3); transform: scale(1.05); } .evict-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; } /* 学生卡片头部 - 紧凑横向布局 */ .student-box .student-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-right: 50px; /* 为劝退按钮留空间 */ } .student-box .student-name { font-size: 15px; font-weight: 700; color: #1a202c; margin: 0; display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .student-box .student-status { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } /* 压力标签 - 紧凑设计 */ .label-pill { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 10px; background: #f3f4f6; color: #4a5568; font-size: 11px; font-weight: 600; border: 1px solid rgba(0,0,0,0.05); } .label-pill.pressure-low { background: transparent !important; border-color: transparent !important; color: #22543d !important; /* 绿色文字 */ padding: 0 4px !important; } .label-pill.pressure-mid { background: transparent !important; border-color: transparent !important; color: #bfa100 !important; /* 黄色文字 */ padding: 0 4px !important; } .label-pill.pressure-high { background: transparent !important; border-color: transparent !important; color: #c62828 !important; /* 红色文字 */ padding: 0 4px !important; } .label-pill.pressure-tendency { background: #fff5f5 !important; border-color: #feb2b2 !important; color: #e53e3e !important; /* 深红色文字 */ padding: 2px 6px !important; font-weight: 700 !important; } /* 生病状态警告 */ .warn { color: #e53e3e; font-weight: 700; font-size: 11px; background: #fff5f5; padding: 2px 6px; border-radius: 6px; border: 1px solid #feb2b2; } .score{font-weight:700} .compact{font-size:13px} .stars{color:#d97706} table{width:100%;border-collapse:collapse} th,td{padding:6px;border:1px solid #eee;text-align:center} .label-pill{display:inline-block;padding:0 4px;border-radius:4px;background:transparent;color:#111;font-size:13px} .label-pill.pressure-low{background:transparent;color:#22543d} .label-pill.pressure-mid{background:transparent;color:#bfa100} .label-pill.pressure-high{background:transparent;color:#c62828} .highlight-next-comp{background: #fffde7; color: #d84315; padding: 2px 6px; border-radius: 5px; font-weight: bold} .next-panel{margin-top:8px;padding:8px;border-radius:6px} /* 知识点徽章 - 紧凑横向布局 */ .knowledge-badges { display: inline-flex; gap: 4px; flex-wrap: wrap; align-items: center; margin: 0; } .knowledge-badges .kb { display: inline-flex; align-items: center; min-width: 26px; padding: 2px 6px; border-radius: 6px; background: linear-gradient(135deg, #edf2f7 0%, #e2e8f0 100%); color: #2d3748; font-weight: 700; font-size: 10px; text-align: center; border: 1px solid #cbd5e0; transition: all 0.12s ease; cursor: help; position: relative; } .knowledge-badges .kb:hover { background: linear-gradient(135deg, #bee3f8 0%, #90cdf4 100%); border-color: #4299e1; transform: translateY(-1px); box-shadow: 0 2px 6px rgba(66, 153, 225, 0.12); z-index: 1; } /* 知识点等级颜色 */ .knowledge-badges .kb[data-grade="S"], .knowledge-badges .kb[data-grade="A"] { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); border-color: #f59e0b; color: #78350f; } .knowledge-badges .kb[data-grade="B"], .knowledge-badges .kb[data-grade="C"] { background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); border-color: #60a5fa; color: #1e3a8a; } .knowledge-badges .kb[data-grade="D"], .knowledge-badges .kb[data-grade="E"] { background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%); border-color: #d1d5db; color: #6b7280; } .kb-small { min-width: 22px; padding: 2px 5px; font-size: 10px; } /* 能力徽章：已使用 .knowledge-badges .kb 的紧凑样式，无需单独定义 */ /* 能力指标分组 - 紧凑横向布局 */ .ability-group { display: inline-flex; gap: 10px; align-items: center; padding: 0; margin: 0; } .ability-item { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: #4a5568; } .ability-item .label { font-weight: 600; color: #2d3748; } .ability-item .value { font-weight: 700; color: #2b6cb0; background: #e6f2ff; padding: 2px 6px; border-radius: 5px; border: 1px solid #bee3f8; } /* 结局高亮与动画样式 */ .ending-highlight{font-weight:800;color:#d84315;display:inline-block;padding:4px 8px;border-radius:6px} .ending-animate{animation:endingPulse 1.6s ease-in-out 1;} @keyframes endingPulse{ 0%{ transform: scale(1); box-shadow: 0 0 0 rgba(216,67,21,0); } 30%{ transform: scale(1.08); box-shadow: 0 6px 18px rgba(216,67,21,0.12); } 60%{ transform: scale(0.98); box-shadow: 0 2px 8px rgba(216,67,21,0.06); } 100%{ transform: scale(1); box-shadow: 0 0 0 rgba(216,67,21,0); } } /* Action card vertical list */ .action-cards{display:flex;flex-direction:column;gap:8px;margin-top:8px} .action-card{background:#fff;border:1px solid #eee;border-radius:8px;padding:10px;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.03);display:flex;flex-direction:column} .action-card:focus,.action-card:hover{box-shadow:0 4px 10px rgba(0,0,0,.06);outline:none} .action-card .card-title{font-weight:700;margin-bottom:6px} .action-card .card-desc{font-size:13px;color:var(--muted)} .action-card.empty{background:#f9fafb;border:1px dashed #eee;color:var(--muted)} /* 默认不显示空的预留事件卡片（JS 根据事件存在与否切换显示） */ .action-card.empty { display: none; } .action-card.event-active{ display:flex; border:2px solid var(--accent); box-shadow:0 4px 12px rgba(43,108,176,0.08); background:var(--card); } .event-slot{margin-top:8px;padding:6px;background:#fff;border-radius:6px;border:1px solid #eee;font-size:13px} .event-slot p{margin:0} /* Make sure smaller save button aligns */ .action-cards > div > .btn-ghost{margin-left:0} /* 突发事件卡片容器 - iOS风格滚动（去除提示文案与预览，只保留渐变） */ #event-cards-container { position: relative; max-height: 420px; /* 固定最大高度，约3-3.5个卡片 */ overflow: hidden; margin-top: 12px; transition: max-height 0.3s ease; } /* 内部滚动包装器：滚动可用但滚动条彻底隐藏（仍支持鼠标/触摸滚动） */ #event-cards-wrapper { position: relative; overflow-y: auto; overflow-x: hidden; max-height: 420px; padding-bottom: 8px; /* 少量空间避免最后一项被遮挡 */ scroll-behavior: smooth; -ms-overflow-style: none; /* IE/Edge */ scrollbar-width: none; /* Firefox */ } /* 完全隐藏 WebKit 浏览器的滚动条视觉 */ #event-cards-wrapper::-webkit-scrollbar { display: none; } /* 事件卡片基础样式 */ .event-card { border: 2px solid var(--accent); border-radius: 8px; padding: 10px; background: var(--card); box-shadow: 0 2px 6px rgba(43,108,176,0.06); margin-bottom: 8px; position: relative; transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1); } /* 底部折叠渐变遮罩 - 当有内容溢出时显示（保留），使用纯白色基底以保证与白色背景一致 */ #event-cards-container::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 80px; /* 由透明白到纯白的渐变，确保与页面白色背景 (#ffffff) 完全一致 */ background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 30%, rgba(255,255,255,0.9) 70%, rgba(255,255,255,1) 100%); pointer-events: none; opacity: 0; transition: opacity 0.3s ease; z-index: 5; } /* 当容器可滚动时显示渐变 */ #event-cards-container.has-overflow::after { opacity: 1; } /* 当滚动到底部时隐藏渐变 */ #event-cards-container.scrolled-to-bottom::after { opacity: 0 !important; } .event-card h4{margin:0 0 6px 0} .event-list{max-height:140px;overflow:auto;padding:6px;border-radius:6px;background:linear-gradient(180deg, rgba(0,0,0,0.01), transparent)} .event-item{padding:6px;border-bottom:1px dashed #eee;font-size:13px} .event-item:last-child{border-bottom:none} /* Improved event card text layout: summary + expandable detail */ .event-card .card-title{font-weight:700;margin-bottom:6px} .event-card .card-desc{font-size:13px;color:var(--muted);display:block;white-space:normal;word-break:break-word;overflow:hidden;text-overflow:ellipsis;max-height:2.6em} .event-card .card-desc.expanded{max-height:none;overflow:visible} .event-card .event-detail{margin-top:8px;background:#f8fafc;border:1px solid #eef2f7;padding:8px;border-radius:6px;font-size:13px;white-space:pre-wrap;word-break:break-word;max-height:180px;overflow:auto} .event-card .more-btn{display:inline-block;margin-top:8px;background:transparent;border:none;color:var(--accent);cursor:pointer;padding:4px 6px;font-size:13px} .event-card .more-btn:focus{outline:2px solid rgba(43,108,176,0.15)} /* 标记：需要选择但尚未选择的事件卡片（红色高亮，兼顾可访问性） */ .event-required{border-color:#e53e3e !important; background:linear-gradient(180deg, #fff5f5, #fff9f9) !important; box-shadow:0 4px 12px rgba(229,62,62,0.08) !important} .event-required .card-title{position:relative} .event-required .required-tag{display:inline-block;margin-left:8px;padding:2px 6px;border-radius:12px;background:#ffecec;color:#c53030;font-size:12px;font-weight:700;border:1px solid rgba(197,48,48,0.08)} /* When description is very long, limit the collapsed view to 2 lines (using line-clamp where available) */ .card-desc.clamp { display: -webkit-box; /* Add both standard and webkit-prefixed properties for broader compatibility */ line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* 事件选项按钮 */ .event-options{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap} .event-choice-btn{ padding:6px 14px; font-size:13px; border:1px solid var(--accent); background:linear-gradient(135deg, rgba(43,108,176,0.08), rgba(43,108,176,0.04)); color:var(--text); border-radius:6px; cursor:pointer; transition:all 0.2s ease; } .event-choice-btn:hover{ background:linear-gradient(135deg, rgba(43,108,176,0.15), rgba(43,108,176,0.08)); box-shadow:0 2px 6px rgba(43,108,176,0.15); transform:translateY(-1px); } .event-choice-btn:active{ transform:translateY(0); box-shadow:0 1px 3px rgba(43,108,176,0.1); } /* Competition-week mode: only show the '参加比赛' card */ body.comp-week .action-cards .action-card:not(#comp-only-action) { display: none; } /* Highlighted competition action card */ .comp-highlight{border:2px solid var(--accent);background:linear-gradient(90deg, rgba(43,108,176,0.06), rgba(43,108,176,0.02));box-shadow:0 6px 18px rgba(43,108,176,0.12);} /* ========== 新比赛系统样式 ========== */ .contest-live-container { max-width: 900px; margin: 0 auto; } .contest-header { margin-bottom: 20px; padding: 12px; background: #f9fafb; border-radius: 8px; } .time-info { font-size: 16px; } /* Guidance & emphasis for required selections */ .highlight-required { animation: highlightPulse 1.4s ease-in-out 2; border: 2px dashed #fda4af !important; box-shadow: 0 6px 18px rgba(229,62,62,0.08) !important; } @keyframes highlightPulse { 0% { box-shadow: 0 0 0 rgba(229,62,62,0); transform: translateY(0); } 30% { box-shadow: 0 10px 30px rgba(229,62,62,0.12); transform: translateY(-3px); } 60% { box-shadow: 0 4px 12px rgba(229,62,62,0.06); transform: translateY(0); } 100% { box-shadow: 0 0 0 rgba(229,62,62,0); transform: translateY(0); } } /* Shake animation to draw attention */ .shake { animation: shakeIt 0.9s cubic-bezier(.36,.07,.19,.97) both; } @keyframes shakeIt { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } } /* Stronger selected styles for task cards and intensity buttons */ .task-card.selected { border-color: #3182ce !important; box-shadow: 0 8px 24px rgba(49,130,206,0.12); transform: translateY(-2px); } .option-btn.selected { background:#dee8ff !important; color:#fff !important; border:2px solid rgba(37,99,235,0.12); box-shadow:0 6px 18px rgba(37,99,235,0.08); } .progress-bar-container { width: 100%; height: 20px; background: #e5e7eb; border-radius: 10px; overflow: hidden; } .progress-bar { height: 100%; background: linear-gradient(90deg, #38a169, #48bb78); transition: width 0.3s ease; } .student-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin: 16px 0; /* 保证在大量面板重排时容器不会瞬间折叠为0高度导致空白 */ min-height: 80px; } .student-panel { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); position: relative; /* transform动画由JS控制 */ will-change: transform; backface-visibility: hidden; /* 提升渲染稳定性 */ } .student-name { font-weight: 700; font-size: 15px; margin-bottom: 6px; color: #1a202c; } .student-score { font-size: 14px; margin-bottom: 4px; color: #4a5568; transition: all 0.3s ease; } .student-score span { font-weight: 700; color: #2b6cb0; } .student-current-problem { font-size: 13px; margin-bottom: 8px; color: #718096; } .student-current-problem span { font-weight: 600; color: #d97706; } .problem-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 6px; margin-top: 8px; } .problem-item { background: #f3f4f6; border: 1px solid #d1d5db; border-radius: 6px; padding: 8px 4px; text-align: center; transition: all 0.3s ease; } .problem-item.unattempted { background: #f3f4f6; border-color: #d1d5db; } .problem-item.partial { background: #fef3c7; border-color: #fbbf24; } .problem-item.solved { background: #d1fae5; border-color: #34d399; font-weight: 700; } /* 题目状态更新动画 */ @keyframes problemUpdate { 0% { transform: scale(1); } 50% { transform: scale(1.15) rotate(2deg); box-shadow: 0 4px 12px rgba(52, 211, 153, 0.5); } 100% { transform: scale(1) rotate(0deg); } } .problem-update-animation { animation: problemUpdate 0.6s ease-in-out; } .problem-id { font-size: 12px; font-weight: 600; margin-bottom: 2px; color: #374151; } .problem-score { font-size: 13px; font-weight: 700; color: #1f2937; } .contest-controls { margin-top: 16px; text-align: center; } .contest-controls .btn { margin: 0 6px; min-width: 80px; } /* 比赛结果表格 */ .result-table { width: 100%; margin: 16px 0; border-collapse: collapse; } .result-table th, .result-table td { padding: 10px; border: 1px solid #e5e7eb; text-align: left; } .result-table th { background: #f3f4f6; font-weight: 700; color: #374151; } .result-table td:first-child { font-weight: 700; color: #3b82f6; background: #eff6ff; } .result-table td:nth-child(3) { font-weight: 700; color: #059669; } .result-table tbody tr:hover { background: #f9fafb; } /* Modal actions: repositioned to top-left to minimize mouse travel. If modal content provides a .modal-actions block, JS will move it into the .modal-action-panel placed at dialog top-left. Buttons are larger and have a clear divider for aesthetics. A small guard ensures content doesn't overlap the panel. */ .dialog .modal-action-panel{position:absolute;right:14px;top:14px;display:flex;gap:8px;align-items:center;padding:10px;border-radius:10px;background:#fff;border:1px solid rgba(0,0,0,0.06);box-shadow:0 8px 24px rgba(0,0,0,0.08);z-index:3} .dialog .modal-action-panel::after{content:'';position:absolute;right:100%;top:10px;height:calc(100% - 20px);width:1px;background:linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0.02));transform:translateX(-10px)} .dialog .modal-action-panel .btn{padding:10px 16px;border-radius:8px;font-size:14px} .dialog .modal-action-panel .btn.btn-ghost{padding:8px 12px} .dialog .modal-action-panel .btn + .btn{margin-left:6px} .dialog .modal-action-guard{height:64px} /* fallback: keep bottom-based layout if .modal-actions exists outside .dialog */ .modal-actions{display:flex;gap:8px;justify-content:flex-start;align-items:center;margin-top:12px} .modal-actions .btn{margin:0} .modal-actions .btn + .btn{margin-left:6px} /* 天赋标签样式 */ .student-talents { display: flex; gap: 6px; flex-wrap: wrap; } .talent-tag { position: relative; display: inline-block; padding: 3px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; border: 1px solid; cursor: help; transition: all 0.2s ease; } .talent-tag:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } /* 天赋提示框 */ .talent-tooltip { visibility: hidden; opacity: 0; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(-4px); margin-bottom: 4px; padding: 8px 12px; background: #1f2937; color: #fff; font-size: 12px; font-weight: 400; border-radius: 6px; white-space: nowrap; z-index: 1000; pointer-events: none; transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } /* start page sub-panels: unify visual style used for recruitment / pre-training */ .sub-panel{margin-top:16px;padding:12px;border:1px solid #e6e6e6;border-radius:8px;background:linear-gradient(180deg,#ffffff,#fafafa)} .sub-panel h4{margin:0 0 8px 0} .sub-panel .section-body{margin-bottom:8px} /* collapsible panels: when collapsed, hide body and controls but keep header visible */ .sub-panel.collapsible .collapsible-head{cursor:pointer;user-select:none} .sub-panel.collapsible .collapsible-head::after{content:'\25BC';float:right;transform:rotate(0deg);transition:transform 180ms ease} .sub-panel.collapsible.expanded .collapsible-head::after{transform:rotate(180deg)} .sub-panel.collapsible.collapsed .section-body, .sub-panel.collapsible.collapsed .btn, .sub-panel.collapsible.collapsed #talent-selection, .sub-panel.collapsible.collapsed #recruited-list, .sub-panel.collapsible.collapsed #training-log, .sub-panel.collapsible.collapsed #talent-grid, .sub-panel.collapsible.collapsed .talent-grid, .sub-panel.collapsible.collapsed .talent-card{ display:none !important; } .sub-panel.collapsible.collapsed {padding-bottom:8px} /* 通用折叠面板样式（用于外出集训等模态框中的折叠面板） */ .collapsible.collapsed .collapsible-content{ display:none !important; } .collapsible .collapsible-head{ cursor:pointer; user-select:none; } /* talent selection grid (flat cards instead of select dropdown) */ .talent-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin-top:8px} .talent-card{border:1px solid #eee;background:#fff;padding:8px;border-radius:8px;cursor:pointer;display:flex;flex-direction:column;gap:6px;align-items:flex-start;transition:all 150ms ease} .talent-card .title{font-weight:700;font-size:14px} .talent-card .desc{font-size:12px;color:var(--muted)} .talent-card .color-dot{width:12px;height:12px;border-radius:50%;display:inline-block;margin-right:6px;vertical-align:middle;border:1px solid rgba(0,0,0,0.06)} .talent-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.04)} .talent-card.selected{border-color:var(--accent);background:linear-gradient(180deg, rgba(43,108,176,0.04), rgba(43,108,176,0.02));box-shadow:none;transform:none} /* make modal-actions align nicely on start page */ .modal-actions{justify-content:flex-end} /* 提示框箭头 */ .talent-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #1f2937; } /* 悬停时显示提示框 */ .talent-tag:hover .talent-tooltip { visibility: visible; opacity: 1; transform: translateX(-50%) translateY(-8px); } /* 恢复天赋标签颜色由内联样式或天赋定义控制。保留一个非强制性的默认外观（不使用 !important）作为回退。 */ .talent-tag { background: #f3f4f6; color: #1f2937; border-color: rgba(30,41,59,0.06); box-shadow: none; } /* ========== 学生卡片折叠与交互增强 ========== */ /* 学生卡片折叠功能 */ .student-box .collapse-toggle { position: absolute; bottom: 8px; right: 10px; background: transparent; border: 1px solid #cbd5e0; color: #718096; padding: 4px 12px; border-radius: 6px; font-size: 11px; cursor: pointer; transition: all 0.2s ease; font-weight: 600; } .student-box .collapse-toggle:hover { background: #edf2f7; border-color: #a0aec0; color: #2d3748; } .student-box.collapsed .student-details { display: none; } .student-box.collapsed { padding-bottom: 12px; } /* 添加收起状态的提示 */ .student-box.collapsed::after { content: '点击展开详情'; position: absolute; bottom: 8px; left: 16px; font-size: 11px; color: #a0aec0; font-style: italic; } /* 学生卡片内容区域 */ .student-box .student-details { animation: fadeIn 0.3s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } } /* 分隔线样式 */ .student-divider { height: 1px; background: linear-gradient(90deg, transparent, #e5e7eb 20%, #e5e7eb 80%, transparent); margin: 10px 0; } /* 学生卡片信息行 */ .student-info-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 13px; } .student-info-row .info-label { font-weight: 600; color: #4a5568; min-width: 60px; } .student-info-row .info-value { color: #2d3748; flex: 1; } /* 旧的能力组样式已移除；能力现在作为知识徽章的一部分显示 */ /* 紧凑模式样式优化 */ .compact { font-size: 12px; line-height: 1.5; } /* 学生列表 - 保持垂直堆叠 */ #student-list { display: flex; flex-direction: column; gap: 0; } /* === 颜色规则：按等级 & Ux 阶段的语义色 === */ /* 默认中性外观（无等级信息时使用） */ .knowledge-badges .kb, .kb, .tag, .label-pill, .talent-tag { background: #f3f4f6; color: #1f2937; border-color: rgba(30,41,59,0.06); box-shadow: none; } /* E -> A -> SSS 色阶（蓝 -> 绿 -> 金）支持带 +/- 或多重 S（例如 D+、SS、SSS）匹配 */ .knowledge-badges .kb[data-grade="E"], .kb[data-grade="E"] { background: linear-gradient(135deg,#eff6ff 0%, #dbeafe 100%); color: #1e3a8a; border-color: rgba(37,99,235,0.14); } .knowledge-badges .kb[data-grade="E+"], .kb[data-grade="E+"] { background: linear-gradient(135deg,#eff6ff 0%, #dbeafe 100%); color: #1e3a8a; border-color: rgba(37,99,235,0.14); } .knowledge-badges .kb[data-grade^="D"], .kb[data-grade^="D"] { /* D, D+ 等：偏青绿色 */ background: linear-gradient(135deg,#e6f9fb 0%, #ccf0ef 100%); color: #0f766e; border-color: rgba(6,182,212,0.14); } .knowledge-badges .kb[data-grade^="D+"], .kb[data-grade^="D+"] { /* D, D+ 等：偏青绿色 */ background: linear-gradient(135deg,#e6f9fb 0%, #ccf0ef 100%); color: #0f766e; border-color: rgba(6,182,212,0.14); } .knowledge-badges .kb[data-grade="C"], .kb[data-grade="C"] { background: linear-gradient(135deg,#ecfdf5 0%, #bbf7d0 100%); color: #166534; border-color: rgba(16,163,127,0.12); } .knowledge-badges .kb[data-grade="C+"], .kb[data-grade="C+"] { background: linear-gradient(135deg,#ecfdf5 0%, #bbf7d0 100%); color: #166534; border-color: rgba(16,163,127,0.12); } .knowledge-badges .kb[data-grade="B"], .kb[data-grade="B"] { background: linear-gradient(135deg,#fff7ed 0%, #ffe7c2 100%); color: #92400e; border-color: rgba(217,119,6,0.12); } .knowledge-badges .kb[data-grade="B+"], .kb[data-grade="B+"] { background: linear-gradient(135deg,#fff7ed 0%, #ffe7c2 100%); color: #92400e; border-color: rgba(217,119,6,0.12); } .knowledge-badges .kb[data-grade="A"], .kb[data-grade="A"] { background: linear-gradient(135deg,#fffaf0 0%, #fff1cc 100%); color: #7c4a02; border-color: rgba(183,121,0,0.16); } .knowledge-badges .kb[data-grade="A+"], .kb[data-grade="A+"] { background: linear-gradient(135deg,#fffaf0 0%, #fff1cc 100%); color: #7c4a02; border-color: rgba(183,121,0,0.16); } .knowledge-badges .kb[data-grade^="S"], .kb[data-grade^="S"] { /* S, SS, SSS：金色系 */ background: linear-gradient(135deg,#fff8e1 0%, #ffefb3 100%); color: #6b3e00; border-color: rgba(183,121,0,0.18); } /* Ux 阶段：以 U 开头的等级使用固定高饱和度浅青色 */ .knowledge-badges .kb[data-grade^="U"], .kb[data-grade^="U"] { background: linear-gradient(135deg,#bffcfb 0%, #9ef6f0 100%); color: #044e54; border-color: rgba(3,166,166,0.18); } /* hover 保持轻微上浮，但不使用强烈色彩覆盖 */ .knowledge-badges .kb:hover, .kb:hover, .talent-tag:hover, .tag:hover { transform: translateY(-1px); } /* 注释掉：这个规则会覆盖难度标签的颜色，导致所有难度标签显示为灰色 .diff-beginner, .diff-popular-low, .diff-popular-high, .diff-advanced-low, .diff-provincial, .diff-noi { background: #f3f4f6; color: #1f2937; border-color: rgba(30,41,59,0.06); } /* Disabled action card visual */ .action-card.disabled{ opacity:0.45; pointer-events:none; filter:grayscale(40%); } /* Highlight pending event briefly */ .highlight-pending{ box-shadow: 0 0 0 3px rgba(255,200,0,0.18); transition: box-shadow 0.25s ease-in-out; } */ /* 小尺寸徽章紧凑 */ .knowledge-badges .kb, .kb-small { padding: 2px 6px; font-size: 10px; } /* Default: keep row horizontal and allow horizontal scrolling to prevent wrapping. Side panel stays to the right; main panel shrinks but respects its min-width. */ .row { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; } /* Very small screens: stack vertically (mobile) */ @media (max-width: 480px) { .container { min-width: 0 !important; padding-left: 12px !important; padding-right: 12px !important; } .row { flex-direction: column !important; flex-wrap: wrap !important; overflow-x: visible !important; gap: 12px !important; } .row > .col.panel { flex: 1 1 100% !important; min-width: 0 !important; max-width: 100% !important; order: unset !important; } .facility-grid { grid-template-columns: repeat(2, 1fr) !important; } header { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; } .topline { gap: 8px !important; } } /* 训话输入框样式 */ #coach-speech-input { transition: all 0.2s ease; background: #fafafa; } #coach-speech-input:focus { outline: none; border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px rgba(43, 108, 176, 0.1); } #coach-speech-input::placeholder { color: #999; font-style: italic; } /* 保证输入框在各种容器和视口下不出界 */ #coach-speech-input { box-sizing: border-box; width: 100%; max-width: 100%; } /* =========== 晋级状态标识样式 =========== */ .qualification-badge { display: inline-flex; align-items: center; padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: 600; margin-left: 6px; vertical-align: middle; white-space: nowrap; transition: all 0.15s ease; opacity: 0.75; } .qualification-badge.qualified { background: #f0f9f4; color: #4a7c59; border: 1px solid #d4e8dd; } .qualification-badge.qualified:hover { opacity: 1; background: #e6f4ea; border-color: #b8dcc5; } .qualification-badge.not-qualified { background: #fef5f5; color: #9a5858; border: 1px solid #f0d4d4; } .qualification-badge.not-qualified:hover { opacity: 1; background: #fdeaea; border-color: #e8c1c1; } /* 外出集训学生卡片中的晋级标识（稍微小一点） */ .student-card .qualification-badge { font-size: 9px; padding: 1px 5px; margin-left: 4px; }