* { margin: 0; padding: 0; box-sizing: border-box; }
html {
  background-color: #0280ff;
  background-image: linear-gradient(180deg, #029bff 0%, #0268d8 100%);
  background-attachment: fixed;
  font-family: 'Nunito', sans-serif;
}

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: #1a1a2e;
}

body::before {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background-image: url('../img/pattern.png');
  background-repeat: repeat;
  background-size: auto;
  opacity: 0.07;
  z-index: -1;
}

body.modal-open { overflow: hidden; }

.lang-toggle {
  position: fixed;
  top: 20px; right: 20px;
  z-index: 1000;
  display: flex;
  border-radius: 25px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.lang-btn {
  padding: 10px 18px;
  border: none;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 14px;
  transition: all 0.3s ease;
  background: rgba(255,255,255,0.25);
  color: white;
  backdrop-filter: blur(10px);
}
.lang-btn.active { background: white; color: #0280ff; }
.lang-btn:hover:not(.active) { background: rgba(255,255,255,0.45); }

.back-btn {
  position: fixed;
  top: 20px; left: 20px;
  z-index: 1000;
  padding: 10px 20px;
  border-radius: 25px;
  border: none;
  background: rgba(255,255,255,0.25);
  backdrop-filter: blur(10px);
  color: white;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}
.back-btn:hover { background: white; color: #0280ff; }

.support-container {
  max-width: 1140px;
  width: 100%;
  margin: 100px auto 60px;
  padding: 0 24px;
  flex: 1;
}

.support-title {
  font-family: 'Lilita One', cursive;
  font-size: 44px;
  color: white;
  text-align: center;
  margin-bottom: 10px;
  text-shadow: 0 4px 15px rgba(0,0,0,0.3);
  letter-spacing: 2px;
}

.support-subtitle {
  text-align: center;
  color: rgba(255,255,255,0.85);
  font-size: 16px;
  margin-bottom: 34px;
  font-weight: 600;
}

/* ============ sections & horizontal grid ============ */
.section-title {
  font-family: 'Lilita One', cursive;
  font-size: 21px;
  font-weight: normal;
  color: white;
  letter-spacing: 1.5px;
  margin: 30px 0 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.section-title::after {
  content: "";
  flex: 1;
  height: 2px;
  background: rgba(255,255,255,0.25);
  border-radius: 2px;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.option-card {
  background: white;
  border-radius: 20px;
  padding: 24px 18px;
  box-shadow: 0 8px 24px rgba(0,20,60,0.18);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  position: relative;
  animation: cardIn 0.45s ease backwards;
}
.option-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(0,20,60,0.3);
  border-color: rgba(2,128,255,0.45);
}
.option-card:active { transform: translateY(-2px) scale(0.99); }

/* tile: icon on top, centered */
.option-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}

.option-icon {
  width: 54px; height: 54px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 5px 14px rgba(0,0,0,0.18);
}
.option-icon svg { width: 27px; height: 27px; }

.icon-recover  { background: linear-gradient(135deg, #667eea, #764ba2); }
.icon-purchase { background: linear-gradient(135deg, #f093fb, #f5576c); }
.icon-convert  { background: linear-gradient(135deg, #4facfe, #00f2fe); }
.icon-other    { background: linear-gradient(135deg, #43e97b, #38f9d7); }
.icon-email    { background: linear-gradient(135deg, #f7971e, #ffd200); }
.icon-account  { background: linear-gradient(135deg, #36d1dc, #5b86e5); }
.icon-s2       { background: linear-gradient(135deg, #fa709a, #fee140); }
.icon-mp       { background: linear-gradient(135deg, #f83600, #f9d423); }
.icon-pat      { background: linear-gradient(135deg, #ff0844, #ffb199); }
.icon-delete   { background: linear-gradient(135deg, #8e9eab, #545c66); }

.option-text h3 {
  font-family: 'Lilita One', cursive;
  font-size: 16px;
  color: #1a1a2e;
  letter-spacing: 0.8px;
  font-weight: normal;
  line-height: 1.3;
}
.option-text p { font-size: 12.5px; color: #6b7280; margin-top: 5px; line-height: 1.4; }

.option-arrow { display: none; }

.new-badge {
  display: inline-block;
  background: linear-gradient(135deg, #fa709a, #fee140);
  color: white;
  font-family: 'Nunito', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 2px 8px;
  border-radius: 8px;
  vertical-align: middle;
  margin-left: 6px;
}

/* content lives hidden inside the tile until it's moved into the modal */
.option-card .option-content { display: none; }

/* translucent info tiles (guide / FAQ) */
.guide-card {
  background: rgba(255,255,255,0.14);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255,255,255,0.35);
}
.guide-card:hover { border-color: white; box-shadow: 0 16px 40px rgba(0,20,60,0.3); }
.guide-card .option-text h3 { color: white; }
.guide-card .option-text p { color: rgba(255,255,255,0.78); }

/* ============ modal (popup) ============ */
#modalBackdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 20, 50, 0.55);
  backdrop-filter: blur(3px);
  z-index: 1001;
}
#modalBackdrop.show { display: block; animation: fadeIn 0.2s ease; }

#modal {
  display: none;
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(680px, calc(100vw - 32px));
  max-height: min(88vh, 940px);
  overflow-y: auto;
  background: white;
  border-radius: 24px;
  padding: 30px;
  z-index: 1002;
  box-shadow: 0 25px 70px rgba(0,0,0,0.45);
}
#modal.show { display: block; animation: popIn 0.25s ease; }

/* dark variant for the translucent (guide/FAQ) cards */
#modal.modal-dark { background: linear-gradient(180deg, #029bff, #0268d8); }
#modal.modal-dark .divider { background: rgba(255,255,255,0.2); }
#modal.modal-dark .option-text h3 { color: white; }
#modal.modal-dark .option-text p { color: rgba(255,255,255,0.78); }

.modal-header {
  display: flex;
  align-items: center;
  gap: 15px;
  padding-right: 36px;
}
.modal-header .option-header {
  flex-direction: row;
  text-align: left;
  gap: 15px;
  width: 100%;
}

#modalBody .option-content { display: block; padding-top: 24px; }

.modal-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 36px; height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,0.08);
  color: #444;
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
  z-index: 2;
}
.modal-close:hover { background: rgba(0,0,0,0.18); transform: rotate(90deg); }
#modal.modal-dark .modal-close { background: rgba(255,255,255,0.25); color: white; }
#modal.modal-dark .modal-close:hover { background: rgba(255,255,255,0.45); }

@keyframes popIn {
  from { opacity: 0; transform: translate(-50%, -47%) scale(0.96); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* entrance stagger */
.cards-grid > :nth-child(2) { animation-delay: 0.05s; }
.cards-grid > :nth-child(3) { animation-delay: 0.10s; }
.cards-grid > :nth-child(4) { animation-delay: 0.15s; }
.cards-grid > :nth-child(5) { animation-delay: 0.20s; }
.cards-grid > :nth-child(6) { animation-delay: 0.25s; }
.cards-grid > :nth-child(7) { animation-delay: 0.30s; }

.divider { height: 1px; background: #eee; margin-bottom: 20px; }

.sub-option {
  padding: 15px;
  border-radius: 12px;
  margin-bottom: 12px;
  border: 2px solid #eee;
  cursor: pointer;
  transition: all 0.3s ease;
}
.sub-option:hover, .sub-option.active {
  border-color: #0280ff;
  background: #f0f7ff;
}
.sub-option h4 { font-size: 15px; font-weight: 700; color: #1a1a2e; margin-bottom: 3px; }
.sub-option p { font-size: 12px; color: #888; }

.form-area {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.form-area.visible { max-height: 800px; padding-top: 15px; }

.form-group { margin-bottom: 15px; }
.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #444;
  margin-bottom: 5px;
}
.form-group input,
.form-group textarea {
  width: 100%;
  padding: 12px 15px;
  border-radius: 10px;
  border: 2px solid #e0e0e0;
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  transition: border-color 0.3s ease;
  outline: none;
  background: #fafafa;
}
.form-group input:focus,
.form-group textarea:focus {
  border-color: #0280ff;
  background: white;
}
.form-group textarea { resize: vertical; min-height: 80px; }

.form-group select {
  width: 100%;
  padding: 12px 15px;
  border-radius: 10px;
  border: 2px solid #e0e0e0;
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  outline: none;
  background: #fafafa;
  cursor: pointer;
  transition: border-color 0.3s ease;
}
.form-group select:focus { border-color: #0280ff; background: white; }

.btn-submit {
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  border: none;
  font-family: 'Lilita One', cursive;
  font-size: 16px;
  letter-spacing: 1px;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 5px;
}
.btn-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}
.btn-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.btn-submit:active { transform: scale(0.98); }

.btn-recover  { background: linear-gradient(135deg, #667eea, #764ba2); }
.btn-purchase { background: linear-gradient(135deg, #f093fb, #f5576c); }
.btn-convert  { background: linear-gradient(135deg, #4facfe, #00f2fe); }
.btn-other    { background: linear-gradient(135deg, #43e97b, #38f9d7); }
.btn-email    { background: linear-gradient(135deg, #f7971e, #ffd200); }
.btn-account  { background: linear-gradient(135deg, #36d1dc, #5b86e5); }
.btn-s2       { background: linear-gradient(135deg, #fa709a, #fee140); }
.btn-mp       { background: linear-gradient(135deg, #f83600, #f9d423); }
.btn-pat      { background: linear-gradient(135deg, #ff0844, #ffb199); }
.btn-delete   { background: linear-gradient(135deg, #8e9eab, #545c66); }

.danger-note {
  background: #fff3f3;
  border: 1px solid #f5c6cb;
  color: #721c24;
  border-radius: 10px;
  padding: 12px 15px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 15px;
  line-height: 1.5;
}

.status-msg a { color: inherit; font-weight: 800; text-decoration: underline; }

/* site notice banner (edit SITE_NOTICE in the script to show it) */
.site-notice {
  display: none;
  background: rgba(255,255,255,0.96);
  border-left: 5px solid #ffc107;
  color: #856404;
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 20px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
.site-notice.show { display: block; animation: fadeIn 0.3s ease; }

/* account info viewer */
.acc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #f8f9fa;
  border-radius: 10px;
  margin-bottom: 8px;
  font-size: 13px;
}
.acc-label { font-weight: 700; color: #666; flex-shrink: 0; }
.acc-value { font-weight: 800; color: #1a1a2e; word-break: break-all; text-align: right; }
.copy-btn {
  margin-left: 8px;
  border: none;
  background: #e3f0ff;
  color: #0280ff;
  border-radius: 6px;
  padding: 4px 10px;
  font-weight: 800;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  transition: background 0.2s ease;
}
.copy-btn:hover { background: #cfe5ff; }

@keyframes cardIn {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .option-card, #modal, #modalBackdrop { animation: none; }
}

/* FAQ (rendered inside dark modal) */
.faq-q { color: white; font-weight: 800; font-size: 14px; margin: 16px 0 4px; }
.faq-q:first-of-type { margin-top: 0; }
.faq-a { color: rgba(255,255,255,0.82); font-size: 13px; line-height: 1.55; }

/* guide content (dark modal) */
.guide-step-text {
  color: rgba(255,255,255,0.9);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
}
.guide-img {
  width: 100%;
  border-radius: 12px;
  margin-bottom: 18px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

/* footer */
.site-footer {
  text-align: center;
  padding: 0 20px 30px;
  color: rgba(255,255,255,0.7);
  font-size: 13px;
  font-weight: 600;
}
.site-footer a { color: white; font-weight: 800; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

.status-msg {
  padding: 12px 15px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  margin-top: 12px;
  display: none;
  animation: fadeIn 0.3s ease;
}
.status-msg.show { display: block; }
.status-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.status-error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.status-info { background: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

.spinner {
  display: inline-block;
  width: 18px; height: 18px;
  border: 3px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
  margin-right: 8px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.quiz-container { margin-top: 15px; }
.quiz-question {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 12px;
  margin-bottom: 12px;
}
.quiz-question p { font-size: 14px; font-weight: 700; color: #1a1a2e; margin-bottom: 10px; }
.quiz-option {
  display: block;
  padding: 8px 12px;
  margin: 4px 0;
  border-radius: 8px;
  border: 2px solid #e0e0e0;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s ease;
  background: white;
}
.quiz-option:hover { border-color: #0280ff; background: #f0f7ff; }
.quiz-option.selected { border-color: #0280ff; background: #e3f0ff; font-weight: 700; }

.rate-limit-warning {
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffc107;
  padding: 12px 15px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 15px;
  display: none;
}
.rate-limit-warning.show { display: block; }

.recaptcha-container { display: flex; justify-content: center; margin: 10px 0; }

.desc-text { font-size: 13px; color: #666; margin-bottom: 15px; line-height: 1.5; }
.success-label { font-size: 14px; font-weight: 700; color: #155724; margin-bottom: 15px; }

/* quiz steps */
.quiz-step { display: none; }
.quiz-step.active { display: block; }
.quiz-progress {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
}
.quiz-progress-dot {
  flex: 1;
  height: 4px;
  border-radius: 4px;
  background: #e0e0e0;
  transition: background 0.3s ease;
}
.quiz-progress-dot.done { background: #667eea; }
.quiz-img {
  width: 100%;
  border-radius: 10px;
  margin-top: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

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

@media (max-width: 768px) {
  .support-container { margin-top: 80px; }
  .support-title { font-size: 32px; }
  .option-card { padding: 20px 14px; }
  #modal { padding: 24px 20px; }
  body::before { background-size: 600px; }
}

@media (max-width: 540px) {
  .cards-grid { grid-template-columns: 1fr; }
}

@media (max-width: 400px) {
  .support-title { font-size: 26px; }
  .lang-toggle { top: 12px; right: 12px; }
  .back-btn { top: 12px; left: 12px; }
  body::before { background-size: 50vw; }
}