:root{
  --bg:#f7f7f7;
  --panel:#ffffff;
  --panel2:#faf8f7;
  --line:#e5e1df;
  --text:#231b19;
  --muted:#746966;
  --brand:#a54132;
  --brand-hover:#8f372b;
  --green:#2d8f55;
  --yellow:#b8871d;
  --red:#b93e34;
  --blue:#357c9e;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter,Segoe UI,Arial,sans-serif;
  background:
    radial-gradient(circle at 88% 0,rgba(165,65,50,.07),transparent 26%),
    linear-gradient(180deg,#ffffff 0%,#f7f7f7 100%);
  color:var(--text);
  min-height:100vh
}
a{color:inherit;text-decoration:none}
input,select,textarea,button{font:inherit}
input,select,textarea{
  width:100%;
  background:#ffffff;
  border:1px solid #d9d2cf;
  color:#2a211f;
  border-radius:10px;
  padding:11px 12px;
  outline:none
}
input::placeholder,textarea::placeholder{color:#a69b97}
input:focus,select:focus,textarea:focus{
  border-color:#b86a59;
  box-shadow:0 0 0 3px rgba(165,65,50,.08)
}
textarea{min-height:80px;resize:vertical}
label{
  display:flex;
  flex-direction:column;
  gap:7px;
  color:#4f4542;
  font-size:12px;
  font-weight:700
}
.container{width:min(1440px,94%);margin:0 auto;padding:24px 0 70px}

.topbar{
  position:sticky;
  top:0;
  z-index:30;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  padding:11px 3%;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--line);
  box-shadow:0 2px 14px rgba(61,44,39,.05);
  backdrop-filter:blur(12px)
}
.brand{display:flex;align-items:center;gap:11px}
.brand.big{margin-bottom:28px}
.brand small{
  display:block;
  color:#8e7d78;
  font-size:9px;
  letter-spacing:.13em;
  margin-top:3px
}
.mark{
  width:43px;
  height:43px;
  border-radius:12px;
  background:linear-gradient(145deg,#a54132,#cd725b);
  color:#fff;
  display:grid;
  place-items:center;
  font-weight:900;
  box-shadow:0 7px 18px rgba(165,65,50,.17)
}
.top-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.user-pill{
  font-size:11px;
  padding:9px 11px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#faf8f7;
  color:#4d413e
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid #d9d1ce;
  background:#ffffff;
  color:#392d2a;
  border-radius:10px;
  padding:10px 13px;
  font-weight:800;
  cursor:pointer;
  transition:.15s ease
}
.btn:hover{background:#f7f3f1;border-color:#cfc4c0}
.btn.primary{background:var(--brand);color:#fff;border-color:transparent}
.btn.primary:hover{background:var(--brand-hover)}
.btn.good{
  background:#edf8f1;
  color:#237744;
  border-color:#bfe2ca
}
.btn.warn{
  background:#fff7e6;
  color:#8c6512;
  border-color:#ead59d
}
.btn.danger{
  background:#fff0ee;
  color:#a5362d;
  border-color:#ecc1bc
}
.btn.ghost{background:#fff}
.btn.full{width:100%}
.btn:disabled{
  opacity:.45;
  cursor:not-allowed;
  background:#f0eeed;
  color:#9c9491;
  border-color:#e4dfdd
}

.card{
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:17px;
  padding:18px;
  margin-bottom:17px;
  box-shadow:0 5px 18px rgba(69,50,45,.045)
}
.card.narrow{max-width:650px;margin:80px auto}
.card-head,.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.page-head{margin-bottom:18px}
.page-head h1,.card h2{margin-top:0}
.page-head h1{font-size:30px;margin-bottom:6px}
.page-head p,.card p{color:var(--muted)}
.back{color:#9a5143;font-size:12px}

.flash{padding:12px 14px;border-radius:11px;margin-bottom:15px}
.flash.success{
  background:#eef8f1;
  border:1px solid #c5e5cf;
  color:#287548
}
.flash.error{
  background:#fff0ee;
  border:1px solid #efc2bd;
  color:#a33d34
}

.login-shell{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:40px;
  align-items:center;
  min-height:80vh;
  max-width:1050px;
  margin:auto
}
.login-intro h1{font-size:50px;line-height:1.02;letter-spacing:-.04em;color:#271d1b}
.login-intro p{font-size:17px;color:var(--muted);line-height:1.7}
.login-card form{display:grid;gap:14px}

.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:18px}
.stat{
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:15px;
  box-shadow:0 4px 14px rgba(69,50,45,.035)
}
.stat span{
  display:block;
  color:#857a76;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em
}
.stat b{font-size:28px;display:block;margin-top:6px;color:#2b211f}
.stat.danger b{color:#b9493f}
.stat.warn b{color:#a77a1b}
.stat.good b{color:#2f8b54}

.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse;min-width:850px}
th,td{
  padding:11px 9px;
  border-bottom:1px solid #ece7e5;
  text-align:left;
  font-size:12px
}
th{
  font-size:9px;
  color:#8a7e7a;
  text-transform:uppercase;
  letter-spacing:.08em;
  background:#fbfaf9
}
.clickable{cursor:pointer}
.clickable:hover{background:#faf7f6}

.pill{
  display:inline-flex;
  padding:6px 9px;
  border-radius:999px;
  font-size:9px;
  font-weight:900;
  white-space:nowrap;
  border:1px solid #ddd5d2;
  background:#faf8f7;
  color:#5c504c
}
.pill.green{color:#257746;background:#edf8f1;border-color:#c6e6d0}
.pill.red{color:#a53a31;background:#fff0ee;border-color:#edc3be}
.pill.gray{color:#6d625f}
.pill.production{color:#2e6f8d;background:#eef7fb;border-color:#c9e2ee}
.pill.repair{color:#8e6814;background:#fff8e9;border-color:#ead9a7}
.pill.large{font-size:11px;padding:9px 12px}

.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.full{grid-column:1/-1}
.component-row{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:9px}
.actions{display:flex;justify-content:flex-end;margin-top:16px}

.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:15px}
.kpis>div{
  background:#fbfaf9;
  border:1px solid #e7e1de;
  border-radius:13px;
  padding:13px
}
.kpis span{
  display:block;
  color:#8d817d;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.07em
}
.kpis b{display:block;margin-top:6px;font-size:15px;color:#302522}

.critical{
  border:1px solid #e5a59f;
  background:linear-gradient(135deg,#fff0ee,#fff8f7);
  color:#9e332b;
  padding:14px;
  border-radius:14px;
  margin-bottom:14px;
  animation:pulse 1.5s infinite
}
.critical p,.tw-failed p,.tw-passed p,.readiness p{margin:6px 0 0;font-size:12px}
@keyframes pulse{50%{box-shadow:0 0 0 7px rgba(196,75,64,.055)}}

.tw-failed{
  border:1px solid #e9b5af;
  background:#fff1ef;
  padding:14px;
  border-radius:14px;
  margin-bottom:14px;
  color:#9f3930
}
.tw-passed{
  border:1px solid #bee1c9;
  background:#eef8f1;
  padding:14px;
  border-radius:14px;
  margin-bottom:14px;
  color:#267547
}
.readiness{padding:14px;border-radius:14px;margin-bottom:17px}
.readiness.ready{
  border:1px solid #bee1c9;
  background:#eef8f1;
  color:#267547
}
.readiness.not-ready{
  border:1px solid #e9c3bf;
  background:#fff4f2;
  color:#9e4a42
}

.detail-grid{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:18px}
.sticky{position:sticky;top:90px}
.sidebar-rail{
  position:sticky;
  top:90px;
  align-self:start;
  max-height:calc(100vh - 110px);
  overflow-y:auto;
  padding-right:5px;
  scrollbar-gutter:stable
}
.sidebar-rail .card:last-child{margin-bottom:0}
.sidebar-rail::-webkit-scrollbar{width:8px}
.sidebar-rail::-webkit-scrollbar-thumb{background:#d7ceca;border-radius:999px}
.sidebar-rail::-webkit-scrollbar-track{background:transparent}

.workflow-step,.check-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 0;
  border-bottom:1px dashed #e5ddda
}
.step-title{display:flex;align-items:center;gap:9px}
.step-title span{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  background:#f4ece9;
  border-radius:8px;
  color:#9d5548;
  font-size:10px
}
.dot{width:10px;height:10px;border-radius:50%;background:#c4bbb7}
.dot.done{background:var(--green)}
.dot.pending{background:#d5ad50}

.action-grid{display:flex;gap:8px;flex-wrap:wrap}
.inline-form{display:flex;gap:8px;align-items:end;flex-wrap:wrap}
.inline-form input,.inline-form select{width:auto;min-width:150px}
.stack-form{display:grid;gap:10px}
.top-gap{margin-top:12px}

.timeline{display:grid;gap:11px;max-height:720px;overflow:auto}
.event{border-left:3px solid #ccb9b3;padding-left:10px}
.event.bad{border-left-color:var(--red)}
.event small{display:block;color:#8c7f7b;font-size:9px}
.event b{display:block;font-size:11px;margin-top:3px;color:#352926}
.event p{font-size:11px;margin:3px 0;color:#665a56}
.event span{font-size:9px;color:#887975}
.empty{text-align:center;color:var(--muted);padding:30px}
hr{border:0;height:1px;background:var(--line);margin:17px 0}

@media(max-width:1100px){
  .stats{grid-template-columns:repeat(3,1fr)}
  .kpis{grid-template-columns:repeat(3,1fr)}
  .detail-grid{grid-template-columns:1fr}
  .sticky{position:static}
  .sidebar-rail{position:static;max-height:none;overflow:visible;padding-right:0}
  .login-shell{grid-template-columns:1fr}
}
@media(max-width:760px){
  .topbar{align-items:flex-start;flex-direction:column}
  .container{width:92%}
  .stats,.kpis,.form-grid{grid-template-columns:1fr 1fr}
  .full{grid-column:1/-1}
  .login-intro h1{font-size:38px}
}
@media(max-width:520px){
  .stats,.kpis,.form-grid,.component-row{grid-template-columns:1fr}
  .full{grid-column:auto}
  .user-pill{display:none}
  .login-intro h1{font-size:32px}
}