@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@600;800&family=IM+Fell+English:ital@0;1&display=swap");

:root{
  --accent:#d4af37;
  --accent-soft:#e6c96b;
  --text:#f5f1e8;
  --muted:rgba(245,241,232,.82);

  --card-bg: rgba(10,10,14,0.78);
  --border: rgba(212,175,55,0.22);
}

*{ box-sizing:border-box; }
html,body{ min-height:100%; }

body{
  margin:0;
  padding:34px;
  color:var(--text);
  font-family:"IM Fell English", ui-serif, Georgia, serif;

  background-size:cover;
  background-position:center;
  background-attachment:fixed;
}

/* darker readable overlay (no "golden trail") */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    radial-gradient(70% 60% at 50% 40%, rgba(0,0,0,0.20), rgba(0,0,0,0.82)),
    linear-gradient(to bottom, rgba(0,0,0,0.45), rgba(0,0,0,0.85)),
    rgba(0,0,0,0.55);
  z-index:-1;
}

/* App container */
#appRoot{
  max-width:1080px;
  margin:0 auto;
}

h1{
  margin:0 0 8px;
  font-family:"Cinzel", serif;
  font-size:2.6rem;
  color:var(--accent);
  letter-spacing:1.2px;
  text-shadow:0 0 18px rgba(212,175,55,0.30);
}

h2{
  margin:0 0 12px;
  font-family:"Cinzel", serif;
  color:var(--accent-soft);
  letter-spacing:.6px;
}

label{
  display:block;
  margin:6px 0;
  color:var(--muted);
}

.card{
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:18px;
  padding:22px;
  margin:18px 0;
  box-shadow:0 18px 60px rgba(0,0,0,0.80);
  backdrop-filter: blur(12px);
}

button{
  border:1px solid var(--border);
  background:rgba(0,0,0,0.35);
  color:var(--text);
  padding:10px 12px;
  border-radius:12px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 12px 30px rgba(0,0,0,0.55);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

button:hover{
  transform: translateY(-1px);
  border-color: rgba(230,201,107,0.55);
  box-shadow:0 18px 45px rgba(0,0,0,0.70);
}

button:disabled{
  opacity:.55;
  cursor:not-allowed;
}

input{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(212,175,55,0.25);
  background:rgba(0,0,0,0.45);
  color:var(--text);
}

table{
  width:100%;
  border-collapse: collapse;
  overflow:hidden;
  border-radius:14px;
  border:1px solid rgba(212,175,55,0.18);
}

th, td{
  padding:10px 10px;
  border-bottom:1px solid rgba(212,175,55,0.12);
  text-align:left;
  vertical-align:middle;
}

th{
  color:var(--accent-soft);
  font-family:"Cinzel", serif;
  letter-spacing:.4px;
}

.result{
  margin-top:12px;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(212,175,55,0.18);
  background:rgba(0,0,0,0.28);
}

@media (max-width:860px){
  body{ padding:22px; }
}