:root {



    --brand-dark-grey: #393939;
--brand-steel-navy: #322E4E;
--brand-lime: #CDF546;
--brand-blue: #4147D5;
--brand-beige: #FEF7EC;
}

.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; overflow:scroll }
.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;
  }







  /* Panel z podpowiedziami – siedzi pod .roundedSearch */
.roundedSearch {
    position: relative; /* potrzebne, żeby panel był doklejony do inputa */
  }

  /* Kontener */
  .search-autocomplete {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e4e4e4;
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
    padding: 4px;
    display: none;
    z-index: 80; /* nad kartą słownika, ale pod headerem */
  }

  /* Widoczny panel */
  .search-autocomplete--visible {
    display: block;
  }

  /* Pojedyncza podpowiedź */
  .search-autocomplete-item {
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    padding: 6px 8px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .search-autocomplete-item:hover {
    background: #f6f6f6;
  }

  /* Aktywna (strzałkami) */
  .search-autocomplete-item.is-active {
    background: #fef3c7; /* coś w stylu #fff5d1 jak w playable */
  }

  /* Górna linia: słowo + język */
  .search-autocomplete-main {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
  }

  .search-autocomplete-word {
    font-weight: 600;
    color: #333;
  }

  /* Dolna linia: tłumaczenie + język tłumaczenia */
  .search-autocomplete-sub {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    color: #555;
  }

  /* Pastylki z kodem języka */
  .search-autocomplete-lang-pill {
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 11px;
    border: 1px solid #ddd;
    color: #555;
  }
  .search-autocomplete-lang-pill.subtle {
    opacity: .6;
  }

  /* Stan ładowania / brak wyników */
  .search-autocomplete-loading,
  .search-autocomplete-empty {
    padding: 8px;
    font-size: 13px;
    color: #555;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .search-autocomplete-empty-title {
    font-weight: 600;
  }

  .search-autocomplete-empty-sub {
    font-size: 12px;
    color: #777;
  }

  /* Prostą kuleczkę-ładowanie można reuse z dot-spinner albo coś prostego: */
  .search-autocomplete-spinner {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    border: 2px solid #d4d4d4;
    border-top-color: #4147D5;
    animation: search-autocomplete-spin .7s linear infinite;
  }

  @keyframes search-autocomplete-spin {
    to { transform: rotate(360deg); }
  }






/* --- POLIMIO LIQUID NAVBAR (LIGHT STYLE) --- */
.navbar-container {
    position: fixed;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 420px;
    height: 76px;

    /* Baza: Brandowy Beż + Blur dla efektu szkła */
    background: rgba(254, 247, 236, 0.85); /* #FEF7EC z przezroczystością */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    /* Subtelne krawędzie */
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 28px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 25px;

    /* Miękki, głęboki cień, który unosi belkę nad tłem */
    box-shadow:
        0 20px 40px -10px rgba(50, 46, 78, 0.15), /* Navy shadow */
        0 0 2px rgba(0,0,0,0.05); /* Outline shadow */

    z-index: 8000;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* --- INDICATOR (Teraz w kolorze Navy) --- */
.nav-indicator-box {
    position: absolute;
    height: 52px; /* Nieco mniejszy niż wysokość belki dla efektu marginesu */
    width: 52px;
    top: 12px; /* Wycentrowany w pionie */

    /* Steel Navy - mocny kontrast do beżu */
    background: var(--brand-steel-navy);
    border-radius: 18px;

    left: 0;
    transition: transform 0.5s cubic-bezier(0.68, -0.6, 0.32, 1.6);

    /* Cień rzucany przez wskaźnik */
    box-shadow: 0 8px 20px -5px rgba(50, 46, 78, 0.4);
    z-index: 1;
}

/* --- MENU ITEMS --- */
.nav-item {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 52px; /* Musi pasować do szerokości indicatora */
    height: 100%;

    /* Ikony nieaktywne: Navy z obniżoną widocznością */
    color: var(--brand-steel-navy);
    opacity: 0.4;

    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    -webkit-tap-highlight-color: transparent;
}

.nav-item i {
    font-size: 20px;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* --- ACTIVE STATE --- */
.nav-item.active {
    opacity: 1;
    /* Ikona aktywna: Limonka (świetnie gra z Navy tłem pastylki) */
    color: var(--brand-lime);
}

.nav-item.active i {
    /* Ikona lekko rośnie po aktywacji */
    transform: scale(1.15);
}

/* Hover na desktopie */
@media (hover: hover) {
    .nav-item:hover:not(.active) {
        opacity: 0.8;
        transform: translateY(-2px);
    }
}

/* Animacja kliknięcia */
.nav-item:active i {
    transform: scale(0.9);
}

/* --- DOSTOSOWANIE DO ISTNIEJĄCEGO LAYOUTU --- */
.toast { bottom: 110px !important; }


/* --- TRYB WCAG (Bez zmian - musi być kontrastowy) --- */
body.wcag-mode .navbar-container {
    background: #000000 !important;
    border: 3px solid #FFFF00 !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    border-radius: 0 !important; /* Kanciaste w trybie WCAG */
}

body.wcag-mode .nav-indicator-box {
    background: #FFFF00 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: 2px solid #000000; /* Odcięcie */
}

body.wcag-mode .nav-item {
    color: #FFFF00 !important;
    opacity: 1 !important;
}

body.wcag-mode .nav-item.active {
    color: #000000 !important;
}



/* --- INTELLIGENT HIDING --- */
.navbar-container {
    /* ... twoje poprzednie style ... */

    /* Domyślny stan (widoczny) */
    transform: translate(-50%, 0);
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);

    /* Dodaj will-change dla płynności na mobile */
    will-change: transform;
}

.navbar-container.navbar-hidden {
    /* Przesuwamy w dół o 150% wysokości elementu + zachowujemy centrowanie */
    transform: translate(-50%, 180%);

    /* Opcjonalnie: wyłączamy cienie/rozmycie dla wydajności gdy ukryte */
    box-shadow: none;
}