:root {
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#06183b;
  background:#c6e9fa;
  font-synthesis:none
}
* {
  box-sizing:border-box
}
body {
  margin:0
}
button,input,textarea {
  font:inherit
}
button {
  cursor:pointer
}
button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible {
  outline:3px solid #126d94;
  outline-offset:3px
}
button:disabled {
  opacity:.55;
  cursor:wait
}
::selection {
  background:#83c8e9
}
.shell {
  max-width:1180px;
  margin:auto;
  padding:24px 28px 48px
}
.top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:20px
}
.brand {
  font-size:1.15rem;
  font-weight:850;
  letter-spacing:.02em
}
.quiet {
  border:0;
  background:transparent;
  color:#06183b;
  font-weight:700;
  padding:10px
}
.profiles {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px
}
.profile {
  background:#a8d9f2;
  border:2px solid transparent;
  border-radius:18px;
  color:#071b3d;
  font-size:clamp(1.2rem,2.4vw,2rem);
  font-weight:800;
  min-height:68px
}
.profile.active {
  background:#006477;
  color:white
}
.hero {
  display:grid;
  grid-template-columns:35% 65%;
  align-items:end;
  min-height:220px;
  margin-top:8px
}
.coach {
  height:clamp(180px,24vw,280px);
  display:flex;
  justify-content:center;
  align-items:end;
  overflow:hidden
}
.coach img {
  height:100%;
  max-width:100%;
  object-fit:contain;
  object-position:bottom
}
.bubble {
  position:relative;
  background:#fff;
  border-radius:32px;
  padding:26px 34px;
  margin:14px 0 22px;
  box-shadow:0 8px 24px rgba(21,80,110,.06)
}
.bubble:before {
  content:"";
  position:absolute;
  left:-22px;
  top:45%;
  border-top:16px solid transparent;
  border-bottom:16px solid transparent;
  border-right:24px solid white
}
.bubble h1 {
  font-size:clamp(1.7rem,3.5vw,3rem);
  line-height:1.05;
  margin:0 0 8px;
  letter-spacing:-.025em
}
.bubble p {
  font-size:clamp(1.05rem,2vw,1.5rem);
  line-height:1.3;
  margin:0
}
.card {
  background:#fff;
  border-radius:28px;
  padding:clamp(22px,3.8vw,42px);
  box-shadow:0 10px 30px rgba(29,95,126,.08)
}
.card h2 {
  font-size:clamp(1.8rem,3.5vw,3rem);
  line-height:1.05;
  letter-spacing:-.025em;
  margin:0 0 8px
}
.sub {
  font-size:1.1rem;
  margin:0;
  color:#375374
}
.test-note {
  background:#e8f5fb;
  color:#24465f;
  border-radius:12px;
  padding:12px 16px;
  margin:20px 0;
  font-size:.95rem
}
.plan {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:22px 0
}
.plan-item {
  border:1px solid #bfdaea;
  border-radius:16px;
  padding:18px;
  font-size:1.1rem
}
.plan-item strong {
  display:block;
  font-size:1.3rem;
  margin-bottom:5px
}
.primary,.secondary,.choice {
  border-radius:14px;
  padding:14px 20px;
  min-height:58px;
  font-weight:800;
  font-size:1.15rem
}
.primary {
  border:2px solid #006477;
  background:#006477;
  color:white
}
.primary:hover {
  background:#004f60
}
.secondary,.choice {
  border:2px solid #08728a;
  color:#071b3d;
  background:white
}
.secondary:hover,.choice:hover {
  background:#e8f6fc
}
.wide {
  width:100%
}
.choices {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin:10px 0 20px
}
.choice.selected {
  background:#d3effc;
  border-width:3px
}
.values {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  margin:24px 0
}
.values label {
  font-size:1.05rem;
  font-weight:750
}
.values input {
  display:block;
  width:100%;
  font-size:clamp(2.3rem,5vw,4.5rem);
  font-weight:800;
  letter-spacing:-.03em;
  color:#06183b;
  border:0;
  border-bottom:2px solid #9dc7da;
  background:transparent;
  padding:4px 0
}
.actions {
  display:flex;
  gap:10px;
  flex-wrap:wrap
}
.actions>* {
  flex:1
}
.center {
  text-align:center
}
.timer {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  border:12px solid #a9dcee;
  border-top-color:#007589;
  border-right-color:#007589;
  border-radius:50%;
  width:230px;
  height:230px;
  margin:22px auto;
  font-size:3.8rem;
  font-weight:850;
  font-variant-numeric:tabular-nums
}
.timer small {
  font-size:1rem;
  font-weight:500
}
.next {
  border-top:1px solid #b9dfef;
  padding:18px 0;
  font-size:1.15rem
}
.next strong {
  display:block;
  font-size:1.5rem
}
.stats {
  display:flex;
  justify-content:center;
  gap:clamp(20px,5vw,60px);
  margin:26px 0
}
.stats strong {
  display:block;
  font-size:clamp(2rem,4vw,3rem)
}
.chat {
  margin-top:18px
}
.chat summary,.details summary {
  cursor:pointer;
  font-weight:800;
  font-size:1.1rem
}
.chat summary {
  background:#006477;
  color:white;
  border-radius:14px;
  padding:17px;
  text-align:center;
  font-size:1.2rem
}
.chat-body {
  background:#fff;
  border-radius:0 0 20px 20px;
  padding:20px
}
.messages {
  max-height:280px;
  overflow:auto
}
.message {
  padding:10px 0;
  border-bottom:1px solid #d9ebf3;
  white-space:pre-wrap;
  overflow-wrap:anywhere
}
.message b {
  display:block;
  color:#006477;
  font-size:.85rem
}
.chat textarea {
  width:100%;
  min-height:78px;
  resize:vertical;
  border:2px solid #9fcddd;
  border-radius:12px;
  padding:12px;
  margin:12px 0
}
.details {
  margin-top:16px;
  background:#e3f4fb;
  border-radius:16px;
  padding:18px
}
.details details+details {
  margin-top:16px
}
.history-row {
  padding:12px 0;
  border-bottom:1px solid #bddcea
}
.small {
  font-size:.9rem;
  color:#3c5770
}
.error {
  background:#fff2ea;
  border:1px solid #ba5d3d;
  color:#763620;
  padding:14px;
  border-radius:12px;
  margin:14px 0
}
.status {
  padding:10px 0;
  color:#31556c
}
.login {
  max-width:520px;
  margin:12vh auto
}
.login input {
  width:100%;
  padding:15px;
  border:2px solid #8abccc;
  border-radius:12px;
  margin:12px 0
}
.login h1 {
  font-size:2.4rem
}
.log-edit {
  display:grid;
  grid-template-columns:1fr 1fr 1.2fr auto;
  gap:8px;
  margin-top:10px
}
.log-edit input,.log-edit select {
  width:100%;
  padding:8px;
  border:1px solid #8abccc;
  border-radius:8px
}
.proposal {
  background:#e8f5fb;
  padding:14px;
  border-radius:12px;
  margin:12px 0
}
.loading {
  padding:40px;
  text-align:center
}
a {
  color:#005d75
}
@media(max-width:640px) {
  .shell {
    padding:16px 14px 36px
  }
  .profile {
    min-height:56px;
    font-size:1.1rem;
    border-radius:13px
  }
  .hero {
    grid-template-columns:34% 66%;
    min-height:145px
  }
  .coach {
    height:150px
  }
  .bubble {
    padding:18px;
    border-radius:22px;
    margin-bottom:12px
  }
  .bubble h1 {
    font-size:1.45rem
  }
  .bubble p {
    font-size:1rem
  }
  .card {
    border-radius:22px;
    padding:22px
  }
  .plan {
    grid-template-columns:1fr
  }
  .choices {
    gap:5px
  }
  .choice {
    font-size:1rem;
    padding:10px 5px
  }
  .timer {
    width:190px;
    height:190px;
    font-size:3rem
  }
  .actions {
    flex-direction:column
  }
  .log-edit {
    grid-template-columns:1fr 1fr
  }
  .stats {
    gap:20px
  }
  .top {
    margin-bottom:12px
  }
}

.icon {
  display:inline-block;
  width:1.25em;
  height:1.25em;
  vertical-align:-0.25em;
  flex:none;
}
@media (min-width:1000px) and (orientation:landscape) {
  .dashboard {
    max-width:1400px;
    display:grid;
    grid-template-columns:minmax(0, 2fr) minmax(0, 3fr);
    grid-template-areas:"top top" "profiles profiles" "hero training" "chat chat" "details details";
    column-gap:24px;
    row-gap:14px;
    align-items:start;
    padding:20px 30px 32px;
  }
  .dashboard > .top { grid-area:top; margin:0; }
  .dashboard > .profiles { grid-area:profiles; }
  .dashboard > .hero {
    grid-area:hero;
    min-width:0;
    min-height:0;
    height:100%;
    margin:0;
    display:flex;
    flex-direction:column-reverse;
    justify-content:flex-end;
    align-items:stretch;
  }
  .dashboard > .card { grid-area:training; min-width:0; padding:28px 32px; }
  .dashboard > .chat { grid-area:chat; margin:0; min-width:0; }
  .dashboard > .details { grid-area:details; margin:0; min-width:0; }
  .dashboard .profile { min-height:58px; font-size:1.5rem; }
  .dashboard .bubble { margin:0 0 8px; padding:22px 26px; }
  .dashboard .bubble:before {
    left:25%; top:auto; bottom:-18px;
    border:0; border-left:15px solid transparent;
    border-right:15px solid transparent; border-top:19px solid white;
  }
  .dashboard .bubble h1 { font-size:clamp(1.8rem, 2.6vw, 2.6rem); }
  .dashboard .bubble p { font-size:1.2rem; }
  .dashboard .coach { height:clamp(210px, 28vw, 340px); }
  .dashboard .card h2 { font-size:clamp(2rem, 3vw, 2.8rem); }
  .dashboard .timer { width:190px; height:190px; font-size:3rem; margin:12px auto; }
  .dashboard .values { margin:16px 0; }
  .dashboard .values input { font-size:clamp(2.5rem, 4vw, 3.5rem); }
  .dashboard .test-note { margin:14px 0; }
  .dashboard .plan { margin:14px 0; }
  .dashboard .plan-item { padding:14px; }
  .dashboard .details { padding:14px 18px; }
}
@media (prefers-reduced-motion:no-preference) {
  .coach img { animation:coach-arrive .45s ease-out both; }
  @keyframes coach-arrive {
    from { opacity:.85; transform:translateY(6px); }
    to { opacity:1; transform:translateY(0); }
  }
}