/* ═══════════════════════════════════════════
   RPS Stock — Precision Trading Dashboard
   Aesthetic: Refined Terminal / Dark Observatory
   ═══════════════════════════════════════════ */

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

/* ── Design Tokens ── */
:root {
  /* Depth layers — deep navy void */
  --base: #06080f;
  --s1: #0b0d18;
  --s2: #111420;
  --s3: #181c2c;
  --s4: #1f243a;
  --hover: #252b44;

  /* Text */
  --t0: #eceef7;
  --t1: #b8bdd4;
  --t2: #6b7094;
  --t3: #3f4360;

  /* Primary Accent — electric aqua */
  --acc: #00f0c8;
  --acc-dim: #00c9a5;
  --acc-glow: rgba(0,240,200,0.18);
  --acc-subtle: rgba(0,240,200,0.06);

  /* Secondary — warm amber/gold */
  --gold: #f0b429;
  --gold-glow: rgba(240,180,41,0.12);

  /* Semantic */
  --green: #00e676;
  --green-bg: rgba(0,230,118,0.10);
  --red: #ff5252;
  --red-bg: rgba(255,82,82,0.10);
  --amber: #ffc107;
  --amber-bg: rgba(255,193,7,0.10);
  --blue: #448aff;
  --blue-bg: rgba(68,138,255,0.10);

  /* Borders */
  --bd: rgba(255,255,255,0.05);
  --bd-strong: rgba(255,255,255,0.08);
  --bd-acc: rgba(0,240,200,0.18);

  /* Radii — sharp, precise */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow: 0 4px 20px rgba(0,0,0,0.5);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.6);
  --glow-acc: 0 0 32px var(--acc-glow);
  --glow-gold: 0 0 28px var(--gold-glow);

  /* Typography */
  --font: 'Manrope', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  --mono: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', 'Consolas', monospace;

  /* Timing */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --fast: 120ms;
  --norm: 200ms;
  --slow: 350ms;
}

/* ── Reset ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{
  font-family:var(--font);
  font-size:14px;line-height:1.55;
  background:
    linear-gradient(180deg, rgba(0,240,200,0.045) 0%, rgba(6,8,15,0) 260px),
    linear-gradient(135deg, rgba(240,180,41,0.03) 0%, rgba(6,8,15,0) 34%),
    var(--base);
  color:var(--t0);
  min-height:100vh;
  overflow-x:hidden;
}

/* ── Dot Grid Background ── */
.bg-ambient{
  position:fixed;inset:0;z-index:-999;pointer-events:none;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.025) 1px, transparent 0);
  background-size: 32px 32px;
}
/* Ambient light blobs */
.bg-ambient::before{
  content:'';position:absolute;
  top:-20%;left:-10%;width:60%;height:60%;
  background:radial-gradient(ellipse, rgba(0,240,200,0.04) 0%, transparent 70%);
  animation:ambientA 24s ease-in-out infinite;
}
.bg-ambient::after{
  content:'';position:absolute;
  bottom:-25%;right:-15%;width:55%;height:55%;
  background:radial-gradient(ellipse, rgba(66,133,244,0.03) 0%, transparent 70%);
  animation:ambientB 30s ease-in-out infinite;
}
@keyframes ambientA{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(3%,2%) scale(1.04)}
  66%{transform:translate(-1%,-1%) scale(0.97)}
}
@keyframes ambientB{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-4%,-3%) scale(1.05)}
}

/* Subtle film grain */
.bg-noise{
  position:fixed;inset:0;z-index:-998;pointer-events:none;opacity:0.025;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px;
}

/* ── Scrollbar ── */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--s3);border-radius:2px}
::-webkit-scrollbar-thumb:hover{background:var(--t3)}

/* ── App ── */
.app{max-width:1480px;margin:0 auto;padding:0 32px 40px}

/* ═══════════════ HEADER ═══════════════ */
.header{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 0;
  border-bottom:1px solid var(--bd);
  position:sticky;top:0;z-index:100;
  background:rgba(6,8,15,0.82);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  gap:16px;
}
.header-left{display:flex;align-items:center;gap:24px}

/* Logo */
.logo{
  display:flex;align-items:center;gap:10px;
  text-decoration:none;transition:opacity var(--fast);
}
.logo:hover{opacity:0.8}

.logo-mark{
  width:36px;height:36px;border-radius:6px;
  background:var(--acc);display:flex;
  align-items:center;justify-content:center;
  font-size:17px;font-weight:800;color:#06080f;
  font-family:var(--mono);
  letter-spacing:-1px;
  box-shadow:0 0 20px var(--acc-glow);
  transition:all var(--norm) var(--ease);
}
.logo:hover .logo-mark{
  box-shadow:0 0 32px var(--acc-glow);
}

.logo-icon{
  width:36px;height:36px;border-radius:8px;
  background:linear-gradient(135deg, var(--acc), #8fffee);
  display:flex;align-items:center;justify-content:center;
  color:#06080f;font-size:17px;
  box-shadow:0 0 22px var(--acc-glow);
}

.logo-text{
  font-size:20px;font-weight:800;letter-spacing:-0.4px;
  color:var(--t0);font-family:var(--font);
}
.logo-text span{
  color:var(--acc);
}
.logo-accent{color:var(--acc)}

/* Live indicator */
.live-badge{
  display:flex;align-items:center;gap:7px;
  font-size:11px;font-weight:600;color:var(--t2);
  padding:5px 12px;background:var(--s2);
  border:1px solid var(--bd);border-radius:20px;
  font-family:var(--mono);font-size:10px;
}
.live-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--acc);
  box-shadow:0 0 8px var(--acc);
  animation:liveBeat 2s ease-in-out infinite;
}
@keyframes liveBeat{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:0.3;transform:scale(0.7)}
}
.header-stats{
  display:flex;align-items:center;gap:8px;
  padding:6px 12px;border:1px solid var(--bd);
  border-radius:999px;background:rgba(17,20,32,0.72);
  color:var(--t2);font-family:var(--mono);
  font-size:11px;font-weight:600;
}
.stat-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--acc);box-shadow:0 0 10px var(--acc);
  flex:0 0 auto;
}
.pulse{animation:liveBeat 2s ease-in-out infinite}
.stat-text{white-space:nowrap}

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

/* ── Buttons ── */
.btn{
  font-family:var(--font);font-size:12px;font-weight:600;
  padding:8px 16px;border-radius:6px;border:1px solid transparent;
  cursor:pointer;transition:all var(--fast) var(--ease);
  display:inline-flex;align-items:center;gap:5px;
  line-height:1;white-space:nowrap;
  position:relative;
}
.btn:active{transform:scale(0.97)}

.btn-primary{
  background:var(--acc);color:#06080f;border:none;font-weight:700;
}
.btn-primary:hover{
  box-shadow:0 0 24px var(--acc-glow);
  transform:translateY(-1px);
}
.btn-ghost{
  background:transparent;color:var(--t2);
  border:1px solid var(--bd-strong);
}
.btn-ghost:hover{
  color:var(--t0);border-color:var(--t3);
  background:var(--s3);
}
.btn-outline{
  background:transparent;color:var(--acc);
  border:1px solid rgba(0,240,200,0.25);
}
.btn-outline:hover{
  background:var(--acc-subtle);
  border-color:var(--acc);
}
.btn-glow{
  background:var(--acc);color:#06080f;font-weight:700;border:none;
}
.btn-glow:hover{
  box-shadow:0 0 28px var(--acc-glow);
  transform:translateY(-2px);
}
.btn-block{display:flex;width:100%;justify-content:center;margin-top:6px;padding:10px 16px}
.btn:disabled{opacity:0.25;cursor:not-allowed;transform:none!important}

/* ═══════════════ PRODUCT BRIEF ═══════════════ */
.main{padding-top:22px}
.product-brief{
  display:grid;grid-template-columns:minmax(320px,1.05fr) minmax(460px,1fr);
  gap:22px;align-items:stretch;margin:4px 0 18px;
}
.brief-copy{
  min-height:156px;padding:24px;
  border:1px solid var(--bd);
  border-radius:var(--r-lg);
  background:
    linear-gradient(135deg, rgba(0,240,200,0.11), rgba(68,138,255,0.04) 48%, rgba(240,180,41,0.06)),
    var(--s1);
  box-shadow:var(--shadow-sm);
}
.brief-kicker{
  display:inline-flex;margin-bottom:12px;
  color:var(--acc);font:700 10px/1 var(--mono);
  text-transform:uppercase;letter-spacing:1.4px;
}
.brief-copy h2{
  font-size:30px;line-height:1.12;font-weight:800;
  margin-bottom:12px;letter-spacing:0;color:var(--t0);
}
.brief-copy p{
  max-width:680px;color:var(--t1);
  font-size:14px;line-height:1.75;
}
.brief-metrics{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:10px;
}
.brief-metric{
  min-height:156px;padding:18px 14px;
  border:1px solid var(--bd);
  border-radius:var(--r-md);
  background:rgba(11,13,24,0.9);
  display:flex;flex-direction:column;justify-content:flex-end;
  box-shadow:var(--shadow-sm);
}
.metric-value{
  color:var(--t0);font-family:var(--mono);
  font-size:25px;font-weight:800;line-height:1.1;
}
.metric-label{
  margin-top:8px;color:var(--t2);
  font-size:12px;font-weight:600;
}

/* ═══════════════ MARKET TABS ═══════════════ */
.market-bar,.market-tabs{
  display:flex;align-items:center;gap:2px;
  padding:24px 0 16px;
}
.market-tabs{
  padding:0;margin:0 0 14px;
  background:rgba(11,13,24,0.72);
  border:1px solid var(--bd);
  border-radius:var(--r-md);
  overflow-x:auto;-webkit-overflow-scrolling:touch;
}

.market-tab{
  font-family:var(--font);font-size:13px;font-weight:600;
  padding:9px 20px;background:transparent;border:1px solid transparent;
  border-radius:var(--r-sm);color:var(--t2);cursor:pointer;
  transition:all var(--fast) var(--ease);
  display:flex;align-items:center;gap:8px;
  position:relative;
  min-height:42px;
}
.market-tab:hover{color:var(--t0);background:var(--s2)}
.market-tab.active{
  color:var(--acc);
  background:var(--acc-subtle);
  border-color:rgba(0,240,200,0.15);
}

.market-flag{font-size:16px}

.market-count{
  font-size:10px;font-weight:600;font-family:var(--mono);
  padding:2px 8px;background:var(--s3);color:var(--t3);
  border-radius:10px;min-width:28px;text-align:center;
}

/* ═══════════════ CONTROLS ═══════════════ */
.controls-bar{
  display:flex;justify-content:space-between;align-items:center;
  padding:18px 0;flex-wrap:wrap;gap:14px;
}
.controls-left{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.controls-right{display:flex;align-items:center;gap:10px}

.control-label{
  font-size:9px;font-weight:700;color:var(--t3);
  text-transform:uppercase;letter-spacing:1.8px;
  font-family:var(--mono);
}

/* Period Pills */
.period-pills,.period-buttons{
  display:flex;align-items:center;gap:2px;
  background:var(--s2);border:1px solid var(--bd);
  border-radius:var(--r-sm);padding:2px;
}
.period-buttons{gap:4px}
.period-btn{
  font-family:var(--mono);font-size:11px;font-weight:600;
  padding:6px 14px;background:transparent;border:none;
  border-radius:6px;color:var(--t2);
  cursor:pointer;transition:all var(--fast) var(--ease);
}
.period-btn:hover{color:var(--t0)}
.period-btn.active{
  background:var(--acc);color:#06080f;
  box-shadow:0 2px 12px var(--acc-glow);
}

/* Select */
.select-styled,.control-select{
  font-family:var(--font);font-size:12px;font-weight:500;
  padding:8px 32px 8px 12px;
  background:var(--s2);color:var(--t0);
  border:1px solid var(--bd);border-radius:var(--r-sm);
  cursor:pointer;min-width:140px;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236b7094' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;
  transition:all var(--fast);
}
.select-styled:hover,.control-select:hover{border-color:var(--t3)}
.select-styled:focus,.control-select:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 2px var(--acc-glow)}
.sector-filter{display:flex;align-items:center;gap:10px}

/* Search */
.search-box{
  display:flex;align-items:center;
  background:var(--s2);border:1px solid var(--bd);
  border-radius:var(--r-sm);padding:0 12px;
  transition:all var(--fast);min-width:240px;
}
.search-box:focus-within{
  border-color:var(--acc);
  box-shadow:0 0 0 2px var(--acc-glow);
}
.search-icon{font-size:13px;opacity:0.35;flex-shrink:0}
.search-input{
  font-family:var(--font);font-size:12px;
  padding:9px 6px;background:transparent;border:none;
  color:var(--t0);width:100%;
}
.search-input::placeholder{color:var(--t3)}
.search-input:focus{outline:none}

/* ═══════════════ TABLE ═══════════════ */
.table-container,.table-shell{
  background:var(--s1);
  border:1px solid var(--bd);
  border-radius:var(--r-lg);
  overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  box-shadow:var(--shadow-sm);
}
.table-container{
  position:relative;
  box-shadow:0 14px 42px rgba(0,0,0,0.32);
}
.table-container::before{
  content:'';position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg, transparent, var(--bd-acc), transparent);
  pointer-events:none;
}

.rps-table{
  width:100%;border-collapse:collapse;
  font-size:12.5px;table-layout:auto;
}
.rps-table thead{position:sticky;top:0;z-index:10}

.rps-table th{
  background:var(--s2);
  padding:12px 14px;text-align:left;
  font-size:9px;font-weight:700;color:var(--t3);
  text-transform:uppercase;letter-spacing:1.2px;
  border-bottom:1px solid var(--bd);
  white-space:nowrap;font-family:var(--mono);
}
.rps-table tbody tr:nth-child(even){background:rgba(255,255,255,0.012)}

.rps-table th.sortable{
  cursor:pointer;user-select:none;
  transition:color var(--fast);
}
.rps-table th.sortable:hover{color:var(--acc)}
.rps-table th.active-sort{color:var(--acc)}

.sort-arrow{font-size:8px;margin-left:2px}

.rps-table td{
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,0.025);
  color:var(--t2);
  transition:background var(--fast);
}

.rps-table tbody tr{
  transition:all var(--norm) var(--ease);
  border-left:2px solid transparent;
}

.rps-table tbody tr:hover{
  background:var(--hover);
}
.rps-table tbody tr:hover td:first-child{
  color:var(--acc) !important;
}

.rps-table tr.clickable{cursor:pointer}

/* Column widths */
.col-rank{width:40px;text-align:center;font-family:var(--mono);font-size:11px;color:var(--t3)!important}
.col-ticker{width:95px}
.col-name{width:auto;min-width:130px}
.col-sector{width:95px}
.col-price{width:85px;text-align:right}
.col-change{width:80px;text-align:right}
.col-rps{width:80px;text-align:center;font-family:var(--mono);font-weight:700}
.col-action{width:40px;text-align:center}

/* Cell styles */
.td-ticker{
  font-family:var(--mono);font-weight:600;font-size:12.5px;
  color:var(--t0)!important;letter-spacing:0.3px;
}
.td-name{color:var(--t0)!important;font-weight:600;font-size:13px}
.td-price{
  text-align:right;color:var(--t0)!important;
  font-family:var(--mono);font-weight:600;font-size:12.5px;
}
.td-change-up{
  color:var(--green)!important;text-align:right;
  font-family:var(--mono);font-weight:600;font-size:12.5px;
}
.td-change-down{
  color:var(--red)!important;text-align:right;
  font-family:var(--mono);font-weight:600;font-size:12.5px;
}

.td-rps{
  text-align:center;font-weight:700;font-size:13px;
  font-family:var(--mono);
}

/* RPS Tier Colors */
.rps-elite{color:var(--acc)!important}
.rps-strong{color:var(--green)!important}
.rps-medium{color:var(--blue)!important}
.rps-weak{color:var(--amber)!important}
.rps-veryweak{color:var(--red)!important}

/* Favorite */
.btn-fav{
  background:transparent;border:none;cursor:pointer;
  font-size:15px;transition:all var(--fast);
  opacity:0.2;padding:3px;border-radius:4px;
}
.btn-fav:hover{opacity:1;transform:scale(1.15)}
.btn-fav.active{opacity:1;filter:drop-shadow(0 0 4px rgba(240,180,41,0.6))}

/* Loading */
.loading-row td{text-align:center;padding:80px 0;color:var(--t3)}
.loading-spinner{
  width:36px;height:36px;
  border:2px solid var(--bd);
  border-top-color:var(--acc);
  border-radius:50%;
  animation:spin 0.65s linear infinite;
  margin:0 auto 14px;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ═══════════════ PAGINATION ═══════════════ */
.pagination{
  display:flex;justify-content:center;align-items:center;
  gap:12px;padding:24px 0;
}
.page-btn{
  font-family:var(--font);font-size:12px;font-weight:600;
  padding:8px 18px;background:var(--s2);
  border:1px solid var(--bd);border-radius:var(--r-sm);
  color:var(--t2);cursor:pointer;
  transition:all var(--fast) var(--ease);
}
.page-btn:hover:not(:disabled){
  background:var(--s3);color:var(--t0);
  border-color:var(--t3);
}
.page-btn:disabled{opacity:0.15;cursor:not-allowed}
.page-indicator,.page-info{
  font-size:12px;font-weight:500;font-family:var(--mono);
  color:var(--t2);padding:5px 14px;
  background:var(--s2);border:1px solid var(--bd);
  border-radius:16px;
}

/* ═══════════════ SECTOR PANEL ═══════════════ */
.section{margin-top:36px}
.section+.section{margin-top:28px}

.sector-panel,.sector-section{
  background:var(--s1);border:1px solid var(--bd);
  border-radius:var(--r-lg);overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  box-shadow:var(--shadow-sm);
}
.section-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:18px 24px;cursor:pointer;user-select:none;
  transition:background var(--fast);
}
.section-header:hover{background:var(--s2)}
.section-header h2{
  font-size:16px;font-weight:700;color:var(--t0);
  display:flex;align-items:center;gap:8px;
}
.section-chevron,.section-toggle{
  font-size:10px;color:var(--t3);
  transition:transform var(--slow) var(--ease);
}

.sector-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:12px;padding:0 24px 24px;
}

.sector-card{
  background:var(--s2);border:1px solid var(--bd);
  border-radius:var(--r-md);padding:18px;
  cursor:pointer;transition:all var(--norm) var(--ease);
  position:relative;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
}
.sector-card::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg, var(--acc-subtle), transparent);
  opacity:0;transition:opacity var(--norm);
}
.sector-card:hover{
  border-color:var(--bd-acc);
  transform:translateY(-3px);
  box-shadow:0 12px 36px rgba(0,0,0,0.5);
}
.sector-card:hover::before{opacity:1}

.sector-name{
  font-size:12px;font-weight:600;color:var(--t0);
  margin-bottom:10px;white-space:nowrap;
  overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;text-overflow:ellipsis;
  position:relative;z-index:1;
}
.sector-rps{
  font-family:var(--mono);font-size:38px;font-weight:800;line-height:1;
  color:var(--acc);position:relative;z-index:1;
}
.sector-meta{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:10px;font-size:10px;color:var(--t3);
  position:relative;z-index:1;
}
.sector-count{
  display:flex;align-items:center;gap:4px;
  font-weight:600;color:var(--t2);font-family:var(--mono);
}
.sector-hot{
  color:var(--gold);font-weight:600;font-family:var(--mono);
}

.sector-loading{
  grid-column:1/-1;text-align:center;
  padding:40px;color:var(--t3);
}

/* ═══════════════ MODALS ═══════════════ */
.modal-overlay{
  position:fixed;inset:0;
  background:rgba(2,3,5,0.85);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  z-index:200;padding:24px;
  animation:fadeIn var(--fast) var(--ease);
}
@keyframes fadeIn{from{opacity:0}}

.modal{
  background:var(--s1);
  border:1px solid var(--bd);
  border-radius:var(--r-lg);
  width:100%;max-height:85vh;overflow-y:auto;
  box-shadow:0 32px 72px rgba(0,0,0,0.8), 0 0 0 1px var(--bd);
  animation:modalSlide var(--norm) var(--ease);
}
@keyframes modalSlide{
  from{opacity:0;transform:translateY(16px) scale(0.97)}
}

.modal-sm{max-width:420px}
.modal-md{max-width:820px}
.modal-lg{max-width:1000px}

.modal-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:20px 24px;border-bottom:1px solid var(--bd);
  position:sticky;top:0;background:var(--s1);z-index:1;
}
.modal-title{
  font-size:17px;font-weight:700;
  display:flex;align-items:center;gap:10px;
}
.modal-subtitle{font-size:13px;font-weight:500;color:var(--t2)}
.modal-close{
  width:32px;height:32px;
  background:var(--s2);border:1px solid var(--bd);
  border-radius:6px;color:var(--t3);
  font-size:14px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all var(--fast);
}
.modal-close:hover{background:var(--red);border-color:var(--red);color:#fff}
.modal-body{padding:24px}

/* Stock Overview */
.overview-row{
  display:flex;gap:16px;
  padding-bottom:20px;border-bottom:1px solid var(--bd);
  margin-bottom:24px;
}
.overview-stat{
  flex:1;padding:14px 18px;
  background:var(--s2);border:1px solid var(--bd);
  border-radius:var(--r-md);
}
.overview-stat-label{
  font-size:9px;font-weight:700;color:var(--t3);
  text-transform:uppercase;letter-spacing:1.2px;
  margin-bottom:5px;font-family:var(--mono);
}
.overview-stat-value{
  font-family:var(--mono);font-size:17px;font-weight:700;color:var(--t0);
}

/* RPS Cards */
.rps-card-grid{
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:12px;margin-bottom:24px;
}
.rps-card{
  background:var(--s2);border:1px solid var(--bd);
  border-radius:var(--r-md);padding:20px;
  text-align:center;transition:all var(--norm) var(--ease);
  position:relative;
}
.rps-card::after{
  content:'';position:absolute;bottom:0;left:20%;right:20%;height:2px;
  background:var(--acc);opacity:0;border-radius:2px;
  transition:all var(--norm) var(--ease);
}
.rps-card:hover{
  border-color:var(--bd-acc);
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,0.4);
}
.rps-card:hover::after{opacity:1}
.rps-card-label{
  font-size:10px;font-weight:700;color:var(--t3);
  text-transform:uppercase;letter-spacing:1.2px;
  margin-bottom:8px;font-family:var(--mono);
}
.rps-card-value{
  font-size:40px;font-weight:800;line-height:1;margin-bottom:4px;
  font-family:var(--mono);
}
.rps-card-ret{
  font-size:11px;font-weight:500;color:var(--t2);
  font-family:var(--mono);
}
.rps-card-tag{
  display:inline-block;margin-top:8px;
  padding:2px 12px;border-radius:10px;
  font-size:10px;font-weight:600;
}

/* Chart */
.chart-container, .chart-wrapper{
  background:var(--s2);border:1px solid var(--bd);
  border-radius:var(--r-md);overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
}
.chart-toolbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 18px;border-bottom:1px solid var(--bd);
  flex-wrap:wrap;gap:8px;
}
.chart-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 18px;border-bottom:1px solid var(--bd);
}
.chart-title{font-size:13px;font-weight:700;color:var(--t0)}
.chart-pills{background:var(--s3)}
.chart-pills .period-btn{font-size:10px;padding:4px 12px}

.chart-loading{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;min-height:320px;gap:10px;color:var(--t3);
}
.chart-locked{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;min-height:260px;gap:8px;color:var(--t3);
}
.chart-locked .lock-icon{font-size:44px;opacity:0.4}
.chart-locked p{font-size:13px;color:var(--t2)}
#rpsChart{display:none}

.payment-confirm-overlay,
.payment-success-overlay{position:fixed;inset:0;z-index:250}

/* ═══════════════ AUTH ═══════════════ */
.auth-tabs{
  display:flex;gap:2px;margin-bottom:24px;
  background:var(--s2);border-radius:var(--r-sm);padding:2px;
}
.auth-tab{
  flex:1;font-family:var(--font);font-size:13px;font-weight:600;
  padding:10px;background:transparent;border:none;
  border-radius:6px;color:var(--t2);
  cursor:pointer;transition:all var(--fast);
}
.auth-tab:hover{color:var(--t0)}
.auth-tab.active{
  background:var(--acc);color:#06080f;font-weight:700;
}

.form-group{margin-bottom:16px}
.form-group label{
  display:block;font-size:10px;font-weight:700;color:var(--t2);
  margin-bottom:5px;text-transform:uppercase;
  letter-spacing:0.8px;font-family:var(--mono);
}
.form-group input{
  width:100%;font-family:var(--font);font-size:13px;
  padding:11px 14px;background:var(--s2);
  border:1px solid var(--bd);border-radius:var(--r-sm);
  color:var(--t0);transition:all var(--fast);
}
.form-group input:focus{
  outline:none;border-color:var(--acc);
  box-shadow:0 0 0 2px var(--acc-glow);
}
.form-group input::placeholder{color:var(--t3)}

.form-error{
  background:var(--red-bg);border:1px solid rgba(255,82,82,0.25);
  color:var(--red);padding:10px 14px;border-radius:var(--r-sm);
  font-size:12px;font-weight:500;margin-bottom:16px;
}
.form-success{
  background:var(--green-bg);border:1px solid rgba(0,230,118,0.25);
  color:var(--green);padding:10px 14px;border-radius:var(--r-sm);
  font-size:12px;font-weight:500;margin-bottom:16px;
}
.token-box{
  background:var(--base);border:1px solid var(--bd);
  padding:12px 16px;border-radius:var(--r-sm);
  font-family:var(--mono);font-size:11px;
  word-break:break-all;margin:8px 0;color:var(--acc);
}
.token-hint{font-size:11px;color:var(--t3);margin-top:4px}

.forgot-link{text-align:center;margin-top:12px}
.forgot-link a{color:var(--t3);font-size:12px;text-decoration:none;transition:color var(--fast)}
.forgot-link a:hover{color:var(--acc)}

/* ═══════════════ USER MENU ═══════════════ */
.user-menu{position:relative}
.user-avatar{
  width:28px;height:28px;border-radius:50%;
  background:linear-gradient(135deg,var(--acc),#00897b);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:#06080f;
}
.user-dropdown{
  position:absolute;top:calc(100% + 8px);right:0;
  background:var(--s1);border:1px solid var(--bd);
  border-radius:var(--r-md);min-width:200px;
  box-shadow:var(--shadow-lg);z-index:300;
  overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  animation:modalSlide 0.15s var(--ease);
}
.user-dropdown button{
  display:block;width:100%;text-align:left;
  padding:12px 16px;background:transparent;border:none;
  color:var(--t2);font-size:12px;font-weight:500;
  cursor:pointer;transition:all var(--fast);
  font-family:var(--font);
}
.user-dropdown button:hover{background:var(--hover);color:var(--t0)}
.user-dropdown-header{
  padding:12px 16px;border-bottom:1px solid var(--bd);
}
.plan-badge{
  font-size:9px;font-weight:700;padding:2px 10px;border-radius:10px;
  text-transform:uppercase;letter-spacing:0.5px;
  font-family:var(--mono);
}
.plan-badge.free{background:var(--s3);color:var(--t3)}
.plan-badge.premium{
  background:rgba(0,240,200,0.1);color:var(--acc);
  border:1px solid rgba(0,240,200,0.2);
}
.plan-badge.vip{
  background:var(--gold-glow);color:var(--gold);
  border:1px solid rgba(240,180,41,0.25);
}

/* ═══════════════ PRICING ═══════════════ */
.pricing-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
}
.pricing-card{
  background:var(--s2);border:1px solid var(--bd);
  border-radius:var(--r-lg);padding:24px 20px;
  text-align:center;position:relative;
  transition:all var(--norm) var(--ease);
}
.pricing-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.pricing-card-featured{
  border-color:var(--bd-acc);
  box-shadow:var(--glow-acc), 0 0 0 2px rgba(0,240,200,0.06);
  background:linear-gradient(180deg, rgba(0,240,200,0.04) 0%, var(--s2) 30%);
}
.pricing-badge{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:var(--acc);color:#06080f;
  font-size:10px;font-weight:800;padding:4px 16px;
  border-radius:10px;letter-spacing:0.5px;
}
.pricing-name{font-size:16px;font-weight:700;color:var(--t0);margin-bottom:6px}
.pricing-price{
  font-size:44px;font-weight:800;color:var(--t0);
  line-height:1;margin:12px 0 2px;font-family:var(--mono);
}
.pricing-unit{font-size:14px;font-weight:500;color:var(--t3)}
.pricing-yearly{
  font-size:11px;font-weight:600;color:var(--acc);
  margin-bottom:20px;font-family:var(--mono);
}
.pricing-features{list-style:none;text-align:left;margin-bottom:20px}
.pricing-features li{
  padding:6px 0;font-size:12px;font-weight:500;
  color:var(--t2);border-bottom:1px solid rgba(255,255,255,0.03);
}
.pricing-features li:last-child{border-bottom:none}
.payment-notice{margin-top:20px;font-size:11px;color:var(--t3);text-align:center}

/* ═══════════════ PAYMENT ═══════════════ */
.pay-method-bar{
  display:flex;gap:10px;justify-content:center;padding:4px 0;
}
.pay-method-btn{
  background:var(--s2);color:var(--t2);
  border:1px solid var(--bd);padding:8px 20px;
  border-radius:var(--r-sm);cursor:pointer;
  font-size:12px;font-weight:600;font-family:var(--font);
  transition:all var(--fast);display:flex;align-items:center;gap:6px;
}
.pay-method-btn:hover{background:var(--s3);color:var(--t0)}
.pay-method-btn.active{
  background:var(--acc-subtle);border-color:var(--bd-acc);
  color:var(--acc);box-shadow:0 0 16px var(--acc-glow);
}

/* ═══════════════ UTILITIES ═══════════════ */
.hidden{display:none!important}
.text-up{color:var(--green)}
.text-down{color:var(--red)}
hr.divider{border:none;border-top:1px solid var(--bd);margin:16px 0}

/* ═══════════════ RESPONSIVE ═══════════════ */

/* ── Skeleton Loading ── */
.skeleton-row td { padding: 12px 10px !important; }
.skeleton-box {
  height: 14px;
  background: linear-gradient(90deg, var(--s3) 25%, var(--s4) 50%, var(--s3) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: 4px;
  display: inline-block;
  width: 100%;
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Smooth table transitions ── */
.rps-table tbody tr {
  transition: background-color 0.15s ease;
}
.rps-table tbody tr:hover {
  background: var(--hover) !important;
}

/* ── Better sector select ── */
.control-select {
  scrollbar-width: thin;
  scrollbar-color: var(--s4) transparent;
}

/* ── Page transition animation ── */
#tableBody tr {
  animation: fadeIn 0.2s ease-out;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Improved pagination buttons ── */
.page-btn:not(:disabled):hover {
  background: var(--acc-glow);
  border-color: var(--acc);
  color: var(--acc);
}
.page-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* ── Better scrollbar for table container ── */
.table-container::-webkit-scrollbar {
  height: 6px;
}
.table-container::-webkit-scrollbar-track {
  background: var(--s2);
}
.table-container::-webkit-scrollbar-thumb {
  background: var(--s4);
  border-radius: 3px;
}
.table-container::-webkit-scrollbar-thumb:hover {
  background: var(--t3);
}

@media(max-width:1200px){
  .rps-card-grid{grid-template-columns:repeat(3,1fr)}
}

@media(max-width:1024px){
  .app{padding:0 18px}
  .rps-table th,.rps-table td{padding:10px 10px;font-size:11px}
}

@media(max-width:768px){
  .table-container{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .rps-table{min-width:900px;font-size:10px}
  .pricing-grid{grid-template-columns:1fr}
  .rps-card-grid{grid-template-columns:repeat(2,1fr)}
  .overview-row{flex-direction:column;gap:10px}
  .controls-bar{flex-direction:column;align-items:flex-start}
  .controls-left{flex-direction:column;align-items:flex-start;width:100%}
  .search-box{min-width:180px;width:100%}
  .header{flex-direction:column;align-items:flex-start;gap:10px}
  .header-right{width:100%;justify-content:flex-end}
  .market-bar{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .rps-table th,.rps-table td{padding:8px 6px;font-size:10px}
  .rps-card-value{font-size:30px}
  .pricing-price{font-size:32px}
  .sector-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .sector-card-score,.sector-rps{font-size:28px}
}

@media(max-width:480px){
  .period-pills{overflow-x:auto;width:100%}
  .controls-left{width:100%}
  .controls-right{width:100%}
  .pay-method-bar{flex-wrap:wrap}
  .market-tab{padding:8px 12px;font-size:12px}
  .market-flag{font-size:14px}
}

/* ── Mobile Enhancements ── */
@media(max-width:768px){
  .col-sector{display:none}
  .col-change{width:65px;text-align:right}
  .col-rps{width:65px}
  .col-price{width:70px;text-align:right}
  .col-ticker{width:80px}
  .market-tab{padding:6px 10px;font-size:11px}
  .logo-text{font-size:16px}
  .header{padding:10px 0}
  .period-pill{padding:4px 10px;font-size:11px}
  .section-header h2{font-size:15px}
  .pagination{gap:6px}
  .page-btn{padding:6px 10px;font-size:11px}
  .control-select{max-width:120px;font-size:12px}
}

@media(max-width:480px){
  .col-name{min-width:80px;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .rps-table{min-width:700px;font-size:9px}
  .rps-table th,.rps-table td{padding:6px 4px}
  .rps-table th{font-size:7px;letter-spacing:0.5px}
  .market-tab{padding:4px 8px;font-size:10px}
  .market-tabs{gap:4px}
  .stock-overview{flex-wrap:wrap;gap:6px}
  .overview-item{padding:6px 10px;min-width:80px}
  .overview-value{font-size:16px}
  .overview-label{font-size:10px}
  .rps-card-value{font-size:24px}
  .rps-card-label{font-size:9px}
  .rps-card{padding:10px}
  .modal-title{font-size:13px}
  #btnFullPage{font-size:11px;padding:4px 8px}
}

/* (duplicate keyframes removed) */

/* Market tab transition */
.market-tab {
    transition: all 0.2s ease;
}
.market-tab:hover {
    transform: translateY(-1px);
}
.market-tab.active {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 255, 136, 0.3);
}

/* Sector heatmap improvements */
.sector-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sector-card:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* Period button hover */
.period-btn {
    transition: all 0.15s ease;
}
.period-btn:hover:not(.disabled) {
    transform: translateY(-1px);
}

/* Pagination button improvements */
#btnPrev, #btnNext {
    transition: all 0.15s ease;
}
#btnPrev:hover:not(:disabled), #btnNext:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,255,136,0.2);
}

/* Table row hover enhancement */
.rps-table tbody tr:hover {
    background: rgba(0, 255, 136, 0.05) !important;
    transition: background 0.15s ease;
}

/* Responsive improvements for small screens */
@media (max-width: 768px) {
    .hero-section {
        padding: 1rem !important;
    }
    .hero-stats {
        display: none !important;
    }
    .rps-table th, .rps-table td {
        padding: 6px 4px !important;
        font-size: 11px !important;
    }
    .market-tabs {
        flex-wrap: wrap;
        gap: 4px !important;
    }
    .market-tab {
        font-size: 12px !important;
        padding: 4px 8px !important;
    }
}

/* (duplicate scrollbar styles removed) */

/* ═══════════════ COMPATIBILITY FIXES ═══════════════ */
/* stock-overview / overview-item aliases */
.stock-overview { display:flex; gap:16px; padding-bottom:20px; border-bottom:1px solid var(--bd); margin-bottom:24px; }
.overview-item { flex:1; padding:14px 18px; background:var(--s2); border:1px solid var(--bd); border-radius:var(--r-md); }
.overview-label { display:block; font-size:9px; font-weight:700; color:var(--t3); text-transform:uppercase; letter-spacing:1.2px; margin-bottom:5px; font-family:var(--mono); }
.overview-value { display:block; font-family:var(--mono); font-size:17px; font-weight:700; color:var(--t0); }

/* rps-cards alias for rps-card-grid */
.rps-cards { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:24px; }
@media(max-width:1200px){ .rps-cards{grid-template-columns:repeat(3,1fr)} }
@media(max-width:768px){ .rps-cards{grid-template-columns:repeat(2,1fr)} }

/* period-pill alias for period-btn */
.period-pill { font-family:var(--mono); font-size:11px; font-weight:600; padding:6px 14px; background:transparent; border:none; border-radius:6px; color:var(--t2); cursor:pointer; transition:all var(--fast) var(--ease); }
.period-pill:hover { color:var(--t0); }
.period-pill.active { background:var(--acc); color:#06080f; box-shadow:0 2px 12px var(--acc-glow); }

/* forgot-password-link alias */
.forgot-password-link { text-align:center; margin-top:12px; }
.forgot-password-link a { color:var(--t3); font-size:12px; text-decoration:none; transition:color var(--fast); }
.forgot-password-link a:hover { color:var(--acc); }

/* token-display alias for token-box */
#resetTokenDisplay { background:var(--base); border:1px solid var(--bd); padding:12px 16px; border-radius:var(--r-sm); font-family:var(--mono); font-size:11px; word-break:break-all; margin:8px 0; color:var(--acc); }

/* payment-note */
.payment-note { margin-top:20px; font-size:11px; color:var(--t3); text-align:center; }

/* ── Composite Sort Button ── */
.composite-btn {
  background: transparent;
  border: 1px solid var(--bd);
  border-radius: 6px;
  color: var(--t2);
  font-size: 11px;
  padding: 5px 12px;
  cursor: pointer;
  transition: all var(--fast) var(--ease);
  margin-left: 4px;
}
.composite-btn:hover { color: var(--acc); border-color: var(--acc); }
.composite-btn.active {
  background: rgba(0,230,192,0.12);
  border-color: var(--acc);
  color: var(--acc);
  box-shadow: 0 0 8px var(--acc-glow);
}
.composite-btn .sort-arrow { font-size: 10px; margin-left: 2px; }

/* ── Composite Score Column ── */
.col-composite {
  width: 72px;
  text-align: center;
  font-family: var(--mono);
  font-weight: 700;
  color: var(--acc);
  font-size: 11px;
  white-space: nowrap;
}
.td-composite {
  text-align: center;
  font-weight: 700;
  font-size: 12px;
  font-family: var(--mono);
  opacity: 0.85;
}
.td-composite.td-rps-active {
  opacity: 1;
  background: rgba(0,230,192,0.06);
}

/* ── Active RPS column highlight ── */
.td-rps-active {
  background: rgba(0,230,192,0.06);
  border-left: 2px solid var(--acc);
  border-right: 2px solid var(--acc);
}

/* ═══════════════════════════════════════════════════════
   MOBILE OPTIMIZATIONS — Complete Responsive Overhaul
   Breakpoints: 768px (tablet), 480px (phone), 360px (small phone)
   ═══════════════════════════════════════════════════════ */

/* ── 768px: Tablet ── */
@media (max-width: 768px) {

  /* App padding */
  .app { padding: 0 14px 32px; }

  /* ── Header ── */
  .header {
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    padding: 10px 0;
    gap: 8px;
  }
  .header-left { gap: 10px; flex: 1; min-width: 0; }
  .logo-text { font-size: 16px; }
  /* Hide live badge on tablet to save space */
  .header-stats { display: none; }
  .header-right { gap: 6px; flex-shrink: 0; }
  .btn { padding: 7px 12px; font-size: 11px; }

  /* ── Product Brief ── */
  .product-brief {
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 4px 0 14px;
  }
  .brief-copy { min-height: auto; padding: 18px; }
  .brief-copy h2 { font-size: 22px; }
  .brief-copy p { font-size: 13px; }
  .brief-metrics {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
  .brief-metric { min-height: 80px; padding: 12px 10px; }
  .metric-value { font-size: 18px; }
  .metric-label { font-size: 10px; margin-top: 4px; }

  /* ── Market Tabs ── */
  .market-tabs {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-bottom: 10px;
    gap: 0;
  }
  .market-tabs::-webkit-scrollbar { display: none; }
  .market-tab {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    font-size: 12px;
    gap: 4px;
    justify-content: center;
    min-height: 38px;
    white-space: nowrap;
  }
  .market-flag { font-size: 14px; }
  .market-count { font-size: 9px; padding: 1px 5px; }

  /* ── Controls Bar ── */
  .controls-bar {
    flex-direction: column;
    align-items: stretch;
    padding: 12px 0;
    gap: 10px;
  }
  .controls-left {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 100%;
  }
  .controls-right { width: 100%; }

  /* Period buttons: scrollable row */
  .period-buttons {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-shrink: 0;
    max-width: 100%;
  }
  .period-buttons::-webkit-scrollbar { display: none; }
  .period-btn { padding: 5px 10px; font-size: 10px; white-space: nowrap; }
  .control-label { display: none; } /* hide "周期" "板块" labels */

  /* Composite button */
  .composite-btn { padding: 5px 10px; font-size: 10px; }

  /* Sector select */
  .sector-filter { flex: 1; min-width: 0; }
  .control-select { min-width: 0; width: 100%; font-size: 11px; }

  /* Search box */
  .search-box { min-width: 0; width: 100%; }
  .search-input { font-size: 13px; }

  /* ── Table ── */
  .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--r-md);
  }
  .rps-table { min-width: 680px; font-size: 11px; }
  .rps-table th { padding: 8px 8px; font-size: 8px; }
  .rps-table td { padding: 9px 8px; }

  /* Hide less critical columns on tablet */
  .col-sector { display: none; }
  .col-rank { width: 30px; }
  .col-ticker { width: 70px; }
  .col-name { min-width: 90px; }
  .col-price { width: 68px; }
  .col-change { width: 60px; }
  .col-rps { width: 58px; }
  .col-composite { width: 60px; }
  .col-action { width: 32px; }

  .td-name { font-size: 12px; }
  .td-ticker { font-size: 11px; }
  .td-price { font-size: 11px; }
  .td-change-up, .td-change-down { font-size: 11px; }
  .td-rps { font-size: 12px; }

  /* ── Pagination ── */
  .pagination { gap: 8px; padding: 16px 0; }
  .page-btn { padding: 7px 14px; font-size: 11px; }
  .page-info { font-size: 11px; padding: 4px 10px; }

  /* ── Sector Panel ── */
  .sector-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
  .section-header h2 { font-size: 14px; }

  /* ── Modals ── */
  .modal-overlay { padding: 12px; align-items: flex-end; }
  .modal {
    max-height: 92vh;
    border-radius: var(--r-lg) var(--r-lg) 0 0; /* bottom sheet style */
  }
  .modal-sm, .modal-md, .modal-lg { max-width: 100%; }
  .modal-header { padding: 16px 18px; }
  .modal-title { font-size: 15px; }
  .modal-body { padding: 16px 18px; }

  /* Stock modal chart */
  .rps-card-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .rps-card { padding: 12px; }
  .rps-card-value { font-size: 28px; }
  .rps-card-label { font-size: 9px; }
  .overview-row { flex-wrap: wrap; gap: 8px; }
  .overview-stat { flex: 1 1 calc(50% - 4px); min-width: 0; padding: 10px 12px; }
  .overview-stat-value { font-size: 14px; }

  /* Pricing modal */
  .pricing-grid { grid-template-columns: 1fr; gap: 12px; }
  .pricing-price { font-size: 36px; }
  .pricing-card { padding: 18px 16px; }

  /* Pay method */
  .pay-method-bar { gap: 8px; }
  .pay-method-btn { padding: 8px 16px; font-size: 12px; flex: 1; justify-content: center; }
}

/* ── 480px: Phone ── */
@media (max-width: 480px) {

  .app { padding: 0 10px 24px; }

  /* ── Header ── */
  .logo-text { font-size: 15px; }
  .logo-icon { width: 30px; height: 30px; font-size: 15px; }
  .btn { padding: 6px 10px; font-size: 11px; }
  /* Hide upgrade button text on very small screens, keep icon */
  #btnUpgrade .btn-icon { margin-right: 0; }

  /* ── Product Brief: hide on phone to save space ── */
  .product-brief { display: none; }

  /* ── Market Tabs ── */
  .market-tab { padding: 7px 8px; font-size: 11px; }
  .market-count { display: none; } /* hide count badge on small phones */

  /* ── Controls Bar ── */
  .controls-bar { gap: 8px; }
  .controls-left { gap: 6px; }

  /* Period buttons: compact */
  .period-btn { padding: 4px 8px; font-size: 9px; }
  .composite-btn { padding: 4px 8px; font-size: 9px; }

  /* ── Table ── */
  .rps-table { min-width: 560px; font-size: 10px; }
  .rps-table th { padding: 7px 5px; font-size: 7.5px; letter-spacing: 0.3px; }
  .rps-table td { padding: 8px 5px; }

  /* Hide price and change columns on small phones — keep core RPS data */
  .col-price { display: none; }
  .col-change { display: none; }
  .col-rank { width: 24px; }
  .col-ticker { width: 60px; }
  .col-name { min-width: 80px; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .col-rps { width: 50px; }
  .col-composite { width: 52px; }
  .col-action { width: 28px; }

  .td-name { font-size: 11px; }
  .td-ticker { font-size: 10px; }
  .td-rps { font-size: 11px; }
  .td-composite { font-size: 11px; }

  /* ── Pagination ── */
  .pagination { gap: 6px; padding: 12px 0; }
  .page-btn { padding: 6px 12px; font-size: 10px; }
  .page-info { font-size: 10px; padding: 4px 8px; }

  /* ── Sector Panel ── */
  .sector-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .sector-card { padding: 10px; }
  .sector-card-score, .sector-rps { font-size: 22px; }

  /* ── Modals ── */
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal { border-radius: 16px 16px 0 0; max-height: 95vh; }
  .modal-header { padding: 14px 16px; }
  .modal-title { font-size: 14px; gap: 8px; }
  .modal-body { padding: 14px 16px; }

  /* Stock modal: RPS cards 2 columns */
  .rps-card-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; margin-bottom: 16px; }
  .rps-card { padding: 10px 8px; }
  .rps-card-value { font-size: 24px; }
  .overview-stat { flex: 1 1 calc(50% - 4px); padding: 8px 10px; }
  .overview-stat-value { font-size: 13px; }

  /* Pricing: single column, compact */
  .pricing-card { padding: 16px 14px; }
  .pricing-price { font-size: 32px; }
  .pricing-name { font-size: 14px; }
  .pricing-features li { font-size: 11px; padding: 5px 0; }

  /* Pay method: full width buttons */
  .pay-method-bar { flex-direction: row; gap: 6px; }
  .pay-method-btn { flex: 1; padding: 10px 8px; font-size: 11px; }
}

/* ── 360px: Very small phones ── */
@media (max-width: 360px) {

  .app { padding: 0 8px 20px; }

  .logo-text { display: none; } /* show only logo icon */
  .header-stats { display: none; }

  .market-tab { padding: 6px 6px; font-size: 10px; gap: 2px; }
  .market-flag { font-size: 13px; }

  .period-btn { padding: 3px 6px; font-size: 9px; }
  .composite-btn { padding: 3px 6px; font-size: 9px; }

  .rps-table { min-width: 480px; }
  .rps-table th { font-size: 7px; padding: 6px 4px; }
  .rps-table td { padding: 7px 4px; }

  .col-name { max-width: 80px; }
  .col-rps { width: 44px; }
}

/* ── Touch UX improvements ── */
@media (hover: none) and (pointer: coarse) {
  /* Larger touch targets */
  .market-tab { min-height: 44px; }
  .period-btn { min-height: 36px; }
  .page-btn { min-height: 40px; }
  .btn { min-height: 36px; }
  .btn-fav { min-height: 36px; min-width: 36px; opacity: 0.5; }

  /* Remove hover transforms on touch */
  .rps-table tbody tr:hover { background: transparent; }
  .rps-table tbody tr:hover td:first-child { color: var(--t2) !important; }
  .market-tab:hover { transform: none; }
  .pricing-card:hover { transform: none; }

  /* Active state feedback */
  .market-tab:active { background: var(--s3); }
  .period-btn:active { background: var(--s3); }
  .page-btn:active { background: var(--s3); }
  .rps-table tbody tr:active { background: var(--hover); }
}

/* ── Smooth horizontal scroll indicator ── */
@media (max-width: 768px) {
  .table-container {
    /* Fade edges to indicate scrollability */
    -webkit-mask-image: linear-gradient(to right, transparent 0px, black 6px, black calc(100% - 6px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0px, black 6px, black calc(100% - 6px), transparent 100%);
  }
  /* Custom thin scrollbar for table */
  .table-container::-webkit-scrollbar { height: 3px; }
  .table-container::-webkit-scrollbar-track { background: var(--s2); }
  .table-container::-webkit-scrollbar-thumb { background: var(--bd-strong); border-radius: 2px; }
}

/* ── Hide button text on small phones, keep icon ── */
@media (max-width: 360px) {
  .btn-text-desktop { display: none; }
  #btnLogin { padding: 6px 8px; }
}

/* ═══════════════ FINAL MOBILE POLISH ═══════════════ */

/* Table right-edge scroll hint */
@media (max-width: 768px) {
  .table-container::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 24px;
    background: linear-gradient(to right, transparent, rgba(10,13,22,0.7));
    pointer-events: none;
    z-index: 5;
  }
  .pagination {
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ── 360px: keep upgrade button usable ── */
@media (max-width: 360px) {
  #btnUpgrade {
    min-width: 36px;
    padding: 6px 8px;
  }
  #btnUpgrade .btn-icon { font-size: 16px; }
  .header-right { gap: 4px; }
  .market-tab {
    padding: 6px 6px !important;
    font-size: 10px !important;
    gap: 2px !important;
  }
  .market-name { display: none; }
  .period-btn, .period-pill {
    padding: 4px 7px !important;
    font-size: 9px !important;
  }
  .composite-btn {
    padding: 4px 7px !important;
    font-size: 9px !important;
  }
}

/* ── Touch: larger tap targets ── */
@media (hover: none) and (pointer: coarse) {
  .period-btn, .period-pill {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .composite-btn { min-height: 36px; }
  .page-btn { min-height: 40px; min-width: 40px; }
  .btn-fav { min-height: 36px; min-width: 36px; font-size: 16px; }
  tr.clickable:active { background: var(--s3) !important; }
}


/* ── Export Button ── */
.btn-export{background:linear-gradient(135deg,#1a3a5c,#2980b9);color:#fff;border:none;padding:7px 14px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:5px;transition:all .2s;white-space:nowrap}
.btn-export:hover{background:linear-gradient(135deg,#2980b9,#3498db);transform:translateY(-1px);box-shadow:0 4px 12px rgba(41,128,185,.35)}
.btn-export:active{transform:scale(0.97)}

/* ── Export Modal ── */
.modal-export{width:480px;max-width:95vw;border-radius:16px}
.export-market-info{display:flex;align-items:center;gap:10px;margin-bottom:16px;padding:10px 14px;background:#f8f9fa;border-radius:8px}
.export-market-badge{background:#1a3a5c;color:#fff;padding:3px 10px;border-radius:20px;font-size:13px;font-weight:700}
.export-count-info{font-size:13px;color:#666}
.export-section{margin-bottom:18px}
.export-section-title{font-size:12px;font-weight:700;color:#999;text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px}
.export-filters{display:flex;flex-direction:column;gap:10px}
.export-filter-row{display:flex;align-items:center;gap:12px}
.export-filter-row label{font-size:13px;color:#555;min-width:72px;font-weight:500}
.export-filter-row .control-select{flex:1;font-size:13px}
.export-rps-filter{display:flex;align-items:center;gap:8px;flex:1}
.export-rps-filter .control-select{flex:1}
.export-period-hint{font-size:11px;color:#aaa;white-space:nowrap}
.export-format-btns{display:flex;gap:10px}
.export-format-option{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;border:2px solid #e0e0e0;border-radius:10px;cursor:pointer;transition:all .2s;background:#fff}
.export-format-option input{display:none}
.export-format-option:hover{border-color:#2980b9;background:#f0f8ff}
.export-format-option.selected{border-color:#2980b9;background:#e8f4fd}
.format-icon{font-size:22px}
.format-name{font-size:13px;font-weight:700;color:#333}
.format-desc{font-size:11px;color:#999}
.export-limit-tip{background:#fff8e1;border:1px solid #ffd54f;border-radius:8px;padding:9px 12px;font-size:12px;color:#795548;margin-top:4px}
.export-limit-tip a{color:#e67e22;font-weight:600}
.btn-export-confirm{min-width:120px;justify-content:center}
.modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:16px 20px;border-top:1px solid #f0f0f0}



/* Cross-market opportunity radar */
.radar-panel {
    margin: 1.25rem 0 1.5rem;
    padding: 1.35rem;
    border: 1px solid rgba(95, 168, 211, .22);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(23, 43, 77, .86), rgba(14, 25, 47, .94));
    box-shadow: 0 12px 35px rgba(0, 0, 0, .16);
}
.radar-title-row, .source-health-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.radar-panel h2 { margin: .2rem 0 .45rem; font-size: 1.35rem; color: #f4f8ff; }
.radar-panel h3 { margin: .18rem 0 0; font-size: 1rem; color: #e9f2ff; }
.radar-panel p { margin: 0; color: #aebfd9; font-size: .88rem; line-height: 1.55; }
.radar-period { flex: 0 0 auto; padding: .42rem .7rem; border-radius: 999px; color: #82dbff; background: rgba(51, 157, 211, .16); border: 1px solid rgba(115, 209, 255, .3); font-weight: 700; font-size: .8rem; }
.radar-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin-top: 1.1rem; }
.radar-card { min-width: 0; padding: .9rem; border: 1px solid rgba(159, 189, 226, .16); border-radius: 12px; background: rgba(3, 12, 29, .38); }
.radar-market { display: flex; justify-content: space-between; align-items: center; margin-bottom: .72rem; color: #dceaff; font-weight: 700; }
.radar-count { color: #8ea7c9; font-size: .76rem; font-weight: 500; }
.radar-leader { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .3rem .6rem; padding: .48rem 0; border-top: 1px solid rgba(159, 189, 226, .12); }
.radar-leader:first-of-type { border-top: 0; }
.radar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #f6f9ff; font-size: .86rem; }
.radar-ticker, .radar-sector { color: #8298b9; font-size: .72rem; }
.radar-score { align-self: center; color: #69e2ab; font-weight: 800; font-variant-numeric: tabular-nums; }
.radar-empty, .radar-loading { color: #8fa7c6; font-size: .84rem; padding: .7rem 0; }
.source-health-heading { margin-top: 1.2rem; padding-top: 1.05rem; border-top: 1px solid rgba(159, 189, 226, .16); }
.source-health-heading p { max-width: 29rem; text-align: right; }
.source-health-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; margin-top: .8rem; }
.source-health-card { min-width: 0; padding: .72rem .8rem; border-radius: 10px; background: rgba(3, 12, 29, .32); border: 1px solid rgba(159, 189, 226, .13); }
.source-health-card strong { display: block; color: #e5efff; font-size: .84rem; }
.source-health-meta { margin-top: .3rem; color: #8ca5c5; font-size: .73rem; }
.source-health-chain { margin-top: .4rem; color: #b7cae4; font-size: .71rem; line-height: 1.45; word-break: break-word; }
@media (max-width: 980px) { .radar-grid, .source-health-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .radar-panel { padding: 1rem; } .radar-title-row, .source-health-heading { flex-direction: column; } .source-health-heading p { text-align: left; } .radar-grid, .source-health-grid { grid-template-columns: 1fr; } }


/* Rules-based individual RPS research */
.research-summary { margin: .9rem 0 1rem; padding: .95rem 1rem; border: 1px solid rgba(0, 230, 192, .18); border-radius: 12px; background: rgba(0, 230, 192, .045); }
.research-loading, .research-error { color: var(--text-3, #7c7ca6); font-size: .84rem; }
.research-heading { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.research-heading strong { color: var(--text-1, #e8e8ed); font-size: .92rem; }
.research-signal { padding: .28rem .55rem; border-radius: 999px; background: rgba(0, 230, 192, .12); color: #00d7b5; font-weight: 700; font-size: .76rem; white-space: nowrap; }
.research-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; margin-top: .75rem; }
.research-metric { padding: .55rem .6rem; border-radius: 8px; background: rgba(8, 16, 36, .52); }
.research-metric-label { display: block; color: var(--text-3, #7c7ca6); font-size: .7rem; }
.research-metric-value { display: block; margin-top: .18rem; color: var(--text-1, #e8e8ed); font-size: .92rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.research-note { margin: .65rem 0 0; color: var(--text-3, #7c7ca6); font-size: .72rem; line-height: 1.45; }
@media (max-width: 560px) { .research-metrics { grid-template-columns: 1fr; } .research-heading { align-items: flex-start; flex-direction: column; gap: .4rem; } }


/* Market breadth and sector pulse */
.pulse-panel { margin: 1.2rem 0 1.5rem; padding: 1.35rem; border: 1px solid rgba(251, 191, 36, .18); border-radius: 16px; background: linear-gradient(135deg, rgba(47, 37, 20, .48), rgba(14, 25, 47, .92)); }
.pulse-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.pulse-panel h2 { margin: .2rem 0 .45rem; color: #f6f8ff; font-size: 1.28rem; }
.pulse-panel p { margin: 0; color: #aebfd9; font-size: .88rem; line-height: 1.55; }
.pulse-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin-top: 1rem; }
.pulse-card { min-width: 0; padding: .92rem; border: 1px solid rgba(251, 191, 36, .14); border-radius: 12px; background: rgba(3, 12, 29, .35); }
.pulse-market { display: flex; justify-content: space-between; gap: .6rem; color: #edf3ff; font-weight: 700; font-size: .9rem; }
.pulse-breadth { margin-top: .66rem; display: flex; align-items: baseline; gap: .35rem; }
.pulse-breadth strong { color: #f6c65b; font-size: 1.45rem; font-variant-numeric: tabular-nums; }
.pulse-breadth span, .pulse-meta { color: #8ea7c9; font-size: .73rem; }
.pulse-bar { height: 6px; margin: .48rem 0 .72rem; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, .08); }
.pulse-bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #e6aa3c, #f8d57d); }
.pulse-sectors { padding-top: .6rem; border-top: 1px solid rgba(159, 189, 226, .11); }
.pulse-sector { display: flex; justify-content: space-between; gap: .5rem; padding: .2rem 0; color: #b9cbe6; font-size: .73rem; }
.pulse-sector span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pulse-sector span:last-child { color: #6fe0ad; font-variant-numeric: tabular-nums; }
@media (max-width: 980px) { .pulse-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pulse-panel { padding: 1rem; } .pulse-title-row { flex-direction: column; } .pulse-grid { grid-template-columns: 1fr; } }