:root{
    --bg:#15110d; --bg2:#1d1813; --ink:#e9e0d2; --muted:#8a7d6a;
    --bg-glow1:#221a13; --bg-glow2:#1a1410;
    --line:#352c22; --accent:#c8633b; --accent-dim:#7a3c25; --paper:#f3ece0;
  }
  *{box-sizing:border-box}
  html,body{height:100%;margin:0}
  body{
    background:
      radial-gradient(1200px 700px at 60% -10%, var(--bg-glow1) 0%, transparent 60%),
      radial-gradient(900px 900px at 0% 110%, var(--bg-glow2) 0%, transparent 55%),
      var(--bg);
    color:var(--ink); font-family:'JetBrains Mono',ui-monospace,monospace;
    overflow:hidden; display:flex; flex-direction:column;
  }
  body::after{
    content:"";position:fixed;inset:0;pointer-events:none;z-index:5;opacity:.035;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .stage{flex:1;position:relative;min-height:0}
  canvas{display:block;width:100%;height:100%;cursor:default;touch-action:none}
  canvas.grabbing{cursor:grabbing}
  .hint{position:absolute;left:50%;bottom:64px;transform:translateX(-50%);font-size:11px;color:var(--muted);letter-spacing:.4px;z-index:6;background:rgba(20,16,12,.6);padding:6px 12px;border:1px solid var(--line);border-radius:2px;transition:opacity .5s}
  .console{position:absolute;top:18px;right:18px;width:252px;z-index:7;background:linear-gradient(180deg,rgba(29,24,19,.96),rgba(21,17,13,.96));border:1px solid var(--line);border-radius:4px;padding:14px 15px 16px;box-shadow:0 18px 50px -20px rgba(0,0,0,.8);backdrop-filter:blur(3px);max-height:calc(100% - 36px);overflow:auto}
  .console h2{margin:0 0 12px;font-size:10px;letter-spacing:2.2px;text-transform:uppercase;color:var(--muted);font-weight:500;display:flex;justify-content:space-between;align-items:center}
  .console h2 span{color:var(--accent);font-family:'Zen Old Mincho',serif;letter-spacing:0;text-transform:none;font-size:13px}
  .ctl{margin-bottom:11px}
  .ctl label{display:flex;justify-content:space-between;font-size:10.5px;color:var(--ink);margin-bottom:4px}
  .ctl label .v{color:var(--accent);font-variant-numeric:tabular-nums}
  input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:3px;border-radius:3px;background:var(--line);outline:none;margin:3px 0}
  input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:13px;height:13px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid #1d1813;box-shadow:0 0 0 1px var(--accent-dim)}
  input[type=range]::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid #1d1813}
  select{width:100%;font-family:inherit;font-size:11px;background:#241d16;color:var(--ink);border:1px solid var(--line);padding:6px;border-radius:3px;margin-top:2px}
  .btns{display:flex;gap:7px;margin-top:14px}
  button{flex:1;font-family:inherit;font-size:11px;letter-spacing:.5px;background:#241d16;color:var(--ink);border:1px solid var(--line);padding:8px 6px;border-radius:3px;cursor:pointer;transition:.15s}
  button:hover{border-color:var(--accent-dim);color:var(--paper)}
  button.primary{background:var(--accent);color:#1a1108;border-color:var(--accent);font-weight:500}
  button.primary:hover{background:#d9744b}
  .seek{display:flex;align-items:center;gap:8px;margin-top:12px}
  .seek input[type=range]{flex:1}
  .readout{margin-top:13px;padding-top:11px;border-top:1px solid var(--line);font-size:10px;color:var(--muted);display:flex;justify-content:space-between}
  .readout b{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
  .sectlabel{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--accent-dim);margin:14px 0 6px;border-top:1px solid var(--line);padding-top:10px}
  .err{position:absolute;inset:0;display:none;align-items:center;justify-content:center;color:var(--accent);font-size:13px;text-align:center;padding:40px;z-index:9}
  /* ===== Orizuru viewer navbar (42px) + side nav — uses --pf-accent/--pf-text-color from AI cover system ===== */
  :root{ --pf-accent:#31373d; --pf-text-color:#ffffff;   /* antraciet default (was bordeaux-roze); per-publicatie overridebaar */
    --pf-ink:var(--pf-text-color);
    --pf-hover:color-mix(in srgb, var(--pf-text-color) 14%, transparent);
    --pf-press:color-mix(in srgb, var(--pf-text-color) 22%, transparent);
    --pf-field:color-mix(in srgb,#000 16%, transparent);
    --pf-panel-bg:#f4f4f5; --pf-panel-ink:#3a3a3e;
    --pf-ease:cubic-bezier(.34,1.3,.46,1); }
  .pf-navbar{ flex:0 0 42px; height:42px; width:100%;
    /* subtiel verticaal verloop afgeleid van het accent (8% licht boven, 7% donker onder):
       geeft de balk materie, zoals de platform-viewer — werkt met elke AutoDesigner-kleur */
    background:linear-gradient(180deg,
      color-mix(in srgb, var(--pf-accent) 92%, #fff) 0%,
      var(--pf-accent) 55%,
      color-mix(in srgb, var(--pf-accent) 93%, #000) 100%);
    display:flex; align-items:center; justify-content:center; padding:0 12px;
    user-select:none; z-index:40;
    box-shadow:0 1px 0 rgba(0,0,0,.18), 0 6px 16px -4px rgba(0,0,0,.35); }   /* subtiele diepte t.o.v. de stage */
  .pf-nav-center{ display:flex; align-items:center; gap:6px; }
  .pf-nav-btn{ -webkit-appearance:none;appearance:none;border:0;background:transparent;
    color:var(--pf-ink); width:34px;height:34px;border-radius:9px;
    display:inline-flex;align-items:center;justify-content:center;cursor:pointer;position:relative;
    transition:background .18s ease, transform .2s var(--pf-ease), color .18s ease; }
  .pf-nav-btn svg{ width:19px;height:19px;display:block; transition:transform .26s var(--pf-ease); }
  .pf-nav-btn:hover{ background:var(--pf-hover); }
  .pf-nav-btn:active{ background:var(--pf-press); transform:scale(.9); }
  .pf-nav-btn:disabled{ opacity:.32;cursor:default; }
  .pf-nav-btn:disabled:hover{ background:transparent; }
  .pf-nav-btn:focus-visible{ outline:2px solid var(--pf-ink); outline-offset:2px; }
  .pf-nav-btn[data-dir="prev"]:hover:not(:disabled) svg{ transform:translateX(-2px); }
  .pf-nav-btn[data-dir="next"]:hover:not(:disabled) svg{ transform:translateX(2px); }
  .pf-nav-btn[data-dir="first"]:hover:not(:disabled) svg{ transform:translateX(-3px); }
  .pf-nav-btn[data-dir="last"]:hover:not(:disabled) svg{ transform:translateX(3px); }
  .pf-counter{ height:28px;min-width:88px;padding:0 14px;margin:0 4px;border-radius:999px;
    background:var(--pf-field); color:var(--pf-ink);
    font-size:12.5px;font-weight:600;letter-spacing:.4px;font-variant-numeric:tabular-nums;
    display:inline-flex;align-items:center;justify-content:center;gap:1px;cursor:text;
    border:1.5px solid transparent;
    transition:border-color .18s ease, background .18s ease, transform .2s var(--pf-ease); }
  .pf-counter:hover{ background:color-mix(in srgb,#000 22%,transparent); }
  .pf-counter .sep{ opacity:.5;margin:0 2px; } .pf-counter .total{ opacity:.62; }
  .pf-counter.editing{ border-color:var(--pf-ink); background:color-mix(in srgb,#000 30%,transparent); }
  .pf-counter input{ -webkit-appearance:none;appearance:none;width:46px;border:0;background:transparent;
    outline:0;color:var(--pf-ink);font:inherit;font-weight:700;text-align:center;font-variant-numeric:tabular-nums; }
  .pf-counter input::-webkit-outer-spin-button,.pf-counter input::-webkit-inner-spin-button{ -webkit-appearance:none;margin:0; }
  @keyframes pf-bump{ 0%{transform:scale(1)} 35%{transform:scale(1.09)} 100%{transform:scale(1)} }
  .pf-counter.bump{ animation:pf-bump .34s var(--pf-ease); }
  /* side nav — minimal line chevron, in the margin, always visible */
  .pf-side{ position:absolute;top:50%;transform:translateY(-50%);
    width:46px;height:60px;background:transparent;border:0;cursor:pointer;color:var(--pf-ink);
    display:inline-flex;align-items:center;justify-content:center;z-index:38;
    transition:transform .22s var(--pf-ease); }
  .pf-side svg{ width:30px;height:30px;stroke-width:1.6;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));
    transition:transform .24s var(--pf-ease); }
  .pf-side.left{ left:18px } .pf-side.right{ right:18px }
  .pf-side:active{ transform:translateY(-50%) scale(.9); }
  .pf-side.left:hover svg{ transform:scale(1.18) translateX(-2px); }
  .pf-side.right:hover svg{ transform:scale(1.18) translateX(2px); }
  .pf-side:disabled{ opacity:.25;cursor:default; }
  .pf-side:disabled:hover svg{ transform:none; }
  /* ===== leaf-comet loader (one centered per spread) — no circle chip, just the spinner ===== */
  .pf-loader{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:84px; height:84px;
    display:flex; align-items:center; justify-content:center;
    z-index:36; pointer-events:none; opacity:0;
    transition:opacity .35s ease; }
  .pf-loader.show{ opacity:1; }
  /* color of the spinner auto light/dark via .onlight / .ondark (set from cover luminance) */
  .pf-loader.onlight{ color:var(--pf-accent); }
  .pf-loader.ondark{ color:#fff; }
  .pf-loader .leaf{ width:52px; height:52px; color:inherit;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
  .pf-loader .leaf svg{ width:100%!important; height:100%!important; background:transparent!important; display:block; }
  /* ===== thumbnail viewer ===== */
  .pf-thumb-btn{ -webkit-appearance:none;appearance:none;border:0;background:transparent;color:var(--pf-ink);
    width:34px;height:34px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
    transition:background .18s ease, transform .2s var(--pf-ease); }
  .pf-thumb-btn svg{ width:19px;height:19px;display:block; }
  .pf-thumb-btn:hover{ background:var(--pf-hover); }
  .pf-thumb-btn:active{ background:var(--pf-press); transform:scale(.9); }
  #pfBmToggle.active{ color:#ffd34d; }
  .pf-nav-divider{ width:1px;height:20px;background:color-mix(in srgb,var(--pf-text-color) 18%,transparent);margin:0 2px; }
  .pf-bm-pill{ height:26px;padding:0 10px 0 8px;border-radius:999px;background:color-mix(in srgb,#000 22%,transparent);color:var(--pf-ink);
    display:inline-flex;align-items:center;gap:5px;cursor:pointer;font-size:12px;font-weight:700;font-family:'JetBrains Mono',monospace;border:0;
    transition:background .18s ease, transform .2s var(--pf-ease); }
  .pf-bm-pill:hover{ background:color-mix(in srgb,#000 34%,transparent); }
  .pf-bm-pill:active{ transform:scale(.94); }
  .pf-bm-pill svg{ width:13px;height:13px; }
  @keyframes pfPillPop{ 0%{transform:scale(1)} 40%{transform:scale(1.18)} 100%{transform:scale(1)} }
  .pf-bm-pill.pop{ animation:pfPillPop .32s var(--pf-ease); }
  .pf-tv-scrim{ position:absolute;inset:0;z-index:60;background:rgba(0,0,0,.45);
    opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s; }
  .pf-tv-scrim.open{ opacity:1;visibility:visible; }
  .pf-tv{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.97);z-index:61;
    display:flex;flex-direction:column;width:min(92%,1180px);max-height:88%;
    background:color-mix(in srgb,var(--pf-accent) 90%,#000);border-radius:16px;
    box-shadow:0 30px 80px -20px rgba(0,0,0,.7);opacity:0;visibility:hidden;
    transition:opacity .28s,transform .32s var(--pf-ease),visibility .28s; }
  .pf-tv.open{ opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1); }
  .pf-tv-head{ display:flex;align-items:center;justify-content:space-between;padding:14px 20px;
    border-bottom:1px solid color-mix(in srgb,#000 14%,transparent);border-radius:16px 16px 0 0; }
  .pf-tv-head h3{ margin:0;font-size:12.5px;letter-spacing:2px;text-transform:uppercase;font-weight:600;color:var(--pf-ink);font-family:'JetBrains Mono',monospace; }
  .pf-tv-close{ background:transparent;border:0;color:var(--pf-ink);cursor:pointer;width:32px;height:32px;border-radius:9px;
    display:flex;align-items:center;justify-content:center;transition:background .18s,transform .2s var(--pf-ease); }
  .pf-tv-close:hover{ background:color-mix(in srgb,#000 16%,transparent); } .pf-tv-close:active{ transform:scale(.9); }
  .pf-tv-close svg{ width:19px;height:19px; }
  .pf-tv-scroll{ flex:1;overflow:auto;scroll-behavior:smooth;padding:18px 22px 24px; }
  .pf-tv-scroll::-webkit-scrollbar{ width:10px; }
  .pf-tv-scroll::-webkit-scrollbar-track{ background:color-mix(in srgb,#000 18%,transparent);border-radius:8px;margin:6px; }
  .pf-tv-scroll::-webkit-scrollbar-thumb{ background:color-mix(in srgb,#fff 38%,var(--pf-accent));border-radius:8px;border:2px solid transparent;background-clip:padding-box; }
  .pf-tv-scroll::-webkit-scrollbar-thumb:hover{ background:color-mix(in srgb,#fff 55%,var(--pf-accent));background-clip:padding-box; }
  .pf-tv-scroll{ scrollbar-width:thin; scrollbar-color:color-mix(in srgb,#fff 38%,var(--pf-accent)) color-mix(in srgb,#000 18%,transparent); }
  .pf-tv-grid{ display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 18px;justify-content:flex-start;width:fit-content;margin:0 auto; }
  .pf-tv-unit{ display:flex;gap:3px;align-items:flex-end; }
  .pf-tv-thumb{ position:relative;cursor:pointer;border-radius:4px;overflow:hidden;background:#d9cebb;
    box-shadow:0 4px 14px -6px rgba(0,0,0,.5);outline:2px solid transparent;outline-offset:2px;
    transition:transform .2s var(--pf-ease),box-shadow .2s,outline-color .18s; }
  .pf-tv-thumb img{ width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .35s; }
  .pf-tv-thumb img.loaded{ opacity:1; }
  .pf-tv-thumb .skel{ position:absolute;inset:0;background:linear-gradient(100deg,#cfc4b2 30%,#ede4d3 50%,#cfc4b2 70%);background-size:200% 100%;animation:pfsk 1.1s linear infinite; }
  @keyframes pfsk{ from{background-position:200% 0} to{background-position:-200% 0} }
  .pf-tv-thumb:hover{ transform:translateY(-4px) scale(1.03);box-shadow:0 12px 26px -8px rgba(0,0,0,.6);outline-color:color-mix(in srgb,var(--pf-accent) 60%,#fff); }
  .pf-tv-thumb.current{ outline-color:#fff;box-shadow:0 0 0 3px var(--pf-accent),0 12px 26px -8px rgba(0,0,0,.6); }
  .pf-tv-thumb.blank{ background:transparent;box-shadow:none;outline:none;pointer-events:none;cursor:default; }
  .pf-tv-badge{ position:absolute;left:50%;bottom:7px;transform:translateX(-50%);background:rgba(15,12,10,.82);color:#fff;
    font-size:11px;font-weight:600;min-width:21px;height:21px;padding:0 7px;border-radius:11px;display:flex;align-items:center;justify-content:center;
    -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);font-family:'JetBrains Mono',monospace; }
  .pf-tv-thumb.current .pf-tv-badge{ background:var(--pf-accent);color:#1a1208; }
  .pf-tv-badge.label{ font-size:9.5px;letter-spacing:.5px;text-transform:uppercase; }
  .pf-tv-here{ position:absolute;left:50%;top:7px;transform:translateX(-50%);background:#fff;color:#1a1208;font-size:9px;font-weight:700;letter-spacing:.5px;padding:3px 7px;border-radius:9px;text-transform:uppercase;opacity:0;transition:opacity .2s;white-space:nowrap; }
  .pf-tv-thumb.current .pf-tv-here{ opacity:1; }
  .pf-tv-unit.stag{ animation:pftin .4s var(--pf-ease) backwards; }
  @keyframes pftin{ from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
  .stage.blurred canvas{ filter:blur(10px) brightness(.7); transform:scale(1.02); transition:filter .4s,transform .4s; }
  canvas{ transition:filter .4s, transform .4s; }
  /* bookmark cards */
  .pf-bm-card{ display:flex;gap:14px;background:color-mix(in srgb,#000 10%,transparent);border-radius:12px;padding:12px;align-items:flex-start;
    animation:pfbmin .35s var(--pf-ease) backwards; }
  @keyframes pfbmin{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
  .pf-bm-thumb{ border-radius:5px;background:#d9cebb;flex:0 0 auto;box-shadow:0 4px 12px -5px rgba(0,0,0,.5);overflow:hidden;cursor:pointer;
    transition:transform .2s var(--pf-ease);position:relative; }
  .pf-bm-thumb:hover{ transform:scale(1.04); }
  .pf-bm-thumb img{ width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .35s; }
  .pf-bm-thumb img.loaded{ opacity:1; }
  .pf-bm-body{ flex:1;min-width:0; }
  .pf-bm-pg{ font-size:13px;font-weight:700;color:var(--pf-ink);font-family:'JetBrains Mono',monospace;margin-bottom:6px; }
  .pf-bm-note{ font-size:12.5px;color:color-mix(in srgb,var(--pf-ink) 85%,transparent);line-height:1.4;background:transparent;border:0;width:100%;resize:none;font-family:inherit;padding:0;outline:none; }
  .pf-bm-note::placeholder{ color:color-mix(in srgb,var(--pf-ink) 45%,transparent); }
  .pf-bm-noteadd{ font-size:12px;color:color-mix(in srgb,var(--pf-ink) 60%,transparent);cursor:pointer;display:inline-flex;align-items:center;gap:5px;border:0;background:transparent;font-family:inherit;padding:0; }
  .pf-bm-noteadd:hover{ color:var(--pf-ink); } .pf-bm-noteadd svg{ width:13px;height:13px; }
  .pf-bm-del{ flex:0 0 auto;background:transparent;border:0;color:color-mix(in srgb,var(--pf-ink) 55%,transparent);cursor:pointer;width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background .18s,color .18s,transform .2s var(--pf-ease); }
  .pf-bm-del:hover{ background:color-mix(in srgb,#000 18%,transparent);color:var(--pf-ink); } .pf-bm-del:active{ transform:scale(.9); } .pf-bm-del svg{ width:16px;height:16px; }
  .pf-bm-empty{ text-align:center;color:color-mix(in srgb,var(--pf-ink) 60%,transparent);font-size:13px;padding:40px 20px;line-height:1.5; }
  /* ===== search panel ===== */
  .pf-sr-head{ padding:16px 18px 12px;border-bottom:1px solid color-mix(in srgb,#000 14%,transparent); }
  .pf-sr-titlerow{ display:flex;justify-content:space-between;align-items:center;margin-bottom:10px; }
  .pf-sr-titlerow h3{ margin:0;font-size:12.5px;letter-spacing:2px;text-transform:uppercase;font-weight:600;color:var(--pf-ink);font-family:'JetBrains Mono',monospace; }
  .pf-sr-bar{ display:flex;gap:8px;align-items:center;background:#fff;border-radius:10px;padding:4px 6px 4px 14px; }
  .pf-sr-bar input{ flex:1;border:0;outline:0;font:inherit;font-size:14px;color:#222;padding:8px 0;background:transparent; }
  .pf-sr-bar .go{ background:var(--pf-accent);border:0;color:#fff;width:38px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer; }
  .pf-sr-bar .go svg{ width:18px;height:18px; }
  .pf-sr-bar .clr{ background:transparent;border:0;color:#999;cursor:pointer;padding:0;font-family:inherit;width:30px;height:30px;flex:none;display:inline-flex;align-items:center;justify-content:center;border-radius:7px; }
  .pf-sr-bar .clr svg{ width:15px;height:15px; }
  .pf-sr-bar .clr:hover{ color:#444; }
  .pf-sr-meta{ font-size:12px;color:color-mix(in srgb,var(--pf-ink) 70%,transparent);margin-top:9px;font-family:'JetBrains Mono',monospace;min-height:15px; }
  .pf-sr-body{ flex:1;overflow:auto;padding:14px 18px 20px;display:flex;flex-direction:column;gap:10px; }
  .pf-sr-body::-webkit-scrollbar{ width:10px; }
  .pf-sr-body::-webkit-scrollbar-track{ background:color-mix(in srgb,#000 18%,transparent);border-radius:8px;margin:6px; }
  .pf-sr-body::-webkit-scrollbar-thumb{ background:color-mix(in srgb,#fff 38%,var(--pf-accent));border-radius:8px;border:2px solid transparent;background-clip:padding-box; }
  .pf-sr-card{ display:flex;gap:13px;background:color-mix(in srgb,#000 10%,transparent);border-radius:12px;padding:11px;align-items:flex-start;cursor:pointer;
    transition:background .18s,transform .2s var(--pf-ease);animation:pfbmin .3s var(--pf-ease) backwards; }
  .pf-sr-card:hover{ background:color-mix(in srgb,#000 20%,transparent);transform:translateY(-2px); }
  .pf-sr-thumb{ border-radius:5px;background:#d9cebb;flex:0 0 auto;box-shadow:0 4px 12px -5px rgba(0,0,0,.5);position:relative;overflow:hidden; }
  .pf-sr-thumb img{ width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .35s; }
  .pf-sr-thumb img.loaded{ opacity:1; }
  .pf-sr-cnt{ position:absolute;top:4px;right:4px;background:var(--pf-accent);color:#fff;font-size:9.5px;font-weight:800;font-family:'JetBrains Mono',monospace;min-width:17px;height:17px;padding:0 4px;border-radius:9px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px -1px rgba(0,0,0,.5); }
  .pf-sr-cbody{ flex:1;min-width:0; }
  .pf-sr-pg{ font-size:12.5px;font-weight:700;color:var(--pf-ink);font-family:'JetBrains Mono',monospace;margin-bottom:5px; }
  .pf-sr-snip{ font-size:12.5px;color:color-mix(in srgb,var(--pf-ink) 82%,transparent);line-height:1.45; }
  .pf-sr-snip mark{ background:#ffd34d;color:#3a2400;border-radius:2px;padding:0 2px; }
  .pf-sr-empty{ text-align:center;color:color-mix(in srgb,var(--pf-ink) 60%,transparent);font-size:13px;padding:40px 20px;line-height:1.5; }
  .pf-sr-spin{ display:flex;justify-content:center;padding:30px }
  .pf-sr-spin div{ width:26px;height:26px;border:3px solid color-mix(in srgb,#fff 25%,transparent);border-top-color:#fff;border-radius:50%;animation:pfspin .7s linear infinite }
  @keyframes pfspin{ to{transform:rotate(360deg)} }
  /* on-page highlight overlay (positioned over the canvas) */
  #pfHiLayer{ position:absolute;inset:0;pointer-events:none;z-index:20;overflow:hidden; }
  .pf-hi{ position:absolute;background:rgba(255,0,179,.45);border-radius:2px;box-shadow:0 0 0 1px rgba(255,0,179,.7);
    animation:pfHiPulse 1.4s ease-in-out 3; }
  @keyframes pfHiPulse{ 0%,100%{background:rgba(255,0,179,.32)} 50%{background:rgba(255,0,179,.6)} }
  #pfHiOverlay{ position:absolute;inset:0;pointer-events:none;z-index:22;overflow:hidden; }
  #pfHsTip{ position:absolute;z-index:45;pointer-events:none;max-width:340px;
    background:rgba(20,16,14,.92);color:#fff;font-size:12px;line-height:1.3;
    padding:6px 10px;border-radius:8px;font-family:'Inter',system-ui,sans-serif;
    box-shadow:0 6px 20px -6px rgba(0,0,0,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .12s;transform:translate(-50%,-100%); }
  #pfHsTip.show{ opacity:1; }
  #pfHsTip .pfTipUrl{ color:#d8d2cc; }
  /* floating search result-navigation widget */
  #pfSrNav{ position:absolute;top:52px;left:50%;transform:translateX(-50%) translateY(-8px);z-index:48;
    display:none;align-items:center;gap:6px;padding:5px 6px 5px 12px;border-radius:999px;
    background:color-mix(in srgb,var(--pf-accent) 92%,#000);color:var(--pf-text-color);
    box-shadow:0 8px 24px -8px rgba(0,0,0,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    font-family:'Inter',system-ui,sans-serif;font-size:12.5px;opacity:0;transition:opacity .2s,transform .25s var(--pf-ease); }
  #pfSrNav.show{ display:flex;opacity:1;transform:translateX(-50%) translateY(0); }
  #pfSrNav .pfSrNavTerm{ font-weight:600;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
  #pfSrNav .pfSrNavCount{ font-family:'JetBrains Mono',monospace;font-size:11.5px;color:color-mix(in srgb,var(--pf-text-color) 75%,transparent);margin:0 2px; }
  #pfSrNav button{ -webkit-appearance:none;appearance:none;border:0;background:transparent;color:var(--pf-text-color);cursor:pointer;
    width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;transition:background .15s,transform .2s var(--pf-ease); }
  #pfSrNav button:hover{ background:color-mix(in srgb,var(--pf-text-color) 16%,transparent); } #pfSrNav button:active{ transform:scale(.88); }
  #pfSrNav button:disabled{ opacity:.35;cursor:default; } #pfSrNav button svg{ width:16px;height:16px; }
  #pfSrNav .pfSrNavClose{ width:26px;height:26px;margin-left:2px; } #pfSrNav .pfSrNavClose svg{ width:14px;height:14px; }
  /* Print modal */
  .pf-print-scrim{ position:absolute;inset:0;z-index:70;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;
    -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px); }
  .pf-print-scrim.open{ display:flex; }
  .pf-print{ width:min(560px,90vw);max-height:88%;display:flex;flex-direction:column;border-radius:14px;overflow:hidden;
    background:color-mix(in srgb,var(--pf-accent) 90%,#000);border:1px solid color-mix(in srgb,var(--pf-text-color) 14%,transparent);
    box-shadow:0 24px 70px -20px rgba(0,0,0,.85);font-family:'JetBrains Mono',monospace; }
  .pf-print-head{ display:flex;align-items:center;justify-content:space-between;padding:13px 18px;border-bottom:1px solid color-mix(in srgb,var(--pf-text-color) 14%,transparent); }
  .pf-print-head h3{ margin:0;font-size:12px;letter-spacing:2px;text-transform:uppercase;font-weight:600;color:var(--pf-ink); }
  .pf-print-head .pf-tv-close{ color:var(--pf-ink); }
  .pf-print-preview{ flex:1;min-height:200px;display:flex;align-items:center;justify-content:center;padding:18px;background:var(--pf-field);overflow:auto; }
  .pf-print-preview canvas{ max-width:100%;max-height:42vh;box-shadow:0 6px 24px -8px rgba(0,0,0,.7);background:#fff;display:block; }
  .pf-print-preview .pf-print-img{ max-width:100%;max-height:42vh;width:auto;height:auto;object-fit:contain;box-shadow:0 6px 24px -8px rgba(0,0,0,.7);background:#fff;display:block; }
  .pf-print-preview .pf-print-spin{ color:color-mix(in srgb,var(--pf-text-color) 60%,transparent);font-size:12px;letter-spacing:1px; }
  .pf-print-choices{ display:flex;gap:8px;padding:14px 18px 4px;justify-content:center;flex-wrap:wrap; }
  .pf-print-choices button{ flex:1;min-width:120px;padding:9px 10px;border-radius:8px;cursor:pointer;font-family:inherit;font-size:12px;
    background:transparent;border:1px solid color-mix(in srgb,var(--pf-text-color) 26%,transparent);
    color:color-mix(in srgb,var(--pf-text-color) 72%,transparent);transition:all .15s; }
  .pf-print-choices button:hover{ color:var(--pf-ink);background:var(--pf-hover); }
  .pf-print-choices button.active{ background:var(--pf-press);border-color:color-mix(in srgb,var(--pf-text-color) 55%,transparent);color:var(--pf-ink); }
  .pf-print-choices button[hidden]{ display:none; }
  .pf-print-go{ margin:14px 18px 18px;padding:11px;border:none;border-radius:9px;cursor:pointer;font-family:inherit;font-size:12.5px;letter-spacing:1px;
    font-weight:600;background:var(--pf-text-color);color:var(--pf-accent);transition:filter .15s; }
  .pf-print-go:hover{ filter:brightness(1.08); } .pf-print-go:disabled{ opacity:.5;cursor:default; }
  /* Custom button tooltips: black speech bubble with a little caret, on hover */
  .pf-navbar [data-tip]{ position:relative; }
  .pf-navbar [data-tip]::after{
    content:attr(data-tip); position:absolute; top:calc(100% + 9px); left:50%;
    transform:translateX(-50%) translateY(-3px); background:#1b1b1b; color:#fff;
    font-family:'Inter',system-ui,sans-serif; font-size:11.5px; line-height:1; white-space:nowrap;
    padding:6px 9px; border-radius:7px; box-shadow:0 6px 18px -6px rgba(0,0,0,.5);
    pointer-events:none; opacity:0; transition:opacity .14s var(--pf-ease), transform .14s var(--pf-ease); z-index:55; }
  .pf-navbar [data-tip]::before{
    content:''; position:absolute; top:calc(100% + 3px); left:50%;
    transform:translateX(-50%) translateY(-3px); border:5px solid transparent; border-bottom-color:#1b1b1b;
    pointer-events:none; opacity:0; transition:opacity .14s var(--pf-ease), transform .14s var(--pf-ease); z-index:55; }
  .pf-navbar [data-tip]:hover::after, .pf-navbar [data-tip]:hover::before{ opacity:1; transform:translateX(-50%) translateY(0); }
  .pf-navbar [data-tip].pf-tip-off::after, .pf-navbar [data-tip].pf-tip-off::before{ opacity:0 !important; transition:opacity .12s var(--pf-ease); }
  /* Media overlay player (YouTube/Vimeo/SoundCloud/Spotify embeds) */
  .pf-media-scrim{ position:absolute;inset:0;z-index:72;background:rgba(0,0,0,.74);display:none;align-items:center;justify-content:center;
    -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px); }
  .pf-media-scrim.open{ display:flex; }
  .pf-media{ position:relative;width:min(880px,92vw); }
  .pf-media-frame{ position:relative;width:100%;border-radius:12px;overflow:hidden;background:#000;box-shadow:0 24px 80px -20px rgba(0,0,0,.9); }
  .pf-media-frame.video{ aspect-ratio:16/9; }
  .pf-media-frame.audio{ height:170px; background:transparent;box-shadow:none; }
  .pf-media-frame iframe{ position:absolute;inset:0;width:100%;height:100%;border:0; }
  .pf-media-frame.audio iframe{ border-radius:12px; }
  .pf-media-close{ position:absolute;top:-44px;right:0;width:34px;height:34px;border:0;border-radius:50%;cursor:pointer;
    background:rgba(255,255,255,.12);color:#fff;display:flex;align-items:center;justify-content:center;transition:background .15s; }
  .pf-media-close:hover{ background:rgba(255,255,255,.24); } .pf-media-close svg{ width:18px;height:18px; }
  /* Table-of-contents panel: flush left, full height, square — a tight side panel */
  .pf-toc{ position:absolute; top:0; left:0; bottom:0; width:282px;
    display:flex; flex-direction:column; overflow:hidden; z-index:58;
    background:var(--pf-panel-bg); color:var(--pf-panel-ink);
    box-shadow:8px 0 36px -14px rgba(0,0,0,.5); border-right:1px solid color-mix(in srgb,var(--pf-panel-ink) 14%,transparent);
    font-family:'Inter',system-ui,sans-serif;
    transform:translateX(-101%); transition:transform .28s cubic-bezier(.4,0,.2,1), visibility 0s linear .28s;
    visibility:hidden; }
  .pf-toc.open{ transform:translateX(0); visibility:visible; transition:transform .28s cubic-bezier(.4,0,.2,1), visibility 0s; }
  .pf-toc-head{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid color-mix(in srgb,var(--pf-panel-ink) 12%,transparent); }
  .pf-toc-title{ font-size:11.5px; letter-spacing:1.5px; text-transform:uppercase; font-weight:600; flex:1; }
  .pf-toc-pin{ font-size:10px; display:flex; align-items:center; gap:6px; opacity:.85; cursor:pointer; white-space:nowrap; text-transform:uppercase; letter-spacing:.5px; }
  .pf-toc-pin input{ display:none; }
  .pf-toc-sw{ width:30px; height:17px; border-radius:9px; background:color-mix(in srgb,var(--pf-panel-ink) 32%,transparent); border:1px solid color-mix(in srgb,var(--pf-panel-ink) 22%,transparent); position:relative; transition:background .18s var(--pf-ease); flex:none; }
  .pf-toc-sw::after{ content:''; position:absolute; top:2px; left:2px; width:13px; height:13px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.45); transition:transform .18s var(--pf-ease); }
  .pf-toc-pin input:checked + .pf-toc-sw{ background:var(--pf-accent); border-color:transparent; }
  .pf-toc-pin input:checked + .pf-toc-sw::after{ transform:translateX(13px); }
  .pf-toc-close{ background:transparent; border:0; color:inherit; cursor:pointer; width:22px; height:22px; display:flex; align-items:center; justify-content:center; border-radius:5px; }
  .pf-toc-close:hover{ background:color-mix(in srgb,var(--pf-panel-ink) 12%,transparent); }
  .pf-toc-close svg{ width:13px; height:13px; }
  .pf-toc-list{ overflow-y:auto; padding:6px 4px 10px; }
  .pf-toc-item{ display:block; width:100%; text-align:left; background:transparent; border:0; cursor:pointer;
    color:inherit; font-family:inherit; font-size:13px; line-height:1.3; padding:7px 14px; border-radius:6px; }
  .pf-toc-item:hover{ background:color-mix(in srgb,var(--pf-panel-ink) 10%,transparent); }
  .pf-toc-item.active{ background:color-mix(in srgb,var(--pf-panel-ink) 16%,transparent); font-weight:600; }
  body.pf-mobile .console{ display:none !important; }   /* hide desktop dev/settings panel on mobile */
  body.pf-mobile .pf-navbar{ display:none !important; }
  /* The .pf-mnav top bar (50px) is an absolute overlay over a full-bleed stage, so the page
     used to fit the FULL height and creep under the bar (and overflow on short screens). Push
     the whole stage below the bar: canvas + #pfHiOverlay live inside .stage and move together,
     so computeFit reads the reduced canvas height and fits + centers the page in the band, and
     hotspot picking (getBoundingClientRect-based) stays aligned. (= .pf-mnav height.) */
  body.pf-mobile .stage{ margin-top:50px; }
  .pf-sheet-scrim{ position:absolute; inset:0; z-index:60; background:rgba(0,0,0,.45); display:none; }
  .pf-sheet-scrim.open{ display:block; }
  .pf-sheet{ position:absolute; left:0; right:0; bottom:0; z-index:61; transform:translateY(100%);
    transition:transform .26s cubic-bezier(.4,0,.2,1); background:var(--pf-panel-bg); color:var(--pf-panel-ink);
    border-radius:16px 16px 0 0; padding:6px 8px 14px; box-shadow:0 -10px 40px -12px rgba(0,0,0,.5); font-family:Inter,system-ui,sans-serif; }
  .pf-sheet.open{ transform:translateY(0); }
  .pf-sheet-handle{ width:38px; height:4px; border-radius:2px; background:color-mix(in srgb,var(--pf-panel-ink) 28%,transparent); margin:6px auto 8px; }
  .pf-sheet-row{ display:flex; align-items:center; gap:14px; width:100%; border:0; background:transparent; color:inherit;
    font-family:inherit; font-size:15px; padding:14px 16px; border-radius:12px; cursor:pointer; text-align:left; }
  .pf-sheet-row:active{ background:color-mix(in srgb,var(--pf-panel-ink) 10%,transparent); }
  .pf-sheet-row svg{ width:22px; height:22px; flex:none; opacity:.85; }
  .pf-sheet-empty{ padding:26px 16px; text-align:center; opacity:.6; font-size:14px; }
  .pf-sheet-bmrow{ display:flex; align-items:center; gap:4px; }
  .pf-sheet-bmgo{ flex:1; display:flex; align-items:center; gap:14px; border:0; background:transparent; color:inherit; font:inherit; font-size:15px; padding:13px 16px; border-radius:12px; cursor:pointer; text-align:left; }
  .pf-sheet-bmgo:active{ background:color-mix(in srgb,var(--pf-panel-ink) 10%,transparent); }
  .pf-sheet-bmgo svg{ width:20px;height:20px;flex:none;opacity:.8; }
  .pf-sheet-bmdel{ border:0;background:transparent;color:inherit;width:42px;height:42px;border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:.65; }
  .pf-sheet-bmdel:active{ background:color-mix(in srgb,var(--pf-panel-ink) 12%,transparent); }
  .pf-sheet-bmdel svg{ width:18px;height:18px; }
  #pfSheetBody{ max-height:66vh; overflow-y:auto; }
  .pf-sheet-tocitem{ display:block; width:100%; text-align:left; border:0; background:transparent; color:inherit;
    font-family:inherit; font-size:14.5px; line-height:1.35; padding:12px 16px; border-radius:10px; cursor:pointer; }
  .pf-sheet-tocitem:active{ background:color-mix(in srgb,var(--pf-panel-ink) 10%,transparent); }
  .pf-thumbgrid{ display:grid; grid-template-columns:repeat(var(--cols,2),1fr); gap:12px; padding:6px 4px; }
  .pf-thumbcell{ border:0; background:transparent; padding:0; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:5px; }
  .pf-thumbcell.cover{ grid-column:1 / -1; justify-self:center; width:48%; }
  .pf-thumbimg{ width:100%; border-radius:6px; overflow:hidden; background:color-mix(in srgb,var(--pf-panel-ink) 10%,transparent); box-shadow:0 2px 8px -3px rgba(0,0,0,.4); }
  .pf-thumbimg{ position:relative; }
  .pf-thumbimg img{ width:100%; height:100%; display:block; object-fit:contain; position:relative; z-index:1; }
  .pf-thumbskel{ position:absolute; inset:0; z-index:0;
    background:linear-gradient(100deg, color-mix(in srgb,var(--pf-panel-ink) 7%,transparent) 30%, color-mix(in srgb,var(--pf-panel-ink) 16%,transparent) 50%, color-mix(in srgb,var(--pf-panel-ink) 7%,transparent) 70%);
    background-size:220% 100%; animation:pf-skel 1.3s ease-in-out infinite; }
  @keyframes pf-skel{ 0%{background-position:150% 0} 100%{background-position:-150% 0} }
  .pf-thumbcell.current .pf-thumbimg{ outline:2px solid var(--pf-accent); outline-offset:-2px; }
  .pf-thumbbadge{ font-family:'JetBrains Mono',monospace; font-size:11px; opacity:.7; }
  .pf-srm-wrap{ position:sticky; top:0; background:var(--pf-panel-bg); padding:2px 4px 8px; z-index:1; display:flex; gap:6px; align-items:center; }
  .pf-srm-clear{ flex:none; border:0; background:transparent; color:inherit; opacity:.6; width:40px; height:40px; display:flex; align-items:center; justify-content:center; cursor:pointer; border-radius:10px; }
  .pf-srm-clear:active{ background:color-mix(in srgb,var(--pf-panel-ink) 12%,transparent); }
  .pf-srm-clear svg{ width:18px; height:18px; }
  .pf-srm-input{ flex:1; min-width:0; box-sizing:border-box; border:1px solid color-mix(in srgb,var(--pf-panel-ink) 22%,transparent); background:color-mix(in srgb,var(--pf-panel-ink) 6%,transparent); color:inherit; font:inherit; font-size:15px; padding:11px 14px; border-radius:10px; outline:none; }
  .pf-srm-input:focus{ border-color:var(--pf-accent); }
  .pf-srm-row{ display:flex; gap:12px; width:100%; border:0; background:transparent; color:inherit; font:inherit; text-align:left; padding:10px 8px; border-radius:10px; cursor:pointer; align-items:center; }
  .pf-srm-row:active{ background:color-mix(in srgb,var(--pf-panel-ink) 10%,transparent); }
  .pf-srm-thumb{ width:46px; height:60px; flex:none; border-radius:4px; overflow:hidden; background:color-mix(in srgb,var(--pf-panel-ink) 10%,transparent); }
  .pf-srm-thumb img{ width:100%; height:100%; object-fit:cover; }
  .pf-srm-cb{ flex:1; min-width:0; }
  .pf-srm-pg{ font-size:12px; font-weight:600; opacity:.8; margin-bottom:2px; }
  .pf-srm-sn{ font-size:13px; opacity:.72; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
  .pf-srm-sn mark{ background:color-mix(in srgb,var(--pf-accent) 40%,transparent); color:inherit; border-radius:2px; padding:0 1px; }
  .pf-deskmenu{ position:absolute; top:46px; right:8px; z-index:60; display:none; background:var(--pf-panel-bg); color:var(--pf-panel-ink);
    border-radius:10px; box-shadow:0 12px 36px -12px rgba(0,0,0,.5); padding:6px; min-width:170px; font-family:Inter,system-ui,sans-serif; }
  .pf-deskmenu.open{ display:block; }
  .pf-deskmenu button{ display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;color:inherit;
    font-family:inherit;font-size:13px;padding:9px 12px;border-radius:7px;cursor:pointer;text-align:left; }
  .pf-deskmenu button svg{ width:18px;height:18px; }
  .pf-deskmenu button:hover{ background:color-mix(in srgb,var(--pf-panel-ink) 10%,transparent); }
  .pf-mnav{ display:none; position:absolute; top:0; left:0; right:0; height:50px; z-index:42;
    align-items:center; justify-content:space-between; padding:0 6px; gap:4px;
    background:color-mix(in srgb,var(--pf-accent) 92%,#000); color:var(--pf-text-color);
    font-family:Inter,system-ui,sans-serif; -webkit-user-select:none; user-select:none; }
  body.pf-mobile .pf-mnav{ display:flex; }
  .pf-mnav-l,.pf-mnav-r{ display:flex; align-items:center; gap:2px; }
  .pf-mnav button{ -webkit-appearance:none;appearance:none;border:0;background:transparent;color:inherit;
    width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:10px;cursor:pointer; }
  .pf-mnav button:active{ background:color-mix(in srgb,var(--pf-text-color) 18%,transparent); }
  .pf-mnav button.active{ color:#ffd34d; }
  .pf-mnav button.active svg{ fill:currentColor; }
  .pf-mnav button svg{ width:22px;height:22px; }
  .pf-mnav-pill{ font-family:"JetBrains Mono",monospace;font-size:13px;font-weight:600;
    background:color-mix(in srgb,var(--pf-text-color) 16%,transparent);color:inherit;
    border:0;border-radius:999px;padding:8px 16px;cursor:pointer;white-space:nowrap;line-height:1; }
  .pf-mnav-pillinput{ width:56px; border:0; background:transparent; color:inherit; font:inherit; text-align:center; outline:none; -moz-appearance:textfield; }
  .pf-mnav-pillinput::-webkit-outer-spin-button,.pf-mnav-pillinput::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
  /* ===== Pageflip viewer chrome (fase 1): debug gate, bottom bar, settings panel, context menu ===== */
  :root{ --pf-brand-orange:#ff7a1a; }   /* TODO fase 3: confirm exact Pageflip brand orange */

  /* Engine debug console: hidden unless ?debug=1 (body.pf-debug set by viewer.js) */
  .console{ display:none; }
  body.pf-debug .console{ display:block; }

  /* --- Bottom bar: permanent "Powered by Pageflip" pill + settings gear --- */
  .pf-bottombar{ position:absolute; left:50%; bottom:0; transform:translateX(-50%);
    display:flex; align-items:flex-end; gap:6px; z-index:30; }
  /* Papieren tab (badge V4): fysieke tab aan de onderrand, in het papier van het boek,
     met gevouwen hoekje. #pfBbCounts is het slot voor de §8 link/media-scan ("· 12 links · 3 media"):
     verborgen tot de scan bestaat, dan verbreedt de tab vanzelf. */
  .pf-bb-pill{ position:relative; display:inline-flex; align-items:center; text-decoration:none; cursor:pointer;
    background:linear-gradient(175deg,#f6f0e4,#e9dfcc); color:#3a2d1f;
    font-size:10px; letter-spacing:.4px; line-height:1; padding:8px 16px 7px; border-radius:5px 5px 0 0;
    box-shadow:0 -3px 10px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.6);
    transform:translateY(1px); transition:padding-top .18s var(--pf-ease), filter .18s ease; }
  .pf-bb-pill b{ font-weight:500; color:#1d150c; }
  .pf-bb-pill::after{ content:""; position:absolute; top:0; right:0; width:0; height:0;        /* gevouwen hoekje */
    border-top:9px solid rgba(0,0,0,.14); border-left:9px solid transparent; border-radius:0 5px 0 0; }
  .pf-bb-pill:hover{ padding-top:11px; filter:brightness(1.04); }   /* groeit omhoog, onderrand blijft vast */
  #pfBbCounts{ display:none; color:#5a4a36; margin-left:8px; }                                  /* §8 slot */
  .pf-bb-gear{ -webkit-appearance:none; appearance:none; border:0; cursor:pointer;
    background:linear-gradient(175deg,#f6f0e4,#e9dfcc); color:#3a2d1f;
    padding:7px 9px 6px; border-radius:5px 5px 0 0;
    box-shadow:0 -3px 10px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.6);
    display:inline-flex; align-items:center; justify-content:center;
    transform:translateY(1px); transition:padding-top .18s var(--pf-ease), filter .18s ease; }
  .pf-bb-gear svg{ width:13px; height:13px; display:block; }
  /* expliciete hover-kleuren: de globale engine-regel button:hover{color:var(--paper)} (debug-console)
     wint anders van onze classes en maakt het icoon wit-op-papier (onzichtbaar). */
  .pf-bb-gear:hover{ padding-top:10px; filter:brightness(1.04); color:#3a2d1f; border-color:transparent; }
  .pf-bb-gear:focus-visible, .pf-bb-pill:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
/* Initiele-laad-voortgangskaart: paper card, gefixeerd onder het midden — de bestaande
     leaf-spinner (engine, #pfLoader) houdt het centrum; deze kaart geeft de cijfers. Dekt het
     gat waarin grote PDF's (700MB+) anders seconden lang niets concreets tonen. */
  .pf-loadcard{ position:fixed; left:50%; bottom:17%; transform:translateX(-50%);
    z-index:25; pointer-events:none;
    background:linear-gradient(175deg,#f6f0e4,#e9dfcc); color:#3a2d1f;
    border-radius:10px; padding:14px 24px 12px; min-width:240px; text-align:center;
    box-shadow:0 18px 40px -14px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.6); }
  .pf-loadcard[hidden]{ display:none; }
  .pf-loadcard-title{ font-size:11px; letter-spacing:.4px; font-weight:500; color:#1d150c; }
  .pf-loadcard-bar{ height:4px; border-radius:2px; background:rgba(0,0,0,.12); margin:11px 0 7px; overflow:hidden; position:relative; }
  .pf-loadcard-fill{ height:100%; width:0%; border-radius:2px; background:var(--pf-brand-orange); transition:width .15s linear; }
  .pf-loadcard-bar.ind .pf-loadcard-fill{ width:34%; animation:pfLoadCardSlide 1.1s ease-in-out infinite alternate; }
  @keyframes pfLoadCardSlide{ from{ transform:translateX(-12%);} to{ transform:translateX(230%);} }
  .pf-loadcard-meta{ font-size:9.5px; color:#5a4a36; min-height:12px; }
  @media (prefers-reduced-motion: reduce){ .pf-loadcard-bar.ind .pf-loadcard-fill{ animation:none; width:60%; } }

  body.pf-mobile .pf-bottombar, body.pf-mobile .pf-settings, body.pf-mobile .pf-ctx{ display:none !important; }
  /* Tooltip: zelfde zwarte bubbel als de navbar (regels hierboven), gespiegeld naar boven */
  .pf-bottombar [data-tip]{ position:relative; }
  .pf-bottombar [data-tip]::after{
    content:attr(data-tip); position:absolute; bottom:calc(100% + 9px); left:50%;
    transform:translateX(-50%) translateY(3px); background:#1b1b1b; color:#fff;
    font-family:'Inter',system-ui,sans-serif; font-size:11.5px; line-height:1; white-space:nowrap;
    padding:6px 9px; border-radius:7px; box-shadow:0 6px 18px -6px rgba(0,0,0,.5);
    pointer-events:none; opacity:0; transition:opacity .14s var(--pf-ease), transform .14s var(--pf-ease); z-index:55; }
  .pf-bottombar [data-tip]::before{
    content:''; position:absolute; bottom:calc(100% + 3px); left:50%;
    transform:translateX(-50%) translateY(3px); border:5px solid transparent; border-top-color:#1b1b1b;
    pointer-events:none; opacity:0; transition:opacity .14s var(--pf-ease), transform .14s var(--pf-ease); z-index:55; }
  .pf-bottombar [data-tip]:hover::after, .pf-bottombar [data-tip]:hover::before{ opacity:1; transform:translateX(-50%) translateY(0); }
  /* Edge-aware tooltips: bij knoppen tegen de schermrand zou de gecentreerde bubbel buiten beeld
     clippen ("ge overview"). viewer.js zet pf-tip-left / pf-tip-right op hover; de bubbel lijnt dan
     uit op de knoprand, het pijltje blijft op de knop gecentreerd. */
  .pf-navbar [data-tip].pf-tip-left::after{ left:0; transform:translateY(-3px); }
  .pf-navbar [data-tip].pf-tip-left:hover::after{ transform:translateY(0); }
  .pf-navbar [data-tip].pf-tip-right::after{ left:auto; right:0; transform:translateY(-3px); }
  .pf-navbar [data-tip].pf-tip-right:hover::after{ transform:translateY(0); }
  .pf-bottombar [data-tip].pf-tip-left::after{ left:0; transform:translateY(3px); }
  .pf-bottombar [data-tip].pf-tip-left:hover::after{ transform:translateY(0); }
  .pf-bottombar [data-tip].pf-tip-right::after{ left:auto; right:0; transform:translateY(3px); }
  .pf-bottombar [data-tip].pf-tip-right:hover::after{ transform:translateY(0); }

  /* --- Settings panel: slides up from the bottom bar, themed to the navbar colour --- */
  .pf-settings{ position:absolute; left:50%; bottom:44px; transform:translateX(-50%) translateY(10px);
    width:min(92%, 380px); max-height:calc(100% - 110px); overflow:auto;
    background:var(--pf-accent); color:var(--pf-text-color);
    border:1px solid color-mix(in srgb, var(--pf-text-color) 16%, transparent);
    border-radius:14px; box-shadow:0 22px 60px -18px rgba(0,0,0,.65);
    opacity:0; pointer-events:none; z-index:52;
    transition:opacity .2s ease, transform .24s var(--pf-ease); }
  .pf-settings.open{ opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
  .pf-set-head{ display:flex; align-items:center; justify-content:space-between; padding:13px 16px 9px; }
  .pf-set-head h3{ margin:0; font-size:12px; font-weight:600; letter-spacing:1.4px; text-transform:uppercase; opacity:.92; }
  .pf-set-close{ -webkit-appearance:none; appearance:none; border:0; background:transparent; cursor:pointer;
    color:var(--pf-text-color); width:28px; height:28px; border-radius:8px;
    display:inline-flex; align-items:center; justify-content:center; transition:background .15s ease; }
  .pf-set-close svg{ width:15px; height:15px; }
  .pf-set-close:hover{ background:var(--pf-hover); color:var(--pf-text-color); border-color:transparent; }
  .pf-set-body{ padding:0 8px 8px; }
  .pf-set-row{ display:flex; align-items:center; justify-content:space-between; gap:14px;
    padding:9px 8px; border-radius:9px; cursor:pointer; transition:background .15s ease; }
  .pf-set-row:hover{ background:var(--pf-hover); }
  .pf-set-row.disabled{ opacity:.45; cursor:default; }
  .pf-set-row.disabled:hover{ background:transparent; }
  .pf-set-text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
  .pf-set-name{ font-size:12.5px; font-weight:500; }
  .pf-set-sub{ font-size:10.5px; opacity:.66; line-height:1.35; }
  .pf-set-select{ flex:0 0 auto; max-width:150px; font-family:inherit; font-size:11.5px;
    background:var(--pf-field); color:var(--pf-text-color);
    border:1px solid color-mix(in srgb, var(--pf-text-color) 22%, transparent);
    border-radius:7px; padding:6px 8px; cursor:pointer; }
  .pf-set-select option{ color:#1c1c1f; background:#f4f4f5; }
  .pf-sw{ position:relative; width:34px; height:20px; flex:0 0 auto; }
  .pf-sw input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
  .pf-set-row.disabled .pf-sw input{ cursor:default; }
  .pf-sw-knob{ position:absolute; inset:0; border-radius:999px; pointer-events:none;
    background:color-mix(in srgb, var(--pf-text-color) 24%, transparent); transition:background .18s ease; }
  .pf-sw-knob::after{ content:""; position:absolute; top:3px; left:3px; width:14px; height:14px; border-radius:50%;
    background:var(--pf-text-color); transition:transform .18s var(--pf-ease); }
  .pf-sw input:checked + .pf-sw-knob{ background:var(--pf-brand-orange); }
  .pf-sw input:checked + .pf-sw-knob::after{ transform:translateX(14px); background:#fff; }
  .pf-sw input:focus-visible + .pf-sw-knob{ outline:2px solid var(--pf-text-color); outline-offset:2px; }
  .pf-set-action{ -webkit-appearance:none; appearance:none; width:calc(100% - 16px); margin:4px 8px 6px; cursor:pointer;
    display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:9px;
    background:var(--pf-field); color:var(--pf-text-color); font-family:inherit; font-size:12px; font-weight:500;
    border:1px solid color-mix(in srgb, var(--pf-text-color) 18%, transparent); transition:background .15s ease; }
  .pf-set-action svg{ width:15px; height:15px; flex:0 0 auto; }
  .pf-set-action:hover{ background:var(--pf-hover); color:var(--pf-text-color); border-color:color-mix(in srgb, var(--pf-text-color) 18%, transparent); }
  .pf-set-footer{ display:flex; flex-direction:column; gap:5px; padding:10px 16px 13px;
    border-top:1px solid color-mix(in srgb, var(--pf-text-color) 14%, transparent); }
  .pf-set-footer a{ color:var(--pf-text-color); text-decoration:none; font-size:10.5px; opacity:.72; transition:opacity .15s ease; }
  .pf-set-footer a b{ font-weight:600; }
  .pf-set-footer a:hover{ opacity:1; }

  /* --- Custom context menu: themed to the navbar colour --- */
  .pf-ctx{ position:fixed; min-width:196px; display:none; z-index:80; padding:6px;
    background:var(--pf-accent); color:var(--pf-text-color);
    border:1px solid color-mix(in srgb, var(--pf-text-color) 16%, transparent);
    border-radius:11px; box-shadow:0 18px 50px -14px rgba(0,0,0,.6); }
  .pf-ctx.open{ display:block; }
  .pf-ctx button{ -webkit-appearance:none; appearance:none; width:100%; border:0; background:transparent; cursor:pointer;
    display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px;
    color:var(--pf-text-color); font-family:inherit; font-size:12px; text-align:left; transition:background .14s ease; }
  .pf-ctx button:hover{ background:var(--pf-hover); color:var(--pf-text-color); border-color:transparent; }
  .pf-ctx button.disabled{ opacity:.4; cursor:default; }
  .pf-ctx button.disabled:hover{ background:transparent; }
  .pf-ctx button svg{ width:15px; height:15px; flex:0 0 auto; }
  .pf-ctx-sep{ height:1px; margin:5px 8px; background:color-mix(in srgb, var(--pf-text-color) 16%, transparent); }
  .pf-ctx-brand{ font-size:11px !important; opacity:.78; }
  .pf-ctx-brand b{ font-weight:600; }

  @media (prefers-reduced-motion: reduce){
    .pf-settings, .pf-bb-pill, .pf-bb-gear, .pf-sw-knob, .pf-sw-knob::after{ transition:none; }
  }