@font-face { font-family: 'Manrope'; font-weight: 200 800; font-display: swap; src: url('/fonts/manrope-cyrillic-wght-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Manrope'; font-weight: 200 800; font-display: swap; src: url('/fonts/manrope-latin-wght-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg: #ffffff;
  --bg-2: #ffffff;
  --navy: #082433;
  --slate: #334955;
  --muted: #6b7f8b;
  --white: #fff;
  --peach: #fde3d3;
  --peach-2: #fff5ee;
  --coral: #f58a4b;
  --coral-d: #f47b3e;
  --red: #eb4247;
  --green: #22a867;
  --green-l: #dff5e9;
  --red-l: #fde4e5;
  --grey: #f6f4f2;
  --r: 24px;
}
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body {
  font-family: 'Manrope', Arial, sans-serif;
  color: var(--navy);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }

.btn {
  border: 0; border-radius: 20px; padding: 0.85em 1.5em; font-weight: 700;
  background: var(--navy); color: #fff; transition: transform .12s, opacity .12s, background .12s;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); background: #0d3347; }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn:disabled { opacity: .35; cursor: not-allowed; }
.btn.coral { background: var(--coral); color: var(--navy); }
.btn.coral:hover:not(:disabled) { background: #f2a577; }
.btn.ghost { background: #fff; color: var(--slate); box-shadow: inset 0 0 0 1.5px #d5e2ea; }
.btn.ghost:hover:not(:disabled) { background: var(--grey); }
.btn.green { background: var(--green); } .btn.green:hover:not(:disabled) { background: #1c9158; }
.btn.red { background: var(--red); } .btn.red:hover:not(:disabled) { background: #d33a3f; }
.btn.sm { padding: .5em 1em; border-radius: 14px; font-size: .85rem; }

.logo { font-weight: 800; letter-spacing: -.02em; display: inline-flex; align-items: center; gap: .5em; }
.logo img { height: 1.6em; }
.logo b { color: var(--coral-d); }

/* Волны (Career Wave) */
.waves { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; pointer-events: none; overflow: hidden; z-index: 0; }
.waves svg { position: absolute; bottom: 0; width: 200%; height: 100%; }
.waves .w1 { animation: wave 18s linear infinite; opacity: .55; }
.waves .w2 { animation: wave 26s linear infinite reverse; opacity: .8; }
@keyframes wave { to { transform: translateX(-50%); } }

@keyframes pop { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
.enter > * { animation: pop .55s cubic-bezier(.2, .8, .2, 1) both; }
.enter > *:nth-child(2) { animation-delay: .08s; } .enter > *:nth-child(3) { animation-delay: .16s; } .enter > *:nth-child(4) { animation-delay: .24s; }
@keyframes spin { to { transform: rotate(360deg); } }
.spinner { width: 1.3em; height: 1.3em; border: .2em solid #d5e2ea; border-top-color: var(--coral-d); border-radius: 50%; animation: spin .8s linear infinite; display: inline-block; vertical-align: -.2em; }
@keyframes pulse { 50% { opacity: .45; } }
@keyframes shimmer { to { background-position: -200% 0; } }
.skeleton { background: linear-gradient(90deg, #e6eef3 25%, #f6fafc 50%, #e6eef3 75%) 0 0 / 200% 100%; animation: shimmer 1.4s linear infinite; }

.dot { display: inline-block; width: .6em; height: .6em; border-radius: 50%; background: #c4d1d9; }
.dot.on { background: var(--green); box-shadow: 0 0 0 .25em #22a86730; }
.p1 { --pc: var(--green); --pl: var(--green-l); }
.p2 { --pc: var(--red); --pl: var(--red-l); }

/* Белый фон + оранжевые акценты */
.btn { background: var(--coral-d); color: #fff; }
.btn:hover:not(:disabled) { background: #e56a2c; }
.btn.coral { background: var(--coral-d); color: #fff; }
.btn.coral:hover:not(:disabled) { background: #e56a2c; }
.btn.ghost { background: #fff; color: var(--slate); box-shadow: inset 0 0 0 1.5px #f0d9c9; }
.btn.ghost:hover:not(:disabled) { background: var(--peach-2); }
.card, .panel, .rule, .slot, .pst, .vs .pl, .task-card, .chip, .pill, .head, .composer, .h { border: 1.5px solid #f6e4d8; }
.card, .panel, .rule, .slot, .pst, .vs .pl, .task-card { box-shadow: 0 .25rem 1.4rem rgba(244, 123, 62, .08); }
.pill.phase, .tab.on { background: var(--coral-d); }
.spinner { border-color: #fbe3d3; border-top-color: var(--coral-d); }
.skeleton { background: linear-gradient(90deg, #fbeee5 25%, #fffaf6 50%, #fbeee5 75%) 0 0 / 200% 100%; animation: shimmer 1.4s linear infinite; }

.logo { gap: .55em; align-items: center; }
.logo .logo-img { height: 1.35em; width: auto; display: block; }
.logo b { font-weight: 800; letter-spacing: -.02em; line-height: 1; }