.tf-shell .site-header{height:55px;position:sticky;top:0;z-index:20;background:linear-gradient(110deg,#1c2451,#11182e 75%);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(16px,3vw,36px);box-shadow:0 2px 12px #10182d22}
.tf-shell .brand{display:flex;align-items:center;gap:8px;font:800 17px Manrope,sans-serif;letter-spacing:.3px}
.tf-shell .brand-symbol{width:24px;height:24px;flex:none}
.tf-shell .brand-accent{color:#b579ff}
.tf-shell .header-actions{display:flex;align-items:center;gap:19px}
.tf-shell .header-actions>a{font-size:10px;font-weight:800;letter-spacing:.35px}
.tf-shell .header-icon{width:22px;height:26px;padding:0;border:0;background:none;color:white;display:grid;place-items:center}
.tf-shell .header-icon svg,.tf-shell .bottom-nav svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tf-shell .bottom-nav{height:59px;position:fixed;z-index:30;bottom:0;left:0;right:0;background:#11182e;display:grid;grid-template-columns:repeat(4,1fr);box-shadow:0 -2px 12px #0d143026;color:white}
.tf-shell .bottom-nav>a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#e9ebf5;font-size:8px}
.tf-shell .bottom-nav svg{width:18px;height:18px}
.tf-shell .bottom-nav>a.active{background:linear-gradient(105deg,#4757ec,#6258ed);color:#fff}
@media(max-width:600px){.tf-shell .site-header{height:55px;padding:0 14px}
.tf-shell .brand{font-size:15px}
.tf-shell .header-actions{gap:13px}
.tf-shell .header-actions>a{font-size:9px}
.tf-shell .header-icon svg{width:18px}
.tf-shell .bottom-nav{height:59px}
.tf-shell .bottom-nav>a{font-size:7px}
.tf-shell .bottom-nav svg{width:17px;height:17px}}
@media(max-width:370px){.tf-shell .header-actions{gap:9px}
.tf-shell .header-actions>a{font-size:8px}}
.tf-shell .site-header{transition:transform .24s ease,visibility .24s ease;will-change:transform}
.tf-shell .site-header.is-hidden{transform:translateY(-105%);visibility:hidden}
.tf-shell .brand{font-size:21px;gap:9px;letter-spacing:.35px}
.tf-shell .brand-symbol{width:25px;height:25px}
.tf-shell .header-actions{gap:22px}
.tf-shell .header-actions>a{font-size:14px;letter-spacing:.2px}
.tf-shell .header-icon{width:27px;height:30px}
.tf-shell .header-icon svg{width:23px;height:23px;stroke-width:1.65}
.tf-shell .bottom-nav{height:60px}
.tf-shell .bottom-nav>a{font-size:12px;gap:2px}
.tf-shell .bottom-nav svg{width:22px;height:22px;stroke-width:1.7}
.tf-shell .menu-backdrop[hidden]{display:none}
.tf-shell .menu-backdrop{position:fixed;inset:0;z-index:39;background:rgba(255,255,255,.72)}
.tf-shell .site-menu{position:fixed;z-index:40;inset:0 0 0 auto;width:min(470px,38vw);min-width:340px;overflow-y:auto;background:#050505;color:#f7f7f7;box-shadow:-12px 0 30px rgba(0,0,0,.14);transform:translateX(102%);transition:transform .24s ease;overscroll-behavior:contain}
.tf-shell .site-menu[aria-hidden="false"]{transform:translateX(0)}
.tf-shell .menu-top{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 14px 0 13px;border-bottom:1px solid rgba(255,255,255,.11)}
.tf-shell .menu-top>a,.tf-shell .menu-links a{font-size:15px;line-height:1.3;color:#f2f2f2}
.tf-shell .menu-top>a{padding:12px 0}
.tf-shell .menu-close{border:0;background:transparent;color:white;width:32px;height:36px;display:grid;place-items:center;padding:0}
.tf-shell .menu-close svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.tf-shell .menu-links{padding:8px 14px 22px 13px}
.tf-shell .menu-group{display:flex;flex-direction:column;padding:8px 0 15px;border-bottom:1px solid rgba(255,255,255,.2)}
.tf-shell .menu-group a{display:flex;align-items:center;min-height:36px;padding:5px 0}
.tf-shell .menu-group a:hover,.tf-shell .menu-top>a:hover{color:#c5b5ff}
.tf-shell .menu-group-last{border-bottom:0;padding-top:11px;padding-bottom:12px}
@media(max-width:600px){.tf-shell .brand{font-size:19px}
.tf-shell .brand-symbol{width:23px;height:23px}
.tf-shell .header-actions{gap:13px}
.tf-shell .header-actions>a{font-size:12px}
.tf-shell .header-icon{width:25px}
.tf-shell .header-icon svg{width:22px;height:22px}
.tf-shell .bottom-nav{height:60px}
.tf-shell .bottom-nav>a{font-size:11px}
.tf-shell .bottom-nav svg{width:21px;height:21px}
.tf-shell .site-menu{width:min(430px,92vw);min-width:0}
.tf-shell .menu-top{height:58px}
.tf-shell .menu-top>a,.tf-shell .menu-links a{font-size:15px}
.tf-shell .menu-group a{min-height:36px}}
@media(max-width:370px){.tf-shell .brand{font-size:17px}
.tf-shell .header-actions{gap:10px}
.tf-shell .header-actions>a{font-size:10px}}
/* Public shell only. The body of the ringtone page is scoped separately. */
.tf-shell{font-family:Arial,sans-serif;color:#172033}
.tf-shell *, .tf-shell *::before,.tf-shell *::after{box-sizing:border-box}
.tf-shell a{text-decoration:none;color:inherit}.tf-shell button{font:inherit;cursor:pointer}
.tf-shell .brand svg{flex-shrink:0}.tf-shell .brand-accent{color:#df42d4}
.tf-shell .header-icon{background:none;border:0;color:white;display:grid;place-items:center;padding:0}
.tf-shell .header-icon svg,.tf-shell .bottom-nav svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.tf-shell .bottom-nav{z-index:35}.tf-shell .bottom-nav a:hover{background:#293157}
.tf-shell .bottom-nav a.active{background:linear-gradient(105deg,#4757ec,#6258ed)}
.tf-shell .site-header{position:sticky;top:0}.tf-shell:has(>.site-header){position:sticky;top:0;z-index:40;display:block}
body.tf-menu-open{overflow:hidden}.tf-shell .menu-backdrop{z-index:49}.tf-shell .site-menu{z-index:50}
.tf-shell .tf-search{position:absolute;top:55px;right:22px;background:#fff;border:1px solid #e7eaf0;border-radius:12px;padding:18px;box-shadow:0 12px 30px #121a3622;width:min(400px,calc(100vw - 24px));color:#172033}
.tf-shell .tf-search[hidden]{display:none}.tf-search label{font-size:13px;display:block;margin-bottom:10px;font-weight:700}
.tf-search>div{display:flex;gap:8px}.tf-search input{min-width:0;flex:1;border:1px solid #cdd3df;padding:10px;border-radius:6px;font:inherit}
.tf-search button{border:0;background:#159b43;color:#fff;border-radius:6px;padding:9px 14px}
.tf-footer{text-align:center;padding:20px 16px 32px;color:#778294;font-size:13px}.tf-footer p{margin:0 0 14px}.tf-footer nav{display:flex;justify-content:center;gap:18px}.tf-footer small{display:block;margin-top:18px}

/* Compatibility limited to the supplied common shell. */
body {padding-bottom:72px;}
.tf-shell .site-header {margin:0;border:0;border-radius:0;width:100%;max-width:none;}
.tf-shell .site-header nav {margin:0;padding:0;position:static;background:none;border:0;}
.tf-shell .brand {color:#fff;line-height:1;}
.tf-shell .site-menu nav {position:static;background:none;}
.tf-shell .bottom-nav {margin:0;padding:0;border:0;border-radius:0;width:100%;max-width:none;}
.tf-shell [hidden] {display:none;}

/* The retained detail body has its own legacy fixed dock. Use the shared shell navigation. */
body .dr-mobile-bottom-nav {display:none!important;}

/* Business feedback B02: reserve real document space below the fixed navigation. */
body {height:auto!important;min-height:100%;padding-bottom:calc(80px + env(safe-area-inset-bottom, 0px))!important;}

/* Mobile scrolling: header stays in document flow; bottom navigation stays fixed. */
@media (max-width:768px), (hover:none) and (pointer:coarse) {
  .tf-shell:has(>.site-header) {position:relative;top:auto;}
  .tf-shell .site-header {position:relative;top:auto;transform:none;visibility:visible;transition:none;will-change:auto;}
}