/* Simple, clean layout. Content text must remain 1:1 (user-provided). */
:root{
  --bg:#0f172a;          /* slate-900 */
  --card:#111827;        /* gray-900 */
  --text:#e5e7eb;        /* gray-200 */
  --muted:#9ca3af;       /* gray-400 */
  --line:rgba(229,231,235,.14);
  --accent:#38bdf8;      /* sky-400 */
  --accent2:#34d399;     /* emerald-400 */
  --btn:#0b1220;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.55;
}

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.wrap{max-width:1100px;margin:0 auto;padding:24px 16px 64px}

.header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px;
  border:1px solid var(--line);
  background:rgba(17,24,39,.92);
  border-radius:16px;
  position:sticky;
  top:12px;
  backdrop-filter:blur(10px);
  z-index:20;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:220px;
}
.brand img{height:34px;width:auto;display:block}
.brand .name{font-weight:700;letter-spacing:.2px}

nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
  justify-content:flex-end;
}
nav a{
  display:inline-block;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid transparent;
  color:var(--text);
}
nav a:hover{
  border-color:var(--line);
  background:rgba(19,38,77,.35);
  text-decoration:none;
}

.card{
  margin-top:18px;
  padding:20px 18px;
  border:1px solid var(--line);
  background:rgba(17,24,39,.72);
  border-radius:16px;
}

h1,h2,h3{line-height:1.2;margin:0 0 12px}
h1{font-size:32px}
h2{font-size:22px;margin-top:22px}
h3{font-size:18px;margin-top:18px}
p{margin:0 0 12px}

.muted{color:var(--muted)}

.cta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  padding:14px 14px;
  border:1px dashed rgba(56,189,248,.28);
  background:rgba(2,6,23,.35);
  border-radius:14px;
  margin:16px 0;
}
.cta .label{font-weight:700}
.btns{display:flex;gap:10px;flex-wrap:wrap}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(229,231,235,.18);
  background:rgba(2,6,23,.6);
  color:var(--text);
  text-decoration:none;
  font-weight:700;
  letter-spacing:.2px;
  min-width:140px;
}
.btn:hover{border-color:rgba(110,231,255,.35);text-decoration:none}
.btn:hover{border-color:rgba(56,189,248,.35);text-decoration:none}
.btn--alt{background:rgba(6,78,59,.45);border-color:rgba(52,211,153,.28)}
.sta{font-size:12px;opacity:.9;margin-right:8px}

.table-wrap{overflow:auto;border-radius:14px;border:1px solid var(--line);background:rgba(10,18,32,.35);margin:14px 0}
table{border-collapse:collapse;width:100%;min-width:680px}
th,td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{text-align:left;color:var(--text);background:rgba(19,38,77,.25)}
tr:last-child td{border-bottom:none}

footer{
  margin-top:26px;
  padding-top:16px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:13px;
}

@media (max-width:720px){
  .header{position:static}
  .brand{min-width:unset}
  h1{font-size:26px}
}