:root{
    --bg:#0b0b0f;
    --card:#14141a;
    --text:#eaeaea;
    --muted:#bdbdbd;
    --accent:#ff7a00;
    --accent-soft:#ff7a00aa;
}

html,body{height:100%}

body{
    margin:0;
    background:
            url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800' preserveAspectRatio='none'>\
  <defs><radialGradient id='g' cx='0.2' cy='0.15' r='0.8'>\
    <stop stop-color='%23ff7a00' stop-opacity='.15' offset='0'/>\
    <stop stop-opacity='0' offset='1'/>\
  </radialGradient></defs>\
  <rect width='100%' height='100%' fill='url(%23g)'/>\
</svg>") center/cover no-repeat,
            #0b0b0f;
    color:var(--text);
    font:16px/1.55 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    display:grid; place-items:center;
}

img{
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

/* Elevate main content above overlays */
body.theme-orange-neon > .max-w-7xl{ position:relative; z-index:1; }


/* Neon framing for main container */
body.theme-orange-neon > .max-w-7xl{
    border-radius:20px;
    border: 2px solid var(--accent);
    box-shadow: 0 0 40px var(--accent-soft);
    background: linear-gradient(180deg, #14141a, #0f0f14);
    padding: clamp(16px, 2vw, 24px);
}

/* Variant: Transparent container (no fill, only neon frame) */


/* Panels & cards (re-use existing rounded-2xl etc.) */
body.theme-orange-neon .rounded-2xl{
    background: linear-gradient(180deg, #191922, #101017);
    border:2px solid #ffffff18;
    box-shadow: inset 0 0 40px #00000066, 0 0 30px #00000030;
}



/* Charts / canvases */
body.theme-orange-neon canvas{
    background:#0f0f14;
    border-radius:16px;
    border:1px solid #ffffff14;
    box-shadow: inset 0 0 30px #00000060;
}



/* Inputs & buttons */
body.theme-orange-neon input, body.theme-orange-neon select {
    background:#0f0f14 !important; color:#f0f0f0 !important; border:1px solid #ffffff22 !important;
}

body.theme-orange-neon .btn-primary{
    background:var(--accent); color:#111 !important;
    box-shadow:0 10px 26px -8px var(--accent-soft), 0 0 0 2px #ffffff10 inset;
}


/* Toggle button styling */
.mode-toggle{
    display:inline-flex; align-items:center; gap:8px;
    border:1px solid #ffffff22; border-radius:999px; padding:6px 12px;
    background:#ffffff0a; color:#fff; cursor:pointer; user-select:none;
    transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.mode-toggle:hover{ transform:translateY(-1px); box-shadow:0 0 18px var(--accent-soft); }

.mode-dot{ width:10px; height:10px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent); }

.mode-label{ font-size:13px; opacity:.9; }

/* Center the main container vertically & horizontally on the page */
body.theme-orange-neon.page-centered{
    min-height: 100svh; /* modern mobile-safe viewport unit */
    min-height: 100vh;  /* fallback */
    display: grid;
    place-items: center;
    padding: clamp(12px, 2vh, 24px);
}
/* Ensure our main container stays above overlays and is centered cleanly */
body.theme-orange-neon.page-centered > .max-w-7xl{
    margin: 0; /* override auto margins so grid centering handles it */
}