/* ============ Accesso Colliery — pagina di login/registrazione ============ */
*{box-sizing:border-box}
body{margin:0}
@keyframes ac-pulse{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes ac-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

#ac-root{
  position:relative;width:100vw;min-height:100vh;overflow:hidden;
  display:flex;flex-direction:column;background:#0b1408;
  font-family:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:#fff;-webkit-font-smoothing:antialiased;letter-spacing:-0.008em;font-variant-numeric:tabular-nums;
}
#ac-beams{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.ac-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% -10%, rgba(11,20,8,0) 40%, rgba(11,20,8,.55) 100%),
             linear-gradient(180deg, rgba(11,20,8,.35) 0%, rgba(11,20,8,0) 22%, rgba(11,20,8,.28) 78%, rgba(11,20,8,.7) 100%);
}

/* ---------- nav ---------- */
.ac-nav{position:relative;z-index:20;width:100%;max-width:1180px;margin:0 auto;padding:22px 26px;display:flex;align-items:center;justify-content:space-between}
.ac-nav-logo{position:relative;width:118px;height:26px}
.ac-nav-logo img{position:absolute;left:0;top:5px;width:118px;height:42px;filter:brightness(0) invert(1);opacity:.96;transform:translateY(-8px)}
.ac-nav-actions{display:flex;align-items:center;gap:10px}
.ac-btn-ghost{
  height:38px;padding:0 18px;border-radius:10px;border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);backdrop-filter:blur(10px);color:#fff;
  font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;transition:background .2s,border-color .2s;
}
.ac-btn-ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28)}
.ac-btn-white{
  height:38px;padding:0 18px;border-radius:10px;border:none;background:#fff;color:#122a0c;
  font-family:inherit;font-size:13.5px;font-weight:700;cursor:pointer;
  transition:transform .2s,box-shadow .2s;box-shadow:0 10px 22px -12px rgba(255,255,255,.5);
}
.ac-btn-white:hover{transform:translateY(-1px)}

/* ---------- stage ---------- */
.ac-stage{position:relative;z-index:10;flex:1;display:flex;align-items:center;justify-content:center;padding:20px 22px 64px}

/* ---------- hero ---------- */
#ac-hero{
  position:absolute;text-align:center;max-width:900px;padding:0 12px;
  transition:opacity .4s ease, transform .6s cubic-bezier(.16,1,.3,1), filter .4s ease;
}
#ac-root[data-mode="hero"] #ac-hero{opacity:1;transform:none;filter:none;pointer-events:auto}
#ac-root:not([data-mode="hero"]) #ac-hero{opacity:0;transform:translateY(-56px) scale(.97);filter:blur(3px);pointer-events:none}

.ac-badge{
  display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border-radius:999px;
  background:rgba(255,255,255,.06);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12);
  font-size:12.5px;color:rgba(255,255,255,.82);margin-bottom:26px;
}
.ac-badge-dot{width:7px;height:7px;border-radius:50%;background:#7CE06B;box-shadow:0 0 10px #7CE06B;animation:ac-pulse 2.4s ease-in-out infinite}
.ac-h1{margin:0;font-size:60px;line-height:1.02;font-weight:700;letter-spacing:-0.03em;max-width:820px}
.ac-h1 .grad{background:linear-gradient(100deg,#8CE07A,#4FB23E 60%,#2E7D24);-webkit-background-clip:text;background-clip:text;color:transparent}
.ac-hero-sub{margin:24px auto 0;font-size:18px;line-height:1.55;color:rgba(255,255,255,.72);max-width:560px}
.ac-hero-cta{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:38px;flex-wrap:wrap}
.ac-btn-cta{
  height:52px;padding:0 28px;border-radius:13px;border:none;
  background:linear-gradient(150deg,#5CB251,#3E8C36);color:#fff;font-family:inherit;font-size:15.5px;font-weight:700;
  cursor:pointer;display:inline-flex;align-items:center;gap:9px;
  box-shadow:0 18px 40px -16px rgba(92,178,81,.85);transition:transform .2s,box-shadow .2s;
}
.ac-btn-cta:hover{transform:translateY(-2px);box-shadow:0 24px 50px -16px rgba(92,178,81,.95)}
.ac-btn-cta2{
  height:52px;padding:0 26px;border-radius:13px;border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.05);backdrop-filter:blur(10px);color:#fff;font-family:inherit;font-size:15.5px;font-weight:600;
  cursor:pointer;transition:background .2s,border-color .2s;
}
.ac-btn-cta2:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.32)}
.ac-stats{display:flex;align-items:center;justify-content:center;gap:40px;margin-top:56px}
.ac-stat{text-align:center}
.ac-stat-num{font-size:26px;font-weight:700}
.ac-stat-num small{font-size:15px;color:rgba(255,255,255,.5);font-weight:600}
.ac-stat-lbl{font-size:12.5px;color:rgba(255,255,255,.5);margin-top:2px}
.ac-stat-sep{width:1px;height:34px;background:rgba(255,255,255,.14)}

/* ---------- auth card ---------- */
#ac-cardwrap{
  position:relative;width:100%;display:flex;justify-content:center;will-change:transform,opacity;
  transition:opacity .5s ease, transform .8s cubic-bezier(.16,1,.3,1);
}
#ac-root[data-mode="hero"] #ac-cardwrap{opacity:0;transform:translateY(120px);pointer-events:none}
#ac-root:not([data-mode="hero"]) #ac-cardwrap{opacity:1;transform:translateY(0);pointer-events:auto}

.ac-card{
  position:relative;width:100%;max-width:400px;background:#fff;border:1px solid rgba(255,255,255,.6);
  border-radius:26px;box-shadow:0 44px 100px -44px rgba(0,0,0,.62);
  padding:22px 30px 28px;color:#16210f;overflow:hidden;
}
.ac-card-top{display:flex;align-items:center;justify-content:space-between;height:34px}
.ac-back{
  width:34px;height:34px;border-radius:10px;border:1px solid #eef1ea;background:#fff;color:#6b7563;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;transition:border-color .2s,color .2s;
}
.ac-back:hover{border-color:#16210f;color:#16210f}
.ac-card-logo{height:22px;width:auto}
.ac-card-head h2{margin:0;font-size:25px;font-weight:700;letter-spacing:-.025em;line-height:1.1}
.ac-card-head p{margin:6px 0 0;font-size:14px;color:#8a9583}

/* segmented */
.ac-seg{position:relative;display:flex;margin:20px 0 0;background:#eef2ea;border-radius:12px;padding:4px}
.ac-seg-ind{
  position:absolute;top:4px;left:4px;width:calc(50% - 4px);height:calc(100% - 8px);border-radius:8px;background:#fff;
  box-shadow:0 4px 12px -6px rgba(40,70,40,.4);transform:translateX(0);transition:transform .4s cubic-bezier(.34,1.2,.5,1);
}
#ac-root[data-mode="register"] .ac-seg-ind{transform:translateX(100%)}
.ac-seg button{
  position:relative;z-index:1;flex:1;padding:9px 0;border:none;background:transparent;
  font-family:inherit;font-size:13.5px;font-weight:700;cursor:pointer;color:#8a9583;transition:color .25s;
}
#ac-root:not([data-mode="register"]) .ac-seg button[data-seg="login"],
#ac-root[data-mode="register"] .ac-seg button[data-seg="register"]{color:#16210f}

/* form */
.ac-form{display:flex;flex-direction:column;gap:13px;margin-top:20px}
.ac-collapse{max-height:0;opacity:0;overflow:hidden;pointer-events:none;transition:max-height .45s cubic-bezier(.2,.7,.2,1), opacity .3s ease}
.ac-collapse.open{opacity:1;pointer-events:auto;transition:max-height .45s cubic-bezier(.2,.7,.2,1), opacity .3s ease .1s}
#ac-row-area.open{max-height:78px}
#ac-row-name.open{max-height:58px}
#ac-row-forgot{text-align:right;margin-top:-4px}
#ac-row-forgot.open{max-height:26px}
#ac-row-forgot span{font-size:12.5px;font-weight:500;color:#5f8a54;cursor:pointer}

.ac-area-lbl{font-size:12px;font-weight:600;color:#46523f;margin-bottom:8px;letter-spacing:.01em}
.ac-area-row{display:flex;gap:10px}
.ac-area-btn{
  flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 8px;border-radius:10px;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:600;border:1.5px solid #e9ede4;background:#fff;color:#6b7563;
  transition:border-color .2s,background .2s,color .2s;
}
.ac-area-btn.active{border-color:#5CB251;background:#f2f8ee;color:#2f7d24}

.ac-field{position:relative}
.ac-field .ic{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:#9aa795;display:flex;pointer-events:none}
.ac-field input{
  width:100%;height:50px;padding:0 16px 0 44px;border:1.5px solid #e6ebe1;border-radius:13px;background:#fff;
  font-family:inherit;font-size:14.5px;color:#16210f;outline:none;transition:border-color .2s,box-shadow .2s;
}
.ac-field input:focus{border-color:#5CB251;box-shadow:0 0 0 4px rgba(92,178,81,.14)}
.ac-field input.err{border-color:#d66a5a}
.ac-error{font-size:12.5px;color:#c65545;margin:-6px 0 0;padding-left:4px}

.ac-submit{
  width:100%;height:52px;border:none;border-radius:14px;background:linear-gradient(150deg,#5CB251,#3E8C36);color:#fff;
  font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:0 16px 32px -14px rgba(62,140,54,.8);transition:transform .2s,box-shadow .2s;margin-top:3px;
}
.ac-submit:hover{transform:translateY(-1px);box-shadow:0 22px 40px -14px rgba(62,140,54,.9)}

.ac-or{display:flex;align-items:center;gap:12px;margin:18px 0 14px}
.ac-or span:first-child,.ac-or span:last-child{flex:1;height:1px;background:#eef1ea}
.ac-or .lbl{font-size:11px;color:#aab3a2;font-weight:500;flex:none;background:none;height:auto}
.ac-social{display:flex;gap:10px}
.ac-social button{
  flex:1;height:48px;border-radius:13px;border:1.5px solid #e6ebe1;background:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:border-color .2s,background .2s,transform .2s;
}
.ac-social button:hover{border-color:#5CB251;background:#fafcf8;transform:translateY(-2px)}

@media (max-width:720px){
  .ac-h1{font-size:40px}
  .ac-stats{gap:22px}
}