/* Pappas corporate design, taken from pappas.at (CSS variables and computed styles) */
  @font-face { font-family: "ProximaNova-Regular"; src: url("/api/font?f=Regular") format("woff2"); font-display: swap; }
  @font-face { font-family: "ProximaNova-Bold"; src: url("/api/font?f=Bold") format("woff2"); font-display: swap; }
  :root {
    --primary: #263676;
    --primary-dark: #172047;
    --primary-light: #515E91;
    --secondary: #EF7C00;
    --secondary-dark: #BF6300;
    --info: #91A6FF;
    --dark: #1A1A1A;
    --dark-grey: #484848;
    --grey: #767676;
    --muted: #6D757E;
    --light: #E8E8E8;
    --light-grey: #C0C2CB;
    --bg: #F6F6F6;
    --white: #FFFFFF;
    --success: #388760;
    --danger: #D74141;
    --font: "ProximaNova-Regular", "Montserrat", sans-serif;
    --font-bold: "ProximaNova-Bold", "Montserrat", sans-serif;
    --r: 5px;
    --shadow: 20px 20px 80px 0 rgba(0, 0, 0, .1);
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; }
  body {
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.45;
    color: var(--dark);
    background: var(--bg);
  }
  b, strong, h1, h2, h3, h4 { font-family: var(--font-bold); font-weight: 400; }
  button, input, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; }
  :focus-visible { outline: 3px solid var(--info); outline-offset: 2px; }

  /* Header like pappas.at: black service bar, white brand bar */
  .servicebar { background: var(--dark); color: #fff; font-size: 13px; padding: 7px 24px; display: flex; gap: 20px; }
  .servicebar a { color: #fff; text-decoration: none; }
  .top {
    background: var(--bg);
    padding: 20px 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 36px;
    max-width: 1440px;
    margin: 0 auto;
  }
  .brand { display: flex; align-items: center; gap: 14px; color: var(--dark); text-decoration: none; }
  .brand svg { width: 150px; height: auto; display: block; }
  .brand span { font-family: var(--font-bold); font-size: 20px; padding-left: 14px; border-left: 2px solid var(--secondary); line-height: 1.1; }
  .linkform {
    flex: 1 1 420px; display: flex; gap: 6px; max-width: 760px;
    background: #fff; border-radius: 999px; padding: 6px; box-shadow: var(--shadow);
  }
  .linkform input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 8px 16px; outline-offset: 0; }
  .btn {
    border: 0;
    border-radius: 999px;
    padding: 12px 24px;
    font-family: var(--font-bold);
    font-size: 16px;
    background: var(--dark);
    color: #fff;
    white-space: nowrap;
  }
  .btn:hover { background: #000; }
  .btn[disabled] { opacity: .45; cursor: default; }
  .btn.cta { background: var(--secondary); color: #fff; }
  .btn.cta:hover { background: var(--secondary-dark); }
  .btn.ghost { background: #fff; color: var(--dark); box-shadow: 0 0 0 1px var(--light); }
  .btn.ghost:hover { box-shadow: 0 0 0 1px var(--dark); background: #fff; }
  .btn.small { padding: 7px 14px; font-size: 14px; }
  a.btn { text-decoration: none; display: inline-block; }

  main { max-width: 1440px; margin: 0 auto; padding: 8px 24px 40px; }
  .msg { padding: 12px 16px; border-radius: var(--r); margin-bottom: 16px; }
  .msg.err { background: #FBE9E9; color: var(--danger); }
  .msg.info { background: #fff; color: var(--primary); box-shadow: var(--shadow); }

  /* Browse */
  .browsebar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-bottom: 22px; }
  .browsebar h1 { margin: 0; font-size: 32px; line-height: 1.1; }
  .seg { display: inline-flex; background: #fff; border-radius: 999px; padding: 4px; gap: 2px; box-shadow: 0 0 0 1px var(--light); }
  .seg button { border: 0; background: transparent; padding: 7px 14px; border-radius: 999px; font-family: var(--font-bold); font-size: 14px; }
  .seg button[aria-pressed="true"] { background: var(--dark); color: #fff; }
  .filter { flex: 1 1 220px; max-width: 340px; border: 0; box-shadow: 0 0 0 1px var(--light); border-radius: 999px; padding: 9px 16px; background: #fff; }
  .count { color: var(--muted); }
  .filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin: -6px 0 24px; }
  .fsel { display: grid; gap: 3px; font-size: 12px; color: var(--muted); }
  .fsel span { padding-left: 14px; }
  .fsel select {
    appearance: none; -webkit-appearance: none; border: 0; border-radius: 999px; background: #fff;
    box-shadow: 0 0 0 1px var(--light); padding: 9px 34px 9px 14px; font-size: 14px; color: var(--dark); min-width: 150px; max-width: 220px;
    background-image: linear-gradient(45deg, transparent 50%, var(--dark) 50%), linear-gradient(135deg, var(--dark) 50%, transparent 50%);
    background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat;
  }
  .fsel.on select { box-shadow: 0 0 0 2px var(--secondary); font-family: var(--font-bold); }
  .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
  .car {
    text-align: left;
    border: 0;
    padding: 0;
    background: var(--white);
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
  }
  .car:hover .car-title { text-decoration: underline; text-underline-offset: 3px; }
  .car img { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--light); display: block; }
  .car-body { padding: 14px 16px 16px; display: grid; gap: 4px; }
  .car-title { font-family: var(--font-bold); font-size: 18px; }
  .car-meta { color: var(--muted); font-size: 14px; }
  .car-price { font-family: var(--font-bold); font-size: 22px; margin-top: 6px; }
  .facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--light); font-family: var(--font-bold); font-size: 14px; }
  .facts small { display: block; font-family: var(--font); color: var(--muted); font-size: 12px; }
  .slidetype { font-family: var(--font-bold); font-size: 13px; color: var(--secondary-dark); }
  .note { margin: 0; font-size: 13px; color: var(--muted); }
  .fields select { border: 1px solid var(--light-grey); border-radius: var(--r); padding: 8px 10px; background: #fff; font-size: 15px; color: var(--dark); }
  .people { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
  .person { display: flex; gap: 12px; align-items: center; text-align: left; padding: 10px 12px; border: 1px solid var(--light); border-radius: var(--r); background: #fff; }
  .person[aria-checked="true"] { border-color: var(--dark); box-shadow: inset 4px 0 0 var(--secondary); }
  .person b { display: block; font-size: 15px; }
  .person small { display: block; color: var(--muted); font-size: 13px; }
  .avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: var(--light); }
  .avatar--init, .avatar--loc { display: grid; place-items: center; font-family: var(--font-bold); color: var(--dark); }
  .avatar--loc { background: var(--dark); color: #fff; }
  .avatar--loc svg { width: 26px; height: auto; }
  .pager { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 32px 0 8px; }

  /* Studio */
  .studio { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; }
  .carhead { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: end; gap: 12px 24px; }
  .carhead .loc { color: var(--primary); font-family: var(--font-bold); font-size: 14px; margin: 14px 0 4px; }
  .carhead h1 { margin: 0; font-size: 40px; line-height: 1.05; }
  .carhead p { margin: 6px 0 0; color: var(--muted); }
  .carhead .spacer { flex: 1; }
  .carlinks { display: flex; gap: 8px; flex-wrap: wrap; }

  .panel { background: var(--white); border-radius: var(--r); padding: 22px; box-shadow: var(--shadow); }
  .panel + .panel { margin-top: 20px; }
  .panel h2 { margin: 0 0 4px; font-size: 20px; }
  .panel .hint { margin: 0 0 16px; color: var(--muted); font-size: 14px; }

  .slides { display: grid; gap: 12px; counter-reset: s; }
  .slide {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) auto;
    gap: 14px;
    padding: 12px;
    border: 1px solid var(--light);
    border-radius: var(--r);
    background: #fff;
  }
  .slide.active { border-color: var(--dark); box-shadow: inset 4px 0 0 var(--secondary); }
  .thumbbtn { border: 0; padding: 0; background: none; position: relative; align-self: start; }
  .thumbbtn img { width: 92px; height: 164px; object-fit: cover; border-radius: 4px; display: block; background: var(--light); }
  .thumbbtn .num {
    counter-increment: s;
    position: absolute; left: 6px; top: 6px;
    background: var(--dark); color: #fff; font-family: var(--font-bold); font-size: 13px;
    width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  }
  .thumbbtn .num::before { content: counter(s); }
  .fields { display: grid; gap: 8px; }
  .fields label { display: grid; gap: 3px; font-size: 13px; color: var(--muted); }
  .fields input, .fields textarea {
    border: 1px solid var(--light-grey); border-radius: var(--r); padding: 8px 10px; background: #fff; font-size: 15px; color: var(--dark);
  }
  .fields textarea { resize: vertical; min-height: 72px; line-height: 1.4; }
  .slide-tools { display: flex; flex-direction: column; gap: 6px; }
  .iconbtn {
    width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--light); background: #fff;
    display: grid; place-items: center; font-size: 15px; line-height: 1; color: var(--dark-grey);
  }
  .iconbtn:hover { border-color: var(--dark); color: var(--dark); }
  .iconbtn[disabled] { opacity: .35; cursor: default; }
  .imgpick { grid-column: 1 / -1; display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
  .imgpick button { border: 2px solid transparent; padding: 0; border-radius: 5px; background: none; flex: 0 0 auto; }
  .imgpick button[aria-pressed="true"] { border-color: var(--secondary); }
  .imgpick img { width: 88px; height: 66px; object-fit: cover; border-radius: 3px; display: block; }
  .addrow { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

  .chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .chip { border: 1px solid var(--light-grey); background: #fff; border-radius: 999px; padding: 5px 12px; font-size: 14px; }
  .chip:hover { border-color: var(--dark); }
  .chip.hl { border-color: var(--dark); font-family: var(--font-bold); }
  details.equip { margin-top: 14px; }
  details.equip summary { cursor: pointer; font-family: var(--font-bold); color: var(--primary); }
  details.equip h3 { margin: 16px 0 6px; font-size: 13px; color: var(--muted); }

  /* Preview column */
  .side { position: sticky; top: 16px; display: grid; gap: 18px; }
  .phone { width: 300px; margin: 0 auto; padding: 10px; background: var(--dark); border-radius: 34px; box-shadow: var(--shadow); }
  .phone canvas { width: 100%; aspect-ratio: 9/16; display: block; border-radius: 26px; background: var(--primary-dark); }
  .playbar { display: flex; justify-content: center; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; }
  .opts { display: grid; gap: 14px; }
  .opt { display: grid; gap: 6px; }
  .opt > span { font-size: 13px; font-family: var(--font-bold); color: var(--dark-grey); }
  .check { display: flex; gap: 8px; align-items: center; font-size: 15px; }
  .check input { accent-color: var(--secondary); width: 18px; height: 18px; }
  .exports { display: grid; gap: 10px; }
  .exports .btn { width: 100%; padding: 14px; }
  .progress { height: 6px; background: var(--light); border-radius: 3px; overflow: hidden; }
  .progress i { display: block; height: 100%; width: 0; background: var(--secondary); transition: width .1s linear; }
  .status { font-size: 14px; color: var(--muted); min-height: 20px; }
  .status.ok { color: var(--success); }
  .status.err { color: var(--danger); }
  .results { display: grid; gap: 8px; }
  .results a { color: var(--primary); font-family: var(--font-bold); }

  .empty { padding: 60px 20px; text-align: center; color: var(--muted); }
  .skeleton { background: linear-gradient(90deg, #ECECEC, #F4F4F4, #ECECEC); background-size: 200% 100%; animation: sh 1.4s infinite; }
  @keyframes sh { to { background-position: -200% 0; } }
  @media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

  /* Mode switch and vehicle video */
  .modebar { grid-column: 1 / -1; }
  .modebar .seg button { padding: 10px 20px; font-size: 15px; }
  .studio.film { grid-template-columns: minmax(0, 1fr) 500px; }
  .screen { background: var(--dark); padding: 8px; border-radius: 14px; box-shadow: var(--shadow); }
  .screen canvas { width: 100%; display: block; border-radius: 8px; background: var(--light); }
  .screen.portrait { width: 300px; margin: 0 auto; padding: 10px; border-radius: 34px; }
  .screen.portrait canvas { border-radius: 26px; }
  .thumbbtn.cut img { object-fit: contain; background: repeating-conic-gradient(#E8E8E8 0 25%, #fff 0 50%) 0 0 / 14px 14px; }
  .thumbstar { width: 92px; height: 164px; border-radius: 4px; background: var(--primary); color: #fff; display: grid; place-items: center; }
  .thumbstar svg { width: 40px; height: auto; }
  span.thumbbtn { display: block; }
  .cutnote { font-size: 12px; color: var(--muted); }
  .fields label.check { display: flex; gap: 8px; align-items: center; color: var(--dark); font-size: 14px; }
  @media (max-width: 980px) { .studio.film { grid-template-columns: 1fr; } }
  @media (max-width: 560px) { .thumbstar { width: 72px; height: 128px; } }

  #rec { position: fixed; left: -99999px; top: 0; width: 1080px; height: 1920px; }

  @media (max-width: 980px) {
    .studio { grid-template-columns: 1fr; }
    .side { position: static; order: -1; }
    .carhead { order: -2; }
  }
  @media (max-width: 560px) {
    main { padding: 8px 16px 32px; }
    .top { padding: 16px; }
    .servicebar { padding: 7px 16px; }
    .brand svg { width: 120px; }
    .brand span { font-size: 17px; }
    .slide { grid-template-columns: 72px minmax(0, 1fr); }
    .thumbbtn img { width: 72px; height: 128px; }
    .slide-tools { grid-column: 1 / -1; flex-direction: row; }
    .carhead h1 { font-size: 30px; }
  }