/* ============================================================
   MANTAU REDESIGN — EXACT FIGMA TOKENS, COLORS & WEIGHTS
   Font: Helvetica Neue (Regular 400, Medium 500)
   Antialiased: subpixel matching Figma canvas rendering
   ============================================================ */


:root {
  /* Mantau type tokens — see DESIGN.md. Helvetica Neue (Apple) → Inter (web fallback) */
  --font-sans: 'Helvetica Neue', Inter, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: #0c0c0c;
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.2;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  overflow-x: hidden;
}

/* 375px Device Viewport Shell */
.app-container {
  width: 100%;
  max-width: 375px;
  min-height: 100vh;
  background-color: #0c0c0c;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 0 100px rgba(0, 0, 0, 0.95);
  padding-bottom: 110px;
}

/* Background Ambient Pattern from Figma - Feathered and Blended Smoothly */
.pattern-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 520px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 45%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 45%, rgba(0, 0, 0, 0) 100%);
}
.pattern-bg img {
  position: absolute;
  top: -190px;
  left: -270px;
  width: 650px;
  height: 745px;
  opacity: 0.9;
}

/* Status Bar / iPhone 13 Mini (Exact Figma 410:8984) */
.status-bar-mock {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 47px;
  overflow: hidden;
  pointer-events: none;
}

.status-bar-clock {
  position: absolute;
  left: 0;
  top: 0;
  width: 88px;
  height: 47px;
}

.status-bar-time {
  position: absolute;
  left: 21px;
  top: 21px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 17px;
  letter-spacing: -0.3px;
  color: #ffffff;
  white-space: nowrap;
}

.status-bar-indicators {
  position: absolute;
  right: 18.7px;
  top: 23px;
  display: flex;
  gap: 6.5px;
  align-items: center;
}

.indicator-signal {
  width: 19.971px;
  height: 12px;
  display: block;
}

.indicator-connection {
  width: 17px;
  height: 12.5px;
  display: block;
}

.indicator-battery {
  width: 27.33px;
  height: 13px;
  display: block;
}

/* Header */
.app-header {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  margin-top: 16px;
  margin-bottom: 24px;
  background: transparent;
}

.profile-greeting {
  display: flex;
  align-items: center;
  gap: 8px;
}

.profile-avatar-img {
  width: 36px;
  height: 36px;
  border-radius: 50px;
  object-fit: cover;
}

.greeting-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.greeting-text .salute {
  font-size: 12px;
  font-weight: 400;
  color: #a8a8a8;
  letter-spacing: -0.24px;
  line-height: 1.2;
}
.greeting-text .user-name {
  font-size: 14px;
  font-weight: 400;
  color: #ffffff;
  letter-spacing: -0.28px;
  line-height: 1.2;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-btn-round {
  background: #1a1a1a;
  border: 1px solid #262626;
  border-radius: 24px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 36px;
  height: 36px;
  transition: all 0.15s ease;
}
.search-btn-round:hover {
  background: #242424;
}

.bell-btn-round {
  width: 36px;
  height: 36px;
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

/* IHSG Section */
.ihsg-section {
  position: relative;
  z-index: 10;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 0 12px;
  width: 100%;
}

.ihsg-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ihsg-label-txt {
  font-size: 16px;
  font-weight: 400;
  color: #c1c1c1;
  letter-spacing: -0.32px;
  line-height: 1.2;
}

.ihsg-value-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ihsg-price-big {
  font-size: 32px;
  font-weight: 400;
  color: #ffffff;
  letter-spacing: -0.64px;
  line-height: 1.2;
}

.ihsg-badge-gain {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px 6px;
  border-radius: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  color: #29d771;
  letter-spacing: -0.24px;
  line-height: 1.2;
}

.caution-badge-figma {
  background: rgba(255, 13, 13, 0.6);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  color: #fa9e9e;
  letter-spacing: -0.24px;
  line-height: 1.2;
}

/* Top Picks Horizontal Carousel */
.top-picks-scroll {
  position: relative;
  z-index: 10;
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: visible;
  width: calc(100% + 32px);
  margin-left: -16px;
  padding: 8px 16px;
  margin-top: -8px;
  margin-bottom: -8px;
  scrollbar-width: none;
}
.top-picks-scroll::-webkit-scrollbar { display: none; }

.pick-card-figma {
  width: 275px;
  min-width: 275px;
  height: 95px;
  border: 1px solid #1a2223;
  border-radius: 12px;
  padding: 12px;
  background-color: #131313;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 275 95' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(34.355 18.3 -5.1386 15.007 92.201 -22)'><stop stop-color='rgba(0,170,204,1)' offset='0'/><stop stop-color='rgba(4,137,164,1)' offset='0.020832'/><stop stop-color='rgba(9,105,124,1)' offset='0.041664'/><stop stop-color='rgba(13,72,84,1)' offset='0.062496'/><stop stop-color='rgba(15,56,64,1)' offset='0.072913'/><stop stop-color='rgba(17,39,44,1)' offset='0.083329'/><stop stop-color='rgba(19,19,19,1)' offset='0.73304'/></radialGradient></defs></svg>");
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.pick-card-figma:hover {
  border-color: #385b63;
}

.pick-card-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pick-title-txt {
  font-size: 12px;
  font-weight: 400;
  color: #c1c1c1;
  letter-spacing: -0.24px;
  line-height: 1.2;
}

.pick-pts-badge-figma {
  background: #b36020;
  border: 1px solid #673d1e;
  border-radius: 50px;
  padding: 2px 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  color: #f7f7f7;
  letter-spacing: -0.22px;
  line-height: 0.9;
}

.pick-bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pick-code-crown {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pick-code-txt {
  font-size: 20px;
  font-weight: 400;
  color: #ffffff;
  letter-spacing: -0.4px;
  line-height: 1.2;
}

.pick-company-sub {
  font-size: 11px;
  font-weight: 400;
  color: #a8a8a8;
  letter-spacing: -0.22px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 170px;
}

.pick-price-txt {
  font-size: 14px;
  font-weight: 400;
  color: #ffffff;
  letter-spacing: -0.28px;
  line-height: 1.2;
}

/* 4 Category Menu */
.menu-grid-figma {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0;
  margin: 0;
}

.menu-btn-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.menu-icon-tile {
  background: #1a1a1a;
  border: 1px solid #262626;
  border-radius: 12px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.menu-btn-col:hover .menu-icon-tile {
  background: #242424;
  border-color: #333333;
}

.menu-label-txt {
  font-size: 12px;
  font-weight: 400;
  color: #d8d8d8;
  letter-spacing: -0.24px;
  line-height: 1.2;
}

/* Mantau AI Insight */
.ai-insight-figma {
  position: relative;
  z-index: 10;
  width: 100%;
  margin: 0;
  background: #f7f7f7;
  border: 1px solid #efefef;
  border-radius: 12px;
  padding: 6px 4px 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.ai-glow-bg {
  position: absolute;
  top: calc(50% + 32px);
  left: 50%;
  transform: translate(-50%, -50%);
  width: 335px;
  height: 48px;
  filter: blur(25px);
  background: linear-gradient(97.7deg, rgba(51, 81, 247, 0.8) 0.38%, rgba(255, 123, 242, 0.8) 61.58%, rgb(185, 240, 145) 96.86%);
  pointer-events: none;
}

.ai-title-row {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px;
}

.ai-icon-chip {
  background: linear-gradient(to bottom, #2e2989, #2e2375 58%, #120a23);
  border: 0.5px solid #dddeee;
  border-radius: 50px;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  box-shadow: inset 0px 4px 5.5px 0px #9d97eb;
}

.ai-title-txt {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: #111111;
  letter-spacing: -0.28px;
  line-height: 1.2;
}

.ai-content-box {
  position: relative;
  z-index: 2;
  background: #ffffff;
  border-radius: 10px;
  height: 46px;
  padding: 8px 8px 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ai-placeholder-txt {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: #8f8f8f;
  letter-spacing: -0.24px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.ai-btn-gen {
  width: 64px;
  height: 30px;
  background: #292929;
  color: #f7f7f7;
  border: none;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -0.24px;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: inset 0px -3px 4px 0px rgba(221, 206, 245, 0.25);
  transition: background 0.15s ease;
}
.ai-btn-gen:hover { background: #1c1c1c; }

/* Buy Radar Section Container */
.buy-radar-card-figma {
  position: relative;
  z-index: 10;
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.radar-tabs-header {
  position: relative;
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
}

.radar-tab-btn {
  flex: 1;
  background: none;
  border: none;
  padding: 8px 0;
  font-size: 14px;
  font-weight: 400;
  color: #5a5a5a;
  cursor: pointer;
  text-align: center;
  letter-spacing: -0.28px;
  line-height: 1.2;
  transition: color 0.2s ease;
  position: relative;
}
.radar-tab-btn.active {
  color: #d8d8d8;
  font-weight: 500;
}

.radar-tab-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  background-color: #d8d8d8;
  transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1), width 0.25s cubic-bezier(0.2, 0, 0, 1);
  will-change: transform, width;
  pointer-events: none;
}

.radar-content-box {
  background: #131313;
  border: 1px solid #262626;
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tab-pane-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: opacity 0.18s cubic-bezier(0.2, 0, 0, 1), transform 0.18s cubic-bezier(0.2, 0, 0, 1);
  will-change: opacity, transform;
}
.tab-pane-content.tab-fade-out {
  opacity: 0;
  transform: translateY(4px);
}
.tab-pane-content.tab-fade-in {
  opacity: 1;
  transform: translateY(0);
}

/* Movers Segmented Control (Exact Figma 410:9353) */
.movers-segmented-control {
  background: #1a1a1a;
  border: 1px solid #262626;
  border-radius: 8px;
  padding: 2px;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-bottom: 2px;
}

.movers-segment-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 6px 12px;
  min-width: 56px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: #757575;
  letter-spacing: -0.24px;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.movers-segment-btn.active {
  background: #2c2c2c;
  border: 1px solid #454242;
  color: #efefef;
}

.company-row-figma {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  cursor: pointer;
}

.company-left-col {
  display: flex;
  align-items: center;
  gap: 8px;
}

.company-logo-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  flex-shrink: 0;
}
.company-logo-circle img {
  width: 36px;
  height: 36px;
  object-fit: cover;
  display: block;
}
.company-logo-circle img[src*="logo_aisa"],
.company-logo-circle img.logo-aisa {
  width: 32px;
  height: 18px;
  object-fit: contain;
}

.company-name-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.company-code-line {
  display: flex;
  align-items: center;
  gap: 4px;
}

.company-code-txt {
  font-size: 14px;
  font-weight: 400;
  color: #efefef;
  letter-spacing: -0.28px;
  line-height: 1.2;
}

.badge-buy-figma {
  background: #10482a;
  color: #1fad53;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  padding: 2px 6px;
  border-radius: 16px;
  letter-spacing: -0.24px;
  line-height: 1.2;
}

.company-sector-line {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #8f8f8f;
  letter-spacing: -0.24px;
  line-height: 1.2;
  white-space: nowrap;
  min-width: 0;
  width: 100%;
}

.company-name-marquee {
  max-width: 105px;
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
}

.company-name-inner {
  display: inline-block;
  white-space: nowrap;
}

.company-name-marquee.is-long .company-name-inner {
  display: inline-block;
  animation: companyTickerScroll 7s ease-in-out infinite alternate;
}

@keyframes companyTickerScroll {
  0%, 25% { transform: translateX(0); }
  75%, 100% { transform: translateX(calc(-100% + 100px)); }
}

.company-sector-txt {
  max-width: 80px;
  flex-shrink: 0;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  color: #8f8f8f;
}

.company-sector-inner {
  display: inline-block;
  white-space: nowrap;
}

.company-sector-txt.is-long .company-sector-inner {
  display: inline-block;
  animation: sectorTickerScroll 7s ease-in-out infinite alternate;
}

@keyframes sectorTickerScroll {
  0%, 25% { transform: translateX(0); }
  75%, 100% { transform: translateX(calc(-100% + 75px)); }
}

.company-right-col {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
  flex-shrink: 0;
  margin-left: 10px;
}

.company-price-txt {
  font-size: 14px;
  font-weight: 400;
  color: #ffffff;
  letter-spacing: -0.28px;
  line-height: 1.2;
}

.company-trend-line {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #29d771;
  letter-spacing: -0.24px;
  line-height: 1.2;
}

.divider-line-figma {
  width: 100%;
  height: 1px;
  background: #22262b;
}

.btn-view-all-figma {
  border: 1px solid #113037;
  border-radius: 10px;
  padding: 14px 12px;
  background: radial-gradient(circle, #102023 0%, #101819 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 400;
  color: #ffffff;
  letter-spacing: -0.7px;
  line-height: 1.2;
  transition: opacity 0.15s ease;
}
.btn-view-all-figma:hover { opacity: 0.9; }

/* Floating Bottom Navigation (Exact Figma: bottom 24px, w 343px, r 24px) */
.dock-nav-figma {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 343px;
  background: rgba(17, 17, 17, 0.75);
  backdrop-filter: blur(20px);
  border: 1px solid #404040;
  border-radius: 24px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 100;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}

.dock-btn-figma {
  background: none;
  border: none;
  outline: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  padding: 0;
  margin: 0;
  transform: none !important;
  transition: none !important;
  -webkit-tap-highlight-color: transparent;
}

.dock-btn-figma:hover,
.dock-btn-figma:active,
.dock-btn-figma:focus {
  background: none !important;
  border: none !important;
  outline: none !important;
  transform: none !important;
  box-shadow: none !important;
}

.dock-btn-figma img {
  width: 24px;
  height: 24px;
  display: block;
  flex-shrink: 0;
  transform: none !important;
}

.dock-btn-figma span {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400 !important;
  letter-spacing: -0.22px;
  line-height: 1.2;
  color: #5a5a5a;
  text-align: center;
  white-space: nowrap;
  transform: none !important;
}

.dock-btn-figma.active img {
  opacity: 1;
  transform: none !important;
}

.dock-btn-figma.active span {
  color: #ffffff;
  font-weight: 400 !important;
  transform: none !important;
}

/* Modals & Overlays */
html.modal-open,
body.modal-open {
  overflow: hidden !important;
  height: 100% !important;
  touch-action: none !important;
}

.overlay-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  touch-action: none;
}

.modal-sheet {
  width: 100%;
  max-width: 375px;
  background: #131313;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border: 1px solid #262626;
  border-bottom: none !important;
  padding: 16px 16px 20px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  margin-bottom: 0 !important;
  max-height: 92vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.8);
  box-sizing: border-box;
  animation: slideUpSheet 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  touch-action: pan-y;
}

@keyframes slideUpSheet {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

/* Onboarding & Auth Flow Screens */
.onboarding-hero {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 40px;
}

.onboarding-hero h1 {
  font-size: 28px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.5px;
}

.onboarding-hero p {
  font-size: 14px;
  color: #8f8f8f;
  line-height: 1.5;
}

.onboarding-dots {
  display: flex;
  gap: 6px;
  margin: 30px 0;
}

.onboarding-dot {
  width: 24px;
  height: 4px;
  border-radius: 2px;
  background: #262626;
}

.onboarding-dot.active {
  background: #29d771;
}

.auth-form-card {
  background: #131313;
  border: 1px solid #262626;
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.auth-input-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.auth-input-group label {
  font-size: 12px;
  color: #8f8f8f;
}

.auth-input-field {
  background: #1a1a1a;
  border: 1px solid #262626;
  border-radius: 8px;
  padding: 12px 14px;
  color: #ffffff;
  font-size: 13px;
  outline: none;
}

.btn-primary-figma {
  background: #29d771;
  color: #0c0c0c;
  font-weight: 500;
  font-size: 14px;
  border: none;
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  text-align: center;
  transition: opacity 0.15s ease;
}

/* Search Screen Dedicated View */
.search-screen-view {
  width: 100%;
  max-width: 375px;
  margin: 0 auto;
  min-height: 100vh;
  background-color: #0c0c0c;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 0 16px 40px;
  position: relative;
  z-index: 50;
  overflow-x: hidden;
}

.search-screen-view .status-bar-mock {
  margin: 0 -16px;
  width: calc(100% + 32px);
}

.search-header-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.search-input-box {
  background: #0d0d0d;
  border: 1px solid #1a2223;
  border-radius: 16px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.search-input-field {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #efefef;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.28px;
  line-height: 1.2;
}

.search-input-field::placeholder {
  color: #5a5a5a;
}

.search-cancel-btn {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  color: #d8d8d8;
  letter-spacing: -0.28px;
  line-height: 1.2;
  cursor: pointer;
  background: none;
  border: none;
  white-space: nowrap;
}

.search-menu-chips {
  display: flex;
  gap: 8px;
  height: 26px;
  margin-top: 16px;
}

.search-chip-btn {
  background: #1a1a1a;
  border: 1px solid #262626;
  border-radius: 16px;
  padding: 6px 14px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: #5a5a5a;
  letter-spacing: -0.24px;
  line-height: 1.2;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-chip-btn.active {
  border-color: #1a2223;
  color: #d8d8d8;
  background: radial-gradient(circle at 35% 0%, rgba(71,123,133,1) 0%, rgba(19,19,19,1) 75%), #131313;
}

.search-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: 24px;
  margin-bottom: 8px;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: -0.24px;
  line-height: 1.2;
}

.search-section-title {
  font-weight: 500;
  color: #a8a8a8;
}

.search-section-action {
  font-weight: 400;
  color: #5a5a5a;
  cursor: pointer;
}

.search-history-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 8px;
  border-bottom: 1px solid #1a1a1a;
  cursor: pointer;
}
.search-history-item:last-child {
  border-bottom: none;
}

.search-history-txt {
  flex: 1;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  color: #efefef;
  letter-spacing: -0.28px;
  line-height: 1.2;
}

/* Match highlight */
.search-highlight-pill {
  background: #0e3e47;
  color: #00c076;
  border-radius: 4px;
  padding: 0 2px;
}

/* Empty State */
.search-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: 100px;
  gap: 12px;
  padding: 0 20px;
}

.search-empty-icon {
  width: 64px;
  height: 64px;
  border-radius: 50px;
  background: #1a1a1a;
  border: 1px solid #262626;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5a5a5a;
  font-size: 24px;
}

.search-empty-title {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  letter-spacing: -0.32px;
  line-height: 1.2;
}

.search-empty-sub {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  color: #8f8f8f;
  line-height: 1.4;
  letter-spacing: -0.24px;
  max-width: 260px;
}

/* ============================================================
   NOTIFICATION SCREEN (EXACT FIGMA 410:9786)
   ============================================================ */
.notification-screen-view {
  width: 100%;
  min-height: 100vh;
  background-color: #0c0c0c;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 50;
  padding-bottom: 40px;
}

.notif-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  margin-top: 4px;
  position: relative;
}

.notif-back-btn,
.notif-more-btn {
  background: #1a1a1a;
  border: 1px solid #262626;
  border-radius: 24px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}
.notif-back-btn:hover,
.notif-more-btn:hover {
  background: #242424;
}

.notif-title-txt {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 400;
  color: #ffffff;
  letter-spacing: -0.4px;
  line-height: 1.2;
  text-align: center;
}

.notif-menu-chips {
  display: flex;
  gap: 8px;
  padding: 0 16px;
  margin-top: 24px;
  overflow-x: auto;
  scrollbar-width: none;
}
.notif-menu-chips::-webkit-scrollbar { display: none; }

.notif-chip-btn {
  background: #1a1a1a;
  border: 1px solid #262626;
  border-radius: 16px;
  padding: 6px 14px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: #5a5a5a;
  letter-spacing: -0.24px;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
}
.notif-chip-btn.active {
  border-color: #1a2223;
  color: #d8d8d8;
  background: radial-gradient(circle at 35% 0%, rgba(71,123,133,1) 0%, rgba(19,19,19,1) 75%), #131313;
}

.notif-section-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 16px;
  margin-top: 24px;
}

.notif-section-label {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  color: #757575;
  letter-spacing: -0.28px;
  line-height: 1.2;
}

.notif-card-box {
  border: 1px solid #262626;
  border-radius: 12px;
  overflow: hidden;
  background: #131313;
  display: flex;
  flex-direction: column;
}

.notif-row-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  background: #6b1414;
}

.notif-swipe-delete-btn {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 64px;
  background: #6b1414;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1;
  transition: background 0.15s ease;
}
.notif-swipe-delete-btn:hover {
  background: #841b1b;
}

.notif-row-item {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 14px 12px;
  background: #0c0c0c;
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), background 0.15s ease;
  user-select: none;
  touch-action: pan-y;
  will-change: transform;
}
.notif-row-item.dragging {
  transition: none !important;
}
.notif-row-item.swiped {
  transform: translateX(-64px);
}
.notif-row-item.unread {
  background: #1a1a1a;
}
.notif-row-item:hover {
  background: #181818;
}

/* Selection check circle (Exact Figma 410:9947 & 410:9980) */
.notif-selection-circle {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid #3e3e3e;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  margin-left: 8px;
  transition: all 0.15s ease;
  box-sizing: border-box;
}
.notif-selection-circle.selected {
  background: #555555;
  border-color: #555555;
}

.notif-logo-circle {
  width: 36px;
  height: 36px;
  border-radius: 50px;
  background: #404040;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8f8f8f;
  font-size: 13px;
  font-weight: 500;
}

.notif-content-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.notif-top-line {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.notif-title-line {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  color: #d8d8d8;
  letter-spacing: -0.28px;
  line-height: 1.2;
}

.notif-time-line {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  color: #5a5a5a;
  letter-spacing: -0.22px;
  line-height: 1.2;
  white-space: nowrap;
}

.notif-bot-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.notif-desc-line {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: #757575;
  letter-spacing: -0.24px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.notif-unread-dot {
  width: 8px;
  height: 8px;
  border-radius: 16px;
  background: #01b555;
  flex-shrink: 0;
}

.notif-divider {
  width: 100%;
  height: 1px;
  background: #262626;
}

/* More Dropdown Popup Menu */
.notif-dropdown-menu {
  position: absolute;
  top: 44px;
  right: 16px;
  width: 194px;
  background: #1a1a1a;
  border: 1px solid #262626;
  border-radius: 12px;
  overflow: hidden;
  z-index: 100;
  box-shadow: 0 8px 32px rgba(0,0,0,0.8);
  display: flex;
  flex-direction: column;
}

.notif-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  color: #efefef;
  transition: background 0.15s ease;
}
.notif-dropdown-item:hover {
  background: #262626;
}

/* Screener Screen (Exact Figma 410:10483) */
.screener-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 16px;
}

/* Screener Tabs (Exact Figma 410:10507) */
.screener-tabs-header {
  position: relative;
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
}

.screener-tab-btn {
  flex: 1;
  background: none;
  border: none;
  padding: 8px 0;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  color: #5a5a5a;
  cursor: pointer;
  text-align: center;
  letter-spacing: -0.28px;
  line-height: 1.2;
  transition: color 0.2s ease;
  position: relative;
}

.screener-tab-btn.active {
  color: #d8d8d8;
  font-weight: 500;
}

.screener-tab-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  background-color: #d8d8d8;
  transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1), width 0.25s cubic-bezier(0.2, 0, 0, 1);
  will-change: transform, width;
  pointer-events: none;
}

.screener-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.screener-avatar-badge {
  width: 36px;
  height: 36px;
  border-radius: 50px;
  background: radial-gradient(circle at 50% 50%, #003f4d 0%, #072c34 50%, #0d191c 100%);
  box-shadow: inset 0 4px 4px rgba(1, 27, 32, 0.8);
  border: 1px solid #1a2223;
  flex-shrink: 0;
}

.screener-actions-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.screener-icon-btn {
  background: #1a1a1a;
  border: 1px solid #262626;
  border-radius: 24px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}
.screener-icon-btn:hover {
  background: #242424;
}

/* Screener Confluence Hero */
.screener-confluence-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.screener-confluence-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.screener-confluence-title {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  color: #c1c1c1;
  letter-spacing: -0.32px;
  line-height: 1.2;
}

.screener-confluence-btn {
  width: 30px;
  height: 30px;
  border-radius: 50px;
  background: #0c0c0c;
  border: 1px solid #262626;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.screener-confluence-pct {
  font-family: var(--font-sans);
  font-size: 32px;
  font-weight: 400;
  color: #33deff;
  letter-spacing: -0.64px;
  line-height: 1.2;
}

.screener-confluence-detail {
  display: flex;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: #757575;
  letter-spacing: -0.24px;
  line-height: 1.2;
}

/* Screener Highest Confluence Banner */
.screener-sort-banner {
  border: 1px solid #231a1a;
  border-radius: 12px;
  padding: 12px;
  background-color: #131313;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 343 59' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(42.85 11.365 -6.4092 9.3203 115 -13.663)'><stop stop-color='rgba(133,71,71,1)' offset='0'/><stop stop-color='rgba(94,46,46,1)' offset='0.041664'/><stop stop-color='rgba(74,34,34,1)' offset='0.062496'/><stop stop-color='rgba(55,22,22,1)' offset='0.083329'/><stop stop-color='rgba(37,20,20,1)' offset='0.40818'/><stop stop-color='rgba(19,19,19,1)' offset='0.73304'/></radialGradient></defs></svg>");
  background-size: cover;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.screener-sort-title {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  color: #efefef;
  letter-spacing: -0.28px;
  line-height: 1.2;
}

.screener-sort-sub {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: #757575;
  letter-spacing: -0.24px;
  line-height: 1.2;
}

/* Screener Stock Card */
.screener-card-item {
  background: #131313;
  border: 1px solid #262626;
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.screener-card-item:hover {
  border-color: #385b63;
}

.screener-sub-bar {
  background: #1a1a1a;
  border: 1px solid #262626;
  border-radius: 8px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.screener-tags-line {
  display: flex;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: #757575;
  letter-spacing: -0.24px;
  line-height: 1.2;
}

.screener-pts-pill {
  background: #2069b3;
  border: 1px solid #1e4267;
  border-radius: 50px;
  padding: 2px 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  color: #f7f7f7;
  letter-spacing: -0.22px;
  line-height: 0.9;
  white-space: nowrap;
}

/* Signals Screen (Exact Figma image_48dc28.png) */
.signals-screen-view {
  width: 100%;
  min-height: 100vh;
  background-color: #0c0c0c;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 50;
  padding-bottom: 40px;
}

.signals-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  margin-top: 4px;
}

.signals-back-btn,
.signals-action-btn {
  background: #1a1a1a;
  border: 1px solid #262626;
  border-radius: 24px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}
.signals-back-btn:hover,
.signals-action-btn:hover {
  background: #242424;
}

.signals-title-txt {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 500;
  color: #ffffff;
  letter-spacing: -0.4px;
  line-height: 1.2;
  text-align: center;
}

/* Horizon Segmented Bar */
.signals-horizon-bar {
  display: flex;
  align-items: center;
  width: calc(100% - 32px);
  margin: 16px 16px 0;
  border-bottom: 1px solid #262626;
  position: relative;
}

.signals-horizon-btn {
  flex: 1;
  background: none;
  border: none;
  padding: 8px 0;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  color: #5a5a5a;
  cursor: pointer;
  text-align: center;
  letter-spacing: -0.28px;
  line-height: 1.2;
  position: relative;
  transition: color 0.15s ease;
}
.signals-horizon-btn.active {
  color: #d8d8d8;
  font-weight: 500;
  border-bottom: 1px solid #d8d8d8;
}

/* Signal Filter Chips */
.signals-filter-chips {
  display: flex;
  gap: 8px;
  padding: 0 16px;
  margin-top: 14px;
  overflow-x: auto;
  scrollbar-width: none;
}
.signals-filter-chips::-webkit-scrollbar { display: none; }

.signals-chip-btn {
  background: #1a1a1a;
  border: 1px solid #262626;
  border-radius: 16px;
  padding: 6px 14px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: #5a5a5a;
  letter-spacing: -0.24px;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
}
.signals-chip-btn.active {
  border-color: #1a2223;
  color: #d8d8d8;
  background: radial-gradient(circle at 35% 0%, rgba(71,123,133,1) 0%, rgba(19,19,19,1) 75%), #131313;
}

/* Signals Card List */
.signals-card-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
}

.sharia-pill-badge {
  background: #1a1a1a;
  border: 1px solid #262626;
  border-radius: 16px;
  padding: 2px 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  color: #8f8f8f;
  letter-spacing: -0.2px;
  line-height: 1.2;
}

/* Delete Confirmation Dialog Modal (Exact Figma 410:10086 / image_824e04.png / Screenshot 2026-10-14 at 21.57.31.png) */
.overlay-modal.dialog-center {
  align-items: center !important;
  justify-content: center !important;
}

.delete-dialog-card {
  width: 343px;
  background: #131313;
  border: 1px solid #262626;
  border-radius: 16px;
  padding: 28px 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.95);
  animation: zoomInDialog 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
  margin: auto;
}

@keyframes zoomInDialog {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.delete-dialog-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #002229;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.delete-dialog-title {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  color: #d8d8d8;
  letter-spacing: -0.32px;
  line-height: 1.3;
  margin-bottom: 8px;
}

.delete-dialog-desc {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  color: #757575;
  line-height: 1.4;
  letter-spacing: -0.26px;
  margin-bottom: 24px;
  width: 100%;
}

.delete-dialog-btn-row {
  display: flex;
  gap: 8px;
  width: 100%;
}

.delete-dialog-btn-cancel {
  flex: 1;
  height: 45px;
  background: #131313;
  border: 1px solid #ffffff;
  border-radius: 10px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: -0.2px;
  transition: all 0.15s ease;
}
.delete-dialog-btn-cancel:hover {
  background: #1f1f1f;
}

.delete-dialog-btn-confirm {
  flex: 1;
  height: 45px;
  background: radial-gradient(86.75px at 50% 50%, #102023 0%, #101819 100%);
  border: 1px solid #536a6e;
  border-radius: 10px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: -0.2px;
  transition: all 0.15s ease;
}
.delete-dialog-btn-confirm:hover {
  border-color: #008099;
  background: #14272e;
}

/* ==========================================================================
   Figma Mobile Screens Design System (Watchlist, AI Calculate, Profile)
   ========================================================================== */

.screen-page-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  padding-bottom: 110px;
  box-sizing: border-box;
}

.screen-top-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-top: 4px;
}

.screen-title-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.screen-title-main {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 500;
  color: #ffffff;
  letter-spacing: -0.4px;
  line-height: 1.2;
}

.screen-subtitle-muted {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: #8f8f8f;
  letter-spacing: -0.24px;
}

.screen-action-btn-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #1a1a1a;
  border: 1px solid #262626;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.screen-action-btn-circle:hover {
  background: #262626;
  border-color: #404040;
}

.screen-search-box {
  background: #0d0d0d;
  border: 1px solid #262626;
  border-radius: 16px;
  height: 42px;
  padding: 0 12px 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s ease;
}
.screen-search-box:focus-within {
  border-color: #008099;
}

.screen-search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-sans);
  font-size: 13px;
  color: #efefef;
  letter-spacing: -0.26px;
  padding: 0;
}
.screen-search-input::placeholder {
  color: #757575;
}

.screen-pill-btn-add {
  background: #002229;
  border: 1px solid #004d5c;
  color: #00e5ff;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  border-radius: 8px;
  padding: 5px 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.screen-pill-btn-add:hover {
  background: #003642;
  border-color: #008099;
}

/* Reusable Stock Card (Exact Figma Modals 1.svg Spec) */
.stock-card-figma {
  background: #131313;
  border: 1px solid #262626;
  border-radius: 14px;
  padding: 13px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.stock-card-figma:hover {
  border-color: #383838;
}

.stock-card-upper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.stock-card-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.stock-card-logo {
  width: 36px;
  height: 36px;
  border-radius: 18px;
  overflow: hidden;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stock-card-info-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.stock-card-meta-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stock-card-code {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  color: #efefef;
  letter-spacing: -0.32px;
  line-height: 1;
}

.stock-card-badge-buy {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  background: #10482a;
  color: #1fad53;
  padding: 2px 8px;
  border-radius: 9px;
  line-height: 14px;
  letter-spacing: 0.2px;
}

.stock-card-badge-avoid {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  background: #3b1111;
  color: #fa9e9e;
  padding: 2px 8px;
  border-radius: 9px;
  line-height: 14px;
  letter-spacing: 0.2px;
}

.stock-card-name {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: #8f8f8f;
  letter-spacing: -0.24px;
  max-width: 175px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}

.stock-card-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex-shrink: 0;
}

.stock-card-price {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  color: #ffffff;
  letter-spacing: -0.3px;
  line-height: 1;
}

.stock-card-trend-gain {
  display: flex;
  align-items: center;
  gap: 3px;
  color: #29d771;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.2px;
}

.stock-card-trend-loss {
  display: flex;
  align-items: center;
  gap: 3px;
  color: #ff4d4d;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.2px;
}

.stock-card-footer {
  background: #1a1a1a;
  border: 1px solid #262626;
  border-radius: 8px;
  height: 30px;
  padding: 0 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
}

.stock-card-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: -0.22px;
}

.stock-card-pts {
  background: #2069b3;
  border: 1px solid #1e4267;
  color: #f7f7f7;
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 500;
  height: 14px;
  padding: 0 7px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: -0.18px;
  flex-shrink: 0;
}

/* Profile Specific Components */
.profile-user-card {
  background: #131313;
  border: 1px solid #262626;
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-sizing: border-box;
}

.profile-user-top {
  display: flex;
  align-items: center;
  gap: 14px;
}

.profile-avatar-56 {
  width: 56px;
  height: 56px;
  border-radius: 28px;
  object-fit: cover;
  border: 1.5px solid #262626;
  flex-shrink: 0;
}

.profile-user-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.profile-badge-pro {
  background: #002229;
  border: 1px solid #004d5c;
  color: #00e5ff;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 6px;
  letter-spacing: 0.3px;
  width: fit-content;
}

.profile-stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid #1f1f1f;
}

.profile-stat-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}

.profile-stat-num {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  letter-spacing: -0.3px;
}

.profile-stat-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  color: #757575;
  letter-spacing: -0.2px;
}

.profile-section-title {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  color: #757575;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-top: 6px;
}

.profile-menu-card {
  background: #131313;
  border: 1px solid #262626;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.profile-menu-row {
  padding: 13px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: background 0.15s ease;
  border-bottom: 1px solid #262626;
}
.profile-menu-row:last-child {
  border-bottom: none;
}
.profile-menu-row:hover {
  background: #1a1a1a;
}

.profile-row-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.profile-row-icon-wrap {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #1a1a1a;
  border: 1px solid #262626;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.profile-row-label {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: #efefef;
  letter-spacing: -0.28px;
}

.profile-row-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.profile-value-pill {
  background: #1a1a1a;
  border: 1px solid #262626;
  border-radius: 6px;
  padding: 3px 8px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  color: #a8a8a8;
  letter-spacing: -0.2px;
}

.profile-badge-active-green {
  background: #10482a;
  border: 1px solid #1fad53;
  color: #1fad53;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 6px;
}

/* AI Calculate Specific Components */
.aicalc-top-ihsg {
  background: #131313;
  border: 1px solid #262626;
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.aicalc-chips-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 0;
  width: 100%;
}
.aicalc-chips-scroll::-webkit-scrollbar {
  display: none;
}

.aicalc-chip {
  background: #131313;
  border: 1px solid #262626;
  border-radius: 16px;
  padding: 6px 14px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: #8f8f8f;
  letter-spacing: -0.24px;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.aicalc-chip.active {
  background: #242424;
  border-color: #d8d8d8;
  color: #ffffff;
}

.aicalc-bot-card {
  background: #131313;
  border: 1px solid #262626;
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.aicalc-bot-card:hover {
  border-color: #383838;
}

/* Watchlist Screen Styles (Exact Figma watchlist.png) */
.screen-header-figma {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-top: 4px;
  margin-bottom: 14px;
}

.screen-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.screen-header-icon-badge {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #004d5c 0%, #002229 100%);
  border: 1px solid #005c6e;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.screen-header-title-box {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.screen-header-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.screen-header-title {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 500;
  color: #ffffff;
  letter-spacing: -0.36px;
  line-height: 1.2;
}

.screen-header-sub {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: #8f8f8f;
  letter-spacing: -0.24px;
}

.screen-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.screen-header-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #1a1a1a;
  border: 1px solid #262626;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: background 0.15s ease;
}
.screen-header-btn:hover {
  background: #242424;
}

.screen-header-notif-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ef4444;
  border: 1px solid #0c0c0c;
}

.watchlist-search-row {
  background: #131313;
  border: 1px solid #262626;
  border-radius: 12px;
  padding: 6px 6px 6px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  box-sizing: border-box;
}

.watchlist-search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-sans);
  font-size: 13px;
  color: #ffffff;
  letter-spacing: -0.26px;
  text-transform: uppercase;
  padding: 0;
}
.watchlist-search-input::placeholder {
  color: #5a5a5a;
  text-transform: none;
}

.watchlist-search-btn {
  background: #1a1a1a;
  border: 1px solid #333333;
  color: #ffffff;
  border-radius: 8px;
  padding: 6px 14px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: -0.2px;
}
.watchlist-search-btn:hover {
  background: #262626;
}

.watchlist-card-figma {
  background: #131313;
  border: 1px solid #262626;
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: pointer;
  transition: border-color 0.15s ease;
  box-sizing: border-box;
}
.watchlist-card-figma:hover {
  border-color: #383838;
}

.watchlist-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.watchlist-card-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.watchlist-logo-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.watchlist-card-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.watchlist-code-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.watchlist-code-txt {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  letter-spacing: -0.32px;
  line-height: 1;
}

.watchlist-point-badge {
  background: #2563eb;
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 10px;
  letter-spacing: -0.15px;
  line-height: 14px;
}

.watchlist-name-txt {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: #8f8f8f;
  letter-spacing: -0.24px;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}

.watchlist-card-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

.watchlist-price-txt {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  letter-spacing: -0.32px;
  line-height: 1;
}

.watchlist-trend-txt {
  display: flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.2px;
}

.watchlist-card-bottom {
  border-top: 1px solid #1f1f1f;
  padding-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.watchlist-meta-tags {
  display: flex;
  align-items: center;
  gap: 6px;
}

.watchlist-badge-avoid {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.2px;
}

.watchlist-badge-buy {
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #22c55e;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.2px;
}

.watchlist-badge-swing {
  background: rgba(37, 99, 235, 0.15);
  border: 1px solid rgba(37, 99, 235, 0.3);
  color: #3b82f6;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.2px;
}

.watchlist-del-btn {
  background: transparent;
  border: none;
  color: #5a5a5a;
  font-family: var(--font-sans);
  font-size: 11px;
  cursor: pointer;
  padding: 2px 6px;
  transition: color 0.15s ease;
}
.watchlist-del-btn:hover {
  color: #ef4444;
}

/* AI Calculate Top Pick Cards (Exact Figma ai_calc.png) */
.aicalc-pick-card {
  background: #131313;
  border: 1px solid #262626;
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  transition: border-color 0.15s ease;
  box-sizing: border-box;
}
.aicalc-pick-card:hover {
  border-color: #383838;
}

.aicalc-pick-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.aicalc-pick-rank-txt {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: #8f8f8f;
  letter-spacing: -0.24px;
}

.aicalc-pick-points-badge {
  background: #2563eb;
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 10px;
  letter-spacing: -0.15px;
}

.aicalc-pick-mid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.aicalc-pick-code-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.aicalc-pick-code {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 500;
  color: #ffffff;
  letter-spacing: -0.4px;
  line-height: 1;
}

.aicalc-pick-price {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  letter-spacing: -0.32px;
}

.aicalc-pick-name {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: #8f8f8f;
  letter-spacing: -0.24px;
  line-height: 1.3;
}

/* Profile Redesign (Exact Figma profile.png) */
.profile-top-bar {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin-bottom: 8px;
}

.profile-avatar-center-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 100%;
  margin-bottom: 16px;
}

.profile-avatar-wrapper {
  position: relative;
  width: 74px;
  height: 74px;
}

.profile-avatar-img-large {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #262626;
  background: #1a1a1a;
}

.profile-avatar-edit-btn {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #008099;
  border: 2px solid #0c0c0c;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.profile-name-txt {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 500;
  color: #ffffff;
  letter-spacing: -0.4px;
  margin-top: 8px;
  text-align: center;
}

.profile-handle-txt {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  color: #8f8f8f;
  letter-spacing: -0.26px;
  margin-top: 2px;
  text-align: center;
}

.profile-pro-banner {
  background: radial-gradient(circle at 10% 0%, #004d66 0%, #0d1e23 60%, #131313 100%);
  border: 1px solid #1c4b57;
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 18px;
  cursor: pointer;
}

.profile-pro-top {
  display: flex;
  align-items: center;
  gap: 6px;
}

.profile-pro-title {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 500;
  color: #ffffff;
  letter-spacing: -0.36px;
}

.profile-pro-exp {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  color: #a8a8a8;
  letter-spacing: -0.22px;
}

.profile-group-header {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: #757575;
  letter-spacing: -0.26px;
  margin-bottom: 8px;
  margin-top: 6px;
}

.profile-group-box {
  background: #131313;
  border: 1px solid #262626;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 14px;
  box-sizing: border-box;
}

.profile-group-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 14px;
  border-bottom: 1px solid #262626;
  cursor: pointer;
  transition: background 0.15s ease;
}
.profile-group-row:last-child {
  border-bottom: none;
}
.profile-group-row:hover {
  background: #1a1a1a;
}

.profile-icon-teal-wrap {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #002229;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

@media (max-width: 400px) {
  .app-container {
    max-width: 100%;
  }
  .dock-nav-figma {
    width: calc(100% - 32px);
  }
}


/* ============================================================
   v8.0 — real-data components (tokens follow Home)
   ============================================================ */
button, input, select, textarea { font-family: inherit; }
strong, b, h1, h2, h3, h4 { font-weight: 500; }
.empty-state-figma { padding: 24px 12px; text-align: center; font-size: 12px; color: #8f8f8f; letter-spacing: -0.24px; line-height: 1.4; }
.logo-fallback { font-size: 13px; font-weight: 500; color: #0c0c0c; }
.avatar-initials { display: flex; align-items: center; justify-content: center; background: #002229; color: #00e5ff; font-size: 13px; font-weight: 500; border: 1px solid #1a2223; }
.profile-avatar-img-large.avatar-initials { font-size: 24px; }
.company-name-clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.company-sector-line .company-name-clip { max-width: 150px; }
.home-sub-title { font-size: 14px; font-weight: 400; color: #efefef; letter-spacing: -0.28px; }
.home-sub-note { font-size: 12px; font-weight: 400; color: #8f8f8f; letter-spacing: -0.24px; }
.status-num { font-size: 18px; font-weight: 400; line-height: 1.2; }
.screen-title-sm { font-size: 14px; color: #ffffff; letter-spacing: -0.28px; }
.screen-sub-sm { font-size: 12px; color: #a8a8a8; letter-spacing: -0.24px; }
.caution-badge-figma.is-on { background: rgba(31, 173, 83, 0.35); color: #29d771; }
.caution-badge-figma.is-off { background: rgba(255, 13, 13, 0.6); color: #fa9e9e; }
.caution-badge-figma:not(.is-on):not(.is-off) { background: rgba(179, 96, 32, 0.55); color: #f7c08a; }
.eod-pill { background: #d3a01a; color: #0c0c0c; font-family: var(--font-mono); font-size: 10px; padding: 1px 6px; border-radius: 16px; }
.eod-pill.is-live { background: #10482a; color: #1fad53; }
.bot-name-txt { font-size: 15px; font-weight: 500; color: #ffffff; letter-spacing: -0.3px; }
.bot-desc-txt { font-size: 12px; color: #8f8f8f; line-height: 1.3; letter-spacing: -0.24px; }
.bot-verdict-txt { font-family: var(--font-mono); font-size: 11px; color: #29d771; text-align: right; flex-shrink: 0; }
.bot-pick-box { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: #1a1a1a; border: 1px solid #262626; border-radius: 8px; padding: 10px 12px; }
.sheet-title-txt { font-size: 16px; font-weight: 500; color: #ffffff; letter-spacing: -0.32px; }
.sheet-close-btn { background: #1a1a1a; border: 1px solid #262626; color: #8f8f8f; border-radius: 50%; width: 32px; height: 32px; cursor: pointer; font-size: 13px; }
.sheet-body-txt { font-size: 14px; font-weight: 400; letter-spacing: -0.28px; }
.sheet-label-txt { font-size: 13px; font-weight: 500; color: #ffffff; letter-spacing: -0.26px; }
.mono-txt { font-family: var(--font-mono); font-size: 13px; }
.detail-card { background: #131313; border: 1px solid #262626; border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.detail-code-txt { font-size: 20px; font-weight: 400; color: #ffffff; letter-spacing: -0.4px; }
.detail-price-txt { font-size: 18px; font-weight: 400; color: #ffffff; letter-spacing: -0.36px; }
.detail-meta-row { display: flex; justify-content: space-between; border-top: 1px solid #262626; padding-top: 10px; font-size: 12px; color: #8f8f8f; }
.detail-section-title { font-size: 13px; font-weight: 500; color: #efefef; letter-spacing: -0.26px; margin: 4px 0; display: block; }
.detail-tile { background: #1a1a1a; border: 1px solid #262626; padding: 10px; border-radius: 8px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.detail-tile-k { font-size: 11px; color: #8f8f8f; }
.detail-tile-v { font-size: 13px; color: #ffffff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kv-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid #262626; font-size: 13px; color: #a8a8a8; letter-spacing: -0.26px; }
.kv-row span:last-child { color: #efefef; text-align: right; }

/* v8.0 layout fixes: long names/sectors never push price out of the card */
.company-left-col { flex: 1; min-width: 0; }
.company-name-info { min-width: 0; flex: 1; }
.company-sector-line { overflow: hidden; }
.company-sector-line > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.company-sector-line > span:last-child { flex-shrink: 1; }
.company-sector-line > img { flex-shrink: 0; }
.company-price-txt, .company-trend-line span { font-variant-numeric: tabular-nums; white-space: nowrap; }
.company-trend-line.is-flat { color: #8f8f8f !important; }
.screener-tags-line { min-width: 0; flex: 1; overflow: hidden; white-space: nowrap; gap: 0; }
.screener-tags-line > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.screener-tags-line > span:first-child { flex-shrink: 1; }
.screener-tags-line > img { flex-shrink: 0; }
.screener-pts-pill { flex-shrink: 0; margin-left: 8px; }
/* Home ticker weight per Figma (Medium) */
.company-code-txt, .pick-code-txt, .aicalc-pick-code { font-weight: 500; }
/* scroll room above floating dock on every full-screen list */
.signals-card-list, #screener-tab-body, #ai-calc-tab-content, .notification-screen-view, .search-screen-view, .signals-screen-view { padding-bottom: 120px; }
.aicalc-chips-scroll { margin-right: -16px; padding-right: 16px !important; overflow-x: auto; scrollbar-width: none; }
.aicalc-chips-scroll::-webkit-scrollbar { display: none; }

/* only name & sector shrink; stage/style stay readable */
.screener-tags-line > span:not(:first-child) { flex-shrink: 0; }
.company-sector-line > span:first-child { flex-shrink: 1; }
.company-sector-line > span:last-child:not(:first-child) { flex-shrink: 0; max-width: 45%; }
.screener-card-item .company-name-clip { display: block; max-width: 100%; }
.screener-card-item > div:first-child > div:first-child { flex: 1; }
.screener-card-item > div:first-child > div:first-child > div:last-child { flex: 1; }
.radar-content-box { padding-bottom: 0; }
.buy-radar-card-figma { margin-bottom: 96px; }

/* Screener: 6 top preset shortcuts (Home menu-grid style) */
.top-presets-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 8px; width: 100%; }
.top-preset-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; min-width: 0; }
.top-preset-icon { font-size: 24px; line-height: 1; }
.top-preset-name { font-size: 12px; font-weight: 400; color: #d8d8d8; letter-spacing: -0.24px; line-height: 1.2; text-align: center; max-width: 100%; min-height: 2.4em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.top-preset-wr { font-family: var(--font-mono); font-size: 10px; color: #29d771; letter-spacing: -0.2px; }

/* ============ Stock detail page (minimal) ============ */
#detail-screen-container { position: fixed; inset: 0; z-index: 150; background: #0c0c0c; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.dt-page { max-width: 375px; margin: 0 auto; padding: 12px 16px 48px; display: flex; flex-direction: column; gap: 16px; }
.dt-header { display: flex; align-items: center; justify-content: space-between; }
.dt-star { color: #8f8f8f; font-size: 18px; }
.dt-star.on { color: #ef8f35; }
.dt-hero { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.dt-hero-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dt-code { font-size: 20px; font-weight: 500; letter-spacing: -0.4px; }
.dt-name { font-size: 12px; color: #8f8f8f; letter-spacing: -0.24px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-price-row { display: flex; align-items: baseline; gap: 10px; }
.dt-price { font-size: 32px; font-weight: 400; letter-spacing: -0.64px; font-variant-numeric: tabular-nums; }
.dt-ignite { font-family: var(--font-mono); font-size: 12px; color: #d36d1a; margin-top: -8px; }
.dt-tabs { overflow-x: auto; scrollbar-width: none; }
.dt-tabs::-webkit-scrollbar { display: none; }
.dt-section { display: flex; flex-direction: column; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid #1a1a1a; }
.dt-section:last-child { border-bottom: none; }
.dt-section-title { font-size: 14px; font-weight: 500; color: #efefef; letter-spacing: -0.26px; }
.dt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; }
.dt-grid-4 { grid-template-columns: repeat(4, 1fr); }
.dt-stat { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dt-stat small { font-size: 11px; color: #757575; }
.dt-stat span { font-size: 16px; color: #ffffff; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dt-bar { display: flex; flex-direction: column; gap: 6px; }
.dt-bar-top { display: flex; justify-content: space-between; }
.dt-bar-top small { font-size: 11px; color: #8f8f8f; }
.dt-bar-track { height: 4px; background: #1a1a1a; border-radius: 2px; overflow: hidden; }
.dt-bar-track div { height: 100%; border-radius: 2px; }
.dt-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.dt-pill { font-size: 11px; color: #5a5a5a; }
.dt-pill::before { content: '○ '; }
.dt-pill.ok { color: #29d771; }
.dt-pill.ok::before { content: '● '; }
.dt-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: #8f8f8f; letter-spacing: -0.28px; }
.dt-row span:last-child { color: #efefef; font-variant-numeric: tabular-nums; text-align: right; }
.dt-news { display: flex; flex-direction: column; gap: 4px; }
.dt-news span { font-size: 14px; color: #efefef; line-height: 1.3; }
.dt-news small { font-size: 11px; color: #757575; }
.dt-section:first-child { padding-top: 4px; }
.dt-tabs { border-bottom: 1px solid #1a1a1a; }
.dt-tabs { overflow: visible; margin-bottom: 4px; }
.dt-pills { flex-wrap: wrap; row-gap: 4px; }
.dt-section + .dt-section { padding-top: 16px; }
.dt-section { padding-bottom: 20px; }

/* Market Status page: label boleh menyusut, nilai tidak menabrak */
.ms-kv > span:first-child { flex: 1 1 auto; min-width: 0; }
.ms-kv > span:last-child { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }

#ms-tabs, #fd-tabs { justify-content: space-between; }
#fd-tabs .radar-tab-btn { flex: 0 0 auto; font-size: 13px; white-space: nowrap; color: #8a8a8a; }
#fd-tabs .radar-tab-btn.active { color: #efefef; }
#fd-tabs { border-bottom: 1px solid #1f1f1f; }
#ms-tabs .radar-tab-btn { flex: 0 0 auto; font-size: 13px; white-space: nowrap; color: #8a8a8a; }
#ms-tabs .radar-tab-btn.active { color: #efefef; }
#ms-tabs { border-bottom: 1px solid #1f1f1f; }

/* ── Ported from figo/update-ui: custom screener form ── */
.custom-filter-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #1A1A1A;
  border: 1px solid #262626;
  border-radius: 8px;
  max-height: 220px;
  overflow-y: auto;
  scrollbar-width: none;
  z-index: 50;
  box-shadow: 0 10px 25px rgba(0,0,0,0.6);
  margin-top: 4px;
}
.custom-filter-dropdown-item {
  padding: 10px 14px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #A8A8A8;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.custom-filter-dropdown-item:hover,
.custom-filter-dropdown-item.selected {
  background: #262626;
  color: #FFFFFF;
}
.custom-filter-input-box {
  background: #111111;
  border: 1px solid #262626;
  border-radius: 10px;
  height: 43px;
  padding: 0 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  transition: border-color 0.15s ease, background 0.15s ease;
  position: relative;
}
.custom-filter-input-box:focus-within {
  background: #0D0D0D url('/assets/figma/auth_input_active_bg.svg') no-repeat center center / 100% 100%;
  background-origin: border-box;
  background-clip: border-box;
  border: 1px solid transparent;
}
.custom-filter-input-box input {
  background: transparent;
  border: none;
  outline: none;
  color: #FFFFFF;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  width: 100%;
  padding: 0;
  margin: 0;
}
.custom-filter-input-box input::placeholder {
  color: #404040;
}
.custom-filter-suffix {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #404040;
  margin-left: 6px;
  flex-shrink: 0;
  pointer-events: none;
}
.custom-filter-toggle {
  width: 52px;
  height: 28px;
  border-radius: 50px;
  border: 1px solid #262626;
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  flex-shrink: 0;
}
.custom-filter-toggle.off {
  background: #404040;
}
.custom-filter-toggle.on {
  background: #008099;
}
.custom-filter-toggle-knob {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  position: absolute;
  top: 1px;
  left: 2px;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease;
}
.custom-filter-toggle.off .custom-filter-toggle-knob {
  transform: translateX(0);
  background: #757575;
}
.custom-filter-toggle.on .custom-filter-toggle-knob {
  transform: translateX(22px);
  background: #EFEFEF;
}

/* ── Ported from figo/update-ui: onboarding/auth, track record views ── */
#auth-flow-container { position: fixed; inset: 0; z-index: 300; overflow-y: auto; -webkit-overflow-scrolling: touch; }
#auth-flow-container { display: none; flex-direction: column; align-items: center; overscroll-behavior: contain; }
#auth-flow-container[style*="block"] { display: flex !important; }
#auth-flow-container::before, #auth-flow-container::after { content: ''; flex: 1 0 0; } /* tengah vertikal, tetap bisa scroll bila pendek */
body.auth-flow-open { overflow: hidden; }
.profile-row-label { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; color: #EFEFEF; letter-spacing: -0.28px; line-height: 17px; }
.auth-input-box {
  width: 317px !important;
  min-width: 317px !important;
  max-width: 317px !important;
  height: 43px !important;
  min-height: 43px !important;
  max-height: 43px !important;
  background: #111111;
  border: 1px solid #262626 !important;
  border-radius: 10px !important;
  padding: 0 13px !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  transform: none !important;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.auth-input-box:focus-within {
  transform: none !important;
  outline: none !important;
}
.auth-input-box input {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: #FFFFFF !important;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 17px !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  transform: none !important;
}
.auth-input-box input::placeholder {
  color: #404040 !important;
  opacity: 1 !important;
}
.auth-input-box:focus-within {
  background: #0D0D0D url('/assets/figma/auth_input_active_bg.svg') no-repeat center center / 100% 100% !important;
  background-origin: border-box !important;
  background-clip: border-box !important;
  border: 1px solid transparent !important;
}
.auth-input-box.half-width {
  width: 155px !important;
  min-width: 155px !important;
  max-width: 155px !important;
}
.plan-card-item {
  width: 200px !important;
  min-width: 200px !important;
  max-width: 200px !important;
  height: 260px !important;
  min-height: 260px !important;
  max-height: 260px !important;
  flex-shrink: 0 !important;
  border-radius: 12px !important;
  padding: 4px 4px 6px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  cursor: pointer !important;
  scroll-snap-align: center !important;
  position: relative !important;
  transform: none !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease !important;
}
.plan-card-item.active-card {
  background: #102023 url('/assets/figma/plan_card_pro_bg.svg') no-repeat center center / 100% 100% !important;
  border: none !important;
  box-shadow: 0 0 35px rgba(0, 128, 153, 0.4) !important;
}
.plan-card-item.inactive-card {
  background: #111111 !important;
  border: 1px solid #262626 !important;
  box-shadow: none !important;
}
.plan-inner-benefits {
  width: 100% !important;
  height: 180px !important;
  min-height: 180px !important;
  max-height: 180px !important;
  border-radius: 8px !important;
  padding: 10px 10px 12px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  transition: background-color 0.25s ease, border-color 0.25s ease !important;
}
.plan-inner-benefits.active {
  background: #F7F7F7 !important;
  border: 1px solid #A8A8A8 !important;
}
.plan-inner-benefits.inactive {
  background: #1A1A1A !important;
  border: 1px solid #262626 !important;
}
.heatmap-table-container {
  width: 100%;
  background: #131313;
  border: 1px solid #262626;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}
.heatmap-scroll-wrapper {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  position: relative;
}
.heatmap-scroll-wrapper::-webkit-scrollbar {
  display: none;
}
.heatmap-sticky-col {
  position: sticky !important;
  left: 0 !important;
  top: 0 !important;
  width: 107px !important;
  min-width: 107px !important;
  max-width: 107px !important;
  background: #131313 !important;
  z-index: 20 !important;
  flex-shrink: 0 !important;
  box-shadow: 10px 0 16px -4px rgba(0, 0, 0, 0.45) !important;
}
.heatmap-sticky-header {
  height: 31px;
  background: #111111;
  border-bottom: 1px solid #262626;
  padding: 0 12px;
  display: flex;
  align-items: center;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #757575;
  box-sizing: border-box;
}
.heatmap-sticky-cell {
  height: 48px;
  padding: 0 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  border-bottom: 1px solid #1F1F1F;
  box-sizing: border-box;
  background: #131313;
  cursor: pointer;
}
.heatmap-date-col {
  width: 48px;
  min-width: 48px;
  max-width: 48px;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.heatmap-date-header {
  height: 31px;
  background: #111111;
  border-bottom: 1px solid #262626;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: #757575;
  box-sizing: border-box;
}
.heatmap-cell {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #1F1F1F;
  box-sizing: border-box;
  cursor: pointer;
}
.heatmap-tile {
  width: 44px;
  height: 43px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #FFFFFF;
}
.auth-input-box.half-width:focus-within {
  background: #0D0D0D url('/assets/figma/auth_input_half_active_bg.svg') no-repeat center center / 100% 100% !important;
}
.status-dropdown-item:hover {
  background: #252830 !important;
  color: #00d2ff !important;
}
.screener-view-pill {
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  border-radius: 16px !important;
  background: #1a1a1a;
  border: 1px solid #262626 !important;
  color: #5a5a5a !important;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  padding: 0 16px 0 12px !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  transition: color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  transform: none !important;
}
.screener-view-pill:focus {
  transform: none !important;
  outline: none !important;
}
.screener-view-pill img {
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0 !important;
  display: block !important;
  transform: none !important;
}
.screener-view-pill span {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 14px !important;
  display: inline-block !important;
  transform: none !important;
}
.screener-view-pill[data-view="list"] {
  width: 69px !important;
  min-width: 69px !important;
  max-width: 69px !important;
}
.screener-view-pill[data-view="table"] {
  width: 78px !important;
  min-width: 78px !important;
  max-width: 78px !important;
}
.screener-view-pill[data-view="heatmap"] {
  width: 98px !important;
  min-width: 98px !important;
  max-width: 98px !important;
}
.screener-view-pill.active {
  border: 1px solid transparent !important;
  color: #d8d8d8 !important;
  background-origin: border-box !important;
  background-clip: border-box !important;
}
.screener-view-pill[data-view="list"].active {
  background: url('/assets/figma/pill_bg_list_active.svg') no-repeat center center / 100% 100% !important;
  background-origin: border-box !important;
  background-clip: border-box !important;
}
.screener-view-pill[data-view="table"].active {
  background: url('/assets/figma/pill_bg_table_active.svg') no-repeat center center / 100% 100% !important;
  background-origin: border-box !important;
  background-clip: border-box !important;
}
.screener-view-pill[data-view="heatmap"].active {
  background: url('/assets/figma/pill_bg_heatmap_active.svg') no-repeat center center / 100% 100% !important;
  background-origin: border-box !important;
  background-clip: border-box !important;
}

/* ── Home hierarchy (v108): 5 shortcut kecil, AI card gelap (bukan blok putih), aksen tidak bersaing ── */
.menu-grid-figma { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.menu-btn-col { gap: 6px; min-width: 0; }
.menu-icon-tile { width: 44px; height: 44px; border-radius: 10px; background: #151515; border-color: #222; }
.menu-label-txt { font-size: 11px; color: #a8a8a8; white-space: nowrap; }
.ai-insight-figma { background: #131313; border-color: #262626; box-shadow: none; padding: 10px 12px; gap: 8px; }
.ai-insight-figma .ai-glow-bg { opacity: .18; }
.ai-insight-figma .ai-title-txt { color: #efefef; font-size: 13px; }
.ai-insight-figma .ai-content-box { background: transparent; padding: 0; height: auto; gap: 10px; }
.ai-insight-figma .ai-placeholder-txt { color: #8f8f8f; }
.ai-insight-figma .ai-btn-gen { background: transparent; color: #d8d8d8; border: 1px solid #333; height: 28px; }
.pick-pts-badge-figma { background: transparent; border-color: #4a3423; color: #e0a36b; }
.caution-badge-figma.is-off { background: rgba(255, 13, 13, 0.16); border: 1px solid rgba(250, 158, 158, 0.35); color: #fa9e9e; }
.caution-badge-figma.is-on { background: rgba(41, 215, 113, 0.14); border: 1px solid rgba(41, 215, 113, 0.35); }
/* Home: satu fokus (IHSG). Top pick jadi sekunder, ikon shortcut monokrom, dock lebih pekat. */
.pick-code-txt { font-size: 16px; }
.pick-card-figma .pick-code-crown img { width: 14px; height: 14px; }
.menu-icon-tile img { filter: grayscale(1) brightness(1.7); opacity: 1; }
.menu-btn-col:hover .menu-icon-tile img, .menu-btn-col:active .menu-icon-tile img { filter: none; opacity: 1; }
.dock-nav-figma { background: rgba(14, 14, 14, 0.92); }

/* AI Calculate Ranking — dari desain Figo (figo.css) */
.aicalc-ranking-card {
  width: 100%;
  background: #131313;
  border: 1px solid #262626;
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.aicalc-ranking-card:hover {
  border-color: #383838;
}
.aicalc-ranking-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}
.aicalc-ranking-logo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.aicalc-ranking-logo img {
  width: 36px;
  height: 36px;
  object-fit: cover;
}
.aicalc-ranking-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.aicalc-ranking-code-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.aicalc-ranking-ticker {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #efefef;
  line-height: 17px;
  letter-spacing: -0.28px;
}
.aicalc-ranking-buy-badge {
  background: #10482a;
  color: #1fad53;
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  font-weight: 400;
  padding: 2px 6px;
  border-radius: 16px;
  line-height: 14px;
  letter-spacing: -0.24px;
}
.aicalc-ranking-company {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #8f8f8f;
  line-height: 14px;
  letter-spacing: -0.24px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aicalc-ranking-value-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}
.aicalc-ranking-price {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #ffffff;
  line-height: 17px;
  letter-spacing: -0.28px;
}
.aicalc-ranking-trend-row {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
}
.aicalc-ranking-trend-pct {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #29d771;
  line-height: 14px;
  letter-spacing: -0.24px;
}
.aicalc-ranking-bottom-bar {
  background: #1a1a1a;
  border: 1px solid #262626;
  border-radius: 8px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
}
.aicalc-ranking-tags-row {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  overflow: hidden;
}
.aicalc-ranking-tag-txt {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #757575;
  line-height: 14px;
  letter-spacing: -0.24px;
  white-space: nowrap;
}
.aicalc-ranking-tag-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.aicalc-ranking-points-badge {
  background: #2069b3;
  border: 1px solid #1e4267;
  color: #f7f7f7;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  font-weight: 400;
  padding: 2px 6px;
  border-radius: 50px;
  line-height: 10px;
  letter-spacing: -0.22px;
  flex-shrink: 0;
}

.aicalc-ranking-logo .logo-fallback { color:#0c0c0c; font-size:12px; }

/* ── Header seragam semua tab (patokan Home: atas 16px, tinggi 36px, jarak ke konten 24px) ── */
#view-content > .screen-header-figma, #view-content > .screener-header-row { margin: 16px 0 4px !important; height: 36px; padding: 0 !important; }
#view-content .profile-top-bar { margin: 16px 0 24px !important; height: 36px; align-items: center; }
#view-content .profile-top-bar .screen-header-btn { width: 36px !important; height: 36px !important; }
.screen-header-title, .screen-title-sm { font-size: 16px !important; font-weight: 500 !important; color: #fff !important; letter-spacing: -0.32px; line-height: 1.2; }
.screen-header-sub, .screen-sub-sm { font-size: 12px !important; color: #a8a8a8 !important; line-height: 1.2; }
.screen-header-title-box, .screener-title-group > div:last-child { gap: 4px !important; }
.screen-header-icon-badge, .screener-title-group > div:first-child { width: 36px !important; height: 36px !important; }
.screen-header-btn, .screener-icon-btn { width: 36px !important; height: 36px !important; }
.screen-header-actions, .screener-actions-group { gap: 8px !important; }

/* Menu Home: ikon langsung berwarna (HP tidak punya hover) */
.menu-icon-tile img, .menu-btn-col:hover .menu-icon-tile img { filter: none !important; opacity: 1 !important; }
.menu-icon-tile { width: 48px; height: 48px; }
.menu-icon-tile img { width: 26px; height: 26px; }
.menu-label-txt { color: #d8d8d8; font-size: 11px; }

.dock-nav-figma { background: #0f0f0f !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.screener-pts-pill { font-family: var(--font-sans) !important; font-variant-numeric: tabular-nums; }

/* ── Header seragam + smart header + safe area (iPhone notch / Android PWA) ── */
:root { --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); }
.hdr-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.hdr-btn { width: 36px; height: 36px; min-width: 36px; flex: 0 0 36px; border-radius: 50%; background: #1a1a1a; border: 1px solid #262626; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
.hdr-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.hdr-btn:active { background: #242424; }
.hdr-dot { display: none; position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: #ef4444; border: 1.5px solid #1a1a1a; }
.profile-top-bar { justify-content: flex-end; gap: 8px; }
/* judul panjang tidak boleh mengecilkan ikon */
.screen-header-left, .screener-title-group, .profile-greeting { min-width: 0; flex: 1 1 auto; }
.screen-header-title, .screen-header-sub, .greeting-text span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Header menempel di atas (sticky) + sembunyi saat scroll turun, muncul saat scroll naik */
.app-header, #view-content > .screen-header-figma, #view-content > .screener-header-row, #view-content > div > .profile-top-bar {
  position: sticky !important; top: 0; z-index: 60;
  padding-top: calc(var(--sat) + 12px) !important; padding-bottom: 10px !important; margin-top: 0 !important; height: auto !important;
  background: #0c0c0c;
  border-bottom: 1px solid rgba(255,255,255,.06); box-sizing: border-box;
  transition: transform .25s ease, background .2s ease, border-color .2s ease;
}
#view-content > .screen-header-figma, #view-content > .screener-header-row, #view-content > div > .profile-top-bar { margin-left: -16px !important; margin-right: -16px !important; padding-left: 16px !important; padding-right: 16px !important; width: calc(100% + 32px) !important; }
.app-header { margin-bottom: 14px !important; }
body.hdr-top .app-header, body.hdr-top #view-content > .screen-header-figma, body.hdr-top #view-content > .screener-header-row, body.hdr-top #view-content > div > .profile-top-bar { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; }
#view-content > .screen-header-figma, #view-content > .screener-header-row, #view-content > div > .profile-top-bar { min-height: 0; align-items: center; }
/* Tinggi baris header dikunci 36px di semua tab (isi judul 2 baris tidak boleh mengubah posisi ikon) */
.app-header, #view-content > .screen-header-figma, #view-content > .screener-header-row, #view-content > div > .profile-top-bar { height: calc(var(--sat) + 58px) !important; }
.app-header > *, #view-content > .screen-header-figma > *, #view-content > .screener-header-row > * { max-height: 36px; }
body.hdr-hide .app-header, body.hdr-hide #view-content > .screen-header-figma, body.hdr-hide #view-content > .screener-header-row, body.hdr-hide #view-content > div > .profile-top-bar { transform: translateY(-100%); }

/* Halaman penuh (detail, berita, search, notifikasi) & modal: jangan mentok notch / home bar */
.dt-page { padding-top: calc(var(--sat) + 12px) !important; padding-bottom: calc(var(--sab) + 48px) !important; }
.signals-screen-view, .search-screen-view, .notification-screen-view { padding-top: var(--sat); }
.modal-sheet { padding-bottom: calc(var(--sab) + 16px) !important; }
.dock-nav-figma { bottom: calc(var(--sab) + 16px) !important; }
#view-content { padding-bottom: calc(var(--sab) + 130px) !important; }
/* Android PWA: tidak ada blok hitam beda warna di status bar/overscroll */
html, body { background: #0c0c0c; overscroll-behavior-y: none; }
.status-bar-mock { display: none !important; }

/* Android PWA: status bar tidak bisa transparan (warna = theme-color #0c0c0c).
   Supaya tidak terlihat blok hitam di atas glow teal, glow dibuat memudar dari atas (menyambung ke status bar). */
@media (display-mode: standalone), (display-mode: fullscreen) {
  .pattern-bg {
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0, #000 90px, #000 45%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0, #000 90px, #000 45%, rgba(0,0,0,0) 100%);
  }
}

.btn-secondary-figma { background: #151515; color: #efefef; font-weight: 500; font-size: 14px; border: 1px solid #262626; border-radius: 12px; padding: 13px; cursor: pointer; text-align: center; }
.btn-secondary-figma:active { background: #1f1f1f; }

body.has-unread .hdr-dot { display: block; }

.btn-primary-figma:disabled { background: #2a2a2a; color: #6a6a6a; cursor: not-allowed; }
.notif-unread-dot { background: #00aacc !important; }