:root {
  --contact-font: "Courier New", Courier, monospace;
  --contact-page-bg: #000;
  --contact-page-text: #00ff00;
  --contact-link-text: #00ff00;
  --contact-link-disabled: #555555;
  --contact-container-bg: transparent;
  --contact-container-padding: 0 12px;
  --contact-container-radius: 0px;
  --contact-container-border: none;
  --contact-container-shadow: none;

  --contact-title-text: var(--contact-page-text);
  --contact-hint-text: #b7ffb7;
  --contact-hint-soft: #8aff8a;
  --contact-footnote-text: #66cc66;

  --contact-button-bg: #111;
  --contact-button-text: #00ff00;
  --contact-button-border: #00ff00;
  --contact-button-hover-bg: #00ff00;
  --contact-button-hover-text: #111;
  --contact-button-secondary-bg: #111;
  --contact-button-secondary-text: #8aff8a;
  --contact-button-secondary-border: #66cc66;
  --contact-button-secondary-hover-bg: #66cc66;
  --contact-button-secondary-hover-text: #111;

  --contact-input-bg: #111;
  --contact-input-text: #00ff00;
  --contact-input-border: #00ff00;
  --contact-input-accent: #8aff8a;
}

html {
  background: var(--contact-page-bg);
}

body {
  background: var(--contact-page-bg);
  color: var(--contact-page-text);
  font-family: var(--contact-font);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin: 0;
  padding-top: 24px;
  box-sizing: border-box;
  min-height: 100dvh;
}

:lang(fa) body {
  font-family: Tahoma, "Segoe UI", sans-serif;
  line-height: 1.65;
}

body[data-contact-style="2"] {
  --contact-font: "Inter", "Segoe UI", sans-serif;
  --contact-page-bg: radial-gradient(circle at top, #0f172a 0%, #111827 55%, #020617 100%);
  --contact-page-text: #e2e8f0;
  --contact-link-text: #7dd3fc;
  --contact-link-disabled: #64748b;
  --contact-container-bg: transparent;
  --contact-container-padding: 18px;
  --contact-container-radius: 0px;
  --contact-container-border: none;
  --contact-container-shadow: none;
  --contact-title-text: #a5f3fc;
  --contact-hint-text: #cbd5ff;
  --contact-hint-soft: #bfdbfe;
  --contact-footnote-text: #93c5fd;
  --contact-button-bg: rgba(15, 23, 42, 0.85);
  --contact-button-text: #7dd3fc;
  --contact-button-border: #7dd3fc;
  --contact-button-hover-bg: #7dd3fc;
  --contact-button-hover-text: #0f172a;
  --contact-button-secondary-bg: rgba(191, 219, 254, 0.22);
  --contact-button-secondary-text: #c7ddfe;
  --contact-button-secondary-border: #7dd3fc;
  --contact-button-secondary-hover-bg: #c7ddfe;
  --contact-button-secondary-hover-text: #0f172a;
  --contact-input-bg: #0f172a;
  --contact-input-text: #e2e8f0;
  --contact-input-border: #7dd3fc;
  --contact-input-accent: #c7eeff;
}

body[data-contact-style="3"] {
  --contact-font: "Trebuchet MS", "Segoe UI", sans-serif;
  --contact-page-bg: linear-gradient(170deg, #fff8f0, #f4ddc4 55%, #e9cdb1);
  --contact-page-text: #3c2f1a;
  --contact-link-text: #ad4e1f;
  --contact-link-disabled: #a18875;
  --contact-container-bg: transparent;
  --contact-container-padding: 18px;
  --contact-container-radius: 0px;
  --contact-container-border: none;
  --contact-container-shadow: none;
  --contact-title-text: #452f14;
  --contact-hint-text: #7d5a3f;
  --contact-hint-soft: #8c6247;
  --contact-footnote-text: #7a4a2f;
  --contact-button-bg: #7a4a2f;
  --contact-button-text: #f8eddc;
  --contact-button-border: #7a4a2f;
  --contact-button-hover-bg: #5d341b;
  --contact-button-hover-text: #fff7ea;
  --contact-button-secondary-bg: #d9c2a9;
  --contact-button-secondary-text: #3b2716;
  --contact-button-secondary-border: #b58f6d;
  --contact-button-secondary-hover-bg: #c7a98a;
  --contact-button-secondary-hover-text: #3b2716;
  --contact-input-bg: #fff8ec;
  --contact-input-text: #3c2a1a;
  --contact-input-border: #b58f6d;
  --contact-input-accent: #7a4a2f;
}

body[data-contact-style="4"] {
  --contact-font: "Verdana", "Trebuchet MS", sans-serif;
  --contact-page-bg: linear-gradient(135deg, #24113d 0%, #130920 45%, #09080f 100%);
  --contact-page-text: #f4e8ff;
  --contact-link-text: #f3d8ff;
  --contact-link-disabled: #7b719a;
  --contact-container-bg: transparent;
  --contact-container-padding: 20px;
  --contact-container-radius: 0px;
  --contact-container-border: none;
  --contact-container-shadow: none;
  --contact-title-text: #f8d9ff;
  --contact-hint-text: #e5c9ff;
  --contact-hint-soft: #e8d8ff;
  --contact-footnote-text: #d8b4fe;
  --contact-button-bg: #3a2359;
  --contact-button-text: #f8e9ff;
  --contact-button-border: #d8b4fe;
  --contact-button-hover-bg: #d8b4fe;
  --contact-button-hover-text: #1f1238;
  --contact-button-secondary-bg: rgba(216, 180, 254, 0.25);
  --contact-button-secondary-text: #f7ecff;
  --contact-button-secondary-border: #d8b4fe;
  --contact-button-secondary-hover-bg: #d8b4fe;
  --contact-button-secondary-hover-text: #1f1238;
  --contact-input-bg: #f7ecff;
  --contact-input-text: #2e153f;
  --contact-input-border: #d8b4fe;
  --contact-input-accent: #e9c8ff;
}

body[data-contact-style="5"] {
  --contact-font: "Georgia", "Times New Roman", serif;
  --contact-page-bg: radial-gradient(circle at 20% 20%, #164e36 0%, #0b2f24 42%, #071611 100%);
  --contact-page-text: #efffed;
  --contact-link-text: #d7ff76;
  --contact-link-disabled: #6f8067;
  --contact-container-bg: transparent;
  --contact-container-padding: 22px;
  --contact-container-radius: 0px;
  --contact-container-border: none;
  --contact-container-shadow: none;
  --contact-title-text: #efffed;
  --contact-hint-text: #d9f99d;
  --contact-hint-soft: #bef264;
  --contact-footnote-text: #a3e635;
  --contact-button-bg: rgba(20, 83, 45, 0.76);
  --contact-button-text: #f7fee7;
  --contact-button-border: #d7ff76;
  --contact-button-hover-bg: #d7ff76;
  --contact-button-hover-text: #123524;
  --contact-button-secondary-bg: rgba(215, 255, 118, 0.13);
  --contact-button-secondary-text: #efffed;
  --contact-button-secondary-border: #a3e635;
  --contact-button-secondary-hover-bg: #bef264;
  --contact-button-secondary-hover-text: #10281b;
  --contact-input-bg: #f7fee7;
  --contact-input-text: #112e20;
  --contact-input-border: #a3e635;
  --contact-input-accent: #d7ff76;
}

body[data-contact-style="6"] {
  --contact-font: "Lucida Console", Monaco, monospace;
  --contact-page-bg: linear-gradient(135deg, #07111f 0%, #0b2545 55%, #06101d 100%);
  --contact-page-text: #e0f2fe;
  --contact-link-text: #facc15;
  --contact-link-disabled: #6b7b8f;
  --contact-container-bg: transparent;
  --contact-container-padding: 20px;
  --contact-container-radius: 0px;
  --contact-container-border: none;
  --contact-container-shadow: none;
  --contact-title-text: #f8fafc;
  --contact-hint-text: #bae6fd;
  --contact-hint-soft: #7dd3fc;
  --contact-footnote-text: #facc15;
  --contact-button-bg: #0b2545;
  --contact-button-text: #facc15;
  --contact-button-border: #facc15;
  --contact-button-hover-bg: #facc15;
  --contact-button-hover-text: #07111f;
  --contact-button-secondary-bg: rgba(14, 165, 233, 0.18);
  --contact-button-secondary-text: #e0f2fe;
  --contact-button-secondary-border: #38bdf8;
  --contact-button-secondary-hover-bg: #38bdf8;
  --contact-button-secondary-hover-text: #07111f;
  --contact-input-bg: #e0f2fe;
  --contact-input-text: #07111f;
  --contact-input-border: #facc15;
  --contact-input-accent: #38bdf8;
}

.container {
  text-align: center;
  width: 100%;
  max-width: 480px;
  box-sizing: border-box;
  padding: var(--contact-container-padding);
  background: var(--contact-container-bg);
  border: var(--contact-container-border);
  border-radius: var(--contact-container-radius);
  box-shadow: var(--contact-container-shadow);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 24px);
  min-height: calc(100dvh - 24px);
}

.language-control {
  display: inline-flex;
  align-items: center;
  align-self: flex-end;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--contact-hint-text);
  font-size: 0.85rem;
}

.language-control select {
  border: 1px solid var(--contact-button-border);
  border-radius: 4px;
  padding: 4px 8px;
  background: var(--contact-button-bg);
  color: var(--contact-button-text);
  font: inherit;
  cursor: pointer;
}

.language-control select:focus-visible {
  outline: 2px solid var(--contact-input-accent);
  outline-offset: 2px;
}

h1 {
  margin-top: 0;
  margin-bottom: 1.8rem;
}

.contact-link {
  color: var(--contact-link-text);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin: 15px 0;
}

.contact-link.disabled {
  pointer-events: none;
  color: var(--contact-link-disabled);
  text-decoration: line-through;
  cursor: not-allowed;
}

.contact-link-label {
  line-height: 1.2;
}

.contact-option-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.contact-option-icon path,
.contact-option-icon rect,
.contact-option-icon circle,
.contact-option-icon line,
.contact-option-icon polyline,
.contact-option-icon polygon {
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-option-icon--brand path,
.contact-option-icon--brand rect,
.contact-option-icon--brand circle,
.contact-option-icon--brand line,
.contact-option-icon--brand polyline,
.contact-option-icon--brand polygon {
  stroke: currentColor;
  fill: currentColor;
  stroke-width: 0;
}
.styled-btn {
  display: inline-block;
  font-family: var(--contact-font);
  color: var(--contact-button-text);
  background: var(--contact-button-bg);
  border: 1px solid var(--contact-button-border);
  border-radius: 4px;
  padding: 6px 18px;
  margin: 12px 0 0 0;
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s;
}

.styled-btn:hover,
.styled-btn:focus {
  background: var(--contact-button-hover-bg);
  color: var(--contact-button-hover-text);
  border-color: var(--contact-button-hover-bg);
  outline: none;
}

#qr {
  max-width: 100%;
  height: auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.contact-actions {
  width: 100%;
  display: grid;
  gap: 10px;
  justify-items: center;
  margin-top: auto;
  margin-bottom: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.contact-actions-title {
  margin: 0;
  color: var(--contact-hint-text);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}

.action-block {
  width: 100%;
  box-sizing: border-box;
}

.action-status {
  margin: 2px 0 0;
  min-height: 1.2em;
  text-align: center;
  color: var(--contact-hint-soft);
  line-height: 1.35;
  font-size: 0.95rem;
}

.action-status:empty {
  visibility: hidden;
  min-height: 0;
  margin-top: 0;
}

.action-grid,
.editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.action-grid-primary {
  margin-top: 0;
}

.action-grid-secondary,
.editor-actions {
  margin-top: 0;
}

.action-grid .styled-btn,
.editor-actions .styled-btn {
  margin-top: 0;
  min-width: 150px;
}

.editor-actions .styled-btn {
  flex: 1 1 150px;
}

.secondary-btn {
  color: var(--contact-button-secondary-text);
  background: var(--contact-button-secondary-bg);
  border-color: var(--contact-button-secondary-border);
}

.secondary-btn:hover,
.secondary-btn:focus {
  background: var(--contact-button-secondary-hover-bg);
  color: var(--contact-button-secondary-hover-text);
  border-color: var(--contact-button-secondary-hover-bg);
}

.qr-mode-intro {
  margin: 0 0 10px;
  color: var(--contact-hint-text);
}

.qr-mode-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 10px;
}

.qr-mode-btn {
  margin-top: 0;
}

.qr-mode-btn.active,
.qr-mode-btn[aria-pressed="true"] {
  background: var(--contact-button-hover-bg);
  color: var(--contact-button-hover-text);
  border-color: var(--contact-button-hover-bg);
}

.qr-mode-title {
  margin: 0;
  font-weight: bold;
}

.qr-hint {
  margin: 6px 0 0;
  color: var(--contact-hint-soft);
  line-height: 1.4;
}

.qr-footnote {
  margin: 6px 0 12px;
  color: var(--contact-footnote-text);
  line-height: 1.4;
  font-size: 0.95rem;
}

.qr-download-actions {
  margin-top: 12px;
}

.qr-download-actions .styled-btn {
  margin-top: 0;
}

#editSection {
  width: 100%;
  max-width: 350px;
  margin: 18px auto 0;
  text-align: start;
}

.form-field {
  display: block;
  margin: 8px 0 2px;
}

.form-field span {
  display: block;
  margin-bottom: 4px;
}

.form-input,
.form-select {
  width: 100%;
  box-sizing: border-box;
  background: var(--contact-input-bg);
  color: var(--contact-input-text);
  border: 1px solid var(--contact-input-border);
  border-radius: 3px;
  padding: 6px 8px;
  font: inherit;
}

.form-select {
  cursor: pointer;
}

.checkbox-field {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
}

.checkbox-field input:focus-visible,
.form-input:focus-visible,
.form-select:focus-visible {
  outline: 2px solid var(--contact-input-accent);
  outline-offset: 2px;
}

@media (max-width: 520px) {
  .action-grid,
  .editor-actions,
  .qr-mode-controls {
    flex-direction: column;
  }

  .action-grid .styled-btn,
  .editor-actions .styled-btn,
  .qr-mode-btn {
    width: 100%;
  }
}