/* ========== RESET & BASE ========== */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: #0f172a;
    color: #e2e8f0;
    min-height: 100vh;
}
a { color: #38bdf8; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ========== NAVBAR ========== */
.navbar {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-bottom: 1px solid #334155;
    padding: 14px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky; top: 0; z-index: 100;
}
.navbar .logo {
    font-size: 22px; font-weight: 700;
    background: linear-gradient(135deg, #38bdf8, #818cf8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.navbar .nav-links { display: flex; gap: 20px; align-items: center; }
.navbar .nav-links a {
    color: #94a3b8; font-size: 13px; font-weight: 500;
    transition: color 0.2s;
}
.navbar .nav-links a:hover { color: #e2e8f0; text-decoration: none; }
.navbar .nav-links a.active { color: #38bdf8; }
.nav-cta {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: white !important; padding: 7px 18px; border-radius: 8px;
    font-size: 12px; font-weight: 600;
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 15px #3b82f640; }
.mobile-menu { display: none; background: none; border: none; color: #e2e8f0; font-size: 24px; cursor: pointer; }
@media (max-width: 768px) {
    .mobile-menu { display: block; }
    .navbar .nav-links {
        display: none; position: absolute; top: 100%; left: 0; right: 0;
        background: #1e293b; flex-direction: column; padding: 16px;
        border-bottom: 1px solid #334155;
    }
    .navbar .nav-links.open { display: flex; }
}

/* ========== FOOTER ========== */
.footer {
    background: #1e293b; border-top: 1px solid #334155;
    padding: 40px 28px 20px; margin-top: 60px;
}
.footer-grid {
    max-width: 1200px; margin: 0 auto;
    display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px;
}
@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-col h4 {
    font-size: 13px; color: #f1f5f9; margin-bottom: 12px;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.footer-col p, .footer-col a {
    font-size: 12px; color: #64748b; line-height: 1.8;
    display: block;
}
.footer-col a:hover { color: #38bdf8; }
.footer-bottom {
    max-width: 1200px; margin: 20px auto 0;
    padding-top: 16px; border-top: 1px solid #334155;
    display: flex; justify-content: space-between; align-items: center;
    font-size: 11px; color: #475569;
}
@media (max-width: 480px) { .footer-bottom { flex-direction: column; gap: 8px; } }

/* ========== HERO ========== */
.hero {
    text-align: center; padding: 80px 20px 60px;
    background: radial-gradient(ellipse at top, #1e293b 0%, #0f172a 70%);
}
.hero h1 {
    font-size: 48px; font-weight: 800; line-height: 1.1; margin-bottom: 16px;
    background: linear-gradient(135deg, #38bdf8, #818cf8, #c084fc);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
@media (max-width: 600px) { .hero h1 { font-size: 32px; } }
.hero .subtitle { font-size: 18px; color: #94a3b8; max-width: 600px; margin: 0 auto 30px; }
.hero .badges { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 30px; }
.badge {
    background: #22c55e15; border: 1px solid #22c55e40;
    padding: 5px 14px; border-radius: 20px;
    font-size: 12px; color: #22c55e;
}
.badge.blue { background: #3b82f615; border-color: #3b82f640; color: #60a5fa; }
.badge.purple { background: #8b5cf615; border-color: #8b5cf640; color: #a78bfa; }
.hero-cta {
    display: inline-block;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: white; padding: 14px 40px; border-radius: 12px;
    font-size: 16px; font-weight: 700; border: none; cursor: pointer;
    transition: all 0.3s;
}
.hero-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 30px #3b82f650; text-decoration: none; color: white; }
.hero-secondary {
    display: inline-block; margin-left: 12px;
    color: #94a3b8; font-size: 14px; padding: 14px 24px;
}
.hero-secondary:hover { color: #e2e8f0; }

/* ========== SECTION COMMON ========== */
.section { max-width: 1200px; margin: 0 auto; padding: 60px 20px; }
.section-header { text-align: center; margin-bottom: 40px; }
.section-header h2 { font-size: 32px; font-weight: 700; margin-bottom: 10px; }
.section-header p { color: #94a3b8; font-size: 15px; }

/* ========== FEATURES GRID ========== */
.features-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
@media (max-width: 768px) { .features-grid { grid-template-columns: 1fr; } }
.feature-card {
    background: #1e293b; border: 1px solid #334155;
    border-radius: 14px; padding: 24px;
    transition: all 0.3s;
}
.feature-card:hover { border-color: #38bdf8; transform: translateY(-3px); }
.feature-icon { font-size: 32px; margin-bottom: 12px; }
.feature-card h3 { font-size: 16px; margin-bottom: 8px; }
.feature-card p { font-size: 13px; color: #94a3b8; line-height: 1.6; }

/* ========== HOW IT WORKS ========== */
.steps-row { display: flex; gap: 20px; justify-content: center; }
@media (max-width: 768px) { .steps-row { flex-direction: column; align-items: center; } }
.step-card {
    background: #1e293b; border: 1px solid #334155;
    border-radius: 14px; padding: 30px 20px; text-align: center;
    flex: 1; max-width: 280px;
}
.step-num {
    width: 40px; height: 40px; border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: white; font-weight: 700; font-size: 18px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 14px;
}
.step-card h3 { font-size: 15px; margin-bottom: 8px; }
.step-card p { font-size: 12px; color: #94a3b8; }

/* ========== TESTIMONIALS ========== */
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 768px) { .testimonials-grid { grid-template-columns: 1fr; } }
.testimonial-card {
    background: #1e293b; border: 1px solid #334155;
    border-radius: 14px; padding: 24px;
}
.testimonial-card .stars { color: #fbbf24; font-size: 14px; margin-bottom: 10px; }
.testimonial-card p { font-size: 13px; color: #cbd5e1; line-height: 1.6; margin-bottom: 12px; }
.testimonial-card .author { font-size: 12px; color: #64748b; }

/* ========== FAQ ========== */
.faq-list { max-width: 700px; margin: 0 auto; }
.faq-item {
    background: #1e293b; border: 1px solid #334155;
    border-radius: 10px; margin-bottom: 10px; overflow: hidden;
}
.faq-question {
    padding: 16px 20px; cursor: pointer; font-size: 14px;
    font-weight: 600; display: flex; justify-content: space-between;
    align-items: center; transition: background 0.2s;
}
.faq-question:hover { background: #334155; }
.faq-answer {
    max-height: 0; overflow: hidden; transition: max-height 0.3s ease;
    padding: 0 20px; font-size: 13px; color: #94a3b8; line-height: 1.7;
}
.faq-item.open .faq-answer { max-height: 200px; padding: 0 20px 16px; }
.faq-item.open .faq-arrow { transform: rotate(180deg); }
.faq-arrow { transition: transform 0.3s; }

/* ========== PRICING ========== */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 900px; margin: 0 auto; }
@media (max-width: 768px) { .pricing-grid { grid-template-columns: 1fr; } }
.price-card {
    background: #1e293b; border: 1px solid #334155;
    border-radius: 14px; padding: 30px 24px; text-align: center;
    position: relative;
}
.price-card.popular {
    border-color: #3b82f6;
    box-shadow: 0 0 30px #3b82f620;
}
.price-card.popular::before {
    content: 'MOST POPULAR';
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: white; font-size: 10px; font-weight: 700;
    padding: 4px 14px; border-radius: 10px;
}
.price-card h3 { font-size: 18px; margin-bottom: 6px; }
.price-card .price { font-size: 36px; font-weight: 800; margin: 16px 0 4px; }
.price-card .price span { font-size: 14px; font-weight: 400; color: #64748b; }
.price-card .period { font-size: 12px; color: #64748b; margin-bottom: 20px; }
.price-features { text-align: left; margin-bottom: 24px; }
.price-features li {
    list-style: none; font-size: 13px; padding: 6px 0;
    color: #cbd5e1; display: flex; align-items: center; gap: 8px;
}
.price-features .check { color: #22c55e; }
.price-features .cross { color: #ef4444; }
.price-btn {
    display: block; width: 100%; padding: 12px;
    border: none; border-radius: 10px;
    font-size: 14px; font-weight: 600; cursor: pointer;
    transition: all 0.3s;
}
.price-btn-primary { background: linear-gradient(135deg, #3b82f6, #8b5cf6); color: white; }
.price-btn-outline { background: transparent; border: 1px solid #334155; color: #e2e8f0; }
.price-btn:hover { transform: translateY(-1px); }

/* ========== BLOG ========== */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 768px) { .blog-grid { grid-template-columns: 1fr; } }
.blog-card {
    background: #1e293b; border: 1px solid #334155;
    border-radius: 14px; overflow: hidden; transition: all 0.3s;
}
.blog-card:hover { border-color: #38bdf8; transform: translateY(-3px); }
.blog-thumb {
    height: 160px; background: linear-gradient(135deg, #1e293b, #334155);
    display: flex; align-items: center; justify-content: center;
    font-size: 48px;
}
.blog-body { padding: 20px; }
.blog-body .tag {
    font-size: 10px; text-transform: uppercase; letter-spacing: 1px;
    color: #38bdf8; margin-bottom: 8px;
}
.blog-body h3 { font-size: 16px; margin-bottom: 8px; }
.blog-body p { font-size: 12px; color: #94a3b8; line-height: 1.6; margin-bottom: 12px; }
.blog-body .read-more { font-size: 12px; font-weight: 600; }

/* ========== BLOG ARTICLE ========== */
.article-container { max-width: 760px; margin: 0 auto; padding: 40px 20px; }
.article-container h1 { font-size: 32px; margin-bottom: 12px; }
.article-meta { font-size: 12px; color: #64748b; margin-bottom: 30px; }
.article-container h2 { font-size: 22px; margin: 30px 0 12px; color: #f1f5f9; }
.article-container p { font-size: 15px; color: #cbd5e1; line-height: 1.8; margin-bottom: 16px; }
.article-container ul, .article-container ol { margin: 0 0 16px 24px; }
.article-container li { font-size: 14px; color: #cbd5e1; line-height: 1.8; }
.article-container table { width: 100%; border-collapse: collapse; margin: 20px 0; }
.article-container th, .article-container td {
    padding: 10px 14px; text-align: left;
    border: 1px solid #334155; font-size: 13px;
}
.article-container th { background: #1e293b; color: #f1f5f9; }
.article-container td { color: #cbd5e1; }
.article-cta {
    background: #1e293b; border: 1px solid #3b82f640;
    border-radius: 14px; padding: 30px; text-align: center; margin: 30px 0;
}
.article-cta h3 { margin-bottom: 10px; }
.article-cta p { color: #94a3b8; margin-bottom: 16px; }

/* ========== CONTACT ========== */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; max-width: 900px; margin: 0 auto; }
@media (max-width: 768px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-form {
    background: #1e293b; border: 1px solid #334155;
    border-radius: 14px; padding: 30px;
}
.contact-form .form-group { margin-bottom: 16px; }
.contact-form label { display: block; font-size: 12px; color: #94a3b8; margin-bottom: 4px; }
.contact-form input, .contact-form textarea {
    width: 100%; padding: 10px 12px; background: #0f172a;
    border: 1px solid #334155; border-radius: 8px;
    color: #e2e8f0; font-size: 13px; outline: none;
    font-family: inherit;
}
.contact-form textarea { height: 120px; resize: vertical; }
.contact-form input:focus, .contact-form textarea:focus { border-color: #38bdf8; }
.contact-info {
    background: #1e293b; border: 1px solid #334155;
    border-radius: 14px; padding: 30px;
}
.contact-info h3 { font-size: 16px; margin-bottom: 16px; }
.contact-info-item { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; }
.contact-info-item .icon { font-size: 20px; }
.contact-info-item .text { font-size: 13px; color: #94a3b8; line-height: 1.6; }
.contact-info-item .text strong { color: #e2e8f0; display: block; margin-bottom: 2px; }

/* ========== AD BANNER ========== */
.ad-banner {
    background: #1e293b; border: 1px solid #334155;
    border-radius: 10px; padding: 12px; text-align: center;
    margin: 16px 0; min-height: 90px;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; color: #475569;
}

/* ========== UPGRADE PROMPT ========== */
.upgrade-prompt {
    background: linear-gradient(135deg, #1e293b, #1e1b4b);
    border: 1px solid #4f46e540;
    border-radius: 12px; padding: 20px; text-align: center;
    margin: 16px 0;
}
.upgrade-prompt h3 { font-size: 15px; margin-bottom: 6px; }
.upgrade-prompt p { font-size: 12px; color: #94a3b8; margin-bottom: 12px; }
.upgrade-btn {
    display: inline-block;
    background: linear-gradient(135deg, #f59e0b, #f97316);
    color: white; padding: 8px 24px; border-radius: 8px;
    font-size: 13px; font-weight: 600; border: none; cursor: pointer;
}

/* ========== WATERMARK NOTICE ========== */
.watermark-notice {
    background: #fbbf2410; border: 1px solid #fbbf2430;
    border-radius: 8px; padding: 10px 14px;
    font-size: 12px; color: #fbbf24; text-align: center;
    margin: 10px 0;
}

/* ========== APP-SPECIFIC (from original) ========== */
.app-container {
    max-width: 1400px; margin: 0 auto; padding: 20px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
@media (max-width: 900px) { .app-container { grid-template-columns: 1fr; } }
.card {
    background: #1e293b; border: 1px solid #334155;
    border-radius: 14px; padding: 20px;
}
.card h2 { font-size: 15px; margin-bottom: 14px; color: #f1f5f9; }
.section-title {
    font-size: 11px; color: #64748b; text-transform: uppercase;
    letter-spacing: 1px; margin: 14px 0 8px; padding-top: 10px;
    border-top: 1px solid #334155;
}
.upload-zone {
    border: 2px dashed #475569; border-radius: 12px;
    padding: 32px 20px; text-align: center; cursor: pointer;
    transition: all 0.3s; margin-bottom: 12px;
}
.upload-zone:hover { border-color: #38bdf8; background: #1e293b80; }
.upload-zone.has-image { padding: 10px; border-style: solid; border-color: #22c55e; }
.upload-zone .thumbs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.upload-zone .thumbs img { width: 80px; height: 80px; object-fit: cover; border-radius: 6px; }
.upload-zone .icon { font-size: 36px; margin-bottom: 6px; }
.upload-zone p { color: #94a3b8; font-size: 12px; }
input[type="file"] { display: none; }
.form-group { margin-bottom: 10px; }
.form-group label {
    display: block; font-size: 11px; color: #94a3b8;
    margin-bottom: 3px; font-weight: 500;
}
select, input[type="text"], input[type="number"] {
    width: 100%; padding: 8px 10px; background: #0f172a;
    border: 1px solid #334155; border-radius: 7px;
    color: #e2e8f0; font-size: 13px; outline: none;
}
select:focus, input:focus { border-color: #38bdf8; }
.row { display: flex; gap: 8px; }
.row .form-group { flex: 1; }
.color-options { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.color-btn {
    width: 32px; height: 32px; border-radius: 50%;
    border: 3px solid transparent; cursor: pointer; transition: all 0.2s;
}
.color-btn:hover { transform: scale(1.15); }
.color-btn.active { border-color: #38bdf8; }
.custom-color {
    width: 32px; height: 32px; border-radius: 50%;
    border: 2px dashed #475569; cursor: pointer;
    overflow: hidden; position: relative;
}
.custom-color input {
    position: absolute; top: -10px; left: -10px;
    width: 55px; height: 55px; cursor: pointer; opacity: 0;
}
.toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; }
.toggle-row label { font-size: 12px; color: #cbd5e1; margin: 0; }
.toggle { position: relative; width: 40px; height: 22px; }
.toggle input { display: none; }
.toggle .slider {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: #334155; border-radius: 22px; cursor: pointer; transition: 0.3s;
}
.toggle .slider:before {
    content: ""; position: absolute; width: 16px; height: 16px;
    left: 3px; bottom: 3px; background: white;
    border-radius: 50%; transition: 0.3s;
}
.toggle input:checked + .slider { background: #3b82f6; }
.toggle input:checked + .slider:before { transform: translateX(18px); }
.slider-group { margin-bottom: 8px; }
.slider-group label {
    display: flex; justify-content: space-between;
    font-size: 11px; color: #94a3b8; margin-bottom: 3px;
}
.slider-group input[type="range"] {
    width: 100%; -webkit-appearance: none; height: 5px;
    background: #334155; border-radius: 3px; outline: none;
}
.slider-group input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; width: 14px; height: 14px;
    border-radius: 50%; background: #3b82f6; cursor: pointer;
}
.copies-input { display: flex; align-items: center; gap: 6px; }
.copies-btn {
    width: 30px; height: 30px; border-radius: 7px;
    border: 1px solid #334155; background: #0f172a;
    color: #e2e8f0; font-size: 16px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.copies-btn:hover { border-color: #38bdf8; }
.copies-value { width: 40px; text-align: center; font-size: 15px; font-weight: 600; color: #38bdf8; }
.crop-controls { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.crop-controls .form-group { flex: 1; min-width: 60px; }
.rotate-btns { display: flex; gap: 6px; margin-bottom: 8px; }
.rotate-btn {
    padding: 6px 14px; border-radius: 7px; border: 1px solid #334155;
    background: #0f172a; color: #e2e8f0; font-size: 12px; cursor: pointer;
}
.rotate-btn:hover { border-color: #38bdf8; }
.rotate-btn.active { border-color: #3b82f6; background: #3b82f620; color: #3b82f6; }
.btn {
    width: 100%; padding: 12px; border: none; border-radius: 10px;
    font-size: 14px; font-weight: 600; cursor: pointer;
    transition: all 0.3s; margin-top: 10px;
}
.btn-primary { background: linear-gradient(135deg, #3b82f6, #8b5cf6); color: white; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 20px #3b82f640; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-sm {
    padding: 8px 14px; font-size: 12px; border-radius: 7px;
    border: none; cursor: pointer; font-weight: 600;
    transition: all 0.2s; display: inline-flex; align-items: center;
    gap: 5px; text-decoration: none;
}
.btn-green { background: linear-gradient(135deg, #22c55e, #16a34a); color: white; }
.btn-blue { background: linear-gradient(135deg, #3b82f6, #2563eb); color: white; }
.btn-purple { background: linear-gradient(135deg, #8b5cf6, #7c3aed); color: white; }
.btn-orange { background: linear-gradient(135deg, #f97316, #ea580c); color: white; }
.btn-sm:hover { transform: translateY(-1px); }
.loading { display: none; text-align: center; padding: 30px; }
.loading.show { display: block; }
.spinner {
    width: 44px; height: 44px; border: 4px solid #334155;
    border-top-color: #38bdf8; border-radius: 50%;
    animation: spin 0.8s linear infinite; margin: 0 auto 12px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading p { color: #94a3b8; font-size: 13px; }
.result-section { display: none; }
.result-section.show { display: block; }
.stats { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.stat {
    flex: 1; min-width: 70px; background: #0f172a;
    border: 1px solid #334155; border-radius: 8px;
    padding: 8px; text-align: center;
}
.stat .value { font-size: 16px; font-weight: 700; color: #38bdf8; }
.stat .label { font-size: 9px; color: #64748b; margin-top: 2px; }
.result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.result-item {
    background: #0f172a; border: 1px solid #334155;
    border-radius: 10px; padding: 10px; text-align: center;
}
.result-item img { max-width: 100%; max-height: 200px; border-radius: 5px; margin-bottom: 6px; }
.result-item p { font-size: 10px; color: #94a3b8; margin-bottom: 6px; }
.download-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.app-steps { display: flex; gap: 5px; margin-bottom: 12px; flex-wrap: wrap; }
.app-step {
    flex: 1; min-width: 55px; background: #0f172a;
    border: 1px solid #334155; border-radius: 7px;
    padding: 6px 4px; text-align: center; font-size: 9px; color: #64748b;
    transition: all 0.3s;
}
.app-step.active { border-color: #38bdf8; color: #38bdf8; background: #38bdf810; }
.app-step.done { border-color: #22c55e; color: #22c55e; background: #22c55e10; }
.app-step .num { font-size: 13px; font-weight: 700; }
.custom-size-inputs { display: none; margin-top: 6px; }
.custom-size-inputs.show { display: flex; gap: 8px; }
.ba-container {
    display: none; margin-top: 12px;
    background: #0f172a; border: 1px solid #334155;
    border-radius: 10px; padding: 12px;
}
.ba-container.show { display: block; }
.ba-container h3 { font-size: 13px; color: #94a3b8; margin-bottom: 10px; text-align: center; }
.ba-slider-wrap {
    position: relative; width: 100%; max-width: 400px;
    margin: 0 auto; overflow: hidden; border-radius: 8px;
    user-select: none; aspect-ratio: 1;
}
.ba-slider-wrap img {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%; object-fit: cover;
}
.ba-after { clip-path: inset(0 0 0 50%); }
.ba-line {
    position: absolute; top: 0; bottom: 0; left: 50%;
    width: 3px; background: white; z-index: 10;
    transform: translateX(-50%);
}
.ba-handle {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 36px; height: 36px; background: white;
    border-radius: 50%; z-index: 11; cursor: ew-resize;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    font-size: 14px; color: #333;
}
.ba-labels {
    display: flex; justify-content: space-between;
    font-size: 10px; color: #64748b; margin-top: 6px;
}
.ba-nav { display: flex; gap: 6px; justify-content: center; margin-top: 8px; }
.ba-nav-btn {
    padding: 4px 12px; border-radius: 6px; border: 1px solid #334155;
    background: #1e293b; color: #94a3b8; font-size: 11px; cursor: pointer;
}
.ba-nav-btn.active { border-color: #3b82f6; color: #3b82f6; }
.toast {
    position: fixed; bottom: 20px; right: 20px;
    background: #22c55e; color: white; padding: 10px 18px;
    border-radius: 8px; font-size: 13px; font-weight: 500;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    transform: translateY(80px); opacity: 0;
    transition: all 0.3s; z-index: 1000;
}
.toast.show { transform: translateY(0); opacity: 1; }
.multi-badge {
    display: inline-block; background: #8b5cf620;
    border: 1px solid #8b5cf640; color: #a78bfa;
    padding: 2px 8px; border-radius: 10px; font-size: 10px;
    margin-left: 6px;
}
/* ========== AD SLOTS ========== */
.ad-slot {
    background: #1e293b; border: 1px solid #334155;
    border-radius: 10px; overflow: hidden; min-height: 90px;
}
.ad-slot ins { background: transparent; }

/* ========== INTERSTITIAL AD OVERLAY ========== */
.interstitial-overlay {
    display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.85); z-index: 9999;
    justify-content: center; align-items: center;
}
.interstitial-overlay.show { display: flex; }
.interstitial-box {
    background: #1e293b; border: 1px solid #334155;
    border-radius: 16px; max-width: 550px; width: 90%;
    overflow: hidden; animation: interstitialIn 0.3s ease;
}
@keyframes interstitialIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.interstitial-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 20px; border-bottom: 1px solid #334155;
}
.interstitial-label {
    font-size: 13px; color: #94a3b8; font-weight: 500;
}
.interstitial-countdown {
    width: 36px; height: 36px; border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: white; font-size: 16px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.interstitial-ad {
    padding: 16px; min-height: 280px;
    display: flex; align-items: center; justify-content: center;
}
.interstitial-progress-bar {
    height: 4px; background: #0f172a; margin: 0 16px;
}
.interstitial-progress-fill {
    height: 100%; width: 0%; border-radius: 2px;
    background: linear-gradient(90deg, #3b82f6, #22c55e);
    transition: width 0.1s linear;
}
.interstitial-skip {
    display: block; width: calc(100% - 32px); margin: 12px 16px 16px;
    padding: 12px; border: none; border-radius: 10px;
    font-size: 14px; font-weight: 600; cursor: pointer;
    background: #334155; color: #64748b;
    transition: all 0.3s;
}
.interstitial-skip.ready {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white; cursor: pointer;
}
.interstitial-skip.ready:hover {
    transform: translateY(-1px); box-shadow: 0 4px 15px #22c55e40;
}

/* ── Eraser Tool ── */
.eraser-overlay {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85); z-index: 2000;
    justify-content: center; align-items: center;
    touch-action: none; overscroll-behavior: none;
}
.eraser-overlay.show { display: flex; }
.eraser-box {
    background: #1e293b; border-radius: 16px; width: 95%; max-width: 720px;
    max-height: 95vh; display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.eraser-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; border-bottom: 1px solid #334155; flex-wrap: wrap; gap: 8px;
}
.eraser-title { font-weight: 700; font-size: 15px; color: #f1f5f9; }
.eraser-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.eraser-label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #94a3b8; }
.eraser-label input[type="range"] { width: 80px; accent-color: #38bdf8; }
#brushSizeLabel { font-size: 11px; color: #38bdf8; min-width: 28px; }
.eraser-canvas-wrap {
    position: relative; flex: 1; overflow: auto; display: flex;
    justify-content: center; align-items: center; padding: 12px;
    background-image:
        linear-gradient(45deg, #334155 25%, transparent 25%),
        linear-gradient(-45deg, #334155 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #334155 75%),
        linear-gradient(-45deg, transparent 75%, #334155 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    background-color: #1e293b;
    touch-action: none;
}
#eraserCanvas {
    max-width: 100%; max-height: 70vh; cursor: none;
    border-radius: 4px; display: block;
    touch-action: none;
}
.eraser-brush-cursor {
    position: fixed; border: 2px solid rgba(255,255,255,0.8);
    border-radius: 50%; pointer-events: none; z-index: 2001;
    transform: translate(-50%, -50%); display: none;
}
.eraser-overlay.show .eraser-brush-cursor { display: block; }
.eraser-actions {
    display: flex; justify-content: space-between; padding: 12px 16px;
    border-top: 1px solid #334155;
}
.btn-orange { background: linear-gradient(135deg, #f97316, #ea580c) !important; color: white !important; }
.btn-orange:hover { box-shadow: 0 4px 15px #f9731640; }