/* 量化档位气泡 */
.quantify-bubble {
  background: transparent;
}

.quantify-bubble-container {
  width: 0;
  height: 0;
}

.quantify-bubble-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgb(255 255 255 / 12%);
  box-shadow: 0 2px 12px rgb(94 79 100 / 39%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 400;
  color: #1b4332;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  will-change: transform;
}

.quantify-bubble-btn:active {
  transform: scale(0.88) !important;
  background: rgba(82, 183, 136, 0.35);
}

/* Adaptive Atmosphere System: cross-page material sync */
body .week-table,
body .week-group-title,
body .today-note-area,
body .diary-table,
body .log-detail,
body .cat-section,
body .cat-card,
body .stat-card,
body .modal-content,
body .bubble-content,
body .bubble-body,
body .stats-section-content,
body .heatmap-box,
body .operation-bubble.text-bubble,
body .quantify-bubble-btn,
body .custom-btn,
body .custom-toggle,
body .modal-input,
body .modal-select,
body .modal-btn,
body .icon-picker-panel,
body .icon-picker-option,
body #allLogsContainer {
  background: var(--atm-card) !important;
  color: var(--atm-text) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  box-shadow: -1px 1px 11px rgba(0, 0, 0, 0.27) !important;
  backdrop-filter: blur(var(--atm-blur)) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(var(--atm-blur)) saturate(1.18) !important;
}

body .week-table {
  backdrop-filter: blur(3px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(3px) saturate(1.18) !important;
}

body .bubble-popup {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: var(--atm-text) !important;
}

body #habitStatsModal .bubble-content {
  background: rgba(255, 255, 255, 0.94) !important;
}

body[data-atm-tone="dark"] #habitStatsModal .bubble-content {
  background: rgba(18, 24, 31, 0.94) !important;
}

body .modal {
  background:
    radial-gradient(circle at 50% 0%, var(--atm-highlight), transparent 42%),
    rgba(0, 0, 0, 0.34) !important;
  backdrop-filter: blur(10px) saturate(var(--atm-saturation));
  -webkit-backdrop-filter: blur(10px) saturate(var(--atm-saturation));
}

body .week-header-col,
body .week-col-name,
body .week-nav span,
body .cat-title,
body .cat-name,
body .stat-value,
body .stat-label,
body .today-note-title,
body .modal-content h3.modal-title,
body .bubble-header,
body .bubble-body,
body .stats-section-title,
body .custom-section-label,
body .count-display,
body #customCountDisplay,
body .modal-btn,
body .modal-btn.cancel,
body .delete-confirm-message,
body .field-error-message,
body .quantify-month-label,
body .logs-month-label,
body .quantify-heatmap-cell .qhm-day,
body .quantify-heatmap-cell .qhm-value {
  color: var(--atm-text) !important;
}

body .week-date-header,
body .week-group-count,
body .today-note-input::placeholder,
body .modal-subtitle,
body .diary-note,
body .stats-month-summary,
body .heatmap-month-label,
body .heatmap-weekday,
body .quantify-heatmap-weekday,
body .diary-empty,
body .stats-empty,
body .stats-record-time,
body .line-chart-svg,
body .operation-bubble .multi-text-input::placeholder {
  color: var(--atm-text-soft) !important;
}

body .week-row {
  border-bottom-color: rgba(255, 255, 255, 0.16) !important;
}

body .week-header {
  background: var(--atm-glass) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 18px !important;
  margin-bottom: 6px !important;
  color: var(--atm-text) !important;
  box-shadow: none !important;
  backdrop-filter: blur(var(--atm-blur)) saturate(1.12);
  -webkit-backdrop-filter: blur(var(--atm-blur)) saturate(1.12);
}

body .week-header-col {
  color: var(--atm-text) !important;
  background: transparent !important;
  border: none !important;
  text-shadow: 0 1px 12px rgba(255, 255, 255, 0.12);
}

body .week-header-col .week-day-text {
  color: var(--atm-text) !important;
}

body[data-atm-tone="light"] .stat-value,
body[data-atm-tone="light"] .stat-label,
body[data-atm-tone="gray"] .stat-value,
body[data-atm-tone="gray"] .stat-label {
  color: var(--atm-text) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

body .week-header-col span.week-date-header {
  color: var(--atm-text-soft) !important;
  opacity: 0.86 !important;
}

body .week-header-col:first-child {
  color: var(--atm-text-soft) !important;
}

body .week-row:hover,
body .cat-card:hover,
body .custom-btn:hover,
body .custom-toggle:hover,
body .icon-picker-option:active {
  background: var(--atm-glass-strong) !important;
  border-color: var(--atm-highlight) !important;
}

body .nav {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)),
    var(--atm-nav) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

body .nav-btn-group {
  background: transparent !important;
  box-shadow: none !important;
}

body .nav-btn {
  background: var(--atm-card) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 18px !important;
  box-shadow: none !important;
  transform: none !important;
  color: var(--atm-text) !important;
  backdrop-filter: blur(var(--atm-blur)) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(var(--atm-blur)) saturate(1.18) !important;
}

body .nav-btn.active {
  background: var(--atm-glass-strong) !important;
  color: var(--atm-text) !important;
  border-color: var(--atm-highlight) !important;
  box-shadow: none !important;
  transform: none !important;
}

body .stat-card {
  background: var(--atm-card) !important;
  color: var(--atm-text) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 18px !important;
  box-shadow: none !important;
  backdrop-filter: blur(var(--atm-blur)) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(var(--atm-blur)) saturate(1.18) !important;
}

body .stat-value {
  color: var(--atm-text) !important;
}

body .stat-label {
  color: var(--atm-text) !important;
}

body .week-nav button,
body .today-note-btn,
body .modal-btn,
body .modal-btn.cancel,
body .modal-btn.confirm,
body .edit-note-btn,
body button.diary-tag.active,
body .stats-tag.active,
body .custom-toggle.active,
body .quantify-bubble-btn:active {
  background: var(--atm-glass-strong) !important;
  color: var(--atm-text) !important;
  border-color: var(--atm-highlight) !important;
  box-shadow: none !important;
}

body .operation-bubble .bubble-item.selected {
  background: color-mix(in srgb, color-mix(in srgb, var(--atm-accent) 22%, var(--atm-card)) 90%, transparent) !important;
  color: var(--atm-text) !important;
  border-color: var(--atm-highlight) !important;
  box-shadow: none !important;
}

body .cat-bubble .bubble-item.selected {
  background: color-mix(in srgb, color-mix(in srgb, var(--atm-accent) 22%, var(--atm-card)) 90%, transparent) !important;
  color: var(--atm-text) !important;
  border-color: var(--atm-highlight) !important;
  box-shadow: none !important;
}

body[data-atm-tone="light"] .operation-bubble .bubble-item.selected,
body[data-atm-tone="light"] .cat-bubble .bubble-item.selected {
  background: color-mix(in srgb, color-mix(in srgb, var(--atm-accent) 22%, rgb(255 255 255 / 0.6)) 90%, transparent) !important;
}

body .modal-btn.cancel {
  background: var(--atm-glass) !important;
  color: var(--atm-text) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

body .modal-btn.confirm {
  background: var(--atm-glass-strong) !important;
  color: var(--atm-text) !important;
}

body .modal-btn.confirm.danger,
body .level-delete-btn {
  background: rgba(255, 107, 107, 0.22) !important;
  color: var(--atm-text) !important;
  border-color: rgba(255, 107, 107, 0.32) !important;
}

body #customMinusBtn,
body #customPlusBtn,
body #addQuantifyLevel,
body #addSubdivideItem {
  background: var(--atm-glass) !important;
  color: var(--atm-text) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

body #customCountDisplay {
  color: var(--atm-text) !important;
  text-shadow: 0 1px 14px rgba(255, 255, 255, 0.14);
}

body .custom-section {
  border-bottom-color: rgba(255, 255, 255, 0.14) !important;
}

body .custom-toggle span,
body .custom-toggle.plain {
  color: var(--atm-text) !important;
}

body .week-nav button:disabled,
body .custom-btn:disabled,
body .custom-toggle.disabled {
  opacity: 0.38;
}

body .today-note-input,
body .operation-bubble .multi-text-input,
body .modal-input,
body .modal-select {
  background: var(--atm-glass) !important;
  color: var(--atm-text) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}

body .today-note-input:focus,
body .operation-bubble .multi-text-input:focus,
body .modal-input:focus,
body .modal-select:focus {
  border-color: var(--atm-highlight) !important;
  box-shadow: 0 0 0 1px var(--atm-highlight) !important;
}

body .week-check-box,
body .checkbox,
body .heatmap-cell,
body .quantify-heatmap-cell,
body .count-btn {
  background: var(--atm-glass) !important;
  border-color: rgba(255, 255, 255, 0.24) !important;
  color: var(--atm-text) !important;
}

body[data-atm-tone="light"] .heatmap-cell,
body[data-atm-tone="light"] .quantify-heatmap-cell {
  background: rgb(255 255 255 / 0.72) !important;
  border: 1px solid rgb(80 102 76 / 0.22) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.65) !important;
}

body[data-atm-tone="dark"] .heatmap-cell,
body[data-atm-tone="dark"] .quantify-heatmap-cell {
  background: rgb(255 255 255 / 0.09) !important;
  border: 1px solid rgb(255 255 255 / 0.18) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08) !important;
}

body[data-atm-tone="light"] .heatmap-cell.empty,
body[data-atm-tone="light"] .quantify-heatmap-cell.empty {
  background: rgb(255 255 255 / 0.38) !important;
  border-color: rgb(80 102 76 / 0.14) !important;
  box-shadow: none !important;
}

body[data-atm-tone="dark"] .heatmap-cell.empty,
body[data-atm-tone="dark"] .quantify-heatmap-cell.empty {
  background: rgb(255 255 255 / 0.055) !important;
  border-color: rgb(255 255 255 / 0.12) !important;
  box-shadow: none !important;
}

body .week-col.done .week-check-box,
body .checkbox.checked,
body .cat-card.completed,
body .cat-card.care-completed {
  background: color-mix(in srgb, var(--atm-accent) 22%, var(--atm-card)) !important;
  border-color: var(--atm-highlight) !important;
}

body .heatmap-cell.checked,
body .quantify-heatmap-cell.has-value {
  background: rgba(82, 183, 136, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
  color: white !important;
}

body[data-atm-tone="gray"] .habit-card.completed,
body[data-atm-tone="gray"] .habit-card.completed.active,
body[data-atm-tone="gray"] .week-col.done .week-check-box,
body[data-atm-tone="gray"] .checkbox.checked,
body[data-atm-tone="gray"] .cat-card.completed,
body[data-atm-tone="gray"] .cat-card.care-completed {
  background: linear-gradient(180deg, rgb(110 117 121 / 38%), rgb(50 66 75 / 21%)) !important;
  border-color: rgb(123 138 145 / 0%) !important;
  color: var(--atm-text) !important;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.34),
    0 10px 26px rgb(0 0 0 / 0.14) !important;
}

body[data-atm-tone="gray"] .heatmap-cell.checked,
body[data-atm-tone="gray"] .quantify-heatmap-cell.has-value {
  background: rgb(104 108 110 / 0.72) !important;
  border-color: rgb(255 255 255 / 0.62) !important;
  color: white !important;
}

body .habit-card.active {
  background: var(--atm-glass-strong) !important;
}

body .habit-card.completed.active {
  background: color-mix(in srgb, var(--atm-accent) 22%, var(--atm-card)) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}

body .habit-card.custom-edit:active {
  background: var(--atm-glass-strong) !important;
}

body .diary-tag,
body .multi-tag-summary,
body .bubble-item {
  background: var(--atm-glass) !important;
  color: var(--atm-text) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

body .diary-tag.stats-tag {
  background: rgba(82, 183, 136, 0.8) !important;
  color: white !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
}

body .diary-tag.stats-tag.active {
  background: rgba(82, 183, 136, 0.72) !important;
  color: white !important;
}

body .diary-tag.issue {
  background: rgb(255 228 230 / 0.88) !important;
  color: #E76F51 !important;
  border-color: rgb(231 111 81 / 0.18) !important;
}

body[data-atm-tone="light"] .operation-bubble .bubble-item,
body[data-atm-tone="light"] .cat-bubble .bubble-item {
  background: rgb(255 255 255 / 71%) !important;
  color: var(--atm-text) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

body[data-atm-tone="light"] .diary-tag:not(.issue):not(.stats-tag),
body[data-atm-tone="light"] .multi-tag-summary {
  background: rgb(255 255 255 / 71%) !important;
  color: var(--atm-text) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

/* ===== 深色模式气泡：统一氛围系统高级设计 ===== */
/* 未打卡气泡 —— 参考截图质感，深灰底+白色光晕描边 */
body[data-atm-tone="dark"] .operation-bubble .bubble-item,
body[data-atm-tone="dark"] .cat-bubble .bubble-item {
  background:
    linear-gradient(180deg,
      rgb(131 126 126 / 12%) 0%,
      rgb(255 255 255 / 4%) 35%,
      transparent 60%),
    rgb(52 56 63 / 24%) !important;
  color: rgb(255 255 255 / 90%) !important;
  border: 1px solid rgb(79 65 65 / 43%) !important;
  box-shadow:
    inset 0 1px 0 rgb(125 125 125 / 18%),
    0 0 0 0.5px rgb(255 255 255 / 8%),
    0 0 14px rgb(255 255 255 / 8%),
    0 4px 14px rgb(0 0 0 / 35%) !important;
  text-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 已打卡/选中气泡 —— 与打卡卡片完全同色同轮廓 */
body[data-atm-tone="dark"] .operation-bubble .bubble-item.selected,
body[data-atm-tone="dark"] .cat-bubble .bubble-item.selected {
  background: color-mix(in srgb, var(--atm-accent) 22%, var(--atm-card)) !important;
  color: var(--atm-text) !important;
  border: 1px solid rgb(155 134 171 / 38%) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  z-index: 1;
}

/* 深色模式气泡点击态 */
body[data-atm-tone="dark"] .operation-bubble .bubble-item:active,
body[data-atm-tone="dark"] .cat-bubble .bubble-item:active {
  background:
    linear-gradient(180deg,
      rgb(131 126 126 / 18%) 0%,
      rgb(255 255 255 / 5%) 40%,
      transparent 65%),
    rgb(62 66 74 / 95%) !important;
  border-color: rgb(255 255 255 / 42%) !important;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 22%),
    0 0 0 0.5px rgb(255 255 255 / 10%),
    0 0 18px rgb(255 255 255 / 10%),
    0 4px 14px rgb(0 0 0 / 35%) !important;
}

body[data-atm-tone="dark"] .operation-bubble .bubble-item.selected:active,
body[data-atm-tone="dark"] .cat-bubble .bubble-item.selected:active {
  background: color-mix(in srgb, var(--atm-accent) 22%, var(--atm-card)) !important;
  border: 1px solid rgb(155 134 171 / 38%) !important;
}

body[data-atm-tone="gray"] .operation-bubble .bubble-item.selected,
body[data-atm-tone="gray"] .cat-bubble .bubble-item.selected {
  background: linear-gradient(180deg, rgb(126 130 132 / 0.4), rgb(82 86 88 / 0.28)) !important;
  color: var(--atm-text) !important;
  border: 1px solid rgb(68 72 74 / 0.38) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.36) !important;
}

body .bubble-popup .bubble-arrow {
  border-right-color: var(--atm-card) !important;
}

body .heatmap-tri-up {
  border-bottom-color: var(--atm-text-soft) !important;
}

body .heatmap-tri-up:hover {
  border-bottom-color: var(--atm-text) !important;
}

body .heatmap-tri-down {
  border-top-color: var(--atm-text-soft) !important;
}

body .heatmap-tri-down:hover {
  border-top-color: var(--atm-text) !important;
}

body .heatmap-tri-up.disabled {
  border-bottom-color: rgba(255, 255, 255, 0.16) !important;
}

body .heatmap-tri-down.disabled {
  border-top-color: rgba(255, 255, 255, 0.16) !important;
}

body .quantify-tri-left,
body .logs-tri-up {
  border-right-color: var(--atm-text-soft) !important;
}

body .quantify-tri-left:hover,
body .logs-tri-up:hover {
  border-right-color: var(--atm-text) !important;
}

body .quantify-tri-right,
body .logs-tri-down {
  border-left-color: var(--atm-text-soft) !important;
}

body .quantify-tri-right:hover,
body .logs-tri-down:hover {
  border-left-color: var(--atm-text) !important;
}

body .quantify-tri-left.disabled,
body .logs-tri-up.disabled {
  border-right-color: rgba(255, 255, 255, 0.16) !important;
}

body .quantify-tri-right.disabled,
body .logs-tri-down.disabled {
  border-left-color: rgba(255, 255, 255, 0.16) !important;
}

body .habit-card.custom-edit {
  animation: atmospherePulse 1.8s ease-in-out infinite !important;
}

@keyframes atmospherePulse {
  0%, 100% {
    box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 0 0 rgba(0,0,0,0);
  }
  50% {
    box-shadow: 0 0 0 1px var(--atm-highlight), 0 0 20px rgba(255,255,255,0.14);
  }
}

body .operation-bubble:not(.text-bubble)::after,
body .operation-bubble.text-bubble::after,
body .cat-bubble::after {
  border-top-color: var(--atm-card) !important;
  border-bottom-color: var(--atm-card) !important;
}