:root{
  --page:#f2f2f2;
  --paper:#fff;
  --ink:#333;
  --muted:#6f6f6f;
  --line:#bdbdbd;
  --line-soft:#d8d8d8;
  --orange:#ff7c00;
  --orange-light:#ffbb28;
  --blue-head:#dce9f9;
  --blue-head-top:#ebf3fc;
  --nav:#222;
  --ok:#18794e;
  --warn:#9a6700;
  --bad:#b42318;
  --radius:6px;
}

*{box-sizing:border-box}
html{min-height:100%}
body{
  margin:0;
  min-height:100vh;
  font:0.95em "Trebuchet MS",Arial,Helvetica,"Helvetica Neue",sans-serif;
  color:var(--ink);
  line-height:1.45;
  background:
    linear-gradient(175deg,#fff 0%,#ffc865 20%,#ff9d3d 40%,#ff7c00 41%,#ffbb28 100%) top/100% 80px no-repeat,
    var(--page);
}

a{color:#214f8b;text-decoration:underline;cursor:pointer}
a:hover{color:#2222ff}
hr{border-color:var(--line-soft)!important}

.shell{min-height:100vh}
.topbar{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:0;
  padding:0;
  color:#222;
  background:linear-gradient(175deg,#fff 0%,#ffc865 20%,#ff9d3d 40%,#ff7c00 41%,#ffbb28 100%);
  border-bottom:1px solid #111;
  box-shadow:0 2px 5px rgba(0,0,0,.28);
}

.brand{
  min-height:80px;
  display:flex;
  align-items:center;
  gap:14px;
  padding:4px 24px 3px;
  text-shadow:0 1px 0 rgba(255,255,255,.75);
}
.brand-mark{
  width:82px;
  height:70px;
  flex:0 0 82px;
  display:block;
  overflow:hidden;
  font-size:0;
  color:transparent;
  background:url("eklaim-hexa.png") center/contain no-repeat;
}
.brand strong{
  display:block;
  color:#202020;
  font-size:1.28rem;
  line-height:1.15;
  letter-spacing:.01em;
}
.brand small{display:block;margin-top:4px;color:#4b4b4b;font-size:.83rem;opacity:1}

.nav{
  width:100%;
  min-height:35px;
  display:flex;
  align-items:stretch;
  gap:0;
  flex-wrap:wrap;
  padding:0 20px;
  background:linear-gradient(#343434,#171717);
  border-top:1px solid rgba(255,255,255,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.nav a{
  display:flex;
  align-items:center;
  min-height:35px;
  padding:7px 15px;
  color:#eee;
  text-decoration:none;
  font-size:.92rem;
  border-left:1px solid rgba(255,255,255,.08);
  border-right:1px solid rgba(0,0,0,.7);
  text-shadow:0 -1px 0 #000;
}
.nav a:hover,.nav a.active{
  color:#fff;
  text-decoration:none;
  background:linear-gradient(#5a5a5a,#2c2c2c);
  box-shadow:inset 0 -3px 0 var(--orange-light);
}
.nav form{display:flex!important;align-items:center;margin-left:auto;padding-left:10px}
.nav .btn{margin:3px 0;color:#222;text-shadow:none;background:linear-gradient(#fff,#dcdcdc)}

.container{
  max-width:1400px;
  margin:14px auto 0;
  padding:0 16px 48px;
}

.page-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  margin:0 0 12px;
  padding:10px 12px;
  color:#333;
  border:1px solid #b7b7b7;
  border-radius:var(--radius);
  background:linear-gradient(to right,#e7e7e7,#fff);
  box-shadow:0 1px 2px rgba(0,0,0,.08);
}
.page-head h1{margin:0 0 3px;font-size:1.48rem;font-weight:700;color:#333}
.muted{color:var(--muted)}

.grid{display:grid;gap:12px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}

.card{
  position:relative;
  padding:14px;
  color:#333;
  background:var(--paper);
  border:1px solid #bbb;
  border-radius:var(--radius);
  box-shadow:0 1px 3px rgba(0,0,0,.15);
}
.card h1,.card h2,.card h3{color:#333}
.card h2,.card h3{
  margin:-14px -14px 14px;
  padding:8px 11px;
  font-size:1rem;
  font-weight:700;
  text-shadow:0 1px 0 rgba(255,255,255,.75);
  background:linear-gradient(var(--blue-head-top),var(--blue-head));
  border-bottom:1px solid #b8c9dc;
  border-radius:5px 5px 0 0;
}
.card>h1:first-child{margin-top:0}

.metric{font-size:1.75rem;font-weight:700;color:#3f4c6b}
.metric-label{font-size:.88rem;color:#606060}
.grid-4>.card{background:linear-gradient(#fff,#f5f5f5);border-top:4px solid #ff9d3d}

.btn,
button,
input[type=button],
input[type=submit],
input[type=reset]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:30px;
  margin:0 .15em;
  padding:.42em 1em .48em;
  border:1px solid #888;
  border-radius:.5em;
  outline:none;
  cursor:pointer;
  color:#333;
  text-decoration:none;
  font:14px/100% "Helvetica Neue",Arial,Helvetica,sans-serif;
  font-weight:600;
  text-shadow:0 1px 0 rgba(255,255,255,.75);
  background:linear-gradient(#fff,#dedede);
  box-shadow:0 1px 3px rgba(0,0,0,.16);
  transition:all 120ms ease;
}
.btn:hover,button:hover,input[type=button]:hover,input[type=submit]:hover,input[type=reset]:hover{
  color:#111;
  text-decoration:none;
  background:linear-gradient(#fff,#ededed);
  filter:none;
}
.btn:active,button:active,input[type=button]:active,input[type=submit]:active,input[type=reset]:active{
  transform:translateY(1px);
  box-shadow:0 0 2px rgba(0,0,0,.2);
}
.btn:not(.btn-secondary):not(.btn-success):not(.btn-warning):not(.btn-danger){
  color:#fff;
  text-shadow:0 -1px 0 rgba(0,0,0,.7);
  border-color:#28364e;
  background:linear-gradient(#53627f,#3f4c6b);
}
.btn:not(.btn-secondary):not(.btn-success):not(.btn-warning):not(.btn-danger):hover{background:linear-gradient(#657697,#495b7b)}
.btn-secondary{color:#333;background:linear-gradient(#fff,#dedede)}
.btn-success{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,.5);border-color:#11623f;background:linear-gradient(#26955f,#18794e)}
.btn-warning{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,.5);border-color:#795300;background:linear-gradient(#c58a08,#9a6700)}
.btn-danger{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,.5);border-color:#8e1b13;background:linear-gradient(#d83b2f,#b42318)}
.btn-sm{min-height:25px;padding:.3em .72em;font-size:.82rem}
.actions{display:flex;gap:7px;flex-wrap:wrap;align-items:center}

.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px}
.form-grid .span-2{grid-column:1/-1}
label{display:block;margin-bottom:4px;color:#444;font-size:.88rem;font-weight:700}
input,select,textarea{
  width:100%;
  outline:none;
  color:#555;
  font:inherit;
  border:1px solid #c8c8c8;
  border-radius:5px;
  background:#ffffea;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.06);
}
input,select{min-height:32px;padding:5px 8px}
textarea{min-height:95px;padding:7px 8px;resize:vertical}
input:focus,select:focus,textarea:focus{color:#000;border-color:#ffa643;background:#fff5ef;box-shadow:0 0 0 2px rgba(255,166,67,.2)}
input:disabled,select:disabled,textarea:disabled{color:#666;background:#fafafa;cursor:default}
.help{margin-top:4px;color:#737373;font-size:.79rem}

.table-wrap{overflow:auto;border:1px solid #bbb;border-radius:6px;background:#fff}
table{width:100%;border-collapse:separate;border-spacing:0;background:#fff}
th,td{padding:8px 10px;text-align:left;vertical-align:top;white-space:nowrap;border-bottom:1px solid #d0d0d0;border-left:1px solid #e2e2e2}
th:first-child,td:first-child{border-left:0}
th{
  color:#333;
  font-size:.82rem;
  font-weight:700;
  text-transform:none;
  letter-spacing:0;
  text-shadow:0 1px 0 rgba(255,255,255,.65);
  background:linear-gradient(var(--blue-head-top),var(--blue-head));
  border-bottom-color:#b8c9dc;
}
tbody tr:nth-child(even) td{background:#fafafa}
tbody tr:hover td{background:#fff9de}
tr:last-child td{border-bottom:0}

.badge{display:inline-flex;padding:3px 8px;border:1px solid #bbb;border-radius:4px;color:#444;font-size:.76rem;font-weight:700;background:linear-gradient(#fff,#e3e3e3)}
.badge-ok{color:#12613f;border-color:#a7cfb8;background:#e8f5ee}
.badge-warn{color:#805b00;border-color:#e0c26e;background:#fff4d8}
.badge-bad{color:#8f1d14;border-color:#e7aaa5;background:#feeceb}

.alert{margin-bottom:12px;padding:9px 11px;border:1px solid;border-radius:5px;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.alert-success{color:#12613f;border-color:#9fcbb1;background:#ebf8f1}
.alert-error{color:#8f1d14;border-color:#e2a8a2;background:#fff0ef}
.alert-warning{color:#805b00;border-color:#d9bc70;background:#fff8e6}
.alert-info{color:#154f7a;border-color:#a9c9e0;background:#edf6ff}

.login-wrap{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:110px 20px 30px;
  background:
    linear-gradient(175deg,#fff 0%,#ffc865 20%,#ff9d3d 40%,#ff7c00 41%,#ffbb28 100%) top/100% 80px no-repeat,
    url("eklaim-linen.jpg") repeat;
}
.login-card{width:min(430px,100%)}
.login-card>.card{padding:18px;background:rgba(245,245,255,.93);border-color:#777;box-shadow:1px 2px 6px rgba(0,0,0,.45)}
.login-card .brand{justify-content:center;min-height:auto;padding:0;text-align:left}
.login-card .brand-mark{width:96px;height:84px;flex-basis:96px}
.login-card .brand h1{margin:0 0 3px;font-size:1.42rem}
.login-card input{text-align:center}
.login-card .btn{min-height:36px}

.workflow{display:grid;gap:8px}
.workflow-step{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 10px;border:1px solid #bbb;border-radius:5px;background:linear-gradient(#fff,#f3f3f3)}
.workflow-step:hover{background:#fff9de}
.workflow-step strong{display:block;color:#333}

.code{max-height:440px;overflow:auto;padding:11px;border:1px solid #222;border-radius:4px;color:#e7f2e7;background:#20252b;font-family:"Courier New",Consolas,monospace;font-size:.86rem;white-space:pre-wrap;word-break:break-word}
.kv{display:grid;grid-template-columns:180px 1fr;gap:7px 15px}
.kv dt{font-weight:700;color:#444}
.kv dd{margin:0}
.status-dot{width:9px;height:9px;display:inline-block;margin-right:6px;border-radius:50%;background:#999;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.status-dot.ok{background:var(--ok)}
.footer{margin-top:24px;padding:9px;text-align:center;color:#666;font-size:.79rem;border-top:1px solid #ccc}
.danger-note{padding:10px 12px;border-left:4px solid var(--bad);background:#fff4f3}
.nowrap{white-space:nowrap}

@media(max-width:900px){
  .grid-4,.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-head{flex-direction:column}
  .brand{padding-left:15px}
  .nav{padding:0}
}

@media(max-width:640px){
  body{font-size:.9em}
  .grid-2,.grid-3,.grid-4,.form-grid{grid-template-columns:1fr}
  .form-grid .span-2{grid-column:auto}
  .kv{grid-template-columns:1fr}
  .container{padding:0 9px 35px;margin-top:9px}
  .brand{width:100%;min-height:70px;padding:3px 10px;gap:8px}
  .brand-mark{width:62px;height:60px;flex-basis:62px}
  .brand strong{font-size:1.04rem}
  .brand small{font-size:.74rem}
  .nav a{flex:1 1 auto;justify-content:center;padding:7px 8px;font-size:.8rem}
  .nav form{width:100%;margin:0;padding:4px 8px;justify-content:flex-end;background:#171717}
  .page-head{padding:9px}
  .workflow-step{align-items:flex-start;flex-direction:column}
  .login-wrap{padding:95px 12px 25px}
  th,td{padding:7px 8px}
}