/* Härmakate — classic system UI chrome, image-free */
:root{
  --chrome:#B8C4C4;
  --beige:#F0EDE4;
  --teal:#3D7A7A;
  --btn:#008000;
  --ink:#000000;
  --hi:#FFFFFF;
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  padding:0;
  font-family:Arial,Helvetica,sans-serif;
  font-size:15px;
  line-height:1.5;
  color:var(--ink);
  background-color:var(--teal);
  background-image:
    repeating-linear-gradient(45deg, rgba(0,0,0,.07) 0 2px, rgba(0,0,0,0) 2px 6px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.05) 0 2px, rgba(255,255,255,0) 2px 6px);
}

.desk{
  max-width:960px;
  margin:0 auto;
  padding:18px 12px 44px;
}

/* ---------- window ---------- */
.win{
  background:var(--chrome);
  border:3px solid;
  border-color:var(--hi) var(--ink) var(--ink) var(--hi);
  box-shadow:4px 4px 0 rgba(0,0,0,.45);
  margin:0 0 22px;
}

.titlebar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  background:var(--teal);
  border-bottom:3px solid var(--ink);
  padding:5px 6px;
}

.tb-name{
  font-family:Verdana,Geneva,sans-serif;
  font-weight:bold;
  font-size:13px;
  letter-spacing:.3px;
  color:var(--hi);
  text-transform:uppercase;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.tb-btns{display:flex;gap:4px;flex:0 0 auto}

.tb-sq{
  width:20px;height:18px;
  display:flex;align-items:center;justify-content:center;
  background:var(--chrome);
  border:2px solid;
  border-color:var(--hi) var(--ink) var(--ink) var(--hi);
  font-family:Verdana,Geneva,sans-serif;
  font-size:11px;
  line-height:1;
  color:var(--ink);
}

/* ---------- toolbar ---------- */
.toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  padding:5px 6px;
  background:var(--chrome);
  border-bottom:3px solid var(--ink);
}

.cmd{
  font-family:Verdana,Geneva,sans-serif;
  font-size:12px;
  text-decoration:none;
  color:var(--ink);
  padding:4px 10px;
  border:2px solid;
  border-color:var(--hi) var(--ink) var(--ink) var(--hi);
  background:var(--chrome);
}
.cmd:hover,.cmd:focus{
  background:var(--beige);
  border-color:var(--ink) var(--hi) var(--hi) var(--ink);
  outline:none;
}
.cmd.is-active{
  background:var(--teal);
  color:var(--hi);
  border-color:var(--ink) var(--hi) var(--hi) var(--ink);
}

.win-body{padding:14px}

.grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

/* ---------- panels ---------- */
.panel{padding:14px 16px}
.inset{
  background:var(--beige);
  border:3px solid;
  border-color:var(--ink) var(--hi) var(--hi) var(--ink);
}

.dialog-title{
  font-family:Verdana,Geneva,sans-serif;
  font-size:19px;
  line-height:1.25;
  margin:0 0 10px;
  padding:0 0 8px;
  border-bottom:2px solid var(--teal);
}

.hero .dialog-title{font-size:23px}

p{margin:0 0 10px}

.lead{
  font-family:Verdana,Geneva,sans-serif;
  font-size:14px;
}

.mono{font-family:"Courier New",Courier,monospace}

.note{
  font-size:12.5px;
  margin:12px 0 0;
  padding:6px 8px;
  background:var(--chrome);
  border:2px solid;
  border-color:var(--ink) var(--hi) var(--hi) var(--ink);
}

/* ---------- hero facts ---------- */
.facts{
  list-style:none;
  margin:14px 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}
.facts li{
  background:var(--chrome);
  border:2px solid;
  border-color:var(--hi) var(--ink) var(--ink) var(--hi);
  padding:8px;
  text-align:center;
}
.facts .k{
  display:block;
  font-family:"Courier New",Courier,monospace;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.5px;
}
.facts .v{
  display:block;
  font-family:Verdana,Geneva,sans-serif;
  font-weight:bold;
  font-size:16px;
}

/* ---------- buttons ---------- */
.btn-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}

.btn{
  display:inline-block;
  font-family:Verdana,Geneva,sans-serif;
  font-size:13px;
  text-decoration:none;
  color:var(--ink);
  background:var(--chrome);
  padding:9px 18px;
  border:3px solid;
  border-color:var(--hi) var(--ink) var(--ink) var(--hi);
}
.btn:active{border-color:var(--ink) var(--hi) var(--hi) var(--ink)}
.btn:hover{background:var(--beige)}

.btn-primary{
  background:var(--btn);
  color:var(--hi);
  font-weight:bold;
}
.btn-primary:hover{background:var(--btn);color:var(--beige)}

/* ---------- price list ---------- */
.pricelist{list-style:none;margin:0;padding:0}
.pricelist li{
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-areas:"job price" "detail detail";
  align-items:baseline;
  gap:2px 10px;
  padding:10px 10px;
  background:var(--beige);
  border-bottom:2px solid var(--chrome);
}
.pricelist li:nth-child(even){background:var(--chrome)}
.pricelist .job{
  grid-area:job;
  font-family:Verdana,Geneva,sans-serif;
  font-size:13.5px;
}
.pricelist .dots{display:none}
.pricelist .price{
  grid-area:price;
  font-family:Verdana,Geneva,sans-serif;
  font-weight:bold;
  font-size:16px;
  color:var(--ink);
  white-space:nowrap;
  border-bottom:3px solid var(--btn);
}
.pricelist .detail{
  grid-area:detail;
  font-size:12px;
}

/* ---------- lists / tables ---------- */
.steps{margin:0;padding-left:20px}
.steps li{margin-bottom:7px}

.bullets{list-style:none;margin:0;padding:0}
.bullets li{
  position:relative;
  padding-left:18px;
  margin-bottom:6px;
}
.bullets li::before{
  content:"";
  position:absolute;
  left:0;top:.5em;
  width:8px;height:8px;
  background:var(--teal);
  border:1px solid var(--ink);
}

.sys-table{width:100%;border-collapse:collapse;font-size:13.5px}
.sys-table th,.sys-table td{
  border:2px solid var(--chrome);
  padding:6px 8px;
  text-align:left;
}
.sys-table th{
  font-family:"Courier New",Courier,monospace;
  font-weight:normal;
  text-transform:uppercase;
  font-size:11.5px;
  width:48%;
  background:var(--chrome);
}

/* ---------- fieldsets ---------- */
.fset{
  border:2px solid;
  border-color:var(--ink) var(--hi) var(--hi) var(--ink);
  margin:0 0 16px;
  padding:10px 14px 12px;
  background:var(--beige);
}
.fset legend{
  font-family:Verdana,Geneva,sans-serif;
  font-size:13px;
  font-weight:bold;
  padding:0 6px;
}
.price-line{
  margin:0 0 8px;
  font-size:13px;
  display:inline-block;
  background:var(--chrome);
  border:2px solid var(--ink);
  padding:3px 8px;
}

/* ---------- contact ---------- */
.addr{
  font-style:normal;
  font-family:Verdana,Geneva,sans-serif;
  font-size:14px;
  line-height:1.7;
}
.addr a{color:var(--ink)}

.social{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.soc{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:Verdana,Geneva,sans-serif;
  font-size:12px;
  text-decoration:none;
  color:var(--ink);
  background:var(--chrome);
  padding:6px 12px;
  border:2px solid;
  border-color:var(--hi) var(--ink) var(--ink) var(--hi);
}
.soc:hover{background:var(--beige)}
.soc svg{color:var(--teal)}

/* ---------- status bar ---------- */
.statusbar{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  padding:5px 6px;
  background:var(--chrome);
  border-top:3px solid var(--ink);
  font-family:"Courier New",Courier,monospace;
  font-size:11.5px;
}
.st-cell{
  padding:3px 8px;
  background:var(--chrome);
  border:2px solid;
  border-color:var(--ink) var(--hi) var(--hi) var(--ink);
  flex:1 1 auto;
}
.st-cell a{color:var(--ink)}
.st-clock{flex:0 0 auto;text-align:right}

/* ---------- responsive ---------- */
@media (max-width:720px){
  .grid-2{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr}
  .hero .dialog-title{font-size:19px}
  .win-body{padding:10px}
  .panel{padding:12px}
  .pricelist li{grid-template-columns:1fr;grid-template-areas:"job" "price" "detail"}
  .pricelist .price{justify-self:start;margin-top:4px}
  .st-cell{flex:1 1 100%}
  .st-clock{text-align:left}
  .desk{padding:12px 8px 30px}
}