/* ========================================================
   MOT Status Checker v2 — Frontend Styles
   ======================================================== */

/* ── CSS variables ─────────────────────────────────────── */
.msc-wrap {
  --msc-p:       #0057FF;   /* primary — injected inline */
  --msc-a:       #FF6B00;   /* accent  — injected inline */
  --msc-p-dk:    color-mix(in srgb, var(--msc-p) 80%, black);
  --msc-p-lt:    color-mix(in srgb, var(--msc-p) 12%, white);
  --msc-green:   #00A651;
  --msc-green-lt:#E6F7EE;
  --msc-red:     #E8002D;
  --msc-red-lt:  #FFE8ED;
  --msc-amber:   #F59E0B;
  --msc-amber-lt:#FFFBEB;
  --msc-bg:      #F0F4FF;
  --msc-bg2:     #F8F9FF;
  --msc-text:    #0D1B3E;
  --msc-text2:   #3D5280;
  --msc-text3:   #7B90B8;
  --msc-border:  #D8E3FF;
  --msc-white:   #FFFFFF;
  --msc-r:       16px;
  --msc-rsm:     10px;
  --msc-shadow:  0 4px 24px rgba(0,87,255,0.10);
  --msc-shadow-lg:0 12px 48px rgba(0,87,255,0.16);
  --msc-font:    'Nunito','Segoe UI',system-ui,sans-serif;
  --msc-font-h:  'Poppins','Nunito',system-ui,sans-serif;

  font-family: var(--msc-font);
  color: var(--msc-text);
  max-width: 860px;
  margin: 0 auto;
  box-sizing: border-box;
}
.msc-wrap *,.msc-wrap *::before,.msc-wrap *::after { box-sizing: border-box; }

/* ── Search card ───────────────────────────────────────── */
.msc-card-search {
  background: linear-gradient(135deg, var(--msc-p) 0%, var(--msc-p-dk, #0040CC) 100%);
  border-radius: var(--msc-r);
  padding: 2rem 1.75rem 1.5rem;
  margin-bottom: 1.25rem;
  position: relative;
  overflow: hidden;
}
.msc-card-search::before {
  content:'';
  position:absolute;inset:0;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events:none;
}

.msc-search-header { display:flex;align-items:flex-start;gap:0.875rem;margin-bottom:1.5rem;position:relative; }
.msc-search-icon   { font-size:1.8rem;flex-shrink:0;margin-top:2px; }
.msc-search-title  { font-family:var(--msc-font-h);font-weight:800;font-size:clamp(1.1rem,3vw,1.55rem);color:#fff;margin:0 0 0.3rem;line-height:1.2; }
.msc-search-sub    { color:rgba(255,255,255,0.78);font-size:0.875rem;margin:0;line-height:1.5; }

/* ── Input row ─────────────────────────────────────────── */
.msc-input-row {
  display: flex;
  gap: 0.75rem;
  align-items: stretch;
  margin-bottom: 0.875rem;
}

/* The plate wrap is a flex row: [GB badge] [input text area] */
.msc-plate-wrap {
  flex: 1;
  display: flex;
  align-items: stretch;
  background: #FEFDE8;
  border: 3px solid #F59E0B;
  border-radius: var(--msc-rsm);
  overflow: hidden;           /* clips children to the rounded corners */
  transition: border-color 0.2s, box-shadow 0.2s;
  min-width: 0;
}
.msc-plate-wrap:focus-within {
  border-color: var(--msc-p);
  box-shadow: 0 0 0 4px rgba(0,87,255,0.15);
}

/* Blue/red GB badge — sits flush inside the border */
.msc-plate-flag {
  flex-shrink: 0;
  width: 52px;
  background: linear-gradient(180deg, #003399 0%, #CC0000 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  /* no border-radius needed — parent clips it */
}
.msc-flag-stars { font-size: 7px; color: #FFD700; letter-spacing: 1.5px; line-height: 1; }
.msc-flag-gb    { font-weight: 900; font-size: 0.72rem; color: #fff; letter-spacing: 1px; line-height: 1; }

/* The actual text input — fills the remaining space */
.msc-reg-input {
  flex: 1;
  height: 64px;
  background: transparent;
  border: none;
  outline: none;
  padding: 0 1rem;
  font-family: var(--msc-font-h);
  font-weight: 800;
  font-size: 1.6rem;
  color: #1a1a1a;
  letter-spacing: 5px;
  text-transform: uppercase;
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
}
.msc-reg-input::placeholder { color: #ccc; letter-spacing: 3px; font-size: 1.3rem; }
.msc-reg-input.msc-shake    { animation: mscShake 0.4s ease; }
@keyframes mscShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }

.msc-check-btn {
  height:64px;padding:0 1.5rem;flex-shrink:0;
  background:linear-gradient(135deg,var(--msc-a),#FF8C00);
  border:none;border-radius:var(--msc-rsm);
  font-family:var(--msc-font-h);font-weight:800;font-size:0.95rem;color:#fff;
  cursor:pointer;display:flex;align-items:center;gap:8px;white-space:nowrap;
  transition:all 0.2s;box-shadow:0 6px 20px rgba(255,107,0,0.35);
}
.msc-check-btn svg { width:20px;height:20px;flex-shrink:0; }
.msc-check-btn:hover { transform:translateY(-2px);box-shadow:0 10px 28px rgba(255,107,0,0.45); }
.msc-check-btn:active { transform:translateY(0); }
.msc-check-btn:disabled { opacity:0.6;cursor:not-allowed;transform:none; }

/* ── Pills ─────────────────────────────────────────────── */
.msc-pills { display:flex;flex-wrap:wrap;gap:8px;position:relative; }
.msc-pill  {
  background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.22);
  color:rgba(255,255,255,0.9);font-size:0.74rem;font-weight:700;
  padding:5px 12px;border-radius:100px;white-space:nowrap;
}

/* ── Loader ────────────────────────────────────────────── */
.msc-loader {
  background:var(--msc-white);border:2px solid var(--msc-border);
  border-radius:var(--msc-r);padding:2.5rem 2rem;margin-bottom:1.25rem;
  display:flex;align-items:center;gap:1.5rem;justify-content:center;flex-direction:column;
}
.msc-spinner-wrap { display:flex;justify-content:center; }
.msc-spinner {
  width:52px;height:52px;
  border:4px solid var(--msc-p-lt,#E8F0FF);
  border-top-color:var(--msc-p);
  border-radius:50%;animation:mscSpin 0.7s linear infinite;
}
@keyframes mscSpin{to{transform:rotate(360deg)}}

.msc-loader-body { text-align:center;width:100%;max-width:380px; }
.msc-loader-msg  { font-weight:700;color:var(--msc-text2);font-size:0.9rem;margin:0 0 1rem; }

/* ── Timer ─────────────────────────────────────────────── */
.msc-timer { display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:0.875rem; }
.msc-timer-bar-wrap { flex:1;max-width:200px;height:8px;background:var(--msc-border);border-radius:100px;overflow:hidden; }
.msc-timer-bar {
  height:100%;width:100%;
  background:linear-gradient(90deg,var(--msc-p),var(--msc-a));
  border-radius:100px;transform-origin:left;transition:transform 1s linear;
}
.msc-timer-num { font-family:var(--msc-font-h);font-weight:900;font-size:1.5rem;color:var(--msc-p);min-width:1.8ch;text-align:right; }
.msc-timer-lbl { font-size:0.75rem;color:var(--msc-text3);font-weight:600; }

/* ── Dots ──────────────────────────────────────────────── */
.msc-dots { display:flex;gap:6px;justify-content:center; }
.msc-dots span {
  display:block;width:8px;height:8px;border-radius:50%;
  background:var(--msc-p);animation:mscBounce 1.2s infinite;
}
.msc-dots span:nth-child(2){animation-delay:0.2s}
.msc-dots span:nth-child(3){animation-delay:0.4s}
@keyframes mscBounce{0%,80%,100%{transform:scale(1);opacity:1}40%{transform:scale(1.5);opacity:0.7}}

/* ── Error box ─────────────────────────────────────────── */
.msc-error-box {
  background:var(--msc-red-lt);border:2px solid #F9A8B6;border-radius:var(--msc-r);
  padding:1.25rem 1.5rem;margin-bottom:1.25rem;
  display:flex;gap:1rem;align-items:flex-start;
}
.msc-error-icon  { font-size:1.6rem;flex-shrink:0; }
.msc-error-title { font-family:var(--msc-font-h);font-weight:700;color:#8B0018;display:block;margin-bottom:0.3rem; }
.msc-error-msg   { font-size:0.875rem;color:#7A1020;margin:0;line-height:1.6; }

/* ── Results slide-in ──────────────────────────────────── */
.msc-results { animation:mscSlide 0.4s ease; }
@keyframes mscSlide{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ── Status Banner ─────────────────────────────────────── */
.msc-status-banner {
  border-radius:var(--msc-r);padding:1.1rem 1.5rem;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;
  margin-bottom:1.25rem;
}
.msc-status-banner.is-valid   { background:var(--msc-green-lt);border:2px solid #A7DFC0; }
.msc-status-banner.is-invalid { background:var(--msc-red-lt);  border:2px solid #F9A8B6; }
.msc-status-banner.is-unknown { background:var(--msc-amber-lt);border:2px solid #FDE68A; }

.msc-status-left { display:flex;align-items:center;gap:1rem; }
.msc-status-pulse {
  display:block;width:14px;height:14px;border-radius:50%;flex-shrink:0;
  animation:mscPulse 2s infinite;
}
.is-valid   .msc-status-pulse { background:var(--msc-green); }
.is-invalid .msc-status-pulse { background:var(--msc-red); }
.is-unknown .msc-status-pulse { background:var(--msc-amber); }
@keyframes mscPulse{0%,100%{opacity:1}50%{opacity:0.35}}

.msc-status-headline {
  display:block;font-family:var(--msc-font-h);font-weight:800;font-size:1rem;line-height:1.2;
}
.is-valid   .msc-status-headline { color:#006B34; }
.is-invalid .msc-status-headline { color:#8B0018; }
.is-unknown .msc-status-headline { color:#92500A; }

.msc-status-meta { display:block;font-size:0.78rem;color:var(--msc-text2);margin-top:3px; }

.msc-reg-plate {
  background:#FEFDE8;border:2px solid #F59E0B;border-radius:8px;
  padding:5px 14px;font-family:var(--msc-font-h);font-weight:800;font-size:1rem;
  color:#1a1a1a;letter-spacing:3px;
}

/* ── Result cards ──────────────────────────────────────── */
.msc-result-card {
  background:var(--msc-white);border:2px solid var(--msc-border);
  border-radius:var(--msc-r);padding:1.35rem 1.5rem;
  margin-bottom:1.25rem;box-shadow:var(--msc-shadow);
}
.msc-result-card-head {
  display:flex;align-items:center;gap:0.75rem;
  padding-bottom:0.875rem;margin-bottom:1.1rem;
  border-bottom:2px solid var(--msc-border);
}
.msc-result-card-head span:first-child { font-size:1.2rem; }
.msc-result-card-head h3 {
  font-family:var(--msc-font-h);font-weight:800;font-size:0.95rem;
  color:var(--msc-text);margin:0;flex:1;
}
.msc-history-badge {
  background:var(--msc-p-lt,#E8F0FF);color:var(--msc-p);
  font-size:0.7rem;font-weight:800;padding:3px 10px;border-radius:100px;
}

/* ── Data grid ─────────────────────────────────────────── */
.msc-grid {
  display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:0.7rem;
}
.msc-field-box {
  background:var(--msc-bg2);border:1px solid var(--msc-border);
  border-radius:var(--msc-rsm);padding:0.8rem 0.875rem;
}
.msc-field-box label {
  display:block;font-size:0.65rem;font-weight:800;
  color:var(--msc-text3);text-transform:uppercase;letter-spacing:0.8px;margin-bottom:4px;
}
.msc-field-box span { font-weight:800;font-size:0.88rem;color:var(--msc-text);display:block;word-break:break-word; }
.msc-field-box span.clr-green { color:var(--msc-green); }
.msc-field-box span.clr-red   { color:var(--msc-red);   }
.msc-field-box span.clr-amber { color:var(--msc-amber); }

/* ── History accordion ─────────────────────────────────── */
.msc-history { display:flex;flex-direction:column;gap:0.625rem; }

.msc-test-entry {
  border:2px solid var(--msc-border);
  border-radius:var(--msc-rsm);overflow:hidden;
  transition:border-color 0.2s;
}
.msc-test-entry.is-open     { border-color:var(--msc-p);box-shadow:0 4px 18px rgba(0,87,255,0.1); }
.msc-test-entry.te-fail.is-open { border-color:var(--msc-red); }

/* Collapsed row */
.msc-test-row {
  display:flex;align-items:center;gap:0.75rem;padding:0.9rem 1rem;
  cursor:pointer;user-select:none;transition:background 0.15s;
}
.msc-test-row:hover { background:var(--msc-bg); }

.msc-test-badge {
  font-family:var(--msc-font-h);font-weight:800;font-size:0.72rem;
  letter-spacing:0.8px;text-transform:uppercase;
  padding:5px 13px;border-radius:100px;flex-shrink:0;
}
.msc-test-badge.pass { background:var(--msc-green-lt);color:var(--msc-green);border:1.5px solid #A7DFC0; }
.msc-test-badge.fail { background:var(--msc-red-lt);  color:var(--msc-red);  border:1.5px solid #F9A8B6; }

.msc-test-info  { flex:1;min-width:0; }
.msc-test-date  { font-weight:800;font-size:0.875rem;color:var(--msc-text);display:block; }
.msc-test-place { font-size:0.74rem;color:var(--msc-text3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.msc-addr-sep   { opacity:0.5;margin:0 2px; }

/* Right side of collapsed row */
.msc-test-row-right { display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0; }
.msc-test-miles { font-family:var(--msc-font-h);font-weight:700;font-size:0.8rem;color:var(--msc-p); }

/* Inline summary pills (visible when collapsed) */
.msc-row-pill {
  font-size:0.65rem;font-weight:800;padding:2px 8px;border-radius:100px;white-space:nowrap;
}
.pill-fail { background:var(--msc-red-lt);color:var(--msc-red);border:1px solid #F9A8B6; }
.pill-adv  { background:var(--msc-amber-lt);color:#92500A;border:1px solid #FDE68A; }

.msc-chevron { width:18px;height:18px;color:var(--msc-text3);flex-shrink:0;transition:transform 0.3s; }
.msc-test-entry.is-open .msc-chevron { transform:rotate(180deg); }

/* ── Expanded detail panel ─────────────────────────────── */
.msc-test-detail {
  max-height:0;overflow:hidden;
  transition:max-height 0.5s cubic-bezier(0.4,0,0.2,1);
}
.msc-test-entry.is-open .msc-test-detail { max-height:9999px; }
.msc-test-detail-inner { padding:1rem;border-top:1px solid var(--msc-border); }

/* 3-column detail grid (test date, expiry, test no., mileage, station, result) */
.msc-detail-grid {
  display:grid;grid-template-columns:repeat(3,1fr);gap:0.5rem;margin-bottom:1rem;
}
.msc-detail-field { background:var(--msc-bg);border-radius:8px;padding:0.65rem 0.75rem; }
.msc-detail-field label {
  display:block;font-size:0.62rem;font-weight:800;
  color:var(--msc-text3);text-transform:uppercase;letter-spacing:0.6px;margin-bottom:4px;
}
.msc-detail-field span { font-weight:700;font-size:0.83rem;color:var(--msc-text); }
.msc-detail-field span.clr-green { color:var(--msc-green); }
.msc-detail-field span.clr-red   { color:var(--msc-red); }
.msc-station-addr { display:block;font-size:0.72rem;color:var(--msc-text3);font-weight:600;margin-top:2px; }

/* ── Items / failures section ──────────────────────────── */
.msc-items-wrap { display:flex;flex-direction:column;gap:0;margin-top:0.25rem; }

.msc-items-section-hd {
  display:flex;align-items:center;gap:0.4rem;flex-wrap:wrap;
  font-size:0.78rem;font-weight:800;color:var(--msc-text2);
  margin-bottom:0.6rem;padding-bottom:0.5rem;
  border-bottom:2px solid var(--msc-border);
}
.msc-count-fail  { color:var(--msc-red);  }
.msc-count-adv   { color:#92500A;         }
.msc-dot-sep     { color:var(--msc-text3);margin:0 0.1rem; }

/* Individual item card */
.msc-item-card {
  display:flex;flex-direction:column;gap:0.35rem;
  border-radius:10px;padding:0.8rem 0.9rem;
  margin-bottom:0.5rem;border-left:4px solid transparent;
}
.msc-item-card:last-child { margin-bottom:0; }

.item-card-fail   { background:#fff0f3;border-left-color:var(--msc-red);  border:1.5px solid #F9A8B6;border-left-width:4px; }
.item-card-adv    { background:#fffbeb;border-left-color:#F59E0B;         border:1.5px solid #FDE68A;border-left-width:4px; }
.item-card-danger { background:#1a0008;border-left-color:#800;            border:1.5px solid #500;  border-left-width:4px; }

.msc-item-card-head { margin-bottom:0.4rem; }

.msc-item-chip {
  display:inline-block;
  font-size:0.68rem;font-weight:800;padding:3px 10px;
  border-radius:100px;white-space:nowrap;
}
.chip-advisory { background:var(--msc-amber-lt);color:#92500A;border:1px solid #FDE68A; }
.chip-fail     { background:var(--msc-red-lt);  color:#8B0018;border:1px solid #F9A8B6; }
.chip-danger   { background:#500;color:#fff; }
.chip-prs      { background:#EEF2FF;color:#4338CA;border:1px solid #C7D2FE; }

.msc-item-reason {
  font-weight:700;font-size:0.9rem;line-height:1.5;
  color:#3d0010;margin:0;
}
.item-card-adv .msc-item-reason    { color:#78350f; }
.item-card-danger .msc-item-reason { color:#fff; }

.msc-item-comment {
  font-size:0.78rem;font-weight:500;color:#6b2434;
  margin:0.15rem 0 0;line-height:1.45;font-style:italic;
}
.item-card-adv .msc-item-comment    { color:#92500A; }
.item-card-danger .msc-item-comment { color:#ffbbcc; }

/* Clean pass banner */
.msc-clean-pass {
  display:flex;align-items:center;gap:0.5rem;
  background:var(--msc-green-lt);border:1.5px solid #A7DFC0;
  border-radius:8px;padding:0.75rem 1rem;
  font-size:0.875rem;font-weight:700;color:#006B34;
}

.msc-no-items {
  background:var(--msc-green-lt);border:1.5px solid #A7DFC0;
  border-radius:8px;padding:0.75rem 1rem;
  font-size:0.83rem;color:#006B34;font-weight:700;
}

/* ── Result footer ─────────────────────────────────────── */
.msc-result-footer { text-align:center;padding:0.25rem 0 0.5rem; }
.msc-new-check {
  background:var(--msc-p-lt,#E8F0FF);color:var(--msc-p);
  border:2px solid var(--msc-p);border-radius:var(--msc-rsm);
  padding:0.7rem 1.75rem;font-family:var(--msc-font-h);font-weight:800;font-size:0.875rem;
  cursor:pointer;transition:all 0.2s;
}
.msc-new-check:hover { background:var(--msc-p);color:#fff; }

.msc-dvsa-note {
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:0.7rem;color:var(--msc-text3);margin-top:0.75rem;
}
.msc-dvsa-note svg { width:13px;height:13px;color:var(--msc-green);flex-shrink:0; }

/* ── Responsive ────────────────────────────────────────── */
@media(max-width:700px){
  .msc-detail-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:600px){
  .msc-card-search    { padding:1.35rem 1rem 1.25rem; }
  .msc-input-row      { flex-direction:column; }
  .msc-check-btn      { width:100%;justify-content:center;height:56px; }
  .msc-reg-input      { height:56px;font-size:1.3rem; }
  .msc-plate-wrap     { height:56px; }
  .msc-grid           { grid-template-columns:1fr 1fr; }
  .msc-detail-grid    { grid-template-columns:1fr 1fr; }
  .msc-status-banner  { flex-direction:column;align-items:flex-start; }
  .msc-search-title   { font-size:1.1rem; }
  .msc-test-row-right { display:none; }
}
@media(max-width:420px){
  .msc-grid        { grid-template-columns:1fr; }
  .msc-detail-grid { grid-template-columns:1fr; }
}

/* ── Download toolbar ──────────────────────────────────── */
.msc-download-bar {
  display:flex;align-items:center;flex-wrap:wrap;gap:0.625rem;
  background:var(--msc-bg);border:2px solid var(--msc-border);
  border-radius:var(--msc-r);padding:1rem 1.25rem;
  margin-bottom:1rem;
}
.msc-download-label {
  font-family:var(--msc-font-h);font-weight:800;font-size:0.82rem;
  color:var(--msc-text2);white-space:nowrap;margin-right:0.25rem;
}
.msc-dl-btn {
  display:inline-flex;align-items:center;gap:7px;
  padding:0.55rem 1rem;border-radius:8px;border:2px solid transparent;
  font-family:var(--msc-font-h);font-weight:800;font-size:0.8rem;
  cursor:pointer;transition:all 0.2s;white-space:nowrap;flex-shrink:0;
}
.msc-dl-btn svg { width:15px;height:15px;flex-shrink:0; }

.msc-dl-pdf {
  background:#E8002D;color:#fff;border-color:#E8002D;
  box-shadow:0 3px 12px rgba(232,0,45,0.25);
}
.msc-dl-pdf:hover { background:#C0001F;border-color:#C0001F;transform:translateY(-1px); }

.msc-dl-img,.msc-dl-jpg {
  background:var(--msc-p);color:#fff;border-color:var(--msc-p);
  box-shadow:0 3px 12px rgba(0,87,255,0.22);
}
.msc-dl-img:hover,.msc-dl-jpg:hover { background:var(--msc-p-dk,#0040CC);transform:translateY(-1px); }

.msc-dl-btn:active { transform:translateY(0) !important; }
.msc-dl-btn:disabled { opacity:0.55;cursor:not-allowed;transform:none !important; }

.msc-dl-status {
  font-size:0.78rem;font-weight:700;color:var(--msc-text3);
  margin-left:auto;display:none;
}
.msc-dl-status.visible { display:block; }
.msc-dl-status.ok  { color:var(--msc-green); }
.msc-dl-status.err { color:var(--msc-red); }

/* ── PDF-only print region (hidden in page, used for export) ─ */
.msc-pdf-region {
  position:fixed;top:0;left:-9999px;
  width:900px;background:#fff;padding:0;
  font-family:'Segoe UI',sans-serif;z-index:-1;
}

/* ── Download toolbar ──────────────────────────────────── */
.msc-download-bar {
  background: var(--msc-white);
  border: 2px solid var(--msc-border);
  border-radius: var(--msc-r);
  padding: 1.1rem 1.35rem;
  margin-bottom: 1.1rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.875rem;
  box-shadow: var(--msc-shadow);
}

.msc-dl-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--msc-font-h);
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--msc-text2);
  white-space: nowrap;
}
.msc-dl-label svg { width:16px;height:16px;flex-shrink:0;color:var(--msc-p); }

.msc-dl-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex: 1;
}

.msc-dl-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0.55rem 1.1rem;
  border-radius: 8px;
  border: 2px solid transparent;
  font-family: var(--msc-font-h);
  font-weight: 800;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.18s;
  white-space: nowrap;
  flex-shrink: 0;
}
.msc-dl-btn svg { width:15px;height:15px;flex-shrink:0; }

/* PDF — red */
.msc-dl-pdf {
  background: #E8002D;
  color: #fff;
  border-color: #E8002D;
  box-shadow: 0 3px 12px rgba(232,0,45,0.25);
}
.msc-dl-pdf:hover { background:#C0001F;border-color:#C0001F;transform:translateY(-2px);box-shadow:0 6px 18px rgba(232,0,45,0.35); }

/* PNG — blue primary */
.msc-dl-img {
  background: var(--msc-p);
  color: #fff;
  border-color: var(--msc-p);
  box-shadow: 0 3px 12px rgba(0,87,255,0.22);
}
.msc-dl-img:hover { background:#0040CC;border-color:#0040CC;transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,87,255,0.32); }

/* JPG — accent orange */
.msc-dl-jpg {
  background: var(--msc-a);
  color: #fff;
  border-color: var(--msc-a);
  box-shadow: 0 3px 12px rgba(255,107,0,0.25);
}
.msc-dl-jpg:hover { background:#DD5500;border-color:#DD5500;transform:translateY(-2px);box-shadow:0 6px 18px rgba(255,107,0,0.35); }

.msc-dl-btn:active { transform:translateY(0) !important; }
.msc-dl-btn:disabled { opacity:0.55;cursor:not-allowed;transform:none !important;box-shadow:none !important; }

/* Status indicator */
.msc-dl-status {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--msc-text3);
  margin-left: auto;
  display: none;
}
.msc-dl-status.visible { display: block; }
.msc-dl-status.ok  { color: var(--msc-green); }
.msc-dl-status.err { color: var(--msc-red); }

@media(max-width:600px){
  .msc-download-bar { flex-direction:column;align-items:flex-start; }
  .msc-dl-buttons { width:100%; }
  .msc-dl-btn { flex:1;justify-content:center;min-width:80px; }
  .msc-dl-status { margin-left:0; }
}

/* ── Plate error shake ─────────────────────────────────── */
.msc-plate-wrap.msc-plate-err {
  border-color: #E8002D !important;
  box-shadow: 0 0 0 4px rgba(232,0,45,0.12) !important;
  animation: mscShake 0.4s ease;
}