/* Matching presentation for both existing model/attachment viewers.
   Canvas positioning, renderer and model controls are unchanged. */
body { background: #121912; color: #f3f5ed; font: 14px "Segoe UI", Arial, sans-serif; color-scheme: dark; }
#bg { background: radial-gradient(ellipse at 45% 40%, #5f6c58, #283125 74%); }
header { max-width: min(440px, calc(100vw - 40px)); padding: 16px 20px; border: 1px solid #cbdcbd2b; background: #141d14eb; border-radius: 12px; }
.roadlifeViewerLogo { position: relative; width: 136px; aspect-ratio: 1.65; overflow: hidden; margin-bottom: 12px; }
.roadlifeViewerLogo img { width: 100%; height: auto; position: absolute; top: 50%; left: 0; transform: translateY(-49%); }
header strong { font-size: 21px; font-weight: 700; }
header p { color: #b9c5b3; font-size: 12px; line-height: 1.6; }
a { color: #a2e47c; text-underline-offset: 3px; }
.panel { background: #182218f5; border: 1px solid #cbdcbd2b; border-radius: 12px; box-shadow: 0 15px 50px #0005; gap: 10px; padding: 16px; }
button, select { font-family: inherit; font-size: 12px; padding: 10px; border-radius: 7px; border: 1px solid #cbdcbd36; background: #273527; color: #f3f5ed; }
button:hover { background: #344631; border-color: #99e66d; }
select { background: #111b11; }
label { color: #bdc8b6; font-size: 12px; }
input[type="range"] { accent-color: #99e66d; }
input[type="color"] { border: 1px solid #63735a; background: #172116; border-radius: 5px; }
button:focus-visible, select:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid #99e66d; outline-offset: 3px; }
@media (max-width: 700px) {
  header { left: 12px; top: 12px; padding: 12px 15px; }
  .roadlifeViewerLogo { width: 100px; margin-bottom: 6px; }
  header strong { font-size: 17px; }
  .panel { bottom: 10px; padding: 11px; gap: 7px; max-height: 38vh; overflow-y: auto; }
}