:root {
	--bg: #0b1020;
	--bg-card: #161b2b;
	--accent: #4cc9f0;
	--accent-soft: rgba(76, 201, 240, 0.15);
	--accent-strong: #f72585;
	--text: #edf2ff;
	--text-soft: #ddd;
	--OLDtext-soft: #adb5bd;
	--border: #343a40;
	--error: #ff6b6b;
	--radius: 12px;
	--shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
	--space: 1rem;
	--space-sm: 0.5rem;
	--space-xs: 0.25rem;
	--transition-fast: 0.15s ease-out;
}+


*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
	height: 100%;
}

body {
	XXXfont-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	background: radial-gradient(circle at top, #1a1f3a 0, #030712 60%);
	color: var(--text);
}

a { color: dodgerblue; }
a:visited { color: #c6c; }

table th {
	text-align : left ;
}

table.duration-table {
    border-collapse: separate;
    border-spacing: 1em;
}

.page {
	max-width: min(55rem, 98vw) ;
	width: fit-content ;
	margin: 2rem auto;
	padding: 0 1rem 2rem;
}

.page-header {
	text-align: left;
	margin-bottom: 1.5rem;
}

.page-header h1 {
	margin: 0 0 0.5rem 0;
	font-size: 1.9rem;
}

.page-header p {
	margin: 0;
	color: var(--text-soft);
}

.subtitle {
	color: var(--text-soft);
	margin-top: 0.25rem;
}

.card {
	background: linear-gradient(135deg, rgba(22, 27, 43, 0.98), rgba(12, 16, 30, 0.98));
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 1.5rem;
	margin-bottom: 1.5rem;
	border: 1px solid rgba(148, 163, 184, 0.25);
}

.form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.form-row {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.form-row-actions {
	align-items: center;
	gap: 0.75rem;
	margin-top: 2rem;
}

.label {
	font-weight: 600;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.label-note {
	font-weight: 400;
	font-size: 0.8rem;
	color: var(--text-soft);
}

.input {
	XXXwidth: 100%;
	padding: 0.5rem 0.6rem;
	border-radius: 8px;
	border: 1px solid var(--border);
	background: rgba(15, 23, 42, 0.9);
	color: var(--text);
	font-size: 0.95rem;
	outline: none;
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.input:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 1px rgba(76, 201, 240, 0.35);
	background: rgba(15, 23, 42, 1);
}

.input.error {
	border-color: var(--error);
}

.hint {
	font-size: 0.8rem;
	color: var(--text-soft);
}

.error-message {
	font-size: 0.8rem;
	color: var(--error);
	min-height: 1em;
}

.status-text {
	font-size: 0.85rem;
	color: var(--text-soft);
}

.button {
	border: none;
	border-radius: 999px;
	padding: 0.45rem 1.2rem;
	font-size: 0.95rem;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
	font-weight : 500 ;
}

.button.primary {
	background: skyblue;
	color: #black;
	box-shadow: 0 10px 30px rgba(76, 201, 240, 0.35);
	font-weight: 600 ;
}

.button.primary:hover {
	background: #5ad3f6;
	transform: translateY(-1px);
	box-shadow: 0 14px 32px rgba(76, 201, 240, 0.5);
}

.button.secondary {
	background: midnightblue;
	border: 1px solid var(--border);
	color: var(--text-soft);
}

.button.secondary:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.button:disabled {
	opacity: 0.6;
	cursor: default;
	transform: none;
	box-shadow: none;
}

/* suggestions */

.suggestions {
	margin-top: 0.25rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
}

.suggestion-pill {
	border-radius: 999px;
	padding: 0.15rem 0.5rem;
	font-size: 0.75rem;
	background: rgba(15, 23, 42, 0.9);
	border: 1px solid rgba(148, 163, 184, 0.5);
	color: var(--text-soft);
	cursor: pointer;
	transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.suggestion-pill:hover {
	background: var(--accent-soft);
	border-color: var(--accent);
	color: var(--accent);
}

/* upload page */

.card.upload {
    width: min(40em, 98vw);
}

/* file list */

.file-list {
	font-size: 0.85rem;
	color: var(--text-soft);
	margin-top: 0.25rem;
}

.file-list-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-radius: 6px;
	padding: 0.25rem 0.5rem;
	background: rgba(15, 23, 42, 0.7);
	margin-bottom: 0.1rem;
}

/* job status */

.job-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin-bottom: 0.75rem;
	font-size: 0.9rem;
	color: var(--text-soft);
}

.job-status {
	border-radius: 10px;
	padding: 0.75rem;
	background: rgba(15, 23, 42, 0.9);
	border: 1px solid var(--border);
	margin-bottom: 0.5rem;
}

.job-status-row {
	display: flex;
	gap: 0.5rem;
	font-size: 0.9rem;
}

.job-status-label {
	color: var(--text-soft);
	min-width: 60px;
}

.job-state-value {
	font-weight: 600;
}

.job-status-extra {
	font-size: 0.8rem;
	color: var(--text-soft);
	margin-top: 0.35rem;
}

/* cards editor */

#cards-editor {
  width: fit-content;
}

.cards-editor {
	margin-top: 1rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.card-set {
	border-radius: 10px;
	border: 1px solid rgba(148, 163, 184, 0.4);
	background: rgba(15, 23, 42, 0.8);
	padding: 0.75rem;
}

.card-set-header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 0.5rem;
}

.card-set-name {
	font-weight: 900;
	font-size: 1.5em;
}

/* card set counts */

.card-set-meta {
	color: var(--text-soft);
    font-weight: 600;
	XXXfont-size: 0.75rem;
}

.cardset1   { background: #900 ; }
.cardset2   { background: #00b ; }
.cardset3   { background: #070 ; }
.cardset4   { background: teal ; }
.cardset5   { background: #00b ; }
.cardset6   { background: #508 ; }
.cardset7   { background: #070 ; }
.cardset8   { background: #b60 ; }
.cardset9   { background: purple ; }
.cardset10  { background: #900 ; }
.cardset11  { background: #b60 ; }
.cardset12  { background: teal ; }
.cardset13  { background: #00b ; }
.cardset14  { background: #070 ; }
.cardset15  { background: #508 ; }

.cards-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1em;
}

.card-cell {
	width : 7em ;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding: 0.35rem 0.45rem;
	border-radius: 8px;
	background: rgba(15, 23, 42, 0.8);
	border: 1px solid rgba(148, 163, 184, 0.4);
	min-width: 120px;
}

.card-name {
	XXXfont-size: 0.8rem;
	color: var(--text-soft);
	text-wrap: nowrap;
}

.card-input {
	padding: 0.3rem 0.4rem;
	border-radius: 6px;
	border: 1px solid var(--border);
	background: #020617;
	color: var(--text);
	font-size: 0.8rem;
	outline: none;

	width: 5ch;
	text-align: center;
}

.card-input:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 1px rgba(76, 201, 240, 0.35);
}

.cards-summary {
	XXfont-size: 0.9rem;
	color: var(--text-soft);
	margin-top: 0.35rem;
	line-height: 200%;
	background: darkgreen;
	border-radius: 10px;
	padding: 0.5em 1em ;
	font-weight: bold;
}

/* NEW { */
.card-controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.35rem;
}

OLD.card-badge {
	font-size: 0.75rem;
	padding: 0.15rem 0.4rem;
	border-radius: 999px;
	background: rgba(15, 23, 42, 0.9);
	border: 1px solid rgba(148, 163, 184, 0.5);
	color: var(--text-soft);
}
.card-badge {
	font-size: 0.9rem;
	padding: 0.15rem 0.5rem;
	border-radius: 999px;
	border: 1px solid #000;          /* solid, no washed-out border */
	background: #111827;             /* solid dark base */
	color: #f9fafb;                  /* clear, bright text */
}

/* value-based styling hooks; you can override these however you like */
.card-badge.need {
	/* example */
	background: #555 ;
}

.card-badge.have {
	/* example */
	background: green ;
}

.card-badge.extra {
	/* example */
	background: yellow !important;
	color: black;
	font-weight: bold;
}

.card-badge.error {
	/* tune however you like */
	background: #800 ;
}

/* NEW } */

/* status feedback images */

#state-cont {
	height : 300px ;
	width  : auto ;
	margin : 1rem 0 ;
}

img.job-state {
	/* just setting height 100% doesn't work idk fml */
    max-height: 100%;
    min-height: 100%;
    max-width: 100%;
}

.job-state.finished { content : url("/static/images/homer-confetti.jpg") ; }
.job-state.failed   { content : url("/static/images/homer-cooking-fail.gif") ; }
.job-state.pushcards{ content : url("/static/images/marge-waiting.gif") ; }

/* misc */

.info-box {
	margin-top: 1rem;
	font-size: 0.85rem;
	color: var(--text-soft);
	border-radius: 8px;
	border: 1px dashed rgba(148, 163, 184, 0.6);
	padding: 0.75rem 0.85rem;
	background: rgba(15, 23, 42, 0.6);
}

.hidden {
	display: none;
}

@media (max-width: 640px) {
	.page {
		margin-top: 1rem;
	}

	.card {
		padding: 1.1rem;
	}

	.job-meta {
		flex-direction: column;
	}
}