html { scroll-behavior: smooth; }
        body { font-family: 'Inter', sans-serif; overflow-x: hidden; width: 100%; }
        .view-section { display: none; }
        .view-section.active { display: block; animation: fadeIn 0.4s ease-out; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        
        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
        .dark ::-webkit-scrollbar-thumb { background: #475569; }
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

        .glass-nav { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(12px); }
        .dark .glass-nav { background: rgba(15, 23, 42, 0.8); }
        
        /* Rich Text Fix */
        #editContent[contenteditable=true]:empty:before { content: attr(data-placeholder); color: #94a3b8; display: block; pointer-events: none; }
        .dark #editContent[contenteditable=true]:empty:before { color: #64748b; }
        #detailContent font, #editContent font { font-family: inherit; font-size: inherit; }

        .ranking-number { -webkit-text-stroke: 2px rgba(99, 102, 241, 0.1); color: transparent; }
        .dark .ranking-number { -webkit-text-stroke: 2px rgba(99, 102, 241, 0.2); }

        .diff-added { background-color: #bbf7d0; color: #166534; padding: 0 4px; border-radius: 4px; }
        .dark .diff-added { background-color: #14532d; color: #4ade80; }
        .diff-removed { background-color: #fecaca; color: #991b1b; text-decoration: line-through; padding: 0 4px; border-radius: 4px; }
        .dark .diff-removed { background-color: #7f1d1d; color: #f87171; }
        
        .chat-bubble-me { background: #4f46e5; color: white; border-bottom-right-radius: 4px; }
        .chat-bubble-other { background: #f1f5f9; color: #1e293b; border-bottom-left-radius: 4px; }
        .dark .chat-bubble-other { background: #1e293b; color: #f8fafc; }
        
        /* Heading Renders & Smooth Scroll for TOC */
        #detailContent ul { list-style-type: disc; margin-left: 1.5rem; margin-bottom: 1rem; }
        #detailContent ol { list-style-type: decimal; margin-left: 1.5rem; margin-bottom: 1rem; }
        #detailContent h1 { font-size: 2.25rem; font-weight: 800; margin-top: 2rem; margin-bottom: 1rem; }
        #detailContent h2 { font-size: 1.875rem; font-weight: 700; margin-top: 1.5rem; margin-bottom: 0.75rem; }
        #detailContent h3 { font-size: 1.5rem; font-weight: 600; margin-top: 1.25rem; margin-bottom: 0.5rem; }
        .toc-heading { scroll-margin-top: 90px; }

        /* Toolbar Editor */
        .editor-btn { width: 36px; height: 36px; display: flex; justify-content: center; align-items: center; border-radius: 8px; transition: all 0.2s; color: #475569; flex-shrink: 0; }
        .editor-btn:hover { background-color: #e2e8f0; color: #4f46e5; }
        .dark .editor-btn { color: #cbd5e1; }
        .dark .editor-btn:hover { background-color: #334155; color: #818cf8; }
        .editor-select { height: 36px; padding: 0 8px; border-radius: 8px; background-color: transparent; border: 1px solid #cbd5e1; font-size: 0.875rem; color: #475569; outline: none; cursor: pointer; transition: all 0.2s; flex-shrink: 0; max-width: 120px; }
        .editor-select:hover, .editor-select:focus { border-color: #4f46e5; box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1); }
        .dark .editor-select { border-color: #475569; color: #cbd5e1; }
        .dark .editor-select:hover, .dark .editor-select:focus { border-color: #818cf8; background-color: #1e293b; }
        .dark .editor-select option { background-color: #0f172a; color: #f8fafc; }

        /* Avatar Frames */
        .avatar-container { position: relative; display: flex; align-items: center; justify-content: center; font-weight: bold; flex-shrink: 0; }
        .avatar-inner { border-radius: 50%; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
        
        .frame-default .avatar-inner { background-color: #e0e7ff; color: #4f46e5; border: 2px solid white; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        .dark .frame-default .avatar-inner { background-color: #312e81; color: #818cf8; border-color: #0f172a; }

        .frame-gold .avatar-inner { background-color: #fef3c7; color: #d97706; border: 3px solid #fbbf24; box-shadow: 0 0 12px rgba(251, 191, 36, 0.6); }
        .dark .frame-gold .avatar-inner { background-color: #451a03; color: #fcd34d; border-color: #f59e0b; }

        .frame-neon .avatar-inner { background-color: #ecfeff; color: #0891b2; border: 3px solid #22d3ee; box-shadow: 0 0 15px rgba(34, 211, 238, 0.8), inset 0 0 5px rgba(34, 211, 238, 0.5); }
        .dark .frame-neon .avatar-inner { background-color: #164e63; color: #67e8f9; }

        .frame-hacker .avatar-inner { background-color: #ecfdf5; color: #059669; border: 3px dashed #10b981; }
        .dark .frame-hacker .avatar-inner { background-color: #064e3b; color: #6ee7b7; border-color: #34d399; }

        .frame-champion { background: linear-gradient(45deg, #FFD700, #FF8C00, #FF0080, #8A2BE2); padding: 3px; border-radius: 50%; box-shadow: 0 0 20px rgba(255, 0, 128, 0.5); animation: hue-rotate 3s linear infinite; }
        .frame-champion .avatar-inner { background-color: white; color: #1e293b; }
        .dark .frame-champion .avatar-inner { background-color: #0f172a; color: white; }
        @keyframes hue-rotate { to { filter: hue-rotate(360deg); } }

        .streak-fire { text-shadow: 0 0 10px rgba(239, 68, 68, 0.8); }
         @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animate-fadeIn {
            animation: fadeIn 0.4s ease-out forwards;
        }