:root {
		--bg: #e6ebf2;
		--card: #ffffff;
		--accent: #4f8ef7;
		--accent2: #8aaedc;
		--purple: #764ba2;
		--muted: #6b7280;
		--text: #1f2937;
		--border: #e5e7eb;
		--hover: #f8fafc;
		--radius: 10px;
		--shadow: rgba(0,0,0,0.08);
		--shadow-lg: 0 10px 25px rgba(0,0,0,0.1);
		--color-ok: #10b981;
		--color-degraded: #f59e0b;
		--color-down: #ef4444;
		--color-maintenance: #3b82f6;
}

[data-theme="dark"] {
		--bg: #0f172a;
		--card: #1e293b;
		--text: #f8fafc;
		--muted: #94a3b8;
		--border: #334155;
		--hover: #334155;
}

* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		transition: all 0.3s ease;
}

body {
		font-family: 'SF Mono', 'Monaco', 'Courier New', monospace;
		background: var(--bg);
		color: var(--text);
		line-height: 1.6;
		overflow-x: hidden;
}

body::before {
		content: "";
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><defs><pattern id="circuit" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="20" cy="20" r="2" fill="rgba(79,142,247,0.1)"/><circle cx="80" cy="80" r="2" fill="rgba(138,174,220,0.1)"/><line x1="20" y1="20" x2="80" y2="20" stroke="rgba(79,142,247,0.05)" stroke-width="1"/><line x1="20" y1="80" x2="80" y2="80" stroke="rgba(138,174,220,0.05)" stroke-width="1"/></pattern></defs><rect width="100%" height="100%" fill="url(%23circuit)"/></svg>') repeat;
		z-index: -1;
		animation: circuitFlow 20s linear infinite;
}

@keyframes circuitFlow {
		0% { transform: translateX(0) translateY(0); }
		100% { transform: translateX(100px) translateY(100px); }
}

.container {
		max-width: 1200px;
		margin: 0 auto;
		padding: 20px;
}

.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30px 0;
		margin-bottom: 40px;
}

.logo h1 {
		font-size: 28px;
		font-weight: 700;
		color: var(--accent);
		background: linear-gradient(135deg, var(--accent), var(--purple));
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
}

.nav {
		display: flex;
		gap: 12px;
		align-items: center;
}

.btn-subscribe, .btn-theme {
		padding: 10px 20px;
		border: 2px solid var(--accent);
		border-radius: var(--radius);
		background: transparent;
		color: var(--accent);
		cursor: pointer;
		font-size: 14px;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		font-family: 'SF Mono', 'Monaco', 'Courier New', monospace;
}

.btn-subscribe:hover, .btn-theme:hover {
		background: var(--accent);
		color: white;
		transform: translateY(-2px);
		box-shadow: 0 4px 12px rgba(79, 142, 247, 0.3);
}

.btn-theme {
		width: 48px;
		height: 48px;
		padding: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
}

.icon-sun, .icon-moon {
		width: 20px;
		height: 20px;
}

[data-theme="dark"] .icon-sun {
		display: none;
}

.icon-moon {
		display: none;
}

[data-theme="dark"] .icon-moon {
		display: block;
}

.status-banner {
		display: flex;
		align-items: center;
		gap: 16px;
		padding: 32px;
		background: linear-gradient(135deg, var(--color-ok), #059669);
		color: white;
		border-radius: var(--radius);
		margin-bottom: 48px;
		box-shadow: var(--shadow-lg);
		position: relative;
		overflow: hidden;
}

.status-banner::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
		animation: shimmer 3s infinite;
}

@keyframes shimmer {
		0% { left: -100%; }
		100% { left: 100%; }
}

.status-banner.degraded {
		background: linear-gradient(135deg, var(--color-degraded), #d97706);
}

.status-banner.down {
		background: linear-gradient(135deg, var(--color-down), #dc2626);
		
		--split: 100%;
		--color-one: var(--color-ok);
		--color-two: var(--color-down);
		background: linear-gradient( 135deg, var(--color-one) 0%, var(--color-one) var(--split), var(--color-two) var(--split), var(--color-two) 100% );
}

.status-banner.maintenance {
		background: linear-gradient(135deg, var(--color-maintenance), #2563eb);
}

.status-icon {
		width: 48px;
		height: 48px;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1;
}

.status-icon svg {
		width: 28px;
		height: 28px;
}

.status-banner h2 {
		z-index: 1;
}

.services-title, .incidents-title {
		font-size: 14px;
		text-transform: uppercase;
		letter-spacing: 0.1em;
		color: var(--muted);
		margin-bottom: 20px;
		font-weight: 600;
}

.service-list {
		display: flex;
		flex-direction: column;
		gap: 12px;
		margin-bottom: 48px;
}

.service-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20px 24px;
		background: var(--card);
		border: 2px solid var(--border);
		border-radius: var(--radius);
}

.service-item:hover {
		background: var(--hover);
		border-color: var(--accent);
		transform: translateX(5px);
		box-shadow: 0 4px 12px var(--shadow);
}

.service-info {
		display: flex;
		align-items: center;
		gap: 12px;
}

.service-status-dot {
		width: 12px;
		height: 12px;
		border-radius: 50%;
		background: var(--color-ok);
		animation: pulse 2s infinite;
}

@keyframes pulse {
		0%, 100% { opacity: 1; }
		50% { opacity: 0.5; }
}

.service-status-dot.degraded {
		background: var(--color-degraded);
}

.service-status-dot.down {
		background: var(--color-down);
}

.service-status-dot.maintenance {
		background: var(--color-maintenance);
}

.service-name {
		font-weight: 600;
		font-size: 16px;
}

.service-status {
		font-size: 14px;
		color: var(--muted);
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.5px;
}

.service-status.operational {
		color: var(--color-ok);
}

.service-status.degraded {
		color: var(--color-degraded);
}

.service-status.down {
		color: var(--color-down);
}

.service-status.maintenance {
		color: var(--color-maintenance);
}

.incidents {
		margin-bottom: 48px;
}

.incidents-list {
		display: flex;
		flex-direction: column;
		gap: 16px;
}

.no-incidents {
		text-align: center;
		padding: 40px;
		color: var(--muted);
		background: var(--card);
		border-radius: var(--radius);
		border: 2px dashed var(--border);
}

.incident-item {
		padding: 24px;
		background: var(--card);
		border: 2px solid var(--border);
		border-radius: var(--radius);
}

.incident-item:hover {
		border-color: var(--accent);
		box-shadow: 0 4px 12px var(--shadow);
}

.incident-header {
		display: flex;
		justify-content: space-between;
		align-items: start;
		margin-bottom: 12px;
}

.incident-title {
		font-size: 18px;
		font-weight: 600;
		color: var(--accent);
}

.incident-status {
		display: inline-block;
		padding: 4px 12px;
		border-radius: 20px;
		font-size: 12px;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.5px;
}

.incident-status.resolved {
		background: rgba(16, 185, 129, 0.1);
		color: var(--color-ok);
}

.incident-status.investigating {
		background: rgba(239, 68, 68, 0.1);
		color: var(--color-down);
}

.incident-status.monitoring {
		background: rgba(245, 158, 11, 0.1);
		color: var(--color-degraded);
}

.incident-time {
		font-size: 14px;
		color: var(--muted);
		margin-bottom: 12px;
}

.incident-description {
		color: var(--muted);
		line-height: 1.6;
}

.history-link {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20px 24px;
		background: var(--card);
		border: 2px solid var(--accent);
		border-radius: var(--radius);
		text-decoration: none;
		color: var(--accent);
		margin-bottom: 48px;
		font-weight: 600;
}

.history-link:hover {
		background: var(--accent);
		color: white;
		transform: translateY(-2px);
		box-shadow: 0 8px 25px rgba(79, 142, 247, 0.4);
}

.history-link svg {
		width: 20px;
		height: 20px;
}

.footer {
		text-align: center;
		padding: 40px 0;
		color: var(--muted);
		font-size: 14px;
}

.modal {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		backdrop-filter: blur(5px);
		z-index: 1000;
		align-items: center;
		justify-content: center;
}

.modal.active {
		display: flex;
}

.modal-content {
		background: var(--card);
		padding: 32px;
		border-radius: var(--radius);
		max-width: 500px;
		width: 90%;
		position: relative;
		box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
		border: 2px solid var(--accent);
}

.modal-close {
		position: absolute;
		top: 16px;
		right: 16px;
		background: none;
		border: none;
		font-size: 28px;
		cursor: pointer;
		color: var(--muted);
		width: 32px;
		height: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
}

.modal-close:hover {
		background: var(--hover);
		color: var(--accent);
}

.modal-content h3 {
		margin-bottom: 12px;
		font-size: 24px;
		color: var(--accent);
}

.modal-content p {
		color: var(--muted);
		margin-bottom: 24px;
}

#subscribeForm {
		display: flex;
		flex-direction: column;
		gap: 12px;
}

#emailInput {
		padding: 12px 16px;
		border: 2px solid var(--border);
		border-radius: var(--radius);
		font-size: 16px;
		background: var(--bg);
		color: var(--text);
		font-family: 'SF Mono', 'Monaco', 'Courier New', monospace;
}

#emailInput:focus {
		outline: none;
		border-color: var(--accent);
}

.btn-submit {
		padding: 12px 24px;
		background: linear-gradient(135deg, var(--accent), var(--purple));
		color: white;
		border: none;
		border-radius: var(--radius);
		font-size: 16px;
		font-weight: 600;
		cursor: pointer;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		font-family: 'SF Mono', 'Monaco', 'Courier New', monospace;
}

.btn-submit:hover {
		transform: translateY(-2px);
		box-shadow: 0 8px 25px rgba(79, 142, 247, 0.4);
}

.subscribe-message {
		margin-top: 16px;
		padding: 12px;
		border-radius: var(--radius);
		display: none;
}

.subscribe-message.success {
		display: block;
		background: rgba(16, 185, 129, 0.1);
		color: var(--color-ok);
}

.subscribe-message.error {
		display: block;
		background: rgba(239, 68, 68, 0.1);
		color: var(--color-down);
}

@media (max-width: 768px) {
		.header {
				flex-direction: column;
				gap: 20px;
				text-align: center;
		}

		.service-item {
				flex-direction: column;
				align-items: flex-start;
				gap: 12px;
		}

		.incident-header {
				flex-direction: column;
				gap: 12px;
		}
}