@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Lora:ital,wght@0,600;1,400;1,600&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
--bg:#0d0d0d;
--surface:#161616;
--surface2:#1f1f1f;
--surface3:#272727;
--border:rgba(255,255,255,0.07);
--border2:rgba(255,255,255,0.12);
--text:#e2e0dc;
--text-dim:#8a8885;
--text-faint:#4a4845;
--accent:#d97941;
--accent-dim:rgba(217,121,65,0.14);
--accent-glow:rgba(217,121,65,0.08);
--green:#4cba6a;
--green-dim:rgba(76,186,106,0.14);
--red:#e05252;
--red-dim:rgba(224,82,82,0.14);
--yellow:#d4a847;
--yellow-dim:rgba(212,168,71,0.14);
--blue:#5b9bd5;
--radius:12px;
--radius-sm:8px;
--radius-lg:16px;
--sidebar:240px;
--header:56px;
--font:'Inter',system-ui,sans-serif;
--font-serif:'Lora',Georgia,serif;
--shadow:0 4px 24px rgba(0,0,0,0.4);
--shadow-sm:0 2px 8px rgba(0,0,0,0.3);
}

html{font-size:15px;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.6;min-height:100vh;overflow-x:hidden}
body.bg-dash {
  background-image: url('image.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
body.bg-dash .card, body.bg-dash .platform-card {
  background: rgba(22, 22, 22, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
body.bg-dash .top-bar {
  background: rgba(22, 22, 22, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
body.bg-dash .sidebar {
  background: rgba(22, 22, 22, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
a{color:inherit;text-decoration:none}
button{cursor:pointer;font-family:inherit}
img{display:block;max-width:100%}
input,select,textarea{font-family:inherit}

.hidden{display:none!important}

.layout{display:flex;min-height:100vh}

.sidebar{
width:var(--sidebar);
min-height:100vh;
background:var(--surface);
border-right:1px solid var(--border);
display:flex;
flex-direction:column;
position:fixed;
left:0;top:0;bottom:0;
z-index:100;
transition:transform .25s cubic-bezier(.4,0,.2,1);
}

.sidebar-logo{
padding:20px 20px 16px;
border-bottom:1px solid var(--border);
display:flex;
align-items:center;
gap:10px;
}

.sidebar-logo-mark{
width:32px;height:32px;
background:var(--accent);
border-radius:8px;
display:flex;align-items:center;justify-content:center;
font-size:16px;
flex-shrink:0;
}

.sidebar-logo-text{
font-family:var(--font-serif);
font-size:1rem;
font-weight:600;
color:var(--text);
letter-spacing:-.01em;
}

.sidebar-logo-text span{color:var(--accent)}

.sidebar-nav{
flex:1;
padding:12px 8px;
display:flex;
flex-direction:column;
gap:2px;
overflow-y:auto;
}

.nav-item{
display:flex;
align-items:center;
gap:10px;
padding:8px 12px;
border-radius:var(--radius-sm);
font-size:.875rem;
font-weight:500;
color:var(--text-dim);
transition:all .15s;
border:none;
background:none;
width:100%;
text-align:left;
}

.nav-item:hover{background:var(--surface2);color:var(--text)}
.nav-item.active{background:var(--accent-dim);color:var(--accent)}
.nav-item svg{flex-shrink:0;opacity:.7}
.nav-item.active svg{opacity:1}

.nav-section-label{
font-size:.7rem;
font-weight:600;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--text-faint);
padding:8px 12px 4px;
margin-top:8px;
}

.sidebar-footer{
padding:16px;
border-top:1px solid var(--border);
}

.user-card{
display:flex;
align-items:center;
gap:10px;
padding:8px;
border-radius:var(--radius-sm);
cursor:pointer;
transition:background .15s;
}
.user-card:hover{background:var(--surface2)}

.user-avatar{
width:32px;height:32px;
border-radius:50%;
background:var(--surface3);
overflow:hidden;
flex-shrink:0;
border:2px solid var(--border2);
}
.user-avatar img{width:100%;height:100%;object-fit:cover}
.user-avatar-placeholder{
width:100%;height:100%;
display:flex;align-items:center;justify-content:center;
font-size:14px;
color:var(--text-dim);
}

.user-info{flex:1;min-width:0}
.user-name{font-size:.8rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-role{font-size:.7rem;color:var(--text-dim)}

.main{
flex:1;
margin-left:var(--sidebar);
min-height:100vh;
display:flex;
flex-direction:column;
}

.top-bar{
height:var(--header);
background:var(--surface);
border-bottom:1px solid var(--border);
display:flex;
align-items:center;
padding:0 24px;
gap:16px;
position:sticky;top:0;z-index:50;
}

.top-bar-title{
font-family:var(--font-serif);
font-size:1.05rem;
font-weight:600;
flex:1;
}

.top-bar-right{display:flex;align-items:center;gap:8px}

.status-dot{
width:8px;height:8px;
border-radius:50%;
background:var(--text-faint);
flex-shrink:0;
}
.status-dot.online{background:var(--green);box-shadow:0 0 0 3px var(--green-dim)}
.status-dot.offline{background:var(--red)}
.status-dot.checking{background:var(--yellow);animation:pulse 1.2s infinite}

@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

.btn-icon{
width:34px;height:34px;
border-radius:var(--radius-sm);
background:var(--surface2);
border:1px solid var(--border);
color:var(--text-dim);
display:flex;align-items:center;justify-content:center;
transition:all .15s;
}
.btn-icon:hover{background:var(--surface3);color:var(--text);border-color:var(--border2)}

.content{
flex:1;
padding:28px 24px;
max-width:1200px;
width:100%;
}

.page-header{margin-bottom:24px}
.page-title{
font-family:var(--font-serif);
font-size:1.5rem;
font-weight:600;
letter-spacing:-.02em;
}
.page-sub{
font-size:.85rem;
color:var(--text-dim);
margin-top:4px;
}

.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.card{
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--radius);
padding:20px;
transition:border-color .2s;
}
.card:hover{border-color:var(--border2)}

.card-header{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:16px;
}
.card-title{
font-size:.8rem;
font-weight:600;
letter-spacing:.04em;
text-transform:uppercase;
color:var(--text-dim);
}
.card-badge{
font-size:.7rem;
font-weight:600;
padding:3px 8px;
border-radius:20px;
}
.badge-green{background:var(--green-dim);color:var(--green)}
.badge-red{background:var(--red-dim);color:var(--red)}
.badge-yellow{background:var(--yellow-dim);color:var(--yellow)}
.badge-default{background:var(--surface3);color:var(--text-dim)}
.badge-accent{background:var(--accent-dim);color:var(--accent)}

.stat-value{
font-size:2rem;
font-weight:700;
letter-spacing:-.03em;
line-height:1;
color:var(--text);
}
.stat-label{
font-size:.8rem;
color:var(--text-dim);
margin-top:6px;
}

.platform-card{
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--radius);
padding:20px;
transition:all .2s;
}
.platform-card.running{
border-color:rgba(217,121,65,.3);
background:linear-gradient(135deg,var(--surface),var(--accent-glow));
}
.platform-card.verified{
border-color:rgba(76,186,106,.3);
background:linear-gradient(135deg,var(--surface),var(--green-dim));
}

.platform-header{
display:flex;
align-items:center;
gap:12px;
margin-bottom:16px;
}

.platform-icon{
width:36px;height:36px;
border-radius:8px;
display:flex;align-items:center;justify-content:center;
font-size:14px;
font-weight:700;
flex-shrink:0;
}
.platform-icon.fb{background:linear-gradient(135deg,#1877f2,#4facfe);color:#fff}
.platform-icon.ig{background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);color:#fff}

.platform-name{
font-weight:600;
font-size:.95rem;
flex:1;
}

.status-badge{
font-size:.72rem;
font-weight:600;
padding:3px 9px;
border-radius:20px;
}

.progress-wrap{margin-bottom:12px}
.progress-row{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:6px;
}
.progress-label{font-size:.78rem;color:var(--text-dim)}
.progress-pct{font-size:.78rem;font-weight:600;color:var(--text)}

.progress-bar{
height:6px;
background:var(--surface2);
border-radius:3px;
overflow:hidden;
}
.progress-fill{
height:100%;
border-radius:3px;
background:linear-gradient(90deg,var(--accent),#e8a05c);
transition:width .5s;
}
.progress-fill.ig{background:linear-gradient(90deg,#f09433,#dc2743)}
.progress-fill.verified{background:linear-gradient(90deg,var(--green),#6dd48e)}

.info-row{
display:flex;
gap:16px;
flex-wrap:wrap;
}
.info-item{
display:flex;
flex-direction:column;
gap:2px;
}
.info-label{font-size:.7rem;color:var(--text-faint);text-transform:uppercase;letter-spacing:.04em}
.info-val{font-size:.82rem;font-weight:500;color:var(--text)}

.timer-display{
font-size:1.6rem;
font-weight:700;
font-variant-numeric:tabular-nums;
letter-spacing:-.02em;
color:var(--text);
margin-bottom:12px;
}

.section-title{
font-size:.95rem;
font-weight:600;
margin-bottom:12px;
display:flex;
align-items:center;
gap:8px;
}

.log-wrap{
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--radius);
overflow:hidden;
}

.log-header{
padding:12px 16px;
border-bottom:1px solid var(--border);
display:flex;
align-items:center;
justify-content:space-between;
}

.log-list{
max-height:280px;
overflow-y:auto;
scrollbar-width:thin;
scrollbar-color:var(--surface3) transparent;
}

.log-entry{
display:flex;
align-items:flex-start;
gap:10px;
padding:8px 16px;
border-bottom:1px solid var(--border);
font-size:.8rem;
transition:background .1s;
}
.log-entry:last-child{border-bottom:none}
.log-entry:hover{background:var(--surface2)}
.log-entry.log-ok .log-dot{background:var(--green)}
.log-entry.log-warn .log-dot{background:var(--yellow)}
.log-entry.log-err .log-dot{background:var(--red)}

.log-dot{
width:6px;height:6px;
border-radius:50%;
background:var(--text-faint);
flex-shrink:0;
margin-top:5px;
}
.log-time{
color:var(--text-faint);
font-size:.73rem;
white-space:nowrap;
flex-shrink:0;
font-variant-numeric:tabular-nums;
}
.log-msg{color:var(--text);line-height:1.5;flex:1}
.log-empty{
padding:24px 16px;
text-align:center;
color:var(--text-faint);
font-size:.85rem;
}

.live-chip{
display:inline-flex;
align-items:center;
gap:5px;
font-size:.7rem;
font-weight:600;
color:var(--green);
}
.live-dot{
width:6px;height:6px;
border-radius:50%;
background:var(--green);
animation:pulse 1.5s infinite;
}

.btn-primary{
display:inline-flex;align-items:center;gap:8px;
padding:9px 18px;
background:var(--accent);
color:#fff;
border:none;
border-radius:var(--radius-sm);
font-size:.85rem;
font-weight:600;
transition:all .15s;
}
.btn-primary:hover{background:#c96a30;transform:translateY(-1px)}
.btn-primary:active{transform:none}

.btn-ghost{
display:inline-flex;align-items:center;gap:8px;
padding:8px 16px;
background:transparent;
color:var(--text-dim);
border:1px solid var(--border2);
border-radius:var(--radius-sm);
font-size:.85rem;
font-weight:500;
transition:all .15s;
}
.btn-ghost:hover{background:var(--surface2);color:var(--text)}

.btn-logout{
display:flex;align-items:center;gap:8px;
padding:7px 12px;
background:none;
border:none;
color:var(--text-faint);
font-size:.8rem;
border-radius:var(--radius-sm);
transition:all .15s;
width:100%;
margin-top:4px;
}
.btn-logout:hover{background:var(--red-dim);color:var(--red)}

.hamburger{
display:none;
width:36px;height:36px;
border:1px solid var(--border);
background:var(--surface2);
border-radius:var(--radius-sm);
align-items:center;justify-content:center;
flex-direction:column;
gap:4px;
cursor:pointer;
}
.hamburger span{
width:16px;height:2px;
background:var(--text-dim);
border-radius:1px;
transition:all .2s;
}

.overlay{
display:none;
position:fixed;inset:0;
background:rgba(0,0,0,.6);
z-index:90;
backdrop-filter:blur(2px);
}

.refresh-btn{
font-size:.75rem;
color:var(--text-dim);
background:none;
border:1px solid var(--border);
border-radius:var(--radius-sm);
padding:4px 10px;
display:flex;align-items:center;gap:5px;
transition:all .15s;
}
.refresh-btn:hover{background:var(--surface2);color:var(--text)}
.spin{animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.proxy-status-card{
display:flex;
align-items:center;
gap:12px;
padding:14px 16px;
background:var(--surface2);
border-radius:var(--radius-sm);
border:1px solid var(--border);
}
.proxy-status-icon{
width:36px;height:36px;
border-radius:8px;
display:flex;align-items:center;justify-content:center;
background:var(--surface3);
flex-shrink:0;
}
.proxy-status-text{flex:1}
.proxy-status-host{font-size:.85rem;font-weight:600}
.proxy-status-sub{font-size:.75rem;color:var(--text-dim)}

.last-seen-text{
font-size:.78rem;
color:var(--text-dim);
}

.empty-state{
padding:40px 20px;
text-align:center;
color:var(--text-faint);
}
.empty-icon{font-size:2rem;margin-bottom:8px;opacity:.5}
.empty-text{font-size:.85rem}

.tabs{
display:flex;
gap:2px;
background:var(--surface2);
border-radius:var(--radius-sm);
padding:3px;
width:fit-content;
margin-bottom:20px;
}
.tab-btn{
padding:6px 16px;
border-radius:6px;
font-size:.82rem;
font-weight:500;
color:var(--text-dim);
background:none;
border:none;
transition:all .15s;
}
.tab-btn.active{
background:var(--surface);
color:var(--text);
box-shadow:0 1px 4px rgba(0,0,0,.3);
}

.divider{
height:1px;
background:var(--border);
margin:20px 0;
}

.toast{
position:fixed;
bottom:20px;right:20px;
background:var(--surface2);
border:1px solid var(--border2);
border-radius:var(--radius-sm);
padding:10px 16px;
font-size:.85rem;
color:var(--text);
box-shadow:var(--shadow);
z-index:9999;
animation:slideIn .2s ease;
max-width:280px;
}
.toast.success{border-left:3px solid var(--green)}
.toast.error{border-left:3px solid var(--red)}
@keyframes slideIn{from{transform:translateX(20px);opacity:0}to{transform:none;opacity:1}}

@media(max-width:768px){
.sidebar{transform:translateX(-100%)}
.sidebar.open{transform:none}
.main{margin-left:0}
.hamburger{display:flex}
.overlay.open{display:block}
.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
.content{padding:20px 16px}
.top-bar{padding:0 16px}
}