/* Sculpted navigation. All rules are scoped to the left tool rail. */
.app>.rail{position:relative;isolation:isolate;background:radial-gradient(ellipse at 10% 0%,#46406a55,transparent 55%),linear-gradient(100deg,#171c2d,#242a40 56%,#191f31);border-right:1px solid #41475e;box-shadow:inset 1px 0 0 #ffffff0b,inset -2px 0 5px #080b1540,5px 0 18px #0b142912;padding:20px 7px 14px;gap:10px;perspective:650px;overflow-x:hidden;overflow-y:auto;scrollbar-color:#4b4868 transparent}
.rail:after{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);height:1px;width:75%;background:linear-gradient(90deg,transparent,#a398d67a,transparent);pointer-events:none}
.rail button[data-tab]{--nav-color:173,151,255;--tilt-x:0deg;--tilt-y:0deg;--light-x:50%;--light-y:25%;width:62px;min-height:66px;flex-shrink:0;padding:8px 2px 7px;gap:7px;position:relative;isolation:isolate;transform-style:preserve-3d;transform:perspective(450px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));border:1px solid #5b617436;border-radius:13px;background:linear-gradient(155deg,#3c4257,#292f43 48%,#252a3d);box-shadow:0 3px 0 #111625,0 5px 7px #080b153b,inset 0 1px 0 #ffffff12,inset 0 -1px 0 #00000050;color:#a6afca;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background .25s,border-color .25s,color .25s;outline-offset:4px;overflow:visible}
.rail button[data-tab]:before,.rail button[data-tab].active:before{content:'';position:absolute;inset:0;width:auto;height:auto;border-radius:12px;background:radial-gradient(circle at var(--light-x) var(--light-y),rgba(var(--nav-color),.16),transparent 72%),linear-gradient(130deg,#ffffff08,transparent 42%);opacity:.4;pointer-events:none;transition:opacity .25s;transform:translateZ(1px);box-shadow:none}
.rail button[data-tab]:after{content:'';position:absolute;bottom:1px;left:12px;right:12px;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--nav-color),.35),transparent);opacity:.4;pointer-events:none}
.rail button[data-tab] .nav-orb{width:33px;height:31px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(145deg,#50566b90,#292f4550);border:1px solid #ffffff0c;box-shadow:inset 0 1px 1px #ffffff11,0 2px 3px #0b10283b;transform:translateZ(9px);transition:transform .25s,box-shadow .25s,background .25s;color:rgb(var(--nav-color))}
.rail button[data-tab] .nav-orb svg{width:18px;height:18px;filter:drop-shadow(0 1px 0 #0008);stroke-width:1.6;transition:filter .25s,transform .25s;overflow:visible}
.rail button[data-tab] small{position:relative;z-index:2;font-size:7.5px;letter-spacing:.05px;line-height:1.3;font-weight:500;color:inherit;text-shadow:0 1px 1px #090d22;transform:translateZ(5px);transition:color .25s}
.rail button[data-tab] .nav-led{position:absolute;width:4px;height:4px;top:8px;right:7px;border-radius:50%;background:#626a7b;box-shadow:inset 0 1px 1px #0008;transition:background .25s,box-shadow .25s;transform:translateZ(4px)}
.rail button[data-tab]:hover,.rail button[data-tab]:focus-visible,body.dark .rail button[data-tab]:hover{transform:perspective(450px) translateY(-3px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));background:linear-gradient(145deg,#4b4f6a,#33394f 50%,#292e44);border-color:rgba(var(--nav-color),.45);color:#f0edff;box-shadow:0 5px 0 #111524,0 10px 16px #070c224d,0 0 17px rgba(var(--nav-color),.09),inset 0 1px 0 #ffffff20,inset 0 -1px 0 #00000040;z-index:2}
.rail button[data-tab]:hover:before,.rail button[data-tab]:focus-visible:before{opacity:1}
.rail button[data-tab]:hover .nav-orb,.rail button[data-tab]:focus-visible .nav-orb{transform:translateZ(17px) translateY(-1px);background:linear-gradient(135deg,rgba(var(--nav-color),.23),rgba(var(--nav-color),.05));box-shadow:inset 0 1px 1px #ffffff21,0 4px 8px #080d2040,0 0 13px rgba(var(--nav-color),.09)}
.rail button[data-tab]:hover .nav-orb svg{filter:drop-shadow(0 0 4px rgba(var(--nav-color),.3));transform:scale(1.06)}
.rail button[data-tab].active,body.dark .rail button[data-tab].active{color:#f3edff;background:linear-gradient(145deg,#66568c,#463c65 55%,#322d4f);border-color:#b29cdd77;box-shadow:0 3px 0 #171329,0 7px 13px #09081e55,0 0 20px #9e7bed14,inset 0 1px 0 #d3b9ff38,inset 0 -1px 0 #1a122e80}
.rail button[data-tab].active:before{opacity:1;background:radial-gradient(circle at var(--light-x) var(--light-y),#cfadff2e,transparent 75%),linear-gradient(150deg,#ffffff0b,transparent 50%)}
.rail button[data-tab].active .nav-orb{color:#e8d7ff;background:linear-gradient(145deg,#ad8be044,#7860a620);border-color:#dbb4ff22;box-shadow:inset 0 1px 0 #e4c8ff30,0 3px 7px #180c2e40,0 0 15px #c593ff12}
.rail button[data-tab].active .nav-led{background:#dcc1ff;box-shadow:0 0 5px #dcbbff,0 0 12px #b284e39c}
.rail button[data-tab].active:after{opacity:1;background:linear-gradient(90deg,transparent,#c19bea80,transparent)}
.rail button[data-tab]:active,.rail button[data-tab].is-pressed{transform:perspective(450px) translateY(2px) rotateX(0deg) rotateY(0deg);box-shadow:0 1px 0 #111524,0 2px 4px #070b222e,inset 0 2px 5px #10122644}
.rail .nav-ripple{position:absolute;z-index:3;pointer-events:none;left:var(--ripple-x,50%);top:var(--ripple-y,50%);width:12px;height:12px;background:rgba(var(--nav-color),.22);border:1px solid rgba(var(--nav-color),.25);border-radius:50%;transform:translate(-50%,-50%);animation:nav-touch .48s ease-out forwards}
@keyframes nav-touch{from{opacity:.7;transform:translate(-50%,-50%) scale(.4)}to{opacity:0;transform:translate(-50%,-50%) scale(5)}}
.rail .railbottom{flex-shrink:0;margin-top:auto;min-height:33px;background:linear-gradient(145deg,#8974b7,#504462 65%,#39354f);border:1px solid #c0a2dc44;box-shadow:0 3px 0 #101425,0 6px 10px #070b1c4d,inset 0 1px 0 #e3c9ff3b;color:#eee2ff;text-shadow:0 1px 2px #27153c;font-weight:600}
@media(min-width:1600px){.app>.rail{padding-inline:9px;gap:11px}.rail button[data-tab]{width:62px;min-height:69px}.rail button[data-tab] .nav-orb{width:35px;height:33px}.rail button[data-tab] small{font-size:8px}}
@media(max-width:1200px){.app>.rail{padding-inline:6px;gap:9px}.rail button[data-tab]{width:56px;min-height:63px}.rail button[data-tab] small{font-size:7px}.rail button[data-tab] .nav-orb{width:31px;height:29px}}
@media(max-width:1000px){.app>.rail{padding-inline:5px}.rail button[data-tab]{width:50px;min-height:61px;border-radius:11px}.rail button[data-tab] small{font-size:6.5px}.rail button[data-tab] .nav-orb{width:29px;height:28px}.rail button[data-tab] .nav-led{width:3px;height:3px;right:5px}}
@media(max-width:850px){.app>.rail{padding-inline:4px;padding-top:16px;gap:9px}.rail button[data-tab]{width:48px;min-height:61px;padding:7px 0}.rail button[data-tab] .nav-orb svg{width:17px;height:17px}}
@media(max-width:620px){.app>.rail{padding-inline:4px;gap:8px}.rail button[data-tab]{width:39px;min-height:57px;border-radius:9px;gap:6px}.rail button[data-tab] small{font-size:5.5px;letter-spacing:0}.rail button[data-tab] .nav-orb{width:26px;height:26px;border-radius:7px}.rail button[data-tab] .nav-orb svg{width:16px;height:16px}.rail button[data-tab]:before{border-radius:8px}}
@media(prefers-reduced-motion:reduce){.rail button[data-tab],.rail button[data-tab]:hover,.rail button[data-tab]:active{transform:none!important}.rail button[data-tab] .nav-orb,.rail button[data-tab] svg{transform:none!important}.rail .nav-ripple{display:none}}
