.dash-body{
  display:flex;
  min-height:100vh;
  background:var(--bg)
}
.dash-mobile-toggle{
  display:none;
  position:fixed;
  top:.85rem;left:1rem;
  z-index:102;
  width:40px;height:40px;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--text-dim);
  font-size:1.15rem;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  opacity:1;
  transform:translateY(0) scale(1);
  transition:opacity .35s cubic-bezier(.22,1,.36,1),transform .35s cubic-bezier(.22,1,.36,1),background .2s,border-color .2s,box-shadow .25s
}
.dash-mobile-toggle:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(184,200,216,.2);
  box-shadow:0 4px 14px rgba(0,0,0,.3);
  transform:translateY(-1px) scale(1);
  color:var(--text)
}
.dash-mobile-toggle:active{
  background:rgba(184,200,216,.08);
  border-color:var(--accent);
  box-shadow:0 1px 4px rgba(0,0,0,.2);
  transform:scale(.92);
  transition-duration:.08s;
  color:var(--accent)
}
.dash-mobile-toggle.hidden{
  opacity:0;
  transform:scale(.55) rotate(100deg);
  pointer-events:none;
  box-shadow:none
}
.dash-mobile-toggle:not(.hidden){
  transition-delay:.05s
}
.dash-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  z-index:98;
  opacity:0;
  transition:opacity .45s cubic-bezier(.22,1,.36,1)
}
.dash-overlay.show{display:block;opacity:1}
.dash-sidebar{
  position:fixed;
  left:0;top:0;
  width:260px;
  height:100vh;
  background:rgba(8,10,16,.92);
  backdrop-filter:blur(24px) saturate(120%);
  -webkit-backdrop-filter:blur(24px) saturate(120%);
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  z-index:99
}
.dash-sidebar-header{
  padding:1.25rem 1.25rem;
  border-bottom:1px solid var(--border)
}
.dash-logo{
  display:flex;
  align-items:center;
  gap:.6rem;
  font-family:var(--font-display);
  font-size:1.1rem;
  font-weight:800
}
.dash-logo span{color:var(--accent)}
.dash-nav{
  flex:1;
  padding:.75rem;
  display:flex;
  flex-direction:column;
  gap:.25rem
}
.dash-nav-item{
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:.65rem .75rem;
  border-radius:8px;
  font-size:.88rem;
  color:var(--text-dim);
  transition:color .3s var(--ease-smooth),background .3s var(--ease-smooth);
  cursor:pointer
}
.dash-nav-item:hover{
  background:rgba(20,20,25,.6);
  color:var(--text)
}
.dash-nav-item.active{
  background:transparent;
  color:var(--accent);
  font-weight:600;
  position:relative
}
.dash-nav-item.active::before{
  content:'';
  position:absolute;
  left:0;top:50%;
  transform:translateY(-50%);
  width:3px;height:20px;
  background:var(--accent);
  border-radius:0 3px 3px 0;
  box-shadow:0 0 12px var(--accent),0 0 24px rgba(184,200,216,.3)
}
.dash-nav-item.active i{opacity:1;color:var(--accent)}
.dash-nav-item i{width:20px;text-align:center;opacity:.7}
.dash-sidebar-footer{
  padding:.75rem;
  border-top:1px solid var(--border);
  display:flex;
  align-items:center;
  gap:.75rem
}
.dash-user-mini{
  flex:1;
  display:flex;
  align-items:center;
  gap:.65rem
}
.dash-user-avatar{
  width:34px;height:34px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--accent),#788898);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.8rem;
  font-weight:700;
  color:#fff;
  flex-shrink:0
}
.dash-user-name{
  font-size:.82rem;
  font-weight:600;
  line-height:1.2
}
.dash-user-tier{
  font-size:.68rem;
  font-family:var(--font-mono);
  color:var(--accent);
  font-weight:600
}
.dash-logout-btn{
  width:34px;height:34px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-muted);
  transition:all .2s;
  background:var(--surface);
  border:1px solid var(--border)
}
.dash-logout-btn:hover{color:#ff5282;border-color:rgba(255,82,130,.3)}
.dash-logout-btn:active{transform:scale(.92)!important}
.dash-main{
  margin-left:260px;
  flex:1;
  overflow-y:auto;
  height:100vh
}
#app-content{
  flex:1;
  min-width:0
}
.dash-content{
  padding:2rem 2.5rem
}
.dash-view{display:none;will-change:transform,opacity}
.dash-view.active{display:block;animation:viewIn .4s var(--ease-smooth) both}
.dash-topbar{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:1rem;
  margin-bottom:1.5rem
}
.dash-greeting{
  font-family:var(--font-display);
  font-size:1.5rem;
  font-weight:700
}
.dash-greeting span{color:var(--accent)}
.dash-top-sub{
  font-size:.9rem;
  color:var(--text-dim);
  margin-top:.2rem
}
.dash-upgrade-btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.55rem 1.2rem;
  border-radius:8px;
  background:linear-gradient(135deg,var(--accent),#788898);
  color:#fff;
  font-weight:600;
  font-size:.85rem;
  transition:all .25s
}
.dash-upgrade-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 16px rgba(184,200,216,.35)
}
.dash-upgrade-btn:active{transform:scale(.96)!important}
.dash-apikey-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1rem 1.25rem;
  border-radius:12px;
  margin-bottom:1.5rem;
  flex-wrap:wrap;
  gap:.75rem
}
.dash-apikey-left{
  display:flex;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap
}
.dash-apikey-label{
  font-size:.8rem;
  color:var(--text-dim);
  white-space:nowrap
}
.dash-apikey-label i{color:var(--accent);margin-right:.35rem}
.dash-apikey-value{
  font-family:var(--font-mono);
  font-size:.88rem;
  color:var(--text);
  word-break:break-all
}
.dash-apikey-actions{
  display:flex;
  gap:.5rem
}
.dash-btn-icon{
  width:36px;height:36px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  color:var(--text-dim);
  font-size:.9rem;
  transition:color .3s var(--ease-smooth),border-color .3s var(--ease-smooth)
}
.dash-btn-icon:hover{color:var(--accent);border-color:var(--accent)}
.dash-btn-icon:active{transform:scale(.92)!important}
.dash-stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1rem;
  margin-bottom:2rem
}
.dash-stat-card{
  padding:1.25rem;
  border-radius:12px;
  display:flex;
  gap:1rem;
  align-items:flex-start;
  transition:transform .4s var(--ease-smooth),border-color .4s var(--ease-smooth),box-shadow .4s var(--ease-smooth)
}
.dash-stat-card:hover{
  transform:translateY(-4px);
  border-color:rgba(184,200,216,.2);
  box-shadow:0 12px 40px rgba(0,0,0,.3)
}
.dash-stat-icon{
  width:40px;height:40px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1rem;
  flex-shrink:0
}
.dash-stat-icon.cyan{background:var(--accent-dim);color:var(--accent)}
.dash-stat-icon.pink{background:rgba(255,82,130,.08);color:#ff5282}
.dash-stat-icon.purple{background:rgba(168,85,247,.08);color:#a855f7}
.dash-stat-body{flex:1;min-width:0}
.dash-stat-num{
  font-family:var(--font-mono);
  font-size:1.5rem;
  font-weight:700;
  line-height:1.2
}
.dash-stat-label{
  font-size:.78rem;
  color:var(--text-dim);
  margin-top:.15rem
}
.dash-stat-bar{
  height:4px;
  background:rgba(255,255,255,.06);
  border-radius:4px;
  margin-top:.5rem;
  overflow:hidden
}
.dash-stat-fill{
  height:100%;
  border-radius:4px;
  background:linear-gradient(90deg,var(--accent),#788898);
  transition:width .8s var(--ease-smooth)
}
.dash-section-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:.75rem
}
.dash-section-title{
  font-family:var(--font-display);
  font-size:1rem;
  font-weight:600;
  color:var(--text-dim)
}
.usage-reset-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 12px;
  font-size:.78rem;
  font-weight:500;
  font-family:var(--font-body);
  color:var(--text-muted);
  background:transparent;
  border:1px solid rgba(184,200,216,.12);
  border-radius:6px;
  cursor:pointer;
  transition:all .25s var(--ease-smooth)
}
.usage-reset-btn:hover{
  color:#ff6b6b;
  border-color:rgba(255,107,107,.25);
  background:rgba(255,70,70,.06)
}
.usage-reset-btn:active{transform:scale(.94)}
.usage-reset-btn i{font-size:.72rem}
.dash-actions-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:.85rem;
  margin-bottom:2rem
}
.dash-action-card{
  padding:1.25rem;
  border-radius:12px;
  text-align:center;
  transition:transform .35s var(--ease-out-quart),border-color .35s var(--ease-out-quart),box-shadow .35s var(--ease-out-quart);
  cursor:pointer
}
.dash-action-card:hover{
  transform:translateY(-4px);
  border-color:var(--accent);
  box-shadow:0 12px 32px rgba(0,0,0,.25)
}
.dash-action-icon{
  font-size:1.5rem;
  color:var(--accent);
  margin-bottom:.5rem
}
.dash-action-text{
  font-size:.85rem;
  font-weight:500;
  color:var(--text-dim)
}
/* ===== Rate Limit Card (Sisa Kuota) ===== */
.rl-card{
  padding:1.25rem;
  border-radius:12px;
  margin-bottom:1.5rem;
  text-align:center
}
.rl-remaining{
  font-family:var(--font-display);
  font-size:2.2rem;
  font-weight:800;
  color:var(--text);
  line-height:1.2
}
.rl-detail{
  font-size:.82rem;
  color:var(--text-dim);
  margin-top:.2rem;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.35rem
}
.rl-dot{font-size:1rem}
.rl-reset{
  font-size:.72rem;
  color:var(--text-muted);
  margin-top:.35rem
}
/* ===== End Rate Limit ===== */

/* ===== Usage Overview ===== */
.usage-section{
  padding:1.25rem;
  border-radius:12px;
  margin-bottom:1.5rem
}
.usage-stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:.75rem;
  margin-bottom:1rem
}
.usage-stat-card{
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:.85rem 1rem;
  border-radius:10px;
  background:rgba(255,255,255,.02);
  border:1px solid var(--border)
}
.usage-stat-icon{
  width:38px;height:38px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.9rem;
  flex-shrink:0
}
.usage-stat-icon.cyan{background:rgba(16,185,129,.1);color:#10b981}
.usage-stat-icon.purple{background:rgba(139,92,246,.1);color:#8b5cf6}
.usage-stat-icon.pink{background:rgba(236,72,153,.1);color:#ec4899}
.usage-stat-icon.orange{background:rgba(245,158,11,.1);color:#f59e0b}
.usage-stat-body{flex:1;min-width:0}
.usage-stat-num{
  font-family:var(--font-mono);
  font-size:1.25rem;
  font-weight:700;
  line-height:1.2;
  color:var(--text)
}
.usage-stat-label{
  font-size:.7rem;
  color:var(--text-muted);
  margin-top:-1px
}
.usage-chart-wrap{
  background:rgba(255,255,255,.02);
  border:1px solid var(--border);
  border-radius:10px;
  padding:1rem;
  margin-bottom:1rem
}
.usage-chart-header{
  font-size:.82rem;
  font-weight:600;
  color:var(--text-dim);
  margin-bottom:.75rem;
  display:flex;
  align-items:center;
  gap:.5rem
}
.usage-chart-header i{color:var(--accent)}
.usage-chart-container{
  width:100%;
  position:relative
}
#usageChart{
  display:block;
  width:100%;
  height:120px
}
.usage-chart-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  height:120px;
  color:var(--text-muted);
  user-select:none
}
.usage-chart-empty i{
  font-size:1.4rem;
  opacity:.3;
  margin-bottom:2px
}
.usage-chart-empty p{
  font-size:.85rem;
  font-weight:500;
  margin:0;
  color:var(--text-dim)
}
.usage-chart-empty span{
  font-size:.72rem;
  opacity:.5
}
.usage-top-wrap{
  background:rgba(255,255,255,.02);
  border:1px solid var(--border);
  border-radius:10px;
  padding:1rem
}
.usage-top-header{
  font-size:.82rem;
  font-weight:600;
  color:var(--text-dim);
  margin-bottom:.75rem;
  display:flex;
  align-items:center;
  gap:.5rem
}
.usage-top-header i{color:var(--accent)}
.usage-top-body{
  display:flex;
  flex-direction:column;
  gap:.4rem
}
.usage-top-empty{
  text-align:center;
  padding:1.5rem;
  color:var(--text-muted);
  font-size:.82rem
}
.usage-top-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  padding:.45rem 0;
  border-bottom:1px solid rgba(255,255,255,.03)
}
.usage-top-item:last-child{border-bottom:none}
.usage-top-left{
  display:flex;
  align-items:center;
  gap:.6rem;
  flex:1;
  min-width:0
}
.usage-top-path{
  font-family:var(--font-mono);
  font-size:.78rem;
  color:var(--text-dim);
  word-break:break-all
}
.usage-top-path code{font-size:inherit;color:inherit}
.usage-top-right{
  display:flex;
  align-items:center;
  gap:.6rem;
  flex-shrink:0
}
.usage-top-bar-wrap{
  width:60px;
  height:4px;
  background:rgba(255,255,255,.06);
  border-radius:4px;
  overflow:hidden
}
.usage-top-bar{
  height:100%;
  border-radius:4px;
  background:linear-gradient(90deg,var(--accent),#788898);
  transition:width .8s var(--ease-smooth)
}
.usage-top-count{
  font-family:var(--font-mono);
  font-size:.78rem;
  font-weight:600;
  color:var(--text);
  min-width:28px;
  text-align:right
}
.usage-top-time{
  font-size:.68rem;
  color:var(--text-muted);
  white-space:nowrap;
  min-width:40px;
  text-align:right
}

@media(max-width:1024px){
  .usage-stats-grid{grid-template-columns:repeat(2,1fr)}
  .usage-top-bar-wrap{width:40px}
}
@media(max-width:768px){
  .usage-section{padding:1rem}
  .usage-chart-container{overflow-x:auto}
  .usage-top-item{flex-direction:column;align-items:flex-start;gap:.35rem;padding:.55rem 0}
  .usage-top-right{width:100%;justify-content:flex-end}
  .usage-top-bar-wrap{width:50px}
}
@media(max-width:480px){
  .usage-stats-grid{grid-template-columns:repeat(2,1fr);gap:.5rem}
  .usage-stat-card{padding:.65rem .75rem;gap:.5rem}
  .usage-stat-icon{width:32px;height:32px;font-size:.78rem}
  .usage-stat-num{font-size:1.05rem}
  .usage-stat-label{font-size:.62rem}
  .usage-chart-wrap{padding:.75rem}
  .usage-chart-header{font-size:.75rem}
  #usageChart{height:160px}
  .usage-top-wrap{padding:.75rem}
  .usage-top-header{font-size:.75rem}
  .usage-top-path{font-size:.72rem}
  .usage-top-count{font-size:.72rem}
  .usage-top-time{font-size:.62rem;min-width:35px}
  .usage-top-item{padding:.4rem 0}
  .usage-top-right{flex-wrap:wrap;gap:.4rem}
}
@media(min-width:481px) and (max-width:768px){
  .usage-stats-grid{grid-template-columns:repeat(4,1fr);gap:.5rem}
  .usage-stat-card{padding:.6rem}
  .usage-stat-icon{width:30px;height:30px;font-size:.75rem}
  .usage-stat-num{font-size:1rem}
}
/* ===== End Usage Overview ===== */

.dash-activity-card,.dash-activity-full{
  padding:1.25rem;
  border-radius:12px;
  min-height:160px
}
.dash-activity-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:2.5rem 1rem;
  color:var(--text-muted);
  text-align:center
}
.dash-activity-empty i{font-size:2.5rem;margin-bottom:.75rem;opacity:.4}
.dash-activity-empty p{font-size:.9rem}
.dash-activity-item{
  display:flex;
  align-items:center;
  gap:.85rem;
  padding:.7rem 0;
  border-bottom:1px solid var(--border);
  font-size:.85rem
}
.dash-activity-item:last-child{border-bottom:none}
.dash-activity-method{
  font-family:var(--font-mono);
  font-size:.72rem;
  font-weight:600;
  padding:.2rem .5rem;
  border-radius:4px;
  min-width:48px;
  text-align:center
}
.dash-activity-method.get{background:rgba(16,185,129,.1);color:#10b981}
.dash-activity-method.post{background:rgba(245,158,11,.1);color:#f59e0b}
.dash-activity-method.put{background:rgba(59,130,246,.1);color:#3b82f6}
.dash-activity-method.del{background:rgba(239,68,68,.1);color:#ef4444}
.dash-activity-path{
  color:var(--text-dim);
  font-family:var(--font-mono);
  font-size:.82rem;
  flex:1;
  word-break:break-all
}
.dash-activity-status{
  font-family:var(--font-mono);
  font-size:.72rem;
  padding:.2rem .5rem;
  border-radius:4px;
  font-weight:600
}
.dash-activity-status.ok{background:rgba(16,185,129,.1);color:#10b981}
.dash-activity-status.err{background:rgba(239,68,68,.1);color:#ef4444}
.dash-activity-time{
  font-size:.75rem;
  color:var(--text-muted);
  white-space:nowrap
}
.dash-loading{
  text-align:center;
  padding:2rem;
  color:var(--text-muted);
  font-size:.9rem
}
.dash-endpoint-list{
  padding:1.25rem;
  border-radius:12px
}
.dash-endpoint-item{
  display:flex;
  align-items:center;
  gap:.85rem;
  padding:.7rem 0;
  border-bottom:1px solid var(--border);
  font-size:.85rem
}
.dash-endpoint-item:last-child{border-bottom:none}
.dash-settings-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:1.25rem
}
.dash-settings-card{
  padding:1.5rem;
  border-radius:12px
}
.dash-settings-card h3{
  font-family:var(--font-display);
  font-size:1rem;
  font-weight:600;
  margin-bottom:1rem
}
.dash-form-group{
  margin-bottom:1rem
}
.dash-form-group label{
  display:block;
  font-size:.82rem;
  color:var(--text-dim);
  margin-bottom:.35rem
}
.dash-input{
  width:100%;
  padding:.75rem 1rem;
  border-radius:8px;
  background:rgba(0,0,0,.25);
  border:1px solid var(--border);
  font-size:.9rem;
  color:var(--text);
  transition:border-color .25s
}
.dash-input:focus{border-color:var(--accent)}
.dash-input::placeholder{color:var(--text-muted)}
.dash-btn-primary{
  padding:.65rem 1.25rem;
  border-radius:8px;
  background:linear-gradient(135deg,var(--accent),#788898);
  color:#fff;
  font-weight:600;
  font-size:.85rem;
  transition:transform .3s var(--ease-smooth),box-shadow .3s var(--ease-smooth);
  cursor:pointer
}
.dash-btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(184,200,216,.35)
}
.dash-btn-primary:active{transform:scale(.96)!important}
.dash-modal-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.85);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  z-index:200;
  align-items:center;
  justify-content:center;
  padding:1.5rem
}
.dash-modal-overlay.show{display:flex}
.dash-modal{
  width:100%;
  max-width:480px;
  border-radius:16px;
  padding:1.5rem;
  animation:modalIn .4s var(--ease-spring) both
}
@keyframes modalIn{
  from{transform:scale(.92) translateY(20px);opacity:0}
  to{transform:scale(1) translateY(0);opacity:1}
}
.dash-modal-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:1rem
}
.dash-modal-header h3{
  font-family:var(--font-display);
  font-size:1.1rem;
  font-weight:600
}
.dash-modal-close{
  width:32px;height:32px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-muted);
  font-size:1rem;
  transition:all .2s
}
.dash-modal-close:hover{color:var(--text);background:rgba(255,255,255,.05)}
.dash-dropzone{
  border:2px dashed var(--border);
  border-radius:12px;
  padding:2.5rem 2rem;
  text-align:center;
  cursor:pointer;
  transition:all .25s
}
.dash-dropzone:hover,.dash-dropzone.dragover{
  border-color:var(--accent);
  background:var(--accent-dim)
}
.dash-dropzone i{
  font-size:2.5rem;
  color:var(--accent);
  margin-bottom:.5rem
}
.dash-dropzone p{font-size:.9rem;color:var(--text-dim)}
.dash-dropzone span{font-size:.78rem;color:var(--text-muted);display:block;margin-top:.25rem}

/* === Bot Monitor === */

  color:var(--text);
  word-break:break-all;
  flex:1
}
.bot-url-status{font-size:1rem;transition:color .3s}
.bot-status-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.5rem;
  border-radius:14px;
  margin-bottom:1.25rem;
  border:1px solid var(--border);
  transition:border-color .3s;
  flex-wrap:wrap;
  gap:1rem
}
.bot-status-left{display:flex;align-items:center;gap:1rem}
.bot-pulse{
  width:52px;height:52px;
  border-radius:50%;
  background:#6b7280;
  transition:all .5s var(--ease-smooth),background .3s,box-shadow .3s;
  animation:botPulse 2.5s var(--ease-smooth) infinite;
  flex-shrink:0
}
@keyframes botPulse{
  0%,100%{box-shadow:0 0 0 0 currentColor;opacity:1}
  50%{box-shadow:0 0 0 18px rgba(255,255,255,.04)}
}
.bot-status-label{
  font-family:var(--font-mono);
  font-size:1.1rem;
  font-weight:700;
  letter-spacing:.05em;
  transition:color .3s
}
.bot-status-sub{font-size:.82rem;color:var(--text-dim);margin-top:.15rem}
.bot-status-right{display:flex;gap:1.25rem;flex-wrap:wrap}
.bot-info-item{text-align:center;min-width:60px}
.bot-info-label{display:block;font-size:.68rem;text-transform:uppercase;color:var(--text-muted);letter-spacing:.05em;margin-bottom:2px}
.bot-info-item span:last-child{font-family:var(--font-mono);font-size:.82rem;font-weight:600}
.bot-stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1rem;
  margin-bottom:1.25rem
}
.bot-detail-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1rem
}
.bot-detail-card{
  border-radius:12px;
  padding:1.25rem
}
.bot-detail-header{
  font-size:.85rem;
  font-weight:600;
  font-family:var(--font-display);
  margin-bottom:1rem;
  display:flex;
  align-items:center;
  gap:.5rem;
  color:var(--text-dim)
}
.bot-detail-header i{color:var(--accent)}
.bot-detail-body{display:flex;flex-direction:column;gap:.5rem}
.bot-mem-row{
  display:flex;
  justify-content:space-between;
  font-size:.82rem;
  color:var(--text-dim)
}
.bot-mem-val{font-family:var(--font-mono);color:var(--text);font-weight:600}
.bot-mem-bar{
  height:4px;
  background:rgba(255,255,255,.06);
  border-radius:4px;
  overflow:hidden
}
.bot-mem-fill{
  height:100%;
  border-radius:4px;
  background:linear-gradient(90deg,var(--accent),#788898);
  transition:width .7s var(--ease-smooth)
}
.bot-sys-row{
  display:flex;
  justify-content:space-between;
  font-size:.85rem;
  padding:.35rem 0;
  border-bottom:1px solid var(--border);
  color:var(--text-dim)
}
.bot-sys-row:last-child{border-bottom:none}
.bot-sys-row span:last-child{color:var(--text);font-family:var(--font-mono);font-size:.8rem}
/* === Jadibot === */
.bot-jadibot-warning{
  display:flex;
  gap:.85rem;
  padding:1rem 1.25rem;
  border-radius:10px;
  margin-bottom:1rem;
  border:1px solid rgba(255,159,10,.15);
  background:rgba(255,159,10,.04)
}
.bot-jadibot-warning-icon{
  width:36px;height:36px;
  border-radius:10px;
  background:rgba(255,159,10,.1);
  color:#f59e0b;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  font-size:1rem
}
.bot-jadibot-warning-body strong{
  font-size:.85rem;
  color:#f59e0b;
  display:block;
  margin-bottom:2px
}
.bot-jadibot-warning-body p{
  font-size:.8rem;
  color:var(--text-dim);
  line-height:1.4
}
.bot-jadibot-form{
  padding:1.25rem;
  border-radius:12px;
  margin-bottom:1rem
}
.bot-jadibot-form-row{
  display:flex;
  gap:.75rem;
  align-items:center;
  flex-wrap:wrap
}
.bot-jadibot-form-row .dash-input{
  flex:1;
  min-width:180px
}
.bot-jadibot-stop-btn{
  padding:.65rem 1rem;
  border-radius:8px;
  background:rgba(255,82,130,.08);
  color:#ff5282;
  font-weight:600;
  font-size:.85rem;
  cursor:pointer;
  transition:all .25s;
  display:inline-flex;
  align-items:center;
  gap:.4rem
}
.bot-jadibot-stop-btn:hover{
  background:rgba(255,82,130,.15);
  transform:translateY(-1px)
}
.bot-jadibot-stop-btn:disabled{
  opacity:.4;
  cursor:not-allowed;
  transform:none
}
.bot-jadibot-form-status{
  font-size:.82rem;
  margin-top:.65rem;
  min-height:1.2em;
  color:var(--text-dim)
}
.bot-jadibot-form-status.success{color:#00ff88}
.bot-jadibot-form-status.error{color:#ff5282}
.bot-jadibot-form-status.pending{color:#f59e0b}
.bot-jadibot-pairing{
  padding:1.25rem;
  border-radius:12px;
  margin-bottom:1rem;
  text-align:center;
  border:1px solid rgba(0,255,136,.15)
}
.bot-jadibot-pairing-header{
  font-size:.9rem;
  font-weight:600;
  margin-bottom:.75rem;
  color:var(--text-dim)
}
.bot-jadibot-pairing-header i{color:var(--accent);margin-right:.35rem}
.bot-jadibot-pairing-code{
  font-family:var(--font-mono);
  font-size:1.6rem;
  font-weight:700;
  letter-spacing:.1em;
  color:#00ff88;
  background:rgba(0,255,136,.06);
  padding:.75rem 1rem;
  border-radius:8px;
  display:inline-block;
  word-break:break-all
}
.bot-jadibot-pairing-steps{
  margin-top:1rem;
  font-size:.8rem;
  color:var(--text-dim);
  text-align:left;
  line-height:1.6;
  padding:.75rem;
  background:rgba(255,255,255,.02);
  border-radius:8px
}
.bot-jadibot-list{
  padding:1.25rem;
  border-radius:12px;
  margin-bottom:1rem
}
.bot-jadibot-list-header{
  font-size:.9rem;
  font-weight:600;
  margin-bottom:.75rem;
  color:var(--text-dim);
  display:flex;
  align-items:center;
  gap:.5rem
}
.bot-jadibot-list-header i{color:var(--accent)}
.bot-jadibot-list-empty{
  font-size:.85rem;
  color:var(--text-muted);
  text-align:center;
  padding:1rem
}
.bot-jadibot-list-body{
  display:flex;
  flex-direction:column;
  gap:.6rem
}
.jadibot-list-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.7rem 1rem;
  border-radius:10px;
  gap:.75rem
}
.jadibot-list-info{flex:1;min-width:0}
.jadibot-list-number{
  font-family:var(--font-mono);
  font-size:.85rem;
  font-weight:600;
  color:var(--text)
}
.jadibot-list-meta{
  display:flex;
  gap:1rem;
  font-size:.75rem;
  color:var(--text-muted);
  margin-top:2px
}
.jadibot-list-stop{
  padding:.45rem .75rem;
  border-radius:6px;
  background:rgba(255,82,130,.08);
  color:#ff5282;
  font-size:.78rem;
  font-weight:600;
  cursor:pointer;
  transition:all .2s;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  flex-shrink:0
}
.jadibot-list-stop:hover{
  background:rgba(255,82,130,.15);
  transform:translateY(-1px)
}

.bot-jadibot-owner{
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:.85rem 1.1rem;
  border-radius:10px;
  font-size:.85rem;
  color:var(--text-dim)
}
.bot-jadibot-owner i{color:var(--accent)}
.bot-jadibot-owner a{
  color:var(--accent);
  font-weight:600;
  font-family:var(--font-mono);
  font-size:.8rem
}
.bot-jadibot-owner a:hover{text-decoration:underline}
.bot-jadibot-connected{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:1rem 1.25rem;
  border-radius:12px;
  margin-bottom:1rem;
  border:1px solid rgba(0,255,136,.15);
  background:rgba(0,255,136,.04)
}
.bot-jadibot-connected-icon{
  font-size:1.6rem;
  color:#00ff88;
  flex-shrink:0
}
.bot-jadibot-connected-body{flex:1}
.bot-jadibot-connected-label{
  font-size:.8rem;
  font-weight:600;
  color:#00ff88;
  margin-bottom:.15rem
}
.bot-jadibot-connected-number{
  font-family:var(--font-mono);
  font-size:.95rem;
  font-weight:700;
  color:var(--text);
  margin-bottom:.2rem
}
.bot-jadibot-connected-uptime{
  font-size:.75rem;
  color:var(--text-dim);
  display:flex;
  align-items:center;
  gap:.35rem
}
.bot-jadibot-connected-uptime i{color:var(--accent)}
.jadibot-list-actions{
  display:flex;
  gap:.45rem;
  flex-shrink:0
}
.jadibot-list-delete{
  padding:.45rem .75rem;
  border-radius:6px;
  background:rgba(255,50,50,.1);
  color:#ff5555;
  font-size:.78rem;
  font-weight:600;
  cursor:pointer;
  transition:all .2s;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  gap:.35rem
}
.jadibot-list-delete:hover{
  background:rgba(255,50,50,.18);
  transform:translateY(-1px)
}
.jadibot-list-start{
  padding:.45rem .75rem;
  border-radius:6px;
  background:rgba(91,127,255,.1);
  color:#5B7FFF;
  font-size:.78rem;
  font-weight:600;
  cursor:pointer;
  transition:all .2s;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  gap:.35rem
}
.jadibot-list-start:hover{
  background:rgba(91,127,255,.18);
  transform:translateY(-1px)
}
/* === Admin Panel === */
.admin-stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1rem;
  margin-bottom:1.25rem
}
.admin-stat-card{
  padding:1rem 1.25rem;
  border-radius:12px;
  display:flex;
  align-items:center;
  gap:1rem;
  text-align:left
}
.admin-stat-icon{
  width:42px;height:42px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
  flex-shrink:0
}
.admin-stat-icon.cyan{background:rgba(16,185,129,.12);color:#10b981}
.admin-stat-icon.purple{background:rgba(139,92,246,.12);color:#8b5cf6}
.admin-stat-icon.pink{background:rgba(236,72,153,.12);color:#ec4899}
.admin-stat-icon.orange{background:rgba(245,158,11,.12);color:#f59e0b}
.admin-stat-body{flex:1}
.admin-stat-val{
  font-family:var(--font-mono);
  font-size:1.4rem;
  font-weight:700;
  color:var(--text)
}
.admin-stat-label{
  font-size:.75rem;
  color:var(--text-muted);
  margin-top:-2px
}

.admin-section-card{
  padding:1.25rem;
  border-radius:12px;
  overflow:hidden
}
.admin-section-card .section-header{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin-bottom:1rem;
  font-family:var(--font-display);
  font-weight:600;
  font-size:1rem
}
.admin-section-card .section-header i{color:var(--accent)}
.admin-section-card .section-header .badge-count{
  margin-left:auto;
  font-size:.7rem;
  color:var(--text-muted);
  font-weight:400;
  font-family:var(--font-body)
}

.admin-search-bar{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin-bottom:1rem
}
.admin-search-bar input{
  flex:1;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius:8px;
  padding:.6rem .8rem .6rem 2.2rem;
  color:var(--text);
  font-size:.82rem;
  font-family:var(--font-body);
  outline:none;
  transition:border-color .2s
}
.admin-search-bar input:focus{border-color:var(--accent)}
.admin-search-bar input::placeholder{color:var(--text-muted)}
.admin-search-bar .search-icon{
  position:absolute;
  margin-left:.75rem;
  color:var(--text-muted);
  font-size:.78rem;
  pointer-events:none
}

.admin-tabs{
  display:flex;
  gap:.5rem;
  margin-bottom:1.25rem;
  border-bottom:1px solid var(--border);
  padding-bottom:.25rem;
  -webkit-overflow-scrolling:touch
}
.admin-tab{
  padding:.45rem 1rem;
  border-radius:6px 6px 0 0;
  font-size:.82rem;
  font-weight:500;
  color:var(--text-dim);
  cursor:pointer;
  transition:all .2s;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  display:flex;
  align-items:center;
  gap:.4rem;
  background:none
}
.admin-tab:hover{color:var(--text)}
.admin-tab.active{
  color:var(--accent);
  border-bottom-color:var(--accent)
}
.admin-tab .tab-badge{
  font-size:.65rem;
  background:rgba(255,255,255,.06);
  padding:.1rem .4rem;
  border-radius:4px;
  color:var(--text-muted);
  font-weight:600
}
.admin-tab.active .tab-badge{
  background:rgba(184,200,216,.12);
  color:var(--accent)
}

.admin-tab-content{display:none;animation:tabFadeIn .3s var(--ease-smooth)}
.admin-tab-content.active{display:block}
@keyframes tabFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

.admin-live-indicator{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-size:.72rem;
  color:var(--text-muted);
  padding:.3rem .65rem;
  border-radius:6px;
  background:rgba(16,185,129,.06);
  border:1px solid rgba(16,185,129,.1)
}
.admin-live-dot{
  width:7px;height:7px;
  border-radius:50%;
  background:#10b981;
  animation:adminLivePulse 2s ease-in-out infinite
}
@keyframes adminLivePulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.4;transform:scale(.8)}
}
.admin-live-time{
  font-family:var(--font-mono);
  font-size:.7rem;
  color:var(--text-muted)
}

.admin-users-loading{
  text-align:center;
  padding:2rem;
  color:var(--text-muted)
}
.admin-users-table-wrap{
  overflow-x:auto
}
.admin-users-table{
  width:100%;
  border-collapse:collapse;
  font-size:.82rem
}
.admin-users-table th{
  text-align:left;
  padding:.65rem .5rem;
  color:var(--text-muted);
  font-weight:600;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  background:var(--surface);
  z-index:1
}
.admin-users-table td{
  padding:.6rem .5rem;
  border-bottom:1px solid rgba(255,255,255,.03);
  color:var(--text-dim);
  vertical-align:middle
}
.admin-users-table tr:hover td{
  background:rgba(255,255,255,.02)
}
.admin-cell-user{
  font-weight:600;
  color:var(--text)
}
.admin-cell-key code{
  font-family:var(--font-mono);
  font-size:.72rem;
  color:var(--text-dim);
  word-break:break-all
}
.admin-cell-date{
  white-space:nowrap;
  font-size:.75rem
}
.admin-cell-actions{
  white-space:nowrap;
  display:flex;
  gap:.3rem
}
.admin-cell-actions button{
  width:30px;height:30px;
  border-radius:6px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:.75rem;
  cursor:pointer;
  border:none;
  transition:all .2s
}
.admin-cell-actions .admin-action-changepw{
  background:rgba(184,200,216,.08);
  color:var(--accent)
}
.admin-cell-actions .admin-action-changepw:hover{
  background:rgba(184,200,216,.15)
}
.admin-cell-actions .admin-action-delete{
  background:rgba(255,82,130,.08);
  color:#ff5282
}
.admin-cell-actions .admin-action-delete:hover{
  background:rgba(255,82,130,.15)
}

.admin-method{
  font-family:var(--font-mono);
  font-size:.68rem;
  font-weight:600;
  padding:.15rem .4rem;
  border-radius:4px
}
.admin-method-get{background:rgba(16,185,129,.1);color:#10b981}
.admin-method-post{background:rgba(245,158,11,.1);color:#f59e0b}
.admin-method-put{background:rgba(59,130,246,.1);color:#3b82f6}
.admin-method-del{background:rgba(239,68,68,.1);color:#ef4444}
.admin-cell-time{
  white-space:nowrap;
  font-size:.75rem;
  color:var(--text-muted);
  font-family:var(--font-mono)
}
.admin-cell-endpoint code{
  font-family:var(--font-mono);
  font-size:.72rem;
  color:var(--text-dim);
  word-break:break-all
}
.admin-cell-ip{
  font-size:.72rem;
  color:var(--text-muted);
  font-family:var(--font-mono)
}
.admin-cell-endpoint{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.admin-susp-content{min-height:60px}
.admin-susp-empty{
  text-align:center;
  padding:1.5rem;
  color:var(--text-muted);
  font-size:.85rem
}
.admin-susp-item{
  display:flex;
  gap:.75rem;
  padding:.7rem 0;
  border-bottom:1px solid rgba(255,255,255,.03)
}
.admin-susp-item:last-child{border-bottom:none}
.admin-susp-badge{
  padding:.2rem .55rem;
  border-radius:4px;
  font-size:.65rem;
  font-weight:600;
  white-space:nowrap;
  height:fit-content;
  margin-top:2px
}
.admin-susp-body{flex:1;min-width:0}
.admin-susp-user{
  font-size:.8rem;
  font-weight:600;
  color:var(--text);
  display:flex;
  align-items:center;
  gap:.35rem
}
.admin-susp-user i{color:var(--accent);font-size:.7rem}
.admin-susp-reason{
  font-size:.73rem;
  color:var(--text-dim);
  margin-top:2px
}
.admin-susp-detail{
  font-size:.7rem;
  color:var(--text-muted);
  margin-top:2px;
  font-family:var(--font-mono)
}

.admin-badge{
  font-size:.68rem;
  color:var(--accent);
  font-weight:600;
  padding:.2rem .5rem;
  background:var(--accent-dim);
  border-radius:4px
}

@keyframes adminRowFlash{
  0%{background:rgba(184,200,216,.08)}
  100%{background:transparent}
}
.admin-row-new td{animation:adminRowFlash 1.5s ease-out}

/* === 1024px — Tablet Landscape === */
@media(max-width:1024px){
  .admin-stats-grid{grid-template-columns:repeat(2,1fr)}
  .admin-section-card{padding:1rem}
  .admin-product-card{padding:.85rem 1rem}
  .admin-product-name{font-size:.82rem}
  .admin-tab{font-size:.8rem;padding:.4rem .85rem}
}

@media(max-width:768px){
  .admin-stats-grid{grid-template-columns:repeat(2,1fr)}
  .admin-tabs{overflow-x:auto;gap:.35rem;padding-bottom:.35rem;scrollbar-width:none;-ms-overflow-style:none;flex-wrap:nowrap}
  .admin-tabs::-webkit-scrollbar{display:none}
  .admin-tab{font-size:.78rem;padding:.4rem .7rem;white-space:nowrap;flex-shrink:0}
  .admin-section-card{padding:.85rem}
  .admin-search-bar input{font-size:.8rem;padding:.5rem .7rem .5rem 2rem}
  .admin-product-card{flex-direction:column;align-items:flex-start;gap:.5rem;padding:.85rem}
  .admin-product-actions{width:100%;justify-content:flex-end;margin-top:.35rem}
  .admin-product-actions button{width:34px;height:34px}
  .admin-product-form-modal{padding:1rem}
  .admin-product-form-row{grid-template-columns:1fr}
  .admin-cell-key{max-width:100px;overflow:hidden;text-overflow:ellipsis}
  .admin-tier-modal{margin:1rem;max-width:100%}
  .dash-topbar{gap:.65rem}
  .admin-live-indicator{padding:.25rem .5rem;font-size:.68rem}
  .limit-config-header{font-size:.88rem}
  .tier-limit-input{width:100%!important;min-width:0}
  #tierLimitsBody td{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
  #tierLimitsBody td[data-label]::before{content:attr(data-label);font-weight:600;color:var(--text-muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.03em;flex-shrink:0;min-width:80px}
  .admin-section-card .section-header{font-size:.9rem}
  .admin-section-card .section-header .badge-count{font-size:.65rem}
  .admin-stat-val{font-size:1.2rem}
  .admin-stat-label{font-size:.7rem}
  .admin-stat-icon{width:36px;height:36px;font-size:.95rem}
}

@media(max-width:768px){
  .dash-mobile-toggle{display:flex}
  .dash-body{display:block}
  .dash-sidebar{
    position:fixed;
    top:0;left:0;bottom:0;
    transform:translate3d(-100%,0,0);
    transition:transform .45s var(--ease-smooth);
    will-change:transform;
    z-index:100
  }
  .dash-sidebar.open{transform:translate3d(0,0,0)}
  .dash-main{margin-left:0}
  .dash-content{padding:1rem;padding-top:3.5rem}
  .dash-api-status{font-size:.65rem;padding:.2rem .5rem}
  .dash-api-dot{width:6px;height:6px}
  .dash-stats-grid{grid-template-columns:repeat(2,1fr)}
  .dash-stat-card.promo .dash-stat-num{font-size:1.4rem}
  .dash-actions-grid{grid-template-columns:repeat(2,1fr)}
  .bot-stats-grid{grid-template-columns:repeat(2,1fr)}
  .bot-detail-grid{grid-template-columns:1fr}
  .bot-status-card{flex-direction:column;align-items:flex-start}
  .bot-status-right{width:100%;justify-content:space-between}
}
@media(max-width:480px){
  .dash-stats-grid{grid-template-columns:1fr}
  .dash-stat-card.promo .dash-stat-num{font-size:1.5rem}
  .dash-stat-card.promo .dash-stat-icon{width:40px;height:40px;font-size:1rem}
  .dash-actions-grid{grid-template-columns:1fr}
  .bot-stats-grid{grid-template-columns:1fr}
  .admin-users-table,.admin-users-table thead,.admin-users-table tbody,.admin-users-table tr,.admin-users-table th,.admin-users-table td{display:block}
  .admin-users-table thead{display:none}
  .admin-users-table tr{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:.75rem;margin-bottom:.5rem}
  .admin-users-table td{padding:.35rem 0;border:none;display:flex;justify-content:space-between;align-items:center;font-size:.8rem}
  .admin-users-table td::before{content:attr(data-label);font-weight:600;color:var(--text-muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.03em;flex-shrink:0;margin-right:.5rem}
  .admin-cell-user{display:flex!important;align-items:center;gap:.5rem;font-size:.82rem}
  .admin-cell-key{display:flex!important;align-items:center;gap:.3rem}
  .admin-cell-key code{font-size:.7rem;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .admin-cell-date{font-size:.7rem}
  .admin-cell-actions{justify-content:flex-end;margin-top:.35rem;gap:.5rem}
  .admin-cell-actions button{width:36px;height:36px;font-size:.82rem}
  .admin-product-actions button{width:36px;height:36px;font-size:.82rem}
  .dash-btn-icon{width:42px;height:42px}
  .dash-btn-primary{padding:.75rem 1rem;min-height:44px}
  .dash-content{padding:.85rem}
  .dash-stat-card{padding:1rem}
  .dash-apikey-card{padding:1rem}
  .profile-info-grid{grid-template-columns:1fr}
  .profile-identity{padding:1rem}
  .profile-info-card{padding:.85rem}
  /* Admin panel responsive 480px */
  .admin-stats-grid{grid-template-columns:1fr;gap:.65rem}
  .dash-topbar{flex-direction:column;gap:.5rem}
  .dash-top-actions{width:100%;justify-content:space-between}
  .admin-section-card{padding:.75rem}
  .admin-tabs{gap:.25rem;flex-wrap:wrap;padding-bottom:.35rem}
  .admin-tab{font-size:.7rem;padding:.3rem .5rem;white-space:nowrap}
  .admin-tab .tab-badge{font-size:.55rem;padding:.05rem .25rem}
  .admin-susp-item{flex-direction:column;gap:.3rem;padding:.5rem 0}
  .admin-susp-badge{width:fit-content;font-size:.6rem}
  .admin-susp-user{font-size:.75rem}
  .admin-susp-reason{font-size:.68rem}
  .admin-susp-detail{font-size:.65rem}
  .admin-product-card{padding:.75rem;gap:.5rem}
  .admin-product-actions{width:100%;justify-content:flex-end;margin-top:.25rem}
  .admin-product-actions button{width:36px;height:36px;font-size:.82rem}
  .admin-product-form-row{grid-template-columns:1fr;gap:.5rem}
  .admin-product-form-modal{padding:.75rem}
  .admin-product-form-modal h3{font-size:.95rem}
  .admin-product-form-group label{font-size:.75rem}
  .admin-search-bar{margin-bottom:.65rem}
  .admin-search-bar input{font-size:.78rem;padding:.45rem .65rem .45rem 2rem}
  .admin-search-bar .search-icon{font-size:.72rem;margin-left:.6rem}
  .admin-section-card .section-header{font-size:.85rem;flex-wrap:wrap;gap:.35rem}
  .admin-section-card .section-header .badge-count{font-size:.62rem}
  .admin-stat-val{font-size:1.1rem}
  .admin-stat-label{font-size:.65rem}
  .admin-stat-icon{width:32px;height:32px;font-size:.85rem}
  .admin-stat-card{padding:.75rem 1rem;gap:.65rem}
  .admin-live-indicator{font-size:.65rem;padding:.2rem .45rem}
  .admin-live-time{font-size:.62rem}
  .admin-tier-modal{padding:1rem;margin:.5rem}
  .admin-tier-modal h3{font-size:.95rem}
  .admin-tier-option{padding:.65rem .85rem}
  .admin-tier-opt-name{font-size:.82rem}
  .admin-tier-opt-desc{font-size:.68rem}
  .admin-tier-actions button{padding:.5rem .9rem;font-size:.78rem}
  .dash-btn-primary{padding:.65rem 1rem;min-height:42px;font-size:.8rem}
  .dash-btn-icon{width:40px;height:40px;font-size:.85rem}
  .dash-content{padding:.65rem}
  .admin-product-form-actions{flex-direction:column;gap:.4rem}
  .admin-product-form-actions button{width:100%;padding:.6rem 1rem;font-size:.82rem}
  .admin-tier-actions{flex-direction:column;gap:.4rem}
  .admin-tier-actions button{width:100%;padding:.6rem 1rem}
  .admin-cell-actions{gap:.5rem;flex-wrap:wrap;justify-content:flex-end;margin-top:.35rem}
  .admin-cell-actions button{width:38px;height:38px;font-size:.82rem}
  .admin-cell-key{max-width:none}
  .admin-cell-key code{font-size:.65rem}
  .admin-cell-endpoint{max-width:none;white-space:normal;word-break:break-all}
  .admin-cell-endpoint code{font-size:.65rem}
  .admin-users-table,.admin-users-table thead,.admin-users-table tbody,
  .admin-users-table tr,.admin-users-table td{display:block}
  .admin-users-table thead{display:none}
  .admin-users-table tr{
    background:var(--surface);border:1px solid var(--border);
    border-radius:10px;padding:.65rem;margin-bottom:.4rem
  }
  .admin-users-table td{
    padding:.3rem 0;border:none;display:flex;
    justify-content:space-between;align-items:center;font-size:.75rem;gap:.35rem
  }
  .admin-users-table td:not([data-label=""])::before{
    content:attr(data-label);font-weight:600;color:var(--text-muted);
    font-size:.68rem;text-transform:uppercase;letter-spacing:.03em;
    flex-shrink:0;margin-right:.5rem
  }
  .admin-users-table td.admin-cell-actions::before{display:none}
  .admin-users-table td.admin-cell-actions{justify-content:flex-end}
  .admin-row-new td{animation:adminRowFlash 1s ease-out}
  .admin-cell-user{font-size:.78rem}
  .admin-cell-user::before{display:none!important}
  .admin-method{font-size:.62rem;padding:.12rem .35rem}
  .admin-cell-time{font-size:.68rem}
  .admin-cell-ip{font-size:.65rem}
  .dash-stat-card{padding:.85rem;gap:.65rem}
  .dash-apikey-card{padding:.85rem}
  .profile-info-grid{grid-template-columns:1fr}
  .profile-identity{padding:.85rem;gap:1rem}
  .profile-avatar{width:80px;height:80px;font-size:2rem}
  .profile-identity-info h2{font-size:1.2rem}
  .profile-info-card{padding:.75rem 1rem}
  .limit-config-section,.limit-features-section,.limit-usage-section{padding:.75rem 0}
  .limit-config-header{font-size:.85rem}
  .limit-config-desc{font-size:.72rem}
  #tierLimitsBody td{flex-direction:column;align-items:flex-start;gap:.3rem;padding:.3rem 0}
  #tierLimitsBody td[data-label]::before{min-width:0}
  .tier-limit-input{width:100%!important}
  #limitFeaturesTable,#limitUsageTable,
  #limitFeaturesTable thead,#limitUsageTable thead,
  #limitFeaturesTable tbody,#limitUsageTable tbody,
  #limitFeaturesTable tr,#limitUsageTable tr,
  #limitFeaturesTable th,#limitUsageTable th,
  #limitFeaturesTable td,#limitUsageTable td{display:block}
  #limitFeaturesTable thead,#limitUsageTable thead{display:none}
  #limitFeaturesTable tr,#limitUsageTable tr{
    background:var(--surface);border:1px solid var(--border);
    border-radius:10px;padding:.65rem;margin-bottom:.4rem
  }
  #limitFeaturesTable td,#limitUsageTable td{
    padding:.3rem 0;border:none;display:flex;
    justify-content:space-between;align-items:center;font-size:.78rem
  }
  #limitFeaturesTable td::before,#limitUsageTable td::before{
    content:attr(data-label);font-weight:600;color:var(--text-muted);
    font-size:.68rem;text-transform:uppercase;letter-spacing:.03em;
    flex-shrink:0;margin-right:.5rem
  }
  .admin-users-table-wrap{overflow-x:visible}
  .admin-tab .tab-badge{font-size:.6rem;padding:.05rem .3rem}
  .admin-badge{font-size:.62rem;padding:.15rem .4rem}
  .tier-badge{font-size:.65rem;}
  .toast{min-width:0;max-width:calc(100vw - 2rem)}
  .toast-container{right:10px;top:10px}
}

/* === 480-768px — Landscape phones === */
@media(min-width:480px) and (max-width:768px){
  .admin-stats-grid{grid-template-columns:repeat(2,1fr)}
  .dash-stats-grid{grid-template-columns:repeat(2,1fr)}
  .dash-actions-grid{grid-template-columns:repeat(2,1fr)}
  .admin-product-card{flex-direction:row;align-items:center}
  .admin-product-actions{width:auto}
  .dash-topbar{flex-direction:row;align-items:flex-start}
  .dash-top-actions{width:auto}
}

/* === Touch optimization === */
.dash-btn-primary,.dash-btn-icon,.admin-tab,.admin-cell-actions button,
.jadibot-list-stop,.jadibot-list-start,.jadibot-list-delete,
.admin-action-tier,.admin-action-changepw,.admin-action-delete,
.admin-product-edit,.admin-product-del,.dash-nav-item,
.limit-toggle,.admin-tier-option,.dash-modal-close,.toast-close{
  cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent
}

/* === Custom Scrollbar === */
.dash-main::-webkit-scrollbar{width:5px}
.dash-main::-webkit-scrollbar-track{background:transparent}
.dash-main::-webkit-scrollbar-thumb{background:var(--border-bright);border-radius:3px;transition:background .3s}
.dash-main::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}

/* === Selection === */
.dash-body ::selection{background:var(--accent-dim);color:var(--accent)}

/* === Skeleton Loading === */
.dash-skeleton{background:linear-gradient(90deg,var(--surface) 25%,var(--surface-2) 50%,var(--surface) 75%);background-size:200% 100%;border-radius:8px;animation:shimmer 1.5s ease-in-out infinite}
.dash-skeleton-text{height:14px;width:60%;margin-bottom:.5rem}
.dash-skeleton-title{height:22px;width:40%;margin-bottom:.75rem}
.dash-skeleton-card{height:120px;width:100%;margin-bottom:1rem}
.dash-skeleton-row{height:40px;width:100%;margin-bottom:.35rem;border-radius:6px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* === Sidebar API Version Badge === */
.dash-api-version {
  font-size: .62rem;
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--text-muted);
  background: rgba(184,200,216,.06);
  border: 1px solid rgba(184,200,216,.08);
  padding: .1rem .45rem;
  border-radius: 4px;
  letter-spacing: .03em;
  margin-left: auto;
  flex-shrink: 0;
}

/* === API Live Status Badge === */
.dash-api-status {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .72rem;
  color: var(--text-muted);
  padding: .3rem .65rem;
  border-radius: 6px;
  background: rgba(16,185,129,.06);
  border: 1px solid rgba(16,185,129,.1);
  white-space: nowrap;
  transition: border-color .3s, background .3s;
}
.dash-api-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #6b7280;
  flex-shrink: 0;
  transition: background .3s, box-shadow .3s;
}
.dash-api-dot.online {
  background: #10b981;
  box-shadow: 0 0 6px rgba(16,185,129,.5);
  animation: apiPulse 2s ease-in-out infinite;
}
.dash-api-dot.offline {
  background: #ff5282;
  box-shadow: 0 0 6px rgba(255,82,130,.4);
}
@keyframes apiPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .5; transform: scale(.8); }
}

/* === API Key Card Enhanced === */
.dash-apikey-card {
  border-left: 3px solid rgba(184,200,216,.25);
  background: linear-gradient(135deg, rgba(184,200,216,.04) 0%, var(--surface) 100%);
  transition: border-color .5s var(--ease-smooth), box-shadow .5s var(--ease-smooth), transform .35s var(--ease-smooth);
}
.dash-apikey-card:hover {
  border-left-color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 30px rgba(184,200,216,.08), 0 8px 32px rgba(0,0,0,.25);
  transform: translateY(-2px);
}
.dash-apikey-value {
  font-size: .95rem;
  letter-spacing: .02em;
  text-shadow: 0 0 20px rgba(184,200,216,.06);
}
.dash-apikey-label i {
  color: var(--accent);
  filter: drop-shadow(0 0 4px rgba(184,200,216,.2));
}

/* === Promo Stat Card (Available Endpoints) === */
.dash-stat-card.promo {
  background: linear-gradient(135deg, rgba(184,200,216,.06) 0%, var(--surface) 100%);
  border: 1px solid rgba(184,200,216,.12);
  position: relative;
  overflow: hidden;
}
.dash-stat-card.promo::after {
  content: '';
  position: absolute;
  top: -60%; right: -20%;
  width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(184,200,216,.05) 0%, transparent 70%);
  pointer-events: none;
}
.dash-stat-card.promo .dash-stat-num {
  font-size: 1.8rem;
  color: var(--accent);
}
.dash-stat-card.promo .dash-stat-icon {
  width: 48px; height: 48px;
  font-size: 1.2rem;
}
.dash-stat-card.promo .dash-stat-icon.accent {
  background: rgba(184,200,216,.12);
  color: var(--accent);
}
.dash-stat-card.promo:hover {
  border-color: rgba(184,200,216,.3);
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  transform: translateY(-4px);
}

/* === API Promo Quick Action === */
.dash-action-card.api-promo {
  border: 1px solid rgba(184,200,216,.15);
  background: linear-gradient(135deg, rgba(184,200,216,.04) 0%, var(--surface) 100%);
  position: relative;
}
.dash-action-card.api-promo .dash-action-icon {
  color: var(--accent);
  filter: drop-shadow(0 0 6px rgba(184,200,216,.15));
}
.dash-action-card.api-promo .dash-action-text {
  color: var(--accent);
  font-weight: 600;
}
.dash-action-card.api-promo:hover {
  border-color: rgba(184,200,216,.3);
  box-shadow: 0 12px 32px rgba(0,0,0,.3), 0 0 20px rgba(184,200,216,.06);
}

/* === Coming Soon Badge === */
.dash-action-card.coming-soon {
  position: relative;
  cursor: pointer;
}
.dash-action-card.coming-soon .dash-action-icon {
  opacity: .5;
}
.dash-action-card.coming-soon .dash-action-text {
  color: var(--text-muted);
  font-weight: 400;
}
.dash-coming-badge {
  position: absolute;
  top: .5rem;
  right: .5rem;
  font-size: .6rem;
  font-weight: 700;
  font-family: var(--font-mono);
  color: #f59e0b;
  background: rgba(245,158,11,.1);
  border: 1px solid rgba(245,158,11,.15);
  padding: .1rem .4rem;
  border-radius: 4px;
  letter-spacing: .03em;
  text-transform: uppercase;
}

/* === Dashboard Background Pattern === */
.dash-body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: radial-gradient(rgba(184,200,216,.025) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}
.dash-main {
  position: relative;
  z-index: 1;
}

/* === View Transitions === */
.dash-view.view-out{display:block;animation:viewOut .35s var(--ease-smooth) both}
@keyframes viewIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes viewOut{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-8px) scale(.97)}}

/* === Glass card hover glow === */
.glass{transition:transform .35s var(--ease-smooth),border-color .35s var(--ease-smooth),box-shadow .35s var(--ease-smooth)}
.bot-detail-card:hover,.dash-settings-card:hover,.bot-jadibot-form:hover,.bot-jadibot-list:hover,.dash-endpoint-list:hover{border-color:rgba(184,200,216,.12);box-shadow:0 8px 32px rgba(0,0,0,.2)}

/* === Input Focus Ring === */
.dash-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(184,200,216,.1)}

/* === Bot status card glow === */
.bot-status-card{border-color:var(--border);transition:border-color .5s var(--ease-smooth),box-shadow .5s var(--ease-smooth)}
.bot-status-card:hover{box-shadow:0 8px 32px rgba(0,0,0,.2)}

/* === API Key card subtle accent === */
.dash-apikey-card{border-color:rgba(184,200,216,.08);transition:border-color .5s var(--ease-smooth)}
.dash-apikey-card:hover{border-color:rgba(184,200,216,.2)}

/* === Sidebar user avatar glow === */
.dash-user-avatar{box-shadow:0 0 0 2px rgba(184,200,216,.15);transition:box-shadow .3s var(--ease-smooth)}
.dash-user-avatar:hover{box-shadow:0 0 0 3px rgba(184,200,216,.3)}

/* === Section title style === */
.dash-section-title{display:flex;align-items:center;gap:.5rem}

/* === Toast notification === */
.toast-container{
  position:fixed;
  top:20px;right:20px;
  z-index:9999;
  display:flex;
  flex-direction:column;
  gap:.5rem
}
.toast{
  display:flex;
  align-items:center;
  gap:.85rem;
  padding:1rem 1.25rem;
  border-radius:12px;
  min-width:320px;
  max-width:400px;
  backdrop-filter:blur(20px);
  background:rgba(8,10,14,.92);
  border:1px solid var(--border);
  box-shadow:0 8px 32px rgba(0,0,0,.4);
  animation:toastSlideIn .5s var(--ease-spring)
}
.toast.removing{animation:toastSlideOut .35s var(--ease-out-quart) forwards}
.toast-icon{
  width:32px;height:32px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.8rem;
  flex-shrink:0
}
.toast.success .toast-icon{background:rgba(0,255,136,.12);color:#00ff88}
.toast.error .toast-icon{background:rgba(255,82,130,.12);color:#ff5282}
.toast.info .toast-icon{background:var(--accent-dim);color:var(--accent)}
.toast-content{flex:1}
.toast-title{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.5px;
  font-family:var(--font-mono);
  font-weight:600;
  margin-bottom:2px
}
.toast.success .toast-title{color:#00ff88}
.toast.error .toast-title{color:#ff5282}
.toast.info .toast-title{color:var(--accent)}
.toast-msg{font-size:.82rem;color:var(--text-dim)}
.toast-close{
  color:var(--text-muted);
  font-size:.9rem;
  cursor:pointer;
  padding:4px;
  transition:color .2s;
  flex-shrink:0
}
.toast-close:hover{color:var(--text)}
@keyframes toastSlideIn{
  from{transform:translateX(120%) scale(.9);opacity:0}
  to{transform:translateX(0) scale(1);opacity:1}
}
@keyframes toastSlideOut{
  to{transform:translateX(120%) scale(.9);opacity:0}
}

/* === Nav items stagger on sidebar open === */
.dash-nav-item{
  transform:translateX(0);
  transition:color .3s var(--ease-smooth),background .3s var(--ease-smooth),transform .3s var(--ease-smooth)
}
@media(max-width:768px){
  .dash-sidebar{
    transform:translate3d(-100%,0,0);
    transition:transform .55s cubic-bezier(.22,1,.36,1),box-shadow .55s cubic-bezier(.22,1,.36,1);
    will-change:transform;
    box-shadow:none
  }
  .dash-sidebar.open{
    transform:translate3d(0,0,0);
    box-shadow:4px 0 60px rgba(0,0,0,.5)
  }
  .dash-sidebar.open .dash-nav-item{
    animation:navSlideIn .45s cubic-bezier(.22,1,.36,1) both
  }
  .dash-sidebar.open .dash-nav-item:nth-child(1){animation-delay:.03s}
  .dash-sidebar.open .dash-nav-item:nth-child(2){animation-delay:.06s}
  .dash-sidebar.open .dash-nav-item:nth-child(3){animation-delay:.09s}
  .dash-sidebar.open .dash-nav-item:nth-child(4){animation-delay:.12s}
  .dash-sidebar.open .dash-nav-item:nth-child(5){animation-delay:.15s}
  .dash-sidebar.open .dash-nav-item:nth-child(6){animation-delay:.18s}
  .dash-sidebar.open .dash-nav-item:nth-child(7){animation-delay:.21s}
  .dash-sidebar.open .dash-nav-item:nth-child(8){animation-delay:.24s}
}
@keyframes navSlideIn{
  from{opacity:0;transform:translateX(-16px)}
  to{opacity:1;transform:translateX(0)}
}
.dash-sidebar-footer{will-change:transform}

/* === macOS Terminal === */
.term-window{border-radius:12px;overflow:hidden;border:1px solid var(--border)}.term-window:hover{box-shadow:0 8px 32px rgba(0,0,0,.2)}
.term-titlebar{display:flex;align-items:center;padding:.6rem 1rem;background:rgba(30,32,40,.95);border-bottom:1px solid var(--border);gap:.75rem}
.term-dots{display:flex;gap:.4rem;flex-shrink:0}
.term-dot{width:10px;height:10px;border-radius:50%;transition:opacity .2s}
.term-dot-red{background:#ff5f56}.term-dot-yellow{background:#ffbd2e}.term-dot-green{background:#27c93f}
.term-dot:hover{opacity:.8}
.term-title{font-size:.78rem;color:var(--text-dim);font-family:var(--font-mono);flex:1;text-align:center;opacity:.7;letter-spacing:.02em}
.term-spacer{width:48px;flex-shrink:0}
.term-body{background:#161822;padding:.85rem 1rem;min-height:200px;max-height:460px;overflow-y:auto;font-family:var(--font-mono);font-size:.8rem;line-height:1.55}
.term-body::-webkit-scrollbar{width:4px}
.term-body::-webkit-scrollbar-track{background:transparent}
.term-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:2px}
.term-line{padding:1px 0;word-break:break-word;display:flex;gap:.5rem;align-items:flex-start}
.term-time{color:var(--text-muted);flex-shrink:0;font-size:.72rem;padding-top:2px;opacity:.6}
.term-msg{flex:1;min-width:0}
.term-line-cmd .term-msg{color:#7ec4ff}
.term-line-out .term-msg{color:#a0f0a0}
.term-line-err .term-msg{color:#ff6b6b}
.term-line-sys .term-msg{color:var(--text-dim)}
@media(max-width:768px){
  .term-body{max-height:300px;font-size:.76rem}
  .term-spacer{display:none}
}

/* === Profile === */
.profile-identity{
  display:flex;
  align-items:center;
  gap:1.5rem;
  padding:1.5rem;
  border-radius:14px;
  margin-bottom:1.25rem;
  flex-wrap:wrap
}
.profile-avatar-wrap{position:relative;flex-shrink:0}
.profile-avatar{
  width:100px;height:100px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--accent),#788898);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2.5rem;
  font-weight:700;
  color:#fff;
  overflow:hidden;
  box-shadow:0 0 0 3px rgba(184,200,216,.2),0 8px 32px rgba(0,0,0,.3);
  transition:box-shadow .3s
}
.profile-avatar:hover{box-shadow:0 0 0 4px rgba(184,200,216,.35),0 12px 40px rgba(0,0,0,.35)}
.profile-avatar img{width:100%;height:100%;object-fit:cover}
.profile-identity-info h2{
  font-family:var(--font-display);
  font-size:1.5rem;
  font-weight:700;
  margin-bottom:.25rem
}
.profile-badges{display:flex;gap:.5rem;margin-bottom:.35rem}
.profile-badge{
  font-size:.72rem;
  font-weight:600;
  padding:.15rem .6rem;
  border-radius:6px;
  font-family:var(--font-mono)
}
.profile-badge.role-badge{background:rgba(255,255,255,.04);color:var(--text-dim)}
.profile-badge.tier-badge{background:var(--accent-dim)}
.profile-member-since{
  font-size:.82rem;
  color:var(--text-muted);
  display:flex;
  align-items:center;
  gap:.4rem;
  margin-top:.25rem
}
.profile-member-since i{font-size:.72rem}
.profile-info-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
  margin-bottom:1.5rem
}
.profile-info-card{
  padding:1rem 1.25rem;
  border-radius:12px;
  display:flex;
  align-items:center;
  gap:.75rem;
  flex-wrap:wrap
}
.profile-info-label{
  font-size:.78rem;
  color:var(--text-dim);
  display:flex;
  align-items:center;
  gap:.35rem;
  width:100%
}
.profile-info-label i{color:var(--accent);font-size:.72rem}
.profile-info-value{
  font-family:var(--font-mono);
  font-size:.9rem;
  font-weight:600;
  color:var(--text);
  word-break:break-all;
  flex:1
}
.profile-form-msg{
  font-size:.82rem;
  margin-top:.65rem;
  display:none;
  min-height:1.2em
}
.profile-form-msg.success{display:block;color:#00ff88}
.profile-form-msg.error{display:block;color:#ff5282}
@media(max-width:768px){
  .profile-info-grid{grid-template-columns:1fr}
  .profile-identity{flex-direction:column;text-align:center}
  .profile-badges{justify-content:center}
  .profile-member-since{justify-content:center}
}

/* === Admin Products === */
.admin-product-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:1rem 1.25rem;
  margin-bottom:.5rem;
  display:flex;
  align-items:center;
  gap:1rem;
  transition:border-color .3s var(--ease-smooth)
}
.admin-product-card:hover{border-color:var(--accent-dim)}
.admin-product-info{flex:1;min-width:0}
.admin-product-name{
  font-weight:600;
  font-size:.88rem;
  color:var(--text);
  display:flex;
  align-items:center;
  gap:.5rem
}
.admin-product-price{
  font-family:var(--font-mono);
  font-size:.8rem;
  color:var(--accent);
  font-weight:600
}
.admin-product-badge{
  font-size:.65rem;
  font-weight:600;
  padding:.15rem .45rem;
  border-radius:4px;
  text-transform:uppercase;
  letter-spacing:.03em
}
.admin-product-actions{
  display:flex;
  gap:.4rem;
  flex-shrink:0
}
.admin-product-actions button{
  width:32px;height:32px;
  border-radius:6px;
  border:none;
  cursor:pointer;
  font-size:.72rem;
  transition:all .2s;
  display:inline-flex;
  align-items:center;
  justify-content:center
}
.admin-product-edit{
  background:var(--accent-dim);
  color:var(--accent)
}
.admin-product-edit:hover{background:rgba(184,200,216,.2)}
.admin-product-del{
  background:rgba(255,82,130,.08);
  color:#ff5282
}
.admin-product-del:hover{background:rgba(255,82,130,.15)}
.admin-product-hidden{opacity:.5}
/* === Admin Tier Modal === */
.tier-badge{display:inline-block;padding:.15rem .5rem;border-radius:4px;font-size:.7rem;font-weight:700;letter-spacing:.5px}
.admin-tier-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9999;display:flex;align-items:center;justify-content:center;padding:1rem
}
.admin-tier-modal{
  background:rgba(18,18,28,.97);backdrop-filter:blur(24px);border:1px solid var(--border);border-radius:16px;padding:1.5rem;max-width:420px;width:100%;animation:fadeUp .3s ease
}
.admin-tier-modal h3{font-family:var(--font-display);font-weight:600;margin-bottom:.25rem}
.admin-tier-options{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.25rem}
.admin-tier-option{
  display:flex;align-items:center;gap:.75rem;padding:.85rem 1rem;border-radius:10px;border:1.5px solid var(--border);cursor:pointer;transition:all .2s
}
.admin-tier-option:hover{border-color:var(--accent-dim);background:rgba(184,200,216,.06)}
.admin-tier-option.active{border-color:var(--accent)}
.admin-tier-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0}
.admin-tier-opt-name{font-weight:600;font-size:.9rem}
.admin-tier-opt-desc{font-size:.72rem;color:var(--text-muted);margin-top:2px}
.admin-tier-actions{display:flex;gap:.75rem;justify-content:flex-end}
.admin-tier-actions button{padding:.55rem 1.1rem;border-radius:8px;font-size:.82rem;font-weight:600;cursor:pointer;border:none;transition:all .25s}
.admin-tier-cancel{background:var(--surface-2);color:var(--text-dim)}
.admin-tier-cancel:hover{color:var(--text)}
.admin-tier-save{background:linear-gradient(135deg,var(--accent),#788898);color:#fff}
.admin-tier-save:disabled{opacity:.4;cursor:not-allowed}
.admin-action-tier{width:32px;height:32px;border-radius:6px;border:none;background:transparent;color:var(--text-dim);cursor:pointer;transition:all .2s;font-size:.82rem;display:inline-flex;align-items:center;justify-content:center}
.admin-action-tier:hover{background:rgba(184,200,216,.15);color:var(--accent)}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.admin-product-form-overlay{
  position:fixed;inset:0;
  z-index:9999;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(8px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1rem
}
.admin-product-form-modal{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  padding:1.5rem;
  width:100%;
  max-width:500px;
  max-height:90vh;
  overflow-y:auto
}
.admin-product-form-modal h3{
  font-family:var(--font-display);
  font-size:1.1rem;
  font-weight:700;
  margin-bottom:1rem
}
.admin-product-form-group{margin-bottom:.75rem}
.admin-product-form-group label{
  display:block;
  font-size:.78rem;
  font-weight:600;
  color:var(--text-dim);
  margin-bottom:.3rem;
  text-transform:uppercase;
  letter-spacing:.03em
}
.admin-product-form-group input,.admin-product-form-group textarea{
  width:100%;
  padding:.65rem .8rem;
  border-radius:8px;
  background:rgba(0,0,0,.25);
  border:1px solid var(--border);
  color:var(--text);
  font-size:.85rem;
  transition:border-color .3s
}
.admin-product-form-group input:focus,.admin-product-form-group textarea:focus{
  border-color:var(--accent);
  outline:none
}
.admin-product-form-group textarea{resize:vertical;min-height:60px;font-family:var(--font-body)}
.admin-product-form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.75rem
}
.admin-product-form-actions{
  display:flex;
  gap:.5rem;
  justify-content:flex-end;
  margin-top:1rem
}
.admin-product-form-actions button{padding:.55rem 1.1rem;border-radius:8px;font-size:.82rem;font-weight:600;cursor:pointer;border:none;transition:all .25s}
.admin-product-form-cancel{background:var(--surface-2);color:var(--text-dim)}
.admin-product-form-cancel:hover{color:var(--text)}
.admin-product-form-submit{background:linear-gradient(135deg,var(--accent),#788898);color:#fff}
.admin-product-form-submit:hover{opacity:.92;transform:translateY(-1px)}

/* === Limit Settings === */
.limit-config-section,
.limit-features-section,
.limit-usage-section {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}
.limit-usage-section { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.limit-config-header {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  margin-bottom: .25rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.limit-config-header i { color: var(--accent); }
.limit-config-desc {
  font-size: .8rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}
.limit-config-form {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
}
.limit-form-group {
  flex: 1;
  min-width: 180px;
}
.limit-form-group label {
  display: block;
  font-size: .78rem;
  color: var(--text-dim);
  margin-bottom: .3rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.limit-form-group .dash-input {
  padding: .65rem .85rem;
  font-size: .9rem;
}
.limit-form-msg {
  font-size: .82rem;
  margin-top: .65rem;
  min-height: 1.2em;
  display: none;
}
.limit-form-msg.success { display: block; color: #00ff88; }
.limit-form-msg.error { display: block; color: #ff5282; }

/* Toggle Switch */
.limit-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  cursor: pointer;
}
.limit-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.limit-toggle-slider {
  position: absolute;
  inset: 0;
  background: rgba(239,68,68,.15);
  border-radius: 24px;
  transition: all .3s var(--ease-smooth);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.2);
}
.limit-toggle-slider::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ef4444;
  transition: all .3s var(--ease-smooth);
}
.limit-toggle input:checked + .limit-toggle-slider {
  background: rgba(16,185,129,.2);
}
.limit-toggle input:checked + .limit-toggle-slider::before {
  transform: translateX(20px);
  background: #10b981;
  box-shadow: 0 0 6px rgba(16,185,129,.5);
}
.limit-toggle input:focus-visible + .limit-toggle-slider {
  box-shadow: 0 0 0 2px rgba(184,200,216,.3);
}

@media(max-width:768px) {
  .limit-config-form { flex-direction: column; }
  .limit-form-group { min-width: 100%; }
}
@media(max-width:480px) {
  .limit-config-section,
  .limit-features-section,
  .limit-usage-section { padding-bottom: 1rem; margin-bottom: 1rem; }
}

/* === My Endpoints — per-endpoint status === */
.ep-cat{margin-bottom:1.25rem}
.ep-cat:last-child{margin-bottom:0}
.ep-cat-label{
  font-size:.65rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1.5px;
  color:var(--text-muted);
  margin-bottom:.6rem;
  padding-left:.15rem
}
.ep-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  padding:.7rem .85rem;
  border-radius:8px;
  transition:background .2s;
  border-bottom:1px solid rgba(255,255,255,.03)
}
.ep-item:hover{background:rgba(255,255,255,.02)}
.ep-item:last-child{border-bottom:none}
.ep-left{
  display:flex;
  align-items:center;
  gap:.75rem;
  min-width:0;
  flex:1
}
.ep-method{
  font-family:var(--font-mono);
  font-size:.65rem;
  font-weight:700;
  padding:.2rem .45rem;
  border-radius:4px;
  flex-shrink:0;
  line-height:1
}
.ep-method.get{background:rgba(16,185,129,.1);color:#10b981}
.ep-info{
  display:flex;
  flex-direction:column;
  gap:.15rem;
  min-width:0
}
.ep-path code{
  font-family:var(--font-mono);
  font-size:.78rem;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  display:block
}
.ep-desc{
  font-size:.7rem;
  color:var(--text-muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.ep-right{
  flex-shrink:0
}
.ep-badge{
  display:flex;
  align-items:center;
  gap:.35rem;
  font-size:.65rem;
  font-weight:600;
  padding:.25rem .55rem;
  border-radius:5px;
  white-space:nowrap
}
.ep-badge-active{
  background:rgba(16,185,129,.08);
  color:#10b981;
  border:1px solid rgba(16,185,129,.12)
}
.ep-badge-stop{
  background:rgba(239,68,68,.08);
  color:#ef4444;
  border:1px solid rgba(239,68,68,.12)
}
.ep-dot{
  width:6px;height:6px;
  border-radius:50%;
  flex-shrink:0
}
.ep-dot-active{
  background:#10b981;
  box-shadow:0 0 4px rgba(16,185,129,.5)
}
.ep-dot-stop{
  background:#ef4444;
  box-shadow:0 0 4px rgba(239,68,68,.4)
}

/* === My Endpoints — responsive === */
@media(max-width:768px){
  .ep-item{padding:.6rem .75rem;gap:.5rem}
  .ep-path code{font-size:.74rem}
  .ep-desc{font-size:.65rem}
  .ep-method{font-size:.6rem;padding:.15rem .35rem}
  .ep-badge{font-size:.6rem;padding:.2rem .45rem}
}
@media(max-width:480px){
  .ep-cat{margin-bottom:1rem}
  .ep-item{flex-direction:column;align-items:flex-start;gap:.4rem;padding:.55rem .7rem}
  .ep-left{width:100%}
  .ep-right{width:100%;display:flex;justify-content:flex-end}
  .ep-path code{font-size:.72rem;white-space:normal;word-break:break-all}
  .ep-desc{font-size:.62rem;white-space:normal}
  .ep-badge{padding:.2rem .5rem;font-size:.6rem}
  .ep-cat-label{font-size:.6rem;margin-bottom:.4rem}
}

/* AI chat dipindah ke assets/css/chat-widget.css (widget global) */