:root {
  --page-bg-top: #8aa0bf;
  --page-bg-bottom: #d6e0ef;
  --shell-bg: #f0f2f5;
  --shell-border-dark: #4b5f80;
  --shell-border-mid: #6f84a6;
  --shell-border-light: #c4d2e8;
  --panel-head-top: #4069a2;
  --panel-head-bottom: #27466f;
  --panel-bg: #f6f8fc;
  --nav-top: #5f84b8;
  --nav-bottom: #355a90;
  --accent: #cc4b1d;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 14px;
  font-family: "Trebuchet MS", Tahoma, Verdana, sans-serif;
  background: linear-gradient(to bottom, var(--page-bg-top), var(--page-bg-bottom)) fixed;
  color: #1f2940;
}

a {
  color: #123d79;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.shell {
  width: 780px;
  margin: 0 auto;
  border: 2px solid var(--shell-border-dark);
  border-right-color: var(--shell-border-light);
  border-bottom-color: var(--shell-border-light);
  background: var(--shell-bg);
  border-collapse: collapse;
  box-shadow: 0 4px 12px rgba(21, 31, 46, 0.25);
}

.masthead {
  width: 100%;
  border-collapse: collapse;
  background: linear-gradient(to bottom, #dae5f8, #b7c8e3);
}

.masthead td {
  border-bottom: 1px solid #90a3c2;
  padding: 10px;
  vertical-align: middle;
}

.brand-cell {
  width: 110px;
  text-align: center;
  border-right: 1px solid #9bb0d0;
}

.brand-logo {
  width: 78px;
  height: 78px;
}

.mast-copy h1 {
  margin: 0;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: 0.2px;
}

.mast-copy p {
  margin: 4px 0 0;
  font-size: 13px;
}

.mast-meta {
  width: 195px;
  text-align: right;
}

.mast-meta p {
  margin: 0;
}

.callout {
  display: inline-block;
  padding: 4px 8px;
  border: 1px solid #7f9bc2;
  border-right-color: #d8e3f5;
  border-bottom-color: #d8e3f5;
  background: linear-gradient(to bottom, #fef0cb, #f2d78d);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.clock {
  margin-top: 8px !important;
  font-size: 11px;
  color: #2e4064;
}

.nav-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.nav-table td {
  border-right: 1px solid #7a95bd;
}

.nav-table td:last-child {
  border-right: none;
}

.nav-table a {
  display: block;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #f7fbff;
  padding: 8px 6px;
  background: linear-gradient(to bottom, var(--nav-top), var(--nav-bottom));
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

.nav-table a.is-active {
  background: linear-gradient(to bottom, #f2d08d, #ca9e44);
  color: #2e2311;
  text-shadow: none;
}

.disclaimer {
  margin: 8px 10px 2px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid #b07222;
  background: linear-gradient(to bottom, #fff7db, #ffe8ab);
  color: #532b00;
}

.main-cell {
  padding: 8px;
}

.layout {
  width: 100%;
  border-collapse: separate;
  border-spacing: 8px;
}

.rail {
  width: 210px;
  vertical-align: top;
}

.content {
  vertical-align: top;
}

.panel {
  width: 100%;
  margin-bottom: 8px;
  border-collapse: collapse;
  border: 1px solid #7d95b9;
  background: #ffffff;
}

.panel th {
  text-align: left;
  padding: 6px 8px;
  font-size: 12px;
  color: #f3f7ff;
  letter-spacing: 0.2px;
  background: linear-gradient(to bottom, var(--panel-head-top), var(--panel-head-bottom));
}

.panel td {
  padding: 8px;
  font-size: 12px;
  background: var(--panel-bg);
  border-top: 1px solid #c4d2e8;
  line-height: 1.4;
}

.panel p {
  margin: 0 0 8px;
}

.panel p:last-child {
  margin-bottom: 0;
}

.hero-grid {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 10px;
  align-items: start;
  margin-bottom: 8px;
}

.hero-grid img {
  width: 70px;
  height: 70px;
}

.grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.grid th,
.grid td {
  border: 1px solid #a7b9d4;
  padding: 6px;
}

.grid th {
  background: #dce6f5;
  color: #223657;
  text-align: left;
}

.grid td {
  background: #f7f9fd;
}

.bevel-btn {
  display: inline-block;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 700;
  color: #162541;
  border: 1px solid #6f83a9;
  border-top-color: #edf3ff;
  border-left-color: #edf3ff;
  border-right-color: #4a6085;
  border-bottom-color: #4a6085;
  background: linear-gradient(to bottom, #f7f8fc, #c5d4eb);
  text-decoration: none;
  cursor: pointer;
}

.bevel-btn:active {
  border-top-color: #4a6085;
  border-left-color: #4a6085;
  border-right-color: #edf3ff;
  border-bottom-color: #edf3ff;
}

.bevel-btn.small {
  padding: 3px 8px;
  font-size: 10px;
}

.simple-form label,
.config-form label {
  display: block;
  margin-bottom: 3px;
  font-size: 11px;
  font-weight: 700;
}

.simple-form input,
.config-form select {
  width: 100%;
  margin-bottom: 8px;
  padding: 4px 6px;
  font-size: 12px;
  border: 1px solid #7f95ba;
  background: #fcfdff;
}

.config-form {
  max-width: 470px;
}

.totals {
  margin: 10px 0;
  padding: 8px;
  border: 1px solid #90a7cc;
  background: linear-gradient(to bottom, #ecf2fd, #d7e5fb);
}

.totals p {
  margin: 0;
}

.total-price {
  margin-top: 2px !important;
  font-size: 27px;
  line-height: 1;
  color: var(--accent);
}

.form-actions {
  display: flex;
  gap: 8px;
}

.status-pill {
  display: inline-block;
  padding: 2px 6px;
  border: 1px solid #5c7a4f;
  background: linear-gradient(to bottom, #dceecf, #b7d5a5);
  font-size: 10px;
  font-weight: 700;
  color: #26451f;
}

.footer {
  width: 100%;
  border-collapse: collapse;
  background: #d6e0f0;
}

.footer td {
  padding: 8px 10px;
  font-size: 11px;
  border-top: 1px solid #a2b5d4;
}

.footer .right {
  text-align: right;
}

@media (max-width: 820px) {
  body {
    padding: 0;
  }

  .shell {
    width: 100%;
    border-left: none;
    border-right: none;
    box-shadow: none;
  }

  .layout,
  .layout tr,
  .layout td {
    display: block;
    width: 100%;
  }

  .masthead td,
  .mast-meta,
  .brand-cell {
    display: block;
    width: 100%;
    text-align: left;
  }

  .nav-table,
  .nav-table tr {
    display: block;
  }

  .nav-table td {
    display: block;
    border-right: none;
    border-bottom: 1px solid #7a95bd;
  }

  .hero-grid {
    grid-template-columns: 1fr;
  }

  .footer td {
    display: block;
    text-align: left !important;
  }
}