/* ==========================================================================
   djmp.tw × Authelia 登入頁主題
   由 NPMplus（auth.djmp.tw 的 advanced config）用 sub_filter 注入到 Authelia 的 HTML，
   檔案本身由入口頁伺服器（:4300 /auth-theme.css）提供。
   只改外觀：Authelia 的登入流程、Passkey、SSO 邏輯完全不動。
   Authelia 是 Tailwind + shadcn，顏色都走 CSS 變數，所以盡量改變數、少硬寫元件樣式；
   需要指定元件時只用穩定的 id（#username-textfield 之類）與 :has()。
   改完記得把 NPMplus 注入的 ?v= 版本號加一，手機才不會吃到舊快取。
   ========================================================================== */

@property --djmp-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* ── 1. 色票：蓋掉 Authelia 所有主題的變數 ─────────────────────────────── */
/* 設定頁會在 <body> 也加 data-theme，所以兩層都要蓋；重複屬性是為了權重高過 Authelia 晚載入的 CSS */
html[data-theme],
[data-theme][data-theme] {
  --djmp-bg: #05060c;
  --djmp-indigo: #5b6cff;
  --djmp-violet: #8b5cf6;
  --djmp-cyan: #22d3ee;
  --djmp-pink: #ec4899;
  --djmp-grad: linear-gradient(115deg, #5b8cff 0%, #7a5cff 45%, #b65cff 100%);
  --djmp-glass: rgba(16, 18, 32, 0.5);
  --djmp-glass-strong: rgba(20, 22, 40, 0.86);
  --djmp-line: rgba(255, 255, 255, 0.09);
  --djmp-ease: cubic-bezier(.2, .8, .2, 1);

  --background: var(--djmp-bg);
  --foreground: #eef0ff;
  --card: var(--djmp-glass);
  --card-foreground: #eef0ff;
  --popover: var(--djmp-glass-strong);
  --popover-foreground: #eef0ff;
  --primary: #6d74ff;
  --primary-foreground: #ffffff;
  --secondary: var(--djmp-pink);
  --muted: rgba(255, 255, 255, 0.06);
  --muted-foreground: rgba(226, 229, 255, 0.62);
  --accent: rgba(255, 255, 255, 0.08);
  --accent-foreground: #eef0ff;
  --border: var(--djmp-line);
  --input: rgba(255, 255, 255, 0.14);
  --ring: #8b8fff;
  --radius: 14px;
  --custom-icon: #c9ccff;
  --custom-loading-bar: #7c83ff;
  --divider: var(--djmp-line);
  color-scheme: dark;
}

html[data-theme],
html[data-theme] body {
  background: var(--djmp-bg) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang TC", "Noto Sans TC",
    "Microsoft JhengHei", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── 2. 背景：極光 + 星空 + 透視網格 ───────────────────────────────────── */

/* 極光：四團大光暈慢慢漂移、旋轉（只用 transform，手機也不卡） */
html[data-theme] body::before {
  content: "";
  position: fixed;
  inset: -30vmax;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(30vmax 30vmax at 36% 34%, rgba(91, 108, 255, 0.55), transparent 62%),
    radial-gradient(26vmax 26vmax at 64% 30%, rgba(139, 92, 246, 0.48), transparent 60%),
    radial-gradient(24vmax 24vmax at 60% 68%, rgba(34, 211, 238, 0.30), transparent 60%),
    radial-gradient(22vmax 22vmax at 38% 70%, rgba(236, 72, 153, 0.24), transparent 60%);
  filter: saturate(120%);
  animation: djmp-aurora 26s ease-in-out infinite alternate;
  will-change: transform;
}

/* 透視網格：地平線下方的發光格線，往前流動 */
html[data-theme] body::after {
  content: "";
  position: fixed;
  left: -50%;
  right: -50%;
  bottom: -10vh;
  height: 55vh;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(124, 131, 255, 0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 131, 255, 0.22) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: perspective(420px) rotateX(62deg);
  transform-origin: center top;
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent 85%);
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent 85%);
  animation: djmp-grid 6s linear infinite;
  opacity: 0.55;
}

/* 星空：兩層不同大小的星星，慢慢往上飄、會閃 */
html[data-theme] #root::before,
html[data-theme] #root::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  background: transparent;
}
html[data-theme] #root::before {
  box-shadow:
    8vw 12vh #fff, 22vw 64vh #c7d2fe, 35vw 30vh #fff, 47vw 84vh #a5b4fc, 58vw 18vh #fff,
    66vw 52vh #e0e7ff, 74vw 90vh #fff, 83vw 36vh #c4b5fd, 92vw 70vh #fff, 15vw 45vh #e0e7ff,
    28vw 95vh #fff, 41vw 8vh #c7d2fe, 52vw 58vh #fff, 63vw 76vh #a5b4fc, 88vw 10vh #fff,
    5vw 82vh #c4b5fd, 96vw 48vh #fff, 33vw 72vh #e0e7ff, 71vw 4vh #fff, 19vw 26vh #a5b4fc,
    8vw 112vh #fff, 22vw 164vh #c7d2fe, 35vw 130vh #fff, 47vw 184vh #a5b4fc, 58vw 118vh #fff,
    66vw 152vh #e0e7ff, 74vw 190vh #fff, 83vw 136vh #c4b5fd, 92vw 170vh #fff, 15vw 145vh #e0e7ff;
  opacity: 0.7;
  animation: djmp-stars 70s linear infinite, djmp-twinkle 4s ease-in-out infinite alternate;
}
html[data-theme] #root::after {
  width: 3px;
  height: 3px;
  box-shadow:
    12vw 20vh rgba(167, 139, 250, .9), 38vw 60vh rgba(125, 211, 252, .9), 61vw 34vh rgba(255, 255, 255, .9),
    80vw 80vh rgba(167, 139, 250, .9), 90vw 26vh rgba(125, 211, 252, .9), 26vw 88vh rgba(255, 255, 255, .9),
    50vw 14vh rgba(244, 114, 182, .8), 70vw 62vh rgba(255, 255, 255, .9),
    12vw 120vh rgba(167, 139, 250, .9), 38vw 160vh rgba(125, 211, 252, .9), 61vw 134vh rgba(255, 255, 255, .9),
    80vw 180vh rgba(167, 139, 250, .9), 90vw 126vh rgba(125, 211, 252, .9), 26vw 188vh rgba(255, 255, 255, .9);
  filter: drop-shadow(0 0 4px rgba(167, 139, 250, 0.9));
  animation: djmp-stars 45s linear infinite, djmp-twinkle 2.6s ease-in-out infinite alternate-reverse;
}

/* 內容疊在背景上面 */
html[data-theme] #root > div {
  position: relative;
  z-index: 1;
}

/* ── 3. 頂端列：語言切換、頭像 ─────────────────────────────────────────── */
html[data-theme] header button#language-button,
html[data-theme] header button#account-menu {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--djmp-line);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  color: rgba(238, 240, 255, 0.85);
  transition: background .25s, border-color .25s, transform .25s var(--djmp-ease);
  animation: djmp-fade 0.8s var(--djmp-ease) 0.6s both;
}
html[data-theme] header button#account-menu {
  padding: 2px;
  background: var(--djmp-grad);
  border: 0;
  box-shadow: 0 0 18px rgba(122, 92, 255, 0.55);
}
html[data-theme] header button#account-menu > span > span {
  background: #11132a;
  color: #fff;
  font-weight: 700;
}
html[data-theme] header button:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
}

/* ── 4. 卡片：毛玻璃 + 旋轉的漸層光邊 ─────────────────────────────────── */
html[data-theme] [id$="-stage"].min-h-\[90vh\] {
  min-height: 100vh;
  min-height: 100svh;
  padding: 24px 0 40px;
}
html[data-theme] [id$="-stage"].min-h-\[90vh\] > div {
  position: relative;
  max-width: 440px !important;
  padding: 40px 36px 22px !important;
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015) 40%),
    var(--djmp-glass);
  backdrop-filter: blur(28px) saturate(150%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.10) inset,
    0 40px 120px -30px rgba(0, 0, 0, 0.85),
    0 0 80px -20px rgba(110, 100, 255, 0.35);
  isolation: isolate;
  animation: djmp-card-in 1s var(--djmp-ease) both;
}
/* 光邊：conic-gradient 一直轉，用 mask 只露出 1.5px 的邊 */
html[data-theme] [id$="-stage"].min-h-\[90vh\] > div::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--djmp-angle),
      rgba(91, 140, 255, 0) 0deg, rgba(91, 140, 255, 0.95) 60deg, rgba(182, 92, 255, 0.95) 120deg,
      rgba(34, 211, 238, 0) 180deg, rgba(34, 211, 238, 0.7) 260deg, rgba(91, 140, 255, 0) 330deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: djmp-spin 6s linear infinite;
  pointer-events: none;
  z-index: -1;
}
/* 卡片上緣的一道柔光 */
html[data-theme] [id$="-stage"].min-h-\[90vh\] > div::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 18%;
  right: 18%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), transparent);
  filter: blur(0.3px);
  pointer-events: none;
}

/* ── 5. Logo：漂浮 + 旋轉光環 + 呼吸光暈 ────────────────────────────────── */
html[data-theme] [id$="-stage"].min-h-\[90vh\] .p-2:has(> img[alt="Logo"]),
html[data-theme] [id$="-stage"].min-h-\[90vh\] .p-2:has(> #UserSvg) {
  position: relative;
  display: grid;
  place-items: center;
  margin: -6px auto 6px;
  width: 112px;
  height: 112px;
  animation: djmp-pop 0.9s var(--djmp-ease) 0.15s both;
}
html[data-theme] [id$="-stage"].min-h-\[90vh\] .p-2:has(> img[alt="Logo"])::before,
html[data-theme] [id$="-stage"].min-h-\[90vh\] .p-2:has(> #UserSvg)::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: conic-gradient(from var(--djmp-angle), #5b8cff, #b65cff, #22d3ee, #5b8cff);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  animation: djmp-spin 4s linear infinite;
  opacity: 0.9;
}
html[data-theme] [id$="-stage"].min-h-\[90vh\] .p-2:has(> img[alt="Logo"])::after,
html[data-theme] [id$="-stage"].min-h-\[90vh\] .p-2:has(> #UserSvg)::after {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(122, 92, 255, 0.55), transparent 70%);
  filter: blur(14px);
  animation: djmp-breathe 3.2s ease-in-out infinite;
  z-index: -1;
}
html[data-theme] [id$="-stage"].min-h-\[90vh\] img[alt="Logo"],
html[data-theme] [id$="-stage"].min-h-\[90vh\] #UserSvg {
  width: 84px !important;
  height: 84px;
  margin: 0 !important;
  animation: djmp-float 5s ease-in-out infinite;
  filter: drop-shadow(0 10px 24px rgba(91, 108, 255, 0.45));
}
html[data-theme] [id$="-stage"].min-h-\[90vh\] #UserSvg {
  width: 56px !important;
  height: 56px;
  fill: #c9ccff;
}

/* ── 6. 標題：流動的漸層字 ─────────────────────────────────────────────── */
html[data-theme] [id$="-stage"].min-h-\[90vh\] h5 {
  font-size: 30px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em;
  line-height: 1.25;
  background: linear-gradient(100deg, #ffffff 0%, #c7d2fe 30%, #a78bfa 50%, #c7d2fe 70%, #ffffff 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: djmp-rise 0.8s var(--djmp-ease) 0.25s both, djmp-sheen 6s linear 1s infinite;
}
html[data-theme] [id$="-stage"].min-h-\[90vh\] h5::after {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  -webkit-text-fill-color: rgba(226, 229, 255, 0.6);
  color: rgba(226, 229, 255, 0.6);
}
/* Authelia 的 <html lang> 永遠是 en，CSS 加的字沒辦法跟著語言切換，所以只放品牌字 */
html[data-theme] #first-factor-stage h5::after { content: "djmp.tw"; letter-spacing: 0.3em; text-transform: uppercase; font-size: 12px; }

/* ── 7. 登入表單：Passkey 放最上面當主角，其他依序浮現 ────────────────── */
html[data-theme] #form-login > .grid {
  gap: 16px !important;
}
html[data-theme] #form-login > .grid > div {
  animation: djmp-rise 0.7s var(--djmp-ease) both;
}
html[data-theme] #form-login > .grid > div:has(#passkey-sign-in-button) { order: -3; animation-delay: .35s; }
html[data-theme] #form-login > .grid > div:has(> div > span.uppercase)   { order: -2; animation-delay: .45s; }
html[data-theme] #form-login > .grid > div:has(#username-textfield)      { animation-delay: .52s; }
html[data-theme] #form-login > .grid > div:has(#password-textfield)      { animation-delay: .59s; }
html[data-theme] #form-login > .grid > div:has(#remember-checkbox)       { animation-delay: .66s; }
html[data-theme] #form-login > .grid > div:has(#sign-in-button)          { animation-delay: .73s; }
html[data-theme] #form-login > .grid > div:has(#reset-password-button)   { animation-delay: .80s; }

/* 輸入框 */
html[data-theme] #root input#username-textfield,
html[data-theme] #root input#password-textfield,
html[data-theme] #root input[type="password"],
html[data-theme] #root input[type="text"]:not([id*="hidden"]) {
  height: 56px;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.045) !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  color: #fff;
  font-size: 16px;
  transition: border-color .25s, box-shadow .3s var(--djmp-ease), background .25s;
}
html[data-theme] #root input#username-textfield:hover,
html[data-theme] #root input#password-textfield:hover {
  border-color: rgba(167, 139, 250, 0.45) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}
html[data-theme] #root input#username-textfield:focus,
html[data-theme] #root input#password-textfield:focus {
  border-color: rgba(139, 143, 255, 0.95) !important;
  background: rgba(91, 108, 255, 0.08) !important;
  box-shadow: 0 0 0 4px rgba(109, 116, 255, 0.18), 0 10px 30px -10px rgba(122, 92, 255, 0.6) !important;
}
html[data-theme] #root input:-webkit-autofill {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 1000px #121430 inset !important;
  caret-color: #fff;
}
html[data-theme] #root .relative > label {
  color: rgba(226, 229, 255, 0.55);
  letter-spacing: 0.02em;
}
html[data-theme] #root input:focus + label,
html[data-theme] #root .relative > label.text-primary {
  color: #a5adff !important;
}

/* 主要按鈕（登入、送出…）：漸層 + 每隔幾秒掃過一道光 */
html[data-theme] #root button.bg-primary {
  position: relative;
  overflow: hidden;
  height: 52px;
  border-radius: 16px !important;
  border: 0;
  background: var(--djmp-grad) !important;
  background-size: 200% 100% !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em;
  text-transform: none !important;
  box-shadow: 0 12px 30px -10px rgba(122, 92, 255, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform .25s var(--djmp-ease), box-shadow .3s, background-position .6s var(--djmp-ease);
}
html[data-theme] #root button.bg-primary::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40%;
  left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-20deg);
  animation: djmp-shine 3.8s ease-in-out 1.2s infinite;
}
html[data-theme] #root button.bg-primary:hover {
  background-position: 100% 0 !important;
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -12px rgba(122, 92, 255, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
html[data-theme] #root button.bg-primary:active {
  transform: translateY(0) scale(0.98);
}

/* Passkey 按鈕：主角。深色底 + 旋轉的彩色邊框 + 指紋圖示脈動 + 「推薦」標籤 */
html[data-theme] #root #passkey-sign-in-button {
  height: 60px;
  padding: 0 48px !important; /* 兩側留空間，右邊的 ⚡ 不會壓到文字 */
  letter-spacing: 0.02em;
  font-size: 17px !important;
  background:
    linear-gradient(var(--djmp-glass-strong), var(--djmp-glass-strong)) padding-box,
    conic-gradient(from var(--djmp-angle), #5b8cff, #b65cff, #22d3ee, #ec4899, #5b8cff) border-box !important;
  border: 2px solid transparent !important;
  animation: djmp-spin 5s linear infinite;
  box-shadow: 0 0 34px -6px rgba(122, 92, 255, 0.7), inset 0 0 24px rgba(91, 108, 255, 0.12);
}
html[data-theme] #root #passkey-sign-in-button::after {
  /* 不要掃光，改成右上角的「推薦」標籤 */
  content: "⚡";
  animation: none;
  position: absolute;
  left: auto;
  right: 12px;
  top: 50%;
  bottom: auto;
  width: auto;
  transform: translateY(-50%);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  background: rgba(34, 211, 238, 0.16);
  color: #67e8f9;
  border: 1px solid rgba(34, 211, 238, 0.35);
}
html[data-theme] #root #passkey-sign-in-button svg {
  width: 26px !important;
  height: 26px !important;
  animation: djmp-pulse 2.4s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(167, 139, 250, 0.9));
}
html[data-theme] #root #passkey-sign-in-button:hover {
  box-shadow: 0 0 50px -4px rgba(122, 92, 255, 0.95), inset 0 0 30px rgba(91, 108, 255, 0.2);
}

/* 「或」分隔線：兩側漸淡 */
html[data-theme] #form-login .grid > div:has(> div > span.uppercase) .bg-border {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(167, 139, 250, 0.45)) !important;
}
html[data-theme] #form-login .grid > div:has(> div > span.uppercase) .bg-border:last-child {
  background: linear-gradient(270deg, transparent, rgba(167, 139, 250, 0.45)) !important;
}
html[data-theme] #form-login span.uppercase {
  font-size: 12px;
  letter-spacing: 0.3em;
  color: rgba(226, 229, 255, 0.5);
}

/* 「7 天內保持登入」勾選框 */
html[data-theme] #root #remember-checkbox {
  width: 20px;
  height: 20px;
  border-radius: 7px;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.04);
  transition: all .25s var(--djmp-ease);
}
html[data-theme] #root #remember-checkbox[data-checked] {
  background: var(--djmp-grad);
  border-color: transparent;
  box-shadow: 0 0 14px rgba(122, 92, 255, 0.8);
  transform: scale(1.06);
}
html[data-theme] #root #remember-checkbox + input + label {
  font-size: 14px;
  font-weight: 500;
  color: rgba(226, 229, 255, 0.78);
}

/* 忘記密碼、管理設備之類的文字連結 */
html[data-theme] #root #reset-password-button,
html[data-theme] #root #register-link {
  font-size: 14px;
  color: rgba(165, 173, 255, 0.85);
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .35s var(--djmp-ease), color .25s;
}
html[data-theme] #root #reset-password-button:hover,
html[data-theme] #root #register-link:hover {
  color: #fff;
  background-size: 100% 1px;
}

/* 頁尾 */
html[data-theme] [id$="-stage"].min-h-\[90vh\] a[href*="authelia.com"] {
  margin-top: 10px;
  font-size: 11px !important;
  letter-spacing: 0.12em;
  color: rgba(226, 229, 255, 0.32) !important;
  animation: djmp-fade 1s ease 1s both;
}

/* ── 8. 第二步驟頁 ──────────────────────────────────────────────────────── */
/* 登出 / 切換帳號 / 其他驗證方式：小膠囊 */
html[data-theme] #second-factor-stage #logout-button,
html[data-theme] #second-factor-stage #switch-user-button,
html[data-theme] #second-factor-stage #methods-button {
  height: 32px;
  margin: 0 3px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 13px;
  text-transform: none;
  color: rgba(226, 229, 255, 0.8);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--djmp-line);
  transition: background .25s, color .25s, transform .25s var(--djmp-ease);
  animation: djmp-rise 0.6s var(--djmp-ease) 0.4s both;
}
html[data-theme] #second-factor-stage #logout-button:hover,
html[data-theme] #second-factor-stage #switch-user-button:hover,
html[data-theme] #second-factor-stage #methods-button:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  transform: translateY(-1px);
}
/* 驗證方式的內框 */
html[data-theme] #second-factor-stage .border.border-border {
  min-width: 0 !important;
  margin-top: 18px;
  border-radius: 22px !important;
  border-color: var(--djmp-line) !important;
  background: rgba(255, 255, 255, 0.03);
  padding: 26px 18px !important;
  animation: djmp-rise 0.8s var(--djmp-ease) 0.5s both;
}
html[data-theme] #second-factor-stage h6 {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #fff;
  letter-spacing: 0.04em;
}
/* OTP 六格 */
html[data-theme] #otp-input input {
  width: 46px !important;
  height: 56px !important;
  margin: 0 4px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: #fff !important;
  font-size: 24px !important;
  font-weight: 700;
  caret-color: #a5adff;
  transition: border-color .2s, box-shadow .25s var(--djmp-ease), transform .2s var(--djmp-ease);
}
html[data-theme] #otp-input input:focus {
  outline: none;
  border-color: #8b8fff !important;
  box-shadow: 0 0 0 4px rgba(109, 116, 255, 0.22), 0 10px 24px -8px rgba(122, 92, 255, 0.8);
  transform: translateY(-3px) scale(1.04);
}
/* 倒數圈圈：外框、底盤、剩餘時間的扇形 */
html[data-theme] #second-factor-stage svg:has(> circle) {
  filter: drop-shadow(0 0 10px rgba(122, 92, 255, 0.7));
}
html[data-theme] #second-factor-stage svg > circle:nth-of-type(1) { stroke: rgba(165, 173, 255, 0.55); }
html[data-theme] #second-factor-stage svg > circle:nth-of-type(2) { fill: rgba(255, 255, 255, 0.05); }
html[data-theme] #second-factor-stage svg > circle:nth-of-type(3) { stroke: #8b8fff; }

/* 驗證成功的畫面（打勾 + Authenticated），短暫出現後就跳轉 */
html[data-theme] #authenticated-stage {
  padding: 12px 0 4px;
  animation: djmp-pop 0.7s var(--djmp-ease) both;
}
html[data-theme] #authenticated-stage svg {
  width: 72px;
  height: 72px;
  filter: drop-shadow(0 0 18px rgba(34, 197, 94, 0.7));
  animation: djmp-breathe 2s ease-in-out infinite;
}
html[data-theme] #authenticated-stage p {
  margin-top: 6px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #86efac;
}

/* ── 9. 載入中畫面 ──────────────────────────────────────────────────────── */
html[data-theme] #root span.animate-scale-loader {
  width: 5px;
  border-radius: 3px;
  background: var(--djmp-grad) !important;
  box-shadow: 0 0 12px rgba(122, 92, 255, 0.8);
}

/* ── 10. 設定頁（Passkey / 驗證 App 管理）與對話框 ─────────────────────── */
html[data-theme] nav.bg-primary {
  background: rgba(10, 11, 22, 0.6) !important;
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid var(--djmp-line);
}
html[data-theme] main .bg-card {
  border-radius: 22px !important;
  border-color: var(--djmp-line) !important;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  animation: djmp-rise 0.7s var(--djmp-ease) both;
}
html[data-theme] main button.border:not(.bg-primary) {
  border-radius: 12px !important;
  border-color: rgba(139, 143, 255, 0.5) !important;
  color: #c7cbff !important;
  background: rgba(109, 116, 255, 0.1) !important;
  text-transform: none;
  transition: background .25s, transform .25s var(--djmp-ease);
}
html[data-theme] main button.border:not(.bg-primary):hover {
  background: rgba(109, 116, 255, 0.22) !important;
  transform: translateY(-1px);
}
html[data-theme] main .bg-card .bg-card {
  background: rgba(255, 255, 255, 0.04) !important;
  animation: none;
}
html[data-theme] [role="dialog"],
html[data-theme] [role="menu"] {
  background: var(--djmp-glass-strong) !important;
  border: 1px solid var(--djmp-line) !important;
  border-radius: 22px !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.9), 0 0 60px -20px rgba(110, 100, 255, 0.4) !important;
}

/* ── 11. 手機與電腦 ─────────────────────────────────────────────────────── */
@media (max-width: 420px) {
  /* 窄螢幕：拿掉 ⚡ 標籤，把空間還給文字 */
  html[data-theme] #root #passkey-sign-in-button { padding: 0 16px !important; font-size: 16px !important; }
  html[data-theme] #root #passkey-sign-in-button::after { display: none; }
}
@media (max-width: 520px) {
  html[data-theme] [id$="-stage"].min-h-\[90vh\] {
    padding: 8px 0 24px;
    align-items: flex-start !important;
    padding-top: max(7vh, 16px);
  }
  html[data-theme] [id$="-stage"].min-h-\[90vh\] > div {
    width: calc(100% - 24px) !important;
    padding: 30px 20px 18px !important;
    border-radius: 26px;
  }
  html[data-theme] [id$="-stage"].min-h-\[90vh\] h5 { font-size: 26px !important; }
  html[data-theme] #otp-input input { width: 40px !important; height: 52px !important; margin: 0 3px !important; }
  html[data-theme] body::after { height: 40vh; background-size: 48px 48px; }
}
@media (min-width: 1024px) {
  /* 大螢幕：卡片旁邊多一圈大光暈 */
  html[data-theme] [id$="-stage"].min-h-\[90vh\] > div {
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.10) inset,
      0 50px 140px -30px rgba(0, 0, 0, 0.9),
      0 0 140px -10px rgba(110, 100, 255, 0.4);
  }
}

/* 系統設定「減少動態效果」時，關掉所有動畫 */
@media (prefers-reduced-motion: reduce) {
  html[data-theme] *,
  html[data-theme] *::before,
  html[data-theme] *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ── 12. 動畫 ───────────────────────────────────────────────────────────── */
@keyframes djmp-aurora {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  33%  { transform: translate3d(4vmax, -3vmax, 0) rotate(25deg) scale(1.08); }
  66%  { transform: translate3d(-3vmax, 4vmax, 0) rotate(-15deg) scale(0.96); }
  100% { transform: translate3d(2vmax, 2vmax, 0) rotate(40deg) scale(1.05); }
}
@keyframes djmp-grid {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 64px, 0 0; }
}
@keyframes djmp-stars {
  from { transform: translateY(0); }
  to   { transform: translateY(-100vh); }
}
@keyframes djmp-twinkle {
  from { opacity: 0.35; }
  to   { opacity: 0.95; }
}
@keyframes djmp-spin {
  to { --djmp-angle: 360deg; }
}
@keyframes djmp-card-in {
  from { opacity: 0; transform: translateY(40px) scale(0.94); filter: blur(10px); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes djmp-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes djmp-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes djmp-pop {
  0%   { opacity: 0; transform: scale(0.4) rotate(-20deg); }
  60%  { opacity: 1; transform: scale(1.08) rotate(4deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes djmp-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-7px) rotate(-3deg); }
}
@keyframes djmp-breathe {
  0%, 100% { opacity: 0.55; transform: scale(0.9); }
  50%      { opacity: 1; transform: scale(1.18); }
}
@keyframes djmp-sheen {
  from { background-position: 100% 0; }
  to   { background-position: -150% 0; }
}
@keyframes djmp-shine {
  0%   { left: -60%; }
  45%  { left: 130%; }
  100% { left: 130%; }
}
@keyframes djmp-pulse {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50%      { transform: scale(1.15); opacity: 1; }
}