:root{
  --bg:#0b0b0d; --panel:#151518; --panel-2:#1c1c20; --panel-3:#232328; --line:#26262b;
  --tooth:#f4d35e; --flame:#ff4d1c; --text:#eceae4; --text-dim:#8d8c94; --icon-grey:#7d7c84;
  --green:#5fbf5f; --red:#ff5c5c; --blue:#4aa3e0;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{background:var(--bg); color:var(--text); font-family:'Manrope','Segoe UI',system-ui,-apple-system,Roboto,sans-serif; height:100vh; overflow:hidden;}
h1,h2,h3,.btn{font-family:'Sora','Segoe UI',system-ui,-apple-system,Roboto,sans-serif;}
a{color:inherit; text-decoration:none;}
::selection{background:var(--tooth); color:#1a1a10;}
button{font-family:inherit;}
input, textarea{font-family:'Manrope','Segoe UI',system-ui,-apple-system,Roboto,sans-serif;}

.app{display:grid; grid-template-columns:300px 1fr; grid-template-rows:auto 1fr; height:100vh; grid-template-areas:"sidebar topbar" "sidebar content";}
.app > .sidebar{grid-area:sidebar;}
.app > .topbar{grid-area:topbar;}
.app > .content-row{grid-area:content; display:grid; grid-template-columns:1fr 400px; grid-template-rows:100%; height:100%; min-height:0; overflow:hidden; transition:grid-template-columns .15s;}
.app.chat-collapsed .content-row{grid-template-columns:1fr 0;}
.app.chat-collapsed .chat-col{display:none;}

.sidebar{background:transparent; display:flex; flex-direction:column; padding:26px 20px 26px 26px;}
.logo-row{display:flex; align-items:center; gap:12px; margin-bottom:30px; padding:0 4px;}
.logo-row .mark{width:64px; height:45px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.logo-row .mark img{width:100%; height:100%; object-fit:contain;}
.logo-row .sidebar-online{
  display:flex; align-items:center; gap:6px; font-size:13.5px; font-weight:700; color:var(--text);
  background:var(--panel-2); border:1px solid var(--line); border-radius:20px; padding:7px 13px 7px 10px;
}
.logo-row .sidebar-online .dot{width:7px; height:7px; border-radius:50%; background:var(--green); flex-shrink:0;}
.logo-row .sidebar-online .val{color:var(--tooth);}
.nav-item{
  display:flex; align-items:center; gap:13px; padding:13px 15px; border-radius:10px; color:var(--icon-grey);
  font-size:15.5px; cursor:pointer; margin-bottom:4px; transition:background .15s, color .15s; font-weight:500;
}
.nav-item:hover{background:var(--panel-2); color:var(--text);}
.nav-item.active{background:var(--panel-2); color:var(--tooth);}
.nav-item .ico{width:21px; text-align:center; color:var(--icon-grey); font-size:17px; display:flex; align-items:center; justify-content:center;}
.nav-item .ico img{width:20px; height:20px; object-fit:contain; opacity:.75;}
.nav-item.active .ico img, .nav-item:hover .ico img{opacity:1;}
.nav-item.active .ico{color:var(--tooth);}
.sidebar-bottom{margin-top:auto; display:flex; flex-direction:column; gap:8px;}
.mode-badge{font-size:11px; color:var(--text-dim); border:1px solid var(--line); border-radius:8px; padding:9px 11px; text-align:center;}
.mode-badge b{color:var(--tooth);}

.main{display:flex; flex-direction:column; overflow:hidden; min-height:0; background:var(--bg);}
.topbar{
  display:flex; align-items:center; justify-content:flex-end; gap:16px;
  padding:19px 30px; background:transparent;
  min-width:0;
}
.topbar-right{display:flex; align-items:center; gap:14px;}
.balance-chip{
  display:flex; align-items:center; gap:6px; background:var(--panel-2);
  border-radius:20px; padding:8px 16px; font-size:14px; color:var(--tooth); font-weight:700;
}
.topup-btn{background:var(--green); color:#0b0b0d; border:none; border-radius:20px; padding:9px 18px; font-size:13px; font-weight:700; cursor:pointer;}
.topup-plus-btn{
  width:19px; height:19px; border-radius:50%; background:var(--green); color:#0b0b0d; border:none;
  font-size:14px; font-weight:800; cursor:pointer; display:flex; align-items:center; justify-content:center;
  margin-left:2px; line-height:1; padding:0;
}
.topup-plus-btn:hover{filter:brightness(1.1);}

.page{flex:1; overflow-y:auto; min-height:0; padding:36px; scrollbar-width:thin; scrollbar-color:var(--line) transparent; animation:pageFadeIn .25s ease;}
@keyframes pageFadeIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }
.page::-webkit-scrollbar{width:8px;}
.page::-webkit-scrollbar-track{background:transparent;}
.page::-webkit-scrollbar-thumb{background:var(--line); border-radius:8px;}
.page::-webkit-scrollbar-thumb:hover{background:var(--panel-3);}
.page-head{margin-bottom:24px;}
.page-head h2{font-size:29px; font-weight:700; display:flex; align-items:center; gap:10px;}
.page-head p{color:var(--text-dim); font-size:13.5px; margin-top:6px;}
.support-head-ico{width:26px; height:26px; object-fit:contain;}

.group-label{font-size:12px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.1em; margin:20px 0 10px; font-weight:600;}
.group-label:first-child{margin-top:0;}
.server-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:18px;}
@media(max-width:900px){.server-grid{grid-template-columns:1fr;}}

.server-card{
  position:relative; border-radius:14px; overflow:hidden; cursor:pointer; height:200px;
  border:1px solid var(--line); background:var(--panel-2); transition:border-color .15s, transform .15s;
}
.server-card:hover{border-color:var(--tooth); transform:translateY(-2px);}
.server-card .bgimg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.30; filter:saturate(1.05);
}
.server-card .overlay-grad{
  position:absolute; inset:0; background:linear-gradient(100deg, rgba(21,21,24,.55) 10%, rgba(21,21,24,.92) 80%);
}
.server-card .content{position:relative; z-index:1; height:100%; display:flex; flex-direction:column; justify-content:center; padding:20px 24px;}
.server-card .sname{font-size:20px; font-weight:700; letter-spacing:.01em; font-family:'Sora','Segoe UI',system-ui,sans-serif;}
.server-card .smeta{font-size:13px; color:var(--text-dim); margin-top:5px;}
.server-card .bottom-row{display:flex; justify-content:space-between; align-items:center; margin-top:18px;}
.server-card .players{font-size:13px; font-weight:600; color:var(--text-dim);}
.server-card .card-actions{display:flex; align-items:center; gap:10px;}
.server-card .connect-btn{
  background:var(--flame); color:#fff; border:none; border-radius:7px; padding:8px 14px; font-size:13px;
  font-weight:700; cursor:pointer; white-space:nowrap;
}
.server-card .connect-btn:hover{filter:brightness(1.1);}
.server-card .copy-ico{font-size:16px; color:var(--text-dim); cursor:pointer;}
.server-card:hover .copy-ico{color:var(--tooth);}

.promo-banner-card{cursor:pointer; padding:0; text-decoration:none; display:block;}
.promo-banner-card:hover{transform:translateY(-2px); border-color:var(--tooth);}
.promo-banner-card .bgimg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:1;}

.site-toast{
  position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px); z-index:500;
  background:var(--green); color:#0b0b0d; padding:12px 22px; border-radius:10px; font-size:13.5px; font-weight:700;
  box-shadow:0 12px 32px rgba(0,0,0,.4); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
}
.site-toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
.site-toast.err{background:var(--red); color:#fff;}

.site-stats-row{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:26px;}
.site-stat-box{background:var(--panel-2); border:1px solid var(--line); border-radius:12px; padding:18px; text-align:center;}
.site-stat-box .val{font-size:26px; font-weight:800; color:var(--tooth); font-family:'Sora','Segoe UI',system-ui,sans-serif;}
.site-stat-box .lbl{font-size:12px; color:var(--text-dim); margin-top:6px;}
@media(max-width:700px){ .site-stats-row{grid-template-columns:1fr;} }
.shop-layout{display:grid; grid-template-columns:280px 1fr; gap:20px; align-items:start;}
@media(max-width:800px){ .shop-layout{grid-template-columns:1fr;} }
.shop-list{display:flex; flex-direction:column; gap:8px;}
.shop-list-item{
  display:flex; align-items:center; gap:12px; background:var(--panel-2); border:1px solid var(--line); border-radius:11px;
  padding:13px 15px; cursor:pointer; transition:border-color .15s;
}
.shop-list-item:hover{border-color:var(--tooth);}
.shop-list-item.active{border-color:var(--tooth); background:rgba(244,211,94,.06);}
.shop-list-item .icon{font-size:22px; width:32px; text-align:center; flex-shrink:0;}
.shop-list-item .info h4{font-size:14.5px; font-family:'Sora','Segoe UI',system-ui,sans-serif;}
.shop-list-item .info span{font-size:11.5px; color:var(--text-dim);}
.shop-detail-card{
  background:var(--panel-2); border:1px solid var(--line); border-radius:14px; padding:20px;
  max-width:280px; justify-self:end; width:100%;
}
.sd-icon{font-size:30px; margin-bottom:8px;}
.shop-detail-card h3, .admin-priv-card h3{font-size:18px; margin-bottom:6px; font-family:'Sora','Segoe UI',system-ui,sans-serif;}
.sd-price{font-size:17px; font-weight:800; color:var(--tooth); margin-bottom:12px; font-family:'Sora','Segoe UI',system-ui,sans-serif;}
.sd-price span{font-size:12px; color:var(--text-dim); font-weight:500;}

.admin-priv-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:14px;}
@media(max-width:900px){ .admin-priv-grid{grid-template-columns:1fr;} }
.admin-priv-card{background:var(--panel-2); border:1px solid var(--line); border-radius:14px; padding:20px;}

.vip-perks{list-style:none; margin:14px 0; padding:0; display:flex; flex-direction:column; gap:6px;}
.vip-perks li{font-size:12.5px; color:var(--text); display:flex; align-items:center; gap:8px;}
.vip-perks li::before{content:"✓"; color:var(--green); font-weight:700;}

.priv-cards-row{display:grid; grid-template-columns:repeat(2, 1fr); gap:22px; max-width:760px; margin-top:8px;}
@media(max-width:800px){ .priv-cards-row{grid-template-columns:1fr;} }
.priv-card{
  position:relative; border-radius:16px; border:1px solid var(--line); background:var(--panel-2);
  background-size:cover; background-position:center; overflow:hidden; display:flex; flex-direction:column; transition:transform .15s, border-color .15s;
}
.priv-card::before{
  content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(21,21,24,.55), var(--panel-2) 75%); pointer-events:none;
}
.priv-card:hover{transform:translateY(-3px);}
.priv-card.pc-vip{border-color:#3a5fd9;}
.priv-card.pc-premium{border-color:var(--flame);}
.priv-card.owned{border-color:var(--green);}
.priv-badge{
  background:#3a5fd9; color:#fff; font-size:12px; font-weight:700; text-align:center; padding:9px 12px;
}
.priv-card-inner{position:relative; z-index:1; padding:22px; display:flex; flex-direction:column; flex:1;}
.priv-tabs{display:flex; gap:6px; margin-bottom:18px; background:var(--panel); border-radius:9px; padding:4px;}
.priv-tab{flex:1; text-align:center; font-size:12px; padding:8px 6px; border-radius:7px; color:var(--text-dim); cursor:default;}
.priv-tab.active{background:var(--panel-3); color:var(--text); font-weight:700;}
.priv-title{
  font-size:19px; font-weight:800; font-family:'Sora','Segoe UI',system-ui,sans-serif; letter-spacing:.01em;
  display:flex; align-items:center; gap:9px; margin-bottom:18px;
}
.priv-ico{font-size:20px;}
.priv-ico-img{width:26px; height:26px; object-fit:contain; vertical-align:middle;}
.priv-card.pc-premium .priv-title{color:var(--flame);}
.priv-card.pc-vip .priv-title{color:#5c85f0;}
.priv-perks{list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:13px; flex:1;}
.priv-perks li{font-size:13.5px; color:var(--text); display:flex; align-items:center; gap:10px;}
.priv-perks .chk{color:#5c85f0; font-weight:800; flex-shrink:0;}
.priv-card.pc-premium .priv-perks .chk{color:var(--flame);}
.priv-bottom{margin-top:auto;}
.priv-price{font-size:24px; font-weight:800; font-family:'Sora','Segoe UI',system-ui,sans-serif; margin-bottom:14px; display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;}
.priv-oldprice{font-size:14px; color:var(--text-dim); text-decoration:line-through; font-weight:600;}
.priv-discount{font-size:11px; background:var(--red); color:#fff; border-radius:6px; padding:2px 7px; font-weight:700;}
.btn-vip{background:#3a5fd9; color:#fff;}
.btn-vip:hover{filter:brightness(1.1);}
.btn-premiumshop{background:var(--flame); color:#fff;}
.btn-premiumshop:hover{filter:brightness(1.1);}

.bans-toolbar{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; gap:16px; flex-wrap:wrap;}
.bans-tabs{display:flex; gap:8px;}
.bans-tab-btn{
  background:transparent; border:1px solid var(--line); color:var(--text-dim); padding:9px 18px; border-radius:9px;
  font-size:13.5px; cursor:pointer; font-weight:600; font-family:'Manrope'; transition:background .15s, color .15s, border-color .15s;
}
.bans-tab-btn.active{background:var(--panel-2); color:var(--text); border-color:var(--panel-2);}
.bans-tab-btn:hover:not(.active){border-color:var(--tooth); color:var(--tooth);}
.bans-search{
  background:var(--panel-2); border:1px solid var(--line); border-radius:9px; padding:9px 14px; font-size:13px;
  color:var(--text); min-width:240px;
}
.bans-search::placeholder{color:var(--text-dim);}
.bans-search:focus{outline:none; border-color:var(--tooth);}
table.bans-table{width:100%; border-collapse:collapse; font-size:13px;}
table.bans-table th{text-align:left; color:var(--text-dim); font-size:11px; text-transform:uppercase; letter-spacing:.05em; padding:11px 12px; border-bottom:1px solid var(--line); font-weight:600;}
table.bans-table td{padding:13px 12px; border-bottom:1px solid var(--line);}
table.bans-table tr:hover td{background:var(--panel-2);}
.status-pill{font-size:12px; font-weight:600; display:inline-flex; align-items:center; gap:5px;}
.status-pill.banned{color:var(--red);}
.status-pill.unbanned{color:var(--green);}
.status-pill.expired{color:var(--green);}
.user-cell{display:flex; align-items:center; gap:9px;}
.user-cell img{width:26px; height:26px; border-radius:50%; object-fit:cover;}

.rules-layout{display:grid; grid-template-columns:230px 1fr; gap:22px;}
.rules-cats{display:flex; flex-direction:column; gap:4px;}
.rule-cat{padding:11px 13px; border-radius:9px; font-size:13.5px; color:var(--text-dim); cursor:pointer; display:flex; justify-content:space-between;}
.rule-cat.active{background:var(--panel-2); color:var(--tooth);}
.rule-item{background:var(--panel-2); border:1px solid var(--line); border-radius:11px; padding:17px; margin-bottom:12px;}
.rule-item .rnum{color:var(--tooth); font-weight:700; margin-right:8px;}
.rule-item p{font-size:13px; line-height:1.6; color:var(--text-dim); margin-top:4px;}

.btn{border:none; cursor:pointer; font-size:13px; padding:9px 17px; border-radius:8px; font-weight:600; letter-spacing:.01em; transition:filter .15s ease, transform .12s ease, background-color .15s ease, border-color .15s ease, opacity .15s ease;}
.btn:active{transform:scale(.97);}
.btn-steam{background:linear-gradient(135deg,#1b2838,#2a3f5a); color:#fff; border:1px solid #3a5a80; display:inline-flex; align-items:center; gap:9px;}
.btn-steam::before{content:''; width:17px; height:17px; flex-shrink:0; background:url('/api/icons/steamlogo.webp') no-repeat center/contain; filter:brightness(1.5) saturate(1.3);}
.btn-steam:hover{filter:brightness(1.15);}
.btn-flame{background:var(--flame); color:#fff;}
.btn-flame:hover{filter:brightness(1.08);}
.btn-ghost{background:transparent; color:var(--text-dim); border:1px solid var(--line);}
.btn-ghost:hover{border-color:var(--tooth); color:var(--tooth);}

.profile-chip{display:flex; align-items:center; gap:9px; cursor:pointer; padding:5px 8px 5px 5px; border-radius:24px; background:var(--panel-2); border:1px solid var(--line); position:relative; transition:border-color .15s ease;}
.profile-chip:hover{border-color:var(--tooth);}
.profile-chip img{width:30px; height:30px; border-radius:50%; border:1.5px solid var(--tooth); object-fit:cover; flex-shrink:0;}
.profile-chip .pc-info{display:flex; flex-direction:column; min-width:0;}
.profile-chip .pname{font-size:12.5px; font-weight:600; white-space:nowrap;}
.pc-balance{
  display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:var(--tooth);
  background:var(--panel-3); border-radius:16px; padding:5px 8px 5px 6px; margin-left:2px;
}
.pc-coin-ico{width:15px; height:15px; object-fit:contain; flex-shrink:0;}
.profile-menu{
  position:absolute; top:calc(100% + 8px); right:0; background:var(--panel-2); border:1px solid var(--line);
  border-radius:9px; width:210px; overflow:hidden; box-shadow:0 20px 50px rgba(0,0,0,.5);
  display:flex; flex-direction:column; z-index:100;
  opacity:0; transform:translateY(-6px) scale(.98); pointer-events:none; transition:opacity .16s ease, transform .16s ease;
}
.profile-menu.open{opacity:1; transform:translateY(0) scale(1); pointer-events:auto;}
.profile-menu button{background:none; border:none; color:var(--text); text-align:left; padding:12px 16px; font-size:13.5px; cursor:pointer; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:9px;}
.profile-menu button:last-child{border-bottom:none; color:var(--red);}
.profile-menu button:hover{background:rgba(244,211,94,.06);}
.admin-badge{background:var(--flame); color:#fff; font-size:9px; padding:1px 5px; border-radius:4px; margin-left:6px;}
.dev-badge{background:linear-gradient(135deg,#8b5cf6,#6366f1); color:#fff; font-size:9px; padding:1px 5px; border-radius:4px; margin-left:6px;}
.test-badge{background:var(--blue); color:#fff; font-size:9px; padding:1px 5px; border-radius:4px; margin-left:6px;}

.pp-banner{
  height:110px; border-radius:12px 12px 0 0; background:linear-gradient(120deg, #1a1a1f, #262630); background-size:cover; background-position:center;
  position:relative; overflow:hidden; margin:-26px -26px 0 -26px; width:calc(100% + 52px);
}
.pp-banner .banner-edit-btn{
  position:absolute; bottom:10px; right:10px; background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.15);
  color:#fff; font-size:11px; padding:6px 12px; border-radius:7px; cursor:pointer; backdrop-filter:blur(4px);
}
.pp-header-row{display:flex; align-items:center; gap:12px; margin-top:14px; margin-bottom:18px;}
.pp-header-row img{width:60px; height:60px; border-radius:50%; border:3px solid var(--panel-2); background:var(--panel); object-fit:cover; flex-shrink:0;}
.pp-header-row .pn{font-size:16px; font-weight:700; font-family:'Sora','Segoe UI',system-ui,sans-serif;}
.pp-header-row .status{font-size:12px; color:var(--text-dim); margin-top:3px;}
.pp-stats-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px;}
.pp-stat-box{background:var(--panel); border:1px solid var(--line); border-radius:9px; padding:11px 6px; text-align:center;}
.pp-stat-box .val{font-size:16px; font-weight:700; color:var(--text-dim); font-family:'Sora','Segoe UI',system-ui,sans-serif;}
.pp-stat-box .lbl{font-size:10px; color:var(--text-dim); text-transform:uppercase; margin-top:3px;}
.pp-reg-row{font-size:12px; color:var(--text-dim); margin-bottom:14px;}

.pp-admin-actions{position:relative; display:inline-block; margin-left:auto;}
.pp-admin-actions-btn{
  background:var(--panel-2); border:1px solid var(--line); color:var(--tooth); font-size:12.5px; font-weight:700;
  padding:9px 15px; border-radius:9px; cursor:pointer; display:flex; align-items:center; gap:7px;
}
.pp-admin-actions-btn:hover{border-color:var(--tooth);}
.pp-admin-actions-menu{
  position:absolute; top:calc(100% + 8px); right:0; background:var(--panel-2); border:1px solid var(--line);
  border-radius:11px; width:260px; box-shadow:0 20px 50px rgba(0,0,0,.5); z-index:120; padding:8px;
  opacity:0; transform:translateY(-6px) scale(.98); pointer-events:none; transition:opacity .16s ease, transform .16s ease;
}
.pp-admin-actions-menu.open{opacity:1; transform:translateY(0) scale(1); pointer-events:auto;}
.pp-admin-actions-menu .aa-item{
  padding:11px 12px; font-size:13px; border-radius:8px; cursor:pointer; display:flex; align-items:center; gap:9px; color:var(--text);
}
.pp-admin-actions-menu .aa-item:hover{background:var(--panel-3);}
.pp-admin-actions-menu .aa-item.danger{color:var(--red);}
.pp-admin-actions-menu .aa-divider{height:1px; background:var(--line); margin:6px 4px;}
.pp-admin-actions-menu .aa-balance-view{font-size:12px; color:var(--text-dim); padding:8px 12px 4px;}
.pp-admin-actions-menu .aa-balance-view b{color:var(--tooth);}

.profile-page{max-width:900px; margin:0 auto;}
.pp-banner-lg{
  height:210px; border-radius:14px; background:linear-gradient(120deg, #1a1a1f, #262630); background-size:cover; background-position:center;
  position:relative; overflow:hidden; margin-bottom:20px;
}
.pp-banner-lg::after{
  content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.45), rgba(0,0,0,0) 55%);
  opacity:0; transition:opacity .2s ease; pointer-events:none;
}
.pp-banner-lg:hover::after{opacity:1;}
.pp-banner-hint{
  position:absolute; top:12px; left:16px; font-size:11px; color:rgba(255,255,255,.75);
  opacity:0; transform:translateY(-4px); transition:opacity .2s ease, transform .2s ease; pointer-events:none;
}
.pp-banner-lg:hover .pp-banner-hint{opacity:1; transform:translateY(0);}
.pp-banner-actions{
  position:absolute; bottom:14px; right:14px; display:flex; gap:8px;
  opacity:0; transform:translateY(4px); transition:opacity .2s ease, transform .2s ease;
}
.pp-banner-lg:hover .pp-banner-actions{opacity:1; transform:translateY(0);}
.pp-edit-btn, .pp-delete-btn{
  border:none; font-size:12.5px; font-weight:700; padding:8px 16px; border-radius:20px; cursor:pointer;
  transition:filter .15s ease, transform .12s ease;
}
.pp-edit-btn{background:#fff; color:#111;}
.pp-edit-btn:hover{filter:brightness(.92);}
.pp-delete-btn{background:rgba(255,92,92,.15); color:#ff8080; border:1px solid rgba(255,92,92,.4);}
.pp-delete-btn:hover{background:rgba(255,92,92,.25);}
.pp-edit-btn:active, .pp-delete-btn:active{transform:scale(.96);}

.pp-steam-btn{
  width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,#1b2838,#2a3f5a);
  border:1px solid #3a5a80; display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:filter .15s ease, transform .12s ease; margin-left:auto;
}
.pp-steam-btn:hover{filter:brightness(1.2); transform:translateY(-1px);}
.pp-steam-btn img{width:18px; height:18px; object-fit:contain; filter:brightness(1.5) saturate(1.3);}
.pp-admin-actions ~ .pp-steam-btn, .pp-steam-btn + .pp-admin-actions{margin-left:10px;}
.pp-avatar-row{display:flex; align-items:center; gap:16px; margin-bottom:18px; padding:0 6px;}
.pp-avatar-lg{width:96px; height:96px; border-radius:50%; border:4px solid var(--bg); object-fit:cover; background:var(--panel-2); flex-shrink:0;}
.pn-lg{font-size:24px; font-weight:800; font-family:'Sora','Segoe UI',system-ui,sans-serif;}
.pp-stats-grid-lg{display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-bottom:16px;}
@media(max-width:800px){ .pp-stats-grid-lg{grid-template-columns:repeat(3,1fr);} }
.pp-tabs{display:flex; gap:6px; border-bottom:1px solid var(--line); margin:24px 0 0;}
.pp-tab{padding:12px 16px; font-size:13.5px; color:var(--text-dim); cursor:pointer; border-bottom:2px solid transparent; font-weight:600;}
.pp-tab.active{color:var(--text); border-bottom-color:var(--tooth);}
.pp-tab-content{background:var(--panel-2); border:1px solid var(--line); border-top:none; border-radius:0 0 12px 12px; padding:26px; min-height:120px;}
.pp-empty{color:var(--text-dim); font-size:13px; text-align:center; padding:20px 0;}

.shop-layout{align-items:stretch;}
.shop-detail-card.full-right{
  position:relative; max-width:none; justify-self:stretch; display:flex; flex-direction:column;
}
.shop-detail-card .sd-update-note{font-size:11.5px; color:var(--text-dim); margin-top:6px; line-height:1.5;}
.btn-update{background:var(--blue); color:#fff;}
.shop-list-item.owned{border-color:var(--green);}
.shop-list-item .owned-tag{margin-left:auto; font-size:10.5px; color:var(--green); font-weight:700; text-transform:uppercase; letter-spacing:.03em;}

.server-info-modal{width:min(480px,92vw); padding:0; overflow:hidden;}
.server-info-modal .si-banner{
  height:150px; background-size:cover; background-position:center; position:relative;
  background:linear-gradient(120deg,#1a1a1f,#262630);
}
.server-info-modal .si-banner .si-close{
  position:absolute; top:12px; right:12px; background:rgba(0,0,0,.5); border:none; color:#fff;
  width:30px; height:30px; border-radius:50%; cursor:pointer; font-size:15px;
}
.server-info-modal .si-body{padding:22px;}
.server-info-modal .si-title{font-size:15px; font-weight:700; color:var(--text-dim); text-align:center; margin-bottom:8px; letter-spacing:.03em;}
.server-info-modal .si-score{font-size:40px; font-weight:800; text-align:center; font-family:'Sora','Segoe UI',system-ui,sans-serif;}
.server-info-modal .si-meta{display:flex; align-items:center; justify-content:center; gap:10px; margin-top:6px; font-size:13px; color:var(--text-dim);}
.server-info-modal .si-meta .dot{color:var(--green); font-weight:700;}
.server-info-modal .si-offline{text-align:center; color:var(--text-dim); font-size:13px; margin:16px 0 20px;}
.server-info-modal .si-actions{display:flex; gap:10px; margin-top:18px;}
.server-info-modal .si-connect{flex:1; background:#2dd4bf; color:#04211d; border:none; border-radius:10px; padding:13px; font-weight:700; font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px;}
.server-info-modal .si-connect:hover{filter:brightness(1.06);}
.server-info-modal .si-copy{width:48px; background:var(--panel-3); border:1px solid var(--line); border-radius:10px; cursor:pointer; color:var(--text-dim); font-size:16px;}
.server-info-modal .si-copy:hover{color:var(--tooth);}

.captcha-row{display:flex; align-items:center; gap:10px; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:10px 12px; margin-top:4px;}
.captcha-row .cq{font-size:14px; font-weight:700; color:var(--tooth); font-family:'Sora','Segoe UI',system-ui,sans-serif;}
.captcha-row input{flex:1; background:var(--panel-2); border:1px solid var(--line); border-radius:6px; padding:8px 10px; color:var(--text); font-size:13px;}

.chat-col{background:var(--panel); border-left:1px solid var(--line); display:flex; flex-direction:column; overflow:hidden; min-height:0;}
.chat-head{display:flex; align-items:center; justify-content:space-between; padding:13px 16px; border-bottom:1px solid var(--line);}
.chat-head .left{display:flex; align-items:center; gap:8px; font-size:14px; font-weight:700; font-family:'Sora','Segoe UI',system-ui,sans-serif;}
.chat-head .dot-online{width:6px; height:6px; border-radius:50%; background:var(--green); display:inline-block;}
.chat-head .right-tools{display:flex; align-items:center; gap:10px;}
.chat-online-count{display:flex; align-items:center; gap:5px; font-size:12px; color:var(--text-dim); font-weight:500;}
.chat-online-count .dot{width:6px; height:6px; border-radius:50%; background:var(--green);}
.chat-close-btn{background:none; border:none; color:var(--icon-grey); font-size:15px; cursor:pointer; padding:2px;}
.chat-close-btn:hover{color:var(--tooth);}
.chat-reopen-btn{
  position:fixed; top:180px; right:0; bottom:auto; z-index:150; background:var(--panel-2); border:1px solid var(--line); border-right:none;
  color:var(--tooth); width:64px; height:64px; border-radius:50% 0 0 50%; font-size:26px; cursor:pointer; display:none;
  align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(0,0,0,.4);
}
.chat-reopen-btn img{width:28px; height:28px; object-fit:contain;}
.chat-reopen-btn.show{display:flex;}
.chat-head .left img.chat-head-ico{width:18px; height:18px; object-fit:contain; margin-right:1px;}

.chat-messages{flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:11px;}
.msg{display:flex; gap:9px; align-items:flex-start; font-size:12.5px; border-radius:8px; padding:3px 4px; transition:background .15s;}
.msg img{width:25px; height:25px; border-radius:50%; flex-shrink:0; margin-top:1px; cursor:pointer; display:block;}
.msg .col{display:flex; flex-direction:column; min-width:0;}
.msg .name{font-weight:600; color:var(--tooth); font-size:11.5px; cursor:pointer;}
.msg .name:hover{text-decoration:underline;}
.msg .name.admin{color:var(--flame);}
.msg .text{color:var(--text); line-height:1.4; word-break:break-word;}
.msg .time{font-size:9.5px; color:var(--text-dim); margin-left:4px;}

/* Premium chat effects */
.msg-avatar-wrap{position:relative; flex-shrink:0; width:25px; height:25px; border-radius:50%; margin-top:1px;}
.msg-avatar-wrap img{width:100%; height:100%;}
.avatar-premium{padding:2px; margin:-2px; width:29px; height:29px;
  background:conic-gradient(from 0deg, #ffb347, #ff4d1c, #ffd76a, #ff4d1c, #ffb347);
  animation:premiumSpin 3.5s linear infinite; box-shadow:0 0 8px rgba(255,140,40,.55);}
.avatar-premium img{border:2px solid var(--panel-2); border-radius:50%;}
@keyframes premiumSpin{ to{ filter:hue-rotate(360deg); } }
.msg-premium{background:linear-gradient(90deg, rgba(255,140,40,.08), rgba(255,77,28,.02) 60%);}
.name-premium{background:linear-gradient(90deg,#ffb347,#ff4d1c,#ffd76a); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 0 12px rgba(255,140,40,.25);}
.text-premium{text-shadow:0 0 6px rgba(255,140,40,.18);}

/* Developer effects */
.avatar-developer img{box-shadow:0 0 8px rgba(99,102,241,.55);}
.name-developer{color:#8b5cf6;}
.dev-check{width:15px; height:15px; object-fit:contain; margin-left:3px; vertical-align:middle; display:inline-block;}
.msg-developer{background:linear-gradient(90deg, rgba(139,92,246,.08), rgba(99,102,241,.02) 60%);}

.promo-chat-card{
  margin-top:7px; background:var(--panel-3); border:1px solid var(--line); border-radius:10px; padding:11px 13px; max-width:250px;
}
.promo-chat-card .pch-head{display:flex; align-items:center; gap:6px; font-size:11px; color:var(--tooth); font-weight:700; margin-bottom:9px;}
.promo-chat-card .pch-code-row{
  display:flex; align-items:center; justify-content:space-between; background:var(--panel); border:1px solid var(--line);
  border-radius:8px; padding:9px 11px; margin-bottom:9px;
}
.promo-chat-card .pch-code-row b{font-family:'Sora','Segoe UI',system-ui,sans-serif; font-size:14px; letter-spacing:.02em;}
.promo-chat-card .pch-code-row .pch-copy{cursor:pointer; color:var(--text-dim); font-size:13px;}
.promo-chat-card .pch-code-row .pch-copy:hover{color:var(--tooth);}
.promo-chat-card .pch-meta{display:flex; align-items:center; flex-wrap:wrap; gap:10px; font-size:11px; color:var(--text-dim);}
.promo-chat-card .pch-meta b{color:var(--text);}
.promo-chat-card .pch-meta .pch-author{display:flex; align-items:center; gap:5px; width:100%;}
.promo-chat-card .pch-meta .pch-author img{width:16px; height:16px; border-radius:50%; object-fit:cover;}

.chat-locked{display:flex; align-items:center; justify-content:center; height:100%; flex-direction:column; gap:10px; color:var(--text-dim); text-align:center; padding:20px; font-size:13px;}
.chat-input-row{display:flex; gap:8px; padding:11px; border-top:1px solid var(--line);}
.chat-input-row input{flex:1; background:var(--panel-2); border:1px solid var(--line); border-radius:8px; padding:10px 13px; color:var(--text); font-size:13px;}
.chat-input-row input:focus{outline:none; border-color:var(--tooth);}
.chat-input-row button{background:var(--flame); border:none; color:#fff; border-radius:8px; padding:0 15px; cursor:pointer; font-size:15px;}

.overlay{position:fixed; inset:0; background:rgba(0,0,0,.7); backdrop-filter:blur(4px); display:none; align-items:center; justify-content:center; z-index:200; opacity:0; transition:opacity .18s ease;}
.overlay.open{display:flex; opacity:1;}
.modal{background:var(--panel-2); border:1px solid var(--line); border-radius:16px; width:min(420px,90vw); padding:26px; position:relative; max-height:88vh; overflow-y:auto; animation:modalPop .2s ease;}
@keyframes modalPop{ from{opacity:0; transform:scale(.95) translateY(8px);} to{opacity:1; transform:scale(1) translateY(0);} }
.modal h3{font-size:19px; margin-bottom:16px; color:var(--tooth); font-family:'Sora','Segoe UI',system-ui,sans-serif;}
.modal .close-x{position:absolute; top:16px; right:16px; background:none; border:none; color:var(--text-dim); font-size:20px; cursor:pointer;}
.field{margin-bottom:14px;}
.field label{display:block; font-size:11px; color:var(--text-dim); margin-bottom:6px; text-transform:uppercase; letter-spacing:.05em;}
.field input{width:100%; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:10px 12px; color:var(--text); font-size:13px;}
.field input:focus{outline:none; border-color:var(--tooth);}
.modal-msg{font-size:12.5px; margin-top:9px; min-height:16px;}
.modal-msg.ok{color:var(--green);}
.modal-msg.err{color:var(--red);}
.toggle-row{display:flex; align-items:center; gap:8px; margin-top:2px; font-size:13px;}

.admin-nav{display:flex; flex-direction:column; gap:2px; width:220px; flex-shrink:0;}
.admin-nav-item{padding:11px 13px; border-radius:9px; font-size:13.5px; color:var(--text-dim); cursor:pointer; display:flex; align-items:center; gap:9px;}
.admin-nav-item:hover{background:var(--panel-2);}
.admin-nav-item.active{background:var(--panel-2); color:var(--tooth);}
.admin-layout{display:flex; gap:22px;}
.admin-content{flex:1; min-width:0;}
.admin-card{background:var(--panel-2); border:1px solid var(--line); border-radius:12px; padding:20px; margin-bottom:18px;}
.admin-card h3{font-size:15px; margin-bottom:14px; font-family:'Sora','Segoe UI',system-ui,sans-serif;}
table.users-table{width:100%; border-collapse:collapse; font-size:13px;}
table.users-table th{text-align:left; color:var(--text-dim); font-size:11px; text-transform:uppercase; letter-spacing:.05em; padding:11px 12px; border-bottom:1px solid var(--line); font-weight:600;}
table.users-table td{padding:12px; border-bottom:1px solid var(--line); vertical-align:middle;}
table.users-table tr:hover td{background:var(--panel-3);}
.users-table .u-cell{display:flex; align-items:center; gap:9px;}
.users-table .u-cell img{width:26px; height:26px; border-radius:50%; object-fit:cover;}
.users-table .u-open{color:var(--tooth); cursor:pointer; font-weight:600; font-size:12.5px;}

.cookie-banner{
  position:fixed; bottom:0; left:0; right:0; z-index:300; background:var(--panel-2); border-top:1px solid var(--line);
  padding:16px 26px; display:flex; align-items:center; justify-content:space-between; gap:20px;
  box-shadow:0 -10px 30px rgba(0,0,0,.4);
}
.cookie-banner p{font-size:13px; color:var(--text-dim); max-width:700px;}
.cookie-banner .btns{display:flex; gap:10px; flex-shrink:0;}

@media(max-width:900px){
  html, body{overflow-x:hidden;}
  .app{
    display:flex; flex-direction:column; height:100vh; height:100dvh;
  }
  .app > .content-row{display:contents;}
  .sidebar{
    flex-direction:row; align-items:center; justify-content:space-around; padding:8px 6px;
    border-right:none; border-top:1px solid var(--line); order:3;
    position:fixed; bottom:0; left:0; right:0; background:var(--panel); z-index:140;
  }
  .logo-row{display:none;}
  .sidebar-bottom{display:none;}
  .nav-item{
    flex-direction:column; gap:3px; padding:7px 6px; margin:0; font-size:9.5px; text-align:center; flex:1;
  }
  .nav-item .ico{font-size:19px;}
  .nav-item .ico img{width:20px; height:20px;}
  .nav-item span.label{display:block; font-size:9.5px;}

  .main{order:1; flex:1; overflow-y:auto; padding-bottom:64px;}
  .topbar{order:0; padding:12px 14px; flex-wrap:wrap;}
  .page{padding:16px;}
  .page-head h2{font-size:21px;}

  .chat-col{
    position:fixed; inset:0; z-index:250; border-left:none; display:none !important;
  }
  .app:not(.chat-collapsed) .chat-col{display:flex !important;}
  .chat-reopen-btn{top:auto; bottom:76px; right:16px; border-radius:50%; border-right:1px solid var(--line);}

  .server-grid{grid-template-columns:1fr; gap:12px;}
  .site-stats-row{grid-template-columns:1fr; gap:10px;}
  .shop-layout{grid-template-columns:1fr !important;}
  .shop-detail-card{max-width:none; justify-self:stretch;}
  .admin-priv-grid{grid-template-columns:1fr;}
  .rules-layout{grid-template-columns:1fr;}
  .rules-cats{flex-direction:row; overflow-x:auto; gap:6px; padding-bottom:4px;}
  .rule-cat{flex-shrink:0; white-space:nowrap;}
  .admin-layout{flex-direction:column;}
  .admin-nav{flex-direction:row; overflow-x:auto; width:auto; gap:6px;}
  .admin-nav-item{flex-shrink:0; white-space:nowrap;}
  table.bans-table, table.users-table{display:block; overflow-x:auto; white-space:nowrap;}
  .bans-toolbar{flex-direction:column; align-items:stretch;}
  .bans-search{min-width:0; width:100%;}

  .pp-stats-grid-lg{grid-template-columns:repeat(3,1fr);}
  .pp-avatar-row{flex-wrap:wrap; gap:12px;}
  .pp-admin-actions{margin-left:0; width:100%;}
  .pp-admin-actions-btn{width:100%; justify-content:center;}
  .pp-admin-actions-menu{width:100%; left:0; right:0;}
  .pp-banner-lg{height:140px;}
  .pp-avatar-lg{width:74px; height:74px;}
  .pn-lg{font-size:19px;}

  .modal{width:92vw; padding:20px;}
  .server-info-modal{width:92vw;}
}

@media(max-width:420px){
  .nav-item span.label{display:none;}
}

.steam-login-overlay{
  position:fixed; inset:0; z-index:400; background:rgba(11,11,13,.82); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; animation:pageFadeIn .15s ease;
}
.steam-login-overlay .slo-box{
  display:flex; flex-direction:column; align-items:center; gap:14px; color:var(--text); font-size:13.5px; font-weight:600;
}
.steam-login-overlay .slo-spinner{
  width:34px; height:34px; border-radius:50%; border:3px solid rgba(255,255,255,.15); border-top-color:var(--tooth);
  animation:sloSpin .8s linear infinite;
}
@keyframes sloSpin{ to{ transform:rotate(360deg); } }

.site-footer{
  flex-shrink:0; padding:14px 32px; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
}
.site-footer-link{
  background:none; border:none; color:var(--text-dim); font-size:12.5px; cursor:pointer; padding:0;
  text-decoration:underline; text-underline-offset:3px;
}
.site-footer-link:hover{color:var(--tooth);}
.site-footer-copy{color:var(--text-dim); font-size:12px;}
@media(max-width:900px){
  .site-footer{padding:16px 16px 78px;}
}

.privacy-modal{width:640px; max-width:92vw; max-height:80vh; overflow-y:auto; text-align:left;}
.privacy-body{font-size:13px; line-height:1.55; color:var(--text-dim);}
.privacy-body p{margin-bottom:14px;}
.privacy-body b{color:var(--text);}

/* ===== Поддержка (support.html) ===== */
.support-layout{display:grid; grid-template-columns:320px 1fr; gap:20px; align-items:start; height:calc(100% - 20px);}
@media(max-width:900px){ .support-layout{grid-template-columns:1fr; height:auto;} }
.support-list-col{display:flex; flex-direction:column; min-width:0;}
.support-tickets-list{display:flex; flex-direction:column; gap:8px; max-height:70vh; overflow-y:auto;}
.support-ticket-item{
  background:var(--panel-2); border:1px solid var(--line); border-radius:11px; padding:13px 14px; cursor:pointer;
  transition:border-color .15s;
}
.support-ticket-item:hover{border-color:var(--tooth);}
.support-ticket-item.active{border-color:var(--tooth); background:rgba(244,211,94,.06);}
.sti-top{display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:5px;}
.sti-subject{font-size:13.5px; font-weight:700; color:var(--text);}
.sti-preview{font-size:12px; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.support-thread-col{
  background:var(--panel-2); border:1px solid var(--line); border-radius:14px; display:flex; flex-direction:column;
  min-height:420px; overflow:hidden;
}
.support-empty{display:flex; align-items:center; justify-content:center; height:100%; color:var(--text-dim); font-size:13.5px; padding:40px 20px; text-align:center;}
.support-thread-head{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:16px 18px; border-bottom:1px solid var(--line); font-size:14.5px;}
.support-thread-msgs{flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:12px; min-height:260px;}
.admin-thread-msgs{max-height:50vh;}
.support-closed-note{text-align:center; color:var(--text-dim); font-size:12.5px; padding:10px; border-top:1px solid var(--line);}
.text-dim-note{color:var(--text-dim); font-weight:400; font-size:12.5px;}

/* Тикеты: сообщения админа справа, пользователя слева */
.ticket-msg{display:flex; gap:8px; max-width:78%;}
.ticket-msg.staff{margin-left:auto; flex-direction:row-reverse; text-align:right;}
.ticket-msg.staff .col{align-items:flex-end;}
.ticket-msg .col{display:flex; flex-direction:column; gap:2px; min-width:0;}
.ticket-msg img{width:26px; height:26px; border-radius:50%; flex-shrink:0; margin-top:1px;}
.ticket-msg .name{font-weight:600; color:var(--tooth); font-size:11.5px;}
.ticket-msg.staff .name{color:var(--flame);}
.ticket-msg .bubble{background:var(--panel-3); border:1px solid var(--line); border-radius:10px; padding:8px 12px; font-size:13px; color:var(--text); line-height:1.4; word-break:break-word;}
.ticket-msg.staff .bubble{background:rgba(255,77,28,.10); border-color:rgba(255,77,28,.25);}
.ticket-msg .time{font-size:9.5px; color:var(--text-dim);}
.ticket-msg.system{max-width:100%; margin:4px 0;}
.ticket-msg.system .bubble{background:transparent; border:none; text-align:center; color:var(--text-dim); font-size:12px; margin:0 auto; padding:4px 10px;}

@media(max-width:900px){
  .support-tickets-list{max-height:none;}
  .support-thread-col{min-height:340px;}
}