@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;600&display=swap');

:root {
	--radius: 12px;
}

/* Thèmes via variables CSS */
:root {
	--bg: #0c0c15;
	--panel: rgba(18, 18, 31, 0.8);
	--border: rgba(255, 255, 255, 0.08);
	--text: #f7f8fb;
	--muted: #9aa0b3;
	--accent: #7cf0c4;
	--accent-2: #6ca6ff;
	--danger: #ff6b6b;
	--shadow: 0 20px 80px rgba(0, 0, 0, 0.35);
	--radius: 18px;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	min-height: 100vh;
	background: var(--bg);
	color: var(--text);
	font-family: 'Manrope', system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
	position: relative;
	overflow-x: hidden;
}

.background {
	position: fixed;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}

.orb {
	position: absolute;
	width: 38vw;
	aspect-ratio: 1;
	filter: blur(70px);
	opacity: 0.45;
}

.orb-left {
	background: radial-gradient(circle at 30% 30%, #7cf0c4, transparent 60%);
	top: -8vh;
	left: -10vw;
}

.orb-right {
	background: radial-gradient(circle at 70% 70%, #6ca6ff, transparent 60%);
	bottom: -12vh;
	right: -14vw;
}

.grid {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
	background-size: 140px 140px;
	mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.8), transparent 70%);
}

.app-shell {
	position: relative;
	z-index: 1;
	max-width: 1100px;
	margin: 0 auto;
	padding: 40px 24px 80px;
}

.topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 24px;
}

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

.brand h1 {
	margin: 0;
	font-family: 'Space Grotesk', system-ui, sans-serif;
	letter-spacing: -0.5px;
	font-size: 26px;
}

.dot {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--accent), var(--accent-2));
	box-shadow: 0 0 18px rgba(124, 240, 196, 0.8);
}

.eyebrow {
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 12px;
	color: var(--muted);
}

.meta p {
	margin: 0;
	color: var(--muted);
	font-weight: 600;
}
.theme-switch { display: flex; align-items: center; gap: 8px; }
.theme-switch select { padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--text); }

/* Thèmes via variables CSS */
[data-theme="light"] {
	--bg: #ffffff;
	--text: #0f172a;
	--muted: #64748b;
	--panel: #ffffff;
	--border: #e2e8f0;
	--accent: #2563eb;
	--danger: #ef4444;
}

[data-theme="dark"] {
	--bg: #0b1220;
	--text: #e5e7eb;
	--muted: #94a3b8;
	--panel: #0f172a;
	--border: #1f2937;
	--accent: #60a5fa;
	--danger: #f87171;
}

[data-theme="sepia"] {
	--bg: #f9f5e7;
	--text: #3f3a2f;
	--muted: #7a6f5a;
	--panel: #fffaf0;
	--border: #e6dcc5;
	--accent: #b7791f;
	--danger: #c2410c;
}

/* Solarized (light) */
[data-theme="solarized"] {
	--bg: #fdf6e3;
	--text: #657b83;
	--muted: #93a1a1;
	--panel: #fffef5;
	--border: #eee8d5;
	--accent: #268bd2;
	--danger: #dc322f;
}

/* Nord (dark-ish) */
[data-theme="nord"] {
	--bg: #2e3440;
	--text: #eceff4;
	--muted: #d8dee9;
	--panel: #3b4252;
	--border: #434c5e;
	--accent: #88c0d0;
	--danger: #bf616a;
}

/* Forest */
[data-theme="forest"] {
	--bg: #0f1f17;
	--text: #e6f4ea;
	--muted: #a7c4b5;
	--panel: #15281f;
	--border: #1c3b2c;
	--accent: #34d399;
	--danger: #f87171;
}

/* Plum */
[data-theme="plum"] {
	--bg: #1f1026;
	--text: #f5e9ff;
	--muted: #d0b8ff;
	--panel: #2a1433;
	--border: #3a1d47;
	--accent: #a78bfa;
	--danger: #fb7185;
}

/* High contrast */
[data-theme="high-contrast"] {
	--bg: #000000;
	--text: #ffffff;
	--muted: #d1d5db;
	--panel: #000000;
	--border: #ffffff;
	--accent: #00ff7f;
	--danger: #ff3b3b;
}

/* Espace (deep space) */
[data-theme="espace"] {
	--bg: #0b0e1a;
	--text: #e6edf7;
	--muted: #9aa6b2;
	--panel: #0f1424;
	--border: #1b2238;
	--accent: #7cf0c4; /* vert néon doux pour repères */
	--danger: #ff6b6b;
}

/* Soleil (chaud et lumineux) */
[data-theme="soleil"] {
	--bg: #fff7ed;
	--text: #3f2d20;
	--muted: #8a6f5a;
	--panel: #fff2db;
	--border: #fde6bf;
	--accent: #f59e0b; /* orange solaire */
	--danger: #c2410c;
}

/* Fluo (accent très vif) */
[data-theme="fluo"] {
	--bg: #0a0a0a;
	--text: #f5f5f5;
	--muted: #cfcfcf;
	--panel: #121212;
	--border: #1f1f1f;
	--accent: #39ff14; /* vert fluo */
	--danger: #ff2079; /* magenta fluo */
}

.content {
	display: grid;
	gap: 20px;
}

.panel {
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 20px 20px 18px;
	box-shadow: var(--shadow);
	backdrop-filter: blur(12px);
}

.panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 16px;
}

.panel-header h2 {
	margin: 4px 0 0 0;
}

.stats {
	display: flex;
	gap: 10px;
	color: var(--muted);
	font-weight: 600;
}

.field-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px;
}

.field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	color: var(--muted);
	font-size: 14px;
}

.field input,
.field select,
.field textarea {
	width: 100%;
	padding: 12px 14px;
	border-radius: 12px;
	border: 1px solid var(--border);
	background: rgba(255, 255, 255, 0.03);
	color: var(--text);
	font-size: 15px;
	transition: border-color 120ms ease, transform 120ms ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
	outline: none;
	border-color: var(--accent);
	transform: translateY(-1px);
	box-shadow: 0 8px 28px rgba(124, 240, 196, 0.15);
}

.primary,
.ghost {
	cursor: pointer;
	border-radius: 12px;
	border: 1px solid transparent;
	font-weight: 700;
	letter-spacing: 0.2px;
	transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.primary {
	background: linear-gradient(135deg, var(--accent), var(--accent-2));
	color: #0b0d11;
	padding: 12px 16px;
	border: none;
	box-shadow: 0 10px 40px rgba(108, 166, 255, 0.25);
	width: fit-content;
	margin-top: 12px;
}

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

.ghost {
	background: rgba(255, 255, 255, 0.04);
	color: var(--text);
	padding: 10px 12px;
	border-color: var(--border);
}

.ghost:hover {
	border-color: rgba(255, 255, 255, 0.16);
}

.ghost.danger {
	color: var(--danger);
	border-color: rgba(255, 107, 107, 0.25);
}

.controls {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: flex-end;
	margin-bottom: 14px;
}

.control-group {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 10px;
	min-width: 340px;
	flex: 1;
}

.search {
	min-width: 240px;
	flex: 1;
}

.todo-list {
	display: grid;
	gap: 10px;
}

.todo {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 14px;
	padding: 14px;
	border-radius: 14px;
	border: 1px solid var(--border);
	background: rgba(255, 255, 255, 0.02);
	transition: border-color 120ms ease, transform 120ms ease, background 120ms ease;
}

.todo:hover {
	border-color: rgba(255, 255, 255, 0.18);
	transform: translateY(-1px);
	background: rgba(255, 255, 255, 0.04);
}

.checkbox {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 10px;
	border: 1px solid var(--border);
	background: rgba(255, 255, 255, 0.03);
	cursor: pointer;
	transition: border-color 120ms ease, transform 120ms ease;
}

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

.checkbox input {
	appearance: none;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
	position: relative;
}

.checkmark {
	position: absolute;
	width: 16px;
	height: 16px;
	border-radius: 6px;
	background: transparent;
	transition: background 140ms ease;
}

.checkbox input:checked + .checkmark {
	background: linear-gradient(135deg, var(--accent), var(--accent-2));
	box-shadow: 0 6px 16px rgba(124, 240, 196, 0.3);
}

.select-box .checkmark,
.select-all .checkmark {
	background: rgba(255, 255, 255, 0.04);
}

.select-all {
	width: 26px;
	height: 26px;
}

.todo-body {
	display: grid;
	gap: 6px;
}

.todo-top {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	align-items: flex-start;
}

.title-line {
	display: flex;
	align-items: center;
	gap: 10px;
}

.title {
	margin: 0;
	font-weight: 700;
	font-size: 17px;
}

.pill {
	padding: 6px 10px;
	border-radius: 999px;
	font-size: 12px;
	letter-spacing: 0.2px;
	border: 1px solid var(--border);
	background: rgba(255, 255, 255, 0.05);
}

.priority[data-level="urgent"] { color: #ff6b6b; border-color: rgba(255, 107, 107, 0.45); font-weight: 700; }
.priority[data-level="high"] { color: #ffd6a5; border-color: rgba(255, 214, 165, 0.35); }
.priority[data-level="medium"] { color: #c3e5ff; border-color: rgba(195, 229, 255, 0.3); }
.priority[data-level="low"] { color: #c8f7dc; border-color: rgba(200, 247, 220, 0.3); }
.priority[data-level="none"] { color: #9aa0b3; border-color: rgba(154, 160, 179, 0.2); }

.meta-line {
	display: flex;
	gap: 12px;
	color: var(--muted);
	font-size: 13px;
}

.details {
	margin: 0;
	color: #d7dbe7;
	line-height: 1.4;
}

.actions {
	display: flex;
	gap: 8px;
}

.todo.done {
	opacity: 0.65;
	text-decoration: line-through;
}

.empty {
	text-align: center;
	color: var(--muted);
	padding: 16px;
	border: 1px dashed var(--border);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.02);
}

.bulk-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 12px;
	border-radius: 12px;
	border: 1px solid var(--border);
	background: rgba(255, 255, 255, 0.02);
	margin-bottom: 12px;
}

.bulk-left {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--muted);
	font-weight: 600;
}

.bulk-label {
	color: var(--muted);
}

.bulk-right {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--muted);
	font-weight: 600;
}

.reminder-settings {
	margin-top: 16px;
	padding: 14px;
	border-radius: 12px;
	border: 1px solid var(--border);
	background: rgba(255, 255, 255, 0.02);
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.reminder-option {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--text);
	cursor: pointer;
}

.reminder-option input[type="checkbox"] {
	width: 18px;
	height: 18px;
	cursor: pointer;
}

.reminder-threshold {
	max-width: 280px;
}

.reminder {
	background: rgba(255, 193, 7, 0.15);
	border-color: rgba(255, 193, 7, 0.4);
	color: #ffc107;
	font-weight: 700;
	animation: pulse 2s ease-in-out infinite;
}

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

@media (max-width: 720px) {
	.topbar { flex-direction: column; align-items: flex-start; }
	.controls { flex-direction: column; align-items: stretch; }
	.control-group { min-width: 100%; }
	.todo-top { flex-direction: column; align-items: flex-start; }
}