/* SlideWeb — layout: app chrome (top bar) over either the slide library grid
   or the viewer workstation (tool rail | panes | side panel). */
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url(../vendor/fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap; src: url(../vendor/fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url(../vendor/fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url(../vendor/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url(../vendor/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Fraunces"; font-weight: 600; font-display: swap; src: url(../vendor/fonts/fraunces-latin-600-normal.woff2) format("woff2"); }

:root {
  --bg: #eef0f4;
  --panel: #ffffff;
  --panel-2: #f6f7fa;
  --ink: #1d2030;
  --muted: #5d6276;
  --line: #d9dce6;
  --stage: #2b2e38;
  --hema: #3f3f9a;
  --hema-ink: #ffffff;
  --hema-soft: #e5e5f5;
  --dab: #a5621c;
  --dab-soft: #f6e9dc;
  --chip: #f1f2f6;
  --danger: #b3261e;
  --danger-soft: #fbe9e7;
  --ok: #2e7d4f;
  --shadow: 0 6px 24px rgb(20 22 40 / .14);
  --f-display: "Fraunces", Georgia, "Times New Roman", serif;
  --f-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --r: 7px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #12141c; --panel: #1a1d28; --panel-2: #20232f; --ink: #e6e7ef; --muted: #9a9fb3; --line: #2e3242;
    --stage: #0c0d12; --hema: #9fa2ff; --hema-ink: #12141c; --hema-soft: #262a48; --dab: #e0a35c; --dab-soft: #3a2c1e;
    --chip: #232736; --danger: #ff8a80; --danger-soft: #3b1f1d; --ok: #7fd3a0; --shadow: 0 8px 28px rgb(0 0 0 / .5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #12141c; --panel: #1a1d28; --panel-2: #20232f; --ink: #e6e7ef; --muted: #9a9fb3; --line: #2e3242;
  --stage: #0c0d12; --hema: #9fa2ff; --hema-ink: #12141c; --hema-soft: #262a48; --dab: #e0a35c; --dab-soft: #3a2c1e;
  --chip: #232736; --danger: #ff8a80; --danger-soft: #3b1f1d; --ok: #7fd3a0; --shadow: 0 8px 28px rgb(0 0 0 / .5);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.45 var(--f-body); -webkit-font-smoothing: antialiased; }
#app { height: 100%; }
a { color: var(--hema); }
h1, h2, h3 { text-wrap: balance; }
.mono, .num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }

/* ---------- controls ---------- */
button, .btn {
  font: 500 13px/1.2 var(--f-body); color: var(--ink); background: var(--chip);
  border: 1px solid var(--line); border-radius: 6px; padding: 7px 12px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; text-decoration: none;
}
button:hover, .btn:hover { border-color: var(--hema); }
button:disabled { opacity: .45; cursor: default; border-color: var(--line); }
button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--hema); outline-offset: 2px;
}
button.primary, .btn.primary { background: var(--hema); color: var(--hema-ink); border-color: var(--hema); }
button.danger { color: var(--danger); }
button.danger.solid { background: var(--danger); color: #fff; border-color: var(--danger); }
button.ghost { background: transparent; border-color: transparent; }
button.ghost:hover { background: var(--chip); border-color: var(--line); }
button.on { background: var(--dab); border-color: var(--dab); color: #fff; }
button.icon { padding: 6px; width: 34px; height: 34px; }
button svg, .btn svg { width: 18px; height: 18px; flex: none; }
input[type=text], input[type=password], input[type=search], input[type=number], select, textarea {
  font: 13.5px var(--f-body); color: var(--ink); background: var(--panel); border: 1px solid var(--line);
  border-radius: 6px; padding: 7px 9px; width: 100%; min-width: 0;
}
textarea { resize: vertical; min-height: 64px; }
input[type=color] { width: 40px; height: 32px; padding: 2px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
input[type=range] { width: 100%; accent-color: var(--hema); }
input[type=checkbox] { accent-color: var(--hema); width: 16px; height: 16px; }
label.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.field { display: grid; gap: 5px; }
.field > span { font-size: 12px; color: var(--muted); }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }
.badge { font: 500 11px var(--f-mono); background: var(--chip); border: 1px solid var(--line); border-radius: 99px; padding: 1px 7px; color: var(--muted); }
.badge.accent { background: var(--hema-soft); color: var(--hema); border-color: transparent; }
.kbd { font: 500 11px var(--f-mono); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; background: var(--panel-2); }

/* ---------- top bar ---------- */
.topbar {
  display: flex; align-items: center; gap: 10px; min-height: 52px;
  padding-block: 8px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  background: var(--panel); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); flex: none; }
.brand img { width: 26px; height: 26px; }
.brand b { font: 600 18px var(--f-display); letter-spacing: -0.01em; }
.topbar .title { min-width: 0; display: flex; align-items: baseline; gap: 10px; }
.topbar .title strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu { position: relative; }
.menu .pop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 220px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 9px; box-shadow: var(--shadow); padding: 6px; display: grid;
}
.menu .pop button { justify-content: flex-start; background: transparent; border-color: transparent; width: 100%; }
.menu .pop button:hover { background: var(--chip); }
.menu .pop hr { border: 0; border-top: 1px solid var(--line); margin: 5px 2px; }
.menu .pop .who { padding: 6px 10px 8px; font-size: 12.5px; color: var(--muted); }

/* ---------- login ---------- */
.login { min-height: 100%; display: grid; place-items: center; padding: 24px max(16px, env(safe-area-inset-left, 0px)); }
.login form { width: min(380px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 30px 28px; display: grid; gap: 14px; box-shadow: var(--shadow); }
.login h1 { font: 600 26px var(--f-display); margin: 4px 0 0; }
.login p { margin: 0 0 6px; color: var(--muted); }
.login .err { color: var(--danger); font-weight: 500; min-height: 1.4em; margin: 0; }

/* ---------- library ---------- */
.lib { height: 100%; display: grid; grid-template-rows: auto auto 1fr; }
.libbar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding-block: 12px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  border-bottom: 1px solid var(--line); background: var(--panel-2);
}
.crumbs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; min-width: 0; font-size: 14px; }
.crumbs a { color: var(--ink); text-decoration: none; padding: 3px 6px; border-radius: 5px; }
.crumbs a:hover { background: var(--chip); }
.crumbs .sep { color: var(--muted); }
.crumbs a:last-child { font-weight: 600; }
.libbar .search { width: min(280px, 100%); }
.libbody { overflow-y: auto; padding-block: 18px 40px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.libbody.over { outline: 2px dashed var(--hema); outline-offset: -10px; background: var(--hema-soft); }
.section-h { font: 600 11px var(--f-body); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 6px 0 10px; }
.folders { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin-bottom: 24px; }
.folder { display: flex; align-items: center; gap: 10px; padding: 11px 13px; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; cursor: pointer; text-align: left; justify-content: flex-start; font-weight: 500; }
.folder svg { color: var(--dab); width: 22px; height: 22px; }
.folder .n { margin-left: auto; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 11px; overflow: hidden; display: grid; grid-template-rows: auto 1fr; position: relative; }
.card:hover { border-color: var(--hema); }
.card.sel { outline: 2px solid var(--dab); outline-offset: -1px; }
.card .pics { display: grid; grid-template-columns: 34% 1fr; grid-template-rows: 150px; height: 150px; overflow: hidden; background: var(--chip); cursor: pointer; border-bottom: 1px solid var(--line); }
.card .pics.nolabel { grid-template-columns: 1fr; }
.card .pics img { width: 100%; height: 100%; min-height: 0; object-fit: contain; display: block; background: #f4f4f4; }
.card .pics .lbl { background: #3a3d48; object-fit: cover; }
.card .body { padding: 10px 12px 12px; display: grid; gap: 4px; min-width: 0; }
.card .name { font-weight: 600; overflow-wrap: anywhere; cursor: pointer; }
.card .meta { font: 12px var(--f-mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.card .err { font-size: 12px; color: var(--danger); }
.card .acts { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; }
.card .acts button { background: var(--panel); box-shadow: 0 1px 4px rgb(0 0 0 / .2); width: 30px; height: 30px; padding: 4px; }
.card .pick { position: absolute; top: 8px; left: 8px; background: var(--panel); border-radius: 6px; padding: 5px; display: flex; box-shadow: 0 1px 4px rgb(0 0 0 / .2); }
.listv { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.listv th, .listv td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: 13px; }
.listv td.num, .listv th.num { text-align: right; }
.listv tr:hover td { background: var(--panel-2); }
.listv .nm { cursor: pointer; font-weight: 500; }
.tablewrap { overflow-x: auto; }
.empty-state { max-width: 560px; margin: 50px auto; text-align: center; display: grid; gap: 12px; justify-items: center; }
.empty-state h2 { font: 600 24px var(--f-display); margin: 0; }
.empty-state p { margin: 0; color: var(--muted); line-height: 1.6; }
.comparebar { position: sticky; bottom: 14px; margin: 18px auto 0; width: fit-content; max-width: 100%; display: flex; gap: 10px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px 8px 14px; box-shadow: var(--shadow); }

/* uploads */
.uploads { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); width: min(380px, calc(100vw - 32px)); background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); z-index: 50; display: grid; max-height: 50vh; }
.uploads header { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); font-weight: 600; }
.uploads .items { overflow-y: auto; padding: 6px 12px 10px; display: grid; gap: 10px; }
.up { display: grid; gap: 4px; font-size: 12.5px; }
.up .nm { display: flex; justify-content: space-between; gap: 8px; }
.up .nm span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar { height: 5px; background: var(--chip); border-radius: 9px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: var(--hema); transition: width .2s; }
.up.done .bar i { background: var(--ok); }
.up.fail .bar i { background: var(--danger); }
.up.fail .st { color: var(--danger); }

/* ---------- viewer workstation ---------- */
.viewer { height: 100%; display: grid; grid-template-rows: auto 1fr; }
.vbar .seg { display: inline-flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.vbar .seg button { border: 0; border-radius: 0; background: var(--panel); }
.vbar .seg button + button { border-left: 1px solid var(--line); }
.vbar .seg button.on { background: var(--hema); color: var(--hema-ink); }
.work { display: grid; grid-template-columns: 52px minmax(0, 1fr) 330px; min-height: 0; }
.work.noside { grid-template-columns: 52px minmax(0, 1fr) 0; }
.work.noside .side { display: none; }
.rail { background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 0; overflow-y: auto; }
.rail button { width: 38px; height: 38px; padding: 0; border-color: transparent; background: transparent; color: var(--ink); position: relative; }
.rail button:hover { background: var(--chip); border-color: var(--line); }
.rail button.on { background: var(--hema); color: var(--hema-ink); border-color: var(--hema); }
.rail button.tog.on { background: var(--dab); border-color: var(--dab); color: #fff; }
.rail hr { width: 26px; border: 0; border-top: 1px solid var(--line); margin: 5px 0; }
.rail svg { width: 20px; height: 20px; }

.panes { display: grid; gap: 2px; background: var(--line); min-height: 0; min-width: 0; }
.panes.l1 { grid-template: 1fr / 1fr; }
.panes.l2 { grid-template: 1fr / 1fr 1fr; }
.panes.l4 { grid-template: 1fr 1fr / 1fr 1fr; }
.pane { position: relative; background: var(--stage); min-height: 0; min-width: 0; overflow: hidden; }
.pane.active::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--dab); pointer-events: none; z-index: 20; }
.panes.l1 .pane.active::after { display: none; }
.pane .osd { position: absolute !important; inset: 0; z-index: 0; isolation: isolate; }
.pane canvas.ov { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; }
.pane canvas.ov.capture { pointer-events: auto; cursor: crosshair; }
.pane canvas.ov.capture.move { cursor: move; }
.pane .phead { position: absolute; top: 8px; left: 8px; right: 60px; z-index: 12; display: flex; gap: 6px; align-items: center; pointer-events: none; }
.pane .phead > * { pointer-events: auto; }
.pane .phead .nm { background: rgb(20 22 30 / .78); color: #fff; font-size: 12px; padding: 4px 9px; border-radius: 6px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pane .phead button { background: rgb(20 22 30 / .78); color: #fff; border-color: transparent; padding: 4px 8px; font-size: 12px; }
.pane .magbar { position: absolute; right: 8px; top: 8px; z-index: 12; display: grid; background: rgb(20 22 30 / .82); border-radius: 8px; overflow: hidden; }
.pane .magbar button { border: 0; border-radius: 0; background: transparent; color: #e8e8ee; font: 500 11.5px var(--f-mono); padding: 6px 8px; min-width: 44px; }
.pane .magbar button:hover { background: rgb(255 255 255 / .12); }
.pane .magbar button.cur { color: #ffc98a; }
.pane .hud { position: absolute; left: 10px; bottom: 10px; z-index: 12; display: grid; gap: 6px; justify-items: start; pointer-events: none; }
.pane .scalebar { background: rgb(255 255 255 / .9); color: #111; border-radius: 5px; padding: 3px 8px 5px; font: 500 11px var(--f-mono); }
.pane .scalebar .b { height: 6px; border: 2px solid #111; border-top: 0; margin-top: 2px; }
.pane .readout { background: rgb(20 22 30 / .82); color: #e8e8ee; border-radius: 5px; padding: 4px 8px; font: 11.5px var(--f-mono); font-variant-numeric: tabular-nums; display: flex; gap: 12px; flex-wrap: wrap; }
.pane .readout b { color: #ffc98a; font-weight: 500; }
.pane .emptyp { position: absolute; inset: 0; display: grid; place-items: center; z-index: 13; color: #c9cbd6; text-align: center; padding: 20px; }
.pane .emptyp div { display: grid; gap: 10px; justify-items: center; }
.pane .loading { position: absolute; inset: 0; display: grid; place-items: center; color: #c9cbd6; z-index: 13; font: 13px var(--f-mono); }
.pane .perr { position: absolute; inset: 0; display: grid; place-items: center; z-index: 13; color: #ffb4ab; padding: 30px; text-align: center; }
.navigator-wrap { position: relative; }
canvas.trail { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.loupe { position: fixed; width: 260px; height: 260px; border-radius: 50%; overflow: hidden; z-index: 40; pointer-events: none; border: 3px solid var(--dab); box-shadow: 0 6px 30px rgb(0 0 0 / .45); background: var(--stage); }
.loupe .osd { position: absolute !important; inset: 0; }
.loupe .tag { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); background: rgb(20 22 30 / .8); color: #ffc98a; font: 11px var(--f-mono); padding: 2px 7px; border-radius: 9px; z-index: 2; }
.draw-hint { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 14; background: rgb(20 22 30 / .86); color: #fff; font-size: 12.5px; padding: 6px 12px; border-radius: 8px; pointer-events: none; max-width: calc(100% - 140px); text-align: center; }

/* side panel */
.side { background: var(--panel); border-left: 1px solid var(--line); display: grid; grid-template-rows: auto 1fr; min-height: 0; min-width: 0; }
.tabs { display: flex; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tabs button { flex: 1; border: 0; border-radius: 0; background: transparent; padding: 11px 6px; font-size: 12.5px; color: var(--muted); border-bottom: 2px solid transparent; }
.tabs button.on { color: var(--ink); border-bottom-color: var(--hema); font-weight: 600; }
.tabbody { overflow-y: auto; min-height: 0; }
.sec { padding: 14px 16px; border-bottom: 1px solid var(--line); display: grid; gap: 10px; }
.sec h3 { margin: 0; font: 600 11px var(--f-body); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.sec h3 .spacer { flex: 1; }
dl.kv { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; }
dl.kv dt { color: var(--muted); font-size: 13px; }
dl.kv dd { margin: 0; text-align: right; font: 12.5px var(--f-mono); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; min-width: 0; }
.bigmag { display: flex; align-items: baseline; gap: 8px; }
.bigmag strong { font: 600 32px/1 var(--f-display); color: var(--hema); }
.assoc { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.assoc figure { margin: 0; display: grid; gap: 4px; cursor: zoom-in; }
.assoc figure.wide { grid-column: 1 / -1; }
.assoc img { width: 100%; border: 1px solid var(--line); border-radius: 5px; background: var(--chip); display: block; }
.assoc figcaption { font-size: 11.5px; color: var(--muted); }
table.mini { width: 100%; border-collapse: collapse; font: 12px var(--f-mono); font-variant-numeric: tabular-nums; }
table.mini th, table.mini td { text-align: right; padding: 4px 5px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.mini th { font: 600 11px var(--f-body); color: var(--muted); }
table.mini th:first-child, table.mini td:first-child { text-align: left; }
pre.raw { font: 11px/1.5 var(--f-mono); white-space: pre-wrap; overflow-wrap: anywhere; background: var(--chip); padding: 10px; border-radius: 6px; margin: 8px 0 0; max-height: 340px; overflow: auto; }
details summary { cursor: pointer; color: var(--muted); font-size: 12.5px; }

.annlist { display: grid; }
.ann { display: grid; grid-template-columns: 14px 1fr auto; gap: 8px; align-items: center; padding: 8px 16px; border-bottom: 1px solid var(--line); cursor: pointer; }
.ann:hover { background: var(--panel-2); }
.ann.sel { background: var(--hema-soft); }
.ann .sw { width: 12px; height: 12px; border-radius: 3px; }
.ann .t { min-width: 0; }
.ann .t b { font-weight: 500; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ann .t small { font: 11.5px var(--f-mono); color: var(--muted); }
.ann .a { display: flex; gap: 2px; }
.ann .a button { width: 28px; height: 28px; padding: 4px; background: transparent; border-color: transparent; }
.ann .a button:hover { border-color: var(--line); background: var(--panel); }
.ann.hid .t { opacity: .5; }
.editor { background: var(--panel-2); }
.measure { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 13px; }
.measure span:nth-child(odd) { color: var(--muted); }
.measure span:nth-child(even) { font-family: var(--f-mono); text-align: right; font-variant-numeric: tabular-nums; }
.slider { display: grid; grid-template-columns: 82px 1fr 44px; gap: 8px; align-items: center; font-size: 13px; }
.slider output { font: 12px var(--f-mono); text-align: right; }
.counter-classes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cls { display: grid; grid-template-columns: 14px 1fr auto; gap: 8px; align-items: center; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); cursor: pointer; text-align: left; justify-content: stretch; }
.cls .dot { width: 12px; height: 12px; border-radius: 50%; }
.cls b { font: 600 15px var(--f-mono); }
.cls.on { outline: 2px solid var(--hema); outline-offset: -1px; background: var(--hema-soft); color: var(--ink); border-color: var(--line); }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; display: grid; gap: 2px; }
.stat span { font-size: 11.5px; color: var(--muted); }
.stat b { font: 600 18px var(--f-mono); font-variant-numeric: tabular-nums; }
.hint { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 0; }

/* ---------- modal & toast ---------- */
.modal { position: fixed; inset: 0; z-index: 100; background: rgb(10 12 20 / .6); display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.modal .box { background: var(--panel); border-radius: 12px; box-shadow: var(--shadow); width: min(520px, 100%); max-height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.modal .box.wide { width: min(980px, 100%); }
.modal .mh { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.modal .mh strong { font: 600 18px var(--f-display); }
.modal .mb { padding: 16px 18px; overflow-y: auto; display: grid; gap: 12px; align-content: start; }
.modal .mf { padding: 12px 18px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.modal img.big { max-width: 100%; max-height: 70vh; display: block; margin: 0 auto; border-radius: 6px; }
.modal .err { color: var(--danger); font-weight: 500; margin: 0; }
#toasts { position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 200; display: grid; gap: 8px; justify-items: center; pointer-events: none; }
.toast { background: var(--ink); color: var(--panel); padding: 9px 16px; border-radius: 9px; font-weight: 500; box-shadow: var(--shadow); max-width: min(560px, calc(100vw - 32px)); }
.toast.err { background: var(--danger); color: #fff; }
.picker-list { display: grid; gap: 4px; }
.picker-list button { justify-content: flex-start; background: transparent; border-color: transparent; text-align: left; }
.picker-list button:hover { background: var(--chip); }
.shortcuts { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 13px; }
.users td, .users th { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: left; font-size: 13px; }
.users { width: 100%; border-collapse: collapse; }

@media (max-width: 1100px) {
  .work { grid-template-columns: 52px minmax(0, 1fr) 290px; }
}
@media (max-width: 820px) {
  .viewer { height: auto; min-height: 100%; }
  .work, .work.noside { grid-template-columns: minmax(0, 1fr); }
  .topbar { flex-wrap: wrap; row-gap: 6px; }
  .topbar .title { flex: 1 1 140px; }
  .topbar .title strong { font-size: 13px; }
  .vbar .seg { display: none; }
  .rail { flex-direction: row; flex-wrap: wrap; justify-content: center; border-right: 0; border-bottom: 1px solid var(--line); padding: 6px; }
  .rail hr { width: 1px; height: 24px; border-top: 0; border-left: 1px solid var(--line); margin: 0 4px; }
  .panes { height: 68vh; min-height: 360px; }
  .panes.l2, .panes.l4 { grid-template: 1fr 1fr / 1fr; }
  .side { border-left: 0; border-top: 1px solid var(--line); }
  .work.noside .side { display: grid; }
  .topbar .hide-sm { display: none; }
  .cards { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* =====================================================================
   Slide library, SlideManage-style layout: blue top bar, dark folder
   sidebar, toolbar of coloured action buttons, numbered slide cards.
   ===================================================================== */
:root {
  --sm-top: #3c8dbc; --sm-top-dark: #367fa9; --sm-side: #222d32; --sm-side-2: #1a2226; --sm-side-ink: #b8c7ce;
  --sm-green: #00a65a; --sm-orange: #f39c12; --sm-red: #dd4b39; --sm-purple: #605ca8; --sm-dark: #111111;
  --sm-indigo: #5b5fc7; --sm-teal: #00a7a7; --sm-blue: #3c8dbc; --sm-page: #ecf0f5; --sm-card: #ffffff; --sm-cardline: #d2d6de;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sm-page: #12141c; --sm-card: #1a1d28; --sm-cardline: #2e3242; } }
:root[data-theme="dark"] { --sm-page: #12141c; --sm-card: #1a1d28; --sm-cardline: #2e3242; }

.sm { height: 100%; display: grid; grid-template-rows: 50px minmax(0, 1fr); background: var(--sm-page); }
.sm-top { display: flex; align-items: center; gap: 4px; background: var(--sm-top); color: #fff; padding-left: env(safe-area-inset-left, 0px); padding-right: max(12px, env(safe-area-inset-right, 0px)); }
.sm-top a, .sm-top button { color: #fff; }
.sm-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; width: 230px; height: 50px; padding: 0 16px; background: var(--sm-top-dark); flex: none; }
.sm-brand { justify-content: center; color: #fff; font: 300 20px/50px "Helvetica Neue", Helvetica, Arial, sans-serif; }
.sm-brand b { font-weight: 700; }
.sm-burger { order: 1; width: 46px; height: 50px; border: 0; border-radius: 0; background: transparent; padding: 13px; }
.sm-burger:hover { background: var(--sm-top-dark); border: 0; }
.sm-brand { order: 0; }
.sm-nav { order: 2; display: flex; }
.sm-nav a { padding: 0 15px; line-height: 50px; text-decoration: none; font-size: 14.5px; }
.sm-nav a:hover, .sm-nav a.on { background: var(--sm-top-dark); }
.sm-top .spacer { order: 3; }
.sm-user { order: 4; display: flex; align-items: center; gap: 8px; }
.sm-user .menu > button { background: transparent; border-color: transparent; color: #fff; }
.sm-user .menu > button:hover { background: var(--sm-top-dark); }
.sm-user .menu .pop { color: var(--ink); }
.sm-user .menu .pop button { color: var(--ink); }
.sm-uname { font-size: 14px; white-space: nowrap; }

.sm-shell { display: grid; grid-template-columns: 230px minmax(0, 1fr); min-height: 0; }
.sm-shell.closed { grid-template-columns: 0 minmax(0, 1fr); }
.sm-shell.closed .sm-side { visibility: hidden; }
.sm-side { background: var(--sm-side); color: var(--sm-side-ink); overflow-y: auto; min-height: 0; display: flex; flex-direction: column; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
/* AdminLTE .sidebar-form */
.sm-sideform { margin: 10px; border: 1px solid #374850; border-radius: 3px; }
.sm-sidesearch { display: flex; background: #374850; }
.sm-sidesearch input { flex: 1; min-width: 0; height: 35px; background: #374850; border: 0; border-radius: 0; color: #fff; padding: 6px 10px; font-size: 14px; box-shadow: none; }
.sm-sidesearch input::placeholder { color: #999; }
.sm-sidesearch input:focus { background: #fff; color: #666; outline: 0; }
.sm-sidesearch button { width: 38px; height: 35px; padding: 0 11px; border: 0; border-radius: 0; background: #374850; color: #999; }
.sm-sidesearch button:hover { color: #fff; background: #374850; }
.sm-pills { display: flex; justify-content: center; gap: 12px; padding: 12px 8px 10px; border-top: 1px solid #374850; }
.sm-pill { font: 10px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; padding: 5px 7px; border-radius: 4px; border: 1px solid transparent; color: #fff; gap: 3px; display: inline-flex; align-items: center; }
.sm-pill span { width: 10px; height: 10px; display: inline-flex; flex: none; }
.sm-pill span svg { width: 10px; height: 10px; display: block; }
.sm-pill.purple { background: #605ca8; border-color: #555299; }
.sm-pill.olive { border-color: #368763; }
.sm-pill.on { box-shadow: inset 0 3px 5px rgba(0,0,0,.25); }
.sm-pill:hover { filter: brightness(1.1); }
/* "Slide Library" header row */
.sm-treehead { display: flex; align-items: center; gap: 9px; width: 100%; padding: 12px 15px 12px 15px; margin-top: 4px; background: #1e282c; color: #fff; font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif; border: 0; border-left: 3px solid transparent; border-radius: 0; text-align: left; cursor: pointer; }
.sm-treehead:hover { background: #1e282c; color: #fff; }
.sm-libicon { width: 15px; height: 15px; display: inline-flex; }
.sm-chev { margin-left: auto; width: 14px; display: inline-flex; transition: transform .15s; }
.sm-treehead.shut .sm-chev { transform: rotate(-90deg); }
/* zTree (default skin: dotted connectors, boxed +/- switches) */
.sm-tree { background: #2c3b41; padding: 8px 6px 24px 10px; flex: 1; }
.sm-ztree, .sm-ztree ul { list-style: none; margin: 0; padding: 0; }
.sm-ztree ul { padding-left: 18px; }
.sm-ztree li { position: relative; padding-left: 18px; white-space: nowrap; }
.sm-ztree li::before { content: ""; position: absolute; left: 8px; top: 0; bottom: 0; border-left: 1px dotted #b8c7ce; }
.sm-ztree li::after { content: ""; position: absolute; left: 9px; top: 11px; width: 8px; border-top: 1px dotted #b8c7ce; }
.sm-ztree li:last-child::before { bottom: auto; height: 11px; }
.sm-ztree > li:first-child::before { top: 11px; }
.sm-ztree > li:first-child:last-child::before { display: none; }
.zt-switch { position: absolute; z-index: 1; left: 3px; top: 5px; width: 11px; height: 11px; padding: 0; border: 1px solid #333; border-radius: 0; background: #fff; color: #000; font: 700 11px/9px Verdana, Arial, sans-serif; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: none; }
.zt-switch:hover { background: #fff; border-color: #000; color: #000; }
.zt-row { display: inline-flex; align-items: center; gap: 5px; height: 21px; margin: 0 0 1px 1px; padding: 0 4px 0 2px; border: 1px solid transparent; color: #e6e6e6; text-decoration: none; font: 13px/19px Verdana, Geneva, sans-serif; max-width: calc(100% - 2px); }
.zt-row:hover { text-decoration: underline; color: #fff; }
.zt-row.on { background: #d4d4d4; border-color: #9a9a9a; color: #111; }
.zt-row.on:hover { color: #000; }
.zt-ico { width: 16px; height: 16px; flex: none; display: inline-flex; }
.zt-name { overflow: hidden; text-overflow: ellipsis; }
.sm-muted { color: #8aa4af; font-size: 13px; padding: 8px 16px; margin: 0; }

.sm-main { overflow-y: auto; min-height: 0; padding-block: 12px 0; padding-left: 16px; padding-right: max(16px, env(safe-area-inset-right, 0px)); display: flex; flex-direction: column; }
.sm-main.over { outline: 2px dashed var(--sm-blue); outline-offset: -8px; }
.sm-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 26px; }
.sm-crumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.sm-crumbs a { color: var(--ink); text-decoration: none; display: inline-flex; gap: 5px; align-items: center; }
.sm-crumbs a span { width: 15px; display: inline-flex; }
.sm-crumbs a:hover { color: var(--sm-blue); }
.sm-crumbs .sep { color: #aaa; }
.sm-total { color: var(--muted); }
.sm-q { color: var(--sm-orange); }
.sm-selinfo { margin-left: auto; display: flex; gap: 8px; align-items: center; font-size: 13px; }
.sm-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 10px 0 14px; }
.sm-group { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sm-actions { margin-left: auto; }
.sm-btn { border: 1px solid transparent; border-radius: 3px; color: #fff; font: 500 13px var(--f-body); padding: 7px 12px; gap: 5px; }
.sm-btn span:not(.lbl) { width: 15px; display: inline-flex; }
.sm-btn svg { width: 15px; height: 15px; }
.sm-btn:hover { filter: brightness(0.92); border-color: transparent; }
.sm-btn:disabled { opacity: .55; filter: none; }
.sm-btn.green { background: var(--sm-green); } .sm-btn.orange { background: var(--sm-orange); } .sm-btn.red { background: var(--sm-red); }
.sm-btn.purple { background: var(--sm-purple); } .sm-btn.dark { background: var(--sm-dark); } .sm-btn.indigo { background: var(--sm-indigo); } .sm-btn.teal { background: var(--sm-teal); }
.sm-btn.green.active { box-shadow: inset 0 3px 5px rgb(0 0 0 / .25); background: #008d4c; }
.sm-check { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: var(--muted); margin-left: 6px; }
.sm-search { display: flex; flex: 1 1 260px; max-width: 340px; }
.sm-search input { border-radius: 0; border-right: 0; background: var(--sm-card); }
.sm-search .sm-btn { border-radius: 0; padding: 7px 11px; }
.sm-subfolders { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.sm-chip { display: inline-flex; gap: 6px; align-items: center; background: var(--sm-card); border: 1px solid var(--sm-cardline); border-radius: 3px; padding: 5px 10px; color: var(--ink); text-decoration: none; font-size: 13px; }
.sm-chip span { width: 15px; display: inline-flex; color: #e0a800; }
.sm-chip b { font: 500 11px var(--f-mono); color: var(--muted); }
.sm-body.loading { opacity: .55; transition: opacity .2s; }
.sm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px 28px; }
.sm-card { background: var(--sm-card); border: 1px solid var(--sm-cardline); box-shadow: 0 1px 1px rgb(0 0 0 / .08); padding: 8px 10px 10px; display: grid; justify-items: center; gap: 4px; position: relative; min-width: 0; }
.sm-card.sel { outline: 2px solid var(--sm-orange); outline-offset: -2px; }
.sm-cardtop { position: absolute; left: 6px; top: 4px; display: grid; justify-items: center; gap: 2px; }
.sm-no { color: var(--sm-blue); font: 600 15px var(--f-body); }
.sm-frame { width: calc(100% - 40px); margin-left: 22px; height: 78px; display: flex; gap: 4px; align-items: stretch; background: #fff; border: 1px solid #c9ccd3; box-shadow: 3px 3px 0 #e2e4e8, 0 0 0 4px #fff, 0 0 0 5px #c9ccd3; padding: 3px; cursor: pointer; margin-top: 6px; margin-bottom: 6px; }
.sm-frame img { height: 100%; object-fit: cover; display: block; background: #e9ebee; min-width: 0; }
.sm-label { width: 34%; flex: none; object-fit: cover; }
.sm-macro { flex: 1; width: 0; }
.sm-macro.wide { object-fit: contain; }
.sm-broken { margin: auto; color: var(--danger); font-size: 12px; }
.sm-tag { background: var(--sm-blue); color: #fff; font: 600 11.5px var(--f-body); padding: 2px 7px; border-radius: 3px; text-decoration: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-tag.root { background: #8a94a0; }
.sm-fname, .sm-line { max-width: 100%; display: flex; gap: 3px; align-items: center; font-size: 13.5px; color: var(--sm-blue); text-decoration: none; overflow: hidden; white-space: nowrap; }
.sm-fname { color: var(--sm-blue); }
.sm-fname:hover { text-decoration: underline; }
.sm-fname span, .sm-line span { width: 14px; height: 14px; display: inline-flex; flex: none; }
.sm-fname { text-overflow: ellipsis; }
.sm-line { font-size: 13px; }
.sm-line.err { color: var(--danger); white-space: normal; }
.sm-links { display: flex; gap: 14px; margin-top: 2px; }
.sm-link { background: transparent; border: 0; padding: 2px 0; color: var(--sm-blue); font-size: 13.5px; gap: 3px; }
.sm-link span { width: 14px; display: inline-flex; }
.sm-link:hover { text-decoration: underline; border: 0; }
.sm-pager { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; justify-content: center; padding: 22px 0 8px; }
.sm-pager button { min-width: 34px; padding: 6px 9px; border-radius: 3px; background: var(--sm-card); }
.sm-pager button.on { background: var(--sm-blue); color: #fff; border-color: var(--sm-blue); }
.sm-pageinfo { margin-left: 10px; font-size: 12.5px; color: var(--muted); }
.sm-main::after { content: ""; display: block; flex: 1; }
.sm-foot { display: flex; justify-content: space-between; padding: 14px 0; font-size: 13px; color: var(--muted); border-top: 1px solid var(--sm-cardline); margin-top: 16px; }

@media (max-width: 820px) {
  .sm-brand { width: auto; }
  .sm-nav, .sm-uname { display: none; }
  .sm-shell, .sm-shell.closed { grid-template-columns: minmax(0, 1fr); }
  .sm-side { position: fixed; z-index: 70; top: 50px; bottom: 0; left: 0; width: min(280px, 85vw); box-shadow: var(--shadow); }
  .sm-shell.closed .sm-side { display: none; }
  .sm-actions { margin-left: 0; }
  .sm-btn .lbl { display: none; }
  .sm-search { max-width: none; }
  .sm-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
}

/* SlideManage colour names (AdminLTE): olive, maroon, navy */
.sm-btn.olive, .sm-pill.olive { background: #3d9970; }
.sm-btn.maroon { background: #d81b60; }
.sm-btn.navy { background: #001f3f; }
.sm-btn.olive.active { box-shadow: inset 0 3px 5px rgb(0 0 0 / .25); background: #2f7a59; }
.sm-sys { display: flex; }
.sm-sys > a { padding: 0 15px; line-height: 50px; text-decoration: none; font-size: 14.5px; color: #fff; }
.sm-sys > a:hover { background: var(--sm-top-dark); }
.sm-sys .caret { font-size: 11px; }
.sm-drop { left: 0; right: auto; top: 50px; border-radius: 0 0 4px 4px; }
.sm-drop button { color: var(--ink) !important; }
.sm-no { color: #428bca; }
.sm-info { color: var(--muted); font-size: 12px; }
.sm-link.more { padding: 2px; }
.sm-link.more span { width: 16px; }
/* Bootstrap 3-style modal (SlideManage dialogs) */
.modal .box.bs { width: min(400px, 100%); border-radius: 6px; background: #fff; color: #333; box-shadow: 0 5px 15px rgba(0,0,0,.5); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.modal .box.bs .mh { padding: 15px; border-bottom: 1px solid #e5e5e5; }
.modal .box.bs .mh strong { font: 400 18px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif; color: #333; }
.modal .box.bs .mh button { width: 22px; height: 22px; padding: 0; color: #000; opacity: .2; background: none; border: 0; }
.modal .box.bs .mh button:hover { opacity: .5; }
.modal .box.bs .mb { padding: 15px; }
/* Manage Categories */
.sm-catbox { height: min(600px, 72vh); overflow-y: auto; padding: 18px 14px 10px 30px; }
.sm-catbox input.sm-catname { width: 100%; height: 34px; border: 0; border-bottom: 3px solid #3c8dbc; border-radius: 0; background: transparent; color: #333; padding: 4px 6px; font-size: 14px; box-shadow: none; }
.sm-catbox input.sm-catname:focus { outline: 0; border-bottom-color: #367fa9; background: #f7fbfe; }
.sm-catbtns { display: flex; justify-content: center; gap: 12px; margin: 14px 0 6px; }
.sm-catbtns .sm-btn { min-width: 52px; height: 34px; padding: 6px 12px; font-size: 14px; border-radius: 3px; justify-content: center; }
/* zTree light skin inside dialogs */
.sm-cattree .sm-ztree li::before, .sm-cattree .sm-ztree li::after { border-color: #999; }
.sm-cattree .zt-switch { border-color: #999; color: #555; background: #fff; }
.sm-cattree .zt-row { color: #333; }
.sm-cattree .zt-row:hover { color: #000; }
.sm-cattree .zt-row.on { background: #ffe6b0; border-color: #ffb951; color: #000; }
.sm-pager button:not(.on) { color: #3c8dbc; }

/* ---------- SlideManage list dialogs (Manage Users / Manage Roles) ---------- */
.modal .box.bs.bsw { width: min(800px, 100%); }
.modal .box.bs .mb { padding: 15px 20px 40px; }
.bs-panel { background: #fff; border-top: 3px solid transparent; box-shadow: 0 1px 1px rgba(0,0,0,.1); padding: 16px 10px 14px; border-radius: 3px; display: grid; gap: 16px; }
.bs-tools { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 0 0 0 0; }
.bs-btn { height: 34px; padding: 6px 12px; font: 14px/1.42857 "Helvetica Neue", Helvetica, Arial, sans-serif; color: #333; background: #fff; border: 1px solid #ddd; border-radius: 3px; box-shadow: none; }
.bs-btn.red { border-color: #e60000; }
.bs-btn:hover { background: #e7e7e7; color: #333; }
.bs-btn.red:hover { border-color: #e60000; }
.box.bs input.bs-input, .box.bs select.bs-input { height: 34px; padding: 6px 12px; font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #555; background: #fff; border: 1px solid #d2d6de; border-radius: 0; box-shadow: none; }
.box.bs input.bs-input:focus, .box.bs select.bs-input:focus { border-color: #3c8dbc; outline: 0; }
.bs-tools input.bs-input { width: 160px; }
.bs-tablewrap { overflow-x: auto; }
.bs-table { width: 100%; border-collapse: collapse; border: 1px solid #f4f4f4; font: 14px/1.42857 "Helvetica Neue", Helvetica, Arial, sans-serif; color: #333; }
.bs-table th, .bs-table td { border: 1px solid #f4f4f4; padding: 8px; text-align: left; vertical-align: top; white-space: nowrap; }
.bs-table th { font-weight: 700; border-bottom-width: 2px; }
.bs-table tbody tr:nth-child(odd) { background: #f9f9f9; }
.bs-table tbody tr:hover { background: #f5f5f5; }
.bs-table td:first-child, .bs-table th:first-child { width: 40px; }
.bs-table td.bs-ops, .bs-table th:last-child { width: 1%; }
.bs-empty { text-align: center !important; color: #777; }
.bs-link { color: #3c8dbc; text-decoration: none; }
.bs-link:hover { color: #72afd2; text-decoration: none; }
.bs-off { color: #dd4b39; }
.bs-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #333; }
.bs-pager { display: flex; list-style: none; margin: 0; padding: 0; }
.bs-pager button { height: 34px; min-width: 34px; padding: 6px 12px; margin-left: -1px; font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #666; background: #fafafa; border: 1px solid #ddd; border-radius: 0; box-shadow: none; }
.bs-pager li:first-child button { border-radius: 3px 0 0 3px; margin-left: 0; }
.bs-pager li:last-child button { border-radius: 0 3px 3px 0; }
.bs-pager button:hover:not(:disabled) { background: #eee; color: #333; }
.bs-pager li.active button { background: #f00; border-color: #f00; color: #fff; font-weight: 700; position: relative; z-index: 1; }
.bs-pager li.disabled button { color: #777; cursor: default; opacity: 1; }
/* Bootstrap form dialogs (Add/Edit User, Add/Edit Role) */
.bs-form { display: grid; gap: 14px; font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #333; }
.bs-row { display: grid; gap: 5px; }
.bs-row > span { font-weight: 700; }
.bs-req { color: #dd4b39; font-style: normal; }
.bs-hint { color: #737373; font-size: 12.5px; font-weight: 400; }
.bs-check { display: flex; align-items: center; gap: 6px; font-weight: 700; flex-wrap: wrap; }
.bs-check .bs-hint { flex-basis: 100%; padding-left: 22px; }
.bs-radios { display: flex; gap: 16px; flex-wrap: wrap; font-weight: 400; }
.bs-radios label { display: inline-flex; align-items: center; gap: 5px; }
.bs-treebox { max-height: 300px; overflow: auto; border: 1px solid #d2d6de; padding: 8px 8px 8px 4px; }
.bs-treebox.off { opacity: .55; }
.modal .box.bs .mf { padding: 12px 15px; border-top: 1px solid #e5e5e5; }
.modal .box.bs .mf button { height: 34px; padding: 6px 12px; font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif; border-radius: 3px; box-shadow: none; }
.modal .box.bs .mf .bs-default { background: #f4f4f4; color: #444; border: 1px solid #ddd; }
.modal .box.bs .mf .bs-primary { background: #3c8dbc; color: #fff; border: 1px solid #367fa9; }
.modal .box.bs .mf .bs-primary:hover { background: #367fa9; }
/* zTree checkboxes (role category permission) */
.zt-chk { position: relative; display: inline-block; vertical-align: middle; width: 13px; height: 13px; margin: 0 3px 0 0; border: 1px solid #999; background: #fff; cursor: pointer; top: -1px; }
.zt-chk.on::after { content: ""; position: absolute; left: 3px; top: 0; width: 4px; height: 8px; border: solid #333; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.zt-chk.part::after { content: ""; position: absolute; left: 2px; top: 5px; width: 7px; height: 2px; background: #555; }
.zt-chk.inh { background: #eee; cursor: default; }
.zt-chk.inh::after { border-color: #888; }
.zt-chk:focus-visible { outline: 2px solid #3c8dbc; outline-offset: 1px; }

/* ---------- Share dialog (SlideManage) ---------- */
.modal .box.bs.bsm { width: min(600px, 100%); }
.bs-share { gap: 16px; }
.bs-share .bs-row { gap: 14px; }
.bs-share .bs-radios { gap: 14px; }
.bs-share .bs-radios input { margin: 0 4px 0 0; }
.bs-datewrap { position: relative; }
.bs-datewrap .bs-input { width: 100%; cursor: pointer; }
.bs-datepick { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }
.box.bs textarea.bs-input.bs-note { width: 100%; height: 252px; resize: vertical; padding: 6px 12px; border-radius: 0; font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif; }
.box.bs .bs-share .bs-input:focus { border-color: #3c8dbc; outline: 0; }
.bs-sharegrid { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.bs-sharemeta { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; font-size: 14px; }
.bs-sharemeta dt { font-weight: 700; }
.bs-sharemeta dd { margin: 0; overflow-wrap: anywhere; }
.bs-code { font: 700 20px var(--f-mono); letter-spacing: .12em; }

/* =====================================================================
   Viewer, SlideManage layout: slide list left · white stage · icon bar right.
   Compare (up to 4 panels) works like KFSlideOS.
   ===================================================================== */
.viewer.smv {
  --bg: #eef0f4; --panel: #fff; --panel-2: #f6f7fa; --ink: #222; --muted: #666; --line: #dcdfe5; --stage: #fff;
  --chip: #f1f2f6; --hema: #3c8dbc; --hema-ink: #fff; --hema-soft: #e3f0f8;
  color-scheme: light; color: var(--ink);
  position: relative; height: 100%; display: grid; grid-template-columns: 300px minmax(0, 1fr) 50px; grid-template-rows: minmax(0, 1fr);
  background: #fff; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.viewer.smv.nolist { grid-template-columns: 0 minmax(0, 1fr) 50px; }
.viewer.smv.nolist .smv-list { visibility: hidden; }
/* --- left list */
.smv-list { background: #fff; border-right: 1px solid #c9ccd3; overflow-y: auto; min-width: 0; padding: 0 16px 20px; }
.smv-lhead { position: sticky; top: 0; z-index: 2; background: #fff; display: flex; align-items: center; gap: 8px; padding: 12px 0 10px; font-size: 13px; color: #555; border-bottom: 1px solid #eee; margin-bottom: 12px; }
.smv-folder { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: #333; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smv-folder span { width: 16px; display: inline-flex; color: #f0c040; flex: none; }
.smv-count { margin-left: auto; color: #888; white-space: nowrap; }
.smv-item { display: grid; grid-template-columns: 26px minmax(0, 1fr); grid-template-areas: "no frame" "dot frame" ". name"; align-items: center; border: 1px solid #dfe3e8; border-radius: 3px; padding: 8px 10px 8px 6px; margin-bottom: 20px; background: #fff; }
.smv-item.cur { border-color: #9fc6e4; box-shadow: 0 0 0 1px #9fc6e4; }
.smv-no { grid-area: no; align-self: start; color: #3c8dbc; font-weight: 700; font-size: 15px; padding-left: 3px; }
.smv-dot { grid-area: dot; align-self: start; width: 13px; height: 13px; padding: 0; border-radius: 50%; border: 1.6px solid #333; background: #fff; margin-left: 2px; display: grid; place-items: center; box-shadow: none; }
.smv-dot:hover:not(:disabled) { border-color: #2ecc71; background: #eafaf1; }
.smv-dot.sel { background: #222; border-color: #222; }
.smv-dot.in { width: 17px; height: 17px; margin-left: 0; background: #2ecc71; border-color: #27ae60; }
.smv-dot.in b { color: #fff; font: 700 10px/1 Arial, sans-serif; }
.smv-item.cur .smv-dot.in { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #2f8ff0; }
.smv-dot:disabled { cursor: default; opacity: 1; }
.smv-frame { grid-area: frame; height: 70px; display: flex; gap: 3px; background: #fff; border: 1px solid #c9ccd3; box-shadow: 3px 3px 0 #e2e4e8, 0 0 0 3px #fff, 0 0 0 4px #9fb6cc; padding: 3px; margin: 8px 6px 8px 8px; cursor: pointer; }
.smv-frame img { height: 100%; object-fit: cover; display: block; background: #e9ebee; min-width: 0; }
.smv-frame img:not(.mac) { width: 28%; }
.smv-frame img.mac { flex: 1; }
.smv-name { grid-area: name; display: flex; align-items: center; gap: 5px; color: #3c8dbc; font-size: 13px; text-decoration: none; min-width: 0; padding-top: 2px; }
.smv-name span { width: 15px; display: inline-flex; flex: none; color: #3c8dbc; }
.smv-name:hover { text-decoration: underline; }
.smv-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.smv-ltab { position: absolute; z-index: 30; left: 300px; top: 45%; width: 11px; height: 84px; padding: 0; border: 0; border-radius: 0 3px 3px 0; background: #3c8dbc; color: #fff; display: grid; place-items: center; box-shadow: none; }
.smv-ltab span { width: 6px; display: inline-flex; }
.smv-ltab:hover { background: #367fa9; }
.viewer.smv.nolist .smv-ltab { left: 0; }
.viewer.smv.nolist .smv-ltab span { transform: scaleX(-1); }
/* --- stage + panes */
.smv-stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #fff; }
.smv .panes { position: absolute; inset: 0; display: grid; gap: 6px; background: #fff; }
.smv .panes:not(.l1) { background: #1b1b1b; padding: 4px; gap: 5px; }
.smv .panes.l3 { grid-template: 1fr / 1fr 1fr 1fr; }
.smv .pane { background: #fff; }
.smv .pane.active::after { border: 3px solid #2f8ff0; }
.smv .pane .phead { left: 50%; right: auto; top: 14px; transform: translateX(-50%); max-width: calc(100% - 30px); gap: 4px; }
.smv .pane .phead .nm { background: rgb(90 90 90 / .55); color: #fff; font: 15px "Helvetica Neue", Helvetica, Arial, sans-serif; padding: 4px 4px; border-radius: 4px; cursor: pointer; }
.smv .pane .phead .px { width: 24px; height: 24px; padding: 4px; background: rgb(90 90 90 / .55); color: #fff; border: 0; border-radius: 4px; opacity: 0; transition: opacity .15s; }
.smv .pane:hover .phead .px, .smv .pane .phead .px:focus-visible { opacity: 1; }
.smv .pane .phead .px svg { width: 16px; height: 16px; }
.smv .pane .readout { display: none; }
/* navigator: top-left, blue frame, red crosshair */
.smv .pane .navigator { border: 1px solid #3c8dbc !important; background: #fff !important; margin: 20px 0 0 20px !important; }
.smv .panes:not(.l1) .pane .navigator { margin: 50px 0 0 10px !important; }
.smv .pane .navigator .displayregion { border: 0 !important; background: transparent !important; }
.nav-box { position: absolute; z-index: 5; pointer-events: none; border: 1.5px solid #ff2a2a; box-sizing: border-box; }
.smv .pane .navigator canvas.trail { z-index: 1; }
.nav-x, .nav-y { position: absolute; z-index: 3; pointer-events: none; }
.nav-x { left: 0; right: 0; height: 0; border-top: 1px solid #ff3b3b; }
.nav-y { top: 0; bottom: 0; width: 0; border-left: 1px solid #ff3b3b; }
/* zoom slider + magnification buttons */
.zm { position: absolute; z-index: 12; left: 52px; bottom: 64px; display: flex; align-items: flex-end; gap: 9px; }
.smv .panes:not(.l1) .pane:not(.active) .zm { display: none; }
.smv .panes:not(.l1) .zm { left: 46px; bottom: 56px; transform: scale(.88); transform-origin: left bottom; }
.zm-col { display: flex; flex-direction: column; align-items: center; width: 18px; }
.zm-pm { width: 16px; height: 16px; padding: 0; font: 12px/1 Arial, sans-serif; color: #888; background: #fff; border: 1px solid #ccc; border-radius: 2px; box-shadow: none; }
.zm-track { position: relative; width: 4px; height: 160px; margin: 3px 0; background: #e7e7e7; border: 1px solid #ccc; border-radius: 2px; cursor: pointer; touch-action: none; }
.zm-thumb { position: absolute; left: 50%; width: 16px; height: 8px; transform: translate(-50%, 50%); background: #3d8fe0; border-radius: 3px; }
.zm-bubble { position: absolute; right: 18px; transform: translateY(50%); background: #3d8fe0; color: #fff; font: 700 11px/1 Arial, sans-serif; padding: 4px 5px; border-radius: 3px; white-space: nowrap; }
.zm-bubble::after { content: ""; position: absolute; right: -5px; top: 50%; transform: translateY(-50%); border: 5px solid transparent; border-right: 0; border-left-color: #3d8fe0; }
.zm-mags { display: flex; flex-direction: column; gap: 9px; padding-bottom: 20px; }
.zm-mags button { height: 18px; min-width: 32px; padding: 0 4px; font: 700 11px/1 Arial, sans-serif; color: #fff; background: #3d8fe0; border: 0; border-radius: 2px; box-shadow: none; justify-content: center; }
.zm-mags button:hover { background: #2a77c4; }
.zm-mags button.cur { background: #1f5e9c; }
.zm-mags button.fit { background: #fff; color: #3d8fe0; border: 1px solid #3d8fe0; }
/* ruler scale bar */
.smv .pane .hud { left: 40px; bottom: 16px; }
.ruler { position: relative; height: 30px; }
.ruler-bar { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: #111; }
.ruler-t { position: absolute; top: 0; }
.ruler-t i { display: block; width: 3px; height: 11px; margin-left: -1px; background: #111; }
.ruler-t b { position: absolute; top: 12px; left: 0; transform: translateX(-35%); font: 700 14px/1.2 Arial, sans-serif; color: #111; white-space: nowrap; }
.ruler-na { font: 12px Arial, sans-serif; color: #777; }
.smv .panes:not(.l1) .ruler-t b { font-size: 12px; }
/* pan arrows + fullscreen */
.smv-pad { position: absolute; z-index: 15; right: 12px; bottom: 12px; display: grid; grid-template-columns: repeat(3, 50px) 50px; grid-auto-rows: 30px; gap: 5px 5px; }
.smv-pad button { height: 30px; padding: 0; border: 0; border-radius: 0; background: #8796a8; color: #fff; font: 700 18px/1 Arial, sans-serif; box-shadow: none; justify-content: center; }
.smv-pad button:hover { background: #6f8096; }
.smv-pad .full { margin-left: 10px; }
.smv-pad .full svg { width: 20px; height: 20px; }
.smv-stage:has(.smv-panel:not([hidden])) .smv-pad { right: 352px; }
/* annotation tool palette */
.smv-palette { position: absolute; z-index: 25; top: 10px; left: 240px; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 2px; padding: 4px 6px; max-width: calc(100% - 260px); background: #4f5b69; border-radius: 4px; box-shadow: 0 2px 10px rgb(0 0 0 / .25); }
.smv-palette button { width: 34px; height: 34px; padding: 7px; background: transparent; border: 0; border-radius: 3px; color: #fff; box-shadow: none; }
.smv-palette button:hover { background: rgb(255 255 255 / .14); }
.smv-palette button.on { background: #3c8dbc; }
.smv-palette button.tog.on { background: #e08e0b; }
.smv-palette button svg { width: 20px; height: 20px; }
.smv-palette button.sw { width: 22px; height: 22px; padding: 0; margin: 0 2px; border-radius: 50%; background: var(--c); border: 2px solid rgb(255 255 255 / .35); }
.smv-palette button.sw.on { border-color: #fff; box-shadow: 0 0 0 2px #3c8dbc; }
.smv-palette .sep { width: 1px; height: 22px; background: rgb(255 255 255 / .25); margin: 0 4px; }
/* flyout panel */
.smv-panel { position: absolute; z-index: 30; top: 0; right: 0; bottom: 0; width: 340px; max-width: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); background: #fff; border-left: 1px solid #d2d6de; box-shadow: -4px 0 16px rgb(0 0 0 / .12); }
.smv-panel[hidden] { display: none; }
.smv-phead { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 16px; background: #3c8dbc; color: #fff; }
.smv-phead strong { font: 400 16px "Helvetica Neue", Helvetica, Arial, sans-serif; flex: 1; }
.smv-phead button { width: 28px; height: 28px; padding: 5px; background: transparent; border: 0; color: #fff; box-shadow: none; }
.smv-phead button:hover { background: rgb(255 255 255 / .15); }
.smv-panel .tabbody { overflow-y: auto; }
/* right icon bar */
.smv-bar { background: #4f5b69; display: flex; flex-direction: column; align-items: stretch; min-height: 0; z-index: 35; }
.smv-collapse { height: 22px; padding: 1px 0; border: 0; border-radius: 0; background: #3c8dbc; color: #fff; box-shadow: none; }
.smv-collapse svg { width: 20px; height: 20px; }
.smv-icons { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0; overflow-y: auto; min-height: 0; }
.smv-bar.min .smv-icons, .smv-bar.min .smv-bottom { display: none; }
.smv-icons > button, .smv-cmpwrap > button, .smv-bottom > button, .smv-bottom > a, .smv-bottom .menu > button { width: 42px; height: 40px; padding: 6px; border: 0; border-radius: 3px; background: transparent; color: #fff; box-shadow: none; display: grid; place-items: center; }
.smv-icons button svg, .smv-bottom svg { width: 26px; height: 26px; }
.smv-icons > button:hover, .smv-cmpwrap > button:hover, .smv-bottom > button:hover, .smv-bottom > a:hover, .smv-bottom .menu > button:hover { background: rgb(255 255 255 / .14); }
.smv-icons > button.on, .smv-cmpwrap > button.on { background: #3c8dbc; }
.smv-icons > button[hidden] { display: none; }
.smv-icons .sep { width: 28px; height: 1px; background: rgb(255 255 255 / .25); margin: 6px 0; }
.smv-bottom { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0; border-top: 1px solid rgb(255 255 255 / .15); }
.smv-bottom .menu .pop { right: calc(100% + 8px); left: auto; top: auto; bottom: 0; color: var(--ink); }
.smv-login { width: auto !important; font-size: 12px; text-decoration: none; }
.smv-cmpwrap { position: relative; }
.smv-cmp { position: absolute; right: 58px; top: 0; width: 250px; display: grid; gap: 4px; padding: 10px; background: #fff; color: #333; border: 1px solid #d2d6de; border-radius: 4px; box-shadow: 0 6px 20px rgb(0 0 0 / .2); z-index: 60; }
.smv-cmp[hidden] { display: none; }
.smv-cmp > b { font-size: 14px; padding: 2px 4px 6px; }
.smv-cmp > button { justify-content: flex-start; gap: 10px; background: transparent; border: 1px solid transparent; color: #333; font-size: 13px; padding: 6px 6px; box-shadow: none; }
.smv-cmp > button:hover { background: #f1f5f9; }
.smv-cmp > button.on { background: #e3f0f8; border-color: #9fc6e4; }
.smv-cmp .lay { display: grid; gap: 2px; width: 30px; height: 20px; flex: none; }
.smv-cmp .lay i { background: #3c8dbc; border-radius: 1px; }
.smv-cmp .lay.l1 { grid-template: 1fr / 1fr; } .smv-cmp .lay.l2 { grid-template: 1fr / 1fr 1fr; }
.smv-cmp .lay.l3 { grid-template: 1fr / 1fr 1fr 1fr; } .smv-cmp .lay.l4 { grid-template: 1fr 1fr / 1fr 1fr; }
.smv-cmp .check { font-size: 13px; padding: 6px 6px 2px; border-top: 1px solid #eee; margin-top: 4px; }
.smv-cmp .hint { margin: 0; padding: 0 6px; font-size: 12px; }
/* phones */
@media (max-width: 820px) {
  .viewer.smv { height: 100dvh; grid-template-columns: 0 minmax(0, 1fr) 46px; }
  .viewer.smv:not(.nolist) .smv-list { position: absolute; z-index: 40; top: 0; bottom: 0; left: 0; width: min(300px, 85vw); box-shadow: 4px 0 16px rgb(0 0 0 / .2); }
  .viewer.smv:not(.nolist) .smv-ltab { left: min(300px, 85vw); }
  .smv .panes.l3, .smv .panes.l4 { grid-template: 1fr 1fr / 1fr 1fr; }
  .smv .panes.l2 { grid-template: 1fr 1fr / 1fr; }
  .smv-icons > button, .smv-cmpwrap > button, .smv-bottom > button, .smv-bottom > a { width: 40px; height: 36px; }
  .smv-pad { display: none; }
  .zm { left: 16px; bottom: 56px; }
  .smv .pane .hud { left: 16px; }
  .smv-panel { width: 100%; }
}
.smv-stage:has(.panes:not(.l1)) .smv-pad { display: none; }
.smv-stage:has(.smv-panel:not([hidden])) .smv-palette { max-width: calc(100% - 600px); }
.smv-stage:has(.panes:not(.l1)) .smv-palette { left: 50%; transform: translateX(-50%); top: auto; bottom: 12px; max-width: calc(100% - 20px); }
@media (max-width: 820px) { .smv-palette { left: 8px; right: 8px; max-width: none; top: auto; bottom: 8px; transform: none; } }
.smv .panes.l4 .zm { transform: scale(.72); bottom: 52px; }
.smv .panes.l4 .zm-track { height: 120px; }
/* zoom control: closer to SlideManage */
.zm-col { width: 20px; }
.zm-pm { width: 18px; height: 18px; font: 14px/1 Arial, sans-serif; color: #999; background: #fff; border: 1px solid #c8c8c8; border-radius: 3px; display: grid; place-items: center; }
.zm-pm:hover { color: #3d8fe0; border-color: #3d8fe0; background: #fff; }
.zm-track { width: 10px; height: 158px; margin: 2px 0; background: #fff; border: 1px solid #c8c8c8; border-radius: 3px; }
.zm-thumb { width: 18px; height: 10px; border-radius: 4px; background: #3d8fe0; }
.zm-bubble { right: 22px; font: 700 12px/1 Arial, sans-serif; padding: 5px 6px; border-radius: 3px; background: #3d8fe0; }
.zm-mags { gap: 9px; padding-bottom: 22px; }
.zm-mags button { height: 18px; min-width: 34px; font: 700 12px/1 Arial, sans-serif; background: #3d8fe0; border-radius: 2px; }
.ruler-bar { height: 4px; }
.ruler-t i { width: 3px; height: 13px; margin-left: -1.5px; }
.ruler-t b { top: 14px; font: 700 15px/1.2 Arial, sans-serif; transform: translateX(-30%); }

/* ---------- microscope (eyepiece) mode, like KFSlideOS ---------- */
.scope-mask { position: absolute; inset: 0; z-index: 2; pointer-events: none; display: grid; place-items: center; overflow: hidden; }
.scope-hole { border-radius: 50%; box-shadow: 0 0 0 300vmax #000; flex: none; }
.smv.scope-on .pane .openseadragon-canvas { background: #fff !important; }
.smv.scope-on .panes:not(.l1) { background: #111; }
.smv-scope { position: absolute; z-index: 26; top: 8px; left: 50%; transform: translateX(-50%); display: grid; gap: 6px; padding: 10px 18px 12px; min-width: 360px; background: rgb(32 36 58 / .92); color: #fff; border-radius: 4px; box-shadow: 0 4px 16px rgb(0 0 0 / .4); font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif; }
.smv-scope[hidden] { display: none; }
.smv-scope b { font-size: 15px; }
.smv-scope .objs { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.smv-scope .objs label { display: inline-flex; align-items: center; gap: 2px; cursor: pointer; }
.smv-scope .objs input { margin: 0 3px 0 0; accent-color: #2f8ff0; }
.smv-scope .fnrow { display: flex; gap: 16px; align-items: center; }
.smv-scope .fnrow input { width: 80px; height: 24px; padding: 2px 6px; text-align: center; font: 700 14px Arial, sans-serif; color: #fff; background: transparent; border: 1px solid #c8cbe0; border-radius: 3px; box-shadow: none; }
.smv-scope .fnrow button { height: 24px; padding: 0 10px; font-size: 14px; color: #fff; background: transparent; border: 1px solid #c8cbe0; border-radius: 3px; box-shadow: none; }
.smv-scope .fnrow button:hover { background: rgb(255 255 255 / .12); }
.smv-stage:has(.smv-palette:not([hidden])) .smv-scope { top: 64px; }
.smv .pane.scoped .ruler-bar, .smv .pane.scoped .ruler-t i { background: #fff; }
.smv .pane.scoped .ruler-t b { color: #fff; }
.smv .pane.scoped .zm-pm, .smv .pane.scoped .zm-track { border-color: #666; }
.smv .pane.scoped .phead .nm { background: rgb(255 255 255 / .18); }
.smv .pane .navigator { z-index: 4 !important; }
.smv .pane .openseadragon-container > div:has(> .navigator), .smv .pane .openseadragon-container > div > div:has(> .navigator) { z-index: 4 !important; }
.zm { left: 64px; }
/* microscope mode: KFSlideOS-style magnification box and compact scale bar */
.scope-mag { display: none; position: absolute; z-index: 14; top: 12px; right: 14px; align-items: center; gap: 6px; padding: 4px 10px; background: #fff; color: #222; border: 2px solid #d9dee8; border-radius: 4px; font: 15px/1.2 Arial, sans-serif; box-shadow: 0 1px 4px rgb(0 0 0 / .25); }
.scope-mag span { width: 16px; height: 16px; display: inline-flex; color: #2f8ff0; }
.scope-mag b { font-weight: 400; min-width: 44px; }
.scope-mag i { font-style: normal; font-weight: 700; margin-left: 6px; }

.ruler.compact { height: auto; padding: 5px 10px 6px; background: rgb(70 74 84 / .85); border-radius: 4px; display: grid; justify-items: center; gap: 2px; }
.ruler.compact .cr-label { font: 13px/1.2 Arial, sans-serif; color: #fff; }
.ruler.compact .cr-bar { position: relative; height: 9px; border-bottom: 1px solid #fff; }
.ruler.compact .cr-bar i { position: absolute; bottom: 0; width: 1px; height: 8px; background: #fff; }
.ruler.compact .cr-bar i:first-child, .ruler.compact .cr-bar i:last-child { height: 9px; }
.smv .pane.scoped .hud { left: 20px; bottom: 16px; }
/* split-screen picker (KFSlideOS style) */
.smv-cmp { background: #0c1430; border-color: #1f3a78; color: #e6ecff; width: auto; min-width: 190px; justify-items: center; }
.smv-cmp .gpick { display: grid; grid-template-columns: repeat(3, 34px); gap: 3px; padding: 6px; background: #0a1128; border-radius: 6px; }
.smv-cmp .gpick .gc { width: 34px; height: 30px; padding: 0; border: 1.5px solid #8fa3d6; border-radius: 2px; background: #0f1a3d; box-shadow: none; }
.smv-cmp .gpick .gc.on { background: #5bc8e6; border-color: #5bc8e6; }
.smv-cmp .gpick .gc:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.smv-cmp .gl { font: 12.5px Arial, sans-serif; color: #c9d4f5; }
.smv-cmp .check { color: #e6ecff; border-top-color: #22305c; width: 100%; }
.smv-cmp .hint { color: #8fa0cf; max-width: 210px; text-align: center; }
/* small panels: compact zoom slider */
.smv .panes[data-rows="2"] .zm { transform: scale(.72); bottom: 48px; }
.smv .panes[data-rows="2"] .zm-track { height: 120px; }
.smv .panes[data-rows="3"] .zm { transform: scale(.56); bottom: 40px; left: 40px; }
.smv .panes[data-rows="3"] .zm-track { height: 100px; }
.smv .panes[data-rows="3"] .pane .phead .nm { font-size: 12px; }
.smv .panes[data-rows="3"] .pane .navigator { margin: 36px 0 0 8px !important; }
.smv .panes[data-rows="3"] .ruler-t b { font-size: 11px; }
/* KFSlideOS-style empty panels in split screen */
.smv .panes:not(.l1) { background: #000; gap: 8px; padding: 6px; }
.smv .pane.empty { background: #000; box-shadow: inset 0 0 0 1px #24408a; border-radius: 3px; }
.smv .pane.empty .emptyp { color: #fff; }
.smv .pane .noslice { font: 18px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #fff; padding: 20px; cursor: default; user-select: none; }
.smv .panes[data-rows="3"] .pane .noslice { font-size: 16px; }
.smv .pane.empty.active::after { border-color: #2f8ff0; border-radius: 3px; }
.smv .panes.l1 .pane.empty .noslice { color: #888; }
.smv .panes.l1 .pane.empty { background: #fff; box-shadow: none; }
/* Directory / Browsing tabs (KFSlideOS) */
.smv-lhead { display: grid; gap: 8px; }
.smv-tabs { display: flex; gap: 4px; padding: 3px; background: #eef2f7; border-radius: 5px; }
.smv-tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 28px; padding: 0 8px; font: 13.5px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #33415c; background: transparent; border: 0; border-radius: 4px; box-shadow: none; }
.smv-tab span { width: 15px; height: 15px; display: inline-flex; }
.smv-tab:hover { background: #e1e8f2; }
.smv-tab.on { background: #2f6fd6; color: #fff; }
.smv-dirline { display: flex; align-items: center; gap: 8px; }
.smv-bitem { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 4px; margin-bottom: 18px; }
.smv-bside { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; }
.smv-bdot { width: 11px; height: 11px; border-radius: 50%; border: 1.5px dashed #2bb3a3; }
.smv-bdot.on { background: #4cd99a; border: 0; }
.smv-bno { font: 700 16px Arial, sans-serif; color: #33415c; }
.smv-bitem.cur .smv-bno { color: #2f6fd6; }
.smv-bshow { width: 20px; height: 18px; padding: 1px; color: #5a6680; background: transparent; border: 0; box-shadow: none; }
.smv-bshow:hover { color: #2f6fd6; }
.smv-bshow svg { width: 18px; height: 16px; }
.smv-bthumb { position: relative; height: 170px; display: grid; place-items: center; background: #f4f6f9; border: 1.5px solid #3f4fa3; border-radius: 4px; overflow: hidden; cursor: pointer; }
.smv-bitem.cur .smv-bthumb { border-color: #2f8ff0; box-shadow: 0 0 0 1px #2f8ff0; }
.smv-bthumb img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.smv-bx { position: absolute; top: 3px; right: 3px; width: 24px; height: 24px; padding: 3px; color: #2f6fd6; background: rgb(255 255 255 / .8); border: 0; border-radius: 3px; box-shadow: none; }
.smv-bx:hover { background: #fff; color: #d81b60; }
.smv-bx svg { width: 18px; height: 18px; }
.smv-bname { margin-top: 6px; font: 14px/1.35 "Helvetica Neue", Helvetica, Arial, sans-serif; color: #222; text-align: center; overflow-wrap: anywhere; }
/* Directory tree of every category (KFSlideOS "Local disk") */
.dtree, .dtree ul { list-style: none; margin: 0; padding: 0; }
.dtree ul { padding-left: 16px; }
.dtree .dt-row { display: flex; align-items: center; gap: 6px; width: 100%; height: 28px; padding: 0 6px 0 2px; font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #1f2a44; background: transparent; border: 0; border-radius: 4px; box-shadow: none; text-align: left; }
.dtree .dt-row:hover { background: #eef3fb; }
.dtree .dt-folder.open > .dt-row { color: #10204a; }
.dtree .dt-caret { width: 12px; flex: none; color: #6b7690; font-size: 11px; }
.dtree .dt-ficon { width: 17px; height: 17px; flex: none; display: inline-flex; color: #f0b429; }
.dtree .dt-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dtree .dt-n { color: #8a94a8; font: 11px Arial, sans-serif; }
.dtree .dt-file { display: flex; align-items: center; gap: 4px; height: 26px; padding-left: 14px; }
.dtree .dt-dot { width: 11px; height: 11px; flex: none; padding: 0; border-radius: 50%; border: 1.5px solid #9aa5bd; background: #fff; box-shadow: none; }
.dtree .dt-dot:hover { border-color: #2ecc71; }
.dtree .dt-dot.on { background: #2ecc71; border-color: #27ae60; }
.dtree .dt-name { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; padding: 2px 6px; font: 13.5px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #2b3650; text-decoration: none; border-radius: 4px; }
.dtree .dt-name:hover { background: #eef3fb; color: #2f6fd6; }
.dtree .dt-file.cur .dt-name { background: #2f6fd6; color: #fff; }
.dtree .dt-sicon { width: 15px; height: 15px; flex: none; display: inline-flex; color: #8a6fb5; }
.dtree .dt-file.cur .dt-sicon { color: #fff; }
.dtree .dt-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dtree .dt-load { padding: 4px 0 4px 30px; font: 12px Arial, sans-serif; color: #8a94a8; }

/* Object Glass box: draggable */
.smv-scope { cursor: move; user-select: none; touch-action: none; }
.smv-scope.dragging { opacity: .85; }
.smv-scope input, .smv-scope button, .smv-scope label { cursor: pointer; }
.smv-scope .fnrow input { cursor: text; }

/* Object Glass box: title bar with grip (drag) and minimise */
.smv-scope { min-width: 0; width: max-content; max-width: calc(100% - 16px); }
.smv-scope .sc-head { display: flex; align-items: center; gap: 8px; margin: -4px -8px 0 -10px; }
.smv-scope .sc-grip { color: #9aa0c0; font-size: 16px; line-height: 1; letter-spacing: -2px; }
.smv-scope .sc-head b { flex: 1; }
.smv-scope .sc-cur { display: none; font-weight: 700; color: #7cc0ff; }
.smv-scope .sc-min { width: 22px; height: 22px; padding: 0; display: grid; place-items: center; font: 700 16px/1 Arial, sans-serif; color: #fff; background: transparent; border: 1px solid #6b7090; border-radius: 3px; box-shadow: none; }
.smv-scope .sc-min:hover { background: rgb(255 255 255 / .14); }
.smv-scope.min { padding: 8px 14px; gap: 0; }
.smv-scope.min .sc-head { margin: 0 -6px 0 -6px; }
.smv-scope.min .sc-head b { font-size: 13px; }
.smv-scope.min .sc-cur { display: inline; }
.smv-scope.min > :not(.sc-head) { display: none; }

/* Share result: tidy card layout */
.modal .box.bs.shr { width: min(560px, 100%); border-radius: 10px; overflow: hidden; }
.shr-body { display: grid; gap: 18px; font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif; color: #333; }
.shr-body small { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #8a8fa3; }
.shr-link small { margin-bottom: 6px; }
.shr-urlbox { display: flex; align-items: center; background: #f5f7fb; border: 1px solid #dfe3ec; border-radius: 8px; padding: 3px 4px 3px 12px; }
.shr-urlbox:focus-within { border-color: #337ab7; box-shadow: 0 0 0 3px rgb(51 122 183 / .15); }
.shr-url { flex: 1; min-width: 0; border: 0; background: transparent; padding: 7px 0; font: 14px var(--f-mono, monospace); color: #2a4a7a; outline: none; box-shadow: none; }
.shr-copy { flex: none; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #5b6478; cursor: pointer; box-shadow: none; }
.shr-copy:hover { background: #e3e9f4; color: #337ab7; }
.shr-copy svg, .shr-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.shr-main { display: flex; gap: 20px; align-items: stretch; flex-wrap: wrap; }
.shr-qr { flex: none; display: grid; justify-items: center; gap: 6px; padding: 12px; border: 1px solid #e6e9f0; border-radius: 10px; background: #fff; box-shadow: 0 1px 3px rgb(20 30 60 / .06); }
.shr-qr canvas { display: block; border-radius: 4px; }
.shr-qr small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.shr-info { flex: 1; min-width: 220px; display: grid; align-content: center; gap: 12px; }
.shr-item { display: flex; gap: 12px; align-items: center; min-width: 0; }
.shr-item > div { min-width: 0; flex: 1; }
.shr-item b { font-weight: 600; color: #222; }
.shr-ic { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #eef3fb; color: #337ab7; }
.shr-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shr-badge { display: inline-block; margin-top: 2px; padding: 1px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: #f0f1f4; color: #666; }
.shr-badge.ok { background: #e6f6ec; color: #1f8a4c; }
.shr-pw { display: flex; align-items: center; gap: 4px; }
.shr-code { font: 700 20px var(--f-mono, monospace) !important; letter-spacing: .18em; color: #1d3f72 !important; background: #f5f7fb; border: 1px dashed #c9d3e6; border-radius: 6px; padding: 2px 6px 2px 10px; }
.shr-note { white-space: pre-wrap; overflow-wrap: anywhere; }
.shr-hint { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 8px; background: #f3f8fd; color: #4f6a87; font-size: 13px; }
.shr-hint .shr-ic { width: 26px; height: 26px; background: transparent; }
@media (max-width: 520px) { .shr-main { justify-content: center; } .shr-info { min-width: 100%; } }
.modal .shr-urlbox input.shr-url, .modal .shr-urlbox input.shr-url:focus { outline: none; border: 0; box-shadow: none; background: transparent; height: auto; }

/* related images: one slide-glass picture */
.sec figure.glass { margin: 0; cursor: zoom-in; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--chip); }
.sec figure.glass img { display: block; width: 100%; }
.sec figure.glass:hover, .sec figure.glass:focus-visible { border-color: #337ab7; box-shadow: 0 0 0 2px rgb(51 122 183 / .2); outline: none; }
.assoc-big { display: grid; gap: 10px; justify-items: center; }
.assoc-tabs { display: flex; gap: 6px; }
.assoc-tabs button { padding: 4px 14px; border-radius: 999px; border: 1px solid #d5dae3; background: #f3f5f8; color: #444; font-size: 13px; cursor: pointer; box-shadow: none; }
.assoc-tabs button.on { background: #337ab7; border-color: #337ab7; color: #fff; }
.assoc-big img.big { max-width: 100%; max-height: 70vh; }

/* Informasi slide: friendlier card layout */
.inf-hero { gap: 10px; padding-top: 16px; }
.inf-hero figure.glass { border-radius: 8px; box-shadow: 0 1px 4px rgb(20 30 60 / .12); }
.inf-name { font: 600 15px/1.35 var(--f-body); color: var(--ink, #222); overflow-wrap: anywhere; }
.inf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.inf-chip { padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #eef1f6; color: #4a5468; }
.inf-chip.mag { background: #e5effa; color: #1f5d9e; }
.inf-body { gap: 16px; }
.inf-group h4 { margin: 0 0 8px; font: 600 11px var(--f-body); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.inf-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.inf-wide { grid-column: 1 / -1; display: grid; }
.inf-tile { display: flex; gap: 10px; align-items: center; min-width: 0; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--chip, #f4f6f9) 55%, transparent); }
.inf-tile > div { min-width: 0; flex: 1; }
.inf-tile small { display: block; font-size: 11px; color: var(--muted); margin-bottom: 1px; }
.inf-tile b { display: block; font-size: 13px; font-weight: 600; color: var(--ink, #222); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.inf-ic { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; background: #e8eff9; color: #337ab7; }
.inf-ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.inf-card { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--panel, #fff); }
.inf-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; min-width: 0; }
.inf-row + .inf-row { border-top: 1px solid var(--line); }
.inf-row .inf-k { flex: none; font-size: 13px; color: var(--muted); }
.inf-row b { flex: 1; min-width: 0; text-align: right; font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.inf-row .inf-ic { width: 26px; height: 26px; }

/* Annotation list panel */
.al-head { gap: 10px; padding-bottom: 12px; }
.al-title { display: flex; align-items: center; gap: 8px; }
.al-title b { font-size: 14px; font-weight: 600; }
.al-count { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: #e5effa; color: #1f5d9e; font-size: 12px; font-weight: 700; text-align: center; }
.al-title .spacer { flex: 1; }
.al-eye { width: 30px; height: 30px; padding: 5px; background: transparent; border-color: transparent; color: var(--muted); }
.al-eye:hover { border-color: var(--line); color: var(--ink); }
.al-searchbox { display: flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.al-searchbox span { width: 16px; height: 16px; color: var(--muted); display: grid; }
.al-searchbox span svg { width: 16px; height: 16px; }
.al-searchbox input.al-search { flex: 1; border: 0; background: transparent; padding: 7px 0; box-shadow: none; outline: none; min-width: 0; }
.al-list { display: grid; padding: 6px 10px 10px; gap: 6px; }
.al-item { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.al-item:hover { border-color: #b9c8de; }
.al-item.sel { border-color: #337ab7; box-shadow: 0 0 0 2px rgb(51 122 183 / .15); }
.al-item.hid .al-row { opacity: .5; }
.al-row { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 10px; cursor: pointer; outline: none; }
.al-row:focus-visible { background: var(--hema-soft, #eef3fb); }
.al-no { flex: none; width: 16px; font-size: 11px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.al-ic { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); }
.al-ic svg { width: 17px; height: 17px; }
.al-t { flex: 1; min-width: 0; }
.al-t b { display: block; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.al-t small { display: block; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.al-a { display: flex; gap: 2px; opacity: .55; transition: opacity .15s; }
.al-item:hover .al-a, .al-item.sel .al-a, .al-a:focus-within { opacity: 1; }
.al-a button { width: 28px; height: 28px; padding: 5px; background: transparent; border-color: transparent; }
.al-a button:hover { border-color: var(--line); background: var(--panel-2, #f3f5f8); }
.al-a button.del:hover { color: #c62828; }
.al-item .sec.editor { border-top: 1px solid var(--line); border-bottom: 0; background: color-mix(in srgb, var(--chip, #f4f6f9) 50%, transparent); }
.al-item .sec.editor > h3 { display: none; }
.al-empty { padding: 14px; text-align: center; color: var(--muted); font-size: 13px; }
.al-none { display: grid; justify-items: center; gap: 6px; padding: 34px 24px; text-align: center; color: var(--muted); }
.al-none span svg { width: 34px; height: 34px; opacity: .5; }
.al-none b { color: var(--ink); font-size: 14px; }
.al-none p { margin: 0; font-size: 12.5px; line-height: 1.5; }
.al-foot { border-top: 1px solid var(--line); }
.al-opts summary { cursor: pointer; font-size: 12.5px; color: var(--muted); }
.al-opts[open] { display: grid; gap: 8px; }

.al-delall { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 9px; font-size: 12.5px; color: #c62828; background: transparent; border: 1px solid #f0c9c9; border-radius: 6px; box-shadow: none; }
.al-delall span { width: 14px; height: 14px; display: grid; }
.al-delall span svg { width: 14px; height: 14px; }
.al-delall:hover { background: #fdecec; border-color: #e7a3a3; }
.sm-brand img.sm-logo { height: 26px; width: auto; display: block; }

/* ===== Warm light header with the BIOGEAR logo ===== */
.sm-top { background: #fff; color: #4a4f57; box-shadow: 0 1px 0 #ece7e3, 0 2px 10px rgb(60 40 30 / .06); position: relative; z-index: 5; }
.sm-top a, .sm-top button { color: #4a4f57; }
.sm-brand { background: linear-gradient(180deg, #fffaf7, #fff3ec); border-right: 1px solid #f3e4dc; }
.sm-brand img.sm-logo { height: 24px; width: auto; transition: transform .2s; }
.sm-brand:hover img.sm-logo { transform: scale(1.04); }
.sm-burger { color: #6b6f78; }
.sm-burger:hover { background: #fff3ec; color: #e66840; }
.sm-nav a, .sm-nav button { position: relative; font-weight: 500; }
.sm-nav a:hover, .sm-nav a.on, .sm-nav .menu > button:hover { background: #fff6f1; color: #e66840; }
.sm-nav a.on::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: #e66840; }
.sm-user .menu > button { color: #4a4f57; border-radius: 999px; }
.sm-user .menu > button:hover { background: #fff3ec; color: #e66840; }
/* a soft orange line under the header ties it to the logo */
.sm-top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: linear-gradient(90deg, #f08a5d, #e66840 30%, #f6b48f); opacity: .85; pointer-events: none; }

/* automatic cell count button */
button.autocount { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left; width: 100%; padding: 10px 14px; border: 0; border-radius: 10px; color: #fff; background: linear-gradient(135deg, #f08a5d, #e66840); box-shadow: 0 2px 8px rgb(230 104 64 / .3); font-size: 14.5px; font-weight: 700; cursor: pointer; }
button.autocount span { grid-row: 1 / 3; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: rgb(255 255 255 / .2); }
button.autocount span svg { width: 18px; height: 18px; fill: #fff; }
button.autocount small { font-size: 11.5px; font-weight: 500; opacity: .9; }
button.autocount:hover:not(:disabled) { filter: brightness(1.05); box-shadow: 0 4px 12px rgb(230 104 64 / .38); }
button.autocount:disabled { opacity: .7; cursor: progress; }

.ac-btns { display: grid; grid-template-columns: 1.35fr 1fr; gap: 8px; }
button.autocount.all { background: linear-gradient(135deg, #5b8def, #3c6fd8); box-shadow: 0 2px 8px rgb(60 111 216 / .28); }
button.autocount.all:hover:not(:disabled) { box-shadow: 0 4px 12px rgb(60 111 216 / .36); }
button.autocount.all span svg { fill: #fff; }
.ac-job { display: grid; gap: 6px; padding: 10px 12px; border-radius: 10px; background: #f3f7fe; border: 1px solid #d6e2f7; }
.ac-jobtop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ac-jobtop b { font-size: 13.5px; } .ac-jobtop small { color: var(--muted); font-size: 12px; }
.ac-bar { height: 8px; border-radius: 99px; background: #dfe7f5; overflow: hidden; }
.ac-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #5b8def, #3c6fd8); transition: width .4s; }
.ac-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ac-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font-size: 12.5px; box-shadow: none; text-decoration: line-through; }
.ac-chip.on { color: var(--ink); text-decoration: none; border-color: #c7d3e6; background: #f5f8fd; }
.ac-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; font-style: normal; vertical-align: middle; margin-right: 4px; }
.ac-chip .ac-dot { margin: 0; }
.ac-filter .slider > span { white-space: nowrap; }
.ac-btns { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ac-btns button.autocount { min-width: 0; padding: 9px 10px; column-gap: 8px; font-size: 13.5px; }
.ac-btns button.autocount span { width: 26px; height: 26px; }
.ac-btns button.autocount small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.smv-panel .sec .row > select { min-width: 0; }

/* slide quality panel */
.qc-intro { justify-items: center; text-align: center; gap: 8px; padding: 26px 20px; }
.qc-bigic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: #e8f5ee; color: #2e7d4f; }
.qc-bigic svg { width: 30px; height: 30px; }
.qc-intro b { font-size: 15px; }
.qc-intro p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
button.qc-run { width: 100%; padding: 10px 14px; border: 0; border-radius: 10px; color: #fff; font-weight: 700; font-size: 14px; background: linear-gradient(135deg, #3fb37f, #2e8b62); box-shadow: 0 2px 8px rgb(46 139 98 / .28); cursor: pointer; }
button.qc-run:hover { filter: brightness(1.05); }
button.qc-run.sec2 { background: var(--panel); color: #2e8b62; border: 1px solid #b9e0cc; box-shadow: none; }
.qc-head { grid-template-columns: auto 1fr; align-items: center; gap: 16px; }
.qc-head p { margin: 4px 0 2px; font-size: 13px; }
.qc-ring { --c: #2e8b62; width: 84px; height: 84px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: radial-gradient(closest-side, var(--panel) 78%, transparent 80%), conic-gradient(var(--c) calc(var(--v) * 1%), #e8ebf0 0); }
.qc-ring b { font-size: 26px; line-height: 1; } .qc-ring small { font-size: 11px; color: var(--muted); }
.qc-ring.mid { --c: #f0a020; } .qc-ring.bad { --c: #e53935; }
.qc-grade { display: inline-block; padding: 2px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.qc-grade.good { background: #e6f6ec; color: #1f8a4c; } .qc-grade.mid { background: #fff4de; color: #b26a00; } .qc-grade.bad { background: #fdecec; color: #c62828; }
.qc-issues { display: grid; gap: 6px; }
.qc-issue { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
.qc-issue > i { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.qc-issue > div { flex: 1; min-width: 0; } .qc-issue b { display: block; font-size: 13px; font-weight: 600; } .qc-issue small { font-size: 12px; color: var(--muted); }
.qc-legend { display: flex; gap: 12px; font-size: 12px; color: var(--muted); }
.qc-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; opacity: .7; }
.ac-wrap { display: grid; gap: 6px; }
.ac-note { margin: 0; font-size: 12px; }

/* breast panel markers + learning AI */
.mk-bar { display: grid; gap: 6px; }
.mk-lbl { font-size: 11.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.mk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-chip { padding: 5px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); font-size: 13px; font-weight: 600; color: var(--ink); box-shadow: none; }
.mk-chip.on { background: #e66840; border-color: #e66840; color: #fff; }
.mk-chip:hover:not(.on) { border-color: #f0b49c; background: #fff6f1; }
.br-main { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.br-main > b { font-size: 30px; line-height: 1; }
.br-badge { padding: 3px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.br-badge.pos { background: #fdecec; color: #c62828; } .br-badge.mid { background: #fff4de; color: #b26a00; } .br-badge.neg { background: #e8f0fb; color: #2456a6; }
.br-disc { margin: 0; font-size: 11.5px; color: var(--muted); font-style: italic; }
.ai-status { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: #f6f3ff; border: 1px solid #e2dafc; }
.ai-status b { display: block; font-size: 13.5px; } .ai-status small { display: block; font-size: 12px; color: var(--muted); }
.ai-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #b9b3cc; }
.ai-dot.on { background: #7c4dff; box-shadow: 0 0 0 4px rgb(124 77 255 / .18); }
button.ai-teach { width: 100%; padding: 9px 12px; border: 0; border-radius: 10px; color: #fff; font-weight: 700; background: linear-gradient(135deg, #8f6bff, #6a3ff0); box-shadow: 0 2px 8px rgb(106 63 240 / .28); }
button.ai-teach:disabled { opacity: .55; box-shadow: none; }
.ai-src summary { cursor: pointer; font-size: 13px; font-weight: 600; }
.ai-src[open] { display: grid; gap: 6px; }
.ai-src ul { margin: 0; padding-left: 18px; font-size: 12.5px; display: grid; gap: 3px; }
.ai-h { font-size: 12px; margin-top: 6px; }
.ai-list { display: grid; gap: 6px; }
.ai-item { display: flex; gap: 8px; align-items: center; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; }
.ai-item > div { flex: 1; min-width: 0; } .ai-item b { display: block; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-item small, .ai-hist small { display: block; font-size: 11.5px; color: var(--muted); }
.ai-hist { display: grid; gap: 2px; }
.br-res .inf-row b { white-space: normal; overflow: visible; }
.br-res .inf-row .inf-k { flex: 1 1 auto; min-width: 0; } .br-res .inf-row b { flex: none; max-width: 55%; }

/* knowledge base */
button.kb-btn { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 12px; border-radius: 10px; border: 1px solid #cfe3d8; background: #f1faf5; color: var(--ink); box-shadow: none; }
button.kb-btn:hover { border-color: #8fcaa9; background: #e8f6ee; }
button.kb-btn > span:first-child { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: #2e8b62; color: #fff; }
button.kb-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
button.kb-btn b { display: block; font-size: 13.5px; } button.kb-btn small { display: block; font-size: 11.5px; color: var(--muted); }
.br-src { margin: 0; font-size: 12px; color: var(--muted); }
.kb { display: grid; gap: 14px; max-height: 72vh; overflow: auto; padding-right: 4px; }
.kb-top { display: flex; align-items: center; gap: 12px; justify-content: space-between; flex-wrap: wrap; }
.kb-top b { display: block; font-size: 16px; } .kb-top small { color: var(--muted); font-size: 12.5px; }
button.kb-run { padding: 9px 16px; border: 0; border-radius: 10px; color: #fff; font-weight: 700; background: linear-gradient(135deg, #3fb37f, #2e8b62); box-shadow: 0 2px 8px rgb(46 139 98 / .28); }
button.kb-run:disabled { opacity: .7; }
.kb-rules { display: grid; gap: 6px; padding: 12px 14px; border-radius: 10px; background: #f5f8fd; border: 1px solid #dbe5f3; }
.kb-rh { display: flex; justify-content: space-between; align-items: center; }
.kb-vals { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; }
.kb-hist { display: block; color: var(--muted); font-size: 12px; }
.kb-filter { display: flex; gap: 6px; flex-wrap: wrap; }
.kb-list { display: grid; gap: 8px; }
.kb-item { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.kb-item.rev { opacity: .65; }
.kb-t { font-weight: 600; font-size: 14px; color: var(--ink); text-decoration: none; } .kb-t:hover { color: #2f6fd0; text-decoration: underline; }
.kb-item > small { color: var(--muted); font-size: 12px; }
.kb-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.kb-tag { padding: 1px 8px; border-radius: 999px; background: #eef1f6; color: #4a5468; font-size: 11.5px; font-weight: 600; }
.kb-tag.g { background: #e6f6ec; color: #1f8a4c; } .kb-tag.a { background: #efe9ff; color: #5b3fd0; } .kb-tag.c { background: #fff4de; color: #b26a00; }
.kb-item details p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: #444; }
.kb-form { display: grid; gap: 8px; min-width: min(480px, 80vw); }
/* home + user buttons at the top of the right toolbar */
.smv-bar .smv-bottom { margin-top: 0; border-top: 0; border-bottom: 1px solid rgb(255 255 255 / .15); padding: 4px 0 6px; }
.smv-bar .smv-bottom .menu .pop { top: 0; bottom: auto; }
/* filter sliders: label on its own line, slider + value below (no overlap with long labels) */
.ac-filter .slider { grid-template-columns: 1fr 44px; grid-template-rows: auto auto; row-gap: 2px; }
.ac-filter .slider > span { grid-column: 1 / -1; white-space: normal; font-weight: 600; font-size: 12.5px; }
.ac-filter .slider > input { grid-column: 1; min-width: 0; width: 100%; }
.ac-filter .slider > output { grid-column: 2; }

/* "add folder" in the sidebar */
.sm-treeheadwrap { position: relative; }
.sm-addfolder { position: absolute; right: 40px; top: 50%; transform: translateY(calc(-50% + 2px)); width: 30px; height: 30px; padding: 5px; border: 0; border-radius: 6px; background: transparent; color: #b8c7ce; box-shadow: none; cursor: pointer; }
.sm-addfolder:hover { background: rgb(255 255 255 / .1); color: #fff; }
.sm-addfolder svg { width: 20px; height: 20px; }
.sm-ctx { position: fixed; z-index: 1000; min-width: 210px; padding: 5px; border-radius: 8px; background: #fff; box-shadow: 0 6px 24px rgb(0 0 0 / .25); display: grid; }
.sm-ctx button { text-align: left; padding: 8px 12px; border: 0; border-radius: 5px; background: transparent; color: #222; font-size: 13.5px; box-shadow: none; }
.sm-ctx button:hover { background: #f1f4f8; }
.sm-ctx button { display: block; width: 100%; justify-content: flex-start; font-weight: 500; }

/* =====================================================================
   Modern theme (2026): soft surfaces, rounded cards, warm BIOGEAR accent
   ===================================================================== */
:root {
  --mx-accent: #16a34a; --mx-accent-2: #22c55e; --mx-accent-soft: #e9f9ef;
  --mx-page: #f4f5f9; --mx-surface: #ffffff; --mx-line: #e7e9ef; --mx-ink: #1f2430; --mx-muted: #6b7280;
  --mx-shadow: 0 1px 2px rgb(16 24 40 / .04), 0 6px 20px rgb(16 24 40 / .06);
  --mx-shadow-hi: 0 2px 4px rgb(16 24 40 / .06), 0 14px 34px rgb(16 24 40 / .12);
  --mx-side: #1d242c; --mx-side-2: #252e38; --mx-side-ink: #c3ccd6;
  --mx-r: 14px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --mx-page: #11141b; --mx-surface: #1a1e28; --mx-line: #2a3040; --mx-ink: #e8eaf0; --mx-muted: #9aa1b2; --mx-accent-soft: #13261b;
  --mx-shadow: 0 1px 2px rgb(0 0 0 / .3), 0 6px 20px rgb(0 0 0 / .25); --mx-shadow-hi: 0 2px 6px rgb(0 0 0 / .4), 0 14px 34px rgb(0 0 0 / .4); } }
:root[data-theme="dark"] {
  --mx-page: #11141b; --mx-surface: #1a1e28; --mx-line: #2a3040; --mx-ink: #e8eaf0; --mx-muted: #9aa1b2; --mx-accent-soft: #13261b;
  --mx-shadow: 0 1px 2px rgb(0 0 0 / .3), 0 6px 20px rgb(0 0 0 / .25); --mx-shadow-hi: 0 2px 6px rgb(0 0 0 / .4), 0 14px 34px rgb(0 0 0 / .4); }

.sm { background: var(--mx-page); font-family: var(--f-body); }
.sm-main { padding: 22px 26px 0; gap: 0; }

/* ---- sidebar ---- */
.sm-side { background: linear-gradient(180deg, var(--mx-side), #1a2027); color: var(--mx-side-ink); padding: 14px 10px; gap: 6px; }
.sm-sideform { background: transparent; border: 0; padding: 0 2px 6px; }
.sm-sidesearch { background: var(--mx-side-2); border: 1px solid #323c48; border-radius: 10px; overflow: hidden; }
.sm-sidesearch input { background: transparent; color: #e9edf2; }
.sm-sidesearch input::placeholder { color: #8d99a6; }
.sm-sidesearch button { background: transparent; color: #8d99a6; }
.sm-pills { gap: 6px; margin-top: 8px; }
.sm-pill { border-radius: 999px !important; padding: 5px 11px !important; font-size: 11.5px !important; font-weight: 600; border: 1px solid transparent; background: #2b3540 !important; color: #c9d3dd !important; box-shadow: none; }
.sm-pill.on { background: var(--mx-accent) !important; color: #fff !important; }
.sm-pill:hover { border-color: #4a5664; }
.sm-treeheadwrap { margin-top: 6px; }
.sm-treehead { background: transparent !important; border-radius: 10px; padding: 10px 12px; font-weight: 600; letter-spacing: .01em; color: #fff; border-left: 0; }
.sm-treehead:hover { background: rgb(255 255 255 / .05) !important; }
.sm-tree { padding: 4px 4px 12px; }
.sm-tree .zt-row { border-radius: 7px; height: 26px; padding: 0 8px 0 4px; color: #cfd7df; font-family: var(--f-body); font-size: 13.5px; }
.sm-tree .zt-row:hover { background: rgb(255 255 255 / .06); text-decoration: none; color: #fff; }
.sm-tree .zt-row.on { background: rgb(22 163 74 / .2); border-color: transparent; color: #ffd9c9; font-weight: 600; }
.sm-tree .zt-switch { border-radius: 3px; top: 7px; border-color: #77828f; background: #2b3540; color: #dbe2e8; }

/* ---- header / title ---- */
.sm-head { align-items: flex-end; margin-bottom: 4px; }
.sm-headl { display: grid; gap: 4px; }
.sm-crumbs { font-size: 12.5px; color: var(--mx-muted); }
.sm-crumbs a { color: var(--mx-muted); text-decoration: none; } .sm-crumbs a:hover { color: var(--mx-accent); }
.sm-crumbs .sm-total { display: none; }
.sm-title { margin: 0; font: 700 24px/1.2 var(--f-body); color: var(--mx-ink); display: flex; align-items: baseline; gap: 10px; letter-spacing: -.01em; }
.sm-titlecount { font-size: 13px; font-weight: 600; color: var(--mx-accent); background: var(--mx-accent-soft); padding: 2px 10px; border-radius: 999px; }

/* ---- toolbar ---- */
.sm-toolbar { background: var(--mx-surface); border: 1px solid var(--mx-line); border-radius: var(--mx-r); box-shadow: var(--mx-shadow); padding: 10px 12px; margin: 14px 0 18px; gap: 10px; }
.sm-btn { border-radius: 9px; font-weight: 600; font-size: 13px; padding: 8px 13px; transition: background .15s, box-shadow .15s, transform .1s; }
.sm-btn:active { transform: translateY(1px); }
.sm-group:first-child { gap: 0; }
.sm-group:first-child > .sm-btn.olive { background: var(--mx-page); color: var(--mx-muted); border: 1px solid var(--mx-line); border-radius: 0; box-shadow: none; }
.sm-group:first-child > .sm-btn.olive:first-child { border-radius: 9px 0 0 9px; }
.sm-group:first-child > .sm-btn.olive:nth-child(2) { border-radius: 0 9px 9px 0; border-left: 0; margin-right: 10px; }
.sm-group:first-child > .sm-btn.olive.active { background: var(--mx-surface); color: var(--mx-ink); box-shadow: inset 0 -2px 0 var(--mx-accent); }
.sm-check { font-size: 13px; color: var(--mx-muted); gap: 6px; }
.sm-search { flex: 1 1 260px; max-width: 420px; border: 1px solid var(--mx-line); border-radius: 999px; overflow: hidden; background: var(--mx-page); }
.sm-search input { border: 0 !important; background: transparent !important; padding: 8px 14px; box-shadow: none !important; }
.sm-search .sm-btn.orange { border-radius: 0 999px 999px 0; background: var(--mx-accent); padding: 8px 14px; }
.sm-actions { margin-left: auto; gap: 6px; }
.sm-actions .sm-btn { background: var(--mx-surface) !important; color: var(--mx-ink); border: 1px solid var(--mx-line); box-shadow: none; filter: none; }
.sm-actions .sm-btn:hover:not(:disabled) { border-color: #cfd5df; background: var(--mx-page) !important; }
.sm-actions .sm-btn span:not(.lbl) { color: var(--mx-accent); }
.sm-actions .sm-btn.maroon { color: #d93636; } .sm-actions .sm-btn.maroon span:not(.lbl) { color: #d93636; }
.sm-actions .sm-btn.maroon:hover:not(:disabled) { background: #fdeeee !important; border-color: #f2c4c4; }
.sm-actions .sm-btn.up { background: linear-gradient(135deg, var(--mx-accent-2), var(--mx-accent)) !important; color: #fff; border-color: transparent; box-shadow: 0 3px 10px rgb(22 163 74 / .3); }
.sm-actions .sm-btn.up span:not(.lbl) { color: #fff; }
.sm-actions .sm-btn.up:hover { filter: brightness(1.04); }
.sm-actions .sm-btn:disabled { opacity: .45; }

/* ---- subfolders ---- */
.sm-subfolders { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-bottom: 18px; }
.sm-chip { background: var(--mx-surface); border: 1px solid var(--mx-line); border-radius: 12px; padding: 10px 12px; box-shadow: var(--mx-shadow); gap: 10px; transition: transform .15s, box-shadow .15s; color: var(--mx-ink); }
.sm-chip:hover { transform: translateY(-2px); box-shadow: var(--mx-shadow-hi); border-color: rgb(34 197 94 / .45); }
.sm-chip > span { flex: none; width: 34px !important; height: 34px; border-radius: 10px; background: var(--mx-accent-soft); color: var(--mx-accent) !important; display: grid !important; place-items: center; }
.sm-chip > span svg { width: 18px; height: 18px; }
.sm-chip .nm { font-style: normal; font-weight: 600; font-size: 13.5px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-chip b { font: 600 11.5px var(--f-body); color: var(--mx-muted); white-space: nowrap; }

/* ---- slide cards ---- */
.sm-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.sm-card { background: var(--mx-surface); border: 1px solid var(--mx-line); border-radius: 16px; box-shadow: var(--mx-shadow); padding: 10px 10px 8px; justify-items: stretch; gap: 6px; transition: transform .18s, box-shadow .18s, border-color .18s; }
.sm-card:hover { transform: translateY(-3px); box-shadow: var(--mx-shadow-hi); }
.sm-card.sel { outline: 0; border-color: var(--mx-accent); box-shadow: 0 0 0 3px rgb(22 163 74 / .22), var(--mx-shadow); }
.sm-cardtop { position: absolute; z-index: 2; top: 16px; left: 16px; right: 16px; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.sm-cardtop > * { pointer-events: auto; }
.sm-no { min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px; background: rgb(17 24 39 / .62); color: #fff; font: 700 11.5px/22px var(--f-body); text-align: center; backdrop-filter: blur(4px); }
.sm-cardtop input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--mx-accent); cursor: pointer; }
.sm-frame { border-radius: 11px; overflow: hidden; background: var(--mx-page); border: 0; width: 100%; aspect-ratio: 16 / 10; display: flex; cursor: zoom-in; }
.sm-frame img { height: 100%; object-fit: cover; }
.sm-frame img.sm-label { flex: 0 0 auto; max-width: 34%; border-right: 2px solid var(--mx-surface); }
.sm-frame img.sm-macro { flex: 1; min-width: 0; }
.sm-tag { justify-self: start; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: #eaf2fd; color: #2f6fd0; text-decoration: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-tag.root { background: var(--mx-page); color: var(--mx-muted); }
.sm-fname { justify-self: stretch; font-weight: 700; font-size: 14px; color: var(--mx-ink); text-decoration: none; display: flex; gap: 6px; align-items: center; min-width: 0; }
.sm-fname > span { flex: none; color: var(--mx-muted); width: 15px; }
.sm-fname:hover { color: var(--mx-accent); }
.sm-fname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.sm-fname > span { display: none; }
.sm-line { justify-self: start; font-size: 12.5px; color: var(--mx-muted); gap: 6px; }
.sm-line span { color: #9aa3b2; }
.sm-line.sm-info { font-weight: 600; color: var(--mx-ink); font-size: 12px; background: var(--mx-page); padding: 3px 9px; border-radius: 7px; }
.sm-links { justify-self: stretch; display: flex; justify-content: space-between; gap: 4px; border-top: 1px solid var(--mx-line); padding-top: 6px; margin-top: 2px; }
.sm-link { flex: 1; justify-content: center; border-radius: 8px; padding: 6px 6px; color: var(--mx-muted); font-weight: 600; font-size: 12.5px; }
.sm-link:hover { background: var(--mx-accent-soft); color: var(--mx-accent); }
.sm-link.more { flex: 0 0 36px; }

/* ---- pager / footer / empty ---- */
.sm-pager button { border-radius: 9px; border: 1px solid var(--mx-line); background: var(--mx-surface); }
.sm-pager button.on { background: var(--mx-accent); border-color: var(--mx-accent); color: #fff; }
.sm-foot { border-top: 1px solid var(--mx-line); color: var(--mx-muted); font-size: 12.5px; padding: 16px 0 22px; margin-top: 26px; }
.sm .empty-state { background: var(--mx-surface); border: 1px dashed #d8dce5; border-radius: var(--mx-r); padding: 36px 24px; }
.sm-main.over { outline: 2px dashed var(--mx-accent); outline-offset: -10px; border-radius: 16px; }

/* ---- dialogs ---- */
.modal .box { border-radius: 14px; overflow: hidden; box-shadow: 0 24px 60px rgb(16 24 40 / .28); }
.modal .box.bs .bs-primary, .modal .box.bs button.bs-primary { background: var(--mx-accent); border-color: var(--mx-accent); border-radius: 9px; }
.modal .box.bs button.bs-default { border-radius: 9px; }
.modal .box.bs .bs-input, .modal .box.bs select { border-radius: 9px; }

@media (max-width: 760px) {
  .sm-main { padding: 14px 12px 0; }
  .sm-actions { margin-left: 0; }
  .sm-title { font-size: 20px; }
  .sm-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
}
/* modern theme fixes */
.sm-frame { margin: 0; padding: 0; box-shadow: none; height: auto; gap: 2px; box-sizing: border-box; }
.sm-frame img { background: transparent; }
.sm-sideform { margin: 0 4px 4px; }
.sm-pills { justify-content: flex-start; flex-wrap: wrap; border-top: 0; padding: 8px 0 0; }
.sm-pill { border: 0 !important; filter: none !important; }
.sm-pill:hover { background: #34404c !important; }
.sm-pill.on:hover { background: var(--mx-accent) !important; }
.sm-tree { background: transparent; }
.sm-actions .sm-btn, .sm-actions .menu > .sm-btn { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; white-space: nowrap; }
.sm-toolbar { row-gap: 10px; }
.sm-cardtop { display: flex; gap: 0; justify-items: initial; }
.sm-frame { aspect-ratio: 2.5 / 1; }
.sm-pills { flex-wrap: nowrap; gap: 6px; }
.sm-pill { padding: 5px 9px !important; font-size: 11px !important; white-space: nowrap; }
.sm-check input, .sm input[type=checkbox] { accent-color: var(--mx-accent); }
.sm-pills > .sm-pill { flex: 1 1 0; min-width: 0; justify-content: center; overflow: hidden; text-overflow: ellipsis; }

/* =====================================================================
   Modern theme — viewer
   ===================================================================== */
.smv { font-family: var(--f-body); }
/* left list */
.smv-list { background: var(--mx-surface); border-right: 1px solid var(--mx-line); padding: 0 14px 20px; }
.smv-lhead { background: var(--mx-surface); padding: 14px 0 12px; }
.smv-tabs { background: var(--mx-page); border-radius: 12px; padding: 4px; gap: 4px; }
.smv-tab { height: 32px; border-radius: 9px; font-weight: 600; font-size: 13px; color: var(--mx-muted); background: transparent; box-shadow: none; border: 0; }
.smv-tab:hover { background: rgb(0 0 0 / .04); color: var(--mx-ink); }
.smv-tab.on { background: var(--mx-surface); color: var(--mx-accent); box-shadow: 0 1px 3px rgb(16 24 40 / .12); }
.dtree .dt-row { border-radius: 8px; height: 30px; font-family: var(--f-body); font-size: 13.5px; color: var(--mx-ink); }
.dtree .dt-row:hover { background: var(--mx-page); }
.dtree .dt-ficon { color: var(--mx-accent); }
.dtree .dt-n { font-family: var(--f-body); background: var(--mx-page); border-radius: 999px; padding: 0 7px; font-size: 11px; color: var(--mx-muted); }
.dtree .dt-file { height: 30px; }
.dtree .dt-name { border-radius: 8px; font-family: var(--f-body); font-size: 13px; padding: 4px 8px; color: var(--mx-ink); }
.dtree .dt-name:hover { background: var(--mx-accent-soft); color: var(--mx-accent); }
.dtree .dt-file.cur .dt-name { background: linear-gradient(135deg, var(--mx-accent-2), var(--mx-accent)); color: #fff; box-shadow: 0 2px 8px rgb(22 163 74 / .3); }
.dtree .dt-sicon { color: #a07ad6; }
.dtree .dt-dot.on { background: #22c55e; border-color: #16a34a; box-shadow: 0 0 0 3px rgb(34 197 94 / .18); }
.smv-bthumb { border: 1px solid var(--mx-line); border-radius: 14px; background: var(--mx-page); box-shadow: var(--mx-shadow); }
.smv-bitem.cur .smv-bthumb { border-color: var(--mx-accent); box-shadow: 0 0 0 3px rgb(22 163 74 / .2); }
.smv-bitem.cur .smv-bno { color: var(--mx-accent); }
.smv-bname { font-family: var(--f-body); font-size: 13px; font-weight: 600; color: var(--mx-ink); }
.smv-bdot.on { background: #22c55e; }
.smv-ltab { background: var(--mx-surface); color: var(--mx-muted); border: 1px solid var(--mx-line); border-left: 0; border-radius: 0 10px 10px 0; width: 14px; box-shadow: var(--mx-shadow); }
.smv-ltab:hover { background: var(--mx-accent); color: #fff; }

/* stage & panes */
.smv-stage, .smv .panes, .smv .pane { background: #fbfbfd; }
.smv .panes:not(.l1) { background: #161a22; }
.smv .pane.active::after { border: 2px solid var(--mx-accent); border-radius: 2px; }
.smv .pane .phead .nm { background: rgb(17 24 39 / .55); backdrop-filter: blur(6px); border-radius: 999px; padding: 4px 12px; font-size: 13.5px; font-weight: 600; }
.smv .pane .phead .px { border-radius: 999px; background: rgb(17 24 39 / .55); }
.smv .pane .navigator { border: 0 !important; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 16px rgb(16 24 40 / .18); }

/* zoom slider */
.zm-pm { width: 22px; height: 22px; border-radius: 7px; border: 1px solid var(--mx-line); background: var(--mx-surface); color: var(--mx-muted); font: 600 15px/1 var(--f-body); box-shadow: 0 1px 3px rgb(16 24 40 / .1); }
.zm-pm:hover { color: var(--mx-accent); border-color: rgb(34 197 94 / .45); background: var(--mx-surface); }
.zm-track { width: 6px; border: 0; border-radius: 999px; background: #e3e6ec; box-shadow: inset 0 1px 2px rgb(0 0 0 / .08); }
.zm-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid var(--mx-accent); box-shadow: 0 2px 6px rgb(22 163 74 / .35); }
.zm-bubble { background: var(--mx-ink); border-radius: 8px; font: 700 12px/1 var(--f-body); padding: 5px 8px; }
.zm-bubble::after { border-left-color: var(--mx-ink) !important; }
.zm-mags button { height: 22px; min-width: 40px; border-radius: 999px; font: 700 11.5px/1 var(--f-body); background: var(--mx-surface); color: var(--mx-ink); border: 1px solid var(--mx-line); box-shadow: 0 1px 3px rgb(16 24 40 / .08); }
.zm-mags button:hover { background: var(--mx-accent-soft); color: var(--mx-accent); border-color: rgb(34 197 94 / .45); }
.zm-mags button.cur { background: var(--mx-accent); color: #fff; border-color: var(--mx-accent); }
.zm-mags { gap: 7px; }

/* scale bar */
.ruler { background: rgb(255 255 255 / .85); backdrop-filter: blur(6px); border-radius: 10px; padding: 6px 12px 22px; box-shadow: 0 2px 10px rgb(16 24 40 / .1); box-sizing: content-box; }
.ruler-bar { background: var(--mx-ink); border-radius: 2px; top: 6px; left: 12px; right: 12px; }
.ruler-t i { background: var(--mx-ink); border-radius: 1px; }
.ruler-t b { font: 700 12.5px/1.2 var(--f-body); color: var(--mx-ink); }
.ruler-t { top: 6px; margin-left: 12px; }

/* pan pad */
.smv-pad { gap: 6px !important; }
.smv-pad button { border-radius: 10px; background: rgb(17 24 39 / .55); backdrop-filter: blur(6px); font-size: 16px; box-shadow: 0 2px 8px rgb(16 24 40 / .15); }
.smv-pad button:hover { background: var(--mx-accent); }

/* right toolbar */
.smv-bar { background: linear-gradient(180deg, #1f2630, #1a2027); box-shadow: -1px 0 0 rgb(0 0 0 / .2); }
.smv-collapse { background: transparent; color: #9aa6b4; }
.smv-collapse:hover { color: #fff; background: rgb(255 255 255 / .06); }
.smv-icons > button, .smv-cmpwrap > button, .smv-bottom > button, .smv-bottom > a, .smv-bottom .menu > button { width: 40px; height: 40px; border-radius: 11px; color: #c9d2dc; transition: background .15s, color .15s; }
.smv-icons button svg, .smv-bottom svg { width: 22px; height: 22px; }
.smv-icons > button:hover, .smv-cmpwrap > button:hover, .smv-bottom > button:hover, .smv-bottom > a:hover, .smv-bottom .menu > button:hover { background: rgb(255 255 255 / .08); color: #fff; }
.smv-icons > button.on, .smv-cmpwrap > button.on { background: linear-gradient(135deg, var(--mx-accent-2), var(--mx-accent)); color: #fff; box-shadow: 0 3px 10px rgb(22 163 74 / .4); }
.smv-icons { gap: 4px; padding: 8px 4px; }
.smv-icons .sep, .smv-bar .smv-bottom { border-color: rgb(255 255 255 / .08); }

/* side panels */
.smv-panel { background: var(--mx-surface); border-left: 1px solid var(--mx-line); box-shadow: -10px 0 30px rgb(16 24 40 / .12); }
.smv-phead { background: var(--mx-surface); color: var(--mx-ink); border-bottom: 1px solid var(--mx-line); padding: 14px 12px 14px 18px; }
.smv-phead strong { font: 700 16px var(--f-body); }
.smv-phead button { color: var(--mx-muted); border-radius: 8px; }
.smv-phead button:hover { background: var(--mx-page); color: var(--mx-ink); }
.smv-panel .sec { border-bottom-color: var(--mx-line); }
.smv-panel .sec h3 { color: var(--mx-muted); }
.smv-panel button:not(.ghost):not(.cls):not(.ac-chip):not(.mk-chip):not(.autocount):not(.ai-teach):not(.kb-btn):not(.qc-run):not(.al-eye):not(.al-delall):not(.sw) { border-radius: 9px; }
.counter-classes .cls { border-radius: 12px; }
.stat { border-radius: 12px; }

/* annotation palette */
.smv-palette { background: rgb(26 32 39 / .88) !important; backdrop-filter: blur(10px); border-radius: 14px !important; padding: 6px 8px !important; box-shadow: 0 8px 24px rgb(16 24 40 / .25); gap: 2px; }
.smv-palette button { border-radius: 9px; }
.smv-palette button.on { background: var(--mx-accent); }

/* compare picker + object glass */
.smv-cmp { border-radius: 14px; border: 1px solid var(--mx-line); box-shadow: var(--mx-shadow-hi); }
.smv-scope { border-radius: 14px; background: rgb(26 32 39 / .9); backdrop-filter: blur(10px); box-shadow: 0 8px 24px rgb(16 24 40 / .3); }
.smv-scope .objs input { accent-color: var(--mx-accent); }
/* scale bar: no box (keeps the exact length), modern type + soft halo for contrast */
.ruler { background: none; backdrop-filter: none; box-shadow: none; padding: 0; border-radius: 0; box-sizing: border-box; }
.ruler-bar { top: 0; left: 0; right: 0; box-shadow: 0 0 0 1.5px rgb(255 255 255 / .85); }
.ruler-t { top: 0; margin-left: 0; }
.ruler-t i { box-shadow: 0 0 0 1px rgb(255 255 255 / .8); }
.ruler-t b { text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 2px #fff; }
.smv .pane.scoped .ruler-t b { text-shadow: none; }
.smv .pane.scoped .ruler-bar, .smv .pane.scoped .ruler-t i { box-shadow: none; }
.smv-palette { flex-wrap: nowrap !important; padding: 5px 6px !important; gap: 1px; }
.smv-palette button { width: 32px; height: 32px; padding: 6px; }
.smv-palette button.sw { width: 20px; height: 20px; }
.counter-classes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.counter-classes .cls { min-width: 0; padding: 9px 9px; gap: 7px; }
.counter-classes .cls > span:nth-child(2) { min-width: 0; overflow: hidden; }
.cls b, .stat b { font-family: var(--f-body); font-weight: 700; }
.cls b { font-size: 14px; }
.stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat { min-width: 0; } .stat b { font-size: 17px; overflow: hidden; text-overflow: ellipsis; }
.cls.on { outline: 0; border-color: var(--mx-accent); background: var(--mx-accent-soft); box-shadow: 0 0 0 2px rgb(22 163 74 / .2); }
.smv-panel input[type=checkbox], .smv-panel input[type=radio], .smv-panel input[type=range], .smv input[type=checkbox] { accent-color: var(--mx-accent); }
.smv-panel button.primary { background: linear-gradient(135deg, var(--mx-accent-2), var(--mx-accent)); border-color: transparent; color: #fff; box-shadow: 0 2px 8px rgb(22 163 74 / .28); }
.smv-panel button.primary:hover { filter: brightness(1.04); }
.smv-panel .row > button:not(.primary):not(.danger):not(.ghost) { background: var(--mx-surface); border: 1px solid var(--mx-line); }
.smv-panel .row > button:not(.primary):not(.danger):not(.ghost):hover { border-color: rgb(34 197 94 / .45); color: var(--mx-accent); background: var(--mx-accent-soft); }
.smv-panel .slider output { font-family: var(--f-body); font-weight: 600; }
/* performance: no live blur over the slide canvas (it re-renders on every pan/zoom frame) */
.smv *, .sm * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.smv .pane .phead .nm, .smv .pane .phead .px { background: rgb(17 24 39 / .72); }
.smv-pad button { background: rgb(17 24 39 / .7); box-shadow: none; }
.smv-palette { background: rgb(26 32 39 / .96) !important; }
.smv-scope { background: rgb(26 32 39 / .96); }
.smv .pane .navigator { box-shadow: 0 2px 8px rgb(16 24 40 / .18); }
.sm-card { transition: box-shadow .15s, border-color .15s; }
.sm-card:hover { transform: none; }

/* =====================================================================
   Workspace theme (Frappe-style): neutral dark surfaces, green primary,
   blue links, sidebar with navigation list and the user at the bottom.
   ===================================================================== */
:root, :root[data-theme="light"] {
  --mx-accent: #16a34a; --mx-accent-2: #22c55e; --mx-accent-soft: #e9f9ef; --mx-link: #2563eb;
  --mx-page: #f7f7f8; --mx-surface: #ffffff; --mx-line: #e6e6e9; --mx-ink: #18181b; --mx-muted: #71717a;
  --fx-side: #fbfbfb; --fx-side-ink: #3f3f46; --fx-side-hover: #f0f0f2; --fx-side-active: #ececef; --fx-side-line: #ececef; --fx-side-strong: #18181b;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --mx-accent: #16a34a; --mx-accent-2: #22c55e; --mx-accent-soft: rgb(22 163 74 / .14); --mx-link: #3b82f6;
  --mx-page: #171717; --mx-surface: #1e1e1e; --mx-line: #2b2b2b; --mx-ink: #ececec; --mx-muted: #8f8f8f;
  --mx-shadow: none; --mx-shadow-hi: 0 0 0 1px #3a3a3a;
  --fx-side: #191919; --fx-side-ink: #c8c8c8; --fx-side-hover: #242424; --fx-side-active: #2a2a2a; --fx-side-line: #262626; --fx-side-strong: #fafafa;
  --bg: #171717; --panel: #1e1e1e; --panel-2: #242424; --ink: #ececec; --muted: #8f8f8f; --line: #2b2b2b; --chip: #262626; --stage: #111;
  --hema: #22c55e; --hema-soft: rgb(22 163 74 / .16); --hema-ink: #0b0b0b; } }
:root[data-theme="dark"] {
  --mx-accent: #16a34a; --mx-accent-2: #22c55e; --mx-accent-soft: rgb(22 163 74 / .14); --mx-link: #3b82f6;
  --mx-page: #171717; --mx-surface: #1e1e1e; --mx-line: #2b2b2b; --mx-ink: #ececec; --mx-muted: #8f8f8f;
  --mx-shadow: none; --mx-shadow-hi: 0 0 0 1px #3a3a3a;
  --fx-side: #191919; --fx-side-ink: #c8c8c8; --fx-side-hover: #242424; --fx-side-active: #2a2a2a; --fx-side-line: #262626; --fx-side-strong: #fafafa;
  --bg: #171717; --panel: #1e1e1e; --panel-2: #242424; --ink: #ececec; --muted: #8f8f8f; --line: #2b2b2b; --chip: #262626; --stage: #111;
  --hema: #22c55e; --hema-soft: rgb(22 163 74 / .16); --hema-ink: #0b0b0b;
}
body { background: var(--mx-page); color: var(--mx-ink); }

/* layout: no top bar on desktop, sidebar carries brand + menu + user */
@media (min-width: 821px) {
  .sm { grid-template-rows: 0 minmax(0, 1fr); }
  .sm-top { display: none; }
}
.sm-shell { grid-template-columns: 260px minmax(0, 1fr); position: relative; }
.sm-shell.closed { grid-template-columns: 0 minmax(0, 1fr); }
.fx-side { background: var(--fx-side) !important; color: var(--fx-side-ink); border-right: 1px solid var(--fx-side-line); padding: 0 0 0; gap: 0; display: flex; flex-direction: column; }
.fx-ws { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--fx-side-line); text-decoration: none; }
.fx-ws img { height: 20px; width: auto; display: block; }
.fx-nav { display: grid; gap: 2px; padding: 10px 10px 6px; }
.fx-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 8px 11px; border: 0; border-radius: 9px; background: transparent; color: var(--fx-side-ink); font: 500 13.5px var(--f-body); text-decoration: none; text-align: left; box-shadow: none; cursor: pointer; }
.fx-item:hover { background: var(--fx-side-hover); color: var(--fx-side-strong); }
.fx-item.on { background: var(--fx-side-active); color: var(--fx-side-strong); font-weight: 600; }
.fx-ic { width: 18px; height: 18px; flex: none; display: grid; }
.fx-ic svg, .fx-iconbtn svg, .fx-collapse svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fx-sec { padding: 14px 11px 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mx-muted); }
.fx-side .sm-sideform { margin: 8px 12px 2px; }
.fx-side .sm-pills { display: none; }
.fx-side .sm-sidesearch { background: var(--fx-side-hover); border: 1px solid var(--fx-side-line); border-radius: 9px; }
.fx-side .sm-sidesearch input { color: var(--fx-side-strong); }
.fx-side .sm-sidesearch input::placeholder, .fx-side .sm-sidesearch button { color: var(--mx-muted); }
.fx-side .sm-treeheadwrap { margin: 4px 10px 0; }
.fx-side .sm-treehead { color: var(--fx-side-strong) !important; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; padding: 10px 11px; font-weight: 600; }
.fx-side .sm-treehead .sm-libicon { display: none; }
.fx-side .sm-treehead:hover { background: var(--fx-side-hover) !important; }
.fx-side .sm-addfolder { color: var(--mx-muted); }
.fx-side .sm-addfolder:hover { background: var(--fx-side-hover); color: var(--fx-side-strong); }
.fx-side .sm-tree { flex: 1; padding: 2px 10px 12px 12px; }
.fx-side .sm-tree .zt-row { color: var(--fx-side-ink); }
.fx-side .sm-tree .zt-row:hover { background: var(--fx-side-hover); color: var(--fx-side-strong); }
.fx-side .sm-tree .zt-row.on { background: var(--fx-side-active); color: var(--fx-side-strong); }
.fx-side .sm-tree .zt-switch { background: var(--fx-side); border-color: var(--mx-muted); color: var(--fx-side-ink); }
.fx-side .sm-ztree li::before, .fx-side .sm-ztree li::after, .fx-side .sm-ztree ul::before { border-color: #55555580 !important; }
.fx-user { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--fx-side-line); position: sticky; bottom: 0; background: var(--fx-side); }
.fx-avatar { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #3f3f46; color: #fff; font: 600 12.5px var(--f-body); }
.fx-uname { flex: 1; min-width: 0; }
.fx-uname b { display: block; font-size: 13.5px; color: var(--fx-side-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-uname small { display: block; font-size: 11.5px; color: var(--mx-muted); }
.fx-iconbtn, .fx-usermenu > button { width: 30px; height: 30px; padding: 6px; border: 0; border-radius: 8px; background: transparent; color: var(--mx-muted); box-shadow: none; display: grid; place-items: center; }
.fx-iconbtn:hover, .fx-usermenu > button:hover { background: var(--fx-side-hover); color: var(--fx-side-strong); }
.fx-usermenu .pop { left: auto; right: 0; top: auto; bottom: calc(100% + 8px); color: var(--mx-ink); }
.fx-collapse { position: absolute; z-index: 20; left: 247px; top: 50%; width: 26px; height: 26px; padding: 6px; border-radius: 50%; border: 1px solid var(--fx-side-line); background: var(--mx-surface); color: var(--mx-muted); box-shadow: 0 1px 4px rgb(0 0 0 / .2); display: grid; place-items: center; transition: left .2s, transform .2s; }
.fx-collapse:hover { color: var(--mx-ink); }
.sm-shell.closed .fx-collapse { left: 6px; transform: rotate(180deg); }
@media (max-width: 820px) { .fx-collapse { display: none; } }

/* main area */
.sm-main { background: var(--mx-page); padding: 26px 34px 0; }
.fx-greet { display: grid; gap: 3px; margin-bottom: 18px; }
.fx-greet b { font-size: 18px; font-weight: 700; color: var(--mx-ink); }
.fx-greet small { font-size: 13px; color: var(--mx-muted); }
.sm-title { font-size: 20px; }
.sm-titlecount { color: var(--mx-accent); }
.sm-crumbs a:hover { color: var(--mx-link); }
.sm-toolbar, .sm-card, .sm-chip, .sm .empty-state { background: var(--mx-surface); border-color: var(--mx-line); box-shadow: none; }
.sm-toolbar { border-radius: 14px; }
.sm-card { border-radius: 14px; }
.sm-card:hover { border-color: #3a3a3a; box-shadow: none; }
:root[data-theme="light"] .sm-card:hover { border-color: #d4d4d8; }
.sm-card.sel { border-color: var(--mx-accent); box-shadow: 0 0 0 1px var(--mx-accent); }
.sm-tag { background: rgb(59 130 246 / .14); color: var(--mx-link); }
.sm-fname:hover { color: var(--mx-link); }
.sm-line.sm-info, .sm-search, .sm-group:first-child > .sm-btn.olive { background: var(--mx-page); }
.sm-group:first-child > .sm-btn.olive.active { background: var(--mx-surface); box-shadow: inset 0 -2px 0 var(--mx-accent); }
.sm-actions .sm-btn { background: var(--mx-surface) !important; }
.sm-actions .sm-btn:hover:not(:disabled) { background: var(--mx-page) !important; }
.sm-actions .sm-btn.up { background: var(--mx-accent) !important; box-shadow: none; }
.sm-actions .sm-btn.maroon { color: #ef4444; } .sm-actions .sm-btn.maroon span:not(.lbl) { color: #ef4444; }
.sm-actions .sm-btn.maroon:hover:not(:disabled) { background: rgb(239 68 68 / .1) !important; border-color: rgb(239 68 68 / .35); }
.sm-search .sm-btn.orange { background: var(--mx-accent); }
.sm-foot { border-color: var(--mx-line); }
.sm-no { background: rgb(0 0 0 / .65); }
.mk-chip.on { background: var(--mx-accent); border-color: var(--mx-accent); }
button.autocount { background: var(--mx-accent); box-shadow: none; }
button.autocount.all { background: #2563eb; box-shadow: none; }
button.ai-teach { background: #7c3aed; box-shadow: none; }
button.qc-run, button.kb-run { background: var(--mx-accent); box-shadow: none; }

/* dialogs & menus follow the theme */
.modal .box { background: var(--mx-surface); color: var(--mx-ink); border: 1px solid var(--mx-line); box-shadow: 0 24px 60px rgb(0 0 0 / .45); }
.pop, .sm-ctx { background: var(--mx-surface); color: var(--mx-ink); border: 1px solid var(--mx-line); }
.sm-ctx button { color: var(--mx-ink); } .sm-ctx button:hover { background: var(--mx-page); }

/* viewer */
.smv-list, .smv-lhead { background: var(--fx-side); border-color: var(--fx-side-line); }
.smv-tabs { background: var(--fx-side-hover); }
.smv-tab.on { background: var(--fx-side-active); color: var(--fx-side-strong); box-shadow: none; }
.dtree .dt-row, .dtree .dt-name { color: var(--fx-side-ink); }
.dtree .dt-row:hover, .dtree .dt-name:hover { background: var(--fx-side-hover); color: var(--fx-side-strong); }
.dtree .dt-file.cur .dt-name { background: var(--fx-side-active); color: var(--fx-side-strong); box-shadow: inset 2px 0 0 var(--mx-accent); }
.dtree .dt-ficon { color: #a1a1aa; }
.dtree .dt-n { background: var(--fx-side-hover); }
.smv-stage, .smv .panes, .smv .pane { background: var(--stage, #111); }
:root[data-theme="light"] .smv-stage, :root[data-theme="light"] .smv .panes.l1, :root[data-theme="light"] .smv .pane { background: #fbfbfd; }
.smv .panes:not(.l1) { background: #0d0d0d; }
.smv-bar { background: var(--fx-side); border-left: 1px solid var(--fx-side-line); box-shadow: none; }
.smv-icons > button, .smv-cmpwrap > button, .smv-bottom > button, .smv-bottom > a, .smv-bottom .menu > button, .smv-collapse { color: var(--mx-muted); }
.smv-icons > button:hover, .smv-cmpwrap > button:hover, .smv-bottom > button:hover, .smv-bottom > a:hover, .smv-bottom .menu > button:hover { background: var(--fx-side-hover); color: var(--fx-side-strong); }
.smv-icons > button.on, .smv-cmpwrap > button.on { background: var(--fx-side-active); color: var(--fx-side-strong); box-shadow: inset 2px 0 0 var(--mx-accent); }
.smv-icons .sep, .smv-bar .smv-bottom { border-color: var(--fx-side-line); background: transparent; }
.smv-icons .sep { background: var(--fx-side-line); }
.smv-panel, .smv-phead { background: var(--mx-surface); border-color: var(--mx-line); color: var(--mx-ink); box-shadow: none; }
.smv-ltab { background: var(--mx-surface); border-color: var(--mx-line); color: var(--mx-muted); }
.zm-pm, .zm-mags button { background: var(--mx-surface); color: var(--mx-ink); border-color: var(--mx-line); box-shadow: none; }
.zm-mags button.cur { background: var(--mx-accent); color: #fff; border-color: var(--mx-accent); }
.zm-track { background: #3a3a3a; }
:root[data-theme="light"] .zm-track { background: #e3e6ec; }
.zm-thumb { background: var(--mx-surface); }
.ruler-t b { color: #ececec; text-shadow: 0 0 3px #000, 0 0 3px #000; }
.ruler-bar, .ruler-t i { background: #ececec; box-shadow: 0 0 0 1px rgb(0 0 0 / .6); }
:root[data-theme="light"] .ruler-t b { color: #18181b; text-shadow: 0 0 3px #fff, 0 0 3px #fff; }
:root[data-theme="light"] .ruler-bar, :root[data-theme="light"] .ruler-t i { background: #18181b; box-shadow: 0 0 0 1.5px rgb(255 255 255 / .85); }
.smv .pane .navigator { background: #fff !important; }
.inf-card, .al-item, .qc-issue, .ai-item, .kb-item, .inf-tile, .shr-qr { background: var(--mx-surface); border-color: var(--mx-line); }
.inf-ic, .shr-ic { background: rgb(59 130 246 / .14); color: var(--mx-link); }
.ai-status { background: rgb(124 58 237 / .1); border-color: rgb(124 58 237 / .3); }
button.kb-btn { background: var(--mx-accent-soft); border-color: rgb(22 163 74 / .35); }
.kb-rules { background: var(--mx-page); border-color: var(--mx-line); }
.shr-urlbox, .shr-hint { background: var(--mx-page); border-color: var(--mx-line); color: var(--mx-ink); }
.shr-url { color: var(--mx-link); }
.br-badge.neg { background: rgb(59 130 246 / .14); color: #60a5fa; }
.br-badge.pos { background: rgb(239 68 68 / .14); color: #f87171; }
.br-badge.mid { background: rgb(245 158 11 / .15); color: #fbbf24; }
/* fixes for the workspace theme */
@media (min-width: 821px) { .sm { grid-template-rows: minmax(0, 1fr); } }
:root[data-theme="dark"] .viewer.smv {
  --bg: #171717; --panel: #1e1e1e; --panel-2: #242424; --ink: #ececec; --muted: #8f8f8f; --line: #2b2b2b; --stage: #111;
  --chip: #262626; --hema: #22c55e; --hema-ink: #0b0b0b; --hema-soft: rgb(22 163 74 / .16);
  color-scheme: dark; background: #111;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .viewer.smv {
  --bg: #171717; --panel: #1e1e1e; --panel-2: #242424; --ink: #ececec; --muted: #8f8f8f; --line: #2b2b2b; --stage: #111;
  --chip: #262626; --hema: #22c55e; --hema-ink: #0b0b0b; --hema-soft: rgb(22 163 74 / .16);
  color-scheme: dark; background: #111; } }
.viewer.smv { font-family: var(--f-body); }
.zm-bubble { background: var(--mx-accent); color: #fff; }
.zm-bubble::after { border-left-color: var(--mx-accent) !important; }
.dtree .dt-row, .dtree .dt-folder.open > .dt-row { color: var(--fx-side-ink); }
.dtree .dt-row .dt-label { color: inherit; }
.dtree .dt-caret { color: var(--mx-muted); }
.dtree .dt-dot { background: transparent; border-color: #71717a; }
.smv-name, .smv-bname { color: var(--mx-ink); }
button.fx-item { justify-content: flex-start; }
/* scale bar sits on the (white) slide image in every theme: dark bar with white halo */
.ruler-t b { color: #18181b !important; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 2px #fff !important; }
.ruler-bar, .ruler-t i { background: #18181b !important; box-shadow: 0 0 0 1.5px rgb(255 255 255 / .85) !important; }
.smv .pane.scoped .ruler-t b { color: #fff !important; text-shadow: none !important; }
.smv .pane.scoped .ruler-bar, .smv .pane.scoped .ruler-t i { background: #fff !important; box-shadow: none !important; }
.ac-chip { background: var(--mx-surface); border-color: var(--mx-line); color: var(--mx-muted); }
.ac-chip.on { background: var(--mx-page); border-color: var(--mx-line); color: var(--mx-ink); }
button.autocount, button.autocount:hover:not(:disabled) { box-shadow: none !important; }
.mk-chip { background: var(--mx-surface); color: var(--mx-ink); border-color: var(--mx-line); }

.smv-scope .sc-live { font-size: 12px; color: #a7f3d0; min-height: 0; }
.smv-scope .sc-live:empty { display: none; }
/* microscope mode: only the Object Glass lens value is shown; the slider keeps + / − and the track */
.smv.scope-on .zm-bubble, .smv.scope-on .zm-mags { display: none !important; }
/* folder tree connector lines: dashed and lit in the accent colour with a soft glow */
.fx-side .sm-ztree li::before { border-left: 0 !important; width: 2px; left: 8px; background: repeating-linear-gradient(to bottom, #34d399 0 4px, transparent 4px 7px); filter: drop-shadow(0 0 3px rgb(52 211 153 / .9)); }
.fx-side .sm-ztree li::after { border-top: 0 !important; height: 2px; top: 12px; left: 10px; width: 9px; background: repeating-linear-gradient(to right, #34d399 0 3px, transparent 3px 5px); filter: drop-shadow(0 0 3px rgb(52 211 153 / .9)); }
.fx-side .sm-ztree li:last-child::before { height: 13px; }
.fx-side .sm-ztree > li:first-child::before { top: 13px; }
:root[data-theme="light"] .fx-side .sm-ztree li::before { background: repeating-linear-gradient(to bottom, #16a34a 0 4px, transparent 4px 7px); filter: drop-shadow(0 0 2px rgb(22 163 74 / .5)); }
:root[data-theme="light"] .fx-side .sm-ztree li::after { background: repeating-linear-gradient(to right, #16a34a 0 3px, transparent 3px 5px); filter: drop-shadow(0 0 2px rgb(22 163 74 / .5)); }
.fx-side .sm-tree .zt-switch { border-color: #22c55e; color: #22c55e; box-shadow: 0 0 6px rgb(34 197 94 / .55); }

/* live session */
.live-banner { position: absolute; z-index: 60; top: 10px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 9px; padding: 7px 8px 7px 14px; border-radius: 999px; background: rgb(17 17 17 / .92); color: #fff; font-size: 13px; box-shadow: 0 6px 20px rgb(0 0 0 / .35); white-space: nowrap; }
.live-banner b { color: #f87171; letter-spacing: .06em; font-size: 12px; }
.live-banner button { padding: 4px 12px; border-radius: 999px; border: 1px solid #3f3f46; background: #27272a; color: #fff; font-size: 12.5px; box-shadow: none; }
.live-banner button:hover { background: #3f3f46; }
.live-banner.off .live-dot { background: #a1a1aa; animation: none; box-shadow: none; }
.live-banner.off b { color: #a1a1aa; }
.live-banner.ended .live-dot { background: #71717a; animation: none; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 0 rgb(239 68 68 / .6); animation: livepulse 1.6s infinite; flex: none; display: inline-block; }
@keyframes livepulse { 0% { box-shadow: 0 0 0 0 rgb(239 68 68 / .6); } 70% { box-shadow: 0 0 0 8px rgb(239 68 68 / 0); } 100% { box-shadow: 0 0 0 0 rgb(239 68 68 / 0); } }
.live-head { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.live-head b:first-of-type { color: #ef4444; letter-spacing: .06em; }
.smv-icons > button.is-live { color: #fff !important; background: #dc2626 !important; box-shadow: none !important; position: relative; }
.smv-icons > button.is-live[data-n]:not([data-n=""])::after { content: attr(data-n); position: absolute; top: 2px; right: 2px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px; background: #fff; color: #dc2626; font: 700 10px/15px var(--f-body); }
/* slide-glass picture in each panel (Pengaturan tampilan → Gambar kaca slide) */
.pane-glass { position: absolute; z-index: 14; top: 20px; right: 20px; width: clamp(120px, 22%, 230px); padding: 3px; border: 0; border-radius: 10px; background: #fff; box-shadow: 0 2px 10px rgb(0 0 0 / .3); cursor: zoom-in; display: block; }
.pane-glass img { display: block; width: 100%; height: auto; border-radius: 7px; }
.pane-glass:hover { box-shadow: 0 0 0 2px var(--mx-accent), 0 2px 10px rgb(0 0 0 / .3); }
.smv .panes:not(.l1) .pane-glass { top: 50px; right: 10px; width: clamp(100px, 24%, 170px); }
.pane.empty .pane-glass { display: none; }
/* make room for the edge rulers */
.smv .pane.has-ruler .phead { top: 28px; }
.smv .pane.has-ruler .pane-glass { top: 30px; }
.smv .pane.has-ruler .navigator { margin-top: 28px !important; margin-left: 28px !important; }
/* BIOGEAR logo at the top of the viewer's left panel */
.smv-brand { display: flex; align-items: center; justify-content: center; padding: 16px 0 12px; margin: 0 -14px; border-bottom: 1px solid var(--fx-side-line, var(--mx-line)); text-decoration: none; }
.smv-brand img { height: 24px; width: auto; display: block; }
a.smv-brand:hover img { filter: brightness(1.12); }
.smv-list .smv-lhead { top: 0; }
/* slide glass large view */
.modal .box.glassv { width: min(1080px, 96vw); }
.modal .box.glassv .mh strong { font: 700 16px var(--f-body); letter-spacing: -.01em; }
.gv { display: grid; gap: 14px; }
.gv-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.gv-chip { padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--mx-page); color: var(--mx-muted); border: 1px solid var(--mx-line); }
.gv-chip.acc { background: var(--mx-accent-soft); color: var(--mx-accent-2, #22c55e); border-color: transparent; }
.gv-stage { position: relative; border-radius: 14px; overflow: hidden; padding: 14px; cursor: zoom-in;
  background: radial-gradient(ellipse at 50% 40%, #2c2c30 0%, #141416 75%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06); display: grid; place-items: center; max-height: 68vh; }
:root[data-theme="light"] .gv-stage { background: radial-gradient(ellipse at 50% 40%, #fafafa 0%, #e4e4e7 80%); }
.gv-stage img { display: block; max-width: 100%; max-height: calc(68vh - 28px); border-radius: 8px; box-shadow: 0 10px 30px rgb(0 0 0 / .45), 0 0 0 1px rgb(255 255 255 / .08); transition: transform .2s; user-select: none; }
.gv-stage.zoom { cursor: zoom-out; overflow: auto; place-items: start; }
.gv-stage.zoom img { max-width: none; max-height: none; width: 200%; }
.gv-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gv-hint { font-size: 12px; color: var(--mx-muted); }
.gv-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 9px; background: var(--mx-accent); color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; }
.gv-btn span { width: 16px; height: 16px; display: grid; } .gv-btn svg { width: 16px; height: 16px; }
.gv-btn:hover { filter: brightness(1.06); }

/* ---- rotation bar under the navigator + 90° buttons on the navigator ---- */
.rot-knob { position: absolute; z-index: 15; display: flex; align-items: center; gap: 4px; height: 30px; padding: 0 4px; box-sizing: border-box;
  border-radius: 10px; background: rgb(17 17 20 / .86); box-shadow: 0 2px 10px rgb(0 0 0 / .4); user-select: none; }
.rot-knob .rk-b { flex: none; width: 24px; height: 24px; border: 0; border-radius: 7px; background: transparent; color: #e5e7eb; font: 600 15px/1 system-ui, sans-serif; cursor: pointer; }
.rot-knob .rk-b:hover { background: rgb(255 255 255 / .12); color: #fff; }
.rot-knob .rk-range { flex: 1; min-width: 40px; margin: 0; height: 18px; accent-color: #22c55e; cursor: pointer; background: transparent; -webkit-appearance: none; appearance: none; }
.rot-knob .rk-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: rgb(255 255 255 / .25); }
.rot-knob .rk-range::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgb(34 197 94 / .25); }
.rot-knob .rk-range::-moz-range-track { height: 4px; border-radius: 2px; background: rgb(255 255 255 / .25); }
.rot-knob .rk-range::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #22c55e; }
.rot-knob .rk-txt { flex: none; min-width: 38px; height: 22px; padding: 0 6px; border: 0; border-radius: 7px; background: rgb(255 255 255 / .08); color: #e5e7eb;
  font: 600 11px/22px system-ui, sans-serif; cursor: pointer; }
.rot-knob.turned .rk-txt { background: #16a34a; color: #fff; }
.rot-knob .rk-txt:hover { background: rgb(255 255 255 / .2); }
.smv .panes:not(.l1) .rot-knob { height: 26px; }
.smv .panes:not(.l1) .rot-knob .rk-b { width: 20px; height: 20px; font-size: 13px; }
.pane.empty .rot-knob { display: none; }
.nav-rot { position: absolute; z-index: 5; bottom: 4px; height: 20px; padding: 0 6px; border: 0; border-radius: 6px; background: rgb(17 17 20 / .78); color: #fff;
  font: 600 10.5px/20px system-ui, sans-serif; cursor: pointer; opacity: 0; transition: opacity .15s; pointer-events: auto; }
.nav-rot.l { left: 4px; } .nav-rot.r { right: 4px; }
.navigator:hover .nav-rot, .nav-rot:focus-visible { opacity: 1; }
.nav-rot:hover { background: #16a34a; }

/* ---- on-panel controls follow the panel size (--pz set per panel; 1 = big single view) ---- */
.smv .pane .pane-glass { zoom: var(--pz, 1); width: 230px; top: 20px; right: 20px; }
.smv .panes:not(.l1) .pane .pane-glass { width: 210px; top: 20px; right: 14px; }
.smv .pane.has-ruler .pane-glass { top: 30px; }
.smv .pane .rot-knob { zoom: var(--pz, 1); }
.smv .pane .phead { zoom: var(--pz, 1); }
.smv .pane .hud { zoom: var(--pz, 1); }
.smv .pane .zm, .smv .panes[data-rows] .pane .zm, .smv .panes.l4 .pane .zm, .smv .panes:not(.l1) .pane .zm { transform: none; zoom: var(--pz, 1); }
.smv .pane .zm-track, .smv .panes[data-rows] .pane .zm-track, .smv .panes.l4 .pane .zm-track { height: 158px; }
.smv .pane.pz-short .zm-track { height: 110px; }
.smv .pane.pz-tiny .zm-mags { display: none; }               /* very small panel: keep only + / slider / − */
.smv .pane.pz-tiny .rot-knob .rk-range { display: none; }    /* … and only ↺ ↻ and the angle on the rotation bar */
.smv .pane.pz-tiny .rot-knob { width: auto !important; }

/* compare with many panels: smaller slide-glass picture, readable title / scale bar, compact 90° buttons */
.smv .pane .phead, .smv .pane .hud { zoom: var(--pzt, 1); }
.smv .pane.pz-short .pane-glass { width: 170px; }
.smv .pane.pz-tiny .pane-glass { width: 140px; }
.smv .pane.pz-short .nav-rot small, .smv .pane.pz-tiny .nav-rot small { display: none; }
.smv .pane.pz-short .nav-rot, .smv .pane.pz-tiny .nav-rot { padding: 0 5px; font-size: 12px; }
.smv .pane .rot-knob { zoom: var(--pzt, 1); }
.smv .pane.pz-tiny .pane-glass { width: 120px; }

/* ---- Pengaturan tampilan (display settings) ---- */
.stp { display: grid; gap: 12px; padding: 14px 14px 18px; }
.st-card { border: 1px solid var(--mx-line); border-radius: 14px; background: color-mix(in srgb, var(--mx-surface) 92%, var(--mx-ink) 3%); overflow: hidden; }
.st-card h4 { margin: 0; padding: 11px 14px 7px; font: 700 10.5px/1 var(--f-body, system-ui); letter-spacing: .09em; text-transform: uppercase; color: var(--mx-muted); }
.st-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 14px; cursor: pointer; transition: background .12s; }
.st-row + .st-row { border-top: 1px solid color-mix(in srgb, var(--mx-line) 60%, transparent); }
.st-row:hover { background: color-mix(in srgb, var(--mx-accent) 6%, transparent); }
.st-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: var(--mx-accent);
  background: color-mix(in srgb, var(--mx-accent) 12%, transparent); }
.st-ic svg { width: 18px; height: 18px; }
.st-txt { display: grid; gap: 2px; min-width: 0; }
.st-txt b { font-weight: 600; font-size: 13.5px; color: var(--mx-ink); }
.st-txt small { font-size: 11.5px; color: var(--mx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* switch */
.st-sw { position: relative; width: 38px; height: 22px; flex: none; }
.st-sw input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.st-sw i { position: absolute; inset: 0; border-radius: 11px; background: color-mix(in srgb, var(--mx-muted) 40%, transparent); transition: background .18s; }
.st-sw i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgb(0 0 0 / .35); transition: transform .18s; }
.st-sw input:checked + i { background: var(--mx-accent); }
.st-sw input:checked + i::after { transform: translateX(16px); }
.st-sw input:focus-visible + i { outline: 2px solid var(--mx-accent); outline-offset: 2px; }
/* sliders */
.st-range { -webkit-appearance: none; appearance: none; width: 100%; height: 18px; margin: 0; background: transparent; cursor: pointer; }
.st-range::-webkit-slider-runnable-track { height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--mx-muted) 35%, transparent); }
.st-range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -5.5px; border-radius: 50%; background: #fff;
  border: 3px solid var(--mx-accent); box-shadow: 0 1px 4px rgb(0 0 0 / .3); }
.st-range::-moz-range-track { height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--mx-muted) 35%, transparent); }
.st-range::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid var(--mx-accent); }
.st-loupe { cursor: default; grid-template-columns: 32px auto minmax(0, 1fr); }
.st-val { display: flex; align-items: center; gap: 8px; min-width: 0; }
.st-val output, .st-deg { flex: none; min-width: 34px; padding: 3px 7px; border-radius: 7px; text-align: center; font: 700 12px/1.2 var(--f-body, system-ui);
  color: var(--mx-accent); background: color-mix(in srgb, var(--mx-accent) 12%, transparent); }
/* rotation */
.st-rot { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px 14px 6px;
  border-top: 1px solid color-mix(in srgb, var(--mx-line) 60%, transparent); }
.st-dial { position: relative; width: 84px; height: 84px; border-radius: 50%; border: 1.5px solid var(--mx-line);
  background: repeating-conic-gradient(from -1deg, color-mix(in srgb, var(--mx-muted) 55%, transparent) 0 2deg, transparent 2deg 30deg),
              radial-gradient(circle, var(--mx-surface) 62%, color-mix(in srgb, var(--mx-accent) 8%, var(--mx-surface)) 63%); }
.st-dial::after { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: var(--mx-surface); border: 1px solid color-mix(in srgb, var(--mx-line) 70%, transparent); }
.st-dial span { position: absolute; z-index: 1; font: 600 8.5px/1 var(--f-body, system-ui); color: var(--mx-muted); }
.st-dial .n { top: 17px; left: 50%; transform: translateX(-50%); } .st-dial .s { bottom: 17px; left: 50%; transform: translateX(-50%); }
.st-dial .e { right: 16px; top: 50%; transform: translateY(-50%); } .st-dial .w { left: 16px; top: 50%; transform: translateY(-50%); }
.st-hand { position: absolute; inset: 0; z-index: 2; transition: transform .2s ease; pointer-events: none; }
.st-hand::before { content: ""; position: absolute; left: 50%; top: 9px; bottom: 50%; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--mx-accent); }
.st-hand::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px; border-radius: 50%; background: var(--mx-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mx-accent) 25%, transparent); }
.st-rotr { display: grid; gap: 6px; min-width: 0; }
.st-rotr small { font-size: 11.5px; color: var(--mx-muted); }
.st-deg { justify-self: start; font-size: 20px; padding: 4px 10px; border-radius: 9px; }
.st-seg { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin: 8px 14px 4px; border: 1px solid var(--mx-line); border-radius: 10px; overflow: hidden; }
.st-seg button { height: 32px; border: 0; border-radius: 0; padding: 0; background: transparent; color: var(--mx-ink); font: 600 11.5px/1 var(--f-body, system-ui); cursor: pointer; }
.st-seg button + button { border-left: 1px solid var(--mx-line); }
.st-seg button:hover { background: color-mix(in srgb, var(--mx-accent) 12%, transparent); color: var(--mx-accent); }
.st-seg button.zero { background: var(--mx-accent); color: #fff; }
.st-seg button.zero:hover { filter: brightness(1.1); color: #fff; }
.st-hint { margin: 6px 14px 12px; font-size: 11.5px; line-height: 1.5; color: var(--mx-muted); }
.st-hint kbd { display: inline-block; min-width: 16px; padding: 0 4px; margin: 0 1px; border: 1px solid var(--mx-line); border-bottom-width: 2px; border-radius: 4px;
  font: 600 10.5px/16px ui-monospace, monospace; text-align: center; color: var(--mx-ink); background: var(--mx-surface); }
/* rotation: one clickable dial */
.st-rot1 { display: grid; place-items: center; padding: 14px 14px 16px; border-top: 1px solid color-mix(in srgb, var(--mx-line) 60%, transparent); }
.st-rot1 .st-dial { width: 150px; height: 150px; cursor: pointer; touch-action: none; user-select: none; transition: box-shadow .15s;
  background: repeating-conic-gradient(from -1deg, color-mix(in srgb, var(--mx-muted) 55%, transparent) 0 2deg, transparent 2deg 15deg),
              radial-gradient(circle, var(--mx-surface) 62%, color-mix(in srgb, var(--mx-accent) 8%, var(--mx-surface)) 63%); }
.st-rot1 .st-dial::after { inset: 20px; }
.st-rot1 .st-dial:hover, .st-rot1 .st-dial.on { box-shadow: 0 0 0 4px color-mix(in srgb, var(--mx-accent) 22%, transparent); border-color: var(--mx-accent); }
.st-rot1 .st-dial.on { cursor: grabbing; }
.st-rot1 .st-dial.on .st-hand { transition: none; }
.st-rot1 .st-hand::before { top: 14px; width: 4px; margin-left: -2px; }
.st-rot1 .st-hand::after { width: 12px; height: 12px; margin: -6px; }
.st-mk { position: absolute; z-index: 3; padding: 2px 5px; border: 0; border-radius: 6px; background: transparent; color: var(--mx-muted);
  font: 700 10.5px/1 var(--f-body, system-ui); cursor: pointer; }
.st-mk:hover { background: var(--mx-accent); color: #fff; }
.st-mk.n { top: 26px; left: 50%; transform: translateX(-50%); } .st-mk.s { bottom: 26px; left: 50%; transform: translateX(-50%); }
.st-mk.e { right: 24px; top: 50%; transform: translateY(-50%); } .st-mk.w { left: 24px; top: 50%; transform: translateY(-50%); }
.st-rot1 .st-deg { position: absolute; z-index: 3; left: 50%; top: 63%; transform: translateX(-50%); font-size: 13px; padding: 2px 7px; pointer-events: none; }

/* ---- side panels: shared card look ---- */
.st-card h4 { display: flex; align-items: center; gap: 8px; }
.st-card h4 > span { flex: 1; }
.st-link { border: 0; background: transparent; padding: 2px 6px; border-radius: 6px; color: var(--mx-accent); font: 700 11px/1.2 var(--f-body, system-ui);
  text-transform: none; letter-spacing: 0; cursor: pointer; }
.st-link:hover { background: color-mix(in srgb, var(--mx-accent) 12%, transparent); }
.st-sls { display: grid; gap: 4px; padding: 2px 14px 10px; }
.st-sl { display: grid; grid-template-columns: 78px minmax(0, 1fr) 44px; align-items: center; gap: 10px; min-height: 30px; }
.st-sl > span { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--mx-ink); }
.st-sl .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.st-sl output { justify-self: end; min-width: 40px; padding: 3px 6px; border-radius: 7px; text-align: center; font: 700 11.5px/1.2 var(--f-body, system-ui);
  color: var(--mx-ink); background: color-mix(in srgb, var(--mx-muted) 14%, transparent); font-variant-numeric: tabular-nums; }
.st-card > .st-hint { margin-top: 0; }
.st-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 14px 8px; }
.st-chip { height: 28px; padding: 0 12px; border: 1px solid var(--mx-line); border-radius: 14px; background: var(--mx-surface); color: var(--mx-ink); font: 600 12px var(--f-body, system-ui); cursor: pointer; }
.st-chip:hover { border-color: var(--mx-accent); color: var(--mx-accent); }
.st-empty { font-size: 12px; color: var(--mx-muted); }
.st-btns { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px 14px; }
.st-btn { height: 32px; padding: 0 12px; border: 1px solid var(--mx-line); border-radius: 9px; background: transparent; color: var(--mx-ink); font: 600 12.5px var(--f-body, system-ui); cursor: pointer; }
.st-btn:hover { border-color: var(--mx-accent); color: var(--mx-accent); background: color-mix(in srgb, var(--mx-accent) 8%, transparent); }
/* action tiles (Tangkapan layar & ekspor) */
.st-act { display: grid; grid-template-columns: 32px minmax(0, 1fr) 18px; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; border: 0; border-radius: 0;
  background: transparent; color: var(--mx-ink); text-align: left; cursor: pointer; font: inherit; transition: background .12s; }
.st-act + .st-act { border-top: 1px solid color-mix(in srgb, var(--mx-line) 60%, transparent); }
.st-act:hover { background: color-mix(in srgb, var(--mx-accent) 7%, transparent); }
.st-act .st-go { width: 18px; height: 18px; color: var(--mx-muted); transition: transform .15s, color .15s; }
.st-act:hover .st-go { transform: translateX(3px); color: var(--mx-accent); }
.st-act.pri { margin: 2px 10px 12px; width: calc(100% - 20px); border-radius: 11px; background: var(--mx-accent); color: #fff; }
.st-act.pri .st-ic { background: rgb(255 255 255 / .2); color: #fff; }
.st-act.pri .st-txt b, .st-act.pri .st-txt small, .st-act.pri .st-go { color: #fff; }
.st-act.pri:hover { filter: brightness(1.08); background: var(--mx-accent); }
/* older panels (Hitung sel, Kualitas, Anotasi): sections become cards too */
.smv-panel[data-tab="count"] .sec, .smv-panel[data-tab="qc"] .sec {
  margin: 12px 14px 0; padding: 12px 14px; border: 1px solid var(--mx-line); border-radius: 14px;
  background: color-mix(in srgb, var(--mx-surface) 92%, var(--mx-ink) 3%); }
.smv-panel[data-tab="count"] .sec:last-child, .smv-panel[data-tab="qc"] .sec:last-child { margin-bottom: 16px; }
.smv-panel[data-tab="count"] .sec h3, .smv-panel[data-tab="qc"] .sec h3 { font-size: 10.5px; letter-spacing: .09em; font-weight: 700; }

/* ---- modern dialogs (Bagikan slide, Link berbagi, Sesi bersama) ---- */
.modal:has(.box.mx) { background: rgb(5 8 14 / .55); }
.modal .box.mx { width: min(520px, 100%); border-radius: 18px; overflow: hidden; background: var(--mx-surface); color: var(--mx-ink);
  border: 1px solid var(--mx-line); box-shadow: 0 24px 60px rgb(0 0 0 / .45); font-family: var(--f-body, system-ui); animation: mxIn .16s ease-out; }
@keyframes mxIn { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.modal .box.mx.shr { width: min(560px, 100%); }
.modal .box.mx .mh { padding: 16px 20px; border-bottom: 1px solid var(--mx-line); }
.modal .box.mx .mh strong { font: 700 17px/1.3 var(--f-body, system-ui); color: var(--mx-ink); }
.modal .box.mx .mh button { width: 32px; height: 32px; border-radius: 9px; color: var(--mx-muted); background: transparent; border: 0; }
.modal .box.mx .mh button:hover { background: color-mix(in srgb, var(--mx-muted) 15%, transparent); color: var(--mx-ink); }
.modal .box.mx .mb { padding: 18px 20px; }
.modal .box.mx .mf { padding: 14px 20px; border-top: 1px solid var(--mx-line); background: color-mix(in srgb, var(--mx-surface) 90%, var(--mx-ink) 3%); gap: 10px; }
.modal .box.mx .mf button { height: 38px; padding: 0 18px; border-radius: 10px; font: 600 13.5px var(--f-body, system-ui); cursor: pointer; box-shadow: none; }
.modal .box.mx .mf .sx-ghost { background: transparent; color: var(--mx-ink); border: 1px solid var(--mx-line); }
.modal .box.mx .mf .sx-ghost:hover { background: color-mix(in srgb, var(--mx-muted) 12%, transparent); }
.modal .box.mx .mf .sx-primary { background: var(--mx-accent); color: #fff; border: 1px solid var(--mx-accent); }
.modal .box.mx .mf .sx-primary:hover { filter: brightness(1.08); }
.modal .box.mx .mf .sx-danger { background: transparent; color: #ef4444; border: 1px solid color-mix(in srgb, #ef4444 45%, transparent); margin-right: auto; }
.modal .box.mx .mf .sx-danger:hover { background: color-mix(in srgb, #ef4444 12%, transparent); }
/* create form */
.sx-form { display: grid; gap: 16px; }
.sx-ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--mx-accent); background: color-mix(in srgb, var(--mx-accent) 13%, transparent); }
.sx-ic svg { width: 18px; height: 18px; }
.sx-slide { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--mx-line); border-radius: 12px; background: color-mix(in srgb, var(--mx-surface) 92%, var(--mx-ink) 3%); min-width: 0; }
.sx-slide > div { display: grid; gap: 2px; min-width: 0; }
.sx-slide small, .sx-tl small { font-size: 11.5px; color: var(--mx-muted); }
.sx-slide b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-field { display: grid; gap: 8px; }
.sx-field > label { display: flex; align-items: center; gap: 10px; font: 600 13.5px var(--f-body, system-ui); color: var(--mx-ink); }
.sx-field > label .sx-ic { width: 28px; height: 28px; border-radius: 8px; }
.sx-field > label .sx-ic svg { width: 16px; height: 16px; }
.sx-field em { font-style: normal; font-weight: 400; color: var(--mx-muted); }
.sx-seg { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 11px; background: color-mix(in srgb, var(--mx-muted) 14%, transparent); }
.sx-seg button { height: 34px; border: 0; border-radius: 8px; background: transparent; color: var(--mx-muted); font: 600 13px var(--f-body, system-ui); cursor: pointer; box-shadow: none; }
.sx-seg button[aria-pressed="true"] { background: var(--mx-surface); color: var(--mx-ink); box-shadow: 0 1px 4px rgb(0 0 0 / .18); }
.sx-date { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sx-chips { display: flex; gap: 6px; }
.sx-chip { height: 30px; padding: 0 10px; border: 1px solid var(--mx-line); border-radius: 15px; background: transparent; color: var(--mx-ink); font: 600 12px var(--f-body, system-ui); cursor: pointer; box-shadow: none; }
.sx-chip:hover { border-color: var(--mx-accent); color: var(--mx-accent); }
.modal .box.mx .sx-input { height: 38px; padding: 0 12px; border: 1px solid var(--mx-line); border-radius: 10px; background: var(--mx-page); color: var(--mx-ink);
  font: 14px var(--f-body, system-ui); box-shadow: none; color-scheme: light dark; }
.modal .box.mx .sx-input:focus { outline: none; border-color: var(--mx-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mx-accent) 22%, transparent); }
.modal .box.mx textarea.sx-note { height: auto; min-height: 76px; padding: 10px 12px; resize: vertical; line-height: 1.45; }
.sx-toggle { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 10px 12px; border: 1px solid var(--mx-line); border-radius: 12px; cursor: pointer; }
.sx-tl { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sx-tl > span { display: grid; gap: 2px; }
.sx-tl b { font-size: 13.5px; }
/* result + live dialogs on the modern box */
.box.mx .shr-body { font-family: var(--f-body, system-ui); color: var(--mx-ink); }
.box.mx .shr-body small { color: var(--mx-muted); }
.box.mx .shr-item b { color: var(--mx-ink); }
.box.mx .shr-urlbox { background: var(--mx-page); border-color: var(--mx-line); border-radius: 11px; }
.box.mx .shr-urlbox:focus-within { border-color: var(--mx-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mx-accent) 20%, transparent); }
.box.mx .shr-url { color: var(--mx-link); }
.box.mx .shr-copy { color: var(--mx-muted); }
.box.mx .shr-copy:hover { background: color-mix(in srgb, var(--mx-accent) 14%, transparent); color: var(--mx-accent); }
.box.mx .shr-qr { background: #fff; border-color: var(--mx-line); border-radius: 14px; }
.box.mx .shr-qr small { color: #4b5563; }
.box.mx .shr-ic { background: color-mix(in srgb, var(--mx-accent) 13%, transparent); color: var(--mx-accent); }
.box.mx .shr-hint { background: color-mix(in srgb, var(--mx-accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--mx-accent) 22%, transparent); color: var(--mx-ink); border-radius: 11px; }
.box.mx .shr-code { color: var(--mx-ink) !important; background: var(--mx-page); border-color: var(--mx-line); }
.box.mx .shr-badge { background: color-mix(in srgb, var(--mx-muted) 15%, transparent); color: var(--mx-muted); }
.box.mx .shr-badge.ok { background: color-mix(in srgb, var(--mx-accent) 15%, transparent); color: var(--mx-accent); }
.box.mx .shr-info .hint { margin: 0; color: var(--mx-muted); font-size: 13px; line-height: 1.55; }
.box.livex .live-head { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 6px 12px; border-radius: 999px;
  background: color-mix(in srgb, #ef4444 12%, transparent); color: var(--mx-ink); font-size: 13px; }
.box.livex .live-head > b:first-of-type { color: #ef4444; letter-spacing: .06em; }

/* annotation toolbar: starts at the bottom centre, draggable by its grip */
.smv .smv-stage .smv-palette { top: auto; bottom: 70px; left: 50%; right: auto; transform: translateX(-50%); max-width: calc(100% - 24px); }
.smv .smv-stage .smv-palette.free { bottom: auto; transform: none; }
.smv-palette.dragging { cursor: grabbing; box-shadow: 0 14px 34px rgb(0 0 0 / .45); opacity: .96; }
.pal-grip { align-self: stretch; width: 14px; margin: 0 4px 0 0; border-radius: 6px; cursor: grab; touch-action: none;
  background: radial-gradient(circle, rgb(255 255 255 / .55) 1.2px, transparent 1.6px) 0 3px / 7px 7px; }
.pal-grip:hover { background-color: rgb(255 255 255 / .1); }
.smv-palette.dragging .pal-grip { cursor: grabbing; }

/* ---- sidebar: "Pengaturan" drops down ---- */
.fx-nav .fx-item .fx-ic { width: 28px; height: 28px; padding: 5px; box-sizing: border-box; border-radius: 8px; transition: background .15s, color .15s; }
.fx-nav .fx-item:hover .fx-ic { background: color-mix(in srgb, var(--mx-accent) 14%, transparent); color: var(--mx-accent); }
.fx-nav .fx-item.on .fx-ic { background: var(--mx-accent); color: #fff; }
.fx-nav .fx-item { padding: 5px 8px; gap: 10px; }
.fx-group { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--fx-side-line); }
.fx-grouphead > span:nth-child(2) { flex: 1; }
.fx-chev { width: 16px; height: 16px; display: grid; color: var(--mx-muted); transition: transform .2s ease; }
.fx-chev svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fx-group.open .fx-chev { transform: rotate(180deg); }
.fx-group.open .fx-grouphead { color: var(--fx-side-strong); }
.fx-group.open .fx-grouphead .fx-ic { background: color-mix(in srgb, var(--mx-accent) 14%, transparent); color: var(--mx-accent); }
.fx-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s ease; }
.fx-group.open .fx-sub { grid-template-rows: 1fr; }
.fx-subin { min-height: 0; overflow: hidden; display: grid; gap: 1px; margin-left: 21px; padding-left: 10px; border-left: 1.5px dashed color-mix(in srgb, var(--mx-accent) 45%, transparent); }
.fx-group.open .fx-subin { padding-top: 3px; padding-bottom: 3px; }
.fx-subin .fx-item { font-size: 13px; padding: 4px 8px; }
.fx-subin .fx-item .fx-ic { width: 24px; height: 24px; padding: 4px; }

/* pictures in the UI are not draggable (no accidental "macro.jpg" uploads) */
.sm img, .smv img, .modal img { -webkit-user-drag: none; user-drag: none; }

/* ---- drag slide cards onto a folder ---- */
.sm-card[draggable="true"] { cursor: grab; }
.sm-card[draggable="true"]:active { cursor: grabbing; }
.sm-dragghost { position: fixed; top: -100px; left: -100px; display: inline-flex; align-items: center; gap: 8px; max-width: 260px; padding: 8px 12px;
  border-radius: 10px; background: #16a34a; color: #fff; font: 600 13px var(--f-body, system-ui); box-shadow: 0 8px 20px rgb(0 0 0 / .3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-dragghost span { width: 16px; height: 16px; display: grid; flex: none; }
.sm-dragghost svg { width: 100%; height: 100%; }
.dragging-cards [data-drop] { outline: 1.5px dashed color-mix(in srgb, var(--mx-accent) 60%, transparent); outline-offset: -1px; border-radius: 9px; }
.dragging-cards .sm-chip[data-drop] { outline-offset: 2px; border-radius: 14px; }
[data-drop].drop-on { outline: 2px solid var(--mx-accent) !important; background: color-mix(in srgb, var(--mx-accent) 16%, transparent) !important; }
.dragging-cards .sm-card { opacity: .85; }

/* ---- share several slides ---- */
.sx-names { display: grid; gap: 2px; max-height: 96px; overflow-y: auto; min-width: 0; }
.sx-names b { font-size: 13px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal .box.mx.shm { width: min(620px, 100%); }
.shm-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.shm-list { display: grid; gap: 10px; max-height: 50vh; overflow-y: auto; padding-right: 2px; }
.shm-row { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--mx-line); border-radius: 12px; }
.shm-main { display: grid; gap: 6px; min-width: 0; }
.shm-main .shr-name { font-size: 13.5px; }
.shm-code { flex: none; margin: 0 4px; padding: 2px 8px; border-radius: 6px; font: 700 13px var(--f-mono, monospace); letter-spacing: .12em;
  background: color-mix(in srgb, var(--mx-accent) 14%, transparent); color: var(--mx-accent); }
.shm-qr { justify-self: start; padding: 8px; border-radius: 10px; background: #fff; }
.shm-qr[hidden] { display: none; }
.shr-names { display: grid; gap: 2px; max-height: 110px; overflow-y: auto; }
.shr-names .shr-name { font-size: 13.5px; }
/* shared-link visitor: list of the shared slides in the workspace style */
.viewer.smv.ro .smv-item { background: var(--mx-surface); border: 1px solid var(--mx-line); border-radius: 12px; box-shadow: none; }
.viewer.smv.ro .smv-item.cur { border-color: var(--mx-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--mx-accent) 25%, transparent); }
.viewer.smv.ro .smv-item .smv-name { color: var(--mx-ink); }
.viewer.smv.ro .smv-item .smv-no { color: var(--mx-accent); }
.viewer.smv.ro .smv-item .smv-frame { border-color: var(--mx-line); border-radius: 8px; overflow: hidden; }
.viewer.smv.ro .smv-item .smv-dot { display: none; }
/* viewer Directory: drag a slide onto a folder */
.dtree .dt-file[draggable="true"] { cursor: grab; }
.dt-dragging .dt-row[data-dir] { outline: 1px dashed color-mix(in srgb, var(--mx-accent) 55%, transparent); outline-offset: -1px; }
.dtree .dt-row.drop-on { outline: 2px solid var(--mx-accent) !important; background: color-mix(in srgb, var(--mx-accent) 18%, transparent) !important; }
/* folder dialog (new / edit) */
.modal .box.mx.fd { width: min(480px, 100%); }
.modal .box.mx select.sx-input { appearance: auto; padding-right: 8px; }
.fd-pl { font-size: 12px !important; color: var(--mx-muted) !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: .06em; }
.fd-path { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 12px; border-radius: 10px; border: 1px dashed var(--mx-line);
  background: color-mix(in srgb, var(--mx-accent) 6%, transparent); font-size: 13px; color: var(--mx-muted); }
.fd-path i { font-style: normal; opacity: .6; }
.fd-path b { color: var(--mx-accent); }
/* edit pencil on folder tiles */
.sm-chip { position: relative; }
.sm-chipedit { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; padding: 5px; border: 0; border-radius: 7px; background: var(--mx-surface);
  color: var(--mx-muted); box-shadow: 0 1px 4px rgb(0 0 0 / .18); opacity: 0; transition: opacity .15s; cursor: pointer; }
.sm-chip:hover .sm-chipedit, .sm-chipedit:focus-visible { opacity: 1; }
.sm-chipedit:hover { color: #fff; background: var(--mx-accent); }
.sm-chipedit svg { width: 100%; height: 100%; }

/* ---- Unggah otomatis (scanner agents) ---- */
.modal .box.mx.agx { width: min(640px, 100%); }
.ag { display: grid; gap: 14px; }
.ag-intro { margin: 0; font-size: 13px; color: var(--mx-muted); line-height: 1.55; }
.ag-keys { display: grid; gap: 10px; }
.ag-key { border: 1px solid var(--mx-line); border-radius: 14px; padding: 12px 14px; display: grid; gap: 10px; background: color-mix(in srgb, var(--mx-surface) 92%, var(--mx-ink) 3%); }
.ag-kh { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ag-kt { flex: 1; display: grid; gap: 3px; min-width: 0; }
.ag-kt b { font-size: 14.5px; }
.ag-kt small { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mx-muted); }
.ag-dot { width: 8px; height: 8px; border-radius: 50%; background: #9ca3af; flex: none; }
.ag-dot.on { background: #22c55e; box-shadow: 0 0 0 3px rgb(34 197 94 / .25); animation: agPulse 2s infinite; }
@keyframes agPulse { 50% { box-shadow: 0 0 0 6px rgb(34 197 94 / .05); } }
.ag-ka { display: flex; gap: 6px; }
.ag-ka .st-btn { height: 30px; }
.ag-danger { color: #ef4444 !important; }
.ag-danger:hover { border-color: #ef4444 !important; background: rgb(239 68 68 / .1) !important; }
.ag-kf { display: grid; grid-template-columns: minmax(0, 2fr) 1fr 1fr; gap: 10px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--mx-line) 60%, transparent); }
.ag-kf span { display: grid; gap: 2px; min-width: 0; }
.ag-kf small { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--mx-muted); }
.ag-kf b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-kf .mono { font-family: var(--f-mono, monospace); }
.ag-empty { display: grid; justify-items: center; gap: 6px; padding: 26px 12px; border: 1.5px dashed var(--mx-line); border-radius: 14px; text-align: center; }
.ag-empty small { color: var(--mx-muted); }
.ag-h { margin: 4px 0 0; font: 700 10.5px var(--f-body, system-ui); letter-spacing: .09em; text-transform: uppercase; color: var(--mx-muted); }
.ag-log { display: grid; max-height: 230px; overflow-y: auto; border: 1px solid var(--mx-line); border-radius: 12px; }
.ag-lr { display: grid; grid-template-columns: 128px minmax(0, 1fr) auto; gap: 10px; padding: 7px 12px; font-size: 12.5px; align-items: center; }
.ag-lr + .ag-lr { border-top: 1px solid color-mix(in srgb, var(--mx-line) 60%, transparent); }
.ag-lt { color: var(--mx-muted); font-variant-numeric: tabular-nums; }
.ag-ln { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ag-ls { color: var(--mx-muted); white-space: nowrap; }
.ag-lr.err .ag-ls { color: #ef4444; white-space: normal; }
.ag-formbtns { display: flex; justify-content: flex-end; gap: 8px; }
.ag-pri { height: 36px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--mx-accent); color: #fff; font: 600 13.5px var(--f-body, system-ui); cursor: pointer; }
.ag-pri:hover { filter: brightness(1.08); }
.ag-big { display: flex; align-items: center; justify-content: center; gap: 10px; height: 46px; width: 100%; font-size: 14.5px; }
.ag-big span { width: 20px; height: 20px; display: grid; }
.ag-done { display: grid; gap: 14px; }
.ag-ok { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 12px; background: color-mix(in srgb, var(--mx-accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--mx-accent) 30%, transparent); }
.ag-ok > div { display: grid; gap: 2px; }
.ag-ok small { color: var(--mx-muted); font-size: 12.5px; }
.ag-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ag-steps li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; }
.ag-steps li > i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 12px var(--f-body, system-ui); font-style: normal; color: var(--mx-accent); background: color-mix(in srgb, var(--mx-accent) 14%, transparent); }
.ag-steps li > div { display: grid; gap: 2px; padding-top: 3px; }
.ag-steps b { font-size: 13.5px; font-weight: 600; }
.ag-steps small { color: var(--mx-muted); font-size: 12px; font-family: var(--f-mono, monospace); }
@media (max-width: 560px) { .ag-kf { grid-template-columns: 1fr 1fr; } .ag-lr { grid-template-columns: 1fr; gap: 2px; } }
.ag-warn { margin: 0; padding: 10px 12px; border-radius: 10px; font-size: 12.5px; line-height: 1.5; color: #b45309; background: rgb(245 158 11 / .12); border: 1px solid rgb(245 158 11 / .35); }
.ag-done > .st-hint { margin: 0; }
.ag-hint { margin: 2px 0 0; font-size: 12px; line-height: 1.5; color: var(--mx-muted); }
.sx-field[hidden], .ag-hint[hidden] { display: none !important; }

/* =====================================================================
   Telepatologi workspace (#/tele)
   ===================================================================== */
.login .login-note { background: var(--danger-soft); color: var(--danger); border-radius: 8px; padding: 8px 10px; font-size: 13px; }
.fx-tele { position: relative; }
.fx-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: inline-grid; place-items: center; font: 700 11px/1 var(--f-body); background: color-mix(in srgb, var(--mx-accent) 18%, transparent); color: var(--mx-accent); }
.fx-badge.hot { background: #ef4444; color: #fff; }

.tl { display: grid; grid-template-columns: 252px minmax(0, 1fr); height: 100%; background: var(--mx-page); color: var(--mx-ink); font-family: var(--f-body); position: relative; }
.tl.closed { grid-template-columns: 0 minmax(0, 1fr); }
.tl.closed .tl-side { visibility: hidden; }
.tl-side { background: var(--fx-side); border-right: 1px solid var(--fx-side-line); display: flex; flex-direction: column; overflow-y: auto; min-height: 0; padding-bottom: 16px; }
.tl-brand { display: flex; align-items: center; gap: 10px; padding: 16px 18px 12px; border-bottom: 1px solid var(--fx-side-line); }
.tl-brand img { height: 19px; display: block; }
.tl-brand span { font: 700 11px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--mx-accent); padding: 4px 7px; border-radius: 6px; background: color-mix(in srgb, var(--mx-accent) 13%, transparent); }
.tl-back { display: flex; align-items: center; gap: 8px; margin: 10px 12px 4px; padding: 6px 8px; border-radius: 8px; color: var(--mx-muted); text-decoration: none; font-size: 12.5px; }
.tl-back:hover { background: var(--fx-side-hover); color: var(--fx-side-strong); }
.tl-new { margin: 6px 12px 6px; justify-content: flex-start; gap: 9px; padding: 9px 12px; border-radius: 10px; border: 0; background: var(--mx-accent); color: #fff; font-weight: 600; box-shadow: 0 2px 8px color-mix(in srgb, var(--mx-accent) 35%, transparent); }
.tl-new:hover { filter: brightness(1.08); }
.tl-nav { display: grid; gap: 2px; padding: 4px 10px; }
.tl-sec { padding: 14px 10px 4px; font: 700 10.5px/1 var(--f-body); letter-spacing: .09em; text-transform: uppercase; color: var(--mx-muted); }
.tl-navi { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 9px; color: var(--fx-side-ink); text-decoration: none; font-size: 13.5px; font-weight: 500; }
.tl-navi:hover { background: var(--fx-side-hover); color: var(--fx-side-strong); }
.tl-navi.on { background: var(--fx-side-active); color: var(--fx-side-strong); font-weight: 600; }
.tl-navi .tl-ic { width: 28px; height: 28px; padding: 5px; border-radius: 8px; }
.tl-navi:hover .tl-ic { background: color-mix(in srgb, var(--mx-accent) 14%, transparent); color: var(--mx-accent); }
.tl-navi.on .tl-ic { background: var(--mx-accent); color: #fff; }
.tl-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: inline-grid; place-items: center; font: 700 11px/1 var(--f-body); background: color-mix(in srgb, var(--mx-muted) 20%, transparent); color: var(--fx-side-strong); }
.tl .tl-badge.hot { background: #ef4444; color: #fff; }
.tl-burger { position: absolute; z-index: 30; left: 262px; top: 14px; width: 34px; height: 34px; padding: 7px; border-radius: 9px; background: var(--mx-surface); border: 1px solid var(--mx-line); color: var(--mx-muted); transition: left .2s; }
.tl.closed .tl-burger { left: 12px; }
.tl-main { overflow-y: auto; min-height: 0; grid-column: 2; grid-row: 1; }
.tl-page { max-width: 1320px; margin: 0 auto; padding: 22px 34px 60px 58px; display: grid; gap: 16px; align-content: start; }
.tl-ic { display: inline-grid; place-items: center; width: 18px; height: 18px; flex: none; }
.tl-ic svg { width: 100%; height: 100%; }
.tl-muted { color: var(--mx-muted); }
.tl-pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.tl .hot, .tl-dlg .hot { color: #ef4444; font-weight: 600; }
.tl .spacer { flex: 1; }

.tl-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; justify-content: space-between; }
.tl-head h1 { margin: 0; font: 700 22px/1.25 var(--f-body); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tl-head p { margin: 4px 0 0; color: var(--mx-muted); font-size: 13.5px; max-width: 760px; }
.tl-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tl-actions > .tl-in { width: auto; }
.tl-crumb { display: inline-flex; align-items: center; gap: 4px; color: var(--mx-muted); text-decoration: none; font-size: 12.5px; margin-bottom: 4px; }
.tl-crumb:hover { color: var(--mx-accent); }
.tl-crumb .tl-ic { width: 14px; height: 14px; }

.tl-btn { border-radius: 9px; padding: 7px 12px; background: var(--mx-surface); border: 1px solid var(--mx-line); color: var(--mx-ink); font-weight: 600; font-size: 13px; }
.tl-btn:hover { border-color: var(--mx-accent); color: var(--mx-accent); }
.tl-btn.primary { background: var(--mx-accent); border-color: var(--mx-accent); color: #fff; }
.tl-btn.primary:hover { filter: brightness(1.08); color: #fff; }
.tl-btn.ghost { background: transparent; border-color: transparent; }
.tl-btn.ghost:hover { background: color-mix(in srgb, var(--mx-accent) 10%, transparent); }
.tl-btn.danger { color: #ef4444; }
.tl-btn.danger:hover { background: color-mix(in srgb, #ef4444 12%, transparent); color: #ef4444; border-color: transparent; }
.tl-btn .tl-ic { width: 16px; height: 16px; }

.tl-card { background: var(--mx-surface); border: 1px solid var(--mx-line); border-radius: 14px; box-shadow: var(--mx-shadow); min-width: 0; }
.tl-cardh { display: flex; align-items: center; gap: 9px; padding: 13px 16px 0; }
.tl-cardh h3 { margin: 0; font: 700 13.5px/1.2 var(--f-body); }
.tl-cardh > .tl-ic { width: 28px; height: 28px; padding: 6px; border-radius: 8px; background: color-mix(in srgb, var(--mx-accent) 13%, transparent); color: var(--mx-accent); }
.tl-cardb { padding: 13px 16px 16px; min-width: 0; }
.tl-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.tl-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.tl-grid2r { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
.tl-stack { display: grid; gap: 12px; align-content: start; min-width: 0; }
.tl-empty { display: grid; justify-items: center; gap: 6px; padding: 26px 10px; color: var(--mx-muted); text-align: center; }
.tl-empty .tl-ic { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: color-mix(in srgb, var(--mx-muted) 12%, transparent); }
.tl-empty p { margin: 0; font-size: 13px; }
.tl-error { padding: 30px; border-radius: 14px; background: var(--danger-soft); color: var(--danger); }

.tl-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.tl-kpi { display: flex; gap: 12px; align-items: center; padding: 14px 16px; background: var(--mx-surface); border: 1px solid var(--mx-line); border-radius: 14px; box-shadow: var(--mx-shadow); }
.tl-kpi > .tl-ic { width: 40px; height: 40px; padding: 9px; border-radius: 11px; background: color-mix(in srgb, var(--mx-accent) 13%, transparent); color: var(--mx-accent); }
.tl-kpi small { display: block; color: var(--mx-muted); font-size: 12px; }
.tl-kpi b { display: block; font: 700 22px/1.2 var(--f-body); }
.tl-kpi span { font-size: 12px; color: var(--mx-muted); }
.tl-kpi.hot > .tl-ic { background: color-mix(in srgb, #ef4444 15%, transparent); color: #ef4444; }
.tl-kpi.big b { font-size: 30px; }
.tl-kpi.ok > .tl-ic { background: color-mix(in srgb, #22c55e 18%, transparent); color: #16a34a; }
.tl-kpi.mid > .tl-ic { background: color-mix(in srgb, #84cc16 18%, transparent); color: #65a30d; }
.tl-kpi.warn > .tl-ic { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #d97706; }
.tl-kpi.bad > .tl-ic { background: color-mix(in srgb, #ef4444 15%, transparent); color: #ef4444; }

.tl-chart svg { width: 100%; height: 170px; display: block; }
.tl-chart .g line { stroke: var(--mx-line); stroke-dasharray: 3 3; }
.tl-chart text { fill: var(--mx-muted); font: 10px var(--f-body); }
.tl-legend { display: flex; gap: 14px; margin-top: 6px; font-size: 12px; color: var(--mx-muted); }
.tl-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }

.tl-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font: 600 11.5px/1.5 var(--f-body); background: color-mix(in srgb, var(--mx-muted) 15%, transparent); color: var(--mx-ink); white-space: nowrap; text-decoration: none; }
.tl-pill.cito { background: #ef4444; color: #fff; letter-spacing: .04em; }
.tl-pill.s-baru, .tl i.s-baru { background: color-mix(in srgb, #3b82f6 18%, transparent); color: #3b82f6; }
.tl-pill.s-dibaca, .tl-pill.s-diminta { background: color-mix(in srgb, #f59e0b 20%, transparent); color: #d97706; }
.tl-pill.s-konsultasi { background: color-mix(in srgb, #a855f7 18%, transparent); color: #a855f7; }
.tl-pill.s-laporan { background: color-mix(in srgb, #06b6d4 18%, transparent); color: #0891b2; }
.tl-pill.s-selesai, .tl-pill.s-dijawab { background: color-mix(in srgb, #22c55e 18%, transparent); color: #16a34a; }
.tl-pill.s-ditolak { background: color-mix(in srgb, #ef4444 15%, transparent); color: #ef4444; }
.tl-bar i.s-baru { background: #3b82f6; } .tl-bar i.s-dibaca { background: #f59e0b; } .tl-bar i.s-konsultasi { background: #a855f7; } .tl-bar i.s-laporan { background: #06b6d4; } .tl-bar i.s-selesai { background: #22c55e; }
.tl-bar { height: 7px; border-radius: 4px; background: color-mix(in srgb, var(--mx-muted) 16%, transparent); overflow: hidden; min-width: 60px; }
.tl-bar i { display: block; height: 100%; background: var(--mx-accent); border-radius: 4px; }
.tl-bar.big { height: 12px; border-radius: 6px; }
.tl-statbars { display: grid; gap: 9px; }
.tl-statbar { display: grid; grid-template-columns: 120px 1fr 34px; align-items: center; gap: 10px; }
.tl-statbar b { text-align: right; }
.tl-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.tl-mini small { display: block; color: var(--mx-muted); font-size: 12px; }
.tl-mini b { font-size: 24px; }
.tl-disk p { margin: 8px 0 0; }

.tl-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.tl-li { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 8px 10px; border-radius: 10px; text-decoration: none; color: inherit; }
.tl-li:hover { background: color-mix(in srgb, var(--mx-accent) 7%, transparent); }
.tl-li small { display: block; color: var(--mx-muted); font-size: 12px; }
.tl-li-r { display: grid; justify-items: end; gap: 3px; flex: none; }
.tl-li-r small { font-size: 11.5px; color: var(--mx-muted); }

.tl-tablewrap { overflow-x: auto; background: var(--mx-surface); border: 1px solid var(--mx-line); border-radius: 14px; }
.tl-card .tl-tablewrap { border: 0; border-radius: 0; }
.tl-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tl-table th { text-align: left; font: 700 11px/1.2 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--mx-muted); padding: 10px 12px; border-bottom: 1px solid var(--mx-line); white-space: nowrap; }
.tl-table td { padding: 9px 12px; border-bottom: 1px solid color-mix(in srgb, var(--mx-line) 70%, transparent); vertical-align: middle; }
.tl-table tr:last-child td { border-bottom: 0; }
.tl-table .r { text-align: right; } .tl-table .c { text-align: center; }
.tl-table small { font-size: 11.5px; }
.tl-cases tbody tr { cursor: pointer; }
.tl-cases tbody tr:hover { background: color-mix(in srgb, var(--mx-accent) 6%, transparent); }
.tl-cases tr.overdue td:first-child { box-shadow: inset 3px 0 #ef4444; }
.tl-clip { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-audit tr.bad td { color: #ef4444; }
.tl-endpoints td.mono { font-size: 12px; word-break: break-all; }

.tl-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 11px; background: color-mix(in srgb, var(--mx-muted) 12%, transparent); justify-self: start; }
.tl-seg button { border: 0; background: transparent; border-radius: 8px; padding: 6px 12px; font-weight: 600; color: var(--mx-muted); }
.tl-seg button.on { background: var(--mx-surface); color: var(--mx-ink); box-shadow: 0 1px 3px rgb(0 0 0 / .15); }
.tl-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tl-filters > .tl-in { width: auto; flex: 1 1 160px; }
.tl-filters > input[type=search] { flex: 3 1 280px; }
.tl-check { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; cursor: pointer; }

.tl-in { font: 13.5px var(--f-body); color: var(--mx-ink); background: var(--mx-surface); border: 1px solid var(--mx-line); border-radius: 9px; padding: 8px 10px; width: 100%; min-width: 0; }
.tl-in:focus { outline: 0; border-color: var(--mx-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mx-accent) 18%, transparent); }
textarea.tl-in { resize: vertical; line-height: 1.5; }
select.tl-in.saved { border-color: var(--mx-accent); }
.tl-field { display: grid; gap: 5px; min-width: 0; }
.tl-field > span { font-size: 12.5px; font-weight: 600; color: var(--mx-muted); }
.tl-field > small { font-size: 11.5px; color: var(--mx-muted); line-height: 1.45; }
.tl-form { display: grid; gap: 12px; }
.tl-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tl-row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tl-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tl-inline > .tl-in, .tl-inline > .tl-field { flex: 1 1 160px; width: auto; }
.tl-right { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.tl-bar-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tl-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border: 1px solid var(--mx-line); border-radius: 11px; cursor: pointer; }
.tl-toggle b { display: block; font-size: 13.5px; }
.tl-toggle small { display: block; font-size: 11.5px; color: var(--mx-muted); }
.tl-toggles { display: grid; gap: 8px; }
.tl-mini-field { display: grid; gap: 2px; }
.tl-mini-field small { font-size: 11px; color: var(--mx-muted); font-weight: 600; }
.tl-mini-field select { width: auto; min-width: 150px; padding: 6px 8px; }
.tl-secret code { display: block; padding: 12px; border-radius: 10px; background: var(--mx-page); border: 1px dashed var(--mx-accent); font: 13px var(--f-mono); word-break: break-all; user-select: all; }
.tl-steps { margin: 0; padding-left: 20px; display: grid; gap: 4px; color: var(--mx-muted); font-size: 13px; }

.tl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tl-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--mx-accent) 12%, transparent); color: var(--mx-ink); font-size: 12.5px; border: 1px solid transparent; }
.tl-chip button { border: 0; background: transparent; padding: 0 4px; font-size: 15px; line-height: 1; color: var(--mx-muted); }
.tl-chip.add { border: 1px dashed var(--mx-accent); background: transparent; color: var(--mx-accent); padding: 4px 10px; font-weight: 600; cursor: pointer; }
.tl-chip.check { padding: 4px 10px; cursor: pointer; background: color-mix(in srgb, var(--mx-muted) 10%, transparent); }
.tl-chip.check:has(input:checked) { background: color-mix(in srgb, var(--mx-accent) 18%, transparent); border-color: var(--mx-accent); }
.tl-pick { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.tl-pick:hover { background: color-mix(in srgb, var(--mx-accent) 8%, transparent); }
.tl-pick img { width: 56px; height: 40px; object-fit: contain; background: #eee; border-radius: 4px; }
.tl-pick span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.tl-casehead { align-items: flex-start; }
.tl-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--mx-line); overflow-x: auto; }
.tl-tabs button { border: 0; border-radius: 0; background: transparent; padding: 10px 14px; font-weight: 600; color: var(--mx-muted); border-bottom: 2.5px solid transparent; margin-bottom: -1px; }
.tl-tabs button:hover { color: var(--mx-ink); }
.tl-tabs button.on { color: var(--mx-accent); border-bottom-color: var(--mx-accent); }
.tl-tabs .tl-ic { width: 16px; height: 16px; }
.tl-count { font-size: 11px; padding: 1px 6px; border-radius: 8px; background: color-mix(in srgb, var(--mx-muted) 16%, transparent); }
.tl-count.ok { background: color-mix(in srgb, #22c55e 20%, transparent); color: #16a34a; }
.tl-kv { display: grid; grid-template-columns: 170px 1fr; gap: 7px 14px; margin: 0; font-size: 13.5px; }
.tl-kv dt { color: var(--mx-muted); }
.tl-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.tl-timeline { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--mx-line); display: grid; gap: 10px; }
.tl-timeline li { position: relative; display: grid; font-size: 13px; }
.tl-timeline li::before { content: ""; position: absolute; left: -20px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--mx-surface); border: 2px solid var(--mx-accent); }
.tl-timeline small { color: var(--mx-muted); font-size: 11.5px; }

.tl-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.tl-thumbs.big { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.tl-thumb { border: 1px solid var(--mx-line); border-radius: 12px; overflow: hidden; background: var(--mx-surface); display: grid; }
.tl-thumbimg { border: 0; border-radius: 0; padding: 0; background: #e9eaee; aspect-ratio: 16 / 10; width: 100%; }
.tl-thumbimg img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tl-thumb.gone .tl-thumbimg { color: #ef4444; font-size: 12px; }
.tl-thumbt { display: flex; gap: 6px; align-items: center; padding: 8px 10px 4px; min-width: 0; }
.tl-thumbt b { flex: 1; min-width: 0; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-thumbctl { display: flex; gap: 6px; padding: 4px 10px 10px; }
.tl-thumbctl select { padding: 5px 8px; }
.tl-thumbmini { border: 0; padding: 0; background: #e9eaee; border-radius: 6px; overflow: hidden; width: 64px; height: 42px; vertical-align: middle; }
.tl-thumbmini img { width: 100%; height: 100%; object-fit: contain; }

.tl-thread { display: grid; gap: 12px; max-height: 56vh; overflow-y: auto; padding: 4px 2px 12px; }
.tl-msg { display: flex; gap: 10px; align-items: flex-start; }
.tl-avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #3f3f46; color: #fff; font: 700 12px var(--f-body); }
.tl-msg.me .tl-avatar { background: var(--mx-accent); }
.tl-msgb { flex: 1; min-width: 0; padding: 9px 12px; border-radius: 4px 14px 14px 14px; background: color-mix(in srgb, var(--mx-muted) 9%, transparent); }
.tl-msg.me .tl-msgb { background: color-mix(in srgb, var(--mx-accent) 10%, transparent); }
.tl-msgb header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; font-size: 13px; }
.tl-msgb header small { color: var(--mx-muted); font-size: 11.5px; }
.tl-at { color: var(--mx-accent); }
.tl-slidetag { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, #3b82f6 14%, transparent); color: #3b82f6; text-decoration: none; }
.tl-slidetag .tl-ic { width: 13px; height: 13px; }
.tl-x { margin-left: auto; border: 0; background: transparent; padding: 0 6px; color: var(--mx-muted); font-size: 16px; line-height: 1; }
.tl-x:hover { color: #ef4444; }
.tl-compose { display: grid; gap: 8px; border-top: 1px solid var(--mx-line); padding-top: 12px; }
.tl-composebar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.tl-composebar select { width: auto; max-width: 320px; }
.tl-composebar small { margin-left: auto; }
.tl-mentionwrap { position: relative; }
.tl-mention { position: absolute; z-index: 20; left: 8px; bottom: calc(100% + 4px); min-width: 240px; background: var(--mx-surface); border: 1px solid var(--mx-line); border-radius: 11px; box-shadow: var(--mx-shadow-hi); padding: 4px; display: grid; }
.tl-mention button { border: 0; background: transparent; justify-content: flex-start; gap: 8px; padding: 7px 10px; border-radius: 8px; }
.tl-mention button.on, .tl-mention button:hover { background: color-mix(in srgb, var(--mx-accent) 13%, transparent); }
.tl-mention small { color: var(--mx-muted); }

.tl-consult { background: var(--mx-surface); border: 1px solid var(--mx-line); border-radius: 14px; padding: 14px 16px; display: grid; gap: 10px; box-shadow: var(--mx-shadow); border-left: 4px solid #f59e0b; }
.tl-consult.s-dijawab, .tl-consult.s-selesai { border-left-color: #22c55e; }
.tl-consult.s-ditolak { border-left-color: #ef4444; }
.tl-consult header { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tl-consult header a { color: var(--mx-link); text-decoration: none; font-weight: 600; }
.tl-q, .tl-a { display: grid; gap: 3px; }
.tl-q small, .tl-a small { font: 700 10.5px/1 var(--f-body); letter-spacing: .07em; text-transform: uppercase; color: var(--mx-muted); }
.tl-a { padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, #22c55e 9%, transparent); }

.tl-banner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 13px; background: color-mix(in srgb, #3b82f6 10%, transparent); border: 1px solid color-mix(in srgb, #3b82f6 25%, transparent); flex-wrap: wrap; }
.tl-banner > div:not(.tl-actions) { flex: 1; min-width: 220px; }
.tl-banner b { display: block; }
.tl-banner small { color: var(--mx-muted); }
.tl-banner > .tl-ic { width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: color-mix(in srgb, #3b82f6 18%, transparent); color: #3b82f6; }
.tl-banner.ok { background: color-mix(in srgb, #22c55e 10%, transparent); border-color: color-mix(in srgb, #22c55e 30%, transparent); }
.tl-banner.ok > .tl-ic { background: color-mix(in srgb, #22c55e 20%, transparent); color: #16a34a; }
.tl-banner.bad { background: color-mix(in srgb, #ef4444 9%, transparent); border-color: color-mix(in srgb, #ef4444 28%, transparent); }
.tl-banner.bad > .tl-ic { background: color-mix(in srgb, #ef4444 16%, transparent); color: #ef4444; }

.tl-report { display: grid; gap: 14px; }
.tl-sticky { position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; padding: 12px 14px; margin: 0 -6px; border-radius: 14px; background: color-mix(in srgb, var(--mx-surface) 88%, transparent); backdrop-filter: blur(8px); border: 1px solid var(--mx-line); box-shadow: var(--mx-shadow-hi); }
.tl-rimgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.tl-rimgs figure { margin: 0; border: 1px solid var(--mx-line); border-radius: 10px; overflow: hidden; background: var(--mx-surface); }
.tl-rimgs img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: #e9eaee; }
.tl-rimgs figcaption { display: flex; gap: 4px; align-items: center; padding: 5px; font-size: 12px; }
.tl-rimgs figcaption .tl-in { padding: 5px 7px; font-size: 12px; }
.tl-addimg { border: 1.5px dashed var(--mx-accent); background: transparent; color: var(--mx-accent); border-radius: 10px; min-height: 120px; flex-direction: column; font-weight: 600; white-space: normal; }
.tl-rimgs.pick label { display: grid; gap: 4px; padding: 6px; border: 1px solid var(--mx-line); border-radius: 10px; cursor: pointer; font-size: 12px; }
.tl-rimgs.pick label:has(input:checked) { border-color: var(--mx-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--mx-accent) 30%, transparent); }
.tl-rbody { display: grid; gap: 12px; }
.tl-rsec h4 { margin: 0 0 4px; font: 700 11px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--mx-muted); }
.tl-rsec.dx { padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--mx-accent); }
.tl-rsec.dx .tl-pre { font-weight: 600; }

.tl-notifs { display: grid; gap: 6px; }
.tl-notif { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 13px; background: var(--mx-surface); border: 1px solid var(--mx-line); text-decoration: none; color: inherit; }
.tl-notif:hover { border-color: var(--mx-accent); }
.tl-notif > .tl-ic { width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: color-mix(in srgb, var(--mx-muted) 12%, transparent); }
.tl-notif.unread { border-left: 4px solid var(--mx-accent); }
.tl-notif.unread > .tl-ic { background: color-mix(in srgb, var(--mx-accent) 15%, transparent); color: var(--mx-accent); }
.tl-notif p { margin: 2px 0; font-size: 13px; color: var(--mx-muted); }
.tl-notif small { font-size: 11.5px; color: var(--mx-muted); }
.tl-2fa { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; }
.tl-qr { background: #fff; padding: 10px; border-radius: 12px; border: 1px solid var(--mx-line); }
.tl-qr canvas { display: block; }
.tl-code { font: 14px var(--f-mono); padding: 6px 10px; background: var(--mx-page); border-radius: 8px; user-select: all; }
.tl-stack p { margin: 0; }

.tl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.tl-boxcard, .tl-qacard { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: 14px; background: var(--mx-surface); border: 1px solid var(--mx-line); text-decoration: none; color: inherit; box-shadow: var(--mx-shadow); transition: border-color .15s, transform .15s; }
.tl-boxcard:hover, .tl-qacard:hover { border-color: var(--mx-accent); transform: translateY(-1px); }
.tl-boxcard p { margin: 3px 0 6px; color: var(--mx-muted); font-size: 13px; }
.tl-boxcard small, .tl-qacard small { color: var(--mx-muted); font-size: 12px; display: block; }
.tl-boxic .tl-ic { width: 42px; height: 42px; padding: 9px; border-radius: 12px; background: color-mix(in srgb, var(--mx-accent) 13%, transparent); color: var(--mx-accent); }
.tl-qacard { justify-content: space-between; }
.tl-qacard .tl-bar { width: 120px; }
.tl-items { display: grid; gap: 10px; max-height: 50vh; overflow-y: auto; }
.tl-item { border: 1px solid var(--mx-line); border-radius: 12px; padding: 10px 12px; display: grid; gap: 8px; background: var(--mx-surface); }
.tl-itemh { display: flex; align-items: center; gap: 8px; }
.tl-num { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--mx-accent); color: #fff; font: 700 12px var(--f-body); flex: none; }
.tl-itemh .tl-btn { padding: 4px; }
.tl-itemh .tl-btn .tl-ic[title], .tl-itemh .tl-btn:first-of-type .tl-ic { transform: rotate(90deg); }
.tl-itemb { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 14px; align-items: start; }
.tl-itemimg { width: 100%; aspect-ratio: 16 / 10; object-fit: contain; background: #e9eaee; border-radius: 10px; cursor: zoom-in; }
.tl-item.view { padding: 14px 16px; }
.tl-quiz { display: grid; gap: 6px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--mx-muted) 7%, transparent); }
.tl-opts { display: grid; gap: 5px; }
.tl-opt { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 8px; }
.tl-q { border: 1px solid var(--mx-line); border-radius: 12px; padding: 8px 12px 10px; margin: 0; }
.tl-q legend { font-weight: 700; padding: 0 6px; }
.tl-q.ok { border-color: #22c55e; } .tl-q.bad { border-color: #ef4444; }
.tl-q .tl-opt { cursor: pointer; }
.tl-q .tl-opt.right { background: color-mix(in srgb, #22c55e 16%, transparent); font-weight: 600; }
.tl-k { font-weight: 700; padding: 1px 6px; border-radius: 6px; }
.tl-k.ok { background: color-mix(in srgb, #22c55e 18%, transparent); color: #16a34a; }
.tl-k.mid { background: color-mix(in srgb, #84cc16 18%, transparent); color: #65a30d; }
.tl-k.warn { background: color-mix(in srgb, #f59e0b 20%, transparent); color: #d97706; }
.tl-k.bad { background: color-mix(in srgb, #ef4444 15%, transparent); color: #ef4444; }
.tl-qa select { min-width: 140px; }
.box.tl-dlg { width: min(860px, 96vw); }
.box.tl-dlg .mb { max-height: 72vh; overflow-y: auto; }

@media (max-width: 1100px) { .tl-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tl-grid2r { grid-template-columns: 1fr; } }
@media (max-width: 820px) {
  .tl { grid-template-columns: 0 minmax(0, 1fr); }
  .tl .tl-side { position: absolute; z-index: 40; top: 0; bottom: 0; left: 0; width: 262px; visibility: visible; box-shadow: var(--mx-shadow-hi); }
  .tl.closed .tl-side { visibility: hidden; }
  .tl-burger { left: auto; right: 12px; }
  .tl.closed .tl-burger { left: auto; }
  .tl-page { padding: 60px 16px 40px; }
  .tl-grid2, .tl-grid3, .tl-row2, .tl-row3 { grid-template-columns: 1fr; }
  .tl-kv { grid-template-columns: 1fr; gap: 2px 0; } .tl-kv dd { margin-bottom: 8px; }
  .tl-itemb, .tl-2fa { grid-template-columns: 1fr; }
}

/* ---------- viewer: telepathology panels, board bar, watermark, live room ---------- */
.vt-body { display: grid; gap: 9px; padding: 4px 14px 14px; }
.st-card > .vt-list, .st-card > .vt-thread, .st-card > .vt-compose { margin: 0 14px; }
.vt-list { display: grid; gap: 6px; padding-bottom: 12px; }
.vt-case { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--mx-line); text-decoration: none; color: var(--mx-ink); }
.vt-case:hover { border-color: var(--mx-accent); }
.vt-case small { color: var(--mx-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-btn { border-radius: 9px; padding: 6px 10px; font-size: 12.5px; font-weight: 600; background: transparent; border: 1px solid var(--mx-line); color: var(--mx-ink); }
.vt-btn:hover { border-color: var(--mx-accent); color: var(--mx-accent); }
.vt-btn.pri { background: var(--mx-accent); border-color: var(--mx-accent); color: #fff; }
.vt-in { font: 13px var(--f-body); color: var(--mx-ink); background: var(--mx-surface); border: 1px solid var(--mx-line); border-radius: 8px; padding: 6px 8px; width: 100%; min-width: 0; }
textarea.vt-in { resize: vertical; }
.vt-row { display: flex; gap: 8px; align-items: center; }
.vt-row > .vt-in, .vt-row > .st-range { flex: 1; }
.vt-field { display: grid; gap: 4px; }
.vt-field > span { font-size: 11.5px; font-weight: 600; color: var(--mx-muted); }
.vt-check { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--mx-muted); }
.vt-thread { display: grid; gap: 8px; max-height: 280px; overflow-y: auto; padding-bottom: 8px; }
.vt-msg { padding: 7px 10px; border-radius: 10px; background: color-mix(in srgb, var(--mx-muted) 10%, transparent); font-size: 13px; }
.vt-msg header { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; margin-bottom: 2px; }
.vt-msg header small { color: var(--mx-muted); font-size: 11px; }
.vt-link { border: 0; background: transparent; padding: 0; color: var(--mx-link); font-size: 11.5px; text-decoration: underline; }
.vt-compose { display: grid; gap: 7px; padding-bottom: 14px; }
.vt-foot { margin: 0; text-align: center; font-size: 12px; }
.vt-foot a { color: var(--mx-link); }
.vt-spots { display: grid; gap: 5px; }
.vt-spot { display: grid; grid-template-columns: 30px 1fr auto; gap: 6px; align-items: center; padding: 6px 9px; border-radius: 8px; border: 1px solid var(--mx-line); background: transparent; color: var(--mx-ink); font-size: 12.5px; text-align: left; }
.vt-spot:hover { border-color: #ef4444; }
.vt-spot b { color: #ef4444; }
.vt-spot small { color: var(--mx-muted); }
.vt-chans { display: flex; flex-wrap: wrap; gap: 6px; }
.vt-chan { display: inline-flex; gap: 5px; align-items: center; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--mx-line); font-size: 12px; cursor: pointer; }
.vt-chan:has(input:checked) { border-color: var(--mx-accent); background: color-mix(in srgb, var(--mx-accent) 12%, transparent); }
.vt-res { font-size: 12.5px; }
.vt-kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 0; }
.vt-kv dt { color: var(--mx-muted); }
.vt-kv dd { margin: 0; text-align: right; }
.vt-bad { color: #ef4444; }
.vt-role { display: grid; grid-template-columns: 1fr 120px; gap: 8px; align-items: center; font-size: 12.5px; }
.vt-role span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-board { position: absolute; z-index: 25; top: 10px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; max-width: calc(100% - 140px);
  padding: 6px 8px 6px 12px; border-radius: 12px; background: rgb(17 20 27 / .88); color: #fff; backdrop-filter: blur(8px); box-shadow: 0 6px 22px rgb(0 0 0 / .35); font-size: 13px; }
.vt-board button { background: rgb(255 255 255 / .1); border: 0; color: #fff; padding: 4px 10px; border-radius: 8px; font-weight: 600; }
.vt-board button:hover { background: rgb(255 255 255 / .2); }
.vt-board button.live { background: #dc2626; }
.vt-blabel { font: 700 10px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: #4ade80; }
.vt-btitle { color: #cbd5e1; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-bnote { flex-basis: 100%; padding: 6px 4px 2px; color: #e2e8f0; font-size: 12.5px; max-height: 120px; overflow-y: auto; border-top: 1px solid rgb(255 255 255 / .15); }
.vt-wm { position: absolute; inset: 0; z-index: 15; pointer-events: none; background-repeat: repeat; }
.sx-prots { display: grid; gap: 6px; }
.sx-prot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; border: 1px solid var(--mx-line); border-radius: 10px; cursor: pointer; }
.sx-prot b { display: block; font-size: 13px; }
.sx-prot small { display: block; font-size: 11.5px; color: var(--mx-muted); }

.lv-room { position: absolute; z-index: 26; right: 12px; bottom: 66px; width: 300px; max-width: calc(100% - 24px); border-radius: 14px; overflow: hidden;
  background: color-mix(in srgb, var(--mx-surface) 94%, transparent); border: 1px solid var(--mx-line); box-shadow: var(--mx-shadow-hi); backdrop-filter: blur(8px); color: var(--mx-ink); }
.lv-room.ctl { border-color: #f59e0b; box-shadow: 0 0 0 2px #f59e0b; }
.lv-head { width: 100%; justify-content: flex-start; gap: 8px; border: 0; border-radius: 0; padding: 9px 12px; background: transparent; }
.lv-badge { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #ef4444; color: #fff; font-size: 11px; display: inline-grid; place-items: center; }
.lv-body { display: grid; gap: 8px; padding: 0 10px 10px; }
.lv-tools { display: flex; gap: 6px; }
.lv-tools button { flex: 1; font-size: 12px; padding: 6px 8px; border-radius: 9px; white-space: normal; }
.lv-mic.on { background: #dc2626; border-color: #dc2626; color: #fff; }
.lv-people { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 12px; }
.lv-people > small { color: var(--mx-muted); margin-right: 4px; }
.lv-person { display: inline-flex; gap: 4px; align-items: center; padding: 2px 4px 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--mx-muted) 13%, transparent); }
.lv-person.ctl { background: color-mix(in srgb, #f59e0b 25%, transparent); }
.lv-person button, .lv-take { font-size: 11px; padding: 1px 7px; border-radius: 999px; }
.lv-log { display: grid; gap: 4px; max-height: 190px; min-height: 60px; overflow-y: auto; font-size: 12.5px; align-content: start; }
.lv-msg b { margin-right: 6px; color: var(--mx-muted); }
.lv-msg.host b { color: #ef4444; }
.lv-msg.me b { color: var(--mx-accent); }
.lv-send { display: flex; gap: 6px; }
.lv-send button { padding: 6px 10px; border-radius: 9px; background: var(--mx-accent); border-color: var(--mx-accent); color: #fff; }
.lv-req { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 7px 9px; border-radius: 10px; background: color-mix(in srgb, #f59e0b 18%, transparent); font-size: 12.5px; }
.lv-req span { flex: 1; }
.lv-req button { font-size: 11.5px; padding: 3px 8px; }
.smv.no-dl img, .smv.no-dl canvas { -webkit-user-drag: none; user-select: none; }
.vt-heat { pointer-events: none; image-rendering: auto; mix-blend-mode: multiply; }
.box.mx.sx.tl-dlg, .box.sx.tl-dlg { width: min(860px, 96vw); max-width: 96vw; }
.box.tl-dlg .tl-inline { flex-wrap: nowrap; }
@media (max-width: 820px) { .tl-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tl-kpi { padding: 12px; } .tl-kpi > .tl-ic { display: none; } }

/* library header (greeting, title, toolbar) stays at the top; only the slide list scrolls */
.sm-pin { position: sticky; top: 0; z-index: 30; background: var(--mx-page); transition: box-shadow .15s; }
.sm-pin .sm-toolbar { margin-bottom: 16px; }
.sm-pin.stuck { box-shadow: 0 12px 20px -14px rgb(0 0 0 / .6); }
.sm-shell > .sm-main { grid-column: 2; grid-row: 1; }
@media (max-width: 820px) { .sm-pin.stuck .fx-greet { display: none; } }
.sm-pinbot { position: sticky; bottom: 0; z-index: 30; background: var(--mx-page); order: 3; transition: box-shadow .15s; }
.sm-pinbot.stuck { box-shadow: 0 -12px 20px -14px rgb(0 0 0 / .6); }
.sm-pinbot .sm-pager { margin-top: 0; padding-top: 10px; }
.sm-main::after { order: 2; }
.sm-main > .sm-body { order: 1; }
.sm-main > .sm-pin { order: 0; }
.sm-pinbot .sm-foot { margin-top: 8px; padding: 10px 0 12px; }
@media (max-width: 820px) { .sm-pinbot .sm-foot { display: none; } .sm-pinbot .sm-pager { padding-bottom: 10px; } }
.fx-ws img { height: 24px; } .tl-brand img { height: 22px; }
.fx-user { z-index: 40; } .fx-usermenu .pop { z-index: 60; background: var(--mx-surface); box-shadow: var(--mx-shadow-hi); } .fx-usermenu .pop .who { color: var(--mx-muted); border-bottom: 0; }

/* ---------- phones & tablets ---------- */
/* phone held upright: zoom slider + magnifications stand clear of the scale bar */
.smv .pane.pz-narrow .zm { bottom: 76px; left: 12px; }
.smv .pane.pz-narrow .zm-track { height: 120px; }
.smv .pane.pz-narrow .hud { left: 12px; bottom: 14px; }
/* touch screens: bigger hit areas, no hover-only affordances */
@media (pointer: coarse) {
  .smv-icons > button, .smv-cmpwrap > button, .smv-bottom > button, .smv-bottom > a { min-height: 40px; }
  .tl-btn, .vt-btn, .sm-btn { min-height: 38px; }
  .tl-navi { padding: 8px; }
  .zm-pm { width: 26px; height: 26px; }
  input, select, textarea { font-size: 16px !important; }       /* iOS: no auto-zoom when a field gets focus */
}
/* zoom slider always clears the scale bar, whatever the panel size (the slider is CSS-zoomed by --pz) */
.smv .pane .zm { bottom: calc(72px / var(--pz, 1)); }
.smv .pane.pz-narrow .zm { bottom: calc(76px / var(--pz, 1)); left: calc(14px / var(--pz, 1)); }

@media (max-width: 820px) {
  /* library menu slides over the page instead of squeezing it */
  .sm-shell, .sm-shell.closed { grid-template-columns: 0 minmax(0, 1fr); }
  .sm-shell .sm-side { position: fixed; z-index: 70; top: 50px; bottom: 0; left: 0; width: min(290px, 86vw); visibility: visible; box-shadow: 0 0 0 100vmax rgb(0 0 0 / .45), 8px 0 24px rgb(0 0 0 / .4); }
  .sm-shell.closed .sm-side { display: none; }
  .fx-collapse { display: none !important; }
  /* annotation tools wrap onto two rows */
  .smv-palette { left: 8px !important; right: 8px; transform: none !important; max-width: none !important; flex-wrap: wrap !important; justify-content: center; top: auto !important; bottom: 8px !important; }
  /* telepathology: fewer columns, wrapped inline fields */
  .tl-cases th:nth-child(4), .tl-cases td:nth-child(4), .tl-cases th:nth-child(6), .tl-cases td:nth-child(6) { display: none; }
  .box.tl-dlg .tl-inline { flex-wrap: wrap; }
  .tl-head { align-items: flex-start; }
  .tl-casehead .tl-actions { width: 100%; }
  .tl-casehead .tl-mini-field { flex: 1 1 140px; }
  .tl-casehead .tl-mini-field select { width: 100%; }
  .tl-sticky { margin: 0; }
  .lv-room { right: 8px; left: 8px; width: auto; bottom: 60px; }
  .vt-board { max-width: calc(100% - 16px); left: 8px; right: 8px; transform: none; }
}
@media (max-width: 560px) {
  .smv-panel { width: auto !important; left: 0; right: 0; }
  .tl-cases th:nth-child(5), .tl-cases td:nth-child(5) { display: none; }
  .sm-pager button:first-child, .sm-pager button:nth-last-child(2) { display: none; }   /* Awal / Akhir */
}
@media (max-width: 560px) {
  .tl-filters > * { flex: 1 1 100% !important; width: 100% !important; }
  /* case list as cards */
  .tl-cases thead { display: none; }
  .tl-cases, .tl-cases tbody { display: block; }
  .tl-cases tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "no st" "pt due" "sp sp"; gap: 2px 10px; padding: 10px 12px; border-bottom: 1px solid var(--mx-line); }
  .tl-cases td { border: 0 !important; padding: 0 !important; }
  .tl-cases td:nth-child(1) { grid-area: no; } .tl-cases td:nth-child(2) { grid-area: pt; }
  .tl-cases td:nth-child(3) { grid-area: sp; max-width: none; white-space: normal; color: var(--mx-muted); font-size: 12.5px; }
  .tl-cases td:nth-child(7) { grid-area: st; text-align: right; } .tl-cases td:nth-child(8) { grid-area: due; text-align: right; font-size: 12px; }
  .tl-cases td:nth-child(2) > div { display: inline; margin-right: 6px; }
}
.tl-cases.noasg th:nth-child(5), .tl-cases.noasg td:nth-child(5) { display: none; }
@media (max-width: 560px) { .tl-cases tr.overdue { box-shadow: inset 3px 0 #ef4444; } .tl-cases tr.overdue td:first-child { box-shadow: none; } }
.st-net input[type=radio] { width: 18px; height: 18px; accent-color: var(--mx-accent); margin: 0; cursor: pointer; }
.st-net:has(input:checked) { background: color-mix(in srgb, var(--mx-accent) 9%, transparent); }

/* ---------- upload panel: on every page, can be minimised ---------- */
.uploads { z-index: 400; background: var(--mx-surface, var(--panel)); border-color: var(--mx-line, var(--line)); color: var(--mx-ink, var(--ink)); box-shadow: var(--mx-shadow-hi, var(--shadow)); overflow: hidden; }
.uploads .up-box { display: grid; grid-template-rows: auto minmax(0, 1fr); max-height: 50vh; min-height: 0; }
.uploads header { border-color: var(--mx-line, var(--line)); padding: 8px 8px 8px 14px; }
.uploads header .icon { width: 30px; height: 30px; padding: 6px; }
.uploads .up-pill { display: none; }
.uploads.min { width: auto; border-radius: 999px; }
.uploads.min .up-box { display: none; }
.uploads.min .up-pill { display: inline-flex; align-items: center; gap: 9px; border: 0; background: transparent; padding: 8px 14px 8px 10px; border-radius: 999px; color: inherit; font-weight: 600; font-size: 13px; position: relative; overflow: hidden; }
.uploads.min .up-pill:hover { background: color-mix(in srgb, var(--mx-accent, #16a34a) 10%, transparent); }
.up-pillic { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--mx-accent, #16a34a); color: #fff; flex: none; }
.up-pillic svg { width: 15px; height: 15px; }
.uploads.has-fail .up-pillic { background: #ef4444; }
.up-pillbar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: color-mix(in srgb, var(--mx-muted, #888) 25%, transparent); }
.up-pillbar i { display: block; height: 100%; width: 0; background: var(--mx-accent, #16a34a); transition: width .3s; }
.uploads.mirror header > span::after { content: " · dari tab lain"; font-weight: 400; color: var(--mx-muted, var(--muted)); font-size: 12px; }
.uploads .up .nm > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
@media (max-width: 560px) { .uploads.min { right: 12px; bottom: 74px; } }
body:has(.viewer.smv) .uploads { right: 64px; bottom: 64px; }

/* ---------- viewer on phones: slide fills the screen; the slide list is a closable overlay ---------- */
.smv-lclose { display: none; }
@media (max-width: 820px) {
  .smv .panes, .panes { height: auto !important; min-height: 0 !important; }      /* old fixed 68vh made the slide stop at 2/3 of the screen */
  .viewer.smv { height: 100%; height: 100dvh; }
  .viewer.smv:not(.nolist) .smv-list { z-index: 60; }
  .viewer.smv:not(.nolist) .smv-stage::after { content: ""; position: absolute; inset: 0; z-index: 55; background: rgb(0 0 0 / .45); }
  .viewer.smv:not(.nolist) .smv-ltab { z-index: 61; }
  .smv-lclose { display: grid; place-items: center; position: sticky; top: 8px; z-index: 5; margin: 8px -6px -44px auto; width: 36px; height: 36px; padding: 8px; border-radius: 50%;
    border: 1px solid var(--fx-side-line, #333); background: var(--fx-side-hover, #242424); color: var(--fx-side-strong, #fff); }
  .smv-lclose svg { width: 18px; height: 18px; }
}
/* rulers on: magnification slider and scale bar move clear of the left ruler */
.smv .pane.has-ruler .zm { left: calc(92px / var(--pz, 1)); }
.smv .pane.has-ruler .hud { left: 36px; }
/* phone held upright: room for the zoom bubble (it sits left of the slider) */
.smv .pane.pz-narrow .zm { left: calc(56px / var(--pz, 1)); }
.smv .pane.pz-narrow.has-ruler .zm { left: calc(82px / var(--pz, 1)); }
.smv .pane.pz-narrow.has-ruler .hud { left: 34px; }
/* phone held upright: zoom slider hugs the left edge (next to the ruler), value bubble on its right,
   magnification buttons after the bubble */
.smv .pane.pz-narrow .zm { left: calc(10px / var(--pz, 1)); }
.smv .pane.pz-narrow.has-ruler .zm { left: calc(32px / var(--pz, 1)); }
.smv .pane.pz-narrow .zm-bubble { right: auto; left: 50%; bottom: auto !important; top: -58px; transform: translateX(-50%); }   /* real value sits above the + button */
.smv .pane.pz-narrow .zm-bubble::after { right: auto; left: 50%; top: auto; bottom: -5px; transform: translateX(-50%); border: 5px solid transparent !important; border-bottom: 0 !important; border-top-color: var(--mx-accent) !important; }
.smv .pane.pz-narrow .zm, .smv .pane.pz-narrow.has-ruler .zm { bottom: calc(62px / var(--pz, 1)); }
/* phone top bar: its account menu opens above the pinned page header */
.sm-top { position: relative; z-index: 90; }
.sm-top .menu .pop { z-index: 95; right: 0; left: auto; max-width: calc(100vw - 16px); }

/* all screens (laptop, tablet, phone): the real magnification sits above the + button,
   so the slider can sit close to the left edge */
.smv .pane .zm-bubble { right: auto !important; left: 50% !important; bottom: auto !important; top: -60px; transform: translateX(-50%); }
.smv .pane .zm-bubble::after { right: auto !important; left: 50% !important; top: auto !important; bottom: -5px; transform: translateX(-50%) !important;
  border: 5px solid transparent !important; border-bottom: 0 !important; border-top-color: var(--mx-accent) !important; }
.smv .pane .zm { left: calc(16px / var(--pz, 1)); }
.smv .pane.has-ruler .zm { left: calc(40px / var(--pz, 1)); }
.smv .pane.pz-narrow .zm { left: calc(10px / var(--pz, 1)); }
.smv .pane.pz-narrow.has-ruler .zm { left: calc(32px / var(--pz, 1)); }
.smv .pane .zm { padding-top: 0; }
/* Browsing: auto-close setting + close all */
.smv-bbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 4px 2px 10px; margin-bottom: 8px; border-bottom: 1px solid var(--fx-side-line, var(--mx-line)); font-size: 12px; color: var(--mx-muted); }
.smv-bbar label { display: grid; gap: 3px; }
.smv-bbar select { font: 12px var(--f-body); padding: 4px 6px; border-radius: 7px; background: var(--mx-surface); color: var(--mx-ink); border: 1px solid var(--mx-line); width: auto; }
.smv-bbar button { font-size: 12px; padding: 5px 10px; border-radius: 8px; background: transparent; color: var(--mx-ink); border: 1px solid var(--mx-line); }
.smv-bbar button:hover { border-color: #ef4444; color: #ef4444; }
.smv-bname small { display: block; font-weight: 400; font-size: 11px; color: var(--mx-muted); margin-top: 2px; }

/* ---------- nicer image loading ---------- */
img[loading="lazy"] { transition: opacity .35s ease; }
img[loading="lazy"]:not(.ld) { opacity: 0; }
.sm-frame:has(img:not(.ld)), .smv-frame:has(img:not(.ld)), .smv-bthumb:has(img:not(.ld)), .tl-thumbimg:has(img:not(.ld)) { background: linear-gradient(100deg, rgb(127 127 127 / .10) 30%, rgb(127 127 127 / .22) 50%, rgb(127 127 127 / .10) 70%) 0 0 / 300% 100%; animation: sw-shimmer 1.4s linear infinite; }
@keyframes sw-shimmer { to { background-position: -300% 0; } }
@media (prefers-reduced-motion: reduce) { .sm-frame, .smv-frame, .smv-bthumb, .tl-thumbimg { animation: none !important; } }
/* viewer: progress bar while the sharp tiles of the current view are loading */
.pane-load { position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 14; overflow: hidden; opacity: 0; transition: opacity .3s; pointer-events: none; }
.pane-load.on { opacity: 1; }
.pane-load i { position: absolute; top: 0; bottom: 0; width: 35%; background: linear-gradient(90deg, transparent, var(--mx-accent, #16a34a), transparent); animation: sw-loadbar 1.1s ease-in-out infinite; }
@keyframes sw-loadbar { from { left: -35%; } to { left: 100%; } }

/* annotation list: details slide down under each item */
.al-chev { width: 30px; height: 30px; padding: 6px; border: 0; border-radius: 8px; background: transparent; color: var(--mx-muted); display: grid; place-items: center; flex: none; }
.al-chev:hover { background: color-mix(in srgb, var(--mx-accent) 12%, transparent); color: var(--mx-accent); }
.al-chev svg { width: 18px; height: 18px; transition: transform .25s ease; }
.al-item.open .al-chev svg { transform: rotate(180deg); }
.al-item.open .al-chev { color: var(--mx-accent); }
.al-fold { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
.al-item.open > .al-fold { grid-template-rows: 1fr; }
.al-foldin { overflow: hidden; min-height: 0; }
.al-item.open { border-color: var(--mx-accent); }
@media (prefers-reduced-motion: reduce) { .al-fold, .al-chev svg { transition: none; } }
/* text wordmark (replaces the BIOGEAR image logo) */
.sw-word { font: 700 20px/1 var(--f-display, Georgia, serif); letter-spacing: -.01em; color: var(--fx-side-strong, var(--mx-ink, #fafafa)); white-space: nowrap; }
.sw-word b { color: var(--mx-accent, #16a34a); font-weight: 700; }
.sm-top .sw-word { color: #222; font-size: 19px; }
.tl-brand .sw-word { font-size: 18px; }
a:has(> .sw-word) { text-decoration: none; }
.tl-brand .sw-word { text-transform: none; background: none; padding: 0; border-radius: 0; letter-spacing: -.01em; color: var(--fx-side-strong); font: 700 18px/1 var(--f-display, Georgia, serif); }
.tl-brand .sw-word b { color: var(--mx-accent); }