/**
 * The Biz Market - Frontend Styles
 * Converted from Firebase standalone HTML to WordPress plugin
 * Version: 1.0.0
 */
        :root {
            --ink: #1a1a1a;
            --paper: #faf8f5;
            --paper-dark: #f0ebe3;
            --accent: #c41e3a;
            --accent-light: #e8d5d9;
            --gold: #E0BC5A;
            --shadow: rgba(26, 26, 26, 0.08);
            --border: #d4c5b9;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Assistant', sans-serif;
        }

        body {
            background: white;
            color: var(--ink);
            min-height: 100vh;
            line-height: 1.7;
        }

        /* Header */
        .masthead {
            background: linear-gradient(180deg, #0d0d0d 0%, #1a1a1a 100%);
            color: var(--paper);
            position: sticky;
            top: 0;
            z-index: 100;
            border-bottom: 1px solid var(--accent);
        }

        .masthead-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.25rem 2rem;
            border-bottom: 1px solid rgba(255,255,255,0.08);
            background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, transparent 100%);
        }

        .date-display {
            font-size: 0.8rem;
            color: rgba(255,255,255,0.7);
            font-weight: 500;
            letter-spacing: 0.5px;
        }

        .logo-container {
            cursor: pointer;
            text-align: center;
        }

        .logo {
           font-family: 'Assistant', Arial, sans-serif !important;
            font-size: 2.4rem;
            font-weight: 600;
            letter-spacing: 2px;
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }

        .tagline {
            font-size: 0.95rem;
            text-transform: uppercase;
            letter-spacing: 4px;
            color: rgba(255,255,255,0.8);
            opacity: 1;
            margin-top: -0.4rem;
            font-weight: 400;
        }

        .user-actions {
            display: flex;
            gap: 1rem;
            align-items: center;
        }

        .btn {
            padding: 0.6rem 1.5rem;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-weight: 600;
            font-size: 0.9rem;
            transition: all 0.2s;
        }

        .btn-primary {
            background: var(--accent);
            color: white;
        }

        .btn-primary:hover {
            background: #a01830;
        }

        .btn-ghost {
            background: transparent;
            color: var(--paper);
            border: 1px solid rgba(255,255,255,0.3);
            display: flex;
            align-items: center;
        }

        .btn-ghost:hover {
            background: rgba(255,255,255,0.1);
        }

        .btn-logout {
            background: transparent;
            color: #ff6b6b;
            border: 1px solid #ff6b6b;
        }

        .btn-admin {
            background: #7b1fa2;
            color: white;
        }

        /* News Ticker */
        .news-ticker-container {
            background: #373737;
            display: flex;
            align-items: center;
            overflow: hidden;
            border-bottom: 2px solid rgba(255,255,255,0.3);
            direction: rtl;
        }

        .ticker-label {
            background: var(--accent);
            color: white;
            padding: 0.75rem 1.25rem;
            font-weight: 700;
            white-space: nowrap;
            width: 100px;
            text-align: center;
            box-sizing: border-box;
        }

        .ticker-wrapper {
            flex: 1;
            overflow: hidden;
        }

        .ticker-content {
            display: flex;
            animation: ticker-scroll 35s linear infinite;
            white-space: nowrap;
            align-items: center;
        }

        .ticker-content:hover {
            animation-play-state: paused;
        }

        @keyframes ticker-scroll {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }

        .ticker-item {
            padding: 0.75rem 1rem;
            color: white;
            cursor: pointer;
            transition: color 0.2s;
            display: inline-flex;
            align-items: center;
        }

        .ticker-item:hover {
            color: var(--gold);
        }

        .ticker-separator {
            color: var(--accent);
            padding: 0 1.5rem;
            font-size: 1.2rem;
            display: inline-flex;
            align-items: center;
        }

        /* Ticker Popup */
        .ticker-popup-overlay {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.5);
            z-index: 2999;
            display: none;
        }

        .ticker-popup-overlay.active { display: block; }

        .ticker-popup {
            position: fixed;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            background: white;
            border-radius: 12px;
            box-shadow: 0 10px 50px rgba(0,0,0,0.3);
            width: 90%;
            max-width: 500px;
            z-index: 3000;
            display: none;
        }

        .ticker-popup.active { display: block; }

        .ticker-popup-header {
            background: var(--ink);
            color: white;
            padding: 1rem 1.5rem;
            border-radius: 12px 12px 0 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .ticker-popup-header h3 { margin: 0; font-size: 1.1rem; line-height: 1.4; }

        .ticker-popup-close {
            background: rgba(255,255,255,0.2);
            border: none;
            color: white;
            width: 32px; height: 32px;
            border-radius: 50%;
            font-size: 1.2rem;
            cursor: pointer;
            display: flex; align-items: center; justify-content: center;
        }

        .ticker-popup-body { padding: 1.5rem; max-height: 400px; overflow-y: auto; }
        .ticker-popup-summary { color: #555; line-height: 1.8; margin-bottom: 1rem; }
        .ticker-popup-read-more { display: inline-block; color: var(--accent); font-weight: 600; cursor: pointer; }
        .ticker-popup-banner { border-top: 1px solid var(--border); padding-top: 1rem; margin-top: 1rem; text-align: center; }
        .ticker-popup-banner img { max-width: 100%; max-height: 90px; border-radius: 4px; }

        /* Categories */
        .nav-categories {
            display: flex;
            justify-content: center;
            gap: 0.5rem;
            padding: 1rem;
            background: white;
            flex-wrap: wrap;
        }

        .nav-categories button {
            padding: 0.5rem 1rem;
            border: none;
            background: transparent;
            cursor: pointer;
            font-size: 0.9rem;
            border-radius: 20px;
            transition: all 0.2s;
        }

        .nav-categories button:hover { background: white; }
        .nav-categories button.active { background: var(--ink); color: white; }

        /* Stats Bar */
        .stats-bar {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 3rem;
            padding: 0.75rem 1rem;
            background: white;
            border-bottom: 1px solid var(--border);
            width: 100%;
            text-align: center;
        }

        .stat-item { text-align: center; display: flex; align-items: center; gap: 0.4rem; }
        .stat-number { font-size: 1.5rem; font-weight: 800; color: var(--accent); }

        /* Main Content */
        .main-content {
            max-width: 1400px;
            margin: 0 auto;
            padding: 2rem;
        }

        .section-header { margin-bottom: 2rem; }
        .section-header h2 { font-size: 1.5rem; font-weight: 700; }

        .news-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.5rem;
        }

        .article-card {
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 10px var(--shadow);
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .article-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px var(--shadow);
        }

        .article-image {
            width: 100%;
            height: 180px;
            object-fit: cover;
            background: var(--paper-dark);
        }

        .article-content { padding: 1.25rem; }

        .article-meta {
            display: flex;
            justify-content: space-between;
            font-size: 0.8rem;
            color: #888;
            margin-bottom: 0.75rem;
        }

        .article-category {
            background: var(--accent-light);
            color: var(--accent);
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            font-weight: 600;
        }

        .article-title {
            font-size: 1.1rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            white-space: normal;
        }

        .article-author {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 1rem;
            padding-top: 1rem;
            border-top: 1px solid var(--border);
        }

        .author-avatar {
            width: 35px; height: 35px;
            border-radius: 50%;
            background: var(--paper-dark);
            display: flex; align-items: center; justify-content: center;
            font-size: 1.2rem;
        }

        .author-name { font-weight: 600; font-size: 0.9rem; }

        .rating-badge {
            background: var(--gold);
            color: white;
            padding: 0.25rem 0.5rem;
            border-radius: 4px;
            font-weight: 700;
        }

        /* Modal */
        .modal-overlay {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s;
            padding: 2rem;
            overflow-y: auto;
        }

        .modal-overlay.active { opacity: 1; visibility: visible; }

        .modal {
            background: white;
            border-radius: 12px;
            width: 100%;
            max-width: 600px;
            max-height: 90vh;
            overflow-y: auto;
        }

        .modal-header {
            padding: 1.5rem;
            border-bottom: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .modal-header h2 { font-size: 1.3rem; }

        .modal-close {
            background: none; border: none;
            font-size: 1.5rem; cursor: pointer; color: #888;
        }

        .modal-close:hover { color: #333; }

        .view-close {
            position: absolute;
            top: 1rem; left: 1rem;
            z-index: 10;
            background: rgba(0,0,0,0.7);
            color: white;
            width: 40px; height: 40px;
            border-radius: 50%;
            font-size: 1.5rem;
            display: flex; align-items: center; justify-content: center;
            border: 2px solid white;
        }

        .modal-body { padding: 1.5rem; }

        /* Forms */
        .form-group { margin-bottom: 1.25rem; }
        .form-label { display: block; margin-bottom: 0.5rem; font-weight: 600; }

        .form-input, .form-select, .form-textarea {
            width: 100%;
            padding: 0.75rem 1rem;
            border: 2px solid var(--border);
            border-radius: 8px;
            font-size: 1rem;
            font-family: inherit;
            transition: border-color 0.2s;
        }

        .form-input:focus, .form-select:focus, .form-textarea:focus {
            outline: none;
            border-color: var(--accent);
        }

        .form-textarea { min-height: 200px; resize: vertical; }

        .btn-submit {
            width: 100%;
            padding: 1rem;
            background: var(--accent);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: 700;
            cursor: pointer;
            margin-top: 1rem;
        }

        .btn-submit:hover { background: #a01830; }
        .btn-submit:disabled { background: #ccc; cursor: not-allowed; }

        /* Auth Tabs */
        .auth-tabs { display: flex; border-bottom: 1px solid var(--border); }
        .auth-tab { flex: 1; padding: 1rem; border: none; background: none; font-size: 1rem; font-weight: 600; cursor: pointer; color: #888; transition: all 0.2s; }
        .auth-tab.active { color: var(--accent); border-bottom: 3px solid var(--accent); }
        .auth-form { display: none; }
        .auth-form.active { display: block; }

        /* Display Options */
        .display-options { display: flex; gap: 1rem; margin-bottom: 1rem; }
        .display-option { flex: 1; padding: 1rem; border: 2px solid var(--border); border-radius: 8px; cursor: pointer; text-align: center; transition: all 0.2s; }
        .display-option:has(input:checked) { border-color: var(--accent); background: var(--accent-light); }
        .display-option input { display: none; }

        /* Avatar Selection */
        .avatar-options { display: flex; gap: 0.75rem; margin-bottom: 1rem; justify-content: center; }
        .avatar-option { padding: 0.75rem; border: 2px solid var(--border); border-radius: 8px; cursor: pointer; text-align: center; transition: all 0.2s; flex: 1; max-width: 100px; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
        .avatar-option:has(input:checked) { border-color: var(--accent); background: var(--accent-light); }
        .avatar-option input { display: none; }
        .avatar-option-icon { width: 55px; height: 55px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; }
        .avatar-option-icon img { width: 55px !important; height: 55px !important; border-radius: 50% !important; object-fit: cover !important; }
        .avatar-option span { font-size: 0.8rem; font-weight: 600; }

        /* File Upload */
        .file-upload { border: 2px dashed var(--border); border-radius: 8px; padding: 2rem; text-align: center; cursor: pointer; transition: all 0.2s; }
        .file-upload:hover { border-color: var(--accent); background: var(--accent-light); }
        .file-upload-preview { max-width: 100%; max-height: 150px; border-radius: 8px; margin-top: 1rem; }

        /* Content Policy */
        .content-policy { background: #ffebee; border: 1px solid #ef5350; border-radius: 8px; padding: 1rem; margin-bottom: 1rem; }
        .content-policy h4 { color: #c62828; margin-bottom: 0.5rem; }
        .content-policy ul { margin: 0.5rem 0; padding-right: 1.5rem; font-size: 0.9rem; color: #c62828; }
        .policy-checkbox { display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem; font-weight: 600; }

        /* Toast */
        .toast { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%) translateY(100px); background: var(--ink); color: white; padding: 1rem 2rem; border-radius: 8px; z-index: 5000; opacity: 0; transition: all 0.3s; }
        .toast.active { transform: translateX(-50%) translateY(0); opacity: 1; }
        .toast.success { background: #2e7d32; }
        .toast.error { background: #c62828; }

        /* View Article Modal */
        .view-modal { max-width: 800px; }
        .view-article-image { width: 100%; max-height: 400px; object-fit: cover; }
        .view-article-content { padding: 2rem; }
        .view-article-title { font-size: 1.8rem; font-weight: 800; margin-bottom: 1rem; }
        .view-article-text { line-height: 1.9; white-space: pre-wrap; }

        /* Article footer section */
        .article-footer-section { margin-top: 2rem; padding: 1.5rem; background: linear-gradient(135deg, #f8f8f8 0%, #f0f0f0 100%); border-radius: 12px; text-align: center; border: 1px solid var(--border); }
        .article-footer-section h3 { margin-bottom: 1rem; color: var(--ink); font-size: 1.1rem; }
        .article-footer-buttons { display: flex; justify-content: center; gap: 0.75rem; flex-wrap: wrap; }
        .article-footer-btn { padding: 0.75rem 1.5rem; border: none; border-radius: 25px; cursor: pointer; font-size: 0.95rem; font-weight: 600; transition: all 0.2s; display: flex; align-items: center; gap: 0.5rem; }
        .article-footer-btn.primary { background: var(--accent); color: white; }
        .article-footer-btn.primary:hover { background: #a01830; transform: translateY(-2px); }
        .article-footer-btn.share { background: white; color: var(--ink); border: 1px solid var(--border); }
        .article-footer-btn.share:hover { background: var(--paper-dark); }
        .article-footer-btn.whatsapp { background: #25D366; color: white; }
        .article-footer-btn.whatsapp:hover { background: #1da851; }
        .article-footer-btn.facebook { background: #1877F2; color: white; }
        .article-footer-btn.facebook:hover { background: #0d5ecf; }
        .article-footer-btn.twitter { background: #1DA1F2; color: white; }
        .article-footer-btn.twitter:hover { background: #0c85d0; }

        /* Rating */
        .rating-section { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--border); }
        .rating-buttons { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.5rem; }
        .rating-btn { width: 40px; height: 40px; border: 2px solid var(--border); border-radius: 50%; background: white; cursor: pointer; font-weight: 700; transition: all 0.2s; }
        .rating-btn:hover, .rating-btn.selected { background: var(--gold); color: white; border-color: var(--gold); }

        /* Admin Panel */
        .admin-modal { max-width: 1000px; }
        .admin-tabs { display: flex; gap: 0.5rem; padding: 1rem; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
        .admin-tab { padding: 0.5rem 1rem; border: none; background: var(--paper); border-radius: 20px; cursor: pointer; font-size: 0.85rem; }
        .admin-tab.active { background: var(--accent); color: white; }
        .admin-tab-content { display: none; padding: 1rem; }
        .admin-tab-content.active { display: block; }
        .admin-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
        .admin-table th, .admin-table td { padding: 0.75rem; border-bottom: 1px solid var(--border); text-align: right; }
        .admin-table th { background: var(--paper); font-weight: 700; }
        .btn-small { padding: 0.25rem 0.5rem; font-size: 0.8rem; border-radius: 4px; border: none; cursor: pointer; }
        .btn-delete { background: #ffebee; color: #c62828; }
        .btn-view { background: #e3f2fd; color: #1565c0; }

        /* Empty State */
        .empty-state { text-align: center; padding: 4rem 2rem; color: #888; }
        .empty-state-icon { font-size: 4rem; margin-bottom: 1rem; }

        /* Loading */
        .loading { text-align: center; padding: 2rem; color: #888; }
        .loading-spinner { width: 40px; height: 40px; border: 4px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 1rem; }
        @keyframes spin { to { transform: rotate(360deg); } }

        /* ==================== Accessibility ==================== */
        .accessibility-btn { position: fixed; bottom: 20px; left: 20px; width: 50px; height: 50px; border-radius: 50%; background: #0077C8; color: white; border: none; font-size: 2.2rem; cursor: pointer; box-shadow: 0 4px 15px rgba(0,0,0,0.3); z-index: 999; display: flex; align-items: center; justify-content: center; transition: transform 0.2s, background 0.2s; }
        .accessibility-btn:hover { transform: scale(1.1); background: #005a9e; }
        .accessibility-panel { position: fixed; bottom: 80px; left: 20px; background: white; border-radius: 12px; box-shadow: 0 5px 30px rgba(0,0,0,0.3); padding: 1.25rem; z-index: 998; display: none; min-width: 220px; }
        .accessibility-panel.active { display: block; }
        .accessibility-panel h4 { margin: 0 0 1rem 0; font-size: 1rem; color: var(--ink); border-bottom: 2px solid var(--accent); padding-bottom: 0.5rem; }
        .accessibility-option { display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 0; border-bottom: 1px solid var(--border); }
        .accessibility-option:last-child { border-bottom: none; }
        .accessibility-option span { font-size: 0.9rem; font-weight: 600; }
        .accessibility-controls { display: flex; gap: 0.4rem; }
        .accessibility-controls button { width: 32px; height: 32px; border: 1px solid var(--border); background: var(--paper); border-radius: 6px; cursor: pointer; font-size: 1rem; transition: all 0.2s; }
        .accessibility-controls button:hover { background: var(--accent); color: white; border-color: var(--accent); }
        .accessibility-controls button.active { background: var(--accent); color: white; border-color: var(--accent); }

        /* High Contrast Mode */
        body.high-contrast { --paper: #000000; --paper-dark: #111111; --ink: #ffffff; --accent: #ffff00; --accent-light: #333300; --border: #ffffff; --shadow: rgba(255, 255, 255, 0.1); }
        body.high-contrast .masthead { background: #000; border-bottom: 2px solid #fff; }
        body.high-contrast .article-card { background: #111; border: 1px solid #fff; }
        body.high-contrast .modal { background: #111; border: 2px solid #fff; }
        body.high-contrast .btn-primary { background: #ffff00; color: #000; }
        body.high-contrast .form-input, body.high-contrast .form-select, body.high-contrast .form-textarea { background: #000; color: #fff; border-color: #fff; }
        body.high-contrast .accessibility-panel { background: #111; border: 2px solid #fff; }
        body.high-contrast .accessibility-panel h4 { color: #fff; }
        body.high-contrast .accessibility-option span { color: #fff; }

        /* Font Size Classes */
        body.font-size-large { font-size: 1.15rem; }
        body.font-size-large .article-title { font-size: 1.3rem; }
        body.font-size-large .view-article-title { font-size: 2.1rem; }
        body.font-size-large .view-article-text { font-size: 1.15rem; }
        body.font-size-xlarge { font-size: 1.3rem; }
        body.font-size-xlarge .article-title { font-size: 1.5rem; }
        body.font-size-xlarge .view-article-title { font-size: 2.4rem; }
        body.font-size-xlarge .view-article-text { font-size: 1.3rem; }

        /* Link Highlight Mode */
        body.highlight-links a { background: #ffff00 !important; color: #000 !important; padding: 0 3px; text-decoration: underline !important; }

        /* Stocks Ticker */
        .stocks-ticker-container { background: #373737; display: flex; align-items: center; overflow: hidden; direction: rtl; border-bottom: 2px solid #E0BC5A; }
        .stocks-label { background: #E0BC5A; color: white; padding: 0.75rem 1.25rem; font-weight: 700; white-space: nowrap; width: 100px; text-align: center; box-sizing: border-box; }
        .stocks-wrapper { flex: 1; overflow: hidden; }
        .stocks-content { display: flex; animation: stocks-scroll 20s linear infinite; white-space: nowrap; align-items: center; }
        .stocks-content:hover { animation-play-state: paused; }
        .stock-item a { color: inherit; text-decoration: none; cursor: pointer; pointer-events: auto; }
        .stock-item a:hover { text-decoration: underline; }
        @keyframes stocks-scroll { 0% { transform: translateX(-50%); } 100% { transform: translateX(0%); } }
        .stock-item { padding: 0.5rem 1.25rem; color: white; display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; transition: background 0.2s; border-radius: 4px; }
        .stock-item:hover { background: rgba(255,255,255,0.1); }
        .stock-name { font-weight: 600; color: #aaa; }
        .stock-value { font-weight: 700; }
        .stock-change { font-size: 0.75rem; padding: 0.15rem 0.4rem; border-radius: 4px; font-weight: 600; }
        .stock-change.up { background: rgba(76, 175, 80, 0.3); color: #69f0ae; }
        .stock-change.down { background: rgba(244, 67, 54, 0.3); color: #ff8a80; }
        .stock-change.neutral { background: rgba(255, 255, 255, 0.2); color: #fff; }
        .stocks-separator { color: rgba(255,255,255,0.5); padding: 0 0.75rem; }

        /* Reading Guide */
        .reading-guide { position: fixed; left: 0; right: 0; height: 40px; background: rgba(255, 255, 0, 0.2); border-top: 2px solid var(--accent); border-bottom: 2px solid var(--accent); pointer-events: none; z-index: 9999; display: none; }
        body.reading-guide-active .reading-guide { display: block; }

        /* ==================== MOBILE RESPONSIVE ==================== */
        @media (max-width: 768px) {
            .masthead-top {
                flex-direction: column;
                gap: 0.75rem;
                padding: 0.75rem 1rem;
            }

            .date-display {
                font-size: 0.7rem;
                order: -1;
            }

            .logo {
                font-size: 1.6rem;
                letter-spacing: 1px;
            }

            .tagline {
                font-size: 0.7rem;
                letter-spacing: 2px;
            }

            .user-actions {
                flex-wrap: wrap;
                justify-content: center;
                gap: 0.5rem;
            }

            .user-actions .btn {
                padding: 0.4rem 0.8rem;
                font-size: 0.8rem;
            }

            /* Tickers */
            .ticker-label, .stocks-label {
                width: 70px;
                padding: 0.5rem 0.5rem;
                font-size: 0.8rem;
            }

            .ticker-item { padding: 0.5rem 0.75rem; font-size: 0.85rem; }

            /* Categories */
            .nav-categories {
                gap: 0.3rem;
                padding: 0.75rem 0.5rem;
            }

            .nav-categories button {
                padding: 0.35rem 0.7rem;
                font-size: 0.8rem;
            }

            /* Stats */
            .stats-bar {
                gap: 1rem;
                padding: 0.5rem;
                font-size: 0.85rem;
            }

            .stat-number { font-size: 1.2rem; }

            /* Content */
            .main-content {
                padding: 1rem 0.75rem;
            }

            .news-grid {
                grid-template-columns: 1fr;
                gap: 1rem;
            }

            /* Modals */
            .modal-overlay {
                padding: 0.5rem;
            }

            .modal {
                border-radius: 8px;
                max-height: 95vh;
            }

            .modal-header {
                padding: 1rem;
            }

            .modal-header h2 { font-size: 1.1rem; }

            .modal-body {
                padding: 1rem;
            }

            /* View Article */
            .view-modal {
                max-width: 100%;
                border-radius: 0;
                max-height: 100vh;
            }

            .view-article-image {
                max-height: 250px;
            }

            .view-article-content {
                padding: 1rem;
            }

            .view-article-title {
                font-size: 1.3rem;
            }

            .view-article-text {
                font-size: 0.95rem;
            }

            /* Video wrapper */
            #viewVideoWrapper {
                margin-bottom: 0.5rem !important;
            }

            #viewVideoWrapper video {
                max-height: 250px !important;
            }

            /* Article cards */
            .article-image {
                height: 150px;
            }

            .article-content {
                padding: 1rem;
            }

            .article-title {
                font-size: 1rem;
            }

            /* Share buttons */
            .article-footer-buttons {
                gap: 0.5rem;
            }

            .article-footer-btn {
                padding: 0.5rem 1rem;
                font-size: 0.85rem;
            }

            /* Forms */
            .file-upload {
                padding: 1rem;
            }

            .form-textarea {
                min-height: 150px;
            }

            /* Accessibility */
            .accessibility-btn {
                width: 42px;
                height: 42px;
                font-size: 1.8rem;
                bottom: 15px;
                left: 15px;
            }

            .accessibility-panel {
                bottom: 65px;
                left: 10px;
                right: 10px;
                min-width: auto;
            }

            /* Toast */
            .toast {
                width: 90%;
                text-align: center;
                font-size: 0.9rem;
            }
        }

        /* Extra small screens */
        @media (max-width: 400px) {
            .logo { font-size: 1.3rem; }
            .tagline { font-size: 0.6rem; letter-spacing: 1px; }
            .user-actions .btn { padding: 0.35rem 0.6rem; font-size: 0.75rem; }
            .view-article-title { font-size: 1.1rem; }
            .nav-categories button { font-size: 0.75rem; padding: 0.3rem 0.5rem; }
        }