/* ============================================================
   方案一 · Tiffany 粉
   来源：Tiffany 的学习工作台模板
   浅色：粉白底 #fff0f6 + 卡片 #fffbfd + 主粉 #e86b9b + 梅子字 #3a2530
   深色：深梅子底 #241722 + 卡片 #3a2530
   ============================================================ */

/* ---------- 浅色 ---------- */
body #app {
  background-color: #fff0f6;
}

/* ---------- 分组标题 ---------- */
body #main-section .title {
  color: #3a2530;
  font-weight: 500;
  letter-spacing: .02em;
}

body #main-section .subtitle {
  color: #a8698a;
}

/* ---------- 服务卡片：粉白 + 细粉边 ---------- */
body #main-section .card {
  background-color: #fffbfd;
  border: 1px solid rgba(201, 79, 127, 0.16);
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(201, 79, 127, 0.06);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

body #main-section .card-content {
  padding: 1.1rem 1.25rem;
}

body #main-section .card:hover {
  border-color: rgba(232, 107, 155, 0.55);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(201, 79, 127, 0.14);
}

body #main-section .card .title {
  color: #3a2530;
  font-weight: 500;
}

body #main-section .card .subtitle {
  color: #a8698a;
}

/* ---------- 标签：胶囊 ---------- */
body #main-section .card .tag {
  border-radius: 999px;
  font-size: .68rem;
  letter-spacing: .04em;
  border: 1px solid rgba(201, 79, 127, 0.22);
  background: rgba(251, 234, 242, 0.9);
  color: #a8698a;
}

/* ---------- 三态：绿=在线 / 琥珀=待挂载 / 灰=停用 ---------- */
body #main-section .is-live .card {
  border-color: rgba(79, 174, 131, 0.50);
}

body #main-section .is-pending .card {
  border-color: rgba(226, 162, 58, 0.45);
}

body #main-section .is-off .card {
  border-color: rgba(201, 79, 127, 0.10);
  opacity: .74;
}

body #main-section .is-live .card .tag {
  border-color: rgba(79, 174, 131, 0.45);
  color: #2f7d5c;
  background: rgba(79, 174, 131, 0.10);
}

body #main-section .is-pending .card .tag {
  border-color: rgba(226, 162, 58, 0.45);
  color: #9a6a17;
  background: rgba(226, 162, 58, 0.12);
}

body #main-section .is-off .card .tag {
  border-color: rgba(201, 79, 127, 0.14);
  color: #b58ba2;
}

/* ---------- 消息条 ---------- */
body #app .message,
body #app .message .message-body,
body #app .notification {
  background-color: #fffbfd;
  border: 1px solid rgba(201, 79, 127, 0.18);
  border-radius: 12px;
  color: #a8698a;
}

body #app .message-header {
  background-color: #fffbfd;
  color: #3a2530;
  border-bottom: 1px solid rgba(201, 79, 127, 0.18);
  border-radius: 12px 12px 0 0;
  font-weight: 500;
}

.notification strong,
body #app .message .message-body strong {
  color: #3a2530;
}

.notification .has-text-success {
  color: #2f7d5c !important;
}

/* ---------- 导航栏 ---------- */
body #app .navbar {
  background-color: #f7c7da;
  border-bottom: 1px solid rgba(201, 79, 127, 0.16);
}

body #app .navbar .navbar-item,
body #app .navbar a {
  color: #3a2530;
}

/* ---------- 链接与图标 ---------- */
body #app a {
  color: #e86b9b;
}

body #app a:hover {
  color: #f2a6c3;
}

body #main-section .card i {
  color: #e86b9b;
}

/* ---------- 页脚 ---------- */
body #app .footer {
  background-color: transparent;
  color: #a8698a;
}

body #app .footer a {
  color: #e86b9b;
}

/* ---------- 搜索框 ---------- */
body #app .control input {
  background-color: #fbeaf2;
  border-color: rgba(201, 79, 127, 0.22);
  color: #3a2530;
}

body #app .control input::placeholder {
  color: #b58ba2;
}

/* ============================================================
   深色模式：深梅子
   ============================================================ */
#app.dark {
  background-color: #241722;
}

#app.dark #main-section .card {
  background-color: #3a2530;
  border-color: rgba(247, 199, 218, 0.14);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.30);
}

#app.dark #main-section .card:hover {
  border-color: rgba(242, 166, 195, 0.55);
  box-shadow: 0 8px 24px rgba(232, 107, 155, 0.18);
}

#app.dark #main-section .card .title,
#app.dark #main-section .title {
  color: #fbeaf2;
}

#app.dark #main-section .card .subtitle,
#app.dark #main-section .subtitle {
  color: #d9a9bc;
}

#app.dark #main-section .card .tag {
  background: rgba(247, 199, 218, 0.10);
  border-color: rgba(247, 199, 218, 0.20);
  color: #d9a9bc;
}

#app.dark #main-section .is-live .card {
  border-color: rgba(79, 174, 131, 0.55);
}

#app.dark #main-section .is-pending .card {
  border-color: rgba(226, 162, 58, 0.50);
}

#app.dark .message,
#app.dark .message .message-body,
#app.dark .notification {
  background-color: #3a2530;
  border-color: rgba(247, 199, 218, 0.16);
  color: #d9a9bc;
}

#app.dark .message-header {
  background-color: #3a2530;
  color: #fbeaf2;
  border-bottom-color: rgba(247, 199, 218, 0.16);
  border-radius: 12px 12px 0 0;
}

#app.dark .navbar {
  background-color: #3a2530;
  border-bottom-color: rgba(247, 199, 218, 0.14);
}

#app.dark .control input {
  background-color: #4a3340;
  border-color: rgba(247, 199, 218, 0.20);
  color: #fbeaf2;
}