/* Round 134 — every popup, toast, panel and banner must fit every screen (320px up, portrait and landscape).
   Loaded last on purpose. Uses dynamic viewport units and safe-area insets so nothing hides behind a phone's
   notch, home bar, address bar or the bottom tab bar. */
:root { --mf-gap: 12px; --mf-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); --mf-bottom-tab: calc(env(safe-area-inset-bottom, 0px) + 76px); }

/* ---- toasts: centered with real width (never shrink-to-half-width), wrap long words, sit above the tab bar on phones ---- */
.hub-toasts, .soc-toasts { left: var(--mf-gap) !important; right: var(--mf-gap) !important; transform: none !important; width: auto !important; align-items: center; justify-items: center; bottom: var(--mf-bottom) !important; }
.hub-toast, .soc-toast { max-width: min(480px, 100%) !important; white-space: normal; overflow-wrap: anywhere; word-break: break-word; text-align: center; border-radius: 16px !important; line-height: 1.4; }
.eg-toast { left: var(--mf-gap) !important; right: var(--mf-gap) !important; transform: none !important; width: max-content; max-width: min(480px, calc(100vw - 24px)) !important; margin: 0 auto; bottom: var(--mf-bottom) !important; white-space: normal; overflow-wrap: anywhere; border-radius: 16px !important; line-height: 1.4; box-sizing: border-box; }
.pg-toasts { left: var(--mf-gap); right: var(--mf-gap); max-width: none !important; justify-items: center; bottom: var(--mf-bottom) !important; }
.pg-toast { max-width: min(420px, 100%); overflow-wrap: anywhere; box-sizing: border-box; }
.nt-toasts { right: var(--mf-gap) !important; left: var(--mf-gap); margin-left: auto; width: min(380px, calc(100vw - 24px)) !important; bottom: var(--mf-bottom) !important; }
.nt-toast { box-sizing: border-box; max-width: 100%; }
.nt-toast b, .nt-toast span, .nt-item__txt b, .nt-item__txt > span { overflow-wrap: anywhere; }
.nt-toast__x { min-width: 32px; min-height: 32px; }

/* ---- bell panel: a sheet that always fits ---- */
.nt-panel { max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important; box-sizing: border-box; }
.nt-panel__list { min-height: 0; }
.nt-item__txt > span { -webkit-line-clamp: 3; }

/* ---- push prompt, install banner ---- */
.nt-ask { left: var(--mf-gap) !important; right: var(--mf-gap) !important; transform: none !important; margin: 0 auto; width: auto !important; max-width: min(520px, calc(100vw - 24px)); box-sizing: border-box; bottom: var(--mf-bottom) !important; max-height: calc(100dvh - 24px); overflow: auto; }
.eg-pwa { left: var(--mf-gap); right: var(--mf-gap); bottom: var(--mf-bottom); box-sizing: border-box; max-height: calc(100dvh - 24px); overflow: auto; }
.eg-cele { padding: 12px; overflow-y: auto; }
.eg-cele__card { max-width: min(380px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; box-sizing: border-box; overflow-wrap: anywhere; padding: 24px 22px; }

/* ---- tour, welcome, hints, nav tips ---- */
.wl__box, .wl > div { max-height: calc(100dvh - 24px); overflow-y: auto; box-sizing: border-box; max-width: calc(100vw - 24px); }
.tr-pop { max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; box-sizing: border-box; overflow-wrap: anywhere; }
.ht-bubble { max-width: min(300px, calc(100vw - 20px)); overflow-wrap: anywhere; }
.nav-tip { max-width: calc(100vw - 24px); box-sizing: border-box; overflow-wrap: anywhere; }

/* ---- cookie banner: never taller than the screen, scrolls if it must ---- */
.cookie-banner { max-height: 60dvh; overflow-y: auto; padding-bottom: env(safe-area-inset-bottom, 0px); }

/* ---- generic modals ---- */
.cs-modal, .pg-modal, .mkt-modal, .kb-media-modal { padding: 12px; box-sizing: border-box; }
.cs-modal > *, .pg-modal > *, .mkt-modal > * { max-height: calc(100dvh - 24px); overflow-y: auto; max-width: calc(100vw - 24px); box-sizing: border-box; }

/* ---- phones ---- */
@media (max-width: 780px) {
  .hub-toasts, .soc-toasts, .eg-toast, .pg-toasts, .nt-toasts, .nt-ask, .eg-pwa { bottom: var(--mf-bottom-tab) !important; }
  .nt-panel { left: 8px !important; right: 8px !important; width: auto !important; top: calc(env(safe-area-inset-top, 0px) + 8px) !important; max-height: calc(100dvh - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 64px) !important; border-radius: 18px; }
  .fb-fab { bottom: calc(env(safe-area-inset-bottom, 0px) + 150px) !important; }
}
/* short landscape screens: use the full width and keep things small */
@media (max-height: 480px) {
  .hub-toasts, .soc-toasts, .eg-toast, .pg-toasts, .nt-toasts, .nt-ask, .eg-pwa { bottom: calc(env(safe-area-inset-bottom, 0px) + 8px) !important; }
  .nt-panel { max-height: calc(100dvh - 16px) !important; }
  .cookie-banner { max-height: 80dvh; }
}
@media (max-width: 360px) { .nt-ask { padding: 12px; gap: 10px; } .eg-cele__card { padding: 20px 16px; } }
.mkb-toast-region { top: calc(env(safe-area-inset-top, 0px) + 12px) !important; max-width: min(420px, 100vw) !important; box-sizing: border-box; }
.mkb-toast { box-sizing: border-box; }
.mkb-toast__text { min-width: 0; overflow-wrap: anywhere; }
.resume-banner { max-width: min(460px, calc(100vw - 24px)); box-sizing: border-box; overflow-wrap: anywhere; }
@media (max-width: 780px) { .resume-banner { bottom: var(--mf-bottom-tab); } .back-to-top { bottom: calc(env(safe-area-inset-bottom, 0px) + 84px); } }

/* Round 134: finger-sized tap targets for stand-alone links on phones (inline links inside sentences keep their text size) */
@media (max-width: 780px), (pointer: coarse) {
  footer a, .footer a, .cookie-banner a, .cookie-banner__links a { display: inline-flex; align-items: center; min-height: 40px; padding-block: 6px; }
  footer li, .footer li { margin: 0; }
  .auth-card a:not(.btn), .login-links a, form + p a { display: inline-flex; align-items: center; min-height: 36px; }
  .nav a:not(.btn), .site-nav a:not(.btn), header nav a { min-height: 40px; display: inline-flex; align-items: center; }
  p > a.btn, .btn { min-height: 44px; }
}
@media (max-width: 780px), (pointer: coarse) {
  .academy-nav__links a:not(.btn), .fine-print a, .plans__note a { display: inline-flex; align-items: center; min-height: 40px; }
  p a:not(.btn) { padding-block: 3px; }
}
/* stacked notification cards: the indented list must wrap inside the card on phones */
.nt-stack__kids, .nt-stack__kid, .nt-card__main { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
@media (max-width: 520px) { .nt-stack__kids { margin-left: 14px; padding-left: 10px; } }
details.nt-stack { display: block; }
details.nt-stack > .nt-stack__kids { width: auto; }

/* Round 134: small controls get a finger-sized hit area on phones without changing how they look */
@media (max-width: 780px), (pointer: coarse) {
  .ht { position: relative; }
  .ht::after { content: ''; position: absolute; inset: -12px; }
  .td__btn { min-height: 44px; }
  .td__chip { min-height: 44px; min-width: 48px; }
  .nt-mini { min-height: 40px; padding-inline: 14px; }
  .nt-card__meta a { display: inline-flex; align-items: center; min-height: 40px; padding-inline: 6px; }
  li > a { padding-block: 6px; }
  .td li > a, .td__list li > a, ul.td__steps li > a { display: inline-flex; align-items: center; min-height: 40px; }
}

/* Round 134: flex/grid children may shrink below their content width, so nothing pushes the page wider than a 320px phone */
.admin-main input:not([type=checkbox]):not([type=radio]), .admin-main select, .admin-main textarea { min-width: 0; max-width: 100%; }
.gd-wrap > *, .pg-grid > *, .ms > * { min-width: 0; }
.gd-tray { max-width: 100%; }
@media (max-width: 520px) {
  .admin-main form > div[style*="display:flex"] { flex-wrap: wrap; }
  .admin-main form > div[style*="display:flex"] > input[type="search"], .admin-main form > div[style*="display:flex"] > input[type="text"] { flex: 1 1 160px !important; min-width: 0; }
}
@media (max-width: 1024px) and (pointer: coarse) { .ht { position: relative; } .ht::after { content: ''; position: absolute; inset: -12px; } .hub-menu__link, .hub-muted a { display: inline-flex; align-items: center; min-height: 40px; } }

/* Round 148: a shorter cookie bar on phones (it covered about a quarter of the first screen) */
@media (max-width: 640px) {
  .cookie-banner__inner { gap: 8px; padding: 10px 14px; }
  .cookie-banner__text { font-size: 12.5px; line-height: 1.4; margin: 0; }
  .cookie-banner__actions { display: flex; gap: 8px; width: 100%; }
  .cookie-banner__actions .cookie-banner__btn { flex: 1; min-height: 40px; padding: 8px 10px; font-size: 13.5px; }
}

/* ===== Round 191: phones (checked on a Samsung S22, 360px) — compact banners, tab rows that wrap instead of getting cut off, real tap targets ===== */
@media (max-width: 640px) {
  /* the two top notices used to take most of the first screen */
  .terms-banner { position: static !important; flex-wrap: nowrap !important; align-items: center !important; gap: 8px !important; padding: 8px 10px !important; margin: 0 0 8px !important; font-size: 13px !important; line-height: 1.3; }
  .terms-banner > span { flex: 1 1 auto; min-width: 0; }
  .terms-banner .btn { flex: 0 0 auto; white-space: nowrap; padding: 8px 12px !important; min-height: 40px !important; font-size: 13px; }
  .earn-bar { flex-wrap: nowrap !important; align-items: center; gap: 8px !important; padding: 8px 6px 8px 10px !important; margin: 0 0 8px !important; }
  .earn-bar__gem { flex: 0 0 auto; }
  .earn-bar__txt { flex: 1 1 auto; min-width: 0; font-size: 13px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .earn-bar .btn { flex: 0 0 auto; white-space: nowrap; min-height: 40px !important; padding: 8px 12px !important; font-size: 13px; }
  .earn-bar__x { flex: 0 0 auto; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; }

  /* tab / pill rows: wrap and share the width, never run off the edge */
  .cb-tabs, .md-tabs, .hub-tabs, .cs-res__tabs, .rt-tabs, .rc-tabs, .lessons-tabs { flex-wrap: wrap !important; overflow: visible !important; position: static !important; gap: 6px !important; }
  .cb-tab, .md-tabs > *, .hub-tabs > *, .cs-res__tabs > *, .rt-tabs a, .rc-tabs a, .lessons-tabs a { flex: 1 1 auto !important; text-align: center; justify-content: center; padding: 9px 12px !important; font-size: 14px !important; min-height: 44px; line-height: 1.2; box-sizing: border-box; overflow-wrap: break-word; }

  /* finger-sized targets (48px is Android's own guideline) */
  summary, .fx-btn, .fb-share-link, .achievement-badge__share, .pw-show, .cf-link, .gf-link, .academy-nav__logout-btn { min-height: 44px; display: inline-flex; align-items: center; }
  label.cx-check, label.cb-l, label.ss-l, label.rf__chk { min-height: 44px; display: flex; align-items: center; gap: 8px; }
  .admin-main a:not(.btn):not([class*="__"]) { overflow-wrap: break-word; }
  .btn, button.btn { white-space: normal; overflow-wrap: break-word; text-align: center; line-height: 1.25; }
  .btn + .btn { margin-top: 0; }
}
@media (max-width: 380px) {
  .terms-banner { font-size: 12.5px !important; }
  .earn-bar__gem { display: none; }
}

/* Round 191 (cont.): no double side padding inside the member area, and chip rows wrap instead of being cut off at the screen edge */
@media (max-width: 900px) {
  .admin-main .container { padding-left: 0 !important; padding-right: 0 !important; max-width: 100% !important; }
  .cb-tpl, .cb-pk__cats, .hk-chips { flex-wrap: wrap !important; overflow: visible !important; }
  .cb-tpl > *, .cb-pk__cats > *, .hk-chips > * { flex: 0 1 auto; max-width: 100%; }
  .cb-tpl > .cb-fine { flex: 1 0 100%; }
}

/* Round 191 (cont.): the simple top bar on sign-in / register / forgot password / landing pages — logo on top, links in a tidy centered row, Join Free never cut off */
@media (max-width: 640px) {
  .academy-nav__inner { padding: 10px 14px !important; justify-content: center !important; gap: 6px !important; }
  .academy-nav__links { width: 100%; flex-wrap: wrap; justify-content: center; gap: 2px 16px !important; font-size: 14px !important; }
  .academy-nav__links a:not(.btn) { white-space: nowrap; display: inline-flex; align-items: center; min-height: 40px; padding: 0 2px; }
  .academy-nav__links .btn { white-space: nowrap; min-height: 40px; display: inline-flex; align-items: center; padding: 8px 16px !important; font-size: 14px !important; }
  .academy-nav__links form { display: inline-flex !important; }
  .auth-box { margin: 20px auto !important; padding: 22px 18px !important; border-radius: 18px; width: calc(100% - 24px); box-sizing: border-box; }
}

/* Round 191 (cont.): page title never pushes the search button onto its own row; Buy Lessons / Training / Growth Path tabs fit; file pickers look like buttons */
@media (max-width: 640px) {
  .admin-topbar { flex-wrap: nowrap !important; align-items: center; gap: 8px; }
  .admin-topbar h1 { flex: 1 1 auto; min-width: 0; font-size: clamp(17px, 5vw, 21px) !important; line-height: 1.25 !important; overflow-wrap: break-word; }
  .tb-search-btn { flex: 0 0 auto; }
  .lessons-tabs { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); border-radius: 18px !important; padding: 4px !important; }
  .lessons-tabs a { border-radius: 14px !important; display: flex; align-items: center; justify-content: center; }
  input[type="file"] { width: 100%; max-width: 100%; box-sizing: border-box; font-size: 14px; padding: 8px; border: 1px dashed var(--color-border, #d9cdc3); border-radius: 12px; background: var(--color-bg-alt, #fbf8f5); }
  input[type="file"]::file-selector-button { min-height: 40px; margin-right: 10px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--color-border, #d9cdc3); background: #fff; font: inherit; font-weight: 700; }
  .hk-chips { padding-inline: 2px; }
}
@supports (height: 100dvh) { @media (max-width: 640px) { .msg { height: calc(100dvh - 190px) !important; } } }
@media (max-width: 640px) { .fm { padding-left: 16px !important; padding-right: 16px !important; } }
/* on-screen keyboard open: tab bar and floating bits get out of the way */
html.kb-open .admin-tabbar, html.kb-open .as-chip, html.kb-open .eg-pwa { display: none !important; }
html.kb-open .as-bar { bottom: 12px !important; }
@media (max-width: 640px) {
  .lessons-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .lessons-tabs a { padding: 8px 4px !important; font-size: 13px !important; line-height: 1.2; text-align: center; }
  .rt-tabs { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rt-tabs a { padding: 8px 4px !important; font-size: 13px !important; display: flex; align-items: center; justify-content: center; text-align: center; gap: 4px; line-height: 1.2; }
  .rc-tabs { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Round 191 (cont.): long text can never push a card wider than the phone — block containers may shrink below their content and long words wrap */
@media (max-width: 640px) {
  :where(.admin-main) :where(div, section, article, ul, ol, li, form, p, h1, h2, h3, h4, header, nav) { min-width: 0; }
  .admin-main :is(p, li, h1, h2, h3, h4, td, th, label, summary) { overflow-wrap: break-word; }
  .msg { grid-template-columns: minmax(0, 1fr) !important; height: calc(100dvh - 190px) !important; min-height: 420px; }
  .msg-list, .msg-thread, .msg-pane, .msg-convs, .msg-conv, .msg-conv__mid, .msg-head, .msg-search { min-width: 0; max-width: 100%; }
  .cookie-banner__text, .cookie-banner p { font-size: 12.5px !important; line-height: 1.35 !important; }
}
@media (max-width: 640px) {
  .msg-tools { position: static !important; margin-top: 2px; opacity: .85; align-self: inherit; }
  .msg-tools button { min-width: 40px; min-height: 40px; }
}

/* Round 191 final pass */
@media (max-width:640px){
  .pro-row{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);padding:10px 10px;font-size:13px;gap:6px;overflow-wrap:break-word}
  .btn,button,label,summary,.cb-chip,.hub-menu__item,.pill,.author-chip__name,.hub-poll__opt{max-width:100%;box-sizing:border-box;overflow-wrap:break-word}
  .author-chip__name{min-width:0}
  .hub-poll__opt{overflow:visible;white-space:normal}
  .vs-lbl,.dg__label{font-size:12px}
  .cm-hero,.np-hero,.gp-hero{max-width:100%;overflow-wrap:break-word}
  .cm-hero *,.np-hero *,.gp-hero *{max-width:100%;min-width:0}
}
@media (max-width:640px){
  .pill,summary,label,.hub-poll__label,.td__btn{white-space:normal;overflow-wrap:anywhere;max-width:100%}
  .vs-lbl{font-size:12px!important}
}

/* Round 191.2: calm mobile pages */
.terms-banner{font-size:13px;padding:8px 12px}
.terms-banner .btn{min-height:36px;padding:6px 12px;font-size:13px;white-space:nowrap}
.calm-clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.calm-chips{max-height:48px;overflow:hidden}
.calm-more{background:none;border:0;color:var(--color-primary-dark,#b8321a);font-weight:600;font-size:13px;padding:6px 0;min-height:36px;cursor:pointer}
.calm-hide{display:none!important}
.calm-more--block{display:block;width:100%;text-align:center;background:var(--color-surface,#fff);border:1px solid var(--color-border);border-radius:12px;margin:10px 0 16px;min-height:44px}
.calm-chips,.hk-chips.calm-chips,.cb-pk__cats.calm-chips{max-height:42px!important;overflow:hidden!important}

/* Round 191.3: tighter heroes + earn card, every member page */
@media (max-width:640px){
  .earn-card__top{align-items:flex-start}
  .earn-card__txt{flex:1 1 180px;min-width:min(180px,100%)}
  .earn-card .btn{width:100%;justify-content:center}
  main [class$="-hero"],main [class*="-hero "],main [class^="hero"]{padding:16px!important;margin:0 0 12px!important;min-height:0!important;border-radius:16px}
  main [class$="-hero"] h1,main [class*="-hero "] h1,main [class$="-hero"] h2{font-size:clamp(20px,6vw,26px)!important;line-height:1.2;margin:0 0 6px!important}
  main [class$="-hero"]>p,main [class*="-hero "]>p{font-size:14px!important;margin:0 0 10px!important}
  .admin-main .container>section:first-child{margin-top:0}
  .admin-main .reveal{margin-bottom:12px}
}
@media (max-width:640px){
  .admin-main .container h1,.admin-main article h1{font-size:clamp(22px,6.4vw,28px);line-height:1.2}
}

/* Round 192.3: no black square outlines. Taps never draw the browser's dark box; keyboard focus
   gets a soft rounded coral ring instead of a hard square outline. */
*{-webkit-tap-highlight-color:transparent}
button,[role=tab],[role=button],summary,a,label,input[type=radio],input[type=checkbox],select,textarea,input{-webkit-tap-highlight-color:transparent}
button:focus:not(:focus-visible),[role=tab]:focus:not(:focus-visible),summary:focus:not(:focus-visible),a:focus:not(:focus-visible),[tabindex]:focus:not(:focus-visible){outline:none!important;box-shadow:none}
:focus-visible,.cb :focus-visible,.md :focus-visible,.md-run :focus-visible,.cb-modal :focus-visible,.cb-play :focus-visible,.sr-btn:focus-visible,.sr-stage:focus-visible,.ss-kind label:has(input:focus-visible){outline:none!important;box-shadow:0 0 0 3px rgba(228,87,46,.35)!important;border-radius:inherit}
input:focus-visible,select:focus-visible,textarea:focus-visible{border-color:#E4572E!important}
.dp-cal i.is-today{outline:0!important;box-shadow:0 0 0 2px #E4572E}
button,[role=tab]{outline-color:transparent}
.auth-sent{background:#F0FAF3;border:1px solid #c8e6d1;border-radius:14px;padding:14px 16px;margin:6px 0 12px;text-align:left}
.auth-sent__t{font-weight:800;font-size:18px;margin:0 0 6px;color:#1B5E3A}
.auth-sent p{margin:0 0 8px}.auth-sent__tips{margin:0 0 10px;padding-left:20px;font-size:15px;color:#4a342b}

/* Round 195: guide page extras (key takeaways, helpful vote, share row, prev/next, sticky join bar, NEW badge, search) */
.kb-takeaways{background:#FFF6EE;border:1px solid #F3D9C4;border-left:4px solid #E4572E;border-radius:12px;padding:12px 16px;margin:18px 0}
.kb-takeaways strong{display:block;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:#B8401D;margin-bottom:6px}
.kb-takeaways ul{margin:0;padding-left:20px}.kb-takeaways li{margin:4px 0}
.kb-byline{font-size:13px;color:var(--color-text-muted);margin:-8px 0 14px}
.kb-byline a{color:inherit}
.kb-new{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.05em;color:#fff;background:#E4572E;border-radius:999px;padding:2px 9px;margin-left:8px;vertical-align:middle}
.kb-helpful{border:1px solid var(--color-border,#eadfd6);border-radius:14px;padding:14px 16px;margin:26px 0;display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#fff}
.kb-helpful p{margin:0;font-weight:700;flex:1 1 180px}
.kb-helpful button{border:1px solid var(--color-border,#d9cfc6);background:#fff;border-radius:999px;padding:8px 16px;font-size:14px;font-weight:700;cursor:pointer;min-height:40px}
.kb-helpful button[aria-pressed=true]{background:#E4572E;border-color:#E4572E;color:#fff}
.kb-helpful__msg{flex-basis:100%;font-size:13px;color:var(--color-text-muted);min-height:1em}
.kb-share-row{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.kb-share-row a,.kb-share-row button{font-size:13px;font-weight:700;border:1px solid var(--color-border,#d9cfc6);background:#fff;color:inherit;border-radius:999px;padding:8px 14px;text-decoration:none;cursor:pointer;min-height:38px}
.kb-pn{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:28px 0 0}
.kb-pn a{display:block;border:1px solid var(--color-border,#eadfd6);border-radius:14px;padding:12px 14px;text-decoration:none;color:inherit;background:#fff}
.kb-pn small{display:block;color:var(--color-text-muted);font-size:12px;margin-bottom:4px}
.kb-pn a:last-child{text-align:right}.kb-pn span{font-weight:700;font-size:14.5px;line-height:1.3}
@media(max-width:520px){.kb-pn{grid-template-columns:1fr}.kb-pn a:last-child{text-align:left}}
.kb-joinbar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;border-top:1px solid #eadfd6;box-shadow:0 -6px 20px rgba(0,0,0,.08);padding:10px 14px;display:none;align-items:center;gap:10px}
.kb-joinbar.is-on{display:flex}
.kb-joinbar p{margin:0;flex:1;font-size:13.5px;font-weight:700;line-height:1.25}
.kb-joinbar a{white-space:nowrap}
.kb-joinbar button{border:0;background:transparent;font-size:22px;line-height:1;color:#7a6b62;cursor:pointer;padding:6px 8px}
@media(min-width:900px){.kb-joinbar{display:none!important}}
.kb-search{width:100%;max-width:520px;border:1px solid var(--color-border,#d9cfc6);border-radius:999px;padding:12px 18px;font-size:16px;background:#fff;margin:0 0 16px}
.kb-fresh{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:0 0 22px}
.kb-fresh a{display:block;border:1px solid #F3D9C4;background:#FFF9F3;border-radius:14px;padding:14px;text-decoration:none;color:inherit}
.kb-fresh h3{margin:6px 0 4px;font-size:16px;line-height:1.3}
.kb-archive h2{margin:28px 0 8px;font-size:20px}
.kb-archive ul{list-style:none;padding:0;margin:0}.kb-archive li{padding:10px 0;border-bottom:1px solid var(--color-border,#eee)}
.kb-archive li a{font-weight:700;text-decoration:none}.kb-archive li span{display:block;font-size:13px;color:var(--color-text-muted)}

/* Round 195: password strength meter, email hint, resend countdown, magic link */
.pw-meter{margin:8px 0 4px}.pw-meter__bar{display:block;height:8px;border-radius:99px;background:rgba(0,0,0,.1);overflow:hidden}
.pw-meter__bar i{display:block;height:100%;width:0;border-radius:99px;background:#c0392b;transition:width .2s,background .2s}
.pw-meter[data-level="2"] i{background:#d98e04}.pw-meter[data-level="3"] i{background:#5a9a3a}.pw-meter[data-level="4"] i{background:#2f6f5e}
.pw-meter__label{display:block;font-size:13px;font-style:normal;margin-top:4px;color:var(--color-text-muted,#6b5e57)}
.email-hint{margin:6px 0 0;font-size:14px}.email-hint__use{background:none;border:0;padding:2px 4px;font:inherit;font-weight:700;color:var(--color-primary,#d9411e);text-decoration:underline;cursor:pointer;min-height:36px}
.magic-box{margin:10px 0;padding:12px 14px;border:1px dashed rgba(0,0,0,.2);border-radius:12px}.magic-box form{display:flex;gap:8px;flex-wrap:wrap}.magic-box input{flex:1;min-width:180px}
.resend-wait{font-size:14px;color:var(--color-text-muted,#6b5e57);margin:6px 0}