/* ═══════════════════════════════════════════════════════════ Theme tokens — data-theme on 沉稳 / 护眼 / 黑白 / 日光（旧 id 作别名兼容） ═══════════════════════════════════════════════════════════ */ :root, [data-theme="calm"], [data-theme="neon"], [data-theme="aurora"] { --bg: #0c1219; --bg-elevated: #141c28; --bg-deep: #080e16; --bg-header: rgba(12, 18, 25, 0.94); --bg-btab: rgba(12, 18, 25, 0.98); --bg-sheet: #101823; --border: #1c2838; --border-strong: #2a3a4e; --text: #b8c4d4; --text-bright: #eef2f7; --text-muted: #7a8ba0; --text-faint: #5c6b7e; --accent: #6b9ecf; --accent-rgb: 107, 158, 207; --accent-2: #8a9bb0; --accent-2-rgb: 138, 155, 176; --accent-warm: #c9a227; --accent-warm-rgb: 201, 162, 39; --success: #3d9b6e; --success-rgb: 61, 155, 110; --danger: #c45c5c; --danger-rgb: 196, 92, 92; --grad-from: #6b9ecf; --grad-to: #8a9bb0; --grid-line: rgba(107, 158, 207, 0.03); --scan: rgba(107, 158, 207, 0.28); --neon-shadow: rgba(107, 158, 207, 0.18); --card-radius: 14px; --theme-meta: #0c1219; color-scheme: dark; } [data-theme="eye"], [data-theme="sage"] { --bg: #cfe3c8; --bg-elevated: #e4f0df; --bg-deep: #bdd4b4; --bg-header: rgba(228, 240, 223, 0.94); --bg-btab: rgba(228, 240, 223, 0.98); --bg-sheet: #eaf3e6; --border: #a8c49c; --border-strong: #8faf80; --text: #2f3f2a; --text-bright: #1a2816; --text-muted: #4a5f42; --text-faint: #5f7356; --accent: #3d6b45; --accent-rgb: 61, 107, 69; --accent-2: #5a7d4e; --accent-2-rgb: 90, 125, 78; --accent-warm: #9a6b20; --accent-warm-rgb: 154, 107, 32; --success: #2f6b3c; --success-rgb: 47, 107, 60; --danger: #a84840; --danger-rgb: 168, 72, 64; --grad-from: #3d6b45; --grad-to: #5a7d4e; --grid-line: rgba(45, 70, 40, 0.06); --scan: transparent; --neon-shadow: rgba(61, 107, 69, 0.16); --card-radius: 14px; --theme-meta: #cfe3c8; color-scheme: light; } [data-theme="mono"], [data-theme="ink"] { --bg: #111111; --bg-elevated: #1a1a1a; --bg-deep: #0a0a0a; --bg-header: rgba(17, 17, 17, 0.95); --bg-btab: rgba(17, 17, 17, 0.98); --bg-sheet: #161616; --border: #2a2a2a; --border-strong: #3d3d3d; --text: #cfcfcf; --text-bright: #f5f5f5; --text-muted: #8a8a8a; --text-faint: #6b6b6b; --accent: #e5e5e5; --accent-rgb: 229, 229, 229; --accent-2: #a3a3a3; --accent-2-rgb: 163, 163, 163; --accent-warm: #b0b0b0; --accent-warm-rgb: 176, 176, 176; --success: #d4d4d4; --success-rgb: 212, 212, 212; --danger: #9a9a9a; --danger-rgb: 154, 154, 154; --grad-from: #e5e5e5; --grad-to: #a3a3a3; --grid-line: rgba(255, 255, 255, 0.03); --scan: transparent; --neon-shadow: rgba(255, 255, 255, 0.08); --card-radius: 14px; --theme-meta: #111111; color-scheme: dark; } [data-theme="paper"] { --bg: #f1f4f8; --bg-elevated: #ffffff; --bg-deep: #e4e9f0; --bg-header: rgba(255, 255, 255, 0.95); --bg-btab: rgba(255, 255, 255, 0.98); --bg-sheet: #ffffff; --border: #cfd8e3; --border-strong: #b0bdcc; --text: #1e293b; --text-bright: #0f172a; --text-muted: #475569; --text-faint: #64748b; --accent: #0369a1; --accent-rgb: 3, 105, 161; --accent-2: #0f766e; --accent-2-rgb: 15, 118, 110; --accent-warm: #b45309; --accent-warm-rgb: 180, 83, 9; --success: #166534; --success-rgb: 22, 101, 52; --danger: #b91c1c; --danger-rgb: 185, 28, 28; --grad-from: #0369a1; --grad-to: #0f766e; --grid-line: rgba(15, 23, 42, 0.05); --scan: transparent; --neon-shadow: rgba(3, 105, 161, 0.14); --card-radius: 14px; --theme-meta: #f1f4f8; color-scheme: light; } *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; height: 100dvh; max-height: 100dvh; margin: 0; overflow: hidden; } body { font-family: 'Inter', system-ui, sans-serif; background: var(--bg); color: var(--text); transition: background .25s ease, color .25s ease; } /* 全屏壳：避开 Android/小米平板 100vh 比可视区更高的问题 */ .app-shell { display: flex; width: 100%; height: 100%; height: 100dvh; max-height: 100dvh; overflow: hidden; } /* ─── bg grid ─── */ .bg-grid { background-color: var(--bg); background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 40px 40px; } /* ─── scan line ─── */ @keyframes scan { 0%{top:-2px} 100%{top:100vh} } .scan-line { position: fixed; left:0; right:0; height:2px; z-index:999; pointer-events:none; background: linear-gradient(90deg, transparent, var(--scan), transparent); animation: scan 14s linear infinite; opacity: .7; } [data-theme="mono"] .scan-line, [data-theme="ink"] .scan-line, [data-theme="eye"] .scan-line, [data-theme="sage"] .scan-line, [data-theme="paper"] .scan-line { display: none; } /* ─── sidebar nav ─── */ .nav-btn { display:flex; align-items:center; gap:10px; padding: 10px 16px; border-radius:8px; border-left:2px solid transparent; font-size:.875rem; font-weight:500; cursor:pointer; transition: all .18s; } .nav-btn.active { border-left-color: var(--accent); background: rgba(var(--accent-rgb), .08); color: var(--accent); } .nav-btn:not(.active):hover { background: rgba(255,255,255,.04); border-left-color: rgba(var(--accent-rgb), .2); color: var(--text-muted); } .nav-btn:not(.active) { color: var(--text-faint); } [data-theme="paper"] .nav-btn:not(.active):hover, [data-theme="eye"] .nav-btn:not(.active):hover, [data-theme="sage"] .nav-btn:not(.active):hover { background: rgba(0,0,0,.05); } /* ─── top header：当前页标题 + 操作 ─── */ .app-header-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.45rem; width: 100%; max-width: 100%; min-width: 0; } .app-header-title { display: flex; align-items: center; gap: 0.55rem; min-width: 0; } .app-header-title-icon { font-size: 1.15rem; line-height: 1; flex-shrink: 0; } .app-header-title-label { font-size: 0.95rem; font-weight: 600; color: var(--text-bright); line-height: 1.2; } .app-header-title-desc { margin-top: 0.1rem; font-size: 0.7rem; color: var(--text-faint); line-height: 1.2; } .app-header-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 0.35rem; max-width: 100%; } .app-header-action-btn { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.35rem 0.55rem; border-radius: 0.5rem; border: 1px solid var(--border-strong); background: var(--bg-sheet); color: var(--text-muted); font-size: 0.75rem; line-height: 1.2; white-space: nowrap; -webkit-tap-highlight-color: transparent; } .app-header-action-btn.on { background: rgba(var(--accent-rgb), .12); border-color: rgba(var(--accent-rgb), .35); color: var(--accent); } .app-header-child-btn { color: var(--text-bright); max-width: 8.5rem; } .app-header-child-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .app-header-child-caret { color: var(--text-muted); flex-shrink: 0; } .app-header-action-text { display: none; } @media (min-width: 640px) { .app-header-action-text { display: inline; } .app-header-child-btn { max-width: 10rem; } } @media (max-width: 640px) { .app-header-bar { gap: 0.3rem; } .app-header-actions { gap: 0.25rem; } .app-header-action-btn { padding: 0.32rem 0.42rem; font-size: 0.72rem; } .app-header-child-btn { max-width: 5.6rem; } .app-header-title-label { font-size: 0.88rem; } } /* ─── card ─── */ .card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--card-radius); transition: border-color .2s, box-shadow .2s, transform .2s, background .25s; } .card:hover { border-color: rgba(var(--accent-rgb), .25); box-shadow: 0 8px 32px rgba(0,0,0,.25), 0 0 16px rgba(var(--accent-rgb), .06); transform: translateY(-1px); } [data-theme="paper"] .card:hover, [data-theme="eye"] .card:hover, [data-theme="sage"] .card:hover { box-shadow: 0 8px 24px rgba(15, 23, 42, .08); } /* ─── gradient text ─── */ .grad { background: linear-gradient(130deg, var(--grad-from), var(--grad-to)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ─── neon button ─── */ .btn-neon { /* 先写纯色兜底：旧版 Safari / iPad 不支持 color-mix 时整段 background 会失效 → 白底白字 */ background: var(--accent); background-image: linear-gradient(135deg, var(--accent), #0ea5e9); color: #fff !important; font-weight:700; border-radius:10px; padding:11px 24px; font-size:.875rem; cursor:pointer; box-shadow: 0 0 20px var(--neon-shadow); transition: opacity .15s, box-shadow .15s; -webkit-text-fill-color: #fff; } [data-theme="eye"] .btn-neon, [data-theme="sage"] .btn-neon { background: var(--accent); background-image: linear-gradient(135deg, var(--accent), #5a8f62); color: #fff !important; -webkit-text-fill-color: #fff; } [data-theme="mono"] .btn-neon, [data-theme="ink"] .btn-neon { background: var(--accent); background-image: none; color: #111 !important; -webkit-text-fill-color: #111; } .btn-neon:hover { opacity:.9; box-shadow:0 0 30px rgba(var(--accent-rgb), .4); } .btn-neon:disabled { background: var(--border-strong) !important; background-image: none !important; color: var(--text-faint) !important; -webkit-text-fill-color: var(--text-faint); box-shadow:none; cursor:not-allowed; } /* ─── subject badges ─── */ .b-math {background:rgba(59,130,246,.15);color:#60a5fa;border:1px solid rgba(59,130,246,.3);} .b-physics {background:rgba(168,85,247,.15);color:#c084fc;border:1px solid rgba(168,85,247,.3);} .b-chemistry{background:rgba(16,185,129,.15);color:#34d399;border:1px solid rgba(16,185,129,.3);} .b-english {background:rgba(245,158,11,.15);color:#fbbf24;border:1px solid rgba(245,158,11,.3);} .b-biology {background:rgba(236,72,153,.15);color:#f472b6;border:1px solid rgba(236,72,153,.3);} .b-history {background:rgba(249,115,22,.15);color:#fb923c;border:1px solid rgba(249,115,22,.3);} .b-chinese {background:rgba(239,68,68,.15); color:#f87171;border:1px solid rgba(239,68,68,.3);} [data-theme="paper"] .b-math, [data-theme="eye"] .b-math, [data-theme="sage"] .b-math {background:rgba(59,130,246,.12);color:#2563eb;} [data-theme="paper"] .b-physics, [data-theme="eye"] .b-physics, [data-theme="sage"] .b-physics {background:rgba(124,58,237,.1);color:#7c3aed;} [data-theme="paper"] .b-chemistry, [data-theme="eye"] .b-chemistry, [data-theme="sage"] .b-chemistry{background:rgba(5,150,105,.1);color:#059669;} [data-theme="paper"] .b-english, [data-theme="eye"] .b-english, [data-theme="sage"] .b-english {background:rgba(217,119,6,.1);color:#d97706;} [data-theme="paper"] .b-biology, [data-theme="eye"] .b-biology, [data-theme="sage"] .b-biology {background:rgba(219,39,119,.1);color:#db2777;} [data-theme="paper"] .b-history, [data-theme="eye"] .b-history, [data-theme="sage"] .b-history {background:rgba(234,88,12,.1);color:#ea580c;} [data-theme="paper"] .b-chinese, [data-theme="eye"] .b-chinese, [data-theme="sage"] .b-chinese {background:rgba(220,38,38,.1);color:#dc2626;} .badge { border-radius:6px; padding:2px 8px; font-size:.7rem; font-weight:600; display:inline-block; } /* ─── drop zone ─── */ .drop-zone { border:2px dashed rgba(var(--accent-rgb), .2); border-radius:14px; transition:all .25s; cursor:pointer; } .drop-zone.hovering { border-color: var(--accent); background: rgba(var(--accent-rgb), .04); box-shadow:0 0 30px rgba(var(--accent-rgb), .1); } /* ─── spin ─── */ @keyframes spin { to{transform:rotate(360deg)} } .spin { animation:spin .75s linear infinite; display:inline-block; } /* ─── progress ─── */ @keyframes prog { from{width:3%} to{width:94%} } .prog-bar { animation:prog 10s cubic-bezier(.4,0,.2,1) forwards; } /* ─── fade in ─── */ @keyframes fadein { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} } .fadein { animation:fadein .28s ease; } /* ─── scrollbar ─── */ ::-webkit-scrollbar { width:5px; } ::-webkit-scrollbar-track { background: var(--bg-deep); } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius:3px; } ::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--border-strong) 70%, var(--accent)); } /* ─── markdown ─── */ .md h1,.md h2,.md h3 { color: var(--accent); font-weight:600; margin:.75rem 0 .35rem; } .md h1{font-size:1.1rem} .md h2{font-size:1rem} .md h3{font-size:.9rem} .md p { margin-bottom:.6rem; line-height:1.8; color: var(--text-muted); } .md ul,.md ol { margin-left:1.25rem; margin-bottom:.6rem; } .md li { margin-bottom:.2rem; color: var(--text-muted); } .md code { background: rgba(var(--accent-rgb), .1); color: var(--accent); padding:.1em .35em; border-radius:3px; font-family:'JetBrains Mono',monospace; font-size:.82em; } .md pre { background: var(--bg-deep); border:1px solid var(--border); border-radius:8px; padding:.75rem; overflow-x:auto; margin-bottom:.6rem; } .md pre code { background:none; color: var(--text-bright); padding:0; } .md strong { color: var(--text-bright); } .md em { color: var(--accent-2); } .md blockquote { border-left:3px solid var(--accent); padding-left:.75rem; color: var(--text-faint); margin-bottom:.6rem; } .md a { color: var(--accent); text-decoration:underline; } .md .math-block { overflow-x:auto; overflow-y:hidden; margin:.75rem 0; padding:.35rem 0; } .md .katex-display { margin:.4rem 0; } .md .katex { color: var(--text-bright); font-size:1.02em; } .md .hw-blank { display: inline-block; min-width: 2.75em; height: 1.05em; border-bottom: 1.5px solid var(--text-bright, #1a1a1a); color: transparent; user-select: none; vertical-align: text-bottom; line-height: 1; margin: 0 .12em; } /* ─── choice question formatting ─── */ .choice-options { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.5rem; } .choice-option { display:flex; align-items:flex-start; gap:.55rem; min-width:0; padding:.65rem .75rem; border:1px solid var(--border-strong); border-radius:10px; background: var(--bg-deep); } .choice-option.student-picked { border-color: rgba(var(--accent-rgb), .38); background: rgba(var(--accent-rgb), .07); } .choice-option.answer-picked { border-color: rgba(var(--success-rgb), .45); background: rgba(var(--success-rgb), .08); } .choice-label { display:inline-flex; align-items:center; justify-content:center; flex:0 0 1.45rem; width:1.45rem; height:1.45rem; border-radius:999px; background: var(--border); color: var(--accent); font:600 .72rem/1 'JetBrains Mono', monospace; } .choice-text { min-width:0; color: var(--text-muted); font-size:.8rem; line-height:1.6; } .choice-text p { margin:0; color:inherit; line-height:inherit; } @media (max-width: 640px) { .choice-options { grid-template-columns:1fr; } } /* ─── stat ring ─── */ .ring-bg { stroke: var(--bg-elevated); } .ring-fill { stroke: var(--accent); stroke-linecap:round; transition:stroke-dashoffset 1.2s ease; } /* ─── pill select ─── */ .pill { padding:6px 14px; border-radius:20px; font-size:.8rem; font-weight:500; border:1px solid var(--border-strong); background: var(--bg-elevated); color: var(--text-faint); cursor:pointer; transition:all .2s; } .pill.on { background: rgba(var(--accent-rgb), .12); border-color: rgba(var(--accent-rgb), .5); color: var(--accent); } .pill:not(.on):hover { border-color: var(--border-strong); color: var(--text-muted); } /* ─── ghost btn ─── */ .btn-ghost { padding:8px 16px; border-radius:8px; border:1px solid var(--border); font-size:.8rem; color: var(--text-faint); cursor:pointer; transition:all .2s; } .btn-ghost:hover { border-color: var(--border-strong); color: var(--text-muted); } /* ─── knowledge point chip (clickable) ─── */ .kp-chip { background: rgba(var(--accent-rgb), .07); color: var(--accent); border:1px solid rgba(var(--accent-rgb), .18); border-radius:6px; padding:2px 8px; font-size:.7rem; font-weight:600; display:inline-flex; align-items:center; gap:4px; cursor:pointer; transition:all .18s; white-space:nowrap; } .kp-chip:hover { background: rgba(var(--accent-rgb), .18); border-color: rgba(var(--accent-rgb), .5); transform:translateY(-1px); box-shadow:0 2px 10px rgba(var(--accent-rgb), .15); } .kp-chip.no-match { opacity:.35; cursor:default; } .kp-chip.no-match:hover { background: rgba(var(--accent-rgb), .07); border-color: rgba(var(--accent-rgb), .18); transform:none; box-shadow:none; } /* ─── review overlay ─── */ @keyframes flipIn { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} } .review-card { animation:flipIn .22s ease; } /* ─── quick action card ─── */ .qa-card { border-radius:12px; padding:16px; cursor:pointer; transition:all .2s; border:1px solid; } .qa-cyan { background:rgba(var(--accent-rgb),.06); border-color:rgba(var(--accent-rgb),.2); } .qa-cyan:hover { background:rgba(var(--accent-rgb),.12); box-shadow:0 0 20px rgba(var(--accent-rgb),.1); } .qa-purple{ background:rgba(var(--accent-2-rgb),.06); border-color:rgba(var(--accent-2-rgb),.2); } .qa-purple:hover{ background:rgba(var(--accent-2-rgb),.12); box-shadow:0 0 20px rgba(var(--accent-2-rgb),.1); } .qa-amber { background:rgba(var(--accent-warm-rgb),.06); border-color:rgba(var(--accent-warm-rgb),.2); } .qa-amber:hover { background:rgba(var(--accent-warm-rgb),.12); box-shadow:0 0 20px rgba(var(--accent-warm-rgb),.1); } /* ─── dashboard: mastery bar ─── */ .mastery-bar { height:6px; border-radius:3px; background: var(--bg-deep); overflow:hidden; } .mastery-fill { height:100%; border-radius:3px; background:linear-gradient(90deg, var(--grad-from), var(--grad-to)); transition:width 1.2s ease; } /* ─── dashboard: subject level badges ─── */ .lvl-strong { background:rgba(var(--success-rgb),.12); color:var(--success); border:1px solid rgba(var(--success-rgb),.25); border-radius:5px; padding:1px 7px; font-size:.63rem; font-weight:700; white-space:nowrap; } .lvl-ok { background:rgba(var(--accent-warm-rgb),.10); color:var(--accent-warm); border:1px solid rgba(var(--accent-warm-rgb),.2); border-radius:5px; padding:1px 7px; font-size:.63rem; font-weight:700; white-space:nowrap; } .lvl-weak { background:rgba(var(--danger-rgb),.10); color:var(--danger); border:1px solid rgba(var(--danger-rgb),.2); border-radius:5px; padding:1px 7px; font-size:.63rem; font-weight:700; white-space:nowrap; } /* ─── dashboard: timeline ─── */ .tl-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-top:3px; } .tl-line { width:1px; background: var(--border); flex:1; min-height:10px; margin:2px auto; } /* ─── dashboard: system guide flow cards ─── */ .flow-card { background: var(--bg-deep); border:1px solid var(--border); border-radius:12px; padding:14px 16px; flex:1; min-width:0; } .flow-arrow { color: var(--accent); font-size:1.1rem; flex-shrink:0; align-self:center; opacity:.4; } /* ─── inquire: AI 长回复折叠 ─── */ .iq-ai-clamp { position: relative; overflow: hidden; } .iq-ai-clamp.is-collapsed { max-height: 8.75rem; /* 约 5～6 行，便于扫上下文 */ } .iq-ai-clamp.is-collapsed::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2.75rem; pointer-events: none; background: linear-gradient(to bottom, transparent, var(--bg)); } .iq-ai-expand-btn { display: inline-flex; align-items: center; margin-top: 0.35rem; padding: 0.15rem 0; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; color: var(--accent); background: none; border: none; cursor: pointer; opacity: 0.9; } .iq-ai-expand-btn:hover { opacity: 1; text-decoration: underline; } /* 加入/移出复习库：保证可点，不被折叠渐变或底栏误挡 */ .iq-review-actions { position: relative; z-index: 5; pointer-events: auto; } .iq-review-btn { position: relative; z-index: 6; pointer-events: auto; cursor: pointer; min-height: 2.25rem; -webkit-tap-highlight-color: transparent; } .iq-review-btn:disabled { opacity: 0.55; cursor: wait; } .iq-user-img-thumb { display: inline-block; padding: 0; border: 1px solid rgba(var(--accent-rgb), .25); border-radius: 10px; overflow: hidden; background: var(--bg-deep); cursor: zoom-in; max-width: 160px; } .iq-user-img-thumb img { display: block; max-width: 160px; max-height: 120px; width: auto; height: auto; object-fit: cover; } .iq-intent-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.42rem 0.9rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; color: var(--text-bright); background: var(--bg-elevated); border: 1px solid var(--border-strong); cursor: pointer; } .iq-intent-chip:hover { border-color: rgba(var(--accent-rgb), .45); color: var(--accent); } .iq-mode-chip { display: inline-flex; align-items: center; gap: 0.28rem; padding: 0.38rem 0.82rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; color: var(--text-faint); background: var(--bg-elevated); border: 1px solid var(--border-strong); cursor: pointer; } .iq-mode-chip:hover { color: var(--text-muted); border-color: var(--border-strong); } .iq-mode-chip.on { color: var(--accent); background: rgba(var(--accent-rgb), .12); border-color: rgba(var(--accent-rgb), .5); } .iq-mode-chip--action { color: var(--text-bright); font-weight: 600; } .iq-mode-chip--action:hover { border-color: rgba(var(--accent-rgb), .45); color: var(--accent); } .iq-intent-arrow { opacity: .55; } .iq-voice-btn { background: var(--bg-deep); border: 1px solid var(--border); color: var(--text-faint); cursor: pointer; } .iq-voice-btn:hover:not(:disabled) { border-color: rgba(var(--accent-rgb), .35); color: var(--accent); } .iq-voice-btn:disabled { opacity: .45; cursor: not-allowed; } .iq-voice-btn--active { border-color: rgba(var(--danger-rgb), .45) !important; background: rgba(var(--danger-rgb), .1) !important; color: var(--danger) !important; } @keyframes iq-voice-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.85); } } .iq-voice-pulse { animation: iq-voice-pulse 1.1s ease-in-out infinite; } .iq-pg-overlay { position: relative; display: block; width: 100%; margin: 0 0 0.65rem; padding: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--bg-deep); cursor: zoom-in; } .iq-pg-overlay img { display: block; width: 100%; max-height: 132px; object-fit: contain; } .iq-pg-progress { display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.55rem; font-size: 0.78rem; color: var(--text-muted); } .iq-pg-tabs { display: flex; gap: 0.4rem; overflow-x: auto; padding-bottom: 0.35rem; margin-bottom: 0.55rem; scrollbar-width: thin; } .iq-pg-tab { flex-shrink: 0; padding: 0.28rem 0.7rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; color: var(--text-muted); background: var(--bg-deep); border: 1px solid var(--border); cursor: pointer; } .iq-pg-tab.on { color: var(--accent); border-color: rgba(var(--accent-rgb), .4); background: rgba(var(--accent-rgb), .1); } .iq-pg-h { font-size: 0.8rem; font-weight: 700; color: var(--text-bright); margin: 0.7rem 0 0.25rem; } .iq-pg-h:first-child { margin-top: 0; } .iq-pg-stem { line-height: 1.7; color: var(--text); margin: 0.35rem 0 0.15rem; } .iq-pg-section { margin-top: 0.85rem; } .iq-pg-section-title { font-size: 0.86rem; font-weight: 700; color: var(--text-bright); margin: 0 0 0.4rem; letter-spacing: 0.02em; } .iq-pg-answer { line-height: 1.75; color: var(--text); padding: 0.55rem 0.7rem; border-radius: 10px; background: rgba(var(--accent-rgb), .06); border: 1px solid rgba(var(--accent-rgb), .14); } .iq-pg-answer .katex { font-size: 1.05em; } .iq-pg-analysis { line-height: 1.8; color: var(--text); } .iq-pg-analysis h2 { display: none; /* 外层已有「解析」标题 */ } .iq-pg-analysis h3 { margin: 1.05rem 0 0.45rem; padding-bottom: 0.28rem; font-size: 0.86rem; font-weight: 700; color: var(--text-bright); border-bottom: 1px solid var(--border); } .iq-pg-analysis h3:first-child { margin-top: 0.15rem; } .iq-pg-analysis p { margin: 0.45rem 0; color: var(--text-muted); } .iq-pg-analysis ul, .iq-pg-analysis ol { margin: 0.35rem 0 0.55rem; padding-left: 1.15rem; } .iq-pg-analysis li { margin: 0.4rem 0; line-height: 1.8; color: var(--text-muted); } .iq-pg-analysis li::marker { color: rgba(var(--accent-rgb), .55); } .iq-pg-analysis strong { color: var(--text); font-weight: 700; } .iq-pg-analysis .math-block { margin: 0.5rem 0; padding: 0.4rem 0.55rem; border-radius: 8px; background: var(--bg-deep); overflow-x: auto; } .iq-pg-meta .md { display: inline; } .iq-pg-meta .katex { font-size: 1.05em; } .iq-pg-conclusion { color: var(--text); } .iq-pg-conclusion .md { color: var(--success); } .iq-pg-p { font-size: 0.8rem; line-height: 1.65; color: var(--text); margin: 0.2rem 0; } .iq-pg-meta { font-size: 0.75rem; color: var(--text-muted); margin: 0.25rem 0 0; } .iq-pg-link { display: inline-flex; align-items: center; margin-top: 0.55rem; padding: 0; border: 0; background: none; color: var(--accent); font-size: 0.78rem; font-weight: 600; cursor: pointer; } .iq-pg-link:disabled { opacity: 0.55; cursor: wait; } .iq-analogy-wrap { margin-top: 0.75rem; } .iq-analogy-tip { font-size: 0.78rem; color: var(--text-muted); margin: 0 0 0.5rem; line-height: 1.5; } .iq-analogy-card { display: flex; gap: 0.75rem; align-items: stretch; padding: 0.85rem 1rem; border-radius: 14px; background: var(--bg-deep); border: 1px solid var(--border); } .iq-analogy-card-main { flex: 1; min-width: 0; } .iq-analogy-card-title { font-size: 0.9rem; font-weight: 700; color: var(--text-bright); } .iq-analogy-card-sub { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.2rem; } .iq-analogy-go { padding: 0.45rem 1rem; border-radius: 999px; border: 0; background: rgba(var(--accent-rgb), .14); color: var(--accent); font-size: 0.78rem; font-weight: 700; cursor: pointer; } .iq-analogy-go:disabled { opacity: 0.55; cursor: wait; } .iq-analogy-secondary { padding: 0.45rem 0.75rem; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text-muted); font-size: 0.72rem; cursor: pointer; } .iq-analogy-secondary:disabled { opacity: 0.55; cursor: wait; } .iq-analogy-preview { flex-shrink: 0; width: 88px; max-height: 72px; overflow: hidden; padding: 0.35rem 0.45rem; border-radius: 8px; background: #fff; border: 1px solid var(--border); color: var(--text-faint); line-height: 1.35; } .iq-analogy-list { display: flex; flex-direction: column; gap: 0.65rem; } .iq-analogy-item { padding: 0.65rem 0.75rem; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-elevated); } .iq-analogy-item-h { font-size: 0.72rem; font-weight: 600; color: var(--accent); margin-bottom: 0.35rem; } .iq-analogy-draft { width: 100%; resize: vertical; min-height: 2.4rem; padding: 0.45rem 0.6rem; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-deep); color: var(--text); font-size: 0.8rem; line-height: 1.45; } .iq-analogy-reveal { padding: 0.5rem 0.6rem; border-radius: 8px; background: var(--bg-deep); border: 1px solid var(--border); } .iq-analogy-grade { font-size: 0.75rem; font-weight: 700; color: var(--accent); } .iq-analogy-print-modal { box-shadow: 0 16px 48px rgba(0,0,0,.18); } .hw-fig-thumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 0.65rem; } .hw-fig-thumb { width: 44px; height: 44px; padding: 0; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); background: var(--bg-sheet); cursor: zoom-in; flex-shrink: 0; } .hw-fig-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; } .iq-pg-crop { position: relative; display: block; width: 100%; margin: 0.4rem 0; padding: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--bg-deep); cursor: zoom-in; } .iq-pg-crop img { display: block; width: 100%; max-height: 120px; object-fit: contain; } .iq-pg-crop-tag { position: absolute; top: 6px; left: 6px; font-size: 0.65rem; padding: 0.1rem 0.4rem; border-radius: 4px; background: rgba(0,0,0,.45); color: #fff; } /* 复习库：原图用小图标入口，不再内嵌大缩略图 */ .wb-img-chip:hover { background: rgba(var(--accent-rgb), .14) !important; } .wb-img-chip:active { transform: scale(0.97); } .iq-img-lightbox { position: fixed; inset: 0; z-index: 560; display: flex; align-items: center; justify-content: center; padding: 0; background: rgba(0, 0, 0, .78); backdrop-filter: blur(2px); overscroll-behavior: contain; touch-action: none; } .iq-img-lightbox img, .iq-img-view-target { max-width: min(96vw, 920px); max-height: 88vh; border-radius: 8px; box-shadow: 0 12px 40px rgba(0, 0, 0, .45); object-fit: contain; background: var(--bg-elevated); user-select: none; -webkit-user-drag: none; pointer-events: none; display: block; } .iq-img-view-frame { display: flex; align-items: center; justify-content: center; transform-origin: center center; transition: transform .18s ease; max-width: 100%; max-height: 100%; } .iq-img-view-frame.rot-90 { transform: rotate(90deg); } .iq-img-view-frame.rot-180 { transform: rotate(180deg); } .iq-img-view-frame.rot-270 { transform: rotate(270deg); } .iq-img-lightbox-close { position: absolute; top: max(0.75rem, env(safe-area-inset-top, 0px)); right: max(0.75rem, env(safe-area-inset-right, 0px)); z-index: 40; width: 2.75rem; height: 2.75rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .28); background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer; font-size: 1.15rem; line-height: 1; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; } .iq-img-lightbox-close:active { transform: scale(0.96); background: rgba(0, 0, 0, .7); } .iq-img-lightbox-tools { position: absolute; top: max(0.75rem, env(safe-area-inset-top, 0px)); left: max(0.75rem, env(safe-area-inset-left, 0px)); z-index: 40; display: flex; flex-wrap: wrap; gap: 0.4rem; max-width: calc(100vw - 5rem); pointer-events: auto; } .iq-img-lightbox-tool { width: 2.75rem; height: 2.75rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .28); background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer; font-size: 1.2rem; line-height: 1; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; pointer-events: auto; } .iq-img-lightbox-tool:active { transform: scale(0.96); background: rgba(0, 0, 0, .7); } /* 手势舞台铺满灯箱，双指/双击才能稳触发 */ .iq-img-lightbox-stage { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; width: auto; height: auto; max-width: none; max-height: none; padding: 3.5rem 0.75rem 2.5rem; touch-action: none; overflow: hidden; cursor: grab; -webkit-user-select: none; user-select: none; } .iq-img-lightbox-stage:active { cursor: grabbing; } /* 作业原图大图：左右翻页 */ .hw-img-lightbox { z-index: 220; padding: 0; touch-action: none; } .hw-lightbox-stage { /* 手势舞台样式由 .iq-img-lightbox-stage 统一铺满 */ max-width: none; max-height: none; } .hw-lightbox-stage img { border-radius: 8px; box-shadow: 0 12px 40px rgba(0, 0, 0, .45); object-fit: contain; background: var(--bg-elevated); user-select: none; -webkit-user-drag: none; pointer-events: none; display: block; } .hw-lightbox-meta { position: absolute; left: 0; right: 0; bottom: max(0.75rem, env(safe-area-inset-bottom, 0px)); margin-top: 0; text-align: center; font-size: 0.75rem; color: rgba(255, 255, 255, .78); letter-spacing: 0.04em; pointer-events: none; z-index: 2; } .hw-lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 30; width: 2.75rem; height: 2.75rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .28); background: rgba(0, 0, 0, .5); color: #fff; font-size: 1.75rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; } .hw-lightbox-nav:active { background: rgba(0, 0, 0, .7); } .hw-lightbox-prev { left: max(0.4rem, env(safe-area-inset-left, 0px)); } .hw-lightbox-next { right: max(0.4rem, env(safe-area-inset-right, 0px)); } .hw-img-hit-wrap, .hw-thumb-hit-wrap { position: relative; display: inline-block; line-height: 0; max-width: 100%; } .hw-thumb-hit-wrap { width: 100%; height: 100%; } .hw-overlay-hotspots { position: absolute; inset: 0; pointer-events: none; z-index: 2; } .hw-overlay-hotspot { position: absolute; box-sizing: border-box; border-radius: 999px; border: none; /* iOS 点穿全透明节点；保留极淡底色才能命中 */ background: rgba(56, 189, 248, .04); color: transparent; font-size: 0; display: block; pointer-events: auto; cursor: pointer; padding: 0; min-width: 0; min-height: 0; line-height: 0; -webkit-tap-highlight-color: rgba(56, 189, 248, .22); touch-action: manipulation; } .hw-overlay-hotspot:hover, .hw-overlay-hotspot:focus-visible { background: rgba(56, 189, 248, .14); outline: 1px solid rgba(56, 189, 248, .38); outline-offset: 0; } .hw-overlay-hotspot:active { background: rgba(56, 189, 248, .22); } .hw-q-flash { animation: hw-q-flash 1.2s ease; } @keyframes hw-q-flash { 0%, 100% { box-shadow: none; } 25%, 65% { box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .55); } } @media (max-width: 1023px) { .hw-lightbox-nav { width: 3rem; height: 3rem; font-size: 2rem; } .iq-img-lightbox-close, .iq-img-lightbox-tool { width: 3rem; height: 3rem; font-size: 1.25rem; } .hw-img-lightbox .hw-overlay-hotspot { min-width: 44px; min-height: 44px; background: rgba(56, 189, 248, .10); outline: 1px solid rgba(56, 189, 248, .32); } } /* ─── session sidebar (inquire page) ─── */ .sess-sidebar { width:220px; flex-shrink:0; display:flex; flex-direction:column; overflow:hidden; background: var(--bg-deep); border-right:1px solid var(--border); } /* 平板（含小米 Pad）也走抽屉，与底栏一致；桌面 lg(1024)+ 才常驻侧栏 */ @media (max-width:1023px) { .sess-sidebar { position:fixed; top:0; left:0; bottom:0; z-index:90; width:270px; transform:translateX(-100%); transition:transform .25s ease; border-right:none; box-shadow:none; background: var(--bg-elevated); } .sess-sidebar.open { transform:translateX(0); box-shadow:4px 0 30px rgba(0,0,0,.7); } } .sess-item { padding:9px 12px; border-radius:8px; cursor:pointer; transition:background .15s; border-left:2px solid transparent; } .sess-item:hover { background: rgba(var(--accent-rgb), .06); } .sess-item.active { background: rgba(var(--accent-rgb), .10); border-left-color: var(--accent); } .hw-sidebar { width:220px; flex-shrink:0; display:flex; flex-direction:column; overflow:hidden; background: var(--bg-deep); border-right:1px solid var(--border); } @media (max-width:1023px) { .hw-sidebar { position:fixed; top:0; left:0; bottom:0; z-index:90; width:270px; transform:translateX(-100%); transition:transform .25s ease; border-right:none; box-shadow:none; background: var(--bg-elevated); } .hw-sidebar.open { transform:translateX(0); box-shadow:4px 0 30px rgba(0,0,0,.7); } } .hw-hist-item { position: relative; padding: 9px 2.6rem 9px 12px; border-radius: 8px; cursor: pointer; transition: background .15s; border-left: 2px solid transparent; } .hw-hist-item:hover { background: rgba(var(--accent-rgb), .06); } .hw-hist-item.active { background: rgba(var(--accent-rgb), .10); border-left-color: var(--accent); } /* 删除草稿：手机常显、桌面 hover 显 */ .hw-draft-del { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 0.5rem; font-size: 0.95rem; line-height: 1; cursor: pointer; z-index: 2; background: rgba(var(--danger-rgb), .12); border: 1px solid rgba(var(--danger-rgb), .35); color: var(--danger); opacity: 1; transition: background .15s, border-color .15s, opacity .15s; } .hw-draft-del:active { background: rgba(var(--danger-rgb), .22); } @media (min-width: 1024px) { .hw-draft-del { width: 1.5rem; height: 1.5rem; font-size: 0.75rem; opacity: 0; background: transparent; border-color: transparent; color: var(--text-faint); } .hw-hist-item:hover .hw-draft-del, .hw-hist-item:focus-within .hw-draft-del { opacity: 1; background: rgba(var(--danger-rgb), .1); border-color: rgba(var(--danger-rgb), .3); color: var(--danger); } } /* 手机 / 平板作业顶栏：新批改 + 历史入口 */ .hw-mob-toolbar { display: flex; gap: 0.5rem; padding: 0.65rem 0.75rem; background: var(--bg-header); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 30; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .hw-mob-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: 2.75rem; padding: 0.55rem 0.75rem; border-radius: 0.75rem; font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .hw-mob-btn-icon { font-size: 1rem; line-height: 1; } .hw-mob-btn-label { display: inline-flex; align-items: center; gap: 0.3rem; } .hw-mob-badge { display: inline-block; min-width: 1.15rem; padding: 0 0.3rem; border-radius: 999px; font-size: 0.65rem; font-family: ui-monospace, monospace; line-height: 1.25rem; text-align: center; background: rgba(var(--accent-rgb), 0.18); color: var(--accent); border: 1px solid rgba(var(--accent-rgb), 0.35); } .hw-mob-btn-hist { background: var(--bg-deep); border: 1px solid var(--border-strong); color: var(--text); } .hw-mob-btn-hist:active { border-color: rgba(var(--accent-rgb), 0.35); color: var(--accent); } .hw-mob-btn-new { background: rgba(var(--accent-rgb), 0.14); border: 1px solid rgba(var(--accent-rgb), 0.45); color: var(--accent); box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.12); } .hw-mob-btn-new:active { background: rgba(var(--accent-rgb), 0.22); } /* 作业主栏：列宽与题卡套层。手机上切图/题干应吃满内容宽，大类外壳只在真有组头时存在 */ .hw-col { --hw-col-pad-x: 1rem; max-width: 48rem; margin-left: auto; margin-right: auto; width: 100%; padding: 1rem var(--hw-col-pad-x); } .hw-q-layout { display: grid; grid-template-columns: 2rem minmax(0, 1fr); column-gap: 0.75rem; row-gap: 0.5rem; align-items: start; } .hw-q-grade { grid-column: 1; grid-row: 1 / span 2; } .hw-q-head { grid-column: 2; grid-row: 1; min-width: 0; } .hw-q-body { grid-column: 2; grid-row: 2; min-width: 0; } .hw-q-crop { display: block; max-width: 100%; } /* 作业结果：原图缩略条吸顶，滚动题目时仍可对照 */ .hw-pages-sticky { position: sticky; top: 0; z-index: 24; margin: -0.25rem calc(-1 * var(--hw-col-pad-x, 1rem)) 0.85rem; padding: 0.55rem var(--hw-col-pad-x, 1rem) 0.65rem; background: color-mix(in srgb, var(--bg) 88%, transparent); border-bottom: 1px solid var(--border); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18); } @media (max-width: 1023px) { /* 让出手机顶栏「草稿/历史 · 新批改」 */ .hw-pages-sticky { top: 3.85rem; } .hw-col { --hw-col-pad-x: 0.5rem; padding-top: 0.65rem; padding-bottom: 0.65rem; } .hw-col .card.p-8, .hw-col .card.p-6 { padding: 0.9rem !important; } /* 无大类/共享材料：去掉第二层外壳，避免盒套盒吃左右宽 */ .hw-q-group--flat { background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; } .hw-q-group-body { padding: 0.4rem !important; } .hw-q-group--flat .hw-q-group-body { padding: 0 !important; } .hw-q-card.card { padding: 0.7rem 0.75rem !important; } /* 对错标只占题头一行，切图/题干/选项拉满题卡 */ .hw-q-grade { grid-row: 1; } .hw-q-body { grid-column: 1 / -1; } .hw-q-crop { width: 100%; } .hw-q-crop-img { display: block; width: 100%; height: auto; max-height: 16rem; object-fit: contain; } .hw-q-body .hw-fig-thumb { width: 4.5rem; height: 4.5rem; } .hw-q-list.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.65rem !important; } } .hw-pages-sticky-inner { display: flex; align-items: center; gap: 0.65rem; min-width: 0; flex-wrap: wrap; } .hw-pages-sticky-media { min-width: 0; } .hw-pages-sticky-label { flex-shrink: 0; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); white-space: nowrap; } .hw-pages-sticky-thumbs { display: flex; flex-wrap: nowrap; gap: 0.4rem; overflow-x: auto; min-width: 0; flex: 1; padding-bottom: 2px; -webkit-overflow-scrolling: touch; } .hw-pages-sticky-thumbs::-webkit-scrollbar { height: 3px; } .hw-pages-thumb { position: relative; flex-shrink: 0; width: 44px; height: 58px; border-radius: 0.45rem; overflow: hidden; border: 1px solid var(--border-strong); background: var(--bg-sheet); padding: 0; cursor: pointer; transition: border-color 0.15s, transform 0.15s, opacity 0.15s; } .hw-pages-thumb:hover, .hw-pages-thumb:focus-visible { border-color: rgba(var(--accent-rgb), 0.55); opacity: 0.95; outline: none; } .hw-pages-thumb:active { transform: scale(0.96); } .hw-pages-thumb .hw-overlay-hotspot { min-width: 0; min-height: 0; } @media (hover: none) and (pointer: coarse) { /* 缩略图太小，手机点题号改为先放大批改图再跳转 */ .hw-pages-thumb .hw-overlay-hotspots { pointer-events: none; } } .hw-pages-thumb-badge { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; text-align: center; font-size: 9px; line-height: 1.2; padding: 1px 0; background: rgba(0, 0, 0, 0.55); color: #fff; } .hw-pages-sticky-hint { flex-shrink: 0; font-size: 0.65rem; color: var(--text-faint); white-space: nowrap; } .hw-pages-sticky-actions { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-left: auto; flex-shrink: 0; max-width: 100%; } .hw-pages-sticky-btn { flex-shrink: 0; font-size: 0.72rem; font-weight: 600; line-height: 1.2; padding: 0.4rem 0.7rem; border-radius: 0.5rem; border: 1px solid transparent; white-space: nowrap; transition: opacity 0.15s, transform 0.12s; cursor: pointer; } .hw-pages-sticky-btn:hover { opacity: 0.92; } .hw-pages-sticky-btn:active { transform: scale(0.97); } .hw-pages-sticky-btn:disabled { cursor: not-allowed; } .hw-pages-more { position: relative; flex-shrink: 0; } .hw-pages-more-toggle.is-open { background: rgba(var(--accent-rgb), 0.12); border-color: rgba(var(--accent-rgb), 0.32); color: var(--accent); } .hw-pages-more-menu { position: absolute; right: 0; top: calc(100% + 0.35rem); z-index: 32; min-width: 10.75rem; padding: 0.35rem; border-radius: 0.65rem; background: var(--bg); border: 1px solid var(--border); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28); display: flex; flex-direction: column; gap: 0.2rem; } .hw-pages-more-menu .hw-pages-sticky-btn { width: 100%; justify-content: flex-start; text-align: left; flex: none; min-width: 0; } @media (max-width: 640px) { .hw-pages-sticky-actions { margin-left: 0; width: 100%; } .hw-pages-sticky-btn { flex: 1 1 auto; text-align: center; min-width: calc(50% - 0.35rem); } .hw-pages-more { /* 菜单相对整行操作区定位，避免「更多」换到左下角后 right:0 往左溢出 */ position: static; flex: 0 0 auto; } .hw-pages-more .hw-pages-more-toggle { flex: 0 0 auto; min-width: auto; } .hw-pages-more-menu { left: 0; right: 0; min-width: 0; width: auto; } } @media (max-width: 480px) { .hw-pages-sticky-hint { display: none; } .hw-pages-thumb { width: 40px; height: 52px; } } /* 过题过渡：转圈 + 鼓励语 */ @keyframes review-spin { to { transform: rotate(360deg); } } .review-flash-spinner { width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 2.5px solid var(--border-strong); border-top-color: var(--accent); animation: review-spin .7s linear infinite; } .review-flash-tip { margin-top: 1.25rem; max-width: 18rem; text-align: center; font-size: 1.125rem; line-height: 1.6; font-weight: 600; color: var(--accent) !important; } .review-flash-tip--header { margin-top: 0; max-width: none; text-align: left; font-size: 0.95rem; } /* ─── bottom tab bar：手机 + 平板（<1024）；桌面用左侧栏 ─── */ :root { --btab-h: 0px; --iq-input-h: 4.5rem; /* 输入条预留高度（固定定位时给消息区垫底） */ } .btab-bar { position:fixed; bottom:0; left:0; right:0; z-index:50; display:none; align-items:stretch; background: var(--bg-btab); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-top:1px solid var(--border); padding-bottom:env(safe-area-inset-bottom, 0px); box-sizing:border-box; min-height:calc(3.5rem + env(safe-area-inset-bottom, 0px)); } @media (max-width: 1023px) { :root { /* 底栏 + 系统手势条余量（小米等 Android 常无 safe-area） */ --btab-h: calc(3.5rem + env(safe-area-inset-bottom, 0px) + 12px); } .btab-bar { display:flex !important; } } @media (min-width: 1024px) { .btab-bar { display:none !important; } } .btab-btn { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:8px 2px 6px; gap:2px; background:none; border:none; cursor:pointer; color: var(--text-faint); transition:color .18s; position:relative; min-width:0; } .btab-btn.on { color: var(--accent); } .btab-btn .ti { font-size:1.25rem; line-height:1.1; } .btab-btn .tl { font-size:.55rem; font-weight:600; letter-spacing:.02em; white-space:nowrap; } .btab-btn .tb { font-size:.55rem; line-height:1.3; min-width:1rem; text-align:center; position:absolute; top:5px; right:calc(50% - 18px); background: rgba(var(--accent-rgb), .18); color: var(--accent); border:1px solid rgba(var(--accent-rgb), .35); border-radius:6px; padding:0 3px; } .btab-btn .tline { position:absolute; top:0; left:50%; transform:translateX(-50%); width:28px; height:2.5px; border-radius:0 0 3px 3px; background: var(--accent); box-shadow:0 0 10px rgba(var(--accent-rgb), .7); } /* ─── mobile / tablet layout tweaks ─── */ .mob-scroll { padding-bottom: calc(var(--btab-h) + 1rem) !important; } @media (max-width: 1023px) { .page-panel.page-fill { padding-bottom: var(--btab-h); box-sizing: border-box; } /* 题目询问：输入条固定贴在底栏上方，避免再被挡住 */ .iq-input-bar { position: fixed !important; left: 0; right: 0; bottom: var(--btab-h); z-index: 45; padding: 0.75rem 1rem !important; background: color-mix(in srgb, var(--bg) 98%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--border); box-sizing: border-box; } /* 预留足够高度：输入条 + 底栏，避免「加入复习库」落在遮罩下点不到 */ #iq-messages { padding-bottom: calc(var(--iq-input-h) + var(--btab-h) + 5.5rem) !important; } .hw-main-scroll { padding-bottom: 1rem; } /* 手机端整体疏密优化 */ .scan-line { display: none; } /* 各页通用：卡片内边距收紧、区块间距更均匀 */ .page-panel.page-pad > .space-y-5 { --tw-space-y-reverse: 0; } .page-panel.page-pad .card.p-5, .page-panel.page-pad .card.p-6 { padding: 1rem !important; } .page-panel.page-pad .mb-6 { margin-bottom: 1rem !important; } .page-panel.page-pad .mb-5 { margin-bottom: 0.85rem !important; } .page-panel.page-pad .gap-5 { gap: 0.85rem !important; } .card:hover { transform: none; box-shadow: none; } .card.dash-card, .dash-stack .card { padding: 1rem !important; } .mob-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.65rem !important; margin-bottom: 1rem !important; } .mob-stats-grid .card { padding: 0.85rem 0.9rem !important; } .mob-stats-grid .card .text-2xl { font-size: 1.25rem !important; } header .page-desc { display: none; } .dash-stack.space-y-5 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.85rem !important; } .dash-guide-details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.15rem 0; } .dash-guide-details > summary::-webkit-details-marker { display: none; } .dash-guide-details .guide-body { margin-top: 1rem; } /* 顶部身份卡：平板/手机强制上下排，避免 md 左右并排把标题挤成竖排字 */ .dash-hero-layout { flex-direction: column !important; align-items: stretch !important; } .dash-hero-identity { width: 100% !important; min-width: 0 !important; flex: none !important; } .dash-hero-title { white-space: nowrap !important; word-break: keep-all !important; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .dash-hero-greeting { writing-mode: horizontal-tb !important; word-break: normal !important; overflow-wrap: anywhere; } .dash-hero-metrics { display: grid !important; grid-template-columns: minmax(7.25rem, max-content) minmax(0, 1fr); gap: 0.85rem; width: 100% !important; flex: none !important; margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid var(--border); } .dash-hero-metrics > * { width: 100% !important; text-align: left !important; } .dash-streak { min-width: 7.25rem; } .dash-streak-num { display: inline-block; line-height: 1.05; word-break: keep-all; overflow-wrap: normal; } .dash-streak-sub { transform-origin: left center; } .dash-mastery { min-width: 0; } .dash-mastery .flex { gap: 0.35rem; } .dash-mastery .flex > span { white-space: nowrap; } .dash-hero-metrics .text-3xl { font-size: 1.5rem !important; } .points-pill { white-space: nowrap; } @media (max-width: 380px) { .dash-hero-metrics { grid-template-columns: minmax(6.35rem, max-content) minmax(0, 1fr); gap: 0.65rem; } .dash-streak { min-width: 6.35rem; } .dash-hero-metrics .text-3xl { font-size: 1.32rem !important; } .dash-streak-sub { font-size: 0.64rem !important; } .points-pill { padding: 0.22rem 0.5rem; font-size: 0.68rem; } } /* 今日任务：平板/手机上下排，避免 sm 左右并排 + 右侧 100% 把左侧挤成竖排字 */ .dash-task-layout { flex-direction: column !important; align-items: stretch !important; } .dash-task-main { width: 100% !important; min-width: 0; flex: none !important; } .dash-task-side { width: 100% !important; max-width: none !important; flex-shrink: 1 !important; text-align: left !important; padding-top: 0.75rem; border-top: 1px solid var(--border); } .dash-task-side .flex-wrap { justify-content: flex-start !important; } .dash-task-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; word-break: keep-all; } .dash-task-item { min-width: 0; } } /* 多页面叠放：全部绝对定位在 #main-scroll 内，互不撑开文档流 */ #main-scroll { position: relative; overflow: hidden; } .page-panel { position: absolute; inset: 0; width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* Alpine 启动前隐藏全部面板，避免绝对定位叠层闪烁 */ html:not([data-alpine-ready]) .page-panel { display: none !important; } .page-panel.page-pad { padding: 0.75rem 0.85rem; } @media (min-width: 768px) { .page-panel.page-pad { padding: 2rem; } } /* 作业/答疑：自己做 flex 布局，禁止面板滚动 */ .page-panel.page-fill { overflow: hidden; min-height: 0; } .page-panel.page-fill:not(.is-page-hidden) { display: flex !important; flex-direction: row; } [x-cloak] { display: none !important; } .page-panel.is-page-hidden { display: none !important; visibility: hidden !important; pointer-events: none !important; } /* ensure iOS smooth momentum scroll */ .overflow-y-auto { -webkit-overflow-scrolling: touch; } /* top iOS status bar safe area for header */ @supports(padding-top: env(safe-area-inset-top)) { header { padding-top: max(env(safe-area-inset-top, 0px), 1rem); } } /* ─── themed shell surfaces (override Tailwind hardcodes) ─── */ aside.sidebar-shell, .sidebar-shell { background: var(--bg-header) !important; border-color: var(--border) !important; } header.app-header { background: var(--bg-header) !important; border-color: var(--border) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .more-sheet { background: var(--bg-sheet) !important; border-color: var(--border-strong) !important; } .ui-chip { display: inline-flex; align-items: center; gap: 0.25rem; border-radius: 999px; padding: 0.15rem 0.55rem; font-size: 0.7rem; font-weight: 600; border: 1px solid rgba(var(--accent-rgb), .25); background: rgba(var(--accent-rgb), .1); color: var(--accent); } .ui-chip.soft-blue { border-color: rgba(59, 130, 246, .25); background: rgba(59, 130, 246, .1); color: #60a5fa; } .ui-chip.soft-violet { border-color: rgba(129, 140, 248, .25); background: rgba(129, 140, 248, .1); color: #818cf8; } [data-theme="paper"] .ui-chip.soft-blue, [data-theme="eye"] .ui-chip.soft-blue, [data-theme="sage"] .ui-chip.soft-blue { color: #2563eb; } [data-theme="paper"] .ui-chip.soft-violet, [data-theme="eye"] .ui-chip.soft-violet, [data-theme="sage"] .ui-chip.soft-violet { color: #6366f1; } .points-pill { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.65rem; border-radius: 999px; font-size: 0.75rem; background: rgba(251, 191, 36, .1); border: 1px solid rgba(251, 191, 36, .25); color: #fbbf24; } [data-theme="paper"] .points-pill, [data-theme="eye"] .points-pill, [data-theme="sage"] .points-pill { background: rgba(217, 119, 6, .1); border-color: rgba(217, 119, 6, .28); color: #b45309; } /* ─── theme picker ─── */ .theme-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; } @media (min-width: 1024px) { .theme-picker { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .theme-menu-panel { max-height: min(70vh, 420px); overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 0.85rem !important; } .theme-menu-backdrop { background: color-mix(in srgb, var(--bg) 35%, transparent); } /* 挂到 body 后：手机居中，桌面靠右上（避开顶栏） */ .theme-menu-panel.fixed { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(18rem, calc(100vw - 2rem)); max-height: min(70vh, 28rem); } @media (min-width: 1024px) { .theme-menu-panel.fixed { left: auto; right: 1.25rem; top: 4.75rem; transform: none; width: 18rem; } .theme-menu-backdrop { background: transparent; } } .theme-scrim { background: color-mix(in srgb, var(--bg) 55%, transparent); } .review-overlay { position: fixed; inset: 0; z-index: 400; display: flex; flex-direction: column; overflow: hidden; /* 移动端地址栏会导致 100vh 高于可视区，底栏被顶出且页面锁滚动 */ height: 100%; height: 100dvh; max-height: 100dvh; background: var(--bg); } .review-shell { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; flex-direction: column; overflow: hidden; } .review-header { flex: 0 0 auto; } .review-scroll { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; } .review-actions { flex: 0 0 auto; position: relative; z-index: 2; box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12); } /* 复习库卡片操作区：窄屏两列对齐，宽屏横向排列 */ .wb-entry-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; padding-top: 0.75rem; border-top: 1px solid var(--border); } .wb-entry-actions .wb-act { min-width: 0; min-height: 2.35rem; padding: 0.45rem 0.4rem; border-radius: 0.55rem; font-size: 0.72rem; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; } .wb-entry-actions .wb-act-primary { grid-column: 1 / -1; background: rgba(var(--accent-rgb), .08); border: 1px solid rgba(var(--accent-rgb), .2); color: var(--accent); } .wb-entry-actions .wb-act-secondary { background: rgba(var(--accent-2-rgb), .08); border: 1px solid rgba(var(--accent-2-rgb), .25); color: var(--accent-2); } .wb-entry-actions .wb-act-variant { background: rgba(var(--accent-2-rgb), .1); border: 1px solid rgba(var(--accent-2-rgb), .3); color: var(--accent-2); } .wb-entry-actions .wb-act-warm { background: rgba(var(--accent-warm-rgb), .1); border: 1px solid rgba(var(--accent-warm-rgb), .3); color: var(--accent-warm); } .wb-entry-actions .wb-act-edit { background: rgba(var(--accent-rgb), .06); border: 1px solid rgba(var(--accent-rgb), .22); color: var(--accent); } .wb-entry-actions .wb-act-delete { background: var(--bg-elevated); border: 1px solid var(--border-strong); color: var(--text-muted); font-weight: 500; } @media (min-width: 640px) { .wb-entry-actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.5rem; } .wb-entry-actions .wb-act { flex: 0 1 auto; padding: 0.5rem 0.75rem; font-size: 0.75rem; min-height: 2.25rem; } .wb-entry-actions .wb-act-primary { flex: 1 1 6rem; grid-column: unset; } .wb-entry-actions .wb-act-delete { flex: 0 0 auto; min-width: 3.25rem; } } .review-explain-panel .md { overflow-wrap: anywhere; word-break: break-word; } /* 作业上传：图片裁剪（容器需有明确宽高，Cropper 才能铺满） */ .hw-crop-stage { position: relative; width: 100%; min-height: 240px; height: min(62vh, 560px); } .hw-crop-stage .hw-crop-img { display: block; max-width: 100%; } .hw-crop-stage .cropper-container { width: 100% !important; height: 100% !important; } /* Cropper 默认只放大右下角（手机 20px，其余 5px）；四角同样做大，手机才捏得住 */ .hw-crop-stage .cropper-point.point-nw, .hw-crop-stage .cropper-point.point-ne, .hw-crop-stage .cropper-point.point-sw, .hw-crop-stage .cropper-point.point-se { width: 20px; height: 20px; opacity: 1; border-radius: 2px; } .hw-crop-stage .cropper-point.point-nw { left: -10px; top: -10px; } .hw-crop-stage .cropper-point.point-ne { right: -10px; top: -10px; } .hw-crop-stage .cropper-point.point-sw { left: -10px; bottom: -10px; } .hw-crop-stage .cropper-point.point-se { right: -10px; bottom: -10px; } .hw-crop-stage .cropper-point.point-nw::before, .hw-crop-stage .cropper-point.point-ne::before, .hw-crop-stage .cropper-point.point-sw::before, .hw-crop-stage .cropper-point.point-se::before { content: ""; position: absolute; width: 44px; height: 44px; background: transparent; } .hw-crop-stage .cropper-point.point-nw::before { left: -13px; top: -13px; } .hw-crop-stage .cropper-point.point-ne::before { right: -13px; top: -13px; } .hw-crop-stage .cropper-point.point-sw::before { left: -13px; bottom: -13px; } .hw-crop-stage .cropper-point.point-se::before { right: -13px; bottom: -13px; } .hw-upload-tips summary::-webkit-details-marker { display: none; } .hw-upload-tips[open] summary span:last-child { opacity: .7; } .theme-swatch { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: 0.55rem 0.25rem 0.45rem; border-radius: 0.75rem; border: 1px solid var(--border); background: var(--bg-deep); cursor: pointer; transition: border-color .15s, background .15s, transform .15s; min-width: 0; } .theme-swatch:active { transform: scale(0.97); } .theme-swatch.on { border-color: rgba(var(--accent-rgb), .55); background: rgba(var(--accent-rgb), .1); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .2); } .theme-swatch .swatch-dots { display: flex; gap: 3px; height: 14px; align-items: center; } .theme-swatch .swatch-dots i { width: 8px; height: 8px; border-radius: 50%; display: block; } .theme-swatch .swatch-name { font-size: 0.6rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; padding: 0 2px; } .theme-swatch.on .swatch-name { color: var(--accent); } /* 全主题：Tailwind 色名映射到 token，避免硬编码浅色字叠白底 */ .text-white { color: var(--text-bright) !important; } .text-slate-100, .text-slate-200 { color: var(--text) !important; } .text-slate-300 { color: var(--text) !important; } .text-slate-400 { color: var(--text-muted) !important; } .text-slate-500, .text-slate-600 { color: var(--text-faint) !important; } .text-cyan-400, .text-cyan-300, .text-cyan-500 { color: var(--accent) !important; } .text-amber-400, .text-amber-200, .text-amber-200\/90 { color: var(--accent-warm) !important; } .text-emerald-400, .text-emerald-500 { color: var(--success) !important; } .text-red-400, .text-red-500 { color: var(--danger) !important; } .border-slate-700 { border-color: var(--border-strong) !important; } .border-cyan-900 { border-color: rgba(var(--accent-rgb), .3) !important; } [data-theme="paper"] input, [data-theme="paper"] select, [data-theme="paper"] textarea, [data-theme="eye"] input, [data-theme="eye"] select, [data-theme="eye"] textarea, [data-theme="sage"] input, [data-theme="sage"] select, [data-theme="sage"] textarea { color: var(--text-bright); } /* 作业「编辑题目」弹窗：全用主题 token，保证标签/输入对比度 */ .hw-edit-backdrop { background: color-mix(in srgb, var(--bg) 55%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .hw-edit-panel { background: var(--bg-sheet); border: 1px solid var(--border-strong); box-shadow: 0 24px 80px color-mix(in srgb, var(--bg) 70%, transparent); color: var(--text); } .hw-edit-panel .hw-edit-accent { background: linear-gradient(90deg, var(--accent), var(--accent-2)); } .hw-edit-panel .hw-edit-title { color: var(--text-bright); font-weight: 600; } .hw-edit-panel .hw-edit-sub { color: var(--text-muted); } .hw-edit-panel .hw-edit-hint { background: var(--bg-elevated); color: var(--text); border: 1px solid var(--border); } .hw-edit-panel .hw-edit-label { color: var(--text-bright); font-weight: 500; } .hw-edit-panel .hw-edit-label .hw-edit-label-hint { color: var(--text-muted); font-weight: 400; } .hw-edit-panel .hw-edit-field { background: var(--bg-elevated); border: 1px solid var(--border-strong); color: var(--text-bright); color-scheme: inherit; } .hw-edit-panel .hw-edit-field::placeholder { color: var(--text-muted); opacity: 1; } .hw-edit-panel .hw-edit-field:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .2); } .hw-edit-panel select.hw-edit-field option { background: var(--bg-sheet); color: var(--text-bright); } .hw-edit-panel .hw-edit-close { color: var(--text-bright); border: 1px solid var(--border-strong); background: var(--bg-elevated); } .hw-edit-panel .hw-edit-close:hover { border-color: var(--accent); color: var(--accent); } .hw-edit-panel .hw-edit-btn-primary { background: rgba(var(--accent-rgb), .16); border: 1px solid rgba(var(--accent-rgb), .45); color: var(--accent); } .hw-edit-panel .hw-edit-btn-primary:hover:not(:disabled) { background: rgba(var(--accent-rgb), .28); } .hw-edit-panel .hw-edit-btn-secondary { background: rgba(var(--accent-2-rgb), .14); border: 1px solid rgba(var(--accent-2-rgb), .4); color: var(--accent-2); } .hw-edit-panel .hw-edit-btn-secondary:hover:not(:disabled) { background: rgba(var(--accent-2-rgb), .26); } .hw-edit-panel .hw-edit-btn-primary:disabled, .hw-edit-panel .hw-edit-btn-secondary:disabled, .hw-edit-panel .hw-edit-close:disabled { opacity: .55; cursor: not-allowed; } /* 编辑弹窗：数学符号工具条 + 实时预览 */ .hw-edit-panel .math-edit-bar { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 0.75rem; padding: 0.55rem 0.7rem; } .hw-edit-panel .math-edit-bar-label { font-size: 10px; color: var(--text-muted); margin-bottom: 0.35rem; } .hw-edit-panel .math-edit-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; } .hw-edit-panel .math-edit-chip { min-width: 1.85rem; padding: 0.2rem 0.45rem; border-radius: 0.45rem; border: 1px solid var(--border-strong); background: var(--bg-sheet); color: var(--text-bright); font-size: 12px; line-height: 1.35; cursor: pointer; transition: border-color .15s, background .15s; } .hw-edit-panel .math-edit-chip:hover { border-color: var(--accent); background: rgba(var(--accent-rgb), .1); color: var(--accent); } .hw-edit-panel .math-edit-preview { background: color-mix(in srgb, var(--bg-elevated) 80%, transparent); border: 1px dashed var(--border); color: var(--text); word-break: break-word; } .hw-edit-panel .math-edit-preview:empty { display: none; }