/* ═══════════════════════════════════════════════════════
   NEMSYS — assets/css/main.css
   ═══════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;400;500;600;700&display=swap');

:root {
  --black:      #080808;
  --dark:       #0f0f0f;
  --darker:     #0a0a0a;
  --panel:      #111111;
  --border:     #1e1e1e;
  --red:        #cc0000;
  --red-bright: #ff1111;
  --red-dim:    #660000;
  --red-glow:   rgba(204,0,0,0.15);
  --white:      #f0f0f0;
  --white-dim:  #888888;
  --white-faint:#333333;
  --mono:       'Share Tech Mono', monospace;
  --display:    'Orbitron', monospace;
  --body:       'Rajdhani', sans-serif;
}

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

body {
  background:var(--black);
  color:var(--white);
  font-family:var(--mono);
  font-size:12px;
  min-height:100vh;
  overflow-x:hidden;
}

body::before {
  content:'';
  position:fixed;top:0;left:0;right:0;bottom:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.03) 2px,rgba(0,0,0,0.03) 4px);
  pointer-events:none;z-index:9999;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-track{background:var(--darker);}
::-webkit-scrollbar-thumb{background:var(--red-dim);}

/* ── TOPBAR ── */
.topbar {
  display:flex;align-items:center;padding:0 20px;height:44px;
  background:var(--darker);border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:100;flex-shrink:0;
}
.topbar-logo{font-family:var(--display);font-size:16px;font-weight:900;letter-spacing:8px;color:var(--white);text-shadow:0 0 15px rgba(204,0,0,0.3);position:absolute;left:50%;transform:translateX(-50%);}
.topbar-logo span{color:var(--red);}
.topbar-left{display:flex;align-items:center;gap:8px;}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:10px;}
.topbar-avatar{width:26px;height:26px;border-radius:50%;border:1px solid var(--red);background:var(--red-dim);display:flex;align-items:center;justify-content:center;font-size:10px;cursor:pointer;overflow:hidden;text-decoration:none;color:var(--white);}
.topbar-avatar img{width:100%;height:100%;object-fit:cover;}
.topbar-uname{font-size:10px;letter-spacing:1px;color:var(--white-dim);}
.plan-badge{font-size:7px;letter-spacing:1px;padding:1px 4px;border-radius:2px;}
.plan-badge.active{background:rgba(0,204,68,0.15);color:#00cc44;border:1px solid #00cc44;}
.plan-badge.expired{background:rgba(204,0,0,0.15);color:var(--red);border:1px solid var(--red-dim);}
.plan-badge.lifetime{background:rgba(255,200,0,0.15);color:#ffcc00;border:1px solid #ffcc00;}
.topbar-logout{font-size:9px;letter-spacing:2px;color:var(--white-dim);text-decoration:none;padding:4px 8px;border:1px solid var(--white-faint);transition:all .2s;}
.topbar-logout:hover{color:var(--red);border-color:var(--red-dim);}

/* ── NAVTABS ── */
.navtabs{display:flex;background:var(--darker);border-bottom:1px solid var(--border);padding:0 12px;overflow-x:auto;flex-shrink:0;}
.navtabs::-webkit-scrollbar{display:none;}
.navtab{padding:10px 16px;font-size:10px;letter-spacing:2px;color:var(--white-dim);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;text-decoration:none;display:block;transition:all .2s;}
.navtab:hover{color:var(--white);}
.navtab.active{color:var(--red-bright);border-bottom-color:var(--red);}
.navtab.admin-tab{color:var(--red-dim);}
.navtab.admin-tab.active{color:var(--red-bright);}

/* ── LAYOUT ── */
.app-wrap{display:flex;flex-direction:column;height:100vh;}
.main-layout{display:flex;flex:1;overflow:hidden;}
.sidebar{width:220px;background:var(--darker);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto;}
.content{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;}

/* ── SIDEBAR ── */
.sidebar-section{padding:12px;border-bottom:1px solid var(--border);}
.sidebar-label{font-size:8px;letter-spacing:3px;color:var(--red);margin-bottom:10px;display:flex;align-items:center;gap:6px;}
.sidebar-label::after{content:'';flex:1;height:1px;background:var(--red-dim);opacity:.4;}
.user-item{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--white-faint);}
.user-item:last-child{border-bottom:none;}
.user-avatar-sm{width:28px;height:28px;border-radius:50%;background:transparent;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:9px;flex-shrink:0;overflow:hidden;}
.user-avatar-sm img,.user-avatar-sm svg{width:100%;height:100%;object-fit:cover;}
.user-info-sm{flex:1;overflow:hidden;}
.user-name-sm{color:var(--white);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.user-status-sm{font-size:8px;color:var(--white-dim);}
.status-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.status-dot.online{background:#00cc44;box-shadow:0 0 4px #00cc44;}
.status-dot.offline{background:var(--white-faint);}

/* ── PANELS ── */
.panel{background:var(--panel);border:1px solid var(--border);position:relative;}
.panel-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--border);background:var(--darker);}
.panel-title{font-size:9px;letter-spacing:3px;color:var(--red);}
.panel-body{padding:12px;}

/* ── INPUTS ── */
.nm-input{background:var(--darker);border:1px solid var(--border);color:var(--white);font-family:var(--mono);font-size:12px;padding:10px 14px;outline:none;transition:border-color .2s;width:100%;}
.nm-input:focus{border-color:var(--red);}
.nm-input::placeholder{color:var(--white-faint);}
select.nm-input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23666'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px;}
textarea.nm-input{resize:vertical;min-height:80px;line-height:1.5;}
.input-row{display:flex;gap:8px;align-items:stretch;}
.input-row .nm-input{flex:1;}

/* ── BUTTONS ── */
.nm-btn{background:var(--darker);border:1px solid var(--red-dim);color:var(--white);font-family:var(--mono);font-size:10px;letter-spacing:2px;padding:10px 18px;cursor:pointer;transition:all .2s;white-space:nowrap;}
.nm-btn:hover{background:var(--red-dim);border-color:var(--red);box-shadow:0 0 10px var(--red-glow);}
.nm-btn.red{background:var(--red-dim);border-color:var(--red);}
.nm-btn.red:hover{background:var(--red);}
.copy-btn{background:none;border:1px solid var(--white-faint);color:var(--white-dim);font-family:var(--mono);font-size:9px;letter-spacing:2px;padding:4px 10px;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:4px;}
.copy-btn:hover{border-color:var(--red);color:var(--white);}

/* ── DATA DISPLAY ── */
.data-row{display:flex;align-items:baseline;gap:8px;padding:3px 0;border-bottom:1px solid var(--white-faint);}
.data-row:last-child{border-bottom:none;}
.data-key{font-size:9px;letter-spacing:2px;color:var(--white-dim);width:110px;flex-shrink:0;}
.data-val{font-size:11px;color:var(--white);word-break:break-all;}
.ip-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);}
.ip-cell{background:var(--darker);padding:8px 10px;}
.ip-cell-key{font-size:8px;letter-spacing:2px;color:var(--red);margin-bottom:3px;}
.ip-cell-val{font-size:11px;color:var(--white);word-break:break-all;}
.ip-display{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);margin-bottom:10px;}
.ip-text{font-family:var(--display);font-size:24px;font-weight:700;color:var(--white);letter-spacing:2px;}

/* ── DISCORD ── */
.discord-result{display:flex;align-items:flex-start;gap:12px;padding:12px 0;}
.discord-avatar{width:52px;height:52px;border-radius:50%;border:2px solid var(--red-dim);background:var(--darker);overflow:hidden;flex-shrink:0;}
.discord-avatar img{width:100%;height:100%;object-fit:cover;}
.discord-details{flex:1;}
.discord-name{font-family:var(--display);font-size:16px;color:var(--white);font-weight:700;display:flex;align-items:center;gap:8px;}
.discord-tag{font-size:10px;color:var(--white-dim);margin-bottom:6px;}

/* ── MAP ── */
.map-box{width:100%;height:140px;background:var(--darker);border:1px solid var(--border);margin-bottom:10px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
.map-grid{position:absolute;inset:0;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:20px 20px;opacity:.5;}
.map-coords{position:absolute;bottom:6px;right:8px;font-size:8px;color:var(--red);letter-spacing:1px;}
.map-crosshair{width:12px;height:12px;border:2px solid var(--red);border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 8px var(--red);}
.map-crosshair::before,.map-crosshair::after{content:'';position:absolute;background:var(--red);}
.map-crosshair::before{width:1px;height:20px;left:50%;top:-14px;transform:translateX(-50%);}
.map-crosshair::after{height:1px;width:20px;top:50%;left:-14px;transform:translateY(-50%);}

/* ── PING ── */
.ping-output{background:var(--darker);border:1px solid var(--border);padding:10px;height:200px;overflow-y:auto;font-family:var(--mono);font-size:11px;}
.ping-line{margin-bottom:2px;}
.ping-line.ok{color:#00cc44;}
.ping-line.timeout{color:var(--red);}
.ping-line.info{color:var(--white-dim);}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--red);animation:pulse 1.5s infinite;display:inline-block;}
.pulse.green{background:#00cc44;}
.pulse.idle{background:var(--white-faint);animation:none;}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 4px currentColor;}50%{opacity:.4;box-shadow:none;}}
.status-indicator{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--white-dim);}

/* ── PLANS ── */
.plans-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;}
.plan-card{border:1px solid var(--border);padding:20px;text-align:center;position:relative;transition:border-color .2s;}
.plan-card:hover{border-color:var(--red);}
.plan-card.featured{border-color:var(--red-dim);}
.plan-price{font-family:var(--display);font-size:32px;font-weight:900;color:var(--white);}
.plan-period{font-size:10px;color:var(--white-dim);letter-spacing:2px;margin-bottom:16px;}
.plan-name{font-size:9px;letter-spacing:4px;color:var(--red);margin-bottom:20px;}
.plan-buy-btn{width:100%;background:none;border:1px solid var(--red-dim);color:var(--white);font-family:var(--mono);font-size:9px;letter-spacing:2px;padding:8px;cursor:pointer;transition:all .2s;margin-bottom:8px;display:block;text-decoration:none;text-align:center;}
.plan-buy-btn:hover{background:var(--red-dim);}

/* ── PROFILE ── */
.profile-banner{width:100%;aspect-ratio:4/1;min-height:120px;max-height:240px;background:linear-gradient(135deg,#1a0000 0%,#2a0000 30%,#0a0a0a 100%);border-bottom:2px solid var(--red-dim);position:relative;overflow:hidden;cursor:pointer;}
.profile-banner .banner-default-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(204,0,0,0.08) 1px,transparent 1px),linear-gradient(90deg,rgba(204,0,0,0.08) 1px,transparent 1px);background-size:32px 32px;}
.profile-banner .banner-default-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(8,8,8,0.9) 100%);}
.profile-banner .banner-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:9px;letter-spacing:3px;color:rgba(255,255,255,0.2);z-index:2;pointer-events:none;}
.profile-banner:hover .banner-hint{color:rgba(255,255,255,0.5);background:rgba(0,0,0,0.25);}
.profile-banner img.banner-img{width:100%;height:100%;object-fit:cover;display:block;}
.profile-avatar-area{display:flex;align-items:flex-end;gap:18px;padding:0 18px 12px 18px;margin-top:-48px;position:relative;z-index:3;}
.profile-avatar-lg{width:92px;height:92px;border-radius:50%;border:4px solid var(--panel);background:#0f0f0f;display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;flex-shrink:0;box-shadow:0 0 0 1px var(--red-dim),0 4px 20px rgba(0,0,0,0.8);transition:box-shadow .2s;}
.profile-avatar-lg:hover{box-shadow:0 0 0 2px var(--red),0 4px 24px rgba(204,0,0,0.3);}
.profile-avatar-lg svg,.profile-avatar-lg img{width:100%;height:100%;object-fit:cover;}

/* ── ADMIN ── */
.admin-section-title{font-size:9px;letter-spacing:3px;color:var(--red);border-bottom:1px solid var(--red-dim);padding-bottom:6px;margin-bottom:12px;}
.code-list{background:var(--darker);border:1px solid var(--border);max-height:200px;overflow-y:auto;}
.code-item{display:flex;align-items:center;gap:8px;padding:7px 10px;border-bottom:1px solid var(--white-faint);font-size:10px;}
.code-item:last-child{border-bottom:none;}
.code-val{flex:1;color:var(--white);font-family:var(--mono);}
.code-type{font-size:8px;color:var(--white-dim);}
.code-status.valid{color:#00cc44;}
.code-status.used{color:var(--red);}
.api-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--white-faint);}
.api-label{font-size:9px;letter-spacing:2px;color:var(--white-dim);width:140px;flex-shrink:0;}

/* ── MISC ── */
.warning-box{background:rgba(204,0,0,0.05);border:1px solid var(--red-dim);border-left:3px solid var(--red);padding:8px 12px;font-size:10px;color:var(--white-dim);letter-spacing:.5px;line-height:1.6;}
.sep{width:100%;height:1px;background:var(--border);margin:4px 0;}
.text-red{color:var(--red);}
.text-dim{color:var(--white-dim);}
.text-sm{font-size:9px;letter-spacing:1px;}
.mt-8{margin-top:8px;}
.mb-8{margin-bottom:8px;}
.hidden{display:none!important;}
.full-center{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;padding:40px;color:var(--white-dim);text-align:center;}
.toast{position:fixed;bottom:20px;right:20px;background:var(--panel);border:1px solid var(--red);border-left:3px solid var(--red);padding:10px 16px;font-size:11px;color:var(--white);z-index:9998;opacity:0;transform:translateX(20px);transition:all .3s;pointer-events:none;}
.toast.show{opacity:1;transform:translateX(0);}
.loading-dots::after{content:'...';animation:dots 1s steps(3,end) infinite;}
@keyframes dots{0%{content:'';}33%{content:'.';}66%{content:'..';}100%{content:'...'}}
.corner-tl,.corner-br{position:absolute;width:8px;height:8px;border-color:var(--red-dim);border-style:solid;}
.corner-tl{top:0;left:0;border-width:1px 0 0 1px;}
.corner-br{bottom:0;right:0;border-width:0 1px 1px 0;}
code{background:var(--darker);padding:2px 6px;color:var(--red);font-family:var(--mono);}