:root {
  --bg-page: #fdfbf5;
  --bg-card: #fff8ee;
  --green-main: #72b166;
  --green-deep: #5e9a4d;
  --green-light: #ddeccf;
  --yellow-main: #ffe066;
  --yellow-strong: #ffd966;
  --blue-light: #d9f1ff;
  --blue-main: #73c9f6;
  --text-main: #333333;
  --text-secondary: #666666;
  --text-weak: #999999;
  --border-main: #dce6d9;
  --white: #ffffff;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", "PingFang SC", sans-serif; background: var(--bg-page); color: var(--text-main); }
a { color: var(--green-deep); text-decoration: none; }
.wrap { max-width: 720px; margin: 0 auto; padding: 20px 16px 40px; }
.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 8px; flex-wrap: wrap; }
.topbar h1 { margin: 0; font-size: 20px; color: var(--text-main); }
.coach-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; padding: 10px 12px; background: var(--bg-card); border: 1px solid var(--green-main); border-left-width: 4px; border-radius: 14px; }
.nav-link { font-size: 13px; padding: 6px 12px; border-radius: 999px; background: var(--green-light); color: var(--green-deep); }
.nav-link.is-active { background: var(--green-main); color: #fff !important; }
.card { background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(220, 230, 217, 0.75); border-radius: 16px; padding: 16px; margin-bottom: 14px; box-shadow: 0 6px 16px rgba(31, 42, 55, 0.08); }
.hero-card { margin-bottom: 14px; padding: 18px 20px; border-radius: 22px; background: linear-gradient(135deg, #D8EEA4 0%, #B9D97C 48%, #A8CD66 100%); box-shadow: 0 9px 21px rgba(95, 130, 54, 0.22); }
.hero-title { font-size: 22px; font-weight: 800; color: #111; line-height: 1.25; margin: 0; }
.hero-line { margin-top: 6px; font-size: 15px; color: #222; line-height: 1.5; }
button, .btn { height: 42px; line-height: 42px; padding: 0 16px; border-radius: 999px; background: linear-gradient(90deg, #8DBF4D 0%, #A9CF5F 100%); color: #fff; border: none; cursor: pointer; font-weight: 700; box-shadow: 0 4px 9px rgba(120, 160, 60, 0.22); display: inline-block; text-align: center; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.metric { background: var(--white); border: 1px solid var(--border-main); border-radius: 12px; padding: 12px; }
.metric strong { display: block; font-size: 22px; color: var(--yellow-strong); }
.metric span { color: var(--text-secondary); font-size: 12px; }
.metric--green strong { color: var(--green-deep); }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: 10px 6px; border-bottom: 1px solid var(--border-main); font-size: 14px; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--green-light); color: var(--green-deep); font-size: 12px; }
.badge--warn { background: #fff3cd; color: #856404; }
.notice { padding: 10px 12px; border-radius: 8px; margin-bottom: 12px; font-size: 13px; }
.notice--mock { background: var(--blue-light); border: 1px solid var(--blue-main); }
.notice--cloud { background: var(--green-light); border: 1px solid var(--green-main); color: var(--green-deep); }
.notice--success { background: #e7f5df; border: 1px solid var(--green-main); color: #356d2d; }
.notice--error { background: #fff0ee; border: 1px solid #e18a82; color: #9d2d25; }
.action-feedback { display: grid; gap: 4px; margin-bottom: 12px; }
.action-feedback strong { font-size: 14px; }
.action-feedback span { font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.action-feedback a { width: fit-content; font-size: 13px; font-weight: 700; text-decoration: underline; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
input, select, textarea, button { font: inherit; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border-main); }
.btn-secondary { background: var(--white); color: var(--green-deep); border: 1px solid var(--border-main); box-shadow: none; }
.btn-danger { background: #c62828; border-color: #c62828; }
.pending-lesson-card { position: relative; }
.pending-lesson-card h3 { margin: 0 0 5px; overflow-wrap: anywhere; }
.pending-lesson-content { white-space: pre-wrap; overflow-wrap: anywhere; }
.pending-void-reason { display: grid; gap: 5px; margin: 12px 0 8px; color: var(--text-secondary); font-size: 12px; font-weight: 600; }
.pending-void-reason textarea { width: 100%; resize: vertical; background: var(--white); color: var(--text-main); line-height: 1.45; }
.pending-action-status { min-height: 18px; margin: 4px 0 8px; color: var(--green-deep); font-size: 13px; font-weight: 700; }
.pending-lesson-card.is-processing { opacity: .72; }
.pending-lesson-card.is-processing::after { content: ''; position: absolute; inset: 0; border-radius: 16px; background: rgba(255,255,255,.24); pointer-events: none; }
.muted { color: var(--text-secondary); font-size: 13px; }
.error { color: #b71c1c; }
.student-card, .course-card { display: block; padding: 14px; border: 1px solid var(--border-main); border-radius: 14px; margin-bottom: 10px; background: var(--white); }
.student-card h3, .course-card h3 { margin: 0 0 6px; font-size: 16px; }
.form-row { margin-bottom: 10px; }
.form-row label { display: block; font-size: 13px; margin-bottom: 4px; color: var(--text-secondary); }
.form-row input, .form-row select, .form-row textarea { width: 100%; background: var(--white); }
.field-hint { display: block; margin-top: 4px; color: var(--text-secondary); font-size: 12px; line-height: 1.45; }
.quick-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 12px 0; }
.quick-links a { display: block; padding: 12px; border-radius: 12px; background: var(--green-light); text-align: center; font-weight: 600; color: var(--green-deep); }
.workspace-actions { margin: 12px 0 18px; }
.dashboard-metric-link { color: inherit; box-shadow: 0 2px 8px rgba(31, 42, 55, 0.04); transition: transform .15s ease, border-color .15s ease; }
.dashboard-metric-link:hover { transform: translateY(-1px); border-color: var(--green-main); }
.urgent-banner { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 13px 14px; margin-bottom: 12px; border: 1px solid #e6b84d; border-left: 5px solid #e3a828; border-radius: 12px; background: #fff8df; color: #6f4c00; }
.urgent-banner strong { font-size: 15px; }
.urgent-banner span { grid-column: 1; font-size: 13px; color: #795d1b; }
.urgent-banner b { grid-column: 2; grid-row: 1 / span 2; white-space: nowrap; font-size: 13px; }
.quiet-banner { padding: 10px 12px; margin-bottom: 12px; border-radius: 10px; background: #f1f7ed; color: #587156; font-size: 13px; }
.compact-list { border-top: 1px solid var(--border-main); }
.compact-list-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; gap: 10px; align-items: center; padding: 13px 4px; border-bottom: 1px solid var(--border-main); color: var(--text-main); }
.compact-list-main, .compact-list-meta { min-width: 0; display: grid; gap: 3px; }
.compact-list-main strong, .compact-list-main small, .compact-list-meta small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compact-list-main strong { font-size: 15px; }
.compact-list-main small, .compact-list-meta small { color: var(--text-secondary); font-size: 12px; }
.compact-list-meta { text-align: right; color: var(--green-deep); font-size: 13px; }
.compact-list-arrow { color: var(--green-deep); font-size: 23px; line-height: 1; }
.list-empty { padding: 14px 0; border-top: 1px solid var(--border-main); border-bottom: 1px solid var(--border-main); }
.invite-code { margin: 6px 0; font-size: 28px; letter-spacing: 4px; font-weight: 800; color: var(--green-deep); }
.connection-request { padding: 14px 4px; border-bottom: 1px solid var(--border-main); }
.connection-request > div:first-child { display: grid; gap: 4px; }
.connection-request small { color: var(--text-secondary); }
.connection-actions { display: grid; grid-template-columns: minmax(0, 1fr) 86px auto auto; gap: 7px; margin-top: 10px; }
.participant-row { display: grid; grid-template-columns: 1fr 100px 80px; gap: 8px; align-items: center; margin-bottom: 8px; }
.member-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.member-option { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 5px 8px; padding: 9px; border: 1px solid var(--border-main); border-radius: 12px; background: var(--white); }
.member-option span, .member-option small { min-width: 0; overflow-wrap: anywhere; }
.member-option small { grid-column: 2; color: var(--text-secondary); }
@media (max-width: 560px) {
  .wrap { padding: 14px 12px 32px; }
  /* Navigation is a complete action set, not a horizontally hidden strip. */
  .coach-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; padding: 9px; }
  .nav-link { min-width: 0; padding: 6px 4px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mobile-cards { display: block; width: 100%; border-collapse: separate; }
  .mobile-cards thead { display: none; }
  .mobile-cards tbody, .mobile-cards tr, .mobile-cards td { display: block; width: 100%; }
  .mobile-cards tr { margin: 0 0 12px; padding: 8px 12px; border: 1px solid var(--border-main); border-radius: 14px; background: var(--white); }
  .mobile-cards td { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 8px; padding: 8px 0; border: 0; white-space: normal; overflow-wrap: anywhere; }
  .mobile-cards td::before { content: attr(data-label); color: var(--text-secondary); font-size: 12px; font-weight: 600; }
  .participant-row { grid-template-columns: minmax(0, 1fr) 96px 66px; }
  .member-picker { grid-template-columns: 1fr; }
  .connection-actions { grid-template-columns: minmax(0, 1fr) 72px; }
  .connection-actions button { width: 100%; }
  .toolbar > * { flex: 1 1 auto; min-width: 0; }
  input, select, textarea { max-width: 100%; }
}
.section-title { font-size: 16px; margin: 20px 0 10px; color: var(--text-main); }
.share-summary-section { margin: 18px 0; padding-top: 16px; border-top: 1px solid var(--border-main); }
.share-summary-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.share-summary-toolbar h3 { margin: 0 0 4px; font-size: 17px; }
.share-summary-toolbar p { margin: 0; color: var(--text-secondary); font-size: 12px; line-height: 1.45; }
.share-summary-toolbar button { flex: 0 0 auto; }
.share-summary-card { overflow: hidden; border: 1px solid #b8d89f; border-radius: 20px; background: #fffdf8; box-shadow: 0 10px 26px rgba(73, 111, 51, 0.14); }
.share-summary-heading { padding: 20px 18px 18px; background: linear-gradient(135deg, #407c4e 0%, #72ae67 58%, #a1c96f 100%); color: #fff; }
.share-summary-heading > span { display: block; font-size: 12px; opacity: .88; letter-spacing: .04em; }
.share-summary-heading h2 { margin: 6px 0 5px; color: #fff; font-size: 23px; line-height: 1.28; overflow-wrap: anywhere; }
.share-summary-heading p { margin: 0; color: rgba(255,255,255,.92); font-size: 13px; overflow-wrap: anywhere; }
.share-summary-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid #e2ecd9; }
.share-summary-metrics > div { min-width: 0; padding: 14px 7px; text-align: center; border-right: 1px solid #e2ecd9; }
.share-summary-metrics > div:last-child { border-right: 0; }
.share-summary-metrics strong { display: block; color: #3f7d47; font-size: 22px; line-height: 1.1; overflow-wrap: anywhere; }
.share-summary-metrics span { display: block; margin-top: 5px; color: #66735f; font-size: 11px; }
.share-summary-credit, .share-summary-latest, .share-summary-next, .share-summary-empty, .share-summary-pending { margin: 0 16px; }
.share-summary-credit { display: grid; gap: 3px; padding: 13px 0; border-bottom: 1px solid #e8eee1; }
.share-summary-credit span, .share-summary-latest > span { color: #687364; font-size: 12px; }
.share-summary-credit strong { color: #344b36; font-size: 14px; overflow-wrap: anywhere; }
.share-summary-latest { display: grid; gap: 4px; padding: 14px 0; border-bottom: 1px solid #e8eee1; }
.share-summary-latest strong, .share-summary-next b { color: #3d5941; font-size: 14px; }
.share-summary-latest p { margin: 2px 0 0; color: #4e594f; font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.share-summary-next { display: grid; gap: 4px; padding: 14px 0; }
.share-summary-next span { color: #4e594f; font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.share-summary-empty { padding: 15px 0; color: #687364; font-size: 13px; line-height: 1.55; }
.share-summary-pending { padding: 0 0 15px; color: #8b6118; font-size: 12px; line-height: 1.5; }
.share-capture-exit { position: fixed; z-index: 10; right: 16px; bottom: 16px; background: #2f5334; box-shadow: 0 5px 18px rgba(0,0,0,.2); }
body.share-capture-mode { background: #f6f8ef; }
body.share-capture-mode .wrap { max-width: 560px; padding: 16px; }
body.share-capture-mode .wrap > :not(#root) { display: none !important; }
body.share-capture-mode #root { margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
body.share-capture-mode #root > :not(.share-summary-section) { display: none !important; }
body.share-capture-mode .share-summary-section { margin: 0; padding: 0; border: 0; }
body.share-capture-mode .share-summary-toolbar { display: none; }
@media (max-width: 560px) {
  .share-summary-toolbar { align-items: flex-start; }
  .share-summary-toolbar button { min-width: 108px; padding: 0 10px; }
  .share-summary-heading { padding: 18px 15px 16px; }
  .share-summary-heading h2 { font-size: 21px; }
  .share-summary-metrics > div { padding: 13px 4px; }
  .share-summary-metrics strong { font-size: 20px; }
  .share-summary-credit, .share-summary-latest, .share-summary-next, .share-summary-empty, .share-summary-pending { margin-left: 14px; margin-right: 14px; }
}