/* ═══════════════════════════════════════════
   見微 v4.0 · Affluent Design System
   ═══════════════════════════════════════════
   定位：金融資訊展示，沉穩、專業、清晰
   參考：Bloomberg / TradingView / 財經終端
   ═══════════════════════════════════════════ */

:root {
    /* ── 色彩：淺色基調 ── */
    --bg-root:       #f4f4f5;
    --bg-surface:    #ffffff;
    --bg-elevated:   #fafafa;
    --bg-inset:      #ecedf0;
    --bg-hover:      rgba(0, 0, 0, 0.03);
    --bg-active:     rgba(99, 102, 241, 0.08);

    --border:        rgba(0, 0, 0, 0.06);
    --border-light:  rgba(0, 0, 0, 0.10);
    --border-focus:  rgba(99, 102, 241, 0.35);

    --text-primary:   #18181b;
    --text-secondary: #71717a;
    --text-tertiary:  #a1a1aa;
    --text-inverse:   #ffffff;

    --accent:         #6366f1;
    --accent-hover:   #818cf8;
    --accent-muted:   rgba(99, 102, 241, 0.15);
    --accent-gradient:linear-gradient(135deg, #6366f1, #8b5cf6);

    --danger:         #ef4444;
    --danger-muted:   rgba(239, 68, 68, 0.12);
    --success:        #22c55e;
    --success-muted:  rgba(34, 197, 94, 0.12);
    --warning:        #f59e0b;
    --warning-muted:  rgba(245, 158, 11, 0.12);

    --live:           #ef4444;
    --vip:            linear-gradient(135deg, #f59e0b, #d97706);

    /* ── 字體 ── */
    --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang TC",
            "Microsoft JhengHei", "Noto Sans TC", sans-serif;
    --font-mono: "SF Mono", "JetBrains Mono", "Fira Code", monospace;

    /* ── 字級 ── */
    --fs-xs:  0.70rem;
    --fs-sm:  0.80rem;
    --fs-md:  0.90rem;
    --fs-base: 1rem;
    --fs-lg:  1.15rem;
    --fs-xl:  1.35rem;
    --fs-2xl: 1.65rem;
    --fs-3xl: 2.00rem;

    /* ── 間距 (4px 基準) ── */
    --s1:  4px;   --s2:  8px;   --s3:  12px;
    --s4:  16px;  --s5:  20px;  --s6:  24px;
    --s8:  32px;  --s10: 40px;  --s12: 48px;
    --s16: 64px;

    /* ── 圓角 ── */
    --r-sm:   6px;
    --r-md:   10px;
    --r-lg:   16px;
    --r-xl:   24px;
    --r-full: 9999px;

    /* ── 陰影 ── */
    --shadow-card:  0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-popup: 0 4px 24px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04);

    /* ── 動畫 ── */
    --ease:         cubic-bezier(0.25, 0.1, 0.25, 1);
    --ease-spring:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --dur-fast:     120ms;
    --dur:          200ms;
    --dur-slow:     320ms;

    /* ── 尺寸 ── */
    --sidebar-w:    280px;
    --header-h:     52px;
    --safe-b:       env(safe-area-inset-bottom, 0px);
    --safe-t:       env(safe-area-inset-top, 0px);
}

/* ═══ Reset ═══ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html {
    font-family: var(--font);
    font-size: 16px;
    color: var(--text-primary);
    background: var(--bg-root);
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    background: var(--bg-root);
}

img, svg { display:block; max-width:100%; }
a { color: var(--accent); text-decoration:none; }
button, input, textarea, select { font:inherit; color:inherit; }

/* ═══ 排版 ═══ */
.page-title { font-size:var(--fs-2xl); font-weight:700; letter-spacing:-0.3px; margin-bottom:var(--s1); }
.page-sub   { font-size:var(--fs-sm); color:var(--text-secondary); margin-bottom:var(--s6); }
.text-xs    { font-size:var(--fs-xs); }
.text-sm    { font-size:var(--fs-sm); }
.text-md    { font-size:var(--fs-md); }
.text-secondary { color:var(--text-secondary); }
.text-tertiary  { color:var(--text-tertiary); }
.text-accent    { color:var(--accent); }
.font-bold   { font-weight:700; }
.font-medium { font-weight:500; }
.truncate    { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.msg-preview { color: var(--text-secondary); }
.msg-detail {
    max-height: 60vh;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
}
.msg-detail.open { display: block; }


/* ═══ Header ═══ */
.app-header {
    position: sticky;
    top: 0;
    z-index: 50;
    height: var(--header-h);
    padding-top: var(--safe-t);
    background: rgba(244, 244, 245, 0.85);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: var(--s4);
    padding-right: var(--s4);
    gap: var(--s3);
}

.app-header .menu-trigger {
    width: 38px; height: 38px;
    display: flex; align-items:center; justify-content:center;
    border-radius: var(--r-sm); font-size: 1.25rem;
    color: var(--text-secondary); background: transparent;
    border: none; cursor: pointer;
    transition: all var(--dur-fast);
}
.app-header .menu-trigger:active { background: var(--bg-hover); color: var(--text-primary); }

.app-header .brand-name {
    font-size: var(--fs-lg); font-weight: 700; letter-spacing: 3px;
}

/* ═══ Sidebar ═══ */
.sidebar-overlay {
    position: fixed; inset: 0; z-index: 70;
    background: rgba(0,0,0,0.5);
    opacity: 0; pointer-events: none;
    transition: opacity var(--dur) var(--ease);
}
.sidebar-overlay.open { opacity:1; pointer-events:auto; }

.app-sidebar {
    position: fixed; top:0; left:0; bottom:0; z-index: 80;
    width: var(--sidebar-w); max-width: 85vw;
    background: var(--bg-surface);
    border-right: 1px solid var(--border);
    transform: translateX(-100%);
    transition: transform var(--dur-slow) var(--ease-spring);
    display: flex; flex-direction: column;
    overflow-y: auto;
    padding-top: var(--safe-t);
}
.app-sidebar.open { transform: translateX(0); }

.sidebar-user {
    padding: var(--s6) var(--s4) var(--s4);
    border-bottom: 1px solid var(--border);
    display: flex; align-items:center; gap: var(--s3);
}
.sidebar-avatar {
    width: 44px; height: 44px; border-radius: var(--r-md); flex-shrink:0;
    background: var(--accent-gradient);
    display:flex; align-items:center; justify-content:center;
    font-size: var(--fs-lg); color:#fff; font-weight:700;
}
.sidebar-nav { flex:1; padding: var(--s2); }
.sidebar-nav a {
    display: flex; align-items:center; gap: var(--s3);
    padding: var(--s3) var(--s4); border-radius: var(--r-sm);
    font-size: var(--fs-md); color: var(--text-secondary);
    text-decoration: none;
    transition: all var(--dur-fast);
}
.sidebar-nav a .nav-icon { font-size: 1.15rem; }
.sidebar-nav a:hover { background: var(--bg-hover); color: var(--text-primary); }
.sidebar-nav a.active { background: var(--accent-muted); color: var(--accent); font-weight:600; }

.sidebar-footer {
    padding: var(--s4); border-top: 1px solid var(--border);
    padding-bottom: calc(var(--s4) + var(--safe-b));
}

/* ═══ Main Layout ═══ */
.app-main { flex:1; padding-bottom: calc(var(--s8) + var(--safe-b)); }

.container { max-width: 1200px; margin:0 auto; padding: var(--s5) var(--s4); }

@media (min-width: 768px) {
    .app-sidebar { transform: translateX(0); box-shadow:none; }
    .sidebar-overlay { display:none !important; }
    .app-header .menu-trigger { display:none; }
    .app-main { margin-left: var(--sidebar-w); }
}

/* ═══ Card ═══ */
.card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: box-shadow var(--dur);
}
.card:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.3); }
.card:active { transform: scale(0.99); }
.card-body  { padding: var(--s4); }
.card-sm .card-body { padding: var(--s3); }

/* ═══ Button ═══ */
.btn {
    display: inline-flex; align-items:center; justify-content:center;
    gap: var(--s2); height: 42px; padding: 0 var(--s5);
    border-radius: var(--r-sm); font-size: var(--fs-md); font-weight: 600;
    border: none; cursor: pointer;
    transition: all var(--dur-fast);
    white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity:0.4; pointer-events:none; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-outline { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-light); }
.btn-outline:hover { border-color: var(--accent); color:var(--accent); }
.btn-sm { height:32px; padding:0 var(--s3); font-size:var(--fs-sm); border-radius:var(--r-sm); }
.btn-block { width:100%; }

/* ═══ Input ═══ */
.input {
    width:100%; height:44px; padding:0 var(--s3);
    background: var(--bg-inset); border:1px solid var(--border-light);
    border-radius: var(--r-sm); font-size: var(--fs-md); color: var(--text-primary);
    outline: none; transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.input::placeholder { color: var(--text-tertiary); }
.input:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--accent-muted); }

/* ═══ Chips ═══ */
.chip-row {
    display: flex; gap: var(--s2); overflow-x: auto;
    padding-bottom: var(--s4); -webkit-overflow-scrolling:touch;
    scrollbar-width: none;
}
.chip-row::-webkit-scrollbar { display:none; }

.chip {
    flex-shrink:0; padding: var(--s2) var(--s4);
    background: var(--bg-elevated); border:1px solid var(--border-light);
    border-radius: var(--r-full);
    font-size: var(--fs-sm); font-weight:500; color: var(--text-secondary);
    cursor: pointer; transition: all var(--dur-fast);
    white-space: nowrap;
}
.chip:active { transform: scale(0.96); }
.chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ═══ Badge ═══ */
.badge {
    display: inline-flex; align-items:center;
    height: 20px; padding: 0 7px; border-radius: 4px;
    font-size: var(--fs-xs); font-weight:700; letter-spacing:0.3px;
    flex-shrink:0;
}
.badge-live { background: var(--live); color:#fff; }
.badge-vip  { background: var(--vip); color:#fff; }
.badge-replay { background: rgba(0,0,0,0.5); color:#fff; backdrop-filter:blur(4px); }
.badge-accent { background: var(--accent); color:#fff; }

.badge-dot { width:7px; height:7px; border-radius:50%; display:inline-block; }
.badge-dot-live { background: var(--live); animation: pulse-dot 2s infinite; }
@keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* ═══ Skeleton ═══ */
.skeleton {
    background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--bg-surface) 50%, var(--bg-elevated) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--r-sm);
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.skeleton-line { height:14px; margin-bottom: var(--s2); }
.skeleton-line.w80 { width:80%; }
.skeleton-line.w60 { width:60%; }
.skeleton-line.w40 { width:40%; }

/* ═══ Grid ═══ */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); }
.grid-auto { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:var(--s4); }

@media (max-width: 640px) {
    .grid-2 { grid-template-columns:1fr; }
    .grid-auto { grid-template-columns:1fr; }
    .container { padding: var(--s4) var(--s3); }
    .page-title { font-size:var(--fs-xl); }
}

/* ═══ Utilities ═══ */
.flex { display:flex; }
.items-center { align-items:center; }
.justify-between { justify-content:space-between; }
.gap-1 { gap:var(--s1); } .gap-2 { gap:var(--s2); } .gap-3 { gap:var(--s3); } .gap-4 { gap:var(--s4); }
.mt-2 { margin-top:var(--s2); } .mt-4 { margin-top:var(--s4); } .mt-6 { margin-top:var(--s6); }
.mb-2 { margin-bottom:var(--s2); } .mb-4 { margin-bottom:var(--s4); } .mb-6 { margin-bottom:var(--s6); }
.p-4 { padding:var(--s4); }
.w-full { width:100%; }
.hidden { display:none; }
.text-center { text-align:center; }