* { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: 'Noto Sans JP', 'Inter', sans-serif; background: #f1f5f9; color: #1e293b; }
    
    /* Sidebar */
    .sidebar {
      position: fixed; left: 0; top: 0; width: 220px; height: 100vh;
      background: linear-gradient(180deg, #1e3a5f 0%, #0f172a 100%);
      color: white; padding: 16px 0; z-index: 100;
      display: flex; flex-direction: column;
    }
    .logo { padding: 0 16px 16px; border-bottom: 1px solid rgba(255,255,255,0.1); flex-shrink: 0; }
    .logo h1 { font-size: 18px; font-weight: 700; }
    .logo span { font-size: 10px; color: #94a3b8; }
    .nav-menu { margin-top: 10px; overflow-y: auto; flex: 1; padding-bottom: 20px; }
    .nav-menu::-webkit-scrollbar { width: 4px; }
    .nav-menu::-webkit-scrollbar-track { background: transparent; }
    .nav-menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 2px; }
    /* ===============================
       サイドナビ アイテム
    ================================ */
    a.nav-item,
    a.nav-item:link,
    a.nav-item:visited {
      display: flex !important;
      align-items: center !important;
      padding: 9px 16px !important;
      cursor: pointer !important;
      transition: all 0.2s !important;
      border-left: 3px solid transparent !important;
      text-decoration: none !important;
      color: white !important;
      background: transparent !important;
    }
    a.nav-item:hover { background: rgba(255,255,255,0.1) !important; }
    a.nav-item.active { background: rgba(245,158,11,0.2) !important; border-left-color: #f59e0b !important; }
    .nav-item span { margin-left: 10px; font-size: 13px; color: white !important; text-decoration: none !important; }
    .nav-icon { width: 18px; text-align: center; margin-left: 0 !important; font-size: 14px; }
    .nav-section { padding: 10px 16px 4px; font-size: 10px; color: #64748b; text-transform: uppercase; letter-spacing: 1px; }
    
    /* Main Content */
    .main { margin-left: 220px; min-height: 100vh; }
    .header {
      background: white; padding: 12px 24px; display: flex; justify-content: space-between;
      align-items: center; box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    .header h2 { font-size: 18px; font-weight: 600; }
    .header-right { display: flex; align-items: center; gap: 16px; }
    .user-info { display: flex; align-items: center; gap: 10px; }
    .avatar { width: 32px; height: 32px; border-radius: 50%; background: #f59e0b; display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 13px; }
    
    .content { padding: 20px 24px; }
    .page { display: none; }
    .page.active { display: block; }
    
    /* Cards */
    .card { background: white; border-radius: 10px; padding: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
    .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
    .card-title { font-size: 15px; font-weight: 600; }
    
    /* Stats Grid */
    .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
    .stat-card { background: white; border-radius: 10px; padding: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
    .stat-card.highlight { background: linear-gradient(135deg, #f59e0b, #d97706); color: white; }
    .stat-label { font-size: 12px; color: #64748b; margin-bottom: 6px; }
    .stat-card.highlight .stat-label { color: rgba(255,255,255,0.8); }
    .stat-value { font-size: 24px; font-weight: 700; }
    .stat-sub { font-size: 11px; color: #94a3b8; margin-top: 4px; }
    .stat-card.highlight .stat-sub { color: rgba(255,255,255,0.7); }
    
    /* Table */
    table { width: 100%; border-collapse: collapse; }
    th, td { padding: 12px; text-align: left; border-bottom: 1px solid #e2e8f0; }
    th { font-size: 12px; font-weight: 600; color: #64748b; text-transform: uppercase; background: #f8fafc; }
    td { font-size: 14px; }
    tr:hover { background: #f8fafc; }
    
    /* Buttons */
    .btn {
      display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px;
      border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer;
      border: none; transition: all 0.2s;
    }
    .btn-primary { background: #1e3a5f; color: white; }
    .btn-primary:hover { background: #2d4a6f; }
    .btn-secondary { background: #e2e8f0; color: #475569; }
    .btn-secondary:hover { background: #cbd5e1; }
    .btn-success { background: #10b981; color: white; }
    .btn-warning { background: #f59e0b; color: white; }
    .btn-danger { background: #ef4444; color: white; }
    .btn-sm { padding: 6px 12px; font-size: 12px; }
    
    /* Status Badge */
    .badge {
      display: inline-block; padding: 4px 10px; border-radius: 20px;
      font-size: 12px; font-weight: 500;
    }
    .badge-success { background: #d1fae5; color: #059669; }
    .badge-warning { background: #fef3c7; color: #d97706; }
    .badge-danger { background: #fee2e2; color: #dc2626; }
    .badge-info { background: #dbeafe; color: #2563eb; }
    .badge-purple { background: #ede9fe; color: #7c3aed; }
    
    /* Form */
    .form-group { margin-bottom: 16px; }
    .form-label { display: block; font-size: 13px; font-weight: 500; color: #475569; margin-bottom: 6px; }
    .form-input, .form-select {
      width: 100%; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 8px;
      font-size: 14px; transition: border-color 0.2s;
    }
    .form-input:focus, .form-select:focus { outline: none; border-color: #f59e0b; }
    
    /* Grid layouts */
    .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: 14px; }
    
    /* Weather buttons */
    .weather-btn {
      padding: 8px 16px; border: 2px solid #e2e8f0; border-radius: 8px;
      background: white; cursor: pointer; font-size: 18px; transition: all 0.2s;
    }
    .weather-btn.active { border-color: #f59e0b; background: #fffbeb; }
    
    /* Date navigation */
    .date-nav { display: flex; align-items: center; gap: 16px; }
    .date-nav h3 { font-size: 18px; font-weight: 600; min-width: 180px; text-align: center; }
    
    /* Time bar */
    .time-bar { display: flex; height: 40px; border-radius: 8px; overflow: hidden; margin: 16px 0; }
    .time-segment { display: flex; align-items: center; justify-content: center; color: white; font-size: 12px; font-weight: 500; }
    .time-segment.transit { background: #3b82f6; }
    .time-segment.work { background: #10b981; }
    .time-segment.break { background: #f59e0b; }
    .time-segment.empty { background: #e2e8f0; }
    
    /* Signature area */
    .signature-area {
      border: 2px dashed #cbd5e1; border-radius: 8px; height: 120px;
      display: flex; align-items: center; justify-content: center;
      background: #f8fafc; cursor: pointer; transition: all 0.2s;
    }
    .signature-area:hover { border-color: #f59e0b; }
    .signature-area.signed { border-style: solid; border-color: #10b981; background: white; }
    .signature-text { font-family: 'Brush Script MT', cursive; font-size: 36px; color: #1e3a5f; }
    
    /* Checkbox */
    .checkbox-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .checkbox-item { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 6px; cursor: pointer; }
    .checkbox-item:hover { background: #f1f5f9; }
    .checkbox-item input { width: 18px; height: 18px; accent-color: #10b981; }
    
    /* Vehicle card */
    .vehicle-card { background: white; border-radius: 12px; padding: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
    .vehicle-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
    .vehicle-title { font-size: 16px; font-weight: 600; }
    .vehicle-info { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 13px; }
    .vehicle-info dt { color: #64748b; }
    .vehicle-info dd { font-weight: 500; text-align: right; }
    .progress-bar { height: 6px; background: #e2e8f0; border-radius: 3px; overflow: hidden; margin-top: 8px; }
    .progress-fill { height: 100%; border-radius: 3px; }
    .progress-fill.success { background: #10b981; }
    .progress-fill.warning { background: #f59e0b; }
    .progress-fill.danger { background: #ef4444; }
    
    /* Chat */
    .chat-container { display: grid; grid-template-columns: 1fr 300px; gap: 20px; height: calc(100vh - 180px); }
    .chat-main { display: flex; flex-direction: column; }
    .chat-messages { flex: 1; overflow-y: auto; padding: 16px; background: #f8fafc; border-radius: 12px; }
    .chat-message { margin-bottom: 16px; max-width: 80%; }
    .chat-message.user { margin-left: auto; }
    .chat-bubble {
      padding: 12px 16px; border-radius: 12px; font-size: 14px; line-height: 1.5;
    }
    .chat-message.user .chat-bubble { background: #1e3a5f; color: white; border-bottom-right-radius: 4px; }
    .chat-message.ai .chat-bubble { background: white; border-bottom-left-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
    .chat-message.client .chat-bubble { background: #fef3c7; border-bottom-left-radius: 4px; }
    .chat-input-area { display: flex; gap: 12px; margin-top: 16px; }
    .chat-input { flex: 1; padding: 12px 16px; border: 1px solid #e2e8f0; border-radius: 24px; font-size: 14px; }
    .chat-send { width: 48px; height: 48px; border-radius: 50%; background: #f59e0b; border: none; color: white; font-size: 20px; cursor: pointer; }
    .chat-sidebar { background: white; border-radius: 12px; padding: 16px; }
    .chat-sidebar h4 { font-size: 14px; font-weight: 600; margin-bottom: 12px; color: #64748b; }
    .quick-action { display: block; width: 100%; padding: 10px 12px; margin-bottom: 8px; background: #f1f5f9; border: none; border-radius: 8px; text-align: left; font-size: 13px; cursor: pointer; transition: all 0.2s; }
    .quick-action:hover { background: #e2e8f0; }
    
    /* Customer Chat specific */
    .customer-list { max-height: 300px; overflow-y: auto; }
    .customer-item { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 8px; cursor: pointer; transition: all 0.2s; }
    .customer-item:hover { background: #f1f5f9; }
    .customer-item.active { background: #fef3c7; }
    .customer-avatar { width: 40px; height: 40px; border-radius: 50%; background: #f59e0b; display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 14px; }
    .customer-info { flex: 1; }
    .customer-name { font-weight: 600; font-size: 14px; }
    .customer-preview { font-size: 12px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .unread-badge { background: #ef4444; color: white; font-size: 11px; padding: 2px 8px; border-radius: 10px; }
    
    /* Survey Request Card */
    .survey-card { background: linear-gradient(135deg, #fef3c7, #fde68a); border-radius: 12px; padding: 16px; margin-bottom: 16px; }
    .survey-card h4 { font-size: 14px; font-weight: 600; margin-bottom: 8px; color: #92400e; }
    .survey-details { font-size: 13px; color: #78350f; }
    .survey-details p { margin-bottom: 4px; }
    
    /* Toggle Switch */
    .toggle-switch { position: relative; display: inline-block; width: 50px; height: 26px; }
    .toggle-switch input { opacity: 0; width: 0; height: 0; }
    .toggle-slider {
      position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
      background: #cbd5e1; border-radius: 26px; transition: 0.3s;
    }
    .toggle-slider:before {
      position: absolute; content: ""; height: 20px; width: 20px; left: 3px; bottom: 3px;
      background: white; border-radius: 50%; transition: 0.3s;
    }
    .toggle-switch input:checked + .toggle-slider { background: #10b981; }
    .toggle-switch input:checked + .toggle-slider:before { transform: translateX(24px); }
    
    /* Alarm Setting */
    .alarm-setting { display: flex; align-items: center; gap: 12px; padding: 12px; background: #f8fafc; border-radius: 8px; margin-bottom: 8px; }
    .alarm-time { font-size: 24px; font-weight: 600; }
    .alarm-label { font-size: 13px; color: #64748b; }
    
    /* Subscription cards */
    .plan-card { border: 2px solid #e2e8f0; border-radius: 12px; padding: 24px; text-align: center; transition: all 0.3s; }
    .plan-card:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
    .plan-card.featured { border-color: #f59e0b; background: linear-gradient(to bottom, #fffbeb, white); }
    .plan-name { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
    .plan-price { font-size: 32px; font-weight: 700; color: #1e3a5f; }
    .plan-price span { font-size: 14px; font-weight: 400; color: #64748b; }
    .plan-features { text-align: left; margin: 20px 0; }
    .plan-features li { padding: 8px 0; font-size: 14px; list-style: none; }
    .plan-features li:before { content: "✓"; color: #10b981; margin-right: 8px; font-weight: bold; }
    
    /* Map placeholder */
    .map-placeholder { background: linear-gradient(135deg, #e0f2fe, #bae6fd); border-radius: 12px; height: 300px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
    .map-placeholder:before { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M0 50 Q25 30 50 50 T100 50' stroke='%2393c5fd' fill='none' stroke-width='0.5'/%3E%3C/svg%3E") repeat; opacity: 0.5; }
    .map-marker { position: absolute; font-size: 24px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); }

    /* Version badge */
    .version-badge { background: #f59e0b; color: white; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 600; margin-left: 8px; }

    /* =============================================
       詳細ページ共通
    ============================================= */
    .detail-back-btn {
      display: inline-flex; align-items: center; gap: 6px;
      background: none; border: none; color: #1e3a5f; font-size: 14px;
      font-weight: 600; cursor: pointer; padding: 0; margin-bottom: 20px;
    }
    .detail-back-btn:hover { text-decoration: underline; }
    .detail-hero {
      background: linear-gradient(135deg,#1e3a5f,#2d5a8e);
      border-radius: 12px; padding: 28px; color: white; margin-bottom: 20px;
      display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
    }
    .detail-hero-avatar {
      width: 64px; height: 64px; border-radius: 50%;
      background: rgba(255,255,255,0.2); display: flex;
      align-items: center; justify-content: center;
      font-size: 26px; font-weight: 700; flex-shrink: 0;
    }
    .detail-hero-name { font-size: 22px; font-weight: 700; }
    .detail-hero-sub  { font-size: 14px; color: rgba(255,255,255,0.75); margin-top: 4px; }
    .detail-tabs {
      display: flex; gap: 0; border-bottom: 2px solid #e2e8f0; margin-bottom: 20px;
    }
    .detail-tab {
      padding: 10px 22px; background: none; border: none; cursor: pointer;
      font-size: 14px; font-weight: 500; color: #64748b;
      border-bottom: 3px solid transparent; margin-bottom: -2px;
      transition: color 0.2s, border-color 0.2s;
    }
    .detail-tab.active { color: #1e3a5f; border-bottom-color: #1e3a5f; font-weight: 600; }
    .detail-tab-content { display: none; }
    .detail-tab-content.active { display: block; }
    .info-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px;
    }
    .info-item { background: #f8fafc; border-radius: 8px; padding: 14px; }
    .info-label { font-size: 12px; color: #94a3b8; margin-bottom: 4px; }
    .info-value { font-size: 15px; font-weight: 600; color: #1e293b; }
    /* 勤怠管理 */
    .attendance-punch {
      display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 28px;
    }
    .punch-btn {
      display: flex; flex-direction: column; align-items: center; gap: 8px;
      padding: 24px 36px; border: none; border-radius: 16px;
      cursor: pointer; font-size: 15px; font-weight: 700; transition: transform 0.15s, box-shadow 0.15s;
    }
    .punch-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.15); }
    .punch-btn-in  { background: linear-gradient(135deg,#10b981,#059669); color: white; }
    .punch-btn-out { background: linear-gradient(135deg,#ef4444,#dc2626); color: white; }
    .punch-btn-icon { font-size: 32px; }
    .punch-status-card {
      background: white; border-radius: 12px; padding: 20px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.08); text-align: center; margin-bottom: 24px;
    }
    .punch-clock { font-size: 42px; font-weight: 700; color: #1e3a5f; letter-spacing: 2px; }
    .punch-date  { font-size: 14px; color: #64748b; margin-top: 4px; }
    /* 車両カード */
    .vehicle-detail-grid {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 16px; margin-bottom: 20px;
    }
    .vehicle-card-detail {
      background: white; border-radius: 12px; padding: 20px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.08); border-left: 4px solid #e2e8f0;
      cursor: pointer; transition: box-shadow 0.2s;
    }
    .vehicle-card-detail:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
    .vehicle-card-detail.ok     { border-left-color: #10b981; }
    .vehicle-card-detail.warn   { border-left-color: #f59e0b; }
    .vehicle-card-detail.danger { border-left-color: #ef4444; }
    .vehicle-name { font-size: 15px; font-weight: 700; color: #1e293b; margin-bottom: 6px; }
    .vehicle-meta { font-size: 13px; color: #64748b; margin-bottom: 4px; }
    .expiry-badge {
      display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; margin-top: 8px;
    }
    .expiry-badge.ok     { background: #d1fae5; color: #065f46; }
    .expiry-badge.warn   { background: #fef3c7; color: #92400e; }
    .expiry-badge.danger { background: #fee2e2; color: #991b1b; }

    /* =============================================
       電子伝票
    ============================================= */
    .slip-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 16px; margin-bottom: 24px;
    }
    .slip-card {
      background: white; border-radius: 12px; padding: 20px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.08);
      border-left: 4px solid #e2e8f0; transition: box-shadow 0.2s;
    }
    .slip-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
    .slip-card.signed   { border-left-color: #10b981; }
    .slip-card.unsigned { border-left-color: #f59e0b; }
    .slip-card.draft    { border-left-color: #94a3b8; }
    .slip-num  { font-size: 12px; color: #94a3b8; margin-bottom: 4px; }
    .slip-site { font-size: 15px; font-weight: 700; color: #1e293b; margin-bottom: 6px; }
    .slip-meta { font-size: 13px; color: #64748b; margin-bottom: 4px; }
    .slip-status-badge {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600;
    }
    .slip-status-badge.signed   { background: #d1fae5; color: #065f46; }
    .slip-status-badge.unsigned { background: #fef3c7; color: #92400e; }
    .slip-status-badge.draft    { background: #f1f5f9; color: #64748b; }
    .sign-canvas-wrap {
      border: 2px solid #e2e8f0; border-radius: 10px;
      background: #f8fafc; position: relative; overflow: hidden;
    }
    #sign-canvas { display: block; cursor: crosshair; touch-action: none; }
    #print-preview {
      display: none; position: fixed; inset: 0; z-index: 1000;
      background: rgba(0,0,0,0.7); overflow-y: auto; padding: 40px 20px;
    }
    .print-sheet {
      background: white; width: 100%; max-width: 680px;
      margin: 0 auto; padding: 48px 52px;
      border-radius: 4px; box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    }
    .print-header { text-align: center; margin-bottom: 32px; border-bottom: 2px solid #1e3a5f; padding-bottom: 20px; }
    .print-company { font-size: 13px; color: #64748b; margin-bottom: 6px; }
    .print-title { font-size: 24px; font-weight: 700; color: #1e293b; }
    .print-num { font-size: 12px; color: #94a3b8; margin-top: 4px; }
    .print-section { margin-bottom: 24px; }
    .print-section-title {
      font-size: 12px; font-weight: 600; color: #1e3a5f;
      letter-spacing: 1px; border-bottom: 1px solid #e2e8f0;
      padding-bottom: 6px; margin-bottom: 12px;
    }
    .print-row { display: grid; grid-template-columns: 140px 1fr; gap: 8px; margin-bottom: 8px; font-size: 14px; }
    .print-label { color: #64748b; }
    .print-value { font-weight: 500; color: #1e293b; }
    .print-sign-area {
      border: 1px solid #e2e8f0; border-radius: 8px; padding: 16px;
      display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
    }
    .print-sign-box { text-align: center; }
    .print-sign-label { font-size: 12px; color: #64748b; margin-bottom: 8px; }
    .print-sign-img { width: 100%; height: 80px; border-bottom: 1px solid #cbd5e1; display: flex; align-items: center; justify-content: center; }
    .print-actions { display: flex; gap: 12px; justify-content: center; margin-bottom: 24px; flex-wrap: wrap; }
    @media print {
      #print-preview { position: static; background: none; padding: 0; }
      .print-actions { display: none; }
      .print-sheet { box-shadow: none; max-width: 100%; }
    }

    /* =============================================
       オペレーター管理
    ============================================= */
    .operator-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 16px;
      margin-bottom: 24px;
    }
    .operator-card {
      background: white;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.08);
      border-left: 4px solid #e2e8f0;
      transition: box-shadow 0.2s;
    }
    .operator-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
    .operator-card.status-active { border-left-color: #10b981; }
    .operator-card.status-working { border-left-color: #f59e0b; }
    .operator-card.status-off { border-left-color: #94a3b8; }
    .operator-card-header {
      display: flex; align-items: center; gap: 14px; margin-bottom: 14px;
    }
    .operator-avatar {
      width: 48px; height: 48px; border-radius: 50%;
      background: linear-gradient(135deg, #1e3a5f, #3b82f6);
      display: flex; align-items: center; justify-content: center;
      color: white; font-size: 18px; font-weight: 700; flex-shrink: 0;
    }
    .operator-name { font-size: 16px; font-weight: 600; color: #1e293b; }
    .operator-qual { font-size: 12px; color: #64748b; margin-top: 2px; }
    .operator-status-badge {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600;
    }
    .status-active .operator-status-badge { background: #d1fae5; color: #065f46; }
    .status-working .operator-status-badge { background: #fef3c7; color: #92400e; }
    .status-off .operator-status-badge { background: #f1f5f9; color: #64748b; }
    .operator-info-row {
      display: flex; align-items: center; gap: 8px;
      font-size: 13px; color: #475569; margin-bottom: 6px;
    }
    .operator-assign-box {
      background: #f8fafc; border-radius: 8px; padding: 10px 12px;
      margin-top: 12px; font-size: 13px;
    }
    .operator-assign-box .assign-label { font-size: 11px; color: #94a3b8; margin-bottom: 4px; }
    .operator-assign-box .assign-value { font-weight: 600; color: #1e293b; }
    .operator-card-actions {
      display: flex; gap: 8px; margin-top: 14px;
    }

    /* オペレータータブ */
    .op-tab {
      padding: 10px 20px; background: none; border: none; cursor: pointer;
      font-size: 14px; font-weight: 500; color: #64748b;
      border-bottom: 3px solid transparent; margin-bottom: -2px;
      transition: color 0.2s, border-color 0.2s;
    }
    .op-tab.active { color: #1e3a5f; border-bottom-color: #1e3a5f; font-weight: 600; }
    .op-tab:hover:not(.active) { color: #334155; }

    /* 日報テーブル */
    .report-status-badge {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600;
    }
    .report-status-badge.pending { background: #fef3c7; color: #92400e; }
    .report-status-badge.approved { background: #d1fae5; color: #065f46; }
    .report-status-badge.rejected { background: #fee2e2; color: #991b1b; }

    /* 日報モーダル写真プレビュー */
    .photo-upload-area {
      border: 2px dashed #cbd5e1; border-radius: 10px;
      padding: 24px; text-align: center; cursor: pointer;
      transition: border-color 0.2s, background 0.2s;
    }
    .photo-upload-area:hover { border-color: #1e3a5f; background: #f8fafc; }
    .photo-preview-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px;
    }
    .photo-preview-item {
      aspect-ratio: 1; border-radius: 8px; overflow: hidden;
      background: #e2e8f0; display: flex; align-items: center; justify-content: center;
      font-size: 24px; position: relative;
    }
    .photo-preview-item img { width: 100%; height: 100%; object-fit: cover; }
    .photo-preview-remove {
      position: absolute; top: 4px; right: 4px;
      background: rgba(0,0,0,0.5); color: white; border: none;
      border-radius: 50%; width: 20px; height: 20px; cursor: pointer;
      font-size: 12px; display: flex; align-items: center; justify-content: center;
    }

    /* =============================================
       ハンバーガーボタン
    ============================================= */
    .hamburger-btn {
      display: none;
      position: fixed;
      top: 14px;
      left: 14px;
      z-index: 200;
      width: 42px;
      height: 42px;
      background: #1e3a5f;
      border: none;
      border-radius: 10px;
      cursor: pointer;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 5px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.25);
      transition: background 0.2s;
    }
    .hamburger-btn:hover { background: #2d4a6f; }
    .hamburger-btn span {
      display: block;
      width: 20px;
      height: 2px;
      background: white;
      border-radius: 2px;
      transition: all 0.3s;
      transform-origin: center;
    }
    /* 開いているときバツ印 */
    .hamburger-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .hamburger-btn.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
    .hamburger-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* サイドバーオーバーレイ */
    .sidebar-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.45);
      z-index: 99;
      backdrop-filter: blur(2px);
    }
    .sidebar-overlay.show { display: block; }

    /* サイドバー共通トランジション */
    .sidebar {
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* =============================================
       Responsive
    ============================================= */

    /* ─── 大画面（1400px以上）─── */
    @media (min-width: 1400px) {
      .sidebar { width: 240px; }
      .main { margin-left: 240px; }
      .content { padding: 24px 30px; }
      .stats-grid { gap: 20px; }
      .stat-value { font-size: 28px; }
    }

    /* ─── 13インチラップトップ（1024px〜1399px）─── */
    @media (max-width: 1399px) and (min-width: 1025px) {
      .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
      .grid-3 { grid-template-columns: repeat(2, 1fr); }
      .grid-4 { grid-template-columns: repeat(2, 1fr); }
      .content { padding: 16px 20px; }
      table { font-size: 13px; }
      th, td { padding: 10px 10px; }
    }

    /* ─── タブレット横（1024px以下）─── */
    @media (max-width: 1024px) {
      .hamburger-btn { display: flex; }
      .sidebar {
        transform: translateX(-100%);
        z-index: 150;
        box-shadow: 4px 0 20px rgba(0,0,0,0.3);
      }
      .sidebar.open { transform: translateX(0); }
      .main { margin-left: 0 !important; }
      .header { padding-left: 68px; }
      .stats-grid { grid-template-columns: repeat(2, 1fr); }
      .content { padding: 16px 16px; }
    }

    /* ─── タブレット縦（768px以下）─── */
    @media (max-width: 768px) {
      .stats-grid { grid-template-columns: repeat(2, 1fr); }
      .grid-2 { grid-template-columns: 1fr; }
      .grid-3 { grid-template-columns: 1fr; }
      .grid-4 { grid-template-columns: repeat(2, 1fr); }
      .chat-container { grid-template-columns: 1fr; }
      .header { padding: 12px 16px 12px 68px; }
      .header h2 { font-size: 16px; }
      .content { padding: 16px 12px; }

      /* オーダーテーブルは横スクロール */
      #order-table { font-size: 12px; }
      #order-table th, #order-table td { padding: 8px 6px; }
      .card { padding: 14px; overflow-x: auto; }

      /* 詳細モーダルをフル幅に */
      #modal-order-detail > div { width: 96vw !important; padding: 18px !important; }
      #modal-order-new > div,
      #modal-quote > div,
      #modal-customer-new > div,
      #modal-status > div { width: 96vw !important; padding: 18px !important; }

      /* ダッシュボードKPI 2列 */
      #dashboard > div:first-child {
        grid-template-columns: repeat(2, 1fr) !important;
      }
    }

    /* ─── スマホ（480px以下）─── */
    @media (max-width: 480px) {
      .stats-grid { grid-template-columns: 1fr; }
      .grid-4 { grid-template-columns: 1fr; }
      #dashboard > div:first-child {
        grid-template-columns: 1fr 1fr !important;
      }
      .btn { padding: 7px 10px; font-size: 13px; }
      .btn-sm { padding: 5px 8px; font-size: 11px; }
    }