:root{
  --bg:#06040d;
  --bg-soft:#0e0a19;
  --panel:rgba(18,12,34,.82);
  --panel-2:rgba(28,18,52,.72);
  --panel-3:rgba(255,255,255,.045);
  --stroke:rgba(255,255,255,.10);
  --stroke-strong:rgba(255,255,255,.18);
  --text:#f7f4ff;
  --muted:rgba(247,244,255,.72);

  --brand:#8b5cf6;
  --brand-2:#ec4899;
  --gold:#f4c56a;
  --gold-2:#ffe0a3;

  --success:#34d399;
  --danger:#fb7185;
  --warning:#fbbf24;

  --shadow:0 26px 80px rgba(0,0,0,.55);
  --glow:0 0 0 1px rgba(255,255,255,.05), 0 20px 60px rgba(139,92,246,.18);
  --r:22px;
}

*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(900px 560px at 8% -10%, rgba(139,92,246,.25), transparent 60%),
    radial-gradient(900px 600px at 90% 0%, rgba(236,72,153,.16), transparent 58%),
    radial-gradient(900px 560px at 50% 110%, rgba(244,197,106,.10), transparent 60%),
    linear-gradient(180deg, #05030b 0%, #090512 30%, #06040d 100%);
  background-attachment: fixed;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px) 0 0/34px 34px,
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px) 0 0/34px 34px;
  mask-image:radial-gradient(700px 500px at 50% 15%, #000 28%, transparent 78%);
  opacity:.45;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
code,.kbd{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
}
.wrap{padding:clamp(18px,2.4vw,32px)}
.layout{
  max-width:1380px;
  margin:0 auto;
  display:grid;
  gap:18px;
  grid-template-columns:1fr;
}
@media(min-width:1080px){
  .layout{grid-template-columns:340px minmax(0,1fr)}
}
.card{
  border:1px solid var(--stroke);
  background:linear-gradient(180deg, var(--panel), rgba(10,7,19,.88));
  border-radius:var(--r);
  box-shadow:var(--shadow);
  overflow:hidden;
  backdrop-filter:blur(14px);
}
.side{position:relative;align-self:start}
@media(min-width:1080px){
  .side{position:sticky;top:18px}
}
.side .head{
  padding:18px;
  border-bottom:1px solid var(--stroke);
  background:
    radial-gradient(280px 140px at 0% 0%, rgba(139,92,246,.20), transparent 75%),
    radial-gradient(220px 140px at 100% 0%, rgba(236,72,153,.14), transparent 72%);
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.logo{
  width:52px;
  height:52px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.16);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01)),
    url("../img/branding/velkarys-logo.png") center/78% no-repeat,
    radial-gradient(circle at 30% 20%, rgba(244,197,106,.42), rgba(139,92,246,.20));
  box-shadow:0 18px 40px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.04);
}
.title{
  font-size:17px;
  font-weight:900;
  letter-spacing:.02em;
}
.sub{
  margin-top:4px;
  opacity:.82;
  font-size:12px;
  color:var(--muted);
}
.me{
  padding:16px 18px;
  display:grid;
  gap:12px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  width:fit-content;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:var(--muted);
  font-size:12px;
  font-weight:700;
}
.dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:linear-gradient(180deg, var(--gold-2), var(--gold));
  box-shadow:0 0 0 6px rgba(244,197,106,.12);
}
.meinfo{min-width:0}
.meinfo b{
  display:block;
  font-size:15px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.meinfo small{
  display:block;
  margin-top:5px;
  color:var(--muted);
}
.nav{
  padding:12px;
  display:grid;
  gap:8px;
}
.nav a{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  border-radius:18px;
  color:var(--text);
  text-decoration:none;
  border:1px solid transparent;
  background:rgba(255,255,255,.02);
  transition:transform .14s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.nav a:hover{
  background:rgba(255,255,255,.055);
  border-color:rgba(255,255,255,.12);
  transform:translateY(-1px);
}
.nav a.active{
  background:
    radial-gradient(120px 80px at 0% 0%, rgba(139,92,246,.26), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border-color:rgba(236,72,153,.26);
  box-shadow:var(--glow);
}
.nav .ic{
  width:40px;
  height:40px;
  border-radius:15px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.10);
  flex:0 0 auto;
}
.nav .t{font-weight:900;line-height:1.15}
.nav .s{font-size:12px;color:var(--muted);margin-top:3px}
.side .foot{
  padding:16px 18px 18px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:11px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:var(--text);
  font-weight:800;
  font-size:13px;
  transition:transform .14s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
  cursor:pointer;
}
.btn:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.18);
}
.btn.primary{
  background:linear-gradient(180deg, rgba(155,102,255,.92), rgba(123,70,230,.92));
  border-color:rgba(255,255,255,.08);
  box-shadow:0 12px 32px rgba(123,70,230,.28);
}
.btn.primary:hover{
  background:linear-gradient(180deg, rgba(165,112,255,.98), rgba(131,76,235,.98));
}
.btn.gold{
  color:#120d05;
  background:linear-gradient(180deg, rgba(255,224,163,.98), rgba(244,197,106,.94));
  border-color:rgba(23,17,8,.18);
  box-shadow:0 12px 32px rgba(244,197,106,.22);
}
.btn.gold:hover{
  background:linear-gradient(180deg, rgba(255,232,184,1), rgba(247,205,122,1));
}
.btn.danger{
  background:rgba(251,113,133,.10);
  border-color:rgba(251,113,133,.22);
}
.btn.subtle{
  background:rgba(255,255,255,.03);
}
.btn:disabled,.btn.is-disabled{
  opacity:.55;
  pointer-events:none;
}
.main{padding:18px}
.hero{
  position:relative;
  padding:20px;
  margin-bottom:16px;
  border-radius:calc(var(--r) - 2px);
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(360px 180px at 0% 0%, rgba(139,92,246,.22), transparent 72%),
    radial-gradient(320px 160px at 100% 0%, rgba(236,72,153,.12), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}
.hero h1{
  margin:0;
  font-size:24px;
  letter-spacing:-.02em;
}
.hero p{
  margin:8px 0 0;
  color:var(--muted);
  line-height:1.6;
}
.grid{
  display:grid;
  gap:12px;
  grid-template-columns:1fr;
}
@media(min-width:900px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.panel{
  display:block;
  padding:16px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  text-decoration:none;
  color:var(--text);
  transition:transform .14s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.panel:hover{
  transform:translateY(-1px);
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border-color:rgba(255,255,255,.16);
  box-shadow:var(--glow);
}
.panel.disabled,
.panel.is-disabled{
  cursor:not-allowed;
  opacity:.72;
}
.panel.disabled:hover,
.panel.is-disabled:hover{
  transform:none;
  box-shadow:none;
}
.panel h3{margin:0 0 8px;font-size:15px}
.panel p{margin:0;color:var(--muted);line-height:1.55}
.creature{
  padding:16px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.035);
  transition:.14s ease;
}
.creature:hover{transform:translateY(-1px);background:rgba(255,255,255,.05)}
.creature .top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  font-weight:800;
  font-size:13px;
}
.codes{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 11px;
  border-radius:999px;
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.12);
  cursor:pointer;
  user-select:none;
  transition:.12s ease;
  font-size:13px;
}
.chip:hover,
.pillBtn:hover,
.codeTile:hover,
.seg button.active,
.moreBtn:hover{
  background:rgba(139,92,246,.16);
  border-color:rgba(236,72,153,.28);
  box-shadow:0 10px 24px rgba(139,92,246,.16);
}
.hint{color:var(--muted);font-size:12px;margin-top:10px}
.toast{
  position:fixed;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  padding:11px 16px;
  border-radius:999px;
  background:rgba(8,6,16,.80);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(10px);
  opacity:0;
  pointer-events:none;
  transition:.18s ease;
  font-size:13px;
  box-shadow:var(--shadow);
  z-index:90;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-2px)}

label{
  display:block;
  color:rgba(247,244,255,.82);
  margin-bottom:6px;
  font-size:.95rem;
  font-weight:600;
}
input,select,textarea{
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.20);
  color:var(--text);
  outline:none;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
select option{background:#100b1d;color:var(--text)}
input:focus,select:focus,textarea:focus{
  border-color:rgba(236,72,153,.34);
  box-shadow:0 0 0 4px rgba(139,92,246,.12);
  background:rgba(0,0,0,.28);
}
pre{
  white-space:pre-wrap;
  word-break:break-word;
  margin:0;
  color:rgba(247,244,255,.92);
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:14px;
  line-height:1.5;
}
.notice{
  padding:12px 14px;
  border-radius:16px;
  margin:0 0 12px;
  border:1px solid rgba(255,255,255,.12);
}
.notice.success{
  background:rgba(52,211,153,.09);
  border-color:rgba(52,211,153,.24);
}
.notice.error{
  background:rgba(251,113,133,.09);
  border-color:rgba(251,113,133,.24);
}
.tableWrap{
  overflow:auto;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.025);
}
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:640px;
}
.table th,.table td{
  padding:12px 14px;
  text-align:left;
}
.table thead th{
  background:rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.10);
  font-size:13px;
  color:rgba(247,244,255,.86);
}
.table tbody td{
  background:rgba(0,0,0,.16);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.table tbody tr:hover td{
  background:rgba(255,255,255,.035);
}
.stack{display:grid;gap:10px}
.row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.row.end{justify-content:flex-end}
.muted{color:var(--muted)}
.auth-screen{
  min-height:100vh;
  padding:24px;
  display:grid;
  place-items:center;
}
.auth-card{
  width:min(560px, 100%);
  padding:24px;
}
.auth-brand{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:8px;
}
.auth-logo{
  width:56px;
  height:56px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.16);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01)),
    url("../img/branding/velkarys-logo.png") center/78% no-repeat,
    radial-gradient(circle at 30% 20%, rgba(244,197,106,.42), rgba(139,92,246,.20));
  box-shadow:0 14px 36px rgba(0,0,0,.35);
}
.auth-brand strong{
  display:block;
  font-size:18px;
  letter-spacing:.02em;
}
.auth-brand span{
  display:block;
  color:var(--muted);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.auth-title{
  margin:0 0 6px;
  font-size:28px;
  letter-spacing:-.03em;
}
.auth-lead{
  margin:0 0 18px;
  color:var(--muted);
  line-height:1.6;
}
.auth-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  margin-top:16px;
}
.auth-note{
  margin-top:14px;
  color:var(--muted);
  font-size:13px;
}
.formGrid{
  display:grid;
  gap:12px;
  grid-template-columns:1fr;
}
@media(min-width:760px){
  .formGrid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.link-gold{color:var(--gold-2)}
.small{font-size:13px}
hr.sep{
  border:0;
  border-top:1px solid rgba(255,255,255,.08);
  margin:14px 0;
}