:root {
  --navy: #18334d;
  --blue: #087f91;
  --orange: #e95e4e;
  --ink: #20344a;
  --muted: #56677a;
  --line: #e7ddd0;
  --paper: #fff9ee;
}

body {
  background: radial-gradient(circle at 9% 23%, #ffe8bd 0 9%, transparent 24%),
              radial-gradient(circle at 96% 12%, #d7f3f0 0 8%, transparent 23%),
              #fff9ee;
  font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
}

header:has(.brand-logo) {
  background: #fffdf6;
  border-bottom: 5px solid #ffd870;
  box-shadow: 0 5px 0 #f2a39a22;
  min-height: 152px;
  padding: calc(10px + env(safe-area-inset-top)) max(5vw, 24px) 7px;
}

.brand-logo img { width: 190px; }
.install-button {
  background: #e9584b;
  border: 2px solid #bd3b38;
  border-radius: 999px;
  box-shadow: 0 4px 0 #bd3b38;
  color: white;
  font-weight: 800;
  padding: 10px 18px;
}
.install-button:hover { background: #cf463e; transform: translateY(1px); box-shadow: 0 3px 0 #a73432; }

main { padding-top: 27px; }
.sync-line { margin: 0 0 12px; }
.intro {
  position: relative;
  overflow: hidden;
  background: #fff0c9;
  border: 2px solid #f7d98c;
  border-radius: 30px;
  box-shadow: 0 8px 0 #df9b4030;
  padding: 30px 33px;
  margin-bottom: 29px;
}
.intro::before, .intro::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; }
.intro::before { width: 90px; height: 90px; background: #ffb1a066; right: 30%; top: -45px; }
.intro::after { width: 54px; height: 54px; background: #74d4cf88; right: 2%; bottom: -27px; }
.intro > * { position: relative; z-index: 1; }
.eyebrow {
  display: inline-block;
  background: #fffdf4;
  border: 1px solid #f4ce7e;
  border-radius: 999px;
  padding: 5px 13px;
  color: #9d4c23;
  letter-spacing: .07em;
}
h1, .learn-heading h2, .reports-panel h2, .grammar-lessons h2, .install-dialog h2 {
  font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
  font-weight: 900;
  letter-spacing: -.035em;
}
.intro h1 { color: #163e54; font-size: clamp(29px, 3.25vw, 43px); max-width: 540px; }
.intro h1 + p { color: #695a49; }
.stats { border-left: 0; gap: 10px; padding-left: 0; flex-shrink: 0; }
.stats div {
  min-width: 84px;
  background: #fffdf7;
  border: 2px solid #f3dab2;
  border-radius: 20px;
  padding: 10px 11px;
  box-shadow: 0 4px 0 #d7906233;
}
.stats div:nth-child(2) { border-color: #a3e5d8; }
.stats div:nth-child(3) { border-color: #f6bbaf; }
.stats strong { color: #173a50; }

.main-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
  white-space: normal;
  overflow: visible;
  border: 0;
  padding: 4px 0 10px;
  margin-bottom: 20px;
}
.main-tabs button {
  min-height: 61px;
  border: 2px solid #a7dbd8;
  border-radius: 17px;
  border-bottom-width: 4px;
  background: #dcf6f2;
  color: #1f5660;
  font-size: 16px;
  font-weight: 850;
  transition: transform .15s, box-shadow .15s;
}
.main-tabs button:nth-child(3n + 2) { background: #ffedcc; border-color: #f2d491; color: #744d21; }
.main-tabs button:nth-child(3n) { background: #ffe5de; border-color: #f2b6a9; color: #814339; }
.main-tabs button:hover { transform: translateY(-2px); background: #fffefa; }
.main-tabs button.selected {
  background: #fffdf5;
  border-color: #193f55;
  color: #193f55;
  box-shadow: 0 5px 0 #193f5529;
}
.main-tabs button.selected::before { content: '✦'; margin-right: 8px; color: #ea6753; }

.new-workspace, .reports-panel, .exercise {
  border: 2px solid #e6ddd0;
  border-radius: 24px;
  box-shadow: 0 9px 0 #23455e0c, 0 17px 35px #18334d0a;
}
.workspace { gap: 18px; }
.toolbar { background: #fff9ec; }
.progress { height: 7px; background: #f7e9d1; }
.progress span { background: linear-gradient(90deg, #ee6656, #f6b847, #17a6ad); border-radius: 0 8px 8px 0; }
aside {
  background: #ddf5f0;
  border: 2px solid #aadfd6;
  border-radius: 23px;
  box-shadow: 0 6px 0 #5cb3ad27;
}
.note-icon { background: #137f88; border-radius: 12px; }
.modes { border: 0; gap: 8px; padding: 3px 0 8px; }
.modes button {
  background: #fff;
  border: 2px solid #e6ddd0;
  border-radius: 999px;
  padding: 9px 14px;
}
.modes .selected { background: #e9f8f4; border-color: #0e8d91; color: #136c75; }
.learn-prompt {
  background: #f0f9f6;
  border-left: 6px solid #17a6a8;
  border-radius: 18px;
}
.badge { background: #fff2d7; border-color: #f2d29b; color: #865321; border-radius: 999px; }
.primary {
  background: #e95749;
  border-color: #c83c34;
  border-radius: 14px;
  box-shadow: 0 4px 0 #a9342c;
}
.primary:hover { background: #d6473b; transform: translateY(1px); box-shadow: 0 3px 0 #a9342c; }
.secondary { border-radius: 14px; border: 2px solid #8bd0ca; color: #15636a; }
input, textarea, select { border-radius: 15px; }
input:focus, textarea:focus, select:focus { border-color: #07959a; }
.feedback { border-radius: 18px; }
.feedback.good { background: #e5f8ec; }
.feedback.bad { background: #fff0de; }
.grade-pair span, .report-cards > div, .grammar-grid details { border-radius: 17px; }
.report-cards > div:nth-child(2n) { background: #eff9f3; }
.report-cards > div:nth-child(3n) { background: #fff0e8; }
dialog { border-radius: 25px; }

@media (max-width: 960px) {
  .intro { flex-wrap: wrap; }
  .stats { width: 100%; }
  .stats div { flex: 1; }
}
@media (max-width: 740px) {
  header:has(.brand-logo) { min-height: 122px; }
  .brand-logo img { width: 155px; }
  .intro { padding: 23px; border-radius: 23px; }
  .intro h1 { font-size: 31px; }
  .main-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-right: 0; padding-right: 0; }
  .main-tabs button { font-size: 14px; padding: 10px 6px; min-height: 58px; }
  .stats { margin-top: 20px; gap: 8px; }
  .stats div { min-width: 0; padding: 9px 5px; }
  .modes { display: flex; flex-wrap: wrap; }
  .modes button { font-size: 13px; }
  .new-workspace, .reports-panel { padding: 22px; }
}
@media (max-width: 430px) {
  .brand-logo img { width: 138px; }
  .install-button { padding: 8px 11px; font-size: 12px; }
  .stats { justify-content: stretch; }
}