/* =========================================================
   DEV ZIKKY PAIR — FUTURISTIC GLASS SYSTEM — FINAL FIXED
   Shared by dashboard.html, deploy.html, login.html, console.html
   Fixes: sidebar-footer clash, reveal opacity bug, scroll progress
   ========================================================= */

:root{
  --bg:#05060a;--bg-2:#080a12;
  --panel:rgba(13,16,27,.68);--panel-strong:rgba(14,17,29,.86);--panel-soft:rgba(255,255,255,.045);
  --line:rgba(255,255,255,.095);--line-strong:rgba(255,255,255,.16);
  --text:#f7f9ff;--muted:#969eb3;--muted-2:#697185;
  --violet:#9a6cff;--violet-2:#6f42ff;--violet-hot:#d05cff;
  --cyan:#38e8ff;--cyan-2:#00b8ff;--pink:#ff4fa8;--green:#63ffb0;--danger:#ff657e;--warn:#ffd166;
  --radius:24px;--radius-sm:16px;
  --shadow:0 30px 90px rgba(0,0,0,.52);--shadow-soft:0 18px 55px rgba(0,0,0,.34);
  --glow:0 0 45px rgba(125,91,255,.18);--ease:cubic-bezier(.2,.75,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-color:rgba(154,108,255,.45) transparent;scrollbar-width:thin}
body{
  margin:0;min-height:100vh;color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.55;overflow-x:hidden;
  background:
    radial-gradient(circle at 7% -8%,rgba(137,76,255,.23),transparent 30rem),
    radial-gradient(circle at 94% 4%,rgba(56,232,255,.12),transparent 27rem),
    radial-gradient(circle at 54% 112%,rgba(255,79,168,.09),transparent 34rem),
    linear-gradient(160deg,#040509 0%,#080a12 48%,#060b14 100%);
}
body::before{
  content:"";position:fixed;inset:-25%;z-index:-3;pointer-events:none;
  background:
    radial-gradient(circle at 25% 40%,rgba(154,108,255,.13),transparent 23%),
    radial-gradient(circle at 75% 25%,rgba(56,232,255,.08),transparent 21%),
    radial-gradient(circle at 55% 80%,rgba(255,79,168,.06),transparent 20%);
  filter:blur(30px);animation:ambientDrift 22s ease-in-out infinite alternate;
}
body::after{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.55;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.95),transparent 88%);
}
::selection{background:rgba(154,108,255,.35);color:#fff}
::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:linear-gradient(var(--violet),var(--cyan));border-radius:99px}

@keyframes ambientDrift{0%{transform:translate3d(-2%,-1%,0) scale(1)}100%{transform:translate3d(2%,2%,0) scale(1.07)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes gradientFlow{50%{background-position:100% 50%}}
@keyframes topLine{0%,100%{opacity:.35;transform:scaleX(.65)}50%{opacity:1;transform:scaleX(1)}}
@keyframes dzSuccessPop{0%{opacity:0;transform:scale(.2) rotate(-18deg)}70%{opacity:1;transform:scale(1.16) rotate(4deg)}100%{transform:scale(1)}}
@keyframes dzFire{0%{transform:scale(1)}45%{transform:scale(1.35) rotate(8deg);filter:drop-shadow(0 0 42px rgba(255,138,0,.85))}100%{transform:scale(1)}}

#scrollProgress{position:fixed;top:0;left:0;height:3px;width:0;z-index:9999;background:linear-gradient(90deg,var(--violet-hot),var(--violet),var(--cyan),var(--pink));background-size:220% 100%;animation:gradientFlow 4s linear infinite;box-shadow:0 0 18px rgba(56,232,255,.55);transition:width .1s linear}

a{color:inherit;text-decoration:none}button,input,select{font:inherit}button{cursor:pointer}.hidden{display:none!important}.muted{color:var(--muted)}.good{color:var(--green)}.danger{color:var(--danger)}

.glass{
  position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.018) 48%,rgba(154,108,255,.035)),var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-soft),var(--glow);
  backdrop-filter:blur(28px) saturate(145%);-webkit-backdrop-filter:blur(28px) saturate(145%);
}
.glass::before{content:"";position:absolute;top:-1px;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,var(--violet-hot),var(--cyan),transparent);opacity:.8;animation:topLine 5s linear infinite;pointer-events:none;z-index:3}
.glass::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.055),transparent 24%,transparent 72%,rgba(56,232,255,.025));opacity:.65}
.reveal{opacity:0;transform:translateY(20px) scale(.985);transition:opacity .65s var(--ease),transform .65s var(--ease)}
.reveal.visible{opacity:1;transform:none}

.shell{min-height:100vh;display:flex}
.sidebar{
  position:fixed;z-index:80;left:0;top:0;bottom:0;width:285px;
  display:flex;flex-direction:column;
  padding:22px 14px;
  background:linear-gradient(180deg,rgba(8,9,16,.88),rgba(6,8,14,.72));
  border-right:1px solid var(--line);backdrop-filter:blur(30px) saturate(145%);-webkit-backdrop-filter:blur(30px) saturate(145%);
  transition:transform .4s var(--ease);overflow:hidden;
}
.sidebar::before{content:"";position:absolute;width:220px;height:220px;left:-110px;top:110px;border-radius:50%;background:rgba(154,108,255,.14);filter:blur(65px);pointer-events:none}
.side-brand{padding:6px 10px 27px;position:relative;z-index:1;flex:0 0 auto}
.brand{display:flex;align-items:center;gap:12px;font-weight:850;letter-spacing:-.03em}
.brand-mark{width:43px;height:43px;border-radius:14px;display:grid;place-items:center;color:#06070c;font-weight:950;background:linear-gradient(135deg,var(--violet-hot),var(--violet),var(--cyan));background-size:240% 240%;animation:gradientFlow 6s ease infinite;box-shadow:0 0 32px rgba(154,108,255,.42),inset 0 1px rgba(255,255,255,.55)}
.nav{flex:1;overflow-y:auto;overflow-x:hidden;padding-bottom:16px;position:relative;z-index:1}
.nav-title{font-size:9px;letter-spacing:.20em;color:var(--muted-2);margin:20px 10px 9px;text-transform:uppercase}
.nav a{position:relative;display:flex;align-items:center;gap:9px;padding:11px 14px;border:1px solid transparent;border-radius:15px;color:#9ca4b7;font-size:14px;margin:3px 0;transition:.25s var(--ease)}
.nav a::before{content:"";width:3px;height:0;position:absolute;left:-1px;top:50%;transform:translateY(-50%);border-radius:99px;background:linear-gradient(var(--violet-hot),var(--cyan));box-shadow:0 0 14px var(--violet)}
.nav a:hover::before,.nav a.active::before{height:58%}
.nav a:hover{color:#fff;background:rgba(255,255,255,.06);transform:translateX(4px);border-color:rgba(154,108,255,.22)}
.nav a.active{color:#fff;background:linear-gradient(100deg,rgba(154,108,255,.17),rgba(56,232,255,.035));border-color:rgba(154,108,255,.26);box-shadow:inset 0 0 24px rgba(154,108,255,.055),0 10px 30px rgba(0,0,0,.16)}
.nav-icon{width:21px;text-align:center;font-size:15px;color:#b7a5ff}.nav a strong{font-weight:750}
.sidebar-footer{
  flex:0 0 auto;position:sticky;bottom:0;margin-top:auto;
  padding:13px;border:1px solid var(--line);border-radius:17px;
  background:rgba(8,9,16,.92);backdrop-filter:blur(18px);
  font-size:12px;box-shadow:inset 0 1px rgba(255,255,255,.04);z-index:2;
}
.user-name{font-weight:800}.user-email{font-size:11px;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}

.main{margin-left:285px;width:calc(100% - 285px);padding:22px 26px 0;max-width:1650px}
.topbar{height:64px;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:24px;position:sticky;top:0;z-index:40;padding:0 6px;background:linear-gradient(180deg,rgba(5,6,10,.78),rgba(5,6,10,.42));backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.055)}
.top-left{display:flex;align-items:center;gap:12px}.menu-btn{display:none;border:1px solid var(--line);background:rgba(255,255,255,.055);color:#fff;border-radius:13px;padding:9px 12px}.page-title{font-size:13px;color:#aeb5c7;font-weight:700;letter-spacing:.01em}.top-actions{display:flex;align-items:center;gap:10px}.avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#20273a,#0c101a);border:1px solid var(--line-strong);box-shadow:0 0 22px rgba(56,232,255,.08),inset 0 1px rgba(255,255,255,.12);font-weight:800}

.hero{padding:34px 30px;border-radius:28px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;position:relative}
.hero h1{font-size:clamp(28px,4vw,46px);line-height:1.02;letter-spacing:-.05em;margin:10px 0 14px;background:linear-gradient(120deg,#fff 20%,var(--cyan) 70%,var(--violet-hot));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero p{max-width:560px;line-height:1.7;color:var(--muted);font-size:14px}.hero-actions{display:flex;gap:10px;flex-wrap:wrap;position:relative;z-index:1}.deploy-big{padding:14px 22px;font-size:15px}

.grid{display:grid;gap:14px}.stats{grid-template-columns:repeat(4,minmax(0,1fr));margin:22px 0}
.stat{padding:20px 22px;border-radius:20px}.stat .label{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.stat .value{font-size:26px;font-weight:900;letter-spacing:-.04em;margin-top:8px;background:linear-gradient(120deg,#fff,var(--cyan));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

.bot-card{padding:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border:1px solid rgba(154,108,255,.28)}.bot-card.neon-card{box-shadow:0 0 50px rgba(154,108,255,.18)}.bot-main{display:flex;gap:18px;align-items:flex-start}.bot-avatar{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;font-weight:900;font-size:20px;background:linear-gradient(135deg,var(--violet-hot),var(--cyan),var(--pink));color:#0a0612;box-shadow:0 0 30px rgba(154,108,255,.35)}.bot-side{display:flex;flex-direction:column;gap:12px;align-items:flex-end}.status-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;font-size:11px;border:1px solid var(--line);background:rgba(255,255,255,.05)}.status-pill.on{color:var(--green);border-color:rgba(99,255,176,.28)}.status-pill.off{color:var(--danger);border-color:rgba(255,101,126,.28)}.status-pill i{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor}.bot-actions{display:flex;gap:8px;flex-wrap:wrap}.bot-path{font-size:11px;margin-top:6px;opacity:.7}
.section{margin-top:28px}.section-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}.section-head h2{font-size:20px;letter-spacing:-.02em}.empty{padding:40px;text-align:center;border-radius:20px}.empty-icon{font-size:42px;margin-bottom:12px}.plan-card{padding:26px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}.eyebrow{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}

.free-form{padding:26px;position:relative}.free-form.locked{opacity:.6;pointer-events:none}.lock-screen{text-align:center;padding:30px}
.field{margin:18px 0}.field label{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#c9ccdb;margin-bottom:8px}.field input,.field select{width:100%;padding:14px 15px;border-radius:15px;border:1px solid rgba(154,108,255,.35);outline:0;background:linear-gradient(135deg,rgba(154,108,255,.06),rgba(56,232,255,.03)),rgba(0,0,0,.45);color:var(--text);transition:.25s}.field input:focus,.field select:focus{border-color:var(--violet-hot);box-shadow:0 0 0 4px rgba(208,92,255,.15)}
.btn{border:1px solid rgba(255,255,255,.09);border-radius:14px;padding:13px 18px;background:rgba(255,255,255,.06);color:#fff;transition:.22s;position:relative;overflow:hidden}.btn:hover{transform:translateY(-2px);box-shadow:0 10px 35px rgba(154,108,255,.28)}.btn:active{transform:translateY(0) scale(.98)}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.btn-primary{background:linear-gradient(135deg,var(--violet-hot),#6d1bb0);border-color:rgba(208,92,255,.5);box-shadow:0 0 26px rgba(154,108,255,.3)}.btn-ghost{background:rgba(255,255,255,.045)}.btn-danger{background:rgba(255,100,124,.09);border-color:rgba(255,100,124,.3);color:#ff9cad}.btn-confirm{background:linear-gradient(135deg,var(--green),#18b87b);color:#03120b}.btn-small{padding:8px 11px;font-size:12px}.btn-wide{width:100%}.blurred{filter:blur(5px);opacity:.42}

.pair-code{font-size:48px;font-weight:900;letter-spacing:.12em;text-align:center;margin:18px 0;background:linear-gradient(120deg,#fff,var(--cyan));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 40px rgba(56,232,255,.25)}.code-card{padding:28px;text-align:center}.pair-meta{display:flex;justify-content:center;gap:10px;font-size:12px;color:var(--muted);margin:8px 0}.pair-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px}.loader-box{margin-top:18px;padding:14px;border:1px dashed var(--line);border-radius:14px;background:rgba(255,255,255,.03)}.spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.15);border-top-color:var(--cyan);border-radius:50%;display:inline-block;animation:spin .8s linear infinite;margin-right:8px}.steps{margin-top:22px;display:grid;gap:10px;text-align:left}.step{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid var(--line)}.step b{width:26px;height:26px;display:grid;place-items:center;border-radius:999px;background:rgba(154,108,255,.18);color:#e5b8ff;font-size:12px;flex:0 0 26px}.owner-callout{margin-top:18px;padding:14px;border-radius:14px;background:rgba(56,232,255,.06);border:1px solid rgba(56,232,255,.2);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.success-stage{text-align:center;padding:28px 12px 10px;margin-top:15px;border-top:1px solid rgba(255,255,255,.08)}.success-emoji{font-size:110px;line-height:1;filter:drop-shadow(0 0 25px rgba(0,246,255,.35));animation:dzSuccessPop .7s cubic-bezier(.2,1.5,.4,1) both}.success-emoji.fire{animation:dzFire .7s ease both}

/* FAQ — FINAL */
.faq-wrap{padding:32px 28px;border-radius:24px;margin-top:28px}
.faq-wrap h2{margin:10px 0 6px;font-size:clamp(24px,3vw,32px);letter-spacing:-.03em;background:linear-gradient(120deg,#fff,var(--cyan));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.faq-search{margin:16px 0 18px;position:relative}.faq-search input{width:100%;padding:14px 16px 14px 42px;border-radius:14px;border:1px solid rgba(154,108,255,.35);background:rgba(0,0,0,.4);color:var(--text);outline:0;transition:.25s}.faq-search input:focus{border-color:var(--violet-hot);box-shadow:0 0 0 4px rgba(208,92,255,.12)}.faq-search::before{content:"🔍";position:absolute;left:14px;top:50%;transform:translateY(-50%);opacity:.6}
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq-item{border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.035);overflow:hidden;transition:.3s}.faq-item:hover{border-color:rgba(154,108,255,.25);transform:translateY(-1px)}.faq-item.open{border-color:rgba(154,108,255,.4);background:linear-gradient(150deg,rgba(154,108,255,.12),rgba(56,232,255,.04));box-shadow:0 0 30px rgba(154,108,255,.18)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:18px 20px;background:none;border:0;color:var(--text);text-align:left;cursor:pointer}.faq-q strong{font-size:15px;line-height:1.4;font-weight:700}

.faq-icon{
  width:32px;height:32px;
  display:grid;place-items:center;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
  transition:transform .12s cubic-bezier(.2,.75,.2,1), background .12s, border-color .12s;
  flex:0 0 32px
}
.faq-item.open .faq-icon{
  transform:rotate(45deg);
  background:rgba(154,108,255,.25);
  border-color:rgba(154,108,255,.4);
  color:#fff
}
.faq-a{
  max-height:0;
  overflow:hidden;
  transition:max-height .06s cubic-bezier(.2,.75,.2,1);
  will-change:max-height;
}
.faq-item.open .faq-a{
  max-height:800px;
  padding:0 20px 20px
}
.faq-a p{
  line-height:1.85;
  color:#c2c6d3;
  font-size:14px;
  margin:0;
  white-space:pre-wrap
}
.faq-count{
  font-size:12px;
  color:var(--muted);
  margin-top:10px
}

.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}.auth-card{width:min(480px,100%);padding:38px}.brand{display:flex;align-items:center;gap:12px;font-weight:850}.brand-mark{width:43px;height:43px;border-radius:14px;display:grid;place-items:center;color:#05060a;background:linear-gradient(135deg,var(--violet),var(--cyan),var(--pink));background-size:250% 250%;animation:gradientFlow 6s ease infinite}

.modal{position:fixed;z-index:200;inset:0;background:rgba(0,0,0,.74);display:grid;place-items:center;padding:20px;backdrop-filter:blur(12px)}.modal-card{width:min(500px,100%);padding:28px}
.toast{position:fixed;z-index:300;right:18px;bottom:18px;max-width:390px;padding:14px 16px;border-radius:15px;border:1px solid var(--line);background:rgba(18,20,29,.94);box-shadow:0 0 35px rgba(0,0,0,.5);opacity:0;transform:translateY(20px);pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:none}.toast.error{border-color:rgba(255,100,124,.35)}.toast.success{border-color:rgba(99,255,176,.3)}
footer{padding:45px 0 16px;color:#606674;font-size:11px;text-align:center}
.side-close{position:absolute;top:16px;right:14px;width:38px;height:38px;display:none;place-items:center;border-radius:12px;border:1px solid rgba(255,100,124,.45);background:rgba(255,100,124,.12);color:#ff9cad;font-size:18px;cursor:pointer;z-index:5}
@media(max-width:1100px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:800px){
  .sidebar{transform:translateX(-105%);box-shadow:30px 0 70px rgba(0,0,0,.55)}
  .sidebar.open{transform:none}
  .main{margin-left:0;width:100%;padding:18px}
  .menu-btn{display:block}
  .top-actions .btn{display:none}
  .hero{padding:26px}
  .stats{grid-template-columns:1fr 1fr}
  .bot-card{flex-direction:column}
  .bot-side{width:100%;flex-direction:row;justify-content:space-between;align-items:center}
  .side-close{display:grid}
}