:root {
  color-scheme: light;
  --navy: #12324a;
  --ink: #1f2a32;
  --muted: #5d6b76;
  --cream: #f7f1e4;
  --paper: #fffdf8;
  --line: #d9cfb8;
  --gold: #ba8a2a;
  --gold-dark: #836016;
  --green: #237653;
  --red: #a13b30;
  --blue-soft: #e8f0f5;
  --shadow: 0 18px 50px rgba(18, 50, 74, 0.13);
  font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: linear-gradient(180deg, var(--cream), #fdfaf1 42%, #eef3f5);
}

button,
.button,
select,
textarea,
input {
  font: inherit;
}

button,
.button {
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 0.62rem 0.9rem;
  color: white;
  background: var(--navy);
  text-decoration: none;
  cursor: pointer;
}

button:hover,
.button:hover {
  filter: brightness(1.05);
}

button.secondary {
  color: var(--navy);
  background: var(--blue-soft);
  border-color: #b8cad6;
}

button.positive {
  background: var(--green);
}

button.danger,
.danger {
  background: var(--red);
}

.ghost {
  color: var(--navy);
  background: transparent;
  border-color: var(--line);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.4rem 2rem;
  color: white;
  background: var(--navy);
  border-bottom: 5px solid var(--gold);
}

.login-panel {
  display: grid;
  place-items: center;
  min-height: calc(100vh - 112px);
  padding: 2rem;
}

.login-card {
  width: min(440px, 100%);
  padding: 1.4rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.login-card h2 {
  margin: 0 0 1rem;
}

.global-feedback {
  max-width: 1120px;
  margin: 1rem auto 0;
}

.eyebrow {
  margin: 0 0 0.2rem;
  color: #f2dba7;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

h1,
h2,
h3 {
  margin: 0;
}

h1 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  letter-spacing: 0;
}

.role-panel {
  display: grid;
  gap: 0.35rem;
  min-width: 280px;
  padding: 0.8rem;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
}

.role-panel select {
  width: 100%;
  border: 1px solid #d9cfb8;
  border-radius: 6px;
  padding: 0.5rem;
}

.role-panel span,
.notice p,
.meta,
.hint {
  color: var(--muted);
  font-size: 0.9rem;
}

.role-panel span {
  color: #f8e8c2;
}

.shell {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 1.2rem;
  max-width: 1280px;
  margin: 1.3rem auto;
  padding: 0 1rem 2rem;
}

.sidebar,
.workspace,
.panel {
  background: rgba(255, 253, 248, 0.94);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.sidebar {
  align-self: start;
  padding: 1rem;
}

.notice {
  padding: 0.9rem;
  background: #fff6dd;
  border-left: 4px solid var(--gold);
  border-radius: 6px;
}

.section-title,
.detail-header,
.action-row,
.review-grid,
.utility-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.section-title {
  margin-top: 1.1rem;
  margin-bottom: 0.55rem;
}

.section-title h2 {
  font-size: 1rem;
}

.training-controls,
.assignment-list,
.overview-rows {
  display: grid;
  gap: 0.65rem;
}

.training-controls {
  padding: 0.75rem;
  background: #eef7f2;
  border: 1px solid #b8d8c9;
  border-radius: 6px;
}

.training-controls label,
.assignment-row {
  display: grid;
  gap: 0.35rem;
}

.assignment-row {
  grid-template-columns: minmax(140px, 1fr) 160px 140px minmax(160px, 1fr) auto;
  align-items: center;
  padding: 0.7rem;
  background: white;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.training-banner {
  padding: 0.9rem 1rem;
  margin-bottom: 0.9rem;
  color: #16452f;
  background: #e7f5ee;
  border: 1px solid #a9d0bd;
  border-left: 4px solid var(--green);
  border-radius: 8px;
}

.training-banner p {
  margin: 0.25rem 0 0;
}

.overview-rows div {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 180px minmax(240px, 1.4fr);
  gap: 0.75rem;
  align-items: start;
  padding: 0.75rem;
  background: white;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.overview-rows p {
  margin: 0;
  color: var(--muted);
}

.task-list,
.opportunity-list {
  display: grid;
  gap: 0.55rem;
}

.list-button {
  width: 100%;
  padding: 0.75rem;
  color: var(--ink);
  text-align: left;
  background: white;
  border: 1px solid var(--line);
}

.list-button.active {
  border-color: var(--gold);
  box-shadow: inset 4px 0 0 var(--gold);
}

.workspace {
  min-height: 720px;
  padding: 1rem;
}

.empty {
  display: grid;
  min-height: 400px;
  place-items: center;
  color: var(--muted);
}

.feedback {
  margin-bottom: 1rem;
  padding: 0.8rem;
  border-radius: 6px;
  background: #eaf6ef;
  border: 1px solid #a8d5bb;
}

.feedback.error {
  background: #fff0ed;
  border-color: #d9a39c;
}

.detail {
  display: grid;
  gap: 1rem;
}

.step-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}

.step-strip.six {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.step-strip span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 54px;
  padding: 0.75rem;
  color: var(--muted);
  background: #f5f1e8;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-weight: 650;
}

.step-strip b {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  flex: 0 0 auto;
  color: white;
  background: #8997a0;
  border-radius: 999px;
}

.step-strip .active {
  color: var(--navy);
  background: #fff6dd;
  border-color: var(--gold);
}

.step-strip .active b,
.step-strip .done b {
  background: var(--gold-dark);
}

.step-strip .done {
  color: var(--ink);
  background: #eef7f2;
  border-color: #acd2bd;
}

.next-action {
  padding: 1rem;
  color: #14324a;
  background: #e9f2f6;
  border: 1px solid #adc7d6;
  border-radius: 8px;
}

.next-action p {
  margin: 0.25rem 0 0;
}

.detail-header {
  align-items: start;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
}

.status {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.3rem 0.65rem;
  color: white;
  background: var(--gold-dark);
  font-size: 0.86rem;
  white-space: nowrap;
}

.panel {
  padding: 1rem;
  box-shadow: none;
}

.subsection {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.subsection h4 {
  margin: 0 0 0.75rem;
}

.line-item {
  display: grid;
  grid-template-columns: 150px minmax(170px, 1.2fr) 90px 90px minmax(220px, 1fr);
  gap: 0.6rem;
  align-items: start;
  margin-bottom: 0.65rem;
  padding: 0.7rem;
  background: white;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.line-item.quote {
  grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) 110px minmax(130px, 1fr);
}

.line-item.quote textarea,
.line-item.quote input:last-child {
  grid-column: span 2;
}

.computed-price {
  margin-top: 0.8rem;
  padding: 0.75rem;
  background: #eef7f2;
  border: 1px solid #acd2bd;
  border-radius: 6px;
}

.cost-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  margin-top: 1rem;
}

.cost-summary div {
  display: grid;
  gap: 0.15rem;
  padding: 0.75rem;
  background: #f8fbfc;
  border: 1px solid #cfdae0;
  border-radius: 6px;
}

.cost-summary span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.summary-panel dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0.8rem 0 0;
}

.summary-panel div {
  padding: 0.75rem;
  background: white;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.summary-panel dt {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.summary-panel dd {
  margin: 0.25rem 0 0;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.field {
  display: grid;
  gap: 0.3rem;
}

.field span {
  color: #33424c;
  font-weight: 650;
}

.field.full {
  grid-column: 1 / -1;
}

textarea,
input,
select {
  width: 100%;
  color: var(--ink);
  background: white;
  border: 1px solid #cdbf9f;
  border-radius: 6px;
  padding: 0.65rem;
}

textarea:disabled,
input:disabled {
  color: #4d5962;
  background: #f3f0e9;
}

.review-grid {
  align-items: stretch;
}

.review-card {
  flex: 1;
  min-width: 0;
  padding: 0.85rem;
  background: #f8fbfc;
  border: 1px solid #cfdae0;
  border-radius: 8px;
}

.review-card.positive {
  border-color: #95cdb0;
  background: #eef8f2;
}

.review-card.negative {
  border-color: #dbaba5;
  background: #fff4f1;
}

.history {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.history-panel summary {
  cursor: pointer;
  font-weight: 750;
}

.history-panel[open] summary {
  margin-bottom: 0.75rem;
}

.history li {
  padding: 0.7rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: white;
}

@media (max-width: 900px) {
  .topbar,
  .shell {
    grid-template-columns: 1fr;
  }

  .topbar,
  .section-title,
  .detail-header,
  .action-row,
  .review-grid,
  .utility-row {
    align-items: stretch;
    flex-direction: column;
  }

  .shell {
    display: block;
  }

  .workspace {
    margin-top: 1rem;
  }

  .grid {
    grid-template-columns: 1fr;
  }

  .step-strip,
  .step-strip.six,
  .summary-panel dl,
  .line-item,
  .line-item.quote,
  .assignment-row,
  .overview-rows div,
  .cost-summary {
    grid-template-columns: 1fr;
  }

  .line-item.quote textarea,
  .line-item.quote input:last-child {
    grid-column: auto;
  }
}

[hidden] { display: none !important; }

.feedback { position: fixed; top: 16px; right: 16px; width: min(440px, calc(100vw - 32px)); z-index: 1000; box-shadow: 0 6px 22px #0003; }
.field-error { color: #9b3028; font-weight: 600; }
[aria-invalid='true'] { border: 2px solid #9b3028; }

/* Allpro visual system: shared across sign-in and the workflow workspace. */
:root {
  --navy: #172e48; --ink: #203249; --muted: #64748b;
  --paper: #ffffff; --line: #dfe6ee; --gold: #bc9451;
  --shadow: 0 8px 28px rgba(24, 43, 66, .05);
}
body { background: #f3f6fa; font-size: 14px; line-height: 1.55; }
button, .button { font-weight: 600; border-radius: 8px; min-height: 40px; transition: background .15s, box-shadow .15s; }
button:hover { box-shadow: 0 3px 10px #172e481a; }
:is(button,input,textarea,select,summary):focus-visible { outline: 3px solid #88abc9; outline-offset: 3px; }
input, textarea, select { border-color: #ccd7e3; min-height: 43px; border-radius: 8px; }
input:disabled, textarea:disabled, select:disabled { color: #536277; background: #f5f7fa; opacity: 1; }
.topbar { background: white; color: var(--ink); border-bottom: 1px solid var(--line); padding: 20px 36px; gap: 24px; }
.brand-lockup { display: flex; align-items: center; gap: 26px; min-width: 0; }
.brand-logo { display: block; width: 192px; height: auto; }
.brand-logo img { display: block; width: 100%; height: auto; }
.brand-lockup > div:last-child { border-left: 1px solid var(--line); padding-left: 26px; }
.topbar h1 { font-size: 23px; letter-spacing: -.7px; font-weight: 650; }
.eyebrow { color: #7a6745; font-size: 10px; font-weight: 700; letter-spacing: .14em; margin-bottom: 7px; }
.role-panel { min-width: 0; padding: 0; border: 0; background: transparent; text-align: right; gap: 2px; font-size: 13px; }
.role-panel span { color: var(--muted); font-size: 12px; }
.role-panel button { justify-self: end; min-height: 30px; padding: 3px 14px; margin-top: 5px; font-size: 12px; }
body:has(#loginPanel:not([hidden])) #accountPanel { display: none; }
.login-panel { display: grid; grid-template-columns: 1.1fr 1fr; align-items: stretch; padding: 0; margin: 64px auto; width: min(1000px, calc(100% - 64px)); min-height: 500px; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: white; box-shadow: 0 20px 65px #17324b0d; }
.login-hero { position: relative; padding: 48px; overflow: hidden; background: var(--navy); color: white; }
.login-hero .eyebrow { color: #ddbd87; }
.login-hero h2 { font-size: 32px; font-weight: 600; line-height: 1.2; letter-spacing: -1px; max-width: 360px; margin: 22px 0 18px; }
.login-hero > p:not(.eyebrow) { color: #b8c8da; font-size: 14px; max-width: 345px; }
.blueprint-card { position: relative; height: 125px; margin-top: 34px; border-bottom: 1px solid #71849a66; background-image: linear-gradient(#ffffff06 1px, transparent 1px), linear-gradient(90deg,#ffffff06 1px,transparent 1px); background-size: 22px 22px; }
.blueprint-card span { position: absolute; bottom: 0; border: 1px solid #8197b280; width: 85px; height: 85px; left: 24px; background: #ffffff03; }
.blueprint-card span:nth-child(2) { left: 108px; width: 106px; height: 123px; border-top: 3px solid var(--gold); }
.blueprint-card span:nth-child(3) { left: 213px; width: 83px; height: 60px; }
.blueprint-card i { position: absolute; bottom: 15px; left: 126px; width: 70px; height: 1px; background: #8197b280; box-shadow: 0 -22px #8197b280, 0 -44px #8197b280, 0 -66px #8197b280; }
.login-card { width: 100%; padding: 56px 46px; border: 0; border-radius: 0; background: white; box-shadow: none; align-self: center; }
.login-card h2 { margin: 0 0 10px; font-size: 28px; letter-spacing: -.7px; }
.login-copy { margin: 0 0 28px; color: var(--muted); }
.login-card .field { margin-bottom: 18px; gap: 7px; }
.login-card .field span { font-size: 12px; }
.login-card input { min-height: 46px; }
.login-card button { width: 100%; margin-top: 6px; min-height: 47px; background: var(--navy); }
.login-card .hint { font-size: 12px; border-top: 1px solid var(--line); padding-top: 22px; margin-top: 25px; }
.shell { max-width: 1600px; grid-template-columns: 290px minmax(0,1fr); padding: 0 28px 40px; margin-top: 28px; gap: 24px; }
.sidebar, .workspace { border-radius: 12px; background: white; box-shadow: var(--shadow); min-width: 0; }
.sidebar { padding: 20px; }
.workspace { padding: 28px; }
.notice { background: #faf6ed; border-left-width: 3px; padding: 14px; }
.notice strong { font-size: 12px; }
.notice p { font-size: 12px; margin-bottom: 0; line-height: 1.6; }
.section-title { margin-top: 24px; margin-bottom: 12px; }
.section-title button { font-size: 12px; min-height: 32px; padding: 4px 12px; }
.training-controls { background: #f5f8fc; border-color: var(--line); border-radius: 9px; padding: 13px; }
.mode-helper { color: var(--muted); font-size: 11px; margin: 0; line-height: 1.6; }
.training-controls label > span { font-size: 12px; font-weight: 600; }
.list-button { border-radius: 9px; padding: 14px; line-height: 1.45; }
.list-button.active { border-color: #acc0d5; background: #f1f6fc; box-shadow: inset 3px 0 var(--navy); }
.list-button .meta { font-size: 12px; }
.detail-header h2 { font-size: 24px; line-height: 1.3; letter-spacing: -.6px; }
.status { white-space: normal; text-align: center; font-size: 11px; font-weight: 600; padding: 5px 12px; }
.detail { gap: 20px; }
.panel { border-radius: 10px; padding: 20px; }
.panel h3 { font-size: 16px; }
.hint, .meta { font-size: 13px; }
.step-strip { gap: 6px; }
.step-strip span { padding: 10px; font-size: 11px; gap: 7px; border-radius: 8px; background: #f6f8fb; }
.step-strip b { width: 23px; height: 23px; }
.step-strip .done { background: #f0f7f4; border-color: #d1e4d9; }
.step-strip .done b { background: #3b7660; }
.next-action { background: #eff5fb; border-color: #d5e2ef; padding: 16px 20px; }
.training-banner { font-size: 12px; padding: 12px 16px; background: #f0f7f4; border-color: #cfe1d6; border-left-color: #528770; }
.overview-rows div { grid-template-columns: minmax(0,1fr) 110px minmax(0,1.3fr); padding: 16px; font-size: 13px; }
.assignment-row { grid-template-columns: minmax(0,1fr) 120px 110px minmax(130px,1fr) auto; font-size: 12px; }
.line-item { grid-template-columns: 110px minmax(120px,1.2fr) 70px 80px minmax(140px,1fr); }
.line-item > *, .assignment-row > * { min-width: 0; }
.summary-panel dd { overflow-wrap: anywhere; }
@media (max-width: 1250px) {
 .assignment-row { grid-template-columns: 1fr 1fr; }
 .line-item, .line-item.quote { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .step-strip.six { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 900px) {
 .topbar { padding: 18px 22px; }
 .brand-logo { width: 145px; }
 .brand-lockup { gap: 16px; }
 .brand-lockup > div:last-child { padding-left: 16px; }
 .topbar h1 { font-size: 20px; }
 .login-panel { margin: 32px auto; width: calc(100% - 40px); }
 .login-hero { padding: 30px; }
 .login-hero h2 { font-size: 26px; }
 .login-card { padding: 36px 28px; }
 .shell { grid-template-columns: 245px minmax(0,1fr); padding: 0 16px 32px; gap: 16px; }
 .workspace { padding: 18px; }
 .overview-rows div { grid-template-columns: 1fr; gap: 6px; }
 .detail-header { flex-wrap: wrap; }
}
@media (max-width: 680px) {
 .topbar { align-items: flex-start; flex-wrap: wrap; padding: 17px 20px; gap: 16px; }
 .brand-logo { width: 124px; }
 .topbar .eyebrow { font-size: 8px; letter-spacing: .06em; }
 .topbar h1 { font-size: 18px; }
 .role-panel { text-align: left; }
 .role-panel button { justify-self: start; }
 .login-panel { grid-template-columns: 1fr; margin: 22px auto; width: calc(100% - 32px); min-height: 0; }
 .login-hero { padding: 26px; }
 .login-hero h2 { font-size: 24px; margin: 14px 0; }
 .login-hero > p:not(.eyebrow), .blueprint-card { display: none; }
 .login-card { padding: 30px 26px; }
 .shell { grid-template-columns: 1fr; margin-top: 18px; }
 .grid, .cost-summary, .summary-panel dl, .line-item, .line-item.quote, .assignment-row { grid-template-columns: 1fr; }
 .line-item.quote textarea, .line-item.quote input:last-child { grid-column: auto; }
 .review-grid { flex-direction: column; }
 .panel { padding: 16px; }
 .step-strip.six { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
.login-panel { justify-items: stretch; }
.drive-panel .section-title { margin-top: 0; }
.drive-badge { padding: 3px 9px; border-radius: 20px; background: #eef3fa; color: #47617d; font-size: 11px; white-space: nowrap; }
.drive-folder-form { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 12px; margin-top: 16px; }
.drive-folder-links { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; }
.drive-folder-links a { padding: 8px 12px; border: 1px solid var(--line); border-radius: 7px; text-decoration: none; color: var(--navy); background: #f8fafc; font-size: 12px; }
.drive-limit { border-top: 1px solid var(--line); padding-top: 12px; margin-bottom: 0; font-size: 12px; }
@media(max-width:680px) { .drive-folder-form { grid-template-columns: 1fr; } }
.drive-areas { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; margin-top:16px; }
.drive-area { border:1px solid #d8e2ea; background:#fff; border-radius:12px; padding:18px; min-width:0; }
.drive-area h4 { margin:0; }
.drive-file-list { padding-left:18px; overflow-wrap:anywhere; }
.drive-file-list li { margin:12px 0; }
.drive-file-list small { display:block; color:#587084; margin-top:5px; font-size:11px; }
.drive-upload { border-top:1px solid #e4ebef; padding-top:12px; margin-top:14px; }
.drive-upload input { width:100%; box-sizing:border-box; }
[data-drive-message]:not(:empty) { padding:12px; background:#edf4f8; border-left:3px solid #315d79; border-radius:4px; }