/* ExpGames roster: styled after the SWTOR interface (holo-blue panels, gold title ribbons, notched buttons, corner brackets). */
:root {
  --bg0:#03060c; --bg1:#07101c; --panel:rgba(10,22,38,.88); --panel2:rgba(6,14,26,.92);
  --cyan:#78cdff; --cyan-d:#3c7ea8; --cyan-g:rgba(120,205,255,.35); --gold:#ecc458; --gold-d:#a8883a;
  --text:#d6e6f5; --muted:#7a92ab; --red:#e0524f; --green:#5fe08a; --line:rgba(120,205,255,.22);
  --ui:"Rajdhani","Segoe UI",system-ui,sans-serif; --title:"Cinzel","Trajan Pro","Times New Roman",serif;
}
* { box-sizing:border-box; }
html { background:var(--bg0); }
body { margin:0; color:var(--text); font:500 16px/1.45 var(--ui); letter-spacing:.015em; min-height:100vh;
  background:
    radial-gradient(1200px 520px at 50% -140px, rgba(60,126,168,.28), transparent 70%),
    radial-gradient(900px 500px at 100% 100%, rgba(120,40,70,.14), transparent 70%),
    linear-gradient(180deg, var(--bg1), var(--bg0) 60%);
  background-attachment:fixed; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 1 55 16v32L28 63 1 48V16zM28 63v33M1 48 28 63 55 48' fill='none' stroke='%2378cdff' stroke-opacity='.06'/%3E%3C/svg%3E"); }
a { color:var(--cyan); text-decoration:none; } a:hover { color:#fff; text-shadow:0 0 8px var(--cyan-g); }

/* ---------- top rail */
header { position:sticky; top:0; z-index:5; display:flex; flex-wrap:wrap; align-items:center; gap:22px; padding:0 28px; height:62px;
  background:linear-gradient(180deg, rgba(8,18,32,.97), rgba(5,11,20,.97)); border-bottom:1px solid var(--cyan-d); box-shadow:0 2px 22px rgba(60,126,168,.28); }
header::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:linear-gradient(90deg, transparent, var(--cyan), transparent); opacity:.7; }
.brand { display:flex; align-items:center; gap:10px; font:700 19px var(--title); letter-spacing:.2em; color:#e8f3ff; white-space:nowrap; }
.brand span { color:var(--gold); } .brand svg { width:30px; height:30px; filter:drop-shadow(0 0 6px var(--cyan-g)); }
nav { display:flex; flex-wrap:wrap; gap:2px; flex:1; height:100%; align-items:stretch; }
nav a { position:relative; display:flex; align-items:center; padding:0 16px; font:600 15px var(--ui); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
nav a::after { content:""; position:absolute; left:14px; right:14px; bottom:0; height:3px; background:var(--cyan); box-shadow:0 0 12px var(--cyan); transform:scaleX(0); transition:transform .18s; }
nav a:hover { color:#fff; text-shadow:none; } nav a:hover::after { transform:scaleX(.5); } nav a.on { color:#fff; background:linear-gradient(180deg, transparent, rgba(120,205,255,.14)); } nav a.on::after { transform:scaleX(1); }
.who { color:var(--muted); font-size:14px; letter-spacing:.06em; display:flex; align-items:center; gap:10px; }

/* ---------- buttons */
.btn, button { font:700 13px var(--ui); letter-spacing:.14em; text-transform:uppercase; color:#e4f3ff; cursor:pointer; padding:7px 16px 6px; border:1px solid var(--cyan-d);
  background:linear-gradient(180deg, rgba(40,86,120,.55), rgba(14,34,56,.85)); clip-path:polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition:filter .15s, box-shadow .15s; }
.btn:hover, button:hover { filter:brightness(1.35) drop-shadow(0 0 8px var(--cyan-g)); text-shadow:none; color:#fff; }
.btn { display:inline-block; border-color:var(--gold-d); background:linear-gradient(180deg, rgba(120,92,30,.55), rgba(48,36,12,.85)); color:#ffe9a8; }
button.danger { border-color:#8a3030; background:linear-gradient(180deg, rgba(120,36,36,.55), rgba(48,12,12,.85)); color:#ffb3b0; }

/* ---------- page */
main { max-width:1320px; margin:0 auto; padding:30px 28px 70px; position:relative; }
h1 { display:flex; align-items:center; gap:22px; margin:0 0 26px; font:700 30px var(--title); letter-spacing:.14em; text-transform:uppercase; color:var(--gold); text-shadow:0 0 18px rgba(236,196,88,.35), 0 2px 0 #000; }
h1::before, h1::after { content:""; flex:1; height:2px; background:linear-gradient(90deg, transparent, var(--gold-d)); } h1::after { background:linear-gradient(270deg, transparent, var(--gold-d)); }
h2 { position:relative; margin:34px 0 12px; padding-left:14px; font:700 15px var(--ui); letter-spacing:.22em; text-transform:uppercase; color:var(--cyan); }
h2::before { content:""; position:absolute; left:0; top:2px; bottom:2px; width:4px; background:var(--cyan); box-shadow:0 0 10px var(--cyan); }
h3 { margin:.15em 0 .3em; font:700 19px var(--ui); letter-spacing:.04em; color:#fff; }
p { margin:.4em 0; } .muted { color:var(--muted); }

/* ---------- panels with corner brackets */
.panel, .card { position:relative; display:block; color:var(--text); padding:16px 18px; background:linear-gradient(180deg, var(--panel), var(--panel2)); border:1px solid var(--line); box-shadow:0 8px 28px rgba(0,0,0,.45), inset 0 0 40px rgba(60,126,168,.07); }
.panel::before, .card::before { content:""; position:absolute; top:-1px; left:-1px; width:16px; height:16px; border-top:2px solid var(--cyan); border-left:2px solid var(--cyan); }
.panel::after, .card::after { content:""; position:absolute; bottom:-1px; right:-1px; width:16px; height:16px; border-bottom:2px solid var(--gold); border-right:2px solid var(--gold); }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; }
.card { color:var(--muted); font-size:14px; letter-spacing:.16em; text-transform:uppercase; } .card b { display:block; font:700 44px/1.05 var(--ui); letter-spacing:0; color:#fff; text-shadow:0 0 16px var(--cyan-g); }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:16px; }
.k { color:var(--gold); font:700 12px var(--ui); letter-spacing:.26em; }
a.reg { overflow:hidden; border-top:3px solid var(--cyan); transition:transform .15s, box-shadow .15s; }
a.reg::selection { background:transparent; }
a.reg:hover { transform:translateY(-2px); text-shadow:none; box-shadow:0 12px 34px rgba(0,0,0,.55), 0 0 22px var(--cyan-g), inset 0 0 40px rgba(60,126,168,.14); }
a.reg .k { font-size:22px; letter-spacing:.2em; opacity:.95; }
a.reg h3 { font-size:20px; }

/* ---------- tables as list rows */
table { width:100%; border-collapse:separate; border-spacing:0 3px; }
th { text-align:left; padding:8px 12px; font:700 12px var(--ui); letter-spacing:.2em; text-transform:uppercase; color:var(--cyan); border-bottom:1px solid var(--cyan-d); background:linear-gradient(180deg, transparent, rgba(60,126,168,.16)); }
td { padding:9px 12px; vertical-align:top; background:rgba(10,22,38,.78); border-top:1px solid rgba(120,205,255,.06); border-bottom:1px solid rgba(0,0,0,.5); }
td:first-child { border-left:3px solid var(--cyan-d); } tr:hover td { background:rgba(26,56,86,.7); border-top-color:var(--cyan-g); } tr:hover td:first-child { border-left-color:var(--cyan); }
td b { color:#fff; }

/* ---------- small parts */
.tag { display:inline-block; border:1px solid var(--cyan-d); padding:0 7px; font:700 11px/18px var(--ui); letter-spacing:.14em; text-transform:uppercase; color:var(--cyan); background:rgba(60,126,168,.12); }
.tag a { color:inherit; } .tag.sith { border-color:#a83a3a; color:#ff9d9a; background:rgba(168,58,58,.16); }
.dot { display:inline-block; width:9px; height:9px; margin-right:7px; transform:rotate(45deg); } .dot.on { background:var(--green); box-shadow:0 0 10px var(--green); } .dot.off { background:#2f3d4d; }
.flash { padding:11px 16px; margin-bottom:18px; border:1px solid var(--line); border-left:4px solid var(--cyan); background:var(--panel); letter-spacing:.04em; }
.flash.ok { border-left-color:var(--green); color:#b6f0c8; } .flash.bad { border-left-color:var(--red); color:#ffb3b0; }
form.inline { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:5px 0; }
input, select { background:rgba(3,8,16,.85); color:var(--text); border:1px solid var(--cyan-d); padding:6px 9px; font:500 15px var(--ui); max-width:230px; outline:none; }
input:focus, select:focus { border-color:var(--cyan); box-shadow:0 0 0 1px var(--cyan), 0 0 12px var(--cyan-g); }
details summary { cursor:pointer; color:var(--cyan); font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:12px; } details[open] summary { color:var(--gold); }
.manage { margin-top:8px; padding:10px 12px; min-width:310px; background:rgba(3,8,16,.92); border:1px solid var(--cyan-d); box-shadow:0 10px 30px rgba(0,0,0,.6); }
.tree, .tree ul { list-style:none; margin:0; padding-left:26px; border-left:1px solid var(--cyan-d); } .tree { border:none; padding-left:0; }
.unit { margin:5px 0; padding:7px 12px; background:rgba(10,22,38,.78); border-left:3px solid var(--cyan-d); } .unit:hover { border-left-color:var(--gold); }
.motto { color:var(--muted); font-style:italic; }
dl { display:grid; grid-template-columns:150px 1fr; gap:6px 14px; } dt { color:var(--cyan); letter-spacing:.14em; text-transform:uppercase; font-size:12px; padding-top:3px; } dd { margin:0; }
.st-pending { color:var(--gold); } .st-done { color:var(--green); } .st-failed { color:var(--red); }
footer { text-align:center; color:var(--muted); font-size:14px; letter-spacing:.08em; padding:28px; border-top:1px solid var(--line); }
@media (max-width:820px) { header { height:auto; padding:10px 14px; } nav a { padding:10px 10px; } main { padding:18px 12px 50px; } h1 { font-size:22px; } table { display:block; overflow-x:auto; } }

.clearbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:12px 0; padding:8px 12px; border:1px dashed rgba(224,82,79,.45); background:rgba(60,12,12,.25); } .clearbar form { margin:0; }
td form.inline { margin:0; } td button.danger { padding:3px 10px; font-size:11px; }

/* ---------- the Dark Council chamber (Spheres page) */
.center { text-align:center; }
.chamber { max-width:1100px; margin:10px auto 0; }
.throne { max-width:560px; margin:0 auto 22px; position:relative; }
.throne::after { content:""; position:absolute; left:50%; bottom:-22px; width:2px; height:22px; background:linear-gradient(var(--gold-d), var(--cyan-d)); }
.cols { display:grid; grid-template-columns:1fr 54px 1fr; gap:0; }
.col { display:flex; flex-direction:column; gap:14px; }
.spine { position:relative; } .spine i { position:absolute; left:50%; top:0; bottom:0; width:2px; transform:translateX(-50%); background:linear-gradient(var(--cyan-d), rgba(120,205,255,.15)); box-shadow:0 0 10px var(--cyan-g); }
.seat { position:relative; display:flex; gap:16px; align-items:flex-start; padding:16px 18px; background:linear-gradient(180deg, var(--panel), var(--panel2)); border:1px solid var(--line); border-left:4px solid var(--reg, var(--cyan-d)); box-shadow:0 8px 26px rgba(0,0,0,.45), inset 0 0 40px rgba(60,126,168,.07); }
.seat.held { border-color:rgba(236,196,88,.45); border-left-color:var(--reg, var(--gold)); box-shadow:0 8px 26px rgba(0,0,0,.45), 0 0 22px rgba(236,196,88,.12), inset 0 0 40px rgba(236,196,88,.06); }
.seat.empty { opacity:.78; }
.crest { flex:none; width:64px; height:72px; display:flex; align-items:center; justify-content:center; clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background:linear-gradient(160deg, var(--reg, var(--cyan-d)), #07101c 75%); }
.crest span { width:56px; height:64px; display:flex; align-items:center; justify-content:center; clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background:#071120; font:700 26px var(--title); color:var(--gold); }
.seat.empty .crest span { color:var(--muted); font-size:30px; }
.throne-seat { padding:22px 24px; } .throne-seat .crest { width:84px; height:94px; } .throne-seat .crest span { width:74px; height:84px; font-size:34px; } .throne-seat h3 { font-size:24px; }
.seat .info { min-width:0; } .seat h3 { margin:.1em 0 .2em; } .seat .who { font:700 18px var(--ui); letter-spacing:.04em; } .seat .ov { margin-top:4px; font-size:14px; }
.seat details { margin-top:8px; }
@media (max-width:860px) { .cols { grid-template-columns:1fr; } .spine { display:none; } .col + .spine + .col { margin-top:14px; } }

/* ---------- logo, filters, pager */
.brand img { display:block; height:38px; width:auto; filter:drop-shadow(0 0 8px rgba(120,205,255,.35)); }
.filters { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 14px; padding:12px 14px; background:var(--panel); border:1px solid var(--line); } .filters input[name=q] { min-width:240px; }
th a { color:inherit; } th a:hover { color:#fff; text-shadow:none; } th a.sorted { color:var(--gold); }
.pager { display:flex; flex-wrap:wrap; gap:6px; margin:16px 0; } .pager a, .pager b { min-width:34px; text-align:center; padding:5px 10px; border:1px solid var(--line); background:var(--panel); } .pager b { border-color:var(--gold-d); color:var(--gold); }