:root{ 
	--bg: #fbfdff; 
	--muted: #6b7280; 
	--accent: #0b74de;
	--accent-hover: #0960b8;
	--card: #ffffff; 
	--muted-bg: #f3f4f6;
	--text: #111827;
	--border: #d1d5db;
	--danger: #dc3545;
	--danger-hover: #c82333;
	--success: #28a745;
	--pers: #ff8a80;
	--org: #a5d6a7;
	--date: #90caf9;
	--loc: #f48fb1;
	--pers-text: #7b1e1e;
}

* { box-sizing: border-box; }

body { 
	font-family: Inter, 'Helvetica Neue', Arial, sans-serif; 
	background: var(--bg); 
	color: var(--text);
	margin: 0;
	padding: 0;
}

/* ===== NAVBAR ===== */
.navbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: var(--accent);
	padding: 12px 24px;
	color: white;
}

.navbar-brand {
	font-weight: bold;
	font-size: 20px;
}

.navbar-nav {
	display: flex;
	align-items: center;
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.navbar-nav a {
	color: white;
	text-decoration: none;
	padding: 8px 12px;
	border-radius: 6px;
	transition: background-color 0.2s;
}

.navbar-nav a:hover {
	background-color: rgba(255, 255, 255, 0.2);
}

.navbar-user {
	display: flex;
	align-items: center;
	gap: 15px;
}

.navbar-user span {
	font-weight: 500;
}

.btn-disconnect {
	background-color: var(--danger);
	color: white;
	border: none;
	padding: 8px 16px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 14px;
	transition: background-color 0.2s;
}

.btn-disconnect:hover {
	background-color: var(--danger-hover);
}

/* ===== AUTH PAGES (Login/Register) ===== */
.auth-page {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	padding: 20px;
}

.auth-form {
	background-color: var(--card);
	padding: 30px 35px;
	border-radius: 10px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	width: 100%;
	max-width: 420px;
}

.auth-form h2 {
	margin-bottom: 24px;
	text-align: center;
	color: var(--text);
	font-size: 24px;
}

.auth-brand {
	text-align: center;
	font-size: 32px;
	font-weight: bold;
	color: var(--accent);
	margin-bottom: 8px;
}

.auth-form label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
	color: var(--text);
}

.auth-form input {
	width: 100%;
	padding: 12px;
	margin-bottom: 16px;
	border-radius: 6px;
	border: 1px solid var(--border);
	font-size: 14px;
	transition: border-color 0.2s;
}

.auth-form input:focus {
	outline: none;
	border-color: var(--accent);
}

.auth-form button {
	width: 100%;
	padding: 12px;
	border: none;
	background-color: var(--accent);
	color: white;
	font-size: 16px;
	font-weight: 600;
	border-radius: 6px;
	cursor: pointer;
	transition: background-color 0.2s;
}

.auth-form button:hover {
	background-color: var(--accent-hover);
}

.auth-link {
	text-align: center;
	margin-top: 18px;
	color: var(--muted);
}

.auth-link a {
	color: var(--accent);
	text-decoration: none;
	font-weight: 500;
}

.auth-link a:hover {
	text-decoration: underline;
}

.error {
	color: var(--danger);
	font-size: 14px;
	margin-bottom: 15px;
}

.success {
	color: var(--success);
	font-size: 14px;
	margin-bottom: 15px;
}

/* ===== APP CONTAINER ===== */
.container { 
	max-width: 1100px; 
	margin: 0 auto; 
	padding: 28px;
	background: transparent;
}

h1 { 
	margin-bottom: 8px; 
	font-size: 28px;
}

h2 {
	font-size: 20px;
	margin-top: 18px;
	margin-bottom: 10px;
}

.section-title { 
	margin-top: 18px; 
	margin-bottom: 10px; 
	font-size: 20px;
}

.row { 
	display: flex; 
	gap: 8px; 
	align-items: center; 
	margin-top: 8px;
}

.muted { 
	color: var(--muted); 
	margin-top: 8px;
}

.muted.small { 
	font-size: 13px; 
	color: var(--muted);
}

/* ===== LABEL PALETTE ===== */
.palette { 
	display: flex; 
	gap: 8px; 
	margin-bottom: 8px;
}

.label-btn { 
	padding: 8px 12px; 
	border-radius: 6px; 
	border: 1px solid var(--border); 
	background: var(--muted-bg); 
	cursor: pointer; 
	font-weight: 600; 
	display: flex; 
	align-items: center; 
	gap: 8px;
	transition: transform 0.1s;
}

.label-btn:hover {
	transform: translateY(-1px);
}

.label-btn.active { 
	box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06); 
	border-color: var(--accent); 
	background: linear-gradient(180deg, #fff, #f8fbff);
}

.label-btn[data-label="PERS"] {
	background: var(--pers);
	color: #000;
	border-color: rgba(0, 0, 0, 0.06);
	box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.06);
}

.label-btn[data-label="ORG"] {
	background: var(--org);
	color: #07361a;
	border-color: rgba(0, 0, 0, 0.06);
	box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.04);
}

.label-btn[data-label="DATE"] {
	background: var(--date);
	color: #062a46;
	border-color: rgba(0, 0, 0, 0.06);
	box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.04);
}

.label-btn[data-label="LOC"] {
	background: var(--loc);
	color: #3b0b2f;
	border-color: rgba(0, 0, 0, 0.06);
	box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.04);
}

/* ===== CONTROLS ===== */
.controls { 
	margin-bottom: 10px;
}

.controls button { 
	padding: 8px 12px; 
	border-radius: 6px; 
	border: 1px solid #cbd5e1; 
	background: #fff; 
	cursor: pointer;
	transition: transform 0.1s;
}

.controls button:hover { 
	transform: translateY(-1px);
}

/* ===== TEXT BOX ===== */
.text-box { 
	border: 1px solid #e5e7eb; 
	min-height: 220px; 
	padding: 14px; 
	white-space: pre-wrap; 
	overflow: auto; 
	border-radius: 6px; 
	background: #fff;
}

/* ===== ANNOTATIONS ===== */
.annot { 
	padding: 2px 6px; 
	border-radius: 3px; 
	margin: 0 1px; 
	display: inline-block; 
	position: relative;
}

.annot[data-label="PERS"] { 
	background: var(--pers); 
	color: #000; 
	box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.03);
}

.annot[data-label="ORG"] { 
	background: var(--org); 
	color: #07361a;
}

.annot[data-label="DATE"] { 
	background: var(--date); 
	color: #062a46;
}

.annot[data-label="LOC"] { 
	background: var(--loc); 
	color: #3b0b2f;
}

.annot::after { 
	content: " " attr(data-label); 
	font-weight: 700; 
	margin-left: 8px; 
	color: var(--pers-text); 
	pointer-events: none; 
	user-select: none;
}

.annot[data-label="ORG"]::after { color: #155724; }
.annot[data-label="DATE"]::after { color: #0b3b6f; }
.annot[data-label="LOC"]::after { color: #831843; }

/* ===== ANNOTATIONS LIST ===== */
.annotations-list ul { 
	list-style: none; 
	padding-left: 0;
}

.annotations-list li { 
	padding: 8px 6px; 
	display: flex; 
	gap: 12px; 
	align-items: center; 
	border-bottom: 1px dashed #eef2ff;
}

.annotations-list button { 
	margin-left: auto; 
	padding: 6px 10px; 
	border-radius: 6px; 
	border: 1px solid #e5e7eb; 
	background: #fff;
}

/* ===== UPLOAD FORM ===== */
.upload textarea { 
	width: 100%; 
	font-family: monospace; 
	border-radius: 6px; 
	border: 1px solid #e6eef8; 
	padding: 10px;
}

.row input[type="text"] { 
	padding: 6px 8px; 
	border: 1px solid var(--border); 
	border-radius: 6px;
}

.row input[type="file"] { 
	padding: 6px;
}

/* ===== BACKEND STATUS ===== */
#backend-status { 
	font-weight: 600;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 720px) {
	.container { 
		padding: 12px;
	}
	
	h1 { 
		font-size: 20px;
	}
	
	.section-title { 
		font-size: 16px;
	}
	
	.navbar {
		flex-direction: column;
		gap: 10px;
		padding: 12px;
	}
	
	.navbar-nav {
		gap: 10px;
	}
	
	.auth-form {
		padding: 20px;
	}
}

/* ===== FOLDERS GRID ===== */
.folders-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
}

.folder-card {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 20px;
	text-align: center;
	transition: box-shadow 0.2s, transform 0.2s;
}

.folder-card:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	transform: translateY(-2px);
}

.folder-icon {
	font-size: 48px;
	margin-bottom: 12px;
}

.folder-name {
	font-weight: 600;
	font-size: 16px;
	margin-bottom: 8px;
	word-break: break-word;
}

.folder-info {
	display: flex;
	justify-content: center;
	gap: 12px;
	align-items: center;
	color: var(--muted);
	font-size: 14px;
	margin-bottom: 16px;
}

.folder-actions {
	display: flex;
	gap: 8px;
	justify-content: center;
	flex-wrap: wrap;
}

/* ===== BATCH ANNOTATION PAGE ===== */
.batch-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 20px;
}

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

.progress-bar {
	width: 200px;
	height: 8px;
	background: var(--muted-bg);
	border-radius: 4px;
	overflow: hidden;
}

.progress-fill {
	height: 100%;
	background: var(--accent);
	transition: width 0.3s ease;
}

.progress-text {
	font-weight: 600;
	color: var(--text);
}

.batch-navigation {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--border);
}

.nav-buttons {
	display: flex;
	gap: 12px;
}

.btn-nav {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 18px;
	font-size: 14px;
}

.btn-nav:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.current-file {
	text-align: center;
}

.current-file-name {
	font-weight: 600;
	font-size: 16px;
	margin-bottom: 4px;
}

.current-file-progress {
	color: var(--muted);
	font-size: 14px;
}

/* ===== BUTTONS ===== */
.btn {
	display: inline-block;
	padding: 10px 18px;
	border-radius: 6px;
	border: none;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	text-align: center;
	transition: background-color 0.2s, transform 0.1s;
}

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

.btn-primary {
	background-color: var(--accent);
	color: white;
}

.btn-primary:hover {
	background-color: var(--accent-hover);
}

.btn-success {
	background-color: var(--success);
	color: white;
}

.btn-success:hover {
	background-color: #218838;
}

.btn-danger {
	background-color: var(--danger);
	color: white;
}

.btn-danger:hover {
	background-color: var(--danger-hover);
}

.btn-secondary {
	background-color: var(--muted-bg);
	color: var(--text);
	border: 1px solid var(--border);
}

.btn-secondary:hover {
	background-color: #e5e7eb;
}

.btn-sm {
	padding: 6px 12px;
	font-size: 13px;
}

.btn-lg {
	padding: 14px 28px;
	font-size: 16px;
}

/* ===== STATUS BADGES ===== */
.status-badge {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 600;
}

.status-pending {
	background-color: #fff3cd;
	color: #856404;
}

.status-done {
	background-color: #d4edda;
	color: #155724;
}

/* ===== SAVE INDICATOR ===== */
.save-indicator {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--muted);
}

.save-indicator.saving {
	color: var(--accent);
}

.save-indicator.saved {
	color: var(--success);
}

.save-indicator.error {
	color: var(--danger);
}