/* Market Pulse AI — shared design tokens & utility classes (v2: colour + depth pass) */

:root{
  --bg:#05070a;
  --bg-2:#090c11;
  --surface:rgba(255,255,255,0.05);
  --surface-2:rgba(255,255,255,0.085);
  --border:rgba(255,255,255,0.10);
  --border-2:rgba(255,255,255,0.20);
  --text-1:#f3f5f9;
  --text-2:#99a6ba;
  --text-3:#606b7d;

  --green:#1fe08a;
  --green-2:#0fb87a;
  --green-dim:rgba(31,224,138,0.14);
  --green-line:rgba(31,224,138,0.45);
  --green-glow:rgba(31,224,138,0.35);

  --red:#ff4d5e;
  --red-2:#e6293d;
  --red-dim:rgba(255,77,94,0.14);
  --red-line:rgba(255,77,94,0.45);
  --red-glow:rgba(255,77,94,0.32);

  --amber:#ffb020;
  --amber-2:#f0a202;
  --amber-dim:rgba(255,176,32,0.16);
  --amber-line:rgba(255,176,32,0.45);
  --amber-glow:rgba(255,176,32,0.3);

  --blue:#8b9bff;
  --blue-2:#6c7cf0;
  --blue-dim:rgba(139,155,255,0.16);
  --blue-line:rgba(139,155,255,0.45);
  --blue-glow:rgba(139,155,255,0.3);

  --purple:#d391ff;
  --purple-2:#b366e8;
  --cyan:#34e2e2;

  --radius-s:8px;
  --radius-m:14px;
  --radius-l:20px;
  --radius-xl:26px;

  /* layered "3D" elevation: bright bevel edge + ambient lift + contact shadow */
  --shadow-card:
    0 1px 0 rgba(255,255,255,0.09) inset,
    0 0 0 1px rgba(255,255,255,0.02) inset,
    0 2px 6px rgba(0,0,0,0.35),
    0 26px 50px -22px rgba(0,0,0,0.85);
  --shadow-card-hover:
    0 1px 0 rgba(255,255,255,0.14) inset,
    0 0 0 1px rgba(255,255,255,0.03) inset,
    0 4px 10px rgba(0,0,0,0.4),
    0 32px 60px -20px rgba(0,0,0,0.9);
  --shadow-pop: 0 1px 0 rgba(255,255,255,0.18) inset, 0 10px 24px -8px rgba(0,0,0,0.6);

  --font-display:'Space Grotesk',sans-serif;
  --font-body:'IBM Plex Sans','IBM Plex Sans Bengali',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
}

*{box-sizing:border-box;}
html,body{background:var(--bg); color:var(--text-1); font-family:var(--font-body);}
body{-webkit-font-smoothing:antialiased; margin:0;}
a{color:inherit; text-decoration:none;}
button{font-family:var(--font-body);}
::selection{background:rgba(139,155,255,0.4);}

.bg-app{background:
  radial-gradient(1100px 480px at 10% -12%, rgba(139,155,255,0.16), transparent 58%),
  radial-gradient(900px 460px at 100% -6%, rgba(31,224,138,0.11), transparent 55%),
  radial-gradient(800px 420px at 55% 8%, rgba(211,145,255,0.07), transparent 60%),
  var(--bg);
}

.font-display{font-family:var(--font-display);}
.font-mono{font-family:var(--font-mono);}
.bn{font-family:'IBM Plex Sans Bengali',var(--font-body);}

.text-1{color:var(--text-1);}
.text-2{color:var(--text-2);}
.text-3{color:var(--text-3);}
.text-green{color:var(--green);}
.text-red{color:var(--red);}
.text-amber{color:var(--amber);}
.text-blue{color:var(--blue);}
.text-purple{color:var(--purple);}

/* cards — layered gradient + bevel + ambient shadow for a raised, "3D" glass feel */
.glass-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.065), rgba(255,255,255,0.012) 55%, rgba(255,255,255,0.02) 100%),
    linear-gradient(180deg, var(--bg-2), var(--bg-2));
  border:1px solid var(--border);
  border-radius:var(--radius-l);
  box-shadow:var(--shadow-card);
  position:relative;
}
.glass-card-strong{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.11), rgba(255,255,255,0.02) 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg-2));
  border:1px solid var(--border-2);
  border-radius:var(--radius-l);
  box-shadow:var(--shadow-card-hover);
}
.hairline{border:1px solid var(--border);}
.hairline-top{border-top:1px solid var(--border);}
.hairline-bottom{border-bottom:1px solid var(--border);}

/* pills / badges — brighter, with a small glow + embossed edge for pop */
.pill{display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; font-size:12px; font-weight:700; letter-spacing:0.01em; white-space:nowrap; box-shadow:0 1px 0 rgba(255,255,255,0.12) inset;}
.pill-green{background:linear-gradient(180deg, var(--green-dim), rgba(31,224,138,0.05)); color:var(--green); border:1px solid var(--green-line); text-shadow:0 0 18px var(--green-glow);}
.pill-red{background:linear-gradient(180deg, var(--red-dim), rgba(255,77,94,0.05)); color:var(--red); border:1px solid var(--red-line); text-shadow:0 0 18px var(--red-glow);}
.pill-amber{background:linear-gradient(180deg, var(--amber-dim), rgba(255,176,32,0.05)); color:var(--amber); border:1px solid var(--amber-line); text-shadow:0 0 18px var(--amber-glow);}
.pill-blue{background:linear-gradient(180deg, var(--blue-dim), rgba(139,155,255,0.05)); color:var(--blue); border:1px solid var(--blue-line); text-shadow:0 0 18px var(--blue-glow);}
.pill-neutral{background:rgba(255,255,255,0.07); color:var(--text-2); border:1px solid var(--border);}
.pill-outline{background:transparent; color:var(--text-2); border:1px solid var(--border-2);}

.dot{width:7px; height:7px; border-radius:50%; display:inline-block; flex:none;}
.dot-green{background:var(--green); box-shadow:0 0 12px 1px var(--green-glow);}
.dot-red{background:var(--red); box-shadow:0 0 12px 1px var(--red-glow);}
.dot-amber{background:var(--amber); box-shadow:0 0 12px 1px var(--amber-glow);}
.dot-gray{background:#4a5568;}

/* buttons — embossed / raised for a tactile 3D press feel */
.btn{font-weight:700; font-size:13px; border-radius:11px; padding:10px 18px; border:1px solid var(--border-2); cursor:pointer; background:linear-gradient(180deg, var(--surface-2), rgba(255,255,255,0.02)); color:var(--text-1); box-shadow:var(--shadow-pop);}
.btn-primary{background:linear-gradient(180deg, #ffffff, #d8dcE6); color:#05070a; border:1px solid var(--text-1);}
.btn-ghost{background:transparent; border:1px solid var(--border); color:var(--text-2); box-shadow:none;}
.btn-chip{font-size:12px; padding:8px 15px; border-radius:999px; border:1px solid var(--border-2); background:linear-gradient(180deg, var(--surface), rgba(255,255,255,0.01)); color:var(--text-2); font-weight:700; cursor:pointer; box-shadow:0 1px 0 rgba(255,255,255,0.08) inset; transition:transform .12s ease, box-shadow .12s ease;}
.btn-chip:hover{transform:translateY(-1px);}
.btn-chip.is-active{background:linear-gradient(180deg,#ffffff,#d3d8e4); color:#05070a; border-color:var(--text-1); box-shadow:0 4px 14px -4px rgba(255,255,255,0.35);}
.icon-btn{width:36px; height:36px; border-radius:10px; border:1px solid var(--border); background:var(--surface); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text-2);}

/* tables */
.table{width:100%; border-collapse:collapse; font-size:13px;}
.table th{text-align:left; color:var(--text-3); font-weight:700; font-size:10.5px; text-transform:uppercase; letter-spacing:0.06em; padding:0 14px 10px 14px;}
.table td{padding:13px 14px; border-top:1px solid var(--border);}
.table tr td:first-child, .table th:first-child{padding-left:4px;}

/* confidence meter — colourful gradient fill */
.meter-track{height:7px; border-radius:99px; background:rgba(255,255,255,0.09); overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,0.4) inset;}
.meter-fill{height:100%; border-radius:99px; box-shadow:0 0 10px 0 rgba(255,255,255,0.25);}

/* misc */
.scrollx{overflow-x:auto;}
.scrollx::-webkit-scrollbar{height:6px;}
.scrollx::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.16); border-radius:99px;}
.demo-banner{background:linear-gradient(90deg, rgba(255,176,32,0.16), rgba(255,176,32,0.03)); border:1px solid var(--amber-line); border-radius:var(--radius-m); color:var(--amber); box-shadow:0 1px 0 rgba(255,255,255,0.08) inset;}
.kbd{font-family:var(--font-mono); font-size:11px; background:rgba(255,255,255,0.09); border:1px solid var(--border-2); border-radius:5px; padding:1px 6px;}
.sparkline-up{color:var(--green);}
.sparkline-down{color:var(--red);}

/* 3D hover lift for cards */
.card-hover{transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;}
.card-hover:hover{transform:translateY(-3px); border-color:var(--border-2); box-shadow:var(--shadow-card-hover);}

/* glow utilities for colourful pop on key numbers/icons */
.glow-green{text-shadow:0 0 22px var(--green-glow);}
.glow-red{text-shadow:0 0 22px var(--red-glow);}
.glow-blue{text-shadow:0 0 22px var(--blue-glow);}
.glow-amber{text-shadow:0 0 22px var(--amber-glow);}

/* ---------------------------------------------------------------- live ticker tape */
.ticker-wrap{
  display:flex; align-items:center; gap:16px;
  background:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.15));
  padding:9px 20px;
  box-shadow:0 1px 0 rgba(255,255,255,0.06) inset;
}
.ticker-live{
  display:flex; align-items:center; gap:7px; flex:none;
  font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:0.08em;
  color:var(--red); text-transform:uppercase; padding-right:14px; border-right:1px solid var(--border);
}
.ticker-pulse{animation:tickerPulse 1.4s ease-in-out infinite;}
@keyframes tickerPulse{
  0%,100%{opacity:1; transform:scale(1);}
  50%{opacity:0.35; transform:scale(0.72);}
}
.ticker-track-wrap{overflow:hidden; flex:1; mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); -webkit-mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);}
.ticker-track{display:flex; align-items:center; width:max-content; animation:tickerScroll 38s linear infinite;}
@keyframes tickerScroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}
.ticker-item{display:flex; align-items:center; gap:8px; padding:0 22px; white-space:nowrap; border-right:1px solid var(--border);}
.ticker-label{font-size:11px; font-weight:700; color:var(--text-2); letter-spacing:0.03em;}
.ticker-val{font-size:12px; color:var(--text-1); font-weight:600;}
.ticker-chg{font-size:11px; font-weight:700;}