@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

/* ============================================================
   MYTHICAL NETWORK  —  "THE SYSTEM"
   Reskin layer over DefaultRevamp (Fomantic-UI) for NamelessMC.
   Loaded AFTER custom.css, so these rules win. Matches the
   Tebex store: void background, electric-cyan glow, glass
   panels with bracket corners, Chakra Petch + Inter.
   ============================================================ */

:root{
  --void:#03060e;
  --void-2:#070d1a;
  --glass:rgba(13,22,40,.72);
  --glass-2:rgba(7,13,26,.80);
  --line:rgba(67,196,255,.16);
  --line-2:rgba(67,196,255,.32);
  --mana:#43c4ff;
  --mana-2:#7ad7ff;
  --mana-soft:rgba(67,196,255,.35);
  --mana-dim:rgba(67,196,255,.10);
  --bright:#eaf6ff;
  --text:#b9c6da;
  --muted:#7e8aa0;
  --ok:#46e0a0;
  --warn:#ffd27a;
  --bad:#ff6b7d;
  --display:'Chakra Petch',sans-serif;
  --body:'Inter','Helvetica Neue',Arial,sans-serif;
  --radius:4px;
  --glow:26px;
}

/* ---------- base / page background ---------- */
html, body,
body.dark,
body.pushable > .pusher,
body.dark > .pusher{
  background:var(--void) !important;
  color:var(--text) !important;
}
body{
  font-family:var(--body) !important;
  background:
    radial-gradient(900px 520px at 80% -8%, rgba(67,196,255,.10), transparent 60%),
    radial-gradient(680px 420px at 6% 2%, rgba(67,196,255,.06), transparent 55%),
    linear-gradient(180deg,#04070f, var(--void) 60%) !important;
  background-attachment:fixed !important;
}
::selection{ background:rgba(67,196,255,.30); color:#fff; }
*{ scrollbar-color:var(--mana-soft) transparent; }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:#05080f; }
::-webkit-scrollbar-thumb{ background:rgba(67,196,255,.35); border-radius:6px; }
::-webkit-scrollbar-thumb:hover{ background:var(--mana); }

/* content wrapper: let the void show through (was solid white) */
#wrapper{ background:transparent !important; box-shadow:none !important; border:none !important; }

/* ---------- typography ---------- */
h1,h2,h3,h4,h5,
.ui.header,
.ui.header .content,
#wrapper h1,#wrapper h2,#wrapper h3,#wrapper h4{
  font-family:var(--display) !important;
  color:var(--bright) !important;
  letter-spacing:.4px;
}
p, .description, .ui.list .item .description, td, li, dd, dt{ color:var(--text); }
a{ color:var(--mana); }
a:hover{ color:var(--mana-2); }

/* ---------- top navbar ---------- */
#navbar.ui.menu{
  background:linear-gradient(180deg, rgba(5,10,20,.96), rgba(5,10,20,.78)) !important;
  border:none !important;
  border-bottom:1px solid var(--line) !important;
  box-shadow:0 2px 24px rgba(0,0,0,.5) !important;
  border-radius:0 !important;
  margin-bottom:0 !important;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
#navbar a.item{
  position:relative;
  color:var(--muted) !important;
  font-family:var(--display) !important;
  text-transform:uppercase;
  letter-spacing:1.5px;
  font-size:13px !important;
  font-weight:500;
}
#navbar a.item:hover,
#navbar a.item.active{ color:var(--bright) !important; background:transparent !important; }
#navbar a.item::before{ display:none !important; }          /* kill Fomantic item divider */
#navbar a.item:hover::after,
#navbar a.item.active::after{
  content:""; position:absolute; left:.55em; right:.55em; bottom:5px; height:2px;
  background:var(--mana); box-shadow:0 0 8px var(--mana-soft);
}
#navbar .ui.dropdown .menu{
  background:var(--glass-2) !important;
  border:1px solid var(--line) !important;
  box-shadow:0 0 22px rgba(0,0,0,.6) !important;
}
#navbar .ui.dropdown .menu > .item{ color:var(--text) !important; }
#navbar .ui.dropdown .menu > .item:hover{ background:var(--mana-dim) !important; color:var(--bright) !important; }

/* ---------- masthead / hero banner ---------- */
.ui.masthead{
  position:relative;
  background:
    radial-gradient(640px 340px at 82% 30%, rgba(67,196,255,.17), transparent 62%),
    linear-gradient(120deg,#081326 0%, #04070f 70%) !important;
  border-bottom:1px solid var(--line) !important;
  box-shadow:inset 0 -1px 0 var(--mana-dim) !important;
}
.ui.masthead h1{
  font-family:var(--display) !important;
  color:var(--bright) !important;
  text-transform:uppercase; letter-spacing:3px;
  text-shadow:0 0 26px var(--mana-soft);
}
.ui.masthead h1::before{
  content:"\25C8  SYSTEM";
  display:block; font-family:var(--display);
  font-size:12px; letter-spacing:4px; color:var(--mana);
  margin-bottom:8px; text-shadow:0 0 10px var(--mana-soft);
}
.ui.masthead .connect-server{
  position:relative;
  background:var(--glass) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--radius) !important;
  box-shadow:0 0 var(--glow) var(--mana-dim), inset 0 0 30px rgba(67,196,255,.05) !important;
}
.ui.masthead .connect-server .ui.header,
.ui.masthead .connect-server h4{ color:var(--bright) !important; font-family:var(--display) !important; }
.ui.masthead .connect-server span[onclick]{ color:var(--mana) !important; cursor:pointer; }

/* ---------- glass panels: cards, segments, widgets ---------- */
.ui.segment, .ui.segments,
.ui.card, .ui.cards > .card,
#news-post,
.ui.comments .comment > .content{
  background:linear-gradient(180deg, var(--glass), var(--glass-2)) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--radius) !important;
  box-shadow:0 0 var(--glow) rgba(67,196,255,.08), inset 0 0 30px rgba(67,196,255,.04) !important;
  color:var(--text) !important;
}
.ui.segment.red, .ui.segment.negative{ border-color:rgba(255,107,125,.5) !important; }

/* L-bracket corners on the main content cards */
.ui.card, .ui.cards > .card, #news-post, .ui.masthead .connect-server{ overflow:hidden; }
.ui.card::before, .ui.cards > .card::before, #news-post::before, .ui.masthead .connect-server::before{
  content:""; position:absolute; top:9px; left:9px; width:14px; height:14px;
  border-top:2px solid var(--mana); border-left:2px solid var(--mana);
  opacity:.7; filter:drop-shadow(0 0 4px var(--mana-soft)); pointer-events:none; z-index:3;
}
.ui.card::after, .ui.cards > .card::after, #news-post::after, .ui.masthead .connect-server::after{
  content:""; position:absolute; bottom:9px; right:9px; width:14px; height:14px;
  border-bottom:2px solid var(--mana); border-right:2px solid var(--mana);
  opacity:.7; filter:drop-shadow(0 0 4px var(--mana-soft)); pointer-events:none; z-index:3;
}
.ui.card > .content, .ui.card > .extra.content,
#news-post > .content, #news-post > .extra.content{
  background:transparent !important; border-color:var(--line) !important; color:var(--text) !important;
}
.ui.card .header, .ui.card .header a,
#news-post .header, #news-post .header a{ color:var(--bright) !important; font-family:var(--display) !important; }
.ui.card .meta, .ui.card .description, #news-post .meta{ color:var(--muted) !important; }

/* ---------- buttons ---------- */
.ui.button{
  font-family:var(--display) !important;
  text-transform:uppercase; letter-spacing:1.2px; font-weight:600;
  border-radius:var(--radius) !important; transition:.2s ease !important;
}
.ui.button,
.ui.default.button,
.ui.basic.button{
  background:var(--mana-dim) !important; color:var(--bright) !important;
  border:1px solid var(--line-2) !important; box-shadow:0 0 12px var(--mana-dim) !important;
}
.ui.button:hover,
.ui.default.button:hover,
.ui.basic.button:hover{ background:var(--mana) !important; color:var(--void) !important; box-shadow:0 0 20px var(--mana-soft) !important; }
.ui.primary.button, .ui.blue.button, .ui.positive.button{
  background:var(--mana) !important; color:var(--void) !important;
  border:1px solid var(--mana) !important; box-shadow:0 0 18px var(--mana-soft) !important;
}
.ui.primary.button:hover, .ui.blue.button:hover, .ui.positive.button:hover{ filter:brightness(1.08); box-shadow:0 0 26px var(--mana) !important; }
.ui.negative.button, .ui.red.button{
  background:rgba(255,107,125,.16) !important; color:#ffd6dc !important;
  border:1px solid rgba(255,107,125,.5) !important; box-shadow:none !important;
}
.ui.negative.button:hover, .ui.red.button:hover{ background:var(--bad) !important; color:#220a0d !important; }
.ui.label{ background:var(--mana-dim) !important; color:var(--mana) !important; border:1px solid var(--line) !important; }
.ui.image.label{ color:var(--bright) !important; }

/* ---------- inputs / forms / dropdowns ---------- */
.ui.input > input,
input[type=text], input[type=password], input[type=email], input[type=number], input[type=search],
textarea,
.ui.form input, .ui.form textarea, .ui.form select,
.ui.selection.dropdown{
  background:#070e1c !important; border:1px solid var(--line) !important;
  color:var(--bright) !important; border-radius:var(--radius) !important;
}
.ui.input > input::placeholder, textarea::placeholder{ color:var(--muted) !important; }
.ui.input > input:focus, textarea:focus, .ui.form input:focus,
.ui.selection.dropdown.active, .ui.selection.dropdown:focus{
  border-color:var(--mana) !important; box-shadow:0 0 12px var(--mana-dim) !important; background:#08101f !important;
}
.ui.selection.dropdown .menu{ background:var(--glass-2) !important; border:1px solid var(--line) !important; }
.ui.selection.dropdown .menu > .item{ color:var(--text) !important; border-color:var(--line) !important; }
.ui.selection.dropdown .menu > .item:hover{ background:var(--mana-dim) !important; }
.ui.checkbox label, .ui.radio.checkbox label{ color:var(--text) !important; }
.ui.toggle.checkbox input:checked ~ label:before{ background:var(--mana) !important; }

/* ---------- tables (forum lists, member lists) ---------- */
.ui.table{
  background:linear-gradient(180deg, var(--glass), var(--glass-2)) !important;
  border:1px solid var(--line) !important; color:var(--text) !important; border-radius:var(--radius) !important;
}
.ui.table thead th{
  background:#0a1326 !important; color:var(--mana) !important; font-family:var(--display) !important;
  text-transform:uppercase; letter-spacing:1px; border-bottom:1px solid var(--line) !important;
}
.ui.table tr, .ui.table td, .ui.table th{ border-color:var(--line) !important; }
.ui.table tbody tr:hover{ background:var(--mana-dim) !important; }

/* ---------- messages / alerts ---------- */
.ui.message{
  background:var(--glass-2) !important; color:var(--text) !important;
  border:1px solid var(--line) !important; border-left:3px solid var(--mana) !important;
  box-shadow:0 0 18px rgba(0,0,0,.4) !important; border-radius:var(--radius) !important;
}
.ui.message .header{ color:var(--bright) !important; font-family:var(--display) !important; }
.ui.success.message, .ui.positive.message{ border-left-color:var(--ok) !important; }
.ui.success.message .header, .ui.positive.message .header{ color:var(--ok) !important; }
.ui.warning.message{ border-left-color:var(--warn) !important; }
.ui.warning.message .header{ color:var(--warn) !important; }
.ui.error.message, .ui.negative.message{ border-left-color:var(--bad) !important; }
.ui.error.message .header, .ui.negative.message .header{ color:var(--bad) !important; }
.ui.info.message{ border-left-color:var(--mana) !important; }

/* ---------- footer ---------- */
#footer.ui.footer.segment{
  background:linear-gradient(180deg,#04070f,#02040a) !important;
  border:none !important; border-top:1px solid var(--line) !important;
  box-shadow:none !important; color:var(--text) !important; margin-top:48px !important;
}
#footer::before, #footer::after{ display:none !important; }   /* no brackets on footer */
#footer .ui.inverted.header, #footer h4{
  color:var(--bright) !important; font-family:var(--display) !important;
  text-transform:uppercase; letter-spacing:1.5px;
}
#footer .item{ color:var(--muted) !important; }
#footer a.item:hover, #footer a:hover{ color:var(--mana) !important; }
#footer .ui.divided.grid > .column{ border-color:var(--line) !important; }
#darkmode{ display:none !important; }   /* System is always dark — hide the light/dark switch */

/* ---------- misc components ---------- */
.ui.divider{ border-color:var(--line) !important; color:var(--muted) !important; }
.ui.popup, .ui.basic.popup{
  background:var(--glass-2) !important; border:1px solid var(--line) !important;
  color:var(--text) !important; box-shadow:0 0 22px rgba(0,0,0,.6) !important;
}
.ui.popup .header, .ui.popup h4{ color:var(--bright) !important; }
.ui.popup:before{ background:var(--glass-2) !important; box-shadow:-1px -1px 0 0 var(--line) !important; }
.ui.modal{ background:var(--void-2) !important; border:1px solid var(--line) !important; box-shadow:0 0 40px rgba(0,0,0,.7) !important; }
.ui.modal > .header{ background:transparent !important; color:var(--bright) !important; font-family:var(--display) !important; border-bottom:1px solid var(--line) !important; }
.ui.modal > .content{ background:transparent !important; color:var(--text) !important; }
.ui.modal > .actions{ background:#05080f !important; border-top:1px solid var(--line) !important; }
.ui.pagination.menu{ background:var(--glass) !important; border:1px solid var(--line) !important; }
.ui.pagination.menu .item{ color:var(--text) !important; }
.ui.pagination.menu .active.item{ background:var(--mana-dim) !important; color:var(--bright) !important; }
.ui.avatar.image, img.ui.avatar{ border:1px solid var(--line); box-shadow:0 0 8px var(--mana-dim); }

/* mobile sidebar */
#toc.ui.vertical.menu{ background:var(--void-2) !important; border-right:1px solid var(--line) !important; }
#toc .item, #toc a.item, #toc h3{ color:var(--text) !important; font-family:var(--display) !important; }
#toc h3{ color:var(--bright) !important; }
#toc a.item:hover{ background:var(--mana-dim) !important; color:var(--bright) !important; }

@media (prefers-reduced-motion:reduce){ *{ animation:none !important; } }