:root {
      --primary: #3b82f6;
      --primary-dark: #2563eb;
      --primary-light: #60a5fa;
      --success: #10b981;
      --success-light: #34d399;
      --warning: #f59e0b;
      --warning-light: #fbbf24;
      --danger: #ef4444;
      --danger-light: #f87171;
      --info: #06b6d4;
      --bg: #f8fafc;
      --bg-dark: #e2e8f0;
      --bg-gradient: linear-gradient(135deg, #f0f4ff 0%, #e8f4f8 50%, #f0f9ff 100%);
      --card-bg: #ffffff;
      --text: #0f172a;
      --text-light: #64748b;
      --text-lighter: #94a3b8;
      --border: #e2e8f0;
      --shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
      --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
      --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
      --radius-sm: 8px;
      --radius-md: 12px;
      --radius-lg: 16px;
      --radius-xl: 24px;
    }
    * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
    body { 
      font-family: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; 
      background: var(--bg-gradient); 
      color: var(--text); 
      margin: 0; padding: 0; 
      min-height: 100vh;
      line-height: 1.6;
    }

    .app-header { 
      background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 50%, #0ea5e9 100%); 
      border-bottom: none; 
      padding: 0; 
      position: sticky; 
      top: 0; 
      z-index: 100;
      box-shadow: var(--shadow-lg);
    }
    .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 14px 24px;
    }
    .app-header h1 { 
      font-size: 1.35rem; 
      font-weight: 700; 
      margin: 0; 
      color: white; 
      display: flex; 
      align-items: center; 
      gap: 12px; 
      text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .app-header h1 i { font-size: 1.6rem; }
    
    .nav-tabs {
      display: flex;
      gap: 4px;
      padding: 0 24px;
      background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
      overflow-x: auto;
      border-bottom: 3px solid #cbd5e1;
    }
    .nav-tabs::-webkit-scrollbar { display: none; }
    .tab-btn { 
      padding: 14px 20px; 
      font-size: 0.9rem; 
      font-weight: 600; 
      color: #334155; 
      background: none; 
      border: none; 
      border-bottom: 3px solid transparent; 
      white-space: nowrap; 
      cursor: pointer; 
      transition: all 0.2s;
    }
    .tab-btn:hover { color: #0f172a; background: rgba(0,0,0,0.05); }
    .tab-btn.active { 
      color: #2563eb; 
      border-bottom-color: #2563eb;
      background: rgba(37,99,235,0.1);
    }

    .stats-bar { 
      display: flex; 
      gap: 16px;
      padding: 20px 24px; 
      overflow-x: auto;
      background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 50%, #0ea5e9 100%);
    }
    .stat-chip { 
      background: #ffffff;
      border-radius: var(--radius-lg); 
      padding: 18px 22px; 
      display: flex; 
      align-items: center; 
      gap: 14px; 
      box-shadow: 0 4px 15px rgba(0,0,0,0.15); 
      white-space: nowrap; 
      min-width: 140px;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      border: 1px solid #e2e8f0;
    }
    .stat-chip:hover { 
      transform: translateY(-3px); 
      box-shadow: var(--shadow-xl); 
    }
    .stat-chip .icon { 
      width: 48px; 
      height: 48px; 
      border-radius: var(--radius-md); 
      display: flex; 
      align-items: center; 
      justify-content: center; 
      font-size: 1.4rem;
    }
    .stat-chip .info { display: flex; flex-direction: column; }
    .stat-chip .num { font-size: 1.4rem; font-weight: 700; line-height: 1.2; color: #0f172a; }
    .stat-chip .label { font-size: 0.8rem; color: #64748b; }
    
    .main-content { padding: 0; max-width: 1600px; margin: 0 auto; }
    
    .section-title {
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .section-title i { color: var(--primary); }
    
    .card { 
      background: var(--card-bg); 
      border-radius: var(--radius-xl); 
      box-shadow: var(--shadow); 
      border: 1px solid var(--border); 
      margin-bottom: 20px; 
      overflow: hidden;
    }
    .card-header { 
      background: linear-gradient(90deg, rgba(59,130,246,0.03) 0%, rgba(6,182,212,0.03) 100%); 
      border-bottom: 1px solid var(--border); 
      padding: 18px 24px; 
      display: flex; 
      justify-content: space-between; 
      align-items: center; 
    }
    .card-header .title { 
      font-size: 1rem; 
      font-weight: 600; 
      display: flex; 
      align-items: center; 
      gap: 10px; 
      margin: 0; 
    }
    .card-body { padding: 24px; }
    
    .quick-actions { 
      display: grid; 
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); 
      gap: 12px; 
      margin-bottom: 24px;
    }
    .action-btn { 
      padding: 20px 16px; 
      border-radius: var(--radius-lg); 
      background: var(--card-bg); 
      border: 1px solid var(--border); 
      display: flex; 
      flex-direction: column; 
      align-items: center; 
      gap: 10px; 
      cursor: pointer; 
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .action-btn:hover { 
      background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); 
      color: white;
      transform: translateY(-4px);
      box-shadow: var(--shadow-lg);
      border-color: var(--primary);
    }
    .action-btn:hover .icon { background: rgba(255,255,255,0.2); color: white; }
    .action-btn .icon { 
      width: 52px; 
      height: 52px; 
      border-radius: var(--radius-md); 
      display: flex; 
      align-items: center; 
      justify-content: center; 
      font-size: 1.5rem; 
      transition: all 0.3s;
    }
    .action-btn .label { font-size: 0.85rem; font-weight: 600; }

    .field-hero {
      display: block;
      padding: 0;
      border-radius: 16px;
      background:
        radial-gradient(circle at 12% 18%, rgba(20,184,166,0.28), transparent 34%),
        linear-gradient(135deg, #0f172a 0%, #0f766e 58%, #14b8a6 100%);
      color: white;
      box-shadow: 0 18px 40px rgba(15, 118, 110, 0.24);
      margin-bottom: 12px;
      overflow: hidden;
      position: relative;
    }
    .field-hero::after {
      content: "";
      position: absolute;
      width: 260px;
      height: 260px;
      right: -80px;
      top: -100px;
      border-radius: 50%;
      border: 38px solid rgba(255,255,255,0.09);
      display: none;
    }
    .field-hero[open]::after { display: block; }
    .field-hero-summary {
      position: relative;
      z-index: 2;
      list-style: none;
      cursor: pointer;
      min-height: 44px;
      padding: 9px 13px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      user-select: none;
    }
    .field-hero-summary::-webkit-details-marker { display: none; }
    .field-hero-summary-main {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }
    .field-hero-summary-main > i {
      width: 30px;
      height: 30px;
      display: grid;
      place-items: center;
      border-radius: 10px;
      background: rgba(255,255,255,0.18);
      font-size: 1rem;
      flex-shrink: 0;
    }
    .field-hero-summary-main strong {
      display: block;
      font-size: 0.98rem;
      line-height: 1.05;
    }
    .field-hero-summary-main small {
      display: block;
      margin-top: 2px;
      color: rgba(255,255,255,0.76);
      font-size: 0.7rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .field-hero-summary-action {
      border: 1px solid rgba(255,255,255,0.24);
      background: rgba(255,255,255,0.14);
      color: rgba(255,255,255,0.92);
      border-radius: 999px;
      padding: 5px 10px;
      font-size: 0.72rem;
      font-weight: 900;
      flex-shrink: 0;
    }
    .field-hero[open] .field-hero-summary {
      border-bottom: 1px solid rgba(255,255,255,0.14);
    }
    .field-hero[open] .field-hero-summary-action {
      font-size: 0;
    }
    .field-hero[open] .field-hero-summary-action::after {
      content: "收合";
      font-size: 0.72rem;
    }
    .field-hero-expanded {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
      gap: 12px;
      padding: 12px 16px 14px;
    }
    .field-hero-main,
    .field-hero-side { position: relative; z-index: 1; }
    .field-hero-kicker {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 4px 9px;
      border-radius: 999px;
      background: rgba(255,255,255,0.14);
      font-size: 0.72rem;
      font-weight: 800;
      margin-bottom: 5px;
    }
    .field-hero h2 {
      margin: 0 0 4px;
      font-size: clamp(1.25rem, 2.4vw, 1.7rem);
      font-weight: 900;
      letter-spacing: 0.02em;
    }
    .field-hero p {
      margin: 0;
      max-width: 760px;
      color: rgba(255,255,255,0.86);
      line-height: 1.65;
      font-size: 0.82rem;
    }
    .field-step-details {
      margin-top: 8px;
      max-width: 780px;
    }
    .field-step-details summary {
      list-style: none;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border: 1px solid rgba(255,255,255,0.2);
      background: rgba(255,255,255,0.13);
      color: rgba(255,255,255,0.9);
      border-radius: 999px;
      padding: 5px 10px;
      font-size: 0.74rem;
      font-weight: 850;
      user-select: none;
    }
    .field-step-details summary::-webkit-details-marker { display: none; }
    .field-step-strip {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 9px;
      margin-top: 8px;
      max-width: 780px;
    }
    .field-step {
      display: grid;
      grid-template-columns: 34px 1fr;
      column-gap: 8px;
      row-gap: 1px;
      align-items: center;
      background: rgba(255,255,255,0.13);
      border: 1px solid rgba(255,255,255,0.18);
      border-radius: 16px;
      padding: 8px;
    }
    .field-step span {
      grid-row: span 2;
      width: 34px;
      height: 34px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      background: rgba(255,255,255,0.2);
      font-weight: 950;
    }
    .field-step.active span { background: #ffffff; color: #0f766e; }
    .field-step strong { font-size: 0.86rem; line-height: 1.1; }
    .field-step small { color: rgba(255,255,255,0.76); font-size: 0.72rem; }
    .field-hero-side {
      display: flex;
      flex-direction: column;
      gap: 7px;
      justify-content: center;
    }
    .field-device-card,
    .field-storage-status {
      background: rgba(255,255,255,0.14);
      border: 1px solid rgba(255,255,255,0.2);
      border-radius: 14px;
      padding: 9px;
      backdrop-filter: blur(12px);
    }
    .field-device-card {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .field-device-icon {
      width: 46px;
      height: 46px;
      border-radius: 13px;
      display: grid;
      place-items: center;
      background: rgba(255,255,255,0.18);
      font-size: 1.18rem;
    }
    .field-device-label { font-weight: 900; font-size: 0.86rem; }
    .field-device-sub { font-size: 0.7rem; color: rgba(255,255,255,0.76); margin-top: 1px; }
    .field-storage-status {
      display: flex;
      gap: 7px;
      flex-wrap: wrap;
      font-size: 0.76rem;
    }
    .field-chip {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      border-radius: 999px;
      padding: 5px 9px;
      font-weight: 850;
      background: rgba(255,255,255,0.16);
      color: white;
    }
    .field-chip.ok { background: #dcfce7; color: #166534; }
    .field-chip.warn { background: #fef3c7; color: #92400e; }
    .field-chip.danger { background: #fee2e2; color: #991b1b; }
    .field-actions {
      display: grid;
      grid-template-columns: 1.35fr 1fr 1fr 1fr;
      gap: 12px;
      margin-bottom: 14px;
    }
    .field-action {
      border: 1px solid var(--border);
      border-radius: 18px;
      min-height: 74px;
      background: white;
      color: #0f172a;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      font-weight: 900;
      line-height: 1.15;
      cursor: pointer;
      box-shadow: 0 10px 22px rgba(15,23,42,0.06);
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }
    .field-action i { font-size: 1.35rem; }
    .field-action small {
      display: block;
      font-size: 0.7rem;
      color: #64748b;
      font-weight: 750;
      margin-top: 3px;
    }
    .field-action.primary {
      background: linear-gradient(135deg, #ff6b35, #f72585);
      color: white;
      border: none;
    }
    .field-action.primary small { color: rgba(255,255,255,0.82); }
    .field-action:disabled {
      opacity: 0.55;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }
    .field-action:hover {
      transform: translateY(-2px);
      box-shadow: 0 16px 30px rgba(15,23,42,0.12);
      border-color: #99f6e4;
    }
    .field-action:disabled:hover {
      transform: none;
      box-shadow: none;
      border-color: var(--border);
    }
    .field-prep-panel,
    .field-filter-drawer {
      border: 1px solid #e2e8f0;
      background: #ffffff;
      border-radius: 16px;
      margin-bottom: 12px;
      overflow: hidden;
    }
    .field-prep-panel summary,
    .field-filter-drawer summary {
      list-style: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 11px 13px;
      color: #334155;
      font-weight: 900;
      user-select: none;
    }
    .field-prep-panel summary::-webkit-details-marker,
    .field-filter-drawer summary::-webkit-details-marker { display: none; }
    .field-prep-panel summary::after,
    .field-filter-drawer summary::after {
      content: "展開";
      margin-left: auto;
      color: #64748b;
      font-size: 0.72rem;
      font-weight: 800;
    }
    .field-prep-panel[open] summary::after,
    .field-filter-drawer[open] summary::after { content: "收合"; }
    .field-prep-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      padding: 0 13px 10px;
    }
    .field-prep-hint {
      padding: 0 13px 12px;
      color: #64748b;
      font-size: 0.78rem;
    }
    .field-toolbar { margin-bottom: 12px; }
    .field-filter-drawer {
      background: #f8fafc;
      margin: 10px 0 0;
      border-radius: 13px;
    }
    .field-filter-drawer summary { padding: 9px 11px; font-size: 0.82rem; }
    .field-filter-drawer .row { padding: 0 11px 11px; }
    .field-selection-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
      border: 1px solid #99f6e4;
      background: linear-gradient(135deg, #f0fdfa 0%, #ecfeff 100%);
      border-radius: 16px;
      padding: 9px 12px;
      margin-bottom: 12px;
    }
    .field-selection-count {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: #0f766e;
      font-weight: 900;
      font-size: 0.88rem;
    }
    .field-selection-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    .field-check-toggle {
      height: 100%;
      min-height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border: 2px solid var(--border);
      border-radius: var(--radius-md);
      background: white;
      font-weight: 850;
      color: #334155;
      cursor: pointer;
      margin: 0;
    }
    .field-check-toggle input { width: 18px; height: 18px; accent-color: #0f766e; }
    .field-stats {
      display: grid;
      grid-template-columns: repeat(4, minmax(110px, 1fr));
      gap: 10px;
      margin-bottom: 12px;
    }
    .field-stat-card {
      border: 1px solid var(--border);
      background: white;
      border-radius: 16px;
      padding: 12px 14px;
      box-shadow: 0 8px 18px rgba(15,23,42,0.05);
    }
    .field-stat-value { font-size: 1.45rem; font-weight: 950; color: #0f766e; line-height: 1; }
    .field-stat-label { margin-top: 4px; font-size: 0.76rem; color: #64748b; font-weight: 750; }
    .field-workorder-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
      gap: 12px;
    }
    .field-render-status {
      grid-column: 1 / -1;
      border: 1px dashed #cbd5e1;
      border-radius: 14px;
      padding: 12px;
      background: #f8fafc;
      color: #64748b;
      font-size: 0.82rem;
      text-align: center;
    }
    .field-render-status.done {
      background: #eff6ff;
      border-color: #bfdbfe;
      color: #1d4ed8;
    }
    .field-wo-card {
      border: 1px solid var(--border);
      background: white;
      border-radius: 18px;
      padding: 12px;
      box-shadow: 0 10px 24px rgba(15,23,42,0.055);
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .field-wo-card.selected {
      border-color: #14b8a6;
      box-shadow: 0 14px 30px rgba(20,184,166,0.18);
      background: linear-gradient(180deg, #ffffff 0%, #f0fdfa 100%);
    }
    .field-select-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border: 1px solid #ccfbf1;
      background: #f0fdfa;
      color: #0f766e;
      border-radius: 999px;
      padding: 5px 9px;
      font-size: 0.76rem;
      font-weight: 900;
      cursor: pointer;
      user-select: none;
    }
    .field-select-pill input {
      width: 17px;
      height: 17px;
      accent-color: #0f766e;
    }
    .field-select-pill-compact {
      align-self: center;
      padding: 6px 8px;
      font-size: 0.72rem;
      gap: 4px;
    }
    .field-select-pill-compact input {
      width: 16px;
      height: 16px;
    }
    .field-wo-head {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: flex-start;
    }
    .field-wo-head-simple {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 9px;
    }
    .field-wo-main { min-width: 0; }
    .field-wo-title {
      font-size: 0.98rem;
      font-weight: 950;
      color: #0f172a;
      margin: 0;
      line-height: 1.25;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .field-wo-subline,
    .field-wo-location,
    .field-progress-summary {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 5px 10px;
      color: #64748b;
      font-size: 0.76rem;
      font-weight: 780;
    }
    .field-wo-subline span,
    .field-wo-location span { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
    .field-wo-location {
      padding-left: 2px;
    }
    .field-property-chip {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 8px;
      border-radius: 999px;
      border: 1px solid #bfdbfe;
      background: #eff6ff;
      color: #1d4ed8;
      font-weight: 900;
      max-width: 100%;
    }
    .field-property-chip.missing {
      border-color: #fed7aa;
      background: #fff7ed;
      color: #c2410c;
    }
    .field-progress-summary {
      justify-content: space-between;
      color: #334155;
      font-size: 0.8rem;
      font-weight: 900;
    }
    .field-wo-state {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 5px;
      flex-shrink: 0;
    }
    .field-wo-state .status-badge {
      padding: 4px 8px;
      font-size: 0.66rem;
      white-space: nowrap;
    }
    .field-wo-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 6px 10px;
      color: #64748b;
      font-size: 0.78rem;
    }
    .field-wo-meta span { display: inline-flex; align-items: center; gap: 4px; }
    .field-progress-track {
      height: 8px;
      border-radius: 999px;
      overflow: hidden;
      background: #e2e8f0;
    }
    .field-progress-fill {
      height: 100%;
      border-radius: 999px;
      background: linear-gradient(90deg, #14b8a6, #22c55e);
      transition: width .25s ease;
    }
    .field-sign-row {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .field-sign-chip {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      border-radius: 999px;
      padding: 5px 9px;
      font-size: 0.73rem;
      font-weight: 900;
      background: #fff7ed;
      color: #9a3412;
    }
    .field-sign-chip.done { background: #dcfce7; color: #166534; }
    .field-wo-actions {
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: 8px;
    }
    .field-wo-actions-simple {
      grid-template-columns: minmax(0, 1fr) 96px;
      align-items: start;
      margin-top: 2px;
    }
    .field-wo-actions .btn {
      min-height: 42px;
      font-weight: 900;
      border-radius: 12px;
    }
    .field-wo-more {
      min-width: 0;
    }
    .field-wo-more[open] {
      grid-column: 1 / -1;
    }
    .field-wo-more summary {
      list-style: none;
      min-height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #cbd5e1;
      border-radius: 12px;
      background: #ffffff;
      color: #334155;
      cursor: pointer;
      font-size: 0.82rem;
      font-weight: 900;
      user-select: none;
    }
    .field-wo-more summary::-webkit-details-marker { display: none; }
    .field-wo-more-body {
      margin-top: 8px;
      border: 1px solid #e2e8f0;
      border-radius: 14px;
      background: #f8fafc;
      padding: 10px;
    }
    .field-wo-more-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-top: 9px;
      color: #64748b;
      font-size: 0.78rem;
      font-weight: 850;
    }
    .field-wo-mini-actions {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
    }
    .field-wo-mini-actions .btn {
      min-height: 38px;
      font-size: 0.78rem;
      font-weight: 850;
      border-radius: 11px;
    }
    .btn-field-property {
      min-height: 34px !important;
      padding: 7px 10px;
      border-color: #bfdbfe;
      color: #1d4ed8;
      background: #fff;
    }

    @media (max-width: 920px) {
      .field-hero { border-radius: 16px; }
      .field-hero-expanded { grid-template-columns: 1fr; padding: 12px; }
      .field-step-strip { grid-template-columns: 1fr; }
      .field-actions { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
      .field-stats { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 540px) {
      .app-update-header-btn span { display: none; }
      .field-actions { grid-template-columns: 1fr 1fr; gap: 8px; }
      .field-action { min-height: 64px; flex-direction: column; gap: 5px; font-size: 0.8rem; }
      .field-workorder-list { grid-template-columns: 1fr; }
      .field-wo-actions { grid-template-columns: 1fr; }
      .field-wo-actions-simple { grid-template-columns: 1fr; }
      .field-wo-head-simple { grid-template-columns: auto minmax(0, 1fr); }
      .wo-property-editor { grid-template-columns: 1fr; }
      .field-wo-state {
        grid-column: 2;
        align-items: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
      }
      .field-wo-mini-actions { grid-template-columns: 1fr; }
    }
    
    .form-group { margin-bottom: 20px; }
    .form-label { 
      font-size: 0.9rem; 
      font-weight: 600; 
      color: var(--text); 
      margin-bottom: 8px; 
      display: block; 
    }
    .form-control, .form-select { 
      border: 2px solid var(--border); 
      border-radius: var(--radius-md); 
      padding: 14px 16px; 
      font-size: 0.95rem; 
      width: 100%; 
      background: var(--card-bg);
      transition: all 0.2s;
    }
    .form-control:focus, .form-select:focus { 
      border-color: var(--primary); 
      box-shadow: 0 0 0 4px rgba(59,130,246,0.15); 
      outline: none; 
    }
    
    .btn { 
      border-radius: var(--radius-md); 
      padding: 12px 20px; 
      font-size: 0.9rem; 
      font-weight: 600; 
      border: none; 
      display: inline-flex; 
      align-items: center; 
      gap: 8px; 
      cursor: pointer; 
      transition: all 0.2s;
    }
    .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
    .btn-primary { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: white; }
    .btn-primary:hover { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); }
    .btn-success { background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; }
    .btn-line { background: linear-gradient(135deg, #06c755 0%, #04a544 100%); color: white; }
    .btn-line:hover { background: linear-gradient(135deg, #05b34c 0%, #03933d 100%); }
    .btn-warning { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: white; }
    .btn-danger { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: white; }
    .btn-outline { background: transparent; border: 2px solid var(--border); color: var(--text); }
    .btn-outline:hover { background: var(--bg); border-color: var(--primary); }
    .btn-sm { padding: 8px 14px; font-size: 0.85rem; }
    .btn-block { width: 100%; justify-content: center; }
    .btn-icon { width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: var(--radius-sm); }
    .btn-violet { background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%); color: #fff; }
    .btn-violet:hover { background: linear-gradient(135deg, #6d28d9 0%, #9333ea 100%); }
    .btn-region { background: #fff; border: 2px solid #10b981; color: #047857; font-weight: 600; }
    .btn-region:hover { background: #ecfdf5; border-color: #059669; }

    /* Even, aligned action toolbar — equal-width buttons that wrap cleanly */
    .toolbar-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
    .toolbar-actions > .btn { flex: 1 1 150px; justify-content: center; }

    /* Unified destructive (delete) button — subtle by default, clear red on hover */
    .btn-delete { color: #dc2626; border-color: #fecaca; }
    .btn-delete:hover { background: #fef2f2; border-color: #dc2626; color: #b91c1c; }

    /* ===== 檢視範圍選擇器（view scope） ===== */
    .view-scope-bar { position: relative; margin: 0 0 14px; display: flex; }
    .view-scope-trigger { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
    .view-scope-trigger strong { color: var(--primary); font-weight: 600; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .view-scope-trigger .bi-chevron-down { font-size: 0.72rem; opacity: 0.6; }
    .view-scope-panel {
      position: absolute; top: calc(100% + 6px); left: 0; z-index: 50;
      width: min(360px, 92vw); background: #fff; border: 1px solid #e5e7eb;
      border-radius: 12px; box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
      padding: 10px; display: flex; flex-direction: column; gap: 8px;
    }
    .view-scope-search {
      width: 100%; padding: 8px 10px; border: 1px solid #e5e7eb;
      border-radius: 8px; font-size: 0.85rem;
    }
    .view-scope-search:focus { outline: none; border-color: var(--primary); }
    .view-scope-all {
      display: flex; align-items: center; gap: 8px; font-weight: 600;
      padding: 6px 8px; border-bottom: 1px solid #f1f5f9; cursor: pointer;
    }
    .view-scope-options { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; }
    .view-scope-options label {
      display: flex; align-items: center; gap: 8px; padding: 7px 8px;
      border-radius: 8px; cursor: pointer; font-size: 0.88rem;
    }
    .view-scope-options label:hover { background: #f8fafc; }
    .view-scope-options input { flex-shrink: 0; }
    .view-scope-panel-foot { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; border-top: 1px solid #f1f5f9; }
    .view-scope-regions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
    .view-scope-regions-label { font-size: 0.8rem; color: var(--text-light); margin-right: 2px; }
    .view-scope-regions .vs-region { padding: 3px 12px; }
    /* 用戶編輯：可管理醫院的快速選區按鈕 */
    .user-hospital-regions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }

    .search-bar {
      display: flex;
      gap: 12px;
      margin-bottom: 20px;
      flex-wrap: wrap;
    }
    .search-bar .form-control, .search-bar .form-select {
      flex: 1;
      min-width: 150px;
    }
    
    .data-table {
      width: 100%;
      border-collapse: collapse;
    }
    .data-table th {
      background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
      padding: 14px 16px;
      text-align: left;
      font-weight: 600;
      font-size: 0.85rem;
      color: var(--text);
      border-bottom: 2px solid var(--border);
    }
    .data-table td {
      padding: 14px 16px;
      border-bottom: 1px solid var(--border);
      font-size: 0.9rem;
    }
    .data-table tr:hover { background: #f8fafc; }
    .data-table tr:last-child td { border-bottom: none; }
    
    .status-badge { 
      padding: 6px 12px; 
      border-radius: 20px; 
      font-size: 0.75rem; 
      font-weight: 600; 
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .status-badge.pending { background: #dbeafe; color: #1d4ed8; }
    .status-badge.progress { background: #fef3c7; color: #b45309; }
    .status-badge.completed { background: #dcfce7; color: #15803d; }
    
    .modal-overlay { 
      position: fixed; 
      top: 0; 
      left: 0; 
      right: 0; 
      bottom: 0; 
      background: rgba(15, 23, 42, 0.6);
      backdrop-filter: blur(4px);
      z-index: 1000; 
      display: none; 
      align-items: center; 
      justify-content: center; 
      padding: 20px;
      animation: fadeIn 0.2s ease;
      overflow-y: auto;
      overscroll-behavior: contain;
      touch-action: auto;
      -webkit-overflow-scrolling: touch;
    }
    .modal-overlay.show { display: flex; }
    .modal-content { 
      background: var(--card-bg); 
      border-radius: var(--radius-xl); 
      width: 100%; 
      max-width: 600px; 
      max-height: 90vh; 
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
      animation: slideUp 0.3s ease;
    }
    .modal-header { 
      padding: 20px 24px; 
      border-bottom: 1px solid var(--border); 
      display: flex; 
      justify-content: space-between; 
      align-items: center; 
      position: sticky; 
      top: 0; 
      z-index: 30;
      background: var(--card-bg);
      flex-shrink: 0;
    }
    .modal-content > .modal-header:first-child {
      border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    }

    #modal-wo-detail .modal-content {
      position: relative;
    }
    #modal-wo-detail .modal-header {
      z-index: 40;
    }
    #modal-wo-detail .wo-detail-quick-close {
      position: fixed;
      top: calc(14px + env(safe-area-inset-top, 0px));
      right: calc(14px + env(safe-area-inset-right, 0px));
      z-index: 1010;
      width: 46px;
      height: 46px;
      border: 0;
      border-radius: 999px;
      background: rgba(15, 23, 42, 0.82);
      color: #fff;
      display: none;
      align-items: center;
      justify-content: center;
      box-shadow: 0 14px 32px rgba(15, 23, 42, 0.28);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      touch-action: manipulation;
    }
    #modal-wo-detail.show .wo-detail-quick-close {
      display: flex;
    }
    #modal-wo-detail .wo-detail-quick-close:active {
      transform: scale(0.96);
    }
    .modal-title { font-size: 1.2rem; font-weight: 700; margin: 0; }
    .modal-body { padding: 24px; }
    .modal-footer { 
      padding: 20px 24px; 
      border-top: 1px solid var(--border); 
      display: flex; 
      gap: 12px; 
      justify-content: flex-end; 
    }

    .file-upload-area {
      border: 2px dashed var(--border);
      border-radius: var(--radius-lg);
      padding: 30px;
      text-align: center;
      cursor: pointer;
      transition: all 0.2s;
      background: #fafbfc;
    }
    .file-upload-area:hover {
      border-color: var(--primary);
      background: #f0f7ff;
    }
    .file-list {
      margin-top: 16px;
    }
    .file-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px;
      background: #f8fafc;
      border-radius: var(--radius-sm);
      margin-bottom: 8px;
    }
    .file-item-info { display: flex; align-items: center; gap: 12px; }
    .file-item-icon { 
      width: 36px; 
      height: 36px; 
      border-radius: var(--radius-sm); 
      display: flex; 
      align-items: center; 
      justify-content: center;
      font-size: 1.2rem;
    }
    
    .toast { 
      position: fixed; 
      bottom: 24px; 
      left: 50%; 
      transform: translateX(-50%); 
      background: var(--text); 
      color: white; 
      padding: 14px 24px; 
      border-radius: var(--radius-md); 
      font-size: 0.9rem; 
      font-weight: 500; 
      z-index: 9999; 
      display: none; 
      align-items: center; 
      gap: 10px; 
      box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    }
    .toast.show { display: flex; animation: toastIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
    .toast.error { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }

    .app-update-prompt {
      position: fixed;
      right: 22px;
      bottom: 22px;
      z-index: 10020;
      width: min(340px, calc(100vw - 32px));
      display: flex;
      gap: 14px;
      align-items: center;
      justify-content: space-between;
      padding: 14px;
      color: #0f172a;
      background: rgba(255, 255, 255, 0.96);
      border: 1px solid rgba(37, 99, 235, 0.18);
      border-radius: 18px;
      box-shadow: 0 18px 50px rgba(15, 23, 42, 0.18);
      backdrop-filter: blur(12px);
      animation: toastIn 0.24s ease-out;
    }
    .app-update-prompt__body {
      min-width: 0;
    }
    .app-update-prompt__title {
      font-weight: 800;
      font-size: 0.95rem;
      margin-bottom: 3px;
    }
    .app-update-prompt__text {
      color: #475569;
      font-size: 0.8rem;
      line-height: 1.4;
    }
    .app-update-prompt__version {
      color: #2563eb;
      font-size: 0.72rem;
      font-weight: 700;
      margin-top: 5px;
    }
    .app-update-prompt__actions {
      display: flex;
      flex-direction: column;
      gap: 7px;
      flex: 0 0 auto;
    }
    .app-update-header-btn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: rgba(255,255,255,0.22);
      color: white;
      border: 1px solid rgba(255,255,255,0.22);
      min-height: 34px;
      padding: 7px 10px;
      font-weight: 800;
      white-space: nowrap;
    }
    .app-update-header-btn:hover {
      background: rgba(255,255,255,0.32);
      color: white;
    }

    .empty-state {
      text-align: center;
      padding: 60px 20px;
      color: var(--text-light);
    }
    .empty-state i {
      font-size: 4rem;
      opacity: 0.3;
      margin-bottom: 16px;
    }

    .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

    @media (max-width: 768px) {
      .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
      .quick-actions { grid-template-columns: repeat(2, 1fr); }
      .wo-bulk-toolbar {
        margin: 0 10px 10px;
        align-items: stretch;
        flex-direction: column;
      }
      .wo-bulk-toolbar__actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }
      .app-update-prompt {
        left: 12px;
        right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        width: auto;
      }
      .app-update-prompt__actions {
        flex-direction: row;
      }
    }

    /* ===== Tab Nav ===== */
    .tab-nav {
      display: flex;
      gap: 4px;
      padding: 0 24px;
      background: rgba(255,255,255,0.1);
      backdrop-filter: blur(10px);
      overflow-x: auto;
      border-bottom: none;
    }
    .tab-nav::-webkit-scrollbar { display: none; }

    /* ===== Tab Content ===== */
    .tab-content { display: none; padding: 20px 24px; max-width: 1600px; margin: 0 auto; }
    .tab-content.active { display: block; }

    /* ===== Work Order Cards ===== */
    .wo-bulk-toolbar {
      max-width: 1600px;
      margin: 0 auto 12px;
      padding: 12px 14px;
      border: 1px solid #bfdbfe;
      border-radius: 16px;
      background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      box-shadow: 0 10px 26px rgba(37, 99, 235, 0.08);
    }
    .wo-bulk-toolbar__text {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 3px;
      color: #0f172a;
    }
    .wo-bulk-toolbar__text strong {
      font-size: 0.95rem;
      font-weight: 900;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .wo-bulk-toolbar__text span {
      color: #64748b;
      font-size: 0.78rem;
      font-weight: 750;
    }
    .wo-bulk-toolbar__actions {
      display: flex;
      gap: 8px;
      flex: 0 0 auto;
    }
    .wo-bulk-toolbar__actions .btn {
      min-height: 38px;
      font-weight: 850;
      border-radius: 12px;
    }
    @media (max-width: 768px) {
      .wo-bulk-toolbar {
        margin: 0 10px 10px;
        align-items: stretch;
        flex-direction: column;
      }
      .wo-bulk-toolbar__actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }
    }
    .wo-list { padding: 0 24px 24px; max-width: 1600px; margin: 0 auto; }
    .wo-card {
      background: var(--card-bg);
      border-radius: var(--radius-lg);
      border: 1px solid var(--border);
      padding: 18px 20px;
      margin-bottom: 12px;
      cursor: pointer;
      transition: all 0.2s;
      box-shadow: var(--shadow);
      position: relative;
    }
    .wo-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); border-color: var(--primary); }
    .wo-card.status-urgent { border-left: 4px solid var(--danger); }
    .wo-card.status-completed { border-left: 4px solid var(--success); opacity: 0.85; }
    .wo-card.status-progress { border-left: 4px solid var(--warning); }
    .wo-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
    .wo-card-title { font-size: 1rem; font-weight: 600; margin: 0; flex: 1; }
    .wo-card-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 0.8rem; color: var(--text-light); }
    .wo-card-meta span { display: flex; align-items: center; gap: 4px; }
    .wo-card-actions { display: flex; gap: 6px; flex-shrink: 0; }

    /* ===== Device Grid & Cards ===== */
    .device-filter-grid {
      display: grid;
      grid-template-columns: minmax(280px, 1.4fr) repeat(5, minmax(150px, 1fr));
      gap: 12px;
      align-items: stretch;
    }
    .device-filter-field {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      min-width: 0;
      min-height: 64px;
      position: relative;
    }
    .device-filter-field:not(.device-filter-date)::before {
      content: "";
      display: block;
      height: 15px;
      margin-bottom: 3px;
      flex: 0 0 auto;
    }
    .device-filter-field .form-control,
    .device-filter-field .form-select,
    .device-filter-field .btn {
      width: 100%;
      min-height: 44px;
      line-height: 1.25;
    }
    .device-filter-field .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 2px;
      white-space: nowrap;
    }
    .device-filter-label {
      display: block;
      margin: 0 0 3px 2px;
      color: #475569;
      font-size: 0.68rem;
      font-weight: 850;
      line-height: 1.1;
    }
    .device-filter-summary {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      margin-top: 14px;
      font-size: 0.78rem;
    }
    .device-filter-summary .warranty-chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 2px;
      min-height: 38px;
      padding: 8px 14px;
      white-space: nowrap;
      border-radius: 8px;
    }
    .device-filter-summary .warranty-chip span {
      font-weight: 800;
      margin-left: 4px;
    }
    .warranty-chip-all { background: #f1f5f9; }
    .warranty-chip-expired { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
    .warranty-chip-due { background: #fef3c7; color: #b45309; border-color: #fde68a; }
    .warranty-chip-valid { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
    .warranty-chip-none { background: #f3f4f6; color: #4b5563; }
    .warranty-chip-unclassified {
      background: #fef9c3;
      color: #854d0e;
      border-color: #fde68a;
      font-weight: 700;
    }
    @media (max-width: 1400px) {
      .device-filter-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
      .device-filter-search,
      .device-filter-wide {
        grid-column: span 2;
      }
    }
    @media (max-width: 900px) {
      .device-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .device-filter-search,
      .device-filter-wide,
      .device-filter-reset {
        grid-column: span 2;
      }
    }
    @media (max-width: 540px) {
      .device-filter-grid {
        grid-template-columns: 1fr;
        gap: 8px;
      }
      .device-filter-search,
      .device-filter-wide,
      .device-filter-reset {
        grid-column: auto;
      }
      .device-filter-summary {
        display: grid;
        grid-template-columns: 1fr;
      }
      .device-filter-summary .warranty-chip {
        width: 100%;
      }
    }
    .device-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
      padding: 0 24px 24px;
      max-width: 1600px;
      margin: 0 auto;
    }
    .device-list-summary {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      border: 1px solid #bfdbfe;
      background: linear-gradient(135deg, #eff6ff, #f8fafc);
      color: #1e40af;
      border-radius: 14px;
      padding: 10px 12px;
      font-size: 0.82rem;
      font-weight: 800;
    }
    .device-list-summary span {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      border-radius: 999px;
      background: rgba(255,255,255,0.82);
      padding: 5px 9px;
    }
    .device-render-status {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      width: fit-content;
      border-radius: 999px;
      background: #f8fafc;
      color: #64748b;
      border: 1px solid var(--border);
      padding: 7px 11px;
      font-size: 0.76rem;
      font-weight: 850;
    }
    .device-list-body {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
    }
    .device-list-row {
      display: grid;
      grid-template-columns: minmax(260px, 1.25fr) minmax(360px, 1.15fr) auto;
      gap: 12px;
      align-items: center;
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 12px;
      box-shadow: 0 8px 22px rgba(15,23,42,0.055);
      transition: border-color .2s ease, box-shadow .2s ease, background-color .35s ease;
    }
    .device-list-row:hover {
      border-color: #93c5fd;
      box-shadow: 0 12px 28px rgba(37,99,235,0.12);
    }
    .device-list-row.saved {
      background: #fef9c3;
      border-color: #facc15;
    }
    .device-list-title {
      display: flex;
      align-items: center;
      gap: 7px;
      flex-wrap: wrap;
      color: #0f172a;
      font-size: 0.96rem;
      font-weight: 950;
      line-height: 1.35;
    }
    .device-list-title > i {
      color: var(--primary);
      flex-shrink: 0;
    }
    .device-list-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 5px 12px;
      margin-top: 5px;
      color: #64748b;
      font-size: 0.76rem;
      font-weight: 760;
    }
    .device-list-meta span {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      min-width: 0;
      overflow-wrap: anywhere;
    }
    .device-list-tag {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      border-radius: 999px;
      padding: 3px 7px;
      font-size: 0.66rem;
      font-weight: 900;
      white-space: nowrap;
      background: #f1f5f9;
      color: #475569;
    }
    .device-list-tag.ok { background:#dcfce7;color:#15803d; }
    .device-list-tag.warn { background:#fef3c7;color:#b45309; }
    .device-list-tag.danger { background:#fee2e2;color:#b91c1c; }
    .device-cycle-editor {
      display: grid;
      grid-template-columns: 82px minmax(112px, 1fr) minmax(112px, 1fr) auto;
      gap: 7px;
      align-items: end;
    }
    .device-cycle-editor label {
      display: flex;
      flex-direction: column;
      gap: 3px;
      color: #475569;
      font-size: 0.68rem;
      font-weight: 850;
      margin: 0;
    }
    .device-list-actions {
      display: grid;
      grid-template-columns: repeat(4, 36px) minmax(92px, 1fr);
      gap: 6px;
      align-items: center;
      min-width: 248px;
    }
    .device-list-actions .btn:not(.btn-primary) {
      width: 36px;
      height: 36px;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .device-list-actions .btn-primary {
      min-height: 36px;
      white-space: nowrap;
    }
    @media (max-width: 1100px) {
      .device-list-row {
        grid-template-columns: 1fr;
        align-items: stretch;
      }
      .device-cycle-editor {
        grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
      }
      .device-list-actions {
        min-width: 0;
        grid-template-columns: repeat(4, 36px) minmax(120px, 1fr);
      }
    }
    @media (max-width: 640px) {
      .device-cycle-editor {
        grid-template-columns: 1fr;
      }
      .device-list-actions {
        grid-template-columns: repeat(4, 1fr);
      }
      .device-list-actions .btn-primary {
        grid-column: 1 / -1;
      }
      .device-list-actions .btn:not(.btn-primary) {
        width: auto;
      }
    }
    .device-card {
      background: var(--card-bg);
      border-radius: var(--radius-lg);
      border: 1px solid var(--border);
      padding: 18px;
      box-shadow: var(--shadow);
      transition: all 0.2s;
      position: relative;
      display: flex;
      flex-direction: column;
      min-width: 0;
    }
    .device-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
    .device-card-title {
      font-size: 1rem;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      word-break: break-all;
      overflow-wrap: anywhere;
      line-height: 1.4;
    }
    .device-card-title > i:first-child { flex-shrink: 0; }
    .device-card-title > .status-badge { margin-left: auto; flex-shrink: 0; }
    .device-card-info {
      display: flex;
      flex-direction: column;
      gap: 6px;
      font-size: 0.82rem;
      color: var(--text-light);
      flex: 1;
      min-width: 0;
    }
    .device-card-info span {
      display: flex;
      align-items: center;
      gap: 6px;
      word-break: break-all;
      overflow-wrap: anywhere;
    }
    .device-card-info span > i { flex-shrink: 0; }
    .device-card-actions {
      display: grid;
      grid-template-columns: repeat(4, auto) 1fr;
      gap: 6px;
      margin-top: 14px;
      align-items: center;
    }
    .device-card-actions .btn-primary {
      grid-column: 5 / 6;
      justify-self: stretch;
    }
    .device-card-actions .btn:not(.btn-primary) {
      width: 36px;
      height: 36px;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    /* ===== List Item ===== */
    .list-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 16px;
      border-radius: var(--radius-sm);
      background: #f8fafc;
      margin-bottom: 8px;
      gap: 12px;
    }
    .list-item:hover { background: #f0f7ff; }

    .maint-edit-active {
      display: flex;
      align-items: center;
      gap: 8px;
      border: 1px solid #ccfbf1;
      background: #f0fdfa;
      border-radius: 12px;
      padding: 10px 12px;
      color: #0f766e;
      font-size: 0.84rem;
      font-weight: 850;
      cursor: pointer;
    }
    .maint-edit-active input {
      width: 18px;
      height: 18px;
      accent-color: #0f766e;
    }
    @media (max-width: 768px) {
    }

    /* ===== Checklist ===== */
    .checklist { display: flex; flex-direction: column; gap: 4px; }
    .check-item {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 10px 12px;
      border-radius: var(--radius-sm);
      background: #f8fafc;
      border: 1px solid transparent;
      transition: all 0.15s;
    }
    .check-item:hover { background: #f0f7ff; border-color: var(--border); }
    .check-item input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; cursor: pointer; accent-color: var(--success); }
    .check-item-content { flex: 1; }
    .check-item-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.9rem; }
    .wo-property-editor {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 8px;
      align-items: center;
      margin: 4px 0 10px;
    }
    .wo-property-editor .form-control {
      padding: 10px 12px;
      font-size: 0.88rem;
      border-radius: 12px;
    }
    .wo-property-editor .btn {
      min-height: 42px;
      white-space: nowrap;
    }
    .wo-property-hint {
      grid-column: 1 / -1;
      color: #64748b;
      font-size: 0.72rem;
      margin-top: -2px;
    }

    /* ===== Batch Signature Overview ===== */
    #modal-batch-sign .batch-sign-modal-content {
      width: min(760px, 96vw);
    }
    .batch-sign-overview-panel {
      border: 1px solid #dbeafe;
      background: linear-gradient(180deg, #f8fbff 0%, #f8fafc 100%);
      border-radius: 16px;
      padding: 12px;
      box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
    }
    .batch-sign-overview-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 8px;
    }
    .batch-sign-overview-title {
      color: #0f172a;
      font-size: 0.88rem;
      font-weight: 900;
    }
    .batch-sign-overview-sub {
      color: #64748b;
      font-size: 0.74rem;
      margin-top: 2px;
    }
    .batch-sign-count-pill,
    .batch-sign-summary-chip,
    .batch-sign-status-chip,
    .batch-sign-mini-chip {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      border-radius: 999px;
      white-space: nowrap;
      font-weight: 900;
    }
    .batch-sign-count-pill {
      background: #1d4ed8;
      color: #fff;
      padding: 5px 10px;
      font-size: 0.78rem;
      box-shadow: 0 8px 18px rgba(29, 78, 216, 0.2);
    }
    .batch-sign-summary-row {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 6px;
    }
    .batch-sign-summary-chip {
      padding: 5px 10px;
      font-size: 0.76rem;
    }
    .batch-sign-summary-chip.done,
    .batch-sign-summary-chip.pass {
      background: #dcfce7;
      color: #166534;
    }
    .batch-sign-summary-chip.todo,
    .batch-sign-summary-chip.warn {
      background: #fef3c7;
      color: #92400e;
    }
    .batch-sign-summary-chip.empty {
      background: #f1f5f9;
      color: #475569;
    }
    .batch-sign-summary-chip.loading {
      background: #eff6ff;
      color: #1d4ed8;
    }
    .batch-sign-overview-note {
      font-size: 0.75rem;
      margin: 4px 0 8px;
      line-height: 1.4;
    }
    .batch-sign-overview-note.checking { color: #2563eb; }
    .batch-sign-overview-note.warning { color: #92400e; }
    .batch-sign-overview-note.done { color: #166534; }
    .batch-sign-machine-list {
      display: grid;
      gap: 8px;
      max-height: 310px;
      overflow-y: auto;
      padding-right: 3px;
      -webkit-overflow-scrolling: touch;
    }
    .batch-sign-machine-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      background: #fff;
      border: 1px solid #e2e8f0;
      border-left: 4px solid #f59e0b;
      border-radius: 14px;
      padding: 10px 11px;
    }
    .batch-sign-machine-row.done,
    .batch-sign-machine-row.pass { border-left-color: #22c55e; }
    .batch-sign-machine-row.active { border-left-color: #3b82f6; }
    .batch-sign-machine-row.pending,
    .batch-sign-machine-row.warn { border-left-color: #f59e0b; }
    .batch-sign-machine-row.loading { border-left-color: #3b82f6; }
    .batch-sign-machine-row.empty { border-left-color: #94a3b8; }
    .batch-sign-machine-main { min-width: 0; }
    .batch-sign-machine-title {
      display: flex;
      align-items: center;
      gap: 8px;
      color: #0f172a;
      font-size: 0.92rem;
      font-weight: 900;
      min-width: 0;
    }
    .batch-sign-machine-title > span:first-child {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .batch-sign-machine-sub {
      color: #475569;
      font-size: 0.76rem;
      margin-top: 3px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .batch-sign-machine-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 5px 10px;
      color: #64748b;
      font-size: 0.72rem;
      margin-top: 5px;
    }
    .batch-sign-machine-meta span {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      min-width: 0;
    }
    .batch-sign-status-chip {
      flex-shrink: 0;
      padding: 3px 8px;
      font-size: 0.68rem;
    }
    .batch-sign-status-chip.done,
    .batch-sign-status-chip.pass {
      background: #dcfce7;
      color: #166534;
    }
    .batch-sign-status-chip.active {
      background: #dbeafe;
      color: #1d4ed8;
    }
    .batch-sign-status-chip.pending,
    .batch-sign-status-chip.warn {
      background: #fef3c7;
      color: #92400e;
    }
    .batch-sign-status-chip.loading {
      background: #eff6ff;
      color: #1d4ed8;
    }
    .batch-sign-status-chip.empty {
      background: #f1f5f9;
      color: #475569;
    }
    .batch-sign-machine-signs {
      display: flex;
      flex-direction: column;
      gap: 5px;
      align-items: flex-end;
    }
    .batch-sign-mini-chip {
      min-width: 74px;
      justify-content: center;
      padding: 4px 8px;
      font-size: 0.68rem;
      border: 1px solid transparent;
    }
    .batch-sign-mini-chip.done {
      background: #dcfce7;
      color: #166534;
      border-color: #bbf7d0;
    }
    .batch-sign-mini-chip.todo {
      background: #f8fafc;
      color: #64748b;
      border-color: #e2e8f0;
    }
    .batch-sign-mini-chip.loading {
      background: #eff6ff;
      color: #1d4ed8;
      border-color: #bfdbfe;
    }
    .batch-sign-maintenance-result {
      width: min(320px, 36vw);
      display: grid;
      gap: 7px;
      align-content: center;
    }
    .batch-sign-result-meter {
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      gap: 6px;
      color: #475569;
      font-size: 0.72rem;
      font-weight: 850;
    }
    .batch-sign-result-meter strong {
      color: #0f172a;
      font-size: 0.84rem;
      font-weight: 950;
    }
    .batch-sign-attention-empty,
    .batch-sign-attention-pass {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 5px;
      color: #64748b;
      font-size: 0.72rem;
      font-weight: 800;
      text-align: right;
    }
    .batch-sign-attention-pass {
      color: #166534;
    }
    .batch-sign-attention-list {
      display: grid;
      gap: 5px;
    }
    .batch-sign-attention-item {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 4px 6px;
      align-items: center;
      background: #fffbeb;
      color: #92400e;
      border: 1px solid #fde68a;
      border-radius: 10px;
      padding: 5px 7px;
      font-size: 0.7rem;
      line-height: 1.35;
    }
    .batch-sign-attention-item.danger {
      background: #fef2f2;
      color: #b91c1c;
      border-color: #fecaca;
    }
    .batch-sign-attention-state {
      grid-row: span 2;
      align-self: start;
      border-radius: 999px;
      background: rgba(255,255,255,0.72);
      padding: 2px 6px;
      font-weight: 950;
      white-space: nowrap;
    }
    .batch-sign-attention-name {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-weight: 900;
    }
    .batch-sign-attention-note {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #64748b;
      font-weight: 750;
    }
    .batch-sign-attention-more {
      color: #92400e;
      font-size: 0.7rem;
      font-weight: 850;
      text-align: right;
    }
    @media (max-width: 640px) {
      .batch-sign-overview-panel { padding: 10px; }
      .batch-sign-machine-list { max-height: 280px; }
      .batch-sign-machine-row {
        grid-template-columns: 1fr;
      }
      .batch-sign-machine-signs {
        flex-direction: row;
        justify-content: flex-start;
        flex-wrap: wrap;
      }
      .batch-sign-mini-chip {
        min-width: auto;
      }
      .batch-sign-maintenance-result {
        width: 100%;
      }
      .batch-sign-result-meter,
      .batch-sign-attention-empty,
      .batch-sign-attention-pass,
      .batch-sign-attention-more {
        justify-content: flex-start;
        text-align: left;
      }
    }

    /* ===== Signature ===== */
    #modal-signature .signature-modal-content {
      width: min(920px, 98vw);
    }
    #modal-batch-sign .batch-sign-modal-content {
      width: min(920px, 98vw);
    }
    .sig-container {
      position: relative;
      border: 2px solid var(--border);
      border-radius: var(--radius-md);
      overflow: hidden;
      cursor: crosshair;
      background: white;
      touch-action: none;
      overscroll-behavior: contain;
      -webkit-user-select: none;
      user-select: none;
      box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.08);
      contain: paint;
    }
    #sig-container-wrap {
      height: clamp(340px, 52vh, 520px) !important;
      margin-bottom: 8px !important;
    }
    #batch-sig-container {
      height: clamp(280px, 46vh, 440px) !important;
      margin-bottom: 6px;
    }
    .sig-canvas,
    #batch-sig-canvas {
      display: block;
      width: 100%;
      height: 100%;
      touch-action: none;
      -webkit-user-select: none;
      user-select: none;
      contain: strict;
    }
    .sig-line {
      position: absolute;
      bottom: 30px;
      left: 10%;
      right: 10%;
      height: 1px;
      background: #cbd5e1;
      pointer-events: none;
    }
    .sig-placeholder {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: var(--text-lighter);
      font-size: 0.85rem;
      pointer-events: none;
      user-select: none;
    }
    .sig-touch-hint {
      margin: -2px 0 10px;
      color: #64748b;
      font-size: 0.78rem;
      line-height: 1.35;
    }
    .sig-preview { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
    .sig-preview-item {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 8px;
      min-height: 108px;
      padding: 12px 38px 10px 12px;
      background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
      border: 1px solid #dbeafe;
      border-radius: 14px;
      box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
      font-size: 0.88rem;
    }
    .sig-preview-img {
      width: 100%;
      max-width: 220px;
      height: 58px;
      object-fit: contain;
      align-self: center;
      background: #fff;
      border-bottom: 1px solid #e5edf7;
    }
    .sig-preview-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      color: #102a43;
      font-weight: 800;
      letter-spacing: 0.02em;
    }
    .sig-preview-meta small {
      color: #64748b;
      font-size: 0.78rem;
      font-weight: 700;
      white-space: nowrap;
    }
    .btn-sig-delete {
      position: absolute;
      top: 8px;
      right: 8px;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.96);
      border: 1px solid #fecaca;
      color: #dc2626;
      font-size: 0.72rem;
      cursor: pointer;
      z-index: 2;
    }

    /* ===== Stats Bar (sticky header) ===== */
    .stats-bar {
      display: flex;
      gap: 12px;
      padding: 16px 24px;
      overflow-x: auto;
      background: var(--bg-gradient);
      border-bottom: 1px solid var(--border);
    }
    .stats-bar::-webkit-scrollbar { display: none; }

    /* ===== In-Progress badge ===== */
    .status-badge.inprogress { background: #fef3c7; color: #b45309; }

    /* ===== QR Code ===== */
    .qr-preview-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      padding: 20px;
      background: white;
      border: 2px solid var(--border);
      border-radius: var(--radius-lg);
      text-align: center;
    }
    .qr-preview-box img { max-width: 180px; border-radius: 8px; }
    .qr-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

    /* ===== Scan Page ===== */
    #scan-page {
      display: none;
      position: fixed;
      inset: 0;
      background: var(--bg-gradient);
      z-index: 500;
      overflow-y: auto;
    }
    #scan-page.active { display: block; }
    .scan-card {
      max-width: 600px;
      margin: 40px auto;
      padding: 0 16px 40px;
    }
    .scan-device-header {
      background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
      color: white;
      border-radius: var(--radius-xl);
      padding: 28px;
      margin-bottom: 20px;
      position: relative;
    }
    .scan-device-header .badge-row { display: flex; gap: 8px; margin-bottom: 12px; }
    .scan-device-header h2 { font-size: 1.4rem; font-weight: 700; margin: 0 0 6px; }
    .scan-device-header p { margin: 0; opacity: 0.85; font-size: 0.9rem; }

    /* ===== Calendar ===== */
    .calendar-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 2px;
    }
    .cal-header { text-align: center; font-size: 0.75rem; font-weight: 600; color: var(--text-light); padding: 8px 0; }
    .cal-day {
      min-height: 70px;
      border-radius: 8px;
      padding: 6px;
      background: #f8fafc;
      border: 1px solid var(--border);
      font-size: 0.8rem;
    }
    .cal-day.today { background: #eff6ff; border-color: var(--primary); }
    .cal-day.other-month { opacity: 0.4; }
    .cal-day-num { font-weight: 600; margin-bottom: 4px; }
    .cal-dot {
      display: block;
      font-size: 0.68rem;
      padding: 2px 4px;
      border-radius: 4px;
      margin-bottom: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: pointer;
    }
    @media (max-width: 768px) {
      .calendar-grid { grid-template-columns: repeat(7, 1fr); }
      .cal-day { min-height: 50px; padding: 4px; }
      .cal-dot { display: none; }
      .cal-day.has-event .cal-day-num::after { content: ' •'; color: var(--primary); }
    }

    /* ===== Pagination ===== */
    .pagination-bar {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
      padding: 16px 24px;
    }
    .page-btn {
      width: 36px; height: 36px;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: var(--card-bg);
      cursor: pointer;
      font-size: 0.85rem;
      font-weight: 600;
      transition: all 0.15s;
      display: flex; align-items: center; justify-content: center;
    }
    .page-btn:hover { background: var(--primary); color: white; border-color: var(--primary); }
    .page-btn.active { background: var(--primary); color: white; border-color: var(--primary); }
    .page-btn:disabled { opacity: 0.4; cursor: not-allowed; }

    @media (max-width: 768px) {
      .tab-content { padding: 16px; }
      .wo-list { padding: 0 16px 16px; }
      .device-grid { grid-template-columns: 1fr; padding: 0 16px 16px; }
      .wo-card-title { font-size: 0.9rem; }
    }

    /* ===== Help / Manual Page ===== */
    .help-page { max-width: 860px; margin: 0 auto; }
    .help-hero {
      background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
      border-radius: 16px;
      padding: 32px 28px;
      color: white;
      margin-bottom: 24px;
      position: relative;
      overflow: hidden;
    }
    .help-hero::after {
      content: '\F4AF';
      font-family: 'bootstrap-icons';
      position: absolute;
      right: 24px;
      bottom: -10px;
      font-size: 100px;
      opacity: 0.1;
    }
    .help-hero h2 { font-size: 1.6rem; font-weight: 700; margin: 0 0 6px; }
    .help-hero p { margin: 0; opacity: 0.88; font-size: 0.95rem; }
    .help-toc {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 10px;
      margin-bottom: 24px;
    }
    .help-toc-item {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 12px 14px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 0.88rem;
      font-weight: 500;
      transition: all 0.15s;
      text-decoration: none;
      color: var(--text);
    }
    .help-toc-item:hover { background: var(--primary); color: white; border-color: var(--primary); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(37,99,235,0.3); }
    .help-toc-item i { font-size: 1.1rem; flex-shrink: 0; }
    .help-section {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 14px;
      margin-bottom: 20px;
      overflow: hidden;
    }
    .help-section-header {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px 20px;
      cursor: pointer;
      user-select: none;
      border-bottom: 1px solid transparent;
      transition: background 0.15s;
    }
    .help-section-header:hover { background: var(--bg); }
    .help-section-header.open { border-bottom-color: var(--border); }
    .help-section-icon {
      width: 36px; height: 36px;
      border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1rem;
      flex-shrink: 0;
    }
    .help-section-title { flex: 1; font-size: 1rem; font-weight: 600; }
    .help-section-chevron { color: var(--text-light); transition: transform 0.2s; }
    .help-section-header.open .help-section-chevron { transform: rotate(90deg); }
    .help-section-body {
      display: none;
      padding: 20px;
      font-size: 0.9rem;
      line-height: 1.7;
      color: var(--text);
    }
    .help-section-body.open { display: block; }
    .help-section-body h4 {
      font-size: 0.92rem; font-weight: 700;
      color: var(--primary); margin: 18px 0 8px;
      display: flex; align-items: center; gap: 6px;
    }
    .help-section-body h4:first-child { margin-top: 0; }
    .help-table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 0.85rem; }
    .help-table th {
      background: var(--bg); padding: 8px 12px;
      text-align: left; font-weight: 600;
      border-bottom: 2px solid var(--border);
    }
    .help-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
    .help-table tr:last-child td { border-bottom: none; }
    .help-table tr:hover td { background: var(--bg); }
    .help-steps { margin: 10px 0; padding: 0; list-style: none; }
    .help-steps li {
      display: flex; gap: 12px; padding: 6px 0;
      border-bottom: 1px dashed var(--border);
      align-items: flex-start;
    }
    .help-steps li:last-child { border-bottom: none; }
    .help-step-num {
      width: 22px; height: 22px; border-radius: 50%;
      background: var(--primary); color: white;
      display: flex; align-items: center; justify-content: center;
      font-size: 0.7rem; font-weight: 700; flex-shrink: 0; margin-top: 2px;
    }
    .help-tip {
      background: #eff6ff; border-left: 3px solid var(--primary);
      border-radius: 0 8px 8px 0; padding: 10px 14px;
      font-size: 0.83rem; margin: 10px 0; color: #1e40af;
    }
    .help-tip.warning { background: #fff7ed; border-color: #f97316; color: #7c2d12; }
    .help-tip.success { background: #f0fdf4; border-color: #22c55e; color: #14532d; }
    .help-badge-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
    .help-badge {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 4px 10px; border-radius: 20px;
      font-size: 0.78rem; font-weight: 600;
    }
    .help-kbd {
      display: inline-block; background: var(--bg);
      border: 1px solid var(--border); border-radius: 5px;
      padding: 2px 7px; font-family: monospace; font-size: 0.8rem;
      box-shadow: 0 2px 0 var(--border);
    }
    .help-quick-ref {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 12px; margin-top: 8px;
    }
    .help-quick-card {
      background: var(--bg); border: 1px solid var(--border);
      border-radius: 10px; padding: 12px 14px;
      font-size: 0.83rem;
    }
    .help-quick-card .task { font-weight: 600; margin-bottom: 4px; }
    .help-quick-card .path { color: var(--primary); font-size: 0.78rem; }

    /* Debug Report Button & Modal */
    #btn-debug-report {
      position: fixed;
      bottom: 20px;
      left: 20px;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: linear-gradient(135deg, #ef4444, #dc2626);
      color: white;
      border: none;
      box-shadow: 0 4px 12px rgba(239,68,68,0.4);
      cursor: pointer;
      z-index: 999;
      display: none;
      align-items: center;
      justify-content: center;
      font-size: 1.3rem;
      transition: transform 0.2s, box-shadow 0.2s;
    }
    #btn-debug-report:hover {
      transform: scale(1.1);
      box-shadow: 0 6px 16px rgba(239,68,68,0.5);
    }
    #btn-debug-report .badge-count {
      position: absolute;
      top: -4px;
      right: -4px;
      background: #fbbf24;
      color: #1e293b;
      font-size: 0.65rem;
      font-weight: 700;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
.sched-legend { display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:middle;margin-right:4px; }
    #sched-table th { white-space:nowrap;font-size:0.72rem;text-align:center;padding:6px 4px; }
    #sched-table td { padding:3px;text-align:center;vertical-align:middle; }
    #sched-table td.device-cell { text-align:left;padding:6px 8px;font-size:0.76rem;position:sticky;left:0;background:#fff;z-index:2; }
    #sched-table thead th.device-cell { position:sticky;left:0;background:#f8fafc;z-index:3; }
    .sched-cell { display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:6px;font-size:0.7rem;font-weight:600;cursor:pointer;color:#fff;border:2px solid transparent;transition:transform 0.1s; }
    .sched-cell:hover { transform:scale(1.12); }
    .sched-cell.overdue { background:#ef4444; }
    .sched-cell.current { background:#f59e0b; }
    .sched-cell.future { background:#7c3aed; }
    .sched-cell.has-wo { background:#10b981; }
    .sched-cell.selected { border-color:#0f172a;box-shadow:0 0 0 2px #fff,0 0 0 4px #0f172a; }
    .sched-cell.empty { width:8px;height:8px;background:#e2e8f0;border-radius:50%;cursor:default; }
    .sched-cell.empty:hover { transform:none; }

    .schedule-review-panel {
      border: 1px solid #dbeafe;
      background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 55%, #ffffff 100%);
      border-radius: 16px;
      padding: 14px;
      margin: 8px 0 14px;
      box-shadow: 0 10px 28px rgba(37, 99, 235, 0.08);
    }
    .schedule-review-head {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: flex-start;
      margin-bottom: 10px;
    }
    .schedule-review-kicker {
      color: #1d4ed8;
      font-size: 0.76rem;
      font-weight: 900;
      letter-spacing: 0.04em;
      margin-bottom: 3px;
    }
    .schedule-review-head h3 {
      margin: 0;
      font-size: 1.05rem;
      font-weight: 950;
      color: #0f172a;
    }
    .schedule-review-head p {
      margin: 3px 0 0;
      color: #64748b;
      font-size: 0.8rem;
    }
    .schedule-review-stats {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: flex-end;
      min-width: 240px;
    }
    .schedule-review-stat {
      background: rgba(255,255,255,0.9);
      border: 1px solid #dbeafe;
      border-radius: 12px;
      padding: 7px 10px;
      min-width: 76px;
      text-align: center;
    }
    .schedule-review-stat strong {
      display: block;
      font-size: 1rem;
      line-height: 1;
      color: #1d4ed8;
      font-weight: 950;
    }
    .schedule-review-stat span {
      display: block;
      margin-top: 3px;
      font-size: 0.68rem;
      color: #64748b;
      font-weight: 750;
    }
    .schedule-review-filters .form-label {
      font-size: 0.72rem;
      font-weight: 800;
      color: #475569;
      margin-bottom: 3px;
    }
    .schedule-review-table-wrap {
      overflow-x: auto;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      background: #fff;
      margin-top: 10px;
    }
    .schedule-review-table {
      min-width: 980px;
      margin: 0;
    }
    .schedule-review-table th {
      font-size: 0.74rem;
      padding: 9px 10px;
      white-space: nowrap;
    }
    .schedule-review-table td {
      padding: 9px 10px;
      vertical-align: middle;
      font-size: 0.8rem;
    }
    .schedule-review-device-main { font-weight: 900; color: #0f172a; }
    .schedule-review-muted {
      margin-top: 2px;
      color: #64748b;
      font-size: 0.72rem;
      line-height: 1.35;
    }
    .schedule-review-tags,
    .schedule-review-actions {
      display: flex;
      gap: 5px;
      flex-wrap: wrap;
    }
    .schedule-review-tag {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      border-radius: 999px;
      padding: 3px 7px;
      font-size: 0.68rem;
      font-weight: 850;
      background: #f1f5f9;
      color: #475569;
      white-space: nowrap;
    }
    .schedule-review-tag.ok { background:#dcfce7;color:#15803d; }
    .schedule-review-tag.warn { background:#fef3c7;color:#b45309; }
    .schedule-review-tag.danger { background:#fee2e2;color:#b91c1c; }
    .schedule-review-empty {
      text-align: center;
      color: #94a3b8;
      padding: 22px 10px 12px;
      font-size: 0.84rem;
    }
    .schedule-review-empty i {
      display: block;
      font-size: 2rem;
      margin-bottom: 6px;
      opacity: 0.5;
    }
    @media (max-width: 768px) {
      .schedule-review-head {
        flex-direction: column;
        align-items: stretch;
      }
      .schedule-review-stats {
        min-width: 0;
        justify-content: flex-start;
      }
      .schedule-review-stat {
        min-width: 82px;
      }
      .schedule-review-table {
        min-width: 860px;
      }
    }

    /* ════════════════════════════════════════════════════════════════════
       📱 行動裝置優化 (Mobile RWD Enhancements)
       ──────────────────────────────────────────────────────────────────── */

    /* iOS Safari 防止 input focus 自動縮放（font-size 必須 ≥ 16px） */
    @media (max-width: 768px) {
      input, select, textarea, .form-control, .form-select {
        font-size: 16px !important;
      }
      .form-control-sm, .form-select-sm {
        font-size: 14px !important;
      }
    }

    /* ─── 768px 以下：平板與較大手機 ─────────────────────────────────────── */
    @media (max-width: 768px) {
      /* App header 縮減 */
      .header-content { padding: 10px 14px; }
      .app-header h1 { font-size: 1.1rem; gap: 8px; }
      .app-header h1 i { font-size: 1.3rem; }

      /* Tab nav：更緊湊、讓更多 tab 露出 */
      .nav-tabs { padding: 0 10px; gap: 0; }
      .tab-btn {
        padding: 10px 12px;
        font-size: 0.82rem;
      }

      /* Stats bar 縮邊距 */
      .stats-bar { padding: 12px 14px; gap: 10px; }
      .stat-chip {
        padding: 12px 14px;
        gap: 10px;
        min-width: 120px;
      }
      .stat-chip .icon {
        width: 38px; height: 38px;
        font-size: 1.1rem;
      }
      .stat-chip .num { font-size: 1.15rem; }
      .stat-chip .label { font-size: 0.72rem; }

      /* Section title */
      .section-title { font-size: 1rem; margin-bottom: 12px; }

      /* Card */
      .card { margin-bottom: 14px; border-radius: 14px; }
      .card-header { padding: 12px 14px; }
      .card-body { padding: 14px !important; }

      /* WO card 緊湊 */
      .wo-list { padding: 0 12px 16px; }
      .wo-card {
        padding: 14px 14px;
        margin-bottom: 10px;
        border-radius: 12px;
      }
      .wo-card-title { font-size: 0.92rem; line-height: 1.35; }
      .wo-card-meta {
        font-size: 0.72rem;
        gap: 8px;
        row-gap: 4px;
      }
      .wo-card-actions {
        gap: 4px;
      }
      .wo-card-actions .btn {
        padding: 5px 8px;
        font-size: 0.78rem;
      }

      /* Device grid 單欄 + 緊湊 */
      .device-grid {
        grid-template-columns: 1fr !important;
        padding: 0 12px 16px;
        gap: 12px;
      }

      /* Tab content 縮邊距 */
      .tab-content { padding: 14px 12px; }

      /* Search bar 全寬 */
      .search-bar { gap: 8px; margin-bottom: 14px; }
      .search-bar .form-control,
      .search-bar .form-select { min-width: 0; flex: 1 1 100%; }

      /* Modal 變得幾乎全螢幕 */
      .modal-overlay { padding: 0; align-items: flex-end; }
      .modal-content {
        max-width: 100%;
        max-height: 96vh;
        border-radius: 16px 16px 0 0;
        animation: slideUp 0.25s ease;
      }
      .modal-header {
        padding: 14px 16px;
        border-radius: 16px 16px 0 0;
      }
      .modal-title { font-size: 1.05rem; }
      .modal-body { padding: 14px 16px; }
      .modal-footer {
        padding: 12px 16px;
        flex-wrap: wrap;
        gap: 8px;
      }
      .modal-footer .btn { flex: 1 1 auto; min-width: 0; }

      /* Buttons 觸控大小（避免誤觸） */
      .btn:not(.btn-sm) {
        min-height: 42px;
        padding: 8px 14px;
      }
      .btn-sm { min-height: 32px; }

      /* Bootstrap row 在 col-md 已自動疊；確保 col-6 也適度緊密 */
      .row.g-2 > [class^="col-"] { padding-right: 4px; padding-left: 4px; }

      /* 表格在窄螢幕橫向滾動 */
      .modal-body table.table {
        font-size: 0.8rem !important;
      }
      .modal-body table.table th,
      .modal-body table.table td {
        padding: 8px 6px !important;
      }

      /* 浮動批次工具列 */
      #batch-wo-bar {
        padding: 8px 10px !important;
        font-size: 0.82rem !important;
        flex-wrap: wrap;
        gap: 6px !important;
      }
      #batch-wo-bar .btn { min-height: 36px; padding: 6px 10px; }

      /* 醫院當月保養統計卡片 */
      .hms-month-cell { padding: 8px !important; font-size: 0.82rem !important; }

      /* 保養行程表（schedule table）橫向滾動容器 */
      #sched-table-wrap, .sched-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }

      /* 行事曆 */
      #cal-grid .cal-day { min-height: 48px; padding: 4px 2px; font-size: 0.75rem; }
      #cal-month-label { font-size: 1rem !important; }

      /* 簽名區 */
      .sig-preview img { max-width: 100% !important; height: auto !important; }
      #sig-canvas { width: 100% !important; }
      #modal-signature .signature-modal-content,
      #modal-batch-sign .batch-sign-modal-content {
        width: 98vw !important;
      }
      #sig-container-wrap {
        height: clamp(320px, 54vh, 520px) !important;
      }
      #batch-sig-container {
        height: clamp(280px, 48vh, 430px) !important;
      }
      .sig-touch-hint {
        font-size: 0.74rem;
      }

      /* 設定頁的工具列 */
      #maint-batch-bar,
      #maint-batch-bar > * {
        font-size: 0.78rem !important;
      }
      #maint-batch-bar .btn { padding: 4px 8px !important; min-height: 30px !important; }

      /* 智慧分類 / 設備歸類 表格 */
      #sc-tbody td, #cd-tbody td {
        padding: 8px 6px !important;
        font-size: 0.78rem !important;
      }
      #sc-tbody td:first-child, #cd-tbody td:first-child { padding-left: 10px !important; }

      /* 機型維護組合 modal */
      #mt-config-items label { font-size: 0.85rem !important; padding: 8px !important; }
    }

    /* ─── 480px 以下：小型手機 ──────────────────────────────────────────── */
    @media (max-width: 480px) {
      /* Stats bar：取消水平捲動干擾 改 grid 2x */
      .stats-bar {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        padding: 10px;
        overflow-x: visible;
      }
      .stat-chip { min-width: 0; padding: 10px 12px; gap: 8px; }
      .stat-chip .icon { width: 32px; height: 32px; font-size: 0.95rem; }
      .stat-chip .num { font-size: 1rem; }
      .stat-chip .label { font-size: 0.68rem; line-height: 1.2; }

      /* Tab btn 再縮 */
      .tab-btn { padding: 9px 10px; font-size: 0.78rem; }

      /* App header 進一步壓縮 */
      .app-header h1 { font-size: 1rem; }
      .app-header h1 i { font-size: 1.2rem; }
      #user-info { font-size: 0.75rem !important; }

      /* WO 卡片 meta 改小 */
      .wo-card { padding: 12px; }
      .wo-card-meta { font-size: 0.7rem; }
      .wo-card-actions { gap: 3px; }

      /* tab-content 邊距再緊 */
      .tab-content { padding: 12px 10px; }
      .wo-list { padding: 0 10px 12px; }
      .device-grid { padding: 0 10px 12px; }

      /* 搜尋列堆疊 */
      .row.g-2 > .col-6 { flex: 0 0 100%; max-width: 100%; }

      /* Modal 全螢幕 + 從下方滑出 */
      .modal-content {
        border-radius: 14px 14px 0 0;
        max-height: 92vh;
      }
      .modal-header { padding: 12px 14px; }
      .modal-title { font-size: 1rem; }
      .modal-body { padding: 12px 14px; }

      /* Button 堆疊更明顯 */
      .modal-footer .btn {
        flex: 1 1 100%;
      }

      /* Schedule cell 縮 */
      .sched-cell { width: 22px; height: 22px; font-size: 0.62rem; }

      /* 設備卡 padding 壓縮 */
      .device-card-content,
      [class*="device-card"] {
        padding: 12px !important;
      }
    }

    /* ─── 設備卡（透過 grid 中的 .wo-card / device-grid 子元素）── */
    @media (max-width: 768px) {
      .device-grid > * {
        padding: 14px !important;
      }
      .device-grid > * .wo-card-title,
      .device-grid > * h6,
      .device-grid > * h5 {
        font-size: 0.92rem !important;
      }
    }

    /* ─── 觸控友善：橫向捲動加陰影暗示 ──────────────────────────────── */
    @media (max-width: 768px) {
      .stats-bar,
      .nav-tabs,
      .modal-body table.table {
        scroll-snap-type: x proximity;
      }
      .stat-chip { scroll-snap-align: start; }
    }

    /* ─── 大字模式 / 高對比偏好 ──────────────────────────────────────── */
    @media (prefers-reduced-motion: reduce) {
      * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
    }

    /* ════════════════════════════════════════════════════════════════════
       📱 Android 大手機 (S25+ 等 6.5"+ 螢幕) 額外調整
       目標：解決使用者回報「介面沒有很好」
       ──────────────────────────────────────────────────────────────────── */
    @media (max-width: 540px) {
      /* Tab nav：強制水平捲動，每個 tab 不換行、不重疊 */
      .nav-tabs {
        padding: 0 6px;
        gap: 2px;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
      }
      .nav-tabs::-webkit-scrollbar { display: none; }
      .tab-btn {
        padding: 8px 10px !important;
        font-size: 0.78rem !important;
        min-width: 0;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        scroll-snap-align: start;
      }
      .tab-btn i { margin-right: 4px; }

      /* Stats bar 用 grid，避免水平捲動 */
      .stats-bar {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px !important;
        padding: 10px !important;
        overflow-x: visible !important;
      }
      .stat-chip {
        min-width: 0 !important;
        padding: 10px 12px !important;
        gap: 8px !important;
      }
      .stat-chip .icon {
        width: 32px !important;
        height: 32px !important;
        font-size: 1rem !important;
      }
      .stat-chip .num { font-size: 1.05rem !important; }
      .stat-chip .label { font-size: 0.7rem !important; line-height: 1.2 !important; }

      /* WO list 卡片更緊湊 */
      .wo-card {
        padding: 12px !important;
        margin-bottom: 8px !important;
      }
      .wo-card-header { gap: 8px !important; margin-bottom: 6px !important; }
      .wo-card-title { font-size: 0.92rem !important; line-height: 1.3 !important; }
      .wo-card-meta {
        font-size: 0.72rem !important;
        gap: 6px !important;
        row-gap: 3px !important;
      }
      .wo-card-actions { gap: 4px !important; flex-wrap: wrap; }
      .wo-card-actions .btn {
        padding: 4px 8px !important;
        font-size: 0.7rem !important;
        min-height: 30px !important;
      }

      /* tab-content 整體邊距減少 */
      .tab-content { padding: 12px 10px !important; }

      /* 搜尋列 row 全寬 */
      .row.g-2 > [class^="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 6px;
      }

      /* 設備保固 quick filter 按鈕 wrap 後不要太大 */
      #dev-warranty-summary button {
        font-size: 0.72rem !important;
        padding: 4px 8px !important;
        min-height: 30px !important;
      }

      /* 工單詳情 modal 重點區塊壓縮 */
      #modal-wo-detail .modal-body { padding: 12px !important; }
      #modal-wo-detail .check-item {
        padding: 8px !important;
        gap: 8px !important;
      }
      #modal-wo-detail .check-item-title {
        font-size: 0.85rem !important;
      }

      /* 簽名按鈕區改一鍵一行（避免 3 欄擠到看不見） */
      #modal-wo-detail .row.g-2 > .col-md-4 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
      }

      /* 醫院當月保養統計 cell */
      .hms-month-cell {
        padding: 6px !important;
        font-size: 0.75rem !important;
      }

      /* 行事曆日格 */
      .cal-day {
        min-height: 42px !important;
        padding: 3px !important;
        font-size: 0.72rem !important;
      }
      .cal-day-num { font-size: 0.78rem !important; }

      /* 模態關閉按鈕加大觸控區 */
      .modal-close {
        min-width: 38px !important;
        min-height: 38px !important;
      }

      /* Toast/通知放更上面避開底部按鈕 */
      .toast {
        bottom: auto !important;
        top: 70px !important;
      }

      /* Bootstrap form-control 高度合理 */
      .form-control:not(.form-control-sm),
      .form-select:not(.form-select-sm) {
        padding: 9px 12px !important;
        font-size: 16px !important;  /* iOS 防 zoom */
      }
    }

    /* ─── 防止 modal 在小螢幕點背景關閉時誤觸 ─────────────────────── */
    @media (max-width: 540px) {
      .modal-overlay { -webkit-overflow-scrolling: touch; }
      .modal-content { will-change: transform; }
    }

    /* PDF 容器不要在小螢幕被縮放，因為 html2canvas 需要原寸渲染 */

    /* ─── 手機版保養行程表：表格隱藏、改顯示卡片直式 ───────────────── */
    @media (max-width: 768px) {
      #sched-table-wrap { display: none !important; }
      #sched-card-list { display: block !important; }
    }
    @media (min-width: 769px) {
      #sched-card-list { display: none !important; }
    }
    .sched-card {
      background: white;
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 12px 14px;
      margin-bottom: 10px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    }
    .sched-card-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 8px;
      margin-bottom: 8px;
      padding-bottom: 8px;
      border-bottom: 1px dashed #e2e8f0;
    }
    .sched-card-title {
      font-weight: 700;
      font-size: 0.92rem;
      color: #0f172a;
      word-break: break-all;
    }
    .sched-card-meta {
      font-size: 0.72rem;
      color: var(--text-light);
      margin-top: 2px;
    }
    .sched-card-cycle {
      flex-shrink: 0;
      background: #f3e8ff;
      color: #7c3aed;
      font-size: 0.7rem;
      padding: 2px 8px;
      border-radius: 12px;
      font-weight: 600;
      white-space: nowrap;
    }
    .sched-card-months {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
    }
    .sched-card-month {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      padding: 4px 10px;
      border-radius: 14px;
      font-size: 0.78rem;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
      user-select: none;
    }
    .sched-card-month.has-wo { background: #dcfce7; color: #15803d; }
    .sched-card-month.overdue { background: #fee2e2; color: #b91c1c; }
    .sched-card-month.current { background: #fef9c3; color: #854d0e; }
    .sched-card-month.future { background: #dbeafe; color: #1d4ed8; }
    .sched-card-month.selected { box-shadow: 0 0 0 2px #0f172a inset; }
    .sched-card-hosp-header {
      font-weight: 700;
      color: #1e293b;
      background: #f1f5f9;
      padding: 8px 12px;
      border-radius: 8px;
      margin: 12px 0 8px;
      font-size: 0.88rem;
    }


/* ============================================================
   PDF Markup v2 (鑫霸 / Medigiant) — 2026 redesign
   Used by renderWorkOrderPdfMarkup() in app.js.
   All classes prefixed pdf2- to avoid conflicts with old pdf-* styles.
   ============================================================ */
.pdf2-container{
  width:794px;min-height:1100px;
  background:#fff;color:#0f172a;
  font-family:'Noto Sans TC','PingFang TC',-apple-system,sans-serif;
  font-size:13pt;line-height:1.4;
  padding:19px 18px 16px;
  -webkit-print-color-adjust:exact;print-color-adjust:exact;
}
.pdf2-head{
  display:grid;grid-template-columns:46px 1fr auto;gap:8px;align-items:center;
  padding-bottom:9px;border-bottom:2px solid #1e3a8a;
}
.pdf2-logo{width:46px;height:46px;border-radius:9px;object-fit:contain;display:block;}
.pdf2-brand-en{font-size:10.8pt;letter-spacing:.1em;color:#1e3a8a;font-weight:800;}
.pdf2-brand-zh{font-size:16.2pt;font-weight:800;color:#0f172a;margin-top:0;}
.pdf2-doc-meta{font-size:10.8pt;color:#475569;text-align:right;line-height:1.34;}
.pdf2-doc-meta .pdf2-id{font-family:ui-monospace,Menlo,monospace;font-size:14pt;font-weight:800;color:#1e3a8a;}

.pdf2-doc-title{
  margin:10px 0 8px;padding:9px 11px;border-radius:8px;
  background:linear-gradient(95deg,#1e3a8a 0%,#2563eb 100%);color:#fff;
  display:flex;align-items:center;justify-content:space-between;
}
.pdf2-doc-title h1{margin:0;font-size:17.2pt;font-weight:800;letter-spacing:.01em;}
.pdf2-status-badge{
  font-size:11pt;font-weight:800;padding:2px 10px;border-radius:20px;
  background:#fff;color:#1e3a8a;
}

.pdf2-section-h{
  display:flex;align-items:center;gap:8px;
  margin:11px 0 7px;font-size:14.4pt;font-weight:800;color:#1e293b;
}
.pdf2-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:21px;height:21px;border-radius:6px;background:#1e3a8a;color:#fff;
  font-size:10.8pt;font-weight:800;
}
.pdf2-pri-badge{
  margin-left:auto;font-size:10.8pt;font-weight:800;padding:1px 8px;border-radius:12px;
}

.pdf2-info-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  border:1px solid #e2e8f0;border-radius:8px;overflow:hidden;
}
.pdf2-row{display:flex;border-bottom:1px solid #f1f5f9;}
.pdf2-row:nth-child(odd){border-right:1px solid #f1f5f9;}
.pdf2-row:last-child,.pdf2-row:nth-last-child(2){border-bottom:none;}
.pdf2-lbl{
  flex:0 0 80px;padding:6px 6px;background:#f8fafc;
  font-size:10.9pt;color:#64748b;font-weight:700;
}
.pdf2-val{padding:6px 6px;font-size:12.6pt;color:#0f172a;font-weight:700;flex:1;word-break:break-all;line-height:1.38;}
.pdf2-val.mono{font-family:ui-monospace,Menlo,monospace;}

.pdf2-cat-block{margin-bottom:6px;}
.pdf2-cat-h{
  display:flex;align-items:center;gap:6px;
  padding:5px 7px;border-radius:6px;
  font-size:12pt;font-weight:800;margin-bottom:3px;
}
.pdf2-dot{width:5px;height:5px;border-radius:50%;background:currentColor;}
.pdf2-cat-清潔{background:#e0f2fe;color:#0369a1;}
.pdf2-cat-檢測{background:#ede9fe;color:#6d28d9;}
.pdf2-cat-保養{background:#dcfce7;color:#15803d;}
.pdf2-cat-記錄{background:#fef3c7;color:#b45309;}
.pdf2-cat-其他{background:#f1f5f9;color:#475569;}

.pdf2-check-row{
  display:grid;grid-template-columns:20px minmax(0,1.42fr) 52px minmax(0,.58fr);gap:4px;align-items:center;
  padding:4px 5px;border-bottom:1px dashed #e2e8f0;font-size:12.3pt;line-height:1.38;
}
.pdf2-check-row:last-child{border-bottom:none;}
.pdf2-box{
  width:16px;height:16px;border:1.5px solid #cbd5e1;border-radius:4px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:12.8pt;font-weight:800;color:#fff;background:#fff;
}
.pdf2-check-row.done .pdf2-box{background:#16a34a;border-color:#16a34a;}
.pdf2-item-text{color:#0f172a;}
.pdf2-item-text.skip{color:#94a3b8;}
.pdf2-result{
  font-size:10.7pt;font-weight:800;text-align:center;padding:1px 0;border-radius:10px;
}
.pdf2-result.pass{background:#dcfce7;color:#15803d;}
.pdf2-result.na{background:#f1f5f9;color:#94a3b8;}
.pdf2-note{font-size:10.7pt;color:#64748b;overflow-wrap:anywhere;line-height:1.32;}

.pdf2-notes-box{
  border:1px solid #e2e8f0;border-radius:8px;background:#f8fafc;
  padding:10px 8px;font-size:12.4pt;color:#334155;min-height:38px;line-height:1.4;
}

.pdf2-sig-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px;}
.pdf2-sig-grid.has-biomed{grid-template-columns:repeat(3,1fr);gap:6px;}
.pdf2-sig-card{
  border:1px solid #e2e8f0;border-radius:8px;overflow:hidden;background:#fff;
}
.pdf2-sig-h{
  display:flex;justify-content:space-between;
  padding:7px 7px;background:#f8fafc;border-bottom:1px solid #e2e8f0;
  font-size:11.3pt;font-weight:800;color:#475569;
}
.pdf2-sig-area{
  height:86px;display:flex;align-items:center;justify-content:center;
  background:#fff;border-bottom:1px solid #f1f5f9;
}
.pdf2-sig-grid.has-biomed .pdf2-sig-h{padding:5px 5px;font-size:10pt;}
.pdf2-sig-grid.has-biomed .pdf2-sig-area{height:68px;}
.pdf2-sig-grid.has-biomed .pdf2-sig-area img{max-height:52px!important;max-width:96%!important;}
.pdf2-sig-grid.has-biomed .pdf2-sig-meta{padding:5px 5px;font-size:9.2pt;gap:4px;}
.pdf2-sig-meta{
  display:flex;justify-content:space-between;
  padding:6px 7px;font-size:10.6pt;color:#64748b;line-height:1.34;
}

.pdf2-foot{
  display:flex;justify-content:space-between;align-items:flex-end;
  margin-top:11px;padding-top:8px;border-top:1px solid #e2e8f0;
  font-size:9.8pt;color:#94a3b8;
}