/* PBM Cloud -- the platform brand (PLATFORM-STATUS.md 1, the same tokens as
   the website and the Admin Dashboard): Paper ground, Deep Slate / Slate
   Panel chrome, Model Blue accent, Clay and Muted Amber for attention;
   Montserrat with JetBrains Mono figures. The viewers keep their engines'
   own looks. Light by default; dark follows the OS unless the person picks,
   and their pick wins both ways. */
:root{
  color-scheme:light;
  --bg:#F6F4F1; --card:#FFFFFF; --card-soft:#EFEDE9; --card-3:#FAF9F7;
  --line:#DEDAD3; --line-soft:#ECE9E4;
  --text:#1F2430; --text-strong:#121826; --text-muted:#5A6272; --text-faint:#868D99;
  --ember:#4A66C4; --ember-hover:#34509F; --ember-line:#C9D4F6; --ember-soft:rgba(124,156,255,.14); --hover-tint:#EEF1FB;
  --good:#2F6E5E; --good-bg:#DCEAE4; --warn:#8A6412; --warn-bg:#F5E9CC; --bad:#B3261E; --bad-bg:#F6D9D6;
  --clay:#A45F37; --clay-bg:#F4E3D8;
  --update:#4A66C4; --update-bg:#E8EDFB;
  --header-bg:rgba(246,244,241,.92);
  --sidebar-bg:linear-gradient(180deg,#1C2333 0%,#151B28 50%,#121826 100%);
  --sidebar-text-strong:#F6F4F1; --sidebar-text-muted:#A3AABB; --sidebar-text-faint:#737B8E;
  --sidebar-input-bg:#252D40; --sidebar-active-bg:linear-gradient(90deg,#2A3350,#1C2333 78%,rgba(28,35,51,0));
  --sidebar-hover:rgba(255,255,255,.07); --sidebar-accent:#7C9CFF; --sidebar-line:#283048;
  --hero-bg:linear-gradient(135deg,#1C2333 0%,#121826 60%,#0C111B 100%);
  --btn-grad:linear-gradient(140deg,#7C9CFF,#5575E0); --btn-glow:rgba(85,117,224,.55); --btn-ink:#FFFFFF;
  /* the products' own colours (their icons), for the buttons that open each viewer */
  --prod-bim:#7C9CFF; --prod-bim-ink:#121826; --prod-plan:#C47A4E; --prod-plan-ink:#FFFFFF; --prod-4d:#121826; --prod-4d-ink:#F6F4F1;  /* Paper on dark grounds, Deep Slate on Paper */
  --shadow:0 14px 34px -30px rgba(18,24,38,.55);
  --shadow-lift:0 30px 56px -32px rgba(18,24,38,.5);
  --sans:'Montserrat',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0E131D; --card:#161C29; --card-soft:#1C2333; --card-3:#131926; --line:#2A3246; --line-soft:#212839;
    --text:#E3E6EC; --text-strong:#F6F4F1; --text-muted:#A0A7B6; --text-faint:#7A8294;
    --ember:#7C9CFF; --ember-hover:#A3B9FF; --ember-line:#34416B; --ember-soft:rgba(124,156,255,.14); --hover-tint:#1E2638;
    --good:#4FBF95; --good-bg:#1A2C2F; --warn:#D9AE55; --warn-bg:#342C1A; --bad:#F0A69F; --bad-bg:#3A1C21;
    --clay:#D99873; --clay-bg:#3A2A22;
    --update:#8FAAFF; --update-bg:#232B3E;
    --prod-4d:#F6F4F1; --prod-4d-ink:#121826;
    --header-bg:rgba(14,19,29,.86);
    --sidebar-bg:linear-gradient(180deg,#161C29 0%,#121826 100%);
    --sidebar-input-bg:#1C2333; --sidebar-active-bg:linear-gradient(90deg,#252E47,transparent);
    --sidebar-hover:#1E2638; --sidebar-line:#2A3246; --sidebar-accent:#7C9CFF;
    --hero-bg:linear-gradient(135deg,#1C2333 0%,#161C29 55%,#0E131D 100%);
    --shadow:0 16px 38px -30px rgba(0,0,0,.9); --shadow-lift:0 34px 60px -32px rgba(0,0,0,.85);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0E131D; --card:#161C29; --card-soft:#1C2333; --card-3:#131926; --line:#2A3246; --line-soft:#212839;
  --text:#E3E6EC; --text-strong:#F6F4F1; --text-muted:#A0A7B6; --text-faint:#7A8294;
  --ember:#7C9CFF; --ember-hover:#A3B9FF; --ember-line:#34416B; --ember-soft:rgba(124,156,255,.14); --hover-tint:#1E2638;
  --good:#4FBF95; --good-bg:#1A2C2F; --warn:#D9AE55; --warn-bg:#342C1A; --bad:#F0A69F; --bad-bg:#3A1C21;
  --clay:#D99873; --clay-bg:#3A2A22;
  --update:#8FAAFF; --update-bg:#232B3E;
  --prod-4d:#F6F4F1; --prod-4d-ink:#121826;
  --header-bg:rgba(14,19,29,.86);
  --sidebar-bg:linear-gradient(180deg,#161C29 0%,#121826 100%);
  --sidebar-input-bg:#1C2333; --sidebar-active-bg:linear-gradient(90deg,#252E47,transparent);
  --sidebar-hover:#1E2638; --sidebar-line:#2A3246; --sidebar-accent:#7C9CFF;
  --hero-bg:linear-gradient(135deg,#1C2333 0%,#161C29 55%,#0E131D 100%);
  --shadow:0 16px 38px -30px rgba(0,0,0,.9); --shadow-lift:0 34px 60px -32px rgba(0,0,0,.85);
}

*{box-sizing:border-box}
html,body{margin:0; height:100%}
body{background:var(--bg); color:var(--text); font-family:var(--sans); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0; color:var(--text-strong); line-height:1.25; text-wrap:balance}
p{margin:0}
a{color:var(--ember); text-decoration:none}
a:hover{color:var(--ember-hover)}
button,input,select{font:inherit; color:inherit}
[hidden]{display:none!important}
::selection{background:var(--ember-line)}
.mono{font-family:var(--mono)}
.muted{color:var(--text-muted)}
.faint{color:var(--text-faint)}
svg{fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:600; font-size:13.5px; line-height:1; padding:10px 16px; border-radius:8px; border:1px solid var(--line); background:var(--card); color:var(--text-strong); cursor:pointer; white-space:nowrap; text-decoration:none; transition:transform .18s cubic-bezier(.2,.7,.2,1), border-color .18s, box-shadow .18s}
.btn:hover{border-color:var(--ember); color:var(--ember); transform:translateY(-1px)}
.btn svg{width:16px; height:16px}
.btn.primary{background:var(--btn-grad); border-color:transparent; color:var(--btn-ink); box-shadow:0 12px 26px -14px var(--btn-glow)}
.btn.primary:hover{color:var(--btn-ink); box-shadow:0 16px 32px -14px var(--btn-glow)}
/* a viewer's button wears its product's colour */
.btn.prod-bim,.btn.prod-plan,.btn.prod-4d{border-color:transparent; box-shadow:0 10px 22px -14px rgba(18,24,38,.6)}
.btn.prod-bim,.btn.prod-bim:hover{background:var(--prod-bim); color:var(--prod-bim-ink)}
.btn.prod-plan,.btn.prod-plan:hover{background:var(--prod-plan); color:var(--prod-plan-ink)}
.btn.prod-4d,.btn.prod-4d:hover{background:var(--prod-4d); color:var(--prod-4d-ink); border-color:var(--line)}
.btn.prod-bim:hover,.btn.prod-plan:hover,.btn.prod-4d:hover{filter:brightness(1.06)}
.btn.navy{background:var(--text-strong); border-color:transparent; color:var(--bg)}
.btn.navy:hover{color:var(--bg); opacity:.9}
.btn.danger:hover{border-color:var(--bad); color:var(--bad)}
.btn.sm{padding:7px 11px; font-size:12.5px}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45; cursor:not-allowed; transform:none; border-color:var(--line); color:var(--text-muted)}

/* fields */
.field{display:grid; gap:6px}
.field label,.field .lbl{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint)}
.field input,.field select{width:100%; background:var(--card); border:1px solid var(--line); border-radius:8px; padding:10px 12px; font-size:14px; color:var(--text-strong)}
.field input:focus,.field select:focus{outline:2px solid var(--ember-line); outline-offset:1px; border-color:var(--ember)}
.field .hint{font-size:12px; color:var(--text-faint)}

/* badges */
.badge{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase; padding:3px 8px; border-radius:10px; white-space:nowrap; background:var(--card-soft); color:var(--text-muted)}
.b-good{background:var(--good-bg); color:var(--good)} .b-warn{background:var(--warn-bg); color:var(--warn)} .b-bad{background:var(--bad-bg); color:var(--bad)} .b-upd{background:var(--update-bg); color:var(--update)} .b-ember{background:var(--ember-soft); color:var(--ember)}

.card{background:var(--card); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow)}
.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:var(--text-strong); color:var(--bg); padding:10px 16px; border-radius:9px; font-size:13.5px; box-shadow:var(--shadow-lift); z-index:60}
.spinner{width:30px; height:30px; border-radius:50%; border:3px solid var(--line-soft); border-top-color:var(--ember); animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}