@media (max-width:850px){

  :root{
    --v200-bg:#050713;
    --v200-card:#0b1022;
    --v200-card2:#10162c;
    --v200-text:#f7f8ff;
    --v200-muted:#8d97b5;
    --v200-blue:#356dff;
    --v200-purple:#8a43ff;
    --v200-cyan:#28dcff;
    --v200-border:rgba(122,145,255,.18);
  }

  html.tofy-mobile-v200,
  html.tofy-mobile-v200 body{
    background:
      radial-gradient(circle at 10% 0%,rgba(62,74,255,.17),transparent 32%),
      radial-gradient(circle at 95% 20%,rgba(151,48,255,.12),transparent 34%),
      var(--v200-bg) !important;
    color:var(--v200-text);
    min-height:100%;
  }

  html.tofy-mobile-v200 body{
    padding-top:calc(84px + env(safe-area-inset-top)) !important;
    padding-bottom:92px !important;
    overflow-x:hidden;
  }

  .tofy-v200-legacy-hidden{
    display:none !important;
  }

  .tofy-v200-header{
    position:fixed;
    z-index:10050;
    top:0;
    left:0;
    right:0;
    height:68px;
    padding:
      calc(8px + env(safe-area-inset-top))
      14px 8px;
    box-sizing:content-box;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:rgba(5,7,19,.82);
    border-bottom:1px solid var(--v200-border);
    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);
  }

  .tofy-v200-brand{
    border:0;
    background:none;
    color:inherit;
    padding:0;
    display:flex;
    align-items:center;
    gap:10px;
    min-height:48px;
    cursor:pointer;
    text-align:start;
  }

  .tofy-v200-tp{
    width:46px;
    height:46px;
    flex:0 0 46px;
    display:grid;
    place-items:center;
    border-radius:15px;
    font-weight:1000;
    font-size:17px;
    letter-spacing:-1px;
    color:#fff;
    background:
      linear-gradient(145deg,var(--v200-blue),var(--v200-purple));
    border:1px solid rgba(255,255,255,.18);
    box-shadow:
      0 0 24px rgba(69,98,255,.42),
      inset 0 1px 0 rgba(255,255,255,.25);
  }

  .tofy-v200-brand-text{
    display:flex;
    flex-direction:column;
    line-height:1.05;
  }

  .tofy-v200-brand-text b{
    font-size:15px;
    letter-spacing:.6px;
  }

  .tofy-v200-brand-text small{
    color:var(--v200-muted);
    font-size:9px;
    margin-top:5px;
    letter-spacing:1.2px;
    text-transform:uppercase;
  }

  .tofy-v200-head-actions{
    display:flex;
    align-items:center;
    gap:8px;
  }

  .tofy-v200-head-btn{
    width:43px;
    height:43px;
    display:grid;
    place-items:center;
    text-decoration:none !important;
    color:#fff !important;
    border-radius:14px;
    background:rgba(255,255,255,.055);
    border:1px solid var(--v200-border);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  }

  .tofy-v200-bottom{
    position:fixed;
    z-index:10060;
    left:10px;
    right:10px;
    bottom:max(8px,env(safe-area-inset-bottom));
    height:70px;
    display:grid;
    grid-template-columns:1fr 1fr 74px 1fr 1fr;
    align-items:center;
    border-radius:24px;
    border:1px solid rgba(117,136,255,.22);
    background:rgba(8,11,25,.91);
    box-shadow:
      0 15px 50px rgba(0,0,0,.48),
      0 0 30px rgba(63,70,255,.10);
    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
  }

  .tofy-v200-bottom>a{
    color:#76809f !important;
    text-decoration:none !important;
    display:flex;
    min-width:0;
    height:60px;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:4px;
    font-size:10px;
    font-weight:800;
  }

  .tofy-v200-bottom>a i{
    font-style:normal;
    font-size:20px;
    line-height:1;
  }

  .tofy-v200-bottom>a.active{
    color:#fff !important;
  }

  .tofy-v200-bottom>a.active i{
    color:var(--v200-cyan);
    text-shadow:0 0 14px rgba(40,220,255,.7);
  }

  .tofy-v200-center{
    position:relative;
    width:62px;
    height:62px;
    margin:-28px auto 0;
    border:0;
    border-radius:21px;
    color:#fff;
    background:
      linear-gradient(145deg,#276dff,#843fff 58%,#25dfff);
    box-shadow:
      0 0 0 6px #080b19,
      0 0 32px rgba(85,87,255,.65);
  }

  .tofy-v200-center b{
    font-size:19px;
    font-weight:1000;
    letter-spacing:-1px;
  }

  .tofy-v200-overlay,
  .tofy-v200-quick-overlay{
    position:fixed;
    inset:0;
    z-index:10100;
    opacity:0;
    visibility:hidden;
    background:rgba(0,0,0,.62);
    backdrop-filter:blur(5px);
    transition:.25s ease;
  }

  .tofy-v200-overlay.open,
  .tofy-v200-quick-overlay.open{
    opacity:1;
    visibility:visible;
  }

  .tofy-v200-drawer{
    position:fixed;
    z-index:10110;
    top:0;
    bottom:0;
    width:min(86vw,360px);
    padding:
      max(18px,env(safe-area-inset-top))
      16px
      max(24px,env(safe-area-inset-bottom));
    box-sizing:border-box;
    overflow:auto;
    background:
      radial-gradient(circle at 20% 0%,rgba(69,81,255,.22),transparent 35%),
      linear-gradient(180deg,#0b0f22,#060815);
    border-inline-end:1px solid rgba(128,143,255,.22);
    box-shadow:0 0 60px rgba(0,0,0,.65);
    transition:transform .28s cubic-bezier(.2,.8,.2,1);
  }

  html[dir="rtl"] .tofy-v200-drawer{
    right:0;
    transform:translateX(105%);
  }

  html[dir="ltr"] .tofy-v200-drawer{
    left:0;
    transform:translateX(-105%);
  }

  .tofy-v200-drawer.open{
    transform:translateX(0) !important;
  }

  .tofy-v200-drawer-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:5px 0 20px;
    border-bottom:1px solid var(--v200-border);
  }

  .tofy-v200-drawer-brand{
    display:flex;
    align-items:center;
    gap:11px;
  }

  .tofy-v200-drawer-brand>div{
    display:flex;
    flex-direction:column;
  }

  .tofy-v200-drawer-brand b{
    font-size:16px;
  }

  .tofy-v200-drawer-brand small{
    margin-top:4px;
    color:var(--v200-cyan);
    font-size:9px;
    letter-spacing:1px;
  }

  #tofyV200Close{
    width:42px;
    height:42px;
    border-radius:14px;
    border:1px solid var(--v200-border);
    background:rgba(255,255,255,.05);
    color:#fff;
    font-size:27px;
  }

  .tofy-v200-menu{
    padding:18px 0;
    display:grid;
    gap:6px;
  }

  .tofy-v200-menu a{
    min-height:50px;
    padding:0 13px;
    display:flex;
    align-items:center;
    gap:13px;
    color:#dce2ff !important;
    text-decoration:none !important;
    border-radius:15px;
    border:1px solid transparent;
    font-size:13px;
    font-weight:800;
  }

  .tofy-v200-menu a:active{
    background:rgba(71,91,255,.13);
    border-color:var(--v200-border);
  }

  .tofy-v200-menu a span{
    width:28px;
    text-align:center;
    font-size:19px;
    color:var(--v200-cyan);
  }

  .tofy-v200-quick{
    position:fixed;
    z-index:10120;
    left:10px;
    right:10px;
    bottom:0;
    padding:10px 14px max(28px,env(safe-area-inset-bottom));
    border-radius:28px 28px 0 0;
    background:
      radial-gradient(circle at 50% 0%,rgba(93,65,255,.24),transparent 42%),
      #0a0e20;
    border:1px solid rgba(124,138,255,.22);
    box-shadow:0 -20px 60px rgba(0,0,0,.55);
    transform:translateY(110%);
    transition:transform .3s cubic-bezier(.2,.8,.2,1);
  }

  .tofy-v200-quick.open{
    transform:translateY(0);
  }

  .tofy-v200-sheet-handle{
    width:44px;
    height:5px;
    margin:0 auto 14px;
    border-radius:20px;
    background:#424b68;
  }

  .tofy-v200-sheet-title{
    text-align:center;
    font-size:15px;
    font-weight:900;
    margin-bottom:17px;
  }

  .tofy-v200-quick-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:8px;
  }

  .tofy-v200-quick-grid a{
    min-width:0;
    color:#fff !important;
    text-decoration:none !important;
    display:flex;
    align-items:center;
    flex-direction:column;
    gap:8px;
    text-align:center;
    font-size:9px;
    font-weight:800;
  }

  .tofy-v200-quick-grid i{
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border-radius:16px;
    font-style:normal;
    font-size:20px;
    background:
      linear-gradient(145deg,rgba(52,101,255,.25),rgba(137,61,255,.18));
    border:1px solid rgba(109,137,255,.25);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  }

  .page-main{
    max-width:100% !important;
  }
}


/* ===== TOFY V200 GOLD CENTER FINAL V207 ===== */

@media (max-width:900px){

  #tofyV200Bottom.tofy-v200-bottom{
    overflow:visible !important;
  }

  #tofyV200Center.tofy-v200-center{
    position:relative !important;
    z-index:30 !important;

    width:68px !important;
    height:68px !important;

    margin:-31px auto 0 !important;
    padding:0 !important;

    display:grid !important;
    place-items:center !important;

    border:0 !important;
    border-radius:50% !important;

    background:transparent !important;
    box-shadow:none !important;

    overflow:visible !important;
    cursor:pointer !important;

    -webkit-tap-highlight-color:transparent !important;
  }

  #tofyV200Center .tofy-v200-gold-halo{
    position:absolute !important;
    inset:-10px !important;
    border-radius:50% !important;

    background:
      radial-gradient(
        circle,
        rgba(255,204,73,.30) 0%,
        rgba(230,156,20,.13) 42%,
        transparent 72%
      ) !important;

    filter:blur(6px) !important;
    pointer-events:none !important;

    animation:tofyGoldPulse 2.6s ease-in-out infinite !important;
  }

  #tofyV200Center .tofy-v200-gold-ring{
    position:relative !important;

    width:64px !important;
    height:64px !important;

    display:grid !important;
    place-items:center !important;

    border-radius:50% !important;

    background:
      radial-gradient(
        circle at 48% 38%,
        #17181d 0%,
        #090a0d 48%,
        #020204 76%,
        #000 100%
      ) !important;

    border:2px solid #e0ae32 !important;

    box-shadow:
      0 0 0 4px #070a16,
      0 0 0 5px rgba(255,207,78,.58),
      0 0 13px rgba(255,211,79,.92),
      0 0 29px rgba(226,153,18,.50),
      0 13px 25px rgba(0,0,0,.70),
      inset 0 0 13px rgba(255,213,82,.14) !important;

    transition:
      transform .16s ease,
      filter .16s ease !important;

    overflow:hidden !important;
  }

  #tofyV200Center .tofy-v200-gold-ring::before{
    content:"" !important;
    position:absolute !important;
    inset:4px !important;
    border-radius:50% !important;

    border:2px solid rgba(255,212,92,.70) !important;

    box-shadow:
      inset 0 0 9px rgba(255,211,79,.16),
      0 0 6px rgba(255,194,40,.28) !important;

    pointer-events:none !important;
  }

  #tofyV200Center .tofy-v200-gold-ring::after{
    content:"" !important;
    position:absolute !important;

    width:32px !important;
    height:10px !important;

    top:7px !important;
    left:12px !important;

    border-radius:50% !important;

    background:
      linear-gradient(
        90deg,
        transparent,
        rgba(255,245,183,.36),
        transparent
      ) !important;

    transform:rotate(-18deg) !important;
    filter:blur(2px) !important;

    pointer-events:none !important;
  }

  #tofyV200Center .tofy-v200-gold-tp{
    position:relative !important;
    z-index:3 !important;

    display:block !important;

    margin:0 !important;

    font-family:
      Georgia,
      "Times New Roman",
      serif !important;

    font-size:27px !important;
    line-height:1 !important;
    font-weight:900 !important;
    font-style:italic !important;

    letter-spacing:-5px !important;

    transform:
      translateX(-2px)
      skewX(-8deg) !important;

    background:
      linear-gradient(
        180deg,
        #fff8bc 0%,
        #ffe16b 20%,
        #c98910 47%,
        #fff09b 69%,
        #b06b04 100%
      ) !important;

    -webkit-background-clip:text !important;
    background-clip:text !important;

    color:transparent !important;

    filter:
      drop-shadow(0 1px 0 #fff3a4)
      drop-shadow(0 2px 1px #5e3600)
      drop-shadow(0 0 5px rgba(255,199,48,.68)) !important;
  }

  #tofyV200Center .tofy-v200-gold-spark{
    position:absolute !important;
    z-index:5 !important;

    top:7px !important;
    right:8px !important;

    font-style:normal !important;
    font-size:10px !important;
    line-height:1 !important;

    color:#fff8bd !important;

    text-shadow:
      0 0 3px #fff,
      0 0 7px #ffd24f,
      0 0 13px #d99b16 !important;

    pointer-events:none !important;
  }

  #tofyV200Center:active .tofy-v200-gold-ring{
    transform:scale(.91) !important;
    filter:brightness(1.18) !important;
  }

  #tofyV200Center:focus-visible{
    outline:2px solid #ffe078 !important;
    outline-offset:7px !important;
  }

  @keyframes tofyGoldPulse{
    0%,100%{
      opacity:.68;
      transform:scale(.96);
    }

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

@media (max-width:380px){

  #tofyV200Center.tofy-v200-center{
    width:64px !important;
    height:64px !important;
    margin-top:-28px !important;
  }

  #tofyV200Center .tofy-v200-gold-ring{
    width:60px !important;
    height:60px !important;
  }

  #tofyV200Center .tofy-v200-gold-tp{
    font-size:25px !important;
  }
}


/* ===== TOFY V200 FINAL NAV V208 ===== */

@media (max-width:850px){

  /* =========================
     HEADER MENU / TP BRAND
     ========================= */

  #tofyV200MenuButton.tofy-v200-brand{
    min-height:54px !important;
    gap:11px !important;
  }

  #tofyV200MenuButton .tofy-v200-tp{
    position:relative !important;

    width:52px !important;
    height:52px !important;
    flex:0 0 52px !important;

    border-radius:17px !important;

    color:transparent !important;
    font-size:0 !important;

    background:
      radial-gradient(circle at 50% 38%,
        #19275c 0%,
        #10183d 48%,
        #090d25 100%) !important;

    border:1.5px solid #4f70ff !important;

    box-shadow:
      0 0 0 1px rgba(83,57,255,.35),
      0 0 15px rgba(36,110,255,.55),
      0 0 26px rgba(104,47,255,.30),
      inset 0 1px 5px rgba(255,255,255,.10) !important;

    overflow:hidden !important;
  }

  #tofyV200MenuButton .tofy-v200-tp::before{
    content:"TP" !important;

    position:absolute !important;
    inset:0 !important;

    display:grid !important;
    place-items:center !important;

    font-family:Georgia,"Times New Roman",serif !important;
    font-size:23px !important;
    line-height:1 !important;
    font-weight:900 !important;
    font-style:italic !important;
    letter-spacing:-4px !important;

    background:
      linear-gradient(
        180deg,
        #fff4a5 0%,
        #ffd45a 20%,
        #b86b07 49%,
        #ffe581 70%,
        #995300 100%
      ) !important;

    -webkit-background-clip:text !important;
    background-clip:text !important;
    color:transparent !important;

    filter:
      drop-shadow(0 1px 0 #fff0a0)
      drop-shadow(0 2px 1px #4c2700)
      drop-shadow(0 0 5px rgba(255,185,33,.55)) !important;

    transform:translateX(-1px) skewX(-7deg) !important;
  }

  #tofyV200MenuButton:active .tofy-v200-tp{
    transform:scale(.94) !important;
  }


  /* =========================
     FINAL NEON BOTTOM BAR
     ========================= */

  #tofyV200Bottom.tofy-v200-bottom{
    left:10px !important;
    right:10px !important;

    bottom:max(9px,env(safe-area-inset-bottom)) !important;

    height:76px !important;

    grid-template-columns:
      minmax(0,1fr)
      minmax(0,1fr)
      82px
      minmax(0,1fr)
      minmax(0,1fr) !important;

    align-items:center !important;

    padding:0 5px !important;
    box-sizing:border-box !important;

    border-radius:28px !important;

    border:1.5px solid rgba(61,149,255,.90) !important;

    background:
      radial-gradient(circle at 50% -30%,
        rgba(47,83,255,.19),
        transparent 55%),
      linear-gradient(
        180deg,
        rgba(13,20,51,.97),
        rgba(5,9,27,.98)
      ) !important;

    box-shadow:
      0 0 0 1px rgba(111,55,255,.40),
      0 0 9px rgba(0,205,255,.42),
      0 0 22px rgba(57,72,255,.34),
      0 14px 36px rgba(0,0,0,.58),
      inset 0 1px 0 rgba(255,255,255,.08),
      inset 0 -1px 8px rgba(51,39,255,.13) !important;

    backdrop-filter:blur(24px) !important;
    -webkit-backdrop-filter:blur(24px) !important;

    overflow:visible !important;
  }

  /* NO individual frames on the four normal buttons */
  #tofyV200Bottom.tofy-v200-bottom > a{
    position:relative !important;

    height:68px !important;
    min-width:0 !important;

    margin:0 !important;
    padding:0 2px !important;

    border:0 !important;
    border-radius:0 !important;

    background:transparent !important;
    box-shadow:none !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;

    gap:5px !important;

    color:#9ba9d7 !important;

    font-size:10px !important;
    font-weight:800 !important;

    text-decoration:none !important;

    transition:
      color .18s ease,
      transform .18s ease !important;
  }

  #tofyV200Bottom.tofy-v200-bottom > a i{
    font-style:normal !important;
    font-size:21px !important;
    line-height:1 !important;

    color:#b7c8ff !important;

    text-shadow:
      0 0 8px rgba(75,129,255,.28) !important;

    transition:.18s ease !important;
  }

  #tofyV200Bottom.tofy-v200-bottom > a span{
    white-space:nowrap !important;
  }

  #tofyV200Bottom.tofy-v200-bottom > a.active{
    color:#eef5ff !important;
  }

  #tofyV200Bottom.tofy-v200-bottom > a.active i{
    color:#d9f8ff !important;

    text-shadow:
      0 0 5px #40e5ff,
      0 0 13px rgba(43,131,255,.90) !important;
  }

  #tofyV200Bottom.tofy-v200-bottom > a:active{
    transform:scale(.94) !important;
  }


  /* =========================
     CENTER TP — ONLY FRAMED TAB
     ========================= */

  #tofyV200Center.tofy-v200-center{
    position:relative !important;
    z-index:50 !important;

    width:76px !important;
    height:84px !important;

    /*
       Lower than previous version.
       Center of button now visually crosses the bar.
    */
    margin:-14px auto 0 !important;

    padding:0 !important;

    display:grid !important;
    place-items:center !important;

    border:0 !important;
    border-radius:25px !important;

    background:
      radial-gradient(circle at 50% 30%,
        #18275e 0%,
        #111941 47%,
        #080b25 76%,
        #06081c 100%) !important;

    box-shadow:
      0 0 0 2px #36d9ff,
      0 0 0 4px rgba(75,57,255,.85),
      0 0 11px rgba(0,225,255,.85),
      0 0 25px rgba(58,73,255,.80),
      0 0 38px rgba(124,40,255,.42),
      0 12px 25px rgba(0,0,0,.65),
      inset 0 1px 4px rgba(255,255,255,.15),
      inset 0 -10px 22px rgba(71,35,255,.17) !important;

    overflow:hidden !important;

    cursor:pointer !important;
    -webkit-tap-highlight-color:transparent !important;
  }

  #tofyV200Center.tofy-v200-center::before{
    content:"" !important;

    position:absolute !important;
    inset:4px !important;

    border-radius:21px !important;

    border:1px solid rgba(103,154,255,.55) !important;

    box-shadow:
      inset 0 0 13px rgba(47,101,255,.18) !important;

    pointer-events:none !important;
  }

  /* Disable old circular halo/ring shape */
  #tofyV200Center .tofy-v200-gold-halo{
    display:none !important;
  }

  #tofyV200Center .tofy-v200-gold-ring{
    position:relative !important;
    z-index:3 !important;

    width:100% !important;
    height:100% !important;

    display:grid !important;
    place-items:center !important;

    border:0 !important;
    border-radius:0 !important;

    background:transparent !important;

    box-shadow:none !important;

    overflow:visible !important;
  }

  #tofyV200Center .tofy-v200-gold-ring::before,
  #tofyV200Center .tofy-v200-gold-ring::after{
    display:none !important;
  }

  #tofyV200Center .tofy-v200-gold-tp{
    position:relative !important;
    z-index:5 !important;

    margin:0 !important;

    font-family:Georgia,"Times New Roman",serif !important;

    font-size:32px !important;
    line-height:1 !important;
    font-weight:900 !important;
    font-style:italic !important;

    letter-spacing:-6px !important;

    transform:
      translateX(-3px)
      skewX(-8deg) !important;

    background:
      linear-gradient(
        180deg,
        #fff8b3 0%,
        #ffd75a 17%,
        #bc7108 45%,
        #ffe986 67%,
        #a65d00 100%
      ) !important;

    -webkit-background-clip:text !important;
    background-clip:text !important;

    color:transparent !important;

    filter:
      drop-shadow(0 1px 0 #fff3a7)
      drop-shadow(0 2px 1px #5a3000)
      drop-shadow(0 0 7px rgba(255,188,30,.68)) !important;
  }

  #tofyV200Center .tofy-v200-gold-spark{
    position:absolute !important;

    top:13px !important;
    right:15px !important;

    z-index:6 !important;

    color:#fff7b1 !important;

    font-size:8px !important;

    text-shadow:
      0 0 4px #fff,
      0 0 9px #ffd13b !important;

    pointer-events:none !important;
  }

  #tofyV200Center:active{
    transform:scale(.94) !important;
  }


  /* =========================
     ADMIN LINK — STAFF ONLY
     visibility remains controlled
     by existing canBackoffice JS
     ========================= */

  #tofyV200Drawer .tofy-v200-admin-link{
    position:relative !important;

    margin-top:8px !important;

    color:#ffe08a !important;

    border:1px solid rgba(234,174,48,.48) !important;

    background:
      linear-gradient(
        135deg,
        rgba(111,70,8,.20),
        rgba(255,190,38,.08)
      ) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,239,170,.08),
      0 0 14px rgba(225,156,25,.10) !important;
  }

  #tofyV200Drawer .tofy-v200-admin-link span{
    color:#ffd45e !important;

    text-shadow:
      0 0 9px rgba(255,192,48,.58) !important;
  }

  #tofyV200Drawer .tofy-v200-admin-link::after{
    content:"" !important;

    position:absolute !important;

    inset-inline-end:13px !important;

    width:6px !important;
    height:6px !important;

    border-radius:50% !important;

    background:#ffd75e !important;

    box-shadow:
      0 0 8px #ffca3a !important;
  }


  /* =========================
     DRAWER BRAND
     ========================= */

  #tofyV200Drawer .tofy-v200-drawer-brand .tofy-v200-tp{
    position:relative !important;

    color:transparent !important;
    font-size:0 !important;

    background:
      radial-gradient(circle at 50% 35%,
        #19275b,
        #0b102d 70%) !important;

    border:1px solid #4e70ff !important;

    box-shadow:
      0 0 13px rgba(49,112,255,.45),
      0 0 22px rgba(95,44,255,.20) !important;
  }

  #tofyV200Drawer .tofy-v200-drawer-brand .tofy-v200-tp::before{
    content:"TP" !important;

    position:absolute !important;
    inset:0 !important;

    display:grid !important;
    place-items:center !important;

    font-family:Georgia,"Times New Roman",serif !important;
    font-size:20px !important;
    font-weight:900 !important;
    font-style:italic !important;
    letter-spacing:-4px !important;

    background:
      linear-gradient(
        180deg,
        #fff3a1,
        #e9a72d 45%,
        #fff080 68%,
        #9d5800
      ) !important;

    -webkit-background-clip:text !important;
    background-clip:text !important;

    color:transparent !important;

    transform:translateX(-2px) skewX(-7deg) !important;

    filter:
      drop-shadow(0 1px 1px #5b3000)
      drop-shadow(0 0 4px rgba(255,191,35,.55)) !important;
  }
}


/* very small phones */
@media (max-width:370px){

  #tofyV200Bottom.tofy-v200-bottom{
    left:6px !important;
    right:6px !important;

    grid-template-columns:
      minmax(0,1fr)
      minmax(0,1fr)
      70px
      minmax(0,1fr)
      minmax(0,1fr) !important;
  }

  #tofyV200Center.tofy-v200-center{
    width:66px !important;
    height:78px !important;
  }

  #tofyV200Center .tofy-v200-gold-tp{
    font-size:28px !important;
  }

  #tofyV200Bottom.tofy-v200-bottom > a{
    font-size:9px !important;
  }

  #tofyV200Bottom.tofy-v200-bottom > a i{
    font-size:19px !important;
  }
}

/* ===== TOFY REAL TP LOGO V209 ===== */

@media (max-width:850px){

  /* CENTER BUTTON: keep all current functions, replace CSS letters with real logo */
  #tofyV200Center.tofy-v200-center{
    overflow:visible !important;
  }

  #tofyV200Center .tofy-v200-gold-ring{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    display:block !important;
    overflow:visible !important;
  }

  #tofyV200Center .tofy-v200-gold-ring::after{
    content:"" !important;
    display:block !important;
    position:absolute !important;

    left:50% !important;
    top:50% !important;

    width:56px !important;
    height:56px !important;

    transform:translate(-50%,-50%) !important;

    background:
      url("/assets/brand/tofy-pay-icon.png")
      center center / contain
      no-repeat !important;

    filter:
      drop-shadow(0 2px 2px rgba(0,0,0,.55))
      drop-shadow(0 0 7px rgba(255,190,35,.38)) !important;

    pointer-events:none !important;
  }

  #tofyV200Center .tofy-v200-gold-tp,
  #tofyV200Center .tofy-v200-gold-spark{
    display:none !important;
  }


  /* TOP MENU BUTTON: same real TP identity */
  #tofyV200MenuButton .tofy-v200-tp{
    color:transparent !important;
    font-size:0 !important;
    overflow:hidden !important;
  }

  #tofyV200MenuButton .tofy-v200-tp::before{
    content:"" !important;
    position:absolute !important;
    inset:6px !important;

    background:
      url("/assets/brand/tofy-pay-icon.png")
      center center / contain
      no-repeat !important;

    filter:
      drop-shadow(0 1px 1px rgba(0,0,0,.55))
      drop-shadow(0 0 5px rgba(255,190,35,.35)) !important;

    transform:none !important;
  }


  /* DRAWER BRAND: same real logo */
  #tofyV200Drawer .tofy-v200-drawer-brand .tofy-v200-tp::before{
    content:"" !important;
    position:absolute !important;
    inset:6px !important;

    background:
      url("/assets/brand/tofy-pay-icon.png")
      center center / contain
      no-repeat !important;

    transform:none !important;

    filter:
      drop-shadow(0 1px 1px rgba(0,0,0,.55))
      drop-shadow(0 0 5px rgba(255,190,35,.35)) !important;
  }
}

@media (max-width:370px){
  #tofyV200Center .tofy-v200-gold-ring::after{
    width:50px !important;
    height:50px !important;
  }
}

/* ===== TOFY V210 MOBILE TOUCH FIX ===== */
@media (max-width:850px){

  /* Hidden overlays must never block bottom navigation */
  #tofyV200DrawerOverlay,
  #tofyV200QuickOverlay,
  .tofy-v200-overlay,
  .tofy-v200-quick-overlay{
    pointer-events:none !important;
  }

  #tofyV200DrawerOverlay.open,
  #tofyV200QuickOverlay.open,
  .tofy-v200-overlay.open,
  .tofy-v200-quick-overlay.open{
    pointer-events:auto !important;
  }

  /* Keep all four navigation links fully clickable */
  #tofyV200Bottom{
    pointer-events:auto !important;
  }

  #tofyV200Bottom > a{
    position:relative !important;
    z-index:60 !important;
    pointer-events:auto !important;
    touch-action:manipulation !important;
  }

  #tofyV200Bottom > a > i,
  #tofyV200Bottom > a > span{
    pointer-events:none !important;
  }

  /* TP keeps its existing Quick Actions function */
  #tofyV200Center{
    pointer-events:auto !important;
    touch-action:manipulation !important;
  }
}

/* =========================================================
   TOFY PAY — GLOBAL MOBILE SHELL V215
   Normalize every customer page to the phone viewport
   ========================================================= */
@media (max-width:850px){

  html.tofy-mobile-v200,
  html.tofy-mobile-v200 body{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    overflow-x:hidden !important;
  }

  html.tofy-mobile-v200 body > .layout.layout-global-side{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    grid-template-columns:minmax(0,1fr) !important;
    box-sizing:border-box !important;
  }

  html.tofy-mobile-v200 body > .layout.layout-global-side > .sidebar,
  html.tofy-mobile-v200 body > .layout.layout-global-side > .side{
    display:none !important;
  }

  html.tofy-mobile-v200 body > .layout.layout-global-side > main.page-main{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding-left:12px !important;
    padding-right:12px !important;
    box-sizing:border-box !important;
    overflow:visible !important;
  }

  html.tofy-mobile-v200 .page-main > *,
  html.tofy-mobile-v200 .page-main section,
  html.tofy-mobile-v200 .page-main form{
    max-width:100%;
    box-sizing:border-box;
  }

  html.tofy-mobile-v200 img,
  html.tofy-mobile-v200 video,
  html.tofy-mobile-v200 canvas,
  html.tofy-mobile-v200 svg{
    max-width:100%;
  }

  html.tofy-mobile-v200 input,
  html.tofy-mobile-v200 select,
  html.tofy-mobile-v200 textarea{
    max-width:100%;
    box-sizing:border-box;
  }

}

/* Home V212 already owns its exact inner spacing */
@media (max-width:850px){
  html.tofy-mobile-v200 body[data-page="home"] >
  .layout.layout-global-side > main.page-main{
    padding-left:0 !important;
    padding-right:0 !important;
  }
}