:root{
  /* Soft neutrals for minimal, layered look */
  --bg: #f7f8fa;           /* page background (off‑white) */
  --fg: #1f2937;           /* primary text (slate 800) */
  --muted: #6b7280;        /* secondary text (slate 500) */
  --border: #e5e7eb;       /* subtle borders (gray 200) */
  --panel: #ffffff;        /* card / input background */
  --panel-2: #f2f4f7;      /* hover state on panels */
  --accent: #5961e0;       /* soft indigo accent */
  --accent-contrast: #ffffff; /* text on accent */
  --danger: #5e2a2a;       /* muted danger foreground */
  --control-h: 36px;       /* unified control height */
}
@media (prefers-color-scheme: dark){
  :root{
    --bg: #0b0e11;        /* deep near‑black */
    --fg: #c7c7c7;        /* grey primary text */
    --muted: #a0a6ae;     /* softer secondary */
    --border: #242931;    /* subtle border */
    --panel: #12161b;     /* elevated surfaces */
    --panel-2: #171c22;   /* hover */
    --accent: #8f9aff;    /* lighter indigo for dark */
    --accent-contrast: #0b0e11; /* text on accent in dark */
    --danger: #e79a9a;
  }
}
[data-theme="dark"]{
  --bg: #0b0e11;
  --fg: #c7c7c7;         /* grey primary text */
  --muted: #a0a6ae;
  --border: #242931;
  --panel: #12161b;
  --panel-2: #171c22;
  --accent: #8f9aff;
  --accent-contrast: #0b0e11;
  --danger: #e79a9a;
}
[data-theme="light"]{
  --bg: #f7f8fa;
  --fg: #1f2937;
  --muted: #6b7280;
  --border: #e5e7eb;
  --panel: #ffffff;
  --panel-2: #f2f4f7;
  --accent: #5961e0;
  --accent-contrast: #ffffff;
  --danger: #5e2a2a;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
  background: var(--bg);
  color: var(--fg);
}

.container{max-width:560px;margin:0 auto;padding:16px;padding-left:calc(16px + env(safe-area-inset-left));padding-right:calc(16px + env(safe-area-inset-right))}
.row{display:flex;gap:6px}
.input{
  flex:1;
  height: var(--control-h);
  padding:0 14px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--panel);
  color:var(--fg);
  line-height: calc(var(--control-h) - 2px);
  -webkit-appearance: none; appearance: none;
}
.input:focus{outline:none;border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in oklab, var(--accent) 20%, transparent);}
.btn{
  height: var(--control-h);
  padding:0 14px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--fg);
  text-decoration:none;
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  white-space: nowrap;
  -webkit-appearance: none; appearance: none;
}
.btn:hover{ text-decoration: none; }
.btn:hover{background:var(--panel-2)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.primary:active{filter:brightness(0.96)}
.btn.danger{ color:#b74646; border-color:#e6bcbc; background:var(--panel); }
.btn.danger:hover{ background:#f6eaea }
[data-theme="dark"] .btn.danger{ color:#e79a9a; border-color:#5a3a3a }
[data-theme="dark"] .btn.danger:hover{ background:#2a1717 }
.toolbar{display:flex;gap:6px;align-items:center}
.spacer{flex:1}
.toolbar + .toolbar{margin-top:8px}

.btn.icon{width: var(--control-h); padding:0}
.btn.icon i{font-size:14px; line-height:1;}
.btn.icon .icon-svg{width:16px;height:16px;display:block}
.btn.icon svg{width:16px;height:16px;display:block}

/* Subtle red emphasis for clear-completed */
.btn.trash{ color:#b74646; border-color:#e6bcbc; }
.btn.trash:hover{ background:#f6eaea }
[data-theme="dark"] .btn.trash{ color:#e79a9a; border-color:#5a3a3a }
[data-theme="dark"] .btn.trash:hover{ background:#2a1717 }

.list{margin-top:12px;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--panel);box-shadow:0 6px 20px rgba(0,0,0,.06)}
.item{display:flex;align-items:center;gap:12px;padding:10px;border-top:1px solid var(--border);background:transparent}
.item:first-child{border-top:none}
.item.dragging{opacity:.6}
.item:hover{background:var(--panel-2)}
.checkbox{width:18px;height:18px}
.checkbox,input[type="checkbox"]{ accent-color: var(--accent); }
[data-theme="dark"] .checkbox,
[data-theme="dark"] input[type="checkbox"]{ accent-color: var(--muted); }
.text{flex:1}
.text{position:relative}
.text::after{content:"";position:absolute;left:50%;right:50%;top:50%;height:1px;background:currentColor;transform:translateY(-50%);opacity:0;transition:left .25s ease,right .25s ease,opacity .2s ease}
.text.completed{color:var(--muted)}
.text.completed::after{left:0;right:0;opacity:1}
.handle{cursor:grab;opacity:.5}

.auth-card{max-width:420px;margin:8vh auto;padding:20px;border:1px solid var(--border);border-radius:12px;background:var(--panel);box-shadow:0 10px 30px rgba(0,0,0,.08)}
.auth-title{margin:0 0 12px 0}
.auth-input{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--panel);color:var(--fg)}
.auth-actions{display:flex;gap:8px;margin-top:12px}
.note{color:var(--muted);font-size:.9em}

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

/* Modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.4);display:none;align-items:center;justify-content:center;z-index:40}
.modal{background:var(--panel);color:var(--fg);border:1px solid var(--border);border-radius:12px;max-width:440px;width:90%;padding:16px;box-shadow:0 12px 34px rgba(0,0,0,.24)}
.modal-title{margin:0 0 8px 0;font-weight:600}
.modal-actions{margin-top:12px;display:flex;gap:8px;justify-content:flex-end}
.modal input{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--panel);color:var(--fg)}

/* Emphasize danger for account deletion modal */
#confirmModal .modal{ border-color: var(--danger); }
#confirmModal .modal-title{ color: var(--danger); }
#confirmModal input{ border-color: var(--danger); }

/* Site footer */
.site-footer{
  margin:24px auto 16px;
  text-align:center;
  color:var(--muted);
  font-size:12px;
}
.site-footer a{ color:inherit; text-decoration:none }
.site-footer a:hover{ text-decoration:underline }

/* Simple divider between settings sections */
.section-divider{ border-top:1px solid var(--border); margin:12px 0; }

/* Table header sort links (no rounded buttons) */
.th-sort{ cursor:pointer; color:var(--fg); font-weight:600; }
.th-sort:hover{ text-decoration:underline; }

/* Toggle switch */
.switch{ position:relative; display:inline-block; width:44px; height:24px; }
.switch input{ opacity:0; width:0; height:0; }
.switch .slider{ position:absolute; inset:0; background:var(--border); border-radius:999px; transition:background .2s ease; }
.switch .slider::before{ content:""; position:absolute; height:18px; width:18px; left:3px; top:3px; background:var(--panel); border-radius:50%; transition:transform .2s ease; box-shadow:0 1px 2px rgba(0,0,0,.2); }
.switch input:checked + .slider{ background:var(--accent); }
.switch input:checked + .slider::before{ transform:translateX(20px); }

/* SMTP grid: two columns on wide screens */
.smtp-grid{ display:grid; grid-template-columns: 1fr; gap:8px; }
@media (min-width: 560px){
  .smtp-grid{ grid-template-columns: 1fr 1fr; }
}

/* Align TLS label text padding with inputs */
.tls-label{ padding: 0 12px; }