:root{
  --bg1:#b9d7ee;
  --bg2:#d9efff;
  --panel:#ffffff;

  --text:#0b1b2a;
  --muted:#4a5d6f;

  --line:#7f9db9;
  --line2:#c7d7e6;

  --tab:#eaf2fb;
  --tabActive:#ffffff;

  --btnFace:#e9e9e9;
  --btnFace2:#f7f7f7;
  --btnText:#0b1b2a;

  --btnAccent:#1f6fb2;
  --btnAccent2:#2d84cf;
  --btnAccentText:#ffffff;

  --w: 980px;
}

/* hard rule: no rounding anywhere */
*{ box-sizing:border-box; border-radius:0 !important; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-size: 14px;
  color: var(--text);
  background: linear-gradient(180deg, var(--bg1), var(--bg2));
}

a{ color:#0b4a8a; text-decoration:none; }
a:hover{ text-decoration:underline; }

.wrap{ width: min(var(--w), calc(100% - 24px)); margin: 0 auto; }

.topbar{
  background: linear-gradient(180deg, #7fb6e2, #5aa0d6);
  border-bottom: 1px solid #3e7fad;
  color:#fff;
}
.topbar .inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 10px 0;
}

.brand{
  display:flex;
  align-items:baseline;
  gap:12px;
  font-weight:700;
  letter-spacing:.2px;
}
.brand .name{ font-size: 22px; }
.brand .tag{ font-size: 12px; opacity:.95; }

.toplinks{
  font-size:12px;
  opacity:.95;
}
.toplinks a{ color:#fff; }
.toplinks span{ opacity:.8; padding:0 6px; }

.headerrow{
  background: #d6ecff;
  border-bottom: 1px solid var(--line);
}
.headerrow .inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 10px 0;
}

.search{
  display:flex;
  align-items:center;
  gap:6px;
}
.search input{
  width: 360px;
  max-width: 52vw;
  padding: 6px 8px;
  border: 1px solid var(--line);
  background:#fff;
  outline:none;
}
.search input:focus{
  border-color:#2d84cf;
}
.search .btn{ padding:6px 10px; }

.tabs{
  background: #cfe6fb;
  border-bottom: 1px solid var(--line);
}
.tabs .inner{
  display:flex;
  flex-wrap:wrap;
  gap:0;
  padding: 0;
}
.tab{
  display:inline-block;
  padding: 10px 12px;
  background: var(--tab);
  border-right: 1px solid var(--line);
  border-left: 1px solid #ffffff;
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid var(--line);
  color:#0b1b2a;
}
.tab:first-child{ border-left: 1px solid var(--line); }
.tab:hover{ background:#f4fbff; text-decoration:none; }
.tab.active{
  background: var(--tabActive);
  border-bottom: 1px solid #ffffff;
  font-weight:700;
}

.main{
  padding: 14px 0 26px;
}

.grid{
  display:grid;
  grid-template-columns: 2fr 1fr;
  gap: 12px;
}
@media (max-width: 980px){
  .grid{ grid-template-columns:1fr; }
}

.panel{
  background: var(--panel);
  border: 1px solid var(--line);
}
.panel .hd{
  padding: 10px 12px;
  background: linear-gradient(180deg, #f6fbff, #e7f2fb);
  border-bottom: 1px solid var(--line2);
  font-weight:700;
}
.panel .bd{
  padding: 12px;
}

.h1{
  margin: 0 0 6px;
  font-size: 22px;
}
.lead{
  margin: 0 0 10px;
  color: var(--muted);
  line-height: 1.5;
}

.kpis{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 10px;
}
@media (max-width: 980px){
  .kpis{ grid-template-columns:1fr; }
}
.kpi{
  border: 1px solid var(--line2);
  padding: 10px;
  background:#fff;
}
.kpi b{
  display:block;
  font-size: 20px;
}
.kpi span{
  display:block;
  color: var(--muted);
  margin-top: 2px;
  font-size: 12px;
}

.callouts{
  display:grid;
  gap: 8px;
  margin-top: 10px;
}
.callout{
  border: 1px solid var(--line2);
  padding: 10px;
  background:#fff;
}
.callout b{ display:block; }
.callout span{ display:block; color: var(--muted); margin-top: 2px; font-size: 12.5px; line-height:1.45; }

.actions{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin-top: 12px;
}

/* retro 3D buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 8px 12px;
  background: linear-gradient(180deg, var(--btnFace2), var(--btnFace));
  color: var(--btnText);
  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #6b6b6b;
  border-bottom: 1px solid #6b6b6b;
  cursor:pointer;
  user-select:none;
  text-decoration:none;
  font-weight:700;
}
.btn:hover{ filter: brightness(1.01); text-decoration:none; }
.btn:active,
.btn.is-pressed{
  background: linear-gradient(180deg, #d9d9d9, #f0f0f0);
  border-top: 1px solid #6b6b6b;
  border-left: 1px solid #6b6b6b;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  transform: translate(1px, 1px);
}

.btn.primary{
  background: linear-gradient(180deg, var(--btnAccent2), var(--btnAccent));
  color: var(--btnAccentText);
  border-top: 1px solid #bfe0ff;
  border-left: 1px solid #bfe0ff;
  border-right: 1px solid #12466f;
  border-bottom: 1px solid #12466f;
}
.btn.primary:active,
.btn.primary.is-pressed{
  background: linear-gradient(180deg, #1b5f99, #2b7ec4);
  border-top: 1px solid #12466f;
  border-left: 1px solid #12466f;
  border-right: 1px solid #bfe0ff;
  border-bottom: 1px solid #bfe0ff;
}

.form{
  display:grid;
  gap: 10px;
  margin-top: 6px;
}
label{
  font-size: 12px;
  color: var(--muted);
  font-weight:700;
  display:block;
  margin-bottom: 4px;
}
input, select, textarea{
  width:100%;
  padding: 8px 8px;
  border: 1px solid var(--line);
  background:#fff;
  outline:none;
}
textarea{ min-height: 120px; resize: vertical; }
input:focus, select:focus, textarea:focus{ border-color:#2d84cf; }

.msg{
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--line2);
  background:#f7fbff;
  color: var(--muted);
  line-height: 1.45;
  display:none;
}
.msg.ok{ background:#eefaf1; color:#14532d; border-color:#bde6c7; }
.msg.bad{ background:#fff1f1; color:#7f1d1d; border-color:#f0c0c0; }

.footer{
  margin-top: 12px;
  padding: 10px 0 18px;
  color:#2f4c62;
  font-size: 12px;
  text-align:center;
}
.footer a{ color:#0b4a8a; }