/* Shiklo PDF — the Photo Editor's look (navy header, pill buttons, round icon chips, blue panels), light and dark.
   Layout: header / tool list | files + thumbnails + document | tool panel. Phones (≤ 760 px): document, the tool
   list as a bottom bar, the panel as a drawer opened by picking a tool (drag the handle down to close). */
:root {
  --primary: #2563eb; --primary-2: #1d4ed8; --soft: #e8f0fe; --soft-2: #d4e3fd; --on-soft: #13296b;
  --bg: #f5f7fb; --surface: #fff; --surface-2: #edf1f8; --surface-3: #e3e8f0;
  --text: #1f2937; --text-2: #5b6577; --muted: #7c8698; --line: #e3e8f0; --line-2: #c9d4e6;
  --head: #0b1f4d; --head-text: #dbe6ff; --stage: #e6ebf3; --thumbs: #eef2f8; --sheet: #fff;
  --ok: #16a34a; --ok-bg: #e7f7ee; --ok-fg: #14532d; --warn-bg: #fff4e5; --warn-fg: #8a4b00; --danger: #c8215f;
  --scrim: rgba(11, 31, 77, .42);
  --g-primary: linear-gradient(180deg, #5b95ff 0%, #2563eb 60%, #1d4ed8 100%);
  --g-success: linear-gradient(180deg, #5bd98a 0%, #22a356 60%, #178a45 100%);
  --g-neutral: linear-gradient(180deg, #fff 0%, #f5f7fb 60%, #e9eef6 100%);
  --shadow: 0 1px 3px rgba(15, 23, 42, .12), 0 6px 18px rgba(15, 23, 42, .06);
  --shadow-3: 0 20px 60px rgba(11, 31, 77, .35);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary: #6aa1ff; --primary-2: #4f8bff; --soft: rgba(106, 161, 255, .16); --soft-2: rgba(106, 161, 255, .26); --on-soft: #cfe0ff;
    --bg: #0d1424; --surface: #141c2e; --surface-2: #1b2539; --surface-3: #243049;
    --text: #e6ebf5; --text-2: #a9b4c8; --muted: #8592a8; --line: #26324a; --line-2: #34425f;
    --head: #071331; --head-text: #c9d6f3; --stage: #0f1729; --thumbs: #111a2c;
    --ok-bg: rgba(34, 163, 86, .18); --ok-fg: #9be7b9; --warn-bg: rgba(161, 92, 0, .22); --warn-fg: #ffd08a;
    --g-neutral: linear-gradient(180deg, #212c43 0%, #1b2539 60%, #172033 100%);
    --shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 6px 18px rgba(0, 0, 0, .3);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --primary: #6aa1ff; --primary-2: #4f8bff; --soft: rgba(106, 161, 255, .16); --soft-2: rgba(106, 161, 255, .26); --on-soft: #cfe0ff;
  --bg: #0d1424; --surface: #141c2e; --surface-2: #1b2539; --surface-3: #243049;
  --text: #e6ebf5; --text-2: #a9b4c8; --muted: #8592a8; --line: #26324a; --line-2: #34425f;
  --head: #071331; --head-text: #c9d6f3; --stage: #0f1729; --thumbs: #111a2c;
  --ok-bg: rgba(34, 163, 86, .18); --ok-fg: #9be7b9; --warn-bg: rgba(161, 92, 0, .22); --warn-fg: #ffd08a;
  --g-neutral: linear-gradient(180deg, #212c43 0%, #1b2539 60%, #172033 100%);
  --shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 6px 18px rgba(0, 0, 0, .3);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 14px/1.4 "Segoe UI", system-ui, -apple-system, "Noto Sans", "Noto Sans Devanagari", "Noto Sans JP", sans-serif; color: var(--text); background: var(--bg); overflow: hidden; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; opacity: .45; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
[hidden] { display: none !important; }
.ico { display: inline-flex; width: 20px; height: 20px; flex: none; }
.ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.noscript { padding: 24px; }

/* ---------- app grid ---------- */
.app { display: grid; height: 100vh; height: 100dvh; grid-template-rows: 64px minmax(0, 1fr); grid-template-columns: 236px minmax(0, 1fr) 340px;
  grid-template-areas: "head head head" "tools main panel"; }
.app-head { grid-area: head; display: flex; align-items: center; gap: 12px; padding: 0 16px; background: var(--head); color: #fff; min-width: 0; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 20px; white-space: nowrap; }
.brand .logo { width: 34px; height: 34px; display: inline-flex; } .brand .logo svg { width: 100%; height: 100%; }
.brand b { font-weight: 800; } .brand > span:last-child { color: var(--head-text); }
.hmid { flex: 1; display: flex; justify-content: center; gap: 8px; min-width: 0; }
.hend { display: flex; gap: 8px; align-items: center; }
.hbtn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 12px; border-radius: 20px; border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06); color: #dbe6ff; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.hbtn:hover:not(:disabled) { background: rgba(255,255,255,.14); }
.hbtn[aria-pressed="true"] { background: rgba(147,197,253,.22); border-color: rgba(147,197,253,.5); color: #fff; }
.hbtn.primary { background: var(--g-success); border-color: transparent; color: #fff; box-shadow: 0 2px 8px rgba(22,163,74,.35); }
.hbtn.icon { padding: 0; width: 40px; justify-content: center; }
.hbtn.ph { display: none; }
@media (max-width: 1360px) { .hmid .hbtn .btn-label, .hend .hbtn:not(.primary) .btn-label { display: none; } .hmid .hbtn, .hend .hbtn:not(.primary) { padding: 0; width: 40px; justify-content: center; } }

/* ---------- tool list ---------- */
.tools { grid-area: tools; overflow-y: auto; padding: 10px 10px 16px; background: var(--surface); border-right: 1px solid var(--line); }
.open-btn { width: 100%; display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 12px 0 6px; border: 0; border-radius: 23px; background: var(--g-neutral);
  box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; margin-bottom: 4px; }
.open-btn .ico { width: 34px; height: 34px; padding: 7px; border-radius: 50%; background: var(--soft); color: var(--primary); }
.grp { margin: 12px 8px 4px; font-size: 11px; font-weight: 800; letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }
.tool { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 4px 12px 4px 6px; border: 0; border-radius: 22px; background: none; text-align: left; font-size: 14.5px; }
.tool .chip { width: 34px; height: 34px; padding: 7px; border-radius: 50%; background: var(--soft); color: var(--primary); display: inline-flex; flex: none; }
.tool .chip .ico { width: 20px; height: 20px; }
.tool:hover { background: var(--surface-2); }
.tool.is-soon .tool-label { color: var(--text-2); }
.tool.is-soon::after { content: ""; margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); flex: none; }
.tool[aria-current="true"] { background: var(--g-primary); color: #fff; box-shadow: 0 3px 10px rgba(37,99,235,.3); }
.tool[aria-current="true"] .tool-label { color: #fff; }
.tool[aria-current="true"] .chip { background: rgba(255,255,255,.2); color: #fff; }

/* ---------- main: files, thumbnails, document ---------- */
.main { grid-area: main; display: grid; grid-template-rows: 46px minmax(0, 1fr); grid-template-columns: 116px minmax(0, 1fr); min-width: 0; min-height: 0; background: var(--stage); position: relative; }
.files { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; padding: 0 10px; background: var(--surface); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: thin; }
.ftab { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 4px 0 10px; border-radius: 16px; border: 1px solid var(--line); background: var(--bg); font-size: 13px; white-space: nowrap; max-width: 260px; flex: none; }
.ftab .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.ftab-name { overflow: hidden; text-overflow: ellipsis; }
.ftab small { color: var(--text-2); }
.ftab-x { width: 24px; height: 24px; padding: 4px; border: 0; border-radius: 50%; background: none; color: var(--muted); display: inline-flex; }
.ftab-x:hover { background: var(--surface-3); color: var(--text); }
.ftab-x .ico { width: 16px; height: 16px; }
.ftab.addf { color: var(--primary); font-weight: 700; border-style: dashed; background: none; padding-right: 12px; }
.ftab.addf .ico { width: 18px; height: 18px; }
.thumbs { overflow-y: auto; padding: 12px 10px; display: flex; flex-direction: column; gap: 12px; align-items: center; border-right: 1px solid var(--line); background: var(--thumbs); }
.th { width: 76px; display: flex; flex-direction: column; align-items: center; gap: 4px; border: 0; background: none; padding: 0; font-size: 11.5px; color: var(--text-2); }
.mini, .sheet { width: 100%; background: #fff; border-radius: 3px; box-shadow: var(--shadow); overflow: hidden; display: flex; align-items: center; justify-content: center; position: relative; }
.mini { width: 72px; }
.mini img, .sheet img { width: 100%; height: 100%; object-fit: contain; display: block; }
.th[aria-current="true"] .mini { outline: 3px solid var(--primary); outline-offset: 2px; }
.th[style*="--file"] .mini { border-left: 3px solid var(--file); }
.doc { position: relative; overflow: auto; display: flex; flex-direction: column; align-items: center; min-width: 0; touch-action: pan-x pan-y; }
.doc-pages { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 24px; min-width: max-content; }
.page { position: relative; background: #fff; box-shadow: 0 2px 10px rgba(15,23,42,.18); flex: none; }
.page canvas { width: 100% !important; height: 100% !important; display: block; }
.page[style*="--file"]::before { content: ""; position: absolute; left: -10px; top: 0; bottom: 0; width: 4px; border-radius: 2px; background: var(--file); }
.page.is-blank::after, .sheet.is-blank::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, transparent 0 10px, rgba(124,134,152,.05) 10px 20px); }
.zoom { position: sticky; bottom: 14px; margin: -60px 18px 14px auto; align-self: flex-end; display: flex; align-items: center; gap: 2px; background: var(--surface); border-radius: 22px; padding: 4px; box-shadow: var(--shadow); font-size: 12.5px; font-weight: 600; z-index: 2; }
.zoom-value { min-width: 48px; text-align: center; }
.icon-btn { width: 36px; height: 36px; padding: 8px; border: 0; border-radius: 50%; background: none; display: inline-flex; align-items: center; justify-content: center; }
.icon-btn:hover:not(:disabled) { background: var(--surface-2); }
.empty { grid-column: 1 / -1; grid-row: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--text-2); }
.empty > .ico { width: 56px; height: 56px; padding: 14px; border-radius: 50%; background: var(--soft); color: var(--primary); }
.empty .big { width: auto; padding: 0 24px; }
.app.no-file .thumbs, .app.no-file .doc { display: none; }
.app.dropping .main::after { content: ""; position: absolute; inset: 8px; border: 3px dashed var(--primary); border-radius: 16px; background: rgba(37,99,235,.06); pointer-events: none; }

/* ---------- Pages view ---------- */
.pages-view { grid-column: 1 / -1; grid-row: 2; overflow: auto; padding: 0 22px 22px; }
.app.pages .thumbs, .app.pages .doc { display: none; }
.pv-bar { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 0; background: var(--stage); }
.pv-count { font-weight: 700; margin-right: 6px; }
.pv-hint { margin-left: auto; font-size: 12.5px; color: var(--text-2); }
.pill { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px 0 10px; border-radius: 18px; border: 1px solid var(--line); background: var(--g-neutral); font-size: 13px; font-weight: 600; white-space: nowrap; }
.pill .ico { width: 18px; height: 18px; color: var(--primary); }
.pill-danger .ico { color: var(--danger); }
.pv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 20px; align-items: end; }
.pv { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); border-radius: 6px; user-select: none; touch-action: pan-y; }
.pv .sheet { width: 100%; }
.pv-file { position: absolute; top: 6px; left: 6px; width: 20px; height: 20px; border-radius: 50%; color: #fff; font: 800 11px/20px system-ui; text-align: center; }
.pv-grip { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; padding: 4px; border-radius: 8px; background: rgba(255,255,255,.9); color: #5b6577; cursor: grab; display: none; }
.pv-grip svg { width: 100%; height: 100%; fill: currentColor; }
@media (pointer: coarse) { .pv-grip { display: block; } }
.pv-turn { position: absolute; bottom: 26px; right: 6px; height: 20px; padding: 0 7px; border-radius: 10px; background: var(--primary); color: #fff; font: 700 11px/20px system-ui; }
.pv[aria-selected="true"] .sheet { outline: 3px solid var(--primary); outline-offset: 3px; }
.pv[aria-selected="true"]::after { content: "✓"; position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 800; line-height: 22px; text-align: center; }
.pv-add { border: 0; background: none; padding: 0; }
.pv-add .sheet { aspect-ratio: 210 / 297; background: none; border: 2px dashed var(--line-2); box-shadow: none; color: var(--primary); font-weight: 700; font-size: 13px; }

/* ---------- panel ---------- */
.panel { grid-area: panel; display: flex; flex-direction: column; min-height: 0; background: var(--surface); border-left: 1px solid var(--line); }
.sheet-handle, .sheet-close { display: none; }
.ptitle { flex: none; height: 58px; display: flex; align-items: center; gap: 10px; padding: 0 12px 0 20px; border-bottom: 1px solid var(--line); }
.ptitle-text { margin: 0; font-size: 16px; font-weight: 700; }
.pgroup { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.pbody { flex: 1; overflow-y: auto; padding: 16px 20px 20px; }
.pfoot { flex: none; display: flex; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--line); }
.pfoot .big { flex: 1; }
.ready { flex: none; padding: 12px 20px 14px; border-top: 1px solid var(--line); background: var(--bg); }
.ready-row { display: flex; gap: 8px; }
.ready-row button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 0; border: 0; background: none; font-size: 11px; font-weight: 600; color: var(--text-2); }
.ico-round { width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: var(--g-primary); color: #fff; box-shadow: 0 2px 6px rgba(37,99,235,.3); display: inline-flex; }
.ico-round .ico { width: 22px; height: 22px; }

/* panel pieces */
.sec { margin-bottom: 18px; }
.lbl { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; color: var(--text-2); text-transform: uppercase; margin-bottom: 8px; }
.note { margin: 0 0 14px; font-size: 12.5px; color: var(--text-2); background: var(--surface-2); border-radius: 10px; padding: 10px 12px; }
.note-ok { background: var(--ok-bg); color: var(--ok-fg); } .note-warn { background: var(--warn-bg); color: var(--warn-fg); }
.seg { display: flex; padding: 3px; gap: 3px; border-radius: 22px; background: var(--surface-2); }
.seg button { flex: 1; min-height: 34px; border: 0; border-radius: 18px; background: none; font-size: 12.5px; font-weight: 700; color: var(--text-2); padding: 0 8px; }
.seg button[aria-checked="true"] { background: var(--g-primary); color: #fff; box-shadow: 0 2px 6px rgba(37,99,235,.3); }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--g-neutral); font-size: 12px; font-weight: 600; text-align: center; }
.tile .ico { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: var(--soft); color: var(--primary); }
.tile:hover { border-color: var(--line-2); }
.row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; font-size: 13.5px; margin-bottom: 8px; cursor: pointer; }
.row small { display: block; color: var(--text-2); font-size: 12px; }
.tog { width: 40px; height: 22px; border-radius: 11px; background: var(--line-2); position: relative; flex: none; border: 0; padding: 0; }
.tog::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; }
.tog[aria-checked="true"] { background: var(--primary); } .tog[aria-checked="true"]::after { left: 21px; }
.inp { width: 100%; height: 40px; border: 1px solid var(--line-2); border-radius: 10px; padding: 0 12px; font: inherit; background: var(--surface); color: var(--text); }
.list { display: flex; flex-direction: column; gap: 6px; }
.it { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; min-height: 42px; }
.it .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.it-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.it small { margin-left: auto; color: var(--text-2); white-space: nowrap; }
.it .up { width: 30px; height: 30px; padding: 6px; } .it .up .ico { transform: rotate(-90deg); }
.big { width: 100%; min-height: 44px; border: 0; border-radius: 22px; background: var(--g-primary); color: #fff; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 14px; }
.big .ico { width: 18px; height: 18px; }
.big.ghost { background: var(--g-neutral); color: var(--text); border: 1px solid var(--line); }
.soon-panel { text-align: center; padding-top: 12px; }
.soon-icon { display: inline-flex; width: 64px; height: 64px; padding: 16px; border-radius: 50%; background: var(--soft); color: var(--primary); }
.soon-icon .ico { width: 32px; height: 32px; }
.soon-lead { font-weight: 600; margin: 14px 0 8px; }
.soon-list { text-align: left; margin: 0; padding-left: 20px; color: var(--text-2); font-size: 13px; line-height: 1.6; }

/* ---------- start dialog ---------- */
.scrim { position: fixed; inset: 0; background: var(--scrim); display: flex; align-items: center; justify-content: center; z-index: 10; padding: 20px; }
.start-dlg { width: min(1060px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; background: var(--surface); border-radius: 22px; box-shadow: var(--shadow-3); padding: 28px 32px; }
.start-dlg h2 { margin: 0 0 18px; font-size: 26px; display: flex; align-items: center; gap: 12px; }
.dlg-x { margin-left: auto; background: var(--surface-2); width: 40px; height: 40px; }
.drop { border: 2px dashed var(--line-2); border-radius: 18px; padding: 22px 26px; }
.drop .btns { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.bigpill { display: inline-flex; align-items: center; gap: 12px; height: 52px; padding: 0 22px 0 6px; border-radius: 26px; border: 1px solid var(--line); background: var(--g-neutral); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: 13px; }
.bigpill .ico { width: 40px; height: 40px; padding: 10px; border-radius: 50%; background: var(--g-primary); color: #fff; }
.bigpill.main { background: var(--g-primary); color: #fff; border-color: transparent; } .bigpill.main .ico { background: rgba(255,255,255,.2); }
.drop p { margin: 0; color: var(--text-2); } .drop small { color: var(--muted); }
.goals-h { margin: 22px 0 12px; font-size: 18px; font-weight: 800; }
.goals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.goal, .start-goal { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); text-align: left; }
.goal:hover { border-color: var(--line-2); box-shadow: var(--shadow); }
.gi { width: 46px; height: 46px; padding: 11px; border-radius: 50%; color: #fff; flex: none; display: inline-flex; }
.gi .ico { width: 24px; height: 24px; }
.goal b, .start-goal b { display: block; font-size: 15px; } .goal > span:not(.gi) > span, .start-goal > span:not(.gi) > span { font-size: 12.5px; color: var(--text-2); }
.start-goal { margin-bottom: 14px; background: var(--soft); border-color: transparent; }
.start-goal > span:nth-child(2) { flex: 1; }
.priv { margin: 18px 0 0; font-size: 13px; color: var(--text-2); display: flex; align-items: center; gap: 8px; }
.langs { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 16px; font-size: 13.5px; } .langs a { color: var(--primary); text-decoration: none; }

/* ---------- dialogs, popups, toasts (ui.js) ---------- */
.dlg { width: min(480px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: 24px; background: var(--surface); color: var(--text); box-shadow: var(--shadow-3); }
.dlg-wide { width: min(560px, calc(100vw - 32px)); }
.dlg::backdrop, .task::backdrop { background: var(--scrim); }
.dlg-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 16px 8px 22px; }
.dlg-head h2 { margin: 0; font-size: 20px; font-weight: 800; }
.dlg-body { padding: 8px 22px; } .dlg-body > p { margin: 0 0 8px; color: var(--text-2); }
.dlg-foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 16px 22px 20px; border-top: 1px solid var(--line); margin-top: 12px; }
.btn { min-width: 120px; min-height: 42px; padding: 0 20px; border-radius: 21px; border: 1px solid var(--line); background: var(--g-neutral); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: 12.5px; }
.btn-primary { background: var(--g-primary); color: #fff; border-color: transparent; }
.task { width: min(320px, calc(100vw - 48px)); padding: 26px 22px; border: 0; border-radius: 24px; background: var(--surface); color: var(--text); text-align: center; box-shadow: var(--shadow-3); }
.task-text { margin: 14px 0 0; font-size: 14px; font-weight: 600; }
.task-bar { height: 10px; margin-top: 14px; border-radius: 5px; background: var(--surface-3); overflow: hidden; }
.task-fill { height: 100%; width: 0; border-radius: 5px; background: linear-gradient(90deg, #2563eb, #22b8e8); transition: width .2s; }
.task-cancel { margin-top: 14px; }
.spinner { width: 40px; height: 40px; margin: 0 auto; border-radius: 50%; border: 4px solid var(--surface-3); border-top-color: var(--primary); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 30; width: max-content; max-width: min(560px, calc(100vw - 24px)); }
.toast { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 6px 6px 8px; border-radius: 26px; background: #0b1f4d; color: #eef3ff; box-shadow: var(--shadow-3); font-size: 14px; font-weight: 500; }
.toast > .ico { flex: none; width: 36px; height: 36px; padding: 8px; border-radius: 50%; background: var(--g-success); color: #fff; }
.toast-error > .ico { background: linear-gradient(180deg, #ff7cbc, #c22768); } .toast-info > .ico { background: var(--g-primary); }
.toast-close { flex: none; width: 36px; height: 36px; padding: 8px; border: 0; border-radius: 50%; background: none; color: inherit; margin-left: auto; display: inline-flex; }
.toast > span:not(.ico) { flex: 1; min-width: 0; overflow-wrap: anywhere; line-height: 20px; }

/* ---------- phones: document, bottom tool bar, drawer ---------- */
@media (max-width: 760px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: 56px minmax(0, 1fr) 68px; grid-template-areas: "head" "main" "tools"; }
  .app-head { padding: 0 10px; gap: 6px; } .brand { font-size: 17px; margin-right: auto; } .brand .logo { width: 30px; height: 30px; }
  .hmid { display: none; } .hend .hbtn:not(.primary):not(.icon) { display: none; } .hbtn.ph { display: inline-flex; }
  .hbtn.primary { padding: 0; width: 40px; justify-content: center; } .hbtn.primary .btn-label { display: none; }
  .main { grid-template-columns: minmax(0, 1fr); } .thumbs { display: none; }
  .doc-pages { padding: 14px 18px; } .page[style*="--file"]::before { left: -8px; }
  .tools { display: flex; overflow-x: auto; padding: 4px 6px; gap: 2px; border-right: 0; border-top: 1px solid var(--line); scrollbar-width: none; }
  .tools .grp, .tools .open-btn { display: none; }
  .tool { flex-direction: column; justify-content: center; gap: 2px; width: 76px; min-height: 58px; padding: 4px 0; border-radius: 14px; font-size: 10.5px; text-align: center; flex: none; }
  .tool .chip { width: 30px; height: 30px; padding: 6px; } .tool.is-soon::after { display: none; }
  .tool-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 72px; }
  /* the drawer: hidden until a tool is picked; drag its handle (down closes, up makes it taller) */
  .panel { position: fixed; left: 0; right: 0; bottom: 68px; z-index: 6; height: var(--sheet-h, min(56vh, 520px)); max-height: calc(100dvh - 120px); border-left: 0;
    border-radius: 20px 20px 0 0; box-shadow: 0 -8px 24px rgba(15,23,42,.18); transform: translateY(calc(100% + 80px)); transition: transform .22s ease, height .22s ease; visibility: hidden; }
  .app.sheet-open .panel { transform: none; visibility: visible; }
  .panel.is-dragging { transition: none; }
  .sheet-handle { display: flex; justify-content: center; align-items: center; flex: none; height: 22px; border: 0; background: none; cursor: grab; touch-action: none; }
  .sheet-handle span { width: 44px; height: 5px; border-radius: 3px; background: var(--line-2); }
  .sheet-close { display: inline-flex; }
  .ptitle { height: 44px; padding: 0 8px 0 18px; } .pgroup { display: none; } .ptitle .sheet-close { margin-left: auto; }
  .pbody { padding: 12px 16px; } .pfoot { padding: 10px 16px; } .ready { display: none; }
  .pv-hint { display: none; } .pages-view { padding: 0 12px 16px; } .pv-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 14px; }
  .pill { padding: 0 10px; } .pill .btn-label { display: none; }
  .scrim { padding: 10px; align-items: flex-end; } .start-dlg { padding: 20px 16px; border-radius: 20px; max-height: calc(100dvh - 20px); }
  .start-dlg h2 { font-size: 21px; } .goals { grid-template-columns: 1fr; } .bigpill { height: 48px; flex: 1 1 100%; }
  .zoom { bottom: 10px; margin-right: 10px; }
  .toasts { bottom: 84px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- search, marks, recent projects, print (M1 part 2) ---------- */
.search-bar { position: absolute; top: 56px; right: 16px; z-index: 4; display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 26px; background: var(--surface); box-shadow: var(--shadow-3); width: min(460px, calc(100% - 32px)); }
.search-inp { height: 38px; border-radius: 19px; flex: 1; min-width: 0; }
.search-count { font-size: 12.5px; color: var(--text-2); white-space: nowrap; padding: 0 4px; max-width: 46%; overflow: hidden; text-overflow: ellipsis; }
.search-bar .prev .ico { transform: rotate(180deg); }
.mark { position: absolute; background: rgba(250, 204, 21, .42); mix-blend-mode: multiply; border-radius: 2px; pointer-events: none; z-index: 1; }
.mark.is-focus { background: rgba(249, 115, 22, .55); outline: 2px solid #f97316; }
.recent-h { margin-top: 22px; } .recent { display: flex; flex-wrap: wrap; gap: 10px; }
.rc { display: flex; align-items: center; gap: 10px; padding: 8px 6px 8px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: 12.5px; max-width: 320px; }
.rc-open { display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 0; text-align: left; min-width: 0; }
.rc img, .rc .rc-blank { width: 34px; height: 44px; object-fit: cover; border-radius: 3px; box-shadow: var(--shadow); background: #fff; flex: none; }
.rc b { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rc small { color: var(--text-2); }
.rc .icon-btn { width: 30px; height: 30px; padding: 6px; color: var(--muted); }
.hbtn[data-state="saved"] { color: #9be7b9; }
.print-pages { display: none; }
@media print {
  @page { margin: 0; }
  html, body { height: auto; overflow: visible; background: #fff; }
  body > *:not(.print-pages) { display: none !important; }
  .print-pages { display: block; }
  .print-page { width: 100%; break-after: page; page-break-after: always; display: flex; align-items: center; justify-content: center; }
  .print-page img { width: 100%; height: auto; display: block; }
}
@media (max-width: 760px) { .search-bar { top: 52px; right: 8px; width: calc(100% - 16px); } }

/* ---------- objects on pages (M2a): the layer, objects, selection ---------- */
.layer { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; z-index: 2; }
.doc.is-editing .layer { pointer-events: auto; }
.doc.is-armed .layer { cursor: crosshair; }
.obj { position: absolute; box-sizing: border-box; }
.doc.is-editing .obj { cursor: move; }
.obj img { width: 100%; height: 100%; display: block; object-fit: fill; pointer-events: none; }
.obj svg { width: 100%; height: 100%; display: block; overflow: visible; }
.obj-text { white-space: pre; overflow: visible; padding: 0; outline: none; }
.obj-text.is-editing { cursor: text; background: rgba(37, 99, 235, .06); outline: 2px dashed var(--primary); min-width: 2em; }
.obj.is-selected { outline: 2px solid var(--primary); outline-offset: 2px; }
.obj-line.is-selected, .obj-arrow.is-selected { outline: 1px dashed var(--primary); }
.obj-handle { position: absolute; right: -9px; bottom: -9px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--primary); cursor: nwse-resize; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.obj-line .obj-handle, .obj-arrow .obj-handle { right: auto; bottom: auto; transform: translate(-50%, -50%); cursor: crosshair; }
@media (pointer: coarse) { .obj-handle { width: 22px; height: 22px; right: -13px; bottom: -13px; } }

/* panel pieces for Add / Sign */
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.sw { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line-2); padding: 0; }
.sw[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--primary); }
.sw-none { background: linear-gradient(135deg, transparent 45%, var(--danger) 45% 55%, transparent 55%), var(--surface); }
.slider { display: flex; align-items: center; gap: 10px; } .slider input { flex: 1; accent-color: var(--primary); } .slider b { min-width: 52px; text-align: right; font-size: 12.5px; }
.sel-lbl { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line); }
.big.danger { color: var(--danger); }
.tile[aria-pressed="true"] { border-color: var(--primary); background: var(--soft); }
.sig-pad { width: 100%; height: auto; aspect-ratio: 600 / 220; background: #fff; border: 1px dashed var(--line-2); border-radius: 12px; touch-action: none; cursor: crosshair; display: block; }
.sig-pad.is-preview { cursor: default; }
.sig-mode { margin-bottom: 12px; display: flex; flex-direction: column; gap: 10px; }
.sig-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sigs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sig-item { position: relative; }
.sig { width: 100%; height: 64px; border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 6px; display: flex; align-items: center; justify-content: center; }
.sig img { max-width: 100%; max-height: 100%; }
.sig:hover { border-color: var(--primary); }
.sig-x { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; padding: 4px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); display: inline-flex; }

/* ---------- Annotate (M2b) ---------- */
.obj-highlight { mix-blend-mode: multiply; border-radius: 2px; }
.mark-line { position: absolute; left: 0; right: 0; height: max(1.5px, 7%); }
.obj-underline .mark-line { bottom: 4%; } .obj-strike .mark-line { top: 50%; transform: translateY(-50%); }
.obj-note { background: var(--note, #facc15); border-radius: 4px 4px 4px 0; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.obj-note::after { content: ""; position: absolute; left: 22%; right: 22%; top: 30%; height: 12%; border-top: 2px solid rgba(0,0,0,.45); border-bottom: 2px solid rgba(0,0,0,.45); }
.obj-stamp { border: 2.5px solid; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-family: Helvetica, Arial, sans-serif; font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.obj-ink svg { overflow: visible; }
.area-preview { position: absolute; border: 1.5px dashed var(--primary); background: rgba(37, 99, 235, .08); pointer-events: none; }
.ink-preview { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { height: 32px; padding: 0 12px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); font-size: 12px; font-weight: 700; }
.stamp-chip { border-width: 2px; letter-spacing: .04em; }
.it-btn { width: 100%; background: var(--surface); text-align: left; cursor: pointer; }
.it-btn:hover { border-color: var(--line-2); }
.note-text { height: auto; padding: 8px 12px; resize: vertical; font: inherit; }

/* ---------- Edit Text and Fill Form (M2c) ---------- */
.spot { position: absolute; border-radius: 3px; cursor: text; outline: 1px dashed rgba(37, 99, 235, .3); }
.spot:hover { background: rgba(37, 99, 235, .1); outline: 1.5px solid rgba(37, 99, 235, .6); }
.obj-textedit { white-space: pre; overflow: visible; cursor: text !important; box-shadow: 0 0 0 1px rgba(37, 99, 235, .35); }
.obj-textedit.is-editing { outline: 2px dashed var(--primary); }
.obj-textedit .obj-handle { display: none; }
.field { position: absolute; box-sizing: border-box; margin: 0; border: 1px solid rgba(37, 99, 235, .55); border-radius: 2px; background: rgba(219, 234, 254, .55); color: #111; color-scheme: light; padding: 0 3px; font-family: Helvetica, Arial, sans-serif; }
.field:focus { outline: 2px solid var(--primary); background: #fff; }
.field:disabled { background: rgba(0, 0, 0, .05); border-style: dashed; }
textarea.field { resize: none; padding-top: 2px; }
.field-check { padding: 0; accent-color: var(--primary); }
.row-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chip.is-on { background: var(--soft); border-color: var(--primary); }
.chip .ico { width: 14px; height: 14px; }
.dot.is-done { background: var(--ok) !important; }
.it .dot { background: var(--line-2); }

/* ---------- Page setup: Watermark, Numbers & Headers, Crop & Resize (M3a) ---------- */
.setup-layer { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.wm-mark { position: absolute; white-space: pre; font: 700 16px Helvetica, Arial, sans-serif; line-height: 1; transform-origin: 50% 50%; }
img.wm-mark { object-fit: contain; }
.pn-text { position: absolute; white-space: pre; font-family: Helvetica, Arial, sans-serif; line-height: 1; }
.crop-shade { position: absolute; background: rgba(15, 23, 42, .38); }
.crop-frame { position: absolute; outline: 1.5px dashed var(--primary); }
.pos-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 34px 34px; gap: 0; width: 138px; padding: 4px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); }
.pos-grid .pos { display: flex; align-items: center; justify-content: center; border: 0; background: none; padding: 0; }
.pos-grid .pos[data-pos^="t"] { align-items: flex-start; } .pos-grid .pos[data-pos^="b"] { align-items: flex-end; }
.pos-grid .pos span { width: 22px; height: 6px; border-radius: 3px; background: var(--line-2); }
.pos-grid .pos[aria-checked="true"] span { background: var(--primary); }
.pos-grid .pos:hover span { background: var(--text-2); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sub-sec { padding-left: 12px; border-left: 2px solid var(--line); margin-bottom: 8px; }
.inp-num { height: 36px; }
.hf .sec .seg { margin-top: 6px; }
.margins { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.margins label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-2); }
.wm-pic { display: block; max-width: 100%; max-height: 90px; margin-bottom: 8px; border-radius: 8px; background: repeating-conic-gradient(var(--surface-2) 0 25%, var(--surface) 0 50%) 0 0 / 14px 14px; }
hr.sep { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }

/* ---------- Redact (M3b) ---------- */
.obj-redact { background: rgba(0, 0, 0, .78); outline: 1.5px solid #dc2626; outline-offset: 0; }
.obj-redact.is-selected { outline: 2px dashed var(--primary); outline-offset: 2px; }
.it .dot-redact { background: #111; border-radius: 2px; }
.it.prop .it-name { flex: none; } .it.prop small { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pbody .note:empty { display: none; }

/* ---------- OCR and Compare (M4b) ---------- */
.diff { font-size: 13px; line-height: 1.6; margin: 6px 0 0; }
.diff ins { background: #dcfce7; color: #166534; text-decoration: none; border-radius: 3px; padding: 0 2px; }
.diff del { background: #fee2e2; color: #991b1b; border-radius: 3px; padding: 0 2px; }
.diff-page { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin-top: 8px; }
.diff-page summary { font-weight: 700; font-size: 13px; cursor: pointer; }
.diff-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0 6px; font-size: 13px; font-weight: 600; }
.diff-nav .flip .ico { transform: rotate(180deg); }
.diff-canvas { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; }

/* ---------- Scan to PDF (M4c) ---------- */
.scan { display: flex; flex-direction: column; gap: 12px; }
.scan-strip { display: flex; gap: 6px; flex-wrap: wrap; }
.scan-thumb { width: 34px; height: 40px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--surface); font-weight: 700; font-size: 13px; }
.scan-thumb.is-on { border-color: var(--primary); background: var(--soft); color: var(--primary); }
.scan-views { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.scan-views figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.scan-views canvas { max-width: 100%; height: auto; border-radius: 8px; box-shadow: var(--shadow-1, 0 1px 3px rgba(0,0,0,.2)); background: #fff; }
.scan-photo { touch-action: none; cursor: grab; }
.scan-views figcaption { font-size: 12px; color: var(--text-2); font-weight: 600; }
.scan-tools { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 640px) { .scan-views { grid-template-columns: 1fr; } }

/* ---------- Ads (M6; off until the owner switches them on): the start dialog, the desktop tool column ---------- */
.ad-slot { display: flex; flex-direction: column; gap: 4px; }
.ad-slot[hidden] { display: none; }
.ad-label { margin: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3, var(--text-2)); }
.ad-box { min-height: 90px; border-radius: 12px; overflow: hidden; }
.ad-start { margin: 16px 0 4px; }
.ad-side { margin-top: 16px; padding: 0 8px; }
.ad-side .ad-box { min-height: 250px; }
@media (max-width: 1180px) { .ad-side { display: none !important; } }

/* ---------- Guide pages (/merge-pdf/, /compress-pdf/ …): plain pages that open the app with a tool ---------- */
.guide { min-height: 100%; display: flex; flex-direction: column; background: var(--bg); color: var(--text); }
.guide-head { background: var(--head); padding-top: env(safe-area-inset-top); }
.guide-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 60px; padding: 0 24px; color: #fff; }
.guide-bar .brand { color: #fff; text-decoration: none; }
.brand-logo { width: 34px; height: 34px; flex: none; }
.guide-btn { display: inline-flex; align-items: center; height: 40px; padding: 0 20px; border-radius: 20px; background: var(--g-primary); color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap; }
.guide-btn.big { height: 52px; padding: 0 28px; border-radius: 26px; font-size: 17px; }
.guide-main { flex: 1; width: 100%; max-width: 860px; margin: 0 auto; padding: 40px 24px; box-sizing: border-box; }
.guide-main h1 { margin: 0 0 12px; font-size: clamp(28px, 4vw, 40px); line-height: 1.15; letter-spacing: -.02em; font-weight: 800; }
.guide-lead { margin: 0 0 20px; font-size: 18px; line-height: 28px; color: var(--text-2); }
.guide-main h2 { margin: 36px 0 12px; font-size: 22px; line-height: 28px; }
.guide-main p, .guide-main li { font-size: 16px; line-height: 26px; }
.guide-main ol, .guide-main ul { padding-left: 22px; }
.guide-cta { margin: 16px 0; }
.ad-guide { margin: 28px 0; }
.faq details { border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; margin: 8px 0; background: var(--surface); }
.faq summary { font-weight: 700; cursor: pointer; }
.faq details p { margin: 8px 0 0; color: var(--text-2); }
.guide-more ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.guide-more a { display: block; padding: 12px 14px; border-radius: 14px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); color: var(--primary); font-weight: 700; text-decoration: none; }
.guide-more a:hover { box-shadow: 0 0 0 2px var(--primary); }
.guide-foot { padding: 20px 24px 28px; text-align: center; font-size: 13.5px; color: var(--text-2); border-top: 1px solid var(--line); }
.guide-foot a { color: var(--primary); }
@media (max-width: 640px) { .guide-main { padding: 28px 16px; } .guide-bar { padding: 0 16px; } .guide-bar .guide-btn { display: none; } }
.preset-save { margin-top: 8px; } .preset-save .inp { flex: 1 1 180px; width: auto; }

/* ---------- The Shiklo mark (icons/logo.png) in a white circle, as on tools.shiklo.com and code.shiklo.com ---------- */
.brand .logo, .brand-logo { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 50%; background: #fff; overflow: hidden; }
.brand .logo img, .brand-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.it.it-sub { margin-left: 16px; }
.obj-link { border: 1.5px dashed #2563eb; background: rgba(37, 99, 235, .08); border-radius: 3px; }
.obj-link::after { content: "🔗"; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); font-size: 11px; line-height: 1; }
.prop-field { display: flex; flex-direction: column; gap: 4px; margin: 0 0 8px; font-size: 12.5px; color: var(--text-2); }
.ad-dialog { margin-top: 14px; } .ad-dialog .ad-box { min-height: 90px; }