/* NeuroBank-inspired Death Hub visual system. Visual-only overrides; application behavior remains unchanged. */
:root{
 --dh-ink:#080d18;--dh-ink-2:#0b1221;--dh-panel:#101a2b;--dh-panel-2:#121f33;
 --dh-line:rgba(161,190,230,.14);--dh-line-strong:rgba(161,190,230,.23);
 --dh-text:#f1f6ff;--dh-muted:#8fa1bc;--dh-blue:#5b9cff;--dh-cyan:#62e3f2;
 --dh-violet:#9b8cff;--dh-green:#58ddb0;--dh-shadow:0 22px 70px rgba(0,0,0,.28);
 --dh-radius:18px;--dh-ease:cubic-bezier(.2,.75,.25,1);
}
html{background:var(--dh-ink);color-scheme:dark;scroll-behavior:smooth}
body{color:var(--dh-text);background-color:var(--dh-ink)}
button,input,select,textarea{accent-color:var(--dh-blue)}
button,a,[role="button"]{-webkit-tap-highlight-color:transparent}
:where(button,a,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--dh-cyan);outline-offset:3px}
::selection{background:rgba(91,156,255,.32);color:#fff}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
/* Shared atmosphere: subtle, static gradients rather than expensive continuous repainting. */
body.app-shell,body:not(.app-shell){
 background-image:radial-gradient(ellipse at 12% -12%,rgba(45,112,216,.15),transparent 38%),radial-gradient(ellipse at 92% 8%,rgba(45,207,225,.07),transparent 30%);
}
.app-shell .app-topbar,.app-shell .sidebar,.app-shell .workspace,
.app-shell .modal-card,.app-shell .panel,.app-shell .card,.app-shell .stat-card,
.app-shell .settings-card,.app-shell .feature-card{
 border-color:var(--dh-line);
}
.app-shell .app-topbar{background:rgba(8,13,24,.86);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.app-shell .sidebar{background:linear-gradient(180deg,rgba(12,20,35,.98),rgba(8,13,24,.98));border-right-color:var(--dh-line)}
.app-shell .workspace{background:transparent}
.app-shell .sidebar a,.app-shell .sidebar button{transition:background-color .18s var(--dh-ease),border-color .18s var(--dh-ease),color .18s var(--dh-ease),transform .18s var(--dh-ease)}
.app-shell .sidebar a:hover,.app-shell .sidebar button:hover{background:rgba(91,156,255,.09);border-color:rgba(91,156,255,.18)}
.app-shell .sidebar .active,.app-shell .sidebar a[aria-current="page"]{background:linear-gradient(100deg,rgba(91,156,255,.17),rgba(98,227,242,.045));border-color:rgba(91,156,255,.25)}
.app-shell :is(.card,.panel,.stat-card,.settings-card,.feature-card,.module-card,.section-card,.guild-card,.server-card,.overview-card){
 background:linear-gradient(145deg,rgba(18,31,51,.92),rgba(12,21,36,.94));border:1px solid var(--dh-line);border-radius:var(--dh-radius);box-shadow:0 10px 34px rgba(0,0,0,.12);
}
.app-shell :is(.card,.panel,.stat-card,.settings-card,.feature-card,.module-card,.section-card,.guild-card,.server-card,.overview-card):hover{border-color:var(--dh-line-strong)}
.app-shell :is(h1,h2,h3,h4,.page-title,.section-title){color:var(--dh-text);letter-spacing:-.025em}
.app-shell :is(.muted,.subtle,.description,.helper-text,.section-description){color:var(--dh-muted)}
.app-shell :is(input,select,textarea){max-width:100%;background-color:#0a1424;color:var(--dh-text);border-color:var(--dh-line-strong);border-radius:10px}
.app-shell :is(.button,.btn,button.primary,.primary-button){border-radius:11px;transition:transform .18s var(--dh-ease),box-shadow .18s var(--dh-ease),background .18s var(--dh-ease)}
.app-shell :is(.button.primary,.btn-primary,button.primary,.primary-button){background:linear-gradient(135deg,#4d8ff5,#4ac9dc);border-color:transparent;color:#061322;box-shadow:0 8px 22px rgba(70,155,240,.18);font-weight:750}
.app-shell :is(.button.primary,.btn-primary,button.primary,.primary-button):hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(70,155,240,.24)}
.app-shell :is(.button.ghost,.btn-ghost,.secondary-button){border-color:var(--dh-line-strong);background:rgba(255,255,255,.025);color:var(--dh-text)}
.app-shell :is(table,th,td){border-color:var(--dh-line)}
.app-shell :is(th){color:#b6c8e2}
.app-shell :is(.badge,.pill,.tag){border-color:var(--dh-line-strong)}
.app-shell .connection-pill{border-color:rgba(88,221,176,.2);background:rgba(88,221,176,.07)}
/* Public landing page: retain existing content and grid; refine its surfaces and hierarchy. */
body:not(.app-shell) :is(header,nav){border-color:var(--dh-line)}
body:not(.app-shell) :is(.dh-hero,.hero){isolation:isolate}
body:not(.app-shell) :is(.dh-hero h1,.hero h1,.dh-section-intro h2){text-wrap:balance;letter-spacing:-.045em}
body:not(.app-shell) :is(.dh-hero p,.hero p,.dh-section-intro p){color:#a8b8d0}
body:not(.app-shell) :is(.dh-showcase-window,.showcase-window,.feature-card,.feature,.card,.preview-card){
 border-color:var(--dh-line);box-shadow:0 22px 70px rgba(0,0,0,.27),0 0 0 1px rgba(91,156,255,.025);
}
body:not(.app-shell) :is(.dh-showcase-window,.showcase-window){background:#0a1220}
body:not(.app-shell) :is(a.button,a.btn,button,.cta){transition:transform .18s var(--dh-ease),box-shadow .18s var(--dh-ease),border-color .18s var(--dh-ease)}
body:not(.app-shell) :is(a.button,a.btn,.cta-primary){border-radius:12px}
body:not(.app-shell) :is(.dh-hero-foot span,.dh-kicker span){border-color:var(--dh-line);background:rgba(255,255,255,.025)}
/* Platform owner panel (its existing markup is independent of the server dashboard). */
body:has(.app) .app{background:transparent}
body:has(.app) .side{background:linear-gradient(180deg,rgba(12,20,35,.98),rgba(8,13,24,.98));border-color:var(--dh-line)}
body:has(.app) .top{background:rgba(8,13,24,.88);border-color:var(--dh-line);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
body:has(.app) :is(.owner-card,.stat,.stat-card,.panel,.card,.table-wrap,.chart-card,.section-card){background:linear-gradient(145deg,rgba(18,31,51,.92),rgba(12,21,36,.94));border-color:var(--dh-line);border-radius:var(--dh-radius)}
body:has(.app) .nav button.active{background:linear-gradient(90deg,rgba(91,156,255,.18),rgba(98,227,242,.045));border-color:rgba(91,156,255,.28);box-shadow:inset 2px 0 0 var(--dh-blue)}
body:has(.app) :is(input,select,textarea){background:#0a1424;border-color:var(--dh-line-strong);color:var(--dh-text);max-width:100%}
body:has(.app) :is(button,.btn,.button){transition:background .18s var(--dh-ease),border-color .18s var(--dh-ease),transform .18s var(--dh-ease)}
body:has(.app) :is(button.primary,.btn-primary,.primary){background:linear-gradient(135deg,#4d8ff5,#4ac9dc);color:#061322;border-color:transparent}
body:has(.app) :is(table,th,td){border-color:var(--dh-line)}
/* Responsive guardrails: never force page-wide horizontal scrolling; preserve existing navigation behavior. */
img,svg,video,canvas{max-width:100%}
.app-shell .app-body,.app-shell .workspace,.app-shell #page,.app-shell .page,.app-shell .content{min-width:0}
.app-shell :is(.grid,.stats-grid,.stat-grid,.cards-grid,.dashboard-grid){min-width:0}
@media(min-width:1200px){
 .app-shell .workspace{min-width:0}
}
@media(min-width:761px) and (max-width:1100px){
 .app-shell .sidebar{width:220px;min-width:220px}
 .app-shell .workspace{padding-left:clamp(16px,2.4vw,28px);padding-right:clamp(16px,2.4vw,28px)}
 body:has(.app) .app{grid-template-columns:228px minmax(0,1fr)}
 body:has(.app) .top{padding-left:20px;padding-right:20px}
 body:has(.app) .main{min-width:0}
}
@media(max-width:760px){
 .app-shell .app-topbar{gap:8px;padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
 .app-shell .server-switch{min-width:0;max-width:48vw}
 .app-shell .server-switch select{min-width:0;max-width:100%}
 .app-shell .top-actions{gap:6px;min-width:0}
 .app-shell .workspace{padding-left:14px;padding-right:14px;padding-bottom:calc(20px + env(safe-area-inset-bottom))}
 .app-shell :is(.card,.panel,.stat-card,.settings-card,.feature-card,.module-card,.section-card,.guild-card,.server-card,.overview-card){border-radius:15px}
 .app-shell :is(table){display:block;max-width:100%;overflow-x:auto}
 body:has(.app) .app{grid-template-columns:minmax(0,1fr)}
 body:has(.app) .side{width:min(86vw,300px);max-width:calc(100vw - 36px)}
 body:has(.app) .top{padding-left:14px;padding-right:14px}
 body:has(.app) .top h1{font-size:18px}
 body:has(.app) .main{min-width:0;overflow-x:clip}
 body:has(.app) :is(.content,.page,.section,.grid){min-width:0;max-width:100%}
 body:has(.app) :is(table){display:block;max-width:100%;overflow-x:auto}
}
@media(max-width:420px){
 .app-shell .dxg-logo img{max-width:118px}
 .app-shell .server-label{display:none}
 .app-shell .connection-pill{font-size:9px;padding:5px 7px}
 .app-shell .workspace{padding-left:11px;padding-right:11px}
}

/* DEATH HUB global motion system */
@keyframes dhCharReveal{from{opacity:0;transform:translateY(.12em)}to{opacity:1;transform:translateY(0)}}
@keyframes dhCursorBlink{0%,48%{opacity:1}50%,100%{opacity:0}}
@keyframes dhAmbientFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-9px,0)}}
@keyframes dhPageWash{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
.dh-typewriter{position:relative}
.dh-typewriter .dh-type-char{display:inline-block;opacity:0;animation:dhCharReveal .24s cubic-bezier(.16,.72,.2,1) both;animation-delay:calc(var(--dh-char-index)*16ms)}
.dh-typewriter .dh-type-space{white-space:pre}
.dh-type-start.dh-typewriter::after{content:"";display:inline-block;height:.82em;border-right:2px solid currentColor;margin-left:.08em;vertical-align:-.04em;animation:dhCursorBlink .75s step-end infinite;animation-delay:min(1.8s,calc(var(--dh-char-count)*16ms))}
.dh-type-done.dh-typewriter .dh-type-char{opacity:1;transform:none;filter:none;animation:none}
.dh-type-done.dh-typewriter::after{display:none}
.dh-type-pending.dh-typewriter .dh-type-char{opacity:0;animation:none}
@keyframes dhPageWash{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
.dh-revealed{animation:dhPageWash .38s cubic-bezier(.2,.75,.25,1) both}
main section,main article,.public-section,.feature-showcase,.app-body>main{transition:opacity .55s,transform .55s}
.public-nav a,nav a,.app-topbar a,.sidebar a{transition:color .24s,background-color .24s,transform .24s,border-color .24s}
button,.button,a.button,[role=button]{transition:transform .24s cubic-bezier(.2,.75,.25,1),filter .24s,box-shadow .24s}
button:hover,.button:hover,a.button:hover,[role=button]:hover{filter:brightness(1.08)}
.public-nav a:hover,nav a:hover{transform:translateY(-2px)}
.app-shell .workspace{animation:dhPageWash .55s cubic-bezier(.2,.75,.25,1) both}
@media(prefers-reduced-motion:reduce){
 .dh-typewriter .dh-type-char,.dh-type-start.dh-typewriter::after,.dh-revealed,.app-shell .workspace{animation:none!important;opacity:1!important;transform:none!important;filter:none!important}
 .dh-typewriter .dh-type-char{display:inline!important}
 *{scroll-behavior:auto!important;transition-duration:.01ms!important}
}
/* Heading spacing + public hero collision guard (2026-10-18).
   Keep animated character spans inline so real whitespace participates in normal
   line layout and headings can wrap naturally. */
.dh-typewriter .dh-type-char{display:inline;white-space:normal}
.dh-typewriter .dh-type-space{display:inline;white-space:pre-wrap;min-width:0}
body:not(.app-shell) .dh-home-refresh .dh-hero{
  grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  gap:clamp(36px,5vw,72px);
}
body:not(.app-shell) .dh-home-refresh .dh-hero-copy{min-width:0;max-width:100%}
body:not(.app-shell) .dh-home-refresh .dh-hero-copy h1{
  max-width:100%;font-size:clamp(42px,4.6vw,62px);
  line-height:1.04;letter-spacing:-.04em;overflow-wrap:normal;
}
body:not(.app-shell) .dh-home-refresh .dh-showcase-window{
  min-width:0;max-width:100%;justify-self:stretch;
}
@media(max-width:900px){
  body:not(.app-shell) .dh-home-refresh .dh-hero{grid-template-columns:minmax(0,1fr);gap:32px}
  body:not(.app-shell) .dh-home-refresh .dh-hero-copy h1{font-size:clamp(42px,8vw,62px)}
}
@media(prefers-reduced-motion:reduce){
  .dh-typewriter .dh-type-char{display:inline!important;white-space:normal!important}
}