/* ==========================================================================
   ExoraBOOST — Dark Cyber-Neon Theme
   Palette sourced from brand logo: magenta → violet → electric blue glow
   ========================================================================== */
:root{
  /* Base surfaces */
  --bg-0:#08070c;
  --bg-1:#0d0b14;
  --bg-2:#120d1e;
  --violet-1:#1a102f;
  --violet-2:#281343;
  --violet-3:#341a58;

  /* Neon accents (from logo) */
  --pink:#ff2a85;
  --magenta:#ff2fd6;
  --purple:#a63dff;
  --blue:#5b6cff;
  --cyan:#46c8ff;

  /* Text */
  --text-hi:#f4eefc;
  --text-mid:#b9a9d6;
  --text-low:#7a689e;

  /* Semantic */
  --ok:#31e39c;
  --warn:#ffc24d;
  --danger:#ff4d6d;

  --grad-brand:linear-gradient(135deg,#ff2fa0 0%,#b026ff 55%,#5b6cff 100%);
  --grad-brand-soft:linear-gradient(135deg,rgba(255,47,160,.16),rgba(176,38,255,.14),rgba(91,108,255,.12));
  --border-soft:rgba(166,61,255,.22);
  --border-pink:rgba(255,42,133,.45);

  --radius-lg:18px;
  --radius-md:13px;
  --radius-sm:9px;

  --font-display:'Orbitron',sans-serif;
  --font-body:'Rajdhani',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
}

/* ---- Açık tema ---- */
:root[data-theme="light"]{
  --bg-0:#eee8f7; --bg-1:#f4f0fb; --bg-2:#e7dff5;
  --violet-1:#e9e2f7; --violet-2:#ddd2f0; --violet-3:#cdbde8;
  --text-hi:#1c132b; --text-mid:#54476e; --text-low:#8577a0;
  --border-soft:rgba(122,60,200,.20); --border-pink:rgba(224,17,95,.42);
  --grad-brand-soft:linear-gradient(135deg,rgba(255,47,160,.14),rgba(176,38,255,.12),rgba(91,108,255,.10));
}
:root[data-theme="light"] body::before{opacity:.5}
:root[data-theme="light"] body::after{opacity:.5}
:root[data-theme="light"] .panel,
:root[data-theme="light"] .lp-card{background:linear-gradient(165deg,rgba(255,255,255,.92),rgba(244,240,251,.86) 55%);box-shadow:0 10px 30px rgba(80,40,140,.10)}
:root[data-theme="light"] .control-banner{background:linear-gradient(160deg,rgba(255,255,255,.9),rgba(237,223,245,.85))}
:root[data-theme="light"] .input-wrap input,
:root[data-theme="light"] .search-wrap input,
:root[data-theme="light"] .chat-input input,
:root[data-theme="light"] .preset-bar input,
:root[data-theme="light"] .preset-bar select,
:root[data-theme="light"] .autostop-label select,
:root[data-theme="light"] #adminKeyInput,
:root[data-theme="light"] .log-console{background:rgba(255,255,255,.8)}
:root[data-theme="light"] .stat-card,
:root[data-theme="light"] .metric,
:root[data-theme="light"] .lb-row,
:root[data-theme="light"] .convo-row.active,
:root[data-theme="light"] .icon-btn,
:root[data-theme="light"] .f-tab,
:root[data-theme="light"] .fh-btn,
:root[data-theme="light"] .chip,
:root[data-theme="light"] .au-btn,
:root[data-theme="light"] .admin-user,
:root[data-theme="light"] .lp-step,
:root[data-theme="light"] .lp-badge,
:root[data-theme="light"] .vbar-ctrl,
:root[data-theme="light"] .toast{background:rgba(255,255,255,.75)}
:root[data-theme="light"] .msg.them .bubble{background:rgba(255,255,255,.9);color:var(--text-hi)}
:root[data-theme="light"] .chat-drawer{background:linear-gradient(200deg,rgba(244,240,251,.98),rgba(233,226,247,.99))}
:root[data-theme="light"] .modal .m-card{background:linear-gradient(170deg,rgba(255,255,255,.97),rgba(244,240,251,.98))}
:root[data-theme="light"] .game-card{background:var(--violet-1)}
:root[data-theme="light"] .overlay{background:rgba(60,30,110,.35)}
:root[data-theme="light"] ::-webkit-scrollbar-track{background:var(--bg-2)}

*{margin:0;padding:0;box-sizing:border-box}
::selection{background:rgba(255,42,133,.35);color:#fff}

html,body{height:100%}
body{
  font-family:var(--font-body);
  background:var(--bg-0);
  color:var(--text-hi);
  font-size:16px;
  overflow-x:hidden;
}

/* Ambient background: nebula glows + circuit grid */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(900px 520px at 85% -10%, rgba(176,38,255,.16), transparent 60%),
    radial-gradient(800px 500px at -10% 30%, rgba(255,42,133,.10), transparent 60%),
    radial-gradient(700px 600px at 50% 115%, rgba(91,108,255,.12), transparent 60%),
    var(--bg-0);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(166,61,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(166,61,255,.045) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse at 50% 20%, #000 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 20%, #000 30%, transparent 75%);
}

/* Scrollbars */
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:var(--bg-1)}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--purple),var(--pink));border-radius:99px;border:2px solid var(--bg-1)}

/* ==========================================================================
   Layout shell
   ========================================================================== */
.app{
  max-width:1560px;margin:0 auto;padding:18px 22px 30px;
  display:flex;flex-direction:column;gap:18px;min-height:100vh;
}

.dashboard{
  display:grid;gap:18px;flex:1;
  grid-template-columns:390px 1fr;
  grid-template-areas:
    "profile control"
    "leaderboard library"
    "auth library";
  grid-template-rows:auto 1fr auto;
  align-items:stretch;
}
.area-profile{grid-area:profile}
.area-control{grid-area:control}
.area-leaderboard{grid-area:leaderboard;min-height:0}
.area-library{grid-area:library;min-height:0}
.area-auth{grid-area:auth}

/* ==========================================================================
   Glass panels
   ========================================================================== */
.panel{
  position:relative;
  background:linear-gradient(165deg, rgba(40,19,67,.50), rgba(13,11,20,.82) 55%);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-lg);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 0 0 1px rgba(255,42,133,.04), 0 22px 44px rgba(0,0,0,.55);
  overflow:hidden;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.panel:hover{border-color:rgba(166,61,255,.4)}
.panel::before{ /* top gradient hairline */
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,42,133,.65),rgba(166,61,255,.65),transparent);
  opacity:.7;
}

.panel-head{
  display:flex;align-items:center;gap:12px;
  padding:16px 20px 12px;
}
.panel-head .p-icon{
  width:34px;height:34px;flex:none;border-radius:10px;
  display:grid;place-items:center;
  background:var(--grad-brand-soft);
  border:1px solid var(--border-soft);
  color:var(--pink);
}
.panel-head .p-icon svg{width:17px;height:17px}
.panel-title{
  font-family:var(--font-display);font-size:12.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--text-hi);
}
.panel-sub{font-size:12.5px;color:var(--text-low);letter-spacing:.06em;margin-top:2px}
.panel-head .spacer{flex:1}
.panel-body{padding:6px 20px 20px}

.chip{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;
  padding:4px 10px;border-radius:99px;white-space:nowrap;
  border:1px solid var(--border-soft);color:var(--text-mid);
  background:rgba(26,16,47,.6);
}
.chip.live{color:var(--ok);border-color:rgba(49,227,156,.35)}
.chip.pink{color:var(--pink);border-color:var(--border-pink)}

/* ==========================================================================
   Header
   ========================================================================== */
.topbar{
  display:flex;align-items:center;gap:18px;
  padding:14px 20px;
  border-radius:var(--radius-lg);
}
.brand{display:flex;align-items:center;gap:14px;min-width:0}
.brand-logo{
  width:52px;height:52px;flex:none;
  filter:drop-shadow(0 0 12px rgba(255,42,133,.55)) drop-shadow(0 0 26px rgba(166,61,255,.35));
  animation:logoPulse 4s ease-in-out infinite;
}
@keyframes logoPulse{
  0%,100%{filter:drop-shadow(0 0 10px rgba(255,42,133,.45)) drop-shadow(0 0 22px rgba(166,61,255,.30))}
  50%{filter:drop-shadow(0 0 16px rgba(255,42,133,.75)) drop-shadow(0 0 34px rgba(166,61,255,.50))}
}
.brand-name{
  font-family:var(--font-display);font-size:23px;font-weight:900;letter-spacing:.06em;
  line-height:1;white-space:nowrap;
}
.brand-name .x-light{color:var(--text-hi)}
.brand-name .x-grad{
  background:var(--grad-brand);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 28px rgba(255,42,133,.35);
}
.brand > div{min-width:0}
.brand-tag{
  font-size:11px;letter-spacing:.34em;color:var(--text-low);
  text-transform:uppercase;margin-top:5px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}

.status-pill{
  display:flex;align-items:center;gap:9px;
  padding:8px 16px;border-radius:99px;
  border:1px solid var(--border-soft);
  background:rgba(13,11,20,.7);
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.14em;
  transition:all .35s ease;
}
.status-dot{width:9px;height:9px;border-radius:50%;background:var(--danger);box-shadow:0 0 10px var(--danger);transition:all .35s ease}
.status-pill[data-state="disconnected"]{color:#ff8ba0}
.status-pill[data-state="connecting"]{color:var(--warn)}
.status-pill[data-state="connecting"] .status-dot{background:var(--warn);box-shadow:0 0 10px var(--warn);animation:blink 1s infinite}
.status-pill[data-state="connected"]{color:var(--ok);border-color:rgba(49,227,156,.4)}
.status-pill[data-state="connected"] .status-dot{background:var(--ok);box-shadow:0 0 12px var(--ok);animation:blink 2.4s infinite}
@keyframes blink{50%{opacity:.35}}

.topbar .actions{margin-left:auto;display:flex;align-items:center;gap:10px}

.icon-btn{
  position:relative;
  display:flex;align-items:center;gap:9px;
  padding:10px 16px;border-radius:var(--radius-md);
  background:rgba(26,16,47,.55);
  border:1px solid var(--border-soft);
  color:var(--text-mid);
  font-family:var(--font-body);font-size:14.5px;font-weight:600;letter-spacing:.08em;
  cursor:pointer;transition:all .25s ease;text-transform:uppercase;
}
.icon-btn svg{width:17px;height:17px}
.icon-btn:hover{
  color:var(--text-hi);border-color:var(--border-pink);
  box-shadow:0 0 18px rgba(255,42,133,.25), inset 0 0 14px rgba(255,42,133,.06);
  transform:translateY(-1px);
}
.icon-btn.danger:hover{border-color:rgba(255,77,109,.6);box-shadow:0 0 18px rgba(255,77,109,.3)}
.theme-btn{padding:10px 12px}
.lp-theme{
  width:40px;height:40px;border-radius:10px;cursor:pointer;display:grid;place-items:center;
  background:rgba(26,16,47,.55);border:1px solid var(--border-soft);color:var(--text-mid);transition:all .2s;
}
.lp-theme svg{width:18px;height:18px}
.lp-theme:hover{color:var(--text-hi);border-color:var(--border-pink)}
.icon-btn .badge{
  position:absolute;top:-6px;right:-6px;
  min-width:19px;height:19px;padding:0 5px;border-radius:99px;
  background:var(--grad-brand);color:#fff;
  font-family:var(--font-mono);font-size:10.5px;font-weight:600;
  display:grid;place-items:center;
  box-shadow:0 0 12px rgba(255,42,133,.6);
}

/* ==========================================================================
   Profile panel
   ========================================================================== */
.acct-switcher{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:2px 0 12px;margin-bottom:2px;border-bottom:1px dashed rgba(166,61,255,.14)}
.acct-chip{
  position:relative;display:flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;border-radius:99px;cursor:pointer;
  background:rgba(26,16,47,.5);border:1px solid var(--border-soft);color:var(--text-mid);transition:all .2s;max-width:170px;
}
.acct-chip:hover{color:var(--text-hi);border-color:var(--border-pink)}
.acct-chip.active{background:var(--grad-brand-soft);border-color:var(--border-pink);color:var(--text-hi)}
.acct-ava{width:26px;height:26px;flex:none;border-radius:8px;display:grid;place-items:center;overflow:hidden;color:#fff;font-family:var(--font-display);font-weight:700;font-size:11px}
.acct-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-dot{width:7px;height:7px;flex:none;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok)}
.acct-x{flex:none;width:16px;height:16px;border-radius:50%;display:grid;place-items:center;font-size:14px;line-height:1;color:var(--text-low);transition:all .2s}
.acct-x:hover{color:#fff;background:rgba(255,77,109,.6)}
.acct-add{
  width:34px;height:34px;flex:none;border-radius:99px;cursor:pointer;font-size:18px;display:grid;place-items:center;
  background:rgba(26,16,47,.5);border:1px dashed var(--border-soft);color:var(--text-mid);transition:all .2s;
}
.acct-add:hover{color:#fff;border-color:var(--border-pink);border-style:solid}

.profile-row{display:flex;align-items:center;gap:16px;padding:4px 0 14px}
.avatar{
  width:74px;height:74px;flex:none;border-radius:16px;position:relative;
  padding:2px;background:var(--grad-brand);
  box-shadow:0 0 20px rgba(255,42,133,.35);
}
.avatar-inner{
  width:100%;height:100%;border-radius:14px;
  background:linear-gradient(145deg,var(--violet-2),var(--bg-2));
  display:grid;place-items:center;overflow:hidden;
  font-family:var(--font-display);font-weight:900;font-size:24px;
  color:var(--text-hi);text-shadow:0 0 14px rgba(255,42,133,.7);
}
.avatar .presence{
  position:absolute;bottom:-4px;right:-4px;width:18px;height:18px;border-radius:50%;
  background:var(--text-low);border:3px solid var(--bg-1);transition:all .3s;
}
.avatar.online .presence{background:var(--ok);box-shadow:0 0 10px var(--ok)}
.profile-id{min-width:0}
.profile-name{
  font-family:var(--font-display);font-size:17px;font-weight:700;letter-spacing:.05em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.profile-status{font-size:13.5px;color:var(--text-low);letter-spacing:.05em;margin-top:4px;display:flex;align-items:center;gap:7px}
.profile-status .running-game{color:var(--cyan)}

.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stat-card{
  position:relative;padding:13px 15px;border-radius:var(--radius-md);
  background:rgba(26,16,47,.5);
  border:1px solid var(--border-soft);
  overflow:hidden;transition:all .3s ease;
}
.stat-card:hover{border-color:var(--border-pink);transform:translateY(-2px)}
.stat-card::after{
  content:"";position:absolute;inset:auto 0 0 0;height:2px;
  background:var(--grad-brand);opacity:.6;
}
.stat-label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-low)}
.stat-value{
  font-family:var(--font-display);font-size:21px;font-weight:700;margin-top:6px;
  background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.stat-value small{font-size:12px;letter-spacing:.05em}

/* ==========================================================================
   Leaderboard
   ========================================================================== */
.lb-list{display:flex;flex-direction:column;gap:9px;overflow-y:auto;max-height:100%;padding-right:4px}
.lb-row{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;border-radius:var(--radius-md);
  background:rgba(26,16,47,.42);
  border:1px solid transparent;
  transition:all .25s ease;
}
.lb-row:hover{border-color:var(--border-soft);background:rgba(40,19,67,.5);transform:translateX(3px)}
.lb-rank{
  width:30px;height:30px;flex:none;border-radius:9px;display:grid;place-items:center;
  font-family:var(--font-mono);font-size:12.5px;font-weight:600;color:var(--text-mid);
  background:rgba(13,11,20,.65);border:1px solid var(--border-soft);
}
.lb-row.top1 .lb-rank{color:#ffd75e;border-color:rgba(255,215,94,.5);box-shadow:0 0 12px rgba(255,215,94,.2)}
.lb-row.top2 .lb-rank{color:#dfe6ff;border-color:rgba(223,230,255,.4)}
.lb-row.top3 .lb-rank{color:#ffab7a;border-color:rgba(255,171,122,.4)}
.lb-ava{
  width:36px;height:36px;flex:none;border-radius:10px;display:grid;place-items:center;
  font-family:var(--font-display);font-size:13px;font-weight:700;color:#fff;
  text-shadow:0 1px 6px rgba(0,0,0,.6);
}
.lb-meta{flex:1;min-width:0}
.lb-name{font-weight:600;font-size:15px;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-hours{font-family:var(--font-mono);font-size:11px;color:var(--text-low);margin-top:1px}
.lb-hours b{color:var(--cyan);font-weight:600}
.btn-ark{
  flex:none;display:flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;
  padding:7px 12px;border-radius:9px;cursor:pointer;
  color:var(--pink);background:rgba(255,42,133,.08);
  border:1px solid var(--border-pink);
  transition:all .25s ease;
}
.btn-ark:hover{background:rgba(255,42,133,.2);box-shadow:0 0 14px rgba(255,42,133,.35);transform:scale(1.05)}
.btn-ark:disabled{cursor:default;color:var(--ok);border-color:rgba(49,227,156,.4);background:rgba(49,227,156,.07);transform:none;box-shadow:none}
.btn-ark .spin{animation:rot 1s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}

/* ==========================================================================
   Steam Auth card
   ========================================================================== */
.field{margin-bottom:13px}
.field label{
  display:block;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--text-low);margin-bottom:7px;
}
.input-wrap{position:relative}
.input-wrap .f-icon{
  position:absolute;left:13px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;color:var(--text-low);pointer-events:none;transition:color .25s;
}
.input-wrap input{
  width:100%;padding:12px 14px 12px 40px;
  background:rgba(8,7,12,.75);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-md);
  color:var(--text-hi);font-family:var(--font-body);font-size:15.5px;font-weight:500;letter-spacing:.04em;
  outline:none;transition:all .25s ease;
}
.input-wrap input::placeholder{color:var(--text-low);opacity:.7}
.input-wrap input:focus{
  border-color:var(--pink);
  box-shadow:0 0 0 3px rgba(255,42,133,.13), 0 0 22px rgba(255,42,133,.22), inset 0 0 12px rgba(255,42,133,.05);
}
.input-wrap input:focus ~ .f-icon, .input-wrap:focus-within .f-icon{color:var(--pink)}

.btn-connect{
  position:relative;width:100%;margin-top:4px;
  padding:14px 18px;border:none;border-radius:var(--radius-md);cursor:pointer;
  font-family:var(--font-display);font-size:13.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:#fff;overflow:hidden;
  background:linear-gradient(120deg,#ff2fa0,#b026ff,#5b6cff,#b026ff,#ff2fa0);
  background-size:280% 100%;
  animation:gradShift 5s linear infinite;
  box-shadow:0 0 22px rgba(255,42,133,.4), 0 8px 24px rgba(0,0,0,.45);
  transition:transform .2s ease, box-shadow .3s ease, filter .3s ease;
}
@keyframes gradShift{to{background-position:280% 0}}
.btn-connect::after{ /* sheen sweep */
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg);animation:sheen 3.4s ease-in-out infinite;
}
@keyframes sheen{0%,60%{left:-60%}100%{left:130%}}
.btn-connect:hover{transform:translateY(-2px);box-shadow:0 0 34px rgba(255,42,133,.65), 0 12px 28px rgba(0,0,0,.5)}
.btn-connect:active{transform:translateY(0)}
.btn-connect:disabled{filter:saturate(.35) brightness(.75);cursor:wait;animation-play-state:paused}
.btn-connect.is-disconnect{
  background:rgba(255,77,109,.1);animation:none;
  border:1px solid rgba(255,77,109,.5);color:#ff8ba0;
  box-shadow:0 0 16px rgba(255,77,109,.2);
}
.auth-note{
  display:flex;align-items:center;gap:8px;margin-top:12px;
  font-size:12.5px;color:var(--text-low);letter-spacing:.04em;
}
.auth-note svg{width:14px;height:14px;flex:none;color:var(--purple)}

.auth-or{display:flex;align-items:center;gap:12px;margin:14px 0;color:var(--text-low);font-size:12px;letter-spacing:.1em}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--border-soft)}
.btn-qr{
  width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 18px;border-radius:var(--radius-md);cursor:pointer;
  font-family:var(--font-body);font-size:15px;font-weight:600;letter-spacing:.03em;
  color:var(--text-hi);background:rgba(26,16,47,.55);border:1px solid var(--border-soft);transition:all .22s;
}
.btn-qr svg{width:18px;height:18px}
.btn-qr .qr-hint{color:var(--text-low);font-size:13px;font-weight:500}
.btn-qr:hover{border-color:var(--border-pink);box-shadow:0 0 18px rgba(255,42,133,.22);transform:translateY(-1px)}

/* QR modal */
.qr-body{text-align:center}
.qr-frame{
  width:236px;height:236px;margin:0 auto 16px;border-radius:var(--radius-md);
  background:#fff;display:grid;place-items:center;overflow:hidden;
  box-shadow:0 0 30px rgba(166,61,255,.25);
}
.qr-frame img{width:100%;height:100%;object-fit:contain}
.qr-spin{font-size:34px;color:var(--purple);animation:rot 1s linear infinite}
.qr-status{font-size:14.5px;font-weight:600;color:var(--text-hi);letter-spacing:.02em;margin-bottom:16px;min-height:20px}
.qr-steps{text-align:left;max-width:300px;margin:0 auto;padding-left:20px;color:var(--text-mid);font-size:13.5px;line-height:1.7}
.qr-steps b{color:var(--text-hi)}

/* ==========================================================================
   Booster control panel
   ========================================================================== */
.control-banner{
  position:relative;border-radius:var(--radius-md);overflow:hidden;
  border:1px solid var(--border-soft);
  background:
    repeating-linear-gradient(-45deg, rgba(166,61,255,.06) 0 14px, transparent 14px 28px),
    linear-gradient(160deg, rgba(26,16,47,.8), rgba(8,7,12,.9));
  padding:22px 24px;
  display:flex;align-items:center;gap:18px;
  transition:all .4s ease;
}
.control-banner .cb-pulse{
  width:52px;height:52px;flex:none;border-radius:50%;
  display:grid;place-items:center;position:relative;
  color:var(--purple);border:1px solid var(--border-soft);
  background:rgba(13,11,20,.6);
}
.control-banner .cb-pulse svg{width:24px;height:24px}
.control-banner .cb-pulse::before,
.control-banner .cb-pulse::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1px solid var(--purple);opacity:0;
}
.control-banner h2{
  font-family:var(--font-display);font-size:clamp(17px,2.1vw,24px);font-weight:900;letter-spacing:.12em;
}
.control-banner .cb-sub{font-size:13.5px;color:var(--text-low);letter-spacing:.08em;margin-top:4px}
.control-banner.boosting{
  border-color:var(--border-pink);
  background:
    repeating-linear-gradient(-45deg, rgba(255,42,133,.09) 0 14px, transparent 14px 28px),
    linear-gradient(160deg, rgba(40,19,67,.85), rgba(8,7,12,.9));
  box-shadow:inset 0 0 40px rgba(255,42,133,.09), 0 0 26px rgba(255,42,133,.15);
  animation:bannerGlow 2.6s ease-in-out infinite;
}
@keyframes bannerGlow{50%{box-shadow:inset 0 0 54px rgba(255,42,133,.16), 0 0 40px rgba(255,42,133,.28)}}
.control-banner.boosting h2{
  background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.control-banner.boosting .cb-pulse{color:var(--pink);border-color:var(--border-pink)}
.control-banner.boosting .cb-pulse::before{animation:ring 2s ease-out infinite}
.control-banner.boosting .cb-pulse::after{animation:ring 2s 1s ease-out infinite}
@keyframes ring{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.9)}}

.control-metrics{
  display:grid;grid-template-columns:repeat(3,1fr) auto;gap:14px;align-items:stretch;
  margin-top:16px;
}
.metric{
  padding:13px 16px;border-radius:var(--radius-md);
  background:rgba(26,16,47,.45);border:1px solid var(--border-soft);
}
.metric .m-label{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-low)}
.metric .m-value{font-family:var(--font-display);font-size:20px;font-weight:700;margin-top:6px;color:var(--text-hi)}
.metric .m-value.grad{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.metric .m-value small{font-size:11px;color:var(--text-low);-webkit-text-fill-color:var(--text-low)}

.btn-boost{
  position:relative;min-width:210px;
  border:none;border-radius:var(--radius-md);cursor:pointer;
  font-family:var(--font-display);font-size:14.5px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;padding:0 26px;
  background:var(--grad-brand);background-size:200% 100%;
  box-shadow:0 0 26px rgba(255,42,133,.45), inset 0 0 0 1px rgba(255,255,255,.14);
  transition:all .25s ease;
}
.btn-boost:hover{background-position:100% 0;transform:translateY(-2px);box-shadow:0 0 42px rgba(255,42,133,.7)}
.btn-boost:active{transform:translateY(0) scale(.99)}
.btn-boost.stop{
  background:linear-gradient(135deg,#ff2a5f,#c21a4d);
  box-shadow:0 0 26px rgba(255,42,95,.5), inset 0 0 0 1px rgba(255,255,255,.12);
  animation:stopPulse 1.8s ease-in-out infinite;
}
@keyframes stopPulse{50%{box-shadow:0 0 44px rgba(255,42,95,.8), inset 0 0 0 1px rgba(255,255,255,.2)}}

.boost-note{
  margin-top:14px;padding:11px 14px;border-radius:var(--radius-md);
  font-size:12.5px;line-height:1.5;color:var(--text-mid);letter-spacing:.02em;
  background:rgba(49,227,156,.06);border:1px solid rgba(49,227,156,.22);
}
.boost-note b{color:var(--ok);font-weight:600}

.boost-extra{display:flex;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap}
.autostop-label{font-size:13px;color:var(--text-mid);letter-spacing:.02em;display:flex;align-items:center;gap:8px}
.autostop-label select{
  padding:8px 12px;border-radius:9px;cursor:pointer;
  background:rgba(8,7,12,.75);border:1px solid var(--border-soft);color:var(--text-hi);
  font-family:var(--font-body);font-size:14px;font-weight:600;outline:none;
}
.autostop-label select:focus{border-color:var(--pink)}
.autostop-countdown{font-family:var(--font-mono);font-size:13px;color:var(--warn);letter-spacing:.06em}

.preset-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.preset-bar select{
  padding:8px 12px;border-radius:9px;cursor:pointer;min-width:150px;
  background:rgba(8,7,12,.75);border:1px solid var(--border-soft);color:var(--text-hi);
  font-family:var(--font-body);font-size:13.5px;font-weight:500;outline:none;
}
.preset-bar select:focus{border-color:var(--pink)}
.preset-bar input{
  padding:8px 12px;border-radius:9px;width:140px;
  background:rgba(8,7,12,.75);border:1px solid var(--border-soft);color:var(--text-hi);
  font-family:var(--font-body);font-size:13.5px;font-weight:500;outline:none;
}
.preset-bar input:focus{border-color:var(--pink)}
.preset-sep{flex:1;min-width:8px}
@media (max-width:520px){ .preset-sep{display:none} .preset-bar input{width:100%} }

/* ==========================================================================
   Game library
   ========================================================================== */
.lib-tools{display:flex;flex-wrap:wrap;gap:11px;align-items:center;margin-bottom:14px}
.search-wrap{position:relative;flex:1;min-width:220px}
.search-wrap svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--text-low)}
.search-wrap input{
  width:100%;padding:11px 14px 11px 40px;
  background:rgba(8,7,12,.75);border:1px solid var(--border-soft);border-radius:var(--radius-md);
  color:var(--text-hi);font-family:var(--font-body);font-size:15px;font-weight:500;outline:none;transition:all .25s;
}
.search-wrap input:focus{border-color:var(--pink);box-shadow:0 0 0 3px rgba(255,42,133,.12), 0 0 18px rgba(255,42,133,.18)}

.filter-tabs{display:flex;gap:7px;flex-wrap:wrap}
.f-tab{
  padding:9px 15px;border-radius:99px;cursor:pointer;
  font-family:var(--font-body);font-size:13.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-mid);background:rgba(26,16,47,.5);border:1px solid var(--border-soft);
  transition:all .25s ease;
}
.f-tab:hover{color:var(--text-hi);border-color:var(--border-pink)}
.f-tab.active{
  color:#fff;background:var(--grad-brand-soft);
  border-color:var(--border-pink);
  box-shadow:0 0 16px rgba(255,42,133,.25), inset 0 0 14px rgba(255,42,133,.07);
}

.game-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:13px;
  overflow-y:auto;padding:2px 4px 6px 2px;
}
.game-card{
  position:relative;border-radius:var(--radius-md);overflow:hidden;cursor:pointer;
  background:var(--violet-1);
  border:1px solid var(--border-soft);
  transition:all .28s ease;
}
.game-card:hover{transform:translateY(-4px);border-color:rgba(166,61,255,.55);box-shadow:0 12px 26px rgba(0,0,0,.5), 0 0 22px rgba(166,61,255,.2)}
.game-card.selected{
  border-color:var(--pink);
  box-shadow:0 0 0 1px var(--pink), 0 0 24px rgba(255,42,133,.4);
}
.gc-poster{
  position:relative;aspect-ratio:460/215;
  display:grid;place-items:center;overflow:hidden;
  font-family:var(--font-display);font-weight:900;font-size:26px;color:rgba(255,255,255,.85);
  text-shadow:0 2px 12px rgba(0,0,0,.7);
}
.gc-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.game-card:hover .gc-poster img{transform:scale(1.07)}
.gc-poster::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(8,7,12,.85));
}
.gc-check{
  position:absolute;top:9px;right:9px;z-index:2;
  width:24px;height:24px;border-radius:8px;
  border:1.5px solid rgba(255,255,255,.45);
  background:rgba(8,7,12,.6);backdrop-filter:blur(4px);
  display:grid;place-items:center;color:#fff;
  transition:all .22s ease;
}
.gc-check svg{width:14px;height:14px;opacity:0;transform:scale(.4);transition:all .22s ease}
.game-card.selected .gc-check{background:var(--grad-brand);border-color:transparent;box-shadow:0 0 12px rgba(255,42,133,.7)}
.game-card.selected .gc-check svg{opacity:1;transform:scale(1)}
.gc-fav{
  position:absolute;top:9px;left:9px;z-index:2;
  width:24px;height:24px;border-radius:8px;border:none;cursor:pointer;
  background:rgba(8,7,12,.55);backdrop-filter:blur(4px);
  display:grid;place-items:center;color:rgba(255,255,255,.5);
  transition:all .22s ease;
}
.gc-fav svg{width:13px;height:13px}
.gc-fav:hover{color:#ffd75e;transform:scale(1.12)}
.gc-fav.on{color:#ffd75e;filter:drop-shadow(0 0 6px rgba(255,215,94,.6))}
.gc-info{padding:10px 12px 11px}
.gc-name{font-weight:600;font-size:14.5px;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gc-meta{display:flex;align-items:center;gap:7px;margin-top:4px}
.gc-appid{font-family:var(--font-mono);font-size:10.5px;color:var(--text-low)}
.gc-tag{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;
  padding:2px 7px;border-radius:99px;
  color:var(--cyan);border:1px solid rgba(70,200,255,.3);background:rgba(70,200,255,.06);
}
.gc-tag.own{color:var(--purple);border-color:rgba(166,61,255,.35);background:rgba(166,61,255,.07)}
.empty-hint{
  grid-column:1/-1;text-align:center;padding:44px 10px;color:var(--text-low);
  font-size:15px;letter-spacing:.06em;
}

/* ==========================================================================
   Chat slide-over
   ========================================================================== */
.overlay{
  position:fixed;inset:0;z-index:60;
  background:rgba(8,7,12,.6);backdrop-filter:blur(5px);
  opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.overlay.open{opacity:1;pointer-events:auto}

.chat-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:70;
  width:min(760px,100%);
  display:grid;grid-template-columns:250px 1fr;
  background:linear-gradient(200deg,rgba(26,16,47,.97),rgba(8,7,12,.99));
  border-left:1px solid var(--border-soft);
  box-shadow:-30px 0 70px rgba(0,0,0,.6);
  transform:translateX(105%);transition:transform .38s cubic-bezier(.22,1,.3,1);
}
.chat-drawer.open{transform:translateX(0)}

.friends-col{border-right:1px solid var(--border-soft);display:flex;flex-direction:column;min-height:0}
.friends-head{padding:18px 16px 12px}
.friends-head .panel-title{font-size:11.5px}
.friends-head .online-count{font-family:var(--font-mono);font-size:11px;color:var(--ok);margin-top:4px;letter-spacing:.08em}
.fh-top{display:flex;align-items:center;gap:10px}
.fh-top .panel-title{flex:1}
.fh-actions{display:flex;gap:7px}
.fh-btn{
  width:34px;height:34px;flex:none;border-radius:10px;cursor:pointer;
  display:grid;place-items:center;color:var(--text-mid);
  background:rgba(26,16,47,.6);border:1px solid var(--border-soft);transition:all .22s ease;
}
.fh-btn svg{width:17px;height:17px}
.fh-btn:hover{color:#fff;border-color:var(--border-pink);box-shadow:0 0 14px rgba(255,42,133,.3);transform:translateY(-1px)}

.friends-list{flex:1;overflow-y:auto;padding:4px 8px 14px}
.list-section{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;color:var(--text-low);
  padding:12px 10px 6px;text-transform:uppercase;
}
.list-section em{color:var(--purple);font-style:normal;text-transform:none;letter-spacing:.02em}

/* birleşik sohbet satırı (grup + arkadaş) */
.convo-row{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  padding:9px 10px;border-radius:var(--radius-md);cursor:pointer;
  background:transparent;border:1px solid transparent;color:var(--text-hi);
  font-family:var(--font-body);transition:all .22s ease;
}
.convo-row:hover{background:rgba(40,19,67,.55)}
.convo-row.active{background:var(--grad-brand-soft);border-color:var(--border-pink)}
.convo-ava{
  position:relative;width:38px;height:38px;flex:none;border-radius:11px;overflow:visible;
  display:grid;place-items:center;color:#fff;
  font-family:var(--font-display);font-size:13px;font-weight:700;text-shadow:0 1px 6px rgba(0,0,0,.6);
}
.convo-ava.sm{width:30px;height:30px;font-size:11px;border-radius:9px}
.convo-ava.group-ava{background:var(--grad-brand-soft);border:1px solid var(--border-pink);font-size:18px}
.convo-ava .dot{
  position:absolute;bottom:-3px;right:-3px;width:12px;height:12px;border-radius:50%;
  border:2.5px solid var(--bg-1);background:var(--text-low);
}
.convo-row[data-presence="online"] .dot{background:var(--ok);box-shadow:0 0 8px var(--ok)}
.convo-row[data-presence="ingame"] .dot{background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
.convo-meta{flex:1;min-width:0;display:flex;flex-direction:column}
.convo-name{font-weight:600;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.convo-sub{font-size:12px;color:var(--text-low);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.convo-row[data-presence="online"] .convo-sub.state{color:var(--ok)}
.convo-row[data-presence="ingame"] .convo-sub.state{color:var(--cyan)}
.convo-row .unread{
  flex:none;min-width:18px;height:18px;padding:0 5px;border-radius:99px;
  background:var(--grad-brand);color:#fff;
  font-family:var(--font-mono);font-size:10px;display:grid;place-items:center;
  box-shadow:0 0 10px rgba(255,42,133,.55);
}

/* ses toggle (chat head) */
.voice-toggle{
  display:inline-flex;align-items:center;gap:7px;margin-left:auto;
  padding:8px 13px;border-radius:var(--radius-md);cursor:pointer;
  background:rgba(26,16,47,.6);border:1px solid var(--border-soft);color:var(--text-mid);
  font-family:var(--font-body);font-size:13px;font-weight:600;letter-spacing:.04em;transition:all .22s ease;
}
.voice-toggle svg{width:16px;height:16px}
.voice-toggle:hover{color:#fff;border-color:var(--border-pink);box-shadow:0 0 14px rgba(255,42,133,.3)}
.voice-toggle.active{color:#fff;background:var(--grad-brand-soft);border-color:var(--border-pink);box-shadow:0 0 16px rgba(255,42,133,.35)}
.chat-head .close-x{margin-left:0}

/* ses çubuğu */
.voice-bar{
  border-bottom:1px solid var(--border-soft);
  background:linear-gradient(160deg, rgba(40,19,67,.6), rgba(13,11,20,.7));
  padding:12px 16px;
}
.vbar-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.vbar-live{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;color:var(--ok)}
.vbar-dot{width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok);animation:blink 2s infinite}
.vbar-controls{margin-left:auto;display:flex;gap:8px}
.vbar-ctrl{
  width:38px;height:38px;border-radius:11px;cursor:pointer;font-size:16px;
  display:grid;place-items:center;
  background:rgba(8,7,12,.6);border:1px solid var(--border-soft);color:var(--text-hi);transition:all .2s ease;
}
.vbar-ctrl svg{width:17px;height:17px}
.vbar-ctrl:hover{border-color:var(--border-pink);box-shadow:0 0 12px rgba(255,42,133,.3)}
.vbar-ctrl.on{background:rgba(255,77,109,.16);border-color:rgba(255,77,109,.5);color:#ff8ba0}
.vbar-ctrl.leave{color:#ff8ba0;border-color:rgba(255,77,109,.4)}
.vbar-ctrl.leave:hover{background:rgba(255,77,109,.16)}
.voice-peers{display:flex;flex-wrap:wrap;gap:10px}
.voice-tile{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;
  width:74px;padding:8px 4px;border-radius:var(--radius-md);
  background:rgba(8,7,12,.4);border:1px solid transparent;transition:all .18s ease;
}
.voice-tile.speaking{border-color:var(--ok);box-shadow:0 0 16px rgba(49,227,156,.4)}
.vt-ava{
  width:44px;height:44px;border-radius:13px;display:grid;place-items:center;overflow:hidden;
  color:#fff;font-family:var(--font-display);font-size:15px;font-weight:700;
  box-shadow:0 0 0 2px transparent;transition:box-shadow .15s ease;
}
.voice-tile.speaking .vt-ava{box-shadow:0 0 0 2px var(--ok)}
.vt-name{font-size:11.5px;color:var(--text-mid);max-width:70px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vt-mute{position:absolute;top:5px;right:7px;font-size:11px}

/* mesaj yazar adı (grup) */
.msg .m-author{font-family:var(--font-mono);font-size:10px;color:var(--purple);padding:0 6px 2px;letter-spacing:.04em}

/* grup üye seçici */
.member-picker{
  max-height:230px;overflow-y:auto;display:flex;flex-direction:column;gap:5px;
  padding:6px;border:1px solid var(--border-soft);border-radius:var(--radius-md);background:rgba(8,7,12,.4);
}
.pick-row{
  display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:9px;cursor:pointer;
  border:1px solid transparent;transition:all .18s ease;
}
.pick-row:hover{background:rgba(40,19,67,.5)}
.pick-row.on{background:var(--grad-brand-soft);border-color:var(--border-pink)}
.pick-name{flex:1;font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pick-row input{width:18px;height:18px;accent-color:var(--pink);cursor:pointer}
.friend-row{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  padding:9px 10px;border-radius:var(--radius-md);cursor:pointer;
  background:transparent;border:1px solid transparent;
  color:var(--text-hi);font-family:var(--font-body);
  transition:all .22s ease;
}
.friend-row:hover{background:rgba(40,19,67,.55)}
.friend-row.active{background:var(--grad-brand-soft);border-color:var(--border-pink)}
.friend-ava{
  position:relative;width:38px;height:38px;flex:none;border-radius:11px;
  display:grid;place-items:center;color:#fff;
  font-family:var(--font-display);font-size:13px;font-weight:700;text-shadow:0 1px 6px rgba(0,0,0,.6);
}
.friend-ava .dot{
  position:absolute;bottom:-3px;right:-3px;width:12px;height:12px;border-radius:50%;
  border:2.5px solid var(--bg-1);background:var(--text-low);
}
.friend-row[data-presence="online"] .dot{background:var(--ok);box-shadow:0 0 8px var(--ok)}
.friend-row[data-presence="ingame"] .dot{background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
.friend-meta{flex:1;min-width:0}
.friend-name{font-weight:600;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.friend-state{font-size:12px;color:var(--text-low);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.friend-row[data-presence="ingame"] .friend-state{color:var(--cyan)}
.friend-row[data-presence="online"] .friend-state{color:var(--ok)}
.friend-row .unread{
  flex:none;min-width:18px;height:18px;padding:0 5px;border-radius:99px;
  background:var(--grad-brand);color:#fff;
  font-family:var(--font-mono);font-size:10px;display:grid;place-items:center;
  box-shadow:0 0 10px rgba(255,42,133,.55);
}

.chat-col{display:flex;flex-direction:column;min-height:0;min-width:0}
.chat-head{
  display:flex;align-items:center;gap:12px;
  padding:14px 18px;border-bottom:1px solid var(--border-soft);
}
.chat-head .friend-ava{width:40px;height:40px}
.chat-head .close-x{margin-left:auto}
.close-x{
  width:36px;height:36px;border-radius:10px;cursor:pointer;
  background:rgba(26,16,47,.6);border:1px solid var(--border-soft);
  display:grid;place-items:center;color:var(--text-mid);transition:all .25s;
}
.close-x:hover{color:#fff;border-color:var(--border-pink);box-shadow:0 0 14px rgba(255,42,133,.3)}
.close-x svg{width:15px;height:15px}

.chat-scroll{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:10px}
.msg{max-width:78%;display:flex;flex-direction:column;gap:3px;animation:msgIn .3s ease}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.msg .bubble{
  padding:9px 14px;border-radius:14px;font-size:14.5px;font-weight:500;line-height:1.45;letter-spacing:.02em;
  word-wrap:break-word;
}
.msg .m-time{font-family:var(--font-mono);font-size:9.5px;color:var(--text-low);padding:0 6px}
.msg.them{align-self:flex-start}
.msg.them .bubble{
  background:rgba(40,19,67,.65);border:1px solid var(--border-soft);
  border-bottom-left-radius:4px;color:var(--text-hi);
}
.msg.me{align-self:flex-end;align-items:flex-end}
.msg.me .bubble{
  background:var(--grad-brand);color:#fff;border-bottom-right-radius:4px;
  box-shadow:0 4px 16px rgba(176,38,255,.35);
}
.msg.typing .bubble{display:flex;gap:5px;padding:13px 16px}
.msg.typing .bubble i{
  width:6px;height:6px;border-radius:50%;background:var(--text-mid);
  animation:typebounce 1.1s infinite;
}
.msg.typing .bubble i:nth-child(2){animation-delay:.15s}
.msg.typing .bubble i:nth-child(3){animation-delay:.3s}
@keyframes typebounce{30%{transform:translateY(-5px);background:var(--pink)}}

.chat-input{
  display:flex;gap:10px;padding:14px 16px;border-top:1px solid var(--border-soft);
}
.chat-input input{
  flex:1;padding:12px 16px;
  background:rgba(8,7,12,.75);border:1px solid var(--border-soft);border-radius:var(--radius-md);
  color:var(--text-hi);font-family:var(--font-body);font-size:15px;font-weight:500;outline:none;transition:all .25s;
}
.chat-input input:focus{border-color:var(--pink);box-shadow:0 0 0 3px rgba(255,42,133,.12)}
.btn-send{
  width:46px;flex:none;border:none;border-radius:var(--radius-md);cursor:pointer;
  background:var(--grad-brand);color:#fff;display:grid;place-items:center;
  box-shadow:0 0 16px rgba(255,42,133,.35);transition:all .22s;
}
.btn-send svg{width:18px;height:18px}
.btn-send:hover{transform:translateY(-2px);box-shadow:0 0 26px rgba(255,42,133,.6)}

/* ==========================================================================
   Modals (settings / generic)
   ========================================================================== */
.modal{
  position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:20px;
  opacity:0;pointer-events:none;transition:opacity .28s ease;
}
.modal.open{opacity:1;pointer-events:auto}
.modal .m-card{
  width:min(460px,100%);
  background:linear-gradient(170deg,rgba(40,19,67,.92),rgba(13,11,20,.97));
  border:1px solid var(--border-soft);border-radius:var(--radius-lg);
  box-shadow:0 30px 80px rgba(0,0,0,.7), 0 0 40px rgba(166,61,255,.12);
  transform:translateY(18px) scale(.97);transition:transform .28s ease;
  overflow:hidden;
}
.modal.open .m-card{transform:none}
.m-card .panel-head{border-bottom:1px solid var(--border-soft);padding-bottom:16px}
.m-body{padding:18px 20px 22px}

.setting-row{
  display:flex;align-items:center;gap:14px;
  padding:12px 0;border-bottom:1px dashed rgba(166,61,255,.14);
}
.setting-row:last-child{border-bottom:none}
.setting-info{flex:1}
.setting-name{font-weight:600;font-size:15px;letter-spacing:.04em}
.setting-desc{font-size:12.5px;color:var(--text-low);margin-top:2px}
.toggle{
  position:relative;width:46px;height:25px;flex:none;border-radius:99px;cursor:pointer;
  background:rgba(8,7,12,.8);border:1px solid var(--border-soft);transition:all .25s;
}
.toggle::after{
  content:"";position:absolute;top:2.5px;left:3px;width:17px;height:17px;border-radius:50%;
  background:var(--text-low);transition:all .25s ease;
}
.toggle.on{background:var(--grad-brand-soft);border-color:var(--border-pink);box-shadow:0 0 12px rgba(255,42,133,.25)}
.toggle.on::after{left:23px;background:var(--pink);box-shadow:0 0 10px rgba(255,42,133,.8)}

/* ==========================================================================
   Toasts
   ========================================================================== */
.toast-stack{
  position:fixed;bottom:22px;right:22px;z-index:100;
  display:flex;flex-direction:column;gap:10px;align-items:flex-end;
}
.toast{
  display:flex;align-items:center;gap:11px;
  padding:12px 16px;border-radius:var(--radius-md);max-width:360px;
  background:linear-gradient(160deg,rgba(40,19,67,.95),rgba(13,11,20,.98));
  border:1px solid var(--border-soft);
  box-shadow:0 14px 34px rgba(0,0,0,.55), 0 0 20px rgba(166,61,255,.15);
  font-size:14.5px;font-weight:500;letter-spacing:.03em;
  animation:toastIn .35s cubic-bezier(.22,1,.3,1);
}
.toast.out{animation:toastOut .3s ease forwards}
@keyframes toastIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateX(40px)}}
.toast .t-dot{width:8px;height:8px;flex:none;border-radius:50%}
.toast.ok .t-dot{background:var(--ok);box-shadow:0 0 10px var(--ok)}
.toast.err .t-dot{background:var(--danger);box-shadow:0 0 10px var(--danger)}
.toast.info .t-dot{background:var(--purple);box-shadow:0 0 10px var(--purple)}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:11px;color:var(--text-low);letter-spacing:.08em;
  padding:4px 8px;
}
.footer a{color:var(--purple);text-decoration:none}
.footer a:hover{color:var(--pink)}
.footer-legal a{margin:0 1px}

/* boş sohbet/arkadaş durumu */
.convo-empty{padding:28px 16px;text-align:center}
.convo-empty .ce-icon{font-size:30px;margin-bottom:10px;filter:drop-shadow(0 0 12px rgba(166,61,255,.4))}
.convo-empty .ce-title{font-weight:600;font-size:15px;color:var(--text-hi);letter-spacing:.02em}
.convo-empty .ce-sub{font-size:13px;color:var(--text-low);margin-top:7px;line-height:1.5}

/* yasal modal */
.legal-card{width:min(600px,100%)}
.legal-body{max-height:min(66vh,560px);overflow-y:auto}
.legal-sec{padding:6px 0 18px;border-bottom:1px dashed rgba(166,61,255,.14)}
.legal-sec:last-child{border-bottom:none}
.legal-sec h3{
  font-family:var(--font-display);font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--pink);margin-bottom:10px;
}
.legal-sec p{font-size:13.5px;line-height:1.6;color:var(--text-mid);margin-bottom:9px}
.legal-sec p:last-child{margin-bottom:0}
.legal-sec b{color:var(--text-hi);font-weight:600}

/* ==========================================================================
   Landing (tanıtım) sayfası
   ========================================================================== */
.lp{max-width:1160px;margin:0 auto;padding:0 22px}
.lp-nav{display:flex;align-items:center;justify-content:space-between;padding:22px 0 10px}
.lp-nav .brand-logo{width:44px;height:44px}
.lp-nav .brand-name{font-size:21px}
.lp-links{display:flex;align-items:center;gap:24px}
.lp-links a{color:var(--text-mid);text-decoration:none;font-weight:600;font-size:15px;letter-spacing:.02em;transition:color .2s}
.lp-links a:hover{color:var(--text-hi)}
.lp-cta-sm{padding:9px 18px;border-radius:99px;background:var(--grad-brand-soft);border:1px solid var(--border-pink);color:#fff!important}
.lp-cta-sm:hover{box-shadow:0 0 18px rgba(255,42,133,.35)}

.lp-hero{text-align:center;padding:70px 0 60px}
.lp-badge{
  display:inline-block;padding:7px 16px;border-radius:99px;margin-bottom:26px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--text-mid);
  background:rgba(26,16,47,.6);border:1px solid var(--border-soft);
}
.lp-title{
  font-family:var(--font-display);font-weight:900;letter-spacing:.01em;line-height:1.1;
  font-size:clamp(34px,6vw,64px);
}
.x-grad{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.x-grad2{background:linear-gradient(120deg,#46c8ff,#b026ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.lp-sub{
  max-width:660px;margin:22px auto 0;font-size:clamp(15px,2vw,18px);line-height:1.6;
  color:var(--text-mid);letter-spacing:.01em;
}
.lp-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.lp-btn{display:inline-flex;align-items:center;height:54px;padding:0 34px;text-decoration:none;border-radius:var(--radius-md)}
.lp-btn-ghost{
  display:inline-flex;align-items:center;height:54px;padding:0 28px;border-radius:var(--radius-md);
  text-decoration:none;color:var(--text-hi);font-family:var(--font-display);font-weight:700;font-size:14px;
  letter-spacing:.12em;text-transform:uppercase;background:rgba(26,16,47,.55);border:1px solid var(--border-soft);
  transition:all .22s;
}
.lp-btn-ghost:hover{border-color:var(--border-pink);box-shadow:0 0 18px rgba(255,42,133,.22)}
.lp-stats{display:flex;justify-content:center;gap:44px;flex-wrap:wrap;margin-top:56px}
.lp-stats div{display:flex;flex-direction:column;align-items:center}
.lp-stats b{font-family:var(--font-display);font-size:32px;font-weight:900;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.lp-stats span{font-size:13px;color:var(--text-low);letter-spacing:.04em;margin-top:4px}

.lp-section{padding:60px 0}
.lp-h2{text-align:center;font-family:var(--font-display);font-weight:900;font-size:clamp(26px,4vw,40px);margin-bottom:44px}
.lp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.lp-card{
  padding:26px 24px;border-radius:var(--radius-lg);
  background:linear-gradient(165deg,rgba(40,19,67,.5),rgba(13,11,20,.82) 55%);
  border:1px solid var(--border-soft);transition:all .3s ease;
}
.lp-card:hover{transform:translateY(-4px);border-color:var(--border-pink);box-shadow:0 18px 40px rgba(0,0,0,.5),0 0 24px rgba(166,61,255,.16)}
.lp-ico{font-size:34px;margin-bottom:14px}
.lp-card h3{font-family:var(--font-display);font-size:18px;font-weight:700;letter-spacing:.02em;margin-bottom:9px}
.lp-card p{font-size:14.5px;line-height:1.6;color:var(--text-mid)}

.lp-steps{display:flex;flex-direction:column;gap:18px;max-width:760px;margin:0 auto}
.lp-step{display:flex;gap:20px;align-items:flex-start;padding:22px 24px;border-radius:var(--radius-lg);background:rgba(26,16,47,.4);border:1px solid var(--border-soft)}
.lp-num{
  flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  font-family:var(--font-display);font-weight:900;font-size:20px;color:#fff;
  background:var(--grad-brand);box-shadow:0 0 20px rgba(255,42,133,.35);
}
.lp-step h3{font-family:var(--font-display);font-size:17px;font-weight:700;margin-bottom:6px}
.lp-step p{font-size:14.5px;line-height:1.55;color:var(--text-mid)}
.lp-final{text-align:center;margin-top:44px}
.lp-footer{margin-top:30px;border-top:1px solid var(--border-soft);padding-top:22px}

@media (max-width:620px){
  .lp-links a:not(.lp-cta-sm){display:none}
  .lp-stats{gap:28px}
}

/* ==========================================================================
   Admin panel
   ========================================================================== */
.admin-panel{
  border:1px solid var(--border-soft);border-radius:var(--radius-lg);overflow:hidden;
  background:linear-gradient(165deg, rgba(40,19,67,.4), rgba(13,11,20,.8));
}
.admin-head{
  display:flex;align-items:center;gap:11px;width:100%;cursor:pointer;
  padding:14px 20px;background:transparent;border:none;color:var(--text-mid);
  font-family:var(--font-display);font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  transition:color .2s ease;
}
.admin-head:hover{color:var(--text-hi)}
.admin-head svg{width:18px;height:18px;flex:none}
.admin-title{flex:1;text-align:left}
.admin-status{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;padding:3px 9px;border-radius:99px;
  color:var(--text-low);border:1px solid var(--border-soft);background:rgba(8,7,12,.5);
}
.admin-status.on{color:var(--ok);border-color:rgba(49,227,156,.4)}
.admin-chevron{transition:transform .3s ease}
.admin-panel.open .admin-chevron{transform:rotate(180deg)}
.admin-content{max-height:0;overflow:hidden;transition:max-height .4s ease}
.admin-panel.open .admin-content{max-height:1500px}

.admin-lock{padding:8px 20px 20px}
.admin-lock-form{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
.admin-hint{font-size:12px;color:var(--text-low);margin-top:10px}
.admin-hint b{color:var(--purple);font-family:var(--font-mono)}

.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:6px 20px 20px}
.admin-col{display:flex;flex-direction:column;min-width:0}
.admin-col-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px;
  font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--text-hi);
}
.admin-col-actions{display:flex;gap:7px}

/* butonlar */
.au-btn{
  font-family:var(--font-body);font-size:12.5px;font-weight:600;letter-spacing:.04em;
  padding:6px 12px;border-radius:9px;cursor:pointer;white-space:nowrap;
  color:var(--text-mid);background:rgba(26,16,47,.6);border:1px solid var(--border-soft);transition:all .2s ease;
}
.au-btn:hover{color:#fff;border-color:var(--border-pink)}
.au-btn:disabled{opacity:.4;cursor:default}
.au-btn.unlock{color:#fff;background:var(--grad-brand-soft);border-color:var(--border-pink)}
.au-btn.start{color:var(--ok);border-color:rgba(49,227,156,.4)}
.au-btn.stop{color:var(--warn);border-color:rgba(255,194,77,.4)}
.au-btn.ban{color:#ff8ba0;border-color:rgba(255,77,109,.4)}
.au-btn.ban:hover{background:rgba(255,77,109,.16)}

/* log konsolu */
.log-console{
  height:260px;overflow-y:auto;padding:10px 12px;border-radius:var(--radius-md);
  background:rgba(4,3,8,.7);border:1px solid var(--border-soft);
  font-family:var(--font-mono);font-size:11.5px;line-height:1.6;color:var(--text-mid);
}
.log-line{white-space:pre-wrap;word-break:break-word;padding:1px 0;border-bottom:1px solid rgba(166,61,255,.05)}
.log-line.err{color:#ff8ba0}
.log-time{color:var(--purple);margin-right:8px}

/* kullanıcı satırları */
.admin-users{display:flex;flex-direction:column;gap:8px;max-height:220px;overflow-y:auto}
.admin-user{
  display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:var(--radius-md);
  background:rgba(26,16,47,.45);border:1px solid var(--border-soft);
}
.au-ava{width:36px;height:36px;flex:none;border-radius:10px;display:grid;place-items:center;overflow:hidden;color:#fff;font-family:var(--font-display);font-weight:700;font-size:13px}
.au-meta{flex:1;min-width:0;display:flex;flex-direction:column}
.au-name{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.au-id{font-family:var(--font-mono);font-size:10.5px;color:var(--text-low);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.au-actions{display:flex;gap:6px;flex:none}
.admin-bans{margin-top:12px}
.admin-bans-title{font-size:11px;letter-spacing:.1em;color:var(--text-low);text-transform:uppercase;margin-bottom:6px}
.admin-ban-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 10px;border-radius:9px;background:rgba(8,7,12,.4);font-family:var(--font-mono);font-size:11.5px;color:var(--text-mid);margin-bottom:5px}

/* --- modern admin: metrikler + araç çubuğu + duyuru + sunucu --- */
.admin-metrics{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;
  padding:6px 20px 4px;
}
.metric-card{
  display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--radius-md);
  background:linear-gradient(160deg,rgba(40,19,67,.55),rgba(13,11,20,.75));
  border:1px solid var(--border-soft);transition:all .25s ease;overflow:hidden;position:relative;
}
.metric-card::after{content:"";position:absolute;inset:auto 0 0 0;height:2px;background:var(--grad-brand);opacity:.5}
.metric-card:hover{border-color:var(--border-pink);transform:translateY(-2px)}
.mc-ico{font-size:24px;flex:none}
.mc-val{font-family:var(--font-display);font-size:22px;font-weight:800;line-height:1;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.mc-label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-low);margin-top:5px}

.admin-toolbar{display:flex;align-items:center;gap:10px;padding:12px 20px 4px;flex-wrap:wrap}
.admin-tb-spacer{flex:1}

.admin-broadcast{display:flex;gap:8px}
.admin-broadcast input{
  flex:1;padding:10px 14px;border-radius:9px;background:rgba(8,7,12,.7);
  border:1px solid var(--border-soft);color:var(--text-hi);font-family:var(--font-body);font-size:14px;outline:none;
}
.admin-broadcast input:focus{border-color:var(--pink)}

.admin-server{
  padding:14px 16px;border-radius:var(--radius-md);background:rgba(8,7,12,.4);border:1px solid var(--border-soft);
}
.srv-rows{display:flex;flex-direction:column;gap:9px}
.srv-rows>div{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13.5px}
.srv-rows span{color:var(--text-low)}
.srv-rows b{color:var(--text-hi);font-weight:600;font-family:var(--font-mono);font-size:12.5px}
.srv-rows b.sv-on{color:var(--ok)} .srv-rows b.sv-off{color:var(--text-low)}
.srv-top{margin-top:14px;padding-top:12px;border-top:1px dashed rgba(166,61,255,.16)}
.srv-top-t{font-size:12px;letter-spacing:.06em;color:var(--text-mid);margin-bottom:8px}
.srv-top-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;padding:3px 0;color:var(--text-mid)}
.srv-top-row b{color:var(--cyan);font-family:var(--font-mono);font-size:12px}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1140px){
  .dashboard{
    grid-template-columns:1fr;
    grid-template-areas:"control" "profile" "library" "leaderboard" "auth";
    grid-template-rows:none;
  }
  .lb-list{max-height:380px}
  .game-grid{max-height:560px}
  .admin-grid{grid-template-columns:1fr}
  .admin-panel.open .admin-content{max-height:2600px}
}
@media (max-width:760px){
  .app{padding:12px 12px 24px}
  .topbar{flex-wrap:wrap;gap:12px}
  .topbar .actions{width:100%;margin-left:0}
  .topbar .actions .icon-btn{flex:1;justify-content:center}
  .icon-btn span.lbl{display:none}
  .status-pill{margin-left:auto}
  .control-metrics{grid-template-columns:1fr 1fr}
  .btn-boost{grid-column:1/-1;min-height:54px}
  .chat-drawer{grid-template-columns:1fr}
  .friends-col{display:none}
  .chat-drawer.show-friends .friends-col{display:flex}
  .chat-drawer.show-friends .chat-col{display:none}
}