/* =====================================================================
   月餅戰報 PWA — 樣式
   品牌 tokens 萃取自 InterContinental Kaohsiung 設計系統。
   ===================================================================== */

@font-face {
  font-family: "ITC New Baskerville";
  src: url("/fonts/baskerville.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@400;500;600&family=Noto+Sans+TC:wght@300;400;500;700&family=Jost:wght@300;400;500;600&display=swap");

:root {
  --ic-black: #3D3935;
  --ic-champagne: #CEB4A9;
  --ic-gold-light: #D8C290;
  --ic-gold: #B8975A;
  --ic-gold-deep: #8C6A35;
  --ic-grey-light: #DAD9D6;
  --ic-grey-dark: #686869;
  --bg-alt: #FAF8F5;
  --rule: rgba(61, 57, 53, 0.18);
  --shadow-card: 0 1px 2px rgba(61,57,53,.06), 0 8px 24px rgba(61,57,53,.06);

  --font-serif: "ITC New Baskerville", "Noto Serif TC", "Songti TC", Georgia, serif;
  --font-sans: "Jost", "Gill Sans", "Noto Sans TC", "PingFang TC", -apple-system, BlinkMacSystemFont, sans-serif;

  --ease-out: cubic-bezier(.2,.6,.2,1);
  --ease-in-out: cubic-bezier(.4,0,.2,1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: #ece8e2;
  color: var(--ic-black);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; }

/* App container — 手機就是全螢幕，桌機置中預覽 */
.app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg-alt);
  position: relative;
  display: flex;
  flex-direction: column;
}
.boot {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ic-grey-dark);
  font-size: 13px;
  letter-spacing: .1em;
}

.eyebrow {
  font: 400 10px var(--font-sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ic-grey-dark);
}

/* ─────────── 登入畫面 ─────────── */
.login {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 30px calc(40px + env(safe-area-inset-bottom));
}
.login__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 36px;
}
.login__brand img { height: 30px; width: auto; display: block; }

/* 語言切換鈕（登入 / 戰報共用） */
.lang-btn {
  margin-left: auto;
  border: 1px solid var(--rule);
  background: none;
  color: var(--ic-grey-dark);
  font: 500 11px var(--font-sans);
  letter-spacing: .08em;
  min-width: 34px;
  height: 28px;
  padding: 0 10px;
  cursor: pointer;
  border-radius: 999px;
}
.lang-btn:hover { border-color: var(--ic-black); color: var(--ic-black); }
.topbar__actions { display: flex; align-items: center; gap: 8px; }
.topbar__actions .lang-btn { margin-left: 0; }
.login h1 {
  font: 400 30px/1.2 var(--font-serif);
  color: var(--ic-black);
  margin: 0 0 8px;
}
.login p.sub {
  font: 400 13px/1.6 var(--font-sans);
  color: var(--ic-grey-dark);
  margin: 0 0 28px;
}
.field { margin-bottom: 18px; }
.field label {
  display: block;
  font: 400 11px var(--font-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ic-grey-dark);
  margin-bottom: 8px;
}
.field input {
  width: 100%;
  height: 52px;
  border: 1px solid var(--rule);
  background: #fff;
  padding: 0 16px;
  font: 400 17px var(--font-sans);
  color: var(--ic-black);
  border-radius: 2px;
}
.field input:focus { outline: none; border-color: var(--ic-black); }
.login__hint {
  font: 400 12px/1.6 var(--font-sans);
  color: var(--ic-grey-dark);
  margin: 4px 0 24px;
}
.login__error {
  min-height: 20px;
  font: 400 13px var(--font-sans);
  color: #b3261e;
  margin-bottom: 8px;
}

/* ─────────── 通用按鈕 ─────────── */
.btn {
  width: 100%;
  height: 56px;
  border: none;
  cursor: pointer;
  font: 500 16px var(--font-sans);
  letter-spacing: .06em;
  border-radius: 999px;
}
.btn--primary { background: var(--ic-champagne); color: var(--ic-black); }
.btn--dark { background: var(--ic-black); color: #fff; }
.btn--outline { background: #fff; color: var(--ic-black); border: 1px solid var(--ic-black); }
.btn--line { background: #06C755; color: #fff; display: flex; align-items: center; justify-content: center; gap: 9px; }
.btn--line .l {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px;
  background: rgba(255,255,255,.22); font: 700 12px var(--font-sans);
}
.btn:disabled { opacity: .55; cursor: default; }
.btn[hidden] { display: none; }

/* ─────────── 戰報畫面 ─────────── */
.report { flex: 1; display: flex; flex-direction: column; }
.scroll { flex: 1; overflow-y: auto; padding-bottom: 24px; }

.topbar {
  padding: calc(16px + env(safe-area-inset-top)) 26px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.topbar__brand { display: flex; align-items: center; gap: 9px; }
.brandmark { height: 24px; width: auto; display: block; }
.eyebrow--gold { color: var(--ic-gold-deep); }
.refresh,
.topbar-btn {
  border: 1px solid var(--rule); background: none; color: var(--ic-grey-dark);
  font: 400 10px var(--font-sans); letter-spacing: .08em; padding: 6px 10px;
  cursor: pointer; white-space: nowrap; border-radius: 2px;
}
.refresh:hover,
.topbar-btn:hover { border-color: var(--ic-black); color: var(--ic-black); }

/* 問候 */
.head2 { padding: 16px 26px 0; }
.greet { font: 400 22px var(--font-serif); color: var(--ic-black); }
.head2 .eyebrow { display: block; margin-top: 4px; }

/* 進度圓環 */
.ring-wrap { display: flex; justify-content: center; margin: 14px 0 2px; }
.ring { position: relative; width: 212px; height: 212px; }
.ring svg { transform: rotate(-90deg); }
.ring__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring__num { font: 400 62px/1 var(--font-serif); color: var(--ic-black); }
.ring__sub { margin-top: 6px; font: 400 12px var(--font-sans); letter-spacing: .12em; color: var(--ic-grey-dark); }
.progress-note { text-align: center; font: 400 11px var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ic-gold-deep); padding-bottom: 6px; }

/* 累積獎金卡（員工私人） */
.bonus-card { margin: 18px 26px 0; padding: 20px; background: rgba(206,180,169,.3); border: 1px solid rgba(206,180,169,.65); }
.bonus-amt { display: flex; align-items: baseline; gap: 6px; margin-top: 8px; }
.bonus-amt span { font: 400 16px var(--font-serif); color: var(--ic-black); }
.bonus-amt b { font: 400 36px/1 var(--font-serif); color: var(--ic-black); }
.bonus-note { margin-top: 8px; font: 400 11px/1.5 var(--font-sans); color: var(--ic-grey-dark); }

/* 兩格統計 */
.statcards { margin: 16px 26px 0; display: flex; gap: 14px; }
.statcard { flex: 1; border: 1px solid var(--rule); background: #fff; padding: 16px; }
.statcard .v { font: 400 28px var(--font-serif); color: var(--ic-black); }
.statcard .k { margin-top: 5px; font: 400 10px var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ic-grey-dark); }

/* 里程碑時間軸 */
.milestones { padding: 24px 26px 0; }
.ms-track { position: relative; margin-top: 20px; }
.ms-line { position: absolute; left: 9%; right: 9%; top: 15px; height: 3px; background: var(--ic-grey-light); }
.ms-fill { position: absolute; left: 9%; top: 15px; height: 3px; background: var(--ic-champagne); transition: width .6s var(--ease-out); }
.ms-nodes { position: relative; display: flex; justify-content: space-between; }
.ms-node { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ms-dot { width: 34px; height: 34px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font: 400 14px var(--font-serif); }
.ms-dot--on { background: var(--ic-champagne); color: var(--ic-black); }
.ms-dot--off { border: 1px solid var(--rule); background: var(--bg-alt); color: #c2bfb9; }
.ms-pop { animation: badgePop .8s var(--ease-out) both; }
.ms-label { font: 400 9px var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ic-grey-dark); }
.ms-label--next { color: var(--ic-gold-deep); }

/* 部門與全公司目標 */
.team { margin: 24px 26px 0; padding: 18px 20px; border: 1px solid var(--rule); background: #fff; }
.team-row + .team-row { margin-top: 16px; }
.team-row__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.team-row__label { font: 500 13px var(--font-sans); color: var(--ic-black); }
.team-row__val { font: 400 12px var(--font-sans); color: var(--ic-grey-dark); white-space: nowrap; }
.team-bar { margin-top: 8px; height: 8px; border-radius: 999px; background: var(--ic-grey-light); overflow: hidden; }
.team-bar__fill { height: 100%; border-radius: 999px; transition: width .6s var(--ease-out); }
.team-bar__fill--dept { background: var(--ic-champagne); }
.team-bar__fill--company { background: var(--ic-gold); }
.team-row__pct { margin-top: 6px; font: 400 11px var(--font-sans); letter-spacing: .04em; color: var(--ic-gold-deep); }
.team-note { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule); font: 400 12px/1.6 var(--font-sans); color: var(--ic-grey-dark); }

/* 待追蹤付款訂單 */
.pending { margin: 20px 26px 0; }
.pending__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pending__link {
  font: 500 11px var(--font-sans); letter-spacing: .04em; color: var(--ic-gold-deep);
  text-decoration: none; border-bottom: 1px solid var(--ic-gold-deep); white-space: nowrap;
}
.pending-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.pending-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--rule); background: #fff; padding: 12px 14px; }
.pending-item__no { font: 500 13px var(--font-sans); color: var(--ic-black); }
.pending-item__meta { margin-top: 3px; font: 400 11px var(--font-sans); color: var(--ic-grey-dark); }
.pending-item__right { text-align: right; }
.pending-item__amt { font: 400 16px var(--font-serif); color: var(--ic-black); }
.status-badge { display: inline-block; margin-top: 4px; font: 500 10px var(--font-sans); letter-spacing: .04em; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.status--link { background: rgba(184,151,90,.16); color: var(--ic-gold-deep); }
.status--unpaid { background: rgba(179,38,30,.10); color: #b3261e; }
.status--expired { background: rgba(61,57,53,.09); color: var(--ic-grey-dark); }
.pending-empty { padding: 18px; text-align: center; border: 1px dashed var(--rule); font: 400 12px var(--font-sans); color: var(--ic-grey-dark); }

/* 底部分享列 */
.sharebar { padding: 14px 22px calc(26px + env(safe-area-inset-bottom)); background: var(--bg-alt); border-top: 1px solid var(--rule); }
.sharebar .btn { border-radius: 0; height: 54px; letter-spacing: .1em; }

/* ─────────── 分享面板 ─────────── */
.sheet-wrap { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; justify-content: flex-end; }
.sheet-wrap[hidden] { display: none; }
.sheet-scrim { position: absolute; inset: 0; background: rgba(30,28,26,.52); animation: fadeIn .3s ease both; }
.sheet {
  position: relative; background: #fff; border-radius: 22px 22px 0 0;
  padding: 20px 22px calc(28px + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 44px rgba(61,57,53,.24); animation: sheetUp .42s var(--ease-out) both;
  max-width: 480px; margin: 0 auto; width: 100%;
}
.sheet__grip { width: 38px; height: 4px; border-radius: 999px; background: var(--ic-grey-light); margin: 0 auto 16px; }
.sheet__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.sheet__close { border: none; background: none; cursor: pointer; color: var(--ic-grey-dark); font-size: 22px; line-height: 1; padding: 2px 6px; }
.sheet__qr { text-align: center; }
.sheet__qr .box { display: inline-block; padding: 14px; border: 1px solid var(--rule); background: #fff; }
.sheet__qr img { display: block; width: 196px; height: 196px; image-rendering: pixelated; }
.sheet__cap { margin: 14px auto 0; max-width: 240px; font: 400 12.5px/1.55 var(--font-sans); color: var(--ic-grey-dark); }
.sheet__meta { margin-top: 10px; font: 400 11px var(--font-sans); letter-spacing: .06em; color: var(--ic-black); word-break: break-all; }
.sheet__btns { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.sheet__btns .btn { height: 50px; border-radius: 0; }
.sheet__btns .btn--line { border-radius: 0; }

.toast {
  position: fixed; left: 0; right: 0; bottom: calc(26px + env(safe-area-inset-bottom));
  display: flex; justify-content: center; pointer-events: none; z-index: 70;
}
.toast > div {
  background: rgba(61,57,53,.94); color: #fff; font: 400 13px var(--font-sans);
  letter-spacing: .04em; padding: 11px 20px; animation: toastIn .3s ease both;
}
.toast[hidden] { display: none; }

@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes softPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(184,151,90,0); } 50% { box-shadow: 0 0 0 7px rgba(184,151,90,.13); } }
@keyframes ringGrow { from { stroke-dashoffset: 552.9; } }
@keyframes badgePop { 0% { transform: scale(.55); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; } }