:root{
  /* core palette (enterprise B2B trust palette, blended with brand amber + blueprint grid) */
  --color-primary:      #0F172A;
  --color-on-primary:   #FFFFFF;
  --color-secondary:    #334155;
  --color-accent:       #0369A1;
  --color-background:   #F8FAFC;
  --color-surface:      #FFFFFF;
  --color-foreground:   #0F172A;
  --color-muted:        #64748B;
  --color-muted-bg:     #E8ECF1;
  --color-border:       #E2E8F0;
  --color-destructive:  #DC2626;
  --color-ring:         #0369A1;

  --amber:      #E8A13A;
  --amber-dark: #B9791A;
  --amber-bg:   #FFF7EA;

  --blue-line-soft: #E4EEF6;
  --blue-line:      #C6DCEC;

  --radius-sm: 4px;
  --radius-md: 8px;

  --font-display: 'Plus Jakarta Sans', sans-serif;
  --font-body:    'Plus Jakarta Sans', sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;

  --ease: cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
  color:var(--color-foreground);
  background:var(--color-background);
  position:relative;
  min-height:100vh;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

:focus-visible{
  outline:2px solid var(--color-ring);
  outline-offset:2px;
}

/* blueprint grid background, kept subtle under the enterprise palette */
.blueprint-bg{
  position:fixed; inset:0; z-index:-1;
  background-color:var(--color-background);
  background-image:
    linear-gradient(var(--blue-line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--blue-line-soft) 1px, transparent 1px),
    linear-gradient(var(--blue-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--blue-line) 1px, transparent 1px);
  background-size: 20px 20px, 20px 20px, 100px 100px, 100px 100px;
  opacity:0.5;
}

/* ---------- header ---------- */
.site-header{
  background:var(--color-surface);
  border-bottom:2px solid var(--color-primary);
}
.header-inner{
  max-width:980px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 24px;
}
.logo{height:44px; display:block;}
.header-tag{display:flex; align-items:center; gap:10px;}
.eyebrow{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.12em;
  color:var(--color-accent); text-transform:uppercase;
}
.version-chip{
  font-family:var(--font-mono); font-size:11px;
  border:1px solid var(--color-accent); color:var(--color-accent);
  padding:2px 7px; border-radius:2px;
}

/* ---------- step progress nav ---------- */
.step-nav{
  background:var(--color-surface);
  border-bottom:1px solid var(--color-border);
}
.step-nav ol{
  max-width:980px; margin:0 auto; padding:12px 24px;
  display:flex; align-items:center; gap:10px; list-style:none;
}
.step-item{
  display:flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:600; color:var(--color-muted);
}
.step-item:not(:last-child)::after{
  content:""; width:28px; height:1px; background:var(--color-border); margin-left:10px;
}
.step-num{
  width:20px; height:20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:11px;
  background:var(--color-muted-bg); color:var(--color-muted);
  transition:background .2s var(--ease), color .2s var(--ease);
}
.step-item.is-active{color:var(--color-primary);}
.step-item.is-active .step-num{background:var(--color-accent); color:#fff;}
.step-item.is-done .step-num{background:var(--amber); color:#fff;}
.step-item.is-done{color:var(--color-primary);}
@media (max-width:640px){ .step-label{display:none;} }

/* ---------- layout ---------- */
.wrap{max-width:980px; margin:0 auto; padding:32px 24px 80px;}

.hero{padding: 8px 4px 36px; max-width:680px;}
.hero h1{
  font-family:var(--font-display); font-weight:800; font-size:clamp(28px,4vw,40px);
  line-height:1.15; margin:0 0 14px; color:var(--color-primary); letter-spacing:-0.02em;
}
.hero-sub{font-size:16px; line-height:1.6; color:var(--color-muted); margin:0;}

/* ---------- panels ---------- */
.panel{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  margin-bottom:28px;
  position:relative;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
  transition:opacity .25s var(--ease);
}
.panel-head{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  padding:18px 22px 14px;
  border-bottom:1px solid var(--color-border);
}
.panel-index{
  font-family:var(--font-mono); font-size:12px; color:var(--amber-dark);
  border:1px solid var(--amber); border-radius:2px; padding:1px 6px;
}
.panel-head h2{
  font-family:var(--font-display); font-size:20px; font-weight:700; margin:0;
  color:var(--color-primary);
}
.panel-sub{font-family:var(--font-mono); font-size:12px; color:var(--color-muted);}
.panel-locked{opacity:.55;}
.panel-locked.unlocked{opacity:1;}

.panel-body{padding:20px 22px;}
.placeholder-text{color:var(--color-muted); font-size:14px; margin:0;}

/* ---------- form ---------- */
.job-form{padding:20px 22px 24px;}
fieldset{
  border:1px dashed var(--color-border); border-radius:var(--radius-sm);
  padding:16px 16px 8px; margin:0 0 18px;
}
legend{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--color-accent); padding:0 6px;
}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:14px 16px;}
.span-2{grid-column:1 / -1;}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px;}
.grid-2 .field{margin-bottom:0;}
label{
  font-size:13px; color:var(--color-secondary); font-weight:600;
}
.req{color:var(--color-destructive);}
input, select, textarea{
  font-family:var(--font-body); font-size:15px; color:var(--color-foreground);
  border:1px solid var(--color-border); border-radius:var(--radius-sm);
  padding:11px 12px; background:#fff; min-height:44px;
}
textarea{min-height:auto;}
input:focus, select:focus, textarea:focus{
  outline:2px solid var(--color-ring); outline-offset:1px; border-color:var(--color-accent);
}
textarea{resize:vertical; font-family:var(--font-body);}

.job-form > .upload-field[aria-hidden]{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.upload-field{cursor:pointer; display:block;}
.upload-field input[type=file]{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.upload-field input[type=file]:focus-visible + .upload-box{
  outline:2px solid var(--color-ring); outline-offset:2px;
}
.upload-box{
  display:flex; align-items:center; gap:10px;
  border:2px dashed var(--blue-line); border-radius:var(--radius-md);
  padding:18px; background:var(--blue-line-soft);
  font-size:13.5px; color:var(--color-accent); font-weight:600;
  min-height:44px; transition:border-color .2s var(--ease), background .2s var(--ease);
}
.upload-icon{flex-shrink:0;}
.upload-box.has-file{border-color:var(--amber); background:var(--amber-bg); color:var(--amber-dark);}

.form-status{font-size:12.5px; color:var(--color-muted); min-height:16px; margin:8px 2px 0;}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--font-body); font-weight:700; font-size:14.5px;
  border-radius:var(--radius-sm); padding:12px 18px; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px; min-height:44px;
  border:1px solid transparent; transition:transform .05s var(--ease), opacity .15s var(--ease), background .15s var(--ease);
}
.btn:active{transform:translateY(1px);}
.btn:disabled{opacity:.45; cursor:not-allowed;}
.btn-primary{
  background:var(--color-primary); color:#fff; width:100%; justify-content:center; margin-top:6px;
}
.btn-primary:hover:not(:disabled){background:#1E293B;}
.btn-outline{
  background:#fff; color:var(--amber-dark); border-color:var(--amber);
}
.btn-outline:hover:not(:disabled){background:var(--amber-bg);}
.action-row{padding:0 22px 22px;}

/* ---------- recommendation output ---------- */
.reco-group{margin-bottom:16px;}
.reco-group h3{
  font-family:var(--font-mono); font-size:12px; text-transform:uppercase;
  letter-spacing:.06em; color:var(--color-accent); margin:0 0 8px;
}
.reco-list{list-style:none; margin:0; padding:0; display:grid; gap:8px;}
.reco-item{
  display:flex; gap:10px; align-items:flex-start;
  background:var(--color-background); border:1px solid var(--color-border); border-radius:var(--radius-sm);
  padding:10px 12px; font-size:13.5px;
}
.reco-item .tag{
  font-family:var(--font-mono); font-size:10.5px; color:#fff; background:var(--color-primary);
  border-radius:2px; padding:2px 6px; white-space:nowrap; margin-top:1px;
}
.reco-note{
  font-size:12.5px; color:var(--color-secondary); border-left:3px solid var(--amber);
  padding:8px 12px; background:var(--amber-bg); border-radius:2px; margin-top:14px;
}

/* ---------- code block ---------- */
.controller-select-field{max-width:280px; margin-bottom:14px;}
.code-block{
  background:#0B1622; color:#C9DCEA; font-family:var(--font-mono); font-size:12.5px;
  line-height:1.6; padding:16px; border-radius:var(--radius-sm); overflow-x:auto;
  white-space:pre; max-height:420px;
}

/* ---------- toast ---------- */
.toast{
  position:fixed; bottom:22px; left:50%; transform:translate(-50%, 20px);
  background:var(--color-primary); color:#fff; padding:12px 20px; border-radius:var(--radius-sm);
  font-size:13.5px; opacity:0; pointer-events:none; transition:all .25s var(--ease);
  max-width:90vw; box-shadow:0 6px 20px rgba(15,23,42,.25); z-index:50;
}
.toast.show{opacity:1; transform:translate(-50%,0);}
.toast.error{background:var(--color-destructive);}

/* ---------- footer ---------- */
.site-footer{
  text-align:center; padding:26px 20px 40px; color:var(--color-muted); font-size:12.5px;
}
.footer-sub{color:var(--amber-dark); margin-top:4px; font-weight:600;}

/* ---------- responsive ---------- */
@media (max-width:640px){
  .grid-2{grid-template-columns:1fr;}
  .header-inner{padding:14px 16px;}
  .logo{height:34px;}
  .wrap{padding:22px 14px 60px;}
  .step-nav ol{padding:10px 16px; gap:6px;}
}