/* Unified earth‑tone theme used across pages */
:root[data-theme='dark'] {
  --bg:#1b1f1a; --panel:#23281F; --fg:#e9e4d4; --muted:#b1a79a; --accent:#a47551; --accent-2:#c2b280; --card-border:#3a3a33;
}
:root[data-theme='light'] {
  --bg:#f4f1e8; --panel:#ffffff; --fg:#2e2a24; --muted:#6f675f; --accent:#8b5e3c; --accent-2:#b58c5a; --card-border:#e2e8f0;
}

/* Base */
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color: var(--fg); background: var(--bg); }
.wrap { max-width: 1100px; margin: 0 auto; padding: 24px; }

/* Cards, headings, layout helpers */
.card { background: var(--panel); border: 1px solid var(--card-border); border-radius: 12px; padding: 18px; }
h1 { margin: 0 0 16px; font-weight: 600; font-size: 24px; }
label { font-size: 14px; color: var(--muted); }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.mt { margin-top: 12px; }
.muted { color: var(--muted); }

/* Inputs and buttons */
input, select { width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--card-border); background: var(--panel); color: var(--fg); }
:root[data-theme='light'] input, :root[data-theme='light'] select { background: #ffffff; color: #2e2a24; border-color: var(--card-border); }
input[type=file]{ padding: 8px; }
button { background: var(--accent); color: #fff; border: none; padding: 10px 14px; border-radius: 8px; cursor: pointer; }
button:hover { filter: brightness(0.95); }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--card-border); background: var(--panel); color: var(--fg); text-decoration: none; font-weight: 600; }
.btn.primary { background: linear-gradient(180deg, #6b4f3b, #5a412f); border-color: #6b4f3b; color: #f7f4ec; }
:root[data-theme='light'] .btn { background: #efe9dc; color: #2e2a24; }
:root[data-theme='light'] .btn.primary { background: linear-gradient(180deg, #b58c5a, #8b5e3c); color: #fff; border-color: transparent; }
.toggle { border: 1px solid var(--card-border); background: var(--panel); color: var(--fg); padding: 8px 10px; border-radius: 10px; cursor: pointer; }

/* Footer */
.footer { display:flex; justify-content:space-between; align-items:center; gap:12px; padding: 28px 0; color: var(--muted); font-size: 13px; border-top: 1px solid var(--card-border); margin-top: 32px; }
.amp-footer { margin:28px auto 20px; max-width:1100px; padding-top:12px; border-top:1px solid var(--card-border); color:var(--muted); font-size:12px; text-align:left }

/* Overlay + loader */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); display: none; align-items: center; justify-content: center; z-index: 1000; }
.overlay.show { display: flex; }
.loader { display: flex; flex-direction: column; align-items: center; gap: 14px; background: var(--panel); border: 1px solid var(--card-border); padding: 24px 28px; border-radius: 12px; min-width: 280px; }
.spinner { width: 48px; height: 48px; border-radius: 50%; border: 4px solid var(--card-border); border-top-color: var(--accent); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.progress { width: 100%; height: 6px; border-radius: 999px; background: #2b3126; overflow: hidden; }
:root[data-theme='light'] .progress { background: #e5e7eb; }
.bar { width: 0%; height: 100%; background: var(--accent); transition: width .4s ease; }
.tip { color: var(--muted); font-size: 12px; text-align: center; }

/* Toolbar + actions */
.toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px }
.actions { display:flex; align-items:center; gap:10px }

/* Floating home */
.fab-home{ position:fixed; left:16px; bottom:16px; display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border-radius:999px; border:1px solid var(--card-border); background:var(--panel); color:var(--fg); text-decoration:none; font-weight:600; box-shadow:0 6px 20px rgba(0,0,0,.25); opacity:.95; transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease }
.fab-home:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.30); opacity:1 }
:root[data-theme='light'] .fab-home{ background:#f8fafc; color:#0b1220; box-shadow:0 6px 20px rgba(15,23,42,.12) }

/* Optional code + panel helpers used on landing */
.panel { background: radial-gradient(1500px 800px at 100% -200%, rgba(125,211,252,.06), transparent), var(--panel); border: 1px solid var(--card-border); border-radius: 14px; padding: 16px; min-height: 240px; }
.code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: 12px; color: #cbd5e1; }
@media (max-width: 940px) { .row, .row3 { grid-template-columns: 1fr; } }