.checkbox-wrapper-35 .switch {
    display: none;
  }

  .checkbox-wrapper-35 .switch + label {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    color: #78768d;
    cursor: pointer;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 12px;
    line-height: 15px;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .checkbox-wrapper-35 .switch + label::before,
    .checkbox-wrapper-35 .switch + label::after {
    content: '';
    display: block;
  }

  .checkbox-wrapper-35 .switch + label::before {
    background-color: #05012c;
    border-radius: 500px;
    height: 15px;
    margin-right: 8px;
    -webkit-transition: background-color 0.125s ease-out;
    transition: background-color 0.125s ease-out;
    width: 25px;
  }

  .checkbox-wrapper-35 .switch + label::after {
    background-color: #fff;
    border-radius: 13px;
    box-shadow: 0 3px 1px 0 rgba(37, 34, 71, 0.05), 0 2px 2px 0 rgba(37, 34, 71, 0.1), 0 3px 3px 0 rgba(37, 34, 71, 0.05);
    height: 13px;
    left: 1px;
    position: absolute;
    top: 1px;
    -webkit-transition: -webkit-transform 0.125s ease-out;
    transition: -webkit-transform 0.125s ease-out;
    transition: transform 0.125s ease-out;
    transition: transform 0.125s ease-out, -webkit-transform 0.125s ease-out;
    width: 13px;
  }

  .checkbox-wrapper-35 .switch + label .switch-x-text {
    display: block;
    margin-right: .3em;
  }

  .checkbox-wrapper-35 .switch + label .switch-x-toggletext {
    display: block;
    font-weight: bold;
    height: 15px;
    overflow: hidden;
    position: relative;
    width: 350px;
  }

  .checkbox-wrapper-35 .switch + label .switch-x-unchecked,
    .checkbox-wrapper-35 .switch + label .switch-x-checked {
    left: 0;
    position: absolute;
    top: 0;
    -webkit-transition: opacity 0.125s ease-out, -webkit-transform 0.125s ease-out;
    transition: opacity 0.125s ease-out, -webkit-transform 0.125s ease-out;
    transition: transform 0.125s ease-out, opacity 0.125s ease-out;
    transition: transform 0.125s ease-out, opacity 0.125s ease-out, -webkit-transform 0.125s ease-out;
  }

  .checkbox-wrapper-35 .switch + label .switch-x-unchecked {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }

  .checkbox-wrapper-35 .switch + label .switch-x-checked {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  .checkbox-wrapper-35 .switch + label .switch-x-hiddenlabel {
    position: absolute;
    visibility: hidden;
  }

  .checkbox-wrapper-35 .switch:checked + label::before {
    background-color: #ffb500;
  }

  .checkbox-wrapper-35 .switch:checked + label::after {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  .checkbox-wrapper-35 .switch:checked + label .switch-x-unchecked {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  .checkbox-wrapper-35 .switch:checked + label .switch-x-checked {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }


  .dot-spinner {

      margin-top: -37px;
      margin-right: 40px;
      float:right;
    --uib-size: 20px;;
    --uib-speed: .9s;
    --uib-color: #183153;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: var(--uib-size);
    width: var(--uib-size);
  }

  .dot-spinner__dot {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
    width: 100%;
  }

  .dot-spinner__dot::before {
    content: '';
    height: 20%;
    width: 20%;
    border-radius: 50%;
    background-color: var(--uib-color);
    transform: scale(0);
    opacity: 0.5;
    animation: pulse0112 calc(var(--uib-speed) * 1.111) ease-in-out infinite;
    box-shadow: 0 0 20px rgba(18, 31, 53, 0.3);
  }

  .dot-spinner__dot:nth-child(2) {
    transform: rotate(45deg);
  }

  .dot-spinner__dot:nth-child(2)::before {
    animation-delay: calc(var(--uib-speed) * -0.875);
  }

  .dot-spinner__dot:nth-child(3) {
    transform: rotate(90deg);
  }

  .dot-spinner__dot:nth-child(3)::before {
    animation-delay: calc(var(--uib-speed) * -0.75);
  }

  .dot-spinner__dot:nth-child(4) {
    transform: rotate(135deg);
  }

  .dot-spinner__dot:nth-child(4)::before {
    animation-delay: calc(var(--uib-speed) * -0.625);
  }

  .dot-spinner__dot:nth-child(5) {
    transform: rotate(180deg);
  }

  .dot-spinner__dot:nth-child(5)::before {
    animation-delay: calc(var(--uib-speed) * -0.5);
  }

  .dot-spinner__dot:nth-child(6) {
    transform: rotate(225deg);
  }

  .dot-spinner__dot:nth-child(6)::before {
    animation-delay: calc(var(--uib-speed) * -0.375);
  }

  .dot-spinner__dot:nth-child(7) {
    transform: rotate(270deg);
  }

  .dot-spinner__dot:nth-child(7)::before {
    animation-delay: calc(var(--uib-speed) * -0.25);
  }

  .dot-spinner__dot:nth-child(8) {
    transform: rotate(315deg);
  }

  .dot-spinner__dot:nth-child(8)::before {
    animation-delay: calc(var(--uib-speed) * -0.125);
  }

  @keyframes pulse0112 {
    0%,
    100% {
      transform: scale(0);
      opacity: 0.5;
    }

    50% {
      transform: scale(1);
      opacity: 1;
    }
  }



      .playSound {
              display:inline;cursor: pointer; fill: #11D15E;margin-top: -2px;
          }
          .playSound:hover {
               fill: #a04548;
          }
      .searchForm input:focus
      {
          outline: none !important;
          outline-style: none !important;
      }
      .roundedSearch
      {
          border: 2px solid #CDF5463D;
          border-radius: 16px;
      }
      .roundedSearch input
      {
          color:gray;
          border:0;padding:15px;border-radius: 16px;width:100%;
          outline: none !important;
          outline-style: none !important;
      }
      .searchForm .roundedSearch input:focus
      {
          outline: none !important;
          outline-style: none !important;
          border-radius: 16px;
      }
      form.searchForm
      {
          border: 0;
          margin-bottom: 15px;
          padding: 0;
      }
      .fastAnswers .fastAnswersInner div
      {
          display: inline-block;
          background-color: #F2F2F2;
          color: #565656;
          border-radius: 16px;
          padding: 6px;
          padding-left: 12px;
          padding-right: 12px;
          font-weight: bold;
          margin: 0px;
          font-size: 13px;
      }
      .fastAnswersInner
      {
          display: flex;
          flex-wrap: wrap;
          gap: 5px;
          margin-top: 5px;
          max-height: 145px;
          overflow: hidden;
          transition: max-height 0.3s ease-in-out;
      }
      .fastAnswersInner:hover
      {

          max-height: 2550px;
      }
      .fastAnswers a
      {
          color:#565656;
      }
       .languages a, .wordlists a{
          color:gray;
      }
      .play
      {
          cursor: pointer;
          white-space: nowrap;
      }
      .slowAnswers
      {
          margin-top: 20px;
          padding: 15px;
         /* border: 1px solid gainsboro;*/

          border: 1px solid lightgray;
          border-left: 0;
          border-right: 0;
          margin-left: -25px;
          margin-right: -25px;
          padding-left: 25px;
          padding-right: 25px;
          margin-bottom: 5px;
          margin-top: 5px;
      }

      .slowAnswers ol li
      {
        /*font-weight:bold; */
      }

      .slowAnswers ol, .slowAnswers ul, .slowAnswers menu
      {
              list-style: decimal;
              margin: 15px;
          padding: 15px;
           color: darkblue;
      }

      .slowAnswers ul
      {
        margin: 0px;
        margin-left: 35px;
      }


      .buttonX {
    position: relative;
    width: 30px;
    height: 20px;
    border: none;
    background: none;

    float: right;
      margin-top: -37px;
      margin-right: 10px;
  }

  .X {
    content: '';
    position: absolute;
    top: 50%;
    left: 33%;
    width: 20px;
    height: 1.5px;
    background-color: black;
    transform: rotate(45deg);
  }

  .Y {
    content: '';
    position: absolute;
    top: 50%;
    left: 33%;
    width: 20px;
    height: 1.5px;
    background-color: black;
    transform: rotate(-45deg);
  }

  .close {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: -40%;
    left: 70%;
    width: 30px;;
    height: 1.7em;
    font-size: 16px;
    background-color: rgb(254, 255, 225);
    color: #000;
    border: 1px solid #000;
    pointer-events: none;
    opacity: 0;
  }

  .buttonX
  {
    cursor:pointer;
  }

  .buttonX:hover .Y, .buttonX:hover .X  {
    /*background-color: rgb(210, 0, 0);*/
    background-color:gray;
  }

  .buttonX:active .Y, .buttonX:active.X  {
      background-color:gray;
  }

  .buttonX:hover > .close {
    animation: close 0.2s forwards 1.25s;
  }

  @keyframes close {
    100% {
      opacity: 1;
    }
  }

  span.text-block
  {
    cursor: pointer;
  }

  .highlighted
  {
    /*color:red;*/
  }

  .text-block .text-block-options
  {
    opacity:0;
  }
  .text-block:hover .text-block-options, .text-block.highlighted .text-block-options
  {
    opacity:1;
  }

  .lang .selected
  {
    border-bottom: 1px solid gray;
    opacity:1;
  }

  .lang .choice
  {

    opacity:1;
  }

  .historyPicker
  {
    float:right;margin-right:10px;font-weight:bolder;
  }

  .languagePicker :not(.selected)
  {
    opacity:0.5
  }

  .languagePicker
  {
     display:none;float:right;max-width: 230px;
  }
  .history
  {
    display:none;
  }
  .history h1
  {
    font-weight:bolder;
  }
  .grecaptcha-badge { visibility: hidden !important; }

  .blink_me {
    animation: blinker 3s linear infinite;
    background-color:yellow
  }

  @keyframes blinker {
    50% {
      opacity: 0.2;
    }
  }

  /*
  .heart
  {
    display:inline;display: inline;
    margin-top: -3px;cursor:pointer;
  }
  .heart:hover
  {
    opacity:0.5;
  }
*/

.heart:hover
{
    animation: blinker 1s linear 1;
}
  .heart { overflow: visible; margin-top: -3px;cursor:pointer; display:inline-block; transition: stroke .25s ease;  }
  /* colour & bounce go on together */
  .heart.active {
    /*stroke:#e63946;
    animation:bounce .5s ease;*/
  }

  .heart.active path{
    stroke:#e63946;
    fill:#e63946;                               /* now filled */
    animation:bounce .5s ease;
  }

  /* keyframes = little overshoot-shrink-settle */
  @keyframes bounce{
    0%   { transform:scale(1);   }
    30%  { transform:scale(1.3); }
    60%  { transform:scale(.9);  }
    100% { transform:scale(1);   }
  }


  .deleteHistory.active
  {
    display:inline-block;
    animation:bounceHide .5s ease;
  }

  footer
  {
    font-size:9px;margin-top:10px;
  }

  /* keyframes = little overshoot-shrink-settle */
  @keyframes bounceHide{
    0%   { transform:scale(1);   }
    30%  { transform:scale(1.3); }
    60%  { transform:scale(.9);  }
    100% { transform:scale(1);   }
  }


  .toggle-bar           { display:flex; gap:.5rem; margin-bottom:.5rem; }
.toggle-btn           { padding:.4rem .8rem; border:1px solid #aaa; background:#f8f8f8; cursor:pointer;     border-radius: 10px;}
.toggle-btn.active    { background:#007bff; color:#fff; border-color:#007bff; }
.toggle-pane          { }

.sound-popup{
    position:fixed; bottom:20px; right:20px; z-index:9999;
    width:260px; padding:18px 16px 20px;
    background:#fff; border-radius:12px;
    box-shadow:0 8px 24px rgba(0,0,0,.15);
    font-family:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    transform:translateY(16px); opacity:0; pointer-events:none;
    transition:all .3s cubic-bezier(.4,.0,.2,1);
  }
  .sound-popup.show{transform:none; opacity:1; pointer-events:auto;}

  .sound-popup .question{margin:0 0 14px; font-weight:600; text-align:center;}

  .sound-popup .actions{display:flex; gap:16px; justify-content:center;}

  .sound-popup .thumb{
    width:52px; height:52px; font-size:26px; line-height:1;
    border:0; border-radius:50%; cursor:pointer;
    background:#f6f7f9; transition:background .2s;
  }
  .sound-popup .thumb:hover{background:#e8eaed;}
  .sound-popup .thumb-up:hover  {color:#0f9d58;}
  .sound-popup .thumb-down:hover{color:#d93025;}

  .sound-popup .closeX{
    position:absolute;     top: 2px;
    right: 6px;
    background:transparent; border:0; font-size:22px;
    cursor:pointer; line-height:1;
  }











  :root {
    --backgroundssecondary: rgba(242, 242, 247, 1);
    --branddark-gray: rgba(51, 51, 51, 1);
    --branddark-gray-60: rgba(133, 133, 133, 1);
    --dropshadow-l: 0px 2px 3px 0px rgba(0, 0, 0, 0.1);
    --field:
      0px 8px 19px 0px rgba(222, 222, 222, 0.1), 0px 34px 34px 0px rgba(
        222,
        222,
        222,
        0.09
      ), 0px 76px 46px 0px rgba(222, 222, 222, 0.05), 0px 135px 54px 0px rgba(
        222,
        222,
        222,
        0.01
      ), 0px 211px 59px 0px rgba(222, 222, 222, 0);
    --grayswhite: rgba(255, 255, 255, 1);
    --safari-text-font-family: "SF Pro", Helvetica;
    --safari-text-font-size: 13px;
    --safari-text-font-style: normal;
    --safari-text-font-weight: 400;
    --safari-text-letter-spacing: 0px;
    --safari-text-line-height: normal;
    --text-md-normal-font-family: "Inter Variable", Helvetica;
    --text-md-normal-font-size: 16px;
    --text-md-normal-font-style: normal;
    --text-md-normal-font-weight: 400;
    --text-md-normal-letter-spacing: -0.08px;
    --text-md-normal-line-height: 24px;
    --texton-color: rgba(255, 255, 255, 1);
    --texttext-primary: rgba(50, 46, 78, 1);
    --texttext-secondary: rgba(86, 86, 86, 1);






    --background: 0 0% 100%;
    --foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 47.4% 11.2%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;

    --card: transparent;
    --card-foreground: 222.2 47.4% 11.2%;

    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

    --destructive: 0 100% 50%;
    --destructive-foreground: 210 40% 98%;

    --ring: 215 20.2% 65.1%;

    --radius: 0.5rem;
  }




  .bg-grayswhite {
    background-color: var(--grayswhite);
}


.page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* 100% of viewport height */
  }

  /* 3. Make content expand to fill space */
  .content {
    flex: 1;
  }

  /* 4. Footer styles */
  .footer {
    background: #f0f0f0;
    padding: 1rem;
    text-align: center;
  }





  .facebook
  {
    /* facebook */

width: 20px;
height: 20px;


/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;


/* Vector */

position: absolute;
left: 8.33%;
right: 8.33%;
top: 8.33%;
bottom: 8.63%;

/* text/text-primary */
background: #322E4E;

  }


  footer  a{
    text-decoration:underline
  }

  footer  a:hover
  {
    opacity:0.5
  }
/*
  footer.mobile {
    display: none;
  }

  @media (max-width: 768px) {
    footer.mobile {
      //display: block;
    }
    footer.desktop {
        //display: none;
      }
  }*/


  .logo-top
  {
    display:none;
  }

  .rateArticleOuter
  {
    text-align:right;display:none;
  }
  .rateArticleInner
  {
    border: 1px solid lightgray;
    display: inline-block;
    padding: 5px;
    border-radius: 10px;
    margin-top: 10px;
    right: 0;
    position: relative;
  }

  .rateArticleInner .selected
  {
    border-bottom: 1px solid black;
  }

  #proposals h1
  {
    font-weight: bolder;
    margin-top: 20px;
    color: green;
  }

  .slowAnswers hr{
    margin-top: 15px;
    margin-bottom: 5px;
  }






/* ===========  GLOBAL LOOK & FEEL  =========== */
:root{
    --accent:#0d6efd;       /* brand colour for progress & buttons */
    --accent-light:#e9f2ff; /* subtle background */
    --bg:#ffffff;
    --text:#222;
}

/* ===========  STICKY CONTROL BAR  =========== */
#controlBar{
    /*position:fixed;*/
    inset:0 0 auto 0;           /* stick to top */
    z-index:999;                /* always on top */
    background:#fff;
    box-shadow:0 2px 6px rgba(0,0,0,.08);
    padding:.5rem 1rem;
    display:flex;
    flex-direction:column;
    gap:.35rem;
    margin-bottom:20px;
}

/* —– buttons —– */
.controls{
    display:flex;
    gap:.5rem;
}
.btn{
    all:unset;
    cursor:pointer;
    padding:.4rem .85rem;
    border:2px solid var(--accent);
    border-radius:.4rem;
    font-weight:600;
    user-select:none;
    transition:background .2s,border-color .2s;
}
.btn:hover{background:var(--accent-light);}
.btn:active{transform:scale(.97);}

/* —– progress bar —– */
.progressWrapper{
    width:100%;
    background:#f1f1f1;
    border-radius:6px;
    overflow:hidden;
    height:9px;
}
#progress{
    width:0;
    height:100%;
    background:var(--accent);
    transition:width .3s ease-out;
}

/* ===========  PLAYABLE WORDS  =========== */
.playable{
    padding:.2em .4em;
    margin:.2em;
    border-bottom:2px solid transparent;
    cursor:pointer;
    transition:background .2s,border .2s;
}
.playable:hover{
    background:var(--accent-light);
}
.playable.active{
    background:#fff5d1;
    border-bottom-color:var(--accent);
}

.hiddenDictionaries
{display:none;
}
.showOtherDictionaries
{
    text-decoration:underline;
}








/* ============ TOOLTIP STYLES ============ */
.tooltip-bubble {
    position: fixed;
    z-index: 9999;
    max-width: 320px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #111;
    color: #fff;
    font: 14px/1.35 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    box-shadow: 0 10px 30px rgba(0,0,0,.25), 0 2px 8px rgba(0,0,0,.2);
    opacity: 0;
    transform: translateY(6px) scale(.98);
    transition: opacity .14s ease, transform .14s ease;
    pointer-events: none; /* nie blokuje kliknięć w link */
    word-wrap: break-word;
  }
  .tooltip-bubble.show {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  .tooltip-bubble[data-pos="top"]::after,
  .tooltip-bubble[data-pos="bottom"]::after {
    content: "";
    position: absolute;
    left: 16px;
    border: 7px solid transparent;
  }
  .tooltip-bubble[data-pos="top"]::after {
    bottom: -14px;
    border-top-color: #111;
  }
  .tooltip-bubble[data-pos="bottom"]::after {
    top: -14px;
    border-bottom-color: #111;
  }

  /* opcjonalnie: ładny focus dla linków */
  a[data-has-tooltip]:focus {
    outline: 2px solid #8bc34a;
    outline-offset: 2px;
  }