.ass-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    padding: 1rem 0;
}

.ass-card {
    background: var(--ass-card-bg, #0e1a2b);
    border: 1px solid var(--ass-card-border, #2a4060);
    border-radius: var(--ass-radius, 12px);
    padding: 0 1.25rem 1.25rem;
    color: #e0e8f0;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

.ass-top-bar {
    height: 3px;
    margin: 0 -1.25rem 1.25rem;
    background: var(--ass-accent, #c89a3a);
}

.ass-card.offline .ass-top-bar {
    background: var(--ass-offline-accent, #7a2020);
}

.ass-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 14px;
}

.ass-name {
    font-size: var(--ass-font-name, 14px);
    font-weight: 500;
    color: var(--ass-name-color, #d4b87a);
    line-height: 1.4;
    flex: 1;
}

.ass-badge {
    font-size: 11px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}

.ass-badge.online {
    background: var(--ass-online-badge-bg, #0f3320);
    color: var(--ass-online-badge-fg, #4ecb82);
    border: 1px solid var(--ass-online-badge-fg, #4ecb82);
}

.ass-badge.offline {
    background: var(--ass-offline-badge-bg, #2d0f0f);
    color: var(--ass-offline-badge-fg, #e05555);
    border: 1px solid var(--ass-offline-badge-fg, #e05555);
}

.ass-map-image {
    margin-bottom: 14px;
    border-radius: calc(var(--ass-radius, 12px) - 4px);
    overflow: hidden;
}

.ass-map-image img {
    width: 100%;
    display: block;
    height: auto;
}

.ass-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.ass-stat {
    background: var(--ass-stat-bg, #091422);
    border-radius: calc(var(--ass-radius, 12px) - 4px);
    padding: 10px 12px;
}

.ass-stat-label {
    font-size: var(--ass-font-label, 11px);
    color: var(--ass-label-color, #6a8aaa);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ass-stat-value {
    font-size: var(--ass-font-value, 16px);
    font-weight: 500;
    color: var(--ass-value-color, #c8ddf0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ass-connect {
    display: block;
    width: 100%;
    box-sizing: border-box;
    background: var(--ass-btn-bg, #1a3050);
    border: 1px solid var(--ass-btn-border, #c89a3a);
    color: var(--ass-btn-color, #c89a3a);
    border-radius: calc(var(--ass-radius, 12px) - 4px);
    padding: 10px;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.ass-connect:hover {
    background: var(--ass-btn-hover-bg, #c89a3a);
    color: var(--ass-btn-hover-color, #0a1220);
    text-decoration: none;
}

.ass-offline-btn {
    opacity: 0.5;
    cursor: not-allowed;
}

.ass-offline-btn:hover {
    background: var(--ass-btn-bg, #1a3050);
    color: var(--ass-btn-color, #c89a3a);
}

.ass-error {
    color: #e05555;
    font-size: 14px;
    padding: 1rem;
    background: #2d0f0f;
    border: 1px solid #5a1a1a;
    border-radius: 8px;
}