/* ================================================================
   KloudVin — Global Stylesheet
   Dark Cyber-Terminal Theme
   ================================================================ */

/* --- CSS VARIABLES --- */
:root {
  --bg-void: #060a13;
  --bg-deep: #0b1120;
  --bg-surface: #111a2e;
  --bg-elevated: #162039;
  --bg-hover: #1b2847;
  --neon-cyan: #00f0ff;
  --neon-blue: #3b82f6;
  --neon-violet: #8b5cf6;
  --neon-emerald: #10b981;
  --neon-amber: #f59e0b;
  --neon-rose: #f43f5e;
  --neon-sky: #38bdf8;
  --text-white: #f1f5f9;
  --text-light: #cbd5e1;
  --text-muted: #64748b;
  --text-dim: #475569;
  --border-subtle: rgba(255,255,255,0.06);
  --border-glow: rgba(0,240,255,0.15);
  --glass: rgba(11,17,32,0.8);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
}

/* --- RESET --- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'DM Sans',sans-serif;
  background:var(--bg-void);
  color:var(--text-white);
  line-height:1.7;
  overflow-x:hidden;
  min-height:100vh;
}
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
button { cursor:pointer; font-family:inherit; }
ul { list-style:none; }

/* --- SCROLLBAR --- */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--bg-void); }
::-webkit-scrollbar-thumb { background:var(--neon-cyan); border-radius:3px; }

/* ================================================================
   AMBIENT BACKGROUND
   ================================================================ */
.ambient { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.ambient-grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(0,240,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,240,255,.025) 1px, transparent 1px);
  background-size:80px 80px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, black, transparent);
}
.ambient-orb { position:absolute; border-radius:50%; filter:blur(100px); animation:drift 25s ease-in-out infinite; }
.orb-a { width:600px; height:600px; background:radial-gradient(circle, rgba(0,240,255,.08), transparent 70%); top:-10%; left:-10%; }
.orb-b { width:500px; height:500px; background:radial-gradient(circle, rgba(139,92,246,.07), transparent 70%); bottom:5%; right:-8%; animation-delay:-8s; }
.orb-c { width:400px; height:400px; background:radial-gradient(circle, rgba(16,185,129,.05), transparent 70%); top:40%; left:50%; animation-delay:-16s; }
@keyframes drift {
  0%,100% { transform:translate(0,0) scale(1); }
  33% { transform:translate(40px,-50px) scale(1.08); }
  66% { transform:translate(-30px,40px) scale(.94); }
}
.scanline {
  position:fixed; top:0; left:0; width:100%; height:100%;
  z-index:0; pointer-events:none;
  background:repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,240,255,.008) 2px, rgba(0,240,255,.008) 4px);
}

/* ================================================================
   LOGO
   ================================================================ */
.logo-svg { height:40px; width:auto; display:block; }
.logo-link { display:flex; align-items:center; gap:.6rem; }
.logo-text {
  font-family:'Fira Code',monospace; font-size:1.35rem; font-weight:700;
  background:linear-gradient(135deg, var(--neon-cyan), var(--neon-violet));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}

/* ================================================================
   NAVBAR
   ================================================================ */
.navbar {
  position:fixed; top:0; left:0; right:0; z-index:999;
  padding:1rem 2.5rem;
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(6,10,19,.7); backdrop-filter:blur(24px);
  border-bottom:1px solid var(--border-subtle); transition:all .35s ease;
}
.navbar.compact { padding:.65rem 2.5rem; box-shadow:0 8px 40px rgba(0,0,0,.4); }

.nav-menu { display:flex; align-items:center; gap:2.2rem; }
.nav-menu a {
  font-size:.82rem; font-weight:600; letter-spacing:.8px; text-transform:uppercase;
  color:var(--text-muted); position:relative; transition:color .3s;
}
.nav-menu a::after {
  content:''; position:absolute; bottom:-6px; left:0; width:0; height:2px;
  background:var(--neon-cyan); transition:width .3s; border-radius:2px;
}
.nav-menu a:hover { color:var(--neon-cyan); }
.nav-menu a:hover::after { width:100%; }
.nav-menu a.active { color:var(--neon-cyan); }
.nav-menu a.active::after { width:100%; }

.nav-right { display:flex; align-items:center; gap:.8rem; }

.nav-cta {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.55rem 1.3rem; border-radius:50px; font-size:.8rem; font-weight:600;
  background:linear-gradient(135deg, var(--neon-cyan), var(--neon-blue));
  color:var(--bg-void); border:none; transition:all .3s;
}
.nav-cta:hover { transform:translateY(-1px); box-shadow:0 0 20px rgba(0,240,255,.3); }

.hamburger { display:none; background:none; border:none; flex-direction:column; gap:5px; padding:5px; }
.hamburger span { width:24px; height:2px; background:var(--neon-cyan); border-radius:2px; transition:all .3s; }

/* Admin elements */
.admin-badge {
  display:none; align-items:center; gap:.4rem;
  font-family:'Fira Code',monospace; font-size:.7rem;
  color:var(--neon-emerald); padding:.3rem .7rem; border-radius:20px;
  background:rgba(16,185,129,.08); border:1px solid rgba(16,185,129,.2);
}
.admin-badge.show { display:inline-flex; }
.admin-only { display:none !important; }
body.admin-mode .admin-only { display:inline-flex !important; }
.administrator-only { display:none !important; }
body.administrator-mode .administrator-only { display:inline-flex !important; }

/* ================================================================
   BUTTONS
   ================================================================ */
.btn-glow {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.85rem 2rem; border-radius:var(--radius-md);
  font-size:.92rem; font-weight:600; border:none; transition:all .3s;
}
.btn-glow.primary { background:linear-gradient(135deg, var(--neon-cyan), var(--neon-blue)); color:var(--bg-void); }
.btn-glow.primary:hover { box-shadow:0 0 30px rgba(0,240,255,.35); transform:translateY(-2px); }
.btn-glow.ghost { background:transparent; color:var(--neon-cyan); border:1px solid rgba(0,240,255,.25); }
.btn-glow.ghost:hover { background:rgba(0,240,255,.06); border-color:var(--neon-cyan); }

/* ================================================================
   SECTION COMMON
   ================================================================ */
.content { position:relative; z-index:1; }
.section { padding:6rem 2rem; position:relative; }
.section-head { text-align:center; margin-bottom:4rem; }
.section-tag {
  font-family:'Fira Code',monospace; font-size:.75rem; color:var(--neon-cyan);
  text-transform:uppercase; letter-spacing:3px; display:block; margin-bottom:.8rem;
}
.section-title {
  font-family:'Sora',sans-serif; font-size:clamp(1.8rem,3.5vw,2.6rem);
  font-weight:700; margin-bottom:.8rem;
}
.section-sub { color:var(--text-muted); max-width:560px; margin:0 auto; font-size:.95rem; }

/* ================================================================
   TOPIC CARDS
   ================================================================ */
.topics-wrap { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:1.4rem; }
.tcard {
  background:var(--bg-surface); border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); padding:1.8rem; position:relative; overflow:hidden;
  transition:all .4s ease; cursor:pointer;
}
.tcard::after {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--c), transparent); opacity:0; transition:opacity .4s;
}
.tcard:hover { transform:translateY(-4px); border-color:color-mix(in srgb, var(--c) 40%, transparent); background:var(--bg-elevated); }
.tcard:hover::after { opacity:1; }
.tcard-icon {
  width:52px; height:52px; border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center; font-size:1.4rem;
  margin-bottom:1rem; color:var(--c);
  background:color-mix(in srgb, var(--c) 8%, transparent);
  border:1px solid color-mix(in srgb, var(--c) 15%, transparent);
}
.tcard h3 { font-size:1.1rem; font-weight:600; margin-bottom:.4rem; }
.tcard p { font-size:.85rem; color:var(--text-muted); line-height:1.6; }
.tcard-tags { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.8rem; }
.tcard-tags span {
  font-family:'Fira Code',monospace; font-size:.65rem;
  padding:.2rem .6rem; border-radius:20px;
  background:rgba(255,255,255,.03); border:1px solid var(--border-subtle); color:var(--text-dim);
}

/* ================================================================
   POST CARDS
   ================================================================ */
.posts-wrap { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:1.5rem; }

/* Filter buttons */
.filter-btn {
  padding: 0.45rem 1rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #64748b;
}
.filter-btn.active {
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.25);
  color: #00f0ff;
}
.filter-btn:hover {
  background: rgba(0, 240, 255, 0.05);
  border-color: rgba(0, 240, 255, 0.15);
}

.pcard {
  background:var(--bg-surface); border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); overflow:hidden; transition:all .4s; cursor:pointer;
}
.pcard:hover { transform:translateY(-4px); border-color:var(--border-glow); box-shadow:0 20px 50px rgba(0,0,0,.35); }
.pcard-thumb {
  height:190px; display:flex; align-items:center; justify-content:center;
  font-size:3rem; position:relative; overflow:hidden;
}
.pcard-thumb::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to bottom, transparent 50%, var(--bg-surface));
}
.pcard-body { padding:1.5rem; }
.pcard-meta { display:flex; align-items:center; gap:.8rem; margin-bottom:.6rem; }
.pcard-cat {
  font-family:'Fira Code',monospace; font-size:.65rem;
  padding:.18rem .55rem; border-radius:6px; text-transform:uppercase; letter-spacing:.8px;
}
.pcard-date { font-size:.78rem; color:var(--text-dim); }
.pcard h3 { font-size:1.08rem; font-weight:600; line-height:1.4; margin-bottom:.4rem; }
.pcard-body p { font-size:.83rem; color:var(--text-muted); line-height:1.6; }
.pcard-foot {
  display:flex; align-items:center; justify-content:space-between;
  margin-top:1rem; padding-top:.8rem; border-top:1px solid var(--border-subtle);
}
.pcard-time { font-size:.78rem; color:var(--text-dim); display:flex; align-items:center; gap:.3rem; }
.pcard-read {
  font-size:.82rem; color:var(--neon-cyan); font-weight:600;
  display:flex; align-items:center; gap:.3rem; transition:gap .3s;
}
.pcard-read:hover { gap:.6rem; }

/* ================================================================
   PROFILE CARD & ABOUT
   ================================================================ */
.about-wrap { max-width:1100px; margin:0 auto; }
.about-grid { display:grid; grid-template-columns:340px 1fr; gap:3rem; align-items:start; }
.prof-card {
  background:var(--bg-surface); border:1px solid var(--border-subtle);
  border-radius:var(--radius-xl); padding:2.5rem 2rem; text-align:center;
  position:relative; overflow:hidden;
}
.prof-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:90px;
  background:linear-gradient(135deg, rgba(0,240,255,.12), rgba(139,92,246,.12));
}
.prof-avatar {
  width:110px; height:110px; border-radius:50%; margin:0 auto 1rem;
  background:linear-gradient(135deg, var(--neon-cyan), var(--neon-violet));
  display:flex; align-items:center; justify-content:center;
  font-family:'Fira Code',monospace; font-size:2.2rem; font-weight:700; color:var(--bg-void);
  position:relative; z-index:1; border:4px solid var(--bg-surface);
  box-shadow:0 0 40px rgba(0,240,255,.2);
}
.prof-card h3 { font-family:'Sora',sans-serif; font-size:1.3rem; font-weight:700; position:relative; }
.prof-role { font-family:'Fira Code',monospace; font-size:.75rem; color:var(--neon-cyan); margin:.2rem 0 .8rem; }
.prof-loc { font-size:.82rem; color:var(--text-dim); display:flex; align-items:center; justify-content:center; gap:.4rem; margin-bottom:1.2rem; }
.prof-socials { display:flex; justify-content:center; gap:.6rem; margin-bottom:1.5rem; }
.prof-socials a {
  width:38px; height:38px; border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.03); border:1px solid var(--border-subtle);
  color:var(--text-muted); font-size:.95rem; transition:all .3s;
}
.prof-socials a:hover { color:var(--neon-cyan); border-color:var(--border-glow); background:rgba(0,240,255,.06); transform:translateY(-2px); }
.prof-nums { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; padding-top:1.2rem; border-top:1px solid var(--border-subtle); }
.prof-num-v { font-family:'Fira Code',monospace; font-size:1.15rem; font-weight:700; color:var(--neon-cyan); }
.prof-num-l { font-size:.68rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:.5px; }
.about-body h2 { font-family:'Sora',sans-serif; font-size:1.9rem; margin-bottom:1rem; }
.about-body .hl { color:var(--neon-cyan); }
.about-body > p { color:var(--text-light); margin-bottom:1.2rem; font-size:.95rem; }
.skill-group { margin-top:2rem; }
.skill-group h4, .cert-section h4 { font-size:.8rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:2px; margin-bottom:1rem; }
.skill-row { display:flex; align-items:center; gap:1rem; margin-bottom:.8rem; }
.skill-name { min-width:145px; font-size:.84rem; font-weight:500; }
.skill-track { flex:1; height:7px; background:rgba(255,255,255,.04); border-radius:10px; overflow:hidden; }
.skill-fill { height:100%; border-radius:10px; transition:width 1.5s ease; }
.cert-section { margin-top:2.2rem; }
.cert-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:.6rem; }
.cert-item {
  display:flex; align-items:center; gap:.5rem; padding:.6rem .9rem;
  background:rgba(255,255,255,.02); border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm); font-size:.8rem; font-weight:500; transition:all .3s;
}
.cert-item:hover { border-color:var(--border-glow); background:rgba(0,240,255,.04); }
.cert-item i { color:var(--neon-cyan); font-size:1rem; }

/* ================================================================
   NEWSLETTER
   ================================================================ */
.nl-box {
  max-width:680px; margin:0 auto; text-align:center;
  background:var(--bg-surface); border:1px solid var(--border-subtle);
  border-radius:var(--radius-xl); padding:3.5rem 2.5rem; position:relative; overflow:hidden;
}
.nl-box::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 0%, rgba(0,240,255,.04), transparent 65%); pointer-events:none; }
.nl-box h2 { font-family:'Sora',sans-serif; font-size:1.7rem; margin-bottom:.6rem; position:relative; }
.nl-box p { color:var(--text-muted); margin-bottom:1.8rem; position:relative; }
.nl-form { display:flex; gap:.7rem; max-width:460px; margin:0 auto; position:relative; }
.nl-form input {
  flex:1; padding:.85rem 1.1rem; background:var(--bg-void);
  border:1px solid var(--border-subtle); border-radius:var(--radius-md);
  color:var(--text-white); font-size:.9rem; outline:none; transition:border-color .3s; font-family:'DM Sans',sans-serif;
}
.nl-form input:focus { border-color:var(--neon-cyan); }
.nl-form input::placeholder { color:var(--text-dim); }

/* ================================================================
   FOOTER
   ================================================================ */
.footer { border-top:1px solid var(--border-subtle); padding:2.5rem 2rem; position:relative; z-index:1; }
.footer-inner { max-width:1200px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1.5rem; }
.footer-brand { display:flex; flex-direction:column; gap:.2rem; }
.footer-brand .logo-text { font-size:1.1rem; }
.footer-brand span { font-size:.75rem; color:var(--text-dim); }
.footer-nav { display:flex; gap:1.8rem; }
.footer-nav a { font-size:.82rem; color:var(--text-muted); transition:color .3s; }
.footer-nav a:hover { color:var(--neon-cyan); }
.footer-social { display:flex; gap:.5rem; }
.footer-social a {
  width:34px; height:34px; border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.03); border:1px solid var(--border-subtle);
  color:var(--text-muted); transition:all .3s;
}
.footer-social a:hover { color:var(--neon-cyan); border-color:var(--border-glow); }

/* Admin lock */
.admin-lock {
  width:34px; height:34px; border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.03);
  color:var(--text-dim); font-size:.7rem; transition:all .3s; cursor:pointer;
  opacity:.3; margin-left:.4rem;
}
.admin-lock:hover { opacity:.7; color:var(--text-muted); }
.admin-lock.unlocked { opacity:1; color:var(--neon-emerald); border-color:rgba(16,185,129,.3); }

/* Admin Modal */
.admin-modal-overlay {
  position:fixed; inset:0; z-index:5000;
  background:rgba(0,0,0,.7); backdrop-filter:blur(12px);
  display:none; opacity:0; pointer-events:none; transition:opacity .3s;
}
.admin-modal-overlay.open { display:flex; opacity:1; pointer-events:all; }
/* CRITICAL: Allow clicks to pass through to modal */
.admin-modal-overlay.open > * {
  pointer-events:auto;
}
.admin-modal {
  background:var(--bg-deep); border:1px solid var(--border-glow);
  border-radius:var(--radius-xl); padding:2.5rem; width:380px; max-width:90vw;
  text-align:center; position:relative; transform:scale(.9); transition:transform .3s;
  box-shadow:0 20px 60px rgba(0,0,0,.5), 0 0 40px rgba(0,240,255,.05);
  pointer-events:auto; /* Ensure modal content is clickable */
  z-index:5001; /* Above overlay */
}
.admin-modal-overlay.open .admin-modal { transform:scale(1); }
.admin-modal-icon {
  width:64px; height:64px; border-radius:50%; margin:0 auto 1.2rem;
  background:rgba(0,240,255,.06); border:1px solid rgba(0,240,255,.15);
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; color:var(--neon-cyan);
}
.admin-modal h3 { font-family:'Sora',sans-serif; font-size:1.3rem; margin-bottom:.4rem; }
.admin-modal p { font-size:.85rem; color:var(--text-muted); margin-bottom:1.5rem; }
.admin-modal .form-input { text-align:center; letter-spacing:2px; font-size:1rem; margin-bottom:.8rem; }
/* Override center alignment for Users view inputs */
#adminUsersView .form-input,
#adminUsersView .form-select {
  text-align:left;
  letter-spacing:normal;
  pointer-events:auto;
}
/* Ensure all interactive elements in modal are clickable */
.admin-modal input,
.admin-modal select,
.admin-modal button,
.admin-modal a {
  pointer-events:auto !important;
}
/* Ensure all content in modal is interactive */
.admin-modal > *,
.admin-modal * {
  pointer-events:auto;
}
.admin-modal .error-msg { font-size:.78rem; color:var(--neon-rose); margin-bottom:.8rem; display:none; }
.admin-modal .error-msg.show { display:block; }
.admin-modal-close {
  position:absolute; top:1rem; right:1rem;
  width:32px; height:32px; border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.04); border:1px solid var(--border-subtle);
  color:var(--text-muted); font-size:.85rem; cursor:pointer; transition:all .3s;
}
.admin-modal-close:hover { color:var(--neon-rose); border-color:rgba(244,63,94,.3); }

/* ================================================================
   EDITOR PANEL
   ================================================================ */
.editor-overlay {
  position:fixed; inset:0; z-index:2000;
  background:rgba(0,0,0,.6); backdrop-filter:blur(8px);
  display:none; opacity:0; pointer-events:none; transition:opacity .35s;
}
.editor-overlay.open { display:block; opacity:1; pointer-events:all; }
.editor-panel {
  position:fixed; top:0; right:-600px; z-index:2001;
  width:580px; max-width:95vw; height:100vh; overflow-y:auto;
  background:var(--bg-deep); border-left:1px solid var(--border-glow);
  padding:2rem; transition:right .4s cubic-bezier(.4,0,.2,1);
  box-shadow:-20px 0 60px rgba(0,0,0,.5);
}
.editor-panel.open { right:0; }
.editor-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:2rem; }
.editor-header h2 { font-family:'Sora',sans-serif; font-size:1.4rem; display:flex; align-items:center; gap:.6rem; }
.editor-header h2 i { color:var(--neon-cyan); }
.editor-help-btn {
  padding:0.5rem 1rem; border-radius:var(--radius-sm);
  display:flex; align-items:center; gap:0.5rem;
  background:rgba(0,240,255,.08); border:1px solid rgba(0,240,255,.2);
  color:var(--neon-cyan); font-size:0.85rem; font-weight:500; transition:all .3s;
}
.editor-help-btn:hover { background:rgba(0,240,255,.15); border-color:rgba(0,240,255,.4); }
.editor-close {
  width:36px; height:36px; border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.04); border:1px solid var(--border-subtle);
  color:var(--text-muted); font-size:1rem; transition:all .3s;
}
.editor-close:hover { color:var(--neon-rose); border-color:rgba(244,63,94,.3); }

/* Form elements */
.form-group { margin-bottom:1.3rem; }
.form-label { display:block; font-size:.8rem; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px; margin-bottom:.5rem; }
.form-input, .form-select, .form-textarea {
  width:100%; padding:.8rem 1rem;
  background:var(--bg-void); border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm); color:var(--text-white);
  font-family:'DM Sans',sans-serif; font-size:.9rem; outline:none; transition:border-color .3s;
  pointer-events:auto; /* Ensure inputs are clickable */
  user-select:text; /* Ensure text can be selected */
  -webkit-user-select:text;
}
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color:var(--neon-cyan); }
.form-select {
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center;
}
.form-select option { background:var(--bg-deep); color:var(--text-white); }
.form-textarea { min-height:250px; resize:vertical; line-height:1.8; font-family:'Fira Code',monospace; font-size:.85rem; }
.form-hint { font-size:.72rem; color:var(--text-dim); margin-top:.4rem; display:flex; align-items:center; gap:.3rem; }
.form-hint i { color:var(--neon-cyan); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }

/* Tags */
.tag-input-wrap {
  display:flex; flex-wrap:wrap; gap:.4rem; padding:.6rem;
  background:var(--bg-void); border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm); min-height:44px; align-items:center; transition:border-color .3s;
}
.tag-input-wrap:focus-within { border-color:var(--neon-cyan); }
.tag-pill {
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.2rem .6rem; border-radius:20px; font-size:.75rem; font-weight:500;
  background:rgba(0,240,255,.08); border:1px solid rgba(0,240,255,.2); color:var(--neon-cyan);
}
.tag-pill button { background:none; border:none; color:var(--neon-cyan); font-size:.8rem; cursor:pointer; padding:0; line-height:1; }
.tag-input { flex:1; min-width:100px; background:none; border:none; color:var(--text-white); font-size:.85rem; outline:none; font-family:'DM Sans',sans-serif; }
.tag-input::placeholder { color:var(--text-dim); }

/* Toolbar */
.toolbar { display:flex; gap:.3rem; margin-bottom:.5rem; flex-wrap:wrap; }
.toolbar button {
  width:34px; height:34px; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.03); border:1px solid var(--border-subtle);
  color:var(--text-muted); font-size:.8rem; transition:all .2s;
}
.toolbar button:hover { color:var(--neon-cyan); border-color:var(--border-glow); background:rgba(0,240,255,.06); }
.toolbar-sep { width:1px; background:var(--border-subtle); margin:0 .3rem; }

.editor-actions { display:flex; gap:.8rem; margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--border-subtle); }
.btn-publish {
  flex:1; display:flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.85rem; border-radius:var(--radius-md); font-size:.9rem; font-weight:600;
  background:linear-gradient(135deg, var(--neon-cyan), var(--neon-blue));
  color:var(--bg-void); border:none; transition:all .3s;
}
.btn-publish:hover { box-shadow:0 0 25px rgba(0,240,255,.3); transform:translateY(-1px); }
.btn-preview-ed {
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.85rem 1.5rem; border-radius:var(--radius-md); font-size:.9rem; font-weight:600;
  background:transparent; color:var(--neon-cyan); border:1px solid rgba(0,240,255,.25); transition:all .3s;
}
.btn-preview-ed:hover { background:rgba(0,240,255,.06); }

/* ================================================================
   EDITOR MODE TOGGLE
   ================================================================ */
.editor-mode-toggle {
  display:flex; gap:4px; margin-bottom:1.5rem;
  background:var(--bg-void); border-radius:var(--radius-sm); padding:4px;
  border:1px solid var(--border-subtle);
}
.mode-btn {
  flex:1; padding:.7rem; border:none; border-radius:6px;
  font-size:.82rem; font-weight:600; cursor:pointer; transition:all .3s;
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  background:transparent; color:var(--text-dim);
}
.mode-btn:hover { color:var(--text-light); }
.mode-btn.active {
  background:linear-gradient(135deg, rgba(0,240,255,.12), rgba(59,130,246,.12));
  color:var(--neon-cyan); box-shadow:0 2px 12px rgba(0,240,255,.1);
}

/* ================================================================
   UPLOAD ZONE
   ================================================================ */
.upload-zone {
  border:2px dashed rgba(255,255,255,.08); border-radius:var(--radius-md);
  background:rgba(255,255,255,.015); transition:all .35s; position:relative;
  cursor:pointer;
}
.upload-zone:hover, .upload-zone.dragover {
  border-color:var(--neon-cyan); background:rgba(0,240,255,.03);
}
.upload-zone.dragover { box-shadow:0 0 30px rgba(0,240,255,.08); }
.upload-zone-inner {
  padding:2.5rem 1.5rem; text-align:center;
}
.upload-icon {
  width:64px; height:64px; border-radius:50%; margin:0 auto 1rem;
  background:rgba(0,240,255,.06); border:1px solid rgba(0,240,255,.12);
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; color:var(--neon-cyan); transition:transform .3s;
}
.upload-zone:hover .upload-icon { transform:translateY(-3px); }
.upload-zone.dragover .upload-icon { transform:scale(1.1); animation:pulse-glow 1s ease infinite; }
@keyframes pulse-glow { 0%,100%{box-shadow:0 0 10px rgba(0,240,255,.1)} 50%{box-shadow:0 0 25px rgba(0,240,255,.25)} }
.upload-title { font-size:1rem; font-weight:600; color:var(--text-light); margin-bottom:.3rem; }
.upload-sub { font-size:.85rem; color:var(--text-dim); }
.upload-browse { color:var(--neon-cyan); cursor:pointer; text-decoration:underline; text-underline-offset:3px; font-weight:600; }
.upload-browse:hover { color:#3bdcff; }
.upload-formats {
  margin-top:1rem; font-family:'Fira Code',monospace; font-size:.7rem;
  color:var(--text-dim); display:flex; align-items:center; justify-content:center; gap:.3rem;
}

/* Uploaded file info card */
.upload-file-info {
  display:flex; align-items:center; gap:1rem; padding:1rem 1.2rem;
  background:var(--bg-surface); border:1px solid rgba(16,185,129,.2);
  border-radius:var(--radius-md); margin-top:.8rem;
  animation:slideIn .3s ease;
}
@keyframes slideIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.upload-file-icon {
  width:42px; height:42px; border-radius:var(--radius-sm); flex-shrink:0;
  background:rgba(0,240,255,.06); border:1px solid rgba(0,240,255,.12);
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; color:var(--neon-cyan);
}
.upload-file-details { flex:1; display:flex; flex-direction:column; min-width:0; }
.upload-file-name {
  font-size:.88rem; font-weight:600; color:var(--text-white);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.upload-file-size { font-family:'Fira Code',monospace; font-size:.72rem; color:var(--text-dim); }
.upload-file-status {
  font-family:'Fira Code',monospace; font-size:.75rem;
  color:var(--neon-emerald); display:flex; align-items:center; gap:.3rem; flex-shrink:0;
}
.upload-file-status.processing { color:var(--neon-amber); }
.upload-file-status.error { color:var(--neon-rose); }
.upload-file-remove {
  width:30px; height:30px; border-radius:6px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(244,63,94,.06); border:1px solid rgba(244,63,94,.15);
  color:var(--neon-rose); font-size:.8rem; cursor:pointer; transition:all .3s;
}
.upload-file-remove:hover { background:rgba(244,63,94,.12); border-color:rgba(244,63,94,.3); }

/* Upload content preview */
.upload-preview {
  background:var(--bg-void); border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm); padding:1.2rem; max-height:300px;
  overflow-y:auto; font-family:'Fira Code',monospace; font-size:.82rem;
  color:var(--text-light); line-height:1.7; white-space:pre-wrap; word-break:break-word;
}

/* Upload mode image upload */
.image-upload-section {
  display:flex; flex-direction:column; gap:8px;
}
.btn-upload-image {
  padding:12px 20px; background:var(--bg-card); border:1px solid var(--neon-cyan);
  border-radius:var(--radius-sm); color:var(--neon-cyan); font-size:.9rem;
  font-weight:500; cursor:pointer; transition:all .3s; display:inline-flex;
  align-items:center; gap:8px; width:fit-content;
}
.btn-upload-image:hover {
  background:rgba(34,211,238,.08); border-color:var(--neon-cyan); transform:translateY(-1px);
}
.btn-upload-image i { font-size:1rem; }

.uploaded-image-item {
  background:var(--bg-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm); padding:12px; margin-bottom:8px;
  display:flex; align-items:center; gap:12px;
}
.uploaded-image-thumb {
  width:60px; height:60px; border-radius:6px; object-fit:cover;
  border:1px solid var(--border-subtle);
}
.uploaded-image-info {
  flex:1; min-width:0;
}
.uploaded-image-name {
  font-size:.85rem; color:var(--text-white); font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.uploaded-image-url {
  font-size:.75rem; color:var(--text-dim); font-family:'Fira Code',monospace;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:4px;
}
.uploaded-image-actions {
  display:flex; gap:6px;
}
.btn-copy-url {
  padding:6px 12px; background:var(--bg-void); border:1px solid var(--neon-emerald);
  border-radius:6px; color:var(--neon-emerald); font-size:.75rem;
  cursor:pointer; transition:all .3s; white-space:nowrap;
}
.btn-copy-url:hover {
  background:rgba(16,185,129,.08); border-color:var(--neon-emerald);
}

/* ================================================================
   ARTICLE PAGE
   ================================================================ */
.article-hero {
  padding:8rem 2rem 3rem; text-align:center; max-width:820px; margin:0 auto;
}
.article-hero .pcard-cat { font-size:.8rem; padding:.3rem .8rem; }
.article-hero h1 {
  font-family:'Sora',sans-serif; font-size:clamp(1.8rem,4vw,2.8rem);
  font-weight:700; line-height:1.2; margin:1rem 0;
}
.article-hero .article-meta {
  display:flex; align-items:center; justify-content:center; gap:1.5rem;
  color:var(--text-dim); font-size:.85rem; margin-top:1rem;
}
.article-hero .article-meta i { color:var(--neon-cyan); }

.article-content {
  max-width:780px; margin:0 auto; padding:2rem;
}
.article-content h2 {
  font-family:'Sora',sans-serif; color:var(--neon-cyan); font-size:1.5rem;
  margin:2.5rem 0 1rem; padding-bottom:.5rem; border-bottom:1px solid var(--border-subtle);
}
.article-content h3 {
  font-family:'Sora',sans-serif; color:var(--text-white); font-size:1.2rem; margin:2rem 0 .8rem;
}
.article-content p { color:var(--text-light); margin-bottom:1.2rem; font-size:1rem; line-height:1.9; }
.article-content code {
  background:rgba(0,240,255,.06); padding:.15rem .4rem; border-radius:4px;
  font-family:'Fira Code',monospace; font-size:.88rem; color:var(--neon-cyan);
}
.article-content pre {
  background:var(--bg-deep); border:1px solid var(--border-subtle);
  border-radius:var(--radius-md); padding:1.5rem; overflow-x:auto; margin:1.5rem 0;
}
.article-content pre code { background:none; padding:0; color:var(--text-light); display:block; }
.article-content blockquote {
  border-left:3px solid var(--neon-violet); margin:1.5rem 0; padding:.8rem 1.2rem;
  background:rgba(139,92,246,.04); border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}
.article-content ul, .article-content ol { margin:1rem 0; padding-left:1.5rem; color:var(--text-light); }
.article-content li { margin-bottom:.5rem; }
.article-content img { border-radius:var(--radius-md); margin:1.5rem 0; }
.article-content hr { border:none; border-top:1px solid var(--border-subtle); margin:2rem 0; }
.article-content a { color:var(--neon-cyan); text-decoration:underline; text-underline-offset:3px; }

/* Article author card */
.article-author {
  max-width:780px; margin:3rem auto; padding:2rem;
  background:var(--bg-surface); border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); display:flex; align-items:center; gap:1.5rem;
}
.article-author-avatar {
  width:70px; height:70px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg, var(--neon-cyan), var(--neon-violet));
  display:flex; align-items:center; justify-content:center;
  font-family:'Fira Code',monospace; font-size:1.3rem; font-weight:700; color:var(--bg-void);
}
.article-author-info h4 { font-size:1rem; margin-bottom:.2rem; }
.article-author-info p { font-size:.85rem; color:var(--text-muted); }

/* ================================================================
   TOAST
   ================================================================ */
.toast {
  position:fixed; bottom:2rem; right:2rem; z-index:9999;
  padding:1rem 1.5rem; border-radius:var(--radius-md);
  background:var(--bg-elevated); border:1px solid var(--neon-emerald);
  color:var(--neon-emerald); font-weight:600; font-size:.9rem;
  display:flex; align-items:center; gap:.6rem;
  transform:translateY(100px); opacity:0; transition:all .4s ease;
  box-shadow:0 10px 40px rgba(0,0,0,.4);
}
.toast.show { transform:translateY(0); opacity:1; }

/* ================================================================
   REVEAL
   ================================================================ */
.reveal { opacity:0; transform:translateY(35px); transition:opacity .7s ease, transform .7s ease; }
.reveal.vis { opacity:1; transform:translateY(0); }

/* ================================================================
   HERO (HOME)
   ================================================================ */
.hero {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:7rem 2rem 5rem; text-align:center; position:relative;
}
.hero-inner { max-width:880px; }
.hero-badge {
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.5rem 1.3rem; border-radius:50px;
  background:rgba(0,240,255,.06); border:1px solid rgba(0,240,255,.15);
  font-family:'Fira Code',monospace; font-size:.78rem; color:var(--neon-cyan);
  margin-bottom:2rem; animation:fadeUp .7s ease both;
}
.hero-badge .cursor { animation:blink 1s step-end infinite; }
@keyframes blink { 50% { opacity:0; } }
.hero h1 {
  font-family:'Sora',sans-serif; font-size:clamp(2.4rem,5.5vw,4.2rem);
  font-weight:800; line-height:1.12; margin-bottom:1.5rem;
  animation:fadeUp .7s ease .15s both;
}
.hero .glow {
  background:linear-gradient(135deg, var(--neon-cyan), var(--neon-violet), var(--neon-rose));
  background-size:250% auto;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  animation:fadeUp .7s ease .15s both, shimmer 5s linear infinite;
}
@keyframes shimmer { 0% { background-position:0% center; } 100% { background-position:250% center; } }
.hero p {
  font-size:1.15rem; color:var(--text-light); max-width:620px; margin:0 auto 2.5rem;
  animation:fadeUp .7s ease .3s both;
}
.hero-actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; animation:fadeUp .7s ease .45s both; }
.hero-metrics {
  display:flex; justify-content:center; gap:3.5rem; margin-top:4rem;
  animation:fadeUp .7s ease .6s both;
}
.metric { text-align:center; }
.metric-val { font-family:'Fira Code',monospace; font-size:2rem; font-weight:700; color:var(--neon-cyan); }
.metric-label { font-size:.75rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:1.5px; margin-top:.2rem; }
@keyframes fadeUp { from { opacity:0; transform:translateY(35px); } to { opacity:1; transform:translateY(0); } }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media(max-width:768px) {
  .nav-menu { display:none; }
  .hamburger { display:flex; }
  .nav-menu.active {
    display:flex; flex-direction:column; position:absolute; top:100%; left:0; right:0;
    background:rgba(6,10,19,.97); padding:1.5rem 2rem; gap:1.2rem;
    border-bottom:1px solid var(--border-subtle);
  }
  .hero-metrics { gap:1.5rem; }
  .metric-val { font-size:1.5rem; }
  .about-grid { grid-template-columns:1fr; }
  .topics-wrap, .posts-wrap { grid-template-columns:1fr; }
  .nl-box { padding:2rem 1.5rem; }
  .nl-form { flex-direction:column; }
  .footer-inner { flex-direction:column; text-align:center; }
  .footer-nav { flex-wrap:wrap; justify-content:center; }
  .form-row { grid-template-columns:1fr; }
  .article-author { flex-direction:column; text-align:center; }
}

/* ================================================================
   CMS SETTINGS MODAL
   ================================================================ */
.cms-modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  z-index: 4998;
}

.cms-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  width: 90%;
  max-width: 900px;
  max-height: 85vh;
  z-index: 4999;
  display: none;
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  flex-direction: column;
}

.cms-modal.show {
  display: flex;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.cms-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid var(--border-subtle);
  background: rgba(16, 185, 129, 0.03);
}

.cms-modal-header h2 {
  margin: 0;
  font-size: 1.5rem;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.cms-modal-header h2 i {
  color: var(--neon-green);
}

.cms-modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.2s;
}

.cms-modal-close:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}

.cms-modal-body {
  padding: 2rem;
  overflow-y: auto;
  flex: 1;
}

.cms-gear-btn {
  background: rgba(16, 185, 129, 0.1) !important;
  border: 1px solid rgba(16, 185, 129, 0.2) !important;
  color: var(--neon-green) !important;
  padding: 0.5rem 0.75rem !important;
  margin-left: 0.5rem;
}

.cms-gear-btn:hover {
  background: rgba(16, 185, 129, 0.15) !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
  transform: translateY(-1px);
}

.cms-gear-btn i {
  font-size: 1rem;
}

/* CMS Tabs */
.cms-tabs {
  display: flex;
  gap: 0.5rem;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 2rem;
  overflow-x: auto;
}

.cms-tab {
  background: none;
  border: none;
  color: var(--text-muted);
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
  white-space: nowrap;
}

.cms-tab:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.02);
}

.cms-tab.active {
  color: var(--neon-green);
  border-bottom-color: var(--neon-green);
}

.cms-tab i {
  margin-right: 0.5rem;
}

.cms-tab-content {
  display: none;
}

.cms-tab-content.active {
  display: block;
}

/* CMS Form Styles */
.cms-form-group {
  margin-bottom: 1.5rem;
}

.cms-form-group label {
  display: block;
  color: var(--text-primary);
  font-weight: 500;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

.cms-form-group input,
.cms-form-group textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  color: var(--text-primary);
  font-size: 0.95rem;
  transition: all 0.2s;
}

.cms-form-group input:focus,
.cms-form-group textarea:focus {
  outline: none;
  border-color: var(--neon-green);
  background: rgba(16, 185, 129, 0.05);
}

.cms-form-group textarea {
  min-height: 100px;
  resize: vertical;
  font-family: inherit;
}

.cms-form-help {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

.cms-btn-group {
  display: flex;
  gap: 0.75rem;
  margin-top: 2rem;
}

.cms-btn {
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  font-size: 0.95rem;
}

.cms-btn-primary {
  background: var(--neon-green);
  color: var(--bg-primary);
}

.cms-btn-primary:hover {
  background: #0ea574;
  transform: translateY(-1px);
}

.cms-btn-secondary {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
}

.cms-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
}

@media(max-width: 768px) {
  .cms-modal {
    width: 95%;
    max-height: 90vh;
  }
  
  .cms-modal-header {
    padding: 1rem 1.5rem;
  }
  
  .cms-modal-body {
    padding: 1.5rem;
  }
  
  .cms-tabs {
    gap: 0.25rem;
  }
  
  .cms-tab {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
  }
}

/* ================================================================
   USER MANAGEMENT LIST
   ================================================================ */
.manage-list {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
}

.manage-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-subtle);
  transition: background 0.2s;
}

.manage-item:last-child {
  border-bottom: none;
}

.manage-item:hover {
  background: rgba(255, 255, 255, 0.03);
}

.manage-item-info {
  flex: 1;
}

.manage-item-title {
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.manage-item-meta {
  font-size: 0.8rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.manage-item-cat {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.manage-item-actions {
  display: flex;
  gap: 0.5rem;
}

.manage-btn {
  background: none;
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.85rem;
  pointer-events: auto; /* Ensure buttons are clickable */
}

.manage-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--text-muted);
  color: var(--text-primary);
}

.manage-btn-del {
  border-color: rgba(255, 82, 82, 0.3);
  color: rgba(255, 82, 82, 0.8);
}

.manage-btn-del:hover {
  background: rgba(255, 82, 82, 0.1);
  border-color: rgba(255, 82, 82, 0.5);
  color: rgb(255, 82, 82);
}

.manage-btn-edit {
  border-color: rgba(59, 130, 246, 0.3);
  color: rgba(59, 130, 246, 0.8);
}

.manage-btn-edit:hover {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.5);
  color: rgb(59, 130, 246);
}

/* ================================================================
   FORCE FIX USER MANAGEMENT - NUCLEAR OPTION
   ================================================================ */
#adminUsersView {
  pointer-events: auto !important;
}

#adminUsersView * {
  pointer-events: auto !important;
}

#adminUsersView input,
#adminUsersView select,
#adminUsersView button {
  pointer-events: auto !important;
  user-select: text !important;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  cursor: text !important;
  position: relative !important;
  z-index: 1 !important;
}

#adminUsersView select {
  cursor: pointer !important;
}

#adminUsersView button {
  cursor: pointer !important;
  user-select: none !important;
}

.admin-modal {
  pointer-events: auto !important;
  z-index: 10000 !important;
  position: relative !important;
}

/* Ensure delete buttons work */
.manage-btn {
  pointer-events: auto !important;
  cursor: pointer !important;
  user-select: none !important;
}