/* SECRET BOX — unified product design system v2.0
   One visual language for storefront, configurator, engineering, docs, tools and 3D.
   Tokens: near-black luxe palette, Unbounded display / Manrope body / Roboto Mono labels.
*/
:root{
  --sb-bg:#111215; --sb-bg-deep:#0b0c0e; --sb-panel:#191a1d; --sb-panel-2:#232327;
  --sb-paper:#eee8dd; --sb-paper-2:#aaa69e; --sb-brass:#c5a46c; --sb-brass-2:#e0cc8c;
  --sb-green:#9fb58b; --sb-red:#d96d61;
  --sb-line:#303136; --sb-line-strong:#3a3a40; --sb-radius:4px;
  --sb-display:"Unbounded","Arial Narrow",Impact,sans-serif;
  --sb-body:"Manrope",system-ui,-apple-system,sans-serif;
  --sb-mono:"Roboto Mono",ui-monospace,SFMono-Regular,monospace;
}
/* stable scrollbar gutter: header/centering must not shift between pages */
html{scrollbar-gutter:stable}
.sb-platform-page{
  background:var(--sb-bg);
  color:var(--sb-paper);
  font-family:var(--sb-body);
  min-height:100vh;
}
a{color:inherit}
.sb-platform-page ::selection{background:var(--sb-brass);color:#111215}
.sb-platform-page .wrap{width:min(1240px,calc(100% - 36px));margin-inline:auto}
.sb-platform-page h1,.sb-platform-page h2,.sb-platform-page h3,
.sb-platform-page h4,.sb-platform-page h5{font-family:var(--sb-display);letter-spacing:.015em;overflow-wrap:break-word}
.sb-platform-page .panel,.sb-platform-page .card,.sb-platform-page .doc,
.sb-platform-page .tile,.sb-platform-page .metric,.sb-platform-page .sys{
  background:var(--sb-panel);
  border-color:var(--sb-line);
  border-radius:var(--sb-radius);
}
.sb-platform-page input,.sb-platform-page select,.sb-platform-page textarea{
  color:var(--sb-paper);background:var(--sb-bg-deep);border:1px solid var(--sb-line-strong);
  border-radius:3px;font:500 12px/1.3 var(--sb-mono);outline:none;
}
.sb-platform-page input:focus,.sb-platform-page select:focus,.sb-platform-page textarea:focus{
  border-color:var(--sb-brass);box-shadow:0 0 0 2px rgba(197,164,108,.12);
}
.sb-platform-page button,.sb-platform-page .btn{
  font-family:var(--sb-mono);border-radius:3px;cursor:pointer;
}
.sb-platform-page .btn.primary,.sb-platform-page .btn-solid{
  background:var(--sb-paper);color:#111215;border-color:var(--sb-paper);
}
.sb-platform-page .btn.primary:hover,.sb-platform-page .btn-solid:hover{
  background:var(--sb-brass-2);border-color:var(--sb-brass-2);
}
.sb-platform-page .ey,.sb-platform-page .tag,.sb-platform-page .section-stamp,
.sb-platform-page .m-dims,.sb-platform-page .cfg-top .t{color:var(--sb-brass)}
.sb-platform-page .lead,.sb-platform-page .muted,.sb-platform-page p{color:var(--sb-paper-2)}
.sb-platform-page .status-ok{color:var(--sb-green)!important}
.sb-platform-page .status-error{color:var(--sb-red)!important}
.sb-platform-page .tablewrap{border-color:var(--sb-line)}
.sb-platform-page table th{color:var(--sb-brass)}
.sb-platform-page table td{border-color:var(--sb-line)}
.sb-platform-page .sb-section-rule{
  height:1px;background:linear-gradient(90deg,var(--sb-brass),transparent);opacity:.65;margin:22px 0;
}
.sb-platform-page .sb-kicker{
  display:inline-flex;align-items:center;gap:9px;color:var(--sb-brass);
  font:500 10px/1 var(--sb-mono);letter-spacing:.22em;text-transform:uppercase;
}
.sb-platform-page .sb-kicker:before{content:"";width:28px;height:1px;background:currentColor}
@media(max-width:760px){
  .sb-platform-page .wrap{width:min(100% - 20px,1240px)}
  .sb-platform-page h1{font-size:clamp(31px,8.6vw,68px)!important}
  .sb-platform-page button,.sb-platform-page .btn{min-height:42px}
}
/* 3D keeps its specialist canvas UI but shares the same brand palette */
.sb-3d-page{background:var(--sb-bg-deep)!important;color:var(--sb-paper)}
.sb-3d-page #ui,.sb-3d-page .top,.sb-3d-page .panel,
.sb-3d-page .hud,.sb-3d-page .info,.sb-3d-page .toolbar{
  font-family:var(--sb-mono)!important;
}
.sb-3d-page .top .pill,.sb-3d-page button,.sb-3d-page .pill{
  border-color:var(--sb-line-strong)!important;
}
.sb-3d-page button.on,.sb-3d-page [data-mode].on,.sb-3d-page [data-cam].on{
  border-color:var(--sb-brass)!important;color:#111215!important;
  background:var(--sb-brass)!important;
}
.sb-3d-page #secretbox-3d-config b{color:var(--sb-brass-2)!important}