/* V5.19 Responsive Public UI
   Desktop keeps the existing navigation/content structure.
   Mobile/tablet presentation is fluid; no article/menu/database content is changed. */

html{scroll-behavior:smooth}
img,video,iframe{max-width:100%}
button,input,select,textarea{max-width:100%}

.mobile-nav-toggle{display:none}

@media (max-width: 1100px){
  .wrap{width:min(94%,1180px)}
  .brand{gap:14px}
  .brand form{max-width:320px}
  .links a{padding-left:11px;padding-right:11px}
  .article{max-width:900px}
}

@media (max-width: 768px){
  :root{--mobile-dock-height:64px}
  body{padding-bottom:88px;overflow-x:hidden}
  body.mobile-menu-open{overflow:hidden}

  /* Compact header: branding remains identical, only spacing changes. */
  .top{position:sticky;top:0;z-index:1000}
  .brand{width:94%;min-height:68px;height:auto;padding:10px 0;gap:10px;align-items:center;flex-wrap:wrap}
  .brand>a{min-width:0;flex:1 1 auto;max-width:100%}
  .brand>a>span:last-child{min-width:0}
  .brand b{font-size:17px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:55vw}
  .brand small{font-size:11px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:58vw}
  .brand-logo{width:42px!important;height:42px!important;flex:0 0 auto}
  .brand form{order:3;flex:1 0 100%;width:100%;max-width:none;margin-top:2px}
  .brand input{min-width:0;font-size:14px}

  /* macOS-like floating navigation dock on gadgets. */
  nav{position:fixed!important;left:12px;right:12px;bottom:12px;top:auto!important;width:auto!important;height:auto!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;z-index:10020}
  nav .navinner{position:relative;width:100%;max-width:none;margin:0!important;padding:8px 10px!important;min-height:var(--mobile-dock-height);display:flex!important;align-items:center;justify-content:space-between;gap:8px;border:1px solid rgba(255,255,255,.72);border-radius:24px;background:rgba(255,255,255,.72);box-shadow:0 18px 50px rgba(15,23,42,.22),0 3px 10px rgba(15,23,42,.08);backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%)}
  nav .navinner:before{content:"";position:absolute;inset:1px;border-radius:23px;pointer-events:none;background:linear-gradient(120deg,rgba(255,255,255,.5),rgba(255,255,255,.08));opacity:.7}

  .mobile-nav-toggle{position:relative;z-index:2;display:inline-flex!important;align-items:center;justify-content:center;gap:7px;min-width:76px;height:46px;padding:0 12px;border:1px solid rgba(148,163,184,.22);border-radius:17px;background:rgba(248,250,252,.82);color:#0f172a;font:inherit;font-size:12px;font-weight:800;cursor:pointer;box-shadow:0 5px 14px rgba(15,23,42,.08)}
  .mobile-nav-icon{display:grid;gap:3px;width:17px}
  .mobile-nav-icon i{display:block;height:2px;width:17px;border-radius:99px;background:currentColor;transition:transform .2s ease,opacity .2s ease}
  .mobile-nav-label{line-height:1}
  .mobile-menu-open .mobile-nav-toggle{background:#0f172a;color:#fff}
  .mobile-menu-open .mobile-nav-icon i:nth-child(1){transform:translateY(5px) rotate(45deg)}
  .mobile-menu-open .mobile-nav-icon i:nth-child(2){opacity:0}
  .mobile-menu-open .mobile-nav-icon i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

  /* The existing database-driven .links becomes the floating menu panel. */
  nav .links{position:fixed;left:12px;right:12px;bottom:86px;z-index:10021;display:none!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:12px;max-height:min(62vh,520px);overflow-y:auto;overscroll-behavior:contain;border:1px solid rgba(255,255,255,.78);border-radius:24px;background:rgba(255,255,255,.84);box-shadow:0 24px 70px rgba(15,23,42,.28);backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%)}
  nav .navinner.mobile-menu-open .links{display:grid!important;animation:mobileMenuIn .2s ease-out both}
  nav .links a{min-height:48px;display:flex;align-items:center;justify-content:center;text-align:center;padding:10px 9px;border:1px solid rgba(148,163,184,.18);border-radius:15px;background:rgba(248,250,252,.78);color:#172033;font-size:12px;font-weight:800;line-height:1.25;white-space:normal;box-shadow:0 5px 15px rgba(15,23,42,.05)}
  nav .links a:hover,nav .links a:focus{background:#eef2ff;color:#173b8f;outline:none;transform:translateY(-1px)}
  nav .login{position:relative;z-index:2;display:inline-flex!important;align-items:center;justify-content:center;min-width:82px;height:46px;padding:0 14px;border-radius:17px;background:linear-gradient(135deg,#173b8f,#6d28d9);color:#fff!important;font-size:12px;font-weight:850;box-shadow:0 8px 20px rgba(37,56,140,.22)}

  body.mobile-menu-open:after{content:"";position:fixed;inset:0;z-index:10010;background:rgba(15,23,42,.18);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}

  main.wrap{width:94%;max-width:1180px}
  .article{width:100%;margin:28px auto}
  .article-head h1{font-size:clamp(28px,7vw,42px);line-height:1.12}
  .article-cover{max-height:none;border-radius:16px}
  .content{font-size:17px;line-height:1.75;overflow-wrap:anywhere}
  .content table{display:block;overflow-x:auto;max-width:100%}
  .content pre{max-width:100%;overflow:auto}
  .video iframe{min-height:220px}

  .grid,.gallery,.topic-row,.epaper-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lead{grid-template-columns:1fr}
  .hero{padding:34px 28px;min-height:300px}
  .hero h1{font-size:clamp(30px,7vw,48px)}
  .lead>div+div{padding:28px}
  .pagehead{padding:28px 0 16px}
  .pagehead h1{font-size:32px}

  .site-footer .footer-grid{width:94%!important}
  .site-footer .footer-bottom{width:94%!important}
  .floating-wa{z-index:10030!important;right:14px!important;bottom:92px!important}
}

@media (max-width: 520px){
  .brand{width:92%;padding:9px 0}
  .brand b{font-size:15px;max-width:57vw}
  .brand small{font-size:10px;max-width:60vw}
  .brand-logo{width:38px!important;height:38px!important}
  .brand form{margin-top:0}
  .brand input{padding:9px 10px;font-size:13px}
  .brand button{padding:0 12px}

  nav{left:9px;right:9px;bottom:9px}
  nav .navinner{padding:7px 8px!important;border-radius:21px;min-height:60px}
  nav .links{left:9px;right:9px;bottom:78px;border-radius:21px;padding:10px;grid-template-columns:1fr 1fr;gap:7px}
  nav .links a{min-height:46px;font-size:11px;border-radius:13px}
  .mobile-nav-toggle,.login{height:44px!important;border-radius:15px!important}
  .mobile-nav-toggle{min-width:72px;padding:0 10px}
  nav .login{min-width:76px;padding:0 11px;font-size:11px}

  main.wrap{width:92%}
  .grid,.gallery,.topic-row,.epaper-grid{grid-template-columns:1fr}
  .hero{padding:28px 22px;border-radius:20px}
  .article{margin-top:22px}
  .article-head h1{font-size:30px}
  .content{font-size:16px}
  .content img{border-radius:12px}
  .formcard{padding:18px}
  .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot{display:block}

  .site-footer{margin-top:48px!important}
  .site-footer .footer-grid{width:92%!important}
  .site-footer .footer-bottom{width:92%!important}
  .floating-wa{right:12px!important;bottom:82px!important;width:50px!important;height:50px!important}
}

@media (max-width: 360px){
  nav .links{grid-template-columns:1fr}
  .mobile-nav-label{display:none}
  .mobile-nav-toggle{min-width:52px}
  nav .login{min-width:68px}
  .brand b{max-width:53vw}
  .brand small{display:none}
}

@keyframes mobileMenuIn{
  from{opacity:0;transform:translateY(8px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  nav .navinner.mobile-menu-open .links{animation:none}
  .mobile-nav-icon i{transition:none}
}


/* V5.23 Mobile macOS-style bottom dock. Desktop/tablet navigation remains unchanged. */
.mobile-macos-dock{display:none}
@media (max-width:768px){
  :root{
    --macos-dock-bg:rgba(255,255,255,.92);
    --macos-dock-border:rgba(255,255,255,.86);
    --macos-dock-text:#667085;
    --macos-dock-active:#2455b8;
    --macos-dock-blue:#214fc0;
    --macos-dock-height:78px;
  }
  /* Hide the old bottom bar presentation; the database-driven links remain available in the panel. */
  nav{display:none!important}
  .mobile-macos-dock{display:block;position:fixed;left:14px;right:14px;bottom:12px;z-index:10040;pointer-events:none}
  .mobile-dock-inner{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;gap:2px;min-height:var(--macos-dock-height);padding:9px 7px 7px;border:1px solid var(--macos-dock-border);border-radius:27px;background:var(--macos-dock-bg);box-shadow:0 20px 55px rgba(15,23,42,.20),0 4px 14px rgba(15,23,42,.10);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);pointer-events:auto}
  .mobile-dock-inner:before{content:"";position:absolute;inset:1px;border-radius:26px;background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.18));pointer-events:none}
  .mobile-dock-item,.mobile-dock-login,.mobile-dock-menu{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px;min-width:0;height:61px;padding:2px 3px 1px;border:0;background:transparent;color:var(--macos-dock-text);font:inherit;font-size:11px;font-weight:800;line-height:1.05;text-align:center;text-decoration:none;cursor:pointer}
  .mobile-dock-item span:last-child,.mobile-dock-login span:last-child{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mobile-dock-icon{display:grid;place-items:center;width:36px;height:36px;font-size:34px;line-height:1;color:#64748b;font-weight:500}
  .mobile-dock-item:first-of-type,.mobile-dock-item:nth-of-type(2){color:var(--macos-dock-active)}
  .mobile-dock-item:first-of-type .mobile-dock-icon{color:var(--macos-dock-active)}
  .mobile-dock-menu{position:relative;align-self:start;margin-top:-45px;height:92px;color:#667085;font-size:12px;justify-content:flex-end}
  .mobile-dock-menu:before{content:"";position:absolute;top:0;left:50%;width:74px;height:74px;transform:translateX(-50%);border-radius:50%;background:linear-gradient(145deg,#1748a9,#2864d9);border:7px solid rgba(255,255,255,.98);box-shadow:0 12px 30px rgba(30,64,175,.28),0 0 0 1px rgba(15,23,42,.04)}
  .mobile-dock-menu-icon{position:relative;z-index:2;display:grid;grid-template-columns:repeat(2,11px);grid-template-rows:repeat(2,11px);gap:5px;width:74px;height:74px;place-content:center;color:#fff}
  .mobile-dock-menu-icon i{display:block;width:11px;height:11px;border:2px solid #fff;border-radius:3px}
  .mobile-dock-menu>span:last-child{position:relative;z-index:2;margin-bottom:-1px;color:#667085}
  .mobile-dock-login{display:none}
  body{padding-bottom:108px}
  .floating-wa{z-index:10050!important;right:16px!important;bottom:108px!important}
  body.mobile-menu-open .mobile-macos-dock{z-index:10060}
  body.mobile-menu-open .mobile-macos-dock:after{content:"";position:fixed;inset:0;z-index:-1;background:rgba(15,23,42,.08);pointer-events:none}
  /* Reuse the existing database-driven menu panel, now positioned directly above the dock. */
  nav .links{display:none!important}
  .mobile-macos-dock .mobile-dock-menu.is-open:after{content:""}
  @supports selector(:has(*)){
    body.mobile-menu-open nav .links{position:fixed;display:grid!important;left:14px;right:14px;bottom:100px;z-index:10061;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:12px;max-height:min(62vh,520px);overflow-y:auto;border:1px solid rgba(255,255,255,.9);border-radius:25px;background:rgba(255,255,255,.96);box-shadow:0 24px 70px rgba(15,23,42,.24);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);animation:mobileMacMenuIn .2s ease-out both}
    body.mobile-menu-open nav .links a{min-height:48px;display:flex;align-items:center;justify-content:center;text-align:center;padding:10px;border:1px solid #e5e7eb;border-radius:15px;background:#fff;color:#172033;font-size:12px;font-weight:800;line-height:1.25;text-decoration:none}
  }
}
@media (max-width:520px){
  .mobile-macos-dock{left:8px;right:8px;bottom:8px}
  .mobile-dock-inner{min-height:73px;padding:8px 4px 5px;border-radius:24px}
  .mobile-dock-menu:before{width:68px;height:68px}
  .mobile-dock-menu-icon{width:68px;height:68px}
  .mobile-dock-icon{width:31px;height:31px;font-size:29px}
  .mobile-dock-item,.mobile-dock-login,.mobile-dock-menu{font-size:10px;height:58px}
  .mobile-dock-menu{height:86px;margin-top:-41px}
  body{padding-bottom:101px}
  .floating-wa{bottom:101px!important;right:12px!important}
  @supports selector(:has(*)){body.mobile-menu-open nav .links{left:8px;right:8px;bottom:91px;border-radius:22px;grid-template-columns:repeat(2,minmax(0,1fr));padding:10px;gap:7px}}
}
@media (max-width:380px){
  .mobile-dock-inner{grid-template-columns:repeat(5,minmax(0,1fr));gap:0}
  .mobile-dock-item,.mobile-dock-menu{font-size:9px}
  .mobile-dock-icon{font-size:26px}
}
@keyframes mobileMacMenuIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.mobile-macos-dock *{animation:none!important;transition:none!important}}


/* V5.23.1 panel override: the old nav remains hidden on gadgets; menu panel lives outside nav. */
@media (max-width:768px){
  .mobile-macos-dock{bottom:var(--macos-dock-bottom,12px)}
  .mobile-dock-inner{background:color-mix(in srgb,var(--macos-dock-bg,#fff) calc(var(--macos-dock-opacity,.92) * 100%),transparent);border-radius:var(--macos-dock-radius,27px)}
  .mobile-dock-item:first-of-type,.mobile-dock-item:nth-of-type(2){color:var(--macos-dock-active,#2455b8)}
  .mobile-dock-item:first-of-type .mobile-dock-icon,.mobile-dock-item:nth-of-type(2) .mobile-dock-icon{color:var(--macos-dock-active,#2455b8)}
  .mobile-dock-menu-panel{display:none;position:fixed;left:14px;right:14px;bottom:calc(var(--macos-dock-bottom,12px) + 90px);z-index:10061;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:12px;max-height:min(62vh,520px);overflow-y:auto;overscroll-behavior:contain;border:1px solid rgba(255,255,255,.92);border-radius:25px;background:rgba(255,255,255,.96);box-shadow:0 24px 70px rgba(15,23,42,.24);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%)}
  .mobile-dock-menu-panel.is-open{display:grid;animation:mobileMacMenuIn .2s ease-out both}
  .mobile-dock-menu-panel a{min-height:48px;display:flex;align-items:center;justify-content:center;text-align:center;padding:10px;border:1px solid #e5e7eb;border-radius:15px;background:#fff;color:#172033;font-size:12px;font-weight:800;line-height:1.25;text-decoration:none;box-shadow:0 4px 12px rgba(15,23,42,.04)}
  .mobile-dock-menu-panel a:active,.mobile-dock-menu-panel a:focus{background:#eef4ff;color:var(--macos-dock-active,#2455b8);outline:none}
  body.mobile-menu-open .mobile-dock-menu-panel{display:grid}
  .mobile-dock-menu.is-open:before{box-shadow:0 12px 30px rgba(30,64,175,.34),0 0 0 2px rgba(255,255,255,.9)}
  .mobile-dock-menu.is-open>span:last-child{color:var(--macos-dock-active,#2455b8)}
}
@media (max-width:520px){
  .mobile-dock-menu-panel{left:8px;right:8px;bottom:calc(var(--macos-dock-bottom,8px) + 82px);border-radius:22px;grid-template-columns:repeat(2,minmax(0,1fr));padding:10px;gap:7px}
}
@media (max-width:360px){.mobile-dock-menu-panel{grid-template-columns:1fr}}


/* V5.24 Mobile Dock relayout: Menu is always centered; shortcuts are distributed left/right. */
@media (min-width:769px){
  .mobile-macos-dock,.mobile-dock-menu-panel{display:none!important}
}
@media (max-width:768px){
  .mobile-macos-dock{display:block;position:fixed;left:50%;right:auto;bottom:var(--macos-dock-bottom,12px);transform:translateX(-50%);width:min(92vw,620px);z-index:10040;pointer-events:none}
  .mobile-macos-dock.dock-position-left{left:10px;right:auto;transform:none}
  .mobile-macos-dock.dock-position-right{left:auto;right:10px;transform:none}
  .mobile-dock-inner{display:grid!important;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;align-items:end;gap:4px;min-height:78px;padding:9px 8px 7px!important}
  .mobile-dock-side{display:flex;align-items:flex-end;justify-content:center;gap:2px;min-width:0;height:62px}
  .mobile-dock-side .mobile-dock-item{flex:1 1 0;min-width:0}
  .mobile-dock-item,.mobile-dock-menu{height:61px!important}
  .mobile-dock-icon{width:36px;height:36px;font-size:31px}
  .mobile-dock-menu{width:84px!important;min-width:84px!important;height:88px!important;margin-top:-34px!important;padding:0!important;align-items:center!important;justify-content:flex-end!important;gap:4px!important}
  .mobile-dock-menu:before{content:"";position:absolute;width:82px;height:82px;left:50%;top:-4px;transform:translateX(-50%);border-radius:50%;background:linear-gradient(145deg,#2f61c9,#173b8f);box-shadow:0 12px 30px rgba(30,64,175,.32),0 0 0 5px rgba(255,255,255,.9);z-index:-1}
  .mobile-dock-menu-icon{width:42px!important;height:42px!important;display:grid!important;grid-template-columns:repeat(2,1fr);gap:6px!important;align-items:center;justify-items:center;color:#fff}
  .mobile-dock-menu-icon i{display:block!important;width:15px!important;height:15px!important;border:3px solid currentColor!important;border-radius:4px!important;background:transparent!important}
  .mobile-dock-menu>span:last-child{color:#667085;font-weight:800}
  .mobile-dock-menu.is-open>span:last-child{color:var(--macos-dock-active,#2455b8)}
  .mobile-dock-menu-panel{left:50%!important;right:auto!important;transform:translateX(-50%);width:min(92vw,620px);bottom:calc(var(--macos-dock-bottom,12px) + 98px)!important}
  .mobile-macos-dock.dock-position-left + .mobile-dock-menu-panel{left:10px!important;right:auto!important;transform:none}
  .mobile-macos-dock.dock-position-right + .mobile-dock-menu-panel{left:auto!important;right:10px!important;transform:none}
  body{padding-bottom:112px}
  .floating-wa{bottom:112px!important}
}
@media (max-width:520px){
  .mobile-macos-dock{width:calc(100vw - 16px);bottom:8px}
  .mobile-macos-dock.dock-position-left{left:8px}
  .mobile-macos-dock.dock-position-right{right:8px}
  .mobile-dock-inner{min-height:74px;padding:8px 4px 5px!important;border-radius:24px}
  .mobile-dock-side{height:58px}
  .mobile-dock-item,.mobile-dock-menu{font-size:10px!important}
  .mobile-dock-icon{width:31px;height:31px;font-size:27px}
  .mobile-dock-menu{width:72px!important;min-width:72px!important;height:82px!important;margin-top:-35px!important}
  .mobile-dock-menu:before{width:70px;height:70px}
  .mobile-dock-menu-icon{width:36px!important;height:36px!important;gap:5px!important}
  .mobile-dock-menu-icon i{width:13px!important;height:13px!important;border-width:2.5px!important}
  .mobile-dock-menu-panel{width:calc(100vw - 16px)!important;bottom:calc(var(--macos-dock-bottom,8px) + 90px)!important}
  body{padding-bottom:103px}
  .floating-wa{bottom:103px!important;right:12px!important}
}
@media (max-width:360px){
  .mobile-dock-item span:last-child{font-size:9px}
  .mobile-dock-icon{font-size:24px}
  .mobile-dock-menu{width:64px!important;min-width:64px!important}
  .mobile-dock-menu:before{width:62px;height:62px}
  .mobile-dock-menu-panel{grid-template-columns:1fr!important}
}


/* V5.25 Final Mobile macOS Dock: bottom-only, never replaces/overlaps header. */
@media (min-width:769px){
  .mobile-macos-dock,
  .mobile-dock-menu-panel,
  .mobile-nav-toggle{display:none!important}
}
@media (max-width:768px){
  /* Keep the normal header in document flow; the dock is fixed only at viewport bottom. */
  header.top{position:relative;z-index:1000}
  nav{position:relative;z-index:1001}
  nav .links{display:none!important}
  nav .mobile-nav-toggle{display:none!important}

  .mobile-macos-dock{
    position:fixed!important;
    top:auto!important;
    left:50%!important;
    right:auto!important;
    bottom:max(8px, env(safe-area-inset-bottom))!important;
    transform:translateX(-50%)!important;
    width:min(94vw, 620px)!important;
    max-width:calc(100vw - 16px)!important;
    z-index:11000!important;
    pointer-events:auto!important;
  }
  .mobile-macos-dock.dock-position-left{
    left:8px!important;right:auto!important;transform:none!important;
  }
  .mobile-macos-dock.dock-position-right{
    left:auto!important;right:8px!important;transform:none!important;
  }
  .mobile-dock-inner{
    position:relative!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
    align-items:end!important;
    width:100%!important;
    min-height:78px!important;
    padding:9px 8px 7px!important;
    border-radius:var(--macos-dock-radius,27px)!important;
    box-sizing:border-box!important;
    background:rgba(255,255,255,var(--macos-dock-opacity,.92))!important;
    border:1px solid rgba(255,255,255,.92)!important;
    box-shadow:0 14px 42px rgba(15,23,42,.22),0 2px 8px rgba(15,23,42,.08)!important;
    backdrop-filter:blur(var(--macos-dock-blur,22px)) saturate(150%)!important;
    -webkit-backdrop-filter:blur(var(--macos-dock-blur,22px)) saturate(150%)!important;
  }
  .mobile-dock-side{
    display:flex!important;align-items:flex-end!important;justify-content:center!important;
    gap:2px!important;min-width:0!important;height:62px!important;
  }
  .mobile-dock-side .mobile-dock-item{
    flex:1 1 0!important;min-width:0!important;max-width:105px!important;
  }
  .mobile-dock-item{
    display:flex!important;flex-direction:column!important;align-items:center!important;
    justify-content:flex-end!important;gap:3px!important;height:61px!important;
    padding:2px!important;border:0!important;background:transparent!important;
    color:#667085!important;font-size:10px!important;font-weight:800!important;
    text-decoration:none!important;line-height:1.05!important;
  }
  .mobile-dock-item:first-child .mobile-dock-icon{color:var(--macos-dock-active,#2455b8)!important}
  .mobile-dock-icon{display:grid!important;place-items:center!important;width:34px!important;height:34px!important;font-size:29px!important;line-height:1!important}

  .mobile-dock-menu{
    position:relative!important;display:flex!important;flex-direction:column!important;
    align-items:center!important;justify-content:flex-end!important;gap:3px!important;
    width:84px!important;min-width:84px!important;height:88px!important;
    margin-top:-38px!important;padding:0!important;border:0!important;background:transparent!important;
    color:#667085!important;font-size:10px!important;font-weight:800!important;
    cursor:pointer!important;z-index:2!important;
  }
  .mobile-dock-menu:before{
    content:"";position:absolute!important;left:50%!important;top:-1px!important;
    width:78px!important;height:78px!important;transform:translateX(-50%)!important;
    border-radius:50%!important;background:linear-gradient(145deg,#2f61c9,#173b8f)!important;
    border:6px solid rgba(255,255,255,.98)!important;
    box-shadow:0 12px 30px rgba(30,64,175,.30),0 0 0 1px rgba(15,23,42,.05)!important;
    z-index:-1!important;
  }
  .mobile-dock-menu-icon{
    position:relative!important;z-index:3!important;display:grid!important;
    grid-template-columns:repeat(2,11px)!important;grid-template-rows:repeat(2,11px)!important;
    gap:5px!important;width:42px!important;height:42px!important;place-content:center!important;color:#fff!important;
  }
  .mobile-dock-menu-icon i{display:block!important;width:11px!important;height:11px!important;border:2px solid #fff!important;border-radius:3px!important;background:transparent!important}
  .mobile-dock-menu>span:last-child{position:relative!important;z-index:3!important;color:#667085!important}

  /* The full menu opens directly above the bottom dock, never from the header. */
  .mobile-dock-menu-panel{
    position:fixed!important;display:none!important;
    left:50%!important;right:auto!important;
    bottom:calc(max(8px, env(safe-area-inset-bottom)) + 98px)!important;
    transform:translateX(-50%)!important;
    width:min(94vw,620px)!important;max-width:calc(100vw - 16px)!important;
    max-height:55vh!important;overflow-y:auto!important;overscroll-behavior:contain!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;
    padding:12px!important;box-sizing:border-box!important;
    border:1px solid rgba(255,255,255,.95)!important;border-radius:24px!important;
    background:rgba(255,255,255,.97)!important;
    box-shadow:0 24px 70px rgba(15,23,42,.28)!important;
    backdrop-filter:blur(18px) saturate(150%)!important;
    -webkit-backdrop-filter:blur(18px) saturate(150%)!important;
    z-index:10999!important;
  }
  .mobile-dock-menu-panel.is-open{display:grid!important;animation:mobileMacMenuIn .18s ease-out both!important}
  .mobile-dock-menu-panel a{
    min-height:48px!important;display:flex!important;align-items:center!important;justify-content:center!important;
    text-align:center!important;padding:10px!important;border:1px solid #e5e7eb!important;
    border-radius:15px!important;background:#fff!important;color:#172033!important;
    font-size:12px!important;font-weight:800!important;line-height:1.25!important;text-decoration:none!important;
  }
  .mobile-dock-menu-panel a:active,.mobile-dock-menu-panel a:focus{background:#eef4ff!important;color:var(--macos-dock-active,#2455b8)!important;outline:none!important}

  body{padding-bottom:calc(112px + env(safe-area-inset-bottom))!important}
  .floating-wa{bottom:calc(112px + env(safe-area-inset-bottom))!important;z-index:11001!important}
  body.mobile-menu-open{overflow:hidden}
  body.mobile-menu-open .mobile-macos-dock{z-index:11001!important}
  body.mobile-menu-open .mobile-dock-menu-panel{z-index:11000!important}
  body.mobile-menu-open .mobile-macos-dock:after{display:none!important}
}
@media (max-width:520px){
  .mobile-macos-dock{width:calc(100vw - 16px)!important}
  .mobile-dock-inner{min-height:74px!important;border-radius:24px!important;padding:8px 4px 5px!important}
  .mobile-dock-side{height:58px!important}
  .mobile-dock-item{font-size:9px!important;height:57px!important}
  .mobile-dock-icon{width:30px!important;height:30px!important;font-size:25px!important}
  .mobile-dock-menu{width:72px!important;min-width:72px!important;height:82px!important;margin-top:-35px!important}
  .mobile-dock-menu:before{width:68px!important;height:68px!important}
  .mobile-dock-menu-icon{width:36px!important;height:36px!important;gap:5px!important}
  .mobile-dock-menu-icon i{width:10px!important;height:10px!important}
  .mobile-dock-menu-panel{width:calc(100vw - 16px)!important;bottom:calc(max(8px, env(safe-area-inset-bottom)) + 88px)!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body{padding-bottom:calc(102px + env(safe-area-inset-bottom))!important}
  .floating-wa{bottom:calc(102px + env(safe-area-inset-bottom))!important;right:12px!important}
}
@media (max-width:360px){
  .mobile-dock-item{font-size:8px!important}
  .mobile-dock-icon{font-size:23px!important}
  .mobile-dock-menu-panel{grid-template-columns:1fr!important}
}
@media (prefers-reduced-motion:reduce){.mobile-dock-menu-panel{animation:none!important}}

/* V5.25.1 — Force mobile macOS dock to remain fixed at the bottom of the viewport. */
@media (max-width:768px){
  .mobile-macos-dock{
    position:fixed!important;
    top:auto!important;
    bottom:max(var(--macos-dock-bottom,12px), env(safe-area-inset-bottom))!important;
    z-index:11000!important;
  }
  .mobile-dock-menu-panel{
    bottom:calc(max(var(--macos-dock-bottom,12px), env(safe-area-inset-bottom)) + 98px)!important;
    z-index:10999!important;
  }
  .floating-wa{
    bottom:calc(max(var(--macos-dock-bottom,12px), env(safe-area-inset-bottom)) + 102px)!important;
    z-index:11001!important;
  }
}
@media (max-width:520px){
  .mobile-dock-menu-panel{
    bottom:calc(max(var(--macos-dock-bottom,12px), env(safe-area-inset-bottom)) + 88px)!important;
  }
  .floating-wa{
    bottom:calc(max(var(--macos-dock-bottom,12px), env(safe-area-inset-bottom)) + 102px)!important;
  }
}

/* V5.25.2 — hard guarantee: dock/panel live at viewport bottom on mobile only. */
@media (min-width:769px){
  .mobile-macos-dock,
  .mobile-dock-menu-panel{display:none!important}
}
@media (max-width:768px){
  .mobile-macos-dock{
    position:fixed!important;
    top:auto!important;
    bottom:max(var(--macos-dock-bottom,12px), env(safe-area-inset-bottom))!important;
    margin:0!important;
    transform:translateX(-50%)!important;
    z-index:12000!important;
  }
  .mobile-macos-dock.dock-position-left{transform:none!important}
  .mobile-macos-dock.dock-position-right{transform:none!important}
  .mobile-dock-menu-panel{
    position:fixed!important;
    top:auto!important;
    bottom:calc(max(var(--macos-dock-bottom,12px), env(safe-area-inset-bottom)) + 98px)!important;
    z-index:11999!important;
  }
}
@media (max-width:520px){
  .mobile-dock-menu-panel{bottom:calc(max(var(--macos-dock-bottom,12px), env(safe-area-inset-bottom)) + 88px)!important}
}