.edge-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; } .edge-card { min-height: 520px; display: flex; flex-direction: column; padding: 18px; border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 10px; background: radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.09), transparent 26%), linear-gradient(145deg, rgba(23, 30, 42, 0.92), rgba(4, 9, 16, 0.84)), var(--panel-strong); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 18px 34px rgba(0, 0, 0, 0.22); transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease; } .edge-card:hover { border-color: rgba(212, 165, 116, 0.42); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 24px 44px rgba(0, 0, 0, 0.28); transform: translateY(-1px); } .edge-card__header { display: flex; align-items: center; gap: 12px; min-width: 0; } .edge-card__logo { flex: 0 0 auto; width: 64px; height: 64px; display: grid; place-items: center; border: 1px solid rgba(212, 165, 116, 0.22); border-radius: var(--radius); background: rgba(2, 6, 23, 0.38); } .edge-card__logo img { width: 46px; height: 52px; object-fit: contain; filter: sepia(1) saturate(1.25) hue-rotate(342deg) brightness(0.86) contrast(1.1); } .edge-card__title { min-width: 0; flex: 1; } .edge-card__title h2 { margin: 0; overflow: hidden; font-size: 1.08rem; font-weight: 650; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; } .edge-card__title span { display: block; margin-top: 5px; overflow: hidden; color: var(--muted); font-size: 0.77rem; text-overflow: ellipsis; white-space: nowrap; } .edge-card__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; } .edge-card__actions button, .edge-card__maintenance button { min-width: 0; border: 1px solid rgba(148, 163, 184, 0.16); border-radius: var(--radius); background: rgba(2, 6, 23, 0.24); color: #cbd5e1; cursor: pointer; transition: border-color 160ms ease, background 160ms ease, color 160ms ease; } .edge-card__actions button { min-height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 10px; color: #b8c3d3; font-size: 0.76rem; text-align: left; } .edge-card__actions button:hover, .edge-card__maintenance button:hover { border-color: rgba(212, 165, 116, 0.42); background: rgba(201, 122, 61, 0.1); color: #f8fafc; } .edge-card__maintenance { padding: 12px; border: 1px solid rgba(148, 163, 184, 0.12); border-radius: var(--radius); background: rgba(2, 6, 23, 0.2); } .edge-card__maintenance > span { display: block; margin-bottom: 9px; color: var(--muted); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .edge-card__maintenance div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; } .edge-card__maintenance button { min-height: 34px; padding: 0 8px; font-size: 0.72rem; } .edge-card__details { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; margin-top: auto; padding: 0 12px; border: 1px solid rgba(212, 165, 116, 0.28); border-radius: var(--radius); background: linear-gradient(135deg, rgba(201, 122, 61, 0.14), rgba(212, 165, 116, 0.06)), rgba(201, 122, 61, 0.08); color: #f8fafc; cursor: pointer; font-size: 0.76rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; } .edge-card__details:hover { border-color: var(--line-strong); background: rgba(201, 122, 61, 0.16); } @media (max-width: 1100px) { .edge-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 680px) { .edge-card-grid { gap: 16px; grid-template-columns: 1fr; } .edge-card { min-height: 0; padding: 18px; } .edge-card__actions, .edge-card__maintenance div { grid-template-columns: 1fr; } .edge-card__header { align-items: flex-start; } }