/* 行至待办 · 全局样式 */
/* 六套纯色主题：通过 body[data-theme] 切换主色 */

/* ========== 主题变量（6 套纯色） ========== */
body[data-theme="green"]  { --primary:#16a085; --primary-dk:#12806a; } /* 青绿 */
body[data-theme="blue"]   { --primary:#2196f3; --primary-dk:#1976d2; } /* 蓝色 */
body[data-theme="indigo"] { --primary:#5c6bc0; --primary-dk:#3949ab; } /* 靛蓝 */
body[data-theme="orange"] { --primary:#fb8c00; --primary-dk:#ef6c00; } /* 橙 */
body[data-theme="rose"]   { --primary:#e91e63; --primary-dk:#c2185b; } /* 玫红 */
body[data-theme="slate"]  { --primary:#455a64; --primary-dk:#37474f; } /* 石墨 */

/* 默认绿 */
body { --primary:#16a085; --primary-dk:#12806a; }

* { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; }
body {
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  background:#f5f6f8; color:#2c3e50; -webkit-font-smoothing:antialiased;
}

/* ========== 登录/注册页 ========== */
.auth-page {
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dk) 100%);
}
.auth-card {
  width:340px; max-width:90vw; background:#fff; border-radius:14px;
  padding:40px 36px; box-shadow:0 20px 50px rgba(0,0,0,.25); text-align:center;
}
.auth-logo { font-size:34px; font-weight:800; color:var(--primary); letter-spacing:2px; }
.auth-sub { margin:6px 0 26px; color:#8a94a6; font-size:14px; }
.auth-form { display:flex; flex-direction:column; gap:12px; }
.auth-form input {
  height:44px; border:1px solid #e0e4ea; border-radius:8px; padding:0 14px;
  font-size:15px; outline:none; transition:.2s;
}
.auth-form input:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(22,160,133,.12); }
.auth-err { color:#e53935; font-size:13px; text-align:left; }
.auth-link { margin-top:18px; font-size:13px; color:#8a94a6; }
.auth-link a { color:var(--primary); text-decoration:none; font-weight:600; }

/* ========== 通用按钮 ========== */
.btn-primary {
  height:42px; border:none; border-radius:8px; cursor:pointer;
  background:var(--primary); color:#fff; font-size:15px; font-weight:600;
  transition:background .2s; padding:0 20px;
}
.btn-primary:hover { background:var(--primary-dk); }
.btn-plain {
  border:none; background:transparent; cursor:pointer; color:#5b6673;
  font-size:14px; padding:6px 10px; border-radius:6px; transition:background .2s;
}
.btn-plain:hover { background:rgba(0,0,0,.06); }
.btn-mini {
  border:none; background:transparent; cursor:pointer; font-size:16px;
  width:30px; height:30px; border-radius:6px; color:#8a94a6;
}
.btn-mini:hover { background:rgba(0,0,0,.07); color:#2c3e50; }

/* ========== 顶栏 ========== */
.topbar {
  height:56px; background:#fff; border-bottom:1px solid #eaecef;
  display:flex; align-items:center; justify-content:space-between; padding:0 20px;
  position:sticky; top:0; z-index:10;
}
.brand { font-size:20px; font-weight:800; color:#2c3e50; }
.brand-sub { color:var(--primary); }
.top-actions { display:flex; align-items:center; gap:6px; }
.user-name { font-size:13px; color:#8a94a6; margin-right:6px; }

/* ========== 三态 Tab ========== */
.main { max-width:680px; margin:0 auto; padding:20px 16px 40px; }
.tabs { display:flex; gap:6px; background:#fff; border-radius:10px; padding:5px; box-shadow:0 1px 3px rgba(0,0,0,.05); }
.tab {
  flex:1; border:none; background:transparent; cursor:pointer;
  padding:10px 0; border-radius:7px; font-size:14px; color:#5b6673; transition:.2s;
}
.tab.active { background:var(--primary); color:#fff; font-weight:600; }
.cnt { font-size:12px; opacity:.7; margin-left:2px; }

.new-row { margin:14px 0; text-align:right; }

/* ========== 列表 ========== */
.todo {
  background:#fff; border-radius:10px; padding:14px 16px; margin-bottom:10px;
  box-shadow:0 1px 3px rgba(0,0,0,.05); display:flex; align-items:flex-start; gap:12px;
}
.todo.done { opacity:.6; }
.chk { position:relative; margin-top:3px; cursor:pointer; }
.chk input { position:absolute; opacity:0; cursor:pointer; }
.chk span {
  display:block; width:20px; height:20px; border:2px solid #cfd6df;
  border-radius:5px; transition:.2s; position:relative;
}
.chk input:checked + span { background:var(--primary); border-color:var(--primary); }
.chk input:checked + span::after {
  content:''; position:absolute; left:5px; top:1px; width:5px; height:10px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
}
.todo-body { flex:1; min-width:0; }
.todo-title { font-size:15px; font-weight:600; color:#2c3e50; word-break:break-word; }
.todo.done .todo-title { text-decoration:line-through; color:#8a94a6; }
.todo-content { margin-top:4px; font-size:13px; color:#5b6673; white-space:pre-wrap; word-break:break-word; }
.due { display:inline-block; margin-top:6px; font-size:12px; color:var(--primary); background:rgba(22,160,133,.08); padding:2px 8px; border-radius:10px; }
.due.over { color:#e53935; background:rgba(229,57,53,.1); }
.todo-actions { display:flex; gap:2px; opacity:0; transition:opacity .2s; }
.todo:hover .todo-actions { opacity:1; }

.empty { text-align:center; color:#aab2bd; padding:50px 0; font-size:14px; }

/* ========== 弹窗 ========== */
.modal-mask {
  position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:100;
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.modal { width:420px; max-width:100%; background:#fff; border-radius:12px; padding:22px; }
.modal h3 { font-size:16px; margin-bottom:16px; color:#2c3e50; }
.modal input, .modal textarea {
  width:100%; border:1px solid #e0e4ea; border-radius:8px; padding:10px 12px;
  font-size:14px; outline:none; margin-bottom:12px; font-family:inherit; resize:vertical;
}
.modal input:focus, .modal textarea:focus { border-color:var(--primary); }
.modal-field label { display:block; font-size:13px; color:#8a94a6; margin-bottom:6px; }
.modal-field { margin-bottom:12px; }
.modal-field input { margin-bottom:0; }
.modal-btns { display:flex; justify-content:flex-end; gap:10px; margin-top:14px; }

/* 移动端适配 */
@media (max-width:480px){
  .todo-actions { opacity:1; }
  .topbar { padding:0 12px; }
  .user-name { display:none; }
}

@media print {
  body { background:#fff; }
}