:root { color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #1a1a1a; color: #fff; }
* { box-sizing: border-box; }
body { margin: 0; }
.shell { max-width: 1720px; padding: 16px 20px 70px; margin: auto; }
.intro { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin: 0 0 18px; }
.eyebrow { color: #ff6400; font-size: 13px; font-weight: 900; letter-spacing: 2px; }
h1 { font-size: clamp(29px, 4vw, 38px); margin: 0 0 6px; }
h2 { margin: 0 0 5px; font-size: 21px; }
p { margin: 0; color: #cbbca1; line-height: 1.45; }
.card { margin: 16px 0; padding: 18px; background: #242424; border: 1px solid #3a3a3a; border-radius: 16px; }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 15px; }
.connection { display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, 260px) auto; align-items: end; gap: 16px; }
.version-choice { border-color: #ff6400; }
.choice-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 13px; }
.restore-draft { margin-bottom: 8px; }
.publish-box { display: grid; justify-items: end; gap: 6px; }
#status { color: #d7c29d; font-size: 13px; text-align: right; }
.editor-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 15px; }
.editor-nav a { display: block; padding: 12px 14px; border: 1px solid #555; border-radius: 10px; background: #242424; color: #fff0cf; font-weight: 800; text-align: center; text-decoration: none; }
.editor-nav a[aria-current="page"] { border-color: #ff6400; background: #ff6400; color: #15110d; }
[hidden] { display: none !important; }
.screen-tabs { display: flex; gap: 8px; margin: 20px 0 0; }
button { border: 1px solid #ff6400; border-radius: 9px; background: #302114; color: #fff0cf; padding: 10px 13px; font: inherit; font-weight: 800; cursor: pointer; }
button:hover, button:focus-visible { background: #5a3116; }
button:disabled { opacity: .45; cursor: default; }
button.primary, .screen-tabs .active { background: #ff6400; color: #15110d; }
button.subtle { border-color: #66543f; background: #22201d; }
button.danger { border-color: #a44635; color: #ffc1b5; background: #2f1815; }
input, select { width: 100%; padding: 10px; border: 1px solid #74634d; border-radius: 8px; background: #0a0a0a; color: #fff0cf; font: inherit; font-size: 16px; }
input:focus, select:focus { outline: 2px solid #ff6400; }
label { display: grid; gap: 5px; color: #ecddc3; font-size: 13px; font-weight: 800; }
label.check { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
label.check input { width: auto; }
.stack { display: grid; gap: 9px; }
.empty { padding: 18px; border: 1px dashed #5b4c3c; border-radius: 10px; color: #cbbca1; }
.row-card, .slide-card, .media-card { padding: 9px 12px; background: #1b1b1b; border: 1px solid #444; border-radius: 11px; }
.row-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "page page" "fields actions"; gap: 7px 16px; align-items: center; }
.row-card.page-start { margin-top: 16px; border: 2px solid #ff6400; background: #292017; }
.row-card.page-start:first-child { margin-top: 0; }
.row-card.page-end { border-bottom: 3px solid #ff6400; margin-bottom: 7px; }
.row-fields { grid-area: fields; display: grid; grid-template-columns: minmax(220px, 2fr) minmax(110px, 1fr) minmax(100px, .7fr); gap: 8px; }
.row-actions { grid-area: actions; display: grid; gap: 7px; }
.price-input { position: relative; display: block; }
.price-input > span { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: #ff8a37; font-size: 18px; }
.price-input input { padding-left: 28px; }
#add-row { margin-top: 10px; }
.row-flags, .row-controls, .slide-actions, .media-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.slide-actions, .media-actions { margin-top: 10px; }
.row-actions button, .slide-actions button, .media-actions button { padding: 6px 9px; font-size: 14px; }
.row-flags { gap: 15px; }
.row-flags input[type="checkbox"] { width: 18px; height: 18px; }
.page-label { display: inline-block; padding: 6px 11px; margin-bottom: 9px; border-radius: 7px; background: #ff6400; color: #17110d; font-size: 14px; font-weight: 900; }
.page-title-field { grid-area: page; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 10px; margin-bottom: 5px; }
.page-title-field .page-label { margin-bottom: 0; }
.page-title-field label { min-width: 0; }
.slide-card { display: grid; grid-template-columns: 60px minmax(0, 1fr) 105px auto; grid-template-areas: "thumb summary time actions"; gap: 10px; align-items: center; }
.slide-thumb { grid-area: thumb; display: block; width: 60px; height: 72px; object-fit: contain; background: #000; border: 1px solid #6a5541; border-radius: 7px; overflow: hidden; }
.price-thumb { display: flex; flex-direction: column; gap: 4px; padding: 8px 5px; border: 2px solid #ff6400; box-shadow: inset 0 0 0 2px #f5dfb5; color: #f5dfb5; }
.price-thumb b { font-size: 9px; color: #ff7a22; }
.price-thumb span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: Impact, 'Arial Narrow', Arial, sans-serif; font-size: 9px; }
.video-thumb { position: relative; }
.video-thumb video { display: block; width: 100%; height: 100%; object-fit: contain; }
.video-thumb span { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 25px; text-shadow: 0 1px 5px #000; }
.missing-thumb { display: grid; place-items: center; font-size: 24px; }
.slide-summary { grid-area: summary; min-width: 0; }
.slide-number { display: inline-block; margin-right: 8px; color: #ff8a37; }
.slide-time { grid-area: time; }
.slide-time small { margin: 0; }
.slide-time strong { color: #fff0cf; }
.slide-card strong, .media-card strong { display: block; overflow-wrap: anywhere; }
.slide-card small, .media-card small { display: block; margin-top: 3px; color: #bba98e; }
.slide-actions { grid-area: actions; margin-top: 0; padding-top: 0; border-top: 0; }
#media-library, #price-page-library { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.media-card { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 10px; align-items: center; }
.media-card img, .media-card video { width: 68px; height: 78px; object-fit: contain; background: #000; border-radius: 5px; }
.price-page-thumb { width: 68px; height: 78px; overflow: hidden; border-radius: 7px; }
.media-actions { grid-column: 1 / -1; margin-top: 0; }
.upload { padding: 14px; margin-bottom: 13px; border: 1px dashed #ff6400; border-radius: 10px; }
.upload input { padding: 6px; border: none; }
.upload-controls { display: flex; align-items: end; flex-wrap: wrap; gap: 10px; }
.upload-controls .upload { flex: 1 1 260px; margin-bottom: 0; }
.upload-controls button { min-height: 44px; }
#upload-status { margin: 9px 0 13px; color: #ecddc3; }
.site-header { background: #242424; border: 1px solid #3a3a3a; border-radius: 16px; padding: 10px 12px; margin-bottom: 18px; }
.site-header-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.site-logo-link { display: flex; align-items: center; text-decoration: none; }
.site-logo { height: 48px; width: auto; max-width: 240px; display: block; }
.site-app-name { color: #b0b0b0; font-size: 1.4rem; font-weight: 700; white-space: nowrap; }
.header-reload-button { display: block; width: 100%; margin-top: 10px; padding: 8px 12px; background: #2d2d2d; color: #fff; border: 1px solid #3a3a3a; border-radius: 8px; font-size: 14px; font-weight: 600; }
.header-reload-button:hover { border-color: #f97316; background: #2d2d2d; }
dialog { width: min(95vw, 520px); max-height: 95vh; padding: 14px; border: 1px solid #ff6400; border-radius: 14px; background: #171615; color: #fff0cf; }
dialog::backdrop { background: #000c; }
.preview-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.preview-stage { width: min(100%, 390px); aspect-ratio: 9 / 16; margin: auto; background: #000; padding: 5px; }
.preview-frame { width: 100%; height: 100%; border: 3px solid #ff6400; border-radius: 15px; padding: 4px; background: #000; }
#preview-content { width: 100%; height: 100%; overflow: hidden; border: 1.5px solid #fff0cf; border-radius: 10px; background: #000; }
.preview-media { display: block; width: 100%; height: 100%; }
.preview-media.contain { object-fit: contain; }
.preview-media.cover { object-fit: cover; }
.preview-prices { position: relative; display: flex; flex-direction: column; height: 100%; padding: 12px 9px; background: #080808 url('assets/workshop-prices-faded-v3.png') center / cover no-repeat; }
.preview-prices::before { content: ''; position: absolute; inset: 0; background: #0003; pointer-events: none; }
.preview-price-heading { position: relative; z-index: 1; display: flex; align-items: center; flex: 0 0 calc(100% / 15); overflow: hidden; border-bottom: 2px solid #f5dfb5; color: #ff6400; font-family: Impact, 'Arial Narrow', Arial, sans-serif; font-size: 23px; font-weight: 900; white-space: nowrap; text-overflow: ellipsis; }
.preview-price-row { display: grid; grid-template-columns: minmax(0, 1fr) 45px 58px; gap: 2px; align-items: center; flex: 0 0 calc(100% / 15); min-height: 0; border-bottom: 1px solid #423b2f; color: #fff0cf; font-family: Impact, 'Arial Narrow', Arial, sans-serif; font-size: 17px; position: relative; z-index: 1; }
.preview-price-row .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
@media (min-width: 1101px) {
  .card[data-editor-view="prices"] { padding: 12px; }
  #price-rows { gap: 3px; }
  .row-card { padding: 4px 8px; gap: 4px 10px; border-radius: 6px; }
  .row-card.page-start { margin-top: 12px; padding-top: 7px; }
  .row-card.page-end { margin-bottom: 5px; }
  .row-fields label { gap: 0; font-size: 0; }
  .row-fields input, .row-fields select { height: 32px; padding-top: 4px; padding-bottom: 4px; font-size: 15px; }
  .row-actions { display: flex; align-items: center; gap: 10px; }
  .row-actions button { padding: 4px 7px; font-size: 12px; }
  .row-flags { gap: 8px; }
  .row-flags label { font-size: 12px; }
  .row-flags input[type="checkbox"] { width: 15px; height: 15px; }
  .page-title-field input { height: 34px; padding: 5px 8px; }
}
.preview-price-row .name:has(+ .size:empty) { grid-column: span 2; }
.preview-price-row .size:empty { display: none; }
.preview-price-row .size { text-align: right; font-size: 14px; }
.preview-price-row .price { text-align: right; font-size: 18px; }
.preview-price-row.sold-out { color: #8d806d; }
.preview-price-row.sold-out::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px solid #ff6400; }
@media (max-width: 1100px) {
  .row-card { display: block; }
  .row-actions { margin-top: 10px; }
  .page-title-field { grid-template-columns: auto minmax(0, 1fr); }
  .slide-card { grid-template-columns: 60px minmax(0, 1fr) 105px; grid-template-areas: "thumb summary time" "actions actions actions"; }
  .slide-actions { padding-top: 9px; border-top: 1px solid #333; }
  #media-library, #price-page-library { grid-template-columns: 1fr; }
}
@media (max-width: 690px) {
  .intro, .section-head { align-items: stretch; flex-direction: column; }
  .publish-box { justify-items: stretch; }
  #status { text-align: left; }
  .connection { grid-template-columns: 1fr; }
  .screen-tabs { position: sticky; top: 0; z-index: 5; padding: 8px 0; background: #1a1a1a; }
  .screen-tabs button { flex: 1; }
  .row-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .row-fields label:first-child { grid-column: 1 / -1; }
  .page-title-field { grid-template-columns: minmax(0, 1fr); }
  .page-title-field .page-label { grid-column: 1 / -1; justify-self: start; }
  .slide-card { grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "thumb summary" "thumb time" "actions actions"; }
  .slide-thumb { width: 64px; height: 80px; }
  .slide-time { max-width: 130px; }
}