/*
 * Page-content styles only — the app-shell chrome (sidebar/topbar/chips/
 * dropdowns) now lives in shell.css since App_Shell renders it once for
 * every plugin page, not per-view.
 */

/* Package cards (shop grid — catalog-style, cards make sense here) */
.ar-package-card { display: flex; flex-direction: column; gap: var(--ar-space-3); }
.ar-package-name { font-size: 16px; font-weight: 800; margin: 0; display: flex; align-items: center; gap: 8px; }
.ar-package-specs { display: flex; flex-wrap: wrap; gap: var(--ar-space-2); font-size: 13px; color: var(--ar-color-text-muted); }
.ar-package-spec { background: var(--ar-color-surface-tertiary); border-radius: var(--ar-radius-sm); padding: 4px 10px; }
.ar-package-price { font-size: 21px; font-weight: 800; }
.ar-package-price small { font-size: 12px; font-weight: 600; color: var(--ar-color-text-muted); }
.ar-package-name .ar-server-icon { width: 32px; height: 32px; border-radius: var(--ar-radius-sm); background: var(--ar-color-surface-tertiary); display: flex; align-items: center; justify-content: center; color: var(--ar-color-text-muted); }

.ar-rename-form { display: flex; flex-wrap: wrap; gap: var(--ar-space-2); align-items: flex-end; }
.ar-rename-form .ar-input { flex: 1 1 160px; min-width: 0; }
.ar-rename-form .ar-label { flex-basis: 100%; }

/* Coming soon */
.ar-coming-soon { text-align: center; padding: var(--ar-space-8) var(--ar-space-4); }
.ar-coming-soon-icon { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--ar-color-surface-tertiary); color: var(--ar-color-text-muted); margin: 0 auto var(--ar-space-4); }
.ar-coming-soon-icon svg { width: 28px; height: 28px; }

.ar-page-header { display: flex; align-items: center; justify-content: space-between; gap: var(--ar-space-3); flex-wrap: wrap; margin-bottom: var(--ar-space-5); }
.ar-page-header-title { font-size: 20px; font-weight: 800; margin: 0; }

@media (max-width: 640px) {
	.ar-modal { padding: var(--ar-space-4); }
}