html:not([data-service-embedded="true"]){scrollbar-gutter:stable}
.service-nav{display:flex;gap:8px;align-items:center;width:min(1220px,calc(100% - 48px));margin:20px auto 0;padding:6px;border:1px solid #dbe4e9;border-radius:17px;background:linear-gradient(105deg,#eaf5f0 0%,#f1f5f7 48%,#eef0fb 100%);box-sizing:border-box;font:650 15px/1.5 "Microsoft YaHei",system-ui,sans-serif}
.service-nav a{--nav-tone:#087c6b;--nav-soft:#dcf2e9;--nav-line:#b9decf;flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:11px;min-height:58px;padding:8px 16px;border:1px solid transparent;border-radius:12px;color:var(--nav-tone);text-decoration:none;box-sizing:border-box}
.service-nav a[href="/instant.html"]{--nav-tone:#5145cd;--nav-soft:#e6e5fb;--nav-line:#cbc7ee}
.service-nav a[aria-current="page"]{background:#fff;border-color:var(--nav-line);box-shadow:0 3px 10px #233b5210}
.service-nav a:hover{color:var(--nav-tone);background:#ffffff70}.service-nav a:focus-visible{outline:2px solid var(--nav-tone);outline-offset:2px}
.service-nav-icon{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:11px;background:var(--nav-soft);color:var(--nav-tone);transition:color .16s ease,background-color .16s ease}
.service-nav-icon svg{display:block;width:23px;height:23px}
.service-nav a[aria-current="page"] .service-nav-icon{background:var(--nav-tone);color:white;box-shadow:inset 0 1px 0 #ffffff24}
.service-nav-label{white-space:nowrap;letter-spacing:.01em}
@media(max-width:650px){.service-nav{width:calc(100% - 24px);margin-top:14px;border-radius:15px}.service-nav a{min-height:51px;padding:7px 9px;gap:8px;font-size:13px}.service-nav-icon{width:31px;height:31px;border-radius:9px}.service-nav-icon svg{width:21px;height:21px}}

/* The shared header, notices and navigation keep their geometry in both modes. */
.service-nav.is-managed{position:relative;isolation:isolate}
.service-nav.is-managed a{position:relative;z-index:1;background:transparent;border-color:transparent;box-shadow:none;transition:color .16s ease}
.service-nav-indicator{position:absolute;top:6px;bottom:6px;left:6px;width:calc((100% - 28px)/3);border:1px solid #b9decf;border-radius:12px;background:#fff;box-shadow:0 3px 10px #233b5210;transform:translateX(0);transition:transform .18s ease-out,border-color .18s ease-out;pointer-events:none}
html[data-service-view="instant"] .service-nav-indicator{transform:translateX(calc(100% + 8px));border-color:#cbc7ee}
#day24ServicePane,#instantServicePane{display:flow-root;min-width:0}
#instantServicePane{background:#f5f7fc;min-height:650px}
#instantServiceFrame{display:block;width:100%;border:0;min-height:300px;background:#f5f7fc}
#instantShellStatus{display:none}
html[data-service-view="instant"] #connectionStatus{display:none}
html[data-service-view="instant"] #instantShellStatus{display:flex}
html[data-service-view="instant"] #day24ServicePane{display:none}
html[data-service-view="day24"] #instantServicePane{display:none}
#serviceLoading{width:min(1220px,calc(100% - 48px));margin:24px auto;color:#69758f;font:13px/1.6 system-ui,"Microsoft YaHei",sans-serif}
.service-loading-heading{padding:14px 0}
.service-skeleton-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:20px}
.service-skeleton-layout>div{height:390px;border:1px solid #dfe5f1;border-radius:17px;background:linear-gradient(#fff,#fafbff)}
.service-load-failure{padding:16px 0}.service-load-failure button,.service-load-failure a{font:inherit;border:1px solid #d6def1;border-radius:8px;background:white;color:#4f46e5;padding:8px 12px;text-decoration:none}
html[data-service-embedded="true"],html[data-service-embedded="true"] body{min-height:0;height:auto}
html[data-service-embedded="true"]{overflow-y:clip}
html[data-service-embedded="true"] body{min-width:0;display:flow-root}
html[data-service-embedded="true"] .instant-header,html[data-service-embedded="true"] .service-nav{display:none}
html[data-service-embedded="true"] .instant-shell{margin-top:24px}
html[data-service-embedded="true"] .instant-account{position:static}
@media(max-width:850px){.service-skeleton-layout{grid-template-columns:1fr}.service-skeleton-layout>div:first-child{height:200px}.service-skeleton-layout>div:last-child{height:350px}}
@media(max-width:550px){#serviceLoading{width:calc(100% - 24px);margin-top:14px}html[data-service-embedded="true"] .instant-shell{margin-top:14px}}
@media(prefers-reduced-motion:reduce){.service-nav-indicator,.service-nav.is-managed a,.service-nav-icon{transition:none}}

/* The shop workspace only runs when selected. */
.service-nav a[href="/?service=patrol"]{--nav-tone:#2b6da7;--nav-soft:#e5f1fb;--nav-line:#b5d4ee}
html[data-service-view="patrol"] .service-nav-indicator{transform:translateX(calc(200% + 16px));border-color:#b5d4ee;background:linear-gradient(125deg,#ffffff,#edf6ff)}
#patrolServicePane{display:flow-root;min-width:0;background:#f4f8fc;min-height:650px}
#patrolServiceFrame{display:block;width:100%;border:0;min-height:400px;background:#f4f8fc}
html[data-service-view="patrol"] #day24ServicePane,html[data-service-view="patrol"] #instantServicePane{display:none}
#patrolServicePane[hidden]{display:none}
@media(max-width:550px){.service-nav a{gap:4px;padding:6px 3px;font-size:12px}.service-nav-icon{width:27px;height:27px}.service-nav-icon svg{width:19px;height:19px}}

/* Equal-width tabs stay aligned while only their surfaces move on interaction. */
.service-nav{background:linear-gradient(110deg,#eaf5f0 0%,#f0effa 53%,#eaf3fc 100%)}
.service-nav a,.service-nav.is-managed a{transition:transform .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease}
.service-nav a[href="/?service=patrol"] .service-nav-icon{background:linear-gradient(145deg,#f1f9ff,#dcecf9);box-shadow:inset 0 1px 0 #fffc}
.service-nav a[href="/?service=patrol"] .service-nav-label{color:#000}
.service-nav a[href="/?service=patrol"][aria-current="page"] .service-nav-icon{background:linear-gradient(145deg,#76a9d5,#467caf);color:#fff;box-shadow:inset 0 1px 0 #ffffff52,0 3px 8px #437bb11a}
@media(hover:hover){
  .service-nav a:hover,.service-nav.is-managed a:hover{transform:translateY(-2px);background:linear-gradient(125deg,#ffffffc9,var(--nav-soft));box-shadow:0 4px 11px #173c4010}
}
.service-nav a:active,.service-nav.is-managed a:active{transform:translateY(0) scale(.985);box-shadow:none}
.service-nav a:focus-visible{outline:2px solid var(--nav-tone);outline-offset:2px}
@media(max-width:550px){
  .service-nav{gap:6px;padding:5px;width:calc(100% - 24px)}
  .service-nav a,.service-nav.is-managed a{flex:1 1 0;min-height:78px;flex-direction:column;gap:4px;padding:18px 2px 6px;font-size:12px;line-height:1.35}
  .service-nav-label{letter-spacing:0;white-space:nowrap}
  .service-nav-icon{width:26px;height:26px;border-radius:8px}
  .service-nav-indicator{top:5px;bottom:5px;left:5px;width:calc((100% - 24px)/3)}
  html[data-service-view="instant"] .service-nav-indicator{transform:translateX(calc(100% + 6px))}
  html[data-service-view="patrol"] .service-nav-indicator{transform:translateX(calc(200% + 12px))}
}
@media(max-width:350px){.service-nav a,.service-nav.is-managed a{font-size:11px}}
@media(prefers-reduced-motion:reduce){.service-nav a,.service-nav.is-managed a{transition:none;transform:none!important}}
