html { overflow-x: hidden; }
    body { background-color: transparent; color: white; font-family: 'Inter', sans-serif; }
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.06); border-radius: 10px; }
    ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.12); }
    .msg-ai {
        background: rgba(255,255,255,0.025);
        backdrop-filter: blur(20px);
        border: 1px solid rgba(255,255,255,0.07);
        border-radius: 0 16px 16px 16px;
        padding: 14px 16px;
        color: #d1d5db;
        line-height: 1.65;
        white-space: normal;
        word-break: break-word;
    }
    .msg-user {
        background: linear-gradient(135deg, #2563eb, #1d4ed8);
        border: 1px solid rgba(59, 130, 246, 0.4);
        border-radius: 16px 16px 0 16px;
    }
    .active-chat {
        background: rgba(59, 130, 246, 0.08);
        border: 1px solid rgba(59, 130, 246, 0.2);
        color: white;
    }
    .glass {
        background: rgba(255,255,255,0.018);
        backdrop-filter: blur(20px);
        border: 1px solid rgba(255,255,255,0.065);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
        contain: layout style;
    }
    @keyframes border-rotate { to { transform: rotate(360deg); } }
    .cta-wrap {
        position: relative;
        display: inline-flex;
        border-radius: 18px;
        padding: 1px;
        overflow: hidden;
    }
    .cta-wrap::before {
        content: '';
        position: absolute;
        inset: -80%;
        background: conic-gradient(
            from 0deg,
            transparent 0deg,
            rgba(59,130,246,0.75) 50deg,
            rgba(139,92,246,0.5) 100deg,
            rgba(59,130,246,0.3) 150deg,
            transparent 200deg
        );
        animation: border-rotate 4s linear infinite;
    }
    .cta-btn {
        position: relative;
        background: #07070f;
        border-radius: 17px;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 14px 36px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: white;
        transition: background 0.3s ease, transform 0.2s ease;
        white-space: nowrap;
        cursor: pointer;
        z-index: 1;
        overflow: hidden;
    }
    .cta-btn::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(59,130,246,0.08) 0%, transparent 60%);
        border-radius: inherit;
        pointer-events: none;
    }
    .cta-wrap:hover .cta-btn { background: #0b0b18; transform: scale(1.01); }
    .cta-wrap:active .cta-btn { transform: scale(0.985); }
    .radar-scan-line {
        width: 100%; height: 2px;
        background: linear-gradient(90deg, transparent, #3b82f6, transparent);
        position: absolute; left: 0;
        animation: scan 2s infinite linear;
        box-shadow: 0 0 10px #3b82f6;
        opacity: 0;
    }
    .scanning .radar-scan-line { opacity: 1; }
    @keyframes scan { 0% { top: 0; } 100% { top: 100%; } }
    .tab-active { border-bottom: 2px solid #3b82f6; color: #3b82f6; }
    .chart-period-btn {
        font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
        color: rgba(107,114,128,0.55); background: transparent;
        border: 1px solid transparent; border-radius: 8px; padding: 5px 0; transition: all 0.15s;
    }
    .chart-period-btn:hover { color: rgba(156,163,175,0.9); }
    .chart-period-active {
        color: white !important; background: rgba(255,255,255,0.06) !important;
        border-color: rgba(255,255,255,0.08) !important;
    }
    @media (max-width: 640px) {
        #chat-box { padding-left: 0.75rem; padding-right: 0.75rem; }
        .msg-ai, .msg-user { font-size: 0.85rem; }
        #tab-chat, #tab-radar { font-size: 0.8rem; letter-spacing: 0.15em; }
        #scanner-container { padding: 0.875rem; border-radius: 20px; }
        #view-radar { padding: 0.75rem; }
        #view-radar > * + * { margin-top: 0.625rem !important; }
        #history-list { max-height: 100%; }
    }
    @media (max-width: 767px) {
        .radar-inline-card {
            background: transparent;
            border: none;
            border-top: 1px solid rgba(255,255,255,0.055);
            border-bottom: 1px solid rgba(255,255,255,0.055);
            border-radius: 0;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            box-shadow: none;
            margin-left: -0.75rem;
            margin-right: -0.75rem;
            padding-left: 1rem;
            padding-right: 1rem;
            contain: layout style paint;
        }
    }
    @media (max-width: 767px) {
        input[type="text"],
        input[type="number"],
        input[type="search"],
        select,
        textarea {
            font-size: 16px !important;
        }
    }