/* SLACKER eSPORTS · UI
   One token set for the members area and new pages. */
:root{
  --m-bg:#07080b;
  --m-panel:#0f1116;
  --m-panel-2:#151822;
  --m-line:rgba(255,255,255,.08);
  --m-gold:#e2b04a;
  --m-gold-hi:#f6d27a;
  --m-text:#f3f3f4;
  --m-muted:#9aa0ab;
  --m-radius:18px;
}

body.ui{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(1100px 520px at 15% -10%, rgba(226,176,74,.13), transparent 60%),
    radial-gradient(900px 480px at 100% 0%, rgba(226,176,74,.06), transparent 55%),
    var(--m-bg);
  color:var(--m-text);
  font-family:Inter,Arial,sans-serif;
}

.m-wrap{width:min(1180px, calc(100% - 32px)); margin:0 auto; padding:48px 0 80px}
.m-kicker{color:var(--m-gold); font:800 11px/1 Orbitron,sans-serif; letter-spacing:.22em}

/* Logged out */
.m-hero{
  padding:56px 48px; border:1px solid rgba(226,176,74,.28); border-radius:calc(var(--m-radius) + 6px);
  background:linear-gradient(150deg, rgba(226,176,74,.10), transparent 45%), var(--m-panel);
  box-shadow:0 30px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
}
.m-hero h1{margin:16px 0 14px; font:900 clamp(34px,5vw,58px)/1.05 Orbitron,sans-serif; letter-spacing:.01em}
.m-hero h1 span, .m-welcome h1 span{
  background:linear-gradient(90deg,var(--m-gold),var(--m-gold-hi));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.m-hero p{max-width:620px; color:#c9ccd3; font-size:17px; line-height:1.65; margin:0 0 28px}
.m-cta{
  display:inline-flex; align-items:center; gap:10px; padding:16px 26px; border-radius:12px;
  background:linear-gradient(180deg,var(--m-gold-hi),var(--m-gold)); color:#141006;
  font:800 13px/1 Orbitron,sans-serif; letter-spacing:.08em; text-decoration:none;
  box-shadow:0 10px 30px rgba(226,176,74,.25);
  transition:transform .15s ease, box-shadow .15s ease;
}
.m-cta:hover{transform:translateY(-1px); box-shadow:0 14px 36px rgba(226,176,74,.35)}
.m-fine{margin-top:14px; color:var(--m-muted); font-size:13px}

.m-perks{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:22px}
.m-perk{
  position:relative; padding:26px 22px; border:1px solid var(--m-line); border-radius:var(--m-radius);
  background:linear-gradient(180deg,var(--m-panel-2),var(--m-panel));
}
.m-perk h2{margin:0 0 8px; font:800 14px/1.3 Orbitron,sans-serif; letter-spacing:.04em}
.m-perk p{margin:0; color:var(--m-muted); font-size:14px; line-height:1.55}
.m-lock{
  position:absolute; top:20px; right:20px; width:14px; height:11px; border-radius:3px;
  background:var(--m-gold); opacity:.8;
}
.m-lock::before{
  content:""; position:absolute; left:2px; top:-8px; width:6px; height:8px;
  border:2px solid var(--m-gold); border-bottom:0; border-radius:6px 6px 0 0;
}

/* Logged in */
.m-welcome{
  display:flex; align-items:center; gap:22px; padding:28px 30px; border-radius:calc(var(--m-radius) + 6px);
  border:1px solid rgba(226,176,74,.28);
  background:linear-gradient(150deg, rgba(226,176,74,.10), transparent 50%), var(--m-panel);
}
.m-welcome h1{margin:10px 0 0; font:900 clamp(24px,3.4vw,36px)/1.1 Orbitron,sans-serif}
.m-avatar{width:88px; height:88px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 3px var(--m-bg), 0 0 0 5px var(--m-gold)}
.m-logout{margin-left:auto; color:var(--m-muted); font-size:13px; text-decoration:none; border:1px solid var(--m-line); padding:10px 14px; border-radius:10px}
.m-logout:hover{color:var(--m-text); border-color:rgba(255,255,255,.2)}

.m-section{margin:40px 0 0; font:800 12px/1 Orbitron,sans-serif; letter-spacing:.2em; color:var(--m-gold)}
.m-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:18px}
.m-tile{
  display:block; padding:22px 20px; border-radius:var(--m-radius); text-decoration:none; color:inherit;
  border:1px solid var(--m-line); background:linear-gradient(180deg,var(--m-panel-2),var(--m-panel));
  transition:border-color .15s ease, transform .15s ease;
}
.m-tile:hover{border-color:rgba(226,176,74,.45); transform:translateY(-2px)}
.m-tile h2{margin:0 0 8px; font:800 14px/1.3 Orbitron,sans-serif; letter-spacing:.04em}
.m-tile p{margin:0; color:var(--m-muted); font-size:13.5px; line-height:1.5}
.m-tile-admin{border-color:rgba(226,176,74,.22)}
.m-tile-locked{position:relative; opacity:.62}
.m-tile-locked:hover{transform:none; border-color:var(--m-line)}
.m-tile-locked p{color:var(--m-gold)}

/* Contact */
.k-layout{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:18px; align-items:start}
.k-form-card{padding:44px}
.k-form{display:grid; gap:16px; margin-top:6px}
.k-row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.k-field{display:grid; gap:8px}
.k-field span{font:800 11px/1 Orbitron,sans-serif; letter-spacing:.14em; color:var(--m-muted); text-transform:uppercase}
.k-field input,.k-field select,.k-field textarea{
  width:100%; box-sizing:border-box; padding:14px 15px; border-radius:12px;
  border:1px solid var(--m-line); background:#0a0b0f; color:var(--m-text);
  font:500 15px/1.4 Inter,Arial,sans-serif; outline:none; transition:border-color .15s ease, box-shadow .15s ease;
}
.k-field textarea{resize:vertical; min-height:150px}
.k-field input:focus,.k-field select:focus,.k-field textarea:focus{border-color:rgba(226,176,74,.6); box-shadow:0 0 0 3px rgba(226,176,74,.12)}
.k-form .m-cta{justify-self:start; border:0; cursor:pointer}
.k-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.k-notice{margin:0 0 18px; padding:14px 16px; border-radius:12px; font-size:14px; line-height:1.5}
.k-ok{border:1px solid rgba(110,200,140,.35); background:rgba(110,200,140,.08); color:#bfe8cc}
.k-err{border:1px solid rgba(239,98,98,.35); background:rgba(239,98,98,.08); color:#ffc2c2}
.k-side{display:grid; gap:14px}
.k-side .m-perk p{margin-bottom:10px}
.k-link{color:var(--m-gold); font-weight:700; text-decoration:none}
.k-link:hover{color:var(--m-gold-hi)}
.k-list{margin:0; padding-left:18px; color:var(--m-muted); font-size:14px; line-height:1.8}

/* News editor */
.ne-h{margin:0 0 4px; font:800 18px/1.2 Orbitron,sans-serif}
.ne-toolbar{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px}
.ne-toolbar button,.ne-btn{padding:8px 12px; border-radius:9px; border:1px solid var(--m-line); background:#0a0b0f; color:var(--m-text); font:700 12px/1 Inter,Arial,sans-serif; cursor:pointer}
.ne-toolbar button:hover,.ne-btn:hover{border-color:rgba(226,176,74,.55)}
.ne-toolbar select{padding:7px 8px; border-radius:9px; border:1px solid var(--m-line); background:#0a0b0f; color:var(--m-text); font:700 12px/1 Inter,Arial,sans-serif; cursor:pointer}
.ne-tool{display:inline-flex; align-items:center; gap:6px; color:var(--m-muted,#aab0bb); font:700 11px/1 Inter,Arial,sans-serif}
.ne-tool input[type=color]{width:30px; height:30px; padding:0; border:1px solid var(--m-line); border-radius:8px; background:none; cursor:pointer}
.ne-tool-sep{width:1px; align-self:stretch; background:var(--m-line); margin:0 4px}
.ne-btn{width:100%; padding:14px 15px}
.ne-delete{margin-top:12px}
.ne-delete button{padding:10px 14px; border-radius:10px; border:1px solid rgba(239,98,98,.4); background:transparent; color:#ffb0b0; cursor:pointer}
.ne-list{display:grid; gap:10px; margin-top:26px}
/* News admin, 2026-10-22: list with status and filters; editor in two columns. */
.ne-wrap{max-width:1240px}
.ne-filters{display:flex; flex-wrap:wrap; align-items:center; gap:12px; justify-content:space-between; margin-top:18px}
.ne-chips{display:flex; flex-wrap:wrap; gap:6px}
.ne-chip{padding:9px 14px; border-radius:999px; border:1px solid var(--m-line); background:#0a0b0f; color:var(--m-muted); font:700 12.5px/1 Inter,Arial,sans-serif; cursor:pointer}
.ne-chip b{margin-left:4px; color:var(--m-text)}
.ne-chip.is-on{border-color:rgba(226,176,74,.6); color:var(--m-gold-hi); background:rgba(226,176,74,.08)}
.ne-search{flex:0 1 280px; min-width:0; padding:11px 14px; border-radius:12px; border:1px solid var(--m-line); background:#0a0b0f; color:var(--m-text); font:14px Inter,Arial,sans-serif}
.ne-list{gap:8px; margin-top:16px}
.ne-item{display:grid; grid-template-columns:92px minmax(0,1fr) auto; align-items:center; gap:16px; padding:12px 16px 12px 12px; border-radius:14px; border:1px solid var(--m-line); background:var(--m-panel)}
.ne-item:hover{border-color:rgba(226,176,74,.3)}
.ne-item[hidden],.ne-none[hidden]{display:none}
.ne-thumb{display:block; width:92px; height:58px; border-radius:9px; overflow:hidden; background:linear-gradient(135deg,#1a1d26,#0c0e13)}
.ne-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.ne-title{display:block; color:var(--m-text); text-decoration:none; font:700 15px/1.35 Inter,Arial,sans-serif; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ne-title:hover{color:var(--m-gold-hi)}
.ne-meta{display:flex; flex-wrap:wrap; gap:6px 12px; margin-top:7px; color:var(--m-muted); font-size:12.5px; align-items:center}
.ne-state{display:inline-block; padding:4px 9px; border-radius:999px; font:800 10.5px/1 Inter,Arial,sans-serif; letter-spacing:.06em; text-transform:uppercase}
.ne-state-published{background:rgba(110,200,140,.12); color:#9fe0b4}
.ne-state-scheduled{background:rgba(120,160,240,.14); color:#b7caf7}
.ne-state-draft{background:rgba(255,255,255,.07); color:#c4c8d0}
.ne-state-trash{background:rgba(239,98,98,.12); color:#ffb0b0}
.ne-chip-trash{margin-left:6px; text-decoration:none}
a.ne-chip{text-decoration:none; display:inline-block}
.ne-actions-row button.ne-restore{color:var(--m-gold)}
.ne-author{margin:-4px 0 0; color:var(--m-muted); font-size:13px}
.ne-author strong{color:var(--m-text)}
.ne-actions-row{display:flex; align-items:center; gap:14px; font-size:13px; white-space:nowrap}
.ne-actions-row a{color:var(--m-gold); font-weight:700; text-decoration:none}
.ne-actions-row form{margin:0}
.ne-actions-row button{padding:0; border:0; background:none; color:#ff9d9d; font:700 13px Inter,Arial,sans-serif; cursor:pointer}
.ne-back{display:inline-block; margin-top:18px; color:var(--m-muted); text-decoration:none; font-size:13.5px}
.ne-back:hover{color:var(--m-gold)}
.ne-editor{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:18px; align-items:start; margin-top:12px}
.ne-main,.ne-side{display:grid; gap:18px; min-width:0}
.ne-side{position:sticky; top:76px}
.ne-card{display:grid; gap:16px; padding:22px; border-radius:var(--m-radius); border:1px solid var(--m-line); background:var(--m-panel)}
.ne-card .k-field span small{margin-left:6px; font:500 11px Inter,Arial,sans-serif; letter-spacing:0; text-transform:none; color:#6f7682}
.ne-tabs{display:flex; gap:4px; border-bottom:1px solid var(--m-line)}
.ne-tabs button{padding:10px 14px; border:0; border-bottom:2px solid transparent; background:none; color:var(--m-muted); font:700 13px Inter,Arial,sans-serif; cursor:pointer; margin-bottom:-1px}
.ne-tabs button.is-on{color:var(--m-gold-hi); border-bottom-color:var(--m-gold)}
.ne-card .k-field textarea#ne-excerpt{min-height:72px}
.ne-pane textarea{width:100%; box-sizing:border-box; min-height:380px; padding:14px; border-radius:12px; border:1px solid var(--m-line); background:#0a0b0f; color:var(--m-text); font:14px/1.6 ui-monospace,Consolas,monospace; resize:vertical}
.ne-rich{min-height:380px; max-height:70vh; overflow:auto; padding:18px 20px; border-radius:12px; border:1px solid var(--m-line); background:#0a0b0f; color:#e9ecf1; font:16px/1.7 Inter,Arial,sans-serif; outline:none}
.ne-rich:focus{border-color:rgba(226,176,74,.55)}
.ne-rich:empty:before{content:'Skriv nyheden her...'; color:#5d636d}
.ne-rich p{margin:0 0 12px}.ne-rich h2,.ne-rich h3{margin:22px 0 8px; color:#fff}.ne-rich a{color:#e2b04a}
.ne-rich blockquote{margin:22px 0; padding:18px 22px; border-left:3px solid #e2b04a; border-radius:0 12px 12px 0; background:linear-gradient(90deg,rgba(222,167,49,.08),rgba(222,167,49,.012)); color:#ddd}
.ne-rich img{display:block; max-width:100%; height:auto; margin:18px auto; border-radius:10px; cursor:pointer}
.ne-rich img[data-width="25"]{width:25%}.ne-rich img[data-width="50"]{width:50%}.ne-rich img[data-width="75"]{width:75%}.ne-rich img[data-width="100"]{width:100%}
.ne-rich img.is-picked{outline:3px solid #e2b04a; outline-offset:3px}
.ne-preview{width:100%; min-height:520px; border:1px solid var(--m-line); border-radius:12px; background:#0b0d12}
.ne-event summary{cursor:pointer; font:800 13px/1 Orbitron,sans-serif; letter-spacing:.08em; color:var(--m-text)}
.ne-event summary small{margin-left:8px; font:500 12px Inter,Arial,sans-serif; letter-spacing:0; color:var(--m-muted)}
.ne-event[open] summary{margin-bottom:4px}
.ne-publish .ne-state{justify-self:start}
.ne-hint{margin:-6px 0 0; color:#7d8490; font-size:12px; line-height:1.5}
.ne-save{width:100%; justify-content:center; text-align:center; border:0; cursor:pointer}
.ne-side-links{display:flex; justify-content:space-between; gap:10px; font-size:13px}
.ne-side-links a{color:var(--m-muted); text-decoration:none}
.ne-side-links a:hover{color:var(--m-gold)}
.ne-cover{border-radius:10px; overflow:hidden; border:1px solid var(--m-line)}
.ne-cover img{display:block; width:100%; aspect-ratio:16/9; object-fit:cover}
@media (max-width:980px){ .ne-editor{grid-template-columns:1fr} .ne-side{position:static} }
@media (max-width:620px){ .ne-item{grid-template-columns:64px minmax(0,1fr)} .ne-thumb{width:64px; height:44px} .ne-actions-row{grid-column:1/-1} .ne-search{flex:1 1 100%} .ne-card{padding:18px} }

/* Legal pages */
.lg{max-width:820px; margin:22px auto 0; padding:44px 48px; border-radius:var(--m-radius); border:1px solid var(--m-line); background:linear-gradient(180deg,var(--m-panel-2),var(--m-panel)); color:#c9ccd3; font-size:15.5px; line-height:1.75}
.lg h2{margin:36px 0 10px; color:var(--m-text); font:800 17px/1.3 Orbitron,sans-serif; letter-spacing:.02em}
.lg h2:first-child{margin-top:0}
.lg h3{margin:22px 0 6px; color:var(--m-text); font-size:15.5px}
.lg p{margin:0 0 12px}
.lg ul{margin:0 0 14px; padding-left:20px}
.lg li{margin:4px 0}
.lg a{color:var(--m-gold)}
.lg strong{color:var(--m-text)}
.lg-meta{color:var(--m-muted); font-size:13px}
.lg table{width:100%; border-collapse:collapse; margin:8px 0 16px; font-size:14px}
.lg th,.lg td{text-align:left; vertical-align:top; padding:10px 12px; border-bottom:1px solid var(--m-line)}
.lg th{color:var(--m-gold); font:800 10.5px/1.4 Orbitron,sans-serif; letter-spacing:.12em; text-transform:uppercase}
.lg code{font-size:13px; color:var(--m-gold-hi)}
@media (max-width:560px){ .lg{padding:28px 20px} .lg table{font-size:13px} .lg th,.lg td{padding:8px 6px} }

/* Live */
.l-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:22px}
.l-card{
  display:flex; align-items:center; gap:18px; padding:22px; border-radius:var(--m-radius);
  border:1px solid var(--m-line); background:linear-gradient(180deg,var(--m-panel-2),var(--m-panel));
  color:inherit; text-decoration:none; transition:border-color .15s ease, transform .15s ease;
}
.l-card.is-live{border-color:rgba(145,70,255,.6); box-shadow:0 0 0 1px rgba(145,70,255,.25), 0 18px 40px rgba(145,70,255,.12)}
.l-badge{display:none; margin-right:8px; padding:3px 7px; border-radius:6px; background:#e91916; color:#fff; font:800 9px/1 Orbitron,sans-serif; letter-spacing:.12em}
.l-card.is-live .l-badge{display:inline-block}
.l-now{display:none; color:#d6c8ff; font-size:13px; line-height:1.45; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.l-card:not(.is-live) .l-now{display:none}
.l-link{text-decoration:none}
.l-link:hover{color:var(--m-gold-hi)}
.l-watch{display:none; justify-self:start; margin-top:6px; padding:9px 14px; border:0; border-radius:10px; background:#9146ff; color:#fff; font:800 11px/1 Orbitron,sans-serif; letter-spacing:.1em; cursor:pointer}
.l-watch:hover{background:#a970ff}
.l-card.is-live .l-watch{display:inline-block}
.l-player{margin-top:22px; padding:16px; border-radius:var(--m-radius); border:1px solid rgba(145,70,255,.45); background:var(--m-panel)}
.l-player[hidden]{display:none}
.l-player-head{display:flex; align-items:center; gap:10px; margin:2px 4px 12px; font:800 14px/1 Orbitron,sans-serif}
.l-live-dot{width:9px; height:9px; border-radius:50%; background:#e91916; box-shadow:0 0 0 4px rgba(233,25,22,.2)}
.l-close{margin-left:auto; width:34px; height:34px; border-radius:50%; border:1px solid var(--m-line); background:transparent; color:var(--m-text); font-size:20px; cursor:pointer}
.l-frame{position:relative; width:100%; min-width:400px; aspect-ratio:16/9; min-height:300px; border-radius:12px; overflow:hidden; background:#000}
.l-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.l-mono{
  flex:none; display:grid; place-items:center; width:58px; height:58px; border-radius:50%;
  background:linear-gradient(150deg,#9146ff,#5c2bb5); color:#fff; font:900 22px/1 Orbitron,sans-serif;
  box-shadow:0 0 0 3px var(--m-bg), 0 0 0 5px rgba(226,176,74,.7);
}
.l-body{display:grid; gap:5px; min-width:0}
.l-tag{color:var(--m-gold); font:800 10px/1 Orbitron,sans-serif; letter-spacing:.18em}
.l-name{font:800 17px/1.2 Orbitron,sans-serif; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.l-link{color:var(--m-muted); font-size:13px}
.l-empty{color:var(--m-muted); margin-top:22px}

@media (max-width:980px){
  .m-perks,.m-grid{grid-template-columns:repeat(2,1fr)}
  .k-layout{grid-template-columns:1fr}
  .l-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .l-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .m-wrap{padding-top:28px}
  .m-hero{padding:34px 22px}
  .m-perks,.m-grid{grid-template-columns:1fr}
  .m-welcome{flex-wrap:wrap; padding:22px}
  .m-logout{margin-left:0}
  .k-form-card{padding:30px 20px}
  .k-row{grid-template-columns:1fr}
}