/* ✅ FIX: prevent inputs/buttons from overflowing their container */
*, *::before, *::after { box-sizing: border-box; }

    body{
  font-family: Arial;
  margin:0;
  min-height:100vh;
  background:#fff;
  color:#250101;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;            /* ✅ reduced */
  overflow:hidden;         /* ✅ so shapes don’t create scroll */
  position:relative;
}

/* ✅ Floating 3D shapes layer */
.fx{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
}
.fx i{
  position:absolute;
  width:140px;
  height:140px;
  border-radius:28px;
  transform-style:preserve-3d;
  background: linear-gradient(145deg, rgba(66,4,4,0.10), rgba(27,143,58,0.10));
  box-shadow:
    0 22px 60px rgba(0,0,0,0.10),
    inset 0 1px 0 rgba(255,255,255,0.7);
  filter: blur(0.0px);
  animation: floaty 10s ease-in-out infinite;
  opacity:0.9;
}
.fx i::after{
  content:"";
  position:absolute;
  inset:14px;
  border-radius:22px;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.65), transparent 55%);
  transform: translateZ(20px);
}
@keyframes floaty{
  0%,100%{ transform: translateY(0) rotateX(10deg) rotateY(-10deg); }
  50%{ transform: translateY(-18px) rotateX(-10deg) rotateY(12deg); }
}

/* ✅ positions + different sizes */
.fx .s1{ top:6%; left:6%; width:170px; height:170px; animation-duration:11s; }
.fx .s2{ top:12%; right:8%; width:120px; height:120px; animation-duration:9s;  border-radius:999px; }
.fx .s3{ bottom:10%; left:12%; width:150px; height:150px; animation-duration:12s; transform: rotate(12deg); }
.fx .s4{ bottom:8%; right:10%; width:190px; height:190px; animation-duration:13s; border-radius:34px; }
.fx .s5{ top:45%; left:50%; width:110px; height:110px; animation-duration:8s; border-radius:26px; opacity:0.55; }

/* ✅ your card/wrap should sit above shapes */
.wrap{
  width:min(920px, 96vw);
  display:grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap:14px;                 /* ✅ slightly reduced */
  align-items:stretch;
  position:relative;
  z-index:1;
}

/* ✅ give the main card a real "card" feel (you already had .card but no styles) */
.card{
  background:#fff;
  border-radius:20px;
  padding:18px;             /* ✅ reduced */
  box-shadow: 0 16px 40px rgba(0,0,0,0.10);
  border: 1px solid rgba(37,1,1,0.08);
}

    @media (max-width: 820px){
      .wrap{ grid-template-columns: 1fr; }
    }
    h1{
      margin:0 0 6px 0;
      font-size: clamp(22px, 4.4vw, 34px);
      color:#420404;
    }
    .sub{
      margin:0 0 14px 0;
      opacity:0.85;
      line-height:1.4;
      font-size: 14px;
    }
    .big-actions{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
      margin-top:14px;
    }
    .bigbtn{
      flex:1 1 260px;
      padding:16px 14px;
      border-radius:18px;
      border:none;
      cursor:pointer;
      font-weight:bold;
      font-size:16px;
      box-shadow: 0 10px 18px rgba(0,0,0,0.10);
      transition: transform .12s;
    }
    .bigbtn:active{ transform: scale(0.98); }
    .btn-login{ background:#420404; color:#fff; }
    .btn-register{ background:#1b8f3a; color:#fff; }
    .btn-ghost{
      background:#f4f4f4;
      color:#250101;
      border:1px solid rgba(37,1,1,0.14);
      box-shadow:none;
    }

    .hint{
      margin-top:10px;
      font-size:12px;
      opacity:0.75;
    }

    /* Modal */
    .overlay{
      position:fixed; inset:0;
      background: rgba(0,0,0,0.55);
      display:none;
      z-index: 5000;
    }
    .modal{
  position:fixed;
  top:8%;                 /* ✅ raised (was 18%) */
  left:50%;
  transform: translateX(-50%);
  width:min(520px, 94vw);
  background:#fff;
  color:#250101;
  border-radius:16px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.35);
  padding:16px;
  display:none;
  z-index: 5001;

  max-height: 84vh;       /* ✅ prevents going off-screen */
  overflow-y: auto;       /* ✅ scroll inside modal if content is long */
}
.modal{ -webkit-overflow-scrolling: touch; }

    .modal h3{
      margin:0 0 10px 0;
      text-align:center;
      color:#420404;
    }
    label{
      display:block;
      font-weight:bold;
      margin:10px 0 6px;
      font-size:13px;
    }
    input, select{
      width:100%;
      padding:11px 10px;
      border-radius:12px;
      border:1px solid #bbb;
      outline:none;
      font-size:14px;
    }
    .row{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:10px;
    }
    @media (max-width: 520px){
      .row{ grid-template-columns: 1fr; }
    }
    .actions{
      display:flex;
      gap:10px;
      justify-content:center;
      margin-top:12px;
      flex-wrap:wrap;
    }
    .btn{
      padding:10px 14px;
      border-radius:20px;
      border:none;
      cursor:pointer;
      font-weight:bold;
    }
    .btn-primary{ background:#420404; color:#fff; }
    .btn-success{ background:#1b8f3a; color:#fff; }
    .btn-danger{ background:#b00020; color:#fff; }
    .msg{
      margin-top:10px;
      font-size:13px;
      text-align:center;
      color:#b00020;
      min-height:18px;
    }

    /* Right info panel */
    .side h4{
      margin:0 0 8px 0;
      color:#420404;
    }
    .side p{
      margin:0 0 10px 0;
      font-size:13px;
      line-height:1.5;
      opacity:.85;
    }
    .badge{
      display:inline-block;
      padding:6px 10px;
      border-radius:999px;
      background: rgba(66,4,4,0.08);
      border:1px solid rgba(66,4,4,0.15);
      font-size:12px;
      font-weight:bold;
      color:#420404;
    }
    .small{
      font-size:12px;
      opacity:0.7;
      margin-top:10px;
    }

    .how-hint{
  margin: 6px 0 12px 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(66,4,4,0.06);
  border: 1px solid rgba(66,4,4,0.12);
  font-size: 12px;
  line-height: 1.45;
  opacity: 0.92;
}
/* =========================
   CLEAN FOOTER
========================= */
.page{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  position:relative;
  z-index:1; /* above shapes */
}

.footer{
  width:min(920px, 96vw);
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(37,1,1,0.10);
  box-shadow: 0 16px 40px rgba(0,0,0,0.08);
  border-radius: 20px;
  padding: 14px 16px;
  backdrop-filter: blur(6px);
}

.footer-top{
  display:flex;
  gap:12px;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
}

.foot-brand{
  display:flex;
  gap:10px;
  align-items:flex-start;
}

.foot-logo{
  width:40px;
  height:40px;
  border-radius:14px;
  background: linear-gradient(145deg, rgba(66,4,4,0.12), rgba(27,143,58,0.12));
  border: 1px solid rgba(66,4,4,0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.75);
}

.foot-title{
  margin:0;
  font-weight:900;
  color:#420404;
  font-size:14px;
  line-height:1.1;
}

.foot-sub{
  margin:2px 0 0 0;
  font-size:12px;
  opacity:0.78;
  line-height:1.35;
  max-width:520px;
}

.foot-cols{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  min-width: 280px;
}

@media (max-width: 520px){
  .foot-cols{ grid-template-columns: 1fr; width:100%; }
}

.foot-col h5{
  margin:0 0 6px 0;
  color:#420404;
  font-size:12px;
  letter-spacing:.2px;
}

.foot-list{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:12px;
  opacity:0.86;
}

.foot-list a{
  color:#250101;
  text-decoration:none;
  border-bottom: 1px dashed rgba(66,4,4,0.25);
}
.foot-list a:hover{
  border-bottom-style: solid;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(66,4,4,0.06);
  border:1px solid rgba(66,4,4,0.12);
  font-size:11px;
  font-weight:800;
  color:#420404;
}

.footer-bottom{
  margin-top:10px;
  padding-top:10px;
  border-top: 1px solid rgba(37,1,1,0.08);
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:space-between;
}

.foot-mini{
  font-size:11px;
  opacity:0.75;
}

.foot-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.foot-btn{
  padding:8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(37,1,1,0.14);
  background:#fff;
  font-size:11px;
  font-weight:900;
  cursor:pointer;
}
.foot-btn:active{ transform: scale(0.98); }

.foot-btn-primary{
  background:#420404;
  color:#fff;
  border:none;
}
.foot-btn-danger{
  background:#b00020;
  color:#fff;
  border:none;
}

/* =========================
   FOOTER 3D UPGRADE (extra)
========================= */
.footer{
  transform: translateZ(0);
  position: relative;
  overflow: hidden;
}
.footer::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(circle at 20% 20%, rgba(66,4,4,0.18), transparent 45%),
    radial-gradient(circle at 80% 10%, rgba(27,143,58,0.16), transparent 50%),
    radial-gradient(circle at 30% 90%, rgba(0,0,0,0.08), transparent 55%);
  filter: blur(10px);
  opacity:.9;
  pointer-events:none;
}
.footer::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(135deg, rgba(255,255,255,0.55), rgba(255,255,255,0.10));
  pointer-events:none;
}

.foot-logo{
  transform: perspective(900px) rotateX(14deg) rotateY(-16deg);
  box-shadow:
    0 18px 40px rgba(0,0,0,0.10),
    inset 0 1px 0 rgba(255,255,255,0.85);
}
.footer *{ position: relative; z-index: 1; }
/* =========================
   HOW IT WORKS MODAL (Beautify)
   Uses existing IDs/classes:
   #ovHow, #mdHow, .howModal, .howHeader, .howCard, etc.
========================= */

/* Keep it above everything */
#ovHow{
  z-index: 7000; /* above normal overlays */
}

/* Make HOW modal wider + cleaner */
#mdHow.howModal{
  width: min(760px, 94vw);
  padding: 0;                 /* we’ll pad inner parts */
  border-radius: 18px;
  overflow: hidden;           /* so header corners look perfect */
  border: 1px solid rgba(37,1,1,0.10);
  box-shadow: 0 22px 60px rgba(0,0,0,0.30);
}

/* Header bar */
#mdHow .howHeader{
  padding: 14px 16px;
  font-weight: 1000;
  font-size: 16px;
  letter-spacing: .2px;
  color: #420404;
  background: linear-gradient(145deg, rgba(66,4,4,0.10), rgba(27,143,58,0.10));
  border-bottom: 1px solid rgba(37,1,1,0.10);
}

/* Inner spacing */
#mdHow{
  /* keep base .modal behavior; add inner padding via children */
}
#mdHow .howHeader + *{
  margin-top: 0;
}

/* Cards */
#mdHow .howCard{
  margin: 12px 14px;
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(37,1,1,0.10);
  box-shadow: 0 12px 26px rgba(0,0,0,0.08);
}

#mdHow .howTip{
  background: rgba(66,4,4,0.05);
  border-color: rgba(66,4,4,0.12);
}

#mdHow .howNew{
  background: rgba(27,143,58,0.06);
  border-color: rgba(27,143,58,0.14);
}

#mdHow .howExisting{
  background: rgba(66,4,4,0.04);
  border-color: rgba(66,4,4,0.12);
}

#mdHow .howIssues{
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.10);
}

/* Titles inside cards */
#mdHow .howTitle{
  font-weight: 1000;
  color: #420404;
  margin-bottom: 8px;
  font-size: 13px;
}

/* Lists (clean spacing) */
#mdHow .howList{
  margin: 0;
  padding-left: 18px;
  line-height: 1.55;
  font-size: 13px;
  opacity: 0.92;
}

#mdHow .howList li{
  margin: 6px 0;
}

/* Sub list */
#mdHow .howSubList{
  margin: 8px 0 0 0;
  padding-left: 18px;
  list-style: disc;
  opacity: 0.95;
}
#mdHow .howSubList li{
  margin: 4px 0;
}

/* Note box */
#mdHow .howNote{
  margin-top: 10px;
  padding: 10px 10px;
  border-radius: 14px;
  background: rgba(66,4,4,0.06);
  border: 1px dashed rgba(66,4,4,0.20);
  font-size: 12px;
  opacity: 0.9;
}

/* Actions row */
#mdHow .howActions{
  display: flex;
  justify-content: center;
  padding: 10px 14px 14px;
}

/* Close button for HOW modal */
#mdHow .btnGhost{
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 1000;
  cursor: pointer;
  border: 1px solid rgba(37,1,1,0.14);
  background: #fff;
  color: #420404;
  box-shadow: 0 10px 18px rgba(0,0,0,0.08);
}
#mdHow .btnGhost:active{
  transform: scale(0.98);
}
/* =========================================
   FIX HOW MODAL CLOSE BUTTON (SAFE VERSION)
========================================= */

/* Ensure modal scrolls normally */
#mdHow{
  overflow-y: auto;
  padding-bottom: 20px; /* space for button */
}

/* Keep button visible but do NOT freeze modal */
#mdHow .howActions{
  display: flex;
  justify-content: center;
  padding: 14px;
  position: relative;
}

/* Larger tap target */
#mdHow .btnGhost{
  width: 100%;
  max-width: 260px;
  font-size: 15px;
  padding: 14px 18px;
}