/* ============================================================
   平台統一的可愛 3D 風格（design review 2026-08，規則收在
   .claude/skills/platform-design/SKILL.md，後續新增畫面都要照這份）
   技法核心：陰影台階 box-shadow: 0 Npx 0 <深色> + :active 收回位移，
   營造積木/貼紙的立體按壓感；顏色一律柔彩、面色配深色台階成對出現。
   本檔只放「形狀」規則（圓角、陰影台階、裝飾元件結構），不放顏色 token——
   顏色 token 由目前選的主題色檔（theme-flowmind.css / theme-pastel.css /
   theme-aurora.css / theme-marshmallow.css）決定，哪個生效看 index.html 裡
   <link id="themeColors"> 目前指向哪個檔案。這份形狀規則不分主題色，全站統一，
   不再需要額外切換「cute-3d 主題」才會生效（之前掛在 html[data-theme="cute-3d"]
   底下，導致沒特別選這個主題的人完全看不到這套設計，等於白做——2026-08 拿掉這道閘）。 */

:root {
  --radius: 20px;
  --radius-sm: 14px;
}

/* ---------------- 頂部品牌色條（無需改 HTML） ---------------- */

body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--done));
  z-index: 100;
  pointer-events: none;
}
@media print { body::before { display: none; } }

/* ---------------- 按鈕：陰影台階 ---------------- */

.btn {
  border: 2px solid var(--border);
  background: var(--surface-2);
  box-shadow: 0 3px 0 var(--border);
  transition: transform .08s ease, box-shadow .08s ease, border-color .12s, background-color .12s;
}
.btn:hover { background: var(--surface-2); border-color: var(--brand); transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 var(--border); }
.btn:disabled { box-shadow: none; }

.btn-primary {
  background: var(--brand);
  border-color: var(--brand-dark);
  color: var(--brand-ink);
  box-shadow: 0 4px 0 var(--brand-dark);
}
.btn-primary:hover { background: var(--brand); filter: brightness(1.05); border-color: var(--brand-dark); }
.btn-primary:active:not(:disabled) { box-shadow: 0 0 0 var(--brand-dark); }

.btn-ghost { border-color: transparent; background: transparent; box-shadow: none; }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--border); box-shadow: 0 3px 0 var(--border); }

.btn-danger {
  color: var(--danger-dark);
  background: var(--danger-soft);
  border-color: var(--danger-dark);
  box-shadow: 0 3px 0 var(--danger-dark);
}
.btn-danger:hover { background: var(--danger); color: #fff; border-color: var(--danger-dark); }
.btn-danger:active:not(:disabled) { box-shadow: 0 0 0 var(--danger-dark); }

.notif-bell { border: 2px solid var(--border); background: var(--surface-2); box-shadow: 0 3px 0 var(--border); }
.notif-bell:hover { border-color: var(--brand); box-shadow: 0 3px 0 var(--brand-dark); }
.notif-bell:active { box-shadow: 0 0 0 var(--border); }

/* ---------------- 輸入框：內縮陰影 ---------------- */

.input, .textarea, .select {
  border: 2px solid var(--border);
  background: var(--surface);
  box-shadow: inset 0 2px 0 rgba(43, 51, 82, 0.05);
}
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(109, 132, 230, 0.22);
}
.mini-select { border: 2px solid var(--border-strong); border-radius: var(--radius-sm); }

/* ---------------- 卡片 / 面板：陰影台階 + 大圓角 ---------------- */

/* .panel 巢狀在 drawer 裡面，比照 flowmind 的 panel-2：扁平、有底色，不疊陰影台階 */
.panel {
  background: var(--surface-2);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: none;
}

.stat, .modal-card {
  border: 2px solid var(--border-strong);
  box-shadow: var(--shadow-1);
}

.project-card {
  border: 2px solid var(--border-strong);
  box-shadow: var(--shadow-1);
}
.project-card:hover {
  border-color: var(--brand);
  box-shadow: 0 4px 0 var(--brand-dark), var(--shadow-2);
  transform: translateY(-2px);
}

/* .task 是階段裡的巢狀項目（不是頂層卡片），比照 flowmind 的 panel-2：扁平、有底色、不疊陰影 */
.task {
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  box-shadow: none;
}
.task:hover { background: var(--surface-3); }

.drawer { box-shadow: var(--shadow-2); border-left: 2px solid var(--border); }

.bar { box-shadow: inset 0 1px 2px rgba(43, 51, 82, 0.08); }

/* ---------------- 標籤 / 篩選 chip：實框代替純底色 ---------------- */

.pill { border: 2px solid var(--border); background: var(--surface-2); }
.pill.todo { border-color: var(--todo-dark); color: var(--todo-dark); background: var(--todo-soft); }
.pill.doing { border-color: var(--doing-dark); color: var(--doing-dark); background: var(--doing-soft); }
.pill.blocked, .pill.await { border-color: var(--blocked-dark); color: var(--blocked-dark); background: var(--blocked-soft); }
.pill.done { border-color: var(--done-dark); color: var(--done-dark); background: var(--done-soft); }
.pill.overdue { border-color: var(--danger-dark); color: var(--danger-dark); background: var(--danger-soft); }
.pill.bug { border-color: var(--danger-dark); color: var(--danger-dark); background: var(--danger-soft); font-weight: 700; }
.pill.role-admin { border-color: var(--brand-dark); color: var(--brand-dark); background: var(--brand-soft); }
.pill.role-client { border-color: var(--done-dark); color: var(--done-dark); background: var(--done-soft); }

.chip { border: 2px solid var(--border); }
.chip:hover { border-color: var(--brand); }
.chip.on { background: var(--brand); border-color: var(--brand-dark); box-shadow: 0 3px 0 var(--brand-dark); color: var(--brand-ink); }

/* ---------------- 留言串 ---------------- */

.msg-text { border: 2px solid var(--border); background: var(--surface-2); box-shadow: none; }
.msg.mine .msg-text { border-color: var(--brand); background: var(--brand-soft); box-shadow: none; }
.avatar { border: 2px solid rgba(255, 255, 255, .7); }

/* ---------------- Toast ---------------- */

.toast { border: 2px solid var(--brand-dark); box-shadow: 0 4px 0 var(--brand-dark); background: var(--brand); }
.toast.err { border-color: var(--danger-dark); box-shadow: 0 4px 0 var(--danger-dark); background: var(--danger); }

/* ---------------- 頂部列 Logo：小小的立體感 ---------------- */

.brand-mark {
  background: none;
  object-fit: contain;
  transition: transform .15s cubic-bezier(.34,1.56,.64,1);
}
.brand:hover .brand-mark { transform: translateY(-1px) scale(1.08); }

/* ---------------- 主題選色圓點 ---------------- */

.theme-dot {
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--border);
  transition: transform .12s ease, box-shadow .12s ease;
}
.theme-dot:hover { transform: scale(1.15); }
.theme-dot.on { box-shadow: 0 0 0 2px var(--brand-dark); }

/* ---------------- 登入 / 初始化：本風格最完整的展示頁 ---------------- */

.auth-wrap {
  position: relative;
  overflow: hidden;
  background: var(--hero-gradient);
}
.auth-wrap::before, .auth-wrap::after {
  content: '';
  position: absolute;
  border-radius: 999px;
  filter: blur(70px);
  pointer-events: none;
}
.auth-wrap::before { width: 420px; height: 420px; background: var(--brand); opacity: .3; top: -140px; right: -110px; }
.auth-wrap::after { width: 380px; height: 380px; background: var(--done); opacity: .32; bottom: -150px; left: -100px; }

.hero-dot {
  position: absolute;
  border-radius: 999px;
  background: rgba(255, 255, 255, .65);
  pointer-events: none;
}

.auth-stack { position: relative; width: 100%; max-width: 400px; isolation: isolate; }
.auth-stack::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 28px;
  background: linear-gradient(135deg, var(--brand), var(--done));
  transform: rotate(-4deg);
  z-index: -1;
}

.auth-card {
  position: relative;
  border: 2px solid var(--border-strong);
  border-radius: 28px;
  box-shadow: var(--shadow-2);
}

.card-bump {
  position: absolute;
  border-radius: 999px;
  background: var(--surface);
  border: 2px solid var(--border);
  z-index: 2;
}

.auth-logo-img {
  display: block;
  height: 34px;
  width: auto;
  margin: 0 auto 16px;
}

.title-tiles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.title-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 17px;
  transform: rotate(var(--tilt, 0deg));
  transition: transform .15s ease;
}
.title-tile:hover { transform: rotate(0deg) translateY(-3px) scale(1.08); }
@media (max-width: 480px) {
  .title-tile { width: 34px; height: 34px; font-size: 14px; }
}