:root {
	--fos-bg: #070b12;
	--fos-card: #101827;
	--fos-border: #22304a;
	--fos-accent: #1f6feb;
	--fos-text: #e8edf5;
	--fos-subtext: #b8c3d6;
}

.fos-portal-wrap {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 16px;
	color: var(--fos-text);
}

.fos-card {
	background: var(--fos-card);
	border: 1px solid var(--fos-border);
	border-radius: 12px;
	padding: 16px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}

.fos-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.fos-full { grid-column: 1 / -1; }

.fos-table {
	width: 100%;
	border-collapse: collapse;
}

.fos-table th,
.fos-table td {
	border-bottom: 1px solid var(--fos-border);
	padding: 8px;
	color: var(--fos-text);
}

.fos-badge {
	background: rgba(31, 111, 235, 0.2);
	border: 1px solid var(--fos-accent);
	color: var(--fos-text);
	border-radius: 14px;
	padding: 2px 8px;
	font-size: 12px;
}

.fos-status-approved { border-color: #1ea77a; }
.fos-status-rejected { border-color: #d43b3b; }
.fos-status-pending { border-color: #f0a500; }

.fos-notice {
	border-color: #1ea77a;
	background: rgba(30, 167, 122, 0.12);
}

.fos-notice p {
	margin: 0;
	color: var(--fos-text);
}

.fos-btn {
	margin-top: 12px;
}

.fos-portal-wrap input,
.fos-portal-wrap select,
.fos-portal-wrap textarea,
.fos-card input,
.fos-card select,
.fos-card textarea {
	width: 100%;
	background: #0e1726;
	border: 1px solid var(--fos-border);
	color: var(--fos-text);
	border-radius: 8px;
	padding: 8px;
}

@media (max-width: 768px) {
	.fos-grid { grid-template-columns: 1fr; }
}