* { margin: 0; padding: 0; box-sizing: border-box; }
    :root { --primary: #3b82f6; --secondary: #1d4ed8; --on-primary: #ffffff; --primary-deep: color-mix(in srgb, var(--primary) 70%, #111827); }
    body { 
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 
      background: #f5f7fa;
      min-height: 100vh;
    }
    
    .header {
      background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
      color: var(--on-primary);
      padding: 16px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: sticky;
      top: 0;
      z-index: 100;
    }
    .header h1 { font-size: 18px; }
    .header-left { display: flex; align-items: center; gap: 10px; }
    .header-logo { height: 32px; object-fit: contain; }
    .header-links { display: flex; gap: 12px; }
    .header-links a { color: var(--on-primary); text-decoration: none; font-size: 14px; opacity: 0.9; }
    
    .tabs {
      background: white;
      display: flex;
      border-bottom: 1px solid #e5e7eb;
      position: sticky;
      top: 54px;
      z-index: 99;
    }
    .tab {
      flex: 1;
      padding: 14px;
      text-align: center;
      background: none;
      border: none;
      font-size: 15px;
      color: #6b7280;
      cursor: pointer;
      border-bottom: 3px solid transparent;
    }
    .tab.active { color: var(--primary-deep); border-bottom-color: var(--primary); font-weight: 600; }
    
    .toolbar {
      background: white;
      padding: 12px 16px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      border-bottom: 1px solid #e5e7eb;
    }
    .toolbar input, .toolbar select {
      padding: 10px 12px;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      font-size: 14px;
    }
    .toolbar input { flex: 1; min-width: 120px; }
    .toolbar select { min-width: 100px; }
    .toolbar button {
      padding: 10px 16px;
      border: none;
      border-radius: 8px;
      font-size: 14px;
      cursor: pointer;
    }
    .btn-primary { background: var(--primary); color: var(--on-primary); }
    .btn-secondary { background: #f3f4f6; color: #374151; }
    .btn-success { background: #22c55e; color: white; }
    
    .stats-bar {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      padding: 16px;
      background: white;
      margin-bottom: 10px;
    }
    .stat-item {
      text-align: center;
      padding: 12px;
      background: #f8fafc;
      border-radius: 10px;
    }
    .stat-item .num { font-size: 24px; font-weight: 700; color: var(--primary-deep); }
    .stat-item .label { font-size: 12px; color: #6b7280; margin-top: 4px; }
    
    .visitor-list { padding: 12px; }
    
    .visitor-card {
      background: white;
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 10px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .visitor-card .avatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: color-mix(in srgb, var(--primary) 12%, white);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      color: var(--primary-deep);
      flex-shrink: 0;
      overflow: hidden;
    }
    .visitor-card .avatar img { width: 100%; height: 100%; object-fit: cover; }
    
    .visitor-card .info { flex: 1; min-width: 0; }
    .visitor-card .name { font-size: 16px; font-weight: 600; color: #1f2937; }
    .visitor-card .meta { font-size: 13px; color: #6b7280; margin-top: 2px; }
    .visitor-card .tags { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
    .visitor-card .tag {
      font-size: 11px;
      padding: 3px 8px;
      border-radius: 10px;
      background: color-mix(in srgb, var(--primary) 12%, white);
      color: var(--primary-deep);
    }
    .visitor-card .tag.green { background: #dcfce7; color: #16a34a; }
    
    .visitor-card .actions {
      display: flex;
      gap: 6px;
      flex-shrink: 0;
    }
    .visitor-card .actions button {
      padding: 8px 12px;
      border: none;
      border-radius: 6px;
      font-size: 12px;
      cursor: pointer;
    }
    .btn-detail { background: var(--primary); color: var(--on-primary); }
    .btn-checkout { background: #ef4444; color: white; }
    .btn-delete { background: #6b7280; color: white; }
    
    .empty { text-align: center; padding: 60px 20px; color: #9ca3af; }
    
    .modal-overlay {
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,0.5);
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 1000;
      padding: 20px;
    }
    .modal-overlay.show { display: flex; }
    
    .modal {
      background: white;
      border-radius: 16px;
      width: 100%;
      max-width: 400px;
      max-height: 90vh;
      overflow: auto;
    }
    .modal-header {
      padding: 16px 20px;
      border-bottom: 1px solid #eee;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .modal-header h2 { font-size: 18px; color: #333; }
    .modal-close { background: none; border: none; font-size: 24px; cursor: pointer; color: #999; }
    .modal-body { padding: 20px; }
    
    .detail-row {
      display: flex;
      padding: 10px 0;
      border-bottom: 1px solid #f0f0f0;
    }
    .detail-label { width: 80px; color: #999; font-size: 13px; }
    .detail-value { flex: 1; color: #333; font-size: 13px; word-break: break-all; }
    
    .stats-section { padding: 16px; display: none; }
    .stats-section.show { display: block; }
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      margin-bottom: 20px;
    }
    .stat-card {
      background: white;
      padding: 20px;
      border-radius: 12px;
      text-align: center;
    }
    .stat-card h4 { font-size: 13px; color: #6b7280; }
    .stat-card .value { font-size: 28px; font-weight: 700; color: var(--primary-deep); margin-top: 8px; }
    .stat-card.orange .value { color: #f59e0b; }
    
    .chart-card {
      background: white;
      padding: 16px;
      border-radius: 12px;
      margin-bottom: 16px;
    }
    .chart-card h4 { font-size: 14px; color: #333; margin-bottom: 12px; }
    
    .rank-table {
      background: white;
      border-radius: 12px;
      overflow: hidden;
    }
    .rank-table table { width: 100%; border-collapse: collapse; }
    .rank-table th { background: #f8fafc; padding: 12px; text-align: left; font-size: 13px; color: #6b7280; }
    .rank-table td { padding: 12px; border-top: 1px solid #f0f0f0; font-size: 14px; }
    .rank-table td:first-child { color: var(--primary-deep); font-weight: 600; }
    
    @media (max-width: 600px) {
      .header { padding: 12px 14px; flex-wrap: wrap; gap: 8px; position: static; }
      .header h1 { font-size: 15px; }
      .header-links { flex-wrap: wrap; gap: 8px; }
      .header-links a { font-size: 12px; }
      .tabs { top: auto; position: static; }
      .tab { padding: 12px 8px; font-size: 13px; }
      .stats-bar { grid-template-columns: repeat(2, 1fr); padding: 10px; gap: 8px; }
      .stat-item .num { font-size: 20px; }
      .toolbar { padding: 10px 12px; }
      .visitor-list { padding: 8px; }
      .visitor-card { flex-wrap: wrap; }
      .visitor-card .actions { width: 100%; justify-content: flex-end; margin-top: 10px; }
      .modal-overlay { padding: 14px; }
      .modal-body { padding: 16px; }
      .rank-table { overflow-x: auto; }
      .rank-table table { min-width: 320px; }
    }