/* Auto-Cuan application shell styles extracted from index.html for independent caching. */
/* ---- .hidden safety net -------------------------------------------
   This one rule is the app's entire show/hide mechanism: 101 uses in the
   markup and 169 classList.add/remove('hidden') calls drive which
   top-level screen is up (loader / blocked / maintenance / landing /
   app), which page is up, which nav items a non-approved account sees,
   and every modal. Until now it was supplied ONLY by the Tailwind Play
   CDN, so whenever that third party was blocked, filtered or slow, every
   screen, page and modal rendered at once, stacked. Defining it here, in
   the inline stylesheet, means the app can still hide things when the
   CDN cannot be reached.

   Deliberately NOT !important: Tailwind's own responsive display
   utilities must keep winning over it. `class="hidden md:flex"` is used
   for the desktop landing menu, and .md\:flex lives in a later media
   query in Tailwind's sheet, so it overrides this by source order — the
   same way it overrides Tailwind's own .hidden. Adding !important here
   would pin that menu shut on desktop. */
.hidden { display: none; }

/* Hide any previously saved broken Level Fokus cards from old chat history in localStorage */
.chart-focus-card { display: none !important; }
body { background-color: #0b0e14; overflow-x: hidden; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0f1319; }
::-webkit-scrollbar-thumb { background: #242d3d; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #34d399; }
@keyframes spin { to { transform: rotate(360deg); } }
.spinner { width: 40px; height: 40px; border: 3px solid #242d3d; border-top-color: #10b981; border-radius: 50%; animation: spin 0.8s linear infinite; }
.spinner-sm { width: 16px; height: 16px; border: 2px solid #242d3d; border-top-color: #10b981; border-radius: 50%; animation: spin 0.6s linear infinite; display: inline-block; vertical-align: middle; margin-right: 6px; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.fade-in-up { animation: fadeInUp 0.3s ease-out forwards; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.fade-in { animation: fadeIn 0.15s ease-out forwards; }
@keyframes pulseGlow { 0%,100%{opacity:1} 50%{opacity:0.5} }
.animate-pulse-glow { animation: pulseGlow 1.5s cubic-bezier(0.4,0,0.6,1) infinite; }
@keyframes slideInRight { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:translateX(0); } }
@keyframes slideOutRight { from { opacity:1; transform:translateX(0); } to { opacity:0; transform:translateX(20px); } }
#toastContainer { position: fixed; top: 1rem; right: 1rem; z-index: 99999; display: flex; flex-direction: column; gap: 0.5rem; pointer-events: none; max-width: 360px; }
@media (max-width: 640px) { #toastContainer { top: auto; bottom: 1rem; right: 0.5rem; left: 0.5rem; max-width: 100%; align-items: center; } }
.toast { pointer-events: auto; padding: 0.75rem 1rem; border-radius: 0.75rem; font-size: 0.8125rem; font-weight: 500; animation: slideInRight 0.3s ease-out forwards; backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.05); }
.toast-exit { animation: slideOutRight 0.25s ease-in forwards; }
.toast-success { background: rgba(16,185,129,0.15); color: #6ee7b7; border-color: rgba(16,185,129,0.3); }
.toast-error { background: rgba(239,68,68,0.15); color: #fca5a5; border-color: rgba(239,68,68,0.3); }
.toast-warning { background: rgba(245,158,11,0.15); color: #fcd34d; border-color: rgba(245,158,11,0.3); }
.skeleton { background: linear-gradient(90deg, #151a23 25%, #1c2333 50%, #151a23 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
button, [role="button"] { transition: all 0.15s ease-out; }
button:active:not(:disabled) { transform: scale(0.97); }
button:disabled { opacity: 0.6; cursor: not-allowed; }
.chat-container { display: flex; flex-direction: column; }
.chat-messages { flex: 1; overflow-y: auto; scroll-behavior: smooth; }
.attachment-preview { position: relative; display: inline-block; }
.attachment-preview .remove-btn { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; background: #ef4444; color: white; font-size: 12px; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 2px solid #0b0e14; }
.copy-btn { opacity: 0.4; transition: all 0.15s ease-out; }
.flex.gap-3:hover .copy-btn, .copy-btn:focus { opacity: 1; }
@media (max-width: 640px) { .copy-btn { opacity: 0.7; } }
.ai-content { font-size: 13.5px; line-height: 1.55; word-break: break-word; overflow-wrap: break-word; }
.ai-content p { margin: 0 0 10px; font-size: inherit; white-space: pre-line; word-break: break-word; }
.ai-content p:last-child { margin-bottom: 0; }
.ai-content p:first-child { font-size: 14px; font-weight: 600; }
.ai-content p:empty { display: none; }
.ai-content ul, .ai-content ol { margin: 4px 0 10px; padding-left: 18px; }
.ai-content li { margin: 2px 0; font-size: inherit; line-height: 1.5; }
.ai-content strong { font-size: inherit; font-weight: 700; }
.ai-content br { display: block; content: ""; margin-top: 1px; }
.ai-content br + br { display: none; }
/* ===== FOLLOW-UP BUBBLE: consistent, lighter typography ===== */
.ai-content.ai-followup p { font-size: 13px; font-weight: 400; line-height: 1.6; margin: 0 0 8px; }
.ai-content.ai-followup p:first-child { font-size: 13px; font-weight: 400; }
.ai-content.ai-followup p:last-child { margin-bottom: 0; }
.ai-content.ai-followup strong { font-weight: 600; }
/* ===== PREMIUM LAYOUT: DECISION CARD ===== */
.ai-content .decision-card {
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: var(--ac-radius-md, 12px);
    padding: 12px 14px;
    margin: 4px 0 16px;
    background: rgba(15, 23, 42, 0.5);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    font-size: 12.5px;
    line-height: 1.6;
}
.ai-content .decision-card > strong:first-child {
    display: block;
    margin-bottom: 8px;
    color: #6ee7b7;
    font-size: 13px;
}
.ai-content .decision-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 8px;
}
.ai-content .decision-grid > div {
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: var(--ac-radius-sm, 8px);
    padding: 8px 10px;
    background: rgba(15, 23, 42, 0.32);
}
.ai-content .decision-grid span {
    display: block;
    font-size: var(--ac-text-micro, 11px);
    color: #94a3b8;
    margin-bottom: 2px;
}
.ai-content .decision-grid b {
    display: block;
    color: #e5e7eb;
    font-size: 12.5px;
}
.ai-content .key-level {
    margin-top: 10px;
    font-size: 12px;
    color: #cbd5e1;
}
/* ===== PREMIUM LAYOUT: METRIC GRID ===== */
.ai-content .metric-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 8px 0 14px;
}
.ai-content .metric-grid > div {
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: var(--ac-radius-md, 12px);
    padding: 10px 12px;
    background: rgba(15, 23, 42, 0.26);
    font-size: 12px;
    line-height: 1.55;
}
.ai-content .metric-grid > div > strong:first-child { display: block; margin-bottom: 4px; color: #94a3b8; font-size: 11.5px; }
/* ===== PREMIUM LAYOUT: LEVEL GRID ===== */
.ai-content .level-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 8px 0 14px;
}
.ai-content .level-grid > div {
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: var(--ac-radius-md, 12px);
    padding: 10px 12px;
    background: rgba(15, 23, 42, 0.26);
    font-size: 12px;
    line-height: 1.55;
}
.ai-content .level-grid > div > strong:first-child { display: block; margin-bottom: 4px; color: #94a3b8; font-size: 11.5px; }
/* ===== PREMIUM LAYOUT: SCENARIO LIST ===== */
.ai-content .scenario-list {
    display: grid;
    gap: 10px;
    margin: 8px 0 14px;
}
.ai-content .scenario-list > div {
    border-left: 3px solid rgba(16, 185, 129, 0.5);
    border-radius: var(--ac-radius-md, 12px);
    padding: 10px 12px;
    background: rgba(15, 23, 42, 0.26);
    font-size: 12px;
    line-height: 1.55;
}
.ai-content .scenario-list > div > strong:first-child { display: block; margin-bottom: 3px; }
/* ===== PREMIUM LAYOUT: TRADE PLAN GRID ===== */
.ai-content .trade-plan-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 8px 0 14px;
}
.ai-content .trade-plan-grid > div {
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: var(--ac-radius-md, 12px);
    padding: 10px 12px;
    background: rgba(15, 23, 42, 0.26);
    font-size: 12px;
    line-height: 1.55;
}
.ai-content .trade-plan-grid > div > strong:first-child { display: block; margin-bottom: 4px; color: #94a3b8; font-size: 11.5px; }
/* ===== PREMIUM LAYOUT: VOLUME CARD ===== */
.ai-content .volume-card {
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: var(--ac-radius-md, 12px);
    padding: 12px 14px;
    margin: 8px 0 14px;
    background: rgba(16, 185, 129, 0.04);
    font-size: 12px;
    line-height: 1.55;
}
.ai-content .volume-card > strong:first-child { display: block; margin-bottom: 8px; color: #6ee7b7; font-size: 12.5px; }
.ai-content .volume-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 8px;
}
.ai-content .volume-grid > div {
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: var(--ac-radius-sm, 8px);
    padding: 8px 10px;
    background: rgba(15, 23, 42, 0.3);
}
.ai-content .volume-grid span { display: block; font-size: var(--ac-text-micro, 11px); color: #94a3b8; margin-bottom: 2px; }
.ai-content .volume-grid b { display: block; color: #e5e7eb; font-size: 12px; }
.ai-content .volume-note { margin-top: 10px; font-size: 11.5px; color: #cbd5e1; line-height: 1.5; padding: 8px 10px; border-radius: var(--ac-radius-sm, 8px); background: rgba(15, 23, 42, 0.25); }
/* ===== PREMIUM LAYOUT: FIBONACCI CARD ===== */
.ai-content .fibo-card {
    border: 1px solid rgba(168, 85, 247, 0.22);
    border-radius: var(--ac-radius-md, 12px);
    padding: 12px 14px;
    margin: 10px 0;
    background: rgba(168, 85, 247, 0.04);
    font-size: 12px;
    line-height: 1.55;
}
.ai-content .fibo-card > strong:first-child { display: block; margin-bottom: 8px; color: #c4b5fd; font-size: 12.5px; }
.ai-content .fibo-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 8px;
}
.ai-content .fibo-grid > div {
    border: 1px solid rgba(168, 85, 247, 0.14);
    border-radius: var(--ac-radius-sm, 8px);
    padding: 8px 10px;
    background: rgba(15, 23, 42, 0.3);
}
.ai-content .fibo-grid span { display: block; font-size: var(--ac-text-micro, 11px); color: #a78bfa; margin-bottom: 2px; }
.ai-content .fibo-grid b { display: block; color: #e5e7eb; font-size: 12px; }
.ai-content .fibo-level { border-color: rgba(168, 85, 247, 0.1) !important; padding: 6px 10px !important; }
.ai-content .fibo-level strong, .ai-content .fibo-grid > div.fibo-level b { color: #c4b5fd; font-size: 11.5px; }
.ai-content .fibo-note { margin-top: 10px; font-size: 11.5px; color: #cbd5e1; line-height: 1.5; padding: 8px 10px; border-radius: var(--ac-radius-sm, 8px); background: rgba(15, 23, 42, 0.25); }
.ai-content .fibo-note strong { color: #c4b5fd; }
@media (max-width: 480px) {
    .ai-content .fibo-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
    .ai-content .fibo-card { padding: 10px 10px; }
}
/* ===== CHART FIBONACCI STRIP (below chart — compact fallback) ===== */
.chart-fib-strip {
    padding: 6px 12px;
    border-top: 1px solid rgba(245, 158, 11, 0.12);
    background: rgba(15, 12, 5, 0.25);
    font-size: var(--ac-text-micro, 11px);
}
.chart-fib-strip-compact {
    opacity: 0.7;
    transition: opacity 0.2s;
}
.chart-fib-strip-compact:hover {
    opacity: 1;
}
.chart-fib-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-size: var(--ac-text-micro, 11px);
    font-weight: 600;
}
.chart-fib-header b { font-weight: 700; }
.chart-fib-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}
.chart-fib-item {
    text-align: center;
    padding: 4px 6px;
    border-radius: var(--ac-radius-xs, 6px);
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.18);
}
.chart-fib-item span { display: block; font-size: var(--ac-text-micro, 11px); color: #f59e0b; margin-bottom: 1px; }
.chart-fib-item b { display: block; font-size: 11px; color: #e5e7eb; }
.chart-fib-note {
    margin-top: 6px;
    font-size: var(--ac-text-micro, 11px);
    color: #94a3b8;
    line-height: 1.4;
}
@media (max-width: 400px) {
    .chart-fib-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ===== PREMIUM LAYOUT: SCENARIO PRICE GRID ===== */
.ai-content .scenario-price-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 8px 0 14px;
}
.ai-content .case-card {
    border-radius: var(--ac-radius-md, 12px);
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.5;
}
.ai-content .case-card span { display: block; font-size: var(--ac-text-micro, 11px); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.ai-content .case-card b { display: block; font-size: 13px; color: #e5e7eb; margin-bottom: 4px; }
.ai-content .case-card p { margin: 0; font-size: 11px; color: #94a3b8; }
.ai-content .case-card.bear { border: 1px solid rgba(239, 68, 68, 0.25); background: rgba(239, 68, 68, 0.06); }
.ai-content .case-card.bear span { color: #fca5a5; }
.ai-content .case-card.base { border: 1px solid rgba(148, 163, 184, 0.2); background: rgba(148, 163, 184, 0.06); }
.ai-content .case-card.base span { color: #94a3b8; }
.ai-content .case-card.bull { border: 1px solid rgba(16, 185, 129, 0.25); background: rgba(16, 185, 129, 0.06); }
.ai-content .case-card.bull span { color: #6ee7b7; }
/* ===== PREMIUM LAYOUT: ANALYTIC SUMMARY ===== */
.ai-content .analytic-summary {
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: var(--ac-radius-md, 12px);
    padding: 12px 14px;
    margin: 8px 0 14px;
    background: rgba(15, 23, 42, 0.35);
    font-size: 12px;
    line-height: 1.55;
}
.ai-content .analytic-summary > strong:first-child { display: block; margin-bottom: 8px; color: #6ee7b7; font-size: 12.5px; }
.ai-content .summary-rows { display: grid; gap: 6px; }
.ai-content .summary-rows > div { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; border-bottom: 1px solid rgba(148, 163, 184, 0.08); }
.ai-content .summary-rows > div:last-child { border-bottom: none; }
.ai-content .summary-rows > div > span:first-child { color: #94a3b8; font-size: 11px; flex-shrink: 0; margin-right: 8px; }
.ai-content .summary-rows > div > b { color: #e5e7eb; font-size: 12px; text-align: right; }
/* ===== PREMIUM LAYOUT: MOBILE RESPONSIVE ===== */
@media (max-width: 639px) {
    .ai-content .decision-grid,
    .ai-content .metric-grid,
    .ai-content .level-grid,
    .ai-content .trade-plan-grid,
    .ai-content .volume-grid { grid-template-columns: 1fr; }
    .ai-content .scenario-price-grid { grid-template-columns: 1fr; }
    .ai-content .decision-card { padding: 10px 12px; }
    .ai-content .scenario-list > div,
    .ai-content .metric-grid > div,
    .ai-content .level-grid > div,
    .ai-content .trade-plan-grid > div,
    .ai-content .volume-grid > div,
    .ai-content .case-card { padding: 8px 10px; }
    .ai-content .summary-rows > div { flex-direction: column; gap: 2px; }
    .ai-content .summary-rows > div > b { text-align: left; }
}
@media (min-width: 640px) {
    .ai-content .decision-card { padding: 14px 16px; font-size: 13px; }
    .ai-content .decision-card > strong:first-child { font-size: 14px; }
    .ai-content .decision-grid b { font-size: 13px; }
}
@media (min-width: 640px) {
    .ai-content { font-size: 14px; line-height: 1.58; }
    .ai-content p { margin: 0 0 12px; }
    .ai-content p:first-child { font-size: 14.5px; }
}

/* ===== NAVIGATION STYLES ===== */
/* Box model only. Colour, weight, radius, hover and the active state are
   stated once, in ui-theme.css sections 4 and 8g. */
.nav-btn { display: flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 12px; background: transparent; border: 1px solid transparent; }
.nav-btn.disabled { color: #4b5563; cursor: not-allowed; opacity: 0.6; }
.nav-btn svg { flex-shrink: 0; }
.screener-tab, .nk-screener-tab, .dt-screener-tab { background: transparent; border: 1px solid transparent; }
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.nav-scroll-container { position: relative; scroll-snap-type: x proximity; scroll-padding-inline: 14px; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; }
.nav-scroll-container .nav-btn { scroll-snap-align: start; flex: 0 0 auto; }
.mobile-nav-row { position: relative; padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); }
.mobile-nav-row::before, .mobile-nav-row::after { content: ''; position: absolute; top: 0; bottom: 6px; width: 22px; pointer-events: none; z-index: 1; }
.mobile-nav-row::before { left: 0; background: linear-gradient(to right, #0b0e14, transparent); opacity: .55; }
.mobile-nav-row::after { right: 0; background: linear-gradient(to left, #0b0e14, transparent); opacity: .85; }
@media (min-width: 640px) { .nav-scroll-container::after, .mobile-nav-row::before, .mobile-nav-row::after { display: none; } }
/* ===== SUBSCRIPTION EXPERIENCE ===== */
.subscription-hero { position:relative; overflow:hidden; border:1px solid rgba(52,211,153,.22); border-radius:24px; background:radial-gradient(circle at 90% 10%,rgba(16,185,129,.18),transparent 34%),linear-gradient(135deg,rgba(15,23,42,.95),rgba(16,30,38,.92)); box-shadow:0 20px 44px rgba(0,0,0,.20); }
.subscription-card { display:flex; flex-direction:column; min-width:0; border:1px solid rgba(148,163,184,.16); border-radius:20px; background:linear-gradient(165deg,rgba(30,41,59,.72),rgba(15,23,42,.78)); box-shadow:0 12px 30px rgba(0,0,0,.14); transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease; }.subscription-card:hover { transform:translateY(-3px); border-color:rgba(52,211,153,.38); box-shadow:0 18px 38px rgba(0,0,0,.24); }.subscription-card.popular{border-color:rgba(16,185,129,.55);}.subscription-card.lifetime{border-color:rgba(168,85,247,.45);background:radial-gradient(circle at 85% 10%,rgba(168,85,247,.18),transparent 38%),linear-gradient(165deg,rgba(46,16,101,.42),rgba(15,23,42,.88));}.subscription-badge{display:inline-flex;width:fit-content;padding:4px 9px;border-radius:999px;font-size: var(--ac-text-micro, 11px);line-height:1.2;font-weight:800;letter-spacing:.035em;text-transform:uppercase}.subscription-feature{display:flex;gap:8px;font-size:12px;line-height:1.45;color:#cbd5e1}.subscription-feature.no{color:#64748b}.subscription-action{width:100%;min-height:40px;border-radius:12px;font-size:13px;font-weight:800}.subscription-action:disabled{cursor:not-allowed;opacity:.72}


/* ===== DESKTOP HEADER BALANCE + SITE-WIDE POLISH ===== */
.header-shell { max-width: 1440px; }
.brand-mark { box-shadow: 0 12px 28px rgba(16,185,129,0.22), inset 0 1px 0 rgba(255,255,255,0.25); }
.header-status-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 999px; font-size: var(--ac-text-micro, 11px); font-weight: 700; letter-spacing: .01em; border: 1px solid transparent; white-space: nowrap; }
.header-status-chip.safe { color: #86efac; border-color: rgba(34,197,94,0.20); background: rgba(34,197,94,0.08); }
.header-status-chip.warn { color: #fcd34d; border-color: rgba(245,158,11,0.20); background: rgba(245,158,11,0.08); }
.header-status-dot { width: 6px; height: 6px; border-radius: 999px; background: #34d399; box-shadow: 0 0 12px rgba(52,211,153,0.55); }
.header-account { border: 1px solid transparent; border-radius: 999px; padding: 4px 5px 4px 10px; }
#headerAccountSection { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; white-space: nowrap; }
.desktop-nav, .desktop-header-chips { display: none; }
.nav-btn { min-height: 34px; }
@media (min-width: 1024px) {
    .desktop-nav { display: flex; }
    .mobile-nav-row { display: none; }
    .nav-btn { padding: 7px 9px; font-size: 11.5px; }
}
@media (min-width: 1280px) {
    .nav-btn { padding: 7px 11px; font-size: 12px; }
    .desktop-nav { gap: 3px; }
}
@media (min-width: 1440px) {
    .desktop-header-chips { display: flex; }
}
@media (max-width: 1023px) {
    .desktop-nav, .desktop-header-chips { display: none !important; }
    .mobile-nav-row { display: block; }
}
@media (max-width: 430px) {
    .header-shell { padding-left: 12px; padding-right: 12px; }
    .mobile-nav-row { padding-left: 14px; padding-right: 14px; }
    .nav-scroll-container { gap: 6px; padding-left: 2px; padding-right: 34px; }
    .mobile-nav-row .nav-btn { min-height: 44px; padding: 8px 10px; border-radius: 12px; font-size: 11px; background: rgba(15,23,42,0.34); border-color: rgba(148,163,184,0.10); }
    .mobile-nav-row .nav-btn.active { background: rgba(16,185,129,0.14); border-color: rgba(16,185,129,0.38); box-shadow: inset 0 0 0 1px rgba(16,185,129,0.08); }
    .mobile-nav-row .nav-btn svg { width: 15px; height: 15px; }
}
input, select, textarea { transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px rgba(16,185,129,0.10); }
.page-content { max-width: 1180px; animation: fadeIn 0.15s ease-out; }
table { border-collapse: separate; border-spacing: 0; }
th { color: #cbd5e1; font-weight: 700; }
td { border-color: rgba(148,163,184,0.08) !important; }
.action-card, .dt-card-item, .kg-card-item, .nk-card-item { box-shadow: 0 12px 26px rgba(0,0,0,0.14); }
.action-card:focus-visible, .nav-btn:focus-visible, button:focus-visible { outline: 2px solid rgba(52,211,153,0.55); outline-offset: 2px; }

/* ===== SIDEBAR STYLES ===== */
.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(2px); z-index: 200; transition: opacity 0.2s ease; }
.sidebar-overlay.active { display: block; }
.sidebar { position: fixed; top: 0; left: 0; height: 100vh; width: 280px; background: #0f1319; border-right: 1px solid #1c2333; z-index: 210; transform: translateX(-100%); transition: transform 0.25s cubic-bezier(0.4,0,0.2,1); display: flex; flex-direction: column; overflow: hidden; }
.sidebar.open { transform: translateX(0); }
.sidebar-header { padding: 16px; border-bottom: 1px solid #1c2333; flex-shrink: 0; }
.sidebar-sessions { flex: 1; overflow-y: auto; padding: 8px; }
.sidebar-footer { padding: 12px 16px; border-top: 1px solid #1c2333; flex-shrink: 0; }
.session-item { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; cursor: pointer; transition: all 0.15s ease-out; margin-bottom: 2px; }
.session-item:hover { background: #151a23; }
.session-item.active { background: #1c2333; border: 1px solid rgba(16,185,129,0.2); border-left: 3px solid #10b981; }
.session-item .session-title { flex: 1; font-size: 0.8125rem; color: #d1d5db; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.session-item.active .session-title { color: #6ee7b7; }
/* An icon-only control still needs a thumb-sized hit area. The icon keeps
   its size; the button grows around it. On a touch device the control is
   always visible, since there is no hover to reveal it with. */
.session-item .session-delete { opacity: 0; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; padding: 4px; border-radius: 6px; color: #6b7280; transition: all 0.15s; }
@media (pointer: coarse) { .session-item .session-delete { opacity: 1; } }
.session-item:hover .session-delete { opacity: 1; }
.session-item .session-delete:hover { color: #f87171; background: rgba(239,68,68,0.1); }
.new-chat-btn { width: 100%; padding: 10px 16px; border-radius: 10px; font-size: 0.8125rem; font-weight: 600; color: #e5e7eb; background: #151a23; border: 1px solid #242d3d; display: flex; align-items: center; gap: 8px; transition: all 0.15s; }
.new-chat-btn:hover { background: #1c2333; border-color: rgba(16,185,129,0.3); color: #6ee7b7; }
.sidebar-toggle-btn { padding: 8px; border-radius: 10px; color: #9ca3af; transition: all 0.15s; background: transparent; border: none; cursor: pointer; }
.sidebar-toggle-btn:hover { color: #e5e7eb; background: #151a23; }
@media (min-width: 768px) {
    .sidebar { width: 300px; }
}
/* ===== PDF EXPORT: print fallback ===== */
@media print {
    body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    nav, .nav-btn, #toastContainer, #analisisFollowUp, .spinner, .spinner-sm { display: none !important; }
}
.dt-card-item:hover { border-color: rgba(16,185,129,0.3) !important; box-shadow: 0 0 10px rgba(16,185,129,0.06); }
.kg-card-item:hover { border-color: rgba(16,185,129,0.3) !important; box-shadow: 0 0 10px rgba(16,185,129,0.06); }
.nk-card-item:hover { border-color: rgba(16,185,129,0.3) !important; box-shadow: 0 0 10px rgba(16,185,129,0.06); }
@keyframes scrFadeIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
.scr-pane-anim { animation: scrFadeIn 0.12s ease-out; }
@media (prefers-reduced-motion: reduce) { .scr-pane-anim { animation: none; } }
/* ===== PHASE 2: CONSISTENT PANELS & EMPTY STATES ===== */
/* .panel, .panel-title and .panel-subtitle are defined once, in
   ui-theme.css. Only the header's flex layout stays here. */
.panel-header { display: flex; justify-content: space-between; }
.dashboard-hero { position: relative; overflow: hidden; border: 1px solid transparent; background: radial-gradient(circle at 18% 0%, rgba(16,185,129,0.16), transparent 32%), linear-gradient(135deg, rgba(15,23,42,0.98), rgba(11,14,20,0.82)); }
.dashboard-hero::after { content: ''; position: absolute; inset: auto -18% -42% 30%; height: 160px; background: radial-gradient(circle, rgba(59,130,246,0.12), transparent 62%); pointer-events: none; }
.dash-badge { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; font-size: var(--ac-text-micro, 11px); line-height: 1.2; border: 1px solid transparent; }
/* Risk/reward ladder: the trade's geometry, drawn on its own scale.
   Colour is never the only cue — the stop, entry and target marks differ
   in shape and the legend repeats every value as text. */
.dash-ladder { margin-top: 10px; }
.dash-ladder-track { position: relative; height: 8px; border-radius: 999px; background: rgba(148,163,184,0.10); overflow: hidden; }
.dash-ladder-risk, .dash-ladder-reward { position: absolute; top: 0; bottom: 0; }
.dash-ladder-risk { background: linear-gradient(90deg, rgba(248,113,113,0.34), rgba(248,113,113,0.14)); }
.dash-ladder-reward { background: linear-gradient(90deg, rgba(52,211,153,0.16), rgba(52,211,153,0.36)); }
.dash-ladder-mark { position: absolute; top: -2px; width: 2px; height: 12px; margin-left: -1px; border-radius: 1px; }
.dash-ladder-mark.is-stop { background: #f87171; }
.dash-ladder-mark.is-target { background: #fbbf24; }
.dash-ladder-mark.is-entry { background: #60a5fa; height: 8px; top: 0; }
.dash-ladder-price { position: absolute; top: -3px; width: 10px; height: 14px; margin-left: -5px; border-radius: 3px; background: #e2e8f0; box-shadow: 0 0 0 2px rgba(2,6,23,0.85); }
.dash-ladder-legend { display: flex; justify-content: space-between; gap: 8px; margin-top: 5px; font-size: var(--ac-text-micro, 11px); font-variant-numeric: tabular-nums; }
.dash-ladder-legend .is-stop { color: #fca5a5; }
.dash-ladder-legend .is-now { color: #e2e8f0; font-weight: 700; }
.dash-ladder-legend .is-target { color: #fcd34d; }
@media (max-width: 420px) { .dash-ladder-legend { font-size: var(--ac-text-micro, 11px); } }
/* Market state band. Three tiles, equal weight, each answering a
   question the user would otherwise have to go looking for. */
.market-band-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.market-tile { display: flex; flex-direction: column; gap: 6px; padding: 13px 14px; min-width: 0; }
.market-tile-head { display: flex; align-items: center; gap: 7px; }
.market-tile-label { font-size: var(--ac-text-micro, 11px); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #7c8ba1; }
.market-tile-body { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; min-width: 0; }
.market-tile-value { font-size: 22px; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; color: #f8fafc; font-variant-numeric: tabular-nums; }
.market-tile-value.is-text { font-size: 15px; font-weight: 700; letter-spacing: 0; overflow-wrap: anywhere; }
.market-tile-delta { font-size: 12px; font-weight: 600; color: #9ca3af; font-variant-numeric: tabular-nums; }
.market-tile-unit { font-size: 11px; color: #7c8ba1; }
.market-tile-note { font-size: var(--ac-text-micro, 11px); line-height: 1.5; color: #7c8ba1; margin-top: auto; }
/* A text link is still a tap target: at 11px type this was 17px tall,
   well under a comfortable thumb. Padding gives it height without
   changing where the text sits, and the negative inline margin keeps it
   optically aligned with the tile's left edge. */
.market-tile-link { margin-top: auto; align-self: flex-start; min-height: 32px; display: inline-flex; align-items: center; padding: 6px 8px; margin-left: -8px; font-size: 11px; color: #6ee7b7; background: none; border: 0; border-radius: 8px; cursor: pointer; }
.market-tile-link:hover { color: #a7f3d0; background: rgba(16,185,129,0.07); }
@media (max-width: 760px) { .market-band-grid { grid-template-columns: 1fr; } .market-tile-value { font-size: 20px; } }
/* Controls inside panel headers were 27px tall on a phone. On a pointer
   device that is fine; under a thumb it is not, and these three sit
   close together. Height only grows where touch is the primary input. */
@media (pointer: coarse) {
    .panel-header button, .panel .flex.gap-1 > button { min-height: 34px; }
}
.dash-level-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.dash-level { min-width: 0; padding: 7px 8px; }
.dash-level span { display: block; font-size: var(--ac-text-micro, 11px); color: #94a3b8; text-transform: uppercase; letter-spacing: .04em; }
.dash-level b { display: block; margin-top: 2px; font-size: 11px; color: #e5e7eb; overflow-wrap: anywhere; }
.dash-section-note { border: 1px solid rgba(245,158,11,0.14); background: rgba(245,158,11,0.05); color: #fcd34d; font-size: 11px; }
@media (max-width: 640px) {
    .dash-level-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dash-level:last-child:nth-child(odd) { grid-column: span 2; }
}
/* Layout and the error tone only; every other property is stated once,
   in ui-theme.css section 8i. */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
/* Screener filter area compact on mobile */
@media (max-width: 639px) {
    .scr-filter-grid { grid-template-columns: 1fr 1fr !important; }
    .scr-filter-grid > label { grid-column: span 2; }
}
/* Screener info bar (compact disclaimer + legend) */
.scr-info-bar { font-size: 11px; color: #6b7280; line-height: 1.5; padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(28,35,51,0.3); background: rgba(15,19,25,0.35); }
.scr-info-bar strong { color: #9ca3af; }

/* ===== MOBILE UX POLISH: skeletons, empty states, modal, chart, portfolio ===== */
@media (prefers-reduced-motion: reduce) { .skeleton, .spinner, .spinner-sm, .animate-pulse-glow, .fade-in, .fade-in-up { animation: none !important; } }
.skeleton-card { padding: 14px; }
.skeleton-line { height: 10px; border-radius: 999px; background: linear-gradient(90deg, #151a23 25%, #1c2333 50%, #151a23 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; }
.portfolio-row-card { display: grid; gap: 10px; padding: 14px; margin-bottom: 10px; }
.portfolio-row-card .portfolio-symbol { font-size: 18px; font-weight: 800; color: #f8fafc; letter-spacing: -.02em; }
.portfolio-row-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.portfolio-row-grid span { display:block; font-size: var(--ac-text-micro, 11px); color:#64748b; text-transform:uppercase; letter-spacing:.04em; }
.portfolio-row-grid b { display:block; font-size:12px; color:#e5e7eb; margin-top:2px; }
#scrDetailModal > div { background: radial-gradient(circle at 18% 0%, rgba(16,185,129,.10), transparent 28%), #0f1319 !important; border-color: rgba(148,163,184,.16) !important; box-shadow: 0 28px 80px rgba(0,0,0,.42); }
#scrDetailContent * { max-width: 100%; }
@media (max-width: 640px) { .chart-search-row, .portfolio-head-row { flex-direction: column; align-items: stretch; } .chart-search-row button, .portfolio-head-row button { min-height: 44px; justify-content: center; } .scr-filter-grid input, .scr-filter-grid select, .scr-filter-grid label { min-height: 40px; font-size: 12px; } .screener-tab, .nk-screener-tab, .dt-screener-tab { min-height: 36px; padding-inline: 12px; } }
/* Phase 3: Detail Modal Responsive */
#scrDetailModal > div { scrollbar-width: thin; scrollbar-color: #242d3d #0f1319; }
@media (max-width: 640px) {
    #scrDetailModal > div { max-height: 92vh; border-radius: 20px 20px 0 0; padding: 16px 14px 28px; max-width: 100%; }
    .scr-detail-levels { grid-template-columns: 1fr 1fr !important; }
}
@media (min-width: 641px) {
    #scrDetailModal > div { border-radius: 16px; max-height: 85vh; }
    #scrDetailModal > div > div:first-child { display: none; }
}

/* ===== PUBLIC LANDING PAGE ===== */
.landing-shell { min-height: 100vh; background: radial-gradient(circle at 20% 0%, rgba(16,185,129,.16), transparent 32%), radial-gradient(circle at 84% 14%, rgba(59,130,246,.13), transparent 30%), #0b0e14; color: #e5e7eb; }
.landing-container { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
.landing-promo { border-bottom: 1px solid rgba(148,163,184,.12); background: rgba(11,14,20,.76); backdrop-filter: blur(16px); }
.landing-chip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(148,163,184,.15); background: rgba(15,23,42,.55); color: #cbd5e1; border-radius: 999px; padding: 6px 10px; font-size: 11px; white-space: nowrap; }
.landing-dot { width: 7px; height: 7px; border-radius: 999px; background: #34d399; box-shadow: 0 0 16px rgba(52,211,153,.75); }
.landing-nav { position: sticky; top: 0; z-index: 45; border-bottom: 1px solid rgba(148,163,184,.1); background: rgba(11,14,20,.74); backdrop-filter: blur(18px); }
.landing-brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.landing-logo { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, #34d399, #059669); box-shadow: 0 18px 42px rgba(16,185,129,.2); }
/* min-height keeps these at the WCAG 2.2 AA 2.5.8 target-size minimum
   (24x24 CSS px). They measured 20px tall — the type size is unchanged,
   only the hit area grows, and the parent flex row is already
   items-center so nothing shifts. */
/* ---- Maintenance state -------------------------------------------
   Styled here, in the inline <style>, on purpose. When this screen is
   showing, the Tailwind CDN and the webfont may be exactly what is
   unreachable, so it must not depend on either. Values follow the same
   radius/spacing/colour ramp as ui-theme.css. */
/* Owns its own box-sizing and gutter. Tailwind's preflight supplies
   border-box globally and the wrapper's px-4 supplies the gutter, but
   both come from the CDN — the very thing that may be missing when this
   screen is up. Relying on them overflowed a 390px viewport by 42px. */
#maintenanceScreen { box-sizing: border-box; padding-left: 16px; padding-right: 16px; }
.maintenance-card, .maintenance-card * { box-sizing: border-box; }
.maintenance-card { width: 100%; max-width: 480px; border: 1px solid rgba(148,163,184,.14); border-radius: 14px; background: #0f172a; box-shadow: 0 14px 36px rgba(0,0,0,.28); padding: 28px 24px; }
@media (min-width: 640px) { .maintenance-card { padding: 34px 32px; } }
.maintenance-brand { display: flex; align-items: center; gap: 11px; padding-bottom: 18px; border-bottom: 1px solid rgba(148,163,184,.12); }
.maintenance-mark { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, #34d399, #059669); }
.maintenance-mark svg { width: 20px; height: 20px; }
.maintenance-brand strong { display: block; font-size: 15px; font-weight: 800; color: #f1f5f9; letter-spacing: -.01em; }
.maintenance-brand small { display: block; font-size: 11px; color: #6b7a90; margin-top: 1px; }
.maintenance-eyebrow { margin-top: 22px; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #fcd34d; }
.maintenance-title { margin-top: 8px; font-size: 21px; line-height: 1.25; font-weight: 800; color: #f1f5f9; letter-spacing: -.015em; }
.maintenance-message { margin-top: 10px; font-size: 14px; line-height: 1.6; color: #cbd5e1; }
.maintenance-facts { margin-top: 18px; padding: 14px 16px; border: 1px solid rgba(148,163,184,.12); border-radius: 12px; background: rgba(2,6,23,.32); list-style: none; display: grid; gap: 9px; }
.maintenance-facts li { position: relative; padding-left: 18px; font-size: 12.5px; line-height: 1.55; color: #94a3b8; }
.maintenance-facts li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 999px; background: #34d399; }
.maintenance-actions { margin-top: 20px; display: flex; }
.maintenance-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 11px 18px; border-radius: 12px; font-size: 13px; font-weight: 700; border: 1px solid rgba(148,163,184,.16); background: rgba(15,23,42,.62); color: #d1d5db; cursor: pointer; }
.maintenance-btn-primary { width: 100%; color: #04130d; border-color: rgba(52,211,153,.28); background: #10b981; }
.maintenance-btn-primary:hover { filter: brightness(1.04); }
.maintenance-btn:focus-visible { outline: 2px solid rgba(52,211,153,.75); outline-offset: 3px; }
.maintenance-foot { margin-top: 16px; font-size: 11.5px; line-height: 1.6; color: #6b7a90; }
/* Administrator entry: deliberately the quietest control on the screen.
   This is a maintenance notice first — a staff door, not a call to
   action. Literal values, like the rest of this block, because the
   maintenance screen must render when ui-theme.css is unreachable.
   min-height 44px keeps it thumb-sized on a phone. */
.maintenance-admin { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(148,163,184,.12); display: flex; justify-content: center; }
.maintenance-admin-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 16px; border: 1px solid transparent; border-radius: 12px; background: none; color: #6b7a90; font-size: 12px; font-weight: 600; cursor: pointer; }
.maintenance-admin-btn:hover { color: #cbd5e1; border-color: rgba(148,163,184,.16); background: rgba(15,23,42,.5); }
.maintenance-admin-btn:focus-visible { outline: 2px solid rgba(52,211,153,.75); outline-offset: 3px; }
.maintenance-admin-btn:disabled { opacity: .6; cursor: default; }
.maintenance-admin-panel { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 320px; }
.maintenance-admin-status { font-size: 11.5px; line-height: 1.6; color: #6b7a90; text-align: center; }
.maintenance-admin-status-error { color: #fca5a5; }
.maintenance-admin-status-success { color: #6ee7b7; }

.landing-menu a, .landing-link { color: #94a3b8; font-size: 13px; font-weight: 700; transition: color .15s ease; display: inline-flex; align-items: center; min-height: 24px; }
.landing-menu a:hover, .landing-link:hover { color: #6ee7b7; }
.landing-btn { display:inline-flex; align-items:center; justify-content:center; min-height: 44px; padding: 11px 16px; border-radius: 12px; font-size: 13px; font-weight: 700; border: 1px solid rgba(148,163,184,.16); color: #d1d5db; background: rgba(15,23,42,.62); }
.landing-btn-primary { color: #04130d; border-color: rgba(52,211,153,.28); background: linear-gradient(135deg, #6ee7b7, #10b981); box-shadow: 0 18px 44px rgba(16,185,129,.18); }
.landing-section { padding: 72px 0; }
.landing-hero { padding: 70px 0 56px; }
.landing-gradient-text { background: linear-gradient(135deg, #fff, #a7f3d0 58%, #93c5fd); -webkit-background-clip: text; background-clip: text; color: transparent; }
.landing-card { border: 1px solid var(--ac-hairline, rgba(148,163,184,.09)); background: linear-gradient(180deg, rgba(15,23,42,.74), rgba(15,23,42,.46)); border-radius: 20px; box-shadow: 0 2px 4px rgba(0,0,0,.38), 0 16px 40px rgba(0,0,0,.28); }
.mock-grid { display:grid; grid-template-columns: 1.15fr .85fr; gap: 12px; }
.mock-card { padding: 14px; min-width: 0; }
.mock-bar { height: 8px; border-radius: 999px; background: linear-gradient(90deg, rgba(16,185,129,.9), rgba(59,130,246,.65)); }
.heat-cell { border-radius: 12px; padding: 10px; background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.14); }
.feature-card { padding: 20px; }
.feature-icon { width: 38px; height: 38px; border-radius: 12px; display:grid; place-items:center; background: rgba(16,185,129,.13); color:#6ee7b7; border:1px solid rgba(16,185,129,.18); }
.step-num { width: 32px; height: 32px; border-radius: 12px; display:grid; place-items:center; background:#10b981; color:#03120c; font-weight:800; }
.faq-item { padding: 18px; }
.landing-auth-card { padding: 16px; }
@media (max-width: 900px) { .landing-hero-grid { grid-template-columns: 1fr !important; } .landing-menu { display:none !important; } }
@media (max-width: 640px) { .landing-container { width: min(100% - 24px, 1180px); } .landing-section { padding: 48px 0; } .landing-hero { padding: 42px 0 36px; } .mock-grid { grid-template-columns: 1fr; } .landing-mobile-wrap { flex-wrap: wrap; } .landing-mobile-wrap .landing-btn { width: 100%; } .landing-nav .landing-btn { width: auto; min-height: 38px; padding: 9px 12px; font-size: 12px; border-radius: 8px; } .landing-nav .landing-container { gap: 10px; } .landing-brand { flex: 1 1 auto; min-width: 0; } .landing-logo { width: 36px; height: 36px; border-radius: 12px; flex: 0 0 auto; } }

/* ===================================================================
   PREMIUM UI ELEVATION — cohesive design system + accessibility.
   Appended intentionally last so these refinements win by cascade
   order. Presentation-only: no DOM ids, hooks, script, API contract,
   or behavior is changed here. Element-level rules deliberately sit at
   lower specificity than the existing Tailwind utility classes, so
   existing per-element styling continues to win where it is set.
   =================================================================== */
/* Tokens are NOT declared here.
   This block used to carry its own :root, declaring the same --ac-*
   names as ui-theme.css with different values. Custom properties do not
   resolve by source order — the winning declaration applies everywhere,
   including to var() uses written earlier — so the later sheet silently
   replaced every value set here. --ac-space-1 was 4px where it was
   written and 6px where it was read; --ac-focus was a colour here and a
   box-shadow list there, which made `outline: 2px solid var(--ac-focus)`
   below an invalid declaration that the browser dropped entirely. The
   focus outline this sheet thought it was setting had not existed for
   some time.

   ui-theme.css now owns every token. The handful of var() uses left in
   this sheet each carry a literal fallback, so the maintenance, blocked
   and startup screens still render correctly if that file never
   arrives — which is the same failure this sheet's .hidden safety net
   above exists to survive. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    font-family: var(--ac-font-sans, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    letter-spacing: -0.005em;
}
::selection { background: rgba(52,211,153,0.30); color: #ffffff; }
/* Guard against horizontal overflow from wide media / tables on any screen */
img, svg, video, canvas, table { max-width: 100%; }

/* Heading rhythm — element-level (Tailwind leading-*/tracking-* still win) */
h1 { letter-spacing: -0.02em; line-height: 1.12; }
h2 { letter-spacing: -0.015em; line-height: 1.2; }
h3 { letter-spacing: -0.01em; }
/* Tabular figures for prices / counters / clocks where the class is used */
.tabular-nums, .font-mono { font-variant-numeric: tabular-nums; }

/* ---- Unified, always-visible keyboard focus (WCAG 2.4.7 / 2.4.11 AA) ---- */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--ac-focus-color, #34d399);
    outline-offset: 2px;
    border-radius: 6px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline-offset: 1px;
    box-shadow: var(--ac-focus-ring, 0 0 0 3px rgba(52,211,153,0.35));
}

/* ---- Skip link (keyboard users jump straight to the visible content) ---- */
.skip-link {
    position: fixed; top: 8px; left: 8px; z-index: 100000;
    transform: translateY(-180%);
    padding: 10px 14px; border-radius: 10px;
    background: var(--ac-brand-strong, #34d399); color: var(--ac-brand-ink, #04130d);
    font-size: 13px; font-weight: 800; text-decoration: none;
    box-shadow: var(--ac-shadow-md, 0 12px 30px rgba(0,0,0,0.22));
    transition: transform 0.18s ease;
}
.skip-link:focus { transform: translateY(0); outline: none; }

/* ---- Robust visually-hidden helper (in addition to Tailwind sr-only) ---- */
.ac-sr-only {
    position: absolute !important; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---- Refined form fields (premium, higher-contrast idle border) ---- */
input::placeholder, textarea::placeholder { color: #64748b; }
input:focus, select:focus, textarea:focus { border-color: rgba(52,211,153,0.55) !important; }

/* ---- Refined tables ---- */
tbody tr { transition: background-color 0.12s ease; }

.landing-btn-primary:hover { filter: brightness(1.03); }

/* ---- Modal surface entrance (respects reduced-motion below) ---- */
@keyframes acModalIn { from { opacity: 0; transform: translateY(8px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
[role="dialog"]:not(.hidden) > div { animation: acModalIn 0.18s cubic-bezier(0.2,0.7,0.2,1); }

/* ---- Comfortable touch targets on small screens ---- */
@media (max-width: 640px) {
    .app-header button, .nav-btn, .header-account button { min-height: 40px; }
    [role="dialog"] button:not(.absolute) { min-height: 44px; }
}

/* ---- Honor reduced-motion across the whole app (WCAG 2.3.3) ---- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    [role="dialog"]:not(.hidden) > div { animation: none !important; }
    button:active:not(:disabled) { transform: none !important; }
}