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

/* ===== SVG Icon System ===== */
.ico{
  width:1em;height:1em;vertical-align:-0.15em;
  fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  display:inline-block;flex-shrink:0;
}
.ico-fill{fill:currentColor;stroke:none}
.sidebar-item .ico{width:20px;height:20px}
.stat-icon .ico{width:24px;height:24px}
.mode-tab .ico{width:30px;height:30px}
.qa-icon .ico{width:20px;height:20px}
.btn .ico{width:16px;height:16px;vertical-align:-0.1em;margin-right:4px}
.copy-btn .ico{width:13px;height:13px;vertical-align:-0.05em}
.rli-delete .ico{width:13px;height:13px}
.pe-field-label .ico{width:14px;height:14px;vertical-align:-0.1em;margin-right:3px}
.welcome-illustration .ico{width:120px;height:120px;stroke-width:1}
.empty-state .ico{width:52px;height:52px}
.hd-section-title .ico{width:16px;height:16px;vertical-align:-0.15em;margin-right:4px}
.review-header .rule-btn .ico{width:14px;height:14px}

:root{
  --bg:#f0f2f5;--card:#fff;--primary:#2d3561;--primary-light:#4361ee;--primary-glow:rgba(67,97,238,0.15);
  --accent:#06d6a0;--accent-light:#34efc3;
  --text:#1a1a2e;--text-sec:#6b7280;--text-muted:#9ca3af;
  --border:#e5e7eb;--border-light:#f3f4f6;
  --danger:#ef4444;--success:#06d6a0;--warn:#f59e0b;--info:#4361ee;
  --radius:14px;--radius-sm:10px;--shadow:0 1px 3px rgba(0,0,0,0.06),0 4px 16px rgba(0,0,0,0.06);
  --shadow-lg:0 4px 12px rgba(0,0,0,0.08),0 16px 40px rgba(0,0,0,0.1);
  --nav-height:64px;
  --font:-apple-system,BlinkMacSystemFont,'Segoe UI','Noto Sans TC','PingFang TC','Microsoft JhengHei',sans-serif;
}

/* ===== Dark Mode Theme ===== */
[data-theme="dark"]{
  --bg:#0f1117;--card:#1a1d27;--card-alt:#222635;
  --primary:#4361ee;--primary-light:#5b75f0;--primary-glow:rgba(67,97,238,0.25);
  --accent:#06d6a0;--accent-light:#34efc3;
  --text:#e8eaed;--text-sec:#9ca3af;--text-muted:#6b7280;
  --border:#2d3142;--border-light:#252837;
  --danger:#f87171;--success:#34efc3;--warn:#fbbf24;--info:#60a5fa;
  --shadow:0 1px 3px rgba(0,0,0,0.3),0 4px 16px rgba(0,0,0,0.2);
  --shadow-lg:0 4px 12px rgba(0,0,0,0.4),0 16px 40px rgba(0,0,0,0.3);
}

[data-theme="dark"] body,
[data-theme="dark"]{ color:var(--text);background:var(--bg) }

/* Dark mode specific element overrides */
[data-theme="dark"] .nav{ background:#0d0f17;border-bottom:1px solid var(--border) }
[data-theme="dark"] .sidebar{ background:#141621;border-right:1px solid var(--border) }
[data-theme="dark"] .sidebar-item:hover{ background:rgba(67,97,238,0.1) }
[data-theme="dark"] .sidebar-item.active{ background:rgba(67,97,238,0.15);color:var(--primary-light) }
[data-theme="dark"] input,[data-theme="dark"] textarea,[data-theme="dark"] select{
  background:var(--card-alt);color:var(--text);border-color:var(--border)
}
[data-theme="dark"] input::placeholder,[data-theme="dark"] textarea::placeholder{ color:var(--text-muted) }
[data-theme="dark"] .card{ background:var(--card);border-color:var(--border) }
[data-theme="dark"] table{ border-color:var(--border) }
[data-theme="dark"] table thead th{ background:var(--card-alt);color:var(--text-sec) }
[data-theme="dark"] table tbody tr:nth-child(even){ background:rgba(255,255,255,0.02) }
[data-theme="dark"] table tbody tr:hover{ background:rgba(67,97,238,0.08) }
[data-theme="dark"] .modal-overlay{ background:rgba(0,0,0,0.65) }
[data-theme="dark"] .modal-content{ background:#1e2230;border-color:var(--border) }
[data-theme="dark"] ::-webkit-scrollbar{ width:8px;height:8px }
[data-theme="dark"] ::-webkit-scrollbar-track{ background:var(--bg) }
[data-theme="dark"] ::-webkit-scrollbar-thumb{ background:var(--border);border-radius:4px }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{ background:var(--text-muted) }
[data-theme="dark"] .status-bar{ background:#141621;border-bottom:1px solid var(--border);color:var(--text-sec) }
[data-theme="dark"] .filter-input{ background:var(--card-alt);color:var(--text);border-color:var(--border) }
[data-theme="dark"] .dash-welcome{ background:linear-gradient(135deg,#1a1d27 0%,#161925 100%);border:1px solid var(--border) }
[data-theme="dark"] .stat-card{ background:var(--card);border-color:var(--border) }
[data-theme="dark"] .quick-action:hover{ background:rgba(67,97,238,0.08);border-color:var(--primary-light) }
[data-theme="dark"] .activity-item:hover{ background:rgba(255,255,255,0.03) }
[data-theme="dark"] .empty-state{ background:var(--card);border-color:var(--border) }
[data-theme="dark"] .login-container{ background:linear-gradient(135deg,#0f1117,#1a1d27) }
[data-theme="dark"] .login-box{ background:var(--card);border-color:var(--border) }
[data-theme="dark"] .offline-banner{ background:#7c2d12;color:#fdba74 }
[data-theme="dark"] #inventoryAlertCard{ background:linear-gradient(135deg,#292510,#332e14) !important }
[data-theme="dark"] #pendingAlertCard{ background:linear-gradient(135deg,#2d1015,#3a151c) !important }
[data-theme="dark"] .toast-container .toast{ background:var(--card);color:var(--text);border-color:var(--border) }

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

/* ===== Navigation ===== */
.nav{
  position:fixed;top:0;left:0;right:0;height:var(--nav-height);
  background:#1a1a2e;color:#fff;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;z-index:50;
  box-shadow:0 2px 12px rgba(0,0,0,0.15);
}
.nav-brand{
  font-size:17px;font-weight:700;letter-spacing:0.5px;
  display:flex;align-items:center;gap:10px;
}
.nav-brand .brand-logo{
  width:34px;height:34px;border-radius:10px;
  background:linear-gradient(135deg,#4361ee,#06d6a0);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(67,97,238,0.3);
}
.nav-brand .brand-logo svg{width:22px;height:22px}
.nav-brand .brand-name{
  display:flex;flex-direction:column;line-height:1.15;
}
.nav-brand .brand-name .main-name{font-size:16px;font-weight:700;letter-spacing:1.5px}
.nav-brand .brand-name .sub-name{font-size:9px;font-weight:500;opacity:0.55;letter-spacing:2px;text-transform:uppercase}
.nav-user{
  display:flex;align-items:center;gap:16px;
}
.nav-shop{
  font-size:13px;opacity:0.7;font-weight:500;
}
.nav-logout{
  padding:7px 16px;border:1px solid rgba(255,255,255,0.2);
  border-radius:8px;background:transparent;color:#fff;
  font-size:12px;cursor:pointer;font-weight:500;
  transition:all 0.2s;
}
.nav-logout:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.35)}
.theme-toggle{
  width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,0.15);
  background:transparent;color:#fff;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all 0.25s;flex-shrink:0;
}
.theme-toggle:hover{background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.3);transform:rotate(15deg)}
.theme-toggle .ico{width:18px;height:18px;transition:transform 0.3s}
[data-theme="dark"] .theme-toggle:hover{transform:rotate(-15deg)}

/* ===== Dashboard Pro Channel Filter Buttons ===== */
.dp-ch-btn{
  padding:4px 12px;border:1.5px solid var(--border);border-radius:20px;
  background:var(--card-bg);color:var(--text-sec);font-size:11px;
  cursor:pointer;transition:all 0.2s;white-space:nowrap;font-family:inherit;
}
.dp-ch-btn:hover{border-color:#4361ee;color:#4361ee;background:#eef2ff}
.dp-ch-btn.active{background:#4361ee;color:#fff;border-color:#4361ee;font-weight:600}
[data-theme="dark"] .dp-ch-btn:hover{background:rgba(67,97,238,0.15);color:#8ab4ff}
[data-theme="dark"] .dp-ch-btn.active{background:#4361ee;color:#fff}

/* ===== Hamburger Menu ===== */
.hamburger{
  display:none;width:36px;height:36px;border:none;border-radius:8px;
  background:rgba(255,255,255,0.1);color:#fff;font-size:20px;
  cursor:pointer;align-items:center;justify-content:center;
  transition:background 0.2s;margin-right:4px;
}
.hamburger:hover{background:rgba(255,255,255,0.2)}
@media(max-width:768px){.hamburger{display:flex}}

/* ===== Sidebar ===== */
.sidebar{
  position:fixed;top:var(--nav-height);left:0;bottom:0;width:220px;
  background:#fff;border-right:1px solid var(--border);
  padding:20px 0;overflow-y:auto;
}
.sidebar-item{
  display:flex;align-items:center;gap:12px;
  padding:12px 24px;cursor:pointer;font-size:14px;font-weight:500;
  color:var(--text-sec);transition:all 0.2s;
  border-left:3px solid transparent;position:relative;
}
.sidebar-item:hover{background:var(--border-light);color:var(--text)}
.sidebar-item.active{
  color:var(--primary-light);background:var(--primary-glow);
  border-left-color:var(--primary-light);font-weight:600;
}
.sidebar-item .nav-badge{
  position:absolute;right:16px;font-size:10px;padding:2px 8px;
  border-radius:10px;font-weight:600;
}
.sidebar-item .nav-badge.new{background:var(--accent);color:#fff}

/* Sidebar red badge for pending deliveries */
.sidebar-item .sidebar-badge{
  position:absolute;right:14px;font-size:10px;padding:2px 8px;
  border-radius:10px;font-weight:700;background:#ef4444;color:#fff;
  min-width:18px;text-align:center;line-height:1.5;animation:pulse-badge 2s infinite;
  box-shadow:0 0 6px rgba(239,68,68,0.4);
}
@keyframes pulse-badge{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.1)}
}

/* ===== Main Content ===== */
.main{
  margin-left:220px;margin-top:var(--nav-height);
  padding:28px;min-height:calc(100vh - var(--nav-height));
}
.page{display:none}
.page.active{display:block}

/* ===== Login Page ===== */
.login-page{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:#1a1a2e;position:relative;overflow:hidden;
}
.login-page::before{
  content:'';position:absolute;top:-50%;right:-30%;width:80%;height:150%;
  background:radial-gradient(ellipse,rgba(67,97,238,0.12) 0%,transparent 70%);
  pointer-events:none;
}
.login-page::after{
  content:'';position:absolute;bottom:-40%;left:-20%;width:70%;height:120%;
  background:radial-gradient(ellipse,rgba(6,214,160,0.08) 0%,transparent 70%);
  pointer-events:none;
}
.login-card{
  background:#fff;border-radius:20px;padding:44px 40px;width:420px;
  box-shadow:0 25px 80px rgba(0,0,0,0.3);position:relative;z-index:1;
}
.login-card h1{
  font-size:26px;font-weight:800;color:var(--primary);
  text-align:center;margin-bottom:4px;letter-spacing:1px;
}
.login-card .login-subtitle{
  text-align:center;color:var(--text-sec);font-size:13px;margin-bottom:32px;
  font-weight:400;
}
.login-card .logo{
  width:72px;height:72px;margin:0 auto 20px;
  background:linear-gradient(135deg,#4361ee,#06d6a0);border-radius:18px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(67,97,238,0.3);
}
.login-card .logo svg{width:40px;height:40px;fill:#fff}
/* ===== 统一表单输入设计系统 ===== */
.form-group{margin-bottom:18px}
.form-group label{
  display:block;font-size:13px;font-weight:600;
  color:var(--text-sec);margin-bottom:7px;
}
.form-group input,
.form-group select,
.form-group textarea{
  width:100%;padding:11px 14px;border:1.5px solid var(--border);
  border-radius:10px;font-size:14px;font-family:inherit;
  transition:all 0.2s cubic-bezier(0.22,1,0.36,1);background:#fff;
  color:var(--text);outline:none;box-sizing:border-box;
}
.form-group select{
  appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
  padding-right:36px;cursor:pointer;
}
.form-group textarea{ resize:vertical;min-height:80px;line-height:1.55 }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  border-color:#4361ee;background:#fff;
  box-shadow:0 0 0 4px rgba(67,97,238,0.10);
}
.form-group input::placeholder,
.form-group textarea::placeholder{color:var(--text-muted);opacity:0.7 }

/* sf-row — 统一为和 form-group 一致 */
.sf-row{
  display:flex;gap:10px;align-items:center;margin-bottom:16px
}
.sf-row label{
  font-size:13px;color:var(--text);font-weight:600;
  min-width:90px;flex-shrink:0
}
.sf-row input,
.sf-row select,
.sf-row textarea{
  flex:1;padding:11px 14px;border:1.5px solid var(--border);
  border-radius:10px;font-size:14px;font-family:inherit;
  transition:all 0.2s cubic-bezier(0.22,1,0.36,1);
  background:#fff;color:var(--text);outline:none;
}
.sf-row select{
  appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:36px;cursor:pointer;
}
.sf-row input:focus,
.sf-row select:focus{
  border-color:#4361ee;box-shadow:0 0 0 4px rgba(67,97,238,0.10)
}
.sf-row input::placeholder{color:var(--text-muted);opacity:0.6 }
/* ===== 统一按钮设计系统 ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:10px 20px;border:none;border-radius:10px;
  font-size:13.5px;font-weight:600;cursor:pointer;
  transition:all 0.2s cubic-bezier(0.22,1,0.36,1);
  font-family:inherit;letter-spacing:0.02em;line-height:1;
  white-space:nowrap;position:relative;overflow:hidden;
}
.btn:active{ transform:scale(0.97);transition:transform 0.08s }
.btn .ico{ flex-shrink:0 }

/* Primary — 主要操作 (蓝) */
.btn-primary{background:linear-gradient(135deg,#4361ee,#3a56d4);color:#fff;box-shadow:0 2px 8px rgba(67,97,238,0.25) }
.btn-primary:hover{ box-shadow:0 6px 18px rgba(67,97,238,0.4);transform:translateY(-1px) }
.btn-primary:active{ transform:scale(0.97);box-shadow:0 2px 6px rgba(67,97,238,0.25) }

/* Success — 正向操作 (绿) */
.btn-success{background:linear-gradient(135deg,#06d6a0,#05b88a);color:#fff;box-shadow:0 2px 8px rgba(6,214,160,0.25) }
.btn-success:hover{ box-shadow:0 6px 18px rgba(6,214,160,0.35);transform:translateY(-1px) }
.btn-success:active{ transform:scale(0.97) }

/* Danger — 危险操作 (红) */
.btn-danger{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;box-shadow:0 2px 8px rgba(239,68,68,0.25) }
.btn-danger:hover{ box-shadow:0 6px 18px rgba(239,68,68,0.35);transform:translateY(-1px) }
.btn-danger:active{ transform:scale(0.97) }

/* Warning — 警告操作 (橙) */
.btn-warn{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;box-shadow:0 2px 8px rgba(245,158,11,0.25) }
.btn-warn:hover{ box-shadow:0 6px 18px rgba(245,158,11,0.35);transform:translateY(-1px) }

/* Secondary — 次要 / 取消 (浅底+边框) */
.btn-secondary{
  background:var(--bg-sec,var(--card));color:var(--text);
  border:1.5px solid var(--border);
}
.btn-secondary:hover{
  background:var(--border-light);border-color:rgba(45,53,97,0.15);
  box-shadow:0 2px 6px rgba(0,0,0,0.04)
}

/* Ghost — 轻量操作 (透明+细边框) */
.btn-ghost{
  background:transparent;color:var(--primary-light);
  border:1.5px solid var(--primary-light);
}
.btn-ghost:hover{ background:var(--primary-glow);box-shadow:0 2px 8px rgba(67,97,238,0.12) }

/* Ghost neutral — 灰色轻量 */
.btn-ghost-neutral{
  background:transparent;color:var(--text-sec);
  border:1.5px solid var(--border);
}
.btn-ghost-neutral:hover{ background:var(--bg-sec);color:var(--text) }

/* Small variant */
.btn-sm{ padding:7px 14px;font-size:12px;border-radius:8px;gap:5px }

/* Large variant */
.btn-lg{ padding:12px 28px;font-size:15px;border-radius:12px }

/* Block (full width) */
.btn-block{ width:100%;display:flex }

/* Disabled state */
.btn:disabled,.btn[disabled]{ opacity:0.5;cursor:not-allowed;box-shadow:none;transform:none !important }

/* Button group — 多个并排按钮 */
.btn-group{ display:inline-flex;gap:8px;flex-wrap:wrap }
.login-toggle{
  text-align:center;margin-top:18px;font-size:13px;color:var(--text-sec);
}
.login-toggle a{color:var(--primary-light);cursor:pointer;font-weight:600}
.login-toggle a:hover{text-decoration:underline}

/* ===== Card ===== */
.card{
  background:var(--card);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:24px;margin-bottom:20px;
  border:1px solid var(--border-light);
}
.card-title{
  font-size:15px;font-weight:700;margin-bottom:18px;
  display:flex;align-items:center;gap:8px;color:var(--text);
}

/* ===== Dashboard ===== */

/* 公告横幅 — 正式有质感版 */
#announcementBanner{
  margin-bottom:16px;background:var(--card);
  border-radius:14px;overflow:hidden;
  box-shadow:0 2px 12px rgba(45,53,97,0.08),0 0 0 1px var(--border-light);
  font-family:'-apple-system','Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;
}
.announcement-slider{ display:flex;flex-direction:column;gap:8px;padding:10px 14px 12px }
.announcement-card{
  border-radius:12px;padding:14px 16px 14px 18px;display:flex;align-items:flex-start;gap:12px;
  font-size:13.5px;line-height:1.6;animation:annSlideIn 0.35s cubic-bezier(0.22,1,0.36,1);position:relative;overflow:hidden;
  letter-spacing:0.01em;transition:max-height 0.3s ease,padding 0.3s ease,opacity 0.3s ease,margin 0.3s ease,transform 0.2s ease;
}
.announcement-card:hover{ transform:translateY(-1px) }
.announcement-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:2px}
.announcement-card.level-info{ background:linear-gradient(135deg,#eff6ff 0%,#f0f7ff 100%);border:1px solid #c7dbfe;color:#1e3a8a }
.announcement-card.level-info::before{background:linear-gradient(180deg,#4361ee,#5b7cfa) }
.announcement-card.level-warning{ background:linear-gradient(135deg,#fffbeb 0%,#fff8e8 100%);border:1px solid #fde68a;color:#92400e }
.announcement-card.level-warning::before{background:linear-gradient(180deg,#f59e0b,#fbbf24) }
.announcement-card.level-urgent{ background:linear-gradient(135deg,#fef2f2 0%,#fff0f1 100%);border:1px solid #fecaca;color:#991b1b }
.announcement-card.level-urgent::before{background:linear-gradient(180deg,#ef4444,#f87171) }
.announcement-tag{
  flex-shrink:0;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;
  letter-spacing:0.03em;white-space:nowrap;
}
.announcement-card.level-info .announcement-tag{ background:rgba(67,97,238,0.12);color:#1e40af }
.announcement-card.level-warning .announcement-tag{ background:rgba(245,158,11,0.15);color:#92400e }
.announcement-card.level-urgent .announcement-tag{ background:rgba(239,68,68,0.12);color:#991b1b }
.announcement-body{ flex:1;min-width:0 }
.announcement-title{ font-weight:600;margin-bottom:3px;font-size:14.5px;letter-spacing:0.015em }
.announcement-content{ opacity:0.78;font-size:13px;line-height:1.55 }
.announcement-time{ flex-shrink:0;font-size:11px;opacity:0.5;white-space:nowrap;padding-top:3px;font-variant-numeric:tabular-nums }
.announcement-close{
  position:absolute;top:8px;right:10px;background:none;border:none;cursor:pointer;
  color:inherit;opacity:0.4;font-size:18px;line-height:1;padding:2px 6px;border-radius:8px;
  transition:opacity 0.2s,background 0.2s;
}
.announcement-close:hover{opacity:0.85;background:rgba(0,0,0,0.06) }

/* "查看全部" 链接 */
.ann-view-all{
  text-align:center;padding:8px;margin-top:2px;border-radius:10px;
  font-size:12.5px;font-weight:500;color:var(--info);cursor:pointer;
  transition:background 0.2s;display:flex;align-items:center;justify-content:center;gap:4px;
}
.ann-view-all:hover{ background:rgba(67,97,238,0.06) }

/* 公告可折叠头部 */
.ann-header{
  display:flex;align-items:center;gap:7px;padding:10px 14px;
  background:linear-gradient(180deg,var(--bg-sec),var(--bg-tertiary,var(--card)));
  border-bottom:1px solid var(--border-light);font-size:14px;font-weight:600;
  color:var(--text);cursor:pointer;user-select:none;letter-spacing:0.02em;
  transition:background 0.2s;
}
.ann-header:hover{ background:var(--bg-tertiary,var(--bg-sec)) }
.ann-icon{ display:flex;align-items:center;color:var(--info) }
.ann-title-text{ margin-right:2px }
.ann-count{
  background:linear-gradient(135deg,var(--info),#5b7cfa);color:#fff;font-size:10.5px;font-weight:700;
  padding:2px 8px;border-radius:12px;line-height:1.4;letter-spacing:0.02em;
}
.ann-toggle{
  margin-left:auto;font-size:18px;color:var(--text-sec);
  padding:0 4px;border-radius:6px;line-height:1;
  transition:transform 0.3s cubic-bezier(0.22,1,0.36,1),color 0.2s;
  display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
}
.ann-toggle:hover{ color:var(--text) }
#announcementBanner.collapsed .ann-toggle{ transform:rotate(-90deg) }
#announcementBanner.collapsed .announcement-slider{ display:none }
#announcementBanner.collapsed{ border-radius:14px }
@keyframes annSlideIn{ from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:translateY(0)} }

/* ===== 通告中心页面 — 紧凑列表式 ===== */
.ann-center-page{ max-width:720px;margin:0 auto }
.ann-center-page .page-header{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;
}
.ann-center-page .page-title{
  font-size:20px;font-weight:700;color:var(--text);
  display:flex;align-items:center;gap:10px;letter-spacing:0.02em;
}
.ann-center-page .page-title .ico{color:var(--info) }

.ann-center-card{
  background:var(--card);border-radius:12px;padding:0;margin-bottom:8px;
  box-shadow:0 1px 4px rgba(45,53,97,0.06),0 0 0 1px var(--border-light);
  position:relative;overflow:hidden;transition:all 0.25s cubic-bezier(0.22,1,0.36,1);
  cursor:pointer;
}
.ann-center-card:hover{
  transform:translateY(-2px);box-shadow:0 6px 18px rgba(45,53,97,0.08),0 0 0 1px var(--border-light)
}
.ann-center-card::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:2px;transition:width 0.2s;
}
.ann-center-card:hover::before{ width:5px }
.ann-center-card.level-info::before{background:linear-gradient(180deg,#4361ee,#5b7cfa) }
.ann-center-card.level-warning::before{background:linear-gradient(180deg,#f59e0b,#fbbf24) }
.ann-center-card.level-urgent::before{background:linear-gradient(180deg,#ef4444,#f87171) }

.ann-center-head{ display:flex;align-items:center;gap:10px;padding:14px 16px 14px 20px;user-select:none }
.ann-center-tag{
  flex-shrink:0;padding:3px 9px;border-radius:16px;font-size:11px;font-weight:600;
  letter-spacing:0.03em;white-space:nowrap;
}
.ann-center-card.level-info .ann-center-tag{ background:rgba(67,97,238,0.10);color:#3b5bdb }
.ann-center-card.level-warning .ann-center-tag{ background:rgba(245,158,11,0.12);color:#c27d0e }
.ann-center-card.level-urgent .ann-center-tag{ background:rgba(239,68,68,0.10);color:#dc2626 }

.ann-center-title-row{ flex:1;min-width:0;display:flex;align-items:baseline;gap:8px }
.ann-center-title{ font-size:14px;font-weight:600;color:var(--text);letter-spacing:0.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.ann-center-time{
  flex-shrink:0;font-size:11.5px;color:var(--text-muted);
  font-variant-numeric:tabular-nums;white-space:nowrap
}

.ann-center-arrow{
  flex-shrink:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;
  color:var(--text-muted);transition:transform 0.3s cubic-bezier(0.22,1,0.36,1);border-radius:50%;
}
.ann-center-card:hover .ann-center-arrow{ color:var(--text-sec) }
.ann-center-card.expanded .ann-center-arrow{ transform:rotate(180deg) }

.ann-center-body{
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height 0.35s cubic-bezier(0.22,1,0.36,1),opacity 0.25s ease,padding 0.35s ease;
  padding:0 20px;border-top:0 solid transparent;
}
.ann-center-card.expanded .ann-center-body{
  max-height:300px;opacity:1;padding:12px 20px 16px;border-top-color:var(--border-light);
}
.ann-center-content{ font-size:13.5px;line-height:1.7;color:var(--text-main);opacity:0.82 }
.ann-center-author{ font-size:12px;color:var(--text-muted);margin-top:8px;font-style:italic }

/* ===== Upload Area ===== */
.upload-area{
  border:2px dashed var(--border);border-radius:var(--radius);
  padding:44px 20px;text-align:center;cursor:pointer;transition:all 0.3s;
  position:relative;overflow:hidden;background:var(--border-light);
}
.upload-area:hover{border-color:var(--primary-light);background:var(--primary-glow)}
.upload-area.has-image{padding:0;border:none;background:transparent}
.upload-area .hint{font-size:14px;color:var(--text-sec)}
.upload-area .hint strong{color:var(--primary-light)}
.upload-area img{width:100%;max-height:300px;object-fit:contain;border-radius:var(--radius)}
.upload-area input[type="file"]{display:none}
.upload-area .camera-btn{
  display:inline-block;margin-top:14px;padding:10px 24px;
  background:linear-gradient(135deg,#4361ee,#2d3561);color:#fff;border:none;border-radius:10px;
  font-size:14px;cursor:pointer;font-weight:600;
  box-shadow:0 4px 14px rgba(67,97,238,0.3);
}

/* ===== Mode Tabs ===== */
.mode-tabs{
  display:flex;gap:10px;margin-bottom:20px;
}
.mode-tab{
  flex:1;padding:16px 10px;border:2px solid var(--border);border-radius:var(--radius);
  text-align:center;cursor:pointer;transition:all 0.25s;background:var(--card);
}
.mode-tab:hover{border-color:var(--primary-light);background:var(--primary-glow)}
.mode-tab.active{border-color:var(--primary-light);background:var(--primary-glow);box-shadow:0 4px 14px rgba(67,97,238,0.12)}
.mode-tab .icon{font-size:30px;margin-bottom:6px}
.mode-tab .label{font-size:13px;font-weight:600;color:var(--text-sec)}
.mode-tab.active .label{color:var(--primary-light)}

/* ===== Results ===== */
.result{display:none}
.result.show{display:block}
.result h3{font-size:16px;font-weight:700;margin-bottom:14px;color:var(--primary)}
.result-section{
  background:var(--border-light);border-radius:var(--radius-sm);padding:16px;margin-bottom:14px;
}
.result-section h4{font-size:14px;font-weight:600;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.result-section h4 .badge{font-size:10px;padding:2px 7px;border-radius:5px;font-weight:600}
.badge-zh{background:#fef3c7;color:#92400e}
.badge-en{background:#dbeafe;color:#1e40af}
.result-section p{font-size:14px;line-height:1.7;color:var(--text);white-space:pre-wrap}
.result-section .field{margin-bottom:8px}
.result-section .field-label{font-size:12px;color:var(--text-sec);font-weight:600}
.result-section .field-value{font-size:14px;line-height:1.6}
.copy-btn{
  float:right;padding:5px 12px;border:1px solid var(--border);border-radius:7px;
  background:#fff;font-size:12px;cursor:pointer;color:var(--text-sec);font-weight:500;
  transition:all 0.2s;
}
.copy-btn:hover{background:var(--primary-glow);color:var(--primary-light);border-color:var(--primary-light)}

/* ===== History Detail Modal ===== */
.hd-section{margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.hd-section:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.hd-section-title{font-size:14px;font-weight:700;color:var(--primary-light);margin-bottom:12px}
.hd-field{margin-bottom:10px}
.hd-field-label{font-size:12px;color:var(--text-sec);font-weight:600}
.hd-field-value{font-size:14px;line-height:1.6;color:var(--text);word-break:break-word}
.hd-copy-row{display:flex;gap:8px;align-items:flex-start;margin-top:4px}
.hd-copy-row .copy-btn{float:none;flex-shrink:0}
.hd-copy-row pre{flex:1;background:var(--border-light);border-radius:8px;padding:12px 14px;font-size:13px;line-height:1.5;white-space:pre-wrap;word-break:break-word;margin:0;max-height:120px;overflow-y:auto;border:1px solid var(--border)}
.hd-items-list{background:var(--border-light);border-radius:8px;padding:12px}
.hd-item{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border);font-size:13px}
.hd-item:last-child{border-bottom:none}
.hd-meta{font-size:12px;color:var(--text-muted);margin-top:4px}

/* ===== Product Edit Modal ===== */
#productEditModal .modal{
  background:#fff;border-radius:20px;width:100%;max-width:640px;
  max-height:85vh;overflow-y:auto;padding:0;
  box-shadow:0 25px 80px rgba(0,0,0,0.2);
}
#productEditModal .modal h3{
  padding:20px 28px 16px;margin:0;
  border-bottom:1px solid var(--border);
  background:linear-gradient(135deg, rgba(67,97,238,0.03) 0%, rgba(6,214,160,0.03) 100%);
  border-radius:20px 20px 0 0;
}
#productEditModal .modal-close{
  width:34px;height:34px;border:none;border-radius:50%;
  background:rgba(0,0,0,0.06);font-size:16px;cursor:pointer;
  color:var(--text-sec);transition:all 0.2s;
}
#productEditModal .modal-close:hover{background:rgba(0,0,0,0.12);color:var(--text)}
#productEditBody{padding:22px 28px 28px}

.pe-section{margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--border)}
.pe-section:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.pe-section-title{
  font-size:13px;font-weight:700;color:var(--primary-light);
  margin-bottom:16px;display:flex;align-items:center;gap:8px;
  letter-spacing:0.3px;
}
.pe-section-title::before{
  content:'';display:inline-block;width:4px;height:16px;
  background:linear-gradient(180deg,#4361ee,#06d6a0);border-radius:2px;
}

.pe-field{margin-bottom:14px}
.pe-field:last-child{margin-bottom:0}
.pe-field-label{
  display:block;font-size:12px;font-weight:600;color:var(--text-sec);
  margin-bottom:7px;letter-spacing:0.2px;
}
.pe-field input[type="text"],.pe-field input[type="number"],
.pe-field textarea{
  width:100%;padding:11px 14px;border:1.5px solid #e2e8f0;
  border-radius:10px;font-size:13px;font-family:inherit;
  background:#fafbfc;transition:all 0.2s;color:var(--text);
}
.pe-field input[type="text"]:focus,.pe-field input[type="number"]:focus,
.pe-field textarea:focus{
  border-color:var(--primary-light);background:#fff;
  box-shadow:0 0 0 4px var(--primary-glow);outline:none;
}
.pe-field input::placeholder,.pe-field textarea::placeholder{color:var(--text-muted);font-size:12px}
.pe-field textarea{resize:vertical;min-height:80px;line-height:1.6}

.pe-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pe-row .pe-field{margin-bottom:0}

.pe-grid4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:12px}
.pe-grid4 .pe-field{margin-bottom:0}
.pe-grid4 .pe-field input{text-align:center}

.pe-toggle{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;background:var(--border-light);border-radius:10px;
  border:1.5px solid #e2e8f0;cursor:pointer;transition:all 0.2s;
}
.pe-toggle:hover{border-color:var(--primary-light)}
.pe-toggle input[type="checkbox"]{
  width:18px;height:18px;accent-color:var(--primary-light);cursor:pointer;
}
.pe-toggle span{font-size:13px;color:var(--text);font-weight:500}

.pe-actions{
  display:flex;gap:10px;justify-content:flex-end;
  margin-top:24px;padding-top:20px;border-top:1.5px solid var(--border);
}
/* Modal actions — 统一按钮尺寸 */
.pe-actions .btn, .sf-actions .btn, [class*="-actions"] .btn{
  padding:10px 24px;font-size:13.5px;font-weight:600;min-width:100px;
}

/* ===== Loading ===== */
.loading{display:none;text-align:center;padding:30px}
.loading.show{display:block}
.spinner{
  width:42px;height:42px;border:3px solid var(--border);
  border-top-color:var(--primary-light);border-radius:50%;
  animation:spin 0.8s linear infinite;margin:0 auto 14px;
}
@keyframes spin{to{transform:rotate(360deg)}}
.loading p{font-size:14px;color:var(--text-sec);font-weight:500}

/* ===== Status Bar ===== */
.status-bar{
  padding:10px 18px;border-radius:var(--radius-sm);font-size:13px;font-weight:500;
  text-align:center;margin-bottom:14px;display:none;
}
.status-bar.show{display:block}
.status-bar.error{background:#fef2f2;color:var(--danger);border:1px solid #fecaca}
.status-bar.success{background:#ecfdf5;color:#059669;border:1px solid #a7f3d0}
.status-bar.info{background:#eff6ff;color:#4361ee;border:1px solid #bfdbfe}

/* ===== Toast Notification ===== */
.toast-container{
  position:fixed;top:78px;right:20px;z-index:200;
  display:flex;flex-direction:column;gap:8px;
  pointer-events:none;
}
.toast{
  padding:14px 20px;border-radius:12px;font-size:13px;font-weight:600;
  box-shadow:0 8px 30px rgba(0,0,0,0.12);pointer-events:auto;
  animation:toastIn 0.3s ease,toastOut 0.3s ease 2.7s forwards;
  max-width:340px;word-break:break-word;backdrop-filter:blur(8px);
}
.toast.success{background:rgba(236,253,245,0.95);color:#065f46;border:1px solid #a7f3d0}
.toast.error{background:rgba(254,242,242,0.95);color:#991b1b;border:1px solid #fecaca}
.toast.info{background:rgba(239,246,255,0.95);color:#1e40af;border:1px solid #bfdbfe}
.toast.warn{background:rgba(255,251,235,0.95);color:#92400e;border:1px solid #fde68a}
@keyframes toastIn{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:translateX(0)}}
@keyframes toastOut{from{opacity:1}to{opacity:0;transform:translateX(60px)}}
@keyframes toastShrink{from{width:100%}to{width:0%}}
@media(max-width:768px){
  .toast-container{left:12px;right:12px;top:72px}
  .toast{max-width:100%}
}

/* ===== Delivery Review ===== */
.review-header{display:flex;justify-content:space-between;align-items:center}
.review-header h3{margin:0}
.review-header .rule-btn{
  padding:7px 14px;border:1.5px solid var(--border);border-radius:8px;
  background:#fff;font-size:12px;cursor:pointer;color:var(--text-sec);
  display:flex;align-items:center;gap:4px;font-weight:500;transition:all 0.2s;
}
.review-header .rule-btn:hover{background:var(--primary-glow);border-color:var(--primary-light);color:var(--primary-light)}
/* ===== Generic rule button (also used on AI 識別 main header) ===== */
.rule-btn{
  padding:7px 14px;border:1.5px solid var(--border);border-radius:8px;
  background:#fff;font-size:12px;cursor:pointer;color:var(--text-sec);
  display:flex;align-items:center;gap:4px;font-weight:500;transition:all 0.2s;
}
.rule-btn:hover{background:var(--primary-glow);border-color:var(--primary-light);color:var(--primary-light)}
.review-info{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.review-info .field{margin:0}
.review-item{
  background:#fff;border:1.5px solid var(--border);border-radius:var(--radius-sm);
  padding:14px;margin-bottom:12px;transition:all 0.2s;
}
.review-item:hover{box-shadow:0 2px 8px rgba(0,0,0,0.06)}
.review-item.matched{border-left:3px solid var(--accent)}
.review-item.new-rule{border-left:3px solid var(--warn)}
.review-item .ri-name{font-size:13px;font-weight:700;margin-bottom:10px;color:var(--text);word-break:break-all}
.review-item .ri-row{display:flex;gap:8px;margin-bottom:6px;align-items:center}
.review-item .ri-label{font-size:11px;color:var(--text-sec);min-width:52px;flex-shrink:0;font-weight:500}
.review-item .ri-value{font-size:13px;font-weight:600}
.review-item input,.review-item select{
  flex:1;padding:7px 10px;border:1.5px solid var(--border);border-radius:8px;
  font-size:13px;font-family:inherit;transition:all 0.2s;
}
.review-item input:focus,.review-item select:focus{border-color:var(--primary-light);outline:none;box-shadow:0 0 0 3px var(--primary-glow)}
.review-item .ri-qty{width:60px;text-align:center}
.review-item .ri-calc{
  font-size:14px;font-weight:700;color:var(--primary-light);
  padding:5px 10px;background:rgba(6,214,160,0.08);border-radius:8px;
  text-align:center;min-width:80px;
}
.review-item .ri-save{
  display:flex;align-items:center;gap:6px;margin-top:8px;
  padding-top:8px;border-top:1px dashed var(--border);
}
.review-item .ri-save label{font-size:11px;color:var(--text-sec);cursor:pointer;display:flex;align-items:center;gap:4px;font-weight:500}
.review-item .ri-save input[type="checkbox"]{width:16px;height:16px;accent-color:var(--primary-light)}
.review-item .ri-match-badge{font-size:10px;padding:3px 8px;border-radius:6px;background:rgba(6,214,160,0.1);color:#059669;font-weight:600}
.review-summary{
  background:linear-gradient(135deg,#1a1a2e,#2d3561);color:#fff;border-radius:var(--radius-sm);padding:14px 18px;margin-top:14px;
}
.review-summary .rs-row{display:flex;justify-content:space-between;margin-bottom:4px}
.review-summary .rs-row:last-child{margin:0}
.review-summary .rs-label{font-size:12px;opacity:0.7;font-weight:500}
.review-summary .rs-value{font-size:16px;font-weight:700}
.review-actions{display:flex;gap:10px;margin-top:14px}
.review-actions .btn{flex:1}

/* ===== Rules Modal ===== */
.modal-overlay{
  display:none;position:fixed;top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,0.5);z-index:100;
  align-items:flex-start;justify-content:center;padding:20px;overflow-y:auto;
  backdrop-filter:blur(4px);
}
.modal-overlay.show{display:flex}
.modal{
  background:#fff;border-radius:var(--radius);width:100%;max-width:480px;
  max-height:80vh;overflow-y:auto;padding:24px;
  box-shadow:var(--shadow-lg);
}
.modal h3{font-size:16px;color:var(--primary);margin-bottom:18px;display:flex;justify-content:space-between;align-items:center;font-weight:700}
.modal-close{
  width:30px;height:30px;border:none;border-radius:50%;
  background:var(--border-light);font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all 0.2s;
}
.modal-close:hover{background:var(--border)}
.rule-add{background:var(--border-light);border-radius:var(--radius-sm);padding:16px;margin-bottom:14px}
.rule-add h4{font-size:13px;color:var(--text);margin-bottom:12px;font-weight:600}
.rule-add .ra-row{display:flex;gap:8px;margin-bottom:8px;align-items:center}
.rule-add .ra-row label{font-size:12px;color:var(--text-sec);min-width:56px;font-weight:500}
.rule-add .ra-row input,.rule-add .ra-row select{flex:1;padding:8px 10px;border:1.5px solid var(--border);border-radius:8px;font-size:13px;font-family:inherit}
.rule-list-item{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--border);font-size:13px}
.rule-list-item:last-child{border-bottom:none}
.rule-list-item .rli-info{flex:1}
.rule-list-item .rli-keyword{font-weight:700;color:var(--primary-light)}
.rule-list-item .rli-detail{font-size:11px;color:var(--text-sec);margin-top:2px}
.rule-list-item .rli-delete{padding:5px 12px;border:1.5px solid var(--border);border-radius:8px;background:#fff;font-size:12px;cursor:pointer;color:var(--danger);font-weight:500;transition:all 0.2s}
.rule-list-item .rli-delete:hover{background:#fef2f2;border-color:#fecaca}
.rule-empty{text-align:center;padding:24px;color:var(--text-sec);font-size:13px}

/* ===== Table ===== */
.data-table{width:100%;border-collapse:collapse;font-size:13px}
.data-table th{
  background:var(--border-light);padding:12px 14px;text-align:left;
  font-weight:600;color:var(--text-sec);border-bottom:2px solid var(--border);
  font-size:12px;text-transform:uppercase;letter-spacing:0.3px;
}
.data-table td{padding:12px 14px;border-bottom:1px solid var(--border-light)}
.data-table tr:hover td{background:rgba(67,97,238,0.02)}

/* ===== Empty State ===== */
.empty-state{
  text-align:center;padding:48px 24px;color:var(--text-sec);
}
.empty-state h3{font-size:16px;color:var(--text);margin-bottom:8px;font-weight:700}
.empty-state p{font-size:13px;font-weight:400}

/* ===== Dashboard Base Styles ===== */
.dash-welcome{
  background:linear-gradient(135deg,#2d3561 0%,#1a1a2e 50%,#16213e 100%);
  border-radius:16px;padding:24px 28px;margin-bottom:16px;
  display:flex;align-items:center;gap:20px;color:#fff;
  border:1px solid rgba(67,97,238,0.15);position:relative;overflow:hidden;
}
.dash-welcome::before{content:'';position:absolute;top:-30%;right:-10%;
  width:200px;height:200px;background:radial-gradient(circle,rgba(67,97,238,0.2) 0%,transparent 70%);
  pointer-events:none;
}
.dash-welcome .welcome-illustration{ flex-shrink:0;position:relative;z-index:1 }
.dash-welcome .welcome-illustration .ico{ color:rgba(255,255,255,0.85);
  filter:drop-shadow(0 2px 8px rgba(67,97,238,0.3));
}
.dash-welcome h2{font-size:22px;font-weight:700;letter-spacing:-0.3px;position:relative;z-index:1 }
.dash-welcome p{font-size:13.5px;color:rgba(255,255,255,0.7);margin-top:4px;position:relative;z-index:1 }
.dash-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px;
}
.stat-card{
  background:var(--card);border-radius:14px;padding:18px 20px;
  border:1px solid var(--border-light);
  box-shadow:0 1px 3px rgba(0,0,0,0.04);transition:transform 0.2s;
  display:flex;align-items:center;gap:14px;
}
.stat-card:hover{ transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.06) }
.stat-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px }
.stat-icon svg{width:22px;height:22px }
/* Stat icon color variants */
.stat-icon.green{ background:linear-gradient(135deg,rgba(6,214,160,0.12),rgba(6,214,160,0.06));color:#059669 }
.stat-icon.green .ico{ color:#059669 }
.stat-icon.blue{ background:linear-gradient(135deg,rgba(67,97,238,0.12),rgba(67,97,238,0.06));color:#4361ee }
.stat-icon.blue .ico{ color:#4361ee }
.stat-icon.amber{ background:linear-gradient(135deg,rgba(245,158,11,0.12),rgba(245,158,11,0.06));color:#d97706 }
.stat-icon.amber .ico{ color:#d97706 }
.stat-icon.purple{ background:linear-gradient(135deg,rgba(139,92,246,0.12),rgba(139,92,246,0.06));color:#7c3aed }
.stat-icon.purple .ico{ color:#7c3aed }
.stat-info{display:flex;flex-direction:column;gap:2px }
.stat-value{font-size:26px;font-weight:800;color:var(--text);line-height:1.1 }
.stat-label{font-size:12px;color:var(--text-sec);font-weight:500 }

/* Activity timeline styles */
.activity-list{ padding:4px 0 }
.activity-item{
  display:flex;align-items:flex-start;gap:10px;padding:10px 12px;
  border-bottom:1px solid var(--border-light);transition:background 0.15s;
}
.activity-item:hover{ background:rgba(67,97,238,0.03) }
.activity-dot{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:6px;
}
.activity-dot.product{ background:#4361ee }
.activity-dot.delivery{ background:#06d6a0 }
.activity-dot.daily_report{ background:#f59e0b }
.activity-content{ flex:1;min-width:0 }
.activity-title{
  font-size:13px;font-weight:500;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.5;
}
.activity-badge{
  display:inline-block;padding:1px 8px;border-radius:10px;font-size:11px;
  font-weight:600;margin:2px 0 4px 0;
}
.activity-badge.product{ background:rgba(67,97,238,0.1);color:#4361ee }
.activity-badge.delivery{ background:rgba(6,214,160,0.1);color:#059669 }
.activity-badge.daily_report{ background:rgba(245,158,11,0.1);color:#d97706 }
.activity-time{ font-size:11px;color:var(--text-sec);margin-top:2px }

.dash-quick-actions{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px;
}
.quick-action{
  background:var(--card);border:1px solid var(--border-light);border-radius:12px;
  padding:14px 16px;display:flex;align-items:center;gap:10px;
  cursor:pointer;transition:all 0.2s;text-decoration:none;color:var(--text);
}
.quick-action:hover{ border-color:var(--primary-light);background:rgba(67,97,238,0.05);transform:translateY(-1px) }
.quick-action .ico{color:var(--primary-light);flex-shrink:0 }
.quick-action span{font-size:13px;font-weight:600 }

.dash-grid{display:grid;gap:12px }
.dash-grid.cols2{grid-template-columns:1fr 1fr }
.dash-grid.cols3{grid-template-columns:1fr 1fr 1fr }

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .nav{padding:0 14px}
  .nav-brand{font-size:15px;gap:8px}
  .nav-brand .brand-logo{width:30px;height:30px;border-radius:8px}
  .nav-brand .brand-logo svg{width:18px;height:18px}
  .nav-brand .brand-name .main-name{font-size:14px}
  .nav-shop{display:none}
  .nav-logout{font-size:11px;padding:6px 12px}

  .sidebar{
    width:240px;
    transform:translateX(-100%);
    transition:transform 0.3s ease;
    z-index:60;
    box-shadow:4px 0 24px rgba(0,0,0,0.15);
  }
  .sidebar.open{transform:translateX(0)}
  .sidebar-item{padding:14px 24px;font-size:14px}

  .main{margin-left:0;padding:16px 14px}

  .sidebar-overlay{
    display:none;position:fixed;top:0;left:0;right:0;bottom:0;
    background:rgba(0,0,0,0.4);z-index:55;
  }
  .sidebar-overlay.show{display:block}

  .dash-welcome{padding:24px 20px}
  .dash-welcome h2{font-size:18px}
  .dash-welcome .welcome-illustration{display:none}
  .dash-stats{grid-template-columns:1fr 1fr;gap:10px}
  .stat-card{padding:16px;gap:12px}
  .stat-icon{width:42px;height:42px;font-size:20px;border-radius:10px}
  .stat-info .stat-value{font-size:22px}

  .dash-grid{grid-template-columns:1fr}

  .data-table thead{display:none}
  .data-table,.data-table tbody,.data-table tr,.data-table td{display:block;width:100%}
  .data-table tr{
    margin-bottom:10px;border:1.5px solid var(--border);border-radius:var(--radius-sm);
    padding:14px;background:var(--card);
  }
  .data-table td{
    padding:4px 0;border-bottom:none;
    display:flex;justify-content:space-between;align-items:center;
    font-size:13px;
  }
  .data-table td::before{
    content:attr(data-label);
    font-weight:600;color:var(--text-sec);font-size:12px;margin-right:8px;flex-shrink:0;
  }
  .data-table td:last-child{border-bottom:none}

  .card{padding:18px;margin-bottom:14px;border-radius:var(--radius-sm)}
  .mode-tabs{gap:6px}
  .mode-tab{padding:12px 8px}
  .mode-tab .icon{font-size:24px}
  .mode-tab .label{font-size:12px}

  .upload-area{padding:28px 14px}
  .upload-area img{max-height:200px}

  #productEditModal .modal{
    border-radius:14px;max-width:100%;max-height:90vh;
    margin:0 8px;
  }
  #productEditBody{padding:16px 18px 18px}
  .pe-row{grid-template-columns:1fr;gap:10px}
  .pe-grid4{grid-template-columns:1fr 1fr;gap:10px}

  .review-info{grid-template-columns:1fr}
  .review-item{padding:12px}

  .login-card{width:92%;padding:28px 22px}
  .login-card h1{font-size:22px}

  .ra-row{flex-direction:column;gap:4px}
  .ra-row label{min-width:auto!important}

  .btn-sm{padding:7px 12px;font-size:12px}

  .modal{max-width:95%;max-height:85vh;margin:10px}

  .dash-quick-actions{grid-template-columns:1fr}

  .quick-action{padding:12px}
}

@media (max-width: 480px) {
  .dash-stats{grid-template-columns:1fr}
  .stat-card{padding:14px}
  .pe-grid4{grid-template-columns:1fr 1fr}
  .mode-tab .icon{font-size:18px}
  .mode-tab .label{font-size:11px}
}

/* ===== Supplier Form (Enhanced UI) ===== */
.supplier-form{padding:4px 0}
/* .sf-row / sf-row input/select already defined in unified form system above */

.sf-input-group{
  display:flex;
  align-items:center;
  gap:6px
}
.sf-prefix{
  font-size:13px;
  font-weight:700;
  color:var(--primary);
  white-space:nowrap
}
.sf-suffix{
  font-size:12px;
  color:var(--text-sec);
  white-space:nowrap
}
.sf-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid var(--border-light)
}

@media (max-width: 480px){
  .sf-row{flex-direction:column;align-items:stretch;gap:5px;margin-bottom:14px}
  .sf-row label{min-width:auto;font-size:12px}
  .sf-actions{flex-direction:row-reverse;justify-content:stretch}
  .sf-actions .btn{flex:1;padding:10px;text-align:center}
}

/* ===== Sales Page - New Layout (v2) ===== */

/* Filter bar */
.filter-input{
  padding:5px 10px;border:1.5px solid var(--border);border-radius:6px;
  font-size:13px;outline:none;transition:border-color .2s
}
.filter-input:focus{border-color:var(--primary-light);box-shadow:0 0 0 3px rgba(67,97,238,.1)}

/* KPI Cards Row */
.kpi-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-bottom:16px
}
.kpi-card{
  background:#fff;border:1.5px solid #e8e8e8;border-radius:10px;
  padding:14px 12px;text-align:center;
  position:relative;overflow:hidden
}
.kpi-card::before{
  content:'';position:absolute;left:0;top:0;width:3px;height:100%;
  border-radius:3px 0 0 3px
}
.kpi-today::before{background:var(--primary-light)}
.kpi-atv::before{background:#534ab7}
.kpi-abs::before{background:var(--accent)}
.kpi-count::before{background:#f0997b}
.kpi-label{font-size:11px;color:var(--text-sec);margin-bottom:4px;font-weight:500}
.kpi-value{font-size:20px;font-weight:800;color:#2d3561;line-height:1.2}
.kpi-sub{font-size:11px;margin-top:2px;font-weight:400;color:#888}

/* Best / Worst Dual Column */
.best-worst-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-bottom:16px
}
.bw-card{padding:14px}
.bw-title{font-size:13px;font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.bw-title-best{color:#06d6a0}
.bw-title-worst{color:#ef4444}
.bw-item{display:flex;align-items:center;gap:8px;padding:7px 0}
.bw-item + .bw-item{border-top:1px solid var(--border-light)}
.bw-rank{
  width:22px;height:22px;border-radius:50%;font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex-shrink:0
}
.bw-rank-1{background:#fef3c7;color:#92400e}
.bw-rank-2{background:#f3e8ff;color:#6b21a8}
.bw-rank-3{background:#dbeafe;color:#1e40af}
.bw-rank-4,.bw-rank-5{background:#f1f5f9;color:#666}
.bw-rank-slow{background:#fee2e2;color:#991b1b}
.bw-info{flex:1;min-width:0}
.bw-name{font-size:12.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bw-bar{height:4px;border-radius:2px;background:var(--border-light);margin-top:3px;overflow:hidden}
.bw-bar-fill{height:100%;background:linear-gradient(90deg,var(--primary-light),var(--accent));border-radius:2px}
.bw-val{font-size:12px;font-weight:700;text-align:right;min-width:55px;white-space:nowrap}
.bw-val-best{color:#06d6a0}
.bw-val-worst{color:#ef4444}

/* AI Analysis Panel */
.ai-panel{
  background:linear-gradient(135deg,#f8faff,#f0f4ff);
  border:1.5px solid rgba(67,97,238,.18);
  border-radius:12px;
  padding:16px 18px;
  margin-bottom:16px
}
.ai-header{
  display:flex;align-items:center;gap:8px;margin-bottom:12px
}
.ai-header-text{font-size:15px;font-weight:700;color:#2d3561}
.ai-badge{
  background:linear-gradient(135deg,#4361ee,#534ab7);color:#fff;
  font-size:10.5px;padding:3px 10px;border-radius:12px;font-weight:700;letter-spacing:.3px
}
.ai-logic-box{
  background:#fff;border:1.5px solid #e0e0e0;border-radius:8px;
  padding:9px 12px;margin-bottom:12px
}
.ai-logic-label{font-size:10.5px;font-weight:600;color:#888;margin-bottom:2px}
.ai-logic-text{font-size:11px;color:#444;line-height:1.5}

/* AI Cards Grid */
.ai-cards-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px
}
.ai-tip{
  background:#fff;border:1.5px solid #e8e8e8;border-radius:8px;
  padding:12px
}
.tip-icon{
  width:28px;height:28px;border-radius:7px;display:flex;align-items:center;
  justify-content:center;flex-shrink:0;margin-bottom:6px
}
.tip-icon-revenue{background:#dbeafe;color:#1e40af}
.tip-icon-warn{background:#fee2e2;color:#991b1b}
.tip-icon-trend{background:#dcfce7;color:#166534}
.tip-icon-abc{background:#fef3c7;color:#92400e}
.tip-title{font-size:12px;font-weight:700;color:#2d3561;margin-bottom:4px}
.tip-desc{font-size:11px;color:#666;line-height:1.55}
.tip-formula{
  background:#f8f9fa;border:1px solid #eee;border-radius:4px;
  padding:4px 8px;margin-top:6px;
  font-size:9.5px;font-family:'Courier New',Consolas,monospace;
  color:#534ab7;word-break:break-all
}

/* Responsive: Sales page */
@media(max-width:640px){
  .kpi-row{grid-template-columns:1fr 1fr;gap:8px}
  .kpi-value{font-size:17px}
  .best-worst-row{grid-template-columns:1fr}
  .ai-cards-grid{grid-template-columns:1fr}
}
@media(max-width:400px){
  .kpi-row{grid-template-columns:1fr}
}

/* ===== Store Profile Form (Settings) ===== */
.sf-select{
  padding:10px 12px;border:1.5px solid var(--border);border-radius:8px;
  font-size:14px;outline:none;background:#fff;transition:border-color .2s,box-shadow .2s;
  flex:1;min-width:0;color:var(--text)
}
.sf-select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(67,97,238,.12)}

/* Customer type chips */
.ct-chip{
  display:inline-flex;align-items:center;gap:4px;
  padding:5px 12px;border:1.5px solid var(--border);
  border-radius:20px;font-size:12.5px;cursor:pointer;
  transition:all .2s;background:#fff;color:var(--text-sec);user-select:none
}
.ct-chip:hover{border-color:var(--primary-light)}
.ct-chip input{display:none}
.ct-chip.active{
  background:var(--primary);color:#fff;border-color:var(--primary);
  font-weight:600
}

/* ===== Recommendation Panel (Sales page) ===== */
.rec-panel{
  background:linear-gradient(135deg,#fff9f0,#fff4e6);
  border:1.5px solid rgba(240,153,123,.3);
  border-radius:12px;padding:16px 18px;margin-bottom:16px
}

.rec-needs-profile,.rec-empty{
  text-align:center;padding:24px 16px
}
.rec-needs-icon,.rec-empty-icon{
  font-size:36px;margin-bottom:8px;opacity:.6
}
.rec-needs-profile h3,.rec-empty h3{
  font-size:15px;color:#2d3561;margin-bottom:6px
}
.rec-needs-profile p,.rec-empty p{
  font-size:12.5px;color:var(--text-sec);line-height:1.55;max-width:400px;margin:0 auto
}

.rec-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:10px;flex-wrap:wrap;gap:8px
}
.rec-header-left{
  display:flex;align-items:center;gap:7px;
  font-size:13px;color:#444
}

.rec-logic-box{
  background:#fff;border:1.5px solid #e8e8e8;border-radius:8px;
  padding:8px 12px;margin-bottom:12px
}
.rec-logic-label{font-size:10.5px;font-weight:600;color:#888;margin-bottom:2px}
.rec-logic-text{font-size:11px;color:#534ab7;font-family:'Courier New',Consolas,monospace}

.rec-list{display:flex;flex-direction:column;gap:10px}

.rec-item{
  background:#fff;border:1.5px solid #eee;border-radius:10px;
  padding:12px 14px;transition:box-shadow .2s
}
.rec-item:hover{box-shadow:0 2px 8px rgba(0,0,0,.06)}

.rec-item-header{
  display:flex;align-items:center;gap:8px;margin-bottom:6px
}
.rec-rank{
  width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#f0997b,#f77f00);
  color:#fff;font-size:11px;font-weight:700;display:flex;
  align-items:center;justify-content:center;flex-shrink:0
}
.rec-name{
  font-size:14px;font-weight:700;color:#2d3561;flex:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.rec-conf{
  font-size:10px;padding:2px 8px;border-radius:10px;
  font-weight:700;white-space:nowrap;flex-shrink:0
}

.rec-reasoning{
  font-size:11.5px;color:#666;line-height:1.5;
  margin-bottom:8px;padding-left:4px;
  border-left:3px solid #f0997b33;padding-left:10px
}

.rec-stats{
  display:flex;flex-wrap:wrap;gap:10px;font-size:11px;color:var(--text-sec);
  margin-bottom:8px
}
.rec-stats span b{color:#2d3561;font-weight:700}
.rec-sellers{
  font-size:10.5px;color:#888;font-style:italic;
  margin-left:auto
}

.rec-actions{
  display:flex;justify-content:flex-end
}
.rec-actions .btn{font-size:11px;padding:5px 12px}

/* Responsive: Recommendation panel */
@media(max-width:640px){
  .rec-stats{gap:6px}
  .rec-sellers{display:none}
}

/* ===== HKTVmall 運營中心 Styles ===== */
.hk-tabs{display:flex;gap:0;border-bottom:2px solid var(--border);margin-bottom:16px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.hk-tab{padding:10px 18px;font-size:14px;font-weight:500;color:var(--text-sec);background:none;border:none;border-bottom:3px solid transparent;cursor:pointer;white-space:nowrap;transition:all 0.2s}
.hk-tab:hover{color:var(--primary-light);background:var(--border-light)}
.hk-tab.active{color:var(--primary-light);border-bottom-color:var(--primary-light)}

.hk-panel{display:none;animation:fadeIn 0.25s ease}
.hk-panel.active{display:block}

/* Connection status badge */
.hk-status-badge{padding:3px 12px;border-radius:12px;font-size:12px;font-weight:600;background:#fee2e2;color:#dc2626}
.hk-status-badge.connected{background:#d1fae5;color:#047857}
.hk-status-badge.connecting{background:#fef3c7;color:#92400e}

/* KPI cards */
.hk-kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px}
.hk-kpi-card{background:var(--bg-secondary);border-radius:10px;padding:14px;text-align:center}
.hk-kpi-label{font-size:11px;color:var(--text-sec);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:4px}
.hk-kpi-value{font-size:24px;font-weight:700;color:var(--text-primary);line-height:1.2}
.hk-kpi-sub{font-size:11px;color:var(--text-sec);margin-top:2px}

/* Connect card */
.hk-connect-card{border-left:4px solid var(--primary-light);background:linear-gradient(135deg,#f8faff,#eef2ff)}

/* Upload area */
.hk-upload-area{border:2px dashed var(--border);border-radius:12px;padding:32px;text-align:center;cursor:pointer;transition:all 0.2s;background:#fafbfc}
.hk-upload-area:hover{border-color:var(--primary-light);background:#f0f4ff}

/* AI create card */
.hk-ai-create-card{border-left:4px solid #d85a30;background:linear-gradient(135deg,#fffaf5,#fef3e6)}

/* Order stats bar */
.hk-order-stats{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.hk-order-stats span{font-size:12px;padding:4px 10px;border-radius:12px;background:var(--bg-secondary);color:var(--text-sec);font-weight:500}
.hk-order-stats .stat-danger{background:#fee2e2;color:#dc2626}
.hk-order-stats .stat-warn{background:#fef3c7;color:#92400e}

/* Inventory summary */
.hk-inv-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:14px}
.hk-inv-summary>div{padding:10px 12px;border-radius:8px;background:var(--bg-secondary);font-size:13px}
.hk-inv-summary strong{font-size:16px;display:block;margin-top:2px}

/* Listing status badges */
.badge-active{background:#d1fae5;color:#047857;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600}
.badge-draft{background:#f3f4f6;color:#4b5563;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600}
.badge-pending{background:#dbeafe;color:#1d4ed8;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600}
.badge-inactive{background:#fee2e2;color:#dc2626;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600}
.badge-anomaly-danger{background:#fee2e2;color:#dc2626;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600}
.badge-anomaly-warn{background:#fef3c7;color:#92400e;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600}

/* Stock diff colors */
.stock-ok{color:#047857;font-weight:600}
.stock-warn{color:#92400e;font-weight:600}
.stock-bad{color:#dc2626;font-weight:700}

/* Responsive for HKTVmall page */
@media(max-width:768px){
  .hk-kpi-row{grid-template-columns:repeat(2,1fr)}
  #tab-hk-products>div:first-child>div>div{grid-template-columns:1fr !important}
}
@media(max-width:480px){
  .hk-kpi-row{grid-template-columns:1fr 1fr}
  .hk-tabs .hk-tab{padding:8px 12px;font-size:13px}
}

/* ========================================
   Wave 1: Loading / Empty / Error / Security UI
   ======================================== */

/* --- Global Loading Overlay --- */
.loading-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,0.7);z-index:9999;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px)}
.loading-spinner{width:40px;height:40px;border:3px solid #e5e7eb;border-top-color:#4361ee;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Skeleton placeholder */
.skeleton{background:linear-gradient(90deg,#f0f0f0 25%,#e8e8e8 50%,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-shimmer 1.5s infinite;border-radius:4px}
.skeleton-text{height:14px;margin-bottom:8px;width:100%}
.skeleton-text.short{width:60%}
.skeleton-title{height:20px;width:40%;margin-bottom:16px;border-radius:6px}
.skeleton-card{height:120px;border-radius:10px;margin-bottom:12px}
.skeleton-row{display:flex;gap:12px}.skeleton-row .skeleton-card{flex:1}
@keyframes skeleton-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}

/* Button loading state */
.btn-loading{position:relative;pointer-events:none;opacity:.7!important}
.btn-loading::after{content:'';position:absolute;width:14px;height:14px;border:2px solid transparent;border-top-color:currentColor;border-radius:50%;animation:spin .6s linear infinite;right:10px;top:50%;margin-top:-7px}

/* Page-level loading bar */
.page-loading-bar{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,#4361ee,#06d6a0);z-index:10000;transition:width .3s ease;width:0}
.page-loading-bar.active{width:30%;animation:loading-bar-pulse 1.5s ease-in-out infinite}
@keyframes loading-bar-pulse{0%{width:30%}50%{width:70%}100%{width:30%}}

/* --- Empty State Card --- */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;text-align:center;min-height:300px}
.empty-state-icon{width:80px;height:80px;border-radius:50%;background:#f0f4ff;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.empty-state-icon svg{width:36px;height:36px;color:#94a3b8}
.empty-state-title{font-size:17px;font-weight:600;color:#374151;margin-bottom:6px}
.empty-state-desc{font-size:13px;color:#9ca3af;max-width:320px;line-height:1.6;margin-bottom:18px}
.empty-state-action{padding:9px 22px;background:#4361ee;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}
.empty-state-action:hover{background:#3651d4;transform:translateY(-1px)}

/* Empty state variants */
.empty-state--products .empty-state-icon{background:#f0fdf4}
.empty-state--orders .empty-state-icon{background:#eff6ff}
.empty-state--sales .empty-state-icon{background:#fffbeb}
.empty-state--deliveries .empty-state-icon{background:#fdf4ff}

/* --- Error State Card --- */
.error-state{display:flex;flex-direction:column;align-items:center;padding:40px 24px;text-align:center}
.error-state-icon{font-size:48px;margin-bottom:12px}
.error-state-title{font-size:16px;font-weight:600;color:#dc2626;margin-bottom:6px}
.error-state-desc{font-size:13px;color:#6b7280;margin-bottom:16px;max-width:340px;line-height:1.5}
.error-retry-btn{padding:8px 20px;background:#fff;border:1.5px solid #e5e7eb;border-radius:8px;font-size:13px;cursor:pointer;transition:all .15s;color:#374151}
.error-retry-btn:hover{border-color:#4361ee;color:#4361ee;background:#f8faff}

/* Network offline banner */
.offline-banner{position:fixed;top:0;left:0;right:0;background:#dc2626;color:#fff;text-align:center;padding:8px;font-size:13px;z-index:10001;transform:translateY(-100%);transition:transform .3s}
.offline-banner.show{transform:translateY(0)}

/* --- Password Strength Indicator --- */
.pwd-strength{display:flex;gap:4px;margin-top:6px}
.pwd-strength-bar{flex:1;height:4px;border-radius:2px;background:#e5e7eb;transition:background .3s}
.pwd-strength-bar.active.weak{background:#ef4444}
.pwd-strength-bar.active.medium{background:#f59e0b}
.pwd-strength-bar.active.strong{background:#22c55e}
.pwd-strength-text{font-size:11px;margin-top:4px;font-weight:500}
.pwd-strength-text.weak{color:#ef4444}
.pwd-strength-text.medium{color:#f59e0b}
.pwd-strength-text.strong{color:#22c55e}

/* Login lockout notice */
.login-lockout{background:#fef2f2;border:1px solid #fecaca;border-radius:10px;padding:16px;text-align:center;margin-bottom:16px}
.login-lockout-icon{font-size:28px;margin-bottom:6px}
.login-lockout-text{font-size:13px;color:#991b1b;margin-bottom:4px}
.login-lockout-timer{font-size:18px;font-weight:700;color:#dc2626}

/* CSV export button */
.csv-export-btn{display:inline-flex;align-items:center;gap:5px;padding:7px 16px;background:#fff;border:1.5px solid #d1d5db;border-radius:8px;font-size:13px;color:#374151;cursor:pointer;transition:all .15s}
.csv-export-btn:hover{border-color:#4361ee;color:#4361ee;background:#f8faff}
.csv-export-btn svg{width:15px;height:15px}

/* ===== Wave 3: Print Styles (@media print) ===== */
@media print {
  /* Hide all UI elements that shouldn't be printed */
  body { background:#fff !important;color:#000 !important;-webkit-print-color-adjust:exact;print-color-adjust:exact }
  nav, .sidebar, .sidebar-overlay, .nav, .hamburger,
  #toastContainer, #globalLoading, #pageLoadingBar, #offlineBanner,
  .theme-toggle, .btn:not(.print-keep), button:not(.print-keep),
  input, select, textarea, .filter-bar, .status-bar,
  .modal-overlay, .no-print { display:none !important }

  /* Reset main content for full-width printing */
  .main { position:static !important;margin:0 !important;padding:0 !important;width:100% !important;max-width:none !important }
  .page { display:block !important;position:static !important;overflow:visible !important }

  /* Cards without shadows for printing */
  .card { border:1px solid #ccc !important;box-shadow:none !important;break-inside:avoid-page;page-break-inside:avoid;margin-bottom:8px !important }

  /* Tables: show all rows, clean borders */
  table { width:100% !important;border-collapse:collapse !important;font-size:11px !important }
  table th, table td { padding:6px 8px !important;border:1px solid #ddd !important }
  table thead th { background:#f5f5f5 !important;color:#000 !important }
  table tbody tr:nth-child(even) { background:#fafafa !important }

  /* Print-specific header */
  body::before {
    content:'AUTOOPS AI — ' attr(data-print-title);display:block;text-align:center;font-size:18px;font-weight:700;
    margin-bottom:12px;padding-bottom:8px;border-bottom:2px solid #333
  }
  body::after {
    content:'打印日期: ' var(--print-date,'');display:block;text-align:center;font-size:10px;color:#888;margin-top:16px
  }

  /* Ensure all text is black */
  * { color:#000 !important;text-shadow:none !important;box-shadow:none !important }
  a { text-decoration:none !important;color:#000 !important }
  svg { stroke:#000 !important;fill:none !important }

  /* KPI cards in grid layout for print */
  .dash-stats, [id*="KPI"], [id*="kpi"] { display:grid !important;grid-template-columns:repeat(4,1fr) !important;gap:8px !important;print-color-adjust:exact }
  .stat-card { border:1px solid #ddd !important;padding:12px !important;page-break-inside:avoid }

  /* Thermal receipt mode (58mm/80mm) */
  body.receipt-mode { width:58mm !important;padding:3mm !important;font-size:10px !important }
  body.receipt-mode .card { border:none !important;padding:0 !important;margin:0 0 4mm 0 !important }
  body.receipt-mode table { font-size:9px !important }
  body.receipt-mode table th, body.receipt-mode table td { padding:2px 3mm !important;border-top:1px dashed #999 !important;border-bottom:none !important;border-left:none !important;border-right:none !important }
  body.receipt-mode h2, body.receipt-mode h3 { font-size:11px !important }
}

/* Print button helper class (deprecated — use .btn.btn-ghost-neutral.btn-sm.no-print) */
.print-btn{display:inline-flex;align-items:center;gap:5px;padding:7px 14px;background:#fff;border:1.5px solid #d1d5db;border-radius:8px;font-size:12px;color:#374151;cursor:pointer;transition:all .15s}
.print-btn:hover{border-color:#4361ee;color:#4361ee;background:#f8faff}
.print-btn svg{width:14px;height:14px}

/* Fullscreen dashboard print mode */
.dashboard-fullscreen .nav,.dashboard-fullscreen .sidebar,.dashboard-fullscreen .sidebar-overlay{opacity:0;pointer-events:none}

/* ===== Subscription Page ===== */
.sub-container{max-width:1200px;margin:0 auto;padding:20px}
.sub-header{margin-bottom:24px}
.sub-header h2{margin:0 0 4px;font-size:24px;color:var(--text-primary,#1a1a2e)}
.sub-header p{margin:0;color:var(--text-sec,#6b7280);font-size:14px}
.sub-section-title{margin:32px 0 16px;font-size:18px;font-weight:600;color:var(--text-primary,#1a1a2e)}
.sub-error{padding:14px 18px;background:#fef2f2;color:#991b1b;border-radius:10px;border:1px solid #fecaca;font-size:13px;margin:10px 0}

/* Status Card */
.sub-status-card{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-radius:14px;margin-bottom:14px;gap:16px;flex-wrap:wrap}
.sub-status-card.trial{background:linear-gradient(135deg,#fef3c7,#fde68a);border:1px solid #fcd34d}
.sub-status-card.active{background:linear-gradient(135deg,#d1fae5,#a7f3d0);border:1px solid #6ee7b7}
.sub-status-card.past-due{background:linear-gradient(135deg,#fed7aa,#fdba74);border:1px solid #fb923c}
.sub-status-card.canceled,.sub-status-card.expired{background:linear-gradient(135deg,#fee2e2,#fecaca);border:1px solid #fca5a5}
.sub-status-card.no-sub{background:#f3f4f6;border:1px solid #d1d5db}
.sub-status-left{display:flex;align-items:center;gap:14px}
.sub-status-icon{font-size:32px;line-height:1}
.sub-status-label{font-size:18px;font-weight:600;color:#1a1a2e}
.sub-status-plan{font-size:13px;color:#4b5563;margin-top:2px}
.sub-status-right{text-align:right}
.sub-status-days{font-size:14px;color:#1a1a2e}
.sub-status-days strong{font-size:20px;color:#4361ee}
.sub-status-expires{font-size:11px;color:#6b7280;margin-top:2px}
.sub-status-trial-hint{font-size:11px;color:#92400e;margin-top:4px}

/* Usage Card */
.sub-usage-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:16px 20px;margin-bottom:20px}
.sub-usage-card h4{margin:0 0 12px;font-size:14px;color:#1a1a2e}
.sub-usage-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.sub-usage-item{padding:12px;background:#f9fafb;border-radius:8px}
.sub-usage-label{font-size:11px;color:#6b7280;margin-bottom:4px}
.sub-usage-value{font-size:18px;font-weight:600;color:#1a1a2e;margin-bottom:6px}
.sub-usage-bar{height:6px;background:#e5e7eb;border-radius:3px;overflow:hidden;margin-bottom:4px}
.sub-usage-fill{height:100%;background:linear-gradient(90deg,#4361ee,#06d6a0);transition:width 0.3s}
.sub-usage-remaining{font-size:10px;color:#9ca3af}

/* Plans Grid */
.sub-plans-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:16px}
.sub-plan-card{position:relative;background:#fff;border:2px solid #e5e7eb;border-radius:16px;padding:24px;display:flex;flex-direction:column;transition:all 0.3s cubic-bezier(0.22,1,0.36,1)}
.sub-plan-card:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(67,97,238,0.1)}
.sub-plan-card.highlight{border-color:#4361ee;box-shadow:0 8px 24px rgba(67,97,238,0.12)}
.sub-plan-card.current{border-color:#06d6a0;background:linear-gradient(180deg,#f0fdf4,#fff)}
.sub-plan-badge{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#4361ee,#6366f1);color:#fff;padding:4px 14px;border-radius:14px;font-size:11px;font-weight:600;letter-spacing:0.05em}
.sub-plan-current-tag{position:absolute;top:10px;right:10px;background:#06d6a0;color:#fff;padding:2px 10px;border-radius:10px;font-size:10px;font-weight:600}
.sub-trial-tag{background:linear-gradient(135deg,#f59e0b,#d97706)}
.sub-plan-header h3{margin:0 0 4px;font-size:20px;color:#1a1a2e}
.sub-plan-tagline{margin:0;font-size:12px;color:#6b7280}
.sub-plan-price{margin:18px 0 4px;display:flex;align-items:baseline;gap:4px}
.sub-price-amount{font-size:32px;font-weight:700;color:#1a1a2e}
.sub-price-period{font-size:14px;color:#6b7280}
.sub-plan-yearly{font-size:12px;color:#4361ee;margin-bottom:18px}
.sub-plan-features{list-style:none;padding:0;margin:0 0 20px;flex:1}
.sub-plan-features li{padding:5px 0;font-size:13px;color:#374151;display:flex;align-items:flex-start;gap:8px;line-height:1.4}
.sub-check{color:#06d6a0;font-weight:700;flex-shrink:0}
.sub-plan-card .btn{width:100%}

/* Subscription Modal (uses #subscribeModal to avoid conflicting with global .modal-overlay) */
#subscribeModal{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:10001;display:none;align-items:center;justify-content:center;padding:20px}
#subscribeModal.show-sub{display:flex}
#subscribeModal .sub-modal-content{background:#fff;border-radius:14px;width:100%;max-width:520px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.2)}
#subscribeModal .sub-modal-header{padding:14px 18px;border-bottom:1px solid #e5e7eb;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,#4361ee,#6366f1);color:#fff}
#subscribeModal .sub-modal-header h3{margin:0;font-size:16px;font-weight:600}
#subscribeModal .sub-modal-close{background:none;border:none;color:#fff;cursor:pointer;font-size:22px;line-height:1;padding:4px}
#subscribeModal .sub-modal-body{padding:18px;overflow-y:auto;flex:1}
#subscribeModal .sub-modal-footer{padding:12px 18px;border-top:1px solid #e5e7eb;display:flex;justify-content:flex-end;gap:8px;background:#f9fafb}

.sub-modal-plan{background:#f9fafb;border-radius:10px;padding:14px;margin-bottom:14px}
.sub-modal-plan-name{font-size:16px;font-weight:600;color:#1a1a2e;margin-bottom:10px}
.sub-modal-cycle{display:flex;gap:14px;margin-bottom:8px;font-size:13px}
.sub-modal-cycle label{display:flex;align-items:center;gap:4px;cursor:pointer}
.sub-modal-price-info{font-size:12px;color:#6b7280;display:flex;gap:14px;margin-bottom:8px}
.sub-modal-total{padding-top:8px;border-top:1px dashed #d1d5db;font-size:14px;color:#1a1a2e}
.sub-modal-total strong{color:#4361ee;font-size:18px}

.sub-modal-fps{background:#fffbeb;border:1px solid #fde68a;border-radius:10px;padding:14px;margin-bottom:14px}
.sub-modal-fps h4{margin:0 0 10px;font-size:13px;color:#92400e}
.sub-modal-fps ol{margin:0;padding-left:20px;font-size:12px;color:#374151;line-height:1.7}
.sub-modal-fps strong{color:#1a1a2e}
.sub-modal-fps-note{margin-top:10px;padding:8px 10px;background:#fef3c7;border-radius:6px;font-size:11px;color:#92400e}

.sub-modal-upload{margin-bottom:8px}
.sub-upload-label{display:block;font-size:13px;font-weight:600;color:#1a1a2e;margin-bottom:6px}
.sub-upload-label::after{content:" *";color:#ef4444}
.sub-modal-upload input[type="file"]{width:100%;padding:8px;border:1px dashed #d1d5db;border-radius:8px;font-size:12px;cursor:pointer}
.sub-upload-preview{margin-top:8px;text-align:center}
.sub-file-preview{padding:10px;background:#f3f4f6;border-radius:6px;font-size:12px;color:#374151}

/* Payment Status */
.sub-pay-status{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:500}
.sub-pay-status.pending{background:#fef3c7;color:#92400e}
.sub-pay-status.confirmed{background:#d1fae5;color:#065f46}
.sub-pay-status.rejected{background:#fee2e2;color:#991b1b}
.sub-pay-status.refunded{background:#e0e7ff;color:#3730a3}

@media (max-width:768px){
  .sub-plans-grid{grid-template-columns:1fr}
  .sub-usage-grid{grid-template-columns:1fr}
  .sub-status-card{flex-direction:column;align-items:flex-start}
  .sub-status-right{text-align:left}
}

/* ===== 企業版側欄分組 ===== */
.sidebar-section{ margin-top:16px;padding-top:12px;border-top:1px solid var(--border-light,#e5e7eb) }
.sidebar-section-title{ padding:4px 16px;font-size:10px;font-weight:600;color:var(--text-muted,#9ca3af);text-transform:uppercase;letter-spacing:0.05em }

/* ===== 門店卡片 ===== */
.store-card{
  background:#fff;
  border-radius:12px;
  box-shadow:0 1px 3px rgba(0,0,0,0.08);
  padding:16px;
  margin-bottom:12px;
  transition:all 0.2s;
  border:1px solid #e5e7eb;
}
.store-card:hover{
  box-shadow:0 4px 12px rgba(0,0,0,0.1);
  transform:translateY(-1px);
}
.store-card[data-status="disabled"]{
  opacity:0.55;
  background:#f9fafb;
}
.store-card-header{
  display:flex;
  align-items:center;
  gap:12px;
  padding-bottom:12px;
  border-bottom:1px solid #f3f4f6;
}
.store-icon{
  width:40px;height:40px;
  background:linear-gradient(135deg,#667eea,#764ba2);
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  color:white;
  flex-shrink:0;
}
.store-icon .ico{width:20px;height:20px}
.store-info{flex:1;min-width:0}
.store-name{font-size:16px;font-weight:700;color:#111827;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.store-code{font-size:11px;color:#9ca3af;margin-top:2px}
.store-status{
  font-size:11px;
  padding:3px 10px;
  border-radius:12px;
  font-weight:600;
  white-space:nowrap;
  flex-shrink:0;
}
.store-status.status-active{background:#d1fae5;color:#065f46}
.store-status.status-disabled{background:#fee2e2;color:#991b1b}
.store-card-body{padding:12px 0}
.store-meta{
  display:flex;align-items:center;gap:8px;
  font-size:13px;color:#6b7280;
  margin-bottom:6px;
}
.store-meta .ico{width:14px;height:14px;flex-shrink:0;opacity:0.6}
.store-card-stats{
  display:grid;grid-template-columns:1fr 1fr 1fr;
  gap:8px;
  padding:12px 0;
  border-top:1px solid #f3f4f6;
  border-bottom:1px solid #f3f4f6;
}
.store-stat{text-align:center}
.store-stat .stat-num{font-size:18px;font-weight:700;color:#111827}
.store-stat .stat-label{font-size:11px;color:#9ca3af;margin-top:2px}
.store-card-actions{
  display:flex;gap:8px;
  padding-top:12px;
  flex-wrap:wrap;
}
.store-card-actions .btn:disabled{
  opacity:0.5;
  cursor:not-allowed;
  pointer-events:none;
}

/* ===== 員工篩選欄 ===== */
.staff-filter-bar{
  display:flex;
  gap:10px;
  margin-bottom:16px;
  flex-wrap:wrap;
  align-items:center;
}
.staff-filter-bar input,
.staff-filter-bar select{
  padding:8px 12px;
  border:1px solid #d1d5db;
  border-radius:8px;
  font-size:13px;
  background:#fff;
  color:#374151;
  outline:none;
  transition:border-color 0.15s;
}
.staff-filter-bar input{flex:1;min-width:200px}
.staff-filter-bar input:focus,
.staff-filter-bar select:focus{border-color:#4361ee}
.staff-filter-bar select{cursor:pointer}

/* ===== 密碼顯示 Modal ===== */
.password-display-box{
  background:linear-gradient(135deg,#f0f4ff,#e0e7ff);
  border:2px dashed #4361ee;
  border-radius:12px;
  padding:24px;
  text-align:center;
  margin:16px 0;
}
.password-display-box .pwd-label{
  font-size:13px;
  color:#6b7280;
  margin-bottom:8px;
}
.password-display-box .pwd-value{
  font-size:28px;
  font-weight:800;
  color:#1e40af;
  letter-spacing:3px;
  font-family:'Courier New',monospace;
  margin-bottom:12px;
  user-select:all;
}
.password-display-box .pwd-warning{
  font-size:12px;
  color:#92400e;
  background:#fef3c7;
  padding:8px 12px;
  border-radius:8px;
  margin-top:8px;
  display:inline-block;
}
.password-copy-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 20px;
  background:#4361ee;
  color:#fff;
  border:none;
  border-radius:8px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:all 0.15s;
}
.password-copy-btn:hover{background:#3a56d4;transform:translateY(-1px)}
.password-copy-btn:active{transform:scale(0.97)}

/* ===== 確認對話框 ===== */
.confirm-modal-body{
  text-align:center;
  padding:20px 10px;
}
.confirm-modal-icon{
  width:56px;height:56px;
  margin:0 auto 16px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:28px;
}
.confirm-modal-icon.warning{background:#fef3c7;color:#92400e}
.confirm-modal-icon.danger{background:#fee2e2;color:#991b1b}
.confirm-modal-icon.info{background:#dbeafe;color:#1e40af}
.confirm-modal-title{font-size:16px;font-weight:600;color:#111827;margin-bottom:8px}
.confirm-modal-desc{font-size:13px;color:#6b7280;line-height:1.5}

/* ===== 角色徽章 ===== */
.role-badge{
  font-size:11px;
  padding:2px 8px;
  border-radius:10px;
  font-weight:500;
  display:inline-block;
}
.role-badge.manager{background:#dbeafe;color:#1e40af}
.role-badge.regional{background:#ede9fe;color:#6b21a8}
.role-badge.staff{background:#f1f5f9;color:#475569}
.role-badge.owner{background:#d1fae5;color:#065f46}