/* screens.css — повноекранні «службові» екрани (core/screens.js) у мові лендингу hub/: японський кікер,
   велика Unbounded-типографіка, помаранчевий акцент, жорсткий контур і тінь, «японська вулиця»
   (табло відправлень, лінія метро, квитки, номерний знак). Окремий файл, щоб не перетинатися з правками
   styles.css з інших задач. Оверлеї мають inline-стилі модалок з index.html — перебиваємо !important. */

/* ── Контейнер: модалка -> екран ── */
#onboardingOverlay.svc,#authOverlay.svc,#svcModalOverlay.svc{
  position:fixed;inset:0;z-index:9999;padding:0!important;align-items:stretch!important;justify-content:center!important;
  backdrop-filter:none!important;background:var(--bg)!important;overflow:hidden;
  background-image:none!important;animation:svcIn .28s var(--ease,ease) both;}
#svcModalOverlay{display:none;}
@keyframes svcIn{from{opacity:0;transform:translateY(12px);}}
#onboardingOverlay.svc>div,#authOverlay.svc>div,#svcModalOverlay .svc-card-wrap{
  position:relative;display:flex;flex-direction:column;width:100%!important;max-width:480px!important;height:100%;margin:0 auto;
  background:transparent!important;border:none!important;border-radius:0!important;box-shadow:none!important;
  padding:calc(var(--safe-area-inset-top, env(safe-area-inset-top)) + 18px) 20px calc(var(--safe-area-inset-bottom, env(safe-area-inset-bottom)) + 16px)!important;
  font-family:'Manrope','Manrope Fallback','Noto Sans Myanmar',sans-serif!important;color:var(--ink);overflow-y:auto;}
#onboardingOverlay.svc #onboardingBody{flex:1;display:flex;flex-direction:column;min-height:0;}
.svc-scroll{flex:1;overflow-y:auto;overflow-x:hidden;margin:0 -4px;padding:0 4px 12px;}

/* ── Прогрес: лінія метро ── */
.svc-line{display:flex;align-items:center;gap:0;list-style:none;margin:4px 0 26px;padding:0;max-width:min(260px,calc(100% - 118px));}   /* справа — «Пропустити» */
.svc-line li{position:relative;flex:1;height:14px;display:flex;align-items:center;}
.svc-line li::before{content:'';width:12px;height:12px;flex:none;border-radius:50%;border:2px solid var(--ink);background:var(--surface);box-sizing:border-box;}
.svc-line li:not(:last-child)::after{content:'';flex:1;height:3px;background:color-mix(in srgb,var(--ink) 22%,transparent);}
.svc-line li:last-child{flex:none;}
.svc-line li.done::before{background:var(--ink);}
.svc-line li.done::after{background:var(--ink);}
.svc-line li.cur::before{width:16px;height:16px;background:var(--accent-2);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-2) 30%,transparent);}

/* ── Типографіка ── */
.svc-kicker{margin:0 0 8px;font:900 13px/1.2 'Noto Sans JP',sans-serif;letter-spacing:.32em;color:var(--crimson);}
.svc-h,h1.svc-h{margin:0 0 12px!important;font:900 clamp(1.7rem,7.4vw,2.2rem)/1.08 'Unbounded','Unbounded Fallback','Noto Sans Myanmar',sans-serif;letter-spacing:-.03em;color:var(--ink);}
/* styles.css на мобільному має h1{font-size:1.3rem!important} — для екранів потрібна своя величина */
h1.svc-h{font-size:clamp(1.7rem,7.4vw,2.2rem)!important;}
h1.svc-h-xl{font-size:clamp(1.9rem,8.8vw,2.8rem)!important;}
.svc-h{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;}
.svc-h em{font-style:normal;color:inherit;background:linear-gradient(var(--accent-2),var(--accent-2)) 0 88%/100% .32em no-repeat;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;}
.svc-lead{margin:0 0 20px;font:500 15.5px/1.6 'Manrope','Manrope Fallback','Noto Sans Myanmar',sans-serif;color:var(--muted);}
.svc-lead b{color:var(--ink);font-weight:800;}
[lang="ja"]{font-family:'Manrope','Manrope Fallback','Noto Sans JP','Hiragino Kaku Gothic ProN',sans-serif;}

/* ── Нижня панель дій ── */
.svc-bar{display:flex;align-items:flex-end;gap:12px;padding-top:12px;}
.svc-bar-main{flex:1;display:flex;flex-direction:column;gap:10px;align-items:stretch;}
.svc-bar-main>*{width:100%;}
.svc-back,.svc-back-spacer{flex:none;width:52px;height:52px;}
.svc-back{display:flex;align-items:center;justify-content:center;border:2px solid var(--ink);border-radius:6px;background:var(--surface);color:var(--ink);cursor:pointer;}
.svc-back .icn{transform:rotate(-90deg);}
.svc-back-spacer{display:none;}
.svc-btn{min-height:54px;padding:0 18px;border:2px solid var(--ink)!important;border-radius:6px!important;background:var(--accent-2)!important;color:#000!important;
  font:800 15px/1.2 'Unbounded','Unbounded Fallback','Noto Sans Myanmar',sans-serif!important;letter-spacing:-.01em;cursor:pointer;
  box-shadow:3px 3px 0 var(--ink-shadow)!important;transition:transform .12s,box-shadow .12s;}
.svc-btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink-shadow)!important;}
.svc-btn-ghost{background:var(--surface)!important;color:var(--ink)!important;}
.svc-btn[disabled]{opacity:.6;}
.svc-link{min-height:44px;background:none;border:none;color:var(--muted);font:700 14px/1.3 'Manrope','Manrope Fallback',sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
.svc-skip{position:absolute;top:calc(var(--safe-area-inset-top, env(safe-area-inset-top)) + 8px);right:14px;min-height:44px;padding:0 10px;
  background:none;border:none;color:var(--muted);font:800 14px/1 'Manrope','Manrope Fallback',sans-serif;cursor:pointer;}

/* Глобальні правила кнопок у styles.css (контур 2px, радіус 4px, тінь — з !important) не для цих елементів */
.svc-back{border-radius:6px!important;box-shadow:none!important;border:2px solid var(--ink)!important;}
.svc-x{border-radius:50%!important;box-shadow:none!important;border:2px solid var(--ink)!important;}
.svc-skip,.svc-link{border:none!important;box-shadow:none!important;background:none!important;border-radius:4px!important;}
.brd-row{border:none!important;box-shadow:none!important;border-radius:4px!important;}
.svc-h:focus{outline:none;}

/* ── Ілюстрації ── */
.svc-art{position:relative;display:flex;align-items:center;justify-content:flex-start;min-height:150px;margin:0 0 24px;}
.svc-hello .svc-art{min-height:0;}
.svc-card{position:relative;width:150px;padding:12px 14px 14px;display:flex;flex-direction:column;align-items:center;gap:2px;
  background:var(--surface);border:2px solid var(--ink);border-radius:8px;}
.svc-lv{align-self:flex-start;padding:1px 7px;border-radius:999px;font:900 11px/1.5 'Unbounded','Unbounded Fallback',sans-serif;color:#fff;background:var(--lv5);}
.svc-card-kana{font-size:13px;color:var(--muted);}
.svc-card-kanji{font:900 56px/1.1 'Noto Sans JP',sans-serif;}
.svc-card-tr{font:800 13px/1.2 'Manrope','Manrope Fallback',sans-serif;}

.svc-plate{display:flex;flex-direction:column;align-items:center;padding:10px 22px 8px;border:3px solid #0F5132;border-radius:12px;background:#fff;
  color:#0F5132;}
.svc-plate-top{font:800 18px/1.1 'Noto Sans JP',sans-serif;letter-spacing:.1em;}
.svc-plate-top b{font-family:'LT Plate','Big Shoulders Display',sans-serif;font-size:1.21em;font-weight:400;vertical-align:-.06em;} /* = висоті кандзі, див. hub.css .plate-top b */
.svc-plate-bot{margin-right:.1em;font:900 40px/1 'LT Plate','Big Shoulders Display','Unbounded','Unbounded Fallback',sans-serif;letter-spacing:.02em;}
.svc-plate-bot span{font:800 17px/1 'Noto Sans JP',sans-serif;margin-right:-.4em;vertical-align:.63em;} /* впритул до N; центр ッ = центр N, див. hub.css */

.svc-bell,.svc-cloud{position:relative;width:132px;height:132px;display:flex;align-items:center;justify-content:center;border-radius:50%;
  border:2px solid var(--ink);background:var(--surface);color:var(--ink);}
.svc-bell .icn{animation:svcRing 2.4s ease-in-out infinite;transform-origin:50% 10%;}
@keyframes svcRing{0%,60%,100%{transform:none}66%{transform:rotate(14deg)}74%{transform:rotate(-12deg)}82%{transform:rotate(6deg)}}
.svc-bell-time{position:absolute;right:-18px;bottom:6px;padding:5px 9px;border-radius:6px;background:#111;color:#FFC940;border:2px solid var(--ink);
  font:800 20px/1 'Big Shoulders Display','Unbounded','Unbounded Fallback',sans-serif;letter-spacing:.06em;}
.svc-ticket-big{display:flex;align-items:center;gap:14px;padding:16px 22px;background:var(--accent-2);color:#000;border:2px solid var(--ink);border-radius:8px;
  font:900 30px/1 'Noto Sans JP',sans-serif;
  -webkit-mask:radial-gradient(circle 9px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 9px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle 9px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 9px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat;}

.svc-ticket-tag{padding-left:14px;border-left:2px dashed #000;font:900 24px/1 'Unbounded','Unbounded Fallback',sans-serif;}

/* ── Табло відправлень (вибір мови) ── */
.svc-board{display:flex;flex-direction:column;gap:3px;padding:8px;background:#111;border:2px solid var(--ink);border-radius:8px;}
.brd-row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px;min-height:48px;padding:6px 10px;text-align:left;cursor:pointer;
  background:#1c1c1c;border:none;border-radius:4px;color:#FFC940;font:700 17px/1.2 'Manrope','Manrope Fallback','Noto Sans Myanmar',sans-serif;}
.brd-code{min-width:2.4em;text-align:center;font:800 18px/1 'Big Shoulders Display','Unbounded','Unbounded Fallback',sans-serif;letter-spacing:.08em;color:#fff;}
.brd-st{min-width:78px;text-align:right;font:800 13px/1 'Big Shoulders Display','Unbounded','Unbounded Fallback',sans-serif;letter-spacing:.12em;color:#8A8A8A;}
.brd-row.here{background:#FFC940;color:#111;}
.brd-row.here .brd-code,.brd-row.here .brd-st{color:#111;}
.brd-row:active{transform:translateY(1px);}
/* вибрана мова — Unbounded, як на табло лендингу (hub.css .brd-row.here .flap); бірманська — своїм шрифтом */
.brd-row.here .brd-name{font:900 18px/1.2 'Unbounded','Unbounded Fallback',sans-serif;letter-spacing:-.02em;}
.brd-row.here[data-arg0="my"] .brd-name{font-family:'Noto Sans Myanmar','Manrope',sans-serif;line-height:1.6;}
/* ховер на невибраній мові — рядок трохи світлішає, назва біліє */
@media (hover:hover){
  .brd-row:not(.here):hover{background:#333!important;box-shadow:inset 0 0 0 1.5px #FFC940!important;}
  .brd-row:not(.here):hover .brd-name{color:#fff;}
  .brd-row:not(.here):hover .brd-st::after{content:'→';color:#FFC940;}
}

/* ── Маршрут (рівні) ── */
.svc-route{list-style:none;margin:0;padding:0;position:relative;}
.svc-st{position:relative;display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:12px;min-height:52px;--c:var(--ink);}
.svc-st:not(:last-child)::after{content:'';position:absolute;left:19px;top:40px;bottom:-12px;width:6px;background:var(--c);border-inline:2px solid var(--ink);}
.svc-st.st-5{--c:var(--lv5)}.svc-st.st-4{--c:var(--lv4)}.svc-st.st-3{--c:var(--lv3)}.svc-st.st-2{--c:var(--lv2)}.svc-st.st-1{--c:var(--lv1)}
.svc-st-dot{position:relative;z-index:1;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:var(--surface);box-shadow:inset 0 0 0 5px var(--c),0 0 0 2px var(--ink);font:900 13px/1 'Unbounded','Unbounded Fallback',sans-serif;}
.svc-st b{font:800 16px/1.2 'Unbounded','Unbounded Fallback','Noto Sans Myanmar',sans-serif;}
.svc-st em{font:800 11px/1 'Manrope','Manrope Fallback',sans-serif;font-style:normal;padding:5px 9px;border:2px solid var(--ink);border-radius:999px;white-space:nowrap;}
.svc-st em.free{background:#047857;color:#fff;border-color:#047857;}

/* ── Галочки «що отримаєте» ── */
.svc-ticks{list-style:none;margin:0;padding:0;display:grid;gap:10px;}
.svc-ticks li{display:flex;align-items:center;gap:10px;font:700 15px/1.3 'Manrope','Manrope Fallback','Noto Sans Myanmar',sans-serif;}
.svc-ticks .icn{color:var(--ink);}

/* ── Рівень: квитки ── */
.svc-tickets{display:grid;gap:12px;}
.svc-ticket{display:flex;align-items:stretch;min-height:84px;padding:0;text-align:left;cursor:pointer;background:var(--surface);color:var(--ink);
  border:2px solid var(--ink)!important;border-radius:8px!important;box-shadow:none!important;overflow:hidden;transition:background .12s;}
.svc-ticket:active{background:var(--paper);}
@media (hover:hover){.svc-ticket:hover .svc-ticket-stub{background:var(--accent-2);}}
.svc-ticket-stub{flex:none;width:64px;display:flex;align-items:center;justify-content:center;border-right:2px solid var(--ink);
  background:var(--paper);color:var(--ink);font:900 17px/1 'Unbounded','Unbounded Fallback',sans-serif;}
.svc-ticket:nth-child(3) .svc-ticket-stub{font-size:14px;}
.svc-ticket.on .svc-ticket-stub{background:var(--accent-2);color:#000;}
[data-theme="dark"] .svc-lv{color:#000;}
.svc-ticket-main{flex:1;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:12px 14px;}
.svc-ticket-main b{font:800 15px/1.3 'Unbounded','Unbounded Fallback','Noto Sans Myanmar',sans-serif;}
.svc-ticket-main span{font:600 13px/1.45 'Manrope','Manrope Fallback','Noto Sans Myanmar',sans-serif;color:var(--muted);}
.svc-ticket.on{outline:none;}

/* ── Вхід / реєстрація (#authOverlay з index.html) ── */
#authOverlay.svc>div{justify-content:flex-start;}
#authOverlay.svc #authTitle{font:900 clamp(1.7rem,7.4vw,2.2rem)/1.08 'Unbounded','Unbounded Fallback','Noto Sans Myanmar',sans-serif!important;letter-spacing:-.03em;text-transform:none;}
#authOverlay.svc [data-action="closeAuthModal"]{width:44px;height:44px;padding:0!important;justify-content:center;border-radius:50%!important;border:2px solid var(--ink)!important;}
#authOverlay.svc input{min-height:50px;font-size:16px!important;border:2px solid var(--ink)!important;border-radius:6px!important;background:var(--surface)!important;}
#authOverlay.svc label{font-size:13px!important;color:var(--ink)!important;}
#authOverlay.svc #authSubmitBtn{min-height:54px;border:2px solid var(--ink)!important;border-radius:6px!important;background:var(--accent-2)!important;color:#000!important;
  font:800 15px/1.2 'Unbounded','Unbounded Fallback','Noto Sans Myanmar',sans-serif!important;box-shadow:3px 3px 0 var(--ink-shadow)!important;}
#authOverlay.svc p:not(.svc-kicker):not(.svc-legal){font:500 15px/1.55 'Manrope','Manrope Fallback','Noto Sans Myanmar',sans-serif!important;color:var(--muted)!important;text-align:left!important;margin:4px 0 18px!important;}
#authOverlay.svc label{font:800 13px/1.2 'Manrope','Manrope Fallback','Noto Sans Myanmar',sans-serif!important;}
#authOverlay.svc input{font:600 16px 'Manrope','Manrope Fallback','Noto Sans Myanmar',sans-serif!important;padding:0 12px!important;}
#authOverlay.svc input::placeholder{font:500 16px 'Manrope','Manrope Fallback',sans-serif;}
#authOverlay.svc #authSwitchBtn{border:none!important;box-shadow:none!important;background:none!important;min-height:44px;margin-top:6px!important;
  font:700 14px/1.3 'Manrope','Manrope Fallback',sans-serif!important;color:var(--ink)!important;text-decoration:underline;text-underline-offset:3px;}
#authOverlay.svc #authErr{font:700 14px/1.45 'Manrope','Manrope Fallback',sans-serif!important;}
.svc-auth-head{margin-bottom:-2px;}
#authOverlay.svc [data-action="authSignInWithGoogle"]{min-height:50px;border:2px solid var(--ink)!important;border-radius:6px!important;background:var(--surface)!important;
  font:800 14px/1.2 'Manrope','Manrope Fallback',sans-serif!important;}
.svc-forgot{align-self:flex-end;margin-top:-4px;min-height:36px!important;padding:0 2px!important;font-size:13px!important;}
/* «Немає акаунту? Зареєструватися» — по центру під головною кнопкою; питання тихе, дія — чорнильна */
#authOverlay.svc #authSwitchBtn.svc-switch{display:block;width:100%;margin-top:14px!important;text-decoration:none!important;text-align:center;font-size:14px!important;}
.svc-switch-q{color:var(--muted);font-weight:600;}
.svc-switch-a{color:var(--ink);font-weight:800;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;}
/* тонше підкреслення для всіх тихих посилань екранів */
.svc-link,.svc-legal a{text-decoration-thickness:1px!important;text-underline-offset:3px;}
.svc-forgot[hidden]{display:none;}

/* ── Невеликі екрани: забули пароль / новий пароль ── */
#svcModalOverlay .svc-card-wrap{gap:4px;}
.svc-x{align-self:flex-end;width:44px;height:44px;display:flex;align-items:center;justify-content:center;margin-bottom:8px;
  border:2px solid var(--ink);border-radius:50%;background:var(--surface);color:var(--ink);cursor:pointer;}
.svc-field{display:flex;flex-direction:column;gap:6px;margin:4px 0 12px;font:800 13px/1.2 'Manrope','Manrope Fallback',sans-serif;}
.svc-field input{min-height:50px;padding:0 12px;border:2px solid var(--ink);border-radius:6px;background:var(--surface);color:var(--ink);font:600 16px 'Manrope','Manrope Fallback',sans-serif;}
.svc-msg{margin:0 0 12px;font:700 14px/1.45 'Manrope','Manrope Fallback',sans-serif;color:var(--err,#DC2626);}
.svc-msg.ok{color:var(--ok,#047857);}
.svc-msg[hidden],#svcModalOverlay [hidden]{display:none!important;}

/* Низькі екрани (360×640 тощо): ілюстрації менші, щоб текст і кнопки влазили без прокрутки */
@media (max-height:700px){
  .svc-art{min-height:112px;margin-bottom:10px;}
  .svc-card{width:124px;padding:8px 10px 10px;} .svc-card-kanji{font-size:42px;}
  .svc-bell,.svc-cloud{width:100px;height:100px;} .svc-line{margin-bottom:16px;}
  .svc-lead{margin-bottom:14px;font-size:15px;}
}
@media (min-width:720px){
  h1.svc-h{font-size:2.4rem!important}h1.svc-h-xl{font-size:3rem!important}
  .svc-back-spacer{display:none;}   /* на першому кроці «←» немає — головна кнопка на всю ширину, як на телефоні */
}
/* Десктоп: блок по центру екрана, кнопки одразу під вмістом (а не на дні високого вікна) */
@media (min-width:720px) and (min-height:600px){
  #onboardingOverlay.svc #onboardingBody{flex:0 1 auto;margin:auto 0;}
  #onboardingOverlay.svc .svc-scroll{flex:0 1 auto;}
  #onboardingOverlay.svc .svc-bar{padding-top:24px;}
}
@media (prefers-reduced-motion:reduce){
  .svc-bell .icn,#onboardingOverlay.svc,#authOverlay.svc,#svcModalOverlay.svc{animation:none!important;}
}

/* ── Політика конфіденційності (tools/legal.py -> privacy.html) ── */
.legal{max-width:720px;margin:0 auto;padding:calc(var(--safe-area-inset-top, env(safe-area-inset-top)) + 28px) 20px 64px;
  font:500 16px/1.65 'Manrope','Manrope Fallback','Noto Sans Myanmar',sans-serif;color:var(--ink);}
.legal-logo img{height:34px;width:auto;margin-bottom:28px;}
.legal .svc-h{font-size:clamp(1.45rem,6.2vw,2.6rem)!important;hyphens:auto;-webkit-hyphens:auto;}
.legal-date{margin:0 0 28px;color:var(--muted);font-weight:700;font-size:14px;}
.legal h2{margin:34px 0 10px;font:900 1.2rem/1.25 'Unbounded','Unbounded Fallback','Noto Sans Myanmar',sans-serif;letter-spacing:-.02em;}
.legal p{margin:0 0 14px;}
.legal ul{margin:0 0 14px;padding-left:1.2em;}
.legal li{margin:0 0 8px;}
.legal a{color:var(--crimson);text-underline-offset:3px;}
/* Посилання на політику під формою входу/реєстрації (screens.js decorateAuth) */
.svc-legal{margin:auto 0 0;padding-top:24px;font:500 12.5px/1.5 'Manrope','Manrope Fallback',sans-serif;color:var(--muted);text-align:center;}
.svc-legal a{color:var(--muted);}

/* ── Пейвол магазину (screens.js openStorePaywall): плани-квитки ── */
#svcModalOverlay.pay .svc-card-wrap{gap:0;}
.pay-ticks{margin-bottom:18px;}
.pay-plans{display:grid;gap:10px;margin:0 0 14px;}
.pay-plan{position:relative;display:flex;align-items:stretch;min-height:70px;padding:0;text-align:left;cursor:pointer;background:var(--surface);color:var(--ink);
  border:2px solid var(--ink)!important;border-radius:8px!important;box-shadow:3px 3px 0 var(--ink-shadow)!important;overflow:visible;}
.pay-plan-stub{flex:none;width:58px;display:flex;align-items:center;justify-content:center;border-right:2px dashed var(--ink);
  font:900 20px/1 'Unbounded','Unbounded Fallback',sans-serif;background:var(--paper);color:var(--ink);border-radius:6px 0 0 6px;}
.pay-plan-main{flex:1;display:flex;flex-direction:column;justify-content:center;gap:3px;padding:10px 14px;}
.pay-plan-main b{font:800 16px/1.2 'Unbounded','Unbounded Fallback','Noto Sans Myanmar',sans-serif;}
.pay-plan-main span{font:600 14px/1.4 'Manrope','Manrope Fallback','Noto Sans Myanmar',sans-serif;color:var(--muted);}
.pay-plan-main em{font-style:normal;color:var(--ink);font-weight:800;}
.pay-plan.on{outline:3px solid var(--accent-2);outline-offset:2px;}
.pay-plan.on .pay-plan-stub{background:var(--accent-2);color:#000;}
.pay-badge{position:absolute;top:-11px;right:12px;padding:3px 9px;border:2px solid var(--ink);border-radius:999px;background:#FFC940;color:#000;
  font:900 11px/1.2 'Unbounded','Unbounded Fallback',sans-serif;letter-spacing:.02em;}
.pay-fine{margin:10px 0 0;font:500 12.5px/1.5 'Manrope','Manrope Fallback','Noto Sans Myanmar',sans-serif;color:var(--muted);}
.pay-fine a{color:var(--ink);text-underline-offset:3px;}
#svcModalOverlay .svc-btn{width:100%;margin-top:4px;}

/* ══════ Профіль (екран «Прогрес», 2026-10-08) ══════ */
.pf-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:.8rem;}
.pf-ava{width:60px;height:60px;flex-shrink:0;display:grid;place-items:center;border:var(--brutal-border);border-radius:var(--r-lg);background:var(--accent-2);color:var(--on-accent-2);font:900 28px 'Unbounded','Unbounded Fallback',sans-serif;box-shadow:var(--brutal-shadow);}
.pf-who{flex:1;min-width:160px;}
.pf-name{font-weight:900;font-size:1.1rem;word-break:break-word;}
.pf-meta{font-size:12px;color:var(--muted);font-weight:700;margin-top:2px;}
.pf-btn{display:inline-flex;align-items:center;gap:var(--ic-gap);padding:8px 14px;border:var(--brutal-border);border-radius:var(--r-md);background:var(--surface);color:var(--text);font:800 13px inherit;font-family:inherit;cursor:pointer;box-shadow:var(--btn-shadow);white-space:nowrap;}
.pf-btn:active{transform:var(--btn-press);box-shadow:var(--btn-shadow-press);}
.pf-btn-y{background:var(--accent-2);color:var(--on-accent-2);}
.pf-btn-k{background:#000;color:#fff;border-color:#000;}
.pf-goal{background:var(--accent-2);color:#000;margin-bottom:.8rem;}
.pf-goal .pf-btn{background:#fff;color:#000;border-color:#000;box-shadow:3px 3px 0 #000;}
.pf-goal .pf-btn-k{background:#000;color:#fff;}
.pf-goal-empty{background:var(--surface);color:var(--text);}
.pf-goal-empty .pf-btn-k{background:var(--accent-2);color:#000;}
.pf-goal-title{font-weight:900;margin-bottom:.7rem;}
.pf-goal-top{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.pf-lv{font:900 2.6rem/1 'Unbounded','Unbounded Fallback',sans-serif;}
.pf-goal-txt{flex:1;min-width:150px;display:flex;flex-direction:column;font-size:13px;font-weight:700;}
.pf-goal-txt b{font-size:15px;font-weight:900;}
.pf-count{text-align:right;font-weight:800;font-size:13px;}
.pf-count b{display:block;font:900 2rem/1 'Unbounded','Unbounded Fallback',sans-serif;}
.pf-goal-bars{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:1rem 0;}
.pf-bar-lab{display:flex;justify-content:space-between;font-size:12px;font-weight:800;margin-bottom:4px;gap:6px;}
.pf-track{height:10px;border:2px solid #000;border-radius:var(--r-sm);background:rgba(255,255,255,.6);overflow:hidden;}
.pf-fill{height:100%;background:#000;}
.pf-goal-form{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;}
.pf-goal-form label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:800;}
.pf-goal-form select{font:700 14px inherit;font-family:inherit;padding:7px 8px;border:var(--brutal-border);border-radius:var(--r-md);background:var(--surface);color:var(--text);min-width:120px;}
.pf-goal:not(.pf-goal-empty) .pf-goal-form select{background:#fff;color:#000;border-color:#000;}
.pf-review{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:1.2rem;}
.pf-review b{display:flex;align-items:center;gap:var(--ic-gap);font-weight:900;}
.pf-review span{display:block;font-size:12px;color:var(--muted);font-weight:700;margin-top:2px;}
.pf-mocks{padding:6px 12px;overflow-x:auto;}
.pf-mocks table{width:100%;border-collapse:collapse;font-size:13px;}
.pf-mocks th,.pf-mocks td{text-align:left;padding:8px 6px;border-bottom:2px solid var(--paper);white-space:nowrap;}
.pf-mocks tr:last-child td{border-bottom:0;}
.pf-mocks th{font-size:12px;color:var(--muted);font-weight:800;}
.pf-sec{display:inline-block;margin-right:6px;}
.pf-pass{color:var(--ok);font-weight:900;}
@media(max-width:560px){
  .pf-goal-bars{grid-template-columns:1fr;}
  .pf-count{text-align:left;}
}
.pf-forecast{display:flex;align-items:flex-start;gap:var(--ic-gap);font-size:13px;font-weight:800;margin:-.2rem 0 1rem;padding:8px 10px;border:2px solid #000;border-radius:var(--r-md);background:rgba(255,255,255,.55);}
.pf-goal-foot{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;}
.pf-daily{display:flex;flex-direction:column;gap:3px;font-size:12px;font-weight:800;}
.pf-daily select{font:700 14px inherit;font-family:inherit;padding:6px 8px;border:2px solid #000;border-radius:var(--r-md);background:#fff;color:#000;}
.pf-weak,.pf-ref{margin-bottom:1.2rem;}
.pf-weak-head,.pf-ref{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.pf-weak-head b,.pf-ref b{display:flex;align-items:center;gap:var(--ic-gap);font-weight:900;}
.pf-weak-list{display:flex;flex-wrap:wrap;gap:6px;margin:.8rem 0 .5rem;}
.pf-chip{padding:4px 10px;border:2px solid var(--border);border-radius:var(--r-pill);font-weight:700;font-size:14px;background:var(--paper);}
.pf-weak-note,.pf-ref span{display:block;font-size:12px;color:var(--muted);font-weight:700;margin-top:2px;}

/* ══════ Вибір мови з сайдбару (глобус, ui.js openLangPicker) — те саме табло, що й у першому запуску ══════ */
#langPickerOverlay.lp>div{max-width:440px!important;padding:18px 18px 20px!important;border-radius:14px!important;border:2px solid var(--ink)!important;
  background:var(--card)!important;box-shadow:none!important;max-height:calc(100dvh - 32px);overflow-y:auto;}
#langPickerOverlay.lp #langPickerBody{display:block!important;}
.lp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:6px;}
h2.lp-title{margin:0;font:900 1.45rem/1.15 'Unbounded','Unbounded Fallback','Noto Sans Myanmar',sans-serif!important;letter-spacing:-.02em;color:var(--ink);}
.lp-x{flex:none;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:2px solid var(--ink)!important;border-radius:50%!important;
  background:var(--surface)!important;color:var(--ink);box-shadow:none!important;cursor:pointer;padding:0;}
.lp-lead{margin:0 0 14px;font:500 14px/1.55 'Manrope','Manrope Fallback','Noto Sans Myanmar',sans-serif;color:var(--muted);}
.lp-warn{display:flex;gap:8px;align-items:flex-start;margin:0 0 14px;padding:10px 12px;border-radius:8px;background:var(--paper);
  font:600 13px/1.5 'Manrope','Manrope Fallback','Noto Sans Myanmar',sans-serif;color:var(--ink);}
.lp-warn .icn{flex:none;margin-top:2px;}
.lp-warn-link{display:inline;margin-left:4px;padding:0;border:none!important;background:none!important;box-shadow:none!important;color:var(--ink);
  font:800 13px/1.5 'Manrope','Manrope Fallback',sans-serif;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;cursor:pointer;}
#langPickerOverlay .brd-row{text-decoration:none;}
/* Телефон: нижня панель, як екскурсія */
@media (max-width:560px){
  #langPickerOverlay.lp{align-items:flex-end!important;padding:0!important;}
  #langPickerOverlay.lp>div{max-width:none!important;border-radius:16px 16px 0 0!important;border-bottom:0!important;
    padding-bottom:calc(20px + env(safe-area-inset-bottom))!important;}
}