:root{--primary:#6366f1;--secondary:#8b5cf6;--accent-pink:#e91e63;--bg:#f8fafc;--card:rgba(255,255,255,0.92);--card-strong:rgba(255,255,255,0.98);--card-soft:rgba(248,250,252,0.95);--text:#0f172a;--dim:#64748b;--border:rgba(15,23,42,0.10);--border-strong:rgba(15,23,42,0.16);--shadow-sm:0 6px 18px rgba(15,23,42,0.05);--shadow-md:0 14px 34px rgba(15,23,42,0.08);--shadow-lg:0 26px 60px rgba(15,23,42,0.14);--radius-sm:12px;--radius-md:16px;--radius-lg:22px;--radius-xl:32px;--header-h:82px}

[data-theme="dark"]{--primary:#818cf8;--secondary:#a78bfa;--accent-pink:#f472b6;--bg:#0b1120;--card:rgba(30,41,59,0.80);--card-strong:rgba(17,24,39,0.96);--card-soft:rgba(15,23,42,0.84);--text:#e5e7eb;--dim:#94a3b8;--border:rgba(255,255,255,0.12);--border-strong:rgba(255,255,255,0.18);--shadow-sm:0 6px 16px rgba(0,0,0,0.22);--shadow-md:0 16px 36px rgba(0,0,0,0.28);--shadow-lg:0 28px 64px rgba(0,0,0,0.34)}

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

html{scroll-behavior:smooth;overflow-x:hidden}

body{background:radial-gradient(circle at top left,rgba(99,102,241,0.10),transparent 32%),radial-gradient(circle at bottom right,rgba(139,92,246,0.08),transparent 30%),var(--bg);color:var(--text);min-height:100vh;transition:background 0.28s ease,color 0.28s ease;overflow-x:hidden;overflow-y:auto;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;padding-top:0}

input[type="file"]{display:none}

/* ===== PREMIUM MODAL (signup popup) ===== */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.60);backdrop-filter:blur(5px);z-index:9999;justify-content:center;align-items:center;padding:18px}

.premium-box{background:#ffffff !important;color:#1e293b !important;width:95% !important;max-width:500px !important;padding:40px !important;border-radius:28px !important;text-align:center !important;border:2px solid #6366f1 !important;box-shadow:var(--shadow-lg) !important;position:relative}

[data-theme="dark"] .premium-box{background:#111827 !important;border-color:#8b5cf6 !important;color:#e5e7eb !important}

.premium-box h2{letter-spacing:-0.03em}

.premium-title{display:block !important;font-size:1.25rem !important;font-weight:800 !important;color:#6366f1 !important;margin-bottom:10px !important}

.premium-subtitle{display:block !important;font-size:0.95rem !important;color:#64748b !important;margin-bottom:25px !important}

[data-theme="dark"] .premium-title{color:#a5b4fc !important}

[data-theme="dark"] .premium-subtitle{color:#94a3b8 !important}

[data-theme="dark"] .premium-box h2,[data-theme="dark"] .premium-box p,[data-theme="dark"] .premium-box label{color:#ffffff !important}

.social-auth{display:flex;gap:10px;margin-bottom:20px;margin-top:15px}

.auth-btn{flex:1;padding:12px;border:1px solid rgba(15,23,42,0.10);border-radius:10px;cursor:pointer;background:var(--card-soft);color:var(--text);font-size:0.85rem;font-weight:600;box-shadow:var(--shadow-sm);transition:transform 0.22s ease,background 0.22s ease,border-color 0.22s ease,box-shadow 0.22s ease}

.auth-btn:hover{background:#eef2ff;border-color:#c7d2fe;transform:translateY(-1px);box-shadow:var(--shadow-md)}

[data-theme="dark"] .auth-btn:hover{background:rgba(129,140,248,0.12);border-color:rgba(165,180,252,0.45)}

.input-group{border:1px solid var(--border);margin-bottom:10px;border-radius:10px;padding:5px;background:var(--card-soft);box-shadow:var(--shadow-sm);transition:border-color 0.22s ease,box-shadow 0.22s ease,transform 0.22s ease}

.input-group:focus-within{border-color:var(--primary);box-shadow:0 0 0 4px rgba(99,102,241,0.10)}

.input-group input{border:none;width:100%;padding:10px;outline:none;background:transparent;color:var(--text)}

.input-group input::placeholder{color:#64748b;opacity:1}

.signup-btn{width:100%;padding:14px;background:var(--accent-pink);color:white;border:none;border-radius:8px;font-weight:bold;cursor:pointer;margin-top:10px;box-shadow:0 12px 24px rgba(233,30,99,0.20);transition:transform 0.22s ease,box-shadow 0.22s ease,filter 0.22s ease}

.signup-btn:hover{transform:translateY(-1px);box-shadow:0 16px 28px rgba(233,30,99,0.24);filter:brightness(1.03)}

.close-modal{position:absolute;top:15px;right:20px;font-size:28px;border:none;background:none;cursor:pointer;color:var(--dim);line-height:1}

@media (max-width:768px){
  .social-auth{flex-direction:column}
  .premium-box{padding:28px 18px !important;border-radius:24px !important}
  .signup-btn,.auth-btn{min-height:44px}
}

/* ===== BREADCRUMB ===== */
.breadcrumb{display:flex;align-items:center;gap:6px;padding:10px 0 0 0;margin:80px auto 0;max-width:640px;flex-wrap:wrap}

.breadcrumb a{font-family:'DM Sans','Inter',sans-serif;font-size:0.74rem;font-weight:500;color:var(--dim,#64748b);text-decoration:none;transition:color 0.18s ease}

.breadcrumb a:hover{color:var(--primary,#6366f1)}

.breadcrumb-sep{font-size:0.68rem;color:var(--dim,#64748b);opacity:0.5;user-select:none}

.breadcrumb-current{font-family:'DM Sans','Inter',sans-serif;font-size:0.74rem;font-weight:600;color:var(--primary,#6366f1)}

body.tool-page{padding-top:90px}

/* ===== SEO SECTION (How to Use, Why Choose Us, Formats, Tips, FAQ) ===== */
.seo-section{width:100%;max-width:1200px;margin:56px auto 0;padding:0 20px;display:flex;gap:24px;align-items:flex-start}

.seo-ad-left,.seo-ad-right{width:160px;min-width:160px;min-height:600px;background:transparent;flex-shrink:0;position:sticky;top:100px}

.seo-center{flex:1;min-width:0;display:flex;flex-direction:column;gap:32px}

.seo-hero{background:linear-gradient(135deg,rgba(99,102,241,0.08) 0%,rgba(139,92,246,0.06) 50%,rgba(236,72,153,0.05) 100%);border:1px solid rgba(99,102,241,0.15);border-radius:var(--radius-xl);padding:36px 32px;position:relative;overflow:hidden}

.seo-hero::before{content:"";position:absolute;top:-40px;right:-40px;width:180px;height:180px;background:radial-gradient(circle,rgba(99,102,241,0.12),transparent 70%);pointer-events:none}

.seo-hero::after{content:"";position:absolute;bottom:-30px;left:-30px;width:140px;height:140px;background:radial-gradient(circle,rgba(139,92,246,0.10),transparent 70%);pointer-events:none}

.seo-hero-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(99,102,241,0.10);border:1px solid rgba(99,102,241,0.20);border-radius:999px;padding:4px 12px;font-size:0.70rem;font-weight:700;color:var(--primary);letter-spacing:0.04em;text-transform:uppercase;margin-bottom:14px}

.seo-hero h2{font-size:1.45rem;font-weight:800;color:var(--text);letter-spacing:-0.03em;line-height:1.2;margin-bottom:10px}

.seo-hero p{font-size:0.88rem;color:var(--dim);line-height:1.75;max-width:580px}

.seo-steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}

.seo-step-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-md);padding:18px 16px;text-align:center;box-shadow:var(--shadow-sm);transition:transform 0.22s ease,box-shadow 0.22s ease,border-color 0.22s ease}

.seo-step-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:rgba(99,102,241,0.25)}

.seo-step-num{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;font-size:0.78rem;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto 10px}

.seo-step-card h3{font-size:0.78rem;font-weight:800;color:var(--text);margin-bottom:5px;line-height:1.3}

.seo-step-card p{font-size:0.72rem;color:var(--dim);line-height:1.55;margin:0}

.seo-why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}

.seo-why-card{border-radius:var(--radius-md);padding:20px 18px;border:1px solid transparent;transition:transform 0.22s ease,box-shadow 0.22s ease}

.seo-why-card:nth-child(1){background:linear-gradient(145deg,#eff6ff,#dbeafe);border-color:#bfdbfe}
.seo-why-card:nth-child(2){background:linear-gradient(145deg,#fdf4ff,#ede9fe);border-color:#ddd6fe}
.seo-why-card:nth-child(3){background:linear-gradient(145deg,#fff7ed,#ffedd5);border-color:#fed7aa}
.seo-why-card:nth-child(4){background:linear-gradient(145deg,#f0fdf4,#dcfce7);border-color:#bbf7d0}
.seo-why-card:nth-child(5){background:linear-gradient(145deg,#fef9c3,#fef3c7);border-color:#fde68a}
.seo-why-card:nth-child(6){background:linear-gradient(145deg,#fff1f2,#ffe4e6);border-color:#fecdd3}

[data-theme="dark"] .seo-why-card:nth-child(1){background:linear-gradient(145deg,rgba(59,130,246,0.12),rgba(37,99,235,0.08));border-color:rgba(96,165,250,0.25)}
[data-theme="dark"] .seo-why-card:nth-child(2){background:linear-gradient(145deg,rgba(139,92,246,0.12),rgba(109,40,217,0.08));border-color:rgba(167,139,250,0.25)}
[data-theme="dark"] .seo-why-card:nth-child(3){background:linear-gradient(145deg,rgba(249,115,22,0.12),rgba(234,88,12,0.08));border-color:rgba(251,146,60,0.25)}
[data-theme="dark"] .seo-why-card:nth-child(4){background:linear-gradient(145deg,rgba(34,197,94,0.12),rgba(22,163,74,0.08));border-color:rgba(74,222,128,0.25)}
[data-theme="dark"] .seo-why-card:nth-child(5){background:linear-gradient(145deg,rgba(234,179,8,0.12),rgba(202,138,4,0.08));border-color:rgba(250,204,21,0.25)}
[data-theme="dark"] .seo-why-card:nth-child(6){background:linear-gradient(145deg,rgba(239,68,68,0.12),rgba(220,38,38,0.08));border-color:rgba(252,165,165,0.25)}

.seo-why-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}

.seo-why-icon{font-size:1.5rem;margin-bottom:10px;display:block}

.seo-why-card h3{font-size:0.82rem;font-weight:800;color:#0f172a;margin-bottom:5px}

[data-theme="dark"] .seo-why-card h3{color:#f1f5f9}

.seo-why-card p{font-size:0.75rem;color:#475569;line-height:1.6;margin:0}

[data-theme="dark"] .seo-why-card p{color:#94a3b8}

.seo-formats,.seo-faq-section{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow-sm)}

.seo-tips{background:linear-gradient(135deg,rgba(99,102,241,0.06),rgba(139,92,246,0.04));border:1px solid rgba(99,102,241,0.14);border-radius:var(--radius-lg);padding:28px}

.seo-formats-header,.seo-tips-header,.seo-faq-header{display:flex;align-items:center;gap:10px;margin-bottom:18px}

.seo-formats-icon,.seo-tips-icon,.seo-faq-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}

.seo-formats-icon{background:linear-gradient(135deg,#10b981,#059669)}
.seo-tips-icon{background:linear-gradient(135deg,#f59e0b,#d97706)}
.seo-faq-icon{background:linear-gradient(135deg,var(--accent-pink),#db2777)}

.seo-formats-header h2,.seo-tips-header h2,.seo-faq-header h2{font-size:1.05rem;font-weight:800;color:var(--text);letter-spacing:-0.02em;margin:0}

.seo-formats-header p,.seo-tips-header p{font-size:0.78rem;color:var(--dim);margin:2px 0 0}

.seo-format-pills{display:flex;flex-wrap:wrap;gap:10px}

.seo-pill{display:inline-flex;align-items:center;gap:7px;background:var(--card-soft);border:1px solid var(--border);border-radius:999px;padding:7px 14px;font-size:0.78rem;font-weight:600;color:var(--text);transition:transform 0.18s ease,box-shadow 0.18s ease,border-color 0.18s ease}

.seo-pill:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm);border-color:var(--primary)}

.seo-pill-dot{width:7px;height:7px;border-radius:50%;background:var(--primary);flex-shrink:0}

.seo-tips-list{display:flex;flex-direction:column;gap:10px}

.seo-tip-item{display:flex;align-items:flex-start;gap:10px;padding:11px 14px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);transition:transform 0.18s ease,box-shadow 0.18s ease}

.seo-tip-item:hover{transform:translateX(3px);box-shadow:var(--shadow-sm)}

.seo-tip-badge{font-size:0.62rem;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--primary),var(--secondary));border-radius:6px;padding:2px 7px;flex-shrink:0;margin-top:1px;letter-spacing:0.04em;text-transform:uppercase}

.seo-tip-item p{font-size:0.80rem;color:var(--dim);line-height:1.6;margin:0}

.seo-faq-list{display:flex;flex-direction:column;gap:10px}

.seo-faq-item{border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;transition:border-color 0.2s ease,box-shadow 0.2s ease}

.seo-faq-item:hover{border-color:rgba(99,102,241,0.30);box-shadow:var(--shadow-sm)}

.seo-faq-q{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;cursor:pointer;background:var(--card-soft);user-select:none;gap:10px}

.seo-faq-q-text{font-size:0.83rem;font-weight:700;color:var(--text);line-height:1.4}

.seo-faq-chevron{font-size:0.70rem;color:var(--dim);transition:transform 0.22s ease;flex-shrink:0}

.seo-faq-item.open .seo-faq-chevron{transform:rotate(180deg)}

.seo-faq-a{display:none;padding:12px 16px 14px;background:var(--card);border-top:1px solid var(--border)}

.seo-faq-item.open .seo-faq-a{display:block}

.seo-faq-a p{font-size:0.80rem;color:var(--dim);line-height:1.70;margin:0}

@media(max-width:1100px){
  .seo-ad-left,.seo-ad-right{display:none}
  .seo-steps-grid{grid-template-columns:repeat(2,1fr)}
  .seo-why-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:640px){
  .seo-section{padding:0 14px;margin-top:36px}
  .seo-hero{padding:24px 20px}
  .seo-hero h2{font-size:1.15rem}
  .seo-steps-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .seo-why-grid{grid-template-columns:1fr 1fr;gap:10px}
  .seo-formats,.seo-tips,.seo-faq-section{padding:20px 16px}
}

.seo-section{margin-bottom:60px !important}