/* white_full.html styles */
.card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }

.wb-card2 {
  background: var(--bg-card); border-radius: 10px; padding: 16px 18px;
  display: flex; align-items: center; gap: 14px;
  border: 1px solid var(--border); box-shadow: 0 1px 3px rgba(0,0,0,.04);
  transition: all .22s ease; position: relative; overflow: hidden;
}
.wb-card2:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0,0,0,.08);
  border-color: var(--primary);
}
.wb-card2[data-type="white"]:hover { border-color: var(--primary); }
.wb-card2[data-type="black"]:hover { border-color: var(--accent); }

.wb-strip {
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--primary), #3b82f6);
  border-radius: 10px 0 0 10px;
}
.wb-card2[data-type="black"] .wb-strip {
  background: linear-gradient(180deg, var(--accent), #ef4444);
}

.wb-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), #5b8def);
  color: #fff; font-size: 17px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; letter-spacing: 0;
}
.wb-card2[data-type="black"] .wb-avatar {
  background: linear-gradient(135deg, var(--accent), #ef4444);
}

.wb-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }

.wb-plate2 {
  font-size: 17px; font-weight: 700; color: var(--primary);
  letter-spacing: 1.5px; display: flex; align-items: center; gap: 8px;
}
.wb-card2[data-type="black"] .wb-plate2 { color: var(--accent); }

.wb-badge {
  font-size: 10px; padding: 2px 8px; border-radius: 10px; font-weight: 600;
  letter-spacing: .5px; white-space: nowrap;
}
.wb-date-ok { background: #dcfce7; color: #166534; }
.wb-date-soon { background: #fef3c7; color: #92400e; }
.wb-date-expired { background: #fee2e2; color: #991b1b; }

.wb-line {
  font-size: 12px; color: var(--text-dim); display: flex; align-items: center;
  gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wb-line i { font-size: 12px; color: var(--text-soft); flex-shrink: 0; }

.wb-remark2 { color: var(--text-soft); font-style: italic; }

.wb-actions2 { flex-shrink: 0; }

.wb-del-btn {
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg-card); color: var(--text-soft); cursor: pointer;
  font-size: 14px; display: flex; align-items: center; justify-content: center;
  transition: all .18s ease;
}
.wb-del-btn:hover { background: #fef2f2; color: var(--accent); border-color: #fecaca; }

@media (max-width:1100px) { .card-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:700px)  { .card-grid { grid-template-columns:1fr; } }