/* The polish pass, loaded after each page's own styles (site.css, and MCEqual Ultra's inline
   sheet). Quiet chrome: flat panels with hairlines, one solid blue key, lighter headings.
   The screenshots carry the color; corner screws stay only on their frames, like a head
   unit's bezel. */
:root {
  --bg: #0a0e16;
  --bg-2: #0d121c;
  --panel: #111724;
  --panel-hi: #182030;
  --edge: rgba(233, 241, 251, .1);
  --fg: #eaf0f8;
  --muted: #a3adbd;
  --well: #070a11;
  --header: rgba(10, 14, 22, .94);
  --ease: cubic-bezier(.2, .7, .2, 1);
}
h1, h2, h3 { font-weight: 600; }
h3 { font-weight: 600; }
.price, .line.total { font-weight: 600; }
.site-nav a, nav.links a { font-weight: 500; }
legend, .field label, .notify label, th, .countries label { font-weight: 500; }
strong, b { font-weight: 600; }

/* Panels: one flat surface and a hairline */
.plate { background: var(--panel); border-radius: 16px; box-shadow: none; }
.plate:not(.screen):not(.row-shot)::before, .plate:not(.screen):not(.row-shot)::after { display: none; }
.screen { padding: 20px 8px 8px; }
.screen img, #zoomScroll, dialog#zoom img { border-radius: 8px; }
.thumbs button { border-radius: 8px; }

/* Keys: one solid blue for the main action, a raised neutral for the rest */
.key {
  min-height: 44px; padding: 12px 20px; border-radius: 10px; font-weight: 600;
  background: var(--accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: background-color .15s var(--ease), transform .1s var(--ease);
}
.key:hover { background: var(--accent-hi); }
.key:active { transform: scale(.98); }
.key-quiet { background: var(--panel-hi); color: var(--fg); border: 1px solid var(--edge); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.key-quiet:hover { background: #202a3d; }
.soon { min-height: 44px; padding: 12px 20px; border-radius: 10px; border-color: var(--edge); color: var(--fg); font-weight: 500; letter-spacing: 0; background: transparent; box-shadow: none; }
input, select { border-radius: 10px; box-shadow: none; }
.notify-done { border-color: var(--edge); border-radius: 12px; background: var(--panel); }
.drive-tag { font-weight: 500; letter-spacing: 0; color: var(--muted); }
.thumbs img { transition: none; }
.thumbs button:hover img { transform: none; }
.thumbs button { transition: border-color .15s var(--ease); }
@media (max-width: 640px) { .screen { padding: 16px 0 0; } .screen img { border-radius: 0; } }
@media (prefers-reduced-motion: reduce) { .key, .thumbs button { transition: none; } }