/* visual_depth_v3.css — structural depth pass, presentation only */
:root{
  --vd-void:#03080d;--vd-deep:#07141d;--vd-mid:#0d2330;--vd-panel:#102b38;
  --vd-edge:rgba(173,222,213,.30);--vd-light:#e9c779;--vd-cyan:#72d8d1;
  --vd-shadow:0 22px 55px rgba(0,0,0,.48),0 4px 14px rgba(0,0,0,.28);
  --vd-font:Vazirmatn,Tahoma,system-ui,sans-serif;
}
html{background:var(--vd-void)!important}
body{position:relative;isolation:isolate;background:var(--vd-void)!important}
body::before{content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;background:
 radial-gradient(ellipse at 18% 2%,rgba(52,137,144,.20),transparent 32%),
 radial-gradient(ellipse at 87% 18%,rgba(214,164,79,.10),transparent 25%),
 linear-gradient(180deg,#0a202b 0%,#06121a 45%,#02070b 100%)}
body::after{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.15;background-image:
 linear-gradient(rgba(180,220,210,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(180,220,210,.05) 1px,transparent 1px);
 background-size:48px 48px;mask-image:linear-gradient(180deg,#000,transparent 75%)}
/* The shell becomes a framed command room rather than a single flat rectangle. */
.app-shell{position:relative!important;isolation:isolate;overflow:hidden!important;background:
 linear-gradient(180deg,rgba(11,31,42,.97),rgba(3,12,18,.985))!important;
 border:1px solid rgba(157,213,207,.35)!important;box-shadow:0 0 0 1px rgba(233,199,121,.08),0 35px 100px rgba(0,0,0,.62),inset 0 1px rgba(255,255,255,.08)!important}
.app-shell::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
 radial-gradient(ellipse at 78% 7%,rgba(107,192,188,.13),transparent 30%),
 radial-gradient(ellipse at 20% 93%,rgba(220,169,80,.07),transparent 28%)}
.app-shell::after{content:"";position:absolute;inset:0;z-index:10;pointer-events:none;border:1px solid rgba(255,255,255,.035);mask-image:linear-gradient(#000,transparent 23%,transparent 82%,#000)}
/* Header has its own plane, with a light shelf below it. */
.app-shell .topbar{position:relative!important;z-index:20!important;background:linear-gradient(180deg,rgba(17,47,59,.97),rgba(7,22,30,.94))!important;box-shadow:0 12px 24px rgba(0,0,0,.25),inset 0 -1px rgba(226,198,123,.22)!important}
.app-shell .topbar::after{content:"";position:absolute;inset:auto 7% -2px 7%;height:3px;border-radius:99px;background:linear-gradient(90deg,transparent,var(--vd-cyan),var(--vd-light),transparent);opacity:.55;filter:blur(.3px)}
.app-shell .main-content{position:relative;z-index:1}
/* Hero: layered glass over an image, with a foreground plane and controlled depth. */
.app-shell .command-hero,.pp-hero{position:relative!important;isolation:isolate;overflow:hidden!important;background:linear-gradient(145deg,rgba(27,64,75,.78),rgba(5,18,26,.92))!important;border:1px solid rgba(188,224,208,.38)!important;box-shadow:var(--vd-shadow),inset 0 1px rgba(255,255,255,.12)!important}
.app-shell .command-hero::after,.pp-hero::after{content:"";position:absolute;inset:10px;z-index:0;border:1px solid rgba(232,199,121,.19);border-radius:inherit;pointer-events:none;mask-image:linear-gradient(90deg,#000,transparent 75%)}
.app-shell .command-hero>* ,.pp-hero>*{position:relative;z-index:2}
/* Cards acquire a contact shadow, a raised face and a lower chassis. */
.app-shell .action-card,.in-game-module-card,.product-card,.operation-card,.pp-feature,.pp-step,.pp-stat{position:relative!important;isolation:isolate;overflow:hidden!important;background:linear-gradient(145deg,rgba(25,61,73,.94),rgba(7,22,31,.98))!important;border:1px solid rgba(166,215,205,.28)!important;box-shadow:0 14px 0 rgba(2,9,13,.62),0 24px 34px rgba(0,0,0,.30),inset 0 1px rgba(255,255,255,.10)!important;transform:translateZ(0);transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s,border-color .22s,filter .22s!important}
.app-shell .action-card::before,.in-game-module-card::before,.product-card::before,.operation-card::before,.pp-feature::before,.pp-step::before,.pp-stat::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at var(--vd-light-x,82%) var(--vd-light-y,0%),rgba(255,222,151,.20),transparent 34%),linear-gradient(120deg,transparent 45%,rgba(121,224,215,.09) 50%,transparent 57%);opacity:.9}
.app-shell .action-card::after,.in-game-module-card::after,.product-card::after,.operation-card::after,.pp-feature::after,.pp-step::after,.pp-stat::after{content:"";position:absolute;top:0;right:12%;left:12%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,244,202,.65),rgba(112,216,208,.55),transparent);opacity:.7;pointer-events:none}
.app-shell .action-card:hover,.in-game-module-card:hover,.product-card:hover,.operation-card:hover,.pp-feature:hover,.pp-step:hover,.pp-stat:hover{border-color:rgba(235,202,125,.70)!important;box-shadow:0 17px 0 rgba(2,9,13,.62),0 30px 48px rgba(0,0,0,.42),0 0 28px rgba(103,211,203,.10),inset 0 1px rgba(255,255,255,.15)!important;filter:brightness(1.08)}
.vd-hover{transform:perspective(900px) rotateX(var(--vd-rx,0deg)) rotateY(var(--vd-ry,0deg)) translateZ(6px)!important}
/* Real stage separation for the HQ board. */
.app-shell .action-grid.jw-map,.app-shell .action-grid.hq-refit-board{position:relative!important;isolation:isolate;border-radius:18px!important;padding:16px!important;background:linear-gradient(180deg,rgba(4,15,21,.2),rgba(4,12,17,.72))!important;box-shadow:inset 0 1px rgba(255,255,255,.10),inset 0 -20px 40px rgba(0,0,0,.26),0 20px 44px rgba(0,0,0,.25)!important}
.app-shell .action-grid.jw-map::before,.app-shell .action-grid.hq-refit-board::before{z-index:-1!important;inset:0!important;border:1px solid rgba(173,222,213,.34)!important;border-radius:18px!important;box-shadow:inset 0 0 70px rgba(0,0,0,.62),0 0 0 7px rgba(235,199,117,.035)!important}
/* Section titles become architectural dividers, not floating text. */
.app-shell .section-title,.app-shell .jw-toolbar,.app-shell .panel-title,.pp-section-title{position:relative!important;display:flex;align-items:center;gap:12px;padding-inline-start:14px!important;color:#f2ddb0!important}
.app-shell .section-title::before,.app-shell .jw-toolbar::before,.app-shell .panel-title::before,.pp-section-title::before{content:"";width:4px;height:28px;flex:0 0 auto;border-radius:99px;background:linear-gradient(180deg,var(--vd-light),var(--vd-cyan));box-shadow:0 0 14px rgba(113,214,205,.28)}
/* Public landing is a real stage with foreground cards and horizon. */
#public-preview{position:relative!important;isolation:isolate;background:transparent!important}
#public-preview::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 35%,transparent 0 28%,rgba(0,0,0,.28) 64%,rgba(0,0,0,.72) 100%)}
.pp-wrap{position:relative;perspective:1200px}
.pp-auth,.pp-hero,.pp-feature,.pp-step,.pp-stat,.pp-shot{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.pp-auth{box-shadow:var(--vd-shadow),inset 0 1px rgba(255,255,255,.12)!important;border-color:rgba(169,218,207,.35)!important}
.pp-feature,.pp-step,.pp-stat{transform:translateY(0) translateZ(0)!important}
.pp-feature:hover,.pp-step:hover,.pp-stat:hover{transform:translateY(-7px) translateZ(18px)!important}
/* Focus states are luminous, not merely outlined. */
:where(.action-card,.product-card,.operation-card,.pp-feature,.pp-step,.pp-stat):focus-within{border-color:var(--vd-light)!important;box-shadow:0 0 0 3px rgba(233,199,121,.12),0 20px 42px rgba(0,0,0,.42)!important}
@media(max-width:700px){
 .app-shell{border-radius:18px!important}
 .app-shell .action-card,.in-game-module-card,.product-card,.operation-card,.pp-feature,.pp-step,.pp-stat{box-shadow:0 9px 0 rgba(2,9,13,.62),0 16px 25px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.09)!important}
 .app-shell .action-card:hover,.in-game-module-card:hover,.product-card:hover,.operation-card:hover{transform:none!important}
 .pp-auth,.pp-hero,.pp-feature,.pp-step,.pp-stat,.pp-shot{backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media(prefers-reduced-motion:reduce){
 .app-shell .action-card,.in-game-module-card,.product-card,.operation-card,.pp-feature,.pp-step,.pp-stat{transition:none!important}
 .pp-feature:hover,.pp-step:hover,.pp-stat:hover{transform:none!important}
}