@font-face {
  font-family: "Heebo Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/heebo-hebrew-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
  font-family: "Heebo Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/heebo-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.sh-app,
.sh-login-shell {
  --sh-ink: #17203a;
  --sh-muted: #68728a;
  --sh-purple: #6548d8;
  --sh-purple-dark: #4e35ba;
  --sh-purple-soft: #eeeafd;
  --sh-cyan: #2fc7c8;
  --sh-mint: #28b68d;
  --sh-orange: #ee8a49;
  --sh-red: #e45e69;
  --sh-surface: #ffffff;
  --sh-background: #f5f6fa;
  --sh-line: #e5e7ef;
  --sh-shadow: 0 16px 48px rgba(31, 38, 71, 0.10);
  color: var(--sh-ink);
  font-family: "Heebo Variable", Heebo, Arial, sans-serif;
  font-size: 16px;
  font-weight: 450;
  line-height: 1.5;
}

.sh-app *,
.sh-login-shell * {
  box-sizing: border-box;
}

.sh-app button,
.sh-app input,
.sh-app textarea,
.sh-login-shell button,
.sh-login-shell input {
  font: inherit;
}

.sh-app button {
  color: inherit;
}

.sh-app svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.sh-app h1,
.sh-app h2,
.sh-app h3,
.sh-app p,
.sh-app small,
.sh-app strong,
.sh-app em {
  margin: 0;
  font-style: normal;
}

.sh-app {
  position: relative;
  width: 100%;
  min-height: 760px;
  margin: 0 auto;
  overflow: clip;
  border: 1px solid rgba(32, 39, 70, 0.06);
  border-radius: 24px;
  background:
    radial-gradient(circle at 7% 3%, rgba(47, 199, 200, 0.10), transparent 24%),
    var(--sh-background);
  box-shadow: 0 6px 28px rgba(31, 38, 71, 0.06);
  text-align: right;
  isolation: isolate;
}

.sh-shell {
  min-height: 760px;
  padding-bottom: 0;
}

.sh-topbar {
  position: sticky;
  z-index: 20;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  padding: 12px clamp(18px, 4vw, 44px);
  border-bottom: 1px solid rgba(226, 228, 238, 0.82);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(18px);
}

.sh-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: right;
}

.sh-brand-mark,
.sh-login-mark {
  display: grid;
  width: 43px;
  height: 43px;
  place-items: center;
  border-radius: 14px 14px 14px 5px;
  background: linear-gradient(145deg, #745be2, #5337c2);
  box-shadow: 0 8px 22px rgba(101, 72, 216, 0.25);
  color: #fff;
  font-size: 23px;
  font-weight: 850;
  letter-spacing: -0.05em;
}

.sh-brand > span:last-child {
  display: grid;
  line-height: 1.05;
}

.sh-brand strong {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.sh-brand small {
  margin-top: 5px;
  color: var(--sh-muted);
  font-size: 12px;
  font-weight: 650;
}

.sh-user {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #4f5870;
  font-size: 14px;
  font-weight: 650;
}

.sh-avatar {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid #ded9f8;
  border-radius: 50%;
  background: var(--sh-purple-soft);
  color: var(--sh-purple-dark);
  font-weight: 800;
}

.sh-main {
  width: min(100%, 1040px);
  min-height: 640px;
  margin: 0 auto;
  padding: clamp(26px, 5vw, 58px) clamp(17px, 4vw, 44px) 112px;
}

.sh-eyebrow {
  color: var(--sh-purple);
  font-size: 12px;
  font-weight: 780;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sh-welcome {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  margin-bottom: 28px;
}

.sh-welcome h1 {
  margin-top: 8px;
  font-size: clamp(38px, 7vw, 66px);
  font-weight: 820;
  letter-spacing: -0.055em;
  line-height: 0.96;
}

.sh-welcome h1 em {
  color: var(--sh-purple);
}

.sh-welcome > div:first-child > p:last-child {
  max-width: 520px;
  margin-top: 16px;
  color: var(--sh-muted);
  font-size: clamp(15px, 2.1vw, 18px);
}

.sh-progress-orb,
.sh-stat-ring,
.sh-score-ring {
  display: grid;
  width: 126px;
  height: 126px;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--sh-cyan) var(--progress), #e4e8ef 0);
  box-shadow: 0 10px 30px rgba(47, 199, 200, 0.12);
}

.sh-progress-orb::before,
.sh-stat-ring::before,
.sh-score-ring::before {
  position: absolute;
  width: 103px;
  height: 103px;
  border-radius: 50%;
  background: #fff;
  content: "";
}

.sh-progress-orb,
.sh-stat-ring,
.sh-score-ring {
  position: relative;
}

.sh-progress-orb > div,
.sh-stat-ring > div,
.sh-score-ring > div {
  position: relative;
  z-index: 1;
  display: grid;
  text-align: center;
}

.sh-progress-orb strong,
.sh-stat-ring strong,
.sh-score-ring strong {
  font-size: 28px;
  font-weight: 820;
  letter-spacing: -0.04em;
}

.sh-progress-orb span,
.sh-stat-ring span,
.sh-score-ring span {
  margin-top: -2px;
  color: var(--sh-muted);
  font-size: 11px;
  font-weight: 650;
}

.sh-smart-card,
.sh-daily-card,
.sh-practice-card {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  gap: 16px;
  overflow: hidden;
  border: 0;
  cursor: pointer;
  text-align: right;
}

.sh-smart-card {
  min-height: 124px;
  padding: 23px clamp(20px, 4vw, 34px);
  border-radius: 24px;
  background:
    radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.20), transparent 21%),
    linear-gradient(128deg, #5134b7, #7459dc 62%, #6041cd);
  box-shadow: 0 17px 40px rgba(91, 61, 195, 0.24);
  color: #fff;
}

.sh-smart-card::after {
  position: absolute;
  top: -65px;
  left: -25px;
  width: 180px;
  height: 180px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  content: "";
}

.sh-smart-icon,
.sh-practice-icon,
.sh-mode-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
}

.sh-smart-icon {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.11);
}

.sh-smart-icon svg {
  width: 28px;
  height: 28px;
}

.sh-smart-card > span:nth-child(2),
.sh-daily-card > span:nth-child(2),
.sh-practice-card > span:nth-child(2) {
  display: grid;
  flex: 1;
  min-width: 0;
}

.sh-smart-card small,
.sh-practice-card small {
  margin-bottom: 2px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  font-weight: 680;
}

.sh-smart-card strong {
  font-size: clamp(23px, 4vw, 30px);
  font-weight: 810;
  letter-spacing: -0.03em;
}

.sh-smart-card em {
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
}

.sh-round-arrow {
  position: relative;
  z-index: 1;
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}

.sh-round-arrow svg,
.sh-card-arrow svg,
.sh-primary-button > span svg {
  width: 18px;
  height: 18px;
  transform: rotate(180deg);
}

.sh-mini-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 21px 0 40px;
  padding: 18px 0;
  border-bottom: 1px solid var(--sh-line);
}

.sh-mini-stats > div {
  display: grid;
  min-width: 0;
  padding: 0 18px;
}

.sh-mini-stats > div + div {
  border-right: 1px solid var(--sh-line);
}

.sh-mini-stats small {
  color: var(--sh-muted);
  font-size: 12px;
}

.sh-mini-stats strong {
  margin-top: 2px;
  font-size: 23px;
  font-weight: 790;
}

.sh-mini-stats i {
  color: var(--sh-muted);
  font-size: 13px;
  font-style: normal;
  font-weight: 520;
}

.sh-section-heading,
.sh-panel-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.sh-section-heading h2,
.sh-panel-heading h2 {
  margin-top: 2px;
  font-size: clamp(21px, 3vw, 27px);
  font-weight: 780;
  letter-spacing: -0.03em;
}

.sh-section-heading > button {
  padding: 7px 0;
  border: 0;
  background: transparent;
  color: var(--sh-purple);
  cursor: pointer;
  font-size: 13px;
  font-weight: 720;
}

.sh-streak {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 11px;
  border-radius: 999px;
  background: #fff0e7;
  color: #d56f30;
  font-size: 12px;
  font-weight: 750;
}

.sh-streak svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  stroke-width: 1.4;
}

.sh-daily-card {
  min-height: 91px;
  margin-bottom: 40px;
  padding: 17px 20px;
  border: 1px solid #e6e3f5;
  border-radius: 19px;
  background: #fff;
  box-shadow: 0 8px 26px rgba(31, 38, 71, 0.06);
}

.sh-daily-card:hover,
.sh-mode-card:hover,
.sh-practice-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 13px 34px rgba(31, 38, 71, 0.11);
}

.sh-daily-number {
  display: grid;
  width: 50px;
  height: 50px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 16px;
  background: var(--sh-purple-soft);
  color: var(--sh-purple);
  font-size: 22px;
  font-weight: 810;
}

.sh-daily-number svg {
  width: 25px;
  height: 25px;
}

.sh-daily-card strong {
  font-size: 17px;
  font-weight: 760;
}

.sh-daily-card small {
  margin-top: 3px;
  color: var(--sh-muted);
  font-size: 13px;
}

.sh-daily-card .sh-round-arrow {
  background: #f0f1f5;
  color: #4d566d;
}

.sh-daily-card.is-complete {
  border-color: #ccecdf;
  background: #f8fffc;
}

.sh-daily-card.is-complete .sh-daily-number {
  background: #daf5e9;
  color: #18956f;
}

.sh-home-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.sh-mode-card {
  position: relative;
  display: grid;
  min-height: 176px;
  padding: 19px;
  overflow: hidden;
  border: 1px solid var(--sh-line);
  border-radius: 21px;
  background: #fff;
  cursor: pointer;
  text-align: right;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.sh-mode-icon {
  width: 43px;
  height: 43px;
  margin-bottom: 18px;
  border-radius: 13px;
  background: #e8f8f7;
  color: #139c9d;
}

.sh-mode-card:nth-child(2) .sh-mode-icon {
  background: #fff0e7;
  color: #d9793e;
}

.sh-mode-card small {
  color: var(--sh-muted);
  font-size: 11px;
  font-weight: 650;
}

.sh-mode-card strong {
  font-size: 19px;
  font-weight: 770;
}

.sh-mode-card em {
  color: var(--sh-muted);
  font-size: 12px;
}

.sh-card-arrow {
  position: absolute;
  bottom: 18px;
  left: 18px;
  color: #8a91a3;
}

.sh-bank-strip {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 20px;
  padding: 16px 18px;
  border: 1px dashed #cbc6e7;
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.55);
}

.sh-bank-strip > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 13px;
  background: #fff;
  color: var(--sh-purple);
}

.sh-bank-strip div {
  display: grid;
}

.sh-bank-strip strong {
  font-size: 14px;
  font-weight: 740;
}

.sh-bank-strip small {
  color: var(--sh-muted);
  font-size: 12px;
}

.sh-bottom-nav {
  position: sticky;
  z-index: 25;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  min-height: 74px;
  border-top: 1px solid rgba(223, 225, 234, 0.95);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 -9px 28px rgba(31, 38, 71, 0.06);
  backdrop-filter: blur(17px);
}

.sh-bottom-nav button {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  padding: 7px 4px;
  border: 0;
  background: transparent;
  color: #81889a;
  cursor: pointer;
  font-size: 11px;
  font-weight: 640;
}

.sh-bottom-nav button.is-active {
  color: var(--sh-purple);
}

.sh-bottom-nav button.is-active::before {
  position: absolute;
  top: 0;
  width: 31px;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: var(--sh-purple);
  content: "";
}

.sh-bottom-nav button {
  position: relative;
}

.sh-bottom-nav svg {
  width: 21px;
  height: 21px;
}

.sh-page-title {
  max-width: 720px;
  margin-bottom: clamp(28px, 5vw, 44px);
}

.sh-page-title h1 {
  margin-top: 6px;
  font-size: clamp(37px, 6vw, 60px);
  font-weight: 820;
  letter-spacing: -0.05em;
  line-height: 1.02;
}

.sh-page-title > p:last-child {
  max-width: 620px;
  margin-top: 13px;
  color: var(--sh-muted);
  font-size: 16px;
}

.sh-practice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.sh-practice-card {
  min-height: 142px;
  padding: 20px;
  border: 1px solid var(--sh-line);
  border-radius: 21px;
  background: #fff;
  box-shadow: 0 7px 24px rgba(31, 38, 71, 0.05);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.sh-practice-card.accent {
  border-color: transparent;
  background: linear-gradient(135deg, #573bbd, #7055da);
  color: #fff;
}

.sh-practice-card.disabled {
  opacity: 0.58;
  cursor: default;
}

.sh-practice-icon {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  background: var(--sh-purple-soft);
  color: var(--sh-purple);
}

.sh-practice-card.accent .sh-practice-icon,
.sh-practice-card.accent .sh-round-arrow {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.sh-practice-card:not(.accent) .sh-round-arrow {
  background: #f1f2f6;
  color: #697086;
}

.sh-practice-card small {
  margin-bottom: 3px;
  color: var(--sh-purple);
  font-size: 11px;
}

.sh-practice-card.accent small,
.sh-practice-card.accent em {
  color: rgba(255, 255, 255, 0.76);
}

.sh-practice-card strong {
  font-size: 19px;
  font-weight: 780;
}

.sh-practice-card em {
  margin-top: 3px;
  color: var(--sh-muted);
  font-size: 12px;
  line-height: 1.4;
}

.sh-panel {
  margin-top: 22px;
  padding: clamp(19px, 3vw, 28px);
  border: 1px solid var(--sh-line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 7px 24px rgba(31, 38, 71, 0.04);
}

.sh-panel-heading > span {
  color: var(--sh-muted);
  font-size: 12px;
  font-weight: 650;
}

.sh-level-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.sh-level-buttons > button {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px 13px;
  border: 1px solid var(--sh-line);
  border-radius: 15px;
  background: #fafbfc;
  cursor: pointer;
  text-align: right;
}

.sh-level-buttons > button:hover {
  border-color: #c9c1ef;
  background: #f8f6ff;
}

.sh-level-buttons > button > span:nth-child(2) {
  display: grid;
  flex: 1;
}

.sh-level-buttons strong {
  font-size: 14px;
  font-weight: 750;
}

.sh-level-buttons small,
.sh-level-buttons em {
  color: var(--sh-muted);
  font-size: 11px;
}

.sh-level-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--sh-purple);
  box-shadow: 0 0 0 5px var(--sh-purple-soft);
}

.sh-level-dot.easy {
  background: var(--sh-mint);
  box-shadow: 0 0 0 5px #e0f6ee;
}

.sh-level-dot.hard {
  background: var(--sh-orange);
  box-shadow: 0 0 0 5px #fff0e7;
}

.sh-set-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 7px;
}

.sh-set-grid button {
  display: grid;
  min-height: 53px;
  place-items: center;
  align-content: center;
  border: 1px solid var(--sh-line);
  border-radius: 11px;
  background: #fafbfc;
  cursor: pointer;
}

.sh-set-grid button:hover {
  border-color: #bdb2ed;
  background: #f4f0ff;
}

.sh-set-grid strong {
  font-size: 14px;
  font-weight: 750;
}

.sh-set-grid span {
  color: #9197a7;
  font-size: 9px;
}

.sh-set-grid .is-started {
  border-color: #d2cbf2;
  background: #f7f5ff;
}

.sh-set-grid .is-done {
  border-color: #f0d1bd;
  background: #fff7f1;
}

.sh-set-grid .is-good {
  border-color: #bce7d8;
  background: #f0fbf7;
}

.sh-stat-hero {
  display: flex;
  align-items: center;
  gap: clamp(25px, 5vw, 52px);
  padding: clamp(24px, 4vw, 38px);
  border-radius: 25px;
  background: linear-gradient(135deg, #5539bb, #7257dc);
  box-shadow: 0 18px 42px rgba(91, 61, 195, 0.22);
  color: #fff;
}

.sh-stat-ring {
  width: 154px;
  height: 154px;
  flex: 0 0 auto;
  background: conic-gradient(#53d5cf var(--progress), rgba(255, 255, 255, 0.18) 0);
}

.sh-stat-ring::before {
  width: 126px;
  height: 126px;
  background: #6548cf;
}

.sh-stat-ring strong {
  color: #fff;
  font-size: 34px;
}

.sh-stat-ring span {
  color: rgba(255, 255, 255, 0.75);
}

.sh-stat-hero > div:last-child {
  display: grid;
}

.sh-stat-hero > div:last-child p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
}

.sh-stat-hero > div:last-child strong {
  margin: -4px 0;
  font-size: clamp(48px, 8vw, 76px);
  font-weight: 840;
  letter-spacing: -0.06em;
}

.sh-stat-hero > div:last-child span {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
}

.sh-stat-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 11px;
  margin-top: 18px;
}

.sh-stat-cards > div {
  display: grid;
  min-height: 135px;
  align-content: center;
  padding: 17px;
  border: 1px solid var(--sh-line);
  border-radius: 18px;
  background: #fff;
}

.sh-stat-cards strong {
  font-size: 29px;
  font-weight: 810;
  letter-spacing: -0.04em;
}

.sh-stat-cards span {
  font-size: 13px;
  font-weight: 700;
}

.sh-stat-cards small {
  margin-top: 5px;
  color: var(--sh-muted);
  font-size: 10px;
  line-height: 1.35;
}

.sh-level-bar {
  display: grid;
  grid-template-columns: 105px 1fr 45px;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
}

.sh-level-bar > span {
  display: grid;
  font-size: 14px;
  font-weight: 700;
}

.sh-level-bar small {
  color: var(--sh-muted);
  font-size: 10px;
  font-weight: 500;
}

.sh-level-bar > div,
.sh-bar {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #eceef3;
}

.sh-level-bar i,
.sh-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.sh-level-bar > strong {
  font-size: 13px;
  text-align: left;
}

.sh-coverage .sh-panel-heading > strong {
  color: var(--sh-purple);
  font-size: 21px;
}

.sh-coverage .sh-bar i {
  background: linear-gradient(90deg, var(--sh-purple), var(--sh-cyan));
}

.sh-coverage > p {
  margin-top: 12px;
  color: var(--sh-muted);
  font-size: 12px;
}

.sh-video-card {
  margin-bottom: 24px;
  overflow: hidden;
  border: 1px solid var(--sh-line);
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--sh-shadow);
}

.sh-video-heading {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px clamp(18px, 4vw, 28px);
}

.sh-video-play {
  display: grid;
  width: 50px;
  height: 50px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(145deg, #745be2, #5337c2);
  box-shadow: 0 9px 23px rgba(101, 72, 216, 0.23);
  color: #fff;
  font-size: 16px;
}

.sh-video-heading h2 {
  font-size: 21px;
  font-weight: 780;
}

.sh-video-heading small {
  display: block;
  margin-top: 2px;
  color: var(--sh-muted);
  font-size: 11px;
}

.sh-video-frame {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  overflow: hidden;
  background: #12172a;
}

.sh-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.sh-guide-example {
  display: grid;
  place-items: center;
  padding: clamp(25px, 5vw, 44px);
  border-radius: 24px;
  background: linear-gradient(138deg, #1f2945, #303b5f);
  box-shadow: 0 18px 42px rgba(25, 33, 57, 0.19);
  color: #fff;
  text-align: center;
}

.sh-guide-example > small {
  margin-bottom: 18px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.sh-guide-pair {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: clamp(25px, 5vw, 39px);
  font-weight: 740;
}

.sh-guide-pair i {
  color: #7f91b9;
  font-style: normal;
}

.sh-guide-pair.answer {
  color: #64e0cf;
}

.sh-relation-line {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 22px 0;
}

.sh-relation-line span {
  display: grid;
  width: 33px;
  height: 33px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 13px;
  font-weight: 800;
}

.sh-relation-line p {
  color: rgba(255, 255, 255, 0.75);
  font-size: 14px;
}

.sh-steps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 24px;
}

.sh-steps > div {
  display: flex;
  gap: 15px;
  padding: 21px;
  border: 1px solid var(--sh-line);
  border-radius: 19px;
  background: #fff;
}

.sh-steps > div > span {
  color: var(--sh-purple);
  font-size: 13px;
  font-weight: 800;
}

.sh-steps p {
  color: var(--sh-muted);
  font-size: 13px;
}

.sh-steps strong {
  display: block;
  margin-bottom: 5px;
  color: var(--sh-ink);
  font-size: 16px;
  font-weight: 760;
}

.sh-traps {
  margin-top: 24px;
  padding: clamp(20px, 4vw, 30px);
  border: 1px solid #f1dddf;
  border-radius: 22px;
  background: #fffafa;
}

.sh-traps h2 {
  margin-bottom: 13px;
  font-size: 24px;
  font-weight: 780;
}

.sh-traps > div {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 10px 0;
}

.sh-traps > div + div {
  border-top: 1px solid #f2e4e5;
}

.sh-traps > div > span {
  display: grid;
  width: 23px;
  height: 23px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: #fce7e9;
  color: var(--sh-red);
  font-weight: 800;
}

.sh-traps p {
  color: var(--sh-muted);
  font-size: 13px;
}

.sh-traps strong {
  display: block;
  color: var(--sh-ink);
  font-size: 14px;
}

.sh-guide-cta {
  width: 100%;
  margin-top: 24px;
}

.sh-shell--focus .sh-main {
  width: min(100%, 820px);
  padding-top: 24px;
  padding-bottom: 32px;
}

.sh-quiet-button {
  padding: 9px 13px;
  border: 1px solid var(--sh-line);
  border-radius: 11px;
  background: #fff;
  color: #586178;
  cursor: pointer;
  font-size: 12px;
  font-weight: 650;
}

.sh-question-progress {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.sh-question-progress > div {
  height: 7px;
  overflow: hidden;
  border-radius: 99px;
  background: #e4e6ed;
}

.sh-question-progress > div span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--sh-purple), var(--sh-cyan));
  transition: width 300ms ease;
}

.sh-question-progress small {
  color: var(--sh-muted);
  font-size: 11px;
  font-weight: 650;
}

.sh-question-progress > strong {
  min-width: 43px;
  color: var(--sh-purple);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  text-align: left;
}

.sh-question-progress > strong.is-urgent {
  color: var(--sh-red);
  animation: sh-pulse 1s infinite;
}

.sh-question-card {
  padding: clamp(19px, 4vw, 34px);
  border: 1px solid var(--sh-line);
  border-radius: 25px;
  background: #fff;
  box-shadow: var(--sh-shadow);
}

.sh-question-meta {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--sh-muted);
  font-size: 11px;
}

.sh-difficulty {
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--sh-purple-soft);
  color: var(--sh-purple);
  font-size: 10px;
  font-weight: 750;
}

.sh-difficulty.easy {
  background: #e1f6ee;
  color: #188868;
}

.sh-difficulty.hard {
  background: #fff0e6;
  color: #ca6d34;
}

.sh-flag {
  display: grid;
  width: 35px;
  height: 35px;
  margin-right: auto;
  place-items: center;
  border: 1px solid var(--sh-line);
  border-radius: 10px;
  background: #fff;
  color: #8e95a6;
  cursor: pointer;
}

.sh-flag svg {
  width: 17px;
  height: 17px;
}

.sh-flag.is-active {
  border-color: #d8d0f5;
  background: var(--sh-purple-soft);
  color: var(--sh-purple);
}

.sh-question-prompt {
  margin-top: 20px !important;
  color: var(--sh-muted);
  font-size: 13px;
  text-align: center;
}

.sh-stem-pair {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 3vw, 25px);
  min-height: 102px;
  padding: 17px 8px;
  font-size: clamp(28px, 6vw, 43px);
  font-weight: 790;
  letter-spacing: -0.03em;
  text-align: center;
}

.sh-stem-pair i,
.sh-option-pair i {
  color: #9aa0af;
  font-style: normal;
  font-weight: 500;
}

.sh-relation-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
  border: 1px dashed #d8d2ef;
  border-radius: 13px;
  background: #faf9ff;
  color: var(--sh-purple-dark);
  cursor: pointer;
  text-align: right;
}

.sh-relation-toggle > span {
  color: var(--sh-purple);
}

.sh-relation-toggle svg {
  width: 17px;
  height: 17px;
}

.sh-relation-toggle strong {
  flex: 1;
  font-size: 12px;
  font-weight: 700;
}

.sh-relation-toggle i {
  font-size: 20px;
  font-style: normal;
  transition: transform 180ms ease;
}

.sh-relation-toggle.is-open i {
  transform: rotate(45deg);
}

.sh-relation-lab {
  display: grid;
  margin-top: 8px;
  padding: 14px;
  border-radius: 13px;
  background: #f7f5ff;
}

.sh-relation-lab label {
  margin-bottom: 5px;
  color: var(--sh-purple-dark);
  font-size: 11px;
  font-weight: 700;
}

.sh-relation-lab textarea {
  width: 100%;
  min-height: 58px;
  padding: 9px 11px;
  resize: vertical;
  border: 1px solid #d7d1ed;
  border-radius: 10px;
  outline: none;
  background: #fff;
  color: var(--sh-ink);
  font-size: 13px;
}

.sh-relation-lab textarea:focus {
  border-color: var(--sh-purple);
  box-shadow: 0 0 0 3px rgba(101, 72, 216, 0.10);
}

.sh-relation-lab small {
  margin-top: 5px;
  color: var(--sh-muted);
  font-size: 9px;
}

.sh-options {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

.sh-option-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 34px;
  gap: 7px;
  transition: opacity 160ms ease;
}

.sh-option {
  display: grid;
  grid-template-columns: 32px 1fr 25px;
  align-items: center;
  min-height: 62px;
  gap: 11px;
  padding: 9px 13px;
  border: 1.5px solid var(--sh-line);
  border-radius: 15px;
  background: #fff;
  cursor: pointer;
  text-align: right;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.sh-option:not(:disabled):hover {
  border-color: #bfb6e9;
  background: #fbfaff;
  transform: translateX(-2px);
}

.sh-option-number {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border: 1px solid #e1e3ea;
  border-radius: 9px;
  background: #f7f8fa;
  color: #6f778b;
  font-size: 12px;
  font-weight: 760;
}

.sh-option-pair {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(16px, 3vw, 19px);
  font-weight: 650;
}

.sh-eliminate {
  align-self: stretch;
  border: 1px solid var(--sh-line);
  border-radius: 12px;
  background: #f8f9fb;
  color: #9aa0ae;
  cursor: pointer;
  font-size: 18px;
}

.sh-eliminate:hover {
  background: #f1f2f5;
  color: var(--sh-red);
}

.sh-option-row.is-selected .sh-option {
  border-color: var(--sh-purple);
  background: #f7f4ff;
  box-shadow: 0 0 0 3px rgba(101, 72, 216, 0.08);
}

.sh-option-row.is-selected .sh-option-number {
  border-color: var(--sh-purple);
  background: var(--sh-purple);
  color: #fff;
}

.sh-option-row.is-eliminated {
  opacity: 0.38;
}

.sh-option-row.is-eliminated .sh-option-pair {
  text-decoration: line-through;
}

.sh-option-row.is-correct .sh-option {
  border-color: #38b68e;
  background: #edfbf6;
}

.sh-option-row.is-correct .sh-option-number {
  border-color: #28a77f;
  background: #28a77f;
  color: #fff;
}

.sh-option-row.is-wrong .sh-option {
  border-color: #e66d76;
  background: #fff2f3;
}

.sh-option-row.is-wrong .sh-option-number {
  border-color: #dc606a;
  background: #dc606a;
  color: #fff;
}

.sh-result-icon {
  color: var(--sh-mint);
}

.sh-option-row.is-wrong .sh-result-icon {
  color: var(--sh-red);
}

.sh-result-icon svg {
  width: 21px;
  height: 21px;
  stroke-width: 2.5;
}

.sh-confidence {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
}

.sh-confidence > span {
  margin-left: 4px;
  color: var(--sh-muted);
  font-size: 11px;
}

.sh-confidence button {
  padding: 6px 10px;
  border: 1px solid var(--sh-line);
  border-radius: 999px;
  background: #fff;
  color: #727a8d;
  cursor: pointer;
  font-size: 10px;
  font-weight: 650;
}

.sh-confidence button.is-active {
  border-color: #cec6ef;
  background: var(--sh-purple-soft);
  color: var(--sh-purple-dark);
}

.sh-feedback {
  margin-top: 20px;
  padding: 17px;
  border: 1px solid #bde7d8;
  border-radius: 17px;
  background: #f1fcf8;
}

.sh-feedback.is-wrong {
  border-color: #f0cdd0;
  background: #fff7f7;
}

.sh-feedback-title {
  display: flex;
  align-items: center;
  gap: 11px;
}

.sh-feedback-title > span {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 12px;
  background: #d8f4e9;
  color: #188d6a;
}

.sh-feedback.is-wrong .sh-feedback-title > span {
  background: #fbe3e5;
  color: #cb505b;
}

.sh-feedback-title > div {
  display: grid;
}

.sh-feedback-title small {
  color: #278a6c;
  font-size: 10px;
  font-weight: 700;
}

.sh-feedback.is-wrong .sh-feedback-title small {
  color: #c3505a;
}

.sh-feedback-title strong {
  font-size: 18px;
  font-weight: 780;
}

.sh-relationship {
  margin-top: 14px;
  padding: 13px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
}

.sh-relationship small {
  color: var(--sh-purple);
  font-size: 10px;
  font-weight: 750;
}

.sh-relationship p {
  margin-top: 3px !important;
  color: #353e55;
  font-size: 13px;
  line-height: 1.6;
}

.sh-feedback details {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(123, 140, 132, 0.16);
}

.sh-feedback summary {
  color: var(--sh-purple-dark);
  cursor: pointer;
  font-size: 12px;
  font-weight: 720;
}

.sh-feedback details p {
  margin-top: 9px !important;
  color: #566077;
  font-size: 12px;
  line-height: 1.65;
}

.sh-question-actions {
  position: sticky;
  z-index: 15;
  bottom: 0;
  margin: 14px -8px -12px;
  padding: 12px 8px;
  background: linear-gradient(0deg, var(--sh-background) 70%, transparent);
}

.sh-question-card.is-checking .sh-option-row.is-selected {
  animation: sh-answer-checking 780ms ease-in-out infinite alternate;
}

@keyframes sh-answer-checking {
  from { box-shadow: 0 0 0 0 rgba(8, 127, 115, .08); }
  to { box-shadow: 0 0 0 7px rgba(8, 127, 115, .12); }
}

.sh-session-exit {
  width: 100%;
  min-height: 44px;
  margin-top: 8px;
  border: 1px solid var(--sh-line);
  border-radius: 13px;
  color: #51615f;
  background: rgba(255, 254, 250, .96);
  font-weight: 730;
}

.sh-primary-button,
.sh-secondary-button {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 14px;
  cursor: pointer;
  font-weight: 740;
  text-decoration: none !important;
}

.sh-primary-button {
  border: 0;
  background: linear-gradient(135deg, #684bd5, #5737c3);
  box-shadow: 0 11px 26px rgba(95, 62, 199, 0.22);
  color: #fff !important;
}

.sh-primary-button:hover:not(:disabled) {
  background: linear-gradient(135deg, #7254dd, #4e30b3);
  box-shadow: 0 14px 32px rgba(95, 62, 199, 0.29);
}

.sh-primary-button:disabled {
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.43;
}

.sh-secondary-button {
  border: 1px solid var(--sh-line);
  background: #fff;
  color: var(--sh-ink);
}

.sh-question-actions .sh-primary-button {
  width: 100%;
}

.sh-button-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: sh-spin 700ms linear infinite;
}

.sh-results {
  display: grid;
  max-width: 620px;
  justify-items: center;
  margin: 0 auto;
  padding: clamp(30px, 6vw, 58px) 0;
  text-align: center;
}

.sh-result-badge {
  display: grid;
  width: 68px;
  height: 68px;
  margin-bottom: 17px;
  place-items: center;
  border-radius: 22px;
  background: linear-gradient(145deg, #7359df, #5435bc);
  box-shadow: 0 15px 34px rgba(94, 62, 197, 0.25);
  color: #fff;
}

.sh-result-badge svg {
  width: 31px;
  height: 31px;
}

.sh-results h1 {
  margin-top: 5px;
  font-size: clamp(37px, 7vw, 58px);
  font-weight: 830;
  letter-spacing: -0.055em;
}

.sh-results > p:nth-of-type(2) {
  margin-top: 8px;
  color: var(--sh-muted);
}

.sh-score-ring {
  width: 170px;
  height: 170px;
  margin: 30px 0;
  background: conic-gradient(var(--sh-purple) var(--progress), #e5e7ef 0);
}

.sh-score-ring::before {
  width: 138px;
  height: 138px;
}

.sh-score-ring strong {
  font-size: 39px;
}

.sh-result-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  max-width: 470px;
  padding: 18px 0;
  border: 1px solid var(--sh-line);
  border-radius: 18px;
  background: #fff;
}

.sh-result-stats div {
  display: grid;
}

.sh-result-stats div + div {
  border-right: 1px solid var(--sh-line);
}

.sh-result-stats strong {
  font-size: 24px;
  font-weight: 810;
}

.sh-result-stats span {
  color: var(--sh-muted);
  font-size: 11px;
}

.sh-result-actions {
  display: grid;
  width: 100%;
  max-width: 470px;
  gap: 9px;
  margin-top: 22px;
}

.sh-loading,
.sh-fatal {
  display: grid;
  min-height: 620px;
  place-content: center;
  justify-items: center;
  padding: 30px;
  text-align: center;
}

.sh-loading p,
.sh-fatal p {
  margin-top: 12px;
  color: var(--sh-muted);
}

.sh-spinner {
  width: 39px;
  height: 39px;
  border: 3px solid #ded9f6;
  border-top-color: var(--sh-purple);
  border-radius: 50%;
  animation: sh-spin 800ms linear infinite;
}

.sh-fatal > span {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 16px;
  background: #fde8e9;
  color: var(--sh-red);
  font-size: 26px;
  font-weight: 800;
}

.sh-fatal h2 {
  margin-top: 13px;
  font-size: 24px;
}

.sh-fatal button {
  margin-top: 16px;
  padding: 10px 18px;
  border: 0;
  border-radius: 11px;
  background: var(--sh-purple);
  color: #fff;
  cursor: pointer;
}

.sh-toast {
  position: fixed;
  z-index: 99999;
  right: 50%;
  bottom: 28px;
  max-width: min(90vw, 420px);
  padding: 12px 18px;
  transform: translate(50%, 20px);
  border-radius: 12px;
  background: #1f2944;
  box-shadow: 0 12px 35px rgba(15, 21, 39, 0.25);
  color: #fff;
  font-size: 13px;
  opacity: 0;
  transition: opacity 180ms ease, transform 180ms ease;
}

.sh-toast.is-error {
  background: #a83d47;
}

.sh-toast.is-visible {
  transform: translate(50%, 0);
  opacity: 1;
}

.sh-login-shell {
  display: grid;
  min-height: 680px;
  place-items: center;
  padding: 28px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 10% 10%, rgba(47, 199, 200, 0.17), transparent 25%),
    radial-gradient(circle at 90% 85%, rgba(101, 72, 216, 0.22), transparent 32%),
    #f5f6fa;
}

.sh-login-card {
  display: grid;
  width: min(100%, 460px);
  justify-items: center;
  padding: clamp(30px, 7vw, 55px);
  border: 1px solid rgba(229, 231, 239, 0.9);
  border-radius: 27px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--sh-shadow);
  text-align: center;
}

.sh-login-card .sh-login-mark {
  width: 57px;
  height: 57px;
  margin-bottom: 20px;
  border-radius: 18px 18px 18px 7px;
  font-size: 29px;
}

.sh-login-card h1 {
  margin: 7px 0 11px;
  color: var(--sh-ink);
  font-size: clamp(32px, 6vw, 47px);
  font-weight: 830;
  letter-spacing: -0.05em;
  line-height: 1.03;
}

.sh-login-card > p:not(.sh-eyebrow) {
  margin-bottom: 24px;
  color: var(--sh-muted);
  font-size: 15px;
}

.sh-login-card .sh-primary-button {
  width: 100%;
}

.sh-login-card > small {
  margin-top: 13px;
  color: #868d9d;
  font-size: 11px;
}

.sh-celebrate .sh-feedback.is-correct {
  animation: sh-pop 480ms ease;
}

@keyframes sh-spin {
  to { transform: rotate(360deg); }
}

@keyframes sh-pulse {
  50% { opacity: 0.55; }
}

@keyframes sh-pop {
  0% { transform: scale(0.97); opacity: 0.4; }
  65% { transform: scale(1.015); }
  100% { transform: scale(1); opacity: 1; }
}

@media (min-width: 900px) {
  .sh-app {
    max-width: 1180px;
  }

  .sh-bottom-nav {
    width: 520px;
    min-height: 66px;
    margin: -86px auto 20px;
    overflow: hidden;
    border: 1px solid var(--sh-line);
    border-radius: 20px;
    box-shadow: 0 14px 38px rgba(31, 38, 71, 0.13);
  }

  .sh-main {
    padding-bottom: 125px;
  }

  .sh-shell--focus .sh-main {
    padding-bottom: 45px;
  }

  .sh-question-actions {
    position: static;
    margin-top: 16px;
    background: none;
  }
}

@media (max-width: 760px) {
  .sh-app,
  .sh-login-shell {
    border-radius: 0;
  }

  .sh-topbar {
    min-height: 68px;
    padding: 10px 16px;
  }

  .sh-brand-mark {
    width: 39px;
    height: 39px;
    border-radius: 12px 12px 12px 5px;
    font-size: 20px;
  }

  .sh-brand strong {
    font-size: 18px;
  }

  .sh-user > span:first-child {
    display: none;
  }

  .sh-main {
    padding-top: 29px;
  }

  .sh-practice-grid {
    grid-template-columns: 1fr;
  }

  .sh-stat-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .sh-set-grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .sh-steps {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .sh-welcome {
    grid-template-columns: 1fr auto;
  }

  .sh-welcome h1 {
    font-size: 41px;
  }

  .sh-welcome > div:first-child > p:last-child {
    grid-column: 1 / -1;
  }

  .sh-progress-orb {
    width: 94px;
    height: 94px;
  }

  .sh-progress-orb::before {
    width: 76px;
    height: 76px;
  }

  .sh-progress-orb strong {
    font-size: 21px;
  }

  .sh-smart-card {
    min-height: 112px;
    padding: 18px;
  }

  .sh-smart-icon {
    width: 47px;
    height: 47px;
    border-radius: 15px;
  }

  .sh-smart-card strong {
    font-size: 23px;
  }

  .sh-smart-card em {
    font-size: 12px;
  }

  .sh-smart-card .sh-round-arrow {
    display: none;
  }

  .sh-mini-stats > div {
    padding: 0 9px;
  }

  .sh-mini-stats small {
    font-size: 10px;
  }

  .sh-mini-stats strong {
    font-size: 19px;
  }

  .sh-daily-card {
    padding: 14px;
  }

  .sh-daily-card .sh-round-arrow {
    display: none;
  }

  .sh-home-grid {
    gap: 9px;
  }

  .sh-mode-card {
    min-height: 168px;
    padding: 16px;
  }

  .sh-mode-card strong {
    font-size: 17px;
  }

  .sh-level-buttons {
    grid-template-columns: 1fr;
  }

  .sh-level-buttons > button {
    min-height: 58px;
  }

  .sh-stat-hero {
    gap: 20px;
    padding: 22px 19px;
  }

  .sh-stat-ring {
    width: 119px;
    height: 119px;
  }

  .sh-stat-ring::before {
    width: 98px;
    height: 98px;
  }

  .sh-stat-ring strong {
    font-size: 27px;
  }

  .sh-stat-hero > div:last-child strong {
    font-size: 50px;
  }

  .sh-level-bar {
    grid-template-columns: 78px 1fr 36px;
    gap: 9px;
  }

  .sh-question-card {
    padding: 17px 14px;
    border-radius: 20px;
  }

  .sh-stem-pair {
    min-height: 91px;
    font-size: 29px;
  }

  .sh-option {
    grid-template-columns: 29px 1fr 22px;
    min-height: 59px;
    gap: 8px;
    padding: 8px 9px;
  }

  .sh-option-pair {
    gap: 7px;
    font-size: 16px;
  }

  .sh-option-row {
    grid-template-columns: 1fr 30px;
    gap: 5px;
  }

  .sh-confidence {
    flex-wrap: wrap;
  }

  .sh-confidence > span {
    width: 100%;
  }

  .sh-video-heading {
    padding: 16px;
  }

  .sh-video-play {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }

  .sh-video-heading h2 {
    font-size: 18px;
  }

  .sh-score-ring {
    width: 147px;
    height: 147px;
  }

  .sh-score-ring::before {
    width: 120px;
    height: 120px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sh-app *,
  .sh-app *::before,
  .sh-app *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Simplex Hebrew identity — warm paper, ink and turquoise. */
.sh-app,
.sh-login-shell {
  --sh-ink: #173a3a;
  --sh-muted: #667675;
  --sh-purple: #087f73;
  --sh-purple-dark: #05675e;
  --sh-purple-soft: #e4f3ef;
  --sh-cyan: #35a99c;
  --sh-mint: #168b72;
  --sh-orange: #d86d52;
  --sh-red: #c8565e;
  --sh-surface: #fffefa;
  --sh-background: #f6f1e7;
  --sh-line: #e5ddce;
  --sh-shadow: 0 18px 46px rgba(32, 69, 66, 0.11);
}

.sh-app {
  background:
    radial-gradient(circle at 8% 2%, rgba(216, 109, 82, 0.11), transparent 25%),
    radial-gradient(circle at 94% 13%, rgba(8, 127, 115, 0.10), transparent 24%),
    var(--sh-background);
}

.sh-brand-mark,
.sh-login-mark {
  border-radius: 50% 50% 50% 12px;
  background: linear-gradient(145deg, #168f82, #066c64);
  box-shadow: 0 8px 22px rgba(8, 127, 115, 0.24);
  letter-spacing: 0;
}

.sh-topbar { border-bottom-color: rgba(214, 205, 188, 0.78); }
.sh-focus-label { color: #687472; font-size: 12px; font-weight: 720; }
.sh-eyebrow { color: #087f73; }
.sh-primary-button { background: linear-gradient(135deg, #087f73, #05675e); box-shadow: 0 12px 28px rgba(8, 127, 115, 0.20); }
.sh-primary-button:hover:not(:disabled) { background: linear-gradient(135deg, #0a8d80, #05675e); }

.sh-hebrew-welcome { min-height: 220px; }
.sh-hebrew-welcome h1 { color: #183b3a; }
.sh-hebrew-welcome h1 em { color: #d86d52; }
.sh-letter-art { position: relative; width: clamp(120px, 19vw, 196px); height: clamp(132px, 21vw, 204px); }
.sh-letter-art span,
.sh-letter-art i,
.sh-letter-art b { position: absolute; display: grid; place-items: center; border-radius: 24px 24px 24px 8px; font-style: normal; font-weight: 850; box-shadow: 0 18px 38px rgba(26, 62, 60, 0.13); }
.sh-letter-art span { z-index: 3; right: 5px; top: 7px; width: 104px; height: 112px; color: #fff; background: linear-gradient(145deg, #0d8b7e, #076f67); font-size: 67px; transform: rotate(3deg); }
.sh-letter-art i { z-index: 2; left: 3px; bottom: 8px; width: 82px; height: 88px; color: #77382b; background: #f3c4a8; font-size: 47px; transform: rotate(-7deg); }
.sh-letter-art b { z-index: 1; right: 0; bottom: 0; width: 70px; height: 70px; color: #7c5d13; background: #f1d27a; font-size: 36px; transform: rotate(8deg); }

.sh-track-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.sh-track-card { min-height: 300px; padding: 26px; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; border: 1px solid #ded6c8; border-radius: 28px; background: rgba(255, 254, 250, 0.94); box-shadow: 0 16px 40px rgba(28, 63, 61, 0.09); text-align: right; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.sh-track-card::before { content: ""; position: absolute; width: 190px; height: 190px; top: -105px; left: -70px; border-radius: 50%; opacity: .7; }
.sh-track-card.is-vocabulary::before { background: #d9efea; }
.sh-track-card.is-analogies::before { background: #f6d8ca; }
.sh-app button.sh-track-card:hover,
.sh-app button.sh-track-card:focus-visible {
  color: #173a3a !important;
  background: #fffefa !important;
  transform: translateY(-3px);
  box-shadow: 0 21px 48px rgba(28, 63, 61, 0.13);
}
.sh-app button.sh-track-card:hover > small,
.sh-app button.sh-track-card:focus-visible > small { color: var(--sh-muted) !important; }
.sh-app button.sh-track-card:hover > em,
.sh-app button.sh-track-card:focus-visible > em { color: #6d7978 !important; }
.sh-app button.sh-track-card:hover .sh-track-foot,
.sh-app button.sh-track-card:focus-visible .sh-track-foot { color: #516564 !important; }
.sh-track-icon { width: 58px; height: 58px; margin-bottom: 28px; display: grid; place-items: center; border-radius: 19px; color: #fff; }
.sh-track-icon svg { width: 29px; height: 29px; }
.is-vocabulary .sh-track-icon { background: linear-gradient(145deg, #149386, #08766c); }
.is-analogies .sh-track-icon { background: linear-gradient(145deg, #e1795d, #c95e49); }
.sh-track-card > small { color: var(--sh-muted); font-size: 12px; font-weight: 700; }
.sh-track-card > strong { margin: 3px 0 4px; font-size: clamp(29px, 4vw, 40px); letter-spacing: -.035em; }
.sh-track-card > em { color: #6d7978; font-size: 14px; }
.sh-track-progress { width: 100%; height: 7px; margin-top: auto; overflow: hidden; border-radius: 999px; background: #ece5d9; }
.sh-track-progress i { display: block; height: 100%; border-radius: inherit; background: #0a8176; }
.is-analogies .sh-track-progress i { background: #d66b51; }
.sh-track-foot { width: 100%; margin-top: 10px; display: flex; align-items: center; justify-content: space-between; color: #516564; font-size: 13px; font-weight: 700; }
.sh-track-foot b { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #163f3d; }
.sh-track-foot b svg { width: 17px; height: 17px; }

.sh-home-quick { margin-top: 28px; padding: 22px; border: 1px solid #e1d8c8; border-radius: 24px; background: rgba(255, 254, 250, .72); }
.sh-home-quick > div:first-child { margin-bottom: 14px; display: flex; align-items: end; justify-content: space-between; }
.sh-home-quick h2 { font-size: 24px; }
.sh-home-quick > div:last-child { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sh-home-quick button { min-height: 86px; padding: 13px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 10px; border: 1px solid #e4dccf; border-radius: 17px; background: #fffefa; text-align: right; }
.sh-home-quick button > span { grid-row: 1 / 3; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 13px; color: #087f73; background: #e4f3ef; }
.sh-home-quick button strong { align-self: end; }
.sh-home-quick button small { align-self: start; color: var(--sh-muted); }
.sh-home-quick button:disabled { opacity: .45; cursor: default; }

/* Vocabulary cards and full dictionary. */
.sh-vocab-page,
.sh-library-page { max-width: 880px; margin: 0 auto; }
.sh-vocab-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.sh-vocab-heading h1 { margin: 3px 0 4px; font-size: clamp(36px, 6vw, 54px); line-height: 1; letter-spacing: -.04em; }
.sh-vocab-heading p:last-child { max-width: 610px; color: var(--sh-muted); }
.sh-vocab-heading > strong { min-width: 96px; text-align: center; color: #087f73; font-size: 28px; }
.sh-vocab-heading > strong small { display: block; color: var(--sh-muted); font-size: 10px; font-weight: 650; }
.sh-vocab-tabs { width: fit-content; margin: 22px auto 10px; padding: 5px; display: flex; gap: 4px; border: 1px solid #ded6c8; border-radius: 16px; background: #ece7dc; }
.sh-vocab-tabs button { min-width: 136px; min-height: 42px; padding: 8px 16px; border: 0; border-radius: 12px; color: #687473; background: transparent; font-weight: 750; }
.sh-vocab-tabs button.is-active { color: #075f58; background: #fffefa; box-shadow: 0 5px 16px rgba(39, 67, 64, .08); }
.sh-vocab-filters { width: min(660px, 100%); margin: 0 auto; padding: 9px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 9px; border: 1px solid #dfd5c6; border-radius: 17px; background: rgba(255, 254, 250, .66); }
.sh-vocab-filters label > span { display: block; margin: 0 5px 5px; color: #746f68; font-size: 11px; font-weight: 700; }
.sh-vocab-filters select { width: 100%; min-height: 44px; padding: 7px 12px; border: 1px solid #d9cfbf; border-radius: 11px; color: #243f3d; background: #fff; font: inherit; font-weight: 650; }
.sh-vocab-mode { min-height: 44px; padding: 3px; display: flex; gap: 3px; border-radius: 11px; background: #ece5d9; }
.sh-vocab-mode button { min-height: 38px; padding: 6px 12px; border: 0; border-radius: 9px; color: #716d67; background: transparent; font-size: 12px; font-weight: 750; white-space: nowrap; }
.sh-vocab-mode button span { margin-inline-start: 3px; padding: 1px 6px; border-radius: 999px; background: rgba(255,255,255,.78); font-size: 10px; }
.sh-vocab-mode button.is-active { color: #076e65; background: #fffefa; box-shadow: 0 4px 12px rgba(39, 67, 64, .08); }
.sh-vocab-meta { margin-top: 16px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px; }
.sh-vocab-meta > div:first-child { display: flex; align-items: baseline; gap: 5px; }
.sh-vocab-meta > div:first-child strong { color: #075f58; font-size: 22px; }
.sh-vocab-meta > div:first-child span { color: var(--sh-muted); font-size: 12px; }
.sh-vocab-progress { height: 7px; overflow: hidden; border-radius: 999px; background: #e7dfd1; }
.sh-vocab-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #087f73, #df795d); }
.sh-vocab-score { display: flex; gap: 5px; font-size: 11px; font-weight: 750; }
.sh-vocab-score span { padding: 4px 7px; border-radius: 999px; }
.sh-vocab-score .is-review { color: #a14651; background: #f8e4e5; }
.sh-vocab-score .is-known { color: #08745f; background: #e2f2ea; }
.sh-vocab-deck { width: min(620px, 100%); min-height: 340px; margin: 13px auto 0; position: relative; display: grid; place-items: center; perspective: 1200px; overflow: visible; }
.sh-vocab-ghost { position: absolute; width: calc(100% - 28px); height: 300px; border: 1px solid #ded5c7; border-radius: 26px; background: #fffdf8; box-shadow: 0 12px 30px rgba(32, 69, 66, .07); }
.sh-vocab-ghost.one { top: 21px; transform: scale(.97); opacity: .78; }
.sh-vocab-ghost.two { top: 32px; transform: scale(.93); opacity: .42; }
.sh-vocab-card { z-index: 3; width: 100%; height: 300px; padding: 0; position: relative; border: 0; border-radius: 26px; background: transparent; box-shadow: 0 21px 50px rgba(32, 69, 66, .15); cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; transition: transform .25s ease, opacity .25s ease; }
.sh-vocab-card.is-dragging { cursor: grabbing; transition: none; }
.sh-vocab-card.is-exiting-right { transform: translateX(125%) rotate(16deg) !important; opacity: 0; }
.sh-vocab-card.is-exiting-left { transform: translateX(-125%) rotate(-16deg) !important; opacity: 0; }
.sh-vocab-card-inner { display: block; width: 100%; height: 100%; position: relative; border-radius: inherit; }
.sh-vocab-face { position: absolute; inset: 0; padding: 30px; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #dfd5c5; border-radius: inherit; background: linear-gradient(145deg, #fffefa, #fbf4e9); text-align: center; transition: opacity .23s ease, transform .23s ease; }
.sh-vocab-face::before { content: ""; position: absolute; width: 180px; height: 180px; top: -96px; left: -62px; border-radius: 50%; background: linear-gradient(135deg, rgba(216,109,82,.18), rgba(236,190,97,.10)); }
.sh-vocab-face small { position: absolute; top: 23px; right: 25px; max-width: calc(100% - 50px); color: #677876; font-weight: 700; text-align: right; }
.sh-vocab-front strong { max-width: 94%; color: #173a3a; font-size: clamp(30px, 6.6vw, 53px); font-weight: 820; line-height: 1.12; overflow-wrap: anywhere; }
.sh-vocab-face em { position: absolute; bottom: 21px; color: #7b817e; font-size: 12px; font-style: normal; }
.sh-vocab-back { color: #fff; border-color: transparent; background: linear-gradient(145deg, #173f3d, #0c7168); opacity: 0; pointer-events: none; transform: scale(.975); }
.sh-vocab-back::before { background: rgba(236, 169, 117, .13); }
.sh-vocab-back small { color: rgba(255,255,255,.73); }
.sh-vocab-back strong { max-width: 94%; max-height: 178px; overflow: auto; color: #fff; font-size: clamp(20px, 4.5vw, 31px); font-weight: 700; line-height: 1.36; white-space: pre-line; scrollbar-width: thin; }
.sh-vocab-back em { color: rgba(255,255,255,.72); }
.sh-vocab-card.is-flipped .sh-vocab-front { opacity: 0; pointer-events: none; transform: scale(.975); }
.sh-vocab-card.is-flipped .sh-vocab-back { opacity: 1; pointer-events: auto; transform: scale(1); }
.sh-swipe-stamp { position: absolute; z-index: 10; top: 25px; padding: 6px 11px; border: 2px solid currentColor; border-radius: 10px; background: rgba(255,255,255,.94); font-size: 15px; font-weight: 800; opacity: 0; pointer-events: none; }
.sh-swipe-stamp.is-known { right: 26px; color: #168b72; transform: rotate(9deg); }
.sh-swipe-stamp.is-review { left: 26px; color: #c8565e; transform: rotate(-9deg); }
.sh-swipe-note { margin: 7px auto 0; display: flex; align-items: center; justify-content: center; gap: 10px; color: #7b807c; font-size: 11px; }
.sh-swipe-note i { width: 3px; height: 3px; border-radius: 50%; background: #b4aca0; }
.sh-vocab-actions { width: min(560px, 100%); margin: 8px auto 0; display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; }
.sh-vocab-choice,
.sh-vocab-flip { min-height: 48px; border-radius: 13px; font-weight: 750; }
.sh-vocab-choice { padding: 7px 12px; display: flex; align-items: center; justify-content: center; gap: 7px; background: #fffefa; }
.sh-vocab-choice.is-known { color: #14755f; border: 1px solid #b9dacb; }
.sh-vocab-choice.is-review { color: #a44e57; border: 1px solid #e6c4c7; }
.sh-vocab-flip { min-width: 118px; padding: 7px 13px; color: #fff; border: 1px solid #087f73; background: #087f73; }
.sh-vocab-history { grid-column: 1 / -1; min-height: 33px; display: flex; justify-content: center; }
.sh-vocab-history button { min-height: 32px; padding: 4px 10px; display: inline-flex; align-items: center; gap: 5px; border: 0; border-radius: 9px; color: #6d7774; background: transparent; font-size: 11px; }
.sh-vocab-history button svg { width: 15px; height: 15px; }
.sh-vocab-history button:disabled { visibility: hidden; }
.sh-vocab-exit { grid-column: 1 / -1; display: flex; justify-content: center; }
.sh-vocab-exit button {
  min-height: 40px;
  padding: 7px 22px;
  border: 1px solid #cfc6b8;
  border-radius: 12px;
  color: #536360;
  background: #fffefa;
  font-weight: 730;
}
.sh-vocab-exit button:hover,
.sh-vocab-exit button:focus-visible,
.sh-session-exit:hover,
.sh-session-exit:focus-visible {
  color: #173a3a;
  background: #f3eee4;
}
.sh-vocab-empty { width: min(620px, 100%); margin: 28px auto 0; padding: 42px 22px; border: 1px solid #ded5c7; border-radius: 24px; background: #fffefa; text-align: center; }
.sh-vocab-empty > span { width: 50px; height: 50px; margin: 0 auto 13px; display: grid; place-items: center; border-radius: 50%; color: #087f73; background: #e2f2ed; }
.sh-vocab-empty h2 { margin-bottom: 5px; }
.sh-vocab-empty p { margin-bottom: 17px; color: var(--sh-muted); }
.sh-vocab-empty.compact { padding: 28px 18px; }

.sh-vocab-search { margin: 20px 0 15px; padding: 16px; border: 1px solid #ded5c7; border-radius: 20px; background: #fffefa; }
.sh-vocab-search label { display: block; margin: 0 4px 7px; font-weight: 750; }
.sh-vocab-search > div { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.sh-vocab-search > div > svg { position: absolute; z-index: 2; top: 14px; right: 14px; color: #74807e; }
.sh-vocab-search input { min-width: 0; min-height: 50px; padding: 9px 44px 9px 13px; border: 1px solid #d8cebe; border-radius: 14px; color: #173a3a; background: #fcfaf5; font-size: 16px; }
.sh-vocab-search .sh-primary-button { min-height: 50px; padding-inline: 23px; }
.sh-word-list { display: grid; gap: 8px; }
.sh-word-list article { padding: 16px 18px; display: grid; grid-template-columns: minmax(150px, .8fr) 1.6fr; align-items: center; gap: 20px; border: 1px solid #e0d7c9; border-radius: 17px; background: rgba(255,254,250,.9); }
.sh-word-list article > div { padding-left: 18px; border-left: 1px solid #e3dacd; }
.sh-word-list strong { display: block; color: #173a3a; font-size: 18px; }
.sh-word-list small { color: #7a817e; }
.sh-word-list p { color: #536562; white-space: pre-line; }
.sh-library-more { width: min(320px, 100%); min-height: 48px; margin: 18px auto 0; display: block; border: 1px solid #bad7cf; border-radius: 14px; color: #08736a; background: #f5fbf8; font-weight: 750; }

.sh-vocab-stat-strip { margin-bottom: 18px; padding: 17px; display: grid; grid-template-columns: repeat(3, 1fr) auto; align-items: center; gap: 12px; border: 1px solid #ded5c7; border-radius: 22px; background: #fffefa; }
.sh-vocab-stat-strip > div { min-height: 76px; padding: 6px 13px; display: flex; flex-direction: column; justify-content: center; border-left: 1px solid #e7dfd3; }
.sh-vocab-stat-strip > div:first-child { position: relative; padding-right: 48px; }
.sh-vocab-stat-strip > div:first-child > span { position: absolute; right: 8px; top: 22px; color: #087f73; }
.sh-vocab-stat-strip strong { font-size: 25px; }
.sh-vocab-stat-strip small { color: var(--sh-muted); }
.sh-vocab-stat-strip button { min-height: 52px; padding: 9px 14px; display: flex; align-items: center; gap: 7px; border: 0; border-radius: 14px; color: #fff; background: #087f73; font-weight: 750; }
.sh-vocab-stat-strip button svg { width: 16px; height: 16px; }
.sh-vocab-stat-strip button:disabled { opacity: .42; }

@media (max-width: 760px) {
  .sh-hebrew-welcome { min-height: 150px; }
  .sh-letter-art { width: 108px; height: 124px; }
  .sh-letter-art span { width: 76px; height: 82px; font-size: 49px; border-radius: 19px 19px 19px 7px; }
  .sh-letter-art i { width: 59px; height: 63px; font-size: 34px; border-radius: 17px 17px 17px 6px; }
  .sh-letter-art b { width: 49px; height: 49px; font-size: 26px; border-radius: 14px 14px 14px 5px; }
  .sh-track-grid { gap: 11px; }
  .sh-track-card { min-height: 256px; padding: 18px; border-radius: 22px; }
  .sh-track-icon { width: 48px; height: 48px; margin-bottom: 21px; border-radius: 16px; }
  .sh-track-icon svg { width: 24px; height: 24px; }
  .sh-track-card > strong { font-size: 27px; }
  .sh-track-card > em { font-size: 12px; }
  .sh-home-quick { padding: 15px; border-radius: 20px; }
  .sh-home-quick > div:last-child { grid-template-columns: 1fr; }
  .sh-home-quick button { min-height: 70px; }
  .sh-vocab-heading { align-items: start; }
  .sh-vocab-heading > strong { min-width: 70px; font-size: 22px; }
  .sh-vocab-heading p:last-child { font-size: 13px; }
  .sh-vocab-tabs { width: 100%; margin-top: 16px; }
  .sh-vocab-tabs button { min-width: 0; flex: 1; }
  .sh-vocab-filters { grid-template-columns: 1fr; padding: 8px; }
  .sh-vocab-mode { display: grid; grid-template-columns: 1fr 1fr; }
  .sh-vocab-meta { grid-template-columns: auto 1fr; gap: 8px; }
  .sh-vocab-score { grid-column: 1 / -1; justify-content: center; }
  .sh-vocab-deck { min-height: clamp(265px, 39dvh, 318px); }
  .sh-vocab-card { height: clamp(245px, 36dvh, 288px); border-radius: 22px; }
  .sh-vocab-ghost { height: clamp(245px, 36dvh, 288px); border-radius: 22px; }
  .sh-vocab-face { padding: 25px 18px; }
  .sh-vocab-face small { top: 18px; right: 19px; }
  .sh-vocab-face em { bottom: 17px; }
  .sh-vocab-back strong { max-height: calc(100% - 76px); font-size: clamp(18px, 5.7vw, 27px); }
  .sh-vocab-actions { position: sticky; z-index: 12; bottom: calc(73px + env(safe-area-inset-bottom)); padding: 7px 0 3px; background: linear-gradient(180deg, rgba(246,241,231,0), #f6f1e7 30%); }
  .sh-vocab-choice, .sh-vocab-flip { min-height: 46px; }
  .sh-vocab-history { min-height: 28px; }
  .sh-vocab-search { padding: 12px; }
  .sh-vocab-search > div { grid-template-columns: 1fr; }
  .sh-vocab-search > div > svg { top: 14px; }
  .sh-vocab-search .sh-primary-button { min-height: 46px; }
  .sh-word-list article { grid-template-columns: 1fr; gap: 8px; padding: 14px; }
  .sh-word-list article > div { padding: 0 0 8px; border-left: 0; border-bottom: 1px solid #e4dccf; }
  .sh-vocab-stat-strip { grid-template-columns: repeat(3, 1fr); padding: 12px; gap: 5px; }
  .sh-vocab-stat-strip > div { min-height: 72px; padding: 5px 8px; text-align: center; }
  .sh-vocab-stat-strip > div:first-child { padding-right: 8px; }
  .sh-vocab-stat-strip > div:first-child > span { display: none; }
  .sh-vocab-stat-strip strong { font-size: 21px; }
  .sh-vocab-stat-strip small { font-size: 10px; }
  .sh-vocab-stat-strip button { grid-column: 1 / -1; justify-content: center; }
}

@media (max-width: 390px) {
  .sh-main { padding-inline: 13px; }
  .sh-hebrew-welcome h1 { font-size: 36px; }
  .sh-letter-art { width: 90px; }
  .sh-track-grid { grid-template-columns: 1fr; }
  .sh-track-card { min-height: 220px; }
  .sh-track-icon { margin-bottom: 15px; }
  .sh-vocab-heading h1 { font-size: 33px; }
  .sh-vocab-heading p:last-child { max-width: 245px; }
  .sh-vocab-card { height: 236px; min-height: 236px; }
  .sh-vocab-deck { min-height: 254px; }
  .sh-vocab-ghost { height: 236px; }
  .sh-vocab-actions { grid-template-columns: minmax(0,1fr) 94px minmax(0,1fr); gap: 5px; }
  .sh-vocab-choice { padding-inline: 6px; font-size: 12px; }
  .sh-vocab-flip { min-width: 94px; padding-inline: 7px; font-size: 11px; }
}