@media (max-width: 900px) {
	.hero {
		padding: 24px 6vw 72px;
	}

	.nav {
		flex-direction: column;
		align-items: flex-start;
	}

	.hero-grid {
		grid-template-columns: 1fr;
	}

	.hero-stats {
		flex-wrap: wrap;
		gap: 12px 20px;
	}

	.dashboard {
		padding: 18px 16px 34px;
	}

	.topbar {
		align-items: center;
		padding-bottom: 14px;
		min-height: 72px;
	}

	.topbar-brand {
		width: 100%;
		justify-content: space-between;
	}

	.topbar-brand .topbar-logo-link {
		order: 1;
	}

	.topbar-brand .mobile-menu-toggle {
		order: 2;
	}

	.topbar-logo {
		height: 30px;
	}

	.mobile-menu-toggle,
	.mobile-menu-close {
		display: inline-flex;
	}

	.topbar-panel {
		position: fixed;
		top: 0;
		right: 0;
		height: 100dvh;
		width: min(86vw, 340px);
		z-index: 1200;
		background: #0f172a;
		border-left: 1px solid rgba(255, 255, 255, 0.08);
		padding: 16px;
		display: flex;
		grid-template-rows: auto 1fr auto;
		gap: 14px;
		transform: translateX(105%);
		transition: transform 0.24s ease;
		box-shadow: -20px 0 50px rgba(0, 0, 0, 0.35);
		visibility: hidden;
		pointer-events: none;
		flex-direction: column;
		justify-content: space-between;
		align-items: stretch;
	}

	.topbar-panel-header {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 12px;
	}

	.topbar-nav {
		width: 100%;
		display: grid;
		grid-template-columns: 1fr;
		align-content: flex-start;
		gap: 8px;
		overflow-y: auto;
		padding-right: 4px;
		position: static;
		left: auto;
		transform: none;
	}

	.topbar-link {
		justify-content: flex-start;
		width: 100%;
		padding: 12px;
	}

	.topbar-actions {
		margin-left: 0;
		display: grid;
		grid-template-columns: 1fr auto;
		gap: 10px;
		align-items: center;
	}

	.topbar .ghost.icon-button {
		width: 40px;
		text-align: center;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: center;
		align-items: center;
	}

	.user-chip {
		width: 100%;
		justify-content: flex-start;
	}

	.mobile-nav-overlay {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 1100;
		background: rgba(4, 8, 16, 0.55);
		border: 0;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.2s ease;
	}

	body.mobile-menu-open {
		overflow: hidden;
	}

	body.mobile-menu-open .topbar-panel {
		transform: translateX(0);
		visibility: visible;
		pointer-events: auto;
	}

	body.mobile-menu-open .mobile-nav-overlay {
		opacity: 1;
		pointer-events: auto;
	}

	.card-header {
		flex-direction: column;
		display: flex;
		align-items: center;
	}

	.dashboard-grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.subscription-card,
	.credits-summary-card,
	.section-card,
	.dashboard-widgets-grid .dashboard-widget {
		grid-column: span 6;
	}

	.subscription-main-card,
	.subscription-side-card,
	.dashboard-widgets-grid .dashboard-widget.dashboard-widget-wide,
	.dashboard-widgets-grid .dashboard-widget.dashboard-widget-compact,
	.dashboard-widgets-grid .dashboard-widget.dashboard-widget-full {
		grid-column: span 6;
	}

	.subscription-content {
		grid-template-columns: 1fr;
	}

	.profile-hero {
		flex-direction: column;
		align-items: flex-start;
	}

	.package-card {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.packages-grid-modern {
		display: flex;
		flex-wrap: nowrap;
		gap: 12px;
		overflow-x: auto;
		overflow-y: hidden;
		width: 100%;
		padding-bottom: 6px;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	}

	.credits-showcase .package-card-modern {
		flex: 0 0 min(78vw, 320px);
		grid-template-columns: 1fr;
		scroll-snap-align: start;
	}

	.trend-legend {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.package-credits,
	.package-price,
	.package-action {
		justify-items: start;
		text-align: left;
	}

	.package-action {
		justify-content: flex-start;
	}

	.custom-credits-banner {
		flex-direction: column;
		align-items: flex-start;
	}

	.cancel-widget-row {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 600px) {
	.hero {
		padding: 20px 5vw 64px;
	}

	.logo {
		font-size: 1.25rem;
	}

	.topbar-logo {
		height: 28px;
	}

	.feature-card {
		padding: 22px;
	}

	.primary {
		width: 100%;
		justify-content: center;
	}

	button.custom-credits-action.primary {
		max-width: 100%;
	}

	.custom-credits-copy h3 {
		font-size: 1.5rem;
		line-height: 1.1em;
		margin-bottom: 1em;
	}

	.ghost {
		width: 100%;
	}

	.hero-copy h1 {
		font-size: clamp(2rem, 7vw, 2.6rem);
	}

	.hero-cta {
		flex-direction: column;
	}

	.auth {
		padding: 32px 5vw 48px;
	}

	.auth-card {
		padding: 22px;
	}

	.row-space {
		flex-direction: column;
		align-items: flex-start;
	}

	.auth-step-head {
		width: 100%;
	}

	.pin-code-grid {
		gap: 8px;
	}

	.pin-code-grid input {
		padding: 12px 6px;
		font-size: 1.1rem;
	}

	.card-title {
		display: flex;
		gap: 14px;
		align-items: center;
		flex-direction: column;
		width: 100%;
	}

	.card-title * {
		text-align: center;
	}

	.dashboard {
		padding: 16px 14px 28px;
	}

	.button-row {
		flex-direction: column;
	}

	.credits-count {
		text-align: left;
	}

	.package-card {
		grid-template-columns: 1fr;
	}

	.package-credits {
		justify-items: start;
	}

	.package-price {
		text-align: left;
	}

	.dashboard-grid {
		grid-template-columns: 1fr;
		/* gap: 24px; */
		padding: 0px 12px;
		display: flex;
		flex-direction: column;
	}

	.subscription-card,
	.credits-summary-card,
	.packages-card,
	.actions-row,
	.section-card,
	.dashboard-widgets-grid .dashboard-widget {
		grid-column: span 1;
	}

	.subscription-main-card,
	.subscription-side-card,
	.dashboard-widgets-grid .dashboard-widget.dashboard-widget-wide,
	.dashboard-widgets-grid .dashboard-widget.dashboard-widget-compact,
	.dashboard-widgets-grid .dashboard-widget.dashboard-widget-full {
		grid-column: span 2;
	}

	.card {
		background: var(--card);
		border: 1px solid var(--card-border);
		border-radius: 24px;
		padding: 24px;
		box-shadow: var(--shadow);
		backdrop-filter: blur(12px);
	}

	.danger-outline {
		border: 1px solid rgba(255, 90, 90, 0.5);
		color: #ffffff;
		background: red;
		font-weight: 400;
		max-width: 100%;
		margin: 0;
	}

	.metric-row {
		grid-template-columns: 1fr;
	}

	.credits-progress {
		flex-direction: column;
		align-items: flex-start;
	}

	.report-metric-row {
		grid-template-columns: 1fr;
	}

	.packages-grid-modern {
		display: flex;
		flex-wrap: nowrap;
		gap: 12px;
		overflow-x: auto;
		overflow-y: hidden;
		width: 100%;
		padding-bottom: 8px;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	}

	.credits-showcase .package-card-modern {
		flex: 0 0 84vw;
		max-width: 300px;
		grid-template-columns: 1fr;
		scroll-snap-align: start;
	}

	.trend-legend {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.custom-credits-copy {
		align-items: center;
		display: flex;
		flex-direction: column;
	}

	.profile-main {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 768px) {
	.nav {
		flex-direction: column;
		gap: 20px;
	}

	.hero-stats {
		flex-direction: column;
	}

	.pricing-card {
		flex-direction: column;
		align-items: flex-start;
	}

	.price {
		align-items: flex-start;
	}
}