/**
 * TextCraft Tools — Widget Stylesheet
 *
 * Design tokens, layout, and component styles for all 39+ Elementor widgets.
 * Uses CSS custom properties so each widget instance can be recoloured
 * via Elementor's style panel without touching this file.
 *
 * @package TextCraft_Tools
 * @version 1.0.0
 */

/* ── Google Fonts import ─────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Inter:wght@300;400;500;600;700;800&family=Lexend:wght@100..900&display=swap');

/* ── Design tokens — Luxury Black & Gold ────────────────────────────────── */
:root {
    --tc-bg:            #050505;
    --tc-bg-soft:       #0b0906;
    --tc-bg-card:       #11100d;
    --tc-bg-panel:      #17130c;

    --tc-surface:       #090909;
    --tc-surface-2:     #0d0b08;
    --tc-surface-3:     #111111;

    --tc-accent:        #d4a24c;
    --tc-accent-2:      #b8860b;
    --tc-accent-3:      #c9973f;

    --tc-gold:          #f59e0b;
    --tc-gold-light:    #ffcc66;
    --tc-gold-dark:     #b8860b;
    --tc-gold-bright:   #f59e0b;
    --tc-gold-glow:     rgba(245, 158, 11, 0.20);

    --tc-glow:          rgba(245, 158, 11, 0.20);
    --tc-glow-soft:     rgba(212, 162, 76, 0.16);

    --tc-border:        rgba(212, 162, 76, 0.30);
    --tc-border-soft:   rgba(245, 158, 11, 0.18);
    --tc-border-hover:  rgba(255, 204, 102, 0.55);

    --tc-text:          #f5f0e8;
    --tc-text-soft:     #e8dcc8;
    --tc-text-primary:  #ffffff;
    --tc-text-secondary:#d8c8aa;
    --tc-text-muted:    #a8997d;

    --tc-danger:        #b45309;
    --tc-danger-soft:   rgba(180, 83, 9, 0.16);

    --tc-shadow:        0 8px 32px rgba(0, 0, 0, 0.70);
    --tc-shadow-gold:   0 20px 60px rgba(245, 158, 11, 0.14);
    --tc-transition:    0.3s cubic-bezier(0.4, 0, 0.2, 1);

    --tc-font-display:  'Playfair Display', Georgia, 'Times New Roman', serif;
    --tc-font-body:     'Lexend', sans-serif;
    --tc-font-mono:     'DM Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    --tc-font-lexend:   'Lexend', sans-serif;

    --tc-radius-sm:     8px;
    --tc-radius-md:     14px;
    --tc-radius-lg:     20px;
}



body{
    background:
        radial-gradient(circle at top center, rgba(245, 158, 11, 0.16), transparent 34%),
        radial-gradient(circle at 18% 18%, rgba(212, 162, 76, 0.10), transparent 30%),
        radial-gradient(circle at 82% 12%, rgba(184, 134, 11, 0.08), transparent 28%),
        linear-gradient(180deg, #050505 0%, #0b0906 45%, #050505 100%);
    font-family: var(--tc-font-body);
    position: relative;
    min-height: 100vh;
    font-weight: 300;
}

body::before {
    content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(circle at 50% -10%, rgba(245,158,11,0.08), transparent 45%),
        radial-gradient(circle at 20% 30%, rgba(212,162,76,0.03), transparent 30%),
        radial-gradient(circle at 80% 60%, rgba(212,162,76,0.02), transparent 35%),
        radial-gradient(circle at 50% 90%, rgba(245,158,11,0.03), transparent 30%);
}

/* ── Widget wrapper ──────────────────────────────────────────────────────── */
.tc-widget-wrap {
    font-family: var(--tc-font-body);
    color: var(--tc-text-primary);
    line-height: 1.7;
    font-size: 15px;
}

/* ── Premium tool wrapper for luxury sections ──────────────────────────── */
.tc-premium-wrap { position: relative; z-index: 1; }
.tc-premium-wrap::before {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 90% 50% at 50% -20%, rgba(245,158,11,0.08), transparent 60%),
        radial-gradient(ellipse 60% 40% at 20% 50%, rgba(212,162,76,0.04), transparent 50%);
    pointer-events: none; z-index: -1;
}

/* ── Hero section ────────────────────────────────────────────────────────── */
.tc-hero {
    padding: 56px 0 32px;
    text-align: center;
}

.tc-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--tc-surface-2);
    border: 1px solid var(--tc-border);
    border-radius: 99px;
    padding: 5px 14px 5px 10px;
    font-size: 12px;
    font-weight: 500;
    color: var(--tc-text-secondary);
    margin-bottom: 20px;
    letter-spacing: 0.3px;
}

.tc-hero__badge-dot {
    width: 7px;
    height: 7px;
    background: var(--tc-accent-3);
    border-radius: 50%;
    animation: tc-pulse 2s infinite;
    flex-shrink: 0;
}

@keyframes tc-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .5; transform: scale(.8); }
}

.tc-hero__title {
    font-family: var(--tc-font-display);
    font-size: clamp(28px, 5vw, 52px);
    line-height: 1.1;
    letter-spacing: -0.8px;
    margin: 0 0 14px;
    color: var(--tc-text-primary);
}

.tc-hero__subtitle {
    font-size: 16px;
    color: var(--tc-text-secondary);
    max-width: 520px;
    margin: 0 auto;
    font-weight: 300;
}

/* ── Tool section & card ─────────────────────────────────────────────────── */
.tc-tool-section {
    padding: 0 0 64px;
}

.tc-tool-card {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025)),
        #11100d;
    border: 1px solid rgba(212, 162, 76, 0.25);
    border-radius: var(--tc-radius-lg);
    padding: 28px;
    box-shadow: var(--tc-shadow);
    transition: border-color var(--tc-transition), box-shadow var(--tc-transition), transform var(--tc-transition);
    position: relative;
    overflow: hidden;
}

.tc-tool-card::before {
    content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(245,158,11,0.07), transparent);
    transition: left 0.6s ease; pointer-events: none;
}

.tc-tool-card:hover {
    border-color: rgba(255, 204, 102, 0.55);
    box-shadow: 0 24px 70px rgba(245, 158, 11, 0.18);
    transform: translateY(-3px);
}

.tc-tool-card:hover::before { left: 100%; }

/* ── Label row ───────────────────────────────────────────────────────────── */
.tc-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.tc-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--tc-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.tc-char-count {
    font-size: 12px;
    color: var(--tc-text-muted);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

/* ── Textareas ───────────────────────────────────────────────────────────── */
.tc-textarea {
    width: 100%;
    min-height: 160px;
    border-radius: var(--tc-radius-md);
    color: #f5f0e8;
    font-size: 15px;
    line-height: 1.7;
    padding: 14px 16px;
    resize: vertical;
    outline: none;
    transition: border-color var(--tc-transition), box-shadow var(--tc-transition);
    font-family: var(--tc-font-body);
    box-sizing: border-box;
    background: #080706;
    border: 1.5px solid rgba(212, 162, 76, 0.25);
}

.tc-textarea:focus {
    border-color: rgba(255, 204, 102, 0.60);
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.14);
}

.tc-textarea::placeholder,
.tc-cr-chars-input::placeholder {
    color: var(--tc-text-muted);
}

.tc-textarea--output {
    background: #11100d;
    border: 1.5px solid rgba(212, 162, 76, 0.25);
    cursor: default;
}

/* ── Text inputs (single-line) ───────────────────────────────────────────── */
.tc-text-input {
    width: 100%;
    background: #080706 !important;
    border: 1.5px solid rgba(212, 162, 76, 0.25) !important;
    border-radius: var(--tc-radius-sm) !important;
    padding: 10px 12px !important;
    color: #f5f0e8;
    font-size: 14px;
    outline: none;
    transition: border-color var(--tc-transition), box-shadow var(--tc-transition);
    font-family: var(--tc-font-body);
    box-sizing: border-box;
}

.tc-text-input:focus {
    border-color: rgba(255, 204, 102, 0.60);
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.14);
}

select.tc-text-input {
    cursor: pointer;
}

/* ── Case conversion buttons ─────────────────────────────────────────────── */
.tc-case-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
    margin-bottom: 22px;
    margin-top: 4px;
}

.tc-cr-chars-section .tc-cr-presets{
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.tc-btn-case {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 13px 15px;
    background: var(--tc-surface-2);
    border: 1.5px solid var(--tc-border);
    border-radius: var(--tc-radius-md);
    cursor: pointer;
    transition: all var(--tc-transition);
    text-align: left;
    color: var(--tc-text-primary);
    position: relative;
    overflow: hidden;
    font-family: var(--tc-font-lexend);
}

.tc-btn-case::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--tc-accent), var(--tc-gold-light));
    opacity: 0;
    transition: opacity var(--tc-transition);
}

.tc-btn-case:hover {
    background: var(--tc-surface-2);
    background-color: var(--tc-surface-2);
    border-color: var(--tc-accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.12);
}

.tc-btn-case:hover::before { opacity: 0.08; }
.tc-btn-case:active { transform: translateY(0); }

.tc-btn-case.active {
    border-color: var(--tc-accent);
    background: rgba(245, 158, 11, 0.08);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.08);
}

.tc-btn-case__icon   { font-size: 18px; position: relative; z-index: 1; }
.tc-btn-case__label  { font-size: 13px; font-weight: 600; position: relative; z-index: 1; letter-spacing: 0.2px; }
.tc-btn-case__preview { font-size: 11px; color: var(--tc-text-muted); position: relative; z-index: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* ── Active indicator badge ──────────────────────────────────────────────── */
.tc-active-indicator {
    font-size: 13px;
    color: var(--tc-gold-light);
    margin-bottom: 10px;
    padding: 6px 10px;
    background: rgba(245, 158, 11, 0.07);
    border-radius: var(--tc-radius-sm);
    border: 1px solid rgba(212, 162, 76, 0.2);
    display: inline-block;
}

.tc-active-indicator.hidden { display: none; }

/* ── Action button row ───────────────────────────────────────────────────── */
.tc-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    margin-bottom: 4px;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.tc-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: var(--tc-radius-sm);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all var(--tc-transition);
    font-family: var(--tc-font-body);
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

.tc-btn::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
    transform: translateX(-100%);
    transition: transform 0.5s ease;
    pointer-events: none;
}

.tc-btn:hover:not(:disabled)::after { transform: translateX(100%); }

.tc-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.tc-btn--primary {
    background: linear-gradient(135deg, #d4a24c 0%, #c9973f 50%, #8a5a08 100%);
    color: #050505;
    border: 1px solid rgba(255, 204, 102, 0.35);
    box-shadow: 0 4px 18px rgba(245, 158, 11, 0.30);
}

.tc-btn--primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #ffcc66 0%, #f59e0b 45%, #b8860b 100%);
    background-color: #f59e0b !important;
    transform: translateY(-2px);
    box-shadow: 0 14px 40px rgba(245, 158, 11, 0.25);
    color: #050505;
}

.tc-btn--ghost {
    background: linear-gradient(135deg, var(--tc-surface-2), var(--tc-surface-3));
    border: 1.5px solid var(--tc-border);
    color: var(--tc-text-secondary);
}

.tc-btn--ghost:hover:not(:disabled) {
    background: rgba(245, 158, 11, 0.08);
    border-color: var(--tc-border-hover);
    color: var(--tc-text-primary);
    box-shadow: var(--tc-shadow-gold);
}

.tc-btn--danger {
    background: var(--tc-danger-soft);
    border: 1.5px solid var(--tc-border);
    color: var(--tc-danger);
}

.tc-btn--danger:hover:not(:disabled) {
    background: rgba(180, 83, 9, 0.22);
    border-color: var(--tc-border-hover);
    box-shadow: 0 4px 14px rgba(180, 83, 9, 0.25);
}

.tc-btn--secondary {
    background: linear-gradient(135deg, var(--tc-surface-3), var(--tc-surface-2));
    border: 1.5px solid var(--tc-border);
    color: var(--tc-text-secondary);
}

.tc-btn--secondary:hover:not(:disabled) {
    background: rgba(245, 158, 11, 0.08);
    border-color: var(--tc-border-hover);
    color: var(--tc-text-primary);
    box-shadow: var(--tc-shadow-gold);
}

/* ── Stat bar ────────────────────────────────────────────────────────────── */
.tc-stat-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 14px 18px;
    background: var(--tc-surface-2);
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius-md);
    margin-top: 16px;
}

.tc-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex: 1;
    min-width: 60px;
}

.tc-stat__label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--tc-text-muted);
}

.tc-stat__value {
    font-size: 20px;
    font-weight: 700;
    color: var(--tc-accent);
    letter-spacing: -0.5px;
    line-height: 1;
}

.tc-stat-sep {
    width: 1px;
    height: 32px;
    background: var(--tc-border);
    flex-shrink: 0;
}

/* ── Options row (checkboxes) ────────────────────────────────────────────── */
.tc-options-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;
    padding: 13px 15px;
    background: var(--tc-surface-2);
    border-radius: var(--tc-radius-md);
    border: 1px solid var(--tc-border);
}

.tc-option {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--tc-text-secondary);
    cursor: pointer;
    user-select: none;
}


/* ── Input row (generic) ─────────────────────────────────────────────────── */
.tc-input-row {
    margin-bottom: 16px;
}

/* ── Toast notification ──────────────────────────────────────────────────── */
.tc-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--tc-surface);
    border: 1px solid var(--tc-border-hover);
    border-radius: var(--tc-radius-md);
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 500;
    color: var(--tc-text-primary);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    z-index: 9999;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.tc-toast--show {
    opacity: 1;
    transform: translateY(0);
}

.tc-toast__icon {
    font-size: 16px;
}

/* ── Frequency table hover ───────────────────────────────────────────────── */
#tc-wf-tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: background 0.15s;
}

#tc-wf-tbody tr:hover {
    background: rgba(245, 158, 11, 0.04);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .tc-tool-card { padding: 18px; }
    .tc-case-buttons { grid-template-columns: 1fr 1fr; }
    .tc-stat-bar { flex-direction: column; align-items: flex-start; }
    .tc-stat-sep { display: none; }
    .tc-hero { padding: 32px 0 20px; }
}

/* ── Focus-visible ───────────────────────────────────────────────────────── */
.tc-btn:focus-visible,
.tc-btn-case:focus-visible,
.tc-textarea:focus-visible,
.tc-text-input:focus-visible,
.tc-option:focus-within {
    outline: 2px solid var(--tc-accent);
    outline-offset: 2px;
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .tc-btn,
    .tc-btn-case,
    .tc-toast,
    .tc-hero__badge-dot {
        transition: none !important;
        animation: none !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   HOME PAGE — tc-home-* scoped classes
   Applied via Elementor container CSS Classes field.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Dust/dot animation layer ─────────────────────── */
.tc-section-has-dust {
    position: relative;
}
.tc-section-has-dust::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1px 1px at 10% 15%, rgba(212,162,76,0.5), transparent),
        radial-gradient(1.5px 1.5px at 25% 45%, rgba(212,162,76,0.4), transparent),
        radial-gradient(1px 1px at 50% 12%, rgba(212,162,76,0.5), transparent),
        radial-gradient(1px 1px at 70% 30%, rgba(255,204,102,0.3), transparent),
        radial-gradient(1.5px 1.5px at 85% 60%, rgba(212,162,76,0.4), transparent),
        radial-gradient(1px 1px at 15% 70%, rgba(255,204,102,0.3), transparent),
        radial-gradient(1.5px 1.5px at 40% 85%, rgba(212,162,76,0.35), transparent),
        radial-gradient(1px 1px at 60% 55%, rgba(212,162,76,0.4), transparent),
        radial-gradient(1px 1px at 90% 20%, rgba(255,204,102,0.3), transparent),
        radial-gradient(1px 1px at 5% 40%, rgba(212,162,76,0.45), transparent),
        radial-gradient(1.5px 1.5px at 30% 65%, rgba(212,162,76,0.35), transparent),
        radial-gradient(1px 1px at 75% 80%, rgba(255,204,102,0.25), transparent),
        radial-gradient(1px 1px at 45% 5%, rgba(212,162,76,0.4), transparent),
        radial-gradient(1px 1px at 95% 45%, rgba(212,162,76,0.3), transparent),
        radial-gradient(1px 1px at 55% 92%, rgba(255,204,102,0.25), transparent),
        radial-gradient(1.5px 1.5px at 80% 10%, rgba(212,162,76,0.35), transparent),
        radial-gradient(1px 1px at 20% 25%, rgba(212,162,76,0.4), transparent),
        radial-gradient(1px 1px at 35% 50%, rgba(255,204,102,0.3), transparent),
        radial-gradient(1.5px 1.5px at 65% 72%, rgba(212,162,76,0.35), transparent);
    pointer-events: none;
    z-index: -1;
}

/* ── Home card sheen ──────────────────────────────── */
.tc-card-has-sheen {
    position: relative;
    overflow: hidden;
}
.tc-card-has-sheen::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(245,158,11,0.07), transparent);
    transition: left 0.6s ease;
    pointer-events: none;
}
.tc-card-has-sheen:hover::before {
    left: 100%;
}

/* ── FAQ section ──────────────────────────────────── */
.tc-home-faq .elementor-accordion-item {
    background: #11100d;
    border: 1px solid rgba(212,162,76,0.25);
    border-radius: 14px;
    margin-bottom: 10px;
    overflow: hidden;
}
.tc-home-faq .elementor-tab-title {
    color: #f5f0e8;
    font-weight: 600;
    padding: 18px 22px;
    font-size: 16px;
}
.tc-home-faq .elementor-tab-title.elementor-active {
    color: #ffcc66;
}
.tc-home-faq .elementor-tab-content {
    color: #d8c8aa;
    padding: 0 22px 22px;
    font-size: 15px;
    line-height: 1.7;
}

/* ── CTA section ──────────────────────────────────── */
.tc-home-cta .elementor-button {
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* ── Hero section adjustments ─────────────────────── */
.tc-home-hero .elementor-heading-title {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    letter-spacing: -0.8px;
}

/* ── Home card base ───────────────────────────────── */
.tc-home-card {
    transition: border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.tc-home-card:hover {
    border-color: rgba(255, 204, 102, 0.55) !important;
    box-shadow: 0 24px 70px rgba(245, 158, 11, 0.18) !important;
    transform: translateY(-3px);
}

/* ══════════════════════════════════════════════════════════════════════════
   FEATURES SECTION WIDGET
   Styles for the Widget_Features_Section Elementor widget.
   All selectors are scoped to .tc-features-* to avoid theme conflicts.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Section wrapper ─────────────────────────────────────────────────────── */
.tc-features-section,
.tc-seo-section,
.tc-tools-section {
    padding:    64px 0;
    border-top: 1px solid var(--tc-border, rgba(255, 255, 255, 0.07));
}

/* ── Section header ──────────────────────────────────────────────────────── */
.tc-section-header {
    text-align:    center;
    margin-bottom: 48px;
}

.tc-section-tag {
    display:        inline-block;
    font-size:      11px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    color:          #ffcc66;
    margin-bottom:  14px;
    background:     rgba(245, 158, 11, 0.07);
    border:         1px solid rgba(212, 162, 76, 0.22);
    border-radius:  99px;
    padding:        4px 14px;
}

.tc-section-title {
    font-family:    var(--tc-font-display, 'Playfair Display', Georgia, serif);
    font-size:      clamp(26px, 4vw, 40px);
    letter-spacing: -.3px;
    margin:         0 0 12px;
    color:          var(--tc-text-primary);
    line-height:    1.15;
    font-weight:    700;
}

.tc-section-subtitle {
    font-size:   clamp(14px, 2vw, 16px);
    color:       var(--tc-text-secondary);
    max-width:   600px;
    margin:      0 auto;
    font-weight: 300;
    line-height: 1.7;
}

/* ── Features grid ───────────────────────────────────────────────────────── */
.tc-features-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap:                   20px;
}

/* ── Feature card ────────────────────────────────────────────────────────── */
.tc-feature-card {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025)),
        var(--tc-bg-card, #11100d);
    border:        1px solid var(--tc-border);
    border-radius: var(--tc-radius-lg);
    padding:       28px;
    transition:    border-color var(--tc-transition),
                   transform    var(--tc-transition),
                   box-shadow   var(--tc-transition);
    position:      relative;
    overflow:      hidden;
    box-shadow:    0 0 0 1px rgba(245, 158, 11, 0.03);
}

.tc-feature-card::before {
    content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(245,158,11,0.06), transparent);
    transition: left 0.6s ease; pointer-events: none;
}

.tc-feature-card:hover {
    border-color: rgba(255, 204, 102, 0.55);
    transform:    translateY(-4px);
    box-shadow:   0 24px 70px rgba(245, 158, 11, 0.18);
}

.tc-feature-card:hover::before { left: 100%; }

/* ── Feature icon ────────────────────────────────────────────────────────── */
.tc-feature-icon {
    width:         48px;
    height:        48px;
    border-radius: 10px;
    display:       flex;
    align-items:   center;
    justify-content:center;
    font-size:     22px;
    margin-bottom: 18px;
    flex-shrink:   0;
    border:        1px solid rgba(245, 158, 11, 0.24);
    transition:    transform var(--tc-transition), border-color var(--tc-transition);
}

.tc-feature-card:hover .tc-feature-icon { transform: scale(1.08); border-color: rgba(255, 204, 102, 0.45); }

/* Colour variants — all unified to gold tint */
.tc-feature-icon--purple { background: linear-gradient(135deg, rgba(245, 158, 11, 0.22), rgba(212, 162, 76, 0.08)); color: #ffcc66; }
.tc-feature-icon--pink   { background: linear-gradient(135deg, rgba(245, 158, 11, 0.22), rgba(212, 162, 76, 0.08)); color: #ffcc66; }
.tc-feature-icon--green  { background: linear-gradient(135deg, rgba(245, 158, 11, 0.22), rgba(212, 162, 76, 0.08)); color: #ffcc66; }
.tc-feature-icon--yellow { background: linear-gradient(135deg, rgba(245, 158, 11, 0.22), rgba(212, 162, 76, 0.08)); color: #ffcc66; }
.tc-feature-icon--blue   { background: linear-gradient(135deg, rgba(245, 158, 11, 0.22), rgba(212, 162, 76, 0.08)); color: #ffcc66; }
.tc-feature-icon--red    { background: linear-gradient(135deg, rgba(245, 158, 11, 0.22), rgba(212, 162, 76, 0.08)); color: #ffcc66; }

/* ── Feature text ────────────────────────────────────────────────────────── */
.tc-feature-title {
    font-size:      16px;
    font-weight:    700;
    margin:         0 0 8px;
    letter-spacing: -.2px;
    color:          var(--tc-text-primary);
}

.tc-feature-desc {
    font-size:   14px;
    color:       var(--tc-text-secondary);
    line-height: 1.65;
    font-weight: 300;
    margin:      0;
}

/* ── Responsive: stack to 2 cols on tablet ───────────────────────────────── */
@media (max-width: 768px) {
    .tc-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── Responsive: single column on mobile ────────────────────────────────── */
@media (max-width: 480px) {
    .tc-features-section {
        padding: 40px 0;
    }

    .tc-features-grid {
        grid-template-columns: 1fr;
    }

    .tc-section-header {
        margin-bottom: 32px;
    }
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .tc-feature-card {
        transition: none !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   SEO CONTENT SECTION — Case Description Cards
   Styles for Widget_Seo_Cases_Section Elementor widget.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Section wrapper ─────────────────────────────────────────────────────── */


/* ── SEO grid ────────────────────────────────────────────────────────────── */
.tc-seo-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap:                   20px;
}

/* ── SEO card ────────────────────────────────────────────────────────────── */
.tc-seo-card {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025)),
        var(--tc-bg-card, #11100d);
    border:        1px solid var(--tc-border);
    border-radius: var(--tc-radius-lg);
    padding:       26px;
    transition:    border-color var(--tc-transition),
                   transform    var(--tc-transition),
                   box-shadow   var(--tc-transition);
    box-shadow:    0 0 0 1px rgba(245, 158, 11, 0.03);
    position:      relative;
    overflow:      hidden;
}

.tc-seo-card::before {
    content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(245,158,11,0.06), transparent);
    transition: left 0.6s ease; pointer-events: none;
}

.tc-seo-card:hover {
    border-color: rgba(255, 204, 102, 0.55);
    transform:    translateY(-3px);
    box-shadow:   0 24px 70px rgba(245, 158, 11, 0.18);
}

.tc-seo-card:hover::before { left: 100%; }

/* ── Card header (icon + name inline) ───────────────────────────────────── */
.tc-seo-card__header {
    display:       flex;
    align-items:   center;
    gap:           10px;
    margin-bottom: 10px;
}

.tc-seo-card__icon {
    font-size:  22px;
    flex-shrink:0;
}

.tc-seo-card__name {
    font-size:      15px;
    font-weight:    700;
    letter-spacing: -.2px;
    color:          var(--tc-text-primary, #ffffff);
    margin:         0;
}

/* ── Example output badge ────────────────────────────────────────────────── */
.tc-seo-card__example {
    font-size:      13px;
    font-weight:    600;
    color:          var(--tc-gold-light, #ffcc66);
    background:     rgba(245, 158, 11, 0.07);
    border:         1px solid rgba(212, 162, 76, 0.2);
    border-radius:  6px;
    padding:        6px 10px;
    margin:         0 0 10px;
    font-family:    monospace, monospace;
    letter-spacing: 0.3px;
    display:        block;
    word-break:     break-word;
}

/* ── Description text ────────────────────────────────────────────────────── */
.tc-seo-card__desc {
    font-size:   13.5px;
    color:       var(--tc-text-secondary);
    line-height: 1.65;
    font-weight: 300;
    margin:      0;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .tc-seo-grid {
        grid-template-columns: 1fr;
    }
    .tc-seo-section {
        padding: 40px 0;
    }
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .tc-seo-card { transition: none !important; }
}


/* ══════════════════════════════════════════════════════════════════════════
   MORE TOOLS / TOOL LINK CARDS SECTION
   Styles for Widget_Tools_Grid_Section Elementor widget.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Section wrapper ─────────────────────────────────────────────────────── */

/* ── Tools grid ──────────────────────────────────────────────────────────── */
.tc-tools-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap:                   16px;
}

/* ── Tool link card ──────────────────────────────────────────────────────── */
.tc-tool-link-card {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025)),
        var(--tc-bg-card, #11100d);
    border:        1px solid var(--tc-border);
    border-radius: var(--tc-radius-lg);
    padding:       clamp(18px, 2.5vw, 24px);
    display:       flex;
    flex-direction:column;
    gap:           10px;
    cursor:        pointer;
    text-decoration:none;
    color:         inherit;
    transition:    border-color var(--tc-transition),
                   transform    var(--tc-transition),
                   box-shadow   var(--tc-transition);
    position:      relative;
    overflow:      hidden;
    box-shadow:    0 0 0 1px rgba(245, 158, 11, 0.03);
}

.tc-tool-link-card::before {
    content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(245,158,11,0.06), transparent);
    transition: left 0.6s ease; pointer-events: none;
}

.tc-tool-link-card:hover,
.tc-tool-link-card:focus-visible {
    border-color: rgba(255, 204, 102, 0.55);
    transform:    translateY(-4px);
    box-shadow:   0 24px 70px rgba(245, 158, 11, 0.18);
    outline:      none;
}

.tc-tool-link-card:hover::before { left: 100%; }

.tc-tool-link-card:focus-visible {
    outline:        2px solid var(--tc-accent);
    outline-offset: 3px;
}

/* ── Icon box ────────────────────────────────────────────────────────────── */
.tc-tl-icon {
    font-size:      22px;
    width:          46px;
    height:         46px;
    background:     linear-gradient(135deg, rgba(245, 158, 11, 0.22), rgba(212, 162, 76, 0.08));
    border:         1px solid rgba(245, 158, 11, 0.24);
    border-radius:  10px;
    display:        flex;
    align-items:    center;
    justify-content:center;
    flex-shrink:    0;
    transition:     transform var(--tc-transition), border-color var(--tc-transition);
}

.tc-tool-link-card:hover .tc-tl-icon {
    transform:    scale(1.08);
    border-color: rgba(255, 204, 102, 0.45);
}

/* ── Card name ───────────────────────────────────────────────────────────── */
.tc-tl-name {
    font-size:      14px;
    font-weight:    700;
    letter-spacing: -.1px;
    color:          var(--tc-text-primary);
    line-height:    1.3;
}

/* ── Card description ────────────────────────────────────────────────────── */
.tc-tl-desc {
    font-size:   12px;
    color:       var(--tc-text-muted);
    line-height: 1.5;
}

/* ── "Coming soon" badge variant ─────────────────────────────────────────── */
.tc-tool-link-card--soon .tc-tl-name::after {
    content:        'Soon';
    display:        inline-block;
    margin-left:    8px;
    font-size:      9px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color:          var(--tc-gold-light);
    background:     rgba(245, 158, 11, 0.08);
    border:         1px solid rgba(212, 162, 76, 0.2);
    border-radius:  4px;
    padding:        2px 6px;
    vertical-align: middle;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .tc-tools-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .tc-tools-section {
        padding: 40px 0;
    }
}

@media (max-width: 360px) {
    .tc-tools-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .tc-tool-link-card { transition: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ALL TOOLS PAGE SECTION
   Styles for Widget_All_Tools_Page Elementor widget.
   Includes: hero, live search bar, category headings + count badge,
   per-category tool grids, and the "no results" empty state.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Page wrapper ────────────────────────────────────────────────────────── */
.tc-atp-wrap {
    font-family: var(--tc-font-lexend, 'DM Sans', system-ui, sans-serif);
    color:       var(--tc-text-primary, #ffffff);
}

/* ── Hero / page header ──────────────────────────────────────────────────── */
.tc-atp-hero {
    padding:    48px 0 32px;
    text-align: center;
}

.tc-atp-badge {
    display:        inline-flex;
    align-items:    center;
    gap:            8px;
    background:     linear-gradient(135deg, var(--tc-surface-2), var(--tc-surface-3));
    border:         1px solid rgba(212, 162, 76, 0.15);
    border-radius:  99px;
    padding:        6px 16px 6px 12px;
    font-size:      12px;
    font-weight:    500;
    color:          var(--tc-text-secondary);
    margin-bottom:  20px;
    letter-spacing: .3px;
}

.tc-atp-badge-dot {
    width:         8px;
    height:        8px;
    background:    var(--tc-gold-light);
    border-radius: 50%;
    animation:     tc-pulse 2s infinite;
    box-shadow:    0 0 6px rgba(245, 158, 11, 0.3);
}

.tc-atp-hero-title {
    font-family:    var(--tc-font-display);
    font-size:      clamp(32px, 5vw, 58px);
    line-height:    1.1;
    letter-spacing: -1px;
    margin:         0 0 14px;
}


.tc-atp-hero-subtitle {
    font-size:   17px;
    color:       var(--tc-text-secondary);
    max-width:   520px;
    margin:      0 auto;
    font-weight: 300;
    line-height: 1.65;
}
.all_tools_listings .tc-atp-hero-subtitle{
    max-width: unset;
}

/* ── Search bar ──────────────────────────────────────────────────────────── */
.tc-atp-search-wrap {
    max-width:     480px;
    margin:        0 auto 36px;
    position:      relative;
}

.tc-atp-search-icon {
    position:       absolute;
    left:           14px;
    top:            50%;
    transform:      translateY(-50%);
    font-size:      16px;
    pointer-events: none;
    line-height:    1;
}

.tc-atp-search {
    width:         100%;
    padding:       14px 14px 14px 44px !important;
    background:    #080706 !important;
    border:        1.5px solid rgba(212, 162, 76, 0.25) !important;
    border-radius: 16px !important;
    color:         #f5f0e8;
    font-size:     15px;
    font-family:   var(--tc-font-body);
    outline:       none;
    transition:    border-color .3s ease, box-shadow .3s ease;
    box-shadow:    0 0 0 1px rgba(245, 158, 11, 0.03);
}

.tc-atp-search::placeholder {
    color: var(--tc-text-muted);
}

.tc-atp-search:focus {
    border-color: rgba(255, 204, 102, 0.60);
    box-shadow:   0 0 0 4px rgba(245, 158, 11, 0.14);
}

/* ── Category sections ───────────────────────────────────────────────────── */
.tc-atp-category {
    padding:      0 0 44px;
    border-top:   none;
}

/* ── Category heading row (title + count badge) ──────────────────────────── */
.tc-atp-cat-header {
    display:       flex;
    align-items:   center;
    gap:           12px;
    margin-bottom: 18px;
}

.tc-atp-cat-title {
    font-family:    var(--tc-font-display);
    font-size:      20px;
    font-weight:    700;
    letter-spacing: -.3px;
    color:          var(--tc-text-primary);
    margin:         0;
}

.tc-atp-cat-count {
    display:        inline-flex;
    align-items:    center;
    justify-content:center;
    font-size:      11px;
    font-weight:    600;
    background:     rgba(245, 158, 11, 0.10);
    color:          var(--tc-gold-light, #ffcc66);
    border-radius:  99px;
    padding:        3px 10px;
    line-height:    1.4;
    flex-shrink:    0;
    border:         1px solid rgba(212, 162, 76, 0.15);
}

/* ── Per-category grid of tool cards ─────────────────────────────────────── */
.tc-atp-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap:                   14px;
}

/* ── Individual tool card ────────────────────────────────────────────────── */
.tc-atp-card {
    display:        flex;
    flex-direction: column;
    gap:            10px;
    padding:        22px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025)),
        var(--tc-bg-card, #11100d);
    border:         1px solid var(--tc-border);
    border-radius:  16px;
    text-decoration:none;
    color:          inherit;
    cursor:         pointer;
    transition:     border-color var(--tc-transition),
                    transform    var(--tc-transition),
                    box-shadow   var(--tc-transition);
    position:       relative;
    overflow:       hidden;
    box-shadow:     0 0 0 1px rgba(245, 158, 11, 0.03);
}

.tc-atp-card::before {
    content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(245,158,11,0.06), transparent);
    transition: left 0.6s ease; pointer-events: none;
}

.tc-atp-card:hover {
    border-color: rgba(255, 204, 102, 0.55);
    transform:    translateY(-4px);
    box-shadow:   0 24px 70px rgba(245, 158, 11, 0.18);
    color:        inherit;
    text-decoration: none;
}

.tc-atp-card:hover::before { left: 100%; }

.tc-atp-card:focus-visible {
    outline:        2px solid var(--tc-accent);
    outline-offset: 3px;
    border-color:   var(--tc-border-hover);
}

/* ── Card icon box ───────────────────────────────────────────────────────── */
.tc-atp-card-icon {
    font-size:      20px;
    height:         44px;
    width:          44px;
    background:     linear-gradient(135deg, rgba(245, 158, 11, 0.22), rgba(212, 162, 76, 0.08));
    border:         1px solid rgba(245, 158, 11, 0.24);
    border-radius:  10px;
    display:        flex;
    align-items:    center;
    justify-content:center;
    flex-shrink:    0;
    transition: transform var(--tc-transition), border-color var(--tc-transition);
}

.tc-atp-card:hover .tc-atp-card-icon {
    border-color: rgba(255, 204, 102, 0.45);
    transform:    scale(1.05);
}

/* ── Card name ───────────────────────────────────────────────────────────── */
.tc-atp-card-name {
    font-size:      clamp(17px, 1.15vw, 20px);
    line-height:    1.22;
    font-weight:    500;
    min-height:     2.44em;
    color:          var(--tc-text-primary);
}

/* ── Card description ────────────────────────────────────────────────────── */
.tc-atp-card-desc {
    font-size:      clamp(14px, 0.95vw, 15px);
    line-height:    1.55;
    font-weight:    300;
    color:          var(--tc-text-muted);
}

/* ── Hidden state (search filtering) ─────────────────────────────────────── */
.tc-atp-card[hidden]     { display: none; }
.tc-atp-category[hidden] { display: none; }

/* ── No-results empty state ──────────────────────────────────────────────── */
.tc-atp-no-results {
    display:     none;
    text-align:  center;
    padding:     60px 24px;
    color:       var(--tc-text-muted, #55597a);
}

.tc-atp-no-results[aria-hidden="false"] {
    display: block;
}

.tc-atp-no-results-icon {
    font-size:     48px;
    margin-bottom: 14px;
    line-height:   1;
}

.tc-atp-no-results-title {
    font-size:   18px;
    font-weight: 600;
    color:       var(--tc-text-secondary);
    margin:      0 0 6px;
}

.tc-atp-no-results-hint {
    font-size: 14px;
    margin:    0;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .tc-atp-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .tc-atp-hero  { padding: 32px 0 20px; }
    .tc-atp-grid  { grid-template-columns: 1fr; gap: 10px; }
    .tc-atp-category { padding-bottom: 30px; }
    .tc-atp-card-name { min-height: auto; }
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .tc-atp-card,
    .tc-atp-search,
    .tc-atp-badge-dot { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   Consolidated Widget Styles
   ========================================================================== */

/* APA citation generator */
.tc-apa-fields {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}

.tc-apa-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tc-apa-field--wide,
.tc-grid-full {
    grid-column: 1 / -1;
}




@media (max-width: 600px) {
    .tc-apa-fields {
        grid-template-columns: 1fr;
    }

    .tc-apa-field--wide {
        grid-column: 1;
    }
}

/* Shared cleaner/remover tool layout */
.tc-ed-wrapper textarea {
    width: 100%;
    margin-top: 8px;
}

.tc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.tc-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 10px;
}

.tc-cr-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tc-cr-preset-btn.active {
    background: #000;
    color: #fff;
}

.tc-widget--random-number .tc-options .tc-options-row,
.tc-widget--uuid-generator .tc-options .tc-options-row {
    margin-bottom: 0;
}

/* Invisible text generator */
.tc-invis-card {
    display: flex;
    flex-direction: column;
    padding: 16px;
    background: var(--tc-surface-2);
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius-md);
    transition: border-color var(--transition);
}

.tc-invis-card:hover {
    border-color: var(--tc-accent);
}

.tc-invis-card__name {
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: 700;
}

.tc-invis-card__code {
    margin-bottom: 6px;
    color: var(--tc-accent);
    font-family: monospace;
    font-size: 12px;
}

.tc-invis-card__desc {
    color: var(--tc-text-muted);
    font-size: 12px;
}


/* JPG to AVIF image cards */
.tc-ja-card,
.tc-jh-card {
    overflow: hidden;
    background: var(--tc-surface-2);
    border: 1.5px solid var(--tc-border);
    border-radius: var(--tc-radius-md);
    transition: border-color .2s;
}

.tc-ja-card:hover {
    border-color: var(--tc-accent);
}

.tc-ja-card-thumb {
    display: block;
    width: 100%;
    height: 140px;
    object-fit: cover;
    background: var(--tc-surface-3);
}

.tc-ja-card-body {
    padding: 10px 12px;
}

.tc-ja-card-name {
    overflow: hidden;
    margin-bottom: 2px;
    color: var(--tc-text-primary);
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tc-ja-card-meta,
.tc-ja-card-pct {
    color: var(--tc-text-muted);
    font-size: 11px;
}

.tc-ja-card-meta {
    margin-bottom: 8px;
}

.tc-ja-card-pct {
    margin-bottom: 6px;
    font-size: 10px;
}

.tc-ja-card-prog-wrap {
    overflow: hidden;
    height: 4px;
    margin-bottom: 6px;
    background: var(--tc-surface-3);
    border-radius: 99px;
}

.tc-ja-card-prog-bar {
    width: 0%;
    height: 100%;
    background: var(--tc-accent);
    border-radius: 99px;
    transition: width .25s;
}

.tc-ja-card-status,
.tc-jh-card-status {
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 600;
}

.tc-ja-card-status.ready,
.tc-jh-card-status.ready {
    color: var(--tc-text-muted);
}

.tc-ja-card-status.converting,
.tc-jh-card-status.converting {
    color: var(--tc-accent);
}

.tc-ja-card-status.done,
.tc-jh-card-status.done {
    color: var(--tc-gold-light);
}

.tc-ja-card-status.cached,
.tc-jh-card-status.cached {
    color: var(--tc-accent);
}

.tc-ja-card-status.error,
.tc-jh-card-status.error {
    color: var(--tc-danger);
}

.tc-ja-dl-btn,
.tc-jh-card-dl {
    display: inline-block;
    padding: 4px 10px;
    color: #fff;
    font-size: 11px;
    text-decoration: none;
    background: var(--tc-accent);
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.tc-ja-dl-btn:hover,
.tc-jh-card-dl:hover {
    opacity: .85;
}

/* JPG to HEIC image cards */
.tc-jh-card:hover {
    border-color: var(--tc-accent);
}


.tc-jh-card-body {
    padding: 10px 12px;
}

.tc-jh-card-meta {
    margin-bottom: 8px;
    color: var(--tc-text-muted);
    font-size: 11px;
}

.tc-jh-card-prog {
    overflow: hidden;
    height: 4px;
    margin-bottom: 8px;
    background: var(--tc-surface-3);
    border-radius: 99px;
}

.tc-jh-card-prog-bar {
    width: 0%;
    height: 100%;
    background: var(--tc-accent);
    border-radius: 99px;
    transition: width .3s;
}

/* HEIC to JPG converter */
.tc-h2j-drop,
.tc-h2p-drop,
.tc-h2s-drop,
.tc-jc-drop,
.tc-pc-drop,
.tc-wc-drop {
    padding: 48px 24px;
    margin-bottom: 20px;
    text-align: center;
    background: var(--tc-surface-2);
    border: 2px dashed var(--tc-border);
    border-radius: var(--tc-radius-md);
    cursor: pointer;
    transition: border-color .25s, background-color .25s;
}

.tc-h2j-drop.is-dragging,
.tc-h2j-drop:hover {
    border-color: var(--tc-accent);
    background: var(--tc-surface-3);
}

.tc-h2j-drop__icon,
.tc-h2p-drop__icon,
.tc-h2s-drop__icon,
.tc-jc-drop__icon,
.tc-pc-drop__icon,
.tc-wc-drop__icon,
.tc-gc-drop__icon {
    margin-bottom: 12px;
    color: var(--tc-accent);
    font-size: 40px;
    font-weight: 700;
}

.tc-h2j-drop__title,
.tc-h2p-drop__title,
.tc-h2s-drop__title,
.tc-jc-drop__title,
.tc-pc-drop__title,
.tc-wc-drop__title,
.tc-gc-drop__title {
    margin: 0 0 6px;
    color: var(--tc-text-primary);
    font-size: 15px;
    font-weight: 600;
}

.tc-h2j-drop__hint,
.tc-h2p-drop__hint,
.tc-h2s-drop__hint,
.tc-jc-drop__hint,
.tc-pc-drop__hint,
.tc-wc-drop__hint,
.tc-gc-drop__hint {
    margin: 0;
    color: var(--tc-text-secondary);
    font-size: 13px;
}

.tc-h2j-upload,
.tc-h2p-upload,
.tc-h2s-upload,
.tc-jc-upload,
.tc-pc-upload,
.tc-wc-upload,
.tc-gc-upload,
.tc-svgc-upload {
    display: none;
}

.tc-h2j-options,
.tc-jc-options,
.tc-gc-options,
.tc-wc-options,
.tc-svgc-options,
.tc-settings-grid,
.tc-grid-settings {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.tc-h2j-range {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.tc-h2j-quality,
.tc-jc-quality,
.tc-wc-quality,
.tc-svgc-quality,
.tc-gc-quality,
.tc-slider {
    flex: 1;
    accent-color: var(--tc-accent);
    cursor: pointer;
}

.tc-h2j-quality-value {
    min-width: 42px;
    color: var(--tc-accent);
    font-size: 14px;
    font-weight: 700;
}

.tc-h2j-note,
.tc-jc-note {
    padding: 12px;
    color: var(--tc-text-secondary);
    font-size: 12px;
    background: var(--tc-surface-2);
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius-md);
}

.tc-h2j-progress {
    margin-bottom: 16px;
}

.tc-h2j-progress__row,
.tc-h2p-progress__row,
.tc-h2s-progress__row,
.tc-jc-progress__row,
.tc-pc-progress__row,
.tc-wc-progress__row,
.tc-gc-progress__row,
.tc-svgc-progress__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
    color: var(--tc-text-secondary);
    font-size: 13px;
}

.tc-h2j-progress-pct,
.tc-h2p-progress-pct,
.tc-h2s-progress-pct,
.tc-jc-progress-pct,
.tc-pc-progress-pct,
.tc-wc-progress-pct,
.tc-gc-progress-pct,
.tc-svgc-progress-pct {
    color: var(--tc-accent);
    font-weight: 700;
}

.tc-h2j-progress__track,
.tc-h2p-progress__track,
.tc-h2s-progress__track,
.tc-jc-progress__track,
.tc-pc-progress__track,
.tc-wc-progress__track,
.tc-gc-progress__track,
.tc-svgc-progress__track {
    overflow: hidden;
    height: 6px;
    background: var(--tc-surface-3);
    border: 1px solid var(--tc-border);
    border-radius: 999px;
}

.tc-h2j-progress__bar,
.tc-h2p-progress__bar,
.tc-h2s-progress__bar,
.tc-jc-progress__bar,
.tc-pc-progress__bar,
.tc-wc-progress__bar,
.tc-gc-progress__bar,
.tc-svgc-progress__bar {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, var(--tc-accent), var(--tc-accent-2));
    border-radius: 999px;
    transition: width .2s;
}

.tc-h2j-results {
    margin-top: 24px;
}

.tc-h2j-grid,
.tc-h2p-grid,
.tc-h2s-grid,
.tc-grid-cards-lg {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    margin-top: 12px;
}

.tc-h2j-card,
.tc-h2p-card,
.tc-h2s-card {
    overflow: hidden;
    text-align: center;
    background: var(--tc-surface-2);
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius-md);
}

.tc-h2j-card__image,
.tc-h2p-card__image,
.tc-h2s-card__image {
    display: block;
    width: 100%;
    height: 150px;
    object-fit: contain;
    background: var(--tc-surface-3);
    border-bottom: 1px solid var(--tc-border);
}

.tc-h2j-card__body,
.tc-h2p-card__body,
.tc-h2s-card__body {
    padding: 12px;
}

.tc-h2j-card__name,
.tc-h2p-card__name,
.tc-h2s-card__name,
.tc-jc-card__name,
.tc-pc-card__name,
.tc-wc-card__name,
.tc-gc-card__name,
.tc-svgc-card__name,
.tc-jh-card-name {
    overflow: hidden;
    margin-bottom: 4px;
    color: var(--tc-text-primary);
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tc-h2j-card__meta,
.tc-h2p-card__meta,
.tc-h2s-card__meta,
.tc-jc-card__meta,
.tc-pc-card__meta,
.tc-wc-card__meta,
.tc-gc-card__meta,
.tc-svgc-card__meta {
    margin-bottom: 10px;
    color: var(--tc-text-secondary);
    font-size: 11px;
}

.tc-h2j-card__download,
.tc-h2p-card__download,
.tc-h2s-card__download,
.tc-jc-card__download,
.tc-pc-card__download,
.tc-wc-card__download {
    display: inline-block;
    padding: 6px 12px;
    color: #fff;
    font-size: 12px;
    text-decoration: none;
    background: var(--tc-accent);
    border-radius: 6px;
}

.tc-h2j-card__download:hover,
.tc-h2p-card__download:hover,
.tc-h2s-card__download:hover,
.tc-jc-card__download:hover,
.tc-pc-card__download:hover,
.tc-wc-card__download:hover {
    color: #fff;
    opacity: .85;
}

@media (max-width: 640px) {
    .tc-h2j-options {
        grid-template-columns: 1fr;
    }
}

/* HEIC to PNG converter */
.tc-h2p-note,
.tc-h2s-note {
    padding: 12px;
    margin-bottom: 20px;
    color: var(--tc-text-secondary);
    font-size: 12px;
    background: var(--tc-surface-2);
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius-md);
}

.tc-h2p-progress {
    margin-bottom: 16px;
}

.tc-h2p-results {
    margin-top: 24px;
}

/* HEIC to SVG converter */
.tc-h2s-progress {
    margin-bottom: 16px;
}

.tc-h2s-results {
    margin-top: 24px;
}

.tc-jc-upload-line,
.tc-pc-upload-line,
.tc-wc-upload-line,
.tc-gc-upload-line,
.tc-svgc-upload-line {
    padding: 10px 12px;
    margin-bottom: 16px;
    color: var(--tc-text-secondary);
    font-size: 13px;
    background: var(--tc-surface-2);
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius-sm);
}

.tc-jc-range {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.tc-jc-quality-value {
    min-width: 42px;
    color: var(--tc-accent);
    font-size: 14px;
    font-weight: 700;
}

.tc-jc-progress {
    margin-bottom: 16px;
}

.tc-jc-results {
    margin-top: 24px;
}

.tc-jc-grid,
.tc-pc-grid,
.tc-wc-grid,
.tc-gc-grid,
.tc-svgc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
    margin-top: 12px;
}

.tc-jc-card,
.tc-pc-card,
.tc-wc-card,
.tc-gc-card,
.tc-svgc-card {
    overflow: hidden;
    background: var(--tc-surface-2);
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius-md);
}

.tc-jc-card__preview,
.tc-pc-card__preview,
.tc-wc-card__preview,
.tc-gc-card__preview,
.tc-svgc-card__preview {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 10px;
}

.tc-jc-card__body,
.tc-pc-card__body,
.tc-wc-card__body,
.tc-gc-card__body,
.tc-svgc-card__body {
    padding: 0 12px 12px;
    text-align: center;
}

@media (max-width: 640px) {
    .tc-jc-options {
        grid-template-columns: 1fr;
    }
}

/* PNG Compressor */
.tc-pc-progress {
    margin-bottom: 16px;
}

.tc-pc-results {
    margin-top: 24px;
}

/* WebP Compressor */
.tc-wc-select {
    width: 100%;
    min-height: 40px;
    margin-top: 8px;
    padding: 0 12px;
    color: var(--tc-text-primary);
    background: var(--tc-surface-2);
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius-sm);
}

.tc-wc-note {
    grid-column: 1 / -1;
    padding: 12px;
    color: var(--tc-text-secondary);
    font-size: 12px;
    background: var(--tc-surface-2);
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius-md);
}

.tc-wc-progress {
    margin-bottom: 16px;
}

.tc-wc-results {
    margin-top: 24px;
}

@media (max-width: 640px) {
    .tc-wc-options {
        grid-template-columns: 1fr;
    }
}

/* GIF Compressor */
.tc-gc-drop {
    padding: 48px 24px;
    margin-bottom: 20px;
    text-align: center;
    background: var(--tc-surface-2);
    border: 2px dashed var(--tc-border);
    border-radius: var(--tc-radius-md);
    cursor: pointer;
    transition: var(--tc-transition);
}

.tc-gc-drop.is-dragging,
.tc-gc-drop:hover {
    border-color: var(--tc-accent);
    background: var(--tc-surface-3);
}

.tc-gc-range {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.tc-gc-quality-value {
    min-width: 28px;
    color: var(--tc-accent);
    font-size: 14px;
    font-weight: 700;
}

.tc-gc-select {
    width: 100%;
    min-height: 40px;
    margin-top: 8px;
    padding: 0 12px;
    color: var(--tc-text-primary);
    background: var(--tc-surface-2);
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius-sm);
}

.tc-gc-note {
    grid-column: 1 / -1;
    padding: 12px;
    color: var(--tc-text-secondary);
    font-size: 12px;
    background: var(--tc-surface-2);
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius-sm);
}

.tc-gc-progress {
    margin-bottom: 16px;
}

.tc-gc-results {
    margin-top: 24px;
}

.tc-gc-card__download,
.tc-svgc-card__download {
    display: inline-block;
    padding: 6px 12px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    background: var(--tc-accent);
    border-radius: var(--tc-radius-sm);
}

.tc-gc-card__download:hover,
.tc-svgc-card__download:hover {
    color: #fff;
    opacity: .85;
}

@media (max-width: 640px) {
    .tc-gc-options {
        grid-template-columns: 1fr;
    }
}

/* SVG Compressor */
.tc-svgc-range {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.tc-svgc-quality-value {
    min-width: 72px;
    color: var(--tc-accent);
    font-size: 14px;
    font-weight: 700;
    text-align: right;
}

.tc-svgc-note {
    padding: 12px;
    color: var(--tc-text-secondary);
    font-size: 12px;
    background: var(--tc-surface-2);
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius-sm);
}

.tc-svgc-progress {
    margin-bottom: 16px;
}

.tc-svgc-results {
    margin-top: 24px;
}

@media (max-width: 640px) {
    .tc-svgc-options {
        grid-template-columns: 1fr;
    }

    .tc-svgc-card__preview {
        grid-template-columns: 1fr;
    }
}

/* Online notepad */
.tc-np-top-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}



.tc-np-stats {
    margin-top: 10px;
    font-size: 12px;
    color: var(--tc-text-muted);
}

.textcraft-tools .tox-tinymce {
    border: 1px solid var(--tc-border) !important;
    border-radius: 8px !important;
}

.textcraft-tools .tox .tox-toolbar,
.textcraft-tools .tox .tox-toolbar__primary,
.textcraft-tools .tox .tox-menubar,
.textcraft-tools .tox .tox-statusbar {
    background: var(--tc-surface) !important;
}

.textcraft-tools .tox .tox-statusbar {
    color: var(--tc-text-muted) !important;
}

.textcraft-tools .tox .tox-tbtn {
    color: var(--tc-text-primary) !important;
}

.textcraft-tools .tox .tox-tbtn:hover {
    background: rgba(212, 162, 76, 0.20) !important;
}

/* Word frequency table */
#tc-wf-tbody td {
    padding: 9px 14px;
    font-size: 13px;
}

/* Remove Background from Image */
.tc-rbg-transparent-preview {
    background-color: var(--tc-surface-3);
    background-image:
        linear-gradient(45deg, rgba(255,255,255,.08) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255,255,255,.08) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(255,255,255,.08) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.08) 75%);
    background-position: 0 0, 0 12px, 12px -12px, -12px 0;
    background-size: 24px 24px;
}

/* PDF to Word Converter */
.tc-pdfw .tc-jc-note {
    margin-bottom: 20px;
}



/* PDF Compressor */
.tc-pdfc .tc-jc-card__preview img {
    height: 220px;
}

/* ══════════════════════════════════════════════════════════════════════════
   UTILITY CLASSES — replaces static inline styles across all widgets
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Display ──────────────────────────────────────────────────────────── */
.tc-d-none        { display: none; }
.tc-d-flex        { display: flex; }
.tc-d-block       { display: block; }
.tc-d-grid        { display: grid; }
.tc-d-inline-flex { display: inline-flex; }
.tc-d-inline-block{ display: inline-block; }

/* ── Grid helpers ─────────────────────────────────────────────────────── */
.tc-grid-2col  { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ── Section label (uppercase caption) ────────────────────────────── */
.tc-section-label { font-size: 12px; font-weight: 600; color: var(--tc-text-secondary); text-transform: uppercase; display: block; letter-spacing: .6px; }

/* ── Card surface (shared compound card bg/border/radius) ──────────── */
.tc-card-surface { background: var(--tc-surface-2); border: 1px solid var(--tc-border); border-radius: var(--tc-radius-md); }

/* ── Drop zone (converter/compressor widgets) ──────────────────────────── */
.tc-drop-zone  { border: 2px dashed rgba(212, 162, 76, 0.30); border-radius: var(--tc-radius-md); padding: 48px 24px; text-align: center; cursor: pointer; transition: all .25s; background: #11100d; }
.tc-drop-zone:hover { border-color: rgba(255, 204, 102, 0.55); box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.08), 0 24px 70px rgba(245, 158, 11, 0.18); }
.tc-drop-icon  { font-size: 40px; margin-bottom: 12px; }
.tc-drop-title { font-size: 15px; font-weight: 600; color: var(--tc-text-primary); margin: 0 0 6px; }
.tc-drop-desc  { font-size: 13px; color: var(--tc-text-secondary); margin: 0 0 4px; }
.tc-drop-desc-sm { font-size: 12px; color: var(--tc-text-secondary); margin: 0; }

/* ── Progress / status bars ────────────────────────────────────────────── */
.tc-progress-wrap  { display: none; margin-bottom: 16px; }
.tc-progress-row   { display: flex; justify-content: space-between; margin-bottom: 6px; }
.tc-progress-label { font-size: 13px; color: var(--tc-text-secondary); }
.tc-progress-pct   { font-size: 13px; font-weight: 700; color: var(--tc-accent); }
.tc-progress-bg    { height: 8px; background: var(--tc-surface-3); border-radius: 999px; overflow: hidden; }
.tc-progress-bar   { height: 100%; width: 0%; background: linear-gradient(90deg, var(--tc-accent), var(--tc-gold-light)); border-radius: 999px; transition: width .2s; }
.tc-upload-line    { display: none; margin-bottom: 16px; padding: 10px 12px; border: 1px solid var(--tc-border); border-radius: var(--tc-radius-sm); background: var(--tc-surface-2); font-size: 13px; color: var(--tc-text-secondary); }

/* ── Converter info card ──────────────────────────────────────────────── */
.tc-info-card      { width: 100%; padding: 12px; border: 1px solid var(--tc-border); border-radius: var(--tc-radius-md); background: var(--tc-surface-2); font-size: 12px; color: var(--tc-text-secondary); }
.tc-info-text      { font-size: 11px; color: var(--tc-text-secondary); margin-top: 4px; }

/* ── Range slider ──────────────────────────────────────────────────────── */

.tc-slider-value  { font-size: 14px; font-weight: 700; color: var(--tc-accent); }

.textcraft-tools input[type=range] { accent-color: #f59e0b; cursor: pointer; }

/* ── Select dropdown ──────────────────────────────────────────────────── */
.tc-select { width: 100%; min-height: 40px; border: 1px solid rgba(212, 162, 76, 0.30); border-radius: 10px; padding: 0 12px; background: #080706; color: #f5f0e8; font-size: 14px; cursor: pointer; }

/* ── Flex column end ───────────────────────────────────────────────────── */
.tc-flex-col-end  { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; }
.tc-flex-end      { display: flex; align-items: flex-end; }

/* ── Preview wrapper ──────────────────────────────────────────────────── */
.tc-preview-wrap  { display: none; margin-bottom: 20px; }
.tc-results-wrap  { display: none; margin-top: 24px; }

/* ── Stat box (sentence counter style) ─────────────────────────────── */
.tc-stat-box { background: var(--tc-surface-2); border: 1.5px solid var(--tc-border); border-radius: var(--tc-radius-md); padding: 16px; text-align: center; }
.tc-stat-number { font-size: 26px; font-weight: 700; color: var(--tc-accent); line-height: 1; }
.tc-stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--tc-text-secondary); margin-top: 6px; font-weight: 600; }

/* ── Advanced stat panel ───────────────────────────────────────────── */
.tc-adv-panel { margin-top: 24px; padding: 20px; background: var(--tc-surface-2); border: 1px solid var(--tc-border); border-radius: var(--tc-radius-md); }
.tc-adv-heading { font-size: 16px; font-weight: 700; color: var(--tc-text-primary); margin: 0 0 12px; }
.tc-adv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.tc-adv-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--tc-surface-1); border-radius: var(--tc-radius-md); }
.tc-adv-label { font-size: 12px; color: var(--tc-text-secondary); }
.tc-adv-value { font-size: 14px; font-weight: 700; color: var(--tc-text-primary); }

/* ── Checkbox styling ──────────────────────────────────────────────────── */
.tc-checkbox,
.tc-accent-checkbox { accent-color: var(--tc-accent); width: 16px; height: 16px; }

/* ── Flex helpers ─────────────────────────────────────────────────────── */
.tc-flex-wrap       { flex-wrap: wrap; }
.tc-flex-col        { flex-direction: column; }
.tc-flex-shrink-0   { flex-shrink: 0; }
.tc-items-center    { align-items: center; }
.tc-items-start     { align-items: flex-start; }
.tc-items-end       { align-items: flex-end; }
.tc-justify-center  { justify-content: center; }
.tc-justify-between { justify-content: space-between; }
.tc-flex-1          { flex: 1; }
.tc-gap-4           { gap: 4px; }
.tc-gap-6           { gap: 6px; }
.tc-gap-8           { gap: 8px; }
.tc-gap-10          { gap: 10px; }
.tc-gap-12          { gap: 12px; }
.tc-gap-14          { gap: 14px; }
.tc-gap-16          { gap: 16px; }
.tc-gap-20          { gap: 20px; }

/* ── Spacing ──────────────────────────────────────────────────────────── */
.tc-mt-0   { margin-top: 0; }
.tc-mt-4   { margin-top: 4px; }
.tc-mt-6   { margin-top: 6px; }
.tc-mt-8   { margin-top: 8px; }
.tc-mt-10  { margin-top: 10px; }
.tc-mt-12  { margin-top: 12px; }
.tc-mt-14  { margin-top: 14px; }
.tc-mt-16  { margin-top: 16px; }
.tc-mt-20  { margin-top: 20px; }
.tc-mt-24  { margin-top: 24px; }
.tc-mt-30  { margin-top: 30px; }
.tc-mt-32  { margin-top: 32px; }
.tc-mt-60  { margin-top: 60px; }

.tc-mb-0   { margin-bottom: 0; }
.tc-mb-4   { margin-bottom: 4px; }
.tc-mb-6   { margin-bottom: 6px; }
.tc-mb-8   { margin-bottom: 8px; }
.tc-mb-10  { margin-bottom: 10px; }
.tc-mb-12  { margin-bottom: 12px; }
.tc-mb-14  { margin-bottom: 14px; }
.tc-mb-16  { margin-bottom: 16px; }
.tc-mb-20  { margin-bottom: 20px; }
.tc-mb-24  { margin-bottom: 24px; }
.tc-mb-32  { margin-bottom: 32px; }

.tc-m-0    { margin: 0; }
.tc-m-0-10 { margin: 0 0 10px; }
.tc-m-0-12 { margin: 0 0 12px; }

/* ── Width ────────────────────────────────────────────────────────────── */
.tc-w-full  { width: 100%; }
.tc-w-auto  { width: auto; }

/* ── Text ─────────────────────────────────────────────────────────────── */
.tc-text-center   { text-align: center; }
.tc-text-left     { text-align: left; }
.tc-text-right,
.tc-num-cell { text-align: right; }
.tc-text-primary  { color: var(--tc-text-primary); }
.tc-text-muted    { color: var(--tc-text-secondary); }
.tc-no-underline  { text-decoration: none; }
.tc-font-mono     { font-family: var(--tc-font-mono); }

/* ── Position ─────────────────────────────────────────────────────────── */
.tc-relative    { position: relative; }
.tc-overflow-hidden { overflow: hidden; }
.tc-cursor-pointer  { cursor: pointer; }

/* ── Borders / Radius ─────────────────────────────────────────────────── */
.tc-rounded-full { border-radius: 50%; }
.tc-border-surface { border: 1px solid var(--tc-border); }

/* ── Object fit ───────────────────────────────────────────────────────── */
.tc-object-contain { object-fit: contain; }
.tc-object-cover   { object-fit: cover; }

/* ── Font size ────────────────────────────────────────────────────────── */
.tc-text-13 { font-size: 13px; }
.tc-text-14 { font-size: 14px; }
.tc-text-15 { font-size: 15px; }
.tc-text-16 { font-size: 16px; }
.tc-text-40 { font-size: 40px; }

/* ── Accent value (quality / slider spans) ──────────────────────────── */
.tc-accent-value { font-weight: 700; color: var(--tc-accent); }

/* ── Padding ──────────────────────────────────────────────────────────── */
.tc-p-14-16 { padding: 14px 16px; }
.tc-p-10-12 { padding: 10px 12px; }
.tc-p-48-24 { padding: 48px 24px; }
.tc-p-16    { padding: 16px; }
.tc-p-20    { padding: 20px; }
.tc-p-24    { padding: 24px; }
.tc-p-12    { padding: 12px; }

/* ── Section label (uppercase caption, --tc-* vars) ────────────── */
.tc-label-upper { font-size: 12px; font-weight: 600; color: var(--tc-text-secondary); text-transform: uppercase; letter-spacing: .6px; display: block; }

/* ── Grid: 2-col settings (16px gap) ──────────────────────────────── */

.tc-grid-settings-sm { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }

/* ── Grid: 3-col / 4-col ──────────────────────────────────────────── */
.tc-grid-3col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.tc-grid-4col,
.tc-grid-4col-10 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 10px; }

/* ── Grid: auto-fill result card grids ─────────────────────────────── */
.tc-grid-preview-sm,
.tc-dpdf-grid-sm { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.tc-grid-cards      { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-top: 12px; }

.tc-grid-nato       { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }

/* ── Flex rows ─────────────────────────────────────────────────────── */
.tc-flex-row     { display: flex; align-items: center; gap: 10px; }
.tc-flex-check,
.tc-wc-check-label { display: flex; align-items: center; gap: 8px; color: var(--tc-text-secondary); cursor: pointer; }
.tc-flex-check-sm{ display: flex; align-items: center; gap: 7px; color: var(--tc-text-secondary); cursor: pointer; }

/* ── Converter progress fill ───────────────────────────────────────── */
.tc-progress-fill { height: 100%; width: 0%; border-radius: 999px; transition: width .2s; }

/* ── Color picker / hex input ──────────────────────────────────────── */
.tc-color-picker { width: 54px; height: 40px; padding: 0; border: 1px solid var(--tc-border); border-radius: 10px; background: none; cursor: pointer; }
.tc-color-hex    { flex: 1; min-height: 40px; border: 1px solid var(--tc-border); border-radius: 10px; padding: 0 12px; background: var(--tc-surface-2); color: var(--tc-text-primary); }

/* ── Converter option bar ──────────────────────────────────────────── */
.tc-option-bar { background: var(--tc-surface-2); border-radius: var(--tc-radius-sm); border: 1px solid var(--tc-border); margin-bottom: 20px; display: flex; gap: 20px; flex-wrap: wrap; }

/* ── Badge ─────────────────────────────────────────────────────────── */
.tc-badge        { display: inline-block; font-size: 12px; padding: 3px 10px; border-radius: 999px; }
.tc-badge--acc   { background: var(--tc-accent); color: #fff; }

/* ── Font size (gap fillers) ─────────────────────────────────────────── */
.tc-text-9  { font-size: 9px; }
.tc-text-10 { font-size: 10px; }
.tc-text-11 { font-size: 11px; }
.tc-text-12 { font-size: 12px; }
.tc-text-18 { font-size: 18px; }

/* ── Margin shortcuts (gap fillers) ─────────────────────────────────── */
.tc-m-0-4  { margin: 0 0 4px; }
.tc-m-0-6  { margin: 0 0 6px; }

/* ══════════════════════════════════════════════════════════════════════════
   MODAL / TOAST / OVERLAY — shared across PDF widgets
   ══════════════════════════════════════════════════════════════════════════ */
.tc-toast-fixed {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10000;
    padding: 16px 20px;
    border-radius: 8px;
    background: #333;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    animation: slideInUp .3s ease;
    max-width: 400px;
    word-wrap: break-word;
}
.tc-modal-backdrop {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9998;
}
.tc-modal,
.tc-modal-box {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    background: var(--tc-surface-1);
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius-lg);
    padding: 24px;
    z-index: 9999;
    max-width: 90vw;
    width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}
.tc-modal-title {
    margin: 0 0 16px;
    color: var(--tc-text-primary);
    font-size: 18px;
    font-weight: 700;
}
.tc-modal-actions,
.tc-modal-footer {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.tc-grid-2col-16 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tc-hidden      { display: none; }

/* ── Progress bar fill variants ────────────────────────── */
.tc-progress-fill--accent { background: var(--tc-accent); }
.tc-progress-fill--pink { background: linear-gradient(90deg,var(--tc-accent),var(--tc-gold-dark)); }
.tc-progress-fill--orange { background: linear-gradient(90deg,var(--tc-accent),var(--tc-gold-light)); }
.tc-progress-fill--green { background: linear-gradient(90deg,var(--tc-accent),var(--tc-gold-bright)); }

/* ── Converter thumb image (80px cover) ──────────── */
.tc-conv-thumb { width: 100%; height: 80px; object-fit: cover; border-radius: var(--tc-radius-sm); border: 1px solid var(--tc-border); }

/* ── Converter thumb image (86px contain) ──────── */
.tc-conv-thumb-lg { width: 100%; height: 86px; object-fit: contain; border-radius: 8px; border: 1px solid var(--tc-border); }

/* ── Converter preview grid (2col 8px gap) ───── */
.tc-grid-preview-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }

/* ── Checkerboard transparency bg ─────────────── */
.tc-bg-checkerboard { background: linear-gradient(45deg,rgba(255,255,255,0.05) 25%,rgba(255,255,255,0.02) 25%,rgba(255,255,255,0.02) 50%,rgba(255,255,255,0.05) 50%,rgba(255,255,255,0.05) 75%,rgba(255,255,255,0.02) 75%,rgba(255,255,255,0.02) 100%); background-size: 16px 16px; }

/* ── White background ─────────────────────────── */
.tc-bg-white { background: #fff; }

/* ── Input field (15px, medium radius) ────────── */
.tc-input-md { width: 100%; background: var(--tc-surface-2); border: 1.5px solid var(--tc-border); border-radius: var(--tc-radius-md); padding: 10px 12px; color: var(--tc-text-primary); font-size: 15px; outline: none; }

/* ── Inline mono font ─────────────────────────── */
.tc-font-mono-inline { font-family: monospace; }

/* ── Label with letter-spacing ────────────────── */
.tc-label-spaced { letter-spacing: .8px; }

/* ── Color: accent-3 (green) ──────────────────── */
.tc-text-accent-3 { color: var(--tc-accent-3); }

/* ── Color: error red ─────────────────────────── */
.tc-text-error { color: var(--tc-danger); }

/* ── Color: accent-2 (pink) ──────────────────── */
.tc-text-accent-2 { color: var(--tc-gold-light); }

/* ── Font size 28px ──────────────────────────── */
.tc-text-28 { font-size: 28px; }

/* ── Min width helpers ───────────────────────── */
.tc-min-w-40 { min-width: 40px; }
.tc-min-w-48 { min-width: 48px; }

/* ── Flex items-center ────────────────────────── */
.tc-items-center { align-items: center; }

/* ── Justify center ──────────────────────────── */
.tc-justify-center { justify-content: center; }

/* ── Font weight 700 (alias) ─────────────────── */
.tc-font-bold-imp { font-weight: 700 !important; }

/* ── Display inline-flex ─────────────────────── */
.tc-inline-flex { display: inline-flex; }

/* ── Flex wrap ───────────────────────────────── */
.tc-flex-wrap { flex-wrap: wrap; }

/* ── Align content flex-start ────────────────── */
.tc-align-content-start { align-content: flex-start; }

/* ── Flex direction column ───────────────────── */
.tc-flex-col { display: flex; flex-direction: column; }

/* ── Overflow y auto ─────────────────────────── */
.tc-overflow-y-auto { overflow-y: auto; }

/* ── Max height 420px ────────────────────────── */
.tc-max-h-420 { max-height: 420px; }

/* ── Min height 120px ────────────────────────── */
.tc-min-h-120 { min-height: 120px; }

/* ── Min height 260px ────────────────────────── */
.tc-min-h-260 { min-height: 260px; }

/* ── NATO / phonetic style tag ───────────────── */
.tc-pill-tag { display: inline-block; background: rgba(245,158,11,.08); border-radius: 6px; padding: 2px 8px; margin: 2px; color: var(--tc-gold-light); border: 1px solid rgba(212,162,76,.15); }

/* ── NATO accent character ───────────────────── */
.tc-text-accent { color: var(--tc-accent); }

/* ── Duplicate word frequency count badge ────── */
.tc-freq-badge { background: linear-gradient(135deg, var(--tc-gold), var(--tc-gold-dark)); color: #050505; font-size: 11px; padding: 1px 6px; border-radius: 9999px; font-weight: 700; }

/* ── ASCII pre container styles ──────────────── */
.tc-aa-pre { font-family: 'Courier New', monospace; line-height: 1.1; display: inline-block; text-align: left; }
.tc-aa-pre--mono { white-space: pre; margin: 0; }

/* ── Duplicate word tags container ───────────── */
.tc-dw-tags-wrap { min-height: 120px; padding: 12px; border: 1px solid var(--tc-border); border-radius: 12px; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; }
.tc-dw-freq-wrap { min-height: 260px; max-height: 420px; overflow-y: auto; padding: 12px; border: 1px solid var(--tc-border); border-radius: 12px; display: flex; flex-direction: column; gap: 10px; }

/* ── Border top none (section widgets) ──────── */
.tc-border-top-none { border-top: none; }

/* ── Min-width utilities ────────────────────── */
.tc-min-w-20 { min-width: 20px; }
.tc-min-w-24 { min-width: 24px; }
.tc-min-w-32 { min-width: 32px; }
.tc-min-w-36 { min-width: 36px; }
.tc-min-w-260 { min-width: 260px; }

/* ── Margin-top utilities ───────────────────── */
.tc-mt-2 { margin-top: 2px; }
.tc-mt-3 { margin-top: 3px; }

/* ── Font weight 700 ────────────────────────── */
.tc-font-bold { font-weight: 700; }

/* ── Cursor pointer ─────────────────────────── */
.tc-cursor-pointer { cursor: pointer; border-radius: var(--tc-radius-sm, 6px); cursor: pointer; }

/* ── Text color utilities ───────────────────── */
.tc-text-red { color: var(--tc-danger); }
.tc-text-green { color: #22c55e; }
.tc-text-purple { color: var(--tc-accent); }

/* ── Padding utilities ──────────────────────── */
.tc-px-14 { padding-left: 14px; padding-right: 14px; }
.tc-py-12 { padding-top: 12px; padding-bottom: 12px; }
.tc-py-10 { padding-top: 10px; padding-bottom: 10px; }

/* ── Font size 1.05rem ──────────────────────── */
.tc-text-1-05rem { font-size: 1.05rem; }

/* ── Gap utilities ──────────────────────────── */
.tc-gap-12 { gap: 12px; }

/* ── Border radius sm ───────────────────────── */
.tc-radius-sm { border-radius: var(--tc-radius-sm, 6px); }

/* ── Progress fill gradient ─────────────────── */
.tc-progress-fill--gradient { background: linear-gradient(90deg, var(--tc-gold-dark), var(--tc-gold-light)); }

/* ── Delete PDF icon gradient ───────────────── */
.tc-dp-icon-grad { background: linear-gradient(135deg, var(--tc-gold-dark) 0%, var(--tc-gold) 100%); color: #050505; font-size: 24px; }

/* ── Delete PDF input ───────────────────────── */
.tc-dp-input { width: 100%; min-height: 36px; border: 1px solid var(--tc-border); border-radius: 8px; padding: 8px 12px; background: var(--tc-surface-2); color: var(--tc-text-primary); }

/* ── Delete PDF result icon ─────────────────── */
.tc-dp-result-icon { width: 100%; height: 100px; border-radius: 8px; border: 1px solid rgba(212,162,76,.25); background: linear-gradient(135deg, var(--tc-gold-dark) 0%, var(--tc-gold-bright) 50%, var(--tc-gold-light) 100%); color: #050505; font-size: 32px; }

/* ── Word cloud tag ─────────────────────────── */
.tc-wc-tag { gap: 5px; padding: 4px 10px; background: rgba(245,158,11,.08); border: 1px solid rgba(212,162,76,.2); border-radius: 99px; color: var(--tc-gold-light); }
.tc-wc-count { background: linear-gradient(135deg, var(--tc-gold), var(--tc-gold-dark)); color: #050505; border-radius: 99px; padding: 1px 6px; font-weight: 700; }

/* ── Info notice box (all-tools-page) ───────── */
.tc-info-box { background: rgba(245,158,11,.06); border: 1px solid rgba(212,162,76,.2); border-radius: 6px; line-height: 1.6; padding: 12px; color: var(--tc-text-secondary); }

/* ── Random rank badge ──────────────────────── */
.tc-rank-badge { background: var(--tc-accent); color: #fff; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ── Status notice (png-to-heic) ────────────── */
.tc-status-notice { padding: 12px 14px; }

/* ── Phonetic spelling code tag ─────────────── */
.tc-ps-code { display: inline-block; background: rgba(245,158,11,.08); border-radius: 4px; padding: 1px 6px; margin: 2px; font-size: 13px; color: var(--tc-gold-light); border: 1px solid rgba(212,162,76,.15); }

/* ── Flex helpers extended ───────────────────────────────────────── */
.tc-flex-center { display: flex; align-items: center; justify-content: center; }

/* ── Invisible text grid ─────────────────────────────────────────── */
.tc-invis-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: 14px; margin-bottom: 24px; }

/* ── Invisible text generate card ────────────────────────────────── */
.tc-invis-gen-card { padding: 20px; background: var(--tc-surface-2); border-radius: var(--tc-radius-md); border: 1px solid var(--tc-border); margin-bottom: 20px; }

/* ── Invisible text feedback ─────────────────────────────────────── */
.tc-invis-feedback { padding: 20px; background: var(--tc-surface-3); border: 1px solid var(--tc-border); border-radius: var(--tc-radius-md); text-align: center; }

/* ── Flex: items-end for select + button rows ────────────────────── */
.tc-flex-items-end { display: flex; flex-direction: column; justify-content: flex-end; }

/* ── 4col char-set grid ──────────────────────────────────────────── */

/* ── Section padding standard ────────────────────────────────────── */
.tc-p-16-20 { padding: 16px 20px; }
.tc-p-12-16 { padding: 12px 16px; }
.tc-p-10-14 { padding: 10px 14px; }

/* ── Range slider accent helper ──────────────────────────────────── */
.tc-range-accent { width: 100%; accent-color: var(--tc-accent); cursor: pointer; }

/* ── Password strength meter wrapper ─────────────────────────────── */
.tc-pw-strength-wrap { display: none; margin-top: 20px; }
.tc-pw-strength-bar  { height: 8px; background: var(--tc-surface-2); border-radius: 999px; overflow: hidden; border: 1px solid var(--tc-border); }
.tc-pw-strength-fill { height: 100%; width: 0%; border-radius: 999px; transition: width .4s, background .4s; }
.tc-pw-strength-tips { margin-top: 10px; font-size: 12px; color: var(--tc-text-secondary); line-height: 1.6; }

/* ── Phonetic output box ─────────────────────────────────────────── */
.tc-ph-output { padding: 16px; background: var(--tc-surface-2); border: 1.5px solid var(--tc-border); border-radius: var(--tc-radius-md); min-height: 100px; line-height: 2; color: var(--tc-text-secondary); }

/* ── Example grid (pattern cards) ────────────────────────────────── */
.tc-example-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }

/* ── Example card ────────────────────────────────────────────────── */
.tc-example-card  { padding: 10px; background: var(--tc-surface); border-radius: var(--tc-radius-md); }

/* ── Pattern grid (pig-latin) ────────────────────────────────────── */
.tc-pattern-grid,
.tc-grid-rmf-ref { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.tc-pattern-card { padding: 12px; background: var(--tc-surface-3); border-radius: var(--tc-radius-md); display: flex; justify-content: space-between; align-items: center; }

/* ── Options grid (whitespace remover) ───────────────────────────── */
.tc-opts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin-bottom: 20px; }

/* ── Option label (checkbox card) ────────────────────────────────── */
.tc-opt-label  { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--tc-surface-2); border: 1px solid var(--tc-border); border-radius: var(--tc-radius-md); cursor: pointer; transition: border-color var(--tc-transition); }

/* ── Option title / desc inside cards ────────────────────────────── */
.tc-opt-title { font-size: 13px; font-weight: 600; }
.tc-opt-desc   { font-size: 11px; margin-top: 2px; }

/* ── Wingdings output ────────────────────────────────────────────── */
.tc-wing-output { padding: 16px; background: var(--tc-surface-3); border: 1.5px solid var(--tc-border); border-radius: var(--tc-radius-md); min-height: 100px; font-family: 'Wingdings', serif; font-size: 24px; line-height: 1.8; color: var(--tc-text-primary); word-break: break-all; }

/* ── Wingdings reference grid ────────────────────────────────────── */
.tc-wing-ref { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 8px; }

/* ── Wingdings ref cell ──────────────────────────────────────────── */
.tc-wing-ref-cell { padding: 8px 4px; background: var(--tc-surface-3); border-radius: 6px; text-align: center; }

/* ── Find/Replace error box ──────────────────────────────────────── */
.tc-fr-error { display: none; margin-top: 12px; padding: 10px 14px; background: var(--tc-danger-soft); border: 1px solid rgba(180,83,9,.35); border-radius: 8px; color: var(--tc-danger); }

/* ── Word cloud canvas container ─────────────────────────────────── */
.tc-wc-canvas-wrap { display: none; margin-top: 20px; background: var(--tc-surface-2); border: 1.5px solid var(--tc-border); border-radius: var(--tc-radius-md); overflow: hidden; }

/* ── Word cloud freq list ────────────────────────────────────────── */
.tc-wc-freq-list { display: none; margin-top: 16px; }
.tc-wc-freq-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* ── Word freq filter/sort inputs ────────────────────────────────── */
.tc-wf-filter { background: var(--tc-surface-2); border: 1.5px solid var(--tc-border); border-radius: var(--tc-radius-sm); padding: 6px 10px; color: var(--tc-text-primary); outline: none; width: 150px; }
.tc-wf-sort   { background: var(--tc-surface-2); border: 1.5px solid var(--tc-border); border-radius: var(--tc-radius-sm); padding: 6px 10px; color: var(--tc-text-primary); outline: none; }

/* ── Word freq results header ────────────────────────────────────── */
.tc-wf-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; flex-wrap: wrap; gap: 10px; }

/* ── Word freq table wrapper ─────────────────────────────────────── */
.tc-wf-table-wrap { max-height: 420px; overflow-y: auto; border: 1.5px solid var(--tc-border); border-radius: var(--tc-radius-md); overflow: hidden; }
.tc-wf-table      { width: 100%; border-collapse: collapse; }

/* ── Word freq table head ────────────────────────────────────────── */
.tc-wf-th { background: var(--tc-surface-2); position: sticky; top: 0; }
.tc-wf-th-cell { padding: 10px 14px; font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--tc-text-muted); font-weight: 700; }

/* ── Count (number) style ────────────────────────────────────────── */

/* ── APA output box ──────────────────────────────────────────────── */
.tc-apa-output { min-height: 80px; line-height: 1.9; padding: 16px 18px; background: var(--tc-surface-2); border: 1.5px solid var(--tc-border); border-radius: var(--tc-radius-md); margin-top: 8px; }

/* ── Stat box grid ───────────────────────────────────────────────── */
.tc-stat-box-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; margin-bottom: 24px; }

/* ── Rotate PDF angle btn ────────────────────────────────────────── */
.tc-angle-btn { 
    border-radius: var(--tc-radius-sm);
    border: 1.5px solid var(--tc-border);
    background: transparent;
    color: var(--tc-text-primary);
    padding: 8px 14px;
    cursor: pointer;
    transition: all var(--tc-transition);
    font-family: var(--tc-font-lexend);
}

/* ── Info text (muted) ─────────────────────────────────────────────── */
.tc-text-info { font-size: 11px; color: var(--tc-text-muted); }

/* ── Text uppercase ──────────────────────────────────────────── */
.tc-text-uppercase { text-transform: uppercase; }

/* ── Font Georgia ────────────────────────────────────────────── */
.tc-font-georgia { font-family: Georgia, serif; }

/* ── Min width helpers ───────────────────────────────────────── */
.tc-min-w-36 { min-width: 36px; }
.tc-min-w-30 { min-width: 30px; }

/* ── Padding top ─────────────────────────────────────────────── */
.tc-pt-12 { padding-top: 12px; }

/* ── Margin top 2px ──────────────────────────────────────────── */
.tc-mt-2 { margin-top: 2px; }

/* ── Grid: 3col fr 12px gap ──────────────────────────────────── */
.tc-grid-3col-fr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }

/* ── Roman input ─────────────────────────────────────────────── */
.tc-rn-input { width: 100%; background: var(--tc-surface-2); border: 1.5px solid var(--tc-border); border-radius: var(--tc-radius-md); padding: 10px; color: var(--tc-text-primary); text-align: center; outline: none; }
.tc-rn-input-lg { width: 100%; max-width: 300px; background: var(--tc-surface-2); border: 1.5px solid var(--tc-border); border-radius: var(--tc-radius-md); padding: 12px; color: var(--tc-text-primary); font-size: 20px; text-align: center; outline: none; }

/* ── Roman result ────────────────────────────────────────────── */
.tc-rn-result-box { margin-top: 24px; padding: 32px; background: var(--tc-surface-2); border: 2px solid var(--tc-border); border-radius: var(--tc-radius-lg); text-align: center; }
.tc-rn-result-main { font-family: Georgia, serif; font-size: clamp(28px, 5vw, 52px); font-weight: 700; color: var(--tc-accent); letter-spacing: 4px; margin-bottom: 8px; }

/* ── Roman reference ─────────────────────────────────────────── */
.tc-rn-ref-section { margin-top: 60px; border: 1px solid var(--tc-border); border-radius: var(--tc-radius-lg); }
.tc-rn-ref-title { font-size: 18px; margin-bottom: 14px; }
.tc-rn-ref-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
.tc-rn-ref-cell { padding: 10px; background: var(--tc-surface-2); border-radius: var(--tc-radius-md); text-align: center; }
.tc-rn-ref-roman { font-family: Georgia, serif; font-size: 18px; font-weight: 700; color: var(--tc-accent); }
.tc-rn-ref-num { font-size: 12px; color: var(--tc-text-muted); margin-top: 2px; }

/* ── NATO output ─────────────────────────────────────────────── */
.tc-nato-output { padding: 16px; background: var(--tc-surface-2); border: 1.5px solid var(--tc-border); border-radius: var(--tc-radius-md); min-height: 80px; line-height: 2; color: var(--tc-text-secondary); }

/* ── NATO ref cell ───────────────────────────────────────────── */
.tc-nato-cell { padding: 10px 6px; background: var(--tc-surface-1); border: 1px solid var(--tc-border); border-radius: var(--tc-radius-md); text-align: center; }

/* ── NATO ref letter ─────────────────────────────────────────── */
.tc-nato-letter { font-size: 18px; font-weight: 700; color: var(--tc-accent); }

/* ── ASCII art image ─────────────────────────────────────────── */
.tc-aa-img { max-height: 160px; border-radius: var(--tc-radius-md); border: 1px solid var(--tc-border); display: inline-block; }

/* ── ASCII art output ────────────────────────────────────────── */
.tc-aa-output { min-height: 200px; background: var(--tc-surface-3); border: 1.5px solid var(--tc-border); border-radius: var(--tc-radius-md); padding: 16px; margin-top: 8px; overflow: auto; }

/* ── ASCII art placeholder ───────────────────────────────────── */
.tc-aa-placeholder { color: var(--tc-text-secondary); text-align: center; }

/* ── Grid: 2col 12px gap ─────────────────────────────────────── */
.tc-grid-2col-12 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ── Grid: 12col ─────────────────────────────────────────────── */
.tc-grid-12col { display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; margin-top: 10px; }

/* ── Random choice custom input ──────────────────────────────── */
.tc-rc-custom-input { margin-top: 8px; width: 100%; background: var(--tc-surface-2); border: 1.5px solid var(--tc-border); border-radius: var(--tc-radius-sm); color: var(--tc-text-primary); outline: none; }

/* ── Random choice badge ─────────────────────────────────────── */
.tc-rc-badge { font-size: 12px; padding: 3px 10px; border-radius: 999px; background: linear-gradient(135deg, var(--tc-gold), var(--tc-gold-dark)); color: #050505; font-weight: 700; }

/* ── Random choice result ────────────────────────────────────── */
.tc-rc-result { min-height: 100px; background: var(--tc-surface-2); border: 1.5px solid var(--tc-border); border-radius: var(--tc-radius-md); padding: 20px; margin-top: 8px; color: var(--tc-text-primary); transition: opacity .3s; }

/* ── Tip box ──────────────────────────────────────────────────── */
.tc-tip-box { background: rgba(245,158,11,.05); border: 1px solid rgba(212,162,76,.12); border-radius: 6px; margin-bottom: 20px; color: var(--tc-text-secondary); }

/* ── Border radius 8px ───────────────────────────────────────── */
.tc-rounded-8 { border-radius: 8px; }

/* ── Grid: auto-fill 200px 14px gap margin-bottom ────────────── */
.tc-grid-cards-mb { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-bottom: 20px; }

/* ── Negative margin top 12 ──────────────────────────────────── */
.tc-mt-neg-12 { margin-top: -12px; }

/* ── Button xs ────────────────────────────────────────────────── */
.tc-btn-xs { padding: 5px 10px; font-size: 12px; }

/* ── Repeat text input ───────────────────────────────────────── */
.tc-rt-input { width: 100%; background: var(--tc-surface-2); border: 1.5px solid var(--tc-border); border-radius: var(--tc-radius-md); color: var(--tc-text-primary); font-weight: 700; outline: none; }

/* ── Repeat text separator input ─────────────────────────────── */
.tc-rt-sep-input { width: 100%; background: var(--tc-surface-2); border: 1.5px solid var(--tc-border); border-radius: var(--tc-radius-md); padding: 8px 12px; color: var(--tc-text-primary); outline: none; }

/* ── Word cloud label ────────────────────────────────────────── */
.tc-wc-label { font-size: 12px; font-weight: 600; color: var(--tc-text-secondary); text-transform: uppercase; letter-spacing: .6px; display: block; margin-bottom: 6px; }

/* ── Word cloud input ────────────────────────────────────────── */
.tc-wc-input { width: 100%; background: var(--tc-surface-2); border: 1.5px solid var(--tc-border); border-radius: var(--tc-radius-md); padding: 9px 12px; color: var(--tc-text-primary); outline: none; }

/* ── Word cloud checkbox label ───────────────────────────────── */

/* ── Remove formatting ref grid ──────────────────────────────── */

/* ── Remove formatting ref cell ──────────────────────────────── */
.tc-cell-rmf-ref { padding: 10px; background: var(--tc-surface-2); border-radius: 4px; }

/* ── Accent checkbox ─────────────────────────────────────────── */

/* ── Font weight utilities ───────────────────────────────────── */
.tc-font-semibold { font-weight: 600; }
.tc-font-bold     { font-weight: 700; }
.tc-font-extra    { font-weight: 800; }

/* ── Flex: space-between ─────────────────────────────────────── */
.tc-flex-between { display: flex; justify-content: space-between; }

/* ── Align self end ──────────────────────────────────────────── */
.tc-align-self-end { align-self: flex-end; }

/* ── Width 90px ──────────────────────────────────────────────── */
.tc-w-90 { width: 90px; }

/* ── Toast notification ──────────────────────────────────────── */

/* ── Modal backdrop ──────────────────────────────────────────── */

/* ── Modal box ───────────────────────────────────────────────── */

/* ── Modal title ─────────────────────────────────────────────── */

/* ── Modal footer ────────────────────────────────────────────── */

/* ── Delete PDF grid (small previews) ────────────────────────── */

/* ── OCR drop zone ───────────────────────────────────────────── */
.tc-ocr-drop-zone { border: 2px dashed var(--tc-border); border-radius: var(--tc-radius-md); text-align: center; cursor: pointer; transition: all .25s; margin-bottom: 20px; background: var(--tc-surface-2); }

/* ── OCR preview ─────────────────────────────────────────────── */
.tc-ocr-preview { margin-bottom: 20px; text-align: center; }

/* ── OCR preview image ───────────────────────────────────────── */
.tc-ocr-img { max-height: 200px; border-radius: var(--tc-radius-md); border: 1px solid var(--tc-border); display: inline-block; }

/* ── OCR progress bar track ──────────────────────────────────── */
.tc-ocr-progress-track { height: 6px; background: var(--tc-surface-1); border-radius: 999px; overflow: hidden; border: 1px solid var(--tc-border); }

/* ── OCR progress bar fill (gradient) ────────────────────────── */
.tc-ocr-progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--tc-accent), var(--tc-gold-light)); border-radius: 999px; transition: width .3s; }

/* ── Invisible text generate label ───────────────────────────── */
.tc-invis-gen-label { font-weight: 600; color: var(--tc-text-secondary); text-transform: uppercase; letter-spacing: .8px; display: block; margin-bottom: 12px; }

/* ── Invisible text select/input ─────────────────────────────── */
.tc-invis-field { background: var(--tc-surface-3); border: 1px solid var(--tc-border); border-radius: var(--tc-radius-md); padding: 8px 12px; color: var(--tc-text-primary); outline: none; }

/* ── Password length value ───────────────────────────────────── */
.tc-pw-length-val { font-size: 24px; font-weight: 800; color: var(--tc-accent); }

/* ── Password char toggle ────────────────────────────────────── */
.tc-pw-toggle { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--tc-surface-2); border: 1.5px solid var(--tc-accent); border-radius: var(--tc-radius-md); cursor: pointer; transition: all .2s; }

/* ── Password checkmark ──────────────────────────────────────── */
.tc-pw-checkmark { width: 18px; height: 18px; border-radius: 4px; background: var(--tc-accent); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 12px; color: #fff; }

/* ── Option flex (PDF splitter mode selector) ─────────────── */
.tc-option-flex { flex: 1; justify-content: center; padding: 10px 0; }

/* ── Grid full width ──────────────────────────────────────── */

/* ── Toggle checkbox (rotate PDF) ─────────────────────────── */
.tc-toggle-checkbox { width: 18px; height: 18px; cursor: pointer; accent-color: var(--tc-accent); }

/* ── Font size 20px ────────────────────────────────────────── */
.tc-text-20 { font-size: 20px; }

/* ── Letter spacing 0.6px ──────────────────────────────────── */
.tc-tracking-06 { letter-spacing: 0.6px; }

/* ── Line height 1.8 ───────────────────────────────────────── */
.tc-leading-18 { line-height: 1.8; }

/* ── Word break all ────────────────────────────────────────── */
.tc-break-all { word-break: break-all; }

/* ══════════════════════════════════════════════════════════════════════════
   DELETE PDF PAGES — animation moved from inline <style> tag
   ══════════════════════════════════════════════════════════════════════════ */
/* ── Converter card preview image (dual-column layout) ──── */
.tc-card-preview-img { width: 100%; height: 90px; object-fit: contain; border-radius: 6px; border: 1px solid var(--tc-border); }

/* ── Converter card full image (single-image layout) ────── */
.tc-card-img-full { width: 100%; height: 100px; object-fit: contain; border-radius: 6px; }

/* ── Text single-line ellipsis ──────────────────────────── */
.tc-text-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Converter card download button ─────────────────────── */
.tc-card-dl-btn { font-size: 12px; padding: 6px 14px; display: inline-flex; }

/* ── Converter card section label ───────────────────────── */
.tc-card-label-sm { font-size: 10px; color: var(--tc-text-secondary); margin-bottom: 4px; }

/* ── Video converter drop zone ─────────────────────────── */
.tc-vc-drop-zone { border: 2px dashed var(--tc-border); border-radius: 12px; text-align: center; cursor: pointer; margin-bottom: 20px; background: var(--tc-surface-2); }
.tc-vc-info { background: var(--tc-surface-2); border: 1px solid var(--tc-border); border-radius: 8px; margin-bottom: 20px; }
.tc-vc-result { margin-top: 20px; padding: 20px; background: var(--tc-surface-2); border: 1px solid var(--tc-border); border-radius: 12px; text-align: center; }

/* ── Word frequency min-length input ───────────────────── */
.tc-wf-minlen { width: 60px; background: var(--tc-surface-3); border: 1.5px solid var(--tc-border); border-radius: 4px; padding: 4px 8px; color: var(--tc-text-primary); outline: none; }

/* ── Random date options bar ─────────────────────────── */
.tc-rd-options-bar { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; padding: 14px; background: var(--tc-surface-2); border-radius: var(--tc-radius-sm); border: 1px solid var(--tc-border); }

/* ── Margin top 40px ────────────────────────────────── */
.tc-mt-40 { margin-top: 40px; }

/* ── Thumb preview card (converter widgets) ─────────────────────────── */
.tc-thumb-card { background: var(--tc-surface-2); border: 1px solid var(--tc-border); border-radius: var(--tc-radius-md); padding: 8px; text-align: center; }

/* ── Result card (converter widgets) ────────────────────────────────── */
.tc-result-card { background: #11100d; border: 1px solid rgba(212, 162, 76, 0.25); border-radius: var(--tc-radius-md); padding: 12px; text-align: center; }

/* ── Download link supplement (extends .tc-jc-card__download) ───────── */
.tc-dl-link { margin-top: 6px; font-weight: 600; opacity: .75; }

/* ── Pages meta (rotate PDF) ────────────────────────────────────────── */
.tc-pages-meta { font-size: 0.75rem; color: var(--tc-text-muted); margin-top: 0.25rem; }

/* ── Duplicate Word: duplicate tag ──────────────────────────────────── */
.tc-dw-tag { background: var(--tc-gold-glow); color: var(--tc-accent); padding: 4px 12px; border-radius: 9999px; font-size: 13px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
.tc-dw-nomsg { color: var(--tc-text-muted); font-style: italic; }
.tc-dw-bar-row { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.tc-dw-bar-label { width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.tc-dw-bar-track { flex: 1; height: 20px; background: var(--tc-surface); border-radius: 9999px; overflow: hidden; position: relative; box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); }
.tc-dw-bar-fill { height: 100%; background: linear-gradient(90deg, var(--tc-accent), var(--tc-gold-light)); transition: width 0.4s ease; }
.tc-dw-bar-badge { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: var(--tc-bg-card, #11100d); color: var(--tc-gold-light); font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 9999px; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }

@keyframes slideInUp {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

/* ── SEO Content Sections ──────────────────────────── */
.tc-seo-wrap { margin-top: 48px; }
.tc-seo-section { padding-top: 32px; border-top: 1px solid rgba(212, 162, 76, 0.12); }
.tc-seo-section:first-of-type { border-top: none; padding-top: 0; }
.tc-seo-section h2 { font-family: var(--tc-font-display); font-size: clamp(22px,3vw,34px); margin: 0 0 20px; color: var(--tc-text-primary); line-height: 1.2; font-weight: 700; }
.tc-seo-section h3 { font-family: var(--tc-font-display); font-size: 15px; margin: 0 0 10px; color: var(--tc-gold-light); font-weight: 600; letter-spacing: 0.3px; }
.tc-seo-section p, .tc-seo-section li { color: var(--tc-text-secondary); line-height: 1.7; font-size: 14px; }
.tc-seo-section p { margin: 0 0 14px; }
.tc-seo-section ul, .tc-seo-section ol { margin: 0 0 16px; padding-left: 20px; }
.tc-seo-section li { margin-bottom: 8px; }
.tc-seo-section li strong { color: var(--tc-text-primary); }

/* ── Feature Cards Grid (SEO) ──────────────────── */
.tc-feature-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(190px,1fr)); gap: 14px; margin-bottom: 24px; }
.tc-feature-card { background: linear-gradient(145deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025)), #11100d; border: 1px solid rgba(212,162,76,0.25); border-radius: var(--tc-radius-md); padding: 20px 16px; text-align: center; transition: var(--tc-transition); box-shadow: 0 8px 32px rgba(0,0,0,0.70); }
.tc-feature-card:hover { border-color: rgba(255,204,102,0.55); transform: translateY(-2px); box-shadow: 0 24px 70px rgba(245,158,11,0.18); }
.tc-feature-card__icon { font-size: 26px; margin-bottom: 10px; display: block; color: var(--tc-gold-light); }
.tc-feature-card__title { font-size: 14px; font-weight: 600; margin: 0 0 4px; color: var(--tc-text-primary); }
.tc-feature-card__desc { font-size: 12px; margin: 0; color: var(--tc-text-secondary); line-height: 1.5; }

/* ── How-To Steps ──────────────────────────────── */
.tc-steps { list-style: none; padding: 0; margin: 0 0 24px; counter-reset: tc-step; }
.tc-step-item { counter-increment: tc-step; display: flex; gap: 14px; align-items: flex-start; margin-bottom: 12px; padding: 16px 18px; background: linear-gradient(135deg, var(--tc-surface-2), var(--tc-surface-3)); border: 1px solid var(--tc-border); border-radius: var(--tc-radius-md); transition: var(--tc-transition); }
.tc-step-item:hover { border-color: var(--tc-border-hover); box-shadow: var(--tc-shadow-gold); }
.tc-step-item::before { content: counter(tc-step); width: 32px; height: 32px; background: linear-gradient(135deg, var(--tc-gold), var(--tc-gold-dark)); color: #050505; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; box-shadow: 0 2px 8px rgba(245,158,11,0.2); }
.tc-step-item strong { display: block; color: var(--tc-text-primary); margin-bottom: 3px; font-size: 13px; }
.tc-step-item span { color: var(--tc-text-secondary); font-size: 13px; line-height: 1.6; }

/* ── Related Tools (internal linking) ──────────── */
.tc-related-tools-list { list-style: none; padding: 0 !important; margin: 0; display: grid; grid-template-columns: repeat(auto-fill,minmax(190px,1fr)); gap: 10px; }
.tc-related-tools-list li { margin: 0; }
.tc-related-tools-list a { display: block; padding: 10px 14px; background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)); border: 1px solid rgba(212,162,76,0.2); border-radius: var(--tc-radius-md); color: var(--tc-gold-light); font-size: 13px; font-weight: 500; text-decoration: none; transition: var(--tc-transition); }
.tc-related-tools-list a:hover { border-color: var(--tc-gold); background: rgba(212,162,76,0.08); color: var(--tc-gold); box-shadow: 0 4px 16px rgba(245,158,11,0.12); }

/* ── FAQ Accordion ─────────────────────────────── */
/* ── FAQ Accordion (schema.org microdata structure) ──────────────────── */
/* ── FAQ accordion (premium black/gold) ─────────────────────────────────── */
.textcraft-tools .tc-faq-accordion {
    margin-top: 36px;
}
.textcraft-tools .tc-faq-accordion .tc-faq-item {
    position: relative;
    background: linear-gradient(145deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)), #11100d;
    border: 1px solid rgba(212, 162, 76, 0.28);
    border-radius: var(--tc-radius-md);
    margin-bottom: 14px;
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 16px 45px rgba(0,0,0,0.45);
}
.textcraft-tools .tc-faq-accordion .tc-faq-item:hover {
    border-color: rgba(255, 204, 102, 0.55);
    /*box-shadow: 0 20px 60px rgba(245, 158, 11, 0.16);*/
}
.textcraft-tools .tc-faq-accordion .tc-faq-item.is-open {
    border-color: rgba(255, 204, 102, 0.55);
    /*box-shadow: 0 20px 60px rgba(245, 158, 11, 0.16);*/
}
.textcraft-tools .tc-faq-accordion .tc-faq-question {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100% !important;
    margin: 0 !important;
    padding: 18px 24px !important;
    font-family: var(--tc-font-lexend) !important;
    font-size: clamp(15px, 1vw, 17px) !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: #ffcc66 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-align: left !important;
    cursor: pointer !important;
    position: relative;
    transition: color 0.3s ease, background 0.3s ease;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-decoration: none !important;
    outline: none !important;
}
.textcraft-tools .tc-faq-accordion .tc-faq-question-text {
    flex: 1 1 auto;
}
.textcraft-tools .tc-faq-accordion .tc-faq-icon {
    flex-shrink: 0;
    font-size: 24px;
    font-weight: 300;
    color: #f59e0b;
    line-height: 1;
    transition: transform 0.3s ease, color 0.3s ease;
}
.textcraft-tools .tc-faq-accordion .tc-faq-item.is-open .tc-faq-icon {
    color: #ffcc66;
}
.textcraft-tools .tc-faq-accordion .tc-faq-answer {
    display: block !important;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0 24px;
}
.textcraft-tools .tc-faq-accordion .tc-faq-item.is-open .tc-faq-answer {
    max-height: 500px;
    padding: 16px 24px 20px;
    border-top: 1px solid rgba(212, 162, 76, 0.15);
}
.textcraft-tools .tc-faq-accordion .tc-faq-answer p {
    color: #d8c8aa !important;
    font-family: var(--tc-font-lexend) !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
    margin: 0 0 10px !important;
}
.textcraft-tools .tc-faq-accordion .tc-faq-answer p:last-child {
    margin-bottom: 0 !important;
}

/* ── Premium redesign: hero card, feature grid, benefit grid, highlight, FAQ ── */

/* ── Full-width container ────────────────────────────────────────────── */
.textcraft-tools.tc-premium-wrap {
    position: relative;
    overflow-x: clip;
    box-sizing: border-box;
    max-width: 100%;
}
.textcraft-tools.tc-premium-wrap *,
.textcraft-tools.tc-premium-wrap *::before,
.textcraft-tools.tc-premium-wrap *::after {
    box-sizing: border-box;
}
.textcraft-tools .tc-premium-tools-section {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
    padding: 60px 0 80px;
    /*background: radial-gradient(ellipse 85% 45% at 50% 0%, rgba(245,158,11,0.07) 0%, transparent 60%),
                radial-gradient(ellipse 50% 35% at 20% 100%, rgba(212,162,76,0.04) 0%, transparent 50%),
                linear-gradient(180deg, #070705 0%, #0b0906 35%, #0a0805 100%);*/
    border-top: 1px solid rgba(212,162,76,0.15);
    border-bottom: 1px solid rgba(212,162,76,0.12);
    position: relative;
    overflow: hidden;
}
.textcraft-tools .tc-premium-tools-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,204,102,0.4), transparent);
}
.textcraft-tools .tc-premium-tools-inner {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
}

/* ── Hero card ───────────────────────────────────────────────────────── */
.textcraft-tools .tc-seo-hero-card {
    text-align: center;
    padding: 40px 32px 36px;
    margin-bottom: 48px;
    background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(245,158,11,0.06) 0%, transparent 70%);
    border: 1px solid rgba(212,162,76,0.18);
    border-radius: 20px;
    position: relative;
}
.textcraft-tools .tc-seo-hero-badge {
    display: inline-block;
    padding: 6px 18px;
    margin-bottom: 20px;
    font-family: var(--tc-font-lexend);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #050505;
    background: linear-gradient(135deg, #ffcc66, #f59e0b);
    border-radius: 999px;
}
.textcraft-tools .tc-seo-hero-title {
    font-family: var(--tc-font-display);
    font-size: clamp(26px, 3.4vw, 38px);
    font-weight: 700;
    color: var(--tc-text);
    margin: 0 0 18px;
    line-height: 1.2;
}
.textcraft-tools .tc-seo-hero-intro {
    font-family: var(--tc-font-lexend);
    font-size: 15px;
    line-height: 1.75;
    color: var(--tc-text-soft);
    max-width: 740px;
    margin: 0 auto 24px;
}
.textcraft-tools .tc-seo-hero-stats {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}
.textcraft-tools .tc-seo-hero-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 28px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(212,162,76,0.15);
    border-radius: 12px;
    min-width: 110px;
}
.textcraft-tools .tc-seo-hero-stat-num {
    font-family: var(--tc-font-display);
    font-size: 20px;
    font-weight: 700;
    color: var(--tc-accent);
    line-height: 1.2;
}
.textcraft-tools .tc-seo-hero-stat-label {
    font-family: var(--tc-font-lexend);
    font-size: 12px;
    color: var(--tc-text-secondary);
    line-height: 1.3;
}

/* ── Feature grid (category cards) ───────────────────────────────────── */
.textcraft-tools .tc-seo-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 48px;
}
.textcraft-tools .tc-seo-feature-card {
    position: relative;
    padding: 28px 24px 24px;
    background: linear-gradient(145deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)), #11100d;
    border: 1px solid rgba(212,162,76,0.18);
    border-radius: 16px;
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.textcraft-tools .tc-seo-feature-card:hover {
    border-color: rgba(255,204,102,0.45);
    box-shadow: 0 16px 48px rgba(245,158,11,0.10);
    transform: translateY(-2px);
}
.textcraft-tools .tc-seo-feature-icon {
    display: block;
    font-size: 32px;
    line-height: 1;
    margin-bottom: 16px;
}
.textcraft-tools .tc-seo-feature-title {
    font-family: var(--tc-font-display) !important;
    font-size: clamp(16px, 1.2vw, 19px) !important;
    font-weight: 600 !important;
    color: var(--tc-text) !important;
    margin: 0 0 10px !important;
    line-height: 1.3 !important;
}
.textcraft-tools .tc-seo-feature-desc {
    font-family: var(--tc-font-lexend) !important;
    font-size: 13px !important;
    line-height: 1.7 !important;
    color: var(--tc-text-soft) !important;
    margin: 0 !important;
}

/* ── SEO Image + Description two-column section ──────────────────────── */
.textcraft-tools .tc-seo-media-section {
    margin-bottom: 48px;
    padding: 36px 36px;
    background: radial-gradient(ellipse 50% 100% at 30% 50%, rgba(245,158,11,0.04) 0%, transparent 70%),
                rgba(11,9,6,0.5);
    border: 1px solid rgba(212,162,76,0.20);
    border-radius: 18px;
}
.textcraft-tools .tc-seo-media-grid {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 36px;
    align-items: center;
}
.textcraft-tools .tc-seo-media-visual {
    display: flex;
    align-items: center;
    justify-content: center;
}
.textcraft-tools .tc-seo-media-image {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.textcraft-tools .tc-seo-media-image.tc-seo-media-icon-fallback {
    background: radial-gradient(circle at 30% 30%, rgba(245,158,11,0.12), rgba(212,162,76,0.06));
    border: 1px solid rgba(212,162,76,0.25);
}
.textcraft-tools .tc-seo-media-emoji {
    font-size: 56px;
    line-height: 1;
    filter: drop-shadow(0 4px 12px rgba(245,158,11,0.15));
}
.textcraft-tools .tc-seo-media-content {
    min-width: 0;
}
.textcraft-tools .tc-seo-media-title {
    font-family: var(--tc-font-display) !important;
    font-size: clamp(18px, 1.8vw, 24px) !important;
    font-weight: 600 !important;
    color: var(--tc-text) !important;
    margin: 0 0 14px !important;
    line-height: 1.3 !important;
}
.textcraft-tools .tc-seo-media-desc {
    font-family: var(--tc-font-lexend) !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    color: var(--tc-text-soft) !important;
    margin: 0 !important;
}

/* ── Benefit grid ────────────────────────────────────────────────────── */
.textcraft-tools .tc-seo-benefit-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 48px;
}
.textcraft-tools .tc-seo-benefit-card {
    position: relative;
    padding: 28px 20px 24px;
    text-align: center;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(212,162,76,0.13);
    border-radius: 16px;
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.textcraft-tools .tc-seo-benefit-card:hover {
    border-color: rgba(255,204,102,0.35);
    box-shadow: 0 12px 36px rgba(245,158,11,0.08);
}
.textcraft-tools .tc-seo-benefit-icon {
    display: block;
    font-size: 28px;
    line-height: 1;
    margin-bottom: 14px;
}
.textcraft-tools .tc-seo-benefit-title {
    font-family: var(--tc-font-display) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--tc-text) !important;
    margin: 0 0 8px !important;
    line-height: 1.3 !important;
}
.textcraft-tools .tc-seo-benefit-desc {
    font-family: var(--tc-font-lexend) !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: var(--tc-text-soft) !important;
    margin: 0 !important;
}

/* ── Highlight card ──────────────────────────────────────────────────── */
.textcraft-tools .tc-seo-highlight-card {
    position: relative;
    padding: 36px 36px;
    margin-bottom: 48px;
    background: radial-gradient(ellipse 60% 100% at 70% 50%, rgba(245,158,11,0.05) 0%, transparent 70%),
                linear-gradient(145deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01)), #11100d;
    border: 1px solid rgba(212,162,76,0.22);
    border-radius: 18px;
    overflow: hidden;
}
.textcraft-tools .tc-seo-highlight-grid {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 36px;
    align-items: center;
}
.textcraft-tools .tc-seo-highlight-visual {
    display: flex;
    align-items: center;
    justify-content: center;
}
.textcraft-tools .tc-seo-highlight-icon {
    font-size: 64px;
    line-height: 1;
    filter: drop-shadow(0 4px 16px rgba(245,158,11,0.18));
}
.textcraft-tools .tc-seo-highlight-title {
    font-family: var(--tc-font-display) !important;
    font-size: clamp(20px, 2vw, 26px) !important;
    font-weight: 600 !important;
    color: var(--tc-text) !important;
    margin: 0 0 14px !important;
    line-height: 1.3 !important;
}
.textcraft-tools .tc-seo-highlight-desc {
    font-family: var(--tc-font-lexend) !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    color: var(--tc-text-soft) !important;
    margin: 0 !important;
}

/* ── FAQ accordion section ───────────────────────────────────────────── */
.textcraft-tools .tc-seo-faq-title {
    font-family: var(--tc-font-display) !important;
    font-size: clamp(22px, 2.6vw, 30px) !important;
    font-weight: 700 !important;
    color: var(--tc-text) !important;
    margin: 0 0 28px !important;
    line-height: 1.2 !important;
    text-align: center;
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 860px) {
    .textcraft-tools .tc-seo-feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .textcraft-tools .tc-seo-benefit-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 700px) {
    .textcraft-tools .tc-seo-hero-card {
        padding: 28px 18px 24px;
    }
    .textcraft-tools .tc-seo-media-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .textcraft-tools .tc-seo-media-visual {
        max-width: 160px;
        margin: 0 auto;
    }
    .textcraft-tools .tc-seo-highlight-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        text-align: center;
    }
    .textcraft-tools .tc-seo-highlight-visual {
        max-width: 120px;
        margin: 0 auto;
    }
    .textcraft-tools .tc-premium-tools-section {
        padding: 40px 0 56px;
    }
    .textcraft-tools .tc-seo-media-section {
        padding: 24px 20px;
    }
    .textcraft-tools .tc-seo-highlight-card {
        padding: 28px 20px;
    }
}
@media (max-width: 520px) {
    .textcraft-tools .tc-seo-feature-grid {
        grid-template-columns: 1fr;
    }
    .textcraft-tools .tc-seo-benefit-grid {
        grid-template-columns: 1fr;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE / FLUID — Pixel-perfect across all devices
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Fluid typography base ─────────────────────────────────────────────── */
.tc-widget-wrap { font-size: clamp(14px, 1.8vw, 16px); }

/* ── Text size utilities with fluid fallback ─────────────────────────── */
.tc-text-11 { font-size: clamp(10px, 1.4vw, 11px); }
.tc-text-12 { font-size: clamp(11px, 1.5vw, 12px); }
.tc-text-13 { font-size: clamp(12px, 1.6vw, 13px); }
.tc-text-14,
.tc-text-15 { font-size: clamp(13px, 1.8vw, 15px); }

/* ── Overflow / word-break safety ─────────────────────────────────────── */
.tc-long-text,
.tc-code-block,
.tc-textarea,
.tc-result-card p,
.tc-atp-card-desc,
.tc-seo-card__desc,
.tc-faq-answer,
.tc-toast,
.tc-toast-fixed,
.tc-card-desc { overflow-wrap: break-word; word-wrap: break-word; }

.tc-pre-wrap,
pre.tc-aa-pre { white-space: pre-wrap; word-break: break-word; }

/* ── Image safety ─────────────────────────────────────────────────────── */
.tc-conv-thumb,
.tc-conv-thumb-lg,
.tc-card-img-full,
.tc-ja-card-thumb,
.tc-jh-card-thumb,
.tc-h2j-card__image,
.tc-result-card img,
.tc-card-img { max-width: 100%; height: auto; }

/* ── Touch-friendly sizing ────────────────────────────────────────────── */
@media (hover: hover) and (pointer: coarse) {
    .tc-btn,
    .tc-btn-case,
    .tc-text-input,
    select.tc-text-input,
    .tc-input-md { min-height: 44px; }

    .tc-btn { padding: 12px 20px; }
    .tc-btn-case { padding: 14px 16px; }
}

/* ── Small phones (≤360px) ────────────────────────────────────────────── */
@media (max-width: 360px) {
    .tc-tool-card { padding: 14px; }
    .tc-hero { padding: 24px 0 16px; }
    .tc-hero__title { font-size: clamp(22px, 7vw, 28px); }
    .tc-hero__subtitle { font-size: 14px; }
    .tc-btn-row { flex-direction: column; }
    .tc-btn-row .tc-btn { width: 100%; justify-content: center; }
    .tc-btn-case { padding: 11px 12px; }
    .tc-btn-case__preview { display: none; }
    .tc-stat { min-width: 45px; }
    .tc-stat__value { font-size: 17px; }
    .tc-grid-2col,
    .tc-grid-settings,
    .tc-grid-settings-sm,
    .tc-settings-grid { grid-template-columns: 1fr; }
    .tc-grid-3col { grid-template-columns: 1fr; }
    .tc-options-row { flex-direction: column; gap: 10px; }
    .tc-case-buttons { grid-template-columns: 1fr; }
    select.tc-text-input,
    .tc-text-input,
    .tc-input-md { font-size: 13px; }
    .tc-atp-hero-title { font-size: clamp(20px, 7vw, 28px); }
    .tc-atp-card-icon { font-size: 22px; }
    .tc-drop-zone { padding: 24px 16px; }
    .tc-drop-title { font-size: 14px; }
    .tc-drop-desc { font-size: 11px; }
    .tc-modal,
    .tc-modal-box { padding: 16px; width: 96vw; }
    .tc-section-header { margin-bottom: 24px; }
    .tc-section-title { font-size: clamp(18px, 6vw, 24px); }
}

/* ── Mobile (361px – 480px) ────────────────────────────────────────────── */
@media (min-width: 361px) and (max-width: 480px) {
    .tc-tool-card { padding: 16px; }
    .tc-stat { min-width: 50px; }
    .tc-stat__value { font-size: 18px; }
    .tc-grid-2col,
    .tc-grid-settings,
    .tc-grid-settings-sm,
    .tc-settings-grid { grid-template-columns: 1fr; }
    .tc-grid-3col { grid-template-columns: 1fr; }
    .tc-case-buttons { grid-template-columns: 1fr 1fr; }
    .tc-btn-row .tc-btn { flex: 1; justify-content: center; }
    .tc-drop-zone { padding: 28px 18px; }
    .tc-modal,
    .tc-modal-box { padding: 18px; width: 94vw; }
}

/* ── Mobile landscape / Small tablet (481px – 640px) ──────────────────── */
@media (min-width: 481px) and (max-width: 640px) {
    .tc-grid-3col { grid-template-columns: 1fr 1fr; }
    .tc-grid-4col,
    .tc-grid-4col-10 { grid-template-columns: 1fr 1fr; }
    .tc-atp-grid { grid-template-columns: repeat(2, 1fr); }
    .tc-drop-zone { padding: 32px 20px; }
}

/* ── Tablet portrait (641px – 820px) ──────────────────────────────────── */
@media (min-width: 641px) and (max-width: 820px) {
    .tc-grid-3col { grid-template-columns: 1fr 1fr; }
    .tc-grid-4col,
    .tc-grid-4col-10 { grid-template-columns: repeat(2, 1fr); }
    .tc-atp-grid { grid-template-columns: repeat(2, 1fr); }
    .tc-tools-grid { grid-template-columns: repeat(2, 1fr); }
    .tc-features-grid { grid-template-columns: repeat(2, 1fr); }
    .tc-seo-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Tablet landscape (821px – 1024px) ────────────────────────────────── */
@media (min-width: 821px) and (max-width: 1024px) {
    .tc-grid-4col,
    .tc-grid-4col-10 { grid-template-columns: repeat(3, 1fr); }
    .tc-atp-grid { grid-template-columns: repeat(3, 1fr); }
    .tc-tools-grid { grid-template-columns: repeat(3, 1fr); }
    .tc-features-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Small laptop (1025px – 1280px) ───────────────────────────────────── */
@media (min-width: 1025px) and (max-width: 1280px) {
    .tc-atp-grid { grid-template-columns: repeat(4, 1fr); }
    .tc-tools-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── Large desktop / Ultra-wide (≥1440px) ─────────────────────────────── */
@media (min-width: 1440px) {
    .tc-tool-card { padding: 32px; }
    .tc-hero { padding: 72px 0 40px; }
    .tc-hero__subtitle { max-width: 600px; }
    .tc-features-section,
    .tc-seo-section,
    .tc-tools-section { padding: 80px 0; }
    .tc-section-header { margin-bottom: 56px; }
    .tc-atp-grid { grid-template-columns: repeat(5, 1fr); }
    .tc-grid-cards { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

/* ── Ultra-wide (≥1920px) ─────────────────────────────────────────────── */
@media (min-width: 1920px) {
    .tc-atp-grid { grid-template-columns: repeat(6, 1fr); }
    .tc-tools-grid { grid-template-columns: repeat(5, 1fr); }
    .tc-features-grid { grid-template-columns: repeat(4, 1fr); }
    .tc-seo-grid { grid-template-columns: repeat(4, 1fr); }
    .tc-grid-cards { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

/* ── Modal responsiveness for medium screens ──────────────────────────── */
@media (max-width: 667px) {
    .tc-modal,
    .tc-modal-box {
        width: 94vw;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        padding: 18px;
    }
}

@media (min-width: 668px) and (max-width: 900px) {
    .tc-modal,
    .tc-modal-box {
        width: 80vw;
        max-width: 600px;
    }
}

/* ── Drop-zone responsive ─────────────────────────────────────────────── */
.tc-drop-zone {
    padding: clamp(24px, 5vw, 48px) clamp(16px, 3vw, 32px);
    cursor: pointer;
    border: 2px dashed rgba(212, 162, 76, 0.2);
}

/* ── Section header fluid spacing ─────────────────────────────────────── */
.tc-section-header { margin-bottom: clamp(32px, 4vw, 56px); }

/* ══════════════════════════════════════════════════════════════════════════
   LUXURY CINEMATIC — Background effects & premium extras
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Subtle dot pattern background ──────────────────────────────────────── */
.tc-dot-bg {
    position: relative;
    z-index: 0;
}
.tc-dot-bg::before {
    content: ''; position: fixed; inset: 0; z-index: -1;
    background-image: radial-gradient(rgba(245, 158, 11, 0.06) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
}

/* ── Golden radial glow ───────────────────────────────────────────────── */
.tc-glow {
    position: relative;
    z-index: 0;
}
.tc-glow::after {
    content: ''; position: absolute; z-index: -1;
    width: 600px; height: 600px;
    top: -200px; right: -200px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.05) 0%, transparent 70%);
    pointer-events: none;
}

/* ── Premium glass card (alternative to tool-card for special sections) ── */
.tc-glass-card {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025)),
        #11100d;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(212, 162, 76, 0.25);
    border-radius: var(--tc-radius-lg);
    padding: 28px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.70), inset 0 1px 0 rgba(245,158,11,0.05);
    transition: var(--tc-transition);
}
.tc-glass-card:hover {
    border-color: rgba(255, 204, 102, 0.55);
    box-shadow: 0 24px 70px rgba(245,158,11,0.18), inset 0 1px 0 rgba(245,158,11,0.08);
    transform: translateY(-3px);
}

/* ── Premium gold accent divider ────────────────────────────────────────── */
.tc-gold-divider {
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--tc-gold), transparent);
    border: none;
    margin: 32px 0;
    opacity: 0.3;
}

/* ── Converter card improvement ─────────────────────────────────────────── */
.tc-result-card,
.tc-h2j-card,
.tc-h2p-card,
.tc-h2s-card,
.tc-jc-card,
.tc-pc-card,
.tc-wc-card,
.tc-gc-card,
.tc-svgc-card,
.tc-ja-card,
.tc-jh-card {
    background: linear-gradient(135deg, var(--tc-surface-2), var(--tc-surface-3));
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius-md);
    overflow: hidden;
    transition: border-color var(--tc-transition), box-shadow var(--tc-transition);
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.03);
}
.tc-result-card:hover,
.tc-h2j-card:hover,
.tc-h2p-card:hover,
.tc-h2s-card:hover,
.tc-jc-card:hover,
.tc-pc-card:hover,
.tc-wc-card:hover,
.tc-gc-card:hover,
.tc-svgc-card:hover,
.tc-ja-card:hover,
.tc-jh-card:hover {
    border-color: var(--tc-border-hover);
    box-shadow: var(--tc-shadow-gold), 0 0 0 1px rgba(245, 158, 11, 0.06);
}
.tc-result-card .tc-btn--primary,
.tc-h2j-card .tc-btn--primary,
.tc-h2p-card .tc-btn--primary,
.tc-h2s-card .tc-btn--primary,
.tc-jc-card .tc-btn--primary,
.tc-pc-card .tc-btn--primary,
.tc-wc-card .tc-btn--primary,
.tc-gc-card .tc-btn--primary,
.tc-svgc-card .tc-btn--primary,
.tc-ja-card .tc-btn--primary,
.tc-jh-card .tc-btn--primary,
.tc-ja-dl-btn,
.tc-jh-card-dl {
    background: linear-gradient(135deg, #d4a24c 0%, #c9973f 50%, #8a5a08 100%);
    color: #050505;
    font-weight: 700;
    border: 1px solid rgba(255, 204, 102, 0.35);
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.2);
}
.tc-result-card .tc-btn--primary:hover,
.tc-ja-dl-btn:hover,
.tc-jh-card-dl:hover {
    background: linear-gradient(135deg, #ffcc66 0%, #f59e0b 45%, #b8860b 100%);
    box-shadow: 0 14px 40px rgba(245, 158, 11, 0.25);
    opacity: 1;
    color: #050505;
}

/* ── Progress bar gold accent ──────────────────────────────────────────── */
.tc-progress-fill,
.tc-h2j-progress__bar,
.tc-h2p-progress__bar,
.tc-h2s-progress__bar {
    background: linear-gradient(90deg, var(--tc-gold-dark), var(--tc-gold-bright), var(--tc-gold-light)) !important;
}

/* ── Hero accent gradient (gold text) ──────────────────────────────────── */
.tc-accent-gradient {
    background: linear-gradient(135deg, var(--tc-gold-dark), var(--tc-gold), var(--tc-gold-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Badge / Soon / count badge gold update ────────────────────────────── */
.tc-tool-link-card--soon .tc-tl-name::after {
    background: rgba(245, 158, 11, 0.10) !important;
    color: var(--tc-gold-light) !important;
    border: 1px solid rgba(212, 162, 76, 0.2);
}

/* ── No results state ──────────────────────────────────────────────────── */
.tc-atp-no-results-icon { color: var(--tc-gold); opacity: 0.5; }

/* ── Toast notification gold ───────────────────────────────────────────── */
.tc-toast-fixed {
    background: linear-gradient(135deg, var(--tc-surface-2), var(--tc-surface-3));
    border: 1px solid rgba(212, 162, 76, 0.25);
    color: var(--tc-text-primary);
    box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(245,158,11,0.06);
}

/* ══════════════════════════════════════════════════════════════════════════
   ADSENSE-READY SPACING SLOTS (no ads inserted — placeholder classes only)
   ══════════════════════════════════════════════════════════════════════════ */
.tc-ad-slot { display: block; width: 100%; min-height: 1px; }
.tc-ad-slot-top { margin-bottom: 32px; min-height: 90px; }
.tc-ad-slot-middle { margin: 40px 0; min-height: 90px; }
.tc-ad-slot-before-faq { margin: 48px 0 24px; min-height: 90px; }
.tc-ad-slot-sidebar { min-height: 250px; width: 100%; max-width: 300px; margin: 0 auto 32px; }

/* ══════════════════════════════════════════════════════════════════════════
   PREMIUM EFFECTS — Golden dust particles + card sheen
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Dust / golden particle background ────────────────────────────────── */
.tc-section-has-dust {
    position: relative;
    overflow: hidden;
}

.tc-section-has-dust .tc-dust {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.tc-section-has-dust .tc-dust span {
    position: absolute;
    display: block;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.45);
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.35);
    animation: tcDustFloat 12s linear infinite;
}

.tc-section-has-dust .tc-dust span:nth-child(1)  { width: 3px; height: 3px;  top: 15%;  left: 10%;  animation-delay: 0s;    animation-duration: 11s; }
.tc-section-has-dust .tc-dust span:nth-child(2)  { width: 5px; height: 5px;  top: 60%;  left: 20%;  animation-delay: 1.2s; animation-duration: 14s; }
.tc-section-has-dust .tc-dust span:nth-child(3)  { width: 2px; height: 2px;  top: 30%;  left: 40%;  animation-delay: 2.8s; animation-duration: 10s; }
.tc-section-has-dust .tc-dust span:nth-child(4)  { width: 4px; height: 4px;  top: 75%;  left: 55%;  animation-delay: 0.6s; animation-duration: 13s; }
.tc-section-has-dust .tc-dust span:nth-child(5)  { width: 3px; height: 3px;  top: 10%;  left: 70%;  animation-delay: 3.5s; animation-duration: 12s; }
.tc-section-has-dust .tc-dust span:nth-child(6)  { width: 5px; height: 5px;  top: 50%;  left: 85%;  animation-delay: 1.8s; animation-duration: 15s; }
.tc-section-has-dust .tc-dust span:nth-child(7)  { width: 2px; height: 2px;  top: 85%;  left: 5%;   animation-delay: 4.2s; animation-duration: 9s;  }
.tc-section-has-dust .tc-dust span:nth-child(8)  { width: 4px; height: 4px;  top: 40%;  left: 95%;  animation-delay: 0.3s; animation-duration: 11s; }
.tc-section-has-dust .tc-dust span:nth-child(9)  { width: 3px; height: 3px;  top: 5%;   left: 50%;  animation-delay: 5.0s; animation-duration: 13s; }
.tc-section-has-dust .tc-dust span:nth-child(10) { width: 2px; height: 2px;  top: 70%;  left: 35%;  animation-delay: 2.0s; animation-duration: 10s; }

@keyframes tcDustFloat {
    0%   { transform: translate3d(0, 0, 0) scale(1);    opacity: 0.15; }
    50%  { opacity: 0.65; }
    100% { transform: translate3d(20px, -40px, 0) scale(1.15); opacity: 0.15; }
}

.tc-section-has-dust > *:not(.tc-dust) {
    position: relative;
    z-index: 2;
}

/* ── Card sheen hover effect ──────────────────────────────────────────── */
.tc-card-sheen {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -130%;
    width: 60%;
    background: linear-gradient(
        115deg,
        transparent 0%,
        rgba(255, 255, 255, 0.05) 38%,
        rgba(245, 158, 11, 0.12) 50%,
        rgba(255, 255, 255, 0.05) 62%,
        transparent 100%
    );
    transform: skewX(-12deg);
    pointer-events: none;
    z-index: 3;
    transition: left 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.tc-tool-card:hover .tc-card-sheen,
.tc-atp-card:hover .tc-card-sheen,
.tc-tool-link-card:hover .tc-card-sheen,
.tc-feature-card:hover .tc-card-sheen,
.tc-seo-card:hover .tc-card-sheen,
.tc-glass-card:hover .tc-card-sheen,
.tc-faq-item:hover .tc-card-sheen {
    left: 130%;
}

/* ── Scoped typography — Playfair for headings, Lexend for body ───────── */
.textcraft-tools h1,
.textcraft-tools h2,
.textcraft-tools h3,
.textcraft-tools h4,
.textcraft-tools h5,
.textcraft-tools h6,
.textcraft-tools .tc-hero__title,
.textcraft-tools .tc-section-title,
.textcraft-tools .tc-atp-hero__title,
.textcraft-tools .tc-atp-cat-title,
.textcraft-tools .tc-tl-name,
.textcraft-tools .tc-atp-card-name,
.textcraft-tools .tc-atp-card__name,
.textcraft-tools .tc-feature-card__title,
.textcraft-tools .tc-seo-card__name,
.textcraft-tools .tc-card-title,
.textcraft-tools .tc-category-title,
.textcraft-tools .tc-atp-card-title {
    font-family: var(--tc-font-display);
}

.textcraft-tools p,
.textcraft-tools li,
.textcraft-tools label,
.textcraft-tools input,
.textcraft-tools textarea,
.textcraft-tools select,
.textcraft-tools button:not(.tc-btn--primary):not(.tc-btn--ghost):not(.tc-btn--danger):not(.tc-btn--secondary),
.textcraft-tools .tc-drop-title,
.textcraft-tools .tc-drop-desc,
.textcraft-tools .tc-drop-desc-sm,
.textcraft-tools .tc-result-text,
.textcraft-tools .tc-help-text,
.textcraft-tools .tc-stat-label,
.textcraft-tools .tc-progress-label,
.textcraft-tools .tc-atp-card-desc,
.textcraft-tools .tc-badge,
.textcraft-tools .tc-tag,
.textcraft-tools .tc-step-item {
    font-family: var(--tc-font-lexend);
}

/* ── BLOCK 1: Catch-all gold hover for all buttons inside plugin ────────── */
.textcraft-tools button:hover,
.textcraft-tools button:focus,
.textcraft-tools [type="button"]:hover,
.textcraft-tools [type="button"]:focus,
.textcraft-tools [type="submit"]:hover,
.textcraft-tools [type="submit"]:focus,
.textcraft-tools .tc-btn:hover,
.textcraft-tools .tc-btn:focus,
.textcraft-tools .tc-button:hover,
.textcraft-tools .tc-button:focus,
.textcraft-tools .elementor-button:hover,
.textcraft-tools .elementor-button:focus {
    background: linear-gradient(135deg, #ffcc66 0%, #f59e0b 45%, #b8860b 100%) !important;
    background-color: #f59e0b !important;
    color: #050505 !important;
    border-color: rgba(255, 204, 102, 0.65) !important;
    box-shadow: 0 14px 40px rgba(245, 158, 11, 0.25) !important;
    text-decoration: none !important;
}

/* ── BLOCK 2: Restore dark/secondary button hover style (overrides block 1) ── */
.textcraft-tools .tc-btn--ghost:hover,
.textcraft-tools .tc-btn--ghost:focus,
.textcraft-tools .tc-btn--secondary:hover,
.textcraft-tools .tc-btn--secondary:focus {
    background: rgba(245, 158, 11, 0.10) !important;
    background-color: rgba(245, 158, 11, 0.10) !important;
    color: #ffcc66 !important;
    border-color: rgba(255, 204, 102, 0.55) !important;
    box-shadow: 0 12px 36px rgba(245, 158, 11, 0.16) !important;
}

/* ── BLOCK 3: Restore danger button hover style (overrides block 1) ───────── */
.textcraft-tools .tc-btn--danger:hover,
.textcraft-tools .tc-btn--danger:focus {
    background: rgba(180, 83, 9, 0.22) !important;
    background-color: rgba(180, 83, 9, 0.22) !important;
    color: var(--tc-danger) !important;
    border-color: rgba(255, 204, 102, 0.55) !important;
    box-shadow: 0 4px 14px rgba(180, 83, 9, 0.25) !important;
}

/* ── BLOCK 4: FAQ question button override (overrides all theme button styles) ─ */
.textcraft-tools .tc-faq-accordion .tc-faq-question,
.textcraft-tools .tc-faq-accordion button.tc-faq-question {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: #ffcc66 !important;
    border: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
}
.textcraft-tools .tc-faq-accordion .tc-faq-question:hover,
.textcraft-tools .tc-faq-accordion .tc-faq-question:focus,
.textcraft-tools .tc-faq-accordion .tc-faq-question:active,
.textcraft-tools .tc-faq-accordion .tc-faq-question:focus-visible,
.textcraft-tools .tc-faq-accordion .tc-faq-question:focus-within,
.textcraft-tools .tc-faq-accordion .tc-faq-question[aria-expanded="true"] {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: #ffcc66 !important;
    border: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    outline: none !important;
}
.textcraft-tools .tc-faq-accordion .tc-faq-question:hover .tc-faq-icon,
.textcraft-tools .tc-faq-accordion .tc-faq-question:focus .tc-faq-icon,
.textcraft-tools .tc-faq-accordion .tc-faq-question:active .tc-faq-icon {
    color: #ffcc66 !important;
}

/* ── SEO content section (bottom of All Tools page) ──────────────────── */
.tc-seo-content {
    max-width: 860px;
    margin: 60px auto 40px;
    padding: 32px 28px;
    background: rgba(11, 9, 6, 0.6);
    border: 1px solid rgba(212, 162, 76, 0.20);
    border-radius: 12px;
}
.tc-seo-content h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 24px;
    font-weight: 600;
    color: #f5f0e8;
    margin: 0 0 16px;
    line-height: 1.3;
}
.tc-seo-content h3:not([itemprop="name"]) {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 19px;
    font-weight: 500;
    color: #d4a24c;
    margin: 28px 0 10px;
    line-height: 1.35;
}
.tc-seo-content h4 {
    font-family: 'Lexend', Arial, sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #ffcc66;
    margin: 20px 0 6px;
}
.tc-seo-content p {
    font-family: 'Lexend', Arial, sans-serif;
    font-size: 14px;
    line-height: 1.7;
    color: #a8997d;
    margin: 0 0 12px;
}
.tc-seo-content h3:not([itemprop="name"]):hover { color: #f5f0e8; }
@media (max-width: 600px) {
    .tc-seo-content {
        padding: 20px 16px;
        margin: 30px 12px 24px;
    }
    .tc-seo-content h2 { font-size: 20px; }
    .tc-seo-content h3:not([itemprop="name"]) { font-size: 17px; }
}

/* ── SEO media / image section ─────────────────────────────────────────── */
.tc-image-placeholder {
    margin: 32px 0 20px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(11, 9, 6, 0.6);
    border: 1px solid rgba(212, 162, 76, 0.20);
    box-shadow: 0 0 30px rgba(245, 158, 11, 0.06);
    text-align: center;
}
.tc-image-placeholder img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 800px;
    margin: 0 auto;
    border-radius: 8px 8px 0 0;
}
.tc-image-caption {
    padding: 10px 16px 14px;
    font-size: 12px;
    color: #a8997d;
    font-family: 'Lexend', Arial, sans-serif;
    line-height: 1.5;
    margin: 0;
    font-style: italic;
}

/* ── SEO intro section ──────────────────────────────────────────────────── */
.tc-seo-intro {
    margin-bottom: 24px;
}
.tc-seo-intro p {
    font-family: 'Lexend', Arial, sans-serif;
    font-size: 15px;
    line-height: 1.8;
    color: #d8c8aa;
    margin: 0 0 14px;
}
.tc-seo-intro a {
    color: #f59e0b;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color .3s ease;
}
.tc-seo-intro a:hover {
    color: #ffcc66;
}

/* ── How-to section ─────────────────────────────────────────────────────── */
.tc-seo-content ol {
    padding-left: 22px;
    margin: 0 0 18px;
}
.tc-seo-content ol li {
    font-family: 'Lexend', Arial, sans-serif;
    font-size: 14px;
    line-height: 1.7;
    color: #a8997d;
    margin-bottom: 8px;
}
.tc-seo-content ul {
    padding-left: 22px;
    margin: 0 0 18px;
}
.tc-seo-content ul li {
    font-family: 'Lexend', Arial, sans-serif;
    font-size: 14px;
    line-height: 1.7;
    color: #a8997d;
    margin-bottom: 6px;
}
.tc-seo-content ul li strong {
    color: #d4a24c;
}

/* ── TOC (Table of Contents) ────────────────────────────────────────────── */
.tc-seo-content .tc-toc {
    background: rgba(17, 16, 13, 0.8);
    border: 1px solid rgba(212, 162, 76, 0.15);
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 24px;
}
.tc-seo-content .tc-toc ul {
    margin: 8px 0 0;
    padding-left: 18px;
}
.tc-seo-content .tc-toc ul li {
    font-size: 13px;
    margin-bottom: 4px;
}
.tc-seo-content .tc-toc ul li a {
    color: #d4a24c;
    text-decoration: none;
    transition: color .3s ease;
}
.tc-seo-content .tc-toc ul li a:hover {
    color: #ffcc66;
    text-decoration: underline;
}

/* ── FAQ section heading ────────────────────────────────────────────────── */
.tc-seo-faq {
    margin-top: 36px;
}
.tc-seo-faq h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 22px;
    font-weight: 600;
    color: #f5f0e8;
    margin: 0 0 20px;
    line-height: 1.3;
}

/* ── Related Tools section ──────────────────────────────────────────────── */
.tc-seo-content a {
    color: #f59e0b;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color .3s ease;
}
.tc-seo-content a:hover {
    color: #ffcc66;
}

/* ── Conclusion section ────────────────────────────────────────────────── */
.tc-seo-content p:last-child {
    margin-bottom: 0;
}

/* ── HOME PAGE — Luxury Black & Gold ──────────────────────────────────── */
/* Dust / sparkle animation */
.tc-section-has-dust { position: relative; overflow: hidden; }
.tc-section-has-dust::before {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background-image:
        radial-gradient(1px 1px at 10% 20%, rgba(212,162,76,0.6), transparent),
        radial-gradient(1px 1px at 30% 60%, rgba(245,158,11,0.4), transparent),
        radial-gradient(1px 1px at 50% 10%, rgba(212,162,76,0.5), transparent),
        radial-gradient(1px 1px at 70% 80%, rgba(255,204,102,0.3), transparent),
        radial-gradient(1px 1px at 90% 30%, rgba(212,162,76,0.6), transparent),
        radial-gradient(1.5px 1.5px at 15% 85%, rgba(245,158,11,0.5), transparent),
        radial-gradient(1px 1px at 45% 45%, rgba(212,162,76,0.3), transparent),
        radial-gradient(1.5px 1.5px at 80% 55%, rgba(255,204,102,0.4), transparent),
        radial-gradient(1px 1px at 5% 50%, rgba(212,162,76,0.4), transparent),
        radial-gradient(1.5px 1.5px at 60% 15%, rgba(245,158,11,0.3), transparent);
    animation: tc-drift 8s ease-in-out infinite alternate;
}
@keyframes tc-drift {
    0% { transform: translate(0, 0); opacity: 0.6; }
    100% { transform: translate(10px, -8px); opacity: 1; }
}

/* Golden radial glow behind hero */
.tc-home-hero { position: relative; z-index: 1; }
.tc-home-hero::before {
    content: ''; position: absolute; width: 600px; height: 600px;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(245,158,11,0.12), transparent 60%);
    pointer-events: none; z-index: -1;
}

/* Card sheen effect */
.tc-card-has-sheen { position: relative; overflow: hidden; }
.tc-card-has-sheen::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(245,158,11,0.06), transparent);
    transition: left 0.6s ease; pointer-events: none;
}
.tc-card-has-sheen:hover::after { left: 100%; }

/* Card hover lift — applied via Elementor custom class */
.tc-home-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}
.tc-home-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 24px 60px rgba(245,158,11,0.15) !important;
    border-color: rgba(255,204,102,0.45) !important;
}

/* Button shimmer hover — applied to transparent buttons */
.elementor-widget-button .elementor-button[href*="tools"]:hover {
    background: rgba(212,162,76,0.12) !important;
}

/* Home page outer wrapper */
.tc-home-page { max-width: 100%; overflow-x: hidden; }
.tc-home-hero { text-align: center; padding: 20px 0 10px; }
.tc-home-page { max-width: 100%; overflow-x: hidden; }
.tc-home-hero { text-align: center; padding: 20px 0 10px; }
.tc-home-hero__title {
    font-family: var(--tc-font-display);
    font-size: clamp(30px, 5.5vw, 56px);
    line-height: 1.1;
    letter-spacing: -0.8px;
    color: var(--tc-text-primary);
    margin: 18px 0 14px;
}
.tc-home-hero__subtitle {
    font-size: 16px;
    color: var(--tc-text-secondary);
    max-width: 580px;
    margin: 0 auto 24px;
    font-weight: 300;
    line-height: 1.7;
}
.tc-home-hero__badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 18px; margin-bottom: 28px; }
.tc-home-hero__badge-item {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 13px; color: var(--tc-text-muted); font-weight: 400;
}
.tc-badge-icon { color: var(--tc-gold-light); font-weight: 700; }
.tc-home-hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.tc-home-btn {
    display: inline-block; padding: 14px 32px; border-radius: 8px;
    font-family: var(--tc-font-body); font-size: 15px; font-weight: 600;
    text-decoration: none; transition: all var(--tc-transition); cursor: pointer;
}
.tc-home-btn--primary { background: var(--tc-accent); color: #050505; border: 1px solid var(--tc-accent); }
.tc-home-btn--primary:hover { background: var(--tc-gold-light); border-color: var(--tc-gold-light); color: #050505; }
.tc-home-btn--outline { background: transparent; color: var(--tc-text-primary); border: 1px solid var(--tc-border); }
.tc-home-btn--outline:hover { border-color: var(--tc-border-hover); color: var(--tc-gold-light); }
.tc-home-btn--dark { background: #050505; color: var(--tc-gold-light); border: 1px solid var(--tc-border); }
.tc-home-btn--dark:hover { background: var(--tc-accent); color: #050505; border-color: var(--tc-accent); }

/* Section titles */
.tc-section-title {
    font-family: var(--tc-font-display);
    font-size: clamp(24px, 3.2vw, 36px);
    color: var(--tc-text-primary);
    text-align: center; margin: 0 0 8px; line-height: 1.2;
}
.tc-section-title--left { text-align: left; }
.tc-section-title--light { color: var(--tc-gold-light); }
.tc-section-subtitle {
    font-size: 15px; color: var(--tc-text-secondary);
    text-align: center; max-width: 600px; margin: 0 auto 30px; font-weight: 300;
}
.tc-section-divider {
    width: 60px; height: 2px; background: var(--tc-accent);
    margin: 0 auto; opacity: 0.5; border-radius: 2px;
}

/* Popular tools grid */
.tc-home-tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.tc-home-tool-card {
    display: flex; align-items: flex-start; gap: 14px;
    background: var(--tc-bg-card); border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius-md); padding: 18px 16px;
    text-decoration: none; transition: all var(--tc-transition);
}
.tc-home-tool-card:hover { border-color: var(--tc-border-hover); transform: translateY(-2px); box-shadow: var(--tc-shadow-gold); }
.tc-home-tool-icon { font-size: 28px; line-height: 1; flex-shrink: 0; margin-top: 2px; }
.tc-home-tool-info { min-width: 0; }
.tc-home-tool-name { font-family: var(--tc-font-display); font-size: 16px; color: var(--tc-text-primary); margin: 0 0 4px; font-weight: 600; }
.tc-home-tool-desc { font-size: 13px; color: var(--tc-text-muted); margin: 0; line-height: 1.5; }

/* Features grid (why choose) */
.tc-home-features-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.tc-home-feature-card {
    background: var(--tc-bg-card); border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius-md); padding: 24px 20px;
    text-align: center; transition: all var(--tc-transition);
}
.tc-home-feature-card:hover { border-color: var(--tc-border-hover); transform: translateY(-3px); box-shadow: var(--tc-shadow-gold); }
.tc-home-feature-emoji { font-size: 32px; margin-bottom: 12px; }
.tc-home-feature-title { font-family: var(--tc-font-display); font-size: 18px; color: var(--tc-text-primary); margin: 0 0 8px; }
.tc-home-feature-desc { font-size: 14px; color: var(--tc-text-muted); margin: 0; line-height: 1.7; }

/* Category grid */
.tc-home-category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.tc-home-cat-card {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    background: var(--tc-bg-card); border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius-md); padding: 22px 16px;
    text-decoration: none; text-align: center; transition: all var(--tc-transition);
}
.tc-home-cat-card:hover { border-color: var(--tc-border-hover); transform: translateY(-2px); box-shadow: var(--tc-shadow-gold); }
.tc-home-cat-icon { font-size: 30px; }
.tc-home-cat-name { font-family: var(--tc-font-display); font-size: 16px; color: var(--tc-text-primary); margin: 0; }
.tc-home-cat-desc { font-size: 13px; color: var(--tc-text-muted); margin: 0; line-height: 1.5; }

/* Privacy section */
.tc-home-privacy { display: flex; gap: 40px; align-items: center; }
.tc-home-privacy-content { flex: 1.3; }
.tc-home-privacy-text { font-size: 15px; color: var(--tc-text-secondary); line-height: 1.8; margin: 0 0 14px; }
.tc-home-privacy-visual { flex: 1; display: flex; justify-content: center; }
.tc-home-privacy-card {
    background: var(--tc-bg-card); border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius-lg); padding: 32px 28px; text-align: center;
    box-shadow: var(--tc-shadow); max-width: 260px; width: 100%;
}
.tc-privacy-icon-grid { display: flex; justify-content: center; gap: 16px; font-size: 28px; margin-bottom: 16px; }
.tc-privacy-card-text { font-family: var(--tc-font-display); font-size: 15px; color: var(--tc-gold-light); margin: 0; }

/* Media / image section */
.tc-home-media { display: flex; gap: 40px; align-items: center; }
.tc-home-media-visual { flex: 1; display: flex; justify-content: center; }
.tc-home-media-content { flex: 1.3; }
.tc-home-media-text { font-size: 15px; color: var(--tc-text-secondary); line-height: 1.8; margin: 0 0 14px; }
.tc-home-media-card {
    background: linear-gradient(145deg, var(--tc-bg-card), var(--tc-surface));
    border: 1px solid var(--tc-border); border-radius: var(--tc-radius-lg);
    padding: 28px; text-align: center; box-shadow: var(--tc-shadow-gold); max-width: 300px; width: 100%;
}
.tc-media-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.tc-media-card-item {
    background: var(--tc-surface-2); border: 1px solid var(--tc-border-soft);
    border-radius: var(--tc-radius-sm); padding: 14px 8px; text-align: center;
}
.tc-media-icon { display: block; font-size: 24px; margin-bottom: 4px; }
.tc-media-label { font-size: 11px; color: var(--tc-text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
.tc-media-card-caption { font-size: 12px; color: var(--tc-text-muted); margin: 0; font-style: italic; }

/* Benefits grid */
.tc-home-benefits-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.tc-home-benefit-card {
    background: var(--tc-bg-card); border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius-md); padding: 22px 18px; text-align: center;
    transition: all var(--tc-transition);
}
.tc-home-benefit-card:hover { border-color: var(--tc-border-hover); transform: translateY(-2px); box-shadow: var(--tc-shadow-gold); }
.tc-home-benefit-emoji { font-size: 30px; margin-bottom: 10px; }
.tc-home-benefit-title { font-family: var(--tc-font-display); font-size: 17px; color: var(--tc-text-primary); margin: 0 0 6px; }
.tc-home-benefit-desc { font-size: 13px; color: var(--tc-text-muted); margin: 0; line-height: 1.6; }

/* How it works steps */
.tc-home-steps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.tc-home-step-card { text-align: center; padding: 24px 16px; }
.tc-home-step-num {
    font-family: var(--tc-font-display); font-size: 42px; font-weight: 700;
    color: var(--tc-accent); opacity: 0.6; line-height: 1; margin-bottom: 10px;
}
.tc-home-step-title { font-family: var(--tc-font-display); font-size: 17px; color: var(--tc-text-primary); margin: 0 0 6px; }
.tc-home-step-desc { font-size: 13px; color: var(--tc-text-muted); margin: 0; line-height: 1.6; }

/* Internal links list */
.tc-home-links-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.tc-home-internal-link {
    display: block; padding: 10px 14px; background: var(--tc-bg-card);
    border: 1px solid var(--tc-border); border-radius: var(--tc-radius-sm);
    color: var(--tc-text-secondary); text-decoration: none; font-size: 14px;
    transition: all var(--tc-transition);
}
.tc-home-internal-link:hover { border-color: var(--tc-border-hover); color: var(--tc-gold-light); background: var(--tc-surface-2); }

/* FAQ accordion */
.tc-home-faq { max-width: 720px; margin: 0 auto; }
.tc-home-faq-item {
    border-bottom: 1px solid var(--tc-border-soft); padding: 4px 0;
}
.tc-home-faq-question {
    width: 100%; display: flex; justify-content: space-between; align-items: center;
    padding: 16px 0; background: none; border: none; cursor: pointer;
    font-family: var(--tc-font-body); font-size: 15px; color: var(--tc-text-primary);
    text-align: left; font-weight: 500; transition: color var(--tc-transition);
}
.tc-home-faq-question:hover { color: var(--tc-gold-light); }
.tc-home-faq-question[aria-expanded="true"] .tc-home-faq-icon { transform: rotate(45deg); }
.tc-home-faq-icon {
    font-size: 22px; color: var(--tc-accent); flex-shrink: 0; margin-left: 12px;
    transition: transform var(--tc-transition); line-height: 1;
}
.tc-home-faq-answer { overflow: hidden; transition: max-height 0.3s ease; }
.tc-home-faq-answer[hidden] { display: none; }
.tc-home-faq-answer p { font-size: 14px; color: var(--tc-text-secondary); line-height: 1.7; margin: 0 0 16px; }

/* Final CTA */
.tc-home-cta-inner { text-align: center; }
.tc-home-cta-text { font-size: 15px; color: var(--tc-text-secondary); max-width: 560px; margin: 0 auto 24px; line-height: 1.7; }

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 768px) {
    .tc-home-privacy { flex-direction: column; gap: 24px; }
    .tc-home-media { flex-direction: column; gap: 24px; }
    .tc-home-hero__badges { gap: 6px 12px; }
    .tc-home-hero__badge-item { font-size: 12px; }
    .tc-home-tools-grid { grid-template-columns: 1fr; }
    .tc-home-hero__cta { flex-direction: column; align-items: center; }
    .tc-home-btn { width: 100%; max-width: 280px; text-align: center; }
}

@media (max-width: 480px) {
    .tc-home-features-grid { grid-template-columns: 1fr; }
    .tc-home-category-grid { grid-template-columns: 1fr; }
    .tc-home-benefits-grid { grid-template-columns: 1fr; }
    .tc-home-steps-grid { grid-template-columns: 1fr; }
    .tc-home-links-list { grid-template-columns: 1fr; }
}

/* ── Reduced motion (preference) ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .textcraft-tools *,
    .textcraft-tools *::before,
    .textcraft-tools *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   MEGA MENU — Hello Elementor Header Compatibility
   Overrides textcraft-megamenu.css absolute positioning with fixed
   viewport-safe positioning so the panel never overflows the right edge.
   ══════════════════════════════════════════════════════════════════════════ */

/*
   Root cause of right-side overflow:
   textcraft-megamenu.css uses position:absolute; left:50%; translateX(-50%)
   which centers the panel on the <li> trigger.  In Hello Elementor the
   trigger sits on the right side of the nav (due to margin-left:auto),
   so the centred panel extends beyond the viewport's right edge.

   Fix: position:fixed; left:16px; right:16px; detaches from the <li> and
   constrains the panel to viewport width minus 32px safe margin.
*/
#mega-panel,
.tc-mega-panel {
    position: fixed !important;
    top: var(--hdr-h, 68px) !important;
    left: 16px !important;
    right: 16px !important;
    width: auto !important;
    transform: none !important;
    z-index: 9999 !important;
    max-width: none !important;
}

/* Open state — no transform needed with fixed left/right */
#mega-panel.is-open,
.tc-mega-panel.is-open,
.nav-item--mega:hover > #mega-panel,
.tc-mega-trigger:hover > .tc-mega-panel {
    transform: none !important;
}

/* Ensure the trigger keeps relative positioning for the bridge */
#mega-trigger,
.tc-mega-trigger {
    position: relative;
}

/* Hide mega item on mobile */
@media (max-width: 768px) {
    #mega-trigger,
    .tc-mega-trigger,
    #mega-panel,
    .tc-mega-panel {
        display: none !important;
    }
}

/* Keep Hello Elementor header sticky with correct stacking */
.site-header.dynamic-header {
    position: sticky;
    z-index: 200;
}

/* ── Mega menu "View All" link ────────────────────────────────── */
.tc-mega-view-all {
    list-style: none;
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid rgba(212, 168, 83, 0.2);
}

.tc-mega-view-all-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500;
    color: #d4a853;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    opacity: 0.85;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.tc-mega-view-all-link:hover,
.tc-mega-view-all-link:focus-visible {
    opacity: 1;
    transform: translateX(3px);
    color: #e8c56d;
}

/* ══════════════════════════════════════════════════════════════════════
   ABOUT US PAGE V3 — tc-about-* scoped styles
   ══════════════════════════════════════════════════════════════════════ */

/* Hero section */
.tc-about-page .tc-about-hero {
    position: relative;
}
.tc-about-page .tc-about-hero::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(212,162,76,0.10) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}
.tc-about-page .tc-about-hero-content {
    position: relative;
    z-index: 1;
}
.tc-about-page .tc-about-hero-visual {
    position: relative;
    z-index: 1;
}

/* Card base — sheen + lift */
.tc-about-page .tc-about-card {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease;
    overflow: hidden;
    position: relative;
}
.tc-about-page .tc-about-card::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,204,102,0.06), transparent);
    transition: left 0.6s ease;
    pointer-events: none;
    z-index: 0;
}
.tc-about-page .tc-about-card:hover::before {
    left: 100%;
}
.tc-about-page .tc-about-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 48px rgba(0,0,0,0.6), 0 0 0 1px rgba(212,162,76,0.20);
    border-color: rgba(212,162,76,0.40);
}
.tc-about-page .tc-about-card > * {
    position: relative;
    z-index: 1;
}

/* Glass card variant */
.tc-about-page .tc-about-glass {
    background: rgba(13,11,8,0.85) !important;
    backdrop-filter: blur(4px);
    border-color: rgba(212,162,76,0.18);
}

/* CTA section */
.tc-about-page .tc-about-cta {
    position: relative;
    overflow: hidden;
}
.tc-about-page .tc-about-cta::before {
    content: '';
    position: absolute;
    top: -50%; left: 50%;
    width: 800px; height: 800px;
    background: radial-gradient(circle, rgba(212,162,76,0.08) 0%, transparent 60%);
    transform: translateX(-50%);
    pointer-events: none;
}

/* Trust strip */
.tc-about-page .tc-about-trust-item {
    text-align: center;
    border-right: 1px solid rgba(212,162,76,0.15);
    padding: 16px 12px;
}
.tc-about-page .tc-about-trust-item:last-child {
    border-right: none;
}

/* Process steps */
.tc-about-page .tc-about-step {
    text-align: center;
    position: relative;
}
.tc-about-page .tc-about-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(212,162,76,0.12);
    color: #d4a24c;
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
    border: 1px solid rgba(212,162,76,0.25);
}
.tc-about-page .tc-about-step-connector {
    position: absolute;
    top: 22px;
    right: -50%;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(212,162,76,0.30), transparent);
}
.tc-about-page .tc-about-step:last-child .tc-about-step-connector {
    display: none;
}

/* Badge styling via h6 heading */
.tc-about-page .tc-about-section h6.elementor-heading-title {
    display: inline-block;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 600;
    padding: 6px 14px;
    border: 1px solid rgba(212,162,76,0.25);
    border-radius: 4px;
    background: rgba(212,162,76,0.06);
}

/* Inline gold highlight for hero H1 */
.tc-about-page .tc-about-hero h1 span {
    color: #d4a24c;
}

/* Responsive — tablet */
@media (max-width: 1024px) {
    .tc-about-page .tc-about-trust-item {
        border-right: none;
        border-bottom: 1px solid rgba(212,162,76,0.10);
    }
    .tc-about-page .tc-about-trust-item:last-child {
        border-bottom: none;
    }
    .tc-about-page .tc-about-hero [style*="flex_basis"] {
        flex-basis: 100% !important;
    }
}

/* Responsive — mobile */
@media (max-width: 768px) {
    .tc-about-page .tc-about-card {
        flex-basis: 100% !important;
    }
    .tc-about-page .tc-about-step {
        flex-basis: 100% !important;
    }
    .tc-about-page .tc-about-trust-item {
        flex-basis: 50% !important;
    }
    .tc-about-page [style*="flex_basis"] {
        flex-basis: 100% !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   ACCESSIBILITY STATEMENT PAGE — Scoped Styles
   Prefix: .tc-accessibility-page
   ═══════════════════════════════════════════════════════════════════ */

.tc-accessibility-page .tc-accessibility-hero {
    position: relative;
}
.tc-accessibility-page .tc-accessibility-hero::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(212,162,76,0.10) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}
.tc-accessibility-page .tc-accessibility-hero-content {
    position: relative;
    z-index: 1;
}
.tc-accessibility-page .tc-accessibility-hero-visual {
    position: relative;
    z-index: 1;
}

/* Visual card base */
.tc-accessibility-page .tc-accessibility-visual {
    position: relative;
}

/* Feature cards — hover lift + sheen */
.tc-accessibility-page .tc-accessibility-card {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease;
    overflow: hidden;
    position: relative;
}
.tc-accessibility-page .tc-accessibility-card::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,204,102,0.06), transparent);
    transition: left 0.6s ease;
    pointer-events: none;
    z-index: 0;
}
.tc-accessibility-page .tc-accessibility-card:hover::before {
    left: 100%;
}
.tc-accessibility-page .tc-accessibility-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 48px rgba(0,0,0,0.6), 0 0 0 1px rgba(212,162,76,0.20);
    border-color: rgba(212,162,76,0.40);
}
.tc-accessibility-page .tc-accessibility-card > * {
    position: relative;
    z-index: 1;
}

/* Badge styling */
.tc-accessibility-page .tc-accessibility-section h6.elementor-heading-title {
    display: inline-block;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 600;
    padding: 6px 14px;
    border: 1px solid rgba(212,162,76,0.25);
    border-radius: 4px;
    background: rgba(212,162,76,0.06);
}

/* CTA section */
.tc-accessibility-page .tc-accessibility-cta {
    position: relative;
    overflow: hidden;
}
.tc-accessibility-page .tc-accessibility-cta::before {
    content: '';
    position: absolute;
    top: -50%; left: 50%;
    width: 800px; height: 800px;
    background: radial-gradient(circle, rgba(212,162,76,0.08) 0%, transparent 60%);
    transform: translateX(-50%);
    pointer-events: none;
}

/* Grid card responsive */
.tc-accessibility-page .tc-accessibility-grid {
    justify-content: center;
}

/* Process step */
.tc-accessibility-page .tc-accessibility-step {
    text-align: center;
}

/* FAQ accordion */
.tc-accessibility-page .tc-accessibility-faq .elementor-accordion {
    width: 100%;
}

/* Responsive — tablet */
@media (max-width: 1024px) {
    .tc-accessibility-page .tc-accessibility-hero [style*="flex_basis"] {
        flex-basis: 100% !important;
    }
    .tc-accessibility-page .tc-accessibility-grid [style*="flex_basis"] {
        flex-basis: 45% !important;
    }
    .tc-accessibility-page .tc-accessibility-process [style*="flex_basis"] {
        flex-basis: 45% !important;
    }
}

/* Responsive — mobile */
@media (max-width: 768px) {
    .tc-accessibility-page [style*="flex_basis"] {
        flex-basis: 100% !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   PREMIUM FOOTER — .tc-footer
   Luxury 3-tier footer, replaces Hello Elementor default
   ═══════════════════════════════════════════════════════════════════ */

/* Hide default theme footer */
#site-footer { display: none !important; }

/* ── Footer base ─────────────────────────────────────────────── */
.tc-footer {
    position: relative;
    background: #050505;
    border-top: 1px solid rgba(212,162,76,0.10);
    overflow: hidden;
    font-family: 'Lexend', sans-serif;
}

.tc-footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212,162,76,0.30), transparent);
}

.tc-footer-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 1;
}

/* ── Top CTA Bar ───────────────────────────────────────────── */
.tc-footer-cta {
    position: relative;
    margin: 60px 0 50px;
    padding: 56px 40px;
    text-align: center;
    background: linear-gradient(145deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)), #11100d;
    border: 1px solid rgba(212,162,76,0.20);
    border-radius: 20px;
    overflow: hidden;
}

.tc-footer-cta-glow {
    position: absolute;
    top: -50%; left: 50%;
    width: 700px; height: 700px;
    background: radial-gradient(circle, rgba(212,162,76,0.07) 0%, transparent 60%);
    transform: translateX(-50%);
    pointer-events: none;
}

.tc-footer-cta-content { position: relative; z-index: 1; }

.tc-footer-cta-title {
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    font-size: clamp(28px, 3.5vw, 40px);
    color: #ffffff;
    margin: 0 0 16px;
    line-height: 1.3;
}

.tc-footer-cta-desc {
    font-size: 16px;
    line-height: 1.7;
    color: #d8c8aa;
    max-width: 580px;
    margin: 0 auto 28px;
}

.tc-footer-cta-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ── Button styles ─────────────────────────────────────────── */
.tc-btn {
    display: inline-flex;
    align-items: center;
    padding: 16px 34px;
    border-radius: 8px;
    font-family: 'Lexend', sans-serif;
    font-weight: 500;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    line-height: 1;
}

.tc-btn-primary {
    background: #d4a24c;
    color: #050505;
    border: none;
}
.tc-btn-primary:hover {
    background: #e0b15c;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(212,162,76,0.30);
    color: #050505;
}

.tc-btn-ghost {
    background: transparent;
    color: #d4a24c;
    border: 2px solid rgba(212,162,76,0.45);
}
.tc-btn-ghost:hover {
    border-color: #d4a24c;
    background: rgba(212,162,76,0.06);
    transform: translateY(-2px);
    color: #d4a24c;
}

/* ── Main footer grid (5 columns) ─────────────────────────── */
.tc-footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1.6fr 1fr 1.2fr 1fr;
    gap: 32px;
    padding: 0 0 40px;
}

.tc-footer-column {
    min-width: 0;
}

/* ── Brand column ──────────────────────────────────────────── */
.tc-footer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.tc-footer-logo-icon {
    font-size: 26px;
    color: #d4a24c;
    line-height: 1;
}

.tc-footer-logo-text {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 20px;
    color: #f5f0e8;
    letter-spacing: -0.3px;
}

.tc-footer-brand-desc {
    font-size: 13px;
    line-height: 1.7;
    color: #a8997d;
    margin: 0 0 20px;
}

/* ── Trust badges ──────────────────────────────────────────── */
.tc-footer-badges {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tc-footer-badges li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #d8c8aa;
    padding: 6px 12px;
    background: rgba(212,162,76,0.06);
    border: 1px solid rgba(212,162,76,0.15);
    border-radius: 20px;
    line-height: 1;
}

.tc-badge-icon { font-size: 11px; }

/* ── Column titles ─────────────────────────────────────────── */
.tc-footer-title {
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    font-size: 16px;
    color: #ffffff;
    margin: 0 0 18px;
    letter-spacing: 0.3px;
    position: relative;
    padding-bottom: 12px;
}
.tc-footer-title::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 28px;
    height: 2px;
    background: #d4a24c;
    border-radius: 1px;
}

/* ── Link lists ────────────────────────────────────────────── */
.tc-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tc-footer-links li {
    margin-bottom: 8px;
}

.tc-footer-links a {
    color: #a8997d;
    font-size: 13px;
    text-decoration: none;
    transition: all 0.25s ease;
    display: inline-block;
    line-height: 1.5;
    position: relative;
}

.tc-footer-links a::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 0;
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, #d4a24c, transparent);
    transition: width 0.3s ease;
}

.tc-footer-links a:hover {
    color: #d4a24c;
    transform: translateX(3px);
}

.tc-footer-links a:hover::after {
    width: 100%;
}

/* ── View All Tools link ─────────────────────────────────── */
.tc-footer-view-all {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 12px;
    font-size: 13px;
    color: #d4a24c;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.25s ease;
}

.tc-footer-view-all:hover {
    gap: 8px;
    color: #f59e0b;
}

/* ── Divider ────────────────────────────────────────────────── */
.tc-footer-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212,162,76,0.25), transparent);
    margin: 0 0 24px;
    border: none;
}

/* ── Bottom footer ────────────────────────────────────────── */
.tc-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0 36px;
    gap: 24px;
    flex-wrap: wrap;
}

.tc-footer-copyright {}

.tc-footer-copyright p {
    margin: 0;
    font-size: 12px;
    color: #a8997d;
    line-height: 1.6;
}

.tc-footer-made-with {
    font-size: 11px !important;
    color: #7a6d55 !important;
    margin-top: 2px !important;
}

/* ── Legal links in bottom bar ────────────────────────────── */
.tc-footer-legal-links {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.tc-footer-legal-links a {
    font-size: 12px;
    color: #a8997d;
    text-decoration: none;
    transition: color 0.25s ease;
}

.tc-footer-legal-links a:hover {
    color: #d4a24c;
}

.tc-footer-sep {
    color: rgba(212,162,76,0.25);
    font-size: 12px;
}

/* ── Social icons ──────────────────────────────────────────── */
.tc-footer-social {
    display: flex;
    gap: 12px;
    align-items: center;
}

.tc-social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(212,162,76,0.08);
    border: 1px solid rgba(212,162,76,0.18);
    color: #d8c8aa;
    transition: all 0.3s ease;
    text-decoration: none;
}

.tc-social-icon:hover {
    background: rgba(212,162,76,0.18);
    border-color: #d4a24c;
    color: #d4a24c;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(212,162,76,0.20);
}

.tc-social-icon svg {
    display: block;
}

/* ── Responsive — laptop ───────────────────────────────────── */
@media (max-width: 1200px) {
    .tc-footer-grid {
        grid-template-columns: 1.2fr 1.4fr 1fr;
        gap: 28px;
    }
}

/* ── Responsive — tablet ──────────────────────────────────── */
@media (max-width: 1024px) {
    .tc-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px 24px;
    }
    .tc-footer-cta {
        padding: 40px 28px;
    }
    .tc-footer-bottom {
        flex-direction: column;
        text-align: center;
        justify-content: center;
    }
    .tc-footer-legal-links {
        justify-content: center;
    }
    .tc-footer-social {
        justify-content: center;
    }
}

/* ── Responsive — mobile ───────────────────────────────────── */
@media (max-width: 768px) {
    .tc-footer-inner {
        padding: 0 16px;
    }
    .tc-footer-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .tc-footer-cta {
        margin: 36px 0 32px;
        padding: 32px 20px;
    }
    .tc-footer-cta-title {
        font-size: 24px;
    }
    .tc-footer-cta-desc {
        font-size: 14px;
    }
    .tc-footer-btn {
        padding: 14px 28px;
        font-size: 14px;
    }
    .tc-footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 16px;
        padding: 16px 0 28px;
    }
    .tc-footer-legal-links {
        justify-content: center;
    }
    .tc-footer-social {
        justify-content: center;
    }
    .tc-footer-title::after {
        left: 50%;
        transform: translateX(-50%);
    }
    .tc-footer-title {
        text-align: center;
    }
    .tc-footer-links {
        text-align: center;
    }
    .tc-footer-brand {
        text-align: center;
    }
    .tc-footer-logo {
        justify-content: center;
    }
    .tc-footer-badges {
        justify-content: center;
    }
    .tc-footer-view-all {
        justify-content: center;
        width: 100%;
    }
    .tc-footer-links a::after {
        left: 50%;
        transform: translateX(-50%);
        width: 0;
    }
    .tc-footer-links a:hover::after {
        width: 50%;
    }
}

/* ── Focus visible for accessibility ──────────────────────── */
.tc-footer a:focus-visible,
.tc-btn:focus-visible,
.tc-social-icon:focus-visible {
    outline: 2px solid #d4a24c;
    outline-offset: 3px;
    border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════════════
   DMCA POLICY PAGE — Scoped Styles
   Prefix: .tc-dmca-page
   ═══════════════════════════════════════════════════════════════════ */

.tc-dmca-page .tc-dmca-hero {
    position: relative;
}
.tc-dmca-page .tc-dmca-hero::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(212,162,76,0.10) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}
.tc-dmca-page .tc-dmca-hero-content {
    position: relative;
    z-index: 1;
}
.tc-dmca-page .tc-dmca-hero-visual {
    position: relative;
    z-index: 1;
}

/* Card — hover lift + sheen */
.tc-dmca-page .tc-dmca-card {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease;
    overflow: hidden;
    position: relative;
}
.tc-dmca-page .tc-dmca-card::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,204,102,0.06), transparent);
    transition: left 0.6s ease;
    pointer-events: none;
    z-index: 0;
}
.tc-dmca-page .tc-dmca-card:hover::before {
    left: 100%;
}
.tc-dmca-page .tc-dmca-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 48px rgba(0,0,0,0.6), 0 0 0 1px rgba(212,162,76,0.20);
    border-color: rgba(212,162,76,0.40);
}
.tc-dmca-page .tc-dmca-card > * {
    position: relative;
    z-index: 1;
}

/* Badge styling */
.tc-dmca-page .tc-dmca-section h6.elementor-heading-title {
    display: inline-block;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 600;
    padding: 6px 14px;
    border: 1px solid rgba(212,162,76,0.25);
    border-radius: 4px;
    background: rgba(212,162,76,0.06);
}

/* CTA */
.tc-dmca-page .tc-dmca-cta {
    position: relative;
    overflow: hidden;
}
.tc-dmca-page .tc-dmca-cta::before {
    content: '';
    position: absolute;
    top: -50%; left: 50%;
    width: 800px; height: 800px;
    background: radial-gradient(circle, rgba(212,162,76,0.08) 0%, transparent 60%);
    transform: translateX(-50%);
    pointer-events: none;
}

/* Info grid */
.tc-dmca-page .tc-dmca-info-grid {
    justify-content: center;
}

/* Timeline steps */
.tc-dmca-page .tc-dmca-timeline-step {
    text-align: center;
}

/* FAQ accordion */
.tc-dmca-page .tc-dmca-faq .elementor-accordion {
    width: 100%;
}

/* Responsive — tablet */
@media (max-width: 1024px) {
    .tc-dmca-page .tc-dmca-hero [style*="flex_basis"] {
        flex-basis: 100% !important;
    }
    .tc-dmca-page .tc-dmca-info-grid [style*="flex_basis"] {
        flex-basis: 45% !important;
    }
    .tc-dmca-page .tc-dmca-timeline [style*="flex_basis"] {
        flex-basis: 45% !important;
    }
}

/* Responsive — mobile */
@media (max-width: 768px) {
    .tc-dmca-page [style*="flex_basis"] {
        flex-basis: 100% !important;
    }
}