/* ===========================================================================
   SENTINEL BRIDGE - Redesigned Terminal Stylesheet
   Deep space violet theme · Side-panel navigation · Mobile-first responsive
   =========================================================================== */

/* ─── Design Tokens ────────────────────────────────────────────────────────── */
:root {
    /* Background layers */
    --bg:           #06060b;
    --surface:      #0d0d18;
    --elevated:     #12121e;
    --elevated-2:   #191928;
    --glass:        rgba(12, 12, 22, 0.84);
    --card-bg:      rgba(255, 255, 255, 0.025);

    /* Borders */
    --border:       rgba(255, 255, 255, 0.055);
    --border-md:    rgba(255, 255, 255, 0.09);
    --border-hi:    rgba(255, 255, 255, 0.16);

    /* Primary accent - electric indigo/violet */
    --accent:       #7c6ef8;
    --accent-2:     #5b4de0;
    --accent-3:     #9d8fff;
    --accent-dim:   rgba(124, 110, 248, 0.13);
    --accent-glow:  rgba(124, 110, 248, 0.32);
    --accent-glow2: rgba(124, 110, 248, 0.08);
    --accent-text:  #b3abff;

    /* Secondary - cyan glow for live data */
    --cyan:         #22d3ee;
    --cyan-dim:     rgba(34, 211, 238, 0.10);
    --cyan-glow:    rgba(34, 211, 238, 0.18);

    /* Semantic */
    --profit:       #10d98a;
    --profit-dim:   rgba(16, 217, 138, 0.10);
    --profit-glow:  rgba(16, 217, 138, 0.22);
    --loss:         #f14f4f;
    --loss-dim:     rgba(241, 79, 79, 0.10);
    --warn:         #f59e0b;
    --warn-dim:     rgba(245, 158, 11, 0.10);

    /* Text - Brightened for daylight readability */
    --text:         #ffffff;
    --text-2:       #d4d0f0;
    --muted:        #8d87b0;
    --dim:          #504b6b;

    /* Sidebar */
    --sidebar-w:    220px;
    --sidebar-w-collapsed: 60px;
    --topbar-h:     54px;

    /* Radius & Transitions */
    --r-xs: 4px;
    --r-sm: 7px;
    --r-md: 11px;
    --r-lg: 15px;
    --r-xl: 20px;
    --t:      0.18s ease;
    --t-slow: 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    --t-spring: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Animation timing presets */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-spring:   cubic-bezier(0.175, 0.885, 0.32, 1.275);
}



/* ─── Reset ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body { width: 100%; height: 100%; }

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: var(--bg);
    background-image:
        radial-gradient(ellipse 1100px 700px at 8% -5%,   rgba(124, 110, 248, 0.07)  0%, transparent 65%),
        radial-gradient(ellipse 700px 500px  at 92% 110%, rgba(34,  211, 238, 0.04) 0%, transparent 60%),
        radial-gradient(ellipse 500px 400px  at 50% 60%,  rgba(91,  77,  224, 0.025)  0%, transparent 70%);
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* Noise texture overlay for depth */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
}

/* Selection color */
::selection {
    background: rgba(124, 110, 248, 0.35);
    color: #fff;
}
::-moz-selection {
    background: rgba(124, 110, 248, 0.35);
    color: #fff;
}

/* Scrollbar */
::-webkit-scrollbar              { width: 6px; height: 6px; }
::-webkit-scrollbar-track        { background: transparent; }
::-webkit-scrollbar-thumb        { background: rgba(124,110,248,0.18); border-radius: 6px; transition: background 0.3s; }
::-webkit-scrollbar-thumb:hover  { background: rgba(124,110,248,0.4); box-shadow: 0 0 8px rgba(124,110,248,0.3); }