/* Shadowbox Studio: full-screen editor. Palette follows Attendance V2 (neutral slate, one blue). */
.tfld-sbs {
  --s-page:#0b141d; --s-card:#121e2b; --s-inset:#0d1822; --s-line:#243447; --s-text:#e8eef4; --s-muted:#8fa1b3; --s-blue:#3b82f6; --s-blue-hi:#5b9bff; --s-good:#34d399;
  position:fixed; inset:0; z-index:2147483200; display:flex; flex-direction:column; background:var(--s-page); color:var(--s-text);
  font-family:Rajdhani,"Segoe UI",system-ui,sans-serif; font-size:17px; line-height:1.3;
}
body.admin-bar .tfld-sbs { top:32px; }
@media(max-width:600px){body.admin-bar .tfld-sbs{top:0}}
.tfld-sbs *, .tfld-sbs *::before, .tfld-sbs *::after { box-sizing:border-box; }
.tfld-sbs h2, .tfld-sbs h3, .tfld-sbs h4 { color:var(--s-text); }
.tfld-sbs button, .tfld-sbs select, .tfld-sbs input { font:inherit; }
.tfld-sbs button { color:var(--s-text); background:transparent; border:1px solid var(--s-line); border-radius:8px; padding:7px 14px; cursor:pointer; }
.tfld-sbs button:hover:not(:disabled) { background:#182737; border-color:#35506b; }
.tfld-sbs button:disabled { opacity:.45; cursor:default; }
.tfld-sbs button:focus-visible, .tfld-sbs select:focus-visible, .tfld-sbs input:focus-visible { outline:2px solid var(--s-blue-hi); outline-offset:2px; }
.tfld-sbs button.is-primary { background:var(--s-blue); border-color:var(--s-blue); color:#fff; }
.tfld-sbs button.is-primary:hover:not(:disabled) { background:var(--s-blue-hi); border-color:var(--s-blue-hi); }
.tfld-sbs [hidden] { display:none !important; }

.tfld-sbs__bar { display:flex; align-items:center; gap:10px; padding:10px 18px; background:var(--s-card); border-bottom:1px solid var(--s-line); flex-wrap:wrap; }
.tfld-sbs__title { margin:0; font-size:24px; letter-spacing:.06em; text-transform:uppercase; font-weight:700; }
.tfld-sbs__spacer { flex:1; }
.tfld-sbs__state { color:var(--s-muted); font-size:16px; }
.tfld-sbs__state.is-dirty { color:#f6c453; }

.tfld-sbs__body { flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) 380px; }
.tfld-sbs__stage { min-width:0; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px; gap:10px; overflow:auto; }
.tfld-sbs__canvaswrap { position:relative; width:min(100%, calc((100vh - 170px) * 16 / 9)); aspect-ratio:16 / 9; box-shadow:0 18px 50px rgba(0,0,0,.55); }
.tfld-sbs__canvas { display:block; width:100%; height:100%; background:#000; }
.tfld-sbs__hint { margin:0; color:var(--s-muted); font-size:15px; }
.tfld-sbs__tip { position:absolute; z-index:3; max-width:260px; padding:5px 10px; background:#0b141d; border:1px solid var(--s-line); border-radius:6px; color:var(--s-text); font-size:15px; pointer-events:auto; box-shadow:0 6px 18px rgba(0,0,0,.5); }

.tfld-sbs__panel { overflow:auto; padding:14px; border-left:1px solid var(--s-line); background:var(--s-card); display:flex; flex-direction:column; gap:10px; }
.tfld-sbs__panel > .tfld-sbs__group { flex-shrink:0; }
.tfld-sbs__decoration-tools { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; }
.tfld-sbs__decoration-tools > label:first-child, .tfld-sbs__decoration-tools input { grid-column:1 / -1; }
.tfld-sbs__decoration-tools input[type=search] { width:100%; min-width:0; margin:0; padding:10px; border:1px solid var(--s-line); border-radius:8px; background:var(--s-card); color:var(--s-text); }
.tfld-sbs__decorations { display:flex; flex-direction:column; gap:8px; }
.tfld-sbs__category { border:1px solid var(--s-line); border-radius:8px; min-width:0; }
.tfld-sbs__category > summary { display:list-item; cursor:pointer; padding:12px; min-height:44px; font-weight:600; }
.tfld-sbs__category > summary small { display:block; color:var(--s-muted); font-size:14px; font-weight:400; padding-top:3px; }
.tfld-sbs__category > .tfld-sbs__note { margin:12px; }
.tfld-sbs__category-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; padding:8px; border-top:1px solid var(--s-line); }
.tfld-sbs__category-actions button { min-height:44px; padding:6px 10px; font-size:15px; }
.tfld-sbs__subcategory > summary { cursor:pointer; padding:12px; min-height:44px; color:var(--s-muted); }
.tfld-sbs .tfld-sbs__decoration { display:flex; align-items:center; gap:10px; min-height:48px; margin:0; padding:4px 10px; border-top:1px solid var(--s-line); cursor:pointer; color:var(--s-text); font-size:15px; line-height:1.3; }
.tfld-sbs__decoration:hover, .tfld-sbs__decoration:focus-within { background:var(--s-card); }
.tfld-sbs__decoration input { flex:none; width:20px; height:20px; margin:0; accent-color:var(--s-blue); }
.tfld-sbs__decoration img, .tfld-sbs__no-art { flex:none; width:44px; height:32px; object-fit:contain; }
.tfld-sbs__decoration > span:last-child { min-width:0; overflow-wrap:anywhere; }
.tfld-sbs__decoration small { display:block; color:var(--s-muted); }
.tfld-sbs__years { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:2px 10px 8px 74px; color:var(--s-muted); font-size:13px; }
.tfld-sbs__years input { width:76px; min-width:0; padding:6px 8px; border:1px solid var(--s-line); border-radius:6px; background:var(--s-card); color:var(--s-text); }
.tfld-sbs__years button { padding:6px 12px; border:1px solid var(--s-line); border-radius:6px; background:var(--s-card); color:var(--s-text); cursor:pointer; }
.tfld-sbs__years button:disabled { opacity:.55; cursor:default; }
.tfld-sbs summary:focus-visible { outline:2px solid var(--s-blue-hi); outline-offset:-3px; }
.tfld-sbs__group { border:1px solid var(--s-line); border-radius:10px; background:var(--s-inset); }
.tfld-sbs__group > summary { cursor:pointer; padding:10px 14px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:15px; color:var(--s-text); }
.tfld-sbs__group[open] > summary { border-bottom:1px solid var(--s-line); }
.tfld-sbs__group > :not(summary) { margin:12px 14px; }
.tfld-sbs__themes, .tfld-sbs__presets { display:grid; gap:8px; }
.tfld-sbs__theme, .tfld-sbs__preset { display:flex !important; flex-direction:column; align-items:flex-start; text-align:left; padding:9px 12px !important; }
.tfld-sbs__theme small, .tfld-sbs__preset small { color:var(--s-muted); }
.tfld-sbs__theme.is-on, .tfld-sbs__preset.is-on { border-color:var(--s-blue) !important; box-shadow:inset 0 0 0 1px var(--s-blue); }
.tfld-sbs__field { display:flex; flex-direction:column; gap:6px; }
.tfld-sbs__field > label { color:var(--s-muted); font-size:15px; display:flex; justify-content:space-between; }
.tfld-sbs__swatches { display:flex; flex-wrap:wrap; gap:8px; }
.tfld-sbs__swatch { display:inline-flex !important; align-items:center; gap:7px; padding:5px 10px 5px 6px !important; font-size:15px; }
.tfld-sbs__swatch i { width:22px; height:22px; border-radius:5px; border:1px solid rgba(255,255,255,.25); flex:none; }
.tfld-sbs__swatch.is-on { border-color:var(--s-blue) !important; box-shadow:inset 0 0 0 1px var(--s-blue); }
.tfld-sbs__actions { display:flex; gap:8px; flex-wrap:wrap; }
.tfld-sbs__sections { list-style:none; margin:12px 14px; padding:0; display:flex; flex-direction:column; gap:6px; }
.tfld-sbs__sections li { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:4px 6px 4px 4px; border:1px solid transparent; border-radius:8px; }
.tfld-sbs__sections li.is-sel { border-color:var(--s-blue); background:#102237; }
.tfld-sbs__secname { border:0 !important; padding:6px 8px !important; text-align:left; flex:1; font-weight:600; }
.tfld-sbs__secname em { color:var(--s-muted); font-style:normal; font-weight:400; }
.tfld-sbs__secbtns { display:flex; gap:4px; align-items:center; }
.tfld-sbs__secbtns button { padding:3px 9px !important; font-size:15px; }
.tfld-sbs__always { color:var(--s-muted); font-size:14px; padding:0 8px; }
.tfld-sbs__secpanel { display:flex; flex-direction:column; gap:12px; padding-top:10px; border-top:1px solid var(--s-line); }
.tfld-sbs__secpanel h4, .tfld-sbs__exp h4 { margin:0; font-size:16px; letter-spacing:.06em; text-transform:uppercase; }
.tfld-sbs__seg { display:flex; }
.tfld-sbs__seg button { flex:1; border-radius:0; margin-left:-1px; padding:6px 8px; }
.tfld-sbs__seg button:first-child { border-radius:8px 0 0 8px; margin-left:0; }
.tfld-sbs__seg button:last-child { border-radius:0 8px 8px 0; }
.tfld-sbs__seg button[aria-pressed=true] { background:var(--s-blue); border-color:var(--s-blue); color:#fff; position:relative; z-index:1; }
.tfld-sbs__link { align-self:flex-start; border:0 !important; padding:2px 0 !important; color:var(--s-blue-hi) !important; text-decoration:underline; }
.tfld-sbs input[type=range] { width:100%; accent-color:var(--s-blue); }
.tfld-sbs select { background:var(--s-inset); color:var(--s-text); border:1px solid var(--s-line); border-radius:8px; padding:6px 8px; }
.tfld-sbs__note { margin:0; color:var(--s-muted); font-size:15px; }
.tfld-sbs__exp { display:flex; flex-direction:column; gap:10px; }
.tfld-sbs__exp + .tfld-sbs__exp { border-top:1px solid var(--s-line); padding-top:12px; }
.tfld-sbs__tsprev { display:flex; align-items:center; justify-content:center; min-height:120px; background:#000; border:1px solid var(--s-line); border-radius:8px; color:var(--s-muted); }
.tfld-sbs__tsprev img { display:block; width:100%; height:auto; }
.tfld-sbs code { font-size:13px; }

.tfld-sbs__lightbox { position:fixed; inset:0; z-index:2147483300; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.92); cursor:zoom-out; }
.tfld-sbs__lightbox canvas { display:block; max-width:100%; }

@media (max-width:1000px) {
  .tfld-sbs__body { grid-template-columns:minmax(0,1fr); grid-template-rows:max-content max-content; align-content:start; overflow:auto; }
  .tfld-sbs__stage { justify-content:flex-start; overflow:visible; padding:12px; }
  .tfld-sbs__stage { position:sticky; top:0; z-index:4; background:var(--s-page); }
  .tfld-sbs__stage:has(.tfld-award-list[open]) { position:static; }
  .tfld-sbs__canvaswrap { width:100%; }
  .tfld-sbs__panel { border-left:0; border-top:1px solid var(--s-line); overflow:visible; }
}

@media (max-width:600px) {
  .tfld-sbs__bar { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; padding:8px 12px; }
  .tfld-sbs__bar .tfld-sbs__title { grid-area:1 / 1 / 2 / 4; font-size:clamp(17px,5vw,20px); letter-spacing:.02em; }
  .tfld-sbs__bar [data-close] { grid-area:1 / 4; }
  .tfld-sbs__bar .tfld-sbs__spacer { display:none; }
  .tfld-sbs__bar .tfld-sbs__state { grid-area:2 / 1 / 3 / 4; font-size:14px; }
  .tfld-sbs__bar [data-save] { grid-area:2 / 4; }
  .tfld-sbs__bar [data-undo] { grid-area:3 / 1; }
  .tfld-sbs__bar [data-redo] { grid-area:3 / 2; }
  .tfld-sbs__bar [data-auto] { grid-area:3 / 3; }
  .tfld-sbs__bar [data-full] { grid-area:3 / 4; }
  .tfld-sbs__bar button { min-width:0; min-height:44px; padding:6px; font-size:14px; line-height:1.1; white-space:normal; }
}

.tfld-sbs__row { display: flex; flex-wrap: wrap; gap: 8px; }
.tfld-sbs__help { position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; background: rgba(5, 10, 16, .72); padding: 16px; }
.tfld-sbs__help[hidden] { display: none; }
.tfld-sbs__helpbox { position: relative; max-width: 460px; width: 100%; background: #121e2b; color: #e8eef4; border: 1px solid #243447; border-radius: 12px; padding: 22px 24px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.tfld-sbs__helpbox h3 { margin: 0 0 12px; font-size: 18px; }
.tfld-sbs__helpbox ol { margin: 0 0 12px 18px; padding: 0; line-height: 1.55; }
.tfld-sbs__helpbox p { margin: 0; color: #8fa1b3; font-size: 13px; line-height: 1.5; }
.tfld-sbs__helpx { position: absolute; top: 8px; right: 10px; background: none; border: 0; color: #8fa1b3; font-size: 24px; line-height: 1; cursor: pointer; }

.tfld-sbs__temp { margin-left:12px; padding:4px 10px; border:1px solid #7a6320; border-radius:6px; background:#3a300d; color:#f3cf6b; font-size:13px; font-weight:600; }
.tfld-sbs__tip strong { display:block; font-size:15px; }
.tfld-sbs__tip span { display:block; margin-top:3px; max-width:300px; color:var(--s-muted); font-size:13px; line-height:1.4; white-space:normal; }
.tfld-sbs__tip { max-width:320px; }
.tfld-sbs__tip button { margin-top:7px; padding:4px 7px; border:1px solid #a2b6c8; border-radius:4px; color:#fff; background:#203548; cursor:pointer; }
.tfld-sbs__tip button:focus-visible { outline:2px solid #e5ca80; outline-offset:2px; }
.tfld-sbs__tip a { color:#a9d6ff; text-decoration:underline; }
.tfld-sbs__tip a:focus-visible { outline:2px solid #e5ca80; outline-offset:2px; }
.tfld-award-list { margin: 8px 0; color: #e8eef4; font-size: 13px; }
.tfld-award-list summary { cursor: pointer; color: #e5ca80; }
.tfld-award-list summary:focus-visible,.tfld-award-list button:focus-visible { outline: 2px solid #e5ca80; outline-offset: 2px; }
.tfld-award-list__items { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0; max-height: 120px; overflow: auto; }
.tfld-award-list__items button { border: 1px solid #52677a; border-radius: 4px; background: #172635; color: #f0f3f6; padding: 5px 8px; cursor: pointer; }
.tfld-award-list__preview { margin:4px 0 8px; color:#d4e0e9; line-height:1.45; overflow-wrap:anywhere; }
.tfld-award-dialog { width: min(540px, calc(100vw - 32px)); max-height: min(80vh, 700px); overflow: auto; border: 1px solid #697f91; border-radius: 8px; background: #111e2a; color: #f0f3f6; padding: 20px; box-shadow: 0 20px 70px #000a; }
.tfld-award-dialog::backdrop { background: #000b; }
.tfld-award-dialog h2 { margin: 0 0 12px; color: #f0f3f6; }
.tfld-award-dialog > button { float: right; border: 1px solid #8297a9; border-radius: 4px; background: #203548; color: #fff; padding: 5px 12px; cursor: pointer; }
.tfld-award-dialog ol { clear: both; padding-left: 25px; }
.tfld-award-dialog li { margin: 15px 0; }
.tfld-award-dialog p { margin: 5px 0; }
.tfld-award-dialog a { color: #a9d6ff; }
.tfld-award-dialog blockquote { margin: 6px 0; overflow-wrap: anywhere; line-height: 1.5; }