:root {
  color-scheme: dark;
  --bg: #12141c;
  --card: #1b1e2b;
  --card-alt: #232739;
  --text: #f1f2f6;
  --muted: #9aa0ac;
  --accent: #17a398;
  --accent-soft: #dff3ef;
  --warn: #f0a63d;
  --border: rgba(255, 255, 255, 0.08);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding: 28px 24px;
}

.wrap { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }

h1 { font-size: 1.4rem; margin: 0; letter-spacing: -0.01em; }
.sub { color: var(--muted); font-size: 0.85rem; margin-top: 4px; }

.header-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.header-actions { display: flex; align-items: center; gap: 14px; }
.logout-link { color: var(--muted); font-size: 0.82rem; }
.logout-link:hover { color: var(--text); }

.refresh-btn {
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.refresh-btn:hover { background: var(--accent); color: #0a1512; }
.refresh-btn:disabled { opacity: 0.5; cursor: default; background: transparent; color: var(--accent); }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px;
}

.value { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; }
.label { color: var(--muted); font-size: 0.85rem; margin-bottom: 16px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 600px) { .grid-2 { grid-template-columns: 1fr; } }

.tile { border-top: 3px solid transparent; }
.tile.realized { border-top-color: var(--accent); }
.tile.realized .value { color: var(--accent); }
.tile.pending { border-top-color: var(--warn); }
.tile.pending .value { color: var(--warn); }

.task-list-scroll { max-height: 620px; overflow-y: auto; margin: 0 -8px; }
.task-list-scroll::-webkit-scrollbar { width: 8px; }
.task-list-scroll::-webkit-scrollbar-thumb { background: var(--card-alt); border-radius: 8px; }
.task-list-scroll { scrollbar-color: var(--card-alt) transparent; scrollbar-width: thin; }

table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td { text-align: left; padding: 6px 4px; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 500; }

.task-list { table-layout: fixed; }
.task-list td { border-bottom: 1px solid var(--border); vertical-align: top; padding: 10px 8px; }
.task-list tr:hover td { background: var(--card-alt); }
.task-list tr:last-child td { border-bottom: none; }
.task-list .task-name { display: block; color: var(--text); font-weight: 500; overflow-wrap: break-word; }
.task-list .task-status {
  display: inline-block;
  margin-top: 4px;
  color: var(--accent-soft);
  background: rgba(23, 163, 152, 0.16);
  border-radius: 5px;
  padding: 1px 7px;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.task-list .task-hours { text-align: right; white-space: nowrap; font-weight: 700; width: 70px; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.empty-note { color: var(--muted); font-size: 0.85rem; }