:root {
      /* ── Sidebar (light · refined blue theme) ── */
      --sidebar-bg: #ffffff;
      --sidebar-hover: #f3f5f9;
      --sidebar-active: #EFF4FF;
      --sidebar-text: #475467;
      --sidebar-text-active: #1E3A8A;
      --sidebar-width: 220px;
      --sidebar-collapsed-width: 64px;
      --sidebar-border: #E6E8EC;

      /* ── Surfaces ── */
      --bg: #F7F8FA;
      --bg-warm: #EEF0F3;
      --surface: #ffffff;
      --surface-alt: #FAFBFC;
      --bg-secondary: #F7F8FA;
      --border: #E6E8EC;
      --border-light: #EEF0F3;

      /* ── Text ink ── */
      --text-primary: #0B1220;
      --text-secondary: #475467;
      --text-muted: #667085;
      --text-subtle: #98A2B3;
      --text-inverse: #FAFBFC;

      /* ── State colors ── */
      --state-overdue: #B42318;
      --state-today: #1D4ED8;
      --state-planned: #B54708;
      --state-done: #98A2B3;

      /* ── Brand (refined blue) — kept as --accent for cascade compatibility ── */
      --accent: #1D4ED8;
      --accent-hover: #1E3A8A;
      --accent-light: #EFF4FF;
      --accent-subtle: rgba(29, 78, 216, 0.06);
      --accent-glow: rgba(29, 78, 216, 0.18);
      --accent-border: #DCE5F7;

      /* ── Semantic status ── */
      --success: #0E9F6E;
      --success-bg: #E8F6EF;
      --success-border: #C9EBD9;
      --warning: #B54708;
      --warning-bg: #FEF6E7;
      --warning-border: #F5DEB7;
      --danger: #B42318;
      --danger-bg: #FDECEC;
      --danger-border: #F3C2BE;
      --info: #026AA2;
      --info-bg: #E8F3F9;
      --purple: #5925DC;
      --purple-bg: #F1EDFE;

      /* ── Radii ── */
      --radius-sm: 6px;
      --radius: 8px;
      --radius-lg: 10px;
      --radius-xl: 14px;

      /* ── Shadows (softer, more diffused) ── */
      --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04);
      --shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.03);
      --shadow-md: 0 4px 8px -2px rgba(16, 24, 40, 0.06), 0 2px 4px -2px rgba(16, 24, 40, 0.03);
      --shadow-lg: 0 12px 24px -4px rgba(16, 24, 40, 0.08), 0 4px 8px -2px rgba(16, 24, 40, 0.04);
      --shadow-xl: 0 20px 40px -8px rgba(16, 24, 40, 0.1), 0 8px 16px -4px rgba(16, 24, 40, 0.04);

      /* ── Fonts (Inter + PingFang) ── */
      --font-cn: 'Inter', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
      --font-display: 'Inter', var(--font-cn);
      --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, 'Cascadia Code', monospace;

      --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      --transition-spring: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: var(--font-cn);
      color: var(--text-primary);
      background: var(--bg);
      min-height: 100vh;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    .hidden { display: none !important; }

    /* ▀▀▀ LOGIN ▀▀▀ */
    .login-wrap {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #0B1220;
      overflow: hidden;
      position: relative;
    }

    .login-wrap::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 800px 600px at 20% 40%, rgba(29,78,216,0.18), transparent),
        radial-gradient(ellipse 600px 400px at 80% 60%, rgba(30,58,138,0.12), transparent),
        radial-gradient(ellipse 400px 400px at 50% 20%, rgba(89,37,220,0.08), transparent);
    }

    /* animated floating orbs */
    .login-wrap::after {
      content: '';
      position: absolute;
      width: 600px; height: 600px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(29,78,216,0.1) 0%, transparent 70%);
      top: -200px; right: -100px;
      animation: floatOrb 20s ease-in-out infinite;
    }

    @keyframes floatOrb {
      0%, 100% { transform: translate(0, 0); }
      50% { transform: translate(-40px, 30px); }
    }

    .login-hero { display: none; }

    .login-form-wrap {
      position: relative;
      z-index: 2;
      width: 100%;
      max-width: 440px;
      margin: 0 24px;
      animation: fadeSlideUp 0.6s ease-out;
    }

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

    .login-card {
      background: rgba(255,255,255,0.97);
      border-radius: 20px;
      padding: 44px 40px 40px;
      box-shadow:
        0 24px 48px -12px rgba(0,0,0,0.15),
        0 0 0 1px rgba(255,255,255,0.08);
      backdrop-filter: blur(20px);
      width: 100%;
    }

    .login-brand {
      text-align: center;
      margin-bottom: 32px;
    }

    .login-brand-icon {
      width: 64px;
      height: 64px;
      display: inline-grid;
      place-items: center;
      margin-bottom: 16px;
    }
    .login-brand-icon .brand-logo {
      width: 64px;
      height: 64px;
      object-fit: contain;
    }

    .login-brand h1 {
      font-family: var(--font-display);
      font-size: 22px;
      font-weight: 700;
      color: var(--text-primary);
      letter-spacing: -0.3px;
    }

    .login-brand p {
      color: var(--text-muted);
      font-size: 13px;
      margin-top: 4px;
    }

    .login-card h2 {
      font-family: var(--font-display);
      font-size: 18px;
      font-weight: 600;
      color: var(--text-primary);
      letter-spacing: -0.3px;
    }

    .login-card .login-sub {
      color: var(--text-muted);
      font-size: 13px;
      margin-top: 6px;
    }

    .login-footer {
      text-align: center;
      margin-top: 28px;
      padding-top: 20px;
      border-top: 1px solid var(--border-light);
      font-size: 11px;
      color: var(--text-muted);
      letter-spacing: 0.3px;
    }

    .form-group { margin-top: 20px; }
    .form-group label {
      display: block;
      font-size: 12px;
      font-weight: 600;
      color: var(--text-secondary);
      margin-bottom: 6px;
      letter-spacing: 0.01em;
    }

    input, select, textarea {
      font-family: var(--font-cn);
      font-size: 13px;
      width: 100%;
      padding: 8px 12px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--surface);
      color: var(--text-primary);
      outline: none;
      transition: border-color var(--transition), box-shadow var(--transition);
    }

    input:focus, select:focus, textarea:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-glow);
    }

    input::placeholder { color: var(--text-muted); }

    .btn {
      font-family: var(--font-display);
      font-size: 13px;
      font-weight: 600;
      padding: 8px 14px;
      border: none;
      border-radius: var(--radius);
      cursor: pointer;
      transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      letter-spacing: 0;
      white-space: nowrap;
    }

    .btn-primary {
      background: var(--accent);
      color: #fff;
      box-shadow: 0 1px 2px rgba(29,78,216,0.25);
    }
    .btn-primary:hover { background: var(--accent-hover); box-shadow: 0 4px 12px rgba(29,78,216,0.3); transform: translateY(-1px); }
    .btn-primary:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(29,78,216,0.2); }
    .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
    .btn:disabled { opacity: 0.4; cursor: not-allowed; }

    .btn-primary.btn-full { width: 100%; padding: 11px; font-size: 14px; }

    .btn-ghost {
      background: var(--surface);
      color: var(--text-secondary);
      border: 1px solid var(--border);
    }
    .btn-ghost:hover { background: var(--surface-alt); border-color: #D4D8E0; color: var(--text-primary); }
    .btn-ghost:active { background: var(--bg-warm); }

    .btn-danger-ghost {
      background: var(--surface);
      color: var(--danger);
      border: 1px solid var(--danger-border);
    }
    .btn-danger-ghost:hover { background: var(--danger-bg); }

    .btn-danger {
      background: var(--danger);
      color: #fff;
      border: 1px solid var(--danger);
    }
    .btn-danger:hover { filter: brightness(0.94); }
    .btn-danger:active { filter: brightness(0.88); }

    .btn-sm { padding: 6px 12px; font-size: 12px; border-radius: var(--radius-sm); }
    .btn-xs { padding: 3px 8px; font-size: 11px; border-radius: var(--radius-sm); }

    .err-text { color: var(--danger); font-size: 13px; margin-top: 12px; }

    /* ▀▀▀ APP SHELL ▀▀▀ */
    .app-shell { min-height: 100vh; }

    /* ▀▀▀ SIDEBAR ▀▀▀ */
    .sidebar {
      background: var(--sidebar-bg);
      display: flex;
      flex-direction: column;
      position: fixed;
      top: 0; left: 0; bottom: 0;
      width: var(--sidebar-width);
      z-index: 50;
      border-right: 1px solid var(--sidebar-border);
    }

    .sidebar-brand {
      padding: 18px 18px 14px;
      border-bottom: 1px solid var(--border-light);
    }

    .sidebar-brand h1 {
      font-family: var(--font-display);
      font-size: 13px;
      font-weight: 700;
      color: var(--text-primary);
      display: flex;
      align-items: center;
      gap: 10px;
      letter-spacing: -0.01em;
    }

    .brand-logo-sidebar {
      width: 30px;
      height: 30px;
      object-fit: contain;
      flex-shrink: 0;
      border-radius: 7px;
      padding: 3px;
      background: linear-gradient(135deg, #1D4ED8, #1E3A8A);
    }
    .brand-logo-sm {
      width: 22px;
      height: 22px;
      object-fit: contain;
      vertical-align: middle;
      margin-right: 2px;
    }

    .sidebar-brand small {
      display: block;
      color: var(--text-muted);
      font-size: 10px;
      margin-top: 3px;
      margin-left: 40px;
      font-family: var(--font-display);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-weight: 500;
    }

    .sidebar-footer {
      padding: 10px 16px;
      text-align: center;
      font-size: 10px;
      color: var(--text-subtle);
      letter-spacing: 0.02em;
      border-top: 1px solid var(--border-light);
    }

    .sidebar-nav {
      flex: 1;
      padding: 10px 8px;
      display: flex;
      flex-direction: column;
      gap: 1px;
      overflow-y: auto;
    }

    .nav-section-label {
      font-family: var(--font-display);
      font-size: 11px;
      font-weight: 600;
      color: var(--text-subtle);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      padding: 12px 12px 6px;
    }

    .nav-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 9px 12px;
      border-radius: 6px;
      color: var(--text-secondary);
      font-size: 15px;
      font-weight: 500;
      cursor: pointer;
      border: none;
      background: transparent;
      width: 100%;
      text-align: left;
      font-family: var(--font-cn);
      transition: background var(--transition), color var(--transition);
      position: relative;
    }

    .nav-item:hover {
      background: var(--sidebar-hover);
      color: var(--text-primary);
    }

    .nav-item.active {
      background: var(--sidebar-active);
      color: var(--sidebar-text-active);
      font-weight: 600;
    }

    .nav-item.active .nav-icon {
      color: var(--accent);
      stroke-width: 1.9;
    }

    .nav-item.active::before {
      content: '';
      position: absolute;
      left: -8px;
      top: 50%;
      transform: translateY(-50%);
      width: 3px;
      height: 16px;
      border-radius: 0 3px 3px 0;
      background: var(--accent);
    }

    .nav-icon {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.6;
      stroke-linecap: round;
      stroke-linejoin: round;
      color: var(--text-muted);
    }

    .sidebar-user {
      padding: 12px;
      border-top: 1px solid var(--border-light);
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .sidebar-avatar {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: var(--accent-hover);
      display: grid;
      place-items: center;
      color: #fff;
      font-size: 12px;
      font-weight: 600;
      flex-shrink: 0;
      font-family: var(--font-display);
    }

    .sidebar-user-info { flex: 1; min-width: 0; }

    .sidebar-user-name {
      font-size: 12px;
      font-weight: 600;
      color: var(--text-primary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .sidebar-user-role {
      font-size: 10px;
      color: var(--text-muted);
      margin-top: 1px;
      letter-spacing: 0.01em;
    }

    .sidebar-logout {
      background: none;
      border: none;
      color: var(--text-muted);
      cursor: pointer;
      padding: 6px;
      border-radius: 6px;
      font-size: 14px;
      transition: all var(--transition);
      display: grid;
      place-items: center;
    }

    .sidebar-logout:hover { background: var(--danger-bg); color: var(--danger); }

    /* Sidebar collapse toggle */
    .sidebar-toggle {
      position: absolute;
      top: 18px;
      right: -12px;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: var(--surface);
      border: 1px solid var(--border);
      color: var(--text-muted);
      cursor: pointer;
      display: grid;
      place-items: center;
      font-size: 10px;
      z-index: 51;
      transition: all var(--transition);
      box-shadow: var(--shadow-sm);
    }
    .sidebar-toggle:hover { background: var(--accent-light); color: var(--accent); border-color: var(--accent-border); }

    /* Collapsed sidebar state */
    .sidebar.collapsed {
      width: var(--sidebar-collapsed-width);
    }
    .sidebar.collapsed ~ .main-content {
      margin-left: var(--sidebar-collapsed-width);
    }
    .sidebar.collapsed .sidebar-brand small,
    .sidebar.collapsed .nav-section-label,
    .sidebar.collapsed .sidebar-footer,
    .sidebar.collapsed .sidebar-user-info {
      display: none;
    }
    .sidebar.collapsed .sidebar-brand {
      padding: 20px 0;
      text-align: center;
    }
    .sidebar.collapsed .sidebar-brand h1 {
      justify-content: center;
      font-size: 0;
      gap: 0;
    }
    .sidebar.collapsed .brand-logo-sidebar {
      width: 32px;
      height: 32px;
    }
    .sidebar.collapsed .nav-item {
      justify-content: center;
      padding: 10px 0;
      font-size: 0;
      gap: 0;
    }
    .sidebar.collapsed .nav-item .nav-icon {
      width: 18px;
      height: 18px;
    }
    .sidebar.collapsed .nav-item.active::before {
      left: 0;
    }
    .sidebar.collapsed .sidebar-nav {
      padding: 14px 6px;
    }
    .sidebar.collapsed .sidebar-user {
      justify-content: center;
      padding: 12px 6px;
    }
    .sidebar.collapsed .sidebar-logout {
      display: none;
    }

    /* ▀▀▀ MAIN CONTENT ▀▀▀ */
    .main-content {
      margin-left: var(--sidebar-width);
      min-height: 100vh;
      overflow-x: hidden;
    }

    .page-header {
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      padding: 16px 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: sticky;
      top: 0;
      z-index: 30;
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      background: rgba(255,255,255,0.88);
    }

    .page-header h2 {
      font-family: var(--font-display);
      font-size: 18px;
      font-weight: 700;
      color: var(--text-primary);
      letter-spacing: -0.015em;
    }

    .page-header p {
      font-size: 12px;
      color: var(--text-muted);
      margin-top: 2px;
      font-weight: 400;
    }

    .page-body { padding: 20px 24px 40px; }

    /* ▀▀▀ KPI CARDS ▀▀▀ */
    .kpi-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 12px;
      margin-bottom: 20px;
    }

    .trend-charts-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-bottom: 20px;
    }
    .trend-chart-card {
      padding: 14px 16px 10px !important;
    }
    .trend-chart-header {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      margin-bottom: 10px;
    }
    .trend-chart-header h4 {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-primary);
      margin: 0;
      letter-spacing: -0.005em;
    }
    .trend-chart-sub {
      font-size: 11px;
      color: var(--text-muted);
    }
    .trend-chart-wrap {
      height: 180px;
      position: relative;
    }

    .kpi-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 16px 18px;
      position: relative;
      overflow: hidden;
      transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
      box-shadow: var(--shadow-sm);
    }

    .kpi-card:hover {
      border-color: #D4D8E0;
      box-shadow: var(--shadow-md);
      transform: translateY(-1px);
    }

    .kpi-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; bottom: 0;
      width: 3px;
      opacity: 0.85;
    }

    .kpi-card.accent::before  { background: var(--accent); }
    .kpi-card.success::before { background: var(--success); }
    .kpi-card.warning::before { background: var(--warning); }
    .kpi-card.danger::before  { background: var(--danger); }

    /* Legacy emoji icon container — hide if present */
    .kpi-icon { display: none; }

    .kpi-label {
      font-size: 12px;
      color: var(--text-muted);
      font-weight: 500;
      letter-spacing: 0;
    }

    .kpi-value {
      font-family: var(--font-display);
      font-size: 30px;
      font-weight: 700;
      color: var(--text-primary);
      margin-top: 4px;
      letter-spacing: -0.025em;
      line-height: 1.1;
      font-variant-numeric: tabular-nums;
    }

    .kpi-card.accent  .kpi-value { color: var(--accent); }
    .kpi-card.success .kpi-value { color: var(--success); }
    .kpi-card.warning .kpi-value { color: var(--warning); }
    .kpi-card.danger  .kpi-value { color: var(--danger); }

    .kpi-compare {
      font-size: 11px;
      margin-top: 6px;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 2px;
      padding: 1px 6px;
      border-radius: 4px;
      line-height: 1.5;
    }
    .kpi-compare:empty { display: none; }
    .kpi-compare.up   { color: var(--success); background: var(--success-bg); }
    .kpi-compare.down { color: var(--danger);  background: var(--danger-bg); }
    .kpi-compare.flat { color: var(--text-muted); background: var(--surface-alt); }

    /* ▀▀▀ CARDS ▀▀▀ */
    .card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-sm);
    }

    .card-header {
      padding: 16px 20px;
      border-bottom: 1px solid var(--border-light);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .card-header h3 {
      font-family: var(--font-display);
      font-size: 15px;
      font-weight: 600;
      color: var(--text-primary);
      letter-spacing: -0.2px;
    }

    .card-body { padding: 20px; }

    /* ▀▀▀ TOOLBAR ▀▀▀ */
    .toolbar {
      display: flex;
      gap: 10px;
      align-items: center;
      flex-wrap: wrap;
      margin-bottom: 16px;
    }

    .toolbar input, .toolbar select {
      width: auto;
      min-width: 180px;
    }
    .toolbar input[type="search"],
    .toolbar input[type="text"] {
      border-radius: 999px;
      padding-left: 18px;
      padding-right: 18px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none' stroke='%23667085' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='9' r='5'/%3E%3Cpath d='m13 13 4 4'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: 14px center;
      background-size: 15px;
      padding-left: 36px;
    }
    .toolbar-count {
      font-size: 13px; color: var(--text-secondary); font-weight: 500;
      white-space: nowrap;
    }

    .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;
    }

    .header-actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .compact-select {
      font-size: 13px;
      padding: 4px 8px;
      border-radius: 6px;
      border: 1px solid var(--border);
    }

    .month-input {
      font-family: var(--font-mono);
    }

    .min-w-130 { min-width: 130px; }

    /* ▀▀▀ Global focus-visible — keyboard focus ring ▀▀▀ */
    button:focus-visible,
    a:focus-visible,
    .nav-item:focus-visible,
    .bottom-tab:focus-visible,
    .link-btn:focus-visible,
    .tel-link:focus-visible,
    [tabindex="0"]:focus-visible,
    [role="button"]:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
      border-radius: var(--radius-sm);
    }

    .kpi-clickable { cursor: pointer; }
    .kpi-card.kpi-clickable:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
    }
    .kpi-card.kpi-clickable:active {
      transform: scale(0.97);
      transition: transform 0.1s ease;
    }

    .text-muted { color: var(--text-muted); }

    .mt-16 { margin-top: 16px; }
    .mb-16 { margin-bottom: 16px; }
    .mt-12 { margin-top: 12px; }
    .mt-8 { margin-top: 8px; }
    .mb-12 { margin-bottom: 12px; }
    .mb-8 { margin-bottom: 8px; }
    .p-0 { padding: 0; }

    .btn-full-width { width: 100%; }

    .batch-list-placeholder {
      font-size: 13px;
      color: var(--text-muted);
      padding: 16px;
    }

    .batch-bar {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 16px;
      margin-bottom: 12px;
      border: 1px solid var(--accent-border);
      border-radius: var(--radius);
      background: var(--accent-light);
    }

    .batch-selected-count {
      font-size: 13px;
      font-weight: 600;
      color: var(--accent-hover);
    }

    .col-check { width: 36px; }

    .sub-count {
      font-size: 12px;
      font-weight: 400;
      color: var(--text-secondary);
    }

    .detail-sub {
      margin-top: 4px;
      font-size: 13px;
      color: var(--text-secondary);
    }

    .detail-edit-row {
      margin-top: 8px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      font-size: 12px;
    }
    .detail-edit-row input,
    .detail-edit-row select { margin-left: 4px; }
    .detail-edit-row .edit-region { width: 120px; }
    .detail-edit-row .edit-category { width: 140px; }
    .detail-edit-row .edit-level { width: 70px; }

    .closed-badge {
      display: inline-block;
      background: var(--danger-bg);
      color: var(--danger);
      font-size: 11px;
      padding: 1px 6px;
      border-radius: 3px;
      margin-right: 4px;
      font-weight: 500;
    }
    tr.row-closed,
    .m-card.row-closed { opacity: 0.55; }
    tr.row-closed td,
    .m-card.row-closed .m-card-val { color: var(--text-secondary); }
    .plan-list { display: flex; flex-direction: column; gap: 6px; padding: 4px 0; }
    .plan-item {
      display: flex; align-items: center; gap: 8px;
      padding: 8px 10px; border-radius: 6px;
      background: var(--surface-alt); font-size: 13px;
      flex-wrap: wrap;
    }
    .plan-item.plan-overdue { background: var(--danger-bg); }
    .plan-item.plan-today { background: var(--warning-bg); }
    .plan-date { font-weight: 600; font-family: var(--font-mono, monospace); }
    .plan-badge {
      font-size: 11px; padding: 1px 6px; border-radius: 3px;
      background: var(--danger); color: #fff;
    }
    .plan-badge.plan-badge-today { background: var(--warning); }
    .plan-badge.plan-badge-reschedule { background: var(--text-secondary); }
    .plan-note { flex: 1; color: var(--text-secondary); min-width: 120px; }
    .plan-actions { display: flex; gap: 4px; margin-left: auto; }
    .plan-empty { padding: 8px 10px; color: var(--text-secondary); font-size: 12px; }
    .plan-form-row {
      display: flex; gap: 6px; align-items: center;
      padding: 8px 10px; margin-top: 6px;
      background: var(--surface-alt); border-radius: 6px;
      flex-wrap: wrap;
    }
    .plan-form-row input[type="date"] { width: 140px; }
    .plan-form-row input[type="text"] { flex: 1; min-width: 140px; }

    /* 我的待办页 */
    .todo-toolbar {
      display: flex; gap: 12px; align-items: center;
      flex-wrap: wrap; margin-bottom: 12px;
    }
    .todo-tabs {
      display: inline-flex; gap: 2px;
      background: var(--surface-alt); padding: 3px;
      border-radius: 6px; flex-wrap: wrap;
    }
    .todo-tab {
      border: none; background: transparent;
      padding: 6px 14px; border-radius: 4px;
      cursor: pointer; font-size: 13px; font-weight: 500;
      color: var(--text-secondary);
      display: inline-flex; align-items: center; gap: 6px;
    }
    .todo-tab:hover { background: rgba(0,0,0,0.04); }
    .todo-tab.active {
      background: var(--surface); color: var(--text-primary);
      box-shadow: 0 1px 2px rgba(0,0,0,0.06);
    }
    .todo-tab-count {
      font-size: 11px; padding: 1px 6px; border-radius: 9px;
      background: var(--surface); color: var(--text-secondary);
      min-width: 18px; text-align: center;
    }
    .todo-tab.active .todo-tab-count {
      background: var(--accent-bg); color: var(--accent);
    }
    .todo-tab-count:empty { display: none; }

    /* 我的待办页里的 plan-item 加点宽松 */
    #todoList .plan-item {
      padding: 10px 12px; font-size: 14px;
    }
    #todoList .plan-customer {
      font-weight: 600; min-width: 120px;
      color: var(--text-primary);
    }
    #todoList .plan-customer-link {
      color: var(--accent); cursor: pointer;
      text-decoration: none;
    }
    #todoList .plan-customer-link:hover { text-decoration: underline; }

    /* 工作台待办卡片 */
    .todo-groups { display: flex; flex-direction: column; gap: 12px; }
    .todo-group-title {
      font-size: 13px; font-weight: 600; color: var(--text-secondary);
      margin-bottom: 4px;
    }
    .todo-group-title.todo-overdue { color: var(--danger); }
    .todo-group-title.todo-today { color: var(--warning); }

    .conf-badge {
      display: inline-block;
      font-size: 11px;
      padding: 2px 8px;
      border-radius: 10px;
      font-weight: 600;
      white-space: nowrap;
    }
    .conf-badge.conf-high {
      background: var(--success-bg);
      color: var(--success);
    }
    .conf-badge.conf-low {
      background: var(--warning-bg);
      color: var(--warning);
    }

    /* 侧边栏红点：待处理数量提示 */
    .nav-item { position: relative; }
    .nav-badge {
      position: absolute;
      top: 50%; right: 10px;
      transform: translateY(-50%);
      min-width: 18px; height: 18px;
      padding: 0 5px;
      background: var(--accent);
      color: #fff;
      font-size: 10px;
      font-weight: 600;
      line-height: 18px;
      border-radius: 9px;
      text-align: center;
      font-variant-numeric: tabular-nums;
    }
    .nav-badge.hidden { display: none; }

    .closed-banner {
      margin: 8px 0 12px;
      padding: 8px 12px;
      background: var(--danger-bg);
      color: var(--danger);
      border-left: 3px solid var(--danger);
      border-radius: 4px;
      font-size: 13px;
    }

    .card-section { margin-bottom: 12px; }

    .modal-sm { max-width: 400px; }
    .modal-md { max-width: 460px; }

    .modal-note {
      margin-bottom: 12px;
      font-size: 13px;
      color: var(--text-secondary);
    }

    .modal-control {
      width: 100%;
      padding: 8px 12px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      font-size: 14px;
    }

    .dialog-message {
      margin: 0 0 16px;
      font-size: 14px;
      line-height: 1.6;
      color: var(--text-primary);
      white-space: pre-line;
    }

    .dialog-actions {
      display: flex;
      gap: 8px;
      justify-content: flex-end;
      margin-top: 16px;
    }

    .search-results {
      max-height: 200px;
      overflow-y: auto;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
    }

    .target-box {
      margin-top: 8px;
      padding: 8px 12px;
      border: 1px solid var(--accent-border);
      border-radius: var(--radius-sm);
      background: var(--accent-light);
      font-size: 13px;
    }

    .upload-input-toggle {
      font-size: 11px;
      cursor: pointer;
      color: var(--accent);
      text-decoration: underline;
    }

    .link-btn-inline {
      margin-left: 8px;
      font-size: 12px;
    }
    /* ▀▀▀ TABLES ▀▀▀ */
    .table-wrap {
      overflow: auto;
      border-radius: var(--radius-lg);
    }

    .card > .table-wrap { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

    .collapse-toggle {
      text-align: center;
      padding: 8px 0;
      font-size: 13px;
      color: var(--accent);
      cursor: pointer;
      border-top: 1px solid var(--border);
      user-select: none;
      transition: background 0.15s;
    }
    .collapse-toggle:hover { background: var(--accent-subtle); }

    table {
      width: 100%;
      border-collapse: collapse;
      min-width: 700px;
    }

    th, td {
      padding: 10px 12px;
      text-align: left;
      font-size: 13px;
      vertical-align: middle;
      border-bottom: 1px solid var(--border-light);
    }

    th {
      background: var(--surface-alt);
      color: var(--text-secondary);
      font-family: var(--font-display);
      font-weight: 600;
      font-size: 12px;
      letter-spacing: 0.03em;
      text-transform: none;
      padding: 9px 12px;
      position: sticky;
      top: 0;
      z-index: 5;
      white-space: nowrap;
    }

    tr:last-child td { border-bottom: none; }
    tbody tr { transition: background 0.15s ease; }
    tbody tr:nth-child(even) { background: rgba(15, 23, 42, 0.015); }
    tbody tr:hover { background: var(--accent-light); }

    /* ▀▀▀ TAGS (pill + dot) ▀▀▀ */
    .tag {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 2px 8px;
      border-radius: 12px;
      font-size: 11px;
      font-weight: 500;
      white-space: nowrap;
      letter-spacing: 0;
      line-height: 1.4;
      border: 1px solid transparent;
    }

    .tag-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
    }

    .tag.ok     { background: var(--success-bg); color: var(--success); border-color: var(--success-border); }
    .tag.ok .tag-dot     { background: var(--success); }
    .tag.warn   { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-border); }
    .tag.warn .tag-dot   { background: var(--warning); }
    .tag.danger { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); }
    .tag.danger .tag-dot { background: var(--danger); }
    .tag.lost   { background: var(--purple-bg); color: var(--purple); border-color: #DBD0FB; }
    .tag.lost .tag-dot   { background: var(--purple); }
    .tag.muted  { background: var(--surface-alt); color: var(--text-muted); border-color: var(--border); }
    .tag.muted .tag-dot  { background: var(--text-muted); }
    .tag.brand  { background: var(--accent-light); color: var(--accent-hover); border-color: var(--accent-border); }
    .tag.brand .tag-dot  { background: var(--accent); }

    /* ▀▀▀ PAGINATION ▀▀▀ */
    .pager {
      padding: 12px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-top: 1px solid var(--border-light);
      font-size: 12px;
      color: var(--text-muted);
    }

    .pager-btns { display: flex; gap: 6px; }

    /* ▀▀▀ UPLOAD ▀▀▀ */
    .upload-zone {
      border: 2px dashed var(--border);
      border-radius: var(--radius-lg);
      padding: 52px 32px;
      text-align: center;
      transition: all 0.25s ease;
      background: var(--surface-alt);
      cursor: pointer;
      position: relative;
    }

    .upload-zone:hover, .upload-zone.dragover {
      border-color: var(--accent);
      background: var(--accent-subtle);
    }

    .upload-zone:hover .upload-zone-icon { transform: translateY(-3px); }

    .upload-zone-icon {
      width: 36px;
      height: 36px;
      margin: 0 auto 14px;
      display: block;
      color: var(--accent);
      opacity: 0.85;
      transition: transform var(--transition-spring), color var(--transition);
    }
    .upload-zone:hover .upload-zone-icon { color: var(--accent-hover); }

    .upload-zone h4 {
      font-family: var(--font-display);
      font-size: 15px;
      font-weight: 600;
      color: var(--text-primary);
    }
    .upload-zone-title-mobile { display: none; }
    body.is-mobile .upload-zone-title-desktop { display: none; }
    body.is-mobile .upload-zone-title-mobile { display: block; }

    .upload-zone p {
      font-size: 13px;
      color: var(--text-muted);
      margin-top: 6px;
    }

    .upload-file-info {
      margin-top: 16px;
      padding: 14px 16px;
      background: var(--accent-light);
      border: 1px solid var(--accent-border);
      border-radius: var(--radius);
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px 14px;
    }

    .upload-file-name {
      font-size: 13px;
      font-weight: 600;
      color: var(--accent-hover);
      flex: 1 1 auto;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .upload-sp-wrap {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
    }
    .upload-sp-wrap label {
      font-size: 12px;
      color: var(--text-secondary);
      white-space: nowrap;
    }
    .upload-sp-wrap select, .upload-sp-wrap input {
      font-size: 13px;
      padding: 4px 8px;
      border-radius: 6px;
      border: 1px solid var(--border);
      background: var(--surface);
    }
    .upload-sp-wrap input {
      width: 120px;
    }

    .upload-result {
      margin-top: 20px;
      padding: 20px;
      background: var(--surface-alt);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
    }

    .upload-result-header {
      font-family: var(--font-display);
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 14px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .upload-stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
    }

    .upload-stat {
      padding: 14px 12px;
      border-radius: var(--radius);
      background: var(--surface);
      border: 1px solid var(--border);
      text-align: center;
    }

    .upload-stat .stat-label {
      font-size: 11px;
      color: var(--text-muted);
      letter-spacing: 0.3px;
    }

    .upload-stat .stat-val {
      font-family: var(--font-display);
      font-size: 22px;
      font-weight: 700;
      margin-top: 4px;
      letter-spacing: -0.5px;
    }

    /* ▀▀▀ LINK BUTTON ▀▀▀ */
    .link-btn {
      font-family: var(--font-cn);
      font-size: 12px;
      font-weight: 600;
      color: var(--accent);
      background: none;
      border: none;
      cursor: pointer;
      padding: 3px 0;
      transition: color var(--transition);
    }
    .link-btn:hover { color: var(--accent-hover); text-decoration: underline; }

    /* ▀▀▀ MODAL ▀▀▀ */
    /* position:fixed + 由 JS 设置 top 才能阻止 iOS Safari 橡皮筋滚动 */
    body.modal-open { position: fixed; left: 0; right: 0; overflow: hidden; }

    .modal-backdrop {
      position: fixed;
      inset: 0;
      z-index: 100;
      background: rgba(0,0,0,0.35);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      display: grid;
      place-items: center;
      padding: 20px;
      animation: fadeIn 0.2s ease;
    }

    .modal:focus { outline: none; }

    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

    .modal {
      width: min(960px, 96vw);
      max-height: 85vh;
      overflow: auto;
      background: var(--surface);
      border-radius: var(--radius-xl);
      box-shadow: 0 24px 64px -12px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05);
      border: none;
      animation: modalSlide 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    }

    @keyframes modalSlide {
      from { opacity: 0; transform: translateY(20px) scale(0.96); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    .modal-header {
      padding: 20px 24px;
      border-bottom: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .modal-header h3 {
      font-family: var(--font-display);
      font-size: 17px;
      font-weight: 700;
      letter-spacing: -0.3px;
    }

    .modal-body { padding: 20px 24px; }

    /* 移动端：底栏 C 位已是 +记拜访，右下角 FAB 隐藏避免双 + 冲突 */
    body.is-mobile .fab { display: none !important; }

    /* ▀▀▀ Upload conflict dialog — 导入预览（修订冲突展示） ▀▀▀ */
    .conflict-modal { width: min(720px, 96vw); }
    .conflict-summary {
      display: flex; flex-wrap: wrap; gap: 16px;
      padding: 10px 14px; margin-bottom: 12px;
      background: var(--surface-alt);
      border-radius: var(--radius-sm);
      font-size: 13px; color: var(--text-secondary);
    }
    .conflict-summary strong { font-size: 15px; font-weight: 700; margin-right: 4px; }
    .conflict-stat-warn { color: var(--warning); }
    .conflict-list {
      max-height: 320px; overflow-y: auto;
      border: 1px solid var(--border-light);
      border-radius: var(--radius-sm);
      padding: 4px 0;
      margin-bottom: 14px;
    }
    .conflict-row {
      padding: 10px 12px;
      border-bottom: 1px solid var(--border-light);
    }
    .conflict-row:last-child { border-bottom: none; }
    .conflict-row-meta {
      display: flex; flex-wrap: wrap; gap: 8px;
      font-size: 12px; color: var(--text-secondary);
      margin-bottom: 6px;
    }
    .conflict-row-tag {
      background: var(--accent-light); color: var(--accent-hover);
      padding: 1px 6px; border-radius: 3px;
      font-weight: 600;
    }
    .conflict-row-info { color: var(--text-muted); }
    .conflict-row-diff { font-size: 13px; line-height: 1.5; }
    .conflict-row-diff > div { padding: 3px 0; word-break: break-word; }
    .conflict-tag {
      display: inline-block;
      background: var(--border-light); color: var(--text-muted);
      padding: 0 6px; margin-right: 6px;
      border-radius: 3px;
      font-size: 11px; font-weight: 600;
      min-width: 22px; text-align: center;
    }
    .conflict-tag-new { background: var(--accent-light); color: var(--accent-hover); }
    .conflict-old { color: var(--text-muted); }
    .conflict-new { color: var(--text-primary); font-weight: 500; }
    .conflict-more { padding: 8px 12px; text-align: center; }
    .conflict-truncated {
      padding: 6px 12px; font-size: 12px;
      color: var(--text-muted); text-align: center;
      border-top: 1px dashed var(--border-light);
    }
    .conflict-mode-section { margin-bottom: 6px; }
    .conflict-mode-label {
      font-size: 13px; font-weight: 600; color: var(--text-primary);
      margin-bottom: 8px;
    }
    .conflict-mode-option {
      display: flex; align-items: flex-start; gap: 10px;
      padding: 10px 12px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      margin-bottom: 6px;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s;
    }
    .conflict-mode-option:hover { background: var(--surface-alt); }
    .conflict-mode-option input[type="radio"] { margin-top: 3px; flex: 0 0 auto; }
    .conflict-mode-option span { font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
    .conflict-mode-option span strong { color: var(--text-primary); margin-right: 4px; }
    .conflict-mode-option input[type="radio"]:checked ~ span strong { color: var(--accent); }
    .conflict-mode-option:has(input:checked) {
      background: var(--accent-subtle);
      border-color: var(--accent);
    }
    body.is-mobile .conflict-summary { gap: 10px; padding: 8px 10px; font-size: 12px; }
    body.is-mobile .conflict-list { max-height: 240px; }
    body.is-mobile .conflict-row { padding: 8px 10px; }

    /* ▀▀▀ Detail chip toolbar — 客户详情顶部的分区切换 ▀▀▀ */
    .detail-chips {
      display: flex; gap: 8px; flex-wrap: wrap;
      margin: 16px 0 4px;
    }
    .detail-chip {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 7px 12px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      font-size: 13px; font-weight: 500;
      color: var(--text-secondary);
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s, color 0.15s;
      line-height: 1.2;
    }
    .detail-chip:hover { border-color: var(--accent-border); color: var(--text-primary); }
    .detail-chip .chip-icon { font-size: 14px; line-height: 1; }
    .detail-chip .chip-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--border);
      transition: background 0.15s;
    }
    .detail-chip.has-content .chip-dot { background: var(--accent); }
    .detail-chip.active {
      background: var(--accent-light);
      border-color: var(--accent);
      color: var(--accent-hover);
    }
    .detail-chip.active .chip-dot { background: var(--accent-hover); }
    body.is-mobile .detail-chips { gap: 6px; }
    body.is-mobile .detail-chip { padding: 7px 10px; font-size: 12px; }

    .detail-stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      margin-bottom: 20px;
    }

    .detail-stat {
      padding: 14px;
      background: var(--surface-alt);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      text-align: center;
    }

    .detail-stat .ds-label {
      font-size: 11px;
      color: var(--text-muted);
      font-weight: 400;
      letter-spacing: 0.2px;
    }

    .detail-stat .ds-value {
      font-family: var(--font-display);
      font-size: 24px;
      font-weight: 700;
      color: var(--text-primary);
      margin-top: 4px;
      letter-spacing: -0.5px;
    }

    /* ▀▀▀ TOAST ▀▀▀ */
    #toast {
      position: fixed;
      bottom: 24px;
      right: 24px;
      z-index: 200;
      background: #0B1220;
      color: #E6E8EC;
      padding: 10px 18px;
      border-radius: var(--radius);
      font-size: 13px;
      font-weight: 500;
      box-shadow: var(--shadow-lg);
      opacity: 0;
      transform: translateY(12px);
      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
      pointer-events: none;
      display: flex;
      align-items: center;
      gap: 10px;
      border: 1px solid rgba(255,255,255,0.06);
    }

    #toast.show { opacity: 1; transform: translateY(0); pointer-events: auto; }

    /* ▀▀▀ USER MANAGEMENT ▀▀▀ */
    .user-mgmt-grid {
      display: grid;
      grid-template-columns: 340px 1fr;
      gap: 20px;
    }

    .user-form-card { height: fit-content; }
    .user-form-card .card-body .form-group:first-child { margin-top: 0; }

    /* ▀▀▀ EMPTY STATE ▀▀▀ */
    .empty-row td {
      padding: 52px 16px !important;
      text-align: center;
      color: var(--text-muted);
      font-size: 14px;
      font-weight: 400;
    }

    /* ▀▀▀ MOBILE DETECTION CLASSES ▀▀▀ */
    .mobile-only { display: none !important; }
    .mobile-filter-toggle { display: none !important; }

    body.is-mobile .mobile-only { display: block !important; }
    body.is-mobile .desktop-only { display: none !important; }
    body.is-mobile .mobile-filter-toggle { display: inline-flex !important; }

    /* ▀▀▀ MOBILE TOPBAR ▀▀▀ */
    .mobile-topbar {
      display: none;
      position: fixed;
      top: 0; left: 0; right: 0;
      height: calc(56px + env(safe-area-inset-top, 0px));
      background: rgba(255, 255, 255, 0.92);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      z-index: 60;
      align-items: center;
      padding: 0 12px;
      padding-top: env(safe-area-inset-top, 0);
      gap: 8px;
      border-bottom: 1px solid var(--border);
    }

    body.is-mobile .mobile-topbar { display: flex; }

    .mobile-topbar-brand {
      flex: 1;
      font-family: var(--font-display);
      font-size: 15px;
      font-weight: 700;
      color: var(--text-primary);
      letter-spacing: -0.015em;
    }

    .mobile-hamburger {
      width: 44px;
      height: 44px;
      background: none;
      border: none;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 5px;
      padding: 10px;
      border-radius: 10px;
      -webkit-tap-highlight-color: transparent;
      transition: background 0.15s;
    }
    .mobile-hamburger:active { background: var(--bg-warm); }

    .mobile-hamburger span {
      display: block;
      width: 20px;
      height: 2px;
      background: var(--text-secondary);
      border-radius: 2px;
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
      transform-origin: center;
    }

    .mobile-hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .mobile-hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
    .mobile-hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .mobile-logout {
      height: 32px;
      padding: 0 12px;
      background: var(--surface);
      border: 1px solid var(--border);
      color: var(--text-secondary);
      font-size: 13px;
      cursor: pointer;
      border-radius: 6px;
      -webkit-tap-highlight-color: transparent;
      transition: background 0.15s, color 0.15s;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .mobile-logout:active { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); }

    /* ▀▀▀ MOBILE OVERLAY ▀▀▀ */
    .mobile-overlay {
      position: fixed;
      inset: 0;
      background: rgba(10, 10, 16, 0.5);
      z-index: 49;
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;
    }
    .mobile-overlay.visible {
      opacity: 1;
      pointer-events: auto;
    }

    /* ▀▀▀ MOBILE SIDEBAR (drawer) ▀▀▀ */
    body.is-mobile .sidebar {
      transform: translateX(-100%);
      transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
      width: 280px !important;
      z-index: 55;
      box-shadow: none;
      padding-top: calc(56px + env(safe-area-inset-top, 0px));
    }
    body.is-mobile .sidebar.mobile-open {
      transform: translateX(0);
      box-shadow: 8px 0 32px rgba(0,0,0,0.25);
    }
    body.is-mobile .sidebar .sidebar-toggle { display: none; }

    body.is-mobile .main-content {
      margin-left: 0 !important;
      padding-top: calc(56px + env(safe-area-inset-top, 0px));
    }

    /* Desktop: toolbar-filters-inner should be inline flex to match original layout */
    .toolbar-filters-inner {
      display: contents;
    }

    /* ▀▀▀ MOBILE FILTER PANEL ▀▀▀ */
    body.is-mobile .toolbar-filters {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      width: 100%;
    }
    body.is-mobile .toolbar-filters.show {
      grid-template-rows: 1fr;
    }
    body.is-mobile .toolbar-filters-inner {
      display: flex;
      flex-direction: column;
      gap: 8px;
      overflow: hidden;
      min-height: 0;
      padding-top: 0;
      transition: padding-top 0.3s ease;
    }
    body.is-mobile .toolbar-filters.show .toolbar-filters-inner {
      padding-top: 8px;
    }
    body.is-mobile .toolbar-filters-inner select,
    body.is-mobile .toolbar-filters-inner input { width: 100%; min-width: 0; }

    /* ▀▀▀ MOBILE CARD LIST ▀▀▀ */
    .mobile-card-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .m-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 14px;
      box-shadow: var(--shadow-sm);
      position: relative;
      overflow: hidden;
    }
    .m-card-clickable { cursor: pointer; transition: border-color .15s, box-shadow .15s, transform 0.12s; }
    .m-card-clickable:active { border-color: var(--accent); background: var(--accent-light); transform: scale(0.98); }

    /* Left accent bar on cards — state-coded */
    .m-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; bottom: 0;
      width: 4px;
      background: var(--state-done);
    }
    .m-card--overdue::before { background: var(--state-overdue); }
    .m-card--today::before   { background: var(--state-today); }
    .m-card--planned::before { background: var(--state-planned); }

    .m-card:active {
      transform: scale(0.985);
      transition: transform 0.1s ease;
    }

    @media (prefers-reduced-motion: reduce) {
      .m-card, .m-card:active { animation: none; transition: none; transform: none; }
    }

    .m-card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
      gap: 8px;
    }

    .m-card-name {
      font-size: 14px;
      font-weight: 600;
      color: var(--text-primary);
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 1.3;
      letter-spacing: -0.01em;
    }

    /* Highlighted key field row (e.g. next plan date) */
    .m-card-highlight {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      margin-bottom: 10px;
      padding: 7px 10px;
      background: var(--surface-alt);
      border-radius: var(--radius-sm);
      font-size: 12px;
      border: 1px solid var(--border-light);
    }
    .m-card-highlight-label {
      color: var(--text-secondary);
      font-weight: 500;
    }
    .m-card-highlight-val {
      color: var(--text-primary);
      font-weight: 600;
      font-variant-numeric: tabular-nums;
    }
    .m-card-highlight--overdue { background: var(--danger-bg); border-color: var(--danger-border); }
    .m-card-highlight--overdue .m-card-highlight-val { color: var(--danger); }
    .m-card-highlight--today { background: var(--accent-light); border-color: var(--accent-border); }
    .m-card-highlight--today .m-card-highlight-val { color: var(--accent); }

    .m-card-body {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px 18px;
      font-size: 12px;
    }

    .m-card-field {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
    }

    .m-card-label {
      color: var(--text-muted);
      font-size: 12px;
      font-weight: 400;
      flex-shrink: 0;
      margin-right: 6px;
    }

    .m-card-val {
      color: var(--text-primary);
      font-weight: 500;
      text-align: right;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
    }

    .m-card-summary {
      margin-top: 10px;
      font-size: 12px;
      color: var(--text-secondary);
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      line-height: 1.5;
      padding: 7px 10px;
      background: var(--surface-alt);
      border-radius: 6px;
    }

    .m-card-actions {
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid var(--border-light);
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }

    .m-card-actions .link-btn {
      font-size: 13px;
      padding: 10px 16px;
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      border-radius: var(--radius-sm);
      background: var(--surface-alt);
      border: 1px solid var(--border);
      -webkit-tap-highlight-color: transparent;
      transition: background 0.15s, border-color 0.15s;
    }
    .m-card-actions .link-btn:active {
      background: var(--accent-light);
      border-color: var(--accent-border);
    }

    .m-card-empty {
      text-align: center;
      padding: 48px 16px;
      color: var(--text-muted);
      font-size: 14px;
    }

    /* ▀▀▀ RESPONSIVE ▀▀▀ */
    /* 平板纵向 (~769px-1024px)：从桌面双列退到单列。
       注意：!important 用于压过桌面端的 multi-column 默认；如未来在此区间加新规则，
       要么排在本块之后，要么用更高特异性而非 !important，避免冲突 */
    @media (max-width: 1024px) and (min-width: 769px) {
      .wb-two-col { grid-template-columns: 1fr !important; }
      .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; }
      .trend-charts-grid { grid-template-columns: repeat(2, 1fr) !important; }
      .user-mgmt-grid { grid-template-columns: 1fr !important; }
    }

    @media (max-width: 1024px) {
      .kpi-grid { grid-template-columns: repeat(2, 1fr); }
      .trend-charts-grid { grid-template-columns: 1fr; }
      .user-mgmt-grid { grid-template-columns: 1fr; }
      .upload-stats { grid-template-columns: repeat(2, 1fr); }
      .detail-stats { grid-template-columns: repeat(2, 1fr); }
    }

    /* ▀▀▀ MOBILE SPECIFIC ▀▀▀ */
    body.is-mobile {
      -webkit-tap-highlight-color: transparent;
      -webkit-text-size-adjust: 100%;
      overscroll-behavior-y: contain;
    }

    body.is-mobile .page-body { padding: 14px; }
    body.is-mobile .page-header {
      padding: 12px 16px;
      position: relative;
      top: auto;
      z-index: auto;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
    }
    body.is-mobile .page-header h2 { font-size: 17px; }
    body.is-mobile .page-header p { display: none; }
    body.is-mobile #view-pool .page-header p { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; }
    body.is-mobile .page-header > div { flex: 1 1 100%; min-width: 0; }
    body.is-mobile .header-actions { flex: 1 1 100%; justify-content: flex-end; }

    body.is-mobile .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    body.is-mobile .kpi-card {
      padding: 14px 16px;
      border-radius: var(--radius-lg);
    }
    body.is-mobile .kpi-value { font-size: 24px; }

    body.is-mobile .trend-charts-grid { grid-template-columns: 1fr; gap: 10px; }
    body.is-mobile .upload-stats { grid-template-columns: repeat(2, 1fr); }
    body.is-mobile .detail-stats { grid-template-columns: repeat(2, 1fr); }
    body.is-mobile .user-mgmt-grid { grid-template-columns: 1fr; }


    body.is-mobile .toolbar {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: stretch;
      gap: 8px;
    }
    body.is-mobile .toolbar > input {
      flex: 1;
      min-width: 0;
    }
    body.is-mobile .toolbar > .btn { flex-shrink: 0; }
    body.is-mobile .toolbar input,
    body.is-mobile .toolbar select {
      min-width: 0;
    }

    body.is-mobile .modal-backdrop {
      padding: 8px;
    }
    body.is-mobile .modal {
      width: calc(100vw - 16px);
      max-width: calc(100vw - 16px);
      max-height: 88vh;
      border-radius: var(--radius-lg);
      margin: 0 auto;
    }
    body.is-mobile .modal-body { padding: 16px; }
    body.is-mobile .modal-header { padding: 14px 16px; }
    body.is-mobile .detail-stats { gap: 8px; }
    body.is-mobile .detail-stat .ds-value { font-size: 18px; }
    body.is-mobile .detail-stat { padding: 10px; }

    body.is-mobile .upload-zone { padding: 32px 16px; }
    body.is-mobile .upload-file-info { flex-direction: column; align-items: stretch; }
    body.is-mobile .upload-sp-wrap { flex-wrap: wrap; gap: 8px; }
    body.is-mobile .upload-sp-wrap select,
    body.is-mobile .upload-sp-wrap input { width: 100%; min-width: 0; }

    body.is-mobile .batch-bar { flex-wrap: wrap; }

    /* Touch-friendly sizing — 44px minimum tap targets */
    body.is-mobile .btn { min-height: 44px; padding: 10px 16px; }
    body.is-mobile .btn-sm { min-height: 44px; padding: 8px 14px; }
    /* font-size 16px prevents iOS zoom on focus */
    body.is-mobile input, body.is-mobile select { min-height: 44px; font-size: 16px; }
    body.is-mobile .compact-select { min-height: 44px; font-size: 14px; }
    body.is-mobile .u-btn-mini { min-height: 44px; padding: 10px 14px; font-size: 12px; }

    body.is-mobile .login-card { padding: 28px 20px 24px; }
    body.is-mobile .login-form-wrap { margin: 0 16px; max-width: none; }

    body.is-mobile .pager {
      flex-direction: column;
      gap: 10px;
      text-align: center;
      padding: 14px 16px;
    }
    body.is-mobile .pager-btns { justify-content: center; }

    /* Mobile nav items — bigger tap targets */
    body.is-mobile .nav-item {
      padding: 12px 14px;
      font-size: 14px;
      min-height: 44px;
    }

    body.is-mobile .sidebar-user { padding: 14px; }

    /* Toast — above safe-area on mobile */
    body.is-mobile #toast {
      bottom: calc(16px + env(safe-area-inset-bottom, 0));
      left: 14px;
      right: 14px;
      text-align: center;
      justify-content: center;
    }

    /* Mobile section title (for card-based views that replace tables) */
    .mobile-section-title {
      font-family: var(--font-display);
      font-size: 14px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 10px;
      letter-spacing: -0.2px;
    }

    /* Modal tables on mobile — remove min-width, compact layout */
    body.is-mobile .modal table { min-width: auto; }
    body.is-mobile .modal th,
    body.is-mobile .modal td {
      padding: 7px 8px;
      font-size: 12px;
      white-space: normal;
      word-break: break-all;
    }
    body.is-mobile .modal .detail-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    /* Hide less-important columns in modal tables on mobile */
    body.is-mobile .modal .col-hide-mobile { display: none; }

    /* Batch history cards on mobile */
    .batch-m-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 14px 16px;
      box-shadow: var(--shadow);
      position: relative;
      overflow: hidden;
    }
    .batch-m-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; bottom: 0;
      width: 3px;
      background: var(--accent);
      opacity: 0.7;
    }
    .batch-m-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      gap: 8px;
    }
    .batch-m-name {
      font-size: 14px;
      font-weight: 600;
      color: var(--text-primary);
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .batch-m-body {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px 16px;
      font-size: 13px;
    }
    .batch-m-field {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
    }
    .batch-m-label {
      color: var(--text-muted);
      font-size: 12px;
      font-weight: 400;
      flex-shrink: 0;
      margin-right: 6px;
    }
    .batch-m-val {
      color: var(--text-primary);
      font-weight: 500;
      text-align: right;
    }
    .batch-m-actions {
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid var(--border-light);
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }
    .batch-m-actions .link-btn {
      font-size: 13px;
      padding: 10px 16px;
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      border-radius: var(--radius-sm);
      background: var(--surface-alt);
      border: 1px solid var(--border);
      -webkit-tap-highlight-color: transparent;
    }
    body.is-mobile #batchList {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 10px;
    }
    /* Batch detail expansion inside mobile cards */
    body.is-mobile [id^="batchDetailM-"] {
      margin-top: 10px;
      border-top: 1px solid var(--border-light);
      padding-top: 10px;
    }
    body.is-mobile [id^="batchDetailM-"] .u-detail-panel { padding: 0; border-top: none; }
    body.is-mobile .u-scroll-list { font-size: 12px; }

    /* Small phone extra adjustments */
    @media (max-width: 380px) {
      body.is-mobile .kpi-grid { grid-template-columns: 1fr; }
      body.is-mobile .m-card-body { grid-template-columns: 1fr; }
      body.is-mobile .upload-stats { grid-template-columns: 1fr; }
      body.is-mobile .detail-stats { grid-template-columns: 1fr; }
    }

    /* ▀▀▀ SCROLLBAR ▀▀▀ */
    ::-webkit-scrollbar { width: 5px; height: 5px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: #d0d1d8; border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: #b0b1ba; }

    /* ▀▀▀ SPINNER ▀▀▀ */
    .spinner {
      width: 16px; height: 16px;
      border: 2px solid rgba(255,255,255,0.25);
      border-top-color: #fff;
      border-radius: 50%;
      animation: spin 0.6s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* ▀▀▀ VIEW TRANSITION ▀▀▀ */
    .view { animation: viewEnter 0.32s cubic-bezier(0.22, 1, 0.36, 1); }
    @keyframes viewEnter {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* ▀▀▀ STAGGER ANIMATION (for lists & cards) ▀▀▀ */
    @keyframes staggerIn {
      from { opacity: 0; transform: translateY(6px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .kpi-card { animation: staggerIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both; }
    .kpi-card:nth-child(1) { animation-delay: 0s; }
    .kpi-card:nth-child(2) { animation-delay: 0.04s; }
    .kpi-card:nth-child(3) { animation-delay: 0.08s; }
    .kpi-card:nth-child(4) { animation-delay: 0.12s; }
    .kpi-card:nth-child(5) { animation-delay: 0.16s; }
    .kpi-card:nth-child(6) { animation-delay: 0.20s; }

    /* ▀▀▀ SELECTION ▀▀▀ */
    ::selection { background: rgba(29,78,216,0.14); color: var(--text-primary); }



    .u-font-mono-sm { font-family: var(--font-mono); font-size: 12px; }
    .u-font-display-600 { font-family: var(--font-display); font-weight: 600; }
    .u-font-display-700 { font-family: var(--font-display); font-weight: 700; }
    .u-font-500 { font-weight: 500; }
    .u-font-600 { font-weight: 600; }
    .u-text-primary { color: var(--text-primary); }
    .u-text-secondary { color: var(--text-secondary); }
    .u-text-secondary-sm { color: var(--text-secondary); font-size: 12px; }
    .u-text-muted { color: var(--text-muted); }
    .u-text-muted-xs { color: var(--text-muted); font-size: 11px; }
    .u-text-success { color: var(--success); }
    .u-text-warning { color: var(--warning); }
    .u-text-danger { color: var(--danger); }
    .u-text-accent { color: var(--accent); }
    .u-text-sm { font-size: 13px; }
    .u-text-xs { font-size: 11px; }
    .u-truncate-150 { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .u-truncate-200 { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .u-truncate-220 { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .u-nowrap { white-space: nowrap; }
    .u-cell-check { width: 36px; }
    .u-p-0 { padding: 0; }
    .u-cell-compact { padding: 4px 8px; }
    .u-cell-nowrap-compact { white-space: nowrap; padding: 4px 8px; }
    .u-th-compact-left { text-align: left; padding: 4px 8px; }
    .u-table-compact { width: 100%; font-size: 12px; border-collapse: collapse; }
    .u-bg-surface-alt { background: var(--surface-alt); }
    .u-mt-8 { margin-top: 8px; }
    .u-mt-12 { margin-top: 12px; }
    .u-mt-14 { margin-top: 14px; }
    .u-mb-8 { margin-bottom: 8px; }
    .u-ml-4 { margin-left: 4px; }
    .u-ml-6 { margin-left: 6px; }
    .u-flex-gap-6 { display: flex; align-items: center; gap: 6px; }
    .u-btn-mini { font-size: 11px; padding: 2px 8px; min-height: auto; }
    .u-danger-outline { color: var(--danger); border-color: var(--danger); }
    .u-row-inactive { opacity: 0.5; }
    .u-tag-danger { background: var(--danger-bg); color: var(--danger); }
    .u-tag-dot-danger { background: var(--danger); }
    .u-departed-owner { font-size: 11px; color: #8b5cf6; font-weight: 500; }
    .u-erp-badge,
    .u-erp-badge-lg {
      display: inline-block;
      font-size: 10px;
      padding: 1px 4px;
      border-radius: 3px;
      background: #dbeafe;
      color: #1d4ed8;
      margin-right: 4px;
      font-weight: 600;
      vertical-align: middle;
    }
    .u-erp-badge-lg { padding: 1px 5px; margin-right: 6px; }
    .u-result-item {
      padding: 8px 12px;
      cursor: pointer;
      font-size: 13px;
      border-bottom: 1px solid var(--border);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .u-result-item:hover { background: var(--surface-alt); }
    body.is-mobile .u-result-item { padding: 12px; min-height: 44px; display: flex; align-items: center; }
    .u-scroll-list { max-height: 200px; overflow-y: auto; margin-top: 4px; font-size: 12px; line-height: 1.6; }
    .u-scroll-panel { max-height: 200px; overflow-y: auto; margin-top: 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
    .u-panel-muted { padding: 12px; color: var(--text-muted); }
    .u-panel-danger { padding: 12px; color: var(--danger); }
    .u-panel-note { padding: 12px; color: var(--text-secondary); font-size: 13px; }
    .u-panel-note-lg { padding: 16px; color: var(--text-muted); font-size: 14px; }
    .u-panel-danger-lg { padding: 16px; color: var(--danger); }
    .u-detail-panel { padding: 12px 16px; background: var(--bg-secondary); border-top: 1px solid var(--border); }
    .u-upload-hint { margin-top: 12px; padding: 12px 16px; font-size: 13px; color: var(--text-secondary); background: var(--warning-bg); border: 1px solid var(--warning-border); border-radius: 8px; }
    .u-empty-block { padding: 8px 12px; font-size: 13px; color: var(--text-muted); }
    .u-summary-muted { cursor: pointer; color: var(--text-muted); font-size: 13px; font-weight: 500; }
    .u-summary-danger { cursor: pointer; color: var(--danger); font-size: 13px; font-weight: 500; }

/* ── Tel Link (click to copy) ── */
.tel-link { color: var(--accent); cursor: pointer; white-space: nowrap; }
.tel-link:hover { text-decoration: underline; }
body.is-mobile .tel-link { font-weight: 500; }

/* ── Workbench ── */
.wb-progress-card { padding: 16px 20px; margin-bottom: 16px; }
.wb-progress-text { font-size: 16px; color: var(--text-primary); }
.wb-progress-text strong { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--accent); }
.wb-list-item { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 13px 16px; border-bottom: 1px solid var(--border-light); gap: 8px; cursor: pointer; transition: background 0.15s, transform 0.12s; }
.wb-list-item:last-child { border-bottom: none; }
.wb-list-item:hover { background: rgba(0,0,0,0.02); }
.wb-list-item:active { background: rgba(0,0,0,0.04); transform: scale(0.985); }
.wb-list-main { min-width: 0; overflow: hidden; }
.wb-list-name { font-weight: 600; font-size: 15px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-list-meta { font-size: 12px; color: var(--text-muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 400; }
.wb-list-right { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.wb-days-badge { font-family: var(--font-display); font-weight: 600; font-size: 13px; padding: 2px 8px; border-radius: 4px; }
.wb-days-badge.warn { background: var(--warning-bg); color: var(--warning); }
.wb-days-badge.danger { background: var(--danger-bg); color: var(--danger); }
.wb-date { font-family: var(--font-mono, monospace); font-size: 12px; color: var(--text-secondary); white-space: nowrap; flex-shrink: 0; }
.wb-empty { padding: 24px 16px; text-align: center; color: var(--text-muted); font-size: 14px; }

/* Workbench two-column layout */
.wb-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
body.is-mobile .wb-two-col { grid-template-columns: 1fr; }

/* Week Timeline */
.wb-tl-day { border-bottom: 1px solid var(--border-light); }
.wb-tl-day:last-child { border-bottom: none; }
.wb-tl-header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; font-size: 13px; font-weight: 600;
  color: var(--text-secondary); background: var(--bg);
}
.wb-tl-header.is-today { color: var(--accent); background: var(--accent-subtle); }
.wb-tl-weekday { min-width: 28px; }
.wb-tl-date { font-family: var(--font-mono, monospace); font-size: 12px; color: var(--text-muted); }
.wb-tl-today-tag {
  font-size: 11px; padding: 1px 6px; border-radius: 3px; font-weight: 600;
  background: var(--accent); color: #fff; margin-left: auto;
}
.wb-tl-empty { padding: 8px 16px 10px 52px; font-size: 13px; color: var(--text-muted); }
.wb-tl-empty.today-empty { color: var(--accent); font-weight: 500; }
.wb-method-tag {
  flex-shrink: 0; font-size: 11px; padding: 1px 6px; border-radius: 3px;
  background: var(--border-light); color: var(--text-secondary); white-space: nowrap;
}

/* ▀▀▀ Visit Timeline (period switch + inline edit) ▀▀▀ */
.timeline-card-header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.timeline-card-header h3 { flex: 0 0 auto; }

.timeline-period-control {
  display: inline-flex; padding: 2px; gap: 0;
  background: var(--surface-alt);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  margin-left: auto;
}
.timeline-period-btn {
  padding: 4px 10px; font-size: 12px; font-weight: 500;
  background: transparent; border: none; color: var(--text-secondary);
  border-radius: calc(var(--radius) - 2px); cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  min-height: 26px;
}
.timeline-period-btn:hover { color: var(--text-primary); }
.timeline-period-btn.active {
  background: var(--surface); color: var(--accent);
  box-shadow: 0 1px 2px rgba(16,24,40,0.08);
}

.timeline-custom-range {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border-light);
}
.timeline-custom-range input[type="date"] { max-width: 140px; }
.timeline-range-sep { color: var(--text-muted); font-size: 13px; }

.wb-timeline-meta {
  padding: 8px 16px;
  font-size: 12px; color: var(--text-muted);
  border-bottom: 1px solid var(--border-light);
  font-variant-numeric: tabular-nums;
}
.wb-timeline-meta:empty { display: none; padding: 0; border: none; }

.wb-list-editing {
  display: block !important; cursor: default;
  padding: 14px 16px;
  background: var(--accent-subtle);
}
.wb-list-editing:hover { background: var(--accent-subtle); transform: none; }
.wb-edit-form { display: flex; flex-direction: column; gap: 10px; }
.wb-edit-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wb-edit-name {
  flex: 1; min-width: 0;
  font-weight: 600; font-size: 15px; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wb-edit-method { max-width: 130px; flex: 0 0 auto; }
.wb-edit-summary {
  resize: vertical; min-height: 64px; font-size: 13px;
  font-family: var(--font-cn); line-height: 1.5;
}
.wb-edit-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wb-edit-row > .form-control:not([type="date"]) { flex: 1 1 140px; min-width: 120px; }
.wb-edit-row input[type="date"] { flex: 0 0 auto; max-width: 160px; }
.wb-edit-label {
  font-size: 12px; color: var(--text-secondary);
  flex: 0 0 auto; white-space: nowrap;
}
.wb-edit-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }

/* Mobile */
body.is-mobile .timeline-period-control { width: 100%; margin-left: 0; }
body.is-mobile .timeline-period-btn { flex: 1; padding: 6px 4px; }
body.is-mobile .timeline-custom-range { flex-wrap: wrap; }
body.is-mobile .timeline-custom-range input[type="date"] { flex: 1 1 calc(50% - 12px); max-width: none; min-width: 0; }
body.is-mobile .timeline-custom-range .btn { flex: 1 1 100%; }
body.is-mobile .wb-edit-row > .form-control:not([type="date"]) { flex: 1 1 100%; }
body.is-mobile .wb-edit-row input[type="date"] { flex: 1 1 100%; max-width: none; }
body.is-mobile .wb-edit-method { max-width: none; flex: 0 0 100%; }

/* Todo badges */
.wb-todo-badge {
  font-size: 12px; padding: 2px 8px; border-radius: 4px; font-weight: 500;
  white-space: nowrap;
}
.wb-todo-badge.today { background: var(--success-bg); color: var(--success); }
.wb-todo-badge.future { background: var(--accent-light); color: var(--accent); }
.wb-todo-badge.warn { background: var(--warning-bg); color: var(--warning); }
.wb-todo-badge.danger { background: var(--danger-bg); color: var(--danger); }
.wb-freq-badge {
  font-family: var(--font-display); font-size: 13px; font-weight: 600;
  padding: 2px 8px; border-radius: 4px; white-space: nowrap; flex-shrink: 0;
  background: var(--accent-subtle); color: var(--accent);
}

/* ── Bottom Tab Bar ── */
.bottom-tab-bar { display: none; }
body.is-mobile .bottom-tab-bar {
  display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  background: rgba(255,255,255,0.96); border-top: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.06);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  padding-bottom: env(safe-area-inset-bottom, 0);
  height: calc(56px + env(safe-area-inset-bottom, 0px));
}
.bottom-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 6px 0; border: none; background: none; color: var(--text-muted);
  font-size: 10px; cursor: pointer; transition: color 0.2s; -webkit-tap-highlight-color: transparent; min-height: 44px;
  position: relative;
}
.bottom-tab.active { color: var(--accent); }
.bottom-tab.active::after {
  content: ''; position: absolute; top: 2px; left: 50%; transform: translateX(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}
.bottom-tab-icon { display: inline-flex; align-items: center; justify-content: center; line-height: 1; margin-bottom: 2px; color: inherit; }
.bottom-tab-icon svg { display: block; color: inherit; }
.bottom-tab-label { font-weight: 500; letter-spacing: -0.2px; }
/* Center raised tab (workbench) */
.bottom-tab.tab-center {
  position: relative; margin-top: -16px;
}
.bottom-tab.tab-center .bottom-tab-icon {
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: #fff; display: flex; align-items: center; justify-content: center;
  margin-bottom: 3px;
  box-shadow: 0 4px 14px rgba(29,78,216,0.3);
  transition: transform 0.2s, box-shadow 0.2s;
}
.bottom-tab.tab-center:active .bottom-tab-icon {
  transform: scale(0.92); box-shadow: 0 2px 8px rgba(29,78,216,0.25);
}
.bottom-tab.tab-center.active { color: var(--accent); }
.bottom-tab.tab-center.active::after { display: none; }
@media (max-width: 380px) {
  .bottom-tab-icon svg { width: 18px; height: 18px; }
  .bottom-tab-label { font-size: 9px; }
  .bottom-tab { padding: 4px 0; }
  .bottom-tab.tab-center .bottom-tab-icon { width: 42px; height: 42px; }
  .bottom-tab.tab-center .bottom-tab-icon svg { width: 20px; height: 20px; }
}
body.is-mobile .main-content { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
body.is-mobile .mobile-hamburger { display: flex; }

/* ── FAB ── */
.fab { display: none; }
body.is-mobile .fab {
  display: flex; position: fixed; right: 16px;
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover)); color: white; border: none;
  box-shadow: 0 4px 14px rgba(29, 78, 216, 0.35);
  align-items: center; justify-content: center; z-index: 40; cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s; -webkit-tap-highlight-color: transparent;
}
body.is-mobile .fab:active { transform: scale(0.92); box-shadow: 0 2px 8px rgba(29, 78, 216, 0.3); }
.fab-icon { font-size: 28px; font-weight: 300; line-height: 1; }
body.is-mobile .fab.hidden { display: none; }

/* ── My / Admin Hub Menu Grid ── */
.my-menu-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.my-menu-item {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 24px 16px; text-align: center; cursor: pointer;
  transition: background 0.15s, transform 0.12s, box-shadow 0.15s;
  box-shadow: var(--shadow-sm);
}
.my-menu-item:active { background: var(--surface-alt); transform: scale(0.97); }
.my-menu-icon { font-size: 28px; margin-bottom: 8px; }
.my-menu-icon-wrap {
  width: 44px; height: 44px; border-radius: 11px; margin: 0 auto 10px;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.2s;
}
.my-menu-icon-wrap svg { display: block; color: inherit; }
.my-menu-item:active .my-menu-icon-wrap { transform: scale(0.92); }
.my-menu-label { font-weight: 500; font-size: 14px; color: var(--text-primary); }

/* ── AI Parse Section ── */
.ai-parse-section { padding: 10px 14px; margin-bottom: 8px; background: var(--accent-light); border-radius: 8px; border: 1px solid var(--border); }
.ai-parse-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.ai-parse-label { font-size: 13px; font-weight: 600; color: var(--accent); }
.ai-parse-hint { font-size: 11px; color: var(--text-muted); }
.ai-parse-section textarea { font-size: 13px; min-height: 44px; resize: vertical; background: var(--surface); }
.ai-parse-actions { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.ai-parse-status { font-size: 12px; color: var(--text-muted); }
.ai-parse-status.error { color: var(--danger); }
.ai-parse-status.success { color: var(--success); }

/* ── Customer Preview Popover ── */
.customer-name-link { cursor: default; border-bottom: 1px dashed var(--border); padding-bottom: 1px; }
.customer-name-link:hover { border-bottom-color: var(--accent); color: var(--accent); }
.customer-preview { position: absolute; z-index: 1000; width: 300px; max-width: calc(100vw - 16px); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 30px rgba(0,0,0,.12); padding: 12px 14px; font-size: 13px; animation: previewIn .15s ease; }
@keyframes previewIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.preview-loading { color: var(--text-muted); font-size: 12px; padding: 8px 0; }
.preview-empty { color: var(--text-muted); font-size: 12px; }
.preview-section { margin-bottom: 8px; }
.preview-section:last-child { margin-bottom: 0; }
.preview-label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.preview-contact { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.preview-phone { font-size: 12px; color: var(--accent); font-family: 'JetBrains Mono', monospace; }
.preview-sp { font-size: 11px; color: var(--text-secondary); }
.preview-visit { display: flex; align-items: baseline; gap: 6px; padding: 2px 0; flex-wrap: wrap; }
.preview-date { font-size: 12px; font-family: 'JetBrains Mono', monospace; color: var(--text-secondary); white-space: nowrap; }
.preview-method { font-size: 11px; background: var(--bg); padding: 1px 6px; border-radius: 4px; color: var(--text-secondary); }
.preview-summary { font-size: 12px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
.preview-deal { font-size: 12px; color: var(--success); font-weight: 500; }

/* ── Visit Form (inline in customer detail modal) ── */
.visit-form-body { padding: 4px 0; }
.visit-form-body .form-group { margin-bottom: 12px; }
.visit-form-body .form-group label { display: block; font-size: 13px; font-weight: 500; color: var(--text-secondary); margin-bottom: 4px; }
.visit-form-body .form-control { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px; background: var(--surface); color: var(--text); }
.visit-form-body textarea.form-control { min-height: 80px; resize: vertical; }
.vf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
body.is-mobile .vf-row { grid-template-columns: 1fr; }

/* ── Mobile visit cards (inside detail modal) ── */
.visit-cards-mobile { display: none; }
body.is-mobile .visit-cards-mobile { display: block; }
body.is-mobile .desktop-only-table { display: none; }
.visit-m-card { padding: 10px 12px; border-bottom: 1px solid var(--border); }
.visit-m-card:last-child { border-bottom: none; }
.visit-m-header { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; flex-wrap: wrap; }
.visit-m-date { font-size: 13px; font-weight: 600; font-family: 'JetBrains Mono', monospace; color: var(--text); }
.visit-m-body { font-size: 13px; color: var(--text); line-height: 1.5; margin-bottom: 4px; }
.visit-m-meta { font-size: 12px; color: var(--text-secondary); }

/* ── Visit rhythm bar (last 365 days) ── */
.visit-rhythm {
  padding: 12px 14px 14px;
  margin: 0 0 12px;
  background: var(--surface-alt);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
}
.visit-rhythm-stats {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}
.visit-rhythm-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.visit-rhythm-stat:nth-child(2), .visit-rhythm-stat:nth-child(3) { align-items: center; }
.visit-rhythm-num { font-size: 15px; font-weight: 700; color: var(--text-primary); font-family: var(--font-display); }
.visit-rhythm-lbl { font-size: 11px; color: var(--text-secondary); }
.visit-rhythm-bar { display: block; border-radius: 4px; overflow: hidden; }
.visit-rhythm-axis {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-secondary);
  margin-top: 4px;
  font-family: var(--font-mono);
}

/* ── Visit rhythm desktop wrapper ── */
.visit-rhythm-desktop { padding: 12px 16px 0; }
.visit-rhythm-desktop:empty { display: none; }
body.is-mobile .visit-rhythm-desktop { padding: 8px 12px 0; }

/* ── Visit search bar ── */
.visit-search-bar { padding: 8px 16px 4px; }
.visit-search-bar.hidden { display: none; }
.visit-search-bar input { font-size: 13px; }
.visit-search-no-result {
  margin: 0 16px 8px;
  padding: 10px 14px;
  background: var(--surface-alt);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--text-secondary);
  text-align: center;
}
body.is-mobile .visit-search-bar { padding: 6px 12px 4px; }

/* ── Overdue plan notice ── */
.visit-overdue-notice {
  padding: 10px 14px;
  margin-bottom: 12px;
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  border-radius: var(--radius);
  color: var(--accent-hover);
  font-size: 13px;
  font-weight: 500;
}

/* ── Visit month group ── */
.visit-month-group { margin-bottom: 8px; }
.visit-month-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 12px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  margin: 8px 0 4px;
  font-size: 12px;
}
.visit-month-label { font-weight: 700; color: var(--text-primary); font-family: var(--font-mono); }
.visit-month-count { color: var(--text-secondary); }

/* ── Weekly wrap modal ── */
.weekly-wrap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
.weekly-wrap-cell {
  text-align: center;
  padding: 16px 8px;
  background: var(--surface-alt);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
}
.weekly-wrap-cell.is-danger { background: var(--danger-bg); border-color: var(--danger-border); }
.weekly-wrap-cell.is-danger .ww-num { color: var(--danger); }
.ww-num { font-size: 28px; font-weight: 700; color: var(--text-primary); font-family: var(--font-display); line-height: 1; }
.ww-lbl { font-size: 12px; color: var(--text-secondary); margin-top: 6px; }
.weekly-wrap-trend { text-align: center; font-size: 14px; font-weight: 600; color: var(--accent); margin-bottom: 10px; }
.weekly-wrap-tip { text-align: center; font-size: 13px; color: var(--text-secondary); }

/* ── Workbench list item state colors ── */
.wb-list-item--overdue { box-shadow: inset 3px 0 0 var(--state-overdue); }
.wb-list-item--today   { box-shadow: inset 3px 0 0 var(--state-today); }
.wb-list-item--planned { box-shadow: inset 3px 0 0 var(--state-planned); }

/* ── Workbench timeline edit button ── */
.wb-list-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.wb-edit-btn { font-size: 12px; padding: 4px 6px; opacity: 0.55; transition: opacity .15s; color: var(--text-muted); min-height: auto !important; line-height: 0; }
.wb-edit-btn svg { display: block; }
.wb-list-item:hover .wb-edit-btn { opacity: 1; color: var(--accent); }
body.is-mobile .wb-edit-btn { opacity: 0.8; }

/* ── Pool status tags ── */
.tag.pool-free { background: var(--success-bg); color: var(--success); }
.tag.pool-free .tag-dot { background: var(--success); }
.tag.pool-mine { background: var(--accent-light); color: var(--accent); }
.tag.pool-mine .tag-dot { background: var(--accent); }
.tag.pool-locked { background: var(--warning-bg); color: var(--accent-hover); }
.tag.pool-locked .tag-dot { background: var(--warning); }

/* ── Quick Visit Button on Workbench ── */
.wb-quick-visit-btn {
  width: 100%; margin-bottom: 16px; padding: 12px; font-size: 15px; font-weight: 600;
  border-radius: 10px; letter-spacing: 0.5px;
}

/* ── Claims Countdown Bar ── */
.wb-claims-bar {
  background: var(--accent-light); border: 1px solid var(--accent-border); border-radius: var(--radius-lg);
  padding: 12px 16px; margin-bottom: 16px;
}
.wb-claims-bar .claims-title {
  font-weight: 600; font-size: 13px; color: var(--accent-hover); margin-bottom: 6px;
  display: flex; align-items: center; gap: 6px;
}
.wb-claims-bar .claims-list { display: flex; flex-direction: column; gap: 4px; }
.wb-claims-bar .claims-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 12px; color: var(--accent); cursor: pointer; padding: 4px 8px; border-radius: 6px;
  transition: background 0.15s;
}
.wb-claims-bar .claims-item:hover { background: rgba(29,78,216,0.1); }
.wb-claims-bar .claims-item .claims-name { font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-claims-bar .claims-days { font-size: 11px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wb-claims-bar .claims-days.urgent { color: var(--danger); }

/* ── Quick Visit Modal extras ── */
.qv-selected {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  background: var(--accent-subtle); border: 1px solid var(--accent-light);
  border-radius: 8px; margin-top: 6px; font-weight: 500;
}
#qvCustomerResults { max-height: 200px; overflow-y: auto; margin-top: 4px; }

/* ── Latest Context in Detail Modal ── */
.latest-context {
  background: var(--accent-subtle); border: 1px solid var(--border-light);
  border-radius: 10px; padding: 12px 16px; margin-bottom: 12px;
}
.latest-context-header {
  font-weight: 600; font-size: 13px; color: var(--text-muted); margin-bottom: 8px;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.latest-context-body { display: flex; flex-direction: column; gap: 8px; }
.latest-context-item {
  display: flex; gap: 10px; font-size: 13px; line-height: 1.5;
}
.latest-context-date {
  flex-shrink: 0; font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12px; color: var(--text-muted); min-width: 50px;
}
.latest-context-content { flex: 1; min-width: 0; color: var(--text-primary); }
.latest-context-method {
  font-size: 11px; padding: 1px 6px; border-radius: 4px;
  background: var(--accent-light); color: var(--accent);
  white-space: nowrap; align-self: flex-start;
}
.latest-context-contact { color: var(--text-muted); font-size: 12px; }

/* ── Workbench right column stacking ── */
.wb-right-col { display: flex; flex-direction: column; gap: 16px; }

/* ══════════════════════════════════════════
   View Transitions
   ══════════════════════════════════════════ */
.view:not(.hidden) {
  animation: viewFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes viewFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════
   Skeleton Loading
   ══════════════════════════════════════════ */
.skeleton {
  background: linear-gradient(90deg, var(--bg-warm) 25%, var(--surface) 37%, var(--bg-warm) 63%);
  background-size: 200% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-text { height: 14px; margin: 6px 0; border-radius: 4px; }
.skeleton-text:nth-child(odd) { width: 80%; }
.skeleton-text:nth-child(even) { width: 60%; }
.skeleton-row td { padding: 10px 8px; }
.skeleton-card {
  height: 100px; border-radius: var(--radius); margin-bottom: 10px;
}

/* ══════════════════════════════════════════
   Empty State Component
   ══════════════════════════════════════════ */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 48px 24px; text-align: center; min-height: 140px;
}
.empty-state-icon {
  font-size: 44px; margin-bottom: 14px; opacity: 0.5;
  filter: grayscale(0.2);
  width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;
  background: var(--surface-alt); border-radius: 50%;
  color: var(--text-secondary);
}
.empty-state-icon svg { width: 36px; height: 36px; }
.empty-state-text {
  font-size: 14px; color: var(--text-secondary); line-height: 1.6; font-weight: 500;
  max-width: 320px;
}
.empty-state-hint {
  font-size: 13px; color: var(--text-muted); line-height: 1.5; margin-top: 6px;
  max-width: 320px;
}
.empty-state-action { margin-top: 14px; }

/* ▀▀▀ 新销售静默期引导横幅 ▀▀▀ */
.grace-banner {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; margin-bottom: 12px;
  background: var(--accent-light);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-lg);
}
.grace-banner-icon { font-size: 26px; flex-shrink: 0; line-height: 1.2; }
.grace-banner-content { flex: 1; min-width: 0; }
.grace-banner-title {
  font-size: 14px; font-weight: 600;
  color: var(--accent-hover); margin-bottom: 4px;
}
.grace-banner-text {
  font-size: 13px; color: var(--text-secondary);
  line-height: 1.5;
}
.grace-banner-actions { margin-top: 10px; display: flex; gap: 8px; }

/* ══════════════════════════════════════════
   Toast — use CSS variables, not hardcoded
   ══════════════════════════════════════════ */
#toast, .toast {
  background: var(--sidebar-bg);
  color: var(--text-inverse);
}
.toast-error {
  background: var(--danger) !important;
}

/* ══════════════════════════════════════════
   Batch upload card status (replace inline style)
   ══════════════════════════════════════════ */
.batch-m-status {
  font-size: 12px; color: var(--text-muted); margin-bottom: 8px;
}
.batch-m-time {
  margin-top: 6px; font-size: 11px; color: var(--text-muted);
}

/* ══════════════════════════════════════════
   Annotations (批注)
   ══════════════════════════════════════════ */
.annotation-list {
  display: flex; flex-direction: column; gap: 8px; padding: 0 16px 8px;
}
.annotation-empty {
  color: var(--text-muted); font-size: 13px; padding: 8px 0;
}
.annotation-item {
  border-left: 3px solid var(--border); border-radius: 6px;
  padding: 8px 12px; background: var(--bg-secondary); transition: border-color .15s;
}
.annotation-item.annotation-pending {
  border-left-color: var(--warning); background: var(--warning-bg);
}
.annotation-item.annotation-done {
  border-left-color: var(--success); opacity: .7;
}
.annotation-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap;
}
.annotation-author {
  font-weight: 600; font-size: 13px; color: var(--text-primary);
}
.annotation-date {
  font-size: 11px; color: var(--text-muted); font-family: var(--font-mono, monospace);
}
.annotation-status-badge {
  font-size: 11px; padding: 1px 6px; border-radius: 8px; font-weight: 500;
}
.annotation-status-badge.pending {
  background: var(--warning-bg); color: var(--warning);
}
.annotation-status-badge.done {
  background: var(--success-bg); color: var(--success);
}
.annotation-content {
  font-size: 14px; line-height: 1.5; color: var(--text-primary); white-space: pre-wrap; word-break: break-word;
}
.annotation-actions {
  margin-top: 4px; display: flex; gap: 4px;
}
.annotation-form-row {
  padding: 8px 16px; display: flex; flex-direction: column; gap: 8px;
}
.annotation-form-actions {
  display: flex; gap: 8px;
}

/* ══════════════════════════════════════════
   Report Page (汇报页)
   ══════════════════════════════════════════ */
/* 汇报页定位：销售对老板一对一笔记本演示。
   max-width 1100 在 13 寸/24 寸笔记本和外接显示器都好看；
   不超过 1100 是为了 KPI/客户卡保持紧凑，超宽屏时居中留两侧白边比双列更易讲。*/
.report-body {
  max-width: 1100px;
  margin: 0 auto;
}

/* 右上角周期/销售员下拉默认 padding 4px 偏紧，演示场景下放大让头部更舒展 */
#view-report .header-actions { gap: 12px; }
#view-report .compact-select {
  padding: 6px 14px;
  font-size: 14px;
  min-width: 120px;
  background-color: var(--surface);
  border-color: var(--border);
}
#view-report .compact-select:hover {
  border-color: var(--accent-border);
}
.report-kpi .kpi-value {
  font-size: 2rem;
}

/* Banner: 销售名 + 周期，let 老板一眼知道在看谁 */
.report-banner {
  padding: 14px 18px;
  margin-bottom: 16px;
  background: var(--accent-light);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-lg);
}
.report-banner-name {
  font-size: 18px; font-weight: 700;
  color: var(--accent-hover);
  letter-spacing: -0.2px;
}
.report-banner-meta {
  margin-top: 4px;
  font-size: 13px;
  color: var(--text-secondary);
  display: flex; gap: 8px; align-items: center;
  font-variant-numeric: tabular-nums;
}
.report-banner-period { font-weight: 500; }
.report-banner-sep { color: var(--text-muted); }
.report-banner-range { font-family: var(--font-mono, monospace); }

/* 客户卡内嵌"近 3 次拜访"缩略时间线 */
.report-customer-timeline {
  margin-top: 6px;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px;
  font-size: 12px; color: var(--text-secondary);
}
.report-tl-item {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  background: var(--surface-alt);
  border-radius: 12px;
  font-variant-numeric: tabular-nums;
}
.report-tl-emoji { font-size: 13px; line-height: 1; }
.report-tl-date { font-family: var(--font-mono, monospace); font-size: 11px; }
.report-tl-sep { color: var(--text-muted); font-size: 11px; }

/* 空状态：让"无数据"页不至于一片空白 */
.report-empty {
  padding: 48px 24px; text-align: center;
}
.report-empty-icon {
  font-size: 36px; opacity: 0.6;
  margin-bottom: 10px;
}
.report-empty-text {
  font-size: 15px; font-weight: 500;
  color: var(--text-secondary); margin-bottom: 4px;
}
.report-empty-hint {
  font-size: 13px; color: var(--text-muted);
}

/* 逾期段超出 limit 的引导链接：让老板知道还有更多但不压垮汇报页 */
.report-overdue-more {
  padding: 12px 16px; text-align: center;
  font-size: 13px; color: var(--text-secondary);
  background: var(--surface-alt);
  border-top: 1px solid var(--border-light);
}
.report-overdue-more .link-btn {
  font-weight: 500;
}
.report-customer-list {
  display: flex; flex-direction: column; gap: 0;
}
.report-customer-card {
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  transition: background .15s;
}
.report-customer-card:hover {
  background: var(--bg-secondary);
}
.report-customer-card.report-overdue {
  border-left: 3px solid var(--danger);
}
.report-customer-header {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.report-customer-name {
  font-weight: 600; font-size: 15px; color: var(--accent);
  cursor: pointer; text-decoration: none;
}
.report-customer-name:hover {
  text-decoration: underline;
}
.report-tag {
  font-size: 11px; padding: 1px 6px; border-radius: 8px;
  background: var(--bg-secondary); color: var(--text-muted);
}
.report-customer-meta {
  font-size: 12px; color: var(--text-muted); margin-top: 2px;
}
.report-customer-summary {
  font-size: 13px; color: var(--text-secondary); margin-top: 4px;
  line-height: 1.5; white-space: pre-wrap; word-break: break-word;
}
.report-customer-annotations {
  margin-top: 4px;
}
.report-annotation-inline {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 4px 0;
}
.report-annotation-text {
  font-size: 13px; color: var(--text-primary); font-weight: 500;
}
.report-annotation-meta {
  font-size: 11px; color: var(--text-muted);
}
.report-section-label {
  padding: 10px 16px 4px; font-size: 13px; font-weight: 600;
  color: var(--danger); text-transform: uppercase; letter-spacing: .5px;
}
.report-truncated-notice {
  padding: 8px 16px; font-size: 12px; color: var(--warning);
  background: #fffbeb; border-bottom: 1px solid var(--border);
}
/* 投屏优化：汇报页字号整体放大 */
#view-report .kpi-value { font-size: 2.2rem; }
#view-report .report-customer-name { font-size: 16px; }
#view-report .report-customer-summary { font-size: 14px; }
#view-report .annotation-content { font-size: 15px; }