:root {
  --bg: #f5f3ef;
  --surface: #fbfaf7;
  --white: #fff;
  --blue: #647d91;
  --blue-dark: #40586b;
  --text: #29353d;
  --muted: #7b858b;
  --border: #e5e1da;
  --soft: #e9eef0;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
.container { max-width: 900px; margin: auto; padding: 28px 20px 40px; }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 50px; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; letter-spacing: .03em; }
.nav-right { display: flex; align-items: center; gap: 10px; }
.nav-link, .ghost-button { border: 1px solid var(--border); border-radius: 9px; background: transparent; color: var(--blue-dark); padding: 8px 12px; font-size: 12px; }
.nav-link:hover, .ghost-button:hover { border-color: #b7c4cc; background: var(--white); }
.hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.hero-copy { min-width: 0; }
.kicker { margin: 0 0 11px; color: var(--blue-dark); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(31px, 6vw, 44px); line-height: 1.12; letter-spacing: -.045em; }
.intro { max-width: 520px; margin: 14px 0 0; color: var(--muted); font-size: 14px; line-height: 1.8; }
.primary-button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; border: 0; border-radius: 10px; background: var(--blue); color: #fff; padding: 0 14px; font-size: 12px; }
.primary-button:hover { background: var(--blue-dark); }

.learning-section-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.learning-section-card { position: relative; min-height: 178px; padding: 20px; border: 1px solid var(--border); border-radius: 17px; background: var(--surface); transition: transform .2s, border-color .2s, box-shadow .2s; }
.learning-section-card:hover { transform: translateY(-3px); border-color: #b7c4cc; background: var(--white); box-shadow: 0 12px 24px rgba(41, 53, 61, .07); }
.section-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--soft); color: var(--blue-dark); font-size: 15px; }
.learning-section-card h2 { margin: 35px 0 7px; font-size: 18px; }
.learning-section-card p { max-width: 320px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.section-arrow { position: absolute; right: 20px; bottom: 18px; color: var(--blue-dark); font-size: 19px; }

.option-row { display: flex; gap: 8px; overflow-x: auto; margin: 0 -2px 22px; padding: 2px; }
.option-button { flex: 0 0 auto; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--muted); padding: 7px 12px; font-size: 12px; }
.option-button.active, .option-button:hover { border-color: var(--blue); background: var(--blue); color: #fff; }
.content-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.section-head { display: flex; align-items: baseline; gap: 9px; }
.section-head h2 { margin: 0; font-size: 15px; }
.section-head span { color: var(--muted); font-size: 12px; }
.toolbar-actions { display: flex; gap: 8px; }
.video-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.video-card { display: flex; overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); cursor: pointer; }
.video-card:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.video-media { display: grid; place-items: center; overflow: hidden; aspect-ratio: 16 / 9; background: var(--soft); color: var(--muted); }
.video-media video, .video-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.video-link-cover { position: relative; display: grid; place-items: center; width: 100%; height: 100%; }
.video-link-cover::after { content: "观看原视频  ↗"; position: absolute; right: 12px; bottom: 11px; border-radius: 8px; background: rgba(41, 53, 61, .78); color: #fff; padding: 6px 9px; font-size: 11px; }
.video-placeholder { font-size: 12px; }
.video-card-body { display: flex; min-width: 0; flex: 1; flex-direction: column; padding: 14px; }
.video-card-meta { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 11px; }
.certified-badge { color: var(--blue-dark); font-weight: 700; }
.video-card h2 { margin: 9px 0 6px; font-size: 15px; line-height: 1.5; }
.video-original-author { display: block; margin: 0 0 8px; color: var(--text); font-size: 12px; line-height: 1.6; }
.video-card-summary { display: -webkit-box; overflow: hidden; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; white-space: pre-wrap; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.video-card-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: auto; padding-top: 13px; }
.delete-video { border: 0; background: transparent; color: #9a5c50; padding: 0; font-size: 11px; }
.learning-empty { grid-column: 1 / -1; padding: 42px 20px; border: 1px dashed #cbd3d5; border-radius: 15px; color: var(--muted); text-align: center; font-size: 13px; line-height: 1.7; }

.learning-modal[hidden] { display: none; }
.learning-modal { position: fixed; z-index: 30; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(41, 53, 61, .32); }
.modal-box { display: flex; flex-direction: column; width: min(100%, 600px); max-height: min(86vh, 760px); overflow: hidden; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: 0 18px 52px rgba(41, 53, 61, .18); }
.standards-modal .modal-box { width: min(100%, 680px); }
.modal-top { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; gap: 12px; padding: 20px 22px 16px; border-bottom: 1px solid var(--border); }
.modal-top h2 { margin: 0; font-size: 19px; }
.modal-close { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; border: 0; border-radius: 50%; background: var(--soft); color: var(--blue-dark); font-size: 19px; line-height: 1; }
.modal-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px 22px 24px; scrollbar-width: thin; scrollbar-color: #9aadb7 transparent; }
.modal-scroll::-webkit-scrollbar { width: 7px; }
.modal-scroll::-webkit-scrollbar-track { background: transparent; margin: 8px 0; }
.modal-scroll::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: #9aadb7; background-clip: padding-box; }
.modal-scroll::-webkit-scrollbar-thumb:hover { background: var(--blue); background-clip: padding-box; }
.standards-content h3 { margin: 24px 0 10px; padding-top: 16px; border-top: 1px solid var(--border); font-size: 16px; }
.standards-content h4 { margin: 17px 0 6px; font-size: 13px; }
.standards-content p { margin: 7px 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
.standards-lead { color: var(--text) !important; font-size: 13px !important; }
.learning-form { display: grid; gap: 15px; }
.learning-form label { display: grid; gap: 7px; color: var(--text); font-size: 12px; }
.learning-form input, .learning-form textarea { width: 100%; border: 1px solid var(--border); border-radius: 10px; background: var(--white); color: var(--text); outline: 0; padding: 11px 12px; font-size: 13px; }
.learning-form textarea { min-height: 100px; resize: vertical; line-height: 1.6; }
.learning-form input:focus, .learning-form textarea:focus { border-color: var(--blue); }
.form-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-help { margin: -3px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.form-actions { display: flex; align-items: center; gap: 12px; }
.form-actions span { color: var(--blue-dark); font-size: 12px; }
.form-actions span.error { color: #9a5c50; }
.article-placeholder { padding: 36px 24px; border: 1px dashed #cbd3d5; border-radius: 15px; color: var(--muted); text-align: center; }
.article-placeholder .section-icon { margin: 0 auto 14px; }
.article-placeholder h2 { margin: 0 0 8px; color: var(--text); font-size: 18px; }
.article-placeholder p { margin: 0 0 18px; font-size: 12px; line-height: 1.7; }
.article-list { display: grid; gap: 14px; }
.article-card { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); padding: 18px 20px; }
.article-card-meta { color: var(--muted); font-size: 11px; }
.article-card h2 { margin: 8px 0 6px; font-size: 17px; line-height: 1.5; }
.article-summary { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.article-content { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); color: var(--text); font-size: 13px; line-height: 1.85; white-space: pre-wrap; }

html[data-theme="dark"] { color-scheme: dark; --bg: #10181e; --surface: #18242b; --white: #1a252c; --blue: #7898ab; --blue-dark: #c0d5e0; --text: #edf4f7; --muted: #a8bbc5; --border: #344852; --soft: #263841; }
html[data-theme="dark"] .nav-link:hover, html[data-theme="dark"] .ghost-button:hover, html[data-theme="dark"] .learning-section-card:hover { background: #1d2b33; }
html[data-theme="dark"] .learning-form input, html[data-theme="dark"] .learning-form textarea { background: #152128; color: var(--text); }
html[data-theme="dark"] .learning-modal { background: rgba(8, 14, 18, .72); }

@media (max-width: 680px) {
  .container { padding: 22px 16px 30px; }
  .nav { margin-bottom: 38px; }
  .nav-right { gap: 7px; }
  .nav-link { padding: 7px 9px; }
  .hero { display: block; }
  .hero .primary-button { margin-top: 18px; }
  .learning-section-grid, .video-list { grid-template-columns: 1fr; }
  .learning-section-card { min-height: 160px; }
  .content-toolbar { align-items: flex-start; }
  .form-split { grid-template-columns: 1fr; }
  .modal-top { padding: 18px 18px 14px; }
  .modal-scroll { padding: 18px; }
}

@media (max-width: 430px) {
  .nav { align-items: flex-start; }
  .nav-right { flex-wrap: wrap; justify-content: flex-end; }
  .toolbar-actions { flex-direction: column; align-items: stretch; }
}