/* DATA CORE unified fixed navbar — shared by index, warranty, and service */
:root{--dc-nav-h:68px;--dc-nav-side:40px}
html{scroll-padding-top:calc(var(--dc-nav-h) + 18px)!important}
body{padding-top:0!important}
.shell{padding-top:var(--dc-nav-h)!important}
.nav{
 position:fixed!important;top:0!important;left:50%!important;right:auto!important;
 width:min(1180px,calc(100% - var(--dc-nav-side)))!important;
 height:var(--dc-nav-h)!important;min-height:var(--dc-nav-h)!important;
 margin:0!important;padding:8px 0!important;transform:translateX(-50%)!important;
 display:flex!important;flex-direction:row!important;align-items:center!important;
 justify-content:space-between!important;gap:20px!important;
 border-bottom:1px solid rgba(120,205,255,.18)!important;
 z-index:99999!important;isolation:isolate!important;
}
.nav::before{
 content:""!important;position:absolute!important;z-index:-1!important;inset:0 auto 0 50%!important;
 width:100vw!important;transform:translateX(-50%)!important;
 background:linear-gradient(180deg,rgba(2,10,22,.99),rgba(3,13,27,.97))!important;
 border-bottom:1px solid rgba(120,205,255,.13)!important;
 box-shadow:0 10px 30px rgba(0,0,0,.42)!important;
 -webkit-backdrop-filter:blur(18px) saturate(145%)!important;
 backdrop-filter:blur(18px) saturate(145%)!important;
}
.nav::after{content:""!important;position:absolute!important;left:0!important;right:0!important;bottom:-1px!important;height:1px!important;background:linear-gradient(90deg,transparent,rgba(21,215,255,.55),transparent)!important;opacity:.65!important}
.nav .brand{min-width:0!important;display:flex!important;align-items:center!important;gap:11px!important;color:#fff!important;text-decoration:none!important}
.nav .brand-mark{display:block!important;width:64px!important;height:48px!important;flex:0 0 64px!important;object-fit:contain!important;object-position:center!important;border-radius:8px!important;filter:drop-shadow(0 7px 16px rgba(0,184,255,.25))!important}
.nav .brand-copy{min-width:0!important;line-height:1!important}
.nav .brand-copy strong{display:block!important;font-size:17px!important;line-height:1.05!important;letter-spacing:.12em!important;white-space:nowrap!important}
.nav .brand-copy span{display:block!important;margin-top:5px!important;color:#7ea4c8!important;font-size:9.5px!important;line-height:1.15!important;letter-spacing:.12em!important;text-transform:uppercase!important;white-space:nowrap!important}
.nav .top-links{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:8px!important;flex-wrap:nowrap!important}
.nav .top-links a,.nav .top-links .status,.nav .top-links .logout{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;min-height:40px!important;padding:10px 14px!important;border:1px solid rgba(42,174,239,.34)!important;border-radius:999px!important;background:rgba(5,25,48,.72)!important;color:#b9eaff!important;font-size:13px!important;font-weight:500!important;line-height:1!important;text-decoration:none!important;white-space:nowrap!important;-webkit-backdrop-filter:blur(12px)!important;backdrop-filter:blur(12px)!important;transition:.18s ease!important}
.nav .top-links a:hover,.nav .top-links a.active,.nav .top-links .status.active{color:#001525!important;background:linear-gradient(100deg,#087be7,#14d9ff)!important;border-color:transparent!important;font-weight:800!important;box-shadow:0 8px 24px rgba(20,181,255,.2)!important}
.nav .top-links .status::before{content:""!important;width:8px!important;height:8px!important;flex:0 0 8px!important;border-radius:50%!important;background:#22e6a7!important;box-shadow:0 0 13px #22e6a7!important}
.nav .top-links .status.active::before{background:#001525!important;box-shadow:none!important}
.nav .nav-toggle{display:none!important;width:44px!important;min-width:44px!important;height:44px!important;min-height:44px!important;padding:0!important;border:1px solid rgba(42,174,239,.38)!important;border-radius:13px!important;background:rgba(5,25,48,.86)!important;box-shadow:0 10px 28px rgba(0,0,0,.22)!important;align-items:center!important;justify-content:center!important;flex-direction:column!important;gap:5px!important;cursor:pointer!important;z-index:100001!important}
.nav .nav-toggle span{display:block!important;width:20px!important;height:2px!important;border-radius:999px!important;background:#b9eaff!important;transition:transform .22s ease,opacity .18s ease,width .22s ease!important}
.nav .nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)!important}.nav .nav-toggle.is-open span:nth-child(2){opacity:0!important;width:0!important}.nav .nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)!important}
@media(max-width:1024px){:root{--dc-nav-side:32px}.nav{gap:14px!important}.nav .brand-mark{width:58px!important;height:44px!important;flex-basis:58px!important}.nav .brand-copy strong{font-size:16px!important}.nav .top-links{gap:7px!important}.nav .top-links a,.nav .top-links .status,.nav .top-links .logout{padding:9px 12px!important;font-size:12px!important}}
@media(max-width:820px){:root{--dc-nav-h:64px;--dc-nav-side:24px}html{scroll-padding-top:80px!important}.nav{padding:9px 0!important;gap:12px!important}.nav .brand{max-width:calc(100% - 58px)!important}.nav .nav-toggle{display:inline-flex!important}.nav .top-links{display:none!important;position:fixed!important;top:72px!important;right:12px!important;width:min(310px,calc(100vw - 24px))!important;padding:10px!important;grid-template-columns:1fr!important;gap:7px!important;border:1px solid rgba(42,174,239,.34)!important;border-radius:16px!important;background:linear-gradient(180deg,rgba(9,29,54,.99),rgba(3,13,27,.99))!important;box-shadow:0 22px 55px rgba(0,0,0,.5)!important;-webkit-backdrop-filter:blur(18px)!important;backdrop-filter:blur(18px)!important;z-index:100000!important}.nav .top-links.is-open{display:grid!important}.nav .top-links a,.nav .top-links .status,.nav .top-links .logout{width:100%!important;min-height:46px!important;padding:10px 13px!important;border-radius:11px!important;justify-content:flex-start!important;text-align:left!important;font-size:13px!important;white-space:normal!important}.nav .top-links .status{order:3!important}.nav .top-links .logout{order:4!important}}
@media(max-width:600px){:root{--dc-nav-h:60px;--dc-nav-side:24px}html{scroll-padding-top:74px!important}.nav{padding:8px 0!important}.nav .brand{gap:9px!important}.nav .brand-mark{width:48px!important;height:36px!important;flex-basis:48px!important}.nav .brand-copy strong{font-size:14px!important;letter-spacing:.1em!important}.nav .brand-copy span{font-size:7.8px!important;letter-spacing:.08em!important}.nav .nav-toggle{width:42px!important;min-width:42px!important;height:42px!important;min-height:42px!important;border-radius:12px!important}.nav .top-links{top:67px!important;right:10px!important;width:min(292px,calc(100vw - 20px))!important;padding:9px!important;border-radius:14px!important}.nav .top-links a,.nav .top-links .status,.nav .top-links .logout{min-height:44px!important;font-size:12.5px!important}}
@media(max-width:390px){:root{--dc-nav-side:16px}.nav .brand-copy span{max-width:190px!important;overflow:hidden!important;text-overflow:ellipsis!important}.nav .nav-toggle{width:40px!important;min-width:40px!important;height:40px!important;min-height:40px!important}.nav .top-links{right:8px!important;width:calc(100vw - 16px)!important}}

/* 2026-07-31 — one exact layout system for index, warranty and service */
:root{
 --dc-layout-max:1180px;
 --dc-layout-gutter:40px;
 --dc-content-top:30px;
 --dc-content-bottom:58px;
}
.shell{
 width:min(var(--dc-layout-max),calc(100% - var(--dc-layout-gutter)))!important;
 max-width:var(--dc-layout-max)!important;
 margin-left:auto!important;
 margin-right:auto!important;
}
.nav{
 width:min(var(--dc-layout-max),calc(100% - var(--dc-layout-gutter)))!important;
}
/* All page content starts and ends on exactly the same vertical guides. */
body.warranty-page main,
body.service-page main,
body:not(.warranty-page):not(.service-page) .dashboard{
 width:100%!important;
 max-width:var(--dc-layout-max)!important;
 margin-left:auto!important;
 margin-right:auto!important;
 padding-top:var(--dc-content-top)!important;
 padding-bottom:var(--dc-content-bottom)!important;
}
body:not(.warranty-page):not(.service-page) .login-layout{
 width:100%!important;
 max-width:var(--dc-layout-max)!important;
 margin-left:auto!important;
 margin-right:auto!important;
}
body.warranty-page .hero,
body.warranty-page .panel,
body.warranty-page .message,
body.warranty-page .result,
body.warranty-page .privacy,
body.service-page .service-hero,
body.service-page .tracker-panel,
body.service-page .message,
body.service-page .service-result,
body.service-page .service-privacy,
body:not(.warranty-page):not(.service-page) .dash-head,
body:not(.warranty-page):not(.service-page) .grid{
 width:100%!important;
 max-width:100%!important;
 margin-left:auto!important;
 margin-right:auto!important;
}
@media(max-width:1024px){
 :root{--dc-layout-gutter:32px;--dc-content-top:30px;--dc-content-bottom:52px}
}
@media(max-width:820px){
 :root{--dc-layout-gutter:24px;--dc-content-top:24px;--dc-content-bottom:48px}
}
@media(max-width:600px){
 :root{--dc-layout-gutter:24px;--dc-content-top:20px;--dc-content-bottom:40px}
}
@media(max-width:390px){
 :root{--dc-layout-gutter:16px}
}