:root {
  /* hârtie & cerneală */
  --washi: #ece7da;
  --washi-card: #f8f5ee;
  --washi-card-raised: #fffdf8;
  --sumi: #211f1c;
  --sumi-soft: #6b6256;
  --border: #d9d0bb;
  --border-strong: #c2b89e;

  /* brand: indigo, folosit pentru tot ce e interactiv */
  --ai: #28425c;
  --ai-deep: #1a2d40;
  --ai-wash: #e1e7ec;

  /* semnătură: ștampila roșie — REZERVATĂ pentru mastery + streak */
  --shu: #bd3b22;
  --shu-deep: #932c19;
  --shu-wash: #f3ddd5;

  /* feedback exerciții (convențional, intenționat) */
  --correct: #3f7857;
  --correct-wash: #e1ebe3;
  --incorrect: #a8344a;
  --incorrect-wash: #f1dde1;

  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;
  --shadow-card: 0 1px 2px rgba(33,31,28,0.06), 0 1px 1px rgba(33,31,28,0.04);
  --shadow-raised: 0 6px 20px rgba(33,31,28,0.10);

  --font-display: 'Zen Old Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --font-body: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Yu Gothic', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@500;700&family=Zen+Kaku+Gothic+New:wght@400;500;700&family=JetBrains+Mono:wght@400;600&display=swap');

* { box-sizing: border-box; }
html { -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  background: var(--washi);
  background-image: radial-gradient(circle at 1px 1px, rgba(33,31,28,0.05) 1px, transparent 0);
  background-size: 22px 22px;
  color: var(--sumi);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  min-height: 100vh;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; margin: 0; line-height: 1.25; }
p { margin: 0; }
button { font-family: inherit; }
.romaji { font-family: var(--font-mono); letter-spacing: 0.02em; }
a { color: var(--ai); }

:focus-visible { outline: 2px solid var(--ai); outline-offset: 2px; border-radius: var(--radius-sm); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.app { max-width: 760px; margin: 0 auto; padding: 0 20px 64px; }

.app-header { display: flex; align-items: center; gap: 8px; padding: 22px 0 18px; position: sticky; top: 0; background: var(--washi); z-index: 10; }
.app-header__brand { margin-right: auto; }
.header-icon-btn { appearance: none; flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border); background: var(--washi-card); color: var(--sumi-soft); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; }
.header-icon-btn svg { width: 18px; height: 18px; }
.header-icon-btn:hover { color: var(--ai); border-color: var(--ai); }
#logout-btn:hover { color: var(--incorrect); border-color: var(--incorrect); }
.app-header__brand { display: flex; align-items: baseline; gap: 10px; }
.app-header__brand .jp { font-family: var(--font-display); font-size: 26px; color: var(--ai); }
.app-header__brand .ro { font-size: 13px; color: var(--sumi-soft); }

.streak-pill { display: flex; align-items: center; gap: 8px; background: var(--washi-card); border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px 6px 8px; cursor: pointer; }
.streak-pill .hanko-mini { width: 30px; height: 30px; }
.streak-pill__count { font-family: var(--font-mono); font-weight: 600; font-size: 14px; }

.btn { appearance: none; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 11px 20px; font-size: 15px; font-weight: 500; cursor: pointer; transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--ai); color: #fff; }
.btn--primary:hover { background: var(--ai-deep); }
.btn--ghost { background: transparent; border-color: var(--border-strong); color: var(--sumi); }
.btn--ghost:hover { border-color: var(--ai); color: var(--ai); }
.btn--block { width: 100%; display: block; text-align: center; }
.btn--back { background: transparent; border: none; color: var(--sumi-soft); font-size: 14px; padding: 8px 0; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.btn--back:hover { color: var(--ai); }

.card { background: var(--washi-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.hero { padding: 28px 26px; margin-bottom: 22px; }
.hero h1 { font-size: 24px; color: var(--ai); margin-bottom: 8px; }
.hero p { color: var(--sumi-soft); font-size: 15px; }

.section-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sumi-soft); margin: 28px 2px 12px; }
.phase-list { display: flex; flex-direction: column; gap: 12px; }
.phase-card { display: flex; gap: 16px; align-items: center; padding: 18px 20px; cursor: pointer; text-align: left; width: 100%; }
.phase-card__num { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--ai); color: var(--ai); font-family: var(--font-display); font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.phase-card__body { flex: 1; min-width: 0; }
.phase-card__title { font-size: 17px; font-weight: 700; font-family: var(--font-display); }
.phase-card__sub { font-size: 13px; color: var(--sumi-soft); margin-top: 2px; }
.progress-bar { height: 5px; background: var(--border); border-radius: 3px; margin-top: 10px; overflow: hidden; }
.progress-bar__fill { height: 100%; background: var(--ai); border-radius: 3px; transition: width 0.4s ease; }
.phase-card__stamp { flex: none; width: 40px; height: 40px; }

.hanko { display: inline-flex; align-items: center; justify-content: center; }
.hanko svg { width: 100%; height: 100%; }
.hanko--empty circle, .hanko--empty path { opacity: 0.18; }
.hanko--stamped circle, .hanko--stamped path { stroke: var(--shu); }
.hanko--stamped text { fill: var(--shu); }
@keyframes stampDown { 0% { transform: scale(2.2) rotate(-8deg); opacity: 0; } 55% { transform: scale(0.92) rotate(-8deg); opacity: 1; } 75% { transform: scale(1.06) rotate(-8deg); } 100% { transform: scale(1) rotate(-8deg); opacity: 1; } }
.hanko--animate { animation: stampDown 0.5s cubic-bezier(.2,.8,.3,1); }

.stampcard { padding: 20px; margin-top: 16px; }
.stampcard__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-top: 12px; }
.stampcard__day { aspect-ratio: 1; border: 1px dashed var(--border-strong); border-radius: 50%; display: flex; align-items: center; justify-content: center; }

.module-header { padding: 8px 0 20px; }
.module-header h2 { font-size: 22px; color: var(--ai); }
.module-header p { color: var(--sumi-soft); font-size: 14px; margin-top: 4px; }
.exercise-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.exercise-card { padding: 18px 16px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 6px; }
.exercise-card__title { font-weight: 700; font-size: 15px; }
.exercise-card__sub { font-size: 12.5px; color: var(--sumi-soft); }
.exercise-card__due { font-family: var(--font-mono); font-size: 11px; color: var(--shu); background: var(--shu-wash); border-radius: 999px; padding: 2px 9px; align-self: flex-start; }

.genkou-cell { position: relative; width: 168px; height: 168px; margin: 0 auto; background: var(--washi-card-raised); border: 1.5px solid var(--sumi);
  background-image: linear-gradient(to right, transparent 49.4%, var(--border-strong) 49.4%, var(--border-strong) 50.6%, transparent 50.6%), linear-gradient(to bottom, transparent 49.4%, var(--border-strong) 49.4%, var(--border-strong) 50.6%, transparent 50.6%); }
.genkou-cell--lg { width: 220px; height: 220px; }
.genkou-cell__char { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 110px; color: var(--sumi); user-select: none; }
.genkou-cell--lg .genkou-cell__char { font-size: 140px; }
.genkou-cell__char--guide { opacity: 0.16; }
.genkou-cell canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }

.flashcard-stage { padding: 10px 0 30px; text-align: center; }
.flashcard-progress { font-family: var(--font-mono); font-size: 13px; color: var(--sumi-soft); margin-bottom: 18px; }
.flashcard { margin: 0 auto; }
.flashcard__romaji { margin-top: 18px; font-size: 14px; color: var(--sumi-soft); min-height: 20px; }
.flashcard__reveal { margin-top: 14px; min-height: 70px; }
.flashcard__reveal .reading { font-family: var(--font-display); font-size: 20px; color: var(--ai); }
.flashcard__reveal .meaning { font-size: 15px; color: var(--sumi-soft); margin-top: 4px; }
.flashcard__reveal .example { font-size: 13px; color: var(--sumi-soft); margin-top: 10px; border-top: 1px dashed var(--border-strong); padding-top: 10px; }
.flashcard__actions { margin-top: 26px; display: flex; justify-content: center; gap: 12px; }
.rating-row { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.rating-btn { padding: 13px 8px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--washi-card-raised); cursor: pointer; font-size: 13.5px; font-weight: 500; }
.rating-btn--fail { color: var(--incorrect); }
.rating-btn--fail:hover { background: var(--incorrect-wash); border-color: var(--incorrect); }
.rating-btn--hard { color: var(--sumi); }
.rating-btn--hard:hover { background: var(--washi); }
.rating-btn--easy { color: var(--correct); }
.rating-btn--easy:hover { background: var(--correct-wash); border-color: var(--correct); }
.speak-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--washi-card-raised); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; margin-top: 14px; }
.speak-btn:hover { border-color: var(--ai); color: var(--ai); }

.selection-stage { padding: 10px 0 30px; text-align: center; }
.selection-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 420px; margin: 26px auto 0; }
.option-btn { padding: 16px 10px; border-radius: var(--radius); border: 1.5px solid var(--border-strong); background: var(--washi-card-raised); font-size: 17px; font-family: var(--font-display); cursor: pointer; }
.option-btn:hover { border-color: var(--ai); }
.option-btn--correct { border-color: var(--correct); background: var(--correct-wash); color: var(--correct); }
.option-btn--incorrect { border-color: var(--incorrect); background: var(--incorrect-wash); color: var(--incorrect); }
.option-btn:disabled { cursor: default; }

.matching-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 20px; }
.matching-col { display: flex; flex-direction: column; gap: 10px; }
.match-item { padding: 14px 12px; border-radius: var(--radius-sm); border: 1.5px solid var(--border-strong); background: var(--washi-card-raised); cursor: pointer; font-size: 15px; text-align: center; }
.match-item--jp { font-family: var(--font-display); font-size: 19px; }
.match-item--selected { border-color: var(--ai); background: var(--ai-wash); }
.match-item--matched { border-color: var(--correct); background: var(--correct-wash); color: var(--correct); cursor: default; opacity: 0.7; }
.match-item--wrong { border-color: var(--incorrect); background: var(--incorrect-wash); }

.writing-stage { padding: 10px 0 30px; text-align: center; }
.writing-controls { display: flex; justify-content: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.writing-meta { margin-top: 14px; font-size: 13px; color: var(--sumi-soft); }
.writing-meta .romaji { color: var(--ai); }
.principle-box { text-align: left; margin-top: 26px; padding: 16px 18px; font-size: 13px; color: var(--sumi-soft); }
.principle-box strong { color: var(--sumi); }
.principle-box ol { margin: 8px 0 0; padding-left: 18px; }
.principle-box li { margin-bottom: 4px; }

.session-summary { text-align: center; padding: 40px 20px; }
.session-summary .hanko { width: 76px; height: 76px; margin: 0 auto 18px; }
.session-summary h2 { font-size: 21px; }
.session-summary p { color: var(--sumi-soft); margin-top: 8px; }
.session-summary .stats { display: flex; justify-content: center; gap: 28px; margin: 22px 0; }
.session-summary .stat-num { font-family: var(--font-mono); font-size: 22px; font-weight: 600; color: var(--ai); }
.session-summary .stat-label { font-size: 12px; color: var(--sumi-soft); }

.empty-state { text-align: center; padding: 50px 20px; color: var(--sumi-soft); }
.empty-state .hanko { width: 48px; height: 48px; margin: 0 auto 14px; opacity: 0.5; }

/* ——— tastare ——— */
.typing-stage { padding: 10px 0 30px; text-align: center; }
.typing-hint { margin-top: 16px; font-size: 14px; color: var(--sumi-soft); }
.typing-form { display: flex; gap: 10px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.typing-input { padding: 12px 16px; font-size: 17px; border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--washi-card-raised); width: min(280px, 70vw); text-align: center; }
.typing-input:focus { border-color: var(--ai); outline: none; }
.typing-input--correct { border-color: var(--correct); background: var(--correct-wash); }
.typing-input--incorrect { border-color: var(--incorrect); background: var(--incorrect-wash); }
.typing-feedback { margin-top: 16px; min-height: 30px; font-size: 15px; }
.typing-feedback--ok { color: var(--correct); font-weight: 500; }
.typing-feedback--bad { color: var(--incorrect); font-weight: 500; }
.typing-feedback .speak-btn { margin: 0 0 0 10px; width: 34px; height: 34px; vertical-align: middle; }
.genkou-cell--word { width: auto; min-width: 168px; max-width: 100%; padding: 0 18px; }
.genkou-cell--word .genkou-cell__char { position: static; display: flex; height: 168px; font-size: clamp(34px, 8vw, 64px); white-space: nowrap; }

/* ——— ascultare ——— */
.listen-big { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0 auto; padding: 28px 44px; cursor: pointer; border: 1.5px solid var(--border-strong); }
.listen-big:hover { border-color: var(--ai); }
.listen-big__icon { font-size: 40px; }
.listen-big__label { font-size: 13px; color: var(--sumi-soft); }
.option-btn--text { font-family: var(--font-body); font-size: 15px; }
.option-btn--chosen { border-color: var(--ai); background: var(--ai-wash); }
.selection-options--wide { grid-template-columns: 1fr 1fr; max-width: 560px; }
.jp-inline { font-family: var(--font-display); font-size: 17px; color: var(--ai); }

/* ——— quiz ——— */
.quiz-stage { padding: 10px 0 30px; text-align: center; }
.quiz-question { padding: 22px 20px; max-width: 560px; margin: 0 auto; }
.quiz-question__jp { font-family: var(--font-display); font-size: 22px; line-height: 1.7; }
.quiz-why { max-width: 560px; margin: 16px auto 0; padding: 14px 18px; font-size: 13.5px; color: var(--sumi-soft); text-align: left; border-left: 3px solid var(--ai); }

/* ——— lecții (gramatică / citire) ——— */
.lesson-list { display: flex; flex-direction: column; gap: 8px; }
.lesson-item { display: flex; align-items: center; gap: 12px; padding: 13px 16px; text-decoration: none; color: var(--sumi); font-size: 14.5px; }
.lesson-item:hover { border-color: var(--ai); }
.lesson-item--read { opacity: 0.75; }
.lesson-item__check { flex: none; width: 22px; height: 22px; border: 1.5px solid var(--border-strong); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--correct); }
.lesson-item--read .lesson-item__check { border-color: var(--correct); background: var(--correct-wash); }
.lesson-item__title { flex: 1; }
.lesson-item__score { font-family: var(--font-mono); font-size: 12px; color: var(--sumi-soft); }
.lesson-item__score--full { color: var(--correct); }
.lesson { padding: 24px 22px; }
.lesson__group { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sumi-soft); margin-bottom: 8px; }
.lesson h2 { font-size: 20px; color: var(--ai); }
.lesson__structure { margin-top: 10px; padding: 10px 14px; background: var(--ai-wash); border-radius: var(--radius-sm); font-size: 14px; color: var(--ai-deep); }
.lesson__explanation { margin-top: 14px; font-size: 15px; }
.lesson__examples { margin-top: 18px; display: flex; flex-direction: column; gap: 14px; }
.example-row { display: flex; gap: 12px; align-items: flex-start; border-top: 1px dashed var(--border-strong); padding-top: 14px; text-align: left; }
.example-row .speak-btn { margin-top: 2px; flex: none; }
.speak-btn--sm { width: 34px; height: 34px; margin-top: 0; }
.example-row__jp { font-family: var(--font-display); font-size: 18px; }
.example-row__romaji { font-size: 12.5px; color: var(--ai); margin-top: 2px; }
.example-row__ro { font-size: 13.5px; color: var(--sumi-soft); margin-top: 2px; }
.lesson .btn--block { margin-top: 22px; }
.lesson-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.lesson-nav .btn { font-size: 13px; max-width: 48%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }

/* ——— citire ——— */
.passage { padding: 20px 22px; margin-bottom: 16px; }
.passage__toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.passage__jp { font-family: var(--font-display); font-size: 18px; line-height: 2; }
.passage__romaji { margin-top: 12px; font-size: 13px; color: var(--sumi-soft); border-top: 1px dashed var(--border-strong); padding-top: 12px; }
.passage--exam { margin-top: 10px; }
.quiz-question + .selection-options, .passage + .quiz-question { margin-top: 16px; }
.selection-options { margin-top: 18px; margin-left: auto; margin-right: auto; }

/* ——— pregătire N5 (dashboard) ——— */
.readiness { padding: 20px 22px; margin-bottom: 6px; }
.readiness__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.readiness__overall { font-family: var(--font-mono); font-size: 22px; font-weight: 600; color: var(--ai); }
.readiness__row { display: grid; grid-template-columns: 150px 1fr 44px; gap: 12px; align-items: center; margin-bottom: 8px; }
.readiness__label { font-size: 13px; color: var(--sumi-soft); }
.readiness__row .progress-bar { margin-top: 0; }
.readiness__pct { font-size: 12px; text-align: right; color: var(--sumi); }
.readiness__exam { margin-top: 12px; font-size: 13px; color: var(--sumi-soft); border-top: 1px dashed var(--border-strong); padding-top: 12px; }
.exercise-card { text-decoration: none; color: var(--sumi); }

/* ——— examen ——— */
.exam-intro { padding: 22px; }
.exam-intro ol { margin: 0 0 14px; padding-left: 20px; }
.exam-intro li { margin-bottom: 6px; }
.exam-intro p { font-size: 14px; color: var(--sumi-soft); margin-bottom: 10px; }
.exam-intro .btn { margin-top: 8px; }
.exam-history { padding: 20px 22px; margin-top: 16px; }
.exam-history h3 { margin-bottom: 10px; }
.exam-history__empty { font-size: 13.5px; color: var(--sumi-soft); }
.exam-history__table { width: 100%; border-collapse: collapse; font-size: 13px; }
.exam-history__table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sumi-soft); padding: 6px 8px 6px 0; border-bottom: 1px solid var(--border); }
.exam-history__table td { padding: 7px 8px 7px 0; border-bottom: 1px dashed var(--border); }
.exam-pass { font-family: var(--font-display); color: var(--shu); font-weight: 700; }
.exam-fail { color: var(--incorrect); }
.exam-pass-text { color: var(--correct); font-weight: 500; }
.exam-topbar { display: flex; justify-content: space-between; align-items: center; padding: 6px 0 14px; }
.exam-topbar__section { font-size: 13px; font-weight: 500; color: var(--sumi-soft); }
.exam-timer { font-size: 16px; font-weight: 600; color: var(--ai); background: var(--ai-wash); border-radius: var(--radius-sm); padding: 4px 12px; }
.exam-timer--low { color: var(--incorrect); background: var(--incorrect-wash); }
.exam-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 22px; }
.exam-review { display: flex; flex-direction: column; gap: 10px; }
.exam-review__item { padding: 16px 18px; }
.exam-review__prompt { font-family: var(--font-display); font-size: 16px; margin-bottom: 8px; }
.exam-review__yours, .exam-review__correct { font-size: 13.5px; }
.exam-review__why { font-size: 13px; color: var(--sumi-soft); margin-top: 6px; border-top: 1px dashed var(--border-strong); padding-top: 6px; }

/* ——— dashboard: hero cu inel de progres ——— */
.hero-row { display: flex; align-items: center; gap: 22px; padding: 24px 26px; margin-bottom: 14px; }
.hero-row__main { flex: 1; min-width: 0; }
.hero-row h1 { font-size: 22px; color: var(--sumi); }
.hero-row__jp { color: var(--ai); }
.hero-row p { color: var(--sumi-soft); font-size: 14px; margin-top: 6px; }
.hero-streak { display: flex; gap: 10px; margin-top: 14px; }
.hero-streak__col { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.hero-streak__day { width: 44px; height: 44px; border: 1px dashed var(--border-strong); border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 3px; }
.hero-streak__day .hanko { width: 100%; height: 100%; }
.hero-streak__label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sumi-soft); }
.hero-row__ring { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ring { width: 84px; height: 84px; display: block; }
.ring__track { stroke: var(--border); }
.ring__fill { stroke: var(--ai); transition: stroke-dashoffset 0.6s ease; }
.ring__text { font-family: var(--font-mono); font-size: 17px; font-weight: 600; fill: var(--ai); }
.hero-row__ring-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--sumi-soft); }

/* ——— dashboard: cardul „recomandat acum" ——— */
.action-card { display: flex; align-items: center; justify-content: space-between; gap: 18px; background: var(--ai); color: #fff; border-radius: var(--radius); padding: 20px 24px; text-decoration: none; box-shadow: var(--shadow-card); transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; }
.action-card:hover { background: var(--ai-deep); transform: translateY(-1px); box-shadow: var(--shadow-raised); }
.action-card:active { transform: translateY(0); }
.action-card__body { min-width: 0; }
.action-card__label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.75; }
.action-card__title { display: block; font-family: var(--font-display); font-weight: 700; font-size: 19px; margin-top: 4px; line-height: 1.35; }
.action-card__sub { display: block; font-size: 13px; opacity: 0.82; margin-top: 4px; }
.action-card__cta { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 500; border: 1px solid rgba(255,255,255,0.4); background: rgba(255,255,255,0.12); white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; }
.action-card:hover .action-card__cta { background: #fff; color: var(--ai); }
.action-card__arrow svg { width: 16px; height: 16px; display: block; }

/* ——— dashboard: grila de module ——— */
.module-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.module-card { display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 14px; text-align: left; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; }
.module-card:hover { border-color: var(--ai); transform: translateY(-2px); box-shadow: var(--shadow-raised); }
.module-card:active { transform: translateY(0) scale(0.99); }
.module-card__top { display: flex; align-items: center; gap: 10px; }
.module-card__num { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--ai); color: var(--ai); font-family: var(--font-display); font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.module-card__title { font-family: var(--font-display); font-weight: 700; font-size: 15.5px; flex: 1; min-width: 0; }
.module-card__due { flex: none; font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; color: var(--shu); background: var(--shu-wash); border-radius: 999px; padding: 2px 9px; }
.module-card__stamp { width: 30px; height: 30px; flex: none; }
.module-card__stamp .hanko { width: 100%; height: 100%; }
.module-card__sub { font-size: 12.5px; color: var(--sumi-soft); }
.module-card__meta { display: flex; align-items: center; gap: 10px; }
.module-card__meta .progress-bar { flex: 1; margin-top: 0; }
.module-card__pct { font-size: 11px; color: var(--sumi-soft); flex: none; }

/* ——— dashboard: carduri de secțiune cu iconițe ——— */
.section-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.section-card { position: relative; display: flex; gap: 14px; align-items: center; padding: 16px; text-decoration: none; color: var(--sumi); transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; }
.section-card:hover { border-color: var(--ai); transform: translateY(-2px); box-shadow: var(--shadow-raised); }
.section-card:active { transform: translateY(0) scale(0.99); }
.section-card__icon { flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--ai-wash); color: var(--ai); display: flex; align-items: center; justify-content: center; }
.section-card__icon svg { width: 21px; height: 21px; }
.section-card__body { min-width: 0; }
.section-card__title { display: block; font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.section-card__sub { display: block; font-size: 12.5px; color: var(--sumi-soft); margin-top: 2px; }
.section-card__badge { position: absolute; top: 12px; right: 12px; background: var(--shu); color: #fff; font-family: var(--font-mono); font-size: 11px; font-weight: 600; border-radius: 999px; min-width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; }

.readiness__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 26px; }
.readiness { margin-top: 26px; }

@media (max-width: 640px) {
  .module-grid, .section-grid, .readiness__grid, .achievement-grid { grid-template-columns: 1fr; }
  .action-card { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  .hero-row { padding: 18px; gap: 14px; }
  .hero-row h1 { font-size: 18px; }
  .ring { width: 68px; height: 68px; }
  .hero-streak__day { width: 36px; height: 36px; }
  .hero-streak { gap: 7px; }
  .app-header__brand .ro { display: none; }
  .app-header__brand .jp { font-size: 20px; white-space: nowrap; }
  .header-profile__name { display: none; }
  .header-profile { padding: 2px 6px 2px 4px; }
  .header-icon-btn { width: 34px; height: 34px; }
}

/* ——— plan de studiu ——— */
.plan-note { padding: 16px 20px; margin-bottom: 16px; font-size: 14px; color: var(--sumi-soft); }
.plan-week { padding: 18px 20px; margin-bottom: 14px; position: relative; }
.plan-week--current { border-color: var(--ai); box-shadow: 0 0 0 1px var(--ai), var(--shadow-card); }
.plan-week--done { opacity: 0.72; }
.plan-week__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.plan-week__head h3 { font-size: 16px; }
.plan-week--done .plan-week__head h3::after { content: ' ✓'; color: var(--correct); }
.plan-week__count { font-size: 12px; color: var(--sumi-soft); flex: none; }
.plan-week__badge { display: inline-block; margin-top: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ai); background: var(--ai-wash); border-radius: 999px; padding: 2px 10px; }
.plan-week__focus { font-size: 13px; color: var(--sumi-soft); margin-top: 8px; }
.plan-goals { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.plan-goal { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px dashed var(--border); }
.plan-goal__label { display: flex; gap: 10px; align-items: baseline; font-size: 14px; cursor: pointer; }
.plan-goal__label input { accent-color: var(--ai); width: 16px; height: 16px; flex: none; transform: translateY(2px); cursor: pointer; }
.plan-goal--done .plan-goal__label span { text-decoration: line-through; color: var(--sumi-soft); }
.plan-goal__link { flex: none; font-size: 12.5px; white-space: nowrap; }

/* ——— profil & login ——— */
:root {
  --sakura: #c76b8a;
  --sakura-deep: #a3506d;
  --sakura-wash: #f5e1e8;
}

.login-mode { padding-top: 10vh; }

.login-screen { text-align: center; animation: fadeSlideUp 0.5s ease; }
.login-screen__deco { font-family: var(--font-display); font-size: 56px; color: var(--ai); opacity: 0.15; margin-bottom: -10px; user-select: none; }
.login-screen__title { font-size: 26px; color: var(--ai); margin-bottom: 6px; }
.login-screen__sub { font-size: 14px; color: var(--sumi-soft); margin-bottom: 32px; }

.login-profiles { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 420px; margin: 0 auto; }

.login-profile-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 32px 16px; border-radius: var(--radius-lg); border: 2px solid var(--border); background: var(--washi-card); cursor: pointer; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; position: relative; }
.login-profile-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-raised); }
.login-profile-card--selected { border-color: var(--ai); box-shadow: 0 0 0 2px var(--ai-wash), var(--shadow-raised); transform: translateY(-3px); }
.login-profile-card--sakura.login-profile-card--selected { border-color: var(--sakura); box-shadow: 0 0 0 2px var(--sakura-wash), var(--shadow-raised); }

.login-profile-card__avatar { font-size: 52px; line-height: 1; }
.login-profile-card__name { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--sumi); }
.login-profile-card__tag { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; background: var(--ai-wash); color: var(--ai); border-radius: 999px; padding: 2px 10px; }
.login-profile-card--sakura .login-profile-card__tag { background: var(--sakura-wash); color: var(--sakura); }
.login-profile-card__badge { position: absolute; top: 12px; right: 12px; background: var(--shu); color: #fff; font-size: 12px; font-weight: 700; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); }

.login-form { max-width: 380px; margin: 28px auto 0; padding: 24px; text-align: left; animation: fadeSlideUp 0.35s ease; }
.login-form h3 { font-size: 18px; margin-bottom: 6px; color: var(--ai); }
.login-form__hint { font-size: 13px; color: var(--sumi-soft); margin-bottom: 18px; }
.login-form__error { font-size: 13px; color: var(--incorrect); margin-bottom: 10px; }

.login-field { margin-bottom: 14px; }
.login-field label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sumi-soft); margin-bottom: 5px; }
.login-field__input-wrap { display: flex; gap: 0; }
.login-field__input-wrap input { flex: 1; padding: 11px 14px; font-size: 15px; border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm) 0 0 var(--radius-sm); background: var(--washi-card-raised); }
.login-field__input-wrap input:focus { border-color: var(--ai); outline: none; }
.login-field__toggle { padding: 0 14px; border: 1.5px solid var(--border-strong); border-left: none; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--washi); cursor: pointer; font-size: 16px; }
.login-field__toggle:hover { background: var(--ai-wash); }

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes loginShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
.btn--forgot-password {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  color: var(--sumi-soft);
  font-size: 13px;
  text-decoration: underline;
  margin-top: 14px;
  cursor: pointer;
  text-align: center;
  transition: color 0.15s ease;
}
.btn--forgot-password:hover {
  color: var(--ai);
}

/* ——— header profile ——— */
.header-profile { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; background: var(--ai-wash); border-radius: 999px; padding: 2px 10px 2px 4px; margin-left: 8px; }
.header-profile--sakura { background: var(--sakura-wash); }
.header-profile__avatar { font-size: 16px; }
.header-profile__name { font-weight: 500; color: var(--ai); }
.header-profile--sakura .header-profile__name { color: var(--sakura); }
.btn--settings { appearance: none; border: 1px solid var(--border-strong); background: var(--washi-card); border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px; margin-left: auto; margin-right: 6px; transition: border-color 0.15s ease, background 0.15s ease; }
.btn--settings:hover { border-color: var(--ai); background: var(--ai-wash); }

.btn--logout { appearance: none; border: 1px solid var(--border-strong); background: var(--washi-card); border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px; margin-left: 0; margin-right: 10px; transition: border-color 0.15s ease; }
.btn--logout:hover { border-color: var(--incorrect); background: var(--incorrect-wash); }

/* ——— partner comparison ——— */
.partner-header { padding: 20px 22px; margin-bottom: 8px; }
.partner-header h2 { font-size: 20px; color: var(--ai); display: flex; align-items: center; gap: 8px; }
.partner-header h2 svg { width: 20px; height: 20px; flex-shrink: 0; }
.partner-header p { font-size: 14px; color: var(--sumi-soft); margin-top: 4px; }

.compare-legend { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 16px 0; font-size: 15px; }
.compare-legend__item { font-weight: 600; font-family: var(--font-display); }
.compare-legend__item--me { color: var(--ai); }
.compare-legend__item--partner { color: var(--sakura); }
.compare-legend__vs { color: var(--sumi-soft); font-size: 13px; }

.compare-stats { padding: 20px 22px; margin-bottom: 14px; }
.compare-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.compare-stat { text-align: center; }
.compare-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
.compare-stat__label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sumi-soft); margin-bottom: 4px; }
.compare-stat__values { display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.compare-stat__me { font-family: var(--font-mono); font-size: 18px; font-weight: 600; color: var(--ai); }
.compare-stat__partner { font-family: var(--font-mono); font-size: 18px; font-weight: 600; color: var(--sakura); }
.compare-stat__vs { font-size: 12px; color: var(--sumi-soft); }

.compare-modules { padding: 16px 22px; }
.compare-row { margin-bottom: 16px; }
.compare-row:last-child { margin-bottom: 0; }
.compare-row__label { display: block; font-size: 13px; color: var(--sumi-soft); margin-bottom: 6px; }
.compare-row__bars { display: flex; flex-direction: column; gap: 4px; }
.compare-bar { position: relative; height: 18px; background: var(--border); border-radius: 9px; overflow: hidden; }
.compare-bar__fill { height: 100%; border-radius: 9px; transition: width 0.5s ease; }
.compare-bar__fill--me { background: var(--ai); }
.compare-bar__fill--partner { background: var(--sakura); }
.compare-bar__num { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--sumi); }

/* ——— mesaje ——— */
.messages-header { padding: 18px 22px; margin-bottom: 8px; }
.messages-header h2 { font-size: 18px; color: var(--ai); }

.messages-list { padding: 18px 16px; max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.messages-empty { text-align: center; padding: 30px 10px; color: var(--sumi-soft); font-size: 14px; }
.messages-empty p:first-child { font-size: 15px; margin-bottom: 4px; }

.msg { display: flex; }
.msg--mine { justify-content: flex-end; }
.msg--theirs { justify-content: flex-start; }

.msg__bubble { max-width: 75%; padding: 10px 14px; border-radius: var(--radius); font-size: 14px; line-height: 1.5; position: relative; }
.msg__bubble--mine { background: var(--ai); color: #fff; border-bottom-right-radius: 4px; }
.msg__bubble--theirs { background: var(--washi-card-raised); border: 1px solid var(--border); border-bottom-left-radius: 4px; color: var(--sumi); }
.msg__time { display: block; font-size: 10px; opacity: 0.6; margin-top: 4px; text-align: right; }

.messages-input { padding: 14px 16px; margin-top: 8px; }
.messages-input__row { display: flex; gap: 8px; }
.messages-input__field { flex: 1; padding: 11px 14px; font-size: 14px; border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--washi-card-raised); }
.messages-input__field:focus { border-color: var(--ai); outline: none; }

.exercise-card--partner { border-left: 3px solid var(--sakura); }
.exercise-card--messages { border-left: 3px solid var(--ai); position: relative; }
.exercise-card__badge { position: absolute; top: 10px; right: 10px; background: var(--shu); color: #fff; font-size: 12px; font-weight: 700; min-width: 22px; height: 22px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 6px; font-family: var(--font-mono); }

.login-forgot-info {
  margin-top: 14px;
  font-size: 13px;
  color: var(--sumi-soft);
  text-align: center;
  line-height: 1.4;
}

.partner-security {
  padding: 20px 22px;
  margin-bottom: 24px;
}
.partner-security__hint {
  font-size: 13.5px;
  color: var(--sumi-soft);
  margin-bottom: 14px;
  line-height: 1.5;
}
.partner-security__action {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.partner-security__status {
  font-weight: 700;
  color: var(--correct);
  font-size: 14px;
  margin-bottom: 8px;
}

/* ——— achievements / realizări ——— */
.achievement-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.achievement-card {
  padding: 16px 18px;
  border-left: 3px solid var(--border);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.achievement-card:not(.achievement-card--locked):hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-raised);
}

.achievement-card__head { display: flex; align-items: center; gap: 12px; }
.achievement-card__icon {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-family: var(--font-display);
  background: var(--border); color: var(--sumi-soft);
}
.achievement-card__info { flex: 1; min-width: 0; }
.achievement-card__title { display: block; font-family: var(--font-display); font-weight: 700; font-size: 14.5px; }
.achievement-card__desc { display: block; font-size: 12px; color: var(--sumi-soft); margin-top: 1px; }
.achievement-card__tier { flex: none; font-size: 20px; line-height: 1; }

.achievement-card__progress { margin-top: 10px; display: flex; align-items: center; gap: 10px; }
.achievement-card__bar { flex: 1; height: 5px; background: var(--border); border-radius: 3px; overflow: hidden; }
.achievement-card__bar-fill { height: 100%; border-radius: 3px; transition: width 0.5s ease; background: var(--border-strong); }
.achievement-card__label { flex: none; font-size: 11px; color: var(--sumi-soft); white-space: nowrap; }

.achievement-card__dots { display: flex; gap: 5px; margin-top: 8px; }
.tier-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--border); border: 1px solid var(--border-strong);
  transition: background 0.3s ease, border-color 0.3s ease;
}
.tier-dot--active.tier-dot--bronze { background: #b87333; border-color: #b87333; }
.tier-dot--active.tier-dot--silver { background: #7d8590; border-color: #7d8590; }
.tier-dot--active.tier-dot--gold   { background: #c5962c; border-color: #c5962c; }

/* Locked */
.achievement-card--locked { opacity: 0.5; }
.achievement-card--locked .achievement-card__icon { background: var(--border); color: var(--sumi-soft); }

/* Bronze */
.achievement-card--bronze { border-left-color: #b87333; }
.achievement-card--bronze .achievement-card__icon { background: #f0e0cc; color: #8b5a2b; }
.achievement-card--bronze .achievement-card__bar-fill { background: #b87333; }

/* Silver */
.achievement-card--silver { border-left-color: #7d8590; }
.achievement-card--silver .achievement-card__icon { background: #e6e8eb; color: #4a4f57; }
.achievement-card--silver .achievement-card__bar-fill { background: #7d8590; }

/* Gold */
.achievement-card--gold { border-left-color: #c5962c; }
.achievement-card--gold .achievement-card__icon { background: #f7efd4; color: #8b6914; }
.achievement-card--gold .achievement-card__bar-fill { background: #c5962c; }

.dashboard-settings-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.dashboard-settings-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.dashboard-settings-col--divider {
  border-left: 1px dashed var(--border-strong);
  padding-left: 24px;
}
.btn--sm {
  padding: 8px 12px;
  font-size: 13.5px;
}

@media (max-width: 480px) {
  .dashboard-settings-row {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .dashboard-settings-col--divider {
    border-left: none;
    padding-left: 0;
    border-top: 1px dashed var(--border-strong);
    padding-top: 20px;
  }
  .readiness__row { grid-template-columns: 110px 1fr 40px; gap: 8px; }
  .selection-options--wide { grid-template-columns: 1fr; }
  .lesson-nav .btn { max-width: 100%; flex: 1; }
  .login-profiles { grid-template-columns: 1fr 1fr; gap: 12px; }
  .login-profile-card { padding: 24px 12px; }
  .login-profile-card__avatar { font-size: 40px; }
  .login-profile-card__name { font-size: 18px; }
  .compare-stat-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .app { padding: 0 14px 48px; }
  .genkou-cell { width: 140px; height: 140px; }
  .genkou-cell__char { font-size: 90px; }
  .genkou-cell--lg { width: 180px; height: 180px; }
  .genkou-cell--lg .genkou-cell__char { font-size: 112px; }
  .exercise-picker { grid-template-columns: 1fr; }
  .selection-options { grid-template-columns: 1fr 1fr; gap: 10px; }
  .option-btn { font-size: 15px; padding: 14px 6px; }
}