.formats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--gap-md);margin-top:var(--gap-xl)}.format-card{--format-accent: var(--color-primary);--format-accent-soft: var(--color-primary-light);--format-accent-strong: var(--color-primary-dark);--format-accent-ring: rgba(13, 148, 136, .2);position:relative;display:flex;flex-direction:column;overflow:hidden;background:var(--color-bg-card);border:1px solid var(--color-border-light);border-radius:var(--radius-lg);padding:32px 28px;box-shadow:var(--shadow-sm);transition:var(--transition-fast)}.format-card:before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--format-accent),var(--format-accent-soft))}.format-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--format-accent)}.format-card--html{--format-accent: #0284c7;--format-accent-soft: #f0f9ff;--format-accent-strong: #0369a1;--format-accent-ring: #bae6fd}.format-card--pdf{--format-accent: #dc2626;--format-accent-soft: #fef2f2;--format-accent-strong: #b91c1c;--format-accent-ring: #fecaca}.format-card--word{--format-accent: #7c3aed;--format-accent-soft: #f5f3ff;--format-accent-strong: #6d28d9;--format-accent-ring: #ddd6fe}.format-card--link{--format-accent: #059669;--format-accent-soft: #ecfdf5;--format-accent-strong: #047857;--format-accent-ring: #a7f3d0}.format-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}.format-card-icon{flex-shrink:0;width:60px;height:60px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:1.6rem;color:var(--format-accent);background:var(--format-accent-soft)}.format-card-tag{font-family:var(--font-family-mono);font-size:.75rem;font-weight:var(--font-weight-bold);letter-spacing:.06em;text-transform:uppercase;color:var(--format-accent-strong);background:var(--format-accent-soft);border:1px solid var(--format-accent-ring);border-radius:var(--radius-full);padding:6px 14px}.format-card-title{font-size:1.25rem;margin-bottom:10px}.format-card-text{flex:1;color:var(--color-text-muted)}.format-card-hint{display:flex;align-items:center;gap:8px;margin-top:20px;padding-top:16px;border-top:1px dashed var(--color-border);font-size:.875rem;color:var(--color-text-light)}.format-card-hint i{color:var(--format-accent);font-size:.8rem}@media (max-width: 768px){.formats-grid{gap:var(--gap-sm)}.format-card{padding:26px 22px}.format-card-head{margin-bottom:16px}}