/* styles.css — 完整版（可直接覆蓋）
   覆蓋目標：
   - 主頁背景 + topbar + grid tiles
   - login/post/item/scan/photo/imgView 等所有 modal
   - toast（不佔位）
   - 貼文拍照縮圖：冇相=0佔位；有相=固定尺寸縮圖；可點擊放大
*/

:root{
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* 你可以換成你自己背景 */
  --bg-image: url("./assets/ui/stem-pastel-bg.jpg");

  --text: #223046;
  --muted: #5d6b7a;

  --shadow-sm: 0 8px 18px rgba(34,48,70,.10);
  --shadow-md: 0 14px 34px rgba(34,48,70,.12);
  --shadow-lg: 0 26px 70px rgba(34,48,70,.16);

  --r-md: 14px;
  --r-lg: 18px;
  --r-pill: 999px;

  --focus: rgba(59,130,246,.60);

  --header-h: 96px;
  --footer-h: 42px;
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }

body{
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text);
  background-image: var(--bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;

  padding-top: calc(var(--header-h) + 0px);
  padding-bottom: calc(var(--footer-h) + 10px + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 768px){
  body{ background-attachment: scroll; }
}

body::before{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(900px 520px at 18% 10%, rgba(59,130,246,.26), transparent 55%),
    radial-gradient(900px 520px at 82% 18%, rgba(139,92,246,.22), transparent 55%),
    radial-gradient(900px 520px at 45% 95%, rgba(20,184,166,.20), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.52));
}
body > *{ position: relative; z-index: 1; }

.container{
  width: min(1040px, 100%);
  margin: 0 auto;
  padding: 0 16px;
}

/* ===== Topbar ===== */
.topbar{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 30;
  padding-left: 8px;
  padding-right: 8px;
  backdrop-filter: blur(12px);
  background: rgba(255,255,255,.78);
  border-bottom: 1px solid rgba(34,48,70,.10);
}

.topbar__inner{
  padding: 10px 0;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 240px;
  flex: 1 1 520px;
}

.brand__logo{
  width: 40px;
  height: 40px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  border: 1px solid rgba(34,48,70,.14);
  background:
    radial-gradient(18px 18px at 30% 30%, rgba(255,255,255,.92), transparent 60%),
    linear-gradient(135deg, rgba(59,130,246,.50), rgba(20,184,166,.36), rgba(139,92,246,.32));
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.brand__logoImg{
  width: 88%;
  height: 88%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(34,48,70,.18));
}

.brand__text{ min-width: 0; }

.brand__name{
  font-weight: 950;
  font-size: 22px;
  letter-spacing: .15px;
  color: rgba(10,45,95,.98);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar__controls{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: 10px;
  flex: 1 1 420px;
  min-width: 260px;
}

/* Tabs */
.switchTabs{
  display:inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(59,130,246,.52);
  background: linear-gradient(180deg, rgba(59,130,246,.22), rgba(139,92,246,.20));
  box-shadow: 0 10px 22px rgba(34,48,70,.10);
}

.switchTab{
  border: 1px solid rgba(34,48,70,.12);
  background: rgba(255,255,255,.24);
  cursor: pointer;
  padding: 8px 12px;
  border-radius: var(--r-pill);
  font-weight: 950;
  font-size: 13px;
  color: rgba(34,48,70,.54);
  opacity: .88;
  transition: background .12s ease, opacity .12s ease, transform .12s ease, color .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.switchTab:hover{
  opacity: .98;
  transform: translateY(-1px);
  background: rgba(255,255,255,.36);
  border-color: rgba(59,130,246,.40);
}
.switchTab.is-active{
  opacity: 1;
  color: rgba(8,34,74,.99);
  background: linear-gradient(180deg, rgba(59,130,246,.88), rgba(255,255,255,.80));
  border-color: rgba(59,130,246,.95);
  box-shadow: 0 18px 40px rgba(59,130,246,.30);
}
.switchTab:focus-visible{
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.nav{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content:flex-end;
}

.authArea{ display:flex; align-items:center; gap: 10px; }

/* Buttons */
.btn, .nav__btn{
  border: 1px solid rgba(20,184,166,.58);
  background: rgba(20,184,166,.22);
  color: rgba(34,48,70,.95);
  padding: 10px 12px;
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(34,48,70,.10);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.btn:hover, .nav__btn:hover{
  border-color: rgba(20,184,166,.78);
  background: rgba(20,184,166,.30);
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(34,48,70,.12);
}
.btn.ghost, .nav__btn.ghost{
  border-color: rgba(245,158,11,.65);
  background: rgba(245,158,11,.22);
  box-shadow: none;
}
.btn:focus-visible, .nav__btn:focus-visible{
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
.btn:disabled, .nav__btn:disabled{
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

.iconBtn{
  border: 1px solid rgba(244,63,94,.58);
  background: rgba(244,63,94,.22);
  color: rgba(34,48,70,.95);
  width: 36px; height: 36px;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(34,48,70,.10);
}
.iconBtn:focus-visible{ outline: 2px solid var(--focus); outline-offset: 3px; }

.userPill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(20,184,166,.58);
  background: rgba(20,184,166,.20);
  font-size: 12.5px;
  white-space: nowrap;
  box-shadow: 0 14px 28px rgba(20,184,166,.10);
}
.userPill__role{
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(34,48,70,.74);
}

@media (max-width: 640px){
  :root{ --header-h: 136px; }
  .brand{ flex: 1 1 100%; min-width: 0; }
  .topbar__controls{ flex: 1 1 100%; justify-content: space-between; }
  .brand__name{ font-size: 19px; }
}

/* ===== Page blocks ===== */
.hero{ padding: 0; }
.section{ margin: 0 0 10px; }

.hint{
  margin-top: 10px;
  padding: 12px 12px;
  border-radius: var(--r-lg);
  border: 1px solid rgba(59,130,246,.44);
  background: rgba(59,130,246,.16);
  color: rgba(10,45,95,.92);
  line-height: 1.6;
  font-size: 12.8px;
  backdrop-filter: blur(6px);
}

.empty{
  margin-top: 10px;
  padding: 14px;
  border-radius: var(--r-lg);
  border: 1px dashed rgba(139,92,246,.60);
  background: rgba(139,92,246,.14);
  color: rgba(10,45,95,.90);
}

.scrollFrame{
  margin-top: 0;
  margin-bottom: 0;
  padding: 8px;
  overflow: auto;
  height: calc(100vh - var(--header-h) - var(--footer-h) - 32px);
  min-height: 560px;
  max-height: 860px;
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.14);
  box-shadow:
    0 18px 44px rgba(34,48,70,.14),
    inset 0 0 0 1px rgba(139,92,246,.20);
  backdrop-filter: blur(7px);
  position: relative;
  top: -10px;

  border-style: solid;
  border-color: rgba(200,200,200,.22);
  border-width: 1px;
}
@media (min-width: 980px){
  .scrollFrame{ border-width: 2.5px; }
}

.frameHud{
  position: sticky;
  top: 2px;
  z-index: 8;
  display:flex;
  justify-content: flex-end;
  pointer-events: none;
  margin-bottom: 4px;
}

.hudPill{
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.1;
  padding: 4px 9px;
  border-radius: var(--r-pill);
  color: rgba(34,48,70,.86);
  background: rgba(255,255,255,.30);
  border: 1px solid rgba(59,130,246,.26);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 22px rgba(34,48,70,.08);
}

/* Tiles grid */
.gridTiles{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 980px){ .gridTiles{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .gridTiles{ grid-template-columns: 1fr; } }

.tileBtn{
  border: 0;
  padding: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.tileBtn:focus-visible{
  outline: 2px solid var(--focus);
  outline-offset: 4px;
  border-radius: var(--r-lg);
}

.tile{
  border: 1px solid rgba(20,184,166,.34);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.86);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  backdrop-filter: blur(6px);
}
.tileBtn:hover .tile{
  transform: translateY(-2px);
  border-color: rgba(20,184,166,.50);
  box-shadow: var(--shadow-md);
}

.tile__img{
  width: 100%;
  height: 160px;
  object-fit: cover;
  background: rgba(255,255,255,.65);
  display:block;
}

.tile__thumb{
  height: 160px;
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  padding: 10px;
  background:
    radial-gradient(260px 160px at 30% 30%, rgba(255,255,255,.92), transparent 60%),
    linear-gradient(135deg, rgba(59,130,246,.34), rgba(20,184,166,.28), rgba(139,92,246,.26));
  border-bottom: 1px solid rgba(34,48,70,.10);
}

.tile__badge{
  font-weight: 950;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(245,158,11,.62);
  background: rgba(245,158,11,.22);
}
.tile__pct{
  font-weight: 950;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(59,130,246,.62);
  background: rgba(59,130,246,.22);
}

.tile__body{ padding: 12px; }
.tile__title{ font-weight: 950; font-size: 13.8px; line-height: 1.35; }
.tile__meta{ margin-top: 8px; font-size: 12.6px; color: var(--muted); line-height: 1.4; }
.tile__foot{ margin-top: 10px; display:flex; align-items:center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

.priceTag{
  font-weight: 950;
  font-size: 12.5px;
  padding: 6px 10px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(20,184,166,.62);
  background: rgba(20,184,166,.22);
}

.idTag{
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(139,92,246,1);
}

.pill{
  font-size: 12px;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(59,130,246,.44);
  background: rgba(59,130,246,.16);
  color: rgba(10,45,95,.92);
}

/* ===== Forms ===== */
.field{ display:grid; gap: 6px; }
.field__label{ font-size: 12.5px; color: var(--muted); }
.field__input{
  width: 100%;
  padding: 11px 12px;
  border-radius: var(--r-md);
  border: 1px solid rgba(59,130,246,.22);
  background: rgba(255,255,255,.82);
  color: var(--text);
  outline: none;
  box-shadow: 0 6px 14px rgba(34,48,70,.08);
}
.field__input:focus{
  border-color: rgba(59,130,246,.70);
  box-shadow: 0 0 0 3px rgba(59,130,246,.18);
}
.field__help{
  color: rgba(93,107,122,.95);
  font-size: 12px;
  line-height: 1.4;
  margin-top: 2px;
}
.twoCols{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px){ .twoCols{ grid-template-columns: 1fr; } }

/* ===== Modals ===== */
.modalOverlay{
  position: fixed;
  inset: 0;
  background: rgba(34,48,70,.34);
  display: none;
  align-items: center;
  justify-content: center;
  padding-top: max(6px, env(safe-area-inset-top, 0px));
  padding-right: max(6px, env(safe-area-inset-right, 0px));
  padding-bottom: max(6px, env(safe-area-inset-bottom, 0px));
  padding-left: max(6px, env(safe-area-inset-left, 0px));
  z-index: 50;
}
.modalOverlay.is-open{ display: flex; }

.modal{
  width: min(560px, 100%);
  border-radius: var(--r-lg);
  border: 1px solid rgba(139,92,246,.22);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(10px);
  max-height: calc(100dvh - 12px);
  max-height: calc(100vh - 12px);
  overflow: auto;
}
.modal--wide{
  width: min(860px, 100%);
  max-height: calc(100dvh - 12px);
  max-height: calc(100vh - 12px);
  overflow: auto;
}

.modal__head{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(34,48,70,.10);
}
.modal__title{ font-weight: 950; font-size: 16px; }
.modal__sub{ color: var(--muted); font-size: 12.5px; margin-top: 4px; line-height: 1.5; }
.modal__body{ padding: 14px; display:grid; gap: 12px; }
.modal__actions{ display:flex; flex-wrap: wrap; gap: 10px; margin-top: 2px; }

.modal__error{
  border: 1px solid rgba(244,63,94,.40);
  background: rgba(244,63,94,.14);
  color: var(--text);
  border-radius: var(--r-md);
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.6;
}

/* ===== Item detail modal ===== */
.itemDetail{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 14px;
  align-items: start;
}
@media (max-width: 860px){ .itemDetail{ grid-template-columns: 1fr; } }

.itemDetail__img{
  width: 100%;
  border-radius: var(--r-lg);
  border: 1px solid rgba(20,184,166,.24);
  background: rgba(255,255,255,.65);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display:block;
  box-shadow: var(--shadow-md);
}

.itemDetail__top{ display:flex; align-items:flex-start; justify-content: space-between; gap: 12px; }
.itemDetail__price{
  font-weight: 950;
  font-size: 16px;
  padding: 8px 10px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(20,184,166,.62);
  background: rgba(20,184,166,.22);
  white-space: nowrap;
  height: fit-content;
}

.kvGrid{ margin-top: 12px; display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px){ .kvGrid{ grid-template-columns: 1fr; } }

.kv{
  padding: calc(10px + 0.1em) calc(12px + 0.1em);
  border: 1px solid rgba(59,130,246,.28);
  border-radius: var(--r-md);
  background: rgba(59,130,246,.12);
}
.kv__k{ font-size: 12px; color: rgba(34,48,70,.78); padding-top: 1em; padding-left: .05em; padding-right: .05em; }
.kv__v{ margin-top: 4px; font-size: 13.5px; color: rgba(10,45,95,.96); padding-bottom: .1em; padding-left: .05em; padding-right: .05em; }

.detailText{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  border: 1px solid rgba(139,92,246,.28);
  background: rgba(139,92,246,.12);
  color: rgba(34,48,70,.92);
  line-height: 1.65;
  font-size: 13px;
}

.chips{ margin-top: 10px; display:flex; flex-wrap: wrap; gap: 8px; }
.chip{
  font-size: 12px;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(245,158,11,.50);
  background: rgba(245,158,11,.18);
}

.progress{
  width: 100%;
  min-width: 220px;
  border: 1px solid rgba(59,130,246,.28);
  border-radius: var(--r-md);
  background: rgba(59,130,246,.12);
  padding: 10px 12px;
}
.progress__meta{ font-size: 12.5px; color: rgba(34,48,70,.84); margin-bottom: 8px; }
.progress__track{ height: 10px; border-radius: 999px; background: rgba(34,48,70,.10); overflow: hidden; }
.progress__bar{ height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, rgba(59,130,246,.95), rgba(20,184,166,.95)); }

/* ===== Footer ===== */
.footer{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 25;
  border-top: 1px solid rgba(34,48,70,.10);
  background: rgba(255,255,255,.58);
  backdrop-filter: blur(10px);
  display:flex;
  align-items:center;
}
.footer--compact{ min-height: var(--footer-h); }
.footer__inner{
  width: 100%;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
  justify-content: center;
  text-align: center;
  color: rgba(34,48,70,.72);
  font-size: 12.5px;
}
.footer__inner--compact{ padding: 8px 0; font-size: 12px; }
.footer__sep{ opacity: .55; }

/* =========================
   ✅ Scan Modal: full viewport iframe
========================= */
#scanModal.modalOverlay{
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
}
#scanModal .modal{
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 0;
  border: 0;
}
#scanModal .modal__head{
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
  padding-left: calc(14px + env(safe-area-inset-left, 0px));
  padding-right: calc(14px + env(safe-area-inset-right, 0px));
}
#scanModal .modal__body{
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  padding-left: calc(14px + env(safe-area-inset-left, 0px));
  padding-right: calc(14px + env(safe-area-inset-right, 0px));
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 768px){
  #scanModal .modal{
    margin: 10px;
    border-radius: var(--r-lg);
    border: 1px solid rgba(139,92,246,.22);
    box-shadow: var(--shadow-lg);
  }
}
#scanModal iframe{
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  border: 0;
  background: rgba(255,255,255,.95);
}

/* =========================
   ✅ Toasts (no layout shift)
========================= */
.toastHost{
  position: fixed;
  top: calc(var(--header-h) + 10px);
  right: 12px;
  z-index: 9999;
  display: grid;
  gap: 10px;
  width: min(360px, calc(100vw - 24px));
  pointer-events: none;
}

.toast{
  pointer-events: auto;
  border-radius: var(--r-lg);
  border: 1px solid rgba(34,48,70,.10);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(10px);
  padding: 12px 12px;
  display: grid;
  gap: 6px;

  transform: translateY(-6px);
  opacity: 0;
  animation: toastIn .18s ease-out forwards;
}
.toast__title{ font-weight: 950; font-size: 13.5px; }
.toast__msg{ color: rgba(34,48,70,.78); font-size: 12.5px; line-height: 1.4; }

.toast--success{ border-color: rgba(34,197,94,.35); }
.toast--error{ border-color: rgba(244,63,94,.35); }
.toast--info{ border-color: rgba(59,130,246,.35); }

@keyframes toastIn{ to{ transform: translateY(0); opacity: 1; } }
@keyframes toastOut{ to{ transform: translateY(-6px); opacity: 0; } }

/* =========================
   ✅ Photo modal camera stage
========================= */
.cameraStage{
  width: 100%;
  border-radius: var(--r-lg);
  border: 1px solid rgba(34,48,70,.12);
  background: rgba(255,255,255,.65);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
}
.cameraStage__video, .cameraStage__canvas{
  width: 100%;
  height: 100%;
  display:block;
  object-fit: cover;
}

/* =========================
   ✅ Post modal thumbnail (0 占位 + 不變形)
   - 冇相：#photoThumbWrap 設為 display:none => 0 佔位
   - 有相：固定 width + aspect-ratio => UI 唔會被拉長
========================= */
.photoThumbWrap{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 6px;
}

.thumbBtn{
  border: 0;
  padding: 0;
  background: transparent;
  cursor: zoom-in;
  border-radius: var(--r-md);
}
.thumbBtn:focus-visible{
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.photoThumbImg{
  width: 140px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: var(--r-md);
  border: 1px solid rgba(34,48,70,.12);
  background: rgba(255,255,255,.65);
  box-shadow: var(--shadow-sm);
}

.thumbHint{
  font-size: 12px;
  color: rgba(93,107,122,.95);
  line-height: 1.35;
  padding-top: 6px;
}

/* 放大圖 modal 內圖片 */
.imgViewImg{
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-md);
  border: 1px solid rgba(34,48,70,.12);
  background: rgba(255,255,255,.65);
}
/* Photo modal: 3 buttons layout */
.photoActions3{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

@media (max-width: 520px){
  .photoActions3{
    grid-template-columns: 1fr;
  }
}
/* Photo modal actions: 3 buttons layout */
.photoActions3{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
@media (max-width: 520px){
  .photoActions3{
    grid-template-columns: 1fr;
  }
}
/* =========================
   Auth compact identity button + hover/press toast
   (append to END of styles.css)
========================= */

/* keep toast positioning predictable */
.authArea{
  position: relative;
}

/* identity button (single compact) */
.acctBtn{
  appearance: none;
  border: 1px solid rgba(34,48,70,12);
  background: rgba(255,255,255,28);
  color: rgba(34,48,70,95);

  padding: 10px 12px;
  border-radius: var(--r-md);

  font-size: 13px;
  font-weight: 950;

  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;

  box-shadow: 0 10px 22px rgba(34,48,70,10);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
  -webkit-tap-highlight-color: transparent;
}

.acctBtn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(34,48,70,12);
  background: rgba(255,255,255,36);
  border-color: rgba(59,130,246,40);
}

.acctBtn:focus-visible{
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

/* small status dot */
.acctBtn__dot{
  width: 9px;
  height: 9px;
  border-radius: 999px;
  flex: 0 0 auto;
  box-shadow: 0 0 0 2px rgba(255,255,255,70);
}

/* logged-out look (default) */
.acctBtn.is-out{
  border-color: rgba(245,158,11,65);
  background: rgba(245,158,11,18);
  box-shadow: none;
}
.acctBtn.is-out .acctBtn__dot{
  background: rgba(245,158,11,92);
}

/* logged-in look */
.acctBtn.is-in{
  border-color: rgba(20,184,166,58);
  background: rgba(20,184,166,18);
}
.acctBtn.is-in .acctBtn__dot{
  background: rgba(34,197,94,92);
}

.acctBtn__label{
  white-space: nowrap;
  max-width: 16ch;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* floating auth toast (position set by JS via left/top; CSS handles look) */
.authToast{
  position: fixed;
  z-index: 9999;

  max-width: min(320px, calc(100vw - 24px));
  padding: 10px 12px;

  border-radius: var(--r-lg);
  border: 1px solid rgba(34,48,70,10);
  background: rgba(255,255,255,92);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(10px);

  color: rgba(34,48,70,88);
  font-size: 12.5px;
  line-height: 1.45;

  pointer-events: none;

  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .12s ease, transform .12s ease;
}

.authToast.is-show{
  opacity: 1;
  transform: translateY(0);
}

.authToast__title{
  font-weight: 950;
  color: rgba(10,45,95,98);
  margin-bottom: 4px;
}

.authToast__meta{
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(34,48,70,74);
}

/* ✅ Photo modal：確保底部 3 個按鈕永遠在相機畫面前方、可點擊 */
#photoModal .modal__body{
  position: relative;
}

/* 相機畫面層（較低） */
#photoModal .cameraStage{
  position: relative;
  z-index: 1;
}
#photoModal .cameraStage__video,
#photoModal .cameraStage__canvas{
  position: relative;
  z-index: 1;
}

/* 按鈕層（較高） */
#photoModal .modal__actions{
  position: relative;  /* 或者 sticky（見下方加強版） */
  z-index: 10;
}

/* 🔒 防止 video/canvas 蓋住點擊（UI 疊上去時特別有用） */
#photoModal .cameraStage__video,
#photoModal .cameraStage__canvas{
  pointer-events: none;
}
#photoModal .modal__actions{
  position: sticky;
  bottom: 0;
  z-index: 10;
  background: rgba(255,255,255,.85); /* 可選：避免下面畫面透出影響可讀性 */
  backdrop-filter: blur(3px);        /* 可選：你之前提過 blur 效果 */
}