/* ================================================================
   Cloud Drive Design System v2.0
   通用组件 + 工具类（与 harmony-theme.css 配合）
   ================================================================ */

/* --- Badge --- */
.badge{display:inline-flex;align-items:center;padding:2px 10px;border-radius:var(--r-full);font-size:.75rem;font-weight:600}
.badge-primary{background:var(--c-primary-100);color:var(--c-primary-dark)}
.badge-success{background:rgba(16,185,129,.1);color:#059669}

/* --- Progress --- */
.progress-bar{height:4px;background:var(--border-light);border-radius:var(--r-full);overflow:hidden}
.progress-fill{height:100%;border-radius:var(--r-full);background:var(--c-primary);transition:width .4s ease}

/* --- 认证面板（登录/注册弹窗） --- */
.auth-panel{
  position:fixed;inset:0;z-index:8000;
  background:rgba(0,0,0,.45);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;pointer-events:none;transition:opacity .25s ease;
}
.auth-panel.active{opacity:1;pointer-events:auto}
.auth-box{
  background:var(--bg-surface);border-radius:var(--r-xl);
  padding:32px 28px;width:100%;max-width:400px;
  box-shadow:0 8px 40px rgba(0,0,0,.12);position:relative;
  transform:translateY(16px);transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.auth-panel.active .auth-box{transform:translateY(0)}
.auth-close{
  position:absolute;top:12px;right:14px;
  width:28px;height:28px;border-radius:50%;
  border:none;background:var(--border-light);color:var(--text-muted);
  font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all var(--t-fast);
}
.auth-close:hover{background:var(--c-primary-50);color:var(--c-primary)}
.auth-header{text-align:center;margin-bottom:20px}
.auth-header h2{font-size:1.25rem;font-weight:700;color:var(--text-primary);margin-bottom:4px}
.auth-header p{font-size:.875rem;color:var(--text-muted)}
.auth-form{display:flex;flex-direction:column;gap:14px}
.auth-error{
  padding:8px 12px;border-radius:var(--r-sm);
  background:rgba(239,68,68,.06);border:1px solid rgba(239,68,68,.12);
  color:var(--c-danger);font-size:.8125rem;display:none;
}
.auth-error.show{display:block}
.auth-switch{text-align:center;margin-top:16px;font-size:.8125rem;color:var(--text-muted)}
.auth-switch a{color:var(--c-primary);cursor:pointer;font-weight:600}

/* --- 工具类 --- */
.text-center{text-align:center}.text-muted{color:var(--text-muted)}.text-secondary{color:var(--text-secondary)}
.text-sm{font-size:.8125rem}.text-xs{font-size:.75rem}.font-bold{font-weight:700}
.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}
.justify-center{justify-content:center}.justify-between{justify-content:space-between}
.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}
.w-full{width:100%}.mx-auto{margin-left:auto;margin-right:auto}
.mt-2{margin-top:8px}.mt-4{margin-top:16px}.mb-2{margin-bottom:8px}.mb-4{margin-bottom:16px}
.hidden{display:none!important}