@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;600&display=swap');

.ett-app {
  --navy: #052272;
  --navy-soft: rgba(5, 34, 114, 0.07);
  --navy-soft2: rgba(5, 34, 114, 0.12);
  --gold: #f1be18;
  --gold-soft: rgba(241, 190, 24, 0.16);
  --bg: #f5f6fb;
  --card: #ffffff;
  --border: #e7e9f2;
  --text: #16213f;
  --muted: #6c7592;
  --good: #1f9d63;
  --good-soft: rgba(31, 157, 99, 0.12);
  --warn: #e0563f;
  --warn-soft: rgba(224, 86, 63, 0.12);
  --teal: #0e8f9e;

  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  border-radius: 12px;
  padding: clamp(12px, 2vw, 28px);
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}
.ett-app * { box-sizing: border-box; }

/* Dark theme — toggled from Settings → Appearance, saved per-browser */
.ett-app.ett-dark {
  --navy: #4361ee;
  --navy-soft: rgba(67, 97, 238, 0.18);
  --navy-soft2: rgba(67, 97, 238, 0.28);
  --gold: #f1be18;
  --gold-soft: rgba(241, 190, 24, 0.18);
  --bg: #0d1220;
  --card: #161c2c;
  --border: #262f47;
  --text: #e8ecf4;
  --muted: #8b96b3;
  --good: #34d399;
  --good-soft: rgba(52, 211, 153, 0.16);
  --warn: #f87171;
  --warn-soft: rgba(248, 113, 113, 0.16);
  --teal: #22b8c8;
}
.ett-dark .ett-summary { background: linear-gradient(135deg, #161c2c 0%, #131829 100%); box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 10px 28px rgba(0,0,0,0.28); }
.ett-dark .ett-col,
.ett-dark .ett-report-card,
.ett-dark .ett-panel,
.ett-dark .ett-status-row,
.ett-dark .ett-range-controls { box-shadow: 0 1px 4px rgba(0,0,0,0.25); }
.ett-dark .ett-col:hover:not(.drag-over) { box-shadow: 0 10px 28px rgba(0,0,0,0.4); border-color: #33405f; }
.ett-dark .ett-card:not(.done):hover { box-shadow: 0 6px 18px rgba(0,0,0,0.35); border-color: #33405f; }
.ett-dark .ett-card { background: #1b2338; }
.ett-dark .ett-addform, .ett-dark .ett-completed-list .ett-card { background: #1b2338; }
.ett-dark .ett-modal { box-shadow: 0 20px 60px rgba(0,0,0,0.55); }
.ett-dark .ett-modal input[type="text"], .ett-dark .ett-modal input[type="number"],
.ett-dark .ett-modal input[type="date"], .ett-dark .ett-modal input[type="time"],
.ett-dark .ett-modal select, .ett-dark .ett-modal textarea { background: #1b2338; color: var(--text); border-color: var(--border); }
.ett-dark .ett-addform input, .ett-dark .ett-range-field input,
.ett-dark .ett-filter-field select { background: #1b2338; color: var(--text); border-color: var(--border); }
.ett-dark .ett-download-btn-ghost { color: var(--navy); border-color: var(--navy); }
.ett-dark .ett-drag-ghost { box-shadow: 0 18px 40px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.4); }
.ett-dark .ett-lock-note { background: #1b2338; }
.ett-dark .ett-loading { color: var(--muted); }
.ett-dark ::placeholder { color: #5c6785; }

.ett-h { font-family: 'Poppins', sans-serif; font-weight: 700; letter-spacing: -0.01em; }
.ett-mono { font-family: 'JetBrains Mono', monospace; }
.ett-loading { padding: 40px; text-align: center; color: var(--muted); }

/* Header */
.ett-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.ett-title { font-size: 21px; margin: 0; color: var(--navy); }
.ett-sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
.ett-header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.ett-nav { display: flex; gap: 4px; background: var(--card); padding: 4px; border-radius: 12px; border: 1px solid var(--border); }
.ett-nav button {
  all: unset; cursor: pointer; padding: 8px 14px; border-radius: 9px; font-size: 13px; font-weight: 600;
  color: var(--muted); display: flex; align-items: center; gap: 6px; transition: all .15s ease;
}
.ett-nav button.active { background: var(--navy); color: #fff; }
.ett-nav button:hover:not(.active) { color: var(--navy); }

.ett-lang { all: unset; cursor: pointer; padding: 8px 12px; border-radius: 9px; font-size: 12.5px; font-weight: 700;
  border: 1px solid var(--border); background: var(--card); color: var(--navy); }
.ett-lang:hover { background: var(--navy-soft); }

.ett-lock-note {
  display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted);
  background: var(--card); border: 1px dashed var(--border); border-radius: 10px; padding: 8px 12px; margin-bottom: 18px;
}

/* Summary */
.ett-summary {
  display: flex; align-items: center; gap: 26px; background: linear-gradient(135deg, #ffffff 0%, #f4f6fd 100%);
  border: 1px solid var(--border); border-radius: 18px; padding: 20px 26px; margin-bottom: 22px; flex-wrap: wrap;
  box-shadow: 0 2px 10px rgba(5,34,114,0.04);
}
.ett-stats { display: flex; gap: 24px; flex-wrap: wrap; }
.ett-stat { display: flex; align-items: center; gap: 10px; }
.ett-stat-icon { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 15px; }
.ett-stat-num { font-size: 19px; font-weight: 700; }
.ett-stat-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 700; }

/* Board — a fluid grid so columns re-flow and fill the full width on any screen,
   instead of a fixed-width row that only scrolls sideways. */
.ett-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; align-items: start; }
.ett-col { background: var(--card); border: 1px solid var(--border); border-radius: 16px; width: 100%; padding: 13px; display: flex; flex-direction: column; box-shadow: 0 1px 4px rgba(5,34,114,0.03); }
.ett-col-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 8px; }
.ett-col-title { font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--navy); }
.ett-col-count { font-size: 10.5px; color: var(--muted); margin-top: 1px; }
.ett-col-del { all: unset; cursor: pointer; color: var(--muted); font-size: 12px; padding: 2px 4px; }
.ett-col-del:hover { color: var(--warn); }

.ett-card { background: #fbfbfe; border: 1px solid var(--border); border-radius: 11px; padding: 9px 11px; margin-bottom: 7px; position: relative; }
.ett-card.done { opacity: 0.55; }
.ett-card-row { display: flex; align-items: flex-start; gap: 9px; }
.ett-check { width: 17px; height: 17px; border-radius: 6px; border: 1.5px solid #c3c9dc; flex-shrink: 0; margin-top: 1px; cursor: pointer; display: flex; align-items: center; justify-content: center; background: #fff; transition: all .15s ease; padding: 0; }
.ett-check.checked { background: var(--good); border-color: var(--good); }
.ett-check.locked { cursor: not-allowed; opacity: 0.55; }
.ett-card-title { font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.ett-card-title.done { text-decoration: line-through; color: var(--muted); }
.ett-card-note { font-size: 11px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.ett-card-meta { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 10px; color: var(--muted); }
.ett-del { position: absolute; top: 7px; right: 7px; opacity: 0; transition: opacity .15s ease; background: none; border: none; color: var(--warn); cursor: pointer; padding: 2px; }
.ett-card:hover .ett-del { opacity: 0.85; }

.ett-addbtn { all: unset; cursor: pointer; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); padding: 7px 6px; border-radius: 8px; font-weight: 600; }
.ett-addbtn:hover { color: var(--navy); background: var(--navy-soft); }

.ett-addform { background: #fbfbfe; border: 1px solid var(--gold); border-radius: 11px; padding: 9px; margin-bottom: 7px; }
.ett-addform input { width: 100%; background: transparent; border: none; outline: none; color: var(--text); font-size: 12.5px; font-family: 'Inter', sans-serif; margin-bottom: 6px; }
.ett-addform input::placeholder { color: var(--muted); }
.ett-addform-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; }
.ett-btn { all: unset; cursor: pointer; font-size: 11.5px; padding: 5px 12px; border-radius: 7px; font-weight: 700; }
.ett-btn.primary { background: var(--gold); color: #1a1400; }
.ett-btn.navy { background: var(--navy); color: #fff; }
.ett-btn.ghost { color: var(--muted); }

.ett-col-add { border: 1.5px dashed var(--border); background: transparent; box-shadow: none; align-items: center; justify-content: center; display: flex; min-height: 60px; }
.ett-col-add button { all: unset; cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--navy); display: flex; align-items: center; gap: 6px; }

.ett-welcome-empty { text-align: center; padding: 40px 20px; color: var(--muted); }
.ett-welcome-empty .ett-welcome-icon { font-size: 32px; margin-bottom: 10px; }
.ett-welcome-empty h3 { font-family: 'Poppins', sans-serif; color: var(--navy); font-size: 16px; margin: 0 0 6px; }
.ett-welcome-empty p { font-size: 12.5px; max-width: 360px; margin: 0 auto; line-height: 1.5; }

/* Reports */
.ett-report-tabs { display: flex; gap: 6px; margin-bottom: 18px; align-items: center; flex-wrap: wrap; }
.ett-report-tabs button { all: unset; cursor: pointer; padding: 7px 15px; border-radius: 9px; font-size: 12.5px; font-weight: 700; color: var(--muted); background: var(--card); border: 1px solid var(--border); }
.ett-report-tabs button.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.ett-range-label { color: var(--muted); font-size: 12.5px; }

.ett-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 13px; margin-bottom: 22px; }
.ett-report-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 17px; box-shadow: 0 1px 4px rgba(5,34,114,0.03); }
.ett-report-card-label { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; margin-bottom: 7px; }
.ett-report-card-val { font-size: 24px; font-weight: 700; color: var(--navy); }

.ett-panel { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 20px; margin-bottom: 18px; box-shadow: 0 1px 4px rgba(5,34,114,0.03); }
.ett-panel-title { font-size: 13.5px; font-weight: 700; margin-bottom: 14px; color: var(--navy); display: flex; align-items: center; gap: 6px; }

.ett-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ett-table th { text-align: left; color: var(--muted); font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.ett-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); }
.ett-table tr:last-child td { border-bottom: none; }

.ett-svg-chart { width: 100%; height: auto; display: block; }

@media (max-width: 640px) {
  .ett-app { padding: 16px; border-radius: 12px; }
  .ett-summary { flex-direction: column; align-items: flex-start; }
}

/* Three-ring summary row (Today / Week / Month) */
.ett-ring-row { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-start; }
.ett-ring-block { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ett-ring-caption { font-size: 10px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.ett-mini-spark { width: 132px; }

/* Completed collapse per column */
.ett-completed-toggle {
  all: unset; cursor: pointer; display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700;
  color: var(--muted); padding: 7px 6px; border-top: 1px solid var(--border); margin-top: 4px; width: 100%;
}
.ett-completed-toggle:hover { color: var(--navy); }
.ett-completed-toggle .ett-caret { transition: transform .15s ease; display: inline-block; }
.ett-completed-toggle.open .ett-caret { transform: rotate(90deg); }
.ett-completed-list { margin-top: 4px; }

/* Drag and drop columns — see the consolidated pointer-events drag rules further below */
.ett-col.drag-over { outline: 2px dashed var(--gold); outline-offset: 2px; }

/* Task time / repeat chip button */
.ett-time-chip {
  all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font-size: 10px; color: var(--muted);
  margin-top: 6px; padding: 2px 7px; border-radius: 20px; background: var(--navy-soft);
}
.ett-time-chip:hover { background: var(--navy-soft2); color: var(--navy); }
.ett-time-chip.empty { background: transparent; border: 1px dashed var(--border); color: var(--muted); }

/* Popover / modal for time + repeat */
.ett-modal-backdrop {
  position: fixed; inset: 0; background: rgba(10, 16, 40, 0.45); display: flex; align-items: center; justify-content: center;
  z-index: 9999; padding: 16px;
}
.ett-modal { background: var(--card); border-radius: 16px; padding: 20px; width: 100%; max-width: 360px; box-shadow: 0 12px 40px rgba(5,34,114,0.25); }
.ett-modal h3 { margin: 0 0 14px; font-size: 15px; color: var(--navy); font-family: 'Poppins', sans-serif; }
.ett-field-label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin: 12px 0 6px; }
.ett-modal input[type="text"], .ett-modal input[type="number"], .ett-modal select {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; font-size: 13px; font-family: 'Inter', sans-serif;
  background: #fbfbfe; color: var(--text); outline: none;
}
.ett-modal select { cursor: pointer; }
.ett-repeat-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.ett-repeat-row input[type="number"] { width: 64px; }
.ett-weekday-chips { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.ett-weekday-chip {
  all: unset; cursor: pointer; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; border: 1.5px solid var(--border); color: var(--muted);
}
.ett-weekday-chip.active { background: var(--navy); border-color: var(--navy); color: #fff; }
.ett-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.ett-monthly-note { font-size: 11.5px; color: var(--muted); margin-top: 8px; background: var(--bg); padding: 8px 10px; border-radius: 9px; }

/* Priority: colored left border on the card + a small dot next to the title */
.ett-card.priority-high { border-left: 4px solid #e0563f; }
.ett-card.priority-medium { border-left: 4px solid #f0a202; }
.ett-card.priority-low { border-left: 4px solid #0e8f9e; }
.ett-priority-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }

.ett-priority-chips { display: flex; gap: 6px; margin-top: 8px; }
.ett-priority-chip {
  all: unset; cursor: pointer; padding: 5px 12px; border-radius: 8px; font-size: 11px; font-weight: 700;
  border: 1.5px solid var(--border); color: var(--muted);
}
.ett-priority-chip.active { background: var(--pc); border-color: var(--pc); color: #fff; }

/* Section-count guidance chips in the summary bar */
.ett-guide-chip { display: flex; align-items: center; gap: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 8px 14px; }
.ett-guide-chip .num { font-size: 15px; font-weight: 700; color: var(--navy); }
.ett-guide-chip .lbl { font-size: 10px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }

/* Custom date-range controls in Reports */
.ett-range-controls { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 14px; }
.ett-range-field { display: flex; flex-direction: column; gap: 4px; }
.ett-range-field label { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.ett-range-field input[type="date"] { padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; font-size: 12.5px; font-family: 'Inter', sans-serif; }
.ett-range-presets { display: flex; gap: 6px; flex-wrap: wrap; }
.ett-range-presets button { all: unset; cursor: pointer; font-size: 11.5px; font-weight: 700; padding: 6px 11px; border-radius: 8px; border: 1px solid var(--border); color: var(--muted); }
.ett-range-presets button:hover { color: var(--navy); background: var(--navy-soft); }
.ett-download-btn {
  all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700;
  color: #fff; background: var(--navy); padding: 9px 16px; border-radius: 10px; margin-left: auto;
}
.ett-download-btn:hover { background: #0a2f8f; }
.ett-download-btn-ghost { background: transparent; color: var(--navy); border: 1.5px solid var(--navy); margin-left: 0; box-shadow: none !important; }
.ett-download-btn-ghost:hover { background: var(--navy-soft); }

.ett-check-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--text); margin: 10px 0; cursor: pointer; }
.ett-check-row input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--navy); cursor: pointer; }

.ett-user-badge {
  font-size: 12px; font-weight: 700; color: var(--navy); background: var(--navy-soft);
  padding: 8px 12px; border-radius: 9px; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
}

/* ---------------- Auth screens (sign up / log in / verify) ---------------- */
.ett-auth-wrap {
  min-height: 420px; display: flex; align-items: center; justify-content: center; padding: 30px 14px;
  font-family: 'Inter', sans-serif;
}
.ett-auth-card {
  position: relative; width: 100%; max-width: 400px; background: #ffffff; border: 1px solid var(--border, #e7e9f2);
  border-radius: 18px; padding: 32px 28px 26px; box-shadow: 0 20px 50px rgba(5,34,114,0.12), 0 2px 8px rgba(5,34,114,0.06);
  animation: ettAuthIn .35s ease;
}
@keyframes ettAuthIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.ett-auth-lang { position: absolute; top: 18px; right: 18px; padding: 6px 11px; font-size: 11.5px; }
.ett-auth-brand { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 19px; color: #052272; text-align: center; }
.ett-auth-tagline { text-align: center; font-size: 12px; color: #6c7592; margin-top: 4px; margin-bottom: 22px; }

.ett-auth-tabs { display: flex; background: #f5f6fb; border-radius: 11px; padding: 4px; margin-bottom: 20px; }
.ett-auth-tabs button { all: unset; flex: 1; text-align: center; cursor: pointer; padding: 9px 0; border-radius: 8px; font-size: 12.5px; font-weight: 700; color: #6c7592; }
.ett-auth-tabs button.active { background: #052272; color: #fff; }

.ett-auth-form { display: flex; flex-direction: column; }
.ett-auth-form label { font-size: 10.5px; font-weight: 700; color: #6c7592; text-transform: uppercase; letter-spacing: .04em; margin: 12px 0 6px; }
.ett-auth-form label:first-of-type { margin-top: 0; }
.ett-auth-form input {
  padding: 10px 12px; border: 1.5px solid #e7e9f2; border-radius: 10px; font-size: 13.5px; font-family: 'Inter', sans-serif;
  background: #fbfbfe; color: #16213f; outline: none; transition: border-color .15s ease;
}
.ett-auth-form input:focus { border-color: #052272; }
.ett-auth-submit { width: 100%; margin-top: 20px; text-align: center; padding: 11px 0; font-size: 13.5px; border-radius: 10px; }
.ett-auth-submit:disabled { opacity: .6; cursor: default; }

.ett-auth-error {
  background: #fdecea; color: #b3261e; border: 1px solid #f6cbc7; border-radius: 9px; padding: 9px 12px;
  font-size: 12px; font-weight: 600; margin-bottom: 4px;
}
.ett-auth-switch { text-align: center; font-size: 12px; color: #6c7592; margin-top: 18px; }
.ett-auth-switch a { color: #052272; font-weight: 700; text-decoration: none; }
.ett-auth-switch a:hover { text-decoration: underline; }

.ett-auth-status { text-align: center; margin-bottom: 8px; }
.ett-auth-status h3 { font-family: 'Poppins', sans-serif; font-size: 15px; color: #052272; margin-bottom: 6px; }
.ett-auth-status p { font-size: 12.5px; color: #6c7592; line-height: 1.5; }
.ett-auth-status-error h3 { color: #b3261e; }

.ett-dark .ett-auth-card { background: #161c2c; border-color: #262f47; box-shadow: 0 20px 50px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.3); }
.ett-dark .ett-auth-brand { color: #f1be18; }
.ett-dark .ett-auth-tagline { color: #8b96b3; }
.ett-dark .ett-auth-tabs { background: #0d1220; }
.ett-dark .ett-auth-tabs button { color: #8b96b3; }
.ett-dark .ett-auth-tabs button.active { background: #4361ee; color: #fff; }
.ett-dark .ett-auth-form label { color: #8b96b3; }
.ett-dark .ett-auth-form input { background: #1b2338; border-color: #262f47; color: #e8ecf4; }
.ett-dark .ett-auth-form input:focus { border-color: #4361ee; }
.ett-dark .ett-auth-error { background: rgba(248,113,113,0.14); color: #f87171; border-color: rgba(248,113,113,0.35); }
.ett-dark .ett-auth-switch { color: #8b96b3; }
.ett-dark .ett-auth-switch a { color: #f1be18; }
.ett-dark .ett-auth-status h3 { color: #f1be18; }
.ett-dark .ett-auth-status p { color: #8b96b3; }
.ett-dark .ett-auth-status-error h3 { color: #f87171; }
.ett-dark .ett-check { background: #1b2338; border-color: #3a4568; }

/* Reports dashboard structure */
.ett-section-heading { font-size: 13px; font-weight: 700; color: var(--navy); margin: 22px 0 10px; font-family: 'Poppins', sans-serif; }
.ett-section-heading:first-child { margin-top: 0; }
.ett-overview-card { }
.ett-overview-sub { font-size: 10.5px; color: var(--muted); margin-top: 8px; font-weight: 600; }

.ett-filter-bar { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 14px; }
.ett-filter-field { display: flex; flex-direction: column; gap: 4px; }
.ett-filter-field label { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.ett-filter-field select { padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 12.5px; font-family: 'Inter', sans-serif; background: #fbfbfe; min-width: 160px; }

.ett-status-row { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--border); }
.ett-status-row:last-child { border-bottom: none; }
.ett-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ett-status-title { font-size: 12.5px; font-weight: 600; flex: 1; min-width: 0; }
.ett-status-meta { font-size: 10.5px; color: var(--muted); }
.ett-status-badge { font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.ett-status-badge.done { background: var(--good-soft); color: var(--good); }
.ett-status-badge.pending { background: var(--warn-soft); color: var(--warn); }
.ett-empty-note { color: var(--muted); font-size: 12.5px; padding: 14px 4px; text-align: center; }

.ett-activity-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--border); }
.ett-activity-row:last-child { border-bottom: none; }
.ett-activity-time { font-size: 10.5px; color: var(--muted); width: 108px; flex-shrink: 0; }
.ett-activity-title { font-size: 12.5px; font-weight: 600; flex: 1; min-width: 0; }
.ett-activity-section { font-size: 10.5px; color: var(--muted); background: var(--navy-soft); padding: 2px 9px; border-radius: 20px; white-space: nowrap; }

/* ================================================================
   Drag & drop — handles, ghost card, drop indicators
================================================================= */
.ett-drag-handle {
  cursor: grab; color: var(--muted); font-size: 13px; line-height: 1; padding: 2px 3px; border-radius: 6px;
  flex-shrink: 0; touch-action: none; user-select: none; -webkit-user-select: none; transition: color .15s ease, background .15s ease;
}
.ett-drag-handle:hover { color: var(--navy); background: var(--navy-soft); }
.ett-drag-handle:active { cursor: grabbing; }
.ett-card { position: relative; touch-action: pan-y; }
.ett-card .ett-drag-handle { position: absolute; top: 9px; left: -2px; opacity: 0; transition: opacity .15s ease; }
.ett-card:hover .ett-drag-handle { opacity: 0.9; }
.ett-card-row { padding-left: 4px; }
.ett-edit { position: absolute; top: 7px; right: 30px; opacity: 0; transition: opacity .15s ease; background: none; border: none; cursor: pointer; padding: 2px; font-size: 12px; }
.ett-card:hover .ett-edit { opacity: 0.85; }

body.ett-dragging-active, body.ett-dragging-active * { cursor: grabbing !important; }
.ett-drag-ghost {
  position: fixed; z-index: 99999; pointer-events: none; opacity: 0.92;
  box-shadow: 0 18px 40px rgba(5,34,114,0.28), 0 4px 12px rgba(5,34,114,0.16);
  transform: rotate(-1.5deg) scale(1.02); border-radius: 14px; transition: box-shadow .15s ease;
}
.ett-dragging-source { opacity: 0.35; }
.ett-col.drag-over { outline: 2px dashed var(--gold); outline-offset: -2px; background: var(--gold-soft); border-radius: 16px; }
.ett-tasklist { min-height: 6px; border-radius: 10px; transition: background .15s ease; }
.ett-tasklist.drag-over { background: var(--navy-soft); }
.ett-card.ett-drop-before { box-shadow: 0 -3px 0 0 var(--gold); }
.ett-card.ett-drop-after { box-shadow: 0 3px 0 0 var(--gold); }

/* Edit modal extra fields */
.ett-modal textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; font-size: 13px;
  font-family: 'Inter', sans-serif; background: #fbfbfe; color: var(--text); outline: none; resize: vertical;
}
.ett-modal input:focus, .ett-modal select:focus, .ett-modal textarea:focus {
  border-color: var(--navy); box-shadow: 0 0 0 3px var(--navy-soft);
}

/* ================================================================
   Premium visual polish — depth, glassmorphism, micro-interactions
================================================================= */
.ett-app { animation: ett-fade-in .35s ease; }
@keyframes ett-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.ett-header {
  position: sticky; top: 0; z-index: 20; padding: 10px 4px 14px;
  background: rgba(245, 246, 251, 0.75); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.ett-dark .ett-header { background: rgba(13, 18, 32, 0.75); }

.ett-summary { transition: box-shadow .2s ease; box-shadow: 0 1px 2px rgba(5,34,114,0.05), 0 10px 28px rgba(5,34,114,0.06); }

.ett-col {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ett-col:hover:not(.drag-over) { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(5,34,114,0.09); border-color: #dfe3f0; }

.ett-card { transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease; }
.ett-card:not(.done):hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(5,34,114,0.09); border-color: #dde1ee; }

.ett-check { transition: transform .18s cubic-bezier(.34,1.56,.64,1), background .15s ease, border-color .15s ease; }
.ett-check.checked { animation: ett-check-pop .28s cubic-bezier(.34,1.56,.64,1); }
@keyframes ett-check-pop { 0% { transform: scale(0.7); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
.ett-check:not(.locked):hover { border-color: var(--navy); transform: scale(1.08); }

.ett-btn, .ett-nav button, .ett-lang, .ett-addbtn, .ett-report-tabs button, .ett-download-btn, .ett-weekday-chip, .ett-priority-chip {
  transition: transform .12s ease, box-shadow .12s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.ett-btn:active, .ett-download-btn:active, .ett-report-tabs button:active { transform: scale(0.96); }
.ett-btn.primary:hover, .ett-btn.navy:hover { box-shadow: 0 6px 16px rgba(5,34,114,0.22); transform: translateY(-1px); }
.ett-download-btn { box-shadow: 0 4px 12px rgba(5,34,114,0.18); }
.ett-download-btn:hover { box-shadow: 0 8px 20px rgba(5,34,114,0.26); transform: translateY(-1px); }

.ett-nav { box-shadow: inset 0 0 0 1px rgba(5,34,114,0.03); }
.ett-nav button.active { box-shadow: 0 3px 10px rgba(5,34,114,0.22); }

.ett-report-card, .ett-panel, .ett-guide-chip {
  transition: transform .18s ease, box-shadow .18s ease;
}
.ett-report-card:hover, .ett-overview-card:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(5,34,114,0.1); }

.ett-modal-backdrop { animation: ett-backdrop-in .18s ease; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
@keyframes ett-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
.ett-modal-anim { animation: ett-modal-in .22s cubic-bezier(.2,.9,.3,1.2); box-shadow: 0 24px 60px rgba(5,34,114,0.28), 0 4px 14px rgba(5,34,114,0.14); }
@keyframes ett-modal-in { from { opacity: 0; transform: scale(0.94) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }

.ett-status-row, .ett-activity-row { transition: background .15s ease; border-radius: 8px; }
.ett-status-row:hover, .ett-activity-row:hover { background: var(--bg); }

.ett-completed-toggle .ett-caret { display: inline-block; }
.ett-time-chip { transition: transform .12s ease, background .15s ease; }
.ett-time-chip:active { transform: scale(0.96); }

::selection { background: var(--gold-soft); }

@media (max-width: 640px) {
  .ett-header { position: static; backdrop-filter: none; -webkit-backdrop-filter: none; background: transparent; }
  .ett-col:hover { transform: none; }
}