* { 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);
      --success: #22c55e;
      --danger: #ef4444;
    }
    body { 
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 
      background: #f1f5f9;
      min-height: 100vh;
      padding: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .container {
      max-width: 500px;
      width: 100%;
      background: white;
      border-radius: 16px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.1);
      overflow: hidden;
    }
    .header {
      background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
      color: var(--on-primary);
      padding: 30px 24px;
      text-align: center;
    }
    .header h1 { font-size: 24px; font-weight: 600; }
    .header-logo { height: 40px; object-fit: contain; margin-bottom: 8px; }
    .header p { font-size: 14px; opacity: 0.85; margin-top: 4px; }
    
    .search-box {
      padding: 24px;
      border-bottom: 1px solid #e5e7eb;
    }
    .search-box input {
      width: 100%;
      padding: 16px;
      border: 2px solid #e5e7eb;
      border-radius: 12px;
      font-size: 18px;
      text-align: center;
      letter-spacing: 4px;
      text-transform: uppercase;
      outline: none;
      transition: border-color 0.2s;
    }
    .search-box input:focus {
      border-color: var(--primary);
    }
    .search-box input::placeholder {
      letter-spacing: normal;
      text-transform: none;
    }
    .search-hint {
      text-align: center;
      color: #9ca3af;
      font-size: 13px;
      margin-top: 10px;
    }
    
    .result {
      padding: 24px;
      display: none;
    }
    .result.show { display: block; }
    .result-card {
      background: #f8fafc;
      border-radius: 12px;
      padding: 20px;
    }
    .result-card.success {
      border: 2px solid var(--success);
      background: #f0fdf4;
    }
    .result-card.error {
      border: 2px solid var(--danger);
      background: #fef2f2;
    }
    .result-card h3 {
      font-size: 16px;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .result-card.success h3 { color: #166534; }
    .result-card.error h3 { color: #991b1b; }
    .info-row {
      display: flex;
      padding: 10px 0;
      border-bottom: 1px solid #e5e7eb;
    }
    .info-row:last-child { border-bottom: none; }
    .info-label { width: 90px; color: #6b7280; font-size: 14px; }
    .info-value { flex: 1; color: #1f2937; font-size: 14px; font-weight: 500; }
    .status-badge {
      display: inline-block;
      padding: 4px 12px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 500;
    }
    .status-badge.in { background: #dcfce7; color: #166534; }
    .status-badge.out { background: #f3f4f6; color: #6b7280; }
    
    .links {
      text-align: center;
      padding: 20px;
      display: flex;
      gap: 16px;
      justify-content: center;
    }
    .links a {
      color: var(--primary-deep);
      text-decoration: none;
      font-size: 14px;
      padding: 10px 20px;
    }
    .links a:hover { background: #f8fafc; border-radius: 8px; }

    @media (max-width: 480px) {
      body { padding: 10px; }
      .container { border-radius: 12px; }
      .header { padding: 22px 16px; }
      .header h1 { font-size: 20px; }
      .search-box { padding: 18px 16px; }
      .search-box input { font-size: 16px; padding: 14px; }
      .result { padding: 18px 16px; }
      .info-label { width: 72px; font-size: 13px; }
      .info-value { font-size: 13px; }
      .links { padding: 16px; gap: 10px; }
      .links a { padding: 10px 14px; font-size: 13px; }
    }