:root {
  --bg: #999;
  --fg: #222;
  --muted: #555;
  --border: #7c7c7c;
  --card: #a8a8a8;
  --accent: #333;
  --error: #8b2e2e;
  --ok: #2f5e2a;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg);
             font-family: "Inter", system-ui, -apple-system, "Segoe UI",
                          Roboto, sans-serif;
             min-height: 100vh; line-height: 1.5; }
a { color: var(--accent); }
a:hover { color: #000; }

/* ---- Header ---- */
.site-header { padding: 16px 28px; border-bottom: 1px solid var(--border);
               display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { font-size: 18px; font-weight: 700; color: #222; text-decoration: none;
         letter-spacing: 0.01em; line-height: 1.1; }
.brand small { display: block; font-size: 10px; font-weight: 500;
               letter-spacing: 0.14em; color: #555; text-transform: uppercase;
               margin-top: 3px; }
.site-header nav a,
.site-header nav .linklike {
    font-size: 13px; font-weight: 500; letter-spacing: 0.02em;
    text-transform: none; text-decoration: none; margin-left: 18px; color: #333;
    background: none; border: 0; padding: 0; cursor: pointer;
    font-family: inherit;
}
.site-header nav a:hover,
.site-header nav .linklike:hover { color: #000; }

/* ---- Layout ---- */
main { max-width: 960px; margin: 0 auto; padding: 40px 24px; }
h1 { font-size: clamp(26px, 4.2vw, 40px); font-weight: 700;
     letter-spacing: -0.01em; margin: 0 0 12px; line-height: 1.15; }
h2 { font-size: 20px; font-weight: 600; letter-spacing: -0.005em;
     margin: 28px 0 10px; }
h3 { font-size: 16px; font-weight: 600; margin: 20px 0 8px; }
p  { color: var(--muted); margin: 8px 0; }
code { font-family: var(--mono); font-size: 0.92em; background: rgba(255,255,255,0.3);
       padding: 1px 5px; border-radius: 3px; }

/* ---- CTAs / buttons ---- */
.cta { display: inline-block; margin-top: 18px; padding: 10px 18px; border: 1px solid #333;
       text-decoration: none; color: #222; font-weight: 600; font-size: 13px;
       letter-spacing: 0.02em; background: transparent; cursor: pointer;
       border-radius: 3px;
       transition: background 150ms ease, color 150ms ease; }
.cta:hover { background: #333; color: #ddd; }
.cta.secondary { background: transparent; color: #333; }

/* ---- Forms ---- */
form.stacked { display: flex; flex-direction: column; gap: 14px;
               background: var(--card); border: 1px solid var(--border);
               padding: 22px; border-radius: 4px; }
form.stacked label { font-size: 12px; font-weight: 600; letter-spacing: 0.01em;
                     text-transform: none; color: #222;
                     display: flex; flex-direction: column; gap: 4px; }
form.stacked input, form.stacked textarea, form.stacked select {
  font-family: inherit; font-size: 14px; font-weight: 400;
  padding: 9px 12px; border: 1px solid #666; background: #eee;
  color: #222; border-radius: 3px;
}
form.stacked input:focus, form.stacked textarea:focus, form.stacked select:focus {
  outline: 2px solid #333; outline-offset: -1px;
}
form.stacked input[readonly] { background: #c2c2c2; color: #444; }
form.stacked textarea { min-height: 110px; resize: vertical; }
form.stacked .error-msg { color: var(--error); font-size: 12px; margin-top: 2px;
                          font-weight: 500; }
form.stacked .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { form.stacked .row { grid-template-columns: 1fr; } }

/* ---- Tables ---- */
.admin-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 14px; }
.admin-table th, .admin-table td { border-bottom: 1px solid var(--border);
                                   padding: 10px 12px; text-align: left; }
.admin-table th { font-size: 12px; font-weight: 600; letter-spacing: 0.03em;
                  text-transform: uppercase; color: #222; }
.admin-table tr:hover { background: rgba(255,255,255,0.08); }
.admin-table td a { font-weight: 600; color: #111; }

/* ---- State chip ---- */
.state-chip { font-size: 11px; font-weight: 600; letter-spacing: 0.03em;
              text-transform: uppercase; padding: 3px 9px;
              border: 1px solid #333; border-radius: 99px;
              display: inline-block; background: rgba(255,255,255,0.25); }
.state-SUBMITTED, .state-UNDER_REVIEW       { background: #c9b37a; }
.state-ACCEPTED, .state-AWAITING_PAYMENT,
.state-AWAITING_SHIPMENT                    { background: #a9b88e; }
.state-TESTING, .state-REPORT_DRAFT         { background: #7e9abf; color: #fff; border-color: #fff; }
.state-REPORT_DELIVERED, .state-PASSED      { background: #3f7034; color: #fff; border-color: #fff; }
.state-FAILED, .state-CANCELLED             { background: #7a3030; color: #fff; border-color: #fff; }
.state-RETEST_SCHEDULED                     { background: #d48c3f; }
.state-CLOSED                               { background: #555; color: #fff; border-color: #fff; }

/* ---- Timeline ---- */
.timeline { border-left: 2px solid #555; margin-left: 10px; padding-left: 18px; margin-top: 12px; }
.timeline-item { margin-bottom: 14px; position: relative; }
.timeline-item:before { content: ""; position: absolute; left: -24px; top: 6px;
                        width: 10px; height: 10px; border-radius: 50%; background: #333; }
.timeline-item time { font-size: 12px; font-weight: 600; color: #333;
                      letter-spacing: 0.01em; }
.timeline-item .note { color: var(--muted); margin-top: 2px; font-size: 14px; }

/* ---- Key/value list ---- */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px;
      margin: 12px 0 18px; font-size: 14px; }
.kv dt { font-size: 12px; font-weight: 600; color: #222;
         letter-spacing: 0.01em; text-transform: uppercase; padding-top: 2px; }
.kv dd { margin: 0; color: #333; white-space: pre-wrap; }

/* ---- Pay / shipping boxes ---- */
.pay-box { background: var(--card); border: 1px solid var(--border);
           padding: 20px 24px; margin: 20px 0; border-radius: 4px; }

.equipment-table { width: 100%; border-collapse: collapse; font-size: 13px;
                   background: #b2b2b2; border: 1px solid var(--border);
                   border-radius: 3px; }
.equipment-table th { font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
                      text-transform: uppercase; padding: 8px 10px;
                      border-bottom: 1px solid #666; text-align: left; color: #222; }
.equipment-table td { padding: 4px 8px; border-bottom: 1px solid #8e8e8e; }
.equipment-table td:last-child { border-bottom: 1px solid #8e8e8e; }
.equipment-table input[type="text"] { width: 100%; padding: 6px 8px; font-size: 13px;
                                      background: #eee; border: 1px solid #666; border-radius: 2px; }
.equipment-table input[type="text"][readonly] { background: #c2c2c2; color: #444; }
.equipment-table input[type="checkbox"] { transform: scale(1.2); }

footer { text-align: center; padding: 24px; color: #555; font-size: 12px;
         border-top: 1px solid var(--border); margin-top: 60px; }