:root {
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #17121c;
  background: #05030b;
  font-size: 17px;
  line-height: 1.48;
  color-scheme: light;
  --ink: #17121c;
  --muted: #61576a;
  --dim: #82768a;
  --panel: rgba(255, 255, 255, .975);
  --panel-2: rgba(255, 255, 255, .985);
  --line: rgba(77, 42, 101, .17);
  --line-strong: rgba(111, 44, 171, .34);
  --purple: #7938d3;
  --purple-bright: #b889ff;
  --violet: #6f2cff;
  --magenta: #d652c7;
  --danger: #a51f35;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: #05030b; }
body {
  margin: 0;
  min-height: 100dvh;
  color: var(--ink);
  overflow-x: hidden;
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 16% 12%, rgba(118, 38, 215, .28) 0, rgba(77, 24, 141, .12) 23%, transparent 49%),
    radial-gradient(ellipse at 86% 24%, rgba(204, 61, 190, .20) 0, rgba(95, 21, 117, .08) 24%, transparent 50%),
    radial-gradient(ellipse at 60% 81%, rgba(82, 53, 221, .22) 0, rgba(28, 21, 91, .09) 29%, transparent 57%),
    linear-gradient(155deg, #030208 0%, #090311 43%, #04030a 100%);
}

/* Galaxy layers live ABOVE the page background and BELOW the UI. */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body::before {
  z-index: 0;
  opacity: .98;
  background-image:
    radial-gradient(circle at 14% 18%, rgba(255,255,255,.98) 0 1.1px, transparent 1.7px),
    radial-gradient(circle at 31% 8%, rgba(226,207,255,.96) 0 1.3px, transparent 1.9px),
    radial-gradient(circle at 47% 27%, rgba(255,255,255,.86) 0 1px, transparent 1.6px),
    radial-gradient(circle at 62% 13%, rgba(220,194,255,.98) 0 1.4px, transparent 2px),
    radial-gradient(circle at 78% 35%, rgba(255,255,255,.90) 0 1px, transparent 1.6px),
    radial-gradient(circle at 91% 12%, rgba(236,224,255,.96) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 8% 61%, rgba(255,255,255,.84) 0 .9px, transparent 1.5px),
    radial-gradient(circle at 22% 78%, rgba(217,191,255,.96) 0 1.3px, transparent 1.9px),
    radial-gradient(circle at 39% 58%, rgba(255,255,255,.94) 0 1px, transparent 1.6px),
    radial-gradient(circle at 55% 72%, rgba(238,224,255,.88) 0 1.1px, transparent 1.7px),
    radial-gradient(circle at 71% 54%, rgba(255,255,255,.98) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 88% 75%, rgba(219,195,255,.92) 0 1.1px, transparent 1.7px),
    radial-gradient(circle, rgba(255,255,255,.50) 0 .72px, transparent 1px);
  background-size:
    100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%,
    100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%,
    78px 78px;
}

body::after {
  z-index: 0;
  opacity: .88;
  filter: blur(31px);
  background:
    radial-gradient(ellipse at 27% 27%, rgba(138, 47, 255, .33), transparent 29%),
    radial-gradient(ellipse at 78% 53%, rgba(219, 66, 202, .21), transparent 27%),
    radial-gradient(ellipse at 50% 94%, rgba(91, 58, 238, .26), transparent 31%);
}

.sky-effects { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.meteor {
  position: absolute;
  width: 170px;
  height: 1px;
  opacity: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(244,229,255,.94));
  box-shadow: 0 0 8px rgba(201,154,255,.72);
  transform: rotate(-28deg);
  transform-origin: right center;
  animation: meteor 13s linear infinite;
}
.meteor::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 9px #dcbaff, 0 0 18px #9f5cff;
}
.meteor.one { top: 14%; left: 58%; animation-delay: 1.4s; }
.meteor.two { top: 41%; left: 78%; width: 120px; animation-duration: 17s; animation-delay: 8.2s; }
.meteor.three { top: 72%; left: 24%; width: 145px; animation-duration: 19s; animation-delay: 13.8s; }
@keyframes meteor {
  0%, 4% { opacity: 0; transform: translate3d(0,0,0) rotate(-28deg); }
  5% { opacity: 1; }
  11% { opacity: .95; }
  15%, 100% { opacity: 0; transform: translate3d(-290px, 165px, 0) rotate(-28deg); }
}

button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .5; cursor: default; }

.shell {
  position: relative;
  z-index: 2;
  width: min(790px, 100%);
  margin: 0 auto;
  padding:
    max(28px, env(safe-area-inset-top))
    max(18px, env(safe-area-inset-right))
    max(46px, env(safe-area-inset-bottom))
    max(18px, env(safe-area-inset-left));
}

h1 { margin: 0; font-size: clamp(2.25rem, 8vw, 3.65rem); letter-spacing: -.055em; line-height: .95; }
h2 { margin: 0 0 9px; font-size: 1.28rem; letter-spacing: -.02em; }
.eyebrow { margin: 0 0 10px; font: 750 .71rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .16em; color: #7b35d2; }
.muted { color: var(--muted); }
.small { font-size: .86rem; }
.optional { color: var(--dim); font-weight: 500; font-size: .84rem; }
.hidden { display: none !important; }

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: start;
  margin: 5px 0 24px;
}
.topbar .eyebrow { color: #d9bdff; text-shadow: 0 1px 9px rgba(0,0,0,.65); }
.topbar h1 {
  background: linear-gradient(100deg, #fff 5%, #ead8ff 42%, #bf87ff 78%, #f0b4eb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 7px rgba(0,0,0,.38));
}
.topbar .quiet { color: #fff; text-decoration-color: rgba(255,255,255,.58); }

.auth-card {
  max-width: 520px;
  margin: 14vh auto 0;
  padding: 28px;
  border: 1px solid rgba(255,255,255,.72);
  background: var(--panel);
  box-shadow: 0 24px 70px rgba(0,0,0,.42);
  border-radius: 18px;
}
.auth-card p { max-width: 46ch; }

.mode-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  padding: 5px;
  margin: 0 0 14px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 14px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 16px 45px rgba(0,0,0,.23);
}
.tab {
  border: 0;
  border-radius: 9px;
  background: transparent;
  padding: 12px 10px;
  color: #665a70;
  transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}
.tab.active {
  color: #fff;
  font-weight: 750;
  background: #7534cf;
  box-shadow: 0 7px 20px rgba(112,45,215,.25);
}

.panel {
  margin-top: 12px;
  padding: 20px;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 16px;
  background: var(--panel);
  box-shadow: 0 18px 58px rgba(0,0,0,.26);
}
.panel + .panel { margin-top: 12px; }
.dev-banner {
  display: flex;
  gap: .7rem;
  align-items: baseline;
  flex-wrap: wrap;
  padding: 12px 14px;
  margin: 0 0 14px;
  border: 1px dashed rgba(104, 47, 158, .34);
  background: rgba(250, 245, 255, .97);
  color: #4f405a;
  font-size: .83rem;
}
.dev-banner strong { letter-spacing: .06em; color: #6020a9; }

.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
.wide { grid-column: 1 / -1; }
label, .field { display: block; font-weight: 680; }
.label { display: block; margin-bottom: 7px; }

input, textarea, select {
  width: 100%;
  margin-top: 7px;
  border: 1px solid #cfc6d6;
  border-radius: 10px;
  background: #fff;
  color: #111;
  padding: 12px 13px;
  outline: none;
  caret-color: #6f2fc7;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
textarea { resize: vertical; min-height: 7rem; }
input::placeholder, textarea::placeholder { color: #938a99; }
input:focus, textarea:focus, select:focus {
  border-color: #8c4ed8;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(139, 74, 216, .14);
}
select { color-scheme: light; }

.from-line { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(120px, .72fr); align-items: center; gap: 8px; }
.from-line input, .from-line select { margin-top: 0; }
.at { font-weight: 800; color: #7534cf; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.actions { margin-top: 13px; }

.primary, .secondary, .quiet {
  min-height: 42px;
  border-radius: 10px;
  padding: 10px 15px;
}
.primary {
  border: 1px solid #7f42cc;
  background: linear-gradient(135deg, #8240e8, #6426bd);
  color: #fff;
  font-weight: 760;
  box-shadow: 0 8px 24px rgba(91, 30, 181, .23);
}
.primary:hover { filter: brightness(1.06); }
.secondary {
  border: 1px solid #b69bcf;
  background: #f5effb;
  color: #4e236d;
}
.secondary:hover { background: #eee3f8; }
.quiet {
  border: 0;
  background: transparent;
  color: #6a348f;
  text-decoration: underline;
  text-decoration-color: rgba(106,52,143,.42);
  text-underline-offset: 4px;
}
.big { padding: 14px 18px; font-size: 1.04rem; }
.full { width: 100%; margin-top: 18px; }

.status { min-height: 1.45em; margin-bottom: 0; color: #625669; }
.error { color: var(--danger) !important; }
.success { color: #5c2588 !important; }

.import-summary { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.import-chip {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 4px 8px;
  border: 1px solid rgba(117, 52, 207, .23);
  border-radius: 999px;
  background: #f2e9fb;
  color: #5e2887;
  font: 700 .72rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .035em;
}

.original-block { margin-top: 18px; padding-top: 17px; border-top: 1px dashed #c9bdd1; }
.check { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; font-weight: 560; }
.check input { width: auto; margin: 0; accent-color: #7f3bcf; }
.file-list { margin-top: 10px; white-space: pre-line; color: #63596a; font: .88rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.key-panel { background: var(--panel-2); }
.key-panel p { margin-bottom: 0; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

#received-paste { min-height: 13rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .86rem; line-height: 1.45; }
#original-text { min-height: 12rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88rem; line-height: 1.5; }
#reply-text { min-height: 13rem; }

input[type="file"] { padding: 9px; }
input[type="file"]::file-selector-button {
  margin-right: 10px;
  border: 1px solid #b8a3c7;
  border-radius: 8px;
  background: #f1e9f7;
  color: #48265e;
  padding: 7px 10px;
  cursor: pointer;
}

dialog {
  width: min(700px, calc(100% - 24px));
  max-height: calc(100dvh - 24px);
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 18px;
  padding: 0;
  background: #fff;
  color: #17121c;
  box-shadow: 0 28px 90px rgba(0,0,0,.62), 0 0 55px rgba(108,48,196,.17);
}
dialog::backdrop { background: rgba(4, 1, 9, .72); backdrop-filter: blur(3px); }
.review-card { padding: 21px; }
.review-head { display: flex; justify-content: space-between; gap: 15px; align-items: start; }
.review-meta { margin: 20px 0; border-top: 1px solid #ddd5e2; }
.review-meta > div { display: grid; grid-template-columns: 108px 1fr; gap: 12px; border-bottom: 1px solid #ddd5e2; padding: 9px 0; }
dt { color: #6e6374; }
dd { margin: 0; overflow-wrap: anywhere; }
.review-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  min-height: 180px;
  max-height: 42vh;
  overflow: auto;
  background: #fbfafc;
  border: 1px solid #d8d0dd;
  border-radius: 10px;
  padding: 15px;
  color: #111;
  font: .93rem/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 15px; }
.footnote { margin-top: 25px; color: #e8dcf5; font-size: .78rem; text-align: center; text-shadow: 0 1px 7px rgba(0,0,0,.75); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.preview-note {
  margin-bottom: 14px;
  padding: 11px 13px;
  border: 1px solid rgba(117,52,207,.18);
  border-radius: 12px;
  color: #54465d;
  background: rgba(255,255,255,.96);
  font-size: .82rem;
}

@media (max-width: 600px) {
  :root { font-size: 16px; }
  .shell { padding-top: max(22px, env(safe-area-inset-top)); }
  .field-grid { grid-template-columns: 1fr; }
  .wide { grid-column: auto; }
  .from-line { grid-template-columns: minmax(0, 1fr) auto minmax(108px, .85fr); }
  .review-meta > div { grid-template-columns: 82px 1fr; }
  .panel { padding: 17px; border-radius: 14px; }
  .topbar { margin-top: 2px; }
  .auth-card { margin-top: 10vh; }
}

@media (prefers-reduced-motion: reduce) {
  .meteor { display: none; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .001ms !important; }
}