* { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; color: #333; line-height: 1.7; background: #f8f9fa; }
        a { color: #155DFC; text-decoration: none; }
        a:hover { text-decoration: underline; }

        /* FTC Banner */
        .ftc-banner { background: #f0f0f5; text-align: center; padding: 8px 16px; font-size: 12px; color: #666; border-bottom: 1px solid #e0e0e8; }

        /* Header */
        .header { background: var(--navy, #1a1a2e); padding: 0 24px; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 16px rgba(0,0,0,0.15); }
        .header-inner { max-width: 1120px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 68px; }
        .logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; font-weight: 800; font-size: 22px; letter-spacing: -0.02em; }
        .logo-icon { width: 36px; height: 36px; background: var(--accent, #155DFC); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; color: #fff; position: relative; overflow: hidden; }
        .logo-icon::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 60%); }
        nav a { color: rgba(255,255,255,0.75); text-decoration: none; font-size: 14px; font-weight: 500; padding: 8px 16px; border-radius: 6px; transition: color 0.2s, background 0.2s; }
        nav a:hover { color: #fff; background: rgba(255,255,255,0.08); text-decoration: none; }
        .mobile-toggle { display: none; background: none; border: none; color: #fff; font-size: 24px; cursor: pointer; padding: 8px; }

        /* Article Container */
        .article-container { max-width: 780px; margin: 0 auto; padding: 40px 20px 60px; }

        /* FTC Disclosure */
        .ftc-disclosure { background: #fff3cd; border: 1px solid #ffc107; border-radius: 8px; padding: 14px 18px; margin-bottom: 32px; font-size: 0.85rem; color: #664d03; line-height: 1.5; }

        /* Breadcrumb */
        .breadcrumb { font-size: 0.85rem; color: #888; margin-bottom: 20px; }
        .breadcrumb a { color: #155DFC; }

        /* Article Header */
        .article-header h1 { font-size: 2.1rem; line-height: 1.25; color: #1a1a2e; margin-bottom: 16px; font-weight: 800; }
        .article-meta { display: flex; gap: 20px; flex-wrap: wrap; font-size: 0.88rem; color: #777; margin-bottom: 28px; padding-bottom: 20px; border-bottom: 2px solid #eee; }
        .article-meta span { display: flex; align-items: center; gap: 5px; }

        /* Content */
        .article-content h2 { font-size: 1.55rem; color: #1a1a2e; margin: 40px 0 16px; padding-top: 12px; border-top: 1px solid #eee; font-weight: 700; }
        .article-content h2:first-of-type { border-top: none; margin-top: 8px; }
        .article-content h3 { font-size: 1.2rem; color: #333; margin: 28px 0 12px; font-weight: 600; }
        .article-content p { margin-bottom: 16px; font-size: 1.02rem; }
        .article-content ul, .article-content ol { margin: 0 0 20px 24px; }
        .article-content li { margin-bottom: 8px; font-size: 1.02rem; }

        /* Quick Answer */
        .quick-answer { background: linear-gradient(135deg, #e8efff, #f0f4ff); border: 1px solid #c5d5ff; border-radius: 10px; padding: 20px 24px; margin: 24px 0; }
        .quick-answer strong { color: #155DFC; font-size: 15px; text-transform: uppercase; letter-spacing: 0.5px; }

        /* Generator Form */
        .gen-form { background: #fff; border: 1px solid #e0e0e0; border-radius: 12px; padding: 32px; margin: 24px 0; box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
        .form-group { margin-bottom: 28px; }
        .form-group label { display: block; font-weight: 700; font-size: 1.05rem; color: #1a1a2e; margin-bottom: 10px; }
        .form-group .label-hint { display: block; font-weight: 400; font-size: 0.88rem; color: #777; margin-top: 4px; }

        /* Text Input */
        .form-input { width: 100%; padding: 12px 16px; border: 1px solid #d0d5dd; border-radius: 8px; font-size: 1rem; color: #333; background: #fff; font-family: inherit; }
        .form-input:focus { outline: none; border-color: #155DFC; box-shadow: 0 0 0 3px rgba(21,93,252,0.15); }

        /* Select / Dropdown */
        .form-select { width: 100%; padding: 12px 16px; border: 1px solid #d0d5dd; border-radius: 8px; font-size: 1rem; color: #333; background: #fff; cursor: pointer; }
        .form-select:focus { outline: none; border-color: #155DFC; box-shadow: 0 0 0 3px rgba(21,93,252,0.15); }

        /* Textarea */
        .form-textarea { width: 100%; padding: 12px 16px; border: 1px solid #d0d5dd; border-radius: 8px; font-size: 1rem; color: #333; background: #fff; font-family: inherit; resize: vertical; min-height: 80px; }
        .form-textarea:focus { outline: none; border-color: #155DFC; box-shadow: 0 0 0 3px rgba(21,93,252,0.15); }

        /* Radio Buttons */
        .radio-group { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
        .radio-option { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border: 2px solid #e0e0e0; border-radius: 10px; cursor: pointer; transition: all 0.2s; }
        .radio-option:hover { border-color: #155DFC; background: #f0f5ff; }
        .radio-option.selected { border-color: #155DFC; background: #e8f0ff; }
        .radio-option input[type="radio"] { accent-color: #155DFC; width: 18px; height: 18px; cursor: pointer; }
        .radio-option .radio-label { font-size: 0.95rem; font-weight: 600; color: #1a1a2e; }
        .radio-option .radio-desc { font-size: 0.78rem; color: #888; margin-top: 2px; }

        /* Generate Button */
        .gen-button { display: block; width: 100%; padding: 16px 32px; background: linear-gradient(135deg, #155DFC 0%, #1a1a2e 100%); color: #fff; border: none; border-radius: 10px; font-size: 1.15rem; font-weight: 700; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; letter-spacing: 0.3px; }
        .gen-button:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(21,93,252,0.35); }
        .gen-button:active { transform: translateY(0); }

        /* Results */
        .results-section { display: none; margin-top: 32px; }
        .results-section.visible { display: block; animation: fadeSlideIn 0.6s ease-out; }
        @keyframes fadeSlideIn {
            from { opacity: 0; transform: translateY(24px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Script Output */
        .script-output { background: #fff; border: 2px solid #155DFC; border-radius: 12px; padding: 0; margin-bottom: 24px; overflow: hidden; }
        .script-header { background: #1a1a2e; color: #fff; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; }
        .script-header h3 { font-size: 1.1rem; margin: 0; color: #fff; }
        .copy-btn { background: rgba(255,255,255,0.15); color: #fff; border: 1px solid rgba(255,255,255,0.3); padding: 8px 18px; border-radius: 6px; font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: all 0.2s; }
        .copy-btn:hover { background: rgba(255,255,255,0.25); }
        .copy-btn.copied { background: #16a34a; border-color: #16a34a; }
        .script-body { padding: 24px; font-size: 0.98rem; line-height: 1.8; white-space: pre-wrap; word-wrap: break-word; color: #333; }
        .script-body .section-label { display: inline-block; background: #155DFC; color: #fff; padding: 2px 10px; border-radius: 4px; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.5px; margin-bottom: 6px; }
        .script-body .bracket { color: #155DFC; font-weight: 700; }

        /* Script Stats */
        .script-stats { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 24px; }
        .stat-pill { background: #e8f0ff; border: 1px solid #c5d5ff; border-radius: 20px; padding: 8px 18px; font-size: 0.88rem; font-weight: 600; color: #1a1a2e; }
        .stat-pill span { color: #155DFC; }

        /* CTA Cards */
        .cta-grid { display: grid; gap: 16px; margin: 24px 0; }
        .tool-cta-card { background: #fff; border: 2px solid #e0e0e0; border-radius: 12px; padding: 22px 24px; display: flex; align-items: center; gap: 18px; transition: border-color 0.2s, box-shadow 0.2s; }
        .tool-cta-card:hover { border-color: #155DFC; box-shadow: 0 4px 16px rgba(21,93,252,0.12); }
        .tool-cta-card .tool-badge { background: linear-gradient(135deg, #155DFC, #1a1a2e); color: #fff; padding: 6px 14px; border-radius: 6px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; white-space: nowrap; letter-spacing: 0.5px; }
        .tool-cta-card .tool-badge.recommended { background: linear-gradient(135deg, #16a34a, #0d6930); }
        .tool-cta-info { flex: 1; }
        .tool-cta-name { font-size: 1.1rem; font-weight: 700; color: #1a1a2e; }
        .tool-cta-desc { font-size: 0.88rem; color: #666; margin-top: 2px; }
        .tool-cta-link { display: inline-block; background: #155DFC; color: #fff; padding: 10px 22px; border-radius: 8px; font-weight: 700; font-size: 0.92rem; transition: transform 0.2s, box-shadow 0.2s; white-space: nowrap; text-decoration: none; }
        .tool-cta-link:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(21,93,252,0.3); text-decoration: none; }

        /* CTA Box */
        .cta-box { background: linear-gradient(135deg, #155DFC 0%, #1a1a2e 100%); border-radius: 12px; padding: 28px 32px; margin: 32px 0; text-align: center; color: #fff; }
        .cta-box h3 { color: #fff; font-size: 1.3rem; margin-bottom: 10px; }
        .cta-box p { color: rgba(255,255,255,0.9); margin-bottom: 18px; font-size: 0.98rem; }
        .cta-button { display: inline-block; background: #fff; color: #155DFC; padding: 13px 36px; border-radius: 8px; font-weight: 700; font-size: 1.05rem; transition: transform 0.2s, box-shadow 0.2s; }
        .cta-button:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0,0,0,0.3); text-decoration: none; }

        /* Tip Box */
        .tip-box { background: #e8f4fd; border-left: 4px solid #155DFC; border-radius: 0 8px 8px 0; padding: 16px 20px; margin: 20px 0; }
        .tip-box strong { color: #155DFC; }

        /* Footer */
        .site-footer { background: #1a1a2e; color: #aaa; padding: 36px 20px; text-align: center; font-size: 0.88rem; }
        .site-footer a { color: #155DFC; }
        .footer-inner { max-width: 1100px; margin: 0 auto; }

        /* Responsive */
        @media (max-width: 640px) {
            .article-header h1 { font-size: 1.55rem; }
            .article-content h2 { font-size: 1.3rem; }
            nav { display: none; }
            .mobile-toggle { display: block; }
            .cta-box { padding: 22px 18px; }
            .gen-form { padding: 20px 16px; }
            .radio-group { grid-template-columns: 1fr; }
            .tool-cta-card { flex-direction: column; align-items: flex-start; gap: 12px; text-align: left; }
            .script-header { flex-direction: column; gap: 10px; }
            .script-stats { flex-direction: column; gap: 8px; }
        }

        /* Dark Mode */
        [data-theme="dark"] { --navy: #0d0d1a; --navy-light: #0a0f1e; --text-primary: #e4e4e8; --text-secondary: #a0a0b8; --text-muted: #6a6a86; --surface: #1a1a2e; --surface-alt: #16213e; --border: #2a2a4e; --accent: #4d8aff; --accent-hover: #3a75e8; --accent-light: #1a2a4e; }
        [data-theme="dark"] body { background: #1a1a2e; color: #e4e4e8; }
        [data-theme="dark"] .ftc-banner { background: #16213e; border-color: #2a2a4e; color: #6a6a86; }
        [data-theme="dark"] .gen-form, [data-theme="dark"] .script-output, [data-theme="dark"] .tool-cta-card { background: #16213e; border-color: #2a2a4e; }
        [data-theme="dark"] .form-input, [data-theme="dark"] .form-select, [data-theme="dark"] .form-textarea { background: #1a1a2e; color: #e4e4e8; border-color: #2a2a4e; }
        [data-theme="dark"] .radio-option { border-color: #2a2a4e; color: #e4e4e8; }
        [data-theme="dark"] .radio-option.selected { background: #1a2a4e; border-color: #4d8aff; }
        [data-theme="dark"] .script-body { color: #e4e4e8; }
        [data-theme="dark"] .quick-answer { background: #16213e; border-color: #2a2a4e; }
        [data-theme="dark"] .ftc-disclosure { background: #2a2010; border-color: #5a4a20; color: #d4a020; }
        [data-theme="dark"] .stat-pill { background: #1a2a4e; border-color: #2a3a5e; color: #c0d0f0; }
        [data-theme="dark"] .tip-box { background: #16213e; }
        [data-theme="dark"] img { opacity: 0.9; }