/* Webpan 现代化界面 — 人性化设计 */
:root {
  color-scheme: light dark;
  --wp-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --wp-mono: ui-monospace, "SF Mono", Consolas, "Cascadia Code", "Fira Code", monospace;

  /* 深色模式配色 — 更柔和的专业感 */
  --wp-bg: #0d1117;
  --wp-surface: #161b22;
  --wp-surface2: #1c2128;
  --wp-surface3: #21262d;
  --wp-edge: rgba(48, 54, 61, 0.6);
  --wp-edge-hover: rgba(48, 54, 61, 0.9);
  --wp-text: #e6edf3;
  --wp-text-secondary: #7d8590;
  --wp-text-tertiary: #6e7681;
  
  /* 强调色 — 更友好的青绿色 */
  --wp-accent: #2dd4bf;
  --wp-accent-soft: rgba(45, 212, 191, 0.15);
  --wp-accent-hover: #5eead4;
  --wp-accent-dim: #14b8a6;
  
  /* 功能色 */
  --wp-success: #3fb950;
  --wp-success-soft: rgba(63, 185, 80, 0.15);
  --wp-warning: #d29922;
  --wp-warning-soft: rgba(210, 153, 34, 0.15);
  --wp-danger: #f85149;
  --wp-danger-soft: rgba(248, 81, 73, 0.15);
  --wp-info: #58a6ff;
  --wp-info-soft: rgba(88, 166, 255, 0.15);
  
  /* 尺寸 */
  --wp-radius-sm: 8px;
  --wp-radius: 12px;
  --wp-radius-lg: 16px;
  --wp-radius-xl: 24px;
  --wp-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
  --wp-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  --wp-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.45);
  
  /* 动画 */
  --wp-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --wp-transition: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --wp-transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-color-scheme: light) {
  :root {
    --wp-bg: #f6f8fa;
    --wp-surface: #ffffff;
    --wp-surface2: #f6f8fa;
    --wp-surface3: #eaeef2;
    --wp-edge: rgba(31, 35, 40, 0.15);
    --wp-edge-hover: rgba(31, 35, 40, 0.25);
    --wp-text: #1f2328;
    --wp-text-secondary: #656d76;
    --wp-text-tertiary: #8c959f;
    
    --wp-accent: #0d9488;
    --wp-accent-soft: rgba(13, 148, 136, 0.1);
    --wp-accent-hover: #0f766e;
    --wp-accent-dim: #115e59;
    
    --wp-success: #1a7f37;
    --wp-success-soft: rgba(26, 127, 55, 0.1);
    --wp-warning: #9a6700;
    --wp-warning-soft: rgba(154, 103, 0, 0.1);
    --wp-danger: #cf222e;
    --wp-danger-soft: rgba(207, 34, 46, 0.1);
    --wp-info: #0969da;
    --wp-info-soft: rgba(9, 105, 218, 0.1);
    
    --wp-shadow-sm: 0 2px 8px rgba(31, 35, 40, 0.08);
    --wp-shadow: 0 8px 24px rgba(31, 35, 40, 0.12);
    --wp-shadow-lg: 0 16px 48px rgba(31, 35, 40, 0.16);
  }
}

/* 全局基础 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--wp-font);
  font-size: 14px;
  line-height: 1.6;
  color: var(--wp-text);
  background: var(--wp-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 未登录：工作台 DOM 必须不可见（避免仅依赖 .is-active 时在竞态下顶栏出现在登录页下方） */
body.wp-state-login #panel-app {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 隐藏元素 */
.hidden {
  display: none !important;
}

[hidden]:not([hidden="false"]) {
  display: none !important;
}

/* 背景装饰 */
.wp-bg {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 50% at 20% -10%, rgba(45, 212, 191, 0.12), transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 0%, rgba(88, 166, 255, 0.08), transparent 50%),
    radial-gradient(ellipse 100% 60% at 50% 100%, rgba(45, 212, 191, 0.04), transparent 50%);
}

/* 视图切换 */
.wp-view {
  display: none;
  position: relative;
  z-index: 1;
  animation: fadeIn 0.4s ease;
}

.wp-view.is-active {
  display: block;
}

/* 登录页占满视口并垂直居中，避免 body min-height 下卡片下方出现空白/渐变「残留」条带 */
.wp-view--login.is-active {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  min-height: 100vh; /* 旧浏览器兜底 */
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right))
    max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  box-sizing: border-box;
}

.wp-view--login .wp-login-card {
  width: 100%;
  max-width: 420px;
}

/* 未激活视图彻底不占位（部分环境下仅靠 display:none 仍偶发可聚焦子元素） */
.wp-view:not(.is-active) {
  display: none !important;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== 登录页 ===== */
.wp-view--login {
  margin: 0 auto;
}

.wp-login-card {
  background: var(--wp-surface);
  border-radius: var(--wp-radius-lg);
  border: 1px solid var(--wp-edge);
  box-shadow: var(--wp-shadow-lg);
  padding: 2rem 1.75rem 2.25rem;
  position: relative;
  overflow: hidden;
}

.wp-login-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--wp-accent), var(--wp-accent-hover), var(--wp-info));
}

.wp-login-head {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1.25rem;
}

.wp-logo {
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--wp-surface);
  background: linear-gradient(135deg, var(--wp-accent), var(--wp-info));
  border-radius: var(--wp-radius);
  box-shadow: var(--wp-shadow-sm);
  transition: transform var(--wp-transition-fast);
}

.wp-logo:hover {
  transform: scale(1.05);
}

.wp-logo--sm {
  width: 2.25rem;
  height: 2.25rem;
  font-size: 0.9rem;
  border-radius: var(--wp-radius-sm);
}

.wp-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.wp-sub {
  margin: 0.35rem 0 0;
  font-size: 0.8125rem;
  color: var(--wp-text-secondary);
}

.wp-login-foot {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--wp-edge);
  font-size: 0.75rem;
  color: var(--wp-text-tertiary);
  text-align: center;
}

/* 友好提示 */
.wp-hint {
  margin: 0 0 1.25rem;
  padding: 0.875rem 1rem;
  font-size: 0.8125rem;
  color: var(--wp-text);
  background: var(--wp-accent-soft);
  border: 1px solid var(--wp-accent-soft);
  border-radius: var(--wp-radius);
  line-height: 1.65;
}

.wp-hint strong {
  color: var(--wp-accent);
  font-weight: 600;
}

/* 表单字段 */
.wp-form .wp-field,
.wp-details .wp-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.wp-field span {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--wp-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.wp-field--inline {
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
}

.wp-field--inline span {
  min-width: 4.5rem;
}

.wp-field input,
.wp-field select,
.wp-select-wide,
.wp-input-grow {
  font: inherit;
  padding: 0.625rem 0.875rem;
  border-radius: var(--wp-radius-sm);
  border: 1px solid var(--wp-edge);
  background: var(--wp-surface2);
  color: var(--wp-text);
  transition: all var(--wp-transition-fast);
}

.wp-field input:hover,
.wp-field select:hover,
.wp-input-grow:hover {
  border-color: var(--wp-edge-hover);
}

.wp-field input:focus,
.wp-field select:focus,
.wp-input-grow:focus {
  outline: none;
  border-color: var(--wp-accent);
  box-shadow: 0 0 0 3px var(--wp-accent-soft);
}

.wp-field input::placeholder {
  color: var(--wp-text-tertiary);
}

/* 友好的折叠详情 */
.wp-details {
  margin: 0.75rem 0 1rem;
  border-radius: var(--wp-radius);
  border: 1px dashed var(--wp-edge);
  padding: 0.5rem 0.875rem;
  transition: all var(--wp-transition-fast);
}

.wp-details:hover {
  border-color: var(--wp-edge-hover);
  background: var(--wp-surface2);
}

.wp-details summary {
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--wp-text-secondary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
}

.wp-details summary::before {
  content: '▸';
  font-size: 0.625rem;
  transition: transform var(--wp-transition-fast);
  color: var(--wp-accent);
}

.wp-details[open] summary::before {
  transform: rotate(90deg);
}

.wp-details > .wp-field {
  margin-top: 0.875rem;
  animation: slideDown 0.2s ease;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.wp-details--boxed {
  margin-top: 1rem;
  background: var(--wp-surface2);
}

.wp-details--marg {
  margin-top: 1rem;
}

/* 按钮系统 */
.wp-btn {
  font: inherit;
  font-weight: 600;
  font-size: 0.8125rem;
  cursor: pointer;
  border-radius: var(--wp-radius-sm);
  border: 1px solid transparent;
  padding: 0.5rem 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  transition: all var(--wp-transition-fast);
  position: relative;
  overflow: hidden;
}

.wp-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.1), transparent);
  opacity: 0;
  transition: opacity var(--wp-transition-fast);
}

.wp-btn:hover::before {
  opacity: 1;
}

.wp-btn:active {
  transform: translateY(1px);
}

.wp-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.wp-btn--primary {
  background: linear-gradient(135deg, var(--wp-accent), var(--wp-accent-dim));
  color: white;
  box-shadow: 0 2px 8px rgba(45, 212, 191, 0.3);
}

.wp-btn--primary:hover:not(:disabled) {
  box-shadow: 0 4px 12px rgba(45, 212, 191, 0.4);
  transform: translateY(-1px);
}

.wp-btn--secondary {
  background: var(--wp-surface2);
  border-color: var(--wp-edge);
  color: var(--wp-text);
}

.wp-btn--secondary:hover:not(:disabled) {
  background: var(--wp-surface3);
  border-color: var(--wp-edge-hover);
}

.wp-btn--danger {
  background: var(--wp-danger-soft);
  border-color: rgba(248, 81, 73, 0.4);
  color: var(--wp-danger);
}

.wp-btn--danger:hover:not(:disabled) {
  background: rgba(248, 81, 73, 0.2);
}

.wp-btn--ghost {
  background: transparent;
  border-color: var(--wp-edge);
  color: var(--wp-text-secondary);
}

.wp-btn--ghost:hover:not(:disabled) {
  background: var(--wp-surface2);
  color: var(--wp-text);
}

.wp-btn--success {
  background: var(--wp-success-soft);
  border-color: rgba(63, 185, 80, 0.4);
  color: var(--wp-success);
}

.wp-btn--block {
  width: 100%;
  padding: 0.625rem 1rem;
  margin-top: 0.5rem;
}

.wp-btn--sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
}

/* 提示横幅 */
.wp-banner {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--wp-radius-sm);
  font-size: 0.8125rem;
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}

.wp-banner::before {
  font-size: 1rem;
  line-height: 1;
}

.wp-banner--err {
  color: var(--wp-danger);
  background: var(--wp-danger-soft);
  border: 1px solid rgba(248, 81, 73, 0.25);
}

.wp-banner--err::before {
  content: '⚠';
}

.wp-banner--success {
  color: var(--wp-success);
  background: var(--wp-success-soft);
  border: 1px solid rgba(63, 185, 80, 0.25);
}

.wp-banner--success::before {
  content: '✓';
}

.wp-banner--info {
  color: var(--wp-info);
  background: var(--wp-info-soft);
  border: 1px solid rgba(88, 166, 255, 0.25);
}

.wp-banner--info::before {
  content: 'ℹ';
}

.wp-banner--warn {
  color: var(--wp-warning);
  background: var(--wp-warning-soft);
  border: 1px solid rgba(210, 153, 34, 0.25);
}

.wp-banner--warn::before {
  content: '⚡';
}

/* ===== App 外壳 ===== */
.wp-view--app {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.wp-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  padding: 0.625rem 1.25rem;
  background: rgba(22, 27, 34, 0.85);
  backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid var(--wp-edge);
}

@media (prefers-color-scheme: light) {
  .wp-topbar {
    background: rgba(255, 255, 255, 0.85);
  }
}

.wp-topbar__brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.wp-topbar__title {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
}

/* 导航 */
.wp-nav {
  display: flex;
  gap: 0.375rem;
  flex-wrap: wrap;
  flex: 1;
}

.wp-nav__btn {
  font: inherit;
  font-weight: 600;
  font-size: 0.8125rem;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--wp-text-secondary);
  padding: 0.5rem 0.875rem;
  border-radius: 999px;
  transition: all var(--wp-transition-fast);
  position: relative;
}

.wp-nav__btn:hover {
  color: var(--wp-text);
  background: var(--wp-surface2);
}

.wp-nav__btn.is-active {
  background: var(--wp-accent-soft);
  color: var(--wp-accent);
}

.wp-nav__btn.is-active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 20%;
  right: 20%;
  height: 2px;
  background: var(--wp-accent);
  border-radius: 2px;
}

/* 主内容区 */
.wp-main {
  position: relative;
  z-index: 1;
  flex: 1;
  max-width: 72rem;
  width: 100%;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
}

.wp-panel {
  display: none;
  flex-direction: column;
  gap: 1.25rem;
  animation: fadeIn 0.3s ease;
}

.wp-panel.is-active {
  display: flex;
}

/* 卡片 */
.wp-card {
  background: var(--wp-surface);
  border-radius: var(--wp-radius-lg);
  border: 1px solid var(--wp-edge);
  box-shadow: var(--wp-shadow-sm);
  transition: box-shadow var(--wp-transition);
}

.wp-card:hover {
  box-shadow: var(--wp-shadow);
}

.wp-card--stretch {
  width: 100%;
}

.wp-card--pad {
  padding: 1.25rem;
}

.wp-card--muted {
  background: var(--wp-surface2);
}

.wp-nav-alert.hidden {
  display: none !important;
}

.wp-nav-alert {
  margin-left: 0.2rem;
  font-size: 0.82em;
  vertical-align: text-top;
  line-height: 1;
}

.wp-ann-new-hint.hidden {
  display: none !important;
}

.wp-ann-new-hint {
  font-weight: 700;
}

/* 标题 */
.wp-h2 {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.wp-workspace {
  padding: 1rem 1.25rem;
}

.wp-workspace--in-files {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--wp-radius);
  background: var(--wp-surface2);
}

/* 文件面板：active 工作目录 vs sn/{root}/archives（回收等） */
.wp-files-scope-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.375rem;
  padding: 0.5rem 0.875rem;
  border-radius: var(--wp-radius);
  border: 1px solid var(--wp-edge);
  background: var(--wp-surface2);
}

.wp-files-scope-label {
  font-size: 0.8125rem;
}

.wp-files-scope-switch {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.wp-btn.wp-btn--scope.is-active {
  border-color: var(--wp-accent);
  background: var(--wp-accent-soft);
  color: var(--wp-accent);
  font-weight: 600;
}

.wp-field--inline-lg .wp-select-wide {
  min-width: min(28rem, 100%);
}

/* 概览：配额 */
.wp-dhead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.625rem;
  margin-bottom: 1rem;
}

.wp-dname {
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}

.wp-role {
  display: inline-flex;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  background: var(--wp-accent-soft);
  color: var(--wp-accent);
  vertical-align: middle;
  margin-left: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.wp-quota-line {
  font-size: 0.875rem;
  color: var(--wp-text-secondary);
  margin: 0 0 0.625rem;
  line-height: 1.7;
}

.wp-quota-line strong {
  color: var(--wp-text);
  font-weight: 600;
}

/* 进度条 */
.wp-meter {
  height: 10px;
  border-radius: 999px;
  background: var(--wp-surface2);
  border: 1px solid var(--wp-edge);
  overflow: hidden;
  margin: 0.75rem 0;
}

.wp-meter > span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--wp-accent), var(--wp-accent-hover));
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.wp-meter > span::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.wp-meter--warn > span {
  background: linear-gradient(90deg, var(--wp-warning), #e6a700);
}

.wp-meter--danger > span {
  background: linear-gradient(90deg, var(--wp-danger), #da3633);
}

.wp-spaceid {
  margin: 0.875rem 0 0;
  font-size: 0.75rem;
  color: var(--wp-text-tertiary);
  word-break: break-all;
}

.wp-spaceid code {
  font-family: var(--wp-mono);
  font-size: 0.6875rem;
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  background: var(--wp-surface2);
  color: var(--wp-text-secondary);
}

.wp-pre {
  margin: 0.625rem 0 0;
  padding: 0.875rem 1rem;
  max-height: min(320px, 50vh);
  overflow: auto;
  font-family: var(--wp-mono);
  font-size: 0.75rem;
  line-height: 1.6;
  border-radius: var(--wp-radius-sm);
  background: var(--wp-bg);
  border: 1px solid var(--wp-edge);
  color: var(--wp-text-secondary);
}

/* 辅助文字 */
.muted {
  color: var(--wp-text-secondary);
}

.wp-tight {
  margin: 0.375rem 0 0;
  font-size: 0.8125rem;
}

.wp-lead {
  margin: 0;
  border-radius: var(--wp-radius);
  border: 1px solid var(--wp-edge);
  font-size: 0.8125rem;
  padding: 1rem;
  background: var(--wp-surface2);
}

/* ===== 文件区 ===== */
.wp-files-shell {
  padding: 1.25rem;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.wp-files-shell.wp-files-drop--active {
  outline: 2px dashed var(--wp-accent, #58a6ff);
  outline-offset: 2px;
  background: var(--wp-surface2);
  box-shadow: inset 0 0 0 1px rgba(88, 166, 255, 0.25);
}

.wp-files-head {
  margin-bottom: 1rem;
}

.wp-crumbtrail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  border-radius: 999px;
  background: var(--wp-surface2);
  border: 1px solid var(--wp-edge);
  margin: 0.875rem 0;
  font-size: 0.8125rem;
}

.wp-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.625rem 0;
}

.wp-toolbar--wrap {
  align-items: center;
}

.wp-write-tools .wp-toolbar {
  margin-bottom: 0.5rem;
}

.wp-files-msg {
  font-size: 0.8125rem;
  padding: 0.625rem 0.875rem;
  border-radius: var(--wp-radius-sm);
  margin: 0.5rem 0;
}

.wp-files-msg:not([hidden]).err {
  color: var(--wp-danger);
  background: var(--wp-danger-soft);
  border: 1px solid rgba(248, 81, 73, 0.2);
}

.wp-files-msg:not([hidden]).ok {
  color: var(--wp-success);
  background: var(--wp-success-soft);
  border: 1px solid rgba(63, 185, 80, 0.2);
}

/* 上传进度 */
.wp-upload-progress {
  margin: 0.5rem 0 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: var(--wp-radius-sm);
  border: 1px solid var(--wp-edge);
  background: var(--wp-surface2);
  animation: fadeIn 0.3s ease;
}

.wp-upload-progress-label {
  font-size: 0.8125rem;
  color: var(--wp-text-secondary);
  margin-bottom: 0.5rem;
  word-break: break-word;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.wp-upload-progress-bar {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  border: none;
  background: var(--wp-surface3);
}

.wp-upload-progress-bar::-webkit-progress-bar {
  background: var(--wp-surface3);
  border-radius: 999px;
}

.wp-upload-progress-bar::-webkit-progress-value {
  background: linear-gradient(90deg, var(--wp-accent), var(--wp-accent-hover));
  border-radius: 999px;
  transition: width 0.2s ease;
}

.wp-upload-progress-bar::-moz-progress-bar {
  background: linear-gradient(90deg, var(--wp-accent), var(--wp-accent-hover));
  border-radius: 999px;
}

/* —— 文件区 · 百度网盘式大图标网格 —— */
.wp-files-grid-shell {
  border-radius: var(--wp-radius);
  border: 1px solid var(--wp-edge);
  margin-top: 0.5rem;
  background: var(--wp-surface);
  padding: 1rem 1rem 1.25rem;
  min-height: 12rem;
}

.wp-files-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 1.25rem 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.wp-files-grid-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 2rem 1rem;
  font-size: 0.875rem;
  color: var(--wp-text-secondary);
}

.wp-file-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
  padding: 0.25rem;
  margin: 0;
  border-radius: var(--wp-radius-sm);
  background: transparent;
  list-style: none;
}

.wp-file-tile-slot {
  position: relative;
  width: 100%;
  min-height: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.wp-file-tile-slot .wp-file-tile-check {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.12s ease;
  cursor: pointer;
}

.wp-file-tile:hover .wp-file-tile-slot .wp-file-tile-check,
.wp-file-tile-slot .wp-file-tile-check:focus-within,
.wp-file-tile-slot .wp-file-tile-check:has(input:checked) {
  opacity: 1;
}

/* 归档区文件夹删除按钮 */
.wp-file-tile-slot .wp-file-tile-del {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.12s ease;
  background: rgba(220, 38, 38, 0.9);
  color: white;
  border: none;
  border-radius: var(--wp-radius-sm);
  padding: 0.25rem 0.375rem;
  font-size: 0.875rem;
  cursor: pointer;
  line-height: 1;
}

.wp-file-tile:hover .wp-file-tile-slot .wp-file-tile-del,
.wp-file-tile-slot .wp-file-tile-del:focus {
  opacity: 1;
}

@media (hover: none) {
  .wp-file-tile-slot .wp-file-tile-del {
    opacity: 1;
  }
}

.wp-file-tile-body {
  border: none;
  background: transparent;
  margin: 0;
  padding: 0.375rem 0.25rem;
  border-radius: var(--wp-radius-sm);
  cursor: pointer;
  color: inherit;
  font: inherit;
  text-align: center;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  transition: background 0.15s ease;
}

.wp-file-tile:hover .wp-file-tile-body,
.wp-file-tile-body:hover,
.wp-file-tile-body:focus-visible {
  background: var(--wp-surface2);
  outline: none;
}

.wp-file-tile-body:focus-visible {
  box-shadow: 0 0 0 2px var(--wp-accent);
}

.wp-file-thumb {
  line-height: 1;
  user-select: none;
  pointer-events: none;
}

.wp-file-thumb--emoji {
  font-size: 3rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.12));
}

.wp-file-thumb--label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  min-width: 2.75rem;
}

.wp-file-thumb-ext {
  font-family: var(--wp-mono, ui-monospace, SFMono-Regular, Consolas, monospace);
  font-weight: 700;
  font-size: 0.8125rem;
  line-height: 1.15;
  padding: 0.45rem 0.35rem;
  border-radius: 10px;
  background: linear-gradient(145deg, #f5d547, #d9a514);
  color: #2d2204;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
  max-width: 100%;
  text-align: center;
  word-break: break-all;
}

.wp-file-thumb--blank {
  min-height: 3.25rem;
  min-width: 2.75rem;
  border-radius: 10px;
  border: 2px dashed var(--wp-edge);
  background: var(--wp-surface2);
  opacity: 0.5;
}

.wp-file-tile-caption {
  width: 100%;
}

.wp-file-tile-name {
  display: block;
  font-size: 0.78125rem;
  line-height: 1.35;
  word-break: break-word;
  color: var(--wp-text);
  max-height: 2.75em;
  overflow: hidden;
}

.wp-file-tile-meta {
  display: block;
  margin-top: 0.1875rem;
  font-size: 0.6875rem;
  color: var(--wp-text-tertiary);
  line-height: 1.25;
}

button.wp-file-tile--upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  border: 2px dashed var(--wp-edge);
  border-radius: var(--wp-radius-sm);
  min-height: 8.75rem;
  color: var(--wp-text-secondary);
  font-size: 0.8125rem;
  cursor: pointer;
  background: transparent;
  padding: 0.75rem;
  transition:
    border-color 0.15s ease,
    color 0.15s ease,
    background 0.15s ease;
}

button.wp-file-tile--upload:hover,
button.wp-file-tile--upload:focus-visible {
  border-color: var(--wp-accent);
  color: var(--wp-accent);
  background: var(--wp-surface2);
  outline: none;
}

.wp-file-tile-upload-icon {
  font-size: 2.25rem;
  font-weight: 300;
  line-height: 1;
}

@media (hover: none) {
  .wp-file-tile-slot .wp-file-tile-check,
  .wp-file-tile-slot .wp-file-tile-del {
    opacity: 1;
  }
}

@media (max-width: 560px) {
  .wp-files-grid {
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 1rem 0.75rem;
  }

  .wp-file-thumb--emoji {
    font-size: 2.5rem;
  }
}

/* 表格 */
.wp-table-shell {
  border-radius: var(--wp-radius);
  border: 1px solid var(--wp-edge);
  overflow-x: auto;
  margin-top: 0.5rem;
  background: var(--wp-surface);
}

.wp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.wp-table thead th {
  text-align: left;
  padding: 0.625rem 0.875rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--wp-text-tertiary);
  border-bottom: 1px solid var(--wp-edge);
  background: var(--wp-surface2);
  white-space: nowrap;
}

.wp-table tbody td {
  padding: 0.625rem 0.875rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--wp-edge);
  color: var(--wp-text);
}

.wp-table tbody tr:hover td {
  background: var(--wp-surface2);
}

.wp-table tbody tr:last-child td {
  border-bottom: none;
}

.wp-col-check {
  width: 2.5rem;
  text-align: center;
}

.wp-col-num {
  white-space: nowrap;
  font-family: var(--wp-mono);
  font-size: 0.75rem;
}

.wp-col-actions {
  white-space: nowrap;
}

.wp-table-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.75rem;
  font-size: 0.75rem;
  color: var(--wp-text-secondary);
}

.wp-check-all input {
  margin-right: 0.375rem;
}

/* 无障碍 · 表单标签隐藏（仍关联 input） */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* —— 团队成员 / 配额表：桌面层次分明，小屏叠成卡片 —— */
.wp-table-shell--member-list {
  background: var(--wp-surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.wp-table-shell--member-list > .wp-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  box-shadow: 0 1px 0 var(--wp-edge);
}

.wp-member-name {
  font-size: 0.9375rem;
}

.wp-member-role {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  background: var(--wp-accent-soft);
  color: var(--wp-accent-hover);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.wp-mono-inline {
  font-family: var(--wp-mono);
  font-size: 0.75rem;
}

.wp-stat-value {
  font-family: var(--wp-mono);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.wp-stat-value--muted {
  color: var(--wp-text-secondary);
}

.wp-input-quota-gib {
  width: 6.75rem;
  min-width: 5rem;
  max-width: 100%;
}

/* 子成员配额：默认锁定，需先点「更改配额」才可编辑，防误触 */
.child-quota-gib-input--locked,
.child-quota-gib-input:read-only {
  opacity: 0.9;
  cursor: default;
  background: var(--wp-surface3);
  color: var(--wp-text-secondary);
}

.wp-table-shell--member-list td[data-label="新配额 (GiB)"] .wp-input-quota-gib,
.wp-table-shell--member-list td[data-label="新配额 (GiB)"] > .wp-input-quota-gib {
  margin-right: 0.5rem;
}

.wp-table-shell--member-list td[data-label="操作"] {
  vertical-align: middle;
}

.wp-quota-op-btns {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.wp-table-shell--member-list .wp-btn-begin-quota,
.wp-table-shell--member-list .wp-btn-save-quota {
  white-space: nowrap;
}

.wp-member-empty-cell {
  padding: 0 !important;
  vertical-align: middle !important;
  border-bottom: none !important;
}

.wp-member-empty-cell .wp-empty {
  padding: 2rem 1rem;
}

.wp-member-empty-row:hover td {
  background: transparent !important;
}

@media (max-width: 719px) {
  .wp-table-shell--member-list {
    overflow-x: visible;
    background: transparent;
    border: none;
    box-shadow: none;
    margin-top: 0.75rem;
  }

  .wp-table-shell--member-list > .wp-table {
    display: block;
    width: 100%;
  }

  .wp-table-shell--member-list > .wp-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .wp-table-shell--member-list > .wp-table tbody {
    display: block;
  }

  .wp-table-shell--member-list > .wp-table tbody tr.wp-member-row {
    display: block;
    width: 100%;
    margin-bottom: 1rem;
    padding: 0.25rem 1rem 1rem;
    background: var(--wp-surface);
    border: 1px solid var(--wp-edge);
    border-radius: var(--wp-radius);
    box-shadow: var(--wp-shadow-sm);
  }

  .wp-table-shell--member-list > .wp-table tbody tr.wp-member-row:hover td {
    background: transparent !important;
  }

  .wp-table-shell--member-list > .wp-table tbody tr.wp-member-row td {
    display: grid;
    grid-template-columns: minmax(7rem, 36%) 1fr;
    align-items: center;
    gap: 0.35rem 0.75rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--wp-edge);
    font-size: 0.875rem;
    vertical-align: middle;
  }

  .wp-table-shell--member-list > .wp-table tbody tr.wp-member-row td:last-child {
    border-bottom: none;
    padding-top: 0.85rem;
    padding-bottom: 0.15rem;
  }

  .wp-table-shell--member-list > .wp-table tbody tr.wp-member-row td::before {
    content: attr(data-label);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--wp-text-tertiary);
    text-transform: none;
    letter-spacing: 0.02em;
    line-height: 1.3;
  }

  .wp-table-shell--member-list > .wp-table tbody tr.wp-member-row td[data-label="操作"] {
    grid-template-columns: 1fr;
  }

  .wp-table-shell--member-list .wp-quota-op-btns {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0.5rem;
  }

  .wp-table-shell--member-list > .wp-table tbody tr.wp-member-row td[data-label="操作"]::before {
    margin-bottom: 0.15rem;
  }

  .wp-table-shell--member-list .wp-input-quota-gib {
    width: 100% !important;
    min-height: 2.75rem;
    font-size: 1rem;
    padding: 0.5rem 0.65rem;
  }

  .wp-table-shell--member-list .wp-btn-begin-quota,
  .wp-table-shell--member-list .wp-btn-save-quota {
    width: 100%;
    min-height: 2.75rem;
    justify-content: center;
    font-size: 0.9rem;
  }

  .wp-table-shell--member-list .wp-member-empty-row {
    display: block;
  }

  .wp-table-shell--member-list .wp-member-empty-cell {
    display: block !important;
    width: 100% !important;
    border: 1px solid var(--wp-edge) !important;
    border-radius: var(--wp-radius);
    background: var(--wp-surface) !important;
  }

  .wp-table-shell--member-list .wp-member-empty-cell::before {
    content: none !important;
  }
}

/* 加载状态 */
.wp-loading {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1.25rem;
  color: var(--wp-text-secondary);
  font-size: 0.875rem;
}

.wp-spinner {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--wp-edge);
  border-top-color: var(--wp-accent);
  border-radius: 50%;
  animation: wp-spin 0.8s linear infinite;
}

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

/* 空状态 */
.wp-empty {
  padding: 3rem 2rem;
  text-align: center;
  color: var(--wp-text-secondary);
}

.wp-empty-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.wp-empty-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--wp-text);
  margin: 0 0 0.5rem;
}

.wp-empty-desc {
  font-size: 0.8125rem;
  max-width: 24rem;
  margin: 0 auto;
  line-height: 1.6;
}

/* 次级标题 */
.wp-sec-head {
  margin: 0 0 0.625rem;
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.wp-sec-muted {
  font-size: 0.8125rem;
  color: var(--wp-text-secondary);
  margin: 0 0 1rem;
  line-height: 1.65;
}

/* 警告内联 */
.wp-banner--warn-inline {
  font-size: 0.8125rem;
  padding: 0.875rem 1rem;
  margin: 0 0 0.875rem;
  border-radius: var(--wp-radius-sm);
  border: 1px solid var(--wp-warning-soft);
  background: var(--wp-warning-soft);
  color: var(--wp-warning);
}

.wp-banner--err-tight {
  margin: 0 0 0.625rem;
  padding: 0.625rem 0.875rem;
  font-size: 0.8125rem;
}

.wp-cap-sub {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
  font-weight: 700;
}

.wp-cap-panels-inner > .wp-cap-split:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.wp-cap-split {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--wp-edge);
}

.wp-cap-ul {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
  font-size: 0.8125rem;
  color: var(--wp-text-secondary);
  list-style: disc;
}

.wp-cap-ul li {
  margin-bottom: 0.375rem;
}

.wp-cap-matrix {
  margin-top: 0.625rem;
  max-height: min(420px, 60vh);
  overflow: auto;
  border-radius: var(--wp-radius);
  border: 1px solid var(--wp-edge);
}

.mono-small {
  font-family: var(--wp-mono);
  font-size: 0.6875rem;
}

/* 公告区域 */
.wp-announce-root {
  margin: 0;
}

.wp-ann-shell {
  background: var(--wp-surface);
  border: 1px solid var(--wp-edge);
  border-radius: var(--wp-radius-lg);
  padding: 1.5rem;
  box-shadow: var(--wp-shadow-sm);
}

.wp-ann-sec-head {
  margin-top: 0;
  font-size: 1.125rem;
}

.wp-ann-subhead {
  font-size: 0.9375rem;
  font-weight: 700;
  margin: 1.25rem 0 0.75rem;
  color: var(--wp-text);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.wp-ann-subhead::before {
  content: '';
  width: 4px;
  height: 16px;
  background: var(--wp-accent);
  border-radius: 2px;
}

.wp-ann-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.wp-ann-card {
  margin: 0;
  padding: 1rem;
  border-radius: var(--wp-radius);
  border: 1px solid var(--wp-edge);
  background: var(--wp-surface2);
  transition: all var(--wp-transition-fast);
}

.wp-ann-card:hover {
  border-color: var(--wp-edge-hover);
  box-shadow: var(--wp-shadow-sm);
}

.wp-ann-meta {
  font-size: 0.75rem;
  margin: 0 0 0.5rem;
  color: var(--wp-text-tertiary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.wp-ann-badge {
  display: inline-flex;
  font-size: 0.625rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: var(--wp-accent-soft);
  color: var(--wp-accent);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.wp-ann-badge--sent {
  background: var(--wp-info-soft);
  color: var(--wp-info);
}

.wp-ann-title {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
}

.wp-ann-body {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--wp-text-secondary);
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 单条公告默认折叠正文（摘要行始终可见） */
.wp-ann-item-details {
  border: none;
  margin: 0;
  padding: 0;
}

.wp-ann-item-details > summary.wp-ann-item-summary {
  list-style: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}

.wp-ann-item-details > summary.wp-ann-item-summary::-webkit-details-marker {
  display: none;
}

.wp-ann-sum-title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--wp-text);
}

.wp-ann-sum-hint {
  font-size: 0.75rem;
}

.wp-ann-item-inner {
  padding-top: 0.625rem;
  margin-top: 0.35rem;
  border-top: 1px solid var(--wp-edge);
}

/* 手风琴/折叠面板 */
.accordion.subtle {
  margin: 1rem 0;
  border-radius: var(--wp-radius);
  border: 1px solid var(--wp-edge);
  overflow: hidden;
}

.accordion.subtle summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.875rem 1rem;
  background: var(--wp-surface2);
  color: var(--wp-text);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: background var(--wp-transition-fast);
}

.accordion.subtle summary:hover {
  background: var(--wp-surface3);
}

.accordion.subtle summary::before {
  content: '▸';
  font-size: 0.625rem;
  color: var(--wp-accent);
  transition: transform var(--wp-transition-fast);
}

.accordion.subtle[open] summary::before {
  transform: rotate(90deg);
}

.accordion-body {
  padding: 1rem;
  background: var(--wp-surface);
}

/* 表单样式（动态生成） */
.field {
  margin: 0.875rem 0;
}

.field label span,
.field label {
  display: block;
  font-size: 0.75rem;
  color: var(--wp-text-secondary);
  margin-bottom: 0.375rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.field input[type="text"],
.field input[type="password"],
.field input[type="number"],
.field input[type="datetime-local"],
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  padding: 0.625rem 0.875rem;
  border-radius: var(--wp-radius-sm);
  border: 1px solid var(--wp-edge);
  background: var(--wp-surface2);
  color: var(--wp-text);
  transition: all var(--wp-transition-fast);
  font-size: 0.875rem;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--wp-edge-hover);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--wp-accent);
  box-shadow: 0 0 0 3px var(--wp-accent-soft);
}

.field textarea {
  resize: vertical;
  min-height: 100px;
  font-family: var(--wp-font);
  line-height: 1.6;
}

.field-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
}

.stack-form button[type="submit"] {
  margin-top: 0.5rem;
}

/* 徽章 */
.badge-role {
  font-family: var(--wp-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  background: var(--wp-surface2);
  color: var(--wp-text-secondary);
}

/* 配额详情 */
.quota-detail,
.quota-hint {
  margin: 0.5rem 0 0 !important;
  font-size: 0.8125rem !important;
  color: var(--wp-text-secondary);
  line-height: 1.65;
}

/* 旧按钮类兼容 */
.btn-secondary:not(.wp-btn-compat) {
  appearance: none;
  font: inherit;
  cursor: pointer;
  border-radius: var(--wp-radius-sm);
  border: 1px solid var(--wp-edge);
  background: var(--wp-surface2);
  padding: 0.375rem 0.625rem;
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--wp-text);
  transition: all var(--wp-transition-fast);
}

.btn-secondary:not(.wp-btn-compat):hover {
  background: var(--wp-surface3);
  border-color: var(--wp-edge-hover);
}

.btn-danger:not(.wp-btn-compat) {
  appearance: none;
  font: inherit;
  cursor: pointer;
  border-radius: var(--wp-radius-sm);
  padding: 0.375rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid rgba(248, 81, 73, 0.4);
  background: var(--wp-danger-soft);
  color: var(--wp-danger);
  transition: all var(--wp-transition-fast);
}

.btn-danger:not(.wp-btn-compat):hover {
  background: rgba(248, 81, 73, 0.2);
}

.btn-primary:not(.wp-btn-compat) {
  appearance: none;
  font: inherit;
  cursor: pointer;
  border-radius: var(--wp-radius-sm);
  padding: 0.5rem 0.875rem;
  font-weight: 600;
  font-size: 0.8125rem;
  border: none;
  background: linear-gradient(135deg, var(--wp-accent), var(--wp-accent-dim));
  color: white;
  transition: all var(--wp-transition-fast);
}

.btn-primary:not(.wp-btn-compat):hover {
  box-shadow: 0 2px 8px rgba(45, 212, 191, 0.3);
  transform: translateY(-1px);
}

@media (prefers-color-scheme: light) {
  .btn-primary:not(.wp-btn-compat) {
    color: white;
  }
}

/* 面包屑和链接 */
.wp-crumbtrail .crumb {
  border: none;
  background: none;
  color: var(--wp-accent);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  padding: 0.125rem 0.25rem;
  border-radius: 4px;
  transition: all var(--wp-transition-fast);
}

.wp-crumbtrail .crumb:hover {
  background: var(--wp-accent-soft);
  text-decoration: none;
}

.crumb-sep {
  opacity: 0.4;
  color: var(--wp-text-tertiary);
}

.linklike {
  border: none;
  background: none;
  color: var(--wp-accent);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  padding: 0;
  transition: all var(--wp-transition-fast);
}

.linklike:hover {
  color: var(--wp-accent-hover);
  text-decoration: underline;
}

.files-meta {
  display: inline-block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--wp-text-tertiary);
}

/* 窄屏顶栏：两行布局 + Tab 单行横滑，避免导航按钮折行占满半屏 */
@media (max-width: 768px) {
  .wp-topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand logout"
      "nav nav";
    align-items: center;
    column-gap: 0.5rem;
    row-gap: 0.3rem;
    padding: 0.35rem 0.5rem;
  }

  .wp-topbar__brand {
    grid-area: brand;
    min-width: 0;
  }

  .wp-topbar__title {
    font-size: 0.9rem;
  }

  .wp-topbar #btn-logout {
    grid-area: logout;
    justify-self: end;
    flex-shrink: 0;
    padding: 0.3rem 0.55rem;
    font-size: 0.75rem;
    white-space: nowrap;
  }

  .wp-topbar > .wp-nav {
    grid-area: nav;
    width: 100%;
    max-width: 100%;
    flex: none;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    gap: 0.25rem;
    padding: 0.05rem 0 0.15rem;
    scrollbar-width: thin;
  }

  .wp-nav__btn {
    flex: 0 0 auto;
    padding: 0.32rem 0.55rem;
    font-size: 0.72rem;
  }

  .wp-nav__btn.is-active::after {
    bottom: 0;
    left: 10%;
    right: 10%;
  }
}

/* 响应式调整 */
@media (max-width: 640px) {
  .wp-view--login.is-active {
    padding: max(0.75rem, env(safe-area-inset-top)) 0.875rem max(0.75rem, env(safe-area-inset-bottom));
  }
  
  .wp-login-card {
    padding: 1.5rem 1.25rem 1.75rem;
  }
  
  .wp-main {
    padding: 1rem;
  }
  
  .wp-card--pad {
    padding: 1rem;
  }
  
  .wp-table-shell {
    border-radius: var(--wp-radius-sm);
  }
  
  .wp-table thead th,
  .wp-table tbody td {
    padding: 0.5rem 0.625rem;
  }
}

/* 打印样式 */
@media print {
  .wp-bg,
  .wp-topbar,
  .wp-nav,
  .wp-btn {
    display: none !important;
  }
  
  .wp-card {
    box-shadow: none;
    border: 1px solid #ccc;
  }
}

/* 焦点可见性 */
:focus-visible {
  outline: 2px solid var(--wp-accent);
  outline-offset: 2px;
}

/* 减少动画 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 选中文字样式 */
::selection {
  background: var(--wp-accent-soft);
  color: var(--wp-text);
}

/* ============================================================
   v1.3 文件管理器增强样式
   - 下拉式菜单
   - 文件项操作按钮
   - 移动/重命名对话框
   ============================================================ */

/* 文件管理器工具栏 */
.wp-files-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.75rem;
}

/* 下拉菜单容器 */
.wp-dropdown {
  position: relative;
  display: inline-block;
}

/* 下拉菜单 */
.wp-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.25rem;
  min-width: 160px;
  background: var(--wp-surface);
  border: 1px solid var(--wp-edge);
  border-radius: var(--wp-radius-sm);
  box-shadow: var(--wp-shadow);
  z-index: 1000;
  padding: 0.375rem 0;
}

/* 下拉菜单显示控制使用 style.display，不使用 hidden 类 */

/* 下拉菜单项 */
.wp-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: background var(--wp-transition-fast);
  color: var(--wp-text);
}

.wp-dropdown-item:hover {
  background: var(--wp-surface2);
}

.wp-dropdown-item--danger {
  color: var(--wp-danger);
}

.wp-dropdown-item--danger:hover {
  background: var(--wp-danger-soft);
}

.wp-dropdown-icon {
  font-size: 1rem;
  flex-shrink: 0;
}

.wp-dropdown-label {
  font-size: 0.875rem;
  white-space: nowrap;
}

/* 下拉菜单分隔线 */
.wp-dropdown-divider {
  height: 1px;
  background: var(--wp-edge);
  margin: 0.375rem 0.5rem;
}

/* 文件项操作按钮区域 */
.wp-file-tile-actions {
  display: none;
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  gap: 0.25rem;
  z-index: 10;
}

.wp-file-tile:hover .wp-file-tile-actions {
  display: flex;
}

/* 文件项操作按钮 */
.wp-file-tile-action-btn {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: var(--wp-radius-sm);
  background: var(--wp-surface);
  border: 1px solid var(--wp-edge);
  cursor: pointer;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--wp-transition-fast);
  box-shadow: var(--wp-shadow-sm);
}

.wp-file-tile-action-btn:hover {
  background: var(--wp-surface2);
  border-color: var(--wp-edge-hover);
}

.wp-file-tile-action-btn--danger:hover {
  background: var(--wp-danger-soft);
  border-color: var(--wp-danger);
}

/* 文件项插槽（容纳复选框和操作按钮） */
.wp-file-tile-slot {
  position: relative;
  height: 100%;
  width: 100%;
}

/* 快速新建文件夹输入框区域 */
.wp-mkdir-quick {
  background: var(--wp-surface2);
  padding: 0.5rem;
  border-radius: var(--wp-radius-sm);
  border: 1px solid var(--wp-edge);
}

/* 移动/重命名对话框样式增强 */
.wp-move-dialog,
.wp-rename-dialog {
  max-width: 90vw;
}

/* 对话框输入框样式 */
.wp-move-dialog input,
.wp-rename-dialog input,
.wp-move-dialog select {
  font-family: inherit;
  font-size: 0.875rem;
}

/* 响应式：移动端下拉菜单全宽 */
@media (max-width: 640px) {
  .wp-dropdown-menu {
    position: fixed;
    top: auto;
    left: 0.5rem;
    right: 0.5rem;
    bottom: 0.5rem;
    min-width: auto;
    border-radius: var(--wp-radius);
    box-shadow: var(--wp-shadow-lg);
  }

  .wp-dropdown-item {
    padding: 0.75rem 1rem;
  }

  .wp-file-tile-actions {
    display: flex;
    position: relative;
    top: auto;
    right: auto;
    margin-top: 0.25rem;
  }
}