/* ============================================================
 * CRITICAL CSS PATH HINTS (for potential future inlining)
 * 
 * The following CSS blocks are considered "critical render path" CSS
 * that affect the above-the-fold layout on first load:
 *
 * 1. @font-face declarations (lines 1-14) — font loading
 * 2. :root CSS variables (lines 16-33) — theme tokens
 * 3. Reset / base body (lines 35-54) — layout foundation
 * 4. .page transitions / .app flexbox (lines 56-62) — page rendering
 * 5. .sidebar + .main layout (lines 64-97) — shell structure
 * 6. .topbar (lines 99-138) — sticky header
 * 7. .login-page styles — first screen for unauthenticated users
 * 8. .kpi-card and .card-grid — dashboard first-view cards
 *
 * Non-critical (can be deferred):
 * - Dark mode overrides (.dark)
 * - @media print styles
 * - .bigscreen-mode styles (projection mode)
 * - Animations / @keyframes (non-essential)
 * ============================================================ */

  @font-face {
    font-family: 'InstrumentSans';
    src: url('./_shared/fonts/InstrumentSans-Regular.ttf') format('truetype');
    font-weight: 400;
  }
  @font-face {
    font-family: 'InstrumentSans';
    src: url('./_shared/fonts/InstrumentSans-Bold.ttf') format('truetype');
    font-weight: 700;
  }

  :root {
    --sidebar-w: 220px;
    --accent: #4a8c5c;
    --accent-dark: #3a7a4c;
    --accent-light: #e8f5e9;
    --ink: #1e293b;
    --muted: #64748b;
    --bg: #f1f5f9;
    --card-bg: #fff;
    --border: #e2e8f0;
    --warn: #e8943a;
    --danger: #ef4444;
    --info: #3b82f6;
    --purple: #8b5cf6;
    --success: #10b981;
  }

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

  body {
    font-family: 'InstrumentSans', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    background: var(--bg);
    color: var(--ink);
    font-size: 14px;
    line-height: 1.5;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  /* ===== Page transition ===== */
  .page { display: none; opacity: 0; transform: translateY(6px); }
  .page.active { display: block; animation: fadeIn 0.25s ease forwards; }
  @keyframes fadeIn { to { opacity: 1; transform: translateY(0); } }

  .app { display: flex; min-height: 100vh; }

  /* ===== Sidebar ===== */
  .sidebar {
    width: var(--sidebar-w);
    background: var(--ink);
    color: #fff;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 100;
    transition: transform 0.3s;
  }
  .sidebar-header { padding: 1.2rem; border-bottom: 1px solid rgba(255,255,255,0.1); }
  .sidebar-header h1 { font-size: 1rem; font-weight: 700; display: flex; align-items: center; gap: 0.5rem; }
  .sidebar-header p { font-size: 0.75rem; color: rgba(255,255,255,0.5); margin-top: 0.2rem; }

  .nav-list { list-style: none; padding: 0.5rem 0; flex: 1; overflow-y: auto; }
  .nav-list li { padding: 0; }
  .nav-list a {
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0.65rem 1.2rem;
    color: rgba(255,255,255,0.7); text-decoration: none;
    font-size: 0.85rem; cursor: pointer; transition: all 0.2s;
    border-left: 3px solid transparent;
  }
  .nav-list a:hover { background: rgba(255,255,255,0.05); color: #fff; }
  .nav-list a.active { background: var(--accent); color: #fff; border-left-color: #fff; }
  .nav-icon { font-size: 1.05rem; width: 1.4rem; text-align: center; }
  .nav-divider { height: 1px; background: rgba(255,255,255,0.08); margin: 0.4rem 1.2rem; }

  .sidebar-footer { padding: 1rem 1.2rem; border-top: 1px solid rgba(255,255,255,0.1); font-size: 0.72rem; color: rgba(255,255,255,0.4); }

  /* ===== Main ===== */
  .main { margin-left: var(--sidebar-w); flex: 1; display: flex; flex-direction: column; min-width: 0; }

  /* ===== Topbar ===== */
  .topbar {
    background: var(--card-bg); border-bottom: 1px solid var(--border);
    padding: 0.7rem 1.5rem;
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 50;
  }
  .topbar-left { display: flex; align-items: center; gap: 0.8rem; }
  .menu-btn { display: none; background: none; border: none; font-size: 1.3rem; cursor: pointer; color: var(--ink); }
  .sidebar-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); z-index: 99; }
  .sidebar-overlay.active { display: block; }
  .search-box { position: relative; }
  .search-box input {
    border: 1px solid var(--border); border-radius: 6px;
    padding: 0.35rem 0.7rem 0.35rem 1.8rem;
    font-size: 0.82rem; width: 240px; outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .search-box input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(74,140,92,0.1); }
  .search-box::before {
    content: '\1F50D'; position: absolute; left: 0.5rem; top: 50%;
    transform: translateY(-50%); font-size: 0.85rem; opacity: 0.5;
  }
  .topbar-right { display: flex; align-items: center; gap: 1rem; }
  .topbar-clock { font-size: 0.85rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
  .topbar-date { font-size: 0.78rem; color: var(--muted); }
  .notify-btn {
    position: relative; background: none; border: none;
    font-size: 1.15rem; cursor: pointer; color: var(--muted);
    transition: color 0.2s;
  }
  .notify-btn:hover { color: var(--ink); }
  .notify-dot { position: absolute; top: 0; right: 0; width: 7px; height: 7px; background: var(--danger); border-radius: 50%; border: 2px solid #fff; }
  .user-avatar {
    width: 30px; height: 30px; border-radius: 50%; background: var(--accent);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.8rem; cursor: pointer;
  }

  /* ===== Content ===== */
  .content { padding: 1.2rem 1.5rem; flex: 1; }
  .page-title { font-size: 1.2rem; font-weight: 700; margin-bottom: 1rem; }

  /* ===== Cards ===== */
  .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.9rem; margin-bottom: 1.2rem; }
  .kpi-card { background: var(--card-bg); border-radius: 10px; padding: 1rem; border: 1px solid var(--border); transition: box-shadow 0.2s, transform 0.2s; }
  .kpi-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.05); transform: translateY(-1px); }
  .kpi-card .kpi-label { font-size: 0.75rem; color: var(--muted); margin-bottom: 0.2rem; }
  .kpi-card .kpi-value { font-size: 1.4rem; font-weight: 700; color: var(--ink); margin-bottom: 0.15rem; font-variant-numeric: tabular-nums; }
  .kpi-card .kpi-change { font-size: 0.72rem; display: flex; align-items: center; gap: 0.2rem; }
  .kpi-change.up { color: var(--accent); }
  .kpi-change.down { color: var(--danger); }

  .section-card { background: var(--card-bg); border-radius: 10px; border: 1px solid var(--border); margin-bottom: 1rem; overflow: hidden; }
  .section-header { padding: 0.9rem 1.2rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
  .section-header h3 { font-size: 0.9rem; font-weight: 700; }
  .section-body { padding: 0.8rem 1.2rem; }

  /* ===== Tables ===== */
  .data-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
  .data-table th { text-align: left; padding: 0.55rem 0.7rem; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--border); background: #f8fafc; white-space: nowrap; }
  .data-table td { padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
  .data-table tbody tr:hover { background: #f8fafc; }
  .data-table .amount { font-weight: 600; color: var(--warn); }
  .tag { display: inline-block; padding: 0.12rem 0.45rem; border-radius: 4px; font-size: 0.72rem; font-weight: 600; }
  .tag-green { background: var(--accent-light); color: var(--accent-dark); }
  .tag-blue { background: #dbeafe; color: #1e40af; }
  .tag-orange { background: #fef3c7; color: #92400e; }
  .tag-red { background: #fee2e2; color: #991b1b; }
  .tag-gray { background: #f1f5f9; color: var(--muted); }
  .tag-purple { background: #ede9fe; color: #5b21b6; }

  .status { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; }
  .status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; }
  .status-wait::before { background: var(--warn); }
  .status-done::before { background: var(--accent); }
  .status-ship::before { background: var(--info); }

  /* ===== Filter Bar ===== */
  .filter-bar { display: flex; gap: 0.5rem; margin-bottom: 0.8rem; flex-wrap: wrap; }
  .filter-btn { padding: 0.35rem 0.7rem; border: 1px solid var(--border); border-radius: 6px; background: #fff; font-size: 0.78rem; cursor: pointer; transition: all 0.2s; }
  .filter-btn:hover { border-color: var(--accent); color: var(--accent); }
  .filter-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

  /* ===== Product Cards ===== */
  .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.9rem; }
  .product-card { background: var(--card-bg); border-radius: 10px; border: 1px solid var(--border); padding: 0.9rem; transition: box-shadow 0.2s, transform 0.2s; }
  .product-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.06); transform: translateY(-2px); }
  .product-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.4rem; }
  .product-name { font-weight: 700; font-size: 0.92rem; }
  .product-supplier { font-size: 0.72rem; color: var(--muted); margin-top: 0.15rem; }
  .product-price-row { display: flex; align-items: baseline; gap: 0.4rem; margin-top: 0.6rem; }
  .product-price { font-size: 1.1rem; font-weight: 700; color: var(--accent); }
  .product-unit { font-size: 0.72rem; color: var(--muted); }
  .product-stock { font-size: 0.75rem; color: var(--muted); margin-top: 0.25rem; }
  .product-btn { margin-top: 0.7rem; width: 100%; padding: 0.45rem; border: none; border-radius: 6px; background: var(--accent); color: #fff; font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: background 0.2s; }
  .product-btn:hover { background: var(--accent-dark); }
  .share-btn { background: none; border: 1px solid var(--border); color: var(--muted); font-size: 0.72rem; padding: 0.2rem 0.5rem; border-radius: 4px; cursor: pointer; }
  .share-btn:hover { border-color: var(--accent); color: var(--accent); }
  .product-img { width: 100%; height: 100px; background: var(--bg); border-radius: 6px 6px 0 0; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--muted); overflow: hidden; margin: -0.8rem -0.8rem 0.8rem -0.8rem; position: relative; }
  .product-img img { width: 100%; height: 100%; object-fit: cover; }
  .product-img .img-upload-hint { position: absolute; bottom: 4px; right: 4px; background: rgba(0,0,0,0.5); color: #fff; font-size: 0.65rem; padding: 2px 6px; border-radius: 3px; cursor: pointer; }
  .product-img:hover .img-upload-hint { background: var(--accent); }


  /* ===== Route Card ===== */
  .route-card { background: var(--card-bg); border-radius: 10px; border: 1px solid var(--border); padding: 0.9rem 1.2rem; margin-bottom: 0.7rem; }
  .route-header { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; }
  .route-icon { width: 34px; height: 34px; border-radius: 8px; background: var(--accent-light); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 0.95rem; }
  .route-title { font-weight: 700; font-size: 0.9rem; }
  .route-driver { font-size: 0.75rem; color: var(--muted); }
  .route-stops { display: flex; flex-direction: column; gap: 0.35rem; padding-left: 2.6rem; }
  .route-stop { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; padding: 0.25rem 0; border-left: 2px solid var(--border); padding-left: 0.7rem; }
  .stop-time { font-weight: 600; color: var(--muted); min-width: 2.8rem; font-size: 0.78rem; }

  /* ===== Stats ===== */
  .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0.9rem; }

  /* ===== Match Cards ===== */
  .match-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0.9rem; }
  .match-card { background: var(--card-bg); border-radius: 10px; border: 1px solid var(--border); padding: 1rem; }
  .match-card h4 { font-size: 0.9rem; font-weight: 700; margin-bottom: 0.6rem; display: flex; align-items: center; gap: 0.4rem; }
  .match-item { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid var(--border); font-size: 0.82rem; }
  .match-item:last-child { border-bottom: none; }
  .match-supplier { font-weight: 600; }
  .match-info { color: var(--muted); font-size: 0.75rem; }
  .match-score { background: var(--accent); color: #fff; font-size: 0.7rem; padding: 0.1rem 0.4rem; border-radius: 4px; font-weight: 600; }
  .match-btn { background: var(--accent); color: #fff; border: none; border-radius: 4px; padding: 0.3rem 0.6rem; font-size: 0.75rem; cursor: pointer; transition: background 0.2s; }
  .match-btn:hover { background: var(--accent-dark); }

  /* ===== Presale ===== */
  .presale-card { background: var(--card-bg); border-radius: 10px; border: 1px solid var(--border); padding: 1rem; margin-bottom: 0.8rem; }
  .presale-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.5rem; }
  .presale-title { font-weight: 700; font-size: 0.95rem; }
  .presale-supplier { font-size: 0.75rem; color: var(--muted); }
  .presale-progress { margin-top: 0.6rem; }
  .progress-bar-bg { height: 8px; background: #e2e8f0; border-radius: 4px; overflow: hidden; }
  .progress-bar-fill { height: 100%; background: var(--accent); border-radius: 4px; transition: width 0.3s; }
  .presale-meta { display: flex; justify-content: space-between; margin-top: 0.3rem; font-size: 0.75rem; color: var(--muted); }
  .presale-price { font-size: 1.1rem; font-weight: 700; color: var(--accent); margin-top: 0.3rem; }

  /* ===== Trace ===== */
  .trace-form { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
  .trace-form input { flex: 1; padding: 0.5rem 0.8rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.85rem; outline: none; transition: border-color 0.2s; }
  .trace-form input:focus { border-color: var(--accent); }
  .trace-form button { padding: 0.5rem 1rem; background: var(--accent); color: #fff; border: none; border-radius: 6px; font-size: 0.85rem; cursor: pointer; transition: background 0.2s; }
  .trace-form button:hover { background: var(--accent-dark); }
  .trace-timeline { position: relative; padding-left: 1.5rem; }
  .trace-timeline::before { content: ''; position: absolute; left: 5px; top: 0.5rem; bottom: 0.5rem; width: 2px; background: var(--border); }
  .trace-step { position: relative; margin-bottom: 1rem; }
  .trace-step::before { content: ''; position: absolute; left: -1.2rem; top: 0.3rem; width: 10px; height: 10px; background: var(--accent); border-radius: 50%; border: 2px solid #fff; }
  .trace-step-title { font-weight: 600; font-size: 0.85rem; }
  .trace-step-time { font-size: 0.75rem; color: var(--muted); }
  .trace-step-desc { font-size: 0.8rem; color: var(--muted); margin-top: 0.15rem; }

  /* ===== Voice ===== */
  .voice-btn {
    width: 80px; height: 80px; border-radius: 50%;
    background: var(--accent); color: #fff; border: none;
    font-size: 2rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
    margin: 1rem auto; box-shadow: 0 4px 16px rgba(74,140,92,0.3);
    transition: transform 0.2s;
  }
  .voice-btn:hover { transform: scale(1.05); }
  .voice-btn.recording { background: var(--danger); animation: pulse 1s infinite; }
  @keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }
  .voice-hint { text-align: center; font-size: 0.85rem; color: var(--muted); }

  /* ===== Modal ===== */
  .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); z-index: 200; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; }
  .modal-overlay.active { opacity: 1; visibility: visible; }
  .modal { background: #fff; border-radius: 12px; padding: 1.5rem; width: 90%; max-width: 420px; max-height: 80vh; overflow-y: auto; transform: scale(0.95); transition: transform 0.2s; flex-shrink: 0; }
  .modal-overlay.active .modal { transform: scale(1); }
  .modal h3 { margin-bottom: 1rem; font-size: 1.1rem; }
  .modal-row { margin-bottom: 0.8rem; }
  .modal-row label { display: block; font-size: 0.8rem; color: var(--muted); margin-bottom: 0.2rem; }
  .modal-row input, .modal-row select { width: 100%; padding: 0.4rem 0.6rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.85rem; outline: none; transition: border-color 0.2s; }
  .modal-row input:focus, .modal-row select:focus { border-color: var(--accent); }
  .modal-actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1rem; }
  .modal-btn { padding: 0.4rem 1rem; border: 1px solid var(--border); border-radius: 6px; background: #fff; cursor: pointer; font-size: 0.85rem; transition: all 0.2s; }
  .modal-btn:hover { background: #f8fafc; }
  .modal-btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
  .modal-btn.primary:hover { background: var(--accent-dark); }

  /* ===== Notification Panel ===== */
  .notif-panel {
    display: none; position: absolute; top: 48px; right: 10px;
    background: #fff; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    width: 320px; max-height: 400px; overflow-y: auto; z-index: 60;
    border: 1px solid var(--border);
  }
  .notif-panel.active { display: block; animation: slideDown 0.2s ease; }
  @keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
  .notif-header { padding: 0.8rem 1rem; border-bottom: 1px solid var(--border); font-weight: 700; font-size: 0.9rem; display: flex; align-items: center; justify-content: space-between; }
  .notif-clear-btn { font-size: 0.75rem; color: var(--accent); cursor: pointer; font-weight: 400; background: none; border: none; }
  .notif-clear-btn:hover { text-decoration: underline; }
  .notif-item { padding: 0.7rem 1rem; border-bottom: 1px solid var(--border); font-size: 0.82rem; cursor: pointer; transition: background 0.15s; }
  .notif-item:hover { background: #f8fafc; }
  .notif-item.unread { border-left: 3px solid var(--accent); }
  .notif-item-title { font-weight: 600; }
  .notif-item-time { font-size: 0.72rem; color: var(--muted); margin-top: 0.15rem; }
  .notif-empty { padding: 2rem; text-align: center; color: var(--muted); font-size: 0.85rem; }

  /* ===== Toast ===== */
  .toast-container { position: fixed; top: 1rem; right: 1rem; z-index: 999; display: flex; flex-direction: column; gap: 0.5rem; }
  .toast {
    padding: 0.7rem 1.2rem; border-radius: 8px; font-size: 0.85rem;
    color: #fff; min-width: 220px; box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    animation: toastIn 0.3s ease forwards;
    display: flex; align-items: center; gap: 0.5rem;
  }
  .toast.success { background: var(--accent); }
  .toast.error { background: var(--danger); }
  .toast.warning { background: var(--warn); }
  .toast.info { background: var(--info); }
  .toast.removing { animation: toastOut 0.3s ease forwards; }
  @keyframes toastIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
  @keyframes toastOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(40px); } }

  /* ===== Confirm Dialog ===== */
  .confirm-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); z-index: 300; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.15s, visibility 0.15s; }
  .confirm-overlay.active { opacity: 1; visibility: visible; }
  .confirm-box { background: #fff; border-radius: 12px; padding: 1.5rem; width: 90%; max-width: 360px; text-align: center; flex-shrink: 0; }
  .confirm-icon { font-size: 2.5rem; margin-bottom: 0.5rem; }
  .confirm-msg { font-size: 0.95rem; font-weight: 600; margin-bottom: 0.5rem; }
  .confirm-sub { font-size: 0.82rem; color: var(--muted); margin-bottom: 1rem; }
  .confirm-actions { display: flex; gap: 0.5rem; justify-content: center; }

  /* ===== Dashboard Enhancements ===== */
  .dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
  .alert-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border); font-size: 0.82rem; }
  .alert-item:last-child { border-bottom: none; }
  .alert-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
  .alert-dot.red { background: var(--danger); }
  .alert-dot.orange { background: var(--warn); }
  .alert-dot.green { background: var(--accent); }
  .alert-text { flex: 1; }
  .alert-time { font-size: 0.72rem; color: var(--muted); }
  .todo-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border); font-size: 0.82rem; cursor: pointer; }
  .todo-item:last-child { border-bottom: none; }
  .todo-check { width: 18px; height: 18px; border-radius: 4px; border: 2px solid var(--border); flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
  .todo-check.checked { background: var(--accent); border-color: var(--accent); color: #fff; font-size: 0.7rem; }
  .todo-item.done .todo-text { text-decoration: line-through; color: var(--muted); }
  .todo-text { flex: 1; }
  .todo-priority { font-size: 0.7rem; padding: 0.1rem 0.3rem; border-radius: 3px; }
  .todo-priority.high { background: #fee2e2; color: #991b1b; }
  .todo-priority.mid { background: #fef3c7; color: #92400e; }
  .todo-priority.low { background: #dbeafe; color: #1e40af; }

  /* Calendar */
  .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
  .calendar-header { text-align: center; font-size: 0.72rem; color: var(--muted); font-weight: 600; padding: 0.3rem 0; }
  .calendar-day { text-align: center; padding: 0.4rem 0; font-size: 0.78rem; border-radius: 4px; position: relative; }
  .calendar-day.today { background: var(--accent); color: #fff; font-weight: 700; }
  .calendar-day.has-demand::after { content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--danger); }
  .calendar-day.has-event::after { content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--info); }
  .calendar-day.today::after { background: #fff; }

  /* ===== Settlement Page ===== */
  .settle-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.9rem; margin-bottom: 1.2rem; }
  .settle-card { background: var(--card-bg); border-radius: 10px; padding: 1rem; border: 1px solid var(--border); }
  .settle-card .settle-label { font-size: 0.75rem; color: var(--muted); }
  .settle-card .settle-value { font-size: 1.5rem; font-weight: 700; color: var(--ink); margin-top: 0.2rem; }
  .settle-card .settle-sub { font-size: 0.75rem; color: var(--muted); margin-top: 0.2rem; }
  .settle-badge { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.72rem; padding: 0.15rem 0.4rem; border-radius: 4px; font-weight: 600; }
  .settle-badge.pending { background: #fef3c7; color: #92400e; }
  .settle-badge.done { background: var(--accent-light); color: var(--accent-dark); }
  .settle-badge.overdue { background: #fee2e2; color: #991b1b; }

  /* ===== Live Stream Page ===== */
  .live-card { background: var(--card-bg); border-radius: 10px; border: 1px solid var(--border); overflow: hidden; margin-bottom: 0.9rem; }
  .live-preview { height: 160px; background: linear-gradient(135deg, #1a1a2e, #16213e); display: flex; align-items: center; justify-content: center; position: relative; }
  .live-preview-text { color: #fff; font-size: 1.1rem; font-weight: 700; text-shadow: 0 2px 8px rgba(0,0,0,0.3); }
  .live-badge { position: absolute; top: 0.8rem; left: 0.8rem; background: var(--danger); color: #fff; font-size: 0.72rem; padding: 0.2rem 0.5rem; border-radius: 4px; font-weight: 600; animation: pulse 1.5s infinite; }
  .live-scheduled-badge { position: absolute; top: 0.8rem; left: 0.8rem; background: var(--info); color: #fff; font-size: 0.72rem; padding: 0.2rem 0.5rem; border-radius: 4px; font-weight: 600; }
  .live-info { padding: 0.9rem 1.2rem; }
  .live-title { font-weight: 700; font-size: 0.95rem; }
  .live-meta { font-size: 0.78rem; color: var(--muted); margin-top: 0.2rem; }
  .live-stats { display: flex; gap: 1.2rem; margin-top: 0.5rem; }
  .live-stat { font-size: 0.82rem; }
  .live-stat strong { color: var(--accent); }

  /* ===== Settings Page ===== */
  .settings-section { margin-bottom: 1.5rem; }
  .settings-section h3 { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.8rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); }
  .settings-row { display: flex; align-items: center; justify-content: space-between; padding: 0.7rem 0; border-bottom: 1px solid var(--border); font-size: 0.85rem; }
  .settings-row:last-child { border-bottom: none; }
  .settings-label { color: var(--ink); }
  .settings-desc { font-size: 0.75rem; color: var(--muted); margin-top: 0.15rem; }
  .settings-input { padding: 0.35rem 0.6rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.85rem; width: 200px; outline: none; }
  .settings-input:focus { border-color: var(--accent); }
  .toggle-switch { position: relative; width: 42px; height: 22px; cursor: pointer; }
  .toggle-switch input { display: none; }
  .toggle-slider { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #cbd5e1; border-radius: 11px; transition: 0.3s; }
  .toggle-slider::before { content: ''; position: absolute; width: 16px; height: 16px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: 0.3s; }
  .toggle-switch input:checked + .toggle-slider { background: var(--accent); }
  .toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }
  .settings-btn { padding: 0.4rem 1rem; border: 1px solid var(--accent); border-radius: 6px; background: none; color: var(--accent); font-size: 0.82rem; cursor: pointer; transition: all 0.2s; }
  .settings-btn:hover { background: var(--accent); color: #fff; }
  .settings-btn.danger { border-color: var(--danger); color: var(--danger); }
  .settings-btn.danger:hover { background: var(--danger); color: #fff; }

  /* ===== Keyboard Shortcut Hint ===== */
  .shortcut-hint { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 0.5rem 1rem; border-radius: 8px; font-size: 0.78rem; z-index: 500; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
  .shortcut-hint.show { opacity: 1; }
  kbd { display: inline-block; padding: 0.1rem 0.4rem; border-radius: 3px; background: rgba(255,255,255,0.15); font-family: monospace; font-size: 0.75rem; margin: 0 0.15rem; }

  /* ===== Mobile Bottom Nav ===== */
  .bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--card-bg); border-top: 1px solid var(--border); z-index: 90; padding: 0.3rem 0 env(safe-area-inset-bottom, 0.3rem); }
  .bottom-nav-grid { display: flex; justify-content: space-around; align-items: center; }
  .bottom-nav-item { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; padding: 0.3rem 0.5rem; cursor: pointer; color: var(--muted); font-size: 0.65rem; transition: color 0.2s; background: none; border: none; -webkit-tap-highlight-color: transparent; }
  .bottom-nav-item.active { color: var(--accent); }
  .bottom-nav-item .bnav-icon { font-size: 1.2rem; line-height: 1; }
  .bottom-nav-item .bnav-label { font-weight: 600; }
  .bottom-nav-more { position: relative; }

  /* ===== Donut Chart ===== */
  .donut-wrap { display: inline-flex; flex-direction: column; align-items: center; gap: 0.3rem; }
  .donut-svg { width: 100px; height: 100px; }
  .donut-bg { fill: none; stroke: #e2e8f0; stroke-width: 8; }
  .donut-fill { fill: none; stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 1s ease; }
  .donut-center { font-size: 0.85rem; font-weight: 700; fill: var(--ink); }
  .donut-label { font-size: 0.72rem; color: var(--muted); }

  /* ===== Sparkline ===== */
  .sparkline-wrap { display: flex; align-items: flex-end; gap: 2px; height: 32px; }
  .spark-bar { width: 4px; border-radius: 2px; background: var(--accent); opacity: 0.6; transition: height 0.5s ease; }
  .spark-bar:last-child { opacity: 1; }

  /* ===== KPI Counter Animation ===== */
  .kpi-value { font-variant-numeric: tabular-nums; }

  /* ===== Weather Widget ===== */
  .weather-widget { background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%); color: #fff; border-radius: 10px; padding: 1rem 1.2rem; display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
  .weather-temp { font-size: 2rem; font-weight: 700; }
  .weather-info { flex: 1; }
  .weather-desc { font-size: 0.9rem; font-weight: 600; }
  .weather-detail { font-size: 0.75rem; opacity: 0.85; margin-top: 0.2rem; }
  .weather-icon { font-size: 2.5rem; }
  .weather-tip { font-size: 0.75rem; background: rgba(255,255,255,0.2); padding: 0.3rem 0.6rem; border-radius: 4px; margin-top: 0.4rem; display: inline-block; }
  .weather-widget.collapsed .weather-detail, .weather-widget.collapsed .weather-tip { display: none; }
  .weather-widget.collapsed { padding: 0.6rem 1rem; }
  .weather-toggle { position: absolute; top: 0.4rem; right: 0.6rem; font-size: 0.7rem; opacity: 0.7; }
  .weather-widget { position: relative; }

  /* ===== Activity Timeline ===== */
  .activity-timeline { position: relative; padding-left: 1.5rem; }
  .activity-timeline::before { content: ''; position: absolute; left: 5px; top: 0.5rem; bottom: 0.5rem; width: 2px; background: var(--border); }
  .activity-item { position: relative; margin-bottom: 1rem; }
  .activity-item::before { content: ''; position: absolute; left: -1.2rem; top: 0.35rem; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); border: 2px solid var(--card-bg); }
  .activity-item.blue::before { background: var(--info); }
  .activity-item.orange::before { background: var(--warn); }
  .activity-item.purple::before { background: var(--purple); }
  .activity-title { font-size: 0.85rem; font-weight: 600; }
  .activity-desc { font-size: 0.78rem; color: var(--muted); margin-top: 0.15rem; }
  .activity-time { font-size: 0.72rem; color: var(--muted); margin-top: 0.1rem; }

  /* ===== Theme Toggle ===== */
  [data-theme="dark"] {
    --bg: #0f172a;
    --card-bg: #1e293b;
    --border: #334155;
    --ink: #e2e8f0;
    --muted: #94a3b8;
    --accent-light: #1a3a2a;
  }
  [data-theme="dark"] .data-table th { background: #1e293b; }
  [data-theme="dark"] .data-table tbody tr:hover { background: #334155; }
  [data-theme="dark"] .filter-btn { background: #1e293b; border-color: #334155; color: var(--ink); }
  [data-theme="dark"] .filter-btn:hover { border-color: var(--accent); color: var(--accent); }
  [data-theme="dark"] .search-box input { background: #1e293b; border-color: #334155; color: var(--ink); }
  [data-theme="dark"] .modal-row input, [data-theme="dark"] .modal-row select, [data-theme="dark"] .settings-input { background: #0f172a; border-color: #334155; color: var(--ink); }
  [data-theme="dark"] .bottom-nav { background: #1e293b; border-color: #334155; }
  [data-theme="dark"] .notif-panel { background: #1e293b; border-color: #334155; }
  [data-theme="dark"] .notif-item:hover { background: #334155; }
  [data-theme="dark"] .toast { box-shadow: 0 4px 16px rgba(0,0,0,0.4); }
  [data-theme="dark"] .live-preview { background: linear-gradient(135deg, #0f172a, #1e293b); }
  [data-theme="dark"] .weather-widget { background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%); }
  [data-theme="dark"] .confirm-box { background: #1e293b; color: var(--ink); }
  [data-theme="dark"] .confirm-actions button { background: #334155; color: var(--ink); border-color: #475569; }
  [data-theme="dark"] .confirm-actions button:hover { background: #475569; }
  [data-theme="dark"] .modal { background: #1e293b; }
  [data-theme="dark"] .modal h3 { color: var(--ink); }
  [data-theme="dark"] .modal-btn { background: #334155; color: var(--ink); border-color: #475569; }
  [data-theme="dark"] .modal-btn:hover { background: #475569; }
  [data-theme="dark"] .tour-tooltip { background: #1e293b; color: var(--ink); box-shadow: 0 8px 32px rgba(0,0,0,0.5); }
  [data-theme="dark"] .trace-form input { background: #0f172a; border-color: #334155; color: var(--ink); }
  [data-theme="dark"] #traceEmpty { color: var(--muted); }
  [data-theme="dark"] .progress-bar-bg { background: #334155; }
  [data-theme="dark"] .toggle-slider { background: #475569; }
  [data-theme="dark"] .notify-dot { border-color: #1e293b; }
  [data-theme="dark"] .tag-blue { background: #1e3a5f; color: #93c5fd; }
  [data-theme="dark"] .tag-orange { background: #78350f; color: #fcd34d; }
  [data-theme="dark"] .tag-red { background: #7f1d1d; color: #fca5a5; }
  [data-theme="dark"] .tag-gray { background: #334155; color: var(--muted); }
  [data-theme="dark"] .tag-purple { background: #4c1d95; color: #c4b5fd; }
  [data-theme="dark"] .todo-priority.high { background: #7f1d1d; color: #fca5a5; }
  [data-theme="dark"] .todo-priority.mid { background: #78350f; color: #fcd34d; }
  [data-theme="dark"] .todo-priority.low { background: #1e3a5f; color: #93c5fd; }
  [data-theme="dark"] .settle-badge.pending { background: #78350f; color: #fcd34d; }
  [data-theme="dark"] .settle-badge.overdue { background: #7f1d1d; color: #fca5a5; }
  [data-theme="dark"] .page-btn { background: #1e293b; border-color: #334155; color: var(--ink); }
  [data-theme="dark"] .page-btn:hover { border-color: var(--accent); color: var(--accent); }
  [data-theme="dark"] .export-btn { background: #1e293b; color: var(--ink); border-color: #334155; }
  [data-theme="dark"] .batch-bar { background: #1a3a2a; border-color: #334155; }
  [data-theme="dark"] .log-item { border-bottom-color: #334155; }
  [data-theme="dark"] .search-history { background: #1e293b; border-color: #334155; box-shadow: 0 4px 16px rgba(0,0,0,0.4); }
  [data-theme="dark"] .search-history-item:hover { background: #334155; }
  [data-theme="dark"] .kanban-card { border-color: #334155; }
  [data-theme="dark"] .kanban-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
  [data-theme="dark"] .workflow-step .step-dot { background: #334155; color: var(--ink); }
  [data-theme="dark"] .trace-step::before { border-color: #1e293b; }
  [data-theme="dark"] .activity-item::before { border-color: #1e293b; }
  [data-theme="dark"] .recent-visit-item:hover { background: rgba(255,255,255,0.05); }
  [data-theme="dark"] .loading-overlay { background: rgba(15,23,42,0.9); }
  [data-theme="dark"] .shortcut-hint { background: #1e293b; }
  [data-theme="dark"] .sk-line { background: #334155 !important; }
  [data-theme="dark"] .sk-card { background: #1e293b; border-color: #334155; }
  [data-theme="dark"] .watermark span { color: #334155; }
  [data-theme="dark"] .modal-btn:hover { background: #475569; }
  [data-theme="dark"] .confirm-actions button:last-child { background: var(--accent); color: #fff; border-color: var(--accent); }
  .theme-btn { background: none; border: 1px solid var(--border); border-radius: 6px; padding: 0.25rem 0.5rem; cursor: pointer; font-size: 0.85rem; color: var(--ink); transition: all 0.2s; }
  .theme-btn:hover { border-color: var(--accent); color: var(--accent); }

  /* ===== Kanban ===== */
  .view-toggle { display: flex; gap: 0; margin-left: auto; }
  .view-toggle-btn { padding: 0.35rem 0.7rem; border: 1px solid var(--border); background: var(--card-bg); font-size: 0.78rem; cursor: pointer; transition: all 0.2s; }
  .view-toggle-btn:first-child { border-radius: 6px 0 0 6px; border-right: none; }
  .view-toggle-btn:last-child { border-radius: 0 6px 6px 0; }
  .view-toggle-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
  .kanban-board { display: none; gap: 1rem; overflow-x: auto; padding-bottom: 0.5rem; }
  .kanban-board.active { display: flex; }
  .kanban-col { min-width: 280px; flex: 1; background: var(--bg); border-radius: 10px; padding: 0.8rem; max-height: 70vh; overflow-y: auto; }
  .kanban-col-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.7rem; font-size: 0.85rem; font-weight: 700; }
  .kanban-col-header .kanban-count { font-size: 0.75rem; background: var(--border); padding: 0.1rem 0.4rem; border-radius: 10px; color: var(--muted); }
  .kanban-card { background: var(--card-bg); border-radius: 8px; padding: 0.8rem; margin-bottom: 0.6rem; border: 1px solid var(--border); cursor: grab; transition: box-shadow 0.2s, transform 0.15s; }
  .kanban-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
  .kanban-card.dragging { opacity: 0.6; cursor: grabbing; transform: rotate(2deg); }
  .kanban-card-title { font-weight: 600; font-size: 0.85rem; margin-bottom: 0.3rem; }
  .kanban-card-meta { font-size: 0.75rem; color: var(--muted); line-height: 1.5; }
  .kanban-card-amount { font-size: 0.9rem; font-weight: 700; color: var(--warn); margin-top: 0.3rem; }
  .kanban-drop-zone { border: 2px dashed var(--border); border-radius: 8px; padding: 1rem; text-align: center; color: var(--muted); font-size: 0.8rem; margin-bottom: 0.6rem; display: none; }
  .kanban-drop-zone.active { display: block; background: var(--accent-light); border-color: var(--accent); }

  /* ===== Table Sort & Pagination ===== */
  .data-table th.sortable { cursor: pointer; user-select: none; transition: color 0.15s; }
  .data-table th.sortable:hover { color: var(--accent); }
  .data-table th.sortable::after { content: ' \2195'; font-size: 0.65rem; opacity: 0.4; }
  .data-table th.sort-asc::after { content: ' \2191'; opacity: 1; color: var(--accent); }
  .data-table th.sort-desc::after { content: ' \2193'; opacity: 1; color: var(--accent); }
  .pagination { display: flex; align-items: center; justify-content: center; gap: 0.3rem; padding: 0.7rem; border-top: 1px solid var(--border); }
  .page-btn { min-width: 28px; height: 28px; border: 1px solid var(--border); background: var(--card-bg); border-radius: 6px; font-size: 0.78rem; cursor: pointer; transition: all 0.15s; display: flex; align-items: center; justify-content: center; }
  .page-btn:hover { border-color: var(--accent); color: var(--accent); }
  .page-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
  .page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
  .batch-bar { display: none; align-items: center; gap: 0.6rem; padding: 0.6rem 1rem; background: var(--accent-light); border-bottom: 1px solid var(--border); font-size: 0.82rem; }
  .batch-bar.active { display: flex; }
  .batch-count { font-weight: 700; color: var(--accent-dark); }

  /* ===== Watermark ===== */
  .watermark { position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 9999; opacity: 0.04; display: flex; flex-wrap: wrap; align-content: space-around; justify-content: space-around; overflow: hidden; }
  .watermark span { font-size: 1.2rem; font-weight: 700; color: #000; transform: rotate(-30deg); white-space: nowrap; padding: 3rem 4rem; }

  /* ===== Tour / Onboarding ===== */
  .tour-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 900; pointer-events: none; }
  .tour-overlay.active { display: block; pointer-events: auto; }
  .tour-spotlight { position: absolute; border-radius: 8px; box-shadow: 0 0 0 9999px rgba(0,0,0,0.6); transition: all 0.4s ease; pointer-events: none; }
  .tour-tooltip { position: absolute; background: #fff; border-radius: 10px; padding: 1rem 1.2rem; box-shadow: 0 8px 32px rgba(0,0,0,0.2); max-width: 280px; z-index: 901; transition: all 0.4s ease; pointer-events: auto; }
  .tour-tooltip h4 { font-size: 0.95rem; margin-bottom: 0.4rem; }
  .tour-tooltip p { font-size: 0.82rem; color: var(--muted); margin-bottom: 0.8rem; }
  .tour-actions { display: flex; justify-content: space-between; align-items: center; }
  .tour-step-label { font-size: 0.72rem; color: var(--muted); }
  .tour-btn { padding: 0.35rem 0.8rem; border-radius: 6px; font-size: 0.82rem; cursor: pointer; border: none; }
  .tour-btn.next { background: var(--accent); color: #fff; }
  .tour-btn.skip { background: none; color: var(--muted); }
  .tour-start-btn { position: fixed; bottom: 5rem; right: 1.5rem; z-index: 80; width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: #fff; border: none; font-size: 1.2rem; cursor: pointer; box-shadow: 0 4px 12px rgba(74,140,92,0.3); transition: transform 0.2s; }
  .tour-start-btn:hover { transform: scale(1.08); }

  /* ===== Notif Enhanced ===== */
  .notif-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); }
  .notif-tab { flex: 1; text-align: center; padding: 0.5rem 0; font-size: 0.78rem; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.15s; color: var(--muted); background: none; border: none; border-bottom: 2px solid transparent; }
  .notif-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
  .notif-tab:hover { color: var(--accent); }
  .notif-tab .notif-tab-count { display: inline-block; background: var(--danger); color: #fff; font-size: 0.65rem; padding: 0.05rem 0.3rem; border-radius: 8px; margin-left: 0.2rem; font-weight: 700; }
  .notif-category { font-size: 0.68rem; padding: 0.08rem 0.3rem; border-radius: 3px; margin-left: 0.4rem; font-weight: 600; }
  .notif-category.order { background: var(--accent-light); color: var(--accent-dark); }
  .notif-category.warn { background: #fef3c7; color: #92400e; }
  .notif-category.sys { background: #dbeafe; color: #1e40af; }

  /* ===== FAB Menu ===== */
  .fab-container { position: fixed; bottom: 5rem; right: 1.5rem; z-index: 85; display: flex; flex-direction: column; align-items: flex-end; gap: 0.6rem; }
  .fab-main { width: 50px; height: 50px; border-radius: 50%; background: var(--accent); color: #fff; border: none; font-size: 1.4rem; cursor: pointer; box-shadow: 0 4px 14px rgba(74,140,92,0.35); transition: transform 0.3s, background 0.2s; display: flex; align-items: center; justify-content: center; }
  .fab-main:hover { transform: scale(1.08); background: var(--accent-dark); }
  .fab-main.open { transform: rotate(45deg); }
  .fab-items { display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; max-height: 0; overflow: hidden; transition: max-height 0.3s ease, opacity 0.3s ease; opacity: 0; }
  .fab-items.open { max-height: 300px; opacity: 1; }
  .fab-item { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
  .fab-item-label { font-size: 0.78rem; color: var(--ink); background: var(--card-bg); padding: 0.25rem 0.5rem; border-radius: 4px; box-shadow: 0 2px 6px rgba(0,0,0,0.08); white-space: nowrap; }
  .fab-item-btn { width: 38px; height: 38px; border-radius: 50%; border: none; color: #fff; font-size: 0.95rem; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.12); transition: transform 0.2s; }
  .fab-item-btn:hover { transform: scale(1.1); }

  /* ===== Scroll Progress & Back to Top ===== */
  .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; background: var(--accent); z-index: 9998; width: 0; transition: width 0.15s; will-change: width; }
  .back-to-top { position: fixed; bottom: 1.2rem; right: 1.5rem; width: 40px; height: 40px; border-radius: 50%; background: var(--card-bg); border: 1px solid var(--border); color: var(--muted); font-size: 1.1rem; cursor: pointer; display: none; align-items: center; justify-content: center; z-index: 80; box-shadow: 0 2px 8px rgba(0,0,0,0.08); transition: all 0.3s; }
  .back-to-top.show { display: flex; }
  .back-to-top:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

  /* ===== Search History ===== */
  .search-history { display: none; position: absolute; top: 36px; left: 0; right: 0; background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.1); z-index: 55; max-height: 220px; overflow-y: auto; }
  .search-history.active { display: block; }
  .search-history-header { padding: 0.5rem 0.7rem; font-size: 0.72rem; color: var(--muted); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
  .search-history-item { padding: 0.5rem 0.7rem; font-size: 0.82rem; cursor: pointer; display: flex; align-items: center; gap: 0.4rem; transition: background 0.15s; }
  .search-history-item:hover { background: var(--bg); }
  .search-history-empty { padding: 1rem; text-align: center; font-size: 0.82rem; color: var(--muted); }

  /* ===== Recent Visits ===== */
  .recent-visits { padding: 0.5rem 1.2rem; border-top: 1px solid rgba(255,255,255,0.08); }
  .recent-visits-label { font-size: 0.65rem; color: rgba(255,255,255,0.35); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.3rem; }
  .recent-visit-item { display: flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0; font-size: 0.75rem; color: rgba(255,255,255,0.5); cursor: pointer; transition: color 0.15s; }
  .recent-visit-item:hover { color: #fff; }
  .recent-visit-icon { font-size: 0.85rem; }

  /* ===== Shortcut Help Modal ===== */
  .shortcut-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .shortcut-item { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid var(--border); font-size: 0.85rem; }
  .shortcut-item:last-child { border-bottom: none; }
  .shortcut-key { font-family: monospace; background: var(--bg2); padding: 0.15rem 0.4rem; border-radius: 4px; font-size: 0.78rem; border: 1px solid var(--border); }

  /* ===== Favorite Star ===== */
  .fav-btn { background: none; border: none; font-size: 1.1rem; cursor: pointer; color: var(--border); transition: color 0.2s, transform 0.2s; padding: 0; line-height: 1; }
  .fav-btn:hover { transform: scale(1.15); }
  .fav-btn.active { color: #fbbf24; }
  .fav-btn.active:hover { color: #f59e0b; }

  /* ===== Operation Log ===== */
  .log-item { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border); font-size: 0.82rem; }
  .log-item:last-child { border-bottom: none; }
  .log-time { font-size: 0.72rem; color: var(--muted); white-space: nowrap; min-width: 3.5rem; }
  .log-text { flex: 1; }
  .log-tag { font-size: 0.68rem; padding: 0.08rem 0.3rem; border-radius: 3px; font-weight: 600; }
  .log-tag.create { background: var(--accent-light); color: var(--accent-dark); }
  .log-tag.update { background: #dbeafe; color: #1e40af; }
  .log-tag.delete { background: #fee2e2; color: #991b1b; }
  .log-tag.view { background: #f1f5f9; color: var(--muted); }

  /* ===== Skeleton ===== */
  .skeleton { background: linear-gradient(90deg, var(--border) 25%, #e8e8e8 50%, var(--border) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 4px; }
  @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
  .skeleton-text { height: 0.85rem; margin-bottom: 0.4rem; }
  .skeleton-title { height: 1.2rem; width: 60%; margin-bottom: 0.6rem; }
  .skeleton-circle { width: 40px; height: 40px; border-radius: 50%; }
  .skeleton-card { height: 80px; border-radius: 10px; }

  /* ===== Page Transition Skeleton ===== */
  .page-skeleton { display: none; padding: 1.2rem 1.5rem; }
  .page-skeleton.active { display: block; animation: fadeIn 0.2s ease; }
  .sk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.9rem; margin-bottom: 1.2rem; }
  .sk-card { background: var(--card-bg); border-radius: 10px; padding: 1rem; border: 1px solid var(--border); }
  .sk-line { height: 10px; background: var(--border); border-radius: 4px; margin-bottom: 0.5rem; }
  .sk-line.short { width: 40%; }
  .sk-line.medium { width: 60%; }

  /* ===== Form Validation ===== */
  .input-error { border-color: var(--danger) !important; box-shadow: 0 0 0 3px rgba(239,68,68,0.1) !important; }
  .input-error:focus { border-color: var(--danger) !important; }
  .error-msg { font-size: 0.75rem; color: var(--danger); margin-top: 0.2rem; display: none; }
  .error-msg.show { display: block; }

  /* ===== Export Button ===== */
  .export-btn { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.35rem 0.7rem; border: 1px solid var(--accent); border-radius: 6px; background: none; color: var(--accent); font-size: 0.78rem; cursor: pointer; transition: all 0.2s; }
  .export-btn:hover { background: var(--accent); color: #fff; }

  /* ===== Loading Overlay ===== */
  .loading-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.85); z-index: 500; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1rem; opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; }
  .loading-overlay.active { opacity: 1; visibility: visible; }
  .loading-spinner { width: 40px; height: 40px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .loading-text { font-size: 0.85rem; color: var(--muted); }

  /* ===== Role Switcher ===== */
  .role-switcher { position: relative; }
  .role-current { display: flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.6rem; border-radius: 6px; border: 1px solid var(--border); font-size: 0.78rem; cursor: pointer; background: var(--card-bg); color: var(--ink); transition: border-color 0.2s; }
  .role-current:hover { border-color: var(--accent); }
  .role-dropdown { display: none; position: absolute; top: 34px; right: 0; background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); min-width: 140px; z-index: 60; overflow: hidden; }
  .role-dropdown.active { display: block; animation: slideDown 0.2s ease; }
  .role-option { padding: 0.6rem 0.9rem; font-size: 0.82rem; cursor: pointer; transition: background 0.15s; color: var(--ink); border-bottom: 1px solid var(--border); }
  .role-option:last-child { border-bottom: none; }
  .role-option:hover { background: var(--accent-light); }
  .role-option.active { background: var(--accent); color: #fff; }
  .role-badge { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 0.3rem; }
  .role-badge.admin { background: var(--accent); }
  .role-badge.farmer { background: var(--warn); }
  .role-badge.customer { background: var(--info); }

  /* ===== Workflow Steps ===== */
  .workflow { display: flex; align-items: center; gap: 0; margin: 1rem 0; }
  .workflow-step { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; flex: 1; position: relative; }
  .workflow-step .step-dot { width: 28px; height: 28px; border-radius: 50%; background: var(--border); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; z-index: 2; }
  .workflow-step.done .step-dot { background: var(--accent); }
  .workflow-step.active .step-dot { background: var(--warn); animation: pulse 1.5s infinite; }
  .workflow-step .step-label { font-size: 0.72rem; color: var(--muted); text-align: center; white-space: nowrap; }
  .workflow-step.done .step-label { color: var(--accent); font-weight: 600; }
  .workflow-step.active .step-label { color: var(--warn); font-weight: 600; }
  .workflow-line { flex: 1; height: 2px; background: var(--border); margin: 0 0.3rem; margin-bottom: 1.2rem; }
  .workflow-line.done { background: var(--accent); }

  /* ===== Data Persist Badge ===== */
  .persist-badge { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; color: var(--accent); background: var(--accent-light); padding: 0.2rem 0.5rem; border-radius: 4px; }

  /* ===== Touch Optimizations ===== */
  button, .nav-link, .bottom-nav-item, .filter-btn, .page-btn, .match-btn, .fab-main, .fab-item-btn, .tour-btn, .view-toggle-btn { touch-action: manipulation; }
  input, select, textarea { font-size: 16px; }
  .is-touch .shortcut-hint { display: none !important; }
  .is-touch .tour-start-btn { display: none !important; }
  .sidebar, .bottom-nav, .nav-list, .kanban-col, .notif-panel, .modal, .notif-item { -webkit-overflow-scrolling: touch; }
  .is-touch .product-card:hover { transform: none; box-shadow: none; }
  .is-touch .kpi-card:hover { transform: none; box-shadow: none; }

  /* ===== Print ===== */
  /* ===== Login Page ===== */
  .login-page {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, #4a8c5c, #2d5a3a);
    z-index: 9999; display: flex; align-items: center; justify-content: center;
  }
  .login-card {
    background: #fff; border-radius: 12px; max-width: 400px; width: 90%; padding: 2rem;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  }
  .login-title { text-align: center; font-size: 1.3rem; font-weight: 700; color: var(--ink); margin-bottom: 0.3rem; }
  .login-subtitle { text-align: center; font-size: 0.85rem; color: var(--muted); margin-bottom: 1.5rem; }
  .login-form-group { margin-bottom: 1rem; }
  .login-form-group label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--ink); margin-bottom: 0.3rem; }
  .login-form-group input {
    width: 100%; padding: 0.55rem 0.8rem; border: 1px solid var(--border); border-radius: 8px;
    font-size: 0.9rem; outline: none; transition: border-color 0.2s, box-shadow 0.2s;
  }
  .login-form-group input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(74,140,92,0.15); }
  .login-remember { display: flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; color: var(--muted); margin-bottom: 1rem; }
  .login-remember input { cursor: pointer; }
  .login-role-select { display: flex; justify-content: center; gap: 1rem; margin-bottom: 1.5rem; }
  .login-role-btn {
    width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--border);
    background: #f8fafc; display: flex; flex-direction: column; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.2s; font-size: 0.7rem; color: var(--muted); gap: 2px;
  }
  .login-role-btn .role-icon { font-size: 1.3rem; font-weight: 700; }
  .login-role-btn:hover { border-color: var(--accent); }
  .login-role-btn.active { border-color: var(--accent); background: var(--accent-light); color: var(--accent-dark); }
  .login-btn {
    width: 100%; padding: 0.65rem; border: none; border-radius: 8px;
    background: var(--accent); color: #fff; font-size: 1rem; font-weight: 700;
    cursor: pointer; transition: background 0.2s;
  }
  .login-btn:hover { background: var(--accent-dark); }
  .login-switch { text-align: center; margin-top: 1rem; font-size: 0.82rem; color: var(--muted); }
  .login-switch a { color: var(--accent); cursor: pointer; text-decoration: none; font-weight: 600; }
  .login-switch a:hover { text-decoration: underline; }
  .login-demo-hint { text-align: center; margin-top: 1.2rem; font-size: 0.75rem; color: rgba(255,255,255,0.7); }
  .register-form { display: none; }
  .register-form.active { display: block; }
  .login-form.hidden { display: none; }
  .register-form .login-btn { background: var(--info); }
  .register-form .login-btn:hover { background: #2563eb; }
  .login-error { color: var(--danger); font-size: 0.78rem; margin-bottom: 0.5rem; display: none; text-align: center; }
  .login-error.show { display: block; }

  /* ===== Print ===== */
  @media print {
    .login-page, .bottom-nav, .topbar, .toast-container, .confirm-overlay, .shortcut-hint, .loading-overlay, .fab-container, .tour-overlay, .tour-start-btn, .scroll-progress, .back-to-top, .sidebar-overlay, .notif-panel, .modal-overlay, .search-history, .weather-widget, .pull-indicator { display: none !important; }
    .modal-overlay, .confirm-overlay { display: none !important; }
    .sidebar, .main { margin-left: 0 !important; }
    .page { display: block !important; opacity: 1 !important; transform: none !important; }
    .page:not(.active) { display: none !important; }
    body { background: #fff !important; }
    a { text-decoration: none; color: inherit; }
    .section-card { break-inside: avoid; box-shadow: none !important; border: 1px solid #ddd !important; }
    .print-only { display: block !important; }
    .no-print { display: none !important; }
  }

  /* ===== 4K+ Ultra Large Screens (>=2560px) ===== */
  @media (min-width: 2560px) {
    :root { --sidebar-w: 300px; }
    body { font-size: 18px; }
    .sidebar-header h1 { font-size: 1.4rem; }
    .nav-list a { padding: 0.9rem 1.5rem; font-size: 1rem; }
    .content { padding: 2.5rem; }
    .card-grid { grid-template-columns: repeat(6, 1fr); gap: 1.5rem; }
    .product-grid { grid-template-columns: repeat(5, 1fr); gap: 1.5rem; }
    .stats-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
    .match-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
    .dash-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
    .kpi-value { font-size: 2.2rem; }
    .kpi-label { font-size: 1rem; }
    .section-card { border-radius: 14px; }
    .section-header { padding: 1.2rem 1.5rem; font-size: 1.05rem; }
    .section-body { padding: 1.5rem; }
    .weather-temp { font-size: 3rem; }
    .weather-icon { font-size: 3.5rem; }
    .data-table th, .data-table td { padding: 0.9rem 1.2rem; font-size: 0.95rem; }
    .modal { max-width: 520px; padding: 2rem; }
    .donut-svg { width: 140px; height: 140px; }
    .page-title { font-size: 1.6rem; }
    .watermark span { font-size: 1.8rem; padding: 4rem 6rem; }
    .kanban-col { min-width: 380px; }
  }

  /* ===== Large Desktop (1440px - 2559px) ===== */
  @media (min-width: 1440px) and (max-width: 2559px) {
    :root { --sidebar-w: 250px; }
    .card-grid { grid-template-columns: repeat(5, 1fr); }
    .product-grid { grid-template-columns: repeat(4, 1fr); }
    .stats-grid { grid-template-columns: repeat(3, 1fr); }
    .match-grid { grid-template-columns: repeat(3, 1fr); }
    .content { padding: 2rem; }
    .kpi-value { font-size: 1.8rem; }
  }

  /* ===== Medium Desktop (1200px - 1439px) ===== */
  @media (min-width: 1200px) and (max-width: 1439px) {
    .card-grid { grid-template-columns: repeat(4, 1fr); }
    .product-grid { grid-template-columns: repeat(3, 1fr); }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
  }

  /* ===== Small Desktop / Tablet Landscape (992px - 1199px) ===== */
  @media (min-width: 992px) and (max-width: 1199px) {
    :root { --sidebar-w: 200px; }
    .card-grid { grid-template-columns: repeat(3, 1fr); }
    .product-grid { grid-template-columns: repeat(3, 1fr); }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .nav-list a { padding: 0.55rem 1rem; font-size: 0.8rem; }
    .sidebar-header h1 { font-size: 0.92rem; }
    .kpi-value { font-size: 1.4rem; }
    .weather-widget { flex-wrap: wrap; }
  }

  /* ===== Tablet Portrait (768px - 991px) ===== */
  @media (min-width: 768px) and (max-width: 991px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.open { transform: translateX(0); }
    .main { margin-left: 0; }
    .menu-btn { display: block; }
    .search-box input { width: 180px; }
    .card-grid { grid-template-columns: repeat(2, 1fr); }
    .product-grid { grid-template-columns: repeat(2, 1fr); }
    .match-grid { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: 1fr; }
    .dash-grid { grid-template-columns: 1fr 1fr; }
    .settle-summary { grid-template-columns: 1fr 1fr; }
    .topbar-clock { display: none; }
    .content { padding: 1.2rem; padding-bottom: 4.5rem; }
    .shortcut-hint { bottom: 5rem; }
    .live-card .live-stats { flex-wrap: wrap; }
    .weather-widget { flex-wrap: wrap; gap: 0.6rem; }
    .weather-temp { font-size: 1.6rem; }
    .modal { width: 92%; max-width: 480px; }
    .page-title { font-size: 1.15rem; }
    .data-table { font-size: 0.82rem; }
    .data-table th, .data-table td { padding: 0.55rem 0.7rem; }
    .kanban-col { min-width: 240px; }
    /* Hide FAB on tablet, use bottom nav instead */
    .fab-container { display: none; }
  }

  /* ===== Mobile Landscape (576px - 767px) ===== */
  @media (min-width: 576px) and (max-width: 767px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.open { transform: translateX(0); }
    .main { margin-left: 0; }
    .menu-btn { display: block; }
    .card-grid { grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
    .match-grid { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: 1fr; }
    .dash-grid { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
    .settle-summary { grid-template-columns: 1fr 1fr; }
    .topbar-clock { display: none; }
    .topbar-left .search-box { display: none; }
    .bottom-nav { display: block; }
    .content { padding: 1rem; padding-bottom: 4.5rem; }
    .shortcut-hint { bottom: 5rem; font-size: 0.7rem; }
    .live-card .live-stats { flex-wrap: wrap; }
    .weather-widget { flex-wrap: wrap; gap: 0.5rem; padding: 0.8rem 1rem; }
    .weather-temp { font-size: 1.4rem; }
    .weather-icon { font-size: 2rem; }
    .modal { width: 94%; max-width: 420px; padding: 1.2rem; }
    .page-title { font-size: 1.1rem; }
    .section-header { padding: 0.8rem 1rem; font-size: 0.88rem; }
    .section-body { padding: 1rem; }
    .data-table { font-size: 0.78rem; }
    .data-table th, .data-table td { padding: 0.45rem 0.55rem; }
    .kpi-value { font-size: 1.3rem; }
    .kpi-label { font-size: 0.75rem; }
    .kanban-board { gap: 0.6rem; }
    .kanban-col { min-width: 200px; padding: 0.6rem; }
    .fab-container { display: none; }
    .topbar-right .role-switcher { display: none; }
    .topbar-right .theme-btn { display: none; }
  }

  /* ===== Mobile Portrait (<576px) ===== */
  @media (max-width: 575px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.open { transform: translateX(0); }
    .main { margin-left: 0; }
    .menu-btn { display: block; font-size: 1.4rem; padding: 0.4rem; }
    .card-grid { grid-template-columns: 1fr; gap: 0.7rem; }
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
    .match-grid { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: 1fr; }
    .dash-grid { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
    .settle-summary { grid-template-columns: 1fr; }
    .topbar-clock { display: none; }
    .topbar-left .search-box { display: none; }
    .topbar-right .role-switcher { display: none; }
    .topbar-right .theme-btn { display: none; }
    .topbar-right .topbar-date { display: none; }
    .bottom-nav { display: block; }
    .bottom-nav-item { padding: 0.35rem 0.3rem; font-size: 0.6rem; }
    .bottom-nav-item .bnav-icon { font-size: 1.4rem; }
    .content { padding: 0.85rem; padding-bottom: 5rem; padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); }
    .shortcut-hint { bottom: 5.5rem; font-size: 0.68rem; padding: 0.4rem 0.8rem; }
    .live-card .live-stats { flex-wrap: wrap; }
    .weather-widget { flex-wrap: wrap; gap: 0.4rem; padding: 0.7rem 0.9rem; }
    .weather-temp { font-size: 1.3rem; }
    .weather-icon { font-size: 1.8rem; }
    .modal { width: 95%; max-width: none; padding: 1rem; border-radius: 10px; max-height: 85vh; }
    .page-title { font-size: 1.05rem; margin-bottom: 0.8rem; }
    .section-header { padding: 0.7rem 0.9rem; font-size: 0.85rem; }
    .section-body { padding: 0.9rem; }
    .data-table { font-size: 0.75rem; display: block; overflow-x: auto; white-space: nowrap; }
    .data-table table { min-width: 600px; }
    .data-table th, .data-table td { padding: 0.4rem 0.5rem; }
    .kpi-value { font-size: 1.4rem; }
    .kpi-label { font-size: 0.78rem; }
    .kpi-card { padding: 0.9rem; }
    .filter-bar { gap: 0.4rem; }
    .filter-btn { padding: 0.3rem 0.6rem; font-size: 0.75rem; }
    .page-btn { min-width: 32px; height: 32px; font-size: 0.8rem; }
    .kanban-board { gap: 0.5rem; flex-direction: column; }
    .kanban-board.active { display: flex; }
    .kanban-col { min-width: auto; width: 100%; max-height: 50vh; padding: 0.6rem; }
    .fab-container { display: none; }
    .user-avatar { width: 30px; height: 30px; font-size: 0.75rem; }
    .notify-btn { font-size: 1.1rem; }
    .confirm-box { width: 92%; max-width: none; padding: 1.2rem; }
    .shortcut-grid { grid-template-columns: 1fr; }
    .form-row { flex-direction: column; gap: 0.4rem; }
    .trace-form { flex-direction: column; }
    .trace-form input { width: 100%; }
    .trace-form button { width: 100%; justify-content: center; }
    .notif-panel { width: 92vw; right: 4vw; max-height: 70vh; }
    .search-history { width: 90vw; left: 5vw; }
    .tour-tooltip { max-width: 240px; padding: 0.8rem 1rem; }
    .watermark span { font-size: 0.9rem; padding: 2rem 2.5rem; }
    .batch-bar { flex-wrap: wrap; gap: 0.4rem; }
    .view-toggle { margin-left: 0; margin-top: 0.5rem; }
    .section-header { flex-wrap: wrap; gap: 0.5rem; }
    .recent-visits { display: none; }
  }

  /* ===== Landscape Orientation on Mobile ===== */
  @media (max-height: 500px) and (orientation: landscape) {
    .bottom-nav { display: none; }
    .content { padding-bottom: 1rem; }
    .shortcut-hint { bottom: 1rem; }
    .sidebar { transform: translateX(-100%); }
    .main { margin-left: 0; }
    .menu-btn { display: block; }
    .card-grid { grid-template-columns: repeat(3, 1fr); }
    .kpi-value { font-size: 1.2rem; }
  }

  /* ===== High-DPI / Retina Fixes ===== */
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .sidebar-header h1, .page-title, .kpi-value, .section-header { -webkit-font-smoothing: antialiased; }
  }

  /* ===== SVG Chart Styles ===== */
  .chart-container { position: relative; width: 100%; }
  .chart-svg { width: 100%; height: auto; overflow: visible; }
  .chart-line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
  .chart-area { opacity: 0.15; }
  .chart-dot { stroke-width: 2; transition: r 0.2s; cursor: pointer; }
  .chart-dot:hover { r: 5; }
  .chart-tooltip { position: absolute; background: var(--card-bg); border: 1px solid var(--border); border-radius: 6px; padding: 0.4rem 0.6rem; font-size: 0.75rem; pointer-events: none; opacity: 0; transition: opacity 0.15s; white-space: nowrap; z-index: 10; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
  .chart-tooltip.visible { opacity: 1; }
  .chart-axis-label { font-size: 10px; fill: var(--muted); }
  .chart-grid-line { stroke: var(--border); stroke-width: 0.5; stroke-dasharray: 4 4; }
  .chart-legend { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 0.6rem; }
  .chart-legend-item { display: flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; color: var(--muted); cursor: pointer; }
  .chart-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
  /* Horizontal bar chart */
  .hbar-row { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; }
  .hbar-label { width: 60px; font-size: 0.78rem; color: var(--muted); flex-shrink: 0; text-align: right; }
  .hbar-track { flex: 1; height: 22px; background: var(--bg); border-radius: 4px; overflow: hidden; position: relative; }
  .hbar-fill { height: 100%; border-radius: 4px; transition: width 1s ease; display: flex; align-items: center; padding-left: 0.5rem; font-size: 0.7rem; color: #fff; font-weight: 600; }
  .hbar-value { width: 80px; font-size: 0.78rem; font-weight: 600; text-align: right; flex-shrink: 0; }

  /* ===== Empty State ===== */
  .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 1rem; color: var(--muted); text-align: center; }
  .empty-icon { font-size: 3rem; margin-bottom: 1rem; opacity: 0.6; }
  .empty-title { font-size: 1rem; font-weight: 600; margin-bottom: 0.4rem; color: var(--ink); }
  .empty-desc { font-size: 0.82rem; max-width: 260px; line-height: 1.5; }
  .empty-action { margin-top: 1rem; padding: 0.5rem 1.2rem; background: var(--accent); color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 0.85rem; transition: background 0.2s; }
  .empty-action:hover { background: var(--accent-dark); }

  /* ===== Micro-interactions ===== */
  /* Card entrance animation */
  .card-enter { opacity: 0; transform: translateY(16px); }
  .card-enter.visible { opacity: 1; transform: translateY(0); transition: opacity 0.4s ease, transform 0.4s ease; }
  /* Stagger children */
  .stagger-children > *:nth-child(1) { transition-delay: 0s; }
  .stagger-children > *:nth-child(2) { transition-delay: 0.06s; }
  .stagger-children > *:nth-child(3) { transition-delay: 0.12s; }
  .stagger-children > *:nth-child(4) { transition-delay: 0.18s; }
  .stagger-children > *:nth-child(5) { transition-delay: 0.24s; }
  .stagger-children > *:nth-child(6) { transition-delay: 0.3s; }
  .stagger-children > *:nth-child(7) { transition-delay: 0.36s; }
  .stagger-children > *:nth-child(8) { transition-delay: 0.42s; }
  /* Button ripple */
  .ripple-btn { position: relative; overflow: hidden; }
  .ripple-btn .ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,0.35); transform: scale(0); animation: ripple-anim 0.5s ease-out; pointer-events: none; }
  @keyframes ripple-anim { to { transform: scale(4); opacity: 0; } }
  /* Count-up animation */
  .count-up { display: inline-block; }

  /* ===== Swipe-to-delete ===== */
  .swipe-item { position: relative; overflow: hidden; }
  .swipe-content { position: relative; z-index: 1; background: var(--card-bg); transition: transform 0.25s ease; }
  .swipe-actions { position: absolute; top: 0; right: 0; bottom: 0; display: flex; z-index: 0; }
  .swipe-action-btn { padding: 0 1rem; border: none; color: #fff; font-size: 0.82rem; cursor: pointer; display: flex; align-items: center; gap: 0.3rem; }
  .swipe-action-btn.danger { background: var(--danger); }
  .swipe-action-btn.warn { background: var(--warn); }

  /* ===== Pull-to-refresh indicator ===== */
  .pull-indicator { display: none; text-align: center; padding: 0.6rem; font-size: 0.78rem; color: var(--muted); }
  .pull-indicator.active { display: block; }
  .pull-spinner { display: inline-block; width: 20px; height: 20px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.6s linear infinite; margin-right: 0.4rem; vertical-align: middle; }

  /* ===== Message/Chat Style ===== */
  .msg-list { display: flex; flex-direction: column; gap: 0; }
  .msg-item { display: flex; gap: 0.7rem; padding: 0.8rem 0; border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.15s; }
  .msg-item:hover { background: rgba(0,0,0,0.02); }
  [data-theme="dark"] .msg-item:hover { background: rgba(255,255,255,0.03); }
  .msg-item.unread { background: rgba(74,140,92,0.04); }
  .msg-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 700; color: #fff; }
  .msg-body { flex: 1; min-width: 0; }
  .msg-header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
  .msg-name { font-size: 0.88rem; font-weight: 600; color: var(--ink); }
  .msg-time { font-size: 0.7rem; color: var(--muted); flex-shrink: 0; }
  .msg-preview { font-size: 0.78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 0.15rem; }
  .msg-badge { background: var(--danger); color: #fff; font-size: 0.65rem; min-width: 18px; height: 18px; border-radius: 9px; display: flex; align-items: center; justify-content: center; padding: 0 5px; font-weight: 700; }

  /* ===== Delivery Map Placeholder ===== */
  .map-container { position: relative; width: 100%; height: 280px; background: var(--bg); border-radius: 8px; overflow: hidden; }
  .map-svg { width: 100%; height: 100%; }
  .map-route { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 6 4; stroke-linecap: round; animation: dash-flow 1.5s linear infinite; }
  @keyframes dash-flow { to { stroke-dashoffset: -20; } }
  .map-node { cursor: pointer; transition: r 0.2s; }
  .map-node:hover { r: 8; }
  .map-label { font-size: 10px; fill: var(--ink); font-weight: 600; }
  .map-vehicle { animation: vehicle-move 6s ease-in-out infinite alternate; }
  @keyframes vehicle-move { 0% { transform: translate(0,0); } 100% { transform: translate(180px,-30px); } }

  .bigscreen-mode { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #0a1628; color: #e2e8f0; z-index: 9990; overflow-y: auto; padding: 1.5rem; display: none; }
  .bigscreen-mode.active { display: block; }
  .bigscreen-header { text-align: center; padding: 1rem 0 2rem; }
  .bigscreen-title { font-size: 2.2rem; font-weight: 700; background: linear-gradient(90deg, #4a8c5c, #60a5fa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: 4px; }
  .bigscreen-time { font-size: 1.2rem; color: #94a3b8; margin-top: 0.5rem; }
  .bigscreen-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-top: 1rem; }
  .bigscreen-card { background: rgba(30,41,59,0.8); border: 1px solid #334155; border-radius: 10px; padding: 1.2rem; }
  .bigscreen-card-title { font-size: 0.85rem; color: #94a3b8; margin-bottom: 0.5rem; }
  .bigscreen-kpi { display: flex; flex-direction: column; align-items: center; }
  .bigscreen-kpi-value { font-size: 2.8rem; font-weight: 700; background: linear-gradient(180deg, #fff, #94a3b8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
  .bigscreen-kpi-label { font-size: 0.85rem; color: #64748b; margin-top: 0.3rem; }
  .bigscreen-exit { position: fixed; top: 1rem; right: 1.5rem; color: #94a3b8; font-size: 1.5rem; cursor: pointer; z-index: 9991; }
  .bigscreen-exit:hover { color: #fff; }
  @media (max-width: 1200px) { .bigscreen-grid { grid-template-columns: repeat(2, 1fr); } }

  .stock-status { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.72rem; font-weight: 600; }
  .stock-status.low { background: #fef2f2; color: #dc2626; }
  .stock-status.normal { background: #f0fdf4; color: #16a34a; }
  .stock-status.over { background: #fffbeb; color: #d97706; }
  [data-theme="dark"] .stock-status.low { background: #7f1d1d; color: #fca5a5; }
  [data-theme="dark"] .stock-status.normal { background: #14532d; color: #86efac; }
  [data-theme="dark"] .stock-status.over { background: #78350f; color: #fcd34d; }

  .faq-item { border-bottom: 1px solid var(--border); }
  .faq-item:last-child { border-bottom: none; }
  .faq-question { padding: 0.8rem 0; font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
  .faq-question::after { content: '\uff0b'; font-size: 1.2rem; color: var(--muted); transition: transform 0.2s; }
  .faq-item.open .faq-question::after { content: '\uff0d'; }
  .faq-answer { padding: 0 0 0.8rem 0; font-size: 0.85rem; color: var(--muted); line-height: 1.6; display: none; }
  .faq-item.open .faq-answer { display: block; }

  .customer-item { border-bottom: 1px solid var(--border); padding: 0.6rem 0; }
  .customer-item:last-child { border-bottom: none; }
  .customer-actions { display: flex; gap: 0.4rem; margin-top: 0.4rem; padding-left: 1rem; }
  .customer-item.hidden { display: none; }

  /* ===== Bigscreen Marquee Animation ===== */
  @keyframes marquee { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }

/* ========== AI 智能助手页面 ========== */
.ai-feature-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.25rem; margin:1.5rem 0; }
.ai-card { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:1.5rem; cursor:pointer; transition:all .3s ease; }
.ai-card:hover { transform:translateY(-4px); box-shadow:0 12px 40px rgba(0,0,0,.1); }
.ai-card-icon { width:56px; height:56px; border-radius:14px; display:flex; align-items:center; justify-content:center; margin-bottom:1rem; }
.ai-card-title { font-size:1.1rem; font-weight:600; margin-bottom:.5rem; color:var(--text); }
.ai-card-desc { font-size:.875rem; color:var(--text-secondary); line-height:1.6; }
.ai-panel { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:1.5rem; margin-top:1rem; }
.ai-panel-header { display:flex; align-items:center; gap:1rem; margin-bottom:1.25rem; }
.ai-panel-header h3 { font-size:1.15rem; margin:0; }
.ai-result-card { background:var(--bg); border-radius:12px; padding:1.25rem; margin-bottom:1rem; border:1px solid var(--border); }
.ai-result-card h4 { font-size:1rem; margin-bottom:.5rem; color:var(--primary); }
.ai-result-price { font-size:2rem; font-weight:700; color:var(--primary); }
.ai-result-price .unit { font-size:1rem; font-weight:400; color:var(--text-secondary); }
.ai-tag { display:inline-block; padding:.2rem .6rem; border-radius:6px; font-size:.75rem; font-weight:500; margin-right:.5rem; margin-bottom:.5rem; }
.ai-tag-up { background:#d1fae5; color:#065f46; }
.ai-tag-down { background:#fee2e2; color:#991b1b; }
.ai-tag-stable { background:#e0e7ff; color:#3730a3; }
.ai-chat-container { display:flex; flex-direction:column; height:500px; background:var(--surface); border:1px solid var(--border); border-radius:16px; margin-top:1rem; overflow:hidden; }
.ai-chat-header { display:flex; align-items:center; gap:1rem; padding:1rem 1.25rem; border-bottom:1px solid var(--border); background:var(--bg); }
.ai-chat-header h3 { font-size:1rem; margin:0; flex:1; }
.ai-status-dot { width:8px; height:8px; border-radius:50%; background:#22c55e; box-shadow:0 0 6px #22c55e; }
.ai-chat-messages { flex:1; overflow-y:auto; padding:1.25rem; display:flex; flex-direction:column; gap:1rem; }
.ai-msg { max-width:80%; padding:.75rem 1rem; border-radius:12px; font-size:.9rem; line-height:1.6; animation:msgIn .3s ease; }
@keyframes msgIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.ai-msg-bot { background:var(--bg); border:1px solid var(--border); align-self:flex-start; border-bottom-left-radius:4px; }
.ai-msg-user { background:var(--primary); color:#fff; align-self:flex-end; border-bottom-right-radius:4px; }
.ai-msg-thinking { align-self:flex-start; color:var(--text-secondary); font-style:italic; font-size:.85rem; }
.ai-chat-input-area { padding:1rem 1.25rem; border-top:1px solid var(--border); background:var(--bg); }
.ai-quick-questions { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:.75rem; }
.ai-quick-btn { padding:.35rem .75rem; border-radius:20px; border:1px solid var(--border); background:var(--surface); color:var(--text-secondary); font-size:.8rem; cursor:pointer; transition:all .2s; }
.ai-quick-btn:hover { border-color:var(--primary); color:var(--primary); background:rgba(45,106,79,.05); }
.ai-chat-input-row { display:flex; gap:.75rem; }
.ai-chat-input-row input { flex:1; padding:.6rem 1rem; border:1px solid var(--border); border-radius:10px; font-size:.9rem; background:var(--surface); }
.ai-chat-input-row input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(45,106,79,.1); }

/* AI 响应式 */
@media(max-width:640px) {
  .ai-feature-grid { grid-template-columns:1fr; }
  .ai-chat-container { height:400px; }
  .ai-quick-questions { gap:.4rem; }
  .ai-quick-btn { font-size:.75rem; padding:.3rem .6rem; }
}