/* jali.css -- cncrelief.com Image to Jali tab (2026-10-22, owner 12:48). Same frame / colours as Convert File. */
.jl-panel { grid-template-columns: 380px 1fr !important; }
@media (max-width: 1400px) { .jl-panel { grid-template-columns: 360px 1fr !important; } }
@media (max-width: 1100px) { .jl-panel { grid-template-columns: 1fr !important; } }

.jl-set { gap: 8px; }
.jl-drop { flex: 0 0 auto; min-height: 110px; }
.jl-drop[hidden] { display: none; }
.jl-thumb { flex: none; width: 44px; height: 44px; object-fit: cover; border-radius: 10px; background: #EEF2EF; }
.jl-scroll { flex: 1 1 0; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 7px; padding-right: 4px; margin-right: -4px; }
.jl-scroll::-webkit-scrollbar { width: 6px; } .jl-scroll::-webkit-scrollbar-thumb { background: #C4D2C9; border-radius: 6px; }
.jl-sec { font: 800 9.5px/1 var(--font-mono, monospace); letter-spacing: .09em; text-transform: uppercase; color: #9AA8A1; margin-top: 4px; }
.jl-row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.jl-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.jl-num { display: flex; flex-direction: column; gap: 4px; font: 700 10.5px/1 var(--font-sans, sans-serif); color: #3B4A44; min-width: 0; }
.jl-num span { position: relative; display: block; }
.jl-num input { width: 100%; box-sizing: border-box; height: 32px; border: 2px solid #C4D2C9; border-radius: 10px; padding: 0 26px 0 9px;
  font: 700 12.5px var(--font-mono, monospace); background: #FFFFFF; color: #101716; }
.jl-num input:focus { outline: none; border-color: #2E8A6B; }
.jl-num i { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font: 700 9.5px var(--font-mono, monospace); font-style: normal; color: #9AA8A1; pointer-events: none; }

.jl-shapes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.jl-shape { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0 5px; border: 2px solid #C4D2C9; border-radius: 10px;
  background: #FFFFFF; color: #3B4A44; cursor: pointer; font: inherit; min-width: 0; transition: border-color .15s ease, background .15s ease; }
.jl-shape svg { width: 18px; height: 18px; }
.jl-shape span { font: 700 8.5px/1 var(--font-sans, sans-serif); text-transform: capitalize; }
.jl-shape:hover { border-color: #2E8A6B; }
.jl-shape.on { background: #16201E; border-color: #16201E; color: #8FE0C2; }
.jl-shape.on span { color: #FFFFFF; }

.jl-seg { display: grid; grid-template-columns: 1fr 1fr; border: 2px solid #C4D2C9; border-radius: 11px; overflow: hidden; background: #FFFFFF; }
.jl-seg button { border: 0; background: none; padding: 8px 6px; font: 700 11.5px/1.2 var(--font-sans, sans-serif); color: #3B4A44; cursor: pointer; }
.jl-seg button small { font-weight: 600; color: #9AA8A1; }
.jl-seg button.on { background: #16201E; color: #FFFFFF; } .jl-seg button.on small { color: #C4D2C9; }
.jl-tick { display: flex; align-items: center; gap: 7px; padding: 7px 9px; border: 2px solid #C4D2C9; border-radius: 10px; background: #FFFFFF;
  font: 700 11.5px/1.2 var(--font-sans, sans-serif); color: #101716; cursor: pointer; }
.jl-tick input { width: 15px; height: 15px; margin: 0; accent-color: #2E8A6B; }
.jl-rng { display: grid; grid-template-columns: 74px 1fr 42px 20px; align-items: center; gap: 7px; font: 700 11px/1 var(--font-sans, sans-serif); color: #3B4A44; }
.jl-rng input { width: 100%; accent-color: #2E8A6B; min-width: 0; }
.jl-rng b { font: 700 11px var(--font-mono, monospace); color: #101716; text-align: right; }
.jl-rng i { font: 700 9.5px var(--font-mono, monospace); font-style: normal; color: #9AA8A1; }
/* a slider without a trailing unit (Contrast/Brightness/Detail) keeps the value in the last column */
.jl-rng:not(:has(i)) { grid-template-columns: 74px 1fr 42px; }

.jl-view { gap: 10px; }
.jl-look { display: inline-flex; border: 2px solid #C4D2C9; border-radius: 9px; overflow: hidden; }
.jl-look button { border: 0; background: #FFFFFF; padding: 5px 10px; font: 700 10.5px/1 var(--font-sans, sans-serif); color: #3B4A44; cursor: pointer; text-transform: none; letter-spacing: 0; }
.jl-look button.on { background: #16201E; color: #FFFFFF; }
.jl-stage { position: relative; flex: 1 1 0; min-height: 200px; border-radius: 16px; background: #EFE9DE; border: 1.5px solid #DCE4DE;
  display: grid; place-items: center; overflow: hidden; }
.jl-stage img { position: absolute; left: 14px; top: 14px; width: calc(100% - 28px); height: calc(100% - 28px); object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(22, 32, 30, .28)); }
.jl-stage img[hidden], .jl-empty[hidden], .jl-busy[hidden] { display: none; }
.jl-empty { font: 600 13px/1.4 var(--font-sans, sans-serif); color: #9AA8A1; }
.jl-busy { position: absolute; top: 12px; right: 12px; padding: 6px 12px; border-radius: 999px; background: #16201E; color: #FFFFFF;
  font: 700 11px/1 var(--font-mono, monospace); }
.jl-stats { display: flex; flex-wrap: wrap; gap: 6px; min-height: 26px; }
.jl-stats span { font: 700 11px/1 var(--font-mono, monospace); padding: 7px 10px; border-radius: 9px; background: #FFFFFF; border: 1.5px solid #DCE4DE; color: #3B4A44; }
.jl-stats span b { color: #101716; }
.jl-stats .err { background: #FFF6F3; border-color: #E3B4A6; color: #A23B1E; font-family: var(--font-sans, sans-serif); }
.jl-dl { display: grid; grid-template-columns: auto repeat(4, minmax(0, 1fr)); gap: 10px; align-items: stretch; }
.jl-dl > span { display: grid; place-items: center; font: 800 10px/1 var(--font-mono, monospace); letter-spacing: .08em; text-transform: uppercase; color: #9AA8A1; padding: 0 4px; }
.jl-dl .cv-t { height: 62px; }

/* 2026-10-22 15:48: bulk -- the photo list and the "all photos" row */
.jl-list { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 3px; flex: none; }
.jl-list[hidden] { display: none; }
.jl-list button { flex: none; position: relative; width: 50px; height: 50px; padding: 0; border: 2px solid #DCE4DE; border-radius: 10px; overflow: hidden; background: #EEF2EF; cursor: pointer; }
.jl-list button.on { border-color: #16201E; box-shadow: 0 3px 8px rgba(22, 32, 30, .2); }
.jl-list button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jl-list button i { position: absolute; right: 2px; bottom: 2px; padding: 1px 4px; border-radius: 5px; background: rgba(22, 32, 30, .78); color: #FFFFFF; font: 700 9px/1.2 var(--font-mono, monospace); font-style: normal; }
.jl-bulk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border-radius: 12px; background: #FFFFFF; border: 2px solid #C4D2C9; }
.jl-bulk[hidden] { display: none; }
.jl-bulk > span { font: 800 10px/1 var(--font-mono, monospace); letter-spacing: .08em; text-transform: uppercase; color: #9AA8A1; }
.jl-bulk label { display: inline-flex; align-items: center; gap: 4px; font: 700 12px var(--font-mono, monospace); color: #101716; cursor: pointer; }
.jl-bulk input { accent-color: #2E8A6B; }
.jl-bulk-go { margin-left: auto; height: 34px; padding: 0 16px; border: 0; border-radius: 10px; background: #16201E; color: #FFFFFF; font: 800 12px/1 var(--font-sans, sans-serif); cursor: pointer; }
.jl-bulk-go:disabled { opacity: .5; cursor: default; }
.jl-view .cv-done:empty { display: none; }

/* 2026-10-23 (owner): my 7-day history (download again free) + Samples (owner examples, everyone) */
.jl-hist[hidden], .jl-samp-wrap[hidden] { display: none; }
.jl-hist-top, .jl-samp-top { font: 800 10px/1 var(--font-mono, monospace); letter-spacing: .08em; text-transform: uppercase; color: #3B4A44; margin: 4px 0 2px; }
.jl-hist-top small, .jl-samp-top small { font-weight: 700; text-transform: none; letter-spacing: 0; color: #9AA8A1; }
.jl-hist-top b { color: #2E8A6B; }
.jl-hist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 9px; }
.jl-hist-it { position: relative; margin: 0; border: 1.5px solid #DCE4DE; border-radius: 12px; background: #FFFFFF; overflow: hidden; display: flex; flex-direction: column; }
.jl-hist-it img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: #EFE9DE; display: block; }
.jl-hist-it figcaption { padding: 6px 8px 4px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jl-hist-it figcaption b { font: 700 11px/1.15 var(--font-sans, sans-serif); color: #101716; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jl-hist-it figcaption small { font: 600 9px/1.2 var(--font-mono, monospace); color: #9AA8A1; }
.jl-hist-dl { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 8px 8px; }
.jl-hist-get { border: 1.5px solid #C4D2C9; background: #F3F7F4; color: #16201E; border-radius: 7px; padding: 3px 7px; font: 700 10px/1 var(--font-mono, monospace); cursor: pointer; }
.jl-hist-get:hover { border-color: #2E8A6B; background: #E7F2EC; }
.jl-hist-get.busy { opacity: .5; cursor: default; }
.jl-hist-x { position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(22, 32, 30, .72); color: #FFFFFF; font: 700 15px/1 var(--font-sans, sans-serif); cursor: pointer; display: grid; place-items: center; }
.jl-hist-x:hover { background: #A23B1E; }
.jl-samp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.jl-samp { margin: 0; border: 1.5px solid #DCE4DE; border-radius: 13px; background: #FFFFFF; overflow: hidden; }
.jl-samp-pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 4px; padding: 8px; background: #EFE9DE; }
.jl-samp-pair img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; background: #FFFFFF; display: block; }
.jl-samp-arrow { font: 800 15px/1 var(--font-sans, sans-serif); color: #2E8A6B; }
.jl-samp figcaption { padding: 7px 10px; font: 700 11.5px/1.3 var(--font-sans, sans-serif); color: #16201E; }