:root {
  color-scheme: dark;
  --bg: #090b0f;
  --card: #12151a;
  --card-2: #0d1014;
  --line: #2a3038;
  --text: #f6f8fb;
  --muted: #9ca6b4;
  --blue: #0099ff;
  --blue-hover: #007ccc;
  --danger: #ff6372;
  --success: #24c780;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--bg); }

body {
  min-width: 280px;
  min-height: 100dvh;
  margin: 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(0, 153, 255, .14), transparent 36rem),
    var(--bg);
  color: var(--text);
}

button, input { font: inherit; }

.page-shell {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1.4rem;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1.2rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
}

.card {
  width: min(100%, 30rem);
  padding: clamp(1.25rem, 5vw, 2rem);
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  background: color-mix(in srgb, var(--card) 94%, transparent);
  box-shadow: 0 1.5rem 5rem rgba(0, 0, 0, .45), 0 0 2.5rem rgba(0, 153, 255, .09);
}

.brand {
  min-height: 2.4rem;
  display: grid;
  place-items: center;
  margin: 0 auto .8rem;
}
.brand img { display: block; width: min(56.25%, 11.25rem); height: auto; object-fit: contain; }

h1 { margin: 0; font-size: clamp(1.3rem, 5vw, 1.65rem); text-align: center; letter-spacing: -.02em; }
.intro { margin: .55rem auto 1.7rem; color: var(--muted); font-size: .92rem; line-height: 1.5; text-align: center; }

.field { margin-bottom: 1.35rem; }
.field > label:first-child { display: block; margin-bottom: .55rem; color: #ccd2da; font-size: .9rem; font-weight: 650; }
.input-wrap { position: relative; }
.input-icon { position: absolute; inset: 0 auto 0 .9rem; display: grid; place-items: center; pointer-events: none; }
.input-icon svg { width: 1.25rem; fill: #6f7b89; }

input[type="text"] {
  width: 100%;
  min-height: 3.25rem;
  padding: .8rem .9rem .8rem 2.9rem;
  border: 1px solid #353d47;
  border-radius: .75rem;
  outline: none;
  background: var(--card-2);
  color: var(--text);
  font-size: 1rem;
  transition: border-color .15s, box-shadow .15s;
}

input[type="text"]:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 153, 255, .2); }
input[type="text"].invalid { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(255, 99, 114, .13); }

.drop-area {
  width: 100%;
  min-height: 10.6rem;
  display: grid;
  place-items: center;
  padding: 1rem;
  overflow: hidden;
  border: 1.5px dashed #3b4652;
  border-radius: .9rem;
  background: var(--card-2);
  color: inherit;
  text-align: inherit;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s;
}

.drop-area:hover, .drop-area.dragover { border-color: var(--blue); background: rgba(0, 153, 255, .06); }
.drop-area.dragover { transform: scale(1.01); }
.drop-area.invalid { border-color: var(--danger); }
.file-input { position: fixed; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.drop-default, .preview { width: 100%; display: flex; flex-direction: column; align-items: center; gap: .45rem; text-align: center; }
.drop-default strong, .preview strong { max-width: 100%; font-size: .94rem; overflow-wrap: anywhere; }
.drop-default small, .preview small { color: var(--muted); font-size: .78rem; }
.upload-icon { width: 2.8rem; fill: var(--blue); margin-bottom: .25rem; }
.pdf-icon { width: 4.6rem; fill: #ff5364; }
#imgPreview { display: block; max-width: 100%; max-height: 11rem; border-radius: .65rem; object-fit: contain; box-shadow: 0 .8rem 1.8rem rgba(0, 0, 0, .35); }
[hidden] { display: none !important; }

.field-error { margin: .48rem 0 0; color: var(--danger); font-size: .8rem; line-height: 1.35; }

#submitBtn, #closeDialog {
  border: 0;
  border-radius: .78rem;
  background: var(--blue);
  color: white;
  font-weight: 760;
  cursor: pointer;
}

#submitBtn {
  width: 100%;
  min-height: 3.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  padding: .85rem 1.1rem;
  box-shadow: 0 .7rem 1.7rem rgba(0, 153, 255, .18);
}

#submitBtn:hover, #closeDialog:hover { background: var(--blue-hover); }
#submitBtn:focus-visible, #closeDialog:focus-visible, .community a:focus-visible { outline: 3px solid rgba(0, 153, 255, .4); outline-offset: 3px; }
#submitBtn:disabled { opacity: .66; cursor: wait; }
.send-icon { width: 1.1rem; fill: currentColor; }
#submitBtn.loading .send-icon { width: 1.15rem; height: 1.15rem; border: 2px solid rgba(255,255,255,.35); border-top-color: white; border-radius: 50%; animation: spin .75s linear infinite; fill: transparent; }

.status { margin-top: .9rem; padding: .8rem; border-radius: .65rem; font-size: .88rem; line-height: 1.4; text-align: center; }
.status.error { border: 1px solid rgba(255, 99, 114, .35); background: rgba(255, 99, 114, .09); color: #ffabb4; }

footer { color: #66717f; font-size: .75rem; text-align: center; }

.success-dialog, .source-dialog {
  width: min(calc(100% - 2rem), 28rem);
  padding: 1.6rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: #13171d;
  color: var(--text);
  box-shadow: 0 2rem 6rem rgba(0,0,0,.65);
  text-align: center;
}

.success-dialog::backdrop, .source-dialog::backdrop { background: rgba(0, 0, 0, .75); backdrop-filter: blur(4px); }
.success-dialog h2 { margin: .7rem 0 .45rem; }
.success-dialog > p { color: var(--muted); line-height: 1.45; }
.success-mark { width: 3.6rem; height: 3.6rem; display: grid; place-items: center; margin: 0 auto; border-radius: 50%; background: rgba(36, 199, 128, .14); color: var(--success); font-size: 2rem; font-weight: 800; }
.community { display: grid; gap: .65rem; margin: 1.25rem 0; padding: 1rem; border: 1px solid var(--line); border-radius: .8rem; background: var(--card-2); }
.community p { margin: 0 .2rem .2rem; color: #cbd2db; font-size: .87rem; }
.community a { display: flex; justify-content: space-between; gap: .7rem; padding: .8rem; border: 1px solid #313944; border-radius: .65rem; color: var(--muted); font-size: .82rem; text-decoration: none; }
.community a strong { color: var(--text); }
#closeDialog { min-width: 8rem; padding: .75rem 1.2rem; }

.source-dialog > h2 { margin: 0; font-size: 1.3rem; }
.source-dialog > p { margin: .45rem 0 1rem; color: var(--muted); font-size: .9rem; }
.source-options { display: grid; gap: .7rem; }
.source-options button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .85rem;
  border: 1px solid #343d48;
  border-radius: .75rem;
  background: var(--card-2);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.source-options button:hover { border-color: var(--blue); background: rgba(0, 153, 255, .07); }
.source-options svg { width: 1.8rem; flex: 0 0 auto; fill: var(--blue); }
.source-options span { display: grid; }
#cancelSource { width: 100%; margin-top: 1rem; padding: .75rem; border: 0; background: transparent; color: #b7c0cb; cursor: pointer; }

@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 420px) {
  .page-shell { place-items: start center; align-content: start; padding-top: max(.75rem, env(safe-area-inset-top)); }
  .card { padding: 1.15rem; border-radius: 1rem; }
  .brand { min-height: 2.2rem; margin-bottom: .7rem; }
  .intro { margin-bottom: 1.35rem; }
  .drop-area { min-height: 9.4rem; }
}

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