/* ============================================
   FIRSTOCKSEC - Concept UI v3
   With dark/light theme support
   ============================================ */

/* === Theme Variables === */
.theme {
    --bg: #0a0e17;
    --bg-elevated: #111827;
    --bg-card: rgba(255,255,255,0.03);
    --bg-card-hover: rgba(255,255,255,0.06);
    --bg-input: rgba(255,255,255,0.04);
    --border: rgba(255,255,255,0.06);
    --border-strong: rgba(255,255,255,0.1);
    --text: #f0f4f8;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --accent: #3b82f6;
    --accent-light: #60a5fa;
    --green: #22c55e;
    --green-bg: rgba(34,197,94,0.12);
    --red: #ef4444;
    --red-bg: rgba(239,68,68,0.12);
    --gold: #f59e0b;
    --gold-bg: rgba(245,158,11,0.12);
    --blue-bg: rgba(59,130,246,0.12);
    --glass-bg: rgba(10,14,23,0.85);
    --shadow: rgba(0,0,0,0.3);
}

/* Light theme */
.theme.fs-light {
    --bg: #f1f5f9;
    --bg-elevated: #ffffff;
    --bg-card: rgba(255,255,255,0.9);
    --bg-card-hover: rgba(255,255,255,1);
    --bg-input: rgba(0,0,0,0.03);
    --border: rgba(0,0,0,0.08);
    --border-strong: rgba(0,0,0,0.12);
    --text: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --accent: #2563eb;
    --accent-light: #3b82f6;
    --green: #16a34a;
    --green-bg: rgba(22,163,74,0.1);
    --red: #dc2626;
    --red-bg: rgba(220,38,38,0.1);
    --gold: #d97706;
    --gold-bg: rgba(217,119,6,0.1);
    --blue-bg: rgba(37,99,235,0.1);
    --glass-bg: rgba(241,245,249,0.9);
    --shadow: rgba(0,0,0,0.08);
}

.theme.fs-light .fs-hero {
    background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 50%, #1e3a5f 100%) !important;
}
.theme.fs-light .fs-hero h2 { color: #fff !important; }
.theme.fs-light .fs-hero p { color: rgba(255,255,255,0.8) !important; }
.theme.fs-light .cu-item1 { background: rgba(0,0,0,0.02) !important; border-color: rgba(0,0,0,0.05) !important; }
.theme.fs-light .titContent { color: #334155 !important; }
.theme.fs-light .go_to_login { background: linear-gradient(135deg, rgba(37,99,235,0.06), rgba(37,99,235,0.02)) !important; }
.theme.fs-light .body-box::before { background: radial-gradient(circle, rgba(37,99,235,0.05) 0%, transparent 60%); }

/* === Base === */
body, #app, .theme, .body-box {
    background: var(--bg) !important;
    color: var(--text) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif !important;
    -webkit-font-smoothing: antialiased;
}

.body-box { min-height: 100vh; position: relative; padding-bottom: 80px; overflow-x: hidden !important; scrollbar-width: none; }
.body-box::-webkit-scrollbar { width: 0; display: none; }

.body-box::before {
    content: ''; position: fixed; top: -200px; left: 50%;
    transform: translateX(-50%); width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(59,130,246,0.06) 0%, transparent 60%);
    pointer-events: none; z-index: 0;
}

.page_content { position: relative; z-index: 1; }

/* === Top Bar === */
.top_logo {
    position: sticky !important; top: 0; z-index: 100;
    display: flex !important; align-items: center; justify-content: space-between;
    padding: 12px 20px !important;
    background: var(--glass-bg) !important;
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border) !important;
}

/* Logo - icon + gradient text */
.left_logo { display: flex; align-items: center; gap: 8px; }
.left_logo .img_logo {
    display: flex !important;
    align-items: center;
    gap: 8px;
    font-size: 20px !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    background: none !important;
    text-indent: 0 !important;
    margin-left: 0 !important;
}
.left_logo .img_logo img.fs-logo-icon {
    display: block !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 8px;
    object-fit: contain;
}
.left_logo .img_logo img:not(.fs-logo-icon) { display: none !important; }
.left_logo .img_logo::after {
    content: 'FIRSTOCKSEC' !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 50%, #2563eb 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    display: inline-block !important;
    line-height: 1 !important;
}

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

.top-action-btn {
    width: 36px !important; height: 36px !important;
    border-radius: 10px !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s; cursor: pointer;
}
.top-action-btn:active { background: var(--bg-card-hover) !important; }
.top-action-btn svg { width: 18px; height: 18px; opacity: 0.65; }

/* === Ticker === */
.fs-ticker-wrap {
    background: rgba(255,255,255,0.015);
    border-bottom: 1px solid var(--border);
    overflow: hidden; padding: 8px 0;
}
.fs-ticker { display: flex; gap: 28px; white-space: nowrap; animation: fsScroll 35s linear infinite; }
.fs-ticker-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; flex-shrink: 0; }
.fs-ticker-item .fs-name { color: var(--text-muted); font-weight: 500; }
.fs-ticker-item .fs-price { color: var(--text-secondary); font-weight: 600; font-variant-numeric: tabular-nums; }
.fs-ticker-item.up .fs-chg { color: var(--green); }
.fs-ticker-item.down .fs-chg { color: var(--red); }
@keyframes fsScroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* === Hero === */
.fs-hero {
    margin: 16px 20px; border-radius: 16px; overflow: hidden;
    position: relative; height: 160px;
    background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #0f172a 100%);
    border: 1px solid var(--border);
}
.fs-hero-bg { position: absolute; inset: 0; overflow: hidden; }
.fs-hero-bg::before {
    content: ''; position: absolute; top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: conic-gradient(from 0deg, transparent, rgba(59,130,246,0.1), transparent 30%);
    animation: fsRotate 8s linear infinite;
}
@keyframes fsRotate { 100% { transform: rotate(360deg); } }

.fs-hero-chart { position: absolute; bottom: 0; left: 0; right: 0; height: 60px; opacity: 0.2; }
.fs-hero-content {
    position: relative; z-index: 2; padding: 20px 24px;
    height: 100%; display: flex; flex-direction: column; justify-content: center;
}
.fs-hero-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(59,130,246,0.15); border: 1px solid rgba(59,130,246,0.25);
    color: #60a5fa; font-size: 10px; font-weight: 700;
    padding: 4px 10px; border-radius: 20px; width: fit-content;
    margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px;
}
.fs-hero-badge::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: var(--green); animation: fsPulse 2s infinite;
}
@keyframes fsPulse { 0%,100%{opacity:1} 50%{opacity:0.3} }
.fs-hero h2 { font-size: 22px; font-weight: 700; margin-bottom: 4px; letter-spacing: -0.3px; color: #fff; }
.fs-hero p { font-size: 12px; color: #94a3b8; line-height: 1.5; }

/* Hide original banner */
.lunbo-pic { display: none !important; }

/* === Quick Actions (nav-card) === */
.nav-card {
    margin: 0 16px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

.nav-card ul {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    list-style: none; padding: 0; margin: 0;
}

.nav-card li {
    display: flex !important;
    flex-direction: column; align-items: center; justify-content: center;
    gap: 6px;
    padding: 14px 4px !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    cursor: pointer; transition: all 0.2s;
    text-align: center;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.nav-card li:active { background: var(--bg-card-hover) !important; transform: scale(0.97); }

/* SVG icons */
.fs-nav-icon {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px; padding: 0;
}
.fs-nav-icon svg { width: 20px; height: 20px; stroke-width: 2.2; }
.nav-card li:nth-child(1) .fs-nav-icon { background: var(--green-bg); color: var(--green); }
.nav-card li:nth-child(2) .fs-nav-icon { background: var(--gold-bg); color: var(--gold); }
.nav-card li:nth-child(3) .fs-nav-icon { background: var(--blue-bg); color: var(--accent-light); }
.nav-card li:nth-child(4) .fs-nav-icon { background: var(--red-bg); color: #f87171; }

.nav-card li span, .nav-card li > div:not(.fs-nav-icon) {
    font-size: 11px !important;
    color: var(--text) !important;
    font-weight: 600 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: 1.2;
    opacity: 0.85;
}

/* === Section Title === */
.cu-title {
    font-size: 16px !important; font-weight: 700 !important;
    color: var(--text) !important;
    padding: 20px 20px 10px !important;
    letter-spacing: -0.2px;
    display: flex; align-items: center; gap: 8px;
}
.cu-title::before {
    content: ''; width: 3px; height: 14px;
    background: linear-gradient(180deg, var(--accent-light), var(--accent));
    border-radius: 2px;
}

/* === Most Followed Swipe === */
.center_tabs { margin: 0 !important; }

.cu-bxo1 {
    margin: 0 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px; overflow: hidden;
}
.cu-bxo1 .cu-title { padding: 14px 16px 8px !important; }
.cu-bxo1 .cu-title::before { display: none; }
.cu-bxo1 .fo_my-swipe { margin: 0 !important; border-radius: 0 !important; }

.cu-pink-box { padding: 0 12px 12px !important; display: flex; gap: 8px; }

.cu-item1 {
    flex: 0 0 calc(33.333% - 6px) !important;
    background: rgba(255,255,255,0.02) !important;
    border: 1px solid rgba(255,255,255,0.04) !important;
    border-radius: 12px !important;
    padding: 12px !important;
    transition: all 0.2s; cursor: pointer;
}
.cu-item1:active { background: rgba(255,255,255,0.05) !important; }
.cu-item1 .t1 { font-size: 11px !important; color: var(--text-muted) !important; font-weight: 500; margin-bottom: 6px; }
.cu-item1 .t2 { font-size: 17px !important; font-weight: 700 !important; color: var(--text) !important; font-variant-numeric: tabular-nums; margin-bottom: 4px; }
.cu-item1 .t3 { font-size: 11px !important; font-weight: 600; font-variant-numeric: tabular-nums; }
.cu-item1.cu-up .t2, .cu-item1.cu-up .t3:last-child { color: var(--green) !important; }
.cu-item1:not(.cu-up) .t2, .cu-item1:not(.cu-up) .t3:last-child { color: var(--red) !important; }
.cu-item1 .flex-c { display: flex; gap: 6px; align-items: center; }
.cu-item1 .t3:first-child { color: var(--text-muted) !important; font-weight: 400; }

/* === Stock Cards - Full width horizontal === */
.cu-list1 {
    padding: 0 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    margin-top: 4px;
}

.cu-item22 { display: block !important; }

.cu-card1 {
    display: flex !important;
    align-items: center !important;
    padding: 12px 14px !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    cursor: pointer; transition: all 0.2s;
    width: 100% !important;
    gap: 0;
}
.cu-card1:active { background: var(--bg-card-hover) !important; }

.cu-card1-top {
    flex: 1 !important; display: block !important;
    margin-bottom: 0 !important; min-width: 0;
}

.cu-card1 .text1 {
    font-size: 14px !important; font-weight: 600 !important;
    color: var(--text) !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    display: block;
}

.cu-card1-bottom {
    display: flex; align-items: center; gap: 6px; margin-top: 3px;
}

.cu-tag1 {
    font-size: 9px !important; font-weight: 700 !important;
    padding: 2px 6px !important; border-radius: 4px !important;
    text-transform: uppercase; letter-spacing: 0.3px;
}
.cu-tag-red { background: var(--red-bg) !important; color: #f87171 !important; }
.cu-tag-green { background: var(--green-bg) !important; color: #4ade80 !important; }

.cu-card1 .text3 { font-size: 11px !important; color: var(--text-muted) !important; font-weight: 500; }

.fs-spark { width: 50px; height: 24px; margin: 0 8px; flex-shrink: 0; }

.cu-card1 .text2, .cu-card1 .text4 {
    font-size: 14px !important; font-weight: 700 !important;
    font-variant-numeric: tabular-nums;
    text-align: right; min-width: 65px; flex-shrink: 0;
}
.cu-card1:has(.cu-tag-green) .text2,
.cu-card1:has(.cu-tag-green) .text4 { color: var(--green) !important; }
.cu-card1:has(.cu-tag-red) .text2,
.cu-card1:has(.cu-tag-red) .text4 { color: var(--red) !important; }

/* === News === */
.hknews {
    margin: 8px 20px !important;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px; overflow: hidden;
}
.hknews .cu-title { padding: 14px 16px 8px !important; }
.hknews .cu-title::before { display: none; }

.news-content { padding: 0 12px 12px !important; }

.news-content .item-out {
    display: flex !important; gap: 12px;
    padding: 12px !important;
    border-radius: 12px; cursor: pointer;
    transition: background 0.2s;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}
.news-content .item-out:last-child { border-bottom: none; }
.news-content .item-out:active { background: rgba(255,255,255,0.02); }

.news-content .item-out > img {
    width: 84px !important; height: 60px !important;
    border-radius: 10px !important; object-fit: cover !important; flex-shrink: 0;
}

.news-right { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }

.titContent {
    font-size: 13px !important; color: #d0dae4 !important;
    line-height: 1.5 !important; font-weight: 500;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.item-times { font-size: 11px !important; color: var(--text-muted) !important; margin-top: 6px; }

/* === Login Prompt === */
.go_to_login {
    margin: 12px 20px !important;
    background: linear-gradient(135deg, rgba(59,130,246,0.08), rgba(37,99,235,0.04)) !important;
    border: 1px solid rgba(59,130,246,0.12) !important;
    border-radius: 14px !important;
    padding: 14px 16px !important;
    display: flex; align-items: center; justify-content: space-between;
}
.left_mess { font-size: 13px !important; color: var(--text-secondary) !important; }
.right_button .btn {
    background: linear-gradient(135deg, var(--accent), #2563eb) !important;
    color: white !important; border: none !important;
    border-radius: 10px !important; padding: 8px 20px !important;
    font-size: 13px !important; font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(59,130,246,0.2);
}

/* === Bottom Nav === */
.footCss {
    position: fixed !important; bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 100%; max-width: 480px;
    height: auto !important;
    display: flex !important;
    justify-content: space-around !important;
    background: var(--glass-bg) !important;
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--border) !important;
    padding: 6px 0 calc(6px + env(safe-area-inset-bottom)) !important;
    z-index: 100;
}
.footDemo, .footDemos {
    flex: 1; display: flex !important; flex-direction: column;
    align-items: center; gap: 2px; padding: 4px 0;
    cursor: pointer; position: relative; transition: color 0.2s;
    width: auto !important;
}
/* Disable the pulsing circle animation that causes jump */
.footDemos::before, .footDemo::before {
    display: none !important;
    content: none !important;
    animation: none !important;
}
.footDemo .footImgDeft, .footDemos .footImgDeft {
    width: 24px; height: 24px; margin-bottom: 2px !important;
    display: flex; align-items: center; justify-content: center;
}
.footDemo .footImgDeft img, .footDemos .footImgDeft img {
    width: 22px !important; height: 22px !important; object-fit: contain;
}
.footDemo > div:not(.footImgDeft), .footDemos > div:not(.footImgDeft) {
    font-size: 10px !important; color: var(--text-muted) !important; font-weight: 500;
}
.footDemo .blueFont, .footDemos .blueFont { color: var(--accent) !important; }
.footDemo:has(.blueFont), .footDemos:has(.blueFont) {
    /* Active item indicator */
}
.footDemo:has(.blueFont)::after, .footDemos:has(.blueFont)::after {
    content: ''; position: absolute; top: 0;
    width: 20px; height: 2.5px; border-radius: 0 0 3px 3px; background: var(--accent);
}

/* === Buttons === */
button[class*="buy"], .buy-btn {
    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
    color: white !important; border: none !important;
    border-radius: 12px !important; font-weight: 700 !important;
    box-shadow: 0 4px 14px rgba(34,197,94,0.2) !important;
}
button[class*="sell"], .sell-btn {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: white !important; border: none !important;
    border-radius: 12px !important; font-weight: 700 !important;
    box-shadow: 0 4px 14px rgba(239,68,68,0.2) !important;
}

/* === Popups / Inputs === */
.van-popup, .van-dialog, .van-action-sheet {
    background: var(--bg-elevated) !important;
    border-radius: 16px 16px 0 0 !important;
    border: 1px solid var(--border) !important;
}
.van-cell { background: transparent !important; color: var(--text) !important; }
.van-cell::after { border-color: var(--border) !important; }
.van-field__control { color: var(--text) !important; }
.van-field__control::placeholder { color: var(--text-muted) !important; }

input, textarea, select {
    background: var(--bg-input) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important; color: var(--text) !important;
}
input:focus { border-color: rgba(59,130,246,0.5) !important; outline: none; }

.van-search { background: transparent !important; padding: 8px 16px !important; }
.van-search__content {
    background: var(--bg-input) !important;
    border-radius: 10px !important;
    border: 1px solid var(--border);
}

.van-tab { color: var(--text-muted) !important; font-weight: 600 !important; }
.van-tab--active { color: var(--accent) !important; }
.van-tabs__line { background: var(--accent) !important; border-radius: 2px !important; }
.van-switch--on { background: var(--accent) !important; }

/* Scrollbar */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }

/* Numbers */
.t2, .t3, .text2, .text4 { font-variant-numeric: tabular-nums; }

/* Fade-in */
@keyframes fsFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.cu-card1, .cu-item1, .news-content .item-out { animation: fsFadeIn 0.3s ease-out backwards; }

/* === Mine / Personal Center === */
/* Avatar with gradient ring */
.left_identity_img,
[class*="user"] img[src*="uploads"],
[class*="head"] img[src*="uploads"],
[class*="mine"] img[src*="uploads"] {
    border-radius: 50% !important;
    border: 2px solid transparent !important;
    background: linear-gradient(var(--bg-elevated), var(--bg-elevated)) padding-box,
                linear-gradient(135deg, #3b82f6, #8b5cf6, #ec4899) border-box !important;
    padding: 2px !important;
    box-shadow: 0 4px 12px rgba(59,130,246,0.2) !important;
}

/* Mine page header */
[class*="identity"], [class*="user-info"], [class*="mine-header"] {
    background: transparent !important;
}

/* Generic circular avatars */
img[src*="uploads/"] {
    border-radius: 50%;
    object-fit: cover;
}

/* Section headers on Mine page */
[class*="mine"] .cu-title,
[class*="user"] .cu-title {
    padding: 16px 20px 8px !important;
}

/* === Mine / Personal Center === */
.user_page { background: var(--bg) !important; min-height: 100vh; overflow-x: hidden !important; }
.user_page .content { padding: 0 !important; overflow-x: hidden !important; }

/* Top right chat icon */
.user_page .top_icon {
    position: absolute !important; top: 16px !important; right: 16px !important;
    left: auto !important; width: auto !important;
    z-index: 10;
}
.user_page .right_icon > div {
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid var(--border) !important;
}

/* User profile header card */
.user_page .users {
    margin: 0 16px 12px !important;
    padding: 20px !important;
    background: linear-gradient(135deg, rgba(59,130,246,0.12), rgba(139,92,246,0.06)) !important;
    border: 1px solid rgba(59,130,246,0.15) !important;
    border-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    width: auto !important;
    height: auto !important;
    box-sizing: border-box !important;
}

/* Avatar */
.user_page .left_tou { margin: 0 !important; }
.user_page .left_tx > div {
    width: 56px !important; height: 56px !important;
    border-radius: 50% !important;
    border: 2px solid transparent !important;
    background: linear-gradient(var(--bg-elevated), var(--bg-elevated)) padding-box,
                linear-gradient(135deg, #3b82f6, #8b5cf6, #ec4899) border-box !important;
    padding: 2px !important;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(59,130,246,0.25) !important;
}
.user_page .left_tx img {
    width: 100% !important; height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

/* User info text */
.user_page .users > div:not(.left_tou) {
    flex: 1; min-width: 0;
}
.user_page .users > div:not(.left_tou) > div:first-child {
    font-size: 18px !important; font-weight: 700 !important;
    color: var(--text) !important; margin-bottom: 4px;
}

/* KYC badge */
.user_page .users [class*="badge"],
.user_page .users [class*="cert"],
.user_page .users [class*="real"],
.user_page .users [class*="auth"] {
    display: inline-flex !important; align-items: center; gap: 4px;
    background: var(--green-bg) !important;
    color: var(--green) !important;
    font-size: 11px !important; font-weight: 600 !important;
    padding: 3px 10px !important; border-radius: 20px !important;
}

/* UID */
.user_page .users [class*="uid"],
.user_page .users > div:not(.left_tou) > div:last-child {
    font-size: 12px !important; color: var(--text-muted) !important;
    margin-top: 4px;
}

/* Tabcard menu (fund, transfer, KYC, bind) */
.user_page .tabcard {
    margin: 0 16px 12px !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    overflow: hidden;
}
.user_page .tabcard ul {
    display: flex !important;
    list-style: none !important;
    padding: 16px 0 !important;
    margin: 0 !important;
    width: 100% !important;
}
.user_page .tabcard li {
    display: flex !important;
    flex: 0 0 25% !important;
    width: 25% !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
    cursor: pointer; transition: all 0.2s;
    padding: 8px 4px !important;
    border-right: 1px solid var(--border);
    box-sizing: border-box !important;
}
.user_page .tabcard li:last-child { border-right: none; }
.user_page .tabcard li:active { background: var(--bg-card-hover); }
.user_page .tabcard li img {
    width: 28px !important; height: 28px !important;
    object-fit: contain; opacity: 0.85;
    margin-bottom: 0 !important;
}
.user_page .tabcard li span, .user_page .tabcard li div, .user_page .tabcard li p {
    font-size: 11px !important; color: var(--text-secondary) !important;
    font-weight: 500 !important; text-align: center !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 100%;
}

/* Settings menu (change password, about, logout) */
.user_page .content > div:last-child {
    margin: 0 16px !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    overflow: hidden;
}
.user_page .jy {
    display: flex !important;
    align-items: center !important;
    padding: 14px 16px !important;
    cursor: pointer; transition: background 0.2s;
    border-bottom: 1px solid var(--border);
}
.user_page .jy:last-child { border-bottom: none; }
.user_page .jy:active { background: var(--bg-card-hover); }
.user_page .jy .l_icon {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px; background: var(--blue-bg);
    margin-right: 12px; flex-shrink: 0;
}
.user_page .jy .l_icon img {
    width: 18px !important; height: 18px !important;
    object-fit: contain; opacity: 0.8;
}
.user_page .jy .left_gn {
    flex: 1; font-size: 14px !important;
    color: var(--text) !important; font-weight: 500;
}
/* Logout button styling */
.user_page .jy:last-child .l_icon { background: var(--red-bg); }
.user_page .jy:last-child .left_gn { color: var(--red) !important; }

/* Fix Mine settings menu - force smaller text */
.user_page .jy, .user_page .jy * {
    font-size: 14px !important;
}
.user_page .jy .left_gn, .user_page .jy > div:nth-child(2) {
    font-size: 14px !important;
    font-weight: 500 !important;
}

/* ============================================
   MARKET PAGE (tr_list_page)
   ============================================ */
.tr_list_page { background: var(--bg) !important; min-height: 100vh; }
.tr_list_page .content { padding: 0 !important; }

/* Search bar */
.tr_list_page .search {
    margin: 12px 16px !important;
    padding: 0 !important;
    background: transparent !important;
    width: auto !important;
}
.tr_list_page .search_content {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    padding: 8px 14px !important;
    display: flex; align-items: center; gap: 8px;
    width: auto !important;
    box-sizing: border-box !important;
}
.tr_list_page .search_img { width: 18px; height: 18px; opacity: 0.5; }
.tr_list_page .search_img img { width: 16px !important; height: 16px !important; }
.tr_list_page .search input {
    background: transparent !important;
    border: none !important;
    color: var(--text) !important;
    font-size: 13px !important;
    padding: 4px 0 !important;
    box-shadow: none !important;
}
.tr_list_page .search input::placeholder { color: var(--text-muted) !important; }

/* Tabs - use original bottom-border indicator, not background pill */
.tr_list_page .tab_class {
    margin: 0 16px !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    padding: 0 12px !important;
}
.tr_list_page .scroll_tab {
    width: 100% !important;
    overflow-x: auto !important;
    scrollbar-width: none;
    display: -webkit-box !important;
    white-space: nowrap;
    height: auto !important;
}
.tr_list_page .scroll_tab::-webkit-scrollbar { display: none; }
.tr_list_page .tab_items {
    display: inline-block !important;
    padding: 10px 16px !important;
    margin: 0 !important;
    cursor: pointer;
    transition: all 0.2s;
    height: auto !important;
    font-size: 13px !important;
    background: none !important;
    border-radius: 0 !important;
    flex: none !important;
    text-align: center;
}
.tr_list_page .tab_items span {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--text-muted) !important;
    opacity: 0.7 !important;
    white-space: nowrap;
    display: inline-block !important;
    padding-bottom: 4px !important;
    border-bottom: 2px solid transparent !important;
    transition: all 0.2s !important;
    min-width: 0 !important;
    height: auto !important;
    line-height: 1.4 !important;
}
.tr_list_page .tab_items span.active {
    color: var(--accent-light) !important;
    opacity: 1 !important;
    font-weight: 700 !important;
    border-bottom: 2px solid var(--accent) !important;
    background: none !important;
}

/* List header */
.tr_list_page .list_title {
    display: flex !important; align-items: center;
    padding: 8px 32px 8px !important;
    margin: 0 !important; background: transparent !important;
}
.tr_list_page .list_title .item_title {
    font-size: 11px !important; font-weight: 600 !important;
    color: var(--text-muted) !important; text-transform: uppercase;
    letter-spacing: 0.5px;
}
.tr_list_page .list_title .varieties { flex: 1; min-width: 0; }
.tr_list_page .list_title .latest_price { width: 95px; text-align: right; flex-shrink: 0; }
.tr_list_page .list_title .applies { width: 85px; text-align: right; flex-shrink: 0; }

/* Stock list - Market page rows */
.tr_list_page .list { background: transparent !important; }
.tr_list_page .van-list { background: transparent !important; }

/* Market stock rows - .list_items > .item with .left_title/.center_price/.right_bs */
.tr_list_page .list_items:has(> .item .left_title) {
    margin: 0 16px 8px !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    overflow: hidden; transition: all 0.2s;
    width: auto !important;
}
.tr_list_page .list_items:has(> .item .left_title):active {
    background: var(--bg-card-hover) !important;
    transform: scale(0.99);
}

/* IPO cards - .list_items > .item > div with .tp/.bt children */
.tr_list_page .list_items:not(:has(> .item .left_title)) {
    margin: 0 !important;
    padding: 0 16px !important;
    background: transparent !important;
    border: none !important;
    width: auto !important;
}
.tr_list_page .list_items:not(:has(> .item .left_title)) > .item {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
}
.tr_list_page .list_items:not(:has(> .item .left_title)) > .item > div {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    padding: 16px !important;
    margin: 8px 0 !important;
    width: auto !important;
    display: block !important;
}

/* IPO "us" tag */
.tr_list_page .list_items .bt {
    background: var(--blue-bg) !important;
    color: var(--accent-light) !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    display: inline-block !important;
    margin-bottom: 8px !important;
}

/* IPO labels */
.tr_list_page .list_items .biaoqian {
    color: var(--text-muted) !important;
    font-size: 12px !important;
    width: 110px !important;
}

/* IPO tp rows should be block, not flex */
.tr_list_page .list_items:not(:has(> .item .left_title)) .tp {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    margin: 6px 0 !important;
    flex-wrap: wrap !important;
}
.tr_list_page .list_items:not(:has(> .item .left_title)) .tp > span:last-child {
    flex: 1 !important;
    min-width: 0 !important;
}

/* IPO progress bar */
.tr_list_page .list_items .van-progress {
    background: var(--bg-card-hover) !important;
    border-radius: 4px !important;
}
.tr_list_page .list_items .van-progress__portion {
    background: var(--accent) !important;
    border-radius: 4px !important;
}
.tr_list_page .list_items .van-progress__pivot {
    color: #fff !important;
    font-size: 10px !important;
}
.tr_list_page .item, .tr_list_page .list_items .item {
    display: flex !important; align-items: center !important;
    padding: 14px 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.tr_list_page .item > div, .tr_list_page .list_items .item > div { display: flex; align-items: center; }

/* Stock name column */
.tr_list_page .left_title { flex: 1; min-width: 0; display: block !important; }
.tr_list_page .left_title .tp {
    display: flex; align-items: center; gap: 8px;
}
.tr_list_page .title_color {
    font-size: 14px !important; font-weight: 600 !important;
    color: var(--text) !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.3 !important;
}
.tr_list_page .left_title .bt {
    margin-top: 4px !important;
}
.tr_list_page .left_title .bt span {
    font-size: 11px !important; color: var(--text-muted) !important;
    font-weight: 500;
}

/* Collection star */
.tr_list_page .collection { display: flex; align-items: center; flex-shrink: 0; }
.tr_list_page .collection .shu {
    width: 14px !important; height: 14px !important; opacity: 0.25;
}

/* Price column */
.tr_list_page .center_price { width: 95px; text-align: right; flex-shrink: 0; display: block !important; }
.tr_list_page .center_price .tp { display: flex; justify-content: flex-end; align-items: baseline; }
.tr_list_page .price_color {
    font-size: 15px !important; font-weight: 700 !important;
    font-variant-numeric: tabular-nums;
    line-height: 1.3 !important;
}
.tr_list_page .price_color.green { color: var(--green) !important; }
.tr_list_page .price_color.red { color: var(--red) !important; }
.tr_list_page .center_price .bt { font-size: 10px; color: var(--text-muted); margin-top: 4px !important; }

/* Change column */
.tr_list_page .right_bs { width: 85px; text-align: right; flex-shrink: 0; display: block !important; }
.tr_list_page .right_bs .tp { display: flex; justify-content: flex-end; align-items: baseline; gap: 4px; }
.tr_list_page .right_bs .tp .price_color {
    font-size: 13px !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
}
.tr_list_page .right_bs .tp .price_color.green {
    background: var(--green-bg) !important;
}
.tr_list_page .right_bs .tp .price_color.red {
    background: var(--red-bg) !important;
}
.tr_list_page .right_bs .bt {
    font-size: 10px !important; color: var(--text-muted) !important;
    margin-top: 4px !important;
}
.tr_list_page .right_bs .bt div {
    font-size: 10px !important; color: var(--text-muted) !important;
}

/* Deposit message */
.tr_list_page .kai_mess {
    margin: 12px 16px !important;
    background: var(--blue-bg) !important;
    border: 1px solid rgba(59,130,246,0.15) !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
}

/* ============================================
   TRADE PAGE (warehouse_page)
   ============================================ */
.warehouse_page { background: var(--bg) !important; min-height: 100vh; }
.warehouse_page .content, .warehouse_page > div { background: transparent !important; }

/* Trade page bottom tabs - make all 4 fit evenly */
.warehouse_page .tabs_top_title {
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    overflow-x: hidden !important;
    padding: 10px 4px !important;
    margin: 0 !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    height: auto !important;
    width: auto !important;
}
.warehouse_page .tabs_card_content {
    padding: 0 16px !important;
}
.warehouse_page .tabs_top_title > div {
    flex: 1 1 0 !important;
    text-align: center !important;
    padding: 6px 2px !important;
    white-space: nowrap;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
}
.warehouse_page .tabs_top_title > div span {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: var(--text-muted) !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.warehouse_page .tabs_top_title > div span.active {
    color: var(--accent-light) !important;
    font-weight: 700 !important;
}
.warehouse_page .tabs_top_title > div span.active::after {
    border-bottom-color: var(--accent) !important;
}

/* Trade page tabs card */
.warehouse_page .tabs_card {
    background: transparent !important;
    box-shadow: none !important;
}

/* Stats area */
.warehouse_page .balance {
    color: var(--text) !important;
}

/* Position list items */
.warehouse_page .position-item, .warehouse_page .list-item {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
}

/* ============================================
   IPO PAGE
   ============================================ */
/* IPO cards - color only */
.tr_list_page .ipo-item, .tr_list_page .subscribe-item {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
}
.tr_list_page .ipo-item *, .tr_list_page .subscribe-item * {
    color: var(--text) !important;
}

/* ============================================
   GLOBAL VAN COMPONENTS
   ============================================ */

/* Van components dark theme */
.van-nav-bar {
    background: var(--glass-bg) !important;
    border-bottom: 1px solid var(--border) !important;
}
.van-nav-bar__text, .van-nav-bar .van-icon { color: var(--text) !important; }
.van-nav-bar__title { color: var(--text) !important; font-weight: 600 !important; }

.van-cell-group--inset {
    margin: 12px 16px !important;
    border-radius: 12px !important;
    overflow: hidden;
    border: 1px solid var(--border) !important;
}
.van-cell-group--inset .van-cell {
    background: var(--bg-card) !important;
}

.van-divider { border-color: var(--border) !important; color: var(--text-muted) !important; }

.van-tag { border-radius: 6px !important; font-weight: 600 !important; }
.van-tag--primary { background: var(--blue-bg) !important; color: var(--accent-light) !important; }
.van-tag--success { background: var(--green-bg) !important; color: var(--green) !important; }
.van-tag--danger { background: var(--red-bg) !important; color: var(--red) !important; }
.van-tag--warning { background: var(--gold-bg) !important; color: var(--gold) !important; }

.van-empty__description { color: var(--text-muted) !important; }
.van-loading__text { color: var(--text-muted) !important; }
.van-pull-refresh__head { color: var(--text-muted) !important; }
.van-list__finished-text, .van-list__loading {
    color: var(--text-muted) !important;
    font-size: 12px !important;
    padding: 16px !important;
}

/* ============================================
   RESPONSIVE - Desktop/Web (width > 768px)
   ============================================ */
@media screen and (min-width: 768px) {
    body { background: #060a12 !important; }
    #app, .theme, .body-box {
        max-width: 100% !important;
        margin: 0 !important;
        box-shadow: none !important;
        min-height: 100vh !important;
    }
    .footCss {
        max-width: 100% !important;
    }

    /* Desktop container */
    .tr_list_page, .user_page, .warehouse_page, .home_page {
        max-width: 1400px !important;
        margin: 0 auto !important;
        padding: 0 24px !important;
        box-sizing: border-box !important;
    }

    /* Market page: stock list grid */
    .tr_list_page .van-list, .tr_list_page .van-clearfix {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
        gap: 10px !important;
        padding: 0 !important;
    }
    .tr_list_page .list_items:has(> .item .left_title) {
        margin: 0 !important;
        width: 100% !important;
    }

    /* Market page header area */
    .tr_list_page .tabs_title {
        padding: 20px 0 12px !important;
    }
    .tr_list_page .search {
        margin: 12px 0 !important;
    }
    .tr_list_page .tab_class {
        margin: 0 0 12px !important;
    }
    .tr_list_page .list_title {
        display: none !important;
    }

    /* IPO cards grid */
    .tr_list_page .list_items:not(:has(> .item .left_title)) {
        padding: 0 !important;
    }
    .tr_list_page .list_items:not(:has(> .item .left_title)) .van-list,
    .tr_list_page .list_items:not(:has(> .item .left_title)) .van-clearfix {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) !important;
        gap: 12px !important;
    }

    /* Home page desktop */
    .home_page .cu-list1, .home_page .cu-list2 {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
        gap: 10px !important;
    }

    /* Mine page desktop */
    .user_page .users {
        margin: 0 0 16px !important;
    }
    .user_page .tabcard {
        margin: 0 0 16px !important;
    }
    .user_page .jy {
        margin: 0 0 8px !important;
    }

    /* Trade page desktop */
    .warehouse_page .warehouse_card {
        padding: 0 24px !important;
    }
    .warehouse_page .tabs_card_content {
        padding: 0 !important;
    }
    .warehouse_page .tabs_top_title {
        margin: 0 0 12px !important;
    }
}

/* Tablet (500px-768px) */
@media screen and (min-width: 500px) and (max-width: 767px) {
    body { background: #060a12 !important; }
    #app, .theme, .body-box {
        max-width: 600px !important;
        margin: 0 auto !important;
        box-shadow: 0 0 40px rgba(0,0,0,0.5) !important;
        min-height: 100vh !important;
    }
    .footCss {
        max-width: 600px !important;
    }
}

/* ============================================
   IPO PAGE FIXES
   ============================================ */
/* (IPO card styles integrated into list_items section above) */

/* Fix top-level tabs (Market/Favorites) */
.tr_list_page .tabs_title {
    display: flex !important;
    padding: 12px 20px 8px !important;
    gap: 24px !important;
}
.tr_list_page .tabs_title > div {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--text-muted) !important;
    cursor: pointer;
    padding-bottom: 4px !important;
    border-bottom: 2px solid transparent !important;
}
.tr_list_page .tabs_title > div.active {
    color: var(--text) !important;
    border-bottom-color: var(--accent) !important;
}