/* ==========================================================================
   RegCodeUI.css — 设计令牌与通用组件增强
   适用页面：login.html / RegCode.html / Admin.html
   加载顺序：必须在各页内联 <style> 之前引入，页面内联样式可继续覆盖本文件。
   约束：不改动任何布局结构与显隐机制，仅提供设计令牌与视觉增强。
   ========================================================================== */

:root {
  /* 品牌色阶：深青蓝（sky → cyan） */
  --brand-50: #f0f9ff;
  --brand-100: #e0f2fe;
  --brand-200: #bae6fd;
  --brand-500: #0ea5e9;
  --brand-600: #0284c7;
  --brand-700: #0369a1;
  --brand-800: #075985;
  --accent: var(--brand-700);
  --accent2: #0e7490;
  --brand-gradient: linear-gradient(135deg, var(--brand-700), var(--accent2));
  --accent-soft-bg: linear-gradient(135deg, #f0f9ff, #ecfeff);

  /* 中性色（slate） */
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --border: var(--slate-200);
  --text-primary: var(--slate-900);
  --text-secondary: var(--slate-600);
  --text-muted: var(--slate-400);

  /* 语义色 */
  --success-text: #15803d;
  --success-bg: #f0fdf4;
  --success-border: #86efac;
  --danger-text: #dc2626;
  --danger-bg: #fef2f2;
  --danger-border: #fecaca;
  --warn-text: #b45309;
  --warn-bg: #fffbeb;
  --warn-border: #fde68a;

  /* 页面外壳背景：三页统一的浅色清爽渐变 */
  --shell-bg:
    radial-gradient(1100px 560px at 12% -10%, rgba(56, 189, 248, 0.16), transparent 55%),
    radial-gradient(900px 520px at 100% 18%, rgba(45, 212, 191, 0.13), transparent 52%),
    linear-gradient(150deg, #f2f7fc 0%, #eef5fa 46%, #ecf7f5 100%);

  /* 圆角 */
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 20px;
  --r-pill: 999px;

  /* 阴影 */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 4px 10px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 2px 6px rgba(15, 23, 42, 0.06), 0 12px 28px rgba(15, 23, 42, 0.1);
  --shadow-lg: 0 4px 10px rgba(15, 23, 42, 0.06), 0 24px 56px rgba(15, 23, 42, 0.16);
  --shadow-brand: 0 6px 20px rgba(3, 105, 161, 0.28);
  --focus-ring: 0 0 0 3px rgba(2, 132, 199, 0.22);

  /* 动效 */
  --t-fast: 0.15s;
  --t-med: 0.25s;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* 字体 */
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
}

/* --------------------------------------------------------------------------
   按钮：统一过渡 / 焦点环（页面内联样式可覆盖）
   -------------------------------------------------------------------------- */
.btn,
.mini-btn,
.pid-action-btn,
.logout-btn,
.mgr-btn,
.btn-paste,
.btn-clear,
.pid-dropdown-btn,
.btn-copy,
.license-ref-view {
  transition:
    background var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease),
    filter var(--t-fast) var(--ease);
}

.btn:focus-visible,
.mini-btn:focus-visible,
.pid-action-btn:focus-visible,
.logout-btn:focus-visible,
.mgr-btn:focus-visible,
.btn-paste:focus-visible,
.btn-clear:focus-visible,
.pid-dropdown-btn:focus-visible,
.btn-copy:focus-visible,
.btn-calc:focus-visible,
.btn-login:focus-visible,
.primary-btn:focus-visible,
.nav-item:focus-visible,
.table-sort:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* hover 仅在精确指针设备启用，避免触屏粘滞 */
@media (hover: hover) {
  .btn:hover,
  .mini-btn:hover,
  .pid-action-btn:hover,
  .logout-btn:hover,
  .mgr-btn:hover,
  .btn-paste:hover,
  .btn-clear:hover,
  .pid-dropdown-btn:hover {
    background: var(--brand-50);
    border-color: var(--brand-500);
    box-shadow: var(--shadow-xs);
  }

  .btn-copy:hover {
    background: var(--success-bg);
    border-color: var(--success-border);
    box-shadow: var(--shadow-xs);
  }

  .nav-item:hover {
    border-color: var(--brand-500);
    color: var(--brand-700);
  }

  .license-ref-view:hover {
    color: var(--brand-800);
  }

  /* 主按钮：亮度提升 + 上浮 + 阴影加深 */
  .btn.primary:hover,
  .primary-btn:hover,
  .btn-calc:hover,
  .btn-login:hover,
  .pid-modal-actions .btn-confirm:hover {
    filter: brightness(1.07);
    transform: translateY(-1px);
    box-shadow: 0 8px 26px rgba(3, 105, 161, 0.36);
  }

  /* 危险按钮 */
  .btn.danger:hover,
  .pid-action-btn.danger:hover {
    background: var(--danger-bg);
    border-color: var(--danger-text);
    box-shadow: var(--shadow-xs);
  }
}

/* --------------------------------------------------------------------------
   输入控件：统一 focus 表现（login/RegCode 内联规则优先级更高）
   -------------------------------------------------------------------------- */
input:focus,
select:focus,
textarea:focus {
  border-color: var(--brand-600);
  box-shadow: var(--focus-ring);
  outline: none;
}

/* --------------------------------------------------------------------------
   表格：行 hover + 横向滚动阴影提示
   -------------------------------------------------------------------------- */
@media (hover: hover) {
  tbody tr:hover {
    background: var(--slate-50);
  }
}

.table-scroll {
  background:
    linear-gradient(90deg, #fff 30%, transparent),
    linear-gradient(90deg, transparent, #fff 70%) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(15, 23, 42, 0.12), transparent),
    radial-gradient(farthest-side at 100% 50%, rgba(15, 23, 42, 0.12), transparent) 100% 0;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}

/* --------------------------------------------------------------------------
   状态徽章：补同色系描边（颜色仍以页面内联为准）
   -------------------------------------------------------------------------- */
.status-tag {
  border: 1px solid transparent;
}
.status-tag.active {
  border-color: #bbf7d0;
}
.status-tag.revoked {
  border-color: #fecaca;
}

/* --------------------------------------------------------------------------
   错误提示：非空时前置警示图标（纯 CSS，不影响 JS 文案）
   -------------------------------------------------------------------------- */
.err:not(:empty)::before,
.error-msg:not(:empty)::before,
.pid-modal-error.show::before {
  content: "⚠ ";
}

/* --------------------------------------------------------------------------
   密码显示/隐藏切换按钮（login / Admin 共用）
   -------------------------------------------------------------------------- */
input::-ms-reveal,
input::-ms-clear {
  display: none;
}

.pwd-wrap {
  position: relative;
  min-width: 0;
}

.pwd-wrap input {
  padding-right: 44px;
}

.pwd-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 8px;
  color: var(--slate-400);
  transition: color var(--t-fast), background var(--t-fast);
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
  .pwd-toggle:hover {
    color: var(--brand-600);
    background: rgba(2, 132, 199, 0.08);
  }
}

.pwd-toggle:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* --------------------------------------------------------------------------
   模态框入场动画（display 切换安全：使用 keyframes 而非 transition）
   -------------------------------------------------------------------------- */
@keyframes modalIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.modal-card,
.modal {
  animation: modalIn var(--t-med) var(--ease);
}

/* --------------------------------------------------------------------------
   动效降级：尊重系统减少动态偏好
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}