/* premium.css — Shadow Chat Premium (💎) UI. Bağımsız; app.css'i ezmez. */

.sc-prem-launch {
  /* bottom:84px → composer/Gönder satırının ÜSTÜNDE dur, Gönder'i hiç örtme. */
  position: fixed; right: 16px; bottom: 84px; z-index: 9000;
  border: none; cursor: pointer;
  padding: 10px 16px; border-radius: 999px;
  font: 600 14px/1 Inter, system-ui, sans-serif; color: #fff;
  background: linear-gradient(135deg, #6366f1, #a855f7);
  box-shadow: 0 6px 20px rgba(124, 58, 237, .45);
  transition: transform .15s ease, box-shadow .15s ease;
}
.sc-prem-launch:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(124, 58, 237, .55); }
.sc-prem-launch:active { transform: translateY(0); }

/* Topbar'daki 💎 butonu (tema seçicinin yanında). .icon temelli ama premium
   altın/mor tınısıyla öne çıkar. */
.sc-prem-topbtn {
  background: linear-gradient(135deg, #f6c454, #a855f7) !important;
  color: #fff !important; border: none !important;
  box-shadow: 0 2px 10px rgba(168, 85, 247, .40);
  filter: saturate(1.1);
}
.sc-prem-topbtn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(168, 85, 247, .55); }
.sc-prem-topbtn:active { transform: translateY(0); }

.sc-prem-ov {
  position: fixed; inset: 0; z-index: 9001;
  background: rgba(8, 8, 16, .66); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px; overflow-y: auto;
}
.sc-prem-card {
  width: 100%; max-width: 460px; max-height: 92vh; overflow-y: auto;
  background: #14141c; color: #e9e9f1;
  border: 1px solid rgba(168, 85, 247, .3); border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
  font-family: Inter, system-ui, sans-serif;
  animation: scPremIn .18s ease;
}
@keyframes scPremIn { from { opacity: 0; transform: scale(.96) translateY(8px); } to { opacity: 1; transform: none; } }

.sc-prem-head {
  display: flex; align-items: center; gap: 12px;
  padding: 20px 20px 12px;
  position: relative;
}
.sc-prem-logo { font-size: 34px; filter: drop-shadow(0 2px 8px rgba(168, 85, 247, .6)); }
.sc-prem-title {
  margin: 0; font-size: 21px; font-weight: 800;
  background: linear-gradient(135deg, #c4b5fd, #f0abfc);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.sc-prem-x {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px; border-radius: 50%;
  border: none; cursor: pointer; font-size: 16px;
  background: rgba(255, 255, 255, .08); color: #cfcfe0;
}
.sc-prem-x:hover { background: rgba(255, 255, 255, .16); }

.sc-prem-status {
  margin: 0 20px 14px; padding: 10px 14px; border-radius: 12px;
  font-size: 13.5px; font-weight: 600;
  background: rgba(255, 255, 255, .06); color: #b9b9cc;
}
.sc-prem-status.active {
  background: linear-gradient(135deg, rgba(99, 102, 241, .25), rgba(168, 85, 247, .25));
  color: #e9d5ff; border: 1px solid rgba(168, 85, 247, .4);
}

.sc-prem-perks { padding: 0 20px; display: flex; flex-direction: column; gap: 12px; }
.sc-prem-perk { display: flex; gap: 12px; align-items: flex-start; }
.sc-prem-pic {
  flex: 0 0 40px; height: 40px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  background: linear-gradient(135deg, rgba(99, 102, 241, .22), rgba(168, 85, 247, .22));
}
.sc-prem-ptx { flex: 1; min-width: 0; }
.sc-prem-pt { font-size: 14.5px; font-weight: 700; margin-bottom: 2px; }
.sc-prem-pd { font-size: 12.5px; color: #9a9ab0; line-height: 1.45; }

.sc-prem-buy { margin: 18px 20px 8px; padding: 16px; border-radius: 14px;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); }
.sc-prem-price {
  font-size: 20px; font-weight: 800; margin-bottom: 8px;
  background: linear-gradient(135deg, #c4b5fd, #f0abfc);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.sc-prem-instr { font-size: 13.5px; color: #d7d7e6; white-space: pre-wrap; line-height: 1.5; }
.sc-prem-note { margin-top: 10px; font-size: 12px; color: #8a8aa0; }

/* admin */
.sc-prem-admin { margin: 18px 16px 20px; padding: 14px; border-radius: 14px;
  background: rgba(0, 0, 0, .25); border: 1px dashed rgba(168, 85, 247, .35); }
.sc-prem-ah { font-size: 13px; font-weight: 700; color: #c4b5fd; margin: 6px 0 10px; }
.sc-prem-arow { display: flex; gap: 8px; margin-bottom: 6px; }
.sc-prem-in {
  flex: 1; min-width: 0; padding: 9px 12px; border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .12); background: #1c1c26; color: #ececf5;
  font: 14px Inter, system-ui, sans-serif;
}
.sc-prem-in.wide { width: 100%; margin-bottom: 8px; }
.sc-prem-days { flex: 0 0 80px; }
.sc-prem-ta {
  width: 100%; min-height: 88px; resize: vertical; padding: 10px 12px; border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .12); background: #1c1c26; color: #ececf5;
  font: 13px Inter, system-ui, sans-serif; margin-bottom: 8px;
}
.sc-prem-btn {
  border: none; cursor: pointer; padding: 9px 16px; border-radius: 10px;
  font: 600 13.5px Inter, system-ui, sans-serif; color: #fff;
  background: linear-gradient(135deg, #6366f1, #a855f7);
}
.sc-prem-btn.ghost { background: rgba(255, 255, 255, .08); color: #d7d7e6; }
.sc-prem-btn:disabled { opacity: .55; cursor: default; }
.sc-prem-amsg { font-size: 12.5px; color: #9a9ab0; margin: 2px 0 10px; min-height: 16px; }

/* rozet (kişi satırlarında) */
.sc-prem-badge { margin-left: 5px; font-size: .9em; vertical-align: baseline; }

@media (max-width: 480px) {
  .sc-prem-card { max-width: 100%; border-radius: 16px; }
  .sc-prem-launch { right: 12px; bottom: 84px; padding: 9px 14px; font-size: 13px; }
}

/* ===== Premium v2: hero, ödeme, tema grid, BTCPay, toast ===== */
.sc-prem-toast {
  position: fixed; left: 50%; bottom: 80px; transform: translateX(-50%) translateY(20px);
  background: #14141c; color: #f0e9ff; border: 1px solid rgba(168,85,247,.4);
  padding: 11px 18px; border-radius: 12px; font: 600 13.5px Inter, system-ui, sans-serif;
  box-shadow: 0 10px 30px rgba(0,0,0,.5); opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s; z-index: 9002; max-width: 90vw; text-align: center;
}
.sc-prem-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.sc-prem-hero { padding: 4px 20px 14px; text-align: center; }
.sc-prem-hero-big {
  font-size: 26px; font-weight: 900; line-height: 1.15; margin-bottom: 6px;
  background: linear-gradient(135deg, #c4b5fd, #f0abfc, #fbbf24);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.sc-prem-hero-sub { font-size: 13.5px; color: #b9b9cc; line-height: 1.5; }

.sc-prem-sec-h { font-size: 14px; font-weight: 800; color: #d6c9ff; margin: 16px 20px 8px; }

/* premium tema grid */
.sc-prem-themes { margin-top: 6px; }
.sc-prem-theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 20px; }
.sc-prem-theme {
  position: relative; text-align: left; border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px; padding: 12px; cursor: pointer; color: #fff; overflow: hidden;
  min-height: 74px; display: flex; flex-direction: column; gap: 3px;
  transition: transform .12s, box-shadow .12s;
}
.sc-prem-theme:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.4); }
.sc-prem-theme-name { font-size: 14px; font-weight: 800; position: relative; z-index: 2; }
.sc-prem-theme-desc { font-size: 11px; opacity: .92; position: relative; z-index: 2; line-height: 1.35; }
.sc-prem-theme-lock { position: absolute; top: 8px; right: 10px; font-size: 15px; z-index: 3; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
/* tema önizleme arka planları */
.tpv-aurora { background: linear-gradient(135deg,#0f2027,#2c5364,#43cea2,#6a3093); }
.tpv-gold   { background: linear-gradient(135deg,#0b0b0b,#3a2f0b,#caa24a,#1a1407); }
.tpv-neon   { background: linear-gradient(135deg,#1a0033,#ff00cc,#3333ff,#00e5ff); }
.tpv-sakura { background: linear-gradient(135deg,#ffd1dc,#ff8fab,#c95b8b,#7a3b5e); }

/* ödeme */
.sc-prem-pay {
  width: 100%; border: none; cursor: pointer; padding: 14px; border-radius: 14px;
  font: 800 15px Inter, system-ui, sans-serif; color: #14141c; margin-top: 4px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b); box-shadow: 0 8px 24px rgba(245,158,11,.4);
  transition: transform .12s;
}
.sc-prem-pay:hover { transform: translateY(-2px); }
.sc-prem-pay:disabled { opacity: .6; cursor: default; transform: none; }
.sc-prem-or { text-align: center; font-size: 12px; color: #8a8aa0; margin: 12px 0 8px; position: relative; }

/* BTCPay/admin inputs zaten .sc-prem-in ile stillenmiş; data-theme overrideları aşağıda */

/* ===== PREMIUM TEMALAR (html[data-theme=...]) =====
   Uygulamanın ana renk değişkenlerini ezerek tüm arayüzü kaplar. app.css
   değişken adlarını kullanır; bilinmeyen ad olsa bile arka plan/gradient tutar. */
html[data-theme="aurora"] {
  --bg: #0a1419; --bg-app: #0a1419; --accent: #43cea2; --accent-2: #6a3093;
  --grad: linear-gradient(135deg,#43cea2,#6a3093);
}
html[data-theme="aurora"] body { background: linear-gradient(160deg,#0f2027,#16323a 60%,#1a1430) fixed; }
html[data-theme="gold"] {
  --bg: #0b0b0b; --bg-app: #0b0b0b; --accent: #caa24a; --accent-2: #8a6d2a;
  --grad: linear-gradient(135deg,#caa24a,#f4d479);
}
html[data-theme="gold"] body { background: linear-gradient(160deg,#0b0b0b,#181206 70%) fixed; }
html[data-theme="neon"] {
  --bg: #120023; --bg-app: #120023; --accent: #ff00cc; --accent-2: #00e5ff;
  --grad: linear-gradient(135deg,#ff00cc,#00e5ff);
}
html[data-theme="neon"] body { background: linear-gradient(160deg,#15002b,#0a0030 60%,#001a26) fixed; }
html[data-theme="sakura"] {
  --bg: #2a1a22; --bg-app: #2a1a22; --accent: #ff8fab; --accent-2: #c95b8b;
  --grad: linear-gradient(135deg,#ff8fab,#c95b8b);
}
html[data-theme="sakura"] body { background: linear-gradient(160deg,#3a2230,#2a1a22 70%) fixed; }
/* premium temalarda marka/accent gradient'i ortak kanca */
html[data-theme="aurora"] .brand, html[data-theme="gold"] .brand,
html[data-theme="neon"] .brand, html[data-theme="sakura"] .brand {
  background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ===== Mahfil Boost rozeti (servers.js enjekte eder) ===== */
.srv-boost-badge {
  display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 800;
  padding: 2px 7px; border-radius: 999px; color: #fff; vertical-align: middle;
  background: linear-gradient(135deg,#a855f7,#ec4899); box-shadow: 0 2px 8px rgba(168,85,247,.5);
}
.srv-boost-btn {
  border: none; cursor: pointer; padding: 7px 12px; border-radius: 10px; margin: 6px 0;
  font: 700 12.5px Inter, system-ui, sans-serif; color: #fff; width: 100%;
  background: linear-gradient(135deg,#a855f7,#ec4899);
}
.srv-boost-btn.off { background: rgba(255,255,255,.1); color: #d7d7e6; }
.srv-boost-btn:disabled { opacity: .55; cursor: default; }

/* ---- 🛍️ Mağaza --------------------------------------------------------- */
.sc-prem-store { margin-top: 18px; }
.sc-store-kind { font: 700 13px/1 Inter, system-ui, sans-serif; opacity: .85; margin: 14px 0 8px; }
.sc-store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.sc-store-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 7px; }
.sc-store-card.owned { border-color: rgba(168,85,247,.45); }
.sc-store-top { display: flex; align-items: center; gap: 8px; }
.sc-store-ic { width: 34px; height: 34px; min-width: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 19px; background: rgba(255,255,255,.06); }
.sc-store-name { font: 600 13px/1.2 Inter, system-ui, sans-serif; }
.sc-store-desc { font-size: 11.5px; opacity: .7; line-height: 1.35; flex: 1; }
.sc-store-stk { display: flex; flex-wrap: wrap; gap: 3px; font-size: 17px; }
.sc-store-tag { margin-left: auto; font-size: 10px; padding: 2px 7px; border-radius: 999px; background: linear-gradient(135deg, #f6c454, #a855f7); color: #fff; font-weight: 700; }
.sc-store-btn { border: none; cursor: pointer; padding: 9px; border-radius: 10px; font: 700 12.5px/1 Inter, system-ui, sans-serif; color: #fff; background: linear-gradient(135deg, #6366f1, #a855f7); text-align: center; text-decoration: none; display: block; }
.sc-store-btn.buy { background: linear-gradient(135deg, #f6c454, #a855f7); }
.sc-store-btn.ghost { background: rgba(255,255,255,.08); }
.sc-store-btn:disabled { opacity: .55; cursor: default; }
.sc-store-btn:not(:disabled):hover { filter: brightness(1.07); }

/* ---- avatar çerçeveleri (entitlement) ---------------------------------- */
.sc-framed { position: relative; }
.avatar.sc-frame-gold,  .sc-frame-gold  { box-shadow: 0 0 0 2px #f6c454, 0 0 9px rgba(246,196,84,.75) !important; }
.avatar.sc-frame-neon,  .sc-frame-neon  { box-shadow: 0 0 0 2px #c026d3, 0 0 10px rgba(192,38,211,.8) !important; }
.avatar.sc-frame-flame, .sc-frame-flame { box-shadow: 0 0 0 2px #ff6a2b, 0 0 11px rgba(255,106,43,.85) !important; }
.avatar.sc-frame-ocean, .sc-frame-ocean { box-shadow: 0 0 0 2px #22b8cf, 0 0 10px rgba(34,184,207,.8) !important; }

/* ---- TRC20 USDT ödeme paneli ------------------------------------------- */
.sc-usdt-ov { position: fixed; inset: 0; z-index: 9003; background: rgba(8,8,16,.72); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 16px; overflow-y: auto; }
.sc-usdt-card { position: relative; width: 100%; max-width: 420px; background: #14141c; color: #e9e9f1; border: 1px solid rgba(38,184,138,.45); border-radius: 18px; padding: 22px 20px 20px; font-family: Inter, system-ui, sans-serif; box-shadow: 0 24px 60px rgba(0,0,0,.55); }
.sc-usdt-h { font-size: 19px; font-weight: 800; text-align: center; }
.sc-usdt-net { text-align: center; font-size: 12px; font-weight: 700; color: #26b88a; margin: 4px 0 16px; }
.sc-usdt-field { margin-bottom: 14px; }
.sc-usdt-lbl { font-size: 12px; color: #9a9ab0; margin-bottom: 5px; }
.sc-usdt-val { display: flex; align-items: center; gap: 8px; background: #1c1c26; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; padding: 9px 11px; }
.sc-usdt-mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 14px; flex: 1; min-width: 0; word-break: break-all; }
.sc-usdt-addr { font-size: 12.5px; }
.sc-usdt-copy { flex: 0 0 auto; border: none; cursor: pointer; padding: 7px 11px; border-radius: 8px; font: 600 12px Inter, system-ui, sans-serif; color: #fff; background: linear-gradient(135deg, #26b88a, #1e9e96); }
.sc-usdt-copy:hover { filter: brightness(1.08); }
.sc-usdt-warn { font-size: 11.5px; color: #d6b86a; background: rgba(214,184,106,.1); border-radius: 10px; padding: 9px 11px; line-height: 1.45; margin: 4px 0 14px; }
.sc-usdt-status { display: flex; align-items: center; gap: 9px; justify-content: center; font-size: 13px; color: #b9b9cc; padding: 10px; border-radius: 10px; background: rgba(255,255,255,.04); }
.sc-usdt-status.paid { color: #6ee7b7; font-weight: 700; background: rgba(38,184,138,.14); }
.sc-usdt-spin { width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.25); border-top-color: #26b88a; border-radius: 50%; animation: scUsdtSpin .8s linear infinite; }
@keyframes scUsdtSpin { to { transform: rotate(360deg); } }