/* Gelisim paneli (public/gelisim.js). Ortak tokenlar style.css'ten (--panel, --line, --text, --muted, --accent); siniflar gl- onekli.
   Alan renkleri kendi tokenlarinda, koyu temada yeniden tanimli. Dar pencere: 720 px ve 520 px kirilimlari. */
:root {
  --gl-kolaylik: #2f6fe4; --gl-verim: #b7790f; --gl-gorunum: #7c5cd6; --gl-guven: #1f9d55;
  --gl-bakim: #5a6f8c; --gl-cihaz: #c2410c; --gl-diger: #6b6b66;
  --gl-hi: #1f9d55; --gl-mid: #2f6fe4; --gl-lo: #8a8a84;
  --gl-done-a: #23a65b; --gl-done-b: #17803f; --gl-done-ink: #fff;
  --gl-hero-a: rgb(47 111 228 / .10); --gl-hero-b: rgb(124 92 214 / .08); --gl-hero-c: rgb(31 157 85 / .07);
  --gl-card-sh: 0 1px 0 rgb(30 30 25 / .03), 0 6px 18px -10px rgb(30 30 25 / .16);
  --gl-card-sh-h: 0 1px 0 rgb(30 30 25 / .04), 0 14px 32px -14px rgb(30 30 25 / .26);
}
@media (prefers-color-scheme: dark) {
  :root {
    --gl-kolaylik: #6e9cf2; --gl-verim: #e2a632; --gl-gorunum: #a78bfa; --gl-guven: #3ccf7c;
    --gl-bakim: #8fa6c8; --gl-cihaz: #fb923c; --gl-diger: #a3a3a0;
    --gl-hi: #3ccf7c; --gl-mid: #6e9cf2; --gl-lo: #7a7a78;
    --gl-done-a: #4fdc8b; --gl-done-b: #2fb768; --gl-done-ink: #04210f;
    --gl-hero-a: rgb(91 143 240 / .14); --gl-hero-b: rgb(167 139 250 / .10); --gl-hero-c: rgb(60 207 124 / .07);
    --gl-card-sh: 0 1px 0 rgb(255 255 255 / .02) inset, 0 8px 22px -12px rgb(0 0 0 / .6);
    --gl-card-sh-h: 0 1px 0 rgb(255 255 255 / .03) inset, 0 16px 36px -14px rgb(0 0 0 / .75);
  }
}

#gelisim .gl-wrap { max-width: 1040px; gap: 18px; }

/* ---------- baslik */
.gl-hero { position: relative; display: flex; align-items: flex-end; gap: 20px 28px; flex-wrap: wrap; padding: 22px 22px 20px;
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  background:
    radial-gradient(120% 140% at 0% 0%, var(--gl-hero-a), transparent 55%),
    radial-gradient(90% 120% at 100% 0%, var(--gl-hero-b), transparent 60%),
    radial-gradient(80% 120% at 60% 120%, var(--gl-hero-c), transparent 60%),
    var(--panel); }
.gl-hero-t { flex: 1 1 420px; min-width: 0; }
.gl-hero h1 { margin: 0 0 6px; font-size: 22px; font-weight: 600; letter-spacing: -.02em; display: flex; align-items: center; gap: 10px; }
.gl-hero h1 .ph { font-size: 22px; color: var(--gl-guven); width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--line); box-shadow: 0 4px 12px -6px rgb(31 157 85 / .5); }
.gl-hero p { margin: 0; color: var(--muted); max-width: 64ch; line-height: 1.55; }
.gl-gen { display: grid; grid-template-columns: auto auto; align-items: center; justify-content: end; gap: 8px 14px; flex: 0 1 auto; }
.gl-genbtn { height: 38px; padding: 0 16px; font-weight: 600; gap: 8px; box-shadow: 0 6px 16px -8px var(--accent); }
.gl-genbtn .ph { font-size: 16px; }
.gl-genbtn:disabled { opacity: .85; cursor: progress; }
.gl-auto { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--muted); font-size: 12.5px; user-select: none; }
.gl-auto input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gl-auto .track { width: 30px; height: 18px; border-radius: 999px; background: var(--off); position: relative; transition: background .16s ease; flex: none; }
.gl-auto .knob { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .25); transition: transform .18s cubic-bezier(.2, .8, .3, 1); }
.gl-auto input:checked + .track { background: var(--ok); }
.gl-auto input:checked + .track .knob { transform: translateX(12px); }
.gl-auto input:focus-visible + .track { box-shadow: 0 0 0 3px var(--accent-soft); }
.gl-next { grid-column: 1 / -1; justify-self: end; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.gl-spin { animation: gl-spin 1s linear infinite; display: inline-block; }
@keyframes gl-spin { to { transform: rotate(360deg); } }

/* ---------- ozet */
.gl-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.gl-stat { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 11px 14px 12px; display: grid; gap: 2px; min-width: 0; }
.gl-stat span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl-stat b { font-size: 20px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.gl-stat em { font-style: normal; font-size: 11.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl-stat .s, .gl-areasel { display: none; }

/* ---------- suzgec */
.gl-filters { display: grid; gap: 10px; position: sticky; top: -28px; z-index: 2; padding: 10px 0; margin: -6px 0 -4px;
  background: linear-gradient(var(--bg) 82%, transparent); }
.gl-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; min-width: 0; }
.gl-row2 { flex-wrap: nowrap; justify-content: space-between; gap: 12px; }
.gl-areas { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
.gl-chip { height: 30px; padding: 0 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--muted);
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; font-size: 12.5px; transition: border-color .12s ease, background .12s ease, color .12s ease; }
.gl-chip span { font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.gl-chip .ph { font-size: 14px; }
.gl-chip.on { background: var(--text); border-color: var(--text); color: var(--bg); }
.gl-chip.on span { color: inherit; opacity: .7; }
.gl-chip.area.on { background: var(--panel); color: var(--text); border-color: var(--gc, var(--text)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gc, var(--text)) 16%, transparent); }
.gl-chip:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--accent-soft); }
@media (hover: hover) and (pointer: fine) { .gl-chip:not(.on):hover { border-color: var(--faint); color: var(--text); } }
.gl-sort { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12.5px; flex: none; }
.gl-sort select { height: 30px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: 0 8px; color: var(--text); }

/* alan rengi */
.a-kolaylik { --gc: var(--gl-kolaylik); } .a-verim { --gc: var(--gl-verim); } .a-gorunum { --gc: var(--gl-gorunum); }
.a-guven { --gc: var(--gl-guven); } .a-bakim { --gc: var(--gl-bakim); } .a-cihaz { --gc: var(--gl-cihaz); } .a-diger { --gc: var(--gl-diger); }
.gl-chip.area .ph { color: var(--gc); }

/* ---------- kart */
.gl-list { display: grid; gap: 10px; }
.gl-card { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 16px 16px 14px 14px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: var(--gl-card-sh);
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s cubic-bezier(.2, .8, .3, 1); }
@media (hover: hover) and (pointer: fine) { .gl-card:hover { box-shadow: var(--gl-card-sh-h); border-color: color-mix(in srgb, var(--line) 60%, var(--faint)); } }
.gl-card.st-secildi { border-color: color-mix(in srgb, var(--gl-verim) 45%, var(--line)); }
.gl-card.st-calisiyor { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.gl-card.st-bitti, .gl-card.st-reddedildi { box-shadow: none; background: color-mix(in srgb, var(--panel) 60%, var(--bg)); }
.gl-card.st-reddedildi .gl-title, .gl-card.st-reddedildi .gl-why { color: var(--faint); }
.gl-rank { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; font-variant-numeric: tabular-nums;
  background: linear-gradient(160deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); color: var(--muted); }
.gl-rank b { font-size: 15px; font-weight: 600; color: var(--text); }
.gl-rank.none .ph { font-size: 17px; color: var(--faint); }
.gl-list .gl-card:nth-child(-n+3) .gl-rank:not(.none) { background: linear-gradient(160deg, color-mix(in srgb, var(--gl-hi) 22%, var(--panel)), var(--panel)); border-color: color-mix(in srgb, var(--gl-hi) 40%, var(--line)); }
.gl-body { min-width: 0; display: grid; gap: 7px; }
.gl-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.gl-area, .gl-st, .gl-job, .gl-new { height: 22px; padding: 0 8px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.gl-area { color: var(--gc); background: color-mix(in srgb, var(--gc) 11%, transparent); }
.gl-area .ph, .gl-st .ph, .gl-job .ph { font-size: 13px; }
.gl-st { color: var(--muted); background: var(--panel-2); }
.gl-st.s-secildi { color: var(--gl-verim); background: color-mix(in srgb, var(--gl-verim) 12%, transparent); }
.gl-st.s-calisiyor { color: var(--accent); background: var(--accent-soft); }
.gl-st.s-calisiyor .ph { animation: gl-spin 1.6s linear infinite; }
.gl-st.s-bitti { color: var(--gl-guven); background: color-mix(in srgb, var(--gl-guven) 12%, transparent); }
/* Isi Hazir ya da Canlida olunca kendiliginden biten fikir: dolu yesil rozet, yesil sira kutusu ve ince yesil kenar. */
.gl-st.s-bitti.by-job { color: var(--gl-done-ink); font-weight: 600; cursor: help;
  background: linear-gradient(160deg, var(--gl-done-a), var(--gl-done-b));
  box-shadow: 0 1px 0 rgb(255 255 255 / .22) inset, 0 1px 3px -1px color-mix(in srgb, var(--gl-guven) 55%, transparent); }
.gl-card.st-bitti.by-job { border-color: color-mix(in srgb, var(--gl-guven) 35%, var(--line)); }
.gl-card.st-bitti.by-job .gl-rank { border-color: color-mix(in srgb, var(--gl-guven) 40%, var(--line));
  background: linear-gradient(160deg, color-mix(in srgb, var(--gl-guven) 18%, var(--panel)), var(--panel)); }
.gl-card.st-bitti.by-job .gl-rank .ph { color: var(--gl-guven); }
.gl-job { border: 1px solid var(--line); background: var(--panel); color: var(--text); cursor: pointer; }
.gl-job.off { color: var(--faint); cursor: default; }
@media (hover: hover) and (pointer: fine) { .gl-job:not(.off):hover { border-color: var(--accent); color: var(--accent); } }
.gl-new { color: var(--faint); padding: 0 2px; }
.gl-title { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.01em; line-height: 1.35; }
.gl-title button { all: unset; cursor: pointer; display: inline; }
.gl-title button .ph { font-size: 13px; color: var(--faint); margin-left: 6px; vertical-align: 1px; transition: color .12s ease; }
.gl-title button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
@media (hover: hover) and (pointer: fine) { .gl-title button:hover .ph { color: var(--text); } }
.gl-why { margin: 0; color: var(--muted); line-height: 1.5; }
.gl-card:not(.open) .gl-why { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gl-meta { display: flex; align-items: center; gap: 6px 16px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-top: 1px; }
.gl-m { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.gl-m .k { color: var(--faint); }
.gl-m b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.gl-m .ph { font-size: 14px; color: var(--faint); }
.gl-pips { display: inline-flex; gap: 2px; }
.gl-pips i { width: 9px; height: 5px; border-radius: 2px; background: var(--panel-2); border: 1px solid var(--line); }
.gl-pips.b i.on { background: var(--gl-hi); border-color: transparent; }
.gl-pips.e i.on { background: var(--gl-verim); border-color: transparent; }
.gl-files { display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%; font-family: "Geist Mono", ui-monospace, monospace; font-size: 11.5px; color: var(--faint); overflow: hidden; }
.gl-files .ph { font-size: 14px; flex: none; }
.gl-files em { font-style: normal; }
.gl-more { display: grid; gap: 12px; padding: 12px 14px; margin-top: 4px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); }
.gl-sec h3 { margin: 0 0 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.gl-ornek { font-style: italic; border: 1px dashed var(--line); padding: 0 7px !important; }
.gl-sec p { margin: 0; line-height: 1.55; }
.gl-sec ul { margin: 0; padding-left: 18px; display: grid; gap: 3px; line-height: 1.5; }
.gl-ev p { color: var(--muted); font-size: 12.5px; }
.gl-fl { margin-top: 6px !important; display: flex; flex-wrap: wrap; gap: 4px; }
.gl-fl code, .gl-file code { font: 11.5px "Geist Mono", ui-monospace, monospace; padding: 1px 6px; border-radius: 5px; background: var(--panel-2); color: var(--text); word-break: break-all; }
.gl-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.gl-acts .btn { height: 30px; padding: 0 10px; gap: 6px; font-size: 12.5px; }
.gl-acts .btn .ph { font-size: 14px; }
.gl-acts .gl-go { font-weight: 600; padding: 0 12px; }
.gl-acts .gl-no { color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .gl-acts .gl-no:hover { color: var(--bad); } }

/* oncelik kutusu */
/* Oncelik: kucuk, sakin bir etiket; sira rozetiyle yarismasin. */
.gl-score { justify-self: end; min-width: 54px; padding: 5px 8px 6px; border-radius: 9px; text-align: center; display: grid; gap: 0;
  color: var(--tc); background: color-mix(in srgb, var(--tc) 10%, transparent); }
.gl-score span { font-size: 10px; font-weight: 500; letter-spacing: .02em; color: var(--muted); }
.gl-score b { font-size: 16px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; line-height: 1.2; }
.gl-score.t-hi { --tc: var(--gl-hi); } .gl-score.t-mid { --tc: var(--gl-mid); } .gl-score.t-lo { --tc: var(--gl-lo); }

.gl-empty { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 36px 16px; border: 1px dashed var(--line); border-radius: 14px; color: var(--muted); }
.gl-empty .ph { font-size: 18px; }

/* ---------- uretim gecmisi */
.gl-runs { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 0 14px; }
.gl-runs summary { display: flex; align-items: center; gap: 8px; height: 42px; cursor: pointer; font-weight: 500; list-style: none; }
.gl-runs summary::-webkit-details-marker { display: none; }
.gl-runs summary span { color: var(--faint); font-weight: 400; font-size: 12px; }
.gl-runs summary .ph { color: var(--muted); }
.gl-runs ul { margin: 0 0 10px; padding: 0; list-style: none; display: grid; gap: 2px; }
.gl-runs li { display: flex; gap: 12px; align-items: baseline; font-size: 12.5px; padding: 5px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.gl-runs li .w { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 132px; }
.gl-runs li .b { color: var(--faint); min-width: 64px; }
.gl-runs li .r { flex: 1; min-width: 180px; }
.gl-runs li .c { color: var(--faint); font-variant-numeric: tabular-nums; }
.gl-runs li.bad .r { color: var(--bad); }
.gl-runs p { margin: 0 0 12px; font-size: 12.5px; }
.gl-file { color: var(--faint); line-height: 1.6; }

/* ---------- istem penceresi */
.gl-dlg { width: min(760px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); }
.gl-dlg form { display: grid; gap: 10px; }
.gl-dh { display: flex; align-items: flex-start; gap: 12px; }
.gl-dh h2 { flex: 1; margin: 0; font-size: 17px; line-height: 1.35; }
.gl-dsub { margin: -4px 0 2px; color: var(--muted); font-size: 12.5px; }
.gl-dl { font-size: 12px; font-weight: 600; color: var(--muted); }
.gl-dlg textarea { width: 100%; min-height: 280px; height: 44dvh; resize: vertical; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg); color: var(--text); font: 12.5px/1.6 "Geist Mono", ui-monospace, monospace; outline: 0; }
.gl-dlg textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.gl-dnote { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--accent-soft); font-size: 12.5px; line-height: 1.5; }
.gl-dnote .ph { color: var(--accent); font-size: 16px; margin-top: 1px; flex: none; }
.gl-dlg .actions { flex-wrap: wrap; }

/* ---------- dar pencere */
@media (max-width: 720px) {
  #gelisim .gl-wrap { gap: 12px; }
  .gl-hero { padding: 14px 14px 14px; gap: 12px; border-radius: 12px; }
  .gl-hero h1 { font-size: 18px; margin-bottom: 4px; }
  .gl-hero h1 .ph { width: 28px; height: 28px; font-size: 17px; border-radius: 8px; }
  .gl-hero p { font-size: 12.5px; line-height: 1.5; }
  .gl-gen { justify-content: start; grid-template-columns: auto 1fr; width: 100%; gap: 6px 12px; }
  .gl-genbtn { height: 34px; padding: 0 12px; }
  .gl-next { justify-self: start; }
  /* Ozet: dort kucuk kutu tek satir, kisa etiket */
  .gl-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .gl-stat { padding: 7px 8px 8px; border-radius: 10px; gap: 0; }
  .gl-stat .l, .gl-stat em { display: none; }
  .gl-stat .s { display: block; font-size: 11px; }
  .gl-stat b { font-size: 16px; }
  /* Suzgec: durum cipleri kaydirilir (sagda belirgin solma + yapisma), alan ve siralama acilir liste */
  .gl-filters { top: -18px; gap: 8px; padding: 8px 0; }
  .gl-filters .gl-row:first-child { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; margin: 0 -14px; padding: 0 44px 0 14px;
    mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
  .gl-filters .gl-row:first-child::-webkit-scrollbar { display: none; }
  .gl-filters .gl-row:first-child .gl-chip { scroll-snap-align: start; }
  .gl-areas { display: none; }
  .gl-row2 { flex-wrap: nowrap; justify-content: flex-start; gap: 8px; }
  .gl-areasel { display: inline-flex; flex: 1 1 auto; min-width: 0; }
  .gl-sort { gap: 6px; }
  .gl-sort span { display: none; }
  .gl-sort select { min-width: 0; width: 100%; }
  .gl-areasel select { flex: 1; }
  /* Yeni kabuk: Gelisim acikken Atolye menusu ustte yatay serit (diger Atolye sayfalarina dokunmaz). */
  html.isl-on[data-isv="atolye"]:has(#gelisim:not([hidden])) .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  html.isl-on[data-isv="atolye"]:has(#gelisim:not([hidden])) .is-atl { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 8px 40px 8px 10px; gap: 4px; scrollbar-width: none;
    mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
  html.isl-on[data-isv="atolye"]:has(#gelisim:not([hidden])) .is-atl::-webkit-scrollbar { display: none; }
  html.isl-on[data-isv="atolye"]:has(#gelisim:not([hidden])) .is-atl h3 { display: none; }
  html.isl-on[data-isv="atolye"]:has(#gelisim:not([hidden])) .is-atl button { flex: none; white-space: nowrap; }
  html.isl-on[data-isv="atolye"]:has(#gelisim:not([hidden])) .is-atl .is-atl-old { margin-top: 0; margin-left: auto; }
}
@media (max-width: 520px) {
  .gl-card { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; padding: 14px; }
  .gl-rank { grid-column: 1; grid-row: 1; width: 30px; height: 30px; border-radius: 9px; }
  .gl-rank b { font-size: 13.5px; }
  .gl-body { grid-column: 1 / -1; grid-row: 2; }
  .gl-score { grid-column: 2; grid-row: 1; align-self: center; width: auto; display: flex; align-items: baseline; gap: 6px; padding: 4px 10px; }
  .gl-score b { font-size: 16px; }
  .gl-acts .gl-lbl { display: none; }
  .gl-acts .btn:not(.gl-go) { padding: 0 9px; }
  .gl-acts .gl-go { flex: 1; justify-content: center; }
  .gl-meta { gap: 6px 12px; }
  .gl-files { flex-basis: 100%; }
  .gl-hero h1 { font-size: 20px; }
  .gl-dlg textarea { height: 50dvh; min-height: 200px; }
}
@media (prefers-reduced-motion: reduce) { .gl-spin, .gl-st.s-calisiyor .ph { animation: none; } .gl-card { transition: none; } }

/* Toplu secim, yapilanlar kontrolu ve kanit satirlari */
.gl-rank { position: relative; }
.gl-pick { position: absolute; top: -8px; left: -8px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; background: var(--panel, var(--bg)); border: 1px solid var(--line); cursor: pointer; }
.gl-pick input { margin: 0; width: 14px; height: 14px; cursor: pointer; accent-color: var(--gl-mid); }
.gl-card.sel { outline: 2px solid color-mix(in srgb, var(--gl-mid) 60%, transparent); outline-offset: -1px; }
.gl-selbar { position: sticky; top: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 0 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); font-size: 13px; }
.gl-selbar.on { border-color: color-mix(in srgb, var(--gl-mid) 50%, var(--line)); background: color-mix(in srgb, var(--gl-mid) 6%, var(--bg)); }
.gl-selall { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap; }
.gl-selall input { accent-color: var(--gl-mid); }
.gl-selinfo { color: var(--muted); }
.gl-sp { flex: 1; }
.gl-chk { margin-top: 6px; }
.gl-next.bad { color: #c9443a; }
.gl-evd { display: flex; align-items: flex-start; gap: 8px; margin: 6px 0 2px; padding: 6px 10px; border-radius: 8px; font-size: 12.5px; line-height: 1.45; }
.gl-evd > i { margin-top: 2px; flex: none; }
.gl-evd > span { flex: 1; min-width: 0; }
.gl-evd code { font-size: 11.5px; opacity: .8; }
.gl-evd.ok { background: color-mix(in srgb, var(--gl-hi) 10%, transparent); }
.gl-evd.half { background: color-mix(in srgb, var(--gl-mid) 9%, transparent); }
.gl-evd.warn { background: color-mix(in srgb, #e2a632 14%, transparent); align-items: center; }
.gl-evd .btn { flex: none; }
.gl-donelog li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; }
@media (max-width: 720px) { .gl-selbar .btn { flex: 1 1 auto; } .gl-donelog li { grid-template-columns: 1fr; gap: 2px; } }