/* ══ Theme ══ */
.ytg-page {
    background: linear-gradient(135deg, #ff0000 0%, #b91c1c 50%, #7f1d1d 100%);
    min-height: 65vh;
    padding: 28px 8px 60px;
    position: relative;
    overflow: hidden;
}
.ytg-page::before {
    content:''; position:absolute; inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size:40px 40px; pointer-events:none;
}
.ytg-page::after {
    content:''; position:absolute;
    bottom:-2px; left:0; right:0; height:60px;
    background:#f8fafc;
    clip-path: ellipse(55% 100% at 50% 100%);
}

/* ══ Input card ══ */
.ytg-input-card {
    background:#fff;
    border-radius:20px;
    box-shadow:0 16px 48px rgba(0,0,0,0.12);
    overflow:hidden;
    max-width:820px;
    margin:0 auto;
    position:relative; z-index:10;
}

/* ══ Field styles ══ */
.ytg-field {
    width:100%;
    padding:13px 16px;
    border-radius:12px;
    border:1.5px solid #e2e8f0;
    background:#f8fafc;
    font-size:14px;
    color:#1e293b;
    outline:none;
    transition:border-color .2s, box-shadow .2s, background .2s;
    font-family:inherit;
}
.ytg-field:focus {
    border-color:#ff0000;
    box-shadow:0 0 0 3px rgba(255,0,0,0.1);
    background:#fff;
}
.ytg-label {
    display:block;
    font-size:11px; font-weight:700;
    text-transform:uppercase; letter-spacing:.07em;
    color:#64748b; margin-bottom:6px;
}
.ytg-select {
    width:100%;
    padding:11px 14px;
    border-radius:12px;
    border:1.5px solid #e2e8f0;
    background:#f8fafc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 12px center;
    font-size:13px; font-weight:500; color:#1e293b;
    outline:none; cursor:pointer; appearance:none;
    padding-right:36px;
    transition:border-color .2s;
    font-family:inherit;
}
.ytg-select:focus { border-color:#ff0000; }

/* ══ Generate button ══ */
.ytg-btn {
    width:100%; padding:14px;
    background:linear-gradient(135deg,#ff0000,#dc2626);
    color:#fff; font-weight:800; font-size:15px;
    border-radius:12px; border:none; cursor:pointer;
    transition:all .2s; display:flex;
    align-items:center; justify-content:center; gap:8px;
    font-family:inherit;
    box-shadow:0 4px 16px rgba(255,0,0,0.3);
}
.ytg-btn:hover  { background:linear-gradient(135deg,#dc2626,#b91c1c); transform:translateY(-1px); box-shadow:0 8px 24px rgba(255,0,0,0.35); }
.ytg-btn:active { transform:translateY(0); }
.ytg-btn:disabled { background:#94a3b8; cursor:not-allowed; transform:none; box-shadow:none; }
.ytg-btn .spin { width:15px;height:15px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite;display:none; }
@keyframes spin{to{transform:rotate(360deg)}}

/* ══ Tags output area ══ */
.ytg-results {
    max-width:820px; margin:0 auto;
    position:relative; z-index:10;
    display:none;
}
.ytg-results.show { display:block; animation:fadeUp .4s ease; }
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

/* ══ Tags output card ══ */
.ytg-output-card {
    background:#fff;
    border-radius:20px;
    box-shadow:0 8px 32px rgba(0,0,0,0.08);
    overflow:hidden;
}

/* ══ Tag pills ══ */
.tag-pill {
    display:inline-flex; align-items:center; gap:5px;
    padding:6px 12px; border-radius:8px;
    font-size:13px; font-weight:600;
    cursor:pointer; transition:all .15s;
    border:1.5px solid transparent;
    user-select:none;
}
.tag-pill:hover { transform:translateY(-1px); }
.tag-pill.selected { border-color:currentColor; }

.tag-pill.broad  { background:#fef2f2; color:#dc2626; }
.tag-pill.medium { background:#eff6ff; color:#1d4ed8; }
.tag-pill.long   { background:#f0fdf4; color:#16a34a; }
.tag-pill.broad.selected  { background:#dc2626; color:#fff; border-color:#dc2626; }
.tag-pill.medium.selected { background:#1d4ed8; color:#fff; border-color:#1d4ed8; }
.tag-pill.long.selected   { background:#16a34a; color:#fff; border-color:#16a34a; }

.tag-pill .tag-x { font-size:11px; opacity:.7; }
.tag-pill:hover .tag-x { opacity:1; }

/* ══ Char counter bar ══ */
.char-bar-wrap { background:#f1f5f9; border-radius:999px; height:8px; overflow:hidden; }
.char-bar { height:100%; border-radius:999px; transition:width .4s ease, background .3s; }

/* ══ Copy buttons ══ */
.copy-btn {
    display:inline-flex; align-items:center; gap:6px;
    padding:9px 18px; border-radius:10px;
    font-size:13px; font-weight:700;
    border:1.5px solid #e2e8f0;
    background:#f8fafc; color:#374151;
    cursor:pointer; transition:all .15s;
    font-family:inherit;
}
.copy-btn:hover { background:#ff0000; color:#fff; border-color:#ff0000; }
.copy-btn.success { background:#16a34a; color:#fff; border-color:#16a34a; }

/* ══ Category legend ══ */
.legend-dot { width:10px; height:10px; border-radius:3px; flex-shrink:0; }

/* ══ Trending topics ══ */
.trend-chip {
    display:inline-flex; align-items:center; gap:5px;
    padding:6px 13px; border-radius:999px;
    font-size:12px; font-weight:600;
    background:rgba(255,255,255,0.12);
    border:1px solid rgba(255,255,255,0.2);
    color:rgba(255,255,255,0.8);
    cursor:pointer; transition:all .15s;
}
.trend-chip:hover { background:rgba(255,255,255,0.22); color:#fff; }

/* ══ Textarea for raw copy ══ */
.tag-textarea {
    width:100%; resize:none; border:none; outline:none;
    background:#f8fafc; border-radius:10px;
    padding:12px 14px; font-size:13px;
    font-family:'Courier New',monospace;
    color:#374151; line-height:1.6;
    border:1.5px solid #e2e8f0;
}

/* ══ SEO score badge ══ */
.seo-score {
    display:flex; align-items:center; justify-content:center;
    width:64px; height:64px; border-radius:50%;
    font-size:22px; font-weight:900;
    flex-shrink:0;
}