/* ═══════════════════════════════════════════════════════════════════
   tool-cards-v2.css — v3.3
   Aurora + приглушённые паттерны (по краям) + читаемый текст
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Базовая карточка ─── */
.tool-card {
    display: flex; flex-direction: column;
    padding: 28px 26px; border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    text-decoration: none; color: var(--text, #e8e8ea);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    gap: 12px; position: relative; overflow: hidden; min-height: 220px;
    background: rgba(255, 255, 255, 0.02);
    isolation: isolate;
}
.tool-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
    border-color: rgba(var(--primary-rgb, 217, 119, 6), 0.4);
}
.tool-card > * { position: relative; z-index: 2; }

/* ═══ ЧИТАЕМОСТЬ ТЕКСТА ═══ */
.tool-card h3 {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.9),
        0 0 12px rgba(0, 0, 0, 0.6);
}
.tool-card p {
    font-size: 14px;
    line-height: 1.55;
    color: rgba(232, 232, 234, 0.85);
    flex-grow: 1;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.8),
        0 0 8px rgba(0, 0, 0, 0.4);
}

/* Aurora по категориям */
.tools-category--files .tool-card {
    border-top: 3px solid #38BDF8;
    background:
        radial-gradient(60% 80% at 15% 20%, rgba(56, 189, 248, 0.10), transparent 60%),
        radial-gradient(50% 70% at 85% 30%, rgba(14, 165, 233, 0.08), transparent 60%),
        rgba(255, 255, 255, 0.02);
}
.tools-category--code .tool-card {
    border-top: 3px solid #818CF8;
    background:
        radial-gradient(60% 80% at 15% 20%, rgba(129, 140, 248, 0.12), transparent 60%),
        radial-gradient(50% 70% at 85% 30%, rgba(168, 85, 247, 0.08), transparent 60%),
        rgba(255, 255, 255, 0.02);
}
.tools-category--analysis .tool-card {
    border-top: 3px solid #4ADE80;
    background:
        radial-gradient(60% 80% at 15% 20%, rgba(74, 222, 128, 0.10), transparent 60%),
        radial-gradient(50% 70% at 85% 30%, rgba(16, 185, 129, 0.08), transparent 60%),
        rgba(255, 255, 255, 0.02);
}

/* Иконки glass */
.tool-icon--glass {
    width: 64px; height: 64px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    position: relative; overflow: hidden; margin-bottom: 8px;
    transition: transform 0.35s, box-shadow 0.35s, border-color 0.35s;
    backdrop-filter: blur(20px) saturate(180%);
    z-index: 2;
}
.tools-category--files .tool-icon--glass { background: linear-gradient(135deg, rgba(56,189,248,0.16), rgba(56,189,248,0.04) 50%, rgba(255,255,255,0.02)); border: 1px solid rgba(56,189,248,0.2); }
.tools-category--code .tool-icon--glass { background: linear-gradient(135deg, rgba(129,140,248,0.16), rgba(129,140,248,0.04) 50%, rgba(255,255,255,0.02)); border: 1px solid rgba(129,140,248,0.2); }
.tools-category--analysis .tool-icon--glass { background: linear-gradient(135deg, rgba(74,222,128,0.16), rgba(74,222,128,0.04) 50%, rgba(255,255,255,0.02)); border: 1px solid rgba(74,222,128,0.2); }
.tool-icon--glass::before {
    content: ''; position: absolute; top: -30%; left: -30%;
    width: 90%; height: 90%;
    background: radial-gradient(circle, rgba(255,255,255,0.45) 0%, transparent 70%);
    border-radius: 50%; pointer-events: none; opacity: 0.7;
    transition: transform 0.5s, opacity 0.5s;
}
.tool-icon--glass img { width: 40px; height: 40px; display: block; position: relative; z-index: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4)); }
.tool-card:hover .tool-icon--glass::before { transform: translate(12%, 12%); opacity: 1; }

/* Бейджи */
.tool-badge { display: inline-block; align-self: flex-start; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; z-index: 2; }
.tool-badge--hit { background: linear-gradient(135deg, #F97316, #DC2626); color: #fff; }
.tool-badge--choice { background: linear-gradient(135deg, #FBBF24, #D97706); color: #1a1a1a; }
.tool-badge--new { background: linear-gradient(135deg, #38BDF8, #0284C7); color: #fff; }
.tool-badge--soon { background: rgba(255,152,0,0.12); color: #FFB74D; }

.tool-card--soon { opacity: 0.55; cursor: default; }
.tool-card--soon:hover { transform: none; box-shadow: none; }

/* ═══════════════════════════════════════════════════════════════════
   ПАТТЕРНЫ — opacity ~0.12-0.18, ТОЛЬКО ПО КРАЯМ
   Текст (заголовок + описание) — в центре, без паттерна
   ═══════════════════════════════════════════════════════════════════ */

/* 1. CODE — вертикальные линии */
.fx-code::before {
    content: ''; position: absolute; inset: 0;
    background-image: linear-gradient(90deg, rgba(56, 189, 248, 0.14) 1px, transparent 1px);
    background-size: 28px 100%;
    pointer-events: none; z-index: 0;
    mask-image: linear-gradient(to bottom,
        black 0%, black 25%,
        transparent 25%, transparent 75%,
        black 75%, black 100%);
    -webkit-mask-image: linear-gradient(to bottom,
        black 0%, black 25%,
        transparent 25%, transparent 75%,
        black 75%, black 100%);
}

/* 2. QR — точки (только верх-право) */
.fx-qr::before {
    content: ''; position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(56, 189, 248, 0.22) 1.5px, transparent 1.5px);
    background-size: 18px 18px;
    pointer-events: none; z-index: 0;
    mask-image: radial-gradient(ellipse 60% 50% at 85% 15%, black 30%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 60% 50% at 85% 15%, black 30%, transparent 70%);
}

/* 3. DIAGONAL — только правый нижний угол */
.fx-diagonal::before {
    content: ''; position: absolute; inset: 0;
    background-image: repeating-linear-gradient(45deg, rgba(56, 189, 248, 0.15) 0 1px, transparent 1px 14px);
    pointer-events: none; z-index: 0;
    mask-image: radial-gradient(ellipse 70% 60% at 100% 100%, black 20%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 100% 100%, black 20%, transparent 70%);
}

/* 4. CHECKER — шахматка, только нижний левый угол */
.fx-checker::before {
    content: ''; position: absolute; inset: 0;
    background-image:
        linear-gradient(45deg, rgba(56, 189, 248, 0.13) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(56, 189, 248, 0.13) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(56, 189, 248, 0.13) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(56, 189, 248, 0.13) 75%);
    background-size: 24px 24px;
    background-position: 0 0, 0 12px, 12px -12px, -12px 0px;
    pointer-events: none; z-index: 0;
    mask-image: radial-gradient(ellipse 60% 50% at 15% 85%, black 20%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 60% 50% at 15% 85%, black 20%, transparent 70%);
}

/* 5. FAVICON — сетка, только правый верх */
.fx-favicon::before {
    content: ''; position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(56, 189, 248, 0.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(56, 189, 248, 0.15) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none; z-index: 0;
    mask-image: radial-gradient(ellipse 60% 60% at 100% 0%, black 20%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 60% 60% at 100% 0%, black 20%, transparent 70%);
}

/* 6. SPARKS — искры (оставляем, они и так «рассыпаны») */
.fx-sparks::before {
    content: ''; position: absolute; inset: 0;
    background-image:
        radial-gradient(circle 1.5px at 12% 22%, rgba(251, 191, 36, 0.6), transparent 50%),
        radial-gradient(circle 1px at 28% 62%, rgba(251, 146, 60, 0.5), transparent 50%),
        radial-gradient(circle 1.5px at 47% 15%, rgba(251, 191, 36, 0.55), transparent 50%),
        radial-gradient(circle 1px at 63% 78%, rgba(251, 146, 60, 0.6), transparent 50%),
        radial-gradient(circle 1.5px at 82% 35%, rgba(251, 191, 36, 0.55), transparent 50%),
        radial-gradient(circle 1px at 92% 68%, rgba(251, 146, 60, 0.5), transparent 50%),
        radial-gradient(circle 1px at 8% 88%, rgba(251, 191, 36, 0.45), transparent 50%),
        radial-gradient(circle 1.5px at 72% 12%, rgba(251, 146, 60, 0.55), transparent 50%);
    pointer-events: none; z-index: 0;
    opacity: 0.85;
    transition: opacity 0.3s;
}
.fx-sparks:hover::before { opacity: 1; }

/* 7. TAGS — плашки, только правый верх */
.fx-tags::before {
    content: ''; position: absolute; inset: 0;
    background-image:
        radial-gradient(ellipse 30px 8px at 75% 15%, rgba(129, 140, 248, 0.22), transparent 70%),
        radial-gradient(ellipse 36px 8px at 88% 30%, rgba(129, 140, 248, 0.18), transparent 70%),
        radial-gradient(ellipse 24px 8px at 92% 48%, rgba(129, 140, 248, 0.20), transparent 70%);
    pointer-events: none; z-index: 0;
}

/* 8. CRAWL — пунктиры, только верхняя часть */
.fx-crawl::before {
    content: ''; position: absolute; inset: 0;
    background:
        repeating-linear-gradient(90deg, rgba(129, 140, 248, 0.20) 0 5px, transparent 5px 14px) 0 12% / 100% 2px no-repeat,
        repeating-linear-gradient(90deg, rgba(129, 140, 248, 0.15) 0 7px, transparent 7px 16px) 0 22% / 100% 2px no-repeat;
    pointer-events: none; z-index: 0;
    mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
}

/* 9. DIRECTIVE — диагонали, только правый верх */
.fx-directive::before {
    content: ''; position: absolute; inset: 0;
    background-image: repeating-linear-gradient(45deg, rgba(129, 140, 248, 0.15) 0 1px, transparent 1px 14px);
    pointer-events: none; z-index: 0;
    mask-image: radial-gradient(ellipse 60% 60% at 100% 0%, black 20%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 60% 60% at 100% 0%, black 20%, transparent 70%);
}

/* 10. DATA — точки, только правый нижний (SEO-аудит был проблемой) */
.fx-data::before {
    content: ''; position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(74, 222, 128, 0.22) 1.5px, transparent 1.5px);
    background-size: 20px 20px;
    pointer-events: none; z-index: 0;
    mask-image: radial-gradient(ellipse 60% 55% at 100% 100%, black 20%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 60% 55% at 100% 100%, black 20%, transparent 70%);
}

/* 11. BROKEN — разрывы, только нижняя часть */
.fx-broken::before {
    content: ''; position: absolute; inset: 0;
    background-image: linear-gradient(90deg, rgba(74, 222, 128, 0.20) 8px, transparent 8px);
    background-size: 20px 2px;
    background-repeat: repeat-x;
    background-position: center 88%;
    pointer-events: none; z-index: 0;
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

/* 12. SPEED — штрихи, нижняя часть */
.fx-speed::before {
    content: ''; position: absolute; inset: 0;
    background-image: repeating-linear-gradient(to right, rgba(74, 222, 128, 0.18) 0, rgba(74, 222, 128, 0.18) 3px, transparent 3px, transparent 12px);
    background-size: 100% 5px;
    background-position: 0 88%;
    background-repeat: no-repeat;
    pointer-events: none; z-index: 0;
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

/* Заголовки категорий */
.tools-category--files .tools-category-head i { color: #38BDF8 !important; }
.tools-category--files .tools-category-head h2 { color: #BAE6FD !important; }
.tools-category--code .tools-category-head i { color: #818CF8 !important; }
.tools-category--code .tools-category-head h2 { color: #C7D2FE !important; }
.tools-category--analysis .tools-category-head i { color: #4ADE80 !important; }
.tools-category--analysis .tools-category-head h2 { color: #BBF7D0 !important; }

@media (max-width: 640px) {
    .tool-icon--glass { width: 56px !important; height: 56px !important; border-radius: 14px !important; }
    .tool-icon--glass img { width: 34px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
    .tool-card, .tool-icon--glass, .tool-icon--glass::before, .fx-sparks::before { transition: none !important; }
}

/* ═══ v3.4: паттерн для PDF-мастерской ═══ */
/* Горизонтальные линии = строки документа, по краям */
.fx-doc::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(56, 189, 248, 0.20) 1px, transparent 1px);
    background-size: 100% 22px;
    pointer-events: none;
    z-index: 0;
    mask-image: linear-gradient(to bottom,
        black 0%, black 20%,
        transparent 20%, transparent 80%,
        black 80%, black 100%);
    -webkit-mask-image: linear-gradient(to bottom,
        black 0%, black 20%,
        transparent 20%, transparent 80%,
        black 80%, black 100%);
}


/* ═══ v3.5: паттерн для JSON-форматтера ═══ */
/* Вертикальные линии = структура JSON-дерева, по краям */
.fx-json::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(90deg, rgba(129, 140, 248, 0.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(129, 140, 248, 0.10) 1px, transparent 1px);
    background-size: 24px 100%, 48px 100%;
    background-position: 8px 0, 24px 0;
    pointer-events: none;
    z-index: 0;
    mask-image: linear-gradient(to right, black 0%, transparent 60%);
    -webkit-mask-image: linear-gradient(to right, black 0%, transparent 60%);
}
.fx-json::after {
    content: '{ }';
    position: absolute;
    bottom: 12px;
    right: 16px;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 42px;
    font-weight: 200;
    color: rgba(129, 140, 248, 0.10);
    letter-spacing: 4px;
    pointer-events: none;
    z-index: 0;
    line-height: 1;
}


/* ═══ v4.1: глобальные гарантии cursor ═══ */
button:not(:disabled),
[role="button"]:not([aria-disabled="true"]),
a:not([href=""]),
select:not(:disabled),
label[for],
input[type="checkbox"]:not(:disabled),
input[type="radio"]:not(:disabled),
input[type="file"]:not(:disabled),
summary {
    cursor: pointer;
}
button:disabled,
select:disabled,
input:disabled {
    cursor: not-allowed;
}
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="number"],
[contenteditable="true"] {
    cursor: text;
}


/* ═══ v3.6: паттерн для CSS-градиента ═══ */
.fx-mesh::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 15% 25%, rgba(251,191,36,0.20) 0%, transparent 40%),
        radial-gradient(circle at 85% 30%, rgba(129,140,248,0.18) 0%, transparent 40%),
        radial-gradient(circle at 50% 85%, rgba(251,113,133,0.15) 0%, transparent 40%);
    pointer-events: none;
    z-index: 0;
    mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
}


/* ═══ v3.7: паттерн для UI Effects ═══ */
.fx-ui::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 25% 25%, rgba(192,192,192,0.15) 0px, transparent 2px),
        radial-gradient(circle at 75% 30%, rgba(192,192,192,0.12) 0px, transparent 2px),
        radial-gradient(circle at 50% 70%, rgba(192,192,192,0.10) 0px, transparent 2px),
        radial-gradient(circle at 85% 85%, rgba(192,192,192,0.08) 0px, transparent 2px);
    background-size: 40px 40px, 60px 60px, 80px 80px, 50px 50px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.6;
}


/* ═══ v3.8: категория design ═══ */
.tools-category--design .tools-category-head i { color: #C0C0C0; }
.tools-category--design .tools-category-head h2 { color: #E8E8E8; }
.tools-category--design .tool-icon--glass {
    background: linear-gradient(135deg, rgba(192,192,192,0.12) 0%, rgba(192,192,192,0.04) 100%);
    border-color: rgba(192,192,192,0.2);
}


/* ═══ v3.9: цветная категория design ═══ */
.tools-category--design .tools-category-head i {
    color: #FBBF24 !important;
    filter: drop-shadow(0 0 8px rgba(251,191,36,0.4));
}
.tools-category--design .tools-category-head h2 {
    color: #FCD34D !important;
    background: linear-gradient(135deg, #FCD34D 0%, #F59E0B 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.tools-category--design .tool-card {
    border-color: rgba(251,191,36,0.15) !important;
}
.tools-category--design .tool-card:hover {
    border-color: rgba(251,191,36,0.4) !important;
    box-shadow: 0 20px 60px rgba(251,191,36,0.15) !important;
}
.tools-category--design .tool-icon--glass {
    background: linear-gradient(135deg, rgba(251,191,36,0.15) 0%, rgba(167,139,250,0.1) 100%) !important;
    border-color: rgba(251,191,36,0.25) !important;
}
.tools-category--design .tool-badge--new {
    background: rgba(251,191,36,0.15) !important;
    color: #FCD34D !important;
    border-color: rgba(251,191,36,0.3) !important;
}
.fx-ui::before {
    background-image:
        radial-gradient(circle at 25% 25%, rgba(251,191,36,0.25) 0px, transparent 2px),
        radial-gradient(circle at 75% 30%, rgba(167,139,250,0.20) 0px, transparent 2px),
        radial-gradient(circle at 50% 70%, rgba(96,165,250,0.15) 0px, transparent 2px),
        radial-gradient(circle at 85% 85%, rgba(251,191,36,0.12) 0px, transparent 2px) !important;
    opacity: 0.9 !important;
}