/* Joker 8888_Des v3 — options row additions, file-row QA chips, Editor, So sánh, Mặc định nâng cao. Loaded by index.html. */

/* ---------- options row ---------- */
.sel{height:34px;padding:0 30px 0 10px;border:1px solid var(--line-strong);border-radius:8px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%237A766E' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 10px center;-webkit-appearance:none;appearance:none;font-size:14px;font-weight:600;cursor:pointer}
.sel:focus{border-color:var(--gold);outline:none;box-shadow:0 0 0 3px rgba(201,162,39,.25)}
.opt-hint{width:100%;margin:-4px 0 0;font-size:13px;color:var(--muted)}
.opts[hidden]{display:none!important}
.zip-up{font-weight:600;font-size:14px}

/* ---------- file rows ---------- */
.chips{display:inline-flex;flex-wrap:wrap;gap:4px 6px;min-width:0}
.chips:empty{display:none}
.chip{display:inline-flex;align-items:center;padding:1px 8px;border-radius:6px;font-size:12px;font-weight:600;background:#F1EEE7;color:#5F5B53;border:1px solid #E6E1D6;white-space:nowrap;font-variant-numeric:tabular-nums}
.chip.good{background:var(--ok-soft);color:var(--ok);border-color:#CBE6D6}
.chip.bad{background:var(--err-soft);color:var(--err);border-color:#F0CFC9}
.chip.warn{background:#FFF3DA;color:#8A5A00;border-color:#F3DDAA}
.chip.ver{background:#2A2A2A;color:#F6F4EF;border-color:#2A2A2A}
.chip.pick{background:var(--gold-soft);color:#6E5710;border-color:var(--gold-tint)}
.chip.busy{background:var(--gold-soft);color:#7D6413;border-color:var(--gold-tint)}
.qa-warn{margin-top:4px;font-size:12.5px;color:#8A5A00}
.hist{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:4px;font-size:12.5px;color:var(--muted)}
.hist a{color:#6E5710;font-weight:600}
.btn-edit{border-color:var(--gold);color:#5E4A0B}

/* ---------- shared dialog bits ---------- */
dialog.jk-dlg{padding:0}
.jk-dlg .dlg-head h2 small{font-weight:500;color:var(--muted)}
.chipbtn{border:1px solid var(--line-strong);background:#fff;border-radius:999px;padding:4px 12px;font-size:13px;font-weight:600;cursor:pointer;color:var(--text)}
.chipbtn:hover{border-color:var(--gold);background:var(--gold-soft)}
.chipbtn[aria-pressed="true"]{background:var(--gold);border-color:var(--gold-dark);color:#1F1A0C}

/* ---------- param panel ---------- */
.pp{display:flex;flex-direction:column;gap:0}
.pp-g{padding:14px 16px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.pp-g:first-child{border-top:0}
.pp-h{margin:0;font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.9px;text-transform:uppercase}
.pp-row{display:flex;flex-direction:column;gap:6px;min-width:0}
.pp-row[hidden]{display:none}
.pp-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.pp-top label,.pp-lbl{font-size:14px;font-weight:600}
.pp-val{font-size:13px;font-weight:700;color:#6E5710;font-variant-numeric:tabular-nums;white-space:nowrap}
.pp-hint{margin:0;font-size:12.5px;line-height:1.4;color:var(--muted)}
.pp-warn{margin:0;font-size:12.5px;color:var(--err);font-weight:600}
.pp-presets{display:flex;flex-wrap:wrap;gap:6px}
.pp-foot{padding:4px 16px 16px}
.pp .seg{flex-wrap:wrap}
.pp .seg span{padding:5px 11px;font-size:13px}
.pp .switch{font-size:14px}
input[type=range]{width:100%;height:28px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer;accent-color:var(--gold)}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--gold-tint),#E4DFD5)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-7px;border-radius:50%;background:#fff;border:2px solid var(--gold-dark);box-shadow:0 1px 3px rgba(0,0,0,.2)}
input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:#E4DFD5}
input[type=range]::-moz-range-progress{height:6px;border-radius:3px;background:var(--gold)}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--gold-dark)}
input[type=range]:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* ---------- advanced defaults dialog ---------- */
dialog.dfl{max-width:min(94vw,520px);max-height:min(92vh,900px)}
dialog.dfl[open]{display:flex;flex-direction:column}
.dfl-body{overflow:auto;min-height:0;flex:1}
.dfl-lead{margin:0;padding:14px 16px 0;font-size:13.5px;color:var(--muted)}
.dfl .ask-foot{border-top:1px solid var(--line);align-items:center}
.dfl-msg{margin:0 auto 0 0}

/* ---------- compare dialog ---------- */
dialog.cmp{max-width:min(96vw,1320px);max-height:94vh}
dialog.cmp[open]{display:flex;flex-direction:column}
.cmp-body{overflow:auto;padding:16px;display:flex;flex-direction:column;gap:14px;min-height:0}
.cmp-top{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.cmp-origwrap{flex:none;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.cmp-orig{position:relative;display:block;padding:6px;border:1px solid var(--line);border-radius:10px;cursor:crosshair;max-width:220px}
.cmp-orig img{display:block;max-width:208px;max-height:160px;width:auto;height:auto}
.cmp-orig:hover{border-color:var(--gold)}
.cmp-mark{position:absolute;width:36px;height:36px;margin:-18px 0 0 -18px;border:2px solid var(--gold);border-radius:6px;box-shadow:0 0 0 2px rgba(0,0,0,.55);pointer-events:none}
.cmp-cap{margin:0;font-size:12.5px;color:var(--muted)}
.cmp-info{flex:1;min-width:220px;display:flex;flex-direction:column;gap:10px}
.cmp-status{margin:0;font-size:14px;min-height:21px}
.cmp-status.err{color:var(--err)}
.cmp-viewsel{display:flex;align-items:center;gap:10px}
.cmp-note{margin:0;font-size:12.5px;color:var(--muted)}
.cmp-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.cmp-tile{margin:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;display:flex;flex-direction:column;transition:border-color .15s,box-shadow .15s}
.cmp-tile.on{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold)}
.cmp-view{position:relative;height:300px;overflow:auto;background:#1E1D1B;cursor:grab;scrollbar-width:thin;touch-action:pan-x pan-y}
.cmp-view:active{cursor:grabbing}
.cmp-view img{display:block;max-width:none;width:1024px;height:1024px;image-rendering:auto;user-select:none;-webkit-user-drag:none}
.cmp-view:not(.ready) img{visibility:hidden}
.cmp-grid.fit .cmp-view{overflow:hidden;height:auto;aspect-ratio:1}
.cmp-grid.fit .cmp-view img{width:100%;height:100%}
.cmp-load{position:absolute;inset:0;display:none;place-items:center;color:#D8D2C6;font-size:13px}
.cmp-view.busy .cmp-load{display:grid;animation:pulse 1.2s ease-in-out infinite}
.cmp-tile figcaption{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-top:1px solid var(--line)}
.cmp-name{display:flex;flex-direction:column;min-width:0}
.cmp-name b{font-size:14px}
.cmp-name small{font-size:12px;color:var(--muted);line-height:1.3}
.cmp-pick[aria-pressed="true"]{background:var(--gold);border-color:var(--gold-dark);color:#1F1A0C}

/* ---------- editor (full screen) ---------- */
dialog.ed{width:100vw;height:100vh;height:100dvh;max-width:100vw;max-height:100vh;max-height:100dvh;margin:0;border:0;border-radius:0;padding:0;background:var(--bg);box-shadow:none}
dialog.ed::backdrop{background:rgba(42,42,42,.6)}
.ed-wrap{display:flex;flex-direction:column;height:100%;width:100%;flex:1 1 auto;min-height:0;min-width:0}
.ed-head{display:flex;align-items:center;gap:12px;padding:10px 16px;background:#fff;border-bottom:1px solid var(--line);flex:none;min-width:0}
.ed-head h2{margin:0;display:flex;flex-direction:column;min-width:0;flex:1;font-size:15px;line-height:1.25}
.ed-kicker{font-size:11px;font-weight:700;letter-spacing:.9px;color:var(--gold-dark)}
.ed-file{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ed-ver{flex:none;background:#2A2A2A;color:#F6F4EF;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700}
.ed-status{flex:none;font-size:13px;color:var(--muted);max-width:280px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.ed-main{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 360px}
.ed-stagecol{display:flex;flex-direction:column;min-width:0;min-height:0;padding:12px;gap:10px}
.ed-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px}
.ed-tgroup{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.ed-ib{width:34px;padding:6px 0;font-size:16px;line-height:1}
.ed-zoom{min-width:52px;text-align:center;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.ed-red{font-size:13.5px}
.ed-stage{position:relative;flex:1;min-height:0;border-radius:12px;border:1px solid var(--line-strong);overflow:hidden;background:#3A3833;outline-offset:3px}
.ed-canvas{position:absolute;inset:0;display:block;touch-action:none;cursor:default}
.ed-stage[data-tool="none"] .ed-canvas{cursor:grab}
.ed-stage[data-tool="keep"] .ed-canvas,.ed-stage[data-tool="erase"] .ed-canvas{cursor:crosshair}
.ed-stage.can-pan .ed-canvas{cursor:grab}
.ed-stage.panning .ed-canvas{cursor:grabbing}
.ed-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;color:#EDE8DD;font-size:14px;background:#3A3833}
.ed-loading.err{color:#FFC9C2}
.ed-loading[hidden]{display:none}
.ed-spin{width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(255,255,255,.25);border-top-color:var(--gold);animation:spin .8s linear infinite}
.ed-legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;color:var(--muted)}
.ed-legend[hidden]{display:none}
.ed-legend span{display:inline-flex;align-items:center;gap:6px}
.ed-legend i{width:12px;height:12px;border-radius:3px;display:inline-block}
.sw-red{background:#EB141E}.sw-org{background:#FF6000}
.ed-side{background:#fff;border-left:1px solid var(--line);overflow-y:auto;min-height:0;overscroll-behavior:contain}
.ed-bgs{display:flex;flex-wrap:wrap;gap:8px}
.ed-bg{width:36px;height:36px;border-radius:50%;border:1px solid rgba(0,0,0,.18);cursor:pointer;padding:0;box-shadow:inset 0 0 0 2px #fff}
.ed-bg.checker{background-size:10px 10px}
.ed-bg[aria-pressed="true"]{outline:2px solid var(--gold-dark);outline-offset:2px}
.ed-bgname{text-transform:none;letter-spacing:0;color:var(--text)}
.ed-tools .t-keep::before,.ed-tools .t-erase::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:1px}
.ed-tools .t-keep::before{background:#2ECC71}
.ed-tools .t-erase::before{background:#3478F6}
.ed-row-btns{display:flex;flex-wrap:wrap;gap:6px}
.ed-qa{display:grid;grid-template-columns:1fr auto;gap:6px 12px;margin:0;font-size:13.5px}
.ed-qa dt{color:var(--muted)}
.ed-qa dd{margin:0;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.ed-qa dd.good{color:var(--ok)}
.ed-qa dd.bad{color:var(--err)}
.ed-qa dd.warn{color:#8A5A00}
.ed-qawarn{margin:0;padding-left:18px;font-size:12.5px;color:#8A5A00}
.ed-qawarn:empty{display:none}
.ed-foot{flex:none;display:flex;align-items:center;gap:10px 14px;padding:10px 16px;background:#fff;border-top:1px solid var(--line);flex-wrap:wrap}
.ed-msg{flex:1;min-width:200px;margin:0;font-size:13.5px;color:var(--muted)}
.ed-msg.ok{color:var(--ok);font-weight:600}
.ed-msg.err{color:var(--err);font-weight:600}
.ed-foot-btns{display:flex;gap:10px;flex-wrap:wrap}
.ed-apply{min-width:190px;font-size:15px;padding:11px 20px}
.ed-apply.busy::before{content:"";width:14px;height:14px;border-radius:50%;border:2.5px solid var(--gold-tint);border-top-color:var(--gold-dark);animation:spin .8s linear infinite}

@media (max-width:1100px){ .cmp-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .cmp-view{height:260px} }
@media (max-width:860px){
  .ed-main{display:flex;flex-direction:column;overflow-y:auto}
  .ed-stagecol{flex:none;padding:10px}
  .ed-stage{flex:none;height:56vh;height:56dvh;min-height:280px}
  .ed-side{border-left:0;border-top:1px solid var(--line);overflow:visible}
  .ed-status{display:none}
}
@media (max-width:520px){
  .seg-wrap{flex-wrap:wrap}
  .seg-wrap span{padding:6px 10px;font-size:13.5px}
  .ed-head{padding:8px 12px;gap:8px}
  .ed-toolbar{gap:8px}
  .ed-tgroup .btn-sm{padding:6px 8px}
  .ed-foot{padding:8px 12px}
  .ed-foot-btns{width:100%}
  .ed-foot-btns .btn{flex:1 1 auto}
  .ed-apply{min-width:0}
  .ed-msg{min-width:0;flex-basis:100%}
  .cmp-body{padding:12px}
  .cmp-grid{gap:8px}
  .cmp-view{height:170px}
  .cmp-tile figcaption{flex-direction:column;align-items:stretch;padding:8px}
  .cmp-name small{display:none}
  .cmp-orig img{max-width:150px;max-height:110px}
}