/* ============================================================ WikiTA — Nook Inc. Corporate × AI 學術專業感 ───────────────────────────────────────────────────────────── Mint primary, dark green-grey ink, soft orange CTA. Ratio: 70% white / 20% mint / 8% ink / 2% orange accent. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700;800&family=Quicksand:wght@500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* ── Brand palette ───────────────────────────────────────── */ --mint: #7fc5b3; --mint-deep: #2d7a64; --mint-soft: #ecf7f3; --mint-line: rgba(127, 197, 179, 0.32); --ink: #1f2d2a; --ink-soft: #4a5b56; --orange: #f4a261; --orange-deep:#d98843; --white: #ffffff; --cream: #fbfdfc; /* ── Semantic ────────────────────────────────────────────── */ --bg: var(--cream); --bg-card: var(--white); --bg-soft: var(--mint-soft); --fg: var(--ink); --muted: var(--ink-soft); --line: var(--mint-line); --accent: var(--mint); --cta: var(--orange); /* Code-block surface — kept dark in BOTH themes (terminal look). */ --code-bg: #1f2d2a; --code-fg: #c8d4d0; /* Background grid opacity (toned down in dark mode). */ --grid-line: var(--mint-line); /* ── Status (mapped to brand palette, kept warm) ─────────── */ --status-mastered: #1f6b58; --status-proficient: #7fc5b3; --status-developing: #e8c66f; --status-weak: #e88b78; --status-unknown: #e6e8e6; /* Foreground for text on those status backgrounds — theme-stable so * pills stay legible regardless of light/dark. */ --on-status-dark: #ffffff; --on-status-light: #1f2d2a; /* ── Radii (3 tiers) ─────────────────────────────────────── */ --r-sm: 8px; --r-md: 16px; --r-lg: 24px; /* ── Soft single-layer shadows (no stacking) ─────────────── */ --shadow-1: 0 1px 3px rgba(31, 45, 42, 0.04); --shadow-2: 0 2px 8px rgba(31, 45, 42, 0.06); --shadow-3: 0 6px 20px rgba(31, 45, 42, 0.08); /* ── Fonts ───────────────────────────────────────────────── */ --font-zh: "Noto Sans TC", -apple-system, BlinkMacSystemFont, "PingFang TC", sans-serif; --font-en: "Quicksand", "Noto Sans TC", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; color-scheme: light; } /* ============================================================ Dark mode — opt-in via data-theme="dark" on ───────────────────────────────────────────────────────────── Strategy: invert the *semantic* slots (bg/card/ink) so every existing rule that says `background: var(--white)` or `color: var(--ink)` automatically does the right thing. Brand colors (mint, orange) stay constant. Code blocks keep a fixed dark surface via --code-bg. ============================================================ */ [data-theme="dark"] { --ink: #e6ede9; /* primary text — now light */ --ink-soft: #98a8a4; /* secondary text */ --mint-deep: #a8d8c7; /* links: lighter for AA contrast on dark bg */ --mint-soft: #2a3d39; /* tag pills / soft backdrops */ --mint-line: rgba(127, 197, 179, 0.22); --white: #1f2d2a; /* card surface */ --cream: #141f1d; /* page surface (darker than card) */ --bg: var(--cream); --bg-card: var(--white); --bg-soft: var(--mint-soft); --fg: var(--ink); --muted: var(--ink-soft); --line: var(--mint-line); --code-bg: #0e1716; --code-fg: #c8d4d0; --grid-line: rgba(127, 197, 179, 0.10); /* Status pills: kept saturated; tweaked for legibility on dark cards */ --status-mastered: #2d9279; --status-proficient: #6db5a3; --status-developing: #d4a93f; --status-weak: #d8674a; --status-unknown: #3a4a45; --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.20); --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.30); --shadow-3: 0 6px 20px rgba(0, 0, 0, 0.45); color-scheme: dark; } * { box-sizing: border-box; } [x-cloak] { display: none !important; } html { /* Reserve scrollbar gutter even when content is short, so loading new * content (mastery / wiki list / mode change) doesn't add/remove the * scrollbar and shift the whole layout horizontally. */ scrollbar-gutter: stable; } html, body { margin: 0; background-color: var(--bg); color: var(--fg); font: 16px/1.6 var(--font-zh); /* Subtle technical grid — never dominant. Toned down in dark mode * via --grid-line so the grid doesn't shimmer against dark surfaces. */ background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 32px 32px; background-position: -1px -1px; background-attachment: fixed; } main { max-width: 760px; margin: 0 auto; padding: 24px 16px 80px; position: relative; } a { color: var(--mint-deep); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { color: var(--ink); } code { font: 500 0.92em var(--font-mono); background: var(--mint-soft); color: var(--mint-deep); padding: 1px 6px; border-radius: 4px; } /* ============================================================ Topbar with mascot ============================================================ */ .topbar { display: flex; align-items: center; flex-wrap: wrap; /* allow .who to wrap below the brand on narrow viewports */ gap: 12px; padding: 14px 18px; margin-bottom: 24px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-1); } .topbar .who { flex-wrap: wrap; /* let the 5–7 action buttons wrap inside .who too */ row-gap: 6px; } .topbar h1 { margin: 0; font: 700 1.35rem var(--font-en); color: var(--ink); letter-spacing: 0.01em; display: flex; align-items: center; gap: 10px; } .topbar h1 .brand-tag { font: 500 0.62rem var(--font-mono); background: var(--mint-soft); color: var(--mint-deep); padding: 3px 8px; border-radius: 999px; letter-spacing: 0.1em; text-transform: uppercase; } .topbar .who { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 0.88rem; color: var(--muted); } .topbar .who > span:first-child { font: 500 0.85rem var(--font-mono); color: var(--ink); } /* Robot mascot — inline SVG sized via parent */ .mascot { width: 40px; height: 40px; flex-shrink: 0; } .mascot .antenna-dot { animation: antenna-pulse 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } .mascot .eye { animation: eye-blink 5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } @keyframes antenna-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(1.35); } } @keyframes eye-blink { 0%, 92%, 100% { transform: scaleY(1); } 94%, 98% { transform: scaleY(0.1); } 96% { transform: scaleY(0.1); } } /* ============================================================ Buttons ============================================================ */ button { font: 500 0.95rem var(--font-zh); background: var(--mint); color: var(--white); border: 0; padding: 10px 22px; border-radius: var(--r-sm); cursor: pointer; transition: background 0.15s, transform 0.15s, box-shadow 0.15s; box-shadow: 0 1px 0 rgba(31, 45, 42, 0.04); } button:hover:not(:disabled) { background: var(--mint-deep); transform: translateY(-1px); box-shadow: var(--shadow-2); } button:active:not(:disabled) { transform: translateY(0); } button:disabled { opacity: 0.45; cursor: not-allowed; } button.secondary { background: var(--white); color: var(--mint-deep); border: 1px solid var(--mint); } button.secondary:hover:not(:disabled) { background: var(--mint-soft); color: var(--ink); } button.cta { background: var(--orange); color: var(--white); } button.cta:hover:not(:disabled) { background: var(--orange-deep); } button.link { background: none; color: var(--mint-deep); padding: 4px 8px; font: 500 0.88rem var(--font-zh); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; box-shadow: none; } button.link:hover:not(:disabled) { background: var(--mint-soft); color: var(--ink); transform: none; box-shadow: none; } /* ============================================================ Card ============================================================ */ .card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 24px; margin-bottom: 16px; box-shadow: var(--shadow-1); transition: box-shadow 0.2s, transform 0.2s; } .card.hover-lift:hover { box-shadow: var(--shadow-3); transform: translateY(-2px); } .card h2 { margin: 0 0 4px; font: 700 1.2rem var(--font-zh); color: var(--ink); } .card h3 { margin: 18px 0 8px; font: 500 1.02rem var(--font-zh); color: var(--ink); } /* ============================================================ CLI subheading — terminal command vibe under each card title ============================================================ */ .cli-line { font: 400 0.78rem var(--font-mono); color: var(--ink-soft); margin: 0 0 18px; letter-spacing: 0.01em; user-select: none; } .cli-line::before { content: "$"; color: var(--mint); font-weight: 600; margin-right: 6px; } .cli-line .arg { color: var(--orange-deep); } .cli-line .comment { color: var(--muted); margin-left: 6px; } .cli-line .comment::before { content: "// "; opacity: 0.55; } /* ============================================================ Mono ID badge — for QST_01, TIER_02, etc. ============================================================ */ .mono-id { display: inline-block; font: 500 0.7rem var(--font-mono); color: var(--mint-deep); background: var(--mint-soft); padding: 3px 9px; border-radius: 6px; letter-spacing: 0.08em; text-transform: uppercase; } .mono-id.alt { color: var(--orange-deep); background: #fef3ed; } .mono-id.ink { color: var(--ink); background: #eef0ef; } /* Hex shield (tier badges) — clip-path hexagon */ .hex-badge { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 32px; background: var(--mint); color: var(--white); font: 700 0.72rem var(--font-mono); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); } /* ============================================================ Inputs ============================================================ */ input[type="text"], input[type="number"], textarea, select { font: 400 0.95rem var(--font-zh); padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--white); color: var(--fg); width: 100%; transition: border-color 0.15s, box-shadow 0.15s; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--mint); box-shadow: 0 0 0 3px rgba(127, 197, 179, 0.18); } textarea { font-family: var(--font-zh); resize: vertical; line-height: 1.55; } textarea.freetext { font-family: var(--font-zh); } /* ============================================================ Misc text ============================================================ */ .muted { color: var(--muted); font-size: 0.88rem; } /* Error banner */ .error-banner { background: #fef3ed; color: #8a4218; border: 1px solid #f4cba9; border-left: 4px solid var(--orange); border-radius: var(--r-sm); padding: 12px 16px; margin-bottom: 16px; font-size: 0.92rem; } /* ============================================================ Topic picker ============================================================ */ .topic-list { list-style: none; padding: 0; margin: 0; display: grid; /* auto-fill — column count grows with viewport width. min 240px per card so labels don't crunch; max 1fr lets them stretch evenly. */ grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; } .topic-list li { display: flex; } .topic-button { display: flex; flex-direction: column; width: 100%; text-align: left; background: var(--white); color: var(--fg); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 20px; cursor: pointer; transition: all 0.15s; font-family: var(--font-zh); box-shadow: var(--shadow-1); } .topic-button:hover { border-color: var(--mint); background: var(--mint-soft); transform: translateY(-2px); box-shadow: var(--shadow-2); } .topic-button .mono-id { align-self: flex-start; } .topic-button strong { display: block; font: 700 1rem var(--font-zh); color: var(--ink); margin-bottom: 6px; } /* Description fills remaining vertical space so card heights match even if some descriptions are 1 line and others are 3. */ .topic-button p { margin: 6px 0 0; flex: 1; } /* ============================================================ Mastery strip (student's own row) ============================================================ */ .mastery-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 14px 0 18px; } .cell { padding: 10px 12px; border-radius: var(--r-sm); display: flex; justify-content: space-between; align-items: center; font-size: 0.86rem; min-height: 42px; border: 1px solid var(--line); transition: transform 0.15s; } .cell:hover { transform: translateY(-1px); } .cell-name { font-weight: 500; } .cell-tier { font: 500 0.7rem var(--font-mono); padding: 2px 7px; border: 1px solid currentColor; border-radius: 999px; letter-spacing: 0.04em; } .status-mastered { background: var(--status-mastered); color: var(--on-status-dark); border-color: var(--status-mastered); } .status-proficient { background: var(--status-proficient); color: var(--on-status-dark); border-color: var(--status-proficient); } .status-developing { background: var(--status-developing); color: var(--on-status-light); border-color: var(--status-developing); } .status-weak { background: var(--status-weak); color: var(--on-status-dark); border-color: var(--status-weak); } .status-unknown { background: var(--status-unknown); color: var(--muted); border-color: var(--status-unknown); } /* ============================================================ Answering view ============================================================ */ .stage-pill { display: inline-block; font: 500 0.72rem var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mint-deep); background: var(--mint-soft); padding: 4px 10px; border-radius: 999px; margin-bottom: 10px; } .q-meta { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; } .why { font-style: italic; color: var(--muted); margin: 0 0 16px; padding-left: 12px; border-left: 3px solid var(--mint); } .micro { background: var(--mint-soft); padding: 14px 18px; border-radius: var(--r-sm); border-left: 3px solid var(--mint); margin-bottom: 16px; font-size: 0.94rem; line-height: 1.65; } .micro p:first-child { margin-top: 0; } .micro p:last-child { margin-bottom: 0; } .stem { font: 500 1.1rem var(--font-zh); line-height: 1.65; margin: 18px 0; color: var(--ink); } .choices { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; } .choice { display: flex; align-items: flex-start; gap: 12px; text-align: left; background: var(--white); color: var(--fg); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 16px; font: 400 0.95rem var(--font-zh); cursor: pointer; transition: all 0.15s; box-shadow: none; } .choice:not(:disabled):hover { border-color: var(--mint); background: var(--mint-soft); transform: translateX(2px); } .choice.selected:not(.correct):not(.wrong) { border-color: var(--mint); background: var(--mint-soft); } .choice.correct { border-color: var(--status-proficient); background: var(--mint-soft); } .choice.wrong { border-color: var(--status-weak); background: #fdf0ec; } .choice .cid { font: 700 0.85rem var(--font-mono); color: var(--mint-deep); background: var(--mint-soft); padding: 2px 9px; border-radius: 6px; flex-shrink: 0; min-width: 26px; text-align: center; align-self: flex-start; } .choice.selected:not(.correct):not(.wrong) .cid, .choice.correct .cid { background: var(--mint); color: var(--white); } .choice.wrong .cid { background: var(--status-weak); color: var(--white); } .ribbon { margin-top: 18px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .feedback { margin-top: 22px; border-top: 1px dashed var(--line); padding-top: 18px; } .grade-pill { display: inline-block; padding: 4px 12px; border-radius: 999px; font: 500 0.85rem var(--font-zh); margin-bottom: 8px; } .grade-pill.ok { background: var(--mint-soft); color: var(--status-mastered); } .grade-pill.no { background: #fdf0ec; color: #8a4218; } .feedback-md { margin: 8px 0; line-height: 1.7; } .feedback-md p:first-child { margin-top: 0; } .delta { font: 400 0.78rem var(--font-mono); color: var(--muted); } /* ============================================================ TA chat ============================================================ */ .ta-mode-toggle { display: flex; gap: 16px; padding: 12px 16px; background: var(--mint-soft); border-radius: var(--r-sm); margin-bottom: 16px; font-size: 0.9rem; } .ta-mode-toggle label { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } .chat-log { max-height: 60vh; overflow-y: auto; margin-bottom: 16px; padding: 4px 4px 12px; } .chat-msg { margin-bottom: 12px; padding: 12px 16px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--white); } .chat-msg.role-user { background: var(--mint-soft); margin-left: 15%; border-color: var(--mint-line); } .chat-msg.role-assistant { background: var(--white); margin-right: 15%; } .chat-role { font: 500 0.7rem var(--font-mono); color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px; } .chat-body p:first-child { margin-top: 0; } .chat-body p:last-child { margin-bottom: 0; } .chat-sources { font: 400 0.78rem var(--font-mono); margin-top: 8px; color: var(--muted); } .chat-input { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; } @media (max-width: 720px) { main { padding: 16px 12px 60px; } .chat-msg.role-user { margin-left: 5%; } .chat-msg.role-assistant { margin-right: 5%; } .topbar { padding: 12px; } .topbar h1 { font-size: 1.1rem; } .card { padding: 18px; } /* ── Stacked header on narrow viewports ──────────────────── * Brand block + mascot stay on the top row (taking full width * thanks to flex-basis:100%); the user/buttons block wraps to * its own row, left-aligned and full-width so buttons can * flow naturally instead of being squashed to the right edge. */ .brand-block { flex-basis: 100%; min-width: 0; } .topbar .who { margin-left: 0; width: 100%; justify-content: flex-start; border-top: 1px solid var(--line); padding-top: 10px; font-size: 0.85rem; } .topbar .who > span:first-child { /* studentId can be a long email — let it ellipsize so it * doesn't push the buttons off-screen */ max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /* ============================================================ Subtle entrance animation for cards ───────────────────────────────────────────────────────────── Pure opacity fade — the previous translateY(6px → 0) made every reactive card re-render visibly bounce, which combined with the scrollbar jitter felt like the page wasn't settling. ============================================================ */ .card { animation: fade-in 0.25s ease-out; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } /* ─── Role indicator (Theme C) ────────────────────────────────── */ .role-pill { background: var(--orange); color: var(--ink); font: 600 0.72rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 8px; border-radius: 4px; margin: 0 8px; } /* ─── Hints (Theme B) ─────────────────────────────────────────── */ .hint-btn { background: var(--mint-soft) !important; color: var(--mint-deep) !important; border: 1px solid var(--mint-line) !important; padding: 6px 14px !important; border-radius: var(--r-sm) !important; font: 600 0.88rem var(--font-zh) !important; } .hint-btn:hover:not(:disabled) { background: var(--mint) !important; color: var(--ink) !important; } .hint-panel { margin-top: 14px; padding: 12px 14px; background: linear-gradient(180deg, #fffbf2 0%, #fff8e6 100%); border: 1px dashed var(--orange); border-radius: var(--r-md); } .hint-panel h4 { margin: 0 0 8px; font: 600 0.88rem var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; } .hint-card { display: flex; gap: 12px; padding: 8px 10px; margin: 6px 0; background: white; border: 1px solid #f3dca5; border-radius: var(--r-sm); align-items: flex-start; } .hint-num { flex: 0 0 auto; font: 700 0.8rem var(--font-mono); color: var(--orange-deep); background: #fff4e3; padding: 2px 6px; border-radius: 4px; } .hint-body { flex: 1; line-height: 1.6; font-size: 0.95rem; } .hint-body p:first-child { margin-top: 0; } .hint-body p:last-child { margin-bottom: 0; } .hint-warning { margin: 8px 0 0; padding: 6px 10px; background: #fde8e8; border-left: 3px solid #b73333; color: #b73333; font-size: 0.86rem; border-radius: 4px; } /* ─── Wiki pre-read panel ─────────────────────────────────────── */ .wiki-heading { margin: 22px 0 6px; font: 600 1.05rem var(--font-zh); color: var(--ink); } .wiki-index { list-style: none; padding: 0; margin: 8px 0 4px; } .wiki-index li { margin: 4px 0; border-radius: var(--r-sm); border: 1px solid var(--mint-line); background: white; transition: background 0.15s, border-color 0.15s; } .wiki-index li:hover { background: var(--mint-soft); } .wiki-index li.visited { background: var(--mint-soft); border-color: var(--mint); } .wiki-index a { display: flex; gap: 12px; align-items: center; padding: 10px 14px; text-decoration: none; color: var(--ink); font-size: 0.94rem; } .wiki-num { font: 700 0.78rem var(--font-mono); color: var(--mint-deep); background: var(--mint-soft); padding: 2px 8px; border-radius: 4px; min-width: 32px; text-align: center; } .wiki-name { flex: 1; font: 500 0.92rem var(--font-mono); color: var(--ink); word-break: break-all; } .wiki-concepts { font: 400 0.78rem var(--font-mono); color: var(--ink-soft); } .wiki-check { color: var(--mint-deep); font: 600 0.78rem var(--font-mono); } .wiki-hint { margin: 8px 0 4px; font-size: 0.86rem; } /* ─── Interviewer mode notice ─────────────────────────────────── */ .interviewer-notice { margin: 22px 0 6px; padding: 14px 18px; background: #fff8e6; border-left: 3px solid var(--orange); border-radius: var(--r-sm); } .interviewer-notice p { margin: 4px 0; line-height: 1.6; } .interviewer-notice strong { color: var(--orange-deep); } /* ─── Brand slogan under the h1 ───────────────────────────────── */ .brand-block { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .brand-block h1 { margin: 0; } .slogan { margin: 2px 0 0; font: 400 0.78rem var(--font-zh); color: var(--ink-soft); letter-spacing: 0.02em; line-height: 1.45; } @media (max-width: 720px) { .slogan { font-size: 0.72rem; } } /* ─── Supplement block (student SPA, under wiki list) ─────────── */ .supplement-block { margin-top: 18px; } .supplement-group { margin: 8px 0 14px; padding: 10px 14px; background: #fffaf2; border-left: 3px solid var(--orange); border-radius: var(--r-sm); } .supplement-group h4 { margin: 0 0 6px; font: 600 0.92rem var(--font-zh); color: var(--orange-deep); } .supplement-group ul { list-style: none; padding: 0; margin: 0; } .supplement-group li { margin: 6px 0; } .supplement-group li a { font: 500 0.94rem var(--font-zh); color: var(--mint-deep); } .supplement-group li p { margin: 2px 0 0; font-size: 0.84rem; line-height: 1.5; } /* ─── Modal (shared with teacher dashboard) ───────────────────── */ .modal-backdrop { position: fixed; inset: 0; background: rgba(31, 45, 42, 0.45); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; } .modal-card { width: 100%; max-width: 380px; background: white; border-radius: var(--r-md); border: 1px solid var(--mint-line); box-shadow: 0 12px 32px rgba(31, 45, 42, 0.18); padding: 18px 22px; } .modal-card header { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; } .modal-card header strong { flex: 1; font: 600 0.96rem var(--font-zh); color: var(--ink); } .modal-card label { display: block; margin: 10px 0 4px; font: 600 0.78rem var(--font-mono); letter-spacing: 0.04em; color: var(--ink-soft); text-transform: uppercase; } .modal-card input { width: 100%; padding: 8px 10px; border: 1px solid var(--mint-line); border-radius: var(--r-sm); font: 400 0.95rem var(--font-mono); box-sizing: border-box; } .pw-row { display: flex; gap: 8px; align-items: center; } .pw-row input { flex: 1; } .pw-row button { flex: 0 0 auto; font-size: 0.82rem; } .pw-error { margin: 8px 0 0; padding: 6px 10px; background: #fde8e8; color: #b73333; border-left: 3px solid #b73333; border-radius: 4px; font-size: 0.86rem; } .pw-ok { margin: 8px 0 0; padding: 6px 10px; background: var(--mint-soft); color: var(--mint-deep); border-left: 3px solid var(--mint-deep); border-radius: 4px; font-size: 0.86rem; } .modal-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 16px; } .modal-actions button[type="submit"] { background: var(--mint-deep); color: white; border: none; padding: 8px 16px; border-radius: var(--r-sm); cursor: pointer; font: 600 0.88rem var(--font-zh); } .modal-actions button[type="submit"]:hover:not(:disabled) { background: #1d6451; } /* ─── Tag filter chips (student topic picker) ─────────────────── */ .tag-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; } .tag-chip { background: white; color: var(--ink); border: 1px solid var(--mint-line); border-radius: 999px; padding: 5px 12px; font: 500 0.85rem var(--font-zh); cursor: pointer; transition: background 0.12s, border-color 0.12s; box-shadow: none; } .tag-chip:hover:not(:disabled) { background: var(--mint-soft); border-color: var(--mint); transform: none; } .tag-chip.selected { background: var(--mint-deep); color: white; border-color: var(--mint-deep); } .tag-chip.selected .muted { color: rgba(255,255,255,0.75); } /* Tag pills inside topic cards */ .topic-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 0; } .topic-tag-chip { font: 500 0.72rem var(--font-mono); background: var(--mint-soft); color: var(--mint-deep); padding: 2px 8px; border-radius: 999px; letter-spacing: 0.02em; } /* ─── Picker filters wrapper (search + category chips) ────────── */ .picker-filters { display: flex; flex-direction: column; gap: 10px; margin: 0 0 16px; } .picker-search { width: 100%; padding: 10px 14px; border: 1px solid var(--mint-line); border-radius: var(--r-sm); font: 400 0.95rem var(--font-zh); background: white; box-sizing: border-box; } .picker-search:focus { outline: 2px solid var(--mint); outline-offset: -1px; border-color: var(--mint); } /* Wide layout for the topic picker (RWD: more cards per row on big screens). Other modes (in_topic, answering, ta) keep the narrow reading width. */ main.wide { max-width: 1280px; } @media (min-width: 1400px) { main.wide { max-width: 1400px; } } /* Tighten minmax so small cards still fit ≥3 columns at 768px */ main.wide .topic-list { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } /* ============================================================ Student-facing 我的進度 page ───────────────────────────────────────────────────────────── Encouraging tone; same data shape as PI overview but framed warmly and using friendly status labels. ============================================================ */ .progress-topics { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin: 8px 0 18px; } .progress-topic { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-card); padding: 12px 14px; } .progress-topic-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; } /* mastery-bar + mb-* segments come from the teacher.css overview, but * student.html doesn't load teacher.css — re-declare here so the bar * paints. Same colour vars, so light/dark themes work automatically. */ .mastery-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--status-unknown); margin: 4px 0; } .mb-seg { display: block; height: 100%; } .mb-mastered { background: var(--status-mastered); } .mb-proficient { background: var(--status-proficient); } .mb-developing { background: var(--status-developing); } .mb-weak { background: var(--status-weak); } .mb-unknown { background: var(--status-unknown); } .muted-small { font-size: 0.78rem; color: var(--ink-soft); } .holistic-student { margin: 16px 0 8px; padding: 16px 20px; background: linear-gradient(180deg, var(--bg-soft) 0%, var(--bg-card) 100%); border: 1px solid var(--mint-line); border-left: 4px solid var(--mint-deep); border-radius: var(--r-md); } [data-theme="dark"] .holistic-student { background: linear-gradient(180deg, #233331 0%, #1f2d2a 100%); } .holistic-student .holistic-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; } .holistic-student .holistic-summary { margin: 10px 0 14px; line-height: 1.85; font-size: 0.98rem; } .holistic-student-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px 20px; } .holistic-student-cols h5 { margin: 0 0 6px; font: 600 0.92rem var(--font-zh); color: var(--mint-deep); } .holistic-student-cols ul { margin: 0; padding-left: 20px; font-size: 0.92rem; line-height: 1.7; } .holistic-student-cols li { margin: 4px 0; } .holistic-pending { margin: 16px 0; padding: 16px 20px; background: var(--bg-soft); border: 1px dashed var(--mint-line); border-radius: var(--r-md); } .holistic-pending h3 { font-size: 1.02rem; } .holistic-pending p { line-height: 1.75; } /* ============================================================ Dark-mode skin overrides ───────────────────────────────────────────────────────────── Spots where the light theme uses hand-picked pastel hex codes (#fef3ed, #fff8e6 etc.) rather than CSS vars. Those get re-skinned here so they don't glow as bright patches against the dark surface. ============================================================ */ [data-theme="dark"] .hint-panel { background: linear-gradient(180deg, #2a2820 0%, #312e22 100%); color: var(--ink); } [data-theme="dark"] .iq-card .iq-feedback.ok { background: #1a3a2e; color: #a4d4c3; } [data-theme="dark"] .iq-card .iq-feedback.no { background: #3a1f1f; color: #f4b9a8; } [data-theme="dark"] .grade-pill.no, [data-theme="dark"] .error-banner { background: #3a1f1f; color: #f4b9a8; } [data-theme="dark"] .alert-item.alert-stuck { background: #2a201d; } [data-theme="dark"] .alert-item.alert-suspicious_mastery { background: #251f30; } [data-theme="dark"] .alert-item.alert-review_queue_backlog { background: #2a2418; } [data-theme="dark"] .supplement-group { background: #221e17; } [data-theme="dark"] .cost-pill:hover { background: #2a3d39; } [data-theme="dark"] .badge.cap { background: #2a2418; color: var(--orange); border-color: var(--orange); } [data-theme="dark"] .badge.stretch { background: #251f30; color: #c2a8ee; border-color: #6e4ec2; } [data-theme="dark"] .modal-actions button[type="submit"]:hover:not(:disabled) { background: var(--mint-deep); color: var(--cream); } /* Mac-window stoplight dots in event timeline header — keep saturated */ [data-theme="dark"] .event-timeline-header { background: linear-gradient(to bottom, #2a3a36 0%, var(--code-bg) 100%); } /* In dark mode --mint-deep is lifted lighter for link contrast, which * would make `var(--mint-deep) + color:white` buttons unreadable. Push * primary CTA buttons back to a saturated mint with white text. */ [data-theme="dark"] .modal-actions button[type="submit"], [data-theme="dark"] .modal-actions button[type="submit"]:hover:not(:disabled) { background: #2d7a64; color: #fff; } [data-theme="dark"] a { color: var(--mint); } [data-theme="dark"] a:hover { color: #c4e0d2; } /* ── Theme toggle button (sits in .topbar) ──────────────────── */ .theme-toggle { background: transparent; border: 1px solid var(--line); color: var(--ink); width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; font-size: 1rem; line-height: 1; transition: background 0.15s ease; } .theme-toggle:hover { background: var(--bg-soft); } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: inline; } [data-theme="dark"] .theme-toggle .icon-sun { display: inline; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; }