:root{
  --coral:#FF5A5F;
  --coral-dark:#E14853;
  --ink:#22282f;
  --sub:#6b7280;
  --bg:#f7f7f8;
  --card:#ffffff;
  --line:#ececee;
  --green:#1aa06d;
  --amber:#c98a12;
  --amber-bg:#fff6e5;
  --green-bg:#e8f8f1;
  --coral-bg:#fff0f1;
  --radius:16px;
  --safe-top:env(safe-area-inset-top);
  --safe-bottom:env(safe-area-inset-bottom);
  --tabbar-height:62px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang TC","Noto Sans TC","Helvetica Neue",Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
  /* 這是個 App 而不是文章頁面，長按大部分地方都不需要選字——搭配 app.js 攔截
     contextmenu 事件一起用，減少長按誤觸跳出選字/Google 搜尋列的機會。輸入框、
     文字區塊跟明確想讓人複製的文字（class="selectable-text"）另外排除。 */
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
}
input, textarea, [contenteditable], .selectable-text{
  user-select:text;
  -webkit-user-select:text;
  -webkit-touch-callout:default;
}
#app{max-width:560px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;}

/* ---------- Auth screen ---------- */
.auth-wrap{
  min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:linear-gradient(160deg,var(--coral),var(--coral-dark));
}
.auth-card{
  background:#fff;border-radius:22px;padding:28px 24px calc(24px + var(--safe-bottom));
  width:100%;max-width:400px;box-shadow:0 20px 50px rgba(0,0,0,.25);
}
.auth-logo{font-size:36px;text-align:center;margin-bottom:6px;}
.auth-card h1{margin:0;font-size:21px;text-align:center;}
.auth-sub{margin:4px 0 20px;text-align:center;color:var(--sub);font-size:13px;}
.role-toggle, .mode-toggle{display:flex;background:var(--bg);border-radius:12px;padding:4px;margin-bottom:14px;}
.role-btn, .mode-btn{flex:1;border:none;background:transparent;padding:10px;border-radius:9px;font-size:13.5px;font-weight:700;color:var(--sub);}
.role-btn.active, .mode-btn.active{background:#fff;color:var(--coral-dark);box-shadow:0 1px 3px rgba(0,0,0,.12);}
.auth-error{background:var(--coral-bg);color:var(--coral-dark);font-size:12.5px;padding:10px 12px;border-radius:10px;margin-bottom:12px;line-height:1.5;}
.auth-hint{font-size:11.5px;color:var(--sub);text-align:center;margin-top:14px;line-height:1.6;}
.or-divider{display:flex;align-items:center;gap:10px;margin:16px 0;color:var(--sub);font-size:12px;}
.or-divider::before, .or-divider::after{content:'';flex:1;height:1px;background:var(--line);}
.btn-google{
  width:100%;background:#fff;color:var(--ink);border:1px solid var(--line);
  padding:13px;border-radius:12px;font-size:14.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center;gap:10px;
}
.btn-google:active{background:var(--bg);}

/* ---------- Header ---------- */
header.top{
  padding:calc(14px + var(--safe-top)) 20px 14px;
  background:linear-gradient(135deg,var(--coral),var(--coral-dark));
  color:#fff;
  position:sticky;top:0;z-index:20;
}
header.top h1{margin:0;font-size:20px;font-weight:700;letter-spacing:.2px;}
header.top p{margin:4px 0 0;font-size:13px;opacity:.9;}
.sync-row{display:flex;align-items:center;gap:8px;margin-top:12px;}
.sync-btn{
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.35);
  color:#fff;font-size:13px;padding:7px 14px;border-radius:999px;
  display:flex;align-items:center;gap:6px;
}
.sync-btn:active{background:rgba(255,255,255,.3);}
.sync-meta{font-size:12px;opacity:.85;}

main{flex:1;padding:16px 16px calc(var(--tabbar-height) + 90px + var(--safe-bottom));}

/* ---------- Push-notification permission banner ---------- */
.notify-banner{
  display:none;align-items:center;justify-content:space-between;gap:12px;
  background:var(--amber-bg);color:#8a6103;padding:10px 16px;font-size:12.5px;line-height:1.5;
}

/* ---------- App-version update banner (see checkForNewVersion()) ----------
   Fixed to the viewport top, independent of auth/main screen, so a mid-session
   deploy is noticed no matter which screen is showing. */
.update-banner{
  display:none;align-items:center;justify-content:center;gap:12px;
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:#1d3f8a;color:#fff;padding:10px 16px;font-size:13px;text-align:center;
}
.update-banner.show{display:flex;}
.section-title{font-size:14px;font-weight:700;color:var(--sub);margin:22px 4px 10px;text-transform:uppercase;letter-spacing:.4px;}
.section-title:first-child{margin-top:4px;}
/* 次層級標題：跟 .section-title 同一層版面裡的第二層分組（例如清潔設定彈窗裡
   「定期維護排程」底下的「已排定的維護項目」／「新增排程」）。用左側色塊＋字級
   差異表現主次，不用透明度壓暗——壓暗在同樣字級下反而會讓人覺得「字變小了」。 */
.section-subtitle{
  font-size:13px;font-weight:700;color:var(--ink);margin:18px 2px 8px;letter-spacing:.2px;
  display:flex;align-items:center;gap:6px;
}
.section-subtitle::before{content:'';width:4px;height:13px;background:var(--coral);border-radius:2px;flex-shrink:0;}
/* 卡片化的區塊容器（例如清潔設定彈窗拆成「一般例行清潔」／「定期維護排程」兩塊） */
.settings-block{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:14px;}
.settings-block:last-child{margin-bottom:0;}
/* 通用分隔線：預設上下對稱間距；需要不對稱間距（例如強調「收尾感」）時用 inline style 覆蓋 margin */
.divider{border:none;border-top:1px solid var(--line);margin:18px 0;}
.empty{
  background:var(--card);border-radius:var(--radius);padding:28px 20px;text-align:center;color:var(--sub);font-size:14px;line-height:1.6;border:1px solid var(--line);
}

/* ---------- Task / listing cards ---------- */
.task-card{
  background:var(--card);border-radius:var(--radius);padding:14px 16px;margin-bottom:10px;
  display:flex;align-items:center;gap:12px;border:1px solid var(--line);
}
.task-card.clickable{cursor:pointer;}
.task-card.clickable:active{background:var(--bg);}
.task-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.task-body{flex:1;min-width:0;}
.task-listing{font-weight:700;font-size:15px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.task-sub{font-size:12.5px;color:var(--sub);margin-top:2px;}
.task-title-row{display:flex;align-items:center;gap:6px;}
.task-type-icon{font-size:14px;}
.task-badge{font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:999px;white-space:nowrap;}
.badge-today{background:var(--coral-bg);color:var(--coral-dark);}
.badge-tomorrow{background:var(--amber-bg);color:var(--amber);}
.badge-soon{background:var(--green-bg);color:var(--green);}
.badge-unassigned{background:#eee;color:var(--sub);}
.badge-assigned{background:var(--amber-bg);color:var(--amber);}
.badge-accepted{background:#e8f0ff;color:#2b5fd9;}
.badge-completed{background:var(--green-bg);color:var(--green);}
.badge-cancelled{background:var(--coral-bg);color:var(--coral-dark);}

/* ---------- 房務人員帳戶頁：卡片列表風格 ---------- */
/* 頭部橫幅：色相完全維持品牌色 #FF5A5F 系（深面 #ff3d43、亮面 #ff7277），立體感
   靠疊加半透明白色光斑／極淡斜紋理／頂部高光線／底部陰影／金額文字陰影做出來，
   不是靠換色相。下緣刻意不轉圓角（跟 main 的左右內距用負 margin 頂到畫面邊緣）。 */
#page-cleaner-account .hero-header{
  position:relative;overflow:hidden;color:#fff;
  margin:-16px -16px 16px;padding:22px 20px 26px;
  background:linear-gradient(140deg,#FF5A5F 0%,#ff3d43 35%,#ff7277 70%,#FF5A5F 100%);
}
.hero-header .orb-1{position:absolute;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.10);top:-50px;right:-40px;z-index:1;}
.hero-header .orb-2{position:absolute;width:100px;height:100px;border-radius:50%;background:rgba(255,255,255,.06);bottom:-25px;left:20px;z-index:1;}
.hero-header .orb-3{position:absolute;width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.05);top:40px;left:60%;z-index:1;}
.hero-header .stripe-overlay{
  position:absolute;inset:0;z-index:1;
  background:repeating-linear-gradient(135deg,transparent,transparent 40px,rgba(255,255,255,.02) 40px,rgba(255,255,255,.02) 41px);
}
.hero-header .highlight-line{position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);z-index:3;}
.hero-header .bottom-fade{position:absolute;bottom:0;left:0;right:0;height:20px;background:linear-gradient(to top,rgba(0,0,0,.08),transparent);z-index:2;}
.hero-header .hero-content{position:relative;z-index:2;}
.hero-greeting{font-size:13.5px;opacity:.9;margin:0 0 4px;}
.hero-name{font-size:20px;font-weight:800;margin:0 0 18px;}
.hero-income-row{display:flex;align-items:baseline;gap:8px;}
.hero-income-amount{font-size:30px;font-weight:800;text-shadow:0 2px 8px rgba(0,0,0,.1);}
.hero-income-sub{font-size:12px;opacity:.85;margin-top:2px;}

/* 帳戶頁橫幅合併：同步行事曆／登出（原本在全站共用的 header.top 裡，帳戶頁
   不再顯示那層 header，這兩個功能收進本月收入下面一小排低調按鈕）。跟
   header.top 的 .sync-row／.sync-btn／.sync-meta 共用 .sync-trigger-btn／
   .sync-icon／.sync-label／.sync-meta 這幾個 class，syncAllListings()／
   updateSyncMeta() 用 querySelectorAll 一次更新所有出現的地方，不管當下是
   哪個頁面在顯示。 */
.hero-util-row{position:relative;z-index:2;display:flex;align-items:center;gap:8px;margin-top:16px;}
.hero-util-btn{
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.32);color:#fff;
  font-size:11.5px;font-weight:600;padding:6px 12px;border-radius:999px;
  display:flex;align-items:center;gap:5px;
}
.hero-util-btn:active{background:rgba(255,255,255,.3);}
.hero-util-meta{font-size:11px;opacity:.8;}
.hero-util-logout{margin-left:auto;}

/* 浮動卡片列表 */
.acct-card{
  background:var(--card);border-radius:var(--radius);
  box-shadow:0 1px 3px rgba(20,20,30,.06);margin-bottom:12px;overflow:hidden;border:1px solid var(--line);
}
.acct-row{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;}
.acct-row:active{background:var(--bg);}
.acct-row + .acct-row{border-top:1px solid var(--line);}
.acct-icon{
  width:36px;height:36px;border-radius:10px;background:var(--coral-bg);color:var(--coral-dark);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.acct-icon svg{width:18px;height:18px;}
.acct-text{flex:1;min-width:0;}
.acct-title{font-size:14.5px;font-weight:700;}
.acct-sub{font-size:12px;color:var(--sub);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.acct-chevron{color:#c7cad0;font-size:19px;flex-shrink:0;}
.section-caption{font-size:12px;color:var(--sub);margin:4px 4px 8px;font-weight:700;letter-spacing:.2px;}

/* 團隊資訊唯讀顯示列（管理我的團隊彈窗） */
.info-row{margin-bottom:14px;}
.info-row label{display:block;font-size:12.5px;font-weight:700;color:var(--sub);margin-bottom:6px;}
.info-value{background:var(--bg);border:1px solid var(--line);border-radius:11px;padding:11px 12px;font-size:14px;color:var(--ink);}

.unavail-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;}
.unavail-weekday{text-align:center;font-size:11px;color:var(--sub);padding-bottom:2px;}
.unavail-day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:10px;font-size:13px;cursor:pointer;background:#f5f5f6;color:var(--ink);user-select:none;-webkit-user-select:none;}
.unavail-day.other-month{visibility:hidden;pointer-events:none;}
.unavail-day.today{box-shadow:inset 0 0 0 2px var(--coral);}
.unavail-day.marked{background:var(--coral-bg);color:var(--coral-dark);font-weight:700;}

/* 月份切換按鈕：小巧方形，不用撐滿寬度的 .btn（那個是給 flex:1 的長條按鈕設計的，
   套在這裡會被 flex-basis 撐開變成長條）。 */
.calendar-nav-btn{
  width:36px;height:36px;flex:none;padding:0;border-radius:10px;
  background:var(--bg);border:1px solid var(--line);color:var(--ink);
  font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center;
}
.calendar-nav-btn:active{background:var(--line);}

/* 退房時間有異動彈窗：標示目前選到哪個快捷按鈕，故意跟 .btn-primary（下面的送出鍵）
   長得不一樣，避免使用者誤以為點選項就等於送出。 */
.preset-selected{box-shadow:inset 0 0 0 2px var(--coral);color:var(--coral-dark);font-weight:700;}

.listing-card{
  background:var(--card);border-radius:var(--radius);padding:16px;margin-bottom:10px;border:1px solid var(--line);
}
.listing-head{display:flex;align-items:center;gap:10px;}
.listing-swatch{width:14px;height:14px;border-radius:5px;flex-shrink:0;}
.listing-name{font-weight:700;font-size:15.5px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.listing-actions{display:flex;gap:6px;}
.icon-btn{
  width:32px;height:32px;border-radius:10px;background:var(--bg);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--sub);
}
.icon-btn:active{background:var(--line);}
.listing-url{font-size:11.5px;color:var(--sub);margin-top:8px;word-break:break-all;background:var(--bg);padding:8px 10px;border-radius:8px;}
.listing-status{font-size:12px;margin-top:8px;display:flex;align-items:center;gap:6px;}
.status-dot{width:7px;height:7px;border-radius:50%;}
.status-ok{background:var(--green);}
.status-err{background:var(--coral);}
.status-pending{background:#c9cdd3;}

/* ---------- Team ---------- */
.team-card{
  background:var(--card);border-radius:var(--radius);padding:14px 16px;margin-bottom:10px;border:1px solid var(--line);
  display:flex;align-items:center;gap:12px;
}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--coral-bg);color:var(--coral-dark);display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0;}
.invite-box{background:var(--card);border:1px dashed var(--line);border-radius:var(--radius);padding:14px 16px;margin-top:10px;font-size:13px;}
.invite-link{background:var(--bg);padding:10px 12px;border-radius:9px;font-size:12px;word-break:break-all;margin-top:8px;color:var(--ink);}
.copy-btn{margin-top:8px;width:100%;}

/* ---------- FAB / tabbar ----------
   Both are position:fixed relative to the viewport (NOT sticky / in-flow),
   so their position never depends on how much content a given page has.
   Sticky positioning previously left the tabbar floating mid-page on short
   pages (e.g. "任務管理" with few tasks) since #mainScreen doesn't stretch
   to fill the viewport — fixed positioning sidesteps that entirely. The FAB
   sits a fixed distance above the tabbar (--tabbar-height + gap) so the two
   never overlap regardless of page or content length. */
.fab{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(var(--tabbar-height) + 12px + var(--safe-bottom));
  max-width:560px;width:calc(100% - 32px);
  background:var(--ink);color:#fff;border:none;border-radius:16px;
  padding:15px;font-size:15px;font-weight:700;
  display:flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  z-index:30;
}
.fab:active{background:#000;}
.tabbar{
  position:fixed;left:50%;transform:translateX(-50%);bottom:0;
  width:100%;max-width:560px;
  background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);display:flex;padding-bottom:var(--safe-bottom);
  z-index:25;
}
.tab{flex:1;text-align:center;padding:10px 0 8px;font-size:11.5px;color:var(--sub);font-weight:600;display:flex;flex-direction:column;align-items:center;gap:3px;}
.tab.active{color:var(--coral);}
.tab svg{width:22px;height:22px;}
.page{display:none;}
.page.active{display:block;}

/* ---------- Modal ---------- */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:50;display:none;align-items:flex-end;
}
.modal-backdrop.show{display:flex;}
.modal{
  background:#fff;width:100%;max-width:560px;margin:0 auto;border-radius:20px 20px 0 0;
  padding:20px 20px calc(24px + var(--safe-bottom));
  max-height:88vh;overflow-y:auto;
}
.modal h2{margin:0 0 16px;font-size:17px;}
.field{margin-bottom:14px;}
.field label{display:block;font-size:12.5px;font-weight:700;color:var(--sub);margin-bottom:6px;}
.field input, .field select, .field textarea{
  width:100%;padding:12px 13px;border-radius:11px;border:1px solid var(--line);background:var(--bg);
  font-size:15px;color:var(--ink);font-family:inherit;
}
.field textarea{resize:vertical;}
.field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--coral);outline-offset:-1px;}
.swatches{display:flex;gap:8px;flex-wrap:wrap;}
.swatch{width:30px;height:30px;border-radius:9px;border:2px solid transparent;}
.swatch.selected{border-color:var(--ink);}
.modal-actions{display:flex;gap:10px;margin-top:18px;}
.btn{flex:1;padding:13px;border-radius:12px;border:none;font-size:15px;font-weight:700;}
.btn-primary{background:var(--coral);color:#fff;}
.btn-primary:active{background:var(--coral-dark);}
.btn-ghost{background:var(--bg);color:var(--ink);border:1px solid var(--line);}
.btn-danger{background:var(--coral-bg);color:var(--coral-dark);}
/* 「新增」類按鈕統一黑底，跟浮動按鈕(.fab)、小型「＋」按鈕(.custom-item-row button)
   用同一個 var(--ink) 黑色，操作起來更一致。 */
.btn-add{background:var(--ink);color:#fff;}
.btn-add:active{background:#000;}
.help-box{
  background:var(--amber-bg);color:#8a6103;font-size:12px;line-height:1.6;padding:12px 14px;border-radius:12px;margin-bottom:16px;
}
.help-box b{display:block;margin-bottom:3px;}

/* ---------- 行事曆同步：統一列表（編輯房源彈窗） ---------- */
.ical-entry{margin-bottom:14px;}
.ical-entry-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;}
.ical-entry-top label{font-size:12.5px;font-weight:700;color:var(--sub);margin:0;}
.ical-entry-remove{
  width:22px;height:22px;border-radius:50%;background:var(--bg);color:var(--sub);border:none;
  font-size:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.ical-entry-value{
  background:var(--bg);border:1px solid var(--line);border-radius:11px;padding:11px 12px;
  font-size:13px;color:var(--ink);word-break:break-all;line-height:1.4;
}
.add-platform-card{
  background:var(--bg);border:1.5px dashed var(--line);border-radius:12px;padding:12px;margin-bottom:16px;
}
.add-platform-card .field{margin-bottom:10px;}
.add-platform-card .field:last-of-type{margin-bottom:12px;}
.toast{
  position:fixed;top:calc(14px + var(--safe-top));left:50%;transform:translateX(-50%);
  background:var(--ink);color:#fff;padding:10px 18px;border-radius:999px;font-size:13px;
  z-index:80;opacity:0;pointer-events:none;transition:opacity .25s, top .25s;
  max-width:90%;text-align:center;
}
.toast.show{opacity:1;top:calc(24px + var(--safe-top));}
.spinner{
  width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------- Task detail ---------- */
.detail-header{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
.detail-title{font-size:18px;font-weight:800;flex:1;}
.checklist{list-style:none;padding:0;margin:10px 0;}
.checklist li{
  display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14.5px;
}
.checklist li:last-child{border-bottom:none;}
.checklist input[type=checkbox]{width:19px;height:19px;margin-top:1px;accent-color:var(--coral);flex-shrink:0;}
.detail-meta{font-size:13px;color:var(--sub);margin-bottom:14px;line-height:1.8;}
.detail-meta b{color:var(--ink);}
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px;}
.photo-thumb{width:100%;aspect-ratio:1;border-radius:10px;object-fit:cover;background:var(--bg);border:1px solid var(--line);cursor:pointer;}

/* ---------- Photo lightbox ---------- */
.lightbox-backdrop{background:rgba(0,0,0,.92);justify-content:center;touch-action:pan-y;}
.lightbox-img{max-width:92vw;max-height:82vh;object-fit:contain;border-radius:8px;}
.lightbox-close{
  position:absolute;top:calc(16px + var(--safe-top));right:16px;width:36px;height:36px;border-radius:50%;
  border:none;background:rgba(255,255,255,.15);color:#fff;font-size:16px;display:flex;align-items:center;justify-content:center;
}
.lightbox-counter{
  position:absolute;top:calc(20px + var(--safe-top));left:50%;transform:translateX(-50%);
  color:#fff;font-size:13px;font-weight:700;background:rgba(255,255,255,.15);padding:5px 14px;border-radius:999px;
}
.lightbox-nav{
  position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:none;
  background:rgba(255,255,255,.15);color:#fff;font-size:26px;display:flex;align-items:center;justify-content:center;line-height:1;
}
.lightbox-prev{left:10px;}
.lightbox-next{right:10px;}
.upload-area{
  border:2px dashed var(--line);border-radius:14px;padding:20px;text-align:center;color:var(--sub);font-size:13px;margin-top:10px;
}
.upload-area input{display:none;}
/* 兩顆明確的「拍照」／「從相簿選」按鈕，取代單一 file input 讓瀏覽器自己決定要不要
   給相機選項——有些手機瀏覽器只會直接跳相簿，完全不給拍照的選擇。 */
.photo-upload-row{display:flex;gap:10px;margin-top:10px;}
.photo-upload-row button{flex:1;padding:14px 8px;border-radius:14px;border:2px dashed var(--line);background:var(--card);color:var(--sub);font-size:13px;font-weight:600;}
.photo-upload-row button:active{background:var(--bg);}
.photo-upload-row input{display:none;}
.photo-preview-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px;}
.photo-preview{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;}
.photo-preview img{width:100%;height:100%;object-fit:cover;}
.photo-preview .rm{position:absolute;top:2px;right:2px;background:rgba(0,0,0,.6);color:#fff;border:none;border-radius:50%;width:18px;height:18px;font-size:11px;line-height:1;}

/* ---------- Restock alerts / maintenance schedules / issue reporting ---------- */
.alert-card{
  background:var(--amber-bg);border:1px solid #f0d999;border-radius:var(--radius);padding:14px 16px;margin-bottom:10px;
}
.alert-card.danger{background:var(--coral-bg);border-color:#f3b8bb;}
.alert-card-title{font-weight:700;font-size:14px;color:#8a6103;display:flex;align-items:center;gap:6px;margin-bottom:4px;}
.alert-card.danger .alert-card-title{color:var(--coral-dark);}
.alert-card-sub{font-size:13px;color:#6b5626;line-height:1.6;}
.alert-card.danger .alert-card-sub{color:#8a3238;}
.alert-card .btn{margin-top:10px;padding:9px;font-size:13px;}

.schedule-card{
  background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:8px;
}
.schedule-card-head{display:flex;align-items:center;justify-content:space-between;}
.schedule-card-title{font-weight:700;font-size:14.5px;}
.schedule-card-meta{font-size:12px;color:var(--sub);margin-top:3px;}
.schedule-card-actions{display:flex;gap:6px;}

.check-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px;}
.check-row:last-child{border-bottom:none;}
.check-row input[type=checkbox]{width:19px;height:19px;accent-color:var(--coral);flex-shrink:0;}
.check-row.supply-row input[type=checkbox]{accent-color:var(--amber);}

/* Reason field shown under an unchecked checklist item — required before the
   cleaner can submit completion (see completeTask()'s validation). */
.checklist-reason-row{padding:0 0 10px 29px;margin-top:-6px;}
.checklist-reason-row input{
  width:100%;padding:8px 10px;border-radius:9px;border:1px solid #f3b8bb;background:var(--coral-bg);
  font-size:13px;color:var(--ink);font-family:inherit;
}
.checklist-reason-row input:focus{outline:2px solid var(--coral);outline-offset:-1px;}
.checklist-reason-row input::placeholder{color:#c98a8d;}

.custom-item-row{display:flex;gap:8px;margin-top:10px;}
.custom-item-row input{
  flex:1;padding:12px 13px;border-radius:11px;border:1px solid var(--line);background:var(--bg);
  font-size:15px;color:var(--ink);font-family:inherit;
}
.custom-item-row input:focus{outline:2px solid var(--coral);outline-offset:-1px;}
.custom-item-row button{flex-shrink:0;width:48px;border-radius:11px;border:none;background:var(--ink);color:#fff;font-size:18px;}

/* Checklist category headers（【分類】 lines）*/
.checklist-cat{
  font-size:12.5px;font-weight:800;color:var(--coral-dark);letter-spacing:.5px;
  margin:14px 0 2px;padding-bottom:4px;border-bottom:2px solid var(--coral);
}
.checklist li.cat{
  font-weight:800;color:var(--coral-dark);border-bottom:2px solid var(--coral);
  padding-top:12px;list-style:none;
}

/* Quick action buttons on cleaner task cards */
.card-quick-actions{display:flex;gap:8px;margin-top:8px;}
.card-quick-actions button{
  flex:1;padding:7px 0;border-radius:9px;border:1px solid var(--line);
  background:var(--bg);color:var(--ink);font-size:12.5px;font-weight:700;font-family:inherit;
}
.card-quick-actions button.danger{color:var(--coral-dark);border-color:var(--coral);}

.issue-toggle-row{
  display:flex;align-items:center;justify-content:space-between;background:var(--bg);border-radius:12px;padding:12px 14px;margin-top:8px;
}
.issue-toggle-row label{font-size:14.5px;font-weight:600;}
.switch{position:relative;display:inline-block;width:44px;height:26px;flex-shrink:0;}
.switch input{opacity:0;width:0;height:0;}
.switch .slider{position:absolute;cursor:pointer;inset:0;background:#d3d6db;border-radius:999px;transition:.2s;}
.switch .slider::before{content:"";position:absolute;height:20px;width:20px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;}
.switch input:checked + .slider{background:var(--coral);}
.switch input:checked + .slider::before{transform:translateX(18px);}
.issue-panel{margin-top:10px;}

.checklist-result-row{display:flex;align-items:flex-start;gap:8px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px;}
.checklist-result-row:last-child{border-bottom:none;}
.checklist-result-icon{flex-shrink:0;width:18px;height:18px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:12px;margin-top:1px;}
.checklist-result-icon.done{background:var(--green-bg);color:var(--green);}
.checklist-result-icon.missed{background:var(--coral-bg);color:var(--coral-dark);}

.badge-issue{background:var(--coral-bg);color:var(--coral-dark);font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;margin-left:6px;white-space:nowrap;}