/* =========================================================
   DESIGN SYSTEM
========================================================= */
:root{
  --bg:#0b1020;
  --card:#0f1733;
  --card-glow:#1a2550;
  --text:#e8eefc;
  --muted:#9fb0e3;
  --good:#22c55e;
  --bad:#ef4444;
  --info:#60a5fa;
  --radius:20px;
}

/* =========================================================
   RESET
========================================================= */
*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--text);
  line-height:1.6;

  /* Ambient Premium Background */
  background:
    radial-gradient(
      900px 600px at 50% -10%,
      rgba(96,165,250,0.18),
      transparent 60%
    ),
    radial-gradient(
      600px 400px at 15% 0%,
      rgba(37,99,235,0.25),
      transparent 70%
    ),
    linear-gradient(
      180deg,
      #101a3a 0%,
      #0b1020 60%,
      #080c18 100%
    );
}

/* =========================================================
   CONTAINER
========================================================= */
.container{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:40px 20px 60px;
}

/* =========================================================
   TYPOGRAPHY
========================================================= */
h1{
  font-size:1.9rem;
  margin:0 0 10px 0;
  letter-spacing:.5px;
}

h2{
  font-size:1.25rem;
  margin:0 0 16px 0;
  color:#dbe5ff;
}

.subtitle{
  color:var(--muted);
  font-size:.95rem;
}

a{
  color:var(--info);
  text-decoration:none;
}

a:hover{
  text-decoration:underline;
}

/* =========================================================
   CARDS (Premium Glow)
========================================================= */
.card{
  position:relative;
  background:linear-gradient(
    180deg,
    rgba(26,37,80,0.65),
    rgba(15,23,51,0.85)
  );

  border:1px solid rgba(255,255,255,0.08);
  border-radius:var(--radius);
  padding:26px;
  margin-bottom:26px;

  box-shadow:
    0 15px 40px rgba(0,0,0,.5),
    inset 0 0 40px rgba(37,99,235,0.05);
}

/* subtle top glow line */
.card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(96,165,250,.6),
    transparent
  );
}

/* =========================================================
   TABLE
========================================================= */
table{
  width:100%;
  border-collapse:collapse;
  border-radius:12px;
  overflow:hidden;
}

thead th{
  text-align:left;
  padding:14px;
  font-size:.85rem;
  font-weight:600;
  background:rgba(30,41,80,.9);
  color:#c9d8ff;
  border-bottom:1px solid rgba(255,255,255,.1);
}

tbody td{
  padding:14px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

tbody tr:hover{
  background:rgba(96,165,250,.05);
}

/* =========================================================
   STATUS COLORS
========================================================= */
.status.active{
  color:var(--good);
  font-weight:600;
}

.profit{
  color:var(--good);
}

.loss{
  color:var(--bad);
}

/* =========================================================
   MOBILE TRANSFORMATION
========================================================= */
@media (max-width:600px){

  html:not(.force-desktop) table,
  html:not(.force-desktop) thead,
  html:not(.force-desktop) tbody,
  html:not(.force-desktop) th,
  html:not(.force-desktop) td,
  html:not(.force-desktop) tr{
    display:block;
  }

  html:not(.force-desktop) thead{
    display:none;
  }

  html:not(.force-desktop) tbody tr{
    margin-bottom:16px;
    padding:14px;
    border-radius:14px;
    background:rgba(0,0,0,.35);
    border:1px solid rgba(255,255,255,.08);
  }

  html:not(.force-desktop) tbody td{
    border:none;
    padding:6px 0;
  }
}

/* =========================================================
   FORCE DESKTOP
========================================================= */
.force-desktop .container{
  max-width:1200px;
  width:100%;
  margin:0 auto;
}

/* =========================================================
   DESKTOP NOTICE
========================================================= */
.desktop-notice{
  position:fixed;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  width:90%;
  max-width:420px;
  background:rgba(20,30,60,.95);
  border:1px