/* SEW-EURODRIVE brand palette — corporate red + neutral grays.
   Swap these values if the brand team specifies exact guideline hex codes. */
:root {
  --sew-red: #e2001a;
  --sew-red-dark: #b00015;
  --gray-900: #1d1d1b;
  --gray-700: #3f3f3d;
  --gray-500: #6b6b6b;
  --gray-300: #c9c9c7;
  --gray-200: #e2e2e0;
  --gray-100: #f2f2f0;
  --surface: #ffffff;
  --ok: #1a7a1a;
  --err: var(--sew-red-dark);
  --radius: 6px;
  --shadow: 0 1px 3px rgba(0, 0, 0, .14);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  background: var(--gray-100);
  color: var(--gray-900);
  line-height: 1.5;
}

header {
  background: var(--gray-900);
  color: #fff;
  padding: 0 1.5rem;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 1rem;
  box-shadow: var(--shadow);
  border-bottom: 3px solid var(--sew-red);
}
.brand { display: flex; align-items: baseline; gap: 0.6rem; }
.brand .logo { font-size: 1.15rem; font-weight: 800; letter-spacing: 0.5px; color: var(--sew-red); }
.brand .sep { width: 1px; height: 20px; background: rgba(255, 255, 255, .3); align-self: center; }
.brand .product { font-size: 1.05rem; font-weight: 600; opacity: 0.92; }

#auth-status { margin-left: auto; font-size: 0.85rem; opacity: 0.9; }
#user-info {
  margin-left: auto; font-size: 0.85rem; opacity: 0.95;
  display: flex; align-items: center; gap: 0.4rem;
}
#user-info::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: #4ade80; display: inline-block;
}

#sign-in-btn {
  margin-left: auto; padding: 0.45rem 1.1rem; background: var(--sew-red);
  color: #fff; border: none; border-radius: var(--radius);
  cursor: pointer; font-weight: 600; font-size: 0.9rem;
}
#sign-in-btn:hover { background: var(--sew-red-dark); }

main {
  max-width: 760px; margin: 2rem auto; padding: 0 1rem;
  display: flex; flex-direction: column; gap: 1.25rem;
}
.intro { color: var(--gray-500); font-size: 0.9rem; }

section {
  background: var(--surface); border-radius: var(--radius);
  padding: 1.5rem; box-shadow: var(--shadow);
  border-top: 3px solid var(--sew-red);
}
section h2 {
  font-size: 1rem; font-weight: 700; margin-bottom: 1rem;
  color: var(--gray-900);
}

label { display: block; font-size: 0.85rem; margin-bottom: 0.3rem; color: var(--gray-500); font-weight: 600; }
input[type=file], input[type=text] {
  width: 100%; padding: 0.55rem 0.65rem; border: 1px solid var(--gray-300);
  border-radius: var(--radius); font-size: 0.9rem; background: #fff; color: var(--gray-900);
}
input[type=text]:focus, input[type=file]:focus {
  outline: none; border-color: var(--sew-red);
  box-shadow: 0 0 0 3px rgba(226, 0, 26, .15);
}

.checkbox-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.85rem; font-size: 0.9rem; }
.checkbox-row input { accent-color: var(--sew-red); width: 16px; height: 16px; }

button.primary {
  margin-top: 1rem; padding: 0.6rem 1.35rem; background: var(--sew-red);
  color: #fff; border: none; border-radius: var(--radius); cursor: pointer;
  font-size: 0.9rem; font-weight: 600; transition: background .15s ease;
}
button.primary:hover { background: var(--sew-red-dark); }
button.primary:disabled { opacity: 0.5; cursor: not-allowed; }

#downloads { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
#downloads button.primary { margin-top: 0; background: #fff; color: var(--sew-red); border: 1px solid var(--sew-red); }
#downloads button.primary:hover { background: var(--sew-red); color: #fff; }

.status { margin-top: 0.75rem; font-size: 0.85rem; min-height: 1.2em; }
.status.ok  { color: var(--ok); }
.status.err { color: var(--err); }
.status.info{ color: var(--gray-500); }

#job-id-out {
  font-family: "Cascadia Code", Consolas, monospace; font-size: 0.85rem;
  background: var(--gray-100); padding: 0.35rem 0.65rem; border-radius: var(--radius);
  display: inline-block; margin-top: 0.5rem; color: var(--gray-900);
}

footer {
  max-width: 760px; margin: 1rem auto 2rem; padding: 0 1rem;
  font-size: 0.75rem; color: var(--gray-500);
}

#auth-gate { display: none; }