/* Nivo — палітра: чотири щаблі впевненості у категорії. Тема одна — темна. */
:root{
  color-scheme: dark;

  /* нейтральна шкала — примітиви; решта CSS звертається лише до семантичних
     токенів нижче, а не до --gray-* напряму (виняток — де колір навмисно
     «випадає» з ролі, напр. темний текст на кольоровому чіпі) */
  --gray-900:    #1c1c1e;
  --gray-800:    #2c2c2e;
  --gray-700:    #3a3a3c;
  --gray-400:    #8e8e93;
  --gray-200:    #d1d1d6;

  --bg:          var(--gray-900);
  --surface:     var(--gray-800);
  --border:      var(--gray-700);
  --text-muted:  var(--gray-400);
  --text:        var(--gray-200);

  --red:         #ff4245;
  --orange:      #ff9230;
  --yellow:      #ffd600;
  --green:       #30d158;
  --mint:        #00dac3;
  --teal:        #00d2e0;
  --cyan:        #3cd3fe;
  --blue:        #0091ff;
  --indigo:      #6d7cff;
  --purple:      #db34f2;
  --pink:        #ff375f;
  --brown:       #b78a66;

  --ok:          var(--green);
  --no:          var(--red);

  /* насиченіші варіанти для тексту, коли фонового кольору недостатньо для контрасту */
  --green-fg:    var(--green);
  --ok-fg:       var(--ok);
  --no-fg:       #d97070;

  /* Кольоровий код рівнів CEFR — одне джерело правди для бейджа, аватара,
     святкування підвищення й салюту. Кожен щабель — свій колір системної
     палітри: A1 orange, A2 yellow, B1 green, B2 cyan, C1 blue, C2 indigo. */
  --lvl-a1: var(--orange);  --lvl-a1-rgb: 255,141,40;
  --lvl-a2: var(--yellow);  --lvl-a2-rgb: 255,204,0;
  --lvl-b1: var(--green);   --lvl-b1-rgb: 52,199,89;
  --lvl-b2: var(--cyan);    --lvl-b2-rgb: 0,192,232;
  --lvl-c1: var(--blue);    --lvl-c1-rgb: 0,136,255;
  --lvl-c2: var(--indigo);  --lvl-c2-rgb: 97,85,245;

  --r: 24px;
  --shell: 1080px;
}

/* Будь-який елемент із data-level дістає колір свого щабля у --level-color
   (і той самий колір у RGB — у --level-rgb, для rgba() з прозорістю). */
[data-level="A1"]{--level-color:var(--lvl-a1); --level-rgb:var(--lvl-a1-rgb)}
[data-level="A2"]{--level-color:var(--lvl-a2); --level-rgb:var(--lvl-a2-rgb)}
[data-level="B1"]{--level-color:var(--lvl-b1); --level-rgb:var(--lvl-b1-rgb)}
[data-level="B2"]{--level-color:var(--lvl-b2); --level-rgb:var(--lvl-b2-rgb)}
[data-level="C1"]{--level-color:var(--lvl-c1); --level-rgb:var(--lvl-c1-rgb)}
[data-level="C2"]{--level-color:var(--lvl-c2); --level-rgb:var(--lvl-c2-rgb)}

*{box-sizing:border-box;margin:0;padding:0}

/* Резервуємо місце під вертикальний скролбар завжди — інакше поява/зникнення
   смуги між екранами (короткий екран → без смуги, довгий → зі смугою) зсуває
   всю компоновку по горизонталі. */
html{scrollbar-gutter:stable}

button{
  appearance:none; -webkit-appearance:none;
  font:inherit; color:inherit; background:none; border:0;
  touch-action:manipulation;   /* без 300мс паузи й дабл-тап зуму на тачскрині */
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:'IBM Plex Sans',system-ui,sans-serif;
  font-size:16px;
  line-height:24px;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

/* ——— скролбар ——— */
*{scrollbar-width:thin; scrollbar-color:var(--border) transparent}
::-webkit-scrollbar{width:12px; height:12px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border); border-radius:99px; border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}
::-webkit-scrollbar-corner{background:transparent}

.screen{display:none; position:relative; z-index:1}
.screen.active{display:block}

.shell{max-width:var(--shell); margin:0 auto; padding:24px 24px 24px 24px}
.shell.narrow{max-width:660px}

/* ——— типографіка ——— */
h1,h2,h3{font-family:'Unbounded',sans-serif; font-weight:700; letter-spacing:-.02em}
.mono{font-family:'IBM Plex Sans',sans-serif; font-size:12px; letter-spacing:.06em; text-transform:uppercase}
.eyebrow{font-family:'IBM Plex Sans',sans-serif; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--green-fg); margin-bottom:16px}
.note{font-size:12px; color:var(--text-muted); margin-bottom:8px}
.note.dim{font-size:14px}

/* ——— логотип ——— */
.mark{text-align:center; padding:56px 0 36px}
.mark-glyph{width:64px; height:64px; vertical-align:middle}
.wordmark{font-size:clamp(36px,7vw,56px); font-weight:900; line-height:60px; margin:8px 0}
.tagline{color:var(--text-muted); font-size:16px}

/* ——— панелі ——— */
.panel{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:24px;
  display:flex; flex-direction:column; gap:24px;
}
.panel > .field{margin-bottom:0}
.panel > .link-btn{margin-top:0; margin-bottom:0}
.panel > .note{margin-bottom:0}
.panel > .note:empty{display:none}

/* ——— segmented control (iOS) ——— */
.segmented{
  position:relative;
  display:grid; grid-template-columns:1fr 1fr;
  padding:2px;
  background:var(--bg);
  border-radius:10px;
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',sans-serif;
  isolation:isolate;
}
.seg-thumb{
  position:absolute; z-index:0;
  top:2px; left:2px;
  width:calc(50% - 2px); height:calc(100% - 4px);
  background:var(--border);
  border-radius:8px;
  box-shadow:0 1px 3px rgba(0,0,0,.45), 0 0 0 .5px rgba(0,0,0,.25);
  transition:transform .25s cubic-bezier(.4,0,.2,1);
}
.segmented:has(.seg:last-of-type.active) .seg-thumb{transform:translateX(100%)}
.seg{
  position:relative; z-index:1;
  background:none; border:0; cursor:pointer;
  padding:7px 12px; min-height:34px;
  font-size:14px; font-weight:500; letter-spacing:-.01em;
  color:color-mix(in srgb, var(--text-muted), var(--text) 26%);
  transition:color .2s ease;
}
.seg.active{color:var(--text); font-weight:600}
.seg:focus-visible{outline:2px solid var(--green); outline-offset:2px; border-radius:8px}

/* ——— текстові поля: стиль iOS ——— */
.field{display:block; margin-bottom:16px}
.field span{
  display:block;
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',sans-serif;
  font-size:13px; font-weight:400; letter-spacing:-.01em;
  color:var(--text-muted); margin:0 0 6px 4px;
}
.field input{
  width:100%;
  -webkit-appearance:none; appearance:none;
  background:var(--bg);
  border:1px solid transparent;
  border-radius:12px;
  color:var(--text);
  caret-color:var(--green);
  padding:13px 14px; min-height:46px;
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',sans-serif;
  font-size:17px; letter-spacing:-.01em; line-height:24px;
  transition:border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.field input::placeholder{color:var(--text-muted); opacity:.55}
.field input:hover{background:var(--border)}
.field input:focus{
  outline:none;
  background:var(--bg);
  border-color:var(--green);
  box-shadow:0 0 0 4px rgba(52,199,89,.15);
}
.field input:-webkit-autofill,
.field input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--text);
  -webkit-box-shadow:0 0 0 100px var(--bg) inset;
  caret-color:var(--text);
}

/* ——— кнопки ——— */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; border-radius:var(--r);
  font-family:'IBM Plex Sans',sans-serif; font-weight:600; font-size:16px;
  padding:12px 24px; line-height:20px; border:1px solid transparent; transition:.15s;
}
.btn:focus-visible{outline:2px solid var(--green); outline-offset:2px}
.btn.primary{background:var(--green); color:var(--gray-900); width:100%}
.btn.primary:hover{background:#30d158}
.btn.primary.big{width:auto}
.btn.ghost{background:none; border-color:var(--border); color:var(--text-muted); width:100%}
.btn.ghost:hover{color:var(--text); border-color:var(--text-muted)}
.btn.small{width:auto; padding:8px 16px; font-size:12px; margin:0}

.link-btn{
  display:block; width:100%; text-align:center;
  cursor:pointer; padding:0;
  font-size:14px; color:var(--text-muted); text-decoration:underline;
}
.link-btn:hover{color:var(--text)}

/* ——— верхня панель ——— */
.topbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 16px; border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:10; background:var(--bg);
}
.brand-sm{display:flex; align-items:center; font-family:'Unbounded',sans-serif; font-weight:700; font-size:16px}
.brand-sm .mark-glyph{width:24px; height:24px; margin-right:4px}
.topbar-right{display:flex; align-items:center; gap:16px}
.who{font-family:'IBM Plex Sans',sans-serif; font-size:14px; color:var(--text-muted); word-break:break-all}

/* ——— аватар і дропдаун ——— */
.avatar-menu{position:relative}
.avatar-btn{
  position:relative;
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  background:var(--border); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-family:'Unbounded',sans-serif; font-weight:700; font-size:13px;
  /* Літера фарбується в колір рівня власника — data-level ставить #avatar-btn
     (renderLevelBadge у app.js), поки рівень невідомий, лишається приглушеною. */
  color:var(--level-color, var(--text-muted));
}
.avatar-btn:hover{border-color:var(--text-muted)}
.avatar-btn:focus-visible{outline:2px solid var(--green); outline-offset:2px}
/* Бейдж рівня на аватарі. Обгортка шириною з аватар центрує бейдж по горизонталі. */
.level-badge-wrap{
  position:absolute; left:0; right:0; bottom:-5px;
  display:flex; justify-content:center;
  pointer-events:none;
}
.level-badge{
  min-width:16px; height:12px; padding:0 1px; box-sizing:content-box;
  display:flex; align-items:center; justify-content:center;
  border-radius:99px; border:2px solid var(--bg);
  font-family:'Unbounded',sans-serif; font-weight:700; font-size:8px; letter-spacing:.03em;
  /* найтемніший сірий напряму: тут це не «фон», а темний текст на яскравому
     чіпі — випадково той самий колір, що й --bg, а не той самий сенс */
  color:var(--gray-900); background:var(--level-color, var(--orange));
}
.level-badge[hidden]{display:none}

.avatar-dropdown{
  position:absolute; top:calc(100% + 12px); right:0; z-index:20;
  width:320px; max-width:calc(100vw - 24px);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  padding:16px;
  display:flex; flex-direction:column; gap:10px;
  transform-origin:top right;
}
.avatar-dropdown[hidden]{display:none}
/* JS перемикає лише [hidden] (display:none ↔ flex) — анімація грає на появі. */
.avatar-dropdown:not([hidden]){animation:avatar-menu-in .18s cubic-bezier(.4,0,.2,1)}
@keyframes avatar-menu-in{
  from{opacity:0; transform:translateY(-8px) scale(.96)}
  to{opacity:1; transform:translateY(0) scale(1)}
}
.avatar-dropdown .who{display:block}
.avatar-dropdown .btn{width:100%; min-height:44px}

@media (prefers-reduced-motion:reduce){
  .avatar-dropdown:not([hidden]),
  body:has(#avatar-dropdown:not([hidden])) #screen-home::after{animation:none}
}

/* Затемнення контенту, поки відкрите меню аватара (як у модалок).
   Оверлей — псевдоелемент #screen-home (z-index:1, свій контекст накладання):
   z-index:5 кладе його над контентом .shell, але під .topbar (z-index:10),
   тож шапка з аватаром і дропдаун лишаються поверх затемнення. */
body:has(#avatar-dropdown:not([hidden])) #screen-home::after{
  content:"";
  position:fixed; inset:0; z-index:5;
  background:rgba(0,0,0,.5);
  animation:avatar-overlay-in .18s ease;
}
@keyframes avatar-overlay-in{from{opacity:0}to{opacity:1}}

/* ——— шапка ——— */
.hero{display:flex; flex-direction:column; align-items:center; text-align:center;}
.hero-title{font-size:clamp(32px,4.4vw,44px); line-height:48px; margin-bottom:20px}
.hero-text{color:var(--text-muted); font-size:16px; max-width:44ch; margin:0 auto 32px}
.hero-actions{display:flex; gap:12px; width:100%; max-width:640px; margin-bottom:44px}
.hero-actions .btn{flex:1; width:auto; margin-top:0}

.stat-block{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; width:100%; max-width:640px}
.stat{background:var(--surface); padding:20px 16px; display:flex; flex-direction:column; align-items:center; gap:4px}
.stat-num{font-family:'Unbounded',sans-serif; font-size:28px; font-weight:700}
.stat-lab{font-family:'IBM Plex Sans',sans-serif; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted)}

/* ——— шкала рівнів (сигнатурний елемент) ——— */
.temper{padding:16px 0 16px; text-align:center}
.temper-head{margin:24px auto 24px; max-width:640px}
.temper-head h2{font-size:24px; line-height:28px; margin-bottom:8px}
.temper-head .note.dim{font-size:14px}
.temper-bars{display:flex; flex-direction:column; gap:16px; max-width:640px; margin:0 auto; text-align:left}

.tbar{display:grid; grid-template-columns:152px 1fr 56px; align-items:center; gap:16px}
.tbar-name{font-size:12px; color:var(--text)}
.tbar-rail{height:8px; background:var(--border); border-radius:99px; overflow:hidden; position:relative}
.tbar-fill{height:100%; border-radius:99px; transition:width .5s ease}
.tbar-val{font-family:'IBM Plex Sans',sans-serif; font-size:12px; color:var(--text-muted); text-align:right}

/* ——— гра ——— */
.play-top{padding:0px 0 16px}
.progress-rail{height:4px; background:var(--border); border-radius:99px; overflow:hidden}
.progress-fill{height:100%; width:0; background:var(--green); transition:width .35s ease}
.play-meta{display:flex; justify-content:space-between; align-items:center; margin-top:16px; color:var(--text-muted)}
#qcount{width:70px}
.streak{color:var(--green-fg)}

.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:32px}
.cat-tag{color:var(--text-muted); margin-bottom:16px}
.q-prompt{font-size:20px; line-height:32px; margin-bottom:24px}

.opt{
  display:block; width:100%; text-align:left; cursor:pointer;
  background:var(--bg); border:1px solid var(--border); border-radius:var(--r);
  color:var(--text); padding:12px 16px; margin-bottom:8px;
  font-family:inherit; font-size:16px; transition:.13s;
}
.opt:hover:not(:disabled){border-color:var(--text-muted)}
.opt:focus-visible{outline:2px solid var(--green); outline-offset:1px}
.opt:disabled{cursor:default}
.opt.right{border-color:var(--ok); background:rgba(52,199,89,.1)}
.opt.wrong{border-color:var(--no); background:rgba(255,56,60,.1)}

.fill-input{
  width:100%; background:var(--bg); border:1px solid var(--border); border-radius:var(--r);
  color:var(--text); padding:12px 16px; font-family:inherit; font-size:16px;
}
.fill-input:focus{outline:2px solid var(--green); outline-offset:1px}

.tokens{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px}
.token{
  background:var(--bg); border:1px solid var(--border); border-radius:var(--r);
  color:var(--text); padding:8px 12px; cursor:pointer; font-family:inherit; font-size:16px;
}
.token:hover{border-color:var(--text-muted)}
.token.used{opacity:.3; cursor:default}
.slot-rail{min-height:48px; background:var(--bg); border:1px dashed var(--border); border-radius:var(--r); padding:8px; display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px}

.feedback{margin-top:16px; padding-top:0px}
.verdict{font-family:'Unbounded',sans-serif; font-weight:700; font-size:16px}
.verdict.ok{color:var(--ok-fg)}
.verdict.no{color:var(--no-fg)}
.explain{font-size:14px; color:var(--text-muted); line-height:24px; white-space:pre-line}

.feedback + .btn{margin-top:16px}

/* ——— підсумок ——— */
.result{text-align:center}
.result > *{margin:0}                 /* рівний вертикальний ритм дає gap панелі — 16px */
.result-score{font-size:52px; line-height:56px}
.result-line{color:var(--text-muted); font-size:16px}
.res-breakdown{text-align:left; display:flex; flex-direction:column; gap:8px}
.res-row{display:flex; justify-content:space-between; font-size:16px; padding:8px 0; border-bottom:1px solid var(--border)}
.res-row span:last-child{font-family:'IBM Plex Sans',sans-serif; font-size:12px; color:var(--text-muted)}

.export-row{margin-top:16px; text-align:center}
.export-row .btn{width:auto}
.export-box{
  width:100%; height:192px; margin-top:16px; resize:vertical;
  background:var(--bg); border:1px solid var(--border);
  border-radius:var(--r); color:var(--text); padding:12px;
  font-family:inherit; font-size:16px;
}
.export-box:focus{outline:2px solid var(--green); outline-offset:1px; border-color:transparent}

/* ——— модалка експорту ——— */
.modal-overlay{
  position:fixed; inset:0; z-index:50;
  background:rgba(20,20,22,.72);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.modal-overlay[hidden]{display:none}
.modal{
  width:100%; max-width:920px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  padding:16px; max-height:calc(100vh - 48px); overflow:auto;
}
.modal-head{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:4px}
.modal-head h3{font-size:20px; line-height:24px}
.modal-close{
  color:var(--text-muted); font-size:24px; line-height:24px; padding:4px 8px; cursor:pointer; border-radius:var(--r);
}
.modal-close:hover{color:var(--text); background:var(--border)}
.modal .export-box{margin-top:16px; height:min(60vh,520px)}
.modal-actions{display:flex; justify-content:flex-end; margin-top:16px}
.modal-actions .btn{margin:0}

@media (max-width:760px){
  .hero{padding:24px 0}
  .hero-actions{flex-direction:column; width:100%}
  .hero-actions .btn.primary.big,
  .hero-actions .btn{width:100%}
  .stat-block{grid-template-columns:1fr 1fr}
  .tbar{grid-template-columns:112px 1fr 48px; gap:12px}
  .tbar-name{font-size:12px}
  .shell{padding:24px 16px 48px}
  .card{padding:24px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
}

/* ---------- онбординг рівня ---------- */
/* Контент онбордингу короткий — центруємо по вертикалі у вікні.
   margin:auto на flex-елементі центрує, але не обрізає верх, якщо контент вищий. */
#screen-onboard.active{display:flex; flex-direction:column; min-height:100vh}
#screen-onboard .shell{margin:auto}
/* Крок «тест рівня» — це той самий екран, що й основна гра: контент згори,
   без вертикального центрування, інакше ширина картки й варіантів стрибає
   від питання до питання разом зі зміною висоти контенту. */
#screen-onboard.testing.active{display:block; min-height:0}
#screen-onboard.testing .shell{margin:0 auto}
.ob-head{margin-bottom:28px; text-align:center}
.ob-head h1{font-size:24px; line-height:28px; margin-bottom:10px}
.ob-list{display:flex; flex-direction:column; gap:10px; margin-bottom:20px}
.ob-opt{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  color:var(--text); font:inherit; font-size:15px; line-height:20px;
  padding:16px 18px; text-align:left; cursor:pointer; transition:border-color .15s
}
.ob-opt:hover{border-color:var(--green)}
.ob-opt:focus-visible{outline:2px solid var(--green); outline-offset:2px}
.ob-level{
  font-family:'Unbounded',sans-serif; font-weight:900; font-size:44px;
  color:var(--green); line-height:44px; margin-bottom:12px
}
#ob-go{display:flex; width:fit-content; margin:0 auto; font-size:14px}

/* ---------- підвищення рівня ---------- */
.level-up{
  position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center;
  background:rgba(28,28,30,.88); padding:24px
}
.level-up[hidden]{display:none}
.level-up-fx{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:1
}
.level-up-card{
  position:relative; z-index:2;
  /* колір щабля: обводка й сяйво заголовка беруться з кольорового коду рівнів
     (--level-color / --level-rgb, які виставляє [data-level] на #level-up). */
  --edge:var(--level-color, var(--orange));
  --glow:var(--level-rgb, 217,164,65);
  background:var(--surface); border:1px solid var(--edge); border-radius:var(--r);
  padding:40px 32px; text-align:center; max-width:380px; width:100%;
  display:flex; flex-direction:column; gap:16px;
  animation:level-up-pop .5s cubic-bezier(.17,.89,.32,1.28) both
}
.level-up-card h2{
  font-size:34px; line-height:36px; color:var(--edge);
  animation:level-up-glow 1.8s ease-in-out .3s infinite alternate
}
.level-up-card .note{font-size:14px; margin:0}
.level-up-card .btn{width:100%; font-size:14px; margin-top:8px}
@keyframes level-up-pop{
  from{opacity:0; transform:scale(.82) translateY(14px)}
  to{opacity:1; transform:none}
}
@keyframes level-up-glow{
  from{text-shadow:0 0 0 rgba(var(--glow),0)}
  to{text-shadow:0 0 26px rgba(var(--glow),.6)}
}
@media (prefers-reduced-motion:reduce){
  .level-up-fx{display:none}
  .level-up-card,.level-up-card h2{animation:none}
}

/* ---------- зниження рівня: тихо ---------- */
.level-toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:40;
  background:var(--border); color:var(--text); border:1px solid var(--border);
  border-radius:var(--r); padding:12px 18px; font-size:14px; line-height:20px;
  max-width:min(440px,calc(100vw - 32px)); text-align:center
}
.level-toast[hidden]{display:none}

/* ---------- рівень у меню акаунта ---------- */
.level-row{
  display:flex; align-items:center; justify-content:space-between;
  min-height:44px; font-size:14px; color:var(--text);
}
.level-row b{color:var(--green); font-weight:600}
.lock-switch{
  position:relative; width:48px; height:28px; border-radius:99px; flex-shrink:0;
  background:var(--border); border:1px solid var(--border); cursor:pointer;
}
.lock-switch::after{
  content:""; position:absolute; top:2px; left:2px; width:22px; height:22px;
  border-radius:50%; background:var(--text-muted); transition:.15s;
}
.lock-switch[aria-checked="true"]{background:var(--green); border-color:var(--green)}
.lock-switch[aria-checked="true"]::after{transform:translateX(20px); background:var(--gray-900)}
.lock-switch:focus-visible{outline:2px solid var(--green); outline-offset:2px}
.menu-hint{font-size:12px; line-height:16px}

/* Сегментований вибір рівня: 3×2, великі кнопки під палець. */
.level-picker{display:grid; grid-template-columns:repeat(3,1fr); gap:4px}
.level-picker button{
  min-height:48px; padding:0; border:1px solid var(--border); border-radius:var(--r);
  background:var(--bg); color:var(--text-muted); cursor:pointer;
  font-family:'Unbounded',sans-serif; font-weight:700; font-size:14px; letter-spacing:.02em;
  transition:border-color .12s, color .12s, background .12s;
}
.level-picker button:hover{border-color:var(--text-muted); color:var(--text)}
.level-picker button.active{background:var(--green); border-color:var(--green); color:var(--gray-900)}
.level-picker button:focus-visible{outline:2px solid var(--green); outline-offset:2px}

/* рядок «що думає додаток» */
.level-est{font-size:12px; line-height:16px; margin:0}
.level-est:empty{display:none}
/* Літера рівня — у своєму кольорі щабля, трохи висвітленому до --text,
   щоб дрібний текст лишався читабельним на темному тлі. */
.level-est b{
  color:color-mix(in srgb, var(--level-color, var(--orange)) 82%, var(--text));
  font-weight:600;
}

/* дія-резолвер: підтягнути рівень до оцінки додатка */
.est-apply{align-self:flex-start; margin-top:-4px; font-size:13px; color:var(--green-fg)}
.est-apply[hidden]{display:none}
.est-apply:hover{color:#30d158}

/* футер меню: дію відділяємо лінією, вихід приглушений */
.menu-foot{display:flex; flex-direction:column; gap:10px; margin-top:4px; padding-top:12px}
.menu-foot .link-btn{align-self:center; min-height:36px; font-size:13px}

/* переклад речення у фідбеку */
.ua-wrap   { margin-top: 8px; }
.ua-toggle { background: none; border: 0; cursor: pointer;
             padding: 10px 8px; margin: -10px -8px; min-height: 44px;
             display: inline-flex; align-items: center;
             font: inherit; font-size: .85em; opacity: .7;
             text-decoration: underline; color: var(--text-muted);
             -webkit-tap-highlight-color: transparent; }
.ua-toggle:hover { opacity: 1; }
.ua-text   { margin: 0; font-size: .9em; color: var(--ok-fg); }