:root {
  --primary: #1a56db;
  --primary-dark: #1340a0;
  --primary-light: #e8effd;
  --success: #059669;
  --success-bg: #ecfdf5;
  --danger: #dc2626;
  --danger-bg: #fef2f2;
  --warning: #d97706;
  --warning-bg: #fffbeb;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-full: 9999px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.08), 0 2px 4px -1px rgba(0,0,0,.04);
  --shadow-lg: 0 10px 25px -3px rgba(0,0,0,.1), 0 4px 10px -2px rgba(0,0,0,.05);
  --transition: .2s ease;
}

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

body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  background:linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);
  min-height:100vh;
  color:var(--gray-900);
  line-height:1.6;
  display:flex;
  flex-direction:column;
}

/* Header */
.header{
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color:#fff;
  padding:32px 20px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.header::before{
  content:'';
  position:absolute;
  top:-50%;
  left:-50%;
  width:200%;
  height:200%;
  background:radial-gradient(circle at 30% 50%, rgba(255,255,255,.06) 0%, transparent 60%);
  pointer-events:none;
}
.header h1{font-size:28px;font-weight:700;letter-spacing:-.3px;position:relative}
.header p{font-size:15px;opacity:.85;margin-top:6px;position:relative}

/* Container */
.container{max-width:640px;margin:-20px auto 0;padding:0 16px;position:relative;z-index:1;flex:1;width:100%}

/* Search Card */
.search-card{
  background:#fff;
  border-radius:var(--radius);
  padding:28px 32px;
  box-shadow:var(--shadow-lg);
  margin-bottom:20px;
}
.search-card h2{
  font-size:16px;
  font-weight:600;
  color:var(--gray-700);
  margin-bottom:16px;
  text-align:center;
}
.form-group{
  display:flex;
  gap:10px;
  position:relative;
}
.form-group .input-wrap{
  flex:1;
  position:relative;
}
.form-group .input-wrap svg{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  width:18px;
  height:18px;
  color:var(--gray-400);
  pointer-events:none;
  transition:color var(--transition);
}
.form-group input{
  width:100%;
  padding:13px 16px 13px 42px;
  border:2px solid var(--gray-200);
  border-radius:var(--radius-sm);
  font-size:15px;
  outline:none;
  transition:border-color var(--transition), box-shadow var(--transition);
  background:var(--gray-50);
}
.form-group input:hover{border-color:var(--gray-300)}
.form-group input:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(26,86,219,.15);
  background:#fff;
}
.form-group input:focus ~ svg,
.form-group .input-wrap:focus-within svg{color:var(--primary)}
.form-group input::placeholder{color:var(--gray-400)}
.form-group input.error{border-color:var(--danger);box-shadow:0 0 0 3px rgba(220,38,38,.12)}

.form-group button{
  padding:13px 28px;
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color:#fff;
  border:none;
  border-radius:var(--radius-sm);
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  transition:transform var(--transition), box-shadow var(--transition), opacity var(--transition);
  white-space:nowrap;
  position:relative;
  overflow:hidden;
}
.form-group button:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(26,86,219,.35);
}
.form-group button:active{transform:translateY(0)}
.form-group button:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:2px;
}
.form-group button:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}

/* Error msg */
.error-msg{
  display:none;
  align-items:center;
  gap:8px;
  background:var(--danger-bg);
  color:var(--danger);
  padding:10px 14px;
  border-radius:var(--radius-sm);
  margin-top:12px;
  font-size:14px;
  font-weight:500;
  animation:slideDown .2s ease;
}
.error-msg.active{display:flex}
.error-msg svg{flex-shrink:0;width:16px;height:16px}

/* Loading skeleton */
.skeleton{
  display:none;
  background:#fff;
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  padding:24px;
  margin-bottom:20px;
  animation:fadeIn .2s ease;
}
.skeleton.active{display:block}
.skeleton-line{
  height:14px;
  border-radius:6px;
  background:linear-gradient(90deg, var(--gray-200) 25%, var(--gray-100) 50%, var(--gray-200) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s ease infinite;
  margin-bottom:12px;
}
.skeleton-line:last-child{margin-bottom:0}
.skeleton-line.w60{width:60%}
.skeleton-line.w40{width:40%}
.skeleton-line.w80{width:80%}
.skeleton-line.h32{height:32px;width:40%}
.skeleton-line.h24{height:24px;width:50%;margin-bottom:16px}

/* Not found alert */
.alert{
  display:none;
  align-items:flex-start;
  gap:10px;
  padding:16px 18px;
  border-radius:var(--radius);
  font-size:14px;
  line-height:1.5;
  margin-bottom:20px;
  animation:slideDown .25s ease;
}
.alert.active{display:flex}
.alert svg{flex-shrink:0;width:20px;height:20px;margin-top:1px}
.alert-warning{
  background:var(--warning-bg);
  color:#92400e;
  border:1px solid #fde68a;
}
.alert-warning svg{color:var(--warning)}
.alert-info{
  background:var(--primary-light);
  color:#1e40af;
  border:1px solid #bfdbfe;
}
.alert-info svg{color:var(--primary)}

/* Result card */
.result-card{
  display:none;
  background:#fff;
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  animation:slideUp .35s ease;
}
.result-card.active{display:block}

.result-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 24px;
  border-bottom:1px solid var(--gray-200);
  flex-wrap:wrap;
  gap:10px;
}
.result-header .title-group{display:flex;align-items:center;gap:10px}
.result-header .title-group h3{font-size:16px;font-weight:600;color:var(--gray-800)}

.badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 14px;
  border-radius:var(--radius-full);
  font-size:13px;
  font-weight:600;
  letter-spacing:.2px;
}
.badge svg{width:14px;height:14px}
.badge.active{background:var(--success-bg);color:var(--success)}
.badge.expired{background:var(--danger-bg);color:var(--danger)}
.badge.unknown{background:var(--gray-100);color:var(--gray-500)}

.result-body{padding:24px}

/* Product image */
.product-image{
  text-align:center;
  margin-bottom:20px;
  display:none;
}
.product-image.active{display:block}
.product-image img{
  max-width:140px;
  max-height:180px;
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-md);
}

/* Device info grid */
.device-info{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-bottom:20px;
}
.info-item{
  background:var(--gray-50);
  border-radius:var(--radius-sm);
  padding:12px 14px;
  border:1px solid var(--gray-100);
}
.info-item.full{grid-column:1/-1}
.info-item .label{
  font-size:11px;
  color:var(--gray-500);
  text-transform:uppercase;
  letter-spacing:.6px;
  font-weight:600;
  margin-bottom:3px;
}
.info-item .value{
  font-size:15px;
  color:var(--gray-800);
  font-weight:500;
  word-break:break-word;
}

/* Warranty section */
.warranty-section{
  background:linear-gradient(135deg, var(--gray-50) 0%, #fff 100%);
  border:1px solid var(--gray-200);
  border-radius:var(--radius);
  padding:20px;
  margin-top:4px;
}
.warranty-section .w-label{
  font-size:11px;
  color:var(--gray-500);
  text-transform:uppercase;
  letter-spacing:.6px;
  font-weight:600;
  margin-bottom:6px;
}
.warranty-section .w-value{
  font-size:22px;
  font-weight:700;
  letter-spacing:-.3px;
}
.warranty-section .w-value.active{color:var(--success)}
.warranty-section .w-value.expired{color:var(--danger)}
.warranty-section .w-value.unknown{color:var(--gray-500)}
.warranty-section .w-meta{
  margin-top:8px;
  font-size:14px;
  color:var(--gray-500);
}
/* Warranty progress bar */
.warranty-progress{
  margin-top:12px;
  height:6px;
  background:var(--gray-200);
  border-radius:3px;
  overflow:hidden;
}
.warranty-progress .bar{
  height:100%;
  border-radius:3px;
  transition:width .6s ease;
}
.warranty-progress .bar.active{background:linear-gradient(90deg, var(--success), #34d399)}
.warranty-progress .bar.expired{background:var(--gray-300)}

/* Footer */
.footer{text-align:center;padding:32px 16px 24px;color:var(--gray-400);font-size:13px}

/* Animations */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

/* Responsive */
@media(max-width:600px){
  .header{padding:28px 16px}
  .header h1{font-size:22px}
  .container{margin-top:-16px}
  .search-card{padding:20px}
  .form-group{flex-direction:column}
  .form-group button{width:100%;padding:13px}
  .device-info{grid-template-columns:1fr;gap:10px}
  .result-header{padding:16px 18px}
  .result-body{padding:18px}
}