/* Фиолетовый градиент для заголовка */
        .main-title {
            background: linear-gradient(90deg, #5865F2, #eb459e );
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-size: 32px;
            margin: 0;
        }

        /* Переливающийся нежно-синий текст подписи с эффектом бега слева направо */
        .credits {
            font-size: 16px;
            margin-top: 5px;
            margin-bottom: 25px;
            font-weight: 500;
            
            background: linear-gradient(
                90deg, 
                #0080ff 0%, 
                #9568ff 50%, 
                #0080ff 100%
            );
            background-size: 50% auto;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: flowText 4s linear infinite;
        }

        .credits .heart {
        background: none !important;
        -webkit-text-fill-color: initial !important;
        color: initial !important;
        animation: none !important;
        font-size: 1.1em; 
}

        @keyframes flowText {
            0% { background-position: 0% center; }
            100% { background-position: 200% center; }
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: scale(0.9); }
            to { opacity: 1; transform: scale(1); }
        }

        .disclamer {
            font-size: 12px;
            color: var(--text-muted);
            background: rgba(88, 101, 242, 0.05); /* Легкий оттенок акцентного цвета */
            padding: 8px 15px;
            border-radius: 15px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 20px;
            border: 1px solid rgba(88, 101, 242, 0.1);
            opacity: 0.9;
        }

        .disclamer::before {
            content: "🛡️"; /* Иконка щита */
            font-size: 12px;
        }

        
        .btn-group {
            display: flex;
            flex-direction: row;
            gap: 20px;
            justify-content: center;
            width: 100%;
            margin-top: 10px;
        }

        .action-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 15px 25px;
            width: 280px;
            height: auto;
            min-height: 80px;
            background: var(--accent); color: white; border: none;
            border-radius: 8px; font-weight: bold; cursor: pointer; transition: 0.2s;
            font-size: 13px;
        }

        .btn-desc {
            display: block;
            font-size: 12px;
            font-weight: 400;
            opacity: 0.7;
            margin-top: 6px;
            line-height: 1.2;
            white-space: normal;
        }
        
        :root {
            --bg: #313338; --card: #2B2D31; --accent: #5865F2; --text: #F2F3F5; --text-muted: #B5BAC1; --border: #1E1F22; --hover: #35373c;
        }
        [data-theme="amoled"] { --bg: #000000; --card: #090909; --accent: #ffffff; --text: #ffffff; --border: #1a1a1a; --hover: #111; }
        [data-theme="amoled"] .action-btn { color: #000000 !important; }
        [data-theme="midnight"] { --bg: #111214; --card: #1a1b1e; --accent: #00aff4; --border: #2e3035; --hover: #25272b; }
        [data-theme="emerald"] { --bg: #0a1a12; --card: #11261d; --accent: #23a559; --border: #0d2018; --hover: #183529; }
        [data-theme="ruby"] { --bg: #1a0a0a; --card: #261111; --accent: #f04747; --border: #200d0d; --hover: #351818; }
        [data-theme="amethyst"] { --bg: #120a1a; --card: #1b1126; --accent: #9b59b6; --border: #140d20; --hover: #261835; }

        * { box-sizing: border-box; font-family: 'gg sans', 'Segoe UI', Tahoma, sans-serif; }
        body { background-color: var(--bg); color: var(--text); margin: 0; padding: 15px; overflow: hidden; position: relative; }

        .drop-zone {
            position: relative;
            border: 2px dashed var(--accent);
            padding: 40px;
            border-radius: 20px;
            text-align: center;
            transition: 0.3s;
            background: var(--card);
        }

        .welcome-mascot-container {
            position: absolute;
            top: 0; 
            left: 50%;
            transform: translate(-50%, calc(-87% + 10px)); 
            width: auto;
            display: flex;
            justify-content: center;
            z-index: 10;
            pointer-events: none;
        }

        .welcome-mascot-container img {
            width: 250px;
            height: auto;
            filter: drop-shadow(0 5px 15px rgba(0,0,0,0.4));
            animation: mascotBreath 4s ease-in-out infinite;
            transform-origin: bottom center;
        }

        @keyframes mascotBreath {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.02) translateY(-3px); }
        }

        #mascot-anchor {
            position: fixed;
            right: 0;
            bottom: 200px;
            width: 180px;
            height: 300px; 
            z-index: 999;
            pointer-events: auto;
        }

        #mascot {
            height: 100%;
            width: auto;
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
            filter: drop-shadow(-5px 5px 10px rgba(0,0,0,0.5));
            opacity: 0.9;
            transform: translateX(40px); 
        }

        #mascot-anchor:hover #mascot {
            transform: translateX(300px);
            opacity: 0;
        }

        .events-block:hover ~ #mascot-anchor #mascot,
        .activity-block:hover ~ #mascot-anchor #mascot {
            transform: translateX(100px) rotate(-1deg);
        }

        .themes { position: fixed; top: 15px; right: 15px; display: flex; gap: 6px; z-index: 1000; background: var(--card); padding: 8px; border-radius: 20px; border: 1px solid var(--border); }
        .t-dot { width: 16px; height: 16px; border-radius: 50%; cursor: pointer; border: 1px solid rgba(255,255,255,0.2); transition: 0.2s; }
        .t-dot:hover { transform: scale(1.2); }
        .t-dot.active { border: 2px solid var(--accent); transform: scale(1.1); }

        .main-grid {
            display: grid;
            grid-template-columns: 350px 1fr;
            grid-template-rows: auto 1fr;
            gap: 15px;
            height: calc(100vh - 30px);
            position: relative;
            z-index: 1;
        }

        .card { background: var(--card); border-radius: 12px; padding: 15px; border: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; }
        
        .user-block { grid-column: 1; grid-row: 1; }
        .chats-block { grid-column: 1; grid-row: 2; overflow-y: auto; }
        .events-block { grid-column: 2; grid-row: 1; max-height: 280px; } 
        .activity-block { grid-column: 2; grid-row: 2; }

        .section-title { font-size: 11px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }

        .stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; margin-bottom: 15px; }
        .stat-box { background: rgba(0,0,0,0.15); padding: 10px; border-radius: 8px; border: 1px solid var(--border); }
        .stat-label { font-size: 10px; color: var(--text-muted); margin-bottom: 2px; }
        .stat-val { font-size: 16px; font-weight: 700; color: var(--accent); }

        .action-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
        .btn-secondary { background: var(--hover); color: var(--text); border: 1px solid var(--border); }
        .btn-secondary:hover { background: rgba(255,255,255,0.1); }
        
        .save-btn { width: 100%; margin-top: auto; flex-direction: row; min-height: unset; padding: 10px; } 

        .chat-list { display: flex; flex-direction: column; gap: 4px; }
        .chat-item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 6px; transition: 0.2s; cursor: default; }
        .chat-item:hover { background: var(--hover); }
        .chat-rank { font-size: 11px; font-weight: 800; color: var(--text-muted); width: 18px; }
        
        .chat-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: bold; flex-shrink: 0; overflow: hidden; }
        
        .chat-info { flex-grow: 1; min-width: 0; }
        .chat-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .chat-meta { font-size: 10px; color: var(--text-muted); }

        .event-grid { 
            display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); 
            gap: 10px; overflow-y: auto; padding-right: 5px; flex-grow: 1; align-content: start;
        }
        .event-card { background: rgba(255,255,255,0.03); border: 1px solid var(--border); padding: 12px; border-radius: 8px; display: flex; flex-direction: column; gap: 4px; position: relative; overflow: hidden; }
        .event-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); opacity: 0.5; }
        .event-card-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; font-weight: bold; }
        .event-card-val { font-size: 18px; font-weight: 800; color: var(--text); }
        .event-card-icon { position: absolute; right: 10px; top: 10px; opacity: 0.8; font-size: 20px; }

        .overlay { position: fixed; inset: 0; background: var(--bg); z-index: 2000; display: flex; align-items: center; justify-content: center; flex-direction: column; }
        .drop-zone:hover { border-color: rgba(88,101,242,0.8); box-shadow: 0 0 20px rgba(0,0,0,0.2); }
        
        .progress-container { width: 320px; margin-top: 20px; background: var(--card); padding: 20px; border-radius: 12px; border: 1px solid var(--border); box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
        .progress-bg { height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; margin-top: 10px; }
        .progress-bar { height: 100%; width: 0%; background: var(--accent); transition: width 0.3s ease; box-shadow: 0 0 10px var(--accent); }

        .hidden { display: none !important; }
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }