/* Desktop visual layer. Public landing page and account forms retain their design. */
.desktop {
  --shell-text: #e8edf5;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--shell-text);
  isolation: isolate;
  min-height: 100dvh;
  height: 100dvh;
  background: #0a101b;
  padding-bottom: 116px;
}
.desktop-wallpaper { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: radial-gradient(ellipse at 70% 63%, #193b5366, transparent 54%), radial-gradient(ellipse at 10% 0%, #24395666, transparent 60%), #0b121d; }
.wallpaper-arc { position: absolute; width: 125vw; height: 125vw; min-width: 900px; min-height: 900px; border-radius: 50%; transform: rotate(-26deg) scaleY(.56); box-shadow: inset 1px 2px 1px #a4d9ef33, 0 -24px 100px #5aa3c71a; background: linear-gradient(140deg, #4267830d, #0c172300 52%, #060d1799); }
.arc-one { left: 12%; top: 19%; }
.arc-two { left: 18%; top: 25%; opacity: .6; }
.arc-three { left: 24%; top: 31%; opacity: .35; }
.desktop-header { min-height: 54px; padding: 0 26px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; border-bottom: 1px solid #ffffff0b; background: #0b121a66; backdrop-filter: blur(24px); }
.desktop-header .brand { gap: 9px; font-size: 13px; font-weight: 600; letter-spacing: -.2px; cursor: default; }
.desktop-header .brand svg { width: 25px; height: 25px; }
.desktop-clock { font-size: 12px; font-weight: 500; color: #c5d0df; font-variant-numeric: tabular-nums; }
.desktop-account { display: flex; align-items: center; justify-content: flex-end; gap: 14px; min-width: 0; }
#accountIdentity { color: #a0afc1; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desktop-logout.btn { padding: 7px; min-width: 32px; border: 0; background: transparent; color: #9dacc0; border-radius: 9px; }
.desktop-logout svg { display: block; width: 18px; height: 18px; }
.desktop-logout:hover { background: #ffffff0d; color: white; }
.desktop-icons { padding: 42px 30px; display: flex; flex-direction: column; width: fit-content; gap: 17px; }
button.desktop-icon { width: 100px; padding: 10px 6px; display: flex; flex-direction: column; align-items: center; gap: 10px; background: transparent; border: 1px solid transparent; border-radius: 17px; transition: background .2s, transform .2s; }
button.desktop-icon:hover { background: #ffffff08; border-color: #ffffff0c; transform: translateY(-2px); }
.desktop-icon .symbol { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 17px; border: 1px solid #ffffff29; margin: 0; color: #d5ecff; background: linear-gradient(145deg, #487396, #25455f); box-shadow: inset 0 1px 0 #ffffff18, 0 6px 16px #0003; }
.desktop-icon.app-projects .symbol { color: #d5e5fa; background: linear-gradient(145deg, #527c9b, #2d506e); }
.desktop-icon.app-settings .symbol { color: #e0e5ee; background: linear-gradient(145deg, #596779, #313e50); }
.symbol svg { width: 29px; height: 29px; }
.app-label { font-size: 11px; font-weight: 500; color: #d3dce8; text-shadow: 0 1px 5px #0008; }
.taskbar { position: fixed; width: max-content; max-width: calc(100vw - 28px); left: 50%; transform: translateX(-50%); bottom: 19px; height: 73px; border: 1px solid #ffffff24; border-radius: 23px; padding: 9px; gap: 7px; background: #6d809326; backdrop-filter: blur(32px) saturate(1.3); box-shadow: inset 0 1px 0 #ffffff10, 0 16px 50px #0005; z-index: 4; }
.taskbar button { display: grid; place-items: center; width: 51px; height: 51px; padding: 0; border-radius: 15px; color: #bbcadd; border: 1px solid transparent; transition: transform .2s, background .2s, box-shadow .2s; position: relative; }
.taskbar button svg { width: 25px; height: 25px; }
.taskbar button:hover { transform: translateY(-5px); background: #ffffff13; box-shadow: 0 6px 16px #0002; color: #fff; }
.taskbar button::after { content: attr(aria-label); position: absolute; left: 50%; transform: translateX(-50%) translateY(5px); bottom: calc(100% + 15px); background: #202c3ded; border: 1px solid #ffffff20; padding: 6px 9px; border-radius: 7px; font-size: 11px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; }
.taskbar button:hover::after, .taskbar button:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.taskbar .dock-apps { background: linear-gradient(145deg, #5b859d, #355168); color: #e1f0fa; border-color: #ffffff24; }
.dock-divider { height: 29px; width: 1px; margin: 0 4px; background: #ffffff20; }
.desktop .admin-panel { max-width: 700px; position: absolute; top: 100px; left: 160px; right: 30px; border-radius: 20px; background: #182332ed; border-color: #ffffff1a; box-shadow: 0 18px 80px #0004; }
.desktop .admin-panel h2 { font-size: 18px; }
.welcome-dialog { width: min(440px, calc(100% - 32px)); border-radius: 25px; border: 1px solid #ffffff24; background: linear-gradient(150deg, #233244f5, #172331fc); box-shadow: inset 0 1px 0 #ffffff0a, 0 36px 100px #0007; }
.welcome-dialog::backdrop { background: #03081060; backdrop-filter: blur(5px); }
.welcome-art { height: 178px; background: transparent; overflow: visible; }
.welcome-art-glow { width: 190px; height: 130px; position: absolute; border-radius: 50%; background: #70b8df25; filter: blur(30px); }
.welcome-art .welcome-tile { width: 77px; height: 77px; display: grid; place-items: center; position: absolute; font-size: inherit; border-radius: 23px; border: 1px solid #ffffff33; box-shadow: 0 12px 28px #0004, inset 0 1px 0 #ffffff20; color: #e6f4ff; text-shadow: none; }
.welcome-tile svg { width: 36px; height: 36px; }
.welcome-art .tile-back { transform: translate(-60px, 6px) rotate(-18deg); background: linear-gradient(145deg, #526c85, #2c4158); z-index: 1; }
.welcome-art .tile-middle { transform: translate(60px, 6px) rotate(18deg); background: linear-gradient(145deg, #456b7d, #284752); z-index: 2; }
.welcome-art .tile-front { transform: translateY(-6px); background: linear-gradient(145deg, #79a7bf, #3e6885); z-index: 3; }
.welcome-content { padding: 0 32px 28px; text-align: center; }
.welcome-content .desktop-eyebrow { color: #9aafc3; font-size: 10px; letter-spacing: .1em; font-weight: 500; }
.welcome-content h2 { margin: 13px 0 11px; font-size: 29px; font-weight: 600; letter-spacing: -.95px; }
#welcomeText { min-height: 55px; margin: 0; font-size: 13px; line-height: 1.7; color: #a9b8c8; }
.tutorial-dots { justify-content: center; gap: 6px; margin-top: 22px; }
.tutorial-dot, .tutorial-dot.active { width: 5px; height: 5px; border-radius: 50%; background: #536579; }
.tutorial-dot.active { background: #b4d6ec; }
.welcome-actions { gap: 10px; margin-top: 26px; }
.welcome-actions .btn { flex: 1; font-size: 12px; font-weight: 500; min-width: 0; min-height: 43px; border-radius: 12px; padding: 10px 12px; border-color: #ffffff0e; background: #ffffff05; color: #c7d2df; transition: background .2s, transform .2s; }
.welcome-actions .btn:hover { background: #ffffff0d; }
.welcome-actions .btn-primary { background: #d0e5f1; color: #14293b; border-color: #d0e5f1; box-shadow: inset 0 1px 0 #ffffff80, 0 2px 6px #0002; }
.welcome-actions .btn-primary:hover { background: #e4f1f8; }
.welcome-actions .btn:active { transform: scale(.98); }
@media (max-width: 600px) {
  .desktop-header { padding: 0 16px; grid-template-columns: 1fr auto; gap: 10px; }
  .desktop-clock { justify-self: end; font-size: 11px; }
  .desktop-account { display: none; }
  .desktop-account:has(.desktop-logout) { display: flex; position: absolute; top: 64px; right: 16px; }
  .desktop-account #accountIdentity { display: none; }
  .desktop-icons { padding: 28px 16px; gap: 16px; }
  .taskbar { height: 64px; padding: 7px; gap: 3px; border-radius: 21px; bottom: max(15px, env(safe-area-inset-bottom)); }
  .taskbar button { width: 45px; height: 47px; border-radius: 13px; }
  .taskbar button svg { width: 23px; height: 23px; }
  .dock-divider { margin: 0 3px; }
  .welcome-content { padding: 0 25px 25px; }
  .desktop .admin-panel { position: relative; inset: auto; margin: 16px; }
  .wallpaper-arc { left: -25%; top: 38%; }
  .arc-two { left: -12%; top: 43%; }
  .arc-three { left: 1%; top: 48%; }
}
.desktop :focus-visible, .welcome-dialog :focus-visible { outline: 2px solid #a8cde699; outline-offset: 3px; }
.welcome-dialog[open] { animation: welcome-enter .22s ease-out; }
@keyframes welcome-enter { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .desktop button, .taskbar button::after, .welcome-actions .btn { transition: none; } .welcome-dialog[open] { animation: none; } }