/* ============================================================
 * 玄务台 - iOS 26 风格增强层
 * 在保持原色调（#99cc32 绿系）不变的前提下，增强视觉体验
 * 参考 Apple iOS 26 液态玻璃（Liquid Glass）设计语言
 * ============================================================ */

/* === 全局增强 === */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1;
  letter-spacing: -0.01em;
}

/* === 液态玻璃效果（卡片） === */
.card {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 2px 16px rgba(153, 204, 50, 0.10), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:active {
  transform: scale(0.985);
  box-shadow: 0 1px 8px rgba(153, 204, 50, 0.08);
}

/* === 统计卡片液态玻璃 === */
.stat {
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 20px rgba(127, 165, 40, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* === 导航栏液态玻璃 === */
.navbar {
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  background: linear-gradient(135deg, rgba(143, 190, 42, 0.92), rgba(163, 214, 62, 0.88) 55%, rgba(192, 228, 95, 0.85));
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

/* === 底部导航栏液态玻璃 === */
.tabbar {
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  background: rgba(255, 255, 255, 0.82);
  border-top: 1px solid rgba(200, 220, 160, 0.4);
  box-shadow: 0 -2px 20px rgba(153, 204, 50, 0.06);
}

.tab {
  transition: color 0.15s ease, transform 0.15s ease;
}

.tab:active {
  transform: scale(0.92);
}

.tab.on {
  color: var(--primary-deep);
}

/* === 弹层（Sheet）液态玻璃 === */
.sheet-panel {
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.05);
}

.sheet-mask {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  background: rgba(30, 40, 10, 0.25);
}

/* === 输入框增强 === */
input, textarea, select {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:focus, textarea:focus, select:focus {
  box-shadow: 0 0 0 3px rgba(153, 204, 50, 0.15);
  border-color: var(--primary);
}

/* === 按钮增强 === */
.btn {
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}

.btn:active {
  transform: scale(0.96);
  opacity: 0.85;
}

.btn-primary {
  box-shadow: 0 2px 12px rgba(153, 204, 50, 0.25);
}

.btn-primary:active {
  box-shadow: 0 1px 6px rgba(153, 204, 50, 0.2);
}

/* === 芯片（Chip）增强 === */
.chip {
  transition: all 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.chip:active {
  transform: scale(0.94);
}

/* === 浮动按钮（FAB）增强 === */
.fab {
  box-shadow: 0 4px 20px rgba(153, 204, 50, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.fab:active {
  transform: scale(0.9) rotate(90deg);
  box-shadow: 0 2px 12px rgba(153, 204, 50, 0.25);
}

/* === 页面切换动画增强 === */
.page.active {
  animation: ios26-pageIn 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}

@keyframes ios26-pageIn {
  from { opacity: 0; transform: translateY(8px) scale(0.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* === Sheet 弹出动画 === */
.sheet.open .sheet-panel {
  animation: ios26-sheetUp 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}

@keyframes ios26-sheetUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* === Toast 增强 === */
#toast {
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  background: rgba(55, 66, 28, 0.88);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}

/* === 搜索框增强 === */
.searchbar input {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(200, 220, 160, 0.3);
  box-shadow: 0 1px 6px rgba(153, 204, 50, 0.06);
}

/* === 空状态提示增强 === */
.empty {
  animation: ios26-fadeIn 0.3s ease;
}

@keyframes ios26-fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

/* === 移动端适配增强 === */
@media (max-width: 380px) {
  .navbar h1 { font-size: 16px; }
  .navbar .sub { font-size: 10px; }
  .navbar .date { font-size: 10px; }
  .stat .s-value { font-size: 17px; }
  .card .card-title { font-size: 13px; }
  .btn { font-size: 13px; }
  .chip { font-size: 11px; padding: 4px 10px; }
}

/* === 大屏居中 + 液态玻璃边框 === */
@media (min-width: 481px) {
  #app {
    border-left: 1px solid rgba(200, 220, 160, 0.2);
    border-right: 1px solid rgba(200, 220, 160, 0.2);
    box-shadow: 0 0 60px rgba(127, 165, 40, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.03);
  }
}

/* === 滚动优化 === */
* {
  -webkit-overflow-scrolling: touch;
}

::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}

::-webkit-scrollbar-thumb {
  background: rgba(153, 204, 50, 0.2);
  border-radius: 2px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

/* === 选中文本颜色 === */
::selection {
  background: rgba(153, 204, 50, 0.2);
}

/* === 安全区域适配 === */
@supports (padding: env(safe-area-inset-bottom)) {
  .tabbar {
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
  }
  .fab {
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }
}