:root {
  --bg: #f6f7fb; --card: #fff; --line: #e5e7eb; --text: #172033; --muted: #697386;
  --primary: #7c3aed; --input: #fff; --inputText: #172033; --inputLine: #d7dce5;
  --label: #3d4657; --buttonText: #fff; --danger: #fff1f2; --dangerText: #9f1239;
  --ok: #ecfdf3; --okText: #166534; --shadow: 0 18px 50px rgba(30, 41, 59, .1);
  --font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; padding: 0; overflow-x: hidden; background: var(--bg); color: var(--text); font-family: var(--font); }
.wrap { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: 28px 16px; background: var(--bg); }
.card { width: 100%; max-width: 760px; padding: 28px; border: 1px solid var(--line); border-radius: 22px; background: var(--card); box-shadow: var(--shadow); }
.card[data-plenty-screen-template="list"] { max-width: 1180px; }
.logo-wrap { display: none; align-items: center; justify-content: center; margin: 0 auto 16px; }
.logo-wrap.on { display: flex; }
.logo { display: block; max-height: 92px; object-fit: contain; }
.title { margin: 0 0 7px; color: var(--text); font-size: 26px; font-weight: 900; line-height: 1.18; text-align: center; }
.subtitle { margin: 0 0 24px; color: var(--muted); font-size: 15px; line-height: 1.5; text-align: center; }
.label { color: var(--label); font-weight: 800; }
.input, .select, .textarea { display: block; width: 100%; max-width: 100%; min-width: 0; min-height: 50px; padding: 0 14px; border: 1px solid var(--inputLine); border-radius: 11px; outline: 0; background: var(--input); color: var(--inputText); font: 600 15px/1.25 var(--font); transition: .12s; }
.input[type="date"] { padding-block: 0; appearance: none; -webkit-appearance: none; line-height: normal; }
.input[type="date"]::-webkit-date-and-time-value { display: flex; height: 100%; min-width: 0; align-items: center; text-align: left; }
.input[type="date"]::-webkit-datetime-edit { display: flex; height: 100%; align-items: center; padding: 0; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent); }
.textarea { min-height: 110px; padding-block: 13px; resize: vertical; }
.status { display: none; padding: 12px 14px; border-radius: 11px; font-size: 14px; font-weight: 700; }
.status.show { display: block; }
.status.error { background: var(--danger); color: var(--dangerText); }
.status.success { background: var(--ok); color: var(--okText); }
.actions { display: grid; gap: 9px; }
.btn { display: flex; width: 100%; min-height: 52px; align-items: center; justify-content: center; border: 0; border-radius: 11px; background: var(--primary); color: var(--buttonText); cursor: pointer; font-size: 16px; font-weight: 900; text-decoration: none; transition: .12s; }
.btn:hover { filter: brightness(.95); }
.btn:disabled { cursor: wait; opacity: .7; }
.foot { margin-top: 4px; color: var(--muted); font-size: 11.5px; line-height: 1.45; text-align: center; }
.loading { padding: 30px 10px; color: var(--muted); font-weight: 700; text-align: center; }
.hp { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
body.is-embed { background: transparent; }
.is-embed .wrap { min-height: 0; align-items: flex-start; padding: 0; background: transparent; }
.is-embed .card { max-width: none; border-radius: 0; box-shadow: none; }
@media (max-width: 680px) {
  .wrap { padding: 14px 10px; }
  .card { padding: 22px 16px; border-radius: 16px; }
  .title { font-size: 22px; }
  .subtitle { margin-bottom: 20px; font-size: 14px; }
  .input, .select { height: 48px; min-height: 48px; }
  .is-embed .wrap { padding: 0; }
  .is-embed .card { padding: 16px 12px; border-radius: 0; }
}

/* Login da rota raiz */
.login-page { position: relative; overflow: hidden; padding-block: 36px; }
.login-page::before, .login-page::after { position: absolute; border-radius: 999px; content: ""; pointer-events: none; }
.login-page::before { width: 540px; height: 540px; top: -300px; right: -220px; background: radial-gradient(circle, color-mix(in srgb, var(--primary) 11%, transparent), transparent 70%); }
.login-page::after { width: 460px; height: 460px; bottom: -300px; left: -190px; background: radial-gradient(circle, color-mix(in srgb, var(--primary) 8%, transparent), transparent 72%); }
.login-shell { z-index: 1; width: 100%; max-width: 448px; }
.login-brand { margin-bottom: 28px; }
.login-brand .logo { width: 176px; max-width: 55vw; }
.login-card { max-width: 448px; padding: 34px; }
.login-field { margin-bottom: 16px; }
.login-field .label { display: block; margin-bottom: 7px; font-size: 12px; }
.login-input-wrap { position: relative; }
.login-password .input { padding-right: 74px; }
.login-password-toggle { position: absolute; top: 9px; right: 8px; min-height: 32px; padding-inline: 8px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; font-size: 11px; font-weight: 800; }
.login-password-toggle:hover { background: #f1f5f9; color: var(--label); }
.login-error { margin: 2px 0 10px; }
.login-legal { margin-top: 17px; }
.login-help { margin-top: 24px; padding-top: 21px; border-top: 1px solid var(--line); }
.login-footer { position: relative; z-index: 1; margin-top: 24px; text-align: center; }
.login-links { display: flex; justify-content: center; gap: 12px 16px; flex-wrap: wrap; font-size: 11.5px; }
.login-footer a { color: var(--muted); font-weight: 700; text-decoration: none; }
.login-footer a:hover { color: var(--primary); text-decoration: underline; }
.login-copy { margin-top: 11px; color: var(--muted); font-size: 11px; }
@media (max-width: 520px) {
  .login-page { align-items: flex-start; padding: 42px 16px 28px; }
  .login-brand { margin-bottom: 26px; }
  .login-brand .logo { width: 162px; }
  .login-card { padding: 28px 22px; }
  .login-links { gap: 9px 13px; }
}