:root{
  --bg:#f2f2f7;            /* iOS systemGroupedBackground */
  --card:#ffffff;
  --label:#1c1c1e;        /* primary text */
  --label2:#3c3c43;       /* secondary */
  --muted:#8e8e93;        /* tertiary / gray */
  --sep:rgba(60,60,67,.18);
  --fill:#e9e9eb;         /* secondary button / segmented track */
  --blue:#007aff; --blue-deep:#0062cc;
  --green:#34c759; --red:#ff3b30; --amber:#ff9500;
  --r:13px;
  --shadow:0 1px 3px rgba(0,0,0,.06);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Noto Sans TC",system-ui,sans-serif;
  background:var(--bg); color:var(--label);
  line-height:1.45; -webkit-font-smoothing:antialiased; overflow-x:clip;
  letter-spacing:-.01em;
}
a{color:var(--blue);text-decoration:none}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:16px;color:var(--label)}
.hidden{display:none!important}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;width:100%;
  padding:13px 18px;border:0;border-radius:12px;background:var(--blue);color:#fff;
  font-weight:600;font-size:1.02rem;transition:opacity .15s,transform .1s}
.btn:active{opacity:.7;transform:scale(.98)}
.btn.ghost{background:var(--fill);color:var(--blue)}
.btn.danger{background:var(--red);color:#fff}
.btn.sm{width:auto;padding:8px 15px;font-size:.92rem;border-radius:10px}

/* ===== Login ===== */
.login-wrap{min-height:100dvh;display:grid;place-items:center;padding:24px;background:var(--bg)}
.login-card{background:var(--card);border-radius:22px;padding:34px 24px;width:100%;max-width:360px;box-shadow:0 12px 40px -16px rgba(0,0,0,.2);text-align:center}
.login-card .logo{width:72px;height:72px;border-radius:20px;background:linear-gradient(160deg,#2bb0a6,#1f8d86);display:grid;place-items:center;margin:0 auto 16px;font-size:36px;box-shadow:0 8px 20px -8px rgba(43,176,166,.6)}
.login-card h1{font-size:1.45rem;font-weight:700;margin-bottom:4px;letter-spacing:-.02em}
.login-card p.sub{color:var(--muted);font-size:.92rem;margin-bottom:24px}

/* ===== Form fields (iOS grouped) ===== */
.field{text-align:left;margin-bottom:14px}
.field label{display:block;font-size:.82rem;font-weight:600;color:var(--muted);margin-bottom:7px;padding-left:2px}
.field input,.field select,.field textarea{
  width:100%;padding:13px 14px;border:1px solid transparent;border-radius:12px;background:var(--fill);
  color:var(--label);appearance:none;-webkit-appearance:none;font-size:16px}
.field textarea{min-height:64px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;background:#fff;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,122,255,.15)}
.err{color:var(--red);font-size:.86rem;margin-top:10px;min-height:1.1em}

/* ===== App shell ===== */
.app{display:none;min-height:100dvh;padding-bottom:86px}
.topbar{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.8);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:.5px solid var(--sep);padding:12px 18px;
  padding-top:calc(12px + env(safe-area-inset-top));display:flex;align-items:center;justify-content:space-between}
.topbar .title{font-weight:700;font-size:1.12rem;letter-spacing:-.02em;display:flex;align-items:center;gap:8px}
.topbar .who{font-size:.8rem;color:var(--muted)}
.wrap{max-width:760px;margin:0 auto;padding:16px}
.view{display:none}
.view.active{display:block;animation:fade .25s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}

h2.vtitle{font-size:1.65rem;font-weight:700;letter-spacing:-.02em;margin-bottom:2px}
.muted{color:var(--muted);font-size:.86rem}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mt{margin-top:16px}.mb{margin-bottom:12px}

/* ===== Cards / stats ===== */
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}
.stat{background:var(--card);border-radius:var(--r);padding:15px 10px;text-align:center;box-shadow:var(--shadow)}
.stat b{display:block;font-size:1.7rem;font-weight:700;line-height:1.05;letter-spacing:-.02em}
.stat span{font-size:.76rem;color:var(--muted)}
.stat.green b{color:var(--green)} .stat.blue b{color:var(--blue)}

.card{background:var(--card);border-radius:var(--r);padding:16px;box-shadow:var(--shadow);margin-bottom:14px}
.card h3{font-size:1rem;font-weight:600;margin-bottom:10px;display:flex;align-items:center;gap:7px}
.alert-list{display:flex;flex-direction:column;gap:8px}
.alert{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 13px;border-radius:11px;background:var(--bg);font-size:.9rem}
.alert.warn{background:#fff4e5} .alert.bad{background:#ffeceb}
.pill{font-size:.72rem;font-weight:600;padding:4px 10px;border-radius:999px;white-space:nowrap}
.pill.green{background:rgba(52,199,89,.16);color:#1f9e44}
.pill.amber{background:rgba(255,149,0,.16);color:#c2710a}
.pill.red{background:rgba(255,59,48,.14);color:#d70015}
.pill.gray{background:var(--fill);color:var(--muted)}

/* ===== Segmented control (iOS) ===== */
.seg{display:flex;gap:2px;background:rgba(118,118,128,.12);border-radius:9px;padding:2px;margin:10px 0 14px}
.seg button{flex:1;border:0;background:transparent;padding:8px;border-radius:7px;font-weight:600;color:var(--label);font-size:.9rem;transition:background .15s}
.seg button.on{background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.12)}

/* ===== Unit grid ===== */
.unit-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:9px}
.unit{min-height:78px;border-radius:14px;border:.5px solid var(--sep);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:6px 3px;font-weight:700;font-size:.95rem;background:var(--card);color:var(--label);text-align:center;line-height:1.15;transition:transform .1s}
.unit:active{transform:scale(.95)}
.unit small{font-weight:500;font-size:.58rem;color:var(--muted);line-height:1.1}
.unit.available{background:rgba(52,199,89,.12);border-color:rgba(52,199,89,.3)}
.unit.available small{color:#1f9e44}
.unit.rented{background:rgba(0,122,255,.1);border-color:rgba(0,122,255,.28)}
.unit.maintenance{background:rgba(255,149,0,.12);border-color:rgba(255,149,0,.32)}
.legend{display:flex;gap:14px;font-size:.78rem;color:var(--muted);margin-bottom:10px;flex-wrap:wrap}
.legend i{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:4px;vertical-align:-1px}

/* ===== Calendar ===== */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal-head div{text-align:center;font-size:.72rem;color:var(--muted);padding:3px 0;font-weight:600}
.cal-day{min-height:42px;border-radius:9px;background:var(--bg);display:flex;flex-direction:column;align-items:center;padding:3px 0}
.cal-day.today{background:rgba(0,122,255,.12);outline:1.5px solid var(--blue)}
.cal-d{font-size:.82rem;font-weight:600}
.cal-dots{display:flex;gap:2px;margin-top:2px;min-height:8px}
.cal-dots i{width:7px;height:7px;border-radius:50%;display:inline-block}
.lg-dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:4px}
.dot-due{background:var(--amber)}
.dot-end{background:var(--red)}

/* ===== List rows (iOS inset grouped) ===== */
.list{display:flex;flex-direction:column;gap:9px}
.item{background:var(--card);border-radius:var(--r);padding:13px 15px;box-shadow:var(--shadow)}
.item .t{font-weight:600}
.item .d{font-size:.82rem;color:var(--muted);margin-top:2px}

/* ===== Bottom tab bar (iOS) ===== */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:30;background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-top:.5px solid var(--sep);display:flex;padding-bottom:env(safe-area-inset-bottom)}
.nav button{flex:1;border:0;background:transparent;padding:8px 0 6px;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--muted);font-size:.66rem;font-weight:500;transition:color .15s}
.nav button .ic{font-size:1.42rem;line-height:1}
.nav button.on{color:var(--blue)}

/* ===== Modal sheet (iOS) ===== */
.modal{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.4);display:none;align-items:flex-end;justify-content:center;animation:fadein .2s ease}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.modal.open{display:flex}
.sheet{background:var(--bg);width:100%;max-width:540px;border-radius:16px 16px 0 0;padding:22px 18px;max-height:92dvh;overflow:auto;padding-bottom:calc(22px + env(safe-area-inset-bottom));animation:slideup .28s cubic-bezier(.32,.72,0,1)}
@keyframes slideup{from{transform:translateY(100%)}to{transform:translateY(0)}}
.sheet h3{font-size:1.2rem;font-weight:700;margin-bottom:16px;letter-spacing:-.02em}
.sheet .actions{display:flex;gap:10px;margin-top:6px}
.fab{position:fixed;right:18px;bottom:90px;z-index:25;width:56px;height:56px;border-radius:50%;background:var(--blue);color:#fff;border:0;font-size:1.9rem;box-shadow:0 8px 24px -6px rgba(0,122,255,.6);display:grid;place-items:center;transition:transform .12s}
.fab:active{transform:scale(.92)}
@media(min-width:560px){.modal{align-items:center}.sheet{border-radius:18px}}
@media(prefers-color-scheme:dark){
  :root{--bg:#000000;--card:#1c1c1e;--label:#ffffff;--label2:#ebebf5;--muted:#8e8e93;--sep:rgba(84,84,88,.5);--fill:#2c2c2e}
  .topbar,.nav{background:rgba(28,28,30,.8)}
  .field input,.field select,.field textarea{background:#2c2c2e}
  .field input:focus,.field select:focus,.field textarea:focus{background:#1c1c1e}
  .seg{background:rgba(118,118,128,.24)} .seg button.on{background:#636366}
  .alert{background:#2c2c2e} .alert.warn{background:#3a2e1a} .alert.bad{background:#3a1f1d}
  .cal-day{background:#2c2c2e}
}