* { -webkit-tap-highlight-color: transparent; margin: 0; padding: 0; box-sizing: border-box; }
    ::-webkit-scrollbar { width: 0; height: 0; }
    html { scroll-behavior: smooth; }
    body { font-family: 'Plus Jakarta Sans', sans-serif; overflow-x: hidden; }
    div#articleBodyDesktop { text-align: left; }
    div#articleBodyMobile { text-align: left; }
    body.reader-light { background: #f5f5f4; }
    body.reader-light .reader-body { background: #fafaf9; }
    body.reader-light .reader-text, body.reader-light .reader-text p { color: #44403c; }
    body.reader-light .reader-header, body.reader-light .reader-bottom-bar { background: rgba(255,255,255,0.95); border-color: rgba(0,0,0,0.06); }
    body.reader-light .setting-panel { background: rgba(255,255,255,0.98); }
    body.reader-light .panel-border { border-color: rgba(0,0,0,0.06); }
    body.reader-light .ctrl-btn { background: #f1f5f9; color: #64748b; }
    body.reader-light .ctrl-btn:hover { background: #e2e8f0; }
    body.reader-light .theme-btn { border-color: #e2e8f0; }
    body.reader-light .font-btn { border-color: #e2e8f0; }
    body.reader-light .progress-track { background: rgba(0,0,0,0.05); }
    
    body.reader-sepia { background: #f5e6c8; }
    body.reader-sepia .reader-body { background: #fdf6e3; }
    body.reader-sepia .reader-text, body.reader-sepia .reader-text p { color: #5c4b37; }
    body.reader-sepia .reader-header, body.reader-sepia .reader-bottom-bar { background: rgba(253,246,227,0.95); border-color: rgba(92,75,55,0.1); }
    body.reader-sepia .setting-panel { background: rgba(253,246,227,0.98); }
    body.reader-sepia .panel-border { border-color: rgba(92,75,55,0.1); }
    body.reader-sepia .ctrl-btn { background: #f0e6d2; color: #5c4b37; }
    body.reader-sepia .ctrl-btn:hover { background: #e8d5b5; }
    body.reader-sepia .theme-btn { border-color: #e8d5b5; }
    body.reader-sepia .font-btn { border-color: #e8d5b5; }
    body.reader-sepia .progress-track { background: rgba(92,75,55,0.08); }
    
    body.reader-dark { background: #0f172a; }
    body.reader-dark .reader-body { background: #1e293b; }
    body.reader-dark .reader-text, body.reader-dark .reader-text p { color: #cbd5e1; }
    body.reader-dark .reader-header, body.reader-dark .reader-bottom-bar { background: rgba(15,23,42,0.95); border-color: rgba(255,255,255,0.06); }
    body.reader-dark .setting-panel { background: rgba(15,23,42,0.98); }
    body.reader-dark .panel-border { border-color: rgba(255,255,255,0.08); }
    body.reader-dark .ctrl-btn { background: #334155; color: #94a3b8; }
    body.reader-dark .ctrl-btn:hover { background: #475569; }
    body.reader-dark .theme-btn { border-color: #334155; }
    body.reader-dark .font-btn { border-color: #334155; color: #94a3b8; }
    body.reader-dark .font-btn.active { border-color: #22c55e; color: #4ade80; background: rgba(34,197,94,0.1); }
    body.reader-dark .progress-track { background: rgba(255,255,255,0.05); }
    body.reader-dark .text-gray-500 { color: #94a3b8 !important; }
    body.reader-dark .text-gray-600 { color: #94a3b8 !important; }
    body.reader-dark .text-gray-800 { color: #e2e8f0 !important; }
    body.reader-dark .text-gray-400 { color: #64748b !important; }
    body.reader-dark .border-gray-200 { border-color: rgba(255,255,255,0.06) !important; }
    .mobile-view { display: block; }
    .desktop-view { display: none; }
    
    @media (min-width: 1024px) {
        .mobile-view { display: none !important; }
        .desktop-view { display: flex !important; }
    }
    .pricing-scroll-container {
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        scroll-snap-type: x mandatory;
    }
    
    .pricing-scroll-container::-webkit-scrollbar {
        display: none;
    }
    
    .pricing-card {
        scroll-snap-align: start;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .pricing-card.featured {
        transform: scale(1.02);
    }
    
    .glass-card-pricing {
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.5);
    }
    
    body.reader-dark .glass-card-pricing {
        background: rgba(30, 41, 59, 0.85);
        border: 1px solid rgba(255, 255, 255, 0.08);
    }
    
    body.reader-sepia .glass-card-pricing {
        background: rgba(253, 246, 227, 0.85);
        border: 1px solid rgba(92, 75, 55, 0.1);
    }
    
    .pricing-gradient-green {
        background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    }
    
    .pricing-gradient-combo {
        background: linear-gradient(135deg, #16a34a 0%, #0ea5e9 50%, #f97316 100%);
        background-size: 200% 200%;
        animation: gradient-shift 8s ease infinite;
    }
    .reader-body { transition: background 0.3s ease, color 0.3s ease; }
    .reader-text { transition: color 0.3s ease; }
    .reader-text p { text-indent: 2em; margin-bottom: 1em; }
    .reader-text h2 { text-indent: 0; font-size: 1.35rem; font-weight: 700; margin: 1.5em 0 0.75em; color: inherit; }
    .reader-text h3 { text-indent: 0; font-size: 1.15rem; font-weight: 600; margin: 1.25em 0 0.5em; color: inherit; }
    .reader-text ul, .reader-text ol { margin-left: 1.5em; margin-bottom: 1em; }
    .reader-text li { margin-bottom: 0.35em; }
    .reader-text img { border-radius: 0.75rem; margin: 1em 0; max-width: 100%; height: auto; }
    .reader-text a { color: #16a34a; text-decoration: underline; }
    .reader-text blockquote { border-left: 4px solid #22c55e; padding-left: 1em; font-style: italic; opacity: 0.8; margin: 1em 0; }
    .reader-text strong, .reader-text b { font-weight: 700; }
    .reader-text em, .reader-text i { font-style: italic; }
    
    @media (min-width: 1024px) {
        .reader-text p { text-indent: 2.5em; margin-bottom: 1.2em; }
        .reader-text h2 { font-size: 1.6rem; margin: 2em 0 0.8em; }
        .reader-text h3 { font-size: 1.3rem; margin: 1.5em 0 0.6em; }
        .reader-text img { border-radius: 1rem; margin: 1.5em 0; }
    .reader-text blockquote { border-left: 4px solid #22c55e; padding-left: 1.2em; margin: 1.5em 0; }
    }

    #articleBodyDesktop,
    #articleBodyMobile {
        max-width: 72ch;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
        word-break: normal;
        overflow-wrap: break-word;
        hyphens: none;
    }

    #articleBodyDesktop.reader-text,
    #articleBodyMobile.reader-text {
        font-family: 'Merriweather', Georgia, serif;
        font-size: 17px;
        line-height: 1.9;
        letter-spacing: 0;
    }

    #articleBodyMobile.reader-text {
        font-size: 16px;
        line-height: 1.82;
    }

    #articleBodyDesktop.reader-text p,
    #articleBodyMobile.reader-text p {
        text-indent: 0;
        margin: 0 0 1.25rem;
        color: inherit;
    }

    #articleBodyDesktop.reader-text p:first-of-type,
    #articleBodyMobile.reader-text p:first-of-type {
        font-size: 1.05em;
        line-height: 1.88;
    }

    #articleBodyDesktop.reader-text h2,
    #articleBodyMobile.reader-text h2,
    #articleBodyDesktop.reader-text h3,
    #articleBodyMobile.reader-text h3,
    #articleBodyDesktop.reader-text h4,
    #articleBodyMobile.reader-text h4 {
        font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
        text-indent: 0;
        letter-spacing: 0;
        line-height: 1.28;
        color: #14532d;
    }

    #articleBodyDesktop.reader-text h2,
    #articleBodyMobile.reader-text h2 {
        font-size: clamp(1.45rem, 2vw, 1.9rem);
        margin: 2.35rem 0 1rem;
        padding-top: 0.35rem;
    }

    #articleBodyDesktop.reader-text h3,
    #articleBodyMobile.reader-text h3 {
        font-size: clamp(1.2rem, 1.6vw, 1.45rem);
        margin: 1.85rem 0 0.85rem;
    }

    #articleBodyDesktop.reader-text ul,
    #articleBodyDesktop.reader-text ol,
    #articleBodyMobile.reader-text ul,
    #articleBodyMobile.reader-text ol {
        margin: 0 0 1.35rem 1.4rem;
        padding-left: 0.4rem;
    }

    #articleBodyDesktop.reader-text li,
    #articleBodyMobile.reader-text li {
        margin-bottom: 0.65rem;
        padding-left: 0.2rem;
    }

    #articleBodyDesktop.reader-text img,
    #articleBodyMobile.reader-text img {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 1.75rem auto;
        border-radius: 18px;
        box-shadow: 0 18px 45px rgba(15, 23, 42, 0.14);
    }

    #articleBodyDesktop.reader-text blockquote,
    #articleBodyMobile.reader-text blockquote {
        margin: 1.8rem 0;
        padding: 1.1rem 1.25rem;
        border-left: 5px solid #22c55e;
        border-radius: 0 16px 16px 0;
        background: rgba(34, 197, 94, 0.08);
        font-style: italic;
        opacity: 1;
    }

    #articleBodyDesktop.reader-text a,
    #articleBodyMobile.reader-text a {
        color: #15803d;
        text-decoration-thickness: 2px;
        text-underline-offset: 3px;
    }

    #articleBodyDesktop.reader-text table,
    #articleBodyMobile.reader-text table {
        width: 100%;
        border-collapse: collapse;
        margin: 1.75rem 0;
        font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
        font-size: 0.94em;
        overflow: hidden;
        border-radius: 16px;
    }

    #articleBodyDesktop.reader-text th,
    #articleBodyMobile.reader-text th {
        background: #dcfce7;
        color: #14532d;
        text-align: left;
        font-weight: 800;
    }

    #articleBodyDesktop.reader-text th,
    #articleBodyDesktop.reader-text td,
    #articleBodyMobile.reader-text th,
    #articleBodyMobile.reader-text td {
        border: 1px solid rgba(20, 83, 45, 0.12);
        padding: 0.85rem 1rem;
        vertical-align: top;
    }

    body.reader-dark #articleBodyDesktop.reader-text h2,
    body.reader-dark #articleBodyMobile.reader-text h2,
    body.reader-dark #articleBodyDesktop.reader-text h3,
    body.reader-dark #articleBodyMobile.reader-text h3,
    body.reader-dark #articleBodyDesktop.reader-text h4,
    body.reader-dark #articleBodyMobile.reader-text h4 {
        color: #86efac;
    }

    body.reader-dark #articleBodyDesktop.reader-text blockquote,
    body.reader-dark #articleBodyMobile.reader-text blockquote {
        background: rgba(34, 197, 94, 0.12);
    }

    body.reader-sepia #articleBodyDesktop.reader-text h2,
    body.reader-sepia #articleBodyMobile.reader-text h2,
    body.reader-sepia #articleBodyDesktop.reader-text h3,
    body.reader-sepia #articleBodyMobile.reader-text h3,
    body.reader-sepia #articleBodyDesktop.reader-text h4,
    body.reader-sepia #articleBodyMobile.reader-text h4 {
        color: #166534;
    }

    @media (max-width: 640px) {
        #articleBodyDesktop.reader-text,
        #articleBodyMobile.reader-text {
            max-width: 100%;
            line-height: 1.78;
        }

        #articleBodyDesktop.reader-text p,
        #articleBodyMobile.reader-text p {
            margin-bottom: 1.1rem;
        }

        #articleBodyDesktop.reader-text img,
        #articleBodyMobile.reader-text img {
            border-radius: 14px;
            margin: 1.35rem auto;
        }
    }
    .reader-header, .reader-bottom-bar {
        transition: transform 0.3s ease;
        position: sticky;
    }
    .progress-track { height: 2px; width: 100%; }
    .progress-fill { height: 2px; transition: width 0.15s ease; width: 0%; }
    .setting-panel {
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
    }
    .setting-panel.hidden { display: none; }
    .setting-panel:not(.hidden) { display: flex; }
    
    .theme-btn {
        width: 40px; height: 40px; border-radius: 50%;
        border: 2px solid #e2e8f0; transition: all 0.2s ease;
        cursor: pointer; flex-shrink: 0;
    }
    .theme-btn.active {
        border-color: #22c55e;
        box-shadow: 0 0 0 3px rgba(34,197,94,0.25);
        transform: scale(1.1);
    }
    
    .ctrl-btn {
        width: 40px; height: 40px; border-radius: 10px;
        display: flex; align-items: center; justify-content: center;
        transition: all 0.2s ease; cursor: pointer; flex-shrink: 0;
    }
    
    .font-btn {
        padding: 10px 16px; border-radius: 10px; font-size: 14px;
        font-weight: 500; border: 2px solid #e2e8f0; transition: all 0.2s ease;
        cursor: pointer; text-align: center;
    }
    .font-btn.active { border-color: #22c55e; color: #16a34a; background: #f0fdf4; }
    .desktop-bg { transition: background 0.3s ease; min-height: 100vh; }
    .desktop-sidebar { width: 280px; min-height: 100vh; position: sticky; top: 0; overflow-y: auto; max-height: 100vh; }
    .desktop-main { flex: 1; display: flex; justify-content: center; }
    .reader-frame { width: 100%; max-width: 720px; border-radius: 1.5rem; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.15); }
    .desktop-right-sidebar { width: 260px; min-height: 100vh; position: sticky; top: 0; overflow-y: auto; max-height: 100vh; }
    
    @media (min-width: 1024px) and (max-width: 1279px) {
        .desktop-sidebar { width: 240px; }
        .desktop-right-sidebar { width: 220px; }
    }
    @keyframes float { 0%,100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } }
    @keyframes gradient-shift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
    @keyframes fade-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
    
    .animate-fade-in { animation: fade-in 0.5s ease-out forwards; }
    .animate-slide-up { animation: slide-up 0.35s cubic-bezier(0.4,0,0.2,1) forwards; }
    .animate-float { animation: float 6s ease-in-out infinite; }
    .animate-float-delayed { animation: float 6s ease-in-out 3s infinite; }
    .glass { background: rgba(255,255,255,0.7); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.3); }
    .gradient-mesh {
        background:
        radial-gradient(at 30% 20%, rgba(34,197,94,0.12) 0px, transparent 50%),
        radial-gradient(at 70% 10%, rgba(14,165,233,0.12) 0px, transparent 50%),
        radial-gradient(at 10% 60%, rgba(249,115,22,0.1) 0px, transparent 50%),
        radial-gradient(at 80% 70%, rgba(34,197,94,0.08) 0px, transparent 50%),
        radial-gradient(at 20% 90%, rgba(14,165,233,0.1) 0px, transparent 50%);
    }
    .gradient-bg-combo { background: linear-gradient(135deg,#16a34a,#0ea5e9,#f97316); background-size:300% 300%; animation: gradient-shift 8s ease infinite; }
    .gradient-text-combo { background: linear-gradient(135deg,#16a34a,#0ea5e9,#f97316); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
    
    .sidebar-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #94a3b8; margin-bottom: 8px; }
    body.reader-light .sidebar-section-title { color: #94a3b8; }
    body.reader-sepia .sidebar-section-title { color: #8b7355; }
    
    .stat-label { font-size: 12px; color: #94a3b8; }
    .stat-value { font-size: 13px; font-weight: 600; color: #475569; }
    body.reader-dark .stat-value { color: #cbd5e1; }
    
    .toc-link { display: block; padding: 8px 12px; border-radius: 8px; color: #64748b; font-size: 14px; cursor: pointer; text-decoration: none; transition: all 0.15s ease; }
    .toc-link:hover { background: rgba(34,197,94,0.08); color: #16a34a; }
    .toc-link.active { background: rgba(34,197,94,0.12); color: #16a34a; font-weight: 600; }
    body.reader-dark .toc-link:hover { background: rgba(34,197,94,0.08); color: #4ade80; }
    body.reader-dark .toc-link.active { background: rgba(34,197,94,0.12); color: #4ade80; }
    body.reader-sepia .toc-link:hover { background: rgba(34,197,94,0.06); color: #16a34a; }
    body.reader-sepia .toc-link.active { background: rgba(34,197,94,0.1); color: #16a34a; }
    .safe-bottom { padding-bottom: env(safe-area-inset-bottom, 8px); }
    
    .comment-section {
        border-top: 2px solid #f0f0f0;
        transition: all 0.3s ease;
    }
    
    .comment-card {
        transition: all 0.2s ease;
    }
    
    .comment-card:hover {
        transform: translateX(4px);
    }
    
    .comment-avatar {
        transition: transform 0.3s ease;
    }
    
    .comment-card:hover .comment-avatar {
        transform: scale(1.1);
    }
    
    .google-login-btn {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .google-login-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(66, 133, 244, 0.3);
    }
    
    .comment-textarea {
        transition: all 0.3s ease;
        resize: none;
    }
    
    .comment-textarea:focus {
        box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
    }
    
    .comment-submit-btn {
        transition: all 0.3s ease;
    }
    
    .comment-submit-btn:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(34, 197, 94, 0.3);
    }
    
    .comment-submit-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }
    
    @keyframes spin {
        to { transform: rotate(360deg); }
    }
    
    .spinner {
        animation: spin 0.8s linear infinite;
    }
    
    body.reader-dark .comment-section {
        border-color: rgba(255, 255, 255, 0.06);
    }
    
    body.reader-dark .comment-card {
        background: rgba(30, 41, 59, 0.5) !important;
    }
    
    body.reader-dark .comment-card:hover {
        background: rgba(30, 41, 59, 0.8) !important;
    }
    
    body.reader-dark .comment-textarea {
        background: rgba(30, 41, 59, 0.8);
        border-color: rgba(255, 255, 255, 0.1);
        color: #cbd5e1;
    }
    
    body.reader-dark .comment-textarea::placeholder {
        color: #64748b;
    }
    
    body.reader-sepia .comment-card {
        background: rgba(253, 246, 227, 0.5) !important;
    }
    
    body.reader-sepia .comment-card:hover {
        background: rgba(253, 246, 227, 0.8) !important;
    }
    
    body.reader-sepia .comment-textarea {
        background: rgba(253, 246, 227, 0.8);
        border-color: rgba(92, 75, 55, 0.1);
    }
    
    /* Story/Video Section Styles */
    .hide-scrollbar::-webkit-scrollbar {
        display: none;
    }
    .hide-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    
    .video-thumb-item {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        cursor: pointer;
    }
    
    .line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }