:root{
  --bg:#f5f7fb;
  --card:#ffffff;
  --accent:#2b8cff;
  --muted:#6b7280;
  --text:#111827;
  --radius:12px;
  --shadow: 0 6px 18px rgba(15,23,42,0.08);
  --glass: rgba(255,255,255,0.7);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:linear-gradient(180deg,#eef2ff 0%,var(--bg) 100%);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.4;
}

/* Layout container */
.container{
  max-width:1100px;
  margin:0 auto;
  padding:24px;
}

/* Header */
.site-header{
  padding:12px 0;
  background:transparent;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.logo{
  width:44px;
  height:44px;
  background:#ddd;
  border-radius:10px;
  display:inline-block;
}
.brand-name{
  font-weight:700;
  font-size:1.1rem;
  letter-spacing:0.2px;
}
.nav .btn{padding:8px 12px}

/* Main grid */
.main-grid{
  display:grid;
  grid-template-columns: 1fr 380px;
  gap:28px;
  align-items:start;
  padding-top:12px;
}

/* Hero */
.hero{
  padding:30px;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,0.65), rgba(255,255,255,0.55));
  box-shadow:var(--shadow);
}
.hero h1{margin:0 0 8px;font-size:2.1rem}
.lead{margin:0 0 20px;color:var(--muted)}
.features{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:8px}
.features li{background:var(--glass);padding:10px;border-radius:10px;max-width:520px}

/* CTA */
.cta-row{display:flex;gap:12px;margin-top:12px}
.btn{
  appearance:none;
  border:0;
  background:var(--accent);
  color:#fff;
  padding:10px 14px;
  border-radius:10px;
  cursor:pointer;
  font-weight:600;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  box-shadow:0 6px 14px rgba(43,140,255,0.18);
}
.btn:active{transform:translateY(1px)}

/* Signup panel */
/* --- Flip-card auth panel --- */
.flip-wrap {
  perspective: 1200px;
  width: 100%;
  max-width: 360px;
}
.flip-card {
  width: 100%;
  transform-style: preserve-3d;
  transition: transform 700ms cubic-bezier(.2,.9,.24,1);
  position: relative;
  min-height: 380px; /* justera efter innehåll */
}
/* när denna klass läggs till roteras kortet */
.flip-wrap.is-flipped .flip-card {
  transform: rotateY(180deg);
}

/* båda sidor */
.card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0;
  border-radius: 14px;
}

/* Front (default) */
.card-front {
  transform: rotateY(0deg);
  z-index: 2;
}

/* Back (roteras 180) */
.card-back {
  transform: rotateY(180deg);
  z-index: 1;
}

/* Behåll box-styling liknande dina tidigare .box */
.flip-card .box {
  width: 100%;
  background: var(--card);
  padding: 18px;
  border-radius: 14px;
  box-shadow: var(--shadow);
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Mjuk "blad"-look: liten tilt under hover/touch */
.flip-wrap:hover .flip-card,
.flip-wrap:focus-within .flip-card {
  transition-duration: 520ms;
}

/* Anpassa form-element för att se ut som tidigare */
#registerForm label,
#loginForm label { margin-bottom: 10px; display:block; }
#registerForm input,
#loginForm input { width:100%; padding:10px 12px; border-radius:10px; border:1px solid #e6e9ef; background:#fbfdff; }

/* gör knappar i formulär smidigare när kortet snurrar */
.form-actions { display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }

/* extra: smidig reduced-motion fallback */
@media (prefers-reduced-motion: reduce) {
  .flip-card { transition: none !important; }
  .flip-wrap.is-flipped .flip-card { transform: none !important; }
}
.box h2{margin:0 0 6px}
.muted{color:var(--muted);margin:0 0 12px;font-size:0.95rem}

/* Form styles */
form label{
  display:block;
  font-size:0.95rem;
  margin-bottom:10px;
  color:var(--text);
}
form input{
  width:100%;
  margin-top:6px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid #e6e9ef;
  font-size:0.95rem;
  background: #fbfdff;
}
.form-actions{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.msg{margin-top:12px;font-size:0.95rem;color:var(--muted)}

/* Footer */
.site-footer{padding:24px 0;margin-top:40px;color:var(--muted);text-align:center}

/* Responsive */
@media (max-width:900px){
  .main-grid{grid-template-columns:1fr; padding-bottom:20px}
  .signup-panel{justify-content:center;margin-top:14px}
  .box{max-width:520px}
}