*{box-sizing:border-box;margin:0;padding:0;font-family:'Noto Sans TC',system-ui,sans-serif}
:root{
  --bg:#f2f2f7;--surface:#fff;--border:#e8e8e8;--border2:#d0d0d0;
  --text:#1a1a1a;--muted:#888;--hint:#c8c8c8;
  --blue:#1a5fa8;--blue-l:#ddeeff;--blue-d:#0d3d6e;
  --red:#d0021b;--red-l:#fdeaea;
  --green:#1a6e40;--green-l:#e4f5ec;
}
body{background:var(--bg);min-height:100vh}

/* Header */
header{background:var(--blue-d);color:#fff;padding:.875rem 1.25rem;display:flex;align-items:center;gap:10px}
header h1{font-size:16px;font-weight:600;letter-spacing:.02em}
.admin-link{margin-left:auto;font-size:12px;color:rgba(255,255,255,.75);text-decoration:none;padding:4px 10px;border:1px solid rgba(255,255,255,.25);border-radius:6px;white-space:nowrap}
.admin-link:hover{color:#fff;background:rgba(255,255,255,.12)}

/* Layout */
.container{max-width:860px;margin:0 auto}

/* 月份列 */
.month-bar{background:#fff;padding:.875rem 1.25rem;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}
.month-bar h2{font-size:20px;font-weight:700;color:var(--text)}
.nav-btn{background:none;border:none;cursor:pointer;font-size:28px;color:var(--muted);padding:0 6px;line-height:1}
.nav-btn:hover{color:var(--text)}

/* 星期列 */
.weekdays{display:grid;grid-template-columns:repeat(7,1fr);background:#fff;border-bottom:1px solid var(--border)}
.wday{text-align:center;font-size:12px;font-weight:500;color:var(--muted);padding:8px 0}

/* 日期格子 — 手機 76px，桌機加高 */
.days{display:grid;grid-template-columns:repeat(7,1fr);background:#fff;min-width:0}
.day{border-bottom:1px solid var(--border);border-right:1px solid var(--border);min-height:76px;padding:6px 4px 5px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;transition:background .1s;min-width:0;overflow:hidden}
@media(min-width:600px){.day{min-height:100px;padding:8px 6px 6px}}
.day:nth-child(7n){border-right:none}
.day:hover{background:#f5f5f5}
.day.empty{cursor:default;background:#fafafa}
.day.past{cursor:default}
.day.past:hover{background:#fff}

/* body 鎖定捲動（modal 開啟時加上 .modal-open） */
body.modal-open{overflow:hidden}

/* 日期數字圓圈 */
.day-num{width:30px;height:30px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:500;border-radius:50%;color:var(--text);flex-shrink:0}
@media(min-width:600px){.day-num{width:34px;height:34px;font-size:16px}}
.day.sun .day-num{color:var(--red)}
.day.today .day-num{background:#1a1a1a;color:#fff;font-weight:700}
.day.past .day-num{color:var(--hint)}
.day.past.sun .day-num{color:#e8a0a0}

/* 時間 chip */
.bk-chip{font-size:10px;padding:1px 3px;border-radius:3px;white-space:nowrap;width:90%;max-width:90%;text-align:center;line-height:1.65;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;display:block;box-sizing:border-box}
@media(max-width:500px){.bk-chip{font-size:9px;padding:1px 2px}}
.bk-chip.car-0{background:#ddeeff;color:#0d3d6e}
.bk-chip.car-1{background:#e4f5ec;color:#0f4d2a}
.bk-chip.car-2{background:#fdf3e3;color:#7a4500}
.bk-chip.car-3{background:#f3eafd;color:#4a1a80}
.bk-chip.car-4{background:#fdeaea;color:#7a1a1a}
.bk-chip.car-5{background:#e3f6fd;color:#0a4a6a}
.bk-chip.more{background:none;color:var(--muted);font-size:9px}
.bk-chip.other{background:#f0ede8;color:#6a6560}

/* 圖例 */
.legend{background:#fff;border-top:1px solid var(--border);padding:.75rem 1.25rem;display:flex;gap:14px;flex-wrap:wrap}
.leg{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted)}
.leg-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}

/* Loading */
.loading{text-align:center;padding:3rem;color:var(--muted);font-size:14px;grid-column:1/-1}

/* Modal — 手機底部抽屜，桌機置中 */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:100;display:flex;align-items:flex-end;justify-content:center}
@media(min-width:600px){.overlay{align-items:center}}
.modal{background:#fff;width:100%;max-width:560px;max-height:88vh;display:flex;flex-direction:column;border-radius:18px 18px 0 0;border:none}
@media(min-width:600px){.modal{border-radius:14px;max-height:90vh}}

/* 固定頭部 */
.modal-sticky{flex-shrink:0;padding:1.25rem 1.25rem .75rem;background:#fff;z-index:1;border-bottom:1px solid var(--border)}
/* 捲動內容區 */
.modal-body{overflow-y:auto;padding:.875rem 1.25rem 2rem;-webkit-overflow-scrolling:touch;flex:1}
@media(min-width:600px){.modal-sticky{padding:1.5rem 1.75rem .75rem}.modal-body{padding:.875rem 1.75rem 1.75rem}}

/* 拖曳把手 */
.modal-handle{width:40px;height:4px;background:#e0e0e0;border-radius:2px;margin:0 auto .875rem}

.modal-head{margin-bottom:.875rem}
.modal-head h3{font-size:16px;font-weight:600}
.modal-head .sub{font-size:13px;color:var(--muted);margin-top:2px}
.sec-label{font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;margin-bottom:.5rem}
.bk-row{display:flex;justify-content:space-between;align-items:flex-start;padding:10px 10px 10px 14px;background:var(--bg);border-radius:8px;margin-bottom:6px;border:1px solid var(--border);border-left-width:4px;border-left-style:solid;position:relative}
.bk-info{font-size:13px;line-height:1.6}
.bk-info strong{font-weight:600}
.bk-meta{font-size:11px;color:var(--muted);margin-top:2px}
.cancel-btn{font-size:11px;padding:4px 10px;border:1px solid var(--border2);border-radius:6px;cursor:pointer;background:none;color:var(--muted);white-space:nowrap;margin-left:8px;flex-shrink:0}
.cancel-btn:hover{background:var(--red-l);color:var(--red);border-color:var(--red)}
.no-bk{font-size:13px;color:var(--hint);margin-bottom:.875rem}
hr.div{border:none;border-top:1px solid var(--border);margin:1rem 0}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fg{margin-bottom:10px}
.fg label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}
.fg input,.fg select{width:100%;padding:9px 10px;border:1px solid var(--border2);border-radius:10px;font-size:16px;background:#fff;color:var(--text);outline:none;-webkit-appearance:none;appearance:none}
.fg select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
.fg input:focus,.fg select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,95,168,.12)}
.btn-row{display:flex;gap:8px;margin-top:1rem}
.btn-p{flex:1;padding:13px;background:var(--blue);color:#fff;border:none;border-radius:10px;font-size:15px;cursor:pointer;font-weight:600}
.btn-p:hover{background:var(--blue-d)}
.btn-s{padding:13px 16px;background:var(--red);border:none;border-radius:10px;font-size:15px;cursor:pointer;color:#fff;font-weight:600}
.btn-s:hover{background:#a50016}
.btn-back{padding:13px 16px;background:none;border:1px solid var(--border2);border-radius:10px;font-size:15px;cursor:pointer;color:var(--muted)}
.btn-back:hover{background:var(--bg)}
.msg{font-size:12px;padding:7px 10px;border-radius:6px;margin-top:8px}
.msg.ok{background:var(--green-l);color:var(--green)}
.msg.err{background:var(--red-l);color:var(--red)}
.full-notice{font-size:13px;color:var(--red);background:var(--red-l);padding:10px 12px;border-radius:8px}

/* 取消密碼確認 */
.sub-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:200;display:flex;align-items:flex-end;justify-content:center}
@media(min-width:600px){.sub-overlay{align-items:center}}
.sub-modal{background:#fff;width:100%;max-width:420px;border-radius:18px 18px 0 0;overflow:hidden}
@media(min-width:600px){.sub-modal{border-radius:12px}}
.sub-modal-inner{padding:1.25rem 1.25rem 2rem}
@media(min-width:600px){.sub-modal-inner{padding:1.5rem}}
.sub-modal h4{font-size:15px;font-weight:600;margin-bottom:.5rem}
.sub-modal p{font-size:13px;color:var(--muted);margin-bottom:1rem}

/* 網路重試遮罩 */
#net-loading-mask{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:99999;align-items:center;justify-content:center;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.net-loading-box{background:#fff;border-radius:14px;padding:24px 32px;display:flex;flex-direction:column;align-items:center;gap:14px;min-width:200px;box-shadow:0 8px 24px rgba(0,0,0,.2)}
.net-loading-spinner{width:40px;height:40px;border:4px solid var(--blue-l);border-top-color:var(--blue-d);border-radius:50%;animation:net-spin .8s linear infinite}
.net-loading-text{font-size:14px;color:var(--text);font-weight:500;text-align:center;line-height:1.5}
@keyframes net-spin{to{transform:rotate(360deg)}}

/* ════════════════════════════════════════════════════════════════ */
/* 新增：認證模式和任務選擇器樣式                                      */
/* ════════════════════════════════════════════════════════════════ */

/* 認證模式選項卡 */
.auth-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.auth-tab-btn {
  padding: 10px 16px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s;
}

.auth-tab-btn.active {
  color: var(--blue-d);
  border-bottom-color: var(--blue-d);
}

.auth-tab-btn:hover {
  color: var(--text);
}

.auth-tab-content {
  display: none;
}

.auth-tab-content.active {
  display: block;
}

/* 任務選擇器 Modal */
.task-selector-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 100;
  display: none;
  align-items: flex-end;
  justify-content: center;
}

@media(min-width: 600px) {
  .task-selector-overlay {
    align-items: center;
  }
}

.task-selector-overlay.active {
  display: flex;
}

.task-selector-modal {
  background: #fff;
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  border-radius: 18px 18px 0 0;
  border: none;
  overflow: hidden;
}

@media(min-width: 600px) {
  .task-selector-modal {
    border-radius: 14px;
    max-height: 90vh;
  }
}

.task-selector-header {
  flex-shrink: 0;
  padding: 1.25rem 1.25rem 0.75rem;
  background: #fff;
  z-index: 1;
  border-bottom: 1px solid var(--border);
}

.task-selector-header h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.task-selector-header p {
  font-size: 13px;
  color: var(--muted);
}

.task-selector-body {
  overflow-y: auto;
  padding: 1.5rem 1.25rem;
  flex: 1;
  -webkit-overflow-scrolling: touch;
}

.task-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.task-card {
  padding: 16px;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  text-decoration: none;
  color: var(--text);
}

.task-card:hover {
  border-color: var(--blue);
  background: var(--blue-l);
  transform: translateY(-2px);
}

.task-card-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.task-card-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}

.task-card-desc {
  font-size: 12px;
  color: var(--muted);
}

.task-selector-footer {
  flex-shrink: 0;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--border);
}

.task-selector-footer button {
  width: 100%;
  padding: 12px;
  background: none;
  color: var(--muted);
  border: 1px solid var(--border2);
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.task-selector-footer button:hover {
  background: var(--bg);
}