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

:root {
  --accent:      #6C63FF;
  --accent2:     #8b5cf6;
  --accent-glow: rgba(108,99,255,.3);
  --bg:          #0d0d1a;
  --sidebar-bg:  #0f0f24;
  --card:        #141428;
  --card2:       #1a1a35;
  --text:        #e2e2f0;
  --muted:       #7878a0;
  --success:     #00d9b5;
  --danger:      #ff4757;
  --warning:     #ffa502;
  --border:      rgba(108,99,255,.2);
  --sidebar-w:   260px;
  --header-h:    64px;
}

*{box-sizing:border-box;margin:0;padding:0}
body.admin-body{background:var(--bg);color:var(--text);font-family:'Inter',system-ui,sans-serif;display:flex;min-height:100vh}

/* ── SIDEBAR ── */
.sidebar{width:var(--sidebar-w);background:var(--sidebar-bg);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;left:0;height:100vh;z-index:100;transition:transform .3s}
.sidebar-logo{display:flex;align-items:center;gap:.9rem;padding:1.4rem 1.2rem;border-bottom:1px solid var(--border)}
.sidebar-logo-icon{width:44px;height:44px;background:linear-gradient(135deg,var(--accent),#ff63c8);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0;box-shadow:0 6px 20px rgba(108,99,255,.35)}
.sidebar-logo-name{font-weight:700;font-size:1rem;letter-spacing:-.3px}
.sidebar-logo-sub{font-size:.7rem;color:var(--muted);margin-top:2px}
.sidebar-nav{flex:1;padding:.75rem;display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.nav-item{display:flex;align-items:center;gap:.75rem;padding:.72rem 1rem;border-radius:12px;text-decoration:none;color:var(--muted);font-size:.88rem;font-weight:500;transition:.2s;cursor:pointer;border:1px solid transparent}
.nav-item:hover{background:rgba(108,99,255,.12);color:var(--text)}
.nav-item.active{background:linear-gradient(135deg,rgba(108,99,255,.22),rgba(139,92,246,.14));color:#fff;border-color:rgba(108,99,255,.35)}
.nav-icon{font-size:1.05rem;flex-shrink:0;width:20px;text-align:center}
.sidebar-footer{padding:.75rem;border-top:1px solid var(--border)}
.logout-btn{color:var(--danger)!important}
.logout-btn:hover{background:rgba(255,71,87,.12)!important;color:var(--danger)!important}

/* ── MAIN ── */
.admin-main{margin-left:var(--sidebar-w);flex:1;display:flex;flex-direction:column;min-height:100vh}
.admin-header{height:var(--header-h);background:rgba(13,13,26,.97);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:1rem;padding:0 1.75rem;position:sticky;top:0;z-index:50;backdrop-filter:blur(10px)}
.menu-toggle{display:none;background:none;border:1px solid var(--border);color:var(--text);padding:.4rem .65rem;border-radius:8px;cursor:pointer;font-size:1rem}
.page-title{font-size:1.05rem;font-weight:600;flex:1}
.user-badge{background:var(--card2);border:1px solid var(--border);padding:.35rem .85rem;border-radius:20px;font-size:.8rem;color:var(--muted)}
.admin-content{padding:1.75rem;flex:1}

/* ── ALERTS ── */
.alert{padding:.85rem 1.2rem;border-radius:12px;margin-bottom:1.5rem;font-size:.88rem;font-weight:500}
.alert-success{background:rgba(0,217,181,.1);border:1px solid rgba(0,217,181,.3);color:var(--success)}
.alert-danger{background:rgba(255,71,87,.1);border:1px solid rgba(255,71,87,.3);color:var(--danger)}
.alert-warning{background:rgba(255,165,2,.1);border:1px solid rgba(255,165,2,.3);color:var(--warning)}

/* ── CARDS ── */
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:1.5rem;margin-bottom:1.5rem}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem;padding-bottom:1rem;border-bottom:1px solid var(--border)}
.card-title{font-size:.95rem;font-weight:600}
.card-subtitle{font-size:.78rem;color:var(--muted);margin-top:2px}

/* ── STAT CARDS ── */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1.2rem;margin-bottom:1.75rem}
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:1.4rem;display:flex;flex-direction:column;gap:.4rem;transition:.2s;cursor:default}
.stat-card:hover{transform:translateY(-3px);border-color:rgba(108,99,255,.5);box-shadow:0 10px 30px rgba(0,0,0,.3)}
.stat-icon{font-size:1.6rem;margin-bottom:.2rem}
.stat-value{font-size:1.9rem;font-weight:700;background:linear-gradient(135deg,var(--accent),#ff63c8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.stat-label{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}

/* ── TABLES ── */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.87rem}
thead th{padding:.7rem 1rem;text-align:left;font-size:.73rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border)}
tbody td{padding:.82rem 1rem;border-bottom:1px solid rgba(108,99,255,.07);vertical-align:middle}
tbody tr:hover{background:rgba(108,99,255,.05)}
tbody tr:last-child td{border:none}

/* ── BADGES ── */
.badge{display:inline-flex;align-items:center;gap:.3rem;padding:.22rem .6rem;border-radius:20px;font-size:.73rem;font-weight:600}
.badge-success{background:rgba(0,217,181,.14);color:var(--success);border:1px solid rgba(0,217,181,.3)}
.badge-danger{background:rgba(255,71,87,.14);color:var(--danger);border:1px solid rgba(255,71,87,.3)}
.badge-warning{background:rgba(255,165,2,.14);color:var(--warning);border:1px solid rgba(255,165,2,.3)}
.badge-muted{background:rgba(120,120,160,.14);color:var(--muted);border:1px solid rgba(120,120,160,.25)}
.badge-primary{background:rgba(108,99,255,.14);color:#a899ff;border:1px solid rgba(108,99,255,.3)}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.62rem 1.2rem;border-radius:10px;border:none;font-size:.87rem;font-weight:600;font-family:inherit;cursor:pointer;transition:.2s;text-decoration:none}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(108,99,255,.4)}
.btn-danger{background:rgba(255,71,87,.14);color:var(--danger);border:1px solid rgba(255,71,87,.3)}
.btn-danger:hover{background:rgba(255,71,87,.25)}
.btn-secondary{background:var(--card2);color:var(--text);border:1px solid var(--border)}
.btn-secondary:hover{border-color:rgba(108,99,255,.5)}
.btn-success{background:rgba(0,217,181,.14);color:var(--success);border:1px solid rgba(0,217,181,.3)}
.btn-success:hover{background:rgba(0,217,181,.25)}
.btn-warning{background:rgba(255,165,2,.14);color:var(--warning);border:1px solid rgba(255,165,2,.3)}
.btn-warning:hover{background:rgba(255,165,2,.25)}
.btn-sm{padding:.38rem .75rem;font-size:.78rem;border-radius:8px}
.btn-group{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}

/* ── FORMS ── */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem}
.form-group{display:flex;flex-direction:column;gap:.45rem}
label,.form-label{font-size:.78rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
input[type=text],input[type=password],input[type=number],input[type=email],input[type=url],input[type=color],select,textarea{background:var(--card2);border:1px solid var(--border);border-radius:10px;color:var(--text);font-size:.9rem;font-family:inherit;padding:.72rem 1rem;transition:.2s;outline:none;width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(108,99,255,.15)}
textarea{resize:vertical;min-height:120px;line-height:1.6}
input[type=color]{height:42px;padding:.25rem;cursor:pointer}
select option{background:#1a1a35}
.form-hint{font-size:.76rem;color:var(--muted)}
.input-group{display:flex}
.input-group input{border-radius:10px 0 0 10px;border-right:none}
.input-group .btn{border-radius:0 10px 10px 0;flex-shrink:0}
.form-row{display:flex;gap:1.25rem;align-items:flex-end;flex-wrap:wrap}

/* ── SECTION TITLES ── */
.section-title{font-size:.73rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--accent);margin:1.5rem 0 1rem;padding-bottom:.5rem;border-bottom:1px solid var(--border)}

/* ── TOGGLE ── */
.toggle-wrap{display:flex;align-items:center;gap:.75rem}
.toggle{position:relative;width:44px;height:24px;flex-shrink:0}
.toggle input{opacity:0;width:0;height:0;position:absolute}
.toggle-slider{position:absolute;inset:0;background:var(--card2);border:1px solid var(--border);border-radius:24px;cursor:pointer;transition:.2s}
.toggle-slider::before{content:'';position:absolute;width:18px;height:18px;background:var(--muted);border-radius:50%;top:2px;left:2px;transition:.2s}
.toggle input:checked+.toggle-slider{background:rgba(108,99,255,.2);border-color:var(--accent)}
.toggle input:checked+.toggle-slider::before{background:var(--accent);transform:translateX(20px)}

/* ── EMPTY STATE ── */
.empty-state{text-align:center;padding:3rem 1rem;color:var(--muted)}
.empty-state .empty-icon{font-size:3rem;margin-bottom:1rem;display:block}
.empty-state p{font-size:.88rem}

/* ── PROGRESS ── */
.progress{height:6px;background:var(--card2);border-radius:3px;overflow:hidden}
.progress-bar{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--accent),#ff63c8);transition:width .5s}

/* ── CODE ── */
.code-block{background:var(--card2);border:1px solid var(--border);border-radius:10px;padding:1rem;font-family:'Courier New',monospace;font-size:.82rem;color:#a8edff;word-break:break-all;overflow-x:auto}

/* ── STATUS DOT ── */
.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:.4rem}
.status-dot.green{background:var(--success);box-shadow:0 0 6px var(--success)}
.status-dot.red{background:var(--danger);box-shadow:0 0 6px var(--danger)}
.status-dot.yellow{background:var(--warning);box-shadow:0 0 6px var(--warning)}

/* ── COLOR PREVIEW ── */
.color-preview-row{display:flex;align-items:center;gap:.75rem}
.color-preview-swatch{width:36px;height:36px;border-radius:8px;border:2px solid var(--border);flex-shrink:0;transition:.2s}

/* ── TABS ── */
.tabs{display:flex;gap:.25rem;margin-bottom:1.5rem;background:var(--card2);padding:.25rem;border-radius:12px;width:fit-content}
.tab-btn{padding:.5rem 1.1rem;border-radius:8px;border:none;background:none;color:var(--muted);font-size:.85rem;font-weight:600;cursor:pointer;transition:.2s;font-family:inherit}
.tab-btn.active{background:var(--card);color:var(--text);box-shadow:0 2px 8px rgba(0,0,0,.2)}

/* ── MODAL ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(4px);z-index:200;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:2rem;width:100%;max-width:500px;margin:1rem;transform:translateY(20px);transition:transform .3s;box-shadow:0 30px 60px rgba(0,0,0,.6)}
.modal-overlay.open .modal{transform:translateY(0)}
.modal-title{font-size:1rem;font-weight:600;margin-bottom:1.25rem}
.modal-footer{display:flex;gap:.75rem;justify-content:flex-end;margin-top:1.5rem}

/* ── DEMO BLOCK MODAL ── */
.demo-block-modal{text-align:center;padding:2.5rem 2rem}
.demo-block-icon{display:flex;align-items:center;justify-content:center;width:80px;height:80px;border-radius:50%;background:rgba(255,71,87,.15);border:2px solid rgba(255,71,87,.4);color:var(--danger);margin:0 auto 1.5rem}
.demo-block-title{font-size:1.4rem;font-weight:700;color:var(--danger);margin-bottom:.75rem;letter-spacing:-.3px}
.demo-block-body{font-size:.95rem;color:var(--muted);line-height:1.7;margin-bottom:1.75rem}
.demo-block-body strong{color:var(--text)}
.demo-block-btn{margin:0 auto;padding:.85rem 2.5rem;font-size:1rem}

/* ── Sidebar overlay (mobile) ── */
.sidebar-overlay-lena{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.5);z-index:99;
}
.sidebar-overlay-lena.open{display:block}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  body.admin-body{overflow-x:hidden}
  .sidebar{transform:translateX(-100%);position:fixed;z-index:100}
  .sidebar.open{transform:translateX(0)}
  .admin-main{margin-left:0}
  .menu-toggle{display:block}
}
@media(max-width:600px){
  .stats-grid{grid-template-columns:1fr 1fr}
  .admin-content{padding:1rem .85rem}
  .form-grid{grid-template-columns:1fr}
  .admin-header{padding:0 1rem;gap:.6rem}
  .user-badge{display:none}
  .card{padding:1.1rem}
  .card-header{flex-wrap:wrap;gap:.75rem}
  .card-header .btn{width:100%;justify-content:center}
  .btn-group{flex-direction:column;align-items:stretch}
  .btn-group .btn{justify-content:center}
  table{font-size:.82rem}
  thead th,tbody td{padding:.65rem .75rem}
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .modal{padding:1.5rem 1.25rem;margin:.75rem}
  .demo-block-modal{padding:2rem 1.25rem}
  .demo-block-icon{width:64px;height:64px}
  .demo-block-title{font-size:1.2rem}
  .tabs{width:100%}
  .tab-btn{flex:1}
  .input-group{flex-direction:column}
  .input-group input{border-radius:10px!important;border-right:1px solid var(--border)!important;margin-bottom:.5rem}
  .input-group .btn{border-radius:10px!important;width:100%;justify-content:center}
}
@media(max-width:400px){
  .stats-grid{grid-template-columns:1fr}
  .admin-header{padding:0 .75rem}
  .page-title{font-size:.95rem}
  .admin-content{padding:.75rem .65rem}
}