:root{
  --bg:#0f172a;
  --bg-soft:#f1f5f9;
  --card:#ffffff;
  --ink:#0f172a;
  --muted:#64748b;
  --line:#e2e8f0;
  --brand:#2563eb;
  --brand-dark:#1d4ed8;
  --ok:#16a34a;
  --danger:#dc2626;
  --radius:16px;
  --shadow:0 10px 30px rgba(15,23,42,.10);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--bg-soft);
  color:var(--ink);
  -webkit-text-size-adjust:100%;
  line-height:1.6;
}
a{color:var(--brand);text-decoration:none;}
a:hover{text-decoration:underline;}

/* ---------- 登入 / 註冊 ---------- */
.auth-wrap{
  min-height:100dvh;
  display:flex;align-items:center;justify-content:center;
  padding:24px 16px;
  background:
    radial-gradient(1000px 600px at 10% -10%, #dbeafe 0%, transparent 60%),
    radial-gradient(800px 500px at 110% 10%, #c7d2fe 0%, transparent 55%),
    var(--bg-soft);
}
.auth-card{
  width:100%;max-width:420px;
  background:var(--card);
  border-radius:22px;
  box-shadow:var(--shadow);
  padding:28px 24px 24px;
}
.brand{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
.brand-logo{
  width:42px;height:42px;border-radius:12px;flex:0 0 auto;
  background:linear-gradient(135deg,var(--brand),#7c3aed);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:22px;
}
.brand-name{font-weight:700;font-size:19px;letter-spacing:.3px;}
.auth-sub{color:var(--muted);font-size:14px;margin:2px 0 20px;}

.field{margin-bottom:14px;}
.field label{display:block;font-size:13px;font-weight:600;color:#334155;margin-bottom:6px;}
.field input{
  width:100%;padding:12px 14px;font-size:16px;   /* 16px 避免 iOS 自動放大 */
  border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);
}
.field input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(37,99,235,.15);}
.field .hint{font-size:12px;color:var(--muted);margin-top:5px;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:13px 16px;border:0;border-radius:12px;
  font-size:16px;font-weight:600;cursor:pointer;font-family:inherit;
  background:var(--brand);color:#fff;transition:.15s;
}
.btn:hover{background:var(--brand-dark);}
.btn:disabled{opacity:.55;cursor:not-allowed;}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line);}
.btn.ghost:hover{background:#f8fafc;}
.btn.danger{background:#fff;color:var(--danger);border:1px solid #fecaca;}
.btn.small{width:auto;padding:8px 12px;font-size:14px;}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;}
.btn-row .btn{width:auto;flex:1 1 auto;}

.msg{padding:11px 13px;border-radius:11px;font-size:14px;margin-bottom:14px;}
.msg.error{background:#fef2f2;color:#991b1b;border:1px solid #fecaca;}
.msg.ok{background:#f0fdf4;color:#166534;border:1px solid #bbf7d0;}
.msg.warn{background:#fffbeb;color:#92400e;border:1px solid #fde68a;}

.auth-foot{margin-top:18px;font-size:14px;color:var(--muted);text-align:center;}

/* ---------- App 版型 ---------- */
.topbar{
  position:sticky;top:0;z-index:1000;
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;background:#fff;border-bottom:1px solid var(--line);
}
.topbar .brand{margin:0;flex:1;min-width:0;}
.topbar .brand-logo{width:34px;height:34px;border-radius:10px;font-size:18px;}
.topbar .brand-name{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.topbar .who{font-size:13px;color:var(--muted);display:none;}

.wrap{max-width:1180px;margin:0 auto;padding:14px;}
.grid{display:grid;gap:14px;grid-template-columns:1fr;}

.card{
  background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:16px;
}
.card h2{margin:0 0 4px;font-size:16px;}
.card p.sub{margin:0 0 12px;color:var(--muted);font-size:13px;}

#map{
  width:100%;height:52vh;min-height:280px;border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);background:#e2e8f0;
}
.map-holder{position:relative;}

.stat{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 0;}
.stat .item{
  flex:1 1 120px;background:#f8fafc;border:1px solid var(--line);
  border-radius:12px;padding:10px 12px;
}
.stat .k{font-size:12px;color:var(--muted);}
.stat .v{font-size:15px;font-weight:600;word-break:break-all;}

.share-box{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;}
.share-box input{
  flex:1 1 220px;min-width:0;padding:11px 12px;font-size:14px;
  border:1px solid var(--line);border-radius:11px;background:#f8fafc;color:var(--ink);
}

.list{list-style:none;margin:10px 0 0;padding:0;}
.list li{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:11px 0;border-top:1px solid var(--line);font-size:14px;
}
.list li:first-child{border-top:0;}
.list .grow{flex:1 1 160px;min-width:0;}
.list .small{font-size:12px;color:var(--muted);}
.badge{
  display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600;
}
.badge.on{background:#dcfce7;color:#166534;}
.badge.off{background:#f1f5f9;color:#64748b;}

.empty{color:var(--muted);font-size:14px;padding:10px 0;}

/* 分享頁 */
.share-head{
  padding:22px 16px;color:#fff;
  background:linear-gradient(135deg,#1d4ed8,#7c3aed);
}
.share-head .name{font-size:22px;font-weight:700;}
.share-head .meta{opacity:.9;font-size:13px;margin-top:4px;}
.pill{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.18);border-radius:999px;padding:4px 11px;
  font-size:12px;margin-top:10px;
}
.dot{width:8px;height:8px;border-radius:50%;background:#4ade80;display:inline-block;}

/* ---------- 桌機 / 平板 ---------- */
@media (min-width:760px){
  .wrap{padding:18px;}
  .grid{grid-template-columns:1.4fr 1fr;align-items:start;}
  .grid .span-all{grid-column:1 / -1;}
  #map{height:64vh;}
  .topbar .who{display:block;}
}
@media (min-width:1024px){
  #map{height:70vh;}
}

/* 手機橫式 */
@media (max-height:520px) and (orientation:landscape){
  #map{height:70vh;}
}