/* The operator selects a theme at link creation. Layouts share one flow. */
body[data-template=standard] .action-icon { background: linear-gradient(135deg, #f1f1db, #e7efd9); }
body[data-template=standard] .primary { background: linear-gradient(110deg, #486c3f, #356448); }
body[data-template=standard] .primary:hover:not(:disabled) { background: linear-gradient(110deg, #3c5d34, #29553b); }

html[data-template=slate],
body[data-template=slate] {
  --bg: #edf3fb;
  --card: #ffffff;
  --ink: #1f3654;
  --muted: #667b94;
  --accent: #285a91;
  --accent-hover: #194575;
  --soft: #edf4fc;
  --border: #d4e1f1;
  --line: #e0e9f4;
  --glow: #e0edff;
  --highlight: #5d99c5;
  --shadow: 0 12px 44px #173c7110, 0 2px 5px #173c7103;
}
body[data-template=slate] .verification-card { max-width: 650px; border-radius: 14px; }
body[data-template=slate] #welcome-view { display: grid; grid-template-columns: 210px minmax(0, 1fr); column-gap: 24px; text-align: left; padding: 22px 26px; }
body[data-template=slate] .card-topline { grid-column: 1 / -1; padding-bottom: 13px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
body[data-template=slate] .illustration-button { grid-column: 1; grid-row: 2 / 7; width: 210px; align-self: center; margin: 0; }
body[data-template=slate] #welcome-view > :not(.card-topline):not(.illustration-button) { grid-column: 2; }
body[data-template=slate] #welcome-heading { margin-top: 0; font-size: 24px; }
body[data-template=slate] #welcome-view .card-description { margin: 0; }
body[data-template=slate] .requirements { justify-content: flex-start; }
body[data-template=slate] .messenger-buttons { grid-template-columns: minmax(0, 1fr); gap: 8px; }
body[data-template=slate] .primary { background: linear-gradient(110deg, #30679f, #244e83); }
body[data-template=slate] .primary:hover:not(:disabled) { background: #1d4779; }
body[data-template=slate] .action-list { grid-template-columns: minmax(0, 1fr); gap: 10px; }
body[data-template=slate] .action-item { grid-template-columns: 40px minmax(0, 1fr) 190px; align-items: center; padding: 13px 14px; border-radius: 10px; }
body[data-template=slate] .action-icon { height: 40px; border-radius: 10px; background: linear-gradient(135deg, #e5edfb, #edf7fc); }
body[data-template=slate] .action-number { display: none; }
body[data-template=slate] .action-button { grid-column: 3; grid-row: 1; }
body[data-template=slate] .complete-card .card-topline { display: none; }

html[data-template=minimal],
body[data-template=minimal] {
  --bg: #f3f3f3;
  --card: #ffffff;
  --ink: #212121;
  --muted: #737373;
  --accent: #292929;
  --accent-hover: #000000;
  --soft: #f3f3f3;
  --border: #dcdcdc;
  --line: #e8e8e8;
  --glow: #ffffff;
  --highlight: #9b9b9b;
  --shadow: 0 12px 44px #00000008;
}
body[data-template=minimal] .page-shell { max-width: 920px; }
body[data-template=minimal] .language-flag { opacity: .45; filter: saturate(.35); }
body[data-template=minimal] .verification-card { max-width: 540px; border-radius: 4px; border-top: 3px solid #282828; padding: 22px 26px; }
body[data-template=minimal] h1 { font-family: "Literata", Georgia, serif; font-size: 28px; font-weight: 450; letter-spacing: -.9px; }
body[data-template=minimal] h2 { font-family: "Literata", Georgia, serif; font-size: 26px; font-weight: 450; }
body[data-template=minimal] .form-card h2 { font-size: 26px; }
body[data-template=minimal] .card-topline { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
body[data-template=minimal] .illustration-button { width: 196px; margin-top: 9px; }
body[data-template=minimal] .primary, body[data-template=minimal] .action-button { border-radius: 5px; }
body[data-template=minimal] .messenger-button { border-radius: 5px; }
body[data-template=minimal] .requirements > span { background: transparent; border: 1px solid var(--border); border-radius: 3px; }
body[data-template=minimal] .recipient { background: transparent; border-width: 0 0 1px; border-radius: 0; padding: 9px 0 12px; }
body[data-template=minimal] .action-list { grid-template-columns: minmax(0, 1fr); gap: 0; }
body[data-template=minimal] .action-item { grid-template-columns: 36px minmax(0, 1fr) 180px; align-items: center; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 14px 0; background: transparent; }
body[data-template=minimal] .action-icon { background: transparent; border: 1px solid var(--border); border-radius: 50%; }
body[data-template=minimal] .action-number { display: none; }
body[data-template=minimal] .action-button { grid-column: 3; grid-row: 1; }
body[data-template=minimal] .received-item { border-color: var(--accent); }
body[data-template=minimal] .complete-icon { border-radius: 50%; transform: none; }
body[data-template=minimal] .complete-icon svg { transform: none; }
body[data-template=minimal] .complete-receipt { background: transparent; border-width: 1px 0; border-radius: 0; }
body[data-template=minimal] dialog::backdrop { background: #11111166; }
body[data-template=minimal] .message { color: #323232; border-color: #c8c8c8; background: #eeeeee; }

@media (max-width: 700px) {
  body[data-template=slate] #welcome-view { grid-template-columns: 100px minmax(0, 1fr); column-gap: 14px; padding: 18px 20px; }
  body[data-template=slate] .illustration-button { width: 100px; grid-row: 2 / 4; }
  body[data-template=slate] #welcome-heading { font-size: 22px; }
  body[data-template=slate] #welcome-view > .requirements,
  body[data-template=slate] #welcome-view > .start-button,
  body[data-template=slate] #welcome-view > .permission-note,
  body[data-template=slate] #welcome-view > .messenger-options:not([hidden]) { grid-column: 1 / -1; }
  body[data-template=slate] .messenger-buttons:not(.has-single) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-template=slate] .requirements { justify-content: center; }
  body[data-template=slate] .permission-note { text-align: center; }
  body[data-template=slate] .action-item, body[data-template=minimal] .action-item { grid-template-columns: 36px minmax(0, 1fr); padding: 11px 12px; gap: 6px 9px; }
  body[data-template=slate] .action-button, body[data-template=minimal] .action-button { grid-column: 2; grid-row: auto; }
  body[data-template=slate] .action-icon { height: 36px; }
  body[data-template=minimal] .verification-card { padding: 18px 20px; }
  body[data-template=minimal] .action-item { padding: 11px 0; }
  body[data-template=minimal] h1 { font-size: 25px; }
  body[data-template=minimal] h2 { font-size: 24px; }
}
@media (max-width: 380px) {
  body[data-template=slate] .messenger-buttons:not(.has-single) { grid-template-columns: minmax(0, 1fr); }
  body[data-template=slate] #welcome-view { grid-template-columns: 72px minmax(0, 1fr); padding: 16px; column-gap: 10px; }
  body[data-template=slate] .illustration-button { width: 72px; }
  body[data-template=minimal] .verification-card { padding: 16px; }
  body[data-template=minimal] h1 { font-size: 23px; }
}