/* Tema Dra. Dani Attademo — cobre, creme e café. Carregado depois do app.css. */
:root {
  --flame: #9C6340;
  --brand: #9C6340;
  --on-brand: #FFFFFF;
  --copper: #9C6340;
  --copper-2: #B98460;
  --copper-soft: #EBD9CB;
  --ink: #3B2A21;
  --ink-2: #5A4436;
  --muted: #8B7566;
  --line: #E9DDD2;
  --bg: #F7F0EA;
  --paper: #FFFCF9;
  --gray-bg: #F1E8E0;
  --warn: #9A6A12;
  --warn-bg: #FBF0DA;
  --ok: #3F7A5C;
  --ok-bg: #E5F0E8;
  --bad: #A8443A;
  --bad-bg: #F8E5E1;
  --info: #5B6E9A;
  --info-bg: #E9EDF6;
  --radius: 18px;
  --shadow: 0 1px 2px rgba(59, 42, 33, .04), 0 12px 32px rgba(59, 42, 33, .07);
  --font: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Cormorant Garamond', 'Times New Roman', serif;
}

body { font-size: 15.5px; letter-spacing: .005em; }
h1, h2 { font-family: var(--display); font-weight: 600; letter-spacing: 0; }
h1 { font-size: 34px; }
h2 { font-size: 26px; line-height: 1.15; }
.btn { border-radius: 999px; font-weight: 500; letter-spacing: .02em; }
.btn.primary { background: linear-gradient(135deg, #B07450, #8C5536); border-color: transparent; box-shadow: 0 6px 16px rgba(140, 85, 54, .22); }
.btn.primary:hover { filter: brightness(1.05); }
.btn.dark { background: var(--ink); border-color: var(--ink); }
.field input, .field select, .field textarea, .input { border-color: #DCCDBF; border-radius: 12px; background: #FFFDFB; }
.card { box-shadow: var(--shadow); border-color: #EFE4DA; }
.chip.agendado { background: #F8EBDD; color: #8A5A1C; }

/* ---------- Página da cliente ---------- */
.pub { max-width: 580px; padding-top: 12px; }
.pub::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 420px at 50% -120px, rgba(185, 132, 96, .22), transparent 70%),
    radial-gradient(600px 400px at 110% 110%, rgba(185, 132, 96, .12), transparent 70%),
    var(--bg);
}
.brand-head { text-align: center; padding: 18px 8px 8px; }
.brand-head img { width: min(300px, 78vw); height: auto; display: block; margin: 0 auto; }
.brand-head p { color: var(--muted); font-size: 14px; margin-top: 8px; }
.brand-head .tag { font-family: var(--display); font-style: italic; font-size: 20px; color: var(--ink-2); margin-top: 6px; }
.pub-head.brand { display: block; }
.steps { margin: 18px 4px 22px; }
.steps i { height: 3px; background: #E6D6C8; }
.steps i.on { background: linear-gradient(90deg, #B98460, #9C6340); }
.step-title h2 { font-size: 28px; }
.choice { border-radius: 18px; padding: 18px; background: rgba(255, 252, 249, .92); border-color: #EFE3D8; }
.choice:hover { border-color: #C9A084; box-shadow: 0 10px 28px rgba(140, 85, 54, .12); transform: translateY(-1px); }
.choice { transition: border-color .2s, box-shadow .2s, transform .2s; }
.choice .t { font-weight: 500; font-size: 16.5px; }
.choice .price { font-family: var(--display); font-size: 20px; font-weight: 600; color: var(--copper); }
.avatar { background: var(--copper-soft); color: var(--copper); }
.summary { border-radius: 18px; background: rgba(255, 252, 249, .92); }
.cal { border-radius: 20px; background: rgba(255, 252, 249, .95); }
.cal-nav b { font-family: var(--display); font-size: 21px; font-weight: 600; }
.cal-nav button { border-radius: 50%; }
.cal-day { border-radius: 50%; font-weight: 500; max-height: 46px; }
.cal-day.free { background: #F3E6DA; color: var(--ink); }
.cal-day.free:hover { background: #E9D3C1; }
.cal-day.sel { background: linear-gradient(135deg, #B07450, #8C5536) !important; }
.slot { border-radius: 999px; border-color: #E2D3C6; font-weight: 500; background: #FFFDFB; }
.slot:hover { border-color: var(--copper); background: #FBF4EE; color: var(--copper); }
.slot-group h3 { font-family: var(--font); font-weight: 500; letter-spacing: .12em; color: var(--copper-2); }
.done-mark { background: #F1E3D7; color: var(--copper); }
.pub-foot { opacity: .8; }
.pub-foot img { height: 22px; }

/* ---------- Painel ---------- */
.login { grid-template-columns: 1fr 1fr; }
.login-art { background: linear-gradient(160deg, #F6ECE4, #EBD8C9); color: var(--ink); align-items: center; justify-content: center; text-align: center; gap: 24px; }
.login-art::after { background: radial-gradient(circle, rgba(185, 132, 96, .28), rgba(185, 132, 96, 0) 68%); }
.login-art img { height: auto; width: min(380px, 80%); margin: 0 auto; align-self: center; }
.login-art h1 { font-size: 36px; margin: 0 auto; color: var(--ink); }
.login-art h1 em { color: var(--copper); font-style: italic; }
.login-art p { color: var(--ink-2); margin: 12px auto 0; }
.login-form { background: var(--paper); }

.side { background: linear-gradient(180deg, #F3E8DF, #EEDFD3); color: var(--ink); border-right: 1px solid #E6D6C8; }
.side .logo { width: 100%; max-width: 200px; height: auto; margin: 6px auto 4px; align-self: center; }
.side .tenant { background: rgba(255, 252, 249, .7); border: 1px solid #E6D6C8; }
.side .tenant span { color: var(--muted); }
.side .tenant a { color: var(--copper); }
.nav button { color: var(--ink-2); border-radius: 999px; padding: 10px 14px; }
.nav button:hover { background: rgba(255, 252, 249, .8); color: var(--ink); }
.nav button.on { background: linear-gradient(135deg, #B07450, #8C5536); color: #fff; box-shadow: 0 6px 16px rgba(140, 85, 54, .25); }
.nav .sep { background: #E1CFC0; }
.side .me { border-top-color: #E1CFC0; color: var(--muted); }
.side .me b { color: var(--ink); }
.side .me button { color: var(--ink-2); }
.side .me button:hover { color: var(--copper); }
.top h1 { font-size: 30px; }
.stat b { font-family: var(--display); font-size: 34px; font-weight: 600; color: var(--ink); }
.appt { border-radius: 12px; }
.now-line, .now-line::before { background: var(--copper); }
.ev .dot.atendimento { background: var(--info); }
.ev .dot.chegando { background: var(--copper); }
th { color: var(--copper-2); }

/* botão Atendendo / Ausente */
.presence { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); cursor: pointer; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.presence i { width: 10px; height: 10px; border-radius: 50%; background: #C9B5A6; box-shadow: 0 0 0 3px rgba(201, 181, 166, .25); }
.presence.atendendo i { background: #4F9A72; box-shadow: 0 0 0 3px rgba(79, 154, 114, .2); }
.presence.ausente i { background: #C58A5D; box-shadow: 0 0 0 3px rgba(197, 138, 93, .22); }
.presence:hover { border-color: #CDB6A4; }

/* simulador do atendente (conversa estilo WhatsApp) */
.chat { background: #EFE5DC; border-radius: 18px; padding: 16px; height: 460px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--line); }
.bubble { max-width: 82%; padding: 9px 12px; border-radius: 14px; font-size: 14.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: 0 1px 1px rgba(0, 0, 0, .05); }
.bubble.in { align-self: flex-end; background: #DCC6B4; color: var(--ink); border-bottom-right-radius: 4px; }
.bubble.out { align-self: flex-start; background: #FFFDFB; border-bottom-left-radius: 4px; }
.bubble b { font-weight: 600; }
.chat-form { display: flex; gap: 8px; margin-top: 10px; }
.chat-form input { flex: 1; min-height: 46px; border-radius: 999px; padding: 0 18px; border: 1px solid #DCCDBF; background: #FFFDFB; }
.quick { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.quick button { border: 1px solid #E2D3C6; background: #FFFDFB; border-radius: 999px; padding: 6px 12px; cursor: pointer; font-size: 13px; color: var(--ink-2); }
.quick button:hover { border-color: var(--copper); color: var(--copper); }
.mode-opt { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--line); border-radius: 14px; cursor: pointer; background: #FFFDFB; }
.mode-opt + .mode-opt { margin-top: 8px; }
.mode-opt.on { border-color: #C9A084; background: #FBF4EE; }
.mode-opt input { accent-color: var(--copper); margin-top: 4px; }
.mode-opt b { display: block; font-weight: 500; }
.mode-opt span { color: var(--muted); font-size: 13.5px; }
.status-line { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: #FBF4EE; border: 1px solid #EBD9CB; font-size: 14.5px; }
.status-line i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.status-line.on i { background: #4F9A72; }
.status-line.off i { background: #C9B5A6; }

@media (max-width: 900px) {
  .login-art { padding: 28px 20px; }
  .login-art h1 { font-size: 26px; }
  .login-art img { width: min(260px, 70%); }
  .side .logo { max-width: 170px; }
  .top h1 { font-size: 24px; }
  .presence span { display: none; }
  .presence { padding: 0 12px; }
  .chat { height: 380px; }
}

/* tela do atendente */
.at-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 16px; align-items: start; }
.at-grid .card + .card { margin-top: 16px; }
.at-side { position: sticky; top: 90px; }
@media (max-width: 1100px) { .at-grid { grid-template-columns: 1fr; } .at-side { position: static; order: -1; } }

.chat-form input:focus-visible { outline: 3px solid rgba(156, 99, 64, .25); border-color: #C9A084; }

/* =====================================================================
   Painel — acabamento premium
   ===================================================================== */
:root { --espresso: #2A1E18; --espresso-2: #3A2A21; --champagne: #E9CBAA; --gold: #C9986C; }
body { background: #F6EFE8; }

/* barra lateral café com logo champanhe */
.side {
  background:
    radial-gradient(420px 260px at 20% -40px, rgba(201, 152, 108, .28), transparent 70%),
    radial-gradient(300px 300px at 120% 105%, rgba(201, 152, 108, .14), transparent 70%),
    linear-gradient(180deg, #2E2119, #241A15);
  color: #EADBCD; border-right: 0; padding: 22px 16px;
}
.side .logo { max-width: 176px; margin: 4px auto 18px; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .25)); }
.side .tenant { background: rgba(255, 255, 255, .04); border: 1px solid rgba(233, 203, 170, .16); border-radius: 16px; margin: 0 4px 18px; }
.side .tenant b { color: #F3E3D2; font-weight: 500; font-size: 13.5px; letter-spacing: .02em; }
.side .tenant span { color: #A99282; }
.side .tenant a { color: var(--champagne); }
.nav { gap: 4px; }
.nav button { color: #CDB8A7; border-radius: 12px; padding: 11px 14px; font-weight: 400; letter-spacing: .02em; position: relative; }
.nav button .icon { opacity: .8; }
.nav button:hover { background: rgba(255, 255, 255, .05); color: #F6E9DC; }
.nav button.on { background: linear-gradient(90deg, rgba(201, 152, 108, .26), rgba(201, 152, 108, .06)); color: #FFF4E8; box-shadow: none; font-weight: 500; }
.nav button.on::before { content: ''; position: absolute; left: -16px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, #F0D2B0, #C08A5E); }
.nav button.on .icon { opacity: 1; color: var(--champagne); }
.side .me { border-top: 1px solid rgba(233, 203, 170, .14); color: #A99282; }
.side .me b { color: #F3E3D2; font-weight: 500; }
.side .me button { color: #CDB8A7; }
.side .me button:hover { color: var(--champagne); }

/* topo */
.top { padding: 20px 32px 14px; background: rgba(246, 239, 232, .86); }
.top h1 { font-size: 32px; font-weight: 600; }
.view { padding: 8px 32px 64px; }
.iconbtn { border-radius: 12px; border-color: #E8DBCF; background: #FFFCF9; }
.presence { background: #FFFCF9; border-color: #E8DBCF; }

/* herói da agenda */
.hero {
  position: relative; overflow: hidden; border-radius: 26px; padding: 30px 34px; margin-bottom: 18px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  color: #F7EADD;
  background:
    radial-gradient(520px 260px at 100% 0%, rgba(214, 168, 128, .45), transparent 65%),
    radial-gradient(400px 240px at 0% 120%, rgba(156, 99, 64, .55), transparent 70%),
    linear-gradient(120deg, #2E2119 0%, #4A3326 55%, #7A4E35 100%);
  box-shadow: 0 18px 40px rgba(58, 38, 28, .22);
}
.hero::after {
  content: ''; position: absolute; right: -10px; top: -20px; width: 260px; height: 160px; opacity: .12; pointer-events: none;
  background: url('/img/logo-icone-claro.png') no-repeat center / contain;
}
.hero-txt { position: relative; z-index: 1; }
.hero .overline { color: var(--champagne); }
.hero h2 { font-size: 44px; line-height: 1.05; color: #FFF6EC; margin: 4px 0 8px; font-weight: 500; }
.hero p { color: #DCC7B5; }
.hero-act { display: flex; gap: 10px; flex-wrap: wrap; position: relative; z-index: 1; }
.hero .btn.primary { background: linear-gradient(135deg, #F1D5B6, #C99467); color: #2A1E18; box-shadow: 0 8px 22px rgba(0, 0, 0, .25); font-weight: 500; }
.btn.glass { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); color: #F7EADD; backdrop-filter: blur(6px); }
.btn.glass:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .35); }
.overline { font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; font-weight: 500; color: var(--gold); }

/* painel principal + coluna lateral */
.dash { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.dash-rail { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 92px; }
.dash-rail .card { padding: 18px 20px; margin: 0; }
.daybar { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.daynav { display: inline-flex; background: #FFFCF9; border: 1px solid #E8DBCF; border-radius: 999px; padding: 4px; box-shadow: 0 2px 8px rgba(58, 38, 28, .04); }
.daynav button { border: 0; background: transparent; height: 36px; min-width: 36px; padding: 0 12px; border-radius: 999px; cursor: pointer; color: var(--ink-2); display: grid; place-items: center; font-weight: 500; }
.daynav button:hover { background: #F6ECE3; }
.daynav button.today.on { background: var(--espresso); color: #F7EADD; }
.daytitle { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.daytitle b { font-family: var(--display); font-size: 26px; font-weight: 600; color: var(--ink); }
.daypick { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.daypick input { border: 1px solid #E8DBCF; background: #FFFCF9; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13.5px; color: var(--ink-2); }

/* próxima cliente */
.card.next { cursor: pointer; background: linear-gradient(160deg, #FFFCF9, #F8EDE3); border-color: #EBD9CB; transition: transform .2s, box-shadow .2s; }
.card.next:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(58, 38, 28, .12); }
.next-row { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.next-time { font-family: var(--display); font-size: 40px; font-weight: 600; color: var(--copper); line-height: 1; }
.next-row b { display: block; font-size: 16.5px; font-weight: 500; }
.next-row span { color: var(--muted); font-size: 13.5px; }
.btn.glass-light { background: #FFFCF9; border-color: #E2CDBC; color: var(--copper); }

/* números do dia */
.minis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mini { display: flex; align-items: center; gap: 10px; background: #FFFCF9; border: 1px solid #EFE4DA; border-radius: 16px; padding: 12px; }
.mini b { display: block; font-family: var(--display); font-size: 26px; line-height: 1; font-weight: 600; }
.mini span:not(.mini-ic) { font-size: 12px; color: var(--muted); letter-spacing: .02em; }
.mini-ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.mini-ic .icon { width: 16px; height: 16px; }
.mini.a .mini-ic { background: #F3E6DA; color: var(--copper); }
.mini.b .mini-ic { background: #E5F0E8; color: var(--ok); }
.mini.c .mini-ic { background: #FBF0DA; color: var(--warn); }
.mini.d .mini-ic { background: #F8E5E1; color: var(--bad); }

/* linha do dia */
.tl { list-style: none; margin: 10px 0 0; padding: 0; position: relative; }
.tl::before { content: ''; position: absolute; left: 47px; top: 6px; bottom: 6px; width: 1px; background: linear-gradient(#E3D0C0, transparent); }
.tl li { display: flex; gap: 14px; padding: 7px 0; cursor: pointer; position: relative; border-radius: 10px; }
.tl li:hover b { color: var(--copper); }
.tl time { width: 40px; flex: none; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; padding-top: 1px; }
.tl li::after { content: ''; position: absolute; left: 43px; top: 12px; width: 9px; height: 9px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 3px #FFFCF9; }
.tl li.confirmado::after { background: var(--ok); }
.tl li.concluido::after { background: #B8A89B; }
.tl li.faltou::after { background: var(--bad); }
.tl li > div { padding-left: 14px; }
.tl b { display: block; font-weight: 500; font-size: 14.5px; transition: color .15s; }
.tl span { color: var(--muted); font-size: 12.5px; }
.tl li.past { opacity: .55; }
.moves { list-style: none; margin: 10px 0 0; padding: 0; }
.moves li { display: flex; gap: 10px; padding: 8px 0; font-size: 13.5px; border-top: 1px solid #F1E7DE; }
.moves li:first-child { border-top: 0; }
.moves .dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none; background: var(--warn); }
.moves .dot.confirmou { background: var(--ok); }
.moves .dot.desmarcou { background: var(--bad); }
.moves .dot.atendimento { background: var(--info); }
.moves .dot.chegando { background: var(--copper); }
.moves time { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; }

/* grade do dia */
.day { border-radius: 22px; border-color: #EFE4DA; box-shadow: var(--shadow); background: #FFFCF9; max-height: calc(100vh - 210px); }
.day-head { background: #FFFCF9; font-family: var(--display); font-size: 19px; font-weight: 600; border-bottom-color: #F0E5DB; }
.day-head small { font-family: var(--font); font-size: 12px; }
.day-times, .day-head.corner { background: #FFFCF9; border-right-color: #F0E5DB; }
.day-col { background-image: linear-gradient(to bottom, #F3EAE2 1px, transparent 1px); border-right-color: #F0E5DB; }
.day-off { background: repeating-linear-gradient(135deg, #FAF4EF, #FAF4EF 7px, #F4EAE2 7px, #F4EAE2 14px); }
.appt { background: #FFFFFF; color: var(--ink); border-left-width: 3px; border-radius: 12px; box-shadow: 0 1px 2px rgba(58, 38, 28, .06), 0 6px 14px rgba(58, 38, 28, .06); padding: 7px 11px; border-left-color: var(--warn); }
.appt b { font-weight: 500; font-size: 13.5px; }
.appt span { color: var(--muted); opacity: 1; }
.appt.agendado { background: linear-gradient(90deg, #FFF8EC, #FFFFFF 60%); }
.appt.confirmado { background: linear-gradient(90deg, #EEF6F0, #FFFFFF 60%); color: var(--ink); border-left-color: var(--ok); }
.appt.concluido { background: #FAF6F2; color: #7D6B5E; border-left-color: #C9B8AA; }
.appt.faltou { background: linear-gradient(90deg, #FBEDEA, #FFFFFF 60%); color: var(--ink); border-left-color: var(--bad); }
.appt:hover { transform: translateY(-1px); filter: none; box-shadow: 0 10px 22px rgba(58, 38, 28, .12); }
.legend { color: var(--muted); }

/* cartões, tabelas e janelas */
.card { border-radius: 22px; padding: 24px; }
.card-head h2 { font-size: 27px; }
.table-wrap { border-radius: 20px; border-color: #EFE4DA; box-shadow: var(--shadow); background: #FFFCF9; }
th { font-size: 11px; letter-spacing: .16em; font-weight: 500; color: var(--gold); padding: 14px 16px; border-bottom-color: #F0E5DB; }
td { padding: 14px 16px; border-bottom-color: #F5ECE4; }
tbody tr.click:hover, tbody tr:hover { background: #FBF5F0; }
.toolbar .input, .toolbar select { border-radius: 999px; background: #FFFCF9; }
.overlay { background: rgba(42, 30, 24, .45); backdrop-filter: blur(4px); }
.modal { border-radius: 26px; background: #FFFCF9; box-shadow: 0 30px 80px rgba(42, 30, 24, .35); }
.modal-head { background: #FFFCF9; padding: 22px 24px 8px; }
.modal-head h2 { font-size: 28px; }
.modal-body { padding: 12px 24px 8px; }
.modal-foot { background: #FFFCF9; padding: 16px 24px 22px; }
.kv dt { color: var(--muted); }
.toast { background: var(--espresso); border-radius: 14px; box-shadow: 0 12px 30px rgba(42, 30, 24, .3); }
.toast.ok { background: #3F6B55; }
.pop { border-radius: 20px; background: #FFFCF9; }
.empty h3 { font-family: var(--display); font-size: 24px; font-weight: 600; }

/* login */
.login-art { background: radial-gradient(500px 300px at 50% 0%, rgba(214, 168, 128, .35), transparent 70%), linear-gradient(160deg, #2E2119, #4A3326 60%, #6E4630); color: #F7EADD; }
.login-art h1 { color: #FFF4E8; font-weight: 500; }
.login-art h1 em { color: var(--champagne); }
.login-art p { color: #D8C3B1; }
.login-form h2 { font-size: 34px; }

@media (max-width: 1180px) {
  .dash { grid-template-columns: 1fr; }
  .dash-rail { position: static; order: -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
@media (max-width: 900px) {
  .side .logo { max-width: 150px; }
  .top { padding: 12px 16px; }
  .view { padding: 6px 16px 60px; }
  .hero { padding: 22px; border-radius: 22px; }
  .hero h2 { font-size: 34px; }
  .hero::after { width: 160px; height: 110px; }
  .daytitle b { font-size: 21px; }
  .day { max-height: none; }
}

.login-form { background: radial-gradient(500px 360px at 80% 0%, rgba(214, 168, 128, .18), transparent 70%), #F7F0EA; }
.login-form form { background: #FFFCF9; padding: 38px 34px; border-radius: 26px; box-shadow: 0 24px 60px rgba(58, 38, 28, .10); border: 1px solid #EFE4DA; max-width: 400px; }
@media (max-width: 900px) {
  .moves-card { display: none; }
  .login-form form { padding: 28px 22px; }
}

/* tela do site */
.site-hero { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; background: linear-gradient(160deg, #FFFCF9, #F6EADF); }
.site-hero h2 { font-size: 30px; margin: 4px 0 6px; }
.site-hero > div:first-child { max-width: 560px; }
.photo-prev { width: 104px; height: 130px; border-radius: 999px 999px 16px 16px; overflow: hidden; border: 1px solid #E6D3C3; background: linear-gradient(180deg, #FFFCF9, #F0E1D4); display: grid; place-items: center; flex: none; }
.photo-prev img { width: 100%; height: 100%; object-fit: cover; }
.pair { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 14px; border: 1px solid #EFE4DA; border-radius: 16px; background: #FFFCF9; }
.pair input, .pair textarea { width: 100%; border: 1px solid #DCCDBF; border-radius: 12px; padding: 10px 12px; background: #FFFDFB; font: inherit; }
.pair .linkbtn { justify-self: end; }
.savebar { position: sticky; bottom: 16px; margin-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-radius: 18px; background: rgba(42, 30, 24, .92); backdrop-filter: blur(8px); box-shadow: 0 16px 40px rgba(42, 30, 24, .3); z-index: 5; }
.savebar .muted { color: #D8C3B1; }
.savebar .btn.primary { background: linear-gradient(135deg, #F1D5B6, #C99467); color: #2A1E18; }