:root{
  --bg:#0b0a0d; --panel:#171523; --text:#f2eef7; --muted:#bfb7c9;
  --gold:#d7b35a; --gold2:#f0d58a; --wine:#6e1031;
  --border:rgba(215,179,90,.18); --shadow:0 18px 45px rgba(0,0,0,.55);
  --r:16px;
}
*{box-sizing:border-box}
body{
  margin:0; color:var(--text);
  font:15px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(900px 480px at 15% -10%, rgba(110,16,49,.55), transparent 60%),
    radial-gradient(900px 560px at 85% 0%, rgba(215,179,90,.18), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, #07060a 100%);
}
a{color:var(--gold2); text-decoration:none}
a:hover{color:#fff1bf; text-decoration:underline}
h1{margin:14px 0 10px; font-size:30px; font-weight:900;
  background:linear-gradient(90deg,var(--gold2),var(--gold),#ffefb2);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
h2{margin:14px 0 10px}
nav{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between;
  padding:12px 14px; margin:12px;
  background:linear-gradient(180deg, rgba(23,21,35,.92), rgba(18,16,24,.86));
  border:1px solid rgba(215,179,90,.22); border-radius:var(--r);
  box-shadow:var(--shadow);
}
nav a{
  padding:8px 10px; border-radius:12px;
  border:1px solid rgba(215,179,90,.14);
  background:rgba(0,0,0,.16);
}
nav a:hover{background:rgba(110,16,49,.22); border-color:rgba(215,179,90,.26); text-decoration:none}
form, table, article, .card, pre{
  margin:12px; border-radius:var(--r);
}
input, textarea, select{
  width:100%; padding:10px 12px; border-radius:12px;
  border:1px solid rgba(215,179,90,.18);
  background:rgba(8,7,12,.55); color:var(--text); outline:none;
}
textarea{min-height:220px}
button{
  padding:10px 14px; border-radius:12px; border:1px solid rgba(215,179,90,.28);
  color:#1a0f16; font-weight:900; cursor:pointer;
  background:linear-gradient(180deg,#f3dc98,#d7b35a);
  box-shadow:0 12px 28px rgba(0,0,0,.45);
}
button:hover{filter:brightness(1.04)}
table{
  width:calc(100% - 24px); border-collapse:collapse; overflow:hidden;
  border:1px solid rgba(215,179,90,.18); background:rgba(15,13,20,.55);
  box-shadow:0 10px 22px rgba(0,0,0,.45);
}
th,td{padding:10px 12px; border-bottom:1px solid rgba(215,179,90,.12); vertical-align:top}
th{background:linear-gradient(180deg, rgba(110,16,49,.35), rgba(0,0,0,.20)); color:#ffe8aa}
tr:hover td{background:rgba(110,16,49,.12)}
article{
  padding:14px; border:1px solid rgba(215,179,90,.14);
  background:rgba(0,0,0,.18); white-space:pre-wrap; line-height:1.65;
}
pre{
  padding:12px; background:rgba(0,0,0,.28);
  border:1px solid rgba(215,179,90,.16); overflow:auto;
}

/* Article components: Infobox */
.article-wrap{ display: flow-root; }

.infobox{
  float:right;
  width:320px;
  margin:0 0 12px 16px;
  border:1px solid rgba(215,179,90,.24);
  background: rgba(0,0,0,.22);
  border-radius: 16px;
  overflow:hidden;
  box-shadow: 0 10px 22px rgba(0,0,0,.45);
  font-size:14px;
  line-height:1.35;
}

.infobox-title{
  margin:0;
  padding:10px 12px;
  text-align:center;
  font-size:18px;
  font-weight:900;
  color: #ffe8aa;
  border-bottom:1px solid rgba(215,179,90,.18);
  background: linear-gradient(180deg, rgba(110,16,49,.35), rgba(0,0,0,.20));
}

.infobox-image{ padding:12px; text-align:center; }
.infobox-image img{
  max-width:100%;
  height:auto;
  border-radius: 14px;
  border:1px solid rgba(215,179,90,.18);
  background:#000;
}
.infobox-caption{
  margin-top:6px;
  font-size:12px;
  color: rgba(255,255,255,.65);
}

.infobox-table{ width:100%; border-collapse:collapse; }
.infobox-table th, .infobox-table td{
  border-top:1px solid rgba(215,179,90,.12);
  padding:8px 10px;
  vertical-align:top;
}
.infobox-table th{
  width:38%;
  text-align:left;
  font-weight:800;
  color: #ffe8aa;
}
.infobox-table td{ color: rgba(255,255,255,.86); }

/* Mobile: infobox on top */
@media (max-width: 720px){
  .infobox{ float:none; width:auto; margin:0 0 12px 0; }
}