@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
  --bg: #000000;
  --surface: #0c0c0c;
  --card: #111111;
  --card-hover: #181818;
  --border: rgba(255,255,255,0.07);
  --border-bright: rgba(255,255,255,0.12);
  --accent: #00D4FF;
  --accent-dim: rgba(0,212,255,0.10);
  --accent-glow: rgba(0,212,255,0.20);
  --accent2: #7B61FF;
  --red: #FF4466;
  --red-dim: rgba(255,68,102,0.12);
  --green: #00E676;
  --text: #F5F5F7;
  --text-muted: #555566;
  --text-sub: #888899;
  --buy: #00E676;
  --sell: #FF4466;
  --mono: "JetBrains Mono", "Courier New", monospace;
  --sans: "Outfit", "Helvetica Neue", sans-serif;
  --display: "Space Grotesk", "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { overflow: hidden; height: 100%; width: 100%; }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: fixed;
  top: 0; left: 0;
  -webkit-font-smoothing: antialiased;
}

/* Subtle noise grain */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  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.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1000;
  opacity: 0.5;
}

/* Glow top-left ambient */
body::after {
  content: "";
  position: fixed;
  top: -120px; left: -120px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(0,212,255,0.06) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

/* WRAPPER */
.wrapper {
  display: flex;
  width: 500vw;
  height: 100vh;
  transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

/* PAGE */
.page {
  width: 100vw;
  min-width: 100vw;
  max-width: 100vw;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 16px calc(env(safe-area-inset-bottom, 0px) + 84px);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.page::-webkit-scrollbar { display: none; }

/* HEADER */
h1 {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.3px;
  margin-bottom: 18px;
  text-align: center;
  color: var(--text);
}

h3 {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}

/* CARD / BOX */
.box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 12px;
  transition: background 0.2s, border-color 0.2s;
}
.box:focus-within {
  border-color: var(--border-bright);
}

/* SUMMARY ROWS */
.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  color: var(--text-sub);
  font-family: var(--sans);
  font-weight: 400;
}
.row:last-child { border-bottom: none; }
.row span {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

/* PRICE BOX */
.priceBox {
  background: linear-gradient(135deg, #0a0a0a 0%, #111118 100%);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 18px;
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
}
.priceBox::before {
  content: "";
  position: absolute;
  top: -50px; right: -50px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(0,212,255,0.12) 0%, transparent 65%);
  pointer-events: none;
}
.priceBox > :first-child {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
  display: block;
}

.priceGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 10px;
}

.priceItem {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  padding: 8px 4px;
  border-radius: 10px;
  text-align: center;
  font-size: 10px;
  color: var(--text-sub);
  font-family: var(--mono);
  line-height: 1.5;
  transition: background 0.2s, border-color 0.2s;
}
.priceItem:hover {
  background: rgba(0,212,255,0.06);
  border-color: rgba(0,212,255,0.2);
  color: var(--accent);
}

.updateBtn {
  display: block;
  margin-top: 10px;
  margin-left: auto;
  padding: 7px 16px;
  background: var(--accent);
  color: #000;
  border: none;
  border-radius: 10px;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
}
.updateBtn:hover { opacity: 0.85; transform: translateY(-1px); }
.updateBtn:active { transform: translateY(0); opacity: 1; }

/* FORM INPUTS */
label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
  margin-bottom: 6px;
  margin-top: 4px;
}

input, select {
  width: 100%;
  padding: 13px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 14px;
  margin-bottom: 12px;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.2s, background 0.2s;
  outline: none;
}
input:focus, select:focus {
  border-color: rgba(0,212,255,0.5);
  background: rgba(0,212,255,0.04);
}
input::placeholder { color: var(--text-muted); }
select option { background: #111111; color: var(--text); }

/* BUTTONS */
button {
  padding: 11px 16px;
  border: none;
  border-radius: 12px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
  letter-spacing: 0.01em;
}
button:hover { opacity: 0.85; transform: translateY(-1px); }
button:active { transform: translateY(0); opacity: 1; }

.green {
  background: linear-gradient(135deg, #00D4FF, #7B61FF);
  color: #000;
  width: 100%;
  padding: 14px;
  font-size: 14px;
  font-weight: 700;
  margin-top: 4px;
}

.red {
  background: transparent;
  color: var(--red);
  border: 1px solid rgba(255,68,102,0.3);
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 8px;
}
.red:hover { background: var(--red-dim); opacity: 1; }

/* LIST ITEMS */
.list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 12px;
  gap: 8px;
}
.list:last-child { border-bottom: none; }
.buyItem { color: var(--buy); }
.sellItem { color: var(--sell); }

/* SUMMARY */
.summary {
  background: var(--accent-dim);
  border: 1px solid rgba(0,212,255,0.2);
  border-radius: 16px;
  padding: 18px;
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--accent);
  line-height: 1.8;
}

/* ROW FLEX */
.rowFlex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-sub);
  gap: 8px;
  flex-wrap: nowrap;
}
.rowFlex:last-child { border-bottom: none; }
.rowFlex .red { flex-shrink: 0; white-space: nowrap; }

/* BOTTOM NAV */
.nav {
  position: fixed;
  bottom: 0; left: 0;
  width: 100%;
  background: rgba(0,0,0,0.88);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  display: grid;
  grid-template-columns: repeat(5,1fr);
  align-items: center;
  padding: 8px 4px calc(8px + env(safe-area-inset-bottom, 16px));
  border-top: 1px solid var(--border);
  z-index: 10;
}

.nav button {
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 4px;
  border-radius: 12px;
  transform: none;
  transition: color 0.2s, background 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.nav button:hover {
  color: var(--accent);
  background: var(--accent-dim);
  opacity: 1;
  transform: none;
}
.navActive {
  color: var(--accent) !important;
  background: var(--accent-dim) !important;
}
.navIcon { font-size: 18px; display: block; }
.navTxt { font-size: 9px; display: block; }

/* PAGE ANIMATION */
.page > * {
  animation: fadeUp 0.3s ease both;
}
.page > *:nth-child(1) { animation-delay: 0.02s; }
.page > *:nth-child(2) { animation-delay: 0.06s; }
.page > *:nth-child(3) { animation-delay: 0.10s; }
.page > *:nth-child(4) { animation-delay: 0.14s; }
.page > *:nth-child(5) { animation-delay: 0.18s; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 400px) { h1 { font-size: 19px; } }

/* COLLAPSIBLE */
.stockGrid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.stockCard {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  transition: background 0.2s;
}
.collapseHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 16px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  user-select: none;
  transition: background 0.2s;
}
.collapseHeader:hover { background: rgba(0,212,255,0.05); }
.collapseArrow { font-size: 10px; color: var(--text-muted); transition: transform 0.2s; }
.collapseBody { padding: 0 16px; border-top: 1px solid var(--border); }

/* TYPE SELECTOR */
.typeSelector {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
  background: rgba(255,255,255,0.04);
  border-radius: 14px;
  padding: 4px;
}
.typeSelector button {
  flex: 1;
  background: transparent;
  color: var(--text-muted);
  border: none;
  border-radius: 10px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  padding: 10px 6px;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.03em;
}
.typeSelector button:hover {
  color: var(--text);
  background: rgba(255,255,255,0.06);
  opacity: 1;
  transform: none;
}
.selActive {
  background: linear-gradient(135deg, #00D4FF, #7B61FF) !important;
  color: #000 !important;
  font-weight: 700 !important;
}

/* AUTOCOMPLETE */
#stockInput { text-transform: uppercase; }
#stockSuggest div:last-child { border-bottom: none !important; }

/* LOGIN */
.loginScreen { position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:9999;padding:20px; }
.loginCard {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: 40px 24px;
  width: 100%;
  max-width: 360px;
  text-align: center;
  box-shadow: 0 0 0 1px rgba(0,212,255,0.08), 0 24px 64px rgba(0,0,0,0.6);
}
.loginLogo { font-size: 44px; margin-bottom: 12px; }
.loginTitle { font-family: var(--display); font-size: 24px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.loginSub { font-family: var(--mono); font-size: 11px; color: var(--text-muted); margin-bottom: 24px; }
.loginTabs { display:flex;gap:4px;background:rgba(255,255,255,0.04);border-radius:14px;padding:4px;margin-bottom:18px; }
.loginTabBtn { flex:1;background:transparent;color:var(--text-muted);border:none;border-radius:10px;font-family:var(--mono);font-size:11px;font-weight:500;padding:10px 6px;cursor:pointer;transition:all 0.2s; }
.loginTabBtn:hover { background:rgba(255,255,255,0.06);opacity:1;transform:none; }
.loginTabActive { background:linear-gradient(135deg,#00D4FF,#7B61FF)!important;color:#000!important;font-weight:700!important; }
.loginInput { width:100%;padding:13px 14px;background:rgba(255,255,255,0.05);border:1px solid var(--border);border-radius:12px;color:var(--text);font-family:var(--mono);font-size:13px;margin-bottom:10px;outline:none;transition:border-color 0.2s;display:block; }
.loginInput:focus { border-color:rgba(0,212,255,0.5); }
.loginInput::placeholder { color:var(--text-muted); }
.loginBtn { display:block;width:100%;padding:14px 20px;background:linear-gradient(135deg,#00D4FF,#7B61FF);color:#000;border:none;border-radius:12px;font-family:var(--display);font-size:14px;font-weight:700;cursor:pointer;transition:all 0.2s;margin-bottom:10px; }
.loginBtn:hover { opacity:0.88;transform:translateY(-1px); }
.forgotLink { font-family:var(--mono);font-size:11px;color:var(--text-muted);cursor:pointer;text-decoration:underline;margin-top:4px; }
.forgotLink:hover { color:var(--accent); }

/* CARD BOX */
.card-box { background:var(--card);border:1px solid var(--border);border-radius:20px;padding:18px;margin-bottom:12px; }
.boxLabel { font-family:var(--mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent);margin-bottom:14px; }

/* STAT CARDS */
.statCard { background:rgba(255,255,255,0.03);border:1px solid var(--border);border-radius:12px;padding:12px; }
.statLabel { font-family:var(--mono);font-size:10px;color:var(--text-muted);margin-bottom:4px; }
.statVal { font-family:var(--mono);font-size:13px;font-weight:600;color:var(--text); }

/* FEE ROWS */
.feeRow { display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid rgba(255,255,255,0.05); }
.feeLabel { font-family:var(--mono);font-size:12px;color:var(--text-sub);flex:1; }
.feeInputWrap { display:flex;align-items:center;gap:4px; }
.feeInputWrap input { width:72px;padding:7px 10px;background:rgba(255,255,255,0.06);border:1px solid var(--border);border-radius:8px;color:var(--text);font-family:var(--mono);font-size:12px;text-align:right;outline:none;margin-bottom:0; }
.feeInputWrap input:focus { border-color:rgba(0,212,255,0.5); }
.feePct { font-family:var(--mono);font-size:11px;color:var(--text-muted); }

/* PULL INDICATOR */
#pullIndicator { color:var(--accent);font-family:var(--mono);font-size:12px;display:flex;align-items:center;justify-content:center;transition:height 0.2s; }

/* CHART STRIP DOTS */
.chartDot { width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.15);cursor:pointer;transition:all 0.3s; }
.chartDot.active { background:var(--accent);width:18px;border-radius:3px; }
#chartStrip::-webkit-scrollbar { display:none; }

/* LANG BUTTON */
.langBtn { background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:10px;color:var(--text-muted);font-family:var(--mono);font-size:12px;padding:10px;cursor:pointer;transition:all 0.2s; }
.langBtn.langActive { background:var(--accent-dim);color:var(--accent);border-color:rgba(0,212,255,0.3); }

/* WRAPPER & PAGE OVERRIDE */
.wrapper { width:500vw!important; }
.page { width:100vw!important;min-width:100vw!important;max-width:100vw!important; }
/* BOTTOM SHEET ANIMATION */
@keyframes slideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
#summaryModal > div {
  animation: slideUp 0.32s cubic-bezier(0.32,0.72,0,1) both;
}

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}