/* Portal gate — ledger dawn (not NewWeb dark/purple) */
:root{
  --ink:#12201c;
  --ink2:#1e3530;
  --mute:#5c716b;
  --line:rgba(18,32,28,.14);
  --paper:#eef5f1;
  --foam:#f7fbf8;
  --lime:#9fd356;
  --lime-deep:#6f9f2a;
  --copper:#c46b2d;
  --bad:#b42318;
  --ok:#0f7a4c;
  --display:"Syne",sans-serif;
  --body:"Manrope",sans-serif;
  --r:12px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body.gate-body{
  font-family:var(--body);
  color:var(--ink);
  min-height:100vh;
  background:var(--ink);
}
a{color:inherit;text-decoration:none}

/* —— Landing —— */
.gate{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  color:#f4faf6;
}
.gate-bg{
  position:absolute;inset:0;z-index:0;
  background:
    linear-gradient(105deg, rgba(10,22,18,.88) 0%, rgba(18,40,32,.72) 42%, rgba(12,28,22,.45) 100%),
    url("https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?auto=format&fit=crop&w=1920&q=80") center/cover no-repeat;
  transform:scale(1.04);
  animation:gateKen 18s ease-in-out infinite alternate;
}
@keyframes gateKen{
  from{transform:scale(1.04) translate3d(0,0,0)}
  to{transform:scale(1.1) translate3d(-1.5%,-1%,0)}
}
.gate-veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 55% 45% at 78% 70%, rgba(159,211,86,.18), transparent 60%),
    linear-gradient(180deg, rgba(8,16,14,.25) 0%, transparent 35%, rgba(8,16,14,.55) 100%);
}
.gate-grain{
  position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.gate-inner{
  position:relative;z-index:3;
  width:min(1120px,92vw);
  margin:0 auto;
  min-height:100vh;
  display:flex;flex-direction:column;
  padding:22px 0 28px;
}
.gate-top{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  animation:gateRise .7s ease both;
}
.gate-mark{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(1.35rem,2.6vw,1.75rem);
  letter-spacing:-.04em;
  line-height:1;
}
.gate-mark em{
  font-style:normal;
  color:var(--lime);
  margin-left:.08em;
}
.gate-top-meta{
  font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(244,250,246,.62);
}
.gate-hero{
  flex:1;
  display:flex;flex-direction:column;justify-content:center;
  max-width:640px;
  padding:48px 0 36px;
}
.gate-brand{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(2.6rem,8vw,4.6rem);
  letter-spacing:-.055em;
  line-height:.95;
  margin:0 0 18px;
  animation:gateRise .75s .08s ease both;
}
.gate-brand span{
  display:block;
  color:var(--lime);
}
.gate-lead{
  margin:0 0 28px;
  max-width:34ch;
  font-size:clamp(1rem,2.1vw,1.15rem);
  line-height:1.55;
  font-weight:500;
  color:rgba(244,250,246,.82);
  animation:gateRise .75s .16s ease both;
}
.gate-cta{
  display:flex;flex-wrap:wrap;gap:12px;
  animation:gateRise .75s .24s ease both;
}
.gate-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-width:168px;
  padding:14px 22px;
  border-radius:var(--r);
  font-family:var(--body);
  font-weight:800;
  font-size:15px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
}
.gate-btn:hover{transform:translateY(-2px)}
.gate-btn-user{
  background:var(--lime);
  color:#142016;
}
.gate-btn-user:hover{background:#b6e86a}
.gate-btn-admin{
  background:transparent;
  color:#f4faf6;
  border-color:rgba(244,250,246,.42);
}
.gate-btn-admin:hover{
  border-color:var(--lime);
  color:var(--lime);
}
.gate-foot{
  display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;
  font-size:12px;font-weight:600;
  color:rgba(244,250,246,.55);
  animation:gateRise .75s .32s ease both;
}
.gate-foot a{color:rgba(244,250,246,.8);border-bottom:1px solid rgba(159,211,86,.45)}
.gate-foot a:hover{color:var(--lime)}

@keyframes gateRise{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:none}
}

@media (max-width:640px){
  .gate-hero{padding:36px 0 28px}
  .gate-btn{width:100%}
  .gate-top-meta{display:none}
}

/* —— Auth screens —— */
body.gate-auth{
  min-height:100vh;
  background:
    radial-gradient(ellipse 70% 50% at 0% 0%, rgba(159,211,86,.22), transparent 55%),
    radial-gradient(ellipse 50% 40% at 100% 100%, rgba(196,107,45,.12), transparent 50%),
    linear-gradient(160deg, var(--foam) 0%, var(--paper) 55%, #e3ebe6 100%);
  color:var(--ink);
  font-family:var(--body);
}
.auth-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);
}
.auth-visual{
  position:relative;
  overflow:hidden;
  min-height:220px;
  background:
    linear-gradient(145deg, rgba(18,32,28,.82), rgba(18,32,28,.35)),
    url("https://images.unsplash.com/photo-1554224155-6726b3ff858f?auto=format&fit=crop&w=1400&q=80") center/cover no-repeat;
  color:#f4faf6;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:36px 40px;
}
.auth-visual::after{
  content:"";
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, transparent 30%, rgba(10,18,16,.72));
}
.auth-visual > *{position:relative;z-index:1}
.auth-visual .mark{
  font-family:var(--display);font-weight:800;font-size:1.5rem;letter-spacing:-.04em;margin-bottom:auto;
}
.auth-visual .mark em{font-style:normal;color:var(--lime)}
.auth-visual h2{
  margin:0 0 8px;
  font-family:var(--display);
  font-size:clamp(1.7rem,3vw,2.35rem);
  letter-spacing:-.04em;line-height:1.05;
}
.auth-visual p{margin:0;max-width:34ch;color:rgba(244,250,246,.78);font-weight:500;line-height:1.5}
.auth-panel{
  display:flex;flex-direction:column;justify-content:center;
  padding:36px clamp(22px,4vw,48px);
}
.auth-back{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:700;color:var(--mute);margin-bottom:22px;
}
.auth-back:hover{color:var(--ink)}
.auth-panel h1{
  margin:0 0 6px;
  font-family:var(--display);
  font-size:clamp(1.7rem,3vw,2.1rem);
  letter-spacing:-.04em;
}
.auth-panel .sub{margin:0 0 20px;color:var(--mute);font-weight:600;font-size:14px}
.auth-panel form label{
  display:block;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mute);margin:0 0 6px;
}
.auth-panel form input{
  width:100%;
  padding:13px 14px;
  margin:0 0 14px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:#fff;
  font:600 15px var(--body);
  color:var(--ink);
}
.auth-panel form input:focus{
  outline:2px solid rgba(159,211,86,.55);
  border-color:var(--lime-deep);
}
.auth-submit{
  width:100%;
  margin-top:4px;
  padding:14px 18px;
  border:0;border-radius:var(--r);
  background:var(--ink);
  color:#f4faf6;
  font:800 15px var(--body);
  cursor:pointer;
  transition:background .2s, transform .2s;
}
.auth-submit:hover{background:var(--ink2);transform:translateY(-1px)}
.auth-submit.admin{background:var(--copper)}
.auth-submit.admin:hover{background:#a85922}
.auth-alert{
  padding:12px 14px;border-radius:var(--r);margin-bottom:14px;font-weight:700;font-size:14px;
}
.auth-alert.err{background:#fee4e2;color:var(--bad)}
.auth-links{margin-top:16px;font-size:13px;font-weight:600;color:var(--mute)}
.auth-links a{color:var(--ink);border-bottom:1px solid var(--lime)}

@media (max-width:860px){
  .auth-shell{grid-template-columns:1fr}
  .auth-visual{min-height:180px;padding:24px}
  .auth-visual h2{font-size:1.5rem}
}