/* CSS 3D projection. Decorative layers never cover or intercept controls. */
.command-hero {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  min-height: 470px;
  background: radial-gradient(ellipse at 78% 38%, #096f8040, transparent 50%),
    radial-gradient(ellipse at 92% 100%, #a51e5833, transparent 45%),
    repeating-linear-gradient(90deg, transparent 0 47px, #5deaf607 47px 48px), #100f1b;
}
.command-hero .motion-spotlight { background: radial-gradient(400px circle at var(--light-x, 70%) var(--light-y, 40%), #5deaf61a, transparent 75%); }
.holo-display { min-width: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0; overflow: visible; transform: none; }
.holo-stage { position: relative; width: 100%; max-width: 440px; height: 360px; isolation: isolate; }
.holo-art { position: absolute; inset: -15px; overflow: clip; pointer-events: none; perspective: 850px; }
.holo-coordinate-grid {
  position: absolute; width: 130%; height: 230px; left: -15%; bottom: -60px;
  background: linear-gradient(#5deaf630 1px, transparent 1px), linear-gradient(90deg, #5deaf630 1px, transparent 1px);
  background-size: 27px 27px; transform: rotateX(62deg); transform-origin: center top;
  mask-image: radial-gradient(ellipse, #000 15%, transparent 65%);
  animation: hologram-grid 9s linear infinite;
}
.holo-aura { position: absolute; inset: 18% 12%; border-radius: 50%; background: radial-gradient(ellipse, #38dff220, transparent 67%); animation: holo-breathe 5s ease-in-out infinite alternate; }
.holo-platform { position: absolute; width: 235px; height: 110px; left: 50%; bottom: 12px; transform: translateX(-50%); perspective: 500px; }
.holo-base { position: absolute; inset: 0; border-radius: 50%; border: 1px solid #5deaf693; transform: rotateX(65deg); background: repeating-conic-gradient(from 0deg, #5deaf680 0deg 1deg, transparent 1deg 12deg); mask-image: radial-gradient(ellipse, transparent 56%, #000 58%); box-shadow: 0 0 25px #5deaf64a, inset 0 0 20px #5deaf62e; }
.base-outer { animation: projector-orbit 22s linear infinite; }
.base-inner { inset: 15px 32px; border: 2px solid var(--info); background: transparent; mask-image: none; animation: projector-orbit 15s linear infinite reverse; }
.base-core { inset: 30px 62px; border: 0; background: #8afbff; mask-image: none; box-shadow: 0 0 25px #5deaf6, 0 0 65px #5deaf680; animation: projector-core 4s ease-in-out infinite alternate; }
.holo-beam { position: absolute; left: 50%; bottom: 66px; width: 265px; height: 255px; transform: translateX(-50%); clip-path: polygon(0 0,100% 0,60% 100%,40% 100%); background: linear-gradient(0deg, #69f4ff30, #5deaf610 55%, transparent); animation: projection-breathe 6s ease-in-out infinite alternate; }
.beam-front { width: 140px; background: repeating-linear-gradient(0deg, transparent 0 7px, #8dfbff0a 7px 8px), linear-gradient(0deg, #b0fcff26, transparent 85%); animation-delay: -3s; }
.holo-volume { position: absolute; left: 50%; top: 46%; width: 0; height: 0; perspective: 650px; transform-style: preserve-3d; transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform .5s ease-out; }
.holo-float { position: absolute; width: 0; height: 0; transform-style: preserve-3d; animation: hologram-levitate 6s ease-in-out infinite; }
.holo-cube { --holo-size: 124px; --holo-half: 62px; position: absolute; width: var(--holo-size); height: var(--holo-size); left: calc(var(--holo-half) * -1); top: calc(var(--holo-half) * -1); transform-style: preserve-3d; transform: rotateX(-23deg) rotateY(32deg); animation: hologram-rotate 24s linear infinite; }
.holo-face {
  position: absolute; inset: 0; border: 1px solid #9dfaff; background-color: #45e9ef08;
  background-image: linear-gradient(#62f0f233 1px, transparent 1px), linear-gradient(90deg, #62f0f233 1px, transparent 1px);
  background-size: 25% 25%; box-shadow: inset 0 0 22px #5deaf622, 0 0 7px #5deaf670; backface-visibility: visible;
}
.holo-face::before, .holo-face::after { content: ''; position: absolute; width: 5px; height: 5px; background: #d6ffff; box-shadow: 0 0 12px var(--info); }
.holo-face::before { left: -3px; top: -3px; }
.holo-face::after { right: -3px; bottom: -3px; }
.holo-front { transform: translateZ(var(--holo-half)); }
.holo-back { transform: rotateY(180deg) translateZ(var(--holo-half)); }
.holo-left { transform: rotateY(-90deg) translateZ(var(--holo-half)); }
.holo-right { transform: rotateY(90deg) translateZ(var(--holo-half)); }
.holo-top { transform: rotateX(90deg) translateZ(var(--holo-half)); }
.holo-bottom { transform: rotateX(-90deg) translateZ(var(--holo-half)); }
.holo-cube-inner { --holo-size: 56px; --holo-half: 28px; animation-duration: 16s; animation-direction: reverse; }
.holo-cube-inner .holo-face { border-color: #f8ef3bbb; background: #f8ef3b05; box-shadow: 0 0 9px #f8ef3b50; }
.holo-cube-inner .holo-face::before, .holo-cube-inner .holo-face::after { display: none; }
.holo-glyph { position: absolute; left: -36px; top: -31px; width: 72px; text-align: center; color: #d9ffff; font: italic 950 49px/1 var(--font-display); letter-spacing: -.13em; text-shadow: 0 0 24px #5deaf6, 2px 0 #ff465f70; transform: translateZ(82px); animation: hologram-label 6s ease-in-out infinite; }
.holo-glyph span { color: var(--info); }
.holo-scan-plane { position: absolute; width: 205px; height: 205px; left: -102px; top: -102px; border: 1px solid #abfbff99; background: linear-gradient(transparent 45%, #5deaf640 50%, transparent 55%); box-shadow: 0 0 18px #5deaf618; transform: rotateX(80deg); animation: projection-scan 7s ease-in-out infinite; }
.holo-orbit { position: absolute; left: calc(50% - 138px); top: calc(46% - 138px); width: 276px; height: 276px; border: 1px solid #5deaf666; border-left-color: #a6f7ff; border-right-color: #5deaf60d; border-radius: 50%; transform: rotateX(62deg) rotateZ(-25deg); animation: holo-orbit-tilt 18s linear infinite; }
.holo-orbit::after { content: ''; position: absolute; top: calc(50% - 4px); left: -4px; width: 7px; height: 7px; background: var(--info); box-shadow: 0 0 15px #5deaf6; }
.orbit-b { width: 220px; height: 220px; left: calc(50% - 110px); top: calc(46% - 110px); border-color: #ff465f55; border-bottom-color: #ff8093; animation-duration: 25s; animation-direction: reverse; }
.orbit-b::after { background: var(--neon-red); box-shadow: 0 0 15px var(--neon-red); }
.holo-particle { position: absolute; width: 3px; height: 45px; bottom: 70px; left: 45%; background: linear-gradient(transparent, #7bfbff, transparent); animation: projection-particle 5s linear infinite; }
.particle-b { left: 58%; animation-delay: -1.5s; animation-duration: 6s; }
.particle-c { left: 33%; animation-delay: -3s; animation-duration: 7s; }
.holo-connectors { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--info); stroke: #5deaf675; stroke-width: 1; }
.holo-connectors path { fill: none; stroke-dasharray: 5 6; animation: holo-dashes 6s linear infinite; }
.holo-ticks { position: absolute; bottom: 31px; left: 27%; width: 46%; height: 3px; background: repeating-linear-gradient(90deg, #5deaf6 0 1px, transparent 1px 9px); opacity: .65; }
.holo-shortcut { position: absolute; display: flex; align-items: center; gap: 8px; text-align: left; padding: 9px 11px; min-height: 47px; min-width: 113px; border: 1px solid #5deaf675; background: linear-gradient(115deg, #12323ded, #161327e8); color: #e4ffff; box-shadow: -3px 3px 0 #5deaf61a, inset 0 1px #bdffff25; font: 600 16px/1.35 var(--font-display); transition: border-color .2s, box-shadow .2s; animation: hologram-card-float 6s ease-in-out infinite; }
.holo-shortcut > span:first-child { color: var(--info); font-size: 24px; }
.holo-shortcut small { display: block; color: #86bfcb; font: 16px/1.7 var(--hud-font); letter-spacing: .1em; }
.holo-shortcut b { color: var(--info); margin-left: auto; font-size: 16px; }
.holo-shortcut:hover, .holo-shortcut:focus-visible { border-color: #b3ffff; box-shadow: 0 0 25px #5deaf650, inset 0 0 15px #5deaf61a; animation-play-state: paused; }
.shortcut-work { left: 0; top: 49px; }
.shortcut-content { right: -2px; top: 147px; animation-delay: -2s; border-color: #ff64806b; }
.shortcut-content > span:first-child, .shortcut-content b { color: #ff8ba3; }
.shortcut-notes { left: 5px; bottom: 91px; animation-delay: -4s; }
.holo-display .command-clock { gap: 3px; padding: 0 0 7px; margin-top: -5px; }
.holo-display .command-clock time { font-size: 17px; text-shadow: 0 0 16px #5deaf680; }
.holo-display .command-clock span { color: #92becb; }

/* Carry the projected-glass language into the working screens. */
.panel, .item-card, .stat-card, .table-wrap {
  background-image: linear-gradient(var(--neon-red), var(--neon-red)),
    linear-gradient(var(--neon-red), var(--neon-red)), linear-gradient(var(--info), var(--info)),
    linear-gradient(125deg, #193540b5, #161522 45%, #15202ce6);
}
.panel-head { position: relative; }
.panel-head::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 34%; height: 1px; background: linear-gradient(90deg, transparent, #5deaf6, transparent); transform-origin: left; animation: panel-light 8s ease-in-out infinite; pointer-events: none; }
.page-head .eyebrow::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 10px; border: 1px solid var(--info); box-shadow: 0 0 10px #5deaf655; transform: rotate(45deg); animation: module-prism 9s linear infinite; }
.today-stats .stat-card::after { content: ''; position: absolute; width: 28px; height: 28px; top: 49px; right: 19px; border: 1px solid #5deaf66b; background: linear-gradient(45deg, transparent 48%, #5deaf670 50%, transparent 52%), linear-gradient(-45deg, transparent 48%, #5deaf640 50%, transparent 52%); box-shadow: 6px 6px 0 #5deaf613; animation: module-prism 14s linear infinite; pointer-events: none; }
.today-stats .stat-card:nth-child(2n)::after { animation-direction: reverse; animation-delay: -5s; }

@keyframes hologram-rotate { from { transform: rotateX(-23deg) rotateY(32deg); } to { transform: rotateX(-23deg) rotateY(392deg); } }
@keyframes hologram-levitate { 0%,100% { transform: translateY(-9px); } 50% { transform: translateY(6px); } }
@keyframes hologram-label { 0%,100% { transform: translateY(-9px) translateZ(82px); } 50% { transform: translateY(6px) translateZ(82px); } }
@keyframes projector-orbit { from { transform: rotateX(65deg) rotateZ(0); } to { transform: rotateX(65deg) rotateZ(360deg); } }
@keyframes projector-core { from { opacity: .5; transform: rotateX(65deg) scale(.9); } to { opacity: .9; transform: rotateX(65deg) scale(1.08); } }
@keyframes projection-breathe { from { opacity: .5; } to { opacity: 1; } }
@keyframes holo-breathe { from { transform: scale(.9); } to { transform: scale(1.1); } }
@keyframes projection-scan { 0%,100% { transform: translateY(-83px) rotateX(80deg); opacity: .25; } 50% { transform: translateY(87px) rotateX(80deg); opacity: .8; } }
@keyframes holo-orbit-tilt { from { transform: rotateX(62deg) rotateY(-15deg) rotateZ(0); } to { transform: rotateX(62deg) rotateY(-15deg) rotateZ(360deg); } }
@keyframes projection-particle { from { transform: translateY(0); opacity: 0; } 20% { opacity: .8; } to { transform: translateY(-220px); opacity: 0; } }
@keyframes holo-dashes { to { stroke-dashoffset: -66; } }
@keyframes hologram-card-float { 0%,100% { transform: translateY(-3px); } 50% { transform: translateY(3px); } }
@keyframes panel-light { 0%,100% { transform: translateX(0) scaleX(.8); opacity: .3; } 50% { transform: translateX(170%) scaleX(1); opacity: .8; } }
@keyframes module-prism { from { transform: perspective(80px) rotateX(25deg) rotateY(0) rotateZ(45deg); } to { transform: perspective(80px) rotateX(25deg) rotateY(360deg) rotateZ(45deg); } }

@media (max-width: 1180px) and (min-width: 761px) {
  .command-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-inline: 24px; }
  .holo-stage { height: 330px; }
  .holo-cube { --holo-size: 100px; --holo-half: 50px; }
  .holo-cube-inner { --holo-size: 46px; --holo-half: 23px; }
  .holo-shortcut { min-width: 97px; font-size: 16px; padding: 8px; }
  .shortcut-work { left: -13px; top: 22px; }
  .shortcut-content { right: -10px; top: 184px; }
  .shortcut-notes { left: -10px; bottom: 55px; }
  .holo-orbit { width: 235px; height: 235px; left: calc(50% - 117px); top: calc(46% - 117px); }
  .holo-platform { width: 200px; }
}
@media (max-width: 1000px) and (min-width: 761px) {
  .command-hero { grid-template-columns: 1fr; padding-bottom: 51px; }
  .command-copy { padding-top: 3px; }
  .command-copy h1 { font-size: 48px; }
  .holo-display { margin-top: 12px; }
  .holo-stage { max-width: 380px; height: 310px; }
  .holo-cube { --holo-size: 116px; --holo-half: 58px; }
  .holo-cube-inner { --holo-size: 52px; --holo-half: 26px; }
}
@media (max-width: 760px) {
  .command-hero { grid-template-columns: 1fr; min-height: 0; padding: 24px 20px 48px; }
  .command-kicker { max-width: none; min-height: 0; }
  .command-greeting { margin-top: 18px; }
  .command-hero h1 { font-size: clamp(40px, 11.5vw, 60px); }
  .holo-display { position: relative; inset: auto; width: 100%; margin-top: 20px; }
  .holo-stage { height: 255px; max-width: 370px; }
  .holo-art { inset: -7px -12px; }
  .holo-cube { --holo-size: 86px; --holo-half: 43px; }
  .holo-cube-inner { --holo-size: 40px; --holo-half: 20px; }
  .holo-glyph { font-size: 38px; top: -21px; transform: translateZ(60px); }
  .holo-platform { width: 180px; height: 80px; bottom: 6px; }
  .base-inner { inset: 11px 23px; }
  .base-core { inset: 21px 48px; }
  .holo-beam { width: 190px; height: 195px; bottom: 43px; }
  .beam-front { width: 100px; }
  .holo-orbit { width: 190px; height: 190px; left: calc(50% - 95px); top: calc(46% - 95px); }
  .orbit-b { width: 165px; height: 165px; left: calc(50% - 82px); top: calc(46% - 82px); }
  .holo-scan-plane { width: 145px; height: 145px; left: -72px; top: -72px; }
  .holo-shortcut { min-width: 88px; min-height: 44px; padding: 7px; gap: 5px; font-size: 16px; }
  .holo-shortcut > span:first-child { font-size: 17px; }
  .holo-shortcut small { font-size: 16px; }
  .shortcut-work { left: -9px; top: 9px; }
  .shortcut-content { right: -9px; top: 119px; }
  .shortcut-notes { left: -9px; bottom: 32px; }
  .holo-display .command-clock { display: grid; margin-top: 0; padding-top: 2px; }
  .holo-display .command-clock time { font-size: 16px; }
  .holo-display .command-clock span { font-size: 16px; }
  .today-stats .stat-card::after { right: 14px; width: 23px; height: 23px; }
}
html[data-motion=off] .holo-volume { transform: none; }