@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Lora:ital,wght@0,400;0,500;1,400&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #0e0b07;
  --bg2:       #1a1208;
  --bg3:       #241a0c;
  --amber:     #d4a017;
  --gold:      #c5960c;
  --gold-dim:  #7a5c08;
  --text:      #e8d5a3;
  --text-dim:  #8a7050;
  --border:    #3a2a10;
  --border2:   #5a4020;
  --red:       #cc2222;
  --green:     #22aa44;
  --blue:      #2255cc;
  --yellow:    #bb8800;
  --radius:    6px;
}

html, body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: 'Lora', serif;
  font-size: 15px;
  line-height: 1.5;
}

h1, h2, h3, h4 { font-family: 'Cinzel', serif; letter-spacing: .04em; }

a { color: var(--amber); }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 20px; border-radius: var(--radius);
  font-family: 'Cinzel', serif; font-size: 14px; font-weight: 600;
  cursor: pointer; border: 1px solid transparent;
  transition: filter .15s, transform .1s;
  user-select: none;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .4; cursor: not-allowed; }

.btn-primary {
  background: linear-gradient(135deg, #b88010, #d4a017);
  color: #0e0b07; border-color: #c5960c;
}
.btn-primary:hover:not(:disabled) { filter: brightness(1.15); }

.btn-ghost {
  background: transparent; color: var(--amber); border-color: var(--border2);
}
.btn-ghost:hover:not(:disabled) { background: #2a1f0a; }

.btn-danger { background: #4a1010; color: #e88; border-color: #7a2020; }
.btn-danger:hover:not(:disabled) { filter: brightness(1.2); }

.btn-lg { padding: 13px 30px; font-size: 16px; }
.btn-sm { padding: 6px 14px; font-size: 13px; }

/* ── Inputs ── */
input[type="text"] {
  width: 100%; padding: 10px 14px;
  background: var(--bg3); color: var(--text);
  border: 1px solid var(--border2); border-radius: var(--radius);
  font-family: 'Lora', serif; font-size: 15px;
  outline: none; transition: border-color .15s;
}
input[type="text"]:focus { border-color: var(--amber); }
input[type="text"]::placeholder { color: var(--text-dim); }

/* ── Panel / Card ── */
.panel {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px;
}
.panel-title {
  font-family: 'Cinzel', serif; font-size: 13px; color: var(--amber);
  letter-spacing: .08em; text-transform: uppercase; margin-bottom: 10px;
}

/* ── Toast / Notification ── */
#toast {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%);
  background: #1a0808; color: #e88; border: 1px solid #7a2020;
  border-radius: var(--radius); padding: 10px 22px; font-size: 14px;
  z-index: 9999; pointer-events: none;
  opacity: 0; transition: opacity .3s;
}
#toast.show { opacity: 1; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }