/* Stock Analysis — giao diện (tách từ index.html) */
    [x-cloak] { display: none !important; }

    /* ═══════════════════════════════════════════════════════
       Design tokens — flip toàn bộ màu chỉ bằng .dark class
    ═══════════════════════════════════════════════════════ */
    :root {
      --bg-page:     #f1f5f9;
      --bg-card:     #ffffff;
      --bg-raised:   #f8fafc;
      --bg-muted:    #f1f5f9;
      --bg-input:    #ffffff;
      --bg-hover:    #f1f5f9;
      --border:      #e2e8f0;
      --border-sub:  #f1f5f9;
      --text-1:      #0f172a;
      --text-2:      #475569;
      --text-3:      #94a3b8;
      --text-4:      #cbd5e1;
      --accent:      #6366f1;
      --accent-dim:  rgba(99,102,241,0.12);
      --accent-text: #4f46e5;
      --shadow-card: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
    }
    .dark {
      --bg-page:     #09090b;
      --bg-card:     #18181b;
      --bg-raised:   #27272a;
      --bg-muted:    #27272a;
      --bg-input:    #09090b;
      --bg-hover:    #27272a;
      --border:      #3f3f46;
      --border-sub:  #27272a;
      --text-1:      #fafafa;
      --text-2:      #a1a1aa;
      --text-3:      #71717a;
      --text-4:      #52525b;
      --accent:      #818cf8;
      --accent-dim:  rgba(129,140,248,0.15);
      --accent-text: #a5b4fc;
      --shadow-card: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
    }

    /* ── Base ─────────────────────────────────────────────── */
    html {
      background: var(--bg-page);
      transition: background-color 0.25s ease;
    }
    body {
      background: var(--bg-page);
      color: var(--text-1);
      font-family: 'Inter', system-ui, sans-serif;
      transition: background-color 0.25s ease, color 0.2s ease;
    }

    /* ── Components ───────────────────────────────────────── */
    .card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 0.75rem;
      padding: 1.5rem;
      box-shadow: var(--shadow-card);
      transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    }
    .btn {
      display: inline-flex; align-items: center; gap: 0.5rem;
      padding: 0.5rem 1.125rem; border-radius: 0.625rem;
      font-weight: 500; font-size: 0.875rem;
      transition: all 0.15s ease; cursor: pointer; border: none;
      letter-spacing: 0.01em;
    }
    .btn-primary {
      background: linear-gradient(135deg, #6366f1 0%, #4f46e5 60%, #4338ca 100%);
      color: #fff;
      box-shadow: 0 1px 3px rgba(79,70,229,0.35), 0 0 0 1px rgba(79,70,229,0.18);
    }
    .btn-primary:hover {
      background: linear-gradient(135deg, #818cf8 0%, #6366f1 60%, #4f46e5 100%);
      box-shadow: 0 4px 12px rgba(79,70,229,0.4), 0 0 0 1px rgba(99,102,241,0.3);
      transform: translateY(-1px);
    }
    .btn-primary:active { transform: scale(0.97) translateY(0); box-shadow: 0 1px 4px rgba(79,70,229,0.3); }
    .dark .btn-primary {
      background: linear-gradient(135deg, #818cf8 0%, #6366f1 60%, #4f46e5 100%);
      box-shadow: 0 1px 3px rgba(99,102,241,0.5), 0 0 0 1px rgba(129,140,248,0.25);
    }
    .dark .btn-primary:hover {
      background: linear-gradient(135deg, #a5b4fc 0%, #818cf8 60%, #6366f1 100%);
      box-shadow: 0 4px 14px rgba(99,102,241,0.5), 0 0 0 1px rgba(165,180,252,0.3);
    }
    .btn-secondary {
      background: var(--bg-card);
      color: var(--text-2);
      border: 1px solid var(--border);
      box-shadow: 0 1px 2px rgba(0,0,0,0.06);
    }
    .btn-secondary:hover {
      background: var(--bg-hover);
      color: var(--text-1);
      border-color: var(--accent);
      box-shadow: 0 2px 6px rgba(0,0,0,0.08);
      transform: translateY(-1px);
    }
    .btn-secondary:active { transform: scale(0.97) translateY(0); }
    .btn-danger {
      background: rgba(239,68,68,0.08); color: #ef4444;
      border: 1px solid rgba(239,68,68,0.2);
      box-shadow: 0 1px 2px rgba(239,68,68,0.08);
    }
    .btn-danger:hover {
      background: rgba(239,68,68,0.15);
      border-color: rgba(239,68,68,0.35);
      transform: translateY(-1px);
    }
    .dark .btn-danger { background: rgba(239,68,68,0.12); color: #fca5a5; border-color: rgba(239,68,68,0.2); }
    .dark .btn-danger:hover { background: rgba(239,68,68,0.22); }

    .badge {
      display: inline-flex; align-items: center;
      padding: 0.125rem 0.5rem; border-radius: 9999px;
      font-size: 0.75rem; font-weight: 500;
    }
    .badge-green  { background: #dcfce7; color: #15803d; }
    .badge-red    { background: #fee2e2; color: #b91c1c; }
    .badge-blue   { background: #dbeafe; color: #1d4ed8; }
    .badge-yellow { background: #fef9c3; color: #a16207; }
    .badge-gray   { background: var(--bg-muted); color: var(--text-2); border: 1px solid var(--border); }
    .dark .badge-green  { background: rgba(21,128,61,0.2);  color: #86efac; }
    .dark .badge-red    { background: rgba(185,28,28,0.2);  color: #fca5a5; }
    .dark .badge-blue   { background: rgba(29,78,216,0.2);  color: #93c5fd; }
    .dark .badge-yellow { background: rgba(161,98,7,0.2);   color: #fde68a; }

    .pnl-positive { color: #16a34a; font-weight: 600; }
    .pnl-negative { color: #dc2626; font-weight: 600; }
    .dark .pnl-positive { color: #4ade80; }
    .dark .pnl-negative { color: #f87171; }

    .skeleton { animation: pulse 1.5s ease-in-out infinite; background: var(--bg-muted); border-radius: 0.375rem; }
    @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
    .spin { animation: spin 1s linear infinite; }
    @keyframes spin { to { transform: rotate(360deg); } }

    .ticker-dropdown { max-height: 260px; overflow-y: auto; scrollbar-width: thin; }
    .ticker-dropdown::-webkit-scrollbar { width: 4px; }
    .ticker-dropdown::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

    /* ── Action tile (scanner grid buttons) ───────────────── */
    .action-tile {
      display: flex; flex-direction: column; align-items: center; gap: 0.375rem;
      padding: 0.75rem 0.5rem; border-radius: 0.875rem;
      border: 1.5px solid var(--border);
      background: var(--bg-card);
      box-shadow: 0 1px 3px rgba(0,0,0,0.06);
      transition: all 0.18s ease; cursor: pointer; text-align: center;
    }
    .action-tile:hover:not(:disabled) {
      border-color: var(--accent);
      background: var(--accent-dim);
      box-shadow: 0 4px 12px rgba(99,102,241,0.12);
      transform: translateY(-2px);
    }
    .action-tile:active:not(:disabled) { transform: scale(0.96); }
    .action-tile:disabled { opacity: 0.45; cursor: not-allowed; }
    .action-tile .tile-icon { width: 1.35rem; height: 1.35rem; }
    .action-tile .tile-label {
      font-size: 0.72rem; font-weight: 500; line-height: 1.3;
      color: var(--text-2);
    }
    .action-tile:hover:not(:disabled) .tile-label { color: var(--accent-text); }

    /* ── Tab active ───────────────────────────────────────── */
    .tab-active { border-bottom: 2px solid var(--accent); color: var(--accent-text); font-weight: 600; }

    /* ── Header ───────────────────────────────────────────── */
    header {
      background: var(--bg-card);
      border-bottom: 1px solid var(--border);
      transition: background-color 0.25s ease, border-color 0.25s ease;
    }

    /* ── Tailwind utility overrides for dark mode ─────────── */
    /* text */
    .dark .text-gray-900 { color: var(--text-1); }
    .dark .text-gray-800 { color: var(--text-1); }
    .dark .text-gray-700 { color: var(--text-2); }
    .dark .text-gray-600 { color: var(--text-2); }
    .dark .text-gray-500 { color: var(--text-3); }
    .dark .text-gray-400 { color: var(--text-3); }
    .dark .text-gray-300 { color: var(--text-3); }
    .dark .text-indigo-700 { color: var(--accent); }
    .dark .text-indigo-600 { color: var(--accent); }
    /* colored text — dùng màu sáng hơn trong dark */
    .dark .text-emerald-700 { color: #4ade80; }
    .dark .text-emerald-600 { color: #34d399; }
    .dark .text-emerald-500 { color: #6ee7b7; }
    .dark .text-red-700     { color: #f87171; }
    .dark .text-red-600     { color: #f87171; }
    .dark .text-red-500     { color: #fca5a5; }
    /* backgrounds */
    .dark .bg-white      { background-color: var(--bg-card); }
    .dark .bg-gray-50    { background-color: var(--bg-page); }
    .dark .bg-gray-100   { background-color: var(--bg-raised); }
    .dark .bg-gray-200   { background-color: var(--border); }
    .dark .bg-indigo-50  { background-color: var(--accent-dim); }
    /* colored card backgrounds */
    .dark .bg-emerald-50 { background-color: rgba(16,185,129,0.08); }
    .dark .bg-red-50     { background-color: rgba(239,68,68,0.08); }
    /* borders */
    .dark .border-gray-100   { border-color: var(--border); }
    .dark .border-gray-200   { border-color: var(--border); }
    .dark .border-gray-300   { border-color: var(--border); }
    .dark .border-emerald-200 { border-color: rgba(16,185,129,0.3); }
    .dark .border-red-200    { border-color: rgba(239,68,68,0.3); }
    /* dividers */
    .dark .divide-y > * + *    { border-color: var(--border); }
    .dark .divide-gray-100 > * + * { border-color: var(--border-sub); }
    .dark .divide-gray-50 > * + *  { border-color: var(--border-sub); }
    /* inputs */
    .dark input, .dark select, .dark textarea {
      background-color: var(--bg-input);
      border-color: var(--border);
      color: var(--text-1);
    }
    .dark input::placeholder, .dark textarea::placeholder { color: var(--text-4); }
    /* hover */
    .dark .hover\:bg-gray-50:hover  { background-color: var(--bg-hover); }
    .dark .hover\:bg-gray-100:hover { background-color: var(--bg-raised); }
    .dark .hover\:bg-indigo-50:hover { background-color: var(--accent-dim); }
    .dark .hover\:border-emerald-400:hover { border-color: #34d399; }
    .dark .hover\:border-red-400:hover     { border-color: #f87171; }
    .dark .hover\:border-indigo-300:hover  { border-color: var(--accent); }
    .dark .hover\:text-gray-600:hover  { color: var(--text-2); }
    .dark .hover\:text-gray-900:hover  { color: var(--text-1); }
    /* nav buttons */
    .dark nav button { color: var(--text-2); }
    .dark nav button:hover { background-color: var(--bg-hover); color: var(--text-1); }
    .dark nav button.bg-indigo-50 { background-color: var(--accent-dim); }
    .dark nav button.text-indigo-700 { color: var(--accent); }
    /* tables */
    .dark table thead { background-color: var(--bg-page); }
    .dark table thead th { color: var(--text-3); }
    .dark table tbody tr { border-color: var(--border-sub); }
    .dark table tbody tr:hover { background-color: var(--bg-hover); }
    .dark table tbody td { color: var(--text-2); }
    /* ticker dropdown */
    .dark .ticker-dropdown { background-color: var(--bg-card); border-color: var(--border); }
    .dark .ticker-dropdown > div { color: var(--text-1); }
    .dark .ticker-dropdown > div:hover,
    .dark .ticker-dropdown > div.bg-indigo-50 { background-color: var(--accent-dim); color: var(--text-1); }
    /* log panel */
    .dark .bg-gray-900 { background-color: #09090b; }
    /* modal */
    .dark .bg-black\/40 { background-color: rgba(0,0,0,0.65); }
    /* scanner stock cards */
    .dark .border-green-400 { border-color: #16a34a; }
    .dark .border-red-400   { border-color: #dc2626; }
    /* action icon buttons */
    .dark .hover\:bg-blue-50:hover     { background-color: rgba(59,130,246,0.12); }
    .dark .hover\:border-blue-300:hover { border-color: rgba(59,130,246,0.4); }
    .dark .hover\:bg-purple-50:hover   { background-color: rgba(168,85,247,0.12); }
    .dark .hover\:border-purple-300:hover { border-color: rgba(168,85,247,0.4); }
    .dark .hover\:bg-emerald-50:hover  { background-color: rgba(16,185,129,0.1); }
    .dark .hover\:border-emerald-300:hover { border-color: rgba(16,185,129,0.3); }
    .dark .text-blue-500   { color: #60a5fa; }
    .dark .text-purple-500 { color: #c084fc; }
    .dark .text-emerald-500 { color: #34d399; }

    /* ── PWA / mobile ───────────────────────────────────────── */
    .scrollbar-hide {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }
    .scrollbar-hide::-webkit-scrollbar { display: none; }
    .touch-manipulation { touch-action: manipulation; }
    .safe-pb {
      padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
    }
    .safe-pt {
      padding-top: env(safe-area-inset-top, 0px);
    }
    /* PWA bắt buộc: chặn bấm/scroll xuyên ra app phía sau; chỉ tương tác trong .pwa-install-overlay */
    html.pwa-gate-open body > *:not(.pwa-install-overlay) {
      pointer-events: none !important;
      user-select: none;
    }
    .pwa-install-overlay {
      pointer-events: auto;
      -webkit-overflow-scrolling: touch;
    }
    @media (max-width: 640px) {
      .card { padding: 1rem; }
      header nav button {
        min-height: 2.75rem;
        min-width: 2.75rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
      }
      .mobile-tap-target { min-height: 2.75rem; min-width: 2.75rem; }

      /* Bớt chữ đậm / gần đen trên mobile (đọc dễ hơn) */
      html:not(.dark) h1,
      html:not(.dark) h2,
      html:not(.dark) h3,
      html:not(.dark) h4 {
        font-weight: 500 !important;
        color: #475569 !important;
      }
      html:not(.dark) .text-gray-900 {
        color: #3f3f46 !important;
      }
      html:not(.dark) .text-gray-900.font-bold,
      html:not(.dark) .text-gray-900.font-semibold,
      html:not(.dark) .font-bold.text-gray-900,
      html:not(.dark) .font-semibold.text-gray-900 {
        font-weight: 500 !important;
      }
      /* Dark mode: logo / tiêu đề trắng tinh → dịu hơn */
      html.dark header span.dark\:text-zinc-100 {
        font-weight: 500 !important;
        color: #d4d4d8 !important;
      }
    }