@font-face {
  font-family: "El Messiri";
  src: url("/fonts/el-messiri-arabic-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}

@font-face {
  font-family: "El Messiri";
  src: url("/fonts/el-messiri-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/fonts/ibm-plex-sans-arabic-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/fonts/ibm-plex-sans-arabic-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F;
}

:root {
  color-scheme: dark;
  --page: #0b0b0b;
  --panel: #171717;
  --panel-hover: #202020;
  --line: #2a2615;
  --line-gold: #4a4018;
  --gold: #ffd21e;
  --on-gold: #111111;
  --text: #ffffff;
  --soft: #d8d3c2;
  --muted: #a9a597;
  --done: #5fe39a;
  --done-bg: #123d26;
  --todo-bg: #232323;
  --todo-line: #4d4d4d;
  --todo-text: #e8e4d6;
  --danger: #ff9a9a;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

.page { width: min(100%, 640px); margin: 0 auto; padding: 24px 16px 40px; }

h1 {
  margin: 0;
  color: var(--gold);
  font-family: "El Messiri", serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.3;
}

.logo {
  display: block;
  width: 72px;
  height: 72px;
  margin: 0 auto 10px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--page), 0 0 0 3px var(--gold);
}

.note { margin: 3px 0 0; color: var(--soft); font-size: 13px; }

.login {
  display: grid;
  gap: 10px;
  margin-top: 10vh;
  padding: 28px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #101010;
  text-align: center;
}

.login h1 { margin-bottom: 10px; }
.login label { color: var(--soft); font-size: 14px; text-align: right; }

input, select, textarea {
  width: 100%;
  min-height: 46px;
  padding: 9px 12px;
  border: 1px solid var(--line-gold);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
}

textarea { min-height: 104px; resize: vertical; }
textarea::placeholder { color: var(--muted); }

:is(input, select, textarea, button):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

button { font: inherit; color: inherit; cursor: pointer; }

.primary {
  min-height: 46px;
  padding: 9px 18px;
  border: 0;
  border-radius: 10px;
  background: var(--gold);
  color: var(--on-gold);
  font-weight: 500;
}

.primary:hover { background: #ffdc4d; }
.primary:disabled { opacity: 0.65; cursor: default; }

.link {
  min-height: 46px;
  padding: 9px 14px;
  border: 1px solid var(--line-gold);
  border-radius: 10px;
  background: transparent;
  color: var(--soft);
}

.link:hover { background: var(--panel); color: var(--text); }

.error { margin: 0; color: var(--danger); font-size: 14px; }
.error:empty { display: none; }
.page-error { margin-top: 12px; }

.head {
  padding-bottom: 18px;
  border-bottom: 1px solid #3a3213;
  text-align: center;
}

.head-tools {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}

.head-tools select { width: 190px; }

.progress {
  margin: 16px 0 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}

.progress-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  color: var(--soft);
  font-size: 13px;
}

.track { height: 8px; overflow: hidden; border-radius: 8px; background: #2b2b2b; }
.fill { width: 0; height: 100%; background: var(--gold); transition: width 300ms ease-out; }

.metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.metric {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  text-align: center;
}

.metric strong {
  display: block;
  font-family: "El Messiri", serif;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.25;
}

.metric span { color: var(--soft); font-size: 12px; }
.metric-done strong { color: var(--done); }
.metric-doing strong { color: var(--gold); }

.group {
  margin: 18px 0 8px;
  color: var(--gold);
  font-family: "El Messiri", serif;
  font-size: 17px;
  font-weight: 600;
}

.task {
  margin-bottom: 6px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

.row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 11px 12px;
  border: 0;
  background: transparent;
  text-align: right;
}

button.row:hover { background: var(--panel-hover); }

.task-title { display: block; color: var(--text); font-size: 15px; }

.badge {
  flex: none;
  padding: 3px 10px;
  border: 1px solid var(--todo-line);
  border-radius: 8px;
  background: var(--todo-bg);
  color: var(--todo-text);
  font-size: 12px;
  line-height: 1.6;
}

.badge.doing { border-color: var(--gold); background: var(--gold); color: var(--on-gold); font-weight: 500; }
.badge.done { border-color: #1f6b43; background: var(--done-bg); color: var(--done); font-weight: 500; }

.history { display: block; }
.history-line {
  display: block;
  margin-top: 3px;
  color: var(--soft);
  font-size: 13px;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.add-task { width: 100%; margin-top: 12px; }

.add-form-card {
  margin-top: 10px;
  overflow: hidden;
  border: 1px solid var(--line-gold);
  border-radius: 12px;
}

.add-form-card .update-form { border-top: 0; }

.update-form {
  display: grid;
  gap: 10px;
  padding: 14px 12px;
  border-top: 1px solid var(--line-gold);
  background: #101010;
}

.update-form h2 {
  margin: 0;
  color: var(--gold);
  font-family: "El Messiri", serif;
  font-size: 17px;
  font-weight: 600;
}

.update-form label { display: grid; gap: 4px; color: var(--soft); font-size: 13px; }
.update-form input, .update-form select, .update-form textarea { font-size: 16px; }
.form-actions { display: flex; gap: 8px; }
.form-actions .primary { flex: 1; }

@media (prefers-reduced-motion: reduce) {
  .fill { transition: none; }
}