/* Digimon Masters Anarchy — Premium Futuristic Gaming Theme
   Palette: Gold + Digital/Background Blues + Cyan/Slate accents */

:root{
  /* Mandatory Palette — Gold */
  --gold-400:#F5B400;
  --gold-300:#FFC83A;
  --gold-500:#D89A00;
  --gold-700:#9A6B00;

  /* Mandatory Palette — Digital Blues */
  --dblue-400:#00C6FF;
  --dblue-500:#0096E6;
  --dblue-600:#0066CC;
  --dblue-700:#004C99;

  /* Mandatory Palette — Background Blues */
  --bg-850:#0A1F44;
  --bg-900:#081733;
  --bg-800:#112B5B;
  --bg-700:#1B3F7A;

  /* Mandatory Palette — Accents */
  --accent-300:#7FE7FF;
  --accent-100:#C9D6E8;

  /* Compatibility tokens (used across templates) */
  --bg:var(--bg-900);
  --panel:rgba(10,31,68,.72);
  --panel2:rgba(8,23,51,.72);
  --text:var(--accent-100);
  --muted:rgba(201,214,232,.72);
  --border:rgba(127,231,255,.22);
  --accent:var(--dblue-400);
  --accent2:var(--gold-400);
  --danger:var(--gold-500);
  --ok:var(--dblue-400);
  --warn:var(--gold-300);

  /* System */
  --font-sans:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-mono:ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --radius-sm:12px;
  --radius-md:16px;
  --radius-lg:18px;
  --radius-xl:22px;

  --shadow-1:0 12px 34px rgba(8,23,51,.66);
  --shadow-2:0 18px 64px rgba(8,23,51,.78);
  --glow-blue:0 0 0 1px rgba(0,198,255,.14), 0 0 34px rgba(0,198,255,.16);
  --glow-gold:0 0 0 1px rgba(245,180,0,.14), 0 0 34px rgba(245,180,0,.14);

  --ease-out:cubic-bezier(.16, 1, .3, 1);
  --ease-in-out:cubic-bezier(.65, 0, .35, 1);
  --dur-1:120ms;
  --dur-2:180ms;
  --dur-3:260ms;

  --focus-ring:0 0 0 1px rgba(127,231,255,.12), 0 0 0 4px rgba(0,198,255,.20), 0 0 42px rgba(0,198,255,.12);

  /* Premium gradients */
  --grad-page:
    radial-gradient(1200px 820px at 18% -10%, rgba(0,198,255,.20), transparent 62%),
    radial-gradient(980px 720px at 92% 0%, rgba(245,180,0,.12), transparent 56%),
    radial-gradient(880px 680px at 60% 110%, rgba(127,231,255,.10), transparent 62%),
    linear-gradient(180deg, var(--bg-900), var(--bg-850) 35%, var(--bg-800));

  --grad-surface:
    linear-gradient(180deg, rgba(17,43,91,.62), rgba(8,23,51,.76)),
    radial-gradient(900px 260px at 28% 0%, rgba(0,198,255,.12), transparent 68%);

  --grad-surface-soft:
    linear-gradient(180deg, rgba(10,31,68,.68), rgba(8,23,51,.78)),
    radial-gradient(900px 260px at 80% 0%, rgba(245,180,0,.10), transparent 68%);

  --grad-btn:
    linear-gradient(180deg, rgba(0,198,255,.18), rgba(8,23,51,.18));

  --grad-btn-secondary:
    linear-gradient(135deg, rgba(0,198,255,.18), rgba(0,150,230,.16), rgba(17,43,91,.48));

  --grad-btn-danger:
    linear-gradient(135deg, rgba(245,180,0,.22), rgba(216,154,0,.14), rgba(8,23,51,.18));

  --grad-table-head:
    linear-gradient(135deg, rgba(245,180,0,.92), rgba(0,198,255,.62));
}

*,
*::before,
*::after{box-sizing:border-box}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

html{
  color-scheme:dark;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  min-height:100dvh;
  font-family:var(--font-sans);
  color:var(--text);
  background:var(--grad-page);
  background-attachment:fixed;
  letter-spacing:.01em;
  line-height:1.55;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(700px 420px at 18% 18%, rgba(0,198,255,.10), transparent 68%),
    radial-gradient(600px 420px at 86% 8%, rgba(245,180,0,.06), transparent 66%),
    repeating-linear-gradient(90deg, rgba(127,231,255,.05) 0 1px, transparent 1px 112px),
    repeating-linear-gradient(0deg, rgba(127,231,255,.04) 0 1px, transparent 1px 112px),
    repeating-linear-gradient(0deg, rgba(201,214,232,.035) 0 1px, transparent 1px 5px);
  mix-blend-mode:screen;
  opacity:.6;
  filter:saturate(1.05);
}

::selection{background:rgba(0,198,255,.22); color:var(--accent-100)}

a{
  color:var(--accent-300);
  text-decoration:none;
  transition:color var(--dur-2) var(--ease-out), text-shadow var(--dur-2) var(--ease-out);
}
a:hover{
  color:var(--gold-300);
  text-shadow:0 0 16px rgba(245,180,0,.18), 0 0 26px rgba(0,198,255,.12);
}
a:focus-visible{outline:none; box-shadow:var(--focus-ring); border-radius:10px}

code,.mono{font-family:var(--font-mono)}

h1,h2,h3,h4,h5,h6{
  margin:0 0 .75rem;
  letter-spacing:.04em;
  line-height:1.14;
  color:var(--accent-100);
  text-shadow:0 0 26px rgba(0,198,255,.10);
}
h1{
  font-size:clamp(2.1rem, 3.2vw + 1.1rem, 3.7rem);
  background:linear-gradient(90deg, var(--gold-300), var(--accent-300), var(--dblue-400));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:none;
}
h2{
  font-size:clamp(1.6rem, 2.0vw + 1rem, 2.4rem);
  background:linear-gradient(90deg, var(--accent-100), var(--accent-300));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:none;
}
h3{font-size:clamp(1.28rem, 1.2vw + .9rem, 1.85rem)}
h4{font-size:clamp(1.12rem, .9vw + .84rem, 1.45rem)}
h5{font-size:clamp(1.02rem, .6vw + .80rem, 1.22rem)}
h6{font-size:clamp(.95rem, .45vw + .78rem, 1.08rem); color:rgba(201,214,232,.78)}

.wrap{max-width:1456px; margin:0 auto; padding:18px; position:relative; z-index:1}

/* NAVBAR (base uses <header>) */
header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border:1px solid rgba(127,231,255,.22);
  background:
    linear-gradient(180deg, rgba(8,23,51,.78), rgba(10,31,68,.62)),
    radial-gradient(900px 180px at 20% 0%, rgba(0,198,255,.14), transparent 70%),
    radial-gradient(900px 180px at 90% 0%, rgba(245,180,0,.10), transparent 72%);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-1), 0 0 0 1px rgba(0,198,255,.06);
  position:sticky;
  top:12px;
  z-index:20;
  backdrop-filter:saturate(1.15);
}
@supports (backdrop-filter: blur(10px)){
  header{backdrop-filter:blur(14px) saturate(1.15)}
}

header::after{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  bottom:-1px;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(0,198,255,.55), rgba(245,180,0,.32), rgba(127,231,255,.35), transparent);
  box-shadow:0 0 34px rgba(0,198,255,.18);
  pointer-events:none;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--accent-100);
  min-width:0;
  text-decoration:none;
}
.brand span{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.brand span:last-child{
  background:linear-gradient(90deg, var(--gold-300), var(--accent-300), var(--dblue-400));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.brand:hover{ text-shadow:none; }
.brand__logo{
  width:56px;
  height:56px;
  border-radius:18px;
  border:1px solid rgba(127,231,255,.22);
  background:linear-gradient(180deg, rgba(0,198,255,.10), rgba(8,23,51,.18));
  object-fit:contain;
  box-shadow:0 0 0 1px rgba(0,198,255,.08), 0 0 26px rgba(0,198,255,.12);
}
@media (max-width: 520px){
  .brand__logo{width:46px; height:46px; border-radius:16px}
  .brand span{max-width:48vw}
}

.pill{
  font-size:12px;
  padding:4px 10px;
  border:1px solid rgba(127,231,255,.20);
  border-radius:999px;
  background:linear-gradient(180deg, rgba(0,198,255,.10), rgba(8,23,51,.18));
  color:rgba(201,214,232,.78);
  box-shadow:0 0 22px rgba(0,198,255,.08);
}

.nav-desktop{display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end}
.nav-mobile{display:none; gap:10px; align-items:center; justify-content:flex-end}

/* NAV DROPDOWNS (desktop) */
.nav-dd{position:relative; display:inline-flex; align-items:center}
.nav-dd__toggle{white-space:nowrap}
.nav-dd__toggle::after{
  content:"▾";
  font-size:12px;
  opacity:.85;
  margin-left:8px;
  transform:translateY(-1px);
}
.nav-dd__menu{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  min-width:260px;
  padding:10px;
  border-radius:var(--radius-xl);
  border:1px solid rgba(127,231,255,.22);
  background:
    linear-gradient(180deg, rgba(8,23,51,.94), rgba(10,31,68,.88)),
    radial-gradient(900px 260px at 30% 0%, rgba(0,198,255,.12), transparent 70%),
    radial-gradient(900px 260px at 90% 0%, rgba(245,180,0,.10), transparent 72%);
  box-shadow:0 18px 70px rgba(8,23,51,.82), 0 0 0 1px rgba(0,198,255,.06);
  backdrop-filter:blur(14px) saturate(1.1);

  opacity:0;
  transform:translateY(-6px) scale(.985);
  visibility:hidden;
  pointer-events:none;
  transition:
    opacity var(--dur-2) var(--ease-out),
    transform var(--dur-2) var(--ease-out),
    visibility var(--dur-2) var(--ease-out);
  z-index:40;
}
.nav-dd.is-open .nav-dd__menu{
  opacity:1;
  transform:translateY(0) scale(1);
  visibility:visible;
  pointer-events:auto;
}
@media (hover:hover){
  .nav-dd:hover .nav-dd__menu{
    opacity:1;
    transform:translateY(0) scale(1);
    visibility:visible;
    pointer-events:auto;
  }
}
.nav-dd.is-open > .nav-dd__toggle{
  border-color:rgba(127,231,255,.34);
  box-shadow:0 18px 42px rgba(8,23,51,.72), 0 0 0 1px rgba(0,198,255,.14), 0 0 38px rgba(0,198,255,.16);
}
.nav-dd__menu .btn{
  width:100%;
  justify-content:flex-start;
  padding:10px 12px;
  border-radius:14px;
  text-transform:none;
  letter-spacing:.02em;
}
.nav-dd__label{
  margin:6px 6px 4px;
  padding:6px 10px;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(201,214,232,.70);
  border-left:2px solid rgba(245,180,0,.35);
  background:linear-gradient(90deg, rgba(245,180,0,.10), transparent 70%);
  border-radius:12px;
}
.nav-dd__subitem{
  padding-left:34px;
}
.nav-dd__subitem::before{
  content:"";
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  width:10px;
  height:1px;
  background:linear-gradient(90deg, rgba(245,180,0,.55), rgba(0,198,255,.18));
  box-shadow:0 0 16px rgba(245,180,0,.12);
  opacity:.9;
}
.nav-dd__menu--game{
  width:var(--game-menu-width, 260px);
  min-width:var(--game-menu-width, 260px);
}
.nav-dd__branch{
  position:relative;
  margin:2px 0;
  padding:0;
  border:none;
  background:transparent;
  border-radius:0;
}
.nav-dd__branch > summary{ list-style:none; }
.nav-dd__branch > summary::-webkit-details-marker{ display:none; }
.nav-dd__branch-toggle{
  width:100%;
  justify-content:space-between !important;
}
.nav-dd__branch-toggle::after{
  content:"▸";
  margin-left:auto;
  opacity:.8;
  transition:transform var(--dur-2) var(--ease-out);
}
.nav-dd__branch[open] > .nav-dd__branch-toggle::after{ transform:rotate(90deg); }
.nav-dd__branch-menu{
  position:absolute;
  top:0;
  left:calc(100% + 8px);
  width:var(--game-submenu-width, 250px);
  min-width:var(--game-submenu-width, 250px);
  padding:10px;
  border-radius:var(--radius-xl);
  border:1px solid rgba(127,231,255,.22);
  background:
    linear-gradient(180deg, rgba(8,23,51,.96), rgba(10,31,68,.90)),
    radial-gradient(900px 260px at 30% 0%, rgba(0,198,255,.10), transparent 70%);
  box-shadow:0 18px 70px rgba(8,23,51,.82), 0 0 0 1px rgba(0,198,255,.06);
  display:none;
  z-index:45;
}
.nav-dd__branch[open] > .nav-dd__branch-menu{ display:block; }
.nav-dd__branch--below > .nav-dd__branch-menu{ top:calc(100% + 6px); left:0; }
.nav-dd__branch--below > .nav-dd__branch-toggle::after{ content:"▾"; }

/* BUTTONS */
.btn{
  --_bg:var(--grad-btn);
  --_bd:rgba(127,231,255,.24);
  --_tx:var(--accent-100);

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--_bd);
  background:var(--_bg);
  color:var(--_tx);
  cursor:pointer;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  box-shadow:0 14px 30px rgba(8,23,51,.55), 0 0 0 1px rgba(0,198,255,.06);
  position:relative;
  overflow:hidden;
  user-select:none;
  transition:
    transform var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out),
    filter var(--dur-2) var(--ease-out);
}
.btn::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(120px 80px at 30% 30%, rgba(127,231,255,.55), transparent 62%),
    radial-gradient(140px 90px at 80% 60%, rgba(245,180,0,.42), transparent 60%),
    linear-gradient(135deg, rgba(0,198,255,.16), rgba(245,180,0,.08));
  opacity:0;
  filter:blur(18px);
  transition:opacity var(--dur-2) var(--ease-out);
  pointer-events:none;
}
.btn:hover{
  transform:translateY(-1px);
  border-color:rgba(127,231,255,.34);
  box-shadow:0 18px 42px rgba(8,23,51,.72), 0 0 0 1px rgba(0,198,255,.14), 0 0 38px rgba(0,198,255,.16);
}
.btn:hover::before{opacity:.55}
.btn:active{transform:translateY(0); filter:saturate(1.05) contrast(1.03)}
.btn:focus-visible{outline:none; box-shadow:var(--focus-ring), 0 18px 44px rgba(8,23,51,.72)}
.btn[disabled], .btn:disabled{opacity:.55; cursor:not-allowed; transform:none}

.btn.secondary{
  --_bg:var(--grad-btn-secondary);
  --_bd:rgba(0,198,255,.30);
}
.btn.secondary:hover{
  box-shadow:0 18px 44px rgba(8,23,51,.74), 0 0 0 1px rgba(0,198,255,.16), 0 0 40px rgba(0,198,255,.18);
}

.btn.danger{
  --_bg:var(--grad-btn-danger);
  --_bd:rgba(245,180,0,.30);
  color:rgba(201,214,232,.96);
}
.btn.danger:hover{
  box-shadow:0 18px 44px rgba(8,23,51,.74), 0 0 0 1px rgba(245,180,0,.16), 0 0 40px rgba(245,180,0,.16);
}

.btn.ghost{
  --_bg:linear-gradient(180deg, rgba(8,23,51,.18), rgba(8,23,51,.10));
  --_bd:rgba(127,231,255,.18);
  color:rgba(201,214,232,.90);
}
.btn.ghost:hover{
  border-color:rgba(127,231,255,.26);
  box-shadow:0 18px 44px rgba(8,23,51,.74), 0 0 0 1px rgba(0,198,255,.12), 0 0 34px rgba(0,198,255,.14);
}

.xbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:12px;
  border:1px solid rgba(245,180,0,.30);
  background:linear-gradient(180deg, rgba(245,180,0,.18), rgba(8,23,51,.18));
  cursor:pointer;
  color:var(--accent-100);
  font-weight:900;
  box-shadow:0 14px 30px rgba(8,23,51,.55), 0 0 24px rgba(245,180,0,.10);
  transition:filter var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.xbtn:hover{filter:brightness(1.07); transform:translateY(-1px)}
.xbtn:active{transform:translateY(0)}

/* LAYOUT */
.actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.right{text-align:right}

/* FEED */
.feed-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.feed-head__main{min-width:0}
.feed-head__right{
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}
.feed-stats{gap:8px; justify-content:flex-end}
.feed-react{gap:8px}
.feed-actions{gap:8px; justify-content:flex-end}
.feed-head-legacy{display:none !important}

.btn-sm{
  padding:8px 10px;
  border-radius:12px;
  font-size:12px;
  letter-spacing:.04em;
  text-transform:none;
}

.badge-btn{
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  user-select:none;
  transition:
    filter var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out);
}
.badge-btn:hover{
  filter:brightness(1.06);
  border-color:rgba(127,231,255,.30);
  box-shadow:0 0 0 1px rgba(0,198,255,.10), 0 0 22px rgba(0,198,255,.10);
}
.badge-btn.is-active{
  border-color:rgba(245,180,0,.32);
  background:linear-gradient(180deg, rgba(245,180,0,.14), rgba(8,23,51,.18));
  box-shadow:0 0 0 1px rgba(245,180,0,.10), 0 0 28px rgba(245,180,0,.12);
}

.role{margin-left:6px}
.role-adm{
  border-color:rgba(245,180,0,.34);
  background:linear-gradient(180deg, rgba(245,180,0,.14), rgba(8,23,51,.18));
}
.role-gm{
  border-color:rgba(0,198,255,.34);
  background:linear-gradient(180deg, rgba(0,198,255,.12), rgba(8,23,51,.18));
}
.role-player{
  border-color:rgba(201,214,232,.22);
  background:linear-gradient(180deg, rgba(201,214,232,.08), rgba(8,23,51,.18));
}

@media (max-width: 720px){
  .feed-head{flex-direction:column; align-items:stretch}
  .feed-head__right{justify-content:flex-start}
  .feed-stats{justify-content:flex-start}
  .feed-actions{justify-content:flex-start}
}

.grid{
  display:grid;
  gap:14px;
  grid-template-columns:repeat(12, 1fr);
  margin-top:16px;
}
.col-6{grid-column:span 6}
.col-8{grid-column:span 8}
.col-4{grid-column:span 4}
.col-12{grid-column:span 12}

/* CARDS / PANELS */
.card{
  grid-column:span 12;
  position:relative;
  border:1px solid rgba(127,231,255,.22);
  background:var(--grad-surface);
  border-radius:var(--radius-xl);
  padding:14px;
  box-shadow:var(--shadow-1), var(--glow-blue);
  overflow:hidden;
  transition:transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out);
}
.card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:linear-gradient(135deg, rgba(0,198,255,.22), transparent 35%, rgba(245,180,0,.14), transparent 70%, rgba(127,231,255,.16));
  filter:blur(16px);
  opacity:.55;
  pointer-events:none;
}
.card:hover{
  transform:translateY(-2px);
  border-color:rgba(127,231,255,.32);
  box-shadow:var(--shadow-2), 0 0 0 1px rgba(0,198,255,.16), 0 0 46px rgba(0,198,255,.16);
}
.card h2, .card h3{margin:0 0 10px}

.muted{color:var(--muted)}

.kvs{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px 14px;
}
.kv{
  padding:10px;
  border:1px solid rgba(127,231,255,.18);
  border-radius:var(--radius-md);
  background:var(--grad-surface-soft);
  overflow:hidden;
  box-shadow:0 0 0 1px rgba(0,198,255,.05);
}
.kv .k{font-size:12px; color:rgba(201,214,232,.72); letter-spacing:.03em; text-transform:uppercase}
.kv .v{font-size:14px; font-weight:900; margin-top:6px; word-break:break-word}

/* TABLES */
table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border-radius:var(--radius-lg);
  border:1px solid rgba(127,231,255,.20);
  background:linear-gradient(180deg, rgba(8,23,51,.54), rgba(10,31,68,.54));
  box-shadow:var(--shadow-1), 0 0 34px rgba(0,198,255,.10);
}
th, td{
  padding:10px;
  border-bottom:1px solid rgba(127,231,255,.14);
  text-align:left;
  font-size:14px;
  vertical-align:top;
  overflow-wrap:anywhere;
  word-break:break-word;
}
th{
  color:rgba(8,23,51,.92);
  font-weight:950;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.10em;
  background:var(--grad-table-head);
  border-bottom:1px solid rgba(8,23,51,.22);
}
tr:last-child td{border-bottom:none}
tbody tr:hover td{
  background:linear-gradient(90deg, rgba(0,198,255,.10), rgba(245,180,0,.06));
  box-shadow:inset 0 0 0 9999px rgba(0,198,255,.02);
}

/* BADGES */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(127,231,255,.20);
  background:linear-gradient(180deg, rgba(0,198,255,.08), rgba(8,23,51,.18));
  font-size:12px;
  color:rgba(201,214,232,.86);
  white-space:nowrap;
  box-shadow:0 0 20px rgba(0,198,255,.08);
}

.status-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  display:inline-block;
  border:1px solid rgba(127,231,255,.20);
  background:rgba(201,214,232,.30);
  vertical-align:middle;
}
.status-dot.online{
  background:var(--dblue-400);
  border-color:rgba(0,198,255,.45);
  box-shadow:0 0 0 3px rgba(0,198,255,.12), 0 0 22px rgba(0,198,255,.18);
}
.status-dot.offline{
  background:rgba(201,214,232,.20);
  border-color:rgba(201,214,232,.22);
  box-shadow:0 0 0 3px rgba(201,214,232,.06);
}

/* FORMS */
.form-row{display:grid; gap:10px; grid-template-columns:1fr 1fr}

input, select, textarea{
  width:100%;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(127,231,255,.22);
  background:linear-gradient(180deg, rgba(8,23,51,.62), rgba(10,31,68,.52));
  color:rgba(201,214,232,.92);
  outline:none;
  box-shadow:0 0 0 1px rgba(0,198,255,.05);
  transition:border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
select{
  color-scheme: dark;
}
/* Native dropdown list (Windows/browser UI) can ignore some styles, but these improve contrast where supported */
select option,
select optgroup{
  background:rgb(10, 25, 49);
  color:rgba(231,238,252,.96);
}
select option:checked{
  background:rgb(24, 73, 138);
  color:#fff;
}
textarea{resize:vertical}
input::placeholder, textarea::placeholder{color:rgba(201,214,232,.55)}
input:hover, select:hover, textarea:hover{
  border-color:rgba(127,231,255,.30);
  box-shadow:0 0 0 1px rgba(0,198,255,.10), 0 0 26px rgba(0,198,255,.10);
}
input:focus-visible, select:focus-visible, textarea:focus-visible{
  border-color:rgba(0,198,255,.40);
  box-shadow:var(--focus-ring);
  background:linear-gradient(180deg, rgba(8,23,51,.68), rgba(17,43,91,.50));
}
input[disabled], select[disabled], textarea[disabled]{opacity:.55; cursor:not-allowed}

/* FILE UPLOADER (+) */
.file-plus-uploader{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:8px;
  width:100%;
}
.file-plus-input{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  clip-path:inset(50%) !important;
  border:0 !important;
  white-space:nowrap !important;
}
.file-plus-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:flex-start;
}
.file-plus-add{
  width:74px;
  height:74px;
  border-radius:12px;
  border:1px dashed rgba(127,231,255,.45);
  background:
    linear-gradient(180deg, rgba(0,198,255,.12), rgba(8,23,51,.32)),
    radial-gradient(120px 80px at 30% 0%, rgba(127,231,255,.14), transparent 72%);
  color:rgba(201,214,232,.94);
  font-size:34px;
  line-height:1;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 0 0 1px rgba(0,198,255,.10), 0 0 18px rgba(0,198,255,.10);
  transition:border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), filter var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.file-plus-add:hover{
  border-color:rgba(127,231,255,.68);
  box-shadow:0 0 0 1px rgba(0,198,255,.20), 0 0 24px rgba(0,198,255,.18);
  filter:brightness(1.05);
  transform:translateY(-1px);
}
.file-plus-add:focus-visible{
  outline:none;
  box-shadow:var(--focus-ring);
}
.file-plus-add:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
}
.file-plus-add.is-invalid{
  border-color:rgba(255,92,122,.72);
  box-shadow:0 0 0 1px rgba(255,92,122,.20), 0 0 22px rgba(255,92,122,.22);
}
.file-plus-thumb{
  position:relative;
  width:74px;
  height:74px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(127,231,255,.30);
  box-shadow:0 0 0 1px rgba(0,198,255,.10);
  background:
    linear-gradient(180deg, rgba(8,23,51,.74), rgba(10,31,68,.68));
}
.file-plus-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.file-plus-generic{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:900;
  letter-spacing:.06em;
  color:rgba(201,214,232,.86);
  text-transform:uppercase;
  background:
    linear-gradient(180deg, rgba(0,198,255,.12), rgba(8,23,51,.42));
}
.file-plus-remove{
  position:absolute;
  top:4px;
  right:4px;
  width:18px;
  height:18px;
  border-radius:6px;
  border:1px solid rgba(255,92,122,.42);
  background:rgba(10,14,22,.84);
  color:#fff;
  font-size:11px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
}
.file-plus-remove:hover{
  filter:brightness(1.1);
}
.file-plus-summary{
  font-size:12px;
  color:rgba(201,214,232,.72);
  line-height:1.3;
  overflow-wrap:anywhere;
}

/* DRAWERS */
.drawer-backdrop{
  position:fixed;
  inset:0;
  background:linear-gradient(180deg, rgba(8,23,51,.42), rgba(8,23,51,.66));
  display:none;
  z-index:100001;
}
.drawer-backdrop.show{display:block}
.drawer{
  position:absolute;
  top:0;
  right:0;
  height:100%;
  width:min(360px, 88vw);
  background:
    linear-gradient(180deg, rgba(8,23,51,.92), rgba(10,31,68,.86)),
    radial-gradient(900px 260px at 30% 0%, rgba(0,198,255,.12), transparent 70%),
    radial-gradient(900px 260px at 90% 0%, rgba(245,180,0,.10), transparent 72%);
  border-left:1px solid rgba(127,231,255,.22);
  box-shadow:0 18px 70px rgba(8,23,51,.82), 0 0 0 1px rgba(0,198,255,.06);
  padding:14px;
  overflow:auto;
  transform:translateX(102%);
  transition:transform var(--dur-2) var(--ease-out);
}
.drawer-backdrop.show .drawer{transform:translateX(0)}
.drawer-title{font-weight:950; font-size:16px; letter-spacing:.06em; text-transform:uppercase}
.drawer-links{display:flex; flex-direction:column; gap:12px; margin-top:12px}
.drawer-links .btn{width:100%; justify-content:flex-start}
.drawer-section{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.drawer-section__title{
  font-weight:950;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(201,214,232,.72);
  display:flex;
  align-items:center;
  gap:10px;
  padding:2px 6px;
}
.drawer-section__title::after{
  content:"";
  height:1px;
  flex:1;
  background:linear-gradient(90deg, rgba(0,198,255,.28), rgba(245,180,0,.16), transparent);
  box-shadow:0 0 24px rgba(0,198,255,.10);
  opacity:.9;
}
.drawer-section__sub{
  margin-top:2px;
  padding:6px 10px 0;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(201,214,232,.66);
  border-left:2px solid rgba(245,180,0,.32);
}
.drawer-subitem{
  padding-left:34px;
}
.drawer-subitem::before{
  content:"";
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  width:10px;
  height:1px;
  background:linear-gradient(90deg, rgba(245,180,0,.55), rgba(0,198,255,.18));
  box-shadow:0 0 16px rgba(245,180,0,.12);
  opacity:.9;
}
.drawer-menu-branch{
  margin-top:8px;
  border:none;
  padding:0;
  background:transparent;
}
.drawer-menu-branch > summary{ list-style:none; }
.drawer-menu-branch > summary::-webkit-details-marker{ display:none; }
.drawer-menu-branch__summary{
  width:100%;
  justify-content:space-between !important;
}
.drawer-menu-branch__summary::after{
  content:"▾";
  margin-left:auto;
  opacity:.85;
}
.drawer-menu-branch:not([open]) > .drawer-menu-branch__summary::after{ transform:rotate(-90deg); }
.drawer-menu-branch__children{
  display:grid;
  gap:8px;
  margin-top:8px;
}
.drawer-section--game .btn{
  width:100%;
  justify-content:flex-start;
}
.drawer-sep{height:1px; background:linear-gradient(90deg, transparent, rgba(127,231,255,.28), rgba(245,180,0,.18), transparent); opacity:.85; margin:10px 0}

/* CHAT */
.chat-widget{position:fixed; right:18px; bottom:18px; z-index:9999}
.chat-open{border-radius:999px; padding:10px 14px}
.chat-panel{
  position:fixed;
  right:18px;
  bottom:70px;
  width:380px;
  height:520px;
  background:
    linear-gradient(180deg, rgba(8,23,51,.92), rgba(10,31,68,.86)),
    radial-gradient(900px 240px at 30% 0%, rgba(0,198,255,.12), transparent 70%),
    radial-gradient(900px 240px at 90% 0%, rgba(245,180,0,.10), transparent 72%);
  border:1px solid rgba(127,231,255,.22);
  border-radius:var(--radius-xl);
  overflow:hidden;
  box-shadow:0 18px 70px rgba(8,23,51,.82), 0 0 0 1px rgba(0,198,255,.06);
}

/* ADS / RAIL */
.page-layout{margin-top:16px}
.page-layout.has-ads{
  display:grid;
  grid-template-columns:180px minmax(0, 1fr) 180px;
  gap:14px;
  align-items:start;
}
.page-main{min-width:0}
.ad-rail{position:sticky; top:92px}
.ad-card{
  border:1px solid rgba(127,231,255,.20);
  background:var(--grad-surface);
  border-radius:var(--radius-xl);
  padding:12px;
  overflow:hidden;
  box-shadow:var(--shadow-1), var(--glow-blue);
}
.ad-card a{color:var(--text); text-decoration:none}
.ad-card a:hover{filter:brightness(1.03); text-decoration:none}
.ad-img{
  width:100%;
  height:auto;
  max-height:240px;
  object-fit:contain;
  border-radius:var(--radius-lg);
  border:1px solid rgba(127,231,255,.18);
  background:rgba(8,23,51,.28);
  display:block;
}
.ad-title{margin-top:10px; font-weight:950; letter-spacing:.02em}
.ad-desc{margin-top:6px; font-size:12px; color:rgba(201,214,232,.72)}
.ad-meta{margin-top:10px; font-size:11px; color:rgba(201,214,232,.70)}

/* FLASH */
.flash{margin-top:16px; display:grid; gap:10px}
.flash .msg{
  padding:10px 12px;
  border-radius:var(--radius-lg);
  border:1px solid rgba(127,231,255,.18);
  background:linear-gradient(180deg, rgba(8,23,51,.52), rgba(10,31,68,.52));
  color:var(--text);
  box-shadow:0 12px 30px rgba(8,23,51,.56), 0 0 26px rgba(0,198,255,.08);
}
.flash .msg.success{border-color:rgba(0,198,255,.34)}
.flash .msg.warning{border-color:rgba(245,180,0,.30)}
.flash .msg.error{border-color:rgba(216,154,0,.34)}

/* CONTENT HELPERS */
details{
  border:1px solid rgba(127,231,255,.18);
  background:linear-gradient(180deg, rgba(8,23,51,.42), rgba(10,31,68,.42));
  border-radius:var(--radius-lg);
  padding:10px 12px;
  box-shadow:0 12px 30px rgba(8,23,51,.52);
}
details summary{
  cursor:pointer;
  font-weight:950;
  letter-spacing:.04em;
  color:rgba(201,214,232,.92);
  outline:none;
}
.pre{
  white-space:pre-wrap;
  line-height:1.4;
  color:rgba(201,214,232,.92);
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* DMs */
.dm-row{display:flex; justify-content:flex-start; margin-top:10px}
.dm-row.mine{justify-content:flex-end}
.dm-bubble{max-width:min(720px, 78%)}
.dm-bubble.mine{
  background:linear-gradient(180deg, rgba(0,198,255,.10), rgba(8,23,51,.18));
  border-color:rgba(0,198,255,.30);
}

/* MEDIA */
.media-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:10px;
  margin-top:10px;
}
.media-link{display:flex; width:100%; justify-content:center; align-items:center}
.media-img{
  max-width:100%;
  height:auto;
  max-height:340px;
  object-fit:contain;
  border-radius:var(--radius-lg);
  border:1px solid rgba(127,231,255,.18);
  background:rgba(8,23,51,.28);
  display:block;
}
.media-img.thumb{max-height:260px}

/* MODALS */
.modal-backdrop{
  position:fixed;
  inset:0;
  background:linear-gradient(180deg, rgba(8,23,51,.45), rgba(8,23,51,.70));
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:99999;
}
.modal-backdrop.show{display:flex}
.modal-box{width:100%; max-width:560px}

/* TOASTS */
.toast-wrap{
  position:fixed;
  top:18px;
  right:18px;
  z-index:100000;
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:none;
  max-width:min(520px, calc(100vw - 36px));
}
.toast{
  pointer-events:auto;
  padding:10px 12px;
  border-radius:var(--radius-lg);
  border:1px solid rgba(127,231,255,.18);
  background:linear-gradient(180deg, rgba(8,23,51,.82), rgba(10,31,68,.76));
  backdrop-filter:blur(12px) saturate(1.1);
  color:var(--text);
  box-shadow:0 18px 60px rgba(8,23,51,.72);
}
.toast.success{border-color:rgba(0,198,255,.34)}
.toast.warning{border-color:rgba(245,180,0,.30)}
.toast.error{border-color:rgba(216,154,0,.34)}

footer{
  margin:16px 0 28px;
  color:rgba(201,214,232,.65);
  font-size:12px;
  text-align:center;
  letter-spacing:.03em;
}

@media (max-width: 900px){
  .wrap{padding:12px}
  .col-6,.col-8,.col-4{grid-column:span 12}
  .kvs{grid-template-columns:1fr}
  header{position:static; padding:12px}
  .nav-desktop{display:none}
  .nav-mobile{display:flex}
  .form-row{grid-template-columns:1fr}
  table{display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch}
}

@media (max-width: 1080px){
  .page-layout.has-ads{grid-template-columns:1fr}
  .ad-rail{display:none}
}

@media (max-width: 600px){
  .pill{display:none}
  .btn{padding:10px 10px}
  th, td{padding:8px; font-size:13px}
  .toast-wrap{left:12px; right:12px; top:12px}
  .chat-widget{right:12px; bottom:12px}
  .chat-panel{
    left:12px;
    right:12px;
    width:auto;
    height:min(72vh, 520px);
    bottom:66px;
  }
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation:none !important; transition:none !important}
}

/* Scrollbars */
::-webkit-scrollbar{width:12px; height:12px}
::-webkit-scrollbar-track{background:rgba(8,23,51,.55)}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, rgba(0,198,255,.22), rgba(245,180,0,.14));
  border:1px solid rgba(127,231,255,.18);
  border-radius:999px;
  box-shadow:0 0 20px rgba(0,198,255,.10);
}
::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg, rgba(0,198,255,.28), rgba(245,180,0,.18));
  box-shadow:0 0 26px rgba(0,198,255,.14), 0 0 18px rgba(245,180,0,.10);
}

/* TUTORIALS */
.tutorial-steps-editor{display:flex; flex-direction:column; gap:12px}
.tutorial-step-editor{background:rgba(15,22,32,.55)}
.tutorial-step-img{
  width:100%;
  height:auto;
  max-height:520px;
  object-fit:contain;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(11,15,23,.35);
  display:block;
}
.tutorial-video{
  position:relative;
  width:100%;
  padding-top:56.25%;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(11,15,23,.35);
  overflow:hidden;
}
.tutorial-video__frame{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}