/* Sentinel MOS sign-in: white card on dark glass over a pure-CSS skeleton of the desk. No company data before sign-in.
   No backdrop-filter: the frost is pre-blurred shapes. Only transform and opacity animate. */
/* Kernel pages share this look without mos.css, so the little they need is here. */
.sg *{box-sizing:border-box}
:where(.sg) button{font:inherit;background:none;border:0;cursor:pointer}
:where(.sg) a{color:inherit}
.sg .wm{font:700 18px/1 var(--sans);letter-spacing:-.02em;display:inline-flex;align-items:baseline}
.sg .wm i{font:500 9px/1 var(--mono);font-style:normal;letter-spacing:.18em;margin-left:3px}
html.sg{background:var(--ins);scrollbar-color:rgba(255,255,255,.28) var(--ins)}
.sg body{background:var(--ins);color:var(--ink)}
.sg-page{display:grid;grid-template-rows:minmax(0,1fr) auto;min-height:100vh;min-height:100dvh;padding:52px 16px calc(14px + env(safe-area-inset-bottom));position:relative;overflow-x:clip}
.sg-night{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:radial-gradient(circle at 80% 70%,rgba(200,255,61,.035) 0%,transparent 56%),linear-gradient(135deg,#060608 0%,#0E0E12 55%,#15151B 100%)}
.sg-desk{position:absolute;inset:0;filter:blur(5px);transform:translateZ(0)}
.sg-desk i,.sg-desk b{display:block}
.dk-app{display:grid;grid-template-columns:84px minmax(0,1fr);height:100%}
.dk-rail{background:rgba(255,255,255,.03);box-shadow:1px 0 0 rgba(255,255,255,.05);padding:20px 22px;display:flex;flex-direction:column;gap:22px}
.dk-rail i{width:40px;height:36px;border-radius:10px;background:rgba(255,255,255,.07)}
.dk-rail i:first-child{height:30px;width:30px;border-radius:50%;background:rgba(200,255,61,.32);margin:0 5px 8px}
.dk-rail i.on{background:rgba(255,255,255,.17)}
.dk-top{height:60px;display:flex;align-items:center;gap:20px;padding:0 40px;box-shadow:0 1px 0 rgba(255,255,255,.06)}
.dk-top i{height:11px;border-radius:5px;background:rgba(255,255,255,.14)}
.dk-top .a{width:230px}.dk-top .b{width:300px;height:32px;border-radius:16px;margin-left:auto;background:rgba(255,255,255,.05)}.dk-top .c{width:110px}.dk-top .d{width:34px;height:34px;border-radius:50%}
.dk-main{padding:30px 40px 0}
.dk-e{width:290px;height:9px;border-radius:5px;background:rgba(255,255,255,.13)}
.dk-h{width:330px;height:34px;margin-top:16px;border-radius:9px;background:rgba(255,255,255,.1)}
.dk-grid{display:grid;grid-template-columns:320px minmax(0,1fr) 280px;gap:20px;margin-top:30px;height:520px}
.dk-hero{border-radius:16px;padding:24px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);display:flex;flex-direction:column}
.dk-hero .n{width:130px;height:110px;margin-top:34px;border-radius:16px;background:rgba(200,255,61,.2)}
.dk-hero .l{height:14px;border-radius:7px;background:rgba(255,255,255,.14);margin-top:14px;width:80%}
.dk-hero .go{height:48px;border-radius:24px;margin-top:auto;background:rgba(255,255,255,.26)}
.dk-board{border-radius:12px;padding:26px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.dk-row{display:flex;align-items:center;gap:16px;margin-top:26px}
.dk-row .ic{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);flex:none}
.dk-row .tx{flex:1}
.dk-row .tx i{height:10px;border-radius:5px;background:rgba(255,255,255,.14);width:64%}
.dk-row .tx i+i{height:8px;background:rgba(255,255,255,.07);margin-top:8px;width:42%}
.dk-side{display:grid;grid-template-rows:1fr 1fr;gap:20px}
.dk-ghost{border-radius:12px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);padding:22px}
.dk-ghost i{height:9px;border-radius:5px;background:rgba(255,255,255,.06);margin-top:16px;width:70%}
.sg-glass{position:absolute;inset:0;background:radial-gradient(46% 52% at 50% 46%,rgba(4,5,8,.5) 0%,rgba(4,5,8,0) 72%),linear-gradient(118deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,0) 34%)}

.sg-card{position:relative;z-index:3;grid-row:1;align-self:center;justify-self:center;width:100%;max-width:416px;margin:22px 0 26px;background:#fff;color:#15171C;border-radius:16px;padding:28px 34px 32px;box-shadow:0 0 0 1px rgba(255,255,255,.06),0 18px 36px -16px rgba(0,0,0,.5),0 48px 96px -40px rgba(0,0,0,.7)}
.sg-logo{display:flex;align-items:center;gap:10px;padding-bottom:20px;border-bottom:1px solid #E3E3DC;color:#4A6600}
.sg-logo .wm{color:#15171C}
.sg-logo .wm i{color:#4A6600;opacity:1}
.sg-title{margin:22px 0 0;font:700 28px/34px var(--sans);letter-spacing:-.025em}
.sg-sub{margin-top:6px;font-size:14px;line-height:20px;color:#4A4E57}
.sg-who{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0 0;font-size:14px;color:#4A4E57}
.sg-who a{text-decoration:underline;text-underline-offset:2px}
.sg-msg{margin:18px 0 0;padding:11px 13px;border-radius:var(--r-control);font-size:13px;line-height:18px;background:#F8F8F4;box-shadow:inset 0 0 0 1px #E3E3DC;color:#15171C}
.sg-msg.bad{background:#FCEFEE;box-shadow:inset 0 0 0 1px #C0271F;color:#8E1B15}
.sg-form{margin-top:20px}
.sg-form label{display:block;font:600 13px/18px var(--sans);margin:0 0 7px;color:#15171C}
.sg-form input{display:block;width:100%;height:50px;margin:0 0 16px;padding:0 14px;font:16px/1.2 var(--sans);color:#15171C;background:#fff;border:1px solid #82868E;border-radius:var(--r-control);-webkit-appearance:none;appearance:none}
.sg-form .sg-check{display:flex;font-weight:400}
.sg-form input:focus{outline:2px solid #15171C;outline-offset:0}
.sg-pw{position:relative}
.sg-pw input{padding-right:64px}
.sg-pw button{position:absolute;right:4px;top:3px;height:44px;min-width:52px;padding:0 8px;font:500 13px/44px var(--sans);color:#4A4E57;border-radius:6px}
.sg-pw button:hover{color:#15171C;background:#ECECE6}
.sg-btn{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:52px;margin-top:8px;padding:0 54px;background:#15171C;color:#fff;border-radius:26px;font:600 15px/1 var(--sans);transition:background var(--t-fast)}
.sg-btn:hover{background:#2C2F37}
.sg-btn:focus-visible{outline:2px solid #15171C;outline-offset:3px}
.sg-btn .go{position:absolute;right:7px;top:7px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#15171C}
.sg-btn.is-busy{cursor:progress;opacity:.86}
.sg-alt{margin-top:14px;text-align:center;font-size:13px;color:#4A4E57}
.sg-alt a{text-decoration:underline;text-underline-offset:2px}
.sg-dockrow{grid-row:2;position:relative;z-index:3;display:flex;justify-content:center;min-width:0}
.sg-dock{display:flex;align-items:flex-start;padding:9px 8px 6px;border-radius:16px;max-width:100%;min-width:0;background:rgba(21,21,27,.86);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 26px 50px -20px rgba(0,0,0,.6)}
.sg-lab{flex:none;width:84px;height:69px;display:flex;align-items:center;justify-content:center;text-align:center;font:500 10px/14px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#9BA3AE}
.sg-sep{flex:none;width:1px;height:44px;margin:2px 4px 0;background:rgba(255,255,255,.14)}
.sg-list{list-style:none;display:flex;min-width:0}
.sg-list li{flex:none;width:76px;display:flex;flex-direction:column;align-items:center;padding-bottom:10px;color:#A6ABB4}
.sg-list .tile{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:#F3F3EE;color:#4A4E57;border:0}
.sg-list .tile svg.i{width:22px;height:22px}
.sg-list em{font:500 12px/15px var(--sans);font-style:normal;margin-top:6px;color:#D5D9DF}
@media (max-width:760px){
  .dk-rail,.dk-top,.dk-grid>.dk-board,.dk-side{display:none}
  .dk-app{display:block}
  .dk-main{padding:22px 16px 0}
  .dk-grid{grid-template-columns:minmax(0,1fr);margin-top:380px}
  .sg-page{padding:24px 16px 0}
  .sg-card{align-self:start;margin:12px 0 22px;padding:22px 22px 26px}
  .sg-dockrow{margin:0 -16px}
  .sg-dock{width:100%;border-radius:0;flex-direction:column;padding:8px 0 calc(6px + env(safe-area-inset-bottom))}
  .sg-lab{width:auto;height:auto;padding:2px 0 6px;align-self:center}
  .sg-lab br{display:none}
  .sg-sep{display:none}
  .sg-list{overflow-x:auto;scrollbar-width:none;padding:4px 6px 0}
  .sg-list::-webkit-scrollbar{display:none}
}

/* The reveal: the dark glass lifts once and the light room is underneath. A page-to-page View Transition; other browsers just load. */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:no-preference){
  html.sg .sg-card{view-transition-name:mos-card}
  html[data-reveal="1"]::view-transition-old(root){z-index:1;mix-blend-mode:normal;animation:sg-lift .6s var(--ease) both}
  html[data-reveal="1"]::view-transition-new(root){mix-blend-mode:normal;animation:none}
  html[data-reveal="1"]::view-transition-old(mos-card){animation:sg-card-lift .42s var(--ease) both}
}
@media (prefers-reduced-motion:reduce){
  html[data-reveal="1"]::view-transition-old(root){animation:sg-fade .16s linear both}
}
@keyframes sg-lift{to{opacity:0;transform:translateY(-28px)}}
@keyframes sg-card-lift{to{opacity:0;transform:translateY(-14px) scale(.965)}}
@keyframes sg-fade{to{opacity:0}}