@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Outfit:wght@200;300;400;500&display=swap');

:root{
  --black:#000;
  --bg:#050506;
  --charcoal:#141416;
  --charcoal-2:#1b1c1f;
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.14);
  --text:#f5f6f8;
  --muted:#9aa1ab;
  --red-1:#ff6152;
  --red-2:#e2101a;
  --red-3:#9c0410;
  --radius:16px;
  --maxw:1040px;
}

*,*::before,*::after{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--black);
  color:var(--text);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.5;
}
a{color:inherit;text-decoration:none;}
img{display:block;}

/* ---------- ambient glow ---------- */
.hero-glow{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(38% 32% at 50% 40%,
            rgba(226,16,26,.14), rgba(226,16,26,.03) 50%, transparent 64%);
}
.hero-glow--soft{opacity:.55;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5em; padding:.8rem 1.7rem; cursor:pointer;
  font-family:inherit; font-size:.98rem; font-weight:600; letter-spacing:.02em;
  color:#ff5b50; background:transparent;
  border:1.5px solid var(--red-2); border-radius:12px;
  transition:background .16s ease, color .16s ease, border-color .16s ease, transform .1s ease;
}
.btn:hover{background:var(--red-2); color:#fff;}
.btn:active{transform:translateY(1px);}
.btn:focus-visible{outline:2px solid #ff5b50; outline-offset:3px;}
.btn-block{width:100%;}
.btn-sm{padding:.5rem 1.05rem; font-size:.86rem; border-radius:10px;}
.btn-ghost{color:var(--text); border-color:var(--line-strong);}
.btn-ghost:hover{background:rgba(255,255,255,.08); color:var(--text);}

/* ---------- landing ---------- */
.hero{
  position:relative; z-index:1;
  min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:2rem 1.25rem 4rem; gap:1.6rem;
}
.hero-logo{
  width:clamp(220px,40vw,470px); height:auto;
  filter:drop-shadow(0 9px 22px rgba(226,16,26,.20));
  animation:rise .8s cubic-bezier(.2,.7,.2,1) both;
}
.wordmark{
  margin:0; font-family:'Outfit',sans-serif; font-weight:300;
  font-size:clamp(1.05rem,3.2vw,2rem); letter-spacing:.16em; color:#fff;
  animation:rise .8s .08s cubic-bezier(.2,.7,.2,1) both;
}
.hero .btn{margin-top:.4rem; animation:rise .8s .16s cubic-bezier(.2,.7,.2,1) both;}
@keyframes rise{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}}

/* ---------- auth ---------- */
.auth{display:flex; min-height:100vh; min-height:100svh;}
.auth-wrap{
  position:relative; z-index:1; margin:auto; width:100%; max-width:400px;
  display:flex; flex-direction:column; align-items:center; gap:1.4rem; padding:2rem 1.25rem;
}
.auth-brand{display:flex; flex-direction:column; align-items:center; gap:.7rem;}
.auth-logo{width:120px; height:auto; filter:drop-shadow(0 8px 20px rgba(226,16,26,.18));}
.auth-brand-name{font-family:'Outfit',sans-serif; font-weight:300;
  letter-spacing:.14em; font-size:.95rem; color:var(--muted);}
.card{
  width:100%; background:var(--charcoal);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:1.6rem 1.5rem 1.7rem;
  display:flex; flex-direction:column; gap:1rem;
}
.card-title{margin:.1rem 0 .2rem; font-size:1.25rem; font-weight:600;}
.field{display:flex; flex-direction:column; gap:.4rem;}
.field span{font-size:.74rem; text-transform:uppercase; letter-spacing:.12em; color:var(--muted);}
.field input{
  width:100%; padding:.8rem .9rem; border-radius:10px; border:1px solid var(--line-strong);
  background:#0d0d0f; color:var(--text); font:inherit;
  transition:border-color .15s, box-shadow .15s;
}
.field input:focus{outline:none; border-color:var(--red-2);
  box-shadow:0 0 0 3px rgba(226,16,26,.25);}
.alert{margin:0; padding:.7rem .85rem; border-radius:10px; font-size:.88rem;
  background:rgba(226,16,26,.12); border:1px solid rgba(226,16,26,.4); color:#ffd9d6;}
.back-link{color:var(--muted); font-size:.88rem;}
.back-link:hover{color:var(--text);}

/* ---------- dashboard ---------- */
.topbar{
  position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.85rem clamp(1rem,4vw,2rem);
  background:rgba(5,5,6,.8); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.topbar-brand{display:flex; align-items:center; gap:.7rem;
  font-family:'Outfit',sans-serif; font-weight:300; letter-spacing:.1em; font-size:.95rem;}
.topbar-logo{width:40px; height:auto;}
.topbar-nav{display:flex; align-items:center; gap:1rem;}
.topbar-user{color:var(--muted); font-size:.82rem;}
.app-main{max-width:var(--maxw); margin:0 auto;
  padding:clamp(1.5rem,5vw,3rem) clamp(1rem,4vw,2rem);}
.page-title{margin:0 0 .25rem; font-size:clamp(1.5rem,4vw,2rem); font-weight:600; letter-spacing:-.01em;}
.page-sub{margin:0 0 2rem; color:var(--muted);}
.tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1.1rem;}
.tile{
  position:relative; display:flex; flex-direction:column; gap:.55rem;
  padding:1.4rem; min-height:190px; border-radius:var(--radius);
  background:var(--charcoal);
  border:1px solid var(--line); overflow:hidden;
  transition:transform .15s ease, border-color .2s ease, background .2s ease;
}
a.tile:hover{transform:translateY(-2px); border-color:var(--red-2); background:#1a1a1e;}
.tile-icon{
  width:54px; height:54px; border-radius:13px; display:flex; align-items:center; justify-content:center;
  background:#202024;
  border:1px solid var(--line); margin-bottom:.3rem;
}
.tile-name{margin:0; font-size:1.12rem; font-weight:600;}
.tile-desc{margin:0; color:var(--muted); font-size:.9rem; flex:1;}
.tile-cta{margin-top:.4rem; font-size:.88rem; font-weight:600; color:#ff6d5f;}
.tile--soon{opacity:.7;}
.tile--soon .tile-cta{color:var(--muted);}
.tile--add{opacity:.55; border-style:dashed;}
.tile-icon--ghost{font-size:1.7rem; color:var(--muted); background:transparent; border-style:dashed;}

@media (max-width:480px){ .topbar-user{display:none;} }

/* ---------- forgot link ---------- */
.forgot-link{align-self:center; color:var(--muted); font-size:.84rem;}
.forgot-link:hover{color:var(--text);}

/* ---------- admin ---------- */
.admin-main{max-width:1000px; margin:0 auto; padding:clamp(1.4rem,4vw,2.6rem) clamp(1rem,4vw,2rem);}
.flash{padding:.7rem .9rem; border-radius:10px; margin:0 0 1.1rem; font-size:.9rem;}
.flash.ok{background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.4); color:#bbf7d0;}
.flash.err{background:rgba(226,16,26,.12); border:1px solid rgba(226,16,26,.4); color:#ffd9d6;}
.panel{background:var(--charcoal); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.2rem 1.2rem 1.4rem; margin-bottom:1.3rem;}
.panel h2{margin:.1rem 0 1rem; font-size:1.05rem; font-weight:600;}
.urow{border-top:1px solid var(--line); padding:1.1rem 0;}
.urow:first-of-type{border-top:none; padding-top:.2rem;}
.uhead{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; flex-wrap:wrap;}
.uname{font-weight:600;}
.badge{font-size:.68rem; text-transform:uppercase; letter-spacing:.1em;
  padding:.15rem .5rem; border-radius:999px; border:1px solid var(--line-strong); color:var(--muted); margin-left:.4rem;}
.badge.admin{color:#ff8a80; border-color:rgba(226,16,26,.5);}
.form-row{display:flex; flex-wrap:wrap; gap:.55rem; align-items:center; margin-top:.6rem;}
.form-row input[type=text],.form-row input[type=email],.form-row input[type=password],.form-row select{
  padding:.5rem .6rem; border-radius:8px; border:1px solid var(--line-strong);
  background:#0d0d0f; color:var(--text); font:inherit; font-size:.88rem;}
.form-row input:focus,.form-row select:focus{outline:none; border-color:var(--red-2); box-shadow:0 0 0 3px rgba(226,16,26,.2);}
.appchecks{display:flex; flex-wrap:wrap; gap:.7rem 1rem; align-items:center; margin:.2rem 0;}
.appchecks label{display:flex; align-items:center; gap:.35rem; font-size:.85rem; color:var(--muted);}
.muted{color:var(--muted); font-size:.88rem;}
.danger-btn{border-color:rgba(226,16,26,.45); color:#ff6d5f;}
.danger-btn:hover{background:var(--red-2); color:#fff; border-color:var(--red-2);}