/* style.css */
body{
background:#05060b;
color:#f5f7ff;
font-family:system-ui,sans-serif;
margin:0;
padding:0;
}

.container{
width:95%;
max-width:900px;
margin:0 auto;
padding:20px 0 60px 0;
}

.card{
background:radial-gradient(circle at top,#151a2a,#05060b);
padding:18px;
border-radius:16px;
margin-top:18px;
box-shadow:0 18px 40px rgba(0,0,0,0.75);
border:1px solid rgba(90,110,255,0.25);
animation:fadeIn 0.35s ease;
}

h2{
margin:0 0 10px 0;
font-size:18px;
}

a{
color:#3ef3ff;
text-decoration:none;
}

a:hover{
text-decoration:underline;
}

.btn{
background:linear-gradient(135deg,#5a6eff,#3ef3ff);
border:none;
padding:11px;
width:100%;
border-radius:999px;
margin-top:10px;
font-weight:600;
cursor:pointer;
transition:0.18s;
color:#05060b;
text-align:center;
display:inline-block;
}

.btn:hover{
filter:brightness(1.1);
transform:translateY(-1px);
}

.btn.small{
width:auto;
padding:7px 12px;
font-size:12px;
}

.btn.start{
background:linear-gradient(135deg,#ff4b6a,#ffb347);
color:#05060b;
}

.btn.start:disabled{
background:#3a1b1b;
cursor:not-allowed;
opacity:0.6;
}

.btn.stop{
background:linear-gradient(135deg,#3a7bff,#7b61ff);
color:#05060b;
}

.btn.outline{
background:transparent;
border:1px solid #3ef3ff;
color:#3ef3ff;
}

.btn.ghost{
background:transparent;
border:1px solid #3a3f5f;
color:#f5f7ff;
}

.plan-banner{
display:flex;
justify-content:space-between;
align-items:center;
background:#0b0f1a;
padding:10px 12px;
border-radius:14px;
margin-top:10px;
font-size:12px;
}

.plan-link{
color:#3ef3ff;
font-weight:600;
}

.plan-link.inline{
margin-left:6px;
font-size:12px;
}

#plan-warning{
font-size:12px;
color:#ff6b81;
}

.plan-center-warning{
font-size:12px;
color:#ff6b81;
margin-bottom:4px;
}

.stats{
display:flex;
gap:12px;
margin-top:18px;
}

.stat-card{
flex:1;
background:#0b0f1a;
padding:12px;
border-radius:14px;
}

.bar{
width:100%;
height:10px;
background:#05060b;
border-radius:999px;
overflow:hidden;
margin-bottom:6px;
}

#ram-bar,#cpu-bar{
height:100%;
width:0%;
border-radius:999px;
transition:width 0.4s ease;
}

#ram-bar{
background:linear-gradient(90deg,#3ef3ff,#5affb1);
}

#cpu-bar{
background:linear-gradient(90deg,#ff4b6a,#ffb347);
}

#ram-text,#cpu-text{
font-size:12px;
opacity:0.8;
}

.terminal-shell{
background:#05060b;
border-radius:12px;
padding:10px;
max-height:180px;
overflow:auto;
}

.terminal-shell pre{
margin:0;
font-size:12px;
white-space:pre-wrap;
word-wrap:break-word;
}

.users h2{
font-size:16px;
}

.user-list{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:10px;
min-height:32px;
}

.user-pill{
background:#0b0f1a;
padding:6px 10px;
border-radius:999px;
font-size:11px;
display:flex;
align-items:center;
gap:6px;
animation:fadeIn 0.25s ease;
}

.user-avatar{
width:18px;
height:18px;
border-radius:50%;
background:linear-gradient(135deg,#3ef3ff,#7b61ff);
}

.empty-state{
font-size:12px;
opacity:0.7;
}

.logs-list{
margin-top:8px;
min-height:40px;
}

.log-item{
background:#0b0f1a;
padding:8px 10px;
border-radius:10px;
margin-top:8px;
font-size:11px;
display:flex;
flex-direction:column;
gap:4px;
animation:fadeIn 0.25s ease;
}

.log-btn{
background:#151a2a;
padding:5px 8px;
border-radius:7px;
text-align:center;
cursor:pointer;
transition:0.15s;
}

.log-btn:hover{
background:#1c2235;
}

.bot-panel .field{
margin-top:10px;
}

.bot-panel label{
display:block;
font-size:12px;
opacity:0.9;
margin-bottom:4px;
}

.input-shell{
display:flex;
align-items:center;
background:#05060b;
border-radius:999px;
border:1px solid #1c2235;
overflow:hidden;
}

.input-shell.clickable{
cursor:pointer;
}

.input-prefix{
padding:8px 12px;
font-size:12px;
opacity:0.8;
border-right:1px solid #1c2235;
}

.bot-panel input,
.bot-panel select{
flex:1;
padding:9px;
border-radius:0;
border:none;
background:transparent;
color:#f5f7ff;
font-size:13px;
outline:none;
}

.bot-panel input:focus,
.bot-panel select:focus{
box-shadow:0 0 0 1px rgba(62,243,255,0.4);
}

.slider-row{
display:flex;
flex-direction:column;
gap:6px;
}

.slider-values{
display:flex;
justify-content:flex-end;
font-size:11px;
opacity:0.8;
}

.slider-bar{
width:100%;
height:8px;
background:#05060b;
border-radius:999px;
overflow:hidden;
}

#bots-bar,#time-bar{
height:100%;
width:0%;
border-radius:999px;
transition:width 0.25s ease;
background:linear-gradient(90deg,#5a6eff,#3ef3ff);
}

/* kolor po przekroczeniu limitu */
.slider-bar.over-limit #bots-bar,
.slider-bar.over-limit #time-bar{
background:linear-gradient(90deg,#ff4b6a,#ffb347);
}

.slider-values.over-limit span:first-child{
color:#ff4b6a;
}

.error-text{
font-size:11px;
color:#ff6b81;
margin-top:4px;
}

.hint{
font-size:11px;
opacity:0.7;
margin-top:4px;
}

.data-usage{
margin-top:6px;
font-size:13px;
background:#0b0f1a;
padding:7px 10px;
border-radius:9px;
}

.status-text{
font-size:12px;
opacity:0.8;
margin-top:8px;
}

.input-invalid{
border-color:#ff4b6a !important;
box-shadow:0 0 0 1px rgba(255,75,106,0.4);
}

/* VERIFY */

.verify-box{
text-align:center;
margin-bottom:16px;
}

.verify-label{
font-size:13px;
opacity:0.8;
margin-bottom:4px;
}

.verify-code{
font-size:32px;
font-weight:bold;
letter-spacing:4px;
color:#3ef3ff;
padding:10px 0;
border-radius:10px;
background:#05060b;
border:1px solid #1c2235;
}

.timer{
font-size:12px;
opacity:0.8;
margin-top:8px;
}

.verify-actions{
display:flex;
gap:10px;
margin-top:10px;
}

/* MODAL */

.modal{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.7);
display:none;
justify-content:center;
align-items:center;
z-index:10;
}

.modal-content{
background:#0b0f1a;
padding:16px;
border-radius:14px;
width:90%;
max-width:500px;
border:1px solid rgba(90,110,255,0.4);
}

.modal-phone{
max-height:90vh;
display:flex;
flex-direction:column;
}

.modal-phone video{
width:100%;
max-height:60vh;
border-radius:10px;
}

.modal-animate{
animation:fadeIn 0.25s ease;
}

.modal-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:10px;
}

.close-btn{
background:transparent;
border:none;
color:#f5f7ff;
font-size:20px;
cursor:pointer;
}

/* PLANS */

.plan-subtitle{
font-size:13px;
opacity:0.8;
margin-bottom:10px;
}

.plan-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:10px;
margin-top:10px;
}

.plan-item{
background:#0b0f1a;
padding:10px;
border-radius:10px;
font-size:12px;
}

.plan-title{
font-size:11px;
opacity:0.8;
}

.plan-value{
font-size:16px;
font-weight:600;
display:block;
margin-top:4px;
}

.methods{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:10px;
}

.method-btn{
flex:1;
min-width:120px;
background:#0b0f1a;
border:none;
border-radius:999px;
padding:8px 10px;
font-size:12px;
cursor:pointer;
color:#f5f7ff;
transition:0.15s;
}

.method-btn.active{
background:linear-gradient(135deg,#5a6eff,#3ef3ff);
color:#05060b;
}

.method-desc{
font-size:12px;
opacity:0.8;
margin-top:8px;
}

.slider-box{
margin-top:14px;
}

.slider-box label{
font-size:12px;
opacity:0.9;
}

#days-slider{
width:100%;
margin-top:6px;
}

.slider-info{
display:flex;
justify-content:space-between;
font-size:13px;
margin-top:4px;
}

.buy-box{
margin-top:16px;
font-size:12px;
}

.buy-box textarea{
width:100%;
height:100px;
background:#05060b;
color:#f5f7ff;
border:1px solid #1c2235;
border-radius:10px;
padding:10px;
margin-top:8px;
}

.buy-actions{
display:flex;
justify-content:space-between;
align-items:center;
margin-top:10px;
}

/* FOOTER */

footer{
margin-top:24px;
text-align:center;
font-size:12px;
opacity:0.6;
}

/* MOBILE */

@media(max-width:700px){
.stats{
flex-direction:column;
}
.plan-grid{
grid-template-columns:1fr;
}
.verify-actions{
flex-direction:column;
}
}

/* ANIMACJE */

@keyframes fadeIn{
from{opacity:0;transform:translateY(6px);}
to{opacity:1;transform:translateY(0);}
}