.learning-control-bar {
  margin: 0 0 20px;
  padding: 12px;
  display: flex;
  align-items: end;
  gap: 10px;
  flex-wrap: wrap;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(255, 255, 255, .92);
  border-radius: 17px;
  box-shadow: 0 8px 26px rgba(24, 58, 82, .06);
  backdrop-filter: blur(18px);
}

.learning-control-bar label {
  min-width: 150px;
  display: grid;
  gap: 5px;
  color: #6b7e8c;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .05em;
}

.learning-control-bar select {
  height: 40px;
  padding: 0 34px 0 12px;
  color: #18354b;
  background: #f5f8fa;
  border: 1px solid #dce6ed;
  border-radius: 11px;
}

.learning-control-bar .ghost-button { min-height: 40px; }
.cloud-ai-toggle { min-width: 180px !important; grid-template-columns: auto 1fr; align-items: center; }
.cloud-ai-toggle span { grid-column: 1 / -1; }
.cloud-ai-toggle input { width: 34px; height: 20px; accent-color: #0a84ff; }
.cloud-ai-toggle b { color: #38566b; font-size: 11px; letter-spacing: 0; }
.speech-coach { margin-top: 24px; padding: 28px; }
.speech-coach-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.speech-coach-head h2 { margin: 5px 0 4px; font-size: 26px; letter-spacing: -.035em; }
.speech-coach-head p { margin: 0; color: #617083; font-size: 12px; }
.speech-live { min-height: 66px; margin: 22px 0 0; padding: 18px 20px; color: #34556c; background: #eff6fa; border: 1px solid #dce9f0; border-radius: 15px; font-family: "SFMono-Regular", ui-monospace, monospace; line-height: 1.7; }
.coach-result { margin-top: 18px; padding: 22px; background: #f7fafc; border: 1px solid #dce6ed; border-radius: 18px; }
.coach-result-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.coach-result-head span { color: #6d8597; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.coach-result-head h3 { margin: 3px 0 0; font-size: 21px; }
.coach-result-head > strong { color: #0a84ff; font-size: 40px; line-height: 1; letter-spacing: -.05em; }
.speech-transcript { margin: 18px 0; padding: 17px; color: #17364d; background: #fff; border: 1px solid #e0e8ed; border-radius: 13px; font-family: "SFMono-Regular", ui-monospace, monospace; line-height: 1.75; }
.score-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.score-grid > div { padding: 14px; display: grid; grid-template-columns: 1fr auto; gap: 8px; background: #fff; border: 1px solid #e2e9ee; border-radius: 13px; }
.score-grid span { color: #667b8b; font-size: 11px; }
.score-grid b { font-size: 15px; }
.score-grid i { grid-column: 1 / -1; height: 5px; overflow: hidden; background: #e5edf2; border-radius: 99px; }
.score-grid i::after { content: ""; width: var(--score); height: 100%; display: block; background: linear-gradient(90deg, #0a84ff, #2cc76f); border-radius: inherit; }
.coach-result ul { margin: 17px 0 0; padding-left: 18px; color: #4f6677; }
.coach-result li + li { margin-top: 6px; }
.roleplay-panel { margin-top: 20px; padding: 20px; display: flex; align-items: center; justify-content: space-between; gap: 22px; color: #dcecff; background: linear-gradient(135deg, #0a2032, #0b405b); border-radius: 17px; }
.roleplay-panel > div > span { color: #68b9f3; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.roleplay-panel h3 { margin: 4px 0; color: #fff; }
.roleplay-panel p { margin: 0; color: #9db9ca; }
.roleplay-panel.active { box-shadow: 0 0 0 3px rgba(10, 132, 255, .14); }
.roleplay-panel .secondary-button { flex: 0 0 auto; }
.weak-review-button { width: 100%; margin-top: 14px; }
.weak-review-button:disabled { cursor: not-allowed; opacity: .45; }
.undo-review-button { width: 100%; }
.review-forecast { padding: 17px; background: #fff; border: 1px solid #dce6ed; border-radius: 16px; }
.review-forecast > span { color: #6b8191; font-size: 10px; font-weight: 750; letter-spacing: .08em; }
.forecast-bars { height: 82px; margin-top: 14px; display: grid; grid-template-columns: repeat(7, 1fr); align-items: end; gap: 7px; }
.forecast-bars i { position: relative; height: var(--height); min-height: 8px; display: block; background: linear-gradient(180deg, #0a84ff, #69b8ff); border-radius: 6px 6px 3px 3px; }
.forecast-bars b { position: absolute; left: 50%; top: -17px; transform: translateX(-50%); color: #46677e; font-size: 9px; font-style: normal; }
.forecast-bars small { position: absolute; left: 50%; bottom: -17px; transform: translateX(-50%); color: #8295a3; font-size: 8px; font-style: normal; }

.writing-brief-card { margin: 0 0 18px; padding: 20px; color: #dcecff; background: linear-gradient(135deg, #0b2235, #0d3f59); border-radius: 16px; }
.writing-brief-card > span { color: #67b8f4; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.writing-brief-card p { margin: 8px 0 4px; font-size: 14px; line-height: 1.7; }
.writing-brief-card small { color: #88a8bc; }
.writing-coach-result { margin-bottom: 20px; }
.writing-suggestions { margin-top: 18px; padding: 17px; background: #fff; border: 1px solid #e0e8ed; border-radius: 13px; }
.writing-suggestions h4 { margin: 0 0 9px; }
.writing-suggestions ul { margin: 0; }
.writing-coach-result details { margin-top: 14px; padding: 15px; background: #fff; border: 1px solid #e0e8ed; border-radius: 13px; }
.writing-coach-result summary { cursor: pointer; color: #28516d; font-weight: 700; }
.recommendation-diff { margin-top: 14px; color: #28465c; font-family: "SFMono-Regular", ui-monospace, monospace; line-height: 1.75; }
.recommendation-diff mark { padding: 1px 2px; color: #075ea9; background: #dcedff; border-radius: 3px; }
.writing-coach-result details small { display: block; margin-top: 12px; color: #718493; }
.ai-review { margin-top: 16px; padding: 18px; color: #dcecff; background: linear-gradient(135deg, #0a2032, #0b405b); border-radius: 14px; }
.ai-review > span { color: #67b8f4; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.ai-review h4 { margin: 7px 0; color: #fff; }
.ai-review p { margin: 0; color: #a8c2d2; line-height: 1.7; }
.ai-review details { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); }
.ai-review summary { color: #dcecff; }
.weekly-plan strong { font-size: 18px; line-height: 1.45; }

.learning-insights { margin-top: 26px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.insight-card { min-height: 138px; padding: 20px; display: flex; flex-direction: column; justify-content: center; background: rgba(255,255,255,.94); border: 1px solid #dce6ed; border-radius: 18px; box-shadow: 0 14px 36px rgba(22,51,74,.07); }
.insight-card span { color: #6d8190; font-size: 11px; }
.insight-card strong { margin: 7px 0 2px; font-size: 32px; line-height: 1.15; letter-spacing: -.04em; }
.insight-card small { color: #8a9aa6; }
.wide-insight { grid-column: 1 / -1; min-height: 112px; }
.wide-insight strong { font-size: 20px; }

.security-dialog-backdrop { position: fixed; inset: 0; z-index: 12000; padding: 20px; display: grid; place-items: center; background: rgba(5, 18, 29, .42); backdrop-filter: blur(13px); }
.security-dialog { width: min(100%, 440px); padding: 30px; background: rgba(255,255,255,.98); border: 1px solid rgba(255,255,255,.9); border-radius: 25px; box-shadow: 0 32px 90px rgba(5,18,29,.24); }
.security-dialog h2 { margin: 7px 0 8px; font-size: 27px; letter-spacing: -.04em; }
.security-dialog > p { margin: 0 0 18px; color: #667684; line-height: 1.65; }
.security-dialog label { margin-top: 13px; display: grid; gap: 6px; color: #415665; font-size: 12px; font-weight: 700; }
.security-dialog input { width: 100%; height: 48px; padding: 0 13px; background: #f6f9fb; border: 1px solid #dce6ed; border-radius: 12px; }
.security-form-error { min-height: 22px; margin: 9px 0 0 !important; color: #d83d36 !important; font-size: 12px; }
.security-dialog-actions { margin-top: 9px; display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.security-dialog-actions button { width: 100%; }
.security-dialog > small { margin-top: 16px; display: block; color: #8b9aa6; line-height: 1.5; }

@media (max-width: 800px) {
  .learning-control-bar { display: grid; grid-template-columns: 1fr 1fr; }
  .learning-control-bar label { min-width: 0; }
  .speech-coach-head, .roleplay-panel { align-items: stretch; flex-direction: column; }
  .speech-coach-head button, .roleplay-panel button { width: 100%; }
  .score-grid, .learning-insights { grid-template-columns: 1fr; }
  .wide-insight { grid-column: auto; }
}

@media (max-width: 480px) {
  .learning-control-bar { grid-template-columns: 1fr; }
  .speech-coach { padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .score-grid i::after { transition: none; }
}