:root {
  --ta-navy: #08264d;
  --ta-blue: #0c4f88;
  --ta-blue-2: #1474b8;
  --ta-gold: #d7a82f;
  --ta-gold-soft: #fff6d8;
  --ta-ink: #172033;
  --ta-muted: #607089;
  --ta-bg: #f4f7fb;
  --ta-card: #ffffff;
  --ta-line: #dbe4ef;
  --ta-success: #157347;
  --ta-danger: #b42318;
  --ta-warning: #9a6700;
  --ta-shadow: 0 12px 35px rgba(8,38,77,.10);
}
.ta-grammar-app, .ta-grammar-app * { box-sizing: border-box; }
.ta-grammar-app {
  color: var(--ta-ink);
  background: var(--ta-bg);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  line-height: 1.55;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--ta-line);
}
.ta-grammar-app button, .ta-grammar-app input, .ta-grammar-app select,
.ta-grammar-app textarea { font: inherit; }
.ta-topbar {
  background: linear-gradient(125deg, var(--ta-navy), var(--ta-blue));
  color: #fff;
  padding: 20px clamp(18px, 4vw, 42px);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.ta-brand { display: flex; align-items: center; gap: 16px; min-width: 0; }
.ta-brand img { background:#fff; object-fit: contain; border-radius: 12px; padding: 4px; }
.ta-brand .ta-tesol-logo { width: 78px; height: 58px; }
.ta-brand .ta-wesco-logo { width: 148px; height: 58px; }
.ta-brand-copy h1 { margin:0; font-size: clamp(1.2rem, 3vw, 2rem); line-height:1.15; }
.ta-brand-copy p { margin:5px 0 0; opacity:.82; font-size:.92rem; }
.ta-top-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.ta-btn {
  border:0; border-radius:12px; padding:11px 16px; cursor:pointer;
  font-weight:700; transition:transform .15s ease, background .15s ease, opacity .15s ease;
}
.ta-btn:hover { transform:translateY(-1px); }
.ta-btn:focus-visible, .ta-unit-card:focus-visible, .ta-option:focus-within {
  outline:3px solid #ffd86b; outline-offset:3px;
}
.ta-btn-primary { color:#fff; background:var(--ta-blue-2); }
.ta-btn-gold { color:#142038; background:var(--ta-gold); }
.ta-btn-soft { color:var(--ta-navy); background:#edf4fb; }
.ta-btn-outline { color:var(--ta-navy); background:#fff; border:1px solid var(--ta-line); }
.ta-btn-danger { color:#fff; background:var(--ta-danger); }
.ta-btn[disabled] { opacity:.5; cursor:not-allowed; transform:none; }

.ta-shell { display:grid; grid-template-columns: 310px minmax(0,1fr); min-height:760px; }
.ta-sidebar {
  background:#fff; border-right:1px solid var(--ta-line);
  padding:22px; position:relative;
}
.ta-sidebar h2 { margin:0 0 14px; color:var(--ta-navy); font-size:1.05rem; }
.ta-search, .ta-select, .ta-input, .ta-textarea {
  width:100%; border:1px solid #b8c7d9; border-radius:12px; background:#fff;
  color:var(--ta-ink); padding:11px 12px;
}
.ta-search:focus, .ta-select:focus, .ta-input:focus, .ta-textarea:focus {
  outline:3px solid rgba(20,116,184,.22); border-color:var(--ta-blue-2);
}
.ta-filter-stack { display:grid; gap:10px; margin-bottom:16px; }
.ta-course-progress { margin:16px 0; }
.ta-progress-label { display:flex; justify-content:space-between; gap:10px; font-size:.88rem; color:var(--ta-muted); }
.ta-progress-track { height:10px; border-radius:20px; background:#e4ebf3; overflow:hidden; margin-top:7px; }
.ta-progress-fill { height:100%; width:0; background:linear-gradient(90deg,var(--ta-blue-2),var(--ta-gold)); transition:width .25s ease; }
.ta-unit-list { display:grid; gap:8px; max-height:560px; overflow:auto; padding-right:4px; }
.ta-unit-card {
  width:100%; text-align:left; border:1px solid var(--ta-line); background:#fff;
  border-radius:12px; padding:11px 12px; cursor:pointer; color:var(--ta-ink);
}
.ta-unit-card:hover { border-color:var(--ta-blue-2); background:#f6fbff; }
.ta-unit-card.active { border-color:var(--ta-blue-2); background:#eaf5ff; box-shadow:inset 4px 0 var(--ta-blue-2); }
.ta-unit-card strong { display:block; color:var(--ta-navy); }
.ta-unit-meta { display:flex; gap:7px; flex-wrap:wrap; margin-top:4px; }
.ta-chip {
  display:inline-flex; align-items:center; border-radius:999px; padding:3px 8px;
  font-size:.72rem; background:#eef3f8; color:#44546b;
}
.ta-chip.ready { background:#dcfce7; color:#166534; }
.ta-chip.mapped { background:#fff3cd; color:#7a5400; }

.ta-main { min-width:0; padding:clamp(18px,4vw,38px); }
.ta-hero {
  border-radius:22px; padding:clamp(22px,5vw,46px); color:#fff;
  background:
    radial-gradient(circle at 90% 10%, rgba(215,168,47,.32), transparent 28%),
    linear-gradient(130deg, #0a315f, #0c5b96);
  box-shadow:var(--ta-shadow); margin-bottom:24px;
}
.ta-hero h2 { margin:0 0 10px; font-size:clamp(1.7rem,4vw,3rem); line-height:1.08; }
.ta-hero p { max-width:780px; margin:0 0 22px; opacity:.92; }
.ta-hero-actions { display:flex; flex-wrap:wrap; gap:10px; }
.ta-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:22px 0; }
.ta-metric { background:#fff; border:1px solid var(--ta-line); border-radius:16px; padding:16px; }
.ta-metric strong { display:block; font-size:1.5rem; color:var(--ta-navy); }
.ta-metric span { color:var(--ta-muted); font-size:.88rem; }
.ta-section {
  background:#fff; border:1px solid var(--ta-line); border-radius:20px;
  padding:clamp(18px,3vw,28px); margin-bottom:18px;
}
.ta-section h2, .ta-section h3 { color:var(--ta-navy); margin-top:0; }
.ta-grid-2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.ta-grid-3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.ta-formula {
  border:1px solid var(--ta-line); border-radius:15px; padding:15px;
  background:#f9fbfe; display:grid; gap:8px;
}
.ta-formula-parts { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.ta-part { padding:8px 11px; border-radius:10px; background:#eaf5ff; color:#063f70; font-weight:700; }
.ta-part.gold { background:var(--ta-gold-soft); color:#6d4b00; }
.ta-example-list { display:grid; gap:10px; }
.ta-example {
  border-left:4px solid var(--ta-blue-2); padding:10px 12px; background:#f8fbff; border-radius:8px;
}
.ta-example strong { color:var(--ta-blue); }
.ta-mistake {
  display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start;
  border:1px solid #f0c2bf; background:#fff8f7; border-radius:15px; padding:15px;
}
.ta-wrong { color:var(--ta-danger); font-weight:700; }
.ta-right { color:var(--ta-success); font-weight:700; }
.ta-context {
  background:linear-gradient(135deg,#fff8e3,#f8fbff); border:1px solid #f2dc93;
  border-radius:18px; padding:20px;
}
.ta-dialogue-line { margin:8px 0; }
.ta-dialogue-line b { color:var(--ta-blue); }
.ta-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; }
.ta-tab { border:1px solid var(--ta-line); background:#fff; color:var(--ta-navy); }
.ta-tab.active { background:var(--ta-navy); color:#fff; border-color:var(--ta-navy); }
.ta-panel[hidden] { display:none !important; }
.ta-question-card { border:1px solid var(--ta-line); border-radius:16px; padding:17px; background:#fff; }
.ta-question-card h4 { margin:0 0 12px; color:var(--ta-navy); }
.ta-options { display:grid; gap:9px; }
.ta-option {
  display:flex; gap:10px; align-items:flex-start; border:1px solid var(--ta-line);
  border-radius:12px; padding:10px 11px; cursor:pointer; background:#fff;
}
.ta-option:hover { background:#f7fbff; border-color:#a9c9e5; }
.ta-option input { margin-top:4px; }
.ta-feedback { margin-top:10px; padding:10px 12px; border-radius:10px; font-size:.92rem; }
.ta-feedback.good { background:#e8f7ee; color:#135b37; }
.ta-feedback.bad { background:#fff0ef; color:#8f1c13; }
.ta-reading { padding:18px; border-radius:15px; background:#f7fafc; border:1px solid var(--ta-line); }
.ta-media-row { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.ta-rec-status { color:var(--ta-muted); font-size:.9rem; }
.ta-audio-playback { width:100%; margin-top:10px; }
.ta-textarea { min-height:150px; resize:vertical; }
.ta-small { color:var(--ta-muted); font-size:.88rem; }
.ta-unit-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:18px; }
.ta-unit-number {
  flex:0 0 auto; width:68px; height:68px; border-radius:18px; display:grid; place-items:center;
  background:var(--ta-navy); color:#fff; font-weight:800; font-size:1.35rem;
}
.ta-unit-title h2 { margin:0; color:var(--ta-navy); font-size:clamp(1.5rem,3vw,2.3rem); }
.ta-unit-title p { margin:6px 0 0; color:var(--ta-muted); }
.ta-objectives { display:grid; gap:8px; padding-left:20px; }
.ta-outline-note { border:1px dashed #d3a62c; background:#fffaf0; padding:14px; border-radius:12px; color:#705000; }
.ta-quiz-shell { max-width:850px; margin:0 auto; }
.ta-quiz-head { display:flex; justify-content:space-between; gap:14px; align-items:center; margin-bottom:15px; }
.ta-quiz-nav { display:flex; justify-content:space-between; gap:10px; margin-top:18px; }
.ta-q-dots { display:grid; grid-template-columns:repeat(10,1fr); gap:5px; margin:13px 0; }
.ta-q-dot { border:0; border-radius:7px; min-height:28px; background:#e8edf4; cursor:pointer; font-size:.75rem; }
.ta-q-dot.answered { background:#cfe9ff; color:#063f70; }
.ta-q-dot.current { outline:3px solid var(--ta-gold); }
.ta-results {
  border-radius:22px; padding:clamp(22px,4vw,38px); background:#fff;
  border:1px solid var(--ta-line); box-shadow:var(--ta-shadow);
}
.ta-score-ring {
  width:140px; height:140px; border-radius:50%; display:grid; place-items:center;
  margin:0 auto 18px; background:conic-gradient(var(--ta-blue-2) var(--score), #e6edf5 0);
  position:relative;
}
.ta-score-ring::before { content:""; position:absolute; inset:13px; background:#fff; border-radius:50%; }
.ta-score-ring strong { position:relative; font-size:2rem; color:var(--ta-navy); }
.ta-result-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:18px 0; }
.ta-result-item { background:#f7fafc; border:1px solid var(--ta-line); border-radius:13px; padding:13px; }
.ta-result-item strong { display:block; color:var(--ta-navy); font-size:1.2rem; }
.ta-report-form { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:18px; }
.ta-report-form .full { grid-column:1/-1; }
.ta-status { padding:11px 13px; border-radius:11px; margin-top:10px; }
.ta-status.success { background:#e8f7ee; color:#135b37; }
.ta-status.error { background:#fff0ef; color:#8f1c13; }
.ta-footer { padding:18px 30px; background:#071e3c; color:#d7e4f3; font-size:.86rem; text-align:center; }
.ta-mobile-menu { display:none; }
.ta-hidden { display:none !important; }

@media (max-width: 980px) {
  .ta-shell { grid-template-columns:1fr; }
  .ta-sidebar { display:none; border-right:0; border-bottom:1px solid var(--ta-line); }
  .ta-sidebar.open { display:block; }
  .ta-mobile-menu { display:inline-flex; }
  .ta-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 680px) {
  .ta-topbar { align-items:flex-start; flex-direction:column; }
  .ta-brand .ta-wesco-logo { display:none; }
  .ta-main { padding:14px; }
  .ta-grid-2, .ta-grid-3, .ta-mistake, .ta-report-form { grid-template-columns:1fr; }
  .ta-report-form .full { grid-column:auto; }
  .ta-metrics, .ta-result-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ta-unit-head { flex-direction:column; }
  .ta-q-dots { grid-template-columns:repeat(6,1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .ta-grammar-app *, .ta-grammar-app *::before, .ta-grammar-app *::after {
    scroll-behavior:auto !important; transition:none !important; animation:none !important;
  }
}