/* =====================================================================
   HOLIOO UI v2 — soft pastel design system
   Tokens → base → shell → components → screens → camera → viewers
   ===================================================================== */

:root{
  /* Colors */
  --bg:#F7F7FB;
  --surface:#FFFFFF;
  --ink:#1D2140;
  --muted:#8A8FA3;
  --line:#ECEDF4;
  --accent:#5B67F1;
  --accent-soft:#EEF0FF;
  --capture:#FF8A4C;
  --capture-2:#FF6F47;
  --danger:#E5486B;

  --lavender:#EEE9FF; --lavender-fg:#7B61FF;
  --mint:#E8FAF2;     --mint-fg:#1FA67A;
  --peach:#FFF1E7;    --peach-fg:#FF6F47;
  --pink:#FDECEF;     --pink-fg:#E5486B;
  --yellow:#FFF7DA;   --yellow-fg:#C98C00;
  --sky:#EAF4FF;      --sky-fg:#3A86F0;

  /* Spacing scale: 4 / 8 / 12 / 16 / 20 / 24 / 32 */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;

  /* Radii */
  --r-chip:14px;--r-btn:18px;--r-md:22px;--r-lg:28px;--r-nav:32px;

  /* Shadows */
  --shadow-sm:0 2px 8px rgba(29,33,64,.04),0 6px 18px rgba(29,33,64,.05);
  --shadow-md:0 10px 30px rgba(29,33,64,.08);
  --shadow-lg:0 18px 50px rgba(29,33,64,.12);

  /* z-index scale: every layer says where it belongs. Bars (selection, undo) sit above pages and full-screen tools but under sheets;
     body.sheet-open hides them outright. Toasts and the offline banner are above everything. */
  --z-nav:40;--z-fab:40;--z-menu:60;--z-viewer:80;--z-full:90;--z-overlay:100;--z-bar:150;--z-rename:180;--z-sheet:200;--z-banner:250;--z-toast:300;
  /* The one slot the floating bars share (selection bar, undo bar); --float-shift moves it beside the desk sidebar. */
  --float-bottom:calc(84px + env(safe-area-inset-bottom));--float-shift:0px;
  --nav-h:68px;
  --safe-b:env(safe-area-inset-bottom,0px);
  /* Bar bottom edge: overlaps the home-indicator zone like iOS tab bars, never closer than 10px to the screen edge. */
  --nav-bottom:max(10px,calc(var(--safe-b) - 12px));
  --ease:cubic-bezier(.2,.8,.2,1);

  font-family:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  font-synthesis:none;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{margin:0;min-width:320px;min-height:100%;background:var(--bg)}
body{overscroll-behavior-y:none;-webkit-tap-highlight-color:transparent}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
button:disabled{opacity:.45;cursor:not-allowed}
a{color:inherit}
[hidden],.hidden{display:none!important}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ico{display:block;flex:none}
:focus-visible{outline:3px solid rgba(91,103,241,.35);outline-offset:2px}

/* Tone tokens — any element with .tone-x gets --tone-bg / --tone-fg */
.tone-lavender{--tone-bg:var(--lavender);--tone-fg:var(--lavender-fg)}
.tone-mint{--tone-bg:var(--mint);--tone-fg:var(--mint-fg)}
.tone-peach{--tone-bg:var(--peach);--tone-fg:var(--peach-fg)}
.tone-pink{--tone-bg:var(--pink);--tone-fg:var(--pink-fg)}
.tone-yellow{--tone-bg:var(--yellow);--tone-fg:var(--yellow-fg)}
.tone-sky{--tone-bg:var(--sky);--tone-fg:var(--sky-fg)}
.tone-neutral{--tone-bg:#F0F1F6;--tone-fg:var(--muted)}
.tone-accent{--tone-bg:var(--accent-soft);--tone-fg:var(--accent)}

/* ---------- App shell ---------- */
.app-shell{min-height:100dvh}
.main{width:min(100%,640px);margin:0 auto;padding:calc(var(--s3) + env(safe-area-inset-top)) var(--s4) calc(var(--nav-h) + var(--nav-bottom) + var(--s4))}
.hidden-chrome .bottom-nav{display:none}
.hidden-chrome .main{padding-bottom:calc(var(--s6) + env(safe-area-inset-bottom))}
.capture-active .main{padding:0;width:100%;max-width:none}

.screen{display:flex;flex-direction:column;gap:var(--s3);animation:screen-in .28s var(--ease)}
@keyframes screen-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- Bottom navigation ---------- */
/* No shaking while the page scrolls on iPhone: centered on whole pixels (left/right insets instead of
   translateX(-50%), which put it on half pixels), on its own layer, and the blurred glass is a layer
   behind it with exactly the bar's shape (the capture button sticking out above is not inside it).
   Equal columns whatever the labels: the capture button no longer shifts when a label turns bold. */
.bottom-nav{
  position:fixed;z-index:var(--z-nav);left:max(20px,calc(50% - 240px));right:max(20px,calc(50% - 240px));
  transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;isolation:isolate;
  bottom:var(--nav-bottom);
  height:var(--nav-h);
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;
  padding:0 var(--s2) 10px;
  border-radius:var(--r-nav);
  border:1px solid transparent;
}
.bottom-nav::before{
  content:"";position:absolute;z-index:-1;inset:-1px;border-radius:inherit;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:var(--shadow-lg);
}
/* Content scrolling toward the bar: it blurs and fades from the top edge of the middle camera button down, behind the bar. */
.bottom-nav::after{content:"";position:absolute;z-index:-2;pointer-events:none;left:calc(-1 * max(20px,calc(50vw - 240px)));width:100vw;bottom:calc(-1 * var(--nav-bottom));height:calc(var(--nav-h) + var(--nav-bottom) + 34px + 40px);background:color-mix(in srgb,var(--bg) 78%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 62%);mask-image:linear-gradient(to bottom,transparent 0,#000 62%)}
.nav-item{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;height:100%;color:var(--muted);transition:color .2s var(--ease),transform .15s var(--ease)}
.nav-item:active{transform:scale(.94)}
.nav-icon{display:grid;place-items:center;width:28px;height:28px}
.nav-item small{font-size:11px;font-weight:600;line-height:1;letter-spacing:-.01em;white-space:nowrap}
.nav-item.active{color:var(--accent)}
.nav-item.active small{font-weight:700}
.nav-item.active .nav-icon{position:relative}
.nav-item.active .nav-icon::after{content:"";position:absolute;bottom:-3px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--accent);opacity:0}
.nav-capture{position:relative}
.capture-orb{
  display:grid;place-items:center;width:60px;height:60px;margin-top:-34px;border-radius:50%;
  color:#fff;background:linear-gradient(145deg,#FFA062 0%,var(--capture) 45%,var(--capture-2) 100%);
  box-shadow:0 10px 24px rgba(255,111,71,.38),0 0 0 6px rgba(255,255,255,.9);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.nav-capture:hover .capture-orb{box-shadow:0 12px 30px rgba(255,111,71,.48),0 0 0 6px rgba(255,255,255,.9)}
.nav-capture.active{color:var(--capture-2)}

/* ---------- Radial menu (ui/radial-menu.js) + Quick Capture (features/quick-capture.js) ---------- */
/* Any trigger: the finger stays on it during the gesture — no scroll, callout, text selection or tap flash. */
.radial-trigger{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.radial-trigger *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.qc-trigger{position:relative;flex:none;display:flex;flex-direction:column;align-items:center;gap:8px;width:84px;padding:4px 0 0}
.qc-trigger-orb{position:relative;display:grid;place-items:center;width:60px;height:60px;border-radius:50%;color:#fff;background:linear-gradient(145deg,#8C96FF 0%,var(--accent) 60%,#4A55E0 100%);box-shadow:0 10px 22px rgba(91,103,241,.35),0 0 0 5px rgba(255,255,255,.85);transition:transform .15s var(--ease)}
.qc-trigger-orb::before{content:"";position:absolute;inset:-11px;border-radius:50%;border:2px dashed rgba(91,103,241,.4)}
.qc-trigger small{font-size:11px;font-weight:700;line-height:1.1;color:#4B5075;white-space:nowrap}
.qc-trigger.radial-active .qc-trigger-orb{transform:scale(1.08)}
.qc-trigger:focus-visible{outline:none}
.qc-trigger:focus-visible .qc-trigger-orb{box-shadow:0 10px 22px rgba(91,103,241,.35),0 0 0 4px #fff,0 0 0 7px var(--accent)}

html.radial-lock,html.radial-lock body{overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.radial{position:fixed;z-index:var(--z-overlay);inset:0;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.radial[data-mode="gesture"]{pointer-events:none}
.radial-backdrop{position:absolute;inset:0;background:rgba(29,33,64,.46);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;transition:opacity .15s var(--ease)}
.radial.open .radial-backdrop{opacity:1}
.radial-center{position:absolute;display:grid;place-items:center;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;color:#fff;background:linear-gradient(145deg,#8C96FF 0%,var(--accent) 60%,#4A55E0 100%);box-shadow:0 0 0 6px rgba(255,255,255,.9);transition:transform .15s var(--ease),background .15s}
.radial.center-hot .radial-center{transform:scale(1.12);background:var(--ink)}
.radial-center:focus-visible{outline:3px solid #fff;outline-offset:4px}
.radial-item{
  position:absolute;display:grid;place-items:center;width:var(--s,56px);height:var(--s,56px);border-radius:50%;
  background:#fff;color:var(--ink);box-shadow:0 8px 22px rgba(29,33,64,.2),inset 0 0 0 3px var(--c);
  transform:translate(-50%,-50%) scale(.35);opacity:0;
  transition:transform .15s var(--ease),opacity .15s var(--ease),background .12s,color .12s,box-shadow .12s;
}
.radial.open .radial-item{transform:translate(-50%,-50%) translate(var(--dx),var(--dy));opacity:1}
.radial.open .radial-item.hot{transform:translate(-50%,-50%) translate(var(--dx),var(--dy)) scale(1.2);z-index:2}
.radial-item.hot,.radial-item.parent{background:var(--c);color:var(--fg);box-shadow:0 10px 26px rgba(29,33,64,.28),inset 0 0 0 3px rgba(255,255,255,.55)}
.radial.radial-haptic-open .radial-center,.radial.radial-haptic-open .radial-item{animation:radialHapticOpen .16s var(--ease)}
.radial-item.radial-haptic-hover{animation:radialHapticHover .13s var(--ease)}
html.radial-haptic-confirm body{animation:radialHapticConfirm .2s var(--ease)}
.radial.open .radial-item.pre,.radial-item.pre{transform:translate(-50%,-50%) translate(var(--px),var(--py)) scale(.35);opacity:0}
.radial.closing .radial-item{transform:translate(-50%,-50%) scale(.35);opacity:0}
.radial-dot{max-width:88%;overflow:hidden;font-size:calc(var(--s,56px)*var(--k,.3));font-weight:800;line-height:1.25;letter-spacing:-.02em;white-space:nowrap;text-overflow:clip}
.radial-item small{position:absolute;top:calc(100% + 5px);left:50%;transform:translateX(-50%);max-width:calc(var(--s,56px) + 12px);padding:2px 6px;border-radius:8px;background:rgba(255,255,255,.94);color:var(--ink);font-size:11px;font-weight:700;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.radial-item.marked::after{content:"";position:absolute;top:1px;right:1px;width:12px;height:12px;border-radius:50%;background:var(--capture-2);border:2px solid #fff}
.radial-item:focus-visible{outline:3px solid #fff;outline-offset:3px}
/* Selection lens: a small liquid glass under the finger (ui/radial-menu.js, lensPoint). */
.radial-lens{position:absolute;left:0;top:0;border-radius:50%;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.55);-webkit-backdrop-filter:blur(3px) saturate(1.6);backdrop-filter:blur(3px) saturate(1.6);opacity:0;pointer-events:none;transform-origin:50% 50%;transition:opacity .12s;will-change:transform}
.radial-lens-label{position:absolute;left:0;top:0;z-index:5;padding:3px 9px;border-radius:999px;background:#fff;color:var(--ink);font-size:12px;font-weight:700;line-height:1.3;white-space:nowrap;box-shadow:0 4px 12px rgba(29,33,64,.2);opacity:0;pointer-events:none;transition:opacity .12s}
.radial-item .radial-dot{transition:transform .15s var(--ease)}
.radial-item.lensed .radial-dot{transform:scale(1.2)}
.radial-title{position:absolute;display:flex;flex-direction:column;align-items:center;gap:2px;width:max-content;max-width:min(88vw,360px);padding:10px 16px;border-radius:18px;background:rgba(255,255,255,.97);box-shadow:var(--shadow-md);text-align:center;pointer-events:none;transform:translate(-50%,-4px);opacity:0;transition:opacity .15s,transform .15s var(--ease)}
.radial.open .radial-title{opacity:1;transform:translate(-50%,0)}
.radial.item-menu .radial-backdrop{background:rgba(29,33,64,.5);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.item-menu-lift{position:fixed!important;margin:0!important;box-sizing:border-box;pointer-events:none;transform-origin:center;transition:transform .15s var(--ease),filter .15s var(--ease),box-shadow .15s var(--ease)}
.item-menu-lift.on{transform:scale(1.05);filter:brightness(1.08);box-shadow:0 14px 34px rgba(29,33,64,.4)}
.radial.closing .item-menu-lift{transform:none;filter:none;box-shadow:none}
.item-menu-proxy{position:fixed;left:-10px;top:-10px;width:2px;height:2px;opacity:0}
[data-item-menu]{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.inline-rename{position:fixed;z-index:var(--z-rename);box-sizing:border-box;padding:2px 8px;border:2px solid var(--accent);border-radius:10px;background:#fff;color:var(--ink);outline:none;box-shadow:var(--shadow-md)}
.radial-title b{max-width:100%;overflow:hidden;font-size:15px;font-weight:800;letter-spacing:-.01em;white-space:nowrap;text-overflow:ellipsis}
.radial-title span{font-size:12.5px;font-weight:600;color:var(--muted)}
.radial.closing .radial-backdrop,.radial.closing .radial-title{opacity:0}
@keyframes radialHapticOpen{0%,100%{filter:brightness(1)}45%{filter:brightness(1.18) saturate(1.08)}}
@keyframes radialHapticHover{0%,100%{filter:brightness(1)}45%{filter:brightness(1.28) saturate(1.12)}}
@keyframes radialHapticConfirm{0%,100%{filter:brightness(1)}35%{filter:brightness(1.06) saturate(1.04)}}

.qc-bubble{position:fixed;z-index:95;width:max-content;max-width:min(300px,calc(100vw - 32px));padding:12px 16px;border-radius:16px;background:var(--ink);color:#fff;font-size:14px;font-weight:600;line-height:1.35;text-align:center;box-shadow:var(--shadow-lg);transform:translateX(-50%);animation:qc-pop .2s var(--ease)}
.qc-bubble::after{content:"";position:absolute;left:calc(50% + var(--ax,0px));bottom:-6px;width:12px;height:12px;margin-left:-6px;border-radius:2px;background:var(--ink);transform:rotate(45deg)}
.qc-bubble.below::after{top:-6px;bottom:auto}
.qc-bubble p{margin:0}
.qc-bubble-btn{display:inline-flex;align-items:center;gap:6px;height:38px;margin-top:10px;padding:0 14px;border-radius:12px;background:#fff;color:var(--ink);font-size:14px;font-weight:700}
.qc-bubble-btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@keyframes qc-pop{from{opacity:0;transform:translate(-50%,6px)}to{opacity:1;transform:translate(-50%,0)}}

/* ---------- Header ---------- */
.page-header{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:44px}
.page-header-large{margin:0;font-size:30px;line-height:1.1;font-weight:800;letter-spacing:-.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.page-header-left,.page-header-right{display:flex;align-items:center;gap:var(--s2);min-width:0}
.page-header-title{font-size:17px;font-weight:700;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wordmark{position:relative;display:inline-block;align-self:flex-start;font-size:26px;font-weight:800;letter-spacing:-.05em;color:var(--ink)}
.wordmark i{position:absolute;right:-9px;top:5px;width:7px;height:7px;border-radius:50%;background:var(--capture)}
.wordmark.large{font-size:34px}
.icon-btn{position:relative;display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm);transition:transform .15s var(--ease)}
.icon-btn:active{transform:scale(.94)}
.icon-btn.flat{box-shadow:none;background:transparent;color:var(--muted);width:40px;height:40px}
.icon-btn-badge{position:absolute;top:4px;right:3px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--capture-2);color:#fff;font-size:10px;font-weight:700;line-height:18px;border:2px solid var(--surface)}
.avatar-btn{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:linear-gradient(145deg,#8C95FF,var(--accent));color:#fff;font-weight:700;font-size:16px;box-shadow:var(--shadow-sm)}
.avatar-btn{overflow:hidden}
.avatar-btn .avatar-image{width:100%;height:100%;object-fit:cover;display:block}
.sync-dot{position:absolute;right:0;bottom:1px;width:12px;height:12px;border-radius:50%;background:#C3C6D4;border:2px solid var(--bg)}
.sync-dot.online{background:var(--mint-fg)}
.sync-dot.pending{background:var(--capture)}
.sync-dot.error{background:var(--danger)}
.sync-dot.offline{background:#6F7385}

/* ---------- Typography ---------- */
.page-intro{display:flex;flex-direction:column;gap:2px}
.greeting{margin:0;font-size:15px;font-weight:500;color:var(--muted)}
.eyebrow{margin:0;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.hero-title{margin:0;font-size:26px;line-height:1.1;font-weight:800;letter-spacing:-.04em}
.lead{margin:0;font-size:14px;line-height:1.45;color:var(--muted)}
.meta-line{display:flex;align-items:center;gap:6px;margin:0;font-size:13px;color:var(--muted)}
.small{font-size:12px;color:var(--muted);line-height:1.5}

.section-title-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-top:var(--s1)}
.section-title{margin:0;font-size:18px;font-weight:700;letter-spacing:-.03em}
.section-title .count{display:inline-grid;place-items:center;min-width:24px;height:22px;padding:0 7px;margin-left:4px;border-radius:11px;background:var(--accent-soft);color:var(--accent);font-size:12px;vertical-align:2px}
/* Text buttons: 44 px to tap (recommended size) while taking no more room than the text. */
.link-btn{display:inline-flex;align-items:center;min-height:44px;margin:-6px -4px;padding:0 6px;font-size:14px;font-weight:600;color:var(--accent)}

/* ---------- Search & chips ---------- */
.search-bar{display:flex;align-items:center;gap:var(--s3);height:46px;padding:0 var(--s4);border-radius:var(--r-btn);background:var(--surface);box-shadow:var(--shadow-sm);color:var(--muted)}
.search-bar input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;font-size:15px;color:var(--ink)}
.search-bar input::placeholder{color:var(--muted)}
.search-bar:focus-within{box-shadow:0 0 0 2px rgba(91,103,241,.25),var(--shadow-sm)}
.chips{display:flex;gap:var(--s2);overflow-x:auto;margin:0 calc(-1 * var(--s4));padding:2px var(--s4) 4px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;height:34px;padding:0 14px;border-radius:var(--r-chip);background:var(--surface);color:var(--muted);font-size:13px;font-weight:600;box-shadow:inset 0 0 0 1px var(--line);transition:background .2s var(--ease),color .2s var(--ease)}
.chip.active{background:var(--accent);color:#fff;box-shadow:none}

/* ---------- Primitives ---------- */
.icon-badge{display:grid;place-items:center;flex:none;border-radius:16px;background:var(--tone-bg,var(--lavender));color:var(--tone-fg,var(--lavender-fg))}
.icon-badge.sm{width:36px;height:36px;border-radius:12px}
.icon-badge.md{width:42px;height:42px;border-radius:14px}
.icon-badge.lg{width:48px;height:48px;border-radius:16px}

.tag{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:12px;font-size:11px;font-weight:700;white-space:nowrap;background:var(--tone-bg);color:var(--tone-fg);flex:none}
.tags{display:flex;flex-wrap:wrap;gap:6px}

.progress{display:block;height:8px;border-radius:4px;background:rgba(29,33,64,.07);overflow:hidden}
.progress i{display:block;height:100%;border-radius:inherit;background:var(--tone-fg,var(--accent));transition:width .5s var(--ease)}

.action-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:48px;padding:0 var(--s5);border-radius:var(--r-btn);font-size:16px;font-weight:600;letter-spacing:-.01em;transition:transform .15s var(--ease),box-shadow .2s var(--ease),background .2s}
.action-btn.full{width:100%}
.action-btn:active{transform:scale(.98)}
.action-btn.primary{background:var(--accent);color:#fff;box-shadow:0 10px 24px rgba(91,103,241,.3)}
.action-btn.capture{background:linear-gradient(135deg,var(--capture),var(--capture-2));color:#fff;box-shadow:0 10px 24px rgba(255,111,71,.3)}
.action-btn.soft{background:var(--accent-soft);color:var(--accent)}
.action-btn.ghost{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}
.action-btn.danger{background:var(--danger);color:#fff}
.button-stack{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s1)}
.action-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}

.notice{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);border-radius:var(--r-md);background:var(--tone-bg,var(--peach));color:var(--ink);font-size:13px;line-height:1.45}
.notice > .ico{color:var(--tone-fg,var(--peach-fg))}
.notice span{flex:1}

.empty-state{display:flex;flex-direction:column;align-items:center;gap:var(--s2);padding:var(--s6) var(--s5);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-sm);text-align:center}
.empty-state strong{margin-top:var(--s2);font-size:17px}
.empty-state p{margin:0 0 var(--s2);color:var(--muted);font-size:14px;line-height:1.5}

/* ---------- Cards ---------- */
.hero-card{position:relative;display:flex;align-items:center;gap:var(--s3);padding:var(--s4) var(--s5);border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(135deg,#E9E6FF 0%,#EEF0FF 45%,#E6F3FF 100%);box-shadow:var(--shadow-md)}
.hero-card::before{content:"";position:absolute;right:-60px;bottom:-80px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.8),rgba(255,255,255,0) 70%)}
.hero-card-copy{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.hero-label{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--accent)}
.hero-card h2{margin:0;font-size:20px;line-height:1.15;font-weight:800;letter-spacing:-.03em}
.hero-card p{margin:0;font-size:13px;color:#5E6380}
.hero-cta{display:inline-flex;align-items:center;gap:var(--s2);height:38px;margin-top:var(--s2);padding:0 var(--s4);border-radius:var(--r-btn);background:var(--accent);color:#fff;font-size:15px;font-weight:600;box-shadow:0 10px 22px rgba(91,103,241,.35);transition:transform .15s var(--ease)}
.hero-cta:active{transform:scale(.97)}
.hero-art{position:relative;width:84px;flex:none}
.hero-art svg{width:100%;height:auto;display:block}

.category-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.category-card{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:var(--s3);border-radius:var(--r-md);background:var(--tone-bg);text-align:left;transition:transform .15s var(--ease)}
.category-card:active,.course-card:active,.list-card:active,.collection-card:active,.folder-card:active,.inbox-card:active{transform:scale(.98)}
.category-card .icon-badge{background:var(--surface);margin-bottom:var(--s1);width:36px;height:36px;border-radius:12px}
.category-card strong{font-size:15px;font-weight:700;line-height:1.2;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.category-card small{font-size:12px;color:#6C7190;line-height:1.3}
.category-card .progress{width:100%;margin-top:4px;background:rgba(255,255,255,.8)}

.list-stack,.card-stack{display:flex;flex-direction:column;gap:var(--s3)}
.list-card{display:flex;align-items:center;gap:var(--s3);width:100%;min-height:60px;padding:var(--s2) var(--s4) var(--s2) var(--s3);border-radius:var(--r-md);background:var(--surface);box-shadow:var(--shadow-sm);text-align:left;transition:transform .15s var(--ease)}
.list-card.static{cursor:default}
.list-card.success{background:var(--mint)}
.list-card-copy{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.list-card-copy strong{font-size:16px;font-weight:600;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list-card-copy small{font-size:13px;color:var(--muted);line-height:1.35}
.chev{color:#B9BCCB;flex:none}
.file-card{padding:0 var(--s2) 0 0}
.file-open{display:flex;align-items:center;gap:var(--s3);flex:1;min-width:0;min-height:60px;padding:var(--s2) var(--s3);text-align:left}
.fav-star{color:var(--yellow-fg)}
.fav-star .ico{fill:currentColor}

.course-card{display:flex;flex-direction:column;gap:var(--s3);width:100%;padding:14px;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-sm);text-align:left;transition:transform .15s var(--ease)}
.course-card-top{display:flex;align-items:center;gap:var(--s3)}
.course-card-copy{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.course-card-copy strong{font-size:17px;font-weight:700;letter-spacing:-.02em}
.course-card-copy small{font-size:13px;color:var(--muted)}
.course-card-progress{display:flex;align-items:center;gap:var(--s3)}
.course-card-progress .progress{flex:1}
.course-card-progress b{font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap}
.course-card-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);flex-wrap:wrap}
.course-card-foot > small{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted)}

.stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
.stat-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
/* One compact row of four: icon + number side by side, label below. */
.stat-grid.four{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2)}
.stat-grid.four .stat-card{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:6px;row-gap:4px;padding:10px}
.stat-grid.four .icon-badge{width:26px;height:26px;border-radius:9px;margin:0}
.stat-grid.four .icon-badge .ico{width:15px;height:15px}
.stat-grid.four strong{font-size:18px}
.stat-grid.four small{grid-column:1 / -1;font-size:11px;line-height:1.25}
.stat-card{display:flex;flex-direction:column;align-items:flex-start;gap:4px;height:100%;padding:var(--s3);border-radius:var(--r-md);background:var(--tone-bg);text-align:left}
.stat-card .icon-badge{background:var(--surface);margin-bottom:2px}
.stat-card strong{font-size:22px;font-weight:800;letter-spacing:-.03em;line-height:1}
.stat-card small{font-size:12px;color:#6C7190;font-weight:500}
.stat-tile{display:block;text-align:left;border-radius:var(--r-md);transition:transform .15s var(--ease)}
.stat-tile:active{transform:scale(.97)}

.collection-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
.collection-card{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:104px;padding:var(--s3);border-radius:var(--r-md);background:var(--tone-bg);text-align:left;transition:transform .15s var(--ease)}
.collection-card .icon-badge{background:var(--surface);margin-bottom:auto}
.collection-card strong{font-size:15px;font-weight:700;margin-top:var(--s3)}
.collection-card small{font-size:12px;color:#6C7190}

.detail-hero{display:flex;align-items:center;gap:var(--s3);padding:var(--s4);border-radius:var(--r-lg);background:var(--tone-bg)}
.detail-hero .icon-badge{background:var(--surface)}
.detail-hero .hero-title{font-size:22px}

.success-hero{display:flex;flex-direction:column;align-items:center;gap:4px;padding:var(--s2) 0;text-align:center}
.success-hero .icon-badge{margin-bottom:var(--s2)}

/* ---------- Files ---------- */
.storage-card{display:flex;align-items:center;gap:var(--s3);padding:var(--s3);border-radius:var(--r-md);background:var(--surface);box-shadow:var(--shadow-sm)}
.storage-copy{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.storage-copy strong{font-size:15px;font-weight:700}
.storage-copy small{font-size:12px;color:var(--muted)}
.storage-card .icon-btn{box-shadow:none;background:var(--sky);color:var(--sky-fg)}
.folder-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
.folder-card{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:var(--s3);border-radius:var(--r-md);background:var(--tone-bg);color:var(--tone-fg);text-align:left;transition:transform .15s var(--ease)}
.folder-card .ico{margin-bottom:var(--s3)}
.folder-card strong{color:var(--ink);font-size:15px;font-weight:700;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.folder-card small{color:#6C7190;font-size:12px}
.files-image-heading{display:flex;align-items:center;gap:6px;letter-spacing:0}
.files-image-heading .ico{flex:none;color:var(--accent)}
.files-image-groups{display:flex;flex-direction:column;gap:var(--s3);min-width:0}
.files-image-session{display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.files-image-session-head{display:flex;align-items:center;gap:8px;min-width:0;color:#34384F;font-size:12px;font-weight:700;line-height:1.25}
.files-image-session-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.files-image-session-head small{flex:none;color:#6C7190;font-size:11px;font-weight:700;white-space:nowrap}
.image-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2)}
.image-grid:empty{display:none}
.image-tile{aspect-ratio:1;border-radius:16px;overflow:hidden;background:#E6E7EF}
.image-tile img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- Inbox ---------- */
.inbox-card{display:flex;flex-direction:column;gap:var(--s3);width:100%;padding:var(--s3);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-sm);text-align:left;transition:transform .15s var(--ease)}
.inbox-card-head{display:flex;align-items:center;gap:var(--s3)}
.inbox-preview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.inbox-preview img,.inbox-preview span{aspect-ratio:1;width:100%;border-radius:12px;object-fit:cover;background:var(--lavender)}
.inbox-preview span{display:grid;place-items:center;font-weight:700;color:var(--lavender-fg)}

/* ---------- Forms ---------- */
.form-card{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s4);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-sm)}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label{font-size:13px;font-weight:600;color:var(--muted)}
.field input,.field select,.field textarea{width:100%;height:46px;padding:0 var(--s4);border:1.5px solid var(--line);border-radius:16px;background:var(--bg);font-size:16px;color:var(--ink);outline:none;transition:border-color .2s,box-shadow .2s,background .2s;-webkit-appearance:none;appearance:none}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%238A8FA3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:44px}
.field input:focus,.field select:focus{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 4px rgba(91,103,241,.12)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.sheet .field{margin-bottom:var(--s2)}

.toggle-card,.check-card{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);border-radius:var(--r-md);background:var(--surface);box-shadow:var(--shadow-sm);cursor:pointer}
.switch{-webkit-appearance:none;appearance:none;position:relative;flex:none;width:52px;height:32px;margin:0;border-radius:16px;background:#DADCE7;transition:background .2s var(--ease);cursor:pointer}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(29,33,64,.2);transition:transform .2s var(--ease)}
.switch:checked{background:var(--accent)}
.switch:checked::after{transform:translateX(20px)}
.check-card input{position:absolute;opacity:0;pointer-events:none}
.check-mark{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:50%;border:2px solid var(--line);color:transparent;transition:all .2s var(--ease)}
.check-card:has(input:checked){box-shadow:0 0 0 2px var(--accent),var(--shadow-sm)}
.check-card input:checked ~ .check-mark{background:var(--accent);border-color:var(--accent);color:#fff}

.segmented{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.seg{display:grid;place-items:center;height:44px;border-radius:var(--r-chip);font-size:14px;font-weight:700}
.seg.lot-a{background:var(--accent-soft);color:var(--accent)}
.seg.lot-b{background:var(--peach);color:var(--peach-fg)}

/* ---------- Profile ---------- */
.profile-card{display:flex;align-items:center;gap:var(--s4);padding:var(--s4);border-radius:var(--r-lg);background:linear-gradient(160deg,var(--lavender),var(--sky))}
.profile-avatar-picker{position:relative;display:grid;place-items:center;flex:none;cursor:pointer}
.profile-avatar{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;overflow:hidden;background:linear-gradient(145deg,#8C95FF,var(--accent));color:#fff;font-size:24px;font-weight:800;box-shadow:0 0 0 5px rgba(255,255,255,.8)}
.profile-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.profile-avatar-camera{position:absolute;right:-4px;bottom:-3px;display:grid;place-items:center;width:26px;height:26px;border:3px solid var(--surface);border-radius:50%;background:var(--accent);color:#fff;box-shadow:var(--shadow-sm)}
.profile-card-copy{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
.profile-card strong{font-size:18px;font-weight:800;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-card small{color:var(--muted);font-size:12px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- Login & admin ---------- */
.google-btn{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm),inset 0 0 0 1.5px var(--line)}
.legal-links{margin:var(--s2) 0 0;text-align:center;font-size:13px;color:var(--muted);line-height:1.5}
.legal-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;color:var(--muted)}
.admin-avatar{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:50%;object-fit:cover;background:var(--lavender);color:var(--lavender-fg);font-weight:700}

/* ---------- Onboarding ---------- */
.onboarding{min-height:calc(100dvh - 48px - env(safe-area-inset-top));display:flex;flex-direction:column;justify-content:space-between;gap:var(--s6);padding-top:var(--s5)}
.onboarding > div:first-child{display:flex;flex-direction:column;gap:var(--s4)}
.onboarding-art{width:150px;margin:var(--s2) 0}
.onboarding .hero-title{font-size:34px}
.feature-row{display:flex;align-items:center;gap:var(--s3)}

/* ---------- Photo grids ---------- */
.thumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}
.thumbs.compact{grid-template-columns:repeat(4,minmax(0,1fr))}
.thumbs:empty{display:none}
.thumb img,.image-tile img{pointer-events:none}
.thumb,.thumb img,.image-tile,.image-tile img,[data-photo-id] img{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none}
.thumb{position:relative;display:block;aspect-ratio:3/4;padding:0;border-radius:16px;overflow:hidden;background:#E6E7EF;border:3px solid transparent;transition:border-color .2s}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb .num{position:absolute;left:6px;top:6px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:rgba(29,33,64,.6);backdrop-filter:blur(8px);color:#fff;font-size:11px;font-weight:700;line-height:22px;text-align:center}
.thumb.selected{border-color:var(--accent)}
.thumb.group-a{border-color:var(--accent)}
.thumb.group-b{border-color:var(--capture)}
.thumb .check{position:absolute;right:6px;top:6px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#fff;color:var(--accent);font-size:13px;font-weight:800}
.thumb .group-tag{position:absolute;right:6px;bottom:6px;padding:3px 8px;border-radius:10px;background:#fff;font-size:10px;font-weight:700}
.thumb.group-a .group-tag{color:var(--accent)}
.thumb.group-b .group-tag{color:var(--peach-fg)}
.thumb-status{position:absolute;right:6px;top:6px;z-index:2}
.gallery-thumb img{cursor:zoom-in}

/* Photo reordering — press, hold and drag (ui/reorder.js). Used by every photo grid. */
.pdf-row{display:flex;gap:var(--s2);overflow-x:auto;padding-bottom:var(--s1);scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.pdf-row:empty{display:none}
.pdf-thumb{flex:none;width:104px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:var(--s2) var(--s1);text-align:center;scroll-snap-align:start;cursor:pointer;background:var(--lavender);color:var(--ink)}
.pdf-thumb-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#fff;color:var(--accent)}
.pdf-thumb strong{max-width:100%;font-size:12px;line-height:1.2;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;word-break:break-word}
.pdf-thumb small{font-size:11px;color:var(--muted)}
.pdf-thumb .reorder-handle{color:#1D2140}
.pdf-thumb .reorder-handle .grip{background:rgba(29,33,64,.07);border-color:rgba(29,33,64,.18);box-shadow:none}
.reorder-grid > .pdf-thumb{touch-action:pan-x;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.reorder-grid{position:relative}
.reorder-grid > [data-photo-id]{touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;transition:transform .18s var(--ease),opacity .18s,border-color .18s,box-shadow .18s}
.reorder-grid > [data-photo-id] img{pointer-events:none;-webkit-user-drag:none}
.reorder-grid.is-dragging > [data-photo-id]:not(.drag-placeholder){box-shadow:var(--shadow-sm)}
.reorder-grid > .drag-placeholder{opacity:.22;transform:scale(.92);border-style:dashed;border-color:var(--accent)}
.reorder-ghost{position:fixed!important;z-index:160!important;margin:0!important;pointer-events:none!important;opacity:.96;transform:scale(1.08) rotate(1.5deg);box-shadow:0 18px 42px rgba(29,33,64,.28)!important;border-color:var(--accent)!important;transition:transform .15s var(--ease)!important;animation:none!important}
.reorder-ghost .thumb-status,.reorder-ghost .pdf-order-hint{display:none}
.reorder-hint{display:flex;align-items:center;gap:6px;margin:0;font-size:12px;color:var(--muted)}
.pdf-order-thumb .pdf-order-hint{position:absolute;right:6px;bottom:6px;display:grid;place-items:center;width:28px;height:24px;border-radius:10px;background:rgba(29,33,64,.58);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;transform:rotate(90deg);pointer-events:none}

/* ---------- Session notebook ink ---------- */
.session-view-toggle{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:6px;border-radius:18px;background:rgba(255,255,255,.78);box-shadow:var(--shadow-sm)}
.view-toggle-btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:42px;border:0;border-radius:14px;background:transparent;color:var(--muted);font-weight:800;cursor:pointer}
.view-toggle-btn.active{background:var(--ink);color:#fff;box-shadow:0 8px 22px rgba(29,33,64,.2)}
.session-notebook-help{display:flex;align-items:center;gap:8px;margin:-4px 0 4px;color:var(--muted);font-size:13px;font-weight:700}
.notebook{display:flex;flex-direction:column;gap:18px;margin:0 0 84px}
.notebook-block{position:relative;aspect-ratio:210/297;container-type:inline-size;border:2px solid transparent;background:#fff;box-shadow:var(--shadow-sm);overflow:hidden;isolation:isolate}
.notebook-block.selected{border-color:rgba(91,103,241,.55)}
.notebook-margin{position:absolute;z-index:1;inset:0;background:linear-gradient(#fff calc(100% - 1px),#E3E6F1 0) 0 0/100% 32px;background:linear-gradient(#fff calc(100% - 1px),#E3E6F1 0) 0 0/100% 3.55cqw}
.notebook-photo{position:absolute;z-index:1;left:calc(var(--fx)*100%);top:calc(var(--fy)*100%);width:calc(var(--fw)*100%);aspect-ratio:var(--fr);display:grid;place-items:center;background:#F4F5FA;box-shadow:0 2px 12px rgba(29,33,64,.14)}
.notebook-photo img{display:block;width:100%;height:100%;object-fit:contain;-webkit-user-drag:none;user-select:none}
.notebook-block.blank .notebook-photo{display:none}
.notebook-handle{display:none;position:absolute;right:6px;bottom:6px;width:26px;height:26px;border-radius:50%;background:var(--accent);border:3px solid #fff;box-shadow:0 2px 8px rgba(29,33,64,.3)}
.notebook-delete{display:none;position:absolute;right:6px;top:6px;width:30px;height:30px;place-items:center;border-radius:50%;background:var(--danger);color:#fff;border:3px solid #fff;box-shadow:0 2px 8px rgba(29,33,64,.3)}
.notebook-block.editing .notebook-photo{outline:2px solid var(--accent)}
.notebook-block.editing .notebook-handle{display:block}
.notebook-block.editing .notebook-delete{display:grid}
.notebook-blank-label,.notebook-missing{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px;color:var(--muted);font-weight:800;text-align:center}
.notebook-canvas{position:absolute;z-index:2;inset:0;width:100%;height:100%;display:block}
.notebook-canvas.committed{pointer-events:none}
.notebook-canvas.live{touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.notebook.finger-draw .notebook-canvas.live,.notebook.pen-active .notebook-canvas.live,.notebook-block.editing .notebook-canvas.live{touch-action:none}
.notebook-block.editing .notebook-canvas.live{cursor:grab}
.notebook-block.inking .notebook-canvas.live{touch-action:none;cursor:crosshair}
.ink-toolbar{position:fixed;z-index:75;left:50%;bottom:calc(78px + env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:6px;max-width:min(94vw,600px);padding:8px;border-radius:18px;background:rgba(255,255,255,.92);box-shadow:0 16px 48px rgba(29,33,64,.22);backdrop-filter:blur(18px)}
.ink-tool{display:grid;place-items:center;flex:none;width:38px;height:38px;border:0;border-radius:12px;background:transparent;color:var(--ink);cursor:pointer}
.ink-tool.active{background:var(--ink);color:#fff}
.ink-tool:disabled{opacity:.35;cursor:default}
.ink-sep{flex:none;width:1px;height:22px;background:var(--line)}
.ink-size-dot{display:block;width:var(--d);height:var(--d);border-radius:50%;background:currentColor}
.ink-tool.ink-size.active{background:rgba(29,33,64,.14);color:var(--ink)}
.ink-swatch{width:20px;height:20px;border-radius:50%;background:var(--swatch);box-shadow:inset 0 0 0 2px rgba(0,0,0,.08)}
.ink-tool[data-ink-tool="highlighter"] .ink-swatch{border-radius:8px;opacity:.6}
@media (min-width:720px){
  .notebook{margin-bottom:var(--s4)}
  .ink-toolbar{position:sticky;left:auto;bottom:calc(var(--s3) + env(safe-area-inset-bottom));transform:none;width:max-content;margin:0 auto}
  .notebook-block{border-radius:18px}
}
@media (max-width:719px){
  .notebook{margin-left:calc(var(--s3)*-1);margin-right:calc(var(--s3)*-1)}
  .notebook-block{border-left:0;border-right:0}
  .ink-toolbar{overflow-x:auto;scrollbar-width:none;justify-content:flex-start}   /* tablet in a narrow window */
  .ink-toolbar::-webkit-scrollbar{display:none}
}

.badge{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:11px;font-size:10px;font-weight:700;letter-spacing:.02em;background:#F0F1F6;color:var(--muted)}
.badge.green,.badge.teal{background:var(--mint);color:var(--mint-fg)}
.badge.orange{background:var(--peach);color:var(--peach-fg)}
.badge.coral{background:var(--pink);color:var(--pink-fg)}
.badge.blue,.badge.purple{background:var(--accent-soft);color:var(--accent)}

/* ---------- Sheets, toast, banner ---------- */
.sheet{position:fixed;z-index:var(--z-sheet);inset:0;display:flex;align-items:flex-end;justify-content:center;background:rgba(29,33,64,.35);backdrop-filter:blur(4px);animation:fade-in .2s ease}
.sheet-card{width:100%;max-width:560px;max-height:88dvh;overflow:auto;padding:var(--s3) var(--s5) calc(var(--s5) + env(safe-area-inset-bottom));border-radius:var(--r-lg) var(--r-lg) 0 0;background:var(--surface);box-shadow:var(--shadow-lg);animation:sheet-up .3s var(--ease)}
.sheet-handle{width:44px;height:5px;margin:0 auto var(--s4);border-radius:3px;background:#DADCE7}
.sheet-title{margin:0 0 6px;font-size:21px;font-weight:800;letter-spacing:-.03em}
.sheet-sub{margin:0 0 var(--s4);font-size:14px;line-height:1.5;color:var(--muted)}
.sheet-actions{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s4)}
.sheet-list{display:flex;flex-direction:column;gap:4px}
.sheet-row{display:flex;align-items:center;gap:var(--s3);min-height:56px;padding:0 var(--s2);border-radius:16px;font-size:16px;font-weight:600;text-align:left}
.sheet-row:active{background:var(--bg)}
.sheet-row.danger{color:var(--danger)}
.sheet .notice{margin-bottom:var(--s2)}
@keyframes fade-in{from{opacity:0}}
@keyframes sheet-up{from{transform:translateY(40px);opacity:.6}}

.toast{pointer-events:none;position:fixed;z-index:var(--z-toast);left:50%;bottom:calc(var(--nav-h) + var(--nav-bottom) + var(--s6));transform:translateX(-50%);max-width:88%;padding:12px 18px;border-radius:var(--r-btn);background:var(--ink);color:#fff;font-size:14px;font-weight:500;text-align:center;box-shadow:var(--shadow-lg)}
.offline-banner{position:fixed;z-index:var(--z-banner);left:50%;transform:translateX(-50%);top:calc(var(--s2) + env(safe-area-inset-top));width:min(92%,480px);padding:10px 14px;border-radius:var(--r-chip);background:var(--ink);color:#fff;font-size:13px;text-align:center;box-shadow:var(--shadow-md)}

/* =====================================================================
   CAPTURE — full-screen camera
   ===================================================================== */
.camera{position:fixed;z-index:var(--z-full);inset:0;overflow:hidden;background:#0B0C12;color:#fff}
.camera-stage{position:absolute;inset:0;overflow:hidden}
.camera-stage video{width:100%;height:100%;object-fit:cover;transform-origin:center;transition:transform .12s ease-out}
.camera-stage::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 18%,rgba(0,0,0,0) 62%,rgba(0,0,0,.7) 100%)}
.camera-stage.capture-flash::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:rgba(255,255,255,.04);-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);animation:cam-flash .32s ease-out forwards}
@keyframes cam-flash{0%{opacity:0}25%{opacity:1}100%{opacity:0}}
.camera-grid{position:absolute;inset:0;pointer-events:none}
.camera-grid span{position:absolute;background:rgba(255,255,255,.18)}
.camera-grid span:nth-child(1){left:33.33%;top:0;bottom:0;width:1px}
.camera-grid span:nth-child(2){left:66.66%;top:0;bottom:0;width:1px}
.camera-grid span:nth-child(3){top:33.33%;left:0;right:0;height:1px}
.camera-grid span:nth-child(4){top:66.66%;left:0;right:0;height:1px}

.glass-btn{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;background:rgba(20,22,32,.42);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);color:#fff;border:1px solid rgba(255,255,255,.14);transition:transform .15s var(--ease),background .2s}
.glass-btn:active{transform:scale(.92)}
.glass-btn.active{background:#FFD66B;color:#2A2410;border-color:transparent}
.glass-btn.unavailable{opacity:.4}
.glass-btn.round-lg{width:54px;height:54px}

.camera-top{position:absolute;z-index:5;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:calc(var(--s3) + env(safe-area-inset-top)) var(--s4) 0}
.camera-top-actions{display:flex;gap:var(--s2)}

.zoom-feedback{position:absolute;z-index:5;left:50%;top:42%;transform:translate(-50%,-50%) scale(.9);padding:8px 16px;border-radius:18px;background:rgba(20,22,32,.55);backdrop-filter:blur(12px);font-size:18px;font-weight:700;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s var(--ease)}
.zoom-feedback.show{opacity:1;transform:translate(-50%,-50%) scale(1)}

.camera-bottom{position:absolute;z-index:5;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;gap:var(--s4);padding:0 var(--s4) calc(var(--s4) + env(safe-area-inset-bottom))}

.zoom-chips{display:flex;align-items:center;gap:6px;padding:4px;border-radius:22px;background:rgba(20,22,32,.42);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.zoom-chip{display:grid;place-items:center;min-width:38px;height:36px;padding:0 10px;border-radius:18px;font-size:13px;font-weight:700;color:rgba(255,255,255,.85);transition:background .2s,color .2s}
.zoom-chip.active{background:#fff;color:var(--ink)}

.camera-controls{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;justify-items:center;width:100%;max-width:360px}
.gallery-shortcut{display:grid;place-items:center;width:54px;height:54px;border-radius:16px;overflow:hidden;background:rgba(20,22,32,.42);backdrop-filter:blur(16px);border:2px solid rgba(255,255,255,.75);color:#fff}
.gallery-shortcut img{width:100%;height:100%;object-fit:cover;display:block}
.shutter{position:relative;display:grid;place-items:center;width:82px;height:82px;border-radius:50%;background:rgba(255,255,255,.18);border:4px solid #fff;transition:transform .12s var(--ease)}
.shutter span{width:62px;height:62px;border-radius:50%;background:linear-gradient(145deg,#FFA062,var(--capture) 50%,var(--capture-2));box-shadow:0 0 22px rgba(255,138,76,.55)}
.shutter:active{transform:scale(.92)}

.camera-footer{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;width:100%;max-width:360px}
.camera-text-btn{justify-self:start;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 var(--s3);border-radius:18px;color:rgba(255,255,255,.85);font-size:13px;font-weight:600}
.camera-mode{font-size:12px;font-weight:800;letter-spacing:.2em;color:#FFD2B8}
.camera-done{justify-self:end;display:inline-flex;align-items:center;gap:var(--s2);height:36px;padding:0 6px 0 14px;border-radius:18px;background:#fff;color:var(--ink);font-size:13px;font-weight:700}
.camera-done b{display:grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:12px;background:var(--capture-2);color:#fff;font-size:12px}


/* Destination chip, save notices, last photo + counter */
.cam-dest{--c:#5B67F1;--on:#fff;flex:1;min-width:0;max-width:440px;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:5px 8px 5px 5px;border-radius:24px;background:rgba(26,28,44,.5);backdrop-filter:blur(26px) saturate(1.6);-webkit-backdrop-filter:blur(26px) saturate(1.6);border:1px solid rgba(255,255,255,.2);box-shadow:0 4px 18px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.18);color:#fff;text-align:left;transition:background .2s,border-color .2s,transform .15s var(--ease)}
.cam-dest:active{background:rgba(26,28,44,.68);transform:scale(.985)}
.cam-dest:focus-visible{outline:2px solid #FFD66B;outline-offset:2px}
.cam-dest-badge{position:relative;flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:13px;color:var(--on);background:var(--c);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
@supports (background:color-mix(in srgb,red,blue)){.cam-dest-badge{background:linear-gradient(150deg,color-mix(in srgb,var(--c) 76%,#fff),var(--c))}}
.cam-dest-auto{position:absolute;right:-4px;bottom:-4px;display:none;place-items:center;width:17px;height:17px;border-radius:50%;background:#5BE0A5;color:#0B3B28;border:2px solid #1b1e2b}
.cam-dest.auto .cam-dest-auto{display:grid}
.cam-dest-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;line-height:1.2}
.cam-dest-text b{overflow:hidden;font-size:14.5px;font-weight:800;letter-spacing:-.005em;text-overflow:ellipsis;white-space:nowrap}
.cam-dest-text small{overflow:hidden;font-size:12px;font-weight:600;color:rgba(255,255,255,.76);text-overflow:ellipsis;white-space:nowrap}
.cam-dest-chev{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.14);transition:transform .25s var(--ease),background .2s}
.cam-dest[aria-expanded="true"] .cam-dest-chev{transform:rotate(180deg);background:rgba(255,255,255,.24)}
.cam-dest.changed .cam-dest-badge{animation:cam-badge-pop .45s var(--ease)}
@keyframes cam-badge-pop{40%{transform:scale(1.16)}}
.cam-dest.empty{background:rgba(255,214,107,.34);color:#fff;border-color:rgba(255,214,107,.6);box-shadow:0 6px 22px rgba(255,214,107,.2),inset 0 1px 0 rgba(255,255,255,.28)}
.cam-dest.empty:active{background:rgba(255,214,107,.48)}
.cam-dest.empty .cam-dest-badge{background:rgba(255,214,107,.95);color:#2A2410;box-shadow:none}
.cam-dest.empty .cam-dest-text small{color:rgba(255,255,255,.86)}
.cam-dest.empty .cam-dest-chev{display:none}
.cam-dest.empty{padding-right:14px}
.cam-dest.empty .cam-dest-text b{font-size:14px;letter-spacing:-.01em}
.cam-notices{position:absolute;z-index:5;left:0;right:0;top:calc(var(--s3) + env(safe-area-inset-top) + 52px);display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.cam-notice{pointer-events:auto;max-width:calc(100% - 32px);min-height:32px;padding:6px 14px;border-radius:16px;background:rgba(20,22,32,.62);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff;font-size:12px;font-weight:600}
.cam-notice.warn{background:rgba(229,72,107,.88)}
.cam-last{position:relative;overflow:visible;padding:0}
.cam-last:disabled{opacity:.55}
.cam-last-img{display:grid;place-items:center;width:100%;height:100%;border-radius:14px;overflow:hidden}
.cam-last-img img{width:100%;height:100%;object-fit:cover;display:block}
.cam-count{position:absolute;top:-9px;right:-9px;display:grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:12px;border:2px solid #0B0C12;background:var(--capture-2);color:#fff;font-size:12px;font-weight:800}
.cam-last.pop{animation:cam-pop .28s var(--ease)}
@keyframes cam-pop{0%{transform:scale(.82)}60%{transform:scale(1.08)}100%{transform:scale(1)}}
.shutter{width:86px;height:86px;touch-action:manipulation}
.shutter span{width:66px;height:66px}

/* Camera permission / error panel (the controls stay hidden behind it) */
.cam-panel{position:absolute;z-index:4;inset:0;display:grid;place-items:center;padding:calc(env(safe-area-inset-top) + 72px) var(--s5) calc(env(safe-area-inset-bottom) + var(--s5));background:rgba(11,12,18,.86);overflow:auto}
.camera:has(.cam-panel:not(.hidden)) .camera-bottom{display:none}
.cam-panel-card{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:400px;text-align:center}
.cam-panel-icon{display:grid;place-items:center;width:60px;height:60px;border-radius:20px;background:rgba(255,255,255,.1)}
.cam-panel h2{margin:0;font-size:20px;font-weight:800}
.cam-panel p{margin:0;font-size:15px;line-height:1.5;color:rgba(255,255,255,.82)}
.cam-panel-how{margin:0;padding:12px 14px 12px 30px;border-radius:16px;background:rgba(255,255,255,.07);font-size:13px;line-height:1.55;text-align:left;color:rgba(255,255,255,.78)}
.cam-btn{min-height:48px;padding:0 20px;border-radius:var(--r-btn);font-size:15px;font-weight:700}
.cam-btn.primary{background:#fff;color:var(--ink)}
.cam-btn.primary:disabled{opacity:.45}
.cam-btn.ghost{background:rgba(255,255,255,.1);color:#fff}

/* Destination sheet, drawn over the live preview. The shell is built once (ui/camera-picker.js):
   header + summary stay put, the middle scrolls, the buttons stay at the bottom — nothing hides a focused control. */
.cam-sheet{--cs-bg:rgba(26,28,44,.56);--cs-line:rgba(255,255,255,.11);--cs-text2:rgba(255,255,255,.72);position:absolute;z-index:8;inset:0;display:flex;align-items:flex-end;justify-content:center;background:rgba(5,7,13,var(--scrim-a,.35))}
.cam-sheet-card{display:flex;flex-direction:column;width:100%;max-width:560px;max-height:min(90dvh,780px);border-radius:28px 28px 0 0;background:var(--cs-bg);-webkit-backdrop-filter:blur(26px) saturate(1.6);backdrop-filter:blur(26px) saturate(1.6);border:1px solid rgba(255,255,255,.2);border-bottom:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 -18px 50px rgba(0,0,0,.5);color:#fff;outline:none;will-change:transform}
.cam-sheet :is(button,select,input):focus-visible{outline:2px solid #FFD66B;outline-offset:2px}
.cam-sheet-drag{flex:none;padding:0 var(--s4);touch-action:none;cursor:grab}
.cam-sheet-grab{display:grid;place-items:center;height:22px}
.cam-sheet-grab i{width:40px;height:5px;border-radius:3px;background:rgba(255,255,255,.3)}
.cam-sheet-head{display:flex;align-items:center;gap:6px;min-height:48px}
.cam-sheet-head h2{flex:1;min-width:0;margin:0;font-size:20px;font-weight:800;letter-spacing:-.01em;line-height:1.2;text-wrap:balance}
.cam-icon-btn{position:relative;flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.09);color:#fff;transition:background .15s}
.cam-icon-btn:active{background:rgba(255,255,255,.2)}
.cam-icon-dot{position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:50%;background:#5BE0A5;border:2px solid var(--cs-bg);box-sizing:content-box}

.cam-sheet-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 var(--s4) var(--s3);scroll-padding:8px 0 16px}
.cam-sheet-scroll:last-child{padding-bottom:calc(var(--s4) + env(safe-area-inset-bottom))}
.cam-sheet-msg{margin:6px 0 8px;font-size:14px;line-height:1.45;color:var(--cs-text2)}
.cam-sheet-note{margin:8px 0 0;padding:10px 12px;border-radius:14px;background:rgba(255,214,107,.14);border:1px solid rgba(255,214,107,.4);font-size:14px;font-weight:600;line-height:1.4;color:#FFE8A8}
.cam-label{margin:16px 0 8px;font-size:13px;font-weight:700;color:var(--cs-text2)}

.cam-chips{display:flex;gap:8px;margin:0 calc(var(--s4)*-1);padding:2px var(--s4);overflow-x:auto;scrollbar-width:none;scroll-padding:0 var(--s4)}
.cam-chips::-webkit-scrollbar{display:none}

.cam-chip{--c:#5B67F1;flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px 0 12px;border:1.5px solid var(--cs-line);border-radius:22px;background:rgba(255,255,255,.06);color:#fff;font-size:14px;font-weight:700;transition:background .15s,border-color .15s}
.cam-chip i{flex:none;width:10px;height:10px;border-radius:50%;background:var(--c)}
.cam-chip .ck{display:none;flex:none}
.cam-chip.on{border-color:var(--c);background:rgba(255,255,255,.17)}
@supports (background:color-mix(in srgb,red,blue)){.cam-chip.on{background:color-mix(in srgb,var(--c) 26%,rgba(22,24,36,1))}}
.cam-chip.on .ck{display:block}

.cam-seg{display:flex;gap:4px;padding:4px;border-radius:18px;background:rgba(255,255,255,.07);overflow-x:auto;scrollbar-width:none}
.cam-seg button{flex:1 0 auto;min-width:64px;min-height:44px;padding:0 14px;border-radius:14px;color:#fff;font-size:15px;font-weight:700;transition:background .15s,color .15s}
.cam-seg button.on{background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.28)}

.cam-sessions{display:flex;flex-direction:column;gap:8px}
.cam-session{display:flex;align-items:center;gap:12px;min-height:58px;padding:8px 12px;border:1.5px solid transparent;border-radius:16px;background:rgba(255,255,255,.06);color:#fff;text-align:left;transition:background .15s,border-color .15s}
.cam-session:active{background:rgba(255,255,255,.14)}
.cam-session.new{border:1.5px dashed rgba(255,255,255,.3);background:transparent}
.cam-session.on{border-style:solid;border-color:#FFD66B;background:rgba(255,214,107,.12)}
.cam-session-ico{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:rgba(255,255,255,.12);font-size:14px;font-weight:800}
.cam-session.on .cam-session-ico{background:rgba(255,214,107,.22)}
.cam-session-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.cam-session-txt b{overflow:hidden;font-size:15px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}
.cam-session-txt small{font-size:12.5px;font-weight:500;color:var(--cs-text2)}
.cam-check{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#FFD66B;color:#2A2410;opacity:0;transform:scale(.6);transition:opacity .15s,transform .22s var(--ease)}
.cam-session.on .cam-check{opacity:1;transform:none}

.cam-btn{min-height:48px;padding:0 20px;border-radius:var(--r-btn);font-size:15px;font-weight:700}
.cam-sheet-actions{flex:none;display:grid;grid-template-columns:auto 1fr;gap:10px;padding:12px var(--s4) calc(var(--s3) + env(safe-area-inset-bottom));border-top:1px solid var(--cs-line);background:rgba(255,255,255,.04)}
.cam-sheet .cam-btn.primary{background:#FFD66B;color:#2A2410}
.cam-sheet .cam-btn.primary:active{background:#F6CB57}
.cam-sheet .cam-btn.primary:disabled{opacity:.4}

/* Timetable screen of the same sheet */
.cam-tt-row{display:flex;align-items:center;gap:10px;min-height:52px;margin-bottom:8px;padding:0 4px 0 14px;border-radius:14px;background:rgba(255,255,255,.06)}
.cam-tt-time{flex:none;font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}
.cam-tt-name{flex:1;min-width:0;overflow:hidden;font-size:14px;text-overflow:ellipsis;white-space:nowrap;color:rgba(255,255,255,.88)}
.cam-tt-form{display:flex;flex-direction:column;gap:10px}
.cam-tt-form label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:700;color:var(--cs-text2)}
.cam-tt-form select,.cam-tt-form input{min-height:48px;padding:0 12px;border:1px solid rgba(255,255,255,.18);border-radius:12px;background:rgba(255,255,255,.08);color:#fff;font-size:16px;color-scheme:dark}
.cam-tt-form option{color:#1D2140}
.cam-tt-times{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* Short phones: tighter spacing, so the session list comes into view sooner */
/* Browsers without backdrop-filter get an opaque sheet so the text stays readable */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .cam-sheet{--cs-bg:rgba(22,24,36,.97)}
  .cam-dest{background:rgba(20,22,32,.82)}
  .cam-dest.empty{background:#FFD66B;color:#2A2410}
}
@media (max-height:700px){
  .cam-label{margin:12px 0 6px}
}
/* Short screens (landscape phones): the grab handle gives its room to the lists */
@media (max-height:520px){
  .cam-sheet-grab{height:10px}
  .cam-sheet-card{max-height:96dvh}
}
@media (prefers-reduced-motion:reduce){
  .cam-dest,.cam-dest-chev,.cam-chip,.cam-session,.cam-check,.cam-icon-btn{transition:none}
  .cam-dest.changed .cam-dest-badge{animation:none}
}

/* =====================================================================
   VIEWERS
   ===================================================================== */
.media-viewer{position:fixed;z-index:var(--z-viewer);inset:0;display:flex;flex-direction:column;background:#0B0C12;color:#fff}
.viewer-topbar{display:flex;align-items:center;gap:var(--s3);padding:calc(var(--s3) + env(safe-area-inset-top)) var(--s4) var(--s3)}
.viewer-heading{display:flex;flex-direction:column;flex:1;min-width:0;text-align:center}
.viewer-heading b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.viewer-heading span{font-size:12px;color:rgba(255,255,255,.6)}
.viewer-stage{position:relative;flex:1;display:grid;place-items:center;overflow:hidden;touch-action:pan-y}
.viewer-stage img{max-width:100%;max-height:100%;object-fit:contain;transition:transform .15s ease-out;user-select:none}
.viewer-arrow{position:absolute;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.12);backdrop-filter:blur(12px);color:#fff}
.viewer-arrow.left{left:var(--s3)}
.viewer-arrow.right{right:var(--s3)}
.viewer-arrow:disabled{opacity:0}
@media (hover:none){.viewer-arrow{display:none}}

.viewer-dock{display:flex;justify-content:space-around;gap:var(--s2);margin:var(--s3) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom));padding:var(--s2);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-md)}
.viewer-dock.dark{background:rgba(255,255,255,.08);box-shadow:none}
.dock-btn{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;min-height:60px;justify-content:center;border-radius:var(--r-md);color:var(--accent);font-size:11px;font-weight:600;text-align:center}
.dock-btn small{font-size:11px;line-height:1.2}
.viewer-dock.dark .dock-btn{color:#fff}
.dock-btn.danger,.viewer-dock.dark .dock-btn.danger{color:#FF8FA6}
.dock-btn:active{background:rgba(91,103,241,.08)}

.pdf-viewer{position:fixed;z-index:var(--z-viewer);inset:0;display:flex;flex-direction:column;background:var(--bg)}
.pdf-viewer .page-header{padding:calc(var(--s3) + env(safe-area-inset-top)) var(--s4) var(--s3)}
.viewer-title{display:flex;flex-direction:column;min-width:0}
.viewer-title strong{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.viewer-title small{font-size:12px;color:var(--muted)}
.pdf-frame-wrap{position:relative;flex:1;margin:0 var(--s4);border-radius:var(--r-lg);overflow:hidden;background:var(--surface);box-shadow:var(--shadow-sm)}
.pdf-pages{touch-action:pan-x pan-y;height:100%;overflow:auto;-webkit-overflow-scrolling:touch;padding:var(--s3);background:#E9EAF2;position:relative}
.pdf-stage{display:flex;flex-direction:column;align-items:center;gap:var(--s4);width:max-content;min-width:100%}
.pdf-page{margin:0;display:flex;flex-direction:column;align-items:center;gap:6px}
.pdf-page-box{background:#fff;border-radius:6px;box-shadow:var(--shadow-sm);overflow:hidden}
.pdf-page canvas{display:block;width:100%;height:100%}
.pdf-fs-btn{position:absolute;top:var(--s3);right:var(--s3);z-index:3;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(29,33,64,.72);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.pdf-fs-btn:active{transform:scale(.94)}
.pdf-pager{position:absolute;left:50%;bottom:var(--s3);transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:2px;padding:4px;border-radius:18px;background:rgba(29,33,64,.78);color:#fff;font-size:12px;font-weight:600;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);white-space:nowrap}
.pdf-pager button{display:grid;place-items:center;min-width:32px;height:32px;border-radius:12px;color:#fff;font-size:18px;line-height:1}
.pdf-pager button:active{background:rgba(255,255,255,.18)}
.pdf-pager output{min-width:44px;text-align:center;font-variant-numeric:tabular-nums}
.pdf-pager-sep{width:1px;height:18px;margin:0 4px;background:rgba(255,255,255,.3)}
.pdf-viewer.pdf-immersive>.page-header,.pdf-viewer.pdf-immersive>.viewer-dock{display:none}
.pdf-viewer.pdf-immersive .pdf-frame-wrap{margin:0;border-radius:0;box-shadow:none}
.pdf-viewer.pdf-immersive .pdf-fs-btn{top:calc(var(--s3) + env(safe-area-inset-top))}
.pdf-page-box{position:relative}
/* Ink on the pages (features/pdf-ink.js): drawn in every mode, drawable only in fullscreen with a tool picked. */
.pdf-ink{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.pdf-ink .hl{mix-blend-mode:multiply}
.pdf-viewer.ink-on .pdf-ink{pointer-events:auto;touch-action:none;cursor:crosshair;overscroll-behavior:contain}
/* A tool is picked: one finger or the pencil only draws, anywhere on the pages (gutters and captions included); two fingers scroll in script. */
.pdf-viewer.ink-on .pdf-pages{touch-action:none;overscroll-behavior:contain;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.pdf-ink-bar,.pdf-corner-back,.pdf-pill{display:none}
.pdf-viewer.pdf-immersive .pdf-ink-bar,.pdf-viewer.pdf-ink-desk .pdf-ink-bar{position:absolute;left:calc(var(--s2) + env(safe-area-inset-left));top:50%;transform:translateY(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px;border-radius:20px;background:rgba(29,33,64,.5);border:1px solid rgba(255,255,255,.16);color:#fff;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.pdf-ink-bar button{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;color:#fff;touch-action:manipulation}
.pdf-ink-bar button:active{background:rgba(255,255,255,.18)}
.pdf-ink-bar button.active{background:#fff;color:#1D2140}
.pdf-ink-bar button:disabled{opacity:.35}
.pdf-ink-bar button{position:relative}
.pdf-ink-bar{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.pdf-ink-dot{position:absolute;right:4px;bottom:4px;width:13px;height:13px;border-radius:50%;background:var(--ink-c,transparent);box-shadow:0 0 0 1.5px rgba(255,255,255,.9),0 0 0 2.5px rgba(29,33,64,.55)}
.pdf-ink-bar button[data-ink="highlighter"] .pdf-ink-dot{opacity:.6}   /* as the stroke is drawn (CANVAS_HIGHLIGHT_ALPHA) */
.pdf-ink-bar button.active .pdf-ink-dot{box-shadow:0 0 0 1.5px #fff,0 0 0 2.5px #1D2140}
.pdf-ink-pop{position:absolute;left:calc(100% + 8px);display:flex;gap:6px;padding:8px;border-radius:16px;background:rgba(29,33,64,.62);border:1px solid rgba(255,255,255,.16);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.pdf-ink-pop[hidden]{display:none}
.pdf-ink-bar .pdf-ink-pop button{width:34px;height:34px;border-radius:50%;background:var(--c);border:2px solid rgba(255,255,255,.55)}
.pdf-ink-bar .pdf-ink-pop button.active{border-color:#fff;box-shadow:0 0 0 2px rgba(29,33,64,.6)}
.pdf-ink-sep{width:22px;height:1px;margin:2px 0;background:rgba(255,255,255,.3)}
.pdf-ink-fly{position:absolute;left:calc(100% + 8px);top:100px;display:flex;flex-direction:column;gap:2px;padding:4px;border-radius:16px;background:rgba(29,33,64,.62);border:1px solid rgba(255,255,255,.16);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.pdf-ink-fly[hidden]{display:none}
.pdf-ink-bar .pdf-ink-fly button{display:flex;align-items:center;gap:8px;width:auto;height:40px;padding:0 12px;font-size:13px;font-weight:600;white-space:nowrap}
.pdf-viewer.pdf-immersive .pdf-corner-back{position:absolute;top:calc(var(--s3) + env(safe-area-inset-top));left:calc(var(--s3) + env(safe-area-inset-left));z-index:3;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(29,33,64,.72);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.pdf-viewer.pdf-immersive .pdf-pill{position:absolute;left:50%;bottom:calc(var(--s3) + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:3;display:block;padding:6px 14px;border-radius:16px;background:rgba(29,33,64,.6);color:#fff;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:none}
.pdf-viewer.pdf-immersive .pdf-pager{bottom:calc(var(--s3) + env(safe-area-inset-bottom))}
/* Idle fullscreen (pages/PdfViewerPage.js): the controls fade out; a tap brings them back. */
.pdf-viewer.pdf-immersive .pdf-ink-bar,.pdf-viewer.pdf-immersive .pdf-fs-btn,.pdf-viewer.pdf-immersive .pdf-corner-back,.pdf-viewer.pdf-immersive .pdf-pager{transition:opacity .25s var(--ease)}
.pdf-viewer.pdf-ui-idle .pdf-ink-bar,.pdf-viewer.pdf-ui-idle .pdf-fs-btn,.pdf-viewer.pdf-ui-idle .pdf-corner-back,.pdf-viewer.pdf-ui-idle .pdf-pager{opacity:0;pointer-events:none}
.pdf-viewer.pdf-immersive .pdf-pill{display:none}
.pdf-page figcaption{font-size:12px;font-weight:600;color:var(--muted)}
.pdf-loading{margin:auto;color:var(--muted);font-size:14px}
.pdf-frame-wrap iframe{width:100%;height:100%;border:0;display:block}
.pdf-fallback{position:absolute;left:50%;bottom:var(--s3);transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:16px;background:rgba(29,33,64,.75);color:#fff;font-size:12px;font-weight:600;text-decoration:none;white-space:nowrap}

/* ---------- Larger screens ---------- */
@media (min-width:720px){
  .main{padding-left:var(--s6);padding-right:var(--s6)}
  .hero-title{font-size:34px}
  .hero-art,.qc-trigger{width:150px}
  /* Left navigation rail; the bottom bar stays on phones. */
  :root{--rail-w:96px}
  .bottom-nav{left:0;right:auto;top:0;bottom:0;transform:none;width:var(--rail-w);height:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:calc(var(--s4) + env(safe-area-inset-top)) var(--s2) calc(var(--s4) + env(safe-area-inset-bottom));border-radius:0;border-width:0 1px 0 0;border-color:var(--line);background:rgba(255,255,255,.94);box-shadow:none}
  .bottom-nav::before,.bottom-nav::after{display:none}
  .nav-item{flex:none;width:100%;height:auto;min-height:64px;justify-content:center;gap:4px;padding:8px 0}
  .capture-orb{margin-top:0;width:56px;height:56px}
  .main{width:auto;max-width:none;margin:0 0 0 var(--rail-w);padding-bottom:calc(var(--s6) + env(safe-area-inset-bottom))}
  .hidden-chrome .main,.capture-active .main{margin-left:0}
  .screen{width:100%;max-width:760px;margin-left:auto;margin-right:auto}
  .screen.screen-wide{max-width:1200px}
}
@media (max-width:370px){
  .hero-title{font-size:26px}
  .category-grid{gap:var(--s2)}
  .category-card{padding:var(--s3) 10px}
  .hero-art,.qc-trigger{width:92px}
  /* First iPhone SE (320 px): wider bar and tighter letters so "Bibliothèque" doesn't touch its neighbours. */
  .bottom-nav{left:10px;right:10px;padding-left:2px;padding-right:2px}
  .nav-item small{font-size:10px;letter-spacing:-.03em}
}

/* ---------- Collapsible card (Profil > Informations académiques) ---------- */
.collapse-card{border-radius:var(--r-md);background:var(--surface);box-shadow:var(--shadow-sm);overflow:hidden}
.collapse-card summary{display:flex;align-items:center;gap:var(--s3);min-height:60px;padding:var(--s2) var(--s4) var(--s2) var(--s3);cursor:pointer;list-style:none}
.collapse-card summary::-webkit-details-marker{display:none}
.collapse-card summary .chev{transition:transform .2s var(--ease)}
.collapse-card[open] summary .chev{transform:rotate(90deg)}
.collapse-body{display:flex;flex-direction:column;gap:var(--s3);padding:0 var(--s4) var(--s4)}
.toggle-row{display:flex;align-items:center;gap:var(--s3);cursor:pointer}

/* Filterable content groups (Bibliothèque, Fichiers): consistent spacing between sections. */
#libraryContent,#filesContent{display:flex;flex-direction:column;gap:var(--s4)}
[data-filter-group]{display:flex;flex-direction:column;gap:var(--s2)}
[data-filter-group] > .section-title-row{margin-top:0}
/* Folder tiles: icon beside the name instead of above it. */
.folder-card{display:grid;grid-template-columns:auto 1fr;column-gap:10px;row-gap:0;align-items:center}
.folder-card .ico{grid-row:span 2;margin:0}

   PHOTO EDITOR — full screen, dark (ui/photo-editor.js)
   ===================================================================== */
body.pe-lock{overflow:hidden}
.pe{position:fixed;z-index:var(--z-overlay);inset:0;display:flex;flex-direction:column;background:#0B0C12;color:#fff;transition:opacity .22s ease;touch-action:none;-webkit-user-select:none;user-select:none}
.pe.pe-entering,.pe.pe-closing{opacity:0}
.pe button{color:inherit}
.pe-top{flex:none;display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding:calc(var(--s2) + env(safe-area-inset-top)) var(--s3) var(--s2)}
.pe-text-btn{min-width:44px;min-height:44px;padding:0 10px;border-radius:22px;font-size:15px;font-weight:600;color:rgba(255,255,255,.85)}
.pe-top-mid{display:flex;align-items:center;gap:4px}
.pe-icon-btn{display:grid;place-items:center;width:44px;height:44px;border-radius:50%}
.pe-icon-btn:disabled{opacity:.3}
.pe-counter{min-width:48px;text-align:center;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.7)}
.pe-done{min-height:40px;padding:0 18px;border-radius:20px;background:#FFD66B;color:#2A2410!important;font-size:15px;font-weight:800}
.pe-done:disabled{opacity:.5}
.pe-body{flex:1;min-height:0;display:flex;flex-direction:column}
.pe-stage{position:relative;flex:1;min-height:0;overflow:hidden;touch-action:none}
.pe-canvas{position:absolute;inset:0;width:100%;height:100%}
.pe-overlay{position:absolute;inset:0;pointer-events:none}
.pe-dim{position:absolute;background:rgba(11,12,18,.62)}
.pe-box{position:absolute;box-shadow:inset 0 0 0 1px rgba(255,255,255,.9)}
.pe-grid{position:absolute;background:rgba(255,255,255,.55);opacity:0;transition:opacity .2s}
.pe-box.dragging .pe-grid{opacity:1}
.pe-grid.v1{left:33.33%;top:0;bottom:0;width:1px}.pe-grid.v2{left:66.66%;top:0;bottom:0;width:1px}
.pe-grid.h1{top:33.33%;left:0;right:0;height:1px}.pe-grid.h2{top:66.66%;left:0;right:0;height:1px}
/* Corner and edge handles: 44 px touch targets, thin L-shaped marks. */
.pe-corner,.pe-edge{position:absolute;width:44px;height:44px;pointer-events:auto;touch-action:none}
.pe-corner::before{content:"";position:absolute;width:22px;height:22px;border:0 solid #fff;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
.pe-corner.nw{left:-22px;top:-22px}.pe-corner.nw::before{left:19px;top:19px;border-left-width:3px;border-top-width:3px}
.pe-corner.ne{right:-22px;top:-22px}.pe-corner.ne::before{right:19px;top:19px;border-right-width:3px;border-top-width:3px}
.pe-corner.se{right:-22px;bottom:-22px}.pe-corner.se::before{right:19px;bottom:19px;border-right-width:3px;border-bottom-width:3px}
.pe-corner.sw{left:-22px;bottom:-22px}.pe-corner.sw::before{left:19px;bottom:19px;border-left-width:3px;border-bottom-width:3px}
.pe-edge::before{content:"";position:absolute;left:50%;top:50%;border-radius:2px;background:#fff;transform:translate(-50%,-50%);filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
.pe-edge.n{top:-22px;left:50%;margin-left:-22px}.pe-edge.s{bottom:-22px;left:50%;margin-left:-22px}
.pe-edge.e{right:-22px;top:50%;margin-top:-22px}.pe-edge.w{left:-22px;top:50%;margin-top:-22px}
.pe-edge.n::before,.pe-edge.s::before{width:24px;height:4px}
.pe-edge.e::before,.pe-edge.w::before{width:4px;height:24px}
/* Perspective (4 corners) */
.pe-quad-svg{position:absolute;left:0;top:0;overflow:visible}
.pe-dim-path{fill:rgba(11,12,18,.62)}
.pe-quad-line{fill:none;stroke:#FFD66B;stroke-width:2;stroke-linejoin:round}
.pe-quad-line.glow{animation:pe-glow .9s ease-out}
@keyframes pe-glow{0%{stroke-width:8;stroke:#fff}100%{stroke-width:2;stroke:#FFD66B}}
.pe-qh,.pe-qm{position:absolute;width:48px;height:48px;margin:-24px 0 0 -24px;pointer-events:auto;touch-action:none}
.pe-qh::before{content:"";position:absolute;inset:14px;border-radius:50%;background:rgba(255,214,107,.25);border:2.5px solid #FFD66B;box-shadow:0 1px 6px rgba(0,0,0,.5)}
.pe-qm::before{content:"";position:absolute;inset:19px;border-radius:50%;background:#FFD66B;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.pe-loupe{position:absolute;z-index:3;width:120px;height:120px;border-radius:50%;border:2px solid #fff;box-shadow:0 8px 24px rgba(0,0,0,.5);pointer-events:none;background:#0B0C12}
.pe-busy{position:absolute;z-index:4;left:50%;top:50%;display:flex;flex-direction:column;align-items:center;gap:8px;transform:translate(-50%,-50%);pointer-events:none}
.pe-busy span{width:30px;height:30px;border-radius:50%;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;animation:pe-spin .8s linear infinite}
.pe-busy small{padding:4px 10px;border-radius:10px;background:rgba(0,0,0,.5);font-size:13px;font-weight:600}
.pe-busy small:empty{display:none}
@keyframes pe-spin{to{transform:rotate(360deg)}}
.pe-hint{position:absolute;z-index:4;left:50%;top:12px;padding:6px 14px;border-radius:14px;background:rgba(0,0,0,.6);font-size:13px;font-weight:700;transform:translateX(-50%);pointer-events:none}
/* Tools */
.pe-side{flex:none;display:flex;flex-direction:column;gap:10px;padding:10px var(--s3) calc(var(--s3) + env(safe-area-inset-bottom))}
.pe-panel{min-height:96px;display:flex;flex-direction:column;justify-content:center;gap:10px}
.pe-tools{align-self:center;display:flex;gap:2px;padding:4px;border:1px solid rgba(255,255,255,.12);border-radius:24px;background:rgba(255,255,255,.08);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.pe-tools button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:72px;min-height:52px;padding:4px 8px;border-radius:20px;color:rgba(255,255,255,.72)!important;transition:background .2s,color .2s}
.pe-tools button small{font-size:11px;font-weight:700}
.pe-tools button.active{background:rgba(255,255,255,.14);color:#FFD66B!important}
.pe-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:0 2px}
.pe-chips::-webkit-scrollbar{display:none}
.pe-chip{flex:none;min-height:36px;padding:0 14px;border-radius:18px;background:rgba(255,255,255,.08);font-size:13px;font-weight:700;color:rgba(255,255,255,.85)!important}
.pe-chip.active{background:#fff;color:#1D2140!important}
.pe-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}
.pe-pill-btn{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:20px;background:rgba(255,255,255,.1);font-size:13px;font-weight:700}
.pe-pill-btn.primary{background:#FFD66B;color:#2A2410!important}
.pe-note{font-size:12px;color:rgba(255,255,255,.6)}
.pe-angle{text-align:center;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
.pe-ruler{position:relative;height:44px;overflow:hidden;touch-action:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)}
.pe-ruler.disabled{opacity:.35;pointer-events:none}
.pe-ruler-track{position:absolute;top:0;bottom:0;left:calc(50% - 360px);width:721px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 1px,transparent 1px 8px) 0 8px/100% 10px no-repeat,repeating-linear-gradient(90deg,rgba(255,255,255,.8) 0 2px,transparent 2px 40px) 0 4px/100% 16px no-repeat}
.pe-ruler-track span{position:absolute;top:24px;font-size:10px;font-weight:700;color:rgba(255,255,255,.6);transform:translateX(-50%)}
.pe-ruler-needle{position:absolute;left:50%;top:0;height:26px;width:2px;margin-left:-1px;border-radius:1px;background:#FFD66B}
.pe-filters{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:0 2px}
.pe-filters::-webkit-scrollbar{display:none}
.pe-filter{flex:none;display:flex;flex-direction:column;align-items:center;gap:4px;width:68px}
.pe-filter canvas{width:60px;height:60px;border-radius:14px;border:2px solid transparent;background:rgba(255,255,255,.08)}
.pe-filter.active canvas{border-color:#FFD66B}
.pe-filter small{font-size:11px;font-weight:700;color:rgba(255,255,255,.75)}
.pe-filter.active small{color:#FFD66B}
.pe-auto{display:flex;flex-direction:column;gap:10px}
.pe-auto p{margin:0;text-align:center;font-size:13px;line-height:1.45;color:rgba(255,255,255,.72)}
.pe-progress{height:4px;border-radius:2px;background:rgba(255,255,255,.15);overflow:hidden}
.pe-progress i{display:block;width:0;height:100%;background:#FFD66B;transition:width .2s}
.pe-strip{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px}
.pe-strip::-webkit-scrollbar{display:none}
.pe-thumb{position:relative;flex:none;width:40px;height:52px;border-radius:10px;overflow:hidden;border:2px solid transparent;opacity:.65}
.pe-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pe-thumb.active{border-color:#FFD66B;opacity:1}
.pe-thumb.edited::after{content:"";position:absolute;right:3px;top:3px;width:8px;height:8px;border-radius:50%;background:#FFD66B;box-shadow:0 0 0 2px #0B0C12}
.pe-pulse{animation:pe-pulse .25s ease-out}
@keyframes pe-pulse{50%{transform:scale(1.06)}}
/* Tablets and landscape: tools in a side column. */
@media (min-width:768px) and (min-aspect-ratio:1/1){
  .pe-body{flex-direction:row}
  .pe-side{width:340px;justify-content:center;overflow-y:auto;padding:var(--s4) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){.pe,.pe-quad-line.glow,.pe-pulse{transition:none;animation:none}}
/* Viewer: the edit button */
.dock-btn.edit{color:#FFD66B}
/* Messages never cover the editor's tools: shown at the top while editing. */
body.pe-lock .toast{top:calc(env(safe-area-inset-top) + 68px);bottom:auto}
/* Course management uses the same long-press interaction as photo grids. */
.course-managed{cursor:pointer}
.course-managed[hidden]{display:none}
.course-managed:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.reorder-grid > [data-course]{touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}

/* Stable touch sorting: the original slot never changes size. */
.reorder-grid > .drag-placeholder{opacity:.25;transform:none!important;border:3px dashed var(--accent)}
.reorder-ghost{transform-origin:center;will-change:transform;transition:none!important;box-shadow:0 14px 35px rgba(29,33,64,.28)!important;rotate:0deg}
.reorder-active{user-select:none;-webkit-user-select:none;overscroll-behavior:none}
.reorder-handle{position:absolute;right:3px;bottom:3px;z-index:4;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:none;color:#fff;touch-action:none;cursor:grab}
/* Two dots on a small liquid-glass disc (the glass of the Quick Capture lens). */
.reorder-handle .grip{position:relative;display:block;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.55);-webkit-backdrop-filter:blur(3px) saturate(1.6);backdrop-filter:blur(3px) saturate(1.6);box-shadow:0 2px 8px rgba(29,33,64,.25)}
.reorder-handle .grip::before,.reorder-handle .grip::after{content:"";position:absolute;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:currentColor;box-shadow:0 1px 2px rgba(0,0,0,.35)}
.reorder-handle .grip::before{top:calc(50% - 7px)}
.reorder-handle .grip::after{top:calc(50% + 2px)}
.course-managed .reorder-handle{color:#1D2140}
.course-managed .reorder-handle .grip{background:rgba(29,33,64,.07);border-color:rgba(29,33,64,.18);box-shadow:none}
.course-managed .reorder-handle .grip::before,.course-managed .reorder-handle .grip::after{box-shadow:none}

.course-managed{position:relative;padding-bottom:52px}
.reorder-handle:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.reorder-ghost .reorder-handle{visibility:hidden}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(prefers-reduced-motion:reduce){.reorder-grid > *{transition:none!important}}

.image-tile{position:relative}
.image-open{display:block;width:100%;height:100%;padding:0}
.file-card .danger,.page-header-right .danger{color:#b4233a}
.file-card[hidden]{display:none}

.gallery-thumb .reorder-handle{bottom:3px}

/* ==============================================================

/* =====================================================================
   SCANNER — modes, live page outline, review (features/scanner.js, pages/ScanReviewPage.js)
   ===================================================================== */
.cam-modes{display:flex;gap:4px;max-width:100%;overflow-x:auto;scrollbar-width:none;padding:2px 40%;scroll-snap-type:x mandatory;-webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
.cam-modes::-webkit-scrollbar{display:none}
.cam-mode{flex:none;scroll-snap-align:center;min-height:36px;padding:0 12px;border-radius:18px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.cam-mode.active{color:#FFD66B;background:rgba(255,214,107,.14)}
.scan-tools{position:absolute;z-index:5;right:var(--s4);top:calc(var(--s3) + env(safe-area-inset-top) + 56px);display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.scan-tool{min-width:64px;min-height:36px;padding:0 12px;border-radius:18px;background:rgba(20,22,32,.5);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.16);color:#fff;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.scan-tool.on{background:#FFD66B;color:#2A2410;border-color:transparent}
.scan-tool:disabled{opacity:.45}
.glass-btn.small{width:40px;height:40px}
.glass-btn[aria-pressed="true"]#gridBtn{background:rgba(255,255,255,.22)}
/* Scanner overlay: built once by Scanner (features/scanner.js); a frame only changes path data and
   data-state / data-page, so colours slide between states and the outline fades in and out.
   data-state: search · tracking (amber) · ready (green) · warn (dashed: found but not ready) · qr */
.scan-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;--scan:#FFD66B;--scan-fill:rgba(255,214,107,.10)}
.scan-overlay[data-state="ready"]{--scan:#5BE0A5;--scan-fill:rgba(91,224,165,.14)}
.scan-overlay[data-state="warn"]{--scan:#FFB454;--scan-fill:rgba(255,180,84,.07)}
.scan-handles{display:none}
.scan-overlay[data-manual="1"] .scan-handles{display:block}
.scan-overlay[data-manual="1"] .scan-glow,.scan-overlay[data-manual="1"] .scan-progress,.scan-overlay[data-manual="1"] .scan-dim{display:none}
.scan-overlay[data-manual="1"]{z-index:6}
.scan-handle{fill:var(--scan);stroke:#fff;stroke-width:2.5;filter:drop-shadow(0 1px 4px rgba(0,0,0,.45));pointer-events:none}
.scan-handle-hit{fill:transparent;pointer-events:all;touch-action:none;cursor:grab}
.scan-overlay[data-state="qr"]{--scan:#8AB4FF;--scan-fill:rgba(138,180,255,.14)}
.scan-layer{opacity:0;transition:opacity .22s ease}
.scan-overlay[data-page="1"] .scan-layer{opacity:1}
.scan-dim{fill:rgba(6,8,14,.34)}
.scan-glow{fill:none;stroke:var(--scan);stroke-width:11;stroke-linejoin:round;opacity:.2;transition:stroke .3s}
.scan-quad{fill:var(--scan-fill);stroke:var(--scan);stroke-opacity:.8;stroke-width:2;stroke-linejoin:round;transition:stroke .3s,fill .3s}
.scan-overlay[data-state="warn"] .scan-quad{stroke-dasharray:9 7;animation:scan-march .9s linear infinite}
.scan-brackets-under{fill:none;stroke:rgba(0,0,0,.32);stroke-width:8.5;stroke-linecap:round;stroke-linejoin:round}
.scan-brackets{fill:none;stroke:var(--scan);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s}
.scan-progress{fill:none;stroke:#fff;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100;opacity:0;transition:opacity .15s}
.scan-fold{fill:none;stroke:#fff;stroke-width:2;stroke-dasharray:6 6;opacity:.85}
.scan-overlay:not([data-mode="book"]) .scan-fold{display:none}
.scan-guide{opacity:0;transition:opacity .3s ease}
.scan-overlay[data-page=""] .scan-guide{opacity:1;animation:scan-breathe 2.6s ease-in-out infinite}
.scan-guide-under{fill:none;stroke:rgba(0,0,0,.28);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.scan-guide-path{fill:none;stroke:rgba(255,255,255,.85);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.scan-snap{fill:rgba(255,255,255,.1);stroke:rgba(255,255,255,.6);stroke-width:1.5;stroke-linejoin:round}
@keyframes scan-breathe{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes scan-march{to{stroke-dashoffset:-32}}
.focus-ring{position:absolute;z-index:3;width:72px;height:72px;margin:-36px 0 0 -36px;border:2px solid #FFD66B;border-radius:14px;pointer-events:none;opacity:0}
.focus-ring.go{animation:focus-ring .9s ease-out}
@keyframes focus-ring{0%{opacity:1;transform:scale(1.4)}40%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
.cam-notice.scan-hint{display:inline-flex;align-items:center;gap:8px;background:rgba(20,22,32,.66);font-size:13px}
.cam-notice.scan-hint::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.55);transition:background .25s}
.cam-notice.scan-hint[data-tone="track"]::before{background:#FFD66B}
.cam-notice.scan-hint[data-tone="ready"]::before{background:#5BE0A5;box-shadow:0 0 0 0 rgba(91,224,165,.6);animation:scan-dot 1.2s ease-out infinite}
.cam-notice.scan-hint[data-tone="warn"]::before{background:#fff}
@keyframes scan-dot{to{box-shadow:0 0 0 7px rgba(91,224,165,0)}}
.cam-notice.scan-hint.warn{background:rgba(229,72,107,.88)}
.cam-panel-note{margin:0;font-size:12px;line-height:1.45;color:rgba(255,255,255,.62)}
.qr-result{margin:0 0 var(--s3);padding:12px 14px;border-radius:14px;background:var(--bg);font-size:14px;line-height:1.45;word-break:break-all;user-select:text;-webkit-user-select:text}
/* Landscape phones: controls in a column on the right, preview uses the full height. */
@media (orientation:landscape) and (max-height:520px){
  .camera-bottom{left:auto;top:0;bottom:0;width:208px;justify-content:center;gap:var(--s2);padding:calc(env(safe-area-inset-top) + 8px) calc(env(safe-area-inset-right) + 10px) calc(env(safe-area-inset-bottom) + 8px) 8px;background:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,.45))}
  .camera-controls{grid-template-columns:1fr;row-gap:10px;justify-items:center}
  .camera-footer{grid-template-columns:1fr 1fr}.camera-footer>span{display:none}
  .cam-modes{padding:2px 30%}
  .camera-top{right:220px}
  .scan-tools{right:224px}
}
/* Review of the pages */
.srv{position:fixed;inset:0;z-index:var(--z-full);display:flex;flex-direction:column;background:#0B0C12;color:#fff}
.srv-top{flex:none;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--s2);padding:calc(var(--s2) + env(safe-area-inset-top)) var(--s3) var(--s2)}
.srv-text-btn{display:inline-flex;align-items:center;gap:2px;min-height:44px;padding:0 8px;border-radius:22px;color:rgba(255,255,255,.88);font-size:15px;font-weight:600}
.srv-title{display:flex;flex-direction:column;align-items:center;min-width:0;text-align:center}
.srv-title b{font-size:16px}
.srv-title small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:rgba(255,255,255,.6)}
.srv-done{min-height:40px;padding:0 18px;border-radius:20px;background:#FFD66B;color:#2A2410;font-size:15px;font-weight:800}
.srv-nav{display:flex}
.srv-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:#fff}
.srv-icon:disabled{opacity:.3}
.srv-grid{flex:1;min-height:0;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px;align-content:start;padding:var(--s3)}
.srv-page{position:relative;aspect-ratio:3/4;border-radius:12px;overflow:hidden;background:rgba(255,255,255,.08);box-shadow:0 2px 10px rgba(0,0,0,.35)}
.srv-page img{width:100%;height:100%;object-fit:contain;display:block;background:#1a1c26}
.srv-page .num{position:absolute;left:6px;top:6px;min-width:24px;height:24px;padding:0 6px;display:grid;place-items:center;border-radius:12px;background:rgba(0,0,0,.6);font-size:12px;font-weight:800}
.srv-busy{position:absolute;right:8px;top:8px;width:20px;height:20px;border-radius:50%;border:2.5px solid rgba(255,255,255,.3);border-top-color:#fff;animation:pe-spin .8s linear infinite}
.srv-busy.big{right:auto;top:50%;left:50%;width:34px;height:34px;margin:-17px 0 0 -17px}
.srv-hint{flex:none;margin:0;padding:0 var(--s4) var(--s2);font-size:12px;line-height:1.4;text-align:center;color:rgba(255,255,255,.55)}
.srv-bar{flex:none;display:flex;justify-content:space-around;gap:4px;padding:8px var(--s2) calc(8px + env(safe-area-inset-bottom));border-top:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)}
.srv-bar-btn{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:60px;min-height:52px;padding:4px 6px;border-radius:14px;color:rgba(255,255,255,.88)}
.srv-bar-btn small{font-size:11px;font-weight:700}
.srv-bar-btn.danger{color:#FF8FA6}
.srv-stage{position:relative;flex:1;min-height:0;display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:center;overflow:hidden;padding:var(--s2) var(--s3);touch-action:pan-y}
.srv-stage img{min-width:0;min-height:0;max-width:100%;max-height:100%;object-fit:contain;border-radius:6px;box-shadow:0 8px 30px rgba(0,0,0,.5);background:#fff}
.srv-filter-name{position:absolute;left:50%;top:16px;transform:translateX(-50%);padding:6px 14px;border-radius:14px;background:rgba(0,0,0,.6);font-size:13px;font-weight:800;opacity:0;pointer-events:none}
.srv-filter-name.show{animation:srv-name 1.2s ease-out}
@keyframes srv-name{0%,60%{opacity:1}100%{opacity:0}}
.srv-filters{flex:none;display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:6px var(--s3) 8px;scroll-snap-type:x proximity}
.srv-filters::-webkit-scrollbar{display:none}
.srv-filter{flex:none;scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;width:64px}
.srv-filter canvas{width:56px;height:70px;border-radius:10px;border:2px solid transparent;background:rgba(255,255,255,.08)}
.srv-filter.active canvas{border-color:#FFD66B}
.srv-filter small{font-size:11px;font-weight:700;color:rgba(255,255,255,.75);white-space:nowrap}
.srv-filter.active small{color:#FFD66B}
.undo-bar{position:fixed;z-index:var(--z-bar);left:calc(50% + var(--float-shift));bottom:var(--float-bottom);transform:translateX(-50%);display:flex;align-items:center;gap:14px;max-width:92%;padding:8px 8px 8px 16px;border-radius:16px;background:#1D2140;color:#fff;font-size:14px;box-shadow:0 10px 30px rgba(0,0,0,.35);animation:fade-in .2s ease}
.undo-bar button{min-height:40px;padding:0 14px;border-radius:12px;background:#FFD66B;color:#2A2410;font-weight:800}
/* Recognised text */
.ocr-text{width:100%;min-height:200px;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--bg);color:var(--ink);font:14px/1.5 inherit;resize:vertical}
.ocr-results{margin-bottom:var(--s4)}
.field-note{margin:6px 0 0;font-size:13px;line-height:1.45;color:var(--muted)}
.field-note .link-btn{display:flex;margin:0 0 -6px -6px;color:var(--accent);font-weight:700}   /* own line under the note */
@media (prefers-reduced-motion:reduce){.focus-ring.go,.srv-filter-name.show,.scan-quad,.scan-guide,.scan-overlay[data-page=""] .scan-guide,.scan-overlay[data-state="warn"] .scan-quad,.cam-notice.scan-hint::before{animation:none;transition:none}}

/* =====================================================================
   ÉPURÉ (1/2) — tablets and computers, every screen
   Applies from 720px wide up (the 720–767px left rail, and the .desk layout from 768px), except short
   landscape-phone screens, which keep the phone layout; a window 960px wide or more is always a tablet /
   computer. Nothing above this block changes, so phones look exactly as before. The desk layout's own
   chrome (toolbar, course navigator, breadcrumb, Galerie, Notes) is sized in part 2/2 at the end of the file.
   Palette  whites #F5F5F7 · blues #007AFF · grays #8E8E93 · 1px #E5E5E7 borders, no shadows
   Sizing   icons 16 · buttons 28×28 · toolbars 40 · sidebar 180–200 · text 12–13 · gaps 4–8 · radius 6
   Colours come from the tokens, so the dark theme keeps working. The camera viewfinder, the radial menus
   and the Quick Capture trigger are used by thumb: they keep their phone-size controls.
   ===================================================================== */
@media (min-width:720px) and (min-height:521px),(min-width:960px){

  /* ---------- Tokens ---------- */
  :root{
    --bg:#F5F5F7;--surface:#F5F5F7;--ink:#1D1D1F;--muted:#8E8E93;--line:#E5E5E7;
    --accent:#007AFF;--accent-soft:#E6F1FF;--hover:rgba(29,29,31,.05);
    /* The pastel tones fold into the palette: blue tint with blue text (the red of "delete" stays). */
    --lavender:#E6F1FF;--lavender-fg:#007AFF;--mint:#E6F1FF;--mint-fg:#007AFF;
    --peach:#E6F1FF;--peach-fg:#007AFF;--yellow:#E6F1FF;--yellow-fg:#007AFF;--sky:#E6F1FF;--sky-fg:#007AFF;
    --s1:4px;--s2:6px;--s3:8px;--s4:12px;--s5:14px;--s6:16px;--s8:24px;
    --r-chip:6px;--r-btn:6px;--r-md:6px;--r-lg:6px;--r-nav:6px;
    --shadow-sm:0 0 0 0 transparent;--shadow-md:0 0 0 0 transparent;--shadow-lg:0 6px 20px rgba(0,0,0,.12);
    --rail-w:200px;
  }
  @media (max-width:767px){:root{--rail-w:180px}}
  /* More specific than the dark theme's own tokens, so the order of the two blocks doesn't matter. */
  html:root[data-theme="dark"]{--hover:rgba(255,255,255,.06);--shadow-sm:0 0 0 0 transparent;--shadow-md:0 0 0 0 transparent;--shadow-lg:0 6px 20px rgba(0,0,0,.5)}
  /* The camera is an instrument, not a page: its spacing and radii stay at phone values. */
  .camera{--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;--r-chip:14px;--r-btn:18px;--r-md:22px;--r-lg:28px}

  /* ---------- Base ---------- */
  body{font-size:13px}
  :focus-visible{outline:2px solid rgba(0,122,255,.45);outline-offset:1px}
  .tone-neutral{--tone-bg:var(--line);--tone-fg:var(--muted)}
  /* Icons: 16px everywhere except the camera, the radial menus and the Quick Capture orb. */
  .app-shell:not(.capture-active) .ico,.sheet .ico,.pe .ico,.desk-menu .ico{width:16px;height:16px}
  .app-shell .qc-trigger .qc-trigger-orb .ico{width:26px;height:26px}

  /* ---------- Navigation: left sidebar (720–767px; from 768px the .desk layout replaces it) ---------- */
  .bottom-nav{width:var(--rail-w);justify-content:flex-start;align-items:stretch;gap:2px;padding:calc(var(--s4) + env(safe-area-inset-top)) var(--s3) calc(var(--s4) + env(safe-area-inset-bottom));background:var(--bg);border-color:var(--line)}
  .nav-item{flex-direction:row;justify-content:flex-start;gap:var(--s3);width:100%;height:32px;min-height:32px;padding:0 var(--s3);border-radius:6px}
  .nav-item:active{transform:none}
  .nav-icon{width:16px;height:16px}
  .nav-item small{font-size:13px;font-weight:500;letter-spacing:0}
  .nav-item.active{background:var(--accent-soft)}
  .nav-item.active small{font-weight:600}
  .nav-item.nav-capture,.nav-item.nav-capture.active{order:-1;justify-content:center;gap:var(--s2);margin-bottom:var(--s3);background:var(--accent);color:#fff}
  .nav-capture .capture-orb{width:16px;height:16px;margin:0;border-radius:0;background:none;box-shadow:none}
  .nav-capture:hover .capture-orb{box-shadow:none}
  .main{padding-top:calc(var(--s4) + env(safe-area-inset-top))}

  /* ---------- Page chrome ---------- */
  .page-header{min-height:40px}
  .page-header-large{font-size:18px;letter-spacing:-.02em}
  .page-header-title{font-size:13px;font-weight:600;letter-spacing:0}
  .wordmark{font-size:16px;letter-spacing:-.04em}
  .wordmark.large{font-size:20px}
  .wordmark i{width:5px;height:5px;right:-6px;top:3px}
  .icon-btn,.icon-btn.flat{width:28px;height:28px;border-radius:6px}
  .icon-btn{background:var(--surface);border:1px solid var(--line)}
  .icon-btn.flat{background:transparent;border-color:transparent}
  .icon-btn:active{transform:none}
  .icon-btn-badge{top:-5px;right:-5px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;border:2px solid var(--bg);background:var(--accent);font-size:11px;line-height:12px}
  .avatar-btn{width:28px;height:28px;background:var(--accent);box-shadow:none;font-size:12px}
  .sync-dot{width:8px;height:8px;right:-1px;bottom:-1px;border-width:1.5px}

  /* ---------- Type ---------- */
  .greeting,.lead{font-size:13px}
  .hero-title,.detail-hero .hero-title{font-size:18px;line-height:1.2;letter-spacing:-.02em}
  .eyebrow,.hero-label{font-size:12px;letter-spacing:.08em}
  .meta-line,.small{font-size:12px}
  .section-title{font-size:13px;letter-spacing:-.01em}
  .section-title .count{min-width:20px;height:18px;margin-left:var(--s1);padding:0 6px;border-radius:6px;font-size:12px;vertical-align:1px}
  .link-btn{min-height:28px;margin:-4px -2px;padding:0 var(--s2);font-size:12px}
  .field-note,.legal-links{font-size:12px}
  .legal-links a{min-height:28px}

  /* ---------- Controls ---------- */
  .search-bar{height:32px;padding:0 var(--s3);gap:var(--s2);border:1px solid var(--line);border-radius:6px;background:var(--surface)}
  .search-bar input{font-size:13px}
  .search-bar:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,122,255,.14)}
  .chips{gap:var(--s2)}
  .chip{height:28px;padding:0 var(--s4);border-radius:6px;font-size:12px}
  .action-btn{min-height:28px;padding:0 var(--s4);gap:var(--s2);border-radius:6px;font-size:13px;font-weight:600;letter-spacing:0}
  .action-btn:active{transform:none;opacity:.85}
  .action-btn.primary,.action-btn.capture{background:var(--accent);box-shadow:none}
  .action-btn.ghost,.google-btn{border:1px solid var(--line);box-shadow:none}
  .action-row{gap:var(--s3)}
  .button-stack{gap:var(--s2)}
  .hero-cta{height:28px;padding:0 var(--s4);border-radius:6px;font-size:13px;box-shadow:none}
  .hero-cta:active{transform:none;opacity:.85}
  .seg,.view-toggle-btn{height:28px;min-height:28px;border-radius:6px;font-size:12px}
  .segmented{gap:var(--s2)}
  .session-view-toggle{gap:var(--s1);padding:var(--s1);border:1px solid var(--line);border-radius:6px;background:var(--surface)}
  .view-toggle-btn{gap:var(--s2)}
  .view-toggle-btn.active{background:var(--accent);box-shadow:none}
  .session-notebook-help{margin:0;font-size:12px}
  .seg.lot-b{background:var(--line);color:var(--ink)}
  .thumb.group-b{border-color:var(--muted)}
  .thumb.group-b .group-tag{color:var(--muted)}

  /* ---------- Forms ---------- */
  .form-card{gap:var(--s3);padding:var(--s4)}
  .field{gap:var(--s1)}
  .field label{font-size:12px}
  .field input,.field select,.field textarea{height:32px;padding:0 var(--s3);border:1px solid var(--line);border-radius:6px;background-color:var(--surface);font-size:13px}
  .field textarea{height:auto;min-height:64px;padding:var(--s2) var(--s3)}
  .field select{background-size:16px 16px;background-position:right 8px center;padding-right:28px}
  .field input:focus,.field select:focus{box-shadow:0 0 0 3px rgba(0,122,255,.14)}
  .field-row{gap:var(--s3)}
  .toggle-card,.check-card{padding:var(--s3) var(--s4);gap:var(--s3)}
  .check-card:has(input:checked){border-color:var(--accent);box-shadow:none}
  .switch{width:36px;height:20px;border-radius:10px}
  .switch::after{top:2px;left:2px;width:16px;height:16px}
  .switch:checked::after{transform:translateX(16px)}
  .check-mark{width:20px;height:20px;border-width:1.5px}
  .check-mark .ico{width:12px;height:12px}
  .ocr-text{min-height:120px;padding:var(--s3);border-radius:6px;font-size:13px}
  .qr-result{padding:var(--s3);border-radius:6px;font-size:13px}

  /* ---------- Surfaces: flat, 1px borders, 6px radius ---------- */
  .list-card,.course-card,.collection-card,.folder-card,.category-card,.stat-card,.detail-hero,.storage-card,.inbox-card,.empty-state,.form-card,.toggle-card,.check-card,.collapse-card,.profile-card,.hero-card{border:1px solid var(--line)}
  .category-card,.stat-card,.collection-card,.folder-card,.detail-hero{background:var(--surface)}
  .hero-card,.profile-card{background:var(--accent-soft)}
  .hero-card::before{display:none}
  .hero-card{gap:var(--s3);padding:var(--s4)}
  .hero-card-copy{gap:var(--s1)}
  .hero-card h2{font-size:15px;letter-spacing:-.02em}
  .hero-card p{font-size:12px;color:var(--muted)}
  .hero-art{width:72px}
  .qc-trigger{width:96px;gap:var(--s2)}
  .qc-trigger-orb{background:var(--accent);box-shadow:0 0 0 4px var(--bg)}
  .qc-trigger-orb::before{border:1px dashed rgba(0,122,255,.55)}
  .qc-trigger small{font-size:12px;color:var(--muted)}
  .qc-bubble{padding:var(--s3) var(--s4);border-radius:6px;font-size:13px}
  .qc-bubble-btn{height:28px;border-radius:6px;font-size:12px}
  .icon-badge{border-radius:6px}
  .icon-badge.sm{width:24px;height:24px}
  .icon-badge.md{width:28px;height:28px}
  .icon-badge.lg{width:32px;height:32px}
  .category-card .icon-badge,.stat-card .icon-badge,.collection-card .icon-badge,.detail-hero .icon-badge{width:28px;height:28px;border-radius:6px;background:var(--accent-soft)}
  .stat-grid.four .icon-badge{width:24px;height:24px;border-radius:6px}
  .stat-grid.four .icon-badge .ico{width:16px;height:16px}
  .tag{height:20px;padding:0 var(--s3);border-radius:6px;font-size:12px}
  .tags{gap:var(--s1)}
  .badge{height:20px;border-radius:6px;font-size:12px}
  .progress{height:4px;border-radius:2px;background:var(--line)}
  .category-card .progress{background:var(--line)}
  .notice{padding:var(--s3) var(--s4);gap:var(--s3);font-size:12px}
  .empty-state{gap:var(--s2);padding:var(--s6) var(--s5)}
  .empty-state strong{margin-top:var(--s1);font-size:13px}
  .empty-state p{font-size:12px}
  .success-hero{padding:var(--s2) 0}

  /* Lists and cards */
  .list-stack,.card-stack{gap:var(--s2)}
  .list-card{min-height:40px;gap:var(--s3);padding:var(--s2) var(--s3)}
  .list-card-copy{gap:1px}
  .list-card-copy strong,.category-card strong,.collection-card strong,.folder-card strong,.course-card-copy strong,.storage-copy strong{font-size:13px;letter-spacing:0}
  .list-card-copy small,.category-card small,.collection-card small,.folder-card small,.course-card-copy small,.storage-copy small,.stat-card small,.files-image-session-head,.files-image-session-head small{font-size:12px}
  .file-card{padding:0 var(--s2) 0 0}
  .file-open{min-height:40px;gap:var(--s3);padding:var(--s2) var(--s3)}
  .category-grid,.collection-grid,.folder-grid,.stat-grid{gap:var(--s3)}
  .category-card{gap:2px;padding:var(--s3) var(--s4)}
  .category-card .icon-badge{margin-bottom:var(--s1)}
  .course-card{gap:var(--s3);padding:var(--s4)}
  .course-card-progress b,.course-card-foot>small{font-size:12px}
  .stat-card{padding:var(--s3)}
  .stat-card strong,.stat-grid.four strong{font-size:16px}
  .stat-grid.four small{font-size:12px}
  .collection-card{min-height:72px;padding:var(--s3)}
  .collection-card strong{margin-top:var(--s3)}
  .folder-card{padding:var(--s3)}
  .detail-hero,.storage-card,.inbox-card,.profile-card{padding:var(--s4)}
  .collapse-card summary{min-height:40px;padding:var(--s2) var(--s4) var(--s2) var(--s3)}
  .collapse-body{padding:0 var(--s4) var(--s4)}
  .profile-avatar{width:48px;height:48px;font-size:18px;box-shadow:0 0 0 3px var(--bg)}
  .profile-avatar-camera{width:20px;height:20px;border-width:2px}
  .profile-card strong{font-size:15px}
  .profile-card small{font-size:12px}
  .admin-avatar{width:32px;height:32px}
  .inbox-preview{grid-template-columns:repeat(4,minmax(0,88px));gap:var(--s1)}
  .inbox-preview img,.inbox-preview span{border-radius:6px}
  .onboarding .hero-title{font-size:20px}
  .onboarding-art{width:96px}
  .feature-row{gap:var(--s3)}

  /* ---------- Photo grids ---------- */
  .thumbs{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:var(--s2)}
  .thumbs.compact,.image-grid{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:var(--s2)}
  .thumb,.image-tile{border-radius:6px}
  .thumb{border-width:2px}
  .thumb .num{left:4px;top:4px;min-width:20px;height:20px;padding:0 var(--s2);border-radius:10px;font-size:12px;line-height:20px}
  .thumb .check{right:4px;top:4px;width:20px;height:20px;font-size:12px}
  .thumb .group-tag{right:4px;bottom:4px;padding:2px var(--s2);border-radius:6px;font-size:12px}
  .reorder-handle{width:28px;height:28px}
  .reorder-handle .grip{width:22px;height:22px}
  .reorder-handle .grip::before,.reorder-handle .grip::after{width:4px;height:4px;margin-left:-2px}
  .reorder-handle .grip::before{top:calc(50% - 5px)}
  .reorder-handle .grip::after{top:calc(50% + 1px)}
  .course-managed{padding-bottom:36px}
  .pdf-order-thumb .pdf-order-hint{width:24px;height:20px;border-radius:6px}
  .reorder-hint{font-size:12px}
  .files-image-heading .ico{width:16px;height:16px}

  /* ---------- Notebook (the old session view) ---------- */
  .notebook-block{border-radius:6px}
  .ink-toolbar{gap:var(--s2);padding:var(--s2);border:1px solid var(--line);border-radius:6px;background:var(--surface);box-shadow:var(--shadow-lg);backdrop-filter:none;-webkit-backdrop-filter:none}
  .ink-tool{width:28px;height:28px;border-radius:6px}
  .ink-tool.active{background:var(--accent);color:#fff}
  .ink-tool.ink-size.active{background:var(--hover);color:var(--ink)}
  .ink-sep{height:16px}
  .ink-swatch{width:16px;height:16px}

  /* ---------- Sheets, messages ---------- */
  .sheet{align-items:center;background:rgba(0,0,0,.28)}
  .sheet-card{max-width:400px;max-height:80dvh;padding:var(--s4);border:1px solid var(--line);border-radius:6px}
  .sheet-handle{display:none}
  .sheet-title{margin:0 0 var(--s1);font-size:15px;letter-spacing:-.01em}
  .sheet-sub{margin:0 0 var(--s3);font-size:12px}
  .sheet-list{gap:2px}
  .sheet-row{min-height:32px;gap:var(--s3);padding:0 var(--s3);border-radius:6px;font-size:13px}
  .sheet-row:active{background:var(--hover)}
  .sheet-actions{gap:var(--s2);margin-top:var(--s3)}
  .toast,.undo-bar,.offline-banner{border-radius:6px;font-size:13px}
  .toast{bottom:var(--s6);max-width:min(88%,480px);padding:var(--s3) var(--s4)}
  .offline-banner{padding:var(--s2) var(--s4);font-size:12px}
  .undo-bar{gap:var(--s4);padding:var(--s2) var(--s2) var(--s2) var(--s4);background:var(--ink)}
  .undo-bar button{min-height:28px;padding:0 var(--s4);border-radius:6px}
  /* The messages sit over the page, beside the sidebar (not over the middle of the whole window). */
  body:has(.app-shell:not(.hidden-chrome):not(.desk-side-closed)) :is(.toast,.offline-banner){left:calc(50% + var(--rail-w)/2)}
  body:has(.app-shell:not(.hidden-chrome):not(.desk-side-closed)){--float-shift:calc(var(--rail-w)/2)}

  /* ---------- Viewers and editors: toolbars 40px, buttons 28px ---------- */
  .viewer-topbar,.pdf-viewer .page-header,.srv-top,.pe-top{min-height:40px}
  .viewer-topbar,.pdf-viewer .page-header,.srv-top{padding-top:calc(var(--s1) + env(safe-area-inset-top));padding-bottom:var(--s1)}
  /* The photo fits its stage (a percentage max-height doesn't resolve in an auto-sized grid row, so tall photos overflowed and were cropped). */
  .viewer-stage{grid-template:minmax(0,1fr)/minmax(0,1fr)}
  .viewer-stage img{min-width:0;min-height:0}
  /* Sign-in and set-up: a centred column instead of full-width fields and buttons. */
  .onboarding{max-width:440px;margin-left:auto;margin-right:auto}
  .media-viewer .glass-btn,.viewer-arrow,.pe-icon-btn,.srv-icon{width:28px;height:28px;border-radius:6px}
  .viewer-heading b,.viewer-title strong,.srv-title b{font-size:13px}
  .viewer-heading span,.viewer-title small,.srv-title small,.pe-counter,.pe-note{font-size:12px}
  .viewer-dock{gap:var(--s2);margin:var(--s3) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom));padding:var(--s2);border:1px solid var(--line)}
  .viewer-dock.dark{border-color:rgba(255,255,255,.12)}
  .dock-btn{min-height:44px;gap:2px;border-radius:6px;font-size:12px}
  .dock-btn small{font-size:12px}
  .pdf-frame-wrap{border:1px solid var(--line);margin:0 var(--s4)}
  .pdf-pages{background:var(--line)}
  .pdf-page canvas{border-radius:2px}
  .pdf-fallback{border-radius:6px}
  .pe-text-btn,.srv-text-btn{min-width:28px;min-height:28px;padding:0 var(--s3);border-radius:6px;font-size:13px}
  .pe-done,.srv-done{min-height:28px;padding:0 var(--s4);border-radius:6px;font-size:13px}
  .pe-tools{padding:var(--s1);border-radius:6px}
  .pe-tools button{min-width:56px;min-height:40px;border-radius:6px}
  .pe-tools button small,.srv-bar-btn small{font-size:12px}
  .pe-chip,.pe-pill-btn{min-height:28px;padding:0 var(--s4);border-radius:6px;font-size:12px}
  .srv-bar-btn{min-width:48px;min-height:40px;border-radius:6px}

  /* ---------- Touch screens: text fields stay 16px so iPad Safari doesn't zoom in on focus ---------- */
  @media (pointer:coarse){
    .field input,.field select,.field textarea,.search-bar input,.ocr-text{font-size:16px}
    /* Finger: the 28px buttons keep their look, an invisible layer makes the touch target 40px tall
       (6px above and below, 2px each side: the gaps between buttons are 4px or more, so neighbours never overlap). */
    .chip,.link-btn,.ink-tool,.srv-icon,.srv-text-btn,.srv-done,.pe-icon-btn,.pe-text-btn,.pe-done,.pe-chip,.pe-pill-btn,.media-viewer .glass-btn{position:relative}
    .avatar-btn{overflow:visible}
    .avatar-btn .avatar-image{border-radius:50%}
    .icon-btn::after,.avatar-btn::after,.chip::after,.link-btn::after,.ink-tool::after,.reorder-handle::after,.srv-icon::after,.srv-text-btn::after,.srv-done::after,.pe-icon-btn::after,.pe-text-btn::after,.pe-done::after,.pe-chip::after,.pe-pill-btn::after,.media-viewer .glass-btn::after,.viewer-arrow::after{content:"";position:absolute;inset:-6px -2px}
    .icon-btn::after,.media-viewer .glass-btn::after{inset:-7px -3px}   /* these have a 1px border: the offset starts inside it */
    .chips{margin-top:-4px;margin-bottom:-4px;padding-top:6px;padding-bottom:8px}   /* room for the layer inside the scrolling row, same layout height */
  }

  /* ---------- Hover (mouse only) ---------- */
  @media (hover:hover){
    .nav-item:not(.nav-capture):not(.active):hover,.icon-btn:hover,.chip:not(.active):hover,.list-card:hover,.course-card:hover,.category-card:hover,.collection-card:hover,.folder-card:hover,.sheet-row:hover,.link-btn:hover{background-image:linear-gradient(var(--hover),var(--hover))}
    .action-btn:hover,.hero-cta:hover{opacity:.9}
  }
}

/* =====================================================================
   LECTURE RAPIDE — the paper-page trigger on Accueil and the stacked rings of its radial menu (features/quick-reading.js).
   Only menus created with `stack` get data-depth / .blurred / .gone: Capture rapide and the item menus never match.
   ===================================================================== */
.radial[data-depth] .radial-item{transition:transform .15s var(--ease),opacity .15s var(--ease),filter .15s var(--ease),background .12s,color .12s,box-shadow .12s}
.radial.open .radial-item.blurred{filter:blur(3px);opacity:.55}
.radial.open .radial-item.blurred.hot,.radial.open .radial-item.blurred.lensed{filter:none;opacity:1}
.radial.open .radial-item.gone{opacity:0;pointer-events:none;transform:translate(-50%,-50%) translate(var(--dx),var(--dy)) scale(.6)}
.radial-dot.has-icon{display:grid;place-items:center;max-width:none;overflow:visible}
@media (prefers-reduced-motion:reduce){.radial[data-depth] .radial-item{transition:none}}

.qr-row{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);border-radius:18px;background:color-mix(in srgb,var(--lavender-fg) 10%,var(--surface));border:1px solid color-mix(in srgb,var(--lavender-fg) 28%,transparent)}
.qr-trigger{position:relative;flex:none;display:grid;place-items:center;width:72px;height:72px;border-radius:50%;color:#fff;touch-action:none}
.qr-trigger:focus-visible{outline:3px solid var(--lavender-fg);outline-offset:2px}
.qr-core{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--lavender-fg);color:#fff;transition:transform .15s var(--ease)}
.qr-ring{position:absolute;border-radius:50%;pointer-events:none;border:1.5px solid color-mix(in srgb,var(--lavender-fg) 55%,transparent)}
.qr-outer{inset:0;border-style:dashed;animation:qr-spin 24s linear infinite}
.qr-inner{inset:9px;border-style:dotted;animation:qr-spin 18s linear infinite reverse}
@keyframes qr-spin{to{transform:rotate(360deg)}}
.qr-trigger.radial-active .qr-core{transform:scale(1.08)}
.qr-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.qr-copy strong{font-size:17px;color:var(--lavender-fg)}
.qr-copy small{font-size:13px;color:var(--muted)}
.qr-resume{flex:none;display:flex;flex-direction:column;align-items:center;gap:4px}
.qr-play{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff;color:var(--lavender-fg);box-shadow:0 1px 4px rgba(0,0,0,.15)}
.qr-resume small{font-size:11px;font-weight:600;color:var(--lavender-fg)}
@media (prefers-reduced-motion:reduce){.qr-ring{animation:none}}
/* Capture rapide card (Accueil): same panel as Lecture rapide, in the app's blue; a bigger title; Reprendre + caption. */
.qcap-row{background:color-mix(in srgb,var(--accent) 10%,var(--surface));border-color:color-mix(in srgb,var(--accent) 28%,transparent)}
.qcap-row .qr-copy{align-items:flex-end;text-align:right}
.qcap-row .qr-ring{border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
.qcap-row .qr-core{background:var(--accent)}
.qcap-row .qr-trigger:focus-visible{outline-color:var(--accent)}
.qcap-row .qr-copy strong{font-size:22px;line-height:1.1;font-weight:800;letter-spacing:-.03em;color:var(--accent)}
.qcap-row .qr-play{color:var(--accent)}
.qcap-row .qr-resume small{color:var(--accent)}
.qr-where{max-width:104px;font-size:11px;font-style:normal;font-weight:500;line-height:1.2;text-align:center;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Épuré (tablet / computer): smaller page, 1px-style strokes, no shadow. */
@media (min-width:720px) and (min-height:521px),(min-width:960px){
  .radial.open .radial-item.blurred{filter:blur(2px)}
}

/* =====================================================================
   PEOPLE + HOLIOO SHARES — avatars, people list, "share with people" sheet, Holioo Shares groups, copy-ID button.
   Token-based (light + dark). The compact Épuré sizes (≥720px) are in the media block at the end of this section.
   ===================================================================== */
.profile-id-line{display:flex;flex-wrap:wrap;align-items:center;gap:2px 4px;min-width:0}
.profile-id-text{overflow-wrap:anywhere}
.copy-id-btn{position:relative;display:inline-grid;place-items:center;width:28px;height:28px;flex:none;border-radius:50%;color:var(--accent);background:transparent;transition:background .15s var(--ease),transform .15s var(--ease)}
.copy-id-btn::after{content:"";position:absolute;inset:-8px}
.copy-id-btn:active{transform:scale(.92);background:var(--accent-soft)}
.copy-id-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

.ppl-avatar{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;overflow:hidden;background:linear-gradient(145deg,#8C95FF,var(--accent));color:#fff;font-weight:700;font-size:17px}
.ppl-avatar img{width:100%;height:100%;object-fit:cover;display:block;-webkit-touch-callout:none;user-select:none}
.ppl-avatar.sm{width:28px;height:28px;font-size:13px}
.ppl-avatar.lg{width:52px;height:52px;font-size:20px}
.ppl-list{display:flex;flex-direction:column;gap:var(--s2);margin:var(--s3) 0}
.ppl-list-sheet{max-height:42dvh;overflow:auto;margin:var(--s3) 0 var(--s2);-webkit-overflow-scrolling:touch}
.ppl-row{display:flex;align-items:center;gap:var(--s3);min-height:60px;padding:var(--s2) var(--s3);border-radius:var(--r-md);background:var(--surface);box-shadow:var(--shadow-sm)}
.ppl-pick{cursor:pointer}
.ppl-copy{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.ppl-copy strong{font-size:16px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ppl-copy small{font-size:13px;color:var(--muted);line-height:1.35}
.ppl-meta{font-weight:600;letter-spacing:.01em}
.ppl-note{margin:var(--s3) 0;color:var(--muted);font-size:14px}
.ppl-found{min-height:8px;margin-top:var(--s2)}
.ppl-found .ppl-row{box-shadow:none;border:1px solid var(--line)}
.ppl-tag{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:99px;background:var(--accent-soft);color:var(--accent);font-size:13px;font-weight:600;white-space:nowrap}
.action-btn.ppl-add{width:auto;flex:none;min-height:40px;padding:0 var(--s4)}
.action-btn.ppl-revoke{width:auto;flex:none;min-height:36px;padding:0 var(--s3);font-size:13px}
.ppl-sent .ppl-copy strong{font-size:15px}
.ppl-remove{color:var(--danger,#b4233a)}

.hs-group{margin:var(--s4) 0 var(--s5)}
.hs-sender{display:flex;align-items:center;gap:var(--s2);min-width:0;margin-bottom:var(--s2)}
.hs-sender strong{font-size:15px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hs-doc{margin-bottom:var(--s3)}
.hs-meta{margin:0 0 4px var(--s1);font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hs-doc-row{display:flex;align-items:center;gap:var(--s2)}
.hs-doc-row .hs-open{flex:1;min-width:0}
.hs-remove{flex:none}
.shared-viewer .viewer-title small{white-space:normal}
.shared-photo{margin:0 0 var(--s3)}
.shared-photo img{display:block;width:100%;height:auto;border-radius:var(--r-md);-webkit-touch-callout:none;user-select:none}
.shared-photo figcaption{margin-top:4px;text-align:center;font-size:12px;color:var(--muted)}
@media (max-width:359px){.ppl-row{padding:var(--s2)}.action-btn.ppl-revoke{font-size:12px;padding:0 var(--s2)}}

.ppl-avatar[data-tone="1"]{background:linear-gradient(145deg,#FF9E7A,#E8563F)}
.ppl-avatar[data-tone="2"]{background:linear-gradient(145deg,#4FD1A5,#1F9D78)}
.ppl-avatar[data-tone="3"]{background:linear-gradient(145deg,#FFC857,#E0962B)}
.ppl-avatar[data-tone="4"]{background:linear-gradient(145deg,#5BC0FF,#1689F5)}
.ppl-avatar[data-tone="5"]{background:linear-gradient(145deg,#F58AC0,#C94C93)}
.ppl-skel .ppl-avatar{background:var(--line)}
.ppl-skel .ppl-copy{gap:6px}
.ppl-skel i{display:block;height:12px;width:62%;border-radius:6px;background:var(--line)}
.ppl-skel i.short{width:34%}
.ppl-skel .ppl-avatar,.ppl-skel i{animation:ppl-pulse 1.2s ease-in-out infinite}
@keyframes ppl-pulse{50%{opacity:.5}}
@media (prefers-reduced-motion:reduce){.ppl-skel .ppl-avatar,.ppl-skel i{animation:none}}
.ppl-error{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin:var(--s3) 0;padding:var(--s3) var(--s4);border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);color:var(--ink)}
.ppl-error span{flex:1;min-width:160px;font-size:14px}
.action-btn.ppl-retry{width:auto;flex:none;min-height:36px;padding:0 var(--s3);font-size:13px}
.hs-badge{position:absolute;top:-2px;right:-2px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#E8563F;color:#fff;font-style:normal;font-size:11px;font-weight:700;line-height:18px;text-align:center;box-shadow:0 0 0 2px var(--bg)}
.hs-new{padding:2px 8px;border-radius:99px;background:var(--accent-soft);color:var(--accent);font-size:11px;font-weight:700;white-space:nowrap}
.hs-sender .hs-block{margin-left:auto;flex:none;width:32px;height:32px;color:var(--muted)}
.ppl-qr-wrap{display:flex;flex-direction:column;align-items:center;gap:var(--s3);margin:var(--s3) 0}
.ppl-qr-row{display:flex;gap:var(--s2);align-items:stretch}.ppl-qr-row .action-btn{flex:1}.ppl-scan-btn{flex:none;width:52px;border:1px solid var(--line,rgba(0,0,0,.12));border-radius:var(--r-md,14px)}
.ppl-scan{border-radius:var(--r-md,14px);overflow:hidden;background:#000;aspect-ratio:1/1;max-height:50vh;margin:var(--s3) 0}.ppl-scan video{width:100%;height:100%;object-fit:cover}
.msel-top{display:flex;justify-content:flex-end;margin:0 0 var(--s2)}
.msel-on{-webkit-user-select:none;user-select:none}
.msel-on>*{cursor:pointer}
.msel-picked{outline:3px solid var(--accent);outline-offset:-3px;position:relative}
.msel-picked::after{content:"✓";position:absolute;right:8px;top:8px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;font-size:14px;font-weight:800;pointer-events:none}
.msel-bar{position:fixed;z-index:var(--z-bar);left:calc(50% + var(--float-shift));bottom:var(--float-bottom);transform:translateX(-50%);display:flex;align-items:center;gap:12px;max-width:94%;padding:8px 8px 8px 16px;border-radius:16px;background:#1D2140;color:#fff;font-size:14px;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.msel-bar button{min-height:40px;padding:0 14px;border-radius:12px;font-weight:800;display:inline-flex;align-items:center;gap:6px;color:#fff;background:rgba(255,255,255,.14)}
.msel-bar .msel-del{background:#E5484D}
.msel-bar button:disabled{opacity:.45}
/* A sheet is up: the floating bars step out of the way (visibility keeps their state; they come back when the sheet closes). */
body.sheet-open :is(.msel-bar,.undo-bar){visibility:hidden;pointer-events:none}
/* While the selection bar is up, messages sit above it instead of behind it. */
body:has(.msel-bar) .toast{bottom:calc(var(--float-bottom) + 64px)}
.ppl-qr{width:min(260px,70vw);height:auto;border-radius:var(--r-md);border:1px solid var(--line);background:#fff}
.ppl-qr-id{margin:0;font-weight:600;overflow-wrap:anywhere;text-align:center}
:root[data-theme="dark"] .ppl-error,:root[data-theme="dark"] .ppl-row{background:var(--surface)}
:root[data-theme="dark"] .hs-badge{box-shadow:0 0 0 2px var(--bg)}

/* Épuré (tablet / computer): 6px radius, 1px borders, compact sizes; a transparent layer keeps finger targets ≥ 40px. */
@media (min-width:720px) and (min-height:521px),(min-width:960px){
  .ppl-row{min-height:44px;gap:var(--s3);padding:var(--s2) var(--s3);border:1px solid var(--line);border-radius:6px;box-shadow:none}
  .ppl-avatar{width:32px;height:32px;font-size:13px}
  .ppl-avatar.sm{width:24px;height:24px;font-size:11px}
  .ppl-avatar.lg{width:40px;height:40px;font-size:15px}
  .ppl-copy strong,.ppl-sent .ppl-copy strong{font-size:13px}
  .ppl-copy small,.ppl-note,.hs-meta{font-size:12px}
  .ppl-tag{padding:2px 8px;font-size:12px;border-radius:6px}
  .action-btn.ppl-add,.action-btn.ppl-revoke{min-height:28px;padding:0 var(--s3);font-size:12px;border-radius:6px}
  .hs-sender strong{font-size:13px}
  .hs-doc-row .hs-open{min-height:40px}
  .shared-photo img{border-radius:6px}
  .copy-id-btn{width:22px;height:22px}
  .hs-badge{min-width:14px;height:14px;line-height:14px;font-size:10px;padding:0 3px;border-radius:7px}
  .hs-new{font-size:10px;padding:1px 6px;border-radius:6px}
  .hs-sender .hs-block{width:28px;height:28px;position:relative}
  .hs-sender .hs-block::after{content:"";position:absolute;inset:-6px -2px}
  .ppl-error{border-radius:6px;padding:var(--s2) var(--s3)}
  .ppl-error span{font-size:12px}
  .action-btn.ppl-retry{min-height:28px;font-size:12px;border-radius:6px}
  .ppl-qr{width:200px;border-radius:6px}
  .ppl-row .icon-btn.flat{width:28px;height:28px;position:relative}
  .ppl-row .icon-btn.flat::after{content:"";position:absolute;inset:-6px -2px}
  .ppl-remove,.hs-remove{width:28px;height:28px;position:relative}
  .ppl-remove::after,.hs-remove::after,.action-btn.ppl-add::after,.action-btn.ppl-revoke::after{content:"";position:absolute;inset:-6px -2px}
  .action-btn.ppl-add,.action-btn.ppl-revoke{position:relative}
}

/* =====================================================================
   TABLET & COMPUTER (window ≥ 768px) — icon toolbar on top, course navigator on the left, breadcrumb, wide canvas.
   Every rule is scoped to .desk, which ui/desk-shell.js puts on #appShell only at that width:
   phones and the 720–767px rail never match anything below. The navigator is docked; the toolbar's sidebar
   button hides it (.desk-side-closed).
   ===================================================================== */
@media (min-width:768px){
  .desk{--desk-bar-h:60px;--desk-side-w:264px;--desk-crumb-h:0px;--desk-top:calc(var(--desk-bar-h) + env(safe-area-inset-top))}
  .desk.desk-crumb-on{--desk-crumb-h:44px}
  .desk:not(.hidden-chrome){display:grid;grid-template-columns:var(--desk-side-w) minmax(0,1fr);grid-template-rows:var(--desk-top) var(--desk-crumb-h) minmax(0,1fr);min-height:100dvh}
  .desk.desk-side-closed:not(.hidden-chrome){grid-template-columns:0 minmax(0,1fr)}
  .desk.hidden-chrome .desk-toolbar,.desk.hidden-chrome .desk-sidebar,.desk.hidden-chrome .desk-crumb{display:none}
  .desk:not(.hidden-chrome) .bottom-nav{display:none}
  /* Normal PDF view: the reader sits beside the sidebar; fullscreen (hidden-chrome) keeps its inset:0. */
  .desk:not(.hidden-chrome) .pdf-viewer{inset:calc(var(--desk-top) + var(--desk-crumb-h)) 0 0 var(--desk-side-w)}
  .desk:not(.hidden-chrome) .main{grid-column:2;grid-row:3;width:auto;max-width:none;min-width:0;margin:0;padding:var(--s6) clamp(24px,3vw,48px) calc(var(--s8) + env(safe-area-inset-bottom))}
  .desk:not(.hidden-chrome) .screen{max-width:960px}
  .desk:not(.hidden-chrome) .screen.screen-wide{max-width:1320px}
  /* Captures and profile live in the toolbar. */
  .desk:not(.hidden-chrome) .page-header-right>[data-nav="inbox"],.desk:not(.hidden-chrome) .page-header-right>.avatar-btn{display:none}
  /* A header with only the logo (Accueil) is not repeated under the toolbar's. */
  .desk:not(.hidden-chrome) .page-header:has(.page-header-left>.wordmark:only-child):not(:has(.page-header-right>:not([data-nav="inbox"]):not(.avatar-btn))){display:none}

  /* Toolbar */
  .desk-toolbar{grid-column:1/-1;grid-row:1;position:sticky;top:0;z-index:46;display:flex;align-items:center;gap:var(--s3);height:var(--desk-top);padding:env(safe-area-inset-top) var(--s4) 0;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);border-bottom:1px solid var(--line)}
  .desk-toolbar-start,.desk-toolbar-end{display:flex;align-items:center;gap:var(--s1);flex:none}
  .desk-toolbar-nav{flex:0 0 auto;display:flex;align-items:center;gap:var(--s1);min-width:0}
  .desk-wordmark{align-self:center;margin-left:var(--s2);font-size:21px}
  .desk-tool{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;color:var(--ink);transition:background .15s var(--ease),color .15s var(--ease)}
  .desk-tool:hover{background:#F0F1F6}
  .desk-tool[aria-expanded="true"]{color:var(--accent);background:var(--accent-soft)}
  .desk-tab{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 14px;border-radius:14px;color:var(--muted);font-size:14px;font-weight:600;white-space:nowrap;transition:background .15s var(--ease),color .15s var(--ease)}
  .desk-tab:hover{color:var(--ink);background:#F0F1F6}
  .desk-tab.active{color:var(--accent);background:var(--accent-soft)}
  .desk-tab.desk-capture{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px 0 14px;margin-right:var(--s2);border-radius:999px;color:#fff;font-size:14px;font-weight:700;background:linear-gradient(145deg,#FFA062 0%,var(--capture) 45%,var(--capture-2) 100%);box-shadow:0 6px 16px rgba(255,111,71,.3);transition:box-shadow .2s var(--ease)}
  .desk-tab.desk-capture:hover{color:#fff;background:linear-gradient(145deg,#FFA062 0%,var(--capture) 45%,var(--capture-2) 100%);box-shadow:0 8px 22px rgba(255,111,71,.42)}
  .desk-toolbar .avatar-btn{margin-left:var(--s1)}

  /* Course navigator (ui/course-navigator.js) */
  .desk-sidebar{grid-column:1;grid-row:2/4;position:sticky;top:var(--desk-top);height:calc(100dvh - var(--desk-top));display:flex;flex-direction:column;min-width:0;background:var(--surface);border-right:1px solid var(--line);overflow:hidden}
  .desk.desk-side-closed .desk-sidebar{display:none}
  .cnav-head{padding:var(--s3) var(--s3) var(--s2)}
  .cnav-search{display:flex;align-items:center;gap:8px;height:44px;padding:0 12px;border-radius:14px;background:var(--bg);color:var(--muted);border:1px solid transparent}
  .cnav-search:focus-within{border-color:rgba(91,103,241,.45);background:var(--surface)}
  .cnav-search input{flex:1;min-width:0;border:0;background:none;outline:none;font-size:15px;color:var(--ink)}
  .cnav-tree{flex:1;overflow:auto;padding:0 var(--s2) var(--s3);overscroll-behavior:contain}
  .cnav-courses,.cnav-types,.cnav-sessions{list-style:none;margin:0;padding:0}
  .cnav-types{padding-left:30px;margin:0 0 6px}
  .cnav-sessions{padding-left:12px;margin:0 0 4px}
  .cnav-row{display:flex;align-items:center;gap:2px;border-radius:12px}
  .cnav-twisty{display:grid;place-items:center;width:28px;height:44px;flex:none;color:var(--muted);border-radius:8px}
  .cnav-twisty .ico{transition:transform .18s var(--ease)}
  .cnav-twisty[aria-expanded="true"] .ico{transform:rotate(90deg)}
  .cnav-link{flex:1;min-width:0;display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 10px;border-radius:12px;text-align:left;color:var(--ink);font-size:14px}
  .cnav-link strong{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
  .cnav-course-row .cnav-link strong{font-weight:700}
  .cnav-type-row .cnav-link{min-height:40px;color:var(--muted)}
  .cnav-type-row .cnav-link strong{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
  .cnav-link:hover{background:#F4F5F9}
  .cnav-row.selected>.cnav-link,.cnav-session.selected{background:var(--accent-soft);color:var(--accent)}
  .cnav-session{width:100%;flex-direction:column;align-items:stretch;justify-content:center;gap:1px}
  .cnav-session strong{flex:none}
  .cnav-session small{color:var(--muted);font-size:12px}
  .cnav-session.selected small{color:var(--accent)}
  .cnav-add{display:grid;place-items:center;width:36px;height:36px;flex:none;margin-right:2px;border-radius:10px;color:var(--accent);transition:background .15s var(--ease)}
  .cnav-add:hover{background:var(--accent-soft)}
  .cnav-dot{width:10px;height:10px;flex:none;border-radius:50%;background:var(--dot,var(--tone-fg,var(--accent)))}
  .cnav-empty,.cnav-none{padding:8px 12px;color:var(--muted);font-size:13px}
  .cnav-foot{padding:var(--s2) var(--s3) calc(var(--s3) + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
  .cnav-new{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:44px;border-radius:14px;color:var(--accent);background:var(--accent-soft);font-size:14px;font-weight:700}
  .cnav-twisty:focus-visible,.cnav-link:focus-visible,.cnav-add:focus-visible,.cnav-new:focus-visible,.crumb-link:focus-visible{outline:3px solid rgba(91,103,241,.55);outline-offset:-2px}
  .desk-count{min-width:22px;height:20px;padding:0 6px;border-radius:10px;background:#F0F1F6;color:var(--muted);font-size:11px;font-weight:700;line-height:20px;text-align:center}

  /* Breadcrumb: course › type › session, under the toolbar */
  .desk-crumb{grid-column:2;grid-row:2;position:sticky;top:var(--desk-top);z-index:40;display:none;align-items:center;min-width:0;padding:0 clamp(24px,3vw,48px);background:rgba(247,247,251,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
  .desk.desk-crumb-on:not(.hidden-chrome) .desk-crumb{display:flex}
  .crumb-list{display:flex;align-items:center;gap:2px;min-width:0;margin:0;padding:0;list-style:none;font-size:14px}
  .crumb-list li{display:flex;align-items:center;gap:2px;min-width:0}
  .crumb-link,.crumb-here span{display:block;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .crumb-link{padding:6px 8px;border-radius:10px;color:var(--muted);font-weight:600}
  .crumb-link:hover{background:#ECEEF6;color:var(--ink)}
  .crumb-here span{padding:6px 8px;color:var(--ink);font-weight:700}
  .crumb-sep{display:inline-flex;flex:none;color:var(--muted)}

  /* Séance: photos with their notes */
  .desk-session-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4);flex-wrap:wrap}
  .desk-session-actions{display:flex;flex-wrap:wrap;gap:var(--s2)}
  .desk-action{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:14px;background:var(--surface);border:1px solid var(--line);color:var(--ink);font-size:14px;font-weight:600;box-shadow:var(--shadow-sm);transition:border-color .15s var(--ease)}
  .desk-action:hover{border-color:#D9DBE7}
  #addSessionPhotos.desk-action{color:#fff;border-color:transparent;background:linear-gradient(145deg,#FFA062 0%,var(--capture) 45%,var(--capture-2) 100%)}
  .desk-session-body{display:flex;flex-direction:column;gap:var(--s5)}
  .desk-session-note,.desk-note{display:flex;flex-direction:column;gap:6px;min-width:0}
  .desk-note-label{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
  .desk-note-saved{display:inline-flex;color:var(--mint-fg);opacity:0;transition:opacity .2s var(--ease)}
  [data-note-state="saved"] .desk-note-saved{opacity:1}
  .desk-session-note textarea,.desk-note textarea{width:100%;min-height:96px;resize:none;overflow:hidden;padding:14px 16px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:16px;line-height:1.55;box-shadow:var(--shadow-sm);transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
  .desk-note textarea{min-height:180px}
  .desk-session-note textarea:focus,.desk-note textarea:focus{outline:none;border-color:rgba(91,103,241,.55);box-shadow:0 0 0 4px rgba(91,103,241,.12)}
  .desk-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s6);container-type:inline-size}
  .desk-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s3)}
  @container (min-width:620px){
    .desk-row{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--s5);align-items:start}
    .desk-note{position:sticky;top:calc(var(--desk-top) + var(--desk-crumb-h) + var(--s4))}
  }
  .desk-photo{position:relative;margin:0;border-radius:var(--r-md);overflow:hidden;background:#E6E7EF;box-shadow:var(--shadow-sm)}
  .desk-photo-btn{display:block;width:100%;cursor:zoom-in}
  .desk-photo img{display:block;width:100%;height:auto;min-height:180px;max-height:78vh;object-fit:contain;background:#E6E7EF}
  .desk-photo .num{position:absolute;left:10px;bottom:10px;min-width:24px;height:24px;padding:0 7px;border-radius:12px;background:rgba(29,33,64,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font-size:12px;font-weight:700;line-height:24px;text-align:center}
  .desk-row>.reorder-handle{left:6px;top:6px;right:auto;bottom:auto}

  /* Capture en direct */
  .desk-live{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 14px;border-radius:999px;color:var(--ink);font-size:14px;font-weight:700;border:1px solid var(--line);background:var(--surface);transition:background .15s var(--ease),color .15s var(--ease)}
  .desk-live:hover{background:#F4F5F9}
  .desk-live.active{color:var(--pink-fg);background:var(--pink);border-color:transparent}
  .live-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4);flex-wrap:wrap}
  .live-status{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:13px;font-weight:700;color:var(--muted)}
  .live-pulse{position:relative;width:10px;height:10px;border-radius:50%;background:currentColor}
  .live-status.online{color:var(--mint-fg);background:var(--mint);border-color:transparent}
  .live-status.online .live-pulse::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid currentColor;opacity:0;animation:live-ring 1.8s var(--ease) infinite}
  .live-status.pending{color:var(--yellow-fg);background:var(--yellow);border-color:transparent}
  .live-status.error,.live-status.offline{color:var(--pink-fg);background:var(--pink);border-color:transparent}
  @keyframes live-ring{0%{opacity:.7;transform:scale(.6)}100%{opacity:0;transform:scale(1.6)}}
  .live-empty{display:flex;flex-direction:column;align-items:center;gap:var(--s3);max-width:520px;margin:var(--s8) auto;padding:var(--s8) var(--s6);text-align:center;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-sm)}
  .live-empty-icon{display:grid;place-items:center;width:72px;height:72px;border-radius:24px;color:var(--accent);background:var(--accent-soft)}
  .live-empty h2{margin:0;font-size:20px;letter-spacing:-.02em}
  .live-empty ol{margin:0;padding-left:20px;text-align:left;color:var(--muted);font-size:15px;line-height:1.6}
  .desk-photo.is-loading{min-height:240px;background:linear-gradient(100deg,#ECEDF4 30%,#F6F7FB 50%,#ECEDF4 70%) 0 0/300% 100%;animation:live-shimmer 1.4s linear infinite}
  .desk-photo.is-loading img{opacity:0}
  @keyframes live-shimmer{to{background-position:-150% 0}}
  .live-new .desk-photo{box-shadow:0 0 0 3px rgba(91,103,241,.45),var(--shadow-md);animation:live-arrive .5s var(--ease)}
  @keyframes live-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

  /* ---- Toolbar: logo, Galerie, Caméra, Notes, PDF, Drive | spacer | Réglages, profile ---- */
  .desk-logo{display:inline-flex;align-items:center;height:44px;padding:0 var(--s2);border-radius:14px}
  .desk-logo:hover{background:#F4F5F9}
  .desk-logo .desk-wordmark{margin-left:0;margin-right:6px}
  .desk-toolbar-spacer{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:var(--s2)}
  .desk-tab .sync-dot{position:static;width:9px;height:9px;flex:none;border:0;margin-left:-2px}
  .desk-tab.desk-capture{margin:0 var(--s1)}
  .desk-tool.open{color:var(--accent);background:var(--accent-soft)}
  @media (min-width:768px) and (max-width:1019px){
    .desk-tab span{display:none}
    .desk-tab{padding:0 12px}
    .desk-tab.desk-capture{padding:0 14px}
  }
  /* Réglages menu (under the gear) */
  .desk-menu{position:fixed;z-index:var(--z-menu);min-width:252px;max-width:min(320px,calc(100vw - 16px));padding:var(--s2);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-lg)}
  .desk-menu-title{margin:0;padding:6px 10px 2px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
  .desk-menu hr{border:0;border-top:1px solid var(--line);margin:6px 4px}
  .desk-menu-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:0 10px;font-size:14px;font-weight:600}
  .desk-menu-item{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 10px;border-radius:12px;font-size:14px;font-weight:600;text-align:left;color:var(--ink)}
  .desk-menu-item:hover,.desk-menu-item:focus-visible{background:#F4F5F9;outline:none}
  .desk-menu-item .desk-count{margin-left:auto}

  /* ---- Galerie ---- */
  .desk:not(.hidden-chrome) .screen.gallery-screen{max-width:1600px;padding-bottom:104px}
  .gallery-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s5)}
  .gallery-head .page-intro{margin:0}
  .gallery-meta{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
  .gallery-filter-chip,.gallery-count{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:700}
  .gallery-filter-chip{background:var(--accent-soft);color:var(--accent)}
  .gallery-count{background:var(--surface);border:1px solid var(--line);color:var(--muted)}
  /* The PDF row above the photos: cards the size of a photo tile, not a third of a wide screen. */
  .gallery-screen .pdf-row{margin-bottom:var(--s4)}
  .gallery-screen .pdf-thumb{width:116px;min-width:0}
  .gallery-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:var(--s3)}
  .gallery-tile{position:relative;aspect-ratio:4/3;border-radius:18px;overflow:hidden;background:#E6E7EF;box-shadow:var(--shadow-sm);-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;transition:box-shadow .2s var(--ease)}
  .gallery-tile:hover{box-shadow:var(--shadow-md)}
  .gallery-tile-btn{display:block;width:100%;height:100%;cursor:zoom-in}
  .gallery-tile-btn:focus-visible{outline:3px solid rgba(91,103,241,.6);outline-offset:-3px;border-radius:18px}
  .gallery-tile img{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s var(--ease)}
  .gallery-tile img[src]{opacity:1}
  .gallery-tile-tag{position:absolute;left:8px;bottom:8px;max-width:calc(100% - 16px);padding:3px 9px;border-radius:999px;background:rgba(29,33,64,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
  .gallery-tile-missing{display:none;position:absolute;inset:0;place-items:center;color:var(--muted);pointer-events:none}
  .gallery-tile.is-missing .gallery-tile-missing{display:grid}
  .gallery-fab{position:fixed;right:max(24px,env(safe-area-inset-right));bottom:max(24px,calc(env(safe-area-inset-bottom) + 16px));z-index:var(--z-fab);display:grid;place-items:center;width:64px;height:64px;border-radius:50%;color:#fff;background:linear-gradient(145deg,#FFA062 0%,var(--capture) 45%,var(--capture-2) 100%);box-shadow:0 12px 30px rgba(255,111,71,.45);transition:transform .15s var(--ease),box-shadow .2s var(--ease)}
  .gallery-fab:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 16px 36px rgba(255,111,71,.5)}
  .gallery-fab:active{transform:scale(.96)}
  .gallery-fab:focus-visible{outline:3px solid rgba(255,111,71,.5);outline-offset:3px}
  /* "Changer la position" sheet */
  .pos-picker{display:flex;align-items:center;justify-content:center;gap:var(--s4);padding:var(--s3) 0}
  .pos-step{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:26px;font-weight:700;line-height:1}
  .pos-picker output{min-width:96px;text-align:center;font-size:15px;color:var(--muted)}
  .pos-picker output strong{font-size:34px;color:var(--ink)}
  .pos-quick{display:flex;gap:var(--s2);justify-content:center;margin-bottom:var(--s3)}
  .pos-move{display:block;margin:var(--s2) auto 0}

  /* ---- Notes: the free page ---- */
  .desk.desk-notes:not(.hidden-chrome) .main{padding:0}
  .canvas-screen{display:flex;flex-direction:column;height:calc(100dvh - var(--desk-top) - var(--desk-crumb-h));min-height:0;background:#ECEEF6}
  .canvas-screen.cv-empty{align-items:center;justify-content:center;padding:0 var(--s5)}
  .cv-tools{flex:none;display:flex;align-items:center;gap:var(--s2);padding:8px var(--s3);background:var(--surface);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
  .cv-tools::-webkit-scrollbar{display:none}
  .cv-group{display:flex;align-items:center;gap:2px;flex:none}
  .cv-sep{flex:none;width:1px;height:26px;margin:0 4px;background:var(--line)}
  .cv-btn{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:12px;color:var(--ink);transition:background .15s var(--ease),color .15s var(--ease)}
  .cv-btn:hover{background:#F0F1F6}
  .cv-btn.active{background:var(--accent-soft);color:var(--accent);box-shadow:inset 0 0 0 1.5px rgba(91,103,241,.5)}
  .cv-btn:focus-visible,.cv-color:focus-visible,.cv-bar button:focus-visible,.cv-tray-fab:focus-visible,.cv-thumb:focus-visible{outline:3px solid rgba(91,103,241,.55);outline-offset:1px}
  .cv-color{flex:none;width:30px;height:30px;margin:0 3px;border-radius:50%;background:var(--c);border:3px solid var(--surface);box-shadow:0 0 0 1px var(--line)}
  .cv-color.active{box-shadow:0 0 0 2.5px var(--accent)}
  .cv-dot{display:block;width:var(--d);height:var(--d);border-radius:50%;background:currentColor}
  .cv-stage{position:relative;flex:1;min-height:0}
  .cv-viewport{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:16px 0 160px;-webkit-overflow-scrolling:touch}
  .cv-sheet{position:relative;margin:0 auto;background:#fff;border-radius:6px;box-shadow:var(--shadow-md);touch-action:pan-y pinch-zoom;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
  .cv-sheet.tool-select .cv-item{touch-action:none}
  .cv-sheet.finger-draw:not(.tool-select):not(.tool-hand){touch-action:none}
  .cv-sheet.tool-hand{cursor:grab}
  .cv-sheet.tool-pen,.cv-sheet.tool-highlighter{cursor:crosshair}
  .cv-sheet.tool-text{cursor:text}
  .cv-sheet.tool-eraser{cursor:none}
  .cv-world{position:absolute;left:0;top:0;width:1000px;transform-origin:0 0;isolation:isolate;overflow:hidden;border-radius:6px}
  .cv-bg,.cv-items{position:absolute;inset:0}
  /* The gap between two A4 sheets (64 units centred on the cut, 1414 = CANVAS_PAGE_H; photos keep clear of it): the PDF is cut exactly in its middle */
  .cv-world::after{content:"";position:absolute;left:0;right:0;top:32px;bottom:0;z-index:3;pointer-events:none;background:repeating-linear-gradient(to bottom,transparent 0,transparent 1350px,rgba(80,107,255,.5) 1350px,rgba(80,107,255,.5) 1353px,#E3E7F3 1353px,#E3E7F3 1411px,rgba(80,107,255,.5) 1411px,rgba(80,107,255,.5) 1414px)}
  /* Items keep their own z-order inside .cv-items (a stacking context of its own); the ink is a layer above all of them. */
  .cv-items{z-index:0}
  .cv-world[data-bg="lines"] .cv-bg{background-image:linear-gradient(to bottom,transparent calc(100% - 1.5px),#D9DEEF calc(100% - 1.5px));background-size:100% 44px}
  .cv-world[data-bg="grid"] .cv-bg{background-image:linear-gradient(to bottom,transparent calc(100% - 1.5px),#D9DEEF calc(100% - 1.5px)),linear-gradient(to right,transparent calc(100% - 1.5px),#D9DEEF calc(100% - 1.5px));background-size:100% 44px,44px 100%}
  .cv-item{position:absolute;box-sizing:border-box}
  .cv-photo{outline:1px solid rgba(29,33,64,.14);background:#EEF0F7}
  .cv-photo img{display:block;width:100%;height:100%;pointer-events:none;-webkit-user-drag:none}
  .cv-photo .cv-missing{display:none}
  .cv-photo.is-missing img{display:none}
  .cv-photo.is-missing .cv-missing{display:grid;place-items:center;gap:6px;height:100%;color:var(--muted);font-size:14px}
  .cv-text{text-rendering:geometricPrecision;font-kerning:normal}
  .cv-text-lines{white-space:pre;pointer-events:none}
  .cv-text.editing{outline:2px solid rgba(91,103,241,.6);border-radius:4px;background:rgba(255,255,255,.88)}
  .cv-text-edit{display:block;width:100%;margin:0;padding:0;border:0;outline:none;resize:none;overflow:hidden;background:transparent;font:inherit;line-height:inherit;color:inherit;white-space:pre-wrap;overflow-wrap:break-word;-webkit-user-select:text;user-select:text;touch-action:auto}
  .cv-ink{position:absolute;left:0;top:0;z-index:1;overflow:visible;pointer-events:none}
  .cv-ink .hl{mix-blend-mode:multiply}
  .cv-overlay{position:absolute;inset:0;overflow:visible;pointer-events:none}
  .cv-sel{position:absolute;border:2px solid var(--accent);border-radius:4px;box-shadow:0 0 0 1px rgba(255,255,255,.9);pointer-events:none}
  /* The handle takes the press itself (it can stick out of the sheet when a photo touches the page edge); its events bubble to the sheet. */
  .cv-handle{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:#fff;border:3px solid var(--accent);box-shadow:var(--shadow-sm);pointer-events:auto;touch-action:none;cursor:nwse-resize}
  .cv-handle::after{content:"";position:absolute;inset:-14px;border-radius:50%}
  .cv-bar{position:absolute;display:flex;gap:2px;padding:4px;border-radius:14px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-md);transform:translateX(-50%);pointer-events:auto;touch-action:manipulation}
  .cv-bar button{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;color:var(--ink)}
  .cv-bar button:hover{background:#F0F1F6}
  .cv-bar .danger{color:var(--danger)}
  .cv-eraser{position:absolute;display:none;border:2px solid rgba(229,72,107,.8);background:rgba(229,72,107,.1);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}
  /* Photo tray (floating, collapsible) */
  .cv-tray{position:absolute;left:12px;top:12px;z-index:5;display:flex;max-height:calc(100% - 24px)}
  .cv-tray-panel{display:flex;flex-direction:column;width:132px;max-height:100%;overflow:hidden;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-md)}
  .cv-tray-panel header{display:flex;align-items:center;gap:6px;padding:8px 6px 8px 12px;font-size:13px}
  .cv-tray-n{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#F0F1F6;color:var(--muted);font-size:11px;font-weight:700;line-height:20px;text-align:center}
  .cv-tray-close{display:grid;place-items:center;margin-left:auto;width:32px;height:32px;border-radius:10px;color:var(--muted)}
  .cv-tray-close:hover{background:#F0F1F6}
  .cv-tray-list{display:flex;flex-direction:column;gap:8px;margin:0;padding:0 8px 8px;list-style:none;overflow-y:auto;overscroll-behavior:contain}
  .cv-thumb{position:relative;display:block;width:100%;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:#E6E7EF;touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
  .cv-thumb img{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .2s var(--ease)}
  .cv-thumb.loaded img{opacity:1}
  .cv-thumb.placed.loaded img{opacity:.55}
  .cv-thumb.is-new{box-shadow:0 0 0 2.5px var(--accent)}
  .cv-thumb.dragging{opacity:.4}
  .cv-thumb.flash{animation:cv-flash 1.4s var(--ease)}
  @keyframes cv-flash{0%{transform:scale(.92);box-shadow:0 0 0 0 rgba(91,103,241,.6)}40%{transform:scale(1.03);box-shadow:0 0 0 8px rgba(91,103,241,.25)}100%{transform:none}}
  .cv-badge{position:absolute;display:inline-flex;align-items:center;justify-content:center;font-weight:700}
  .cv-badge.new{left:6px;top:6px;height:20px;padding:0 8px;border-radius:10px;background:var(--accent);color:#fff;font-size:11px}
  .cv-badge.check{right:6px;top:6px;width:22px;height:22px;border-radius:50%;background:var(--mint-fg);color:#fff}
  .cv-tray-hint,.cv-tray-empty{margin:0;padding:0 12px 12px;color:var(--muted);font-size:11px;line-height:1.4}
  .cv-tray-fab{position:relative;display:flex;align-items:center;gap:6px;height:44px;padding:0 14px 0 12px;border-radius:999px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-md);color:var(--ink);font-size:14px;font-weight:700}
  .cv-dot-new{position:absolute;right:2px;top:2px;width:12px;height:12px;border-radius:50%;background:var(--capture);border:2px solid var(--surface)}
  .cv-ghost{position:fixed;left:0;top:0;z-index:80;width:96px;border-radius:12px;overflow:hidden;box-shadow:var(--shadow-lg);opacity:.92;pointer-events:none}
  .cv-ghost img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
  .cv-ghost.on-page{outline:2px solid var(--accent)}
  /* "Enregistrement… / Enregistré" in the top bar */
  .cv-status{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap;color:var(--mint-fg);background:var(--mint)}
  .cv-status.saving{color:var(--yellow-fg);background:var(--yellow)}
  .cv-status.saving svg{display:none}
  .cv-status.saving::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;animation:cv-pulse 1s var(--ease) infinite}
  .cv-status.error{color:var(--pink-fg);background:var(--pink)}
  @keyframes cv-pulse{0%,100%{opacity:.35}50%{opacity:1}}
  @media (min-width:768px) and (max-width:1019px){
    .cv-status span{display:none}
    .cv-status{padding:0 9px}
  }
}
/* =====================================================================
   DARK MODE — [data-theme="dark"] on <html>, set by the early script in
   index.html and the Profile toggle (localStorage 'holioo-theme').
   ===================================================================== */
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0F1020;--surface:#1A1C30;--ink:#ECEEFB;--muted:#9CA1BB;--line:#2A2D47;
  --accent:#7A85FF;--accent-soft:#252848;--danger:#FF6B8A;
  --lavender:#2A2650;--lavender-fg:#B5A5FF;
  --mint:#14322A;--mint-fg:#4FD9A6;
  --peach:#3A2519;--peach-fg:#FF9468;
  --pink:#3B1E28;--pink-fg:#FF8FA6;
  --yellow:#352C0F;--yellow-fg:#F2BF3A;
  --sky:#16294A;--sky-fg:#6AAAFF;
  --shadow-sm:0 2px 8px rgba(0,0,0,.3);--shadow-md:0 10px 30px rgba(0,0,0,.4);--shadow-lg:0 18px 50px rgba(0,0,0,.5);
}
[data-theme="dark"] body{background:var(--bg);color:var(--ink)}
[data-theme="dark"] .bottom-nav::before{background:rgba(26,28,48,.82);border-color:rgba(255,255,255,.08)}
[data-theme="dark"] .bottom-nav{background:rgba(26,28,48,.94)}
[data-theme="dark"] .ink-toolbar,[data-theme="dark"] .session-view-toggle{background:rgba(26,28,48,.92)}
[data-theme="dark"] .radial-title,[data-theme="dark"] .radial-item small{background:rgba(26,28,48,.97)}
[data-theme="dark"] .radial-item,[data-theme="dark"] .radial-lens-label,[data-theme="dark"] .inline-rename,[data-theme="dark"] .qc-bubble-btn{background:var(--surface)}
[data-theme="dark"] .category-card small,[data-theme="dark"] .stat-card small,[data-theme="dark"] .collection-card small,[data-theme="dark"] .folder-card small,[data-theme="dark"] .files-image-session-head small{color:var(--muted)}
[data-theme="dark"] .category-card .progress{background:rgba(255,255,255,.12)}
[data-theme="dark"] .image-tile,[data-theme="dark"] .thumb{background:#262947}
[data-theme="dark"] .thumb .check,[data-theme="dark"] .thumb .group-tag{background:var(--surface);color:var(--ink)}
[data-theme="dark"] .thumb .check{color:var(--accent)}
[data-theme="dark"] .badge{background:#2A2D47}
[data-theme="dark"] .hero-card{background:linear-gradient(135deg,#2A2650 0%,#1B2447 100%)}
[data-theme="dark"] .hero-card::before{background:radial-gradient(circle,rgba(255,255,255,.08),rgba(255,255,255,0) 70%)}
[data-theme="dark"] .pdf-pages{background:#0B0C16}
[data-theme="dark"] .course-managed .reorder-handle{color:var(--ink)}
[data-theme="dark"] .switch::after{background:#fff}
[data-theme="dark"] .desk-toolbar,[data-theme="dark"] .cv-tray-panel{background:rgba(26,28,48,.94)}
[data-theme="dark"] .desk-tool:hover,[data-theme="dark"] .desk-tab:hover,[data-theme="dark"] .cnav-link:hover,[data-theme="dark"] .crumb-link:hover,[data-theme="dark"] .desk-live:hover,[data-theme="dark"] .desk-logo:hover,[data-theme="dark"] .desk-menu-item:hover,[data-theme="dark"] .desk-menu-item:focus-visible,[data-theme="dark"] .cv-btn:hover,[data-theme="dark"] .cv-bar button:hover,[data-theme="dark"] .cv-tray-close:hover{background:#2A2D47}
[data-theme="dark"] .desk-count,[data-theme="dark"] .cv-tray-n{background:#2A2D47}
[data-theme="dark"] .desk-photo,[data-theme="dark"] .desk-photo img,[data-theme="dark"] .gallery-tile,[data-theme="dark"] .cv-thumb{background:#262947}
[data-theme="dark"] .desk-photo.is-loading{background:linear-gradient(100deg,#1F2140 30%,#2A2D4D 50%,#1F2140 70%) 0 0/300% 100%}
[data-theme="dark"] .canvas-screen{background:#0B0C16}
[data-theme="dark"] .cv-photo{background:#262947}

/* =====================================================================
   ÉPURÉ (2/2) — the desk layout (window ≥ 768px): toolbar 40px, navigator 200px, breadcrumb, Galerie, Notes.
   Same palette, sizes and phone / landscape-phone exclusions as part 1/2 (before the desk section above),
   which sets the tokens used here. Sits after the desk and dark-theme rules so it overrides them at equal
   specificity; their dark-theme rules are more specific and keep winning in the dark theme.
   ===================================================================== */
@media (min-width:768px) and (min-height:521px),(min-width:960px){
  .desk{--desk-bar-h:40px;--desk-side-w:var(--rail-w);--desk-crumb-h:0px}
  .desk.desk-crumb-on{--desk-crumb-h:32px}
  .desk:not(.hidden-chrome) .main{padding:var(--s6) var(--s6) calc(var(--s8) + env(safe-area-inset-bottom))}

  /* Toolbar: 40px, 28px buttons, 16px icons */
  .desk-toolbar{gap:var(--s2);padding:env(safe-area-inset-top) var(--s3) 0;background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}
  .desk-toolbar-start,.desk-toolbar-end,.desk-toolbar-nav{gap:var(--s1)}
  .desk-wordmark{margin-left:var(--s1);font-size:16px}
  .desk-logo{height:28px;padding:0 var(--s2);border-radius:6px}
  .desk-logo:hover,.desk-tool:hover,.desk-tab:hover{background:var(--hover)}
  .desk-tool{width:28px;height:28px;border-radius:6px}
  .desk-tool[aria-expanded="true"],.desk-tool.open{background:var(--accent-soft)}
  /* 6px each side: an icon-only tab (narrow window) is exactly 28px wide; with a label it gets 2px more on the right. */
  .desk-tab,.desk-tab.desk-capture,.desk-tab.desk-capture:hover{gap:var(--s2);height:28px;padding:0 6px;border-radius:6px;font-size:13px}
  .desk-tab span{padding-right:2px}
  .desk-tab.active{background:var(--accent-soft)}
  .desk-tab.desk-capture,.desk-tab.desk-capture:hover{margin:0 var(--s1);font-weight:600;background:var(--accent);box-shadow:none}
  .desk-tab.desk-capture:hover{opacity:.9}
  .desk-tab .sync-dot{width:8px;height:8px}
  .desk-toolbar .avatar-btn{margin-left:0}
  .desk-count{min-width:20px;height:18px;padding:0 var(--s2);border-radius:6px;background:var(--line);font-size:12px;line-height:18px}
  .cv-status{height:24px;padding:0 var(--s3);border-radius:6px;font-size:12px}

  /* Course navigator (left): 200px, rows 28px */
  .cnav-head{padding:var(--s3) var(--s3) var(--s2)}
  .cnav-search{gap:var(--s2);height:28px;padding:0 var(--s3);border:1px solid var(--line);border-radius:6px}
  .cnav-search:focus-within{border-color:var(--accent)}
  .cnav-search input{font-size:13px}
  .cnav-tree{padding:0 var(--s2) var(--s3)}
  .cnav-types{padding-left:20px;margin:0 0 var(--s1)}
  .cnav-sessions{padding-left:var(--s3);margin:0 0 2px}
  .cnav-row{border-radius:6px}
  .cnav-twisty{width:20px;height:28px;border-radius:6px}
  .cnav-link{gap:var(--s2);min-height:28px;padding:var(--s1) var(--s3);border-radius:6px;font-size:13px}
  .cnav-type-row .cnav-link{min-height:24px}
  .cnav-type-row .cnav-link strong{letter-spacing:.04em}
  .cnav-link:hover{background:var(--hover)}
  .cnav-session strong,.cnav-session small{line-height:1.25}
  .cnav-session{gap:1px}
  .cnav-add{width:24px;height:24px;margin-right:0;border-radius:6px}
  .cnav-dot{width:8px;height:8px}
  .cnav-empty,.cnav-none{padding:var(--s2) var(--s3);font-size:12px}
  .cnav-foot{padding:var(--s2) var(--s3) calc(var(--s3) + env(safe-area-inset-bottom))}
  .cnav-new{gap:var(--s2);height:28px;border-radius:6px;font-size:13px}
  .cnav-twisty:focus-visible,.cnav-link:focus-visible,.cnav-add:focus-visible,.cnav-new:focus-visible,.crumb-link:focus-visible{outline:2px solid rgba(0,122,255,.55);outline-offset:-2px}

  /* Breadcrumb */
  .desk-crumb{padding:0 var(--s6);background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}
  .crumb-list{font-size:13px}
  .crumb-link{padding:var(--s1) var(--s2);border-radius:6px}
  .crumb-link:hover{background:var(--hover)}
  .crumb-here span{padding:var(--s1) var(--s2)}

  /* Séance: photos beside their notes */
  .desk-session-head,.live-head,.gallery-head{gap:var(--s3)}
  .desk-session-actions{gap:var(--s2)}
  .desk-action{gap:var(--s2);min-height:28px;padding:0 var(--s4);border-radius:6px;font-size:13px;box-shadow:none}
  .desk-action:hover{border-color:var(--muted)}
  #addSessionPhotos.desk-action{background:var(--accent)}
  .desk-session-body{gap:var(--s4)}
  .desk-session-note,.desk-note{gap:var(--s1)}
  .desk-note-label{font-size:12px}
  .desk-session-note textarea,.desk-note textarea{min-height:72px;padding:var(--s3) var(--s4);border-radius:6px;font-size:13px;line-height:1.5;box-shadow:none}
  .desk-note textarea{min-height:120px}
  .desk-session-note textarea:focus,.desk-note textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,122,255,.14)}
  .desk-rows{gap:var(--s4)}
  .desk-row{gap:var(--s3)}
  @container (min-width:620px){
    .desk-row{gap:var(--s4)}
    .desk-note{top:calc(var(--desk-top) + var(--desk-crumb-h) + var(--s3))}
  }
  .desk-photo{border:1px solid var(--line);border-radius:6px;box-shadow:none}
  .desk-photo .num{left:6px;bottom:6px;min-width:20px;height:20px;padding:0 var(--s2);border-radius:10px;line-height:20px}
  .desk-row>.reorder-handle{left:4px;top:4px}

  /* Capture en direct */
  .desk-live{gap:var(--s2);height:28px;padding:0 var(--s3);border-radius:6px;font-size:13px}
  .desk-live:hover{background:var(--hover)}
  .live-status{gap:var(--s2);min-height:24px;padding:0 var(--s3);border-radius:6px;font-size:12px}
  .live-pulse{width:8px;height:8px}
  .live-empty{gap:var(--s3);max-width:420px;margin:var(--s6) auto;padding:var(--s6);border:1px solid var(--line);border-radius:6px;box-shadow:none}
  .live-empty-icon{width:40px;height:40px;border-radius:6px}
  .live-empty h2{font-size:15px}
  .live-empty ol{padding-left:var(--s6);font-size:13px;line-height:1.5}
  .live-new .desk-photo{box-shadow:0 0 0 2px rgba(0,122,255,.5)}

  /* Galerie */
  .desk:not(.hidden-chrome) .screen.gallery-screen{padding-bottom:56px}
  .gallery-head{margin-bottom:var(--s3)}
  .gallery-meta{gap:var(--s2)}
  .gallery-filter-chip,.gallery-count{height:24px;padding:0 var(--s3);border-radius:6px;font-size:12px}
  .gallery-grid{grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:var(--s2)}
  .gallery-tile{border:1px solid var(--line);border-radius:6px;box-shadow:none}
  .gallery-tile:hover{border-color:var(--accent);box-shadow:none}
  .gallery-tile-btn:focus-visible{outline:2px solid rgba(0,122,255,.6);border-radius:6px}
  .gallery-tile-tag{left:4px;bottom:4px;max-width:calc(100% - 8px);padding:2px var(--s2);border-radius:6px;font-size:12px}
  .gallery-fab{right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));width:28px;height:28px;border-radius:6px;background:var(--accent);box-shadow:var(--shadow-lg)}
  .gallery-fab:hover{transform:none;box-shadow:var(--shadow-lg);opacity:.9}
  .gallery-fab:active{transform:none}
  .gallery-fab:focus-visible{outline:2px solid rgba(0,122,255,.5);outline-offset:2px}
  .pos-picker{gap:var(--s3);padding:var(--s2) 0}
  .pos-step{width:28px;height:28px;border-radius:6px;font-size:16px}
  .pos-picker output{min-width:72px;font-size:13px}
  .pos-picker output strong{font-size:18px}
  .pos-quick{gap:var(--s2);margin-bottom:var(--s2)}

  /* Notes: the free page */
  .canvas-screen{background:var(--line)}
  .cv-tools{gap:var(--s2);padding:var(--s2) var(--s3)}
  .cv-sep{height:16px;margin:0 var(--s1)}
  .cv-btn{width:28px;height:28px;border-radius:6px}
  .cv-btn:hover{background:var(--hover)}
  .cv-btn.active{box-shadow:inset 0 0 0 1px var(--accent)}
  .cv-color{width:20px;height:20px;margin:0 2px;border-width:2px}
  .cv-bar{padding:2px;border-radius:6px;box-shadow:var(--shadow-lg)}
  .cv-bar button{width:28px;height:28px;border-radius:6px}
  .cv-bar button:hover{background:var(--hover)}
  .cv-tray-panel{border-radius:6px;box-shadow:var(--shadow-lg)}
  .cv-tray-panel header{padding:var(--s2) var(--s1) var(--s2) var(--s3);font-size:12px}
  .cv-tray-n{min-width:20px;height:18px;border-radius:6px;background:var(--line);font-size:12px;line-height:18px}
  .cv-tray-close{width:24px;height:24px;border-radius:6px}
  .cv-tray-close:hover{background:var(--hover)}
  .cv-tray-list{gap:var(--s2);padding:0 var(--s2) var(--s2)}
  .cv-thumb,.cv-ghost{border-radius:6px}
  .cv-badge.new{height:18px;border-radius:6px;font-size:12px}
  .cv-badge.check{width:18px;height:18px}
  .cv-tray-hint,.cv-tray-empty{padding:0 var(--s3) var(--s3);font-size:12px}
  .cv-tray-fab{gap:var(--s2);height:28px;padding:0 var(--s3);border-radius:6px;font-size:13px;box-shadow:var(--shadow-lg)}
  .cv-btn:focus-visible,.cv-color:focus-visible,.cv-bar button:focus-visible,.cv-tray-fab:focus-visible,.cv-thumb:focus-visible{outline:2px solid rgba(0,122,255,.55)}

  /* Réglages menu (under the gear) */
  .desk-menu{min-width:220px;padding:var(--s2);border-radius:6px}
  .desk-menu-title{padding:var(--s2) var(--s3) var(--s1)}
  .desk-menu hr{margin:var(--s2) var(--s1)}
  .desk-menu-row,.desk-menu-item{min-height:28px;padding:0 var(--s3);font-size:13px}
  .desk-menu-item{gap:var(--s3);border-radius:6px}
  .desk-menu-item:hover,.desk-menu-item:focus-visible{background:var(--hover)}
}
/* Touch screens: the desk's text fields stay 16px so iPad Safari doesn't zoom in on focus. */
@media (min-width:768px) and (min-height:521px) and (pointer:coarse),(min-width:960px) and (pointer:coarse){
  .desk .cnav-search input,.desk .desk-session-note textarea,.desk .desk-note textarea{font-size:16px}
  /* Finger: invisible 40px-tall touch layer around the 28px toolbar / canvas buttons (see part 1/2). */
  .desk-logo,.desk-tool,.desk-tab,.cv-btn,.cv-bar button,.cv-tray-close,.cnav-add,.cnav-twisty{position:relative}
  .desk-logo::after,.desk-tool::after,.desk-tab::after,.cv-btn::after,.cv-bar button::after,.cv-tray-close::after,.cnav-add::after,.cnav-twisty::after{content:"";position:absolute;inset:-6px -2px}
}

/* ⋯ grip: the same blue, smaller, as frosted glass (translucent + blur + hairline border) */
.reorder-handle .grip,.course-managed .reorder-handle .grip,.pdf-thumb .reorder-handle .grip{width:22px;height:22px;background:rgba(80,107,255,.38);border:1px solid rgba(255,255,255,.5);-webkit-backdrop-filter:blur(8px) saturate(1.6);backdrop-filter:blur(8px) saturate(1.6);box-shadow:0 2px 8px rgba(80,107,255,.25),inset 0 1px 0 rgba(255,255,255,.35)}
.reorder-handle .grip::before,.reorder-handle .grip::after{width:4px;height:4px;margin-left:-2px}
.reorder-handle .grip::before{top:calc(50% - 5px)}
.reorder-handle .grip::after{top:calc(50% + 1px)}
.reorder-handle,.course-managed .reorder-handle,.pdf-thumb .reorder-handle{color:#fff}
@media (min-width:768px){.reorder-handle .grip{width:18px;height:18px}.reorder-handle .grip::before,.reorder-handle .grip::after{width:3px;height:3px;margin-left:-1.5px}.reorder-handle .grip::before{top:calc(50% - 4px)}.reorder-handle .grip::after{top:calc(50% + 1px)}}
/* ⋯ menu actions (Renommer / Déplacer, Supprimer): light frosted glass; the lensed action keeps its colour */
.radial.item-menu .radial-item.r1:not(.hot):not(.parent){background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(10px) saturate(1.5);backdrop-filter:blur(10px) saturate(1.5);box-shadow:0 8px 22px rgba(29,33,64,.18),inset 0 0 0 2px var(--c),inset 0 1px 0 rgba(255,255,255,.6)}
[data-theme="dark"] .radial.item-menu .radial-item.r1:not(.hot):not(.parent){background:rgba(36,39,66,.55)}
/* ⋯ menu, pressed: the grip turns into the same blue, small and frosted (it was a large solid disc); the action under the finger is tinted glass, not solid */
.radial.item-menu .radial-center{width:30px;height:30px;margin:-15px 0 0 -15px;background:rgba(80,107,255,.42);border:1px solid rgba(255,255,255,.5);-webkit-backdrop-filter:blur(8px) saturate(1.6);backdrop-filter:blur(8px) saturate(1.6);box-shadow:0 2px 8px rgba(80,107,255,.25),inset 0 1px 0 rgba(255,255,255,.35)}
.radial.item-menu .radial-center .ico{width:15px;height:15px}
.radial.item-menu.center-hot .radial-center{background:rgba(29,33,64,.5)}
.radial.item-menu .radial-item.r1.hot,.radial.item-menu .radial-item.r1.parent{background:color-mix(in srgb,var(--c) 72%,transparent);-webkit-backdrop-filter:blur(10px) saturate(1.6);backdrop-filter:blur(10px) saturate(1.6);box-shadow:0 8px 22px rgba(29,33,64,.2),inset 0 0 0 1.5px rgba(255,255,255,.6),inset 0 1px 0 rgba(255,255,255,.5)}