/* === 預設：紅底白字，閃紅光 === */
.btn-red {
  background-color: #dc3545;
  color: #fff;
  border: 1px solid #dc3545;
}
.btn-red:hover,
.btn-red:focus {
  background-color: #bb2d3b;
  border-color: #b02a37;
  color: #fff;
}
/* 紅色閃動 */
@keyframes pulseRed {
  0%   { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.9); }
  50%  { box-shadow: 0 0 0 10px rgba(220, 53, 69, 0); }
  100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.9); }
}
.pulse-red { animation: pulseRed 1.5s infinite; }

/* === 暗色/護眼主題：白底紅字，閃白光 === */
html[data-theme='dark'] .btn-red,
body.theme-dark .btn-red {
  background-color: #fff !important;
  color: #dc3545 !important;
  border: 1px solid #dc3545 !important;
}
html[data-theme='dark'] .btn-red:hover,
body.theme-dark .btn-red:hover {
  background-color: #f8f9fa !important;
  color: #bb2d3b !important;
  border-color: #bb2d3b !important;
}
/* 白色閃動 */
html[data-theme='dark'] .pulse-red,
body.theme-dark .pulse-red {
  animation: pulseWhite 1.5s infinite !important;
}
@keyframes pulseWhite {
  0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.9); }
  50%  { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.9); }
}
/* 桌機以上：hover 展開 dropdown；同時讓箭頭有轉動效果 */

@media (min-width: 992px) {
  .navbar .dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;           /* 與 Bootstrap 對齊 */
  }
  .navbar .dropdown .dropdown-toggle::after {
    transition: transform .2s ease;
  }
  .navbar .dropdown:hover .dropdown-toggle::after,
  .navbar .dropdown.show  .dropdown-toggle::after {
    transform: rotate(180deg);
  }
}

html[data-theme="light"] .navbar,
body.theme-light .navbar {
  background:
    radial-gradient(1000px 400px at 80% -20%, rgba(6,182,212,.12), transparent 60%),
    radial-gradient(800px 400px at -10% 0%, rgba(37,99,235,.10), transparent 60%),
    linear-gradient(180deg, #ffffff, #f7f9fb 80%) !important;
  border-bottom: 1px solid var(--border) !important;
}

html[data-theme="dark"] .navbar,
body.theme-dark .navbar {
  background:
    radial-gradient(1000px 400px at 80% -20%, rgba(34,211,238,.10), transparent 60%),
    radial-gradient(800px 400px at -10% 0%, rgba(59,130,246,.10), transparent 60%),
    linear-gradient(180deg, #0b1220, #0f172a 80%) !important;
  border-bottom: 1px solid var(--border) !important;
}

.navbar {
  background-clip: padding-box !important;
  backdrop-filter: saturate(140%) blur(8px);
}