/* Slayers Online Tactics - style commun du site et du panel admin (cadres pixel art du jeu) */
:root { --bg:#120e1c; --gold:#f2c14e; --gold2:#ffe08a; --text:#ece6f6; --dim:#a79cc0; --bad:#ff6b78; --good:#7fd67a;
	--warn:#f0a040; --blue:#8fc8ff; --line:#3a2f58; }
* { box-sizing:border-box; }
html { background:var(--bg); }
body { margin:0; color:var(--text); font:16px/1.55 system-ui, "Segoe UI", sans-serif; min-height:100vh;
	background:linear-gradient(rgba(18,14,28,.8), rgba(18,14,28,.95)), url(fond.png) center top / 1920px auto repeat;
	image-rendering:pixelated; }
main { max-width:900px; margin:0 auto; padding:32px 16px 56px; }
main.wide { max-width:1200px; }
header.site { text-align:center; position:relative; }
.logo { image-rendering:pixelated; width:min(522px, 100%); height:auto; }
.ribbon { display:inline-block; margin:14px 0 26px; padding:6px 22px; color:var(--gold2); font-weight:600;
	border:6px solid; border-image:url(bouton.png) 6 fill stretch; text-shadow:0 2px 0 #0a0812; }
.frame { border:6px solid; border-image:url(cadre.png) 6 fill stretch; padding:20px 22px; margin:0 0 20px; }
h2 { color:var(--gold); margin:0 0 14px; font-size:21px; text-shadow:0 2px 0 #0a0812; }
h3 { color:var(--gold2); margin:18px 0 8px; font-size:16px; }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:760px) { .grid { grid-template-columns:1fr; } }
label { display:block; font-size:14px; color:var(--dim); margin:10px 0 4px; }
input[type=text], input[type=password], input[type=email], input[type=number], input[type=search], select, textarea {
	width:100%; padding:9px 11px; color:var(--text); font:inherit; background:transparent;
	border:6px solid; border-image:url(champ.png) 6 fill stretch; outline:none; }
select option { background:#1a1428; }
textarea { resize:vertical; min-height:80px; }
input:focus, select:focus, textarea:focus { border-image-source:url(bouton_survol.png); }
.check { display:flex; align-items:center; gap:8px; margin-top:10px; color:var(--dim); font-size:14px; }
.check input { width:auto; accent-color:var(--gold); }
.btn { display:inline-block; width:100%; padding:11px 16px; margin-top:14px; text-align:center; cursor:pointer;
	color:var(--gold2); font:700 16px system-ui, sans-serif; letter-spacing:.03em; text-decoration:none;
	border:6px solid; border-image:url(bouton.png) 6 fill stretch; background:none; text-shadow:0 2px 0 #0a0812; }
.btn:hover { filter:brightness(1.18); }
.btn:disabled { filter:grayscale(.7) brightness(.8); cursor:wait; }
.btn.small { width:auto; font-size:14px; padding:6px 14px; margin-top:8px; }
.btn.sec { color:var(--text); border-image-source:url(bouton_survol.png); font-weight:600; }
.btn.danger { color:#ffd0d4; filter:hue-rotate(-40deg) saturate(1.4); }
.row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.row > * { flex:1; }
.tabs { display:flex; gap:6px; margin:-4px 0 14px; flex-wrap:wrap; }
.tab { flex:1; padding:8px 10px; text-align:center; cursor:pointer; color:var(--dim); font-weight:600; background:none;
	border:6px solid; border-image:url(champ.png) 6 fill stretch; font-size:15px; }
.tab.on { color:var(--gold2); border-image-source:url(bouton.png); }
.msg { min-height:22px; margin-top:10px; font-size:15px; }
.msg.err { color:var(--bad); } .msg.ok { color:var(--good); }
.hp { position:absolute; left:-9999px; }
.dim { color:var(--dim); font-size:14px; }
.hidden { display:none !important; }
.badge { display:inline-block; padding:1px 9px; font-size:13px; font-weight:700; border:2px solid; vertical-align:middle; }
.badge.active { color:var(--good); border-color:var(--good); }
.badge.inactive { color:var(--dim); border-color:var(--dim); }
.badge.suspended { color:var(--warn); border-color:var(--warn); }
.badge.banned { color:var(--bad); border-color:var(--bad); }
.badge.role { color:var(--blue); border-color:var(--blue); }
.badge.online { color:#0a0812; background:var(--good); border-color:var(--good); }
.kv { display:grid; grid-template-columns:auto 1fr; gap:4px 14px; font-size:15px; }
.kv dt { color:var(--dim); } .kv dd { margin:0; }
.stats { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; margin-top:8px; }
.stat { text-align:center; padding:8px 4px; border:6px solid; border-image:url(champ.png) 6 fill stretch; }
.stat b { display:block; font-size:22px; color:var(--gold2); }
.stat span { font-size:12px; color:var(--dim); }
.alert { padding:10px 12px; margin:10px 0; border:2px solid var(--bad); color:#ffd0d4; background:rgba(255,80,100,.08); }
.alert.warn { border-color:var(--warn); color:#ffe2b8; background:rgba(240,160,64,.08); }
table { width:100%; border-collapse:collapse; font-size:14px; }
th { text-align:left; color:var(--dim); font-weight:600; padding:6px 8px; border-bottom:2px solid var(--line); }
td { padding:6px 8px; border-bottom:1px solid #261e38; vertical-align:top; }
tr.click { cursor:pointer; } tr.click:hover td { background:rgba(242,193,78,.07); }
code { font-family:ui-monospace, Consolas, monospace; }
ol { padding-left:20px; margin:8px 0 0; } li { margin:4px 0; }
.shot { width:100%; height:auto; image-rendering:auto; display:block; }
.foot { text-align:center; color:var(--dim); font-size:13px; margin-top:28px; }
.discord-logo { display:block; width:56px; margin:28px auto 0; color:#8b95ff; transition:color .15s, transform .15s; }
.discord-logo:hover { color:#fff; transform:translateY(-2px); }
.topbar { display:flex; gap:8px; align-items:center; justify-content:flex-end; margin:-12px 0 8px; min-height:44px; }
@media (max-width:760px) { .topbar { justify-content:center; margin-top:0; } }
.chip { padding:6px 12px; font-size:14px; font-weight:600; color:var(--gold2); text-decoration:none; cursor:pointer;
	border:6px solid; border-image:url(champ.png) 6 fill stretch; background:none; }
.chip:hover { border-image-source:url(bouton_survol.png); }
.cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; }
.modal { position:fixed; inset:0; background:rgba(5,3,10,.75); display:flex; align-items:flex-start; justify-content:center;
	padding:40px 12px; overflow:auto; z-index:10; }
.modal .frame { width:min(760px, 100%); background:#17111f; }
.close { float:right; cursor:pointer; color:var(--dim); font-size:22px; line-height:1; background:none; border:none; }