@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Permanent+Marker&display=swap");

:root{
      --bg:#f4f6f8;
      --card:#ffffff;
      --text:#111827;
      --muted:#6b7280;
      --border:#e5e7eb;
      --shadow:0 6px 18px rgba(0,0,0,.06);
      --shadow2:0 2px 8px rgba(0,0,0,.05);

      --primary:#22c55e;
      --primaryText:#ffffff;
      --chip:#eef1f4;

      --dangerBg:#ffefef;
      --dangerText:#b91c1c;

      --star:#ef4444;
      --scrollbarTrack:rgba(148,163,184,.22);
      --scrollbarThumb:#b6c2d0;
      --scrollbarThumbHover:#93a4b8;

      --toggle-h:40px;
      --toggle-w:60px;
      --menu-trigger-size:48px;
      --count-w:68px;
      --field-h:44px;
      --flag-track-w:50px;
      --flag-track-h:26px;
      --flag-thumb:20px;
      --word-card-side-bleed:4px;
      --footer-actions-offset:120px;
      --footer-underlay-start:28px;
    }

    [data-theme="dark"]{
      --bg:#0b1220;
      --card:#0f1b2d;
      --text:#e5e7eb;
      --muted:#9ca3af;
      --border:#20324b;
      --shadow:0 8px 22px rgba(0,0,0,.35);
      --shadow2:0 4px 14px rgba(0,0,0,.25);

      --chip:#16263f;
      --dangerBg:#3b1620;
      --dangerText:#fecaca;
      --scrollbarTrack:rgba(148,163,184,.18);
      --scrollbarThumb:#2e4767;
      --scrollbarThumbHover:#3e5c80;
    }

    *{ box-sizing:border-box; }
    [hidden]{ display:none !important; }
    html,
    body{
      overflow-x:hidden;
      height:100%;
    }
    body{
      margin:0;
      background:var(--bg);
      color:var(--text);
      font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",system-ui,sans-serif;
      display:flex;
      flex-direction:column;
      min-height:100vh;
      min-height:100svh;
      height:100vh;
      height:100dvh;
      overflow:hidden;
      scrollbar-width:none;
      -ms-overflow-style:none;
    }
    body::-webkit-scrollbar{
      width:0;
      height:0;
    }

    .app{
      width:min(96vw, 460px);
      margin:0 auto;
      padding:14px 0 0;
      padding-left:max(0px, env(safe-area-inset-left));
      padding-right:max(0px, env(safe-area-inset-right));
      flex:1;
      display:flex;
      flex-direction:column;
      min-height:0;
    }

    .app-footer{
      position:fixed;
      left:0;
      right:0;
      bottom:calc(env(safe-area-inset-bottom) + 6px);
      width:100%;
      margin:0;
      padding:4px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
      background:var(--bg);
      text-align:center;
      flex-shrink:0;
      z-index:6;
      isolation:isolate;
    }
    .app-footer.has-actions{
      padding-top:0;
      padding-bottom:8px;
      padding-left:max(0px, env(safe-area-inset-left));
      padding-right:max(0px, env(safe-area-inset-right));
      background:transparent;
    }
    .app-footer::before{
      content:"";
      position:absolute;
      left:0;
      right:0;
      top:-6px;
      height:6px;
      background:var(--bg);
      z-index:0;
      pointer-events:none;
    }
    .app-footer.has-actions::before{
      top:var(--footer-underlay-start);
      bottom:0;
      height:auto;
    }
    .app-footer::after{
      content:"";
      position:absolute;
      left:0;
      right:0;
      bottom:calc(-1 * (env(safe-area-inset-bottom) + 6px));
      height:calc(env(safe-area-inset-bottom) + 6px);
      background:var(--bg);
      z-index:0;
      pointer-events:none;
    }

    .app-footer p{
      max-width:460px;
      margin:0 auto;
      font-size:9px;
      color:var(--muted);
      line-height:1.2;
      position:relative;
      z-index:1;
    }
    .app-footer--home{
      padding-top:4px;
      padding-bottom:8px;
    }
    .footer-landing-links{
      width:min(96vw, 460px);
      margin:0 auto 6px;
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      column-gap:10px;
      row-gap:3px;
      font-size:11px;
      line-height:1.3;
      text-align:center;
      color:var(--muted);
      position:relative;
      z-index:1;
    }
    .footer-landing-links a{
      display:inline-block;
      justify-self:center;
      color:var(--muted);
      text-decoration:none;
      padding:1px 0;
      background-image:linear-gradient(currentColor, currentColor);
      background-repeat:no-repeat;
      background-position:0 100%;
      background-size:0 1px;
      transition:color .2s ease, background-size .22s ease;
    }
    .footer-landing-links-title{
      display:block;
      grid-column:1 / -1;
      color:var(--text);
      font-weight:700;
      margin-bottom:1px;
    }
    .footer-landing-links a:hover,
    .footer-landing-links a:focus-visible{
      color:var(--text);
      background-size:100% 1px;
      outline:none;
    }
    .footer-actions{
      display:grid;
      grid-template-columns:minmax(0, 1fr) var(--count-w);
      gap:8px;
      width:min(96vw, 460px);
      margin:0 auto;
      position:relative;
      z-index:1;
    }
    .footer-actions-card{
      margin:0 auto 0;
      padding:6px 8px;
      position:relative;
      overflow:hidden;
      background:transparent;
      isolation:isolate;
    }
    .footer-actions-card::before{
      content:"";
      position:absolute;
      inset:0;
      border-radius:inherit;
      background:linear-gradient(
        180deg,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0) 48%,
        var(--bg) 58%,
        var(--bg) 100%
      );
      pointer-events:none;
      z-index:0;
    }
    .footer-actions-card > *{
      position:relative;
      z-index:1;
    }
    .footer-actions .btn-main,
    .footer-actions .btn-clear{
      width:100%;
    }

    .topbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding:10px 0 0 2px;
      margin-bottom:12px;
    }

    .title{
      display:flex;
      flex-direction:column;
      gap:2px;
      flex:1 1 auto;
      min-width:0;
    }
    .title--with-logo{
      flex-direction:row;
      align-items:center;
      gap:10px;
    }
    .title-logo-main{
      width:48px;
      height:48px;
      flex:0 0 auto;
      display:block;
    }
    .title-copy{
      display:flex;
      flex-direction:column;
      gap:2px;
      min-width:0;
    }
    .title h1{
      margin:0;
      font-size:22px;
      line-height:1.08;
      letter-spacing:.2px;
      font-weight:800;
    }
    .title .home-topic{
      margin:0;
      font-size:13px;
      line-height:1.3;
      font-weight:500;
      color:var(--muted);
    }
    .subtitle{
      font-size:13px;
      color:var(--muted);
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }

    .toggles{
      display:flex;
      gap:8px;
      align-items:center;
      flex-wrap:nowrap;
      justify-content:flex-end;
      flex-shrink:0;
    }

    .site-lang-toggle{
      display:inline-flex;
      align-items:center;
      gap:8px;
      background:transparent;
      border:0;
      padding:0;
    }
    .site-lang-btn{
      min-width:0;
      height:auto;
      padding:0;
      border-radius:0;
      border:0;
      background:transparent;
      color:var(--muted);
      font-size:12px;
      font-weight:800;
      letter-spacing:.02em;
      cursor:pointer;
      box-shadow:none;
      transition:color .18s ease, opacity .18s ease;
      opacity:.75;
    }
    .site-lang-btn.active{
      color:var(--text);
      opacity:1;
    }
    .site-lang-btn:focus-visible{
      outline:none;
    }

    .chip{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:0 10px;
      height:var(--toggle-h);
      min-width:var(--toggle-w);
      justify-content:center;
      border-radius:12px;
      background:var(--chip);
      border:1px solid var(--border);
      user-select:none;
      font-size:14px;
    }
    .chip input{ width:18px; height:18px; margin:0; }
    .chip svg{
      width:18px;
      height:18px;
      stroke:var(--star);
      fill:rgba(239,68,68,.18);
      stroke-width:2.2;
    }

    .menu{
      position:relative;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      z-index:120;
    }
    .menu-btn{
      width:var(--menu-trigger-size);
      height:var(--menu-trigger-size);
      padding:0;
      border-radius:12px;
      border:1px solid var(--border);
      background:var(--chip);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      overflow:hidden;
      box-shadow:var(--shadow2);
      position:relative;
    }
    .menu-btn::before{
      content:"";
      position:absolute;
      width:34px;
      height:34px;
      left:50%;
      top:50%;
      transform:translate(-50%, -50%);
      border-radius:50%;
      border:1px solid var(--border);
      background:linear-gradient(180deg, rgba(191,211,230,.55), rgba(226,232,240,.92));
      pointer-events:none;
    }
    [data-theme="dark"] .menu-btn::before{
      border-color:rgba(148,163,184,.58);
      background:linear-gradient(180deg, rgba(117,146,177,.58), rgba(62,85,110,.9));
    }
    .menu-btn::after{
      content:none;
    }
    .menu.open .menu-btn::after{
      transform:rotate(180deg);
    }
    .menu-btn--profile .menu-bar{
      display:none;
    }
    .menu-btn--profile::before{
      content:none;
    }
    .menu-btn--profile .menu-avatar{
      position:absolute;
      left:50%;
      top:50%;
      transform:translate(-50%, -50%);
    }
    .menu-avatar{
      width:34px;
      height:34px;
      display:flex;
      align-items:center;
      justify-content:center;
      position:relative;
      border-radius:50%;
      border:1px solid var(--border);
      overflow:hidden;
      background:var(--chip);
    }
    [data-theme="dark"] .menu-avatar{
      border-color:rgba(148,163,184,.58);
      background:rgba(73,95,121,.55);
    }
    .menu-avatar-image{
      width:100%;
      height:100%;
      object-fit:cover;
      object-position:center center;
      display:block;
      border-radius:50%;
    }
    .menu-avatar-image[hidden],
    .menu-avatar-fallback[hidden]{
      display:none !important;
    }
    .menu-avatar-fallback{
      width:100%;
      height:100%;
      display:flex;
      align-items:center;
      justify-content:center;
      position:relative;
      font-size:13px;
      font-weight:700;
      letter-spacing:.02em;
      color:var(--text);
      background:linear-gradient(180deg, rgba(236,242,248,.92), rgba(221,231,241,.92));
    }
    [data-theme="dark"] .menu-avatar-fallback{
      color:#dce8f4;
      background:linear-gradient(180deg, rgba(88,112,140,.9), rgba(58,79,104,.9));
    }
    .menu-avatar-fallback.is-placeholder{
      font-size:0;
      letter-spacing:0;
      color:transparent;
      background-color:transparent;
      background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNjAiIGhlaWdodD0iMTYwIiB2aWV3Qm94PSIwIDAgMTYwIDE2MCIgcm9sZT0iaW1nIiBhcmlhLWxhYmVsPSJBdmF0YXIgcGxhY2Vob2xkZXIiPgogIDxkZWZzPgogICAgPCEtLSBwYWxldHRlIGtlcHQgaW4gdGhlIHNhbWUgZ3JleSBmYW1pbHkgLS0+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImJnIiB4MT0iMCIgeTE9IjAiIHgyPSIwIiB5Mj0iMSI+CiAgICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNFNUU3RUIiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjRDFENURCIi8+CiAgICA8L2xpbmVhckdyYWRpZW50PgoKICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iaGFpciIgeDE9IjAiIHkxPSIwIiB4Mj0iMSIgeTI9IjEiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjNkI3MjgwIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzRCNTU2MyIvPgogICAgPC9saW5lYXJHcmFkaWVudD4KCiAgICA8bGluZWFyR3JhZGllbnQgaWQ9InNraW4iIHgxPSIwIiB5MT0iMCIgeDI9IjAiIHkyPSIxIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI0YzRjRGNiIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNFNUU3RUIiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJzaGlydCIgeDE9IjAiIHkxPSIwIiB4Mj0iMCIgeTI9IjEiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjRjlGQUZCIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI0U1RTdFQiIvPgogICAgPC9saW5lYXJHcmFkaWVudD4KCiAgICA8ZmlsdGVyIGlkPSJzb2Z0U2hhZG93IiB4PSItMjAlIiB5PSItMjAlIiB3aWR0aD0iMTQwJSIgaGVpZ2h0PSIxNDAlIj4KICAgICAgPGZlRHJvcFNoYWRvdyBkeD0iMCIgZHk9IjIiIHN0ZERldmlhdGlvbj0iMiIgZmxvb2QtY29sb3I9IiM5Q0EzQUYiIGZsb29kLW9wYWNpdHk9IjAuMjUiLz4KICAgIDwvZmlsdGVyPgoKICAgIDxjbGlwUGF0aCBpZD0iY2xpcCI+CiAgICAgIDxjaXJjbGUgY3g9IjgwIiBjeT0iODAiIHI9Ijc0Ii8+CiAgICA8L2NsaXBQYXRoPgogIDwvZGVmcz4KCiAgPCEtLSBvdXRlciBjaXJjbGUgLS0+CiAgPGNpcmNsZSBjeD0iODAiIGN5PSI4MCIgcj0iNzgiIGZpbGw9InVybCgjYmcpIi8+CiAgPCEtLSBpbm5lciBzdWJ0bGUgcmluZyAtLT4KICA8Y2lyY2xlIGN4PSI4MCIgY3k9IjgwIiByPSI2OCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRTVFN0VCIiBzdHJva2Utd2lkdGg9IjQiLz4KCiAgPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXApIiBmaWx0ZXI9InVybCgjc29mdFNoYWRvdykiPgogICAgPCEtLSBiYWNrIHBsYXRlIChsaWtlIGluIHlvdXIgZXhhbXBsZSkgLS0+CiAgICA8Y2lyY2xlIGN4PSI4MCIgY3k9Ijc4IiByPSI1NiIgZmlsbD0iI0M3Q0JENiIvPgoKICAgIDwhLS0gc2hvdWxkZXJzIC8gdG9yc28gYmFzZSAtLT4KICAgIDxwYXRoIGQ9Ik0xOCAxNjgKICAgICAgICAgICAgIEMyNCAxMzIgNTIgMTEyIDgwIDExMgogICAgICAgICAgICAgQzEwOCAxMTIgMTM2IDEzMiAxNDIgMTY4CiAgICAgICAgICAgICBaIgogICAgICAgICAgZmlsbD0iIzlDQTNBRiIvPgoKICAgIDwhLS0gc2hpcnQgLS0+CiAgICA8cGF0aCBkPSJNNDYgMTY4CiAgICAgICAgICAgICBDNTAgMTQwIDY0IDEyNCA4MCAxMjQKICAgICAgICAgICAgIEM5NiAxMjQgMTEwIDE0MCAxMTQgMTY4CiAgICAgICAgICAgICBaIgogICAgICAgICAgZmlsbD0idXJsKCNzaGlydCkiLz4KCiAgICA8IS0tIG5lY2sgLS0+CiAgICA8cGF0aCBkPSJNNzAgMTA2CiAgICAgICAgICAgICBDNzAgMTE2IDkwIDExNiA5MCAxMDYKICAgICAgICAgICAgIEw5MCA5NgogICAgICAgICAgICAgTDcwIDk2IFoiCiAgICAgICAgICBmaWxsPSJ1cmwoI3NraW4pIi8+CgogICAgPCEtLSBmYWNlIC0tPgogICAgPHBhdGggZD0iTTgwIDQwCiAgICAgICAgICAgICBDNjAgNDAgNDggNTYgNDggNzYKICAgICAgICAgICAgIEM0OCA5NiA2MCAxMTIgODAgMTEyCiAgICAgICAgICAgICBDMTAwIDExMiAxMTIgOTYgMTEyIDc2CiAgICAgICAgICAgICBDMTEyIDU2IDEwMCA0MCA4MCA0MCBaIgogICAgICAgICAgZmlsbD0idXJsKCNza2luKSIvPgoKICAgIDwhLS0gZWFycyAtLT4KICAgIDxwYXRoIGQ9Ik00OCA3NiBDNDIgNzYgNDAgODQgNDQgOTAgQzQ2IDkzIDUwIDkyIDUyIDkwIEw1MiA3OCBDNTAgNzcgNDkgNzYgNDggNzZaIiBmaWxsPSIjRTVFN0VCIi8+CiAgICA8cGF0aCBkPSJNMTEyIDc2IEMxMTggNzYgMTIwIDg0IDExNiA5MCBDMTE0IDkzIDExMCA5MiAxMDggOTAgTDEwOCA3OCBDMTEwIDc3IDExMSA3NiAxMTIgNzZaIiBmaWxsPSIjRTVFN0VCIi8+CgogICAgPCEtLSBoYWlyOiBzdHlsaXplZCB3YXZ5IHRvcCArIHNpZGVzIChjbG9zZXIgdG8gc2FtcGxlKSAtLT4KICAgIDxwYXRoIGQ9Ik00NiA3NAogICAgICAgICAgICAgQzQ0IDQ4IDYyIDMwIDgwIDMwCiAgICAgICAgICAgICBDOTggMzAgMTE2IDQ4IDExNCA3NAogICAgICAgICAgICAgQzEwOCA3MCAxMDYgNjYgMTA0IDYyCiAgICAgICAgICAgICBDMTAwIDU0IDkyIDUwIDgwIDUwCiAgICAgICAgICAgICBDNjggNTAgNjAgNTQgNTYgNjIKICAgICAgICAgICAgIEM1NCA2NiA1MiA3MCA0NiA3NCBaIgogICAgICAgICAgZmlsbD0idXJsKCNoYWlyKSIvPgoKICAgIDwhLS0gZnJpbmdlIGN1cmxzIC0tPgogICAgPHBhdGggZD0iTTU4IDUyCiAgICAgICAgICAgICBDNjAgNDYgNjYgNDIgNzIgNDIKICAgICAgICAgICAgIEM3MCA0OCA2NCA1MiA1OCA1MloiCiAgICAgICAgICBmaWxsPSIjNEI1NTYzIiBvcGFjaXR5PSIwLjkiLz4KICAgIDxwYXRoIGQ9Ik03NCA0MAogICAgICAgICAgICAgQzc4IDM4IDg0IDM5IDg4IDQyCiAgICAgICAgICAgICBDODQgNDYgNzggNDYgNzQgNDBaIgogICAgICAgICAgZmlsbD0iIzRCNTU2MyIgb3BhY2l0eT0iMC45Ii8+CiAgICA8cGF0aCBkPSJNOTIgNDQKICAgICAgICAgICAgIEM5OCA0NSAxMDIgNDkgMTA0IDU1CiAgICAgICAgICAgICBDOTggNTYgOTQgNTIgOTIgNDRaIgogICAgICAgICAgZmlsbD0iIzRCNTU2MyIgb3BhY2l0eT0iMC45Ii8+CgogICAgPCEtLSBqYWNrZXQgY29sbGFyIChzaW1wbGUgbGlrZSBpY29ucykgLS0+CiAgICA8cGF0aCBkPSJNNDYgMTI2IEw2NiAxNjggTDQ2IDE2OCBaIiBmaWxsPSIjNkI3MjgwIiBvcGFjaXR5PSIwLjg1Ii8+CiAgICA8cGF0aCBkPSJNMTE0IDEyNiBMOTQgMTY4IEwxMTQgMTY4IFoiIGZpbGw9IiM2QjcyODAiIG9wYWNpdHk9IjAuODUiLz4KCiAgICA8IS0tIHRpbnkgaGlnaGxpZ2h0IG9uIGhhaXIgLS0+CiAgICA8cGF0aCBkPSJNNjAgNDQKICAgICAgICAgICAgIEM2NiAzNiA3NiAzNCA4NCAzNgogICAgICAgICAgICAgQzc0IDM4IDY2IDQyIDYwIDQ0WiIKICAgICAgICAgIGZpbGw9IiM5Q0EzQUYiIG9wYWNpdHk9IjAuMzUiLz4KICA8L2c+Cjwvc3ZnPgo=");
      background-repeat:no-repeat;
      background-position:center center;
      background-size:100% 100%;
    }
    .menu-avatar-fallback.is-placeholder::before{
      content:none;
    }
    .menu-avatar-fallback.is-placeholder::after{
      content:none;
    }
    [data-theme="dark"] .menu-avatar-fallback.is-placeholder{
      background-color:transparent;
      background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNjAiIGhlaWdodD0iMTYwIiB2aWV3Qm94PSIwIDAgMTYwIDE2MCIgcm9sZT0iaW1nIiBhcmlhLWxhYmVsPSJBdmF0YXIgcGxhY2Vob2xkZXIiPgogIDxkZWZzPgogICAgPCEtLSBwYWxldHRlIGtlcHQgaW4gdGhlIHNhbWUgZ3JleSBmYW1pbHkgLS0+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImJnIiB4MT0iMCIgeTE9IjAiIHgyPSIwIiB5Mj0iMSI+CiAgICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNFNUU3RUIiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjRDFENURCIi8+CiAgICA8L2xpbmVhckdyYWRpZW50PgoKICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iaGFpciIgeDE9IjAiIHkxPSIwIiB4Mj0iMSIgeTI9IjEiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjNkI3MjgwIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzRCNTU2MyIvPgogICAgPC9saW5lYXJHcmFkaWVudD4KCiAgICA8bGluZWFyR3JhZGllbnQgaWQ9InNraW4iIHgxPSIwIiB5MT0iMCIgeDI9IjAiIHkyPSIxIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI0YzRjRGNiIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNFNUU3RUIiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJzaGlydCIgeDE9IjAiIHkxPSIwIiB4Mj0iMCIgeTI9IjEiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjRjlGQUZCIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI0U1RTdFQiIvPgogICAgPC9saW5lYXJHcmFkaWVudD4KCiAgICA8ZmlsdGVyIGlkPSJzb2Z0U2hhZG93IiB4PSItMjAlIiB5PSItMjAlIiB3aWR0aD0iMTQwJSIgaGVpZ2h0PSIxNDAlIj4KICAgICAgPGZlRHJvcFNoYWRvdyBkeD0iMCIgZHk9IjIiIHN0ZERldmlhdGlvbj0iMiIgZmxvb2QtY29sb3I9IiM5Q0EzQUYiIGZsb29kLW9wYWNpdHk9IjAuMjUiLz4KICAgIDwvZmlsdGVyPgoKICAgIDxjbGlwUGF0aCBpZD0iY2xpcCI+CiAgICAgIDxjaXJjbGUgY3g9IjgwIiBjeT0iODAiIHI9Ijc0Ii8+CiAgICA8L2NsaXBQYXRoPgogIDwvZGVmcz4KCiAgPCEtLSBvdXRlciBjaXJjbGUgLS0+CiAgPGNpcmNsZSBjeD0iODAiIGN5PSI4MCIgcj0iNzgiIGZpbGw9InVybCgjYmcpIi8+CiAgPCEtLSBpbm5lciBzdWJ0bGUgcmluZyAtLT4KICA8Y2lyY2xlIGN4PSI4MCIgY3k9IjgwIiByPSI2OCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRTVFN0VCIiBzdHJva2Utd2lkdGg9IjQiLz4KCiAgPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXApIiBmaWx0ZXI9InVybCgjc29mdFNoYWRvdykiPgogICAgPCEtLSBiYWNrIHBsYXRlIChsaWtlIGluIHlvdXIgZXhhbXBsZSkgLS0+CiAgICA8Y2lyY2xlIGN4PSI4MCIgY3k9Ijc4IiByPSI1NiIgZmlsbD0iI0M3Q0JENiIvPgoKICAgIDwhLS0gc2hvdWxkZXJzIC8gdG9yc28gYmFzZSAtLT4KICAgIDxwYXRoIGQ9Ik0xOCAxNjgKICAgICAgICAgICAgIEMyNCAxMzIgNTIgMTEyIDgwIDExMgogICAgICAgICAgICAgQzEwOCAxMTIgMTM2IDEzMiAxNDIgMTY4CiAgICAgICAgICAgICBaIgogICAgICAgICAgZmlsbD0iIzlDQTNBRiIvPgoKICAgIDwhLS0gc2hpcnQgLS0+CiAgICA8cGF0aCBkPSJNNDYgMTY4CiAgICAgICAgICAgICBDNTAgMTQwIDY0IDEyNCA4MCAxMjQKICAgICAgICAgICAgIEM5NiAxMjQgMTEwIDE0MCAxMTQgMTY4CiAgICAgICAgICAgICBaIgogICAgICAgICAgZmlsbD0idXJsKCNzaGlydCkiLz4KCiAgICA8IS0tIG5lY2sgLS0+CiAgICA8cGF0aCBkPSJNNzAgMTA2CiAgICAgICAgICAgICBDNzAgMTE2IDkwIDExNiA5MCAxMDYKICAgICAgICAgICAgIEw5MCA5NgogICAgICAgICAgICAgTDcwIDk2IFoiCiAgICAgICAgICBmaWxsPSJ1cmwoI3NraW4pIi8+CgogICAgPCEtLSBmYWNlIC0tPgogICAgPHBhdGggZD0iTTgwIDQwCiAgICAgICAgICAgICBDNjAgNDAgNDggNTYgNDggNzYKICAgICAgICAgICAgIEM0OCA5NiA2MCAxMTIgODAgMTEyCiAgICAgICAgICAgICBDMTAwIDExMiAxMTIgOTYgMTEyIDc2CiAgICAgICAgICAgICBDMTEyIDU2IDEwMCA0MCA4MCA0MCBaIgogICAgICAgICAgZmlsbD0idXJsKCNza2luKSIvPgoKICAgIDwhLS0gZWFycyAtLT4KICAgIDxwYXRoIGQ9Ik00OCA3NiBDNDIgNzYgNDAgODQgNDQgOTAgQzQ2IDkzIDUwIDkyIDUyIDkwIEw1MiA3OCBDNTAgNzcgNDkgNzYgNDggNzZaIiBmaWxsPSIjRTVFN0VCIi8+CiAgICA8cGF0aCBkPSJNMTEyIDc2IEMxMTggNzYgMTIwIDg0IDExNiA5MCBDMTE0IDkzIDExMCA5MiAxMDggOTAgTDEwOCA3OCBDMTEwIDc3IDExMSA3NiAxMTIgNzZaIiBmaWxsPSIjRTVFN0VCIi8+CgogICAgPCEtLSBoYWlyOiBzdHlsaXplZCB3YXZ5IHRvcCArIHNpZGVzIChjbG9zZXIgdG8gc2FtcGxlKSAtLT4KICAgIDxwYXRoIGQ9Ik00NiA3NAogICAgICAgICAgICAgQzQ0IDQ4IDYyIDMwIDgwIDMwCiAgICAgICAgICAgICBDOTggMzAgMTE2IDQ4IDExNCA3NAogICAgICAgICAgICAgQzEwOCA3MCAxMDYgNjYgMTA0IDYyCiAgICAgICAgICAgICBDMTAwIDU0IDkyIDUwIDgwIDUwCiAgICAgICAgICAgICBDNjggNTAgNjAgNTQgNTYgNjIKICAgICAgICAgICAgIEM1NCA2NiA1MiA3MCA0NiA3NCBaIgogICAgICAgICAgZmlsbD0idXJsKCNoYWlyKSIvPgoKICAgIDwhLS0gZnJpbmdlIGN1cmxzIC0tPgogICAgPHBhdGggZD0iTTU4IDUyCiAgICAgICAgICAgICBDNjAgNDYgNjYgNDIgNzIgNDIKICAgICAgICAgICAgIEM3MCA0OCA2NCA1MiA1OCA1MloiCiAgICAgICAgICBmaWxsPSIjNEI1NTYzIiBvcGFjaXR5PSIwLjkiLz4KICAgIDxwYXRoIGQ9Ik03NCA0MAogICAgICAgICAgICAgQzc4IDM4IDg0IDM5IDg4IDQyCiAgICAgICAgICAgICBDODQgNDYgNzggNDYgNzQgNDBaIgogICAgICAgICAgZmlsbD0iIzRCNTU2MyIgb3BhY2l0eT0iMC45Ii8+CiAgICA8cGF0aCBkPSJNOTIgNDQKICAgICAgICAgICAgIEM5OCA0NSAxMDIgNDkgMTA0IDU1CiAgICAgICAgICAgICBDOTggNTYgOTQgNTIgOTIgNDRaIgogICAgICAgICAgZmlsbD0iIzRCNTU2MyIgb3BhY2l0eT0iMC45Ii8+CgogICAgPCEtLSBqYWNrZXQgY29sbGFyIChzaW1wbGUgbGlrZSBpY29ucykgLS0+CiAgICA8cGF0aCBkPSJNNDYgMTI2IEw2NiAxNjggTDQ2IDE2OCBaIiBmaWxsPSIjNkI3MjgwIiBvcGFjaXR5PSIwLjg1Ii8+CiAgICA8cGF0aCBkPSJNMTE0IDEyNiBMOTQgMTY4IEwxMTQgMTY4IFoiIGZpbGw9IiM2QjcyODAiIG9wYWNpdHk9IjAuODUiLz4KCiAgICA8IS0tIHRpbnkgaGlnaGxpZ2h0IG9uIGhhaXIgLS0+CiAgICA8cGF0aCBkPSJNNjAgNDQKICAgICAgICAgICAgIEM2NiAzNiA3NiAzNCA4NCAzNgogICAgICAgICAgICAgQzc0IDM4IDY2IDQyIDYwIDQ0WiIKICAgICAgICAgIGZpbGw9IiM5Q0EzQUYiIG9wYWNpdHk9IjAuMzUiLz4KICA8L2c+Cjwvc3ZnPgo=");
    }
    .menu-bar{
      width:20px;
      height:2px;
      border-radius:2px;
      background:var(--text);
      display:none;
    }
    .menu-panel{
      position:absolute;
      right:0;
      top:calc(100% + 6px);
      background:var(--card);
      border:1px solid var(--border);
      border-radius:12px;
      box-shadow:var(--shadow2);
      padding:6px;
      min-width:190px;
      display:none;
      z-index:121;
    }
    .menu.open .menu-panel{
      display:block;
    }
    .menu-item{
      display:flex;
      align-items:center;
      gap:8px;
      padding:8px 10px;
      border-radius:10px;
      font-size:14px;
      color:var(--text);
      text-decoration:none;
      cursor:pointer;
      user-select:none;
      line-height:1.2;
    }
    .menu-item:hover{
      background:var(--chip);
    }
    .menu-item--button{
      width:100%;
      border:0;
      background:transparent;
      text-align:left;
      font-family:inherit;
      font-size:14px;
      font-weight:400;
      line-height:1.2;
      color:var(--text);
    }
    .menu-item--button:hover{
      background:var(--chip);
    }
    .menu-item--auth{
      font-size:14px;
      font-weight:400;
      line-height:1.2;
      color:var(--text);
    }
    .menu-item--danger{
      color:var(--text);
    }
    a.menu-item--auth:visited,
    a.menu-item--danger:visited{
      color:var(--text);
    }
    .menu-auth-divider{
      margin:0 2px 6px;
      border-top:1px solid var(--border);
    }
    .menu-item > input{
      width:18px;
      height:18px;
    }
    .menu-item span{
      display:block;
      white-space:normal;
    }
    #homeHelpText,
    #menuHelpText{
      min-width:0;
      max-width:100%;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .menu-item--toggle .menu-switch{
      margin-left:auto;
    }
    .menu-item-label{
      flex:1 1 auto;
      min-width:0;
    }
    .menu-footer{
      margin-top:6px;
      padding:8px 10px;
      border-top:1px solid var(--border);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
      font-size:14px;
      line-height:1.2;
      color:var(--muted);
      user-select:none;
      opacity:.9;
    }
    .menu-footer-label{
      font-size:12px;
      letter-spacing:.02em;
    }
    .menu-footer-value{
      font-size:12px;
      letter-spacing:.02em;
      font-weight:400;
      color:inherit;
    }

    .menu-switch{
      --menu-track-w:44px;
      --menu-track-h:24px;
      --menu-thumb:18px;

      position:relative;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:var(--menu-track-w);
      height:var(--menu-track-h);
      flex:0 0 auto;
      isolation:isolate;
    }
    .menu-switch input{
      position:absolute;
      inset:0;
      opacity:0;
      margin:0;
      cursor:pointer;
      z-index:2;
    }
    .menu-switch-track{
      position:relative;
      width:100%;
      height:100%;
      border-radius:999px;
      background:transparent;
      border:1px solid var(--border);
      box-shadow:none;
      opacity:1;
      overflow:hidden;
      display:block;
      transition:opacity .24s ease, box-shadow .24s ease, background .24s ease, border-color .24s ease;
    }
    [data-theme="dark"] .menu-switch-track{
      background:transparent;
    }
    .menu-switch-thumb{
      position:absolute;
      top:50%;
      left:3px;
      width:var(--menu-thumb);
      height:var(--menu-thumb);
      border-radius:999px;
      background:#ffffff;
      box-shadow:0 8px 18px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.7);
      transform:translate(0,-50%);
      transition:transform .24s ease, box-shadow .24s ease, background .24s ease;
      z-index:1;
    }
    .menu-switch-thumb::after{
      content:"";
      position:absolute;
      inset:0;
      margin:auto;
      width:70%;
      height:70%;
      background-image:var(--thumb-icon-cross);
      background-repeat:no-repeat;
      background-position:center;
      background-size:contain;
      pointer-events:none;
    }
    .menu-switch input:focus-visible + .menu-switch-track,
    .menu-switch input:focus-visible + .menu-switch-track .menu-switch-thumb{
      box-shadow:0 0 0 3px rgba(59,130,246,.35), inset 0 1px 0 rgba(255,255,255,.1);
    }
    .menu-switch input:checked + .menu-switch-track{
      border-color:var(--border);
      background:var(--chip);
      box-shadow:none;
    }
    .menu-switch input:checked + .menu-switch-track .menu-switch-thumb{
      transform:translate(calc(var(--menu-track-w) - var(--menu-thumb) - 6px), -50%);
      box-shadow:0 12px 26px rgba(0,0,0,.32);
    }
    .menu-switch input:checked + .menu-switch-track .menu-switch-thumb::after{
      background-image:var(--thumb-icon-check);
    }

    .card{
      background:var(--card);
      border:1px solid var(--border);
      border-radius:16px;
      box-shadow:var(--shadow);
      padding:12px;
      margin-bottom:12px;
    }

    .controls-card{
      margin-bottom:12px;
      position:relative;
      padding-bottom:13px;
    }
    .controls-search{
      display:grid;
      gap:8px;
      max-height:0;
      opacity:0;
      overflow:hidden;
      margin-top:0;
      transform:translateY(-6px) scaleY(.92);
      transform-origin:top center;
      pointer-events:none;
      will-change:max-height, opacity, transform;
      transition:
        max-height .34s cubic-bezier(.22, 1, .36, 1),
        opacity .22s ease,
        margin-top .34s cubic-bezier(.22, 1, .36, 1),
        transform .34s cubic-bezier(.22, 1, .36, 1);
    }
    .controls-card.search-open .controls-search{
      max-height:72px;
      opacity:1;
      margin-top:8px;
      transform:translateY(0) scaleY(1);
      pointer-events:auto;
    }
    #searchInput{
      height:var(--field-h);
      font-size:14px;
      background:var(--card);
      box-shadow:0 10px 22px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.06);
      transition:border-color .2s ease, box-shadow .2s ease, transform .12s ease;
    }
    #searchInput::placeholder{
      color:var(--muted);
      opacity:1;
    }
    #searchInput:focus{
      border-color:rgba(59,130,246,.45);
      box-shadow:0 0 0 3px rgba(59,130,246,.18), 0 12px 24px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.08);
    }
    .controls-toggle{
      position:absolute;
      left:50%;
      bottom:0;
      width:40px;
      height:15px;
      margin:0;
      padding:0;
      transform:translate(-50%, 50%);
      border-radius:999px;
      border:1px solid var(--border);
      background:var(--card);
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      box-shadow:var(--shadow2);
      z-index:2;
    }
    .controls-toggle-icon{
      width:12px;
      height:12px;
      color:var(--muted);
      stroke-width:2.2;
      transition:color .24s ease, transform .24s ease, opacity .24s ease;
      opacity:.95;
    }
    .controls-card.search-open .controls-toggle-icon{
      color:var(--text);
      transform:scale(1.02);
      opacity:.92;
    }
    .controls-toggle:active{
      transform:translate(-50%, calc(50% + 1px));
    }
    .controls-toggle:focus-visible{
      outline:none;
      box-shadow:0 0 0 3px rgba(59,130,246,.25), var(--shadow2);
    }

    .words-scroll{
      flex:1 1 auto;
      min-height:0;
      overflow-y:auto;
      overflow-x:hidden;
      display:flex;
      flex-direction:column;
      padding-bottom:calc(64px + env(safe-area-inset-bottom));
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
      -ms-overflow-style:none;
    }
    .app.has-footer-actions .words-scroll{
      padding-bottom:calc(var(--footer-actions-offset) + env(safe-area-inset-bottom));
    }
    body.home-page .words-scroll{
      padding-bottom:calc(176px + env(safe-area-inset-bottom));
    }
    .words-scroll::-webkit-scrollbar{
      width:0;
      height:0;
    }

    body.home-page .help-card.card{
      background:transparent;
      border:0;
      box-shadow:none;
      padding:0;
      margin-bottom:12px;
    }
    .home-intro-wrap{
      position:sticky;
      top:0;
      z-index:5;
      padding-bottom:0;
      isolation:isolate;
    }
    .home-intro-wrap::before{
      content:"";
      position:absolute;
      left:0;
      right:0;
      top:0;
      height:60%;
      background:var(--bg);
      z-index:0;
      pointer-events:none;
    }
    .home-intro-wrap .home-intro-card{
      position:relative;
      z-index:1;
    }
    .home-intro-card{
      margin:0 0 12px;
      padding:12px 14px;
      border:1px solid var(--border);
      background:var(--card);
      box-shadow:var(--shadow);
    }
    .home-intro-title{
      margin:0 0 6px;
      font-size:15px;
      line-height:1.35;
      letter-spacing:.01em;
    }
    .home-intro-text{
      margin:0;
      font-size:13px;
      line-height:1.5;
      color:var(--muted);
    }
    .stats-wrap{
      position:sticky;
      top:0;
      z-index:5;
      padding-bottom:0;
      isolation:isolate;
    }
    .stats-wrap::before{
      content:"";
      position:absolute;
      left:0;
      right:0;
      top:0;
      height:60%;
      background:var(--bg);
      z-index:0;
      pointer-events:none;
    }
    .stats-card{
      position:relative;
      z-index:1;
      margin-bottom:12px;
    }

    .controls{
      display:grid;
      gap:10px;
    }

    select,input{
      width:100%;
      padding:0 12px;
      font-size:16px;
      border-radius:12px;
      border:1px solid var(--border);
      background:transparent;
      color:var(--text);
      outline:none;
      transition:border-color .2s ease, box-shadow .2s ease, transform .12s ease;
    }
    select{
      min-width:0;
      max-width:100%;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .select-wrap{
      position:relative;
      width:100%;
    }
    .select-wrap select{
      position:absolute;
      inset:0;
      opacity:0;
      pointer-events:none;
      width:100%;
      height:100%;
    }
    .select-button{
      width:100%;
      padding:0 12px;
      font-size:16px;
      border-radius:12px;
      border:1px solid var(--border);
      background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.02));
      color:var(--text);
      text-align:left;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
      cursor:pointer;
      overflow:hidden;
      height:var(--field-h);
      box-shadow:0 10px 22px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.06);
      transition:border-color .2s ease, box-shadow .2s ease, transform .12s ease;
    }
    .select-value{
      min-width:0;
      flex:1 1 auto;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .select-button::after{
      content:"";
      width:6px;
      height:6px;
      border-right:2px solid var(--muted);
      border-bottom:2px solid var(--muted);
      transform:rotate(45deg);
      margin-left:auto;
      flex:0 0 auto;
    }
    .select-wheel{
      width:100%;
      min-width:0;
      height:var(--field-h);
      border-radius:12px;
      border:1px solid var(--border);
      background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.02));
      box-shadow:0 10px 22px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.06);
      transition:border-color .2s ease, box-shadow .2s ease, transform .12s ease;
      position:relative;
      overflow:hidden;
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:ns-resize;
      user-select:none;
      touch-action:none;
    }
    .select-wheel:focus-visible{
      border-color:rgba(59,130,246,.45);
      box-shadow:0 0 0 3px rgba(59,130,246,.18), 0 12px 24px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.08);
      outline:none;
    }
    .select-wheel::before,
    .select-wheel::after{
      content:"";
      position:absolute;
      left:0;
      right:0;
      height:30%;
      pointer-events:none;
      z-index:2;
    }
    .select-wheel::before{
      top:0;
      background:linear-gradient(180deg, var(--card), rgba(0,0,0,0));
    }
    .select-wheel::after{
      bottom:0;
      background:linear-gradient(0deg, var(--card), rgba(0,0,0,0));
    }
    .select-wheel-track{
      height:100%;
      width:100%;
      display:grid;
      grid-template-rows:1fr 1fr 1fr;
      align-items:center;
      transform:translateY(0);
      transition:transform .09s ease;
      position:relative;
      z-index:1;
      pointer-events:none;
    }
    .select-wheel-item{
      width:100%;
      min-width:0;
      padding:0 30px 0 12px;
      font-size:11px;
      line-height:1;
      font-weight:600;
      color:var(--muted);
      opacity:.77;
      letter-spacing:.01em;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      pointer-events:none;
    }
    .select-wheel-item[data-slot="prev"]{
      transform:translateY(-2px);
    }
    .select-wheel-item[data-slot="next"]{
      transform:translateY(2px);
    }
    #wordlistWheel .select-wheel-item[data-slot="prev"],
    #wordlistWheel .select-wheel-item[data-slot="next"]{
      visibility:hidden;
      opacity:0;
    }
    .select-wheel-item.is-current{
      font-size:14px;
      color:var(--text);
      opacity:1;
      font-weight:740;
      text-shadow:0 0 14px rgba(59,130,246,.18);
    }
    .select-wheel-chevron{
      position:absolute;
      right:8px;
      top:50%;
      width:16px;
      height:16px;
      color:var(--muted);
      stroke:currentColor;
      stroke-width:2.6;
      stroke-linecap:round;
      stroke-linejoin:round;
      fill:none;
      transform:translateY(-50%);
      transition:transform .16s ease, color .16s ease, opacity .16s ease;
      pointer-events:none;
      z-index:3;
      opacity:.92;
    }
    .select-wheel.is-grabbing{
      cursor:grabbing;
    }
    .select-wheel.is-ratchet-up .select-wheel-track{
      animation:count-ratchet-up .12s cubic-bezier(.2,.8,.2,1);
    }
    .select-wheel.is-ratchet-down .select-wheel-track{
      animation:count-ratchet-down .12s cubic-bezier(.2,.8,.2,1);
    }
    .select-dropdown{
      position:absolute;
      left:0;
      right:0;
      top:100%;
      margin-top:6px;
      background:var(--card);
      border:1px solid var(--border);
      border-radius:12px;
      box-shadow:var(--shadow2);
      padding:6px;
      display:none;
      z-index:10;
      max-height:min(70vh, 420px);
      overflow:auto;
      overscroll-behavior:contain;
      scrollbar-width:thin;
      scrollbar-color:var(--scrollbarThumb) var(--scrollbarTrack);
    }
    .select-dropdown::-webkit-scrollbar{
      width:10px;
      height:10px;
    }
    .select-dropdown::-webkit-scrollbar-track{
      background:var(--scrollbarTrack);
      border-radius:999px;
      margin:6px 0;
    }
    .select-dropdown::-webkit-scrollbar-thumb{
      background:var(--scrollbarThumb);
      border-radius:999px;
      border:2px solid transparent;
      background-clip:padding-box;
      min-height:32px;
    }
    .select-dropdown::-webkit-scrollbar-thumb:hover{
      background:var(--scrollbarThumbHover);
    }
    .select-header{
      padding:6px 10px 4px;
      font-size:11px;
      color:var(--muted);
      text-transform:uppercase;
      letter-spacing:.08em;
    }
    .select-subcategory{
      margin:4px 0 2px;
      padding:8px 10px 0;
      width:100%;
      border:0;
      background:transparent;
      text-align:left;
      cursor:pointer;
      font-size:12px;
      line-height:1.2;
      color:var(--muted);
      font-weight:600;
      letter-spacing:.01em;
      display:flex;
      align-items:center;
      justify-content:flex-start;
      gap:0;
    }
    .select-subcategory-toggle:focus-visible{
      outline:none;
      box-shadow:0 0 0 2px rgba(59,130,246,.22);
      border-radius:8px;
    }
    .select-subcategory-label{
      min-width:0;
    }
    .select-subcategory-chevron{
      width:6.3px;
      height:6.3px;
      border-right:1.8px solid var(--muted);
      border-bottom:1.8px solid var(--muted);
      transform:rotate(45deg);
      transition:transform .16s ease;
      flex:0 0 auto;
      margin-left:auto;
    }
    .select-subcategory-wrap.is-open .select-subcategory-chevron{
      border-right-color:rgba(59,130,246,.82);
      border-bottom-color:rgba(59,130,246,.82);
      transform:rotate(-135deg) translate(-1px, 1px);
    }
    .select-subcategory-panel{
      padding:2px 0;
    }
    .select-subcategory-panel[hidden]{
      display:none;
    }
    .select-subcategory-badge{
      flex:0 0 auto;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      margin-left:6px;
      padding:2px 5px 1px;
      border-radius:4px;
      border:0;
      background:#22c55e;
      color:var(--bg);
      font-size:9px;
      line-height:1;
      font-weight:800;
      letter-spacing:.09em;
      text-transform:uppercase;
      box-shadow:none;
    }
    .select-subcategory.is-first{
      margin-top:0;
      padding-top:4px;
      border-top:0;
    }
    [data-theme="dark"] .select-subcategory-badge{
      border:0;
      color:var(--bg);
      background:#22c55e;
      box-shadow:none;
    }
    .select-wrap.open .select-dropdown{
      display:block;
    }
    .select-wrap.open .select-wheel{
      border-color:rgba(59,130,246,.35);
      box-shadow:0 12px 24px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.08);
    }
    .select-wrap.is-invalid .select-wheel{
      border-color:rgba(239,68,68,.78);
      box-shadow:0 0 0 2px rgba(239,68,68,.2), 0 10px 22px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.06);
    }
    .select-wrap.open.is-invalid .select-wheel{
      border-color:rgba(239,68,68,.82);
      box-shadow:0 0 0 2px rgba(239,68,68,.22), 0 12px 24px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.08);
    }
    .select-wrap.open .select-wheel-chevron{
      transform:translateY(-50%) rotate(180deg);
      color:rgba(59,130,246,.82);
    }
    .select-wrap.open .select-button{
      border-color:rgba(59,130,246,.35);
      box-shadow:0 12px 24px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.08);
    }
    .select-option{
      width:100%;
      padding:10px 10px;
      border-radius:10px;
      border:0;
      background:transparent;
      text-align:left;
      font-size:14px;
      color:var(--text);
      cursor:pointer;
    }
    .select-option:hover{
      background:var(--chip);
    }
    .select-option.selected{
      background:rgba(59,130,246,.12);
      font-weight:600;
    }

    .row-top{
      display:grid;
      grid-template-columns:minmax(0, 1fr) var(--count-w);
      gap:8px;
      align-items:center;
    }
    .row-top > *{ min-width:0; }

    .count-wheel{
      width:100%;
      min-width:0;
      height:var(--field-h);
      border-radius:0;
      border:0;
      background:transparent;
      box-shadow:none;
      transition:color .2s ease, transform .12s ease;
      position:relative;
      overflow:visible;
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:ns-resize;
      user-select:none;
      touch-action:none;
    }
    .count-wheel:focus-visible{
      box-shadow:0 0 0 3px rgba(59,130,246,.18);
      outline:none;
    }
    .count-wheel::before,
    .count-wheel::after{
      content:none;
    }
    .count-wheel-track{
      height:100%;
      width:100%;
      display:grid;
      grid-template-rows:1fr 1fr 1fr;
      align-items:center;
      justify-items:center;
      transform:translateY(0);
      transition:transform .09s ease;
    }
    .count-wheel-item{
      font-size:11px;
      line-height:1;
      font-weight:600;
      color:var(--muted);
      opacity:.77;
      font-variant-numeric:tabular-nums;
      letter-spacing:.02em;
      pointer-events:none;
    }
    .count-wheel-item[data-slot="prev"]{
      transform:translateY(-2px);
      font-size:10px;
      opacity:.68;
    }
    .count-wheel-item[data-slot="next"]{
      transform:translateY(2px);
      font-size:10px;
      opacity:.68;
    }
    .count-wheel-item.is-current{
      font-size:15px;
      color:var(--text);
      opacity:1;
      font-weight:750;
      text-shadow:0 0 14px rgba(59,130,246,.18);
    }
    .count-wheel.is-grabbing{
      cursor:grabbing;
    }
    .count-wheel.is-ratchet-up .count-wheel-track{
      animation:count-ratchet-up .12s cubic-bezier(.2,.8,.2,1);
    }
    .count-wheel.is-ratchet-down .count-wheel-track{
      animation:count-ratchet-down .12s cubic-bezier(.2,.8,.2,1);
    }
    .count-wheel-input{
      position:absolute;
      width:1px;
      height:1px;
      padding:0;
      margin:-1px;
      overflow:hidden;
      clip:rect(0,0,0,0);
      white-space:nowrap;
      border:0;
      opacity:0;
      pointer-events:none;
    }
    @keyframes count-ratchet-up{
      0%{ transform:translateY(0); }
      45%{ transform:translateY(-3px); }
      100%{ transform:translateY(0); }
    }
    @keyframes count-ratchet-down{
      0%{ transform:translateY(0); }
      45%{ transform:translateY(3px); }
      100%{ transform:translateY(0); }
    }

    .select-button:focus-visible{
      border-color:rgba(59,130,246,.45);
      box-shadow:0 0 0 3px rgba(59,130,246,.18), 0 12px 24px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.08);
      outline:none;
    }

    .mode-toggle{
      display:flex;
      flex-direction:row;
      gap:10px;
      align-items:center;
      justify-content:flex-start;
      height:var(--flag-track-h);
    }

    .flag-toggle{
      position:relative;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      isolation:isolate;
      width:var(--flag-track-w);
      height:var(--flag-track-h);
    }
    .flag-toggle input{
      position:absolute;
      inset:0;
      opacity:0;
      cursor:pointer;
      z-index:3;
    }
    .switch-track{
      position:relative;
      width:100%;
      height:100%;
      border-radius:999px;
      background:rgba(255,255,255,0.08);
      border:1px solid var(--border);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 4px 10px rgba(0,0,0,.18);
      opacity:.85;
      overflow:hidden;
      transition:opacity .24s ease, box-shadow .24s ease, background-position .3s ease, filter .24s ease, background-image .3s ease, transform .24s ease;
      background-size:120% 120%;
      background-position:left center;
      background-repeat:no-repeat;
      filter:saturate(.9);
    }
    :root{
      --thumb-icon-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5 10 18 20 6' fill='none' stroke='%230f5b3f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      --thumb-icon-cross:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6 18 18M18 6 6 18' fill='none' stroke='%238aa18f' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
    }
    [data-theme="dark"] .switch-track{
      background:rgba(255,255,255,0.05);
    }
    .switch-track.flag-ua{
      background-image:linear-gradient(180deg, #005BBB 0%, #005BBB 50%, #FFD500 50%, #FFD500 100%);
    }
    .switch-track.flag-hu{
      background-image:linear-gradient(180deg, #CE2939 0%, #CE2939 33%, #FFFFFF 33%, #FFFFFF 66%, #477050 66%, #477050 100%);
    }
    .switch-track.flag-lang-source{
      background-image:var(--lang-source-flag, linear-gradient(180deg, #005BBB 0%, #005BBB 50%, #FFD500 50%, #FFD500 100%));
    }
    .switch-track.flag-lang-target{
      background-image:var(--lang-target-flag, linear-gradient(180deg, #CE2939 0%, #CE2939 33%, #FFFFFF 33%, #FFFFFF 66%, #477050 66%, #477050 100%));
    }
    .switch-thumb{
      position:absolute;
      top:50%;
      left:3px;
      width:var(--flag-thumb);
      height:var(--flag-thumb);
      border-radius:999px;
      background:#ffffff;
      box-shadow:0 8px 18px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.7);
      transform:translate(0,-50%);
      transition:transform .24s ease, box-shadow .24s ease, background .24s ease;
      z-index:2;
    }
    .switch-thumb::after{
      content:"";
      position:absolute;
      inset:0;
      margin:auto;
      width:70%;
      height:70%;
      background-image:var(--thumb-icon-cross);
      background-repeat:no-repeat;
      background-position:center;
      background-size:contain;
      pointer-events:none;
    }
    .flag-toggle input:focus-visible + .switch-track,
    .flag-toggle input:focus-visible + .switch-track .switch-thumb{
      box-shadow:0 0 0 3px rgba(59,130,246,.35), inset 0 1px 0 rgba(255,255,255,.1);
    }
    .flag-toggle.active .switch-track{
      opacity:1;
      background-position:right center;
      box-shadow:0 10px 24px rgba(0,0,0,.28);
      filter:saturate(1.05) brightness(1.03);
    }
    .flag-toggle.active .switch-thumb{
      transform:translate(calc(var(--flag-track-w) - var(--flag-thumb) - 6px), -50%);
      box-shadow:0 12px 26px rgba(0,0,0,.40);
    }
    .flag-toggle.active .switch-thumb::after{
      background-image:var(--thumb-icon-check);
    }
    /* ensure inactive is noticeably darker */
    .flag-toggle:not(.active) .switch-track{
      filter:saturate(.6) brightness(.45);
    }
    .flag-toggle:hover .switch-track{
      opacity:.9;
    }
    .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;
    }

    button{
      padding:12px;
      font-size:15px;
      border-radius:12px;
      border:1px solid var(--border);
      background:transparent;
      color:var(--text);
      cursor:pointer;
    }

    button:active{ transform:translateY(1px); }

    .btn-main{
      background:linear-gradient(180deg, #58ae67 0%, #4f9f5b 100%);
      border-color:transparent;
      color:var(--primaryText);
      font-weight:700;
      height:var(--field-h);
      box-shadow:0 6px 14px rgba(20,55,32,.22);
    }
    .btn-main:focus-visible,
    a.btn-main:focus-visible{
      outline:none;
      box-shadow:
        0 0 0 3px rgba(80,200,120,.3),
        0 6px 14px rgba(20,55,32,.22);
    }

    .btn-secondary{
      background:transparent;
    }

    .btn-clear{
      background:var(--dangerBg);
      color:var(--dangerText);
      border-color:transparent;
      font-weight:600;
      width:100%;
      height:var(--field-h);
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
    }

    .progress{
      display:grid;
      grid-template-columns:minmax(0, 1fr) auto;
      gap:10px;
      align-items:flex-start;
    }
    .stats{
      display:grid;
      grid-template-columns:repeat(3, max-content);
      justify-content:flex-start;
      gap:16px;
      align-items:flex-start;
      min-width:0;
      overflow:visible;
      padding-bottom:20px;
    }
    .stat{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:6px;
      font-size:12px;
      color:var(--muted);
      padding:6px 9px;
      border-radius:10px;
      background:transparent;
      border:1px dashed var(--border);
      min-width:55px;
      white-space:nowrap;
      overflow:visible;
      text-align:center;
      position:relative;
    }
    #statFav,
    #statKnown,
    #statRepeat{
      border-style:solid;
    }
    button.stat{
      appearance:none;
      -webkit-appearance:none;
      cursor:pointer;
      user-select:none;
      transition:background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
    }
    button.stat:active{ transform:none; }
    button.stat.active{
      color:var(--text);
    }
    button.stat:focus-visible{
      outline:none;
      box-shadow:0 0 0 3px rgba(59,130,246,.25), inset 0 1px 0 rgba(255,255,255,.08);
    }
    .stats .stat{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:6px;
      padding:6px 9px;
      min-width:55px;
      min-height:0;
    }
    .stat svg{
      width:14px;
      height:14px;
      flex:0 0 auto;
      stroke-width:2.2;
    }
    /* Match word-card heart: red when inactive, highlighted when active */
    #statFav svg{ stroke:var(--star); fill:none; }
    button#statFav.active{
      border-color:rgba(239,68,68,.35);
      background:rgba(239,68,68,.12);
    }
    button#statFav.active svg{
      stroke:var(--star);
      fill:rgba(239,68,68,.22);
    }
    #statKnown svg{ stroke:rgba(79,176,110,.95); }
    button#statKnown.active{
      border-color:rgba(79,176,110,.45);
      background:rgba(79,176,110,.14);
    }
    #statRepeat svg{ stroke:rgba(59,130,246,.9); }
    button#statRepeat.active{
      border-color:rgba(59,130,246,.45);
      background:rgba(59,130,246,.14);
    }
    .statLabel{
      display:none;
    }
    .statValue{
      flex:0 0 auto;
      font-weight:700;
      color:var(--text);
      min-width:2ch;
      max-width:2ch;
      overflow:hidden;
      white-space:nowrap;
      text-overflow:clip;
      text-align:center;
      font-variant-numeric:tabular-nums;
    }
    .stats .statLabel{
      display:block;
      position:absolute;
      top:calc(100% + 7px);
      left:50%;
      transform:translateX(-50%);
      width:max-content;
      max-width:120px;
      font-size:12px;
      font-weight:500;
      color:var(--muted);
      line-height:1;
      text-transform:lowercase;
      pointer-events:none;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .stats .stat.active .statLabel{
      color:var(--text);
    }
    .stats-know-progress{
      grid-column:1 / -1;
      width:95%;
      justify-self:center;
      align-self:center;
      height:3px;
      border-radius:6px;
      background:rgba(255,255,255,.08);
      overflow:hidden;
    }
    .stats-know-progress-fill{
      display:block;
      width:0%;
      height:100%;
      border-radius:inherit;
      background:linear-gradient(90deg, #3ddc84, #22c55e);
      transition:width .22s ease;
    }
    .progressActions{
      display:flex;
      gap:8px;
      align-items:center;
      justify-content:flex-end;
      flex-shrink:0;
    }
    .btn-link{
      font-size:13px;
      padding:8px 10px;
      border-radius:12px;
      background:transparent;
      border:1px solid var(--border);
      color:var(--muted);
      white-space:nowrap;
      transition:background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
    }

    .confirm-popover-backdrop{
      position:fixed;
      inset:0;
      padding:max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
      display:grid;
      place-items:center;
      background:rgba(2, 6, 23, .45);
      backdrop-filter:blur(2px);
      z-index:240;
      opacity:0;
      transition:opacity .16s ease;
    }
    .confirm-popover-backdrop[hidden]{
      display:none !important;
    }
    .confirm-popover-backdrop.is-open{
      opacity:1;
    }
    .confirm-popover{
      width:min(92vw, 360px);
      margin:0 auto;
      border-radius:14px;
      border:1px solid var(--border);
      background:var(--card);
      box-shadow:var(--shadow);
      padding:14px;
      display:grid;
      gap:12px;
      transform:translateY(6px) scale(.98);
      transition:transform .18s ease;
    }
    .confirm-popover-backdrop.is-open .confirm-popover{
      transform:translateY(0) scale(1);
    }
    .confirm-popover-text{
      margin:0;
      font-size:14px;
      line-height:1.4;
      color:var(--text);
      white-space:pre-line;
    }
    .confirm-popover-actions{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:8px;
    }
    .confirm-popover-btn{
      width:100%;
      height:36px;
      padding:6px 10px;
      font-size:13px;
      border-radius:10px;
    }
    .confirm-popover-btn--cancel{
      color:var(--text);
    }
    .confirm-popover-btn--accept{
      background:rgba(59,130,246,.12);
      border-color:rgba(59,130,246,.35);
      color:var(--text);
      font-weight:600;
    }
    .confirm-popover-btn--accept:hover{
      background:rgba(59,130,246,.18);
      border-color:rgba(59,130,246,.45);
    }

    .words{
      display:grid;
      gap:10px;
      width:100%;
      padding-left:var(--word-card-side-bleed);
      padding-right:var(--word-card-side-bleed);
    }

    .wordCard{
      background:var(--card);
      border:1px solid var(--border);
      border-radius:16px;
      box-shadow:var(--shadow2);
      padding:12px;
      width:100%;
      min-width:0;
      display:flex;
      flex-direction:column;
      gap:10px;
      position:relative;
      overflow:hidden;
      transform:translateZ(0);
      transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;
    }
    .wordCard::before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(180deg, rgba(59,130,246,0.10), rgba(0,0,0,0.02));
      opacity:0;
      transition:opacity .25s ease;
      pointer-events:none;
    }
    .wordCard::after{
      content:"";
      position:absolute;
      top:0;
      bottom:0;
      width:42%;
      background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.16), rgba(255,255,255,0));
      transform:translateX(-140%) skewX(-14deg);
      opacity:0;
      pointer-events:none;
    }
    .wordCard.is-back{
      border-color:rgba(59,130,246,0.28);
      box-shadow:var(--shadow2), inset 0 1px 0 rgba(255,255,255,.06);
      animation:word-card-flip-settle .42s cubic-bezier(.22, .61, .36, 1);
    }
    .wordCard.is-back::before{
      opacity:1;
      background:linear-gradient(180deg, rgba(59,130,246,.12) 0%, rgba(59,130,246,.04) 52%, rgba(0,0,0,0) 100%);
    }
    .wordCard.is-back::after{
      animation:word-card-flip-sheen .64s ease-out .04s;
    }

    .wordTop{
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap:10px;
      min-height:42px;
    }
    .wordTop > div{
      width:100%;
      min-width:0;
    }
    .wordCard--no-hint .wordTop{
      align-items:flex-start;
    }
    .wordCard--no-hint .starBtn,
    .wordCard--no-hint .knowBtn,
    .wordCard--no-hint .repeatBtn,
    .wordCard--no-hint .speakBtn{
      top:50%;
      transform:translateY(-50%);
    }
    .wordCard--no-hint .starBtn:active,
    .wordCard--no-hint .knowBtn:active,
    .wordCard--no-hint .repeatBtn:active,
    .wordCard--no-hint .speakBtn:active{
      transform:translateY(calc(-50% + 1px));
    }
    .wordCard--no-hint .wordText{
      min-height:0;
    }

    .wordText{
      font-size:20px;
      line-height:1.2;
      font-weight:650;
      word-break:break-word;
      overflow-wrap:anywhere;
      /* Reserve horizontal space for 4 action buttons on the right. */
      padding-right:198px;
      min-height:28px;
    }

    .hint{
      font-size:13px;
      color:var(--muted);
    }

    @media (prefers-reduced-motion: reduce){
      .wordCard,
      .wordCard::before,
      .wordCard::after,
      .flag-toggle,
      .switch-track,
      .switch-thumb{ transition:none; }
      .wordCard.is-back,
      .wordCard.is-back::after{ animation:none; }
    }

    @keyframes word-card-flip-settle{
      0%{
        transform:translateY(2px) scale(.985);
      }
      58%{
        transform:translateY(-1px) scale(1.006);
      }
      100%{
        transform:translateY(0) scale(1);
      }
    }

    @keyframes word-card-flip-sheen{
      0%{
        transform:translateX(-140%) skewX(-14deg);
        opacity:0;
      }
      26%{
        opacity:.62;
      }
      100%{
        transform:translateX(190%) skewX(-14deg);
        opacity:0;
      }
    }

    .starBtn, .knowBtn, .repeatBtn, .speakBtn{
      position:absolute;
      top:10px;
      width:40px;
      height:40px;
      padding:0;
      border-radius:11px;
      display:flex;
      align-items:center;
      justify-content:center;
      border:1px solid var(--border);
      background:transparent;
      font-size:20px;
      line-height:1;
      cursor:pointer;
    }

    .starBtn{
      right:10px;
    }

    .knowBtn{
      right:56px;
    }

    .repeatBtn{
      right:102px;
    }

    .speakBtn{
      right:148px;
    }

    .starBtn.fav{
      border-color:rgba(239,68,68,.35);
      background:rgba(239,68,68,.12);
    }
    .knowBtn.active{
      border-color:rgba(79,176,110,.35);
      background:rgba(79,176,110,.12);
    }
    .repeatBtn.active{
      border-color:rgba(59,130,246,.35);
      background:rgba(59,130,246,.12);
    }
    .starBtn svg,
    .knowBtn svg,
    .repeatBtn svg{
      width:18px;
      height:18px;
      stroke-width:2.2;
    }
    .starBtn svg{
      stroke:var(--muted);
      fill:none;
    }
    .starBtn.fav svg{
      stroke:var(--star);
      fill:rgba(239,68,68,.22);
    }
    .knowBtn svg{
      stroke:rgba(79,176,110,.95);
      fill:none;
    }
    .repeatBtn svg{
      stroke:rgba(59,130,246,.9);
      fill:none;
    }

    .empty{
      text-align:center;
      color:var(--muted);
      padding:28px 10px;
      border:1px dashed var(--border);
      border-radius:16px;
      background:transparent;
      min-height:84px;
      box-sizing:border-box;
    }
    .loadingState{
      display:flex;
      flex-direction:row;
      align-items:center;
      justify-content:center;
      gap:8px;
      text-align:center;
      color:var(--muted);
      padding:28px 10px;
      border:1px dashed var(--border);
      border-radius:16px;
      background:transparent;
      min-height:84px;
      box-sizing:border-box;
    }
    .loadingSpinner{
      width:20px;
      height:20px;
      border-radius:50%;
      border:2px solid var(--border);
      border-top-color:rgba(59,130,246,.9);
      animation:spin .85s linear infinite;
    }
    @keyframes spin{
      to{
        transform:rotate(360deg);
      }
    }
    @media (prefers-reduced-motion: reduce){
      .loadingSpinner{
        animation:none;
        border-top-color:var(--border);
      }
    }

    /***************
     * HELP PAGE
     ***************/
    .help-page .help-card{
      padding:0;
      overflow:visible;
    }
    .help-page .help-card > h2{
      margin:0;
      padding:12px;
      padding-right:34px;
      font-size:16px;
      letter-spacing:.2px;
      line-height:1.25;
      cursor:pointer;
      user-select:none;
      display:block;
      position:relative;
      outline:none;
      transition:background-color .2s ease, color .2s ease;
    }
    .help-page .help-card > h2 .help-card-chevron{
      position:absolute;
      right:8px;
      top:50%;
      width:16px;
      height:16px;
      color:var(--muted);
      stroke:currentColor;
      stroke-width:2.6;
      stroke-linecap:round;
      stroke-linejoin:round;
      fill:none;
      transform:translateY(-50%);
      transition:transform .16s ease, color .16s ease, opacity .16s ease;
      pointer-events:none;
      opacity:.92;
    }
    .help-page .help-card.is-open > h2 .help-card-chevron{
      transform:translateY(-50%) rotate(180deg);
      color:rgba(59,130,246,.82);
    }
    .help-page .help-card > h2:focus-visible{
      box-shadow:inset 0 0 0 2px rgba(59,130,246,.35);
    }
    .help-page .help-card > .help-card-panel{
      padding:10px 12px 12px;
    }
    .help-page .help-card:not(.is-open) > .help-card-panel{
      display:none;
    }
    .help-page .help-card > .help-card-panel > :first-child{
      margin-top:0;
    }
    .help-card h2{
      margin:0 0 8px;
      font-size:16px;
      letter-spacing:.2px;
    }
    .help-card ul{
      margin:0;
      padding-left:0;
      list-style:none;
    }
    .help-card li{
      margin:6px 0;
      line-height:1.35;
    }
    .help-card .muted{
      margin:10px 0 0;
      color:var(--muted);
      font-size:13px;
      line-height:1.35;
    }
    .help-token{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:6px 10px;
      border-radius:999px;
      border:1px solid var(--border);
      background:transparent;
      font-size:12px;
      color:var(--muted);
      vertical-align:middle;
      user-select:none;
      white-space:nowrap;
    }
    .help-token svg{
      width:14px;
      height:14px;
      stroke-width:2.2;
      flex:0 0 auto;
    }
    .help-icon{
      display:inline-flex;
      align-items:center;
      justify-content:center;
    }
    .help-icon--fav{ color:var(--star); }
    .help-icon--know{ color:rgba(79,176,110,.95); }
    .help-icon--repeat{ color:rgba(59,130,246,.9); }
    .help-action-btn{
      width:42px;
      height:42px;
      border-radius:12px;
      border:1px solid var(--border);
      background:transparent;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      vertical-align:middle;
      margin-right:6px;
      pointer-events:none;
      user-select:none;
    }
    .help-action-btn svg{
      width:20px;
      height:20px;
      stroke-width:2.2;
    }
    .help-action-btn--fav svg{
      stroke:var(--muted);
      fill:none;
    }
    .help-action-btn--fav.is-active{
      border-color:rgba(239,68,68,.35);
      background:rgba(239,68,68,.12);
    }
    .help-action-btn--fav.is-active svg{
      stroke:var(--star);
      fill:rgba(239,68,68,.22);
    }
    .help-action-btn--know svg{ stroke:rgba(79,176,110,.95); }
    .help-action-btn--repeat svg{ stroke:rgba(59,130,246,.9); }
    .help-action-btn--speak{
      font-size:20px;
      line-height:1;
    }
    .help-stat-chip{
      display:inline-flex;
      vertical-align:middle;
    }
    .help-stat-chip--fav{
      border-style:solid;
    }
    .help-stat-chip.active{
      border-color:rgba(239,68,68,.35);
      background:rgba(239,68,68,.12);
      color:var(--text);
    }
    .help-stat-chip--fav svg{
      stroke:var(--star);
      fill:none;
    }
    .help-stat-chip--fav.active svg{
      stroke:var(--star);
      fill:rgba(239,68,68,.22);
    }
    .help-stat-chip--know svg{ stroke:rgba(79,176,110,.95); }
    .help-stat-chip--repeat svg{ stroke:rgba(59,130,246,.9); }
    .help-ui{
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      gap:10px;
      margin-top:8px;
      max-width:420px;
    }
    .help-ui-inline{
      max-width:380px;
    }
    .help-demo{
      margin-top:10px;
      max-width:420px;
    }
    .help-demo .wordCard{
      margin:0;
    }
    .help-wordCard-flip .wordText{
      padding-right:0;
    }
    .help-ui .select-wrap{
      flex:1 1 260px;
      min-width:220px;
    }
    .help-ui .help-count-wheel{
      width:var(--count-w);
      flex:0 0 var(--count-w);
    }
    .help-menu-panel{
      position:static;
      right:auto;
      top:auto;
      display:block;
      margin-top:8px;
      min-width:240px;
    }
    .help-menu-panel .menu-item{
      cursor:default;
    }
    .help-actions{
      display:flex;
      gap:8px;
      width:100%;
      margin-bottom:12px;
    }
    .help-actions a{
      width:100%;
    }
    a.btn-main,
    a.btn-link{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:6px;
      text-decoration:none;
    }
    a.help-back-btn{
      gap:4px;
      line-height:1;
    }
    a.help-back-btn svg{
      display:block;
      width:16px;
      height:16px;
      color:var(--muted);
      stroke:currentColor;
      stroke-width:2.6;
      stroke-linecap:round;
      stroke-linejoin:round;
      transform:translateY(1px);
      opacity:.92;
    }
    a.help-back-btn span{
      display:block;
      line-height:1;
    }
    a.btn-main{
      padding:12px;
      font-size:15px;
      border-radius:12px;
      border:1px solid transparent;
    }

    .pair-grid{
      display:grid;
      gap:10px;
    }
    .pair-coming-soon{
      font-size:12px;
      color:var(--muted);
      letter-spacing:.02em;
      margin-top:2px;
    }
    .pair-link{
      display:grid;
      gap:10px;
      --pair-middle-width:34px;
      padding:10px;
      border-radius:14px;
      border:1px solid var(--border);
      background:var(--card);
      text-decoration:none;
      color:var(--text);
      box-shadow:var(--shadow);
      transition:border-color .2s ease, box-shadow .2s ease, transform .12s ease;
    }
    .pair-link:hover{
      border-color:rgba(59,130,246,.38);
      box-shadow:0 10px 24px rgba(2,6,23,.38);
    }
    .pair-link:focus-visible{
      outline:none;
      border-color:rgba(59,130,246,.45);
      box-shadow:0 10px 24px rgba(2,6,23,.38);
    }
    .pair-link:active{
      transform:translateY(1px);
    }
    .pair-link--disabled{
      cursor:default;
      pointer-events:none;
      background:var(--card);
      border-color:rgba(107,114,128,.35);
      box-shadow:none;
      opacity:.78;
    }
    .pair-link--disabled:hover,
    .pair-link--disabled:focus-visible,
    .pair-link--disabled:active{
      transform:none;
      border-color:rgba(107,114,128,.35);
      box-shadow:none;
    }

    .pair-flags{
      display:grid;
      grid-template-columns:minmax(0, 1fr) var(--pair-middle-width) minmax(0, 1fr);
      gap:10px;
      align-items:center;
    }
    .pair-flag{
      display:block;
      width:100%;
      height:74px;
      border-radius:10px;
      border:1px solid var(--border);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 4px 10px rgba(0,0,0,.12);
      background-size:cover;
      background-position:center;
      background-repeat:no-repeat;
    }
    .pair-flag--ua{
      background-image:linear-gradient(180deg, #005BBB 0%, #005BBB 50%, #FFD500 50%, #FFD500 100%);
    }
    .pair-flag--hu{
      background-image:linear-gradient(180deg, #CE2939 0%, #CE2939 33%, #FFFFFF 33%, #FFFFFF 66%, #477050 66%, #477050 100%);
    }
    .pair-flag--uk{
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Crect width='60' height='30' fill='%23012169'/%3E%3Cpath d='M0 0L60 30M60 0L0 30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0 0L60 30M60 0L0 30' stroke='%23C8102E' stroke-width='3.6'/%3E%3Cpath d='M30 0V30M0 15H60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30 0V30M0 15H60' stroke='%23C8102E' stroke-width='6'/%3E%3C/svg%3E");
    }
    .pair-flag--de{
      background-image:linear-gradient(180deg, #000000 0%, #000000 33%, #DD0000 33%, #DD0000 66%, #FFCE00 66%, #FFCE00 100%);
    }
    .pair-flag--slang{
      position:relative;
      overflow:hidden;
      background-image:repeating-linear-gradient(
        180deg,
        #b22234 0 8%,
        #ffffff 8% 16%
      );
    }
    .pair-flag--slang::before{
      content:"";
      position:absolute;
      left:0;
      top:0;
      width:46%;
      height:56%;
      background-color:#3c3b6e;
      background-image:radial-gradient(circle at center, rgba(255,255,255,.95) 0 1.2px, transparent 1.3px);
      background-size:8px 8px;
      background-position:1px 1px;
      border-bottom-right-radius:6px;
    }
    .pair-flag--slang::after{
      content:"Slang!";
      position:absolute;
      inset:0;
      z-index:2;
      display:flex;
      align-items:center;
      justify-content:center;
      font-family:"Permanent Marker","Segoe Print","Comic Sans MS",cursive;
      font-size:clamp(22px, 5.3vw, 38px);
      font-weight:400;
      line-height:1;
      letter-spacing:.06em;
      color:#ffffff;
      -webkit-text-stroke:1.6px rgba(0,0,0,.78);
      text-shadow:0 2px 0 rgba(0,0,0,.35), 2px 2px 0 rgba(0,0,0,.22), -2px -1px 0 rgba(0,0,0,.2);
      transform:rotate(-8deg) scale(1.06);
      transform-origin:center;
      pointer-events:none;
    }
    .pair-flag--es{
      background-image:linear-gradient(180deg, #AA151B 0%, #AA151B 25%, #F1BF00 25%, #F1BF00 75%, #AA151B 75%, #AA151B 100%);
    }
    .pair-direction{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:var(--pair-middle-width);
      height:auto;
      padding:0;
      border:0;
      border-radius:0;
      background:transparent;
      color:var(--muted);
      box-shadow:none;
      user-select:none;
    }
    .pair-direction svg{
      width:20px;
      height:20px;
      display:block;
      fill:none;
      stroke:currentColor;
      stroke-width:2.6;
      stroke-linecap:round;
      stroke-linejoin:round;
    }

    .pair-labels{
      display:grid;
      grid-template-columns:minmax(0, 1fr) var(--pair-middle-width) minmax(0, 1fr);
      gap:10px;
      font-size:14px;
      font-weight:700;
      line-height:1.2;
    }
    .pair-labels span{
      grid-row:1;
      text-align:center;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .pair-labels span:first-child{
      grid-column:1;
    }
    .pair-labels span:last-child{
      grid-column:3;
    }
    .pair-link--disabled .pair-flag{
      filter:brightness(.42) saturate(.82);
      opacity:.9;
    }
    .pair-link--disabled .pair-direction{
      color:rgba(107,114,128,.92);
      background:transparent;
      border:0;
      box-shadow:none;
    }
    .pair-link--disabled .pair-labels span{
      color:var(--muted);
    }

    @media (prefers-color-scheme: dark){
      :root:not([data-theme]){
      }
    }