/* Shared IXM/DNSai component library — brand-neutral: every colour is var(--ixm-token, var(--dnsai-token)) so the same file
   recolours under ixm.ai's site.css or app.dnsai.com's theme.css. Source of truth: /home/dnsai/static/css/. */
.plat-wall { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 14px 12px; }
@media (max-width: 1100px) { .plat-wall { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .plat-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 8px; } }
.plat-wall--compact { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.plat-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-align: center; }
.plat-logo { display: block; width: 100%; aspect-ratio: 1; border-radius: 16px; overflow: hidden; border: 1px solid var(--border, var(--border-default)); background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.35); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.plat-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.plat-tile.bg-dark .plat-logo { background: #0d1520; }
.plat-tile.bg-dark .plat-logo img, .plat-tile.bg-light .plat-logo img { object-fit: contain; padding: 14%; }
.plat-tile.bg-light .plat-logo { background: #fff; }
.plat-tile:hover .plat-logo, .plat-tile:focus-visible .plat-logo { transform: translateY(-3px); border-color: var(--accent, var(--brand-cyan)); box-shadow: 0 8px 22px color-mix(in srgb, var(--accent, var(--brand-cyan)) 25%, transparent); }
.plat-tile:focus-visible { outline: none; }
.plat-name { font-weight: 600; font-size: 13px; line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plat-count { font-size: 12px; color: var(--accent, var(--brand-cyan)); font-variant-numeric: tabular-nums; }
.plat-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 16px; }
.plat-modal[hidden] { display: none; }
.plat-modal-backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--bg, var(--bg-body)) 78%, transparent); backdrop-filter: blur(4px); }
.plat-modal-dialog { position: relative; width: min(560px, 100%); max-height: 90vh; overflow: auto; background: var(--surface, var(--bg-card)); border: 1px solid var(--border-strong, var(--border-default)); border-radius: 18px; padding: 26px 26px 20px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.plat-modal-close { position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border-strong, var(--border-default)); background: transparent; color: inherit; font-size: 22px; cursor: pointer; }
.plat-modal-close:hover { border-color: var(--accent, var(--brand-cyan)); }
.plat-modal-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; padding-right: 36px; }
.plat-modal-logo { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; background: #fff; border: 1px solid var(--border, var(--border-default)); flex: none; }
.plat-modal-logo.bg-dark { background: var(--surface, var(--bg-card)); object-fit: contain; padding: 8px; }
.plat-modal-logo.bg-light { object-fit: contain; padding: 8px; }
.plat-modal-head h3 { margin: 0 0 2px; font-size: 22px; }
.plat-modal-meta { margin: 0; color: var(--muted, var(--text-muted)); font-size: 13px; }
.plat-modal-count { font-size: 18px; margin: 6px 0 10px; }
.plat-modal-count strong { color: var(--accent, var(--brand-cyan)); font-variant-numeric: tabular-nums; }
.plat-modal-what, .plat-modal-why { margin: 0 0 10px; line-height: 1.55; }
.plat-modal-why { color: var(--muted, var(--text-muted)); }
.plat-modal-members { font-size: 13px; margin: 0 0 10px; }
.plat-modal-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 14px 0 12px; }
.plat-modal-more { margin-left: auto; font-size: 14px; color: var(--accent, var(--brand-cyan)); text-decoration: none; }
.plat-modal-foot { font-size: 12px; margin: 0; }
.plat-modal-open { overflow: hidden; }
.dir-open { margin-left: 10px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border-strong, var(--border-default)); background: transparent; color: var(--accent, var(--brand-cyan)); font: inherit; font-size: 12px; cursor: pointer; }
.dir-open:hover { border-color: var(--accent, var(--brand-cyan)); }
html[data-theme="light"], body.light-mode .plat-logo, html[data-theme="light"], body.light-mode .integration img { box-shadow: 0 2px 10px rgba(0,0,0,.12); }