@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  background: #fdfcf8;
  color: #111;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Scroll entry reveals ── */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-d1 { transition-delay: 80ms; }
.reveal-d2 { transition-delay: 160ms; }
.reveal-d3 { transition-delay: 240ms; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ── Login page ── */
body.login {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 100dvh; padding: 3rem 1.5rem; gap: 0;
}
.app-title {
  width: 100%; max-width: 440px;
  margin: 0 0 1.75rem;
  font-size: 1.875rem; font-weight: 800;
  color: #111; text-align: center;
  letter-spacing: -.045em; line-height: 1.1;
}

/* Double-bezel shell */
.card-shell {
  background: rgba(17,15,10,.028);
  border: 1px solid rgba(17,15,10,.08);
  border-radius: 1.75rem;
  padding: .375rem;
}
.login-card-shell { width: 100%; max-width: 440px; }

/* Inner card */
.card {
  background: #fff;
  border-radius: 1.375rem;
  padding: 2.25rem 2rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 1px 2px rgba(17,15,10,.04);
}

.logo { display: block; height: 60px; width: auto; margin: 0 auto 1.625rem; object-fit: contain; }
.card-eyebrow {
  display: block; text-align: center;
  margin: 0 0 .35rem; font-size: .68rem; font-weight: 700;
  color: #aca49a; text-transform: uppercase; letter-spacing: .14em;
}
.form-heading {
  margin: 0 0 1.5rem; font-size: 1.3rem; font-weight: 700;
  color: #111; letter-spacing: -.03em; text-align: center;
}
.description {
  background: #f8f7f2; border: 1px solid #ece9e1;
  border-left: 2.5px solid #c3bfb4;
  border-radius: .5rem;
  padding: .8rem 1rem; margin-bottom: 1.5rem; font-size: .845rem;
  color: #5a5248; line-height: 1.62;
}
label {
  display: block; font-size: .8rem; font-weight: 600;
  color: #3a3530; margin-bottom: .3rem; letter-spacing: .01em;
}
input {
  display: block; width: 100%; padding: .6rem .9rem;
  border: 1px solid #dedad3; border-radius: .625rem;
  font-size: .9375rem; font-family: inherit; margin-bottom: .875rem;
  outline: none; background: #fdfcf8;
  transition: border-color 250ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 250ms cubic-bezier(0.16, 1, 0.3, 1);
}
input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.1); background: #fff; }

/* Primary pill button (login submit) */
.btn-primary {
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: .7rem 1.5rem;
  background: #111; color: #fff;
  border: none; border-radius: 9999px;
  font-size: .9375rem; font-weight: 700; font-family: inherit;
  cursor: pointer; margin-top: .375rem; letter-spacing: -.01em;
  transition: background 250ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 120ms cubic-bezier(0.32, 0.72, 0, 1);
}
.btn-primary:hover { background: #1c1c1c; }
.btn-primary:active { transform: scale(0.97); }

.error {
  background: #fff1f2; border: 1px solid #fecdd3; color: #9f1239;
  font-size: .845rem; padding: .6rem .9rem; border-radius: .5rem; margin-bottom: 1rem;
}
.contact {
  margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid #ece9e1;
  font-size: .775rem; color: #aca49a; line-height: 1.65; text-align: center;
}
.contact strong { color: #6b645c; }
.contact a { color: #2563eb; text-decoration: none; }
.contact a:hover { text-decoration: underline; }

/* ── Dashboard ── */
.header-outer {
  position: sticky; top: 0; z-index: 100;
  display: flex; justify-content: center;
  padding: 1rem 1.5rem;
  background: linear-gradient(to bottom, #fdfcf8 55%, rgba(253,252,248,0));
  pointer-events: none;
}
header {
  display: inline-flex; align-items: center; gap: 1.25rem;
  background: rgba(253,252,248,.9);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(17,15,10,.09);
  border-radius: 9999px;
  padding: .425rem .625rem .425rem 1rem;
  box-shadow: 0 1px 20px rgba(17,15,10,.07);
  pointer-events: auto;
}
header img { height: 34px; width: auto; display: block; }
.logout-link {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .8rem; font-weight: 600; color: #6b645c; text-decoration: none;
  padding: .3rem .75rem; border-radius: 9999px;
  background: rgba(17,15,10,.055);
  transition: background 200ms cubic-bezier(0.16, 1, 0.3, 1),
              color 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.logout-link:hover { background: rgba(17,15,10,.1); color: #111; }
.logout-link .btn-arrow { font-size: .75rem; opacity: .6; }

main { max-width: 680px; margin: 2rem auto 4rem; padding: 0 1.5rem; }

.page-header { margin-bottom: 1.5rem; }
.page-header h1 {
  margin: 0 0 .875rem; font-size: 1.5rem; font-weight: 800;
  letter-spacing: -.04em; line-height: 1.15;
}
.info-card {
  background: #f8f7f2; border: 1px solid #ece9e1;
  border-left: 2.5px solid #c3bfb4;
  border-radius: .5rem;
  padding: .875rem 1.1rem; font-size: .845rem; color: #5a5248; line-height: 1.62;
}

/* Controls */
.controls { display: flex; align-items: center; gap: .625rem; margin-bottom: .75rem; flex-wrap: wrap; }
.inline-error {
  display: none; margin-bottom: 1rem; padding: .6rem .9rem;
  background: #fff1f2; border: 1px solid #fecdd3; border-radius: .5rem;
  font-size: .845rem; color: #9f1239;
}

/* Action buttons (pill) */
button {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem 1rem; border: none; border-radius: 9999px;
  font-size: .875rem; font-weight: 700; font-family: inherit; cursor: pointer;
  letter-spacing: -.01em;
  transition: background 200ms cubic-bezier(0.16, 1, 0.3, 1),
              color 200ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 120ms cubic-bezier(0.32, 0.72, 0, 1);
}
button:active:not(:disabled) { transform: scale(0.97); }

/* Trailing icon circle inside button */
.btn-trail {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(255,255,255,.18);
  font-size: .7rem; line-height: 1; flex-shrink: 0;
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

#start-btn { background: #2563eb; color: white; padding: .5rem 1rem .5rem .875rem; }
#start-btn:hover:not(:disabled) { background: #1d4ed8; }
#start-btn:hover:not(:disabled) .btn-trail { transform: translate(1px, -1px); }
#start-btn:disabled { background: #93c5fd; cursor: not-allowed; }

#download-btn {
  background: #edeae3; color: #aca49a; cursor: not-allowed;
  padding: .5rem 1rem .5rem .875rem;
}
#download-btn .btn-trail { background: rgba(17,15,10,.07); }
#download-btn.ready { background: #111; color: white; cursor: pointer; }
#download-btn.ready .btn-trail { background: rgba(255,255,255,.15); }
#download-btn.ready:hover { background: #1c1c1c; }
#download-btn.ready:hover .btn-trail { transform: translateY(2px); }

/* Dashboard card shell */
.dash-card-shell {
  background: rgba(17,15,10,.028);
  border: 1px solid rgba(17,15,10,.08);
  border-radius: 1.75rem;
  padding: .375rem;
}
.dash-card-shell .card { padding: 1.75rem; }

.card-title {
  margin: 0 0 1.25rem; font-size: .68rem; font-weight: 700;
  color: #aca49a; text-transform: uppercase; letter-spacing: .12em;
}

/* Steps */
.step { display: flex; align-items: flex-start; gap: 1rem; padding: .875rem 0; }
.step + .step { border-top: 1px solid #f5f3ee; }

.step-num {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .775rem; font-weight: 700; position: relative; margin-top: 1px;
}
.step-num.pending { background: #f5f3ee; color: #aca49a; }
.step-num.running { background: #eff6ff; color: #2563eb; }
.step-num.done    { background: #d1fae5; color: #059669; }
.step-num.error   { background: #fee2e2; color: #dc2626; }
.step-num.running::before {
  content: ''; position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid #2563eb; border-top-color: transparent;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.step-body { flex: 1; min-width: 0; }
.step-title { font-size: .9375rem; font-weight: 500; line-height: 1.4; }
.step-title.pending { color: #aca49a; }
.step-title.running { color: #1e40af; font-weight: 600; }
.step-title.done    { color: #111; }
.step-title.error   { color: #dc2626; }
.step-sub { font-size: .8rem; color: #6b645c; margin-top: .15rem; min-height: 1em; }

/* Indeterminate bar */
.indet-wrap { margin-top: .6rem; display: none; }
.indet-wrap.visible { display: block; }
.indet-track { height: 3px; background: #ece9e1; border-radius: 9999px; overflow: hidden; }
.indet-fill {
  height: 100%; width: 35%; background: #2563eb; border-radius: 9999px;
  animation: indet 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes indet {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(390%); }
}

/* Layer progress bar */
/* Hidden by default; dashboard.js sets display:flex via CSSOM when step 2 starts. */
.progress-wrap { display: none; align-items: center; gap: .6rem; margin-top: .65rem; margin-bottom: .5rem; }
.progress-track { flex: 1; height: 4px; background: #ece9e1; border-radius: 9999px; overflow: hidden; }
.progress-fill {
  height: 100%; width: 0; background: #2563eb; border-radius: 9999px;
  transition: width 350ms cubic-bezier(0.16, 1, 0.3, 1);
}
.progress-fill.complete { background: #10b981; }
.progress-count {
  font-size: .775rem; color: #6b645c; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Layer rows */
.layers { display: flex; flex-direction: column; }
.layer { display: flex; align-items: center; gap: .5rem; padding: .3rem 0; border-top: 1px solid #f8f7f2; }
.layer-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; transition: background 250ms; }
.layer-dot.pending { background: #dedad3; }
.layer-dot.running { background: #2563eb; animation: pulse .9s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.layer-dot.done    { background: #10b981; }
.layer-dot.error   { background: #ef4444; }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.2; } }

.layer-name { font-size: .875rem; }
.layer-name.pending { color: #aca49a; }
.layer-name.running { color: #1d4ed8; font-weight: 600; }
.layer-name.done    { color: #3a3530; }
.layer-name.error   { color: #dc2626; }
.layer-file { margin-left: auto; font-size: .75rem; color: #cdc9c1; font-family: ui-monospace, monospace; white-space: nowrap; }
.layer-file.active { color: #93c5fd; }

/* Error banner */
.error-banner {
  display: none; margin-top: 1.25rem; padding: .75rem 1rem;
  background: #fff1f2; border: 1px solid #fecdd3; border-radius: .625rem;
  font-size: .845rem; color: #9f1239; line-height: 1.5;
}

/* Mobile */
@media (max-width: 480px) {
  .app-title { font-size: 1.5rem; }
  .card { padding: 1.75rem 1.5rem; }
  main { padding: 0 1rem; margin-top: 1.5rem; }
  .header-outer { padding: .75rem 1rem; }
}