/* ============================================================
   NyouOS 27.1 · Material Design 3 UI 覆盖层
   视觉切换为 Google Material Design 3（Expressive）
   说明：保留原组件类名结构（功能依赖），覆盖层改写全部视觉。
   ============================================================ */

:root {
  --md3-radius-small: 8px;
  --md3-radius-medium: 12px;
  --md3-radius-large: 16px;
  --md3-radius-extra-large: 28px;
  --md3-state-hover: rgba(var(--accent-rgb), 0.08);
  --md3-state-focus: rgba(var(--accent-rgb), 0.12);
  --md3-state-pressed: rgba(var(--accent-rgb), 0.16);
}

/* ---------- 按钮：MD3 Filled / Tonal / Outlined 胶囊形 ---------- */
.fluent-btn {
  border-radius: 999px;
  transition: box-shadow .2s ease, background .2s ease, transform .1s ease, opacity .2s ease;
}
.fluent-btn:active:not(:disabled) { transform: scale(.97); }
.fluent-btn-primary { box-shadow: 0 2px 6px rgba(var(--accent-rgb), .32); }
.fluent-btn-primary:hover:not(:disabled) { box-shadow: 0 4px 14px rgba(var(--accent-rgb), .42); }
.fluent-btn-secondary { background: rgba(var(--accent-rgb), .12); color: var(--accent); }
.fluent-btn-secondary:hover:not(:disabled) { background: rgba(var(--accent-rgb), .2); }
.fluent-btn-outline { border-color: var(--text-tertiary); }
.fluent-btn-outline:hover:not(:disabled) { background: var(--md3-state-hover); }
.fluent-btn-text:hover:not(:disabled) { background: var(--md3-state-hover); }
.fluent-btn-danger { box-shadow: 0 2px 6px rgba(209, 52, 56, .3); }

/* 图标按钮：圆形 + MD3 状态层 */
.fluent-icon-btn { border-radius: 999px; }
.fluent-icon-btn:hover:not(:disabled) { background: var(--md3-state-hover); }
.fluent-icon-btn:active:not(:disabled) { background: var(--md3-state-pressed); }

/* ---------- 输入框：MD3 Tonal 风格 ---------- */
.fluent-input-wrapper {
  border-radius: 8px;
  border-color: transparent;
  background: rgba(var(--accent-rgb), .06);
  transition: background .2s ease, box-shadow .2s ease;
}
.fluent-input-wrapper:hover { background: rgba(var(--accent-rgb), .1); }
.fluent-input-wrapper:focus-within {
  background: rgba(var(--accent-rgb), .1);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.fluent-input { caret-color: var(--accent); }

/* ---------- 对话框：MD3 超大圆角 ---------- */
.fluent-dialog { border-radius: 28px; }

/* ---------- 卡片：MD3 Medium 圆角 ---------- */
.fluent-card { border-radius: 12px; }

/* ---------- 滑块 / 开关：MD3 强调色 ---------- */
.fluent-slider,
input[type="range"] { accent-color: var(--accent); }
input[type="checkbox"],
input[type="radio"] { accent-color: var(--accent); }

/* ---------- 标签页：MD3 Secondary Tab ---------- */
.fluent-tab { border-radius: 999px; }
.fluent-tabbar-pills .fluent-tab.active {
  background: rgba(var(--accent-rgb), .12);
  color: var(--accent);
  font-weight: 600;
}
.fluent-tab.active { color: var(--accent); }

/* ---------- 窗口：MD3 Large 圆角 ---------- */
.fw-frame { border-radius: 16px; }

/* ---------- 开始菜单：MD3 超大圆角 ---------- */
.start-menu { border-radius: 28px; }

/* ---------- 任务栏：MD3 表面容器 ---------- */
.taskbar {
  background: color-mix(in srgb, var(--bg-secondary) 82%, transparent) !important;
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
}
.taskbar-btn {
  border-radius: 12px;
  transition: background .18s ease, transform .1s ease;
}
.taskbar-btn:hover { background: var(--md3-state-hover); }
.taskbar-btn.active {
  background: rgba(var(--accent-rgb), .16);
  color: var(--accent);
}

/* ---------- 通知中心 / 通知卡片 ---------- */
.notification-center { border-radius: 28px; }
.notification-card, .notification-toast, .toast-item, .ntf-card { border-radius: 16px; }

/* ---------- 滚动条：MD3 圆滑 ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--text-tertiary);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); background-clip: padding-box; border: 2px solid transparent; }
* { scrollbar-width: thin; scrollbar-color: var(--text-tertiary) transparent; }

/* ---------- 菜单 / 弹层 ---------- */
.fluent-menu, .context-menu, .dropdown-menu { border-radius: 12px; }

/* ---------- 侧栏 ---------- */
.fw-sidebar { border-radius: 16px 0 0 16px; }

/* ---------- 深色模式下的状态层（Material You Dark） ---------- */
.dark-mode .fluent-btn-secondary { background: rgba(var(--accent-rgb), .16); color: var(--accent); }
.dark-mode .fluent-btn-secondary:hover:not(:disabled) { background: rgba(var(--accent-rgb), .24); }
.dark-mode .fluent-input-wrapper { background: rgba(var(--accent-rgb), .1); }
.dark-mode .fluent-input-wrapper:hover { background: rgba(var(--accent-rgb), .16); }
.dark-mode .fluent-input-wrapper:focus-within { background: rgba(var(--accent-rgb), .16); border-color: var(--accent); }