.lens-annotation-tools { margin:0 0 12px; }
.lens-annotation-heading { display:grid; grid-template-columns:minmax(145px,1fr) auto; align-items:center; gap:12px; }
.lens-annotation-heading p { margin:0; color:var(--muted); font-size:14px; line-height:1.5; }
.lens-annotation-tools button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:10px 13px; border:1px solid var(--line); border-radius:10px; background:#1a1e2b; color:#e6e7ef; font:inherit; font-size:14px; cursor:pointer; touch-action:manipulation; }
.lens-annotation-tools svg { width:19px; height:19px; flex:none; }
.lens-annotation-tools button:focus-visible { outline:3px solid var(--yellow); outline-offset:3px; }
.lens-annotation-tools .lens-pen-toggle { flex:none; border-color:#755998; color:#eadbff; }
.lens-annotation-tools .lens-pen-toggle[aria-pressed="true"] { background:var(--yellow); border-color:var(--yellow); color:#211d14; }
.lens-pen-palette { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:13px; margin-top:12px; border:1px solid #483857; border-radius:12px; background:#171922; }
.lens-pen-palette[hidden] { display:none; }
.lens-pen-colors,.lens-pen-actions { display:flex; align-items:center; gap:7px; }
.lens-pen-colors { flex-wrap:wrap; }
.lens-pen-actions { margin-left:auto; }
.lens-pen-colors i { width:19px; height:19px; border-radius:50%; background:var(--ink); border:1px solid #ffffffb3; flex:none; }
.lens-pen-colors button[aria-pressed="true"] { border-color:#c3a8ef; background:#39284f; box-shadow:inset 0 0 0 1px #c3a8ef; }
.lens-annotation-tools button:disabled { opacity:.4; cursor:default; }
.lens-pen-palette p { flex-basis:100%; margin:0; color:var(--faint); font-size:12px; line-height:1.5; }
.lens-annotation-surface { position:absolute; inset:0; width:100%; height:100%; z-index:9; pointer-events:none; overflow:hidden; }
.lens-annotation-surface.is-drawing { pointer-events:auto; touch-action:none; cursor:crosshair; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.lens-annotation-surface.is-drawing:focus { outline:none; }
.lens-annotation-surface.is-drawing:focus-visible { outline:2px solid var(--yellow); outline-offset:-3px; }
@media(max-width:720px) {
  .lens-annotation-heading { gap:8px; }
  .lens-annotation-heading p { font-size:14px; }
  .lens-pen-palette { padding:10px; gap:10px; }
  .lens-pen-colors { width:100%; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
  .lens-pen-colors button { flex-direction:column; gap:5px; padding:8px 4px; }
  .lens-pen-actions { margin:0; width:100%; }
  .lens-pen-actions button { flex:1; }
}
.lens-presentation-controls { display:flex; align-items:flex-end; gap:10px; flex:none; }

/* Multifocal addition: horizontal drag above the simulation, keeping the lens image unobstructed. */
.mf-addition-inline {
  min-width:0; width:100%; min-height:44px;
  display:grid; grid-template-columns:auto minmax(180px,1fr); align-items:center; gap:10px;
  padding:5px 10px; border:1px solid #ffffff24; border-radius:10px; background:#0e132099;
  box-shadow:0 5px 18px #0004; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  color:#f5f1fb; user-select:none; -webkit-user-select:none;
}
.mf-addition-inline-copy { display:flex; align-items:baseline; gap:7px; white-space:nowrap; }
.mf-addition-title { font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:#d9c7f5; }
.mf-addition-value { min-width:58px; font-size:14px; font-weight:750; color:#68f1e0; font-variant-numeric:tabular-nums; }
.mf-addition-slider-shell { display:grid; grid-template-columns:auto minmax(100px,1fr) auto; align-items:center; gap:7px; min-width:0; }
.mf-addition-bound { color:#aeb8ca; font-size:9px; line-height:1; font-variant-numeric:tabular-nums; white-space:nowrap; }
.mf-addition-range {
  width:100%; height:24px; margin:0; padding:0; accent-color:#49e4d0; cursor:ew-resize; touch-action:pan-y;
}
.mf-addition-range:focus-visible { outline:3px solid var(--yellow); outline-offset:2px; border-radius:10px; }
@media(max-width:640px) {
  .lens-annotation-heading { grid-template-columns:minmax(120px,1fr) auto; gap:8px; }
  .lens-annotation-heading p { font-size:12px; }
  .mf-addition-inline { grid-template-columns:auto minmax(130px,1fr); gap:7px; padding:5px 7px; }
  .mf-addition-slider-shell { grid-template-columns:minmax(95px,1fr); }
  .mf-addition-bound { display:none; }
  .mf-addition-value { min-width:52px; font-size:13px; }
}
@media(max-width:500px) {
  .lens-annotation-heading { grid-template-columns:1fr auto; }
  .lens-annotation-heading>p { grid-column:1; }
  .lens-presentation-controls { grid-column:2; grid-row:1; }
  .mf-addition-inline { grid-template-columns:auto minmax(120px,1fr); }
  .mf-addition-slider-shell { grid-template-columns:auto minmax(90px,1fr) auto; }
  .mf-addition-bound { display:inline; font-size:8px; }
}