/* ============================================================
   Stripe Design Language · awesome-design-md
   Indigo #533afd · Navy ink #0d253d · Sohne thin 300
   Pill CTAs · Blue-tinted shadows · Tabular figures
   ============================================================ */

/* 1. STRIPE COLOR SYSTEM */
:root{
  --primary:#533afd;
  --primary-press:#2e2b8c;
  --primary-deep:#4434d4;
  --primary-soft:#665efd;
  --primary-subdued:#b9b9f9;
  --ink:#0d253d;
  --ink-secondary:#273951;
  --ink-mute:#64748d;
  --canvas:#ffffff;
  --canvas-soft:#f6f9fc;
  --canvas-cream:#f5e9d4;
  --hairline:#e3e8ee;
  --hairline-input:#a8c3de;
  --brand-dark:#1c1e54;
  --brand-red:#E00000;
  --shadow-blue:rgba(0,55,112,.08);
  --shadow-1:0 1px 3px rgba(0,55,112,.08);
  --shadow-2:0 8px 24px rgba(0,55,112,.08),0 2px 6px rgba(0,55,112,.04);
  --green:#16A34A;
  --yellow:#D97706;
  --red:#E00000;
}

/* 2. STRIPE TYPOGRAPHY: Inter 300 + negative tracking + ss01 */
html,body,*{
  font-family:"Inter","Sohne","SF Pro Display",system-ui,-apple-system,"Noto Sans SC","PingFang SC",sans-serif!important;
  font-weight:300!important;
  font-feature-settings:"ss01"!important;
}
/* Restore weight for elements that need it */
b,strong,.btn,.tag,.system-tab.active,.panel-title{font-weight:400!important}
.btn.primary,.brand-mark{font-weight:400!important}

/* Headings: weight 300 + negative tracking */
.brand-copy strong{font-weight:300!important;letter-spacing:-0.02em!important}
.main-title h1{font-weight:300!important;letter-spacing:-0.03em!important}
.page-identity h2{font-weight:300!important;letter-spacing:-0.02em!important}
.scene-header h2{font-weight:300!important;letter-spacing:-0.02em!important}
.panel-title{font-weight:300!important;letter-spacing:-0.01em!important}
.product-info h3{font-weight:300!important;letter-spacing:-0.01em!important}

/* Mono: Inter at 300 for data, tabular figures */
.mono,.metric-cell strong,.summary-item strong,.scene-stat strong,
.gauge-orbit strong,.metric-box strong,.page-number,.clock strong,
.system-tab b,.step-no,.domain-core strong,.info-grid strong,
.device-card em,.inspector-item span,.alert-row time,
.closure-step em,.task-row span{
  font-family:"Inter","Sohne","system-ui",sans-serif!important;
  font-weight:300!important;
  font-feature-settings:"ss01","tnum"!important;
  letter-spacing:-0.02em!important;
}

/* 3. SURFACES */
html,body{background:var(--canvas);color:var(--ink);-webkit-font-smoothing:antialiased}
#viewport{background:var(--canvas)!important}
#viewport::after,#viewport::before{display:none}
#stage{background:var(--canvas)!important;box-shadow:none!important;border:none!important}
#stage::after{display:none}

/* 4. TOPBAR: clean white, no glass */
#topbar{
  background:var(--canvas)!important;
  border-bottom:1px solid var(--hairline)!important;
}
#topbar::before,#topbar::after{display:none}
#systemNav{
  background:var(--canvas-soft)!important;
  border-bottom:1px solid var(--hairline)!important;
}
#statusbar{
  background:var(--canvas-soft)!important;
  border-top:1px solid var(--hairline)!important;
  color:var(--ink-mute)!important;
}

/* 5. PANELS: Stripe card style — 12px radius, hairline, subtle blue shadow */
.panel{
  background:var(--canvas)!important;
  border:1px solid var(--hairline)!important;
  border-radius:12px!important;
  box-shadow:var(--shadow-1)!important;
}
.panel::before,.panel::after{display:none}
.panel-title{
  background:var(--canvas-soft)!important;
  border-bottom:1px solid var(--hairline)!important;
  padding:0 20px!important;
}

/* 6. BUTTONS: Stripe pill — 9999px, 8px 16px, indigo fill */
.btn{
  font-weight:400!important;
  border-radius:9999px!important;
  padding:8px 16px!important;
  border:1px solid var(--hairline)!important;
  background:var(--canvas)!important;
  color:var(--ink)!important;
  transition:all .2s ease!important;
  box-shadow:var(--shadow-1)!important;
  cursor:pointer;
}
.btn:hover{border-color:var(--primary)!important}
.btn:active{transform:scale(.98)}
.btn.primary{
  background:var(--primary)!important;
  border-color:var(--primary)!important;
  color:#fff!important;
  box-shadow:0 2px 8px rgba(83,58,253,.25)!important;
}
.btn.primary:hover{background:var(--primary-deep)!important}
.btn.primary:active{background:var(--primary-press)!important}
.btn.danger{
  background:var(--canvas)!important;
  border-color:rgba(224,0,0,.2)!important;
  color:var(--red)!important;
}

/* 7. TAGS: subdued pill */
.tag{
  font-weight:400!important;
  border-radius:9999px!important;
  padding:4px 10px!important;
}
.tag.ok{color:var(--green)!important;background:rgba(22,163,74,.06)!important;border:1px solid rgba(22,163,74,.15)!important}
.tag.warn{color:var(--yellow)!important;background:rgba(217,119,6,.06)!important;border:1px solid rgba(217,119,6,.15)!important}
.tag.alarm{color:var(--red)!important;background:rgba(224,0,0,.06)!important;border:1px solid rgba(224,0,0,.15)!important}
.tag.offline{color:var(--ink-mute)!important}
.online-dot{background:var(--green)!important;box-shadow:0 0 4px rgba(22,163,74,.2)!important}

/* 8. CARDS: 12px radius, hairline, blue shadow */
.device-card,.system-card{
  background:var(--canvas)!important;
  border:1px solid var(--hairline)!important;
  border-radius:12px!important;
  box-shadow:var(--shadow-1)!important;
  transition:all .2s ease!important;
}
.device-card:hover,.system-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-2)!important;
}
.alert-row{
  background:var(--canvas)!important;
  border:1px solid var(--hairline)!important;
  border-radius:8px!important;
  box-shadow:var(--shadow-1)!important;
}
.metric-cell{
  border-right:1px solid var(--hairline)!important;
  transition:background .15s ease!important;
}
.metric-cell:hover{background:var(--canvas-soft)!important}
.summary-item{
  border-right:1px solid var(--hairline)!important;
  transition:background .15s ease!important;
}
.summary-item:last-child{border-right:none!important}
.summary-item:hover{background:var(--canvas-soft)!important}

/* 9. NAV TABS */
.system-tab{
  font-weight:300!important;
  color:var(--ink-mute)!important;
  transition:all .2s ease!important;
}
.system-tab:hover{color:var(--ink)!important}
.system-tab.active{color:var(--ink)!important;font-weight:400!important}
.system-tab.active::after{background:var(--primary)!important;height:2px!important}

/* 10. LINKS */
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--primary)}
.breadcrumb a{color:var(--ink-mute)!important}

/* 11. INPUTS: Stripe input — 6px radius, hairline-input border */
input,select,textarea{
  background:var(--canvas)!important;
  border:1px solid var(--hairline-input)!important;
  border-radius:6px!important;
  color:var(--ink)!important;
  padding:8px 12px!important;
  transition:border-color .2s ease!important;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--primary)!important;
  outline:none;
  box-shadow:0 0 0 4px rgba(83,58,253,.08)!important;
}

/* 12. MODAL */
.modal-backdrop{background:rgba(13,37,61,.3)!important;backdrop-filter:blur(12px)}
.modal{
  background:var(--canvas)!important;
  border:1px solid var(--hairline)!important;
  border-radius:12px!important;
  box-shadow:var(--shadow-2)!important;
}
.modal-head,.modal-foot{border-color:var(--hairline)!important}

/* 13. SCENE IMAGES */
.scene-shade{background:linear-gradient(180deg,rgba(13,37,61,.06),transparent 45%,rgba(13,37,61,.12))!important}
.scene-photo{filter:none!important}
.scene-stat{
  background:var(--canvas)!important;
  border:1px solid var(--hairline)!important;
  border-radius:12px!important;
  box-shadow:var(--shadow-1)!important;
}
.scene-stat strong{color:var(--ink)!important}
.scene-stat span{color:var(--ink-mute)!important}
.scene-header h2{color:#fff!important;text-shadow:0 2px 8px rgba(0,0,0,.3)!important;font-weight:300!important}
.scene-header small{color:rgba(255,255,255,.85)!important;text-shadow:0 1px 4px rgba(0,0,0,.25)!important}

/* 14. BRAND MARK: fuxin red for brand recognition */
.brand-mark{
  background:var(--brand-red)!important;
  box-shadow:none!important;
}

/* 15. MISC SURFACES */
.inventory-canvas,.visual-stage{background:var(--canvas-soft)!important;border-radius:12px!important}
.workorder-box{background:var(--canvas-soft)!important;border-radius:12px!important;border:1px solid var(--hairline)!important}
.gauge-orbit::before{background:var(--canvas)!important}
.gauge-orbit{box-shadow:var(--shadow-1)!important}
.progress i{background:var(--primary)!important}
.progress{background:var(--hairline)!important;border-radius:4px!important}
.task-row,.inspector-item{border-bottom:1px solid var(--hairline)!important}
.clickable{transition:all .2s ease!important}
.clickable:hover{background:var(--canvas-soft)!important}

/* 16. SCROLLING */
#viewport{overflow-y:auto!important;overflow-x:hidden!important}
#stage{top:0!important;transform:translate(-50%,0) scale(var(--scale))!important}

/* 17. MISC */
.demo-badge{display:none!important}
.weather{color:var(--ink)!important}

/* 18. STRIPE BLUE-TINTED SCROLLBAR */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(0,55,112,.12);border-radius:9999px}
::-webkit-scrollbar-thumb:hover{background:rgba(0,55,112,.2)}

/* 19. NO ANIMATIONS: Stripe is static, professional */
.system-card,.device-card,.panel,.metric-cell{animation:none!important}
.scene-photo{animation:none!important}

/* 20. REDUCED MOTION */
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* 21. TOPBAR BREADCRUMB */
.top-breadcrumb{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:300!important;
  font-size:15px;
  color:var(--ink-mute);
  min-width:0;
  overflow:hidden;
}
.top-breadcrumb a{
  color:var(--ink-mute)!important;
  text-decoration:none;
  white-space:nowrap;
  transition:color .15s ease;
}
.top-breadcrumb a:hover{color:var(--primary)!important}
.bc-sep{color:var(--hairline-input);margin:0 4px;font-weight:300}
.bc-current{color:var(--ink)!important;font-weight:400!important;white-space:nowrap}

/* 22. MAIN SITE NAV LINKS */
.top-nav-links{
  display:flex;
  align-items:center;
  gap:4px;
}
.top-nav-links a{
  color:var(--ink-mute)!important;
  text-decoration:none;
  font-weight:300!important;
  font-size:14px;
  padding:6px 12px;
  border-radius:6px;
  transition:all .15s ease;
  white-space:nowrap;
}
.top-nav-links a:hover{
  color:var(--ink)!important;
  background:var(--canvas-soft);
}

/* Adjust topbar grid for 4 columns */
#topbar{
  grid-template-columns:auto auto 1fr auto!important;
  gap:12px!important;
  padding:0 20px!important;
}

/* ============================================================
   TOPBAR: Match main site header style
   72px · white glass · red F mark · nav underline animation
   ============================================================ */

/* Reset topbar to main site style */
#topbar{
  height:72px!important;
  background:rgba(255,255,255,.82)!important;
  backdrop-filter:blur(16px) saturate(1.8)!important;
  -webkit-backdrop-filter:blur(16px) saturate(1.8)!important;
  border-bottom:1px solid rgba(0,0,0,.05)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  padding:0 48px!important;
  grid-template-columns:unset!important;
  gap:unset!important;
}

/* F brand mark: match main site red square */
.brand-mark{
  width:32px!important;
  height:32px!important;
  background:var(--brand-red)!important;
  border-radius:4px!important;
  clip-path:none!important;
  font-size:16px!important;
  font-weight:700!important;
  box-shadow:none!important;
}
.brand{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
}
.brand-copy strong{
  font-size:18px!important;
  font-weight:700!important;
  color:var(--ink)!important;
  letter-spacing:0!important;
}
.brand-copy small{display:none!important}

/* Nav links: match main site */
.top-nav-links{
  display:flex!important;
  gap:36px!important;
  align-items:center!important;
}
.top-nav-links a{
  color:var(--ink-secondary)!important;
  font-size:14px!important;
  font-weight:500!important;
  padding:0!important;
  border-radius:0!important;
  background:none!important;
  position:relative;
  transition:color .2s ease;
}
.top-nav-links a::after{
  content:'';
  position:absolute;
  bottom:-4px;
  left:0;
  width:0;
  height:2px;
  background:var(--brand-red);
  transition:width .3s ease;
}
.top-nav-links a:hover{
  color:var(--brand-red)!important;
  background:none!important;
}
.top-nav-links a:hover::after{width:100%}

/* Breadcrumb: subtle */
.top-breadcrumb{
  font-size:13px;
  color:var(--ink-mute);
  margin-left:auto;
  margin-right:24px;
}

/* Weather + Clock */
.top-tools{
  display:flex!important;
  align-items:center!important;
  gap:20px!important;
}
.weather{font-size:13px!important;color:var(--ink-mute)!important}
.clock strong{font-size:14px!important;color:var(--ink)!important}
.clock small{font-size:11px!important}

/* Hide topbar accent lines */
#topbar::before,#topbar::after{display:none!important}

/* Adjust nav and view for new header height */
#systemNav{top:72px!important}
#view{top:122px!important}