/* ============ 基础 ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --available: #22c55e;
  --available-light: #dcfce7;
  --unavailable: #f1f5f9;
  --unavailable-border: #e2e8f0;
  --assigned: #2563eb;
  --partial: #f59e0b;
  --danger: #ef4444;
  --text: #1e293b;
  --text-light: #64748b;
  --bg: #f8fafc;
  --border: #e2e8f0;
}

body {
  font-family: "Microsoft YaHei", "PingFang SC", -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
}

.app-header {
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  color: #fff;
  padding: 20px 28px;
}
.app-header h1 { font-size: 22px; font-weight: 700; }
.subtitle { margin-top: 6px; font-size: 13px; opacity: .85; }

/* ============ 标签页 ============ */
.tabs {
  display: flex;
  gap: 4px;
  padding: 0 28px;
  background: #fff;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
}
.tab-btn {
  padding: 14px 22px;
  border: none;
  background: none;
  font-size: 15px;
  color: var(--text-light);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: all .15s;
}
.tab-btn:hover { color: var(--primary); }
.tab-btn.active {
  color: var(--primary);
  font-weight: 700;
  border-bottom-color: var(--primary);
}

main { padding: 20px 28px 60px; max-width: 1500px; margin: 0 auto; }
.view { display: none; }
.view.active { display: block; }

/* ============ 面板 ============ */
.panel {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
}
.panel h2 { font-size: 16px; margin-bottom: 14px; }
.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}
.panel-head h2 { margin-bottom: 0; }

/* ============ 按钮 / 输入 ============ */
.btn {
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 14px;
  transition: all .15s;
  white-space: nowrap;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-ghost { background: #fff; border-color: var(--border); color: var(--text); }
.btn-ghost:hover { border-color: var(--primary); color: var(--primary); }
.btn-danger { background: #fff; border-color: #fecaca; color: var(--danger); }
.btn-danger:hover { background: #fef2f2; }
.btn-sm { padding: 4px 10px; font-size: 12px; }

input[type="text"], input[type="number"], select {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  outline: none;
  background: #fff;
}
input:focus, select:focus { border-color: var(--primary); }

/* ============ 员工管理 ============ */
.employee-form { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }

.employee-list { display: flex; flex-wrap: wrap; gap: 8px; }
.emp-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 20px;
  padding: 5px 8px 5px 14px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.emp-chip:hover { border-color: var(--primary); box-shadow: 0 1px 4px rgba(37,99,235,.2); }
.emp-chip .emp-color {
  width: 10px; height: 10px; border-radius: 50%;
}
.emp-chip .emp-name { font-weight: 600; }
.emp-chip .emp-meta {
  font-style: normal;
  font-size: 12px;
  color: var(--text-light);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1px 8px;
}
.emp-chip .emp-edit, .emp-chip .emp-del {
  border: none; background: none; color: #94a3b8;
  cursor: pointer; font-size: 14px; line-height: 1; padding: 0 3px;
}
.emp-chip .emp-edit:hover { color: var(--primary); }
.emp-chip .emp-del:hover { color: var(--danger); font-size: 15px; }
.empty-hint { color: var(--text-light); font-size: 13px; padding: 6px 0; }

/* ============ 星期切换 ============ */
.day-tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.day-tab {
  padding: 7px 16px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #fff;
  cursor: pointer;
  font-size: 13px;
}
.day-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ============ 可用时间网格 ============ */
.legend { display: flex; align-items: center; gap: 16px; font-size: 12px; color: var(--text-light); flex-wrap: wrap; }
.legend-item { display: flex; align-items: center; gap: 5px; }
.dot { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.dot-available { background: var(--available); }
.dot-unavailable { background: var(--unavailable); border: 1px solid var(--unavailable-border); }
.tip { color: #94a3b8; }

.grid-wrapper { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; }

.availability-grid {
  display: grid;
  min-width: max-content;
}
.grid-corner, .grid-head, .grid-row-name, .grid-cell {
  height: 34px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.grid-corner, .grid-head, .grid-row-name {
  background: #f8fafc;
  font-size: 11px;
  color: var(--text-light);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.grid-corner { position: sticky; top: 0; left: 0; z-index: 6; min-width: 96px; }
.grid-head {
  position: sticky;
  top: 0;
  z-index: 5;
  min-width: 30px;
  cursor: pointer;
  user-select: none;
  flex-direction: column;
  line-height: 1.25;
}
.grid-head:hover { background: #e0e7ff; color: var(--primary); }
.grid-head.next-day { color: #9333ea; }
.grid-row-name {
  position: sticky;
  left: 0;
  z-index: 4;
  min-width: 96px;
  padding: 0 8px;
  justify-content: flex-start;
  font-weight: 600;
  color: var(--text);
  background: #f8fafc;
}
.grid-cell {
  min-width: 30px;
  cursor: pointer;
  border-right-color: rgba(0,0,0,.04);
  transition: transform .05s;
}
.grid-cell.available { background: var(--available); }
.grid-cell.unavailable { background: var(--unavailable); }
.grid-cell:hover { outline: 2px solid var(--primary); outline-offset: -2px; z-index: 2; position: relative; }
/* 整点分隔线 */
.grid-cell.hour-start { border-left: 1px solid #cbd5e1; }

.grid-actions { display: flex; gap: 10px; margin-top: 12px; }

/* ============ 可用时间工具栏（员工筛选） ============ */
.avail-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.avail-filter-label {
  font-size: 14px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}
.avail-filter-label select {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  background: #fff;
  color: var(--text);
  cursor: pointer;
}

/* ============ 排班表单 ============ */
.shift-form {
  display: flex;
  gap: 14px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.shift-form label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  color: var(--text-light);
}
.shift-form select, .shift-form input { min-width: 120px; }
.shift-form .shift-note-label input { min-width: 180px; }

.shift-actions { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }

/* ============ 星期筛选栏 ============ */
.day-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.df-btn {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text-light);
  transition: all .12s;
}
.df-btn:hover { border-color: var(--primary); color: var(--primary); }
.df-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-weight: 600;
}
.df-btn.zero { opacity: .45; }
.df-btn .df-count { font-size: 11px; opacity: .8; margin-left: 2px; }

/* ============ 班次卡片 ============ */
.shift-list { display: flex; flex-direction: column; gap: 10px; }
.shift-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.shift-card.full { border-left: 4px solid var(--available); }
.shift-card.partial { border-left: 4px solid var(--partial); }

/* 展开/收起箭头 */
.shift-toggle {
  border: none;
  background: none;
  cursor: pointer;
  color: #94a3b8;
  font-size: 14px;
  line-height: 1.6;
  padding: 0;
}
.shift-toggle:hover { color: var(--primary); }
.shift-toggle .chev { display: inline-block; transition: transform .15s; }
.shift-card:not(.collapsed) .shift-toggle .chev { transform: rotate(90deg); }

/* 简略（收起）态：只保留一行标题信息，隐藏人员安排与操作 */
.shift-card.collapsed { padding: 9px 14px; }
.shift-card.collapsed .shift-assign,
.shift-card.collapsed .shift-card-actions { display: none; }
.shift-card.collapsed .shift-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  min-width: 0;
}
.shift-card.collapsed .shift-info .shift-meta { margin-top: 0; }
.shift-card.collapsed .shift-info .shift-status { margin-top: 0; }

.shift-info { min-width: 210px; }
.shift-info .shift-title { font-weight: 700; font-size: 15px; }
.shift-info .shift-meta { color: var(--text-light); font-size: 13px; margin-top: 4px; }
.shift-status {
  display: inline-block;
  font-size: 12px;
  padding: 2px 10px;
  border-radius: 12px;
  margin-top: 6px;
}
.shift-status.full { background: #dcfce7; color: #16a34a; }
.shift-status.partial { background: #fef3c7; color: #d97706; }

.shift-assign { flex: 1; min-width: 280px; }
.shift-assign .assign-label { font-size: 12px; color: var(--text-light); margin-bottom: 6px; }
.assign-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.assign-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 14px;
  padding: 3px 6px 3px 10px;
  font-size: 13px;
}
.assign-chip .chip-x {
  border: none; background: none; cursor: pointer;
  color: #94a3b8; font-size: 13px; line-height: 1;
}
.assign-chip .chip-x:hover { color: var(--danger); }

.candidate-select { display: flex; gap: 6px; }
.candidate-select select { flex: 1; font-size: 13px; }
.candidate-select select:disabled { background: #f1f5f9; cursor: not-allowed; }

.shift-card-actions { display: flex; flex-direction: column; gap: 6px; }

/* ============ 总览（每天独立一行，星期列固定在左侧） ============ */
.overview-grid {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: auto;
  background: #fff;
  max-height: 560px;
}
.ov-inner { min-width: max-content; }
.ov-header-row { display: flex; position: sticky; top: 0; z-index: 4; }
.ov-row { display: flex; }

/* 固定在左侧的星期列（横向滚动时始终可见，永远对齐） */
.ov-corner, .ov-day {
  width: 70px;
  min-width: 70px;
  flex: 0 0 70px;
  position: sticky;
  left: 0;
  z-index: 5;
  background: #f8fafc;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ov-corner {
  z-index: 6;
  height: 28px;
  font-size: 11px;
  color: #94a3b8;
  font-weight: 500;
}
.ov-day { height: 46px; font-size: 12px; font-weight: 600; }

/* 时间轨道：29 个固定宽度列（28 挡位 + 01:00 收班列），表头与每天轨道完全对齐 */
.ov-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(29, 46px);
}
.ov-head-slot {
  background: #f8fafc;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #94a3b8;
  height: 28px;
}
.ov-head-slot.hour-start { border-left: 1px solid #cbd5e1; }
/* 01:00 收班列：表头用紫色文字表示跨午夜 */
.ov-head-slot.ov-close { color: #9333ea; font-weight: 700; }
.ov-slot {
  height: 46px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.ov-slot.hour-start { border-left: 1px solid #cbd5e1; }

/* 班次色块：绝对定位在当天轨道内，不参与背景格子布局，可点击 */
.ov-shift {
  position: absolute;
  z-index: 2;
  border-radius: 5px;
  padding: 3px 6px;
  font-size: 11px;
  color: #fff;
  overflow: hidden;
  line-height: 1.35;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: transform .08s;
}
.ov-shift:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,.22); }
.ov-shift.full { background: var(--assigned); }
.ov-shift.partial { background: var(--partial); }
.ov-shift .ov-note { font-weight: 700; }
.ov-shift .ov-names { display: block; opacity: .95; }

/* ============ 班次详情弹窗 ============ */
.sd-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-light);
  margin-bottom: 6px;
}
.sd-badge {
  padding: 2px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}
.sd-badge.ok { background: #dcfce7; color: #15803d; }
.sd-badge.warn { background: #ffedd5; color: #c2410c; }
.sd-note { width: 100%; }
#shift-modal-body h4 { font-size: 13px; margin: 14px 0 8px; color: #334155; }
.sd-emp {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 8px;
}
.sd-emp-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sd-emp-head i { width: 9px; height: 9px; border-radius: 50%; }
.sd-emp-head b { font-size: 14px; }
.sd-tag {
  background: #f1f5f9;
  color: #475569;
  border-radius: 4px;
  padding: 1px 8px;
  font-size: 12px;
}
.sd-phone {
  margin-left: auto;
  font-size: 13px;
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}
.sd-phone:hover { text-decoration: underline; }
.sd-phone.none { color: #cbd5e1; font-weight: 400; }
.sd-line { font-size: 12px; color: var(--text-light); margin-top: 4px; }

/* ============ 工时统计 ============ */
.hours-stats { display: flex; flex-wrap: wrap; gap: 10px; }
.hours-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 16px;
  min-width: 130px;
}
.hours-card .h-name { font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.hours-card .h-value { font-size: 20px; font-weight: 700; color: var(--primary); margin-top: 2px; }
.hours-card .h-unit { font-size: 12px; color: var(--text-light); font-weight: 400; }

/* ============ 弹窗 ============ */
.modal-mask {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}
.modal {
  background: #fff;
  border-radius: 10px;
  padding: 22px;
  width: 360px;
  max-width: 90vw;
}
.modal.modal-wide { width: 460px; }
.modal h3 { font-size: 16px; margin-bottom: 16px; }

/* 员工资料表单 */
.emp-edit-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
  margin-bottom: 18px;
}
.emp-edit-form label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 13px;
  color: var(--text-light);
}
.emp-edit-form label.full { grid-column: 1 / -1; }
.emp-edit-form label i { color: var(--danger); font-style: normal; }
.emp-edit-form input, .emp-edit-form select { width: 100%; }
.copy-days { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.copy-day-opt {
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  font-size: 13px;
}
.copy-day-opt.selected { background: var(--primary); color: #fff; border-color: var(--primary); }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* ============ Toast ============ */
.toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  background: #1e293b;
  color: #fff;
  padding: 10px 22px;
  border-radius: 8px;
  font-size: 14px;
  z-index: 100;
  animation: toast-in .2s;
}
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.hidden { display: none !important; }

/* ============================================================
 * 登录 / 权限
 * ============================================================ */
body.logged-out #app-shell { display: none; }
body.logged-in #login-overlay { display: none; }

#login-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #2563eb 0%, #4f46e5 60%, #7c3aed 100%);
  padding: 20px;
}
#login-card {
  width: 100%;
  max-width: 380px;
  background: #fff;
  border-radius: 16px;
  padding: 36px 32px 28px;
  box-shadow: 0 20px 60px rgba(15, 23, 42, .35);
}
.login-logo {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  color: #fff;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#login-card h2 { text-align: center; font-size: 20px; }
.login-sub {
  text-align: center;
  color: var(--text-light);
  font-size: 13px;
  margin: 6px 0 24px;
}
#login-card label {
  display: block;
  font-size: 13px;
  color: var(--text-light);
  margin: 14px 0 6px;
}
#login-card input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  transition: border-color .15s;
}
#login-card input:focus { border-color: var(--primary); }
.login-error {
  margin-top: 12px;
  font-size: 13px;
  color: var(--danger);
  min-height: 18px;
}
.login-btn {
  width: 100%;
  margin-top: 20px;
  padding: 11px;
  border: none;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
}
.login-btn:hover { background: var(--primary-dark); }
.login-btn:disabled { background: #93c5fd; cursor: not-allowed; }
.login-hint {
  margin-top: 18px;
  padding: 8px 10px;
  background: #f1f5f9;
  border-radius: 8px;
  font-size: 12px;
  color: var(--text-light);
  text-align: center;
}

/* 顶栏当前用户 */
.app-header { position: relative; }
.user-chip {
  position: absolute;
  top: 16px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, .15);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px;
  padding: 5px 8px 5px 6px;
}
.uc-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: var(--primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}
.uc-info { line-height: 1.25; }
.uc-name { font-size: 13px; font-weight: 700; }
.uc-role { font-size: 11px; opacity: .85; }
#logout-btn {
  border: none;
  background: rgba(255, 255, 255, .18);
  color: #fff;
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s;
}
#logout-btn:hover { background: rgba(255, 255, 255, .32); }

/* 只读提示条 */
.readonly-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
  font-size: 13px;
  padding: 9px 14px;
  border-radius: 8px;
  margin-bottom: 14px;
}

/* 无员工管理权限：可用时间表格只读 */
body.avail-readonly .grid-cell { cursor: default !important; pointer-events: none; }
body.avail-readonly .day-head-cell { pointer-events: none; }
body.avail-readonly .grid-cell.on.primary { background: var(--available); opacity: .8; }

/* 无编辑权限的员工 chip */
.emp-chip.readonly { cursor: default; }
.emp-chip.readonly:hover { box-shadow: none; }
.emp-chip.readonly .emp-actions { display: none; }

/* ============================================================
 * 账号管理
 * ============================================================ */
.user-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 720px;
}
.user-card {
  background: #fff;
  border: 1px solid var(--border);
  border-left: 4px solid var(--text-light);
  border-radius: 10px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.user-card.role-admin { border-left-color: #7c3aed; }
.user-card.role-staff { border-left-color: #22c55e; }
.user-card.role-schedule { border-left-color: #f59e0b; }
.user-card.role-viewer { border-left-color: #64748b; }
.uc-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.uc-badge {
  font-size: 12px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 999px;
  color: #fff;
  background: var(--text-light);
}
.role-admin .uc-badge { background: #7c3aed; }
.role-staff .uc-badge { background: #16a34a; }
.role-schedule .uc-badge { background: #d97706; }
.role-viewer .uc-badge { background: #64748b; }
.uc-username { font-size: 15px; }
.uc-self { font-size: 12px; color: var(--primary); }
.uc-date { font-size: 12px; color: var(--text-light); }
.uc-actions { display: flex; align-items: center; gap: 8px; }
.uc-actions .tip { font-size: 12px; color: var(--text-light); }

#user-modal .form-row { margin-bottom: 14px; }
#user-modal label { display: block; font-size: 13px; color: var(--text-light); margin-bottom: 6px; }
#user-modal input, #user-modal select {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  outline: none;
}
#user-modal input:focus, #user-modal select:focus { border-color: var(--primary); }
#user-modal input:disabled, #user-modal select:disabled { background: #f1f5f9; color: var(--text-light); }
#user-modal .modal-hint { font-size: 12px; color: var(--text-light); margin-top: 4px; }