:root {
	--bg-color: #f8fafc;
	--card-bg: #ffffff;
	--card-border: #e2e8f0;
	--text-primary: #1e293b;
	--text-secondary: #64748b;
	--cta-color: #007456;
	--cta-text-color: #ffffff;
	--danger-color: #dc2626;
	--danger-bg: #fee2e2;
	--radius: 0.75rem;
	--shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	--usage-normal: #22c55e;
	--usage-high: #f59e0b;
	--usage-critical: #ef4444;
}
*,
*::before,
*::after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
body {
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
	background-color: var(--bg-color);
	color: var(--text-secondary);
	margin: 0;
	line-height: 1.6;
    padding-bottom: 50px;
}
.container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 1.5rem;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--text-primary);
	font-weight: 700;
	margin-top: 0;
	margin-bottom: 1rem;
}
hr {
	border: 0;
	border-top: 1px solid var(--card-border);
	margin: 3rem 0;
}

/* Header Styles */
.main-header {
	background-color: var(--card-bg);
	border-bottom: 1px solid var(--card-border);
	padding: 0.5rem 0;
	position: sticky;
	top: 0;
	z-index: 10;
}
.main-header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.header-brand {
	display: flex;
	align-items: center;
	text-decoration: none;
}
.header-brand img {
	width: 60px;
	height: 60px;
	margin-right: 1rem;
}
.header-brand span {
	font-size: 1.25rem;
	color: var(--text-primary);
	font-weight: 600;
	line-height: 25px;
}
.header-actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.user-info {
	text-align: right;
}
.user-info small {
	display: block;
}
.user-info .badge {
	display: inline-block;
	font-size: 0.75rem;
	padding: 0.15rem 0.5rem;
	margin: 0.5rem 0 0 0;
	border-radius: 99px;
}

/* Button Styles */
.btn {
	display: inline-block;
	padding: 0.6rem 1.2rem;
	border-radius: 0.5rem;
	font-weight: 600;
	text-align: center;
	cursor: pointer;
	text-decoration: none;
	border: 1px solid transparent;
	transition: all 0.2s ease;
}
.btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	background-color: #e2e8f0;
    color: #94a3b8;
}
.btn-primary {
	background-color: var(--cta-color);
	color: var(--cta-text-color);
}
.btn-primary:hover:not(:disabled) {
	background-color: #005c45;
}
.btn-secondary {
	background-color: #e2e8f0;
	color: #334155;
}
.btn-secondary:hover {
	background-color: #cbd5e1;
}
.btn-danger {
	background-color: var(--danger-bg);
	color: var(--danger-color);
	border-color: #fca5a5;
}
.btn-danger:hover:not(:disabled) {
	background-color: var(--danger-color);
	color: white;
}
.btn-warning {
    background-color: #fef9c3;
    color: #a16207;
    border-color: #fde047;
}
.btn-warning:hover:not(:disabled) {
    background-color: #facc15;
    color: #422006;
}
.btn-info {
    background-color: #e0f2fe;
    color: #0369a1;
    border-color: #7dd3fc;
}
.btn-info:hover:not(:disabled) {
    background-color: #38bdf8;
    color: white;
}
.btn-action-icon {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 0.25rem;
}
.btn-action-icon:hover {
    color: var(--cta-color);
}
.btn-copy {
    background: none;
    border: none;
    cursor: pointer;
    color: #6c757d;
    padding: 0.25rem;
}
.btn-copy:hover {
    color: var(--cta-color);
}

/* Page & Card Layout */
.page-section {
	padding: 0;
}
.main-layout {
	display: block;
}
.card {
	background-color: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	overflow: hidden;
}
.card-padded {
	padding: 1rem;
}
.card-body {
	padding: 1.5rem;
}
.card-body p {
	margin-top: 0;
	margin-bottom: 1rem;
}
.card-body p:last-child {
	margin-bottom: 0;
}
.card-body ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.card-body li {
	margin-bottom: 0.5rem;
}

/* Info Grid & Accordion */
.info-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.6rem;
	margin-bottom: 3rem;
}
.accordion-card {
	padding: 0;
}
.accordion-card summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	padding: 1rem 1.5rem;
}
.accordion-card summary::-webkit-details-marker {
	display: none;
}
.accordion-card summary h4,
.accordion-card summary h5 {
	margin-bottom: 0;
}
.accordion-icon {
	transition: transform 0.2s ease-in-out;
}
.accordion-card[open]>summary .accordion-icon {
	transform: rotate(180deg);
}
.accordion-card .card-body {
	border-top: 1px solid var(--card-border);
}

/* Marketplace Tabs & Panels */
.main-category-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	border-bottom: 1px solid var(--card-border);
	padding-bottom: 1.5rem;
	margin-bottom: 2rem;
	justify-content: center;
}
.main-category-tab {
	border: 1px solid var(--card-border);
	color: var(--text-secondary);
	padding: 0.65rem 1.15rem;
	font-size: 0.8rem;
	font-weight: 600;
	border-radius: var(--radius);
	cursor: pointer;
	transition: all 0.2s ease;
}
.main-category-tab:hover {
	background-color: #f1f5f9;
	color: var(--text-primary);
}
.main-category-tab.active {
	background-color: #eef7f5;
	color: var(--cta-color);
	border-color: var(--cta-color);
	box-shadow: 0 0 0 3px rgba(0, 116, 86, 0.1);
}
.main-category-panel {
	display: none;
}
.main-category-panel.active {
	display: block;
	animation: fade-in 0.4s ease;
}
#app-marketplace.is-blurred {
    filter: blur(4px);
    pointer-events: none;
    user-select: none;
    transition: filter 0.3s ease-in-out;
}

/* --- GRID & MASONRY LAYOUTS --- */

/* Marketplace: Masonry Background */
#deployed-apps-list {
    background-color: rgb(0 0 0 / 2%);
    border-radius: 20px;
}

/* Style for empty state */
#deployed-apps-list.is-empty {
    margin-bottom: 70px;
    height: auto !important;
    background-color: transparent;
}


/* Marketplace: Masonry Layout */
.app-grid {
	column-gap: 1.5rem;
	column-count: 1;
}
.app-grid > .card {
	break-inside: avoid;
	margin-bottom: 1.5rem;
}
/* Deployed Apps: Packery Layout */
.grid-item {
    width: 100%;
    padding: 0.75rem;
}
.grid-item.is-dragging {
    z-index: 2;
}

@media (min-width: 992px) {
    .grid-item {
        width: 50%;
    }
}


/* App & Thumbnail Styles */
.app-card {
	padding: 1rem;
	display: flex;
	flex-direction: column;
	transition: all 0.2s ease-in-out;
	position: relative;
}
.app-card.hidden {
	display: none;
}
.app-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--shadow-lg);
}
.app-card-header {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1rem;
}
.thumbnail-wrapper {
	width: 50px;
	height: 50px;
	padding: 4px;
	border-radius: 0.5rem;
	background-color: #e1e8f0;
	border: 1px solid var(--card-border);
}
.thumbnail-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.app-card-body {
	flex-grow: 1;
}
.app-card-body p {
	font-size: 0.9rem;
	margin: 0;
}
.app-card-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--card-border);
}

/* Badge Styles */
.badge {
	display: inline-block;
	padding: 4px 6px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	text-align: center;
	white-space: nowrap;
	vertical-align: baseline;
	border-radius: 5px;
	text-transform: capitalize;
	font-family: monospace;
	max-width: 160px;
	overflow: hidden;
}
.badge.status-active {
	background-color: #dcfce7;
	color: #166534;
	border: 1px solid #bbf7d0;
}
.badge.status-inactive {
	background-color: #fee2e2;
	color: #991b1b;
	border: 1px solid #fecaca;
}

/* Deployed App Card Styles */
.deployed-app-card {
	height: 100%; /* Ensure card fills the grid-item */
	position: relative;
}
.deployed-app-card.is-loading .card-content {
    filter: blur(4px);
    pointer-events: none;
    user-select: none;
}
.card-preloader {
    position: absolute;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.75);
    z-index: 5;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    backdrop-filter: blur(2px);
}
.deployed-app-card.is-loading .card-preloader {
    display: flex;
}
.deployed-app-card .thumbnail-wrapper {
	width: 40px;
	height: 40px;	
    margin: 0 15px;
}
.deployed-app-header {
	display: flex;
	align-items: center;
	gap: 0;
	margin-bottom: 0.25rem;
}
.drag-handle {
    cursor: move;
    color: var(--card-border);
    padding: 0 0.45rem 0 0.25rem;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    transition: color 0.2s ease;
}
.drag-handle:hover {
    color: var(--text-secondary);
}
.app-name-container {
	flex-grow: 1;
}
.app-name-display {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.app-name-display .app-title {
	margin: 0;
	font-weight: 600;
	font-size: 1.1rem;
	line-height: 1.2;
	color: var(--text-primary);
}
.btn-edit-name {
	background: none;
	border: none;
	color: var(--text-secondary);
	cursor: pointer;
	padding: 0.25rem;
	font-size: 0.8rem;
	line-height: 1;
}
.btn-edit-name:hover {
	color: var(--text-primary);
}
.app-name-edit-form {
	display: flex;
	gap: 0.5rem;
	align-items: center;
}
.app-name-edit-form .form-control {
	height: 38px;
	padding: 0.5rem 0.75rem;
	flex-grow: 1;
}
.app-name-edit-form button {
	width: 38px;
	height: 38px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.host-link {
	display: inline-block;
	color: var(--cta-color);
	text-decoration: none;
	font-weight: 500;
	font-size: 12px;
	font-family: monospace;
	margin: 5px 0;
}
.host-link:hover {
	text-decoration: underline;
}
.app-meta-info {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 0;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--card-border);
}

/* --- NEW: Card Status Dot --- */
.card-status-dot {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    z-index: 3;
    box-shadow: 0 0 0 2px var(--card-bg);
}
.card-status-dot.running {
    background-color: var(--usage-normal);
}
.card-status-dot.deploying,
.card-status-dot.starting {
    background-color: var(--usage-high);
	animation: pulse 2s infinite;
}
.card-status-dot.paused {
    background-color: #e2e8f0;
}
.card-status-dot.error {
    background-color: var(--usage-critical);
}

/* Domain & DNS Management */
.dns-instruction-card {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-top: 1rem;
}
.dns-instruction-card h6 {
    font-weight: 600;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.dns-record {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 0.5rem 1rem;
    align-items: center;
    font-size: 0.9rem;
    margin-top: 0.75rem;
}
.dns-record-label {
    font-weight: 500;
    color: #6c757d;
}
.dns-record-value {
    font-family: monospace;
    background-color: #e9ecef;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#domainModal .modal-content {
    max-width: 550px;
}
#domainFinalConfirmInput {
    text-align: left;
    font-weight: bold;
    letter-spacing: 2px;
}
.domain-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e9ecef;
}
.domain-list-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.domain-list-actions {
    display: flex;
    gap: 0.5rem;
}

/* Environment Variables */
.env-settings-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
}
.env-variable-row {
    display: grid;
    grid-template-columns: 1fr 2fr auto;
    gap: 0.5rem;
    align-items: center;
}
.env-variable-row label {
    font-weight: 500;
    font-size: 0.8rem;
    font-family: monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.env-variable-row input {
    font-size: 0.8rem;
}
.env-actions {
    text-align: right;
    margin-top: 1rem;
}

/* Progress Bar & Misc */
.progress-bar {
	width: 100%;
	height: 4px;
	background-color: var(--card-border);
	border-radius: 99px;
	overflow: hidden;
}
.progress-bar-inner {
	height: 100%;
	width: 0%;
	background-color: var(--cta-color);
	transition: width 0.5s ease;
}
.whatsapp-button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background-color: #25D366;
	color: white;
	padding: 0.6rem 1.2rem;
	border-radius: 99px;
	text-decoration: none;
	font-weight: 600;
	transition: background-color 0.2s ease;
}
.whatsapp-button:hover {
	background-color: #128C7E;
	color: white;
}

/* Form Styles */
.form-group {
	margin-bottom: 1rem;
}
.form-label {
	display: block;
	font-weight: 500;
	color: var(--text-primary);
	margin-bottom: 0.5rem;
}
.form-control {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid var(--card-border);
	border-radius: 0.5rem;
	background-color: var(--card-bg);
	font-size: 1rem;
}
.form-control:focus {
	outline: none;
	border-color: var(--cta-color);
	box-shadow: 0 0 0 3px rgba(0, 116, 86, 0.2);
}
.input-group {
	position: relative;
}
.input-group .icon {
	position: absolute;
	left: 1rem;
	transform: translateY(40%);
	color: var(--text-secondary);
}
.input-group .form-control {
	padding-left: 2.5rem;
}

/* Modal Styles */
.modal-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background-color: rgba(17, 24, 39, 0.6);
	backdrop-filter: blur(4px);
	z-index: 100;
	align-items: baseline;
	justify-content: center;
	padding: 2.5rem;
	overflow: auto;
}
.modal-overlay.is-visible {
	display: flex;
}
.modal-content {
	background-color: var(--card-bg);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
	max-width: 500px;
	width: 100%;
	animation: modal-fade-in 0.3s ease;
}
.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem 1.5rem;
	border-bottom: 1px solid var(--card-border);
}
.modal-title {
	font-size: 1.25rem;
	margin: 0;
}
.modal-body {
	padding: 1.5rem;
}
.modal-footer {
	display: flex;
	gap: 0.75rem;
	padding: 1rem 1.5rem;
	border-top: 1px solid var(--card-border);
    justify-content: space-between;
}

/* Auth Modal Tabs */
.auth-tabs {
	display: flex;
	margin: 0;
}
.auth-tab {
	padding: 0.75rem 1rem;
	border: 0;
	background: none;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	margin: 0 10px;
}
.auth-tab.active {
	border-bottom-color: var(--cta-color);
	color: var(--text-primary);
	font-weight: 600;
}
.auth-panel {
	display: none;
}
.auth-panel.active {
	display: block;
}

/* Alert & Spinner */
.alert {
	padding: 1rem;
	border-radius: 0.5rem;
	margin: 0 0 1rem 0;
}
.alert-success {
	background-color: #dcfce7;
	color: #166534;
}
.alert-danger {
	background-color: #fee2e2;
	color: #991b1b;
}
.spinner {
	border: 4px solid #f3f3f3;
	border-top: 4px solid var(--cta-color);
	border-radius: 50%;
	width: 24px;
	height: 24px;
	animation: spin 1s linear infinite;
	margin: 0 auto;
}

/* Animations */
@keyframes fade-in {
	from { opacity: 0; } to { opacity: 1; }
}
@keyframes modal-fade-in {
	from { opacity: 0; transform: scale(0.95); }
	to { opacity: 1; transform: scale(1); }
}
@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

/* Responsive Media Queries */
@media (min-width: 768px) {
	.header-brand span {
		font-size: 1rem;
		font-weight: 400;
	}
	.info-grid {
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}
    .app-grid {
        column-count: 2;
    }
}
@media (min-width: 992px) {
    .app-grid {
        column-count: 3;
    }
}
@media (max-width: 992px) {
	.tab-none {
		display: none !important;
	}
}
@media (max-width: 768px) {
	.mob-none {
		display: none !important;
	}
}

/* Deployed App Card Tab Styles */
.app-card-tabs {
    display: flex;
    list-style: none;
    padding: 0 1.5rem;
    margin: 0;
    border-bottom: 1px solid var(--card-border);
}
.app-card-tab {
    padding: 0.75rem 1rem;
    cursor: pointer;
    font-weight: 500;
    color: var(--text-secondary);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px; /* Aligns with the panel border */
    transition: all 0.2s ease;
}
.app-card-tab:first-child {
	padding-left: 0;
}
.app-card-tab:hover {
    color: var(--text-primary);
}
.app-card-tab.active {
    color: var(--cta-color);
    font-weight: 600;
    border-bottom-color: var(--cta-color);
}
.app-card-panels {
    padding: 1.5rem;
}
.app-card-panel {
    display: none;
    animation: fade-in 0.3s ease;
}
.app-card-panel.active {
    display: block;
}

/* Advanced Settings Panel */
.advanced-section + .advanced-section {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--card-border);
}
.advanced-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
}
.critical-actions-panel {
    border: 1px solid #e2e8f0;
    background-color: #f8fafc;
    border-radius: var(--radius);
    padding: 1rem;
}
.critical-action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem;
}
.critical-action + .critical-action {
    border-top: 1px solid var(--card-border);
}
.critical-action h6 {
    color: var(--text-primary);
    margin-top: 0;
    margin-bottom: 0.25rem;
}
.critical-action p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.4;
}
.critical-action button {
    flex-shrink: 0;
    white-space: nowrap;
}
@media (max-width: 768px) {
    .critical-action {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        gap: 0.75rem;
    }
    .critical-action button {
        width: 100%;
    }
}
.critical-actions-panel .critical-action:last-child h6 {
	color: var(--danger-color);
}

/* Reference IDs Grid */
.reference-ids-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.75rem 1.5rem;
    font-family: monospace;
    font-size: 0.85rem;
}
.reference-ids-grid .reference-id-row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    align-items: center;
}
.reference-ids-grid strong {
    color: var(--text-primary);
    justify-self: start;
}
.reference-ids-grid .reference-id-row > div {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background-color: #f8fafc;
    border-radius: 0.375rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--card-border);
}
.reference-ids-grid span {
    color: var(--text-secondary);
    word-break: break-all;
    text-align: right;
}
.reference-ids-grid .btn-copy {
    margin-left: 0.5rem;
    flex-shrink: 0;
}
.deployment-info-grid {
	font-size: 0.9rem;
}
.deployment-info-grid strong {
	color: var(--text-primary);
}
.deployment-info-grid span {
	color: var(--text-secondary);
	margin-left: 0.75rem;
}


/* New Status and Support Styles */
.app-status-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.app-status-label {
    font-weight: 500;
    color: var(--text-primary);
}
.status-indicator {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 99px;
    line-height: 1.4;
}
.status-indicator.running {
    background-color: #dcfce7;
	color: #166534;
}
.status-indicator.deploying,
.status-indicator.starting {
	background-color: #fef9c3;
    color: #a16207;
	animation: pulse 2s infinite;
}
.status-indicator.paused {
    background-color: #e2e8f0;
    color: #475569;
}
.status-indicator.error {
    background-color: #fef2f2;
	color: #991b1b;
}
@keyframes pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.7; }
}
.support-block {
    background-color: #f8fafc;
    border-radius: 0.5rem;
    padding: 1rem;
    border: 1px solid var(--card-border);
}
.support-block p {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}
.support-block p:last-child {
    margin-bottom: 0;
}

/* App Count and Limit Message Styles */
.app-count {
	font-size: 1.2rem;
	font-weight: 500;
	color: var(--text-secondary);
}
.limit-reached-message {
	background-color: #fffbeb;
	border: 1px solid #fde68a;
	color: #b45309;
	border-radius: var(--radius);
	padding: 1.5rem;
	margin: 0 auto 3rem auto;
	display: flex;
	align-items: center;
	gap: 1.5rem;
	max-width: 800px;
}
.limit-reached-message i {
	font-size: 2rem;
	color: #f59e0b;
}
.limit-reached-message h4 {
	color: #92400e;
	margin-top: 0;
	margin-bottom: 0.5rem;
}
.limit-reached-message p {
	margin: 0;
}

/* Usage Panel Styles */
.usage-panel-content {
	padding: 1rem 0;
}
.usage-chart-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	text-align: center;
}
.usage-chart-container {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.usage-chart {
	width: 100%;
	max-width: 120px;
	height: auto;
	transform: rotate(-90deg);
}
.usage-chart-bg {
	fill: none;
	stroke: #e2e8f0;
	stroke-width: 3;
}
.usage-chart-bar {
	fill: none;
	stroke-width: 3;
	stroke-linecap: round;
	transition: stroke-dashoffset 0.5s ease;
}
.storage-usage-bar {
	stroke-dasharray: 100 100; /* Dotted line effect for non-progress */
}
.usage-chart-bar.usage-normal { stroke: var(--usage-normal); }
.usage-chart-bar.usage-high { stroke: var(--usage-high); }
.usage-chart-bar.usage-critical { stroke: var(--usage-critical); }
.usage-chart-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	line-height: 1.2;
}
.usage-chart-percent {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--text-primary);
	display: block;
}
.usage-chart-percent .unit {
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--text-secondary);
	margin-left: 2px;
}
.usage-chart-label {
	font-size: 0.8rem;
	color: var(--text-secondary);
	font-weight: 500;
}
.usage-note {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 2rem;
    border-top: 1px solid var(--card-border);
    padding-top: 2rem;
    text-align: center;
    margin-bottom: 0;
}
@media (max-width: 768px) {
	.usage-chart-grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
}