/* ---- theme ---- */
:root{
  --bg-1:#030711;
  --bg-2:#0d1117;
  --blue:#2563ff;
  --blue-hover:#3d75ff;
  --text:#dbe0ff;
  --muted:#a9b2d6;
  --card:#ffffff0d;
  --card-border:#ffffff1a;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  color:var(--text);
  background:radial-gradient(circle at 50% 0,#0d1a37 0%,var(--bg-2) 60%) var(--bg-1);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

/* Headings keep Big Shoulders */
.title,.card-title,h1,h2{font-family:'Big Shoulders Display',sans-serif}

/* ---- layout ---- */
.hero{
  min-height:calc(100vh - 60px);
  display:flex;align-items:center;justify-content:center;
  padding:1rem;
}
.hero-stack{text-align:center;display:flex;flex-direction:column;gap:1rem;align-items:center}
.title{font-size:clamp(2.2rem,5vw,3.6rem);font-weight:700;color:var(--text)}
.tagline{color:var(--muted)}
.cta-row{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center;justify-content:center}
footer{height:60px;display:flex;align-items:center;justify-content:center;color:rgba(219,224,255,.35);font-size:.85rem}

/* ---- card ---- */
.card{
  width:min(950px,92vw);
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:14px;
  padding:1.5rem;
  margin: 0 auto 2rem;
}
.card-title{color:var(--blue);font-size:2rem;text-align:center;margin-bottom:1rem}

/* ---- form / status ---- */
.row{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap}
.upload-box{display:flex;flex-direction:column;gap:1rem}
#report-file{color:var(--text)}
.status-line{margin-top:1rem;font-weight:600;text-align:center}
.muted{color:var(--muted)}

/* ---- one button style for both <button> and <a> ---- */
.google-btn,
.google-btn:visited {
  display:inline-flex; align-items:center; justify-content:center;
  padding:0.55rem 1.15rem;
  border-radius:8px;
  border:none;
  text-decoration:none;
  cursor:pointer;
  font: 600 0.9rem/1 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:#fff !important;
  background:transparent;
  position:relative;
  z-index:1;
}
.google-btn span{position:relative;z-index:3}

/* inner solid layer */
.google-btn::before{
  content:''; position:absolute; inset:2px;
  background:var(--blue);
  border-radius:6px;
  z-index:2; transition:background .2s ease;
}

/* animated glow layer */
.google-btn::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(60deg,
    hsl(224,85%,66%), hsl(269,85%,66%), hsl(314,85%,66%),
    hsl(359,85%,66%), hsl(44,85%,66%), hsl(89,85%,66%),
    hsl(134,85%,66%), hsl(179,85%,66%));
  background-size:400% 400%;
  border-radius:8px; z-index:1;
  animation:animated_border 3s linear infinite;
  opacity:0; transition:opacity .3s ease-in-out;
}
.google-btn:hover::before{background:var(--blue-hover)}
.google-btn:hover::after{opacity:1}

/* disabled state */
.is-disabled {
  pointer-events:none;
  opacity:.55;
  filter:grayscale(.15);
}
.is-disabled.google-btn::before{ background:#3d5cff; }

/* keyframes */
@keyframes animated_border{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* ---- confirm/report details ---- */
.confirm{margin-top:1.25rem;display:flex;flex-direction:column;gap:1rem}
.confirm-title{font-family:'Big Shoulders Display',sans-serif;color:var(--text);font-size:1.35rem;text-align:left}
.k{color:var(--muted);margin-right:.3rem}
.title-input{
  background:#0b1222;
  border:1px solid var(--card-border);
  color:var(--text);
  padding:.5rem .6rem;
  border-radius:8px;
  width:min(620px,92vw)
}
.techniques .h{margin:.4rem 0 .25rem 0;color:var(--muted)}
.tech-list{padding-left:1rem;display:flex;flex-direction:column;gap:.35rem;line-height:1.35}
.tech-list li{list-style:disc}

/* small banner used on /upload */
.banner{
  font-family:'Big Shoulders Display',sans-serif;
  border-radius:8px; padding:.65rem .9rem; margin:.5rem 0 1rem; text-align:center;
}
.banner.warn{ background:rgba(255,180,0,.1); color:#ffd37a; border:1px solid rgba(255,180,0,.35); }

/* readable list inside confirm section */
.tech-list{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  font-size:.975rem; line-height:1.45rem; letter-spacing:.01em;
}

/* NEW: center the page-level title on /upload to mirror the home hero */
.page-title{
  text-align:center;
  margin:1.75rem 0 .75rem;
}