:root {
  color-scheme: dark;
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  background: #292e2b;
  color: #eef3f0;
  -webkit-font-smoothing: antialiased;
  accent-color: #8ff5c9;
  caret-color: #8ff5c9;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
::selection { background: #315d49; color: #fff; }
body { margin: 0; padding: 0; }
main {
  width: 100%; margin: 0; padding: 22px 24px 18px; background: #292e2b;
}
p { margin: 0; overflow-wrap: anywhere; }
.site-header { display: flex; gap: 10px; align-items: center; margin-bottom: 18px; min-width: 0; }
.site-icon { width: 24px; height: 24px; flex: 0 0 24px; color: #c4d1c9; }
.destination { color: #c4d1c9; font-size: 14px; min-width: 0; flex: 1; }
h1 { margin: 0 0 8px; font-size: 22px; line-height: 1.3; letter-spacing: -.018em; font-weight: 600; overflow-wrap: anywhere; }
h2 { margin: 0 0 8px; font-size: 17px; line-height: 1.35; }
#status { color: #c4d1c9; font-size: 14px; }
.recipient { color: #c4d1c9; font-size: 12px; margin-bottom: 8px; }
#error { color: #ffd0cb; padding: 12px 14px; margin-top: 16px; border: 1px solid #81514e; border-radius: 12px; background: #442a28; font-size: 14px; }
#origin-approval { margin-top: 20px; }
#approval-origin { font-size: 16px; color: #eef3f0; margin-bottom: 10px; }
#approval-note { font-size: 13px; color: #c4d1c9; }
#fields { margin-top: 18px; }
.form-field + .form-field { margin-top: 14px; }
label { display: block; margin: 0 0 7px; font-size: 13px; font-weight: 550; color: #d7e0da; }
input, select, button { font: inherit; }
input, select {
  display: block; width: 100%; min-width: 0; min-height: 48px; padding: 11px 13px;
  border: 1px solid #5a645d; border-radius: 12px; color: #eef3f0; background: #252a27;
}
input::placeholder { color: #aebbb2; opacity: 1; }
input:hover, select:hover { border-color: #85988b; }
.password-control { position: relative; }
.password-control input { padding-right: 56px; }
.password-toggle {
  position: absolute; top: 2px; right: 2px; width: 44px; height: 44px; min-height: 44px;
  display: grid; place-items: center; margin: 0; padding: 9px; border: 0; border-radius: 10px;
  color: #c4d1c9; background: transparent;
}
.password-toggle svg { width: 22px; height: 22px; }
.password-toggle:hover:not(:disabled), .close-button:hover:not(:disabled) { background: #3e4841; }
.checkbox-field { display: flex; gap: 10px; align-items: center; }
.checkbox-field input { flex: 0 0 20px; width: 20px; min-height: 20px; height: 20px; padding: 0; }
.checkbox-field label { margin: 0; cursor: pointer; }
button {
  min-height: 44px; padding: 10px 18px; border: 1px solid transparent; border-radius: 24px;
  background: #e2eae5; color: #17251d; font-weight: 600; cursor: pointer; touch-action: manipulation;
  overflow-wrap: anywhere; transition: background-color 150ms ease-out, border-color 150ms ease-out;
}
button:hover:not(:disabled) { background: #fff; }
button:active:not(:disabled) { background: #b8cfbf; }
button.quiet { color: #eef3f0; background: #3c443f; border-color: #56635b; }
button.quiet:hover:not(:disabled) { background: #4b584f; }
button:disabled { color: #b0bbb4; background: #414b44; border-color: #526056; cursor: default; }
.close-button {
  width: 36px; min-height: 36px; flex: 0 0 36px; margin: -6px -8px -6px 0;
  padding: 7px; color: #c4d1c9; background: transparent; border: 0; border-radius: 50%;
}
.close-button svg { display: block; width: 22px; height: 22px; }
#actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 10px; margin-top: 20px; }
#actions button { width: 100%; }
#actions:empty, #fields:empty { margin: 0; }
.action-unavailable { color: #c4d1c9; font-size: 12px; margin-top: 7px; }
.form-footer { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 20px; padding-top: 16px; border-top: 1px solid #444e47; }
.form-footer button { font-size: 14px; }
.form-footer:not(:has(button:not([hidden]))) { display: none; }
#complete { margin-right: auto; }
:focus-visible { outline: 2px solid #8ff5c9; outline-offset: 3px; }
.privacy { color: #b5c3ba; font-size: 12px; line-height: 1.45; margin-top: 14px; }
#complete-note { font-size: 12px; }
noscript { display: block; margin-top: 16px; color: #ffd0cb; }
@media (max-width: 420px) {
  main { padding: 18px 18px 16px; }
  h1 { font-size: 20px; }
  .site-header { gap: 8px; margin-bottom: 16px; }
  .destination { font-size: 12px; }
  #actions { grid-template-columns: 1fr; }
  .form-footer { margin-top: 18px; }
  #complete { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { button { transition: none; } }