/* =========================================================================
   Components — self-contained, reusable UI pieces. Each block below can be
   read (and changed) independently of the others.
   ========================================================================= */

/* ---------- Brand / eyebrow ---------- */
.brand{ font-weight:700; font-size:1.1rem; letter-spacing:-.01em; }
.brand span{ color:var(--accent); }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--text-dim);
  background:var(--surface); border:1px solid var(--border); padding:6px 14px; border-radius:999px;
}
.eyebrow::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent); }

.status-dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent); display:inline-block; }
.status-online{ color:var(--accent) !important; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 26px; border-radius:999px;
  font-weight:600; font-size:.9rem; transition:transform .2s var(--ease), background .2s var(--ease), opacity .2s var(--ease), box-shadow .2s var(--ease);
}
.btn-primary{ background:var(--btn-primary-bg); color:var(--btn-primary-text); box-shadow:0 0 24px var(--btn-primary-glow); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 0 32px var(--btn-primary-glow); }
.btn-outline{ border:1px solid var(--overlay-18); background:var(--overlay-05); backdrop-filter:blur(10px); color:var(--text); }
.btn-outline:hover{ background:var(--overlay-12); }
.btn-sm{ padding:8px 18px; font-size:.82rem; }
.nav-cta{
  display:none;
  height:38px;
  padding:0 16px;
  font-size:.84rem;
  border-radius:20px;
}
@media(min-width:900px){
  .nav-cta{ display:inline-flex; align-items:center; justify-content:center; }
}

/* ---------- Theme toggle ---------- */
.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:50%; border:1px solid var(--border); background:var(--surface); flex-shrink:0;
}
.theme-toggle:hover{ border-color:var(--text-faint); }
.theme-toggle svg{ width:18px; height:18px; stroke:var(--text); }
.theme-toggle .icon-moon{ display:none; }
:root[data-theme="light"] .theme-toggle .icon-sun{ display:none; }
:root[data-theme="light"] .theme-toggle .icon-moon{ display:block; }

/* ---------- Language toggle ---------- */
.lang-toggle{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:38px; padding:0 12px;
  border-radius:20px; border:1px solid var(--border); background:var(--surface); flex-shrink:0;
  font-size:.78rem; font-weight:700; letter-spacing:.05em; color:var(--text);
  cursor:pointer;
  transition:border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease), transform .15s var(--ease);
}
.lang-toggle:hover{ border-color:var(--text-faint); background:var(--surface-2); transform:scale(1.03); }
.lang-toggle:active{ transform:scale(0.97); }
.lang-toggle .nav-icon-globe{ width:15px; height:15px; stroke:var(--accent); flex-shrink:0; }
.lang-toggle .lang-code{ font-family:var(--font-mono); font-weight:700; color:var(--text); }

.mobile-lang-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 4px 6px; margin-top:8px; border-top:1px solid var(--border);
}
.mobile-lang-row span{ font-size:.84rem; font-weight:500; color:var(--text-dim); }


/* Nav links & mobile menu styling with icons and active states */
.nav-links a{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-size:.84rem; font-weight:500; color:var(--text-dim);
  text-decoration:none; white-space:nowrap; position:relative;
  padding:6px 2px;
  line-height:1;
  transition:color .2s var(--ease), transform .15s var(--ease);
}
.nav-links a:hover{ color:var(--text); }
.nav-links a.active{ color:var(--text); font-weight:600; }
.nav-indicator {
  position: absolute;
  bottom: -14px;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
  border-radius: 2px;
  transition: left 0.3s cubic-bezier(0.25, 1, 0.5, 1), width 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  pointer-events: none;
  opacity: 0;
}
.nav-indicator.visible {
  opacity: 1;
}
.nav-links a .nav-icon{
  width:14px; height:14px; flex-shrink:0; opacity:.72;
  transition:opacity .2s var(--ease), transform .2s var(--ease), color .2s var(--ease);
}
.nav-links a:hover .nav-icon,
.nav-links a.active .nav-icon{
  opacity:1; transform:scale(1.12); color:var(--accent);
}
.nav-links a.nav-link-external{
  color:var(--text-dim);
}
.nav-links a.nav-link-external:hover{
  color:var(--accent);
}
.nav-links a .nav-ext-arrow{
  width:11px; height:11px; flex-shrink:0; opacity:.65;
  transition:transform .2s var(--ease), opacity .2s var(--ease);
}
.nav-links a:hover .nav-ext-arrow{
  opacity:1; transform:translate(2px, -2px); color:var(--accent);
}

.mobile-menu a{
  display:flex; align-items:center; gap:12px;
  font-size:.96rem; font-weight:500; color:var(--text-dim);
  padding:10px 12px; border-radius:10px; text-decoration:none;
  transition:color .2s var(--ease), background .2s var(--ease), transform .15s var(--ease);
}
.mobile-menu a:hover, .mobile-menu a.active{
  color:var(--text); background:var(--surface); transform:none;
}
.mobile-menu a .nav-icon{
  width:18px; height:18px; flex-shrink:0; opacity:.75;
  transition:opacity .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.mobile-menu a:hover .nav-icon, .mobile-menu a.active .nav-icon{
  opacity:1; color:var(--accent); transform:scale(1.1);
}
.mobile-menu a .nav-ext-arrow{
  width:14px; height:14px; margin-left:auto; opacity:.6;
  transition:transform .2s var(--ease), opacity .2s var(--ease);
}
.mobile-menu a:hover .nav-ext-arrow{
  opacity:1; transform:translate(3px, -3px); color:var(--accent);
}

.mobile-menu-cta-wrap{
  margin-top:8px;
  padding-top:10px;
  border-top:1px solid var(--border);
}
.mobile-menu-cta{
  width:100%;
  box-sizing:border-box;
  display:flex !important;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 18px;
  font-size:.9rem;
  font-weight:600;
  border-radius:12px;
}

.nav-toggle span{
  display:block;
  width:18px;
  height:2px;
  background:var(--text);
  border-radius:2px;
  transform-origin:center;
  transition:transform .25s cubic-bezier(.4, 0, .2, 1), opacity .2s var(--ease), background .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
  background:var(--accent);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2){
  opacity:0;
  transform:scaleX(0);
}
.nav-toggle[aria-expanded="true"] span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
  background:var(--accent);
}

/* ---------- Loader ---------- */
#loader{
  position:fixed; inset:0; z-index:999;
  background:var(--bg);
  display:flex; flex-direction:column; justify-content:space-between;
  padding:28px clamp(20px,5vw,56px); box-sizing:border-box;
  overflow:hidden; pointer-events:auto;
  opacity:1;
  transition:opacity .75s cubic-bezier(.4, 0, .2, 1);
}
#loader.hide{
  opacity:0; pointer-events:none;
}

.loader-inner{
  width:100%; height:100%;
  display:flex; flex-direction:column; justify-content:space-between;
}

.loader-row{ display:flex; justify-content:space-between; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); }
.loader-center{ margin:auto; text-align:center; }
.loader-name{ font-size:clamp(1.8rem,6vw,3.2rem); font-weight:700; letter-spacing:-.02em; }
.loader-name span{ color:var(--text-faint); font-weight:600; }
.loader-role{ margin-top:10px; font-size:.75rem; letter-spacing:.18em; text-transform:uppercase; color:var(--text-dim); }
.loader-percent{
  margin-top:26px; font-size:clamp(2.4rem,9vw,4.6rem); font-weight:700; letter-spacing:-.02em;
  transition:color .25s var(--ease), text-shadow .25s var(--ease);
}
.loader-bar-wrap{
  width:min(420px,80vw); height:2px; background:var(--border); margin:0 auto; border-radius:2px;
  overflow:hidden; position:relative;
}
.loader-bar{
  height:100%; width:0%; background:var(--text);
  transition:width .15s linear, background .3s var(--ease), box-shadow .3s var(--ease);
}
.loader-bottom{ display:flex; justify-content:space-between; align-items:center; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); margin-top:14px; }
.loader-secure{ display:inline-flex; align-items:center; gap:8px; }

/* Loader Complete (100% verified state) */
#loader.loader-complete .loader-percent{
  color:var(--accent-strong);
  text-shadow:0 0 20px var(--accent-glow), 0 0 40px var(--accent-glow);
}
#loader.loader-complete .loader-bar{
  background:var(--accent-strong);
  box-shadow:0 0 10px var(--accent);
}
#loader.loader-complete #loaderStatus{
  color:var(--accent-strong);
  font-weight:600;
  text-shadow:0 0 8px var(--accent-glow);
}

/* ---------- Hero pieces ---------- */
.hero-hi{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.85rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-dim);
  margin-bottom:10px;
}
.hero-hi-prefix{ color:var(--text-dim); white-space:nowrap; }
.hero-hi-name{ color:var(--text); border-bottom:1px solid var(--text-faint); white-space:nowrap; }
.hero-status-ping{
  display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--accent); margin-right:2px; flex-shrink:0;
  position:relative; box-shadow:0 0 8px var(--accent);
}
.hero-status-ping::after{
  content:''; position:absolute; inset:-3px; border-radius:50%;
  border:1.5px solid var(--accent);
  animation:radarPing 2.2s cubic-bezier(0, .2, .8, 1) infinite;
}
.hero-role{
  font-size:clamp(1.4rem, 6vw, 1.85rem); font-weight:800; line-height:1.05;
  letter-spacing:-.03em; text-transform:uppercase; min-height:2.15em;
  background:linear-gradient(180deg, var(--text) 45%, var(--text-dim) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  transition:opacity .25s var(--ease), transform .25s var(--ease);
  word-break:keep-all;
  cursor:default;
}
#heroRole{
  display:inline-block;
  white-space:normal;
  word-break:keep-all;
  max-width:100%;
  transition:filter .2s var(--ease), transform .25s var(--ease), opacity .25s var(--ease);
}
#heroRole.decrypting{
  filter:drop-shadow(0 0 12px var(--accent));
  -webkit-text-fill-color:var(--accent-strong);
  color:var(--accent-strong);
}
.hero-role.fade, #heroRole.fade{ opacity:0; transform:translateY(8px); }
.hero-visual::before{
  content:''; position:absolute; top:2%; left:50%; transform:translateX(-50%);
  width:105%; height:90%;
  background:var(--hero-shadow);
  filter:blur(40px); pointer-events:none; z-index:0;
}
.hero-video{
  position:relative; z-index:1; width:100%; height:100%;
  object-fit:cover; object-position:center bottom; display:block;
  background: transparent;
  filter:contrast(1.12) brightness(1.05) saturate(1.18) sepia(0.08);
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 88%, transparent 100%);
  mask-image:linear-gradient(to bottom, #000 0%, #000 88%, transparent 100%);
}
.hero-tag{
  display:inline-flex; align-items:center;
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-dim); min-height:1.3em;
}
#heroTag{
  transition:color .2s var(--ease), text-shadow .2s var(--ease);
}
#heroTag.decrypting{
  color:var(--accent-strong);
  text-shadow:0 0 8px var(--accent-glow);
}
.cyber-cursor{
  display:inline-block; font-family:var(--font-mono); font-weight:700;
  color:var(--accent); margin-left:3px;
  animation:cursorBlink 1.1s steps(2, start) infinite;
}
.hero-desc{
  color:var(--text-dim); font-size:clamp(.82rem, 1vw, 1.1rem); line-height:1.38; max-width:36ch;
  margin-top:4px; min-height:2.8em;
  transition:opacity .25s var(--ease), transform .25s var(--ease), filter .25s var(--ease);
}
.hero-desc.fade{ opacity:0; transform:translateY(6px); filter:blur(4px); }
.hero-hint{ font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); margin:0; }
.scrub-thumb{ position:absolute; left:-2px; width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent); top:0; transition:top .1s linear; }

@media(max-width:959px){
  .hero-hi{ font-size:.72rem; letter-spacing:.12em; margin-bottom:4px; gap:6px; justify-content:center; }
  .hero-tag{ font-size:.68rem; letter-spacing:.1em; min-height:auto; margin-bottom:2px; justify-content:center; }
  .hero-desc{ font-size:.82rem; line-height:1.36; max-width:36ch; margin:0 auto; min-height:2.8em; margin-top:2px; }
  .hero-hint{ font-size:.65rem; letter-spacing:.1em; }
  .hero-cta .btn{ flex:1; padding:8px 14px; font-size:.8rem; min-height:38px; white-space:nowrap; }
}

@media(min-width:960px){
  .hero-role{
    font-size:clamp(1.85rem, 2.5vw, 3.2rem); line-height:1.02; min-height:2.05em;
  }
  .hero-desc{
    font-size:clamp(.95rem, 1.05vw, 1.1rem); line-height:1.6; max-width:34ch; margin-top:10px; min-height:3.6em;
  }
  .hero-video{
    background:transparent;
    filter:contrast(1.14) brightness(1.06) saturate(1.22) sepia(0.10);
    -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 90%, transparent 100%);
    mask-image:linear-gradient(to bottom, #000 0%, #000 90%, transparent 100%);
  }
}

/* ---------- Hero Gitea Forge Banner ---------- */
.hero-forge-banner{
  display:flex; flex-direction:column; gap:8px;
  margin-top:16px; padding:12px 16px;
  background:var(--forge-card-bg);
  border:1px solid var(--forge-card-border);
  border-radius:var(--radius);
  box-shadow:var(--forge-card-shadow);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  text-decoration:none; color:var(--text);
  transition:transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
  position:relative; overflow:hidden;
}
.hero-forge-banner::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity:0.8;
}
.hero-forge-banner:hover{
  transform:translateY(-3px);
  border-color:var(--accent);
  box-shadow:var(--forge-card-hover-shadow);
}
.forge-banner-head{
  display:flex; align-items:center; justify-content:space-between; width:100%;
}
.forge-pulse-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:.68rem; font-weight:700;
  letter-spacing:.08em; color:var(--accent); text-transform:uppercase;
}
.forge-pulse-dot{
  position:relative; width:8px; height:8px; border-radius:50%; background:var(--accent);
  display:inline-block;
}
.forge-pulse-dot::after{
  content:''; position:absolute; inset:-4px; border-radius:50%;
  border:1.5px solid var(--accent); animation:radarPing 2s infinite;
}
.forge-banner-sub{
  font-size:.68rem; letter-spacing:.08em; color:var(--text-faint); text-transform:uppercase;
}
.forge-banner-body{
  display:flex; align-items:center; gap:12px; width:100%;
}
.forge-icon-wrap{
  width:38px; height:38px; border-radius:10px;
  background:var(--forge-icon-bg); border:1px solid var(--forge-icon-border);
  display:flex; align-items:center; justify-content:center;
  color:var(--forge-icon-color); flex-shrink:0;
  box-shadow:0 2px 8px var(--accent-glow);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.forge-icon-wrap svg path:first-child{
  fill:var(--forge-icon-handle);
}
.hero-forge-banner:hover .forge-icon-wrap{
  transform:scale(1.1) rotate(4deg);
}
.forge-meta{
  display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; text-align:left;
}
.forge-meta-tag{
  font-family:var(--font-mono); font-size:.88rem; font-weight:700;
  color:var(--text); letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.forge-meta-desc{
  font-size:.72rem; color:var(--text-dim); line-height:1.3;
}
.forge-launch-arrow{
  color:var(--accent); display:flex; align-items:center; justify-content:center;
  transition:transform .2s var(--ease); flex-shrink:0;
}
.hero-forge-banner:hover .forge-launch-arrow{
  transform:translate(3px, -3px);
}

/* Hero Latest Post Banner Enhancements */
.hero-post-banner .forge-meta-tag{
  font-family:var(--font-heading), var(--font-persian), sans-serif;
  font-weight:700;
  font-size:.84rem;
  letter-spacing:0;
  line-height:1.35;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
html[dir="rtl"] .hero-post-banner .forge-meta-tag{
  font-family:var(--font-persian), sans-serif;
  font-size:.82rem;
}
.hero-post-banner .forge-meta-desc{
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:normal;
}

.nav-gitea-icon path:first-child,
.mobile-nav-external .nav-gitea-icon path:first-child{
  fill:var(--gitea-nav-handle);
}

@media(max-width:959px){
  .hero-forge-banner{
    max-width:340px; width:100%; margin:8px auto 0 auto;
    padding:10px 14px;
  }
  .forge-meta{ text-align:center; }
  .forge-meta-desc{ display:none; }
}



/* ---------- About Photo Frame with Dynamic Cyber Border ---------- */
.about-card-frame{
  position:relative;
  width:min(290px, 78vw);
  aspect-ratio:3/4;
  border-radius:24px;
  padding:2px;
  overflow:hidden;
  background:var(--border);
  box-shadow:0 16px 36px -8px rgba(0, 0, 0, 0.35), 0 0 24px -6px var(--accent-glow);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
  cursor:default;
}
.about-card-frame:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 48px -10px rgba(0, 0, 0, 0.45), 0 0 32px var(--accent-soft);
}

/* Dynamic rotating laser beam */
.about-card-frame::before{
  content:'';
  position:absolute;
  top:50%; left:50%;
  width:180%; height:180%;
  transform:translate(-50%, -50%);
  background:conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 50deg,
    var(--accent-glow) 70deg,
    var(--accent) 95deg,
    var(--accent-strong) 115deg,
    #ffffff 122deg,
    var(--accent-strong) 130deg,
    var(--accent) 145deg,
    transparent 180deg,
    transparent 360deg
  );
  animation:rotateBeam 5s linear infinite;
  z-index:1;
  pointer-events:none;
}

/* Ambient glow layer behind card */
.about-card-glow{
  position:absolute;
  top:50%; left:50%;
  width:160%; height:160%;
  transform:translate(-50%, -50%);
  background:conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 60deg,
    var(--accent) 95deg,
    var(--accent-strong) 120deg,
    transparent 160deg,
    transparent 360deg
  );
  animation:rotateBeam 5s linear infinite;
  filter:blur(24px);
  opacity:.5;
  z-index:0;
  pointer-events:none;
  transition:opacity .4s var(--ease), filter .4s var(--ease);
}
.about-card-frame:hover .about-card-glow{
  opacity:.85;
  filter:blur(32px);
}

/* Card inner content */
.about-card-inner{
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
  border-radius:22px;
  overflow:hidden;
  background:var(--surface);
}

.about-photo{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 20%;
  display:block;
  transition:transform .6s cubic-bezier(.2, .8, .2, 1), filter .5s var(--ease);
}
.about-card-frame:hover .about-photo{
  transform:scale(1.045);
}

/* Tactical HUD corner brackets */
.about-corner{
  position:absolute;
  width:14px;
  height:14px;
  pointer-events:none;
  z-index:4;
  opacity:.8;
  transition:opacity .3s var(--ease), filter .3s var(--ease);
}
.about-card-frame:hover .about-corner{
  opacity:1;
  filter:drop-shadow(0 0 6px var(--accent));
}
.corner-tl{ top:10px; left:10px; border-top:2px solid var(--accent); border-left:2px solid var(--accent); border-top-left-radius:6px; }
.corner-tr{ top:10px; right:10px; border-top:2px solid var(--accent); border-right:2px solid var(--accent); border-top-right-radius:6px; }
.corner-bl{ bottom:10px; left:10px; border-bottom:2px solid var(--accent); border-left:2px solid var(--accent); border-bottom-left-radius:6px; }
.corner-br{ bottom:10px; right:10px; border-bottom:2px solid var(--accent); border-right:2px solid var(--accent); border-bottom-right-radius:6px; }
.about-content h2{ font-size:clamp(1.8rem,4vw,2.6rem); margin-top:16px; }
.about-content p{ color:var(--text-dim); margin-top:16px; max-width:56ch; }
.pill-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.pill{ border:1px solid var(--border); background:var(--surface); border-radius:14px; padding:12px 18px; min-width:130px; }
.pill strong{ display:block; font-size:.92rem; }
.pill span{ display:block; margin-top:4px; font-family:var(--font-mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); }

/* ---------- Section headings ---------- */
.section-head h2{ font-size:clamp(1.8rem,4vw,2.75rem); }
.section-sub{ color:var(--text-dim); font-size:1rem; max-width:52ch; }

/* ---------- Skills marquee ---------- */
.marquee-row{
  overflow:hidden; padding-block:8px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{ display:flex; width:max-content; gap:14px; padding-right:14px; animation:scrollLeft 34s linear infinite; }
.marquee-row.reverse .marquee-track{ animation-name:scrollRight; }
.marquee-row:hover .marquee-track{ animation-play-state:paused; }
.chip{
  flex:0 0 auto; padding:12px 20px; border:1px solid var(--border); background:var(--surface); border-radius:12px;
  font-family:var(--font-mono); font-size:.82rem; color:var(--text-dim); white-space:nowrap;
}

/* ---------- Roadmap cards ---------- */
.roadmap-card{
  border:1px solid var(--border); background:var(--surface); border-radius:var(--radius); padding:26px;
  display:flex; flex-direction:column; gap:10px; transition:transform .25s var(--ease), border-color .25s var(--ease);
}
.roadmap-card:hover{ transform:translateY(-4px); border-color:var(--text-faint); }
.roadmap-index{ font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.roadmap-card h3{ font-size:1.15rem; }
.roadmap-card p{ color:var(--text-dim); font-size:.92rem; flex:1; }
.tag-pill{
  align-self:flex-start; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-dim); border:1px solid var(--border); border-radius:999px; padding:6px 12px;
}

/* ---------- Project cards ---------- */
.project-card{
  flex:0 0 min(360px,82vw); scroll-snap-align:center; scroll-snap-stop:always; border:1px solid var(--border); background:var(--surface);
  border-radius:var(--radius); padding:28px; opacity:.55; transform:scale(.93); transition:opacity .35s var(--ease), transform .35s var(--ease);
  cursor:pointer;
}
.project-card.active{ opacity:1; transform:scale(1); border-color:var(--text-faint); cursor:default; }
.project-top{
  display:flex; justify-content:space-between; align-items:center; font-family:var(--font-mono); font-size:.68rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint);
}
.project-top .cat{ color:var(--accent); }
.project-card h3{ font-size:1.3rem; margin-top:14px; }
.project-card p{ color:var(--text-dim); margin-top:12px; font-size:.92rem; }
.project-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.project-tags span{
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase;
  border:1px solid var(--border); border-radius:999px; padding:5px 11px; color:var(--text-dim);
}
.project-link{ display:inline-flex; margin-top:20px; font-size:.85rem; font-weight:600; color:var(--text); border-bottom:1px solid var(--text-faint); }
.project-link-private{
  display:inline-flex; align-items:center; gap:6px; margin-top:20px;
  font-size:.82rem; font-weight:600; color:var(--text-dim);
  border-bottom:1px dashed var(--border); cursor:default;
}
.project-link-private svg{ flex-shrink:0; opacity:.85; }

.badge-private{
  display:inline-flex; align-items:center; gap:4px;
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.04em;
  padding:2px 8px; border-radius:6px;
  background:rgba(255, 68, 85, 0.12); color:#ff5566; border:1px solid rgba(255, 68, 85, 0.28);
}
.badge-opensource{
  display:inline-flex; align-items:center; gap:4px;
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.04em;
  padding:2px 8px; border-radius:6px;
  background:rgba(56, 224, 122, 0.1); color:var(--accent); border:1px solid var(--accent-soft);
}

/* Project Metrics Grid */
.projects-metrics-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:14px;
  max-width:1080px; margin:24px auto 32px; padding:0 clamp(16px, 4vw, 32px);
}
.metric-box{
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:16px 18px; display:flex; flex-direction:column; gap:4px;
  transition:transform .2s var(--ease), border-color .2s var(--ease);
}
.metric-box:hover{ transform:translateY(-3px); border-color:var(--text-faint); }
.metric-num{
  font-size:clamp(1.7rem, 3.2vw, 2.2rem); font-weight:700; color:var(--accent-strong);
  font-family:var(--font-mono); line-height:1.1;
}
.metric-label{
  font-size:.8rem; font-weight:600; color:var(--text); line-height:1.35;
}
.metric-desc{
  font-size:.7rem; color:var(--text-faint); margin-top:2px;
}
.proj-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:10; width:44px; height:44px; border-radius:50%;
  border:1px solid var(--border); background:var(--bg-elev); display:flex; align-items:center; justify-content:center; font-size:1.25rem;
  color:var(--text); cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,0.35); touch-action:manipulation;
  transition:transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease), opacity .2s var(--ease);
}
.proj-nav:hover:not(:disabled){ background:var(--surface); border-color:var(--text-faint); transform:translateY(-50%) scale(1.06); }
.proj-nav:active:not(:disabled){ transform:translateY(-50%) scale(0.94); }
.proj-nav:disabled{ opacity:0.25; cursor:not-allowed; }
.proj-nav.prev{ left:clamp(8px, 2.5vw, 32px); }
.proj-nav.next{ right:clamp(8px, 2.5vw, 32px); }
@media(max-width:640px){
  .proj-nav{
    width:38px; height:38px; font-size:1.15rem;
    background:rgba(18, 22, 28, 0.88); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  }
  .proj-nav.prev{ left:6px; }
  .proj-nav.next{ right:6px; }
}

/* RTL Positioning for Projects Carousel Navigation Buttons */
html[dir="rtl"] .proj-nav.prev,
[dir="rtl"] .proj-nav.prev {
  left: auto;
  right: clamp(8px, 2.5vw, 32px);
}

html[dir="rtl"] .proj-nav.next,
[dir="rtl"] .proj-nav.next {
  right: auto;
  left: clamp(8px, 2.5vw, 32px);
}

@media(max-width:640px){
  html[dir="rtl"] .proj-nav.prev,
  [dir="rtl"] .proj-nav.prev {
    left: auto;
    right: 6px;
  }
  html[dir="rtl"] .proj-nav.next,
  [dir="rtl"] .proj-nav.next {
    right: auto;
    left: 6px;
  }
}

/* ---------- Repository switch pills (Projects header) ---------- */
.repo-switch-pills{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  flex-wrap:wrap; margin-top:6px;
}
.repo-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 16px; border-radius:999px;
  font-family:var(--font-mono); font-size:.8rem; font-weight:500;
  border:1px solid var(--border); background:var(--bg-elev); color:var(--text-dim);
  text-decoration:none;
  transition:border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.repo-pill svg{ display:block; flex-shrink:0; }
.repo-pill:hover{
  border-color:var(--text-faint); color:var(--text); transform:translateY(-2px);
  background:var(--surface);
}
.repo-pill.highlight{
  border-color:var(--accent-soft); color:var(--accent); background:var(--accent-soft);
}
.repo-pill.highlight:hover{
  border-color:var(--accent); background:var(--accent-soft); box-shadow:0 0 16px var(--accent-glow);
}

/* ---------- Certification cards ---------- */
.cert-card{
  border:1px solid var(--border); background:var(--surface); border-radius:var(--radius); padding:24px;
  display:flex; flex-direction:column; gap:10px; transition:transform .25s var(--ease), border-color .25s var(--ease);
}
.cert-card:hover{ transform:translateY(-4px); border-color:var(--text-faint); }
.cert-badge{
  width:44px; height:44px; border-radius:12px;
  background:var(--accent-soft); border:1px solid var(--accent-soft);
  color:var(--accent); display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 16px var(--accent-glow);
  transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.cert-card:hover .cert-badge{
  transform:scale(1.08) rotate(3deg);
  border-color:var(--accent);
  box-shadow:0 0 24px var(--accent-soft);
}
.cert-badge svg{
  width:22px; height:22px; display:block;
}
.cert-card h3{ font-size:1.05rem; margin-top:6px; }
.cert-meta{ color:var(--text-faint); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; }
.cert-link{ margin-top:auto; font-size:.85rem; font-weight:600; border-bottom:1px solid var(--text-faint); align-self:flex-start; }

/* ---------- FAQ (details/summary — works with zero JS) ---------- */
.faq-item{ border:1px solid var(--border); background:var(--surface); border-radius:var(--radius); overflow:hidden; }
.faq-item summary{
  cursor:pointer; list-style:none; padding:18px 22px; font-weight:600; font-size:.98rem;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:'+'; font-family:var(--font-mono); font-size:1.1rem; color:var(--text-faint); transition:transform .2s var(--ease);
}
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item p{ padding:0 22px 20px; color:var(--text-dim); max-width:68ch; }

/* ---------- Contact ---------- */
.contact-header h2{ font-size:clamp(1.65rem,4vw,2.5rem); margin-top:12px; line-height:1.2; }
.contact-header p{ color:var(--text-dim); margin-top:12px; max-width:52ch; font-size:.95rem; line-height:1.55; }
.contact-links a{
  display:flex; align-items:center; justify-content:center; gap:9px;
  padding:10px 14px; border-radius:10px; font-size:.82rem; font-weight:600;
  border:1px solid var(--border); background:var(--bg-elev); color:var(--text);
  min-height:42px; text-align:center; touch-action:manipulation;
  transition:border-color .2s var(--ease), background .2s var(--ease), transform .15s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.contact-links a svg{
  width:18px; height:18px; flex-shrink:0; fill:currentColor;
  transition:transform .2s var(--ease);
}
.contact-links a:hover{
  background:var(--surface); border-color:var(--text-faint); transform:translateY(-2px);
}
.contact-links a:hover svg{
  transform:scale(1.15);
}
.contact-links a:active{
  transform:scale(0.97);
}
.contact-links a.contact-btn-gitea{
  border-color:var(--accent-soft);
  background:var(--accent-soft);
  color:var(--accent);
  font-weight:700;
  box-shadow:0 0 16px var(--accent-glow);
}
.contact-links a.contact-btn-gitea:hover{
  border-color:var(--accent);
  background:var(--accent-soft);
  box-shadow:0 0 24px var(--accent-glow);
  transform:translateY(-2px) scale(1.02);
}
.contact-links a.contact-btn-gitea .live-status-ping{
  width:7px; height:7px; border-radius:50%;
  background:var(--accent); display:inline-block; flex-shrink:0;
  box-shadow:0 0 8px var(--accent);
}
.contact-links a.btn-telegram:hover{ color:#229ED9; border-color:rgba(34, 158, 217, 0.5); background:rgba(34, 158, 217, 0.08); }
.contact-links a.btn-github:hover{ color:#ffffff; border-color:rgba(255, 255, 255, 0.5); background:rgba(255, 255, 255, 0.08); }
.contact-links a.btn-linkedin:hover{ color:#0A66C2; border-color:rgba(10, 102, 194, 0.5); background:rgba(10, 102, 194, 0.08); }
.contact-links a.btn-instagram:hover{ color:#E1306C; border-color:rgba(225, 48, 108, 0.5); background:rgba(225, 48, 108, 0.08); }
.contact-links a.btn-hacktube:hover{ color:#ff3344; border-color:rgba(255, 51, 68, 0.5); background:rgba(255, 51, 68, 0.08); }

.payload-preview{
  background:var(--bg-elev); border:1px solid var(--border); border-radius:var(--radius);
  padding:16px 18px; font-size:.76rem; line-height:1.6; color:var(--text-dim);
  white-space:pre-wrap; word-break:break-word; overflow-wrap:anywhere;
  box-shadow:inset 0 2px 10px rgba(0,0,0,0.25);
}
.payload-preview .v{ color:var(--accent); }

.contact-form{
  display:flex; flex-direction:column; gap:16px; border:1px solid var(--border); background:var(--surface);
  border-radius:var(--radius); padding:clamp(20px,4vw,32px); box-shadow:0 8px 30px rgba(0,0,0,0.2);
}
.field{ display:flex; flex-direction:column; gap:7px; width:100%; }
.field label{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); }
.field input, .field textarea{
  background:var(--bg-elev); border:1px solid var(--border); border-radius:10px; padding:13px 14px;
  color:var(--text); font-family:var(--font-display); font-size:16px; /* 16px eliminates mobile Safari auto-zoom */
  line-height:1.4; width:100%; box-sizing:border-box; appearance:none; -webkit-appearance:none;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.field input::placeholder, .field textarea::placeholder{ color:var(--text-faint); opacity:.65; }
.field input:focus, .field textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); background:var(--surface);
}
.field textarea{ min-height:110px; resize:vertical; }

.checkbox{
  display:flex; align-items:center; gap:12px; font-size:.82rem; color:var(--text-dim);
  cursor:pointer; user-select:none; margin-top:4px; line-height:1.45;
}
.checkbox input{
  appearance:none; -webkit-appearance:none; width:18px; height:18px; min-width:18px;
  border-radius:5px; border:1px solid var(--border); background:var(--bg-elev); cursor:pointer;
  display:grid; place-content:center; margin:0; transition:border-color .2s var(--ease), background .2s var(--ease);
}
.checkbox input:checked{
  background:var(--accent); border-color:var(--accent);
}
.checkbox input:checked::before{
  content:''; width:9px; height:5px; border-left:2px solid #08080a; border-bottom:2px solid #08080a;
  transform:rotate(-45deg) translate(1px, -1px);
}
.checkbox input:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

#sendBtn{
  width:100%; min-height:48px; display:inline-flex; align-items:center; justify-content:center;
  font-size:.95rem; font-weight:600; letter-spacing:.02em; border-radius:12px; margin-top:6px;
  touch-action:manipulation; cursor:pointer;
  transition:transform .15s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
#sendBtn:hover{ box-shadow:0 0 20px var(--btn-primary-glow); }
#sendBtn:active{ transform:scale(0.98); }

@media(min-width:900px){
  #sendBtn{ width:auto; align-self:flex-start; padding-inline:26px; }
}

.form-note{ font-family:var(--font-mono); font-size:.8rem; color:var(--accent); min-height:1.2em; margin-top:2px; }

/* ---------- Footer ---------- */
.footer-top p{ margin-top:10px; color:var(--text-dim); font-size:.92rem; }
.footer-top a{ display:inline-block; margin-top:10px; font-size:.85rem; font-weight:600; border-bottom:1px solid var(--text-faint); }
.footer-wordmark-wrap{
  width:100%;
  max-width:1200px;
  margin:14px auto 8px;
  padding:0 20px;
  overflow:hidden;
  user-select:none;
  pointer-events:none;
  display:flex;
  justify-content:center;
  align-items:center;
}
.footer-wordmark-svg{
  width:100%;
  height:auto;
  display:block;
}
.footer-wordmark-text{
  font-family:var(--font-display);
  font-size:112px;
  font-weight:700;
  letter-spacing:-.03em;
  fill:var(--surface-2);
  stroke:var(--border);
  stroke-width:1.2px;
}
.footer-bottom a:hover{ color:var(--text); }
.footer-socials{
  display:inline-flex;
  align-items:center;
  flex-wrap:wrap;
  gap:16px 26px;
}
.footer-social-link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  text-decoration:none;
  line-height:1;
}
.footer-social-link svg{
  flex-shrink:0;
}
.footer-social-link bdi{
  font-family:var(--font-mono);
  direction:ltr !important;
  unicode-bidi:isolate;
  display:inline-block;
}
.footer-gitea-link{
  color:var(--accent) !important;
  font-weight:700;
}
.footer-gitea-link:hover{
  text-shadow:0 0 10px var(--accent-glow);
}

/* ---------- SPA Progress Bar & Transitions ---------- */
.spa-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 2.5px;
  background: linear-gradient(90deg, var(--accent, #00ffcc), #00bbff, #7000ff);
  box-shadow: 0 0 10px rgba(0, 255, 204, 0.75), 0 0 16px rgba(0, 187, 255, 0.5);
  z-index: 10005;
  pointer-events: none;
  opacity: 0;
  transition: width 0.25s ease, opacity 0.15s ease;
}

#mainContent {
  will-change: opacity, transform;
  min-height: 60vh;
}

/* =========================================================================
   Operator Authentication Modal & Access Control
   Cyber / Red Team Terminal Aesthetic
   ========================================================================= */

.auth-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(8, 8, 10, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s var(--ease), visibility .25s var(--ease);
}

.auth-modal-backdrop.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.auth-modal-window {
  width: 100%;
  max-width: 440px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(56, 224, 122, 0.16), 0 0 40px var(--accent-glow);
  transform: scale(0.94) translateY(14px);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  overflow: hidden;
  position: relative;
}

.auth-modal-backdrop.is-active .auth-modal-window {
  transform: scale(1) translateY(0);
}

.auth-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev);
}

.auth-modal-dots {
  display: flex;
  align-items: center;
  gap: 6px;
}

.auth-modal-dots .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.auth-modal-dots .dot-red { background: #ff5f56; }
.auth-modal-dots .dot-yellow { background: #ffbd2e; }
.auth-modal-dots .dot-green { background: #27c93f; }

.auth-modal-title {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.auth-modal-close {
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .2s, background .2s;
}

.auth-modal-close:hover {
  color: var(--text);
  background: var(--overlay-12);
}

/* Auth Modal Tabs */
.auth-modal-tabs {
  display: flex;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.auth-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 16px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-dim);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .08em;
  cursor: pointer;
  transition: all .2s var(--ease);
}

.auth-tab:hover {
  color: var(--text);
  background: var(--overlay-05);
}

.auth-tab.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: var(--accent-soft);
}

.auth-switch-prompt {
  text-align: center;
  margin-top: 14px;
}

.auth-switch-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: .74rem;
  letter-spacing: .04em;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: color .2s;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.auth-switch-btn:hover {
  color: var(--accent);
}

.auth-modal-body {
  padding: 22px 22px 20px;
}

.auth-modal-status-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .75rem;
  color: var(--text-dim);
  line-height: 1.5;
  margin-bottom: 16px;
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  width: 100%;
}

.auth-modal-status-badge .status-dot {
  flex-shrink: 0;
}

.auth-modal-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  font-size: .78rem;
  line-height: 1.5;
  margin-bottom: 16px;
  animation: authShake 0.35s ease;
}

.auth-modal-alert.is-error {
  background: rgba(255, 77, 77, 0.12);
  border: 1px solid rgba(255, 77, 77, 0.45);
  color: #ff6b6b;
}

.auth-modal-alert.is-success {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--accent-strong);
}

.auth-modal-alert .alert-icon {
  font-weight: bold;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid currentColor;
  flex-shrink: 0;
  font-size: .72rem;
}

.auth-field-group {
  margin-bottom: 16px;
}

.auth-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 7px;
}

.auth-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color .2s, box-shadow .2s;
}

.auth-input-wrapper:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.auth-prompt-symbol {
  padding-left: 12px;
  font-size: .88rem;
  color: var(--accent);
  font-weight: bold;
  pointer-events: none;
  user-select: none;
}

:root[dir="rtl"] .auth-prompt-symbol {
  padding-left: 0;
  padding-right: 12px;
}

.auth-input {
  width: 100%;
  height: 44px;
  background: transparent;
  border: none;
  outline: none;
  padding: 0 12px 0 8px;
  color: var(--text);
  font-size: .88rem;
}

:root[dir="rtl"] .auth-input {
  padding: 0 8px 0 12px;
}

.auth-input::placeholder {
  color: var(--text-faint);
  font-size: .82rem;
}

.auth-pwd-toggle {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .2s;
}

.auth-pwd-toggle:hover {
  color: var(--text);
}

.auth-options-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.auth-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  font-size: .78rem;
  color: var(--text-dim);
}

.auth-checkbox {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.auth-submit-btn {
  width: 100%;
  height: 46px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #08080a;
  font-weight: 700;
  font-size: .84rem;
  letter-spacing: .08em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: transform .15s, box-shadow .2s, background .2s;
  box-shadow: 0 0 20px var(--accent-glow);
}

.auth-submit-btn:hover {
  background: var(--accent-strong);
  transform: translateY(-1px);
  box-shadow: 0 0 28px var(--accent-glow);
}

.auth-submit-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}

.auth-submit-btn .btn-arrow {
  transition: transform .2s var(--ease);
}

.auth-submit-btn:hover .btn-arrow {
  transform: translateX(4px);
}

:root[dir="rtl"] .auth-submit-btn:hover .btn-arrow {
  transform: translateX(-4px);
}

.btn-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(8, 8, 10, 0.3);
  border-top-color: #08080a;
  border-radius: 50%;
  animation: authSpin 0.6s linear infinite;
  display: none;
}

.auth-modal-footer-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: .66rem;
  color: var(--text-faint);
  margin-top: 14px;
  letter-spacing: .05em;
  user-select: none;
}

/* ── Auth OTP & Password Reset Enhancements ── */
.auth-forgot-link {
  background: none;
  border: none;
  color: var(--accent);
  font-size: .74rem;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity .2s, color .2s;
  letter-spacing: .02em;
}

.auth-forgot-link:hover {
  color: var(--accent-strong);
  opacity: 0.9;
}

.auth-input.is-otp {
  letter-spacing: .45em;
  font-size: 1.28rem;
  font-weight: 700;
  text-align: center;
  color: var(--accent);
}

.auth-otp-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding: 0 4px;
  font-size: .74rem;
}

.auth-timer-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-dim);
  font-size: .72rem;
}

.auth-timer-badge .timer-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
  animation: authTimerPulse 1.2s ease-in-out infinite;
}

@keyframes authTimerPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.25; transform: scale(0.8); }
}

.auth-resend-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-size: .72rem;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 3px;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: all .2s;
}

.auth-resend-btn:hover:not(:disabled) {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.auth-resend-btn:disabled {
  color: var(--text-faint);
  cursor: not-allowed;
  text-decoration: none;
  opacity: 0.55;
}

.auth-target-email-badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  margin-bottom: 16px;
  background: var(--overlay-05);
  border: 1px dashed var(--border-subtle);
  border-radius: var(--radius-sm);
  font-size: .75rem;
  color: var(--text-dim);
}

.auth-target-email-badge strong {
  color: var(--accent);
  word-break: break-all;
}

.auth-target-email-badge .auth-change-email-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: .7rem;
  text-decoration: underline;
  padding: 0;
  white-space: nowrap;
}

.auth-target-email-badge .auth-change-email-btn:hover {
  color: var(--accent);
}


/* Nav Operator Status & Actions */
.nav-auth-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .2s, color .2s, box-shadow .2s;
}

.nav-auth-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 14px var(--accent-glow);
}

.nav-operator-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nav-operator-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 12px;
  border-radius: 20px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--accent);
  font-size: .78rem;
  font-weight: 700;
}

.nav-logout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-dim);
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}

.nav-logout-btn:hover {
  color: #ff6b6b;
  border-color: rgba(255, 107, 107, 0.4);
  background: rgba(255, 107, 107, 0.08);
}

/* Mobile Nav Auth Trigger */
.mobile-nav-auth {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding: 12px 16px !important;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text) !important;
  font-weight: 600;
}

.mobile-nav-auth:hover {
  border-color: var(--accent);
  color: var(--accent) !important;
}

/* ============================================================
   Nav User Profile Dropdown (Mobile-first responsive)
   ============================================================ */
.nav-user-dropdown {
  position: relative;
  display: none; /* hidden on desktop >= 900px */
}

@media (max-width: 899px) {
  .nav-operator-group {
    display: none !important;
  }

  .nav-user-dropdown {
    display: inline-flex;
    align-items: center;
  }
}

.nav-user-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  padding: 0;
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease), transform .15s var(--ease), box-shadow .2s var(--ease);
}

.nav-user-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--surface-2);
  box-shadow: 0 0 12px var(--accent-glow);
}

.nav-user-btn:active {
  transform: scale(0.95);
}

.nav-user-btn[aria-expanded="true"] {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--surface-2);
  box-shadow: 0 0 14px var(--accent-glow);
}

.user-btn-status-dot {
  position: absolute;
  top: 7px;
  inset-inline-end: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #00ff88;
  box-shadow: 0 0 6px #00ff88;
}

/* User Dropdown Menu */
.nav-user-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  min-width: 220px;
  max-width: min(280px, calc(100vw - 24px));
  background: var(--bg-elev);
  background: color-mix(in srgb, var(--bg-elev) 94%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 14px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45), 0 0 16px rgba(0, 255, 136, 0.08);
  padding: 10px;
  z-index: 350;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.97);
  pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}

.nav-user-dropdown-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* User Dropdown Header */
.user-dropdown-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--surface-2);
}

.user-dropdown-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--accent);
  flex-shrink: 0;
}

.user-dropdown-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}

.user-dropdown-name {
  font-size: .84rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-dropdown-sub {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .72rem;
  color: var(--text-dim);
}

.user-dropdown-sub .status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00ff88;
  box-shadow: 0 0 5px #00ff88;
  flex-shrink: 0;
}

.user-dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 8px 4px;
}

/* User Dropdown Action Items */
.user-dropdown-item {
  display: flex !important;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--text-dim) !important;
  font-size: .82rem !important;
  font-weight: 600 !important;
  cursor: pointer;
  text-align: start;
  text-decoration: none;
  transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}

.user-dropdown-item.nav-logout-btn {
  width: 100% !important;
  height: auto !important;
  border-radius: 8px !important;
  justify-content: flex-start !important;
}

.user-dropdown-item:hover,
.user-dropdown-item.nav-logout-btn:hover {
  color: #ff6b6b !important;
  background: rgba(255, 107, 107, 0.09) !important;
  border-color: rgba(255, 107, 107, 0.25) !important;
}

.user-dropdown-item svg {
  flex-shrink: 0;
  transition: transform .2s var(--ease);
}

.user-dropdown-item:hover svg {
  transform: scale(1.1);
}

@keyframes authShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

@keyframes authSpin {
  to { transform: rotate(360deg); }
}