/* Patrick Star cartoon skin for Roundcube */
:root {
  --patrick-pink: #ff9999;
  --patrick-pink-soft: #ffb6c1;
  --patrick-pink-deep: #ff7f7f;
  --patrick-coral: #ff8fb1;
  --patrick-sea: #7dd9eb;
  --patrick-sea-deep: #4cbdd7;
  --patrick-sand: #fff3c6;
  --patrick-leaf: #8cd36d;
  --patrick-leaf-deep: #6fbe56;
  --patrick-purple: #8f58c7;
  --patrick-ink: #6e3f57;
  --patrick-white: rgba(255, 255, 255, 0.82);
  --patrick-shadow: 0 18px 40px rgba(145, 87, 130, 0.18);
  --patrick-font: "Baloo 2", "Nunito", "Arial Rounded MT Bold", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

html,
body {
  min-height: 100%;
}

body {
  font-family: var(--patrick-font) !important;
  color: var(--patrick-ink) !important;
  background:
    radial-gradient(circle at 14% 16%, rgba(255, 255, 255, 0.45) 0 2%, transparent 2.2%),
    radial-gradient(circle at 83% 18%, rgba(255, 255, 255, 0.35) 0 2.6%, transparent 2.8%),
    radial-gradient(circle at 72% 78%, rgba(255, 255, 255, 0.3) 0 2.2%, transparent 2.4%),
    radial-gradient(circle at 20% 78%, rgba(255, 255, 255, 0.26) 0 1.8%, transparent 2%),
    radial-gradient(circle at 18% 48%, rgba(143, 88, 199, 0.34) 0 2.3%, transparent 2.5%),
    radial-gradient(circle at 82% 38%, rgba(143, 88, 199, 0.28) 0 2%, transparent 2.2%),
    linear-gradient(180deg, #8fe6f4 0%, #72d8e8 48%, #5ec9e3 100%) !important;
  position: relative;
  overflow-x: hidden;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: auto;
  pointer-events: none;
  z-index: 0;
}

body::before {
  top: 72px;
  left: -60px;
  width: 240px;
  height: 240px;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.5) 0 22%, transparent 24%),
    radial-gradient(circle, rgba(255, 255, 255, 0.36) 0 8%, transparent 10%),
    radial-gradient(circle at 35% 32%, rgba(255, 255, 255, 0.3) 0 7%, transparent 9%);
  filter: blur(1px);
  opacity: 0.85;
}

body::after {
  right: -10px;
  bottom: 20px;
  width: 260px;
  height: 260px;
  border-radius: 42% 58% 60% 40%;
  background:
    radial-gradient(circle at center, rgba(140, 211, 109, 0.85) 0 24%, transparent 25%),
    radial-gradient(circle at 50% 22%, rgba(143, 88, 199, 0.9) 0 10%, transparent 11%),
    radial-gradient(circle at 23% 52%, rgba(143, 88, 199, 0.9) 0 10%, transparent 11%),
    radial-gradient(circle at 77% 52%, rgba(143, 88, 199, 0.9) 0 10%, transparent 11%),
    radial-gradient(circle at 34% 82%, rgba(143, 88, 199, 0.9) 0 10%, transparent 11%),
    radial-gradient(circle at 66% 82%, rgba(143, 88, 199, 0.9) 0 10%, transparent 11%);
  opacity: 0.4;
  transform: rotate(-16deg);
}

#layout,
#layout-content,
#layout-list,
#layout-sidebar {
  position: relative;
  z-index: 1;
}

#layout {
  padding: 18px;
}

.patrick-shell {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 8% 26%, rgba(255, 255, 255, 0.18) 0 1.6%, transparent 1.8%),
    radial-gradient(circle at 90% 32%, rgba(255, 255, 255, 0.14) 0 1.2%, transparent 1.4%),
    radial-gradient(circle at 84% 76%, rgba(255, 255, 255, 0.18) 0 1.8%, transparent 2%),
    radial-gradient(circle at 16% 82%, rgba(255, 255, 255, 0.14) 0 1.2%, transparent 1.4%);
}

#layout-menu,
#layout-sidebar,
#layout-list,
#layout-content,
.boxcontent,
.iframe-wrapper,
.popupmenu,
.menu.toolbar,
.searchbar,
.listing tbody tr td,
.content,
.formcontent,
.dialog,
.ui-dialog .ui-dialog-content {
  border-radius: 24px !important;
}

#layout-menu,
.menu.toolbar,
.header,
#messagelist-header,
#layout-content > .header,
#layout-sidebar > .header {
  background:
    linear-gradient(135deg, rgba(255, 249, 253, 0.94), rgba(255, 214, 230, 0.94)),
    linear-gradient(90deg, var(--patrick-pink), var(--patrick-pink-soft), var(--patrick-coral)) !important;
  box-shadow: var(--patrick-shadow) !important;
  border: 3px solid rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(10px);
}

#layout-menu {
  overflow: hidden;
}

#layout-menu::before {
  content: "Patrick Mail";
  position: absolute;
  top: 10px;
  right: 18px;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(110, 63, 87, 0.72);
  font-weight: 800;
}

#layout-sidebar {
  background:
    radial-gradient(circle at 50% 16%, rgba(143, 88, 199, 0.23) 0 7%, transparent 7.5%),
    radial-gradient(circle at 23% 40%, rgba(143, 88, 199, 0.18) 0 6.5%, transparent 7%),
    radial-gradient(circle at 74% 68%, rgba(143, 88, 199, 0.16) 0 6%, transparent 6.5%),
    linear-gradient(180deg, rgba(255, 246, 204, 0.95), rgba(216, 246, 179, 0.96)) !important;
  box-shadow: var(--patrick-shadow) !important;
  border: 3px solid rgba(255, 255, 255, 0.48) !important;
  overflow: hidden;
}

#layout-sidebar::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 18px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--patrick-leaf), var(--patrick-purple), var(--patrick-leaf));
  opacity: 0.42;
}

#layout-list,
#layout-content,
.boxcontent,
.content,
.formcontent,
.dialog,
.ui-dialog .ui-dialog-content {
  background: var(--patrick-white) !important;
  box-shadow: var(--patrick-shadow) !important;
  border: 3px solid rgba(255, 255, 255, 0.52) !important;
  backdrop-filter: blur(10px);
}

.header-title,
h1,
h2,
h3,
.listing thead th,
.boxtitle,
.username {
  color: var(--patrick-ink) !important;
  font-family: var(--patrick-font) !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

a,
.records-table tr td a,
.listing li a {
  color: #8f4e86 !important;
}

a:hover {
  color: #7a3d71 !important;
}

button,
.btn,
a.button,
.button,
input.button,
.toolbar a,
.listing .flag span.flagged::before {
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease !important;
}

button,
.btn,
a.button,
input.button,
.toolbar a.button,
.toolbar .button,
.popupmenu a,
.listing .focused > td:first-child::before {
  border-radius: 999px !important;
}

button,
.btn,
a.button,
input.button,
.toolbar a.button,
.toolbar .button {
  background: linear-gradient(180deg, var(--patrick-pink-soft), var(--patrick-pink)) !important;
  color: #fff !important;
  border: 2px solid rgba(255, 127, 127, 0.85) !important;
  box-shadow: 0 10px 18px rgba(255, 127, 145, 0.24) !important;
  font-weight: 800 !important;
}

button:hover,
.btn:hover,
a.button:hover,
input.button:hover,
.toolbar a.button:hover,
.toolbar .button:hover {
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 14px 24px rgba(255, 127, 145, 0.36) !important;
  background: linear-gradient(180deg, #ffcad7, #ff8f9b) !important;
}

button:focus,
.btn:focus,
a.button:focus,
input.button:focus,
input:focus,
textarea:focus,
select:focus {
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(125, 217, 235, 0.35) !important;
}

input,
textarea,
select,
.custom-select,
.form-control,
.searchbar input {
  font-family: var(--patrick-font) !important;
  border-radius: 18px !important;
  border: 2px solid rgba(255, 182, 193, 0.9) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: var(--patrick-ink) !important;
}

.searchbar {
  background: rgba(255, 255, 255, 0.72) !important;
  border: 2px solid rgba(255, 255, 255, 0.52) !important;
  box-shadow: var(--patrick-shadow) !important;
  backdrop-filter: blur(8px);
}

#folderlist-content,
#messagelist-content,
.scroller {
  scrollbar-width: thin;
  scrollbar-color: rgba(143, 88, 199, 0.6) rgba(255, 255, 255, 0.4);
}

#folderlist-content::-webkit-scrollbar,
#messagelist-content::-webkit-scrollbar,
.scroller::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

#folderlist-content::-webkit-scrollbar-thumb,
#messagelist-content::-webkit-scrollbar-thumb,
.scroller::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(143, 88, 199, 0.86), rgba(255, 153, 153, 0.86));
  border-radius: 999px;
}

.listing tbody tr,
ul.treelist li,
.listing li {
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease !important;
}

.listing tbody tr:hover,
ul.treelist li:hover,
.listing li:hover {
  transform: translateX(3px);
  background: rgba(255, 245, 250, 0.88) !important;
}

.listing tbody tr.selected,
.listing li.selected,
ul.treelist li.selected {
  background: linear-gradient(90deg, rgba(255, 182, 193, 0.42), rgba(125, 217, 235, 0.42)) !important;
  box-shadow: inset 4px 0 0 var(--patrick-purple);
}

.listing tr.unfocused td,
.listing tr.selected td {
  color: var(--patrick-ink) !important;
}

.listing .unread td,
.treelist .unread > a {
  font-weight: 800 !important;
}

.listing .unread td:first-child::after,
.treelist .unread > a::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 8px;
  border-radius: 50%;
  background: var(--patrick-pink-deep);
  box-shadow: 0 0 0 6px rgba(255, 127, 127, 0.16);
  animation: patrick-pop 1.5s ease-in-out infinite;
}

@keyframes patrick-pop {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.2);
    opacity: 0.7;
  }
}

#messagestack div,
.notification,
.errors,
.confirmation {
  border-radius: 18px !important;
  border: 2px solid rgba(255, 255, 255, 0.55) !important;
  box-shadow: var(--patrick-shadow) !important;
}

.notification.info,
.confirmation {
  background: rgba(125, 217, 235, 0.92) !important;
  color: #195467 !important;
}

.notification.warning {
  background: rgba(255, 241, 183, 0.94) !important;
  color: #7b5a0f !important;
}

.notification.error,
.errors {
  background: rgba(255, 199, 208, 0.94) !important;
  color: #842a43 !important;
}

#layout-content > .header::after,
#messagelist-header::after,
#layout-sidebar > .header::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 12px;
  width: 54px;
  height: 24px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 14px 50%, rgba(255, 255, 255, 0.88) 0 5px, transparent 6px),
    radial-gradient(circle at 32px 50%, rgba(255, 255, 255, 0.68) 0 4px, transparent 5px),
    radial-gradient(circle at 46px 50%, rgba(255, 255, 255, 0.52) 0 3px, transparent 4px);
  opacity: 0.8;
}

#taskmenu a,
#taskmenu .button,
#mailboxlist li a,
.toolbarmenu a {
  font-weight: 700 !important;
}

#layout-sidebar .footer,
#layout-sidebar .header,
#messagelist-header,
#layout-content > .header {
  position: relative;
}

#mailboxlist li.mailbox a::before,
#mailboxlist li.mailbox .name::before {
  content: "★";
  margin-right: 8px;
  color: var(--patrick-purple);
  opacity: 0.82;
}

.popupmenu,
.toolbarmenu {
  background: rgba(255, 249, 253, 0.96) !important;
  border: 2px solid rgba(255, 182, 193, 0.9) !important;
}

.popupmenu ul li a:hover,
.toolbarmenu a:hover {
  background: rgba(255, 182, 193, 0.24) !important;
}

iframe,
#messagecontframe {
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.94) !important;
}

@media (max-width: 900px) {
  #layout {
    padding: 10px;
  }

  body::before,
  body::after,
  #layout-menu::before,
  #layout-content > .header::after,
  #messagelist-header::after,
  #layout-sidebar > .header::after {
    display: none;
  }
}

@media (max-width: 640px) {
  #layout-menu,
  #layout-sidebar,
  #layout-list,
  #layout-content,
  .boxcontent,
  .content,
  .searchbar {
    border-radius: 18px !important;
  }

  .header-title,
  h1,
  h2,
  h3 {
    font-size: 1rem !important;
  }
}
/* Patrick Star - Floating Animations */
/* 漂浮气泡和星星动画效果 */

/* ========== 漂浮气泡动画 ========== */
@keyframes patrick-float-bubble {
  0% {
    transform: translateY(100vh) scale(0.5) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.6;
  }
  90% {
    opacity: 0.6;
  }
  100% {
    transform: translateY(-100px) scale(1) rotate(360deg);
    opacity: 0;
  }
}

@keyframes patrick-float-bubble-slow {
  0% {
    transform: translateY(100vh) translateX(0) scale(0.3);
    opacity: 0;
  }
  15% {
    opacity: 0.4;
  }
  85% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(-150px) translateX(50px) scale(0.8);
    opacity: 0;
  }
}

/* ========== 闪烁星星动画 ========== */
@keyframes patrick-twinkle {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.2) rotate(180deg);
  }
}

@keyframes patrick-star-float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-10px) rotate(5deg);
  }
  50% {
    transform: translateY(-5px) rotate(0deg);
  }
  75% {
    transform: translateY(-15px) rotate(-5deg);
  }
}

/* ========== 水母漂浮动画 ========== */
@keyframes patrick-jellyfish {
  0%, 100% {
    transform: translateY(0) scaleY(1);
  }
  50% {
    transform: translateY(-20px) scaleY(0.95);
  }
}

/* ========== 气泡容器 ========== */
.patrick-bubbles-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* 气泡元素 */
.patrick-bubble {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, 
    rgba(255, 255, 255, 0.8) 0%, 
    rgba(255, 182, 193, 0.4) 40%, 
    rgba(125, 217, 235, 0.2) 100%);
  box-shadow: 
    inset -2px -2px 6px rgba(255, 255, 255, 0.5),
    inset 2px 2px 6px rgba(255, 182, 193, 0.3),
    0 0 10px rgba(255, 255, 255, 0.3);
  animation: patrick-float-bubble 15s ease-in-out infinite;
}

.patrick-bubble:nth-child(1) {
  width: 20px;
  height: 20px;
  left: 10%;
  animation-duration: 12s;
  animation-delay: 0s;
}

.patrick-bubble:nth-child(2) {
  width: 15px;
  height: 15px;
  left: 20%;
  animation-duration: 18s;
  animation-delay: 2s;
}

.patrick-bubble:nth-child(3) {
  width: 25px;
  height: 25px;
  left: 35%;
  animation-duration: 14s;
  animation-delay: 4s;
}

.patrick-bubble:nth-child(4) {
  width: 12px;
  height: 12px;
  left: 50%;
  animation-duration: 20s;
  animation-delay: 1s;
}

.patrick-bubble:nth-child(5) {
  width: 18px;
  height: 18px;
  left: 65%;
  animation-duration: 16s;
  animation-delay: 3s;
}

.patrick-bubble:nth-child(6) {
  width: 22px;
  height: 22px;
  left: 80%;
  animation-duration: 13s;
  animation-delay: 5s;
}

.patrick-bubble:nth-child(7) {
  width: 14px;
  height: 14px;
  left: 90%;
  animation-duration: 19s;
  animation-delay: 2.5s;
}

.patrick-bubble:nth-child(8) {
  width: 16px;
  height: 16px;
  left: 5%;
  animation-duration: 17s;
  animation-delay: 6s;
}

/* 慢速漂浮气泡 */
.patrick-bubble-slow {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, 
    rgba(255, 255, 255, 0.6) 0%, 
    rgba(143, 88, 199, 0.2) 50%, 
    rgba(140, 211, 109, 0.1) 100%);
  animation: patrick-float-bubble-slow 25s ease-in-out infinite;
}

.patrick-bubble-slow:nth-child(9) {
  width: 30px;
  height: 30px;
  left: 15%;
  animation-duration: 22s;
  animation-delay: 0s;
}

.patrick-bubble-slow:nth-child(10) {
  width: 20px;
  height: 20px;
  left: 45%;
  animation-duration: 28s;
  animation-delay: 8s;
}

.patrick-bubble-slow:nth-child(11) {
  width: 35px;
  height: 35px;
  left: 75%;
  animation-duration: 24s;
  animation-delay: 4s;
}

/* ========== 星星容器 ========== */
.patrick-stars-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* 星星元素 */
.patrick-star {
  position: absolute;
  width: 20px;
  height: 20px;
  animation: patrick-twinkle 3s ease-in-out infinite, 
             patrick-star-float 6s ease-in-out infinite;
}

.patrick-star::before {
  content: "★";
  font-size: 16px;
  color: rgba(255, 215, 0, 0.8);
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
}

.patrick-star:nth-child(1) {
  top: 15%;
  left: 8%;
  animation-delay: 0s, 0s;
}

.patrick-star:nth-child(2) {
  top: 25%;
  left: 85%;
  animation-delay: 0.5s, 1s;
}

.patrick-star:nth-child(3) {
  top: 45%;
  left: 12%;
  animation-delay: 1s, 2s;
}

.patrick-star:nth-child(4) {
  top: 60%;
  left: 90%;
  animation-delay: 1.5s, 0.5s;
}

.patrick-star:nth-child(5) {
  top: 75%;
  left: 5%;
  animation-delay: 2s, 1.5s;
}

.patrick-star:nth-child(6) {
  top: 35%;
  left: 92%;
  animation-delay: 2.5s, 2.5s;
}

.patrick-star:nth-child(7) {
  top: 85%;
  left: 88%;
  animation-delay: 0.3s, 3s;
}

.patrick-star:nth-child(8) {
  top: 10%;
  left: 70%;
  animation-delay: 1.2s, 0.8s;
}

/* 紫色海星 */
.patrick-star-purple::before {
  content: "★";
  color: rgba(143, 88, 199, 0.7);
  text-shadow: 0 0 8px rgba(143, 88, 199, 0.5);
}

/* ========== 水母装饰 ========== */
.patrick-jellyfish {
  position: fixed;
  width: 40px;
  height: 50px;
  pointer-events: none;
  z-index: 0;
  animation: patrick-jellyfish 4s ease-in-out infinite;
  opacity: 0.4;
}

.patrick-jellyfish::before {
  content: "";
  position: absolute;
  width: 30px;
  height: 25px;
  background: radial-gradient(ellipse at center, 
    rgba(255, 182, 193, 0.6) 0%, 
    rgba(255, 182, 193, 0.2) 70%, 
    transparent 100%);
  border-radius: 50% 50% 40% 40%;
  top: 0;
  left: 5px;
}

.patrick-jellyfish::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 20px;
  background: linear-gradient(to bottom, 
    rgba(255, 182, 193, 0.5), 
    transparent);
  bottom: 0;
  left: 14px;
  box-shadow: 
    6px -5px 0 rgba(255, 182, 193, 0.4),
    12px -3px 0 rgba(255, 182, 193, 0.3);
}

.patrick-jellyfish:nth-child(1) {
  top: 20%;
  right: 5%;
  animation-delay: 0s;
}

.patrick-jellyfish:nth-child(2) {
  top: 60%;
  left: 3%;
  animation-delay: 2s;
  transform: scale(0.8);
}

/* ========== 按钮点击波纹效果 ========== */
@keyframes patrick-ripple {
  0% {
    transform: scale(0);
    opacity: 0.5;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

button, .btn, a.button, input.button {
  position: relative;
  overflow: hidden;
}

button::after, .btn::after, a.button::after, input.button::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, transparent 70%);
  border-radius: 50%;
  transform: scale(0);
  opacity: 0;
  pointer-events: none;
}

button:active::after, .btn:active::after, a.button:active::after, input.button:active::after {
  animation: patrick-ripple 0.6s ease-out;
}

/* ========== 邮件列表项滑入动画 ========== */
@keyframes patrick-slide-in {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.listing tbody tr {
  animation: patrick-slide-in 0.3s ease-out;
}

/* ========== 加载动画 ========== */
@keyframes patrick-loading {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.8);
    opacity: 0.6;
  }
}

.loading::after,
.ui-dialog .ui-dialog-titlebar::after {
  content: "🫧";
  display: inline-block;
  animation: patrick-loading 1s ease-in-out infinite;
  margin-left: 8px;
}

/* ========== 成功提示动画 ========== */
@keyframes patrick-success-pop {
  0% {
    transform: scale(0) rotate(-180deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.2) rotate(10deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

.confirmation::before,
.notification.info::before {
  content: "✨";
  display: inline-block;
  margin-right: 6px;
  animation: patrick-success-pop 0.5s ease-out;
}

/* ========== 移动端优化 ========== */
@media (max-width: 900px) {
  .patrick-bubbles-container,
  .patrick-stars-container,
  .patrick-jellyfish {
    display: none;
  }
}

/* ========== 减少动画偏好支持 ========== */
@media (prefers-reduced-motion: reduce) {
  .patrick-bubble,
  .patrick-bubble-slow,
  .patrick-star,
  .patrick-jellyfish,
  .listing tbody tr,
  button::after,
  .btn::after,
  a.button::after,
  input.button::after {
    animation: none !important;
  }
}
/* 派大星元素 */
.toolbar::before { content: "🦀 "; }
.header::after { content: " 🌟"; }
/* 按钮交互优化 */
button:active { transform: scale(0.95) !important; }
.btn:active { box-shadow: inset 0 2px 10px rgba(0,0,0,0.2) !important; }
/* 邮件列表优化 */
#messagelist tr { border-bottom: 1px solid #FFB6C1 !important; }
#messagelist tr:hover { background: linear-gradient(90deg, rgba(255,182,193,0.3), transparent) !important; }
/* 加载动画优化 */
.loading::before { content: "🦀 "; animation: spin 1s linear infinite; }

/* ========== 派大星优化 2026-04-17 ========== */

/* 按钮悬停气泡效果 */
@keyframes patrick-btn-bubble {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.5) translateY(-10px); opacity: 0; }
}

button:hover::before, .btn:hover::before, a.button:hover::before {
  content: "🫧";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  animation: patrick-btn-bubble 1.5s ease-in-out infinite;
}

/* 发送按钮特殊效果 */
button.send, .btn.send, input.button[value*="发送"], input.button[value*="Send"] {
  background: linear-gradient(135deg, #8cd36d 0%, #6fbe56 100%) !important;
  box-shadow: 0 8px 20px rgba(140, 211, 109, 0.4) !important;
}

button.send:hover, .btn.send:hover {
  transform: translateY(-3px) scale(1.05) !important;
  box-shadow: 0 12px 28px rgba(140, 211, 109, 0.5) !important;
}

button.send::after {
  content: "✉️" !important;
  margin-left: 6px;
}

/* 删除按钮警告效果 */
button.delete, .btn.delete, input.button[value*="删除"], input.button[value*="Delete"] {
  background: linear-gradient(135deg, #ff8f9b 0%, #ff6b7a 100%) !important;
  border-color: #ff6b7a !important;
}

button.delete:hover {
  animation: patrick-shake 0.4s ease-in-out !important;
}

@keyframes patrick-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-3px); }
  40% { transform: translateX(3px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

/* 写邮件按钮派大星装饰 */
#taskmenu a.compose::before {
  content: "📝" !important;
  margin-right: 6px;
}

/* 收件箱图标优化 */
#mailboxlist li.mailbox.inbox a::before {
  content: "📥" !important;
}

/* 已发送文件夹图标 */
#mailboxlist li.mailbox.sent a::before {
  content: "📤" !important;
}

/* 草稿箱图标 */
#mailboxlist li.mailbox.drafts a::before {
  content: "📝" !important;
}

/* 垃圾邮件图标 */
#mailboxlist li.mailbox.spam a::before,
#mailboxlist li.mailbox.junk a::before {
  content: "🗑️" !important;
}

/* 回复按钮效果 */
.toolbar a.reply::before, .toolbar a.reply-all::before {
  content: "↩️ " !important;
}

/* 转发按钮效果 */
.toolbar a.forward::before {
  content: "➡️ " !important;
}

/* 标记已读/未读效果 */
.toolbar a.mark::before {
  content: "🔖 " !important;
}

/* 更多操作按钮 */
.toolbar a.more::before {
  content: "✨ " !important;
}

/* 搜索框聚焦效果 */
.searchbar input:focus {
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 0 0 4px rgba(143, 88, 199, 0.25), 0 8px 24px rgba(143, 88, 199, 0.15) !important;
}

.searchbar input:focus::placeholder {
  color: transparent !important;
}

/* 搜索按钮 */
.searchbar a.button.search::before {
  content: "🔍" !important;
}

/* 页面加载派大星欢迎动画 */
@keyframes patrick-welcome {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

#layout {
  animation: patrick-welcome 0.6s ease-out !important;
}

/* 通知消息派大星装饰 */
#messagestack div::before {
  margin-right: 8px;
}

#messagestack div.info::before {
  content: "🦀" !important;
}

#messagestack div.success::before,
#messagestack div.confirmation::before {
  content: "✨" !important;
}

#messagestack div.warning::before {
  content: "⚠️" !important;
}

#messagestack div.error::before {
  content: "💨" !important;
}

/* 侧边栏文件夹hover星星效果 */
#mailboxlist li:hover a::after {
  content: "⭐";
  margin-left: auto;
  opacity: 0.7;
  animation: patrick-twinkle 2s ease-in-out infinite;
}

/* 邮件已读/未读标记增强 */
.listing .unread td:first-child::before {
  content: "💌" !important;
  margin-right: 4px;
}

.listing tr:not(.unread) td:first-child::before {
  content: "📧" !important;
  margin-right: 4px;
  opacity: 0.6;
}

/* 邮件列表偶数行斑马纹 */
.listing tbody tr:nth-child(even) {
  background: rgba(255, 245, 250, 0.4) !important;
}

/* 工具提示派大星风格 */
.tooltip, .ui-tooltip {
  background: linear-gradient(135deg, #ff9999, #ffb6c1) !important;
  border-radius: 12px !important;
  border: 2px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 8px 20px rgba(143, 88, 199, 0.2) !important;
  color: white !important;
  font-weight: 700 !important;
}

/* 对话框标题派大星装饰 */
.ui-dialog .ui-dialog-title::before {
  content: "🦀 ";
}

/* 确认对话框 */
.ui-dialog[aria-labelledby*="confirm"] .ui-dialog-title::before {
  content: "🤔 ";
}

/* 错误对话框 */
.ui-dialog[aria-labelledby*="error"] .ui-dialog-title::before {
  content: "😅 ";
}

/* 成功对话框 */
.ui-dialog[aria-labelledby*="success"] .ui-dialog-title::before {
  content: "🎉 ";
}
/* 对比度优化 */
.message-row { border-left: 4px solid #FF1493 !important; }
.unread { font-weight: bold !important; color: #FF1493 !important; }

/* ========== 派大星对比度优化 2026-04-17 02:54 UTC+8 ========== */

/* 邮件列表行对比度增强 */
.listing tbody tr {
  border-left: 4px solid transparent !important;
  transition: border-left-color 0.2s ease, background 0.2s ease !important;
}

/* 未读邮件左侧强调边框 */
.listing tr.unread {
  border-left-color: #FF1493 !important;
  background: rgba(255, 230, 240, 0.6) !important;
}

/* 已读邮件左侧边框 */
.listing tr:not(.unread) {
  border-left-color: #FFB6C1 !important;
}

/* 邮件主题颜色优化 - 更深的紫色 */
.listing .subject a,
.listing .subject span {
  color: #6e3f57 !important;
  font-weight: 600 !important;
}

/* 未读邮件主题加粗 */
.listing tr.unread .subject a,
.listing tr.unread .subject span {
  color: #4a2a3a !important;
  font-weight: 800 !important;
}

/* 发件人颜色优化 */
.listing .from,
.listing .from a {
  color: #8f58c7 !important;
  font-weight: 700 !important;
}

/* 日期颜色优化 - 更深更易读 */
.listing .date {
  color: #6e3f57 !important;
  font-weight: 500 !important;
  opacity: 0.85 !important;
}

/* 选中邮件对比度 */
.listing tbody tr.selected {
  background: linear-gradient(90deg, rgba(255, 105, 180, 0.25), rgba(125, 217, 235, 0.25)) !important;
  border-left-color: #8f58c7 !important;
  box-shadow: inset 4px 0 0 #8f58c7, 0 2px 8px rgba(143, 88, 199, 0.12) !important;
}

/* 悬停状态对比度 */
.listing tbody tr:hover {
  background: rgba(255, 230, 240, 0.9) !important;
  border-left-color: #FF69B4 !important;
}

/* 邮件列表头部对比度 */
#messagelist-header th {
  background: linear-gradient(180deg, rgba(255, 249, 253, 0.98), rgba(255, 230, 240, 0.98)) !important;
  color: #4a2a3a !important;
  border-bottom: 2px solid #FFB6C1 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

/* 侧边栏文件夹列表对比度 */
#mailboxlist li a {
  color: #6e3f57 !important;
  font-weight: 600 !important;
}

#mailboxlist li a:hover {
  color: #4a2a3a !important;
  background: rgba(255, 230, 240, 0.8) !important;
}

/* 未读邮件数量徽章 */
#mailboxlist li .unreadcount {
  background: linear-gradient(135deg, #FF69B4, #FF1493) !important;
  color: white !important;
  font-weight: 800 !important;
  padding: 2px 8px !important;
  border-radius: 12px !important;
  font-size: 12px !important;
  box-shadow: 0 2px 6px rgba(255, 20, 147, 0.4) !important;
}

/* 搜索结果高亮 */
.listing .search .subject a {
  background: rgba(255, 215, 0, 0.3) !important;
  padding: 0 4px !important;
  border-radius: 4px !important;
}

/* 标记/已标记邮件 */
.listing tr.flagged {
  background: rgba(255, 182, 193, 0.4) !important;
}

.listing tr.flagged::before {
  content: "⭐" !important;
  position: absolute !important;
  left: -20px !important;
}

/* 附件图标增强 */
.listing .attachment span::before {
  content: "📎" !important;
  color: #8f58c7 !important;
}

/* 回复/转发状态图标增强 */
.listing .status .replied::before {
  content: "↩️" !important;
}

.listing .status .forwarded::before {
  content: "➡️" !important;
}

/* 文本输入框焦点状态对比度 */
input:focus,
textarea:focus,
select:focus {
  border-color: #FF1493 !important;
  box-shadow: 0 0 0 4px rgba(255, 20, 147, 0.2), 0 4px 12px rgba(255, 20, 147, 0.15) !important;
}

/* 按钮焦点状态 */
button:focus,
.btn:focus,
a.button:focus {
  border-color: #FF69B4 !important;
  box-shadow: 0 0 0 4px rgba(255, 105, 180, 0.3), 0 4px 12px rgba(255, 105, 180, 0.2) !important;
}

/* 链接悬停状态 */
a:hover {
  color: #FF1493 !important;
  text-decoration: underline !important;
}

/* 内容区域文字对比度 */
#layout-content,
.boxcontent,
.content {
  color: #4a2a3a !important;
}

/* 标题对比度 */
h1, h2, h3, h4, h5, h6,
.header-title,
.boxtitle {
  color: #3a1a2a !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

/* 小号文字对比度 */
small, .small, .text-muted {
  color: #6e3f57 !important;
  opacity: 0.85 !important;
}

/* 帮助文本对比度 */
.helptext,
.help-block {
  color: #6e3f57 !important;
  font-size: 13px !important;
}

/* 占位符文字对比度 */
::placeholder {
  color: #8f58c7 !important;
  opacity: 0.5 !important;
}

/* 禁用状态 */
button:disabled,
.btn:disabled,
input:disabled,
textarea:disabled,
select:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  color: #999 !important;
}

/* 错误状态对比度 */
.has-error input,
.has-error textarea,
.has-error select {
  border-color: #ff4757 !important;
  background: rgba(255, 71, 87, 0.08) !important;
}

.has-error .help-block {
  color: #ff4757 !important;
}

/* 成功状态对比度 */
.has-success input,
.has-success textarea,
.has-success select {
  border-color: #2ed573 !important;
  background: rgba(46, 213, 115, 0.08) !important;
}

/* 警告状态对比度 */
.has-warning input,
.has-warning textarea,
.has-warning select {
  border-color: #ffa502 !important;
  background: rgba(255, 165, 2, 0.08) !important;
}

/* 分页导航对比度 */
.pagination li a {
  color: #6e3f57 !important;
  font-weight: 600 !important;
}

.pagination li.active a {
  background: linear-gradient(135deg, #FF69B4, #FF1493) !important;
  color: white !important;
  border-color: #FF1493 !important;
}

/* 表格对比度 */
table.records-table th {
  background: rgba(255, 230, 240, 0.95) !important;
  color: #4a2a3a !important;
  font-weight: 800 !important;
  border-bottom: 2px solid #FFB6C1 !important;
}

table.records-table td {
  border-bottom: 1px solid rgba(255, 182, 193, 0.4) !important;
}

/* 对话框内容对比度 */
.dialog,
.ui-dialog-content {
  color: #4a2a3a !important;
}

.ui-dialog-titlebar {
  background: linear-gradient(180deg, rgba(255, 249, 253, 0.98), rgba(255, 230, 240, 0.98)) !important;
  color: #4a2a3a !important;
}

/* 下拉菜单对比度 */
.dropdown-menu li a {
  color: #4a2a3a !important;
  font-weight: 600 !important;
}

.dropdown-menu li a:hover {
  background: rgba(255, 182, 193, 0.4) !important;
  color: #FF1493 !important;
}

/* 深色模式对比度支持 */
html.dark-mode .listing tbody tr {
  background: rgba(60, 40, 50, 0.8) !important;
  border-left-color: rgba(255, 105, 180, 0.6) !important;
}

html.dark-mode .listing tr.unread {
  border-left-color: #FF69B4 !important;
  background: rgba(80, 50, 70, 0.8) !important;
}

html.dark-mode .listing .subject a,
html.dark-mode .listing .subject span {
  color: #ffb6c1 !important;
}

html.dark-mode .listing .from,
html.dark-mode .listing .from a {
  color: #c4a0e8 !important;
}

html.dark-mode .listing .date {
  color: #ffb6c1 !important;
  opacity: 0.7 !important;
}

html.dark-mode #messagelist-header th {
  background: rgba(50, 30, 40, 0.95) !important;
  color: #ffb6c1 !important;
  border-bottom-color: rgba(255, 105, 180, 0.4) !important;
}

html.dark-mode #mailboxlist li a {
  color: #ffb6c1 !important;
}

html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode .header-title,
html.dark-mode .boxtitle {
  color: #ffd1dc !important;
}

html.dark-mode #layout-content,
html.dark-mode .boxcontent,
html.dark-mode .content {
  background: rgba(45, 30, 40, 0.95) !important;
  color: #ffd1dc !important;
}
/* 动画优化 */
@keyframes bubble {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-100px) scale(0); opacity: 0; }
}
.bubble-effect::after {
  content: "🫧";
  animation: bubble 2s infinite;
}

/* ========== 派大星增强动画效果 ========== */

/* 海星漂浮动画 */
@keyframes patrick-star-float {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  25% {
    transform: translateY(-15px) rotate(5deg) scale(1.05);
  }
  50% {
    transform: translateY(-8px) rotate(-3deg) scale(0.98);
  }
  75% {
    transform: translateY(-20px) rotate(8deg) scale(1.02);
  }
}

/* 气泡上升动画 - 更丰富的效果 */
@keyframes patrick-bubble-rise {
  0% {
    transform: translateY(100vh) translateX(0) scale(0.3);
    opacity: 0;
  }
  10% {
    opacity: 0.8;
  }
  50% {
    transform: translateY(50vh) translateX(20px) scale(0.7);
    opacity: 0.6;
  }
  90% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(-10vh) translateX(-15px) scale(1);
    opacity: 0;
  }
}

/* 星星闪烁动画 */
@keyframes patrick-star-twinkle {
  0%, 100% {
    opacity: 0.3;
    transform: scale(0.8) rotate(0deg);
    filter: blur(0);
  }
  50% {
    opacity: 1;
    transform: scale(1.2) rotate(180deg);
    filter: blur(1px);
  }
}

/* 按钮按压反馈 */
@keyframes patrick-btn-press {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.92);
  }
  100% {
    transform: scale(1);
  }
}

/* 成功发送动画 */
@keyframes patrick-send-success {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: scale(1.3) rotate(15deg);
    opacity: 0.8;
  }
  100% {
    transform: scale(1) rotate(0deg) translateY(-50px);
    opacity: 0;
  }
}

/* 涟漪扩散动画 */
@keyframes patrick-ripple {
  0% {
    transform: scale(0);
    opacity: 0.6;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

/* 心跳动画 */
@keyframes patrick-heartbeat {
  0%, 100% {
    transform: scale(1);
  }
  14% {
    transform: scale(1.15);
  }
  28% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.1);
  }
  70% {
    transform: scale(1);
  }
}

/* 摇摆动画 */
@keyframes patrick-wiggle {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-8deg);
  }
  75% {
    transform: rotate(8deg);
  }
}

/* 弹跳动画 */
@keyframes patrick-bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-12px);
  }
  60% {
    transform: translateY(-6px);
  }
}

/* 应用动画到元素 */

/* 按钮点击效果 */
button:active,
.btn:active,
a.button:active,
.toolbar a.button:active {
  animation: patrick-btn-press 0.2s ease-out !important;
  box-shadow: inset 0 2px 8px rgba(255, 20, 147, 0.3) !important;
}

/* 发送按钮动画 */
#composeform input[type="submit"]:active,
button.send:active {
  animation: patrick-send-success 0.5s ease-out !important;
}

/* 标记/收藏按钮心跳 */
.listing .flagged .flag {
  animation: patrick-heartbeat 1.5s ease-in-out infinite !important;
}

/* 错误提示摇摆 */
.has-error input,
.has-error .form-control {
  animation: patrick-wiggle 0.5s ease-in-out !important;
}

/* 新邮件通知弹跳 */
#messagestack .notice {
  animation: patrick-bounce 0.8s ease-out !important;
}

/* 涟漪效果容器 */
.patrick-ripple-effect {
  position: relative;
  overflow: hidden;
}

.patrick-ripple-effect::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  background: radial-gradient(circle, rgba(255, 105, 180, 0.4) 0%, transparent 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
}

.patrick-ripple-effect:active::after {
  animation: patrick-ripple 0.6s ease-out !important;
}

/* 邮件列表项入场动画 */
@keyframes patrick-slide-in {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.listing tbody tr {
  animation: patrick-slide-in 0.3s ease-out !important;
}

/* 延迟动画效果 */
.listing tbody tr:nth-child(1) { animation-delay: 0.02s !important; }
.listing tbody tr:nth-child(2) { animation-delay: 0.04s !important; }
.listing tbody tr:nth-child(3) { animation-delay: 0.06s !important; }
.listing tbody tr:nth-child(4) { animation-delay: 0.08s !important; }
.listing tbody tr:nth-child(5) { animation-delay: 0.10s !important; }
.listing tbody tr:nth-child(6) { animation-delay: 0.12s !important; }
.listing tbody tr:nth-child(7) { animation-delay: 0.14s !important; }
.listing tbody tr:nth-child(8) { animation-delay: 0.16s !important; }
.listing tbody tr:nth-child(9) { animation-delay: 0.18s !important; }
.listing tbody tr:nth-child(10) { animation-delay: 0.20s !important; }

/* 侧边栏菜单项动画 */
#mailboxlist li {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#mailboxlist li:hover {
  transform: translateX(8px) !important;
}

/* 悬停时的发光效果 */
.button:hover,
.btn:hover,
.toolbar a:hover {
  box-shadow: 0 0 20px rgba(255, 105, 180, 0.4), 0 6px 16px rgba(255, 105, 180, 0.25) !important;
}

/* 加载动画 */
@keyframes patrick-loading {
  0% {
    content: "🦀";
  }
  25% {
    content: "⭐";
  }
  50% {
    content: "🫧";
  }
  75% {
    content: "🐚";
  }
  100% {
    content: "🦀";
  }
}

.loading::before {
  content: "🦀" !important;
  animation: patrick-loading 1s infinite !important;
  margin-right: 8px !important;
}

/* 头部logo动画 */
#layout-menu::before {
  animation: patrick-heartbeat 3s ease-in-out infinite !important;
}

/* 对话框打开动画 */
@keyframes patrick-dialog-open {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.dialog,
.ui-dialog {
  animation: patrick-dialog-open 0.3s ease-out !important;
}

/* 工具提示动画 */
.tooltip {
  animation: patrick-slide-in 0.2s ease-out !important;
}

/* 通知消失动画 */
@keyframes patrick-fade-out {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100px);
  }
}

#messagestack div.hiding {
  animation: patrick-fade-out 0.3s ease-out !important;
}

/* 深色模式动画保持 */
html.dark-mode .listing tbody tr {
  animation: patrick-slide-in 0.3s ease-out !important;
}

html.dark-mode button:active,
html.dark-mode .btn:active {
  animation: patrick-btn-press 0.2s ease-out !important;
}

/* 减少动画模式支持（无障碍） */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 移动端优化 */
@media (max-width: 768px) {
  button, .btn { font-size: 14px !important; padding: 12px 20px !important; }
  #login-form { padding: 20px !important; margin: 10px !important; }
}
/* 派大星元素 */
.toolbar::before { content: "🦀 "; }
.header::after { content: " 🌟"; }
/* 按钮交互优化 */
button:active { transform: scale(0.95) !important; }
.btn:active { box-shadow: inset 0 2px 10px rgba(0,0,0,0.2) !important; }
/* 邮件列表优化 */
#messagelist tr { border-bottom: 1px solid #FFB6C1 !important; }
#messagelist tr:hover { background: linear-gradient(90deg, rgba(255,182,193,0.3), transparent) !important; }
/* 加载动画优化 */
.loading::before { content: "🦀 "; animation: spin 1s linear infinite; }
/* 对比度优化 */
.message-row { border-left: 4px solid #FF1493 !important; }
.unread { font-weight: bold !important; color: #FF1493 !important; }
/* 动画优化 */
@keyframes bubble {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-100px) scale(0); opacity: 0; }
}
.bubble-effect::after {
  content: "🫧";
  animation: bubble 2s infinite;
}
/* 移动端优化 */
@media (max-width: 768px) {
  button, .btn { font-size: 14px !important; padding: 12px 20px !important; }
  #login-form { padding: 20px !important; margin: 10px !important; }
}
/* 派大星元素 */
.toolbar::before { content: "🦀 "; }
.header::after { content: " 🌟"; }

/* ===== 派大星按钮交互增强 2026-04-17 ===== */

/* 按钮点击果冻效果 */
@keyframes patrick-jelly {
  0% { transform: translateY(-2px) scale(1.03); }
  30% { transform: translateY(0) scale(0.95, 1.08); }
  50% { transform: translateY(0) scale(1.06, 0.94); }
  70% { transform: translateY(0) scale(0.98, 1.02); }
  100% { transform: translateY(-2px) scale(1.03); }
}

button:active,
.btn:active,
a.button:active,
input.button:active,
.toolbar a.button:active,
.toolbar .button:active {
  animation: patrick-jelly 0.4s ease !important;
  transform: translateY(0) scale(0.97) !important;
  box-shadow: 0 4px 10px rgba(255, 127, 145, 0.4) !important;
}

/* 主要操作按钮 - 更鲜艳 */
.btn-primary,
button.primary,
a.button.primary,
input.button.primary {
  background: linear-gradient(180deg, #ff8fb1, #ff5c8d) !important;
  border-color: rgba(255, 92, 141, 0.85) !important;
  box-shadow: 0 10px 20px rgba(255, 92, 141, 0.35) !important;
}

.btn-primary:hover,
button.primary:hover,
a.button.primary:hover,
input.button.primary:hover {
  background: linear-gradient(180deg, #ffa0c5, #ff6b9d) !important;
  box-shadow: 0 14px 28px rgba(255, 92, 141, 0.45) !important;
}

/* 危险/删除按钮 */
.btn-danger,
button.danger,
a.button.danger,
input.button.danger,
button.delete,
a.button.delete {
  background: linear-gradient(180deg, #ffb3b3, #ff6b6b) !important;
  border-color: rgba(255, 107, 107, 0.85) !important;
  box-shadow: 0 10px 18px rgba(255, 107, 107, 0.3) !important;
}

.btn-danger:hover,
button.danger:hover,
a.button.danger:hover,
input.button.danger:hover,
button.delete:hover,
a.button.delete:hover {
  background: linear-gradient(180deg, #ffc5c5, #ff8585) !important;
  box-shadow: 0 14px 24px rgba(255, 107, 107, 0.4) !important;
  transform: translateY(-2px) scale(1.03) !important;
}

/* 成功/保存按钮 */
.btn-success,
button.success,
a.button.success,
input.button.success,
button.save,
a.button.save {
  background: linear-gradient(180deg, #a8e6cf, #56c596) !important;
  border-color: rgba(86, 197, 150, 0.85) !important;
  box-shadow: 0 10px 18px rgba(86, 197, 150, 0.3) !important;
}

.btn-success:hover,
button.success:hover,
a.button.success:hover,
input.button.success:hover,
button.save:hover,
a.button.save:hover {
  background: linear-gradient(180deg, #b8f0dc, #66d5a6) !important;
  box-shadow: 0 14px 24px rgba(86, 197, 150, 0.4) !important;
  transform: translateY(-2px) scale(1.03) !important;
}

/* 按钮发光效果 */
button:hover::before,
.btn:hover::before,
a.button:hover::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  background: radial-gradient(circle at center, rgba(255, 182, 193, 0.3) 0%, transparent 70%);
  opacity: 0;
  animation: patrick-glow-pulse 1.5s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}

@keyframes patrick-glow-pulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.05); }
}

/* 工具栏按钮特殊效果 */
.toolbar a.button::after,
.toolbar .button::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 60%;
  height: 3px;
  background: linear-gradient(90deg, transparent, #fff, transparent);
  border-radius: 999px;
  transition: transform 0.3s ease;
}

.toolbar a.button:hover::after,
.toolbar .button:hover::after {
  transform: translateX(-50%) scaleX(1);
}

/* 复选框和单选按钮增强 */
input[type='checkbox'],
input[type='radio'] {
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

input[type='checkbox']:checked,
input[type='radio']:checked {
  animation: patrick-check-bounce 0.3s ease !important;
}

@keyframes patrick-check-bounce {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* 下拉菜单按钮 */
.dropdown-toggle::before {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-top-color: currentColor;
  transition: transform 0.2s ease;
}

.dropdown-toggle:hover::before {
  transform: translateY(-40%);
}

/* 搜索按钮特殊样式 */
.searchbar button,
.searchbar .button {
  background: linear-gradient(180deg, var(--patrick-sea), var(--patrick-sea-deep)) !important;
  border-color: rgba(76, 189, 215, 0.85) !important;
  box-shadow: 0 8px 16px rgba(76, 189, 215, 0.25) !important;
}

.searchbar button:hover,
.searchbar .button:hover {
  background: linear-gradient(180deg, #8de4f2, #5dc7e1) !important;
  box-shadow: 0 12px 20px rgba(76, 189, 215, 0.35) !important;
}

/* 写邮件按钮 - 最重要 */
#messagetoolbar a.compose,
.toolbar a.compose {
  background: linear-gradient(180deg, #ffcad7, #ff8fb1) !important;
  border: 3px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: 
    0 8px 20px rgba(255, 143, 177, 0.4),
    0 0 0 4px rgba(255, 255, 255, 0.2) !important;
  position: relative;
}

#messagetoolbar a.compose:hover,
.toolbar a.compose:hover {
  background: linear-gradient(180deg, #ffd8e4, #ffa0c5) !important;
  transform: translateY(-3px) scale(1.05) !important;
  box-shadow: 
    0 12px 28px rgba(255, 143, 177, 0.5),
    0 0 0 6px rgba(255, 255, 255, 0.3) !important;
}

#messagetoolbar a.compose::after,
.toolbar a.compose::after {
  content: '✉️';
  position: absolute;
  top: -8px;
  right: -8px;
  font-size: 14px;
  animation: patrick-envelope-wiggle 2s ease-in-out infinite;
}

@keyframes patrick-envelope-wiggle {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}

/* 发送按钮 - 最醒目 */
button.send,
a.button.send,
#composebody button[value='send'] {
  background: linear-gradient(180deg, #8cd36d, #56c596) !important;
  border-color: rgba(86, 197, 150, 0.85) !important;
  box-shadow: 
    0 10px 24px rgba(86, 197, 150, 0.4),
    0 0 0 4px rgba(255, 255, 255, 0.2) !important;
  font-size: 1.1em !important;
  padding: 14px 28px !important;
  position: relative;
  overflow: hidden;
}

button.send:hover,
a.button.send:hover,
#composebody button[value='send']:hover {
  background: linear-gradient(180deg, #9ce07d, #66d5a6) !important;
  transform: translateY(-3px) scale(1.03) !important;
  box-shadow: 
    0 14px 32px rgba(86, 197, 150, 0.5),
    0 0 0 6px rgba(255, 255, 255, 0.3) !important;
}

button.send::before,
a.button.send::before {
  content: '';
  display: none;
}

button.send::after,
a.button.send::after {
  content: '🚀';
  margin-left: 8px;
  animation: patrick-rocket-fly 1s ease-in-out infinite;
}

@keyframes patrick-rocket-fly {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}

/* 按钮禁用状态 */
button:disabled,
.btn:disabled,
a.button.disabled,
input.button:disabled {
  background: linear-gradient(180deg, #ddd, #bbb) !important;
  border-color: rgba(187, 187, 187, 0.85) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  opacity: 0.6 !important;
  transform: none !important;
  animation: none !important;
}

/* 加载中按钮动画 */
button.loading,
.btn.loading,
a.button.loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

button.loading::before,
.btn.loading::before,
a.button.loading::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: patrick-spin 0.8s linear infinite;
  display: block;
}

@keyframes patrick-spin {
  to { transform: rotate(360deg); }
}

/* ===== 按钮交互增强结束 ===== */