/* Identidade Auto Place aplicada à central, login e formulários. */
:root {
  color-scheme: dark;
  --navy: #07080a;
  --navy2: #15181e;
  --green: #e51e32;
  --green2: rgba(229, 30, 50, .13);
  --orange: #ff3447;
  --paper: #07080a;
  --card: #0e1014;
  --ink: #f5f6f8;
  --muted: #9ca3af;
  --line: rgba(255, 255, 255, .12);
  --red: #ff6675;
  --red2: rgba(229, 30, 50, .13);
  --blue: #7baee8;
  --blue2: rgba(76, 137, 201, .14);
  --shadow: 0 18px 54px rgba(0, 0, 0, .34);
}

body {
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    var(--paper);
  background-size: 42px 42px;
}

.logo {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  box-shadow: none;
}

.logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.login-brand > .logo {
  width: 76px;
  height: 76px;
}

.side-brand .logo {
  width: 48px;
  height: 48px;
}

.eyebrow,
.login-points b,
.sprint-info .gate b {
  color: var(--orange);
}

.login {
  background: #090a0d;
}

.login-brand {
  isolation: isolate;
  background:
    linear-gradient(90deg, rgba(7, 8, 10, .98) 0%, rgba(7, 8, 10, .84) 58%, rgba(7, 8, 10, .58) 100%),
    url('/hero-sports-car.png') center / cover;
}

.login-brand::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to right, #000, transparent 82%);
}

.login-brand::after {
  width: 2px;
  height: 38%;
  right: 8%;
  top: 14%;
  border: 0;
  border-radius: 0;
  background: var(--green);
  box-shadow: 0 0 38px rgba(229, 30, 50, .72);
  transform: rotate(24deg);
}

.login-brand h1 {
  max-width: 760px;
  font-family: "Arial Narrow", "Roboto Condensed", sans-serif;
  font-weight: 900;
  letter-spacing: -.045em;
  text-transform: uppercase;
}

.login-brand p,
.login-points div,
.side-brand small {
  color: #a9afb9;
}

.login-points div {
  border-color: rgba(255, 255, 255, .12);
  border-radius: 4px;
  background: rgba(14, 16, 20, .72);
  backdrop-filter: blur(12px);
}

.login-panel {
  background:
    radial-gradient(circle at 100% 0, rgba(229, 30, 50, .1), transparent 36%),
    #090a0d;
}

.login-card,
.panel,
.editor-meta,
.question,
.task,
.requirement,
.interview-card,
.stat,
.pill,
.shared-link,
.interview-empty {
  border-color: var(--line);
  background: rgba(14, 16, 20, .96);
  box-shadow: none;
}

.login-card {
  border-top: 2px solid var(--green);
  border-radius: 6px;
  padding: 32px;
  box-shadow: var(--shadow);
}

.login-card h2,
.page-head h2,
.public-intro h1,
.section-head h3,
.question h4 {
  color: var(--ink);
}

.field span,
.field > label {
  color: #89919e;
}

.field input,
.field textarea,
.field select,
.control,
.toolbar input,
.toolbar select {
  border-color: var(--line);
  border-radius: 4px;
  background: #15181e;
  color: var(--ink);
}

.field input::placeholder,
.field textarea::placeholder,
.control::placeholder {
  color: #626a77;
}

.field input:focus,
.field textarea:focus,
.field select:focus,
.control:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(229, 30, 50, .14);
}

.btn {
  border-color: var(--line);
  border-radius: 4px;
  background: #15181e;
  color: var(--ink);
}

.btn:hover {
  border-color: rgba(255, 255, 255, .32);
  background: #1b1f26;
}

.btn.primary,
.btn.navy {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
}

.btn.primary:hover,
.btn.navy:hover {
  border-color: var(--orange);
  background: var(--orange);
}

.error {
  border: 1px solid rgba(255, 102, 117, .3);
}

.sidebar {
  border-right: 1px solid var(--line);
  background: #090a0d;
}

.nav button {
  border-radius: 4px;
  color: #939ba7;
}

.nav button:hover,
.nav button.active {
  background: rgba(229, 30, 50, .12);
  color: #fff;
}

.nav button.active {
  box-shadow: inset 3px 0 var(--green);
}

.side-footer {
  border-color: var(--line);
}

.side-footer button {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #15181e;
}

.topbar,
.public-progress {
  border-color: var(--line);
  background: rgba(7, 8, 10, .9);
  color: var(--ink);
}

.sync i,
.progress i {
  background: var(--green);
}

.sync.ok i {
  background: #61d69d;
}

.hero,
.sprint-info,
.public-intro {
  border: 1px solid var(--line);
  border-radius: 6px;
  background:
    linear-gradient(115deg, rgba(7, 8, 10, .96), rgba(18, 20, 25, .86)),
    url('/precision-detail.png') center / cover;
}

.hero::after {
  border-color: rgba(229, 30, 50, .18);
}

.hero p,
.sprint-info p,
.public-intro p {
  color: #abb2bd;
}

.quick button,
.options label,
.scale label {
  border-color: var(--line);
  border-radius: 4px;
  background: #15181e;
  color: var(--ink);
}

.quick button:hover,
.options label:hover,
.scale label:hover {
  border-color: rgba(255, 255, 255, .3);
}

.options label:has(input:checked) {
  border-color: var(--green);
  background: rgba(229, 30, 50, .15);
  color: #fff;
}

.scale label:has(input:checked) {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
}

.options input,
.field.consent-field input[type="checkbox"] {
  accent-color: var(--green);
}

.question {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  padding: 17px;
}

.question.answered {
  border-left-color: var(--green);
}

.question.answered::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 54px;
  height: 2px;
  background: var(--green);
  box-shadow: 0 0 18px rgba(229, 30, 50, .7);
}

.question > p,
.interview-card p,
.task-row p,
.page-head p {
  color: var(--muted);
}

.probe,
.md blockquote {
  border-left: 2px solid var(--green);
  border-radius: 2px;
  background: rgba(229, 30, 50, .08);
  color: #c3c8d0;
}

.public-form {
  background:
    radial-gradient(circle at 85% 8%, rgba(229, 30, 50, .1), transparent 26%),
    var(--paper);
}

.public-form-header {
  border-color: var(--line);
  background: rgba(7, 8, 10, .94);
  backdrop-filter: blur(16px);
}

.public-form-header > span {
  color: #9098a4;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.public-intro {
  position: relative;
  overflow: hidden;
  border-top: 2px solid var(--green);
}

.public-intro::after {
  content: "";
  position: absolute;
  width: 120px;
  height: 2px;
  right: -18px;
  top: 34px;
  background: var(--green);
  box-shadow: 0 0 25px rgba(229, 30, 50, .7);
  transform: rotate(-24deg);
}

.public-identification,
.public-submit {
  border-radius: 6px;
}

.public-consent {
  border-color: rgba(229, 30, 50, .25);
  border-radius: 4px;
  background: rgba(229, 30, 50, .08);
}

.field.consent-field span {
  color: #d5d8de;
}

.public-progress {
  border-radius: 4px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .28);
}

.progress {
  background: #242831;
}

.public-submit {
  border-top: 2px solid var(--green);
}

.public-message-icon {
  background: rgba(229, 30, 50, .14);
  color: var(--orange);
}

.public-message.success .public-message-icon {
  background: rgba(97, 214, 157, .13);
  color: #61d69d;
}

.share-panel {
  border-top: 2px solid var(--green);
  background: linear-gradient(120deg, #0e1014, #15181e);
}

.status {
  background: #1c2027;
  color: #c2c7ce;
}

.status.completed,
.pill.done,
.accept {
  background: rgba(97, 214, 157, .11);
  color: #80e2b5;
}

.status.draft {
  background: rgba(229, 30, 50, .11);
  color: #ff8994;
}

.tag {
  background: #20242b;
  color: #b2b8c1;
}

.tag.p0 {
  background: rgba(229, 30, 50, .16);
  color: #ff8994;
}

.tag.p1 {
  background: rgba(255, 183, 77, .12);
  color: #ffc46f;
}

.check {
  border-color: #5e6672;
  border-radius: 4px;
}

.check:checked {
  border-color: var(--green);
  background: var(--green);
}

.task-detail {
  border-color: var(--line);
}

.filter-list button {
  color: #b6bcc5;
}

.filter-list button.active,
.filter-list button:hover {
  background: rgba(229, 30, 50, .1);
  color: #fff;
}

.md {
  color: #c7cbd2;
}

.md pre {
  background: #07080a;
  color: #d6dae0;
}

.md th,
.md td {
  border-color: var(--line);
}

.editor-actions {
  border-color: var(--line);
  border-radius: 4px;
  background: rgba(14, 16, 20, .95);
}

.toast {
  border: 1px solid rgba(229, 30, 50, .32);
  border-radius: 4px;
  background: #15181e;
}

.spinner {
  border-color: #2a2f38;
  border-top-color: var(--green);
}

@media (max-width: 580px) {
  .login-panel {
    min-height: 100vh;
  }

  .login-card {
    padding: 24px 18px;
  }

  .public-intro {
    padding: 22px 18px;
  }

  .question {
    padding: 14px 12px;
  }
}