/* Vastu Guru — earthy palette: terracotta, sand, deep leaf green. */

:root {
  --terra: #B4532A;
  --terra-dark: #8C3B1B;
  --sand: #F6EFE4;
  --sand-deep: #EDE2CE;
  --leaf: #2F5D3A;
  --ink: #2B2118;
  --muted: #7A6A57;
  --card: #FFFDF8;
  --danger: #A62617;
  --ok: #2F7D3A;
  --radius: 14px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Noto Sans Telugu", "Gautami", Georgia, "Segoe UI", sans-serif;
  background: var(--sand);
  color: var(--ink);
  line-height: 1.55;
}

header {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px;
  background: linear-gradient(120deg, var(--terra-dark), var(--terra));
  color: #fff;
  position: sticky; top: 0; z-index: 20;
}
header .brand { font-size: 1.25rem; font-weight: 700; letter-spacing: .3px; }
header .brand small { display: block; font-size: .68rem; font-weight: 400; opacity: .85; }
header .spacer { flex: 1; }

.badge {
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.35);
  padding: 5px 12px; border-radius: 999px; font-size: .85rem;
}

button {
  font-family: inherit; font-size: .95rem;
  border: 0; border-radius: 10px; padding: 10px 18px;
  background: var(--terra); color: #fff; cursor: pointer;
}
button:hover { background: var(--terra-dark); }
button.secondary { background: transparent; color: var(--terra-dark); border: 1.5px solid var(--terra); }
button.secondary:hover { background: var(--sand-deep); }
button:disabled { opacity: .55; cursor: wait; }

main { max-width: 980px; margin: 0 auto; padding: 20px 14px 60px; }

.card {
  background: var(--card);
  border: 1px solid var(--sand-deep);
  border-radius: var(--radius);
  padding: 22px;
  margin: 16px 0;
  box-shadow: 0 2px 10px rgba(90,60,30,.06);
}

h1 { font-size: 1.7rem; margin: 8px 0 4px; color: var(--terra-dark); }
h2 { font-size: 1.15rem; color: var(--leaf); margin: 4px 0 12px; }
.sub { color: var(--muted); font-size: .92rem; }

/* Hero grid of feature points */
.points { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 14px; }
.points div { background: var(--sand); border-radius: 10px; padding: 12px 14px; font-size: .9rem; }
.points b { color: var(--terra-dark); }

/* Forms */
input, select, textarea {
  font-family: inherit; font-size: .95rem;
  width: 100%; padding: 10px 12px; margin: 6px 0 12px;
  border: 1.5px solid var(--sand-deep); border-radius: 10px;
  background: #fff; color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--terra); }
label { font-size: .88rem; color: var(--muted); }

.auth-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.auth-tabs button { flex: 1; background: var(--sand); color: var(--ink); }
.auth-tabs button.active { background: var(--terra); color: #fff; }

.error { color: var(--danger); font-size: .88rem; min-height: 1.2em; }
.notice { color: var(--ok); font-size: .88rem; }

/* Upload area */
.drop {
  border: 2px dashed var(--terra);
  border-radius: var(--radius);
  padding: 26px; text-align: center; cursor: pointer;
  background: #fff; color: var(--muted);
}
.drop.has-image { padding: 10px; }
.drop img { max-width: 100%; max-height: 320px; border-radius: 8px; }

.controls { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; margin-top: 14px; }
@media (max-width: 640px) { .controls { grid-template-columns: 1fr; } }

/* Chat */
#thread { display: flex; flex-direction: column; gap: 12px; margin: 14px 0; }
.msg { max-width: 88%; padding: 12px 16px; border-radius: var(--radius); font-size: .95rem; }
.msg.user { align-self: flex-end; background: var(--terra); color: #fff; border-bottom-right-radius: 4px; }
.msg.assistant { align-self: flex-start; background: #fff; border: 1px solid var(--sand-deep); border-bottom-left-radius: 4px; }
.msg.assistant h3 { color: var(--terra-dark); font-size: 1rem; margin: 14px 0 4px; }
.msg.assistant h3:first-child { margin-top: 0; }
.msg.assistant ul { margin: 6px 0; padding-left: 20px; }
.msg .plan-thumb { max-width: 220px; border-radius: 8px; display: block; margin-bottom: 6px; }
.msg .fee { display: block; margin-top: 8px; font-size: .72rem; opacity: .75; }
.msg.thinking { color: var(--muted); font-style: italic; background: var(--sand); border: 0; }

.chatbar { display: flex; gap: 10px; }
.chatbar textarea { flex: 1; resize: none; height: 66px; margin: 0; }
.chatbar button { align-self: flex-end; }

/* Top-up modal */
.modal-bg {
  position: fixed; inset: 0; background: rgba(43,33,24,.55);
  display: flex; align-items: center; justify-content: center; z-index: 50;
}
.modal { background: var(--card); border-radius: var(--radius); padding: 26px; width: min(420px, 92vw); }
.topup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }

.hidden { display: none !important; }

footer { text-align: center; color: var(--muted); font-size: .8rem; padding: 26px 10px; }
footer a { color: var(--terra-dark); }