@import url("https://fonts.googleapis.com/css2?family=Newsreader:wght@400;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap");

:root{
  --bg:#140608;
  --bg-2:#1b0b0f;
  --surface:rgba(20,8,10,0.85);
  --surface-2:rgba(32,12,14,0.75);
  --border:rgba(255,255,255,0.12);
  --muted:#b9a5ad;
  --accent:#f43f5e;
  --accent-2:#fb7185;
  --accent-3:#ef4444;
  --text:#fff1f2;
  --danger:#ef4444;
  --ring:rgba(244,63,94,0.35);
  --shadow-1:0 20px 45px rgba(20,6,10,0.45);
  --shadow-2:0 35px 65px rgba(20,6,10,0.55);
  --glow:0 0 50px rgba(244,63,94,0.18);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Space Grotesk", "Trebuchet MS", sans-serif;
  color:var(--text);
  background-color:var(--bg);
  background-image:
    radial-gradient(1200px 600px at 12% -10%, rgba(244,63,94,0.22), transparent 60%),
    radial-gradient(900px 500px at 90% 10%, rgba(251,113,133,0.16), transparent 55%),
    conic-gradient(from 210deg at 20% 20%, rgba(239,68,68,0.12), transparent 40%),
    linear-gradient(160deg, #140608 0%, #1b0b0f 55%, #0e0406 100%);
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(transparent 94%, rgba(255,255,255,0.04) 94%),
    linear-gradient(90deg, transparent 94%, rgba(255,255,255,0.04) 94%);
  background-size:48px 48px;
  opacity:0.25;
  z-index:0;
}
body::after{
  content:"";
  position:fixed;
  width:520px;
  height:520px;
  right:-180px;
  bottom:-220px;
  background:radial-gradient(circle, rgba(244,63,94,0.25), transparent 60%);
  filter:blur(10px);
  opacity:0.9;
  z-index:0;
}

main{position:relative;z-index:1;isolation:isolate}
.container{max-width:980px;margin:48px auto;padding:20px}
.page-auth .container{
  min-height:100vh;
  margin:0 auto;
  display:grid;
  place-items:center;
  padding:32px 20px;
}

.card{
  position:relative;
  background:linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015));
  padding:20px;
  border-radius:18px;
  border:1px solid var(--border);
  box-shadow:
    var(--shadow-1),
    inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter:blur(18px);
  animation:float-in 700ms ease-out;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(140deg, rgba(244,63,94,0.6), rgba(239,68,68,0.55), rgba(251,113,133,0.5));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  opacity:0.7;
}
.card::after{
  content:"";
  position:absolute;
  width:260px;
  height:260px;
  right:-120px;
  top:-140px;
  background:radial-gradient(circle, rgba(244,63,94,0.25), transparent 60%);
  opacity:0.6;
  filter:blur(6px);
  pointer-events:none;
}
.card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-2), var(--glow);
  transition:transform 200ms ease, box-shadow 200ms ease;
}
.auth-card{max-width:420px;width:100%;padding:28px;text-align:center}
.auth-card > *{
  animation:rise-fade 520ms ease-out both;
}
.auth-card > *:nth-child(1){animation-delay:0ms}
.auth-card > *:nth-child(2){animation-delay:80ms}
.auth-card > *:nth-child(3){animation-delay:140ms}
.auth-card > *:nth-child(4){animation-delay:200ms}
.auth-card > *:nth-child(5){animation-delay:260ms}
.auth-card > *:nth-child(6){animation-delay:320ms}
.auth-card::after{
  content:"";
  position:absolute;
  inset:auto 24px 12px 24px;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  opacity:0.4;
  pointer-events:none;
}

h2{
  margin:0 0 12px 0;
  font-family:"Newsreader", "Georgia", serif;
  font-weight:600;
  letter-spacing:0.4px;
}
p + p{margin-top:10px}
.topbar h2{
  background:linear-gradient(120deg, #fff, #fecdd3, #fda4af);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
p{margin:0}

input,
button,
.btn{
  font-family:inherit;
}
input{
  width:100%;
  padding:12px 14px;
  margin:8px 0;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(18,6,8,0.55);
  color:var(--text);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.02);
  transition:border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}
input::placeholder{color:rgba(154,164,178,0.8)}
input:focus{
  outline:none;
  border-color:rgba(244,63,94,0.65);
  box-shadow:0 0 0 4px var(--ring);
  background:rgba(22,7,10,0.7);
}

.form-row{display:flex;gap:10px;align-items:center}
.form-row input{flex:1}
.form-row.actions{margin-top:16px}
.form-row.add-row{margin-top:6px;margin-bottom:12px}

.btn{
  position:relative;
  overflow:hidden;
  background:linear-gradient(120deg,var(--accent),var(--accent-2),var(--accent-3));
  background-size:200% 200%;
  border:0;
  color:#2b0b10;
  padding:10px 16px;
  border-radius:10px;
  cursor:pointer;
  font-weight:600;
  letter-spacing:0.2px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  transition:transform 150ms ease, box-shadow 150ms ease;
  animation:shift 8s ease infinite;
}
.btn::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.55) 45%, transparent 60%);
  transform:translateX(-120%);
  transition:transform 550ms ease;
  opacity:0.5;
}
.btn:hover::before{transform:translateX(120%)}
.btn:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(32,8,12,0.35)}
.btn:active{transform:translateY(0)}
.btn.small{padding:7px 12px;font-size:0.9rem}
.btn.danger{background:linear-gradient(120deg,#fb7185,#f43f5e);color:#fff}
.btn.ghost{
  background:transparent;
  border:1px solid rgba(255,255,255,0.2);
  color:var(--text);
  box-shadow:none;
  animation:none;
}
.btn.ghost::before{display:none}

.muted{color:var(--muted);font-size:0.92rem;margin-top:12px}
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:18px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.items-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.item-row{
  position:relative;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.08);
  background:linear-gradient(135deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  box-shadow:0 8px 20px rgba(20,6,10,0.25);
  transition:transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.item-row::before{
  content:"";
  position:absolute;
  inset:8px auto 8px 8px;
  width:4px;
  border-radius:999px;
  background:linear-gradient(180deg, var(--accent), var(--accent-2));
  opacity:0.7;
}
.item-row:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,0.2);
  box-shadow:0 18px 30px rgba(20,6,10,0.35);
}
.item-meta{display:flex;flex-direction:column;gap:2px}
.item-actions{display:flex;gap:8px}
.item-edit{display:flex;flex-direction:column;gap:8px}
.item-row.editing{align-items:flex-start}
.item-row.editing .item-actions{align-self:flex-start}

::selection{
  background:rgba(244,63,94,0.25);
  color:#fff;
}

@keyframes float-in{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes rise-fade{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes shift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

@media (max-width:720px){
  .form-row{flex-direction:column}
  .container{padding:16px;margin:24px auto}
  .topbar{flex-direction:column;align-items:flex-start;gap:10px}
  .item-row{grid-template-columns:1fr}
  .item-actions{width:100%;justify-content:flex-end}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}