/* ============================================================
   Neo Cyber Amber - Complete Visual Design System Override
   Glassmorphism + Neon Orange + Dark Sci-Fi Aesthetic
   All rules use !important to override inline styles
   ============================================================ */

/* === ROOT VARIABLES === */
:root {
    --na-bg: #0D1117;
    --na-bg-alt: #161B22;
    --na-bg-card: rgba(22, 27, 34, 0.85);
    --na-bg-glass: rgba(22, 27, 34, 0.6);
    --na-border: rgba(255, 107, 53, 0.15);
    --na-border-hover: rgba(255, 107, 53, 0.4);
    --na-accent: #FF6B35;
    --na-accent-light: #FF8555;
    --na-accent-glow: rgba(255, 107, 53, 0.4);
    --na-text: #F0F0F0;
    --na-text-dim: #8B949E;
    --na-text-muted: #6E7681;
    --na-green: #3FB950;
    --na-red: #F85149;
    --na-radius: 16px;
    --na-radius-sm: 10px;
    --na-radius-pill: 999px;
}

/* === BODY & APP BACKGROUND === */
body {
    background-color: #0D1117 !important;
    background-image:
        radial-gradient(ellipse 600px 400px at 50% 0%, rgba(255, 107, 53, 0.08), transparent),
        radial-gradient(ellipse 400px 300px at 0% 50%, rgba(255, 140, 0, 0.04), transparent),
        radial-gradient(ellipse 400px 300px at 100% 80%, rgba(255, 80, 0, 0.03), transparent) !important;
    background-attachment: fixed !important;
    color: #F0F0F0 !important;
    font-family: -apple-system, 'PingFang SC', 'Noto Sans SC', 'Segoe UI', sans-serif !important;
    -webkit-font-smoothing: antialiased !important;
}

#app {
    background: transparent !important;
    min-height: 100vh !important;
    position: relative !important;
}

#app::before {
    content: '' !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background:
        radial-gradient(circle at 20% 10%, rgba(255, 107, 53, 0.06), transparent 40%),
        radial-gradient(circle at 80% 90%, rgba(255, 140, 0, 0.04), transparent 40%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* === APP CONTAINER === */
.app {
    max-width: 414px !important;
    margin: 0 auto !important;
    min-height: 100vh !important;
    position: relative !important;
    z-index: 1 !important;
}

/* === OVERRIDE ALL INLINE BACKGROUNDS === */
/* White/light backgrounds → dark glass */
[style*="background: #FFFFFF"],
[style*="background:#FFFFFF"],
[style*="background: white"],
[style*="background:white"],
[style*="background: #fff"],
[style*="background:#fff"],
[style*="background: #FFF"],
[style*="background:#FFF"] {
    background: rgba(22, 27, 34, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

[style*="background: #F0F2F5"],
[style*="background:#F0F2F5"],
[style*="background: #f0f2f5"],
[style*="background:#f0f2f5"] {
    background: transparent !important;
}

[style*="background: #F8FAFC"],
[style*="background:#F8FAFC"],
[style*="background: #f8fafc"] {
    background: rgba(13, 17, 23, 0.8) !important;
}

[style*="background: #F1F5F9"],
[style*="background:#F1F5F9"] {
    background: rgba(33, 38, 45, 0.8) !important;
}

/* Light tint backgrounds → dark glass with orange tint */
[style*="background: #EEF2FF"],
[style*="background:#EEF2FF"],
[style*="background: #EFF6FF"],
[style*="background:#EFF6FF"],
[style*="background: #F5F3FF"],
[style*="background:#F5F3FF"] {
    background: rgba(255, 107, 53, 0.08) !important;
}

[style*="background: #FFF7ED"],
[style*="background:#FFF7ED"] {
    background: rgba(255, 107, 53, 0.1) !important;
}

[style*="background: #FEF2F2"],
[style*="background:#FEF2F2"],
[style*="background: #FEE2E2"],
[style*="background:#FEE2E2"],
[style*="background: #FDEDEC"],
[style*="background:#FDEDEC"] {
    background: rgba(248, 81, 73, 0.1) !important;
}

[style*="background: #ECFDF5"],
[style*="background:#ECFDF5"],
[style*="background: #FEFCE8"],
[style*="background:#FEFCE8"] {
    background: rgba(63, 185, 80, 0.1) !important;
}

/* === OVERRIDE INLINE TEXT COLORS === */
[style*="color: #1E293B"],
[style*="color:#1E293B"],
[style*="color: #1e293b"],
[style*="color:#1e293b"] {
    color: #F0F0F0 !important;
}

[style*="color: #475569"],
[style*="color:#475569"],
[style*="color: #334155"],
[style*="color:#334155"] {
    color: #8B949E !important;
}

[style*="color: #94A3B8"],
[style*="color:#94A3B8"],
[style*="color: #64748B"],
[style*="color:#64748B"] {
    color: #6E7681 !important;
}

[style*="color: #CBD5E1"],
[style*="color:#CBD5E1"] {
    color: #484F58 !important;
}

[style*="color: #FFFFFF"],
[style*="color:#FFFFFF"],
[style*="color: white"],
[style*="color:white"],
[style*="color: #fff"],
[style*="color:#fff"] {
    color: #FFFFFF !important;
}

/* === OVERRIDE INLINE BORDER COLORS === */
[style*="border-color: #E2E8F0"],
[style*="border: 1px solid #E2E8F0"],
[style*="border:1px solid #E2E8F0"],
[style*="border-bottom: 1px solid #E2E8F0"],
[style*="border-top: 1px solid #E2E8F0"] {
    border-color: rgba(255, 107, 53, 0.15) !important;
}

[style*="border: 1px solid #F1F5F9"],
[style*="border:1px solid #F1F5F9"] {
    border-color: rgba(48, 54, 61, 0.8) !important;
}

/* === HEADER / TOP BAR === */
.app > div > div:first-child,
.app > div > [style*="position: fixed"],
.app > div > [style*="position: sticky"],
.app > div > [style*="position: sticky"] {
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}

/* Top header bars - any fixed/sticky div at top */
[style*="position: fixed;"][style*="top: 0"],
[style*="position: sticky; top: 0"],
[style*="position: sticky;top: 0"] {
    background: rgba(13, 17, 23, 0.85) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-bottom: 1px solid rgba(255, 107, 53, 0.15) !important;
}

/* === CARDS & CONTAINERS === */
/* Target common card patterns */
[style*="border-radius: 12px"],
[style*="border-radius:12px"],
[style*="border-radius: 8px"],
[style*="border-radius:8px"],
[style*="border-radius: 16px"],
[style*="border-radius:16px"] {
    border-radius: 16px !important;
}

/* === BUTTONS === */
button,
[style*="cursor: pointer"],
[role="button"] {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Primary buttons - orange gradient */
[style*="background: #FF6B35"],
[style*="background:#FF6B35"],
[style*="background: #FF8555"],
[style*="background:#FF8555"],
[style*="background: linear-gradient"][style*="#FF6B35"],
[style*="background: linear-gradient"][style*="#FF8555"],
button[style*="background: #FF"],
button[style*="background:#FF"] {
    background: linear-gradient(135deg, #FF6B35, #FF8C42) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(255, 107, 53, 0.4), 0 0 0 1px rgba(255, 107, 53, 0.3) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

[style*="background: #FF6B35"]:active,
[style*="background:#FF6B35"]:active,
[style*="background: #FF8555"]:active,
[style*="background:#FF8555"]:active,
button[style*="background: #FF"]:active,
button[style*="background:#FF"]:active {
    transform: scale(0.96) !important;
    box-shadow: 0 2px 10px rgba(255, 107, 53, 0.3) !important;
}

/* Secondary/outline buttons */
[style*="border: 1px solid #FF6B35"],
[style*="border:1px solid #FF6B35"],
[style*="border: 1px solid #FF8555"],
[style*="border:1px solid #FF8555"] {
    background: rgba(255, 107, 53, 0.1) !important;
    color: #FF8555 !important;
    border: 1px solid rgba(255, 107, 53, 0.4) !important;
    border-radius: 12px !important;
}

/* === INPUTS === */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="search"],
textarea,
select {
    background: rgba(13, 17, 23, 0.8) !important;
    border: 1px solid rgba(48, 54, 61, 0.8) !important;
    border-radius: 12px !important;
    color: #F0F0F0 !important;
    padding: 12px 16px !important;
    transition: all 0.25s ease !important;
    outline: none !important;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
    border-color: rgba(255, 107, 53, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.15) !important;
    background: rgba(13, 17, 23, 0.95) !important;
}

input::placeholder,
textarea::placeholder {
    color: #6E7681 !important;
}

/* === MODALS === */
.modal,
[style*="position: fixed"][style*="inset: 0"],
[style*="position:fixed"][style*="inset:0"] {
    background: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

.modal-content,
.modal > div,
[style*="position: fixed"][style*="inset: 0"] > div {
    background: rgba(22, 27, 34, 0.95) !important;
    backdrop-filter: blur(30px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
    border: 1px solid rgba(255, 107, 53, 0.2) !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 107, 53, 0.1) !important;
}

/* === BOTTOM NAVIGATION === */
[style*="position: fixed;"][style*="bottom: 0"],
[style*="position:fixed"][style*="bottom:0"] {
    background: rgba(13, 17, 23, 0.9) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-top: 1px solid rgba(255, 107, 53, 0.15) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3) !important;
}

/* === AVATARS === */
[style*="border-radius: 50%"],
[style*="border-radius:50%"] {
    border: 2px solid rgba(255, 107, 53, 0.3) !important;
    box-shadow: 0 0 12px rgba(255, 107, 53, 0.15) !important;
}

/* === TAGS & BADGES === */
[style*="background: #FEF2F2"],
[style*="background:#FEF2F2"],
[style*="background: rgba(248"],
[style*="background:rgba(248"] {
    border-radius: 6px !important;
}

[style*="background: #EEF2FF"],
[style*="background:#EEF2FF"],
[style*="background: rgba(255, 107, 53, 0.1)"],
[style*="background:rgba(255, 107, 53, 0.1)"] {
    border-radius: 6px !important;
    border: 1px solid rgba(255, 107, 53, 0.2) !important;
}

/* === LINKS === */
a {
    color: #FF8555 !important;
    transition: color 0.2s ease !important;
}

a:hover {
    color: #FF6B35 !important;
}

/* === SCROLLBAR === */
::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
}

::-webkit-scrollbar-track {
    background: rgba(13, 17, 23, 0.5) !important;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 107, 53, 0.3) !important;
    border-radius: 3px !important;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 107, 53, 0.5) !important;
}

/* === DIVIDERS === */
[style*="border-bottom: 1px solid #30363D"],
[style*="border-bottom: 1px solid rgba(255, 107, 53, 0.15)"] {
    border-bottom-color: rgba(48, 54, 61, 0.6) !important;
}

[style*="border-top: 1px solid #30363D"],
[style*="border-top: 1px solid rgba(255, 107, 53, 0.15)"] {
    border-top-color: rgba(48, 54, 61, 0.6) !important;
}

/* === GRADIENT BACKGROUNDS === */
[style*="background: linear-gradient"][style*="#010409"],
[style*="background:linear-gradient"][style*="#010409"],
[style*="background: linear-gradient"][style*="#21262D"],
[style*="background:linear-gradient"][style*="#21262D"] {
    background: linear-gradient(135deg, rgba(13, 17, 23, 0.95), rgba(22, 27, 34, 0.95)) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

[style*="background: linear-gradient"][style*="#FF6B35"],
[style*="background:linear-gradient"][style*="#FF6B35"],
[style*="background: linear-gradient"][style*="#FF8555"],
[style*="background:linear-gradient"][style*="#FF8555"] {
    background: linear-gradient(135deg, #FF6B35, #FF8C42) !important;
    box-shadow: 0 4px 20px rgba(255, 107, 53, 0.3) !important;
}

/* === SHADOWS === */
[style*="box-shadow:"][style*="rgba(0,0,0,0.3)"],
[style*="box-shadow:"][style*="rgba(0, 0, 0, 0.3)"] {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 107, 53, 0.08) !important;
}

[style*="box-shadow:"][style*="rgba(255,107,53,0.15)"],
[style*="box-shadow:"][style*="rgba(255, 107, 53, 0.15)"] {
    box-shadow: 0 4px 24px rgba(255, 107, 53, 0.15) !important;
}

/* === LOADING SPINNER === */
@keyframes na-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

[style*="animation"][style*="spin"],
[class*="spinner"],
[class*="loading"] {
    border-color: rgba(255, 107, 53, 0.2) !important;
    border-top-color: #FF6B35 !important;
}

/* === TEXT SELECTION === */
::selection {
    background: rgba(255, 107, 53, 0.3) !important;
    color: #FFFFFF !important;
}

/* === REMOVE OLD WHITE EDGES === */
* {
    -webkit-tap-highlight-color: transparent !important;
}

/* === TRANSITIONS FOR SMOOTHNESS === */
.app * {
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* === GREEN/RED SEMANTIC COLORS === */
[style*="color: #3FB950"],
[style*="color:#3FB950"],
[style*="color: #059669"],
[style*="color:#059669"],
[style*="color: #07C160"],
[style*="color:#07C160"] {
    color: #3FB950 !important;
}

[style*="color: #F85149"],
[style*="color:#F85149"],
[style*="color: #DC2626"],
[style*="color:#DC2626"] {
    color: #F85149 !important;
}

/* === FIX: Ensure dark background everywhere === */
div[style*="background: #161B22"],
div[style*="background:#161B22"] {
    background: rgba(22, 27, 34, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 107, 53, 0.08) !important;
}

/* === LARGE HEADER TEXT === */
h1, h2, h3 {
    color: #F0F0F0 !important;
    letter-spacing: -0.02em !important;
}

/* === ENSURE VISIBILITY === */
[style*="opacity: 0.8"] {
    opacity: 0.9 !important;
}

/* === PILL SHAPED ELEMENTS === */
[style*="border-radius: 999px"],
[style*="border-radius:999px"],
[style*="border-radius: 20px"],
[style*="border-radius:20px"] {
    border-radius: 999px !important;
}