:root {
  --peach: #ffe1d7;
  --peach-deep: #edd8d0;
  --coral: #e8a090;
  --slate: #809e9e;
  --teal: #809E9E;
  --teal-deep: #809E9E;
  --ice: #7bbcc8;
  --ink: #233b3b;
  --ink-soft: #4b6363;
  --paper: #fff9f6;
  --white: #fff;
  --line: #e7dad3;
  --danger: #b45b4e;
  --shadow: 0 24px 60px rgba(61, 79, 77, .12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--paper); font-family: "Noto Sans TC", sans-serif; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .48; }
.site-shell { min-height: 100vh; overflow: hidden; }
.topbar { width: min(1160px, calc(100% - 48px)); margin: 0 auto; min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--ink); text-decoration: none; }
.brand img { width: 42px; height: 42px; object-fit: contain; }
.brand span { display: grid; gap: 2px; min-width: 0; }
.brand b { font-family: "Noto Serif TC", serif; font-size: 22px; letter-spacing: .03em; line-height: 1.08; }
.brand small { color: var(--ink-soft); font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.association-title { color: var(--ink); }
.entry-system-title { margin: 0 0 18px; color: #9AAFAF; font-size: clamp(18px, 2.6vw, 30px); font-weight: 800; letter-spacing: .12em; line-height: 1.35; }
.topnav { display: flex; gap: 8px; margin-left: auto; }
.nav-link { border: 0; padding: 9px 13px; color: var(--ink-soft); background: transparent; border-radius: 999px; font-size: 13px; }
.nav-link.active { color: var(--white); background: var(--ink); }
.code-badge { display: grid; gap: 1px; padding: 8px 12px; color: var(--white); background: var(--ink); border-radius: 10px; }
.code-badge span { font-size: 9px; opacity: .7; }
.code-badge strong { font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: .12em; }
main { width: min(1160px, calc(100% - 48px)); margin: 0 auto; }
.footer { width: min(1160px, calc(100% - 48px)); margin: 64px auto 26px; display: flex; justify-content: space-between; gap: 20px; color: #9a9992; font-size: 11px; }
.eyebrow { margin: 0 0 12px; color: var(--teal); font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 18px; font-family: "Noto Serif TC", serif; font-size: clamp(36px, 5vw, 64px); line-height: 1.2; letter-spacing: -.04em; }
h1 em { color: var(--teal-deep); font-style: normal; }
.lead { max-width: 490px; color: var(--ink-soft); font-size: 16px; line-height: 1.8; }
.lead.compact { font-size: 14px; line-height: 1.7; }
.entry-grid { min-height: calc(100vh - 150px); display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 80px; }
.entry-copy { padding: 34px 0; }
.ticket-card { position: relative; max-width: 430px; margin-top: 34px; padding: 26px; background: var(--white); border: 1px dashed var(--coral); border-radius: 16px; box-shadow: var(--shadow); }
.entry-source-note { max-width: 430px; margin: 14px 0 0; color: var(--teal-deep); font-size: 13px; font-weight: 800; }
.ticket-card::before, .ticket-card::after { content: ""; position: absolute; top: 50%; width: 16px; height: 32px; background: var(--paper); transform: translateY(-50%); border: 1px dashed var(--coral); }
.ticket-card::before { left: -9px; border-left: 0; border-radius: 0 18px 18px 0; }
.ticket-card::after { right: -9px; border-right: 0; border-radius: 18px 0 0 18px; }
.ticket-card label { display: block; margin-bottom: 16px; font-size: 13px; font-weight: 700; }
.code-inputs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.code-inputs input { width: 100%; min-width: 0; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: var(--paper); text-align: center; font-family: "IBM Plex Mono", monospace; font-size: 22px; font-weight: 600; text-transform: uppercase; outline: none; }
.code-inputs input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(58, 143, 160, .14); }
.code-rule-note { margin: 8px 0 0; color: var(--ink-soft); font-size: 12px; line-height: 1.55; }
.privacy-note, .consent-note { color: var(--ink-soft); font-size: 11px; line-height: 1.7; }
.privacy-note { display: flex; align-items: flex-start; gap: 8px; margin: 18px 0; }
.dot { flex: none; width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: var(--coral); }
.consent-note { max-width: 430px; margin-top: 14px; }
.button { min-height: 44px; padding: 0 18px; border: 1px solid transparent; border-radius: 10px; font-size: 13px; font-weight: 700; transition: transform .2s, box-shadow .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: var(--white); background: var(--ink); box-shadow: 0 10px 20px rgba(35, 59, 59, .14); }
.button-primary:hover { background: var(--teal-deep); }
.button-primary span { margin-left: 10px; font-size: 18px; }
.button-ghost { color: var(--ink); background: transparent; border-color: var(--ink); }
.button-soft { color: var(--ink-soft); background: var(--peach); }
.full { width: 100%; }
.entry-art { position: relative; min-height: 540px; display: grid; place-items: center; }
.sun { position: absolute; top: 60px; right: 12%; width: 220px; height: 220px; background: var(--peach); border-radius: 50%; }
.arch-art { position: relative; width: min(380px, 85%); height: 440px; background: linear-gradient(145deg, var(--teal-deep), var(--teal)); border-radius: 190px 190px 24px 24px; box-shadow: 20px 30px 0 rgba(231, 202, 193, .65); overflow: hidden; }
.arch-art::before { content: ""; position: absolute; inset: 24px; border: 1px solid rgba(255,255,255,.38); border-radius: 166px 166px 8px 8px; }
.arch-window { position: absolute; inset: auto 38px 40px; display: grid; gap: 11px; padding: 25px 24px; background: rgba(255,255,255,.92); border-radius: 13px; box-shadow: 0 18px 40px rgba(35,59,59,.17); }
.arch-window span { padding: 12px 16px; color: var(--ink); border-radius: 8px; background: var(--peach); font-family: "Noto Serif TC", serif; font-size: 20px; }
.arch-window span:nth-child(2) { margin-left: 24px; background: #dff0f0; }
.arch-window span:nth-child(3) { margin-left: 48px; background: #e7e8f4; }
.quote-card { position: absolute; right: -18px; bottom: 64px; width: 220px; padding: 22px 24px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.quote-mark { color: var(--coral); font-family: Georgia, serif; font-size: 44px; line-height: .5; }
.quote-card p { margin: 12px 0 16px; font-family: "Noto Serif TC", serif; font-size: 17px; line-height: 1.7; }
.quote-line { display: block; width: 50px; height: 3px; background: var(--teal); border-radius: 99px; }
.page-wrap { padding: 58px 0 10px; }
.split-heading { display: flex; justify-content: space-between; align-items: end; gap: 32px; }
.split-heading h1 { font-size: clamp(36px, 5vw, 58px); }
.stat-card { width: 220px; padding: 20px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.stat-card > span, .stat-card > small { color: var(--ink-soft); font-size: 11px; }
.stat-card strong { display: block; margin: 8px 0 10px; font-family: "Noto Serif TC", serif; font-size: 42px; }
.stat-card strong small, .stats-row small, .history-row strong small, .kpi-card strong small { margin-left: 3px; font-family: "Noto Sans TC", sans-serif; font-size: 14px; }
.progress { height: 8px; overflow: hidden; background: #ede2da; border-radius: 999px; }
.progress i { display: block; height: 100%; background: var(--teal); border-radius: inherit; }
.stat-card .progress { margin-bottom: 8px; }
.map-list { max-width: 800px; margin: 42px 0 0 26px; border-left: 1px dashed var(--ice); }
.map-item { position: relative; display: grid; grid-template-columns: 36px 1fr; gap: 22px; padding: 0 0 32px; margin-left: -19px; }
.map-node { display: grid; place-items: center; width: 36px; height: 36px; color: var(--white); background: var(--teal-deep); border: 5px solid var(--paper); border-radius: 50%; box-shadow: 0 0 0 1px var(--teal-deep); font-family: "IBM Plex Mono", monospace; font-size: 12px; }
.map-item.current .map-node { background: var(--coral); box-shadow: 0 0 0 1px var(--coral), 0 0 0 8px rgba(232,160,144,.16); }
.map-item.locked .map-node { color: var(--slate); background: #e9e5df; box-shadow: 0 0 0 1px #cfc8bf; }
.map-card { padding: 22px 24px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 10px 24px rgba(61,79,77,.06); }
.map-item.locked .map-card { opacity: .58; }
.map-meta, .map-progress, .panel-heading, .admin-heading, .section-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stage-label { color: var(--teal); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.status-pill { display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border-radius: 999px; font-size: 10px; font-weight: 700; }
.active-pill { color: #9a4d3f; background: #fde2d9; }
.done-pill { color: #809E9E; background: #dff0f0; }
.locked-pill { color: var(--ink-soft); background: #eeebe6; }
.login-success { color: #237a4b !important; background: #e2f5e9 !important; }
.login-success-button { color: #237a4b !important; background: #dff3e6 !important; border-color: #9fd4b0 !important; }
.map-card h2 { margin: 16px 0 6px; font-size: 20px; }
.map-card p { max-width: 600px; margin-bottom: 18px; color: var(--ink-soft); font-size: 13px; line-height: 1.7; }
.map-progress { color: var(--ink-soft); font-size: 11px; }
.map-progress .progress { flex: 1; height: 6px; }
.map-progress strong { min-width: 56px; color: var(--ink); text-align: right; font-size: 11px; }
.text-button, .back-link { padding: 0; color: var(--teal-deep); border: 0; background: transparent; font-size: 12px; font-weight: 700; }
.text-button { margin-top: 16px; }
.section-link { justify-content: flex-start; margin: 8px 0 0 58px; }
.knowledge-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0; }
.knowledge-kpis > div { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #f2f8f7; }
.course-index-card { margin: 18px 0; padding: 20px; border: 1px solid #b9d9d5; border-radius: 14px; background: #eef8f6; }
.course-index-card h3 { margin: 4px 0 8px; }
.course-index-card p { margin: 0 0 14px; color: var(--ink-soft); }
.course-index-card > .knowledge-kpis { grid-template-columns: repeat(4, 1fr); }
.knowledge-kpis strong, .knowledge-kpis span { display: block; }
.knowledge-kpis strong { color: var(--teal-deep); font-size: 24px; }
.knowledge-kpis span { margin-top: 4px; color: var(--ink-soft); font-size: 12px; }
.knowledge-source-row small { display: block; margin-top: 4px; }
.knowledge-meta-form { display: grid; grid-template-columns: 150px 120px 80px auto; gap: 8px; align-items: center; margin-left: auto; }
.knowledge-meta-form input, .knowledge-meta-form select { min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); }
.form-hint { color: var(--ink-soft); font-size: 12px; }
.back-link { margin-bottom: 24px; }
.lesson-layout { display: grid; grid-template-columns: 280px 1fr; gap: 28px; align-items: start; margin-top: 34px; }
.lesson-list, .panel, .quiz-card { background: var(--white); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 10px 26px rgba(61,79,77,.06); }
.lesson-list { overflow: hidden; }
.list-title { display: flex; justify-content: space-between; padding: 18px; color: var(--ink-soft); border-bottom: 1px solid var(--line); font-size: 12px; }
.list-title strong { color: var(--teal-deep); }
.lesson-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 16px 14px; border: 0; border-bottom: 1px solid #f0e9e4; color: var(--ink); background: var(--white); text-align: left; }
.lesson-row.selected { background: #eff7f7; }
.lesson-index { display: grid; place-items: center; flex: none; width: 26px; height: 26px; color: var(--teal-deep); background: #e4f1f2; border-radius: 50%; font-size: 11px; }
.lesson-row b, .lesson-row small { display: block; }
.lesson-row b { font-size: 12px; }
.lesson-row small { margin-top: 4px; color: var(--ink-soft); font-size: 10px; }
.video-frame { position: relative; min-height: 360px; display: flex; flex-direction: column; justify-content: space-between; padding: 20px; color: var(--white); background: linear-gradient(140deg, #233b3b, #809E9E); border-radius: 190px 190px 16px 16px; overflow: hidden; }
.video-frame::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 70% 20%, rgba(255,225,215,.2), transparent 30%); }
.video-top, .video-content { position: relative; z-index: 1; display: flex; justify-content: space-between; }
.video-tag, .video-time { padding: 7px 10px; border-radius: 999px; background: rgba(255,255,255,.16); font-size: 10px; }
.video-content { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.play-ring { display: grid; place-items: center; width: 72px; height: 72px; padding-left: 4px; border: 1px solid rgba(255,255,255,.65); border-radius: 50%; font-size: 22px; }
.video-content p { margin: 0; font-family: "Noto Serif TC", serif; font-size: 28px; }
.video-frame:has(.text-content-frame) { min-height: 0; height: auto; padding: 20px; }
.text-content-frame { display: block !important; box-sizing: border-box; width: 100%; height: 460px; min-height: 460px; max-height: 460px; padding: 30px 38px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-gutter: stable; touch-action: none; -webkit-overflow-scrolling: touch; }
.text-content-frame > p { margin: 0 0 18px; }
.text-content-frame article { display: block; flex: none; width: 100%; max-width: 680px; min-height: max-content; color: rgba(255,255,255,.88); font-size: 17px; line-height: 2; white-space: pre-wrap; }
.article-complete-disabled { color: #7c8584 !important; background: #d4d9d7 !important; border-color: #c5ccca !important; cursor: not-allowed !important; box-shadow: none !important; }
.text-content-frame::after { content: "向下滑到底完成閱讀"; position: sticky; bottom: -18px; align-self: stretch; display: block; padding: 12px; color: rgba(255,255,255,.78); background: linear-gradient(transparent, rgba(35,59,59,.92) 45%); font-size: 12px; text-align: center; pointer-events: none; }
.video-content small { color: rgba(255,255,255,.7); font-size: 11px; }
.lesson-info { display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 22px 4px; }
.lesson-info h2 { margin-bottom: 8px; font-family: "Noto Serif TC", serif; font-size: 24px; }
.lesson-info p { margin: 0; color: var(--ink-soft); font-size: 12px; }
.quiz-unlock { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; color: rgba(255,255,255,.88); background: #9ca8a5; border-radius: 14px; }
.quiz-unlock.unlocked { background: var(--ink); }
.quiz-unlock .eyebrow { margin-bottom: 4px; color: var(--coral); }
.quiz-unlock h3 { margin-bottom: 4px; font-family: "Noto Serif TC", serif; font-size: 18px; }
.quiz-unlock p { margin: 0; color: rgba(255,255,255,.7); font-size: 11px; }
.round-arrow { display: grid; place-items: center; flex: none; width: 46px; height: 46px; color: var(--ink); border: 0; border-radius: 50%; background: var(--coral); font-size: 22px; }
.free-practice { width: 100%; margin-top: 12px; padding: 13px 16px; color: var(--teal-deep); border: 1px solid var(--ice); border-radius: 10px; background: #eff7f7; font-size: 12px; font-weight: 700; text-align: left; }
.narrow-page { max-width: 760px; margin: 0 auto; }
.quiz-card { margin-top: 30px; padding: 28px; }
.response-form { display: grid; gap: 9px; }
.response-form label { margin-top: 7px; color: var(--ink-soft); font-size: 11px; font-weight: 700; }
.response-form input, .response-form textarea { width: 100%; padding: 12px; color: var(--ink); border: 1px solid var(--line); border-radius: 9px; background: var(--paper); outline: none; font-size: 13px; line-height: 1.7; }
.response-form textarea { resize: vertical; }
.short-answer-input { min-height: 120px; aspect-ratio: 6 / 1; resize: vertical; font-size: 26px !important; line-height: 1.6; }
.response-form input:focus, .response-form textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(58, 143, 160, .12); }
.consent-card { display: grid; gap: 14px; }
.consent-box { padding: 22px; background: linear-gradient(135deg, var(--peach), #fff5ef); border-radius: 12px; }
.consent-box h2 { margin-bottom: 10px; font-family: "Noto Serif TC", serif; font-size: 21px; }
.consent-box p { margin-bottom: 18px; color: var(--ink-soft); font-size: 12px; line-height: 1.8; }
.consent-check { display: flex; align-items: flex-start; gap: 9px; color: var(--ink); font-size: 12px; font-weight: 700; line-height: 1.6; }
.consent-check input { flex: none; width: 17px; height: 17px; margin-top: 1px; accent-color: var(--teal); }
.question-number { color: var(--teal); font-family: "IBM Plex Mono", monospace; font-size: 10px; font-weight: 600; letter-spacing: .1em; }
.quiz-card h2 { margin: 18px 0 24px; font-family: "Noto Serif TC", serif; font-size: 24px; line-height: 1.55; font-weight: 700; }
.options { display: grid; gap: 10px; margin-bottom: 24px; }
.options label { display: flex; align-items: center; gap: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.options label:has(input:checked) { color: var(--teal-deep); border-color: var(--teal); background: #eaf4f5; }
.options input { accent-color: var(--teal); }
.options span { color: var(--teal); font-family: "IBM Plex Mono", monospace; font-size: 12px; }
.options b { font-size: 22px; line-height: 1.5; font-weight: 400; }
.question-score-list { margin: 18px 0; padding: 16px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
.question-score-list h3 { margin: 0 0 10px; }
.question-score-row { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.question-score-row span { flex: 1; }
.question-score-row strong { white-space: nowrap; color: var(--teal-deep); }
.total-score-line { margin: 14px 0 0; font-size: 18px; }
.ai-feedback { display: grid; grid-template-columns: 100px 1fr; gap: 20px; margin-bottom: 22px; padding: 20px; background: linear-gradient(135deg, var(--peach), #fff5ef); border-radius: 12px; }
.score-ring { display: grid; place-items: center; align-content: center; width: 84px; height: 84px; border: 8px solid var(--teal); border-right-color: var(--coral); border-radius: 50%; background: var(--white); }
.score-ring strong { font-family: "Noto Serif TC", serif; font-size: 24px; line-height: 1; }
.score-ring small { font-size: 10px; }
.ai-feedback h3 { margin: 11px 0 7px; font-size: 15px; }
.ai-feedback p { margin-bottom: 11px; color: var(--ink-soft); font-size: 12px; line-height: 1.7; }
.result-section-title { margin: 8px 0 12px; font-size: 15px; }
.failed-question-list { display: grid; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.failed-question-list li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 9px; background: #fffaf7; font-size: 12px; }
.failed-question-list b { color: var(--coral-deep, #9a4d3f); white-space: nowrap; }
.failed-question-list span { overflow: hidden; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.failed-question-list small { color: var(--teal-deep); white-space: nowrap; }
.skill-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.skill-tags span { padding: 5px 8px; color: var(--teal-deep); background: rgba(255,255,255,.72); border-radius: 999px; font-size: 10px; }
.id-strip { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; color: var(--white); background: var(--ink); border-radius: 12px; }
.id-strip span { font-size: 12px; opacity: .74; }
.id-strip strong { font-family: "IBM Plex Mono", monospace; letter-spacing: .15em; }
.stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 24px 0; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.stats-row div { padding: 18px; background: var(--white); }
.stats-row strong, .stats-row span { display: block; }
.stats-row strong { margin-bottom: 3px; font-family: "Noto Serif TC", serif; font-size: 30px; }
.stats-row span { color: var(--ink-soft); font-size: 11px; }
.history-panel { padding: 22px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; }
.history-panel h2 { margin: 0; font-family: "Noto Serif TC", serif; font-size: 20px; }
.panel-heading > span { color: var(--ink-soft); font-size: 11px; }
.history-row { display: flex; align-items: center; gap: 13px; padding: 16px 0; border-bottom: 1px solid #f0e9e4; }
.history-row:last-child { border-bottom: 0; }
.history-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--teal); }
.history-row div { flex: 1; }
.history-row b, .history-row small { display: block; }
.history-row b { font-size: 13px; }
.history-row small { margin-top: 4px; color: var(--ink-soft); font-size: 10px; }
.history-row > strong { font-family: "Noto Serif TC", serif; font-size: 20px; }
.admin-page { padding-bottom: 28px; }
.admin-heading { align-items: end; margin-bottom: 34px; }
.admin-heading h1 { margin-bottom: 12px; font-size: clamp(36px, 5vw, 52px); }
.admin-badge { display: inline-block; margin-bottom: 14px; padding: 5px 9px; color: var(--white); background: var(--ink); border-radius: 999px; font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: .1em; }
.admin-avatar { display: grid; place-items: center; width: 56px; height: 56px; color: var(--white); background: var(--teal-deep); border-radius: 50%; font-family: "Noto Serif TC", serif; font-size: 22px; }
.admin-access { display: grid; grid-template-columns: 1fr auto auto; align-items: end; gap: 12px; margin-bottom: 22px; padding: 14px 16px; background: #eff7f7; border: 1px solid #cce5e7; border-radius: 12px; }
.admin-access label { display: grid; gap: 6px; color: var(--ink-soft); font-size: 10px; font-weight: 700; }
.admin-access input { min-height: 40px; padding: 0 11px; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; background: var(--white); outline: none; font-family: "IBM Plex Mono", monospace; font-size: 12px; }
.admin-access input:focus { border-color: var(--teal); }
.admin-access .form-message { margin: 0; color: var(--teal-deep); font-size: 10px; white-space: nowrap; }
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 26px; }
.kpi-card { padding: 18px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; }
.kpi-card span, .kpi-card small { display: block; color: var(--ink-soft); font-size: 10px; }
.kpi-card strong { display: block; margin: 9px 0 4px; font-family: "Noto Serif TC", serif; font-size: 34px; }
.kpi-card small:last-child { color: var(--teal); }
.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.panel { padding: 24px; }
.panel h2 { margin: 4px 0 0; font-family: "Noto Serif TC", serif; font-size: 22px; }
.panel-intro { color: var(--ink-soft); font-size: 12px; line-height: 1.7; }
.ai-panel form { display: grid; gap: 12px; margin-top: 20px; }
.ai-panel label { display: grid; gap: 6px; color: var(--ink-soft); font-size: 11px; }
.ai-panel select, .ai-panel input { width: 100%; min-height: 42px; padding: 0 12px; color: var(--ink); border: 1px solid var(--line); border-radius: 9px; background: var(--paper); outline: none; }
.ai-panel select:focus { border-color: var(--teal); }
.form-message { display: none; margin: 0; color: var(--teal); font-size: 11px; }
.form-message.visible { display: block; }
.alert-count { display: grid; place-items: center; width: 26px; height: 26px; color: var(--danger); background: #fbe5df; border-radius: 50%; font-size: 11px; font-weight: 700; }
.alert-row { display: flex; align-items: center; gap: 12px; padding: 18px 0; border-bottom: 1px solid #f0e9e4; }
.alert-row > span { display: grid; place-items: center; flex: none; width: 24px; height: 24px; color: var(--danger); border: 1px solid #e7a99d; border-radius: 50%; font-weight: 700; }
.alert-row div { flex: 1; }
.alert-row b, .alert-row small { display: block; }
.alert-row b { font-size: 12px; }
.alert-row small { margin-top: 4px; color: var(--ink-soft); font-size: 10px; }
.alert-row button { padding: 0; color: var(--teal-deep); border: 0; background: transparent; font-size: 11px; font-weight: 700; }
.content-admin { margin-top: 16px; }
.admin-collapsible { margin-top: 16px; }
.admin-collapsible > summary { padding: 16px 20px; color: var(--teal-deep); border: 1px solid var(--line); border-radius: 12px; background: var(--white); cursor: pointer; font-weight: 700; list-style: none; }
.admin-collapsible[data-section="settings"] > summary { background: #edf4f3; border-color: #c7dfdc; }
.admin-collapsible[data-section="questions"] > summary { background: #f7f0eb; border-color: #ead5c9; }
.admin-collapsible[data-section="rules"] > summary { background: #f1eff6; border-color: #d9d2e7; }
.admin-collapsible[data-section="curriculum"] > summary { background: #f4f1e6; border-color: #e3dbb9; }
.admin-collapsible[data-section="chatbots"] > summary { background: #fff0e7; border-color: #e6b49d; color: #7b4936; }
.admin-collapsible[data-section="usage-report"] > summary { background: #e7f0fb; border-color: #b7cde8; color: #809E9E; }
.admin-collapsible[data-section="reports"] > summary { background: #fff0d9; border: 2px solid #e0a04b; color: #8b4f10; }
.admin-collapsible[data-section="usage-report"] > summary { background: #dceeff; border: 2px solid #4e91cf; color: #205b91; }
.admin-collapsible[data-section="settings"] { --section-bg: #f7fbfa; --section-border: #c7dfdc; }
.admin-collapsible[data-section="questions"] { --section-bg: #fcf8f5; --section-border: #ead5c9; }
.admin-collapsible[data-section="rules"] { --section-bg: #faf9fc; --section-border: #d9d2e7; }
.admin-collapsible[data-section="curriculum"] { --section-bg: #fbfaf3; --section-border: #e3dbb9; }
.admin-collapsible[data-section="chatbots"] { --section-bg: #fffaf7; --section-border: #e6b49d; }
.admin-collapsible[data-section="usage-report"] { --section-bg: #f7faff; --section-border: #b7cde8; }
.admin-collapsible[data-section="reports"] { --section-bg: #fffaf1; --section-border: #e0a04b; }
.admin-collapsible[data-section="usage-report"] { --section-bg: #f3f9ff; --section-border: #4e91cf; }
.admin-collapsible .panel input, .admin-collapsible .panel select, .admin-collapsible .panel textarea { background: var(--section-bg, var(--paper)); border-color: var(--section-border, var(--line)); }
.admin-collapsible > summary::-webkit-details-marker { display: none; }
.admin-collapsible > summary::before { content: "＋"; display: inline-block; margin-right: 8px; }
.admin-collapsible[open] > summary::before { content: "－"; }
.admin-collapsible > .panel, .admin-collapsible > .content-admin { margin-top: 8px; }
.content-list { margin-top: 15px; }
.curriculum-tree-panel { margin-top: 16px; }
.curriculum-tree { margin-top: 18px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.curriculum-tree-module + .curriculum-tree-module { margin-top: 14px; }
.tree-level { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 12px; border-bottom: 1px solid #f0e9e4; }
.tree-level > div:nth-child(2) { flex: 1; min-width: 0; }
.tree-level strong, .tree-level small { display: block; }
.tree-level strong { font-size: 13px; }
.tree-level small { margin-top: 3px; color: var(--ink-soft); font-size: 10px; }
.tree-toggle, .tree-bullet { display: grid; place-items: center; flex: none; width: 22px; height: 22px; color: var(--teal-deep); border-radius: 50%; background: #e5f1f2; font-size: 12px; }
.tree-module { color: var(--white); border: 0; border-radius: 10px; background: var(--ink); }
.tree-module small { color: rgba(255,255,255,.65); }
.tree-milestone { margin: 10px 0 0 24px; border: 1px solid #ead5c9; border-radius: 9px 9px 0 0; background: #fff7f2; }
.tree-unit-list { margin-left: 48px; border-left: 1px dashed var(--ice); }
.tree-unit { padding-left: 14px; background: var(--white); }
.tree-unit + .tree-unit { border-top: 1px solid #f0e9e4; }
.tree-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.tree-actions .text-button { margin-top: 0; font-size: 11px; }
.tree-empty { margin: 10px 0; padding: 12px; color: var(--ink-soft); font-size: 12px; }
.tree-editors { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.tree-editors h3 { margin: 0 0 4px; font-family: "Noto Serif TC", serif; font-size: 18px; }
.tree-editors .question-form { display: grid; gap: 10px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.tree-editors label { display: grid; gap: 5px; color: var(--ink-soft); font-size: 11px; font-weight: 700; }
.tree-editors input, .tree-editors select, .tree-editors textarea { width: 100%; padding: 10px; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; background: var(--paper); outline: none; font-size: 12px; }
.tree-editors textarea { resize: vertical; line-height: 1.6; }
.content-row { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid #f0e9e4; }
.live-video-content { padding: 0 !important; }
.live-video-content iframe, .live-video-content video { display: block; width: 100%; min-height: 320px; border: 0; object-fit: contain; background: #101b1b; }
.milestone-tree { padding-bottom: 8px; }
.learner-milestone { border-bottom: 1px solid var(--line); }
.learner-milestone summary { display: flex; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer; list-style: none; background: #fff8f2; }
.learner-milestone summary::-webkit-details-marker { display: none; }
.learner-milestone summary > span:nth-child(2) { flex: 1; display: grid; gap: 3px; }
.learner-milestone summary strong { color: var(--ink); }
.learner-milestone summary small { color: var(--muted); }
.learner-milestone summary em { font-size: 11px; color: var(--teal-deep); font-style: normal; }
.milestone-chevron { transition: transform .2s ease; color: var(--teal); }
.learner-milestone[open] .milestone-chevron { transform: rotate(0deg); }
.learner-milestone:not([open]) .milestone-chevron { transform: rotate(-90deg); }
.learner-milestone.is-locked summary { background: #f1f2f2; color: #727b7b; cursor: not-allowed; }
.learner-unit-list .lesson-row { width: 100%; border-left: 4px solid transparent; }
.learner-unit-list .lesson-row.is-completed { border-left-color: #2d9b86; background: #effaf6; }
.learner-unit-list .lesson-row.is-pending { border-left-color: #e8a05f; background: #fffaf0; }
.learner-unit-list .lesson-row:disabled { opacity: .65; cursor: not-allowed; }
.milestone-lock-notice { display: flex; align-items: flex-start; gap: 10px; margin: 10px 12px; padding: 12px 14px; border: 2px solid #d4574f; border-radius: 10px; color: #8f2925; background: #fff0ee; box-shadow: 0 3px 10px rgba(184, 61, 52, .14); }
.milestone-lock-notice strong { white-space: nowrap; font-weight: 800; }
.milestone-lock-notice span { font-size: 13px; line-height: 1.5; }
.learning-rules { max-width: 760px; margin-top: 18px; padding: 14px 18px; border-left: 5px solid var(--teal); border-radius: 8px; background: #f0f8f6; color: var(--ink); }
.learning-rules strong { display: block; margin-bottom: 6px; color: var(--teal-deep); }
.learning-rules ol { margin: 0; padding-left: 22px; line-height: 1.8; }
.ai-scoring-wait { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 14px 16px; border: 1px solid #8fc9c2; border-radius: 12px; color: #809E9E; background: #eefaf8; }
.ai-scoring-wait > span:last-child { display: grid; gap: 3px; }
.ai-scoring-wait small { color: #477b78; }
.ai-scoring-spinner { width: 24px; height: 24px; flex: 0 0 24px; border: 3px solid #b8e1dc; border-top-color: #257f7a; border-radius: 50%; animation: ai-score-spin .85s linear infinite; }
@keyframes ai-score-spin { to { transform: rotate(360deg); } }
.chat-page { max-width: 980px; }
.chat-gate-card { display: grid; gap: 14px; margin-top: 24px; padding: 28px; border: 1px solid #b9dcd7; border-radius: 16px; background: #eef9f6; color: var(--ink); }
.chat-gate-card strong { font-size: 1.35rem; color: var(--teal-deep); }
.chat-gate-card p { margin: 0; line-height: 1.8; }
.module-top-button { display: block; width: min(100%, 260px); margin: 24px auto 0; }
.device-change-card { display: grid; gap: 16px; margin-top: 24px; padding: 30px; border: 3px solid #d4574f; border-radius: 18px; background: #fff3ef; text-align: center; box-shadow: 0 8px 24px rgba(151, 58, 49, .16); }
.device-change-card > span { color: #8f2925; font-weight: 800; }
.device-change-card > strong { padding: 18px 12px; border-radius: 12px; color: #809E9E; background: #fff; font-size: clamp(2.4rem, 12vw, 5rem); letter-spacing: .18em; line-height: 1.1; }
.device-change-card p { margin: 0; line-height: 1.8; }
.device-change-actions { display: grid; gap: 10px; }
.chat-bot-picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 18px 0; }
.chat-bot-card { display: grid; gap: 6px; min-height: 92px; padding: 15px; text-align: left; border: 1px solid var(--line); border-radius: 12px; background: var(--white); color: var(--ink); cursor: pointer; }
.chat-bot-card small { color: var(--muted); line-height: 1.45; }
.chat-bot-card.theme-communication { --bot-accent: #167f78; --bot-soft: #e1f5f1; --bot-line: #83c8bf; }
.chat-bot-card.theme-course { --bot-accent: #7153b8; --bot-soft: #eee8ff; --bot-line: #c5b4ed; }
.chat-bot-card.theme-reflection { --bot-accent: #bd633f; --bot-soft: #ffede3; --bot-line: #e4aa91; }
.chat-bot-card[class*="theme-"] { border-color: var(--bot-line); background: var(--bot-soft); }
.chat-bot-card[class*="theme-"] strong { color: var(--bot-accent); }
.chat-bot-card.selected { border: 3px solid var(--bot-accent, var(--teal)); background: var(--bot-soft, #effaf8); box-shadow: 0 0 0 3px rgba(22, 127, 120, .12); }
.chat-card { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--white); box-shadow: 0 8px 24px rgba(37, 61, 61, .08); }
.chat-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); background: #fbfaf6; }
.chat-card-head div { display: grid; gap: 4px; }
.chat-card-head small { color: var(--muted); }
.chat-card-head > .text-button { margin-top: 0; }
.chat-messages { display: grid; gap: 10px; min-height: 300px; max-height: 52vh; overflow: auto; padding: 18px; background: #f7fbfa; }
.chat-message { max-width: 82%; padding: 11px 14px; border-radius: 13px; font-size: 20px; line-height: 1.6; white-space: normal; }
.chat-user { justify-self: end; color: #fff; background: var(--teal-deep); border-bottom-right-radius: 3px; }
.chat-assistant { justify-self: start; color: var(--ink); background: #fff; border: 1px solid #d8e7e3; border-bottom-left-radius: 3px; }
.chat-web-links { display: grid; gap: 5px; margin-top: 12px; padding-top: 9px; border-top: 1px solid #d8e7e3; font-size: 16px; line-height: 1.45; }
.chat-related-units { display: grid; gap: 7px; margin-top: 12px; padding-top: 10px; border-top: 1px solid #d8e7e3; }
.chat-related-units > strong { color: var(--teal-deep); font-size: 15px; }
.chat-related-unit { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 11px; color: var(--ink); border: 1px solid #b9d9d3; border-radius: 9px; background: #f3fbf8; text-align: left; cursor: pointer; }
.chat-related-unit:hover, .chat-related-unit:focus-visible { border-color: var(--teal); background: #e7f7f2; }
.chat-related-unit span { font-size: 14px; font-weight: 700; }
.chat-related-unit small { color: var(--ink-soft); font-size: 11px; }
.chat-web-links strong { color: var(--teal-deep); font-size: 17px; }
.chat-web-links a { color: var(--teal-deep); text-decoration: underline; overflow-wrap: anywhere; }
.chat-card.theme-communication { --chat-accent: #167f78; --chat-soft: #e1f5f1; --chat-line: #83c8bf; }
.chat-card.theme-course { --chat-accent: #7153b8; --chat-soft: #eee8ff; --chat-line: #c5b4ed; }
.chat-card.theme-reflection { --chat-accent: #bd633f; --chat-soft: #ffede3; --chat-line: #e4aa91; }
.chat-card[class*="theme-"] { border: 2px solid var(--chat-line); }
.chat-card[class*="theme-"] .chat-card-head { background: var(--chat-soft); border-bottom-color: var(--chat-line); }
.chat-card[class*="theme-"] .chat-card-head strong { color: var(--chat-accent); }
.chat-card.theme-communication .chat-messages { background: #f0fbf9; }
.chat-card.theme-course .chat-messages { background: #f8f5ff; }
.chat-card.theme-reflection .chat-messages { background: #fff8f4; }
.chat-card[class*="theme-"] .chat-user { background: var(--chat-accent); }
.chat-card[class*="theme-"] .chat-assistant { border-color: var(--chat-line); }
.chat-card[class*="theme-"] .chat-wait { color: var(--chat-accent); }
.chat-empty { align-self: center; justify-self: center; max-width: 70%; margin: 0; padding: 8px 12px; color: var(--muted); font-size: 14px; line-height: 1.35; text-align: center; }
.chat-wait { display: flex; align-items: center; gap: 10px; color: var(--teal-deep); }
.chat-input-form { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 16px; border-top: 1px solid var(--line); }
.chat-input-form textarea { width: 100%; min-height: 180px; resize: vertical; font-size: 20px; line-height: 1.6; }
.chat-bottom-actions { display: flex; justify-content: flex-end; align-items: center; gap: 18px; padding: 0 16px 16px; }
.chat-bottom-actions .text-button { margin-top: 0; }
.chat-satisfaction { display: grid; gap: 6px; margin: 14px 0; padding: 14px 16px; border: 1px solid #e5bf63; border-radius: 12px; background: #fff8df; color: #6b5115; }
.chat-satisfaction span { font-size: 13px; }
.chat-satisfaction div { display: flex; gap: 10px; }
.chat-page-rating { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chat-star-button { padding: 0 2px; color: #c7c1b4; border: 0; background: transparent; font-size: 30px; line-height: 1; cursor: pointer; transition: color .15s ease, transform .15s ease; }
.chat-star-button.is-selected, .chat-star-button:hover, .chat-star-button:focus-visible { color: #e3a51a; }
.chat-star-button:hover, .chat-star-button:focus-visible { transform: scale(1.12); }
.chat-page-rating .button { margin-left: 8px; }
.chat-exit-modal-backdrop { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(24, 43, 43, .46); }
.chat-exit-modal { width: min(100%, 420px); padding: 26px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); box-shadow: 0 24px 70px rgba(24, 43, 43, .24); text-align: center; }
.chat-exit-modal h2 { margin: 0 0 10px; color: var(--ink); font-family: "Noto Serif TC", serif; font-size: 24px; }
.chat-exit-modal p { margin: 0 0 20px; color: var(--ink-soft); line-height: 1.7; }
.chat-exit-actions, .chat-exit-ratings { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.chat-exit-actions .button { min-width: 90px; }
.chat-exit-star { min-width: 128px; padding: 9px 10px; color: #d18b17; border: 1px solid #ead39a; border-radius: 10px; background: #fffaf0; font-size: 22px; letter-spacing: 2px; line-height: 1.2; cursor: pointer; }
.chat-exit-star:hover, .chat-exit-star:focus-visible { color: #a96800; border-color: #d8a94e; background: #fff3cf; }
.chat-exit-modal > .text-button { margin-top: 16px; }
.chat-bot-admin .chatbot-admin-row { align-items: center; }
.chat-bot-admin .chatbot-admin-row small { display: block; margin-top: 4px; color: var(--muted); }
.report-filters { display: grid; grid-template-columns: repeat(3, minmax(130px, 1fr)); gap: 12px; align-items: end; margin-top: 16px; padding: 14px; border: 1px solid #b7cde8; border-radius: 12px; background: #f7faff; }
.report-filters label { display: grid; gap: 6px; color: var(--ink-soft); font-size: 11px; font-weight: 700; }
.report-filters input, .report-filters select { min-height: 40px; padding: 0 10px; color: var(--ink); border: 1px solid #b7cde8; border-radius: 8px; background: #fff; outline: none; font-size: 12px; }
.report-keyword { grid-column: span 2; }
.report-actions { display: flex; gap: 8px; }
.report-actions .button { min-height: 40px; padding: 0 12px; font-size: 12px; }
.report-summary { margin: 14px 0 8px; color: var(--ink-soft); font-size: 12px; font-weight: 700; }
.report-table-wrap { overflow: auto; max-height: 560px; border: 1px solid #b7cde8; border-radius: 10px; background: #fff; }
.usage-report-table { width: 100%; min-width: 1120px; border-collapse: collapse; font-size: 11px; }
.usage-report-table th, .usage-report-table td { padding: 10px 9px; border-bottom: 1px solid #e5edf6; text-align: left; vertical-align: top; white-space: nowrap; }
.usage-report-table th { position: sticky; top: 0; z-index: 1; color: #809E9E; background: #e7f0fb; font-weight: 800; }
.usage-report-table td { color: var(--ink-soft); }
.entry-links-admin .report-table-wrap { overflow-x: auto; }
.entry-links-admin .entry-stat-header th { position: sticky; top: 0; z-index: 1; color: #809E9E; background: #e7f0fb; font-weight: 800; }
.entry-links-admin .entry-stat-header th:nth-child(n+3) { text-align: right; }
.entry-links-admin .report-table-wrap:has(.entry-stat-header) thead { display: none; }
.entry-links-admin .report-table-wrap:has(.entry-stat-header) table { min-width: 860px; }
.entry-links-admin .report-table-wrap:has(.entry-stat-header) td { white-space: nowrap; }
.entry-source-stats-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin: 14px 0 20px; padding: 14px; border: 1px solid #b7cde8; border-radius: 12px; background: #f7faff; }
.entry-source-stats-filters label { min-width: 150px; }
.entry-source-stats-filters .entry-source-multi { min-width: 280px; flex: 1 1 320px; }
.entry-source-stats-filters select[multiple] { min-height: 92px; }
.report-empty { padding: 26px !important; color: var(--muted) !important; text-align: center !important; }
.report-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin: 16px 0; }
.report-kpis > div { padding: 14px; border: 1px solid #b7cde8; border-radius: 10px; background: #fff; }
.report-kpis strong { display: block; color: #809E9E; font-family: "Noto Serif TC", serif; font-size: 28px; }
.report-kpis strong small { margin-left: 2px; font-family: "Noto Sans TC", sans-serif; font-size: 14px; }
.report-kpis span { color: var(--ink-soft); font-size: 11px; }
.report-analysis-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0; }
.report-chart { padding: 14px; border: 1px solid #b7cde8; border-radius: 10px; background: #fff; }
.report-chart h3 { margin: 0 0 12px; color: #809E9E; font-size: 15px; }
.report-bar-row { display: grid; grid-template-columns: 70px 1fr 48px 46px; gap: 8px; align-items: center; margin: 9px 0; font-size: 11px; }
.report-bar-row > span { overflow: hidden; color: var(--ink-soft); text-overflow: ellipsis; white-space: nowrap; }
.report-bar-row > div { height: 12px; overflow: hidden; border-radius: 99px; background: #edf3fa; }
.report-bar-row i { display: block; height: 100%; border-radius: inherit; background: #6c9ed1; }
.topic-bar i { background: #c88970; }
.report-bar-row b { color: #809E9E; text-align: right; }
.report-bar-row small { color: var(--muted); }
.usage-report-admin, .entry-links-admin { background: linear-gradient(145deg, #f0f8ff 0%, #f8fcff 100%); }
.report-admin { background: linear-gradient(145deg, #fff3df 0%, #fffaf2 100%); }
.usage-report-admin .panel-heading, .entry-links-admin .panel-heading { border-bottom: 1px solid rgba(78, 145, 207, .42); }
.report-admin .panel-heading { border-bottom: 1px solid rgba(224, 160, 75, .55); }
.usage-report-admin .report-kpis > div { border-color: #a8d6d0; background: #f1faf8; }
.usage-report-admin .report-kpis > div:nth-child(2) { border-color: #ead4bc; background: #fff8ef; }
.usage-report-admin .report-kpis > div:nth-child(3) { border-color: #c5b4ed; background: #f8f5ff; }
.usage-report-admin .report-kpis > div:nth-child(4) { border-color: #e4aa91; background: #fff8f4; }
.usage-report-admin .report-kpis > div:nth-child(5) { border-color: #b7cde8; background: #f3f8ff; }
.usage-report-admin .report-kpis > div:nth-child(6) { border-color: #d6c8a8; background: #fffdf2; }
.usage-report-admin .report-kpis strong { color: var(--teal-deep); }
.report-satisfaction-card { margin: 16px 0; padding: 18px; border: 1px solid #e5bf63; border-radius: 14px; background: linear-gradient(135deg, #fffdf2, #fff8df); }
.report-recipient-manager { display: grid; gap: 14px; margin: 16px 0; padding: 16px; border: 1px solid #a8d6d0; border-radius: 14px; background: #f1faf8; }
.report-recipient-manager h3 { margin: 0 0 4px; color: var(--teal-deep); font-size: 17px; }
.report-recipient-manager p { margin: 0 0 10px; color: var(--ink-soft); font-size: 12px; }
.saved-recipient-list { display: grid; gap: 7px; }
.saved-recipient-list label { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid #c6e2dc; border-radius: 8px; background: rgba(255,255,255,.75); color: var(--ink); }
.saved-recipient-list label span { color: var(--muted); font-size: 12px; }
.saved-recipient-list label .danger-text { margin-left: auto; }
.report-recipient-form { display: grid; grid-template-columns: 1fr 1.5fr auto; gap: 10px; align-items: end; padding-top: 10px; border-top: 1px solid #c6e2dc; }
.report-recipient-form label { display: grid; gap: 5px; color: var(--ink-soft); font-size: 12px; font-weight: 700; }
.assessment-bank-manager { display: grid; gap: 12px; margin: 14px 0; padding: 16px; border: 1px solid #b9d9d3; border-radius: 14px; background: #f1faf8; }
.assessment-bank-manager h3 { margin: 0; color: var(--teal-deep); }
.assessment-bank-manager form { display: grid; gap: 10px; padding-top: 10px; border-top: 1px solid #c9e2de; }
.assessment-bank-list { display: grid; gap: 7px; max-height: 260px; overflow: auto; padding: 8px; border: 1px solid #c9e2de; border-radius: 10px; background: rgba(255,255,255,.75); }
.assessment-bank-list label { display: flex; gap: 9px; align-items: flex-start; padding: 8px; border-radius: 8px; }
.assessment-bank-list label:hover { background: #e5f4f1; }
.assessment-bank-list span { display: grid; gap: 3px; }
.assessment-bank-list small { color: var(--ink-soft); }
.assessment-bank-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--muted); }
.assessment-bank-toolbar label { display: grid; gap: 4px; color: var(--ink-soft); font-weight: 700; }
.assessment-bank-item { display: grid; grid-template-columns: minmax(260px, 1fr) 58px 58px 180px auto auto auto; gap: 8px; align-items: center; min-width: 860px; padding: 8px; border-bottom: 1px solid #dbece8; }
.assessment-bank-item > div { display: grid; gap: 3px; min-width: 0; }
.assessment-bank-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assessment-bank-item label { display: flex; align-items: center; gap: 4px; font-size: 11px; white-space: nowrap; }
.assessment-bank-item button { white-space: nowrap; }
.assessment-bank-list:has(.assessment-bank-item) { overflow-x: auto; }
.report-entry-fieldset { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; min-width: 0; padding: 12px; border: 1px solid #c6e2dc; border-radius: 10px; background: #f1faf8; }
.report-entry-fieldset legend { grid-column: 1 / -1; padding: 0 4px; color: var(--teal-deep); font-size: 12px; font-weight: 800; }
.report-entry-checkbox { display: flex; align-items: center; gap: 6px; padding: 5px 7px; border: 1px solid #c6e2dc; border-radius: 7px; background: #fff; color: var(--ink); font-size: 12px; font-weight: 600; }
.report-entry-checkbox input { width: 14px; height: 14px; margin: 0; }
.report-entry-pager, .assessment-bank-pager { display: flex; align-items: center; justify-content: center; gap: 12px; grid-column: 1 / -1; padding-top: 5px; font-size: 12px; }
.report-package-manager { display: grid; gap: 10px; margin: 14px 0; padding: 14px; border: 1px solid #c6e2dc; border-radius: 10px; background: #f1faf8; }
.report-package-manager h3 { margin: 0; color: var(--teal-deep); }
.report-package-list { display: grid; gap: 6px; }
.report-package-row { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border: 1px solid #c6e2dc; border-radius: 7px; background: #fff; }
.report-package-row span { display: grid; gap: 2px; flex: 1; }
.report-package-row small { color: var(--muted); font-size: 11px; }
.report-package-form { display: flex; gap: 8px; align-items: end; }
.report-package-form input { flex: 1; }
.report-satisfaction-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.report-satisfaction-head h3 { margin: 4px 0; color: #6b5115; font-size: 19px; }
.report-satisfaction-head p { margin: 0; color: #79652e; font-size: 12px; }
.satisfaction-score { min-width: 110px; text-align: center; color: #6b5115; }
.satisfaction-score strong { font-family: "Noto Serif TC", serif; font-size: 34px; }
.satisfaction-score span { font-size: 13px; }
.satisfaction-score b { display: block; color: #e2a51c; letter-spacing: 2px; font-size: 16px; }
.report-satisfaction-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0; }
.report-satisfaction-metrics div { padding: 10px 12px; border-radius: 9px; background: rgba(255,255,255,.7); }
.report-satisfaction-metrics strong { display: block; color: #6b5115; font-size: 22px; }
.report-satisfaction-metrics span { color: #79652e; font-size: 11px; }
.satisfaction-ratings { display: grid; gap: 7px; max-width: 620px; }
.satisfaction-rating-row { display: grid; grid-template-columns: 48px 1fr 38px; gap: 8px; align-items: center; color: #6b5115; font-size: 12px; }
.satisfaction-rating-row > div { height: 9px; overflow: hidden; border-radius: 99px; background: #f1dfab; }
.satisfaction-rating-row i { display: block; height: 100%; border-radius: inherit; background: #e2a51c; }
.satisfaction-rating-row span { text-align: right; }
.chat-bot-admin .checkbox-label { display: flex; align-items: center; gap: 8px; }
.chat-bot-admin .checkbox-label input { width: auto; }
.chat-quota-notice { max-width: 720px; margin-top: 14px; padding: 13px 16px; border: 1px solid #b9d9d3; border-radius: 12px; background: #f1faf8; color: var(--ink-soft); font-size: 13px; }
.chat-quota-notice strong { color: var(--teal-deep); }
.chat-quota-notice ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 20px; margin: 8px 0; padding-left: 20px; }
.chat-quota-notice p, .chat-quota-notice small { display: block; margin: 6px 0 0; }
.learner-home-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 22px; }
.home-panel { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--white); box-shadow: 0 8px 24px rgba(37, 61, 61, .06); }
.home-panel > summary { display: flex; align-items: center; gap: 12px; padding: 17px 18px; cursor: pointer; list-style: none; font-family: "Noto Serif TC", serif; font-size: 19px; }
.home-panel > summary::-webkit-details-marker { display: none; }
.home-panel > summary::after { margin-left: auto; content: "⌄"; color: var(--muted); font-family: sans-serif; font-size: 18px; }
.home-panel[open] > summary::after { content: "⌃"; }
.home-panel > summary span:not(.home-panel-icon) { display: grid; gap: 3px; }
.home-panel > summary small { color: var(--muted); font-family: "Noto Sans TC", sans-serif; font-size: 11px; font-weight: 400; }
.home-panel-icon { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 10px; color: var(--white); font-family: sans-serif; font-size: 17px; }
.home-chat { background: #f2faf9; border-color: #a8d6d0; }
.home-chat > summary { background: #e5f5f2; color: #809E9E; }
.home-chat .home-panel-icon { background: var(--teal-deep); }
.home-course { background: #fffaf4; border-color: #ead4bc; }
.home-course > summary { background: #fff0df; color: #744f2c; }
.home-course .home-panel-icon { background: #c77b45; }
.home-panel-body { padding: 18px; }
.home-chat .home-panel-body { min-height: 150px; }
.home-panel-body p { margin: 0 0 16px; color: var(--ink-soft); line-height: 1.7; }
.home-course .map-list { margin-top: 0; }
.home-course .section-link { margin-bottom: 0; }
@media (max-width: 900px) { .chat-bot-picker { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .chat-bot-picker { grid-template-columns: 1fr; } .chat-input-form { grid-template-columns: 1fr; } .chat-message { max-width: 94%; } }
@media (max-width: 700px) { .report-satisfaction-head { align-items: flex-start; flex-direction: column; } .satisfaction-score { align-self: stretch; text-align: left; } .report-satisfaction-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); } .report-satisfaction-metrics strong { font-size: 18px; } }
@media (max-width: 700px) { .report-recipient-form { grid-template-columns: 1fr; } .saved-recipient-list label { flex-wrap: wrap; } .saved-recipient-list label span { width: 100%; padding-left: 25px; } }
@media (max-width: 700px) and (orientation: portrait) {
  .learner-home-grid { grid-template-columns: 1fr; grid-template-rows: auto auto; gap: 14px; }
  .home-course { grid-row: 1; }
  .home-chat { grid-row: 2; }
}
@media (max-width: 900px) and (orientation: landscape) {
  .learner-home-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .home-panel > summary { padding: 13px 14px; font-size: 17px; }
  .home-panel > summary small { font-size: 12px; }
  .home-panel-body { padding: 14px; }
}
.content-row div { flex: 1; }
.content-row b, .content-row small { display: block; }
.content-row b { font-size: 12px; }
.content-row small { margin-top: 4px; color: var(--ink-soft); font-size: 10px; }

.entry-link-search { display: flex; align-items: end; gap: 12px; margin: 18px 0 8px; }
.entry-link-search label { flex: 1; }
.entry-link-search input { width: 100%; }
.entry-link-count { color: var(--ink-soft); font-size: 14px; margin: 8px 0; }
.entry-link-row { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 10px; }
.entry-link-top { min-width: 0; display: grid; grid-template-columns: minmax(260px, 1fr) max-content max-content; align-items: center; gap: 10px 14px; }
.entry-link-bottom { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(370px, auto); align-items: center; gap: 14px; }
.entry-link-title-form { display: flex; align-items: end; gap: 8px; }
.entry-link-title-form label { flex: 1; color: #5594bf; font-size: 13px; font-weight: 800; }
.entry-link-title-form input { width: 100%; box-sizing: border-box; margin-top: 4px; }
.entry-link-title-form .button { padding: 8px 10px; white-space: nowrap; }
.entry-link-row small { margin: 0; font-size: 14px; white-space: nowrap; }
.entry-source-badge { display: inline-block; padding: 5px 10px; border-radius: 999px; font-size: 14px; font-weight: 800; white-space: nowrap; }
.source-line_official { color: #7a4a00; background: #fff0bd; }
.source-line_openchat { color: #075f3a; background: #d9f4e6; }
.source-admin_link { color: #809E9E; background: #dceafa; }
.source-direct_learner { color: #713b7d; background: #f0ddf4; }
.entry-link-url { width: 100%; min-width: 0; box-sizing: border-box; border: 0; background: #f5f8fb; color: #809E9E; padding: 9px 11px; border-radius: 8px; font-size: 15px; }
.entry-link-actions { display: flex; align-items: stretch; gap: 10px; min-width: 0; }
.entry-link-actions .text-button { white-space: normal; line-height: 1.35; min-height: 42px; }
.entry-link-pagination { display: flex; justify-content: center; align-items: center; gap: 18px; margin: 18px 0 26px; font-size: 15px; }
.line-login-card { margin-top: 16px; padding: 16px 18px; border: 1px solid #cce5d4; border-radius: 14px; background: #f1fbf4; }
.line-bot-admin { margin-top: 20px; }
.line-invite-form { display: grid; grid-template-columns: minmax(220px, 1fr) 160px 120px auto; align-items: end; gap: 12px; margin: 18px 0; }
.line-invite-form label { display: grid; gap: 6px; color: var(--ink-soft); font-size: 13px; font-weight: 700; }
.line-invite-result { display: grid; gap: 5px; margin: 12px 0 18px; padding: 12px 14px; color: #27658a; background: #eef8ff; border: 1px solid #c8e5f7; border-radius: 10px; }
.line-access-row { align-items: center; gap: 14px; }
.line-access-row > div { flex: 1; min-width: 0; }
.line-access-row small { display: block; margin-top: 5px; }
.line-login-card p { margin: 0 0 10px; color: var(--ink-soft); font-size: 14px; }
.button-line { color: #075f3a; background: #d8f3df; border-color: #96d5a7; }
@media (max-width: 900px) {
  .line-invite-form { grid-template-columns: 1fr 1fr; }
  .line-invite-form label:first-child { grid-column: 1 / -1; }
  .entry-link-row { align-items: stretch; }
  .entry-link-top { grid-template-columns: minmax(0, 1fr) auto; }
  .entry-link-title-form { grid-column: 1 / -1; }
  .entry-link-bottom { grid-template-columns: 1fr; gap: 10px; }
  .entry-link-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.published-mark { display: inline-flex; margin-left: 4px; padding: 3px 7px; color: #809E9E; background: #dff0f0; border-radius: 999px; font-size: 9px; font-weight: 700; }
.danger-text { color: var(--danger); }
.rule-list { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 18px 0; padding-top: 15px; border-top: 1px solid var(--line); }
.rule-list .eyebrow { width: 100%; margin-bottom: 0; }
.question-form { display: grid; gap: 10px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.question-form label { display: grid; gap: 6px; color: var(--ink-soft); font-size: 10px; font-weight: 700; }
.question-form input, .question-form select, .question-form textarea { width: 100%; padding: 10px; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; background: var(--paper); outline: none; font-size: 12px; }
.question-form textarea { resize: vertical; }
.form-inline { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.admin-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-top: 28px; padding: 5px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; }
.admin-tabs button { padding: 11px; color: var(--ink-soft); border: 0; border-radius: 8px; background: transparent; font-size: 12px; }
.admin-tabs button.active { color: var(--teal-deep); background: #eaf4f5; font-weight: 700; }
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 10; padding: 12px 16px; color: var(--white); background: var(--ink); border-radius: 10px; box-shadow: var(--shadow); transform: translateX(-50%); font-size: 12px; }

@media (max-width: 840px) {
  .entry-grid { grid-template-columns: 1fr; gap: 10px; min-height: auto; }
  .entry-art { min-height: 430px; order: -1; }
  .entry-copy { padding-top: 10px; }
  .arch-art { width: 290px; height: 340px; border-radius: 145px 145px 20px 20px; }
  .arch-window { inset: auto 28px 28px; padding: 17px; }
  .arch-window span { padding: 8px 12px; font-size: 16px; }
  .quote-card { right: 2%; bottom: 30px; width: 190px; padding: 17px; }
  .quote-card p { font-size: 14px; }
  .lesson-layout, .admin-grid { grid-template-columns: 1fr; }
  .lesson-list { order: 1; }
  .lesson-main { order: 2; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-access { grid-template-columns: 1fr; align-items: stretch; }
}

@media (max-width: 560px) {
  .knowledge-kpis { grid-template-columns: 1fr; }
  .course-index-card > .knowledge-kpis { grid-template-columns: repeat(2, 1fr); }
  .knowledge-meta-form { width: 100%; grid-template-columns: 1fr 1fr; margin-top: 12px; }
  .topbar, main, .footer { width: min(100% - 32px, 480px); }
  .topbar { min-height: 72px; gap: 8px; }
  .brand small { display: none; }
  .topnav { margin-left: auto; }
  .nav-link { padding: 7px 9px; font-size: 11px; }
  .code-badge { display: none; }
  .footer { display: grid; gap: 5px; margin-top: 40px; }
  .entry-art { min-height: 340px; }
  .sun { top: 16px; width: 150px; height: 150px; }
  .arch-art { width: 230px; height: 280px; }
  .arch-window { inset: auto 20px 20px; padding: 12px; gap: 6px; }
  .arch-window span { padding: 6px 9px; font-size: 13px; }
  .arch-window span:nth-child(2) { margin-left: 12px; }
  .arch-window span:nth-child(3) { margin-left: 24px; }
  .quote-card { right: -4px; bottom: 10px; width: 150px; padding: 12px; }
  .quote-mark { font-size: 30px; }
  .quote-card p { margin: 6px 0 8px; font-size: 11px; }
  h1 { font-size: 38px; }
  .split-heading, .lesson-info, .admin-heading { align-items: flex-start; flex-direction: column; }
  .stat-card { width: 100%; }
  .map-list { margin-left: 12px; }
  .map-item { grid-template-columns: 28px 1fr; gap: 12px; margin-left: -15px; }
  .map-node { width: 28px; height: 28px; border-width: 4px; font-size: 10px; }
  .map-card { padding: 16px; }
  .map-meta { align-items: flex-start; flex-direction: column; }
  .map-progress { flex-wrap: wrap; }
  .map-progress .progress { flex-basis: 100%; order: 3; }
  .section-link { align-items: stretch; flex-direction: column; margin-left: 40px; }
  .video-frame { min-height: 280px; border-radius: 140px 140px 14px 14px; }
  .video-content p { font-size: 22px; }
  .short-answer-input { min-height: 0; aspect-ratio: 4 / 3; }
  .site-shell small, .eyebrow, .status-pill, .question-number { font-size: 20px !important; }
  .ai-feedback { grid-template-columns: 1fr; }
  .stats-row strong { font-size: 24px; }
  .stats-row div { padding: 13px 9px; }
  .kpi-card { padding: 14px; }
  .kpi-card strong { font-size: 28px; }
  .tree-level { align-items: flex-start; flex-wrap: wrap; }
  .tree-actions { width: 100%; padding-left: 32px; flex-wrap: wrap; }
  .tree-milestone { margin-left: 8px; }
  .tree-unit-list { margin-left: 18px; }
  .tree-editors { grid-template-columns: 1fr; }
}

.assessment-entry-note { display: grid; gap: 4px; padding: 14px 16px; margin-bottom: 18px; border-left: 4px solid #2c8c8a; background: #e9f6f4; border-radius: 8px; }
.assessment-entry-note b { font-size: 1.15rem; color: #809E9E; }
.assessment-entry-note span { font-size: .95rem; line-height: 1.6; }
.assessment-page { max-width: 900px; }
.assessment-instructions { padding: 18px 22px; margin: 18px 0 24px; white-space: pre-wrap; line-height: 1.8; background: #f4eee7; border-radius: 12px; }
.assessment-language { color: #567; font-size: .95rem; }
.assessment-question-card { padding: 22px; margin: 18px 0; background: #fffdfa; border: 1px solid #e2d7cd; border-radius: 14px; box-shadow: 0 5px 18px rgba(62,49,40,.06); }
.assessment-question-meta { display: flex; align-items: center; gap: 12px; color: #557; font-size: .95rem; }
.assessment-question-meta span { flex: 1; }
.assessment-question-meta strong { color: #809E9E; }
.assessment-question-card h2 { margin: 14px 0 18px; font-size: 1.2rem; line-height: 1.65; }
.assessment-question-card textarea { width: 100%; min-height: 150px; resize: vertical; padding: 14px; border: 1px solid #c8d1d1; border-radius: 10px; font: inherit; line-height: 1.7; }
.assessment-wait-note { text-align: center; color: #667; margin-top: 12px; }
.assessment-result { padding: 24px; background: #edf8f5; border: 1px solid #a8d5cb; border-radius: 14px; }
.assessment-total { margin: 10px 0 18px; color: #809E9E; }
.assessment-total strong { font-size: 2.5rem; }
.assessment-result-row { display: flex; justify-content: space-between; gap: 20px; padding: 14px 0; border-top: 1px solid #cce4de; }
.assessment-result-row div { display: grid; gap: 4px; }
.assessment-result-row span { white-space: pre-wrap; line-height: 1.6; }
.assessment-project-row, .assessment-question-row, .assessment-link-row { align-items: center; gap: 16px; }
.assessment-project-row small, .assessment-question-row small, .assessment-link-row small { display: block; margin-top: 6px; color: #68777c; line-height: 1.5; }
.assessment-project-row > div:first-child, .assessment-question-row > div:first-child, .assessment-link-row > div:first-child { flex: 1; }
.assessment-detail-tools { margin-top: 24px; padding-top: 20px; border-top: 2px solid #e4d8cf; }
.assessment-detail-tools > label { display: block; max-width: 260px; margin-bottom: 18px; }
.assessment-link-row img { display: block; width: 110px; height: 110px; margin-top: 10px; border-radius: 6px; }
.report-snapshot-row { align-items: center; gap: 16px; }
.report-snapshot-row > div { flex: 1; }
.report-snapshot-row small { display: block; margin-top: 6px; color: #68777c; }

/* Page navigation and learner entry points are intentionally easy to read and tap. */
.nav-link { font-size: 20px; }
.page-wrap > .button,
.page-wrap .button-primary,
.page-wrap .button-ghost,
  .page-wrap .button-soft { font-size: 20px; }
.page-wrap > .back-link,
.page-wrap .back-link,
.page-wrap .text-button { font-size: 18px; }
.section-link .button { font-size: 20px; }
.map-card .text-button { font-size: 18px; }
.lesson-row b { font-size: 18px; }
.lesson-row small { font-size: 15px; }
.free-practice { font-size: 18px; }
.home-panel > summary { font-size: 21px; }
.home-panel > summary small { font-size: 15px; }

/* Learner milestone hierarchy: keep the same scale on desktop and phone. */
.milestone-tree { --learner-unit-title-size: 18px; --learner-milestone-title-size: calc(var(--learner-unit-title-size) * 1.3); }
.learner-milestone summary strong { font-size: 24px !important; line-height: 1.35; }
.learner-milestone summary em { color: var(--teal-deep); font-size: 24px !important; font-style: normal; font-weight: 700; line-height: 1.35; }
.learner-unit-list .lesson-row b { color: rgba(31, 65, 65, .72); font-size: 18px !important; font-weight: 600; line-height: 1.45; }
.learner-unit-list .lesson-row small { color: rgba(83, 105, 106, .68); }
.quiz-unlock h3 { font-size: 21px; }
.quiz-unlock p { font-size: 15px; }

@media (max-width: 560px) {
  .nav-link { font-size: 17px; }
  .page-wrap > .button,
  .page-wrap .button-primary,
  .page-wrap .button-ghost,
  .page-wrap .button-soft,
  .section-link .button { font-size: 17px; }
  .page-wrap > .back-link,
  .page-wrap .back-link,
  .page-wrap .text-button,
  .map-card .text-button { font-size: 15px; }
  .lesson-row b { font-size: 17px; }
  .lesson-row small { font-size: 15px; }
  .free-practice { font-size: 17px; }
  .home-panel > summary { font-size: 18px; }
  .home-panel > summary small { font-size: 15px; }
  .quiz-unlock h3 { font-size: 18px; }
  .video-frame:has(.text-content-frame) { min-height: 0; height: auto; }
  .text-content-frame { height: 66svh; min-height: 240px; max-height: 420px; padding: 24px 22px; }
  .text-content-frame article { font-size: 16px; line-height: 1.9; }
  .report-filters { grid-template-columns: 1fr; }
  .report-keyword { grid-column: auto; }
  .report-actions { flex-direction: column; }
  .report-kpis { grid-template-columns: repeat(2, 1fr); }
  .report-analysis-grid { grid-template-columns: 1fr; }
  .report-bar-row { grid-template-columns: 80px 1fr 36px 40px; }
}


.code-rule-note strong { color: var(--teal-deep); font-size: 1.22em; font-weight: 900; }
.form-message.error { color: #b42318; font-size: 14px; font-weight: 800; padding: 10px 12px; border: 1px solid #f0b4ad; border-radius: 12px; background: #fff3f0; }
.code-inputs input.input-error { border-color: #d92d20 !important; background: #fff3f0; box-shadow: 0 0 0 3px rgba(217,45,32,.12); }
.ticket-card.code-error { border-color: #d92d20; box-shadow: 0 14px 30px rgba(217,45,32,.12); }
.profile-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 18px; }
.profile-fields label { display: grid; gap: 7px; color: var(--ink); font-size: 12px; font-weight: 700; }
.profile-fields select { width: 100%; padding: 11px 12px; border: 1px solid rgba(31,65,65,.2); border-radius: 8px; background: #fff; color: var(--ink); font: inherit; }
@media (max-width: 620px) { .profile-fields { grid-template-columns: 1fr; } }

@media (max-width: 720px) {
  .topbar { width: calc(100% - 24px); min-height: 78px; gap: 10px; }
  .brand { flex: 1 1 auto; gap: 8px; }
  .brand img { width: 36px; height: 36px; }
  .brand b { font-size: 17px; line-height: 1.12; white-space: normal; }
  .brand small { display: block; font-size: 10px; line-height: 1.1; white-space: nowrap; }
  .entry-system-title { margin-bottom: 14px; font-size: 18px; letter-spacing: .08em; }
  .topnav { flex: 0 0 auto; gap: 4px; margin-left: 0; }
  .nav-link { padding: 8px 10px; font-size: 12px; }
}


.privacy-info-block { margin: 14px 0 4px; }
.privacy-open-button { color: var(--teal-dark); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.privacy-popover { margin-top: 10px; padding: 16px 18px; border: 1px solid rgba(128, 158, 158, 0.38); border-radius: 18px; background: rgba(128, 158, 158, 0.10); color: var(--ink); box-shadow: 0 16px 35px rgba(28, 52, 52, 0.08); }
.privacy-popover h3 { margin: 0 0 8px; font-size: 18px; color: var(--teal-dark); }
.privacy-popover p { margin: 0; line-height: 1.9; font-size: 15px; }
.home-panel .privacy-info-block { margin-top: 16px; }
@media (max-width: 720px) {
  .privacy-popover { max-height: 46vh; overflow: auto; -webkit-overflow-scrolling: touch; }
  .privacy-popover p { font-size: 16px; }
}