#sjs-app,
.sjs-login-gate {
	--sjs-orange:#FF6F00;
	--sjs-black:#050505;
	--sjs-panel:#0d0d0d;
	--sjs-white:#fff;
	--sjs-muted:#bdbdbd;
	--sjs-line:rgba(255,255,255,.14);
	color:var(--sjs-white);
	font-family:Arial,Helvetica,sans-serif;
}

#sjs-app * ,
.sjs-login-gate * { box-sizing:border-box; }

.sjs-app {
	background:
		radial-gradient(circle at 90% 5%, rgba(255,111,0,.12), transparent 26%),
		#050505;
	padding:24px;
	min-height:780px;
	border-top:7px solid var(--sjs-orange);
}

.sjs-shell { width:min(1180px,100%); margin:0 auto; }

.sjs-top {
	display:flex;
	justify-content:space-between;
	align-items:flex-end;
	gap:20px;
	padding:18px 0 26px;
}

.sjs-brand-block {
	display:flex;
	align-items:center;
	gap:18px;
}

.sjs-logo {
	display:block;
	width:150px;
	height:auto;
	flex:0 0 auto;
}

.sjs-top h2,
.sjs-card h3,
.sjs-login-card h2 {
	color:#fff !important;
	margin:0;
	text-transform:uppercase;
	font-weight:900;
	line-height:1;
}

.sjs-top h2 { font-size:clamp(34px,6vw,64px); }

.sjs-sub,
.sjs-card p { color:var(--sjs-muted); }

.sjs-kicker {
	color:var(--sjs-orange);
	font-size:11px;
	font-weight:900;
	text-transform:uppercase;
	letter-spacing:2px;
	margin-bottom:8px;
}

.sjs-user {
	color:#000;
	background:var(--sjs-orange);
	padding:9px 12px;
	font-weight:900;
	border-radius:999px;
	font-size:12px;
}

.sjs-tabs {
	display:flex;
	gap:8px;
	flex-wrap:wrap;
	border-bottom:1px solid var(--sjs-line);
	padding-bottom:14px;
	margin-bottom:22px;
}

.sjs-tab {
	background:#111;
	color:#fff;
	border:1px solid var(--sjs-line);
	padding:11px 14px;
	border-radius:7px;
	font-weight:900;
	text-transform:uppercase;
	font-size:11px;
	cursor:pointer;
}

.sjs-tab:hover,
.sjs-tab.is-active {
	color:#000;
	background:var(--sjs-orange);
	border-color:var(--sjs-orange);
}

.sjs-panel { display:none; }
.sjs-panel.is-active { display:block; }

.sjs-stats {
	display:grid;
	grid-template-columns:repeat(5,1fr);
	gap:12px;
	margin-bottom:16px;
}

.sjs-stat {
	background:#fff;
	color:#000;
	border-bottom:6px solid var(--sjs-orange);
	padding:18px;
	min-height:106px;
}

.sjs-stat span {
	display:block;
	color:#000;
	font-size:10px;
	text-transform:uppercase;
	letter-spacing:.7px;
	font-weight:900;
}

.sjs-stat strong {
	display:block;
	color:#000;
	font-size:27px;
	margin-top:8px;
}

.sjs-card {
	background:linear-gradient(145deg,#111,#080808);
	border:1px solid var(--sjs-line);
	border-radius:12px;
	padding:24px;
	box-shadow:0 18px 45px rgba(0,0,0,.22);
}

.sjs-card-head {
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:18px;
}

.sjs-card-head > strong {
	color:var(--sjs-orange);
	font-size:25px;
}

.sjs-progress-card { margin-bottom:16px; }

.sjs-progress {
	height:10px;
	background:#fff;
	margin:19px 0 10px;
	overflow:hidden;
	border-radius:999px;
}

.sjs-progress span {
	display:block;
	height:100%;
	width:0;
	background:var(--sjs-orange);
	transition:width .35s ease;
}

.sjs-progress-meta {
	color:var(--sjs-muted);
	font-size:12px;
}

.sjs-dashboard-grid,
.sjs-two-col {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:16px;
}

.sjs-two-col { align-items:start; }

.sjs-form {
	display:grid;
	gap:14px;
}

.sjs-form h3 { margin-bottom:6px; }

.sjs-form label {
	color:#fff;
	font-size:11px;
	text-transform:uppercase;
	letter-spacing:.8px;
	font-weight:900;
	display:grid;
	gap:7px;
}

.sjs-form input,
.sjs-form select,
.sjs-form textarea,
.sjs-date-filter {
	width:100%;
	color:#fff;
	background:#000;
	border:1px solid var(--sjs-orange);
	border-radius:7px;
	padding:12px;
	font:inherit;
	outline:none;
}

.sjs-form input:focus,
.sjs-form select:focus,
.sjs-form textarea:focus,
.sjs-date-filter:focus {
	box-shadow:0 0 0 3px rgba(255,111,0,.18);
}

.sjs-form-row {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:12px;
}

.sjs-primary {
	display:inline-flex;
	justify-content:center;
	align-items:center;
	background:var(--sjs-orange);
	color:#000 !important;
	border:0;
	border-radius:7px;
	min-height:48px;
	padding:12px 18px;
	font-weight:900;
	text-transform:uppercase;
	font-size:12px;
	cursor:pointer;
	text-decoration:none;
}

.sjs-primary:hover { transform:translateY(-1px); }

.sjs-date-filter {
	width:auto;
	min-width:150px;
	padding:9px 10px;
	font-size:12px;
}

.sjs-list {
	display:grid;
	gap:10px;
	margin-top:16px;
}

.sjs-list-item {
	display:grid;
	grid-template-columns:1fr auto;
	gap:14px;
	align-items:center;
	border-left:5px solid var(--sjs-orange);
	background:#000;
	padding:13px 14px;
	border-radius:6px;
}

.sjs-list-main strong {
	display:block;
	color:#fff;
	font-size:14px;
}

.sjs-list-main span {
	display:block;
	color:var(--sjs-muted);
	font-size:11px;
	margin-top:4px;
}

.sjs-list-value {
	color:var(--sjs-orange);
	font-size:16px;
	font-weight:900;
	text-align:right;
}

.sjs-delete {
	background:transparent;
	color:#fff;
	border:1px solid rgba(255,255,255,.22);
	border-radius:5px;
	padding:6px 8px;
	cursor:pointer;
	font-size:10px;
	margin-top:6px;
}

.sjs-delete:hover {
	border-color:var(--sjs-orange);
	color:var(--sjs-orange);
}

.sjs-empty {
	color:var(--sjs-muted);
	font-size:13px;
	margin-top:12px;
}

.sjs-notice {
	margin:0 0 16px;
	padding:12px 14px;
	border-left:5px solid var(--sjs-orange);
	background:#111;
	color:#fff;
	font-weight:700;
	font-size:13px;
}

.sjs-notice.is-error { border-left-color:#fff; }

.sjs-settings-form {
	max-width:620px;
	margin-bottom:16px;
}

.sjs-roadmap-grid {
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:12px;
	margin-top:18px;
}

.sjs-roadmap-grid div {
	border:1px solid var(--sjs-orange);
	padding:16px;
	min-height:105px;
}

.sjs-roadmap-grid strong {
	display:block;
	color:var(--sjs-orange);
	text-transform:uppercase;
}

.sjs-roadmap-grid span {
	display:block;
	color:#fff;
	font-size:12px;
	line-height:1.45;
	margin-top:7px;
}

.sjs-unit-label { color:var(--sjs-orange); }

.sjs-login-gate {
	background:#050505;
	padding:40px 20px;
}

.sjs-login-card {
	max-width:650px;
	margin:0 auto;
	background:#090909;
	border:2px solid var(--sjs-orange);
	padding:32px;
	border-radius:14px;
}

.sjs-login-card p { color:#fff; }

@media(max-width:900px) {
	.sjs-stats { grid-template-columns:repeat(2,1fr); }
	.sjs-dashboard-grid,
	.sjs-two-col { grid-template-columns:1fr; }
	.sjs-roadmap-grid { grid-template-columns:1fr 1fr; }
}

@media(max-width:580px) {
	.sjs-app { padding:16px; }
	.sjs-top { align-items:flex-start; flex-direction:column; }
	.sjs-brand-block { align-items:flex-start; flex-direction:column; }
	.sjs-logo { width:135px; }
	.sjs-stats,
	.sjs-roadmap-grid,
	.sjs-form-row { grid-template-columns:1fr; }
	.sjs-card { padding:18px; }
	.sjs-card-head { align-items:flex-start; flex-direction:column; }
	.sjs-date-filter { width:100%; }
}