/* ═══════════════════════════════════════════════════════════════
   MaulCertify — style.css  (VOID Theme)
   Architecture: Normal document flow. Pages use display:none/block.
   NO position:fixed on pages — that was the root cause of the bug.
   ═══════════════════════════════════════════════════════════════ */

/* ─── DESIGN TOKENS ─────────────────────────────────────────── */
:root {
  --col-bg:            #050508;
  --col-surface:       #0d0d14;
  --col-border:        rgba(255,255,255,0.07);
  --col-border-hover:  rgba(255,255,255,0.15);

  --grad-brand:        linear-gradient(135deg,#6366f1 0%,#a855f7 50%,#22d3ee 100%);
  --col-primary:       #6366f1;
  --col-primary-light: #818cf8;
  --col-accent:        #a855f7;
  --col-cyan:          #22d3ee;

  --col-success: #22c55e;
  --col-error:   #ef4444;
  --col-warning: #f59e0b;
  --col-info:    #3b82f6;

  --col-text-1: #f1f5f9;
  --col-text-2: #94a3b8;
  --col-text-3: #475569;
  --col-text-4: #334155;

  --glass-bg:       rgba(255,255,255,0.04);
  --glass-bg-hover: rgba(255,255,255,0.07);
  --glass-blur:     20px;
  --glass-border:   rgba(255,255,255,0.08);

  --shadow-sm:   0 1px 3px rgba(0,0,0,.5);
  --shadow-md:   0 4px 16px rgba(0,0,0,.6);
  --shadow-lg:   0 16px 48px rgba(0,0,0,.7);
  --shadow-glow: 0 0 30px rgba(99,102,241,.35),0 0 60px rgba(168,85,247,.15);
  --shadow-glow-hover: 0 0 40px rgba(99,102,241,.55),0 0 80px rgba(168,85,247,.25);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --trans-fast:   all .15s cubic-bezier(.4,0,.2,1);
  --trans-normal: all .25s cubic-bezier(.4,0,.2,1);
  --trans-slow:   all .4s  cubic-bezier(.4,0,.2,1);

  --font-sans:    'Inter','Space Grotesk',system-ui,sans-serif;
  --font-display: 'Space Grotesk','Inter',system-ui,sans-serif;

  --nav-h: 60px;
}

/* ─── RESET ──────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{
  font-family:var(--font-sans);
  background:var(--col-bg);
  color:var(--col-text-1);
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
}
img,svg{display:block;}
button{cursor:pointer;font-family:inherit;}
a{color:inherit;text-decoration:none;}
ul,ol{list-style:none;}
input,textarea,select{font-family:inherit;}
.hidden{display:none !important;}

/* ─── SCROLLBAR ──────────────────────────────────────────────── */
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:99px;}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.22);}
::selection{background:rgba(99,102,241,.4);color:#fff;}

/* ═══════════════════════════════════════════════════════════════
   AMBIENT BACKGROUND — z-index:-1 so NEVER covers content
   ═══════════════════════════════════════════════════════════════ */
.ambient-wrapper{
  position:fixed;inset:0;z-index:-1;
  pointer-events:none;overflow:hidden;
}
.glow{
  position:absolute;border-radius:50%;
  filter:blur(100px);
  animation:glowFloat 14s ease-in-out infinite;
}
.glow-1{width:600px;height:600px;top:-200px;left:-150px;background:radial-gradient(circle,rgba(99,102,241,.25) 0%,transparent 70%);animation-delay:0s;opacity:.6;}
.glow-2{width:500px;height:500px;top:20%;right:-100px;background:radial-gradient(circle,rgba(168,85,247,.2) 0%,transparent 70%);animation-delay:-4s;opacity:.5;}
.glow-3{width:400px;height:400px;bottom:-100px;left:30%;background:radial-gradient(circle,rgba(34,211,238,.18) 0%,transparent 70%);animation-delay:-8s;opacity:.45;}
.glow-4{width:300px;height:300px;bottom:30%;right:20%;background:radial-gradient(circle,rgba(99,102,241,.15) 0%,transparent 70%);animation-delay:-6s;opacity:.4;}
@keyframes glowFloat{
  0%,100%{transform:translateY(0) translateX(0);}
  25%{transform:translateY(-30px) translateX(20px);}
  50%{transform:translateY(-15px) translateX(-25px);}
  75%{transform:translateY(20px) translateX(15px);}
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL NAVBAR — position:fixed, z-index:200
   ═══════════════════════════════════════════════════════════════ */
.global-nav{
  position:fixed;top:0;left:0;right:0;
  z-index:200;
  background:rgba(5,5,8,.88);
  -webkit-backdrop-filter:blur(24px);
  backdrop-filter:blur(24px);
  border-bottom:1px solid var(--col-border);
  box-shadow:0 2px 20px rgba(0,0,0,.4);
}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  height:var(--nav-h);
  max-width:1100px;margin:0 auto;padding:0 24px;gap:16px;
}
.nav-brand{
  display:flex;align-items:center;gap:10px;
  background:none;border:none;padding:6px 10px 6px 0;
  border-radius:10px;transition:var(--trans-fast);flex-shrink:0;
}
.nav-brand:hover{opacity:.85;transform:translateX(-1px);}
.nav-brand-name{
  font-family:var(--font-display);font-size:1.05rem;font-weight:700;
  color:var(--col-text-1);white-space:nowrap;
}
.nav-links{display:flex;align-items:center;gap:4px;flex:1;justify-content:flex-end;}
.nav-link{
  display:inline-flex;align-items:center;gap:7px;padding:8px 14px;
  background:transparent;border:1px solid transparent;border-radius:10px;
  font-size:.83rem;font-weight:500;color:var(--col-text-2);white-space:nowrap;
  transition:var(--trans-fast);
}
.nav-link:hover{background:var(--glass-bg-hover);border-color:var(--col-border);color:var(--col-text-1);transform:translateY(-1px);}
.nav-link:focus-visible{outline:2px solid var(--col-primary);outline-offset:2px;}
.nav-link-feedback{
  background:rgba(99,102,241,.08);border-color:rgba(99,102,241,.25);color:var(--col-primary-light);
}
.nav-link-feedback:hover{background:rgba(99,102,241,.18);border-color:rgba(99,102,241,.5);color:var(--col-text-1);}
.nav-toggle{
  display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  width:38px;height:38px;background:var(--glass-bg);border:1px solid var(--col-border);
  border-radius:8px;flex-shrink:0;transition:var(--trans-fast);
}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--col-text-2);border-radius:2px;transition:var(--trans-normal);}
.nav-toggle:hover{background:var(--glass-bg-hover);}
.nav-toggle.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px);}
.nav-toggle.open span:nth-child(2){opacity:0;transform:scaleX(0);}
.nav-toggle.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px);}
.nav-mobile{
  display:none;flex-direction:column;padding:8px 16px 16px;gap:4px;
  border-top:1px solid var(--col-border);background:rgba(5,5,8,.96);
}
.nav-mobile.open{display:flex;}
.nav-mobile-link{
  display:flex;align-items:center;gap:10px;padding:11px 14px;
  background:transparent;border:1px solid transparent;border-radius:10px;
  font-size:.875rem;font-weight:500;color:var(--col-text-2);text-align:left;
  transition:var(--trans-fast);
}
.nav-mobile-link:hover{background:var(--glass-bg-hover);border-color:var(--col-border);color:var(--col-text-1);}
.nav-mobile-link-feedback{color:var(--col-primary-light);background:rgba(99,102,241,.06);border-color:rgba(99,102,241,.2);}
.nav-mobile-link-feedback:hover{background:rgba(99,102,241,.14);color:var(--col-text-1);}

/* ═══════════════════════════════════════════════════════════════
   PAGES WRAPPER & ROUTING
   ═══════════════════════════════════════════════════════════════

   KEY ARCHITECTURE:
   - #pages-wrapper is a normal block element, NOT position:fixed
   - padding-top pushes content below the fixed navbar
   - .page uses display:none / display:block (NO position:fixed)
   - This completely eliminates the flex+overflow clipping bug

   ═══════════════════════════════════════════════════════════════ */
#pages-wrapper{
  padding-top:var(--nav-h);   /* offset for fixed navbar */
  min-height:100vh;
}

/* Hidden page = invisible */
.page{
  display:none;
}

/* Active page = visible, with entry animation */
.page.page-active{
  display:block;
  animation:pageIn .35s cubic-bezier(.4,0,.2,1) both;
}

@keyframes pageIn{
  from{opacity:0;transform:translateY(18px);}
  to  {opacity:1;transform:translateY(0);}
}

/* ═══════════════════════════════════════════════════════════════
   GLASS CARD
   ═══════════════════════════════════════════════════════════════ */
.glass-card{
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(var(--glass-blur));
  backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-border);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-md);
  position:relative;overflow:hidden;
}
.glass-card::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(135deg,rgba(255,255,255,.04) 0%,transparent 60%);
  pointer-events:none;
}

/* ═══════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 24px;border-radius:12px;
  font-size:.9rem;font-weight:600;letter-spacing:.01em;
  border:none;outline:none;
  transition:var(--trans-normal);
  position:relative;overflow:hidden;
  white-space:nowrap;
  -webkit-user-select:none;user-select:none;
}
.btn::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,0);transition:background .2s;border-radius:inherit;}
.btn:hover::after{background:rgba(255,255,255,.08);}
.btn:active{transform:scale(.97);}
.btn:focus-visible{outline:2px solid var(--col-primary);outline-offset:3px;}

.btn-primary{background:var(--grad-brand);color:#fff;box-shadow:var(--shadow-sm);}
.btn-primary:hover{box-shadow:var(--shadow-glow);transform:translateY(-2px);}
.btn-primary:active{transform:translateY(0) scale(.97);}
.btn-glow{box-shadow:var(--shadow-glow);}
.btn-glow:hover{box-shadow:var(--shadow-glow-hover);}

.btn-ghost{background:transparent;color:var(--col-text-2);border:1px solid var(--col-border);}
.btn-ghost:hover{background:var(--glass-bg-hover);border-color:var(--col-border-hover);color:var(--col-text-1);transform:translateY(-1px);}

.btn-outline{background:transparent;color:var(--col-primary-light);border:1px solid rgba(99,102,241,.4);}
.btn-outline:hover{background:rgba(99,102,241,.1);border-color:rgba(99,102,241,.7);box-shadow:0 0 16px rgba(99,102,241,.2);transform:translateY(-1px);}

.btn-sm{padding:7px 14px;font-size:.8rem;border-radius:8px;gap:6px;}

.btn-back{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;background:transparent;border:1px solid var(--col-border);
  border-radius:8px;color:var(--col-text-2);font-size:.85rem;font-weight:500;
  transition:var(--trans-fast);margin-bottom:24px;
}
.btn-back:hover{background:var(--glass-bg-hover);border-color:var(--col-border-hover);color:var(--col-text-1);transform:translateX(-3px);}

.btn-icon-only{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;
  background:var(--glass-bg);border:1px solid var(--col-border);border-radius:8px;
  color:var(--col-text-2);transition:var(--trans-fast);
}
.btn-icon-only:hover{background:var(--glass-bg-hover);border-color:var(--col-border-hover);color:var(--col-text-1);transform:rotate(45deg);}

.btn-loader{display:inline-flex;align-items:center;gap:8px;}
.spin{animation:spin .8s linear infinite;}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

.link-btn{
  background:none;border:none;color:var(--col-primary-light);
  font-size:inherit;font-weight:600;text-decoration:underline;
  text-underline-offset:3px;cursor:pointer;transition:var(--trans-fast);
}
.link-btn:hover{color:var(--col-cyan);}

/* ═══════════════════════════════════════════════════════════════
   TOAST NOTIFICATIONS
   ═══════════════════════════════════════════════════════════════ */
#toast-container{
  position:fixed;
  top:calc(var(--nav-h) + 12px);right:20px;
  z-index:9999;
  display:flex;flex-direction:column;gap:10px;
  pointer-events:none;
  max-width:min(380px,calc(100vw - 40px));
}
.toast{
  display:flex;align-items:flex-start;gap:12px;
  padding:14px 18px;border-radius:var(--radius-md);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border:1px solid;box-shadow:var(--shadow-lg);
  pointer-events:all;position:relative;
  opacity:0;transform:translateX(110%) scale(.9);
  transition:all .4s cubic-bezier(.34,1.56,.64,1);
}
.toast.toast-show{opacity:1;transform:translateX(0) scale(1);}
.toast.toast-hide{opacity:0;transform:translateX(110%) scale(.9);transition:all .3s cubic-bezier(.4,0,.2,1);}
.toast-success{background:rgba(22,40,30,.92);border-color:rgba(34,197,94,.4);}
.toast-error  {background:rgba(40,16,16,.92);border-color:rgba(239,68,68,.4);}
.toast-warning{background:rgba(40,32,10,.92);border-color:rgba(245,158,11,.4);}
.toast-info   {background:rgba(12,28,50,.92);border-color:rgba(59,130,246,.4);}
.toast-icon{flex-shrink:0;width:20px;height:20px;margin-top:1px;}
.toast-success .toast-icon{color:var(--col-success);}
.toast-error   .toast-icon{color:var(--col-error);}
.toast-warning .toast-icon{color:var(--col-warning);}
.toast-info    .toast-icon{color:var(--col-info);}
.toast-body{flex:1;min-width:0;}
.toast-title{font-size:.875rem;font-weight:600;color:var(--col-text-1);margin-bottom:2px;}
.toast-msg  {font-size:.8rem;color:var(--col-text-2);line-height:1.4;}
.toast-close{
  flex-shrink:0;background:none;border:none;
  color:var(--col-text-3);font-size:1.1rem;line-height:1;
  padding:0;width:18px;height:18px;
  display:flex;align-items:center;justify-content:center;
  border-radius:4px;transition:var(--trans-fast);cursor:pointer;
}
.toast-close:hover{color:var(--col-text-1);background:rgba(255,255,255,.1);}
.toast-progress{
  position:absolute;bottom:0;left:0;
  height:2px;border-radius:0 0 var(--radius-md) var(--radius-md);
  background:currentColor;animation:toastProgress linear forwards;
}
.toast-success .toast-progress{color:var(--col-success);}
.toast-error   .toast-progress{color:var(--col-error);}
.toast-warning .toast-progress{color:var(--col-warning);}
.toast-info    .toast-progress{color:var(--col-info);}
@keyframes toastProgress{from{width:100%}to{width:0%}}

/* ═══════════════════════════════════════════════════════════════
   PAGE 1: HOME
   ═══════════════════════════════════════════════════════════════ */
.hero-container{
  /* max-width + margin:auto = horizontal centering */
  max-width:640px;
  width:100%;
  margin:0 auto;
  /* Padding: breathing room top/bottom. Since page is display:block,
     NO overflow clipping will occur regardless of content height. */
  padding:56px 24px 100px;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.brand-icon{
  margin-bottom:20px;
  animation:floatIcon 5s ease-in-out infinite;
  filter:drop-shadow(0 0 24px rgba(99,102,241,.5));
}
@keyframes floatIcon{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

.hero-title{
  font-family:var(--font-display);
  font-size:clamp(2.8rem,10vw,5.5rem);
  font-weight:900;line-height:1;letter-spacing:-.03em;margin-bottom:16px;
}
.title-word{display:inline-block;color:var(--col-text-1);}
.title-accent{
  background:var(--grad-brand);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(0 0 30px rgba(99,102,241,.4));
}
.hero-badge{
  display:inline-flex;align-items:center;gap:6px;padding:5px 14px;
  background:rgba(99,102,241,.12);border:1px solid rgba(99,102,241,.3);
  border-radius:99px;font-size:.75rem;font-weight:600;
  color:var(--col-primary-light);letter-spacing:.05em;text-transform:uppercase;
  margin-bottom:20px;
}
.hero-desc{
  font-size:1.05rem;color:var(--col-text-2);line-height:1.7;
  margin-bottom:24px;max-width:500px;
}
.hero-desc strong{color:var(--col-text-1);}
.feature-pills{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:28px;
}
.pill{
  display:inline-flex;align-items:center;gap:6px;padding:7px 14px;
  background:var(--glass-bg);border:1px solid var(--glass-border);
  border-radius:99px;font-size:.78rem;font-weight:500;color:var(--col-text-2);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:var(--trans-fast);
}
.pill:hover{background:var(--glass-bg-hover);border-color:var(--col-border-hover);color:var(--col-text-1);transform:translateY(-2px);}
.home-cta-group{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:20px;}
#btn-start{padding:16px 40px;font-size:1rem;border-radius:14px;}
.home-dl-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}
.hero-footer-note{font-size:.78rem;color:var(--col-text-3);letter-spacing:.02em;}

/* ═══════════════════════════════════════════════════════════════
   PAGE 2: SETUP
   ═══════════════════════════════════════════════════════════════ */
.setup-container{
  width:100%;max-width:580px;
  margin:0 auto;
  padding:40px 16px 100px;
  display:flex;flex-direction:column;
}
.step-indicator{display:flex;align-items:center;gap:0;margin-bottom:28px;}
.step{display:flex;align-items:center;gap:10px;}
.step-dot{
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.8rem;font-weight:700;
  background:var(--glass-bg);border:1px solid var(--col-border);
  color:var(--col-text-3);transition:var(--trans-normal);
}
.step.active .step-dot{background:var(--grad-brand);border-color:transparent;color:#fff;box-shadow:0 0 16px rgba(99,102,241,.4);}
.step span{font-size:.82rem;font-weight:500;color:var(--col-text-3);}
.step.active span{color:var(--col-text-1);}
.step-line{flex:1;height:1px;background:var(--col-border);margin:0 16px;}
.setup-card{padding:32px;}
.card-header{display:flex;align-items:center;gap:16px;margin-bottom:24px;}
.card-icon{
  width:48px;height:48px;border-radius:12px;
  background:rgba(99,102,241,.12);border:1px solid rgba(99,102,241,.25);
  display:flex;align-items:center;justify-content:center;
  color:var(--col-primary-light);flex-shrink:0;
}
.card-title{font-size:1.25rem;font-weight:700;color:var(--col-text-1);margin-bottom:2px;}
.card-subtitle{font-size:.83rem;color:var(--col-text-2);}
.setup-dl-hint{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:10px 14px;
  background:rgba(99,102,241,.06);border:1px solid rgba(99,102,241,.2);
  border-radius:var(--radius-md);margin-bottom:20px;
  font-size:.8rem;color:var(--col-text-2);
}
.setup-dl-hint svg{color:var(--col-primary-light);flex-shrink:0;}
.security-notice{
  display:flex;gap:14px;
  padding:13px 16px;
  background:rgba(34,197,94,.05);
  border:1px solid rgba(34,197,94,.15);
  border-left:3px solid rgba(34,197,94,.55);
  border-radius:var(--radius-sm);
  margin-bottom:20px;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.notice-icon{flex-shrink:0;color:var(--col-success);margin-top:2px;}
.notice-title{font-size:.82rem;font-weight:700;color:var(--col-success);margin-bottom:3px;}
.notice-text{font-size:.78rem;color:var(--col-text-2);line-height:1.5;}
.notice-text strong{color:var(--col-text-1);}
.form-group{margin-bottom:20px;}
.form-label{display:block;font-size:.83rem;font-weight:600;color:var(--col-text-1);margin-bottom:8px;}
.form-label.small{font-size:.78rem;}
.label-required{color:var(--col-error);margin-left:3px;}
.input-wrapper{position:relative;display:flex;align-items:center;}
.input-icon{position:absolute;left:14px;color:var(--col-text-3);pointer-events:none;z-index:1;}
.form-input{
  width:100%;padding:12px 44px 12px 42px;
  background:rgba(255,255,255,.04);border:1px solid var(--col-border);
  border-radius:var(--radius-md);color:var(--col-text-1);
  font-size:.88rem;transition:var(--trans-normal);outline:none;
}
.form-input::placeholder{color:var(--col-text-4);}
.form-input:focus{border-color:rgba(99,102,241,.6);background:rgba(99,102,241,.05);box-shadow:0 0 0 3px rgba(99,102,241,.12);}
.form-input.input-error{border-color:rgba(239,68,68,.6);box-shadow:0 0 0 3px rgba(239,68,68,.1);}
.form-input.input-valid{border-color:rgba(34,197,94,.5);}
.input-status{position:absolute;right:14px;font-size:.75rem;transition:var(--trans-fast);}
.form-hint{font-size:.77rem;color:var(--col-text-3);margin-top:7px;line-height:1.4;}
.form-hint em{color:var(--col-primary-light);font-style:normal;}
.form-error{font-size:.77rem;color:var(--col-error);margin-top:6px;display:flex;align-items:center;gap:5px;}
.deploy-guide{margin-bottom:24px;border:1px solid var(--col-border);border-radius:var(--radius-md);overflow:hidden;}
.guide-summary{
  display:flex;align-items:center;gap:8px;padding:12px 16px;
  font-size:.82rem;font-weight:600;color:var(--col-text-2);
  cursor:pointer;-webkit-user-select:none;user-select:none;
  background:var(--glass-bg);list-style:none;transition:var(--trans-fast);
}
.guide-summary:hover{background:var(--glass-bg-hover);color:var(--col-text-1);}
.guide-summary::marker,.guide-summary::-webkit-details-marker{display:none;}
.guide-steps{padding:16px 16px 16px 36px;background:rgba(0,0,0,.2);display:flex;flex-direction:column;gap:10px;}
.guide-steps li{font-size:.8rem;color:var(--col-text-2);line-height:1.5;list-style:decimal;}
.guide-steps strong{color:var(--col-text-1);}
.guide-steps em{color:var(--col-cyan);font-style:normal;}
.guide-steps code{background:rgba(99,102,241,.15);color:var(--col-primary-light);padding:1px 6px;border-radius:4px;font-size:.76rem;}
.form-actions{display:flex;gap:12px;align-items:center;justify-content:flex-end;padding-top:4px;}

/* ─── SETUP VERTICAL TIMELINE ────────────────────────────────── */
.setup-timeline{
  display:flex;flex-direction:column;
  margin-bottom:20px;
  padding:4px 0 0;
}
.timeline-item{
  display:flex;gap:0;align-items:flex-start;
}
.timeline-left{
  display:flex;flex-direction:column;align-items:center;
  flex-shrink:0;width:44px;
}
.timeline-badge{
  width:32px;height:32px;border-radius:50%;
  background:rgba(99,102,241,.18);
  border:1.5px solid rgba(99,102,241,.45);
  display:flex;align-items:center;justify-content:center;
  font-size:.78rem;font-weight:800;color:#a5b4fc;
  box-shadow:0 0 14px rgba(99,102,241,.35),inset 0 0 8px rgba(99,102,241,.1);
  flex-shrink:0;position:relative;z-index:1;
  transition:var(--trans-normal);
}
.timeline-item:hover .timeline-badge{
  background:rgba(99,102,241,.28);
  box-shadow:0 0 22px rgba(99,102,241,.55),inset 0 0 10px rgba(99,102,241,.15);
  border-color:rgba(99,102,241,.7);
  color:#c7d2fe;
}
.timeline-line{
  flex:1;width:2px;
  background:linear-gradient(to bottom,rgba(99,102,241,.3) 0%,rgba(99,102,241,.06) 100%);
  min-height:24px;margin:4px 0;
}
.timeline-body{
  flex:1;min-width:0;
  padding:4px 0 28px 16px;
}
.timeline-item--last .timeline-body{
  padding-bottom:8px;
}
.timeline-title{
  font-size:.88rem;font-weight:700;
  color:var(--col-text-1);
  line-height:1.35;margin-bottom:6px;
}
.timeline-title em{color:var(--col-primary-light);font-style:normal;}
.timeline-desc{
  font-size:.78rem;color:var(--col-text-2);
  line-height:1.65;margin-bottom:10px;
}
.timeline-desc strong{color:var(--col-text-1);}
.timeline-desc:last-child{margin-bottom:0;}

/* Emphasis strip inside a timeline step */
.timeline-emphasis{
  display:flex;align-items:flex-start;gap:8px;
  margin-top:10px;
  padding:9px 12px;
  background:rgba(245,158,11,.06);
  border:1px solid rgba(245,158,11,.2);
  border-left:3px solid rgba(245,158,11,.55);
  border-radius:6px;
  font-size:.75rem;font-weight:500;color:#fcd34d;
  line-height:1.5;
}
.timeline-emphasis svg{flex-shrink:0;color:#f59e0b;margin-top:1px;}
.timeline-emphasis strong{color:#fef3c7;}

/* Magic ✨ badge for the final step */
.timeline-badge--magic{
  background:rgba(34,211,238,.15) !important;
  border-color:rgba(34,211,238,.45) !important;
  color:#67e8f9 !important;
  box-shadow:0 0 16px rgba(34,211,238,.35),inset 0 0 8px rgba(34,211,238,.1) !important;
  font-size:.9rem !important;
}

/* ═══════════════════════════════════════════════════════════════
   AUTOCRAT PRO-TIP BOX
   ═══════════════════════════════════════════════════════════════ */
.protip-box{
  position:relative;
  margin-top:16px;margin-bottom:4px;
  border-radius:var(--radius-md);
  padding:1px; /* space for gradient border trick */
  background:linear-gradient(135deg,rgba(34,211,238,.4),rgba(99,102,241,.3) 40%,rgba(168,85,247,.35) 100%);
}
.protip-box::before{
  content:'';
  position:absolute;inset:0;
  border-radius:inherit;
  background:linear-gradient(135deg,rgba(34,211,238,.06),rgba(99,102,241,.04) 50%,rgba(168,85,247,.04) 100%);
  z-index:0;
}
/* Inner card */
.protip-box > *{position:relative;z-index:1;}
.protip-header{
  display:flex;align-items:center;gap:8px;
  padding:12px 16px 0;
}
.protip-icon{
  display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;
  background:rgba(34,211,238,.12);border:1px solid rgba(34,211,238,.3);
  color:#67e8f9;flex-shrink:0;
}
.protip-label{
  font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#67e8f9;
}
.protip-title{
  font-size:.85rem;font-weight:700;color:var(--col-text-1);
  padding:8px 16px 6px;line-height:1.35;
}
.protip-list{
  list-style:none;padding:0 16px;
  display:flex;flex-direction:column;gap:7px;
  margin-bottom:10px;
}
.protip-list li{
  display:flex;align-items:flex-start;gap:8px;
  font-size:.78rem;color:var(--col-text-2);line-height:1.55;
}
.protip-list li svg{flex-shrink:0;color:#22d3ee;margin-top:3px;}
.protip-list li strong{color:var(--col-text-1);}

/* Tag pills: <<Nama Lengkap>> etc. */
.protip-tags{
  display:flex;flex-wrap:wrap;gap:8px;
  padding:0 16px 12px;
}
.protip-tag{
  display:inline-flex;align-items:center;gap:4px;
  padding:5px 10px;
  background:rgba(34,211,238,.08);
  border:1px solid rgba(34,211,238,.25);
  border-radius:6px;
}
.protip-tag code{
  background:transparent;color:#67e8f9;
  font-size:.73rem;padding:0;border-radius:0;
  font-family:'SF Mono','Fira Code','Cascadia Code',monospace;
}
.protip-tag--dim{
  background:rgba(148,163,184,.05);
  border-color:rgba(148,163,184,.15);
}
.protip-tag--dim code{color:var(--col-text-3);}
.protip-tag--dim em{color:var(--col-text-4);font-size:.7rem;}
.protip-footer{
  font-size:.74rem;color:var(--col-text-3);
  padding:8px 16px 14px;
  border-top:1px solid rgba(255,255,255,.05);
  line-height:1.5;
}
.protip-footer code{background:rgba(239,68,68,.1);color:#f87171;}
.protip-footer em{color:var(--col-error);}


/* Shortcut button: "Buat Spreadsheet Kosong" */
.btn-sheets-new{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 14px;
  background:rgba(34,197,94,.08);
  border:1px solid rgba(34,197,94,.3);
  border-radius:8px;
  font-size:.76rem;font-weight:600;
  color:#4ade80;
  text-decoration:none;
  transition:var(--trans-fast);
  white-space:nowrap;
  cursor:pointer;
  margin-top:2px;
}
.btn-sheets-new:hover{
  background:rgba(34,197,94,.15);
  border-color:rgba(34,197,94,.55);
  color:#86efac;
  box-shadow:0 0 16px rgba(34,197,94,.2);
  transform:translateY(-1px);
}
.btn-sheets-new:active{transform:translateY(0);}

/* ─── SETUP SUB-STEPS (inside timeline Step 2) ───────────────── */
.setup-substeps{
  list-style:none;
  display:flex;flex-direction:column;gap:8px;
  margin:12px 0 4px;
  padding:0;
}
.setup-substeps li{
  display:flex;align-items:flex-start;gap:10px;
  font-size:.77rem;color:var(--col-text-2);line-height:1.6;
}
.setup-substeps li span:last-child{flex:1;}
.setup-substeps code{
  background:rgba(99,102,241,.14);color:var(--col-primary-light);
  padding:1px 5px;border-radius:4px;font-size:.75em;
}
.setup-substeps strong{color:var(--col-text-1);}
.setup-substeps em{color:var(--col-text-2);}

/* Lettered badge (a / b / c / d) */
.substep-num{
  flex-shrink:0;
  width:20px;height:20px;border-radius:50%;
  background:rgba(99,102,241,.12);
  border:1px solid rgba(99,102,241,.3);
  display:flex;align-items:center;justify-content:center;
  font-size:.65rem;font-weight:800;color:var(--col-primary-light);
  margin-top:3px;
}

/* Magic badge for the "Run" step */
.substep-num--magic{
  background:rgba(34,211,238,.14) !important;
  border-color:rgba(34,211,238,.4) !important;
  color:#67e8f9 !important;
  box-shadow:0 0 8px rgba(34,211,238,.3);
}

/* Highlight row for the "Run" step */
.substep-magic-item{
  padding:8px 10px;
  background:rgba(34,211,238,.05);
  border:1px solid rgba(34,211,238,.15);
  border-radius:6px;
  margin:2px 0;
}
.substep-magic-item strong{color:#67e8f9 !important;}


/* ─── AUTOCRAT GUIDE ACCORDION ───────────────────────────────── */
.autocrat-guide{
  border-color:rgba(249,115,22,.2) !important;
  background:rgba(249,115,22,.02);
}
.autocrat-guide .guide-summary{
  color:rgba(251,146,60,.85);
}
.autocrat-guide .guide-summary:hover{
  background:rgba(249,115,22,.05);
  color:var(--col-text-1);
}
.autocrat-guide .guide-steps code{
  background:rgba(249,115,22,.12);
  color:#fb923c;
}

/* ─── AUTOCRAT WARNING BOX ───────────────────────────────────── */
.autocrat-warning{
  display:flex;gap:12px;align-items:flex-start;
  margin:4px 16px 12px;
  padding:12px 14px;
  background:rgba(245,158,11,.06);
  border:1px solid rgba(245,158,11,.25);
  border-left:3px solid rgba(245,158,11,.6);
  border-radius:var(--radius-sm);
}
.autocrat-warning svg{flex-shrink:0;color:#f59e0b;margin-top:2px;}
.autocrat-warning-title{
  font-size:.8rem;font-weight:700;color:#fbbf24;margin-bottom:4px;
}
.autocrat-warning-desc{
  font-size:.75rem;color:var(--col-text-2);line-height:1.55;
}
.autocrat-warning-desc strong{color:var(--col-text-1);}


/* ═══════════════════════════════════════════════════════════════
   PAGE 3: APP
   ═══════════════════════════════════════════════════════════════ */
.app-container{
  width:100%;max-width:760px;
  margin:0 auto;
  padding:32px 16px 120px;
  display:flex;flex-direction:column;gap:16px;
}
.app-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 18px;
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border:1px solid var(--glass-border);border-radius:var(--radius-lg);
}
.app-logo{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--col-text-1);
}

/* Logo gambar di dashboard header */
.dashboard-logo{
  width:34px;
  height:34px;
  object-fit:contain;
  border-radius:8px;
  flex-shrink:0;
  filter:drop-shadow(0 0 6px rgba(99,102,241,.55));
  transition:filter .25s ease, transform .25s ease;
}
.dashboard-logo:hover{
  filter:drop-shadow(0 0 10px rgba(168,85,247,.7)) brightness(1.1);
  transform:scale(1.06);
}

.app-header-right{display:flex;align-items:center;gap:8px;}
.connection-badge{
  display:flex;align-items:center;gap:7px;padding:5px 12px;
  background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.25);
  border-radius:99px;font-size:.75rem;font-weight:600;color:var(--col-success);
}
.badge-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--col-success);box-shadow:0 0 6px var(--col-success);
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.8)}}
.stats-bar{
  display:flex;align-items:center;justify-content:center;gap:0;padding:16px;
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border:1px solid var(--glass-border);border-radius:var(--radius-lg);
}
.stat-item{display:flex;flex-direction:column;align-items:center;flex:1;}
.stat-value{font-family:var(--font-display);font-size:1.6rem;font-weight:800;color:var(--col-text-1);line-height:1;transition:var(--trans-normal);}
.stat-value.stat-success{color:var(--col-success);}
.stat-value.stat-error  {color:var(--col-error);}
.stat-label{font-size:.72rem;color:var(--col-text-3);font-weight:500;margin-top:4px;text-transform:uppercase;letter-spacing:.05em;}
.stat-divider{width:1px;height:36px;background:var(--col-border);margin:0 8px;}
.app-card{padding:0;overflow:hidden;}

/* Tabs */
.tab-nav{display:flex;position:relative;padding:6px;background:rgba(0,0,0,.3);border-bottom:1px solid var(--col-border);gap:4px;}
.tab-btn{
  display:flex;align-items:center;gap:8px;
  padding:10px 20px;background:transparent;border:none;border-radius:10px;
  color:var(--col-text-3);font-size:.85rem;font-weight:500;
  transition:var(--trans-normal);position:relative;z-index:1;
  flex:1;justify-content:center;cursor:pointer;
}
.tab-btn:hover{color:var(--col-text-1);}
.tab-btn.active{color:var(--col-text-1);font-weight:600;}
.tab-btn:focus-visible{outline:2px solid var(--col-primary);outline-offset:-2px;}
.tab-indicator{
  position:absolute;height:calc(100% - 12px);top:6px;border-radius:10px;
  background:var(--glass-bg-hover);border:1px solid var(--col-border-hover);
  transition:all .3s cubic-bezier(.4,0,.2,1);pointer-events:none;
}
.tab-panel{display:none;padding:24px;animation:tabIn .25s cubic-bezier(.4,0,.2,1);}
.tab-panel.active{display:block;}
@keyframes tabIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.tab-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.tab-title{font-size:1rem;font-weight:700;color:var(--col-text-1);}
.tab-desc{font-size:.82rem;color:var(--col-text-2);margin-bottom:20px;line-height:1.5;}
.tab-desc strong{color:var(--col-text-1);}

/* ═══════════════════════════════════════════════════════════════
   EXCEL ERROR INFO BOX
   ═══════════════════════════════════════════════════════════════ */
.excel-info-box{
  margin-bottom:20px;
  border:1px solid rgba(245,158,11,.25);
  border-radius:var(--radius-md);
  background:rgba(245,158,11,.04);
  overflow:hidden;
}
.info-box-summary{
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 16px;
  cursor:pointer;
  -webkit-user-select:none;user-select:none;
  list-style:none;
  transition:var(--trans-fast);
  gap:10px;
}
.info-box-summary:hover{background:rgba(245,158,11,.06);}
.info-box-summary::marker,.info-box-summary::-webkit-details-marker{display:none;}
.info-box-summary-left{display:flex;align-items:center;gap:10px;}
.info-box-icon{
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;color:#f59e0b;
}
.info-box-title{
  font-size:.82rem;font-weight:600;color:#fbbf24;
}
.info-box-chevron{
  color:rgba(245,158,11,.5);flex-shrink:0;
  transition:transform .25s cubic-bezier(.4,0,.2,1);
}
.excel-info-box[open] .info-box-chevron{transform:rotate(180deg);}

.info-box-body{
  padding:4px 16px 16px;
  display:flex;flex-direction:column;gap:16px;
  border-top:1px solid rgba(245,158,11,.15);
  animation:tabIn .2s ease both;
}

/* Numbered tips */
.info-tip{display:flex;gap:12px;align-items:flex-start;}
.info-tip-num{
  flex-shrink:0;
  width:22px;height:22px;border-radius:50%;
  background:rgba(245,158,11,.15);border:1px solid rgba(245,158,11,.3);
  display:flex;align-items:center;justify-content:center;
  font-size:.7rem;font-weight:700;color:#f59e0b;
  margin-top:2px;
}
.info-tip-content{flex:1;min-width:0;}
.info-tip-title{
  font-size:.82rem;font-weight:600;color:var(--col-text-1);
  margin-bottom:5px;line-height:1.4;
}
.info-tip-desc{
  font-size:.78rem;color:var(--col-text-2);line-height:1.55;
}
.info-tip-desc strong{color:var(--col-text-1);}
.err-code{
  background:rgba(239,68,68,.12);color:#f87171;
  padding:1px 6px;border-radius:4px;
  font-size:.82em;font-family:'SF Mono','Fira Code',monospace;
}

/* Formula blocks */
.formula-group{display:flex;flex-direction:column;gap:10px;margin-top:10px;}
.formula-block{
  border:1px solid rgba(245,158,11,.15);border-radius:var(--radius-sm);
  background:rgba(0,0,0,.25);overflow:hidden;
}
.formula-label{
  display:flex;align-items:center;gap:6px;
  padding:7px 12px;
  font-size:.72rem;font-weight:600;color:rgba(245,158,11,.7);
  border-bottom:1px solid rgba(245,158,11,.1);
  background:rgba(245,158,11,.04);
}
.formula-label svg{flex-shrink:0;color:rgba(245,158,11,.5);}
.formula-region{font-weight:400;color:var(--col-text-3);}
.formula-row{
  display:flex;align-items:center;gap:0;
}
.formula-code{
  flex:1;display:block;
  padding:10px 12px;
  font-family:'SF Mono','Fira Code','Cascadia Code',monospace;
  font-size:.72rem;color:var(--col-cyan);
  background:transparent;border:none;border-radius:0;
  white-space:nowrap;overflow-x:auto;
  line-height:1.5;
}
.btn-copy-formula{
  flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;margin:6px 8px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--col-border);border-radius:8px;
  color:var(--col-text-3);
  transition:var(--trans-fast);
}
.btn-copy-formula:hover{
  background:rgba(34,211,238,.1);
  border-color:rgba(34,211,238,.3);
  color:var(--col-cyan);
  transform:scale(1.08);
}
.btn-copy-formula.copied{
  background:rgba(34,197,94,.1);
  border-color:rgba(34,197,94,.35);
  color:var(--col-success);
}

/* Responsive: formula wraps on small screens */
@media(max-width:480px){
  .formula-row{flex-wrap:wrap;}
  .formula-code{white-space:pre-wrap;word-break:break-all;}
  .btn-copy-formula{margin:0 8px 8px auto;}
}


/* Dropzone */
.dropzone{
  border:2px dashed var(--col-border);border-radius:var(--radius-lg);
  padding:48px 24px;text-align:center;cursor:pointer;
  transition:var(--trans-normal);position:relative;background:rgba(0,0,0,.2);
}
.dropzone:hover,.dropzone:focus{border-color:rgba(99,102,241,.5);background:rgba(99,102,241,.04);outline:none;}
.dropzone.dragover{border-color:var(--col-primary);background:rgba(99,102,241,.08);box-shadow:0 0 30px rgba(99,102,241,.15);transform:scale(1.01);}
.dropzone-icon{color:var(--col-text-4);margin:0 auto 16px;transition:var(--trans-normal);}
.dropzone:hover .dropzone-icon,.dropzone.dragover .dropzone-icon{color:var(--col-primary-light);}
.dropzone-title{font-size:.95rem;font-weight:600;color:var(--col-text-2);margin-bottom:6px;}
.dropzone-sub{font-size:.8rem;color:var(--col-text-3);margin-bottom:14px;}
.dropzone-badge{display:inline-block;padding:4px 12px;background:rgba(99,102,241,.12);border:1px solid rgba(99,102,241,.25);border-radius:99px;font-size:.73rem;font-weight:600;color:var(--col-primary-light);letter-spacing:.08em;}

/* Hidden file input triggered programmatically by the dropzone */
.file-input-hidden{display:none;}

/* File preview */
.file-preview{margin-top:16px;border:1px solid var(--col-border);border-radius:var(--radius-md);overflow:hidden;animation:tabIn .25s ease;}
.preview-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:rgba(34,197,94,.06);border-bottom:1px solid rgba(34,197,94,.15);}
.preview-file-info{font-size:.8rem;font-weight:600;color:var(--col-success);display:flex;align-items:center;gap:8px;}
.btn-clear{display:flex;align-items:center;gap:5px;padding:5px 10px;background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.25);border-radius:6px;color:var(--col-error);font-size:.75rem;font-weight:600;transition:var(--trans-fast);cursor:pointer;}
.btn-clear:hover{background:rgba(239,68,68,.2);}
.preview-table-wrapper{overflow-x:auto;max-height:220px;overflow-y:auto;}
.preview-table{width:100%;border-collapse:collapse;font-size:.78rem;}
.preview-table th{padding:8px 12px;background:rgba(0,0,0,.3);color:var(--col-text-3);font-weight:600;text-align:left;border-bottom:1px solid var(--col-border);white-space:nowrap;font-size:.73rem;text-transform:uppercase;letter-spacing:.05em;position:sticky;top:0;}
.preview-table td{padding:8px 12px;border-bottom:1px solid rgba(255,255,255,.03);color:var(--col-text-2);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.preview-table tbody tr:hover td{background:rgba(255,255,255,.02);}
.preview-note{padding:8px 16px;font-size:.75rem;color:var(--col-text-3);background:rgba(0,0,0,.2);}

/* Manual */
.manual-input-wrapper{margin-bottom:16px;}
.textarea-label-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.char-count{font-size:.75rem;color:var(--col-text-3);font-weight:500;}
.manual-textarea{
  width:100%;padding:14px;background:rgba(255,255,255,.03);
  border:1px solid var(--col-border);border-radius:var(--radius-md);
  color:var(--col-text-1);font-size:.85rem;line-height:1.6;
  resize:vertical;min-height:160px;transition:var(--trans-normal);outline:none;
  font-family:'SF Mono','Fira Code',monospace;
}
.manual-textarea::placeholder{color:var(--col-text-4);}
.manual-textarea:focus{border-color:rgba(99,102,241,.5);background:rgba(99,102,241,.04);box-shadow:0 0 0 3px rgba(99,102,241,.10);}
.parse-preview{background:rgba(0,0,0,.2);border:1px solid var(--col-border);border-radius:var(--radius-md);padding:12px;min-height:60px;max-height:180px;overflow-y:auto;}
.parse-empty{text-align:center;font-size:.8rem;color:var(--col-text-4);padding:10px 0;}
.parse-list{display:flex;flex-direction:column;gap:4px;}
.parse-item{display:flex;align-items:center;gap:10px;padding:6px 10px;background:rgba(255,255,255,.03);border:1px solid var(--col-border);border-radius:8px;font-size:.78rem;animation:tabIn .2s ease;}
.parse-item-name{font-weight:600;color:var(--col-text-1);flex:1;}
.parse-item-email{color:var(--col-text-3);font-family:'SF Mono','Fira Code',monospace;}
.parse-item-valid{color:var(--col-success);flex-shrink:0;}
.parse-item-invalid{color:var(--col-error);}

/* Send section */
.send-section{padding:0 24px 24px;display:flex;flex-direction:column;gap:12px;}
.send-info{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--col-text-3);padding:10px 14px;background:rgba(0,0,0,.2);border:1px solid var(--col-border);border-radius:8px;}
.progress-wrapper{position:relative;height:8px;background:rgba(255,255,255,.05);border-radius:99px;overflow:hidden;border:1px solid var(--col-border);}
.progress-bar{height:100%;border-radius:99px;background:var(--grad-brand);width:0%;transition:width .3s ease;box-shadow:0 0 8px rgba(99,102,241,.5);}
.progress-text{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:.65rem;font-weight:700;color:var(--col-text-1);}
.btn-send{padding:16px;font-size:.95rem;border-radius:14px;justify-content:center;width:100%;}

/* Log */
.log-card{padding:0;overflow:hidden;}
.log-header{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--col-border);background:rgba(0,0,0,.2);}
.log-title{display:flex;align-items:center;gap:8px;font-size:.85rem;font-weight:700;color:var(--col-text-2);}
.btn-clear-log{background:none;border:none;font-size:.75rem;color:var(--col-text-3);cursor:pointer;transition:var(--trans-fast);padding:3px 8px;border-radius:6px;}
.btn-clear-log:hover{background:rgba(239,68,68,.1);color:var(--col-error);}
.log-body{padding:12px 20px;max-height:220px;overflow-y:auto;display:flex;flex-direction:column;gap:4px;}
.log-empty{text-align:center;font-size:.8rem;color:var(--col-text-4);padding:20px 0;}
.log-entry{display:flex;align-items:flex-start;gap:10px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.03);font-size:.78rem;animation:logIn .2s ease;}
@keyframes logIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}
.log-time{color:var(--col-text-4);white-space:nowrap;font-family:monospace;font-size:.7rem;margin-top:1px;}
.log-msg{color:var(--col-text-2);line-height:1.4;}
.log-dot{font-size:1.2rem;line-height:.8;flex-shrink:0;}
.log-success .log-dot{color:var(--col-success);}
.log-error   .log-dot{color:var(--col-error);}
.log-info    .log-dot{color:var(--col-info);}
.log-warning .log-dot{color:var(--col-warning);}

/* Footer */
.app-footer{
  text-align:center;padding:16px;
  font-size:.72rem;color:var(--col-text-4);
  background:rgba(5,5,8,.9);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-top:1px solid var(--col-border);
  /* padding-bottom for Sociabuzz button clearance */
  padding-bottom:20px;
}

/* Sociabuzz — ensure it's above footer text but not covering content */
/* The widget is position:fixed bottom-right by default, which is fine */

/* ═══════════════════════════════════════════════════════════════
   UTILITY
   ═══════════════════════════════════════════════════════════════ */
code{background:rgba(99,102,241,.12);color:var(--col-primary-light);padding:1px 6px;border-radius:4px;font-size:.82em;font-family:'SF Mono','Fira Code',monospace;}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  .nav-links{display:none;}
  .nav-toggle{display:flex;}
}
@media(max-width:640px){
  .hero-container{padding:32px 16px 80px;}
  .hero-title{font-size:2.8rem;}
  .setup-container{padding:24px 16px 80px;}
  .setup-card{padding:20px 16px;}
  .app-container{padding:20px 12px 100px;}
  .tab-panel{padding:16px;}
  .send-section{padding:0 16px 16px;}
  .app-header{padding:10px 12px;}
  .feature-pills{gap:8px;}
  .pill{font-size:.72rem;padding:5px 10px;}
  #btn-start{padding:14px 28px;}
  .form-actions{flex-direction:column-reverse;align-items:stretch;}
  .form-actions .btn{justify-content:center;}
  .step span{display:none;}
  .home-dl-row .btn{flex:1;justify-content:center;}
  .badge-text{display:none;}
}

/* ═══════════════════════════════════════════════════════════════
   TURNSTILE GATE — Anti-Bot Verification Page
   ═══════════════════════════════════════════════════════════════ */

/* Full-screen overlay */
.turnstile-gate{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  background:var(--col-bg);
  transition:opacity .5s ease, visibility .5s ease;
}
.turnstile-gate.ts-hidden{
  opacity:0;visibility:hidden;pointer-events:none;
}

/* Ambient orbs */
.ts-orb{
  position:absolute;border-radius:50%;
  filter:blur(80px);pointer-events:none;
  animation:ts-float 8s ease-in-out infinite;
}
.ts-orb-1{
  width:420px;height:420px;
  background:radial-gradient(circle,rgba(99,102,241,.28) 0%,transparent 70%);
  top:-80px;left:-100px;
  animation-duration:9s;
}
.ts-orb-2{
  width:350px;height:350px;
  background:radial-gradient(circle,rgba(168,85,247,.22) 0%,transparent 70%);
  bottom:-60px;right:-80px;
  animation-duration:11s;animation-delay:-3s;
}
.ts-orb-3{
  width:260px;height:260px;
  background:radial-gradient(circle,rgba(34,211,238,.18) 0%,transparent 70%);
  top:50%;left:50%;transform:translate(-50%,-50%);
  animation-duration:7s;animation-delay:-1.5s;
}
@keyframes ts-float{
  0%,100%{transform:translateY(0) scale(1);}
  50%{transform:translateY(-24px) scale(1.04);}
}
.ts-orb-3{
  animation-name:ts-float-center;
}
@keyframes ts-float-center{
  0%,100%{transform:translate(-50%,-50%) scale(1);}
  50%{transform:translate(-50%,-50%) scale(1.1);}
}

/* Glass card */
.ts-card{
  position:relative;z-index:2;
  width:min(420px, 90vw);
  padding:40px 36px 32px;
  background:rgba(13,13,20,.75);
  -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px);
  border:1px solid rgba(99,102,241,.25);
  border-radius:20px;
  box-shadow:
    0 0 0 1px rgba(99,102,241,.1),
    0 32px 80px rgba(0,0,0,.6),
    0 0 60px rgba(99,102,241,.08);
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
  animation:ts-card-in .5s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes ts-card-in{
  from{opacity:0;transform:translateY(30px) scale(.95);}
  to{opacity:1;transform:translateY(0) scale(1);}
}

/* Logo */
.ts-logo{
  margin-bottom:16px;
  filter:drop-shadow(0 0 20px rgba(99,102,241,.5));
  animation:ts-logo-pulse 3s ease-in-out infinite;
}
@keyframes ts-logo-pulse{
  0%,100%{filter:drop-shadow(0 0 16px rgba(99,102,241,.45));}
  50%{filter:drop-shadow(0 0 28px rgba(99,102,241,.75));}
}

/* Logo gambar baru (.verify-logo) di halaman verifikasi Turnstile */
.verify-logo{
  width:80px;
  height:80px;
  object-fit:contain;
  border-radius:18px;
  display:block;
  margin:0 auto;
  animation:ts-logo-pulse 3s ease-in-out infinite;
  filter:
    drop-shadow(0 0 16px rgba(99,102,241,.6))
    drop-shadow(0 0 32px rgba(168,85,247,.35));
}


/* Title */
.ts-title{
  font-family:'Space Grotesk',sans-serif;
  font-size:1.6rem;font-weight:800;
  background:var(--grad-brand);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  margin:0 0 4px;letter-spacing:-.02em;
}
.ts-subtitle{
  font-size:.8rem;color:var(--col-text-3);margin:0 0 20px;
  letter-spacing:.04em;text-transform:uppercase;font-weight:500;
}

/* Divider */
.ts-divider{
  width:60px;height:2px;
  background:var(--grad-brand);
  border-radius:2px;margin-bottom:20px;opacity:.6;
}

/* Prompt */
.ts-prompt{
  font-size:.82rem;color:var(--col-text-2);
  line-height:1.65;margin-bottom:20px;
}

/* Widget wrapper */
.ts-widget-wrapper{
  display:flex;justify-content:center;
  width:100%;margin-bottom:12px;
  min-height:65px;
}

/* Status text */
.ts-status{
  font-size:.75rem;color:var(--col-text-3);margin:0 0 12px;
  transition:color .3s;
}
.ts-status.ts-success{color:var(--col-success);}
.ts-status.ts-error{color:var(--col-error);}

/* Loading row */
.ts-loading{
  display:flex;align-items:center;gap:10px;
  font-size:.8rem;color:var(--col-primary-light);
  margin-bottom:12px;
}
.ts-spinner{
  width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(99,102,241,.3);
  border-top-color:var(--col-primary);
  animation:spin .7s linear infinite;
}

/* Footer */
.ts-footer{
  display:flex;align-items:center;gap:6px;justify-content:center;
  font-size:.72rem;color:var(--col-text-4);margin:0;
}
.ts-footer svg{color:var(--col-success);}
.ts-footer strong{color:var(--col-text-2);}