:root { 
  --bg-start: #d8e9ff; 
  --bg-end: #f7fbff; 
  --glass: rgba(255, 255, 255, 0.55); 
  --shadow: 0 20px 60px rgba(31, 67, 135, 0.18); 
  --blue: #0a84ff; 
  --teal: #10b3a8; 
  --orange: #ff7b4a; 
  --text-main: #0f172a; 
  --text-sub: #4b5563; 
} 

* { 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; 
} 

body { 
  min-height: 100vh; 
  background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.7), transparent 40%), radial-gradient(circle at 75% 10%, rgba(10, 132, 255, 0.3), transparent 32%), radial-gradient(circle at 40% 80%, rgba(16, 179, 168, 0.28), transparent 38%), linear-gradient(150deg, var(--bg-start), var(--bg-end)); 
  color: var(--text-main); 
  overflow-y: auto; 
  padding: 27px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
} 

.bg-fill { 
  position: fixed; 
  inset: 0; 
  background: radial-gradient(circle at 15% 25%, rgba(255, 255, 255, 0.6), transparent 42%), radial-gradient(circle at 85% 10%, rgba(10, 132, 255, 0.25), transparent 35%), radial-gradient(circle at 60% 80%, rgba(16, 179, 168, 0.26), transparent 40%); 
  filter: blur(24px); 
  z-index: 0; 
} 

.app { 
  position: relative; 
  width: min(560px, 100%); 
  min-height: 92vh; 
  display: flex; 
  flex-direction: column; 
  gap: 12px; 
  z-index: 1; 
} 

.tab-switcher { 
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 8px;
  margin: 0 4px 6px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 40px rgba(10, 20, 60, 0.12);
}
.tab-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 8px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.4);
  color: var(--text-sub);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.28s cubic-bezier(0.4, 0.0, 0.2, 1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.tab-btn .tab-icon { font-size: 16px; opacity: 0.78; transition: inherit; }
.tab-btn .ticket { color: #f6c343; }
.tab-btn .order { color: #7a3cf4; }
.tab-btn:hover { transform: translateY(-1px); }
.tab-btn:active { transform: translateY(0); }
.tab-btn.active { color: #fff; transform: translateY(-1px); }
.tab-btn.active .tab-icon { opacity: 1; transform: scale(1.08); }
.tab-btn.active[data-tab="coupon"] .tab-icon { color: #f6c343; }
.tab-btn.active:not([data-tab="coupon"]) .tab-icon { color: #fff; }
.tab-btn.active[data-tab="coupon"] { background: linear-gradient(120deg, #0a60ff, #0ab6ff); box-shadow: 0 14px 32px rgba(10, 132, 255, 0.25); }
.tab-btn.active[data-tab="order"] { background: linear-gradient(120deg, #6b2cf7, #b55bff); box-shadow: 0 14px 32px rgba(107, 44, 247, 0.22); }

.order-area { margin-top: 10px; display: none; flex-direction: column; gap: 12px; padding: 18px; }
.order-header { display: flex; flex-direction: column; gap: 4px; }
.order-title { font-size: 20px; font-weight: 800; }
.order-sub { color: var(--text-sub); font-size: 13px; }
.order-input-row { display: flex; gap: 10px; align-items: center; background: rgba(255,255,255,0.85); border-radius: 16px; padding: 8px 10px; border: 1px solid rgba(255,255,255,0.8); box-shadow: 0 10px 26px rgba(10, 132, 255, 0.12); }
.order-input { flex: 1; border: none; background: transparent; padding: 12px; font-size: 14px; font-weight: 400; outline: none; color: var(--text-main); } 
.order-btn { min-width: 88px; }
.order-status { display: none; border: 1px solid rgba(255,255,255,0.8); border-radius: 14px; padding: 14px; gap: 8px; align-items: center; background: rgba(255,255,255,0.9); box-shadow: inset 0 1px 0 rgba(255,255,255,0.6); }
.order-status-icon { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; }
.order-status--empty .order-status-icon { background: #e5f0ff; color: #3b82f6; }
.order-status--loading { background: rgba(255,255,255,0.95); color: #2563eb; }
.order-status--loading .order-status-icon { background: #dbeafe; color: #2563eb; }
.order-status--fail { background: #fff5f5; border-color: #ffdcdc; color: #d64545; }
.order-status--fail .order-status-icon { background: #ffdcdc; color: #d64545; }
.order-status--success { background: #f1fff5; border-color: #c9f3d6; color: #1fa366; }
.order-status--success .order-status-icon { background: #c9f3d6; color: #1fa366; }
.order-result-list { display: flex; flex-direction: column; gap: 12px; padding-right: 4px; max-height: 70vh; overflow-y: auto; }
.order-card { background: rgba(255,255,255,0.9); border: 1px solid rgba(255,255,255,0.85); border-radius: 16px; padding: 14px; box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12); animation: rise 0.5s ease forwards; opacity: 0; transform: translateY(12px); }
.order-card .order-meta { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-sub); margin-bottom: 6px; flex-wrap: wrap; }
.order-badge { padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; gap: 6px; }
.badge-success { background: #e8f9ef; color: #1fa366; border: 1px solid #c9f3d6; }
.badge-fail { background: #fff1f1; color: #d64545; border: 1px solid #ffd2d2; }
.order-parent { font-size: 12px; color: var(--text-sub); }
.order-body { display: grid; grid-template-columns: 92px 1fr; gap: 12px; align-items: center; margin-bottom: 10px; }
.order-thumb { width: 92px; height: 92px; border-radius: 12px; background: #e8ecf0; object-fit: cover; }
.order-title { font-size: 15px; font-weight: 800; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.order-shop { font-size: 12px; color: var(--text-sub); display: flex; gap: 6px; align-items: center; margin-top: 4px; }
.order-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; background: #f7f9ff; border-radius: 12px; padding: 10px; font-size: 13px; }
.order-grid .label { color: var(--text-sub); }
.order-grid .value { font-weight: 700; }
.status-red { color: #d64545; }
.status-green { color: #1fa366; }
.status-orange { color: #f08a24; }
.order-tips { background: linear-gradient(135deg, #eef7ff, #e8f9ff); border: 1px solid rgba(255,255,255,0.9); border-radius: 14px; padding: 12px 14px; color: var(--text-sub); font-size: 13px; box-shadow: 0 12px 26px rgba(10, 132, 255, 0.1); }
.order-tip-title { font-weight: 800; color: var(--text); margin-bottom: 6px; position: relative; padding-left: 10px; }
.order-tip-title::before { content: ''; position: absolute; left: 0; top: 4px; width: 3px; height: 14px; background: #0a84ff; border-radius: 6px; }
.order-tips ul { margin: 0; padding-left: 16px; display: flex; flex-direction: column; gap: 4px; }

@keyframes rise {
  to { opacity: 1; transform: translateY(0); }
}
.app-header { 
  display: flex; 
  align-items: center; 
  padding: 12px 16px; 
  margin: 0 4px 6px; 
  border-radius: 18px; 
  gap: 12px; 
  background: var(--glass); 
  backdrop-filter: blur(12px) saturate(1.2); 
  border: 1px solid rgba(255, 255, 255, 0.5); 
} 

.logo-wrap { 
  width: 48px; 
  height: 48px; 
  border-radius: 14px; 
  overflow: hidden; 
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12); 
} 

.logo-img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
} 

.title-block { 
  flex: 1; 
  display: flex; 
  flex-direction: column; 
  gap: 2px; 
} 

.title-main { 
  font-size: 18px; 
  font-weight: 800; 
} 

.title-sub { 
  font-size: 12px; 
  color: var(--text-sub); 
  letter-spacing: 0.4px; 
} 

.more-dots { 
  font-size: 20px; 
  color: #1f2937; 
  letter-spacing: 2px; 
  margin-left: 8px; 
} 

.content { 
  flex: 1; 
  padding: 0 4px 18px; 
  overflow-y: auto; 
} 

.glass { 
  background: var(--glass); 
  backdrop-filter: blur(14px) saturate(1.1); 
  border: 1px solid rgba(255, 255, 255, 0.55); 
  box-shadow: var(--shadow); 
} 

.hero { 
  padding: 18px; 
  border-radius: 18px; 
  margin-bottom: 14px; 
  display: flex; 
  flex-direction: column; 
  gap: 12px; 
} 

.hero-text { 
  display: flex; 
  flex-direction: column; 
  gap: 6px; 
} 

.hero-title { 
  font-size: 20px; 
  font-weight: 800; 
} 

.hero-desc { 
  font-size: 13px; 
  color: var(--text-sub); 
  line-height: 1.5; 
} 

.input-row { display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, 0.7); border-radius: 14px; padding: 8px; border: 1px solid rgba(255, 255, 255, 0.9); } 

.input { flex: 1; border: none; background: transparent; padding: 12px; font-size: 14px; color: var(--text-main); outline: none; } 

.pill-btn { border: none; background: linear-gradient(120deg, #0a84ff, #5ac8fa); color: #fff; padding: 12px 18px; border-radius: 999px; font-weight: 700; font-size: 14px; box-shadow: 0 12px 25px rgba(10, 132, 255, 0.35); cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease; width: 100%; max-width: 110px; text-align: center; } 

.pill-btn:hover { 
  transform: translateY(-1px); 
  box-shadow: 0 16px 28px rgba(10, 132, 255, 0.45); 
} 

.cta-row { 
  display: flex; 
  gap: 10px; 
} 

.ghost-btn { 
  flex: 1; 
  border: 1px solid rgba(255, 255, 255, 0.7); 
  border-radius: 12px; 
  padding: 12px; 
  background: rgba(255, 255, 255, 0.45); 
  color: var(--text-main); 
  font-weight: 600; 
  cursor: pointer; 
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08); 
  backdrop-filter: blur(10px); 
  transition: transform 0.18s ease, box-shadow 0.18s ease; 
} 

.ghost-btn.alt { 
  color: #0a84ff; 
  border-color: rgba(10, 132, 255, 0.4); 
} 

.ghost-btn:hover { 
  transform: translateY(-1px); 
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.1); 
} 

.result-area { 
  padding: 14px; 
  border-radius: 16px; 
  display: none; 
  flex-direction: column; 
  gap: 12px; 
} 

.skeleton { 
  display: none; 
  align-items: center; 
  gap: 12px; 
} 

.skeleton-img { 
  width: 92px; 
  height: 92px; 
  border-radius: 14px; 
  background: linear-gradient(90deg, #f3f4f6 0%, #e5e7eb 50%, #f3f4f6 100%); 
  animation: shimmer 1.2s infinite; 
} 

.skeleton-lines { 
  flex: 1; 
  display: flex; 
  flex-direction: column; 
  gap: 10px; 
} 

.skeleton-line { 
  height: 12px; 
  border-radius: 999px; 
  background: linear-gradient(90deg, #f3f4f6 0%, #e5e7eb 50%, #f3f4f6 100%); 
  animation: shimmer 1.2s infinite; 
} 

.w-70 { width: 70%; } 
.w-90 { width: 90%; } 
.w-50 { width: 50%; } 

@keyframes shimmer { 
  0% { background-position: -200px 0; } 
  100% { background-position: 200px 0; } 
} 

.result-header { 
  display: flex; 
  align-items: center; 
  gap: 10px; 
} 

.tag { 
  background: linear-gradient(120deg, #0a84ff, #5ac8fa); 
  color: #fff; 
  padding: 6px 10px; 
  border-radius: 10px; 
  font-size: 12px; 
  font-weight: 700; 
} 

.result-title { 
  font-weight: 800; 
} 

.result-extra { 
  margin-left: auto; 
  color: var(--text-sub); 
  font-size: 12px; 
} 

.product-card { 
  display: flex; 
  gap: 14px; 
  align-items: center; 
} 

.product-img-wrap { 
  width: 92px; 
  height: 92px; 
  border-radius: 14px; 
  overflow: hidden; 
  background: #e5e7eb; 
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08); 
} 

.product-img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
} 

.product-info { 
  flex: 1; 
  display: flex; 
  flex-direction: column; 
  gap: 6px; 
} 

.shop-line { 
  font-size: 12px; 
  color: var(--text-sub); 
} 

.product-name { 
  font-weight: 700; 
  line-height: 1.4; 
} 

.coupon-status { 
  display: inline-flex; 
  align-items: center; 
  align-self: flex-start; 
  min-height: 32px; 
  padding: 4px 12px; 
  border-radius: 999px; 
  background: linear-gradient(135deg, rgba(255, 159, 10, 0.18), rgba(16, 179, 168, 0.16)); 
  color: #11203d; 
  font-size: 14px; 
  font-weight: 700; 
} 

.meta-line { 
  display: flex; 
  gap: 12px; 
  color: var(--text-sub); 
  font-size: 12px; 
} 

.meta-icon { 
  width: 14px; 
  height: 14px; 
  fill: currentColor; 
  margin-right: 4px; 
  vertical-align: -2px; 
} 

.coupon-row { 
  display: grid; 
  grid-template-columns: repeat(2, 1fr); 
  gap: 10px; 
  margin-top: 12px; 
} 

.coupon-btn { 
  padding: 14px 12px; 
  border-radius: 14px; 
  border: none; 
  color: #fff; 
  font-weight: 700; 
  font-size: 14px; 
  cursor: pointer; 
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12); 
  transition: transform 0.18s ease, box-shadow 0.18s ease; 
} 

.coupon-btn.orange { 
  background: linear-gradient(135deg, #ff9f0a, var(--orange)); 
} 

.coupon-btn.teal { 
  background: linear-gradient(135deg, #30d158, var(--teal)); 
} 

.coupon-btn:hover { 
  transform: translateY(-1px); 
  box-shadow: 0 16px 28px rgba(0, 0, 0, 0.16); 
} 

.coupon-command {
  display: none;
}

.toast { 
  position: fixed; 
  left: 50%; 
  bottom: 48px; 
  transform: translateX(-50%) translateY(20px); 
  padding: 12px 18px; 
  border-radius: 12px; 
  color: #fff; 
  background: rgba(17, 17, 17, 0.85); 
  opacity: 0; 
  pointer-events: none; 
  transition: opacity 0.25s ease, transform 0.25s ease; 
  z-index: 10; 
  font-size: 14px; 
} 

.toast.show { 
  opacity: 1; 
  transform: translateX(-50%) translateY(0); 
} 

.modal-mask { 
  position: fixed; 
  inset: 0; 
  background: rgba(0, 0, 0, 0.35); 
  display: none; 
  align-items: center; 
  justify-content: center; 
  z-index: 9; 
} 

.modal { 
  width: 88%; 
  max-width: 420px; 
  border-radius: 20px; 
  overflow: hidden; 
  max-height: 80vh; 
} 

.copy-modal {
  width: min(92vw, 640px);
  max-width: 640px;
  border-radius: 28px;
}

.copy-modal .modal-header {
  padding: 26px 28px;
}

.copy-modal .modal-title {
  font-size: 22px;
}

.copy-modal .close-btn {
  width: 54px;
  height: 54px;
  font-size: 34px;
}

.copy-modal .modal-body {
  padding: 34px 28px 36px;
}

.copy-modal .copy-tip {
  min-height: 180px;
  justify-content: center;
}

.copy-modal .copy-tip-text {
  font-size: 24px;
  line-height: 1.7;
  font-weight: 800;
}

.modal-header { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  padding: 16px; 
  border-bottom: 1px solid rgba(255, 255, 255, 0.5); 
} 

.modal-title { 
  font-weight: 800; 
  font-size: 16px; 
} 

.close-btn { 
  border: none; 
  background: rgba(255, 255, 255, 0.6); 
  width: 32px; 
  height: 32px; 
  border-radius: 50%; 
  font-size: 20px; 
  cursor: pointer; 
  color: #111; 
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12); 
} 

.modal-body { 
  padding: 14px 16px 6px; 
  color: var(--text-main); 
  max-height: 52vh; 
  overflow-y: auto; 
} 

.steps { 
  display: flex; 
  flex-direction: column; 
  gap: 10px; 
  padding-left: 20px; 
  margin-bottom: 12px; 
  color: var(--text-main); 
} 

.support { 
  background: rgba(255, 255, 255, 0.6); 
  border-radius: 12px; 
  padding: 12px; 
  border: 1px solid rgba(255, 255, 255, 0.7); 
  color: var(--text-sub); 
  font-size: 13px; 
} 

.support-title { 
  font-weight: 700; 
  margin-bottom: 6px; 
  color: var(--text-main); 
} 

.support ul { 
  padding-left: 16px; 
  display: flex; 
  flex-direction: column; 
  gap: 4px; 
} 

.support-img-wrap { 
  margin-top: 8px; 
  border: 1px solid rgba(255, 255, 255, 0.9); 
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12); 
  border-radius: 12px; 
  overflow: hidden; 
  background: rgba(255, 255, 255, 0.85); 
} 

.support-img { 
  width: 100%; 
  display: block; 
} 

.modal-footer { 
  padding: 12px 16px 16px; 
} 

.pill-btn.full { 
  width: 100%; 
  text-align: center; 
} 

.copy-tip { 
  display: flex; 
  flex-direction: column; 
  gap: 8px; 
  align-items: center; 
} 

.copy-tip-img { 
  width: 100%; 
  border-radius: 12px; 
  overflow: hidden; 
  min-height: 180px; 
  background: center/contain no-repeat url('copy-tip.png'), linear-gradient(135deg, #f8fbff, #e8f5ff); 
  border: 1px solid rgba(255,255,255,0.8); 
  box-shadow: 0 8px 18px rgba(0,0,0,0.08); 
} 

.copy-tip-text { 
  font-size: 16px; 
  font-weight: 700; 
  color: var(--text-main); 
  text-align: center; 
  line-height: 1.5; 
  padding: 4px 8px; 
} 

@media (max-width: 480px) { 
  body { padding: 8px; } 
  .app { min-height: 96vh; } 
  .hero { padding: 16px; } 
} 

@media (min-width: 900px) { 
  .app { width: 640px; } 
  body { padding: 26px; } 
}